/* TCR Arcade — new game surfaces (v1.1.0). Midnight navy + gold, matches the main site. */
.tg{--tg-navy:#0b1427;--tg-navy2:#14264a;--tg-gold:#f6c945;--tg-gold2:#ffdb65;margin-top:14px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tg *{-webkit-tap-highlight-color:transparent}

/* stage */
.tg-stage{position:relative;width:min(100%,360px);margin:0 auto;border-radius:20px;overflow:hidden;background:var(--tg-navy);border:2px solid #243a66;box-shadow:0 18px 40px rgba(11,20,39,.35),inset 0 0 0 1px rgba(246,201,69,.18)}
.tg-stage canvas{display:block;width:100%;height:auto;touch-action:manipulation;cursor:pointer}
.tg-stage .tg-fx{position:absolute;inset:0;pointer-events:none}
.tg-chip{position:absolute;top:8px;z-index:3;padding:5px 9px;border-radius:999px;background:rgba(5,11,28,.72);backdrop-filter:blur(6px);border:1px solid rgba(246,201,69,.25);color:#cdd7ea;font:800 9px/1 'DM Sans',sans-serif;letter-spacing:1.4px;pointer-events:none}
.tg-chip b{color:var(--tg-gold);font-size:12px;letter-spacing:.3px;margin:0 1px}
.tg-chip-l{left:8px}.tg-chip-r{right:8px}

.tg-hint{text-align:center;min-height:20px;margin:12px 0 4px;font-size:12px;font-weight:700;color:#66738a}
.tg-action{margin-top:4px!important;padding:15px!important;font-size:14px!important;letter-spacing:1.4px;max-width:360px;margin-left:auto!important;margin-right:auto!important;display:flex!important;box-shadow:0 5px 0 #c99a14}
.tg-action:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #c99a14}
.tg-action:disabled{opacity:.6;cursor:default;box-shadow:0 5px 0 #c99a14}
.tg-note{text-align:center;font-size:10px;color:#9aa4b5;margin:10px 0 0}

/* scoreboard */
.bowl-score{display:grid;grid-template-columns:repeat(9,minmax(0,1fr)) minmax(0,1.5fr);gap:3px;max-width:520px;margin:0 auto 12px}
.bs-frame{background:linear-gradient(180deg,#14264a,#0b1427);border:1px solid #243a66;border-radius:8px;overflow:hidden;text-align:center;transition:border-color .2s,box-shadow .2s,transform .2s}
.bs-frame.cur{border-color:var(--tg-gold);box-shadow:0 0 0 2px rgba(246,201,69,.25),0 6px 16px rgba(246,201,69,.2);transform:translateY(-2px)}
.bs-n{display:block;font:800 8px/1 'DM Sans',sans-serif;color:#7f8fb0;padding:4px 0 2px;letter-spacing:.5px}
.bs-rolls{display:flex;justify-content:flex-end;gap:1px;padding:0 2px}
.bs-rolls i{flex:1 1 0;min-width:0;height:17px;display:grid;place-items:center;background:rgba(255,255,255,.07);border-radius:3px;font:800 11px/1 'DM Sans',sans-serif;font-style:normal;color:#fff}
.bs-rolls i.x{color:var(--tg-gold);background:rgba(246,201,69,.16)}
.bs-rolls i.s{color:#7fb2ff;background:rgba(67,135,232,.18)}
.bs-t{display:block;height:21px;line-height:21px;font:900 14px/21px 'Barlow Condensed','DM Sans',sans-serif;color:var(--tg-gold)}
.bs-frame:not(.cur) .bs-t{color:#e8eefb}

/* big pop-up words */
.tg-popup{position:absolute;left:50%;top:38%;z-index:5;transform:translate(-50%,-50%);font:900 clamp(38px,12vw,58px)/1 'Barlow Condensed','DM Sans',sans-serif;letter-spacing:2px;white-space:nowrap;pointer-events:none;text-shadow:0 4px 0 rgba(0,0,0,.35),0 0 24px rgba(255,255,255,.25);animation:tg-pop 1.1s cubic-bezier(.2,.9,.2,1) both}
.tg-gold{color:var(--tg-gold);text-shadow:0 4px 0 #8a6200,0 0 30px rgba(246,201,69,.8)}
.tg-blue{color:#7fb2ff;text-shadow:0 4px 0 #1b3f86,0 0 28px rgba(67,135,232,.7)}
.tg-red{color:#ff6b72;text-shadow:0 4px 0 #7a1b20,0 0 24px rgba(228,85,93,.6)}
.tg-white{color:#fff}
@keyframes tg-pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.3) rotate(-6deg)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.22) rotate(2deg)}38%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1;transform:translate(-50%,-56%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(1.04)}}

/* shake */
.tg-shake{animation:tg-shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes tg-shake{10%,90%{transform:translate3d(-2px,0,0)}20%,80%{transform:translate3d(4px,2px,0)}30%,50%,70%{transform:translate3d(-6px,-2px,0)}40%,60%{transform:translate3d(6px,2px,0)}}

/* game-over card */
.tg-over{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 30%,rgba(20,38,74,.86),rgba(5,11,28,.94));backdrop-filter:blur(4px);animation:tg-fade .35s ease-out both}
.tg-over-card{width:100%;text-align:center;color:#fff}
.tg-over-card .eyebrow{color:#9fb0d0}
.tg-over-card h3{font:900 36px/1 'Barlow Condensed','DM Sans',sans-serif;color:var(--tg-gold);margin:8px 0 2px;letter-spacing:1px}
.tg-big{font:900 96px/1 'Barlow Condensed','DM Sans',sans-serif;color:#fff;text-shadow:0 0 36px rgba(246,201,69,.55);animation:tg-score .7s cubic-bezier(.2,.9,.2,1) both}
.tg-over-card p{font-size:12px;color:#b7c3dc;margin:0 0 14px}
.tg-over-card .btn{margin:5px 0 0!important;display:flex}
.tg-over-card .btn-outline{color:#fff;border-color:#34507f}
@keyframes tg-fade{from{opacity:0}to{opacity:1}}
@keyframes tg-score{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

@media (max-width:420px){
  .bs-rolls i{height:15px;font-size:10px}
  .bs-t{font-size:12px}
  .tg-big{font-size:80px}
}
@media (prefers-reduced-motion:reduce){
  .tg-popup{animation:tg-fade .2s both}
  .tg-shake,.tg-big{animation:none}
}