/* ===========================================================================
   TOP10 CASON — arcade games (Cosmic Rush / Vault Heist / Neon Blackjack)
   =========================================================================== */

.game {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sh-3);
  overflow: hidden;
}

.game__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .25);
}

.game__id { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.game__sigil {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent);
  background: color-mix(in srgb, var(--gc) 16%, transparent);
  color: var(--gc);
}
.game__sigil svg { width: 22px; height: 22px; }
.game__name { font-family: var(--font-d); font-size: 1rem; line-height: 1.2; }
.game__tag { font-size: .72rem; color: var(--fg-3); letter-spacing: .04em; }

.game__bal {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: .35rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .3);
}
.game__bal span { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.game__bal strong {
  font-family: var(--font-d);
  font-size: 1.1rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.game__bal em { font-family: var(--font-b); font-size: .66rem; font-style: normal; color: var(--fg-3); margin-left: 3px; }
.game__bal.is-bump strong { animation: bal-bump 480ms var(--ease); }
@keyframes bal-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.16); color: #fff; }
  100% { transform: scale(1); }
}

.game__body { padding: var(--s5); }
.game__foot {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .22);
  font-size: .72rem;
  color: var(--fg-3);
  text-align: center;
}

.game__msg {
  min-height: 24px;
  margin-bottom: var(--s4);
  font-size: .86rem;
  color: var(--fg-2);
  text-align: center;
}

.game__controls { display: flex; flex-wrap: wrap; gap: var(--s3); }
.game__controls .btn { flex: 1 1 160px; }

.game__stats { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.game__stat span { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.game__stat strong { font-family: var(--font-d); font-size: 1rem; font-variant-numeric: tabular-nums; }

/* ---------- Cosmic Rush -------------------------------------------------- */
.cr__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  max-height: 420px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 22% 78%, rgba(59, 130, 246, .22), transparent 55%),
    linear-gradient(150deg, #0b1024 0%, #150f33 55%, #1e1b4b 100%);
  overflow: hidden;
  margin-bottom: var(--s5);
}

.cr__stars { position: absolute; inset: 0; opacity: .7; }
.cr__stars i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .18; } 50% { opacity: .95; } }

.cr__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr__path { fill: none; stroke: url(#crGrad); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(96, 165, 250, .7)); }
.cr__area { fill: url(#crFill); opacity: .35; }

.cr__ship {
  position: absolute;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  display: grid;
  place-items: center;
  color: #93c5fd;
  filter: drop-shadow(0 0 12px rgba(96, 165, 250, .9));
  transition: color var(--t) var(--ease);
}
.cr__ship svg { width: 30px; height: 30px; transform: rotate(-38deg); }

.cr__mult {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}
.cr__mult b {
  display: block;
  font-family: var(--font-d);
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 30px rgba(96, 165, 250, .55);
  transition: color var(--t) var(--ease), text-shadow var(--t) var(--ease);
}
.cr__mult small { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }

.cr__stage[data-state="fly"] .cr__mult b { animation: mult-pulse 900ms ease-in-out infinite; }
@keyframes mult-pulse { 50% { transform: scale(1.03); } }

.cr__stage[data-state="boom"] .cr__mult b { color: #fb7185; text-shadow: 0 0 40px rgba(244, 63, 94, .7); animation: shake 420ms var(--ease); }
.cr__stage[data-state="boom"] .cr__ship { color: var(--rose); }
.cr__stage[data-state="cashed"] .cr__mult b { color: #4ade80; text-shadow: 0 0 40px rgba(34, 197, 94, .65); }
.cr__stage[data-state="cashed"] .cr__ship { color: #4ade80; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

.cr__burst {
  position: absolute;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--bc, #fb7185);
  pointer-events: none;
}

.cr__hist { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); min-height: 30px; }
.cr__hist span {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .65rem;
  border-radius: var(--r-full);
  font-size: .74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid;
  animation: panel-in var(--t) var(--ease);
}
.cr__hist .is-win { color: #4ade80; border-color: rgba(34, 197, 94, .35); background: rgba(34, 197, 94, .1); }
.cr__hist .is-bust { color: #fb7185; border-color: rgba(244, 63, 94, .35); background: rgba(244, 63, 94, .1); }

/* ---------- Vault Heist -------------------------------------------------- */
.vh__diff { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.vh__diff button {
  flex: 1 1 90px;
  min-height: 44px;
  padding: .5rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .84rem;
  font-weight: 700;
  color: var(--fg-2);
  transition: all var(--t-fast) var(--ease);
}
.vh__diff button:hover { background: var(--surface-2); color: var(--fg); }
.vh__diff button[aria-pressed="true"] {
  border-color: var(--orange);
  background: rgba(249, 115, 22, .16);
  color: #fdba74;
}
.vh__diff button small { display: block; font-size: .64rem; font-weight: 500; color: var(--fg-3); }

.vh__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  max-width: 420px;
  margin: 0 auto var(--s5);
}

.vh__room {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(160deg, #14142a, #0c0c1a);
  color: var(--fg-3);
  font-family: var(--font-d);
  font-size: 1.05rem;
  transition: transform var(--t-fast) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease);
  transform-style: preserve-3d;
}
.vh__room svg { width: 26px; height: 26px; }
.vh__room:not([disabled]):hover { transform: translateY(-3px) scale(1.03); border-color: var(--orange); }
.vh__room:not([disabled]):active { transform: scale(.96); }
.vh__room[disabled] { cursor: default; }

.vh__room.is-open {
  animation: room-flip 420ms var(--ease);
}
@keyframes room-flip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

.vh__room.is-loot {
  border-color: rgba(34, 197, 94, .5);
  background: rgba(34, 197, 94, .14);
  color: #86efac;
}
.vh__room.is-mine {
  border-color: rgba(244, 63, 94, .55);
  background: rgba(244, 63, 94, .16);
  color: #fda4af;
}
.vh__room.is-mine.is-hit { animation: shake 420ms var(--ease); }

.vh__room-val { font-size: .8rem; font-family: var(--font-d); }

.vh__meters { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: center; margin-bottom: var(--s5); }
.vh__meter { text-align: center; }
.vh__meter span { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.vh__meter strong { font-family: var(--font-d); font-size: 1.35rem; color: var(--orange); font-variant-numeric: tabular-nums; }

.vh__flash {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  background: rgba(6, 6, 13, .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-d);
  font-size: clamp(1.2rem, 4vw, 1.9rem);
  z-index: 3;
  animation: flash-in 320ms var(--ease);
}
.vh__flash[hidden] { display: none; }
.vh__flash.is-win { color: #4ade80; }
.vh__flash.is-bust { color: #fb7185; }
@keyframes flash-in { from { opacity: 0; transform: scale(.9); } }

.vh__stage { position: relative; }

/* ---------- Neon Blackjack ----------------------------------------------- */
.bj__table {
  position: relative;
  padding: var(--s5);
  border-radius: var(--r-lg);
  border: 1px solid rgba(16, 185, 129, .3);
  background:
    radial-gradient(circle at 50% 0%, rgba(16, 185, 129, .18), transparent 60%),
    linear-gradient(160deg, #052e26 0%, #04241f 60%, #041a17 100%);
  margin-bottom: var(--s5);
  overflow: hidden;
}

.bj__row { margin-bottom: var(--s5); }
.bj__row:last-child { margin-bottom: 0; }
.bj__row-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.bj__row-head span { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(167, 243, 208, .8); }
.bj__score {
  min-width: 40px;
  padding: .1rem .6rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(16, 185, 129, .4);
  background: rgba(16, 185, 129, .14);
  font-family: var(--font-d);
  font-size: .84rem;
  color: #6ee7b7;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bj__hand { display: flex; flex-wrap: wrap; gap: var(--s2); min-height: 96px; }

.bj__card {
  position: relative;
  width: 62px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .4rem .45rem;
  border-radius: 9px;
  background: linear-gradient(160deg, #fdfdff, #e7e9f5);
  color: #1a1a2e;
  font-family: var(--font-b);
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  animation: card-deal 380ms var(--ease) backwards;
  animation-delay: var(--cd, 0ms);
}
.bj__card--red { color: #dc2626; }
.bj__card--back {
  background: repeating-linear-gradient(45deg, #4c1d95 0 6px, #6d28d9 6px 12px);
  color: rgba(255, 255, 255, .7);
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(167, 139, 250, .5);
}
.bj__card--back::after { content: "◆"; font-size: 1.4rem; }

@keyframes card-deal {
  from { opacity: 0; transform: translateY(-26px) rotateY(75deg) scale(.9); }
}

.bj__card-v { font-size: .95rem; line-height: 1; }
.bj__card-s { font-size: 1.15rem; line-height: 1; align-self: flex-end; }

.bj__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .9rem;
  border-radius: var(--r-full);
  font-family: var(--font-d);
  font-size: .82rem;
  border: 1px solid;
  animation: panel-in var(--t) var(--ease);
}
.bj__badge--win { color: #4ade80; border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .12); }
.bj__badge--lose,
.bj__badge--bust { color: #fb7185; border-color: rgba(244, 63, 94, .4); background: rgba(244, 63, 94, .12); }
.bj__badge--push { color: var(--gold); border-color: rgba(232, 196, 108, .4); background: rgba(201, 162, 39, .12); }

.bj__pop {
  position: absolute;
  bottom: 14%;
  font-size: 1.6rem;
  pointer-events: none;
  animation: pop-up 1.4s var(--ease) forwards;
}
@keyframes pop-up {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  20% { opacity: 1; transform: translateY(-16px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-90px) scale(1); }
}

@media (max-width: 480px) {
  .bj__card { width: 52px; height: 76px; }
  .game__head { padding: var(--s3) var(--s4); }
  .game__body { padding: var(--s4); }
}