@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700&family=Roboto+Slab:wght@700;900&family=UnifrakturCook:wght@700&display=swap');

:root {
  --ink:#121212; --ink2:#363636; --muted:#787c7e; --rule:#dcdcdc; --rule2:#121212;
  --bg:#fff; --key:#d3d6da; --tile-border:#d3d6da; --tile-filled:#878a8c;
  --green:#6aaa64; --yellow:#c9b458; --gray:#787c7e;
  --xw-active:#ffda00; --xw-word:#a7d8ff;
  --sans:'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --slab:'Roboto Slab', Georgia, serif;
  --serif:Georgia, 'Times New Roman', serif;
}
* { box-sizing:border-box; }
button { font:inherit; color:inherit; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
input { -webkit-appearance:none; appearance:none; border-radius:0; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.loading { text-align:center; color:var(--muted); }

/* ---- masthead ---- */
.masthead { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:10px 16px 0; text-align:center; }
.ears { display:flex; justify-content:space-between; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); border-bottom:1px solid var(--rule); padding-bottom:6px; }
.ears .edition { font-weight:700; }
@media (max-width: 420px) { .ears { font-size:.52rem; letter-spacing:.03em; } .ears span { white-space:nowrap; } }
.nameplate { display:block; font-family:'UnifrakturCook', 'Old English Text MT', serif; font-weight:700; font-size:clamp(2.1rem, 9vw, 4.2rem); line-height:1.15; padding:10px 0 4px; text-decoration:none; color:var(--ink); }
.motto { font-family:var(--serif); font-style:italic; font-size:.78rem; color:var(--ink2); padding-bottom:8px; border-bottom:2px solid var(--rule2); position:relative; }
.motto::after { content:''; display:block; position:absolute; left:0; right:0; bottom:-5px; border-bottom:1px solid var(--rule2); }

#app { position:relative; z-index:1; max-width:520px; margin:0 auto; padding:22px 16px 60px; }

/* ---- hub ---- */
.games-head { text-align:center; padding-bottom:14px; }
.games-title { font-family:var(--slab); font-weight:900; font-size:2.3rem; margin:6px 0 4px; letter-spacing:-.01em; }
.lede { font-family:var(--serif); font-size:1rem; color:var(--ink2); margin:0 0 14px; }
.progress-text { font-size:.8rem; font-weight:600; color:var(--muted); margin:0 0 6px; }
.progress { height:6px; background:#eee; border-radius:99px; overflow:hidden; max-width:260px; margin:0 auto; }
.bar { height:100%; background:var(--ink); transition:width .6s; }
.cards { display:flex; flex-direction:column; border-top:1px solid var(--rule); }
.gamecard { display:flex; align-items:center; gap:14px; padding:16px 4px; border-bottom:1px solid var(--rule); text-decoration:none; }
.gamecard.locked { opacity:.45; pointer-events:none; }
.gamecard .icon { flex:none; width:56px; height:56px; border-radius:8px; background:var(--c); display:flex; align-items:center; justify-content:center; font-size:1.7rem; }
.gamecard.locked .icon { background:#eee; }
.gamecard .icon svg { width:100%; height:100%; display:block; border-radius:8px; }
.gtext { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.gtitle { font-family:var(--slab); font-weight:700; font-size:1.15rem; }
.gdesc { font-size:.82rem; color:var(--ink2); line-height:1.35; }
.pill { flex:none; font-size:.8rem; font-weight:600; padding:9px 20px; border-radius:999px; background:var(--ink); color:#fff; }
.pill.done { background:#fff; color:var(--ink); border:1px solid var(--ink); }
.pill.locked { background:#eee; color:var(--muted); }
.envelope { display:block; margin:24px auto 0; max-width:320px; padding:16px; text-align:center; background:var(--ink); color:#fff; border-radius:999px; font-weight:700; text-decoration:none; animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { transform:scale(1.03); } }
.foot { display:flex; justify-content:space-between; align-items:center; margin-top:36px; padding-top:10px; border-top:1px solid var(--rule); font-size:.7rem; color:var(--muted); }
.link { background:none; border:0; color:var(--muted); text-decoration:underline; font:inherit; cursor:pointer; padding:0; }

/* ---- game page chrome (the Wordle header bar) ---- */
.gamebar { display:flex; align-items:center; margin:-22px -16px 18px; padding:0 8px; height:50px; border-bottom:1px solid var(--rule); }
.back { width:40px; font-size:1.9rem; line-height:1; text-decoration:none; text-align:center; color:var(--ink); }
.gametitle { flex:1; text-align:center; font-family:var(--slab); font-weight:700; font-size:1.35rem; margin:0; letter-spacing:.01em; }
.gamenum { width:40px; text-align:right; font-size:.68rem; font-weight:600; color:var(--muted); letter-spacing:.04em; }
.puzzle { }
.intro { font-family:var(--serif); font-size:.98rem; line-height:1.5; color:var(--ink2); margin:0 0 18px; text-align:center; }
.answer { display:flex; gap:8px; margin-top:16px; }
.answer input { flex:1; min-width:0; font:inherit; font-size:16px; padding:12px 14px; border:2px solid var(--tile-border); border-radius:4px; }
.answer input:focus { outline:none; border-color:var(--ink); }
.answer button, .btn { font:inherit; font-weight:600; padding:12px 26px; border:0; border-radius:999px; background:var(--ink); color:#fff; cursor:pointer; }
.btn { display:block; margin:14px auto 0; }
.answer button:disabled, .btn:disabled { background:var(--green); }
.hidden { display:none !important; }
.shake { animation:shake .4s; }
@keyframes shake { 25% { transform:translateX(-6px); } 75% { transform:translateX(6px); } }
.msg { min-height:1.4em; font-weight:600; text-align:center; margin:14px 0 0; }
.status { text-align:center; color:var(--muted); font-weight:600; font-size:.85rem; min-height:1.4em; margin:10px 0; }
.hints { margin-top:10px; }
.hint { font-family:var(--serif); border-left:3px solid var(--ink); padding:8px 12px; margin:8px 0; background:#f7f7f7; }
.hint-note { color:var(--muted); font-size:.78rem; text-align:center; }

/* ---- Simon ---- */
.simon { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:320px; margin:0 auto; }
.pad { height:clamp(110px, 38vw, 150px); border:0; border-radius:10px; cursor:pointer; opacity:.5; transition:opacity .08s, transform .08s; }
.pad.red { background:#ff595e; } .pad.green { background:#8ac926; } .pad.blue { background:#1982c4; } .pad.yellow { background:#ffca3a; }
.pad.lit { opacity:1; transform:scale(1.04); box-shadow:0 0 0 3px var(--ink); }
.simon.wrong { animation:shake .4s; }

/* ---- Wordle (the real thing's dimensions) ---- */
.wordle { display:grid; grid-template-columns:repeat(var(--len), 1fr); gap:5px; max-width:calc(var(--len) * 62px + (var(--len) - 1) * 5px); margin:0 auto 8px; }
.wtile { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:2rem; border:2px solid var(--tile-border); text-transform:uppercase; user-select:none; }
.wtile.filled { border-color:var(--tile-filled); animation:pop .1s; }
@keyframes pop { 50% { transform:scale(1.1); } }
.wtile.g, .key.g { background:var(--green); border-color:var(--green); color:#fff; }
.wtile.y, .key.y { background:var(--yellow); border-color:var(--yellow); color:#fff; }
.wtile.x, .key.x { background:var(--gray); border-color:var(--gray); color:#fff; }
.kb { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.kbrow { display:flex; justify-content:center; gap:6px; }
.key { flex:1; max-width:43px; height:58px; border:0; border-radius:4px; background:var(--key); color:var(--ink); font:inherit; font-weight:700; font-size:1.05rem; text-transform:uppercase; cursor:pointer; padding:0; user-select:none; }
.key.wide { max-width:66px; font-size:.7rem; }

/* ---- Crossword (NYT colours: yellow square, blue word) ---- */
.xw-wrap { overflow-x:auto; margin:0 -16px; padding:0 16px 6px; -webkit-overflow-scrolling:touch; }
.xw { display:grid; grid-template-columns:repeat(var(--cols), var(--cell, 32px)); gap:0; width:max-content; margin:0 auto; padding:2px; }
.xcell { position:relative; width:var(--cell, 32px); height:var(--cell, 32px); background:#fff; box-shadow:0 0 0 1.5px #000; }
.xcell.black { background:transparent; box-shadow:none; }
.xcell .num { position:absolute; top:1px; left:2px; font-size:calc(var(--cell, 32px) * .19); font-weight:600; color:var(--ink); line-height:1; }
.xcell input { width:100%; height:100%; border:0; background:transparent; text-align:center; font:inherit; font-weight:500; font-size:calc(var(--cell, 32px) * .5); padding:5px 0 0; text-transform:uppercase; caret-color:transparent; }
.xcell input:focus { outline:none; }
.xcell.active { background:var(--xw-word); }
.xcell:has(input:focus) { background:var(--xw-active); }
.xcell.ok { color:var(--ink); }
.xcell.ok input { color:#2860d8; }
.xcell.bad input { color:#c0392b; }
.xcell.bad::after { content:''; position:absolute; left:10%; right:10%; top:50%; height:2px; background:#c0392b; transform:rotate(-45deg); pointer-events:none; }
.toggle.on { background:var(--ink); color:#fff; }
.clues { display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; font-size:.9rem; }
.clues h3 { margin:6px 0 4px; font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--rule2); padding-bottom:4px; }
.clues ol { margin:0; padding-left:0; list-style:none; }
.clues li { display:flex; gap:8px; padding:5px 6px; cursor:pointer; border-left:8px solid transparent; }
.clues li::before { content:attr(value); font-weight:700; min-width:1.6em; }
.clues li.active { background:var(--xw-word); border-left-color:#2860d8; }
@media (min-width: 480px) { .clues { grid-template-columns:1fr 1fr; } }

/* ---- Higher or Lower ---- */
.hl-top { text-align:center; font-size:.85rem; color:var(--muted); margin-bottom:8px; }
.hl-arena { position:relative; display:grid; grid-template-rows:1fr 1fr; gap:8px; }
@media (min-width: 480px) { .hl-arena { grid-template-columns:1fr 1fr; grid-template-rows:none; } }
.hl-panel { min-height:230px; }
.hl-inner { position:relative; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px 16px; border-radius:8px; overflow:hidden; animation:rise .35s; }
.hl-emoji { position:absolute; font-size:7rem; opacity:.14; right:-14px; bottom:-24px; pointer-events:none; }
.hl-label { font-family:var(--slab); font-weight:700; font-size:1.05rem; margin:0 0 10px; line-height:1.25; position:relative; }
.hl-num { font-family:var(--slab); font-weight:900; font-size:2.6rem; line-height:1; position:relative; }
.hl-unit { font-size:.75rem; color:var(--ink2); margin-top:6px; text-transform:uppercase; letter-spacing:.06em; position:relative; }
.hl-guess { display:flex; flex-direction:column; gap:8px; align-items:center; position:relative; }
.hl-guess .btn { margin:0; min-width:150px; }
.hl-vs { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--slab); font-weight:900; font-size:.85rem; z-index:2; border:3px solid #fff; }
.hl-panel.right .hl-inner { outline:3px solid var(--green); }
.hl-panel.wrong .hl-inner { outline:3px solid #c0392b; animation:shake .4s; }
.hl-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--rule); }
.hl-list li { display:flex; justify-content:space-between; gap:12px; padding:10px 4px; border-bottom:1px solid var(--rule); font-size:.9rem; }
.hl-list strong { font-family:var(--slab); white-space:nowrap; }

/* ---- Connections ---- */
.cx-solved { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.cx-group { border-radius:6px; padding:14px 8px; text-align:center; display:flex; flex-direction:column; gap:2px; text-transform:uppercase; font-size:.85rem; animation:rise .4s; }
.cx-group strong { font-size:1rem; }
.cx-board { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.cx-tile { height:64px; min-width:0; border:0; border-radius:6px; background:#efefe6; color:var(--ink); font-weight:700; font-size:.85rem; text-transform:uppercase; cursor:pointer; padding:4px; overflow:hidden; word-break:normal; overflow-wrap:normal; hyphens:none; line-height:1.1; }
.cx-tile.sel { background:#5a594e; color:#fff; transform:scale(.97); }
.cx-mistakes { display:flex; justify-content:center; align-items:center; gap:8px; font-size:.85rem; color:var(--ink2); margin:6px 0 12px; }
.dots { letter-spacing:.3em; color:#5a594e; font-size:1.1rem; }
.dots i { color:#ddd; font-style:normal; }
.cx-actions { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.cx-actions .btn { margin:0; }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--ink); }

/* ---- the card, typeset like an article ---- */
.envelope-scene { text-align:center; padding:60px 0; color:var(--muted); }
.env { font-size:5rem; animation:wobble 1s infinite; }
@keyframes wobble { 50% { transform:rotate(-8deg) scale(1.1); } }
.card { font-family:var(--serif); line-height:1.75; font-size:1.05rem; animation:rise .7s ease-out; }
.card .kicker { font-family:var(--sans); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); margin:0 0 6px; }
.card h1, .card h2 { font-family:var(--slab); font-weight:900; font-size:1.9rem; line-height:1.15; margin:0 0 14px; }
.card img { max-width:100%; display:block; margin:14px 0; }
.card p:first-of-type::first-letter { font-family:var(--slab); font-size:3.2em; float:left; line-height:.8; padding:6px 8px 0 0; }
@keyframes rise { from { opacity:0; transform:translateY(20px); } }

/* ---- confetti + floating emoji ---- */
.confetti { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
.confetti i { position:absolute; top:-10px; width:10px; height:14px; border-radius:2px; animation:fall linear forwards; }
@keyframes fall { to { transform:translateY(105vh) rotate(720deg); opacity:.8; } }
.floaties { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.floaties span { position:absolute; bottom:-80px; opacity:.15; animation:floatUp linear infinite; will-change:transform; }
@keyframes floatUp {
  0%   { transform:translate(0, 0) rotate(0deg); }
  50%  { transform:translate(var(--drift), -55vh) rotate(calc(var(--spin) / 2)); }
  100% { transform:translate(0, -115vh) rotate(var(--spin)); }
}
@media (prefers-reduced-motion: reduce) { .floaties { display:none; } }

.xw-bar { display:flex; align-items:center; justify-content:center; gap:14px; }
.toggle { font:inherit; font-size:.75rem; font-weight:600; padding:6px 12px; border:1px solid var(--ink); border-radius:999px; background:#fff; color:var(--ink); cursor:pointer; }
.cx-actions .btn:disabled { background:#ccc; color:#fff; }

/* ---- the secret eye and the code screen ---- */
.eye { display:flex; justify-content:center; margin:26px auto 0; width:44px; height:44px; align-items:center; color:var(--ink); opacity:.3; border-radius:50%; transition:opacity .2s; }
.eye:hover, .eye:active { opacity:1; }
.pin { text-align:center; padding-top:20px; }
.pin-title { font-family:var(--slab); font-weight:700; font-size:1.3rem; margin:0 0 18px; }
.pin-dots { display:flex; justify-content:center; gap:16px; margin-bottom:10px; }
.pin-dots span { width:16px; height:16px; border-radius:50%; border:2px solid var(--ink); }
.pin-dots span.filled { background:var(--ink); }
.pin-msg { min-height:1.4em; color:#c0392b; font-weight:600; margin:0 0 12px; }
.pin-pad { display:grid; grid-template-columns:repeat(3, 72px); gap:14px; justify-content:center; }
.pin-pad button { width:72px; height:72px; border-radius:50%; border:1.5px solid var(--ink); background:#fff; color:var(--ink); font-family:var(--slab); font-size:1.5rem; font-weight:700; cursor:pointer; }
.pin-pad button:active { background:var(--ink); color:#fff; }
.card .signoff { margin-top:22px; }
.card .ps { font-size:.95rem; margin:6px 0; }