[data-game=shut-the-box]{--game-accent-h: 142;--game-accent-s: 76%;--game-accent-l: 45%}.stb-main{max-width:640px;margin:0 auto;padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:var(--space-4)}.stb-intro{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;padding:var(--space-6) var(--space-5)}.stb-logo{font-size:3.5rem;line-height:1}.stb-intro h1{font-size:var(--text-3xl);font-family:var(--font-display);margin:0}.stb-intro p{color:var(--color-text-secondary);font-size:var(--text-sm);margin:0;line-height:1.6}.stb-mode-picker{display:flex;gap:var(--space-3);width:100%;justify-content:center}.stb-mode-btn{flex:1;max-width:200px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:2px solid var(--color-border-subtle);background:var(--color-surface-raised);color:var(--color-text-primary);cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.stb-mode-btn:hover{border-color:var(--color-border-default);background:var(--color-surface-card)}.stb-mode-btn--active{border-color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l));background:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l) / .12);color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l))}.stb-mode-btn__icon{font-size:1.5rem}.stb-mode-btn__label{font-size:var(--text-sm);font-weight:700}.stb-mode-btn__desc{font-size:var(--text-xs);color:var(--color-text-tertiary)}.stb-game{display:flex;flex-direction:column;gap:var(--space-4)}.stb-header{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:center}.stb-header__pill{display:flex;flex-direction:column;align-items:center;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);min-width:70px}.stb-header__label{font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.stb-header__value{font-size:var(--text-lg);font-weight:700;color:var(--color-text-primary)}.stb-player-label{text-align:center;font-size:var(--text-sm);font-weight:700;color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l));background:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l) / .1);border:1px solid hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l) / .3);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);letter-spacing:.05em}.stb-player-label--computer{color:#eead2b;background:#eead2b1a;border-color:#eead2b4d}.stb-box{background:linear-gradient(135deg,#1a0e05,#2d1a0a);border:2px solid #5a3010;border-radius:var(--radius-xl);padding:var(--space-4) var(--space-3);box-shadow:0 4px 24px #00000080,inset 0 1px #ffc8641a}.stb-box__label{text-align:center;font-size:var(--text-xs);color:#a07050;text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--space-3)}.stb-tiles{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap}.stb-tile{position:relative;width:54px;height:70px;perspective:400px;cursor:pointer;flex-shrink:0}.stb-tile__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s ease}.stb-tile--shut .stb-tile__inner{transform:rotateX(180deg)}.stb-tile__front,.stb-tile__back{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:900;-webkit-user-select:none;user-select:none}.stb-tile__front{background:linear-gradient(145deg,#d4891a,#b45309);color:#fff8ee;border:2px solid #e8a030;box-shadow:0 3px 8px #0006,inset 0 1px #fff3,inset 0 -2px 4px #0000004d;text-shadow:0 1px 2px rgba(0,0,0,.4)}.stb-tile__back{background:linear-gradient(145deg,#1a2e1a,#0d1e0d);border:2px solid #2d5a2d;box-shadow:inset 0 2px 6px #0009;transform:rotateX(180deg)}.stb-tile__back:after{content:"✓";font-size:var(--text-xl);color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l));opacity:.7}.stb-tile--selected .stb-tile__front{background:linear-gradient(145deg,#22c55e,#16a34a);border-color:#4ade80;box-shadow:0 0 16px #22c55e80,0 3px 8px #0006,inset 0 1px #ffffff40}.stb-tile:not(.stb-tile--shut):not(.stb-tile--disabled):hover .stb-tile__front{background:linear-gradient(145deg,#e8a030,#c86a10);border-color:#f0b840;box-shadow:0 0 12px #e6a03266,0 3px 8px #0006;transform:translateY(-2px)}.stb-tile--disabled{cursor:default;opacity:.6}.stb-dice-area{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.stb-dice-row{display:flex;gap:var(--space-4);align-items:center;justify-content:center}.stb-die{width:72px;height:72px;background:linear-gradient(145deg,#f8f4ec,#e8dcc8);border:3px solid #c8b090;border-radius:var(--radius-lg);box-shadow:0 4px 12px #0006,inset 0 1px #fffc,inset 0 -2px 4px #0003;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:8px;gap:2px;position:relative;transition:transform .1s ease}.stb-die--rolling{animation:dieRoll .6s ease-out}@keyframes dieRoll{0%{transform:rotate(0) scale(1)}15%{transform:rotate(-15deg) scale(1.1)}30%{transform:rotate(12deg) scale(.95)}45%{transform:rotate(-8deg) scale(1.05)}60%{transform:rotate(5deg) scale(.98)}75%{transform:rotate(-3deg) scale(1.02)}to{transform:rotate(0) scale(1)}}.stb-die__pip{border-radius:50%;background:#2a1a0a;box-shadow:inset 0 1px 2px #0006;transition:opacity .1s}.stb-die__pip--hidden{opacity:0}.stb-die[data-value="1"] .stb-die__pip:nth-child(1){grid-area:2/2}.stb-die[data-value="2"] .stb-die__pip:nth-child(1){grid-area:1/3}.stb-die[data-value="2"] .stb-die__pip:nth-child(2){grid-area:3/1}.stb-die[data-value="3"] .stb-die__pip:nth-child(1){grid-area:1/3}.stb-die[data-value="3"] .stb-die__pip:nth-child(2){grid-area:2/2}.stb-die[data-value="3"] .stb-die__pip:nth-child(3){grid-area:3/1}.stb-die[data-value="4"] .stb-die__pip:nth-child(1){grid-area:1/1}.stb-die[data-value="4"] .stb-die__pip:nth-child(2){grid-area:1/3}.stb-die[data-value="4"] .stb-die__pip:nth-child(3){grid-area:3/1}.stb-die[data-value="4"] .stb-die__pip:nth-child(4){grid-area:3/3}.stb-die[data-value="5"] .stb-die__pip:nth-child(1){grid-area:1/1}.stb-die[data-value="5"] .stb-die__pip:nth-child(2){grid-area:1/3}.stb-die[data-value="5"] .stb-die__pip:nth-child(3){grid-area:2/2}.stb-die[data-value="5"] .stb-die__pip:nth-child(4){grid-area:3/1}.stb-die[data-value="5"] .stb-die__pip:nth-child(5){grid-area:3/3}.stb-die[data-value="6"] .stb-die__pip:nth-child(1){grid-area:1/1}.stb-die[data-value="6"] .stb-die__pip:nth-child(2){grid-area:1/3}.stb-die[data-value="6"] .stb-die__pip:nth-child(3){grid-area:2/1}.stb-die[data-value="6"] .stb-die__pip:nth-child(4){grid-area:2/3}.stb-die[data-value="6"] .stb-die__pip:nth-child(5){grid-area:3/1}.stb-die[data-value="6"] .stb-die__pip:nth-child(6){grid-area:3/3}.stb-roll-info{text-align:center}.stb-roll-total{font-size:var(--text-2xl);font-weight:900;font-family:var(--font-display);color:var(--color-text-primary)}.stb-roll-total span{color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l))}.stb-roll-running{font-size:var(--text-sm);color:var(--color-text-secondary);margin-top:var(--space-1)}.stb-roll-running--match{color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l));font-weight:700}.stb-roll-running--over{color:var(--color-status-error);font-weight:700}.stb-hints{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;align-items:center}.stb-hints__label{font-size:var(--text-xs);color:var(--color-text-tertiary);width:100%;text-align:center}.stb-hint-chip{padding:var(--space-1) var(--space-3);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all .15s ease}.stb-hint-chip:hover{background:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l) / .15);border-color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l) / .5);color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l))}.stb-controls{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}.stb-status{text-align:center;font-size:var(--text-sm);color:var(--color-text-secondary);min-height:24px}.stb-status--error{color:var(--color-status-error);font-weight:600}.stb-no-moves{background:#c91d1d1f;border:1px solid hsl(0 75% 45% / .3);border-radius:var(--radius-lg);padding:var(--space-4);text-align:center;display:flex;flex-direction:column;gap:var(--space-2)}.stb-no-moves__title{font-size:var(--text-lg);font-weight:700;color:var(--color-status-error)}.stb-no-moves__sub{font-size:var(--text-sm);color:var(--color-text-secondary)}.stb-celebration{background:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l) / .15);border:2px solid hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l) / .5);border-radius:var(--radius-xl);padding:var(--space-5);text-align:center;animation:celebrationPulse .5s ease-out}@keyframes celebrationPulse{0%{transform:scale(.95);opacity:.5}60%{transform:scale(1.02)}to{transform:scale(1);opacity:1}}.stb-celebration__emoji{font-size:3rem;display:block;margin-bottom:var(--space-2)}.stb-celebration__title{font-size:var(--text-2xl);font-weight:900;font-family:var(--font-display);color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l));margin:0 0 var(--space-1)}.stb-celebration__sub{font-size:var(--text-sm);color:var(--color-text-secondary)}.stb-computer-thinking{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3);font-size:var(--text-sm);color:var(--color-text-secondary)}.stb-computer-thinking .spinner{width:16px;height:16px}.stb-vs-scores{display:flex;gap:var(--space-4);justify-content:center}.stb-vs-score{flex:1;max-width:160px;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-3);text-align:center}.stb-vs-score__who{font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.stb-vs-score__tiles{font-size:2rem;font-weight:900;font-family:var(--font-display);color:var(--color-text-primary)}.stb-vs-score__label{font-size:var(--text-xs);color:var(--color-text-tertiary)}.stb-vs-score--winner{border-color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l));background:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l) / .1)}.stb-vs-score--winner .stb-vs-score__tiles{color:hsl(var(--game-accent-h) var(--game-accent-s) var(--game-accent-l))}@keyframes tileSelect{0%{transform:scale(1)}40%{transform:scale(.92) translateY(2px)}to{transform:scale(1)}}.stb-tile--just-selected .stb-tile__front{animation:tileSelect .2s ease}@media (max-width: 480px){.stb-tile{width:44px;height:58px}.stb-tile__front,.stb-tile__back{font-size:var(--text-xl)}.stb-die{width:60px;height:60px;padding:7px}.stb-tiles{gap:var(--space-1)}}