/* What minigame views share on screen (the score bar, the clock) and each DOM-drawn game's own layout.
   One section per game id; a game's root is `.game.game-<id>`. */
.game { position: absolute; inset: 0; pointer-events: none; }
.scorebar { position: absolute; top: calc(var(--st) + 6px); left: 6px; right: 42px;   /* 42: the ! button */ display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.scorebar .chip { font-size: 14px; } .scorebar .sc { font-style: normal; font-weight: 900; min-width: 1.6em; text-align: right; }
.scorebar .chip.lead { background: var(--sun); } .scorebar .chip.out { opacity: .4; text-decoration: line-through; }
.clock { background: var(--ink); color: #fff; border-radius: 12px; padding: 4px 12px; font: 900 20px/1.1 var(--font); min-width: 54px; text-align: center; }
.clock.hurry { background: var(--pop); animation: bob .5s infinite; }
@media (max-width: 520px) { .scorebar .chip .nm { display: none; } }
.big-btn { border: 4px solid var(--ink); border-radius: 18px; background: var(--sun); font: 900 20px/1 var(--font); padding: 14px 18px; box-shadow: 0 5px 0 var(--ink); position: relative; }

/* ---- Trapdoor Treasury ---- */
.game-trapdoor-treasury { display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 10px; padding: calc(var(--st) + 10px) 12px calc(var(--sb) + 12px); background: linear-gradient(#3a1d2c, #1c1020); pointer-events: auto; justify-items: center; }
.tt-top { display: flex; gap: 12px; align-items: center; color: #fff; font-size: 18px; font-weight: 800; text-align: center; }
.tt-chests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 720px); align-self: center; }
.tt-chest { position: relative; border: 4px solid var(--ink); border-radius: 18px; padding: 54px 6px 10px; display: grid; gap: 2px; justify-items: center; background: #b9773a; color: #fff; box-shadow: 0 6px 0 var(--ink); min-height: 150px; }
.tt-chest .lid { position: absolute; top: 0; left: 0; right: 0; height: 44px; background: #8a5225; border-bottom: 4px solid var(--ink); border-radius: 14px 14px 0 0; transition: transform .4s; transform-origin: top; }
.tt-chest .lid::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 20px; height: 20px; margin-left: -10px; background: var(--sun); border: 3px solid var(--ink); border-radius: 5px; }
.tt-safe { background: #8fa3ab; } .tt-safe .lid { background: #6d8088; } .tt-reckless { background: #d9a520; } .tt-reckless .lid { background: #b07a00; }
.tt-chest b { font-size: 17px; } .tt-chest span { font-size: 14px; } .tt-chest em { font-style: normal; font-size: 12px; background: rgba(0, 0, 0, .35); border-radius: 8px; padding: 1px 8px; }
.tt-chest.mine, .tt-bank.mine { outline: 6px solid #fff; }
.tt-chest.open .lid { transform: scaleY(.25); } .tt-chest .out { font-size: 20px; min-height: 1.2em; color: var(--sun); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.tt-chest.trap { background: #2a2a34; animation: shake .4s; } .tt-chest.trap .out { color: var(--pop); }
@keyframes shake { 25% { transform: translateX(-6px) rotate(-2deg); } 75% { transform: translateX(6px) rotate(2deg); } }
.who { text-decoration: none; display: block; min-height: 20px; }
.tt-bank { width: min(100%, 720px); background: var(--mint); }
.tt-players { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tt-players .chip em { font-style: normal; font-weight: 900; padding: 0 6px; border-radius: 8px; } .tt-players .sack { background: #ffe9a8; } .tt-players .bank { background: #c9f5d2; }
.tt-players .sack::before { content: 'sack '; font-weight: 600; font-size: 11px; } .tt-players .bank::before { content: 'bank '; font-weight: 600; font-size: 11px; }
.tt-players .chip.in { outline: 4px solid var(--mint); } .tt-players .delta { font-size: 13px; } .delta.bad { color: #c22; } .delta.good { color: #1d8a37; }
.tt-note { margin: 0; color: #fff; min-height: 1.3em; text-align: center; }
.game-trapdoor-treasury[data-phase=reveal] .tt-chest, .game-trapdoor-treasury[data-phase=reveal] .tt-bank, .game-trapdoor-treasury.watching .tt-chest, .game-trapdoor-treasury.watching .tt-bank { pointer-events: none; }

/* ---- Snowball Showdown ---- */
.scorebar .sb-lives { font-style: normal; color: #ff4d6d; font-size: 13px; letter-spacing: -1px; margin: 0 2px; -webkit-text-stroke: .5px var(--ink); }

/* ---- Stack Attack ---- */
.tag.sa-height { font-size: 16px; padding: 1px 10px; }
.tag.sa-height span::after { content: ' high'; font-size: 11px; font-weight: 600; }