/* KueDrop "pop" look (aesthetic reference: 2020s K-pop pop-art era): lemon ground, cobalt ink and outlines,
   bubblegum pink, sticker cards with offset shadows, bubbly display type, big polka dots at the page edges.
   Feedback stays green = exact / yellow = close / pale = off (players read those by habit). One theme. */
:root {
  --lemon: #FFE14F; --cobalt: #1F46C8; --cobalt-deep: #1A3BA8; --navy: #10204F; --bubblegum: #FF8AC8; --bubble-sky: #8FD3FF;
  --bg: var(--lemon); --surface: #ffffff; --ink: var(--navy); --muted: #4A5680; --line: #dce2f5;
  --accent: var(--cobalt); --accent-ink: #ffffff; --accent-text: var(--cobalt-deep); --soft: #FFD6EC; --focus: #E8368A;
  --hit: #6BBF8A; --hit-ink: #0f3320; --near: #F2C14E; --near-ink: #3a1416; --off: #f1f3fa; --off-ink: #4A5680;
  --stroke: 2.5px solid var(--cobalt); --pop: 4px 4px 0 var(--cobalt);
  --shadow: var(--pop);
  --f-display: "Bagel Fat One", "Arial Black", system-ui, sans-serif;
  --f-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;   /* share box + arrows only */
  --f-label: "Righteous", "Unbounded", system-ui, sans-serif;   /* small labels, counters, case line (one weight: 400) */
  color-scheme: light;
}
[hidden] { display: none !important; }   /* components below set display:flex, which would otherwise override hidden */
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 20px 48px; }
.wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.logo { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 6vw, 30px); letter-spacing: -.01em; line-height: 1; margin: 0; }
.logo .chip { display: inline-block; font-family: var(--f-label); font-size: 12px; background: var(--accent); color: var(--accent-ink); border-radius: 4px; padding: 3px 6px; vertical-align: 6px; margin-left: 6px; font-weight: 400; }
.caseline { font-family: var(--f-label); font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 6px; font-weight: 400; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.modes { display: inline-flex; background: var(--off); border-radius: 10px; padding: 3px; gap: 3px; align-self: flex-start; }
.modes button { border: 0; background: transparent; color: var(--off-ink); padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; }
.modes button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Today's lineup */
.lineup { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lineup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lineup-head h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.diff { font-family: var(--f-label); font-size: 12px; color: var(--muted); font-weight: 400; }
.diff b { color: var(--ink); font-weight: 400; }
.clues { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.clue { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clue.fixed { background: var(--soft); border-color: transparent; }
.clue.fixed .rule { color: var(--ink); opacity: .8; }
.clue .nm { font-weight: 700; font-size: 13px; line-height: 1.2; }
.clue .rule { font-size: 11.5px; color: var(--muted); line-height: 1.3; display: none; }
.clues.show-rules .rule { display: block; }
.lineup-tools { display: inline-flex; align-items: center; gap: 12px; }
.rules-btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.rules-btn:hover { border-color: var(--muted); }
.rules-btn .q { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--soft); font-size: 11px; font-weight: 700; }
.rules-btn[aria-expanded="true"] { background: var(--soft); border-color: transparent; }
.rules-btn[aria-expanded="true"] .q { background: var(--surface); }
@media (max-width: 560px) { .clues { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.guessbar { position: relative; display: flex; flex-direction: column; gap: 6px; }
.guessbar label { font-family: var(--f-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; font-weight: 400; }
.guessbar input { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.guessbar input:disabled { opacity: .55; }
.sugg { position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 5; max-height: 320px; overflow-y: auto; }
.sugg li { padding: 9px 10px; border-radius: 7px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.sugg li[aria-selected="true"], .sugg li:hover { background: var(--off); }
.sugg .t { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg .a { color: var(--muted); font-size: 13px; white-space: nowrap; }
.sugg .none { color: var(--muted); cursor: default; }
.msg { min-height: 20px; font-size: 13px; color: var(--muted); }

.board { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.card.won { border-color: var(--hit); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.card-head .song { font-weight: 700; min-width: 0; }
.card-head .song span { color: var(--muted); font-weight: 500; }
.card-head .n { font-family: var(--f-label); font-size: 12px; color: var(--muted); white-space: nowrap; font-weight: 400; }
.cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 480px) { .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-note { font-size: 12px; color: var(--muted); }
.cell { border-radius: 8px; padding: 7px 4px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 60px; background: var(--off); color: var(--off-ink); }
.cell .k { font-family: var(--f-label); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; opacity: .8; font-weight: 400; }
.cell .v { font-size: 13px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cell .ar { font-family: var(--f-mono); font-weight: 600; font-size: 13px; line-height: 1; }
.cell.off { box-shadow: inset 0 0 0 1px var(--line); }
.cell.hit { background: var(--hit); color: var(--hit-ink); }
.cell.near { background: var(--near); color: var(--near-ink); }
.reveal .cell { animation: flip .42s ease both; }
@keyframes flip { from { transform: rotateX(80deg); opacity: .3; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reveal .cell { animation: none; } }
.empty { border: 1.5px dashed var(--line); border-radius: 12px; padding: 18px; color: var(--muted); font-size: 14px; text-align: center; }

.end { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.end h2 { font-family: var(--f-display); font-weight: 700; font-size: 20px; margin: 0; text-wrap: balance; }
.share { font-family: var(--f-mono); font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; white-space: pre; overflow-x: auto; margin: 0; line-height: 1.45; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 10px 16px; border-radius: 10px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.stats b { display: block; font-family: var(--f-display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stats span { font-size: 11px; color: var(--muted); font-family: var(--f-label); text-transform: uppercase; letter-spacing: .06em; font-weight: 400; }
.next { font-family: var(--f-label); font-size: 13px; color: var(--muted); font-weight: 400; }
.foot { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.foot p { margin: 0; max-width: 62ch; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Standalone-page additions */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
.logo { color: var(--tomato); }
.logo .beta { background: var(--soft); color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot a { color: var(--ink); text-underline-offset: 2px; }
.foot a:hover { color: var(--accent-text); }
#game:not([hidden]) { display: contents; }   /* keeps .wrap's gap between the game blocks */
.loading { color: var(--muted); font-size: 14px; padding: 18px 0; }

/* ---------- Pop look ---------- */
/* Polka dots and bubbles, fixed at the page edges (outside the 640px column on desktop, cropped away on phones). */
/* Background decoration (.deco in the HTML): bubbles, polka dots, sparkles, music notes and halftone patches,
   fixed to the window. Every shape is anchored to an edge or corner (vw/vh offsets, clamp() sizes), so part of it shows
   at any window width, from phones to wide desktops. Sits behind the game (z-index -1). */
.deco { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.deco > i { position: absolute; display: block; }
.deco svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.dot { background: var(--cobalt); border-radius: 50%; }
.bub { --c: var(--bubblegum); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0 10%, rgba(255,255,255,0) 26%), var(--c); }
.bub.sky { --c: var(--bubble-sky); }
.tone { background-image: radial-gradient(var(--cobalt) 28%, transparent 31%); background-size: 16px 16px; opacity: .22;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.t1 { width: clamp(200px, 32vw, 460px); aspect-ratio: 1; right: -60px; top: -60px; }
.t2 { width: clamp(200px, 32vw, 460px); aspect-ratio: 1; left: -60px; bottom: -60px; }
.t3 { width: clamp(140px, 20vw, 280px); aspect-ratio: 1; left: -50px; top: 26vh; }
.d1 { width: clamp(110px, 16vw, 240px); aspect-ratio: 1; left: calc(clamp(110px, 16vw, 240px) * -.55); top: 17vh; }   /* below the header: never behind the logo */
.d2 { width: clamp(70px, 10vw, 150px); aspect-ratio: 1; right: calc(clamp(70px, 10vw, 150px) * -.35); top: 9vh; }
.d3 { --c: var(--bubble-sky); width: clamp(90px, 13vw, 200px); aspect-ratio: 1; left: calc(clamp(90px, 13vw, 200px) * -.4); bottom: 7vh; }
.d4 { width: clamp(130px, 19vw, 280px); aspect-ratio: 1; right: calc(clamp(130px, 19vw, 280px) * -.35); bottom: calc(clamp(130px, 19vw, 280px) * -.3); }
.d5 { width: clamp(36px, 4.5vw, 64px); aspect-ratio: 1; right: -12px; top: 44vh; }
.d6 { width: clamp(32px, 4vw, 56px); aspect-ratio: 1; left: -10px; top: 62vh; }
.spark { aspect-ratio: 1; }
.s1 { width: clamp(22px, 2.8vw, 42px); right: 5vw; top: 10px; color: var(--bubblegum); }
.s2 { width: clamp(18px, 2.4vw, 36px); left: 3vw; top: 40vh; color: var(--cobalt); }
.s3 { width: clamp(20px, 2.6vw, 40px); right: 3.5vw; bottom: 30vh; color: #ffffff; }
.s4 { width: clamp(16px, 2vw, 30px); left: 6vw; bottom: 20vh; color: var(--bubblegum); }
.s5 { width: clamp(14px, 1.6vw, 24px); right: 12vw; top: 46px; color: var(--cobalt); }
.note { aspect-ratio: 1; }
.n1 { width: clamp(22px, 3vw, 44px); left: 2vw; top: 80vh; color: var(--cobalt); transform: rotate(-12deg); }
.n2 { width: clamp(20px, 2.8vw, 40px); right: 2vw; top: 26vh; color: var(--bubblegum); transform: rotate(10deg); }
.n3 { width: clamp(18px, 2.2vw, 32px); right: 7vw; top: 66vh; color: var(--navy); transform: rotate(-6deg); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.logo { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 9vw, 46px); letter-spacing: .01em;
  color: var(--cobalt); text-shadow: 3px 3px 0 var(--bubblegum); }
.logo .chip, .logo .beta { background: var(--bubblegum); color: var(--navy); border: 2px solid var(--cobalt); border-radius: 999px;
  padding: 2px 9px; vertical-align: 12px; text-shadow: none; font-size: 12px; }
.caseline, .guessbar label { color: var(--cobalt-deep); }
.msg, .loading { color: var(--cobalt-deep); }

/* Sticker cards: white, cobalt outline, hard offset shadow */
.lineup, .card, .end, .guessbar input, .sugg { border: var(--stroke); box-shadow: var(--pop); }
.lineup, .end { border-radius: 18px; }
.card { border-radius: 14px; }
.card.won { border-color: var(--cobalt); box-shadow: 4px 4px 0 var(--hit); }
.guessbar input { border-radius: 14px; }
.guessbar input:disabled { opacity: 1; background: #eef2ff; color: var(--muted); }
.lineup-head h2, .end h2 { font-family: var(--f-display); font-weight: 400; letter-spacing: .02em; color: var(--cobalt); }
.lineup-head h2 { font-size: 16px; }
.end h2 { font-size: 26px; }
.stats b { font-family: var(--f-display); font-weight: 400; color: var(--cobalt); }

.clue { border-color: var(--line); }
.clue.fixed { background: var(--soft); border-color: transparent; }
.cell.off { box-shadow: inset 0 0 0 1px var(--line); }

/* Pill toggles and buttons */
.modes { background: #ffffff; border: var(--stroke); border-radius: 999px; padding: 3px; box-shadow: var(--pop); }
.modes button { color: var(--navy); border-radius: 999px; }
.modes button[aria-pressed="true"] { background: var(--cobalt); color: #ffffff; box-shadow: none; }
.btn { border-radius: 999px; border: var(--stroke); box-shadow: 3px 3px 0 var(--navy); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }
.btn.ghost { background: #ffffff; color: var(--cobalt); border: var(--stroke); box-shadow: 3px 3px 0 var(--bubblegum); }
.rules-btn { border: 2px solid var(--cobalt); color: var(--cobalt); }
.rules-btn .q { background: var(--bubblegum); color: var(--navy); }
.rules-btn[aria-expanded="true"] { background: var(--soft); border-color: var(--cobalt); }
/* Share box: pale bubblegum ticket with a dashed cobalt edge; Righteous, like the other labels (display only: copied text is unchanged) */
.share { background: #FFE6F3; border: 2px dashed var(--cobalt); border-radius: 14px; color: var(--navy);
  font-family: var(--f-label); font-weight: 400; font-size: 15px; line-height: 1.6; letter-spacing: .01em; padding: 12px 16px; }

/* Things sitting straight on the lemon ground */
.empty { border: 2.5px dashed var(--cobalt); color: var(--cobalt-deep); background: rgba(255, 255, 255, .35); }
.foot { color: var(--cobalt-deep); border-top: 2.5px solid var(--cobalt); }
.foot a { color: var(--navy); }
.foot a:hover { color: var(--focus); }
.legend .sw { box-shadow: 0 0 0 1.5px var(--cobalt); }

/* Privacy page */
.doc { max-width: 640px; margin: 0 auto; background: #ffffff; border: var(--stroke); box-shadow: var(--pop); border-radius: 18px; padding: 8px 24px 24px; }
.doc h1 { font-family: var(--f-display); font-weight: 400; color: var(--cobalt); font-size: clamp(26px, 7vw, 34px); margin: 8px 0 4px; }
.doc h2 { font-family: var(--f-display); font-weight: 400; color: var(--cobalt); font-size: 17px; margin: 28px 0 6px; }
.doc p, .doc li { max-width: 62ch; }
.doc .meta { font-family: var(--f-label); font-size: 12px; color: var(--muted); font-weight: 400; }
.doc a { color: var(--accent-text); }

/* Text that sits on the lemon ground gets its own backing, so the fixed decorations never sit behind words while the
   page scrolls past them. (The logo and case line only ever move up, away from every shape, so they need none.) */
.foot { background: #ffffff; border: var(--stroke); box-shadow: var(--pop); border-radius: 18px; padding: 16px 18px; margin-top: 8px; }
.guessbar label span { background: var(--lemon); padding: 2px 9px; margin: 0 -9px; border-radius: 999px; }
.msg:not(:empty) { background: var(--lemon); width: fit-content; padding: 2px 10px; border-radius: 999px; }
.empty { background: #fff4b8; }