/* =========================================================
   Game-specific styles + extra page components
   ========================================================= */

/* ---------- Crash ---------- */
.crash-box { position: relative; flex: 1; min-height: 400px; background: radial-gradient(ellipse at 30% 100%, #1a1030, #080b14 70%); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.crash-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-mult { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-family: var(--display); font-size: 72px; font-weight: 800; pointer-events: none; font-variant-numeric: tabular-nums; letter-spacing: -1px; text-shadow: 0 6px 30px rgba(0, 0, 0, .5); transition: color .3s; }
.crash-mult.waiting { font-size: 28px; color: #c9d3e6; top: 40%; }
.crash-mult.warm { color: #ffd36b; }
.crash-mult.hot { color: #ff9d3d; text-shadow: 0 0 30px rgba(255, 157, 61, .6); }
.crash-mult.crashed { color: var(--red); animation: crashPop .5s var(--spring); text-shadow: 0 0 40px rgba(255, 77, 106, .6); }
@keyframes crashPop { from { transform: translate(-50%, -50%) scale(1.4); } }
.crash-sub { position: absolute; left: 50%; top: calc(40% + 52px); transform: translateX(-50%); font-weight: 800; color: var(--muted); letter-spacing: 2px; white-space: nowrap; font-size: 13px; }
.crash-box[data-phase="crashed"] .crash-sub { color: var(--red); }
.crash-count { position: absolute; left: 50%; top: 40%; width: 150px; height: 150px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .3s; }
.crash-box[data-phase="waiting"] .crash-count { opacity: 1; }
.crash-count svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.crash-count circle { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 5; }
.crash-count .cc-prog { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 276.5; filter: drop-shadow(0 0 6px var(--accent)); }
.crash-players { margin-top: 18px; background: var(--bg2); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); flex: 1; min-height: 150px; display: flex; flex-direction: column; overflow: hidden; }
.cp-head { display: flex; justify-content: space-between; padding: 11px 13px; font-size: 12px; font-weight: 800; color: var(--muted); border-bottom: 1px solid var(--line); }
.cp-head span { display: flex; align-items: center; gap: 6px; }
.cp-list { overflow-y: auto; max-height: 270px; }
.cp-row { display: grid; grid-template-columns: 1fr 60px 80px; gap: 6px; padding: 7px 13px; font-size: 12px; font-weight: 700; transition: background .3s, color .3s; animation: fadeUp .3s var(--ease) both; }
.cp-row span:first-child { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cp-row .ic { width: 13px; height: 13px; color: var(--muted2); }
.cp-row span:nth-child(2), .cp-row span:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.cp-row.ok { color: var(--green); background: rgba(34, 214, 127, .05); }
.cp-row.bust { color: var(--red); opacity: .6; }
.cp-row.you { background: rgba(79, 140, 255, .1); }

/* ---------- Dice ---------- */
.dice-area { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 44px; }
.dice-slider { position: relative; padding: 20px 20px; background: var(--panel2); border-radius: 99px; margin: 70px 10px 20px; box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -20px rgba(0, 0, 0, .6); }
.dice-labels { position: absolute; left: 20px; right: 20px; bottom: -30px; display: flex; justify-content: space-between; color: var(--muted2); font-weight: 800; font-size: 12px; }
.dice-track { height: 12px; border-radius: 9px; overflow: hidden; box-shadow: 0 0 20px rgba(34, 214, 127, .15); }
.dice-fill { height: 100%; transition: background .15s; }
.dice-range { position: absolute; left: 20px; right: 20px; top: 50%; transform: translateY(-50%); width: calc(100% - 40px); margin: 0; -webkit-appearance: none; appearance: none; background: transparent; height: 34px; cursor: grab; }
.dice-range:active { cursor: grabbing; }
.dice-range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 9px; background: var(--grad); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(79, 140, 255, .6); transition: transform .2s var(--spring); }
.dice-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.dice-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 9px; background: var(--accent); border: 3px solid #fff; }
.dice-result { position: absolute; top: -62px; transform: translateX(-50%); transition: left .32s cubic-bezier(.2, .9, .3, 1); pointer-events: none; z-index: 2; }
.dice-slider .dice-result { left: 50%; }
.dice-result.land .dice-hex { animation: diceLand .45s var(--spring); }
@keyframes diceLand { 0% { transform: translateY(-8px) scale(.9); } 60% { transform: translateY(2px) scale(1.08); } }
.dice-hex { background: #fff; color: #111; font-family: var(--display); font-weight: 800; padding: 7px 12px; border-radius: 10px; font-size: 16px; position: relative; font-variant-numeric: tabular-nums; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.dice-hex::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
.dice-hex.rolling { background: var(--panel4); color: #fff; } .dice-hex.rolling::after { border-top-color: var(--panel4); }
.dice-hex.win { background: var(--green); color: #032613; box-shadow: 0 0 24px rgba(34, 214, 127, .6); } .dice-hex.win::after { border-top-color: var(--green); }
.dice-hex.lose { background: var(--red); color: #fff; box-shadow: 0 0 24px rgba(255, 77, 106, .5); } .dice-hex.lose::after { border-top-color: var(--red); }
.dice-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: var(--panel2); padding: 16px 16px 2px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Limbo ---------- */
.limbo-big { position: relative; flex: 1; display: grid; place-items: center; align-content: center; gap: 14px; min-height: 380px; }
.limbo-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.limbo-rings i { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .06); }
.limbo-rings i:nth-child(2) { width: 320px; height: 320px; }
.limbo-rings i:nth-child(3) { width: 420px; height: 420px; }
.limbo-big.won .limbo-rings i { animation: ringWin 1s var(--ease); border-color: rgba(34, 214, 127, .5); }
.limbo-big.won .limbo-rings i:nth-child(2) { animation-delay: .08s; } .limbo-big.won .limbo-rings i:nth-child(3) { animation-delay: .16s; }
@keyframes ringWin { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
.limbo-num { position: relative; font-family: var(--display); font-size: clamp(64px, 12vw, 124px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -3px; line-height: 1; }
.limbo-num.counting { color: #fff; }
.limbo-num.win { color: var(--green); text-shadow: 0 0 40px rgba(34, 214, 127, .45); animation: numPop .5s var(--spring); }
.limbo-num.lose { color: var(--red); text-shadow: 0 0 40px rgba(255, 77, 106, .35); animation: numPop .5s var(--spring); }
@keyframes numPop { 40% { transform: scale(1.08); } }
.limbo-target { position: relative; display: flex; gap: 10px; }
.limbo-target span { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; color: var(--muted); font-size: 13px; }
.limbo-target b { color: #fff; }

/* ---------- Mines ---------- */
.mines-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; width: min(100%, 500px); margin: auto; perspective: 900px; }
.tile {
  position: relative; aspect-ratio: 1; border-radius: 14px; background: linear-gradient(180deg, #2c3c5d, #22304b);
  box-shadow: 0 6px 0 #151d2e, inset 0 1px 0 rgba(255, 255, 255, .08); display: grid; place-items: center;
  transition: transform .18s var(--ease), background .2s, box-shadow .2s; transform-style: preserve-3d;
}
.tile .tile-in { position: absolute; inset: 19%; display: block; }
.tile .tile-in .ic { display: block; width: 100%; height: 100%; }
.mines-grid.live .tile:not(.open) { cursor: pointer; }
.mines-grid.live .tile:not(.open):hover { transform: translateY(-4px); background: linear-gradient(180deg, #3a5080, #2c3d5f); box-shadow: 0 10px 0 #151d2e, 0 0 24px -6px rgba(79, 140, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
.mines-grid:not(.live) .tile:not(.open) { cursor: default; }
.tile.reset { animation: tileReset .35s var(--ease) both; animation-delay: var(--d); }
@keyframes tileReset { from { transform: scale(.7) rotateX(60deg); opacity: .3; } }
.tile.open { background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); transform: translateY(6px); animation: tileFlip .45s var(--ease); }
@keyframes tileFlip { from { transform: translateY(6px) rotateY(90deg); } }
.tile.open .tile-in { animation: popIn .4s var(--spring); }
.tile.gem { background: radial-gradient(circle, rgba(34, 214, 127, .22), rgba(34, 214, 127, .05) 70%), var(--bg2); box-shadow: inset 0 0 0 1.5px rgba(34, 214, 127, .45), 0 0 24px -6px rgba(34, 214, 127, .6); }
.tile.boom { background: radial-gradient(circle, rgba(255, 77, 106, .45), rgba(255, 77, 106, .1) 70%), var(--bg2); box-shadow: inset 0 0 0 2px var(--red), 0 0 30px -4px var(--red); }
.tile.boom .tile-in { animation: bombPop .6s var(--spring); }
@keyframes bombPop { 0% { transform: scale(.3); } 50% { transform: scale(1.35) rotate(-10deg); } }
.tile.dim .tile-in { opacity: .35; filter: grayscale(.4); }

/* ---------- Plinko ---------- */
.plinko-canvas { width: 100%; flex: 1 1 0; min-height: 480px; height: 0; }

/* ---------- Keno ---------- */
.keno-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; width: min(100%, 640px); margin: 0 auto; }
.keno-tile { position: relative; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(180deg, #2c3c5d, #22304b); font-family: var(--display); font-weight: 800; font-size: 17px; box-shadow: 0 5px 0 #151d2e, inset 0 1px 0 rgba(255, 255, 255, .08); transition: transform .15s var(--spring), background .2s, box-shadow .2s; display: grid; place-items: center; animation: fadeUp .4s var(--ease) both; animation-delay: var(--d); }
.keno-tile:hover { transform: translateY(-3px); }
.keno-tile .ic { position: absolute; left: 21%; top: 21%; width: 58%; height: 58%; }
.keno-tile.picked { background: var(--grad); box-shadow: 0 5px 0 #3b25a0, 0 0 20px -4px rgba(123, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .25); animation: pickPop .35s var(--spring); }
@keyframes pickPop { 50% { transform: scale(1.12); } }
.keno-tile.hit { background: radial-gradient(circle, #1f6b48, #0f3d2a); box-shadow: 0 5px 0 #0a2a1d, 0 0 0 2px var(--green), 0 0 26px -2px rgba(34, 214, 127, .8); animation: pickPop .35s var(--spring); }
.keno-tile.miss { background: var(--bg2); color: var(--muted2); box-shadow: inset 0 0 0 1px var(--line); transform: translateY(5px); }
.keno-tile.miss.picked { color: #fff; box-shadow: inset 0 0 0 2px var(--accent-2); }
.keno-pay { display: flex; gap: 6px; margin: 24px auto 0; width: min(100%, 640px); overflow-x: auto; padding-bottom: 4px; }
.kp { flex: 1; min-width: 54px; background: var(--panel2); border-radius: 10px; padding: 9px 4px; text-align: center; box-shadow: inset 0 0 0 1px var(--line); animation: fadeUp .35s var(--ease) both; animation-delay: var(--d); }
.kp b { display: block; font-size: 13px; font-family: var(--display); } .kp span { font-size: 11px; color: var(--muted); font-weight: 700; }
.kp.hit { background: var(--green); color: #032613; box-shadow: 0 0 20px rgba(34, 214, 127, .5); transform: translateY(-3px); } .kp.hit span { color: #064425; }
.kp-empty { width: 100%; text-align: center; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; }

/* ---------- Blackjack ---------- */
.bj-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.bj-table { position: relative; isolation: isolate; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; min-height: 480px; padding: 18px 10px; border-radius: 22px; overflow: hidden; }
.bj-felt { position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: radial-gradient(ellipse at 50% 30%, #17603f, #0b3a27 60%, #062519); box-shadow: inset 0 0 0 10px #3a2512, inset 0 0 0 12px #c9a36b, inset 0 0 80px rgba(0, 0, 0, .6); }
.bj-felt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 46%; transform: translate(-50%, -50%); border: 2px solid rgba(255, 215, 140, .2); border-radius: 50%; }
.bj-side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; transition: background .3s, box-shadow .3s; }
.bj-side.focus { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 2px var(--gold), 0 0 30px -6px var(--gold); }
.bj-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: rgba(255, 255, 255, .55); }
.bj-hands { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.bj-hand { display: flex; min-height: 114px; }
.bj-hand .pcard + .pcard { margin-left: -40px; }
.bj-val { background: rgba(0, 0, 0, .45); padding: 5px 13px; border-radius: 99px; font-family: var(--display); font-weight: 800; min-width: 48px; text-align: center; opacity: 0; transform: scale(.7); transition: all .3s var(--spring); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.bj-val.show { opacity: 1; transform: none; }
.bj-val.win { background: var(--green); color: #032613; box-shadow: 0 0 20px rgba(34, 214, 127, .6); }
.bj-val.lose, .bj-val.bust { background: var(--red); color: #fff; }
.bj-val.push { background: var(--gold); color: #2a1c00; }
.bj-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bj-msg { font-family: var(--display); font-size: 26px; font-weight: 800; min-height: 34px; opacity: 0; transform: scale(.7); transition: all .4s var(--spring); text-shadow: 0 4px 20px rgba(0, 0, 0, .5); }
.bj-msg.show { opacity: 1; transform: none; }
.bj-msg.win { color: #7dffc0; } .bj-msg.lose { color: #ff9aa8; } .bj-msg.push { color: var(--gold); }
.bj-note { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: rgba(255, 215, 140, .45); }
.bj-shoe { position: absolute; right: 18px; top: 18px; width: 50px; height: 64px; }
.bj-shoe i { position: absolute; inset: 0; border-radius: 7px; background: var(--grad); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 3px 8px rgba(0, 0, 0, .4); }
.bj-shoe i:nth-child(2) { transform: translate(2px, 2px); } .bj-shoe i:nth-child(3) { transform: translate(4px, 4px); } .bj-shoe i:nth-child(4) { transform: translate(6px, 6px); }
.pcard.x .pc-face { opacity: .9; }

/* ---------- Hilo ---------- */
.hilo-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.hilo-main { display: flex; align-items: center; gap: 28px; }
.hilo-card { position: relative; width: 124px; height: 176px; }
.hilo-deck { position: absolute; inset: 0; border-radius: 12px; background: var(--grad); transform: translate(8px, 8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 4px 4px 0 -1px #2c2270, 8px 8px 20px rgba(0, 0, 0, .5); }
.hilo-card .pcard { position: absolute; inset: 0; width: 124px; height: 176px; }
.hilo-card .pcard .pc-face { padding: 11px 12px; border-radius: 12px; }
.hilo-card .pcard .pc-back { border-radius: 12px; }
.hilo-card .pcard .r, .hilo-card .pcard .r2 { font-size: 32px; width: 30px; }
.hilo-card .pcard .r i .ic, .hilo-card .pcard .r2 i .ic { width: 18px; height: 18px; }
.hilo-card .pcard .s .ic { width: 58px; height: 58px; }
.hilo-choice { width: 150px; padding: 18px 10px; border-radius: 16px; background: var(--panel2); box-shadow: inset 0 0 0 1.5px var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: box-shadow .2s, transform .3s var(--spring), background .2s; }
.hilo-choice .ic-wrap { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 4px; }
.hilo-choice .ic-wrap .ic { width: 22px; height: 22px; }
.hilo-choice.hi .ic-wrap { background: rgba(34, 214, 127, .15); color: var(--green); }
.hilo-choice.lo .ic-wrap { background: rgba(255, 77, 106, .15); color: var(--red); }
.hilo-choice:hover:not(:disabled) { transform: translateY(-4px); }
.hilo-choice.hi:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--green), 0 14px 30px -12px var(--green); }
.hilo-choice.lo:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--red), 0 14px 30px -12px var(--red); }
.hilo-choice:disabled { opacity: .45; cursor: not-allowed; }
.hilo-choice small { color: var(--muted); font-weight: 700; }
.hilo-choice .mx { color: var(--gold); font-family: var(--display); font-size: 15px; }
.hilo-hist { display: flex; gap: 7px; max-width: 100%; overflow-x: auto; min-height: 76px; padding: 6px; }
.hilo-hist .pcard.start .pc-face { box-shadow: 0 0 0 2px var(--accent); }
.hilo-hist .pcard.skip { opacity: .45; }

/* ---------- Tower ---------- */
.tower { display: flex; flex-direction: column; gap: 8px; width: min(100%, 480px); margin: auto; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 157, 61, .06), transparent); box-shadow: inset 0 0 0 1px var(--line); }
.tw-row { display: flex; align-items: center; gap: 10px; opacity: .5; transition: opacity .3s, transform .3s var(--ease); animation: fadeUp .4s var(--ease) both; animation-delay: var(--d); }
.tw-row.current { opacity: 1; transform: scale(1.02); }
.tw-row.cleared { opacity: .85; }
.tw-m { width: 78px; text-align: right; font-weight: 800; font-size: 12px; color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; font-family: var(--display); transition: color .3s; }
.tw-row.current .tw-m { color: var(--gold); text-shadow: 0 0 12px rgba(255, 200, 61, .5); }
.tw-row.cleared .tw-m { color: var(--green); }
.tw-tiles { flex: 1; display: flex; gap: 8px; }
.tw-tile { flex: 1; min-width: 0; height: 42px; border-radius: 10px; background: linear-gradient(180deg, #2c3c5d, #22304b); box-shadow: 0 4px 0 #151d2e; transition: transform .15s var(--spring), background .2s, box-shadow .2s; display: grid; place-items: center; }
.tw-in { width: 30px; height: 30px; display: block; }
.tw-in .ic { width: 100%; height: 100%; }
.tw-in .skull { color: #ff6b82; }
.tw-row.current .tw-tile:not(.open) { background: linear-gradient(180deg, #ff9d3d, #d9661c); box-shadow: 0 4px 0 #7a3208, 0 0 18px -4px rgba(255, 157, 61, .8); cursor: pointer; animation: towerGlow 1.6s infinite; }
@keyframes towerGlow { 50% { filter: brightness(1.15); } }
.tw-row.current .tw-tile:not(.open):hover { transform: translateY(-3px); }
.tw-tile.open { background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); transform: translateY(4px); animation: tileFlip .4s var(--ease); }
.tw-tile.open .tw-in { animation: popIn .4s var(--spring); }
.tw-tile.good { background: rgba(34, 214, 127, .15); box-shadow: inset 0 0 0 1.5px rgba(34, 214, 127, .5); }
.tw-tile.bad { background: rgba(255, 77, 106, .25); box-shadow: inset 0 0 0 2px var(--red), 0 0 20px -4px var(--red); }
.tw-tile.dim .tw-in { opacity: .35; }

/* ---------- Wheel ---------- */
.wheel-wrap { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
.wheel-glow { position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 80px rgba(6, 214, 160, .18); transition: box-shadow .5s; }
.wheel-wrap.spinning .wheel-glow { box-shadow: 0 0 100px rgba(79, 140, 255, .35); }
.wheel-wrap.won .wheel-glow { box-shadow: 0 0 120px rgba(255, 200, 61, .45); }
.wheel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-pointer { position: absolute; top: -14px; left: 50%; width: 34px; height: 42px; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); transform-origin: 50% 30%; }
.wheel-pointer svg { width: 100%; height: 100%; }
.wheel-pointer.tick { animation: pointerTick .18s ease-out; }
@keyframes pointerTick { 40% { transform: translateX(-50%) rotate(-14deg); } }
.wheel-center { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.wheel-center span { font-family: var(--display); font-size: 40px; font-weight: 800; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); }
.wheel-center.pop span { animation: numPop .5s var(--spring); }
.wheel-legend { display: flex; gap: 8px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.wl { background: var(--panel2); border-radius: 10px; padding: 8px 14px; text-align: center; min-width: 84px; box-shadow: inset 0 -3px 0 var(--c), inset 0 0 0 1px var(--line); transition: transform .3s var(--spring), box-shadow .3s; }
.wl.hit { transform: translateY(-4px); box-shadow: inset 0 -3px 0 var(--c), inset 0 0 0 1.5px var(--c), 0 10px 24px -10px var(--c); }
.wl b { display: block; font-family: var(--display); } .wl span { font-size: 11px; color: var(--muted); font-weight: 700; }

/* ---------- War ---------- */
.war-area { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 22px; min-height: 380px; }
.war-side { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.war-lbl { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; }
.war-slot { width: 130px; height: 184px; border: 2px dashed var(--line2); border-radius: 14px; display: grid; place-items: center; position: relative; }
.war-slot .pcard { position: absolute; inset: 0; width: 130px; height: 184px; }
.war-slot .pcard .pc-face, .war-slot .pcard .pc-back { border-radius: 14px; }
.war-slot .pcard .pc-face { padding: 12px 13px; }
.war-slot .pcard .r, .war-slot .pcard .r2 { font-size: 34px; width: 32px; }
.war-slot .pcard .r i .ic, .war-slot .pcard .r2 i .ic { width: 18px; height: 18px; }
.war-slot .pcard .s .ic { width: 60px; height: 60px; }
.war-vs span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-family: var(--display); font-size: 22px; font-weight: 800; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--muted); }
.war-vs.clash span { animation: clash .5s var(--spring) infinite alternate; background: var(--red); color: #fff; box-shadow: 0 0 30px var(--red); }
@keyframes clash { to { transform: scale(1.15) rotate(8deg); } }
.war-msg { grid-column: 1 / -1; font-family: var(--display); font-size: 28px; font-weight: 800; min-height: 36px; opacity: 0; transform: scale(.7); transition: all .4s var(--spring); }
.war-msg.show { opacity: 1; transform: none; }
.war-msg.win { color: var(--green); } .war-msg.lose { color: var(--red); } .war-msg.push { color: var(--gold); }
.war-msg.war { color: #fff; font-size: 44px; letter-spacing: 6px; text-shadow: 0 0 30px var(--red); }

/* ---------- RPS ---------- */
.rps-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.rps-duel { display: flex; align-items: center; gap: 34px; }
.rps-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rps-lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.rps-hand { width: 160px; height: 160px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, var(--panel3), var(--panel2)); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line2), 0 20px 40px -20px rgba(0, 0, 0, .7); transition: box-shadow .3s, transform .3s var(--spring); }
.rps-hand .ic { width: 96px; height: 96px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4)); }
.rps-hand.shake .ic { animation: rpsShake .3s ease-in-out 3; }
@keyframes rpsShake { 50% { transform: translateY(-26px) rotate(-12deg); } }
.rps-hand.revealed .ic { animation: popIn .45s var(--spring); }
.rps-hand.winner { box-shadow: inset 0 0 0 2px var(--green), 0 0 40px -6px var(--green); transform: scale(1.06); }
.rps-hand.loser { opacity: .55; transform: scale(.94); }
.rps-vs { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--muted2); }
.rps-msg { font-weight: 800; font-size: 17px; min-height: 24px; text-align: center; }
.rps-picks { display: flex; gap: 12px; }
.rps-pick { width: 118px; padding: 14px 8px 12px; border-radius: 16px; background: var(--panel2); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 800; text-transform: capitalize; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .3s var(--spring), box-shadow .2s; }
.rps-pick .ic { width: 50px; height: 50px; transition: transform .3s var(--spring); }
.rps-pick:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--accent), 0 14px 30px -12px var(--accent); transform: translateY(-4px); }
.rps-pick:hover:not(:disabled) .ic { transform: rotate(-10deg) scale(1.1); }
.rps-pick:disabled { opacity: .45; cursor: not-allowed; }
.rps-ladder { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rps-ladder span { padding: 6px 10px; border-radius: 8px; background: var(--panel2); font-size: 12px; font-weight: 800; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: all .3s; }
.rps-ladder span.on { background: rgba(34, 214, 127, .15); color: var(--green); box-shadow: inset 0 0 0 1px rgba(34, 214, 127, .35); }
.rps-ladder span.next { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 200, 61, .5); animation: todayPulse 1.4s infinite; }

/* ---------- Chicken Cross ---------- */
.road-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; border-radius: 16px; background: #262a35; min-height: 380px; display: flex; box-shadow: inset 0 0 0 1px var(--line); }
.road { display: flex; min-height: 100%; }
.lane { width: 100px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(90deg, transparent calc(100% - 3px), transparent 0), #2b303c;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .55) 0 22px, transparent 22px 44px); background-size: 3px 100%; background-repeat: no-repeat; background-position: right; }
.lane.curb { background: linear-gradient(90deg, #5a6272, #4a5160); width: 116px; box-shadow: inset -6px 0 0 #cfd6e0; }
.lane.end { box-shadow: inset 6px 0 0 #cfd6e0; background-image: repeating-conic-gradient(#e9eef8 0 25%, #1b2233 0 50%); background-size: 24px 24px; }
.finish-flag { width: 44px !important; height: 44px !important; color: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.coin-mark { width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #4d5363, #333845); box-shadow: inset 0 0 0 4px #555c6d, 0 4px 10px rgba(0, 0, 0, .4); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 13px; color: #cfd6e0; transition: all .35s var(--spring); position: relative; z-index: 1; }
.lane.passed .coin-mark { background: radial-gradient(circle at 40% 35%, #fff3bf, #ffc83d 55%, #d99100); color: #3a2700; box-shadow: inset 0 0 0 4px #b87a00, 0 0 26px rgba(255, 200, 61, .6); transform: scale(1.05); }
.lane.crash { background-color: #4a2330; }
.chicken { position: absolute; z-index: 3; width: 70px; height: 70px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.chicken .ic { width: 100%; height: 100%; }
.chicken.hop { animation: hop .32s var(--ease); }
@keyframes hop { 0% { transform: translateX(-60px) translateY(0); } 50% { transform: translateX(-30px) translateY(-26px) scale(1.05, .95); } 100% { transform: none; } }
.lane.start .chicken.hop { animation: popIn .4s var(--spring); }
.chicken.dead { animation: dead .6s var(--ease) forwards; }
@keyframes dead { 30% { transform: scale(1.3, .5); } 100% { transform: scale(1.4, .25) translateY(40px); opacity: .5; filter: grayscale(1); } }
.car { position: absolute; left: 50%; width: 52px; height: 84px; transform: translateX(-50%); z-index: 4; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.car .ic { width: 100%; height: 100%; }
.car.ambient { top: -100px; z-index: 2; animation: drive linear forwards; }
@keyframes drive { to { top: calc(100% + 20px); } }
.car.smash { top: -100px; animation: smash .28s ease-in forwards; }
@keyframes smash { to { top: calc(50% - 42px); } }

/* ---------- Coinflip ---------- */
.coin-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.coin-stage { position: relative; width: 190px; height: 230px; perspective: 900px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.coin3d { width: 180px; height: 180px; position: relative; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.3, .1, .2, 1); }
.coin-stage.toss .coin3d { animation: toss 1.2s cubic-bezier(.3, .1, .2, 1); }
@keyframes toss { 45% { translate: 0 -70px; } }
.coin3d .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .4)); }
.coin3d .face .ic { width: 100%; height: 100%; }
.coin3d .tails { transform: rotateY(180deg); }
.coin-shadow { position: absolute; bottom: 0; width: 130px; height: 18px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .5), transparent 70%); }
.coin-stage.toss .coin-shadow { animation: tossShadow 1.2s cubic-bezier(.3, .1, .2, 1); }
@keyframes tossShadow { 45% { transform: scale(.55); opacity: .4; } }
.coin-msg { font-weight: 800; font-size: 17px; text-align: center; }
.coin-picks { width: min(100%, 340px); }

/* ---------- Cases ---------- */
.case-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.case-card {
  position: relative; overflow: hidden; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cc) 28%, transparent), transparent 65%), var(--panel);
  border-radius: 20px; padding: 26px 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: inset 0 0 0 1px var(--line); transition: transform .45s var(--ease), box-shadow .3s; animation: cardIn .6s var(--ease) both; animation-delay: calc(var(--i) * 60ms);
}
.case-card.tilting { transition: transform .08s linear, box-shadow .3s; }
.case-card:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cc) 60%, transparent), 0 20px 40px -18px var(--cc); }
.case-card b { font-family: var(--display); font-size: 17px; margin-top: 4px; }
.cc-price { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--gold); }
.cc-price .ic { width: 18px; height: 18px; }
.case-art { --case: var(--cc); position: relative; width: 110px; height: 110px; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); transition: transform .5s var(--spring); }
.case-art > .ic { width: 100%; height: 100%; }
.case-card:hover .case-art { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
.case-badge { position: absolute; right: -4px; bottom: 2px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel2); color: var(--cc); box-shadow: 0 0 0 3px var(--panel), 0 0 16px -2px var(--cc); }
.case-badge .ic { width: 24px; height: 24px; }
.case-art.sm { width: 42px; height: 42px; filter: none; }
.case-art.sm .case-badge { width: 20px; height: 20px; border-radius: 6px; right: -6px; bottom: -2px; box-shadow: 0 0 0 2px var(--panel); }
.case-art.sm .case-badge .ic { width: 13px; height: 13px; }
.case-open { padding: 24px; }
.co-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.co-title { margin: 0; font-family: var(--display); font-size: 22px; flex: 1; display: flex; align-items: center; gap: 12px; }
.co-price { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--gold); }
.reel-box { position: relative; overflow: hidden; background: radial-gradient(ellipse at center, #182238, var(--bg2)); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); height: 164px; display: flex; align-items: center; }
.reel-box.v { height: 280px; align-items: flex-start; justify-content: center; }
.reel-strip { display: flex; gap: 8px; will-change: transform; }
.reel-strip.v { flex-direction: column; }
.reel-box.spinning .reel-strip { filter: blur(.6px); }
.reel-line { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gold); transform: translateX(-50%); box-shadow: 0 0 16px var(--gold), 0 0 4px #fff; z-index: 3; }
.reel-line::before, .reel-line::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 8px solid transparent; }
.reel-line::before { top: -8px; border-top-color: var(--gold); }
.reel-line::after { bottom: -8px; border-bottom-color: var(--gold); }
.reel-line.v { left: 8px; right: 8px; top: 50%; bottom: auto; width: auto; height: 3px; transform: translateY(-50%); }
.reel-line.v::before, .reel-line.v::after { display: none; }
.reel-fade { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(90deg, var(--bg2), transparent 18%, transparent 82%, var(--bg2)); }
.reel-fade.v { background: linear-gradient(180deg, var(--bg2), transparent 22%, transparent 78%, var(--bg2)); }
.ci { width: 118px; height: 132px; flex-shrink: 0; border-radius: 12px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), var(--panel2); box-shadow: inset 0 -3px 0 var(--rc), inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: transform .35s var(--spring), box-shadow .35s; }
.reel-strip.v .ci { width: 128px; height: 96px; gap: 4px; }
.ci-e { color: var(--rc); line-height: 0; }
.ci-e .ic { width: 50px; height: 50px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 60%, transparent)); }
.reel-strip.v .ci-e .ic { width: 36px; height: 36px; }
.ci-v { font-weight: 800; font-size: 13px; font-family: var(--display); }
.ci.landed { transform: scale(1.08); box-shadow: inset 0 -3px 0 var(--rc), inset 0 0 0 2px var(--rc), 0 0 34px -2px var(--rc); z-index: 1; position: relative; }
.ci.landed .ci-e .ic { animation: floaty 1.6s ease-in-out infinite; }
.co-actions { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.co-fast { color: var(--muted); font-weight: 700; display: flex; gap: 9px; align-items: center; cursor: pointer; user-select: none; }
.co-fast input { display: none; }
.co-fast i { width: 38px; height: 22px; border-radius: 99px; background: var(--panel3); position: relative; transition: background .25s; box-shadow: inset 0 0 0 1px var(--line); }
.co-fast i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--spring); }
.co-fast input:checked + i { background: var(--accent); }
.co-fast input:checked + i::after { transform: translateX(16px); }
.co-result { text-align: center; min-height: 64px; margin-top: 16px; }
.co-won { display: inline-flex; gap: 14px; align-items: center; padding: 12px 20px 12px 12px; border-radius: 16px; background: var(--panel2); box-shadow: inset 0 0 0 2px var(--rc), 0 0 40px -10px var(--rc); animation: popIn .45s var(--spring); text-align: left; }
.cw-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: var(--rc); background: color-mix(in srgb, var(--rc) 15%, transparent); }
.cw-ic .ic { width: 32px; height: 32px; }
.co-won small { display: block; color: var(--rc); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.co-won b { font-size: 17px; }
.cw-v { font-family: var(--display); font-weight: 800; font-size: 20px; margin-left: 10px; }
.co-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.co-item { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 18%, transparent), transparent 70%), var(--panel2); border-radius: 12px; box-shadow: inset 0 -3px 0 var(--rc), inset 0 0 0 1px var(--line); padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; animation: fadeUp .4s var(--ease) both; animation-delay: calc(var(--i) * 40ms); transition: transform .3s var(--spring); }
.co-item:hover { transform: translateY(-3px); }
.co-item .ci-e .ic { width: 40px; height: 40px; }
.co-item b { font-size: 13px; }

/* ---------- Case battles ---------- */
.battle-setup { padding: 20px; margin-bottom: 18px; }
.bs-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; }
.bs-row .field { margin: 0; }
.battle-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 20px; text-align: center; border-radius: 18px; border: 2px dashed var(--line2); }
.battle-empty .ic { width: 80px; height: 80px; animation: floaty 3s ease-in-out infinite; }
.battle-empty b { font-family: var(--display); font-size: 18px; }
.b-round { text-align: center; margin-bottom: 16px; min-height: 36px; }
.br-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 99px; background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line2); font-family: var(--display); font-weight: 800; font-size: 16px; animation: popIn .4s var(--spring); }
.br-pill.win { background: rgba(34, 214, 127, .14); color: var(--green); box-shadow: inset 0 0 0 1.5px rgba(34, 214, 127, .5), 0 0 30px -8px var(--green); }
.br-pill.lose { color: #ff9aa8; }
.b-players { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.b-player { background: var(--panel); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .4s, opacity .4s, transform .4s var(--spring); animation: fadeUp .45s var(--ease) both; animation-delay: calc(var(--i) * 80ms); }
.b-player.you { box-shadow: inset 0 0 0 1.5px rgba(79, 140, 255, .55); }
.b-player.lead-round { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 26px -8px var(--gold); }
.b-player.winner { box-shadow: inset 0 0 0 2px var(--green), 0 0 40px -8px var(--green); transform: translateY(-4px); }
.b-player.loser { opacity: .5; }
.bp-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bp-head b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-total { font-weight: 800; font-family: var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.bp-av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--panel3); color: var(--muted); flex-shrink: 0; }
.b-player.you .bp-av { background: var(--grad); color: #fff; }
.bp-items { display: flex; gap: 6px; flex-wrap: wrap; min-height: 54px; }
.bpi { background: var(--panel2); box-shadow: inset 0 -3px 0 var(--rc); border-radius: 9px; padding: 5px 7px; display: flex; flex-direction: column; align-items: center; color: var(--rc); animation: popIn .4s var(--spring); }
.bpi .ic { width: 26px; height: 26px; }
.bpi small { font-size: 10px; font-weight: 800; color: var(--muted); }

/* ---------- Roulette ---------- */
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { position: relative; width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 12px; font-family: var(--display); transition: transform .3s var(--spring), box-shadow .2s;
  background: radial-gradient(circle, var(--c) 0 52%, transparent 53%), repeating-conic-gradient(var(--c) 0 20deg, #fff 20deg 30deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(0, 0, 0, .15); }
.chip span { position: relative; }
.chip:nth-child(1) { --c: #6c7a96; } .chip:nth-child(2) { --c: #2f7cf6; } .chip:nth-child(3) { --c: #d62839; }
.chip:nth-child(4) { --c: #1a9e55; } .chip:nth-child(5) { --c: #7b5cff; } .chip:nth-child(6) { --c: #1b1f2a; }
.chip:hover { transform: translateY(-3px); }
.chip.on { transform: translateY(-4px) scale(1.1); box-shadow: 0 0 0 3px var(--gold), 0 8px 18px rgba(0, 0, 0, .5); }
.rl-hist { display: flex; gap: 5px; flex-wrap: wrap; }
.rh { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 12px; font-family: var(--display); animation: popIn .35s var(--spring); }
.rh.red { background: #d62839; } .rh.black { background: #232838; box-shadow: inset 0 0 0 1px var(--line2); } .rh.green { background: #1a9e55; }
.rl-wheel-wrap { position: relative; width: min(100%, 310px); aspect-ratio: 1; margin: 0 auto 20px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.rl-wheel { position: absolute; inset: 0; width: 100%; height: 100%; }
.rl-result { position: absolute; inset: 35%; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 36px; font-weight: 800; opacity: 0; transform: scale(.4); transition: all .45s var(--spring); }
.rl-result.show { opacity: 1; transform: none; }
.rl-result.red { background: radial-gradient(circle at 40% 30%, #ff5a6e, #b0142c); box-shadow: 0 0 40px rgba(214, 40, 57, .7); }
.rl-result.black { background: radial-gradient(circle at 40% 30%, #3a4150, #10131b); box-shadow: 0 0 0 2px #4a5160, 0 0 30px rgba(0, 0, 0, .6); }
.rl-result.green { background: radial-gradient(circle at 40% 30%, #36d17d, #0f7a3e); box-shadow: 0 0 40px rgba(26, 158, 85, .7); }
.rl-table { overflow-x: auto; padding: 4px 2px 8px; }
.rl-grid { display: grid; grid-template-columns: 52px repeat(12, minmax(40px, 1fr)) 52px; grid-template-rows: repeat(3, 46px) 42px 42px; gap: 4px; min-width: 640px; padding: 10px; border-radius: 16px; background: radial-gradient(ellipse at center, #17603f, #0b3a27); box-shadow: inset 0 0 0 3px #3a2512, inset 0 0 0 5px #c9a36b; }
.rl-cell { position: relative; border-radius: 7px; font-weight: 800; font-size: 14px; font-family: var(--display); transition: filter .15s, transform .2s var(--spring), box-shadow .2s; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.rl-cell:hover { filter: brightness(1.25); transform: translateY(-1px); }
.rl-cell.red { background: linear-gradient(180deg, #e63449, #b81e33); } .rl-cell.black { background: linear-gradient(180deg, #2a303e, #151923); } .rl-cell.green { background: linear-gradient(180deg, #21b563, #127a40); }
.rl-cell.out { background: rgba(0, 0, 0, .25); font-size: 12px; color: #e9eef8; box-shadow: inset 0 0 0 1px rgba(255, 215, 140, .3); }
.rl-cell.zero { grid-row: 1 / 4; grid-column: 1; }
.rl-cell .diamond { display: inline-block; width: 16px; height: 16px; background: currentColor; transform: rotate(45deg); color: rgba(255, 255, 255, .85); border-radius: 2px; }
.rl-cell.cover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); filter: brightness(1.2); }
.rl-cell.hit { box-shadow: inset 0 0 0 3px var(--gold), 0 0 22px var(--gold); z-index: 1; animation: hitPulse 1s ease-in-out 3; }
@keyframes hitPulse { 50% { filter: brightness(1.5); } }
.rl-chip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 28px; height: 28px; padding: 0 4px; border-radius: 14px; background: radial-gradient(circle, #ffd35c 0 55%, transparent 56%), repeating-conic-gradient(#ffc83d 0 20deg, #fff 20deg 30deg); color: #2a1c00; font-size: 10px; font-weight: 900; display: grid; place-items: center; pointer-events: none; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); z-index: 2; }
.rl-chip.drop { animation: chipDrop .35s var(--spring); }
@keyframes chipDrop { from { transform: translate(-50%, -130%) scale(1.3); opacity: 0; } }

/* ---------- Slots ---------- */
.slot-machine { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.slot-marquee { display: flex; gap: 10px; }
.slot-marquee i { width: 8px; height: 8px; border-radius: 50%; background: #ffd35c; box-shadow: 0 0 10px #ffc83d; animation: bulb 1s infinite; }
.slot-marquee i:nth-child(even) { animation-delay: .5s; }
.slot-machine.spinning .slot-marquee i { animation-duration: .25s; }
@keyframes bulb { 50% { opacity: .2; box-shadow: none; } }
.slot-frame { position: relative; width: min(100%, 580px); padding: 16px; border-radius: 22px; background: linear-gradient(180deg, #3b2580, #1b1848); box-shadow: inset 0 0 0 3px #6a4fd0, inset 0 2px 0 5px rgba(255, 255, 255, .08), 0 0 60px rgba(123, 92, 255, .28), 0 30px 50px -20px rgba(0, 0, 0, .7); }
.slot-reels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.slot-reel { height: clamp(210px, 36vw, 300px); overflow: hidden; background: linear-gradient(180deg, #0a0e18, #141b2b 50%, #0a0e18); border-radius: 12px; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 10px 20px rgba(0, 0, 0, .6), inset 0 -10px 20px rgba(0, 0, 0, .6); }
.slot-reel.blur .slot-strip { filter: blur(2px) brightness(1.1); }
.slot-reel.land .slot-strip { animation: reelLand .3s var(--spring); }
@keyframes reelLand { 40% { translate: 0 6px; } }
.slot-strip { will-change: transform; }
.slot-cell { position: relative; height: calc(clamp(210px, 36vw, 300px) / 3); }
.slot-cell .ic { position: absolute; left: 16%; top: 16%; width: 68%; height: 68%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.slot-cell.hit { background: radial-gradient(circle, rgba(255, 200, 61, .25), transparent 70%); }
.slot-cell.hit .ic { animation: slotHit .7s var(--spring) 3; }
@keyframes slotHit { 50% { transform: scale(1.2) rotate(-6deg); } }
.slot-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.slot-lines polyline { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawLine .8s var(--ease) forwards; opacity: .9; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.slot-win { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--gold); min-height: 34px; display: flex; align-items: center; gap: 8px; }
.slot-win b { color: #fff; text-shadow: 0 0 20px rgba(255, 200, 61, .7); }
.slot-win span { font-size: 13px; color: var(--muted); font-family: var(--font); }
.slot-win.on { animation: popIn .45s var(--spring); }
.slot-pay { display: flex; flex-direction: column; gap: 5px; }
.slot-pay div { display: flex; align-items: center; gap: 10px; background: var(--bg2); border-radius: 9px; padding: 5px 10px; box-shadow: inset 0 0 0 1px var(--line); }
.slot-pay .ic { width: 24px; height: 24px; }
.slot-pay small { color: var(--muted); font-weight: 700; font-size: 11px; }
.slot-pay small b { color: #c9d3e6; margin-left: 4px; }

/* ---------- Extra page components ---------- */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.how { position: relative; padding: 22px; overflow: hidden; }
.how > .ic { width: 30px; height: 30px; color: var(--accent); margin-bottom: 10px; }
.how b { display: block; font-family: var(--display); font-size: 17px; margin-bottom: 4px; }
.how p { margin: 0; line-height: 1.55; }
.how-n { position: absolute; right: 14px; top: 2px; font-family: var(--display); font-size: 70px; font-weight: 900; color: rgba(255, 255, 255, .04); }
.rank-row { display: flex; justify-content: space-between; gap: 4px; margin-top: 4px; }
.rank-item { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .35; filter: grayscale(.8); transition: all .3s; }
.rank-item.on { opacity: 1; filter: none; }
.rank-item small { font-size: 10px; font-weight: 700; }
.task-modal-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; padding-right: 30px; }
.tm-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 16%, var(--panel2)); color: var(--tc); flex-shrink: 0; }
.tm-ic .ic { width: 26px; height: 26px; }
.aim-hud { display: flex; gap: 20px; font-weight: 700; }
.aim-hud span { display: flex; align-items: center; gap: 7px; }
.aim-hud b { font-family: var(--display); font-size: 18px; }
.welcome { text-align: center; }
.wl-art { position: relative; width: 120px; height: 120px; margin: 4px auto 12px; }
.wl-art > .ic { width: 120px; height: 120px; animation: splashIn .9s var(--spring) both; filter: drop-shadow(0 14px 30px rgba(95, 141, 255, .6)); }
.wl-orbit { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px; animation: orbit 5s linear infinite; }
.wl-orbit .ic { width: 36px; height: 36px; animation: counter 5s linear infinite; }
.wl-orbit.o2 { animation-delay: -2.5s; } .wl-orbit.o2 .ic { animation-delay: -2.5s; }
@keyframes orbit { from { transform: rotate(0) translateX(76px); } to { transform: rotate(360deg) translateX(76px); } }
@keyframes counter { to { transform: rotate(-360deg); } }

@media (max-width: 900px) {
  .dice-controls { grid-template-columns: 1fr 1fr; }
  .dice-controls .field:last-child { grid-column: 1 / -1; }
  .hilo-main { gap: 10px; }
  .hilo-choice { width: 100px; padding: 12px 6px; }
  .hilo-card, .hilo-card .pcard { width: 96px; height: 136px; }
  .rps-hand { width: 112px; height: 112px; } .rps-hand .ic { width: 66px; height: 66px; }
  .rps-duel { gap: 14px; }
  .rps-pick { width: 96px; }
  .bs-row { grid-template-columns: 1fr 1fr; }
  .bs-row .field:first-child, .bs-row .btn { grid-column: 1 / -1; }
  .b-players { grid-template-columns: repeat(2, 1fr); }
  .war-slot, .war-slot .pcard { width: 96px; height: 136px; }
  .war-slot .pcard .r, .war-slot .pcard .r2 { font-size: 24px; }
  .war-slot .pcard .s .ic { width: 42px; height: 42px; }
  .crash-mult { font-size: 48px; }
  .crash-players { display: none; }
  .how-grid { grid-template-columns: 1fr; }
  .limbo-target { flex-direction: column; align-items: center; }
}