/* Shared styles for every Bingo maker page.
   A themed page keeps this file and overrides only the
   --card, --free, --pink and --pink-dark variables. */
:root{
  --navy:#0A265C;
  --text:#1F3349;
  --pink:#ff77b8;
  --pink-dark:#f94b9c;
  --light:#f4f8ff;
  --line:#d9e5f6;
  --blue:#3b6df6;
  --green:#18864b;
  --green-bg:#eaf8ef;
  --muted:#6c7d93;
  --white:#fff;
  --shadow:0 10px 30px rgba(20,45,90,.08);

  /* ---- theme colours ----------------------------------------------
     A themed page overrides these four in its own <style> block.
     --card  frame, header bar and grid lines
     --free  star and the free square wording
     --pink / --pink-dark  buttons
     ------------------------------------------------------------------ */
  --card:#5D81B2;
  --free:#5D81B2;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family.:Arial,Helvetica,sans-serif;
  color:var(--text);
  background: linear-gradient(180deg, #eef4ff 0%, #ffffff 58%);
}
h1 { font-family: Georgia, serif; font-size: 1.8em; line-height: 1.4; max-width.: 17em; border.: 1px solid silver;}
.bingo-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:16px 18px 50px;
}
   button {
      margin: 0;
      padding: 0;
      font-size: 0.9em;
      background: transparent;
      white-space: wrap;
      text-decoration: none;
    }
    button:hover { background: #d9e5f6 !important; text-decoration: none; transition:0s ease; }   
.seo-text { margin: 20px auto 20px auto; padding: 0px 10px; line-height: 1.75; max-width: 960px; }

.bingo-title{text-align.:center;margin:0 0 6px;color:var(--navy);font-size.:clamp(32px,4vw,48px);line-height:1.1}
.bingo-subtitle{text-align.:center;max-width:980px;margin:0 0 2px;line-height:1.6;color.:#334d72; font-size: 20px; }
.bingo-nav{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  justify-content.:center;
  margin:0 0 16px;
}
.bingo-nav a{
  text-decoration:none;
  color:#2e59d9;
  border:1px solid #4d75f3;
  border-radius:8px;
  padding:0px 10px;
  background:#fff;
  font-size:14px;
  transition:.18s ease;
}
.bingo-nav a:hover{background.:#f6f7fd; color:var(--navy); border: 1px solid var(--navy); }
.bingo-nav a.active{background.:#f6f7fd;font-weight:700;color:var(--navy); border: 1px solid var(--navy); }
.bingo-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,0.99fr);
  gap:24px;
  align-items:start;
}
.panel{
  background:#fff;
  border:1px solid  #bcd3f2;
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:10px 22px;
}
.section-title{
  margin:0 0 3px;
  color:var(--navy);
  font-size:20px;
}
.section-help{margin:0 0 4px;color:#58708f;font-size:18px;line-height:1.45}
textarea{
  width:100%;
  height:163px;
  min-height:160px;
  resize:vertical;
  border:1px solid #cfd9e8;
  border-radius:10px;
  padding:4px 4px 4px 15px;
  font:16px/1.5 Arial,Helvetica,sans-serif;
  color:#152d4d;
  outline:none;
}
textarea:focus{border-color:#6e91ff;box-shadow:0 0 0 3px rgba(59,109,246,.12)}
.word-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:8px 0 8px;
  border:1px solid #e4ebf5;
  border-radius:12px;
  overflow:hidden;
  background:#fbfdff;
}
.stat{padding:8px 8px;text-align:center;position:relative}
.stat+.stat{border-left:1px solid #e4ebf5}
.stat strong{display:block;color:var(--navy);font-size:24px;margin-bottom:3px}
.stat span{font-size:12px;color:#5c7190;line-height:1.25;display:block}
.status{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:14px;
}
.status.ok{background:var(--green-bg);color:var(--green)}
.status.bad{background:#fff0f4;color:#b52b55}
.status-dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:currentColor;color:#fff;font-weight:700;font-size:13px;flex:0 0 20px}
.option-block{margin-top:9px;padding-top:9px;border-top:1px solid #e7edf6}
.style-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.style-btn{border:1px solid transparent;background:#edf4ff;color:var(--navy);border-radius:12px;padding:8px 10px;font-weight:700;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px}
.style-btn .icon{font-size:24px;line-height:1}
.style-btn.selected{background:#fff0f7;border-color:var(--pink);color:#b52467}
.option-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
.option-label{display:block;color:var(--navy);font-size:13px;font-weight:700;margin-bottom:8px}
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.segmented button{
  min-width:74px;
  border:1px solid transparent;
  background:#edf4ff;
  color:var(--navy);
  border-radius:9px;
  padding:11px 16px;
  font-weight:700;
  cursor:pointer;
}
.segmented button.selected{background:#fff0f7;border-color:var(--pink);color:#b52467}
.segmented button:focus-visible{outline:3px solid rgba(59,109,246,.25)}
.check-line{display:flex;align-items:center;gap:9px;min-height:43px}
.check-line input{width:19px;height:19px;accent-color:#3b6df6}
.check-line input:disabled+label{color:#9aa8b9}
.primary{
  width:100%;
  border:none;
  border-radius:11px;
  padding:15px 18px;
  margin-top:22px;
  color:#fff;
  background:linear-gradient(90deg,var(--pink-dark),var(--pink));
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(255,119,184,.25);
}
.primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.primary:hover{ background: var(--pink-dark) !important; }
.reset{
  display:block;
  margin:12px auto 0;
  border:1px solid #cbd8ed;
  background:#fff;
  color:#274d87;
  border-radius:9px;
  padding:9px 18px;
  cursor:pointer;
  display:none;
}
.preview-head{display:flex;align-items:center;gap:15px;margin-bottom:9px; }
.preview-head h2{margin:0 auto;color:var(--card);font-size:26px; }
.bingo-card{
  width:100%;
  max-width:520px;
  margin:0 auto;
  border:2px solid var(--card);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.bingo-header{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:var(--card);
  color:#fff;
}
.bingo-header span{
  text-align:center;
  padding:15px 2px;
  font-size:clamp(24px,4vw,42px);
  font-weight:800;
  border-right:1px solid rgba(255,255,255,.45)
}
.bingo-header span:last-child{border-right:0}
/* 3x3 and 4x4 have no column per letter, so BINGO runs across the whole bar */
.bingo-header.banner{grid-template-columns:1fr}
.bingo-header.banner span{
  border-right:0;
  letter-spacing:.24em;
  padding-left:.24em;
  font-size:clamp(26px,5vw,40px);
}
.bingo-cells{display:grid;background:#fff}
.bingo-cell{
  min-height:108px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8px 1px;
  font-weight:600;
  color:#0A265C;
  border-right:1px solid var(--card);
  border-bottom:1px solid var(--card);
  overflow-wrap:anywhere;
  line-height:1.2;
}
.bingo-cell-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%}
.cell-emoji{font-size:48px;line-height:1.2}
.cell-text{font-size:17px;line-height:1.2;word-break:break-word}
.bingo-cell.words-only .cell-text{font-size:17px}
.bingo-cell.emoji-only .cell-emoji{font-size:56px}
.bingo-cell.free{background:transparent;color:var(--free);flex-direction:column;font-size:18px}
.bingo-cell.free .star{font-size:54px;line-height:1;margin-bottom:3px}
.cell-text.long{font-size:17px}
.preview-empty{
  min-height:460px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  border:2px dashed #dce5f3;
  border-radius:12px;
  color:#6c7d93;
  background:#fbfdff;
}

/* Make the HTML hidden attribute win over component display rules.
   This prevents the empty preview from remaining above the generated card. */
.preview-empty[hidden],
#cardMount[hidden],
.preview-actions[hidden]{
  display:none !important;
}
.preview-actions{margin-top:18px}
.print-btn{
  width:72%;
  display:block;
  margin:0 auto 12px;
  border:none;
  border-radius:10px;
  padding:14px 18px;
  background:linear-gradient(90deg,var(--pink-dark),var(--pink));
  color:#fff;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
}
.print-btn:hover{ background: var(--pink-dark) !important; }
.action-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.secondary{
  border:1px solid #4d75f3;
  background:#fff;
  color:#244fbd;
  border-radius:10px;
  padding:12px 10px;
  font-weight:700;
  cursor:pointer;
}
.secondary:disabled{opacity:.45;cursor:not-allowed}
.features{
  grid-column:1/-1;
  margin-top:0;
  background.:linear-gradient(90deg,#fff2f8,#f4f8ff);
  background: #f6f7fd;
 background.: linear-gradient(135deg, rgba(232,239,255,0.95), rgba(246,213,223,0.55)), white;
  border:1px solid #d0d7e5;
  border-radius:16px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:18px;
}
.feature{display:flex;gap:10px;align-items:center}
.feature-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:50%;background:#ffe7f1;font-size:34px; border: 1px solid #FFDDEB; }
.feature strong{display:block;color:var(--navy);font-size:14px;margin-bottom:2px}
.feature span{display:block;color:#64758e;font-size:12px;line-height:1.3}
.small-alert{margin-top:10px;font-size:12px;color:#7b889a}
@media (max-width:960px){
  .bingo-grid{grid-template-columns:1fr}
  .preview{order:2}
  .features{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .bingo-wrap{padding:20px 10px 36px;}
  .bingo-nav a{font-size: 12px}
  .panel{padding:14px}
  .word-stats{grid-template-columns:1fr}
  .stat+.stat{border-left:0;border-top:1px solid #e4ebf5}
  .option-row{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .action-row{grid-template-columns:1fr}
  .print-btn{width:100%}
  .style-buttons{grid-template-columns:1fr}
  .bingo-cell{min-height:76px}
  .cell-emoji{font-size:34px}
  .cell-text{font-size:12px}
  .bingo-cell.words-only .cell-text{font-size:12px}
  .bingo-cell.emoji-only .cell-emoji{font-size:42px}
  .bingo-cell-inner{min-height:48px}
  .bingo-cell .cell-text.long{font-size:10px}

  .bingo-card.g4 .bingo-cell{min-height:94px}
  .bingo-card.g4 .bingo-cell-inner{min-height:62px}
  .bingo-card.g4 .cell-emoji{font-size:44px}
  .bingo-card.g4 .cell-text{font-size:14px}
  .bingo-card.g4 .bingo-cell.words-only .cell-text{font-size:14px}
  .bingo-card.g4 .bingo-cell.emoji-only .cell-emoji{font-size:54px}
  .bingo-card.g4 .cell-text.long{font-size:12px}

  .bingo-card.g3 .bingo-cell{min-height:116px}
  .bingo-card.g3 .bingo-cell-inner{min-height:80px}
  .bingo-card.g3 .cell-emoji{font-size:58px}
  .bingo-card.g3 .cell-text{font-size:16px}
  .bingo-card.g3 .bingo-cell.words-only .cell-text{font-size:16px}
  .bingo-card.g3 .bingo-cell.emoji-only .cell-emoji{font-size:70px}
  .bingo-card.g3 .cell-text.long{font-size:14px}
}

/* ---- emoji picker + coverage ---- */
/* Coverage badges and the button share one row; any chips wrap below them.
   display:contents lets the picker's own children join this flex row. */
.emoji-tools{margin:12px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#emojiPicker{display:contents}
.emoji-cov{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;margin-bottom:0;order:1}
.emoji-tools .emoji-auto-btn{order:2}
.emoji-tools .emoji-chips{order:3;flex-basis:100%;margin-top:2px}
.emoji-tools .emoji-panel{order:4;flex-basis:100%}
.emoji-cov-ok{color:var(--green);background:var(--green-bg);border-radius:20px;padding:4px 11px;font-weight:700}
.emoji-cov-miss{color:#b06a00;background:#fff6e6;border-radius:20px;padding:4px 11px;font-weight:700}
.emoji-chips{display:flex;flex-wrap:wrap;gap:7px}
.emoji-chip{
  border:1px dashed #c3d3ee;background:#f7faff;color:#33507a;
  border-radius:8px;padding:5px 10px;font-size:13px;cursor:pointer;font-family:inherit;
}
.emoji-chip:hover{background:#eef4ff;border-color:#7aa0ee}
.emoji-chip-more{font-size:12px;color:#7b889a;align-self:center}
.emoji-panel{
  position:relative;width:100%;margin:8px 0 2px;padding:10px;
  border:1px solid #cfd9e8;border-radius:10px;background:#fff;
  box-shadow:0 8px 22px rgba(20,45,90,.13);
}
.emoji-panel-input{
  width:100%;border:1px solid #cfd9e8;border-radius:8px;padding:8px 10px;
  font:14px/1.4 Arial,Helvetica,sans-serif;color:var(--text);outline:none;margin-bottom:8px;
}
.emoji-panel-input:focus{border-color:#6e91ff}
.emoji-panel-grid{display:flex;flex-wrap:wrap;gap:4px;max-height:172px;overflow:auto}
.emoji-opt{
  border:1px solid transparent;background:#f4f8ff;border-radius:8px;
  width:38px;height:38px;font-size:21px;line-height:1;cursor:pointer;
}
.emoji-opt:hover{background:#ffeaf4;border-color:var(--pink)}
.emoji-panel-none{font-size:13px;color:#7b889a;padding:6px}
.emoji-auto-btn{
  border:1px solid #4d75f3;background:#fff;color:#244fbd;border-radius:20px;
  padding:5px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.5;
}
.emoji-auto-btn:hover{background:#eef4ff}
/* printed / on-screen SVG emoji keep the same box as the character version */
.cell-emoji-img{display:block;margin:0 auto}
/* keeps rows even when a word wraps to two lines */
.bingo-cell-inner{min-height:66px}
.bingo-cell .cell-text.long{font-size:14px}
.bingo-cell.words-only .cell-text.long{font-size:14px}

/* ---- type scales with the grid ---- */
.bingo-card.g4 .bingo-cell{min-height:124px}
.bingo-card.g4 .bingo-cell-inner{min-height:84px;gap:8px}
.bingo-card.g4 .cell-emoji{font-size:60px}
.bingo-card.g4 .cell-text{font-size:20px}
.bingo-card.g4 .bingo-cell.words-only .cell-text{font-size:20px}
.bingo-card.g4 .bingo-cell.emoji-only .cell-emoji{font-size:74px}
.bingo-card.g4 .cell-text.long{font-size:18px}
.bingo-card.g4 .bingo-cell.words-only .cell-text.long{font-size:18px}

.bingo-card.g3 .bingo-cell{min-height:154px}
.bingo-card.g3 .bingo-cell-inner{min-height:110px;gap:10px}
.bingo-card.g3 .cell-emoji{font-size:78px}
.bingo-card.g3 .cell-text{font-size:25px}
.bingo-card.g3 .bingo-cell.words-only .cell-text{font-size:25px}
.bingo-card.g3 .bingo-cell.emoji-only .cell-emoji{font-size:96px}
.bingo-card.g3 .cell-text.long{font-size:22px}
.bingo-card.g3 .bingo-cell.words-only .cell-text.long{font-size:22px}
.bingo-card.g3 .bingo-cell.free,
.bingo-card.g4 .bingo-cell.free{font-size:25px}
.bingo-card.g3 .bingo-cell.free .star{font-size:60px}
@media (max-width:560px){
  .bingo-cell-inner{min-height:44px}
  .emoji-opt{width:34px;height:34px;font-size:19px}
}