:root {
  --gold: #f0c14b;
  --gold2: #ffe08a;
  --wood: #7a4e1e;
  --ink: #1a1308;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  font-family: "Cairo", sans-serif;
  color: #fff;
}

.hidden { display: none !important; }
button, select { font-family: inherit; cursor: pointer; }

.splash {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(40,120,200,.25), rgba(12,50,90,.45)),
    url("../img/sky-cartoon.webp") center top / cover;
  padding: 24px;
}

.splash-card {
  width: min(640px, 100%);
  text-align: center;
  background: linear-gradient(180deg, rgba(24,42,70,.92), rgba(12,22,40,.96));
  border: 3px solid var(--gold);
  border-radius: 28px;
  padding: 28px 26px 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 0 40px rgba(240,193,75,.12);
}

.splash-heroes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 8px;
}
.splash-heroes img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
  background: #14243a;
  margin: 0 -8px;
}

.kicker { color: var(--gold); letter-spacing: .18em; margin: 0; font-size: 12px; }
.splash h1 {
  margin: 4px 0 8px;
  font-size: 46px;
  color: var(--gold2);
  text-shadow: 0 4px 0 #8a5a12;
}
.lead { color: #d9e4f2; line-height: 1.7; }
.quick-play {
  margin: 16px 0 8px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(240,193,75,.35);
  border-radius: 16px;
  background: rgba(8,20,36,.5);
}
.quick-play .field { margin-top: 0; }
.quick-note {
  margin: 10px 0 0;
  color: #9fd7ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}
.auth-separator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  font-weight: 900;
  margin: 10px 0 4px;
}
.auth-separator::before,
.auth-separator::after {
  content: "";
  height: 1px;
  background: rgba(240,193,75,.25);
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0 10px;
}
.auth-tab {
  border: 2px solid rgba(240,193,75,.35);
  background: rgba(8,20,36,.7);
  color: #d9e4f2;
  border-radius: 14px;
  padding: 9px 10px;
  font-weight: 800;
}
.auth-tab.on {
  background: linear-gradient(180deg, #ffe7a3, #e2a62a);
  color: #3a2500;
  border-color: #f0c14b;
}
.auth-msg {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,80,80,.15);
  color: #ffd0d0;
  font-weight: 800;
}
.auth-msg.ok {
  background: rgba(80,180,120,.18);
  color: #c8f7c5;
}
.otp-hint { color: #9fd7ff; font-weight: 800; margin: 8px 0 0; }
.mail-steps {
  text-align: right;
  color: #d9e4f2;
  line-height: 1.8;
  padding-right: 18px;
  font-size: 14px;
}
#otpResend, #mailSetupBack { width: 100%; margin-top: 8px; }
#otpCode {
  text-align: center;
  letter-spacing: .4em;
  font-size: 28px;
  font-weight: 900;
}
.auth-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: right;
  background: rgba(8,20,36,.7);
  border: 1px solid rgba(240,193,75,.35);
  border-radius: 16px;
  padding: 10px 12px;
  margin: 12px 0 4px;
}
.auth-user b { display: block; color: #ffe08a; }
.auth-user small { display: block; color: #9fd7ff; font-size: 12px; }
.auth-user .ghost { width: auto; padding: 8px 12px; }
#otpBack { width: 100%; margin-top: 8px; }
.field { display: grid; gap: 6px; text-align: right; margin: 12px 0; color: #d9e4f2; }
select, input {
  background: #0d1b2c;
  color: #fff;
  border: 1px solid rgba(240,193,75,.4);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
}
button.gold {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 13px 16px;
  font-size: 20px;
  font-weight: 900;
  color: #3a2500;
  background: linear-gradient(180deg, #ffe7a3, #e2a62a 55%, #c48410);
  box-shadow: 0 6px 0 #8a5a12, 0 10px 18px rgba(0,0,0,.35);
}
button.gold:active { transform: translateY(3px); box-shadow: 0 3px 0 #8a5a12; }
button.ghost {
  border: 2px solid rgba(255,255,255,.25);
  background: rgba(8,20,36,.7);
  color: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
}
button:disabled { opacity: .4; cursor: default; }

.table-screen {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(80,180,255,.15), rgba(20,80,140,.25)),
    url("../img/sky-cartoon.webp") center top / cover;
  overflow: hidden;
}

.hud-players {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  direction: ltr;
}
.phud { direction: rtl; }
.hud-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}
.hud-col.left { align-items: flex-start; }
.hud-col.right { align-items: flex-end; }

.round-chip {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  background: linear-gradient(180deg, #ffe27a, #e0a21a);
  color: #3a2500;
  font-weight: 900;
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 4px 0 #8a5a12, 0 8px 14px rgba(0,0,0,.3);
}

.phud {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, #2d5a8a, #163252);
  border: 3px solid #f0c14b;
  border-radius: 22px;
  padding: 4px 16px 4px 4px;
  box-shadow: 0 7px 0 #8a5a12, 0 12px 16px rgba(0,0,0,.3);
}
.phud.active {
  border-color: #fff6c0;
  box-shadow: 0 0 0 3px rgba(255,230,120,.75), 0 7px 0 #8a5a12;
}
.phud.lead { box-shadow: 0 0 0 2px #ffe08a, 0 7px 0 #8a5a12; }
.phud.active.lead {
  box-shadow: 0 0 0 3px rgba(255,230,120,.75), 0 7px 0 #8a5a12;
}
.phud.dead { opacity: .4; }
.phud.cash-out { animation: hudShake .45s ease; }
.phud.cash-in { animation: hudGlow .55s ease; }
.phud.lvl-up { animation: hudLevel 1.1s ease; }
.char-lv { color: #c8f7c5 !important; font-size: 11px !important; }
.xp-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(0,0,0,.35);
  overflow: hidden;
  margin: 3px 0 4px;
}
.xp-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffe08a, #7dffb0);
  border-radius: 99px;
}
.hud-cash-pop {
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  color: #7dffb0;
  font-style: normal;
  font-weight: 900;
  font-size: 16px;
  text-shadow: 0 2px 0 #063;
  pointer-events: none;
  animation: floatUp .95s ease-out forwards;
  z-index: 5;
}
.hud-cash-pop.down { color: #ff8b8b; text-shadow: 0 2px 0 #400; }
@keyframes hudShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes hudGlow {
  50% { box-shadow: 0 0 0 3px rgba(125,255,176,.75), 0 7px 0 #8a5a12; }
}
@keyframes hudLevel {
  0%, 100% { filter: none; }
  40% { filter: brightness(1.25); box-shadow: 0 0 0 4px rgba(255,224,138,.85), 0 7px 0 #8a5a12; }
}
.phud img {
  width: 70px;
  height: 70px;
  margin-top: -16px;
  margin-bottom: -8px;
  border-radius: 16px;
  object-fit: cover;
  border: 3px solid var(--pc, var(--gold));
  background: #123;
  box-shadow: 0 6px 0 rgba(0,0,0,.25);
}
.phud-meta b { display: block; font-size: 16px; }
.phud small { color: #ffe08a; font-weight: 800; }
.cash-coin::before { content: "⬤ "; color: #ffd24a; }

.stage {
  height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  perspective: 1600px;
  perspective-origin: 50% 48%;
  padding: 96px 10px 136px;
}

.board {
  width: min(calc(100vh - 252px), calc(100vw - 28px));
  max-width: 100%;
  max-height: calc(100vh - 252px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  overflow: visible;
  position: relative;
  direction: ltr;
  transform: rotateX(10deg);
  transform-style: preserve-3d;
  background: #3e2712;
  padding: 6px;
  border-radius: 14px;
  box-shadow:
    0 18px 0 #241408,
    0 28px 40px rgba(0,0,0,.4),
    inset 0 0 0 7px #f2c44d,
    inset 0 0 0 13px #6b4016;
}

.center,
.tile-3d,
.plate,
.fest,
.olymp,
.banner,
.cash-float {
  direction: rtl;
}

.center {
  grid-column: 2 / 9;
  grid-row: 2 / 9;
  margin: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), transparent 55%),
    url("../img/board-center.webp") center/cover;
  box-shadow:
    inset 0 0 0 8px #f2c44d,
    inset 0 0 0 14px #6b4016,
    0 10px 18px rgba(0,0,0,.28);
  display: grid;
  place-items: end center;
  padding-bottom: 14%;
  transform: translateZ(10px);
  overflow: hidden;
}
.center .banner {
  background: linear-gradient(180deg, rgba(18,36,62,.88), rgba(10,20,38,.92));
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 4px 12px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  z-index: 2;
}
.center h2 { display: none; }
.center p { margin: 0; color: #ffe08a; font-size: 14px; font-weight: 800; }

.tile {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  transform-style: preserve-3d;
}
.tile-3d {
  position: absolute;
  inset: 1px 2px 12px 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8e6, #e6cc96);
  box-shadow:
    0 12px 0 #5a3510,
    0 16px 14px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.8);
  overflow: visible;
  color: var(--ink);
  text-align: center;
  font-weight: 900;
  font-size: clamp(8px, 1.1vh, 12px);
}
.tile-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.38), transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.tile:hover .tile-3d { filter: brightness(1.08); }
.tile.owner-mark .tile-3d { box-shadow: 0 10px 0 #6d4518, 0 0 0 3px var(--owner), 0 14px 12px rgba(0,0,0,.28); }
.tile.wrecking .iso-build img,
.tile.wrecking .ico-img {
  animation: wreckSmash .9s ease-in forwards;
}
.tile.wrecking .tile-3d {
  animation: wreckShake .35s linear 3;
}
.wreck-burst {
  position: absolute;
  inset: 10% 10% 20%;
  z-index: 12;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,220,120,.85), transparent 55%),
    radial-gradient(circle at 30% 40%, rgba(180,80,20,.7), transparent 50%);
  animation: wreckBoom .8s ease-out forwards;
}
@keyframes wreckShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-2deg); }
  75% { transform: translateX(3px) rotate(2deg); }
}
@keyframes wreckSmash {
  0% { transform: none; filter: none; opacity: 1; }
  55% { transform: translateY(8px) rotate(12deg) scale(.85); filter: brightness(.7); }
  100% { transform: translateY(28px) rotate(28deg) scale(.2); opacity: 0; }
}
@keyframes wreckBoom {
  0% { opacity: 1; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.8); }
}
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.fx-coin {
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff6c0, #e2a62a 45%, #8a5a12);
  box-shadow: 0 2px 0 #6a4010;
  animation: coinFly .75s ease-in forwards;
  z-index: 91;
}
@keyframes coinFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: .15; }
}
.tile.here .tile-3d {
  outline: 3px solid #fff38a;
  animation: hereglow 1.1s ease-in-out infinite;
}
.tile.has-pawn,
.tile.here {
  z-index: 80 !important;
}
@keyframes hereglow {
  50% { box-shadow: 0 10px 0 #6d4518, 0 0 18px #ffe08a; }
}

.group-bar {
  position: absolute;
  z-index: 5;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.tile.side-bottom .group-bar { left: 7%; right: 7%; bottom: 0; height: 16%; border-radius: 0 0 6px 6px; }
.tile.side-top .group-bar { left: 7%; right: 7%; top: 0; height: 16%; border-radius: 6px 6px 0 0; }
.tile.side-left .group-bar { top: 7%; bottom: 7%; left: 0; width: 16%; border-radius: 6px 0 0 6px; }
.tile.side-right .group-bar { top: 7%; bottom: 7%; right: 0; width: 16%; border-radius: 0 6px 6px 0; }

.plate {
  position: absolute;
  z-index: 8;
  background: transparent;
  border-radius: 0;
  padding: 0 2px;
  box-shadow: none;
  line-height: 1.05;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.plate b {
  display: block;
  font-size: clamp(7px, 1.05vh, 11px);
  color: #1a1308;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plate span {
  display: block;
  font-size: clamp(6px, .85vh, 9px);
  color: #3a2508;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile.side-bottom .plate { bottom: 0; top: auto; left: 28%; right: 4%; height: 16%; }
.tile.side-top .plate { top: 0; bottom: auto; left: 28%; right: 4%; height: 16%; }
.tile.side-left .plate {
  left: 20%;
  right: 6%;
  top: auto;
  bottom: 5%;
  width: auto;
  height: auto;
  writing-mode: horizontal-tb;
  text-align: center;
}
.tile.side-right .plate {
  left: 6%;
  right: 20%;
  top: auto;
  bottom: 5%;
  width: auto;
  height: auto;
  text-align: center;
}
.tile.tourist.side-left .plate,
.tile.tourist.side-right .plate {
  left: 8%;
  right: 8%;
}
.tile.side-corner .plate { left: 8%; right: 8%; bottom: 6%; top: auto; height: auto; }

.tile.start .tile-3d { background: linear-gradient(180deg, #fff4a8, #f0b400); }
.tile.jail .tile-3d { background: linear-gradient(180deg, #b7e9ff, #2f8ec0); color: #072033; }
.tile.olympic .tile-3d { background: linear-gradient(180deg, #c6ffd8, #19a85e); }
.tile.travel .tile-3d { background: linear-gradient(180deg, #d4e6ff, #3d78ef); color: #071428; }
.tile.fortune .tile-3d { background: linear-gradient(180deg, #ffe9a0, #f0a000); }
.tile.tax .tile-3d { background: linear-gradient(180deg, #ffd0b8, #e25a38); }
.tile.bonus .tile-3d { background: linear-gradient(180deg, #f0d0ff, #b24ae0); }
.tile.tourist .tile-3d { background: linear-gradient(180deg, #d4fbff, #2db8d8); }

.ico-img {
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  height: 78%;
  width: 96%;
  object-fit: contain;
  filter: drop-shadow(0 8px 3px rgba(0,0,0,.35));
  z-index: 3;
  pointer-events: none;
  background: transparent;
}
.tile.corner .ico-img { height: 82%; top: 0; width: 98%; }
.tile.tourist .ico-img { height: 80%; top: 0; }

.iso-lot {
  position: absolute;
  width: 70%;
  height: 42%;
  left: 15%;
  top: 32%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 6px 2px rgba(0,0,0,.28));
}
.tile.side-bottom .iso-lot { top: 36%; }
.tile.side-top .iso-lot { top: 22%; }
.tile.side-left .iso-lot, .tile.side-right .iso-lot { width: 58%; left: 22%; height: 46%; top: 26%; }
.iso-lot .tp,
.iso-lot .lf,
.iso-lot .rt {
  position: absolute;
  display: block;
}
.iso-lot .tp {
  left: 18%;
  right: 18%;
  top: 0;
  height: 46%;
  background: var(--gc, #8fd63a);
  transform: skewX(-28deg) rotateX(0);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.iso-lot .lf {
  left: 8%;
  width: 42%;
  top: 28%;
  height: 62%;
  background: color-mix(in srgb, var(--gc, #8fd63a) 70%, #000 30%);
  transform: skewY(28deg);
  border-radius: 0 0 0 4px;
}
.iso-lot .rt {
  right: 8%;
  width: 42%;
  top: 28%;
  height: 62%;
  background: color-mix(in srgb, var(--gc, #8fd63a) 82%, #fff 18%);
  transform: skewY(-28deg);
  border-radius: 0 0 4px 0;
}
.iso-lot.owned .tp {
  background: color-mix(in srgb, var(--owner, var(--gc, #8fd63a)) 82%, #fff 18%);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px color-mix(in srgb, var(--owner, #fff) 55%, transparent);
}
.iso-lot.owned .lf { background: color-mix(in srgb, var(--owner, var(--gc, #8fd63a)) 72%, #000 28%); }
.iso-lot.owned .rt { background: color-mix(in srgb, var(--owner, var(--gc, #8fd63a)) 88%, #fff 12%); }

.iso-build {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.tile.side-bottom .iso-build { left: 8%; right: 8%; bottom: 18%; top: 2%; height: auto; }
.tile.side-top .iso-build { left: 8%; right: 8%; top: 18%; bottom: 2%; height: auto; }
.tile.side-left .iso-build { left: 18%; right: 4%; top: 6%; bottom: 18%; }
.tile.side-right .iso-build { left: 4%; right: 18%; top: 6%; bottom: 18%; }
.iso-build img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter:
    drop-shadow(0 8px 3px rgba(0,0,0,.35))
    drop-shadow(0 0 8px color-mix(in srgb, var(--owner, #fff) 75%, transparent));
}
.iso-build.land img { transform: none; }
.iso-build.hot img { transform: none; }

.fest {
  position: absolute;
  width: auto;
  left: auto;
  right: 4%;
  background: linear-gradient(180deg, #ff6b6b, #c40d0d);
  color: #fff;
  font-size: 7px;
  font-weight: 900;
  z-index: 9;
  border-radius: 4px;
  box-shadow: 0 2px 0 #6a0000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 1px 5px 1px 3px;
  pointer-events: none;
}
.fest img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.tile.side-bottom .fest { top: auto; bottom: 1px; left: 3%; right: auto; }
.tile.side-top .fest { top: 1px; bottom: auto; left: 3%; right: auto; }
.tile.side-left .fest { top: 4%; left: auto; right: 4%; }
.tile.side-right .fest { top: 4%; right: 22%; left: auto; }
.tile.side-corner .fest { top: 4%; right: 8%; left: auto; }
.fest b { color: #ffe08a; }

.tile.monopoly .tile-3d {
  box-shadow:
    0 10px 0 #6d4518,
    0 0 0 3px var(--gc, #ffe08a),
    0 0 16px color-mix(in srgb, var(--gc, #ffe08a) 75%, transparent);
}
.mono-tag {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gc, #ffe08a);
  color: #1a1308;
  font-size: 7px;
  font-weight: 900;
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.tile.side-bottom .mono-tag { top: -7px; }
.tile.side-top .mono-tag { bottom: -7px; top: auto; }
.tile.side-left .mono-tag, .tile.side-right .mono-tag { top: 18%; }
.mono-hint {
  background: rgba(255, 224, 138, .16);
  border: 1px solid rgba(255, 224, 138, .45);
  color: #ffe08a !important;
  border-radius: 10px;
  padding: 6px 8px;
  font-weight: 800;
}

.token-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  pointer-events: none;
  z-index: 130;
  overflow: visible;
}
.token {
  position: absolute;
  width: clamp(34px, 5.6vh, 52px);
  height: clamp(48px, 8.2vh, 76px);
  object-fit: contain;
  object-position: bottom center;
  --tx: -50%;
  --ty: -50%;
  transform: translate(var(--tx), var(--ty));
  filter: drop-shadow(0 6px 2px rgba(0,0,0,.4));
  pointer-events: none;
  will-change: left, top;
  background: transparent;
}
.token.side-top,
.token.side-bottom,
.token.side-left,
.token.side-right {
  --tx: -50%;
  --ty: -50%;
}
.token.me {
  filter: drop-shadow(0 0 7px #ffe08a) drop-shadow(0 10px 4px rgba(0,0,0,.45));
}
.token.hop {
  animation: tokenHop .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes tokenHop {
  0% { transform: translate(var(--tx), var(--ty)) scale(1); }
  38% { transform: translate(var(--tx), calc(var(--ty) - 18px)) scale(1.08); }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); }
}

.cash-float {
  position: absolute;
  transform: translate(-50%, -140%);
  color: #7dffb0;
  font-weight: 900;
  font-size: clamp(14px, 2vh, 20px);
  text-shadow: 0 2px 0 #063, 0 0 10px rgba(0,0,0,.6);
  z-index: 200;
  pointer-events: none;
  animation: floatUp .9s ease-out forwards;
  direction: rtl;
  white-space: nowrap;
}
.cash-float.down { color: #ff8b8b; text-shadow: 0 2px 0 #400, 0 0 10px rgba(0,0,0,.6); }
@keyframes floatUp {
  to { opacity: 0; transform: translate(-50%, -240%); }
}

.popup {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.35);
  z-index: 60;
}
.popup.pick-board {
  inset: auto 0 108px 0;
  top: auto;
  height: auto;
  max-height: 40vh;
  background: transparent;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 10px;
  place-items: unset;
}
.popup.pick-board .pop {
  pointer-events: auto;
  width: min(460px, 92vw);
  max-height: 46vh;
  overflow: auto;
  padding: 12px 14px 12px;
}
.travel-pick {
  max-height: 22vh;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 6px 0 10px;
}
.travel-pick .city-pick-btn { padding: 6px 8px; font-size: 13px; }
.popup.pick-board .pop-icon { width: 56px; height: 56px; font-size: 28px; margin-bottom: 4px; }
.popup.pick-board .pop-icon img { width: 40px; height: 40px; }
.popup.pick-board h3 { font-size: 22px; margin-bottom: 4px; }
.popup.pick-board p { margin-bottom: 8px; font-size: 14px; }
.board.select-tile .tile.pickable {
  cursor: pointer;
}
.board.select-tile .tile.pickable .tile-3d {
  outline: 2px dashed rgba(255,224,138,.85);
  animation: pickpulse 1s ease-in-out infinite;
}
@keyframes pickpulse {
  50% { filter: brightness(1.16); }
}
.pop {
  width: min(520px, 94vw);
  background: linear-gradient(180deg, #214064, #12243a);
  border: 3px solid var(--gold);
  border-radius: 22px;
  padding: 18px 18px 16px;
  text-align: center;
  box-shadow: 0 24px 50px rgba(0,0,0,.45);
}
.pop-sub { color: #ffe08a; font-size: 13px; margin-top: -4px; }
.build-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0 12px;
}
.build-opt {
  border: 2px solid rgba(240,193,75,.45);
  background: rgba(8,20,36,.75);
  color: #fff;
  border-radius: 14px;
  padding: 8px 4px;
  font-weight: 800;
}
.build-opt img { width: 100%; height: 64px; object-fit: contain; display: block; }
.build-opt b { display: block; font-size: 13px; }
.build-opt em { display: block; font-style: normal; color: #9dffc0; font-size: 11px; font-weight: 800; min-height: 1.1em; }
.build-opt span { color: #ffe08a; font-size: 12px; }
.build-opt.on { border-color: #ffe08a; box-shadow: 0 0 0 2px rgba(255,224,138,.45); background: #1b3a62; }
.build-opt.off { opacity: .45; }
.build-opt span { min-height: 1.2em; }
.city-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  margin: 8px 0 12px;
}
.city-pick-btn {
  border: 2px solid rgba(240,193,75,.45);
  background: rgba(8,20,36,.8);
  color: #fff;
  border-radius: 12px;
  padding: 8px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-align: right;
}
.city-pick-btn .pick-ico {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  background: transparent;
}
.city-pick-btn .pick-txt {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #fff;
}
.city-pick-btn b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
.city-pick-btn .pick-txt span {
  display: block;
  color: #ffe08a;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.city-pick-btn:hover { border-color: #ffe08a; }
.luck-card {
  background: linear-gradient(180deg, #f6d36a, #c48a14);
  color: #3a2500;
  border-radius: 18px;
  padding: 16px 14px;
}
.luck-card em { display: block; font-style: normal; font-weight: 900; }
.luck-card h3 { color: #3a2500; }
.luck-card p { color: #4a3208; }
.luck-card img.luck-ico {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.25));
}
.chest-row { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.chest {
  width: 92px;
  height: 108px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 900;
  border: 3px solid var(--gold);
  background: linear-gradient(180deg, #2a4a72, #12243a);
  color: #ffe08a;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.chest img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 6px 3px rgba(0,0,0,.4));
}
.chest span { font-size: 14px; }
.olymp {
  position: absolute; top: 12px; left: 6%; right: 6%;
  background: linear-gradient(180deg, #7dffb0, #12a85e);
  color: #063; font-size: 8px; font-weight: 900; z-index: 7;
  border-radius: 0 0 8px 8px;
}
.phud-meta small { display: block; }
.phud-meta .laps { color: #9fd7ff; font-size: 11px; }
.phud-meta .worth { color: #c8f7c5; font-size: 11px; }
.phud-meta .debt { color: #ffb4b4; font-size: 11px; }
.phud-dots { display: flex; gap: 4px; margin-top: 3px; }
.phud-dots s { width: 10px; height: 10px; border-radius: 50%; display: block; }
.phud-cards { display: block; font-size: 10px; color: #b8d4f0; font-style: normal; }
.pop h3 { margin: 0 0 8px; color: var(--gold2); font-size: 24px; }
.pop p { margin: 0 0 12px; color: #dce7f5; }
.pop .actions { display: grid; gap: 8px; }

.hud-dice {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 40;
}
.hud-hero {
  width: 92px;
  height: 128px;
  object-fit: contain;
  margin-top: -54px;
  margin-bottom: -8px;
  filter: drop-shadow(0 8px 4px rgba(0,0,0,.4));
  pointer-events: none;
}
.ticker {
  position: absolute;
  bottom: 14px;
  left: 10px;
  z-index: 11;
  width: min(230px, 24vw);
  max-height: 88px;
  overflow: auto;
  background: rgba(8,18,32,.72);
  border: 1px solid rgba(240,193,75,.35);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #e8eef7;
}
.ticker div { border-bottom: 1px solid rgba(255,255,255,.06); padding: 2px 0; }

.dice-hud {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  direction: ltr;
  background: linear-gradient(180deg, rgba(28,52,86,.96), rgba(10,20,38,.98));
  border: 3px solid var(--gold);
  border-radius: 40px;
  padding: 6px 12px 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 0 18px rgba(240,193,75,.12);
}
.gauge-labels { direction: rtl; }
.side-items { direction: rtl; }
.gauge-wrap { width: 180px; }
.gauge {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 22px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #fff;
}
.gauge b { display: block; cursor: pointer; }
.gauge b:nth-child(1) { background: linear-gradient(#7dffb0, #12c45e); }
.gauge b:nth-child(2) { background: linear-gradient(#ffe57a, #ffb000); }
.gauge b:nth-child(3) { background: linear-gradient(#ff8d8d, #ff3b3b); }
.gauge b.on { box-shadow: inset 0 0 0 3px #fff; }
.gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-top: 4px;
  color: #ffe08a;
  font-weight: 800;
}

.dice-pair { display: flex; gap: 8px; }
.die {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, #fff, #ececec 60%, #c8c8c8);
  box-shadow: 4px 6px 0 #8a8a8a, 0 10px 12px rgba(0,0,0,.3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 9px;
  gap: 3px;
}
.die.rolling { animation: toss .1s linear infinite; }
@keyframes toss {
  0% { transform: rotateX(0deg) rotateY(0deg) scale(1); }
  50% { transform: rotateX(28deg) rotateY(-22deg) scale(1.1); }
  100% { transform: rotateX(0deg) rotateY(12deg) scale(1); }
}
.pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1b1b1b;
  margin: auto;
  opacity: 0;
}
.die[data-n="1"] .p5 { opacity: 1; }
.die[data-n="2"] .p1, .die[data-n="2"] .p9 { opacity: 1; }
.die[data-n="3"] .p1, .die[data-n="3"] .p5, .die[data-n="3"] .p9 { opacity: 1; }
.die[data-n="4"] .p1, .die[data-n="4"] .p3, .die[data-n="4"] .p7, .die[data-n="4"] .p9 { opacity: 1; }
.die[data-n="5"] .p1, .die[data-n="5"] .p3, .die[data-n="5"] .p5, .die[data-n="5"] .p7, .die[data-n="5"] .p9 { opacity: 1; }
.die[data-n="6"] .p1, .die[data-n="6"] .p3, .die[data-n="6"] .p4, .die[data-n="6"] .p6, .die[data-n="6"] .p7, .die[data-n="6"] .p9 { opacity: 1; }

.roll-orb {
  width: 74px;
  height: 74px;
  border: 3px solid #fff3c4;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 900;
  color: #3a2500;
  background: radial-gradient(circle at 35% 30%, #fff0b0, #f0b429 46%, #c47a0c);
  box-shadow: 0 10px 0 #8a5a12, 0 16px 18px rgba(0,0,0,.35);
}
.roll-orb:not(:disabled):hover { filter: brightness(1.06); }
.roll-orb:not(:disabled):active { transform: translateY(5px); box-shadow: 0 5px 0 #8a5a12; }

.side-items { display: grid; gap: 8px; }
.item-btn {
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #6ab0ff, #1d5fd0);
  box-shadow: 0 5px 0 #163a7a;
}
.item-btn.even { background: linear-gradient(180deg, #ff9ad2, #d23080); box-shadow: 0 5px 0 #7a2148; }
.item-btn.risk {
  background: linear-gradient(180deg, #ffe08a, #d48a12);
  color: #3a2500;
  box-shadow: 0 5px 0 #8a5a12;
}
.item-btn.risk.on { outline: 2px solid #fff38a; filter: brightness(1.08); }
.bank-loan {
  min-width: 110px;
  color: #ffe08a !important;
  border-color: rgba(255,224,138,.55) !important;
}

.book-btn {
  position: absolute;
  top: 12px;
  left: calc(50% + 108px);
  right: auto;
  z-index: 16;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: linear-gradient(180deg, #214064, #12243a);
  color: #ffe08a;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 6px 0 #8a5a12;
}
.quit-btn {
  position: absolute;
  top: 12px;
  left: calc(50% - 168px);
  right: auto;
  z-index: 16;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 3px solid var(--gold);
  background: linear-gradient(180deg, #214064, #12243a);
  color: #ffe08a;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 6px 0 #8a5a12;
}
.rulebook {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  padding: 16px;
}
.book-card {
  width: min(720px, 96vw);
  max-height: 86vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  background: linear-gradient(180deg, #214064, #12243a);
  border: 3px solid var(--gold);
  border-radius: 22px;
  padding: 16px;
  text-align: center;
}
.book-card p { color: #dce7f5; font-size: 14px; margin: 4px 0; }
.book-scroll { overflow: auto; margin: 10px 0; }
.book-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.book-card th, .book-card td { border-bottom: 1px solid rgba(255,255,255,.08); padding: 6px 4px; }
.book-card th { color: #ffe08a; }
.pop-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 8px;
  border-radius: 24px;
  background: #eff5ff;
  display: grid;
  place-items: center;
  font-size: 40px;
  color: #c40d0d;
}
.pop-icon img { width: 64px; height: 64px; object-fit: contain; }
.pop-icon.warn { background: #fff2f1; }
.toll { color: #ff8b8b; }
.jail-chip {
  position: absolute;
  top: -10px;
  left: 8px;
  background: #123;
  border: 2px solid #ffe08a;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}
.token.flying {
  filter: drop-shadow(0 0 10px #9fd7ff) drop-shadow(0 12px 4px rgba(0,0,0,.45));
  z-index: 160 !important;
}
.podium-row .rank {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eef2f8;
  color: #1f2a44;
  font-weight: 900;
}
.podium-row.first .rank { background: #ffd23f; }
.podium-row small { display: block; color: #9fd7ff; font-size: 11px; }

.lobby-seats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 16px;
}
.seat {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  text-align: right;
  background: rgba(8,20,36,.7);
  border: 1px solid rgba(240,193,75,.35);
  border-radius: 14px;
  padding: 6px 8px;
}
.seat img {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f0c14b;
}
.seat b { font-size: 13px; }
.seat span { font-size: 11px; color: #9fd7ff; }
.seat.ready { border-color: #7dffb0; }
.mode-hint {
  margin: -4px 0 10px;
  color: #c8f7c5;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}
.char-pick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
}
.char-card {
  border: 2px solid rgba(240,193,75,.35);
  background: rgba(8,20,36,.75);
  color: #fff;
  border-radius: 14px;
  padding: 6px 4px 8px;
  font-weight: 800;
}
.char-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--pc, #f0c14b);
  background: #14243a;
}
.char-card b { display: block; font-size: 12px; margin-top: 4px; }
.char-card span { display: block; font-size: 10px; color: #9fd7ff; }
.char-card.on {
  border-color: var(--pc, #ffe08a);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc, #ffe08a) 55%, transparent);
  background: #1b3a62;
}

.clock {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(#ffe08a calc(var(--t, 100) * 1%), #1a2a44 0);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 16px rgba(0,0,0,.35);
  pointer-events: none;
}
.clock i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #12243a;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
  color: #ffe08a;
}
.clock.urgent { background: conic-gradient(#ff6b6b calc(var(--t, 100) * 1%), #1a2a44 0); }
.clock.urgent i { color: #ffb4b4; }

.turn-flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(10,20,38,.45), transparent 70%);
}
.turn-flash p {
  margin: 0;
  font-size: 42px;
  font-weight: 900;
  color: #ffe08a;
  text-shadow: 0 4px 0 #8a5a12, 0 10px 24px rgba(0,0,0,.5);
  animation: flashIn 1.4s ease-out;
}
@keyframes flashIn {
  0% { transform: scale(.6); opacity: 0; }
  25% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.tip {
  position: absolute;
  bottom: 128px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  width: min(360px, 90vw);
  background: linear-gradient(180deg, #214064, #12243a);
  border: 3px solid var(--gold);
  border-radius: 18px;
  padding: 14px 16px;
  text-align: center;
  box-shadow: 0 16px 32px rgba(0,0,0,.4);
}
.tip p { margin: 0 0 10px; color: #e8eef7; font-weight: 800; }

.podium { display: grid; gap: 8px; margin: 12px 0 16px; text-align: right; }
.podium-row {
  display: grid;
  grid-template-columns: 36px 44px 1fr auto;
  gap: 8px;
  align-items: center;
  background: rgba(8,20,36,.65);
  border-radius: 12px;
  padding: 6px 10px;
}
.podium-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.podium-row em { color: #ffe08a; font-style: normal; font-weight: 800; }
.podium-row.first { border: 2px solid #ffe08a; }

@media (max-width: 900px) {
  .board { width: min(calc(100vh - 240px), calc(100vw - 16px)); }
  .phud { min-width: 160px; }
  .ticker { display: none; }
  .phud img { width: 56px; height: 56px; }
  .turn-flash p { font-size: 28px; }
}

.honor { color: #ffe08a !important; font-weight: 900; }
.round-chip.event {
  background: linear-gradient(180deg, #ffd36a, #ff7a3d);
  color: #3a1200;
}
.tile.sieged .tile-3d { outline: 2px dashed #ff6b6b; filter: grayscale(.15) brightness(.92); }
.tile.port-shut .tile-3d { filter: saturate(.4); }
.board.golden .center .banner { background: linear-gradient(180deg, #ffe08a, #f0c14b); color: #3a2500; }
.token-honor {
  position: absolute;
  transform: translate(-50%, -118%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 900;
  color: #ffe08a;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.victory { position: relative; overflow: hidden; }
.vic-hero img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  margin: 0 auto 6px;
  display: block;
  box-shadow: 0 0 24px rgba(255,224,138,.55);
}
.vic-hero em { color: #ffe08a; font-style: normal; font-weight: 900; }
.vic-stats {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  color: #dce7f5;
  font-weight: 800;
}
.vic-stats li { margin: 4px 0; }
.vic-reward { color: #9dffc0 !important; font-weight: 900; }
.vic-fire {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,80,80,.35), transparent 18%),
    radial-gradient(circle at 80% 20%, rgba(255,220,80,.35), transparent 16%),
    radial-gradient(circle at 50% 80%, rgba(80,180,255,.3), transparent 20%);
  animation: vicGlow 1.6s ease-in-out infinite;
}
@keyframes vicGlow {
  50% { opacity: .55; transform: scale(1.05); }
}
.season-chip {
  margin: 0 0 10px;
  color: #ffe08a;
  font-weight: 900;
  font-size: 13px;
}
.lobby-hub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0 0 12px;
}
.hub-tab {
  border: 2px solid rgba(240,193,75,.35);
  background: rgba(8,20,36,.7);
  color: #d9e4f2;
  border-radius: 12px;
  padding: 8px 4px;
  font-weight: 800;
  font-size: 13px;
}
.hub-tab.on {
  background: linear-gradient(180deg, #ffe7a3, #e2a62a);
  color: #3a2500;
  border-color: #ffe08a;
}
.isle-gold { color: #ffe08a; font-weight: 900; margin: 6px 0 10px; }
.isle-h { color: var(--gold2); font-size: 18px; margin: 16px 0 8px; }
.isle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.isle-card {
  border: 2px solid rgba(240,193,75,.4);
  background: rgba(8,20,36,.8);
  color: #fff;
  border-radius: 14px;
  padding: 8px;
  font-weight: 800;
  text-align: center;
}
.isle-card img { width: 48px; height: 48px; object-fit: contain; display: block; margin: 0 auto 4px; background: transparent; }
.isle-card span, .isle-card small { display: block; color: #9fd7ff; font-size: 11px; }
.isle-card em { display: block; color: #9dffc0; font-style: normal; font-size: 12px; }
.isle-card:disabled { opacity: .45; }
.hall-list { list-style: none; padding: 0; margin: 0 0 12px; text-align: right; }
.hall-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 800;
}
.hall-list span { color: #ffe08a; }
.story-card {
  text-align: right;
  background: rgba(8,20,36,.75);
  border: 2px solid rgba(240,193,75,.35);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}
.story-card b { color: #ffe08a; }
.story-card span { display: block; color: #9fd7ff; font-size: 13px; }
.story-card p { color: #dce7f5; font-size: 13px; }
.story-card.locked { opacity: .5; }
.story-card.done { border-color: #7dffb0; }
.hub-panel { text-align: right; }

/* ===== v40 layout / readability pass ===== */
:root {
  --panel: rgba(12, 25, 44, .94);
  --panel-soft: rgba(18, 39, 65, .86);
  --screen-pad: clamp(12px, 2vw, 28px);
}

.splash-card {
  transition: width .22s ease, max-width .22s ease;
}

.splash-card.lobby-open {
  width: min(1180px, calc(100vw - 2 * var(--screen-pad)));
  max-height: calc(100vh - 2 * var(--screen-pad));
  overflow: auto;
  scrollbar-gutter: stable;
}

.splash-card.lobby-open .lead {
  max-width: 820px;
  margin-inline: auto;
}

@media (min-width: 901px) {
  .splash-card.lobby-open #hubPlay {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(310px, .72fr);
    grid-template-rows: auto auto auto auto auto auto auto;
    gap: 10px 22px;
    align-items: start;
    text-align: right;
  }

  .splash-card.lobby-open #hubPlay > .otp-hint {
    grid-column: 1;
    grid-row: 1;
    margin-top: 2px;
  }

  .splash-card.lobby-open #hubPlay > .char-pick {
    grid-column: 1;
    grid-row: 2 / 8;
    margin: 0;
    grid-template-columns: repeat(4, minmax(112px, 1fr));
    align-content: start;
  }

  .splash-card.lobby-open #hubPlay > .match-mode-field { grid-column: 2; grid-row: 1; margin: 0; }
  .splash-card.lobby-open #hubPlay > .mode-hint { grid-column: 2; grid-row: 2; margin: 0; }
  .splash-card.lobby-open #hubPlay > .human-count-field { grid-column: 2; grid-row: 3; margin: 0; }
  .splash-card.lobby-open #hubPlay > .cpu-count-field { grid-column: 2; grid-row: 4; margin: 0; }
  .splash-card.lobby-open #hubPlay > .lobby-seats { grid-column: 2; grid-row: 5; margin: 2px 0 4px; }
  .splash-card.lobby-open #hubPlay > #resumeBtn { grid-column: 2; grid-row: 6; }
  .splash-card.lobby-open #hubPlay > #startBtn { grid-column: 2; grid-row: 7; }

  .splash-card.lobby-open .char-card {
    min-height: 166px;
    padding: 8px;
  }
  .splash-card.lobby-open .char-card b { font-size: 14px; }
  .splash-card.lobby-open .char-card span { font-size: 11px; line-height: 1.45; }
  .splash-card.lobby-open .char-card img { max-height: 122px; }

  .splash-card.lobby-open .hub-panel {
    max-width: 980px;
    margin-inline: auto;
  }
  .splash-card.lobby-open .isle-grid { grid-template-columns: repeat(4, 1fr); }
  .splash-card.lobby-open .story-card { padding: 16px; }
}

.table-screen {
  min-height: 100svh;
}

.stage {
  min-height: 100svh;
  height: 100svh;
  padding: 76px 250px 132px;
}

.board {
  width: min(calc(100svh - 212px), calc(100vw - 540px), 920px);
  max-height: calc(100svh - 212px);
}

.hud-players {
  top: 76px;
  left: 18px;
  right: 18px;
}

.hud-col { width: 220px; }
.phud { width: 100%; min-width: 0; }

.tile-3d { font-size: clamp(9px, 1.12vh, 13px); }
.plate { font-size: clamp(8px, 1vh, 11px); }

.hud-dice {
  bottom: 12px;
  width: min(920px, calc(100vw - 28px));
}

.dice-hud {
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 28px;
  padding: 8px 14px 10px;
  gap: 12px;
}

.side-items {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 7px;
}

.item-btn { padding: 8px 12px; white-space: nowrap; }
.roll-orb { width: 82px; height: 82px; font-size: 22px; flex: 0 0 auto; }
.bank-loan { min-width: 100px; }

@media (max-width: 1300px) {
  .stage { padding-inline: 18px; padding-top: 98px; }
  .board {
    width: min(calc(100svh - 238px), calc(100vw - 24px), 820px);
    max-height: calc(100svh - 238px);
  }
  .hud-players { top: 8px; }
  .hud-col { width: auto; }
  .phud { width: auto; min-width: 190px; }
}

@media (max-width: 900px) {
  .splash { padding: 10px; align-items: start; }
  .splash-card,
  .splash-card.lobby-open {
    width: 100%;
    max-height: none;
    border-radius: 20px;
    padding: 18px 14px 24px;
  }
  .splash h1 { font-size: clamp(32px, 10vw, 44px); }
  .splash-heroes img { width: 58px; height: 58px; }
  .char-pick { grid-template-columns: repeat(2, 1fr); }
  .isle-grid { grid-template-columns: repeat(2, 1fr); }
  .lobby-hub { position: sticky; top: 0; z-index: 5; background: rgba(15,31,52,.94); padding: 6px 0; }

  .stage { padding: 112px 6px 154px; }
  .board {
    width: min(calc(100svh - 278px), calc(100vw - 12px));
    max-height: calc(100svh - 278px);
    transform: rotateX(7deg);
  }
  .hud-players { left: 6px; right: 6px; top: 48px; gap: 6px; }
  .hud-col { gap: 4px; max-width: 46vw; }
  .phud { min-width: 0; width: min(46vw, 188px); border-width: 2px; border-radius: 14px; padding: 3px 8px 3px 3px; gap: 5px; }
  .phud img { width: 42px; height: 42px; margin-top: -8px; margin-bottom: -4px; border-radius: 10px; }
  .phud-meta b { font-size: 11px; }
  .phud small, .phud-meta .laps, .phud-meta .worth, .phud-meta .debt { font-size: 8px; }
  .phud-cards, .xp-bar, .phud-dots { display: none; }
  .round-chip { top: 6px; font-size: 11px; padding: 5px 10px; }
  .book-btn { top: 5px; left: calc(50% + 92px); width: 34px; height: 34px; font-size: 17px; }
  .quit-btn { top: 5px; left: calc(50% - 145px); height: 34px; font-size: 11px; }

  .hud-dice { width: calc(100vw - 12px); bottom: 6px; }
  .dice-hud { flex-wrap: wrap; gap: 7px; border-radius: 18px; padding: 7px; }
  .roll-orb { width: 62px; height: 62px; font-size: 17px; order: 1; }
  .dice-pair { order: 2; }
  .die { width: 42px; height: 42px; padding: 7px; }
  .gauge-wrap { width: 130px; order: 3; }
  .side-items { width: 100%; grid-template-columns: repeat(3, 1fr); order: 4; }
  .side-items .item-btn { padding: 7px 4px; font-size: 11px; }
  .dice-hud > .ghost { order: 5; padding: 7px 8px; font-size: 11px; }
  .ticker { display: none; }
}

@media (max-height: 700px) and (orientation: landscape) {
  .stage { padding-top: 60px; padding-bottom: 104px; }
  .board {
    width: min(calc(100svh - 168px), calc(100vw - 420px));
    max-height: calc(100svh - 168px);
  }
  .hud-players { top: 58px; }
  .hud-dice { bottom: 4px; transform: translateX(-50%) scale(.86); transform-origin: center bottom; }
}

/* ================================================================
   Legendary v51 systems
   ================================================================ */
:root{--legend-gold:#ffd45f;--legend-panel:rgba(8,25,45,.94);--legend-line:rgba(255,212,95,.42)}
.legendary-tab{position:relative;overflow:hidden}.legendary-tab::after{content:"NEW";position:absolute;top:1px;left:5px;font-size:7px;color:#ffe985;opacity:.9}
.market-ticker{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:210;min-width:260px;max-width:min(72vw,620px);display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 14px;border:1px solid rgba(255,213,87,.52);border-radius:999px;background:linear-gradient(180deg,rgba(12,34,60,.96),rgba(6,20,38,.96));box-shadow:0 8px 24px #00162d66;color:#fff;font-size:12px}.market-ticker b{color:#ffe17d}.market-ticker span{opacity:.9}.online-badge{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:220;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;border:1px solid #5dc2ff80;background:#0b2037e8;box-shadow:0 8px 22px #00172a80;font-size:11px}.online-badge b{color:#7fdaff}.online-badge.my-turn{border-color:#ffdf6c;background:#31260cd9;animation:legendPulse 1.6s ease-in-out infinite}.online-badge.my-turn b{color:#ffe880}@keyframes legendPulse{50%{box-shadow:0 0 28px #ffd85f66}}
.market-tag{position:absolute;z-index:25;top:2px;right:3px;padding:1px 4px;border-radius:5px;background:#0b1624dc;color:#95f0a8;font-size:7px;font-style:normal;font-weight:900;pointer-events:none}.tile.market-down .market-tag{color:#ff9c9c}.tile.market-up .tile-3d{box-shadow:inset 0 0 0 1px #76f3a555,0 0 12px #48e18c25}.tile.market-down .tile-3d{box-shadow:inset 0 0 0 1px #ff6c6c55,0 0 12px #ff4c4c20}
.legendary-action{min-width:260px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 16px}.legendary-action b{color:#ffe17d;font-size:15px}.legendary-action span,.legendary-action small{font-size:11px;opacity:.9}
.ultimate-btn{min-width:98px;border:1px solid #607895;border-radius:12px;background:linear-gradient(180deg,#142b46,#0c1c31);color:#b8c9dc;padding:5px 8px;display:grid;grid-template-columns:25px 1fr;grid-template-rows:auto auto;gap:0 5px;align-items:center;cursor:pointer;transition:.2s}.ultimate-btn span{font-size:19px;grid-row:1/3}.ultimate-btn b{font-size:11px}.ultimate-btn small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ultimate-btn.ready{border-color:#ffe268;color:#fff3aa;background:linear-gradient(180deg,#513f0c,#211b0b);box-shadow:0 0 18px #ffd74d5c;animation:ultReady 1.1s ease-in-out infinite alternate}.ultimate-btn:disabled{opacity:.52;cursor:not-allowed}@keyframes ultReady{to{transform:translateY(-2px);box-shadow:0 0 28px #ffd74d80}}
.trade-btn{white-space:nowrap}.auction-pop,.trade-pop{text-align:center}.trade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:280px;overflow:auto;margin:10px 0}.trade-choice{border:1px solid #42617e;border-radius:11px;background:#10253c;color:#fff;padding:9px;text-align:right;cursor:pointer}.trade-choice b,.trade-choice span{display:block}.trade-choice span{font-size:9px;color:#add7ff;margin-top:3px}.trade-choice:hover:not(:disabled){border-color:#ffdc68;transform:translateY(-1px)}.trade-choice:disabled{opacity:.42}
.chat-rail{position:fixed;left:14px;bottom:104px;z-index:195;width:min(260px,32vw);display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none}.chat-bubble{max-width:100%;padding:6px 9px;border:1px solid #72b8e855;border-radius:12px 12px 4px 12px;background:#071a2cdc;box-shadow:0 5px 18px #00172a55;color:#fff;animation:chatIn .22s ease-out}.chat-bubble b{display:block;color:#8fd8ff;font-size:9px}.chat-bubble span{font-size:12px}@keyframes chatIn{from{transform:translateY(8px);opacity:0}}
.emote-fab{position:fixed;left:15px;bottom:54px;z-index:205;width:42px;height:42px;border-radius:50%;border:1px solid #ffd65e99;background:linear-gradient(180deg,#263c55,#0d2035);box-shadow:0 6px 18px #00172a99;color:#fff;font-size:19px;cursor:pointer}.emote-menu{position:fixed;left:14px;bottom:101px;z-index:206;width:190px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px;border:1px solid #5c7896;border-radius:14px;background:#081a2deF;box-shadow:0 12px 28px #00101fcc}.emote-menu button{min-height:34px;border:1px solid #375b79;border-radius:9px;background:#102a44;color:#fff;font-size:14px;cursor:pointer}.emote-menu button:nth-child(n+6){grid-column:span 2;font-size:10px}
.mvp-title{margin:12px 0 6px;color:#ffe27a}.mvp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:7px 0}.mvp-grid>div{padding:7px 8px;border:1px solid #3e6380;border-radius:10px;background:#0b2034}.mvp-grid b,.mvp-grid span{display:block}.mvp-grid b{font-size:9px;color:#ffe483}.mvp-grid span{font-size:11px;margin-top:2px}.replay-highlights{display:flex;flex-direction:column;gap:4px;margin:8px 0;padding:8px;border-radius:10px;background:#091b2d}.replay-highlights>b{color:#8bd8ff;font-size:10px}.replay-highlights>span{font-size:9px;opacity:.88;border-right:2px solid #f3c84f;padding-right:6px}
.legend-hero,.rank-card,.arena-hero,.arena-room{border:1px solid var(--legend-line);border-radius:16px;background:linear-gradient(145deg,#102b48e8,#081a2eea);box-shadow:0 12px 30px #00182d55}.legend-hero{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;margin-bottom:12px}.legend-hero div{display:flex;flex-direction:column}.legend-hero span{font-size:10px;color:#a7cde9}.legend-hero b{font-size:20px;color:#ffe071}.mission-grid{display:grid;gap:8px}.mission-card{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:9px;border:1px solid #385977;border-radius:13px;background:#0c2137;padding:9px}.mission-card>i{font-size:24px;font-style:normal}.mission-card b,.mission-card span{display:block}.mission-card b{font-size:11px}.mission-card span{font-size:9px;color:#9cc6e8;margin-top:2px}.mission-card button{border:1px solid #caa83e;border-radius:9px;background:#3b3111;color:#ffe882;font-size:9px;padding:7px;cursor:pointer}.mission-card button:disabled{opacity:.45}.mission-card.done{border-color:#54d99088;box-shadow:inset 0 0 18px #3be68b12}.mission-bar{height:5px;margin-top:5px;border-radius:999px;background:#071522;overflow:hidden}.mission-bar em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4bd7ff,#ffe36a)}
.rank-card{display:flex;align-items:center;gap:14px;padding:14px}.rank-card>strong{font-size:44px}.rank-card h2,.rank-card p,.rank-card span{margin:0}.rank-card h2{color:#ffe27c;font-size:22px}.rank-card p,.rank-card span{font-size:10px;color:#a9cbe4}.rank-progress{height:7px;min-width:210px;background:#071724;border-radius:999px;overflow:hidden;margin-top:7px}.rank-progress i{display:block;height:100%;background:linear-gradient(90deg,#6dc8ff,#ffe06a);border-radius:inherit}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}.profile-stats>div{text-align:center;padding:9px;border:1px solid #365978;border-radius:11px;background:#0b2035}.profile-stats b,.profile-stats span{display:block}.profile-stats b{font-size:18px;color:#ffe27b}.profile-stats span{font-size:9px;color:#9fc5df}.achievement-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.achievement{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid #334f68;border-radius:11px;background:#0b1d31;opacity:.52}.achievement.on{opacity:1;border-color:#e6c04b77;box-shadow:inset 0 0 14px #ffe36b0e}.achievement>i{font-style:normal;font-size:20px}.achievement b,.achievement small{display:block}.achievement b{font-size:10px}.achievement small{font-size:8px;color:#a4c5df}.cosmetic-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:7px 0}.cosmetic-row>span{width:55px;font-size:10px;color:#accbe2}.cosmetic-choice{border:1px solid #3b5c78;border-radius:9px;background:#0e243a;color:#d9ebfa;padding:6px 10px;font-size:9px;cursor:pointer}.cosmetic-choice.on{border-color:#f1c94f;background:#3e3210;color:#ffe680}
.arena-hero{text-align:center;padding:14px;margin-bottom:10px}.arena-hero>span{color:#80d6ff;font-size:10px}.arena-hero h2{margin:3px 0;color:#ffe176}.arena-hero p{margin:0;font-size:10px;color:#b9d0e2}.arena-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.arena-grid>section{padding:11px;border:1px solid #355673;border-radius:14px;background:#0b2035}.arena-grid h3{margin:0 0 8px;color:#fff;font-size:13px}.reconnect-btn{margin-top:10px;width:100%}.arena-room{padding:12px}.room-code{display:flex;align-items:center;justify-content:center;gap:10px}.room-code span{font-size:9px;color:#9fc4dd}.room-code b{font-size:27px;letter-spacing:4px;color:#ffe270}.room-members{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:10px 0}.room-member{display:flex;align-items:center;gap:8px;padding:7px;border:1px solid #345570;border-radius:11px;background:#0a1d31}.room-member.spectator{opacity:.68}.room-member img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid #e1bd4e}.room-member b,.room-member span{display:block}.room-member b{font-size:10px}.room-member span{font-size:8px;color:#9bc2df}
body[data-board-theme="night"] .table-screen,body[data-board-theme="night"] .splash{background:radial-gradient(circle at 50% 10%,#1c3d6e 0,#0a1a39 44%,#030b1c 100%)!important}body[data-board-theme="night"] .stage{filter:saturate(.95) brightness(.9)}body[data-board-theme="desert"] .table-screen,body[data-board-theme="desert"] .splash{background:radial-gradient(circle at 50% 15%,#ffbd69 0,#ca6e56 38%,#593a55 75%,#222640 100%)!important}body[data-board-theme="desert"] .stage{filter:saturate(1.08) sepia(.08)}
body[data-dice-skin="gold"] .die{background:linear-gradient(145deg,#fff6bd,#d9a51d)!important;box-shadow:inset 0 0 0 2px #fff4a9,0 5px 12px #4e350b88!important}body[data-dice-skin="gold"] .die .pip{background:#34240b!important}body[data-dice-skin="galaxy"] .die{background:radial-gradient(circle at 30% 20%,#a48cff,#382c84 42%,#120e32)!important;box-shadow:inset 0 0 0 2px #d1c6ff,0 0 16px #8f7cff99!important}body[data-dice-skin="galaxy"] .die .pip{background:#fff!important;box-shadow:0 0 5px #fff}
body[data-token-fx="royal"] .token{filter:drop-shadow(0 0 8px #ffe16c) drop-shadow(0 5px 3px #0008)!important}body[data-token-fx="royal"] .token.me{animation:royalToken 1.4s ease-in-out infinite alternate}@keyframes royalToken{to{filter:drop-shadow(0 0 16px #fff2a0) drop-shadow(0 6px 4px #0009)}}
@media(max-width:900px){.market-ticker{top:54px;max-width:82vw;font-size:9px}.online-badge{top:8px}.chat-rail{width:42vw;bottom:100px}.arena-grid{grid-template-columns:1fr}.profile-stats{grid-template-columns:repeat(2,1fr)}.achievement-grid{grid-template-columns:1fr}.rank-progress{min-width:140px}.room-members{grid-template-columns:1fr}.ultimate-btn{min-width:78px}.trade-grid{grid-template-columns:1fr}}
@media(max-width:560px){.legendary-tab::after{display:none}.market-ticker{top:48px;padding:5px 9px}.market-ticker span{display:none}.emote-fab{left:8px;bottom:72px;width:38px;height:38px}.emote-menu{left:8px;bottom:114px}.chat-rail{left:8px;bottom:116px;width:46vw}.mvp-grid{grid-template-columns:1fr}.legend-hero{align-items:stretch;gap:8px;flex-direction:column}.mission-card{grid-template-columns:34px 1fr}.mission-card button{grid-column:2}.rank-card{align-items:flex-start}.rank-card>strong{font-size:34px}.room-code{flex-wrap:wrap}}
@media(min-width:901px){.splash-card.lobby-open .lobby-hub{grid-template-columns:repeat(7,1fr)}}
@media(max-width:900px){.lobby-hub{grid-template-columns:repeat(4,1fr)}}

/* ===== Legendary Expansion v51 ===== */
@media(min-width:901px){.splash-card.lobby-open .lobby-hub{grid-template-columns:repeat(9,minmax(0,1fr))}}
.world-hero,.academy-hero{border:1px solid #426786;border-radius:16px;background:linear-gradient(145deg,#102b48e8,#081a2eea);padding:14px;text-align:center;margin-bottom:10px;box-shadow:0 12px 28px #00182d44}.world-hero span,.academy-hero span{font-size:10px;color:#8edcff}.world-hero h2,.academy-hero h2{margin:3px 0;color:#ffe17a}.world-hero p,.academy-hero p{margin:0;color:#b9d2e5;font-size:10px}
.world-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.world-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:9px;padding:10px;border:1px solid #355976;border-radius:14px;background:#0b2035;text-align:right}.world-card.selected{border-color:#f2cb52;box-shadow:0 0 0 1px #f2cb5244,inset 0 0 18px #f2cb5210}.world-card.locked{opacity:.56;filter:saturate(.6)}.world-icon{font-size:29px;text-align:center}.world-card h3{margin:0;font-size:12px}.world-card span,.world-card small{display:block}.world-card span{font-size:9px;color:#acd0e9}.world-card small{font-size:8px;color:#ffe08a;margin-top:4px}.world-card button{border:1px solid #c7a441;border-radius:9px;background:#2c270f;color:#ffe886;padding:7px 9px;font-family:inherit;font-size:9px;cursor:pointer}.world-card button:disabled{cursor:not-allowed;opacity:.5}
.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.lesson-grid article{display:flex;gap:10px;align-items:flex-start;padding:10px;border:1px solid #355976;border-radius:13px;background:#0b2035}.lesson-grid i{font-style:normal;font-size:24px}.lesson-grid b,.lesson-grid span{display:block}.lesson-grid b{font-size:11px;color:#fff}.lesson-grid span{font-size:9px;color:#a8c9e1;margin-top:3px;line-height:1.6}.academy-start{width:100%;margin-top:10px}
.tutorial-coach{position:fixed;right:50%;transform:translateX(50%);top:72px;z-index:95;display:flex;align-items:center;gap:9px;max-width:min(520px,88vw);padding:8px 12px;border:1px solid #f2ce5a;border-radius:14px;background:#092139f2;box-shadow:0 10px 30px #00182d88;color:#fff}.tutorial-coach>i{font-style:normal;font-size:23px}.tutorial-coach div{flex:1}.tutorial-coach b,.tutorial-coach span{display:block}.tutorial-coach b{font-size:10px;color:#ffe482}.tutorial-coach span{font-size:9px;color:#c5def0;margin-top:2px}.tutorial-coach button{border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer}.tutorial-coach.coach-hidden{display:none}
.rivalry-grid{display:grid;gap:7px;margin-bottom:12px}.rivalry-grid article{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border:1px solid #355976;border-radius:11px;background:#0b2035}.rivalry-grid b,.rivalry-grid span{display:block}.rivalry-grid b{font-size:10px}.rivalry-grid span{font-size:8px;color:#9fc5df}.rivalry-grid strong{font-size:15px;color:#ffe27b;direction:ltr}.empty-rivals{margin:0;padding:10px;border:1px dashed #355976;border-radius:11px;color:#9fc5df;font-size:9px;text-align:center}
.mini-game{text-align:center}.vault-row,.invest-row{display:grid;gap:8px;margin-top:12px}.vault-row{grid-template-columns:repeat(4,1fr)}.vault-key{border:1px solid #d5ad3f;border-radius:12px;background:#10253c;color:#ffe486;padding:12px 5px;font-size:25px;cursor:pointer}.vault-key span{display:block;font-size:9px;margin-top:4px}.invest-row{grid-template-columns:repeat(3,1fr)}.invest-choice{border:1px solid #42617e;border-radius:12px;background:#10253c;color:#fff;padding:10px 6px;cursor:pointer}.invest-choice i,.invest-choice b,.invest-choice span{display:block}.invest-choice i{font-style:normal;font-size:25px}.invest-choice b{font-size:10px;margin-top:4px}.invest-choice span{font-size:8px;color:#9fc9e7;margin-top:2px}.trade-price{display:inline-block;margin:8px auto;padding:7px 15px;border-radius:999px;background:#372f12;color:#ffe17b;font-weight:900}.online-trade{min-width:min(380px,90vw)}
body[data-region="egypt"] .table-screen{background-image:linear-gradient(#008ed91a,#efbb4d12),var(--sky-bg,none)}body[data-region="future"] .board{box-shadow:0 0 42px #5cdcff44,0 18px 40px #00182d88}body[data-region="europe"] .board{filter:saturate(.93) contrast(1.02)}
@media(max-width:900px){.world-grid,.lesson-grid{grid-template-columns:1fr}.world-card{grid-template-columns:42px 1fr auto}.tutorial-coach{top:58px}.vault-row{grid-template-columns:repeat(2,1fr)}.invest-row{grid-template-columns:1fr}.splash-card.lobby-open .lobby-hub{grid-template-columns:repeat(3,1fr)}}

/* ========================================================================== */
/* Legendary 3D v60 — visual engine                                          */
/* ========================================================================== */
:root {
  --glass: rgba(8, 24, 43, .86);
  --glass-2: rgba(16, 42, 70, .82);
  --rim: rgba(255, 215, 94, .78);
}

body[data-graphics="3d"] .table-screen,
body[data-graphics="3d"] .splash {
  background:
    radial-gradient(circle at 50% -10%, rgba(101, 224, 255, .35), transparent 34%),
    linear-gradient(180deg, rgba(0, 147, 230, .08), rgba(0, 26, 52, .22)),
    var(--sky-bg, url("../img/sky-cartoon.webp") center/cover fixed);
}

/* --- Lobby: deeper glass, lighting, premium hierarchy --- */
body[data-graphics="3d"] .splash { perspective: 1600px; overflow: auto; }
body[data-graphics="3d"] .splash-card {
  --lobby-rx: 0deg;
  --lobby-ry: 0deg;
  --lobby-light-x: 50%;
  transform: perspective(1600px) rotateX(var(--lobby-rx)) rotateY(var(--lobby-ry));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .25s ease;
  background:
    radial-gradient(circle at var(--lobby-light-x) 0%, rgba(107, 214, 255, .15), transparent 33%),
    linear-gradient(145deg, rgba(20, 50, 83, .96), rgba(5, 20, 38, .97));
  border: 2px solid rgba(255, 208, 72, .9);
  box-shadow:
    0 34px 75px rgba(0, 25, 48, .50),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 60px rgba(72, 206, 255, .08) inset;
  backdrop-filter: blur(14px) saturate(1.2);
}
body[data-graphics="3d"] .splash-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
}
body[data-graphics="3d"] .splash-card > * { transform: translateZ(8px); }
body[data-graphics="3d"] .splash-heroes { transform: translateZ(34px); }
body[data-graphics="3d"] .splash-heroes img {
  filter: drop-shadow(0 10px 9px rgba(0,0,0,.45));
  transition: transform .22s ease, filter .22s ease;
}
body[data-graphics="3d"] .splash-heroes img:hover {
  transform: translateY(-5px) scale(1.08);
  filter: drop-shadow(0 16px 12px rgba(0,0,0,.48)) drop-shadow(0 0 9px rgba(255,211,75,.35));
}
body[data-graphics="3d"] .kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  letter-spacing: .3px;
}
.kicker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #67e7ff;
  box-shadow: 0 0 12px #55dcff;
  animation: legendaryPulse 1.5s ease-in-out infinite;
}
@keyframes legendaryPulse { 50% { transform: scale(1.35); opacity: .7; } }
.hero-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0 12px;
}
.hero-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(103, 220, 255, .28);
  background: rgba(7, 31, 52, .64);
  color: #d9f4ff;
  font-size: 9px;
  font-weight: 900;
  box-shadow: inset 0 0 12px rgba(69, 203, 255, .07);
}
body[data-graphics="3d"] .char-card,
body[data-graphics="3d"] #charPick > * {
  transform-style: preserve-3d;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body[data-graphics="3d"] .char-card:hover,
body[data-graphics="3d"] #charPick > *:hover {
  transform: translateY(-5px) translateZ(18px) rotateX(2deg);
  box-shadow: 0 15px 22px rgba(0,0,0,.30), 0 0 0 1px rgba(116,222,255,.16) inset;
}
body[data-graphics="3d"] .hub-tab,
body[data-graphics="3d"] .gold,
body[data-graphics="3d"] .ghost {
  position: relative;
  overflow: hidden;
}
body[data-graphics="3d"] .gold::after {
  content: "";
  position: absolute;
  top: -70%; left: -30%;
  width: 30%; height: 240%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: buttonSheen 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes buttonSheen { 0%,72% { left:-35%; } 88%,100% { left:130%; } }

/* --- True CSS 3D board scene / camera --- */
.stage#stage3d {
  perspective: 1250px;
  perspective-origin: 50% 42%;
  overflow: visible;
}
.board-scene {
  --cam-rx: 18deg;
  --cam-ry-base: 0deg;
  --cam-rz: 0deg;
  --cam-scale: .91;
  --cam-y: 10px;
  --parallax-x: 0deg;
  --parallax-y: 0deg;
  --sprite-rx: -18deg;
  --light-x: 50%;
  --light-y: 34%;
  width: min(calc(100vh - 210px), calc(100vw - 128px), 830px);
  max-width: 100%;
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
  transform:
    translateY(var(--cam-y))
    rotateX(calc(var(--cam-rx) + var(--parallax-x)))
    rotateY(calc(var(--cam-ry-base) + var(--parallax-y)))
    rotateZ(var(--cam-rz))
    scale(var(--cam-scale));
  transition: transform .55s cubic-bezier(.22,.8,.2,1);
  will-change: transform;
}
.board-ambient {
  position: absolute;
  left: 5%; right: 5%; bottom: -8%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.52), rgba(0,0,0,.15) 58%, transparent 72%);
  filter: blur(16px);
  transform: translateZ(-70px) rotateX(-70deg);
  pointer-events: none;
}
body[data-graphics="3d"] .board-scene .board {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  height: 100%;
  transform: none;
  transform-style: preserve-3d;
  border-radius: 18px;
  padding: 7px;
  background:
    radial-gradient(circle at var(--light-x) var(--light-y), #71451c, #38200d 52%, #1b0d05 100%);
  box-shadow:
    0 18px 0 #2b1608,
    0 23px 0 #180b03,
    0 46px 70px rgba(0,0,0,.48),
    inset 0 0 0 7px #ffd85b,
    inset 0 0 0 12px #9c651d,
    inset 0 0 35px rgba(255,218,97,.18);
}
body[data-graphics="3d"] .board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(115deg, rgba(255,255,255,.13), transparent 23%, transparent 70%, rgba(255,199,69,.06));
  pointer-events: none;
  transform: translateZ(2px);
  z-index: 1;
}
body[data-graphics="3d"] .center {
  transform: translateZ(8px);
  transform-style: preserve-3d;
  box-shadow:
    inset 0 0 0 8px #ffd85c,
    inset 0 0 0 15px #714318,
    0 15px 0 #48280d,
    0 25px 28px rgba(0,0,0,.31);
}
body[data-graphics="3d"] .center::after {
  content: "";
  position: absolute;
  inset: 2.5%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at var(--light-x) 18%, rgba(255,255,255,.20), transparent 30%);
  mix-blend-mode: screen;
}
body[data-graphics="3d"] .center .banner {
  transform: translateZ(22px) rotateX(var(--sprite-rx));
  transform-origin: center bottom;
  box-shadow: 0 12px 26px rgba(0,0,0,.42), 0 0 20px rgba(255,211,73,.12);
}
body[data-graphics="3d"] .tile { transform-style: preserve-3d; }
body[data-graphics="3d"] .tile-3d {
  --edge: #5b3411;
  transform: translateZ(15px);
  transform-style: preserve-3d;
  box-shadow:
    0 8px 0 var(--edge),
    0 14px 12px rgba(0,0,0,.27),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -6px 12px rgba(95,55,14,.10);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
  animation: tileLift .42s both;
  animation-delay: var(--tile-delay, 0ms);
}
@keyframes tileLift {
  from { opacity: .82; transform: translateZ(3px) scale(.985); }
  to { opacity: 1; transform: translateZ(15px) scale(1); }
}
body[data-graphics="3d"] .tile-3d::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 5px; right: 5px; bottom: -9px;
  height: 10px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--edge) 80%, #fff 20%), var(--edge));
  transform-origin: top center;
  transform: rotateX(-72deg);
  opacity: .96;
}
body[data-graphics="3d"] .tile:hover .tile-3d,
body[data-graphics="3d"] .tile.pickable .tile-3d {
  transform: translateZ(25px) scale(1.025);
  filter: brightness(1.08) saturate(1.05);
}
body[data-graphics="3d"] .tile.owner-mark .tile-3d,
body[data-graphics="3d"] .tile.monopoly .tile-3d {
  box-shadow:
    0 8px 0 #59330f,
    0 0 0 3px var(--owner, var(--gc, #ffe08a)),
    0 0 24px color-mix(in srgb, var(--owner, var(--gc, #ffe08a)) 52%, transparent),
    0 15px 14px rgba(0,0,0,.28);
}
body[data-graphics="3d"] .tile.start .tile-3d { --edge:#9b6306; }
body[data-graphics="3d"] .tile.jail .tile-3d { --edge:#1c5d83; }
body[data-graphics="3d"] .tile.olympic .tile-3d { --edge:#0d7140; }
body[data-graphics="3d"] .tile.travel .tile-3d { --edge:#234ca3; }
body[data-graphics="3d"] .tile.fortune .tile-3d { --edge:#9b6300; }
body[data-graphics="3d"] .tile.tax .tile-3d { --edge:#9e3925; }
body[data-graphics="3d"] .tile.bonus .tile-3d { --edge:#6e2b8d; }
body[data-graphics="3d"] .tile.tourist .tile-3d { --edge:#16708a; }
body[data-graphics="3d"] .group-bar { transform: translateZ(10px); }
body[data-graphics="3d"] .plate {
  transform: translateZ(23px);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
body[data-graphics="3d"] .ico-img {
  transform: translateX(-50%) translateZ(28px);
  filter: drop-shadow(0 10px 4px rgba(0,0,0,.36)) drop-shadow(0 0 7px rgba(255,255,255,.12));
}
body[data-graphics="3d"] .iso-lot { transform: translateZ(18px); }
body[data-graphics="3d"] .iso-build {
  transform: translateZ(38px);
  overflow: visible;
}
body[data-graphics="3d"] .iso-build img {
  filter:
    drop-shadow(0 12px 4px rgba(0,0,0,.42))
    drop-shadow(0 0 10px color-mix(in srgb, var(--owner, #fff) 70%, transparent));
  transform-origin: center bottom;
  animation: buildingIdle 3.4s ease-in-out infinite alternate;
}
@keyframes buildingIdle { to { transform: translateY(-2px) scale(1.015); } }
body[data-graphics="3d"] .mono-tag,
body[data-graphics="3d"] .fest,
body[data-graphics="3d"] .olymp,
body[data-graphics="3d"] .market-tag { transform: translateZ(32px); }
body[data-graphics="3d"] .token-layer { transform: translateZ(72px); transform-style: preserve-3d; }
body[data-graphics="3d"] .token {
  transform: translate(var(--tx), var(--ty)) rotateX(var(--sprite-rx)) translateZ(5px) scale(1.05);
  transform-origin: center bottom;
  filter: drop-shadow(0 12px 4px rgba(0,0,0,.48));
}
body[data-graphics="3d"] .token.me {
  filter: drop-shadow(0 0 8px #ffe877) drop-shadow(0 13px 5px rgba(0,0,0,.5));
}
body[data-graphics="3d"] .token.hop { animation: tokenHop3d .34s cubic-bezier(.2,.9,.3,1); }
@keyframes tokenHop3d {
  0% { transform: translate(var(--tx), var(--ty)) rotateX(var(--sprite-rx)) translateZ(5px) scale(1.05); }
  43% { transform: translate(var(--tx), calc(var(--ty) - 17px)) rotateX(var(--sprite-rx)) translateZ(24px) scale(1.12); }
  100% { transform: translate(var(--tx), var(--ty)) rotateX(var(--sprite-rx)) translateZ(5px) scale(1.05); }
}
body[data-graphics="3d"] .cash-float { transform: translate(-50%, -140%) translateZ(100px) rotateX(var(--sprite-rx)); }

/* --- 3D dice cubes --- */
.dice-pair { perspective: 700px; align-items: center; padding: 5px 3px 7px; }
.die3d {
  --die-size: 52px;
  position: relative;
  width: var(--die-size);
  height: var(--die-size);
  display: inline-block;
  transform-style: preserve-3d;
}
.die-cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.2,.8,.25,1);
  filter: drop-shadow(0 11px 7px rgba(0,0,0,.34));
}
.die-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: repeat(3,1fr);
  padding: 9px;
  gap: 3px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.92), transparent 23%),
    linear-gradient(145deg,#ffffff,#e7edf3 62%,#bcc8d2);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset -5px -6px 12px rgba(69,83,95,.18), inset 2px 2px 5px rgba(255,255,255,.8);
  backface-visibility: hidden;
}
.die-face.front  { transform: translateZ(calc(var(--die-size) / 2)); }
.die-face.back   { transform: rotateY(180deg) translateZ(calc(var(--die-size) / 2)); }
.die-face.right  { transform: rotateY(90deg) translateZ(calc(var(--die-size) / 2)); }
.die-face.left   { transform: rotateY(-90deg) translateZ(calc(var(--die-size) / 2)); }
.die-face.top    { transform: rotateX(90deg) translateZ(calc(var(--die-size) / 2)); }
.die-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--die-size) / 2)); }
.die-face .pip { width:9px; height:9px; border-radius:50%; background:#17212b; margin:auto; opacity:0; box-shadow: inset 0 1px 2px #000, 0 1px 0 #fff8; }
.die-face[data-face-n="1"] .p5 { opacity:1; }
.die-face[data-face-n="2"] .p1,.die-face[data-face-n="2"] .p9 { opacity:1; }
.die-face[data-face-n="3"] .p1,.die-face[data-face-n="3"] .p5,.die-face[data-face-n="3"] .p9 { opacity:1; }
.die-face[data-face-n="4"] .p1,.die-face[data-face-n="4"] .p3,.die-face[data-face-n="4"] .p7,.die-face[data-face-n="4"] .p9 { opacity:1; }
.die-face[data-face-n="5"] .p1,.die-face[data-face-n="5"] .p3,.die-face[data-face-n="5"] .p5,.die-face[data-face-n="5"] .p7,.die-face[data-face-n="5"] .p9 { opacity:1; }
.die-face[data-face-n="6"] .p1,.die-face[data-face-n="6"] .p3,.die-face[data-face-n="6"] .p4,.die-face[data-face-n="6"] .p6,.die-face[data-face-n="6"] .p7,.die-face[data-face-n="6"] .p9 { opacity:1; }
.die3d[data-n="1"] .die-cube { transform: rotateX(-8deg) rotateY(8deg); }
.die3d[data-n="2"] .die-cube { transform: rotateX(-98deg) rotateY(3deg); }
.die3d[data-n="3"] .die-cube { transform: rotateX(-5deg) rotateY(-82deg); }
.die3d[data-n="4"] .die-cube { transform: rotateX(5deg) rotateY(98deg); }
.die3d[data-n="5"] .die-cube { transform: rotateX(82deg) rotateY(-5deg); }
.die3d[data-n="6"] .die-cube { transform: rotateX(4deg) rotateY(188deg); }
.die3d.rolling .die-cube { animation: diceTumble3d .48s linear infinite; }
@keyframes diceTumble3d {
  0%   { transform: rotateX(0) rotateY(0) rotateZ(0) translateY(0); }
  30%  { transform: rotateX(130deg) rotateY(170deg) rotateZ(40deg) translateY(-9px); }
  65%  { transform: rotateX(260deg) rotateY(315deg) rotateZ(105deg) translateY(-3px); }
  100% { transform: rotateX(360deg) rotateY(540deg) rotateZ(180deg) translateY(0); }
}
.die-shadow {
  position:absolute;
  z-index:-1;
  left:12%; right:12%; bottom:-10px;
  height:9px;
  border-radius:50%;
  background:rgba(0,0,0,.35);
  filter:blur(5px);
}
body[data-dice-skin="gold"] .die-face { background:linear-gradient(145deg,#fff8c6,#e5b52e 62%,#976415)!important; border-color:#fff0a0; }
body[data-dice-skin="gold"] .die-face .pip { background:#352308!important; }
body[data-dice-skin="galaxy"] .die-face { background:radial-gradient(circle at 26% 18%,#b9a6ff,#4d3b9b 45%,#18113b 100%)!important; border-color:#d7ceff; box-shadow:inset -4px -5px 12px #05001477,0 0 12px #7968ff55; }
body[data-dice-skin="galaxy"] .die-face .pip { background:#fff!important; box-shadow:0 0 5px #fff; }

/* --- Cinematic camera controller --- */
.camera-dock {
  position: fixed;
  right: 50%;
  transform: translateX(50%);
  top: 54px;
  z-index: 47;
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(242,199,72,.55);
  border-radius: 14px;
  background: rgba(5,22,39,.78);
  backdrop-filter: blur(12px);
  box-shadow: 0 9px 24px rgba(0,0,0,.25), inset 0 0 16px rgba(70,201,255,.06);
}
.camera-dock button {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 5px 8px;
  background: transparent;
  color: #a9cbe3;
  font: 800 9px Cairo, sans-serif;
  cursor: pointer;
  transition: .18s ease;
}
.camera-dock button:hover { color:#fff; background:rgba(255,255,255,.06); }
.camera-dock button.on { color:#ffe47b; border-color:rgba(239,195,65,.45); background:rgba(101,76,11,.34); box-shadow:inset 0 0 12px rgba(255,214,73,.08); }
.camera-dock button span { margin-inline-start: 3px; }

/* HUD gets a premium glass pass */
body[data-graphics="3d"] .phud,
body[data-graphics="3d"] .dice-hud,
body[data-graphics="3d"] .ticker,
body[data-graphics="3d"] .market-ticker {
  backdrop-filter: blur(12px) saturate(1.12);
}
body[data-graphics="3d"] .phud {
  box-shadow: 0 14px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
body[data-graphics="3d"] .phud.active {
  box-shadow: 0 0 0 2px var(--pc), 0 0 22px color-mix(in srgb,var(--pc) 35%,transparent), 0 14px 30px rgba(0,0,0,.28);
}
body[data-graphics="3d"] .dice-hud {
  border-width: 2px;
  background: linear-gradient(180deg, rgba(20,51,80,.91), rgba(5,18,35,.94));
  box-shadow: 0 15px 34px rgba(0,0,0,.40), inset 0 0 24px rgba(65,202,255,.07), inset 0 0 0 1px rgba(255,255,255,.05);
}
body[data-graphics="3d"] .roll-orb {
  transform: translateZ(18px);
  box-shadow: 0 9px 0 #8a5a12, 0 17px 24px rgba(0,0,0,.35), inset 0 3px 4px rgba(255,255,255,.45);
}

/* Region-specific 3D atmosphere */
body[data-region="future"][data-graphics="3d"] .board-scene .board {
  box-shadow: 0 18px 0 #06263a,0 24px 0 #03151f,0 0 55px #58dbff48,0 45px 70px #00152588,inset 0 0 0 7px #75ecff,inset 0 0 0 12px #276b85;
}
body[data-region="egypt"][data-graphics="3d"] .board-scene .board { filter: sepia(.04) saturate(1.05); }
body[data-region="europe"][data-graphics="3d"] .board-scene .board { filter: saturate(.94) contrast(1.03); }

@media (max-width: 1100px) {
  .board-scene { width: min(calc(100vh - 220px), calc(100vw - 38px), 760px); }
  .camera-dock { top: 50px; }
}
@media (max-width: 900px) {
  .board-scene { width: min(calc(100vh - 225px), calc(100vw - 14px)); --cam-scale:.94; }
  .camera-dock { top: 48px; padding:4px; gap:2px; }
  .camera-dock button { padding:5px 6px; }
  .camera-dock button span { display:none; }
  .die3d { --die-size: 45px; }
  .die-face { padding:8px; }
  .die-face .pip { width:8px; height:8px; }
}
@media (max-width: 560px) {
  body[data-graphics="3d"] .splash-card { transform:none !important; }
  .hero-badges { gap:4px; }
  .hero-badges span { font-size:8px; padding:3px 7px; min-height:22px; }
  .board-scene { width: min(calc(100vh - 210px), calc(100vw - 8px)); }
  .camera-dock { top: 44px; right: 8px; transform:none; }
  .camera-dock button { font-size:10px; padding:4px 6px; }
  .die3d { --die-size: 40px; }
  .die-face { border-radius:9px; padding:7px; gap:2px; }
  .die-face .pip { width:7px; height:7px; }
  body[data-graphics="3d"] .iso-build { transform: translateZ(26px); }
  body[data-graphics="3d"] .token-layer { transform: translateZ(52px); }
}
@media (prefers-reduced-motion: reduce) {
  .board-scene,
  .tile-3d,
  .iso-build img,
  .splash-card,
  .splash-heroes img { transition:none !important; animation:none !important; }
}
/* v60 dice settle: the result always faces the player while the side/top faces keep real depth. */
.die3d:not(.rolling) .die-cube { transform: rotateX(-12deg) rotateY(18deg) rotateZ(-2deg) !important; }
@media (max-width: 560px) {
  .stage#stage3d {
    place-items: start center;
    padding: 148px 4px 215px;
  }
  .board-scene { width: min(calc(100vw - 8px), 392px); }
}
/* v60 scene lifecycle + cinematic feedback */
body[data-graphics="3d"] .tile-3d { animation: none; }
body[data-graphics="3d"] .tile.intro3d .tile-3d {
  animation: tileLift .42s both;
  animation-delay: var(--tile-delay, 0ms);
}
body[data-graphics="3d"] .tile.build-changed .iso-build {
  animation: buildingRise3d .72s cubic-bezier(.16,.92,.24,1.12) both;
}
@keyframes buildingRise3d {
  0% { opacity:.25; transform:translateZ(4px) scale(.62); filter:brightness(1.7); }
  65% { opacity:1; transform:translateZ(48px) scale(1.09); filter:brightness(1.2); }
  100% { transform:translateZ(38px) scale(1); filter:none; }
}
body[data-graphics="3d"] .tile.owner-changed .tile-3d {
  animation: claimGlow3d .7s ease-out both;
}
@keyframes claimGlow3d {
  0% { filter:brightness(1.8) saturate(1.35); }
  45% { filter:brightness(1.22) saturate(1.18); }
  100% { filter:none; }
}
.board-scene.camera-roll { animation: cameraRoll3d .6s cubic-bezier(.2,.82,.2,1); }
.board-scene.camera-impact { animation: cameraImpact3d .38s ease-out; }
.board-scene.camera-reward { animation: cameraReward3d .58s ease-out; }
@keyframes cameraRoll3d {
  0%,100% { filter:none; }
  38% { filter:brightness(1.055) saturate(1.05); }
}
@keyframes cameraImpact3d {
  0%,100% { translate:0 0; }
  25% { translate:-4px 1px; }
  50% { translate:4px -1px; }
  75% { translate:-2px 0; }
}
@keyframes cameraReward3d {
  0%,100% { filter:none; }
  45% { filter:brightness(1.09) saturate(1.12) drop-shadow(0 0 13px rgba(255,218,90,.18)); }
}
@media (prefers-reduced-motion: reduce) {
  .board-scene.camera-roll,.board-scene.camera-impact,.board-scene.camera-reward,
  body[data-graphics="3d"] .tile.build-changed .iso-build,
  body[data-graphics="3d"] .tile.owner-changed .tile-3d { animation:none!important; }
}

/* ==========================================================================\n   LEGENDARY ULTRA 3D v70 — hybrid WebGL ambience + cinematic board pass\n   ========================================================================== */
:root { --ultra-cyan:#70e7ff; --ultra-gold:#ffd966; --ultra-ink:#06101f; }

/* Wider, cleaner premium lobby */
.graphics3d-v70 body[data-graphics="3d"] .splash-card.lobby-open {
  width:min(1260px,calc(100vw - 34px));
  border-radius:30px;
  box-shadow:0 44px 100px #00152f8c,0 0 0 1px #ffffff12 inset,0 0 90px #47d9ff0d inset;
}
.graphics3d-v70 body[data-graphics="3d"] .splash-card.lobby-open::after {
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(110deg,transparent 8%,#8ee9ff22 28%,transparent 44%,transparent 68%,#ffd75c22 88%,transparent);
  mix-blend-mode:screen; animation:lobbyAura70 7s ease-in-out infinite alternate;
}
@keyframes lobbyAura70 { to{filter:hue-rotate(8deg) brightness(1.16); opacity:.72} }
.graphics3d-v70 .hero-badges span { box-shadow:0 7px 18px #001c3280,inset 0 0 16px #60dfff0c; }

/* True WebGL particle field behind the board */
.ambient3d-canvas {
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none;
  opacity:.72; mix-blend-mode:screen; filter:drop-shadow(0 0 7px #69dfff66);
  transition:opacity .3s ease,filter .3s ease;
}
.ambient3d-canvas.eco,.no-webgl3d .ambient3d-canvas { display:none; }
.stage#stage3d { z-index:1!important; }
.scene-atmosphere { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.9; }
.scene-atmosphere::before {
  content:""; position:absolute; inset:-15%;
  background:radial-gradient(circle at 50% 12%,#82eaff22,transparent 29%),radial-gradient(circle at 50% 105%,#00162eaa,transparent 55%);
  animation:atmosBreath70 6s ease-in-out infinite alternate;
}
.scene-atmosphere i { position:absolute; border-radius:50%; filter:blur(42px); opacity:.18; }
.scene-atmosphere i:nth-child(1){width:32vw;height:13vw;left:-8vw;top:18vh;background:#6edfff;animation:fogDrift70 16s ease-in-out infinite alternate}
.scene-atmosphere i:nth-child(2){width:28vw;height:11vw;right:-6vw;top:42vh;background:#ffd666;animation:fogDrift70 19s ease-in-out -4s infinite alternate-reverse}
.scene-atmosphere i:nth-child(3){width:38vw;height:12vw;left:32vw;bottom:-3vh;background:#397cff;animation:fogDrift70 22s ease-in-out -7s infinite alternate}
@keyframes atmosBreath70{to{opacity:.72;transform:scale(1.035)}}
@keyframes fogDrift70{to{transform:translate3d(8vw,3vh,0) scale(1.12)}}

/* Camera follow/orbit variables */
.board-scene {
  --orbit-y:0deg; --orbit-z:0deg; --follow-x:0px; --follow-y:0px; --follow-rz:0deg;
  transform:
    translate3d(var(--follow-x),calc(var(--cam-y) + var(--follow-y)),0)
    rotateX(calc(var(--cam-rx) + var(--parallax-x)))
    rotateY(calc(var(--cam-ry-base) + var(--parallax-y) + var(--orbit-y)))
    rotateZ(calc(var(--cam-rz) + var(--follow-rz) + var(--orbit-z)))
    scale(var(--cam-scale));
  transition:transform .72s cubic-bezier(.18,.82,.18,1),filter .28s ease;
}
.board-scene.scene-enter3d { animation:sceneEnter70 1.05s cubic-bezier(.12,.82,.15,1) both; }
@keyframes sceneEnter70 {
  0%{opacity:0;filter:blur(10px) brightness(1.5);scale:.82;translate:0 42px}
  60%{opacity:1;filter:blur(0) brightness(1.08)}
  100%{scale:1;translate:0 0;filter:none}
}
.board-scene.camera-focus { filter:brightness(1.045) saturate(1.05) drop-shadow(0 0 16px #75e6ff1c); }

/* Floating world ring under the physical board */
.world-ring3d {
  position:absolute; inset:-8%; border-radius:50%; pointer-events:none; z-index:-1;
  border:2px solid #8ce9ff24;
  box-shadow:0 0 35px #5fdfff18,inset 0 0 55px #ffd9690c;
  transform:translateZ(-56px) rotateX(68deg) scaleY(.40);
  background:repeating-conic-gradient(from 0deg,#7fe8ff25 0 1deg,transparent 1deg 15deg);
  mask:radial-gradient(circle,transparent 0 55%,#000 56% 58%,transparent 59%);
  animation:ringSpin70 26s linear infinite;
}
@keyframes ringSpin70 { to{rotate:360deg} }

/* Board material/shadows feel heavier */
.graphics3d-v70 body[data-graphics="3d"] .board-scene .board {
  box-shadow:0 20px 0 #2b1608,0 27px 0 #160a03,0 52px 90px #0009,inset 0 0 0 7px #ffd85b,inset 0 0 0 12px #9c651d,inset 0 0 44px #ffda6130,0 0 0 1px #fff2;
}
.graphics3d-v70 body[data-graphics="3d"] .board::after {
  content:"";position:absolute;inset:14px;border-radius:11px;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 28px #0005,0 0 22px #ffe5790c;
}
.graphics3d-v70 body[data-graphics="3d"] .center { position:relative; isolation:isolate; }
.graphics3d-v70 body[data-graphics="3d"] .center::before {
  content:"";position:absolute;inset:4%;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg,transparent,#75ecff18 14%,transparent 30%,#fff1a316 48%,transparent 66%,#75ecff18 82%,transparent);
  mix-blend-mode:screen;animation:centerWater70 12s linear infinite;
}
@keyframes centerWater70 { to{transform:rotate(360deg)} }

/* Active square receives a real cinematic spotlight */
body[data-graphics="3d"] .tile.turn-focus3d .tile-3d {
  filter:brightness(1.09) saturate(1.12);
  box-shadow:0 9px 0 var(--edge),0 18px 18px #0006,0 0 0 2px #fff7,0 0 30px #7ee8ff80,inset 0 0 18px #fff3;
}
body[data-graphics="3d"] .tile.turn-focus3d .tile-3d::after {
  opacity:.9; background:radial-gradient(circle at 50% 35%,#fff8,transparent 42%);
}
body[data-graphics="3d"] .tile.inspecting3d .tile-3d { transform:translateZ(32px) scale(1.035);filter:brightness(1.12) saturate(1.12); }

/* Buildings become more substantial and cast deeper shadows */
body[data-graphics="3d"] .iso-build { transform:translateZ(44px); }
body[data-graphics="3d"] .iso-build img {
  filter:drop-shadow(0 17px 5px #0008) drop-shadow(0 0 13px color-mix(in srgb,var(--owner,#fff) 72%,transparent));
}
body[data-graphics="3d"] .tile.build-changed .iso-build::after {
  content:"";position:absolute;inset:-22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff7b8aa 0 5%,#ffd95a55 18%,transparent 58%);
  animation:buildFlash70 .8s ease-out both;
}
@keyframes buildFlash70{from{opacity:1;transform:scale(.45)}to{opacity:0;transform:scale(1.45)}}

/* Token depth + active-player aura */
body[data-graphics="3d"] .token { filter:drop-shadow(0 15px 5px #0009) drop-shadow(0 0 4px #fff3); }
body[data-graphics="3d"] .token.me { filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 15px #ffe36c) drop-shadow(0 16px 6px #000a); animation:tokenAura70 1.9s ease-in-out infinite alternate; }
@keyframes tokenAura70{to{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 24px #ffe36c) drop-shadow(0 18px 7px #000a)}}

/* 3D tile inspector */
.tile-lens3d {
  position:fixed;right:18px;bottom:132px;z-index:215;width:min(255px,calc(100vw - 30px));
  padding:11px;border:1px solid #6fe4ff78;border-radius:17px;
  background:linear-gradient(145deg,#0c2944f2,#061525f5);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 18px 40px #00101faa,0 0 25px #5de5ff16,inset 0 0 0 1px #ffffff0d;
  transform-origin:right bottom;animation:lensIn70 .2s ease-out both;direction:rtl;
}
@keyframes lensIn70{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.lens-head{display:flex;align-items:center;gap:8px;border-bottom:1px solid #ffffff16;padding-bottom:7px;margin-bottom:5px}
.lens-head span{font-size:9px;color:#75e8ff;background:#08213a;border:1px solid #65dfff50;border-radius:999px;padding:2px 6px}
.lens-head b{font-size:14px;color:#ffe47b}
.lens-body{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.lens-body p{margin:0;padding:6px 7px;border-radius:9px;background:#ffffff08;display:flex;flex-direction:column;gap:1px}
.lens-body small{font-size:8px;color:#83b6d4}.lens-body strong{font-size:10px;color:#fff}

/* Camera bar now behaves like a compact pro toolbar */
.camera-dock { max-width:calc(100vw - 18px); overflow-x:auto; scrollbar-width:none; }
.camera-dock::-webkit-scrollbar{display:none}
.camera-dock button{white-space:nowrap}
body[data-camera="orbit"] .camera-dock [data-camera="orbit"]{box-shadow:inset 0 0 16px #55ddff1b,0 0 16px #55ddff20}

/* Quality tiers */
body[data-graphics-quality="high"] .scene-atmosphere{opacity:.66}
body[data-graphics-quality="high"] .world-ring3d{opacity:.7}
body[data-graphics-quality="low"] .scene-atmosphere,body[data-graphics-quality="low"] .world-ring3d{display:none}
body[data-graphics-quality="low"] .iso-build img,body[data-graphics-quality="low"] .token.me{animation:none!important}
body[data-graphics-quality="low"] .board-scene{transition-duration:.28s}

/* Improve desktop board presence */
@media(min-width:1180px){
  .board-scene{width:min(calc(100svh - 184px),calc(100vw - 470px),900px)}
  .stage#stage3d{padding-top:62px;padding-bottom:118px}
  .tile-lens3d{right:24px;bottom:145px}
}
@media(max-width:900px){
  .tile-lens3d{right:8px;bottom:112px;width:min(218px,56vw);padding:8px}
  .lens-body{grid-template-columns:1fr}.lens-head b{font-size:11px}
  .camera-dock{max-width:72vw}
  .camera-dock button{min-width:32px}
}
@media(max-width:560px){
  .tile-lens3d{display:none!important}
  .world-ring3d{inset:-3%}
  .ambient3d-canvas{opacity:.48}
  body[data-camera="orbit"] .board-scene{--cam-scale:.90!important}
}
@media(prefers-reduced-motion:reduce){
  .world-ring3d,.scene-atmosphere::before,.scene-atmosphere i,.center::before,.token.me,.splash-card.lobby-open::after{animation:none!important}
}


/* =========================================================
   CLASSIC MILLIONAIRE 3D v80
   إعادة تخيل أصلية للجو الكلاسيكي لألعاب السفر والثراء.
   لا تستخدم أصولاً أو شعارات أو واجهات من اللعبة الأصلية.
   ========================================================= */
.classic-millionaire {
  --classic-brown:#4a2b14;
  --classic-brown2:#29170a;
  --classic-cream:#fff4d4;
  --classic-gold:#f4c64d;
  --classic-blue:#2b83d8;
  --classic-red:#e94f4f;
  --classic-pink:#e95ca4;
}
.classic-title-mark{
  display:inline-block;margin-inline-start:8px;padding:2px 11px 5px;border-radius:12px;
  background:linear-gradient(#ffed8e,#d99a11);color:#4a2b14;text-shadow:none;
  box-shadow:inset 0 1px #fff8c9,0 4px 0 #80520a,0 7px 16px #0005;font-size:.58em;vertical-align:middle;
}
.classic-unofficial{margin:10px auto 4px;max-width:760px;color:#bcd6eb;font-size:12px;opacity:.88}
.classic-millionaire .table-screen{
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.18),transparent 24%),
    linear-gradient(180deg,rgba(38,178,245,.14),rgba(13,99,160,.2)),
    url("../img/sky-cartoon.webp") center top/cover;
}
.classic-millionaire .board-scene{--cam-tilt:14deg}
.classic-millionaire .board{
  background:linear-gradient(145deg,#56351b,#2f1b0d 54%,#452812);
  border-radius:10px;
  padding:7px;
  box-shadow:0 18px 0 #1b0d05,0 30px 48px #00101f66,inset 0 0 0 4px #ffe28a,inset 0 0 0 10px #9e691e;
}
.classic-millionaire .tile-3d{
  inset:1px 2px 10px;
  border-radius:5px;
  background:linear-gradient(180deg,#fffdf5,#f3e1b6 75%,#d8b36d);
  box-shadow:0 10px 0 #704719,0 14px 12px #0005,inset 0 1px 0 #fff;
}
.classic-millionaire .tile .group-bar{height:22%;border-radius:4px 4px 0 0;box-shadow:inset 0 -2px rgba(0,0,0,.16)}
.classic-millionaire .tile .plate{background:linear-gradient(180deg,#fffdf6ee,#f7e9caef);border-top:1px solid #8f6a31;color:#41270e}
.classic-millionaire .tile .plate b{font-weight:900}
.classic-millionaire .tile.owner-mark .tile-3d{box-shadow:0 10px 0 #5f3b16,0 0 0 4px var(--owner),0 15px 14px #0005}
.classic-millionaire .tile.here .tile-3d{filter:brightness(1.14);box-shadow:0 10px 0 #654018,0 0 0 4px #fff,0 0 0 8px #ffd755,0 16px 20px #0006}
.classic-millionaire .center.classic-world-center{
  border-radius:10px;
  margin:3.2%;
  background:
    radial-gradient(circle at 52% 45%,#f8e9c8 0 5%,transparent 5.5%),
    radial-gradient(ellipse at 35% 39%,#c9b17a55 0 8%,transparent 8.5%),
    radial-gradient(ellipse at 61% 41%,#c9b17a55 0 11%,transparent 11.5%),
    radial-gradient(ellipse at 68% 58%,#c9b17a55 0 7%,transparent 7.5%),
    radial-gradient(ellipse at 44% 65%,#c9b17a55 0 6%,transparent 6.5%),
    linear-gradient(135deg,#eee1bd,#d9c394);
  box-shadow:inset 0 0 0 7px #f5cc58,inset 0 0 0 12px #8d5b1d,0 11px 20px #0006;
  place-items:center;padding:0;overflow:hidden;
}
.classic-world-center::before{
  content:"";position:absolute;inset:12%;border-radius:50%;border:2px solid #8f714438;
  box-shadow:0 0 0 12px #fff2,0 0 0 13px #9c7c4a2c;transform:rotate(-10deg)
}
.classic-map-lines{position:absolute;inset:0;opacity:.45;background:
  linear-gradient(90deg,transparent 49.6%,#8a6e3b30 50%,transparent 50.4%),
  linear-gradient(0deg,transparent 49.6%,#8a6e3b30 50%,transparent 50.4%);background-size:18% 18%;mask-image:radial-gradient(circle,#000 0 62%,transparent 72%)}
.classic-center-brand{position:relative;z-index:3;display:grid;place-items:center;gap:3px;color:#4b3016;text-shadow:0 1px #fff8d6}
.classic-center-brand small{letter-spacing:.22em;font:900 clamp(8px,1vw,12px)/1 Cairo,sans-serif;color:#8c6b32}
.classic-center-brand b{font-size:clamp(18px,3.2vw,39px);line-height:1;color:#6b3e14}
.classic-center-brand span{font-size:clamp(8px,1vw,12px);font-weight:900;color:#76542b}
.classic-center-dice{position:relative;z-index:4;display:flex;gap:10px;margin-top:9px;transform:scale(.8) rotate(-5deg);filter:drop-shadow(0 10px 7px #0004)}
.classic-center-dice .die{width:50px;height:50px}
.classic-world-center .banner{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);min-width:38%;background:linear-gradient(#4b2b14,#251309);border-color:#f2cb5a;border-radius:7px;padding:5px 12px}
.classic-world-center .banner p{color:#fff1a7}

/* HUD corners inspired by classic competitive board-game layout, rebuilt from scratch */
.classic-millionaire .hud-players{top:8px;left:8px;right:8px}
.classic-millionaire .hud-col{gap:12px}
.classic-millionaire .phud{
  min-width:240px;max-width:270px;border-radius:9px;padding:5px 12px 5px 6px;
  background:linear-gradient(180deg,#315c82,#183650 64%,#11283d);border:2px solid #f4cf63;
  box-shadow:0 5px 0 #7a5419,0 9px 18px #0005,inset 0 0 0 1px #ffffff18;
}
.classic-millionaire .phud>img{width:58px;height:58px;border-radius:7px;border:2px solid #f4c64d;background:#0c2238}
.classic-millionaire .phud-meta{padding-inline-start:4px}
.classic-millionaire .phud-meta>b{font-size:14px;color:#fff}
.classic-millionaire .phud .char-lv,.classic-millionaire .phud .xp-bar,.classic-millionaire .phud .honor,.classic-millionaire .phud .laps,.classic-millionaire .phud .phud-cards{display:none!important}
.classic-millionaire .phud .cash-coin{font-size:13px!important;color:#ffe17d!important;font-weight:900}
.classic-millionaire .phud .worth{font-size:11px!important;color:#bfe5ff!important}
.classic-rank-badge{
  position:absolute;top:50%;inset-inline-start:-24px;transform:translateY(-50%);width:43px;height:43px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#73c5ff,#1266b5 72%);border:3px solid #f6d15c;color:#fff;font-weight:900;font-size:21px;
  box-shadow:0 4px 0 #704708,0 7px 12px #0006;text-shadow:0 2px #06406e;z-index:4
}
.classic-millionaire .phud.active .classic-rank-badge{animation:classicRankPulse 1s ease-in-out infinite alternate}
@keyframes classicRankPulse{to{filter:brightness(1.25);transform:translateY(-50%) scale(1.08)}}
.classic-millionaire .hud-col.left .classic-rank-badge{inset-inline-start:auto;inset-inline-end:-24px}
.classic-millionaire .round-chip{
  top:8px;border-radius:9px;padding:8px 22px;background:linear-gradient(#ffe87f,#e1a524);border:2px solid #fff4b1;
  box-shadow:0 5px 0 #80530e,0 8px 18px #0005;font-size:14px
}
.classic-millionaire .clock{top:49px!important}

/* Classic purchase dialog rebuilt with original HTML/CSS */
.classic-millionaire .popup{background:#0007;backdrop-filter:blur(2px)}
.classic-millionaire .pop{width:min(500px,94vw);padding:0;border-radius:14px;border:3px solid #71491b;background:linear-gradient(#f8eed2,#e9d6a5);box-shadow:0 26px 60px #0008,inset 0 0 0 2px #fff8dd;color:#3e2a12}
.classic-buy-modal{overflow:hidden;border-radius:10px}
.classic-buy-title{padding:9px 14px;background:linear-gradient(#5b3517,#2e180b);color:#fff6d5;font-weight:900;font-size:23px;border-bottom:3px solid #d7a53e;text-shadow:0 2px #000}
.classic-buy-card{padding:14px 18px 8px;color:#3d2a12}
.classic-buy-card .pop-icon{margin:0 auto 2px;width:74px;height:74px}
.classic-buy-card .pop-icon img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 7px 4px #0003)}
.classic-buy-card h3{color:#543718;font-size:20px;margin:4px 0 10px}
.classic-buy-warning{background:#fff9e5;border:1px dashed #c99c42;border-radius:999px;padding:7px 10px;color:#875e1f!important;font-size:12px;font-weight:900}
.classic-price-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 8px;border-top:1px dashed #b99759;color:#573b1d}
.classic-price-row b{font-size:20px;color:#6a451a}
.classic-price-row.cash{background:#fff9e4;border-radius:9px;border:1px solid #d8b66d;margin-top:7px}
.classic-buy-card .pop-sub,.classic-buy-card .mono-hint{color:#6a4b22!important;background:#ffffff88;border-radius:8px;padding:6px 8px;margin:7px 0}
.classic-buy-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 12px;background:#e1c688}
.classic-buy-actions button{border-radius:8px;min-height:50px;font-size:16px}
.classic-buy-actions .gold{background:linear-gradient(#ffe274,#f0a900);color:#4a3009;border:2px solid #8e5d0e;box-shadow:inset 0 1px #fff5ae,0 3px 0 #8e5d0e}
.classic-buy-actions .ghost{background:linear-gradient(#74c8ee,#2b8aca);color:#fff;border:2px solid #0b568a;box-shadow:inset 0 1px #d8f5ff,0 3px 0 #0b568a}

.classic-millionaire .dice-hud{border-radius:12px;background:linear-gradient(#294c70,#10283f);border:2px solid #f1cb57;box-shadow:0 5px 0 #7b5116,0 10px 24px #0006;padding:7px 10px}
.classic-millionaire .roll-orb{border-radius:10px;background:linear-gradient(#ffe675,#e9a413);color:#3c270a;box-shadow:0 4px 0 #84540f;font-size:18px}
.classic-millionaire .gauge-wrap{width:150px}
.classic-millionaire .item-btn{border-radius:7px}
.classic-millionaire .ticker{background:#18324be8;border:2px solid #d4ac4d;border-radius:7px}

@media(max-width:760px){
  .classic-millionaire .phud{min-width:0;width:calc(50vw - 18px);max-width:190px;padding:3px 5px;gap:5px}
  .classic-millionaire .phud>img{width:38px;height:38px}
  .classic-rank-badge{width:30px;height:30px;font-size:14px;inset-inline-start:-13px;border-width:2px}
  .classic-millionaire .hud-col.left .classic-rank-badge{inset-inline-end:-13px}
  .classic-millionaire .phud-meta>b{font-size:11px}.classic-millionaire .phud .cash-coin{font-size:10px!important}.classic-millionaire .phud .worth{font-size:9px!important}
  .classic-center-brand b{font-size:20px}.classic-center-brand span{display:none}.classic-center-dice{transform:scale(.54)}
  .classic-world-center .banner{bottom:4%;min-width:56%;padding:3px 8px}.classic-world-center .banner p{font-size:9px}
  .classic-millionaire .round-chip{font-size:10px;padding:5px 9px}
  .classic-buy-title{font-size:19px}.classic-buy-card{padding:10px 11px 5px}.classic-price-row{padding:6px}.classic-price-row b{font-size:16px}
}

/* =========================================================
   NOSTALGIA CLASSIC v81
   واجهة أصلية بروح ألعاب الثروة العربية الكلاسيكية.
   ========================================================= */
.classic-millionaire{
  --v81-navy:#082a49;
  --v81-navy2:#031b31;
  --v81-sky:#079de4;
  --v81-cream:#fff5d5;
  --v81-cream2:#ead19b;
  --v81-coffee:#5a3014;
  --v81-coffee2:#2b1609;
  --v81-gold:#ffcf44;
  --v81-blue:#42a9ea;
}

/* game sky: brighter, cleaner, nostalgic */
.classic-millionaire .table-screen{
  background:
    linear-gradient(180deg,rgba(0,153,226,.08),rgba(0,104,171,.10)),
    url("../img/sky-cartoon.webp") center top/cover fixed;
}
.classic-millionaire .scene-atmosphere{opacity:.35}
.classic-millionaire .ambient3d-canvas{opacity:.24}
.classic-millionaire .world-ring3d{opacity:.18}

/* classic centered board proportions */
.classic-millionaire .stage#stage3d{
  padding:82px 12px 122px;
  perspective:1850px;
  perspective-origin:50% 48%;
}
.classic-millionaire .board-scene{
  width:min(calc(100vh - 202px),calc(100vw - 300px),790px);
  --cam-rx:8deg;
  --cam-scale:.98;
  --cam-y:18px;
}
.classic-millionaire body[data-camera="cinematic"] .board-scene,
body.classic-millionaire[data-camera="cinematic"] .board-scene{--cam-rx:8deg!important;--cam-scale:.98!important}
.classic-millionaire body[data-camera="top"] .board-scene,
body.classic-millionaire[data-camera="top"] .board-scene{--cam-rx:0deg!important;--cam-scale:1!important}

.classic-millionaire .board-scene .board{
  border-radius:13px!important;
  padding:7px!important;
  background:linear-gradient(145deg,#573116,#351a09 58%,#4a260e)!important;
  box-shadow:
    0 11px 0 #1d0d04,
    0 14px 0 #b97c1e,
    0 18px 0 #5a3211,
    0 34px 50px #0013266b,
    inset 0 0 0 5px #ffe68c,
    inset 0 0 0 9px #c88a28,
    inset 0 0 0 12px #6b3b12!important;
}
.classic-millionaire .board-scene .board::after{inset:13px!important;border-radius:8px!important;box-shadow:inset 0 0 22px #0005!important}

/* tiles become compact cream cards with colored title bands */
.classic-millionaire .tile-3d{
  inset:1px 2px 8px!important;
  border-radius:4px!important;
  background:linear-gradient(180deg,#fffaf0 0%,#f5e5be 76%,#dbc07e 100%)!important;
  border:1px solid #84531c!important;
  box-shadow:0 8px 0 #69400f,0 11px 9px #0004,inset 0 1px #fff!important;
}
.classic-millionaire .tile-3d::after{border-radius:3px;opacity:.58}
.classic-millionaire .tile .group-bar{
  height:18%!important;
  border-radius:3px 3px 0 0!important;
  border-bottom:1px solid #6e461b;
  box-shadow:inset 0 1px #fff7,inset 0 -2px #0002!important;
}
.classic-millionaire .tile .plate{
  background:linear-gradient(180deg,#fffdf8f2,#f8e8c7f4)!important;
  color:#43260d!important;
  border-top:1px solid #9c6f2f!important;
  text-shadow:0 1px #fff;
}
.classic-millionaire .tile .plate b{font-size:clamp(7px,1.05vh,11px)!important}
.classic-millionaire .tile .plate span{font-size:clamp(6px,.82vh,9px)!important;color:#6a431a}
.classic-millionaire .tile.owner-mark .tile-3d{
  box-shadow:0 8px 0 #69400f,0 0 0 3px var(--owner),0 12px 10px #0005!important;
}
.classic-millionaire .tile.here .tile-3d{
  outline:0!important;
  box-shadow:0 8px 0 #69400f,0 0 0 3px #fff,0 0 0 6px #ffd64d,0 0 24px #fff2a8!important;
}

/* central ocean/compass area - original artwork built from project assets */
.classic-millionaire .center.classic-world-center{
  margin:4.6%!important;
  border-radius:50%!important;
  padding:0!important;
  place-items:center!important;
  background:
    radial-gradient(circle at 50% 47%,#57e9f2 0 3%,transparent 3.5%),
    radial-gradient(circle at 48% 50%,#25d0e7 0 44%,#0cb0d2 45% 67%,#0878a4 68% 70%,#f7cc4f 70.5% 73%,#7d4c16 73.5% 77%,transparent 77.5%),
    linear-gradient(135deg,#2bd0e6,#0b8cbc)!important;
  box-shadow:
    inset 0 0 0 8px #f8d45b,
    inset 0 0 0 13px #8d5715,
    inset 0 0 40px #005b8577,
    0 11px 20px #0006!important;
  overflow:hidden;
}
.classic-millionaire .classic-world-center::before{
  inset:10%!important;
  border:1px solid #dffaff55!important;
  box-shadow:0 0 0 14px #ffffff0c,0 0 0 15px #006b8e33!important;
}
.classic-ocean-glow{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle,#8effff44,transparent 65%);filter:blur(5px);animation:v81Water 5s ease-in-out infinite alternate}
@keyframes v81Water{to{transform:scale(1.06);opacity:.62}}
.classic-mini-island{
  position:absolute;width:21%;height:21%;z-index:2;border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,#8edb49 0 34%,#5baf37 35% 48%,#e6c468 49% 58%,transparent 59%);
  filter:drop-shadow(0 9px 5px #004f6d88);
  display:grid;place-items:center;
}
.classic-mini-island img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 7px 3px #00364d66)}
.classic-mini-island.island-a{left:22%;top:20%;transform:rotate(-7deg)}
.classic-mini-island.island-b{right:20%;top:18%;transform:rotate(6deg)}
.classic-mini-island.island-c{left:24%;bottom:19%;transform:rotate(5deg)}
.classic-mini-island.island-d{right:22%;bottom:20%;transform:rotate(-5deg)}
.classic-compass{
  position:absolute;left:50%;top:49%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(45deg);
  z-index:3;display:grid;place-items:center;
}
.classic-compass::before,.classic-compass::after{content:"";position:absolute;inset:22%;background:linear-gradient(135deg,#fff2a0,#c88711);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 4px 2px #69410a88)}
.classic-compass::after{transform:rotate(45deg) scale(.75);background:linear-gradient(135deg,#7c4a12,#ffe585)}
.classic-compass b{position:relative;z-index:2;font-size:clamp(26px,3.1vw,48px);color:#f8d04d;transform:rotate(-45deg);text-shadow:0 3px #78490e}
.classic-compass i{position:absolute;inset:-18%;border:2px solid #fff8;border-radius:50%;box-shadow:0 0 0 5px #007a9a44}
.classic-center-brand{z-index:5!important;position:absolute!important;top:4%;left:50%;transform:translateX(-50%);width:75%;gap:0!important}
.classic-center-brand small{color:#fff5b3!important;letter-spacing:.08em!important;text-shadow:0 2px #05536c;font-size:clamp(7px,.85vw,10px)!important}
.classic-center-brand b{color:#fff!important;font-size:clamp(13px,2vw,23px)!important;text-shadow:0 3px #7b4a11,0 0 10px #0a6e8e!important}
.classic-center-brand span{display:none!important}
.classic-center-dice{z-index:5!important;position:absolute!important;left:50%;top:49%;transform:translate(-50%,-50%) scale(.60) rotate(-5deg)!important;opacity:.88}
.classic-world-center .banner{
  z-index:6!important;bottom:7%!important;min-width:34%!important;max-width:66%;
  background:linear-gradient(#283a4a,#101c28)!important;border:2px solid #f3ce58!important;border-radius:999px!important;padding:5px 12px!important;
  box-shadow:0 4px 0 #70450c,0 8px 12px #0005!important;
}
.classic-world-center .banner p{font-size:clamp(8px,.95vw,12px)!important;color:#fff4ae!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* top center: stage pill + classic information ribbon */
.classic-top-center{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:42;
  display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;
}
.classic-top-center .round-chip{position:static!important;transform:none!important;min-width:118px;text-align:center}
.classic-stage-bar{
  display:flex;align-items:center;gap:4px;direction:rtl;
  background:linear-gradient(180deg,#183954f4,#071d31f6);border:2px solid #c99c31;border-radius:9px;padding:3px 5px;
  box-shadow:0 4px 0 #5d3c0c,0 8px 16px #0005,inset 0 0 0 1px #ffffff12;
}
.classic-stage-bar span,.classic-stage-bar b{display:block;border-radius:5px;padding:4px 9px;font-size:10px;line-height:1.15;font-weight:900;white-space:nowrap}
.classic-stage-bar b{background:#0b2842;color:#fff0a4;border:1px solid #355d7d}
.classic-stage-bar span:first-child{background:#24496b;color:#dff3ff}
.classic-stage-bar span:last-child{background:#673d14;color:#ffe581}

/* player panels look like compact corner status cards */
.classic-millionaire .hud-players{top:6px;left:7px;right:7px}
.classic-millionaire .hud-col{gap:9px}
.classic-millionaire .phud{
  width:235px;min-width:235px;max-width:235px;height:82px;
  border-radius:11px;padding:6px 9px 5px 7px;gap:8px;
  background:linear-gradient(180deg,#17476df7,#082741fa 67%,#061d31fa)!important;
  border:2px solid #e5bb43!important;
  box-shadow:0 4px 0 #7e5414,0 7px 13px #0005,inset 0 0 0 1px #77caff22!important;
}
.classic-millionaire .phud>img{width:58px;height:64px;margin:0!important;border-radius:7px!important;align-self:center}
.classic-millionaire .phud-meta{min-width:0;line-height:1.2}
.classic-millionaire .phud-meta>b{font-size:14px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.classic-millionaire .phud .cash-coin{font-size:12px!important}
.classic-millionaire .phud .worth{font-size:10px!important;color:#d0e9ff!important;white-space:nowrap}
.classic-millionaire .phud-dots{gap:2px!important}.classic-millionaire .phud-dots s{width:7px;height:7px}
.classic-rank-badge{width:36px!important;height:36px!important;font-size:17px!important;inset-inline-start:-20px!important}
.classic-millionaire .hud-col.left .classic-rank-badge{inset-inline-end:-20px!important}

/* Bottom control tray */
.classic-millionaire .hud-dice{bottom:8px!important}
.classic-millionaire .dice-hud{
  min-width:min(650px,72vw);height:92px;align-items:center!important;gap:10px!important;
  border-radius:13px!important;padding:8px 12px!important;
  background:linear-gradient(180deg,#173d60f8,#081f35fc)!important;border:3px solid #ddb345!important;
  box-shadow:0 5px 0 #70480e,0 10px 20px #0007,inset 0 0 0 1px #ffffff1e!important;
}
.classic-dice-caption{direction:rtl;display:grid;align-content:center;text-align:right;min-width:98px;padding:0 4px;border-left:1px solid #ffffff20}
.classic-dice-caption b{font-size:13px;color:#ffe274}.classic-dice-caption span{font-size:9px;color:#b9d6ec;line-height:1.4}
.classic-millionaire .roll-orb{order:-5;width:72px;height:72px;border-radius:12px!important;font-size:19px!important;box-shadow:0 5px 0 #85540d!important}
.classic-millionaire .dice-pair{align-items:center}.classic-millionaire .die3d{width:46px;height:46px}
.classic-millionaire .gauge-wrap{width:145px!important}
.classic-millionaire .gauge{height:16px}.classic-millionaire .gauge-labels{font-size:9px}
.classic-millionaire .side-items{display:flex!important;gap:5px!important}
.classic-millionaire .item-btn{padding:8px 10px!important;border-radius:7px!important;font-size:10px;box-shadow:0 3px 0 #163a7a!important}
.classic-millionaire .item-btn.risk{box-shadow:0 3px 0 #80510d!important}

/* chat/log panel in lower left */
.classic-chat-shell{
  position:absolute;left:8px;bottom:10px;z-index:30;width:min(235px,24vw);pointer-events:auto;
  border:2px solid #d5ac42;border-radius:8px;overflow:hidden;background:#071f34e8;box-shadow:0 4px 0 #68420c,0 8px 14px #0005;
}
.classic-chat-title{font-size:10px;font-weight:900;color:#ffe274;background:#163d5ce8;padding:4px 8px;border-bottom:1px solid #b7882a;text-align:right}
.classic-chat-shell .ticker{position:static!important;width:auto!important;max-height:72px!important;border:0!important;border-radius:0!important;background:transparent!important;padding:5px 8px!important;font-size:10px!important;box-shadow:none!important}

/* purchase dialog v81 */
.classic-millionaire .popup{background:#00111f80!important;backdrop-filter:blur(3px) saturate(.8)!important}
.classic-millionaire .pop{width:min(500px,94vw)!important;border-radius:11px!important;border:3px solid #714516!important;background:linear-gradient(#f9efd3,#e8d09a)!important;box-shadow:0 24px 55px #0008,inset 0 0 0 2px #fff8df!important}
.classic-buy-title{font-size:22px!important;padding:9px 14px!important;border-radius:7px 7px 0 0;background:linear-gradient(#603515,#2d1508)!important;border-bottom:3px solid #d8a641!important}
.classic-buy-card{padding:12px 16px 8px!important}
.classic-buy-card .pop-icon{width:68px!important;height:68px!important;background:#fff9df;border-radius:18px;box-shadow:inset 0 0 0 2px #d8b65a,0 5px 10px #0002;display:grid;place-items:center}
.classic-buy-card .pop-icon img{width:60px!important;height:60px!important}
.classic-buy-card h3{font-size:19px!important;margin:5px 0 9px!important}
.classic-buy-warning{padding:6px 10px!important;margin-bottom:9px!important}
.classic-price-row{padding:7px 8px!important}.classic-price-row b{font-size:18px!important}
.classic-upgrade-track{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:8px 0 2px;padding:7px;background:#f7edd0;border-radius:8px;border:1px solid #d1ab5e}
.classic-upgrade-track span{display:grid;grid-template-rows:28px auto auto;place-items:center;min-width:0;border-left:1px dashed #c39a50;padding:2px 3px}.classic-upgrade-track span:last-child{border-left:0}
.classic-upgrade-track img{width:36px;height:28px;object-fit:contain;filter:drop-shadow(0 3px 2px #0003)}
.classic-upgrade-track b{font-size:9px;color:#5a3616}.classic-upgrade-track em{font-size:8px;font-style:normal;color:#876025;font-weight:900}
.classic-buy-actions{padding:9px 11px 11px!important}.classic-buy-actions button{min-height:48px!important;font-size:15px!important}

/* Keep camera tools available, but visually secondary like a settings strip */
.classic-millionaire .camera-dock{right:8px!important;left:auto!important;bottom:10px!important;transform:none!important;opacity:.32;transition:opacity .2s ease}
.classic-millionaire .camera-dock:hover{opacity:1}
.classic-millionaire .camera-dock button span{display:none!important}
.classic-millionaire .camera-dock button{width:32px;height:30px;padding:0!important}

/* Lobby becomes a wide classic game hall instead of a phone-like card */
.classic-millionaire .splash{padding:18px 20px;background:linear-gradient(180deg,#079fe02a,#035b9b40),url("../img/sky-cartoon.webp") center/cover fixed}
.classic-millionaire .splash-card{width:min(1040px,96vw)!important;border-radius:18px!important;padding:18px 22px 24px!important;background:linear-gradient(180deg,#123d61f4,#071f36fa)!important;border:3px solid #e6bc45!important;box-shadow:0 18px 50px #00203688,inset 0 0 45px #65c9ff0d!important}
.classic-millionaire .splash h1{font-size:clamp(32px,4vw,48px)!important;margin:2px 0 5px!important}
.classic-millionaire .splash-heroes img{width:60px!important;height:60px!important}
.classic-millionaire .hero-badges{margin:8px 0!important}.classic-millionaire .lead{max-width:850px;margin:6px auto!important;font-size:13px}
.classic-millionaire #lobbyPanel{max-width:980px;margin:0 auto}
.classic-millionaire .lobby-hub{grid-template-columns:repeat(9,minmax(0,1fr))!important;gap:5px!important}
.classic-millionaire .hub-tab{font-size:11px!important;padding:8px 5px!important;border-radius:7px!important}
.classic-millionaire .char-pick{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.classic-millionaire .char-card{min-height:128px;border-radius:10px!important}

@media(max-width:1100px){
  .classic-millionaire .board-scene{width:min(calc(100vh - 205px),calc(100vw - 80px),760px)}
  .classic-millionaire .phud{width:205px;min-width:205px;max-width:205px}
  .classic-millionaire .dice-hud{min-width:min(590px,78vw)}
  .classic-chat-shell{width:190px}
}

@media(max-width:760px){
  .classic-millionaire .stage#stage3d{padding:86px 3px 122px;align-items:center}
  .classic-millionaire .board-scene{width:min(calc(100vh - 220px),calc(100vw - 8px));--cam-rx:2deg;--cam-scale:.97}
  .classic-top-center{top:4px;gap:4px}.classic-stage-bar{max-width:62vw;overflow:hidden}.classic-stage-bar span,.classic-stage-bar b{font-size:8px;padding:3px 5px}.classic-stage-bar span:first-child{display:none}
  .classic-millionaire .phud{width:calc(50vw - 17px)!important;min-width:0!important;max-width:none!important;height:58px!important;padding:3px 4px!important;gap:4px!important}
  .classic-millionaire .phud>img{width:38px!important;height:48px!important}.classic-millionaire .phud-meta>b{font-size:10px!important}.classic-millionaire .phud .cash-coin{font-size:9px!important}.classic-millionaire .phud .worth{font-size:8px!important}
  .classic-rank-badge{width:27px!important;height:27px!important;font-size:12px!important;inset-inline-start:-11px!important}.classic-millionaire .hud-col.left .classic-rank-badge{inset-inline-end:-11px!important}
  .classic-millionaire .dice-hud{min-width:0!important;width:calc(100vw - 10px)!important;height:88px!important;padding:6px!important;gap:5px!important}
  .classic-dice-caption{display:none}.classic-millionaire .roll-orb{width:58px;height:58px;font-size:15px!important}.classic-millionaire .die3d{width:37px;height:37px}.classic-millionaire .gauge-wrap{width:98px!important}.classic-millionaire .side-items{display:grid!important;grid-template-columns:1fr 1fr!important}.classic-millionaire .item-btn{font-size:8px!important;padding:5px 6px!important}.classic-millionaire .item-btn.risk{grid-column:1/-1}
  .classic-chat-shell{display:none}
  .classic-millionaire .camera-dock{display:none!important}
  .classic-mini-island{width:23%;height:23%}.classic-center-brand{top:3%!important}.classic-center-brand small{display:none}.classic-center-brand b{font-size:12px!important}.classic-world-center .banner{min-width:52%!important;max-width:78%;padding:3px 7px!important}
  .classic-upgrade-track{gap:2px;padding:5px}.classic-upgrade-track span{grid-template-rows:24px auto auto}.classic-upgrade-track img{width:30px;height:24px}
  .classic-millionaire .splash-card{width:min(620px,96vw)!important;padding:14px 12px 18px!important}.classic-millionaire .lobby-hub{grid-template-columns:repeat(3,1fr)!important}.classic-millionaire .char-pick{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}


/* =========================================================
   NOSTALGIA CLASSIC v82 — Visual Rescue
   ========================================================= */
.classic-millionaire .table-screen{background:linear-gradient(180deg,rgba(0,150,220,.05),rgba(0,96,155,.10)),url("../img/sky-cartoon.webp") center/cover fixed!important}
.classic-millionaire .scene-atmosphere,.classic-millionaire .ambient3d-canvas,.classic-millionaire .world-ring3d{opacity:.08!important}

/* Critical v81 layout bug: top+bottom stretched this control into a tall right panel. */
.classic-millionaire .camera-dock{top:auto!important;bottom:14px!important;right:14px!important;left:auto!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;flex-direction:row!important;align-items:center!important;padding:4px!important;gap:3px!important;border-radius:11px!important;opacity:.58!important;background:#08233dcc!important;backdrop-filter:blur(8px)!important;box-shadow:0 4px 14px #00172a77!important}
.classic-millionaire .camera-dock:hover{opacity:.94!important}
.classic-millionaire .camera-dock button{width:28px!important;height:27px!important;min-width:28px!important;padding:0!important;font-size:11px!important}
.classic-millionaire .camera-dock button span{display:none!important}

.classic-millionaire .stage#stage3d{padding:76px 230px 118px!important;perspective:1900px!important;perspective-origin:50% 48%!important}
.classic-millionaire .board-scene{width:min(calc(100svh - 188px),calc(100vw - 500px),900px)!important;--cam-rx:4deg!important;--cam-ry:0deg!important;--cam-scale:1!important;--cam-y:5px!important;filter:drop-shadow(0 24px 26px #00537b45)}
body.classic-millionaire[data-camera="top"] .board-scene{--cam-rx:0deg!important;--cam-scale:1!important}
body.classic-millionaire[data-camera="cinematic"] .board-scene{--cam-rx:4deg!important;--cam-scale:1!important}
.classic-millionaire .board-scene .board{border-radius:17px!important;padding:8px!important;background:linear-gradient(145deg,#694119,#3b210c 54%,#5b3515)!important;box-shadow:0 8px 0 #261206,0 11px 0 #d49b30,0 15px 0 #60380f,0 28px 40px #003b5b66,inset 0 0 0 4px #ffefad,inset 0 0 0 8px #c58b2d,inset 0 0 0 11px #744713!important}
.classic-millionaire .board-scene .board::after{inset:14px!important;border-radius:11px!important;box-shadow:inset 0 0 22px #0003!important}
.classic-millionaire .tile-3d{inset:1px 2px 6px!important;border-radius:6px!important;background:linear-gradient(180deg,#fffdf8 0%,#fff4d7 70%,#e9cc8d 100%)!important;border:1px solid #8f632c!important;box-shadow:0 6px 0 #6d4517,0 8px 8px #0003,inset 0 1px #fff!important}
.classic-millionaire .tile .group-bar{height:15%!important;border-radius:5px 5px 0 0!important}
.classic-millionaire .tile .plate{background:linear-gradient(180deg,#fffdf9f8,#fae8bff7)!important;border-top:1px solid #af8245!important;min-height:28%!important}
.classic-millionaire .tile .plate b{font-size:clamp(8px,1.08vh,12px)!important;color:#34200f!important}.classic-millionaire .tile .plate span{font-size:clamp(7px,.88vh,10px)!important;color:#765022!important}

.classic-millionaire .center.classic-world-center{margin:4.8%!important;border-radius:15px!important;padding:0!important;overflow:hidden!important;background:#0b90bd!important;box-shadow:inset 0 0 0 3px #f5d86c,inset 0 0 0 7px #915c18,0 8px 14px #0004!important}
.classic-millionaire .v82-center-art{position:absolute;inset:0;background:url("../img/board-center.webp") center/cover no-repeat;transform:scale(1.035);filter:saturate(.96) contrast(1.02) brightness(.97)}
.classic-millionaire .center.classic-world-center::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00111f18,transparent 28%,transparent 68%,#00111f25);box-shadow:inset 0 0 34px #00314c55}
.classic-millionaire .classic-center-brand{top:4%!important;z-index:5!important;width:auto!important;min-width:190px!important;padding:5px 16px 6px!important;border-radius:999px!important;background:#09253ed9!important;border:1px solid #f1cb62!important;box-shadow:0 4px 10px #001b2d66!important}
.classic-millionaire .classic-center-brand small{display:none!important}.classic-millionaire .classic-center-brand b{font-size:clamp(14px,1.45vw,21px)!important;color:#fff2a9!important;text-shadow:0 2px #34220a!important}
.classic-millionaire .classic-center-dice{top:52%!important;left:50%!important;transform:translate(-50%,-50%) scale(.70)!important;padding:7px 10px!important;border-radius:16px!important;background:#072139a8!important;border:1px solid #ffffff44!important;backdrop-filter:blur(5px)}
.classic-millionaire .classic-world-center .banner{bottom:5%!important;min-width:36%!important;max-width:72%!important;background:linear-gradient(#263b50,#0e2134)!important;border:2px solid #f1c957!important;padding:6px 15px!important;box-shadow:0 4px 0 #71460c,0 7px 13px #0005!important}

.classic-top-center{top:9px!important;gap:5px!important}.classic-top-center .round-chip{min-width:132px!important;padding:8px 16px!important;font-size:13px!important;border:2px solid #8a5c16!important;border-radius:10px!important;background:linear-gradient(#ffe986,#f0b228)!important;box-shadow:0 4px 0 #6e460d,0 6px 12px #00344b55!important}
.classic-stage-bar{border:2px solid #d5a93e!important;border-radius:8px!important;background:#0b2a45ee!important;padding:3px!important;gap:3px!important;box-shadow:0 3px 0 #68420c,0 5px 12px #001b2e66!important}.classic-stage-bar span,.classic-stage-bar b{padding:4px 9px!important;font-size:10px!important}

.classic-millionaire .hud-players{top:10px!important;left:12px!important;right:12px!important;z-index:44!important}.classic-millionaire .hud-col{gap:8px!important;width:228px!important}
.classic-millionaire .phud{width:228px!important;min-width:228px!important;max-width:228px!important;height:76px!important;border-radius:10px!important;padding:5px 8px!important;gap:7px!important;background:linear-gradient(180deg,#164a73f5,#0a2d4bf8 68%,#071f35fa)!important;border:2px solid #dfb644!important;box-shadow:0 4px 0 #725019,0 7px 14px #00182b55,inset 0 0 0 1px #ffffff18!important}
.classic-millionaire .phud.active{border-color:#fff0a7!important;box-shadow:0 0 0 2px #fff1a488,0 4px 0 #725019,0 8px 18px #00182b66!important}.classic-millionaire .phud>img{width:52px!important;height:62px!important;border-radius:8px!important;border:1px solid #eecf72!important;background:#09223a!important}.classic-millionaire .phud-meta>b{font-size:13px!important;color:#fff!important}.classic-millionaire .phud .char-lv,.classic-millionaire .phud .xp-bar,.classic-millionaire .phud .laps,.classic-millionaire .phud .phud-cards{display:none!important}.classic-millionaire .phud .cash-coin{font-size:11px!important;color:#ffe06e!important;font-weight:900!important}.classic-millionaire .phud .worth{font-size:9px!important;color:#c9e7fb!important}.classic-rank-badge{width:32px!important;height:32px!important;font-size:15px!important;inset-inline-start:-17px!important;top:20px!important}.classic-millionaire .hud-col.left .classic-rank-badge{inset-inline-start:auto!important;inset-inline-end:-17px!important}

.classic-millionaire .hud-dice{bottom:10px!important;width:min(760px,calc(100vw - 520px))!important;z-index:45!important}.classic-millionaire .dice-hud{width:100%!important;min-width:0!important;height:88px!important;padding:7px 10px!important;gap:9px!important;border-radius:12px!important;border:2px solid #d9ad3f!important;background:linear-gradient(180deg,#173e61fa,#09243dfd)!important;box-shadow:0 5px 0 #6f4912,0 9px 20px #001a2e66,inset 0 0 0 1px #ffffff18!important}.classic-dice-caption{min-width:86px!important}.classic-dice-caption b{font-size:12px!important}.classic-dice-caption span{font-size:8px!important}.classic-millionaire .roll-orb{width:68px!important;height:68px!important;border-radius:11px!important;font-size:18px!important;background:linear-gradient(#ffe985,#f0ad1f)!important;border:2px solid #8b5b11!important;box-shadow:0 4px 0 #754a0d,inset 0 1px #fff5b3!important}.classic-millionaire .die3d{width:43px!important;height:43px!important}.classic-millionaire .gauge-wrap{width:130px!important}.classic-millionaire .side-items{gap:4px!important}.classic-millionaire .item-btn{padding:7px 8px!important;font-size:9px!important}

.classic-chat-shell{left:12px!important;bottom:12px!important;width:210px!important;opacity:.88!important}.classic-chat-shell .ticker{max-height:48px!important;font-size:9px!important}.classic-chat-title{font-size:9px!important}.classic-millionaire .emote-fab{left:14px!important;bottom:90px!important;width:36px!important;height:36px!important;font-size:15px!important}
.classic-millionaire .tip{max-width:360px!important;padding:10px 14px!important;border-radius:12px!important;font-size:12px!important}

.classic-millionaire .popup{background:#00121f9a!important;backdrop-filter:blur(5px) saturate(.88)!important}.classic-millionaire .pop{width:min(470px,92vw)!important;border-radius:10px!important;border:2px solid #704514!important;box-shadow:0 25px 60px #0009,inset 0 0 0 1px #fff5d1!important}.classic-buy-title{font-size:21px!important;padding:10px 14px!important;background:linear-gradient(#613616,#351907)!important;border-bottom:2px solid #d3a349!important}.classic-buy-card{padding:12px 15px 8px!important}.classic-buy-card .pop-icon{width:64px!important;height:64px!important}.classic-price-row{padding:8px!important}.classic-price-row b{font-size:18px!important}.classic-buy-actions{padding:9px 10px 10px!important}.classic-buy-actions button{min-height:48px!important}

@media (min-width:1500px){.classic-millionaire .board-scene{width:min(calc(100svh - 188px),920px)!important}}
@media (max-width:1250px){.classic-millionaire .stage#stage3d{padding-left:190px!important;padding-right:190px!important}.classic-millionaire .board-scene{width:min(calc(100svh - 188px),calc(100vw - 390px),840px)!important}.classic-millionaire .hud-col{width:190px!important}.classic-millionaire .phud{width:190px!important;min-width:190px!important;max-width:190px!important}.classic-millionaire .hud-dice{width:min(690px,calc(100vw - 410px))!important}}
@media (max-width:900px){.classic-millionaire .stage#stage3d{padding:110px 4px 104px!important;align-items:center!important}.classic-millionaire .board-scene{width:min(calc(100svh - 220px),calc(100vw - 8px),720px)!important;--cam-rx:1.5deg!important}.classic-millionaire .hud-players{top:52px!important;left:6px!important;right:6px!important}.classic-millionaire .hud-col{width:auto!important;max-width:46vw!important;gap:4px!important}.classic-millionaire .phud{width:calc(50vw - 14px)!important;min-width:0!important;max-width:none!important;height:54px!important;padding:3px 5px!important}.classic-millionaire .phud>img{width:36px!important;height:45px!important}.classic-millionaire .phud-meta>b{font-size:9px!important}.classic-millionaire .phud .cash-coin{font-size:8px!important}.classic-millionaire .phud .worth{font-size:7px!important}.classic-millionaire .hud-dice{width:calc(100vw - 8px)!important;bottom:5px!important}.classic-millionaire .dice-hud{height:80px!important;padding:5px!important;gap:5px!important}.classic-dice-caption{display:none!important}.classic-millionaire .roll-orb{width:54px!important;height:54px!important;font-size:14px!important}.classic-millionaire .die3d{width:34px!important;height:34px!important}.classic-millionaire .gauge-wrap{width:92px!important}.classic-millionaire .side-items{display:grid!important;grid-template-columns:1fr 1fr!important}.classic-millionaire .item-btn{padding:4px!important;font-size:7px!important}.classic-millionaire .item-btn.risk{grid-column:1/-1}.classic-chat-shell,.classic-millionaire .camera-dock{display:none!important}.classic-top-center{top:4px!important}.classic-stage-bar span,.classic-stage-bar b{font-size:8px!important;padding:3px 5px!important}.classic-top-center .round-chip{min-width:104px!important;font-size:10px!important;padding:5px 10px!important}.classic-millionaire .classic-center-brand{min-width:130px!important;padding:3px 10px!important}.classic-millionaire .classic-center-brand b{font-size:11px!important}.classic-millionaire .tip{max-width:calc(100vw - 30px)!important;font-size:11px!important}}

/* =========================================================
   EMPIRE CINEMATIC 3D v90
   Visual overhaul: cinematic board, living skyline, weather,
   day/night cycle and clearer desktop/mobile hierarchy.
   ========================================================= */
.empire-v90{--v90-gold:#ffd65a;--v90-deep:#071b2b;--v90-glass:#0b2943d9;--v90-line:#f2c85d;isolation:isolate}
.empire-v90.table-screen{background-position:center top;transition:filter .8s ease,background-color .8s ease}
.empire-v90.table-screen::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 22%,rgba(0,52,86,.08) 70%,rgba(0,20,38,.22));transition:background 1.2s ease,opacity 1.2s ease}
.empire-v90[data-time="morning"]::before{background:linear-gradient(180deg,rgba(255,224,154,.22),transparent 36%,rgba(22,110,155,.08))}
.empire-v90[data-time="sunset"]::before{background:linear-gradient(180deg,rgba(255,154,87,.34),rgba(174,78,126,.10) 42%,rgba(5,29,54,.28));mix-blend-mode:soft-light}
.empire-v90[data-time="night"]::before,.empire-v90[data-time="neon"]::before{background:linear-gradient(180deg,rgba(7,25,63,.62),rgba(6,30,59,.42) 42%,rgba(3,17,35,.64));mix-blend-mode:multiply}
.day-night-glow{position:fixed;inset:-10%;z-index:2;pointer-events:none;opacity:.22;background:radial-gradient(circle at 78% 16%,#fff7bf 0 3%,#ffd35d44 4% 10%,transparent 24%);transition:opacity 1.2s ease,filter 1.2s ease,transform 12s linear}
.empire-v90[data-time="sunset"] .day-night-glow{opacity:.58;filter:hue-rotate(-20deg) saturate(1.4);transform:translate(-10%,10%)}
.empire-v90[data-time="night"] .day-night-glow{opacity:.22;filter:hue-rotate(170deg) brightness(.8);transform:translate(-42%,20%)}
.empire-v90[data-time="neon"] .day-night-glow{opacity:.34;background:radial-gradient(circle at 75% 18%,#b7ffff 0 2%,#35dfff55 3% 12%,transparent 28%)}

.weather-layer{position:fixed;inset:0;overflow:hidden;z-index:3;pointer-events:none}
.weather-layer i{position:absolute;left:var(--x);top:-12%;animation-delay:var(--delay);opacity:.55}
.weather-layer[data-weather="rain"] i,.weather-layer[data-weather="storm"] i{width:2px;height:70px;background:linear-gradient(transparent,#d9f4ff);transform:rotate(12deg) scale(var(--size));animation:v90Rain var(--d) linear infinite}
.weather-layer[data-weather="storm"]{background:linear-gradient(#08182c38,#112b4c22);animation:v90Lightning 5.5s steps(1) infinite}
.weather-layer[data-weather="dust"] i{width:10px;height:10px;border-radius:50%;background:#f4c785;filter:blur(1px);animation:v90Dust calc(var(--d)*2.1) linear infinite}
.weather-layer[data-weather="embers"] i{width:5px;height:5px;border-radius:50%;background:#ff9b38;box-shadow:0 0 10px #ff5a1f;animation:v90Ember calc(var(--d)*1.6) ease-in infinite}
.weather-layer[data-weather="neon"] i{width:4px;height:4px;border-radius:50%;background:#79fbff;box-shadow:0 0 14px #33e9ff,0 0 22px #d44cff;animation:v90Neon calc(var(--d)*2.4) ease-in-out infinite alternate}
@keyframes v90Rain{to{transform:translate(-80px,125vh) rotate(12deg) scale(var(--size))}}
@keyframes v90Dust{0%{transform:translate(-15vw,20vh) scale(var(--size));opacity:0}20%{opacity:.45}100%{transform:translate(35vw,115vh) scale(var(--size));opacity:0}}
@keyframes v90Ember{0%{transform:translateY(110vh) scale(var(--size));opacity:0}20%{opacity:.8}100%{transform:translate(12vw,-20vh) scale(.3);opacity:0}}
@keyframes v90Neon{to{transform:translateY(14px) scale(1.8);opacity:.9}}
@keyframes v90Lightning{0%,92%,96%,100%{filter:none}93%{filter:brightness(1.7)}94%{filter:brightness(.85)}95%{filter:brightness(1.35)}}

.cinematic-banner{position:fixed;top:106px;left:50%;transform:translate(-50%,-16px) scale(.94);z-index:120;min-width:min(520px,80vw);max-width:760px;padding:9px 22px 11px;text-align:center;border:1px solid #ffe79a99;border-radius:16px;background:linear-gradient(180deg,#0d3654f5,#061b2ef4);box-shadow:0 12px 35px #00101e88,inset 0 0 0 1px #ffffff12;opacity:0;pointer-events:none;transition:.25s ease;backdrop-filter:blur(12px)}
.cinematic-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
.cinematic-banner small{display:block;color:#8bdcff;font-size:10px;font-weight:900;letter-spacing:.08em}
.cinematic-banner b{display:block;color:#fff2a7;font-size:24px;line-height:1.2;text-shadow:0 2px #402b0b}
.cinematic-banner span{display:block;color:#e0eef8;font-size:11px;font-weight:800;margin-top:2px}

.city-focus-card{position:fixed;right:18px;bottom:22px;z-index:52;width:270px;display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid #f4ca5e88;border-radius:14px;background:linear-gradient(160deg,#0c304df0,#061d31f2);box-shadow:0 9px 22px #00111f77,inset 0 0 0 1px #ffffff12;backdrop-filter:blur(12px);transform:translateX(120%);opacity:0;transition:.3s ease}
.city-focus-card.show{transform:none;opacity:1}
.city-focus-card>i{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(#ffe77f,#e5aa28);font-style:normal;font-size:24px;box-shadow:0 3px 0 #83550f}
.city-focus-card div{min-width:0}.city-focus-card small,.city-focus-card span{display:block;color:#a9d8f4;font-size:9px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.city-focus-card b{display:block;color:#fff4b6;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* desktop composition: big board in the middle, compact readable HUD */
@media(min-width:1051px){
  .empire-v90 .stage#stage3d{padding:86px 286px 112px!important;perspective:2100px!important}
  .empire-v90 .board-scene{width:min(calc(100svh - 190px),calc(100vw - 590px),900px)!important;filter:drop-shadow(0 26px 24px #00324b55)}
  .empire-v90 .hud-col{width:248px!important}.empire-v90 .phud{width:248px!important;min-width:248px!important;max-width:248px!important;height:82px!important}
  .empire-v90 .phud>img{width:58px!important;height:68px!important}
  .empire-v90 .hud-dice{width:min(780px,calc(100vw - 640px))!important;bottom:12px!important}
}

.empire-v90 .board-scene{transform-origin:50% 55%;transition:transform .72s cubic-bezier(.18,.84,.22,1),filter .45s ease}
.empire-v90 .board-scene .board{border-radius:20px!important;padding:9px!important;background:linear-gradient(145deg,#7a4819,#3b1f0d 38%,#211006)!important;box-shadow:0 22px 0 #170b04,0 34px 50px #00162477,inset 0 0 0 4px #fff2a7,inset 0 0 0 11px #e2a526,inset 0 0 0 17px #764617!important}
.empire-v90 .board-scene .board::before{content:"";position:absolute;inset:-13px;border-radius:27px;border:2px solid #fff0a455;box-shadow:0 0 26px #ffd45b18;pointer-events:none}
.empire-v90 .tile-3d{border-radius:8px!important;background:linear-gradient(160deg,#fffdf8,#f9eac8 64%,#d7b575)!important;box-shadow:0 8px 0 #5f3915,0 13px 11px #0005,inset 0 1px #fff!important;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.empire-v90 .tile:hover .tile-3d{transform:translateZ(8px) translateY(-3px);filter:brightness(1.08) saturate(1.05);box-shadow:0 11px 0 #5f3915,0 18px 15px #0005,inset 0 1px #fff!important}
.empire-v90 .tile.cinematic-target .tile-3d{animation:v90Target 1.2s cubic-bezier(.2,.8,.2,1)}
@keyframes v90Target{0%,100%{filter:none}35%{transform:translateZ(18px) translateY(-7px) scale(1.08);filter:brightness(1.26);box-shadow:0 12px 0 #694217,0 0 0 5px #fff6b5,0 0 28px #ffd656}}

.empire-v90 .iso-build{overflow:visible!important;perspective:420px}.empire-v90 .iso-build img{transform:translateZ(22px) rotateX(-4deg);filter:drop-shadow(0 13px 5px #0007) drop-shadow(0 0 6px color-mix(in srgb,var(--owner,#fff) 55%,transparent))!important;transition:transform .3s ease,filter .3s ease}.empire-v90 .tile:hover .iso-build img{transform:translateZ(34px) translateY(-5px) scale(1.05) rotateX(-6deg)}
.empire-v90 .token{filter:drop-shadow(0 15px 5px #0009) drop-shadow(0 0 5px #fff5)!important;transition-property:left,top,transform,filter!important}.empire-v90 .token.me{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 19px #ffd95e) drop-shadow(0 17px 6px #000a)!important}

/* living empire skyline inside the board */
.empire-skyline3d{position:absolute;inset:16% 13% 17%;z-index:3;pointer-events:none;transform-style:preserve-3d;perspective:420px}
.empire-skyline3d.empty{opacity:.16}
.sky-building{position:absolute;left:var(--bx);top:var(--by);width:18px;height:var(--bh);transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(-8deg) rotateY(-18deg);animation:v90BuildIn .55s calc(var(--delay)) cubic-bezier(.16,.85,.25,1) both;filter:drop-shadow(0 7px 4px #003b5366)}
.sky-building .front{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bc) 72%,#133 28%),color-mix(in srgb,var(--bc) 92%,white 8%));border:1px solid #ffffff55;box-shadow:inset 0 0 0 2px #ffffff0f}
.sky-building .front::after{content:"";position:absolute;inset:6px 4px;background:repeating-linear-gradient(0deg,#fff6b455 0 2px,transparent 2px 7px),repeating-linear-gradient(90deg,transparent 0 5px,#0a253a55 5px 7px)}
.sky-building .side{position:absolute;left:100%;top:3px;width:8px;height:calc(100% - 3px);transform-origin:left;transform:skewY(-28deg);background:color-mix(in srgb,var(--bc) 58%,#061826 42%);border-right:1px solid #ffffff35}
.sky-building .roof{position:absolute;left:2px;bottom:100%;width:16px;height:8px;transform:skewX(-45deg);transform-origin:bottom;background:color-mix(in srgb,var(--bc) 76%,white 24%);border:1px solid #ffffff55}
.sky-building em{position:absolute;left:50%;bottom:100%;width:3px;height:12px;transform:translateX(-50%);background:#ffe679;box-shadow:0 0 7px #ffe679}
.sky-building.lv0{opacity:.6;--bh:34px}.sky-building.lv4{width:23px;filter:drop-shadow(0 0 8px #ffd65a99) drop-shadow(0 10px 5px #003b5366)}
@keyframes v90BuildIn{from{opacity:0;transform:translate(-50%,10px) rotateX(-8deg) rotateY(-18deg) scaleY(.1)}to{opacity:1;transform:translate(-50%,-50%) rotateX(-8deg) rotateY(-18deg) scaleY(1)}}

/* cinematic camera choreography */
.empire-v90 .board-scene.cine-roll{animation:v90CamRoll .8s cubic-bezier(.2,.8,.2,1)}
.empire-v90 .board-scene.cine-buy{animation:v90CamBuy 1.1s cubic-bezier(.16,.84,.25,1)}
.empire-v90 .board-scene.cine-build{animation:v90CamBuild 1.05s cubic-bezier(.16,.84,.25,1)}
.empire-v90 .board-scene.cine-rent{animation:v90CamRent .55s ease-out}
.empire-v90 .board-scene.cine-travel{animation:v90CamTravel 1.15s cubic-bezier(.2,.72,.2,1)}
.empire-v90 .board-scene.cine-win{animation:v90CamWin 2.3s cubic-bezier(.12,.82,.2,1)}
@keyframes v90CamRoll{0%,100%{filter:drop-shadow(0 26px 24px #00324b55)}45%{transform:translate3d(var(--follow-x,0),calc(var(--follow-y,0) - 8px),0) rotateX(calc(var(--cam-rx) + 2deg)) rotateY(var(--cam-ry,0deg)) scale(calc(var(--cam-scale)*1.018));filter:brightness(1.08) drop-shadow(0 32px 27px #00324b66)}}
@keyframes v90CamBuy{35%{transform:translate3d(var(--follow-x,0),calc(var(--follow-y,0) + 4px),0) rotateX(calc(var(--cam-rx) + 4deg)) scale(calc(var(--cam-scale)*1.045));filter:brightness(1.08) saturate(1.1)}}
@keyframes v90CamBuild{38%{transform:translate3d(var(--follow-x,0),calc(var(--follow-y,0) + 3px),0) rotateX(calc(var(--cam-rx) + 3deg)) rotateZ(-.4deg) scale(calc(var(--cam-scale)*1.055));filter:brightness(1.12)}}
@keyframes v90CamRent{20%{transform:translateX(-5px) rotateX(var(--cam-rx)) scale(var(--cam-scale))}45%{transform:translateX(6px) rotateX(var(--cam-rx)) scale(var(--cam-scale))}70%{transform:translateX(-3px) rotateX(var(--cam-rx)) scale(var(--cam-scale))}}
@keyframes v90CamTravel{35%{transform:translateY(-18px) rotateX(calc(var(--cam-rx) - 5deg)) rotateZ(1.2deg) scale(calc(var(--cam-scale)*.92));filter:brightness(1.12) blur(.2px)}65%{transform:translateY(12px) rotateX(calc(var(--cam-rx) + 3deg)) rotateZ(-.8deg) scale(calc(var(--cam-scale)*1.02))}}
@keyframes v90CamWin{25%{transform:translateY(-10px) rotateX(calc(var(--cam-rx) - 4deg)) rotateY(4deg) scale(calc(var(--cam-scale)*1.08));filter:brightness(1.12) saturate(1.18)}60%{transform:translateY(-4px) rotateX(calc(var(--cam-rx) - 2deg)) rotateY(-4deg) scale(calc(var(--cam-scale)*1.09));filter:brightness(1.18) saturate(1.22)}}

/* lobby = game portal rather than a narrow form */
@media(min-width:901px){
  .classic-millionaire .splash{padding:28px 34px!important;align-items:start!important;overflow:auto}
  .classic-millionaire .splash-card.lobby-open{width:min(1180px,96vw)!important;max-width:none!important;margin:16px auto 28px!important;padding:18px 22px 24px!important;border-radius:24px!important;background:linear-gradient(145deg,#102f4af0,#071b2df7)!important;box-shadow:0 28px 70px #00101f88,inset 0 0 0 1px #ffffff18!important}
  .classic-millionaire .splash-card.lobby-open .lobby-hub{display:grid!important;grid-template-columns:repeat(9,minmax(0,1fr))!important;gap:6px!important;background:#061a2bc7!important;border:1px solid #f0c75a55!important;border-radius:14px!important;padding:7px!important;margin:12px 0 14px!important}
  .classic-millionaire .splash-card.lobby-open .hub-tab{min-height:42px!important;border-radius:9px!important;font-size:11px!important}
  .classic-millionaire .splash-card.lobby-open #hubPlay{grid-template-columns:minmax(0,1.42fr) minmax(300px,.72fr)!important;gap:16px 22px!important;align-items:start!important}
  .classic-millionaire .splash-card.lobby-open .char-pick{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
  .classic-millionaire .splash-card.lobby-open .char-card{min-height:196px!important;border-radius:15px!important;padding:7px!important;background:linear-gradient(#173a59,#0b2137)!important;border:1px solid #dcb34b55!important;box-shadow:0 8px 18px #00101f55!important}
  .classic-millionaire .splash-card.lobby-open .char-card img{max-height:126px!important;border-radius:12px!important}
  .classic-millionaire .splash-card.lobby-open .char-card.on{transform:translateY(-3px)!important;border-color:#ffe684!important;box-shadow:0 0 0 2px #ffe68455,0 12px 24px #00101f88!important}
}

@media(max-width:1050px){.city-focus-card{display:none}.cinematic-banner{top:68px;min-width:min(430px,88vw)}.cinematic-banner b{font-size:19px}.empire-v90 .stage#stage3d{padding-bottom:104px!important}}
@media(max-width:760px){
  .weather-layer{opacity:.48}.day-night-glow{opacity:.14}.cinematic-banner{top:59px;padding:6px 12px 8px;border-radius:12px}.cinematic-banner small{font-size:8px}.cinematic-banner b{font-size:15px}.cinematic-banner span{font-size:8px}
  .empire-v90 .board-scene{width:min(calc(100svh - 218px),calc(100vw - 6px))!important}
  .empire-skyline3d{display:none}.empire-v90 .board-scene .board{padding:6px!important;border-radius:14px!important;box-shadow:0 13px 0 #170b04,0 20px 28px #00162466,inset 0 0 0 3px #fff2a7,inset 0 0 0 7px #e2a526,inset 0 0 0 12px #764617!important}
}
@media(prefers-reduced-motion:reduce){.weather-layer i,.sky-building,.empire-v90 .board-scene[class*="cine-"]{animation:none!important}.cinematic-banner{transition:none}}

/* Region identity — each world feels different without changing gameplay assets */
.empire-v90[data-region-visual="egypt"]{background-color:#dca85e;background-image:linear-gradient(180deg,#efbe6a55,#9c632733),url("../img/sky-cartoon.webp")!important;filter:saturate(.96) sepia(.06)}
.empire-v90[data-region-visual="egypt"] .board{filter:sepia(.05) saturate(1.02)}
.empire-v90[data-region-visual="egypt"] .center{box-shadow:inset 0 0 0 3px #ffe7a0,inset 0 0 0 7px #a56a21,0 10px 16px #4a250f66!important}
.empire-v90[data-region-visual="levant"]{background-image:linear-gradient(180deg,#63d4d822,#2f946733),url("../img/sky-cartoon.webp")!important}
.empire-v90[data-region-visual="levant"] .board{filter:saturate(1.08) hue-rotate(-4deg)}
.empire-v90[data-region-visual="europe"]{background-image:linear-gradient(180deg,#9dc9e844,#5d769833),url("../img/sky-cartoon.webp")!important}
.empire-v90[data-region-visual="europe"] .board{filter:saturate(.92) contrast(1.04)}
.empire-v90[data-region-visual="future"]{background:#06152d!important;background-image:radial-gradient(circle at 50% 10%,#0acffb44,transparent 34%),linear-gradient(180deg,#071c3a,#030914)!important}
.empire-v90[data-region-visual="future"] .board{filter:saturate(1.16) contrast(1.08);box-shadow:0 22px 0 #160a18,0 34px 50px #00162499,inset 0 0 0 4px #d9ffff,inset 0 0 0 11px #30d8ef,inset 0 0 0 17px #45258a!important}
.empire-v90[data-region-visual="future"] .tile-3d{background:linear-gradient(160deg,#e8fcff,#b8e5f2 65%,#6696bb)!important;border-color:#5fe9ff!important;box-shadow:0 8px 0 #153657,0 0 12px #25e2ff44,inset 0 1px #fff!important}

/* ================================================================
   Living World 3D v100 — procedural city, traffic, free camera, flight
   ================================================================ */
html.living-world-v100{background:#051625}
.living-world-v100.table-screen{--v100-neon:#65eaff;--v100-gold:#ffd75e}

/* Freely orbitable camera */
body[data-camera="free"] .board-scene{cursor:grab!important;transition:filter .2s ease!important;touch-action:none}
body.free-camera-dragging .board-scene{cursor:grabbing!important;transition:none!important}
body[data-camera="free"] #board .tile{cursor:inherit}
.camera-hint3d{position:fixed;z-index:58;left:50%;bottom:94px;transform:translateX(-50%);padding:7px 13px;border-radius:999px;background:#071d31df;border:1px solid #f4cf64;color:#fff4b2;box-shadow:0 7px 18px #00152288;font:800 10px Cairo,sans-serif;pointer-events:none;white-space:nowrap;backdrop-filter:blur(9px)}
.camera-hint3d.hidden{display:none!important}
.camera-dock .v100-badge{display:grid;place-items:center;height:28px;padding:0 8px;border-radius:8px;background:linear-gradient(180deg,#3eeaff,#1578bb);border:1px solid #b9fbff;color:#031a2b;font:900 9px Cairo,sans-serif;box-shadow:0 3px 9px #0019}

/* Board gains a physical rim and under-table glow */
.living-world-v100 .board-scene::before{content:"";position:absolute;inset:4.2%;border-radius:24px;transform:translateZ(-28px);background:linear-gradient(145deg,#7c4b1c,#2a1208);box-shadow:0 42px 55px #00151faa,0 18px 0 #140904;pointer-events:none}
.living-world-v100 .board-scene::after{content:"";position:absolute;inset:10%;border-radius:36%;transform:translateZ(-42px);background:radial-gradient(ellipse,#38c6e933,transparent 62%);filter:blur(24px);pointer-events:none}

/* Living city in the centre of the board */
.living-city-v100{position:absolute;inset:10% 8% 11%;z-index:3;pointer-events:none;transform-style:preserve-3d;perspective:620px;filter:drop-shadow(0 7px 7px #002a3c55)}
.living-city-v100 .v100-ground{position:absolute;inset:8%;border-radius:46%;transform:translateZ(3px);background:radial-gradient(circle at 48% 44%,#32d9ed38 0 17%,transparent 18%),linear-gradient(135deg,transparent 47%,#d6fbff33 48% 51%,transparent 52%),linear-gradient(45deg,transparent 47%,#d6fbff22 48% 51%,transparent 52%);border:1px solid #d9fbff2e;box-shadow:inset 0 0 30px #083b5544}
.living-city-v100 .v100-ground i{position:absolute;border-radius:50%;border:1px solid #d6fbff25}
.living-city-v100 .v100-ground i:nth-child(1){inset:12%}.living-city-v100 .v100-ground i:nth-child(2){inset:27%}.living-city-v100 .v100-ground i:nth-child(3){inset:39%}.living-city-v100 .v100-ground i:nth-child(4){left:49%;top:4%;bottom:4%;width:1px;border:0;background:#e1ffff22;border-radius:0}
.v100-road{position:absolute;left:12%;right:12%;height:9%;top:47%;border-radius:999px;background:linear-gradient(#45515a,#242d34);box-shadow:inset 0 0 0 2px #182127,inset 0 0 8px #0007,0 3px 5px #0028;transform:translateZ(8px)}
.v100-road::after{content:"";position:absolute;left:4%;right:4%;top:48%;border-top:2px dashed #f5d965aa}
.v100-road.road-b{transform:translateZ(7px) rotate(90deg);transform-origin:50% 50%}
.v100-city-glow{position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle,#62eaff1f,transparent 68%);filter:blur(10px);transform:translateZ(6px);animation:v100CityBreath 4.2s ease-in-out infinite alternate}
@keyframes v100CityBreath{to{opacity:.45;transform:translateZ(10px) scale(1.08)}}

.v100-tower{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);transform-style:preserve-3d;transform:translate(-50%,-100%) translateZ(14px) rotateX(-6deg);animation:v100TowerIn .48s cubic-bezier(.15,.9,.22,1) both;animation-delay:var(--d);z-index:4}
@keyframes v100TowerIn{from{opacity:0;transform:translate(-50%,-65%) translateZ(5px) scale(.5) rotateX(-8deg)}to{opacity:1;transform:translate(-50%,-100%) translateZ(14px) scale(1) rotateX(-6deg)}}
.v100-tower span{position:absolute;display:block;box-sizing:border-box}
.v100-tower .v100-front{inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 72%,#071b2a),color-mix(in srgb,var(--c) 86%,white));border:1px solid #ffffffe0;border-bottom-color:#0004;border-radius:3px 3px 1px 1px;box-shadow:inset 3px 0 6px #fff2,inset -4px 0 8px #0015}
.v100-tower .v100-front::before{content:"";position:absolute;inset:10% 18%;background:repeating-linear-gradient(180deg,#d9ffffcc 0 2px,transparent 2px 7px),repeating-linear-gradient(90deg,transparent 0 5px,#032d4966 5px 7px);opacity:.82}
.v100-tower .v100-side{top:3px;right:calc(var(--w) * -.38);width:38%;height:100%;background:color-mix(in srgb,var(--c) 55%,#07121d);transform-origin:left center;transform:skewY(-36deg);border-right:1px solid #fff4}
.v100-tower .v100-roof{left:2px;right:-4px;top:-7px;height:9px;background:color-mix(in srgb,var(--c) 68%,white);transform:skewX(-38deg);transform-origin:left bottom;border:1px solid #fff9;box-shadow:0 -2px 5px #fff2}
.v100-tower .v100-shadow{position:absolute;left:-8px;right:-18px;bottom:-7px;height:12px;border-radius:50%;background:#001a2f66;filter:blur(4px);transform:translateZ(-5px) skewX(-30deg)}
.v100-tower em{position:absolute;left:50%;top:-14px;width:4px;height:12px;background:#ffe070;border-radius:4px;box-shadow:0 0 8px #ffed8c;opacity:0}
.v100-tower.landmark{--w:23px!important;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 70%,transparent))}.v100-tower.landmark em{opacity:1}.v100-tower.hotel .v100-front::after{content:"★";position:absolute;left:50%;top:5px;transform:translateX(-50%);color:#fff1a2;font-size:7px;text-shadow:0 1px #744}.v100-tower.villa{border-radius:4px}.v100-tower.neutral{opacity:.52;filter:saturate(.7)}
.living-city-v100[data-current-owner="0"] .owner-0,.living-city-v100[data-current-owner="1"] .owner-1,.living-city-v100[data-current-owner="2"] .owner-2,.living-city-v100[data-current-owner="3"] .owner-3{filter:brightness(1.25) drop-shadow(0 0 9px var(--c));z-index:9}
.living-city-v100.city-rebuild .v100-tower{animation-name:v100TowerIn}

/* Traffic */
.v100-traffic{position:absolute;inset:13%;z-index:7;transform:translateZ(16px);pointer-events:none}
.v100-car{position:absolute;width:9px;height:5px;border-radius:3px 3px 2px 2px;background:linear-gradient(180deg,#fff6b2,#efaa19);box-shadow:0 2px 2px #0019,0 0 4px #ffe36e;offset-path:inset(12% 9% 12% 9% round 28%);offset-rotate:auto;animation:v100Drive var(--car-speed) linear var(--car-delay) infinite}
.v100-car:nth-child(even){background:linear-gradient(180deg,#d7ffff,#21a6db);box-shadow:0 2px 2px #0019,0 0 4px #4deaff;animation-direction:reverse}
.v100-car::before,.v100-car::after{content:"";position:absolute;bottom:-1px;width:2px;height:2px;background:#0a1116;border-radius:50%}.v100-car::before{left:1px}.v100-car::after{right:1px}
@keyframes v100Drive{to{offset-distance:100%}}

/* Air-travel cinematic */
.flight-fx-v100{position:fixed;inset:0;z-index:72;pointer-events:none;opacity:0;overflow:hidden;display:block}
.flight-fx-v100 .flight-plane{position:absolute;left:-12vw;top:70vh;color:#fff7c5;font-size:clamp(42px,6vw,92px);line-height:1;text-shadow:0 5px 4px #003b5c88,0 0 18px #dffeff;filter:drop-shadow(0 9px 9px #001a2faa);transform:rotate(var(--flight-rot,-12deg)) translateZ(0)}
.flight-fx-v100 .flight-trail{position:absolute;left:-25vw;top:76vh;width:42vw;height:9px;border-radius:999px;background:linear-gradient(90deg,transparent,#eaffff33,#fff9);filter:blur(3px);transform:rotate(-16deg);transform-origin:right center}
.flight-fx-v100.show{opacity:1;animation:v100FlightFade 1.7s ease both}.flight-fx-v100.show .flight-plane{animation:v100Fly 1.55s cubic-bezier(.15,.62,.24,1) both}.flight-fx-v100.show .flight-trail{animation:v100Trail 1.55s cubic-bezier(.15,.62,.24,1) both}
.flight-fx-v100.reverse .flight-plane{left:auto;right:-12vw;transform:scaleX(-1) rotate(-12deg)}
.flight-fx-v100.reverse.show .flight-plane{animation-name:v100FlyReverse}.flight-fx-v100.reverse .flight-trail{left:auto;right:-25vw;transform:rotate(16deg)}
@keyframes v100Fly{0%{left:-12vw;top:72vh;scale:.75}52%{top:34vh;scale:1.16}100%{left:108vw;top:10vh;scale:.68}}
@keyframes v100FlyReverse{0%{right:-12vw;top:72vh;scale:.75}52%{top:34vh;scale:1.16}100%{right:108vw;top:10vh;scale:.68}}
@keyframes v100Trail{0%{left:-28vw;top:78vh;opacity:0}25%{opacity:.8}100%{left:86vw;top:22vh;opacity:0}}
@keyframes v100FlightFade{0%,100%{opacity:0}12%,82%{opacity:1}}

/* Arrival pulse */
.tile.v100-arrival .tile-3d{animation:v100Arrival .9s cubic-bezier(.15,.85,.25,1)!important}
@keyframes v100Arrival{0%,100%{filter:none}35%{transform:translateZ(18px) scale(1.07);filter:brightness(1.35) drop-shadow(0 0 12px #fff5b5);box-shadow:0 14px 0 #5f3915,0 0 28px #ffe67b!important}}

/* Cinematic / photo mode */
body.photo-mode-v100 .hud-players,body.photo-mode-v100 .classic-top-center,body.photo-mode-v100 .hud-dice,body.photo-mode-v100 .classic-chat-shell,body.photo-mode-v100 .book-btn,body.photo-mode-v100 .quit-btn,body.photo-mode-v100 .city-focus-card,body.photo-mode-v100 .tile-lens3d,body.photo-mode-v100 .online-badge,body.photo-mode-v100 .market-ticker,body.photo-mode-v100 .emote-fab{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease}
body.photo-mode-v100 .camera-dock button:not(#photoModeBtn),body.photo-mode-v100 .camera-dock .v100-badge{display:none!important}
body.photo-mode-v100 .camera-dock{left:50%!important;right:auto!important;transform:translateX(-50%)!important;top:auto!important;bottom:18px!important;background:transparent!important;border:0!important;box-shadow:none!important}
body.photo-mode-v100 #photoModeBtn{font-size:11px!important;padding:10px 15px!important;background:#071d31e8!important;border-color:#f2ce65!important}
body.photo-mode-v100 .board-scene{filter:drop-shadow(0 32px 35px #001b2c99) saturate(1.08)!important}

/* Night lights */
.empire-v90[data-time="night"] .v100-tower .v100-front::before,.empire-v90[data-time="neon"] .v100-tower .v100-front::before{opacity:1;filter:brightness(1.6);box-shadow:inset 0 0 5px #dfffff55}
.empire-v90[data-time="night"] .v100-car,.empire-v90[data-time="neon"] .v100-car{box-shadow:0 2px 2px #0019,0 0 8px #fff3a0}

@media(max-width:900px){
  .living-city-v100{inset:12% 8% 13%}.v100-tower{scale:.76}.v100-car{width:6px;height:3px}.v100-traffic{display:none}.camera-hint3d{display:none!important}.flight-fx-v100 .flight-plane{font-size:48px}
}
@media(max-width:620px){.living-city-v100{display:none}.living-world-v100 .board-scene::before,.living-world-v100 .board-scene::after{display:none}}
@media(prefers-reduced-motion:reduce){.v100-tower,.v100-car,.v100-city-glow,.flight-fx-v100.show,.flight-fx-v100.show .flight-plane,.flight-fx-v100.show .flight-trail,.tile.v100-arrival .tile-3d{animation:none!important}}
/* v100 visual polish: keep the living layer elegant over the illustrated centre */
.living-city-v100{inset:13% 11% 14%;filter:drop-shadow(0 5px 5px #001d2a38)}
.living-city-v100 .v100-ground{inset:5%;background:radial-gradient(circle,transparent 0 52%,#7feaff15 53% 55%,transparent 56% 65%,#ffe27b16 66% 67%,transparent 68%);border:0;box-shadow:none}
.living-city-v100 .v100-ground i{opacity:.28}
.living-city-v100 .v100-ground i:nth-child(1){inset:7%;border-color:#fff6b627}.living-city-v100 .v100-ground i:nth-child(2){inset:18%;border-color:#75eaff1f}.living-city-v100 .v100-ground i:nth-child(3){display:none}.living-city-v100 .v100-ground i:nth-child(4){display:none}
.v100-road{display:none!important}
.v100-traffic{inset:11%;opacity:.74}
.v100-traffic::before{content:"";position:absolute;inset:12% 9%;border-radius:28%;border:1px solid #e9ffff1f;box-shadow:0 0 8px #3ce9ff12}
.v100-car{width:6px;height:3px;opacity:.9;box-shadow:0 1px 2px #0019,0 0 3px #ffe36e}
.v100-tower{filter:drop-shadow(0 4px 3px #001c2b88);opacity:.9}
.v100-tower .v100-front{border-color:#ffffffaa}.v100-tower .v100-front::before{inset:13% 20%;opacity:.55;background:repeating-linear-gradient(180deg,#eaffffbb 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,transparent 0 4px,#032d494d 4px 5px)}
.v100-tower .v100-side{right:calc(var(--w) * -.30);width:30%}.v100-tower .v100-roof{top:-5px;height:6px}.v100-tower .v100-shadow{opacity:.65}
/* v100 sprite-buildings: use the game's own polished building art in the living city */
.v100-tower.sprite{width:42px;height:58px;background:none!important;border:0!important;transform:translate(-50%,-100%) translateZ(18px) rotateX(-4deg);filter:none;opacity:1}
.v100-tower.sprite img{position:absolute;left:50%;bottom:1px;width:52px;height:52px;object-fit:contain;transform:translateX(-50%) translateZ(8px);filter:drop-shadow(0 9px 4px #001b2b88) drop-shadow(0 0 4px color-mix(in srgb,var(--c) 48%,transparent));transform-origin:50% 100%}
.v100-tower.sprite.landmark img{width:61px;height:61px}.v100-tower.sprite.hotel img{width:56px;height:56px}
.v100-tower.sprite .v100-owner-pad{position:absolute;left:50%;bottom:-2px;width:34px;height:13px;border-radius:50%;background:color-mix(in srgb,var(--c) 70%,#fff);transform:translateX(-50%) rotateX(64deg) translateZ(-2px);box-shadow:0 0 7px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 0 2px #fff6;opacity:.68}
.v100-tower.sprite .v100-shadow{left:1px;right:1px;bottom:-2px;height:10px;opacity:.55}
.v100-tower.sprite .v100-front,.v100-tower.sprite .v100-side,.v100-tower.sprite .v100-roof{display:none!important}
.v100-tower.sprite em{top:-3px;left:50%;width:3px;height:8px;opacity:0}.v100-tower.sprite.landmark em{opacity:1}
.living-city-v100[data-current-owner="0"] .v100-tower.sprite.owner-0 img,.living-city-v100[data-current-owner="1"] .v100-tower.sprite.owner-1 img,.living-city-v100[data-current-owner="2"] .v100-tower.sprite.owner-2 img,.living-city-v100[data-current-owner="3"] .v100-tower.sprite.owner-3 img{filter:drop-shadow(0 9px 4px #001b2b88) drop-shadow(0 0 9px var(--c));transform:translateX(-50%) translateY(-3px) scale(1.08)}
/* v100: give each real board property its own physical building pedestal */
.empire-v90 .tile .iso-build{position:relative!important;display:grid!important;place-items:center!important;transform-style:preserve-3d!important;isolation:isolate}
.empire-v90 .tile .iso-build::before{content:"";position:absolute;left:50%;bottom:4%;width:72%;height:28%;border-radius:50%;transform:translateX(-50%) rotateX(62deg) translateZ(-3px);background:radial-gradient(ellipse,color-mix(in srgb,var(--owner,#6ddfff) 72%,#fff) 0 25%,color-mix(in srgb,var(--owner,#6ddfff) 45%,transparent) 26% 56%,transparent 58%);border:1px solid #ffffff80;box-shadow:0 0 7px color-mix(in srgb,var(--owner,#6ddfff) 48%,transparent);z-index:-1;opacity:.82}
.empire-v90 .tile .iso-build::after{content:"";position:absolute;left:15%;right:3%;bottom:-5%;height:14%;border-radius:50%;background:#00192575;filter:blur(2px);transform:skewX(-25deg) translateZ(-6px);z-index:-2}
.empire-v90 .tile .iso-build img{transform:translateZ(26px) translateY(-1px) rotateX(-4deg)!important;filter:drop-shadow(0 12px 4px #00131d99) drop-shadow(0 0 5px color-mix(in srgb,var(--owner,#fff) 55%,transparent))!important}
.empire-v90 .tile:hover .iso-build img{transform:translateZ(36px) translateY(-5px) scale(1.08) rotateX(-6deg)!important}
.empire-v90 .tile.build-changed .iso-build img{animation:v100PropertyRise .9s cubic-bezier(.12,.86,.2,1)}
@keyframes v100PropertyRise{0%{transform:translateZ(0) translateY(18px) scale(.35);filter:brightness(2) blur(2px)}60%{transform:translateZ(46px) translateY(-8px) scale(1.14);filter:brightness(1.35) drop-shadow(0 0 14px #fff7b4)}100%{transform:translateZ(26px) translateY(-1px) scale(1);filter:drop-shadow(0 12px 4px #00131d99)}}
.empire-v90 .tile.owner-mark .tile-3d::after{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--owner,#fff) 72%,transparent),inset 0 -8px 14px color-mix(in srgb,var(--owner,#fff) 12%,transparent)!important}
.v100-tower{display:none!important}
@media(max-width:900px){
  .classic-millionaire .stage#stage3d{place-items:start center!important;align-items:start!important;padding-top:116px!important;padding-bottom:100px!important}
  .classic-millionaire .board-scene{margin-top:0!important}
}

/* =========================================================
   CityVerse 3D v110 — true WebGL city exploration layer
   ========================================================= */
.cityverse3d{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 20%,#0e456d66,#00111dcc 62%,#000b12ef);backdrop-filter:blur(7px);transition:opacity .22s ease,visibility .22s ease}.cityverse3d.hidden{display:none}.cityverse-shell{position:relative;width:min(1180px,94vw);height:min(720px,88vh);overflow:hidden;border:1px solid #f3cb5d;border-radius:24px;background:#071928;box-shadow:0 35px 90px #000b,0 0 0 4px #5b3b16,0 0 0 7px #e7be4c55;isolation:isolate}.cityverse-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}.cityverse-canvas:active{cursor:grabbing}.cityverse-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00131e22 0 55%,#00101c9d 100%),radial-gradient(circle at 50% 42%,transparent 0 48%,#00101b80 88%);box-shadow:inset 0 0 85px #0008}.cityverse-head{position:absolute;z-index:4;top:18px;right:18px;left:18px;display:flex;align-items:flex-start;gap:12px;direction:rtl;pointer-events:none}.cityverse-head>div{min-width:0;padding:10px 14px 11px;border:1px solid #ffffff28;border-radius:15px;background:linear-gradient(180deg,#082640e8,#051a2ee8);box-shadow:0 8px 24px #00101b88;backdrop-filter:blur(8px)}.cityverse-head small{display:block;color:#94ddff;font:800 10px/1.4 Cairo,sans-serif}.cityverse-head h2{margin:1px 0 3px;color:#fff5bb;font:900 clamp(20px,3vw,34px)/1 Cairo,sans-serif;text-shadow:0 2px 12px #000}.cityverse-meta{display:flex;flex-wrap:wrap;gap:6px}.cityverse-meta span{padding:3px 7px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff0c;color:#d9f4ff;font:800 9px/1.3 Cairo,sans-serif}.cityverse-level{align-self:flex-start;padding:8px 13px;border-radius:999px;background:linear-gradient(#ffe879,#d69a1c);border:2px solid #fff0a0;color:#4a2b08;box-shadow:0 6px 15px #0007;font:900 11px Cairo,sans-serif;white-space:nowrap}.cityverse-close{margin-inline-start:auto;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff48;background:#061929df;color:#fff;font:800 27px/1 Arial,sans-serif;cursor:pointer;pointer-events:auto;box-shadow:0 7px 18px #0007}.cityverse-close:hover{background:#9a351f}.cityverse-controls{position:absolute;z-index:4;right:18px;bottom:18px;left:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;direction:rtl;color:#d8f5ff;font:800 9px Cairo,sans-serif;pointer-events:none}.cityverse-controls span{padding:7px 10px;border:1px solid #ffffff20;border-radius:10px;background:#061a2bd9;backdrop-filter:blur(6px)}.cityverse-controls button{pointer-events:auto;border:1px solid #e8c357;border-radius:10px;background:linear-gradient(#17334b,#0a2034);color:#ffe98f;padding:8px 11px;font:900 9px Cairo,sans-serif;cursor:pointer}.cityverse-road-label{position:absolute;z-index:3;left:18px;top:22px;color:#ffffff7a;letter-spacing:.16em;font:900 8px/1 Arial,sans-serif;writing-mode:vertical-rl;transform:rotate(180deg);text-shadow:0 1px 2px #000}.cityverse3d.auto{pointer-events:none;background:#001420b8}.cityverse3d.auto .cityverse-close,.cityverse3d.auto .cityverse-controls{opacity:0}.cityverse3d.auto .cityverse-shell{width:min(980px,88vw);height:min(590px,78vh);animation:cityverseAuto .42s cubic-bezier(.16,.8,.25,1) both}.cityverse3d.auto .cityverse-head{right:24px;left:24px}.cityverse3d.auto::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,#fff3,transparent);transform:translateX(-120%);animation:cityverseSweep 1.35s .3s ease both}@keyframes cityverseAuto{from{opacity:0;transform:scale(.82) translateY(35px)}to{opacity:1;transform:none}}@keyframes cityverseSweep{to{transform:translateX(120%)}}
.cityverse-no-webgl .cityverse3d{display:none!important}
.city-focus-card .cityverse-explore{margin-inline-start:auto;align-self:center;border:1px solid #f0c958;border-radius:9px;background:linear-gradient(#f8d863,#bc7e12);color:#3c2408;padding:6px 8px;font:900 8px Cairo,sans-serif;cursor:pointer;box-shadow:0 4px 10px #0005;white-space:nowrap}.city-focus-card .cityverse-explore:hover{filter:brightness(1.08)}
.cityverse-version{align-self:center;padding:3px 7px;border-radius:999px;border:1px solid #6fe7ff55;background:#052235c7;color:#8cecff;font:900 7px/1 Cairo,sans-serif;letter-spacing:.08em;white-space:nowrap}
.airportverse3d{position:fixed;inset:0;z-index:94;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;background:linear-gradient(#148bc9 0 48%,#b8e6f0 49% 51%,#1b2c34 52% 100%)}.airportverse3d.show{visibility:visible;animation:airportFade 2.3s ease both}.airport-sky{position:absolute;inset:0 0 48%;overflow:hidden;background:radial-gradient(circle at 70% 20%,#fffbd0 0 3%,#ffe47d99 4% 12%,transparent 30%),linear-gradient(#109de4,#7bd8ee)}.airport-sky i{position:absolute;width:150px;height:42px;border-radius:50%;background:#fff9;filter:blur(.5px)}.airport-sky i::before,.airport-sky i::after{content:"";position:absolute;border-radius:50%;background:inherit}.airport-sky i::before{width:62px;height:62px;left:20px;top:-28px}.airport-sky i::after{width:82px;height:72px;right:18px;top:-37px}.airport-sky i:nth-child(1){left:8%;top:44%;transform:scale(1.2)}.airport-sky i:nth-child(2){right:12%;top:25%;transform:scale(.82)}.airport-sky i:nth-child(3){left:47%;top:12%;transform:scale(.55);opacity:.65}.airport-runway{position:absolute;left:50%;bottom:-6%;width:min(920px,92vw);height:56%;transform:translateX(-50%) perspective(700px) rotateX(63deg);transform-origin:50% 100%;background:linear-gradient(90deg,#28323a 0 17%,#0d1317 18% 82%,#28323a 83%);border-left:6px solid #d7d6bd;border-right:6px solid #d7d6bd;box-shadow:0 -18px 45px #0008}.airport-runway::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:8px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,#fff 0 34px,transparent 34px 70px)}.airport-runway span{position:absolute;bottom:4%;width:10px;height:72%;background:repeating-linear-gradient(#ffd43a 0 5px,transparent 5px 28px);filter:drop-shadow(0 0 4px #ffd43a)}.airport-runway span:nth-child(1){left:22%}.airport-runway span:nth-child(2){right:22%}.airport-runway span:nth-child(3){left:50%;height:12%;bottom:7%;background:#fff8}.airport-plane3d{position:absolute;left:50%;bottom:20%;width:110px;height:50px;transform:translateX(-50%) translateY(0) scale(.65);filter:drop-shadow(0 20px 10px #0008)}.airport-plane3d b{display:block;color:#f6fbff;font:900 92px/1 Arial,sans-serif;transform:rotate(-10deg);text-shadow:0 2px #9eb0bd}.airport-plane3d i{position:absolute;left:50%;bottom:-4px;width:2px;height:160px;background:linear-gradient(#fff8,transparent);transform-origin:top;transform:rotate(5deg)}.airportverse3d.show .airport-plane3d{animation:airportTakeoff 2.05s cubic-bezier(.12,.63,.2,1) both}.airport-route{position:absolute;top:6%;left:50%;transform:translateX(-50%);min-width:min(520px,82vw);padding:11px 18px;border:1px solid #ffe072;border-radius:14px;background:#062038e8;text-align:center;color:#fff;box-shadow:0 10px 28px #00152588}.airport-route small,.airport-route b{display:block}.airport-route small{color:#9ee8ff;font:800 9px Cairo,sans-serif}.airport-route b{margin-top:2px;color:#fff2a0;font:900 clamp(13px,2vw,20px) Cairo,sans-serif}@keyframes airportTakeoff{0%{bottom:17%;transform:translateX(-50%) scale(.48) rotate(-2deg)}48%{bottom:38%;transform:translateX(-50%) scale(.86) rotate(-7deg)}100%{bottom:106%;transform:translateX(-50%) scale(1.35) rotate(-14deg)}}@keyframes airportFade{0%,100%{opacity:0}8%,84%{opacity:1}}
.cityverse-v110 body[data-graphics="3d"] .board-scene{filter:drop-shadow(0 38px 34px #00131d9e) saturate(1.09) contrast(1.025)}.cityverse-v110 body[data-graphics="3d"] .board::after{content:"";position:absolute;inset:1.2%;border-radius:4%;pointer-events:none;box-shadow:inset 0 0 0 1px #fff2,inset 0 0 40px #ffdb6b0d;transform:translateZ(5px)}.cityverse-v110 body[data-time="night"] .tile.owner-mark .tile-3d,.cityverse-v110 body[data-time="neon"] .tile.owner-mark .tile-3d{box-shadow:0 10px 0 #513416,0 0 0 3px var(--owner),0 0 18px color-mix(in srgb,var(--owner) 60%,transparent),0 15px 18px #0008!important}.cityverse-v110 body[data-time="night"] .tile .iso-build img,.cityverse-v110 body[data-time="neon"] .tile .iso-build img{filter:drop-shadow(0 12px 5px #000b) drop-shadow(0 0 9px color-mix(in srgb,var(--owner,#fff) 72%,transparent)) brightness(.96)!important}
@media(max-width:760px){.cityverse3d{padding:7px}.cityverse-shell{width:calc(100vw - 14px);height:min(78vh,680px);border-radius:17px}.cityverse-head{top:10px;right:10px;left:10px;gap:6px}.cityverse-head>div{padding:7px 9px;border-radius:10px}.cityverse-head h2{font-size:18px}.cityverse-head small,.cityverse-meta span{font-size:7px}.cityverse-level{padding:6px 9px;font-size:8px}.cityverse-close{width:34px;height:34px;font-size:22px}.cityverse-controls{right:10px;left:10px;bottom:10px}.cityverse-controls span{display:none}.cityverse-controls button{font-size:8px}.cityverse-road-label{display:none}.airport-route{top:5%;padding:8px 12px}.airport-runway{width:120vw}.airport-plane3d{transform:translateX(-50%) scale(.5)}.cityverse-version{display:none}}
@media(prefers-reduced-motion:reduce){.cityverse3d.auto .cityverse-shell,.cityverse3d.auto::after,.airportverse3d.show,.airportverse3d.show .airport-plane3d{animation:none!important}}