.mini-game { max-width: 780px; padding-top: 1.5rem; }
.mini-nav, .table-topline, .player-heading, .table-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mini-brand { font-size:1.05rem; font-weight:850; text-decoration:none; }
.mini-brand span { color:var(--fg-dim); font-weight:500; }
.mini-game button { font:inherit; cursor:pointer; touch-action:manipulation; }
.mini-game button:focus-visible, .mini-game a:focus-visible, .mini-game input:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.sound-toggle, .quiet-button { border:1px solid var(--border); border-radius:99px; background:transparent; color:var(--fg-dim); padding:.6rem .9rem; font-size:.8rem!important; }
.sound-toggle:hover, .quiet-button:hover { color:var(--fg); border-color:var(--accent-dim); }
.sound-toggle[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); box-shadow:0 0 12px #ffb40018; }
.mini-heading { text-align:center; margin:3rem 0 1.8rem; }
.eyebrow, .table-label { font-size:.68rem; letter-spacing:.17em; font-weight:750; color:var(--accent); }
.mini-heading h1 { margin:.65rem 0; font-size:clamp(2.6rem,8vw,4rem); }
.mini-heading h1 span { color:var(--fg); }
.mini-heading p, .mini-tip { color:var(--fg-dim); font-size:.9rem; }
.card-table, .dice-table { border:1px solid #514126; border-radius:24px; padding:1.25rem; background:radial-gradient(ellipse at 50% 10%,#49331588,transparent 70%),linear-gradient(135deg,#22201b,#17191f 70%); box-shadow:0 18px 65px #0003; }
.table-topline { color:var(--fg-dim); font-size:.75rem; }
.card-stage { display:flex; gap:clamp(1.5rem,7vw,4.5rem); align-items:center; justify-content:center; padding:2rem 0 1.2rem; perspective:900px; }
.card-deck, .playing-card { width:clamp(112px,24vw,157px); aspect-ratio: 5 / 7; border-radius:12px; position:relative; flex-shrink:0; }
.card-deck { background:#1d1b17; border:5px solid #e1c99b; padding:6px; box-shadow:2px 3px 0 #c2ae8a,4px 6px 0 #e1c99b,6px 9px 0 #8d7b5a,0 16px 22px #0005; transform:rotate(-8deg); transition:transform .2s; }
.card-deck:hover { transform:rotate(-5deg) translateY(-3px); }
.deck-pattern { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #ffb40099; border-radius:4px; background:repeating-linear-gradient(45deg,#ffb40008 0 2px,transparent 2px 9px); color:var(--accent); font-size:1.5rem; font-weight:900; line-height:1; text-align:left; }
.deck-pattern b { font-size:1.5rem; margin-top:1rem; }
.playing-card { color:#202127; background:linear-gradient(140deg,#fffef9,#e7e3d8); border:1px solid #fff9; box-shadow:0 12px 26px #0005; transform:rotate(5deg); display:grid; place-items:center; }
.playing-card.red { color:#bd363c; }
.card-corner { position:absolute; left:12px; top:8px; font-size:1.25rem; font-weight:800; white-space:pre-line; text-align:center; line-height:1.1; }
.card-bottom { top:auto; left:auto; right:12px; bottom:8px; transform:rotate(180deg); }
.card-suit { font-size:4rem; }
.playing-card.drawing { animation:card-draw .48s cubic-bezier(.2,.7,.3,1); }
@keyframes card-draw { 0%{opacity:0;transform:translateX(-100px) rotateY(-100deg) rotate(-12deg)} 100%{opacity:1;transform:rotateY(0) rotate(5deg)} }
.game-message { min-height:3em; margin:.4rem auto 1rem; text-align:center; max-width:45ch; font-size:.95rem; }
.game-message[data-result=correct] { color:var(--ok); }
.game-message[data-result=wrong] { color:var(--err); }
.table-controls { justify-content:center; }
.player-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0; }
.player-panel { padding:1rem; background:var(--bg-elev); border:1px solid var(--border); border-radius:18px; transition:border-color .2s,background .2s; }
.player-panel.active { border-color:var(--accent); background:linear-gradient(145deg,#30271a,var(--bg-elev)); }
.player-heading label { color:var(--fg-dim); font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; min-width:0; }
.player-name { width:100%; padding:0; margin-top:.2rem; border:0; border-bottom:1px dashed #ffffff30; background:transparent; border-radius:0; color:var(--fg); font-weight:700; font-size:1rem; }
.player-score { font-size:2rem; font-weight:850; color:var(--accent); }
.turn-label { display:block; color:var(--fg-dim); font-size:.72rem; margin:.7rem 0; }
.active .turn-label { color:var(--accent); }
.guess-buttons { display:flex; gap:.5rem; }
.guess-buttons button { flex:1; min-height:52px; border:1px solid var(--accent-dim); border-radius:10px; background:var(--accent); color:#201600; font-weight:750; font-size:.9rem; }
.guess-buttons button span { font-size:1.3rem; }
.mini-game button:disabled { cursor:default; opacity:.35; }
.game-rules { padding:1rem; color:var(--fg-dim); font-size:.8rem; }
.game-rules summary { cursor:pointer; color:var(--fg); }
.mini-footer { text-align:center; color:var(--fg-dim); font-size:.7rem; margin-top:2rem; }
.dice-selector { border:0; margin:0 0 1.5rem; padding:0; text-align:center; min-width:0; }
.dice-selector legend { width:100%; font-size:.8rem; color:var(--fg-dim); margin-bottom:.7rem; }
.dice-selector > div { display:flex; gap:.55rem; justify-content:center; max-width:340px; margin-inline:auto; }
.dice-selector label { position:relative; cursor:pointer; flex:1; min-width:0; }
.dice-selector input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.dice-selector span { display:grid; place-items:center; width:100%; height:48px; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; font-weight:750; }
.dice-selector span { grid-template:repeat(3,1fr)/repeat(3,1fr); padding:9px; gap:2px; }
.dice-selector span i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.dice-selector input:checked + span { color:#201600; background:var(--accent); border-color:var(--accent); box-shadow:0 0 20px #ffb40022; }
.dice-selector input:focus-visible + span { outline:3px solid var(--fg); outline-offset:3px; }
.dice-selector input:disabled + span { opacity:.5; }
.dice-stage { min-height:245px; display:flex; flex-wrap:wrap; gap:40px; align-content:center; justify-content:center; padding:35px 25px; perspective:800px; }
.die-space { width:64px; height:64px; perspective:600px; }
.die { width:64px; height:64px; position:relative; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.2,.65,.22,1); }
.die-face { position:absolute; inset:0; border-radius:10px; background:linear-gradient(145deg,#fffef7,#e9dfc9); border:1px solid #cfc3ab; backface-visibility:hidden; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); padding:10px; gap:4px; box-shadow:inset 0 0 8px #bea77655; }
.die-face i { width:10px; height:10px; align-self:center; justify-self:center; border-radius:50%; background:#29241d; box-shadow:inset 1px 1px 2px #0007; }
.die-face[data-face="1"] { transform:translateZ(32px); }
.die-face[data-face="6"] { transform:rotateY(180deg) translateZ(32px); }
.die-face[data-face="3"] { transform:rotateY(90deg) translateZ(32px); }
.die-face[data-face="4"] { transform:rotateY(-90deg) translateZ(32px); }
.die-face[data-face="2"] { transform:rotateX(90deg) translateZ(32px); }
.die-face[data-face="5"] { transform:rotateX(-90deg) translateZ(32px); }
.die.settled { transform:none!important; transition:none; }
.die.settled .die-face { display:none; }
.die.settled .die-face.selected { display:grid; transform:none; backface-visibility:visible; }
.die-space.rolling { animation:dice-bounce 1s ease-out; }
@keyframes dice-bounce { 0%{transform:translateY(0)} 20%{transform:translateY(-30px) translateX(-8px)} 42%{transform:translateY(7px) translateX(8px)} 60%{transform:translateY(-12px)} 82%{transform:translateY(3px)} 100%{transform:translateY(0)} }
.dice-result { text-align:center; }
.dice-result > span { display:block; letter-spacing:.2em; font-size:.65rem; color:var(--fg-dim); }
.dice-result strong { display:block; color:var(--accent); font-size:4rem; font-weight:900; line-height:1.3; }
.dice-result p { min-height:1.5em; color:var(--fg-dim); font-size:.85rem; }
.roll-button { width:100%; margin-top:1.2rem; padding:1rem 1.4rem; border:0; border-radius:14px; background:linear-gradient(100deg,#ffc224,#ffac00); color:#1b1508; font-weight:850!important; display:flex; align-items:center; justify-content:space-between; }
.roll-button span { font-size:1.5rem; }
.mini-tip { text-align:center; font-size:.8rem; }
.reaction-arena { border:1px solid var(--border); border-radius:24px; overflow:hidden; background:var(--bg-elev); }
.reaction-pad { width:100%; border:0; background:linear-gradient(145deg,#352915,#191b21); color:var(--fg); display:flex; align-items:center; flex-direction:column; justify-content:center; min-height:145px; padding:1rem; user-select:none; -webkit-user-select:none; }
.reaction-pad.opposite { transform:rotate(180deg); }
.reaction-pad > span:first-child { font-size:.8rem; font-weight:750; color:var(--accent); }
.reaction-score { font-size:2.5rem; line-height:1.2; }
.reaction-time { font-size:.85rem; color:var(--fg); min-height:1.3em; }
.deck-complete { margin:1rem 0; padding:1rem; border:2px solid var(--accent); border-radius:16px; background:#292211; }
.deck-complete h2 { color:var(--accent); margin:0; }
.deck-complete .quiet-button { display:block; margin-top:1rem; text-align:center; }
.pad-instruction { font-size:.75rem; color:var(--fg-dim); }
.reaction-signal { text-align:center; padding:1rem; border-block:1px solid var(--border); display:flex; flex-direction:column; gap:.25rem; min-height:115px; justify-content:center; }
.reaction-signal > span:last-child { color:var(--fg-dim); font-size:.75rem; }
.signal-light { width:10px; height:10px; border-radius:50%; background:var(--fg-dim); margin:0 auto .25rem; }
.reaction-arena[data-phase=waiting] .signal-light { background:var(--accent); box-shadow:0 0 18px #ffb40077; }
.reaction-arena[data-phase=ready] .reaction-pad { background:linear-gradient(120deg,#16482c,#1c3025); }
.reaction-arena[data-phase=ready] .signal-light { background:var(--ok); box-shadow:0 0 18px #51cf6677; }
.reaction-arena[data-phase=ready] .reaction-signal strong { color:var(--ok); font-size:1.5rem; }
.quick-games { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.quick-game { position:relative; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; border:1px solid #675020; border-radius:16px; background:radial-gradient(ellipse at 80% 0,#ffb40020,transparent 75%),var(--bg-elev); text-decoration:none; transition:transform .2s,border-color .2s; }
.quick-game:hover { transform:translateY(-4px); border-color:var(--accent); }
.quick-game .quick-icon { font-size:2rem; margin-bottom:.8rem; line-height:1; }
.quick-game strong { color:var(--fg); font-size:.95rem; overflow-wrap:anywhere; }
.quick-game small { color:var(--fg-dim); font-size:.7rem; margin-top:.2rem; overflow-wrap:anywhere; }
.quick-games-heading { margin:0 0 .7rem; font-size:.8rem; font-weight:500; color:var(--fg-dim); }
@media(max-width:480px) {
    .mini-game { padding:1rem .8rem 2rem; }
    .mini-heading { margin:2rem 0 1.4rem; }
    .player-grid { gap:.55rem; }
    .player-panel { padding:.8rem; }
    .player-heading { gap:.3rem; }
    .guess-buttons { gap:.3rem; }
    .guess-buttons button { font-size:.8rem; }
    .dice-stage { gap:35px; padding:30px 10px; }
    .dice-selector span { height:48px; }
    .quick-games { gap:.5rem; }
    .quick-game { padding:.75rem; min-height:140px; }
    .quick-game strong { font-size:.8rem; }
}
@media(prefers-reduced-motion:reduce) {
    .mini-game *, .quick-game { animation:none!important; transition:none!important; }
}
@media(max-width:380px) {
    .home .hero .wordmark { font-size:clamp(2rem,10.5vw,2.5rem); }
}