/* ============================================================
   KissTower — 樣式表
   佈局仿尖塔式戰鬥：上方資訊列、中央戰場、下方手牌弧
   ============================================================ */
@font-face {
  font-family: 'Cubic 11';
  src: url('../assets/ui/card_batomon_v8/fonts/Cubic_11.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ui-panel-loot: url('../assets/ui/tower_ui_pack_01/panels/loot_panel_720x420.png');
  --ui-panel-deck: url('../assets/ui/tower_ui_pack_01/panels/deck_view_panel_1100x620.png');
  --ui-panel-title: url('../assets/ui/tower_ui_pack_01/panels/title_panel_960x430.png');
  --ui-panel-defeat: url('../assets/ui/tower_ui_pack_01/panels/defeat_panel_720x420.png');
  --ui-panel-victory: url('../assets/ui/tower_ui_pack_01/panels/victory_panel_720x420.png');
  --ui-card-attack: url('../assets/ui/tower_ui_pack_01/cards/attack_card_152x212.png');
  --ui-card-skill: url('../assets/ui/tower_ui_pack_01/cards/skill_card_152x212.png');
  --ui-card-ability: url('../assets/ui/tower_ui_pack_01/cards/ability_card_152x212.png');
  --ui-cost-attack: url('../assets/ui/tower_ui_pack_01/cards/attack_cost_badge_34x34.png');
  --ui-cost-skill: url('../assets/ui/tower_ui_pack_01/cards/skill_cost_badge_34x34.png');
  --ui-cost-ability: url('../assets/ui/tower_ui_pack_01/cards/ability_cost_badge_34x34.png');
  --ui-name-attack: url('../assets/ui/tower_ui_pack_01/cards/attack_name_bar_116x24.png');
  --ui-name-skill: url('../assets/ui/tower_ui_pack_01/cards/skill_name_bar_116x24.png');
  --ui-name-ability: url('../assets/ui/tower_ui_pack_01/cards/ability_name_bar_116x24.png');
  --ui-art-attack: url('../assets/ui/tower_ui_pack_01/cards/attack_art_frame_132x76.png');
  --ui-art-skill: url('../assets/ui/tower_ui_pack_01/cards/skill_art_frame_132x76.png');
  --ui-art-ability: url('../assets/ui/tower_ui_pack_01/cards/ability_art_frame_132x76.png');
  --ui-type-attack: url('../assets/ui/tower_ui_pack_01/cards/attack_type_bar_104x18.png');
  --ui-type-skill: url('../assets/ui/tower_ui_pack_01/cards/skill_type_bar_104x18.png');
  --ui-type-ability: url('../assets/ui/tower_ui_pack_01/cards/ability_type_bar_104x18.png');
  --ui-text-attack: url('../assets/ui/tower_ui_pack_01/cards/attack_text_area_132x80.png');
  --ui-text-skill: url('../assets/ui/tower_ui_pack_01/cards/skill_text_area_132x80.png');
  --ui-text-ability: url('../assets/ui/tower_ui_pack_01/cards/ability_text_area_132x80.png');
  --ui-char-normal: url('../assets/ui/tower_ui_pack_01/character/character_select_normal_300x456.png');
  --ui-char-selected: url('../assets/ui/tower_ui_pack_01/character/character_select_selected_300x456.png');
  --ui-char-disabled: url('../assets/ui/tower_ui_pack_01/character/character_select_disabled_300x456.png');
  --ui-hp-player: url('../assets/ui/tower_ui_pack_01/hud/player_hp_bar_120x22.png');
  --ui-hp-enemy: url('../assets/ui/tower_ui_pack_01/hud/enemy_hp_bar_120x22.png');
  --ui-hp-empty: url('../assets/ui/tower_ui_pack_01/hud/empty_hp_bar_120x22.png');
  --ui-block: url('../assets/ui/tower_ui_pack_01/hud/block_shield_badge_40x40.png');
  --ui-status-buff: url('../assets/ui/tower_ui_pack_01/hud/buff_icon_frame_32x32.png');
  --ui-status-debuff: url('../assets/ui/tower_ui_pack_01/hud/debuff_icon_frame_32x32.png');
  --ui-status-neutral: url('../assets/ui/tower_ui_pack_01/hud/neutral_status_frame_32x32.png');
  --ui-intent-attack: url('../assets/ui/tower_ui_pack_01/hud/intent_attack_frame_40x40.png');
  --ui-intent-defend: url('../assets/ui/tower_ui_pack_01/hud/intent_defend_frame_40x40.png');
  --ui-intent-skill: url('../assets/ui/tower_ui_pack_01/hud/intent_skill_frame_40x40.png');
  --ui-orb-full: url('../assets/ui/tower_ui_pack_01/orbs/full_orb_96x96.png');
  --ui-orb-empty: url('../assets/ui/tower_ui_pack_01/orbs/empty_orb_96x96.png');
  --ui-orb-gain: url('../assets/ui/tower_ui_pack_01/orbs/gain_flash_orb_96x96.png');
  --ui-orb-error: url('../assets/ui/tower_ui_pack_01/orbs/error_flash_orb_96x96.png');
  --ui-counter-draw: url('../assets/ui/tower_ui_pack_01/counters/draw_pile_counter_36x36.png');
  --ui-counter-discard: url('../assets/ui/tower_ui_pack_01/counters/discard_pile_counter_36x36.png');
  --ui-counter-turn: url('../assets/ui/tower_ui_pack_01/counters/turn_counter_chip_80x36.png');
  /* ---- Batomon v8 textless card composition ---- */
  --card-v8-orange: url('../assets/ui/card_batomon_v8/blank_card_textless_orange_v8_ai.png?v=20260706-card-alpha');
  --card-v8-gray: url('../assets/ui/card_batomon_v8/blank_card_textless_gray_v8_ai.png?v=20260706-card-alpha');
  --card-v8-green: url('../assets/ui/card_batomon_v8/blank_card_textless_green_v8_ai.png?v=20260706-card-alpha');
  --card-v8-blue: url('../assets/ui/card_batomon_v8/blank_card_textless_blue_v8_ai.png?v=20260706-card-alpha');
  --card-v8-purple: url('../assets/ui/card_batomon_v8/blank_card_textless_purple_v8_ai.png?v=20260706-card-alpha');
  --card-v8-template: var(--card-v8-orange);
  /* ---- batomon 風格 AI 替換包(ui_assets_batomon_style_ai_png) ---- */
  --ui2-draw: url('../assets/ui/batomon_style/combat/draw_pile.png');
  --ui2-discard: url('../assets/ui/batomon_style/combat/discard_pile.png');
  --ui2-loot: url('../assets/ui/batomon_style/combat/loot_icon.png');
  --ui2-pile-count: url('../assets/ui/batomon_style/combat/pile_button_count.png');
  --ui-custom-cursor: url('../assets/ui/generated_cursor/kisstower_cursor.png');
  --title-bg: url('../assets/title/kisstower_login_bg.png');
  --title-logo: url('../assets/title/qinqinzhita_logo.png');
  --title-heart: url('../assets/title/kiss_particle_heart.png');
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; scrollbar-width: thin; scrollbar-color: #f0b85f rgba(11, 14, 24, 0.86); }
*::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
*::-webkit-scrollbar-track {
  background: rgba(11, 14, 24, 0.86);
  border: 2px solid rgba(236, 206, 137, 0.32);
}
*::-webkit-scrollbar-thumb {
  border: 3px solid rgba(11, 14, 24, 0.86);
  border-radius: 999px;
  background: linear-gradient(180deg, #f0c778, #c65e6c 48%, #7d384f);
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe28f, #df6f7d 48%, #9a455f);
}
*::-webkit-scrollbar-corner {
  background: rgba(11, 14, 24, 0.86);
}
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0e; }
body {
  font-family: 'Cubic 11', '俐方體11號', 'Microsoft JhengHei', sans-serif;
  color: #e8e0d0;
}
html.custom-cursor-enabled,
html.custom-cursor-enabled * {
  cursor: none !important;
}
/* 固定設計舞台:1920x1080,由 JS(Stage.fit)等比縮放置中,黑邊補足 */
#viewport {
  position: fixed; left: 0; top: 0;
  width: 1920px; height: 1080px;
  overflow: hidden;
  transform-origin: 0 0;
}
#shake-root { position: absolute; inset: 0; will-change: transform; }

/* ---- 登入標題演出 ---------------------------------------- */
.title-intro {
  position: absolute;
  inset: 0;
  z-index: 1600;
  overflow: hidden;
  background: #0e0e0e;
  pointer-events: auto;
}
.title-intro.done {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.title-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 176, 210, 0.10) 0%, transparent 52%),
    var(--title-bg) center / cover no-repeat;
  transform: scale(1.012);
}
.title-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 238, 170, 0.14) 0%, transparent 44%),
    linear-gradient(180deg, rgba(7, 6, 12, 0.06) 0%, rgba(7, 5, 13, 0.08) 64%, rgba(7, 5, 13, 0.22) 100%);
  pointer-events: none;
}
.title-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.title-particles span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%) scale(var(--s));
  opacity: 0;
  image-rendering: pixelated;
  animation: titleParticleBlink 3.6s ease-in-out infinite;
  animation-delay: var(--d);
  will-change: transform, opacity;
}
.title-particles-black {
  z-index: 2;
  mix-blend-mode: multiply;
}
.title-particles-black span {
  width: 42px;
  height: 42px;
  background:
    radial-gradient(circle at 50% 50%, rgba(26, 22, 34, 0.88) 0 18%, transparent 20%),
    linear-gradient(0deg, transparent 39%, rgba(26, 22, 34, 0.88) 40% 60%, transparent 61%),
    linear-gradient(90deg, transparent 39%, rgba(26, 22, 34, 0.88) 40% 60%, transparent 61%);
  filter: drop-shadow(0 0 7px rgba(8, 5, 14, 0.45));
  animation-name: titleDarkParticleBlink;
}
.title-particles-rainbow {
  z-index: 4;
}
.title-particles-rainbow span {
  width: 168px;
  height: 168px;
  animation: titleKissParticleSparkle 12s ease-in-out infinite;
  animation-delay: var(--d);
  filter: drop-shadow(0 0 18px rgba(255, 86, 166, 0.56)) drop-shadow(0 0 26px rgba(255, 222, 122, 0.34));
}
.title-particles-rainbow span.heart {
  background: var(--title-heart) center / contain no-repeat;
}
.title-prismagon {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 520px;
  height: 700px;
  opacity: 0.18;
  transform: translate(-50%, -50%);
  animation: titlePrismagonFloat 3s ease-in-out infinite;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 128, 180, 0.18) 0 16%, transparent 18%),
    linear-gradient(180deg, rgba(18, 10, 28, 0.82) 0%, rgba(18, 10, 28, 0.56) 100%);
  clip-path: polygon(48% 0%, 58% 12%, 62% 23%, 72% 21%, 67% 36%, 80% 50%, 66% 52%, 62% 100%, 38% 100%, 34% 52%, 20% 50%, 33% 36%, 28% 21%, 38% 23%, 42% 12%);
  filter: blur(0.2px) drop-shadow(0 0 35px rgba(255, 80, 160, 0.24));
  pointer-events: none;
}
.title-logo-container {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.title-logo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(14, 14, 14, 1);
  animation: titleLogoBgReveal 2.5s linear forwards;
}
.title-logo {
  position: absolute;
  left: 50%;
  top: 40px;
  z-index: 1;
  width: 900px;
  height: auto;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 20px 28px rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 22px rgba(255, 91, 160, 0.32));
  transform: translate(-50%, 0) translateY(100px);
  animation: titleLogoRise 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform;
}
.title-screen-cover {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(14, 14, 14, 1);
  animation: titleScreenCover 2.5s linear forwards;
  pointer-events: none;
}
.title-screen-cover.hidden {
  display: none;
}
.title-screen-cover.exit-fade {
  display: block;
  background: rgba(255, 255, 255, 0);
  animation: titleExitScreenCover 2s linear 0.1s forwards;
}
.title-press-any-key {
  position: absolute;
  left: 50%;
  bottom: 94px;
  z-index: 15;
  transform: translateX(-50%);
  opacity: 0;
  padding: 14px 32px 12px;
  border-radius: 10px;
  color: #fff1be;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 5px;
  text-shadow: 0 4px 0 #2a1026, 0 0 18px rgba(255, 108, 177, 0.66), 0 0 32px rgba(255, 222, 122, 0.35);
  background: rgba(21, 12, 30, 0.52);
  border: 2px solid rgba(255, 214, 122, 0.32);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.title-intro.ready .title-press-any-key {
  animation: titlePromptBlink 1s linear infinite;
}
.title-intro.exiting .title-press-any-key {
  animation: titlePromptExitHide 0.1s linear forwards;
}
@keyframes titleScreenCover {
  0%, 20% { background: rgba(14, 14, 14, 1); }
  40% { background: rgba(13, 13, 13, 0); }
  84% { background: rgba(255, 255, 255, 0); }
  92% { background: rgba(255, 255, 255, 0.392157); }
  100% { background: rgba(255, 255, 255, 0); }
}
@keyframes titleLogoRise {
  0%, 56% { transform: translate(-50%, 0) translateY(100px); }
  80%, 100% { transform: translate(-50%, 0) translateY(0); }
}
@keyframes titleLogoBgReveal {
  0%, 92% { background: rgba(14, 14, 14, 1); }
  100% { background: rgba(13, 13, 13, 0); }
}
@keyframes titlePromptBlink {
  0% { opacity: 1; }
  70% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes titlePromptExitHide {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
}
@keyframes titleExitScreenCover {
  0% { background: rgba(255, 255, 255, 0); }
  10% { background: rgba(255, 255, 255, 0.392157); }
  20% { background: rgba(255, 255, 255, 0); }
  50% { background: rgba(14, 14, 14, 0); }
  100% { background: rgba(14, 14, 14, 1); }
}
@keyframes titlePrismagonFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-2px); }
}
@keyframes titleParticleBlink {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--s) * 0.72)) rotate(-6deg);
  }
  34%, 72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--s)) rotate(5deg);
  }
}
@keyframes titleKissParticleSparkle {
  0%, 8% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--s) * 0.66)) rotate(-7deg);
  }
  16%, 34% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--s)) rotate(4deg);
  }
  46%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--s) * 0.74)) rotate(8deg);
  }
}
@keyframes titleDarkParticleBlink {
  0%, 100% {
    opacity: 0.05;
    transform: translate(-50%, -50%) scale(calc(var(--s) * 0.7)) rotate(0deg);
  }
  46%, 74% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(var(--s)) rotate(10deg);
  }
}
#custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 58px;
  height: 58px;
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0;
  background-image: var(--ui-custom-cursor);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
  image-rendering: pixelated;
  transform: translate(-8px, -8px) rotate(14deg);
  transform-origin: 50% 50%;
  transition: opacity 0.12s ease, transform 0.06s ease-out;
}
html.cursor-visible #custom-cursor {
  opacity: 1;
}
html.cursor-pressed #custom-cursor {
  transform: translate(-8px, -8px) rotate(-5deg);
}
html.cursor-targeting,
html.cursor-targeting * {
  cursor: none !important;
}
html.lobby-card-dragging,
html.lobby-card-dragging *,
body.lobby-card-dragging,
body.lobby-card-dragging * {
  cursor: none !important;
}
html.cursor-targeting #custom-cursor {
  opacity: 0;
}
@media (pointer: coarse) {
  #custom-cursor { display: none; }
}

/* ---- 背景場景 -------------------------------------------- */
#scene { position: absolute; inset: 0; overflow: hidden; }
.bg-layer { position: absolute; inset: -5%; width: 110%; height: 110%; pointer-events: none; }
/* 場地:0.png~5.png 隨時間循環(JS 交叉淡化),不再使用單張 meadow */
#bg-far {
  background: radial-gradient(ellipse 80% 55% at 50% 26%, rgba(255,214,128,0.12) 0%, transparent 68%);
}
#bg-far .field-img {
  position: absolute; inset: 0;
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 3s ease-in-out;
}
#bg-far .field-img.show { opacity: 1; }
#bg-far::before, #bg-far::after {
  display: none;
  content: ''; position: absolute; bottom: 24%; width: 30%; height: 55%;
  background: linear-gradient(180deg, transparent 0%, #131320 40%, #0e0e18 100%);
  clip-path: polygon(20% 100%, 30% 20%, 38% 35%, 50% 0%, 62% 30%, 72% 15%, 82% 100%);
  opacity: 0.8;
}
#bg-far::before { left: -4%; }
#bg-far::after { right: -6%; transform: scaleX(-1); }
#bg-fog1, #bg-fog2 {
  background: radial-gradient(ellipse 45% 30% at 30% 75%, rgba(90,80,120,0.13) 0%, transparent 70%),
              radial-gradient(ellipse 50% 25% at 75% 70%, rgba(70,90,110,0.12) 0%, transparent 70%);
  animation: fogDrift 26s ease-in-out infinite alternate;
}
#bg-fog2 { animation-duration: 19s; animation-direction: alternate-reverse; opacity: 0.7; }
@keyframes fogDrift { from { transform: translateX(-2.5%);} to { transform: translateX(2.5%);} }
#floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  display: none;
  background: linear-gradient(180deg, rgba(36,31,40,0.12) 0%, rgba(18,16,22,0.56) 100%);
}
#floor::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(120,100,90,0.14) 0%, transparent 70%);
}
#slots {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
}
.slot-patch {
  display: none;
  position: absolute; transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(178,205,116,0.62) 0%, rgba(94,125,68,0.46) 46%, rgba(44,61,42,0.18) 72%, transparent 74%),
    radial-gradient(ellipse at 50% 56%, rgba(0,0,0,0.34) 0%, transparent 72%);
  border: 1px solid rgba(219,238,155,0.18);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,210,0.12);
  opacity: 0.78;
}
.slot-patch.enemy {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(193,157,116,0.54) 0%, rgba(114,92,67,0.42) 48%, rgba(48,41,38,0.18) 72%, transparent 74%),
    radial-gradient(ellipse at 50% 56%, rgba(0,0,0,0.34) 0%, transparent 72%);
  border-color: rgba(239,195,142,0.18);
}
#viewport.setup-mode #slots { pointer-events: auto; }
#viewport.setup-mode .slot-patch.player {
  display: block; pointer-events: auto; opacity: 0.82;
  filter: drop-shadow(0 0 10px rgba(255,236,150,0.12));
}
#viewport.setup-mode .slot-patch.player::before {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,247,170,0.24) 0%, rgba(255,219,98,0.18) 42%, transparent 72%),
    radial-gradient(ellipse at 50% 52%, transparent 48%, rgba(255,238,146,0.22) 66%, transparent 78%);
  border: 2px solid rgba(255,238,154,0.16);
  opacity: 0.42;
  transform: scale(0.94);
  pointer-events: none;
  animation: slotBreathe 1.55s ease-in-out infinite;
}
@keyframes slotBreathe {
  0%, 100% {
    opacity: 0.34;
    transform: scale(0.92);
    filter: drop-shadow(0 0 4px rgba(255,230,130,0.16));
  }
  50% {
    opacity: 0.9;
    transform: scale(1.08);
    filter: drop-shadow(0 0 18px rgba(255,230,130,0.78));
  }
}
#viewport.setup-mode .slot-patch.enemy { display: none; }
#viewport.setup-mode .slot-patch.drop-hover {
  opacity: 1;
  filter: brightness(1.35) drop-shadow(0 0 18px rgba(255,222,120,0.65));
}
#viewport.setup-mode .slot-patch.occupied {
  filter: brightness(1.12) drop-shadow(0 0 14px rgba(255,140,190,0.55));
}

/* ---- 頂部列 ------------------------------------------------ */
#top-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 58px; z-index: 40;
  display: none; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(8,8,12,0.96) 0%, rgba(10,10,16,0.85) 80%, transparent 100%);
}
#tb-left { display: flex; align-items: center; gap: 12px; }
#tb-portrait {
  width: 40px; height: 40px; border-radius: 6px;
  background: radial-gradient(circle at 45% 35%, #b0503a 0%, #6e2a1e 60%, #401810 100%);
  border: 2px solid #7a6248; box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
#tb-name { font-family: 'Cubic 11', '俐方體11號', serif; font-weight: 900; font-size: 15px; color: #f0e6d0; }
#tb-title { font-size: 11px; color: #9a8f78; font-weight: 500; margin-left: 4px; }
#tb-hp { font-size: 14px; font-weight: 700; color: #ff7a6a; }
#tb-hp .tb-icon { margin-right: 4px; }
#tb-gold { font-size: 14px; font-weight: 700; color: #ffd554; }
.tb-icon.gold { margin-right: 4px; }
#tb-potions { display: flex; gap: 6px; margin-left: 6px; }
.potion-slot {
  width: 30px; height: 34px; border-radius: 6px; cursor: pointer;
  border: 1.5px solid #4a4438; background: rgba(20,20,28,0.7);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  font-size: 17px;
}
.potion-slot.filled:hover { transform: scale(1.18); border-color: #c9a860; box-shadow: 0 0 12px rgba(255,180,80,0.4); }
.potion-slot.empty { opacity: 0.35; cursor: default; }
#tb-relics { display: flex; gap: 8px; flex: 1; }
.relic {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: radial-gradient(circle at 40% 35%, #3a3648 0%, #201e2a 70%);
  border: 1.5px solid #5a5266;
  transition: transform 0.12s, box-shadow 0.12s;
}
.relic:hover { transform: scale(1.18); box-shadow: 0 0 12px rgba(200,180,255,0.4); }
.relic.flash { animation: relicFlash 0.5s; }
@keyframes relicFlash { 30% { transform: scale(1.4); filter: brightness(2); box-shadow: 0 0 24px rgba(255,220,120,0.9);} }
#tb-right { display: flex; gap: 8px; }
.tb-btn {
  min-width: 38px; height: 38px; padding: 0 8px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  background: rgba(26,24,34,0.85); border: 1.5px solid #453e50;
  font-size: 15px; color: #cfc4a8; transition: all 0.12s;
}
.tb-btn:hover { border-color: #8a7a5a; background: rgba(46,40,52,0.9); transform: translateY(-1px); }
.tb-btn span { font-size: 12px; font-weight: 700; }
.tb-btn.active { border-color: #ffd554; color: #ffd554; box-shadow: 0 0 10px rgba(255,213,84,0.3); }

/* ---- 生物 -------------------------------------------------- */
#creatures { position: absolute; inset: 0; }
.creature { position: absolute; transform: translateX(-50%); z-index: 5; }
.creature.status-focus { z-index: 90 !important; }
.creature .sprite-wrap {
  position: relative; cursor: default;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.creature.status-focus .sprite-wrap { z-index: 18; }
.creature.status-focus .creature-name { z-index: 24; }
.creature.status-focus .hp-row { z-index: 22; }
.creature.status-focus .powers { z-index: 23; }
.creature .sprite-img {
  display: block; height: 100%;
  image-rendering: pixelated;      /* 像素角色保持銳利 */
  transform-origin: 50% 100%;
  will-change: filter;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45));
}
.creature.enemy .sprite-img { transform: scaleX(-1); } /* 敵方面向玩家 */
.creature.boss-creature { z-index: 16; }
.creature.boss-creature .sprite-wrap {
  filter: drop-shadow(0 7px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(255, 197, 72, 0.28));
}
.creature.boss-creature .creature-name {
  color: #ffe9a2;
  border-color: #b98a37;
  box-shadow: 0 0 8px rgba(255, 194, 67, 0.3);
}
.creature.boss-creature .hp-bar { width: 190px; }
.boss-move-callout {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 22px);
  transform: translateX(-50%);
  z-index: 120;
  min-width: 150px;
  padding: 7px 16px 8px;
  border: 2px solid #ffe39a;
  background: rgba(19, 13, 28, 0.94);
  color: #fff0b7;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 0 #5e251f;
  box-shadow: 0 0 15px rgba(255, 101, 73, 0.65);
  animation: bossMoveCallout 1.05s ease-out both;
}
.boss-target-impact {
  position: absolute;
  inset: -10px -14px;
  z-index: 30;
  border: 4px solid rgba(255, 225, 117, 0.96);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(225, 34, 58, 0.72), 0 0 24px 8px rgba(255, 63, 61, 0.72);
  pointer-events: none;
  animation: bossTargetImpact 0.52s ease-out both;
}
@keyframes bossTargetImpact {
  0% { opacity: 0; transform: scale(0.45); }
  20% { opacity: 1; transform: scale(1.12); }
  55% { opacity: 0.92; transform: scale(0.94); }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes bossMoveCallout {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(0.72); }
  16% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  28%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -10px) scale(0.96); }
}
.boss-cutin {
  position: fixed;
  inset: 0;
  z-index: 2100000000;
  overflow: hidden;
  pointer-events: none;
  background: rgba(7, 5, 14, 0.72);
  animation: bossCutInLayer 1.38s ease both;
}
.boss-cutin-slash {
  position: absolute;
  left: -8%;
  top: 22%;
  width: 116%;
  height: 56%;
  transform: skewY(-5deg);
  background: linear-gradient(90deg, #3a0716 0%, #a51f35 44%, #efbc50 50%, #78162f 56%, #270714 100%);
  border-block: 4px solid #ffd77a;
  box-shadow: 0 0 38px rgba(255, 73, 91, 0.7);
}
.boss-cutin-img {
  position: absolute;
  left: 53%;
  bottom: 7%;
  height: 82%;
  max-width: 44%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 18px rgba(255, 222, 128, 0.55));
  animation: bossCutInImage 1.38s cubic-bezier(.16,.9,.24,1) both;
}
.boss-cutin-label, .boss-cutin-name {
  position: absolute;
  z-index: 2;
  left: 13%;
  color: #fff1ba;
  text-shadow: 0 4px 0 #66192a, 0 0 18px #ff5c67;
}
.boss-cutin-label { top: 35%; font-size: 34px; color: #ff6b73; }
.boss-cutin-name { top: 45%; font-size: 54px; }
@keyframes bossCutInImage {
  0% { opacity: 0; transform: translateX(42%) scale(1.18); }
  18%, 78% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-5%) scale(1.04); }
}
@keyframes bossCutInLayer {
  0%, 100% { opacity: 0; }
  12%, 82% { opacity: 1; }
}
#encounter-ready-wait {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2099999900;
  padding: 12px 24px;
  border: 2px solid #d7bf78;
  background: rgba(10, 13, 23, 0.92);
  color: #fff0b0;
  font-size: 22px;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(255, 205, 95, 0.32);
}
.creature-offline-badge {
  position: absolute;
  left: 50%;
  z-index: 45;
  transform: translateX(-50%);
  color: #ff4b55;
  font-size: 28px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 3px 0 #3b0509, 2px 0 0 #3b0509, -2px 0 0 #3b0509, 0 0 12px rgba(255, 42, 54, 0.9);
  animation: offlineBadgePulse 1.15s ease-in-out infinite;
}
#room-idle-play-warning {
  position: fixed;
  left: 50%;
  top: 18%;
  z-index: 2099999950;
  transform: translateX(-50%);
  min-width: 460px;
  padding: 18px 28px 20px;
  border: 2px solid #ff5a60;
  background: rgba(33, 7, 13, 0.95);
  color: #fff2d0;
  text-align: center;
  box-shadow: 0 0 24px rgba(255, 47, 60, 0.52), inset 0 0 20px rgba(255, 102, 80, 0.12);
  animation: idlePlayWarningIn 0.2s cubic-bezier(.18,.88,.28,1.25) both;
}
.idle-play-warning-title {
  margin-bottom: 7px;
  color: #ff646b;
  font-size: 27px;
  font-weight: 900;
  text-shadow: 0 3px 0 #4b080d;
}
.idle-play-warning-text { font-size: 21px; white-space: nowrap; }
@keyframes idlePlayWarningIn {
  from { opacity: 0; transform: translateX(-50%) scale(0.82); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes offlineBadgePulse {
  0%, 100% { opacity: 0.78; transform: translateX(-50%) scale(0.96); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.04); }
}
.creature .shadow {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 75%; height: 20px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%);
}
/* 地面倒影（Batomon ReflectionSprite） */
.creature .reflection {
  position: absolute; top: 100%; left: 50%; margin-top: -4px;
  transform: translateX(-50%) scaleY(-1);
  opacity: 0.14; filter: blur(1.5px); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.9) 100%);
  mask-image: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.9) 100%);
}
.creature .reflection img { display: block; image-rendering: pixelated; }
.creature.enemy .reflection img { transform: scaleX(-1); }
/* 使用道具圖示（use_item 動畫由 JS 驅動） */
.creature .item-icon {
  position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
  font-size: 38px; opacity: 0; pointer-events: none; z-index: 9;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.creature .creature-name {
  position: absolute; left: 50%; transform: translateX(-50%);
  min-width: 58px; max-width: 180px; padding: 2px 9px 3px;
  border-radius: 5px;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 18px; font-weight: 900; line-height: 22px;
  color: #fff7d8; text-align: center; white-space: nowrap;
  background: rgba(18, 12, 24, 0.72);
  border: 1px solid rgba(255, 224, 150, 0.42);
  text-shadow: 0 2px 0 #000, 0 0 8px #000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  pointer-events: none; z-index: 7;
}
.creature.enemy .creature-name {
  color: #ffe1e1;
  border-color: rgba(255, 120, 110, 0.46);
}
.creature.deploy-bobbing .sprite-wrap {
  transform-origin: 50% 100%;
}
.creature.deploy-bobbing .shadow {
  animation: deployPreviewShadowPulse 2.2s ease-in-out infinite;
}
.creature.local-player-preview .creature-name {
  color: #fff3a8;
  background: linear-gradient(180deg, rgba(80, 44, 18, 0.96), rgba(35, 20, 10, 0.92));
  border: 2px solid rgba(255, 225, 106, 0.92);
  box-shadow: 0 0 0 2px rgba(60, 24, 8, 0.72), 0 0 14px rgba(255, 204, 74, 0.58), 0 4px 8px rgba(0,0,0,0.64);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 210, 96, 0.85);
}
@keyframes deployPreviewShadowPulse {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
  50% { transform: translateX(-50%) scaleX(0.86); opacity: 0.78; }
}
.deploy-ready-badge {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%);
  display: none;
  min-width: 88px; padding: 3px 12px 5px;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 30px; font-weight: 900; line-height: 34px;
  color: #7cff86; text-align: center; white-space: nowrap;
  text-shadow: 0 3px 0 rgba(0,54,18,0.92), 0 0 12px rgba(89,255,114,0.9), 0 0 24px rgba(89,255,114,0.42);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.76));
  pointer-events: none; z-index: 28;
}
.creature.deploy-ready .deploy-ready-badge {
  display: block;
  animation: deployReadyBadgePulse 0.92s ease-in-out infinite;
}
@keyframes deployReadyBadgePulse {
  50% { transform: translateX(-50%) scale(1.08); filter: drop-shadow(0 5px 10px rgba(0,0,0,0.78)) brightness(1.16); }
}
/* 吞噬幽靈貼圖 */
.devour-ghost {
  position: absolute; left: 50%; top: 42%;
  height: 78px; image-rendering: pixelated;
  pointer-events: none; z-index: 9; opacity: 0.92;
  filter: brightness(1.4) drop-shadow(0 0 8px rgba(255,160,200,0.6));
}
/* 目標懸停高亮 */
.creature.targetable .sprite-wrap { cursor: pointer; }
.creature.target-hover .sprite-wrap { filter: brightness(1.3) drop-shadow(0 0 14px rgba(255,90,74,0.85)); }
.creature.dead { pointer-events: none; }
.creature.spectator-corpse.downed-corpse .sprite-wrap {
  transform: translateY(28px) rotate(-86deg) scale(0.92) !important;
  transform-origin: 50% 88% !important;
  opacity: 0.74 !important;
  filter: grayscale(0.22) brightness(0.72) drop-shadow(0 6px 8px rgba(0,0,0,0.66));
}
.creature.spectator-corpse.downed-corpse.enemy .sprite-wrap,
.creature.spectator-corpse.downed-corpse.remote-player .sprite-wrap {
  transform: translateY(28px) rotate(86deg) scale(0.92) !important;
}
.creature.spectator-corpse.downed-corpse .shadow {
  opacity: 0.48 !important;
  transform: translateX(-50%) scaleX(1.36) scaleY(0.76);
}

/* 選取光圈（四角括號） */
.reticle { position: absolute; pointer-events: none; z-index: 30; opacity: 0; transition: opacity 0.1s; }
.reticle.show { opacity: 1; }
.reticle .corner {
  position: absolute; width: 22px; height: 22px;
  border: 3.5px solid #ff5a4a; filter: drop-shadow(0 0 6px rgba(255,90,74,0.8));
}
.reticle .c-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.reticle .c-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.reticle .c-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.reticle .c-br { bottom: 0; right: 0; border-left: none; border-top: none; }
.reticle.show .corner { animation: reticlePulse 0.8s ease-in-out infinite; }
@keyframes reticlePulse { 50% { transform: scale(0.9);} }

/* ---- 血條 / 格擋 ------------------------------------------- */
.hp-row { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; z-index: 6; }
.hp-bar {
  position: relative; width: clamp(176px, 241.92px, 260px); height: 30px; border-radius: 0;
  background: linear-gradient(180deg, #17384b 0%, #07141f 100%);
  border: 0;
  box-shadow: 0 2px 0 rgba(4, 10, 15, 0.95), 0 0 0 2px rgba(3, 9, 14, 0.92), 0 5px 9px rgba(0,0,0,0.75);
  overflow: hidden;
  clip-path: polygon(12px 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 12px 100%, 0 50%);
}
.hp-bar::before {
  content: ''; position: absolute; left: 9px; right: 13px; top: 6px; bottom: 6px; z-index: 0;
  background: linear-gradient(180deg, #0d2534 0%, #030912 100%);
  clip-path: polygon(9px 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 9px 100%, 0 50%);
}
.hp-ghost {
  position: absolute; left: 9px; top: 6px; bottom: 6px; width: calc(100% - 22px);
  display: none;
  background: none;
  border-radius: 0;
  transition: width 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s;
}
.hp-fill {
  position: absolute; left: 9px; right: 13px; top: 6px; bottom: 6px; width: auto; z-index: 1;
  background: linear-gradient(180deg, #ff6960 0%, #ff2f3a 48%, #bc111f 100%);
  clip-path: polygon(9px 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 9px 100%, 0 50%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.34), inset 0 -2px 0 rgba(94,0,0,0.72);
  transform-origin: left center;
  transform: scaleX(var(--hp-fill, 1));
  transition: transform 0.12s ease-out;
}
.creature.enemy .hp-fill { background: linear-gradient(180deg, #ff6960 0%, #ff2f3a 48%, #bc111f 100%); }
.hp-fill::after { display: none; }
.hp-text {
  position: absolute; inset: 0; text-align: center;
  font-size: 24px; font-weight: 900; line-height: 30px; color: #fff; z-index: 2;
  -webkit-text-stroke: 0 transparent;
  text-shadow: 0 2px 0 #000, 0 0 4px #000, 1px 0 2px #000, -1px 0 2px #000;
}
.block-badge {
  position: relative; width: 40px; height: 40px; margin-right: -11px; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
  opacity: 0; transform: scale(0.3); transition: all 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.block-badge.show { opacity: 1; transform: scale(1); }
.block-badge .shield {
  position: absolute; inset: 0;
  background: var(--ui-block) center / contain no-repeat;
}
.block-badge .num {
  position: relative; font-size: 18px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px #001, 0 0 4px #024;
}
.block-badge.bump { animation: blockBump 0.3s; }
@keyframes blockBump { 40% { transform: scale(1.35);} }
/* 血條受擊晃動 */
.hp-bar.shake { animation: hpShake 0.25s; }
@keyframes hpShake { 25% { transform: translateX(-3px);} 50% { transform: translateX(3px);} 75% { transform: translateX(-2px);} }

/* ---- 意圖 -------------------------------------------------- */
.intent {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: none !important; align-items: center; gap: 4px; z-index: 8; cursor: help;
  animation: intentBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.7));
  transition: opacity 0.2s;
}
@keyframes intentBob { 0%,100% { transform: translateX(-50%) translateY(0);} 50% { transform: translateX(-50%) translateY(-7px);} }
.intent svg {
  width: 44px; height: 44px; padding: 6px;
  background: var(--ui-intent-skill) center / contain no-repeat;
}
.intent.intent-attack svg,
.intent.intent-attack_debuff svg,
.intent.intent-shoot svg,
.intent.intent-devour svg { background-image: var(--ui-intent-attack); }
.intent.intent-defend svg { background-image: var(--ui-intent-defend); }
.intent.intent-buff svg,
.intent.intent-debuff svg,
.intent.intent-heal svg { background-image: var(--ui-intent-skill); }
.intent .intent-num {
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 26px; font-weight: 900; color: #f0e6e0;
  text-shadow: 0 2px 3px #000, 0 0 6px #000;
}
.intent .intent-num .times { font-size: 18px; color: #cfc0b0; }
.intent .intent-num.buffed { color: #ff7a5a; }
.intent .intent-num.debuffed { color: #9adf6e; }
.intent.pop { animation: intentPop 0.4s cubic-bezier(0.3, 1.8, 0.5, 1), intentBob 2.4s 0.4s ease-in-out infinite; }
@keyframes intentPop { 0% { opacity: 0; transform: translateX(-50%) scale(0.2);} 100% { opacity: 1; transform: translateX(-50%) scale(1);} }
.intent.acting { animation: intentActing 0.5s ease-in-out infinite; }
@keyframes intentActing { 50% { transform: translateX(-50%) scale(1.25); filter: brightness(1.6) drop-shadow(0 2px 5px rgba(0,0,0,0.7)); } }

/* ---- 狀態圖示列 -------------------------------------------- */
.powers {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
  gap: 4px; justify-content: center; max-width: none; z-index: 6;
  height: 34px;
}
.power-icon {
  position: relative; width: 34px; height: 34px; cursor: help;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.78));
}
.power-icon.buff, .power-icon.debuff { background: none; }
.power-icon .power-art {
  width: 30px; height: 30px; object-fit: contain;
  image-rendering: auto; pointer-events: none; user-select: none;
}
.power-icon .stack {
  position: absolute; bottom: -4px; right: -2px;
  font-size: 15px; font-weight: 900; color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 4px #000, 1px 0 2px #000;
}
.power-icon.gain { animation: powerGain 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes powerGain { 0% { transform: scale(0.1); filter: brightness(3);} 60% { transform: scale(1.5);} }
.power-icon.tick { animation: powerTick 0.3s; }
@keyframes powerTick { 50% { transform: scale(1.3); filter: brightness(2);} }

/* ---- 手牌與卡牌 -------------------------------------------- */
#combat-ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#combat-ui > * { pointer-events: auto; }
#combat-floor-indicator {
  position: absolute;
  top: 24px;
  left: 26px;
  z-index: 90;
  min-width: 128px;
  height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 2px solid rgba(255, 231, 142, 0.66);
  border-radius: 999px;
  background: rgba(10, 16, 26, 0.72);
  color: #ffe98e;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 210, 82, 0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 5px 14px rgba(0,0,0,0.34);
}
#combat-floor-indicator.show { display: flex; }
#combat-spectator-indicator {
  position: absolute;
  top: 70px;
  left: 26px;
  z-index: 90;
  display: none;
  min-width: 128px;
  justify-content: center;
  color: #9fe8ff;
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(77, 205, 255, 0.55);
  pointer-events: none;
}
#combat-spectator-indicator.show { display: flex; }
#viewport.room-spectator #hand-area,
#viewport.room-spectator #energy-orb,
#viewport.room-spectator #overload-orb,
#viewport.room-spectator #draw-pile,
#viewport.room-spectator #discard-pile,
#viewport.room-spectator #loot-claim,
#viewport.room-spectator #queue-area,
#viewport.room-spectator #end-turn {
  display: none !important;
}
/* 手牌層鋪滿全畫面（卡牌座標 = 視窗座標），本身不擋滑鼠 */
#hand-area { position: absolute; inset: 0; pointer-events: none !important; }
#hand-area .card { pointer-events: auto; }
#viewport.dead-player-hand #hand-area .card {
  pointer-events: none !important;
  filter: grayscale(1) brightness(0.55) contrast(0.9) !important;
}
#dead-hand-label {
  position: absolute;
  left: 50%;
  bottom: 348px;
  z-index: 905;
  transform: translateX(-50%);
  padding: 8px 24px;
  border: 2px solid rgba(205, 210, 220, 0.72);
  background: rgba(13, 16, 22, 0.82);
  color: #c8cbd2;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
#viewport.background-return-active #hand-area {
  pointer-events: none !important;
}
#viewport.background-return-active #hand-area .card {
  pointer-events: none !important;
}
#play-line { display: none; }
#viewport.setup-mode #energy-orb,
#viewport.setup-mode #overload-orb,
#viewport.setup-mode #draw-pile,
#viewport.setup-mode #discard-pile,
#viewport.setup-mode #loot-claim,
#viewport.setup-mode #queue-area {
  display: none;
}

/* 卡牌版面 = 靜置顯示尺寸(216×324 = 11.25%W),handScale 靜置時為 1.0,
   文字以原生尺寸點陣化 → 不再因 transform 放大而模糊 */
.card {
  position: absolute; left: 0; top: 0;
  width: 216px; height: 324px;
  margin-left: -108px; margin-top: -162px;
  will-change: transform;
  cursor: pointer;
  transform-origin: 50% 50%;
  isolation: isolate;
}
.card::before {
  content: '';
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 4%;
  height: 13%;
  border-radius: 999px;
  background: rgba(0,0,0,0.38);
  transform: translateY(14px);
  pointer-events: none;
  z-index: 0;
}
/* Batomon v8 卡片:無文字底圖 + 卡圖 + 類型牌 UI 復原層 + 文字 */
.card-v8-orange .card-v8-inner { --card-v8-template: var(--card-v8-orange); }
.card-v8-gray .card-v8-inner { --card-v8-template: var(--card-v8-gray); }
.card-v8-green .card-v8-inner { --card-v8-template: var(--card-v8-green); }
.card-v8-blue .card-v8-inner { --card-v8-template: var(--card-v8-blue); }
.card-v8-purple .card-v8-inner { --card-v8-template: var(--card-v8-purple); }
.card-inner,
.card-v8-inner {
  position: relative; width: 100%; height: 100%;
  z-index: 1;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.card-v8-bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--card-v8-template) center / 100% 100% no-repeat;
  filter: none;
  pointer-events: none;
  image-rendering: pixelated;
}
.card.hovered::before { background: rgba(0,0,0,0.46); transform: translateY(18px) scaleX(1.08); }
.card-inner::before {
  content: ''; position: absolute; inset: -3.5%;
  border-radius: 5%;
  background: radial-gradient(ellipse at 50% 50%, rgba(119, 244, 255, 0.28) 0%, rgba(119, 244, 255, 0.16) 42%, transparent 70%);
  opacity: 0; pointer-events: none; z-index: 4;
  transition: opacity 0.18s;
}
.card-inner::after {
  content: ''; position: absolute; inset: -2.5%;
  border: 0;
  border-radius: 5%;
  opacity: 0; pointer-events: none; z-index: 5;
  box-shadow: none;
  transition: opacity 0.18s;
}
.card.playable-glow .card-inner::before { opacity: 0.9; animation: cardFlashPulse 0.9s ease-in-out infinite; }
.card.hovered .card-inner::after { opacity: 0; }
.card.playable-glow .card-inner::after { opacity: 0; }
@keyframes cardFlashPulse { 50% { opacity: 0.45; } }

.card-v8-bg,
.card-v8-art,
.card-v8-type-plaque-ui,
.card-v8-cost,
.card-v8-name,
.card-v8-type,
.card-v8-effect {
  position: absolute;
}
.card-v8-art {
  left: 13.8671875%; top: 19.53125%; width: 74.0234375%; height: 39.9739583%;
  z-index: 1;
  overflow: hidden;
  object-fit: cover;
  clip-path: polygon(1.58% 0, 98.42% 0, 100% 1.95%, 100% 98.05%, 98.42% 100%, 1.58% 100%, 0 98.05%, 0 1.95%);
}
.card-v8-art svg,
.card-v8-art img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.card-v8-art .card-art-sprite {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 52% 45%, rgba(255,255,255,0.18), rgba(0,0,0,0.18));
}
.card-v8-art .card-art-sprite img {
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.card-v8-cost,
.card-v8-name,
.card-v8-type,
.card-v8-effect {
  image-rendering: auto;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}
.card-v8-type-plaque-ui {
  left: 32.2265625%; top: 53.90625%; width: 36.1328125%; height: 9.2447917%;
  z-index: 2;
  overflow: hidden;
  clip-path: polygon(0 100%, 0 45.07%, 13.51% 12.68%, 86.49% 12.68%, 100% 45.07%, 100% 100%);
  pointer-events: none;
}
.card-v8-type-plaque-bg {
  position: absolute;
  left: -89.1891892%; top: -583.0985915%;
  width: 276.7567568%; height: 1081.6901408%;
  background: var(--card-v8-template) center / 100% 100% no-repeat;
}
.card .cost,
.card-v8-cost {
  left: 6.8359375%; top: 5.078125%; width: 13.671875%; height: 10.2213542%;
  z-index: 4;
  border-radius: 50%;
  background: none;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 26px;
  line-height: 28px;
  font-weight: 900; color: #f6f7f7;
  text-shadow: 0 1px 0 rgba(16,20,28,0.98), 1px 0 0 rgba(16,20,28,0.98), -1px 0 0 rgba(16,20,28,0.98), 0 -1px 0 rgba(16,20,28,0.96);
  box-shadow: none;
}
.card .cost.insufficient {
  color: #ffb6aa;
}
.card .card-name,
.card-v8-name {
  left: 23.9257813%; top: 7.2916667%; width: 55.6640625%; height: 9.6354167%;
  z-index: 4;
  text-align: center;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 18px;
  line-height: 21px;
  font-weight: 900; color: #f6f7f7;
  text-shadow: 0 1px 0 rgba(16,20,28,0.98), 1px 0 0 rgba(16,20,28,0.98), -1px 0 0 rgba(16,20,28,0.98), 0 -1px 0 rgba(16,20,28,0.96);
  white-space: nowrap; overflow: hidden;
  background: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0 1.2%;
}
.card .card-type,
.card-v8-type {
  left: 34.9609375%; top: 56.25%; width: 30.46875%; height: 5.9%;
  z-index: 5;
  transform: none;
  padding: 0; border-radius: 0;
  background: none;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-weight: 900; color: #f6f7f7; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(16,20,28,0.98), 1px 0 0 rgba(16,20,28,0.98), -1px 0 0 rgba(16,20,28,0.98), 0 -1px 0 rgba(16,20,28,0.96);
}
.card-v8-type.is-cjk { font-size: 11px; }
.card-v8-type.is-latin { font-size: 9px; }
.card .card-text,
.card-v8-effect {
  left: 14.6484375%; top: 67.0572917%; width: 70.8007813%; height: 19.2057292%;
  z-index: 4;
  display: block; text-align: left;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 16px;
  line-height: 1.18; color: #f6f7f7;
  text-shadow: 0 1px 0 rgba(16,20,28,0.98), 1px 0 0 rgba(16,20,28,0.96), -1px 0 0 rgba(16,20,28,0.96), 0 -1px 0 rgba(16,20,28,0.94);
  background: none;
  padding: 2.2% 3.2% 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;
  overflow: hidden;
}
.card-v8-effect b { display: inline; }
.card-v8-effect.fit-small { font-size: 14.5px; line-height: 1.14; }
.card-v8-effect.fit-three-line { font-size: 14px; line-height: 1.08; padding-top: 1.25%; }
.card-v8-effect.fit-tiny { font-size: 13px; line-height: 1.06; padding-top: 1%; }
.card .card-text b { color: #ffd36e; font-weight: 900; }
.card.skill .card-text b { color: #78dcff; }
.card.power .card-text b { color: #f7ca66; }
.card.upgraded .card-name { color: #b8ffb8; }
.deploy-card {
  position: absolute;
  transition: filter 0.15s, opacity 0.15s;
}
.deploy-card .cost { display: none; }
.deploy-card .deploy-drag-creature {
  position: absolute; left: 50%; bottom: 0;
  width: 180px; height: 190px;
  transform: translateX(-50%);
  display: none; align-items: flex-end; justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.58));
}
.deploy-card .deploy-drag-creature img {
  max-width: 160px; max-height: 184px;
  image-rendering: pixelated;
}
.deploy-card.as-creature .card-inner { display: none; }
.deploy-card.as-creature .deploy-drag-creature { display: flex; }
.deploy-card.as-creature::before {
  display: none;
}
.deploy-card.as-creature {
  background: transparent;
  box-shadow: none;
}
.deploy-card.selected .card-v8-bg {
  filter: drop-shadow(0 14px 24px rgba(0,0,0,0.75)) drop-shadow(0 0 16px rgba(255,120,180,0.65));
}
.deploy-card.dragging {
  filter: brightness(1.12) drop-shadow(0 0 18px rgba(255,230,160,0.72));
  z-index: 620 !important;
}
#viewport.setup-mode .creature.player { cursor: grab; }
#viewport.setup-mode .creature.player.deploy-field-dragging {
  cursor: grabbing;
  z-index: 650 !important;
  filter: drop-shadow(0 0 18px rgba(255,230,160,0.72));
}
#viewport.setup-mode .creature.player.returning-to-hand {
  filter: drop-shadow(0 0 20px rgba(120,230,255,0.72));
}

/* 不可打出的卡牌能量遮罩 */
.card.cant-afford .card-v8-bg,
.card.cant-afford .card-v8-art,
.card.cant-afford .card-v8-type-plaque-bg { filter: brightness(0.75) saturate(0.75); }
/* 打不出時搖頭 */
.card.refuse { animation: cardRefuse 0.32s; }
@keyframes cardRefuse {
  20% { margin-left: -84px; } 40% { margin-left: -68px; }
  60% { margin-left: -82px; } 80% { margin-left: -71px; }
}
.card.refuse .card-inner { box-shadow: 0 0 22px rgba(255,60,40,0.8) !important; border-color: #ff5a4a; }

/* 佇列中的小卡 */
.queued-card {
  position: absolute; width: 62px; height: 93px; border-radius: 5px;
  background: var(--card-v8-orange) center / 100% 100% no-repeat;
  border: 0; box-shadow: 0 3px 10px rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 10px; font-weight: 700; color: #e8d8b0; padding: 4px;
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.2s;
}

/* ---- 能量球 ------------------------------------------------ */
/* ---- 能量球:兩層 PNG 疊層(外框/核心) ---- */
/* 能量球:比例對齊戰鬥 HUD — 中心 (8.9%W, 82.6%H),直徑 12.4%H */
#energy-orb {
  position: absolute;
  left: calc(170.88px - 66.96px); bottom: 120.96px;
  width: 133.92px; height: 133.92px; z-index: 25;
  cursor: help;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.62));
}
.orb-l {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; image-rendering: pixelated;
  translate: var(--orb-align-x, 0) var(--orb-align-y, 0);
}
.orb-l2 { --orb-align-x: 0%; --orb-align-y: 0%; animation: orbCorePulse 2.6s ease-in-out infinite; } /* 自製核心 */
.orb-l1 { --orb-align-y: -2.34375%; }                                         /* 外圈主框 */
@keyframes orbCorePulse { 50% { transform: scale(1.025); } }
#energy-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 42px; font-weight: 900; color: #ead9bf;
  text-shadow: 0 3px 3px rgba(60,25,0,0.92), 0 0 5px rgba(255,170,70,0.24);
  z-index: 2;
}
/* 能量耗盡:核心/火焰停止 */
#energy-orb.empty .orb-l2 { animation-play-state: paused; }
/* 能量不足錯誤脈衝 */
#energy-orb.flash-error { animation: orbError 0.4s; }
@keyframes orbError { 30% { transform: scale(1.12);} }
/* 回合開始獲得能量 */
#energy-orb.gain { animation: orbGain 0.4s; }
@keyframes orbGain { 40% { transform: scale(1.18);} }

/* ---- 牌堆按鈕 ---------------------------------------------- */
/* 牌堆:比例對齊 StS2 — 抽牌堆中心 (3.1%W, 94.4%H)、棄牌堆中心 (97.5%W, 94.2%H),尺寸約 7%H */
.pile-btn {
  position: absolute; width: 75.6px; height: 75.6px; z-index: 24; cursor: pointer;
  transition: transform 0.12s;
}
.pile-btn:hover { transform: scale(1.1); }
#draw-pile { left: calc(59.52px - 37.8px); bottom: 22.68px; }
#loot-claim { left: 144px; bottom: 22.68px; }
#discard-pile { right: calc(48px - 37.8px); bottom: 24.84px; }
#loot-claim.empty { opacity: 0.42; filter: grayscale(0.35) brightness(0.78); }
#loot-claim.empty:hover { transform: none; }
/* 牌堆圖示:batomon 風格卡疊圖(draw_pile / discard_pile) */
.pile-icon {
  position: absolute; inset: 0; display: block; border: 0; box-shadow: none;
  background: none; image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}
.pile-icon.draw { background: var(--ui2-draw) center / contain no-repeat; }
.pile-icon.discard { background: var(--ui2-discard) center / contain no-repeat; }
.pile-icon.loot { background: var(--ui2-loot) center / contain no-repeat; }
/* 數字底:pile_button_count 粉色小牌 */
.pile-count {
  position: absolute; right: -10px; bottom: -6px; min-width: 48px; height: 40px; padding: 0 8px;
  border-radius: 0; background: var(--ui2-pile-count) center / 100% 100% no-repeat; border: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 900; color: #fff; z-index: 2;
  text-shadow: 0 1px 2px rgba(90,10,40,0.9);
  image-rendering: pixelated;
}
.pile-btn.bump { animation: pileBump 0.3s; }
@keyframes pileBump { 40% { transform: scale(1.22);} }

#overload-orb {
  position: absolute;
  left: 189px; bottom: 106px;
  width: 64px; height: 64px; z-index: 28;
  cursor: help;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,0.68));
  transition: transform 0.16s ease, filter 0.16s ease;
}
#overload-orb:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7)) drop-shadow(0 0 12px rgba(255,54,92,0.52));
}
.overload-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; pointer-events: none;
}
#overload-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 25px; font-weight: 900; color: #ffe2e8;
  text-shadow: 0 2px 2px rgba(35,0,14,0.95), 0 0 6px rgba(255,70,120,0.58);
  pointer-events: none; z-index: 2;
}
#overload-orb.warning #overload-text { color: #fff0b8; }
#overload-orb.pulse { animation: overloadPulse 0.34s ease; }
@keyframes overloadPulse { 42% { transform: scale(1.2); } }

.card.overload-will-discard .card-inner {
  box-shadow: 0 0 0 5px rgba(255,35,60,0.95), 0 0 28px rgba(255,40,70,0.82), 0 16px 40px rgba(0,0,0,0.86);
}
.card.overload-will-discard .card-inner::after { opacity: 0.42; background: rgba(255,32,64,0.22); }

/* ---- 自動戰鬥按鈕 ------------------------------------------ */
/* End Turn:比例對齊 StS2 — 中心 (89%W, 82.4%H),可見藥丸加寬 */
#end-turn-wrap { position: absolute; right: calc(211.2px - 96px); bottom: 157.68px; z-index: 25; text-align: center; }
#combat-ui.background-return-layer { z-index: 1300; }
#return-lobby {
  display: none;
  position: absolute;
  right: calc(211.2px - 96px);
  bottom: calc(157.68px - 62px);
  z-index: 26;
  width: 192px; height: 46px;
  border-radius: 9px;
  border: 2px solid rgba(229, 246, 255, 0.86);
  background: linear-gradient(180deg, rgba(63, 102, 132, 0.94), rgba(26, 48, 72, 0.96));
  color: #f5fbff;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 21px; font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0,0,0,0.72);
  box-shadow: 0 4px 0 #142636, 0 8px 16px rgba(0,0,0,0.48), inset 0 2px 0 rgba(255,255,255,0.18);
  cursor: pointer;
}
#return-lobby.show { display: block; }
#return-lobby.background-return { z-index: 1301; }
#viewport.background-return-active #return-lobby.background-return {
  z-index: 1400;
  pointer-events: auto;
}
#return-lobby:hover { filter: brightness(1.12); transform: translateY(-1px); }
#return-lobby:active { transform: translateY(2px); box-shadow: 0 2px 0 #142636, 0 5px 10px rgba(0,0,0,0.5); }
#return-background,
#return-leave {
  min-width: 210px;
  white-space: nowrap;
}
#end-turn {
  position: relative; width: 192px; height: 63.72px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 0; padding: 0 7.68px;
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: min(24.84px, 25.344px); font-weight: 900; color: #fff;
  white-space: nowrap;
  background:
    linear-gradient(180deg, rgba(255,142,176,0.98) 0%, rgba(238,72,120,0.98) 46%, rgba(159,33,80,0.98) 100%);
  border: 3px solid #ffe6ee;
  box-shadow:
    0 5px 0 #64213b,
    0 9px 18px rgba(0,0,0,0.58),
    inset 0 3px 0 rgba(255,255,255,0.28),
    inset 0 -5px 0 rgba(90,12,42,0.25);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
  text-shadow: 0 2px 2px rgba(120,20,50,0.85);
  transition: all 0.15s; overflow: visible;
}
#end-turn::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,242,170,0.65) 0%, rgba(255,120,178,0.34) 42%, transparent 72%);
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
  filter: blur(2px);
  z-index: -1;
}
#end-turn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08) drop-shadow(0 4px 10px rgba(0,0,0,0.45)); }
#end-turn:hover:not(:disabled)::before { opacity: 0.9; }
#end-turn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #64213b,
    0 5px 12px rgba(0,0,0,0.58),
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -3px 0 rgba(90,12,42,0.32);
}
#end-turn:disabled {
  cursor: default; color: #d8c8cc;
  background: linear-gradient(180deg, rgba(92,92,104,0.95), rgba(48,47,58,0.96));
  border-color: rgba(210,210,225,0.45);
  box-shadow: 0 4px 0 #22212a, 0 8px 14px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.12);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55)) grayscale(0.35) brightness(0.78);
  text-shadow: none;
}
#end-turn.urge::before { animation: endTurnUrge 1.6s ease-in-out infinite; }
#end-turn.auto-on {
  background: linear-gradient(180deg, rgba(103,225,138,0.98) 0%, rgba(49,170,92,0.98) 48%, rgba(30,105,67,0.98) 100%);
  border-color: #dcffe6;
  box-shadow:
    0 5px 0 #1c5a3c,
    0 9px 18px rgba(0,0,0,0.58),
    inset 0 3px 0 rgba(255,255,255,0.28),
    inset 0 -5px 0 rgba(12,70,42,0.25);
}
#end-turn.auto-on::before { opacity: 0.85; }
@keyframes endTurnUrge { 0%,100% { opacity: 0.15; } 50% { opacity: 1; } }
#end-turn-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: rgba(255,230,150,0.22); pointer-events: none;
}
#end-turn-text {
  position: absolute; left: 10%; right: 24%; top: 50%;
  transform: translateY(-50%);
  z-index: 1; text-align: center; pointer-events: none;
}

/* ---- 聊天室抽屜 -------------------------------------------- */
#chat-drawer {
  position: absolute; top: 0; left: 50%;
  width: 520px; height: 260px;
  transform: translate(-50%, -260px);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
  z-index: 95; pointer-events: none;
}
#chat-drawer.open { transform: translate(-50%, 0); }
#chat-window {
  position: relative; width: 100%; height: 260px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(18,18,28,0.96), rgba(9,9,16,0.94));
  border: 2px solid rgba(255,216,138,0.42);
  border-top: 0; border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.72), inset 0 -1px 0 rgba(255,255,255,0.08);
  pointer-events: auto;
}
#chat-log,
#lobby-chat-log {
  height: 184px; overflow-y: auto; padding-right: 4px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,216,138,0.45) rgba(0,0,0,0.25);
}
.chat-line {
  align-self: flex-start; max-width: 86%; padding: 6px 10px 7px;
  border-radius: 7px;
  background: rgba(255,235,190,0.1);
  border: 1px solid rgba(255,216,138,0.22);
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 18px; line-height: 1.45;
  color: #f2e4c8; text-shadow: 0 2px 2px rgba(0,0,0,0.8);
  word-break: break-word;
}
.chat-line.self {
  align-self: flex-end;
  background: rgba(255,112,154,0.18);
  border-color: rgba(255,172,198,0.38);
  color: #fff0f6;
}
.chat-author { color: #ffd88a; margin-right: 8px; }
.lobby-chat-line {
  width: fit-content;
  max-width: 94%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(24, 39, 62, 0.92), rgba(12, 22, 38, 0.9));
  border: 1px solid rgba(126, 184, 224, 0.48);
  box-shadow: 0 4px 10px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}
.lobby-chat-line.self {
  align-self: flex-end;
  grid-template-columns: minmax(0, 1fr) 44px;
  background: rgba(18, 12, 24, 0.88) !important;
  border-color: rgba(255, 224, 150, 0.52) !important;
  color: #fff7d8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.11) !important;
}
.lobby-chat-line.self .chat-avatar {
  grid-column: 2;
}
.lobby-chat-line.self .chat-message-body {
  grid-column: 1;
  grid-row: 1;
}
.chat-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(236, 208, 136, 0.8);
  background:
    radial-gradient(circle at 50% 72%, rgba(255, 214, 102, 0.25), transparent 42%),
    linear-gradient(180deg, rgba(42, 33, 45, 0.95), rgba(8, 13, 21, 0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 0 rgba(0,0,0,0.55);
}
.chat-avatar img {
  width: auto;
  height: 48px;
  object-position: center center;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translate(0, 5px);
}
.chat-message-body {
  min-width: 0;
}
.chat-message-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.lobby-chat-line .chat-author {
  margin-right: 0;
  color: #ffe39a;
  font-size: 17px;
}
.chat-time {
  color: #91a7bd;
  font-size: 14px;
  text-shadow: 0 1px 0 #000;
}
.chat-message-text {
  color: #fff1dc;
  font-size: 18px;
  line-height: 1.42;
  word-break: break-word;
}
.lobby-chat-line.self .chat-message-text {
  color: #fff7d8;
}
.lobby-chat-line.self .chat-author,
.lobby-chat-line.self .chat-time {
  color: #ffe39a;
  text-shadow: 0 2px 0 #000, 0 0 8px #000;
}
#chat-form,
.lobby-chat-form { display: flex; gap: 8px; margin-top: 12px; }
#chat-input,
#lobby-chat-input {
  flex: 1; height: 38px; padding: 0 12px;
  border-radius: 6px; border: 1px solid rgba(255,216,138,0.36);
  background: rgba(4,5,10,0.78); color: #fff6df;
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 18px;
  outline: none; user-select: text; -webkit-user-select: text;
}
#chat-input:focus,
#lobby-chat-input:focus {
  border-color: rgba(255,132,176,0.75);
  box-shadow: 0 0 0 2px rgba(255,132,176,0.22);
}
#chat-send {
  width: 86px; height: 38px; border: 0; border-radius: 6px;
  background: linear-gradient(180deg, #ff6f9c, #c93667);
  color: #fff; font-family: 'Cubic 11', '俐方體11號', serif; font-size: 17px; font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  box-shadow: 0 3px 0 #7c233f, 0 6px 12px rgba(0,0,0,0.45);
}
#chat-send:hover { filter: brightness(1.12); transform: translateY(-1px); }
#chat-toggle {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, -1px);
  width: 158px; height: 46px;
  border: 0; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #ff6f9c, #c93667);
  color: #fff; font-family: 'Cubic 11', '俐方體11號', serif; font-size: 20px; font-weight: 900;
  letter-spacing: 3px; text-indent: 3px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  box-shadow: 0 4px 0 #7c233f, 0 8px 16px rgba(0,0,0,0.5);
  pointer-events: auto;
}
#chat-toggle:hover { filter: brightness(1.14); }
.speech-bubble {
  position: absolute; left: 50%; bottom: 150px; transform: translate(-50%, 10px) scale(0.96);
  max-width: 250px; min-width: 68px; padding: 9px 12px 10px;
  border-radius: 9px;
  background: rgba(255, 246, 223, 0.96);
  border: 2px solid rgba(62, 38, 38, 0.88);
  color: #3a2230;
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 18px; font-weight: 900; line-height: 1.35;
  text-align: center; word-break: break-word;
  box-shadow: 0 5px 12px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; z-index: 26;
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.2, 1.3, 0.3, 1);
}
.speech-bubble::after {
  content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 11px solid rgba(255, 246, 223, 0.96);
  filter: drop-shadow(0 2px 0 rgba(62,38,38,0.88));
}
.speech-bubble.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
/* ---- 浮動文字（傷害數字等） --------------------------------- */
#float-layer { position: absolute; inset: 0; pointer-events: none; z-index: 75; }
.dmg-num {
  position: absolute; transform: translate(-50%, -50%);
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 38px; font-weight: 900;
  color: #fff2df; -webkit-text-stroke: 3px rgba(22,0,0,0.98);
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 #000,
    0 0 9px rgba(0,0,0,0.95),
    0 0 16px rgba(255,74,42,0.82),
    0 0 30px rgba(255,178,82,0.44);
  will-change: transform, opacity;
}
.dmg-num.crit {
  color: #fff7bf; -webkit-text-stroke-width: 3.5px;
  text-shadow:
    0 5px 0 #000,
    0 0 12px rgba(0,0,0,1),
    0 0 22px rgba(255,48,34,0.95),
    0 0 42px rgba(255,218,92,0.68);
}
.dmg-num.blocked { color: #e8f1ff; text-shadow: 0 4px 0 #001025, 0 0 12px rgba(0,0,0,0.95), 0 0 20px rgba(100,140,255,0.75); -webkit-text-stroke: 3px rgba(0,10,40,0.98); }
.dmg-num.block-gain { color: #b9d8ff; -webkit-text-stroke: 3px rgba(0,10,50,0.98); text-shadow: 0 4px 0 #001025, 0 0 16px rgba(80,150,255,0.75); }
.dmg-num.heal { color: #c4ffc4; -webkit-text-stroke: 3px rgba(0,38,0,0.98); text-shadow: 0 4px 0 #001800, 0 0 18px rgba(70,255,100,0.7); }
.dmg-num.poison { color: #c5ff8f; -webkit-text-stroke: 3px rgba(18,40,0,0.98); text-shadow: 0 4px 0 #102000, 0 0 18px rgba(110,255,80,0.66); }
.dmg-num.status { font-size: 32px !important; color: #f2d8ff; -webkit-text-stroke: 2.5px rgba(30,0,50,0.98); font-family: 'Cubic 11', '俐方體11號', sans-serif; font-weight: 900; text-shadow: 0 4px 0 #140020, 0 0 16px rgba(210,120,255,0.75); }
.dmg-num.status.buff-txt { color: #fff0a8; text-shadow: 0 4px 0 #2a1600, 0 0 18px rgba(255,220,100,0.82); }

/* ---- 提示框 ------------------------------------------------ */
#tooltip-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1400; }
.tip-box {
  position: relative; width: 280px; padding: 12px 14px;
  background: linear-gradient(165deg, rgba(22,20,30,0.97), rgba(14,12,20,0.97));
  border: 1.5px solid #6a5a40; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.8);
  font-size: 18px; line-height: 1.5; color: #d8d0bc;
}
.tip-box .tip-title {
  font-family: 'Cubic 11', '俐方體11號', serif; font-weight: 900; font-size: 21px;
  color: #ffd88a; margin-bottom: 4px;
}
.tip-box b { color: #ffd88a; }
.tip-box + .tip-box { margin-top: 8px; }

/* ---- 橫幅（回合 / 戰鬥開始 / 勝利） -------------------------- */
#banner-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.banner {
  position: absolute; left: 0; right: 0; top: 34%;
  display: flex; align-items: center; justify-content: center;
  height: 110px;
}
.banner .banner-bg {
  position: absolute; left: 0; right: 0; top: 50%; height: 86px; transform: translateY(-50%) scaleY(0);
  background: linear-gradient(90deg, transparent 0%, rgba(10,8,14,0.85) 18%, rgba(10,8,14,0.92) 50%, rgba(10,8,14,0.85) 82%, transparent 100%);
  border-top: 1.5px solid rgba(255,215,130,0.35); border-bottom: 1.5px solid rgba(255,215,130,0.35);
  animation: bannerBg 0.28s cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}
@keyframes bannerBg { to { transform: translateY(-50%) scaleY(1);} }
.banner .banner-text {
  position: relative; font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 52px; font-weight: 900; letter-spacing: 14px; text-indent: 14px; color: #f4e8cc;
  text-shadow: 0 3px 8px #000, 0 0 24px rgba(255,200,110,0.4);
  opacity: 0; transform: translateX(-70px) scale(0.96);
  animation: bannerText 0.34s 0.08s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
@keyframes bannerText { to { opacity: 1; transform: translateX(0) scale(1);} }
.banner .banner-sub {
  position: absolute; top: 100%; left: 0; right: 0; text-align: center;
  font-size: 18px; letter-spacing: 6px; color: #b0a488; font-weight: 700;
  opacity: 0; animation: bannerText 0.3s 0.2s forwards;
}
.banner.enemy-turn .banner-text { color: #ff9a8a; text-shadow: 0 3px 8px #000, 0 0 24px rgba(255,80,50,0.5); }
.banner.enemy-turn .banner-bg { border-color: rgba(255,110,80,0.4); }
.banner.victory .banner-text { color: #ffe9a8; text-shadow: 0 3px 8px #000, 0 0 32px rgba(255,215,120,0.7); }
.banner.leaving .banner-bg { animation: bannerBgOut 0.22s ease-in forwards; }
.banner.leaving .banner-text, .banner.leaving .banner-sub { animation: bannerTextOut 0.2s ease-in forwards; }
@keyframes bannerBgOut { to { transform: translateY(-50%) scaleY(0);} }
@keyframes bannerTextOut { to { opacity: 0; transform: translateX(60px);} }

/* ---- 錯誤提示（Toast） -------------------------------------- */
#toast-layer { position: fixed; left: 0; right: 0; top: 22%; z-index: 2147483646; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#modal-toast-layer { position: fixed; left: 0; right: 0; top: 22%; z-index: 2147483646; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* 帳號被其他分頁奪取時的封鎖遮罩（略低於游標與 toast，蓋住整個 App） */
.auth-superseded-overlay {
  position: fixed; inset: 0; z-index: 2147483640; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 11, 0.82); backdrop-filter: blur(2px);
  animation: authOverlayFade 0.22s ease-out both;
}
.auth-superseded-card {
  width: min(420px, calc(100vw - 44px)); padding: 22px 26px 24px;
  border: 2px solid rgba(232, 196, 116, 0.78); border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(87, 56, 92, 0.34), transparent 46%),
    linear-gradient(180deg, rgba(23, 32, 48, 0.98), rgba(8, 12, 20, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 22px 58px rgba(0,0,0,0.64);
  text-align: center; font-family: 'Cubic 11', '俐方體11號', serif;
}
.auth-superseded-title { color: #ffe49b; font-size: 22px; font-weight: 900; margin-bottom: 12px; text-shadow: 0 2px 0 rgba(0,0,0,0.6); }
.auth-superseded-desc { color: #d8cfba; font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
.auth-superseded-card .btn-text {
  min-width: 210px;
  margin: 0 auto;
  white-space: nowrap;
}
.toast {
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 31px; font-weight: 900; color: #ff6a58;
  text-shadow: 0 2px 4px #000, 0 0 14px rgba(255,60,40,0.5);
  animation: toastIn 1.4s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.toast.loot-toast {
  padding: 13px 28px 15px;
  border: 2px solid #ffe38b;
  border-radius: 8px;
  color: #fff2a8;
  font-size: 36px;
  background: linear-gradient(180deg, rgba(98, 55, 16, 0.96), rgba(38, 20, 8, 0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 0 22px rgba(255, 190, 58, 0.72), 0 8px 24px rgba(0,0,0,0.62);
  text-shadow: 0 3px 0 #5a2509, 0 0 12px rgba(255, 220, 92, 0.86);
}
@keyframes toastIn {
  0% { opacity: 0; transform: translateY(14px) scale(0.8); }
  12% { opacity: 1; transform: translateY(0) scale(1.06); }
  20% { transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px); }
}

/* ---- 全螢幕效果 -------------------------------------------- */
#vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 50; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 46%, rgba(160,10,0,0.55) 100%);
  transition: opacity 0.5s;
}
#vignette.pulse { animation: vigPulse 0.5s ease-out; }
@keyframes vigPulse { 0% { opacity: 1; } 100% { opacity: 0; } }
#flash-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 51; opacity: 0; background: #fff;
}
#screen-fade {
  position: fixed; inset: -2px; z-index: 120; background: #000; opacity: 1;
  transition: opacity 0.6s ease; pointer-events: none;
}
#screen-fade.blocking { pointer-events: auto; }
#background-battle-scrim {
  position: absolute;
  inset: -4px;
  z-index: 1080;
  pointer-events: none;
  opacity: 0;
  background: rgba(5, 8, 13, 0.58);
  transition: opacity 0.24s ease;
}
#background-battle-message {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1450;
  pointer-events: none;
  display: none;
  min-width: 250px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 2px solid rgba(255, 225, 126, 0.68);
  border-radius: 999px;
  background: rgba(10, 15, 24, 0.72);
  color: #ffe88f;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 214, 88, 0.36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 18px rgba(0,0,0,0.42);
  animation: backgroundBattleBlink 2.4s ease-in-out infinite;
}
#viewport.background-return-active #background-battle-scrim {
  opacity: 1;
}
#viewport.background-return-active #background-battle-message {
  display: flex;
}
@keyframes backgroundBattleBlink {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 1; }
}
#fx-canvas { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* 死亡去飽和 */
#shake-root.defeat-gray { filter: grayscale(0.9) brightness(0.55); transition: filter 2.2s ease; }

/* ---- 覆蓋層（牌堆檢視 / 獎勵 / 標題 / 死亡） ------------------ */
#overlay-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.lobby-layer {
  position: fixed;
  inset: -2px;
  z-index: 1100;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  padding: 0 0 160px;
  pointer-events: auto;
  background: transparent;
}
.lobby-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../assets/ui/lobby/lobby_ruins_tower_bg.png') center / cover no-repeat, #080d15;
}
.lobby-layer.background-battle::before {
  display: none;
}
.lobby-layer.show { display: flex; }
.lobby-layer.intro-entering .lobby-panel {
  opacity: 0;
  transform: scale(0.985);
  animation: lobbyTitlePanelIn 0.42s 0.5s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}
.lobby-layer.intro-entering .lobby-nav-btn {
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  animation: lobbyTitleNavIn 0.34s cubic-bezier(0.2, 1.25, 0.35, 1) forwards;
}
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(1) { animation-delay: 0.5s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(2) { animation-delay: 0.65s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(3) { animation-delay: 0.8s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(4) { animation-delay: 0.95s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(5) { animation-delay: 1.1s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(6) { animation-delay: 1.25s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(7) { animation-delay: 1.4s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(8) { animation-delay: 1.55s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(9) { animation-delay: 1.7s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(10) { animation-delay: 1.85s; }
.lobby-layer.intro-entering .lobby-nav-btn:nth-child(11) { animation-delay: 2s; }
@keyframes lobbyTitlePanelIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes lobbyTitleNavIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.lobby-pop-in {
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  transform-origin: center;
  animation: lobbyItemPopIn 0.34s cubic-bezier(0.2, 1.25, 0.35, 1) forwards;
  animation-delay: var(--pop-delay, 0ms);
}
@keyframes lobbyItemPopIn {
  0% { opacity: 0; transform: translateY(18px) scale(0.9); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lobby-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  color: #fff;
  border: 0;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  z-index: 1;
}
.lobby-page-title,
.lobby-tab-content {
  position: relative;
  z-index: 1;
}
.lobby-page-title {
  display: none;
  margin: 0 0 16px;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 38px;
  font-weight: 900;
  text-align: left;
  letter-spacing: 5px;
  text-shadow: 0 3px 0 #101018, 0 0 18px rgba(255, 214, 120, 0.28);
}
.lobby-tab-content {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.lobby-tab-content.lobby {
  padding: 0;
}
.lobby-section-title {
  display: none;
  margin-bottom: 18px;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 30px; font-weight: 900;
  color: #fff3bf;
  text-align: center;
  text-shadow: 0 3px 0 #101018;
}
.lobby-section-title.visible {
  display: block;
}
.lobby-section-title.with-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0 0 12px;
  text-align: left;
}
.lobby-section-title.with-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
}
.lobby-card-rule-note {
  margin: 4px 12px 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 226, 142, 0.28);
  border-radius: 5px;
  color: #d9e7f4;
  background: rgba(5, 9, 16, 0.42);
  font-size: 17px;
  line-height: 1.35;
  text-align: left;
}
.lobby-field {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 22px;
}
.lobby-field input {
  height: 44px;
  min-width: 0;
  padding: 0 12px;
  border: 2px solid #6f849a;
  outline: none;
  background: #101828;
  color: #fff;
  font: inherit;
}
.lobby-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  color: #f1e6c8;
  font-size: 21px;
  text-align: left;
}
.lobby-check input {
  width: 24px;
  height: 24px;
  accent-color: #21bdf2;
}
.lobby-check.compact {
  justify-content: flex-start;
}
.lobby-row {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.lobby-row .btn-text {
  margin-top: 0;
  width: auto;
  min-width: 170px;
}
.lobby-status {
  min-height: 28px;
  margin-top: 16px;
  color: #ffd76a;
  font-size: 18px;
  text-align: center;
}
.lobby-home-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 0;
  overflow: visible;
  padding: 18px;
  border: 0;
  background: transparent;
}
.lobby-home-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
}
.lobby-home-shell > *:not(.lobby-home-bg) {
  position: relative;
  z-index: 1;
}
.lobby-home-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(500px, 560px) minmax(390px, 460px) minmax(520px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: clamp(150px, 14vw, 210px);
}
.lobby-player-header {
  display: grid;
  grid-template-columns: minmax(304px, 342px) minmax(390px, 460px);
  gap: 10px;
  align-items: center;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.lobby-avatar-button {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: end center;
  padding: 0;
  border: 3px solid rgba(230, 198, 123, 0.82);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 72%, rgba(255, 216, 121, 0.3), transparent 42%),
    linear-gradient(180deg, rgba(36, 24, 37, 0.92), rgba(8, 13, 21, 0.95));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.18), 0 8px 18px rgba(0,0,0,0.42);
  cursor: pointer;
}
.lobby-avatar-button:hover,
.lobby-avatar-button:focus-visible {
  filter: brightness(1.12);
  outline: 3px solid rgba(255, 223, 129, 0.8);
  outline-offset: 2px;
}
.lobby-avatar-img {
  height: 96px;
  width: auto;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translateY(8px);
  user-select: none;
  -webkit-user-drag: none;
}
.lobby-player-progress {
  min-height: 126px;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  grid-template-rows: 34px auto 12px auto;
  grid-template-areas:
    "avatar name"
    "avatar label"
    "avatar track"
    "avatar coin";
  gap: 7px;
  padding: 7px 10px;
  border: 2px solid rgba(218, 190, 116, 0.62);
  border-radius: 7px;
  background: rgba(10, 16, 26, 0.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 5px 12px rgba(0,0,0,0.24);
}
.lobby-player-progress .lobby-avatar-button {
  grid-area: avatar;
  align-self: center;
  justify-self: center;
}
.lobby-player-progress #lobby-name {
  grid-area: name;
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid rgba(166, 191, 214, 0.68);
  border-radius: 4px;
  outline: none;
  background: #000;
  color: #fff8e8;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  user-select: text;
  -webkit-user-select: text;
}
.lobby-player-progress #lobby-name:focus {
  border-color: rgba(255, 216, 138, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 216, 138, 0.2);
}
.lobby-player-progress .progress-label {
  grid-area: label;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #ffe99a;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
}
.lobby-player-progress .progress-track {
  grid-area: track;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(255, 231, 150, 0.42);
  background: #101623;
}
.lobby-player-progress .progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6f99, #ffd45d);
  box-shadow: 0 0 10px rgba(255, 190, 89, 0.44);
}
.lobby-coin-row {
  grid-area: coin;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: #ffe38a;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
}
#lobby-coin-icon {
  width: 26px;
  height: 26px;
  display: inline-block;
  background: url('../assets/ui/lobby/coin_icon.png') center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.55));
}
.lobby-home-top .lobby-field {
  margin-bottom: 0;
}
.lobby-player-name-field {
  grid-template-columns: 112px minmax(150px, 1fr);
}
.lobby-player-name-field input {
  width: 100%;
  max-width: 320px;
}
.lobby-home-stats {
  min-height: 126px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 10px 12px;
  border: 2px solid rgba(218, 190, 116, 0.56);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(17, 23, 35, 0.88), rgba(7, 11, 18, 0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 5px 12px rgba(0,0,0,0.22);
}
.lobby-home-stats .lobby-stat-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 0 10px;
  overflow: hidden;
  border-right: 1px solid rgba(222, 202, 142, 0.28);
  background: transparent;
  color: #dcecff;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
}
.lobby-home-stats .lobby-stat-card > span:not(.lobby-stat-icon) {
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: clip;
}
.lobby-home-stats .lobby-stat-card:last-child {
  border-right: 0;
}
.lobby-stat-icon {
  grid-row: 1 / span 2;
  width: 78px;
  height: 78px;
  display: block;
  background: center / 116% 116% no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.58));
}
.lobby-stat-icon.online { background-image: url('../assets/ui/lobby/lobby-online-count-ai.png'); }
.lobby-stat-icon.open-room { background-image: url('../assets/ui/lobby/lobby-open-room-ai.png'); }
.lobby-stat-icon.host-load { background-image: url('../assets/ui/lobby/lobby-host-load-icon.svg'); }
.lobby-home-stats strong {
  grid-column: 2;
  color: #ffea92;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 3px 0 #000, 0 0 9px rgba(255, 216, 112, 0.22);
  min-width: 0;
}
.lobby-home-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: block;
  width: clamp(430px, 28vw, 560px);
  height: auto;
  max-height: clamp(118px, 10.75vw, 170px);
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.56)) drop-shadow(0 0 14px rgba(255, 190, 106, 0.22));
}
.lobby-home-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(132px, 168px));
  align-items: center;
  gap: 14px;
  position: relative;
  grid-column: 3;
  justify-self: end;
  margin-left: auto;
  z-index: 2;
}
.lobby-home-actions .btn-text {
  width: 100%;
  min-width: 0;
  margin: 0;
}
.lobby-home-actions .btn-text.icon {
  min-width: 0;
  padding: 0 12px;
}
.lobby-action-card {
  height: 130px;
  display: grid;
  grid-template-rows: 70px auto;
  place-items: center;
  gap: 3px;
  padding: 9px 10px 8px;
  border-radius: 8px;
  line-height: 1.05;
  background: linear-gradient(180deg, #682339 0%, #341928 100%);
  border-color: rgba(255, 198, 180, 0.82);
}
.lobby-action-card.compact {
  grid-template-rows: 68px auto;
}
.lobby-action-card.join {
  background: linear-gradient(180deg, #1d456d 0%, #112235 100%);
  border-color: rgba(188, 229, 255, 0.82);
}
.lobby-action-card.settings {
  background: linear-gradient(180deg, #302b36 0%, #171922 100%);
  border-color: rgba(216, 203, 185, 0.75);
}
.lobby-action-icon {
  max-width: 70px;
  max-height: 70px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.45));
}
.lobby-home-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 18px;
  min-height: 0;
  margin-bottom: -34.5px;
}
.lobby-home-shell > .lobby-status {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 3;
  min-height: 0;
  margin: 0;
  padding: 4px 14px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: rgba(5, 9, 16, 0.72);
  pointer-events: none;
}
.lobby-room-list-panel,
.lobby-chat-panel {
  min-height: 0;
  padding: 14px;
  border: 2px solid rgba(224, 235, 246, 0.42);
  background: rgba(8, 12, 20, 0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.lobby-room-list-panel header,
.lobby-chat-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #bcd5e8;
}
.lobby-room-list-panel header strong,
.lobby-chat-panel header strong {
  font-size: 25px;
  color: #fff3bf;
  text-shadow: 0 2px 0 #000;
}
.btn-text.slim {
  width: auto;
  min-width: 82px;
  height: 38px;
  margin: 0;
  padding: 0 12px;
  font-size: 17px;
}
.lobby-room-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  height: calc(100% - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px 6px 6px 3px;
}
.lobby-room-row {
  min-height: 104px;
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  gap: 4px;
  padding: 6px 8px;
  border: 3px solid #74623b;
  border-radius: 6px;
  background: linear-gradient(180deg, #e2c47b 0%, #8f7a46 58%, #3e3526 100%);
  color: #fff4d0;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 19px;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.44),
    inset 0 -3px 0 rgba(58, 46, 26, 0.48),
    0 3px 0 #241f17,
    0 8px 16px rgba(0, 0, 0, 0.34);
}
.lobby-room-row.unjoinable {
  filter: grayscale(0.28) brightness(0.78);
}
.lobby-room-row:hover,
.lobby-room-row:focus-visible {
  filter: brightness(1.08);
  outline: 3px solid rgba(255, 238, 113, 0.88);
  outline-offset: 2px;
}
.room-card-top {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) minmax(148px, 178px);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lobby-room-row .room-id {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #8a7445;
  border-radius: 4px;
  background: linear-gradient(180deg, #2b2418, #15110d);
  color: #ffe16a;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
}
.lobby-room-row .room-name {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 2px solid #74623b;
  border-radius: 4px;
  background: linear-gradient(180deg, #5a4930, #2c261c);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 2px 0 #17120c;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-card-bottom {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) 82px 112px 76px 48px;
  align-items: center;
  align-self: start;
  gap: 8px;
}
.room-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.room-map,
.room-difficulty {
  min-width: 0;
  padding: 2px 7px 3px;
  border: 1px solid rgba(255, 232, 154, 0.44);
  border-radius: 4px;
  background: rgba(31, 24, 16, 0.54);
  color: #fff4c4;
  font-size: 14px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-difficulty.difficulty-normal {
  border-color: rgba(208, 231, 216, 0.82);
  background: linear-gradient(180deg, rgba(58, 104, 79, 0.92), rgba(28, 57, 42, 0.92));
  color: #d8ffe2;
}
.room-difficulty.difficulty-hard {
  border-color: rgba(255, 191, 111, 0.86);
  background: linear-gradient(180deg, rgba(141, 75, 31, 0.94), rgba(74, 35, 21, 0.94));
  color: #ffe0a3;
}
.room-difficulty.difficulty-nightmare {
  border-color: rgba(235, 137, 245, 0.88);
  background: linear-gradient(180deg, rgba(105, 42, 119, 0.95), rgba(53, 22, 74, 0.95));
  color: #ffd0ff;
}
.room-difficulty.difficulty-torment {
  border-color: rgba(255, 126, 130, 0.9);
  background: linear-gradient(180deg, rgba(131, 42, 51, 0.95), rgba(68, 21, 31, 0.95));
  color: #ffd4d4;
}
.room-status-main {
  align-self: center;
  color: #fff36b;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow:
    0 3px 0 #7b2b13,
    2px 0 0 #7b2b13,
    -2px 0 0 #7b2b13,
    0 -2px 0 #7b2b13;
}
.lobby-room-row .room-count,
.room-card-lock,
.room-full-start {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #74623b;
  border-radius: 4px;
  background: linear-gradient(180deg, #e7c979, #8f7945 58%, #4b3f2d);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 #2a2218;
}
.lobby-room-row .room-count {
  gap: 4px;
  min-width: 112px;
}
.room-count-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.65));
}
.room-count-icon::before,
.room-count-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff0bd;
  filter: drop-shadow(0 1px 0 #4e301a);
}
.room-count-icon::before {
  clip-path: polygon(41% 5%, 59% 5%, 67% 14%, 67% 27%, 61% 34%, 69% 40%, 77% 54%, 77% 89%, 23% 89%, 23% 54%, 31% 40%, 39% 34%, 33% 27%, 33% 14%);
}
.room-count-icon::after {
  opacity: 0.88;
  clip-path: polygon(12% 19%, 26% 19%, 31% 27%, 31% 38%, 26% 43%, 34% 49%, 40% 62%, 40% 88%, 5% 88%, 5% 58%, 10% 47%, 19% 42%, 12% 36%, 7% 31%, 7% 25%, 12% 19%, 74% 19%, 88% 19%, 93% 25%, 93% 31%, 88% 36%, 81% 42%, 90% 47%, 95% 58%, 95% 88%, 60% 88%, 60% 62%, 66% 49%, 74% 43%, 69% 38%, 69% 27%, 74% 19%);
}
.room-card-lock {
  color: #fff7c0;
}
.room-full-start {
  font-size: 16px;
  cursor: help;
}
.room-players-btn {
  width: 38px;
  height: 34px;
  border-radius: 5px;
  border: 2px solid #74623b;
  background: linear-gradient(180deg, #fce9a8, #b98b49);
  color: #263024;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 0 rgba(50,40,24,0.62);
}
.room-players-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin: 2px auto 0;
}
.room-players-icon::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f3926;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.42);
}
.room-players-icon::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 13px;
  width: 16px;
  height: 9px;
  border-radius: 9px 9px 4px 4px;
  background: #20394f;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.28);
}
.room-players-btn:hover { filter: brightness(1.2); }
.lobby-room-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: #8797a8;
  font-size: 21px;
}
.lobby-chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
#lobby-chat-log {
  height: auto;
  min-height: 0;
}
.lobby-field.compact {
  grid-template-columns: 112px minmax(0, 1fr);
  margin: 12px 0 0;
  text-align: left;
}
.lobby-field select {
  height: 44px;
  min-width: 0;
  padding: 0 12px;
  border: 2px solid #6f849a;
  outline: none;
  background: #101828;
  color: #fff;
  font: inherit;
}
.create-room-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 2px;
}
.create-room-mode-button {
  height: 48px;
  border: 2px solid rgba(130, 154, 178, 0.72);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(32, 44, 64, 0.98), rgba(12, 18, 29, 0.98));
  color: #fff3bf;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 0 rgba(0,0,0,0.42);
}
.create-room-mode-button.selected {
  border-color: rgba(255, 216, 138, 0.95);
  background: linear-gradient(180deg, rgba(112, 47, 76, 0.98), rgba(51, 22, 38, 0.98));
  box-shadow: 0 0 0 2px rgba(255, 216, 138, 0.18), inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 0 rgba(0,0,0,0.42);
}
.create-room-mode-button:hover {
  filter: brightness(1.1);
}
.custom-select-field {
  overflow: visible;
}
.custom-select {
  position: relative;
  min-width: 0;
  height: 44px;
  z-index: 1;
}
.custom-select.open {
  z-index: 2147482990;
}
.custom-select-button {
  width: 100%;
  height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 2px solid #6f849a;
  border-radius: 5px;
  outline: none;
  background: linear-gradient(180deg, rgba(20, 31, 47, 0.98), rgba(8, 14, 24, 0.98));
  color: #fff7dc;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 0 rgba(0,0,0,0.42);
}
.custom-select-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-button i {
  width: 0;
  height: 0;
  justify-self: center;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid #ffd985;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.7));
}
.custom-select.open .custom-select-button {
  border-color: rgba(255, 216, 138, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 216, 138, 0.2), inset 0 1px 0 rgba(255,255,255,0.12);
}
.custom-select-options {
  position: absolute;
  z-index: 2147483000;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: none;
  gap: 4px;
  padding: 6px;
  border: 2px solid rgba(255, 216, 138, 0.72);
  border-radius: 7px;
  background: rgba(8, 13, 21, 0.98);
  box-shadow: 0 12px 24px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.12);
}
.custom-select.open .custom-select-options {
  display: grid;
}
.custom-select-option {
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(123, 145, 167, 0.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(31, 45, 66, 0.96), rgba(16, 24, 36, 0.96));
  color: #f9edca;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.custom-select-option:hover,
.custom-select-option.selected {
  border-color: rgba(255, 216, 138, 0.9);
  background: linear-gradient(180deg, rgba(94, 51, 66, 0.98), rgba(42, 22, 34, 0.98));
  color: #fff8e6;
}
.lobby-map-preview {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 16 / 9;
  margin: 8px auto 14px;
  overflow: hidden;
  border: 2px solid rgba(236, 208, 136, 0.72);
  border-radius: 8px;
  background: rgba(4, 8, 14, 0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 18px rgba(0,0,0,0.38);
}
.lobby-map-preview-locked {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(3, 5, 10, 0.58);
  color: #ffe48f;
  font-size: 34px;
  font-weight: 900;
  text-shadow: 0 3px 0 #000, 0 0 12px rgba(255, 95, 160, 0.55);
  letter-spacing: 4px;
}
.lobby-map-preview.locked .lobby-map-preview-locked {
  display: grid;
}
.lobby-map-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
}
.lobby-avatar-select-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 16px;
  width: min(560px, calc(100vw - 90px));
  max-height: min(46vh, 360px);
  overflow-y: auto;
  padding: 8px 8px 12px;
}
.lobby-avatar-choice-chip {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: #fff3c4;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
  cursor: pointer;
}
.avatar-choice-circle {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid rgba(230, 198, 123, 0.82);
  background:
    radial-gradient(circle at 50% 72%, rgba(255, 216, 121, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(36, 24, 37, 0.96), rgba(8, 13, 21, 0.96));
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.16), 0 5px 10px rgba(0,0,0,0.38);
}
.avatar-choice-circle img {
  height: 82px;
  width: auto;
  image-rendering: pixelated;
  transform: translateY(8px);
  user-select: none;
  -webkit-user-drag: none;
}
.lobby-avatar-choice-chip:hover .avatar-choice-circle,
.lobby-avatar-choice-chip:focus-visible .avatar-choice-circle,
.lobby-avatar-choice-chip.selected .avatar-choice-circle {
  border-color: rgba(255, 231, 111, 0.96);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.18), 0 0 0 4px rgba(255, 216, 95, 0.28), 0 0 20px rgba(255, 205, 92, 0.22);
  filter: brightness(1.12);
}
.lobby-dialog .tutorial-step {
  min-width: min(520px, calc(100vw - 64px));
}
.lobby-dialog {
  z-index: 120;
}
.lobby-dialog-body {
  margin: 12px 0 6px;
}
.lobby-room-player {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  color: #f0e7d0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 20px;
}
.lobby-room-player span { color: #ffd76a; }
.lobby-card-list,
.lobby-talent-list,
.lobby-settings,
.lobby-tutorial,
.lobby-chip-list {
  display: grid;
  gap: 10px;
}
.lobby-card-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}
.lobby-card-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: 38px 1fr 48px 58px;
  align-items: center;
  gap: 8px;
  border: 2px solid rgba(220, 230, 245, 0.42);
  background: linear-gradient(180deg, rgba(28, 42, 60, 0.95), rgba(12, 18, 30, 0.96));
  color: #fff;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
}
.lobby-card-row:hover,
.lobby-talent:hover {
  filter: brightness(1.12);
}
.lobby-card-cost {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #121722;
  border: 2px solid rgba(255, 225, 140, 0.7);
  color: #ffe18c;
}
.lobby-card-count,
.lobby-card-type {
  color: #cde8ff;
  text-align: center;
}
.lobby-combine {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 12px;
}
.lobby-combine select {
  height: 46px;
  padding: 0 10px;
  border: 2px solid #6f849a;
  background: #101828;
  color: #fff;
  font: inherit;
}
.lobby-hint {
  margin: 16px 0 12px;
  min-height: 28px;
  color: #ffd76a;
  font-size: 18px;
  text-align: center;
}
.lobby-chip-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lobby-chip {
  padding: 8px 10px;
  border: 1px solid rgba(255, 220, 140, 0.45);
  background: rgba(18, 24, 36, 0.82);
  color: #fff3bf;
  text-align: center;
}
.lobby-talent {
  min-height: 74px;
  padding: 12px 16px;
  border: 2px solid rgba(220, 230, 245, 0.42);
  background: linear-gradient(180deg, rgba(29, 35, 54, 0.95), rgba(13, 17, 29, 0.96));
  color: #fff;
  font-family: 'Cubic 11', '俐方體11號', serif;
  text-align: left;
  cursor: pointer;
}
.lobby-talent strong {
  display: block;
  margin-bottom: 6px;
  color: #fff3bf;
  font-size: 21px;
}
.lobby-talent span {
  color: #cfe0f2;
  font-size: 16px;
}
.lobby-talent.selected {
  border-color: #7cff86;
  box-shadow: 0 0 16px rgba(124,255,134,0.24);
}
.lobby-settings {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin: 0 auto;
}
.lobby-tutorial {
  color: #e7edf6;
  font-size: 20px;
  line-height: 1.65;
}
.lobby-tutorial p {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid rgba(255, 215, 106, 0.7);
  background: rgba(8, 12, 20, 0.46);
}
.lobby-card-split,
.lobby-synthesis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  height: calc(100% - 104px);
  min-height: 0;
}
.lobby-synthesis-layout {
  height: calc(100% - 64px);
}
.lobby-card-column {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  border: 2px solid rgba(224, 235, 246, 0.42);
  background: rgba(8, 12, 20, 0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.lobby-card-column header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 18px;
  color: #bcd5e8;
}
.lobby-card-column header strong {
  font-size: 25px;
  color: #fff3bf;
  text-shadow: 0 2px 0 #000;
}
.lobby-card-column header small {
  flex: 1;
  color: #d9e7f4;
  font-size: 14px;
  line-height: 1.35;
  text-align: right;
}
#equipped-summary .summary-bad {
  color: #ff6868;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 68, 68, 0.45);
}
.lobby-tab-content.settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.lobby-tab-content.settings .lobby-section-title {
  margin-bottom: 0;
  padding-top: 0;
}
.lobby-tab-content.settings .lobby-settings {
  align-self: center;
}
.lobby-card-scroll {
  display: block;
  height: calc(100% - 42px);
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 6px 14px;
}
.lobby-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-content: start;
  gap: 18px;
  min-height: 76px;
  padding: 8px 4px 18px;
  border-radius: 6px;
}
.lobby-card-group + .lobby-card-group {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 231, 165, 0.24);
}
.lobby-card-group-title {
  grid-column: 1 / -1;
  color: #ffe28d;
  font-size: 17px;
  text-shadow: 0 2px 0 #000;
}
.lobby-card-column .card {
  --lobby-card-reflow-x: 0px;
  --lobby-card-reflow-y: 0px;
  --lobby-card-reflow-scale: 1;
  --lobby-card-hover-transform: scale(1) translateY(0);
  position: relative;
  left: auto;
  top: auto;
  width: 154px;
  height: 231px;
  margin: 0 auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate3d(var(--lobby-card-reflow-x), var(--lobby-card-reflow-y), 0)
    scale(var(--lobby-card-reflow-scale))
    var(--lobby-card-hover-transform);
  transition: transform 0.14s cubic-bezier(0.3, 1.4, 0.5, 1), filter 0.14s;
}
.lobby-card-column .card:hover {
  --lobby-card-hover-transform: scale(1.08) translateY(-5px);
  filter: drop-shadow(0 0 16px rgba(124,225,255,0.28));
  z-index: 2;
}
.lobby-card-column .card.dragging {
  opacity: 0.45;
  --lobby-card-hover-transform: scale(0.96);
}
.lobby-card-column .card.lobby-card-pointer-source {
  opacity: 0.22;
  pointer-events: none;
}
.lobby-card-column .card.lobby-card-pointer-source.dragging {
  display: none;
}
.card.lobby-card-pointer-source {
  opacity: 0.22;
  pointer-events: none;
}
.card.lobby-card-pointer-source.dragging {
  display: none !important;
}
.lobby-card-insert-placeholder {
  --lobby-card-reflow-x: 0px;
  --lobby-card-reflow-y: 0px;
  --lobby-card-reflow-scale: 1;
  width: var(--lobby-card-placeholder-width, 154px);
  height: var(--lobby-card-placeholder-height, 231px);
  margin: 0 auto;
  border: 0;
  background: transparent;
  pointer-events: none;
  transform: translate3d(var(--lobby-card-reflow-x), var(--lobby-card-reflow-y), 0)
    scale(var(--lobby-card-reflow-scale));
}
.lobby-card-drag-ghost {
  --lobby-card-hover-transform: scale(1) translateY(0);
  --lobby-card-reflow-x: 0px;
  --lobby-card-reflow-y: 0px;
  --lobby-card-reflow-scale: 1;
  position: absolute !important;
  left: 0;
  top: 0;
  width: var(--lobby-card-ghost-width, 154px) !important;
  height: var(--lobby-card-ghost-height, 231px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 99999;
  pointer-events: none;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
}
.lobby-card-drag-ghost .card-v8-inner {
  width: 100%;
  height: 100%;
}
.lobby-card-drag-ghost,
.lobby-card-drag-ghost:hover {
  --lobby-card-hover-transform: scale(1) translateY(0);
}
.card-weight-badge {
  position: absolute;
  right: 10px;
  top: 45.5%;
  z-index: 5;
  width: 34px;
  height: 32px;
  pointer-events: none;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.72));
}
.card-weight-icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding-top: 4px;
  color: #fff6c8;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 #000, 1px 0 0 #000, -1px 0 0 #000;
}
.card-weight-icon::before {
  content: '';
  position: absolute;
  inset: 5px 3px 1px;
  z-index: -1;
  clip-path: polygon(31% 0, 69% 0, 82% 25%, 100% 100%, 0 100%, 18% 25%);
  border: 2px solid rgba(255, 236, 166, 0.95);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.26), transparent 32%),
    linear-gradient(180deg, #8b8792 0%, #4d5362 42%, #202735 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.22), inset 0 -2px 0 rgba(0,0,0,0.42);
}
.card-weight-icon::after {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  width: 12px;
  height: 10px;
  border: 3px solid rgba(255, 236, 166, 0.95);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  z-index: -1;
}
.lobby-card-column .card.lobby-card-reflowing,
.lobby-card-insert-placeholder.lobby-card-reflowing {
  transition: transform 0.46s cubic-bezier(0.18, 1.35, 0.24, 1) !important;
  will-change: transform;
}
.card-display-item.character-card .card-v8-effect {
  top: 67.0572917%;
  height: 19.2057292%;
  padding: 2.2% 3.2% 0;
  font-size: 15.5px;
  line-height: 1.14;
}
.card-display-item.character-card .card-v8-effect.fit-three-line {
  font-size: 14px;
  line-height: 1.08;
}
.card-display-item.character-card .card-v8-effect.fit-small {
  font-size: 14.5px;
  line-height: 1.11;
}
.card-display-item.character-card .card-v8-effect.fit-tiny {
  font-size: 13px;
  line-height: 1.05;
}
.lobby-column-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: #8797a8;
  font-size: 20px;
  min-height: 120px;
  display: flex;
  align-items: center;
}
.lobby-hint.ok { color: #9fffaa; }
.lobby-hint.bad { color: #ff9b91; }
.lobby-synth-grid {
  display: grid;
  grid-template-columns: repeat(5, 154px);
  justify-content: center;
  align-content: start;
  gap: 14px;
}
.lobby-synth-slot {
  width: 154px;
  height: 231px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(225, 236, 244, 0.52);
  background: rgba(12, 18, 30, 0.7);
  color: #e9f4ff;
  font-family: 'Cubic 11', '俐方體11號', serif;
  cursor: pointer;
  overflow: visible;
}
.lobby-synth-slot:hover {
  filter: brightness(1.12);
  border-color: rgba(255, 216, 112, 0.82);
}
.lobby-synth-slot .card {
  pointer-events: none;
}
.lobby-synth-slot strong,
.lobby-synth-slot span {
  display: block;
  line-height: 1.35;
}
.lobby-synth-slot strong {
  color: #fff3bf;
  font-size: 18px;
}
.lobby-synth-slot span {
  color: #cde8ff;
  font-size: 15px;
}
.lobby-synth-odds {
  margin-top: 12px;
  padding: 12px 14px;
  min-height: 102px;
  color: #e7edf6;
  background: rgba(5, 8, 14, 0.56);
  border: 1px solid rgba(218, 230, 242, 0.28);
  font-size: 18px;
  line-height: 1.5;
}
.lobby-synth-odds strong {
  display: block;
  margin-bottom: 4px;
  color: #fff3bf;
}
.lobby-synth-odds span { color: #ffd76a; }
.synth-roulette {
  position: absolute;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.64);
  pointer-events: auto;
}
.synth-roulette-panel {
  width: min(1120px, calc(100vw - 96px));
  padding: 24px 34px 30px;
  border: 3px solid rgba(245, 230, 180, 0.78);
  background: linear-gradient(180deg, rgba(31, 40, 58, 0.98), rgba(10, 14, 24, 0.98));
  color: #f5ead2;
  text-align: center;
  box-shadow: 0 22px 72px rgba(0,0,0,0.75);
}
.synth-roulette-panel > strong {
  display: block;
  margin-bottom: 14px;
  color: #fff3bf;
  font-size: 34px;
  text-shadow: 0 3px 0 #000;
}
.synth-roulette-window {
  position: relative;
  height: 520px;
  overflow: hidden;
  border: 0;
  background: transparent;
}
.synth-roulette-track {
  position: absolute;
  left: 0;
  top: 118px;
  display: flex;
  gap: 18px;
  transform: translateX(120px);
  will-change: transform;
}
.synth-roulette-track.spinning {
  transition: none;
}
.synth-roulette-card {
  position: relative;
  flex: 0 0 216px;
  width: 216px;
  height: 324px;
  background: transparent;
}
.synth-roulette-card .card {
  position: relative;
  left: auto;
  top: auto;
  width: 216px;
  height: 324px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.synth-roulette-card .card::before,
.synth-roulette-card .card::after,
.synth-roulette-card .card-inner::before,
.synth-roulette-card .card-inner::after {
  display: none;
}
.synth-roulette-card .card-v8-inner {
  filter: none;
}
.synth-roulette-card.synth-result-card {
  z-index: 8;
}
.synth-roulette-card.synth-result-card::before,
.synth-roulette-card.synth-result-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.synth-roulette-card.synth-result-card::before {
  inset: -18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--synth-glow-rgb), var(--synth-glow-core, 0.46)) 0%, rgba(var(--synth-glow-rgb), var(--synth-glow-alpha, 0.28)) 38%, rgba(var(--synth-glow-rgb), 0) 72%);
  filter: blur(var(--synth-glow-blur, 10px));
  animation: synthResultPulse var(--synth-glow-speed, 1.55s) ease-in-out infinite;
}
.synth-roulette-card.synth-result-card::after {
  inset: -26px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,var(--synth-spark-alpha,0.12)) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 34%, rgba(255,255,255,var(--synth-spark-alpha,0.12)) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 78%, rgba(255,255,255,var(--synth-spark-alpha,0.12)) 0 2px, transparent 3px),
    conic-gradient(from 0deg, rgba(var(--synth-glow-rgb), 0), rgba(var(--synth-glow-rgb), var(--synth-ring-alpha, 0.12)), rgba(var(--synth-glow-rgb), 0) 32%);
  mix-blend-mode: screen;
  opacity: var(--synth-spark-opacity, 0.8);
  animation: synthResultSpark var(--synth-spark-speed, 2.2s) linear infinite;
}
.synth-roulette-card.synth-result-card .card-v8-inner {
  animation: synthResultCardLift 1.4s ease-in-out infinite;
}
.synth-result-gray {
  --synth-glow-rgb: 210, 225, 235;
  --synth-glow-core: 0.24;
  --synth-glow-alpha: 0.13;
  --synth-ring-alpha: 0.04;
  --synth-spark-alpha: 0.05;
  --synth-spark-opacity: 0.45;
  --synth-glow-blur: 8px;
}
.synth-result-gray .card-v8-inner {
  filter: drop-shadow(0 0 10px rgba(210,225,235,0.45));
}
.synth-result-green {
  --synth-glow-rgb: 108, 239, 146;
  --synth-glow-core: 0.34;
  --synth-glow-alpha: 0.2;
  --synth-ring-alpha: 0.08;
  --synth-spark-alpha: 0.09;
  --synth-spark-opacity: 0.58;
  --synth-glow-blur: 10px;
}
.synth-result-green .card-v8-inner {
  filter: drop-shadow(0 0 12px rgba(108,239,146,0.58)) drop-shadow(0 0 20px rgba(108,239,146,0.24));
}
.synth-result-blue {
  --synth-glow-rgb: 94, 202, 255;
  --synth-glow-core: 0.44;
  --synth-glow-alpha: 0.27;
  --synth-ring-alpha: 0.13;
  --synth-spark-alpha: 0.14;
  --synth-spark-opacity: 0.72;
  --synth-glow-blur: 12px;
}
.synth-result-blue .card-v8-inner {
  filter: drop-shadow(0 0 14px rgba(94,202,255,0.72)) drop-shadow(0 0 28px rgba(94,202,255,0.32));
}
.synth-result-purple {
  --synth-glow-rgb: 190, 104, 255;
  --synth-glow-core: 0.56;
  --synth-glow-alpha: 0.36;
  --synth-ring-alpha: 0.18;
  --synth-spark-alpha: 0.2;
  --synth-spark-opacity: 0.86;
  --synth-glow-blur: 14px;
  --synth-spark-speed: 1.8s;
}
.synth-result-purple .card-v8-inner {
  filter: drop-shadow(0 0 16px rgba(190,104,255,0.86)) drop-shadow(0 0 36px rgba(190,104,255,0.4));
}
.synth-result-orange {
  --synth-glow-rgb: 255, 204, 86;
  --synth-glow-core: 0.7;
  --synth-glow-alpha: 0.48;
  --synth-ring-alpha: 0.26;
  --synth-spark-alpha: 0.28;
  --synth-spark-opacity: 1;
  --synth-glow-blur: 16px;
  --synth-glow-speed: 1.2s;
  --synth-spark-speed: 1.45s;
}
.synth-result-orange .card-v8-inner {
  filter: drop-shadow(0 0 18px rgba(255,213,93,0.98)) drop-shadow(0 0 42px rgba(255,145,48,0.55)) drop-shadow(0 0 70px rgba(255,80,48,0.24));
}
@keyframes synthResultPulse {
  50% { transform: scale(1.055); opacity: 0.72; }
}
@keyframes synthResultSpark {
  to { transform: rotate(360deg); }
}
@keyframes synthResultCardLift {
  50% { transform: translateY(-4px); }
}
.synth-roulette-marker {
  display: none;
  position: absolute;
  top: 116px;
  height: 330px;
  left: 50%;
  width: 222px;
  transform: translateX(-50%);
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
.synth-roulette-result {
  margin-top: 16px;
  min-height: 32px;
  color: #ffe08a;
  font-size: 22px;
  text-shadow: 0 2px 0 #000;
}
.synth-roulette-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
}
.synth-roulette-actions .btn-text {
  width: 170px;
  margin: 0;
  white-space: nowrap;
}
.synth-roulette-actions .btn-text.disabled,
.synth-roulette-actions .btn-text:disabled {
  filter: grayscale(0.85) brightness(0.65);
  cursor: default;
}
.talent-page {
  position: relative;
  height: 100%;
  min-height: 0;
  padding: 28px 34px 30px;
  border: 2px solid #9b7b43;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(64, 82, 108, 0.28), transparent 38%),
    radial-gradient(circle at 20% 76%, rgba(92, 54, 35, 0.18), transparent 34%),
    linear-gradient(180deg, #0d1825 0%, #07101b 58%, #050a12 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 223, 154, 0.11),
    inset 0 0 80px rgba(0, 0, 0, 0.54),
    0 22px 52px rgba(0, 0, 0, 0.48);
  overflow: hidden;
}
.talent-page::before {
  content: '';
  position: absolute;
  inset: 18px 22px;
  border: 1px solid rgba(220, 180, 107, 0.28);
  border-radius: 6px;
  pointer-events: none;
}
.talent-frame-corner {
  position: absolute;
  width: 74px;
  height: 74px;
  border-color: rgba(236, 197, 120, 0.78);
  pointer-events: none;
  z-index: 2;
}
.talent-frame-corner.tl { left: 14px; top: 14px; border-left: 2px solid; border-top: 2px solid; }
.talent-frame-corner.tr { right: 14px; top: 14px; border-right: 2px solid; border-top: 2px solid; }
.talent-frame-corner.bl { left: 14px; bottom: 14px; border-left: 2px solid; border-bottom: 2px solid; }
.talent-frame-corner.br { right: 14px; bottom: 14px; border-right: 2px solid; border-bottom: 2px solid; }
.talent-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 300px;
  align-items: center;
  gap: 22px;
  min-height: 92px;
}
.talent-compass {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(228, 184, 112, 0.72);
  border-radius: 999px;
  color: #ffe5a6;
  font-size: 50px;
  text-shadow: 0 0 16px rgba(255, 221, 132, 0.62), 0 3px 0 #000;
  background: radial-gradient(circle, rgba(41, 57, 76, 0.95), rgba(8, 15, 25, 0.95));
  box-shadow: inset 0 0 20px rgba(255, 212, 124, 0.12), 0 0 20px rgba(255, 192, 96, 0.16);
}
.talent-title-main {
  color: #f4dca0;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 8px;
  text-shadow: 0 3px 0 #05070c, 0 0 14px rgba(255, 218, 136, 0.32);
}
.talent-title-sub {
  margin-top: 6px;
  color: #b5a484;
  font-size: 18px;
  text-shadow: 0 2px 0 #000;
}
.talent-points-panel {
  justify-self: end;
  min-width: 280px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 2px solid rgba(177, 142, 82, 0.54);
  color: #dbc493;
  font-size: 22px;
  letter-spacing: 2px;
  background: linear-gradient(180deg, rgba(23, 32, 45, 0.88), rgba(7, 11, 18, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 234, 185, 0.12);
  text-shadow: 0 2px 0 #000;
}
.talent-points-panel span {
  color: #ffe18c;
  font-size: 30px;
}
.talent-tree-shell {
  position: relative;
  z-index: 1;
  height: calc(100% - 98px);
  min-height: 0;
  padding-top: 8px;
}
.talent-branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  height: 100%;
  padding: 8px 12px 8px;
}
.talent-branch-panel {
  position: relative;
  min-height: 0;
  border: 1px solid rgba(216, 181, 108, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(18, 28, 42, 0.44), rgba(5, 10, 18, 0.28)),
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.05), transparent 28%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}
.talent-branch-panel.offense {
  border-color: rgba(255, 129, 116, 0.36);
  background:
    radial-gradient(circle at 48% 16%, rgba(255, 92, 84, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(38, 20, 23, 0.48), rgba(8, 10, 18, 0.32));
}
.talent-branch-panel.defense {
  border-color: rgba(143, 193, 255, 0.38);
  background:
    radial-gradient(circle at 48% 16%, rgba(101, 157, 255, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(17, 27, 43, 0.5), rgba(7, 10, 18, 0.32));
}
.talent-branch-panel.utility {
  border-color: rgba(108, 237, 221, 0.36);
  background:
    radial-gradient(circle at 48% 16%, rgba(76, 224, 208, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(14, 36, 37, 0.48), rgba(7, 10, 18, 0.32));
}
.talent-branch-label {
  position: relative;
  z-index: 3;
  height: 50px;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 7px;
  text-shadow: 0 3px 0 #000, 0 0 12px currentColor;
  pointer-events: none;
}
.talent-branch-label.offense { color: #ff8e8e; }
.talent-branch-label.defense { color: #a9cfff; }
.talent-branch-label.utility { color: #89f0e6; }
.talent-tree {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  grid-template-rows: repeat(7, minmax(96px, 1fr));
  gap: 10px 16px;
  height: calc(100% - 50px);
  padding: 8px 22px 12px;
  border: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(141, 163, 190, 0.08), transparent 45%);
  overflow: auto;
  max-height: calc(100% - 50px);
}
.talent-summary {
  position: absolute;
  left: 50%;
  bottom: 4px;
  z-index: 3;
  transform: translateX(-50%);
  color: #d9c08c;
  font-size: 18px;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
.talent-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.talent-line {
  fill: none;
  stroke: #6f7d91;
  stroke-width: 5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.talent-line.open {
  stroke: #ffd96b;
  filter: drop-shadow(0 0 4px #ffdc78);
}
.talent-node {
  position: relative;
  z-index: 1;
  place-self: center;
  width: 72px;
  height: 72px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: 'Cubic 11', '俐方體11號', serif;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.talent-icon {
  width: 82px;
  height: 82px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.68));
}
.talent-level {
  position: absolute;
  right: -6px;
  bottom: -5px;
  min-width: 34px;
  padding: 2px 5px 3px;
  border-radius: 999px;
  border: 2px solid rgba(255, 236, 166, 0.78);
  background: rgba(11, 14, 24, 0.92);
  color: #fff3bf;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 2px 0 #000;
}
.talent-node.unlocked {
  filter: drop-shadow(0 0 12px rgba(124,255,134,0.32));
}
.talent-node.maxed {
  filter: drop-shadow(0 0 16px rgba(255,226,119,0.42));
}
.talent-node.insufficient {
  filter: drop-shadow(0 0 10px rgba(255, 214, 108, 0.26));
}
.talent-node.locked {
  filter: grayscale(0.82) brightness(0.58);
  cursor: not-allowed;
}
.settings-slider {
  display: grid;
  grid-template-columns: 80px 44px 1fr 58px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  color: #fff3bf;
  font-size: 22px;
  border: 2px solid rgba(220, 230, 245, 0.36);
  background: rgba(8, 12, 20, 0.58);
}
.settings-mute-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 236, 184, 0.58);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffe7a6, #c9813f 58%, #4b2a1a 100%);
  color: #fff;
  font: inherit;
  font-size: 23px;
  line-height: 1;
  text-shadow: 0 2px 0 #000;
  box-shadow: 0 3px 0 #24180f, 0 0 12px rgba(255, 188, 86, 0.26);
  cursor: pointer;
}
.settings-mute-button:hover {
  filter: brightness(1.1);
}
.settings-mute-button.muted {
  background: radial-gradient(circle at 35% 28%, #b8c0c8, #596474 62%, #232936 100%);
  opacity: 0.86;
}
.settings-slider input[type="range"] {
  width: 100%;
  height: 32px;
  accent-color: #ffb15c;
  cursor: pointer;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.settings-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 14px;
  border: 2px solid rgba(255, 236, 184, 0.62);
  border-radius: 999px;
  background: linear-gradient(180deg, #60482d, #1d2230);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.58), 0 2px 0 rgba(255,255,255,0.08);
}
.settings-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  border: 3px solid #fff1bf;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe6a0, #d98b43 58%, #6f3d23 100%);
  box-shadow: 0 3px 0 #24180f, 0 0 12px rgba(255, 188, 86, 0.45);
}
.settings-slider input[type="range"]::-moz-range-track {
  height: 14px;
  border: 2px solid rgba(255, 236, 184, 0.62);
  border-radius: 999px;
  background: linear-gradient(180deg, #60482d, #1d2230);
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.58), 0 2px 0 rgba(255,255,255,0.08);
}
.settings-slider input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border: 3px solid #fff1bf;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe6a0, #d98b43 58%, #6f3d23 100%);
  box-shadow: 0 3px 0 #24180f, 0 0 12px rgba(255, 188, 86, 0.45);
}
.tutorial-modal {
  z-index: 2147483005;
  display: flex;
  font-family: 'Cubic 11', '俐方體11號', serif;
}
.tutorial-modal.overlay-mode {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.42);
}
.tutorial-modal.guided {
  position: absolute;
  left: 0;
  right: 0;
  top: 82px;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}
.tutorial-step {
  width: min(560px, calc(100vw - 90px));
  padding: 28px 30px 24px;
  border: 3px solid rgba(240, 230, 190, 0.82);
  background: linear-gradient(180deg, rgba(31, 40, 58, 0.98), rgba(12, 16, 26, 0.98));
  color: #f5ead2;
  text-align: center;
  box-shadow: 0 18px 52px rgba(0,0,0,0.7), inset 0 2px 0 rgba(255,255,255,0.12);
  pointer-events: auto;
}
.tutorial-step strong {
  display: block;
  color: #fff3bf;
  font-size: 30px;
  text-shadow: 0 3px 0 #000;
}
.tutorial-step p {
  margin: 18px 0 8px;
  color: #dce7f2;
  font-size: 20px;
  line-height: 1.65;
  white-space: pre-line;
}
.tutorial-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.tutorial-actions .btn-text {
  width: 150px;
  margin-top: 16px;
  white-space: nowrap;
}
.lobby-dialog #codex-register-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  min-width: 210px;
  padding-inline: 14px;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}
.tutorial-wait {
  margin-top: 16px;
  color: #ffe08a;
  font-size: 18px;
  text-shadow: 0 2px 0 #000;
}
.tutorial-gold-target {
  outline: 4px solid rgba(255, 220, 86, 0.95) !important;
  outline-offset: 5px;
  filter: drop-shadow(0 0 16px rgba(255, 220, 86, 0.72)) !important;
  z-index: 950 !important;
}
.tutorial-red-target {
  outline: 4px solid rgba(255, 54, 76, 0.98) !important;
  outline-offset: 5px;
  filter: drop-shadow(0 0 18px rgba(255, 54, 76, 0.78)) !important;
  z-index: 950 !important;
}
.slot-patch.tutorial-gold-target::before {
  border-color: rgba(255, 220, 86, 0.82) !important;
  opacity: 1 !important;
}
.tutorial-confirm-hand {
  margin-top: 4px;
}
.tutorial-confirm-hand .btn-text {
  width: 170px;
  height: 48px;
  white-space: nowrap;
}
.tutorial-return-lobby {
  width: 180px !important;
  background: linear-gradient(180deg, #ffb15c 0%, #d86a2a 52%, #9d3f1d 100%);
  border-color: #ffe4bc;
  box-shadow: 0 5px 0 #6b2c18, 0 9px 18px rgba(0,0,0,0.58), inset 0 3px 0 rgba(255,255,255,0.26);
  color: #fff8e8;
  white-space: nowrap;
}
#tutorial-repeat-yes,
#tutorial-repeat-no {
  width: 180px !important;
  min-height: 56px;
  margin-left: 0;
  margin-right: 0;
}
.lobby-nav {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 82px));
  gap: 8px;
  background: transparent;
}
.lobby-nav-btn {
  position: relative;
  z-index: 1;
  width: 82px; height: 98px;
  padding: 8px 6px 7px;
  border: 2px solid rgba(235, 244, 255, 0.74);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(31, 48, 70, 0.93), rgba(9, 14, 24, 0.95));
  color: #fff;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 15px; font-weight: 900;
  text-shadow: 0 2px 0 #000;
  box-shadow: 0 6px 14px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.16);
  cursor: pointer;
}
.lobby-nav-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.12);
}
.lobby-nav-btn.active {
  border-color: #ff9fc5;
  box-shadow: 0 0 18px rgba(255,112,176,0.42), 0 6px 14px rgba(0,0,0,0.5);
}
.lobby-nav-icon {
  display: block;
  width: 56px; height: 56px;
  margin: 0 auto 3px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.52));
}
.lobby-nav-btn span { white-space: nowrap; }
.lobby-nav-btn:is([data-lobby-tab="market"], [data-lobby-tab="arena"], [data-lobby-tab="strengthen"]) {
  border-color: rgba(185, 190, 198, 0.74);
  background: linear-gradient(180deg, rgba(74, 79, 88, 0.96), rgba(29, 32, 38, 0.97));
  color: #d7d9dd;
  box-shadow: 0 6px 14px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.12);
}
.lobby-nav-btn:is([data-lobby-tab="market"], [data-lobby-tab="arena"], [data-lobby-tab="strengthen"]) .lobby-nav-icon {
  filter: grayscale(1) saturate(0.2) brightness(0.82) drop-shadow(0 3px 5px rgba(0,0,0,0.52));
}
.lobby-nav-btn:is([data-lobby-tab="market"], [data-lobby-tab="arena"], [data-lobby-tab="strengthen"]):hover {
  filter: brightness(1.06);
}

.lobby-tab-content.codex,
.lobby-tab-content.rankings {
  padding: 0 34px 12px;
}
.codex-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  margin: 4px 4px 12px;
  padding: 0 18px;
  border: 1px solid rgba(230, 197, 112, 0.54);
  background: rgba(8, 13, 23, 0.78);
  color: #f5e8c1;
  font-size: 20px;
}
.codex-summary strong { color: #ffe08a; font-size: 24px; }
.codex-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  align-content: start;
  gap: 22px 14px;
  height: calc(100% - 132px);
  padding: 12px 8px 34px;
  overflow-x: hidden;
  overflow-y: auto;
}
.codex-card-slot {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
.codex-card-slot small {
  min-height: 22px;
  color: #dce6f3;
  font-size: 14px;
  text-align: center;
}
.codex-card-slot.registered small { color: #8dffb2; }
.codex-card-slot.discovered:not(.registered) small { color: #d6d8de; }
.codex-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 154px !important;
  height: 231px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  cursor: default;
}
.codex-card-grayscale {
  filter: grayscale(1) brightness(0.82);
}
.codex-card-grayscale:not(:disabled) {
  cursor: pointer;
}
.codex-card-grayscale:not(:disabled):hover {
  filter: grayscale(1) brightness(1.08) drop-shadow(0 0 14px rgba(255, 222, 125, 0.52));
  transform: translateY(-4px) scale(1.035) !important;
}
.codex-unknown-card {
  width: 154px;
  height: 231px;
  display: grid;
  place-items: center;
  border: 3px solid #687181;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 40%, rgba(124, 142, 169, 0.16), transparent 38%),
    linear-gradient(145deg, #17202e, #080d16 70%);
  box-shadow: 0 10px 16px rgba(0,0,0,0.42), inset 0 0 0 4px #0b1019;
  color: #8793a4;
}
.codex-unknown-card span {
  font-size: 82px;
  font-weight: 900;
  text-shadow: 0 4px 0 #05070b;
}
.codex-register-copy,
.codex-register-warning { margin: 8px 0; font-size: 19px; line-height: 1.55; }
.codex-register-warning { color: #ffd477; }
.ranking-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  max-width: 920px;
  margin: 8px auto 18px;
}
.ranking-tab {
  min-height: 54px;
  border: 2px solid #75849a;
  border-radius: 5px;
  background: linear-gradient(180deg, #26364d, #111a28);
  color: #e8edf5;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.ranking-tab:hover { filter: brightness(1.14); }
.ranking-tab.active {
  border-color: #ffd56e;
  background: linear-gradient(180deg, #74522c, #392619);
  color: #fff1b0;
  box-shadow: 0 0 14px rgba(255, 202, 91, 0.25);
}
.ranking-list {
  max-width: 1120px;
  height: calc(100% - 150px);
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(213, 225, 240, 0.32);
  background: rgba(7, 12, 21, 0.76);
}
.ranking-row {
  display: grid;
  grid-template-columns: 90px minmax(220px, 1fr) minmax(230px, 0.8fr);
  align-items: center;
  min-height: 66px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.11);
  color: #f0f3f8;
}
.ranking-row:nth-child(-n+3) { background: rgba(125, 87, 32, 0.18); }
.ranking-self-heading {
  position: sticky;
  bottom: 66px;
  z-index: 2;
  padding: 7px 18px;
  border-top: 1px solid rgba(255, 213, 110, 0.55);
  background: rgba(18, 12, 9, 0.96);
  color: #ffd76f;
  font-size: 17px;
  font-weight: 900;
}
.ranking-self-row {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid #ffd56e;
  background: rgba(68, 43, 21, 0.97);
  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.38);
}
.ranking-position { color: #ffd76f; font-size: 27px; font-weight: 900; text-align: center; }
.ranking-player { padding-left: 18px; font-size: 21px; font-weight: 900; }
.ranking-value { display: flex; align-items: baseline; justify-content: flex-end; gap: 16px; text-align: right; }
.ranking-value strong { color: #fff0a8; font-size: 22px; }
.ranking-value span { color: #bcd0e5; font-size: 16px; }
.ranking-empty,
.ranking-unavailable,
.lobby-page-loading,
.lobby-page-error {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 220px;
  color: #aebed1;
  font-size: 22px;
  text-align: center;
}
.ranking-unavailable { color: #ffd073; }
.lobby-page-error { color: #ff8f8f; }
.room-kick-proposal-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2147483300;
  width: min(520px, calc(100vw - 40px));
  padding: 24px 28px;
  transform: translate(-50%, -50%);
  border: 2px solid #e8d6a2;
  background: linear-gradient(180deg, #1b263a, #0c1320);
  color: #fff4c9;
  text-align: center;
  pointer-events: auto;
  box-shadow: 0 18px 48px rgba(0,0,0,0.72), inset 0 0 22px rgba(255,219,133,0.08);
}
.room-kick-proposal-title { font-size: 28px; font-weight: 900; }
.room-kick-proposal-body { margin: 18px 0 22px; color: #eef2fa; font-size: 20px; line-height: 1.55; }
.room-kick-proposal-actions { display: flex; justify-content: center; gap: 18px; }
.room-state-panel {
  position: absolute;
  top: 72px;
  left: 24px;
  z-index: 900;
  min-width: 230px;
  padding: 12px 14px;
  border: 2px solid rgba(226, 235, 245, 0.72);
  background: rgba(8, 12, 18, 0.78);
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
  text-shadow: 0 2px 0 #000;
  pointer-events: none;
}
.room-state-player {
  padding: 1px 8px 2px;
  margin-top: 2px;
  border-radius: 4px;
}
.room-state-player.local-player {
  color: #fff3a8;
  background: linear-gradient(180deg, rgba(80, 44, 18, 0.96), rgba(35, 20, 10, 0.92));
  border: 1px solid rgba(255, 225, 106, 0.9);
  box-shadow: 0 0 10px rgba(255, 204, 74, 0.45), inset 0 0 0 1px rgba(48, 22, 8, 0.78);
}
.room-state-player.idle-kicked {
  color: #ff646b;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  background: rgba(70, 9, 18, 0.72);
  border: 1px solid rgba(255, 82, 91, 0.72);
}
.deploy-countdown {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 118px; font-weight: 900; line-height: 1;
  color: #fff6c8;
  text-shadow: 0 6px 0 rgba(74,38,0,0.9), 0 0 18px rgba(255,236,150,0.92), 0 0 42px rgba(110,255,126,0.36);
  pointer-events: none; z-index: 4;
}
.deploy-countdown.pulse { animation: deployCountdownPulse 0.34s ease-out; }
@keyframes deployCountdownPulse {
  0% { transform: translate(-50%, -50%) scale(1.26); opacity: 0.58; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.overlay {
  position: absolute; inset: -2px; pointer-events: auto;
  background: rgba(6,5,10,0.88); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; animation: overlayIn 0.25s forwards;
  overflow-y: auto;
}
.overlay.room-settlement-overlay {
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.room-settlement-auto-return {
  min-height: 36px;
  margin: 14px 0 6px;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 28px;
  font-weight: 900;
  color: #ffe16a;
  text-shadow: 0 3px 0 #000, 0 0 12px rgba(255, 211, 84, 0.62);
}
.overlay.room-state-reload-overlay {
  position: fixed;
  inset: -2px;
  z-index: 1500;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.overlay.room-state-reload-overlay h1,
.overlay.room-state-reload-overlay .death-stats,
.overlay.room-state-reload-overlay .btn-text {
  position: relative;
  z-index: 1;
}
.overlay.room-kicked-confirm-overlay {
  position: fixed;
  inset: -2px;
  z-index: 1800;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.room-kicked-confirm-panel {
  width: min(520px, calc(100vw - 40px));
  padding: 28px 34px 24px;
  border: 2px solid #d4c38f;
  background: linear-gradient(180deg, #1d2638 0%, #101725 100%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.62), inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.room-kicked-confirm-panel h1 {
  margin: 0 0 16px;
  color: #ffe59a;
  font-size: 34px;
}
.room-kicked-confirm-panel p {
  margin: 0 0 24px;
  color: #f4eee0;
  font-size: 24px;
  line-height: 1.5;
}
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--auth-dialog-top, clamp(230px, 32vh, 330px));
  padding-right: 28px;
  padding-bottom: 28px;
  padding-left: 28px;
  background: rgba(5, 7, 12, 0.28);
  backdrop-filter: none;
  pointer-events: auto;
  animation: authOverlayFade 0.22s ease-out both;
  overflow-y: auto;
}
.auth-dialog {
  width: min(390px, calc(100vw - 44px));
  padding: 16px 20px 18px;
  border: 2px solid rgba(232, 196, 116, 0.78);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(87, 56, 92, 0.34), transparent 46%),
    linear-gradient(180deg, rgba(23, 32, 48, 0.98), rgba(8, 12, 20, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 22px 58px rgba(0,0,0,0.64);
  transform-origin: 50% 24%;
  animation: authDialogPop 0.46s cubic-bezier(0.16, 1.36, 0.32, 1) both;
}
.auth-dialog h2 {
  margin: 0 0 10px;
  color: #ffe49b;
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 25px;
  text-align: center;
  text-shadow: 0 3px 0 #000;
}
.auth-form {
  display: grid;
  gap: 9px;
}
.auth-google-copy {
  color: #e9e3d8;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
}
.auth-google-button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-remembered-form {
  gap: 12px;
}
.auth-remembered-card {
  padding: 12px 14px;
  border: 1px solid rgba(255, 222, 145, 0.42);
  border-radius: 8px;
  background: rgba(7, 12, 22, 0.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.auth-remembered-label {
  color: #d6b86d;
  font-size: 14px;
}
.auth-remembered-name {
  margin-top: 5px;
  color: #fff0b5;
  font-size: 21px;
  text-align: center;
  text-shadow: 0 2px 0 #000;
}
.auth-remembered-meta,
.auth-remembered-email {
  margin-top: 6px;
  color: #cbd7e8;
  font-size: 14px;
  text-align: center;
  word-break: break-all;
}
.auth-remembered-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.auth-remembered-actions .btn-text {
  width: auto;
  min-width: 128px;
  margin: 0;
  white-space: nowrap;
}
.auth-form label {
  display: grid;
  gap: 6px;
  color: #e9e3d8;
  font-size: 18px;
}
.auth-form input {
  height: 36px;
  padding: 0 12px;
  border: 2px solid rgba(179, 206, 229, 0.58);
  border-radius: 5px;
  background: rgba(5, 10, 18, 0.86);
  color: #fff;
  font: inherit;
  font-size: 16px;
  outline: none;
}
.auth-form input:focus {
  border-color: #ffd86b;
  box-shadow: 0 0 0 2px rgba(255, 216, 107, 0.18);
}
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}
.auth-actions .btn-text {
  width: auto;
  min-width: 132px;
  margin: 0;
  white-space: nowrap;
}
.auth-status {
  min-height: 22px;
  color: #ffd86b;
  font-size: 14px;
  text-align: center;
  text-shadow: 0 2px 0 #000;
}
.auth-status.error {
  color: #ff9f9f;
}
@keyframes authOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes authDialogPop {
  0% { opacity: 0; transform: translateY(24px) scale(0.82); filter: brightness(1.4); }
  56% { opacity: 1; transform: translateY(-7px) scale(1.045); filter: brightness(1.08); }
  78% { transform: translateY(2px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
.room-settlement-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}
.room-settlement-actions .btn-text {
  width: 190px;
  white-space: nowrap;
}
@keyframes overlayIn { to { opacity: 1; } }
.overlay.closing { animation: overlayOut 0.2s forwards; }
@keyframes overlayOut { to { opacity: 0; } }
.overlay h2 {
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 36px; font-weight: 900; letter-spacing: 8px;
  color: #f0e2c0; margin: 44px 0 8px; text-shadow: 0 2px 6px #000;
  position: relative; z-index: 2;
}
.overlay .overlay-sub { font-size: 17px; color: #9a8f78; margin-bottom: 26px; letter-spacing: 2px; position: relative; z-index: 2; }
.overlay .card-grid {
  display: flex; flex-wrap: wrap; gap: 26px; justify-content: center;
  width: min(1100px, calc(1920px - 80px));
  min-height: 520px;
  max-width: 1100px; padding: 72px 54px 70px;
  background: var(--ui-panel-deck) center top / 100% 100% no-repeat;
  position: relative; z-index: 1;
}
.overlay .card-grid .card {
  position: relative; margin: 0; left: auto; top: auto;
  transition: transform 0.15s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.overlay .card-grid .card:hover { transform: scale(1.12) translateY(-8px); z-index: 2; }
.card-v8-preview {
  align-items: stretch;
  padding: 0 60px 80px;
  background: rgba(4, 4, 8, 0.9);
}
.card-v8-preview h2,
.card-v8-preview .overlay-sub {
  align-self: center;
}
.v8-preview-section {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1700px;
  margin: 18px auto 0;
}
.v8-preview-section h3 {
  font-family: 'Cubic 11', '俐方體11號', serif;
  font-size: 24px;
  color: #f0e2c0;
  text-shadow: 0 2px 6px #000;
  letter-spacing: 5px;
  margin: 0 0 14px;
}
.v8-preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.v8-preview-row .card {
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
  width: 184px;
  height: 276px;
}
.v8-preview-row.costs {
  gap: 14px;
}
.v8-preview-row.costs .card {
  width: 136px;
  height: 204px;
}
.v8-preview-row.long .card {
  width: 230px;
  height: 345px;
}
.overlay-close {
  position: absolute; top: 22px; right: 30px; width: 56px; height: 56px; border-radius: 50%;
  background: transparent; border: 0; color: transparent;
  font-size: 0; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center; transition: all 0.12s;
  padding: 0;
}
.overlay-close::before {
  content: ''; position: absolute; inset: 0;
  background: url('../assets/ui/crossed_coral_shards.png') center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.65));
}
.overlay-close:hover { transform: scale(1.1) rotate(90deg); }

/* 牌堆檢視:仿參考畫面的全螢幕戰鬥暗幕與大卡排列 */
.overlay.pile-view {
  background: rgba(0, 0, 0, 0.78); backdrop-filter: none;
  display: block; overflow-y: auto; overflow-x: hidden;
  scrollbar-gutter: stable;
}
.overlay.pile-view h2,
.overlay.pile-view .overlay-sub { display: none; }
.overlay.pile-view .card-grid {
  position: relative; margin-left: 207.36px; margin-top: 149.04px; margin-bottom: 151.2px;
  display: grid; grid-template-columns: repeat(5, 257.28px); grid-auto-rows: 385.92px;
  column-gap: 32.64px; row-gap: 51.84px; justify-content: start; align-content: start;
  width: auto; max-width: none; min-height: 0; padding: 0; background: none; z-index: 1;
}
.overlay.pile-view .card-grid .card {
  position: relative; left: auto; top: auto; width: 257.28px; height: 385.92px;
  margin: 0; transform: none; transition: transform 0.15s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.overlay.pile-view .card-grid .card:hover { transform: scale(1.045) translateY(-6.48px); z-index: 2; }
.pile-view-back {
  position: fixed; left: 0; bottom: 56.16px; width: 149.76px; height: 74.52px;
  border: 0; cursor: pointer; z-index: 3; padding: 0;
  background: linear-gradient(180deg, #b42a1f 0%, #8f1a16 68%, #6d120f 100%);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  box-shadow: 0 5.4px 15.12px rgba(0,0,0,0.8), inset 0 0 0 2.376px rgba(255,150,85,0.55);
}
.pile-view-back::before {
  content: ''; position: absolute; left: 44.16px; top: 50%;
  width: 30.24px; height: 30.24px; border-left: 8.64px solid #fff; border-bottom: 8.64px solid #fff;
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(0 2.7px 2.16px rgba(70,0,0,0.7));
}
.pile-view-back::after {
  content: ''; position: absolute; left: 44.16px; top: 50%;
  width: 37.8px; height: 8.64px; transform: translateY(-50%);
  background: #fff; border-radius: 5.4px;
  filter: drop-shadow(0 2.7px 2.16px rgba(70,0,0,0.7));
}
.pile-view-back:hover { filter: brightness(1.12); }
.pile-view-hint {
  position: fixed; left: 50%; bottom: 45.36px; transform: translateX(-50%);
  min-width: 537.6px; padding: 11.88px 38.4px; z-index: 2; text-align: center;
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: clamp(18px, 24px, 30px); line-height: 1.55;
  color: #f1ead8; background: rgba(0,0,0,0.72);
  text-shadow: 0 2.16px 4.32px #000;
}
.pile-view-hint span { color: #f5d24c; }
.pile-view-empty {
  color: #d8cfba; font-size: clamp(22px, 27.84px, 34px);
  letter-spacing: 0.2em; align-self: center; justify-self: center;
}

/* 獎勵畫面 */
.loot-choice-layer {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  font-family: 'Cubic 11', '俐方體11號', serif;
}
.loot-choice-scrim {
  position: absolute; inset: -2px;
  background: rgba(0,0,0,0.68);
  pointer-events: none;
  animation: lootScrimIn 0.18s ease-out forwards;
}
@keyframes lootScrimIn { from { opacity: 0; } to { opacity: 1; } }
.loot-choice-floor {
  position: absolute; left: 50%; top: 214px; transform: translateX(-50%);
  color: #ffe7a0; text-align: center; font-size: 28px; font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 3px 0 rgba(50,32,18,0.92), 0 0 10px #000;
  pointer-events: none;
}
.loot-choice-banner {
  position: absolute; left: 50%; top: 272px; transform: translateX(-50%);
  min-width: 520px; height: 94px; padding-top: 23px;
  color: #f4ead5; text-align: center; font-size: 38px; font-weight: 900; letter-spacing: 3px;
  text-shadow: 0 3px 0 rgba(64,42,24,0.85), 0 0 9px #000;
  background:
    linear-gradient(180deg, rgba(190,153,105,0.96), rgba(124,82,45,0.94));
  border: 3px solid rgba(235,205,157,0.72);
  border-radius: 10px 10px 26px 26px / 8px 8px 20px 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.64), inset 0 2px 0 rgba(255,240,200,0.34);
  pointer-events: none;
}
.loot-choice-cards {
  position: absolute; left: 50%; top: 468px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 118px;
  pointer-events: none;
}
.loot-choice-cards .card {
  position: relative; left: auto; top: auto; margin: 0;
  transform: scale(1.3); pointer-events: auto;
  transition: transform 0.16s cubic-bezier(0.3, 1.5, 0.5, 1), filter 0.16s;
}
.loot-choice-cards .card:hover {
  transform: scale(1.43) translateY(-12px);
  filter: drop-shadow(0 0 26px rgba(110,255,240,0.42));
  z-index: 2;
}
.loot-choice-skip {
  position: absolute; left: 50%; top: 894px; transform: translateX(-50%);
  width: 286px; height: 70px; padding: 0 28px;
  border: 3px solid rgba(150,235,246,0.68); border-radius: 8px;
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 31px; font-weight: 900; letter-spacing: 5px;
  color: #e9ffff; text-shadow: 0 3px 0 rgba(25,72,84,0.95);
  background: linear-gradient(180deg, rgba(80,157,174,0.96), rgba(38,104,124,0.98));
  box-shadow: 0 12px 26px rgba(0,0,0,0.72), inset 0 2px 0 rgba(255,255,255,0.2);
  pointer-events: auto; cursor: pointer;
}
.loot-choice-skip:hover {
  filter: brightness(1.12);
  transform: translateX(-50%) translateY(-2px);
}
.loot-choice-layer.closing { animation: lootChoiceOut 0.16s ease-in forwards; }
@keyframes lootChoiceOut { to { opacity: 0; } }

.reward-panel {
  width: 720px; min-height: 420px;
  margin-top: 10px; padding: 70px 58px 42px; border-radius: 0;
  background: var(--ui-panel-loot) center / 100% 100% no-repeat;
  border: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(24px); opacity: 0;
  animation: panelIn 0.35s 0.15s cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}
@keyframes panelIn { to { transform: translateY(0); opacity: 1; } }
.reward-panel .reward-cards { display: flex; gap: 30px; margin: 8px 0 10px; }
.reward-panel .card { position: relative; margin: 0; transition: transform 0.16s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.15s; }
.reward-panel .card:hover { transform: scale(1.16) translateY(-12px); }
.reward-panel .card:hover .card-inner { box-shadow: 0 16px 40px rgba(0,0,0,0.85), 0 0 26px rgba(255,215,130,0.5); }
.btn-text {
  margin-top: 18px; width: 240px; height: 56px; padding: 0 28px; border-radius: 8px; cursor: pointer;
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 19px; font-weight: 900; letter-spacing: 4px;
  color: #f4e6c8;
  background:
    linear-gradient(180deg, rgba(70,82,100,0.98) 0%, rgba(43,52,69,0.98) 50%, rgba(25,31,46,0.98) 100%);
  border: 2px solid rgba(226,235,245,0.78);
  box-shadow:
    0 5px 0 rgba(13,18,28,0.92),
    0 11px 22px rgba(0,0,0,0.58),
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -4px 0 rgba(0,0,0,0.2);
  text-shadow: 0 2px 0 rgba(0,0,0,0.85);
  transition: transform 0.14s, filter 0.14s, box-shadow 0.14s, background 0.14s;
}
.btn-text:hover {
  color: #ffe9b0;
  transform: translateY(-2px);
  filter: brightness(1.14);
  box-shadow:
    0 7px 0 rgba(13,18,28,0.92),
    0 14px 26px rgba(0,0,0,0.62),
    0 0 18px rgba(150,220,255,0.22),
    inset 0 2px 0 rgba(255,255,255,0.22),
    inset 0 -4px 0 rgba(0,0,0,0.2);
}
.btn-text:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 rgba(13,18,28,0.92),
    0 6px 14px rgba(0,0,0,0.56),
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.24);
}
.btn-text.primary {
  color: #fff2d8;
  background:
    linear-gradient(180deg, rgba(255,180,100,0.98) 0%, rgba(218,103,58,0.98) 48%, rgba(136,54,46,0.98) 100%);
  border-color: rgba(255,239,205,0.86);
  box-shadow:
    0 5px 0 rgba(95,42,34,0.95),
    0 11px 22px rgba(0,0,0,0.6),
    inset 0 2px 0 rgba(255,255,255,0.24),
    inset 0 -4px 0 rgba(88,24,28,0.24);
  font-size: 21px; padding: 0 36px;
}
.btn-text.primary:hover { filter: brightness(1.25); box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 18px rgba(255,180,80,0.4); }
.lobby-home-actions .btn-text.lobby-action-card {
  width: 100%;
  min-width: 0;
  height: 130px;
  display: grid;
  grid-template-rows: 70px auto;
  place-items: center;
  gap: 3px;
  margin: 0;
  padding: 9px 10px 8px;
  border-radius: 8px;
  line-height: 1.05;
  letter-spacing: 1px;
  font-size: 20px;
  white-space: nowrap;
}
.lobby-home-actions .btn-text.lobby-action-card.primary {
  padding: 9px 10px 8px;
  font-size: 20px;
}
.lobby-home-actions .btn-text.lobby-action-card.compact {
  grid-template-rows: 68px auto;
}
.lobby-home-actions .btn-text.lobby-action-card.create {
  background: linear-gradient(180deg, #682339 0%, #4e1d33 48%, #251420 100%);
  border-color: rgba(255, 198, 180, 0.86);
  box-shadow:
    0 5px 0 rgba(50, 18, 27, 0.95),
    0 12px 24px rgba(0,0,0,0.58),
    inset 0 2px 0 rgba(255,255,255,0.22);
}
.lobby-home-actions .btn-text.lobby-action-card.join {
  background: linear-gradient(180deg, #1d456d 0%, #173456 52%, #0c1929 100%);
  border-color: rgba(188, 229, 255, 0.82);
  box-shadow:
    0 5px 0 rgba(9, 20, 34, 0.95),
    0 12px 24px rgba(0,0,0,0.58),
    inset 0 2px 0 rgba(255,255,255,0.18);
}
.lobby-home-actions .btn-text.lobby-action-card.settings {
  background: linear-gradient(180deg, #302b36 0%, #232331 52%, #12141c 100%);
  border-color: rgba(216, 203, 185, 0.75);
  box-shadow:
    0 5px 0 rgba(12, 13, 18, 0.95),
    0 12px 24px rgba(0,0,0,0.58),
    inset 0 2px 0 rgba(255,255,255,0.15);
}
#synth-stop.disabled,
#synth-stop.disabled:hover,
#synth-stop:disabled,
#synth-stop:disabled:hover {
  color: #d5d9de;
  background:
    linear-gradient(180deg, rgba(82, 88, 100, 0.98) 0%, rgba(52, 58, 70, 0.98) 52%, rgba(32, 36, 46, 0.98) 100%);
  border-color: rgba(168, 176, 188, 0.72);
  filter: grayscale(0.85) brightness(0.65);
  transform: none;
  box-shadow:
    0 5px 0 rgba(18, 22, 30, 0.92),
    0 10px 18px rgba(0,0,0,0.52),
    inset 0 2px 0 rgba(255,255,255,0.11),
    inset 0 -4px 0 rgba(0,0,0,0.18);
  cursor: default;
}
#btn-skip-reward {
  width: 160px; height: 48px;
  background:
    linear-gradient(180deg, rgba(75,108,128,0.98) 0%, rgba(42,76,96,0.98) 52%, rgba(24,48,66,0.98) 100%);
  border-color: rgba(184,232,244,0.76);
  font-size: 18px; padding: 0 20px;
}

.seat-request-pop {
  position: fixed; left: 50%; top: 142px; transform: translateX(-50%);
  width: 420px; padding: 22px 24px 20px; z-index: 80;
  font-family: 'Cubic 11', '俐方體11號', serif;
  color: #fff5db; text-align: center;
  background:
    linear-gradient(180deg, rgba(46,54,74,0.98), rgba(18,22,34,0.98));
  border: 2px solid rgba(242,226,184,0.78);
  border-radius: 8px;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.68),
    inset 0 2px 0 rgba(255,255,255,0.16),
    inset 0 -5px 0 rgba(0,0,0,0.24);
  pointer-events: auto;
  animation: seatRequestIn 0.18s cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}
.seat-request-title {
  font-size: 28px; font-weight: 900; letter-spacing: 4px;
  text-shadow: 0 3px 0 #000;
}
.seat-request-body {
  margin-top: 12px; font-size: 18px; line-height: 1.6; color: #e6dcc8;
}
.seat-request-actions {
  display: flex; justify-content: center; gap: 18px; margin-top: 4px;
}
.seat-request-actions .btn-text {
  width: 144px; height: 48px; margin-top: 14px;
  font-size: 18px; letter-spacing: 3px;
}
@keyframes seatRequestIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* 標題畫面 */
#title-screen { background: radial-gradient(ellipse at 50% 35%, #1c1826 0%, #0a0910 75%); justify-content: center; }
#title-screen::before {
  content: ''; position: absolute;
  width: min(960px, calc(1920px - 80px)); height: min(430px, calc(1080px - 140px));
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--ui-panel-title) center / 100% 100% no-repeat;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.72));
}
#title-screen h1 {
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 72px; font-weight: 900; letter-spacing: 20px; text-indent: 20px;
  color: #f0e2c0; text-shadow: 0 4px 14px #000, 0 0 44px rgba(255,190,90,0.3);
  animation: titleGlow 3.5s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes titleGlow { 50% { text-shadow: 0 4px 14px #000, 0 0 70px rgba(255,190,90,0.55); } }
#title-screen .title-sub { margin: 14px 0 50px; font-size: 18px; letter-spacing: 8px; color: #8a8070; position: relative; z-index: 1; }
#title-screen .hint { position: absolute; bottom: 8%; font-size: 14px; color: #6a6258; letter-spacing: 2px; line-height: 2; text-align: center; }
#title-screen .btn-text { position: relative; z-index: 1; }

/* 角色選擇畫面 */
#char-select { justify-content: center; }
#char-select h2 { margin-top: 0; }
.char-row { display: flex; gap: 34px; margin-top: 26px; }
.char-card {
  width: 300px; height: 456px; padding: 30px 24px 22px; border-radius: 0; cursor: pointer;
  background: var(--ui-char-normal) center / 100% 100% no-repeat;
  border: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform 0.16s cubic-bezier(0.3, 1.5, 0.5, 1), border-color 0.16s, box-shadow 0.16s;
  opacity: 0; animation: charIn 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}
@keyframes charIn { from { opacity: 0; transform: translateY(26px);} to { opacity: 1; transform: translateY(0);} }
.char-card:hover {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 18px 40px rgba(0,0,0,0.7), 0 0 24px rgba(255,215,130,0.25);
}
.char-card.picked { background-image: var(--ui-char-selected); box-shadow: 0 0 34px rgba(255,213,84,0.5); transform: scale(1.07); }
.char-card.dimmed { background-image: var(--ui-char-disabled); opacity: 0.45 !important; pointer-events: none; transition: opacity 0.3s; }
.char-figure { height: 136px; display: flex; align-items: flex-end; }
.char-figure img {
  height: 128px; image-rendering: pixelated;
  animation: charBob 2.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.char-card:nth-child(2) .char-figure img { animation-delay: 0.4s; }
.char-card:nth-child(3) .char-figure img { animation-delay: 0.8s; }
@keyframes charBob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-7px);} }
.char-name { margin-top: 10px; min-height: 30px; font-family: 'Cubic 11', '俐方體11號', serif; font-size: 25px; font-weight: 900; color: #f4e8cc; }
.char-title { margin-left: 7px; font-size: 14px; color: #9a8f78; font-weight: 700; }
.char-flavor { margin-top: 5px; font-size: 14px; line-height: 1.55; color: #a89e8c; min-height: 40px; padding: 0 8px; }
.char-partner {
  margin-top: 10px; display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #cfc0a8;
}
.char-partner img { height: 42px; image-rendering: pixelated; }
.char-transform {
  margin-top: 9px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.55;
  color: #d8c8f0; background: rgba(90,70,140,0.18); border: 1px solid rgba(140,110,200,0.35);
}

/* 死亡畫面 */
#death-screen { background: radial-gradient(ellipse at 50% 40%, rgba(60,8,4,0.5) 0%, rgba(5,4,8,0.95) 80%); justify-content: center; }
#death-screen::before {
  content: ''; position: absolute;
  width: min(720px, calc(1920px - 80px)); height: min(420px, calc(1080px - 120px));
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--ui-panel-defeat) center / 100% 100% no-repeat;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.72));
}
#death-screen h1 {
  font-family: 'Cubic 11', '俐方體11號', serif; font-size: 66px; font-weight: 900; letter-spacing: 18px; color: #c03a2a;
  text-shadow: 0 4px 18px #000;
  animation: deathIn 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; opacity: 0;
  position: relative; z-index: 1;
}
@keyframes deathIn { 0% { opacity: 0; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }
#death-screen .death-stats { margin: 22px 0 34px; font-size: 18px; color: #9a8478; letter-spacing: 3px; position: relative; z-index: 1; }
#death-screen .btn-text { position: relative; z-index: 1; }

/* ---- 佇列區 ------------------------------------------------ */
#queue-area { position: absolute; right: 200px; bottom: 40px; z-index: 23; pointer-events: none; }

/* ---- 小螢幕縮放 -------------------------------------------- */
@media (max-height: 700px) {
  .card { transform-origin: 50% 100%; }
  .banner .banner-text { font-size: 40px; }
}