/* Game Night (owner's pick, 2026-10-06): everything below the generator is a tabletop of chunky,
   pressable toy pieces in the generator's own colours. Layout comes from scripts/prepare-lower.mjs;
   the stage itself is never restyled. Nunito is the app family's typeface (LuckySap, LuckyFind,
   LuckyStrike), self-hosted; scripts Nunito lacks fall back to the system's rounded or plain fonts. */
@font-face { font-family:"Nunito"; font-style:normal; font-weight:400 1000; font-display:swap; src:url(/fonts/nunito-latin.woff) format("woff");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:400 1000; font-display:swap; src:url(/fonts/nunito-latin-ext.woff) format("woff");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303,U+0309,U+0323,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:400 1000; font-display:swap; src:url(/fonts/nunito-cyrillic.woff) format("woff");
  unicode-range:U+0301,U+0400-052F,U+1C80-1C8A,U+20B4,U+2116,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }

:root { --bg:#fff3d9; --ink:#2b1c12; --ink-2:#5c4637; --card:#fffaf0; --line:#ecd9b6; --link:#0a5bd3;
  --red:#ff3b30; --orange:#ff9500; --yellow:#ffcc00; --green:#34c759; --blue:#007aff; --purple:#af52de; --teal:#00c7be;
  --round:"Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Paper, type and rhythm */
.info, .language-menu, body > footer { background:var(--bg) !important; color:var(--ink); font-family:var(--round); }
/* Sections can meet on a fractional pixel, letting the body's black (behind the stage) show as a hairline. */
section.app-promotion + main.info, main.info + .language-menu, .language-menu + footer, main.info + footer { margin-top:-1px; }
main.info { padding:44px 20px 80px; }
main.info > .wrap { max-width:1080px; }
.info h1 { font-size:clamp(2.3rem,5.4vw,3.6rem); line-height:1.02; letter-spacing:-.025em; font-weight:950; margin:0 0 16px; color:var(--ink); text-wrap:balance; }
.info h2 { font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.08; letter-spacing:-.02em; font-weight:900; margin:0 0 8px; color:var(--ink); text-wrap:balance; }
.info h3 { font-weight:900; }
.info p, .info li, .info dd { color:var(--ink-2); font-size:1.08rem; line-height:1.6; }
.info a { color:var(--link); font-weight:800; text-underline-offset:3px; }
.info a:focus-visible, .info button:focus-visible, .info summary:focus-visible { outline:3px solid var(--link); outline-offset:3px; border-radius:8px; }
.gn, .quick, main.info .learn-discovery { margin-top:64px; }
.gn > h2 + p { margin:0; font-weight:700; }

/* The app strip: a yellow game-box lid. Same piece at the top and at the end of every page. */
section.app-strip { padding:22px 20px 6px; border:0; }
.app-strip .strip-inner, .closing-strip .strip-inner { max-width:1080px; margin:0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; padding:12px 16px; border-radius:22px; background:var(--yellow); color:var(--ink); box-shadow:0 6px 0 #d9a400; }
.strip-icon { width:52px; height:52px; border-radius:13px; flex:0 0 auto; box-shadow:0 3px 0 #0003; }
.strip-copy { display:flex; flex-direction:column; gap:1px; margin-inline-end:auto; min-width:0; line-height:1.3; }
.strip-copy h2, .strip-copy .strip-title { margin:0 !important; font:900 1.15rem/1.25 var(--round); letter-spacing:-.01em; }
.strip-copy h2 a, .strip-copy .strip-title a { color:var(--ink) !important; text-decoration:none; }
.strip-copy h2 a:hover, .strip-copy .strip-title a:hover { text-decoration:underline; text-decoration-thickness:2px; }
.strip-copy p { margin:0 !important; font-size:.92rem !important; line-height:1.4 !important; color:#5a4300 !important; font-weight:700; }
.strip-copy p a { color:inherit !important; }
.app-strip .stores, .closing-strip .stores { margin:0 !important; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.app-strip .badge-apple, .closing-strip .badge-apple { height:36px; }
.app-strip .badge-google, .closing-strip .badge-google { height:46px; margin:-5px 0; }
.app-strip .stores a, .closing-strip .stores a { border-radius:9px; transition:transform .15s; }
.app-strip .stores a:hover, .closing-strip .stores a:hover { transform:translateY(-2px); }
.app-strip a:focus-visible, .closing-strip a:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.closing-strip { margin-top:64px; }

/* Intro with a little pile of toys */
.intro { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:center; }
.intro-text > p { margin:0 0 12px; max-width:36em; }
.intro-text > h1 + p { font-size:1.2rem; }
.intro-art { position:relative; height:250px; }
.toy { position:absolute; inset-inline-start:var(--x); top:var(--y); width:var(--s); height:var(--s); display:grid; place-items:center; transform:rotate(var(--r)); animation:toy-in .7s var(--d) cubic-bezier(.2,.9,.3,1.25) both; transition:rotate .4s cubic-bezier(.2,.9,.3,1.3); }
@keyframes toy-in { from { translate:0 -26px; opacity:0; } }
.intro-art:hover .toy:nth-child(odd) { rotate:16deg; } .intro-art:hover .toy:nth-child(3n) { rotate:-14deg; }
.toy-die { filter:drop-shadow(0 8px 0 var(--sh)); }
.toy-die .die { width:100%; height:100%; } .toy-die rect { fill:var(--c); } .toy-die circle { fill:#fff; }
.toy-coin { border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe9a0,#ffcc00 55%,#e3a600); box-shadow:0 7px 0 #b88400, inset 0 0 0 calc(var(--s) * .07) #ffdf5d; font:900 calc(var(--s) * .41)/1 var(--round); color:#8a5a00; }
.toy-ball { border-radius:50%; background:#fff; box-shadow:0 6px 0 #d9c8a8, inset 0 0 0 calc(var(--s) * .13) var(--c); font:900 var(--f)/1 var(--round); color:var(--ink); }
.toy-power { border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff7a70,var(--c) 60%); box-shadow:0 6px 0 var(--sh); font:900 var(--f)/1 var(--round); color:#fff; }
.toy-token { border-radius:50%; background:var(--c); box-shadow:0 5px 0 var(--sh), inset 0 0 0 calc(var(--s) * .14) #ffffff38; }
.toy-tile { border-radius:14px; background:linear-gradient(#fbe8c4,#f2d49c); box-shadow:0 7px 0 #c9a15f, inset 0 -3px 0 #0000000f; color:var(--ink); }
.toy-tile b { font:950 calc(var(--s) * .52)/1 var(--round); }
.toy-tile small { position:absolute; inset-inline-end:9px; bottom:7px; font:900 calc(var(--s) * .16)/1 var(--round); color:var(--ink-2); }
.toy-ticket { width:var(--s); height:calc(var(--s) * .5); filter:drop-shadow(0 6px 0 var(--sh)); }
.toy-ticket b { display:grid; place-items:center; width:100%; height:100%; border-radius:12px; background:var(--c); color:#2b1c12; font:950 calc(var(--s) * .2)/1 var(--round); letter-spacing:-.01em;
  -webkit-mask:radial-gradient(circle 13px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 13px at 0 50%,#0000 97%,#000) left/51% 100% no-repeat, radial-gradient(circle 13px at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  outline:2px dashed #0000002e; outline-offset:-9px; }
.toy-ticket.dark b { color:#fff; outline-color:#ffffff66; }

/* Quick picks: six toy-coloured pieces you press. Tones are deepened so white titles stay readable. */
.quick-head { display:flex; align-items:baseline; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; }
.quick-head h2, .quick-head p { margin:0; }
.quick-head p { font-weight:700; }
.quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:20px; }
.pick { display:flex; flex-direction:column; min-width:0; border-radius:24px; padding:16px 16px 18px; background:var(--tone); box-shadow:0 6px 0 var(--shade); }
.pick-dice { --tone:#ff3b30; --shade:#b3261e; } .pick-coin { --tone:#d96a00; --shade:#9a4b00; } .pick-yesno { --tone:#1e9a42; --shade:#136b2d; }
.pick-letter { --tone:#007aff; --shade:#0050b3; } .pick-lotto { --tone:#9b44c9; --shade:#6c2b8f; } .pick-winner { --tone:#009a93; --shade:#006b66; }
.pick header { display:flex; align-items:center; justify-content:space-between; gap:6px 10px; flex-wrap:wrap; }
.pick h3 { margin:0; font-size:1.3rem; line-height:1.15; color:#fff; }
.pick header a { font-size:.8rem; font-weight:850; color:var(--ink) !important; text-decoration:none; background:var(--card); padding:4px 10px; border-radius:999px; box-shadow:0 2px 0 var(--shade); white-space:nowrap; }
.pick header a:hover { background:#fff; }
.pick-face { all:unset; box-sizing:border-box; cursor:pointer; flex:1; margin-top:12px; display:flex; align-items:center; justify-content:center; min-height:150px; padding:14px; border-radius:18px; background:var(--card); color:var(--ink); text-align:center; box-shadow:inset 0 -5px 0 #0000001a; transition:transform .12s; -webkit-tap-highlight-color:transparent; }
.pick-face:active { transform:translateY(3px); }
.pick-face:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.pick-out { display:flex; flex-direction:column; align-items:center; gap:8px; }
.pick-face.bump .pick-out > :first-child { animation:bump .38s cubic-bezier(.2,.9,.3,1.4); }
@keyframes bump { from { transform:scale(.7) rotate(-6deg); opacity:.3; } }
.pick-note { font-size:.95rem; font-weight:700; color:var(--ink-2); } .pick-note b { color:var(--ink); font-weight:900; }
.dice-pair { display:flex; gap:12px; } .pick .die { width:62px; height:62px; } .pick .die rect { fill:var(--red); } .pick .die circle { fill:#fff; }
.coin { width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%,#ffe9a0,#ffcc00 55%,#e3a600); box-shadow:0 5px 0 #b88400, inset 0 0 0 6px #ffdf5d; font:900 32px/1 var(--round); color:#8a5a00; }
.big-word, .big-letter, .ticket-no { font:950 clamp(44px,5vw,62px)/1 var(--round); color:var(--tone); }
.balls { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:270px; }
.balls i { font-style:normal; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#fff; color:var(--ink); font-weight:900; font-variant-numeric:tabular-nums; box-shadow:inset 0 0 0 3px var(--tone), 0 3px 0 #d9c8a8; }
.entries { display:flex; align-items:center; gap:8px; align-self:flex-start; margin-top:10px; padding:4px 4px 4px 12px; border-radius:12px; background:var(--card); color:var(--ink); font-size:.85rem; font-weight:850; box-shadow:0 2px 0 var(--shade); }
[dir="rtl"] .entries { padding:4px 12px 4px 4px; }
.entries input { width:84px; font:inherit; padding:5px 8px; border:0; border-radius:9px; background:#fff; color:var(--ink); box-shadow:inset 0 -2px 0 #0000001a; }

/* More generators: chunky chips. Tiles flip to a sample result when pointed at (info.js). */
.tools { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-top:20px; }
.tools a { padding:13px 15px; border-radius:18px; background:var(--card); border:0; box-shadow:0 4px 0 var(--line); font-weight:inherit; }
.tools a:hover, .tools a:focus-visible { transform:translateY(-2px); box-shadow:0 6px 0 var(--line); }
.tools .ic { width:50px; height:50px; border-radius:15px; font-size:24px; box-shadow:0 3px 0 #0002; perspective:300px; position:relative; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.3,.9,.3,1.15); }
.tools .ic .face { backface-visibility:hidden; display:grid; place-items:center; width:100%; height:100%; }
.tools .ic .sample { position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; background:inherit; color:#fff; font:900 22px/1 var(--round); font-variant-numeric:tabular-nums; backface-visibility:hidden; transform:rotateY(180deg); }
.tools .ic.flipped { transform:rotateY(180deg); }
.tools .tx b { font:900 1.1rem/1.2 var(--round); color:var(--ink); }
.tools .tx small { color:var(--ink-2); font-weight:700; }
.gn-more nav.langs { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; line-height:1.3; }
.gn-more nav.langs a { padding:9px 15px; border-radius:999px; background:var(--card); color:var(--ink); font-weight:850; font-size:.98rem; text-decoration:none; box-shadow:0 4px 0 var(--line); transition:transform .15s, box-shadow .15s; }
.gn-more nav.langs a:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--line); }

/* How to use it: numbered steps on coloured counters */
.steps { list-style:none; padding:0 !important; margin:30px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:30px 16px; counter-reset:step; }
.steps li { counter-increment:step; position:relative; margin:0; padding:48px 20px 20px; border-radius:22px; background:var(--card); box-shadow:0 5px 0 var(--line); }
.steps li::before { content:counter(step); position:absolute; inset-inline-start:18px; top:-20px; width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--n,var(--red)); color:#fff; font:900 28px/1 var(--round); box-shadow:0 5px 0 #0002; }
.steps li:nth-child(3n+1) { --n:#ff3b30; } .steps li:nth-child(3n+2) { --n:#007aff; } .steps li:nth-child(3n) { --n:#1e9a42; }

/* What people use it for: cards, title first when the copy has one */
.uses { list-style:none; padding:0 !important; margin:20px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.uses li { margin:0; display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:18px; background:var(--card); box-shadow:0 4px 0 var(--line); font-size:1rem; }
.uses li b { font:900 1.12rem/1.25 var(--round); color:var(--ink); }
.uses li span { font-size:.98rem; }

/* Short sections become side-by-side cards */
.gn-pair { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.gn-card { background:var(--card); border-radius:24px; padding:24px 26px; box-shadow:0 5px 0 var(--line); }
.gn-card > h2 { font-size:clamp(1.4rem,2.6vw,1.75rem); }
.gn-card > p { margin:10px 0 0; }
.mini-steps { margin:12px 0 0; padding-inline-start:1.3em; }
.mini-steps li { margin:6px 0; }
.mini-steps li::marker { color:#e5322a; font-weight:900; }

/* FAQ: info.js turns each question into a button; without it every answer stays visible. */
.faq { margin:18px 0 0; }
.faq dt { margin:12px 0 0; font:900 1.12rem/1.35 var(--round); color:var(--ink); }
.faq dd { margin:6px 0 0; }
.faq.enhanced dt button { all:unset; box-sizing:border-box; position:relative; display:block; width:100%; padding-block:16px; padding-inline:20px 60px; border-radius:18px; background:var(--card); box-shadow:0 4px 0 var(--line); cursor:pointer; font:900 1.12rem/1.35 var(--round); color:var(--ink); }
.faq.enhanced dt button::after { content:"+"; position:absolute; inset-inline-end:20px; top:50%; translate:0 -50%; font-size:1.7rem; line-height:1; font-weight:900; color:#e5322a; transition:rotate .2s; }
.faq.enhanced dt.open button::after { rotate:45deg; }
.faq.enhanced dt.open button { border-radius:18px 18px 0 0; box-shadow:none; }
.faq.enhanced dt button:focus-visible { outline:3px solid var(--link); outline-offset:3px; }
.faq.enhanced dd { display:grid; grid-template-rows:0fr; margin:0; border-radius:0 0 18px 18px; background:var(--card); transition:grid-template-rows .3s ease; }
.faq.enhanced dd > div { overflow:hidden; }
.faq.enhanced dd > div > p { margin:0; padding:0 20px 18px; }
.faq.enhanced dt.open + dd { grid-template-rows:1fr; box-shadow:0 4px 0 var(--line); }

/* Randomness Lab: the invitation sits on the table like the other pieces. */
.learn-discovery .lab-invitation { background:var(--card); border:0; box-shadow:0 6px 0 var(--line); color:var(--ink); }
.learn-discovery .lab-invitation h2 { color:var(--ink); }
.learn-discovery .lab-invitation p { color:var(--ink-2); }
.learn-discovery .lab-invitation .lab-invitation-eyebrow { color:#b3261e; }
.lab-invitation::after { display:none; }
.lab-invitation-art.has-plates { position:relative; min-height:200px; }
.lab-invitation-art.has-plates img { position:absolute; width:58%; height:auto; aspect-ratio:4/3; border-radius:16px; box-shadow:0 6px 0 #0000001f; border:5px solid #fff; transition:transform .35s ease; }
.lab-invitation-art.has-plates img:nth-child(1) { left:2%; top:14%; transform:rotate(-8deg); }
.lab-invitation-art.has-plates img:nth-child(2) { left:34%; top:2%; transform:rotate(6deg); z-index:1; }
.lab-invitation-art.has-plates img:nth-child(3) { left:20%; top:40%; transform:rotate(-2deg); z-index:2; }
.lab-invitation:hover .lab-invitation-art.has-plates img:nth-child(1) { transform:rotate(-12deg) translate(-8px,-4px); }
.lab-invitation:hover .lab-invitation-art.has-plates img:nth-child(2) { transform:rotate(10deg) translate(8px,-6px); }
main.info .learn-discovery:not(.learn-discovery-feature) { padding:22px 24px; border:0; border-radius:22px; background:var(--card); box-shadow:0 5px 0 var(--line); }
main.info .learn-discovery:not(.learn-discovery-feature) h2 { font-size:1.35rem; margin:0 0 6px; }
main.info .learn-discovery:not(.learn-discovery-feature) p { margin:0 0 10px; }

/* How random is it? (English): the picks you've made on this visit, with repeats marked. */
.session-tape { margin:16px 0 4px; padding:16px 18px; border-radius:18px; background:var(--bg); }
.session-tape[hidden] { display:none; }
.session-tape p { margin:0 0 10px !important; font-size:.95rem !important; }
.session-tape ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.session-tape li { margin:0 !important; min-width:44px; padding:6px 11px; border-radius:11px; background:#fff; box-shadow:0 3px 0 var(--line); text-align:center; font-weight:900; font-variant-numeric:tabular-nums; color:var(--ink) !important; font-size:1rem !important; animation:tape-in .3s ease backwards; }
.session-tape li.again { background:var(--red); color:#fff !important; box-shadow:0 3px 0 #b3261e; }
.session-tape li.again::after { content:" ↻"; font-weight:700; }
@keyframes tape-in { from { transform:translateY(6px) scale(.9); opacity:0; } }

/* Language menu and footer */
.language-menu, body > footer { border-top:2px dashed var(--line); }
.language-menu summary { font-weight:850; color:var(--ink-2); }
.language-menu a { color:var(--link); font-weight:700; }
body > footer, body > footer a { color:var(--ink-2); }

@media (max-width:860px) {
  .intro { grid-template-columns:1fr; gap:8px; } .intro-art { height:190px; max-width:420px; }
  .quick-grid { grid-template-columns:1fr 1fr; }
  .gn-pair { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  main.info { padding:36px 16px 64px; }
  section.app-strip { padding:16px 16px 4px; }
  /* Phones: two pieces per row keep the desk about half as tall. */
  .quick-grid { gap:12px; }
  .pick { padding:12px 12px 14px; border-radius:20px; }
  .pick h3 { font-size:1.05rem; }
  .pick header a { font-size:.72rem; padding:3px 8px; }
  .pick-face { min-height:118px; margin-top:10px; padding:10px 6px; border-radius:14px; }
  .pick .die { width:46px; height:46px; } .dice-pair { gap:8px; }
  .coin { width:58px; height:58px; font-size:25px; }
  .big-word, .big-letter, .ticket-no { font-size:40px; }
  .balls { gap:4px; } .balls i { width:28px; height:28px; font-size:.8rem; box-shadow:inset 0 0 0 2px var(--tone), 0 2px 0 #d9c8a8; }
  .pick-note { font-size:.82rem; }
  .entries { font-size:.75rem; padding-inline-start:8px; } .entries input { width:64px; }
  .intro-art { display:none; }
  .strip-copy h2, .strip-copy .strip-title { font-size:1.02rem; }
  .strip-copy p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.84rem !important; }
  .strip-copy { flex:1 1 60%; }
  .app-strip .stores, .closing-strip .stores { width:100%; }
  .gn, .quick, main.info .learn-discovery { margin-top:52px; }
  .gn-card { padding:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .toy, .pick-face.bump .pick-out > :first-child, .tools .ic, .session-tape li, .faq.enhanced dd, .faq.enhanced dt button::after, .lab-invitation-art.has-plates img { animation:none !important; transition:none !important; }
}