/* Black-gold guardian. Layout remains driven by the real room snapshot. */
:root {
  --bg: #0c0d0e;
  --panel: #18191a;
  --panel-2: #202020;
  --line: #a48b5547;
  --text: #f1e8d4;
  --text-2: #a39b89;
  --gold: #c9a968;
  --gold-hi: #f0d69c;
  --hero: #ebc982;
  --gold-grad: linear-gradient(165deg, #f1dba8, #d5b474 45%, #a67c39);
}
body {
  background: radial-gradient(ellipse at 50% 0, #2b2821, #0a0b0c 65%) fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
body[data-arena="silver"], body[data-arena="elite"] { --concept-accent: #dfc18a; }
.app {
  max-width: 480px;
  background: linear-gradient(180deg, #111212c9, #101112 85%);
  border-color: #aa915535;
  padding-left: 18px;
  padding-right: 18px;
}
.top {
  height: 64px;
  grid-template-rows: 60px;
  border-bottom: 1px solid #b49a5d28;
}
.top .logo { filter: sepia(.45) saturate(.65) brightness(1.13); width: 102px; }
.top .balance, .top .wallet-login, .top .header-lang {
  background: #171818ba;
  border-color: #b7a07442;
  color: #e1cfaa;
  box-shadow: inset 0 1px #ffffff05;
}
.top .wallet-login { border-radius: 10px; }
.top .balance #balance-text { color: #ecd7aa; font-family: Georgia, serif; font-size: 15px; }
.view { gap: 10px; padding-top: 12px; }
.lobby-intro { min-height: 56px; padding-bottom: 5px; margin: 0; }
.lobby-intro:after { display: none; }
.eyebrow { display: block; color: #9a8353; letter-spacing: 3px; font-size: 8px; }
.lobby-intro h1, .page-title, .sheet-head h2 {
  font-family: 'Songti SC', 'Noto Serif SC', Georgia, serif;
  font-weight: 600;
  color: #f0e2c1;
  letter-spacing: 3px;
}
.lobby-intro h1 { font-size: 27px; margin-top: 5px; line-height: 35px; }
.help-circle { top: 12px; color: #b4a17c; border: 1px solid #9e895b30; border-radius: 50%; width: 28px; height: 28px; }
.scenes { gap: 10px; min-height: 49px; }
.scene {
  background: linear-gradient(140deg, #2e2d2a, #171819);
  border: 1px solid #b3a58b50;
  border-radius: 13px;
  min-height: 49px;
  box-shadow: inset 0 1px #ffffff0c;
}
.scene strong { font-family: Georgia, serif; font-size: 25px; }
.scene small { color: inherit; font-size: 10px; }
.scene[aria-selected="true"] {
  background: radial-gradient(ellipse at 50% 0, #d9b57445, transparent), linear-gradient(135deg, #55432c, #29261e);
  color: #fae6b7;
  border-color: #e6c485;
  box-shadow: inset 0 0 0 1px #f4db9b38, 0 0 15px #d0ac6024;
}
.lobby-pulse {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #b2986133;
  border-radius: 0;
  box-shadow: none;
  min-height: 43px;
  padding: 0 2px 8px;
}
.lobby-pulse:before { display: none; }
.lobby-pulse > div, .lobby-pulse > button { gap: 0; }
.lobby-pulse > button { min-height: 36px; border-left-color: #b79c5e28; }
.lobby-pulse span { color: #99917f; font-size: 9px; letter-spacing: .4px; }
.lobby-pulse b { font-size: 17px; line-height: 21px; color: #d9c395; font-family: Georgia, serif; letter-spacing: .5px; }
.lobby-pulse > div span:before { background: #ceba84; box-shadow: 0 0 5px #d7bf84; }
.lobby-pulse #slot-info { border: 0; border-left: 1px solid #b79c5e28; border-radius: 0; background: none; padding: 0 3px 4px; }
#slot-info b { color: #e1c991; font-size: 20px; text-shadow: none; }
#slot-info:after { height: 2px; bottom: 0; background: repeating-linear-gradient(90deg, #c5a96b 0 5px, transparent 5px 8px); opacity: .6; }
.round-bar {
  min-height: 36px;
  border: 1px solid #c3a36542;
  border-radius: 20px;
  background: linear-gradient(90deg, #171819ba, #27251eaa, #171819ba);
  box-shadow: none;
  padding: 5px 13px;
}
.occ b { font-family: Georgia, serif; color: #f2dba9; }
.status { font-size: 11px; color: #bbb19b; }
.status:before { background: #dcc087; box-shadow: 0 0 5px #dcc08755; }
.arena { isolation: isolate; margin: 0 -5px; }
.stage, body[data-arena="silver"] .stage, body[data-arena="elite"] .stage {
  background: radial-gradient(ellipse at 50% 45%, #b58d3e20, transparent 65%), #101112;
  filter: none;
  border-radius: 0;
  mask-image: linear-gradient(transparent, #000 7%, #000 94%, transparent);
}
.stage:after { display: block !important; content: ''; position: absolute; inset: 5% 4%; border: 1px solid #b4985d20; border-radius: 50%; transform: perspective(500px) rotateX(28deg); }
.arena-deck { opacity: .32; filter: sepia(.7) brightness(.62) !important; }
.floor-mark { display: none; }
.arena-caption { font-size: 7px; bottom: 5%; letter-spacing: 2px; color: #af925a; }
.mascot { z-index: 2; }
.mascot-visual { animation: guardian-breath 7s ease-in-out infinite; filter: drop-shadow(0 14px 12px #000a); transform-origin: 50% 90%; }
.mascot-visual img { transform: none; }
.mascot-caption { bottom: -11px; font-size: 9px; border: 0; color: #a79368; background: transparent; letter-spacing: 2px; }
.seat, body[data-arena="silver"] .seat, body[data-arena="elite"] .seat {
  border: 0;
  border-radius: 0;
  background: #99815a48;
  color: #a89c83;
  padding: 5px 0 4px;
  clip-path: polygon(50% 0, 96% 24%, 96% 76%, 50% 100%, 4% 76%, 4% 24%);
  box-shadow: none;
  overflow: visible;
}
.seat:before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: linear-gradient(135deg, #292a27, #17191a);
  clip-path: inherit;
}
.seat .no { font-size: 11px; line-height: 13px; font-family: Georgia, serif; color: #a79d87; }
.seat.taken, body[data-arena="silver"] .seat.taken, body[data-arena="elite"] .seat.taken {
  background: #e9ca87;
  color: #f5dba4;
  box-shadow: none;
  filter: drop-shadow(0 0 4px #d3ac4544);
}
.seat.taken:before { background: radial-gradient(ellipse at 50% 0, #8b6c38, #342b1e 80%); }
.seat.taken .no, body[data-arena="silver"] .seat.taken .no { color: #f6dfaa; }
.seat.taken svg, body[data-arena="silver"] .seat.taken svg { fill: #f4d79d; width: 13px; height: 13px; }
.seat.self { background: #fff1c2; filter: drop-shadow(0 0 6px #e0bb6b99); border: 0; }
.seat.hero { background: #fff0b6; filter: drop-shadow(0 0 7px #f2cd7e); }
.seat.hero:before { background: #a27c37; }
.seat.hero .no, .seat.hero svg { color: #fff1c8; fill: #fff1c8; }
.seat .badge { border: 0; bottom: 0; font-size: 7px; line-height: 9px; background: #e4c58a; min-width: auto; }
.seat.enter { animation: guardian-seat-light .65s ease-out both; animation-delay: var(--seat-delay, 0ms); }
.arena-footer { margin: 0; min-height: 22px; }
.remaining { font-size: 10px; color: #b8a984; }
.gesture-btn { color: #bfa46c; font-size: 10px; }
.entry-panel { position: relative; bottom: auto; background: none; padding: 0; gap: 9px; border-radius: 0; }
.fee { background: none; box-shadow: none; border: 0; min-height: 24px; padding: 0 4px; justify-content: center; gap: 10px; }
.fee span { color: #a99e87; font-size: 10px; }
.fee b, .fee .fee-total b { font-size: 16px; color: #dac28e; }
.fee .fee-total { border-color: #b3995e30; }
.fee small { font-size: 9px; }
.btn-primary {
  background: var(--gold-grad);
  border: 1px solid #f6dfad;
  border-radius: 32px;
  min-height: 54px;
  color: #211b10;
  font-family: 'Songti SC', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  box-shadow: inset 0 1px #fff4, 0 3px 18px #c39a4a2e;
  letter-spacing: 1px;
}
.btn-primary:active { transform: translateY(1px); }
.btn-primary.state-joined { background: #2a2922; border-color: #9f8650; color: #d0bc90; box-shadow: none; }
.btn-secondary, .room-filters button, .lang-seg button, .seg button {
  background: linear-gradient(140deg, #292824, #171919);
  color: #d2c4a5;
  border: 1px solid #b59a5a40;
  border-radius: 14px;
  box-shadow: inset 0 1px #ffffff08;
}
.rules { color: #817964; font-size: 10px; padding-bottom: 4px; }
.rules .link, .link { color: #baa16b; }
.tabs { background: #111314ed; border-color: #9a814b40; box-shadow: 0 -8px 24px #0006; backdrop-filter: blur(18px); border-radius: 0; }
.tab { color: #8e897c; }
.tab.active, .tab[aria-selected="true"] { color: #f3d99f; }
.tab.active svg { filter: drop-shadow(0 0 8px #e4b95d55); }
.page-title { font-size: 29px; margin: 8px 0 12px; }
.panel, .plan, .rows, .network-card, .room-card, .empty, .mine, .wallet-choice {
  background: linear-gradient(145deg, #24231fbb, #141617ed);
  border: 1px solid #b3985b38;
  box-shadow: inset 0 1px #fff05;
  border-radius: 17px;
}
.wallet-main, .claim-hero { background: radial-gradient(ellipse at 50% 0, #8c6d2d28, transparent 65%), linear-gradient(145deg, #1d1e1c, #111314); border-color: #b69a5d50; }
.amount, .claim-value .amount, .wallet-main .amount { font-family: Georgia, serif; color: #f0d69b; font-weight: 500; letter-spacing: 1px; }
.claim-hero { overflow: hidden; }
.claim-cat { height: 230px; width: 220px; filter: drop-shadow(0 8px 18px #ca9a4422); }
.claim-hero:before { content: ''; position: absolute; width: 210px; height: 210px; left: calc(50% - 105px); top: 24px; border-radius: 50%; background: radial-gradient(ellipse, #e1ba5c15, transparent 68%); border: 1px solid #ccac5b20; pointer-events: none; }
.stats3 b, .wallet-sub b { color: #e2cc9e; font-family: Georgia, serif; }
.label, .hint { color: #a69a81; }
.bar { background: #090b0c; }
.bar i { background: linear-gradient(90deg, #967441, #efce88); }
.rows li, .kv > div, .wallet-sub { border-color: #9c885333; }
.plan-top span, .plan-bottom, .rows .sub { color: #978d78; }
.network-logo { color: #dfbd74; }
.notice { background: #b39b5909; border-color: #b49b61; color: #b2a68e; }
.set-row { border-color: #9d85502b; }
.sheet-backdrop { background: #030506bd; backdrop-filter: blur(10px); }
.sheet { background: radial-gradient(ellipse at 50% 0, #9b7a3020, transparent 48%), #151718; border-color: #b49b6359; border-radius: 25px 25px 0 0; }
.sheet-head h2 { font-size: 22px; letter-spacing: 1px; }
.sheet-head h2.hero-title { color: #f2d69c; }
.sheet-head { margin-bottom: 18px; }
.sheet-body { gap: 14px; }
.kv { background: #171a19; border-color: #9982503b; border-radius: 14px; }
.kv .total dd { color: #f1d395; }
.auth-design { padding-top: 8px; }
.auth-design .text { background: #0e1112; border-color: #a78e5345; border-radius: 13px; min-height: 52px; color: #efdfbb; }
.text:focus { outline-color: #d5b36d; }
.auth-kicker { letter-spacing: 4px; color: #b49558; }
.auth-divider { color: #867c65; }
.auth-options { gap: 12px; }
.preview-label { color: #aa9771; border-color: #b9a06533; border-style: solid; font-size: 9px; }
.room-card { padding: 16px; min-height: 82px; }
.room-card b { font-family: 'Songti SC', Georgia, serif; font-size: 16px; color: #e6d0a1; }
.room-card small { color: #9c8f73; }
.room-card > span { color: #e0c58d; }
.room-filters button[aria-pressed="true"] { background: #6c54352b; border-color: #c8a971; color: #f2dab1; }
.identity-icon, .network-badge { color: #e0c17d; border-color: #ab8d484a; }
.result-ceremony, .ceremony-hero {
  --a: #efcf88;
  --b: #b17f36;
  background: radial-gradient(ellipse at 50% 25%, #94713935, transparent 55%), linear-gradient(150deg, #1d1d1b, #0c1011 80%) !important;
  border-color: #c9a65f80 !important;
}
.result-ceremony .sheet-head h2, .ceremony-hero .sheet-head h2 { color: #f2deb0; text-shadow: 0 0 20px #d5a85633; }
.ceremony-hero .ceremony-beam { background: linear-gradient(90deg, transparent, #f2d29530, transparent); }
.ceremony-hero.ceremony-playing:before { background: radial-gradient(ellipse at 50% 35%, #d7ad5e36, transparent 65%); }
.ceremony-hero.ceremony-playing:after { border-color: #dfbd75; }
.ceremony-emblem { color: #f7dda6; }
.ceremony-stage { height: 220px !important; }
.result-ceremony .ceremony-mascot.sheet-art { height: 205px !important; width: 220px !important; inset: 0 0 auto; }
.ceremony-counter, .result-ceremony .result-total { font-family: Georgia, serif; color: #efd095; }
.ceremony-banner { font-size: 8px; letter-spacing: 3px; }
.ceremony-controls button { background: #141916c9; color: #bca779; border-color: #b59c5e40; }
.guardian-energy { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.guardian-energy path { fill: none; stroke: #e9bd65; stroke-width: .35; stroke-dasharray: 80; stroke-dashoffset: 80; opacity: 0; }
.guardian-energy circle { fill: #e5bd71; opacity: .4; }
.ceremony-playing .guardian-energy path { animation: guardian-distribute 1.6s ease-out both; animation-delay: calc(2s + var(--ray-delay)); }
.ceremony-complete .guardian-energy path { opacity: .28; stroke-dashoffset: 0; }
@keyframes guardian-breath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.014); } }
@keyframes guardian-seat-light { from { opacity: .3; filter: brightness(.6); } 60% { opacity: 1; filter: brightness(1.5); } to { filter: brightness(1); } }
@keyframes guardian-distribute { 0% { opacity: 0; stroke-dashoffset: 80; } 30% { opacity: 1; } 100% { opacity: .3; stroke-dashoffset: 0; } }
body[data-motion="off"] *, body[data-motion="off"] *:before, body[data-motion="off"] *:after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation: none !important; transition: none !important; } }
@media (max-width:350px) {
  .app { padding-left: 12px; padding-right: 12px; }
  .top { height: 58px; }
  .lobby-intro h1 { font-size: 24px; }
  .scenes { gap: 7px; }
  .scene strong { font-size: 22px; }
  .ceremony-stage { height: 180px !important; }
  .result-ceremony .ceremony-mascot.sheet-art { height: 168px !important; }
}
.guardian-puppet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.guardian-rendered #mascot-img, .guardian-rendered #mascot-pose { opacity: 0 !important; }
.guardian-rendered .mascot-visual { animation: none !important; }
.mascot[data-mood="nuzzle"] .mascot-visual, .mascot[data-mood="delight"] .mascot-visual, .mascot[data-mood="bounce"] .mascot-visual, .mascot[data-mood="cheer"] .mascot-visual, .mascot[data-mood="peek"] .mascot-visual, .mascot[data-mood="playful"] .mascot-visual { animation: none; }
body[data-arena="silver"] .mascot { filter: saturate(.72) brightness(1.06); }
body[data-arena="elite"] .mascot { filter: saturate(1.08) drop-shadow(0 0 10px #c69b3e18); }
.stage, body[data-arena="silver"] .stage, body[data-arena="elite"] .stage {
  background: radial-gradient(ellipse at 50% 60%, transparent 20%, #0d101144 80%), url('../assets/guardian/08-temple-background.webp') center 54% / cover no-repeat;
}
body[data-arena="silver"] .stage { background-position: center 40%; }
body[data-arena="elite"] .stage { background-position: center 68%; }
.stage:after { border-color: #d6ae5b50; box-shadow: inset 0 0 24px #bf984012, 0 0 14px #d6ae5b1a; }
.arena-deck { display: none; }
.claim-hero { background-image: linear-gradient(#10131499, #111415 87%), url('../assets/guardian/08-temple-background.webp'); background-size: cover; background-position: center; }
.result-ceremony .ceremony-stage { height: 195px !important; }
.result-ceremony .ceremony-mascot.sheet-art { height: 183px !important; }
.result-ceremony .result-total { font-size: 56px !important; line-height: 1.15; }
.result-ceremony .kv > div { padding: 8px 13px; }
.result-ceremony .sheet-body { gap: 10px !important; }
.ceremony-hero.ceremony-playing .ceremony-mascot { animation: guardian-awaken 2.7s cubic-bezier(.16,1,.3,1) both; }
@keyframes guardian-awaken {
  0%,15% { opacity: 0; transform: translateY(30px) scale(.88); filter: brightness(.4); }
  65% { opacity: 1; transform: translateY(-5px) scale(1.015); filter: brightness(1.2) drop-shadow(0 0 14px #e8bc65); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
@media(max-height:760px) {
  .result-ceremony .ceremony-stage { height: 155px !important; }
  .result-ceremony .ceremony-mascot.sheet-art { height: 147px !important; }
  .result-ceremony .result-total { font-size: 48px !important; }
}

/* Hide the source only after the canvas has decoded and painted it. */
.mascot.guardian-rendered[data-expression] #mascot-img,
.mascot.guardian-rendered[data-expression] #mascot-pose { opacity: 0 !important; visibility: hidden !important; }
.guardian-puppet { left: -17%; right: auto; width: 134%; height: 100%; max-width: none; object-fit: contain; }
/* Reference composition: portrait-led lobby, separate full room, award-led Hero. */
.guardian-cover {
  position: relative;
  height: clamp(260px, 37svh, 390px);
  margin: -12px -18px 0;
  overflow: hidden;
  background: url('../assets/guardian/08-temple-background.webp') center 30% / cover;
}
.guardian-cover .mascot-visual { position: absolute; inset: 0; height: 100%; animation: none; }
.guardian-cover .mascot-visual img, .guardian-cover .guardian-puppet {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: 50% 17%; transform: none;
}
.guardian-cover.guardian-rendered img { visibility: hidden !important; opacity: 0 !important; }
.guardian-cover:after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 43%, #111212 100%); pointer-events: none; }
.guardian-cover-brand { position: absolute; z-index: 3; bottom: 4px; width: 100%; text-align: center; color: #f7e6bf; display: grid; }
.guardian-cover-brand b { font: 600 53px/1 Georgia, serif; letter-spacing: 7px; }
.guardian-cover-brand span { font-size: 10px; letter-spacing: 5px; margin-top: 9px; }
body[data-room-view="lobby"] #view-game > .arena,
body[data-room-view="lobby"] #view-game > .arena-footer { display: none; }
body[data-room-view="lobby"] .lobby-intro { min-height: 36px; padding: 4px 0 0; justify-content: flex-start; }
body[data-room-view="lobby"] .lobby-intro h1 { font-size: 17px; letter-spacing: 2px; }
body[data-room-view="lobby"] .lobby-intro .eyebrow { display: none; }
body[data-room-view="lobby"] .lobby-pulse { min-height: 38px; }
body[data-room-view="lobby"] .entry-panel { display: flex; flex-direction: column; margin-top: 4px; }
body[data-room-view="lobby"] .entry-panel #join-btn { order: 1; }
body[data-room-view="lobby"] .entry-panel .fee { order: 2; margin-top: 7px; }
.room-enter { min-height: 30px; border: 0; background: none; color: #bda571; font-size: 11px; letter-spacing: 1px; }
.room-back { align-self: flex-start; min-height: 34px; padding: 0; color: #c9b17f; border: 0; background: none; font-size: 11px; }
.room-heading { font: 600 32px/1.4 'Songti SC', Georgia, serif; letter-spacing: 5px; text-align: center; margin: 0; color: #f0e0bc; }
.room-subtitle { font: 13px/1.6 'Songti SC', Georgia, serif; letter-spacing: 2px; text-align: center; color: #bdae8e; margin: 0 0 5px; }
body[data-room-view="lobby"] .room-back,
body[data-room-view="lobby"] .room-heading,
body[data-room-view="lobby"] .room-subtitle { display: none; }
body[data-room-view="room"] .guardian-cover,
body[data-room-view="room"] .lobby-intro,
body[data-room-view="room"] .room-enter { display: none; }
body[data-room-view="room"] .scenes { min-height: 36px; }
body[data-room-view="room"] .scene { min-height: 36px; }
.ceremony-hero .sheet-head h2:before, .ceremony-hero .sheet-head h2:after { content: '❧'; color: #cbb17b; font-size: 21px; margin: 0 6px; }
.ceremony-hero .sheet-head h2:after { display: inline-block; transform: scaleX(-1); }
.ceremony-hero .result-total { font-size: 72px !important; font-style: italic; text-shadow: 0 0 28px #d8b96b26; }
@media(max-width:350px) {
 .guardian-cover { margin-left: -12px; margin-right: -12px; height: 260px; }
 .guardian-cover-brand b { font-size: 45px; }
 .room-heading { font-size: 27px; }
 .ceremony-hero .sheet-head h2 { font-size: 20px; }
}
/* The waiting temple is the primary game lobby. */
body[data-room-view="room"] #view-game { position: relative; padding-top: 15px; }
body[data-room-view="room"] #view-game:before {
  content: ''; position: absolute; inset: 0 -18px 0; pointer-events: none; z-index: -1;
  background: linear-gradient(#10121222, #10121205 70%, #101212), url('../assets/guardian/08-temple-background.webp') center top / cover no-repeat;
  opacity: .6;
}
body[data-room-view="room"] .room-back { min-height: 24px; font-size: 10px; color: #998464; }
body[data-room-view="room"] .room-heading { font-size: 34px; margin: 0; letter-spacing: 5px; }
body[data-room-view="room"] .room-heading:before,
body[data-room-view="room"] .room-heading:after { content: '—'; margin: 0 12px; color: #b29456; font-size: 20px; vertical-align: middle; }
body[data-room-view="room"] .round-bar { order: 0; justify-content: center; gap: 14px; align-self: center; min-width: 154px; background: #11151599; }
body[data-room-view="room"] .round-bar .status { display: none; }
body[data-room-view="room"] .round-bar .occ { font-size: 15px; }
body[data-room-view="room"] .round-bar .occ b { font-size: 23px; }
body[data-room-view="room"] .stage,
body[data-room-view="room"][data-arena="silver"] .stage,
body[data-room-view="room"][data-arena="elite"] .stage { background: linear-gradient(#10121215, #10121215), url('../assets/guardian/08-temple-background.webp') center 70% / cover no-repeat; }
body[data-room-view="room"] .stage:after { top: 16%; bottom: 8%; border-color: #caa75b44; }
@media(max-width:350px) { body[data-room-view="room"] .room-heading { font-size: 28px; } body[data-room-view="room"] .room-heading:before,body[data-room-view="room"] .room-heading:after { margin: 0 5px; } }
body[data-room-view="room"] #view-game { isolation: isolate; }
body[data-room-view="room"] .room-back { order: 0; }
body[data-room-view="room"] .room-heading { order: 1; }
body[data-room-view="room"] .round-bar { order: 2; }
body[data-room-view="room"] .room-subtitle { order: 3; }
body[data-room-view="room"] .scenes { order: 4; }
body[data-room-view="room"] .lobby-pulse { order: 5; }
body[data-room-view="room"] .arena { order: 6; }
body[data-room-view="room"] .arena-footer { order: 7; }
body[data-room-view="room"] .entry-panel { order: 8; }
body[data-room-view="room"] .rules { order: 9; }
body[data-room-view="room"] .mine { order: 10; }

.guardian-cover { display: none !important; }
/* Entry is always reachable in the first mobile viewport. */
body[data-tab="game"] .app { padding-bottom: calc(var(--tabs-h) + 140px + env(safe-area-inset-bottom, 0px)); }
body[data-tab="game"] #view-game > .entry-panel {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px) + 8px);
  transform: translateX(-50%);
  width: min(444px, calc(100vw - 28px));
  padding: 10px 12px 12px;
  background: linear-gradient(150deg, #22231fee, #111615f5);
  border: 1px solid #b69a5f55;
  border-radius: 22px;
  box-shadow: 0 -8px 24px #080b0b9c, inset 0 1px #f3d69613;
  backdrop-filter: blur(14px);
  display: grid;
  gap: 6px;
}
body[data-tab="game"] .entry-panel #join-btn { min-height: 52px; order: 2; font-size: 18px; }
body[data-tab="game"] .entry-panel .fee { order: 1; min-height: 20px; margin: 0; }
body[data-tab="game"] .entry-panel .fee b { font-size: 14px; }
body[data-arena="silver"][data-room-view="room"] .stage {
  background: linear-gradient(#18262b20, #0c141a77), url('../assets/arena/bg-silver.webp') center / cover no-repeat;
}
body[data-arena="elite"][data-room-view="room"] .stage {
  background: linear-gradient(#25190d08, #15120d66), url('../assets/arena/bg-elite.webp') center / cover no-repeat;
}
body[data-arena="silver"] .stage:after { border-color: #c5dde262; box-shadow: 0 0 15px #9dc9dc20; }
body[data-arena="silver"] .seat.taken { background: #d8e4dc; }
body[data-arena="silver"] .seat.taken:before { background: linear-gradient(140deg,#58666a,#263439); }
body[data-arena="silver"] .seat.taken .no,body[data-arena="silver"] .seat.taken svg { color:#e9ead9;fill:#e9ead9; }
body[data-arena="elite"] .seat.taken { background: #e9bd76; }
body[data-arena="elite"] .seat.taken:before { background: linear-gradient(140deg,#8f6030,#3e291a); }
body[data-room-view="room"][data-arena="silver"] #view-game:before {
  background: linear-gradient(#10171c88, #0d151b55 70%, #101212), url('../assets/arena/bg-silver.webp') center top / cover no-repeat;
}
body[data-room-view="room"][data-arena="elite"] #view-game:before {
  background: linear-gradient(#1c140e88, #15110d33 70%, #101212), url('../assets/arena/bg-elite.webp') center top / cover no-repeat;
}
body[data-room-view="room"] .round-bar { justify-self: center; width: fit-content; }
body[data-room-view="room"] .stage:after { display: none !important; }
body[data-arena="silver"] .mascot, body[data-arena="elite"] .mascot { filter: none; }
/* Local interaction feedback stays clear of seats and the entry dock. */
.guardian-feedback {position:absolute;left:50%;top:-5%;transform:translate(-50%,6px);width:max-content;max-width:220px;padding:9px 13px;border:1px solid #e8c58480;border-radius:16px 16px 16px 4px;background:#171916ed;color:#fff0ce;font-size:12px;line-height:1.5;text-align:center;box-shadow:0 0 22px #e7b75825;z-index:8;pointer-events:none;opacity:0;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1);}
.guardian-feedback[data-active="true"] {opacity:1;transform:translate(-50%,0);}
body[data-arena="silver"] .guardian-feedback {border-color:#b9ddea80;color:#e6f4fa;box-shadow:0 0 22px #acd8ec25;}
@media(prefers-reduced-motion:reduce){.guardian-feedback{transition:none;}}
body[data-motion="off"] .guardian-feedback{transition:none;}
body[data-tab="game"] .entry-panel #join-btn {position:relative;overflow:hidden;letter-spacing:.16em;border:1px solid #ffe8a8;box-shadow:inset 0 1px 0 #fff4d9,0 0 18px #dba64928,0 5px 16px #0008;}
body[data-tab="game"] .entry-panel #join-btn:before {content:'✦';display:inline-block;margin-right:10px;font-size:16px;}
body[data-tab="game"] .entry-panel #join-btn:not(:disabled):after {content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#fff7d958 48%,transparent 70%);transform:translateX(-110%);animation:seat-invitation 6s ease-in-out infinite;pointer-events:none;}
@keyframes seat-invitation {0%,65%{transform:translateX(-110%)}90%,100%{transform:translateX(110%)}}
.guardian-feedback {max-width:250px;font-size:12px;letter-spacing:.02em;}
@media(prefers-reduced-motion:reduce){body[data-tab="game"] .entry-panel #join-btn:after{animation:none!important;}}
body[data-motion="off"] .entry-panel #join-btn:after{animation:none!important;}
#arena > .guardian-feedback {top:15%;z-index:6;}
/* One continuous mesh in the protected character zone; no hidden second rig. */
.guardian-mesh-host{position:absolute;left:-17%;top:0;width:134%;height:100%;pointer-events:none;}
.guardian-mesh-host canvas{display:block;width:100%;height:100%;pointer-events:none;}
.guardian-mesh-controlled .mascot-visual{animation:none!important;}
.guardian-mesh-rendered .mascot-visual>img{visibility:hidden!important;opacity:0!important;}
#ambient-canvas[hidden]{display:none!important;}
.guardian-mesh-controlled .mascot-visual{transform:none!important;filter:drop-shadow(0 14px 12px #000a)!important;}
.guardian-mesh-controlled:not(.guardian-mesh-rendered) #mascot-img{opacity:1!important;visibility:visible!important;}
/* Keep narrative feedback above the face during expressive interactions. */
#arena > .guardian-feedback{top:-4px;}