:root{color-scheme:light;font-family:ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#2a2930;background:#f6f4ee;font-synthesis:none;
  --header:70px;--stage:76px;--bottom:188px;--side:8px;
  --ink:#2a2930;--muted:#6b6775;--line:#e4dfd3;--panel:#fff;--yellow:#F2C94C;--red:#E86F51;--green:#BFCA86;--ring:#2f8a4a}
*{box-sizing:border-box;touch-action:manipulation}body{margin:0;-webkit-text-size-adjust:100%;background:#f6f4ee}
button,select,input{font:inherit}
button,select,a.primary{color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 18px;min-height:44px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}button:active{filter:brightness(.96)}
button.primary,a.primary{background:var(--yellow);color:var(--ink);border:0;font-weight:700}button:disabled{opacity:.5}
button.link{border:0;background:none;padding:0;min-height:0;color:var(--red);font-weight:600}
p{color:var(--muted);line-height:1.55}h1{font-size:clamp(28px,5vw,44px);letter-spacing:-1.2px;line-height:1.12;margin:12px 0;color:var(--ink)}
#app{max-width:1050px;margin:auto;min-height:100vh;min-height:100svh;padding:env(safe-area-inset-top) max(var(--side),env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--side),env(safe-area-inset-left))}
header{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px}
header .logo{padding:0;border:0;background:none;min-height:0;height:44px;display:flex;align-items:center}header .logo img{height:40px;width:auto;display:block}

[hidden]{display:none!important}body{position:fixed;inset:0;overflow:hidden;width:100%;overscroll-behavior:none}#app{height:100vh;height:100svh;min-height:0;overflow:hidden}.screen{height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--header));height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--header));overflow:hidden;display:flex;flex-direction:column}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#9a93a8}
/* Home and game share one vertical rhythm: header → stage → board → bottom. The board box is identical on both, so the cards sit in the same place. */
.stage{height:var(--stage);display:flex;flex-direction:column;justify-content:center}
.board{position:relative;min-height:0;width:100%;isolation:isolate;height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--header) - var(--stage) - var(--bottom));height:calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--header) - var(--stage) - var(--bottom))}
.intro{text-align:center;padding:0 8px}.intro h1{font-size:26px;margin:0}
#menu fieldset{border:0;padding:0;margin:0 0 10px}legend{position:absolute;clip-path:inset(100%);width:1px;height:1px;overflow:hidden}input{accent-color:var(--red)}
.menu-actions{max-width:480px;margin:auto;text-align:center;height:var(--bottom);display:flex;flex-direction:column;justify-content:center;padding:0 8px}.menu-actions>.primary{width:100%;font-size:18px}
nav{display:flex;justify-content:center;gap:4px;margin:6px 0 0;flex-wrap:wrap}nav button{border:0;background:none;color:#4a4656;font-size:14px;padding:10px 12px}nav #shop{color:var(--red);font-weight:600}
.links{font-size:13px;color:var(--muted);margin:0}#get-app{display:none;margin-top:6px;font-size:12px;color:#9a93a8}body.web #get-app{display:block}.links .lang select{width:auto;margin:0;padding:6px 10px;min-height:32px;font-size:13px;background:none;border:0;color:#4a4656}.visually-hidden{position:absolute;clip-path:inset(100%);width:1px;height:1px;overflow:hidden}
.card{position:absolute;overflow:visible;filter:drop-shadow(0 3px 6px #0002);pointer-events:none}.card .symbol{pointer-events:auto}.card svg.face{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.symbol{position:absolute;transform:translate(-50%,-50%);width:23%;aspect-ratio:1;border:0;border-radius:50%;background:transparent;min-height:0;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.symbol img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.symbol::after{content:'';position:absolute;inset:-14%;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .08s}.symbol.found::after{background:#5aa36b;opacity:.55}.symbol.wrong::after{background:var(--red);opacity:.5}
@media(prefers-reduced-motion:no-preference){.symbol.found{animation:pop .3s ease}@keyframes pop{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}100%{transform:translate(-50%,-50%) scale(1)}}}
.symbol:focus-visible{outline:2px solid var(--red)}.card.standard .symbol{width:18%}
#game,#menu{position:relative}#ghost,#menu-ghost{position:absolute;left:0;right:0;top:var(--stage);pointer-events:none;opacity:1}#ghost.fade,#menu-ghost.fade{opacity:0;transition:opacity .3s ease-out}.hud{display:flex;justify-content:space-around;align-items:center;gap:15px;padding:0 10px;flex-direction:row}.score-wrap{position:relative}#delta{position:absolute;left:100%;top:4px;margin-left:6px;font-size:22px;font-weight:800;opacity:0;pointer-events:none}#delta.up{color:#2f8a4a}#delta.down{color:var(--red)}@media(prefers-reduced-motion:no-preference){#delta.go{animation:rise .9s ease-out}@keyframes rise{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:translateY(0)}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}}@media(prefers-reduced-motion:reduce){#delta.go{opacity:1}}.hud>div{text-align:center;min-width:60px}.hud span{display:block}.hud strong{display:block;font-size:36px;font-variant-numeric:tabular-nums}.hud button{font-size:13px}.hud strong.urgent{color:var(--red)}
#feedback{text-align:center;font-size:16px;font-weight:600;min-height:44px;margin:8px 0 0;display:flex;align-items:center;justify-content:center;color:var(--ink);opacity:0;transition:opacity .6s ease}#feedback.show{opacity:1;transition:opacity .1s}#feedback.good{color:#2f8a4a}#feedback.bad{color:var(--red)}
.center{text-align:center;padding-top:6px;max-width:450px;margin:0 auto;width:100%;justify-content:center}.center .player-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:0;background:none;margin:0 auto 6px;width:auto!important;font-size:14px;color:var(--muted)}.player-card img{height:96px;width:96px;object-fit:contain;display:block}.level-up{color:#2f8a4a;font-weight:600;margin:0 0 6px;font-size:15px}.center button{display:block;width:100%;margin:10px 0}.big-score{font-size:92px;font-weight:750;line-height:1.1;color:var(--ink)}
#avatars{padding:0 8px}#avatar-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;margin:8px 0;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:auto;flex:0 1 auto;min-height:0;align-content:start}#avatar-grid button{padding:4px;background:#fff;border:0;border-radius:0;min-height:0;aspect-ratio:1}#avatar-grid button.selected{background:#fdf1c8;box-shadow:inset 0 0 0 3px var(--yellow)}#avatar-grid img{width:100%;display:block}#avatars h2{font-size:15px;margin:4px 0 6px}#avatars h1{font-size:24px;margin:14px 0 2px}#avatars p{margin:0 0 4px;font-size:14px}#avatars .back{margin-top:auto!important;flex-shrink:0}#avatars .back{display:block;width:100%;margin-top:16px}
.reading{max-width:600px;margin:0 auto;padding:0 8px;width:100%;justify-content:flex-start}.reading h1{font-size:26px;margin:6px 0 10px}.reading p{margin:8px 0;font-size:15px;line-height:1.45}.reading ol{margin:4px 0;padding-left:22px}.reading li{margin:8px 0;line-height:1.45;font-size:15px}.reading .rule{background:var(--panel);border-left:3px solid var(--yellow);padding:8px 12px;border-radius:0 10px 10px 0;color:var(--ink)}
.reading .primary{display:block;width:100%;margin:auto 0 8px;flex-shrink:0}
.box-photo-btn{display:block;width:100%;padding:0;border:0;background:none;border-radius:16px;margin:0 0 10px;min-height:0;flex:1 1 auto;min-height:120px;max-height:46%}.box-photo{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block;background:#eee9dd}
#buy ul{padding-left:20px;color:var(--ink);margin:4px 0}#buy li{margin:4px 0;font-size:15px}
#leaderboard{max-width:650px;margin:0 auto;padding:0 8px;width:100%}#leaderboard h1{font-size:26px;margin:6px 0 10px}#leaderboard>button{display:block;width:100%;margin:auto 0 8px;flex-shrink:0}#board-status{margin:6px 0;font-size:13px;min-height:0}
#entries{padding:0;list-style:none;margin:0;overflow:hidden;flex:0 1 auto;min-height:0}#entries li{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}#entries img{width:36px;height:36px;object-fit:contain;background:#fff;border-radius:9px;border:1px solid var(--line)}
#entries .who{display:flex;flex-direction:column;line-height:1.2;font-size:15px}#entries .who small{font-size:12px;color:var(--muted)}#entries strong{margin-left:auto;font-size:22px}
#notice{font-size:13px;color:#b2641f;text-align:center;margin:0 0 12px}#notice:empty{display:none}

@media(min-width:700px){:root{--side:32px;--stage:100px}.intro h1{font-size:38px}}
@media(max-height:700px){:root{--header:60px;--stage:64px;--bottom:168px}.intro h1{font-size:21px}header .logo img{height:34px}.hud strong{font-size:30px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .12s ease}}
.segmented{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:3px;gap:3px}.segmented label,.segmented button{flex:1;position:relative;text-align:center;border:0;border-radius:11px;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:14px;background:transparent;padding:0 8px;color:#4a4656;cursor:pointer}.segmented input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.segmented label:has(input:checked),.segmented button.selected{background:var(--yellow);color:var(--ink);font-weight:700}.segmented label:focus-within{outline:3px solid var(--yellow);outline-offset:2px}
@media(max-height:700px){.player-card img{height:64px;width:64px}#entries li{padding:4px 0;gap:8px}#entries img{width:30px;height:30px}#entries strong{font-size:18px}#entries .who{font-size:14px}#entries .who small{font-size:11px}.reading h1,#leaderboard h1{font-size:22px;margin:4px 0 6px}.reading p,.reading li,#buy li{font-size:13px;line-height:1.35;margin:4px 0}.big-score{font-size:72px}.center .player-card{margin-bottom:6px}#avatar-grid{grid-template-columns:repeat(13,1fr)}}

/* Desktop browsers only (mouse/trackpad and a wide window): the cards take the full height on the left;
   headline, deck choice, Play, score and time sit in a column on the right. Touch devices — the iPhone/iPad
   app and phone browsers — never match this query, so their layout is untouched. Home and game keep one grid,
   so the cards stay in the same place on both screens. */
@media (hover:hover) and (pointer:fine) and (min-width:900px){
  #app{max-width:1500px}
  #menu,#game{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,360px);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(16px,3vw,48px)}
  #preview,#menu-ghost,#board,#ghost{grid-column:1;grid-row:1/-1;height:auto;margin:4px 0 20px}
  #menu-ghost,#ghost{position:relative;top:auto;left:auto;right:auto}
  #menu .stage,#game .stage{grid-column:2;grid-row:2;height:auto}
  .menu-actions,#feedback{grid-column:2;grid-row:3;height:auto;max-width:none;width:100%}
  .menu-actions{padding:0;margin:20px 0 0}
  .intro{padding:0}
  .intro h1{font-size:clamp(28px,2.6vw,40px)}
  .hud{padding:0;justify-content:space-between}
  .hud strong{font-size:clamp(44px,4vw,60px)}
  #feedback{margin:24px 0 0;font-size:17px;line-height:1.4}
  /* Mouse affordance: a faint ring under the pointer on playable symbols. */
  #board .symbol:not(.found):not(.wrong):hover::after{background:var(--yellow);opacity:.35}
}