/* ============================================================
   SCREENS — layout for Player / Main / Host + chrome
   ============================================================ */

/* ---------- mode switcher chrome ---------- */
.mode-bar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 9000; display: flex; gap: 4px; padding: 4px;
  border-radius: 999px;
}
.mode-bar button {
  font-family: var(--font-display); font-weight:500; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: transparent; border: none; color: hsl(var(--muted-foreground));
  padding: .42rem .95rem; border-radius: 999px; cursor: pointer; transition: all .2s;
}
.mode-bar button.active { background: hsl(var(--primary)/0.16); color: hsl(var(--primary)); }
.mode-bar button:hover:not(.active) { color: hsl(var(--foreground)); }
.mode-bar .pid-sel {
  background: transparent; border:none; color: hsl(var(--muted-foreground));
  font-family: var(--font-body); font-size:.72rem; padding: 0 .4rem; cursor:pointer;
  border-left: 1px solid hsl(var(--border)); margin-left: 2px;
}
.mode-bar .pid-sel option { background: hsl(var(--surface)); }
.mute-btn {
  position: fixed; top: 12px; right: 14px; z-index:9000;
  width: 38px; height: 38px; border-radius: 999px; display:grid; place-items:center;
  cursor:pointer; color: hsl(var(--primary));
}

/* discreet keeper's door + leave-seat chrome */
.fs-btn {
  position: fixed; top: 12px; right: 60px; z-index:9000;
  width: 38px; height: 38px; border-radius: 999px; display:grid; place-items:center;
  cursor:pointer; color: hsl(var(--primary));
}
.lock-corner {
  position: fixed; bottom: 16px; right: 16px; z-index: 9000;
  width: 40px; height: 40px; border-radius: 999px; display:grid; place-items:center;
  cursor: pointer; color: hsl(var(--muted-foreground)/.7);
  background: hsl(var(--background)/.4); box-shadow: inset 0 0 0 1px hsl(var(--border)/.6);
  backdrop-filter: blur(6px); opacity:.5; transition: opacity .25s, color .25s;
}
.lock-corner:hover { opacity:1; color: hsl(var(--primary)); }
.leave-seat {
  position: fixed; top: 12px; left: 14px; z-index: 9000;
  font-family: var(--font-body); font-size:.72rem; letter-spacing:.08em;
  padding:.45rem .8rem; border-radius:999px; cursor:pointer;
  color: hsl(var(--muted-foreground)); background: hsl(var(--background)/.5);
  box-shadow: inset 0 0 0 1px hsl(var(--border)); backdrop-filter: blur(6px);
}
.leave-seat:hover { color: hsl(var(--foreground)); }

/* live-sync status pill */
.net-pill { position:fixed; top:14px; right:60px; z-index:9000; display:flex; align-items:center; gap:7px;
  padding:.3rem .7rem; border-radius:999px; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:hsl(var(--muted-foreground)); background:hsl(var(--background)/.5); box-shadow: inset 0 0 0 1px hsl(var(--border));
  backdrop-filter:blur(6px); }
.net-pill .net-dot { width:8px; height:8px; border-radius:999px; background:hsl(var(--muted-foreground)); }
.net-pill.net-online { color:hsl(var(--heal)); box-shadow: inset 0 0 0 1px hsl(var(--heal)/.4); }
.net-pill.net-online .net-dot { background:hsl(var(--heal)); box-shadow:0 0 8px hsl(var(--heal)); animation: intel-pulse 1.6s ease-out infinite; }
.net-pill.net-connecting .net-dot { background:hsl(var(--primary)); animation: intel-pulse 1s ease-out infinite; }
.net-pill.net-off .net-dot { background:hsl(var(--damage)); }
@media (max-width:560px){ .net-pill { font-size:0; gap:0; padding:.42rem; right:58px; } }

/* embers */
.embers { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.ember {
  position:absolute; bottom:-10px; border-radius:999px;
  background: radial-gradient(circle, hsl(var(--primary)) 0%, hsl(38 90% 50% / .6) 40%, transparent 70%);
  opacity: 0; animation-name: ember-rise; animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes ember-rise {
  0% { transform: translateY(0) translateX(0) scale(.8); opacity:0; }
  10% { opacity: calc(var(--ember-op) * var(--ember-opacity, 1)); }
  85% { opacity: calc(var(--ember-op) * var(--ember-opacity, 1) * .5); }
  100% { transform: translateY(-100vh) translateX(var(--drift)) scale(1.1); opacity:0; }
}

/* flame flicker on the title */
@keyframes flicker {
  0%,100% { text-shadow: 0 0 30px hsl(var(--primary)/.45), 0 0 60px hsl(var(--primary)/.2); opacity:1; }
  45% { text-shadow: 0 0 22px hsl(var(--primary)/.35), 0 0 40px hsl(var(--primary)/.15); opacity:.92; }
  55% { text-shadow: 0 0 38px hsl(var(--primary)/.6), 0 0 80px hsl(var(--primary)/.3); opacity:1; }
}
.flicker { animation: flicker 4s ease-in-out infinite; }

/* ---------- enter gate ---------- */
.enter-gate {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, hsl(24 16% 9%), hsl(var(--background)));
  cursor: pointer;
}
.enter-gate .ring {
  text-align:center; padding: 3rem 3.4rem; border-radius: 28px;
  animation: fade-rise .9s ease-out both;
}
.enter-gate h1 { font-size: clamp(2rem,7vw,3.4rem); color: hsl(var(--primary)); margin-bottom:.6rem;
  text-shadow: 0 0 40px hsl(var(--primary)/0.4); }
.enter-gate p { color: hsl(var(--muted-foreground)); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; }
.enter-flame {
  width: 8px; height: 8px; border-radius: 999px; background: hsl(var(--primary));
  margin: 0 auto 1.8rem; box-shadow: 0 0 30px 8px hsl(var(--primary)/0.7);
  animation: intel-pulse 1.8s ease-out infinite;
}

/* ---------- roster: choose your hero ---------- */
.roster-screen {
  position:absolute; inset:0; overflow-y:auto; z-index:1;
  background: radial-gradient(ellipse at 50% -10%, hsl(30 30% 14%), hsl(var(--background)) 60%);
  display:flex; align-items:center; justify-content:center;
}
.roster-inner { position:relative; z-index:3; width:100%; max-width: 1000px; padding: 7vh 24px; margin:auto; }
.roster-head { text-align:center; margin-bottom: 4vh; }
.roster-head h1 { font-size: clamp(1.8rem,5vw,3rem); color: hsl(var(--foreground)); text-shadow:0 0 40px hsl(var(--primary)/.25); }
.roster-head p { color: hsl(var(--muted-foreground)); letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; margin-top:.7rem; }
.roster-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; }
.hero-card {
  border-radius: 18px; padding: 1.8rem 1.2rem; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .2s;
}
.hero-card:hover { transform: translateY(-6px); }
.hero-emblem {
  width: 84px; height: 84px; border-radius: 50%; display:grid; place-items:center;
  color: hsl(var(--primary)); margin-bottom:.4rem;
  background: radial-gradient(circle at 40% 35%, hsl(38 50% 24%), hsl(24 20% 10%));
  box-shadow: inset 0 0 0 1.5px hsl(var(--primary)/.4), 0 0 30px hsl(var(--primary)/.18);
}
.hero-card[data-cls] .hero-emblem { }
.hero-name { font-size: 1.15rem; color: hsl(var(--foreground)); line-height:1.15; }
.hero-cls { font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
.hero-take { margin-top:.6rem; font-size:.68rem; letter-spacing:.1em; color: hsl(var(--primary)/.7);
  opacity:0; transform: translateY(4px); transition: all .25s; }
.hero-card:hover .hero-take { opacity:1; transform: translateY(0); }

/* ---------- keeper's door (password) ---------- */
.keeper-bg { position:fixed; inset:0; z-index:12000; background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px); display:grid; place-items:center; padding:20px; }
.keeper { position:relative; width:min(440px,94vw); border-radius:22px; padding: 2.4rem 2rem 2rem; text-align:center; }
.keeper-x { position:absolute; top:14px; right:18px; cursor:pointer; color:hsl(var(--muted-foreground)); }
.keeper-flame { width:8px; height:8px; border-radius:999px; background:hsl(var(--primary)); margin:0 auto 1.4rem;
  box-shadow:0 0 26px 7px hsl(var(--primary)/.7); animation: intel-pulse 1.8s ease-out infinite; }
.keeper h3 { font-size:1.5rem; color:hsl(var(--primary)); letter-spacing:.08em; margin-bottom:.6rem; }
.keeper-input {
  width:100%; text-align:center; letter-spacing:.3em; font-size:1.1rem;
  background: hsl(var(--background)/.6); border:1px solid hsl(var(--border));
  color: hsl(var(--foreground)); border-radius:12px; padding:.9rem 1rem; outline:none;
  font-family: var(--font-display);
}
.keeper-input:focus { border-color: hsl(var(--primary)/.7); box-shadow:0 0 0 3px hsl(var(--primary)/.12); }
.keeper-input.bad { border-color: hsl(var(--damage)/.8); }
.keeper-err { color:hsl(var(--damage)); font-size:.78rem; margin-top:.7rem; letter-spacing:.04em; }
.keeper-go {
  margin-top:1.2rem; width:100%; padding:.85rem; border-radius:12px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem;
  color: hsl(var(--primary-foreground)); background: hsl(var(--primary)); border:none;
}
.keeper-go:hover { filter:brightness(1.1); }
.keeper-choice { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:.4rem; }
.kc-btn { border-radius:16px; padding:1.4rem 1rem; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:.4rem; color:hsl(var(--foreground)); }
.kc-btn:hover { color: hsl(var(--primary)); }
.kc-t { font-size:1rem; letter-spacing:.06em; margin-top:.3rem; }
.kc-s { font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }

/* ---------- character creation ---------- */
.create-screen {
  position:absolute; inset:0; overflow-y:auto; z-index:1;
  background: radial-gradient(ellipse at 50% -8%, hsl(30 30% 13%), hsl(var(--background)) 58%);
}
.create-inner { position:relative; z-index:3; width:100%; max-width: 760px; margin:0 auto; padding: 6vh 18px 12vh; }
.create-head { text-align:center; margin-bottom: 2.4rem; }
.create-head h1 { font-size: clamp(1.8rem,6vw,2.8rem); color: hsl(var(--foreground)); text-shadow:0 0 40px hsl(var(--primary)/.25); }
.create-head p { color: hsl(var(--muted-foreground)); font-size:.86rem; margin-top:.7rem; line-height:1.5; }
.create-card { border-radius: 18px; padding: 1.4rem 1.3rem; margin-bottom: 1.1rem; }
.cc-section { font-family:var(--font-display); font-weight:700; color:hsl(var(--primary)); letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; margin-bottom: 1rem; }
.cc-section.sub { margin-top: 1.4rem; color:hsl(var(--foreground)/.85); font-size:.74rem; display:flex; align-items:baseline; gap:8px; }
.cc-grid { display:grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.cc-field { display:flex; flex-direction:column; gap:.4rem; }
.cc-field.full { grid-column: 1 / -1; }
.cc-field span { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
.cc-field textarea.tinput { resize: vertical; min-height: 70px; line-height:1.5; }

.cc-pool { font-family:var(--font-display); font-weight:700; color:hsl(var(--primary)); font-size:1.3rem; }
.cc-pool em { font-style:normal; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-left:4px; }
.cc-pool.done { color: hsl(var(--heal)); }
.cc-pool-bar { height:6px; border-radius:99px; background:hsl(20 20% 6%/.8); overflow:hidden; margin:.4rem 0 1.2rem; }
.cc-pool-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,hsl(var(--heal)),hsl(var(--primary))); transition:width .25s ease; }

/* phones: ONE column so the label + stepper always fit (2 cols clipped the
   right column's + button on narrow screens); wider phones get 2, tablets 3. */
.alloc-grid { display:grid; grid-template-columns: 1fr; gap:.6rem; }
@media(min-width:440px){ .alloc-grid{ grid-template-columns: repeat(2,1fr);} }
@media(min-width:560px){ .alloc-grid{ grid-template-columns: repeat(3,1fr);} }
.alloc-row {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:.6rem .7rem; border-radius:12px; background:hsl(var(--background)/.4);
  box-shadow: inset 0 0 0 1px hsl(var(--border)/.5);
}
.alloc-row.hp { background: hsl(var(--primary)/.07); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.3); margin-bottom:.4rem; }
.alloc-label { display:flex; flex-direction:column; gap:1px; min-width:0; }
.al-k { font-family:var(--font-display); font-weight:700; font-size:.9rem; color:hsl(var(--foreground)); }
.al-sub { font-size:.6rem; letter-spacing:.06em; color:hsl(var(--muted-foreground)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.alloc-ctrl { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.alloc-val { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:hsl(var(--primary)); min-width:30px; text-align:center; }
.alloc-step {
  width:30px; height:30px; border-radius:8px; border:none; cursor:pointer; font-size:1.15rem; line-height:1;
  font-family:var(--font-display); font-weight:700; color:hsl(var(--foreground));
  background:hsl(var(--surface)); box-shadow: inset 0 0 0 1px hsl(var(--border));
}
.alloc-step.plus { color:hsl(var(--primary)); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.5); }
.alloc-step:hover:not(:disabled){ filter:brightness(1.3); }
.alloc-step:disabled{ opacity:.3; cursor:not-allowed; }

.create-begin {
  width:100%; padding:1rem; border-radius:14px; cursor:pointer; border:none; margin-top:.4rem;
  font-family:var(--font-display); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.86rem;
  color:hsl(var(--primary-foreground)); background:hsl(var(--primary));
  box-shadow: 0 8px 30px hsl(var(--primary)/.3); transition: filter .2s, transform .15s;
}
.create-begin:hover:not(.disabled){ filter:brightness(1.1); }
.create-begin:active:not(.disabled){ transform: scale(.99); }
.create-begin.disabled { background:hsl(var(--surface)); color:hsl(var(--muted-foreground)); box-shadow:inset 0 0 0 1px hsl(var(--border)); cursor:not-allowed; }
.create-note { text-align:center; color:hsl(var(--muted-foreground)); font-size:.7rem; margin-top:.9rem; letter-spacing:.02em; }

/* ============================================================
   PLAYER SCREEN
   ============================================================ */
.player-screen { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; }
.player-screen.vignette::after { position:fixed; }
.player-wrap {
  min-height: 100%; max-width: 1100px; margin: 0 auto;
  padding: 64px 18px 40px; position:relative; z-index:2;
}
.player-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px){
  .player-grid { grid-template-columns: 1fr 280px; align-items:start; }
  .player-aside { position: sticky; top: 64px; }
}

.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.topbar .pname { font-size: 1.35rem; line-height:1.1; color: hsl(var(--foreground)); }
.topbar .pclass { font-family: var(--font-body); font-size:.74rem; letter-spacing:.22em;
  text-transform:uppercase; color: hsl(var(--muted-foreground)); margin-top:4px; }
.coins-pill { color: hsl(var(--primary)); font-family: var(--font-display); font-weight:700;
  font-size: 1.05rem; align-self:flex-start; }

/* cards strip */
.cards-block { display:flex; align-items:center; gap:14px; }
.cards-strip { display:flex; gap:7px; flex:1; }
.card-slot {
  flex:1; max-width: 46px; aspect-ratio: 2.6/3.4; border-radius: 7px;
  background: linear-gradient(160deg, hsl(38 40% 30% / .5), hsl(38 30% 16% / .5));
  box-shadow: inset 0 0 0 1px hsl(var(--primary)/0.35), 0 3px 8px rgba(0,0,0,.4);
  display:grid; place-items:center; color: hsl(var(--primary)/0.85);
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s, filter .5s;
  transform-style: preserve-3d;
}
.card-slot.spent { transform: rotateY(180deg); opacity:.25; filter: grayscale(1); color: hsl(var(--muted-foreground)); }
.cards-count { font-family: var(--font-display); font-weight:700; color: hsl(var(--primary)); font-size:.95rem; white-space:nowrap; }
.cards-strip.empty { animation: shake .5s ease-in-out 2; }
.cards-strip.empty .card-slot { box-shadow: inset 0 0 0 1px hsl(var(--damage)/0.6); }
.cards-hint { color: hsl(var(--damage)); font-size:.7rem; letter-spacing:.1em; margin-top:6px; }

/* health bar */
.hp-frame { border-radius: 14px; padding: 4px; }
.hp-track {
  position:relative; height: 40px; border-radius: 10px; overflow:hidden;
  background: hsl(20 20% 4% / .85); box-shadow: inset 0 2px 6px rgba(0,0,0,.6);
}
.hp-fill {
  position:absolute; inset:0 auto 0 0; height:100%; border-radius: 10px;
  transition: width .5s cubic-bezier(.4,0,.2,1), background .5s;
  box-shadow: 0 0 18px hsl(var(--heal)/0.35);
}
.hp-num {
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  font-family: var(--font-display); font-weight:700; font-size: 1.15rem;
  color: hsl(var(--foreground)); text-shadow: 0 1px 6px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
  letter-spacing: .08em; white-space: nowrap;
}
@media (min-width:900px){ .hp-track { height: 48px; } .hp-num{ font-size:1.3rem; } }

/* stats */
.stats-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
@media (min-width:560px){ .stats-grid{ grid-template-columns: repeat(4,1fr);} }
.stat-tile {
  border-radius: 11px; padding: .6rem .5rem; text-align:center;
}
.stat-tile .lbl { font-family: var(--font-display); font-weight:500; font-size:.66rem;
  letter-spacing:.16em; color: hsl(var(--muted-foreground)); }
.stat-tile .val { font-family: var(--font-display); font-weight:700; font-size:1.25rem; color: hsl(var(--foreground)); margin-top:2px; }
.stat-tile .val.pos { color: hsl(var(--primary)); }

/* equipment */
.equip-title { margin: 4px 0 10px; }
.equip-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:9px; }
@media (min-width:900px){ .equip-grid{ grid-template-columns: repeat(3,1fr);} }
.equip-row {
  display:flex; gap:9px; overflow-x:auto; padding-bottom:6px;
}
.equip-slot {
  border-radius: 12px; aspect-ratio:1; min-width: 72px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; color: hsl(var(--foreground));
  padding: .4rem; text-align:center;
}
.equip-slot .nm { font-size:.58rem; letter-spacing:.04em; color: hsl(var(--muted-foreground)); line-height:1.15; }
.equip-slot.weapon { color: hsl(var(--primary)); }
.equip-empty { color: hsl(var(--border)); }

.desktop-equip { display:none; }
@media (min-width:900px){
  .mobile-equip { display:none; }
  .desktop-equip { display:block; }
}

/* intel */
.intel-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius: 999px; padding: .85rem 1.4rem; width:100%;
  font-family: var(--font-display); font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color: hsl(var(--foreground)); font-size:.82rem; position:relative;
}
.intel-btn .dot {
  position:absolute; top:8px; right:14px; width:10px; height:10px; border-radius:999px;
  background: hsl(var(--primary)); box-shadow:0 0 10px hsl(var(--primary));
}
.intel-modal-bg { position:fixed; inset:0; z-index:10500; background:rgba(0,0,0,.7); display:grid; place-items:center; padding:20px; }
.intel-modal { max-width: 460px; width:100%; border-radius:18px; padding:1.6rem; }
.intel-msg { padding:.9rem 0; border-bottom:1px solid hsl(var(--border)/.5); font-size:.95rem; line-height:1.5; color: hsl(var(--foreground)); }
.intel-msg:last-child{ border:none; }

/* self-test tray */
.selftest { margin-top: 8px; border-radius: 12px; padding: .7rem .8rem; }
.selftest summary { cursor:pointer; color: hsl(var(--muted-foreground)); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; list-style:none; }
.selftest summary::-webkit-details-marker{ display:none; }
.selftest .row { display:flex; flex-wrap:wrap; gap:6px; margin-top:.7rem; }
.mini-btn {
  font-family:var(--font-body); font-size:.72rem; padding:.4rem .7rem; border-radius:8px;
  cursor:pointer; color:hsl(var(--foreground)); background:hsl(var(--background)/.5);
  box-shadow: inset 0 0 0 1px hsl(var(--border));
}
.mini-btn:hover{ filter:brightness(1.3); }

.panel { border-radius: 16px; padding: 1.1rem 1.15rem; }
.panel-pad { padding: 1.1rem 1.15rem; }

/* ============================================================
   MAIN SCREEN
   ============================================================ */
.main-screen { position:absolute; inset:0; overflow:hidden; }
.scene-bg { position:absolute; inset:0; z-index:0; }
.scene-grad { position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 35%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.85) 100%); }
.scene-name {
  position:absolute; bottom: 3.2vh; left: 3vw; z-index:20;
  font-family:var(--font-display); font-weight:700; color: hsl(var(--foreground)/.9);
  font-size: clamp(1.2rem,3vw,2.2rem); letter-spacing:.1em; text-transform:capitalize;
  text-shadow: 0 2px 20px rgba(0,0,0,.9);
}
.scene-name .sub { display:block; font-family:var(--font-body); font-weight:400; font-size:.6em;
  letter-spacing:.3em; text-transform:uppercase; color: hsl(var(--muted-foreground)); margin-top:4px; }

/* party strip */
.party-strip { position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:30;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:100%;
  max-width:1280px; padding: 58px 3vw 1.6vh; }
.party-card { flex:1 1 200px; max-width:300px; min-width:170px; border-radius:14px; padding:.7rem .85rem; }
.party-card .pc-name { font-family:var(--font-display); font-weight:500; font-size:.95rem; display:flex; align-items:center; gap:8px; }
.party-card .pc-dot { width:8px;height:8px;border-radius:999px; background:hsl(var(--primary)); box-shadow:0 0 8px hsl(var(--primary)); }
.party-card.dead .pc-dot { background:hsl(var(--damage)); box-shadow:0 0 8px hsl(var(--damage)); }
.party-card.dead { filter: grayscale(.7) brightness(.7); }
.pc-hp-track { height:7px; border-radius:99px; background:hsl(20 20% 4%/.8); margin-top:8px; overflow:hidden; }
.pc-hp-fill { height:100%; border-radius:99px; transition: width .5s ease; }
.pc-meta { display:flex; justify-content:space-between; align-items:center; margin-top:7px; }
.pc-cards { display:flex; align-items:center; gap:5px; color:hsl(var(--primary)); }
.pc-card-n { font-family:var(--font-display); font-weight:700; font-size:.92rem; color:hsl(var(--foreground)); font-variant-numeric:tabular-nums; }
.pc-card-lock { font-size:.6rem; color:hsl(var(--damage)); animation: intel-pulse 1.3s ease-out infinite; }
.pc-req { color: hsl(var(--primary)); }

/* center content */
.main-center { position:absolute; inset:0; z-index:25; display:grid; place-items:center;
  padding: clamp(150px, 19vh, 230px) 4vw clamp(90px, 12vh, 150px); }
.center-card { max-width: 1000px; width:100%; }

/* shop */
.shop-wrap { width:100%; }
.shop-head { text-align:center; margin-bottom: 2vh; }
.shop-head h2 { font-size: clamp(1.5rem,3.5vw,2.6rem); color:hsl(var(--primary)); letter-spacing:.12em; }
.shop-coins { display:flex; justify-content:center; gap:18px; margin-top:10px; flex-wrap:wrap; }
.shop-coin { display:flex; align-items:center; gap:7px; color:hsl(var(--foreground)); font-size:.9rem; }
.shop-coin .c { color:hsl(var(--primary)); font-family:var(--font-display); font-weight:700; }
.shop-sections { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:2.4vh; }
.shop-section { border-radius:16px; padding:1.1rem; }
.shop-section h3 { font-family:var(--font-display); color:hsl(var(--primary)); font-size:.95rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.8rem; }
.shop-item { display:flex; align-items:center; gap:10px; padding:.5rem 0; border-bottom:1px solid hsl(var(--border)/.4); }
.shop-item:last-child{border:none;}
.shop-item .nm { flex:1; font-size:.92rem; }
.shop-item .pr { color:hsl(var(--primary)); font-family:var(--font-display); font-weight:700; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.shop-items::-webkit-scrollbar-track { background:hsl(var(--background)/.4); border-radius:9px; }
.shop-item .st { font-size:.66rem; color:hsl(var(--muted-foreground)); letter-spacing:.1em; }
.shop-title h2 { font-size: clamp(1.5rem,3.5vw,2.6rem); color:hsl(var(--primary)); letter-spacing:.12em; }
.shop-sub { color:hsl(var(--muted-foreground)); letter-spacing:.18em; text-transform:uppercase; font-size:.7rem; margin-top:.4rem; }
.shop-items { display:flex; flex-direction:column; max-height: 46vh; overflow-y:auto; }
.shop-items::-webkit-scrollbar { width:5px; } .shop-items::-webkit-scrollbar-thumb { background:hsl(var(--border)); border-radius:9px; }
.shop-item.sold { opacity:.42; }
.shop-item .nm { display:flex; flex-direction:column; gap:1px; }
.summon-tag { font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:hsl(var(--primary)/.8); }

/* moderator: beat-gate order + assignment chips */
.gate-order-row { display:flex; gap:6px; flex-wrap:wrap; margin:.4rem 0 .2rem; }
.order-chip { display:inline-flex; align-items:center; gap:6px; padding:.28rem .6rem; border-radius:999px; font-size:.78rem;
  font-family:var(--font-display); font-weight:700; color:var(--nc);
  background: color-mix(in srgb, var(--nc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nc) 50%, transparent); }
.order-chip .oc-i { font-size:.62rem; opacity:.6; }
.assign-row { display:flex; gap:8px; flex-wrap:wrap; }
.assign-chip { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; color:hsl(var(--foreground)); }
.assign-dot { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; font-size:.6rem; font-weight:700;
  color:#1a1410; font-family:var(--font-display); }

/* ============================================================
   GATE — full-bleed seal on the Main screen
   ============================================================ */
.main-screen.gate-mode .scene-grad { z-index:1; }
.gate-stage {
  position:absolute; inset:0; z-index:24; overflow:hidden;
  display:grid; place-items:center;
}
.gate-img { position:absolute !important; inset:0; z-index:1; color: hsl(var(--foreground)/.5) !important; }
.gate-img::part(frame) { background: linear-gradient(160deg, hsl(28 14% 12%), hsl(24 18% 6%)); }
.gate-img::part(ring) { border-color: hsl(var(--primary)/.3); }
.gate-drop-hint {
  position:absolute; top: 20vh; left:50%; transform:translateX(-50%); z-index:9;
  color: hsl(var(--primary)/.85); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  background: hsl(20 20% 6% / .7); padding:.6rem 1.1rem; border-radius:999px;
  box-shadow: inset 0 0 0 1px hsl(var(--primary)/.3); pointer-events:none; backdrop-filter: blur(4px);
}
/* glowing portal revealed behind the doors */
.gate-portal {
  position:absolute; inset:0; z-index:2; opacity:0; transition: opacity 1.2s ease 0.3s;
  background:
    radial-gradient(ellipse at 50% 50%, hsl(45 100% 85% / .95), hsl(40 95% 60% / .5) 30%, transparent 62%),
    linear-gradient(180deg, hsl(40 90% 55% / .3), hsl(35 90% 45% / .15));
}
.gate-stage.is-open .gate-portal { opacity:1; }
/* the two halves of the gate image */
.gate-door {
  position:absolute; top:0; bottom:0; width:50%; z-index:3;
  background-color: hsl(26 16% 9%);
  background-size: 200% 100%; background-repeat:no-repeat;
  box-shadow: inset 0 0 60px rgba(0,0,0,.7);
  transition: transform 2.2s cubic-bezier(.6,0,.2,1), filter 2.2s ease;
  display:none;
}
.gate-stage.is-open .gate-door { display:block; }
.gate-door.left  { left:0;  background-position: left center;  border-right:2px solid hsl(var(--primary)/.4); }
.gate-door.right { right:0; background-position: right center; border-left:2px solid hsl(var(--primary)/.4); }
.gate-stage.is-open .gate-door.left  { transform: translateX(-102%); filter: brightness(1.3); }
.gate-stage.is-open .gate-door.right { transform: translateX(102%);  filter: brightness(1.3); }
/* seam of light + burst */
.gate-seam {
  position:absolute; top:0; bottom:0; left:50%; width:0; z-index:4; transform:translateX(-50%);
  background: linear-gradient(90deg, transparent, hsl(45 100% 90%), transparent);
  opacity:0; filter: blur(2px);
}
.gate-stage.is-open .gate-seam { animation: seam-ignite 1s ease-out forwards; }
@keyframes seam-ignite { 0%{width:0;opacity:0;} 40%{width:8px;opacity:1;} 100%{width:60px;opacity:0;} }
.gate-burst { position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  background: radial-gradient(circle at 50% 50%, hsl(45 100% 95% / .95), transparent 55%); }
.gate-stage.is-open .gate-burst { animation: gate-burst 1.8s ease-out .5s forwards; }
@keyframes gate-burst { 0%{opacity:0;transform:scale(.4);} 25%{opacity:.9;} 100%{opacity:0;transform:scale(1.6);} }
.gate-stage.is-wrong { animation: shake .45s ease-in-out; }
.gate-stage.is-wrong::after { content:''; position:absolute; inset:0; z-index:7; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 40%, hsl(var(--damage)/.7) 100%);
  animation: damage-flash .6s ease-out forwards; }

/* gate HUD */
.gate-hud { position:relative; z-index:8; text-align:center; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%); padding: 4vh 6vw; border-radius:30px; }
.gate-title { font-size: clamp(1.4rem,3.4vw,2.6rem); color: hsl(var(--primary)); letter-spacing:.12em; text-shadow:0 2px 20px rgba(0,0,0,.9); }
.gate-pips { display:flex; gap:14px; justify-content:center; margin:2.4vh 0 1.6vh; }
.gpip { width: 26px; height:26px; border-radius:50%; background: hsl(20 20% 8% / .8);
  box-shadow: inset 0 0 0 2px hsl(var(--primary)/.35); transition: all .3s; }
.gpip.lit { background: hsl(var(--primary)); box-shadow: 0 0 18px hsl(var(--primary)/.8), inset 0 0 0 2px hsl(var(--primary)); }
.gpip.pulse { animation: beat-flash .5s ease; }
.gate-sub { color: hsl(var(--foreground)/.8); letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; text-shadow:0 1px 8px #000; }
.gate-replays { display:flex; gap:9px; justify-content:center; align-items:center; margin-top:2vh; }
.gate-replays-lbl { color: hsl(var(--muted-foreground)); font-size:.7rem; letter-spacing:.1em; margin-left:6px; }
.gate-fail { color: hsl(var(--damage)); margin-top:1.6vh; letter-spacing:.06em; font-size:.9rem; }
.gate-open-text { font-size: clamp(2rem,6vw,4.5rem); color: hsl(45 100% 80%); letter-spacing:.3em;
  text-shadow: 0 0 50px hsl(var(--primary)), 0 0 100px hsl(var(--primary)/.6); animation: fade-rise 1s ease-out 1.4s both; }

/* ---- beat gate: four notes + progress (Main screen) ---- */
.gate-notes { display:flex; gap: clamp(12px,2vw,26px); justify-content:center; margin:2.6vh 0 2vh; }
.gnote { position:relative; width: clamp(56px,7vw,92px); aspect-ratio:1; border-radius:18px; display:grid; place-items:center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--nc) 30%, #1a1410), hsl(24 18% 8%));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nc) 55%, transparent), inset 0 0 30px rgba(0,0,0,.5);
  transition: transform .18s, box-shadow .25s, filter .25s; }
.gnote-num { font-family:var(--font-display); font-weight:700; font-size: clamp(1rem,1.6vw,1.5rem); color: var(--nc); letter-spacing:.05em; }
.gnote.demo { transform: translateY(-8px) scale(1.08); filter:brightness(1.5); }
.gate-progress-row { display:flex; gap:12px; justify-content:center; margin-top:.5vh; }
.gprog { width:30px; height:14px; border-radius:999px; background:hsl(20 18% 10%/.8);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--nc) 50%, transparent); transition: all .3s; }
.gprog.lit { box-shadow:0 0 16px var(--nc); }
.gprog.pulse { animation: beat-flash .5s ease; }

/* flame pips (replays) */
.flame-pip { width:13px; height:17px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: hsl(var(--border)); transform: rotate(0); }
.flame-pip.on { background: radial-gradient(circle at 50% 70%, hsl(45 100% 70%), hsl(20 90% 45%));
  box-shadow: 0 0 12px hsl(var(--primary)/.7); }
.flame-pip.sm { width:9px; height:12px; }

/* npc */
.npc-wrap { width:100%; max-width:1100px; }
.npc-portrait { height: 42vh; border-radius:18px; display:grid; place-items:center; position:relative; overflow:hidden; }
.npc-dialogue { margin-top: 2.4vh; border-radius:16px; padding:1.4rem 1.8rem; }
.npc-dialogue .nm { font-family:var(--font-display); font-weight:700; color:hsl(var(--primary)); font-size:1.1rem; letter-spacing:.1em; }
.npc-dialogue .ln { margin-top:.7rem; font-size: clamp(1rem,1.7vw,1.35rem); line-height:1.55; color:hsl(var(--foreground)); }

/* enemy */
.enemy-wrap { width:100%; max-width: 760px; text-align:center; }
.enemy-name { font-family:var(--font-display); font-weight:700; color:hsl(var(--damage)); font-size:clamp(1.6rem,4vw,2.8rem); letter-spacing:.1em; text-shadow:0 0 30px hsl(var(--damage)/.4); }
.enemy-hp-track { height: 22px; border-radius:8px; background:hsl(20 20% 4%/.85); margin-top:1.6vh; overflow:hidden; box-shadow:inset 0 2px 6px rgba(0,0,0,.6); position:relative; }
.enemy-hp-fill { height:100%; background: linear-gradient(90deg, hsl(0 70% 30%), hsl(var(--damage))); transition: width .4s ease; box-shadow:0 0 18px hsl(var(--damage)/.5); }
.enemy-hp-num { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.85rem; text-shadow:0 1px 4px #000; }
.enemy-intel { display:inline-grid; grid-template-columns: repeat(2,auto); gap:.5rem 2rem; margin-top:2vh; padding:1rem 1.6rem; border-radius:14px; text-align:left; }
.enemy-intel .k { color:hsl(var(--muted-foreground)); font-size:.78rem; letter-spacing:.1em; }
.enemy-intel .v { color:hsl(var(--foreground)); font-family:var(--font-display); }

/* main intel card slide-up */
@keyframes intel-slide { from{transform:translateY(120%);opacity:0;} to{transform:translateY(0);opacity:1;} }
.main-intel { position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:60;
  width:min(720px,90vw); margin-bottom:3vh; border-radius:18px; padding:1.5rem 1.8rem;
  animation: intel-slide .7s cubic-bezier(.2,.8,.2,1) both; }
.main-intel .lbl { color:hsl(var(--primary)); font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; }
.main-intel .tx { margin-top:.6rem; font-size:1.15rem; line-height:1.5; }
.main-intel .x { position:absolute; top:14px; right:18px; cursor:pointer; color:hsl(var(--muted-foreground)); }

.idle-hint { text-align:center; color:hsl(var(--muted-foreground)); }
.idle-hint .big { font-family:var(--font-display); color:hsl(var(--foreground)/.8); font-size:clamp(1.4rem,3vw,2.2rem); letter-spacing:.1em; }

/* ============================================================
   HOST SCREEN
   ============================================================ */
.host-screen { position:absolute; inset:0; overflow-y:auto; padding: 60px 16px 48px; }
.host-wrap { max-width: 1500px; margin:0 auto; }
.host-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.host-head h1 { font-size:1.5rem; color:hsl(var(--primary)); letter-spacing:.12em; }
.host-head .sub { color:hsl(var(--muted-foreground)); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
.host-grid { display:grid; grid-template-columns: 1fr; gap:16px; }
@media(min-width:760px){ .host-grid{ grid-template-columns: repeat(2,1fr);} }
@media(min-width:1180px){ .host-grid{ grid-template-columns: repeat(3,1fr);} }
.host-card { border-radius:16px; padding:1.1rem 1.15rem; }
.host-card.span2 { grid-column: span 1; }
@media(min-width:760px){ .host-card.span-all{ grid-column:1/-1;} }
.host-card h2 { display:flex; align-items:center; gap:8px; margin-bottom:.9rem; }
.player-cards-wrap { display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:760px){ .player-cards-wrap{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:1180px){ .player-cards-wrap{ grid-template-columns:repeat(4,1fr);} }

.pcard { border-radius:14px; padding:1rem; }
.pcard .ph { display:flex; align-items:center; justify-content:space-between; }
.pcard .pn { font-family:var(--font-display); font-weight:500; font-size:1.02rem; }
.pcard .pc { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
.statusdot { width:10px; height:10px; border-radius:999px; }
.statusdot.alive{ background:hsl(var(--primary)); box-shadow:0 0 8px hsl(var(--primary)); }
.statusdot.dead{ background:hsl(var(--damage)); box-shadow:0 0 8px hsl(var(--damage)); }
.mini-hp { height:9px; border-radius:99px; background:hsl(20 20% 4%/.8); overflow:hidden; margin:.7rem 0 .3rem; }
.mini-hp-fill { height:100%; border-radius:99px; transition:width .4s ease; }
.ctrl-row { display:flex; align-items:center; gap:7px; margin-top:.7rem; flex-wrap:wrap; }
.ctrl-label { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:hsl(var(--muted-foreground)); width:100%; margin-bottom:-2px; }
.amt-sel { display:flex; gap:4px; }
.amt-sel button { padding:.25rem .5rem; font-size:.72rem; border-radius:6px; cursor:pointer; background:hsl(var(--background)/.5); box-shadow:inset 0 0 0 1px hsl(var(--border)); color:hsl(var(--foreground)); }
.amt-sel button.on { background:hsl(var(--primary)/.2); color:hsl(var(--primary)); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.5); }
.req-row { display:flex; align-items:center; gap:8px; padding:.5rem; border-radius:8px; background:hsl(var(--primary)/.06); margin-top:.5rem; }
.req-row .rl { flex:1; font-size:.78rem; }
.tiny-btn { padding:.3rem .55rem; font-size:.68rem; border-radius:6px; cursor:pointer; color:hsl(var(--foreground)); background:hsl(var(--background)/.5); box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.tiny-btn:hover{ filter:brightness(1.3); }
.log-feed { max-height: 220px; overflow-y:auto; }
.log-line { font-size:.76rem; color:hsl(var(--muted-foreground)); padding:.32rem 0; border-bottom:1px solid hsl(var(--border)/.3); display:flex; gap:8px; }
.log-line .lt { color:hsl(var(--primary)/.7); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.scene-btns, .npc-btns { display:flex; flex-wrap:wrap; gap:7px; }
.chip-btn { padding:.45rem .8rem; font-size:.78rem; border-radius:999px; cursor:pointer; color:hsl(var(--foreground)); background:hsl(var(--background)/.4); box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.chip-btn.on { background:hsl(var(--primary)/.18); color:hsl(var(--primary)); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.5); }
.chip-btn:hover{ filter:brightness(1.25); }
.field-row { display:flex; gap:7px; align-items:center; margin-top:.6rem; }
.moon-track { display:flex; gap:8px; justify-content:space-between; margin:.8rem 0; }
.moon-pip { flex:1; height:8px; border-radius:99px; background:hsl(var(--border)); }
.moon-pip.on { background:hsl(var(--primary)); box-shadow:0 0 8px hsl(var(--primary)/.6); }
.moon-pip.warn { background:hsl(var(--damage)); box-shadow:0 0 8px hsl(var(--damage)/.6); }
.shop-edit-item { display:flex; gap:6px; align-items:center; margin-top:.5rem; }
.shop-edit-item .tinput { padding:.3rem .45rem; font-size:.78rem; }
.section-sub { font-family:var(--font-display); color:hsl(var(--foreground)/.85); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:.9rem 0 .3rem; }
.radio-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:.5rem; }

/* ============================================================
   PLAYER — gate note overlay (the music button)
   ============================================================ */
.gatenote-overlay {
  position:absolute; inset:0; z-index:5000; overflow:hidden;
  background: radial-gradient(ellipse at 50% 35%, hsl(30 35% 12%), hsl(var(--background)) 65%);
  display:flex; align-items:center; justify-content:center;
}
.gatenote-inner { position:relative; z-index:3; text-align:center; padding: 6vh 26px; max-width: 460px; }
.gn-eyebrow { color: hsl(var(--damage)/.9); letter-spacing:.22em; text-transform:uppercase; font-size:.7rem; margin-bottom:.7rem; }
.gatenote-inner h2 { font-size: clamp(1.8rem,7vw,2.6rem); color: hsl(var(--foreground)); }
.gn-hint { text-transform:none; letter-spacing:.01em; line-height:1.5; margin:1rem auto 2.4rem; max-width: 340px; }
.gn-rune {
  position:relative; width: min(58vw, 230px); aspect-ratio:1; border-radius:50%; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color: hsl(var(--primary)); cursor:pointer; border:none;
  background: radial-gradient(circle at 50% 40%, hsl(38 55% 22%), hsl(24 22% 9%));
  box-shadow: inset 0 0 0 2px hsl(var(--primary)/.5), inset 0 0 40px hsl(var(--primary)/.18),
              0 12px 40px rgba(0,0,0,.5), 0 0 50px hsl(var(--primary)/.25);
  transition: transform .15s ease, box-shadow .3s ease, background .3s;
}
.gn-rune:active { transform: scale(.95); }
.gn-rune .gn-ring { position:absolute; inset:-2px; border-radius:50%;
  box-shadow: 0 0 0 0 hsl(var(--primary)/.5); animation: intel-pulse 2s ease-out infinite; }
.gn-note-label { font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase; font-size:.74rem; color: hsl(var(--foreground)/.8); }
.gn-rune.good { background: radial-gradient(circle at 50% 40%, hsl(145 50% 28%), hsl(150 30% 10%));
  box-shadow: inset 0 0 0 2px hsl(var(--heal)), 0 0 60px hsl(var(--heal)/.6); color: hsl(var(--heal)); }
.gn-rune.bad { animation: shake .5s ease-in-out;
  background: radial-gradient(circle at 50% 40%, hsl(0 55% 30%), hsl(0 40% 10%));
  box-shadow: inset 0 0 0 2px hsl(var(--damage)), 0 0 60px hsl(var(--damage)/.6); color: hsl(var(--damage)); }
.gn-progress { display:flex; gap:10px; justify-content:center; margin-top:2.6vh; }
.gn-pip { width:14px; height:14px; border-radius:50%; background: hsl(20 20% 10%);
  box-shadow: inset 0 0 0 2px hsl(var(--primary)/.4); transition: all .3s; }
.gn-pip.lit { background: hsl(var(--primary)); box-shadow: 0 0 14px hsl(var(--primary)/.8); }
.gn-replays { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:1.6vh; }
.gn-replays-lbl { color: hsl(var(--muted-foreground)); font-size:.68rem; letter-spacing:.08em; margin-left:6px; }
.gn-fail { color: hsl(var(--damage)); margin-top:1.4vh; font-size:.84rem; letter-spacing:.04em; }
.gn-flame { width:10px; height:10px; border-radius:999px; background:hsl(var(--primary)); margin:0 auto 1.4rem;
  box-shadow:0 0 30px 9px hsl(var(--primary)/.8); }

/* ---- beat gate: player note pads ---- */
.gn-pads { display:grid; gap:14px; justify-content:center; margin:.5rem auto 0; width:min(92vw,420px); }
.gn-pads.n1 { grid-template-columns: 1fr; }
.gn-pads.n2 { grid-template-columns: 1fr 1fr; }
.gn-pads.n4 { grid-template-columns: 1fr 1fr; }
.gn-pad { position:relative; aspect-ratio: 1.4/1; border-radius:20px; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--nc);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--nc) 32%, #1b1410), hsl(24 18% 8%));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nc) 60%, transparent), inset 0 0 40px rgba(0,0,0,.45),
              0 10px 30px rgba(0,0,0,.4);
  transition: transform .12s, box-shadow .2s, filter .15s; }
.gn-pads.n1 .gn-pad { aspect-ratio: 1.7/1; }
.gn-pad:disabled { opacity:.4; cursor:not-allowed; }
.gn-pad:not(:disabled):active, .gn-pad.hit { transform: scale(.95); filter:brightness(1.6);
  box-shadow: inset 0 0 0 2px var(--nc), 0 0 40px var(--nc); }
.gn-pad-ring { position:absolute; inset:-2px; border-radius:22px; box-shadow:0 0 0 0 color-mix(in srgb, var(--nc) 50%, transparent); }
.gn-pad:not(:disabled) .gn-pad-ring { animation: intel-pulse 2.4s ease-out infinite; }
.gn-pad-num { font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:.05em; }
.gn-pip { width:14px; height:14px; border-radius:50%; background:hsl(20 20% 10%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nc,hsl(var(--primary))) 50%, transparent); transition: all .3s; }
.gn-pip.lit { box-shadow:0 0 14px var(--nc); }
.gn-wait { color:hsl(var(--primary)); margin-top:1.4vh; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; animation: pulse-text 1.4s ease-in-out infinite; }
.gatenote-overlay.bad { animation: shake .5s ease-in-out; }
.gatenote-overlay.good::after, .gatenote-overlay.bad::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse at 50% 60%, transparent 45%, var(--flash,hsl(var(--heal)/.4)) 120%); animation: damage-flash .5s ease-out forwards; }
.gatenote-overlay.good { --flash: hsl(var(--heal)/.4); }
.gatenote-overlay.bad { --flash: hsl(var(--damage)/.5); }

/* ============================================================
   MODERATOR — gate / sequence builder
   ============================================================ */
.gate-live { display:flex; align-items:center; gap:8px; margin:.7rem 0 .2rem; font-size:.8rem; color:hsl(var(--foreground)); }
.gate-live-dot { width:8px; height:8px; border-radius:999px; background:hsl(var(--heal)); box-shadow:0 0 8px hsl(var(--heal)); animation: intel-pulse 1.4s ease-out infinite; }
.door-edit { margin-top:1rem; padding-top:.9rem; border-top:1px solid hsl(var(--border)/.4); }
.door-edit.armed { background: hsl(var(--primary)/.05); border-radius:12px; padding:.8rem; margin-left:-.2rem; margin-right:-.2rem; box-shadow: inset 0 0 0 1px hsl(var(--primary)/.25); }
.door-replays { display:inline-flex; gap:5px; align-items:center; }
.seq-chips { display:flex; flex-wrap:wrap; gap:6px; margin:.5rem 0; }
.seq-chip { display:inline-flex; align-items:center; gap:6px; padding:.3rem .3rem .3rem .55rem; border-radius:999px;
  font-size:.76rem; color:hsl(var(--foreground)); background:hsl(var(--background)/.5); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.seq-chip.sung { background: hsl(var(--primary)/.2); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.6); color:hsl(var(--primary)); }
.seq-chip .sc-n { font-family:var(--font-display); font-weight:700; opacity:.6; font-size:.7rem; }
.seq-chip .sc-x { width:18px; height:18px; border-radius:999px; border:none; cursor:pointer; line-height:1;
  background:hsl(var(--background)/.6); color:hsl(var(--muted-foreground)); font-size:.9rem; }
.seq-chip .sc-x:hover { color:hsl(var(--damage)); }
.seq-add { display:flex; flex-wrap:wrap; gap:5px; }

/* player traits (forged at creation) */
.traits { display:flex; flex-direction:column; gap:10px; }
.trait-chips { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:520px){ .trait-chips{ grid-template-columns:1fr; } }
.trait-chip { border-radius:12px; padding:.7rem .85rem; display:flex; flex-direction:column; gap:4px; }
.trait-chip .tc-lbl { display:flex; align-items:center; gap:6px; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; }
.trait-chip.mastery .tc-lbl { color:hsl(var(--heal)); }
.trait-chip.weakness .tc-lbl { color:hsl(var(--damage)); }
.trait-chip .tc-val { font-size:.9rem; color:hsl(var(--foreground)); line-height:1.3; }
.backstory { border-radius:12px; padding:.7rem .9rem; }
.backstory summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:7px; color:hsl(var(--muted-foreground)); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }
.backstory summary::-webkit-details-marker{ display:none; }
.backstory p { margin-top:.7rem; font-size:.88rem; line-height:1.55; color:hsl(var(--foreground)/.9); white-space:pre-wrap; }

/* moderator: character detail + empty roster */
.pcard-traits { margin-top:.6rem; font-size:.72rem; }
.pcard-traits summary { cursor:pointer; list-style:none; color:hsl(var(--muted-foreground)); letter-spacing:.1em; text-transform:uppercase; font-size:.62rem; }
.pcard-traits summary::-webkit-details-marker{ display:none; }
.pcard-traits .pt-row { margin-top:.5rem; line-height:1.4; }
.pcard-traits .pt-row b { color:hsl(var(--primary)); font-weight:500; letter-spacing:.06em; }
.party-empty { grid-column:1/-1; text-align:center; padding:2rem; border-radius:14px; color:hsl(var(--muted-foreground)); font-size:.86rem; line-height:1.6; }
.party-empty .display { color:hsl(var(--foreground)/.8); font-size:1.1rem; display:block; margin-bottom:.4rem; }

/* ============================================================
   MEDIA — scene/npc/gate videos (graceful, cover-fit)
   ============================================================ */
.scene-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  will-change:transform; transform:translateZ(0); backface-visibility:hidden; contain:paint; }
.npc-video { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.gate-open-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:5; }

/* ============================================================
   ACTION SEQUENCE — Main screen battle field
   ============================================================ */
.main-screen.battle-mode .scene-grad { z-index:1; }
.battle-field { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding: 12vh 4vw 8vh; }
.bf-topband { position:absolute; top: 15vh; left:50%; transform:translateX(-50%); display:flex; gap:16px; align-items:center; z-index:25; }
.bf-round { font-family:var(--font-display); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.8rem;
  color:hsl(var(--muted-foreground)); }
.bf-turnlabel { font-family:var(--font-display); font-weight:700; letter-spacing:.1em; font-size:1rem; padding:.3rem 1rem; border-radius:999px; }
.bf-turnlabel.player { color:hsl(var(--primary)); background:hsl(var(--primary)/.12); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.5); }
.bf-turnlabel.enemy { color:hsl(var(--damage)); background:hsl(var(--damage)/.12); box-shadow:inset 0 0 0 1px hsl(var(--damage)/.5); }

.bf-line { display:flex; gap: clamp(16px,3vw,48px); align-items:flex-end; justify-content:center; flex-wrap:wrap; max-width:96vw; }
.bf-empty { color:hsl(var(--muted-foreground)); font-size:1rem; letter-spacing:.1em; }
.bf-enemy { display:flex; flex-direction:column; align-items:center; gap:8px; width: clamp(140px, 16vw, 230px);
  transition: transform .3s, filter .3s, opacity .5s; }
.bf-enemy.acting { transform: translateY(-10px) scale(1.05); }
.bf-enemy.slain { opacity:.4; filter: grayscale(.8) brightness(.6); }
.bf-portrait { position:relative; width:100%; aspect-ratio: 3/4; border-radius:16px; overflow:hidden;
  display:grid; place-items:center; box-shadow: inset 0 0 60px rgba(0,0,0,.6); }
.bf-art { width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); }
.bf-enemy.acting .bf-portrait { box-shadow: inset 0 0 60px rgba(0,0,0,.5), 0 0 40px hsl(var(--damage)/.5); }
.bf-turn-ring { position:absolute; inset:-3px; border-radius:18px; box-shadow:0 0 0 2px hsl(var(--damage)/.7);
  animation: intel-pulse 1.6s ease-out infinite; }
.bf-slain-x { position:absolute; inset:0; display:grid; place-items:center; font-size:4rem; color:hsl(var(--damage)/.8); font-weight:700; }
.bf-name { font-size: clamp(.9rem,1.6vw,1.25rem); color:hsl(var(--foreground)); text-shadow:0 1px 8px #000; }
.bf-hp-track { width:100%; height:9px; border-radius:999px; background:hsl(0 30% 12%/.8); overflow:hidden; box-shadow:inset 0 0 0 1px hsl(var(--border)/.6); }
.bf-hp-fill { height:100%; background:linear-gradient(90deg, hsl(var(--damage)), hsl(20 90% 55%)); transition:width .4s cubic-bezier(.2,.8,.2,1); }
.bf-hp-num { font-family:var(--font-display); font-size:.8rem; color:hsl(var(--foreground)/.8); }
.bf-intel { margin-top:4px; display:grid; grid-template-columns:auto auto; gap:2px 10px; padding:.5rem .7rem; border-radius:10px; font-size:.72rem; }
.bf-intel .k { color:hsl(var(--muted-foreground)); letter-spacing:.08em; }
.bf-intel .v { color:hsl(var(--primary)); text-align:right; font-family:var(--font-display); }
.bf-banner { position:absolute; top:38%; left:50%; transform:translateX(-50%); z-index:30;
  font-family:var(--font-display); font-weight:700; font-size: clamp(1.6rem,4vw,3rem); letter-spacing:.08em;
  padding:.4rem 1.6rem; border-radius:14px; animation: bf-banner-pop 1.8s ease-out forwards; text-shadow:0 2px 20px #000; }
.bf-banner.enemy { color:hsl(var(--damage)); }
.bf-banner.neutral { color:hsl(var(--primary)); }
@keyframes bf-banner-pop { 0%{opacity:0;transform:translateX(-50%) scale(.7);} 15%{opacity:1;transform:translateX(-50%) scale(1);} 80%{opacity:1;} 100%{opacity:0;transform:translateX(-50%) scale(1.05);} }

/* moderator battle list */
.host-card-wide { grid-column: 1 / -1; }
.enemy-presets { display:flex; flex-wrap:wrap; gap:6px; }
.turn-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.bf-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:10px; margin-top:.6rem; }
.bf-list-item { padding:.7rem .8rem; border-radius:12px; background:hsl(var(--background)/.4); box-shadow:inset 0 0 0 1px hsl(var(--border)/.5); }
.bf-list-item.acting { box-shadow:inset 0 0 0 1px hsl(var(--damage)/.6); background:hsl(var(--damage)/.06); }
.bf-list-item.dead { opacity:.5; }
.bli-top { display:flex; align-items:center; gap:8px; margin-bottom:.4rem; }
.bli-name { font-family:var(--font-display); font-weight:700; color:hsl(var(--foreground)); flex:1; }
.bli-hp { font-size:.8rem; color:hsl(var(--primary)); }
.bli-actions { display:flex; gap:5px; flex-wrap:wrap; margin-top:.5rem; }
.bli-strike { display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin-top:.5rem; padding-top:.5rem; border-top:1px solid hsl(var(--border)/.4); }

/* player battle banner + strike flash */
.player-battle-banner { position:fixed; top:0; left:0; right:0; z-index:6000; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:.6rem 1rem; background:linear-gradient(180deg, hsl(0 40% 8% / .95), hsl(0 40% 8% / 0));
  pointer-events:none; }
.player-battle-banner.mine { background:linear-gradient(180deg, hsl(38 60% 12% / .95), transparent); }
.pbb-round { font-family:var(--font-display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:hsl(var(--muted-foreground)); }
.pbb-turn { font-family:var(--font-display); font-weight:700; letter-spacing:.06em; font-size:.95rem; color:hsl(var(--foreground)); }
.pbb-turn.mine { color:hsl(var(--primary)); animation: pulse-text 1.4s ease-in-out infinite; }
.pbb-turn.enemy { color:hsl(var(--damage)); }
@keyframes pulse-text { 0%,100%{opacity:.7;} 50%{opacity:1;text-shadow:0 0 16px hsl(var(--primary)/.6);} }
.pb-strike-flash { position:fixed; inset:0; z-index:5999; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 35%, hsl(var(--damage)/.85) 130%);
  animation: damage-flash .9s ease-out; }

/* player action-card bar (slides up on your turn) */
.action-bar { position:fixed; left:0; right:0; bottom:0; z-index:6100; padding:14px;
  transform: translateY(120%); transition: transform .4s cubic-bezier(.2,.9,.2,1); pointer-events:none; }
.action-bar.open { transform: translateY(0); pointer-events:auto; }
.ab-inner { max-width: 540px; margin:0 auto; border-radius:20px; padding:1.1rem 1.1rem 1rem;
  box-shadow: 0 -10px 50px rgba(0,0,0,.5), inset 0 0 0 1px hsl(var(--primary)/.3); }
.ab-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.ab-title { font-size:1.05rem; color:hsl(var(--primary)); letter-spacing:.04em; }
.ab-cards { display:flex; align-items:center; gap:5px; }
.ab-pip { width:9px; height:13px; border-radius:2px; background:hsl(var(--border)); transform:rotate(-8deg); }
.ab-pip.on { background:linear-gradient(180deg,hsl(var(--primary)),hsl(28 80% 45%)); box-shadow:0 0 8px hsl(var(--primary)/.6); }
.ab-cards-lbl { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-left:5px; }
.ab-actions { display:grid; grid-template-columns: repeat(4,1fr); gap:8px; }
.ab-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:.9rem .4rem; border-radius:14px; cursor:pointer;
  color:hsl(var(--foreground)); background:hsl(var(--background)/.5); box-shadow: inset 0 0 0 1px hsl(var(--border));
  font-family:var(--font-display); font-size:.78rem; letter-spacing:.04em; transition: transform .12s, box-shadow .2s, color .2s; }
.ab-card:hover { color:hsl(var(--primary)); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.6), 0 6px 20px hsl(var(--primary)/.2); }
.ab-card:active { transform: scale(.94); }
.ab-empty { text-align:center; color:hsl(var(--damage)); font-size:.86rem; padding:.6rem 0; }
.ab-pass { width:100%; margin-top:.7rem; padding:.6rem; border:none; cursor:pointer; border-radius:10px;
  background:transparent; color:hsl(var(--muted-foreground)); font-size:.78rem; letter-spacing:.08em;
  box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.ab-pass:hover { color:hsl(var(--foreground)); }

/* moderator turn markers */
.last-action { float:right; color:hsl(var(--primary)); font-size:.7rem; letter-spacing:.04em; text-transform:none; }
.acted-check { color:hsl(var(--heal)); margin-right:4px; font-weight:700; }

/* ============================================================
   PLAYER SCREEN v2 — immersive ambience, hero header, action dock
   ============================================================ */
.pscene-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none; transition: background .8s ease;
  background:
    radial-gradient(ellipse at 50% -12%, hsl(32 42% 17% / .95), transparent 58%),
    radial-gradient(ellipse at 50% 118%, hsl(38 70% 30% / .22), transparent 52%),
    linear-gradient(180deg, hsl(24 18% 8%), hsl(20 16% 5%));
}
.player-screen.is-low .pscene-bg {
  background:
    radial-gradient(ellipse at 50% -12%, hsl(2 52% 18% / .95), transparent 58%),
    radial-gradient(ellipse at 50% 118%, hsl(0 70% 28% / .28), transparent 52%),
    linear-gradient(180deg, hsl(2 24% 8%), hsl(0 18% 4%));
  animation: lowhp-pulse 2.6s ease-in-out infinite;
}
@keyframes lowhp-pulse { 0%,100%{ filter:brightness(1);} 50%{ filter:brightness(1.22);} }

/* hero header */
.hero-head { display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:16px; padding:.85rem 1rem; }
.hh-id { display:flex; align-items:center; gap:12px; min-width:0; }
.hh-sigil { width:44px; height:44px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; color:hsl(var(--primary));
  background: radial-gradient(circle at 40% 35%, hsl(38 50% 26%), hsl(24 20% 10%)); box-shadow: inset 0 0 0 1.5px hsl(var(--primary)/.4); }
.hero-head .pname { font-size: 1.3rem; line-height:1.1; color: hsl(var(--foreground)); }
.hero-head .pclass { font-family: var(--font-body); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color: hsl(var(--muted-foreground)); margin-top:3px; }
.coins-pill { color: hsl(var(--primary)); font-family: var(--font-display); font-weight:700; font-size: 1.05rem;
  background: hsl(var(--primary)/.1); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.32); flex:0 0 auto; }

/* health bar caption */
.hp-of { color: hsl(var(--muted-foreground)); font-size:.78em; font-weight:500; }
.hp-cap { position:absolute; left:16px; top:50%; transform:translateY(-50%); z-index:2;
  font-family:var(--font-display); font-weight:700; letter-spacing:.18em; text-transform:uppercase; font-size:.66rem;
  color:hsl(var(--foreground)/.85); text-shadow:0 1px 4px rgba(0,0,0,.85); pointer-events:none; }

/* stat tiles: allocated ones glow faintly */
.stat-tile.has { box-shadow: inset 0 0 0 1px hsl(var(--primary)/.35), inset 0 1px 1px rgba(255,220,160,.12), 0 8px 30px rgba(0,0,0,.5); }

/* intel button count badge */
.intel-count { position:absolute; top:50%; right:16px; transform:translateY(-50%); min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); font-size:.68rem; font-weight:700;
  display:grid; place-items:center; font-family:var(--font-body); letter-spacing:0; }

/* ---- intel toast (auto-pops when intel arrives) ---- */
.intel-toast-bg { position:fixed; inset:0; z-index:9500; display:flex; align-items:flex-start; justify-content:center;
  padding:74px 18px 18px; background: radial-gradient(ellipse at 50% 0%, hsl(38 60% 20% / .4), transparent 62%); }
.intel-toast { position:relative; width:min(520px,100%); border-radius:18px; padding:1.3rem 1.4rem; }
.it-glow { position:absolute; inset:-1px; border-radius:18px; box-shadow:0 0 55px hsl(var(--primary)/.4); pointer-events:none; }
.it-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.it-eyebrow { display:flex; align-items:center; gap:7px; color:hsl(var(--primary)); font-family:var(--font-display);
  letter-spacing:.14em; text-transform:uppercase; font-size:.68rem; }
.it-x { cursor:pointer; color:hsl(var(--muted-foreground)); padding:2px 6px; }
.it-body { margin-top:.85rem; font-size:1.14rem; line-height:1.55; color:hsl(var(--foreground)); }
.it-more { margin-top:1.1rem; background:none; border:none; cursor:pointer; color:hsl(var(--primary));
  font-family:var(--font-body); font-size:.82rem; letter-spacing:.03em; padding:0; }
.it-more:hover { filter:brightness(1.25); }

/* ---- action dock: the hero's sealed deck (count-only) ---- */
.action-dock { position:fixed; left:0; right:0; bottom:0; z-index:4200; display:flex; justify-content:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom)); pointer-events:none;
  background: linear-gradient(180deg, transparent, hsl(20 16% 5% / .9) 58%); }
.ad-inner { pointer-events:auto; width:min(560px,100%); border-radius:20px; padding:12px 14px;
  display:flex; align-items:center; gap:16px; transition: box-shadow .3s; }

/* deck of cards — the top card shows its value & colour, rest stay hidden */
.deck-stack { position:relative; width:64px; height:86px; flex:0 0 auto; border:none; background:none;
  cursor:pointer; padding:0; }
.deck-stack .deck-back { position:absolute; inset:0; border-radius:12px;
  background: linear-gradient(158deg, hsl(38 44% 30%), hsl(38 30% 14%));
  box-shadow: inset 0 0 0 1.5px hsl(var(--primary)/.5), 0 4px 12px rgba(0,0,0,.5);
  transform: translate(calc(var(--i) * 2.5px), calc(var(--i) * -2.5px)) rotate(calc(var(--i) * -1.4deg));
  transition: transform .25s; }
.deck-stack .deck-back::after { content:''; position:absolute; inset:6px; border-radius:8px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 4px, transparent 4px 8px); }
.deck-stack .deck-top-val { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.7); color:hsl(var(--foreground)); }
.deck-stack .deck-top-val.empty { color:hsl(var(--muted-foreground)); }
.deck-stack .deck-remain { position:absolute; top:-6px; left:-6px; z-index:4; min-width:20px; height:20px; padding:0 5px;
  display:flex; align-items:center; justify-content:center; border-radius:999px; font-size:.66rem; font-weight:700;
  font-variant-numeric:tabular-nums; color:hsl(20 16% 8%); background:hsl(var(--foreground)); box-shadow:0 2px 6px rgba(0,0,0,.5); }
.deck-stack .deck-lock { position:absolute; bottom:-4px; right:-4px; z-index:4; width:24px; height:24px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:hsl(20 16% 8%);
  background:hsl(var(--damage)); box-shadow:0 2px 8px rgba(0,0,0,.5); }
/* tier colours — +1 blue, +2 purple, +5 gold */
.deck-stack.tier-common .deck-back { background: linear-gradient(158deg, hsl(214 50% 28%), hsl(214 38% 13%)); box-shadow: inset 0 0 0 1.5px #5a8fd6, 0 4px 12px rgba(0,0,0,.5); }
.deck-stack.tier-common .deck-top-val { color:#bfe0ff; }
.deck-stack.tier-rare .deck-back { background: linear-gradient(158deg, hsl(282 44% 30%), hsl(282 34% 14%)); box-shadow: inset 0 0 0 1.5px #b07ad6, 0 4px 12px rgba(0,0,0,.5); }
.deck-stack.tier-rare .deck-top-val { color:#e6c4ff; }
.deck-stack.tier-premium .deck-back { background: linear-gradient(158deg, hsl(43 60% 32%), hsl(38 42% 15%)); box-shadow: inset 0 0 0 1.5px #ffd76a, 0 4px 14px rgba(0,0,0,.5), 0 0 22px #f0a83655; }
.deck-stack.tier-premium .deck-top-val { color:#ffe9b0; }
.deck-stack.live:active { transform: scale(.95); }
.deck-stack.live:hover .deck-back { transform: translate(calc(var(--i) * 3.5px), calc(var(--i) * -3.5px)) rotate(calc(var(--i) * -2deg)); }
.deck-stack:disabled { cursor:not-allowed; }
.deck-stack.is-locked .deck-back, .deck-stack.is-empty .deck-back { filter:grayscale(.7) brightness(.55); }
.deck-stack.is-locked .deck-top-val { filter:grayscale(.5) brightness(.7); }
.deck-stack.live { animation: deck-breathe 2.4s ease-in-out infinite; }
@keyframes deck-breathe {
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.22); }
}

.ad-text { flex:1; min-width:0; }
.ad-label { font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:hsl(var(--foreground)); line-height:1.15; }
.ad-sub { font-size:.74rem; color:hsl(var(--muted-foreground)); margin-top:3px; text-wrap:pretty; }
.ad-meta { display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; }
.ad-remain { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:hsl(var(--muted-foreground));
  font-variant-numeric:tabular-nums; }
.ad-last { font-size:.68rem; letter-spacing:.04em; padding:.16rem .5rem; border-radius:999px;
  background:hsl(var(--border)/.5); color:hsl(var(--muted-foreground)); }
.ad-last.tier-common { color:#9fd0ff; box-shadow: inset 0 0 0 1px #5a8fd6aa; }
.ad-last.tier-rare { color:#d8aaff; box-shadow: inset 0 0 0 1px #b07ad6aa; }
.ad-last.tier-premium { color:#ffd76a; box-shadow: inset 0 0 0 1px #f0a83699; }

.action-dock.urgent .ad-inner { animation: dock-call 1.6s ease-in-out infinite; }
.action-dock.urgent .ad-label { color:hsl(var(--primary)); }
@keyframes dock-call {
  0%,100%{ box-shadow: inset 0 0 0 1px hsl(var(--primary)/.55), 0 0 24px hsl(var(--primary)/.3); }
  50%{ box-shadow: inset 0 0 0 1px hsl(var(--primary)/.9), 0 0 46px hsl(var(--primary)/.55); }
}
.action-dock.empty .ad-label, .action-dock.dead .ad-label { color:hsl(var(--muted-foreground)); }
.action-dock.locked .ad-label { color:hsl(var(--damage)); }

/* the card that flies up revealing its value when you play */
.card-reveal-fx { position:fixed; inset:0; z-index:4400; display:flex; align-items:center; justify-content:center;
  pointer-events:auto; background: radial-gradient(circle at center, hsl(20 16% 5% / .72), hsl(20 16% 5% / .9));
  transition: opacity .26s ease; }
.card-reveal-fx.closing { opacity:0; }
.card-reveal-fx.closing .crf-card { transform: scale(.82); transition: transform .26s ease; }
.crf-card { width:170px; height:240px; border-radius:18px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; position:relative;
  background: linear-gradient(158deg, hsl(38 44% 26%), hsl(38 30% 12%));
  box-shadow: inset 0 0 0 2px hsl(var(--primary)/.55), 0 18px 50px rgba(0,0,0,.6);
  animation: crf-pop .5s cubic-bezier(.2,1.2,.3,1); }
@keyframes crf-pop {
  0%{ transform: rotateY(90deg) scale(.6); opacity:0; }
  60%{ transform: rotateY(-8deg) scale(1.05); opacity:1; }
  100%{ transform: rotateY(0) scale(1); }
}
.crf-eyebrow { font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
.crf-val { font-size:4.4rem; font-weight:700; line-height:1; }
.crf-tier { font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
/* +1 → blue */
.crf-card.tier-common { background: linear-gradient(158deg, hsl(214 50% 30%), hsl(214 38% 14%));
  box-shadow: inset 0 0 0 2px #5a8fd6, 0 18px 50px rgba(0,0,0,.6), 0 0 40px #5a8fd655; }
.crf-card.tier-common .crf-val { color:#9fd0ff; text-shadow:0 0 24px #5a8fd6aa; }
.crf-card.tier-common .crf-eyebrow { color:#9fd0ff; }
/* +2 → purple */
.crf-card.tier-rare { background: linear-gradient(158deg, hsl(282 44% 32%), hsl(282 34% 15%));
  box-shadow: inset 0 0 0 2px #b07ad6, 0 18px 50px rgba(0,0,0,.6), 0 0 40px #b07ad655; }
.crf-card.tier-rare .crf-val { color:#d8aaff; text-shadow:0 0 24px #b07ad6aa; }
.crf-card.tier-rare .crf-eyebrow { color:#d8aaff; }
/* +5 → gold */
.crf-card.tier-premium { background: linear-gradient(158deg, hsl(43 60% 34%), hsl(38 42% 16%));
  box-shadow: inset 0 0 0 2px #ffd76a, 0 18px 50px rgba(0,0,0,.6), 0 0 60px #f0a83688; }
.crf-card.tier-premium .crf-val { color:#ffe39a; text-shadow:0 0 30px #ffd76acc; }
.crf-card.tier-premium .crf-eyebrow { color:#ffd76a; }

/* first-run deck reveal — all cards shown shuffled, then sealed */
.deckintro-bg { position:fixed; inset:0; z-index:4600; display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:hidden; background: radial-gradient(circle at 50% 30%, hsl(28 30% 12%), hsl(20 16% 5%)); }
.deckintro { position:relative; z-index:2; width:min(440px,100%); text-align:center; }
.di-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:hsl(var(--primary)); margin-bottom:.5rem; }
.deckintro h2 { font-size:1.9rem; margin:0 0 .6rem; }
.di-sub { font-size:.82rem; color:hsl(var(--muted-foreground)); line-height:1.5; text-wrap:pretty; margin:0 auto 1.6rem; max-width:34ch; }
.di-sub b { color:hsl(var(--foreground)); }
.di-fan { position:relative; height:200px; margin-bottom:1.6rem; display:flex; align-items:center; justify-content:center; }
.di-card { position:absolute; width:84px; height:120px; border-radius:12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  background: linear-gradient(158deg, hsl(214 50% 28%), hsl(214 38% 13%));
  box-shadow: inset 0 0 0 1.5px #5a8fd6, 0 8px 22px rgba(0,0,0,.55);
  transition: transform .8s cubic-bezier(.3,1,.3,1), opacity .6s;
  transform: translateX(calc((var(--n) - (var(--total) - 1)/2) * 92px)) rotate(calc((var(--n) - (var(--total) - 1)/2) * 5deg)) translateY(0); }
.di-card.tier-rare { background: linear-gradient(158deg, hsl(282 44% 30%), hsl(282 34% 14%));
  box-shadow: inset 0 0 0 1.5px #b07ad6, 0 8px 22px rgba(0,0,0,.55); }
.di-card.tier-premium { background: linear-gradient(158deg, hsl(43 60% 32%), hsl(38 42% 15%));
  box-shadow: inset 0 0 0 1.5px #ffd76a, 0 8px 26px rgba(0,0,0,.55), 0 0 28px #f0a83655; }
.di-card-val { font-size:1.9rem; font-weight:700; color:#9fd0ff; }
.di-card.tier-rare .di-card-val { color:#d8aaff; }
.di-card.tier-premium .di-card-val { color:#ffe39a; }
.di-card-tag { font-size:.8rem; color:#ffd76a; }
/* gather phase: all cards collapse into a single deck */
.di-fan.phase-gather .di-card { transform: translateX(calc(var(--n) * 1.5px)) translateY(calc(var(--n) * -1.5px)) rotate(calc(var(--n) * -1.2deg)); opacity:.9; }
.di-fan.phase-gather .di-card .di-card-val, .di-fan.phase-gather .di-card .di-card-tag { opacity:0; transition:opacity .3s; }
.di-deckcount { position:absolute; z-index:5; font-size:2.4rem; font-weight:700; color:hsl(var(--foreground));
  text-shadow:0 2px 10px rgba(0,0,0,.8); animation: crf-pop .5s cubic-bezier(.2,1.2,.3,1); }
.di-go { margin-top:.2rem; padding:.8rem 1.6rem; border:none; border-radius:999px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; letter-spacing:.04em; font-size:.92rem; color:hsl(20 16% 8%);
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(28 80% 45%)); box-shadow:0 6px 20px hsl(var(--primary)/.4); }
.di-go:disabled { opacity:.4; cursor:default; filter:grayscale(.4); }

/* moderator deck control */
.deck-ctrl { border-top:1px solid hsl(var(--border)/.5); margin-top:.3rem; padding-top:.2rem; }
.deck-tiers { display:flex; gap:5px; margin-left:auto; }
.deck-tiers .dt { font-size:.62rem; letter-spacing:.03em; padding:.14rem .42rem; border-radius:6px; font-variant-numeric:tabular-nums;
  background:hsl(var(--border)/.5); color:hsl(var(--muted-foreground)); }
.deck-tiers .dt.common { color:#9fd0ff; box-shadow: inset 0 0 0 1px #5a8fd655; }
.deck-tiers .dt.rare { color:#d8aaff; box-shadow: inset 0 0 0 1px #b07ad655; }
.deck-tiers .dt.premium { color:#ffd76a; box-shadow: inset 0 0 0 1px #f0a83666; }
.deck-last { font-size:.64rem; letter-spacing:.04em; padding:.14rem .45rem; border-radius:999px; margin-left:auto;
  background:hsl(var(--border)/.5); color:hsl(var(--muted-foreground)); }
.deck-last.tier-common { color:#9fd0ff; }
.deck-last.tier-rare { color:#d8aaff; }
.deck-last.tier-premium { color:#ffd76a; }
.pulse-allow { animation: dock-call 1.3s ease-in-out infinite; }

/* ============================================================
   MODERATOR — Main Stage control (full control of the shared screen)
   ============================================================ */
.host-card.stage-card { grid-column: 1 / -1; margin-bottom: 18px; box-shadow: inset 0 1px 1px rgba(255,220,160,.12), 0 8px 30px rgba(0,0,0,.5), 0 0 0 1px hsl(var(--primary)/.18); }

/* gate pop-down — appears under the Main Stage when the moderator picks Gate */
.gate-popdown { margin: -10px 0 18px; transform-origin: top center; overflow: hidden;
  animation: gate-popdown .34s cubic-bezier(.2,.9,.25,1); }
@keyframes gate-popdown { 0%{ opacity:0; transform: translateY(-12px) scaleY(.92); } 100%{ opacity:1; transform: translateY(0) scaleY(1); } }
.host-card.gate-panel { box-shadow: inset 0 1px 1px rgba(255,220,160,.1), 0 8px 26px rgba(0,0,0,.5), 0 0 0 1px hsl(var(--primary)/.3); }
.gate-panel-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.gate-panel-grid .gate-col { min-width:0; }
@media (max-width: 760px){ .gate-panel-grid { grid-template-columns: 1fr; gap: 8px; } }
.stage-now { display:flex; align-items:center; gap:10px; margin:.2rem 0 .9rem; flex-wrap:wrap; }
.stage-now-lbl { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
.stage-now-pill { display:inline-flex; align-items:center; gap:8px; padding:.4rem .9rem; border-radius:999px;
  font-family:var(--font-display); font-weight:700; letter-spacing:.04em; font-size:.86rem;
  color:hsl(var(--primary)); background:hsl(var(--primary)/.14); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.45); }
.stage-now-pill .live-dot { width:8px; height:8px; border-radius:999px; background:hsl(var(--heal)); box-shadow:0 0 8px hsl(var(--heal)); animation: intel-pulse 1.4s ease-out infinite; }
.stage-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:9px; }
.stage-btn { display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:.75rem .85rem; border-radius:13px; cursor:pointer; text-align:left;
  color:hsl(var(--foreground)); background:hsl(var(--background)/.45); box-shadow: inset 0 0 0 1px hsl(var(--border)); transition: box-shadow .2s, transform .12s, color .2s; }
.stage-btn:hover { filter:brightness(1.18); }
.stage-btn:active { transform: scale(.98); }
.stage-btn.on { color:hsl(var(--primary)); background:hsl(var(--primary)/.16); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.55), 0 0 22px hsl(var(--primary)/.2); }
.stage-btn .sb-top { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:.9rem; }
.stage-btn .sb-sub { font-size:.66rem; letter-spacing:.02em; color:hsl(var(--muted-foreground)); line-height:1.2; }
.stage-btn.on .sb-sub { color:hsl(var(--primary)/.7); }
.stage-sub-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:.8rem; }

/* ============================================================
   CARD PLAY ON/OFF SWITCH (moderator)
   ============================================================ */
.play-switch { display:flex; align-items:center; gap:10px; width:100%; padding:.5rem .65rem; border:none; cursor:pointer;
  border-radius:12px; text-align:left; transition: box-shadow .2s, background .2s;
  background:hsl(var(--background)/.5); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.play-switch .ps-track { position:relative; flex:0 0 auto; width:42px; height:24px; border-radius:999px;
  background:hsl(var(--border)); transition: background .22s; }
.play-switch .ps-knob { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:999px;
  background:hsl(var(--foreground)); transition: transform .22s; box-shadow:0 1px 3px rgba(0,0,0,.5); }
.play-switch .ps-lbl { font-family:var(--font-display); font-weight:700; font-size:.84rem; letter-spacing:.03em; }
.play-switch .ps-hint { margin-left:auto; font-size:.66rem; color:hsl(var(--muted-foreground)); letter-spacing:.02em; }
.play-switch.off .ps-lbl { color:hsl(var(--muted-foreground)); }
.play-switch.on { background:hsl(var(--heal)/.14); box-shadow: inset 0 0 0 1px hsl(var(--heal)/.5), 0 0 18px hsl(var(--heal)/.18); }
.play-switch.on .ps-track { background:hsl(var(--heal)); }
.play-switch.on .ps-knob { transform: translateX(18px); background:hsl(20 16% 8%); }
.play-switch.on .ps-lbl { color:hsl(var(--heal)); }
.play-switch.off { animation: ps-call 1.6s ease-in-out infinite; }
@keyframes ps-call { 0%,100%{ box-shadow: inset 0 0 0 1px hsl(var(--border)); } 50%{ box-shadow: inset 0 0 0 1px hsl(var(--primary)/.6); } }

/* ============================================================
   MAPS & HANDOUTS — moderator control
   ============================================================ */
.map-list { display:flex; flex-direction:column; gap:10px; margin-top:.8rem; }
.map-card { position:relative; display:flex; gap:12px; padding:10px; border-radius:14px;
  background:hsl(var(--background)/.5); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.map-card.on-main { box-shadow: inset 0 0 0 1px hsl(var(--primary)/.6), 0 0 22px hsl(var(--primary)/.18); }
.map-thumb-wrap { flex:0 0 auto; width:96px; height:72px; border-radius:9px; overflow:hidden; background:hsl(20 16% 4%);
  box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.map-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.map-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.map-name-input { background:transparent; border:none; border-bottom:1px solid hsl(var(--border)); color:hsl(var(--foreground));
  font-family:var(--font-display); font-weight:700; font-size:.92rem; padding:.1rem 0 .25rem; outline:none; width:100%; }
.map-name-input:focus { border-color:hsl(var(--primary)); }
.map-share { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.map-card .sc-x { position:absolute; top:6px; right:8px; }

/* ============================================================
   MAPS — player viewer + lightbox
   ============================================================ */
.maps-modal { width:min(560px,94vw); max-height:84vh; overflow:auto; padding:1.4rem; border-radius:20px; }
.mm-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:12px; }
.mm-thumb { position:relative; border:none; cursor:pointer; padding:0; border-radius:12px; overflow:hidden;
  background:hsl(20 16% 4%); box-shadow: inset 0 0 0 1px hsl(var(--border)); aspect-ratio:4/3; }
.mm-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s; }
.mm-thumb:hover img { transform: scale(1.05); }
.mm-thumb .mm-name { position:absolute; left:0; right:0; bottom:0; padding:.5rem .6rem .4rem; text-align:left;
  font-size:.74rem; font-weight:600; color:#fff; background:linear-gradient(180deg, transparent, rgba(0,0,0,.8)); }
.map-lightbox { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center;
  background:rgba(8,6,4,.95); padding:24px; }
.map-lb-frame { max-width:96vw; max-height:88vh; overflow:auto; cursor:zoom-in; }
.map-lb-frame img { max-width:96vw; max-height:88vh; object-fit:contain; display:block; border-radius:6px; transition: max-width .25s, max-height .25s; }
.map-lb-frame.zoomed { cursor:zoom-out; }
.map-lb-frame.zoomed img { max-width:none; max-height:none; width:auto; }
.map-lb-name { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-size:.78rem; letter-spacing:.04em;
  color:hsl(var(--muted-foreground)); background:rgba(0,0,0,.5); padding:.4rem .9rem; border-radius:999px; }
.map-lb-x { position:fixed; top:18px; right:18px; width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; }

/* ============================================================
   MAP — shared Main screen view
   ============================================================ */
.map-view { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5vh; width:100%; }
.map-view-img { max-width:78vw; max-height:74vh; object-fit:contain; border-radius:8px;
  box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 0 1px hsl(var(--primary)/.25), inset 0 0 60px rgba(0,0,0,.4); }
.map-view-name { font-size:1.3rem; letter-spacing:.06em;
  color:hsl(var(--foreground)); background:rgba(0,0,0,.45); padding:.45rem 1.3rem; border-radius:999px;
  box-shadow: inset 0 0 0 1px hsl(var(--primary)/.3); }

/* ============================================================
   BEAT-GATE COUNTDOWN + long-beat wrapping
   ============================================================ */
.gn-timer, .gate-timer { display:flex; align-items:center; gap:10px; width:min(92vw,420px); margin:1.6vh auto .4vh; }
.gate-timer { width:min(60vw,520px); }
.gn-timer-bar, .gate-timer-bar { flex:1; height:10px; border-radius:999px; background:hsl(20 20% 10%/.85);
  overflow:hidden; box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.gn-timer-fill, .gate-timer-fill { height:100%; border-radius:999px;
  background:linear-gradient(90deg,hsl(var(--heal)),hsl(var(--primary))); transition: width .12s linear; }
.gn-timer-fill.low, .gate-timer-fill.low { background:linear-gradient(90deg,hsl(38 90% 50%),hsl(var(--damage)));
  animation: timer-pulse .6s ease-in-out infinite; }
@keyframes timer-pulse { 0%,100%{ opacity:1 } 50%{ opacity:.55 } }
.gn-timer-num, .gate-timer-num { font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:hsl(var(--foreground)); font-variant-numeric:tabular-nums; min-width:2.6ch; text-align:right; }
.gate-timer-num { font-size:1.6rem; }
/* progress slots wrap when the beat is long (8 / 10 notes) */
.gn-progress, .gate-progress-row { flex-wrap:wrap; }
.gprog { box-shadow: inset 0 0 0 1.5px hsl(var(--border)); }
.gprog.lit { box-shadow:0 0 16px var(--nc); }
.gn-pip { box-shadow: inset 0 0 0 2px hsl(var(--border)); }
.gn-pip.lit { box-shadow:0 0 14px var(--nc, hsl(var(--primary))); }

/* ============================================================
   SETUP LIBRARY (moderator)
   ============================================================ */
.setup-card .setup-section { border-top:1px solid hsl(var(--border)/.5); margin-top:.8rem; padding-top:.7rem; }
.setup-section-head { display:flex; align-items:center; gap:10px; margin-bottom:.5rem; }
.setup-kind-label { font-family:var(--font-display); font-weight:700; font-size:.92rem; letter-spacing:.04em; }
.setup-kind-sub { display:block; font-size:.66rem; color:hsl(var(--muted-foreground)); letter-spacing:.01em; margin-top:1px; }
.setup-section-head .tiny-btn { margin-left:auto; }
.setup-empty { font-size:.74rem; padding:.2rem 0 .4rem; }
.setup-list { display:flex; flex-direction:column; gap:8px; }
.setup-entry { position:relative; display:flex; gap:10px; padding:8px; border-radius:12px;
  background:hsl(var(--background)/.5); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.setup-entry.on-main { box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.se-thumb { flex:0 0 auto; width:62px; height:62px; border-radius:9px; overflow:hidden; background:hsl(20 16% 4%);
  display:flex; align-items:center; justify-content:center; box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.se-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.se-noimg { color:hsl(var(--muted-foreground)); }
.se-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.se-name { background:transparent; border:none; border-bottom:1px solid hsl(var(--border)); color:hsl(var(--foreground));
  font-family:var(--font-display); font-weight:700; font-size:.88rem; padding:.05rem 0 .2rem; outline:none; width:100%; }
.se-name:focus { border-color:var(--accent); }
.se-desc { background:hsl(20 16% 6%); border:1px solid hsl(var(--border)); border-radius:7px; color:hsl(var(--foreground));
  font-family:var(--font-body); font-size:.74rem; padding:.35rem .5rem; outline:none; resize:vertical; width:100%; }
.se-desc:focus { border-color:var(--accent); }
.se-push { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.setup-entry .sc-x { position:absolute; top:6px; right:7px; }
/* run-game reveal library (moved out of setup) */
.se-name-static { font-family:var(--font-display); font-weight:700; font-size:.88rem; color:hsl(var(--foreground)); padding:.05rem 0 .2rem; }
.reveal-section { margin-top:.8rem; }
.reveal-section-head { font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.45rem; padding-left:2px; }
.reveal-list { display:flex; flex-direction:column; gap:8px; }
.setup-entry.reveal.on-main { box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ============================================================
   CODEX CARD — shared Pokédex reveal (main + player)
   ============================================================ */
.codex-card { position:relative; display:flex; align-items:center; gap:clamp(16px,3vw,40px); overflow:hidden;
  border-radius:22px; background:linear-gradient(150deg, hsl(20 22% 11%), hsl(20 18% 6%));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 24px 70px rgba(0,0,0,.6); }
.codex-card.variant-main { width:min(1100px,86vw); padding:clamp(20px,3vw,46px); }
.codex-card.variant-player { width:100%; padding:16px; gap:14px; border-radius:16px; }
.codex-aura { position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(60% 80% at 22% 50%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%); }
.codex-rings { position:absolute; left:0; top:0; bottom:0; width:46%; z-index:0; pointer-events:none; }
.codex-rings span { position:absolute; top:50%; left:24%; border-radius:50%; transform:translate(-50%,-50%);
  border:1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); animation: codex-ring 4s ease-out infinite; }
.codex-rings span:nth-child(1){ width:160px; height:160px; }
.codex-rings span:nth-child(2){ width:160px; height:160px; animation-delay:1.3s; }
.codex-rings span:nth-child(3){ width:160px; height:160px; animation-delay:2.6s; }
@keyframes codex-ring { 0%{ transform:translate(-50%,-50%) scale(.4); opacity:.7; } 100%{ transform:translate(-50%,-50%) scale(1.9); opacity:0; } }
.codex-portrait { position:relative; z-index:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  animation: codex-float 4.5s ease-in-out infinite; }
.variant-main .codex-portrait { width:clamp(180px,26vw,320px); height:clamp(220px,34vh,420px); }
.variant-player .codex-portrait { width:104px; height:128px; }
@keyframes codex-float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.codex-portrait-glow { position:absolute; inset:-10% -6%; z-index:-1; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 68%); filter:blur(8px);
  animation: codex-pulse 3s ease-in-out infinite; }
@keyframes codex-pulse { 0%,100%{ opacity:.6; transform:scale(.96) } 50%{ opacity:1; transform:scale(1.05) } }
.codex-portrait-img { width:100%; height:100%; object-fit:contain; display:block;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.6)); }
.codex-portrait-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  color: var(--accent); opacity:.7; }
.codex-body { position:relative; z-index:1; flex:1; min-width:0; }
.codex-kind { font-size:clamp(.7rem,1.2vw,.95rem); letter-spacing:.22em; text-transform:uppercase; font-weight:700; }
.variant-player .codex-kind { font-size:.66rem; letter-spacing:.16em; }
.codex-name { font-size:clamp(1.5rem,3.6vw,3.2rem); line-height:1.05; color:hsl(var(--foreground)); margin:.2rem 0 .5rem; text-wrap:balance; }
.variant-player .codex-name { font-size:1.15rem; margin:.15rem 0 .35rem; }
.codex-rule { height:3px; width:64px; border-radius:99px; margin-bottom:clamp(.6rem,1.4vh,1.1rem); }
.variant-player .codex-rule { margin-bottom:.5rem; width:44px; height:2px; }
.codex-desc { font-size:clamp(.86rem,1.5vw,1.18rem); line-height:1.6; color:hsl(var(--foreground)/.92); text-wrap:pretty; white-space:pre-wrap; }
.variant-player .codex-desc { font-size:.82rem; line-height:1.5; max-height:30vh; overflow:auto; }
.codex-desc.muted-desc { color:hsl(var(--muted-foreground)); font-style:italic; }
.codex-x { position:absolute; top:10px; right:12px; z-index:3; width:32px; height:32px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }

/* ============================================================
   MAIN SCREEN codex layers
   ============================================================ */
.main-npc-layer { position:absolute; left:0; bottom:0; top:14vh; z-index:24; width:min(38vw,460px);
  display:flex; align-items:flex-end; justify-content:center; pointer-events:none; animation: npc-enter .7s cubic-bezier(.2,.9,.3,1) both; }
@keyframes npc-enter { from{ opacity:0; transform:translateX(-40px) } to{ opacity:1; transform:translateX(0) } }
.main-npc-glow { position:absolute; left:8%; bottom:0; width:80%; height:60%; border-radius:50%;
  background: radial-gradient(circle, hsl(var(--primary)/.28), transparent 70%); filter:blur(10px); }
.main-npc-img { position:relative; max-width:100%; max-height:100%; object-fit:contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.7)); animation: codex-float 5s ease-in-out infinite; }
.main-npc-fallback { display:flex; flex-direction:column; align-items:center; gap:8px; color:hsl(var(--primary)); font-family:var(--font-display); }
.main-boss-layer { position:absolute; inset:0; z-index:25; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2vh; pointer-events:none; animation: boss-enter .9s cubic-bezier(.2,.9,.3,1) both; }
@keyframes boss-enter { from{ opacity:0; transform:scale(.85) } to{ opacity:1; transform:scale(1) } }
.main-boss-aura { position:absolute; top:50%; left:50%; width:70vh; height:70vh; transform:translate(-50%,-58%); border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent, #c0392b) 34%, transparent), transparent 66%); filter:blur(14px); animation: codex-pulse 4s ease-in-out infinite; }
.main-boss-img { position:relative; max-width:62vw; max-height:64vh; object-fit:contain;
  filter: drop-shadow(0 26px 60px rgba(0,0,0,.75)); animation: codex-float 5.5s ease-in-out infinite; }
.main-boss-fallback { display:flex; align-items:center; justify-content:center; color:hsl(0 60% 55%); width:40vh; height:40vh; }
.main-boss-name { position:relative; font-size:clamp(1.6rem,4vw,3rem); letter-spacing:.06em; color:hsl(var(--foreground));
  text-shadow:0 4px 24px rgba(0,0,0,.8); }
.main-codex-overlay { position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:3vw; background: radial-gradient(circle at center, hsl(20 16% 6%/.82), hsl(20 16% 4%/.95));
  animation: fade-rise .5s ease-out both; }
/* danger read — enemy/boss reveals feel hazardous: blood vignette + red motes,
   bolder name, pulsing red frame. Image stays left, name + lore right. */
.main-codex-overlay.danger { background: radial-gradient(circle at center, hsl(0 45% 10%/.86), hsl(0 40% 4%/.96)); }
.danger-vignette { position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow: inset 0 0 200px 40px hsl(0 80% 30% / .45), inset 0 0 60px hsl(0 90% 24% / .5);
  animation: danger-vig 2.6s ease-in-out infinite; }
@keyframes danger-vig { 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
.danger-particles { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.danger-mote { position:absolute; bottom:-4%; border-radius:50%; opacity:0;
  background: radial-gradient(circle, #ffd9c0 0%, #ff5a2c 40%, hsl(0 85% 42% / .5) 70%, transparent 78%);
  box-shadow:0 0 7px hsl(12 90% 52% / .8);
  animation: danger-rise var(--dur,6s) linear var(--delay,0s) infinite; }
@keyframes danger-rise {
  0%{ transform:translate(0,0) scale(1); opacity:0; }
  12%{ opacity:var(--op,.5); }
  90%{ opacity:var(--op,.5); }
  100%{ transform:translate(var(--drift,20px), -108vh) scale(.5); opacity:0; }
}
.main-codex-overlay.danger .codex-card {
  background:linear-gradient(150deg, hsl(0 30% 12%), hsl(0 24% 6%));
  box-shadow: inset 0 0 0 2px hsl(0 80% 52% / .7), 0 24px 70px rgba(0,0,0,.7), 0 0 50px hsl(0 80% 40% / .35);
  animation: danger-frame 2.2s ease-in-out infinite; }
@keyframes danger-frame { 0%,100%{ box-shadow: inset 0 0 0 2px hsl(0 80% 52% / .6), 0 24px 70px rgba(0,0,0,.7), 0 0 36px hsl(0 80% 40% / .3); }
  50%{ box-shadow: inset 0 0 0 2px hsl(0 85% 58% / .9), 0 24px 70px rgba(0,0,0,.7), 0 0 64px hsl(0 85% 46% / .55); } }
.main-codex-overlay.danger .codex-kind { color:#ff6a44 !important; letter-spacing:.26em; }
.main-codex-overlay.danger .codex-kind::before { content:'⚠ '; }
.main-codex-overlay.danger .codex-name { color:#fff; text-shadow:0 2px 18px hsl(0 85% 40% / .7); font-weight:700; }
.main-codex-overlay.danger .codex-desc { color:hsl(20 18% 88%); }
.main-codex-overlay.danger .codex-portrait-img { filter: drop-shadow(0 14px 30px rgba(0,0,0,.7)) drop-shadow(0 0 18px hsl(0 85% 45% / .5)); }
/* danger card is NOT a Pokédex — drop the rings, aura float & orbit so it reads
   as a clean image-left / description-right danger plate */
.main-codex-overlay.danger .codex-rings { display:none; }
.main-codex-overlay.danger .codex-aura { display:none; }
.main-codex-overlay.danger .codex-portrait { animation:none; }
.main-codex-overlay.danger .codex-portrait-glow { background: radial-gradient(circle, hsl(0 85% 45% / .4), transparent 66%); animation:none; }
.main-codex-close { position:absolute; bottom:4vh; left:50%; transform:translateX(-50%); z-index:62; cursor:pointer;
  padding:.6rem 1.4rem; border-radius:999px; font-size:.82rem; letter-spacing:.06em; }
/* sound gate — appears when the Main display loses audio permission (reconnect) */
.main-sound-gate { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:9500;
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:999px; cursor:pointer;
  font-family:var(--font-display); font-size:.92rem; letter-spacing:.02em; color:hsl(var(--primary-foreground));
  background:linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary)/.85)); border:1px solid hsl(var(--primary)/.7);
  box-shadow:0 6px 24px hsl(var(--primary)/.4); animation:msg-pulse 2s ease-in-out infinite; }
@keyframes msg-pulse { 0%,100%{ box-shadow:0 6px 20px hsl(var(--primary)/.35); } 50%{ box-shadow:0 6px 30px hsl(var(--primary)/.65); } }
.main-sound-gate .msg-ico { font-size:1.1rem; }

/* ============================================================
   PLAYER codex modal
   ============================================================ */
.codex-modal { width:min(520px,94vw); max-height:86vh; display:flex; flex-direction:column; padding:1.3rem; border-radius:20px; }
.codex-tabs { display:flex; gap:6px; margin-bottom:.8rem; }
.codex-tab { flex:1; border:none; cursor:pointer; padding:.5rem .4rem; border-radius:10px; font-size:.74rem; font-weight:600;
  color:hsl(var(--muted-foreground)); background:hsl(var(--background)/.5); box-shadow: inset 0 0 0 1px hsl(var(--border));
  display:flex; align-items:center; justify-content:center; gap:5px; }
.codex-tab.on { color:hsl(20 16% 8%); background:linear-gradient(180deg,hsl(var(--primary)),hsl(28 80% 45%)); box-shadow:none; }
.codex-tab-n { min-width:17px; height:17px; padding:0 4px; border-radius:999px; font-size:.62rem; display:inline-flex; align-items:center; justify-content:center;
  background:hsl(var(--damage)); color:#fff; }
.codex-tab.on .codex-tab-n { background:hsl(20 16% 8%/.5); color:#fff; }
.codex-tab-body { flex:1; overflow:auto; min-height:120px; }
.codex-grid { display:flex; flex-direction:column; gap:12px; }
.codex-empty { padding:1.4rem .4rem; font-size:.82rem; text-align:center; }

/* zoomable portrait hint */
.codex-portrait.zoomable { cursor:zoom-in; }
.codex-zoom-hint { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:.6rem; letter-spacing:.04em;
  color:hsl(var(--muted-foreground)); background:rgba(0,0,0,.5); padding:.12rem .5rem; border-radius:999px; white-space:nowrap; pointer-events:none; }

/* fullscreen zoomable image viewer */
.img-zoom { position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center;
  background:rgba(6,5,4,.95); }
.img-zoom-frame { position:fixed; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center;
  touch-action:none; cursor:grab; }
.img-zoom-frame:active { cursor:grabbing; }
.img-zoom-frame img { max-width:100vw; max-height:100vh; max-height:100dvh; width:auto; height:auto; transform-origin:center center;
  border-radius:6px; user-select:none; -webkit-user-drag:none; will-change:transform; }
.img-zoom-bar { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:6002; display:flex; align-items:center; gap:10px;
  background:rgba(0,0,0,.55); padding:.4rem .6rem; border-radius:999px; }
.img-zoom-bar .glass-btn { width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.1rem; }
.iz-pct { font-size:.74rem; color:hsl(var(--foreground)); font-variant-numeric:tabular-nums; min-width:3.4ch; text-align:center; }
.img-zoom-name { position:fixed; top:18px; left:50%; transform:translateX(-50%); font-size:.8rem; letter-spacing:.04em;
  color:hsl(var(--foreground)); background:rgba(0,0,0,.5); padding:.4rem 1rem; border-radius:999px; }
.img-zoom-x { position:fixed; top:16px; right:16px; z-index:6002; width:40px; height:40px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; }

/* player NPC panel — image only, auto-pops, dismissable & reopenable */
.npc-panel-bg { position:fixed; inset:0; z-index:4500; display:flex; align-items:center; justify-content:center; padding:22px;
  background: radial-gradient(circle at 35% 45%, hsl(150 20% 10%/.6), hsl(20 16% 5%/.92)); }
.npc-panel { position:relative; width:min(420px,92vw); display:flex; flex-direction:column; align-items:center; }
.npc-panel-glow { position:absolute; inset:6% 10% 0; border-radius:50%; background: radial-gradient(circle, hsl(150 50% 45%/.3), transparent 70%); filter:blur(14px); }
.npc-panel-frame { position:relative; width:100%; max-height:74vh; display:flex; align-items:center; justify-content:center; cursor:zoom-in; }
.npc-panel-img { max-width:100%; max-height:74vh; object-fit:contain; border-radius:14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px hsl(150 40% 50%/.3); filter: drop-shadow(0 14px 30px rgba(0,0,0,.5)); }
.npc-panel-fallback { display:flex; align-items:center; justify-content:center; width:200px; height:240px; color:hsl(150 40% 55%);
  background:hsl(20 16% 8%); border-radius:14px; box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.npc-panel-hint { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:.66rem; letter-spacing:.04em;
  color:hsl(var(--muted-foreground)); background:rgba(0,0,0,.5); padding:.16rem .6rem; border-radius:999px; pointer-events:none; }
.npc-panel-x { position:absolute; top:-6px; right:-6px; width:40px; height:40px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; z-index:3; }

/* ============================================================
   MAIN STAGE — contextual reveal (moderator)
   ============================================================ */
.stage-btn.sel { box-shadow: inset 0 0 0 1.5px hsl(var(--primary)/.8); }
.stage-reveal { margin-top:.9rem; border-top:1px solid hsl(var(--border)/.5); padding-top:.8rem; }
.stage-chip-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.stage-hint { font-size:.68rem; letter-spacing:.01em; text-transform:none; flex:1 1 100%; margin-top:.2rem; }
.stage-pick-empty { font-size:.78rem; padding:.5rem 0; }
.stage-pick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:.5rem; }
.pick-tile { position:relative; border:none; cursor:pointer; padding:0; border-radius:11px; overflow:hidden; aspect-ratio:1/1;
  background:hsl(20 16% 5%); box-shadow: inset 0 0 0 1px hsl(var(--border)); display:flex; align-items:center; justify-content:center; }
.pick-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.pick-tile .pick-noimg { color:hsl(var(--muted-foreground)); }
.pick-tile .pick-name { position:absolute; left:0; right:0; bottom:0; padding:.5rem .4rem .3rem; font-size:.66rem; font-weight:600; color:#fff;
  text-align:left; background:linear-gradient(180deg,transparent,rgba(0,0,0,.85)); }
.pick-tile.on { box-shadow: inset 0 0 0 2px hsl(var(--primary)), 0 0 16px hsl(var(--primary)/.4); }
.pick-tile .pick-pos { position:absolute; top:5px; left:5px; font-size:.58rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:hsl(var(--primary)); color:hsl(20 16% 8%); padding:.1rem .4rem; border-radius:999px; }
.stage-counts { display:flex; flex-direction:column; gap:6px; margin-top:.7rem; }
.stage-count-row { display:flex; align-items:center; gap:10px; padding:.4rem .6rem; border-radius:9px;
  background:hsl(var(--background)/.5); box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.scr-pos { font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:hsl(var(--primary)); min-width:48px; }
.scr-name { flex:1; font-size:.82rem; color:hsl(var(--foreground)); }
.amt-step { display:flex; align-items:center; gap:6px; }
.amt-step button { width:26px; height:26px; border-radius:7px; border:none; cursor:pointer; font-size:1rem; line-height:1;
  background:hsl(var(--border)); color:hsl(var(--foreground)); }
.amt-step .scr-n { font-family:var(--font-display); font-weight:700; font-size:.86rem; min-width:3ch; text-align:center; font-variant-numeric:tabular-nums; }

/* ============================================================
   MAIN SCREEN — enemy/boss figures across the stage
   ============================================================ */
.main-figures-row { position:absolute; inset:14vh 0 12vh; z-index:25; display:flex; align-items:center; justify-content:space-around;
  gap:2vw; padding:0 4vw; pointer-events:none; animation: boss-enter .8s cubic-bezier(.2,.9,.3,1) both; }
.main-figure { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  max-width:34%; height:100%; }
.main-figure-aura { position:absolute; top:46%; left:50%; width:42vh; height:42vh; max-width:90%; transform:translate(-50%,-50%); border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent,#c0392b) 32%, transparent), transparent 66%); filter:blur(12px); animation: codex-pulse 4s ease-in-out infinite; }
.main-figure-img { position:relative; max-width:100%; max-height:72%; object-fit:contain; filter: drop-shadow(0 22px 50px rgba(0,0,0,.7));
  animation: codex-float 5s ease-in-out infinite; }
.main-figure-fallback { display:flex; align-items:center; justify-content:center; width:24vh; height:30vh; color:color-mix(in srgb,var(--accent,#c0392b) 70%, #fff); }
.main-figure-name { position:relative; margin-top:1vh; font-family:var(--font-display); font-weight:700; font-size:clamp(.9rem,1.8vw,1.5rem);
  color:hsl(var(--foreground)); text-shadow:0 3px 14px rgba(0,0,0,.8); text-align:center; }
.main-figure-count { position:relative; z-index:3; margin-bottom:.6vh; min-width:2.4ch; padding:.15rem .7rem; border-radius:999px;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1rem,2vw,1.6rem); color:#fff; font-variant-numeric:tabular-nums;
  background:color-mix(in srgb, var(--accent,#c0392b) 80%, #000); box-shadow:0 4px 16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.2); }

/* ============================================================
   MOBILE FIT — narrow-screen overrides
   ============================================================ */
@media (max-width:560px){
  .codex-card.variant-main { flex-direction:column; text-align:center; gap:14px; width:90vw; padding:18px; }
  .codex-card.variant-main .codex-rings { display:none; }
  .codex-card.variant-main .codex-body { text-align:center; }
  .codex-card.variant-main .codex-rule { margin-left:auto; margin-right:auto; }
  .main-npc-layer { width:54vw; top:auto; height:64vh; }
  .main-boss-img { max-width:80vw; }
  /* deck-reveal fan must not spill off a phone screen */
  .di-fan { height:170px; }
  .di-fan .di-card { width:62px; height:90px;
    transform: translateX(calc((var(--n) - (var(--total) - 1)/2) * 50px)) rotate(calc((var(--n) - (var(--total) - 1)/2) * 5deg)); }
  .di-card-val { font-size:1.4rem; }
  .di-fan.phase-gather .di-card { transform: translateX(calc(var(--n) * 1.2px)) translateY(calc(var(--n) * -1.2px)) rotate(calc(var(--n) * -1deg)); }
  .deckintro h2 { font-size:1.6rem; }
  .deckintro { padding:0 4px; }
  /* the just-played reveal card */
  .crf-card { width:150px; height:212px; }
  .crf-val { font-size:3.8rem; }
  /* action dock breathing room on small screens */
  .action-dock { padding:12px 10px calc(12px + env(safe-area-inset-bottom)); }
  .ad-inner { gap:12px; padding:11px 12px; }
}

/* ============================================================
   GATE — guaranteed wrong-beat flash (keyed, always re-animates)
   ============================================================ */
.gate-wrong-flash { position:absolute; inset:0; z-index:30; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 38%, hsl(var(--damage)/.72) 100%);
  animation: damage-flash .62s ease-out forwards; }
.gn-flash { position:absolute; inset:0; z-index:1; pointer-events:none;
  animation: damage-flash .55s ease-out forwards; }
.gn-flash.bad  { background: radial-gradient(ellipse at 50% 60%, transparent 42%, hsl(var(--damage)/.5) 120%); }
.gn-flash.good { background: radial-gradient(ellipse at 50% 60%, transparent 42%, hsl(var(--heal)/.42) 120%); }

/* ============================================================
   STAT REQUIREMENT CHIPS — used in shop, inventory, item detail
   ============================================================ */
.req-chip { display:inline-flex; align-items:center; gap:3px; font-family:var(--font-display); font-weight:600;
  font-size:.62rem; letter-spacing:.05em; padding:.16rem .42rem; border-radius:6px;
  background:hsl(var(--primary)/.12); color:hsl(var(--primary)); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.32); white-space:nowrap; }
.req-chip.sm { font-size:.56rem; padding:.12rem .34rem; }
.req-chip.lg { font-size:.8rem; padding:.32rem .6rem; }
.req-chip.met { background:hsl(var(--heal)/.14); color:hsl(var(--heal)); box-shadow:inset 0 0 0 1px hsl(var(--heal)/.4); }
.req-chip.unmet { background:hsl(var(--damage)/.12); color:hsl(0 70% 66%); box-shadow:inset 0 0 0 1px hsl(var(--damage)/.4); }

/* ============================================================
   SHOP — Main screen storefront (ShopView)
   ============================================================ */
.shopx-wrap { position:relative; max-width:1120px; width:100%; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6); }
.shopx-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:saturate(.9) brightness(.5); }
.shopx-scrim { position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 0%, hsl(38 50% 16% / .55), transparent 60%),
              linear-gradient(180deg, hsl(var(--background)/.78), hsl(var(--background)/.92)); }
.shopx-inner { position:relative; z-index:2; padding: clamp(1.4rem,3vw,2.4rem); }
.shopx-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:1.6vh; }
.shopx-title h2 { font-size:clamp(1.6rem,3.6vw,2.8rem); color:hsl(var(--primary)); letter-spacing:.08em; line-height:1; }
.shopx-sub { color:hsl(var(--muted-foreground)); letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; margin-top:8px; }
.shopx-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.shopx-card { position:relative; border-radius:16px; padding:1rem .8rem 1.1rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.shopx-card .shopx-ico { width:58px; height:58px; border-radius:14px; display:grid; place-items:center; color:hsl(var(--foreground)/.92);
  background: radial-gradient(circle at 50% 35%, hsl(38 30% 22%), hsl(24 20% 9%)); box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.shopx-card.type-weapon .shopx-ico { color:hsl(var(--primary)); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.35); }
.shopx-card.type-magic .shopx-ico { color:hsl(265 70% 74%); box-shadow:inset 0 0 0 1px hsl(265 60% 60% / .4); }
.shopx-name { font-family:var(--font-display); font-weight:600; font-size:.92rem; color:hsl(var(--foreground)); line-height:1.15; text-wrap:balance; }
.shopx-cost { display:inline-flex; align-items:center; gap:4px; color:hsl(var(--primary)); font-family:var(--font-display); font-weight:700; font-size:.92rem; }
.shopx-reqs { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.shopx-desc { font-size:.72rem; color:hsl(var(--muted-foreground)); line-height:1.4; text-wrap:pretty; margin-top:.1rem; }
.shopx-empty { padding:3rem 1rem; text-align:center; }
.shopx-foot { text-align:center; margin-top:1.6vh; font-size:.72rem; letter-spacing:.04em; }

/* ============================================================
   XP BAR + LEVEL PILL (player)
   ============================================================ */
.hh-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.level-pill { display:inline-flex; align-items:center; gap:5px; padding:.28rem .6rem; font-size:.74rem;
  font-family:var(--font-display); font-weight:600; color:hsl(var(--primary)); background:hsl(var(--primary)/.12);
  box-shadow:inset 0 0 0 1px hsl(var(--primary)/.35); }
.xp-frame { border-radius:13px; padding:.7rem .9rem; }
.xp-track { height:9px; border-radius:99px; background:hsl(var(--background)/.7); box-shadow:inset 0 0 0 1px hsl(var(--border)); overflow:hidden; }
.xp-fill { height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(90deg, hsl(38 80% 50%), hsl(45 95% 62%)); box-shadow:0 0 14px hsl(var(--primary)/.6); }
.xp-cap { display:flex; justify-content:space-between; margin-top:.45rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
.xp-num { color:hsl(var(--primary)); font-family:var(--font-display); font-weight:600; }

/* shop entry button (player) */
.shop-open-btn { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:.85rem 1rem; border-radius:14px; cursor:pointer; font-family:var(--font-display); font-weight:600; letter-spacing:.05em;
  color:hsl(var(--primary)); background:hsl(var(--primary)/.12); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.4); }
.shop-open-btn:hover { filter:brightness(1.15); }
.shop-open-btn:disabled { opacity:.4; cursor:not-allowed; }
.shop-open-btn .intel-count { position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:hsl(var(--damage)); color:#fff; font-size:.62rem; min-width:18px; height:18px; border-radius:99px; display:grid; place-items:center; padding:0 5px; }

/* ============================================================
   INVENTORY (player) — weapons · items & magic
   ============================================================ */
.inv-wrap { display:flex; flex-direction:column; gap:14px; }
.inv-section { }
.inv-head { display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; color:hsl(var(--foreground)/.8); margin-bottom:9px; }
.inv-head .inv-n { margin-left:auto; color:hsl(var(--muted-foreground)); }
.inv-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)); gap:9px; }
.inv-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:.7rem .4rem .6rem;
  border-radius:13px; cursor:pointer; text-align:center; color:hsl(var(--foreground)); }
.inv-tile:hover { filter:brightness(1.15); }
.inv-tile.weapon { box-shadow:inset 0 0 0 1px hsl(var(--primary)/.3); }
.inv-tile .inv-nm { font-size:.66rem; line-height:1.2; color:hsl(var(--foreground)/.92); text-wrap:balance; }
.inv-tile .inv-reqs { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; }
.inv-none, .inv-empty { font-size:.76rem; padding:.4rem 0; }

/* item detail modal */
.item-modal { position:relative; width:min(440px,100%); border-radius:20px; padding:1.6rem 1.5rem; }
.im-head { display:flex; align-items:center; gap:14px; margin-bottom:.5rem; }
.im-ico { width:62px; height:62px; border-radius:15px; display:grid; place-items:center; color:hsl(var(--foreground)/.9);
  background: radial-gradient(circle at 50% 35%, hsl(38 30% 22%), hsl(24 20% 9%)); box-shadow:inset 0 0 0 1px hsl(var(--border)); flex:0 0 auto; }
.im-ico.weapon { color:hsl(var(--primary)); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.4); }
.im-name { font-size:1.4rem; color:hsl(var(--foreground)); line-height:1.1; }
.im-type { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:hsl(var(--primary)); margin-top:3px; }
.im-desc { color:hsl(var(--foreground)/.8); line-height:1.55; text-wrap:pretty; margin:.6rem 0 1rem; }
.im-reqs-label { font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-bottom:.5rem; }
.im-reqs { display:flex; flex-wrap:wrap; gap:7px; }
.im-noreq { font-size:.84rem; }

/* item actions — Use · Use on friend · Give to friend */
.im-actions { display:flex; flex-direction:column; gap:8px; margin-top:1.2rem; }
.im-act { display:flex; align-items:center; gap:10px; padding:.7rem .9rem; border:none; cursor:pointer; border-radius:11px;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; letter-spacing:.02em; text-align:left;
  color:hsl(var(--foreground)/.9); background:hsl(var(--surface)); box-shadow:inset 0 0 0 1px hsl(var(--border)); transition:filter .15s, box-shadow .15s; }
.im-act svg { color:hsl(var(--muted-foreground)); }
.im-act:hover:not(:disabled) { filter:brightness(1.15); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.5); }
.im-act:disabled { opacity:.42; cursor:not-allowed; }
.im-act.use { color:hsl(var(--primary-foreground)); background:linear-gradient(180deg, hsl(45 95% 62%), hsl(38 88% 50%)); box-shadow:0 4px 14px hsl(var(--primary)/.3); }
.im-act.use svg { color:hsl(24 40% 12%); }
/* friend picker */
.im-friends { margin-top:1.1rem; }
.im-friends-head { display:flex; align-items:center; gap:10px; margin-bottom:.8rem; }
.im-back { padding:.35rem .7rem; border-radius:8px; font-size:.78rem; cursor:pointer; }
.im-friends-title { font-family:var(--font-display); font-weight:600; font-size:.92rem; color:hsl(var(--foreground)); }
.im-friend-list { display:flex; flex-direction:column; gap:8px; max-height:300px; overflow-y:auto; }
.im-friend { display:flex; align-items:center; gap:12px; padding:.65rem .8rem; border:none; cursor:pointer; border-radius:12px; text-align:left;
  color:hsl(var(--foreground)/.9); background:hsl(var(--surface)); box-shadow:inset 0 0 0 1px hsl(var(--border)); transition:filter .15s, box-shadow .15s; }
.im-friend:hover { filter:brightness(1.15); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.55), 0 0 14px hsl(var(--primary)/.2); }
.im-friend-sigil { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; color:hsl(var(--primary));
  background:radial-gradient(circle at 50% 35%, hsl(34 30% 24%), hsl(24 24% 12%)); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.3); }
.im-friend-info { flex:1; display:flex; flex-direction:column; }
.im-friend-name { font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.im-friend-cls { font-size:.72rem; color:hsl(var(--muted-foreground)); }
.im-friend-hp { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-display); font-weight:600; font-size:.82rem; color:hsl(var(--heal)); }
.im-friend-hp svg { color:hsl(var(--heal)); }

/* ============================================================
   USE PROMPT — moderator gated this action behind a card
   ============================================================ */
.useprompt-bg { position:fixed; inset:0; z-index:6200; display:grid; place-items:center; padding:5vw;
  background:radial-gradient(ellipse at 50% 45%, hsl(28 30% 10% / .82), hsl(20 16% 5% / .94)); }
.useprompt { text-align:center; width:min(360px,90vw); padding:1.6rem; border-radius:18px;
  background:linear-gradient(180deg, hsl(28 30% 14% / .96), hsl(24 28% 9% / .98));
  box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 0 0 1px hsl(40 50% 40% / .4); }
.up-eyebrow { display:inline-flex; align-items:center; gap:7px; color:hsl(var(--primary)); letter-spacing:.18em; text-transform:uppercase; font-size:.7rem; }
.up-label { font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:hsl(var(--foreground)); margin-top:.5rem; text-wrap:balance; }
.up-sub { font-size:.8rem; color:hsl(var(--muted-foreground)); margin-top:.3rem; }
.up-card { position:relative; width:120px; height:168px; margin:1.2rem auto .4rem; border-radius:16px; cursor:pointer; overflow:hidden; isolation:isolate;
  border:2.5px solid hsl(22 28% 7%); display:grid; place-items:center;
  background:linear-gradient(158deg, hsl(38 44% 30%), hsl(38 30% 14%));
  box-shadow:0 14px 34px rgba(0,0,0,.6), inset 0 0 0 1.5px hsl(var(--primary)/.5); transition:transform .12s, filter .15s; }
.up-card:hover:not(:disabled) { transform:translateY(-3px); filter:brightness(1.1); }
.up-card:active:not(:disabled) { transform:translateY(0) scale(.97); }
.up-card.spent { filter:grayscale(.7) brightness(.6); cursor:not-allowed; }
.up-card-back { position:relative; z-index:6; font-family:var(--font-display); font-weight:700; letter-spacing:.12em; font-size:.78rem; color:hsl(40 60% 86%); text-shadow:0 1px 4px rgba(0,0,0,.7); }
.up-decline { margin-top:.6rem; padding:.6rem 1.2rem; border:none; cursor:pointer; border-radius:11px; font-family:var(--font-display); font-weight:600;
  color:hsl(0 60% 80%); background:hsl(0 40% 22% / .7); box-shadow:inset 0 0 0 1px hsl(0 55% 45% / .5); }
.up-decline:hover { filter:brightness(1.15); }

/* ============================================================
   FEEDBACK TOAST — buy / give / use / receive
   ============================================================ */
.fbk { position:fixed; left:50%; bottom:14vh; transform:translateX(-50%); z-index:6100; cursor:pointer;
  display:flex; align-items:center; gap:13px; padding:.9rem 1.3rem .9rem 1rem; border-radius:14px; min-width:240px; max-width:86vw;
  background:linear-gradient(180deg, hsl(28 30% 15% / .97), hsl(24 28% 10% / .98));
  box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 0 0 1px hsl(40 50% 42% / .45); }
.fbk-burst { position:absolute; left:30px; top:50%; width:80px; height:80px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, hsl(40 90% 65% / .5), transparent 65%); animation:fbk-burst .7s ease-out forwards; }
@keyframes fbk-burst { 0%{ transform:translate(-50%,-50%) scale(.3); opacity:0;} 35%{ opacity:1;} 100%{ transform:translate(-50%,-50%) scale(1.6); opacity:0;} }
.fbk-ico { position:relative; width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; color:hsl(40 80% 66%);
  background:radial-gradient(circle at 50% 35%, hsl(38 40% 26%), hsl(24 26% 12%)); box-shadow:inset 0 0 0 1px hsl(40 60% 48% / .5); }
.fbk-text { display:flex; flex-direction:column; gap:2px; }
.fbk-title { font-family:var(--font-display); font-weight:700; font-size:.95rem; color:hsl(40 60% 84%); }
.fbk-sub { font-size:.78rem; color:hsl(var(--muted-foreground)); }
.fbk-receive .fbk-ico, .fbk-buy .fbk-ico { color:hsl(var(--heal)); box-shadow:inset 0 0 0 1px hsl(var(--heal)/.5); }
.fbk-decline .fbk-ico { color:hsl(0 65% 70%); box-shadow:inset 0 0 0 1px hsl(0 55% 50% / .5); }

/* ============================================================
   MODERATOR — use request (Free · Use card · Decline)
   ============================================================ */
.usereq { margin-top:.7rem; border-radius:11px; padding:.6rem .7rem; background:hsl(var(--primary)/.07); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.28); }
.usereq.awaiting { background:hsl(45 60% 40% / .12); box-shadow:inset 0 0 0 1px hsl(45 70% 50% / .45); }
.usereq-head { display:flex; align-items:center; gap:7px; }
.usereq-label { font-family:var(--font-display); font-weight:600; font-size:.82rem; color:hsl(var(--foreground)); }
.usereq-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:.5rem; }
.usereq-wait { display:flex; align-items:center; gap:7px; margin-top:.5rem; font-size:.74rem; color:hsl(45 70% 70%); }
.ur-dot { width:7px; height:7px; border-radius:50%; background:hsl(45 80% 60%); box-shadow:0 0 8px hsl(45 80% 60%); animation:pulse-text 1.2s ease-in-out infinite; }
.usereq.give { background:hsl(265 40% 40% / .1); box-shadow:inset 0 0 0 1px hsl(265 55% 60% / .35); }

/* ============================================================
   MODERATOR ZONES — Game Setup vs Run Game
   ============================================================ */
.zone-switch { display:flex; gap:6px; margin:0 auto; padding:4px; border-radius:12px; background:hsl(var(--background)/.5); box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.zone-btn { position:relative; display:inline-flex; align-items:center; gap:7px; padding:.5rem .95rem; border:none; cursor:pointer; border-radius:9px;
  font-family:var(--font-display); font-weight:600; font-size:.84rem; letter-spacing:.02em; color:hsl(var(--muted-foreground)); background:transparent; transition:color .15s, background .15s; }
.zone-btn svg { opacity:.8; }
.zone-btn:hover { color:hsl(var(--foreground)/.9); }
.zone-btn.on { color:hsl(var(--primary-foreground)); background:linear-gradient(180deg, hsl(45 92% 60%), hsl(38 86% 50%)); box-shadow:0 4px 14px hsl(var(--primary)/.3); }
.zone-btn.on svg { opacity:1; }
.zone-badge { min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center; font-size:.66rem; font-weight:700;
  color:#fff; background:hsl(var(--damage)); box-shadow:0 1px 4px rgba(0,0,0,.4); }
.zone-pane { animation: zone-fade .3s ease; }
@keyframes zone-fade { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; } }
.zone-intro { display:flex; align-items:flex-start; gap:14px; padding:1rem 1.2rem; border-radius:14px; margin-bottom:18px; }
.zone-intro-t { font-size:1.15rem; color:hsl(var(--foreground)); }
.zone-intro-s { font-size:.82rem; color:hsl(var(--muted-foreground)); line-height:1.5; margin-top:3px; text-wrap:pretty; }
.lbl-badge { margin-left:10px; font-family:var(--font-body); font-weight:600; font-size:.66rem; letter-spacing:.04em; text-transform:none; padding:.12rem .5rem; border-radius:6px;
  color:hsl(var(--primary-foreground)); background:hsl(var(--primary)); vertical-align:middle; }
.gate-pass { border-radius:10px; }
@media (max-width:560px){ .zone-switch{ order:3; width:100%; } .host-head{ flex-wrap:wrap; } }

/* ============================================================
   SHOP MODAL (player handset)
   ============================================================ */
.shopm { position:relative; width:min(560px,100%); max-height:88vh; border-radius:22px; overflow:hidden; }
.shopm-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.4) saturate(.9); }
.shopm-inner { position:relative; z-index:2; display:flex; flex-direction:column; max-height:88vh;
  background: linear-gradient(180deg, hsl(var(--background)/.82), hsl(var(--background)/.94)); }
.shopm-head { display:flex; align-items:center; gap:12px; padding:1.2rem 1.3rem .9rem; border-bottom:1px solid hsl(var(--border)/.5); }
.shopm-head h3 { font-size:1.4rem; line-height:1; letter-spacing:.06em; }
.shopm-sub { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-top:4px; }
.shopm-purse { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:.34rem .7rem; color:hsl(var(--primary)); font-family:var(--font-display); font-weight:700; }
.shopm-grid { padding:1rem 1.3rem; overflow-y:auto; display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:10px; }
.shopm-card { border-radius:14px; padding:.6rem; display:flex; flex-direction:column; gap:.45rem; }
.shopm-card.incart { box-shadow:inset 0 0 0 1.5px hsl(var(--primary)/.6); }
.shopm-card-main { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; background:none; border:none; color:inherit; text-align:center; }
.shopm-ico { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; color:hsl(var(--foreground)/.9);
  background: radial-gradient(circle at 50% 35%, hsl(38 28% 20%), hsl(24 20% 9%)); box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.shopm-nm { font-family:var(--font-display); font-weight:600; font-size:.78rem; line-height:1.15; color:hsl(var(--foreground)); text-wrap:balance; }
.shopm-reqs { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; }
.shopm-buy { display:flex; align-items:center; gap:6px; margin-top:auto; }
.shopm-cost { display:inline-flex; align-items:center; gap:3px; color:hsl(var(--primary)); font-family:var(--font-display); font-weight:700; font-size:.78rem; }
.shopm-incart { font-size:.66rem; color:hsl(var(--primary)); }
.shopm-add { margin-left:auto; padding:.3rem .55rem; border-radius:8px; font-size:.68rem; font-weight:600; cursor:pointer;
  color:hsl(var(--primary-foreground)); background:hsl(var(--primary)); border:none; }
.shopm-add:hover { filter:brightness(1.1); }
.shopm-add:disabled { background:hsl(var(--border)); color:hsl(var(--muted-foreground)); cursor:not-allowed; }
.shopm-cart { border-top:1px solid hsl(var(--border)/.5); padding:.9rem 1.3rem 1.1rem; background:hsl(var(--background)/.5); }
.shopm-cart-head { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.06em; color:hsl(var(--foreground)/.9); }
.shopm-cart-head svg { vertical-align:-2px; margin-right:4px; }
.shopm-cart-total { color:hsl(var(--primary)); }
.shopm-cart-list { max-height:120px; overflow-y:auto; margin:.6rem 0; display:flex; flex-direction:column; gap:5px; }
.shopm-cart-row { display:flex; align-items:center; gap:8px; font-size:.76rem; color:hsl(var(--foreground)/.85); }
.shopm-cart-row .ccn { flex:1; }
.shopm-cart-row .ccp { display:inline-flex; align-items:center; gap:3px; color:hsl(var(--primary)); }
.shopm-cart-x { background:none; border:none; color:hsl(var(--muted-foreground)); cursor:pointer; font-size:.9rem; padding:0 2px; }
.shopm-cart-x:hover { color:hsl(var(--damage)); }
.shopm-cart-actions { display:flex; gap:8px; align-items:center; margin-top:.5rem; }
.shopm-request { margin-left:auto; padding:.6rem 1rem; border-radius:11px; font-family:var(--font-display); font-weight:600; letter-spacing:.05em; cursor:pointer;
  color:hsl(var(--primary-foreground)); background:linear-gradient(180deg, hsl(45 95% 62%), hsl(38 88% 50%)); border:none; box-shadow:0 6px 18px hsl(var(--primary)/.3); }
.shopm-request:disabled { background:hsl(var(--border)); color:hsl(var(--muted-foreground)); cursor:not-allowed; box-shadow:none; }
.shopm-pending { margin-top:.7rem; }
.shopm-pending-row { display:flex; align-items:center; gap:8px; font-size:.72rem; color:hsl(var(--primary)); }
.sp-dot { width:7px; height:7px; border-radius:99px; background:hsl(var(--primary)); animation: pulse-text 1.2s ease-in-out infinite; }

/* ============================================================
   LEVEL-UP — main screen celebration + player handset
   ============================================================ */
.levelup-main { position:absolute; inset:0; z-index:6000; display:grid; place-items:center;
  background: radial-gradient(ellipse at 50% 45%, hsl(38 60% 20% / .6), hsl(var(--background)/.92) 70%); }
.levelup-burst { position:absolute; width:60vmin; height:60vmin; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, hsl(45 100% 92% / .85), transparent 60%); animation: gate-burst 2.4s ease-out forwards; }
.levelup-card { position:relative; text-align:center; padding:2rem; }
.lu-eyebrow { display:inline-flex; align-items:center; gap:7px; color:hsl(var(--primary)); letter-spacing:.28em; text-transform:uppercase; font-size:.84rem; }
.lu-name { font-size:clamp(2.4rem,6vw,4.4rem); color:hsl(var(--foreground)); line-height:1; margin-top:.4rem; }
.lu-level { font-size:clamp(1.2rem,3vw,2rem); color:hsl(var(--foreground)/.8); margin-top:.3rem; font-family:var(--font-body); letter-spacing:.04em; }
.lu-level .gold, .gold { color:hsl(var(--primary)); }
.lu-rewards { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:1.6rem; }
.lu-reward { display:inline-flex; align-items:center; gap:9px; padding:.7rem 1.1rem; border-radius:13px;
  font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:hsl(var(--foreground));
  background:hsl(var(--primary)/.14); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.4); }
.lu-reward svg { color:hsl(var(--primary)); }

.plevelup-bg { position:absolute; inset:0; z-index:6000; display:grid; place-items:center; overflow:hidden;
  background: radial-gradient(ellipse at 50% 40%, hsl(38 60% 18% / .7), hsl(var(--background)/.95) 70%); }
.plevelup { position:relative; text-align:center; padding:2rem 1.6rem; width:min(380px,90vw); }
.plu-burst { position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); width:80vmin; height:80vmin; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, hsl(45 100% 90% / .7), transparent 60%); animation: gate-burst 2.2s ease-out forwards; }
.plu-eyebrow { position:relative; display:inline-flex; align-items:center; gap:6px; color:hsl(var(--primary)); letter-spacing:.24em; text-transform:uppercase; font-size:.74rem; }
.plu-level { position:relative; font-size:3rem; line-height:1; margin-top:.3rem; }
.plu-rewards { position:relative; display:flex; flex-direction:column; gap:8px; margin-top:1.3rem; }
.plu-reward { display:inline-flex; align-items:center; gap:9px; justify-content:center; padding:.6rem .9rem; border-radius:12px;
  font-family:var(--font-display); font-weight:600; color:hsl(var(--foreground));
  background:hsl(var(--primary)/.13); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.38); }
.plu-reward svg { color:hsl(var(--primary)); }
.plu-go { position:relative; margin-top:1.5rem; padding:.7rem 1.4rem; border-radius:12px; cursor:pointer; border:none;
  font-family:var(--font-display); font-weight:600; letter-spacing:.06em; color:hsl(var(--primary-foreground));
  background:linear-gradient(180deg, hsl(45 95% 62%), hsl(38 88% 50%)); box-shadow:0 6px 20px hsl(var(--primary)/.4); }

/* ============================================================
   HOST — level badge, rest/XP modal, reward palette, buy requests,
   shop forge, battle-library spawn grid
   ============================================================ */
.lvl-badge { display:inline-flex; align-items:center; gap:3px; font-family:var(--font-display); font-weight:600; font-size:.62rem;
  padding:.16rem .42rem; border-radius:6px; color:hsl(var(--primary)); background:hsl(var(--primary)/.12); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.32); }

.xpmodal { position:relative; width:min(480px,100%); max-height:88vh; overflow-y:auto; border-radius:20px; padding:1.6rem 1.5rem; }
.xpm-head { display:flex; align-items:center; gap:13px; margin-bottom:.5rem; }
.xpm-name { font-size:1.5rem; line-height:1; }
.xpm-sub { font-size:.74rem; color:hsl(var(--muted-foreground)); margin-top:4px; letter-spacing:.04em; }
.xpm-preview { margin-top:.7rem; font-size:.84rem; }
.xpm-check { display:flex; align-items:center; gap:8px; margin-top:1rem; font-size:.82rem; color:hsl(var(--foreground)/.85); cursor:pointer; }
.xpm-check input { width:16px; height:16px; accent-color:hsl(var(--primary)); }
.reward-palette { display:flex; flex-wrap:wrap; gap:6px; max-height:180px; overflow-y:auto; margin-top:.5rem; padding:2px; }
.reward-chip { display:inline-flex; align-items:center; gap:5px; padding:.34rem .55rem; border-radius:9px; cursor:pointer; font-size:.72rem;
  color:hsl(var(--foreground)/.85); background:hsl(var(--background)/.5); box-shadow:inset 0 0 0 1px hsl(var(--border)); border:none; }
.reward-chip svg { color:hsl(var(--muted-foreground)); }
.reward-chip.on { background:hsl(var(--primary)/.18); color:hsl(var(--primary)); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.5); }
.reward-chip.on svg { color:hsl(var(--primary)); }
.reward-chip.type-weapon { box-shadow:inset 0 0 0 1px hsl(var(--primary)/.25); }

/* buy request (host) */
.buyreq { margin-top:.7rem; border-radius:12px; padding:.7rem .8rem; background:hsl(var(--primary)/.07); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.28); }
.buyreq-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.buyreq-title { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:.82rem; color:hsl(var(--foreground)); }
.buyreq-afford { font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; padding:.1rem .4rem; border-radius:5px; }
.buyreq-afford.ok { color:hsl(var(--heal)); background:hsl(var(--heal)/.14); }
.buyreq-afford.no { color:hsl(0 70% 66%); background:hsl(var(--damage)/.14); }
.buyreq-items { display:flex; flex-wrap:wrap; gap:5px; margin:.5rem 0; }
.buyreq-item { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; color:hsl(var(--foreground)/.85); background:hsl(var(--background)/.5); padding:.16rem .42rem; border-radius:6px; }
.buyreq-item svg { color:hsl(var(--primary)); }
.buyreq-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* shop forge (host) */
.sf-bg-thumb { width:34px; height:24px; border-radius:5px; background-size:cover; background-position:center; box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.sf-suggest { display:flex; flex-wrap:wrap; gap:6px; margin:.5rem 0 .2rem; padding:.6rem; border-radius:10px; background:hsl(var(--background)/.4); }
.sf-sugg-chip { display:inline-flex; align-items:center; gap:5px; padding:.3rem .5rem; border-radius:8px; cursor:pointer; font-size:.7rem;
  color:hsl(var(--foreground)/.85); background:hsl(var(--surface)); box-shadow:inset 0 0 0 1px hsl(var(--border)); border:none; }
.sf-sugg-chip svg { color:hsl(var(--primary)); }
.sf-sugg-chip:hover { filter:brightness(1.2); }
.sf-sugg-chip.have, .sf-sugg-chip:disabled { opacity:.4; cursor:default; }
.sf-items { display:flex; flex-direction:column; gap:8px; margin-top:.4rem; }
.sfi { border-radius:11px; padding:.6rem; }
.sfi-top { display:flex; align-items:center; gap:7px; }
.sfi-ico { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:hsl(var(--primary)); background:hsl(var(--background)/.5); box-shadow:inset 0 0 0 1px hsl(var(--border)); flex:0 0 auto; }
.sfi-name { flex:1; min-width:60px; }
.sfi-type { width:74px; }
.sfi-cost { display:inline-flex; align-items:center; gap:3px; color:hsl(var(--primary)); }
.sfi-x { background:none; border:none; color:hsl(var(--muted-foreground)); cursor:pointer; font-size:1.1rem; line-height:1; padding:0 3px; }
.sfi-x:hover { color:hsl(var(--damage)); }
.sfi-row2 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:.5rem; }
.sfi-details { margin-top:.5rem; }
.sfi-details textarea { width:100%; resize:vertical; }
.req-editor { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.req-editor .ctrl-label { width:auto; margin:0; }
.req-edit-row { display:inline-flex; align-items:center; gap:3px; }
.req-del { background:none; border:none; color:hsl(var(--muted-foreground)); cursor:pointer; font-size:.95rem; line-height:1; }
.req-del:hover { color:hsl(var(--damage)); }

/* battle spawn-from-library grid */
.spawn-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(74px,1fr)); gap:8px; margin-top:.4rem; }
.spawn-tile { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:.4rem; border-radius:10px; cursor:pointer;
  color:hsl(var(--foreground)/.85); background:hsl(var(--background)/.5); box-shadow:inset 0 0 0 1px hsl(var(--border)); border:none; }
.spawn-tile:hover { filter:brightness(1.2); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.5); }
.spawn-tile img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:7px; }
.spawn-noimg { width:100%; aspect-ratio:1; display:grid; place-items:center; border-radius:7px; background:hsl(24 20% 9%); color:hsl(var(--muted-foreground)); }
.spawn-nm { font-size:.62rem; line-height:1.1; text-align:center; text-wrap:balance; }
.spawn-tile.boss { box-shadow:inset 0 0 0 1px hsl(var(--damage)/.4); }
.spawn-boss-tag { position:absolute; top:3px; right:3px; font-size:.5rem; font-weight:700; letter-spacing:.06em; color:hsl(0 70% 66%); background:hsl(var(--damage)/.2); padding:.05rem .2rem; border-radius:3px; }

/* battle enemy art (uploaded image fills portrait) */
.bf-art { width:100%; height:100%; object-fit:cover; }
.bf-intel-desc { font-size:.7rem; line-height:1.4; color:hsl(var(--foreground)/.85); padding:2px; text-wrap:pretty; }

/* ============================================================
   MOBILE FIT — stats grid + new shop/inventory on narrow screens
   ============================================================ */
@media (max-width:430px){
  .stats-grid { grid-template-columns: repeat(4,1fr); gap:6px; }
  .stat-tile { padding:.45rem .25rem; border-radius:9px; }
  .stat-tile .lbl { font-size:.58rem; letter-spacing:.08em; }
  .stat-tile .val { font-size:1.05rem; }
  .shopm-grid { grid-template-columns: repeat(2,1fr); }
  .inv-grid { grid-template-columns: repeat(3,1fr); }
  .lu-name { font-size:2.2rem; }
}

/* ============================================================
   SHOP — stat-locked items (can't wield → can't buy)
   ============================================================ */
.shopm-card.locked { opacity:.92; }
.shopm-card.locked .shopm-ico { filter:grayscale(.5) brightness(.7); }
.shopm-lock { position:absolute; top:-5px; right:-5px; width:18px; height:18px; border-radius:99px;
  display:grid; place-items:center; color:hsl(20 16% 8%); background:hsl(var(--damage)); box-shadow:0 1px 5px rgba(0,0,0,.6); }
.shopm-ico { position:relative; }
.shopm-add:disabled { background:hsl(var(--border)); color:hsl(var(--muted-foreground)); cursor:not-allowed; }
.req-chip.sm.met { background:hsl(var(--heal)/.14); color:hsl(var(--heal)); box-shadow:inset 0 0 0 1px hsl(var(--heal)/.4); }
.req-chip.sm.unmet { background:hsl(var(--damage)/.14); color:hsl(0 72% 68%); box-shadow:inset 0 0 0 1px hsl(var(--damage)/.4); }

/* ============================================================
   TCARD — polished playing-card system (crisp dark border, rounded
   edges, holographic shimmer + gloss sweep, embedded value)
   Shared by the reveal card, shuffle-intro cards, reshuffle cards.
   ============================================================ */
.tcard { position:relative; overflow:hidden; isolation:isolate;
  border:2.5px solid hsl(22 28% 7%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.16),
    inset 0 -18px 30px rgba(0,0,0,.45),
    inset 0 12px 22px rgba(255,255,255,.06),
    0 14px 34px rgba(0,0,0,.6);
  background-blend-mode:screen, normal;
}
/* crisp single-color sheen — tinted per tier, tracks the pointer.
   (No rainbow: each tier shines in ONE clean colour.)               */
.tcard { --shine: 40 95% 70%; }              /* default = gold */
.tcard.tier-common  { --shine: 205 90% 68%; }   /* blue  (+1) */
.tcard.tier-rare    { --shine: 275 85% 72%; }   /* violet(+2) */
.tcard.tier-premium { --shine: 42 95% 66%; }    /* gold  (+5) */
.tcard-holo { position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  opacity:calc(.32 + var(--active,0) * .4);
  background:linear-gradient(115deg,
    transparent 32%, hsl(var(--shine) / .15) 44%, hsl(var(--shine) / .8) 50%, hsl(var(--shine) / .15) 56%, transparent 68%);
  background-size:240% 240%;
  background-position: calc(var(--px,50%) * 1.6 - 30%) calc(var(--py,50%) * 1.6 - 30%);
  transition: opacity .3s; }
/* fine brushed-metal streaks in the same hue — subtle, crisp */
.tcard-foil { position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
  opacity:calc(.06 + var(--active,0) * .18);
  background:repeating-linear-gradient(112deg, transparent 0 6px, hsl(var(--shine) / .5) 6px 7px, transparent 7px 13px);
  background-position: calc(var(--px,50%) * .5) 0;
  transition: opacity .3s; }
/* crisp specular glare that tracks the light */
.tcard-glare { position:absolute; inset:0; z-index:5; pointer-events:none; mix-blend-mode:screen;
  opacity:calc(.35 + var(--active,0) * .5);
  background: radial-gradient(circle at var(--px,50%) var(--py,50%),
    rgba(255,255,255,.95), hsl(var(--shine) / .35) 16%, transparent 40%); }
/* idle shimmer for non-interactive cards (shuffle / reshuffle) */
.di-card .tcard-holo, .rsf-card .tcard-holo { animation: holo-idle 3.6s ease-in-out infinite; }
@keyframes holo-idle { 0%,100%{ background-position:130% 50%; } 50%{ background-position:-30% 50%; } }
/* corner index pips */
.tcard-corner { position:absolute; z-index:6; font-family:var(--font-display); font-weight:700; font-size:.92rem;
  line-height:1; letter-spacing:.01em; opacity:.95; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.tcard-corner.tl { top:8px; left:9px; }
.tcard-corner.br { bottom:8px; right:9px; transform:rotate(180deg); }
/* center suit/glyph */
.tcard-pip { position:relative; z-index:3; font-size:1.5rem; line-height:1; opacity:.85; margin-bottom:-2px;
  text-shadow:0 0 16px currentColor; }

/* ---- play-reveal card (the hero moment) — 3D tilt rig ---- */
.crf-tilt { perspective:900px; z-index:3; }
.crf-card { gap:4px; border-radius:20px; transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;
  transition: transform .12s ease-out, box-shadow .2s; will-change:transform; }
.crf-card .crf-val { position:relative; z-index:6; transform:translateZ(22px); }
.crf-card .tcard-pip { transform:translateZ(14px); }
.crf-card .crf-eyebrow, .crf-card .crf-tier { position:relative; z-index:6; }
.crf-hint { position:absolute; bottom:9vh; left:0; right:0; text-align:center; z-index:4;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(var(--foreground)/.5); }
.crf-flare { position:absolute; width:520px; height:520px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, hsl(45 90% 70% / .22), transparent 62%); animation: crf-flare 2.6s ease-out forwards; }
@keyframes crf-flare { 0%{ transform:scale(.4); opacity:0; } 30%{ opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
.crf-card.tier-common .tcard-corner, .crf-card.tier-common .tcard-pip { color:#bfe0ff; }
.crf-card.tier-rare   .tcard-corner, .crf-card.tier-rare   .tcard-pip { color:#e0bcff; }
.crf-card.tier-premium .tcard-corner, .crf-card.tier-premium .tcard-pip { color:#ffe39a; }
.crf-card.tier-premium .tcard-holo { opacity:.75; }
.crf-card { animation: crf-deal .6s cubic-bezier(.2,1.1,.3,1); }
@keyframes crf-deal { 0%{ transform:rotateY(180deg) rotate(-12deg) scale(.7); opacity:0; }
  60%{ opacity:1; } 100%{ transform:rotateY(0) rotate(0) scale(1); opacity:1; } }

/* ============================================================
   SHUFFLE INTRO — proper riffle: stack → split → riffle → fan → gather
   ============================================================ */
.di-fan { perspective:1100px; }
.di-card { border-radius:13px; gap:2px;
  transition: transform .62s cubic-bezier(.34,1.1,.4,1), opacity .4s; will-change:transform;
  transform: translate(0,0); }
.di-card .di-card-val, .di-card .tcard-corner, .di-card .di-card-tag { position:relative; z-index:4; transition:opacity .3s; }
.di-card .tcard-corner { color:inherit; }
.di-card.tier-common .tcard-corner { color:#bfe0ff; }
.di-card.tier-rare   .tcard-corner { color:#e0bcff; }
.di-card.tier-premium .tcard-corner { color:#ffe39a; }

/* stack — neat pile, slight skew */
.di-fan.phase-stack .di-card {
  transform: translate(calc(var(--n) * 1.4px), calc(var(--n) * -1.4px)) rotate(calc(var(--n) * -1deg)); }
.di-fan.phase-stack .di-card .di-card-val, .di-fan.phase-stack .di-card .di-card-tag { opacity:0; }
/* split — two halves part left & right */
.di-fan.phase-split .di-card {
  transform: translateX(calc(var(--side) * 116px)) translateY(calc(var(--ord) * 9px - 9px)) rotate(calc(var(--side) * 7deg)); }
.di-fan.phase-split .di-card .di-card-val, .di-fan.phase-split .di-card .di-card-tag { opacity:0; }
/* riffle — interleave back to center with a flick */
.di-fan.phase-riffle .di-card {
  transform: translateX(calc((var(--n) - 2.5) * 5px)) translateY(calc(var(--side) * -4px)) rotate(calc(var(--side) * 9deg)); }
.di-fan.phase-riffle .di-card .di-card-val, .di-fan.phase-riffle .di-card .di-card-tag { opacity:0; }
/* riffle2 — opposite flick, snap tighter */
.di-fan.phase-riffle2 .di-card {
  transform: translateX(calc((var(--n) - 2.5) * 2px)) rotate(calc(var(--side) * -6deg)); }
.di-fan.phase-riffle2 .di-card .di-card-val, .di-fan.phase-riffle2 .di-card .di-card-tag { opacity:0; }
/* fan — spread face-up to reveal every value */
.di-fan.phase-fan .di-card {
  transform: translateX(calc((var(--n) - (var(--total) - 1)/2) * 92px)) translateY(calc(var(--n) * 0px)) rotate(calc((var(--n) - (var(--total) - 1)/2) * 6deg)); }
.di-fan.phase-fan .di-card .di-card-val, .di-fan.phase-fan .di-card .di-card-tag { opacity:1; }
/* gather — collapse into the sealed deck */
.di-fan.phase-gather .di-card {
  transform: translate(calc(var(--n) * 1.5px), calc(var(--n) * -1.5px)) rotate(calc(var(--n) * -1.2deg)); }
.di-fan.phase-gather .di-card .di-card-val, .di-fan.phase-gather .di-card .di-card-tag { opacity:0; }

/* ============================================================
   RESHUFFLE FLOURISH — cards fly back into the deck on rest/sleep
   ============================================================ */
.reshuffle-fx { position:fixed; inset:0; z-index:4500; display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; background:radial-gradient(circle at 50% 55%, hsl(28 30% 10% / .82), hsl(20 16% 5% / .92));
  animation: rsf-bg .35s ease-out; }
@keyframes rsf-bg { from{ opacity:0; } to{ opacity:1; } }
.reshuffle-cap { font-family:var(--font-display); font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:hsl(var(--primary)); font-size:.9rem; margin-bottom:18px; text-shadow:0 0 22px hsl(var(--primary)/.5);
  animation: rsf-cap 1.6s ease-out; }
@keyframes rsf-cap { 0%{ opacity:0; transform:translateY(8px);} 20%,75%{ opacity:1; transform:none;} 100%{ opacity:0; } }
.reshuffle-stage { position:relative; width:240px; height:170px; }
.rsf-card { position:absolute; left:50%; top:50%; width:74px; height:104px; border-radius:12px; margin:-52px 0 0 -37px;
  display:flex; align-items:center; justify-content:center;
  --ang: calc((var(--n) - (var(--total) - 1)/2) * 58deg);
  --dist: 150px;
  transform: translate(calc(cos(var(--ang)) * var(--dist)), calc(sin(var(--ang)) * var(--dist) - 30px)) rotate(calc(var(--ang) * .25)) scale(.96);
  opacity:0; animation: rsf-fly 1.5s cubic-bezier(.5,.1,.2,1) forwards; animation-delay: calc(var(--n) * 70ms); }
.rsf-card .di-card-val { position:relative; z-index:4; font-size:1.5rem; font-weight:700; }
.rsf-card.tier-common .di-card-val{ color:#bfe0ff; } .rsf-card.tier-rare .di-card-val{ color:#e0bcff; } .rsf-card.tier-premium .di-card-val{ color:#ffe39a; }
@keyframes rsf-fly {
  0%   { opacity:0; }
  18%  { opacity:1; }
  100% { opacity:0; transform: translate(0, -8px) rotate(calc(var(--n) * -2deg)) scale(.7); }
}
.rsf-deck { position:absolute; left:50%; top:50%; width:74px; height:104px; margin:-44px 0 0 -37px; border-radius:12px;
  display:grid; place-items:center; background:linear-gradient(158deg, hsl(38 44% 28%), hsl(38 30% 13%));
  border:2.5px solid hsl(22 28% 7%); box-shadow:inset 0 0 0 1.5px hsl(var(--primary)/.5), 0 12px 30px rgba(0,0,0,.6);
  opacity:0; animation: rsf-deck 1.7s ease-out forwards; animation-delay:.55s; }
.rsf-deck span { font-size:2rem; font-weight:700; color:hsl(var(--foreground)); text-shadow:0 2px 10px rgba(0,0,0,.8); }
@keyframes rsf-deck { 0%{ opacity:0; transform:scale(.8);} 30%{ opacity:1; transform:scale(1.06);} 70%{ opacity:1; transform:scale(1);} 100%{ opacity:0; } }

/* fallback for browsers without trig in calc() — keep cards near center */
@supports not (width: calc(cos(1deg) * 1px)) {
  .rsf-card { transform: translate(calc((var(--n) - 2.5) * 46px), -20px) rotate(calc((var(--n) - 2.5) * 12deg)); }
}

/* ============================================================
   DECK STACK (action dock) — holographic top card
   ============================================================ */
.deck-stack { perspective:600px; }
.deck-stack::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:12px; overflow:hidden;
  background:linear-gradient(118deg, transparent 36%, rgba(255,255,255,.4) 48%, transparent 60%);
  background-size:260% 260%; mix-blend-mode:screen; animation: tcard-sheen 4.5s ease-in-out infinite; }
.deck-stack .deck-back { border:2px solid hsl(22 28% 7%); }
.deck-stack .deck-top-val { z-index:3; text-shadow:0 2px 8px rgba(0,0,0,.7), 0 0 14px currentColor; }

/* ============================================================
   HEALTH BAR — VFX: liquid sheen, gloss sweep, ticks, heartbeat
   ============================================================ */
.hp-frame { padding:5px; border-radius:15px; }
.hp-track { position:relative; height:42px; border-radius:11px; overflow:hidden;
  background:
    linear-gradient(180deg, hsl(20 24% 3% / .95), hsl(20 18% 7% / .9));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05); }
.hp-ticks { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.5px), rgba(0,0,0,.55) calc(10% - 1.5px) 10%); }
.hp-fill { position:absolute; inset:0 auto 0 0; height:100%; border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg, hsl(150 62% 52%), hsl(150 70% 38%) 55%, hsl(155 72% 28%));
  box-shadow: 0 0 22px hsl(var(--heal)/.45), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 14px rgba(0,0,0,.35);
  transition: width .55s cubic-bezier(.3,1,.3,1), background .5s, box-shadow .5s; }
.hp-fill-sheen { position:absolute; inset:0; background:
  radial-gradient(120% 70% at 30% 0%, rgba(255,255,255,.5), transparent 60%); mix-blend-mode:screen; }
.hp-fill-gloss { position:absolute; top:0; left:0; width:42%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5) 50%, transparent);
  mix-blend-mode:screen; animation: hp-gloss 3.2s ease-in-out infinite; }
@keyframes hp-gloss { 0%{ transform:translateX(-120%);} 55%,100%{ transform:translateX(420%);} }
.hp-fill-edge { position:absolute; top:0; right:0; width:3px; height:100%; background:rgba(255,255,255,.75);
  box-shadow:0 0 12px rgba(255,255,255,.7); }
.hp-cap { position:absolute; left:14px; top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.66rem;
  color:hsl(var(--foreground)/.92); text-shadow:0 1px 5px rgba(0,0,0,.9); pointer-events:none; }
.hp-heart { color:hsl(150 70% 70%); font-size:.9rem; filter:drop-shadow(0 0 5px hsl(var(--heal)/.7)); }
.hp-num { position:absolute; right:14px; top:50%; bottom:auto; left:auto; transform:translateY(-50%); z-index:3;
  display:flex; align-items:baseline; gap:3px; place-items:unset; line-height:1;
  font-family:var(--font-display); font-weight:700; font-size:1.4rem; font-variant-numeric:tabular-nums;
  color:hsl(var(--foreground)); text-shadow:0 1px 6px rgba(0,0,0,.9); }
.hp-num .hp-of { font-size:.78rem; font-weight:500; color:hsl(var(--muted-foreground)); }
/* low / critical states */
.hp-frame.is-low .hp-fill { background:linear-gradient(180deg, hsl(8 80% 52%), hsl(0 78% 42%) 55%, hsl(0 80% 30%));
  box-shadow:0 0 24px hsl(var(--damage)/.55), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.4); }
.hp-frame.is-low .hp-heart { color:hsl(2 85% 70%); filter:drop-shadow(0 0 6px hsl(var(--damage)/.8)); }
.hp-frame.is-crit .hp-heart { animation: hp-beat 1s ease-in-out infinite; }
.hp-frame.is-crit .hp-track { animation: hp-crit 1.4s ease-in-out infinite; }
@keyframes hp-beat { 0%,100%{ transform:scale(1);} 14%{ transform:scale(1.35);} 28%{ transform:scale(1);} 42%{ transform:scale(1.25);} }
@keyframes hp-crit { 0%,100%{ box-shadow: inset 0 2px 8px rgba(0,0,0,.7), inset 0 0 0 1px hsl(var(--damage)/.3);} 50%{ box-shadow: inset 0 2px 8px rgba(0,0,0,.7), inset 0 0 0 2px hsl(var(--damage)/.7), 0 0 18px hsl(var(--damage)/.4);} }
@media (min-width:900px){ .hp-track{ height:50px; } .hp-num{ font-size:1.7rem; } }

/* ============================================================
   PLAYER BACKGROUND — living ember/aurora shader
   ============================================================ */
.pscene-bg { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% -10%, hsl(34 50% 14% / .9), transparent 55%),
    radial-gradient(110% 75% at 84% 8%, hsl(20 55% 12% / .8), transparent 52%),
    radial-gradient(140% 100% at 50% 120%, hsl(28 45% 11% / .9), transparent 60%),
    linear-gradient(180deg, hsl(24 20% 8%), hsl(20 16% 5%)); }
.pscene-bg::before { content:''; position:absolute; inset:-20%; pointer-events:none; opacity:.5; mix-blend-mode:screen;
  background:
    radial-gradient(38% 50% at 30% 35%, hsl(38 80% 45% / .22), transparent 60%),
    radial-gradient(34% 46% at 72% 60%, hsl(14 75% 42% / .2), transparent 62%),
    radial-gradient(30% 40% at 55% 20%, hsl(45 85% 50% / .16), transparent 60%);
  background-size:200% 200%, 220% 220%, 180% 180%;
  animation: pscene-drift 26s ease-in-out infinite; filter:blur(8px); }
@keyframes pscene-drift {
  0%,100%{ background-position: 0% 50%, 100% 50%, 50% 0%; }
  33%    { background-position: 40% 30%, 60% 70%, 70% 40%; }
  66%    { background-position: 70% 60%, 30% 40%, 30% 70%; }
}
.pscene-bg::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px); background-size:4px 4px; }
.player-screen.is-low .pscene-bg::before { animation-duration:9s;
  background:
    radial-gradient(45% 60% at 50% -8%, hsl(2 75% 30% / .5), transparent 58%),
    radial-gradient(40% 55% at 25% 70%, hsl(0 70% 26% / .35), transparent 60%),
    radial-gradient(40% 55% at 78% 65%, hsl(8 72% 28% / .35), transparent 60%);
  background-size:200% 200%, 220% 220%, 200% 200%; }

/* ============================================================
   PLAYER IMMERSION — slow drifting god-rays from above
   ============================================================ */
.player-screen::before { content:''; position:fixed; inset:-25% -25% 40%; z-index:1; pointer-events:none;
  opacity:.085; mix-blend-mode:screen; transform-origin:50% -10%;
  background: repeating-conic-gradient(from 0deg at 50% -8%,
    rgba(255,224,160,.6) 0deg 3.5deg, transparent 3.5deg 11deg);
  animation: god-rays 48s linear infinite; }
@keyframes god-rays { 0%{ transform:rotate(-6deg);} 50%{ transform:rotate(6deg);} 100%{ transform:rotate(-6deg);} }
.player-screen.is-low::before { background: repeating-conic-gradient(from 0deg at 50% -8%,
    hsl(2 80% 50% / .5) 0deg 3.5deg, transparent 3.5deg 11deg); opacity:.1; }

/* ============================================================
   WOODEN SHOP — carved-plank panels for Main-screen storefront
   and the player's handset shop. Brass accents, deep grain.
   ============================================================ */
/* shared wood surfaces */
.shopx-wrap, .shopm {
  --wood-a: hsl(28 42% 26%); --wood-b: hsl(24 40% 19%); --wood-c: hsl(22 38% 14%);
  --brass: hsl(40 60% 55%);
}
/* Main-screen storefront frame */
.shopx-wrap {
  border:none; border-radius:18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 0 0 3px hsl(28 35% 12%), inset 0 0 0 6px var(--brass), inset 0 0 0 8px hsl(28 35% 12%);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,.018) 2px 4px),
    repeating-linear-gradient(0deg, transparent 0 96px, rgba(0,0,0,.4) 96px 100px),
    linear-gradient(180deg, var(--wood-a), var(--wood-b)); }
/* when a moderator sets a backdrop, keep wood as the frame, image inset */
.shopx-bg { inset:10px; border-radius:10px; filter:saturate(.95) brightness(.55); box-shadow:inset 0 0 0 2px hsl(28 35% 10%); }
.shopx-scrim { inset:10px; border-radius:10px;
  background:
    radial-gradient(ellipse at 50% 0%, hsl(34 45% 18% / .5), transparent 60%),
    linear-gradient(180deg, hsl(24 30% 10% / .72), hsl(22 28% 7% / .9)); }
.shopx-title h2 { color:hsl(40 75% 66%); text-shadow:0 2px 0 hsl(24 40% 10%), 0 0 24px hsl(38 80% 40% / .4); }
.shopx-sub { color:hsl(36 30% 62%); }
/* item slots — recessed wooden cubbies */
.shopx-card { border:none; border-radius:11px;
  background:
    linear-gradient(180deg, hsl(26 34% 17% / .92), hsl(24 32% 12% / .95));
  box-shadow: inset 0 0 0 1px hsl(40 45% 40% / .35), inset 0 2px 10px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4); }
.shopx-card .shopx-ico { background: radial-gradient(circle at 50% 35%, hsl(34 30% 26%), hsl(24 26% 12%));
  box-shadow:inset 0 0 0 1px hsl(40 45% 40% / .4), inset 0 -4px 8px rgba(0,0,0,.5); }
.shopx-name { color:hsl(38 30% 84%); }

/* player handset shop — wooden cabinet */
.shopm { border:none; overflow:hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.7), inset 0 0 0 2px hsl(28 35% 10%), inset 0 0 0 4px var(--brass), inset 0 0 0 6px hsl(28 35% 10%); }
.shopm-inner { background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, rgba(255,255,255,.015) 2px 4px),
    repeating-linear-gradient(0deg, transparent 0 84px, rgba(0,0,0,.4) 84px 88px),
    linear-gradient(180deg, hsl(28 40% 22% / .96), hsl(22 36% 13% / .98)); }
.shopm-bg { filter:brightness(.32) saturate(.85); }
.shopm-head { border-bottom:2px solid hsl(40 50% 40% / .35); background:linear-gradient(180deg, hsl(30 42% 20% / .6), transparent); }
.shopm-head h3 { color:hsl(40 78% 66%); text-shadow:0 2px 0 hsl(24 40% 10%); }
.shopm-card { border:none; border-radius:11px;
  background:linear-gradient(180deg, hsl(26 34% 16% / .94), hsl(24 30% 11% / .96));
  box-shadow: inset 0 0 0 1px hsl(40 45% 40% / .3), inset 0 2px 8px rgba(0,0,0,.5); }
.shopm-card.incart { box-shadow: inset 0 0 0 1.5px var(--brass), inset 0 2px 8px rgba(0,0,0,.5), 0 0 16px hsl(40 60% 45% / .35); }
.shopm-ico { background: radial-gradient(circle at 50% 35%, hsl(34 30% 24%), hsl(24 26% 11%));
  box-shadow:inset 0 0 0 1px hsl(40 45% 40% / .35); }
.shopm-add { background:linear-gradient(180deg, hsl(40 65% 52%), hsl(34 60% 40%)); color:hsl(24 40% 10%); box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.shopm-add:hover { filter:brightness(1.08); }
.shopm-cart { background:hsl(24 32% 9% / .7); border-top:2px solid hsl(40 50% 40% / .3); }
.shopm-purse { background:hsl(24 30% 12% / .8); color:hsl(40 75% 64%); box-shadow:inset 0 0 0 1px hsl(40 45% 40% / .4); }
.shopm-request { background:linear-gradient(180deg, hsl(42 80% 58%), hsl(36 70% 44%)); color:hsl(24 40% 10%); box-shadow:0 6px 18px hsl(38 60% 35% / .4), inset 0 1px 0 rgba(255,255,255,.3); }

/* ============================================================
   DOTA-2-STYLE SHOP (player handset) — dark slate, teal accents,
   gold values. Fixed header + scrolling grid + pinned stash so the
   buy actions are ALWAYS visible.
   ============================================================ */
.d2-bg { background:rgba(4,8,11,.82) !important; backdrop-filter:blur(3px); }
.d2shop { position:relative; width:min(620px,96vw); height:min(660px,90vh); height:min(660px,90dvh); display:flex; flex-direction:column; overflow:hidden;
  border-radius:10px; color:hsl(200 18% 86%);
  --d2-line: 195 38% 30%; --d2-acc: 188 70% 52%; --d2-gold: 44 92% 60%;
  background:linear-gradient(180deg, hsl(205 28% 13%), hsl(206 30% 9%));
  box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px hsl(var(--d2-line) / .6), inset 0 0 0 2px hsl(205 30% 6%); }
.d2shop-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.12; filter:saturate(.6); pointer-events:none; }
/* header */
.d2shop-head { position:relative; z-index:2; display:flex; align-items:center; gap:12px; padding:.8rem 1rem;
  background:linear-gradient(180deg, hsl(204 30% 16%), hsl(205 30% 11%));
  box-shadow:inset 0 -1px 0 hsl(var(--d2-acc) / .35), 0 2px 8px rgba(0,0,0,.4); }
.d2shop-title { display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
.d2shop-glyph { width:38px; height:38px; border-radius:7px; display:grid; place-items:center; color:hsl(var(--d2-acc)); flex:0 0 auto;
  background:linear-gradient(180deg, hsl(200 30% 18%), hsl(205 32% 11%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-acc) / .4); }
.d2shop-head h3 { font-size:1.2rem; letter-spacing:.06em; color:hsl(190 30% 90%); line-height:1; text-transform:uppercase; }
.d2shop-sub { font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:hsl(198 22% 56%); margin-top:3px; }
.d2shop-purse { display:flex; align-items:center; gap:5px; padding:.34rem .7rem; border-radius:6px; color:hsl(var(--d2-gold)); font-family:var(--font-display); font-size:.95rem;
  background:hsl(205 32% 8%); box-shadow:inset 0 0 0 1px hsl(var(--d2-gold) / .35); }
.d2shop-purse b { font-weight:700; }
.d2-gold-lbl { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:hsl(198 18% 52%); }
.d2shop-x { width:30px; height:30px; border-radius:6px; border:none; cursor:pointer; color:hsl(198 20% 70%); font-size:1rem;
  background:hsl(205 30% 14%); box-shadow:inset 0 0 0 1px hsl(var(--d2-line) / .5); }
.d2shop-x:hover { color:#fff; background:hsl(0 55% 38%); }
/* item grid */
.d2shop-grid { position:relative; z-index:2; flex:1; overflow-y:auto; padding:.7rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:7px; align-content:start; }
.d2shop-empty { grid-column:1/-1; text-align:center; color:hsl(198 18% 52%); padding:2rem 0; }
.d2item { position:relative; display:flex; flex-direction:column; }
.d2item-buy { display:flex; flex-direction:column; align-items:stretch; gap:5px; padding:0; border:none; cursor:pointer; background:none; color:inherit; width:100%; }
.d2item-frame { position:relative; aspect-ratio:1/.82; border-radius:6px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(180deg, hsl(202 26% 19%), hsl(205 30% 12%));
  box-shadow:inset 0 0 0 1px hsl(var(--d2-line) / .7), inset 0 2px 10px rgba(0,0,0,.45); transition:box-shadow .15s, transform .1s; }
.d2item-buy:hover:not(:disabled) .d2item-frame { box-shadow:inset 0 0 0 1px hsl(var(--d2-acc)), 0 0 14px hsl(var(--d2-acc) / .3); }
.d2item-buy:active:not(:disabled) .d2item-frame { transform:translateY(1px); }
.d2item-ico { color:hsl(190 28% 80%); }
.d2item.type-weapon .d2item-ico { color:hsl(18 75% 64%); }
.d2item.type-magic .d2item-ico { color:hsl(265 75% 76%); }
.d2item-cost { position:absolute; left:4px; bottom:4px; display:flex; align-items:center; gap:3px; padding:.1rem .34rem; border-radius:4px;
  font-family:var(--font-display); font-weight:700; font-size:.74rem; color:hsl(var(--d2-gold)); background:hsl(205 40% 6% / .9); box-shadow:inset 0 0 0 1px hsl(var(--d2-gold) / .35); }
.d2item-qty { position:absolute; right:4px; top:4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; display:grid; place-items:center;
  font-size:.66rem; font-weight:700; color:hsl(205 40% 8%); background:hsl(var(--d2-acc)); box-shadow:0 1px 4px rgba(0,0,0,.5); }
.d2item-status { position:absolute; right:4px; top:4px; padding:.08rem .32rem; border-radius:4px; font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:hsl(0 60% 78%); background:hsl(0 50% 24% / .92); box-shadow:inset 0 0 0 1px hsl(0 60% 50% / .5); }
.d2item-status.warn { color:hsl(40 80% 78%); background:hsl(38 50% 24% / .92); box-shadow:inset 0 0 0 1px hsl(40 70% 50% / .5); }
.d2item.understat:not(.blocked) .d2item-frame { box-shadow:inset 0 0 0 1px hsl(40 60% 45% / .5), inset 0 2px 10px rgba(0,0,0,.45); }
.d2item.blocked .d2item-frame { filter:grayscale(.6) brightness(.7); }
.d2item.blocked .d2item-status { } .d2item.incart .d2item-frame { box-shadow:inset 0 0 0 1.5px hsl(var(--d2-acc) / .9), 0 0 12px hsl(var(--d2-acc) / .3); }
.d2item-name { font-family:var(--font-display); font-weight:600; font-size:.7rem; line-height:1.15; color:hsl(195 22% 80%); text-align:left; padding:0 1px; text-wrap:balance; }
.d2item-reqs { display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; }
.d2item-info { position:absolute; right:3px; top:3px; width:18px; height:18px; border-radius:50%; border:none; cursor:pointer; z-index:3;
  font-family:var(--font-display); font-weight:700; font-size:.7rem; font-style:italic; color:hsl(198 25% 75%);
  background:hsl(205 40% 8% / .85); box-shadow:inset 0 0 0 1px hsl(var(--d2-line) / .7); }
.d2item-info:hover { color:#fff; background:hsl(var(--d2-acc) / .8); }
/* pinned stash / cart */
.d2shop-stash { position:relative; z-index:2; padding:.7rem 1rem .9rem; flex:0 0 auto;
  background:linear-gradient(180deg, hsl(205 30% 11%), hsl(206 32% 8%));
  box-shadow:inset 0 1px 0 hsl(var(--d2-acc) / .3); }
.d2stash-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.d2stash-title { display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.05em; color:hsl(190 28% 82%); }
.d2stash-title svg { color:hsl(var(--d2-acc)); }
.d2stash-total { display:flex; align-items:center; gap:4px; font-family:var(--font-display); font-weight:700; color:hsl(var(--d2-gold)); font-size:.85rem; }
.d2stash-slots { display:flex; gap:6px; overflow-x:auto; min-height:46px; padding-bottom:2px; }
.d2stash-empty { color:hsl(198 18% 50%); font-size:.72rem; align-self:center; padding:.4rem 0; }
.d2stash-slot { position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:6px; border:none; cursor:pointer; display:grid; place-items:center; color:hsl(190 25% 80%);
  background:linear-gradient(180deg, hsl(202 26% 18%), hsl(205 30% 11%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-acc) / .5); }
.d2stash-slot:hover { box-shadow:inset 0 0 0 1px hsl(0 60% 50%); color:#fff; }
.d2stash-x { position:absolute; right:-3px; top:-3px; width:15px; height:15px; border-radius:50%; display:grid; place-items:center; font-size:.6rem;
  color:#fff; background:hsl(0 55% 40%); opacity:0; transition:opacity .15s; }
.d2stash-slot:hover .d2stash-x { opacity:1; }
.d2stash-actions { display:flex; gap:8px; margin-top:.7rem; }
.d2-btn { padding:.6rem 1rem; border-radius:7px; border:none; cursor:pointer; font-family:var(--font-display); font-weight:600; letter-spacing:.04em; font-size:.82rem; }
.d2-btn.ghost { color:hsl(198 22% 72%); background:hsl(205 28% 16%); box-shadow:inset 0 0 0 1px hsl(var(--d2-line) / .6); }
.d2-btn.buy { flex:1; color:hsl(205 40% 8%); text-transform:uppercase;
  background:linear-gradient(180deg, hsl(var(--d2-acc)), hsl(190 65% 40%)); box-shadow:0 4px 14px hsl(var(--d2-acc) / .3), inset 0 1px 0 rgba(255,255,255,.3); }
.d2-btn.buy:hover:not(:disabled) { filter:brightness(1.1); }
.d2-btn.buy:disabled { background:hsl(205 18% 22%); color:hsl(205 14% 45%); box-shadow:none; cursor:not-allowed; }
.d2shop-pending { margin-top:.6rem; }
.d2pending-row { display:flex; align-items:center; gap:8px; font-size:.72rem; color:hsl(var(--d2-acc)); }
@media (max-width:430px){
  /* phones: 2 columns fit a ~360px modal; 3 forced the cards to overflow & clip */
  .d2shop-grid{ grid-template-columns:repeat(2,1fr); }
  .d2shop-head{ padding:.7rem .8rem; gap:8px; }
  .d2shop-head h3{ font-size:1rem; }
  .d2shop-title{ min-width:0; }
  .d2shop-title > div{ min-width:0; }
  .d2shop-purse{ font-size:.82rem; padding:.3rem .55rem; flex:0 0 auto; }
}

/* ============================================================
   DOTA-2 MAIN-SCREEN STOREFRONT — sits BELOW the party health bars
   and ABOVE the scene name (bottom-left). Prominent price + stats,
   big icons, name above. Max 12 items/page with page dots.
   ============================================================ */
.d2main-wrap { position:absolute; z-index:22;
  top: clamp(118px, 15vh, 168px);          /* clears the party strip */
  bottom: clamp(116px, 13vh, 150px);       /* clears the scene name (bottom-left) */
  left:50%; transform:translateX(-50%); width:min(1180px, 94vw);
  display:flex; overflow:hidden; border-radius:14px; color:hsl(200 18% 86%);
  --d2-line:195 38% 30%; --d2-acc:188 70% 52%; --d2-gold:44 92% 60%;
  background:linear-gradient(180deg, hsl(205 30% 13% / .96), hsl(206 32% 9% / .97));
  box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 0 1px hsl(var(--d2-line)/.6), inset 0 0 0 2px hsl(205 30% 6%);
  animation: d2main-in .4s cubic-bezier(.2,.9,.3,1); }
@keyframes d2main-in { 0%{ opacity:0; transform:translateX(-50%) translateY(10px) scale(.99);} 100%{ opacity:1; } }
.d2main-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.13; filter:saturate(.6); }
.d2main-scrim { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, hsl(190 40% 16% / .35), transparent 60%); }
.d2main-inner { position:relative; z-index:2; display:flex; flex-direction:column; width:100%; padding:1.1rem 1.4rem 0; }
.d2main-head { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-bottom:1rem;
  box-shadow:inset 0 -1px 0 hsl(var(--d2-acc)/.3); margin-bottom:1rem; }
.d2main-title { display:flex; align-items:center; gap:13px; }
.d2main-glyph { width:46px; height:46px; border-radius:9px; display:grid; place-items:center; color:hsl(var(--d2-acc)); flex:0 0 auto;
  background:linear-gradient(180deg, hsl(200 30% 18%), hsl(205 32% 11%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-acc)/.4); }
.d2main-head h2 { font-size:clamp(1.4rem,2.6vw,2.1rem); letter-spacing:.07em; color:hsl(190 36% 90%); line-height:1; text-transform:uppercase; }
.d2main-sub { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:hsl(198 22% 56%); margin-top:5px; }
.d2main-coins { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.d2main-coin { display:flex; align-items:center; gap:6px; padding:.32rem .6rem; border-radius:7px; font-size:.8rem;
  color:hsl(198 20% 78%); background:hsl(205 32% 9%); box-shadow:inset 0 0 0 1px hsl(var(--d2-gold)/.28); }
.d2main-coin svg { color:hsl(var(--d2-gold)); }
.d2main-coin .nm { color:hsl(198 20% 64%); }
.d2main-coin .c { color:hsl(var(--d2-gold)); font-family:var(--font-display); font-weight:700; }
.d2main-empty { flex:1; display:grid; place-items:center; text-align:center; color:hsl(198 18% 52%); padding:2rem; }
.d2main-grid { flex:1; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; gap:12px; min-height:0; align-content:start; }
.d2main-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1rem .7rem .9rem; border-radius:10px;
  background:linear-gradient(180deg, hsl(202 26% 18% / .9), hsl(205 30% 12% / .95));
  box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.7), inset 0 2px 12px rgba(0,0,0,.4); }
.d2main-card.type-weapon { box-shadow:inset 0 0 0 1px hsl(18 60% 45% / .5), inset 0 2px 12px rgba(0,0,0,.4); }
.d2main-card.type-magic { box-shadow:inset 0 0 0 1px hsl(265 55% 55% / .5), inset 0 2px 12px rgba(0,0,0,.4); }
.d2main-ico { width:74px; height:74px; border-radius:11px; display:grid; place-items:center; color:hsl(190 30% 82%); flex:0 0 auto;
  background:radial-gradient(circle at 50% 32%, hsl(200 26% 24%), hsl(205 30% 11%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.6), inset 0 -6px 12px rgba(0,0,0,.4); }
.d2main-card.type-weapon .d2main-ico { color:hsl(18 78% 66%); }
.d2main-card.type-magic .d2main-ico { color:hsl(265 78% 78%); }
.d2main-name { font-family:var(--font-display); font-weight:600; font-size:.92rem; color:hsl(195 26% 86%); text-align:center; line-height:1.15; text-wrap:balance; }
.d2main-meta { margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:6px; }
.d2main-cost { display:inline-flex; align-items:center; gap:5px; padding:.2rem .6rem; border-radius:6px;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:hsl(var(--d2-gold));
  background:hsl(205 40% 7% / .7); box-shadow:inset 0 0 0 1px hsl(var(--d2-gold)/.35); }
.d2main-reqs { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.d2main-req { font-family:var(--font-display); font-weight:600; font-size:.62rem; letter-spacing:.04em; padding:.14rem .4rem; border-radius:5px;
  color:hsl(var(--d2-acc)); background:hsl(190 40% 14% / .7); box-shadow:inset 0 0 0 1px hsl(var(--d2-acc)/.4); white-space:nowrap; }
.d2main-desc { font-size:.68rem; color:hsl(198 20% 62%); line-height:1.35; text-align:center; text-wrap:pretty; }
.d2main-foot { flex:0 0 auto; display:flex; align-items:center; gap:16px; padding:.7rem 0 .9rem; margin-top:.4rem;
  box-shadow:inset 0 1px 0 hsl(var(--d2-line)/.45); }
.d2main-foot-name { font-family:var(--font-display); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; color:hsl(var(--d2-acc)); }
.d2main-pages { display:flex; align-items:center; gap:7px; }
.d2main-dot { width:8px; height:8px; border-radius:50%; background:hsl(var(--d2-line)/.8); transition:background .2s, transform .2s; }
.d2main-dot.on { background:hsl(var(--d2-acc)); transform:scale(1.3); box-shadow:0 0 8px hsl(var(--d2-acc)/.6); }
.d2main-page-lbl { font-size:.68rem; letter-spacing:.06em; color:hsl(198 20% 56%); }
.d2main-hint { margin-left:auto; font-size:.68rem; letter-spacing:.04em; color:hsl(198 18% 50%); }
@media (max-width:1100px){ .d2main-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:680px){ .d2main-grid{ grid-template-columns:repeat(3,1fr); } .d2main-ico{ width:56px; height:56px; } }

/* ============================================================
   ITEM RACK — name top · big art · price + stats footer
   ============================================================ */
.rack-grid { position:relative; }
.rack-slot { display:flex; flex-direction:column; gap:.4rem; padding:.7rem .6rem .6rem; justify-content:flex-start; overflow:hidden; }
.rack-name { flex:0 0 auto; font-family:var(--font-display); font-weight:700; font-size:.95rem; color:hsl(195 30% 90%); text-align:center;
  line-height:1.1; text-wrap:balance; letter-spacing:.01em; }
.rack-slot.type-weapon .rack-name { color:hsl(28 60% 82%); }
.rack-slot.type-magic .rack-name { color:hsl(265 50% 86%); }
.rack-art { position:relative; flex:1 1 auto; min-height:0; width:100%; display:block; border-radius:12px;
  background:radial-gradient(circle at 50% 34%, hsl(200 26% 22% / .7), hsl(205 30% 9% / .5));
  box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.5), inset 0 -8px 16px rgba(0,0,0,.4); overflow:hidden; }
.rack-slot.type-weapon .rack-art { box-shadow:inset 0 0 0 1px hsl(18 60% 45% / .5), inset 0 -8px 16px rgba(0,0,0,.4); }
.rack-slot.type-magic .rack-art { box-shadow:inset 0 0 0 1px hsl(265 55% 55% / .5), inset 0 -8px 16px rgba(0,0,0,.4); }
/* image is taken OUT of flow so a tall portrait can never push the card taller
   or shove the price/stats footer off; object-fit:contain guarantees no crop. */
.rack-img { position:absolute; inset:0; width:100%; height:100%; box-sizing:border-box; padding:7%;
  object-fit:contain; object-position:center; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)); }
.rack-glyph { position:absolute; inset:0; color:hsl(190 30% 82%); display:grid; place-items:center; }
.rack-slot.type-weapon .rack-glyph { color:hsl(18 78% 66%); }
.rack-slot.type-magic .rack-glyph { color:hsl(265 78% 80%); }
@keyframes rack-sway { 0%,100%{ transform:rotate(-1.4deg);} 50%{ transform:rotate(1.4deg);} }
.rack-art.hung .rack-img { transform-origin:top center; animation:rack-sway 4.5s ease-in-out infinite; }
.rack-qty { position:absolute; top:6px; right:6px; z-index:3;
  font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.02em;
  padding:.14rem .44rem; border-radius:99px; color:hsl(190 38% 88%);
  background:hsl(205 34% 10% / .92); box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.8); }
.rack-qty.low { color:hsl(40 92% 70%); box-shadow:inset 0 0 0 1px hsl(40 82% 55% / .7); }
.rack-qty.out { color:hsl(0 80% 70%); box-shadow:inset 0 0 0 1px hsl(var(--damage)/.7); }
.rack-foot { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:.4rem; min-height:1.5rem; }
.rack-cost { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; font-size:1rem; color:hsl(var(--d2-gold)); }
.rack-cost svg { color:hsl(var(--d2-gold)); }
.rack-reqs { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.rack-req { font-family:var(--font-display); font-weight:700; font-size:.68rem; padding:.14rem .42rem; border-radius:6px;
  color:hsl(188 60% 72%); background:hsl(190 40% 13% / .8); box-shadow:inset 0 0 0 1px hsl(188 60% 50% / .4); }
.rack-desc { font-size:.72rem; line-height:1.35; color:hsl(198 22% 72%); text-align:center; text-wrap:pretty; }
.rack-slot.out { filter:grayscale(.9) brightness(.62); }
.rack-slot.out .rack-art.hung .rack-img { animation:none; }
.stock-stamp { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-12deg); z-index:4;
  font-family:var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.12em; white-space:nowrap;
  color:hsl(0 85% 66%); padding:.2rem .55rem; border:2px solid hsl(0 85% 60%);
  background:hsl(0 30% 8% / .78); text-shadow:0 1px 2px #000; }

/* ============================================================
   WARE SHOWCASE — push-to-describe: item floats left, detail slides right
   ============================================================ */
.ware-showcase { position:absolute; inset:0; z-index:42; pointer-events:none;
  --wa:188 72% 54%; --wgold:44 92% 60%; }
.ware-veil { position:absolute; inset:0; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  background:radial-gradient(ellipse 70% 80% at 28% 50%, hsl(205 40% 5% / .55), hsl(205 45% 4% / .86));
  animation:ware-veil-in .5s ease-out both; }
@keyframes ware-veil-in { from{ opacity:0; } to{ opacity:1; } }
.ware-hero { position:absolute; left:7%; top:50%; transform:translateY(-50%); width:min(34vw,420px); height:min(60vh,560px);
  display:grid; place-items:center; animation:ware-hero-in .7s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ware-hero-in { from{ opacity:0; transform:translate(-40px,-50%) scale(.7);} to{ opacity:1; transform:translateY(-50%) scale(1);} }
.ware-hero-bloom { position:absolute; width:90%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, hsl(var(--wa)/.4), transparent 62%); filter:blur(14px); animation:ware-bloom 4s ease-in-out infinite; }
@keyframes ware-bloom { 0%,100%{ transform:scale(.92); opacity:.7;} 50%{ transform:scale(1.08); opacity:1;} }
.ware-hero-ring { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; border:1px solid hsl(var(--wa)/.35);
  box-shadow:0 0 50px hsl(var(--wa)/.3), inset 0 0 40px hsl(var(--wa)/.18); animation:ware-spin 24s linear infinite; }
@keyframes ware-spin { to{ transform:rotate(360deg); } }
.ware-hero-art { position:relative; width:74%; height:74%; object-fit:contain; z-index:2;
  filter:drop-shadow(0 0 40px hsl(var(--wa)/.65)); animation:ware-float 4s ease-in-out infinite; }
@keyframes ware-float { 0%,100%{ transform:translateY(0) rotateY(-9deg);} 50%{ transform:translateY(-16px) rotateY(9deg);} }
.ware-hero-glyph { display:grid; place-items:center; color:hsl(var(--wa)); }
.ware-hero-art::after { content:''; position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.32) 50%, transparent 60%);
  background-size:250% 100%; animation:scshow-sweep 2.6s ease-in-out infinite; }
.ware-sparkles span { position:absolute; width:6px; height:6px; border-radius:50%; background:hsl(var(--wgold));
  box-shadow:0 0 10px hsl(var(--wgold)); opacity:0; }
.ware-sparkles span:nth-child(1){ left:24%; top:30%; animation:ware-spk 3.4s ease-in-out infinite; }
.ware-sparkles span:nth-child(2){ left:72%; top:24%; animation:ware-spk 3.4s ease-in-out .8s infinite; }
.ware-sparkles span:nth-child(3){ left:30%; top:74%; animation:ware-spk 3.4s ease-in-out 1.6s infinite; }
.ware-sparkles span:nth-child(4){ left:78%; top:66%; animation:ware-spk 3.4s ease-in-out 2.4s infinite; }
@keyframes ware-spk { 0%,100%{ opacity:0; transform:translateY(0) scale(.6);} 40%{ opacity:1;} 70%{ opacity:.7; transform:translateY(-18px) scale(1);} }

.ware-detail { position:absolute; right:6%; top:50%; transform:translateY(-50%); width:min(38vw,440px);
  padding:1.6rem 1.7rem; border-radius:18px; pointer-events:auto;
  animation:detail-in .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes detail-in { from{ opacity:0; transform:translate(40px,-50%);} to{ opacity:1; transform:translateY(-50%);} }
.ware-detail-type { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:hsl(var(--wa)); }
.ware-detail-name { font-size:clamp(1.7rem,3vw,2.6rem); color:hsl(190 38% 94%); line-height:1.05; margin-top:.3rem; text-wrap:balance; }
.ware-detail-rule { height:2px; margin:.9rem 0; background:linear-gradient(90deg, hsl(var(--wa)/.8), transparent); }
.ware-detail-desc { font-size:1rem; line-height:1.55; color:hsl(198 22% 80%); text-wrap:pretty; margin:0 0 1rem; }
.ware-detail-reqs { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:1.1rem; }
.ware-reqs-lbl { font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(198 20% 58%); margin-right:2px; }
.ware-req { font-family:var(--font-display); font-weight:700; font-size:.82rem; padding:.24rem .56rem; border-radius:7px;
  color:hsl(var(--wa)); background:hsl(190 40% 13% / .8); box-shadow:inset 0 0 0 1px hsl(var(--wa)/.45); }
.ware-noreq { font-size:.86rem; color:hsl(198 20% 64%); }
.ware-detail-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1rem; border-top:1px solid hsl(var(--d2-line,195 38% 30%)/.4); }
.ware-price { display:inline-flex; align-items:baseline; gap:7px; font-family:var(--font-display); font-weight:700; font-size:1.8rem; color:hsl(var(--wgold)); }
.ware-price svg { align-self:center; color:hsl(var(--wgold)); }
.ware-price i { font-style:normal; font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:hsl(198 20% 58%); }
.ware-stock { font-family:var(--font-display); font-size:.8rem; letter-spacing:.04em; padding:.34rem .7rem; border-radius:99px;
  color:hsl(140 50% 70%); background:hsl(150 40% 14% / .7); box-shadow:inset 0 0 0 1px hsl(150 40% 40% / .4); }
.ware-stock.out { color:hsl(var(--damage)); background:hsl(0 40% 12% / .7); box-shadow:inset 0 0 0 1px hsl(var(--damage)/.5); }

/* player phone — item card aligned like the main rack */
.pcard { position:relative; }
.pcard-buy { display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:.5rem .5rem .55rem; width:100%; border:none; cursor:pointer; border-radius:10px;
  background:linear-gradient(180deg, hsl(202 26% 17% / .9), hsl(205 30% 11% / .95)); color:inherit;
  box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.7), inset 0 2px 10px rgba(0,0,0,.4); transition:box-shadow .15s, transform .1s; }
.pcard-buy:hover:not(:disabled) { box-shadow:inset 0 0 0 1px hsl(var(--d2-acc)), 0 0 14px hsl(var(--d2-acc)/.3); }
.pcard-buy:active:not(:disabled) { transform:translateY(1px); }
.pcard.incart .pcard-buy { box-shadow:inset 0 0 0 1.5px hsl(var(--d2-acc)/.9), 0 0 12px hsl(var(--d2-acc)/.3); }
.pcard.blocked .pcard-buy { filter:grayscale(.55) brightness(.72); }
.pcard-name { font-family:var(--font-display); font-weight:700; font-size:.84rem; color:hsl(195 26% 87%); text-align:center; line-height:1.1; text-wrap:balance; }
.pcard.type-weapon .pcard-name { color:hsl(28 60% 80%); }
.pcard.type-magic .pcard-name { color:hsl(265 50% 84%); }
.pcard-art { position:relative; width:100%; aspect-ratio:1/.82; border-radius:8px; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 32%, hsl(200 26% 22% / .7), hsl(205 30% 9% / .5)); box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.5); }
.pcard-img { width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.pcard-art > svg { color:hsl(190 28% 80%); }
.pcard.type-weapon .pcard-art > svg { color:hsl(18 75% 64%); }
.pcard.type-magic .pcard-art > svg { color:hsl(265 75% 78%); }
.pcard-qty { position:absolute; top:5px; right:5px; font-family:var(--font-display); font-weight:700; font-size:.62rem; padding:.1rem .38rem; border-radius:99px;
  color:hsl(140 50% 74%); background:hsl(150 40% 10% / .92); box-shadow:inset 0 0 0 1px hsl(150 45% 40% / .5); }
.pcard-qty.low { color:hsl(40 90% 70%); box-shadow:inset 0 0 0 1px hsl(40 80% 55% / .55); }
.pcard-qty.out { color:hsl(0 82% 70%); box-shadow:inset 0 0 0 1px hsl(var(--damage)/.6); }
.pcard-incart { position:absolute; top:5px; left:5px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; display:grid; place-items:center;
  font-size:.64rem; font-weight:700; color:hsl(205 40% 8%); background:hsl(var(--d2-acc)); box-shadow:0 1px 4px rgba(0,0,0,.5); }
.pcard-stamp { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-11deg); font-family:var(--font-display); font-weight:700;
  font-size:.6rem; letter-spacing:.1em; white-space:nowrap; color:hsl(0 85% 68%); padding:.16rem .42rem; border:2px solid hsl(0 85% 60%);
  background:hsl(0 30% 8% / .82); text-shadow:0 1px 2px #000; z-index:3; }
.pcard-foot { display:flex; align-items:center; justify-content:space-between; gap:.4rem; min-height:1.3rem; }
.pcard-cost { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-display); font-weight:700; font-size:.92rem; color:hsl(var(--d2-gold)); }
.pcard-cost svg { color:hsl(var(--d2-gold)); }
.pcard-reqs { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:3px; }
.pcard-req { font-family:var(--font-display); font-weight:700; font-size:.6rem; padding:.1rem .36rem; border-radius:5px; white-space:nowrap; }
.pcard-req.met { color:hsl(140 60% 70%); background:hsl(150 45% 13% / .85); box-shadow:inset 0 0 0 1px hsl(145 55% 45% / .5); }
.pcard-req.unmet { color:hsl(2 80% 70%); background:hsl(2 50% 15% / .85); box-shadow:inset 0 0 0 1px hsl(2 70% 50% / .5); }
.pcard-status { position:absolute; left:50%; top:.4rem; transform:translateX(-50%); padding:.1rem .44rem; border-radius:5px; font-size:.56rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:hsl(0 60% 82%); background:hsl(0 50% 22% / .95); z-index:4; white-space:nowrap; }
.pcard-status.warn { color:hsl(40 80% 80%); background:hsl(38 50% 22% / .95); }
.pcard.soldout { opacity:.72; }
.sfi-art { border:none; cursor:pointer; padding:0; overflow:hidden; }
.sfi-art:hover { box-shadow:inset 0 0 0 1px hsl(var(--primary)/.6); }

/* ---- stat-point spend window (player) ---- */
.statspend-bg { position:fixed; inset:0; z-index:6100; display:grid; place-items:center; padding:5vw;
  background:radial-gradient(ellipse at 50% 36%, hsl(40 50% 14% / .6), hsl(var(--background)) 72%); overflow:hidden; }
.statspend { position:relative; z-index:2; width:min(440px,100%); max-height:88vh; display:flex; flex-direction:column; gap:.8rem;
  padding:1.4rem 1.3rem; border-radius:20px; background:hsl(var(--surface)/.92); border:1px solid hsl(var(--primary)/.4);
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 0 40px hsl(var(--primary)/.08); }
.ss-eyebrow { display:flex; align-items:center; gap:.45rem; justify-content:center; font-family:var(--font-display);
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:hsl(var(--primary)); }
.ss-pool { text-align:center; font-size:.92rem; color:hsl(var(--muted-foreground)); }
.ss-pool b { font-family:var(--font-display); font-size:1.5rem; color:hsl(var(--primary)); }
.ss-grid { display:flex; flex-direction:column; gap:.4rem; overflow-y:auto; padding:.2rem; }
.ss-row { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.5rem .7rem; border-radius:12px;
  background:hsl(var(--background)/.5); border:1px solid hsl(var(--border)/.6); transition:border-color .2s, background .2s; }
.ss-row.raised { border-color:hsl(var(--primary)/.6); background:hsl(var(--primary)/.1); }
.ss-row-id { display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.ss-row-k { font-family:var(--font-display); font-weight:700; font-size:.95rem; color:hsl(var(--foreground)); letter-spacing:.04em; }
.ss-row-name { font-size:.68rem; color:hsl(var(--muted-foreground)); }
.ss-row-ctrl { display:flex; align-items:center; gap:.55rem; flex:none; }
.ss-btn { width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:1.2rem; line-height:1; padding:0;
  color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); background:hsl(var(--surface)); }
.ss-btn.plus { color:hsl(var(--primary)); border-color:hsl(var(--primary)/.5); }
.ss-btn:active:not(:disabled) { transform:scale(.9); }
.ss-btn:disabled { opacity:.3; cursor:not-allowed; }
.ss-val { font-family:var(--font-display); font-size:1.15rem; min-width:2.2ch; text-align:center; color:hsl(var(--primary)); font-variant-numeric:tabular-nums; }
.ss-confirm { width:100%; font-family:var(--font-display); font-size:1rem; padding:.8rem; border-radius:14px; cursor:pointer;
  color:hsl(var(--primary-foreground)); border:1px solid hsl(var(--primary)/.7);
  background:linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary)/.8)); }
.ss-confirm:disabled { opacity:.5; cursor:not-allowed; background:hsl(var(--surface)); color:hsl(var(--muted-foreground)); border-color:hsl(var(--border)); }

/* ---- host party panel: held inventory list (remove/break/give) ---- */
.inv-empty { font-size:.74rem; margin:.5rem 0 .2rem; }
.inv-list { margin-top:.5rem; display:flex; flex-direction:column; gap:4px; }
.inv-row { display:flex; align-items:center; gap:7px; padding:.35rem .5rem; border-radius:8px;
  background:hsl(var(--surface)/.5); border:1px solid hsl(var(--border)/.6); }
.inv-row.type-weapon { box-shadow:inset 2px 0 0 hsl(18 70% 50%); }
.inv-row.type-magic { box-shadow:inset 2px 0 0 hsl(265 60% 60%); }
.inv-row.broken { opacity:.6; }
.inv-row.broken .inv-name { text-decoration:line-through; }
.inv-name { flex:1; font-size:.78rem; color:hsl(var(--foreground)); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-broken-tag { margin-left:6px; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:hsl(var(--damage)); text-decoration:none; }
.inv-acts { display:flex; align-items:center; gap:4px; flex:none; }
.inv-give { font-size:.66rem; padding:.18rem .3rem; border-radius:6px; border:1px solid hsl(var(--border)); background:hsl(var(--surface)); color:hsl(var(--muted-foreground)); }
.inv-btn { width:24px; height:24px; border-radius:6px; cursor:pointer; font-size:.8rem; line-height:1; padding:0;
  border:1px solid hsl(var(--border)); background:hsl(var(--surface)); color:hsl(var(--foreground)); }
.inv-btn:hover { border-color:hsl(var(--primary)/.6); }
.inv-btn.danger:hover { border-color:hsl(var(--damage)); color:hsl(var(--damage)); }
/* player-side broken item */
.inv-tile.broken { opacity:.66; filter:grayscale(.5); position:relative; }
.inv-tile.broken .inv-nm { text-decoration:line-through; }
.inv-broken { position:absolute; top:5px; right:5px; font-size:.54rem; font-weight:700; letter-spacing:.06em;
  padding:.1rem .3rem; border-radius:4px; color:hsl(0 80% 70%); background:hsl(0 40% 12% / .9); border:1px solid hsl(var(--damage)/.6); }

/* ---- Main Stage: moderator dice control ---- */
.dice-ctrl-wrap { position:relative; margin-left:auto; }
.dice-ctrl-btn { position:relative; padding:.3rem .7rem; border-radius:8px; cursor:pointer; font-size:.76rem;
  color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); background:hsl(var(--surface)); }
.dice-ctrl-btn.pending { border-color:hsl(var(--primary)); color:hsl(var(--primary)); box-shadow:0 0 12px hsl(var(--primary)/.4); }
.dice-ctrl-badge { position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; display:grid; place-items:center;
  font-size:.6rem; font-weight:700; color:hsl(var(--primary-foreground)); background:hsl(var(--primary)); }
.dice-ctrl-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:9999; width:300px; padding:.7rem; border-radius:12px;
  background:hsl(var(--surface)); border:1px solid hsl(var(--primary)/.35); box-shadow:0 18px 48px rgba(0,0,0,.7); display:flex; flex-direction:column; gap:.4rem; }
.dice-ctrl-title { font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-bottom:.2rem; }
.dice-ctrl-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.4rem .5rem; border-radius:9px;
  background:hsl(var(--background)/.5); border:1px solid hsl(var(--border)/.6); }
.dice-ctrl-row.asked { border-color:hsl(var(--primary)/.6); background:hsl(var(--primary)/.08); }
.dice-ctrl-name { font-size:.82rem; color:hsl(var(--foreground)); display:flex; flex-direction:column; }
.dice-ctrl-ask { font-size:.62rem; color:hsl(var(--primary)); }
.dice-ctrl-armed { font-size:.62rem; color:hsl(var(--heal)); }
.dice-ctrl-acts { display:flex; gap:4px; flex:none; }
.dice-ctrl-acts .tiny-btn { padding:.24rem .5rem; font-size:.7rem; }

/* table rules popover (Dice + Card modes) */
.trule-pop { width:280px; }
.trule-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.trule-lbl { font-size:.82rem; color:hsl(var(--foreground)); }
.trule-seg { display:inline-flex; border-radius:8px; overflow:hidden; border:1px solid hsl(var(--border)); }
.trule-opt { padding:.26rem .56rem; font-size:.7rem; cursor:pointer; border:none; background:hsl(var(--surface)); color:hsl(var(--muted-foreground)); }
.trule-opt + .trule-opt { border-left:1px solid hsl(var(--border)); }
.trule-opt.on.off { background:hsl(var(--damage)/.85); color:#fff; }
.trule-opt.on.private { background:hsl(200 60% 40%); color:#fff; }
.trule-opt.on.public { background:hsl(var(--heal)/.85); color:hsl(150 40% 8%); }
.trule-hint { font-size:.66rem; line-height:1.4; color:hsl(var(--muted-foreground)); margin-top:.2rem; }

/* per-player dice strip in the party-control card */
.play-switch-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
.play-switch-row .play-switch { flex:1; min-width:160px; margin:0; }
.dice-switch.on .ps-track { background:hsl(188 60% 42%); }
.scope-seg { display:inline-flex; border-radius:8px; overflow:hidden; border:1px solid hsl(var(--border)); flex:none; }
.scope-opt { padding:.34rem .6rem; font-size:.7rem; cursor:pointer; border:none; background:hsl(var(--surface)); color:hsl(var(--muted-foreground)); }
.scope-opt + .scope-opt { border-left:1px solid hsl(var(--border)); }
.scope-opt.on { background:hsl(200 55% 38%); color:#fff; }
.scope-opt.on.pub { background:hsl(var(--heal)/.85); color:hsl(150 40% 8%); }
.pc-dice-result { display:inline-flex; align-items:center; gap:4px; padding:.2rem .45rem; border-radius:7px;
  background:hsl(var(--surface)/.8); box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.pc-dice-result b { font-family:var(--font-display); color:hsl(var(--primary)); font-size:.9rem; }
.pc-dice-result .d6face { width:16px; height:16px; padding:1px; }
.pc-dice-result .d6pip.on { background:hsl(var(--foreground)); }

/* ---- targetable asset rows (knowledge / maps) ---- */
.tasset-list { display:flex; flex-direction:column; gap:6px; margin-top:.5rem; }
.tasset-row { display:flex; align-items:center; gap:10px; padding:.45rem .55rem; border-radius:10px;
  background:hsl(var(--surface)/.5); border:1px solid hsl(var(--border)/.6); }
.tasset-thumb { width:42px; height:42px; flex:none; border-radius:8px; overflow:hidden; display:grid; place-items:center;
  background:hsl(var(--background)/.6); color:hsl(var(--muted-foreground)); }
.tasset-thumb img { width:100%; height:100%; object-fit:cover; }
.tasset-info { flex:1; min-width:0; }
.tasset-name { font-family:var(--font-display); font-size:.86rem; color:hsl(var(--foreground)); }
.tasset-desc { font-size:.7rem; color:hsl(var(--muted-foreground)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- the reusable Show▾ target menu (fixed-positioned popup, escapes clipping) ---- */
.tmenu { position:relative; flex:none; }
.tmenu-trigger { padding:.34rem .7rem; border-radius:8px; cursor:pointer; font-size:.74rem; white-space:nowrap;
  color:hsl(var(--primary)); background:hsl(var(--primary)/.12); border:1px solid hsl(var(--primary)/.4); }
.tmenu-trigger:hover, .tmenu-trigger.on { background:hsl(var(--primary)/.22); }
.tmenu-pop { z-index:9999; width:240px; padding:.6rem; border-radius:12px;
  background:hsl(var(--surface)); border:1px solid hsl(var(--primary)/.35); box-shadow:0 18px 48px rgba(0,0,0,.7);
  display:flex; flex-direction:column; gap:.4rem; }
.tmenu-intel { display:flex; align-items:center; gap:6px; font-size:.74rem; color:hsl(var(--foreground)); cursor:pointer; padding-bottom:.3rem; border-bottom:1px solid hsl(var(--border)/.5); }
.tmenu-intel.disabled { opacity:.5; cursor:not-allowed; }
.tmenu-opt { display:flex; align-items:center; gap:7px; padding:.45rem .55rem; border-radius:8px; cursor:pointer; font-size:.78rem; text-align:left;
  color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); background:hsl(var(--background)/.5); }
.tmenu-opt:hover { border-color:hsl(var(--primary)/.6); background:hsl(var(--primary)/.1); }
.tmenu-sub { font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-top:.1rem; }
.tmenu-players { display:flex; flex-wrap:wrap; gap:4px; }
.tmenu-pbtn { padding:.3rem .55rem; border-radius:7px; cursor:pointer; font-size:.72rem;
  color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); background:hsl(var(--background)/.5); }
.tmenu-pbtn:hover { border-color:hsl(var(--primary)/.6); color:hsl(var(--primary)); }
/* foe Show menu — on/off toggle buttons (green = on, white = off) */
.tmenu-pop.foe-show { width:260px; }
.foe-toggle { display:flex; align-items:center; gap:8px; padding:.5rem .6rem; border-radius:9px; cursor:pointer; font-size:.8rem; text-align:left;
  border:1px solid hsl(var(--border)); background:hsl(var(--background)/.5); color:hsl(var(--foreground)); }
.foe-toggle .foe-toggle-lbl { flex:1; }
.foe-toggle-dot { width:11px; height:11px; border-radius:50%; flex:none; background:hsl(0 0% 80%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.3); }
.foe-toggle-state { font-size:.62rem; font-weight:700; letter-spacing:.08em; color:hsl(var(--muted-foreground)); }
.foe-toggle.on { border-color:hsl(var(--heal)/.7); background:hsl(var(--heal)/.14); }
.foe-toggle.on .foe-toggle-dot { background:hsl(var(--heal)); box-shadow:0 0 8px hsl(var(--heal)/.8); }
.foe-toggle.on .foe-toggle-state { color:hsl(var(--heal)); }
.foe-toggle.disabled { opacity:.4; cursor:not-allowed; }
.foe-player-row { display:flex; flex-wrap:wrap; gap:5px; }
.foe-pchip { display:flex; align-items:center; gap:5px; padding:.32rem .55rem; border-radius:7px; cursor:pointer; font-size:.72rem;
  border:1px solid hsl(var(--border)); background:hsl(var(--background)/.5); color:hsl(var(--foreground)); }
.foe-pchip .foe-toggle-dot { width:9px; height:9px; }
.foe-pchip.on { border-color:hsl(var(--heal)/.7); background:hsl(var(--heal)/.16); color:hsl(var(--heal)); }
.foe-pchip.on .foe-toggle-dot { background:hsl(var(--heal)); box-shadow:0 0 7px hsl(var(--heal)/.8); }
.foe-pchip.disabled { opacity:.4; cursor:not-allowed; }
.pick-tile .pick-check { position:absolute; top:5px; right:5px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center;
  font-size:.7rem; font-weight:700; color:hsl(20 16% 8%); background:hsl(var(--heal)); box-shadow:0 0 8px hsl(var(--heal)/.7); }
/* "are you sure?" switch confirm */
.switch-confirm-bg { position:fixed; inset:0; z-index:10001; display:grid; place-items:center; padding:5vw;
  background:rgba(6,5,4,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.switch-confirm { width:min(420px,100%); padding:1.6rem 1.4rem; border-radius:18px; text-align:center;
  border:1px solid hsl(38 60% 40% / .5); box-shadow:0 24px 70px rgba(0,0,0,.6); }
.switch-confirm .sc-ico { font-size:2.2rem; color:hsl(38 90% 58%); }
.switch-confirm h3 { font-size:1.3rem; margin:.4rem 0 .5rem; color:hsl(var(--foreground)); }
.switch-confirm .sc-body { font-size:.9rem; line-height:1.5; color:hsl(var(--muted-foreground)); margin-bottom:1.2rem; text-wrap:pretty; }
.switch-confirm .sc-body b { color:hsl(var(--foreground)); }
.switch-confirm .sc-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }
.switch-confirm .sc-cancel { padding:.6rem 1rem; border-radius:11px; cursor:pointer; font-size:.84rem; }
.switch-confirm .sc-go { padding:.6rem 1.2rem; border-radius:11px; cursor:pointer; font-size:.86rem; font-family:var(--font-display);
  color:hsl(var(--primary-foreground)); border:1px solid hsl(var(--primary)/.7);
  background:linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary)/.82)); }
.switch-confirm .sc-go:active { transform:scale(.97); }
.stage-count-row .tmenu { margin-left:6px; }
/* foe tiles use TargetMenu as the trigger — keep the tile's own look */
.stage-pick-grid .tmenu { display:contents; }
.tmenu-trigger.pick-tile { padding:0; font-size:.66rem; white-space:normal; color:#fff;
  background:hsl(20 16% 5%); border:none; border-radius:11px; }
.host-screen .tmenu-trigger.pick-tile { background:hsl(207 22% 12%); border-radius:4px; }
.tmenu-opt.stagefig { border-color:hsl(var(--primary)/.5); color:hsl(var(--primary)); }
.tmenu-opt.stagefig.on { background:hsl(var(--primary)/.16); }

/* trading panel — per-ware stock + describe controls */
.sb-ware { align-items:center !important; flex-wrap:wrap; cursor:default !important; }
.sb-ware-img { width:24px; height:24px; object-fit:contain; }
.sb-ware-oos { margin-left:6px; font-size:.54rem; font-weight:700; letter-spacing:.08em; color:hsl(var(--damage)); }
.sb-ware.oos { opacity:.66; }
.sb-ware-ctrls { display:flex; align-items:center; gap:12px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.sb-stock { display:inline-flex; align-items:center; gap:3px; }
.sb-step { width:22px; height:22px; border-radius:6px; border:1px solid hsl(195 38% 30% / .7); background:hsl(205 30% 12%); color:hsl(195 26% 82%); cursor:pointer; font-size:.85rem; line-height:1; padding:0; }
.sb-step:hover { border-color:hsl(188 70% 52%); color:#fff; }
.sb-step.inf { width:auto; padding:0 6px; font-size:.74rem; }
.sb-stock-n { min-width:22px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:.82rem; color:hsl(44 90% 64%); }
.sb-describe { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }
.sb-describe-lbl { font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:hsl(198 20% 56%); }
.sb-desc-btn { padding:.2rem .5rem; border-radius:6px; border:1px solid hsl(195 38% 30% / .7); background:hsl(205 30% 12%); color:hsl(195 24% 80%); cursor:pointer; font-size:.66rem; white-space:nowrap; }
.sb-desc-btn:hover { border-color:hsl(188 70% 52%); color:#fff; }
.sb-desc-btn.all { color:hsl(188 70% 70%); }
.sb-desc-btn.all.on { background:hsl(188 70% 45%); color:hsl(205 40% 8%); border-color:transparent; }
@media (max-width:760px){
  .ware-hero{ left:50%; top:34%; transform:translate(-50%,-50%); width:70vw; height:38vh; }
  @keyframes ware-hero-in { from{opacity:0;transform:translate(-50%,-50%) scale(.7);} to{opacity:1;transform:translate(-50%,-50%) scale(1);} }
  @keyframes ware-float { 0%,100%{transform:translateY(0) rotateY(-9deg);} 50%{transform:translateY(-12px) rotateY(9deg);} }
  .ware-detail{ right:50%; top:auto; bottom:4vh; transform:translateX(50%); width:88vw; }
  @keyframes detail-in { from{opacity:0;transform:translate(50%,30px);} to{opacity:1;transform:translateX(50%);} }
}

/* ============================================================
   MODERATOR SHOP BOARD — live trading dashboard
   ============================================================ */
.shopboard .sb-live { display:inline-flex; align-items:center; gap:5px; margin-left:10px; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--heal)); }
.sb-live-dot { width:7px; height:7px; border-radius:50%; background:hsl(var(--heal)); box-shadow:0 0 8px hsl(var(--heal)); animation:pulse-text 1.4s ease-in-out infinite; }
.sb-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:10px; margin-top:.4rem; }
.sb-card { border-radius:12px; padding:.7rem .8rem; background:hsl(var(--background)/.5); box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.sb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.sb-name { font-family:var(--font-display); font-weight:700; font-size:.92rem; color:hsl(var(--foreground)); }
.sb-coins { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-display); font-weight:700; color:hsl(var(--primary)); }
.sb-req { border-radius:9px; padding:.55rem .6rem; margin-bottom:.5rem; background:hsl(var(--primary)/.08); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.3); }
.sb-req-top { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.sb-req-title { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-family:var(--font-display); font-weight:600; color:hsl(var(--foreground)); }
.sb-afford { font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; padding:.08rem .36rem; border-radius:4px; }
.sb-afford.ok { color:hsl(var(--heal)); background:hsl(var(--heal)/.14); }
.sb-afford.no { color:hsl(0 70% 66%); background:hsl(var(--damage)/.14); }
.sb-req-items { display:flex; flex-wrap:wrap; gap:4px; margin:.4rem 0; }
.sb-req-actions { display:flex; gap:6px; flex-wrap:wrap; }
.sb-sub { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:hsl(var(--muted-foreground)); margin:.5rem 0 .3rem; }
.sb-empty { font-size:.72rem; color:hsl(var(--muted-foreground)/.7); font-style:italic; }
.sb-chips { display:flex; flex-wrap:wrap; gap:4px; }
.sb-chip { display:inline-flex; align-items:center; gap:4px; font-size:.66rem; color:hsl(var(--foreground)/.85); padding:.14rem .42rem; border-radius:6px;
  background:hsl(var(--surface)); box-shadow:inset 0 0 0 1px hsl(var(--border)); }
.sb-chip svg { color:hsl(var(--muted-foreground)); }
.sb-chip.weapon { box-shadow:inset 0 0 0 1px hsl(var(--primary)/.35); }
.sb-chip.weapon svg { color:hsl(var(--primary)); }

/* moderator's Dota-2 scrollable ware browser */
.sb-browser { margin:.2rem 0 1rem; border-radius:12px; overflow:hidden;
  --d2-line:195 38% 30%; --d2-acc:188 70% 52%; --d2-gold:44 92% 60%;
  background:linear-gradient(180deg, hsl(205 28% 12%), hsl(206 30% 9%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.55); }
.sb-browse-head { display:flex; align-items:center; gap:10px; padding:.6rem .8rem; font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.04em;
  color:hsl(190 28% 82%); box-shadow:inset 0 -1px 0 hsl(var(--d2-acc)/.28); }
.sb-browse-head svg { color:hsl(var(--d2-acc)); vertical-align:-2px; }
.sb-browse-list { display:flex; flex-direction:column; gap:5px; padding:.6rem; max-height:248px; overflow-y:auto; }
.sb-ware { display:flex; align-items:center; gap:11px; padding:.5rem .6rem; border:none; cursor:pointer; border-radius:9px; text-align:left; width:100%;
  color:hsl(195 22% 82%); background:linear-gradient(180deg, hsl(202 24% 16%), hsl(205 28% 11%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.6); transition:box-shadow .15s, transform .1s; }
.sb-ware:hover { box-shadow:inset 0 0 0 1px hsl(var(--d2-acc)/.8), 0 0 12px hsl(var(--d2-acc)/.2); }
.sb-ware:active { transform:translateY(1px); }
.sb-ware.on { box-shadow:inset 0 0 0 1.5px hsl(var(--d2-acc)), 0 0 16px hsl(var(--d2-acc)/.35); background:linear-gradient(180deg, hsl(195 30% 18%), hsl(200 30% 12%)); }
.sb-ware-ico { width:40px; height:40px; border-radius:8px; display:grid; place-items:center; color:hsl(190 30% 82%); flex:0 0 auto;
  background:radial-gradient(circle at 50% 32%, hsl(200 26% 24%), hsl(205 30% 11%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.6); }
.sb-ware.type-weapon .sb-ware-ico { color:hsl(18 78% 66%); }
.sb-ware.type-magic .sb-ware-ico { color:hsl(265 78% 78%); }
.sb-ware-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.sb-ware-name { font-family:var(--font-display); font-weight:600; font-size:.84rem; color:hsl(195 26% 88%); }
.sb-ware-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.sb-ware-cost { display:inline-flex; align-items:center; gap:3px; font-family:var(--font-display); font-weight:700; font-size:.74rem; color:hsl(var(--d2-gold)); }
.sb-ware-req { font-size:.6rem; font-weight:600; letter-spacing:.03em; padding:.1rem .34rem; border-radius:4px; color:hsl(var(--d2-acc)); background:hsl(190 40% 14% / .8); box-shadow:inset 0 0 0 1px hsl(var(--d2-acc)/.4); }
.sb-ware-go { flex:0 0 auto; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:hsl(198 22% 56%); }
.sb-ware.on .sb-ware-go { color:hsl(var(--d2-acc)); }

/* ============================================================
   ITEM SPOTLIGHT — Dota-2 "dex" detail panel on the Main screen
   ============================================================ */
.d2dex { position:absolute; z-index:40; right:3vw; bottom:14vh; width:min(460px, 42vw);
  --d2-line:195 38% 30%; --d2-acc:188 70% 52%; --d2-gold:44 92% 60%;
  animation: d2dex-in .45s cubic-bezier(.2,.9,.3,1); }
@keyframes d2dex-in { 0%{ opacity:0; transform:translateX(24px) scale(.97);} 100%{ opacity:1; } }
.d2dex-aura { position:absolute; inset:-12% -8%; border-radius:30px; pointer-events:none;
  background:radial-gradient(ellipse at 70% 40%, hsl(var(--d2-acc)/.22), transparent 65%); filter:blur(8px); }
.d2dex-card { position:relative; display:flex; gap:16px; padding:18px; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, hsl(205 30% 13% / .97), hsl(206 32% 9% / .98));
  box-shadow:0 24px 60px rgba(0,0,0,.7), inset 0 0 0 1px hsl(var(--d2-line)/.7), inset 0 0 0 2px hsl(205 30% 6%); }
.d2dex-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:hsl(var(--d2-acc)); box-shadow:0 0 16px hsl(var(--d2-acc)/.7); }
.d2dex-card.type-weapon::before { background:hsl(18 78% 56%); box-shadow:0 0 16px hsl(18 78% 56% / .7); }
.d2dex-card.type-magic::before { background:hsl(265 70% 64%); box-shadow:0 0 16px hsl(265 70% 64% / .7); }
.d2dex-left { display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 auto; }
.d2dex-ico { width:128px; height:128px; border-radius:14px; display:grid; place-items:center; color:hsl(190 32% 84%);
  background:radial-gradient(circle at 50% 30%, hsl(200 28% 26%), hsl(205 32% 10%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-line)/.7), inset 0 -10px 22px rgba(0,0,0,.45); }
.d2dex-card.type-weapon .d2dex-ico { color:hsl(18 80% 66%); }
.d2dex-card.type-magic .d2dex-ico { color:hsl(265 80% 80%); }
.d2dex-cost { display:inline-flex; align-items:baseline; gap:6px; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:hsl(var(--d2-gold)); }
.d2dex-cost svg { color:hsl(var(--d2-gold)); align-self:center; }
.d2dex-gold { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:hsl(198 20% 56%); }
.d2dex-body { flex:1; min-width:0; }
.d2dex-type { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:hsl(var(--d2-acc)); }
.d2dex-name { font-size:clamp(1.5rem,2.4vw,2.1rem); color:hsl(190 36% 92%); line-height:1.05; margin-top:5px; text-wrap:balance; }
.d2dex-rule { height:2px; margin:.7rem 0; background:linear-gradient(90deg, hsl(var(--d2-acc)/.7), transparent); }
.d2dex-reqs { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:.7rem; }
.d2dex-reqs-lbl { font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:hsl(198 20% 56%); margin-right:2px; }
.d2dex-req { font-family:var(--font-display); font-weight:700; font-size:.78rem; padding:.2rem .5rem; border-radius:6px;
  color:hsl(var(--d2-acc)); background:hsl(190 40% 13% / .8); box-shadow:inset 0 0 0 1px hsl(var(--d2-acc)/.45); }
.d2dex-noreq { font-size:.8rem; color:hsl(198 20% 64%); }
.d2dex-desc { font-size:.92rem; line-height:1.5; color:hsl(198 22% 76%); text-wrap:pretty; }
@media (max-width:760px){ .d2dex{ width:min(360px,80vw); right:2vw; bottom:10vh; } .d2dex-ico{ width:92px; height:92px; } }

/* ============================================================
   ENTRY — Genshin-style "ignite to enter" cinematic gate
   ============================================================ */
.enter-scene { position:fixed; inset:0; z-index:9000; overflow:hidden; cursor:pointer;
  --mx:0; --my:0;
  background:#0a1410;
  transition: opacity .5s ease; }
.enter-scene .embers { z-index:3; }
.es-bg { position:absolute; inset:-4%; z-index:0;
  background:url('assets/entry-bg.png') center/cover no-repeat;
  transform: translate(calc(var(--mx) * -16px), calc(var(--my) * -12px)) scale(1.04);
  transition: transform 1.2s cubic-bezier(.5,0,.7,0), filter 1.2s ease; }
.es-fog { position:absolute; left:-20%; right:-20%; height:55%; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.32;
  background:radial-gradient(closest-side, hsl(150 36% 32% / .45), transparent); filter:blur(22px); }
.es-fog-1 { top:4%; animation: es-fog 26s ease-in-out infinite; }
.es-fog-2 { bottom:0; animation: es-fog 32s ease-in-out infinite reverse; }
@keyframes es-fog { 0%,100%{ transform:translateX(-6%);} 50%{ transform:translateX(6%);} }
.es-vignette { position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 48%, transparent 38%, hsl(200 40% 4% / .72) 100%); }

.es-wordmark { position:absolute; top:clamp(5vh,8vh,12vh); left:0; right:0; z-index:4; text-align:center;
  transform: translate(calc(var(--mx) * 6px), calc(var(--my) * 4px)); transition: opacity .5s ease, transform .9s ease; }
.es-wordmark h1 { font-size:clamp(2.4rem,6.5vw,4.6rem); color:hsl(46 84% 72%); letter-spacing:.18em; line-height:1;
  text-shadow:0 2px 0 hsl(180 40% 6%), 0 0 46px hsl(168 70% 50% / .35); }
.es-tag { margin-top:.6rem; color:hsl(160 22% 66%); letter-spacing:.34em; text-transform:uppercase; font-size:.72rem; }

/* the altar — pendant centered, glowing stone in its heart (the zoom target) */
.es-altar { position:absolute; left:50%; top:50%; z-index:5;
  width:min(78vw, 66vh, 560px); aspect-ratio:835/740;
  transform: translate(-50%,-48%) translate(calc(var(--mx) * 16px), calc(var(--my) * 12px));
  transform-origin:50% 41%;
  transition: transform 1.1s cubic-bezier(.5,0,.75,0), filter 1.1s ease; }
.es-pendant { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 18px 40px hsl(180 60% 4% / .7)); animation: es-altar-bob 7s ease-in-out infinite; }
@keyframes es-altar-bob { 0%,100%{ transform:translateY(0) rotate(-.4deg);} 50%{ transform:translateY(-6px) rotate(.4deg);} }

.es-stone-btn { position:absolute; left:50%; top:41%; transform:translate(-50%,-50%);
  width:42%; aspect-ratio:1; border:none; background:none; padding:0; cursor:pointer; z-index:6;
  display:grid; place-items:center; }
.es-stone-glow { position:absolute; inset:-46%; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle, hsl(172 90% 60% / .85), hsl(186 90% 50% / .4) 42%, transparent 68%);
  animation: es-stone-glow 3.2s ease-in-out infinite; }
@keyframes es-stone-glow { 0%,100%{ transform:scale(.92); opacity:.7;} 50%{ transform:scale(1.12); opacity:1;} }
.es-stone-ring { position:absolute; inset:2%; border-radius:50%; pointer-events:none;
  border:1.5px solid hsl(174 90% 70% / .55); animation: es-stone-ring 3.6s ease-out infinite; }
.es-stone-ring.d2 { animation-delay:1.8s; }
@keyframes es-stone-ring { 0%{ transform:scale(.74); opacity:.9;} 100%{ transform:scale(1.5); opacity:0;} }
.es-stone { position:relative; width:100%; height:100%; object-fit:contain; z-index:2;
  filter:drop-shadow(0 0 14px hsl(176 90% 55% / .8)) saturate(1.12) brightness(1.04);
  animation: es-stone-pulse 3.2s ease-in-out infinite; transition: filter .3s ease; }
@keyframes es-stone-pulse { 0%,100%{ filter:drop-shadow(0 0 12px hsl(176 90% 55% / .65)) saturate(1.1) brightness(1.02);} 50%{ filter:drop-shadow(0 0 26px hsl(176 95% 60% / .95)) saturate(1.25) brightness(1.12);} }
.es-stone-spec { position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:3; mix-blend-mode:screen;
  background:radial-gradient(circle at 38% 32%, hsl(0 0% 100% / .55), transparent 30%); }
.es-stone-btn:hover .es-stone { filter:drop-shadow(0 0 30px hsl(176 95% 62% / 1)) saturate(1.3) brightness(1.16); }
.es-stone-btn:hover .es-stone-glow { transform:scale(1.18); opacity:1; }
.es-stone-btn:active { transform:translate(-50%,-50%) scale(.95); }

.es-cta { position:absolute; bottom:clamp(5vh,8vh,12vh); left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:14px;
  transform: translate(calc(var(--mx) * 4px), calc(var(--my) * 3px)); transition: opacity .4s ease; }
.es-cta-line { width:46px; height:1px; background:linear-gradient(90deg, transparent, hsl(168 50% 60% / .7)); }
.es-cta-line:last-child { background:linear-gradient(90deg, hsl(168 50% 60% / .7), transparent); }
.es-cta-text { color:hsl(166 45% 74%); letter-spacing:.26em; text-transform:uppercase; font-size:.74rem; white-space:nowrap; animation: es-cta 2.6s ease-in-out infinite; }
@keyframes es-cta { 0%,100%{ opacity:.55;} 50%{ opacity:1;} }

/* ---- camera dives into the stone → turquoise then white ---- */
.es-flash { position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 47%, #ffffff 0%, hsl(176 95% 75%) 14%, hsl(180 90% 55% / .85) 34%, transparent 64%); }
.enter-scene.phase-zooming { cursor:default; }
.enter-scene.phase-zooming .es-altar { animation: es-altar-dive 1.38s cubic-bezier(.55,0,.85,.2) forwards; }
@keyframes es-altar-dive {
  0%   { transform:translate(-50%,-48%) scale(1); filter:brightness(1); }
  55%  { filter:brightness(1.25) saturate(1.2); }
  100% { transform:translate(-50%,-48%) scale(15); filter:brightness(2.4) saturate(1.4); }
}
.enter-scene.phase-zooming .es-bg { transform:scale(1.7); filter:blur(7px) brightness(1.1); }
.enter-scene.phase-zooming .es-stone { animation: es-stone-burn 1.38s ease-in forwards; }
@keyframes es-stone-burn { 0%{ filter:drop-shadow(0 0 18px hsl(176 95% 60%)) brightness(1.1);} 100%{ filter:drop-shadow(0 0 60px #fff) brightness(3) saturate(.4);} }
.enter-scene.phase-zooming .es-flash { animation: es-flash 1.38s cubic-bezier(.6,0,.9,.3) forwards; }
@keyframes es-flash { 0%{ opacity:0; transform:scale(.5);} 50%{ opacity:.5;} 100%{ opacity:1; transform:scale(1.6);} }
.enter-scene.phase-zooming .es-wordmark,
.enter-scene.phase-zooming .es-cta,
.enter-scene.phase-zooming .es-fog,
.enter-scene.phase-zooming .es-vignette { opacity:0; }

/* ---- ambient dust motes drifting through the scene ---- */
.dust-field { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.dust-mote { position:absolute; border-radius:50%; opacity:0;
  background:radial-gradient(circle, #fff 0%, hsl(52 95% 86% / .95) 35%, hsl(166 70% 80% / .4) 60%, transparent 74%);
  box-shadow:0 0 6px hsl(50 90% 85% / .8), 0 0 14px hsl(168 70% 78% / .5);
  animation: dust-float var(--dur,20s) linear var(--delay,0s) infinite; }
@keyframes dust-float {
  0%   { transform:translate(0,0) scale(1); opacity:0; }
  12%  { opacity:var(--op,.4); }
  88%  { opacity:var(--op,.4); }
  100% { transform:translate(var(--drift,20px), -130px) scale(.65); opacity:0; }
}
.enter-scene.phase-zooming .dust-field { opacity:0; transition:opacity .5s ease; }

/* ---- white-flash → blur-in handoff into the realm ---- */
.realm-veil { position:fixed; inset:0; z-index:9400; pointer-events:none; background:#fff;
  animation: realm-veil-out 1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes realm-veil-out {
  0%   { opacity:1; -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px); }
  35%  { opacity:.92; }
  100% { opacity:0; -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0); }
}

/* ---- entry artifacts (CSS/SVG placeholders) ---- */
.art-obj { position:relative; width:100%; height:100%; display:grid; place-items:center; }
/* amulet */
.art-amulet .amu-svg { width:70%; height:88%; filter:drop-shadow(0 0 26px hsl(38 85% 50% / .55)); animation: amu-bob 5s ease-in-out infinite; }
@keyframes amu-bob { 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-8px) rotate(1deg);} }
.amu-crest { fill:url(#none); fill:hsl(36 38% 22%); stroke:hsl(42 70% 58%); stroke-width:3; }
.amu-inner { fill:hsl(26 40% 12%); stroke:hsl(40 60% 48% / .6); stroke-width:1.5; }
.amu-glow { position:absolute; width:46%; height:46%; border-radius:50%; background:radial-gradient(circle, hsl(40 95% 60% / .9), transparent 65%); filter:blur(6px); animation: es-halo 3s ease-in-out infinite; }
.amu-flame { position:absolute; top:38%; width:24%; height:30%; }
.amu-flame span { position:absolute; left:50%; bottom:0; width:60%; height:100%; transform:translateX(-50%); border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:linear-gradient(180deg, hsl(48 100% 75%), hsl(30 100% 55%)); filter:blur(1px); animation: flame-flick 1.1s ease-in-out infinite; }
.amu-flame span:last-child { width:36%; background:linear-gradient(180deg,#fff,hsl(45 100% 70%)); animation-duration:.8s; }
@keyframes flame-flick { 0%,100%{ transform:translateX(-50%) scaleY(1) skewX(-2deg);} 50%{ transform:translateX(-50%) scaleY(1.18) skewX(3deg);} }
/* brazier */
.art-brazier { align-items:flex-end; }
.brz-glow { position:absolute; top:18%; width:55%; height:55%; border-radius:50%; background:radial-gradient(circle, hsl(28 100% 58% / .85), transparent 64%); filter:blur(8px); animation: es-halo 2.6s ease-in-out infinite; }
.brz-bowl { position:absolute; bottom:14%; width:62%; height:20%; border-radius:0 0 50% 50%/0 0 100% 100%;
  background:linear-gradient(180deg, hsl(30 30% 26%), hsl(24 26% 14%)); box-shadow:inset 0 6px 10px rgba(0,0,0,.5), 0 0 0 3px hsl(36 40% 30%); }
.brz-coals { position:absolute; bottom:30%; width:46%; height:8%; border-radius:50%; background:radial-gradient(circle,hsl(20 100% 55%),hsl(0 80% 30%)); filter:blur(2px); animation: es-cta 1.4s ease-in-out infinite; }
.brz-flame { position:absolute; bottom:30%; width:40%; height:46%; }
.brz-flame span { position:absolute; left:50%; bottom:0; transform:translateX(-50%); border-radius:50% 50% 48% 48%/64% 64% 38% 38%;
  background:linear-gradient(180deg, hsl(48 100% 72%), hsl(24 100% 52%)); filter:blur(1.5px); animation: flame-flick 1s ease-in-out infinite; }
.brz-flame span:nth-child(1){ width:70%; height:100%; }
.brz-flame span:nth-child(2){ width:46%; height:80%; background:linear-gradient(180deg,hsl(50 100% 80%),hsl(34 100% 60%)); animation-duration:.85s; }
.brz-flame span:nth-child(3){ width:24%; height:58%; background:linear-gradient(180deg,#fff,hsl(48 100% 74%)); animation-duration:.7s; }
/* tome */
.art-tome .tome-svg { width:84%; filter:drop-shadow(0 0 24px hsl(265 70% 55% / .5)); animation: amu-bob 6s ease-in-out infinite; }
.tome-cover { fill:hsl(28 34% 18%); stroke:hsl(42 60% 50%); stroke-width:3; }
.tome-page { fill:hsl(40 40% 82%); opacity:.9; }
.tome-spine { stroke:hsl(42 60% 50%); stroke-width:2.5; }
.tome-glow { position:absolute; width:50%; height:40%; border-radius:50%; background:radial-gradient(circle, hsl(265 90% 65% / .8), transparent 64%); filter:blur(8px); animation: es-halo 3s ease-in-out infinite; }
.tome-runes { position:absolute; display:flex; gap:14px; font-size:1.5rem; color:hsl(265 90% 80%); text-shadow:0 0 14px hsl(265 90% 65%); }
.tome-runes span { animation: es-cta 2s ease-in-out infinite; }
.tome-runes span:nth-child(2){ animation-delay:.4s; } .tome-runes span:nth-child(3){ animation-delay:.8s; }
/* rune sigil */
.rune-glow { position:absolute; width:58%; height:58%; border-radius:50%; background:radial-gradient(circle, hsl(190 90% 60% / .7), transparent 64%); filter:blur(8px); animation: es-halo 3s ease-in-out infinite; }
.rune-ring { position:absolute; width:88%; height:88%; fill:none; }
.rune-ring circle, .rune-ring polygon { fill:none; stroke:hsl(40 80% 62%); stroke-width:2; filter:drop-shadow(0 0 8px hsl(40 85% 55%)); }
.rune-ring-1 { animation: spin-cw 24s linear infinite; }
.rune-ring-2 { animation: spin-ccw 16s linear infinite; }
.rune-ring-3 { width:62%; height:62%; animation: spin-cw 30s linear infinite; }
.rune-ring-3 polygon { stroke:hsl(40 80% 62% / .7); }
@keyframes spin-cw { to{ transform:rotate(360deg);} }
@keyframes spin-ccw { to{ transform:rotate(-360deg);} }
.rune-core { position:absolute; font-size:2.6rem; color:#fff; text-shadow:0 0 20px hsl(40 95% 60%); animation: es-halo 2.4s ease-in-out infinite; }

/* ============================================================
   ROUND TABLE — candlelit roster of the party
   ============================================================ */
.round-table { position:relative; width:min(420px,86vw); aspect-ratio:1/.66; margin:0 auto 1.6rem; }
.rt-tabletop { position:absolute; left:14%; right:14%; top:18%; bottom:18%; border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 40%, hsl(30 36% 24%), hsl(24 32% 14%) 70%);
  box-shadow:0 18px 40px rgba(0,0,0,.6), inset 0 0 0 4px hsl(36 40% 18%), inset 0 0 0 7px hsl(40 50% 38% / .5), inset 0 -10px 30px rgba(0,0,0,.5); }
.rt-grain { position:absolute; inset:6px; border-radius:50%; opacity:.4; mix-blend-mode:overlay;
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0 5px, rgba(0,0,0,.18) 5px 7px); }
.rt-sigil { position:absolute; inset:0; display:grid; place-items:center; font-size:1.8rem; color:hsl(40 60% 50% / .6); }
.rt-candle-c { position:absolute; left:50%; top:30%; transform:translate(-50%,-50%); }
.rt-candle { width:8px; height:18px; border-radius:3px; background:linear-gradient(180deg,hsl(42 40% 86%),hsl(38 30% 70%)); position:relative; }
.rt-flame { position:absolute; left:50%; top:-9px; transform:translateX(-50%); width:7px; height:12px; border-radius:50% 50% 50% 50%/65% 65% 40% 40%;
  background:linear-gradient(180deg,#fff,hsl(38 100% 58%)); filter:blur(.4px); box-shadow:0 0 14px hsl(38 100% 60%); animation: flame-flick 1s ease-in-out infinite; }
.rt-flame.sm { width:5px; height:8px; box-shadow:0 0 9px hsl(38 100% 60%); }
.rt-ring { position:absolute; inset:0; }
.rt-seat { position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px;
  transform: rotate(var(--ang)) translateY(calc(-1 * min(210px,42vw) * .5)) rotate(calc(-1 * var(--ang))); }
.rt-chair { width:64px; height:64px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:hsl(24 26% 12% / .8); box-shadow:inset 0 0 0 1px hsl(40 40% 40% / .3); position:relative; }
.rt-chair.empty { opacity:.4; }
.rt-chair.taken { box-shadow:inset 0 0 0 1px hsl(40 70% 55% / .6), 0 0 16px hsl(38 70% 45% / .3); }
.rt-portrait { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:hsl(40 75% 62%);
  background:radial-gradient(circle at 50% 35%, hsl(34 30% 26%), hsl(24 24% 12%)); }
.rt-name { font-family:var(--font-display); font-weight:600; font-size:.6rem; color:hsl(38 35% 82%); max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rt-empty-dot { width:8px; height:8px; border-radius:50%; background:hsl(40 40% 40% / .4); }
.rt-candle-seat { position:absolute; top:-12px; width:5px; height:11px; }
.rt-caption { position:absolute; left:0; right:0; bottom:-2%; text-align:center; font-size:.72rem; letter-spacing:.04em; color:hsl(36 28% 60%); }

/* ============================================================
   PREMIUM PACK-RIP — sealed card bursts open with light shards
   ============================================================ */
.crf-flare.premium { background:radial-gradient(circle, hsl(45 95% 75% / .35), transparent 60%); width:640px; height:640px; }
.crf-tilt.is-sealed .crf-card { filter:brightness(.5) saturate(.6); }
.crf-tilt.is-open .crf-card { animation: crf-burst .55s cubic-bezier(.2,1.4,.3,1); }
@keyframes crf-burst { 0%{ transform:scale(.86) rotateX(var(--rx,0)) rotateY(var(--ry,0));} 55%{ transform:scale(1.08);} 100%{ transform:scale(1) rotateX(var(--rx,0)) rotateY(var(--ry,0));} }
.crf-seal { position:absolute; z-index:7; inset:0; display:grid; place-items:center; pointer-events:none;
  animation: crf-seal-break .62s ease-in forwards; }
.crf-seal-wax { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; font-size:2.2rem; color:hsl(42 90% 80%);
  background:radial-gradient(circle at 40% 35%, hsl(8 70% 45%), hsl(0 65% 28%));
  box-shadow:0 0 0 4px hsl(38 70% 55% / .5), 0 8px 24px rgba(0,0,0,.6); }
@keyframes crf-seal-break { 0%{ opacity:1; transform:scale(1);} 70%{ opacity:1; transform:scale(1.15);} 100%{ opacity:0; transform:scale(2.4) rotate(40deg);} }
.crf-shards { position:absolute; z-index:6; width:0; height:0; pointer-events:none; }
.crf-shard { position:absolute; width:5px; height:26px; left:0; top:0; border-radius:3px;
  background:linear-gradient(180deg, #fff, hsl(44 95% 60%)); opacity:0; transform-origin:50% 0; }
.crf-shards.go .crf-shard { animation: crf-shard .8s ease-out forwards; animation-delay:calc(var(--i) * 12ms); }
@keyframes crf-shard { 0%{ opacity:1; transform:rotate(var(--a)) translateY(20px) scaleY(.4);} 100%{ opacity:0; transform:rotate(var(--a)) translateY(260px) scaleY(1.4);} }

/* ============================================================
   BEAT GATE — rune-door cracking with light as progress fills
   ============================================================ */
.gate-runes { position:absolute; top:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8vh; z-index:3; pointer-events:none; }
.gate-runes-l { right:6%; } .gate-runes-r { left:6%; }
.grune { font-size:clamp(1.4rem,3vw,2.4rem); color:hsl(40 50% 40% / .5); transition:color .4s, text-shadow .4s, transform .4s; }
.grune.lit { color:hsl(44 95% 72%); text-shadow:0 0 18px hsl(40 95% 60%), 0 0 40px hsl(38 90% 50% / .6); transform:scale(1.12); }
.gate-crack { position:absolute; left:50%; top:0; bottom:0; width:46px; transform:translateX(-50%); z-index:4; pointer-events:none; opacity:calc(var(--crack)); }
.gate-crack svg { width:100%; height:100%; }
.gate-crack-main, .gate-crack-branch { fill:none; stroke:hsl(44 100% 78%); filter:drop-shadow(0 0 8px hsl(40 95% 60%)); }
.gate-crack-main { stroke-width:2.5; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--crack)); pathLength:1;
  stroke-dasharray:520; stroke-dashoffset:calc(520 - 520 * var(--crack)); transition:stroke-dashoffset .5s ease; }
.gate-crack-branch { stroke-width:1.4; opacity:calc(var(--crack) * var(--crack)); transition:opacity .5s; }
.is-wrong .grune.lit { color:hsl(2 85% 64%); text-shadow:0 0 16px hsl(0 90% 55%); }

/* ============================================================
   MAIN SCENE — crossfade + parallax depth
   ============================================================ */
.scene-wrap { position:absolute; inset:0; z-index:0; overflow:hidden; --sx:0; --sy:0; }
.scene-parallax { position:absolute; inset:-5%; transform: translate(calc(var(--sx) * -16px), calc(var(--sy) * -12px)) scale(1.06); will-change:transform; }
.scene-bg .scene-video { transform:scale(1.04) translateZ(0); }
.scene-vignette { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%, transparent 50%, hsl(20 18% 4% / .7) 100%); }
.scene-emberglow { position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background:radial-gradient(circle at 50% 120%, hsl(38 80% 50% / .25), transparent 55%); }
.scene-fade-in { animation: scene-cf-in 1.3s ease forwards; }
.scene-fade-out { animation: scene-cf-out 1.3s ease forwards; z-index:0; }
@keyframes scene-cf-in { 0%{ opacity:0; transform:translate(calc(var(--sx) * -16px), calc(var(--sy) * -12px)) scale(1.14);} 100%{ opacity:1; } }
@keyframes scene-cf-out { 0%{ opacity:1;} 100%{ opacity:0; transform:translate(calc(var(--sx) * -16px), calc(var(--sy) * -12px)) scale(1.02);} }

/* ============================================================
   HIT FEEDBACK — directional slash, crack, heal motes, coin flash
   ============================================================ */
.fx-damage { position:fixed; inset:0; z-index:5500; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, transparent 40%, hsl(0 80% 30% / .55) 100%);
  animation: fx-dmg-vig .6s ease-out; }
.fx-damage.big { animation: fx-dmg-vig .8s ease-out; }
@keyframes fx-dmg-vig { 0%{ opacity:0;} 18%{ opacity:1;} 100%{ opacity:0;} }
.fx-dmg-slash { position:absolute; inset:0; overflow:hidden; }
.fx-dmg-slash::before { content:''; position:absolute; top:-20%; left:-30%; width:160%; height:14%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent); transform:rotate(-22deg);
  filter:blur(1px) drop-shadow(0 0 8px hsl(0 90% 60%)); animation: fx-slash .42s ease-out forwards; }
@keyframes fx-slash { 0%{ top:-20%; left:-60%; opacity:0;} 25%{ opacity:1;} 100%{ top:120%; left:30%; opacity:0;} }
.fx-dmg-crack { position:absolute; inset:0;
  background:
    linear-gradient(118deg, transparent 49.4%, rgba(255,255,255,.5) 49.7%, transparent 50%),
    linear-gradient(70deg, transparent 39.5%, rgba(255,255,255,.4) 39.8%, transparent 40.2%);
  opacity:0; animation: fx-crack .7s ease-out; }
@keyframes fx-crack { 0%{ opacity:0;} 12%{ opacity:.9;} 60%{ opacity:.6;} 100%{ opacity:0;} }
.fx-heal { position:fixed; inset:0; z-index:5500; pointer-events:none;
  background:radial-gradient(ellipse at 50% 80%, hsl(150 70% 45% / .4), transparent 60%); animation: fx-heal-glow 1s ease-out; }
@keyframes fx-heal-glow { 0%{ opacity:0;} 25%{ opacity:1;} 100%{ opacity:0;} }
.fx-heal-motes { position:absolute; inset:0; background-image:radial-gradient(circle, hsl(140 90% 75%) 1px, transparent 1.5px); background-size:42px 42px;
  mask:linear-gradient(0deg, #000, transparent); -webkit-mask:linear-gradient(0deg, #000, transparent); opacity:0; animation: fx-motes 1s ease-out; }
@keyframes fx-motes { 0%{ opacity:0; background-position:0 40px;} 30%{ opacity:.8;} 100%{ opacity:0; background-position:0 -30px;} }
.fx-coinflash { position:fixed; inset:0; z-index:5400; pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, hsl(44 95% 60% / .3), transparent 55%); animation: fx-heal-glow .9s ease-out; }
.fx-float-num.dmg { text-shadow:0 0 18px hsl(0 90% 55%), 0 2px 4px rgba(0,0,0,.8); }

/* ============================================================
   MODERATOR — DOTA 2 HUD SKIN (scoped to .host-screen only, so the
   player & Main screens keep the Torchlit candlelight look).
   Cool slate panels · beveled angular controls · teal "active" glow ·
   bronze-gold value accents · steel hairlines.
   ============================================================ */
.host-screen {
  /* re-theme the design tokens for everything inside the moderator */
  --background: 207 28% 7%;
  --surface: 207 22% 12%;
  --foreground: 200 16% 86%;
  --muted-foreground: 202 10% 52%;
  --primary: 41 60% 56%;            /* bronze-gold — value / headers / coins */
  --primary-foreground: 207 30% 7%;
  --border: 202 16% 26%;            /* cool steel */
  --card-glow: 188 62% 48%;
  --d2-teal: 188 66% 52%;           /* interactive / active / live */
  --d2-teal-dim: 190 40% 34%;
  --d2-steel-hi: 200 22% 40%;
  --glass-tint: 0;
  color: hsl(var(--foreground));
  background:
    radial-gradient(1200px 700px at 50% -8%, hsl(196 50% 16% / .5), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, hsl(28 40% 14% / .35), transparent 55%),
    linear-gradient(180deg, hsl(207 30% 9%), hsl(207 32% 6%));
}
/* faint diagonal weave for the HUD backdrop */
.host-screen::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(135deg, hsl(200 30% 60% / .025) 0 1px, transparent 1px 7px);
  mask: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 80%);
}
.host-screen .host-wrap { position:relative; z-index:1; }

/* ---- panels: dark beveled steel plates ---- */
.host-screen .liquid-glass {
  background: linear-gradient(180deg, hsl(207 22% 14%), hsl(207 26% 9.5%));
  backdrop-filter: none;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 hsl(var(--d2-steel-hi) / .35),
    inset 0 0 0 1px hsl(202 18% 20%),
    inset 0 -16px 30px rgba(0,0,0,.32),
    0 8px 22px rgba(0,0,0,.5);
}
.host-screen .liquid-glass::before { display:none; }      /* drop the warm gradient ring */
/* bronze top hairline + teal lead corner — the Dota plate signature */
.host-screen .host-card, .host-screen .pcard { position:relative; }
.host-screen .host-card::before {
  content:''; position:absolute; left:10px; right:10px; top:0; height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary)/.55) 18%, hsl(var(--primary)/.55) 82%, transparent);
  opacity:.7; pointer-events:none;
}
.host-screen .host-card::after {
  content:''; position:absolute; left:0; top:0; width:14px; height:14px; pointer-events:none;
  border-top:2px solid hsl(var(--d2-teal)/.8); border-left:2px solid hsl(var(--d2-teal)/.8);
  border-top-left-radius:4px;
}

/* ---- headings ---- */
.host-screen .host-head h1 {
  color: hsl(44 45% 82%); letter-spacing:.18em; text-transform:uppercase;
  text-shadow: 0 1px 0 #000, 0 0 22px hsl(var(--primary)/.25);
}
.host-screen .host-head .sub { color: hsl(var(--d2-teal)/.8); letter-spacing:.22em; }
.host-screen .section-label {
  color: hsl(200 18% 78%); letter-spacing:.16em; text-transform:uppercase;
  border-bottom: 1px solid hsl(202 16% 22%); padding-bottom:.5rem;
}
.host-screen .section-label svg { color: hsl(var(--d2-teal)); }
.host-screen .section-sub {
  color: hsl(var(--d2-teal)/.85); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem;
}

/* ---- chips & tiny buttons: beveled rectangular keys ---- */
.host-screen .chip-btn, .host-screen .tiny-btn {
  border-radius: 3px;
  background: linear-gradient(180deg, hsl(204 18% 22%), hsl(206 22% 14%));
  color: hsl(200 16% 82%);
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.35), inset 0 0 0 1px hsl(204 16% 26%), 0 2px 5px rgba(0,0,0,.4);
  transition: filter .14s, box-shadow .14s, color .14s, transform .1s;
}
.host-screen .chip-btn:hover, .host-screen .tiny-btn:hover {
  filter:none; color:#fff;
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.5), inset 0 0 0 1px hsl(var(--d2-teal)/.55), 0 0 14px hsl(var(--d2-teal)/.25);
}
.host-screen .chip-btn:active, .host-screen .tiny-btn:active { transform: translateY(1px); }
.host-screen .chip-btn.on {
  color: hsl(190 80% 88%);
  background: linear-gradient(180deg, hsl(190 55% 26%), hsl(193 60% 16%));
  box-shadow: inset 0 1px 0 hsl(var(--d2-teal)/.55), inset 0 0 0 1px hsl(var(--d2-teal)/.8), 0 0 16px hsl(var(--d2-teal)/.4);
}
.host-screen .danger-outline { box-shadow: inset 0 0 0 1px hsl(var(--damage)/.7) !important; color: hsl(2 75% 64%); }
.host-screen .heal-outline { box-shadow: inset 0 0 0 1px hsl(var(--heal)/.7) !important; color: hsl(145 55% 60%); }

/* ---- inputs ---- */
.host-screen .tinput {
  background: hsl(206 26% 9%); border:1px solid hsl(204 16% 24%); border-radius:3px;
  color: hsl(200 16% 86%); box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
.host-screen .tinput:focus { border-color: hsl(var(--d2-teal)/.8); box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 1px hsl(var(--d2-teal)/.4); }

/* ---- zone tabs: Dota segmented control ---- */
.host-screen .zone-switch {
  border-radius:4px; background: hsl(207 26% 9%);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 1px hsl(204 16% 22%);
}
.host-screen .zone-btn { border-radius:3px; color: hsl(202 12% 60%); }
.host-screen .zone-btn:hover { color:#fff; }
.host-screen .zone-btn.on {
  color: hsl(192 85% 92%);
  background: linear-gradient(180deg, hsl(190 60% 30%), hsl(193 64% 18%));
  box-shadow: inset 0 1px 0 hsl(var(--d2-teal)/.6), 0 0 0 1px hsl(var(--d2-teal)/.7), 0 4px 14px hsl(var(--d2-teal)/.3);
}
.host-screen .zone-badge { background: hsl(var(--damage)); color:#fff; box-shadow:0 0 10px hsl(var(--damage)/.6); }

/* ---- Main Stage: hero panel + ability tiles ---- */
.host-screen .host-card.stage-card {
  box-shadow:
    inset 0 1px 0 hsl(var(--d2-steel-hi)/.4),
    inset 0 0 0 1px hsl(var(--d2-teal)/.28),
    inset 0 -16px 34px rgba(0,0,0,.34),
    0 10px 30px rgba(0,0,0,.55);
}
.host-screen .stage-card::before { background: linear-gradient(90deg, transparent, hsl(var(--d2-teal)/.6) 18%, hsl(var(--d2-teal)/.6) 82%, transparent); opacity:.85; }
.host-screen .stage-now-pill {
  color: hsl(190 80% 86%); background: hsl(190 55% 16%);
  box-shadow: inset 0 0 0 1px hsl(var(--d2-teal)/.5);
}
.host-screen .stage-btn {
  border-radius:4px;
  background: linear-gradient(180deg, hsl(205 18% 18%), hsl(207 24% 11%));
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.3), inset 0 0 0 1px hsl(204 16% 24%), inset 0 -3px 0 rgba(0,0,0,.45);
  color: hsl(200 14% 80%);
}
.host-screen .stage-btn:hover { filter:none; box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.45), inset 0 0 0 1px hsl(var(--d2-teal)/.55), 0 0 16px hsl(var(--d2-teal)/.25); color:#fff; }
.host-screen .stage-btn.on, .host-screen .stage-btn.sel {
  color: hsl(190 85% 90%);
  background: linear-gradient(180deg, hsl(190 52% 24%), hsl(193 58% 14%));
  box-shadow: inset 0 1px 0 hsl(var(--d2-teal)/.55), inset 0 0 0 1.5px hsl(var(--d2-teal)/.85), 0 0 22px hsl(var(--d2-teal)/.35);
}
.host-screen .stage-btn .sb-top { letter-spacing:.04em; }
.host-screen .stage-reveal { border-top:1px solid hsl(204 16% 22%); }
.host-screen .pick-tile { border-radius:4px; background: hsl(207 22% 12%); box-shadow: inset 0 0 0 1px hsl(204 16% 24%); }
.host-screen .pick-tile.on { box-shadow: inset 0 0 0 1.5px hsl(var(--d2-teal)/.85), 0 0 16px hsl(var(--d2-teal)/.3); }

/* ---- player control cards: Dota hero plates ---- */
.host-screen .pcard {
  background: linear-gradient(180deg, hsl(207 22% 13.5%), hsl(207 26% 9%));
  border-radius:4px;
}
.host-screen .pcard .pn { color: hsl(44 42% 84%); letter-spacing:.02em; }
.host-screen .pcard .pc { color: hsl(var(--d2-teal)/.85); }
.host-screen .lvl-badge { background: hsl(41 50% 16%); color: hsl(44 70% 70%); box-shadow: inset 0 0 0 1px hsl(var(--primary)/.5); border-radius:3px; }
.host-screen .statusdot.alive { background: hsl(var(--d2-teal)); box-shadow:0 0 9px hsl(var(--d2-teal)); }
.host-screen .mini-hp {
  background: hsl(206 30% 7%); border-radius:2px; overflow:hidden;
  box-shadow: inset 0 0 0 1px hsl(204 16% 22%), inset 0 2px 4px rgba(0,0,0,.6);
}
.host-screen .mini-hp-fill { box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.host-screen .amt-sel { border-radius:3px; background:hsl(206 26% 9%); box-shadow:inset 0 0 0 1px hsl(204 16% 24%); }
.host-screen .amt-sel button.on { background: linear-gradient(180deg, hsl(190 55% 26%), hsl(193 60% 16%)); color:hsl(190 85% 90%); }
.host-screen .stepper { border-radius:3px; }

/* ---- live status dots → teal ---- */
.host-screen .gate-live-dot, .host-screen .sb-live-dot, .host-screen .live-dot { background: hsl(var(--d2-teal)); box-shadow:0 0 8px hsl(var(--d2-teal)); }
.host-screen .gate-live { color: hsl(190 30% 70%); }

/* ---- order chips / assignment keep their per-note colour but sit on steel ---- */
.host-screen .order-chip { border-radius:3px; }

/* ---- request / inbox cards ---- */
.host-screen .buyreq, .host-screen .usereq, .host-screen .req-row {
  border-radius:3px; background: hsl(207 24% 11%); box-shadow: inset 0 0 0 1px hsl(204 16% 22%);
}

/* ---- zone intro banner ---- */
.host-screen .zone-intro { border-radius:4px; box-shadow: inset 0 0 0 1px hsl(var(--d2-teal)/.25), inset 0 1px 0 hsl(var(--d2-steel-hi)/.3); }
.host-screen .zone-intro-t { color: hsl(44 42% 84%); }
.host-screen .zone-intro svg { color: hsl(var(--d2-teal)); }

/* ---- gate pop-down trim ---- */
.host-screen .host-card.gate-panel {
  box-shadow:
    inset 0 1px 0 hsl(var(--d2-steel-hi)/.4),
    inset 0 0 0 1px hsl(var(--d2-teal)/.4),
    inset 0 -16px 30px rgba(0,0,0,.32),
    0 8px 24px rgba(0,0,0,.55);
}
.host-screen .gate-panel::before { background: linear-gradient(90deg, transparent, hsl(var(--d2-teal)/.6) 18%, hsl(var(--d2-teal)/.6) 82%, transparent); }

/* ---- exit / reset chrome on the moderator ---- */
.host-screen .leave-seat { border-radius:3px; }

/* ---- moderator scrollbar ---- */
.host-screen::-webkit-scrollbar-thumb { background: hsl(204 16% 26%); }
.host-screen::-webkit-scrollbar-thumb:hover { background: hsl(var(--d2-teal)/.6); }

/* ============================================================
   SHOP SYSTEM — cinematic NPC entrance, fly-to-target purchases,
   and the close-out ledger (Main + player screens; warm theme).
   ============================================================ */
/* shop backdrop OWNS the whole Main screen (image or video) */
.shop-stage-bg { position:fixed; inset:0; z-index:4; pointer-events:none;
  transition: filter .9s ease, transform .9s ease, opacity .9s ease; }
.shop-stage-img { background-size:cover; background-position:center; }
.shop-stage-video { width:100%; height:100%; object-fit:cover; }
.shop-stage-fallback { background:
  radial-gradient(ellipse 80% 60% at 50% 32%, hsl(36 44% 22% / .55), transparent 70%),
  radial-gradient(ellipse 90% 70% at 50% 100%, hsl(28 40% 12%), hsl(220 28% 7%) 72%); }
.shop-stage-bg.dim { filter: blur(7px) brightness(.45) saturate(.85); transform: scale(1.05); }
.shop-stage-scrim { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .8s ease;
  background: radial-gradient(ellipse at 50% 40%, hsl(207 30% 5% / .25), hsl(207 32% 4% / .72)); }
.shop-stage-scrim.on { opacity:1; }
.d2shop-bgvideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; filter:saturate(.9) brightness(.7); }

/* NPC keeper stage — full-screen centred, rises in, then drops as the panel opens */
.shop-npc-stage { position:fixed; inset:0; z-index:24; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
  transition: opacity .55s ease, transform .55s cubic-bezier(.3,.7,.3,1); }
.shop-npc-stage.docked { opacity:0; transform: translateY(46px) scale(.96); }
.shop-npc { animation: shop-npc-rise 1.05s cubic-bezier(.2,.7,.3,1) both;
  width:clamp(300px,40vw,560px); height:clamp(380px,58vh,720px); filter: drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
@keyframes shop-npc-rise {
  0%   { opacity:0; transform: translateY(120px) scale(.96); }
  60%  { opacity:1; }
  80%  { transform: translateY(-6px) scale(1.02); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
.shop-npc-art { display:block; width:100%; height:100%; }
.shop-welcome { display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:.85rem 1.6rem; border-radius:14px; max-width:min(560px,82vw); text-align:center;
  animation: shop-welcome-in .55s ease-out 1.0s both; }
@keyframes shop-welcome-in { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.shop-welcome-name { font-size:1.05rem; color:hsl(var(--primary)); letter-spacing:.05em; }
.shop-welcome-line { font-size:.92rem; color:hsl(var(--foreground)/.86); font-style:italic; line-height:1.4; }
.d2main-keeper { color:hsl(var(--primary)/.85); text-transform:none; letter-spacing:.02em; font-style:italic; }

/* item panel waits for the NPC, then slides up */
.shop-panel.pending { opacity:0; transform: translateY(46px) scale(.97); pointer-events:none; }
.shop-panel.in { animation: shop-panel-open .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes shop-panel-open { from{opacity:0; transform: translateY(46px) scale(.95);} to{opacity:1; transform: translateY(0) scale(1);} }

/* purchase received — the target health card / inventory pulses gold */
@keyframes receive-pulse { 0%,100%{ box-shadow:0 0 0 0 hsl(var(--primary)/0);} 40%{ box-shadow:0 0 30px 7px hsl(var(--primary)/.8), inset 0 0 0 1px hsl(var(--primary)/.7);} }
.fx-receive { animation: receive-pulse .6s ease-out; border-radius:14px; }

/* ---- purchase SHOWCASE (Genshin-grade gather → orbit → distribute) ---- */
.showcase-layer { position:fixed; inset:0; z-index:10000; pointer-events:none; }
.showcase-tile { position:fixed; left:0; top:0; width:62px; height:62px; display:grid; place-items:center;
  border-radius:16px; will-change:transform;
  background:radial-gradient(circle at 50% 32%, hsl(var(--surface)/.96), hsl(var(--background)/.96));
  border:1px solid hsl(var(--primary)/.6);
  box-shadow:0 0 20px hsl(var(--primary)/.6), inset 0 0 16px hsl(var(--primary)/.2); overflow:hidden; }
.showcase-tile-glyph { font-size:30px; line-height:1; color:hsl(var(--primary)); filter:drop-shadow(0 0 8px hsl(var(--primary)/.85)); }
.showcase-tile-img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 12px hsl(var(--primary)/.7)); }
.showcase-tile::after { content:''; position:absolute; inset:0; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(110deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  background-size:250% 100%; animation:scshow-sweep 2.2s ease-in-out infinite; }
@keyframes scshow-sweep { 0%{background-position:-150% 0;} 100%{background-position:250% 0;} }
.glow-ring { position:fixed; border-radius:9999px; transform:translate(-50%,-50%); pointer-events:none;
  border:2px solid hsl(var(--primary)); box-shadow:0 0 44px hsl(var(--primary)), inset 0 0 30px hsl(var(--primary)/.4);
  animation:scshow-ring .9s ease-out forwards; }
@keyframes scshow-ring { 0%{ transform:translate(-50%,-50%) scale(.5); opacity:.95; } 100%{ transform:translate(-50%,-50%) scale(1.55); opacity:0; } }
.spark { position:fixed; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; pointer-events:none;
  background:hsl(var(--primary)); box-shadow:0 0 8px hsl(var(--primary));
  animation:scshow-spark .8s ease-out forwards; }
@keyframes scshow-spark { to{ transform:translate(var(--tx),var(--ty)) scale(0); opacity:0; } }

/* flying purchase sprite — arcs from the wares to its destination */
.flight-layer { position:fixed; inset:0; z-index:9998; pointer-events:none; }
.flight-sprite { position:fixed; margin-left:-18px; margin-top:-18px; width:36px; height:36px;
  display:grid; place-items:center; color:hsl(var(--primary));
  filter: drop-shadow(0 0 12px hsl(var(--primary)/.85));
  animation: flight-arc .9s cubic-bezier(.5,.05,.5,1) forwards; }
.flight-sprite.inv { animation-duration: 1s; }
.flight-sprite::after { content:''; position:absolute; inset:-8px; border-radius:50%;
  background:radial-gradient(circle, hsl(var(--primary)/.5), transparent 70%); z-index:-1; }
@keyframes flight-arc {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); opacity:1; }
  50%  { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5 - 84px)) scale(.82) rotate(180deg); opacity:1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.32) rotate(360deg); opacity:.25; }
}

/* close-out purchase ledger — host dismisses */
.shop-summary-bg { position:fixed; inset:0; z-index:6200; display:grid; place-items:center;
  background:radial-gradient(ellipse at center, hsl(20 16% 5% / .72), hsl(20 16% 5% / .92)); padding:5vw; }
.shop-summary { width:min(620px,94vw); max-height:84vh; display:flex; flex-direction:column;
  border-radius:16px; padding:1.6rem 1.6rem 1.3rem; }
.shop-summary .ss-head { margin-bottom:1.1rem; }
.ss-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:hsl(var(--primary)); }
.shop-summary h2 { font-size:1.5rem; letter-spacing:.04em; margin-top:.4rem; color:hsl(var(--foreground)); }
.ss-empty { color:hsl(var(--muted-foreground)); font-style:italic; padding:1.4rem 0; text-align:center; }
.ss-list { display:flex; flex-direction:column; gap:.55rem; overflow-y:auto; padding-right:.3rem; }
.ss-row { display:flex; align-items:center; gap:12px; padding:.7rem .85rem; border-radius:10px;
  background:hsl(var(--background)/.5); box-shadow:inset 0 0 0 1px hsl(var(--border)/.7); }
.ss-buyer { flex:0 0 auto; min-width:84px; font-size:.95rem; color:hsl(var(--primary)); }
.ss-items { flex:1; display:flex; flex-wrap:wrap; gap:6px; }
.ss-chip { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; padding:.22rem .5rem; border-radius:6px;
  background:hsl(var(--surface)); box-shadow:inset 0 0 0 1px hsl(var(--border)); color:hsl(var(--foreground)/.9); }
.ss-chip.type-weapon { box-shadow:inset 0 0 0 1px hsl(0 50% 45% / .6); }
.ss-chip.type-magic { box-shadow:inset 0 0 0 1px hsl(265 50% 60% / .6); }
.ss-total { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--font-display); font-weight:700; }
.ss-close { margin-top:1.2rem; align-self:center; padding:.7rem 1.6rem; border-radius:9px; cursor:pointer;
  font-family:var(--font-display); font-weight:600; letter-spacing:.04em; color:hsl(var(--primary-foreground));
  background:linear-gradient(180deg, hsl(45 92% 60%), hsl(38 86% 50%)); box-shadow:0 4px 16px hsl(var(--primary)/.4); }
.ss-close:hover { filter:brightness(1.08); }

/* ============================================================
   PLAYER HANDSET — DOTA 2 HUD SKIN (scoped to .player-screen only).
   Mobile-first hero panel: cool slate plates, beveled angular keys,
   teal "active" glow, bronze-gold values, glossy segmented bars.
   ============================================================ */
.player-screen {
  --background: 207 28% 7%;
  --surface: 207 22% 12%;
  --foreground: 200 16% 88%;
  --muted-foreground: 202 10% 54%;
  --primary: 41 60% 56%;            /* bronze-gold — values, level, coins */
  --primary-foreground: 207 30% 7%;
  --border: 202 16% 26%;
  --card-glow: 188 62% 48%;
  --d2-teal: 188 66% 52%;
  --d2-teal-dim: 190 40% 32%;
  --d2-steel-hi: 200 22% 42%;
  --d2-hp: 145 58% 46%;
  --glass-tint: 0;
  color: hsl(var(--foreground));
}
/* cool steel ambience instead of candlelight */
.player-screen .pscene-bg {
  background:
    radial-gradient(120% 80% at 50% -12%, hsl(193 55% 16% / .9), transparent 56%),
    radial-gradient(140% 100% at 50% 120%, hsl(207 40% 10% / .95), transparent 60%),
    linear-gradient(180deg, hsl(207 30% 9%), hsl(208 34% 5%));
}
.player-screen .pscene-bg::before {
  background:
    radial-gradient(40% 52% at 30% 32%, hsl(190 70% 45% / .18), transparent 60%),
    radial-gradient(40% 52% at 72% 60%, hsl(200 60% 50% / .14), transparent 60%);
}
.player-screen.is-low .pscene-bg {
  background:
    radial-gradient(120% 80% at 50% -12%, hsl(2 60% 18% / .95), transparent 56%),
    radial-gradient(140% 100% at 50% 120%, hsl(208 40% 8% / .95), transparent 60%),
    linear-gradient(180deg, hsl(206 30% 8%), hsl(208 34% 5%));
}
/* tame the god-rays to a cool steel sheen */
.player-screen::before { background: repeating-conic-gradient(from 0deg at 50% -8%,
    hsl(190 60% 60% / .4) 0deg 3deg, transparent 3deg 12deg); opacity:.05; }

/* ---- panels: beveled steel plates ---- */
.player-screen .liquid-glass {
  background: linear-gradient(180deg, hsl(207 22% 14%), hsl(207 26% 9.5%));
  backdrop-filter: none; border-radius: 5px;
  box-shadow:
    inset 0 1px 0 hsl(var(--d2-steel-hi) / .32),
    inset 0 0 0 1px hsl(202 18% 20%),
    inset 0 -14px 26px rgba(0,0,0,.3),
    0 6px 18px rgba(0,0,0,.5);
}
.player-screen .liquid-glass::before { display:none; }

/* ---- hero header: Dota hero banner ---- */
.player-screen .hero-head { position:relative; border-radius:5px; }
.player-screen .hero-head::before {
  content:''; position:absolute; left:8px; right:8px; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, hsl(var(--d2-teal)/.7) 20%, hsl(var(--primary)/.6) 80%, transparent); opacity:.85;
}
.player-screen .hh-sigil { border-radius:5px; color:hsl(var(--d2-teal));
  background: linear-gradient(180deg, hsl(196 40% 22%), hsl(205 32% 11%));
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.5), inset 0 0 0 1px hsl(var(--d2-teal)/.5); }
.player-screen .hero-head .pname { color:hsl(44 42% 86%); letter-spacing:.04em; text-shadow:0 1px 0 #000; }
.player-screen .hero-head .pclass { color:hsl(var(--d2-teal)/.85); }
.player-screen .pill { border-radius:4px; }
.player-screen .coins-pill { color:hsl(44 72% 66%);
  background:linear-gradient(180deg, hsl(41 40% 18%), hsl(40 44% 12%)); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.5); }
.player-screen .level-pill { color:hsl(190 70% 80%);
  background:linear-gradient(180deg, hsl(196 38% 18%), hsl(204 34% 11%)); box-shadow:inset 0 0 0 1px hsl(var(--d2-teal)/.45); }

/* ---- xp + health bars: glossy segmented ---- */
.player-screen .xp-frame, .player-screen .hp-frame { border-radius:5px; }
.player-screen .xp-track, .player-screen .hp-track { border-radius:3px; box-shadow:inset 0 0 0 1px hsl(204 16% 22%), inset 0 2px 5px rgba(0,0,0,.6); }
.player-screen .xp-fill { background:linear-gradient(90deg, hsl(190 60% 42%), hsl(186 72% 55%));
  box-shadow:0 0 14px hsl(var(--d2-teal)/.55); border-radius:3px; }
.player-screen .xp-num { color:hsl(190 70% 78%); }
.player-screen .hp-fill { background:linear-gradient(90deg, hsl(var(--d2-hp)) , hsl(140 62% 56%)) !important; border-radius:3px; }
.player-screen .hp-frame.is-low .hp-fill { background:linear-gradient(90deg, hsl(38 85% 48%), hsl(44 92% 58%)) !important; }
.player-screen .hp-frame.is-crit .hp-fill { background:linear-gradient(90deg, hsl(2 78% 46%), hsl(8 84% 56%)) !important; }
.player-screen .hp-num { color:hsl(200 18% 90%); }

/* ---- section labels ---- */
.player-screen .section-label { color:hsl(200 18% 80%); letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid hsl(202 16% 22%); padding-bottom:.5rem; }

/* ---- stat tiles: ability-pip squares ---- */
.player-screen .stat-tile { border-radius:5px;
  background: linear-gradient(180deg, hsl(206 18% 15%), hsl(207 24% 10%));
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.28), inset 0 0 0 1px hsl(204 16% 22%); }
.player-screen .stat-tile.has { box-shadow: inset 0 0 0 1px hsl(var(--d2-teal)/.5), 0 0 14px hsl(var(--d2-teal)/.18); }
.player-screen .stat-tile .lbl { color:hsl(202 12% 56%); }
.player-screen .stat-tile .val.pos { color:hsl(190 72% 72%); }

/* ---- big action keys: shop / codex / npc / maps ---- */
.player-screen .intel-btn, .player-screen .shop-open-btn {
  border-radius:5px; min-height:48px;
  background: linear-gradient(180deg, hsl(204 18% 18%), hsl(206 24% 11%));
  color: hsl(200 16% 84%);
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.32), inset 0 0 0 1px hsl(204 16% 24%), 0 3px 8px rgba(0,0,0,.4); }
.player-screen .intel-btn:hover, .player-screen .shop-open-btn:hover {
  filter:none; color:#fff;
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.45), inset 0 0 0 1px hsl(var(--d2-teal)/.6), 0 0 16px hsl(var(--d2-teal)/.28); }
.player-screen .shop-open-btn { color:hsl(44 72% 70%);
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.4), inset 0 0 0 1px hsl(var(--primary)/.5), 0 3px 10px rgba(0,0,0,.45); }
.player-screen .intel-btn .dot, .player-screen .intel-count, .player-screen .shop-open-btn .intel-count {
  background:hsl(var(--damage)); box-shadow:0 0 10px hsl(var(--damage)/.6); }

/* ---- inventory: Dota item slots ---- */
.player-screen .inv-grid { gap:8px; }
.player-screen .inv-tile { border-radius:5px; min-height:84px;
  background: linear-gradient(180deg, hsl(206 18% 15%), hsl(207 26% 9%));
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.28), inset 0 0 0 1px hsl(204 16% 22%), inset 0 -3px 0 rgba(0,0,0,.4); }
.player-screen .inv-tile:hover { filter:none; box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.45), inset 0 0 0 1px hsl(var(--d2-teal)/.5), 0 0 14px hsl(var(--d2-teal)/.2); }
.player-screen .inv-tile.weapon { box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.3), inset 0 0 0 1px hsl(var(--primary)/.5), inset 0 -3px 0 rgba(0,0,0,.4); }
.player-screen .inv-tile .inv-nm { color:hsl(200 16% 86%); }
.player-screen .inv-head { color:hsl(200 18% 80%); }
.player-screen .inv-head svg { color:hsl(var(--d2-teal)); }

/* ---- trait chips ---- */
.player-screen .trait-chip { border-radius:5px; }

/* ---- bottom action dock: Dota ability bar ---- */
.player-screen .action-dock { background: linear-gradient(180deg, transparent, hsl(208 34% 5% / .94) 56%); }
.player-screen .ad-inner { border-radius:6px;
  box-shadow: inset 0 1px 0 hsl(var(--d2-steel-hi)/.34), inset 0 0 0 1px hsl(202 16% 22%), 0 8px 22px rgba(0,0,0,.6); }
.player-screen .action-dock.urgent .ad-inner { animation: dock-call-d2 1.6s ease-in-out infinite; }
@keyframes dock-call-d2 {
  0%,100%{ box-shadow: inset 0 0 0 1px hsl(var(--d2-teal)/.5), 0 0 22px hsl(var(--d2-teal)/.28); }
  50%{ box-shadow: inset 0 0 0 1px hsl(var(--d2-teal)/.9), 0 0 40px hsl(var(--d2-teal)/.5); }
}
.player-screen .ad-label { color:hsl(200 16% 84%); }
.player-screen .action-dock.urgent .ad-label { color:hsl(var(--d2-teal)); }

/* ---- desktop aside panel ---- */
.player-screen .player-aside .panel { border-radius:5px; }

/* ---- mobile tightening so the HUD packs cleanly on a phone ---- */
@media (max-width: 560px){
  .player-wrap { padding: 56px 12px 36px; }
  .player-grid { gap: 12px; }
  .player-screen .stats-grid { gap:6px; }
  .player-screen .inv-grid { grid-template-columns: repeat(auto-fill, minmax(78px,1fr)); }
  .player-screen .hero-head .pname { font-size:1.16rem; }
  /* hero banner: keep name + pills on tidy rows that never overflow */
  .player-screen .hero-head { flex-wrap:wrap; gap:10px; padding:.8rem .85rem; }
  .player-screen .hh-id { flex:1 1 60%; }
  .player-screen .hh-right { flex-direction:row; align-items:center; gap:8px; flex:0 0 auto; }
  .player-screen .traits .trait-chips { grid-template-columns:1fr; }
}
/* the hero name truncates with an ellipsis rather than wrapping mid-word */
.player-screen .hh-id > div { min-width:0; }
.player-screen .hero-head .pname { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ============================================================
   CHARACTER CREATION — DOTA 2 reskin (scoped to .create-screen only).
   Cool slate plates · teal interactive accents · bronze-gold values.
   Re-points the palette vars, so most controls shift automatically,
   then layers Dota signature teal/steel on the key surfaces.
   ============================================================ */
.create-screen {
  --background: 207 28% 7%;
  --surface: 207 22% 12%;
  --foreground: 200 16% 88%;
  --muted-foreground: 202 10% 54%;
  --primary: 41 60% 56%;            /* bronze-gold — values */
  --primary-foreground: 205 40% 8%;
  --border: 202 16% 26%;
  --heal: 145 58% 46%;
  --d2-teal: 188 66% 52%;
  --d2-steel-hi: 200 22% 42%;
  --glass-tint: 0;
  background:
    radial-gradient(120% 80% at 50% -12%, hsl(193 55% 15% / .92), transparent 56%),
    radial-gradient(150% 100% at 50% 120%, hsl(207 40% 9% / .96), transparent 60%),
    linear-gradient(180deg, hsl(207 30% 8%), hsl(208 34% 5%));
  color: hsl(var(--foreground));
}
/* beveled steel plates instead of candle-glass */
.create-screen .liquid-glass {
  background: linear-gradient(180deg, hsl(207 22% 14%), hsl(207 26% 9.5%));
  backdrop-filter: none; border-radius: 6px;
  box-shadow:
    inset 0 1px 0 hsl(var(--d2-steel-hi) / .3),
    inset 0 0 0 1px hsl(202 18% 22%),
    inset 0 -16px 28px rgba(0,0,0,.32),
    0 8px 22px rgba(0,0,0,.5);
}
.create-screen .liquid-glass::before { display:none; }
.create-card { border-radius:6px; }
.create-card::after { content:''; position:absolute; left:10px; right:10px; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, hsl(var(--d2-teal)/.65) 20%, hsl(var(--primary)/.5) 80%, transparent); }
.create-card { position:relative; }

/* heading */
.create-head h1 { color:hsl(44 44% 88%); letter-spacing:.05em;
  text-shadow:0 0 34px hsl(var(--d2-teal)/.28), 0 2px 0 #000; }
.create-screen .enter-flame { filter: hue-rotate(150deg) saturate(.75) brightness(1.05); }

/* section labels — teal with a steel underline (Dota panel header) */
.create-screen .cc-section { color:hsl(var(--d2-teal)); letter-spacing:.18em;
  border-bottom:1px solid hsl(202 16% 22%); padding-bottom:.6rem; }
.create-screen .cc-section.sub { border-bottom:none; padding-bottom:0; color:hsl(200 16% 78%); }
.create-screen .cc-field span { color:hsl(202 12% 56%); }

/* inputs — Dota text fields */
.create-screen .tinput {
  background:hsl(206 28% 8%); border:1px solid hsl(204 16% 24%); border-radius:4px;
  color:hsl(200 16% 90%); box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}
.create-screen .tinput::placeholder { color:hsl(202 10% 40%); }
.create-screen .tinput:focus {
  outline:none; border-color:hsl(var(--d2-teal)/.85);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 1px hsl(var(--d2-teal)/.45), 0 0 14px hsl(var(--d2-teal)/.18);
}

/* points pool */
.create-screen .cc-pool { color:hsl(44 72% 66%); }
.create-screen .cc-pool.done { color:hsl(var(--d2-teal)); }
.create-screen .cc-pool-bar { background:hsl(206 32% 7%); border-radius:3px;
  box-shadow:inset 0 0 0 1px hsl(204 16% 22%), inset 0 2px 5px rgba(0,0,0,.6); }
.create-screen .cc-pool-fill { border-radius:3px;
  background:linear-gradient(90deg, hsl(190 60% 42%), hsl(186 72% 55%)); box-shadow:0 0 12px hsl(var(--d2-teal)/.5); }

/* attribute + health rows — beveled ability tiles */
.create-screen .alloc-row { border-radius:5px;
  background:linear-gradient(180deg, hsl(206 18% 15%), hsl(207 24% 10%));
  box-shadow:inset 0 1px 0 hsl(var(--d2-steel-hi)/.26), inset 0 0 0 1px hsl(204 16% 22%); }
.create-screen .alloc-row.hp {
  background:linear-gradient(180deg, hsl(150 22% 14%), hsl(158 24% 9%));
  box-shadow:inset 0 0 0 1px hsl(var(--heal)/.5), 0 0 16px hsl(var(--heal)/.14); }
.create-screen .al-k { color:hsl(200 16% 86%); }
.create-screen .alloc-val { color:hsl(190 72% 74%); }
.create-screen .alloc-row.hp .alloc-val { color:hsl(140 60% 70%); }
.create-screen .alloc-step { border-radius:5px; color:hsl(200 16% 84%);
  background:linear-gradient(180deg, hsl(204 22% 18%), hsl(206 26% 12%));
  box-shadow:inset 0 1px 0 hsl(var(--d2-steel-hi)/.3), inset 0 0 0 1px hsl(204 16% 24%); }
.create-screen .alloc-step.plus { color:hsl(var(--d2-teal));
  box-shadow:inset 0 1px 0 hsl(var(--d2-steel-hi)/.3), inset 0 0 0 1px hsl(var(--d2-teal)/.5); }
.create-screen .alloc-step:active:not(:disabled){ transform:translateY(1px); }

/* CTA — teal Dota action button */
.create-screen .create-begin { border-radius:6px; color:hsl(205 40% 8%);
  background:linear-gradient(180deg, hsl(var(--d2-teal)), hsl(190 66% 40%));
  box-shadow:0 6px 22px hsl(var(--d2-teal)/.32), inset 0 1px 0 rgba(255,255,255,.32); }
.create-screen .create-begin.disabled {
  background:hsl(205 18% 20%); color:hsl(205 12% 48%); box-shadow:inset 0 0 0 1px hsl(204 16% 24%); }

/* round table — cool steel / teal accents */
.create-screen .rt-sigil { color:hsl(var(--d2-teal)/.9); }
.create-screen .rt-portrait { color:hsl(var(--d2-teal)) !important;
  background:linear-gradient(180deg, hsl(196 40% 20%), hsl(205 32% 11%)) !important;
  box-shadow:inset 0 0 0 1px hsl(var(--d2-teal)/.5) !important; }
.create-screen .rt-chair.taken { box-shadow:inset 0 0 0 1px hsl(var(--d2-teal)/.4); }
.create-screen .rt-name { color:hsl(200 16% 82%); }
.create-screen .rt-caption { color:hsl(202 10% 54%); }