:root{
  --nl-blue:blue; --nl-red:red; --nl-white:#fff;
  --ok:#22c55e; --warn:#f59e0b; --ink:#0b1220;
  --card:#ffffff; --bg:#eef3ff; --br:#cbd5ff; --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,Segoe UI,Arial,Helvetica,sans-serif; color:var(--ink);
  background:linear-gradient(180deg,#eef3ff,#dfe9ff);
  overflow-x:hidden;
}
.wrap{ max-width:min(1100px,100vw); margin:0 auto; padding:max(16px,env(safe-area-inset-top)) 16px 24px; }

/* ===== Top Banner ===== */
.guess-banner{
  position:sticky; top:0; z-index:1000; display:flex!important;
  justify-content:center; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px;
  background:linear-gradient(90deg,var(--nl-blue) 0%,#fff 50%,var(--nl-red) 100%);
  border-bottom:2px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.guess-banner .msg{
  display:inline-flex; align-items:center; gap:10px; background:#fff;
  padding:8px 12px; border-radius:999px; font-weight:800; border:2px solid #0b3ea8;
}
.guess-banner .close{ border:0; background:transparent; width:24px; height:24px; line-height:1; border-radius:50%; font-weight:900; font-size:18px; cursor:pointer; }

/* Flag border shell */
.shell{
  border:5px solid transparent;
  border-image:linear-gradient(90deg,var(--nl-blue) 0%,var(--nl-white) 50%,var(--nl-red) 100%) 1;
  border-radius:22px; background:#fff; box-shadow:0 8px 28px rgba(33,70,139,.12);
  padding:16px;
}

/* Tabs */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.tab-btn{
  padding:10px 12px; border-radius:12px; cursor:pointer; font-weight:800;
  border:2px solid var(--br); background:#fff;
}
.tab-btn.active{ background:var(--nl-blue); color:#fff; border-color:var(--nl-blue); }
.panel{ display:none; }
.panel.active{ display:block; }

/* Toolbar */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0 14px; }
.btn, .select{
  border:2px solid var(--br); border-radius:12px; padding:10px 12px; background:#fff; cursor:pointer; font-weight:700;
}
.btn.primary{ background:var(--nl-blue); color:#fff; border-color:var(--nl-blue) }
.btn.good{ background:var(--ok); color:#fff; border-color:var(--ok) }
.badge{ font-weight:800 }

/* ===== NL/EN line style ===== */
.line{ display:flex; gap:8px; align-items:center; justify-content:center; text-align:center; flex-wrap:wrap; }
.flag{ width:18px; height:12px; border-radius:2px; object-fit:cover }

/* Bigger Dutch text */
.nltext{
  font-weight: 800;
  color: var(--nl-blue);
  font-size: clamp(1.05em, 1.1em + 0.4vw, 1.25em);
  letter-spacing: .02em;
  line-height: 1.5;
}

.entext{
  font-weight:800;
  font-size:1.05em;
  opacity:.95;
  color:red;
  background:#fff;
  display:inline-block;
  border-radius:8px;
  padding:0.4em 0.6em;
  line-height:1.6;
}
.entext1{
  font-weight:800; font-size:1.05em; opacity:.95; color:green; background:#fff; display:inline-block;
  border-radius:8px; padding:0.4em 0.6em; line-height:1.6;
}

/* ===== Cards ===== */
.grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.cardbox{
  position:relative; min-height:200px; border-radius:16px;
  border:2px solid var(--br); background:#fff;
  box-shadow:0 10px 24px rgba(33,70,139,.12);
  padding:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  transition:all .2s ease;
}
.cardbox .emoji{ font-size:56px; line-height:1; }

/* Expanded card (on click) */
#flipGrid.has-expanded{ grid-template-columns: 1fr !important; }
/* Keep expanded card full-width, but reduce its height spacing */
/* Hide the Dutch flag on expanded card */
.cardbox.expanded .nl-row .flag{ display:none; }

/* Center the Dutch line on expanded card */
.cardbox.expanded .nl-row{
  justify-content:center;       /* centers the flex row */
  text-align:center;            /* just in case line wraps */
  margin: 6px 0 !important;     /* a bit more breathing room */
}

/* Make the Dutch text red and nicely sized when expanded */
.cardbox.expanded .nltext{
  color:green;                 /* Dutch red */
  font-weight:900;
  font-size:1.6em;               /* tweak if you want bigger/smaller */
  line-height:1.25;
}

/* Keep the expanded card compact in height but full width */
.cardbox.expanded{
  grid-column:1 / -1;
  justify-self:stretch;
  min-height:unset !important;
  height:auto !important;
  padding-top:10px;
  padding-bottom:10px;
  border-color:#9ab6ff;
}

/* --- FINAL OVERRIDE: hide English + UK flag on expanded card --- */
.cardbox.expanded .en-row,
.cardbox.expanded .en-row .flag,
.cardbox.expanded .en-row .entext.real,
.cardbox.expanded .en-row .entext.mask{
  display:none !important;
}

/* also hide the NL flag on the expanded card */
.cardbox.expanded .nl-row .flag{
  display:none !important;
}
/* --- Compact expanded card fix --- */
.cardbox.expanded {
  min-height: unset !important;
  height: auto !important;
  padding: 4px 10px !important;
  margin: 4px 0 !important;
  align-items: center;
  justify-content: center;
}

/* shrink emoji and tighten text spacing */
.cardbox.expanded .emoji {
  font-size: 32px !important;
  margin-bottom: 2px !important;
}

.cardbox.expanded .nl-row {
  margin: 2px 0 !important;
}

.cardbox.expanded .nltext {
  font-size: 1.5em !important;
  line-height: 1.2 !important;
}

/* ensure no vertical stretch from grid */
#flipGrid.has-expanded {
  align-items: start !important;
}

/* Divider */
.flag-sep{width:160px;height:6px;margin:14px auto;border-radius:8px;background:linear-gradient(90deg,var(--nl-blue) 0%,#fff 50%,var(--nl-red) 100%);box-shadow:0 2px 8px rgba(0,0,0,.1);}

/* ===== Quiz (3-choice) ===== */
.card{
  border:2px solid var(--br); border-radius:var(--radius); padding:14px; background:#fff;
  box-shadow:0 10px 24px rgba(33,70,139,.12);
}
.nums{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.numbtn{
  position:relative; width:100%; max-width:560px;
  padding:16px 16px 16px 60px; border-radius:16px; font-weight:900;
  border:2px solid #e3e9ff; background:#fff; color:#000; cursor:pointer; transition:transform .04s, filter .18s, box-shadow .18s;
}
.numbtn:active{ transform:scale(.98) }
.numdot{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  min-width:32px; height:32px; padding:0 6px;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid #ff6a00; font-weight:900; color:#ff6a00;
}
.numbtn.opt-red  { background:#ff4040; color:white; }
.numbtn.opt-white{ background:#fff;     color:#000; }
.numbtn.opt-blue { background:#0d35ff; color:white; }
.numbtn[disabled]{ opacity:.8; cursor:not-allowed }
.numbtn.wrong{ filter:blur(2px) }
.numbtn.correct{
  background:var(--ok)!important; border-color:var(--ok)!important; color:#fff!important;
  box-shadow:0 0 0 3px rgba(34,197,94,.2) inset;
}
.numbtn { font-size:18px; }
.numdot { font-size:16px; }
.feedback{ margin-top:8px; min-height:1.2em; font-weight:800; text-align:center }

/* ===== Global Controls ===== */
.pagebar{display:flex;justify-content:center;align-items:center;gap:12px;margin:10px 0;flex-wrap:wrap}
.ctrl-btn{ border:2px solid var(--br); border-radius:12px; padding:10px 12px; background:#fff; cursor:pointer; font-weight:800 }
.ctrl-btn.primary  { background:#0b3ea8; color:#fff; border-color:#0b3ea8 }
.ctrl-btn.primary2 { background:orange;  color:#fff; border-color:#e78a00 }
.ctrl-btn.ghost    { background:#e7132b; color:#fff; border-color:#e7132b }
.ctrl-btn:disabled{ opacity:.6; cursor:not-allowed }

/* Drag-drop sentence */
.tray,.drop{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 }
.tile{
  padding:10px 14px; border-radius:12px; border:2px solid var(--nl-blue); background:#fff; font-weight:800; cursor:grab;font-size:18px;
}
.drop{ min-height:58px; border:2px dashed var(--br); border-radius:14px; padding:10px; background:#f9fbff }
.drop.ok{ box-shadow:0 0 0 3px #22c55e66 inset }

/* Confetti */
.confetti{ position:fixed; width:8px; height:8px; border-radius:2px; pointer-events:none }

/* Socials */
.quiz-footer{ display:flex; justify-content:center; align-items:center; padding:12px; }
.socials-img{ max-width:360px; width:100%; }
.socials-img img{ display:block; width:100%; height:auto; }

/* Hide helper */
.is-hidden{ display:none !important; }

/* ===== Mask/Real toggles (global) ===== */
.nltext.real, .entext.real { display:inline; }
.nltext.mask, .entext.mask { display:none; letter-spacing:.14em; font-weight:900; opacity:.7; }
.hide-nl .nltext.real { display:none; }
.hide-nl .nltext.mask { display:inline; }

/* Global “Hide English” now per-card via CSS selector; .keep-en is exempt */
.hide-en .cardbox:not(.keep-en) .en-row .flag { display:none; }
.hide-en .cardbox:not(.keep-en) .entext.real,
.hide-en .cardbox:not(.keep-en) .entext.mask { display:none; }

/* Phones default 1 column */
@media (max-width: 600px){
  .grid{ grid-template-columns: 1fr; }
  .cardbox{ min-height: 180px; height: auto; }
  .wrap{ padding-left:12px; padding-right:12px; }
}

/* Column mode classes controlled by JS */
.cols-1 #flipGrid{ grid-template-columns: 1fr !important; }
.cols-2 #flipGrid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

/* emojis as images option */
.emoji img { width:1.4em; height:1.4em; vertical-align:middle; display:inline-block; }

/* ===== Word Highlighter Bar (only for expanded card) ===== */
.wordbar{
  position:sticky;
  bottom:10px;
  z-index:20;
  display:none;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  background:#ffffffcc;
  backdrop-filter: blur(4px);
  border:2px solid var(--br);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(33,70,139,.15);
  margin:8px auto 0;
  width:max-content;
}
.wordbar .wbtn{
  border:2px solid var(--br);
  background:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}
.wordbar .wbtn:disabled{ opacity:.45; cursor:not-allowed }

/* Span for highlighted word */
.nltext .w{
  padding:0 .15em;
  border-radius:.35em;
}
.nltext .w.hi{
  color:purple;                /* dark green text */
  background:#dcfce7;           /* light green bg */
  box-shadow:0 0 0 2px #22c55e55 inset;
}

/* Center a single leftover card (odd count) in 2-column mode */
.cols-2 #flipGrid .cardbox.center-me:not(.expanded){
  grid-column: 1 / -1;        /* span both columns */
  justify-self: center;        /* center within the row */
  width: calc(50% - 7px);      /* half width minus half the grid gap (gap=14px) */
}