:root {
  --pink: #ff3f85;
  --pink-dark: #ea236c;
  --navy: #152333;
  --muted: #8c96a3;
  --line: #e9edf2;
  --panel: #ffffff;
  --teal: #46c6bc;
  --diamond: #2bc8f4;
  --shadow: 0 20px 55px rgba(34, 42, 61, .12);
  color-scheme: light;
  font-family: Inter, "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f6f7f9; }
body { margin: 0; min-height: 100vh; color: var(--navy); background: #f6f7f9; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:not(:disabled), a, label { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
.is-hidden { display: none !important; }

.site-header {
  position: sticky; top: 0; z-index: 50; height: 72px; display: flex; align-items: center;
  gap: 28px; padding: 0 34px; background: rgba(255,255,255,.96); border-bottom: 1px solid #eef0f3;
  backdrop-filter: blur(14px);
}
.brand { width:112px; height:52px; display:flex; align-items:center; overflow:hidden; }
.brand img { width:112px; height:auto; display:block; }
.main-nav { display: flex; gap: 26px; white-space: nowrap; }
.main-nav a { color: #263344; text-decoration: none; font-size: 14px; font-weight: 700; }
.main-nav a:hover { color: var(--pink); }
.search-box { width: 230px; height: 36px; border-radius: 20px; display: flex; align-items: center; gap: 10px; padding: 0 15px; background: #f4f5f7; }
.search-box img { width: 17px; opacity: .65; }
.search-box input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 13px; }
.header-actions { position:relative; margin-left: auto; display: flex; align-items: center; gap: 18px; }
.header-actions > img { width: 20px; height: 20px; }
.text-action { border: 0; background: none; color: #323d4b; font-size: 13px; font-weight: 800; }
.text-action:hover { color: var(--pink); }
.mini-avatar { position:relative; width:30px; height:30px; flex:0 0 30px; padding:0; border:0; border-radius:50%; background:#eee; cursor:pointer; }
.mini-avatar::after { content:""; position:absolute; right:-2px; top:-2px; width:9px; height:9px; border:2px solid #fff; border-radius:50%; background:#ff385d; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.simulation-mode-panel { position:absolute; z-index:120; right:0; top:42px; width:220px; padding:12px; border:1px solid #ececf1; border-radius:14px; background:#fff; box-shadow:0 14px 40px rgba(23,30,45,.18); }
.simulation-mode-panel::before { content:""; position:absolute; right:9px; top:-6px; width:12px; height:12px; border-left:1px solid #ececf1; border-top:1px solid #ececf1; background:#fff; transform:rotate(45deg); }
.simulation-switch-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.simulation-switch-row > span { display:flex; flex-direction:column; gap:2px; }
.simulation-switch-row b { font-size:13px; color:#1c2736; }
.simulation-switch-row small { font-size:10px; color:#8b94a3; }
.simulation-switch-row input { position:absolute; opacity:0; pointer-events:none; }
.simulation-switch-row i { position:relative; width:42px; height:24px; flex:0 0 42px; border-radius:99px; background:#d7dbe2; transition:.18s ease; }
.simulation-switch-row i::after { content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:.18s ease; }
.simulation-switch-row input:checked + i { background:var(--pink); }
.simulation-switch-row input:checked + i::after { transform:translateX(18px); }

.home-view {
  min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(330px, .85fr) minmax(540px, 640px);
  align-items: center; gap: clamp(42px, 7vw, 110px); padding: 58px max(6vw, 36px);
  background:
    radial-gradient(circle at 10% 78%, rgba(255,65,135,.15), transparent 26%),
    radial-gradient(circle at 63% 8%, rgba(93,76,255,.12), transparent 24%),
    linear-gradient(135deg, #f9fafc 0%, #f1f2f7 100%);
  overflow: hidden;
}
.hero-copy { max-width: 590px; }
.eyebrow { color: var(--pink); font-size: 13px; font-weight: 900; letter-spacing: .18em; }
.hero-copy h1 { margin: 18px 0 22px; font-size: clamp(50px, 5.2vw, 82px); line-height: 1.06; letter-spacing: -.06em; }
.hero-copy h1 span { color: transparent; background: linear-gradient(110deg,#ff3f85,#8b45eb); -webkit-background-clip: text; background-clip: text; }
.hero-copy p { color: #667181; font-size: 17px; line-height: 1.8; max-width: 510px; }
.feature-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.feature-row span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 15px; font-size:13px; font-weight:800; box-shadow:0 8px 25px rgba(34,42,61,.05); }

.setup-card { position: relative; background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.8); border-radius: 26px; padding: 28px; box-shadow: var(--shadow); max-height: calc(100vh - 112px); overflow: auto; }
.setup-heading { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:18px; border-bottom:1px solid var(--line); }
.setup-heading h2 { margin:4px 0 0; font-size:25px; }
.setup-progress { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:13px 0 2px; }
.setup-progress span { height:4px; border-radius:99px; background:#e8ebf0; transition:.25s ease; }
.setup-progress span.active { background:linear-gradient(90deg,var(--pink),#ff83aa); box-shadow:0 2px 7px rgba(255,63,133,.22); }
.setup-page { animation:setupPageIn .24s ease; }
@keyframes setupPageIn { from { opacity:0; transform:translateX(9px); } }
.setup-step { font-size:11px; font-weight:900; color:var(--pink); letter-spacing:.2em; }
.simulation-badge { background:#fff2f7; color:var(--pink-dark); padding:7px 10px; border-radius:99px; font-size:11px; font-weight:800; }
.simulation-badge.multiplayer { color:#167b74; background:#e9fbf8; }
.experience-mode-fieldset { margin-bottom:18px; }
.experience-mode-picker { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.experience-mode-picker input { position:absolute; opacity:0; pointer-events:none; }
.experience-mode-picker label > span { min-height:64px; display:flex; flex-direction:column; justify-content:center; gap:4px; padding:10px 14px; border:1px solid #dfe3e9; border-radius:13px; color:#667182; background:#f8f9fb; cursor:pointer; transition:.18s ease; }
.experience-mode-picker b { color:#1d2939; font-size:14px; }
.experience-mode-picker small { font-size:10px; }
.experience-mode-picker input:checked + span { border-color:var(--pink); color:#8b3154; background:#fff0f6; box-shadow:0 5px 14px rgba(255,63,133,.13); }
.connection-status { margin:8px 2px 0; color:#7a8493; font-size:10px; font-weight:800; }
.connection-status.connected { color:#159b8e; }
.connection-status.error { color:#e24567; }
fieldset { padding: 17px 0 0; margin: 0; border: 0; }
legend { padding:0; font-weight:900; font-size:14px; margin-bottom:14px; }
legend span { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:7px; color:#fff; background:var(--pink); border-radius:8px; font-size:11px; }
.conditional-title { margin:0 0 9px 1px; color:#65707e; font-size:12px; }
.avatar-picker { display:flex; flex-wrap:wrap; gap:11px; margin-bottom:14px; }
.avatar-option { position:relative; border:0; background:transparent; width:56px; height:56px; padding:3px; border-radius:50%; }
.avatar-option img { width:100%; height:100%; object-fit:cover; border-radius:50%; filter:saturate(.9); }
.avatar-option::after { content:"✓"; position:absolute; right:-2px; bottom:-1px; width:18px; height:18px; border:2px solid #fff; border-radius:50%; display:grid; place-items:center; font-size:10px; color:#fff; background:var(--pink); opacity:0; transform:scale(.5); transition:.2s; }
.avatar-option.selected { background:linear-gradient(135deg,#ffcf44,var(--pink)); box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(255,63,133,.25); }
.avatar-option.selected::after { opacity:1; transform:scale(1); }
.avatar-option.occupied { cursor:not-allowed; background:#d8dbe0; box-shadow:none; }
.avatar-option.occupied img { filter:grayscale(1); opacity:.38; }
.avatar-option.occupied::before { content:"🔒"; position:absolute; inset:0; z-index:2; display:grid; place-items:center; border-radius:50%; color:#fff; background:rgba(37,43,54,.38); font-size:15px; }
.avatar-option.occupied::after { content:""; opacity:0; }
.occupied-role-notice { margin:0 0 12px; padding:8px 10px; border-radius:9px; color:#8a6673; background:#fff2f6; font-size:10px; }
.field-label { display:block; font-size:12px; font-weight:800; color:#65707e; margin:9px 0 7px; }
.text-input, .balance-input { width:100%; height:43px; border:1px solid #dfe4e9; border-radius:12px; background:#fafbfc; }
.text-input { padding:0 13px; outline:0; }
.text-input:focus, .balance-input:focus-within { border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,63,133,.09); background:#fff; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px; background:#f3f5f8; border-radius:13px; }
.segmented input { position:absolute; opacity:0; }
.segmented span { height:38px; display:grid; place-items:center; border-radius:10px; font-size:13px; font-weight:850; color:#88929f; }
.segmented input:checked + span { color:#fff; background:linear-gradient(135deg,var(--pink),#ff6a93); box-shadow:0 5px 15px rgba(255,63,133,.24); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-grid.single-field { grid-template-columns:minmax(0,1fr); }
.chip-group { display:flex; gap:6px; }
.chip { flex:1; height:35px; border:1px solid #e1e5ea; border-radius:10px; background:#fff; font-size:12px; font-weight:800; }
.chip.selected { color:#fff; border-color:var(--pink); background:var(--pink); box-shadow:0 5px 13px rgba(255,63,133,.2); }
.theme-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.theme-option { height:64px; border:2px solid transparent; border-radius:12px; overflow:hidden; position:relative; padding:0; background:#252140; color:#fff; }
.theme-option span { position:absolute; inset:auto 6px 6px; padding:3px 6px; border-radius:7px; background:rgba(5,5,14,.62); backdrop-filter:blur(5px); font-size:10px; font-weight:850; }
.theme-option.selected { border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,63,133,.12); }
.theme-swatch { position:absolute; inset:0; }
.theme-swatch.neon { background:url("./assets/real-gacha/room-nightclub.png") center 63% / cover no-repeat; }
.theme-swatch.ocean { background: radial-gradient(circle at 25% 15%,#b8fff8 0 3%,transparent 22%),linear-gradient(135deg,#07587a,#18a4ac 55%,#073c60); }
.theme-swatch.candy { background: radial-gradient(circle at 75% 30%,#fff 0 3%,transparent 18%),linear-gradient(135deg,#9344bd,#ff76ad 52%,#ffbd70); }
.balance-input { display:flex; align-items:center; padding:0 12px; gap:8px; }
.balance-input input { width:100%; border:0; background:transparent; outline:0; font-weight:850; }
.wealth-tier-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.wealth-tier-option { min-width:0; height:56px; padding:6px 52px 6px 7px; border:2px solid transparent; border-radius:12px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; position:relative; overflow:hidden; color:#fff; background-color:#665a50; background-repeat:no-repeat; background-position:right center; background-size:auto 100%; text-align:left; text-shadow:0 1px 3px rgba(0,0,0,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 3px 8px rgba(30,21,45,.12); transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease; }
.wealth-tier-option.tier-king { background-image:url("./assets/real-gacha/member-bg-king.png"); }
.wealth-tier-option.tier-duke { background-image:url("./assets/real-gacha/member-bg-duke.png"); }
.wealth-tier-option.tier-marquis,.wealth-tier-option.tier-earl { background-image:url("./assets/real-gacha/member-bg-blue.png"); }
.wealth-tier-option.tier-viscount { background-image:url("./assets/real-gacha/member-bg-viscount.png"); }
.wealth-tier-option.tier-lord { background-image:url("./assets/real-gacha/member-bg-lord.png"); }
.wealth-tier-option.tier-knight { background-image:url("./assets/real-gacha/member-bg-knight.png"); }
.wealth-tier-option strong { position:relative; z-index:1; font-size:13px; line-height:1; }
.wealth-tier-option span { position:relative; z-index:1; color:#70e6ff; font-size:12px; font-weight:950; white-space:nowrap; }
.wealth-tier-option:hover { transform:translateY(-1px); filter:brightness(1.08); }
.wealth-tier-option.selected { border-color:#fff; color:#fff; background-color:#665a50; box-shadow:0 0 0 3px var(--pink),0 7px 18px rgba(255,63,133,.32),inset 0 0 12px rgba(255,255,255,.2); filter:brightness(1.08); }
.wealth-tier-option.selected::after { content:"✓"; position:absolute; right:5px; top:5px; z-index:2; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--pink); border:1px solid rgba(255,255,255,.9); font-size:11px; font-weight:950; line-height:1; text-shadow:none; box-shadow:0 2px 7px rgba(53,16,32,.35); }
.wealth-tier-note { margin:7px 2px 0; color:#8b95a3; font-size:10px; line-height:1.45; }
.room-code-input { text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.generated-room-card { margin:0 0 18px; padding:17px 20px; display:flex; flex-direction:column; gap:5px; border:1px solid #ffd2e2; border-radius:17px; color:#722342; background:radial-gradient(circle at 92% 8%,rgba(255,255,255,.8),transparent 30%),linear-gradient(120deg,#fff0f6,#ffe1ec); box-shadow:0 10px 25px rgba(193,55,105,.1); }
.generated-room-card > span { color:var(--pink); font-size:10px; font-weight:900; letter-spacing:.14em; }
.generated-room-card strong { font-size:14px; }
.generated-room-card strong b { margin-left:7px; color:#1e2430; font-size:22px; letter-spacing:.1em; }
.generated-room-card small { color:#916376; font-size:10px; }
.generated-room-code-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.copy-room-code { height:29px; padding:0 12px; border:1px solid #ff9fbe; border-radius:99px; color:var(--pink-dark); background:rgba(255,255,255,.72); font-size:11px; font-weight:900; }
.copy-room-code:hover { color:#fff; background:var(--pink); }
.setup-navigation { display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; margin-top:20px; }
.secondary-cta { height:51px; border:1px solid #dfe3e9; border-radius:15px; color:#6d7683; background:#f7f8fa; font-weight:850; }
.secondary-cta:hover { border-color:#ff9dbc; color:var(--pink-dark); background:#fff6f9; }
.final-setup-cta { margin-top:0; }
.speed-toggle { display:flex; align-items:center; gap:9px; margin-top:11px; font-size:11px; font-weight:750; color:#798391; }
.speed-toggle input { position:absolute; opacity:0; }
.speed-toggle span { position:relative; width:32px; height:18px; background:#cfd5dc; border-radius:99px; }
.speed-toggle span::after { content:""; position:absolute; width:14px; height:14px; left:2px; top:2px; background:#fff; border-radius:50%; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:.2s; }
.speed-toggle input:checked + span { background:var(--teal); }
.speed-toggle input:checked + span::after { transform:translateX(14px); }
.primary-cta { width:100%; height:51px; border:0; border-radius:15px; margin-top:20px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; color:#fff; background:linear-gradient(110deg,var(--pink),#ff6d94); font-weight:900; box-shadow:0 12px 24px rgba(255,63,133,.28); }
.primary-cta:hover { transform:translateY(-1px); box-shadow:0 15px 30px rgba(255,63,133,.32); }
.primary-cta b { font-size:22px; }

.room-view { height:calc(100vh - 72px); min-height:0; width:100%; display:grid; grid-template-columns:minmax(280px,340px) 460px minmax(280px,340px); align-items:start; justify-content:center; gap:22px; padding:30px clamp(20px,3vw,55px); position:relative; overflow:hidden; background:#f7f7f8; }
.card { background:#fff; border-radius:15px; box-shadow:0 4px 20px rgba(29,37,54,.05); }
.room-sidebar { height:min(870px,calc(100vh - 132px)); display:flex; flex-direction:column; gap:20px; min-width:0; }
.room-summary { min-height:120px; padding:16px; display:flex; align-items:center; gap:14px; }
.room-summary-details { min-width:0; flex:1; }
.room-summary-code { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.room-summary-code small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-summary-code small span { color:#596273; font-weight:900; letter-spacing:.08em; }
.room-summary-copy { flex:0 0 auto; height:25px; padding:0 9px; border:1px solid #ff9fbe; border-radius:99px; color:var(--pink-dark); background:#fff4f8; font-size:10px; font-weight:900; cursor:pointer; transition:.18s ease; }
.room-summary-copy:hover { color:#fff; background:var(--pink); }
.room-summary-copy.copied { color:#fff; border-color:var(--teal); background:var(--teal); }
.theme-thumb { flex:0 0 78px; height:78px; border-radius:16px; box-shadow:0 8px 22px rgba(65,36,94,.24); background:url("./assets/real-gacha/room-nightclub.png") center 63% / cover no-repeat; position:relative; overflow:hidden; }
.theme-thumb::before { content:"BATTLE"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:950; letter-spacing:.13em; text-shadow:0 2px 5px #000; }
.theme-thumb.ocean { background:linear-gradient(135deg,#074468,#1eaaa4); }
.theme-thumb.candy { background:linear-gradient(135deg,#7e3da7,#f669a5 65%,#ffb16c); }
.room-summary small { color:#88909d; font-weight:700; }
.room-summary h2 { font-size:17px; margin:5px 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:205px; }
.room-summary p { margin:0; font-size:12px; color:var(--teal); font-weight:800; }
.live-dot { width:7px; height:7px; background:#40cbb9; display:inline-block; border-radius:50%; margin-right:6px; box-shadow:0 0 0 4px rgba(64,203,185,.12); }
.members-card { flex:1; min-height:0; overflow:hidden; }
.card-title-row { height:57px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:3px solid var(--pink); }
.card-title-row h3 { margin:0; font-size:16px; }
.card-title-row span { font-size:12px; color:#a0a7b0; }
.member-list { padding:10px 0; display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 295px); overflow:auto; }
.member-row { width:310px; max-width:100%; height:42px; flex:0 0 42px; align-self:center; border-radius:21px; display:flex; align-items:center; padding:3px 112px 3px 4px; gap:8px; position:relative; overflow:hidden; color:#fff; border:0; background-repeat:no-repeat; background-position:center; background-size:310px 42px; transition:.2s; }
.member-row.current { outline:2px solid #ff78a6; outline-offset:1px; }
.member-row.tier-king { background-image:url("./assets/real-gacha/member-bg-king.png"); }
.member-row.tier-duke { background-image:url("./assets/real-gacha/member-bg-duke.png"); }
.member-row.tier-marquis,.member-row.tier-earl { background-image:url("./assets/real-gacha/member-bg-blue.png"); }
.member-row.tier-viscount { background-image:url("./assets/real-gacha/member-bg-viscount.png"); }
.member-row.tier-lord { background-image:url("./assets/real-gacha/member-bg-lord.png"); }
.member-row.tier-knight { background-image:url("./assets/real-gacha/member-bg-knight.png"); }
.member-row img { width:36px; height:36px; flex:0 0 36px; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,.85); z-index:1; }
.member-info { min-width:0; flex:1; }
.member-info strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.member-info small { display:block; max-width:100%; overflow:hidden; color:rgba(255,255,255,.88); font-size:11px; font-weight:700; line-height:1.15; white-space:nowrap; text-overflow:ellipsis; }
.member-score { position:absolute; right:43px; top:50%; width:68px; transform:translateY(-50%); overflow:visible; font-size:12px; font-weight:900; line-height:1; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px rgba(0,0,0,.28); }

.battle-stage { height:min(870px,calc(100vh - 132px)); min-height:0; position:relative; overflow:hidden; border-radius:16px; color:#fff; box-shadow:0 20px 50px rgba(18,15,41,.22); background:#13122c; isolation:isolate; }
.mobile-room-head,.mobile-rank-strip { display:none; }
.battle-stage::before { content:""; position:absolute; inset:0; z-index:-3; background:var(--stage-bg); }
.battle-stage::after { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(8,7,26,.12),rgba(7,7,23,.32) 60%,rgba(7,7,18,.87)), repeating-linear-gradient(120deg,transparent 0 82px,rgba(255,255,255,.018) 83px 84px); }
.theme-neon { --stage-bg: url("./assets/real-gacha/room-nightclub.png") center / cover no-repeat; }
.theme-ocean { --stage-bg: radial-gradient(circle at 23% 15%,rgba(89,255,227,.5),transparent 17%),radial-gradient(circle at 78% 22%,rgba(30,118,230,.65),transparent 20%),linear-gradient(145deg,#041f3b,#076b76 45%,#061838); }
.theme-candy { --stage-bg: radial-gradient(circle at 22% 15%,rgba(255,195,223,.72),transparent 17%),radial-gradient(circle at 75% 25%,rgba(141,75,217,.65),transparent 20%),linear-gradient(145deg,#6c2d90,#d64784 50%,#4b2877); }
.stage-topbar { height:76px; display:flex; align-items:center; justify-content:center; gap:22px; padding:0 22px; }
.phase-pill { position:absolute; left:22px; top:22px; padding:8px 12px; border-radius:999px; font-size:11px; font-weight:900; color:#fff; background:linear-gradient(90deg,#41c9bc,#3e9ece); box-shadow:0 5px 18px rgba(48,198,184,.28); }
.host-start-button { position:absolute; z-index:4; right:18px; top:18px; height:38px; padding:0 17px; border:1px solid rgba(255,255,255,.7); border-radius:99px; color:#fff; background:linear-gradient(90deg,#ff4388,#ff7aa4); box-shadow:0 7px 18px rgba(255,50,123,.3); font-size:12px; font-weight:900; }
.host-start-button:disabled { opacity:.5; cursor:wait; }
.host-battle-controls { position:absolute; z-index:5; left:22px; top:58px; display:flex; align-items:center; gap:6px; }
.host-battle-controls button { height:34px; padding:0 10px; border:1px solid rgba(255,255,255,.7); border-radius:999px; color:#fff; background:rgba(22,32,61,.76); box-shadow:0 5px 14px rgba(10,16,40,.25); font-size:11px; font-weight:900; white-space:nowrap; }
.host-battle-controls button:hover { transform:translateY(-1px); background:rgba(40,55,91,.92); }
.host-battle-controls button:disabled { opacity:.5; cursor:wait; transform:none; }
.host-battle-controls .host-end-button { background:linear-gradient(90deg,#ff3f78,#ff6c86); }
@media (max-width:700px) {
  .host-battle-controls { left:16px; top:58px; gap:4px; }
  .host-battle-controls button { height:30px; padding:0 8px; font-size:10px; }
}
.countdown-wrap { text-align:center; }
.countdown-wrap small { display:block; color:rgba(255,255,255,.68); font-size:10px; letter-spacing:.1em; }
.countdown-wrap strong { font-variant-numeric:tabular-nums; font-size:24px; letter-spacing:.08em; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.icon-button { position:absolute; right:20px; top:20px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.25); color:#fff; font-size:18px; }
.icon-button.muted { color:#788094; }
.seat-grid { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); gap:20px 8px; height:53%; padding:28px 24px 10px; }
.seat { min-width:0; display:flex; flex-direction:column; align-items:center; position:relative; }
.seat-crown { height:18px; font-size:19px; color:#ffe067; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.seat-avatar { position:relative; width:60px; height:60px; display:grid; place-items:center; border-radius:50%; background:rgba(3,5,22,.65); box-shadow:0 8px 18px rgba(0,0,0,.28); }
.seat-avatar > .seat-photo { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.seat-avatar-frame { position:absolute; z-index:2; left:50%; top:50%; width:84px; height:84px; transform:translate(-50%,-50%); pointer-events:none; }
.seat-avatar-frame img { width:100%; height:100%; object-fit:contain; }
.seat-avatar.empty::before { content:""; width:34px; height:34px; background:url("./assets/real-gacha/icon-opacity-sofa.svg") center / contain no-repeat; opacity:.72; }
.seat-avatar.current { box-shadow:0 0 0 3px rgba(255,91,167,.18),0 0 26px rgba(255,78,166,.48); }
.mic-badge { position:absolute; z-index:3; right:-1px; bottom:0; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:#fc324b; }
.mic-badge img { width:13px; height:13px; object-fit:contain; }
.seat-name { max-width:105px; margin-top:7px; font-size:11px; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 4px rgba(0,0,0,.7); }
.seat-score { margin-top:4px; padding:2px 8px; border-radius:99px; background:rgba(9,7,25,.55); font-size:10px; color:#ffb8d5; font-weight:900; }
.stage-controls { position:absolute; left:0; right:0; bottom:0; height:204px; display:flex; align-items:flex-start; justify-content:center; padding:20px 18px 0; background:linear-gradient(180deg,transparent,rgba(7,6,21,.9) 39%,rgba(7,6,21,.98)); }
.balance-panel { position:absolute; left:22px; bottom:22px; z-index:2; }
.balance-panel small { display:block; font-size:10px; color:#bfc0d0; }
.balance-panel strong { display:block; margin:4px 0; font-size:13px; }
.balance-panel button { border:0; padding:0; color:#ff8fbd; background:none; font-size:11px; font-weight:900; }
.stage-action-row { height:106px; display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:center; gap:12px; transform:translateX(48px); }
.stage-fab { position:relative !important; flex:0 0 auto !important; display:flex !important; flex-direction:column; align-items:center; min-width:0 !important; max-width:none !important; border:0 !important; padding:0 !important; color:#fff; background:transparent !important; box-shadow:none !important; filter:drop-shadow(0 7px 12px rgba(0,0,0,.3)); }
.stage-fab img { display:block; object-fit:contain; transition:transform .18s ease,filter .18s ease; }
.stage-fab span { position:absolute; left:50%; bottom:3px; transform:translateX(-50%); white-space:nowrap; color:#fff; font-size:10px; font-weight:900; text-shadow:0 2px 5px #22142f,0 0 4px #22142f; }
.stage-fab:hover:not(:disabled) img { transform:translateY(-3px) scale(1.03); }
.stage-fab:disabled { opacity:.5; filter:grayscale(.45) drop-shadow(0 5px 8px rgba(0,0,0,.25)); }
.lucky-gacha-fab { width:96px !important; height:96px !important; }
.battle-fab { width:78px !important; height:88px !important; margin-top:4px; }
.battle-fab img { width:78px !important; height:84px !important; max-width:78px !important; }
.lucky-gacha-fab img { width:96px !important; height:92px !important; max-width:96px !important; }
.lucky-gacha-fab small { display:none; }
.stage-tool-row { position:absolute; right:18px; bottom:18px; display:flex; align-items:center; gap:14px; z-index:2; }
.stage-tool-button { position:relative; width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(8,8,22,.62); transition:.18s; }
.stage-tool-button:hover { background:rgba(255,255,255,.15); transform:translateY(-1px); }
.stage-tool-button img { width:24px; height:24px; object-fit:contain; }
.stage-tool-button.muted { opacity:.42; }
.inventory-tool b { position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:10px; color:#fff; background:#ff3f85; border:2px solid #302440; font-size:8px; }
.leave-fab { position:absolute; left:108px; top:22px; z-index:6; height:31px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.72); border-radius:999px; color:#fff; background:linear-gradient(135deg,#ff4f91,#ff7b72); box-shadow:0 6px 16px rgba(255,72,136,.28); font-size:11px; font-weight:900; white-space:nowrap; }
.leave-fab:hover { transform:translateY(-1px); }

.social-panel { height:min(870px,calc(100vh - 132px)); min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.social-tabs { height:54px; display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid #edf0f4; }
.social-tabs button { border:0; background:#fff; color:#a1a7b0; font-size:14px; font-weight:850; position:relative; }
.social-tabs button.active { color:#1d2937; }
.social-tabs button.active::after { content:""; position:absolute; left:26px; right:26px; bottom:0; height:3px; background:var(--pink); border-radius:3px 3px 0 0; }
.tab-panel { display:none; flex:1; min-height:0; }
.tab-panel.active { display:flex; flex-direction:column; }
.feed { min-height:0; flex:1; padding:13px 12px; overflow:auto; background:linear-gradient(180deg,#656f85,#3a4c68); }
.new-message-button { position:absolute; z-index:7; left:50%; bottom:88px; min-width:140px; height:40px; padding:0 22px; border:0; border-radius:22px; color:#182437; background:rgba(255,255,255,.97); box-shadow:0 5px 16px rgba(14,25,48,.28); font-size:16px; font-weight:850; transform:translateX(-50%); cursor:pointer; }
.new-message-button:hover,.new-message-button:focus-visible { background:#fff; box-shadow:0 6px 19px rgba(14,25,48,.36); outline:2px solid rgba(255,255,255,.55); outline-offset:2px; }
.new-message-button[hidden] { display:none; }
.feed-event { margin:0 0 9px; border-radius:9px; padding:7px 9px; color:#fff; background:rgba(53,213,194,.82); font-size:11px; line-height:1.45; animation:feedIn .25s ease; }
.feed-event strong { color:#fff8a6; }
.feed-event.system { background:rgba(255,255,255,.13); color:#dbe1eb; }
.feed-gift-card { width:100%; max-width:300px; margin:0 0 14px; padding:8px 48px 8px 8px; display:flex; flex-direction:column; gap:8px; border-radius:8px; color:#fff; background:rgba(65,176,162,.9); animation:feedIn .25s ease; }
.feed-gift-copy { font-size:13px; line-height:1.55; }
.feed-gift-copy strong { color:rgb(255,227,80); font-weight:850; }
.feed-gift-copy span { color:#fff; }
.feed-gift-line { min-height:40px; display:flex; align-items:center; gap:10px; }
.feed-gift-line img { width:40px; height:40px; flex:0 0 40px; object-fit:contain; }
.feed-gift-line span { color:#fff; font-size:13px; }
.feed-gacha-card { width:100%; min-height:58px; margin:0 0 10px; padding:8px 9px; display:grid; grid-template-columns:minmax(0,1fr) 48px; align-items:center; column-gap:8px; row-gap:5px; border-radius:7px; color:#fff; background:rgba(143,126,78,.88); animation:feedIn .25s ease; }
.feed-gacha-card > div { min-width:0; font-size:11px; line-height:1.45; }
.feed-gacha-copy { grid-column:1; grid-row:2; }
.feed-gacha-card strong { color:#fff15e; }
.feed-gacha-card b { color:#fff; font-weight:850; }
.feed-gacha-item { display:block; margin-top:2px; }
.feed-gacha-card > img { grid-column:2; grid-row:2; width:48px; height:48px; object-fit:contain; }
.feed-gacha-card.batch { display:block; padding:9px; }
.feed-gacha-batch-title { margin-bottom:7px; font-size:11px; }
.feed-gacha-meta { grid-column:1 / -1; grid-row:1; width:100%; min-width:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px; margin:0 0 4px; }
.feed-gacha-meta span { min-width:0; padding:3px 6px; border:1px solid rgba(255,255,255,.3); border-radius:10px; color:#fff; background:rgba(42,37,67,.52); font-family:"Arial Narrow","Microsoft JhengHei",sans-serif; font-size:10px; font-weight:850; line-height:1.25; letter-spacing:-.25px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:clip; }
.feed-gacha-meta span:last-child { padding-inline:5px; font-size:10px; }
.feed-gacha-card.batch .feed-gacha-meta { margin:0 0 7px; }
.feed-gacha-meta span:first-child { color:#fff5a2; border-color:rgba(255,241,94,.4); background:rgba(80,62,15,.28); }
.feed-gacha-results { display:flex; flex-direction:column; gap:5px; }
.feed-gacha-result { min-height:40px; display:flex; align-items:center; gap:9px; }
.feed-gacha-result img { width:40px; height:40px; flex:0 0 40px; object-fit:contain; }
.feed-gacha-result span { color:#fff; font-size:11px; }
.feed-chat { display:flex; gap:8px; align-items:flex-start; margin:0 0 14px; color:#fff; animation:feedIn .25s ease; }
.chat-avatar { position:relative; width:42px; height:42px; flex:0 0 42px; margin-top:2px; }
.chat-avatar-photo { position:absolute; left:6px; top:6px; width:30px; height:30px; object-fit:cover; border-radius:50%; }
.chat-avatar-frame { position:absolute; inset:-3px; width:48px; height:48px; object-fit:contain; pointer-events:none; }
.chat-message-body { min-width:0; flex:1; }
.chat-user-line { min-height:17px; display:flex; align-items:center; flex-wrap:wrap; gap:3px; }
.chat-user-line b { max-width:126px; overflow:hidden; color:#fff; font-size:11px; font-weight:900; white-space:nowrap; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.chat-badge { height:13px; padding:0 4px; display:inline-flex; align-items:center; border-radius:7px; border:1px solid rgba(255,255,255,.5); font-size:7px; line-height:1; white-space:nowrap; }
.chat-badge.level { color:#fff; background:#f6a55c; }
.chat-badge.group { color:#f2f6ff; background:#718199; }
.chat-badge.tier { color:#6f4a14; background:linear-gradient(90deg,#ffe9a5,#f3b749); }
.chat-bubble-line { display:flex; align-items:flex-end; gap:6px; margin-top:5px; }
.chat-bubble-line p { position:relative; max-width:190px; min-height:34px; margin:0; padding:8px 12px; border:2px solid rgba(179,218,255,.92); border-radius:5px 12px 12px 12px; color:#40508c; background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(226,238,255,.94)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 3px 8px rgba(8,20,48,.2); font-size:11px; line-height:1.5; word-break:break-word; }
.chat-bubble-line p::before { content:""; position:absolute; left:-7px; top:-2px; width:11px; height:11px; border-left:2px solid rgba(179,218,255,.92); background:rgba(247,251,255,.96); transform:skewX(-34deg); }
.chat-bubble-line time { padding-bottom:2px; color:#fff; font-size:9px; font-weight:850; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.sticker-panel { position:absolute; z-index:8; left:8px; right:8px; bottom:76px; height:240px; overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:12px; color:#fff; background:rgba(120,128,150,.94); box-shadow:0 14px 34px rgba(12,18,39,.4); backdrop-filter:blur(12px); }
.sticker-panel-head { height:42px; padding:0 12px; display:flex; align-items:center; justify-content:space-between; }
.sticker-panel-head strong { font-size:13px; }
.sticker-panel-head button { width:28px; height:28px; border:0; color:#fff; background:transparent; font-size:25px; line-height:1; }
.sticker-grid { height:198px; padding:2px 10px 12px; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; overflow-y:auto; }
.sticker-option { aspect-ratio:1; min-height:0; border:0; border-radius:6px; background:transparent; cursor:pointer; }
.sticker-option:hover,.sticker-option:focus-visible { background:rgba(255,255,255,.92); outline:none; }
.sticker-option img { width:100%; height:100%; object-fit:contain; }
.feed-sticker-image { width:86px; height:86px; object-fit:contain; }
#chatPanel { position:relative; }
.chat-form { height:58px; background:#2f405a; display:flex; align-items:center; gap:8px; padding:10px 12px 6px; }
.chat-form input { min-width:0; flex:1; height:34px; border:0; border-radius:18px; background:rgba(255,255,255,.62); padding:0 14px; outline:0; color:#253349; font-size:12px; }
.chat-form .chat-icon-button { width:28px; height:34px; flex:0 0 28px; padding:0; border:0; background:transparent; }
.chat-form .chat-icon-button img { width:24px; height:24px; object-fit:contain; }
.chat-form .chat-icon-button.send img { width:27px; height:27px; }
.chat-notice { height:23px; background:#2f405a; color:#96a5b9; padding:0 14px; font-size:9px; }
.chat-notice.error { color:#ff9ebd; }
.rank-list { padding:10px; overflow:auto; }
.rank-row { display:grid; grid-template-columns:30px 42px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 7px; border-bottom:1px solid #eff1f4; }
.rank-row .rank-num { font-size:13px; font-weight:950; color:#8e96a1; text-align:center; }
.rank-row:nth-child(1) .rank-num { color:#f2b02d; font-size:20px; }
.rank-row:nth-child(2) .rank-num { color:#99a9ba; font-size:18px; }
.rank-row:nth-child(3) .rank-num { color:#c77a50; font-size:17px; }
.rank-row img { width:40px; height:40px; object-fit:cover; border-radius:50%; }
.rank-row .rank-name { min-width:0; }
.rank-row .rank-name strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.rank-row .rank-name small { color:#a0a7b0; font-size:9px; }
.rank-points { font-size:11px; font-weight:900; color:#19bce8; }
@keyframes feedIn { from { opacity:0; transform:translateY(6px); } }

.fly-banner-layer { position:fixed; z-index:1000; inset:124px 0 auto; height:204px; overflow:visible; pointer-events:none; }
.fly-banner { position:absolute; top:0; left:0; width:420px; height:64px; box-sizing:border-box; display:flex; align-items:center; color:#fff; opacity:.92; border:1.5px solid #8df3e5; border-radius:32px; background:linear-gradient(100deg,#1b9298,#25c2b2 52%,#268aa9); box-shadow:0 8px 28px rgba(12,39,63,.32); transform:translateX(100vw); animation:flyAcross 15s linear 1 forwards; }
.fly-banner.lane-0 { top:0; }
.fly-banner.lane-1 { top:70px; }
.fly-banner.lane-2 { top:140px; }
.fly-banner.gacha { border-color:#ffe28d; background:linear-gradient(100deg,#9b6d1f,#d99b27 52%,#8c4d18); }
.fly-banner.jackpot { height:54px; border:2px solid #fff338; border-radius:29px; color:#fff; background:linear-gradient(90deg,rgba(233,132,139,.96),rgba(226,142,160,.94)); box-shadow:0 5px 18px rgba(86,32,52,.28); }
.fly-avatar { width:59px; height:59px; flex:0 0 59px; object-fit:cover; border:1.5px solid #8df3e5; border-radius:50%; margin-left:1px; margin-right:4px; }
.fly-banner.gacha .fly-avatar { border-color:#ffe28d; }
.fly-banner.jackpot .fly-avatar { width:58px; height:58px; flex-basis:58px; margin-left:-1px; border:2px solid #fff338; }
.fly-jackpot-copy { min-width:0; flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding-right:18px; white-space:nowrap; font-size:13px; text-shadow:0 1px 3px rgba(88,33,49,.25); }
.fly-jackpot-copy strong { overflow:hidden; text-overflow:ellipsis; max-width:122px; }
.fly-jackpot-copy img { width:14px; height:14px; object-fit:contain; }
.fly-jackpot-copy b { font-size:14px; }
.fly-copy { width:266px; height:100%; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:8px 0; }
.fly-main { display:flex; align-items:center; gap:4px; margin-bottom:7px; white-space:nowrap; font-size:12px; }
.fly-main strong { font-size:14px; }
.fly-main b { color:#fff6b8; font-size:13px; }
.fly-room { display:flex; align-items:center; gap:3px; min-width:0; color:#fff; font-size:10px; font-weight:800; }
.fly-room::before { content:"✦"; color:#fff3a0; font-size:12px; }
.fly-room span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fly-prize { display:flex; align-items:center; gap:4px; min-width:0; color:#fff9bd; font-size:10px; font-weight:850; }
.fly-prize img { width:13px; height:13px; object-fit:contain; }
.fly-prize > span:last-child { min-width:0; color:#fff; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fly-gift { position:absolute; right:18px; top:-5px; width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.22)); }
.fly-quantity { position:absolute; right:3px; bottom:5px; min-width:28px; color:#fff; font-size:16px; font-weight:950; font-style:italic; text-shadow:0 2px 5px rgba(0,0,0,.5); }
@keyframes flyAcross { from { transform:translateX(100vw); } to { transform:translateX(-420px); } }

.service-marquee-layer { position:fixed; z-index:1000; top:70px; left:0; width:100vw; height:23px; padding-left:30px; display:flex; align-items:center; pointer-events:none; overflow:visible; }
.service-marquee { position:absolute; left:30px; top:2px; width:455px; height:30px; display:flex; align-items:center; border-radius:15px; opacity:.9; color:#fff; background:linear-gradient(92deg,#3bc8ff -49%,#7eaee6 149%); transform:translateX(100vw); animation:serviceMarqueeAcross 30s linear 1 forwards; }
.service-marquee > img { width:36px; height:36px; flex:0 0 36px; margin-left:-10px; object-fit:contain; }
.service-marquee-window { position:relative; width:100%; height:15px; overflow:hidden; }
.service-marquee-copy { position:absolute; width:max-content; white-space:nowrap; font-size:11px; line-height:15px; animation:serviceMarqueeText 8s linear infinite; }
.service-marquee-copy strong { font-weight:600; }
@keyframes serviceMarqueeAcross { from { transform:translateX(100vw); } to { transform:translateX(-470px); } }
@keyframes serviceMarqueeText { from { transform:translateX(100%); } to { transform:translateX(-100%); } }

.modal-layer { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(13,13,26,.67); backdrop-filter:blur(8px); }
.modal { position:relative; z-index:1; width:min(445px,calc(100vw - 32px)); max-height:calc(100vh - 34px); overflow:auto; border-radius:18px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.38); animation:modalIn .24s ease; }
@keyframes modalIn { from { opacity:0; transform:translateY(12px) scale(.97); } }
.modal-close { position:absolute; z-index:5; right:13px; top:10px; width:32px; height:32px; border:0; border-radius:50%; background:rgba(18,24,39,.08); font-size:24px; line-height:1; }
.stage-panel-layer { position:absolute; z-index:40; inset:0; pointer-events:none; }
.stage-panel-layer:not(.is-hidden) { display:block; }
.stage-panel { position:absolute; z-index:1; pointer-events:auto; animation:stagePanelIn .2s ease; }
@keyframes stagePanelIn { from { opacity:0; transform:translate(-50%,10px) scale(.98); } }
.gacha-modal { color:#fff; overflow:hidden; background:#4d3980 url("./assets/real-gacha/6634cee4f5c3f8e51e24703066b03faf.png") center / 100% 100% no-repeat; border:4px solid #2a1a54; }
.stage-panel.gacha-modal { left:50%; bottom:6px; width:428px; height:569px; max-height:calc(100% - 12px); border-width:0; border-radius:12px; box-shadow:0 16px 38px rgba(0,0,0,.36); transform:translateX(-50%); }
.gacha-modal .modal-close { color:#fff; background:transparent; }
.ribbon { width:210px; height:60px; margin:-1px auto -12px; display:grid; place-items:center; background:url("./assets/real-gacha/497afefd00348c11821078bc0bbe9115.png") center/100% 100% no-repeat; font-size:18px; font-weight:950; }
.gacha-pool-head { display:flex; justify-content:space-between; align-items:center; padding:4px 10px 0; }
.help-pill { padding:5px 9px; background:#ff6a37; border-radius:7px; font-size:11px; font-weight:900; }
.help-pill b { display:inline-grid; width:15px; height:15px; place-items:center; margin-left:3px; border:1px solid #fff; border-radius:50%; }
.gacha-record-button { width:56px; border:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:1px; color:#fff; background:transparent; font-size:9px; }
.gacha-record-button img { width:48px; height:48px; object-fit:contain; }
.link-button { color:#fff; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.1); border-radius:8px; padding:5px 8px; font-size:11px; }
.egg-stage { position:relative; height:200px; display:flex; align-items:flex-start; justify-content:center; gap:0; overflow:hidden; padding:0 22px; }
.egg-choice { position:relative; width:104px; height:200px; flex:0 0 104px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; border:0; padding:0; color:#fff; background:transparent; opacity:1; transform:translateY(40px); transition:transform .24s ease,width .24s ease; }
.egg-choice.active { width:176px; flex-basis:176px; transform:translateY(0); }
.egg-choice > span { position:relative; z-index:2; min-width:48px; height:24px; display:flex; align-items:center; justify-content:center; gap:3px; margin-top:-3px; padding:0 7px; border-radius:14px; color:#fff; background:rgba(42,27,89,.82); font-size:12px; font-weight:950; }
.egg-choice > span img { width:14px; height:14px; }
.egg { position:relative; width:104px; height:94px; object-fit:contain; filter:drop-shadow(0 10px 0 rgba(30,18,65,.4)); }
.egg.side { width:104px; height:94px; margin:0; }
.main-egg { width:176px; height:160px; transition:.18s; }
.egg-nav { position:absolute; z-index:5; top:91px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; }
.egg-nav img { width:32px; height:32px; object-fit:contain; }
.egg-nav-prev { left:7px; }
.egg-nav-next { right:7px; }
.main-egg.cracking { animation:crack .65s ease; }
@keyframes crack { 20%,60% { transform:rotate(-5deg) translateX(-3px); } 40%,80% { transform:rotate(6deg) translateX(3px); } 100% { transform:scale(1.06); filter:brightness(1.6); } }
.egg-cost { width:max-content; margin:-8px auto 8px; padding:5px 14px; display:flex; align-items:center; gap:4px; color:#0ba9d4; border-radius:99px; background:#fff; font-size:12px; font-weight:950; }
.egg-cost img { width:15px; height:15px; }
.gacha-content-button { position:relative; z-index:3; display:block; min-width:112px; height:37px; margin:-3px auto 8px; padding:0 18px; border:0; color:#fff; background:transparent url("./assets/real-gacha/d48147ca27d70bd7077fd37ce5251081.png") center/100% 100% no-repeat; font-weight:900; }
.draw-actions { display:grid; grid-template-columns:1fr 1fr; gap:34px; padding:7px 52px 12px; }
.draw-actions button { height:47px; display:flex; align-items:center; justify-content:center; gap:7px; border:0; color:#fff; background:transparent; font-weight:900; position:relative; overflow:visible; }
.real-draw-button img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; z-index:0; }
.real-draw-button span,.real-draw-button b { position:relative; z-index:1; text-shadow:0 1px 3px rgba(141,21,73,.65); }
.draw-actions b { font-size:10px; opacity:.76; }
.pool-progress-card { position:relative; height:114px; box-sizing:border-box; margin:0 16px; padding:39px 12px 8px; border-radius:10px; color:#4a4749; background:#fff9d5 url("./assets/real-gacha/e3d7a565a7f30e3553fc611f4921cf84.png") center/100% 100% no-repeat; }
.pity-chest-title { position:absolute; inset:0 0 auto; height:32px; display:grid; place-items:center; border-radius:10px 10px 0 0; color:#fff; background:#ff693b; font-weight:900; }
.pity-auto { display:flex; align-items:center; gap:5px; color:#ff9e00; font-size:10px; }
.pity-auto input { appearance:none; width:14px; height:14px; border:0; background:transparent url("./assets/real-gacha/3521d71400aeee248086b081a76512db.png") center/contain no-repeat; }
.pity-auto input:checked { background-image:url("./assets/real-gacha/9acb74877e16d4a79d82f255c4870317.png"); }
.pool-label { display:flex; justify-content:space-between; font-size:11px; }
.pool-label b { color:#ff633e; }
.progress-track { height:18px; box-sizing:border-box; margin:7px 0 2px; padding:4px; background:transparent url("./assets/real-gacha/ddcb1c24582ab0e3e8587a2523000b95.png") center/100% 100% no-repeat; border:0; border-radius:3px; overflow:hidden; }
.progress-track span { display:block; width:0; height:10px; border-radius:2px; background-image:var(--pity-fill,linear-gradient(90deg,#ffda46,#ff7c42)); background-size:100% 100%; transition:.35s; }
.progress-line { display:flex; align-items:center; gap:8px; }
.progress-line .progress-track { flex:1; }
.progress-line > img { width:78px; height:74px; object-fit:contain; margin:-26px -9px -19px -9px; }
.pity-chest-footer { display:flex; justify-content:space-between; align-items:center; color:#8e8a87; font-size:10px; }
.pity-chest-footer button { margin-right:-1px; padding:3px 10px; border:0; border-radius:12px; color:#fff; background:#ffbd25; box-shadow:inset 0 0 0 1px rgba(255,255,255,.65); font-size:9px; font-weight:900; }
.pool-progress-card small { color:#7d7781; font-size:9px; }
.modal-balance { padding:0 15px 10px; display:flex; align-items:center; justify-content:center; text-align:center; color:#33313d; font-size:11px; }
.modal-balance > img { width:14px; height:14px; margin:0 3px; }
.modal-balance button { border:0; border-radius:99px; background:var(--pink); color:#fff; padding:5px 10px; margin-left:7px; font-weight:850; }
.compact-modal { padding:30px 20px 20px; border:3px solid #ff9bc2; }
.inventory-modal { width:min(455px,calc(100vw - 28px)); padding:24px 20px 20px; color:#fff; border:1px solid rgba(255,255,255,.55); border-radius:14px; background:linear-gradient(135deg,rgba(43,43,57,.93),rgba(102,77,103,.88)); backdrop-filter:blur(18px); }
.stage-panel.inventory-modal { left:16px; right:16px; bottom:80px; width:auto; height:365px; box-sizing:border-box; padding:12px 12px 0; border-radius:12px; background:rgba(255,255,255,.3); backdrop-filter:blur(8px); box-shadow:0 14px 34px rgba(0,0,0,.28); transform:none; overflow:hidden; }
.inventory-modal .modal-close { color:#fff; background:rgba(255,255,255,.12); }
.gift-panel-head { height:28px; display:flex; align-items:center; justify-content:space-between; padding-right:36px; }
.gift-panel-head strong { font-size:13px; }
.gift-panel-head > button { border:0; border-radius:15px; padding:5px 11px; color:#fff; background:rgba(255,255,255,.22); font-size:10px; }
.inventory-modal .small-ribbon { width:auto; margin:0 38px 16px 0; padding:0; text-align:left; clip-path:none; background:none; font-size:15px; }
.gift-tabs { display:flex; align-items:center; gap:12px; margin:5px 0 7px; padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6); font-size:11px; white-space:nowrap; overflow:auto; }
.gift-tabs button { flex:0 0 auto; border:0; padding:0; color:inherit; background:transparent; font-size:inherit; }
.gift-tabs .active { color:#fff; font-weight:900; }
.small-ribbon { width:160px; margin:-32px auto 15px; padding:10px; text-align:center; color:#fff; background:#ff92b3; font-size:15px; font-weight:900; clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%); }
.pool-contents { max-height:420px; overflow:auto; padding:4px; }
.pool-item-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid #f0f1f3; }
.pool-item-row.released { opacity:.55; }
.gift-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; font-size:24px; background:linear-gradient(135deg,#f6f7ff,#ffe0eb); box-shadow:inset 0 0 0 1px rgba(50,56,88,.08); }
.gift-icon img { width:30px; height:30px; object-fit:contain; }
.pool-item-row strong { font-size:13px; }.pool-item-row small { display:block; color:#9aa1ac; font-size:10px; margin-top:2px; }
.pool-item-row b { display:flex; align-items:center; gap:3px; color:#f4ad25; font-size:12px; }
.pool-item-row b img { width:14px; height:14px; object-fit:contain; }
.confirm-button { width:100%; height:43px; border:0; border-radius:22px; color:#fff; background:linear-gradient(90deg,#ff438b,#ff4780); font-weight:900; margin-top:15px; box-shadow:0 8px 17px rgba(255,65,132,.22); }
.reward-modal { text-align:center; padding:28px 20px 20px; overflow:hidden; background:radial-gradient(circle at 50% 35%,#fff8bd,transparent 35%),linear-gradient(160deg,#6d3bad,#342368); color:#fff; }
.reward-rays { position:absolute; width:440px; height:440px; left:50%; top:-70px; transform:translateX(-50%); background:repeating-conic-gradient(rgba(255,255,255,.16) 0 12deg,transparent 12deg 25deg); animation:spin 12s linear infinite; }
@keyframes spin { to { transform:translateX(-50%) rotate(360deg); } }
.reward-modal > *:not(.reward-rays) { position:relative; }
.reward-modal p { margin:0; color:#ffe475; font-size:10px; font-weight:900; letter-spacing:.17em; }
.reward-modal h2 { margin:5px 0 14px; }
.reward-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-height:330px; overflow:auto; }
.reward-card { border-radius:12px; padding:9px 5px; background:rgba(255,255,255,.92); color:#303044; box-shadow:0 8px 20px rgba(0,0,0,.18); }
.reward-card .gift-icon { margin:auto; }
.reward-card strong { display:block; margin-top:6px; font-size:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.reward-card small { color:#10aed9; font-size:9px; font-weight:850; }
.inventory-grid { min-height:116px; max-height:116px; overflow:auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-content:start; gap:6px; }
.inventory-empty { grid-column:1/-1; text-align:center; color:#9ca3ad; padding:45px 0; font-size:12px; }
.inventory-item { position:relative; min-width:0; border:1px solid rgba(255,255,255,.12); border-radius:6px; background:rgba(50,31,68,.46); padding:5px 3px; text-align:center; }
.inventory-item.selected { border-color:#ff5a99; background:rgba(154,46,103,.62); }
.random-tag { position:absolute; z-index:2; right:2px; top:2px; padding:1px 4px; border-radius:3px; color:#fff; background:#ff8bab; font-size:7px; }
.inventory-item .gift-icon { width:58px; height:58px; margin:auto; border-radius:4px; background:rgba(255,255,255,.9); }
.inventory-item .gift-icon img { width:56px; height:56px; }
.inventory-item strong { display:block; margin-top:6px; font-size:10px; }
.inventory-item small { color:#74ddff; font-size:9px; }
.inventory-item .item-quantity { position:absolute; right:5px; top:5px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--pink); font-size:9px; font-weight:900; }
.inventory-item button { position:absolute; inset:0; width:100%; border:0; opacity:0; cursor:pointer; }
.gift-composer { margin-top:5px; padding-top:5px; border-top:1px solid rgba(255,255,255,.15); }
.gift-composer p { margin:0 0 8px; font-size:12px; }
.gift-recipients { display:flex; gap:6px; min-height:45px; overflow:auto; padding:2px; }
.recipient { flex:0 0 48px; border:0; background:transparent; padding:0; opacity:.55; }
.recipient img { width:34px; height:34px; object-fit:cover; border-radius:50%; border:2px solid transparent; }
.recipient small { display:block; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:8px; }
.recipient.selected { opacity:1; }.recipient.selected img { border-color:var(--pink); box-shadow:0 0 0 2px rgba(255,63,133,.16); }
.quantity-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; font-size:10px; }
.quantity-row > span:last-child { display:flex; align-items:center; gap:3px; }
.quantity-row img { width:13px; height:13px; }
.quantity-control { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:0; }
.quantity-control button { width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.75); color:#fff; background:rgba(255,255,255,.08); font-size:18px; }
.quantity-control span { min-width:25px; text-align:center; font-weight:900; }
.selected-gift-line { display:none; }
.gift-composer .confirm-button { display:block; width:120px; height:38px; margin:5px auto 0; }
.sponsor-modal { padding:36px 30px 26px; text-align:center; }
.sponsor-logo { width:72px; height:72px; display:grid; place-items:center; margin:auto; border-radius:22px; background:#ffe5ef; font-size:34px; }
.sponsor-modal h2 { margin:14px 0 8px; }
.sponsor-modal p { color:#7d8793; font-size:12px; line-height:1.65; }
.sponsor-link { display:grid; place-items:center; text-decoration:none; }
.room-view.chat-only .stage-controls button:disabled,.room-view.chat-only .social-tabs button:disabled { opacity:.28; cursor:not-allowed; }
.room-view.chat-only .leave-fab { display:none; }
.battle-summary { position:absolute; z-index:12; inset:10px; min-height:0; display:grid; grid-template-rows:clamp(238px,36%,248px) minmax(0,1fr); gap:10px; padding:10px; border:1px solid rgba(255,255,255,.18); border-radius:13px; color:#fff; background:rgba(17,16,38,.95); box-shadow:0 16px 40px rgba(0,0,0,.38); backdrop-filter:blur(9px); }
.battle-summary-ranking,.battle-summary-history { min-height:0; border-radius:10px; background:rgba(255,255,255,.07); overflow:hidden; }
.battle-summary-ranking { padding:9px; }
.battle-summary-result { position:relative; left:auto !important; top:auto !important; width:100%; height:100%; transform:none !important; padding:8px 14px 9px; text-align:center; color:var(--navy); background:linear-gradient(145deg,#fff,#fff2f7); border:3px solid #ff90b7; box-shadow:0 12px 28px rgba(255,77,140,.18); }
.battle-summary-result > small { display:block; color:var(--pink); font-size:9px; font-weight:950; letter-spacing:.18em; }
.battle-summary-result h2 { margin:1px 0 5px; font-size:16px; }
.battle-summary-result .result-crown { height:25px; font-size:28px; line-height:25px; }
.battle-summary-result .result-podium { gap:7px; height:116px; }
.battle-summary-result .podium-player { min-width:0; padding:5px 4px; border-radius:11px 11px 5px 5px; }
.battle-summary-result .podium-player.first { padding-top:12px; }
.battle-summary-result .podium-player img { width:42px; height:42px; border-width:2px; }
.battle-summary-result .podium-number { font-size:17px; line-height:18px; }
.battle-summary-result .podium-player strong { max-width:100%; margin-top:4px; overflow:hidden; color:#17243a; font-size:11px; font-weight:900; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.battle-summary-result .podium-player b { display:block; color:#009ecb; font-size:12px; font-weight:950; line-height:1.25; white-space:nowrap; }
.battle-summary-result .confirm-button { width:min(270px,100%); height:34px; margin-top:6px; cursor:pointer; }
.battle-summary-history { display:flex; flex-direction:column; padding:12px; }
.battle-summary-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.battle-summary-heading span { color:#ff89b4; font-size:10px; font-weight:950; letter-spacing:.14em; }
.battle-summary-heading strong { color:#fff; font-size:15px; }
.battle-replay-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:-1px 0 10px; }
.battle-replay-tabs button { height:32px; border:1px solid rgba(255,255,255,.16); border-radius:8px; color:#bfc9dc; background:rgba(255,255,255,.06); font-size:11px; font-weight:850; }
.battle-replay-tabs button.active { color:#fff; border-color:#ff75a8; background:linear-gradient(90deg,#e94d8b,#ff7c9d); box-shadow:0 4px 10px rgba(255,76,139,.2); }
.battle-summary-podium { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; height:calc(100% - 27px); }
.battle-summary-rank { min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 4px; border-radius:9px; background:rgba(255,255,255,.08); }
.battle-summary-rank.first { color:#ffe78a; border:1px solid rgba(255,215,77,.62); background:rgba(191,134,34,.2); }
.battle-summary-rank img { width:45px; height:45px; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,.72); }
.battle-summary-rank b { color:#ffdc62; font-size:16px; }
.battle-summary-rank strong { max-width:100%; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.battle-summary-rank small { color:#71ddff; font-size:9px; }
.battle-draw-history { min-height:0; flex:1; overflow:auto; scrollbar-gutter:stable; display:flex; flex-direction:column; gap:8px; padding-right:4px; }
.battle-history-row { min-height:56px; height:auto; box-sizing:border-box; flex:0 0 auto; display:grid; grid-template-columns:26px 40px minmax(0,1fr) auto; grid-template-rows:auto; align-items:center; gap:8px; padding:8px 9px; overflow:visible; border-radius:9px; color:#eef4ff; background:rgba(255,255,255,.08); cursor:pointer; transition:background .16s ease,box-shadow .16s ease; }
.battle-history-row.expanded { grid-template-rows:auto auto; }
.battle-history-row:hover { background:rgba(255,255,255,.12); }
.battle-history-row:focus-visible { outline:2px solid #74ddff; outline-offset:2px; }
.battle-history-row.jackpot { border:1px solid #ffd452; background:linear-gradient(100deg,rgba(139,91,23,.55),rgba(85,45,64,.55)); box-shadow:inset 0 0 14px rgba(255,204,70,.13); }
.history-sequence { color:#9aa8c2; text-align:center; font-size:10px; font-weight:900; }
.battle-history-row > img { width:40px; height:40px; object-fit:cover; border-radius:50%; }
.history-main { min-width:0; }
.history-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.4; }
.history-main small { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#bdc8db; font-size:11px; line-height:1.4; }
.history-main small b { color:#ffe35d; }
.history-total { display:flex; align-items:center; gap:5px; color:#69ddff; font-size:12px; font-weight:950; white-space:nowrap; }
.history-jackpot-tag { display:inline-flex; margin-left:5px; padding:2px 5px; border-radius:8px; color:#6d3b00; background:#ffd452; font-size:9px; font-weight:950; vertical-align:middle; }
.history-details { grid-column:1 / -1; grid-row:2; width:100%; box-sizing:border-box; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:2px 0 0; padding:8px; border-top:1px solid rgba(255,255,255,.13); list-style:none; cursor:default; }
.history-details[hidden] { display:none; }
.history-detail-item { min-width:0; display:grid; grid-template-columns:32px minmax(0,max-content) max-content; justify-content:start; align-items:center; gap:6px; padding:5px 7px; border-radius:8px; background:rgba(8,10,31,.3); }
.history-detail-item.top-prize { border:1px solid rgba(255,212,82,.52); background:rgba(115,76,15,.3); }
.history-detail-item img { width:32px; height:32px; object-fit:contain; border-radius:7px; background:rgba(255,255,255,.88); }
.history-detail-item span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-size:11px; font-weight:800; }
.history-detail-item span b { margin-left:2px; color:#75ddff; font-weight:850; }
.history-detail-item strong { color:#fff; font-size:12px; }
.history-detail-item em { grid-column:2 / -1; margin-top:-4px; color:#ffd452; font-size:9px; font-style:normal; font-weight:900; }
.result-crown { font-size:45px; color:#f3b51e; filter:drop-shadow(0 5px 6px rgba(195,125,0,.2)); }
.result-podium { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:end; }
.podium-player { padding:13px 5px; border-radius:14px 14px 6px 6px; border:1px solid #edf0f3; background:#fff; }
.podium-player.first { padding-top:24px; order:2; background:linear-gradient(#fff8d6,#fff); border-color:#f5cc62; }
.podium-player.second { order:1; }.podium-player.third { order:3; }
.podium-player img { width:56px; height:56px; object-fit:cover; border-radius:50%; border:3px solid #dfe4ea; }
.podium-player.first img { border-color:#f5c638; }
.podium-player strong { display:block; margin-top:5px; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.podium-player b { color:#14b9e8; font-size:11px; }
.podium-number { font-size:24px; font-weight:950; color:#adb5c0; }.first .podium-number { color:#efb71f; }
.confirm-modal { width:min(380px,calc(100vw - 32px)); padding:30px; text-align:center; }
.confirm-icon { width:60px; height:60px; margin:auto; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#ff4a89,#ff9169); font-size:27px; }
.confirm-modal h2 { margin:13px 0 7px; }.confirm-modal p { margin:0; color:#89929f; font-size:12px; }
.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.confirm-actions button { height:40px; border-radius:11px; border:1px solid #e0e4e9; background:#fff; font-weight:850; font-size:12px; }
.confirm-actions button:last-child { color:#fff; border-color:var(--pink); background:var(--pink); }
.toast-layer { position:fixed; z-index:200; left:50%; bottom:28px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { min-width:240px; max-width:420px; padding:11px 16px; border-radius:11px; color:#fff; background:#27364b; box-shadow:0 10px 30px rgba(0,0,0,.22); text-align:center; font-size:12px; font-weight:800; animation:toast 3s ease forwards; }
.toast.error { background:#d94567; }
@keyframes toast { 0%{opacity:0;transform:translateY(10px)} 12%,80%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-8px)} }

@media (max-width: 1300px) {
  .room-view { grid-template-columns:310px 460px 290px; gap:8px; padding:20px 8px; }
  .main-nav { display:none; }.search-box { width:190px; }
}
@media (max-width: 1040px) {
  .home-view { grid-template-columns:1fr; padding-top:42px; }
  .hero-copy { display:none; }.setup-card { max-width:680px; width:100%; margin:auto; max-height:none; }
  .room-view { grid-template-columns:460px 300px; }
  .room-sidebar { display:none; }
}
@media (max-width: 790px) {
  .site-header { padding:0 16px; height:62px; gap:15px; }.brand { width:82px; height:46px; }.brand img { width:82px; }.search-box { display:none; }.header-actions .text-action { display:none; }
  .home-view { min-height:calc(100vh - 62px); padding:20px 12px; }
  .setup-card { padding:20px; border-radius:19px; }.field-grid { grid-template-columns:1fr; }.theme-option { height:58px; }
  .room-view { height:auto; min-height:calc(100vh - 62px); display:block; padding:0; overflow:visible; }
  .battle-stage { height:calc(100vh - 62px); min-height:0; border-radius:0; max-height:none; }
  .social-panel { position:fixed; z-index:35; left:10px; right:10px; bottom:12px; min-height:0; height:56vh; transform:translateY(calc(100% + 30px)); transition:.25s; box-shadow:0 15px 50px rgba(0,0,0,.35); }
  .social-panel.mobile-open { transform:translateY(0); }
  .leave-fab { left:104px; top:22px; width:auto; height:31px; }
  .seat-grid { gap:15px 2px; padding:24px 6px; }.seat-avatar { width:58px; height:58px; }.seat-name { max-width:78px; font-size:9px; }
  .stage-controls { height:194px; }.stage-action-row { transform:scale(.9); transform-origin:top center; }.balance-panel { left:12px; bottom:16px; }
  .fly-banner { width:390px; }
}
@media (max-width: 430px) {
  .header-actions > img { display:none; }.setup-heading { display:block; }.simulation-badge { display:inline-block; margin-top:10px; }
  .avatar-option { width:50px; height:50px; }.theme-picker { grid-template-columns:1fr; }.theme-option { height:50px; }.wealth-tier-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .seat-grid { grid-template-columns:repeat(4,1fr); height:50%; }.seat-avatar { width:51px; height:51px; }
  .balance-panel { transform:scale(.78); transform-origin:left bottom; }.stage-controls { padding-left:70px; }
  .stage-action-row { transform:scale(.78); transform-origin:top center; }.stage-tool-row { right:12px; gap:8px; bottom:13px; }
  .fly-banner { width:350px; height:58px; border-radius:29px; }.fly-avatar { width:53px;height:53px;flex-basis:53px}.fly-copy{width:222px}.fly-gift{width:62px;height:62px}
  .reward-grid { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 790px) {
  body.room-active { height:100dvh; overflow:hidden; background:#090817; }
  body.room-active .site-header { display:none; }
  body.room-active main { height:100dvh; }
  body.room-active .room-view { min-height:100dvh; height:100dvh; }
  body.room-active .battle-stage { height:100dvh; min-height:100dvh; }

  .mobile-room-head { position:absolute; z-index:16; left:12px; right:12px; top:max(10px,env(safe-area-inset-top)); height:78px; padding:9px 72px 9px 72px; display:flex; align-items:center; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:linear-gradient(90deg,rgba(7,8,22,.82),rgba(16,12,39,.58)); box-shadow:0 8px 24px rgba(0,0,0,.24); backdrop-filter:blur(7px); }
  .mobile-room-thumb { position:absolute; left:9px; top:9px; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; border:2px solid rgba(255,102,172,.9); color:#fff; background:url("./assets/real-gacha/room-nightclub.png") center/cover no-repeat; font-size:8px; font-weight:950; text-shadow:0 1px 4px #000; }
  .mobile-room-thumb.ocean { background:linear-gradient(135deg,#074468,#1eaaa4); }
  .mobile-room-thumb.candy { background:linear-gradient(135deg,#7e3da7,#f669a5 65%,#ffb16c); }
  .mobile-room-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
  .mobile-room-copy small { color:#d5d8e2; font-size:10px; }
  .mobile-room-copy strong { overflow:hidden; color:#fff; font-size:15px; white-space:nowrap; text-overflow:ellipsis; text-shadow:0 2px 5px #000; }
  .mobile-room-copy span { display:flex; align-items:center; gap:5px; color:#7ce6cf; font-size:10px; }
  .mobile-room-copy span i { width:6px; height:6px; border-radius:50%; background:#50d9be; box-shadow:0 0 0 3px rgba(80,217,190,.16); }
  .mobile-room-copy span b { font-weight:850; }
  #mobileCopyRoomButton { position:absolute; right:10px; top:12px; height:28px; padding:0 10px; border:1px solid rgba(255,255,255,.4); border-radius:15px; color:#fff; background:rgba(255,255,255,.12); font-size:10px; font-weight:850; }

  .stage-topbar { position:absolute; z-index:18; left:0; right:0; top:max(88px,calc(env(safe-area-inset-top) + 88px)); height:40px; padding:0; pointer-events:none; }
  .stage-topbar .phase-pill { display:none; }
  .countdown-wrap { pointer-events:auto; }
  .countdown-wrap small { font-size:8px; }
  .countdown-wrap strong { font-size:17px; }
  .leave-fab { left:auto; right:14px; top:-1px; height:30px; pointer-events:auto; }
  .host-start-button { right:72px; top:-1px; height:30px; pointer-events:auto; }
  .host-battle-controls { left:12px; top:38px; pointer-events:auto; }

  .mobile-rank-strip { position:absolute; z-index:17; left:12px; right:12px; top:max(130px,calc(env(safe-area-inset-top) + 130px)); height:58px; padding:4px 8px; display:flex; align-items:center; gap:7px; overflow-x:auto; overflow-y:hidden; border-radius:29px; background:rgba(5,7,20,.4); scrollbar-width:none; backdrop-filter:blur(3px); }
  .mobile-rank-strip::-webkit-scrollbar { display:none; }
  .mobile-rank-avatar { position:relative; width:44px; height:44px; flex:0 0 44px; }
  .mobile-rank-avatar img { width:44px; height:44px; object-fit:cover; border-radius:50%; border:2px solid #d8a84a; box-shadow:0 3px 10px rgba(0,0,0,.38); }
  .mobile-rank-avatar > span { position:absolute; z-index:2; left:-2px; top:-5px; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; color:#3c2a00; background:#ffe26e; font-size:8px; font-weight:950; }
  .mobile-rank-avatar b { position:absolute; left:50%; bottom:-5px; min-width:42px; padding:1px 4px; transform:translateX(-50%); overflow:hidden; border-radius:7px; color:#fff; background:rgba(17,15,34,.82); font-size:7px; line-height:12px; text-align:center; white-space:nowrap; text-overflow:ellipsis; }
  .mobile-rank-avatar.rank-1 img { border-color:#ffe152; box-shadow:0 0 0 2px rgba(255,225,82,.2),0 4px 13px rgba(0,0,0,.4); }

  .seat-grid { position:absolute; left:0; right:0; top:max(194px,calc(env(safe-area-inset-top) + 194px)); bottom:205px; height:auto; padding:12px 7px 8px; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:13px 2px; }
  .seat { justify-content:center; }
  .seat-avatar { width:64px; height:64px; }
  .seat-avatar-frame { width:88px; height:88px; }
  .seat-name { max-width:86px; margin-top:9px; font-size:10px; }
  .seat-score { margin-top:4px; font-size:9px; }
  .stage-controls { z-index:50; height:142px; padding:0; background:linear-gradient(180deg,transparent,rgba(5,5,18,.76) 28%,rgba(5,5,18,.98)); }
  .balance-panel { left:13px; bottom:71px; transform:none; }
  .balance-panel small { font-size:9px; }.balance-panel strong { font-size:12px; }
  .stage-action-row { position:absolute; z-index:4; right:4px; bottom:60px; width:82px; height:88px; display:block; transform:scale(.78); transform-origin:right bottom; }
  .stage-action-row .battle-fab { display:none !important; }
  .stage-action-row .lucky-gacha-fab { position:absolute !important; right:0; bottom:0; }
  .stage-tool-row { z-index:6; left:13px; right:13px; bottom:max(10px,env(safe-area-inset-bottom)); height:52px; justify-content:space-between; gap:10px; }
  .stage-tool-button { width:47px; height:47px; flex:0 0 47px; background:rgba(9,11,27,.78); box-shadow:0 5px 16px rgba(0,0,0,.28); }
  .stage-tool-button img { width:28px; height:28px; }
  .stage-tool-button[data-room-tool="座位功能"],.stage-tool-button[data-room-tool="語音功能"] { display:none; }
  .inventory-tool { width:53px; height:53px; flex-basis:53px; background:#fff; }

  .social-panel { position:fixed; z-index:32; left:11px; right:72px; top:auto; bottom:145px; width:auto; height:min(34vh,300px); min-height:0; overflow:hidden; border:0; border-radius:0; background:transparent; box-shadow:none; transform:none; transition:.22s ease; pointer-events:none; }
  .social-panel .social-tabs,.social-panel .chat-form,.social-panel .chat-notice,.social-panel .sticker-panel,.social-panel .new-message-button { display:none; }
  .social-panel #chatPanel { display:flex !important; height:100%; }
  .social-panel #rankPanel { display:none !important; }
  .social-panel .feed { display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:0; overflow:hidden; background:transparent; }
  .social-panel:not(.mobile-open) .feed > :not(:nth-last-child(-n+2)) { display:none; }
  .social-panel .feed > * { flex-shrink:0; margin-bottom:0; box-shadow:0 7px 18px rgba(0,0,0,.2); }
  .social-panel.mobile-open { z-index:82; left:8px; right:8px; top:16vh; bottom:72px; height:auto; padding-top:42px; border:1px solid rgba(255,255,255,.45); border-radius:16px; background:#42536e; box-shadow:0 16px 50px rgba(0,0,0,.48); pointer-events:auto; }
  .social-panel.mobile-open::before { content:"聊天室"; position:absolute; left:15px; top:12px; color:#fff; font-size:14px; font-weight:900; }
  .social-panel.mobile-open::after { content:"再次點擊訊息按鈕關閉"; position:absolute; right:14px; top:14px; color:#d8dfeb; font-size:9px; }
  .social-panel.mobile-open .feed { justify-content:flex-start; padding:10px; overflow-y:auto; background:linear-gradient(180deg,#656f85,#3a4c68); }
  .social-panel.mobile-open .feed > * { display:flex; }
  .social-panel.mobile-open .feed > .feed-gacha-card { display:grid; }
  .social-panel.mobile-open .feed > .feed-gacha-card.batch,.social-panel.mobile-open .feed > .feed-gift-card.batch { display:block; }
  .social-panel.mobile-open .chat-form { display:flex; }
  .social-panel.mobile-open .chat-notice { display:block; }
  .social-panel.mobile-open .sticker-panel:not(.is-hidden),.social-panel.mobile-open .new-message-button:not([hidden]) { display:block; }

  .fly-banner-layer { z-index:72; top:max(196px,calc(env(safe-area-inset-top) + 196px)); height:190px; overflow:hidden; }
  .fly-banner { width:calc(100vw - 16px); max-width:440px; height:60px; border-radius:14px; animation-duration:12s; }
  .fly-banner.lane-0 { top:0; }.fly-banner.lane-1 { top:64px; }.fly-banner.lane-2 { top:128px; }
  .fly-banner.gacha { border-color:#fff4a2; background:linear-gradient(100deg,rgba(255,199,72,.97),rgba(255,223,116,.96)); }
  .fly-banner.jackpot { height:54px; border-radius:14px; }
  .fly-avatar { width:50px; height:50px; flex-basis:50px; margin-left:7px; border-color:#fff; }
  .fly-copy { width:calc(100% - 132px); padding-left:4px; }
  .fly-main { margin-bottom:5px; font-size:12px; }.fly-main strong { font-size:14px; }
  .fly-gift { right:13px; top:3px; width:55px; height:55px; }
  @keyframes flyAcross { from { transform:translateX(105vw); } 12%,78% { transform:translateX(8px); } to { transform:translateX(-105vw); } }

  .stage-panel.gacha-modal { bottom:max(4px,env(safe-area-inset-bottom)); width:min(428px,calc(100vw - 12px)); }
  .stage-panel.inventory-modal { left:6px; right:6px; bottom:max(6px,env(safe-area-inset-bottom)); height:min(60vh,480px); }
}