/* Creator Game app styles. The header and shelf are ported from
   docs/mockups/packs-shelf-ceremony-picker.html (v7, approved). Tokens live in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--rink); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--rink); color: var(--ice);
  font: 400 15px/1.4 var(--font-body); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
.bs { font-family: var(--font-display); }

/* The phone column. Full screen on a phone, a centered column on desktop. */
.app {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 430px;
  min-height: 100vh; min-height: 100dvh; margin: 0 auto; overflow-x: hidden;
  padding: calc(var(--safe-top) + 14px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);
  background: radial-gradient(130% 60% at 50% 30%, #1a2236 0%, #0b1120 55%, var(--rink) 100%);
}
@media (min-width: 600px) { .app { border-inline: 1px solid var(--seam); } }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.boot { flex: 1; display: grid; place-content: center; gap: 6px; text-align: center; }
.boot-mark { font: 900 40px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.boot-sub { color: var(--frost); font-size: 13px; }
.noscript { color: var(--ice); text-align: center; padding: 40px 16px; }

.demo-chip {
  align-self: center; margin: -6px 0 8px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--seam); background: rgba(233,241,255,.08); color: var(--frost);
  font-size: 11px; font-weight: 600;
}

/* ---------------------------------------------------------------- header */
.board { flex: none; background: rgba(12,20,38,.85); border: 1px solid var(--seam); border-radius: 16px; padding: 12px 14px 10px; }
.board-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.lvl-num { font: 900 50px/.8 var(--font-display); font-variant-numeric: tabular-nums; }
.lvl-num small { font-size: 18px; color: var(--frost); font-weight: 800; margin-right: 4px; }
.lvl-name { font-size: 13px; color: var(--frost); margin-top: 6px; }
.stats { display: flex; align-items: flex-end; gap: 16px; text-align: right; }
.stat b { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font: 800 26px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.stat span { display: block; font-size: 11px; color: var(--frost); margin-top: 2px; }
.coins b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--coin); box-shadow: 0 0 8px rgba(169,139,255,.65); }

.pips { display: flex; align-items: center; justify-content: flex-end; gap: 4px; height: 26px; }
.pip { width: 9px; height: 20px; border-radius: 3px; background: var(--seam); transform: skewX(-12deg); transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.pip.on { background: var(--goal); box-shadow: 0 0 10px rgba(255,51,71,.55); }
.pip.today { animation: pip-today 1.4s ease-in-out infinite alternate; }
@keyframes pip-today { to { background: #ff6b79; box-shadow: 0 0 16px 2px rgba(255,51,71,.85); } }

.xp { margin-top: 12px; height: 8px; border-radius: 4px; background: var(--seam); overflow: hidden; }
.xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--goal), #ff7a45); transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ease-out); box-shadow: 0 0 12px rgba(255,51,71,.6); }
.xp-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 11.5px; color: var(--frost); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- shelf */
.stage { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-top: 14px; }
.shelf { flex: 1; display: flex; flex-direction: column; }
.shelf-head { display: flex; align-items: center; justify-content: space-between; }
.tabchip { display: inline-flex; align-items: center; gap: 8px; background: rgba(233,241,255,.12); border-radius: 6px; padding: 5px 12px 5px 6px; font-weight: 700; font-size: 13px; }
.tabchip i { font-style: normal; background: var(--ice); color: var(--rink); border-radius: 4px; padding: 1px 5px; font-size: 11px; font-weight: 800; }
.shelf-head span { font-size: 12px; color: var(--frost); }

/* On tall phones the leftover height splits above the packs and below the info, so the
   packs sit mid-screen and the hold button stays at the bottom, in thumb reach. */
.view { position: relative; flex: none; height: 330px; margin: auto -16px 0; overflow: hidden; }
.view canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: blur(1.2px); }
.row { position: absolute; left: 34px; top: 44px; z-index: 1; display: flex; gap: 16px; transition: transform 280ms var(--ease-in-out); }

.pk {
  position: relative; flex: none; height: 252px; padding: 0; border: 0; border-radius: 6px; background: none;
  color: var(--ice); cursor: pointer; transform: scale(.94);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), filter 260ms var(--ease-out);
}
.pk img { display: block; height: 100%; width: auto; border-radius: 6px; }
.pk.sel { transform: scale(1.04); box-shadow: 0 0 0 2px #f4faff, 0 0 10px 3px rgba(225,242,255,.95), 0 0 30px 8px rgba(120,185,255,.6); }
.pk.done { filter: grayscale(.9) brightness(.55); }
.pk[data-tag]::after {
  content: attr(data-tag); position: absolute; right: 10px; top: 12px; padding: 2px 6px; border-radius: 4px;
  background: rgba(0,0,0,.45); font: 800 12px var(--font-display); letter-spacing: .02em;
}
.pk:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.info { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 auto; }
.info-text { min-width: 0; }
.info .nm { margin: 0; font: 900 30px/1 var(--font-display); }
.info .sub { margin-top: 4px; color: var(--frost); font-size: 13px; }
.navs { display: flex; flex: none; gap: 8px; }
.nav {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border-radius: 12px;
  border: 1px solid var(--seam); background: var(--boards); color: var(--ice); cursor: pointer;
  transition: transform 160ms var(--ease-out);
}
.nav:active { transform: scale(var(--press)); }
.nav svg { width: 18px; height: 18px; }

.hold {
  position: relative; flex: none; width: 100%; height: 56px; margin-top: 16px; overflow: hidden;
  border: 0; border-radius: 14px; background: var(--ice); color: var(--rink); font: 700 16px var(--font-body);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  transition: transform 160ms var(--ease-out);
}
.hold:active { transform: scale(var(--press)); }
.hold .fill { position: absolute; inset: 0; background: linear-gradient(90deg, #7fc4ff, #e6f5ff); clip-path: inset(0 100% 0 0); transition: clip-path 200ms var(--ease-out); }
.shelf.holding .hold .fill { clip-path: inset(0 0 0 0); transition: clip-path 1000ms linear; }
.hold .lab { position: relative; }
.hold[disabled] { opacity: .45; cursor: default; }
.hold[disabled]:active { transform: none; }

.shelf-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; }
.shelf-empty b { font: 900 30px/1 var(--font-display); }
.shelf-empty span { max-width: 260px; color: var(--frost); font-size: 14px; }

/* ------------------------------------------------- ceremony: ice cave
   Ported from the mockup's runCeremony. ceremony.js adds the timeline classes
   at TIMELINE ms: drop, freeze, shat1, slabup, telling, shat2, walkout, done.
   The ceremony is its own timeline, not a UI transition. */
.cer {
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 20; width: 100%; max-width: 430px; margin: 0 auto;
  overflow: hidden; cursor: pointer; outline: none; opacity: 0; visibility: hidden;
  background: radial-gradient(120% 70% at 50% 0%, #10306e 0%, #071636 45%, #030918 100%);
  transition: opacity 220ms var(--ease-out), visibility 0s linear 220ms;
  user-select: none; -webkit-user-select: none;
}
.cer.on { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease-out); }
.cer .rays {
  position: absolute; left: 50%; top: -30%; width: 160%; height: 110%; margin-left: -80%;
  background: repeating-conic-gradient(from 168deg at 50% 0%, rgba(140,190,255,0) 0deg 3deg, rgba(140,190,255,.10) 3deg 5deg, rgba(140,190,255,0) 5deg 9deg);
  mask-image: radial-gradient(70% 80% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 0%, #000 30%, transparent 75%);
}
.cer.on .rays { animation: cer-sway 7s ease-in-out infinite alternate; }
@keyframes cer-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.cer .water { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(20,60,140,0), rgba(18,52,120,.55) 30%, #06122c 100%); }
.cer .floor { position: absolute; left: 50%; top: 66%; width: 300px; height: 70px; margin-left: -150px; border-radius: 50%; filter: blur(14px); transition: opacity 500ms var(--ease-out); }
.cer .floor.neutral { background: radial-gradient(closest-side, rgba(90,170,255,.85), rgba(90,170,255,0)); }
.cer .floor.tell { opacity: 0; background: radial-gradient(closest-side, var(--tell, #f7c04a), transparent); }
.cer.telling .floor.tell { opacity: 1; animation: cer-tell 600ms ease-in-out 2 alternate; }
.cer.telling .floor.neutral { opacity: .2; }
@keyframes cer-tell { from { transform: scale(1); } to { transform: scale(1.12); } }
.cer canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cer canvas.cer-aura { filter: blur(1.2px); }

.cer .cpack, .cer .slab, .cer .big { position: absolute; left: 50%; }
.cer .cpack {
  top: 22%; width: 168px; height: 296px; margin-left: -84px; border-radius: 6px; overflow: hidden;
  opacity: 0; transform: translateY(-140%) rotateY(18deg) rotateZ(-4deg);
}
.cer .cpack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cer.drop .cpack { opacity: 1; transform: none; transition: transform 560ms var(--ease-out), opacity 160ms ease; }
.cer .coat {
  position: absolute; inset: 0; clip-path: circle(0% at 0% 100%); transition: clip-path 820ms var(--ease-in-out);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='240'%3E%3Cg fill='none' stroke='white' stroke-opacity='.75' stroke-width='1.2'%3E%3Cpath d='M0 240 L60 170 L52 120 L90 80 L84 30 L130 0'/%3E%3Cpath d='M60 170 L110 160 L150 200 L170 190'/%3E%3Cpath d='M52 120 L10 90 L0 60'/%3E%3Cpath d='M90 80 L140 96 L170 70'/%3E%3Cpath d='M84 30 L40 18 L20 0'/%3E%3Cpath d='M110 160 L120 240'/%3E%3Cpath d='M140 96 L150 140 L130 160'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(235,248,255,.92), rgba(160,205,255,.75) 55%, rgba(110,170,255,.7));
  background-size: 100% 100%, 100% 100%;
}
.cer.freeze .coat { clip-path: circle(150% at 0% 100%); }
.cer.freeze .cpack { box-shadow: 0 0 30px 6px rgba(160,210,255,.6); transition: box-shadow 800ms ease; }
.cer.shat1 .cpack { opacity: 0; transition: opacity 60ms linear; }

.cer .slab {
  top: 22%; width: 168px; height: 296px; margin-left: -84px; border-radius: 10px; opacity: 0; transform: translateY(40px) scale(.96);
  display: grid; place-items: center; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  background: linear-gradient(170deg, rgba(220,240,255,.55), rgba(140,195,255,.28) 40%, rgba(90,150,240,.35));
  border: 1.5px solid rgba(230,245,255,.7); box-shadow: inset 0 0 30px rgba(220,240,255,.35), 0 0 24px rgba(120,180,255,.35);
}
.cer .slab span { font: 900 64px var(--font-display); color: rgba(255,255,255,.28); text-shadow: 0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,40,120,.4); }
.cer.slabup .slab { opacity: 1; transform: none; transition: transform 600ms var(--ease-out), opacity 300ms ease; }
.cer.shat2 .slab { opacity: 0; transition: opacity 60ms linear; }

.cer .big { top: 21%; width: 214px; height: 304px; margin-left: -107px; opacity: 0; transform: scale(.9); }
.cer.walkout .big { opacity: 1; transform: none; transition: transform 520ms var(--ease-out), opacity 200ms ease; }
.bigcard {
  position: absolute; inset: 0; display: flex; flex-direction: column; padding: 12px 13px; border-radius: 14px;
  border: 3px solid var(--rc); color: var(--ice);
  background: radial-gradient(120% 70% at 80% 0%, color-mix(in srgb, var(--bc) 55%, transparent), transparent 60%), linear-gradient(170deg, color-mix(in srgb, var(--rc) 30%, #0e1830), #0b1428 60%);
}
.bc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.bc-ovr { font: 900 56px/.82 var(--font-display); color: var(--rc); }
.bc-rar { display: block; margin-top: 4px; font: 800 14px var(--font-display); color: var(--rc); }
.bc-brand { width: 34px; height: 38px; }
.bc-nick { margin-top: auto; font: 900 32px/.95 var(--font-display); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.bc-kind { margin-top: 5px; font-size: 12px; color: var(--frost); }
.bc-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.15); text-align: center; }
.bc-stats b { display: block; font: 800 19px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bc-stats span { font-size: 9.5px; color: var(--frost); }

.cer-cap { position: absolute; left: 20px; right: 20px; bottom: calc(var(--safe-bottom) + 26px); text-align: center; opacity: 0; transform: translateY(8px); pointer-events: none; }
.cer.done .cer-cap { opacity: 1; transform: none; pointer-events: auto; transition: opacity 280ms var(--ease-out) 200ms, transform 280ms var(--ease-out) 200ms; }
.cer-cap p { margin: 0 0 12px; font-size: 14px; color: var(--frost); }
.cer-cap p b { color: var(--ice); }
.see-all { width: 100%; height: 54px; border: 0; border-radius: 14px; background: var(--ice); color: var(--rink); font: 700 15px var(--font-body); cursor: pointer; transition: transform 160ms var(--ease-out); }
.see-all:active { transform: scale(var(--press)); }
.cer .skip { position: absolute; right: 20px; top: calc(var(--safe-top) + 22px); font-size: 12px; color: rgba(233,241,255,.55); }
.cer.done .skip { display: none; }
.cer .flash { position: absolute; inset: 0; background: #eaf6ff; opacity: 0; pointer-events: none; }
.cer .flash.go { animation: cer-flash 260ms ease-out; }
@keyframes cer-flash { 0% { opacity: .75; } 100% { opacity: 0; } }

.cer-empty { display: grid; place-items: center; padding: 24px; }
.cer-empty-card { display: flex; flex-direction: column; gap: 8px; max-width: 300px; padding: 22px 18px; border: 1px solid var(--seam); border-radius: 16px; background: var(--boards); text-align: center; }
.cer-empty-card b { font: 900 30px/1 var(--font-display); }
.cer-empty-card span { color: var(--frost); font-size: 14px; }

/* ---------------------------------------------------------------- picker */
/* The picker fits the screen; a long post scrolls inside its preview. */
.app:has(.picker) { height: 100vh; height: 100dvh; }
.picker { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.pick-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pick-head-text { min-width: 0; }
.pick-title:focus { outline: none; }
.pick-title { margin: 0; font: 900 30px/1 var(--font-display); }
.pick-sub { margin: 4px 0 0; color: var(--frost); font-size: 13px; }
.back-btn { flex: none; min-height: var(--tap); padding: 0 12px; border: 1px solid var(--seam); border-radius: 10px; background: none; color: var(--frost); font: 600 13px var(--font-body); cursor: pointer; transition: transform 160ms var(--ease-out); }
.back-btn:active { transform: scale(var(--press)); }
.pick-cards { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 8px; }
.pick-slot { position: relative; opacity: 0; transform: translateY(14px); transition: opacity 240ms var(--ease-out), transform 260ms var(--ease-out); }
.picker.revealed .pick-slot { opacity: 1; transform: none; }
.pick-slot.gold::before { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 26px 3px rgba(247,192,74,.45); pointer-events: none; }
.pcard {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 188px; padding: 10px 9px;
  border: 2px solid #4a5875; border-radius: 12px; background: var(--boards-2); text-align: left; cursor: pointer;
  transition: opacity 200ms ease, scale 200ms var(--ease-out);
}
.pcard .ovr { display: flex; align-items: baseline; gap: 5px; }
.pcard .ovr b { font: 900 34px/.9 var(--font-display); }
.pcard .ovr span { font-size: 11px; font-weight: 700; }
.pcard .nick { margin-top: auto; font: 800 21px/1 var(--font-display); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.pcard .meta { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.12); color: var(--frost); font-size: 11px; line-height: 1.35; }
.r-std .ovr b, .r-std .ovr span { color: #b8c4d9; }
.pcard.r-rare { border-color: var(--blueline); background: linear-gradient(180deg, rgba(61,139,255,.16), var(--boards-2) 45%); }
.r-rare .ovr b, .r-rare .ovr span { color: #8fbaff; }
.pcard.r-gold { border-color: var(--gold); background: linear-gradient(180deg, rgba(247,192,74,.22), var(--boards-2) 50%); }
.r-gold .ovr b, .r-gold .ovr span { color: var(--gold); }
.picker.chosen .pcard:not(.sel) { opacity: .38; scale: .96; }
.pcard.sel { box-shadow: 0 0 0 2px var(--ice) inset; }
.pick-preview { flex: 1; min-height: 140px; overflow-y: auto; overscroll-behavior: contain; padding: 14px 15px; border: 1px solid var(--seam); border-radius: 14px; background: var(--boards); }
.pick-empty { margin: 0; color: var(--frost); font-size: 14px; }
.pick-who { color: var(--frost); font-size: 11.5px; }
.pick-slots { display: flex; gap: 6px; margin-top: 8px; }
.slot-tab { min-height: var(--tap); padding: 0 14px; border: 1px solid var(--seam); border-radius: 10px; background: var(--boards-2); color: var(--frost); font: 600 13px var(--font-body); cursor: pointer; transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.slot-tab[aria-pressed="true"] { background: var(--ice); border-color: var(--ice); color: var(--rink); }
.pick-text { margin: 8px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-line; }
.pick-short { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--seam); }
.pick-short b { font: 800 14px var(--font-display); letter-spacing: .02em; color: var(--frost); }
.pick-short p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.pick-time { margin-top: 10px; color: var(--frost); font-size: 12px; }
.pick-time:empty { display: none; }
.keep { flex: none; height: 54px; border: 0; border-radius: 14px; background: var(--gold); color: #1a1205; font: 700 16px var(--font-body); cursor: pointer; transition: transform 160ms var(--ease-out), opacity 200ms var(--ease-out); }
.keep:active { transform: scale(var(--press)); }
.keep:disabled { opacity: .35; cursor: default; transform: none; }
.pick-hint { margin-top: -4px; text-align: center; color: var(--frost); font-size: 11.5px; }
.pick-hint:empty { display: none; }

.see-all:focus-visible, .back-btn:focus-visible, .pcard:focus-visible, .slot-tab:focus-visible, .keep:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ----------------------------------------------------------------- login */
.screen-login { justify-content: center; }
.login { display: flex; flex-direction: column; align-items: center; padding: 8px 0; text-align: center; }
.login-fan { position: relative; width: 100%; height: 196px; margin-bottom: 30px; }
.login-fan::before {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 260px; height: 120px; margin-left: -130px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(90,170,255,.45), rgba(90,170,255,0)); filter: blur(10px);
}
.login-fan img {
  position: absolute; left: 50%; bottom: 0; height: 168px; width: auto; border-radius: 5px;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.75); transform-origin: 50% 130%;
}
.login-fan img:nth-child(1) { transform: translateX(-50%) rotate(-21deg); }
.login-fan img:nth-child(2) { transform: translateX(-50%) rotate(-7deg); }
.login-fan img:nth-child(3) { transform: translateX(-50%) rotate(7deg); }
.login-fan img:nth-child(4) { transform: translateX(-50%) rotate(21deg); }
.login-title { margin: 0; font: 900 44px/.95 var(--font-display); letter-spacing: .01em; text-transform: uppercase; }
.login-sub { margin: 8px 0 22px; color: var(--frost); font-size: 14px; }
.login-form { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { color: var(--frost); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.field input {
  height: 50px; padding: 0 14px; border: 1px solid var(--seam); border-radius: 12px;
  background: var(--boards); color: var(--ice); font: 500 16px var(--font-body);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field input:focus { outline: none; border-color: #7fc4ff; box-shadow: 0 0 0 3px rgba(127,196,255,.2); }
.login-msg { min-height: 20px; margin: 0; color: #ff8a96; font-size: 13.5px; }
.login-msg[data-tone="info"] { color: var(--ice); }

.btn-primary {
  height: 54px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--ice); color: var(--rink);
  font: 700 16px var(--font-body); cursor: pointer; transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.btn-primary:active { transform: scale(var(--press)); }
.btn-primary:disabled { opacity: .6; cursor: default; transform: none; }
.btn-link {
  min-height: var(--tap); border: 0; background: none; color: var(--frost); font: 600 14px var(--font-body);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.btn-link:disabled { opacity: .5; cursor: default; }

.nav:focus-visible, .hold:focus-visible, .btn-primary:focus-visible, .btn-link:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ----------------------------------------------------------- error, toast */
.screen-error { justify-content: center; }
.error-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 18px; border: 1px solid var(--seam); border-radius: 16px; background: var(--boards); text-align: center; }
.error-card b { font: 900 26px/1 var(--font-display); }
.error-card p { margin: 0 0 6px; color: var(--frost); font-size: 14px; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 18px); z-index: 30; width: min(398px, calc(100% - 32px));
  padding: 13px 14px; border-radius: 14px; background: var(--ice); color: var(--rink); font-size: 14px; font-weight: 600;
  opacity: 0; visibility: hidden; transform: translate(-50%, 24px);
  transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s linear 280ms;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out); }

/* ------------------------------------------------------- small phones */
@media (max-height: 700px) {
  .view { height: 304px; }
  .row { top: 30px; }
}

/* Reduced motion: no animation; transitions become short fades (as in the mockup). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition-property: opacity !important;
    transition-duration: 150ms !important; transition-delay: 0ms !important;
  }
}