/* ---------- Animated scene (lobby skin) ---------- */

:root {
  --sky1: #0d0a1f; --sky2: #2a1d52; --sky3: #5b3a8a;
  --far: #1a1233; --near: #0b0818; --accent: #c9a861;
  --sky-img: none;
}

body { background: var(--sky1); }
.scene { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.scene .layer { position: absolute; inset: -40px; will-change: transform; }
.scene .sky {
  background:
    var(--sky-img) center / cover no-repeat,
    radial-gradient(circle at 72% 26%, color-mix(in srgb, var(--accent) 55%, transparent) 0, transparent 9%),
    radial-gradient(circle at 72% 26%, color-mix(in srgb, var(--accent) 22%, transparent) 0, transparent 28%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 55%, var(--sky3) 100%);
}
.scene .far {
  top: 38%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--far) 70%, var(--sky3)), var(--far) 40%);
  clip-path: polygon(0 62%, 6% 40%, 12% 52%, 19% 22%, 26% 46%, 33% 30%, 41% 55%, 48% 18%, 55% 44%, 61% 34%,
    68% 52%, 75% 14%, 82% 42%, 88% 30%, 94% 48%, 100% 26%, 100% 100%, 0 100%);
  animation: drift 40s ease-in-out infinite alternate;
}
.scene .near {
  top: 62%;
  background: linear-gradient(180deg, var(--near), #000 90%);
  clip-path: polygon(0 40%, 10% 30%, 22% 44%, 34% 26%, 46% 38%, 58% 22%, 70% 36%, 82% 24%, 92% 40%, 100% 30%, 100% 100%, 0 100%);
  animation: drift 26s ease-in-out infinite alternate-reverse;
}
@keyframes drift { to { transform: translateX(-30px); } }
.scene .fx { inset: 0; width: 100%; height: 100%; }
body[data-view="game"] .scene .far, body[data-view="game"] .scene .near { opacity: .35; }

.topbar, .view, .toasts { position: relative; z-index: 1; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(8px);
  background: rgba(8, 6, 14, .45);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  gap: 12px;
}
.topbar .logo {
  font-family: "Cinzel", serif; color: var(--accent); cursor: pointer; margin: 0 auto 0 0;
}
.topbar .back { margin-right: 4px; }
.wallet { display: flex; gap: 8px; }
.pill {
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15);
  padding: 4px 12px; border-radius: 999px; font-size: 14px; white-space: nowrap;
}
.pill.gold { border-color: #e6b02e; color: #ffe08a; }

.page-title {
  font-family: "Cinzel", serif; font-size: 30px; margin: 14px 0 10px; color: #fff;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
}
.note { color: var(--muted); font-size: 14px; margin: 4px 0 12px; }

/* ---------- Lobby (town hub) ---------- */
.hub {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 10px 0 20px;
}
.game-title {
  font-family: "Cinzel", serif; font-weight: 900; font-size: clamp(30px, calc(5 * var(--zvw)), 54px); margin: 0;
  background: linear-gradient(180deg, #fff6d8, var(--accent) 60%, color-mix(in srgb, var(--accent) 50%, #000));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.7)) drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 45%, transparent));
}
.places { display: flex; gap: clamp(16px, calc(4 * var(--zvw)), 48px); justify-content: center; flex-wrap: wrap; }
.place {
  position: relative; padding: 0; overflow: hidden;
  width: min(calc(42 * var(--zvw)), 330px); aspect-ratio: 2 / 3; max-height: calc(58 * var(--zvh));
  border-radius: 50% 50% 16px 16px / 26% 26% 16px 16px;
  border: 4px solid #d9b25c;
  box-shadow: 0 0 0 2px #5a3d0e, 0 18px 40px rgba(0,0,0,.65), inset 0 0 30px rgba(0,0,0,.6);
  background: #120d1c;
  transition: transform .25s, box-shadow .25s;
  animation: placeFloat 6s ease-in-out infinite;
}
.market-place { animation-delay: -3s; }
@keyframes placeFloat { 50% { translate: 0 -8px; } }
.place:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px #5a3d0e, 0 22px 50px rgba(0,0,0,.7), 0 0 40px color-mix(in srgb, var(--accent) 60%, transparent);
}
.place-art {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  animation: placeZoom 24s ease-in-out infinite alternate;
  transition: filter .25s;
}
.tower-place .place-art  { background-image: url("assets/lobby/tower.png"), linear-gradient(#2a1d52, #0d0a1f); }
.market-place .place-art { background-image: url("assets/lobby/market.png"), linear-gradient(#5c3a14, #1a0d05); }
@keyframes placeZoom { to { scale: 1.12; } }
.place:hover .place-art { filter: brightness(1.15) saturate(1.1); }
.place-glow { /* light sweeping across the picture */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,240,200,.28) 50%, transparent 62%) 0 0 / 300% 100%;
  animation: sweep 6s linear infinite; mix-blend-mode: overlay;
}
.place-plaque {
  position: absolute; left: 10px; right: 10px; bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(40,26,10,.88), rgba(14,9,4,.92));
  border: 2px solid #d9b25c; box-shadow: 0 6px 16px rgba(0,0,0,.6);
}
.place-plaque b { font-family: "Cinzel", serif; font-size: 22px; color: #ffe9b0; text-shadow: 0 2px 4px #000; }
.place-plaque small { color: #d8c9a8; font-size: 12px; }

.dock {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 10px; border-radius: 18px;
  background: rgba(10,8,18,.7); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.dock button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 92px; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(40,30,60,.9), rgba(16,12,26,.9));
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.dock button:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); }
.dock .ico { font-size: 26px; }
.dock b { font-family: "Cinzel", serif; font-size: 14px; }

/* ---------- Tabs / chips ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tabs button { border-radius: 999px; padding: 7px 18px; background: rgba(0,0,0,.45); }
.tabs button.active { background: var(--accent); color: #140d04; border-color: var(--accent); font-weight: 700; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip { border-radius: 999px; padding: 4px 12px; font-size: 13px; background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.2); }
.chip.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, #000); }
.chip .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; box-shadow: 0 0 4px #000; }
select.chip { color: var(--text); }

/* ---------- Shop ---------- */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.pack {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 14px; border-radius: 14px;
  background: rgba(12,9,20,.75); border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s, box-shadow .2s;
}
.pack:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.pack small { color: var(--muted); min-height: 2.6em; }
.pack .pack-art {
  width: 110px; height: 150px; border-radius: 10px; display: grid; place-items: center;
  font-size: 46px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #6d5a9a, #2a1d52 60%, #120a24);
  border: 2px solid #c9a861; box-shadow: inset 0 0 18px rgba(0,0,0,.6);
}
.pack .pack-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, transparent 60%) 0 0 / 300% 100%;
  animation: sweep 3.5s linear infinite;
}
.pack.premium .pack-art { background: linear-gradient(150deg, #fff3b8, #e6b02e 45%, #6a4306); }
.pack.t-fire .pack-art   { background: linear-gradient(150deg, #ffb27a, #e0561c 50%, #3e0d03); }
.pack.t-frost .pack-art  { background: linear-gradient(150deg, #c9efff, #45a6dc 50%, #0a2645); }
.pack.t-nature .pack-art { background: linear-gradient(150deg, #c5f2b3, #4c9b46 50%, #123313); }
.pack.t-shadow .pack-art { background: linear-gradient(150deg, #d6c2f0, #5f3a8e 50%, #140823); }
.pack.t-storm .pack-art  { background: linear-gradient(150deg, #fff3a8, #cfae1c 50%, #3f3103); }
.pack button, .skin-info button, .listing button { background: var(--accent); color: #140d04; border: 0; font-weight: 700; }

/* Pack reveal: cards flip from their back */
.reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 10px 0 18px; --card-w: 150px; }
.flip { width: var(--card-w); aspect-ratio: 5 / 7; perspective: 800px; cursor: pointer; animation: dealIn .45s backwards; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1.2); }
.flip.open .flip-inner { transform: rotateY(180deg); }
.flip-back, .flip-front { position: absolute; inset: 0; backface-visibility: hidden; }
.flip-front { transform: rotateY(180deg); }
.flip.open.r-epic, .flip.open.r-legendary, .flip.open.r-ultra { animation: rareBurst 1s .3s; }
.flip.open.r-legendary .card, .flip.open.r-ultra .card { animation: glowPop 1.4s .35s; }
@keyframes dealIn { from { transform: translateY(40px) scale(.8); opacity: 0; } }
@keyframes rareBurst { 40% { transform: scale(1.12); } }
@keyframes glowPop { 30% { box-shadow: 0 0 2.5em var(--glow), 0 0 5em var(--glow); } }

.card-back {
  width: 100%; height: 100%; border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, transparent 22%, rgba(0,0,0,.4) 23%, transparent 24%),
    repeating-conic-gradient(from 0deg, rgba(201,168,97,.18) 0 10deg, transparent 10deg 20deg),
    linear-gradient(150deg, #3a2a66, #160e2c);
  border: 4px solid #c9a861;
  box-shadow: inset 0 0 0 3px #3a2a10, 0 6px 16px rgba(0,0,0,.6);
  display: grid; place-items: center;
}
.card-back::after { content: "✦"; font-size: 44px; color: #e6c97e; text-shadow: 0 0 14px #c9a861; }

/* ---------- Skins ---------- */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.skin-card { border-radius: 14px; overflow: hidden; background: rgba(10,8,18,.8); border: 2px solid rgba(255,255,255,.12); transition: transform .2s; }
.skin-card:hover { transform: translateY(-4px); }
.skin-card.active { border-color: var(--sa); box-shadow: 0 0 18px color-mix(in srgb, var(--sa) 50%, transparent); }
.skin-preview {
  height: 120px; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 72% 30%, var(--sa) 0, transparent 10%),
    linear-gradient(180deg, var(--s1), var(--s2) 55%, var(--s3));
}
.sp-far, .sp-near { position: absolute; left: 0; right: 0; bottom: 0; }
.sp-far  { height: 60%; background: var(--sf); clip-path: polygon(0 50%, 15% 20%, 30% 45%, 48% 5%, 64% 40%, 80% 15%, 100% 45%, 100% 100%, 0 100%); }
.sp-near { height: 30%; background: #000c; clip-path: polygon(0 40%, 25% 15%, 50% 40%, 75% 10%, 100% 35%, 100% 100%, 0 100%); }
.skin-info { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; gap: 8px; }
.skin-info .tag { color: var(--sa); font-size: 13px; font-weight: 700; }

/* ---------- Collection ---------- */
.collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px 16px; --card-w: 170px; justify-items: center; padding-top: 8px; }
.owned-cell { position: relative; cursor: pointer; transition: transform .18s; }
.owned-cell:hover { transform: translateY(-6px) scale(1.03); }
.owned-cell.missing .card { filter: grayscale(1) brightness(.45); }
.owned-cell .count {
  position: absolute; top: -10px; right: -8px; z-index: 6;
  background: #e6b02e; color: #1a1006; font-weight: 800; font-size: 13px;
  padding: 2px 9px; border-radius: 999px; box-shadow: 0 2px 6px #000;
}
.owned-cell .count.none { background: #3a3448; color: #bdb4cf; font-weight: 600; }

/* ---------- Market ---------- */
.market-banner {
  position: relative; overflow: hidden; border-radius: 16px; margin: 10px 0 14px;
  padding: 70px 20px 14px; min-height: 170px;
  background: linear-gradient(180deg, rgba(10,6,2,0) 20%, rgba(10,6,2,.9)), url("assets/lobby/market.png") center 30% / cover no-repeat;
  border: 3px solid #d9b25c; box-shadow: 0 0 0 2px #5a3d0e, 0 12px 30px rgba(0,0,0,.55);
}
.market-banner .page-title { margin: 0; }
.market-banner .note { color: #e8dcc0; margin: 0; }
.listings { display: flex; flex-direction: column; gap: 10px; }
.listing {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(10,8,18,.78); border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s, opacity .3s;
  --card-w: 64px;
}
.listing:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.listing.gone { opacity: 0; transform: translateX(40px); }
.listing .mini { cursor: zoom-in; }
.listing .mini .card .crest { display: none; }
.l-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.l-info b { font-family: "Cinzel", serif; }
.l-info small { color: var(--muted); }
.l-price { font-weight: 800; color: #ffe08a; font-size: 18px; text-align: right; display: flex; flex-direction: column; }
.l-price .deal { font-size: 11px; color: #8dff9a; font-weight: 600; }

/* ---------- Modals / overlays ---------- */
.overlay.modal { font-size: 16px; font-weight: 400; z-index: 20; padding: 16px; }
.modal-box {
  background: linear-gradient(180deg, #1f1830, #120d1c);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 16px; padding: 20px; max-width: 760px; width: 100%; max-height: calc(90 * var(--zvh)); overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  animation: popIn .25s ease-out;
}
.modal-box h3 { font-family: "Cinzel", serif; margin: 0 0 4px; font-size: 24px; text-align: center; }
.modal-box .note { text-align: center; }
@keyframes popIn { from { transform: scale(.92); opacity: 0; } }
.overlay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.overlay-actions button { padding: 8px 20px; }
.overlay .reward { font-size: 24px; color: #ffe08a; }
.detail { display: flex; gap: 24px; align-items: center; --card-w: 230px; flex-wrap: wrap; justify-content: center; }
.detail-info { flex: 1; min-width: 220px; }
.detail-info h3 { text-align: left; }
.detail-info .note, .detail-info .overlay-actions { text-align: left; justify-content: flex-start; }
.price-input { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.price-input input {
  width: 120px; font: inherit; padding: 6px 10px; border-radius: 8px;
  background: #0c0914; color: #ffe08a; border: 1px solid var(--accent);
}

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 30; }
.toast {
  background: rgba(20,16,32,.95); border: 1px solid rgba(255,255,255,.2); border-left: 4px solid var(--accent);
  padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.5);
  animation: toastIn .3s ease-out; transition: opacity .4s, transform .4s; max-width: 320px;
}
.toast.good { border-left-color: #4fd36a; }
.toast.bad { border-left-color: #ff4d5e; }
.toast.out { opacity: 0; transform: translateX(30px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } }

@media (max-width: 600px), (max-height: 520px) {
  .places { gap: 10px; flex-wrap: nowrap; }
  .place { width: calc(43 * var(--zvw)); }
  .place-plaque b { font-size: 17px; }
  .dock { gap: 6px; padding: 8px; }
  .dock button { min-width: 0; flex: 1; padding: 8px 6px; }
  .collection { --card-w: calc(40 * var(--zvw)); grid-template-columns: repeat(2, 1fr); }
  .listing { grid-template-columns: auto 1fr; }
  .listing .l-price { text-align: left; }
  .topbar .logo { font-size: 16px; }
}

/* ---------- Deck builder ---------- */
.deck-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 12px 16px; margin-bottom: 14px; border-radius: 12px;
  background: rgba(10,8,18,.78); border: 1px solid rgba(255,255,255,.12);
  position: sticky; top: 0; z-index: 4; backdrop-filter: blur(6px);
}
.deck-count { font-size: 18px; }
.deck-count b { font-size: 28px; font-family: "Cinzel", serif; }
.deck-count b.ok { color: #8dff9a; }
.deck-count b.bad { color: #ff7a85; }
.deck-count small { display: block; color: var(--muted); font-size: 12px; }
.deck-tribes { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.deck-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.deck-actions .primary { background: var(--accent); color: #140d04; border: 0; font-weight: 700; }
.deck-builder { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.deck-builder .collection { --card-w: 140px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.owned-cell.maxed .card { filter: brightness(.45); }
.deck-list {
  position: sticky; top: 96px; max-height: calc(calc(100 * var(--zdvh)) - 190px); overflow: auto;
  background: rgba(10,8,18,.82); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px;
}
.deck-list h3 { margin: 0 0 8px; font-family: "Cinzel", serif; }
.deck-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto auto; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: 8px; margin-bottom: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--m2, #555) 35%, transparent), rgba(255,255,255,.03));
  font-size: 14px;
}
.deck-row .dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 4px #000; }
.deck-row .dr-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-row .dr-stats { color: var(--muted); font-size: 12px; }
.deck-row button { padding: 0 8px; line-height: 1.4; }
.deck-row .dr-count { min-width: 16px; text-align: center; }
.deck-row.t-fire   { --m2: #e0561c; }
.deck-row.t-frost  { --m2: #45a6dc; }
.deck-row.t-nature { --m2: #4c9b46; }
.deck-row.t-shadow { --m2: #5f3a8e; }
.deck-row.t-storm  { --m2: #cfae1c; }
@media (max-width: 600px), (max-height: 520px) {
  .deck-builder { grid-template-columns: 1fr; }
  .deck-list { position: static; max-height: none; order: -1; }
  .deck-builder .collection { --card-w: calc(40 * var(--zvw)); }
  .deck-bar { top: 0; }
}


/* ---------- Title screen ---------- */
.view[hidden] { display: none !important; }
body[data-view="title"] .topbar { display: none; }
.view.title-screen {
  position: fixed; inset: 0; max-width: none; padding: 0; margin: 0;
  display: grid; place-items: center; overflow: hidden; z-index: 2;
}
.title-art {
  position: absolute; inset: -30px;
  background:
    linear-gradient(180deg, rgba(5,3,12,.15) 0%, rgba(5,3,12,.05) 45%, rgba(5,3,12,.85) 100%),
    url("assets/lobby/title.png") center / cover no-repeat,
    linear-gradient(180deg, var(--sky1), var(--sky2) 60%, var(--sky3));
  animation: kenburns 28s ease-in-out infinite alternate;
}
/* Portrait screens get the portrait key art once lobby.js has confirmed the file exists */
@media (orientation: portrait) {
  .title-art {
    background:
      linear-gradient(180deg, rgba(5,3,12,.15) 0%, rgba(5,3,12,.05) 45%, rgba(5,3,12,.85) 100%),
      var(--title-portrait, url("assets/lobby/title.png")) center / cover no-repeat,
      linear-gradient(180deg, var(--sky1), var(--sky2) 60%, var(--sky3));
  }
}
/* Slow push-in with a gentle pan, so the key art feels alive */
@keyframes kenburns {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, 1%); }
}
.title-glow { /* pulsing magic at the tower's heart */
  position: absolute; left: 50%; top: 28%; width: 46vmin; height: 46vmin; translate: -50% -50%;
  background: radial-gradient(circle, rgba(200,150,255,.55), rgba(140,80,255,.18) 40%, transparent 70%);
  mix-blend-mode: screen; animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse { 50% { opacity: .35; scale: 1.15; } }
.title-mist {
  position: absolute; left: -20%; right: -20%; height: 40%; bottom: 8%;
  background: radial-gradient(ellipse at 30% 50%, rgba(220,210,255,.18), transparent 60%),
              radial-gradient(ellipse at 75% 60%, rgba(220,210,255,.14), transparent 55%);
  filter: blur(8px); animation: mist 22s ease-in-out infinite alternate;
}
.title-mist.m2 { bottom: 22%; opacity: .7; animation-duration: 31s; animation-direction: alternate-reverse; }
@keyframes mist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.title-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.title-center {
  position: relative; text-align: center; margin-top: calc(38 * var(--zvh));
}
.title-logo {
  font-family: "Cinzel", serif; font-weight: 900; margin: 0;
  font-size: clamp(40px, calc(8 * var(--zvw)), 96px); letter-spacing: .04em;
  background: linear-gradient(180deg, #fffbe8, #f3cf72 55%, #8a5a10);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.85)) drop-shadow(0 0 30px rgba(255,190,80,.45));
}
.title-tag { color: #f1e6cc; margin: 4px 0 26px; letter-spacing: .08em; text-shadow: 0 2px 6px #000; }
.title-play {
  font-family: "Cinzel", serif; font-weight: 900; font-size: 30px; letter-spacing: .2em;
  padding: 14px 70px; border-radius: 999px; color: #1a1006;
  background: linear-gradient(180deg, #fff1b8, #e6b02e 55%, #9a6a12);
  border: 2px solid #fff6d0;
  box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 0 30px rgba(255,200,80,.55);
  animation: playPulse 2.2s ease-in-out infinite;
  transition: transform .15s;
}
.title-play:hover { transform: scale(1.07); background: linear-gradient(180deg, #fff6d0, #f0bf3c 55%, #a8761a); }
@keyframes playPulse { 50% { box-shadow: 0 8px 30px rgba(0,0,0,.6), 0 0 55px rgba(255,200,80,.9); } }

/* ---------- Tower ---------- */
.tower-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; padding-top: 10px; }
.tower-shaft {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 12px 0; border-radius: 18px 18px 6px 6px;
  max-height: calc(calc(100 * var(--zdvh)) - 90px); overflow: hidden auto; scrollbar-width: thin;
  background:
    linear-gradient(180deg, rgba(8,6,16,.55), rgba(8,6,16,.85)),
    url("assets/lobby/tower.png") center top / cover no-repeat,
    linear-gradient(180deg, #2a2140, #120d1c);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: inset 0 0 40px rgba(0,0,0,.7);
}
.tower-top { font-family: "Cinzel", serif; color: var(--accent); margin-bottom: 8px; text-shadow: 0 2px 6px #000; }
.floor {
  width: min(100%, 520px);
  display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 10px; text-align: left;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 38px, rgba(0,0,0,.12) 38px 40px),
    linear-gradient(180deg, #4a4256, #2b2536);
  border: 1px solid #6b6080; border-left: 5px solid var(--tc, #888);
  box-shadow: 0 3px 0 #15111c, inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .15s, box-shadow .15s;
}
.floor.t-fire { --tc: #e0561c; } .floor.t-frost { --tc: #45a6dc; } .floor.t-nature { --tc: #4c9b46; }
.floor.t-shadow { --tc: #8a5ccf; } .floor.t-storm { --tc: #e2c12a; }
.floor:hover:not(.locked) { transform: translateX(4px); }
.floor .f-num { font-family: "Cinzel", serif; font-weight: 900; font-size: 22px; color: #f6e9c8; text-align: center; }
.floor .f-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.floor .f-stars { color: #ffd24a; letter-spacing: 1px; font-size: 12px; }
.floor .f-reward { font-size: 18px; min-width: 50px; text-align: right; }
.floor.cleared { opacity: .75; background: linear-gradient(180deg, #3a4a3c, #222c24); }
.floor.locked { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.floor.current { animation: floorGlow 2s ease-in-out infinite; border-color: var(--accent); }
@keyframes floorGlow { 50% { box-shadow: 0 3px 0 #15111c, 0 0 22px color-mix(in srgb, var(--accent) 70%, transparent); } }
.floor.selected { outline: 2px solid #fff; outline-offset: 2px; }
.floor.boss { width: min(100%, 560px); padding: 13px 16px; background: linear-gradient(180deg, #6a2430, #2e0d14); border-color: #ffcf6a; }
.floor.boss .f-num { color: #ffcf6a; }
.tower-base { width: 100%; height: 26px; margin-top: 4px; background: linear-gradient(180deg, #3a3346, #15111c); border-radius: 6px 6px 0 0; }

.floor-panel {
  position: sticky; top: 10px; padding: 16px 18px; border-radius: 14px;
  background: rgba(10,8,18,.85); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  backdrop-filter: blur(6px);
}
.floor-panel .page-title { margin-top: 0; }
.floor-panel .foe { font-size: 18px; margin: -4px 0 10px; }
.floor-panel .foe.boss { color: #ffcf6a; font-weight: 700; }
.floor-facts { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; font-size: 14px; color: #ddd4ea; }
.floor-facts .stars { color: #ffd24a; }
.floor-reward { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); margin-bottom: 10px; }
.floor-reward span { font-size: 15px; }
.pack-tag { padding: 6px 10px; border-radius: 8px; background: linear-gradient(90deg, rgba(201,168,97,.3), transparent); }
.pack-tag.treasure { background: linear-gradient(90deg, rgba(53,199,89,.35), rgba(63,182,255,.2), transparent); }
.pack-tag small { display: block; color: var(--muted); }
.floor-panel .fight { background: var(--accent); color: #140d04; border: 0; font-weight: 800; font-size: 17px; padding: 10px 24px; }
@media (max-width: 600px), (max-height: 520px) {
  .tower-layout { grid-template-columns: 1fr; }
  .floor-panel { position: static; order: -1; }
  .tower-shaft { max-height: calc(60 * var(--zvh)); }
  .title-play { padding: 12px 50px; font-size: 24px; }
}


/* ---------- Shop buildings: forge & gem shop ---------- */
.forge-place .place-art   { background-image: url("assets/lobby/forge.png"), linear-gradient(#5c2a10, #1a0805); }
.gemshop-place .place-art { background-image: url("assets/lobby/gemshop.png"), linear-gradient(#2a1d52, #0a1830); }
.shop-banner {
  position: relative; overflow: hidden; border-radius: 16px; margin: 10px 0 14px;
  padding: 70px 20px 14px; min-height: 170px;
  border: 3px solid #d9b25c; box-shadow: 0 0 0 2px #5a3d0e, 0 12px 30px rgba(0,0,0,.55);
}
.shop-banner .page-title { margin: 0; }
.shop-banner .note { color: #e8dcc0; margin: 0; }
.forge-banner   { background: linear-gradient(180deg, transparent 20%, rgba(10,4,2,.9)), url("assets/lobby/forge.png") center 40% / cover no-repeat, #3a1a0a; }
.gemshop-banner { background: linear-gradient(180deg, transparent 20%, rgba(4,4,14,.9)), url("assets/lobby/gemshop.png") center 40% / cover no-repeat, #1a1440; }

.forge-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.forge-layout .collection { --card-w: 140px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.owned-cell.picked .card { box-shadow: 0 0 0 .2em #fff, 0 0 1.4em var(--accent); }
.forge-bench {
  position: sticky; top: 10px; padding: 14px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(40,20,8,.92), rgba(14,8,4,.94));
  border: 1px solid #d9b25c; box-shadow: inset 0 0 30px rgba(0,0,0,.6);
  max-height: calc(calc(100 * var(--zdvh)) - 90px); overflow: auto;
}
.forge-bench h3 { font-family: "Cinzel", serif; margin: 0 0 8px; color: #ffe9b0; }
.forge-bench h4 { margin: 12px 0 6px; color: #ffe9b0; }
.bench-card { display: flex; justify-content: center; --card-w: 190px; margin-bottom: 12px; }
.forge-bench.drilling .bench-card .card { animation: shake .35s ease 2; }
.socket-row, .gem-choice {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 6px; width: 100%; text-align: left;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.gem-choice { grid-template-columns: auto 1fr auto; }
.gem-choice:hover:not(:disabled) { border-color: var(--accent); }
.socket-row.active { border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent); }
.socket-row.locked { opacity: .5; }
.socket-row span, .gem-choice span { display: flex; flex-direction: column; min-width: 0; }
.socket-row small, .gem-choice small { color: var(--muted); font-size: 12px; }
.socket-row button, .gacha .roll { background: var(--accent); color: #140d04; border: 0; font-weight: 700; }
.socket-row .rm { background: #3a3448; color: var(--text); }
.gem-choice em { font-style: normal; color: #ffe08a; }
.sock-empty, .sock-locked {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px;
  background: radial-gradient(circle at 50% 60%, #000, #2a2016 70%); box-shadow: 0 0 0 2px #d9b25c, inset 0 2px 4px #000;
}

.gem-ico {
  display: inline-block; width: 26px; height: 26px; flex: none;
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.85) 0 16%, transparent 17%),
    conic-gradient(from 30deg, var(--gc), color-mix(in srgb, var(--gc) 35%, #000), var(--gc), color-mix(in srgb, var(--gc) 55%, #fff), var(--gc));
  filter: drop-shadow(0 0 4px var(--gc));
}
.gem-ico.big { width: 48px; height: 48px; }

.gacha { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.gacha .roll {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 30px; border-radius: 14px; font-size: 20px; font-family: "Cinzel", serif;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.gacha .roll small { font-family: inherit; font-size: 12px; font-weight: 600; }
.gacha .roll.ten { background: linear-gradient(180deg, #e7c8ff, #a557ff 55%, #4a1e8a); color: #fff; animation: playPulse 2.4s ease-in-out infinite; }
.sub-title { font-family: "Cinzel", serif; margin: 16px 0 10px; }
.gem-bag, .gem-reveal { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.gem-reveal { margin: 12px 0 16px; }
.gem-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 12px 8px; border-radius: 12px; background: rgba(10,8,18,.8); border: 1px solid rgba(255,255,255,.12);
}
.gem-tile small { color: var(--muted); font-size: 12px; }
.gem-tile em { position: absolute; top: 6px; right: 8px; font-style: normal; color: #ffe08a; font-weight: 700; }
.gem-tile.g1 { border-color: #5ad1ff; }
.gem-tile.pop { animation: dealIn .45s backwards; }


/* Legendary gems: orange fire glow */
.gem-ico.g2 { filter: drop-shadow(0 0 6px var(--gc)) drop-shadow(0 0 10px #c77dff); }
.gem-ico.g3 { filter: drop-shadow(0 0 8px var(--gc)) drop-shadow(0 0 16px #ff9a2e); animation: legendGlow 1.8s ease-in-out infinite; }
@keyframes legendGlow { 50% { filter: drop-shadow(0 0 12px var(--gc)) drop-shadow(0 0 26px #ffb84a); } }
.gem-tile.g2 { border-color: #c77dff; box-shadow: 0 0 12px rgba(199,125,255,.35); }
.gem-tile.g3 {
  border-color: #ff9a2e; box-shadow: 0 0 18px rgba(255,154,46,.55);
  background: radial-gradient(ellipse at 50% 20%, rgba(255,154,46,.22), rgba(10,8,18,.85) 70%);
}
.gem-tile.g3 b { color: #ffc46a; }
.gem-reveal .gem-tile.g3 { animation: dealIn .45s backwards, rareBurst 1s .5s; }

/* Individually socketed copies */
.owned-cell .count.gemmed { right: auto; left: -8px; background: linear-gradient(180deg, #e7c8ff, #a557ff); color: #1a0830; }
.deck-row.gemmed { box-shadow: inset 3px 0 0 #c77dff; }
.detail-copies { display: flex; flex-wrap: wrap; gap: 12px; --card-w: 110px; margin: 8px 0 12px; }
.forge-copies-label { grid-column: 1 / -1; color: var(--muted); font-size: 13px; margin: 6px 0 -6px; }

/* Four buildings in the hub, one row on desktop */
.places { flex-wrap: nowrap; gap: clamp(12px, calc(2 * var(--zvw)), 28px); }
.place { width: min(230px, calc((calc(100 * var(--zvw)) - 140px) / 4), calc((calc(100 * var(--zdvh)) - 290px) / 1.5)); max-height: none; }
.place-plaque b { font-size: clamp(15px, calc(1.6 * var(--zvw)), 20px); }
@media (max-width: 600px), (max-height: 520px) {
  .places { flex-wrap: wrap; }
  .place { width: calc(43 * var(--zvw)); }
  .forge-layout { grid-template-columns: 1fr; }
  .forge-bench { position: static; order: -1; max-height: none; }
  .forge-layout .collection { --card-w: calc(40 * var(--zvw)); }
}

/* ---------- Dev panel (localhost only) ---------- */
.dev-panel { position: fixed; left: 12px; bottom: 12px; z-index: 40; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.dev-toggle { width: 42px; height: 42px; border-radius: 50%; font-size: 20px; padding: 0; background: #1d3a26; border-color: #4fd36a; }
.dev-menu { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(10,20,14,.95); border: 1px solid #4fd36a; min-width: 210px; }
.dev-menu[hidden] { display: none; }
.dev-menu b { color: #8dff9a; font-size: 13px; margin-bottom: 2px; }
.dev-menu button { text-align: left; font-size: 13px; padding: 5px 10px; }

@media (prefers-reduced-motion: reduce) {
  .place, .place-art, .place-glow, .pack .pack-art::after, .title-art, .title-glow, .title-mist, .title-play, .floor.current, .scene .layer { animation: none; }
}

/* ---------- Phone in landscape: lobby & title fit the short screen ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  #lobby-view { padding-top: 0; padding-bottom: 0; }
  .hub { min-height: 100%; gap: 10px; padding: 6px 0; }
  .hub .game-title { display: none; }
  .places { flex-wrap: nowrap; gap: 12px; }
  .place { width: min(calc((calc(100 * var(--zvw)) - 120px) / 4), calc((calc(100 * var(--zdvh)) - 150px) / 1.5)); }
  .place-plaque { left: 6px; right: 6px; bottom: 6px; padding: 5px 4px; }
  .place-plaque b { font-size: 13px; }
  .place-plaque small { display: none; }
  .dock { padding: 6px; }
  .dock button { min-width: 72px; padding: 5px 10px; flex: none; }
  .dock .ico { font-size: 18px; }
  .title-center { margin-top: calc(30 * var(--zvh)); }
  .title-logo { font-size: clamp(30px, calc(7 * var(--zvw)), 60px); }
  .title-tag { margin-bottom: 12px; }
  .title-play { padding: 8px 46px; font-size: 22px; }
  .topbar { padding: 4px 12px; }
}

/* ---------- App shell: the page itself never scrolls ----------
   The top bar stays put; each view fills the rest of the screen. Long pages (cards, market, deck...)
   scroll inside their view; the title, lobby and battle are sized to fit with no scrolling at all. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  display: flex; flex-direction: column;
  height: calc(100 * var(--zdvh)); min-height: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.topbar { position: relative; flex: none; }
.view {
  flex: 1 1 auto; min-height: 0; width: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
#title-view, #lobby-view, #game-view { overflow: hidden; }
#lobby-view .hub { height: 100%; min-height: 0; }
/* Phone portrait: the four buildings (2 x 2) shrink with the screen height */
@media (max-width: 600px) and (orientation: portrait) {
  .place { width: min(calc(43 * var(--zvw)), calc((calc(100 * var(--zdvh)) - 330px) / 3)); }
  .hub { gap: 12px; justify-content: space-evenly; }
  .game-title { font-size: clamp(24px, calc(8 * var(--zvw)), 40px); }
}

/* ---------- Tablet portrait (iPad): the four buildings as a big 2 x 2 ---------- */
@media (orientation: portrait) and (min-width: 601px) {
  .places { flex-wrap: wrap; max-width: 680px; gap: 22px; }
  .place { width: min(300px, calc(40 * var(--zvw)), calc((calc(100 * var(--zdvh)) - 340px) / 3.1)); }
  .place-plaque b { font-size: 22px; }
}

/* ---------- Premium skins: painted scene ---------- */
body.skin-art .scene .far, body.skin-art .scene .near { display: none; }
body.skin-art .scene .sky {
  background: var(--sky-img) center / cover no-repeat, linear-gradient(180deg, var(--sky1), var(--sky2) 60%, var(--sky3));
  animation: artDrift 40s ease-in-out infinite alternate;
}
@keyframes artDrift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
/* Vignette + soft darkening so buttons and text stay readable on top of the art */
body.skin-art .scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.1) 40%, rgba(0,0,0,.45));
}
body.skin-art[data-view="game"] .scene::after { background: rgba(0,0,0,.55); }

/* ---------- Skin cards ---------- */
.skin-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.skin-card.premium {
  grid-column: span 2;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(10,8,18,.92), rgba(10,8,18,.92)) padding-box,
    linear-gradient(135deg, #fff3c4, #e6b02e 30%, #8a5a10 55%, #ffe08a 80%, #b07a18) border-box;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 22px color-mix(in srgb, var(--sa) 30%, transparent);
}
.skin-card.premium:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 34px color-mix(in srgb, var(--sa) 55%, transparent); }
.skin-card.premium .skin-preview { height: 220px; }
.sp-art { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform 6s ease; }
.skin-card.premium:hover .sp-art { transform: scale(1.1); }
.sp-shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 38%, rgba(255,240,200,.45) 50%, transparent 62%) 0 0 / 300% 100%;
  animation: sweep 4.5s linear infinite;
}
.ribbon {
  position: absolute; top: 14px; right: -34px; transform: rotate(35deg);
  background: linear-gradient(90deg, #8a5a10, #ffe08a, #8a5a10); color: #2a1804;
  font: 900 12px "Cinzel", serif; letter-spacing: .15em; padding: 4px 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.skin-info { flex-wrap: wrap; }
.si-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-text small { color: var(--muted); font-size: 12px; }
.skin-card.premium .si-text b { font-family: "Cinzel", serif; font-size: 18px; color: #ffe9b0; }
.si-actions { display: flex; gap: 6px; align-items: center; }
.si-actions .try { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.25); font-weight: 600; }

/* Try-before-buy bar */
.preview-bar {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 35;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(14,10,24,.92); border: 1px solid var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.6);
  animation: toastIn .3s ease-out;
}
.preview-bar .buy { background: var(--accent); color: #140d04; border: 0; font-weight: 800; }
@media (max-width: 600px) {
  .skin-card.premium { grid-column: auto; }
  .skin-card.premium .skin-preview { height: 170px; }
  .preview-bar { border-radius: 16px; width: calc(100% - 24px); }
}

/* iPhone Safari: how to get full screen */
.install-hint {
  display: flex; align-items: center; gap: 10px; margin: 14px auto 0; max-width: 520px;
  padding: 8px 10px 8px 14px; border-radius: 14px; text-align: left; font-size: 13px; line-height: 1.4;
  background: rgba(10,8,18,.82); border: 1px solid rgba(255,220,140,.5); color: #f3e9d2;
  backdrop-filter: blur(6px);
}
.install-hint[hidden] { display: none; }
.install-hint .hint-close { flex: none; padding: 2px 8px; background: transparent; border-color: rgba(255,255,255,.3); }
@media (orientation: landscape) and (max-height: 520px) {
  .install-hint { margin-top: 8px; font-size: 12px; padding: 5px 8px 5px 12px; }
}

/* ---------- Town scene lobby ---------- */
.town { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.town[hidden] { display: none; }
.town-scroll {
  width: 100%; height: 100%;
  overflow: auto hidden; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.town-scroll::-webkit-scrollbar { display: none; }
/* Same box as the art at "cover" size, so % positions of the tap areas stay on the buildings */
.town-stage {
  position: relative; top: 50%; translate: 0 -50%;
  width: max(100cqw, calc(100cqh * var(--ar)));
  height: max(100cqh, calc(100cqw / var(--ar)));
  background: center / 100% 100% no-repeat;
}
.town-stage::after { /* vignette for readability of the top bar and dock */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 18%, transparent 75%, rgba(0,0,0,.55));
}
body.town-mode #lobby-view { position: relative; max-width: none; padding: 0; margin: 0; }
/* The skin's particles float over the town; its sky / mountains are not needed there */
body.town-mode[data-view="lobby"] .scene { z-index: 2; }
body.town-mode[data-view="lobby"] .scene .sky,
body.town-mode[data-view="lobby"] .scene .far,
body.town-mode[data-view="lobby"] .scene .near,
body.town-mode[data-view="lobby"] .scene::after { display: none; }
body.town-mode .hub { position: absolute; inset: auto 0 0 0; height: auto; min-height: 0; pointer-events: none; justify-content: flex-end; padding-bottom: 12px; }
body.town-mode .hub .game-title, body.town-mode .places { display: none; }
body.town-mode .dock { pointer-events: auto; }

.spot {
  position: absolute; translate: -50% -50%; z-index: 1;
  padding: 0; border: 0; background: none; border-radius: 30%;
  display: flex; align-items: flex-start; justify-content: center;
}
.spot:hover { background: none; }
.spot-glow { /* soft light on the building, pulses so players know it's tappable */
  position: absolute; inset: 0; border-radius: 45%;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%);
  opacity: .35; animation: spotPulse 2.8s ease-in-out infinite; transition: opacity .2s;
}
.spot:hover .spot-glow, .spot:active .spot-glow { opacity: 1; animation: none; }
@keyframes spotPulse { 50% { opacity: .75; } }
.spot-label {
  position: relative; margin-top: -8px;
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 12px; border-radius: 10px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(40,26,10,.9), rgba(14,9,4,.92));
  border: 2px solid #d9b25c; box-shadow: 0 6px 16px rgba(0,0,0,.6);
  transition: transform .2s;
}
.spot:hover .spot-label { transform: translateY(-4px) scale(1.05); }
.spot-label b { font-family: "Cinzel", serif; font-size: clamp(13px, calc(1.5 * var(--zvw)), 19px); color: #ffe9b0; text-shadow: 0 2px 4px #000; }
.spot-label small { color: #d8c9a8; font-size: 11px; }
.spot-label small:empty { display: none; }
@media (max-width: 600px), (max-height: 520px) {
  .spot-label { padding: 3px 8px; }
  .spot-label small { display: none; }
}
/* Portrait: the town is wider than the screen — hint that it can be swiped */
@media (orientation: portrait) {
  body.town-mode .town::before, body.town-mode .town::after {
    position: absolute; top: 45%; z-index: 2; pointer-events: none;
    font: 700 34px/1 "Cinzel", serif; color: rgba(255,233,176,.75); text-shadow: 0 2px 8px #000;
    animation: swipeHint 2.4s ease-in-out infinite;
  }
  body.town-mode .town::before { content: "‹"; left: 8px; }
  body.town-mode .town::after  { content: "›"; right: 8px; animation-direction: reverse; }
}
@keyframes swipeHint { 50% { opacity: .25; transform: translateX(4px); } }

/* ---------- Skin colour grade on painted pages (town, tower) ----------
   A skin without its own town art tints the shared art with its palette. */
.town-stage::before, .tower-shaft::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, var(--sky2), var(--sky3) 70%, var(--sky1));
  mix-blend-mode: color; opacity: var(--tint, .45);
}
.town-stage.own-art::before { display: none; }
.tower-shaft::before { position: absolute; border-radius: inherit; }
.tower-shaft > * { position: relative; z-index: 1; }
.spot { z-index: 1; }
/* Midnight is the art's native palette: only a light touch */
body[data-skin="midnight"] { --tint: .12; }

/* ---------- Settings ---------- */
.gear { padding: 4px 10px; font-size: 18px; background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.2); border-radius: 999px; }
.title-gear { display: block; margin: 12px auto 0; padding: 6px 18px; border-radius: 999px; background: rgba(10,8,18,.6); border-color: rgba(255,220,140,.4); backdrop-filter: blur(4px); }
.settings-overlay .modal-box { max-width: 460px; }
.settings h4 { margin: 14px 0 6px; color: var(--accent); font-family: "Cinzel", serif; font-size: 15px; }
.set-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 8px 0; }
.set-row:has(input[type="range"]) { grid-template-columns: 130px 1fr 34px; }
.set-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.set-row .set-val { text-align: right; color: #ffe08a; }
.set-row.toggle input { width: 22px; height: 22px; accent-color: var(--accent); }
.seg { display: inline-flex; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 5px 10px; background: rgba(0,0,0,.35); }
.seg button.active { background: var(--accent); color: #140d04; font-weight: 800; }
@media (max-width: 600px) {
  .set-row:has(input[type="range"]) { grid-template-columns: 100px 1fr 30px; }
  .seg button { padding: 5px 7px; font-size: 13px; }
}
/* UI size: zoom the page, and divide the app height by the same factor so it still fills the screen */
body { zoom: var(--ui-zoom, 1); height: calc(100dvh / var(--ui-zoom, 1)); }

/* ---------- Dust ---------- */
.pill.dust { border-color: #b98cff; color: #e4d2ff; }
.pack-buy { display: flex; gap: 6px; }
.pack-buy .dust-buy { background: linear-gradient(180deg, #e7d4ff, #a46bff); color: #1b0b33; }
.flip-front { position: relative; }
.flip.to-dust.open .card { filter: grayscale(.6) brightness(.7); }
.dust-badge {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 6; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 14px;
  background: linear-gradient(180deg, #f1e6ff, #a46bff); color: #1b0b33;
  box-shadow: 0 0 18px rgba(180,130,255,.9);
}

/* ---------- Pack altar page ----------
   The sanctuary is painted (assets/lobby/altar_room.jpg); only light, the pack and sparks are CSS,
   placed in % of the art over its magic circle (centre 50% / 59.7%). */
.view.altar-page { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  max-width: none; margin: 0; padding: 0 0 14px; overflow: hidden; }
.view.altar-page[hidden] { display: none !important; }
body[data-view="altar"] .scene .sky, body[data-view="altar"] .scene .far,
body[data-view="altar"] .scene .near, body[data-view="altar"] .scene::after { display: none; }
body[data-view="altar"] .scene { z-index: 2; }
.altar-room { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.altar-stage { /* same box as the art at "cover" size, kept centred on the circle */
  --ar: 1.791; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100cqw, calc(100cqh * var(--ar))); height: max(100cqh, calc(100cqw / var(--ar)));
  background: url("assets/lobby/altar_room.jpg") center / 100% 100% no-repeat;
}
.altar-stage::before { /* skin colour grade, like the town */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--sky2), var(--sky3) 70%, var(--sky1));
  mix-blend-mode: color; opacity: var(--tint, .45);
}
.altar-stage::after { /* vignette so the top bar and the panel read well */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 16%, transparent 66%, rgba(0,0,0,.6));
}

.altar { --ac: #c79bff; --ac2: #ffd27a; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.altar.t-fire   { --ac: #ff8a3a; --ac2: #ff3b2e; }
.altar.t-frost  { --ac: #9fe6ff; --ac2: #3fb6ff; }
.altar.t-nature { --ac: #9dff8a; --ac2: #35c759; }
.altar.t-shadow { --ac: #d3a8ff; --ac2: #7a3fd0; }
.altar.t-storm  { --ac: #ffe45c; --ac2: #ffb02e; }
.altar.premium  { --ac: #ffe08a; --ac2: #ffb02e; }

/* Light added on top of the painted beam and circle, coloured by the chosen pack */
.altar-beam {
  position: absolute; left: 50%; top: 0; width: 13%; height: 60%; translate: -50% 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--ac) 75%, transparent), color-mix(in srgb, var(--ac2) 30%, transparent) 60%, transparent);
  filter: blur(14px); mix-blend-mode: screen; opacity: .45; border-radius: 40% 40% 0 0;
  animation: beamPulse 3s ease-in-out infinite;
}
@keyframes beamPulse { 50% { opacity: .75; } }
.altar-glow {
  position: absolute; left: 50%; top: 59.7%; width: 36%; height: 11%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ac) 80%, #fff), color-mix(in srgb, var(--ac) 45%, transparent) 55%, transparent);
  mix-blend-mode: screen; opacity: .55; animation: beamPulse 3s ease-in-out infinite;
}

/* The pack floating in the beam above the circle */
.altar-pack {
  position: absolute; left: 50%; top: 27%; width: 7.2%; aspect-ratio: 5 / 7; translate: -50% 0;
  animation: packFloat 3.2s ease-in-out infinite;
}
.pack-face {
  width: 100%; height: 100%; border-radius: 8%; display: grid; place-items: center;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%) 0 0 / 300% 100%,
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ac) 70%, #fff) 0 18%, transparent 19%),
    linear-gradient(150deg, var(--ac), var(--ac2) 55%, #1a0f2e);
  border: 2px solid #f3d98a;
  box-shadow: 0 0 18px var(--ac), 0 0 50px color-mix(in srgb, var(--ac2) 70%, transparent), inset 0 0 14px rgba(0,0,0,.4);
  animation: sweep 3.5s linear infinite;
}
.pack-face span { font-size: calc(2.6cqw); filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
@keyframes packFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12%) rotate(3deg); } }

.sparks i {
  position: absolute; left: var(--x); top: 58%; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px var(--ac), 0 0 12px var(--ac2);
  animation: sparkRise 3.2s ease-in infinite; animation-delay: var(--d); scale: var(--s); opacity: 0;
}
@keyframes sparkRise { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-38cqh); opacity: 0; } }

/* Summon sequence */
.altar.summoning .altar-beam { opacity: 1; width: 22%; animation-duration: .4s; }
.altar.summoning .altar-glow { opacity: 1; animation-duration: .4s; }
.altar.summoning .altar-pack { animation: packShake .12s linear infinite; top: 22%; transition: top 1s ease-out; }
@keyframes packShake { 25% { transform: translate(-3%, -2%) rotate(-4deg); } 75% { transform: translate(3%, 2%) rotate(4deg); } }
.altar.burst .altar-pack { animation: packBurst .45s ease-out forwards; }
@keyframes packBurst { to { transform: scale(2.6); opacity: 0; filter: brightness(3); } }
.altar.burst::after {
  content: ""; position: absolute; left: 50%; top: 35%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff, color-mix(in srgb, var(--ac) 60%, transparent) 30%, transparent 65%);
  animation: flash .45s ease-out forwards;
}
@keyframes flash { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }

.altar-panel {
  position: relative; z-index: 3;
  width: min(460px, 94%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(40,26,10,.78), rgba(14,9,4,.86));
  border: 2px solid #d9b25c; box-shadow: 0 8px 24px rgba(0,0,0,.6); backdrop-filter: blur(4px);
}
.altar-pick { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; }
.altar-pick .arrow { width: 42px; height: 42px; border-radius: 50%; padding: 0; font-size: 16px; }
.altar-info { text-align: center; display: flex; flex-direction: column; }
.altar-info b { font-family: "Cinzel", serif; font-size: 22px; color: #ffe9b0; }
.altar-info small { color: var(--muted); }
.altar-dots { display: flex; gap: 5px; }
.altar-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.altar-dots i.on { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.altar-buy { display: flex; gap: 10px; }
.altar-buy button { padding: 10px 22px; font-size: 17px; font-weight: 800; border: 0; border-radius: 12px; }
.altar-buy .gold-buy { background: linear-gradient(180deg, #fff1b8, #e6b02e 55%, #9a6a12); color: #1a1006; }
.altar-buy .dust-buy { background: linear-gradient(180deg, #f1e6ff, #a46bff); color: #1b0b33; }
@media (prefers-reduced-motion: reduce) { .altar *, .altar::after { animation: none !important; } }

/* Landscape phone: one compact row so the panel stays below the altar */
@media (orientation: landscape) and (max-height: 520px) {
  .view.altar-page { padding-bottom: 8px; }
  .altar-panel { width: min(640px, 96%); flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 6px 12px; }
  .altar-panel .note, .altar-dots { display: none; }
  .altar-pick { width: auto; flex: 1 1 260px; gap: 6px; }
  .altar-pick .arrow { width: 34px; height: 34px; }
  .altar-info b { font-size: 17px; }
  .altar-info small { font-size: 11px; }
  .altar-buy button { padding: 7px 14px; font-size: 15px; }
}