/* cryptocasinos.codes — game-specific styles (games + slots), neo-brutalist */

/* ============ shared ============ */
.game-stage canvas{max-width:100%;height:auto;display:block;border:var(--bd-thin);background:var(--paper)}
.bet-mods{display:flex;gap:7px;margin-top:7px}
.bet-mods .btn{flex:1;padding:7px 0;font-size:.78rem;box-shadow:2px 2px 0 var(--ink)}
.gc-toggle{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.gc-toggle .btn{padding:11px 0}
.gc-toggle .btn.is-on{background:var(--ink);color:var(--yellow)}
.stage-big{font-size:clamp(2.6rem,7vw,4rem);font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.stage-sub{color:var(--ink2);font-size:.9rem;margin-top:7px;font-weight:700}
.game-history{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:16px;min-height:28px}
.hist-chip{background:var(--paper2);border:var(--bd-thin);padding:2px 10px;font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums}
.hist-chip.h-win{background:var(--mint)}
.hist-chip.h-lose{background:var(--red);color:var(--paper2)}
@keyframes ccPop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes ccShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ============ mines ============ */
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:min(430px,100%)}
.mine-tile{aspect-ratio:1/1;background:var(--paper2);border:var(--bd);font-size:clamp(1.1rem,4vw,1.6rem);
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);padding:0;
  box-shadow:var(--sh-sm);transition:transform .1s,box-shadow .1s,background .12s}
.mine-tile:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--yellow)}
.mine-tile:disabled{cursor:default}
.mine-tile.t-safe{background:var(--mint);animation:ccPop .25s ease;box-shadow:none}
.mine-tile.t-boom{background:var(--red);animation:ccShake .4s ease;box-shadow:none}
.mine-tile.t-mine{background:var(--paper3);box-shadow:none}
.mine-tile.t-dim{opacity:.4;box-shadow:none}

/* ============ dice ============ */
.dice-zone{width:min(520px,100%)}
.dice-track{position:relative;height:22px;background:var(--red);border:var(--bd);overflow:hidden;margin:34px 0 9px}
.dice-fill{position:absolute;top:0;bottom:0;background:var(--mint)}
.dice-marker{position:absolute;top:-38px;transform:translateX(-50%);background:var(--ink);color:var(--yellow);
  font-weight:900;padding:4px 11px;font-size:.92rem;transition:left .5s cubic-bezier(.2,.8,.3,1);
  font-variant-numeric:tabular-nums;white-space:nowrap;border:var(--bd)}
.dice-marker::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--ink)}
.dice-scale{display:flex;justify-content:space-between;color:var(--ink2);font-size:.78rem;
  font-variant-numeric:tabular-nums;font-weight:700}
.dice-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:26px;border:var(--bd);box-shadow:var(--sh-sm)}
.dice-stat{background:var(--paper2);padding:12px;text-align:center;border-right:var(--bd-thin)}
.dice-stat:last-child{border-right:none}
.dice-stat b{display:block;color:var(--ink);font-size:1.2rem;font-variant-numeric:tabular-nums;font-weight:900}
.dice-stat span{color:var(--ink2);font-size:.72rem;text-transform:uppercase;font-weight:800}

/* ============ crash / limbo ============ */
.crash-wrap{position:relative;width:min(640px,100%)}
.crash-mult{position:absolute;top:16px;left:0;right:0;text-align:center;font-size:clamp(2rem,6vw,3.2rem);
  font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none}
.crash-mult.m-run{color:var(--ink)}
.crash-mult.m-bust{color:var(--red)}
.crash-mult.m-cash{color:var(--green)}
.limbo-stage{text-align:center}
.limbo-num{font-size:clamp(3rem,9vw,4.6rem);font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.limbo-num.l-win{background:var(--mint);border:var(--bd);padding:0 14px;display:inline-block}
.limbo-num.l-lose{background:var(--red);color:var(--paper2);border:var(--bd);padding:0 14px;display:inline-block}

/* ============ coin flip ============ */
.flip-scene{perspective:800px;width:150px;height:150px;margin:0 auto}
.flip-coin{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.7,.4,1)}
.flip-face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:3.4rem;backface-visibility:hidden;border:var(--bd);font-weight:900}
.flip-heads{background:var(--yellow)}
.flip-tails{background:var(--violet);transform:rotateY(180deg)}
.flip-streak{display:flex;gap:7px;justify-content:center;margin-top:20px;min-height:32px;flex-wrap:wrap}
.flip-streak span{width:32px;height:32px;background:var(--mint);border:var(--bd-thin);display:flex;
  align-items:center;justify-content:center;font-size:.95rem;font-weight:900;animation:ccPop .25s ease}

/* ============ wheel ============ */
.wheel-wrap{position:relative;width:min(380px,100%);margin:0 auto}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;
  border:14px solid transparent;border-top:22px solid var(--ink);z-index:2}
.wheel-legend{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.wheel-legend span{display:inline-flex;align-items:center;gap:7px;background:var(--paper2);border:var(--bd-thin);
  padding:4px 11px;font-size:.8rem;font-weight:800;font-variant-numeric:tabular-nums}
.wheel-legend i{width:12px;height:12px;display:inline-block;border:1px solid var(--ink)}

/* ============ roulette ============ */
.rou-stage{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px}
.rou-board{display:grid;grid-template-columns:34px repeat(12,1fr) 46px;grid-auto-rows:44px;gap:4px;
  width:100%;max-width:620px;user-select:none}
.rou-cell{position:relative;border:var(--bd-thin);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.86rem;color:var(--paper2);cursor:pointer;background:var(--paper3);
  transition:transform .1s}
.rou-cell:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink);z-index:1}
.rou-red{background:var(--red)}
.rou-black{background:var(--ink)}
.rou-green{background:var(--green)}
.rou-out{background:var(--paper2);color:var(--ink);font-size:.76rem}
.rou-cell.rou-hit{outline:4px solid var(--yellow);outline-offset:-4px;z-index:2}
.rou-cell.rou-flash{outline:3px solid var(--yellow);outline-offset:-3px;z-index:1}
.rou-chip{position:absolute;right:-6px;bottom:-6px;min-width:24px;height:24px;padding:0 4px;
  background:var(--yellow);color:var(--ink);font-size:.68rem;font-weight:900;display:flex;
  align-items:center;justify-content:center;border:var(--bd-thin);z-index:2;pointer-events:none}
.chip-row{display:flex;gap:9px;flex-wrap:wrap}
.chip-btn{width:46px;height:46px;border:var(--bd);font-weight:900;font-size:.82rem;cursor:pointer;
  color:var(--ink);transition:transform .1s;box-shadow:var(--sh-sm)}
.chip-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.chip-btn.is-on{background:var(--ink)!important;color:var(--yellow)}
.chip-1{background:var(--paper3)}.chip-5{background:var(--red);color:var(--paper2)}
.chip-10{background:var(--violet)}.chip-25{background:var(--mint)}.chip-100{background:var(--yellow)}
.rou-history{display:flex;gap:7px;flex-wrap:wrap;min-height:30px}
.rou-histnum{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--paper2);font-size:.78rem;font-weight:800;border:var(--bd-thin)}

/* ============ blackjack ============ */
.bj-table{width:100%;max-width:560px;display:flex;flex-direction:column;gap:24px}
.bj-row h4{color:var(--ink2);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;
  display:flex;gap:10px;align-items:center;font-weight:900}
.bj-total{background:var(--paper2);border:var(--bd-thin);color:var(--ink);padding:2px 10px;font-size:.8rem;
  font-variant-numeric:tabular-nums;font-weight:900}
.bj-total.bt-bust{background:var(--red);color:var(--paper2)}
.bj-total.bt-bj{background:var(--yellow)}
.bj-hand{display:flex;gap:10px;flex-wrap:wrap;min-height:92px}
.cardface{width:64px;height:90px;background:var(--paper2);color:var(--ink);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-weight:900;font-size:1.15rem;border:var(--bd);
  box-shadow:var(--sh-sm);animation:ccPop .3s ease;line-height:1.15}
.cardface small{font-size:1.3rem;font-weight:700}
.cardface.cf-red{color:var(--red)}
.cardface.cf-back{background:repeating-linear-gradient(45deg,var(--violet) 0 8px,var(--paper2) 8px 16px)}

/* ============ keno ============ */
.keno-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;width:min(460px,100%)}
.keno-cell{aspect-ratio:1/1;background:var(--paper2);border:var(--bd-thin);color:var(--ink);font-weight:800;
  font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;padding:0;transition:transform .1s}
.keno-cell:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink);background:var(--yellow)}
.keno-cell.k-pick{background:var(--violet);color:var(--paper2)}
.keno-cell.k-draw{background:var(--paper3);animation:ccPop .25s ease}
.keno-cell.k-hit{background:var(--mint);animation:ccPop .3s ease}
.keno-pay{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.keno-pay span{background:var(--paper2);border:var(--bd-thin);padding:3px 9px;font-size:.76rem;
  font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:700}
.keno-pay span b{color:var(--ink)}
.keno-pay span.kp-hit{background:var(--mint);color:var(--ink)}

/* ============ plinko ============ */
.plinko-wrap{width:min(600px,100%)}

/* ============ slots ============ */
.slot-grid{display:grid;gap:8px;width:min(480px,100%)}
.slot-6{grid-template-columns:repeat(6,1fr)}
.slot-5{grid-template-columns:repeat(5,1fr)}
.slot-cell{aspect-ratio:1/1;background:var(--paper2);border:var(--bd-thin);display:flex;align-items:center;
  justify-content:center;font-size:clamp(1.2rem,4.5vw,1.9rem);position:relative;overflow:visible}
.slot-cell.s-drop{animation:slotDrop .3s cubic-bezier(.2,.9,.3,1.2)}
.slot-cell.s-win{background:var(--mint);animation:slotWin .45s steps(2) infinite alternate}
.slot-cell.s-pop{animation:slotPop .3s ease forwards}
.slot-cell.s-wild{background:var(--yellow)}
.slot-cell .orb-val{position:absolute;bottom:-6px;right:-6px;background:var(--pink);color:var(--paper2);
  font-size:.62rem;font-weight:900;border:var(--bd-thin);padding:1px 5px;font-variant-numeric:tabular-nums}
@keyframes slotDrop{0%{transform:translateY(-26px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes slotWin{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes slotPop{0%{transform:scale(1);opacity:1}100%{transform:scale(.1);opacity:0}}
.slot-msg{margin-top:18px;min-height:1.5em;font-weight:900;font-size:1.12rem;text-align:center;color:var(--ink2)}
.slot-msg.s-hit{background:var(--mint);border:var(--bd-thin);color:var(--ink);display:inline-block;padding:2px 12px}
.slot-tumble{color:var(--pink)}
.slot-paylist{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.slot-paylist span{background:var(--paper2);border:var(--bd-thin);padding:3px 9px;font-size:.78rem;
  color:var(--ink2);font-weight:700}
.slot-paylist span b{color:var(--ink)}

/* responsive */
@media(max-width:640px){
  .rou-board{grid-auto-rows:34px;grid-template-columns:28px repeat(12,1fr) 36px;gap:3px}
  .rou-cell{font-size:.7rem}
  .rou-cell.rou-out{font-size:.58rem}
  .rou-chip{min-width:19px;height:19px;font-size:.58rem}
  .cardface{width:52px;height:74px;font-size:.95rem}
  .cardface small{font-size:1.05rem}
  .game-stage{padding:16px;min-height:360px}
}
@media(prefers-reduced-motion:reduce){
  .slot-cell.s-win{animation:none}
  .mine-tile:not(:disabled):hover,.keno-cell:not(:disabled):hover,.rou-cell:hover,.chip-btn:hover{transform:none}
}