/* Round 3: design system v3. One button family on the 8 px grid (48 / 56 / 64 tall, radius 16 / 18 / 20), pressed and
   disabled states, IBM Plex type scale (12 / 14 / 16 / 20 / 24 / 32 / 40), spring-in popups, the settings sheet, next goal,
   win-streak multiplier, "so close" continue and the daily reward moment. Touch targets are never under 48 px. */
:root { --spring: cubic-bezier(.2, 1.4, .35, 1); --ease: cubic-bezier(.2, .8, .2, 1); --danger: #E0573F; --ok: #5FD39A;
  --press: translateY(2px) scale(.96); --gold3: #D98E1F; }
body { font-size: 16px; line-height: 1.25; }

/* ---------- buttons ---------- */
.btn, .cta, .ghost, .sq, .mini, .ib, .pill, .mode, .strip, .row, .pw, .node, .goalrow, .lvring, .seg button, .tier, .acard {
  touch-action: manipulation; transition: transform .22s var(--spring), box-shadow .18s, filter .18s, opacity .18s; }
.btn { height: 48px; min-width: 48px; padding: 0 16px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.btn.lg { height: 56px; border-radius: 18px; font-size: 18px; padding: 0 24px; }
.btn.pri, .cta { color: #22160A; background: linear-gradient(180deg, #FFDB8E, #F1AE3A 55%, var(--gold3));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(120,60,0,.35), 0 8px 20px rgba(241,174,58,.25); font-weight: 700; }
.btn.sec { color: var(--ivory); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), var(--panel);
  border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 10px rgba(0,0,0,.25); }
.btn.sec .ic { color: var(--gold); }
.btn.danger { color: #fff; background: linear-gradient(180deg, #EE7158, var(--danger) 60%, #B8402C); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 6px 16px rgba(224,87,63,.25); }
.ghost, .btn.ghost { height: 48px; border-radius: 16px; color: var(--muted); font-size: 16px; font-weight: 600; background: none; box-shadow: none; border: 0; }
.cta { height: 64px; border-radius: 20px; font-size: 22px; gap: 12px; }
.panel .cta { height: 56px; border-radius: 18px; font-size: 20px; }
.sq { width: auto; min-width: 96px; height: 64px; border-radius: 20px; padding: 0 16px; font-size: 14px; font-weight: 600; gap: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), var(--panel); border: 1px solid rgba(255,255,255,.1); color: var(--ivory); }
.sq .ic { color: var(--gold); }
.mini { height: 48px; min-width: 72px; border-radius: 16px; font-size: 16px; }
.row { height: 56px; border-radius: 16px; font-size: 16px; font-weight: 500; }
.ib, .pill, .lvring { height: 48px; min-width: 48px; }
.btn:active, .cta:active, .ghost:active, .sq:active, .mini:active, .ib:active, .pill:active, .mode:active, .strip:active, .row:active,
.goalrow:active, .lvring:active, .seg button:active, .tier:active, .acard:active { transform: var(--press); transition-duration: .06s; filter: brightness(.94); }
.pw:active { transform: scale(.92); transition-duration: .06s; }
.cta:active, .btn.pri:active { box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(120,60,0,.35), 0 3px 8px rgba(241,174,58,.2); }
button[disabled], .btn[disabled], .mini[disabled] { opacity: .38; filter: saturate(.25); box-shadow: none; pointer-events: none; animation: none; }
button:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
@media (hover: hover) { .btn:hover, .cta:hover, .sq:hover, .mode:hover, .strip:hover, .row:hover, .goalrow:hover, .ib:hover { filter: brightness(1.08); } }

/* ---------- home ---------- */
.actions { gap: 16px; padding: 0 24px calc(24px + var(--sab)); }
.goalrow { height: 48px; width: 100%; border-radius: 16px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: linear-gradient(90deg, rgba(241,174,58,.14), rgba(241,174,58,.04)); border: 1px solid rgba(241,174,58,.28); text-align: start; }
.goalrow small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold2); }
.goalrow .ic { color: var(--gold); }
.goalrow .gl { font-size: 14px; font-weight: 600; white-space: nowrap; }
.goalrow .track, .strip .track { flex: 1; height: 8px; border-radius: 4px; background: rgba(0,0,0,.35); overflow: hidden; }
.goalrow .track i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--f)); border-radius: 4px;
  background: linear-gradient(90deg, var(--gold3), var(--gold2)); animation: fill .9s .25s var(--ease) both; }
[dir=rtl] .goalrow .track i { transform-origin: right; }
.goalrow b { font: 700 14px "Plex Latin", sans-serif; color: var(--ivory); direction: ltr; }
@keyframes fill { from { transform: scaleX(0); } }
.fl { display: inline-flex; align-items: center; gap: 4px; font-style: normal; height: 32px; padding: 0 10px; border-radius: 16px;
  background: rgba(255,122,61,.14); color: #FF8A4C; font: 700 14px "Plex Latin", sans-serif; direction: ltr; }
.fl { unicode-bidi: isolate; } .fl b { font-size: 16px; } .fl i { font-style: normal; color: #FFE2B8; background: rgba(255,122,61,.35); border-radius: 10px; padding: 2px 6px; font-size: 13px; }
.fl.t2 { color: #FF6A33; } .fl.t3 { color: #8FC3FF; background: rgba(90,150,255,.16); } .fl.t3 i { background: rgba(90,150,255,.35); color: #EAF3FF; }
.cta .fl { position: static; margin-inline-start: 4px; background: rgba(34,22,10,.14); color: #7A2E0A; } /* in the flow: never over the label */
.cta .fl i { background: rgba(34,22,10,.18); color: #4A1C06; }
.cta { position: relative; }
.modes { gap: 8px; } .mode { height: 72px; border-radius: 18px; gap: 4px; }
.mode .ic { width: 32px; height: 32px; padding: 6px; }
.mode span { font-size: 12px; }
.strip { height: 48px; border-radius: 16px; }
@media (max-height: 760px) { #emblem { width: min(44vw, 180px, 22vh); height: min(44vw, 180px, 22vh); } .mark { font-size: 40px; }
  [dir=rtl] .mark { font-size: 44px; } .actions { gap: 12px; } }
@media (max-height: 680px) { .hero .bestline { display: none; } }

/* ---------- path ---------- */
.node u { position: absolute; top: -10px; inset-inline-end: -10px; height: 24px; min-width: 24px; padding: 0 4px; border-radius: 12px; border: 2px solid rgba(11,16,32,.9); display: flex;
  align-items: center; justify-content: center; background: #C9472F; color: #FFE7DC; box-shadow: 0 2px 6px rgba(0,0,0,.4); text-decoration: none; }
.node u.s { background: #A42D63; color: #FFE0EF; } .node u .ic { width: 14px; height: 14px; }
.node u .ic + .ic { margin-inline-start: -5px; }
.node.lock u { opacity: 1; }
.node.lock { opacity: .55; }
.tag { display: inline-flex; align-self: center; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 16px; font-style: normal;
  font-size: 14px; font-weight: 700; background: #7A3A33; color: #FFE1D6; }
.tag .ic + .ic { margin-inline-start: -8px; }
.tag.super { background: linear-gradient(90deg, #A42D63, #7A1F4A); color: #FFE0EF; animation: tagPulse 1.6s ease-in-out infinite; }
.tag.finale { background: #6B4A12; color: #FFE3A6; }
@keyframes tagPulse { 50% { box-shadow: 0 0 0 6px rgba(164,45,99,.18); } }

/* ---------- HUD ---------- */
body[data-screen=gameScreen] #app { background: var(--bg0); }
#gameScreen .layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform; }
#tobest { width: 96px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
#tobest i { display: block; height: 100%; transform-origin: left; background: rgba(255,255,255,.55); transition: transform .3s var(--ease); }
#tobest.past i { background: var(--gold2); box-shadow: 0 0 8px var(--gold); }
#tobest[hidden] { display: none; }
.hrow > .best { grid-column: 3; grid-row: 1; }
#wsWrap { justify-self: end; } #wsWrap[hidden] { display: none; }
#bar { gap: 8px; padding: 8px 16px calc(12px + var(--sab)); overflow-x: auto; scrollbar-width: none; touch-action: pan-x; pointer-events: auto;
  justify-content: safe center; }
#bar::-webkit-scrollbar { display: none; }
.pw { width: 48px; height: 48px; border-radius: 16px; }
.pw .ic { width: 22px; height: 22px; }
/* phones: each power keeps a full 48 px hit area; the tile you see is 42 px inside it (transparent 3 px border), no gaps */
@media (max-width: 440px) { .pw { width: 48px; height: 48px; border: 3px solid transparent; background-clip: padding-box; border-radius: 16px; }
  .pw .ic { width: 22px; height: 22px; } #bar { gap: 0; padding-inline: 3px; }
  .pw b { top: -3px; inset-inline-end: -3px; } }
@media (max-width: 383px) {
  #bar[data-n="8"] { justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  [dir=rtl] #bar[data-n="8"] { -webkit-mask-image: linear-gradient(270deg, #000 85%, transparent); mask-image: linear-gradient(270deg, #000 85%, transparent); } }
@media (max-width: 350px) { .pw { width: 48px; height: 48px; } }
@media (min-width: 700px) { .pw { width: 56px; height: 56px; border-radius: 18px; } #bar { gap: 16px; } }

/* ---------- sheets: spring in, content rises in a short stagger ---------- */
.panel { transition: transform .46s var(--spring); gap: 16px; padding: 24px 24px calc(24px + var(--sab)); }
#sheet.out .panel { transition: transform .22s ease-in; }
#sheet.on .panel > * { animation: rise .36s var(--ease) both; }
#sheet.on .panel > :nth-child(2) { animation-delay: .04s; } #sheet.on .panel > :nth-child(3) { animation-delay: .08s; }
#sheet.on .panel > :nth-child(4) { animation-delay: .12s; } #sheet.on .panel > :nth-child(n+5) { animation-delay: .16s; }
@media (min-width: 700px) { .panel { transition: transform .46s var(--spring), opacity .2s; } }
.panel .h { font-size: 24px; } .panel .h.big { font-size: 40px; }
.panel .btnrow { gap: 16px; justify-content: center; }
.panel .btnrow .btn { flex: 1; }
.panel .btnrow .sq { flex: none; }
.panel .btnrow .cta { flex: 1; min-width: 0; }

/* result */
.rwline { display: flex; justify-content: center; align-items: center; gap: 8px; }
.mult { direction: ltr; unicode-bidi: isolate; font-style: normal; height: 32px; padding: 0 10px; border-radius: 16px; display: inline-flex; align-items: center; background: rgba(255,122,61,.18);
  color: #FFB27A; font: 700 15px "Plex Latin", sans-serif; animation: multIn .5s .5s var(--spring) both; }
@keyframes multIn { from { transform: scale(0) rotate(-12deg); opacity: 0; } }
.stline { display: flex; justify-content: center; align-items: center; gap: 8px; }
.stline .fl.up { animation: multIn .5s .3s var(--spring) both; }
.stline.lost { color: var(--muted); font-size: 14px; font-weight: 600; }
.stline.lost .ic { color: #6F7896; } .stline.lost s { font: 700 16px "Plex Latin", sans-serif; text-decoration-thickness: 2px; color: #9AA3BF; }

/* so close + continue */
.panel .h.close { color: var(--gold2); animation: nudge .5s .2s ease-out both; }
@keyframes nudge { 30% { transform: translateX(-6px); } 60% { transform: translateX(5px); } 85% { transform: translateX(-2px); } }
.goals.miss { gap: 8px; } .goals.miss .goal { width: 72px; height: 72px; border-radius: 18px; font-size: 20px; gap: 4px; background: rgba(224,87,63,.1); border: 1px solid rgba(224,87,63,.3); }
.gives { display: flex; justify-content: center; gap: 8px; }
.gives .rw { height: 32px; background: rgba(95,211,154,.12); color: #BFF0D6; } .gives .rw .ic { color: var(--ok); width: 18px; height: 18px; }
.pbar.near .track i { background: linear-gradient(90deg, #E0573F, var(--gold2)); }

/* daily reward moment */
.day { transition: transform .3s var(--spring); }
.day.now { animation: dayGlow 1.4s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(241,174,58,.5); }
@keyframes dayGlow { 50% { box-shadow: 0 0 0 6px rgba(241,174,58,0), 0 0 24px rgba(241,174,58,.45); transform: translateY(-2px); } }
.day.claimed { animation: stamp .5s var(--spring) both; border-color: var(--ok); background: rgba(95,211,154,.12); }
.day.claimed i { animation: multIn .4s .15s var(--spring) both; }
@keyframes stamp { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(-4deg); } 100% { transform: scale(1); } }
.rwburst { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.rw.pop { height: 56px; padding: 0 16px; border-radius: 18px; font-size: 22px; gap: 8px; background: rgba(241,174,58,.14);
  animation: popIn .55s calc(var(--k) * .08s + .1s) var(--spring) both; }
@keyframes popIn { from { transform: scale(.2) translateY(16px); opacity: 0; } }
.collect { animation: rise .3s .35s var(--ease) both; }
.flycoin { position: fixed; left: 0; top: 0; z-index: 60; color: var(--gold2); pointer-events: none; margin: -12px 0 0 -12px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.pill.bump { animation: bump .32s var(--spring); }
@keyframes bump { 40% { transform: scale(1.12); } }

/* settings */
.panel.settings .h { gap: 8px; } .panel.settings .h .ic { color: var(--gold); }
.group { display: flex; flex-direction: column; gap: 2px; border-radius: 20px; overflow: hidden; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); }
.group .row { border-radius: 0; background: rgba(255,255,255,.035); }
.row.lang { height: 64px; }
.seg { padding: 0; gap: 0; height: 48px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.seg button { height: 48px; min-width: 64px; border-radius: 0; font-size: 16px; }
.row.danger, .row.danger .ic { color: #FF9C86; }
.ver { text-align: center; color: var(--muted); font: 500 12px "Plex Latin", sans-serif; opacity: .7; margin-top: -8px; }
.panel .q { margin: 0; text-align: center; font-size: 20px; font-weight: 600; }
.sw { transition: background .2s; } .sw::after { transition: transform .28s var(--spring); }

body.reduce .flycoin { display: none; }
body.reduce #sheet.on .panel > *, body.reduce .rw.pop, body.reduce .day.now, body.reduce .tag.super { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #sheet.on .panel > *, .rw.pop, .day.now, .tag.super, .goalrow .track i { animation: none !important; } }