/* Final layout layer: viewport fit, safe areas, and non-overlapping play regions. */
.mode-caption { font-size:14px; line-height:1.5; color:#c1cfbc; margin:9px 0 0; }
.destination { cursor:pointer; }
.masters-card .primary-button { min-height:40px; margin-left:8px; padding:9px 17px; font-size:13px; }
@media(max-width:640px) { .masters-card .primary-button { width:100%; margin:5px 0 0; } }
.home-secondary .mode-button { flex-direction:column; gap:6px; flex:1; min-width:0; padding:12px 8px; }
.mode-button > span { display:flex; align-items:center; justify-content:center; gap:6px; }
.mode-button small { font-size:12px; font-weight:400; line-height:1.4; color:#c1cfbc; }
.first-shot-guide { position:absolute; z-index:4; width:0; height:0; pointer-events:none; }
.first-shot-guide[hidden] { display:none; }
.guide-focus { position:absolute; left:-46px; top:-31px; width:92px; height:calc(var(--pull) + 72px); border:2px solid #fff5d7; border-radius:48px; box-shadow:0 0 0 9999px #031917c7; opacity:0; }
.guide-ring { position:absolute; width:58px; height:42px; left:-29px; top:-21px; border:2px solid #fff5d7; border-radius:50%; box-shadow:0 0 0 8px #fff5d72a; animation:guide-target 1.25s ease-in-out infinite alternate; }
.guide-arrow { position:absolute; left:-1px; top:16px; width:2px; height:var(--pull); background:linear-gradient(#fff5d755,#fff5d7); }
.guide-arrow::after { content:''; position:absolute; left:-5px; bottom:-1px; width:10px; height:10px; border-right:2px solid #fff5d7; border-bottom:2px solid #fff5d7; transform:rotate(45deg); }
.guide-chevrons { position:absolute; left:-8px; top:22px; height:var(--pull); display:flex; flex-direction:column; justify-content:space-around; }
.guide-chevrons i { width:16px; height:16px; border-right:3px solid #fff5d7; border-bottom:3px solid #fff5d7; transform:rotate(45deg); animation:guide-flow 1.2s infinite; opacity:.15; }
.guide-chevrons i:nth-child(2) { animation-delay:.18s; }
.guide-chevrons i:nth-child(3) { animation-delay:.36s; }
.guide-gesture { position:absolute; left:-7px; top:-4px; opacity:0; filter:drop-shadow(0 2px 3px #0008); }
.guide-release { position:absolute; left:-17px; top:calc(var(--pull) - 12px); width:34px; height:24px; border:3px solid #fff5d7; border-radius:50%; opacity:.75; }
@keyframes teach-pull { 0%,15% { transform:translateY(0) scale(1); opacity:0; } 22%,32% { transform:translateY(0) scale(.9); opacity:1; } 65%,75% { transform:translateY(var(--pull)) scale(.9); opacity:1; } 84% { transform:translateY(var(--pull)) scale(1.12); opacity:.5; } 100% { transform:translateY(var(--pull)); opacity:0; } }
@keyframes guide-flow { 0%,100% { opacity:.12; transform:translateY(-3px) rotate(45deg); } 50% { opacity:1; transform:translateY(3px) rotate(45deg); } }
@keyframes guide-release { 0%,72% { opacity:0; transform:scale(.5); } 80% { opacity:.9; transform:scale(.8); } 100% { opacity:0; transform:scale(1.8); } }
@keyframes guide-target { to { transform:scale(1.16); box-shadow:0 0 0 13px #fff5d70d; } }
.first-shot-guide.still .guide-gesture { animation:none; transform:translateY(var(--pull)) scale(.9); }
.first-shot-guide.still .guide-ring,.first-shot-guide.still .guide-release,.first-shot-guide.still .guide-chevrons i { animation:none; opacity:.8; }
.first-shot-guide.coaching { z-index:20; }
.first-shot-guide.coaching .guide-focus { animation:coach-focus 1.45s ease-out both; }
.first-shot-guide.coaching .guide-gesture { animation:teach-pull 1.35s ease-out 1 both; }
.first-shot-guide.coaching .guide-release { animation:guide-release 1.35s ease-out 1 both; }
.first-shot-guide.coaching .guide-ring { animation:guide-target .42s ease-in-out 2 alternate; }
.first-shot-guide.coaching .guide-chevrons i { animation:guide-flow .55s ease-in-out 2; }
.first-shot-guide.coaching.still .guide-focus { animation:none; opacity:1; }
.first-shot-guide.coaching.still .guide-gesture { animation:none; transform:translateY(var(--pull)) scale(.9); opacity:1; }
@keyframes coach-focus { 0%,100% { opacity:0; } 9%,82% { opacity:1; } }
.game-ui .instruction[data-turn="player"] { border-color:#83b9ff80; }
.game-ui .instruction[data-turn="cpu"] { border-color:#ef9b8080; }
.game-ui .instruction[data-turn="player"] strong { color:#bad9ff; }
.game-ui .instruction[data-turn="cpu"] strong { color:#ffc0a8; }
.game-ui .score-card.player .player-label,.game-ui .score-card.player .score-number { color:var(--side-color,var(--blue)); }
.game-ui .score-card.player .rack-puck:not(.used) { background:var(--side-color,var(--blue)); }
.game-ui .instruction.danger { border-color:#ff9b79; background:#573027f2; box-shadow:0 8px 26px #4b160b55; }
.game-ui .instruction.danger strong { color:#ffd6c7; }
.game-ui .instruction .icon { width:28px; height:28px; }
.game-ui .instruction[data-cue="pull"] .icon { animation:cue-pull 1s ease-in-out infinite; }
.game-ui .instruction[data-cue="wait"] .icon { animation:cue-wait 1.1s ease-in-out infinite; }
.game-ui .instruction[data-cue="danger"] .icon { animation:cue-danger .55s ease-in-out infinite alternate; }
.game-ui .score-card:not(.inactive) .player-label::before,.game-ui .score-card:not(.inactive) .turn-badge .icon { animation:owner-pulse 1s ease-in-out infinite alternate; }
.toast.game-toast { top:clamp(72px,16vh,132px); bottom:auto; transform:translate(-50%,-20px); }
.toast.game-toast.show { transform:translate(-50%,0); }
@media(max-aspect-ratio:7/5) { .toast.game-toast { top:clamp(170px,25vh,220px); } }
/* Landscape play keeps transient help inside the otherwise empty top HUD lane,
   never across the scoring surface. Compact copy stays on one crisp line. */
@media(min-aspect-ratio:7/5) {
  .toast.game-toast {
    top:max(5px,env(safe-area-inset-top));
    max-width:min(520px,calc(100vw - 350px));
    padding:7px 14px;
    border-radius:999px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    line-height:1.2;
    box-shadow:0 4px 14px #0005;
  }
}
@media(max-width:720px) and (min-aspect-ratio:7/5) {
  .toast.game-toast { padding-inline:10px; font-size:11px; }
}
@keyframes cue-pull { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(4px); } }
@keyframes cue-wait { 0%,100% { transform:scale(.9); opacity:.65; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes cue-danger { to { transform:scale(1.18); color:#ffad90; } }
@keyframes owner-pulse { to { transform:scale(1.22); filter:drop-shadow(0 0 5px currentColor); } }
.play-controls .power-head,.play-controls .power-track,.play-controls .power-caption { transition:opacity .18s,border-color .18s,color .18s; }
.play-controls.waiting .power-head,.play-controls.waiting .power-track,.play-controls.waiting .power-caption { opacity:.28; }
.play-controls.danger .power-head,.play-controls.danger .power-caption { color:#ffc0a8; opacity:1; }
.play-controls.danger .power-track { box-shadow:0 0 0 2px #ef816b70,inset 0 1px 2px #0005; opacity:1; }
.play-controls.danger .power-fill { background:#ef816b; }
.matchup-sides { display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); align-items:center; gap:12px; margin:24px 0 10px; }
.matchup-you { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; }
.matchup-you svg { width:70px; height:70px; }
.matchup-vs { color:var(--gold); font-weight:800; }
.rival-window { height:112px; overflow:hidden; border-radius:16px; background:#ef816b12; border:1px solid #ef816b45; }
.rival-reel { transform:translateY(-1904px); animation:rival-roll var(--matchup-roll,4s) cubic-bezier(.2,.45,.3,1) both; }
.rival-entry { height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.rival-entry strong { font-size:16px; }
.rival-initial { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#ef816b; color:#173d38; font-size:26px; font-weight:800; }
@keyframes rival-roll { from { transform:translateY(0); } to { transform:translateY(-1904px); } }
.rival-reel.still { animation:none; }
@media(prefers-reduced-motion:reduce) { .guide-ring,.guide-gesture,.guide-release,.guide-chevrons i,.rival-reel,.game-ui .instruction .icon,.game-ui .score-card .player-label::before,.game-ui .score-card .turn-badge .icon { animation:none; } }
@media(max-height:700px) { .app-shell[data-view="home"] .home-panel { top:8px; bottom:8px; transform:none; overflow-y:auto; } }
html, body, #app { width:100%; height:100%; overflow:hidden; }
body { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.app-shell { height:100dvh; min-height:0; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.arena { container-type:size; container-name:arena; }
.topbar, .bottom-bar { flex-shrink:0; }
.brand, .header-actions { flex-shrink:0; }
.nav, .nav-button, .bottom-meta { min-width:0; }
.wallet { max-width:145px; }
#wallet-value { overflow:hidden; text-overflow:ellipsis; }
.content-view { max-width:100%; height:100%; overflow-y:auto; overscroll-behavior:contain; }
.page-heading > *, .product-info > *, .shop-card { min-width:0; }
.product-info h2, .opponent-card h3 { overflow-wrap:anywhere; }
.modal-backdrop { padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.modal-card { max-height:100%; min-height:0; }
.modal-card .eyebrow { padding-inline:20px; line-height:1.5; }
.app-shell[data-view="play"] .topbar { height:56px; min-height:56px; flex-wrap:nowrap; padding:0 16px; gap:12px; }
.app-shell[data-view="play"] .bottom-bar { height:40px; min-height:40px; padding:0 16px; gap:12px; }
.game-ui .match-top { top:8px; }
.game-ui .match-label { font-size:12px; letter-spacing:1px; }
.game-ui .score-card { top:38px; width:164px; bottom:auto; }
.game-ui .score-card.player, .game-ui .play-tips { left:20px; }
.game-ui .score-card.cpu, .game-ui .play-controls { right:20px; }
.game-ui .player-label { font-size:12px; letter-spacing:.5px; }
.game-ui .player-name { font-size:22px; line-height:1.2; margin:8px 0 4px; max-width:none; overflow-wrap:anywhere; }
.game-ui .player-subtitle { font-size:12px; line-height:1.4; max-width:none; white-space:normal; }
.game-ui .score-line { position:static; margin-top:10px; flex-direction:column; align-items:flex-start; gap:0; }
.game-ui .score-number { font-size:48px; letter-spacing:-1px; }
.game-ui .score-unit { display:inline; margin-top:2px; font-size:10px; line-height:1; letter-spacing:1.2px; }
.game-ui .puck-rack { margin:12px 0 8px; gap:9px; }
.game-ui .rack-puck { width:20px; height:13px; }
.game-ui .puck-rack { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; }
.game-ui .puck-rack .rack-puck { width:100%; height:10px; }
.result-scoreboard > div { min-width:0; }
.result-pucks { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.result-pucks .result-puck { width:100%; max-width:24px; height:auto; aspect-ratio:1; justify-self:center; }
.game-ui .remaining { font-size:12px; }
.game-ui .card-divider, .game-ui .opponent-avatar, .game-ui .opponent-quote, .game-ui .play-tips, .game-ui .power-caption { display:none; }
.game-ui .turn-badge { position:static; margin-top:10px; font-size:12px; letter-spacing:0; gap:4px; }
.game-ui .turn-badge .icon { width:14px; }
.game-ui .play-controls { width:164px; bottom:14px; }
.game-ui .power-head { font-size:12px; letter-spacing:.5px; }
.game-ui .power-track { margin:8px 0; height:8px; }
.game-ui .pause-button { margin-top:12px; min-height:44px; padding:8px; font-size:14px; gap:8px; }
.game-ui .play-controls .pause-button:only-child { margin-top:0; }
.game-ui .pause-button .icon { width:18px; }
.game-ui .instruction { left:20px; bottom:14px; transform:none; width:164px; padding:10px; white-space:normal; gap:8px; box-shadow:none; }
.game-ui .instruction strong { font-size:12px; line-height:1.4; letter-spacing:.3px; }
.game-ui .instruction small { font-size:12px; line-height:1.4; }
.game-ui .instruction .icon { width:18px; flex-shrink:0; }
@media(max-width:760px) {
  .app-shell[data-view="play"] .nav { display:none; }
  .app-shell[data-view="play"] .header-actions { margin-left:auto; }
  .app-shell[data-view="play"] .desktop-only { display:none; }
  .topbar { gap:8px; }
  .bottom-bar { gap:8px; font-size:12px; }
  .bottom-meta { gap:10px; }
}
@container arena (max-width:640px) and (min-height:400px) {
  .game-ui .match-top { top:5px; }
  .game-ui .match-label { font-size:10px; line-height:1.2; }
  .game-ui .match-top .turn-clock { margin-top:3px; min-width:44px; padding:2px 7px; font-size:11px; }
  .game-ui .score-card { top:58px; width:calc(50% - 24px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 6px; }
  .game-ui .score-card.player { left:12px; }
  .game-ui .score-card.cpu { right:12px; }
  .game-ui .player-label { grid-column:1 / -1; }
  .game-ui .player-name { margin:0; font-size:16px; align-self:center; }
  .game-ui .score-line { grid-column:2; grid-row:2; margin:0; }
  .game-ui .score-number { font-size:32px; }
  .game-ui .score-unit, .game-ui .player-subtitle, .game-ui .remaining { display:none; }
  .game-ui .puck-rack { grid-column:1 / -1; margin:2px 0 4px; gap:3px; }
  .game-ui .turn-badge { grid-column:1 / -1; margin:0; }
  .game-ui .play-controls { right:12px; bottom:8px; width:100px; }
  .game-ui .pause-button { margin-top:6px; }
  .game-ui .instruction { left:12px; bottom:8px; width:calc(100% - 140px); max-width:220px; }
}
@container arena (max-height:399px) {
  .game-ui .score-card { top:34px; }
  .game-ui .player-subtitle, .game-ui .score-unit, .game-ui .remaining { display:none; }
  .game-ui .player-name { font-size:18px; margin:6px 0; }
  .game-ui .score-number { font-size:36px; }
  .game-ui .score-line { margin:4px 0; }
  .game-ui .puck-rack { margin:8px 0; }
  .game-ui .turn-badge { margin-top:5px; }
  .game-ui .instruction small { display:none; }
}
@container arena (max-width:640px) and (max-height:399px) {
  .game-ui .score-card, .game-ui .instruction, .game-ui .play-controls { width:126px; }
  .game-ui .score-card.player, .game-ui .instruction { left:10px; }
  .game-ui .score-card.cpu, .game-ui .play-controls { right:10px; }
  .game-ui .player-label { font-size:12px; }
}
@media(max-width:640px) {
  .app-shell:not([data-view="play"]) .topbar { height:100px; min-height:100px; }
  .header-actions .icon-button { min-width:40px; height:40px; }
  .home-panel { left:16px; right:16px; bottom:16px; padding:24px 8px 0; }
  .home-title { font-size:clamp(38px,11vw,55px); }
  .home-description { font-size:14px; }
  .home-note { font-size:12px; }
  .home-secondary button, .nav-button { font-size:14px; }
  .bottom-bar .bottom-meta .desktop-only { display:none; }
  .bottom-bar:not(.match-bottom) > span { display:none; }
  .bottom-bar:not(.match-bottom) .bottom-meta { width:100%; justify-content:space-between; }
  .shop-card-top, .equipped-tag { font-size:10px; letter-spacing:0; flex-wrap:wrap; gap:4px; }
  .product-info h2, .table-grid .product-info h2 { font-size:14px; }
  .product-info p, .table-grid .product-info p, .opponent-card p { font-size:12px; }
  .buy-button { min-height:44px; font-size:14px; }
}
@media(max-height:600px) {
  .home-note, .floor-stamp { display:none; }
  .home-description { margin:10px 0; }
  .home-title { margin:12px 0; }
  .home-secondary { margin-top:10px; }
}
@media(max-height:520px) and (max-width:640px) {
  .app-shell:not([data-view="play"]) .topbar { height:56px; min-height:56px; flex-wrap:nowrap; }
  .app-shell:not([data-view="play"]) .nav { display:none; }
  .home-panel { top:12px; bottom:12px; left:20px; right:20px; width:auto; transform:none; overflow-y:auto; padding:0; }
  .home-title { font-size:38px; }
  .home-description, .table-tag { display:none; }
}