/* === CSS RESET & VARIABLES === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--red:#5C3A1E;--red-light:#7A5030;--gold:#C5A55A;--gold-dark:#9A7B3A;
--ink:#1A1A1A;--ink-light:#2D2D2D;--parchment:#F5E6C8;--parchment-dark:#E8D5A8;
--jade:#2E8B57;--jade-dark:#1D6B3F;--blood:#4A2A12;
--font-heading:'Ma Shan Zheng','Songti SC','STSong','SimSun','FangSong',serif;--font-body:'Noto Serif SC',serif;
--font-fun:'ZCOOL KuaiLe',cursive;
}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font-body);background:#0A0807;color:var(--parchment);
  min-height:100vh;overflow-x:hidden;
}
/* iOS pseudo-fullscreen fallback */
body.pseudo-fullscreen{
  position:fixed;inset:0;z-index:99999;
  width:100vw;height:100vh;overflow:hidden;
}
body.pseudo-fullscreen .screen.active{
  position:fixed;inset:0;z-index:99999;
  width:100%;height:100%;overflow:auto;
}
body.pseudo-fullscreen #game-screen.active{overflow:hidden}
body.pseudo-fullscreen .game-topbar{position:fixed;top:0;left:0;right:0;z-index:100000}
/* global noise overlay */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:0.025;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px;
}
button{font-family:var(--font-body);cursor:pointer;border:none;outline:none}
/* === PAPER TEXTURE + FINE GRID === */
.paper-bg{
background-color:#1C1610;
background-image:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 9px,
    rgba(197,165,90,0.08) 9px,
    rgba(197,165,90,0.08) 10px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 9px,
    rgba(197,165,90,0.08) 9px,
    rgba(197,165,90,0.08) 10px
  ),
  radial-gradient(ellipse at 30% 50%,rgba(160,70,20,0.05) 0%,transparent 50%),
  radial-gradient(ellipse at 70% 30%,rgba(139,30,0,0.04) 0%,transparent 50%),
  radial-gradient(ellipse at 50% 80%,rgba(160,70,20,0.03) 0%,transparent 40%);
}
/* === SCREEN MANAGEMENT === */
.screen{display:none;min-height:100vh;position:relative}
.screen.active{display:flex;flex-direction:column}
/* === ANIMATIONS === */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes sealStamp{0%{transform:scale(2.5) rotate(-15deg);opacity:0}60%{transform:scale(0.95) rotate(2deg);opacity:1}80%{transform:scale(1.05) rotate(-1deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes inkSpread{0%{clip-path:circle(0% at 50% 50%)}100%{clip-path:circle(100% at 50% 50%)}}
@keyframes brushStroke{from{width:0}to{width:100%}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes floatIn{from{opacity:0;transform:translateY(40px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 8px rgba(197,165,90,0.3)}50%{box-shadow:0 0 20px rgba(197,165,90,0.6)}}
.fade-in{animation:fadeIn 0.6s ease both}
.fade-in-up{animation:fadeInUp 0.7s ease both}

/* ============================
   TITLE SCREEN
   ============================ */
#title-screen{
  justify-content:center;align-items:center;text-align:center;
  background:#0A0807;
  position:relative;overflow:hidden;
}
/* layered background atmosphere */
#title-screen .title-bg-layer{
  position:absolute;inset:0;pointer-events:none;
}
.title-bg-image{
  background:url('title-bg.webp') center center / cover no-repeat;
  opacity:0.10;
  mix-blend-mode:screen;
}
.title-bg-gradient{
  background:
    radial-gradient(ellipse 120% 80% at 50% 40%,rgba(90,50,18,0.4) 0%,transparent 70%),
    radial-gradient(ellipse 80% 60% at 30% 60%,rgba(139,60,15,0.12) 0%,transparent 60%),
    radial-gradient(ellipse 60% 90% at 70% 30%,rgba(120,75,30,0.14) 0%,transparent 50%),
    linear-gradient(180deg,#0E0B08 0%,#201810 30%,#2E2218 50%,#201810 70%,#0E0B08 100%);
}
/* paper/parchment noise texture via SVG */
.title-bg-texture{
  opacity:0.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:256px 256px;
  mix-blend-mode:overlay;
}
/* ink wash cloud shapes — use light warm tones to contrast against dark bg */
.title-bg-ink{
  opacity:1;
  background:
    /* bottom left — heavy ink wash */
    radial-gradient(ellipse 55% 28% at 8% 88%,rgba(160,110,50,0.18) 0%,rgba(120,80,30,0.08) 40%,transparent 100%),
    /* bottom right — medium ink */
    radial-gradient(ellipse 45% 30% at 92% 82%,rgba(150,100,40,0.16) 0%,rgba(100,65,25,0.06) 45%,transparent 100%),
    /* bottom center — ground fog */
    radial-gradient(ellipse 80% 22% at 50% 96%,rgba(140,95,35,0.22) 0%,rgba(100,65,20,0.08) 50%,transparent 100%),
    /* top left — light mist */
    radial-gradient(ellipse 40% 35% at 12% 15%,rgba(130,90,40,0.12) 0%,rgba(90,60,25,0.04) 50%,transparent 100%),
    /* top right — light mist */
    radial-gradient(ellipse 35% 30% at 88% 12%,rgba(120,85,35,0.1) 0%,rgba(80,55,20,0.03) 50%,transparent 100%),
    /* center diffuse warm glow */
    radial-gradient(ellipse 80% 50% at 50% 55%,rgba(120,80,30,0.08) 0%,transparent 70%);
}
/* distant mountain silhouette at bottom — lighter fills for visibility */
.title-bg-mountains{
  opacity:1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'%3E%3Cpath d='M0,300 L0,210 Q60,140 130,180 Q200,120 280,165 Q350,90 430,140 Q500,70 580,120 Q650,55 730,100 Q800,40 880,90 Q940,50 1020,100 Q1080,65 1140,110 L1200,85 L1200,300Z' fill='%23483828' opacity='0.4'/%3E%3Cpath d='M0,300 L0,240 Q100,170 210,210 Q310,140 400,185 Q490,110 580,160 Q660,95 750,145 Q830,80 920,130 Q1000,100 1080,140 L1200,115 L1200,300Z' fill='%23382a1e' opacity='0.55'/%3E%3Cpath d='M0,300 L0,265 Q80,220 180,248 Q280,200 380,235 Q480,190 560,225 Q660,185 760,218 Q860,190 960,220 Q1060,198 1140,230 L1200,210 L1200,300Z' fill='%23281e14' opacity='0.7'/%3E%3C/svg%3E") no-repeat bottom center/100% auto;
}
/* vignette — softer */
.title-bg-vignette{
  background:radial-gradient(ellipse 75% 70% at center,transparent 35%,rgba(0,0,0,0.5) 100%);
}
/* floating particle canvas */
#titleParticles{
  position:absolute;inset:0;pointer-events:none;z-index:1;
}
/* subtle animated ambient glow */
.title-ambient-glow{
  position:absolute;pointer-events:none;z-index:0;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(197,165,90,0.04) 0%,transparent 70%);
  top:30%;left:50%;transform:translate(-50%,-50%);
  animation:ambientPulse 8s ease-in-out infinite;
}
@keyframes ambientPulse{
  0%,100%{opacity:0.4;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:0.8;transform:translate(-50%,-50%) scale(1.15)}
}
/* decorative calligraphic strokes - top */
.title-ink-stroke-top{
  position:absolute;top:0;left:0;right:0;height:120px;pointer-events:none;z-index:1;
  opacity:0.12;
  background:
    linear-gradient(180deg,rgba(197,165,90,0.2) 0%,transparent 100%) no-repeat 20% 0/1px 80px,
    linear-gradient(180deg,rgba(197,165,90,0.15) 0%,transparent 100%) no-repeat 80% 0/1px 60px,
    linear-gradient(90deg,transparent,rgba(197,165,90,0.08),transparent) no-repeat 50% 1px/40% 1px;
}
/* decorative calligraphic strokes - bottom */
.title-ink-stroke-bot{
  position:absolute;bottom:0;left:0;right:0;height:120px;pointer-events:none;z-index:1;
  opacity:0.12;
  background:
    linear-gradient(0deg,rgba(197,165,90,0.2) 0%,transparent 100%) no-repeat 35% 100%/1px 80px,
    linear-gradient(0deg,rgba(197,165,90,0.15) 0%,transparent 100%) no-repeat 65% 100%/1px 60px,
    linear-gradient(90deg,transparent,rgba(197,165,90,0.08),transparent) no-repeat 50% calc(100% - 1px)/40% 1px;
}
/* frame - refined double border */
.title-frame{
  padding:72px 108px;position:relative;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 7px,rgba(197,165,90,0.035) 7px,rgba(197,165,90,0.035) 8px),
    repeating-linear-gradient(90deg,transparent,transparent 7px,rgba(197,165,90,0.035) 7px,rgba(197,165,90,0.035) 8px),
    linear-gradient(160deg,rgba(24,18,10,0.85),rgba(16,12,8,0.9));
  backdrop-filter:blur(6px);
  z-index:2;
  box-shadow:
    0 0 120px rgba(0,0,0,0.5),
    0 0 40px rgba(139,50,0,0.06),
    inset 0 0 80px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(197,165,90,0.05);
  min-width:560px;
  border:none;
}
/* outer border */
.title-frame::before{
  content:'';position:absolute;inset:0;
  border:1.5px solid rgba(197,165,90,0.2);
  pointer-events:none;
}
/* inner border */
.title-frame::after{
  content:'';position:absolute;inset:7px;
  border:1px solid rgba(197,165,90,0.08);
  pointer-events:none;
}
.title-main{
  font-family:var(--font-heading);font-size:4.8rem;color:var(--gold);
  text-shadow:
    0 0 80px rgba(197,165,90,0.2),
    0 0 40px rgba(197,165,90,0.1),
    0 2px 6px rgba(0,0,0,0.7);
  letter-spacing:0.45em;line-height:1.2;margin-bottom:12px;
  position:relative;
  animation:titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow{
  0%,100%{text-shadow:0 0 80px rgba(197,165,90,0.2),0 0 40px rgba(197,165,90,0.1),0 2px 6px rgba(0,0,0,0.7)}
  50%{text-shadow:0 0 100px rgba(197,165,90,0.3),0 0 50px rgba(197,165,90,0.15),0 2px 6px rgba(0,0,0,0.7)}
}
.title-main::after{
  content:'';display:block;width:80px;height:1px;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0.35;
}
.title-sub{
  font-size:0.88rem;color:rgba(197,165,90,0.5);letter-spacing:0.6em;
  margin-bottom:32px;font-weight:400;
}
.title-tagline{
  font-size:0.82rem;color:rgba(235,230,220,0.35);line-height:2.2;
  margin-bottom:44px;max-width:520px;letter-spacing:0.1em;
  font-style:italic;position:relative;padding:0 12px;
}
.title-btn{
  background:linear-gradient(180deg,rgba(30,22,14,0.6),rgba(20,14,8,0.8));
  color:var(--gold);font-size:1rem;padding:14px 52px;
  letter-spacing:0.4em;border:1px solid rgba(197,165,90,0.2);
  transition:all 0.4s ease;position:relative;overflow:hidden;
  display:inline-block;min-width:220px;text-align:center;
  box-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.title-btn:hover{
  transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(80,30,10,0.3),rgba(60,20,5,0.4));
  box-shadow:0 6px 40px rgba(139,50,0,0.2),0 0 1px rgba(197,165,90,0.4);
  border-color:rgba(197,165,90,0.5);
}
.title-btn::after{display:none}
.title-btn-loading{
  opacity:0.4;cursor:wait;pointer-events:none;
}
.title-btn-load{
  margin-top:10px;
}
.title-buttons{
  display:flex;gap:16px;justify-content:center;
}
.title-version-topleft{
  position:absolute;top:18px;left:20px;z-index:2;
  font-size:0.65rem;color:rgba(197,165,90,0.15);letter-spacing:0.1em;
}
.title-bottom-bar{
  position:absolute;bottom:20px;left:0;right:0;z-index:2;
  display:flex;justify-content:center;align-items:center;gap:20px;
}
.title-version{
  font-size:0.7rem;color:rgba(197,165,90,0.15);letter-spacing:0.1em;
}
.title-follow-btn{
  background:none;border:1px solid rgba(197,165,90,0.15);
  color:rgba(197,165,90,0.3);font-size:0.68rem;
  padding:4px 14px;letter-spacing:0.08em;transition:all 0.3s;
  cursor:pointer;
}
.title-follow-btn:hover{color:rgba(197,165,90,0.6);border-color:rgba(197,165,90,0.3)}
/* Follow modal content */
.follow-modal-content{text-align:center;padding:8px 0 16px}
.follow-section{margin-bottom:20px}
.follow-section:last-child{margin-bottom:0}
.follow-label{font-size:0.72rem;color:rgba(197,165,90,0.45);letter-spacing:0.15em;margin-bottom:6px}
.follow-name{font-size:0.95rem;color:var(--gold);font-weight:700;margin-bottom:8px}
.follow-qq-num{font-size:0.82rem;color:rgba(245,230,200,0.6);letter-spacing:0.05em;user-select:all}
.follow-hint{font-size:0.75rem;color:rgba(245,230,200,0.4);margin-bottom:8px;line-height:1.6}
.follow-link{
  display:inline-block;font-size:0.78rem;color:rgba(197,165,90,0.5);
  border-bottom:1px solid rgba(197,165,90,0.15);padding-bottom:1px;
  text-decoration:none;transition:all 0.3s;
}
.follow-link:hover{color:var(--gold);border-color:rgba(197,165,90,0.4)}
.follow-qr{margin-top:8px}
.follow-qr img{max-width:200px;width:100%;height:auto;border:1px solid rgba(197,165,90,0.1);border-radius:4px}
.title-sound-toggle{
  position:absolute;top:24px;right:30px;background:none;z-index:2;
  color:rgba(197,165,90,0.3);font-size:0.75rem;padding:6px 12px;
  border:1px solid rgba(197,165,90,0.1);transition:all 0.3s;
  letter-spacing:0.05em;
}
.title-sound-toggle:hover{color:rgba(197,165,90,0.6);border-color:rgba(197,165,90,0.25)}
/* Corner ornaments */
.corner-ornament{
  position:absolute;width:40px;height:40px;z-index:1;pointer-events:none;
  opacity:0.2;
}
.corner-ornament::before,.corner-ornament::after{
  content:'';position:absolute;background:var(--gold);
}
.corner-ornament.tl{top:32px;left:32px}
.corner-ornament.tr{top:32px;right:32px}
.corner-ornament.bl{bottom:32px;left:32px}
.corner-ornament.br{bottom:32px;right:32px}
.corner-ornament.tl::before{top:0;left:0;width:24px;height:1px}
.corner-ornament.tl::after{top:0;left:0;width:1px;height:24px}
.corner-ornament.tr::before{top:0;right:0;width:24px;height:1px}
.corner-ornament.tr::after{top:0;right:0;width:1px;height:24px}
.corner-ornament.bl::before{bottom:0;left:0;width:24px;height:1px}
.corner-ornament.bl::after{bottom:0;left:0;width:1px;height:24px}
.corner-ornament.br::before{bottom:0;right:0;width:24px;height:1px}
.corner-ornament.br::after{bottom:0;right:0;width:1px;height:24px}
/* Seal mark */
.title-seal{
  width:52px;height:52px;border:2px solid rgba(92,58,30,0.5);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:1.6rem;color:rgba(92,58,30,0.6);
  margin:0 auto 20px;transform:rotate(-8deg);
  box-shadow:0 0 20px rgba(92,58,30,0.1);
  animation:sealStamp 0.8s ease 0.3s both;
}

/* ============================
   CHARACTER SELECT SCREEN
   ============================ */
#select-screen{
  align-items:center;padding:40px 20px;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(197,165,90,0.06) 9px,rgba(197,165,90,0.06) 10px),
    repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(197,165,90,0.06) 9px,rgba(197,165,90,0.06) 10px),
    linear-gradient(160deg,#0A0807 0%,#1C1610 20%,#2A1E14 45%,#321C12 55%,#1C1610 80%,#0A0807 100%);
}
#select-screen.active{align-items:center}
.select-header{
  text-align:center;margin-bottom:12px;padding-top:48px;
}
.select-header h2{
  font-family:var(--font-heading);font-size:2.5rem;color:var(--gold);
  letter-spacing:0.2em;
}
.select-intro{
  text-align:center;max-width:600px;margin:0 auto 36px;
  font-size:0.9rem;color:rgba(245,230,200,0.55);line-height:1.8;
}
.char-grid{
  display:flex;justify-content:center;align-items:center;
  flex:1;max-width:1200px;width:100%;
}
@media(max-width:600px){.char-grid{max-width:400px}}
@media(max-width:600px){.char-grid{grid-template-columns:1fr;max-width:400px}}

.char-card{
  background:rgba(42,35,24,0.8);border:1px solid rgba(197,165,90,0.15);
  padding:28px 22px;position:relative;overflow:hidden;
  transition:all 0.4s ease;cursor:pointer;
  display:flex;flex-direction:column;max-width:340px;width:100%;
}
.char-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:0;transition:opacity 0.4s;
}
.char-card:hover{
  border-color:rgba(197,165,90,0.4);transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.char-card:hover::before{opacity:1}
.char-card-rank{
  font-size:0.7rem;color:var(--gold);opacity:0.6;
  letter-spacing:0.15em;margin-bottom:6px;
}
.char-card-name{
  font-family:var(--font-heading);font-size:1.8rem;color:var(--gold);
  margin-bottom:2px;
}
.char-card-subtitle{
  font-size:0.75rem;color:rgba(245,230,200,0.4);margin-bottom:16px;
}
.char-card-route{
  display:inline-block;font-size:0.7rem;padding:3px 10px;
  border:1px solid rgba(160,100,40,0.4);color:rgba(180,120,50,0.85);
  background:rgba(160,100,40,0.08);
  margin-bottom:14px;letter-spacing:0.1em;
}
.char-card-desc{
  font-size:0.8rem;color:rgba(245,230,200,0.55);line-height:1.7;
  margin-bottom:18px;flex:1;
}
.char-stat-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:6px;font-size:0.75rem;
}
.char-stat-label{color:rgba(245,230,200,0.5);min-width:36px}
.char-stat-bar{
  flex:1;height:6px;background:rgba(245,230,200,0.08);margin:0 8px;
  position:relative;overflow:hidden;border-radius:4px;
}
.char-stat-fill{
  height:100%;border-radius:4px;transition:width 0.8s ease;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold));
}
.char-stat-val{color:var(--gold);min-width:24px;text-align:right}
.char-card-btn{
  width:100%;margin-top:18px;padding:10px;font-size:0.85rem;
  background:rgba(92,58,30,0.3);color:var(--gold);
  border:1px solid rgba(197,165,90,0.2);letter-spacing:0.2em;
  transition:all 0.3s;
}
.char-card-btn:hover{
  background:var(--red);border-color:var(--gold);
}
.char-card-disabled{
  opacity:0.45;filter:grayscale(0.6);pointer-events:none;
}
.char-card-btn-disabled{
  background:rgba(60,60,60,0.3);color:rgba(160,160,160,0.6);
  border-color:rgba(120,120,120,0.2);cursor:not-allowed;letter-spacing:0.2em;
}
.char-card-btn-disabled:hover{
  background:rgba(60,60,60,0.3);border-color:rgba(120,120,120,0.2);
}
.char-card-locked{
  opacity:0.45;filter:grayscale(0.5);cursor:default;
}
.char-card-locked:hover{
  border-color:rgba(197,165,90,0.15);transform:none;box-shadow:none;
}
.char-card-locked:hover::before{opacity:0}
.char-card-lock-badge{
  position:absolute;top:14px;right:14px;
  font-size:0.65rem;color:rgba(200,180,140,0.7);
  border:1px solid rgba(200,180,140,0.25);padding:2px 8px;
  letter-spacing:0.1em;border-radius:2px;
  background:rgba(42,35,24,0.6);
}
.char-card-btn-locked{
  background:rgba(60,60,60,0.3);color:rgba(160,160,160,0.6);
  border-color:rgba(120,120,120,0.2);cursor:not-allowed;letter-spacing:0.2em;
}

/* ============================
   MAIN GAME SCREEN
   ============================ */
#game-screen{
  display:none;flex-direction:column;height:100vh;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(197,165,90,0.04) 9px,rgba(197,165,90,0.04) 10px),
    repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(197,165,90,0.04) 9px,rgba(197,165,90,0.04) 10px),
    linear-gradient(165deg,#0A0807 0%,#18130E 15%,#251A12 40%,#2E1C10 55%,#18130E 80%,#0A0807 100%);
}
#game-screen.active{display:flex}

/* --- TOPBAR (game HUD) --- */
.game-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 20px;height:48px;line-height:1;
  background:linear-gradient(180deg,#1A140E 0%,#120E09 60%,#0A0807 100%);
  position:sticky;top:0;z-index:100;
  border-bottom:2px solid rgba(197,165,90,0.18);
  box-shadow:0 4px 20px rgba(0,0,0,0.5),inset 0 -1px 0 rgba(197,165,90,0.06);
}
.game-topbar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(197,165,90,0.12) 20%,rgba(197,165,90,0.2) 50%,rgba(197,165,90,0.12) 80%,transparent 95%);
}
.topbar-rank{
  font-size:0.9rem;color:var(--gold);letter-spacing:0.18em;
  text-shadow:0 1px 3px rgba(0,0,0,0.5),0 0 12px rgba(197,165,90,0.12);
  font-weight:700;cursor:pointer;transition:color 0.2s;
}
.topbar-rank:hover{color:#e8d48b;text-decoration:underline;text-underline-offset:4px;}
.topbar-turn{
  font-size:0.72rem;color:rgba(245,230,200,0.55);letter-spacing:0.12em;
  padding:4px 18px;
  border-left:1px solid rgba(197,165,90,0.1);
  border-right:1px solid rgba(197,165,90,0.1);
}
.topbar-actions{display:flex;gap:0}
.topbar-btn{
  background:transparent;color:rgba(197,165,90,0.6);font-size:0.72rem;
  padding:6px 14px;border:none;transition:all 0.3s;
  letter-spacing:0.08em;position:relative;
}
.topbar-btn+.topbar-btn::before{
  content:'';position:absolute;left:0;top:25%;bottom:25%;width:1px;
  background:rgba(197,165,90,0.1);
}
.topbar-btn:hover{color:var(--gold);background:rgba(197,165,90,0.06)}

/* --- GAME LAYOUT --- */
.game-layout{
  display:grid;grid-template-columns:240px 1fr 240px;gap:0;flex:1;
  max-width:1440px;width:100%;margin:0 auto;
  height:calc(100vh - 48px);overflow:hidden;
}
.mobile-drawer-toggle{display:none}
@media(max-width:1024px) and (orientation:portrait){
  .game-layout{grid-template-columns:1fr;max-width:700px}
  .panel-left,.panel-right{display:none}
}
/* Note: mobile <=600px overrides are in the MOBILE RESPONSIVE OVERHAUL section below */

/* --- LEFT PANEL (Character Status) --- */
.panel-left{
  padding:0;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(18,14,8,0.9) 0%,rgba(24,19,12,0.85) 100%);
  border-right:2px solid rgba(197,165,90,0.12);
  box-shadow:inset -8px 0 16px rgba(0,0,0,0.15);
}
.panel-left::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.3);
}
.panel-section{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(197,165,90,0.06);
}
.panel-section:last-child{border-bottom:none}
.panel-section-title{
  font-size:0.62rem;color:rgba(197,165,90,0.6);letter-spacing:0.3em;
  margin-bottom:14px;padding:6px 10px;text-align:center;
  background:linear-gradient(90deg,transparent,rgba(197,165,90,0.06),transparent);
  border-top:1px solid rgba(197,165,90,0.1);
  border-bottom:1px solid rgba(197,165,90,0.1);
  display:block;
}
.stat-item{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;font-size:0.78rem;padding:0 4px;
}
.stat-name{
  color:rgba(245,230,200,0.5);min-width:32px;font-size:0.74rem;
  letter-spacing:0.03em;
}
.stat-bar-wrap{
  flex:1;height:8px;
  background:rgba(0,0,0,0.35);
  margin:0 10px;position:relative;overflow:hidden;
  border:1px solid rgba(197,165,90,0.08);
  border-radius:4px;
}
.stat-bar-inner{
  height:100%;transition:width 0.6s ease;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-dark) 100%);
  box-shadow:0 0 6px rgba(197,165,90,0.2);
  border-radius:4px;
}
.stat-val{
  color:var(--gold);font-size:0.72rem;min-width:24px;text-align:right;
  font-variant-numeric:tabular-nums;text-shadow:0 0 6px rgba(197,165,90,0.15);
}
.stat-change{
  font-size:0.65rem;font-weight:700;margin-left:4px;
  animation:fadeIn 0.4s ease;
}
.stat-change.positive{color:#C5A55A}
.stat-change.negative{color:#8B4513}

/* Tags */
.tags-container{display:flex;flex-wrap:wrap;gap:5px}
.tag-stamp{
  font-size:0.6rem;padding:2px 7px;
  border:1px solid rgba(92,58,30,0.4);color:var(--red-light);
  background:rgba(92,58,30,0.1);letter-spacing:0.05em;
  text-shadow:0 0 4px rgba(92,58,30,0.2);
}
/* player info panel */
.player-info-panel{padding:0 4px;}
.player-info-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid rgba(197,165,90,0.06);
}
.player-info-row:last-child{border-bottom:none}
.player-info-label{
  font-size:0.72rem;color:rgba(245,230,200,0.35);letter-spacing:0.1em;
}
.player-info-val{
  font-size:0.75rem;color:rgba(245,230,200,0.7);font-weight:700;letter-spacing:0.05em;
}
.player-info-val.reputation{
  padding:2px 8px;border:1px solid rgba(197,165,90,0.15);
  background:rgba(197,165,90,0.04);color:var(--gold);font-size:0.7rem;
}

/* --- CENTER PANEL (Event Stage) --- */
.panel-center{
  padding:28px 36px;min-height:0;position:relative;overflow-y:auto;scrollbar-width:none;
  background:linear-gradient(180deg,rgba(30,24,16,0.3) 0%,transparent 8%,transparent 92%,rgba(30,24,16,0.3) 100%);
}
.panel-center::-webkit-scrollbar{display:none}
@media(max-width:1024px) and (orientation:portrait){.panel-center{padding:20px 16px;order:-1}}
.event-stage{
  font-size:0.65rem;color:rgba(197,165,90,0.55);letter-spacing:0.25em;
  margin-bottom:10px;
}
.event-title{
  font-family:var(--font-heading);font-size:2.6rem;color:var(--gold);
  margin-bottom:6px;line-height:1.3;
  text-shadow:0 2px 8px rgba(0,0,0,0.4),0 0 30px rgba(197,165,90,0.08);
}
.event-title::after{
  content:'';display:block;width:80px;height:1px;margin:16px 0 20px;
  background:rgba(197,165,90,0.4);
}
.speaker-box{
  display:flex;flex-direction:column;gap:0;
  margin:0 0 28px;position:relative;
}
.speaker-header{
  display:flex;align-items:center;gap:10px;margin-bottom:0;
  padding-left:16px;
}
.speaker-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,rgba(92,58,30,0.5),rgba(80,40,10,0.6));
  border:1.5px solid rgba(197,165,90,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:0.75rem;color:var(--gold);font-weight:700;
  flex-shrink:0;
}
.speaker-meta{display:flex;flex-direction:column;gap:1px}
.speaker-name{
  font-size:0.85rem;color:var(--gold);font-weight:700;letter-spacing:0.06em;
}
.speaker-tags{display:flex;align-items:center;gap:6px}
.speaker-role{font-size:0.6rem;color:rgba(245,230,200,0.35)}
.speaker-faction{
  font-size:0.55rem;padding:1px 6px;
  border:1px solid rgba(197,165,90,0.2);color:rgba(197,165,90,0.55);
  background:rgba(197,165,90,0.05);letter-spacing:0.06em;
}
.speaker-bubble{
  position:relative;margin-left:32px;margin-top:8px;
  padding:14px 18px;
  background:linear-gradient(160deg,rgba(35,26,16,0.85),rgba(25,18,10,0.75));
  border:1px solid rgba(197,165,90,0.1);
  border-radius:2px 10px 10px 10px;
  box-shadow:0 2px 12px rgba(0,0,0,0.2),inset 0 0 16px rgba(0,0,0,0.1);
}
.speaker-bubble::before{
  content:'';position:absolute;top:-7px;left:20px;
  width:14px;height:14px;
  background:linear-gradient(135deg,rgba(35,26,16,0.85),transparent);
  border-left:1px solid rgba(197,165,90,0.1);
  border-top:1px solid rgba(197,165,90,0.1);
  transform:rotate(45deg);
}
.speaker-bubble::after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:2px 10px 10px 10px;
  box-shadow:inset 1px 1px 0 rgba(197,165,90,0.04);
  pointer-events:none;
}
.speaker-line{
  font-size:0.88rem;color:rgba(245,230,200,0.75);line-height:1.9;
  position:relative;
}
.speaker-line::before{content:'"';color:rgba(197,165,90,0.3);font-size:1.4rem;
  font-family:serif;line-height:1;vertical-align:-0.15em;margin-right:2px}
.speaker-line::after{content:'"';color:rgba(197,165,90,0.3);font-size:1.4rem;
  font-family:serif;line-height:1;vertical-align:-0.15em;margin-left:2px}
.event-narrative{
  font-size:0.88rem;color:rgba(245,230,200,0.58);line-height:2.1;
  margin-bottom:20px;text-indent:2em;
}
.event-flavor{
  font-size:0.8rem;color:rgba(197,165,90,0.35);line-height:1.8;
  margin-bottom:20px;padding:12px 18px;
  border-left:2px solid rgba(197,165,90,0.12);
  background:rgba(197,165,90,0.02);font-style:italic;
}
.event-focus{
  font-size:0.9rem;color:var(--gold);line-height:1.8;
  margin-bottom:28px;padding:16px 0;
  background:transparent;
  border:none;
  border-top:1px solid rgba(197,165,90,0.25);
  border-bottom:1px solid rgba(197,165,90,0.25);
  box-shadow:none;
  position:relative;
}

/* Choices */
.choices-container{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.choice-btn{
  text-align:left;padding:18px 22px;
  background:linear-gradient(135deg,rgba(18,14,10,0.85),rgba(22,17,12,0.75));
  border:1px solid rgba(197,165,90,0.18);
  color:var(--parchment);transition:all 0.3s ease;position:relative;overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,0.4),0 1px 3px rgba(0,0,0,0.25);
}
.choice-btn::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:transparent;transition:background 0.3s;
}
.choice-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(92,58,30,0.12),transparent 60%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.choice-btn:hover{
  border-color:rgba(197,165,90,0.28);
  box-shadow:0 4px 16px rgba(0,0,0,0.25),inset 0 0 20px rgba(92,58,30,0.05);
  transform:translateY(-1px);
}
.choice-btn:hover::before{background:var(--gold)}
.choice-btn:hover::after{opacity:1}
.choice-btn:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,0.2)}
.choice-title{
  font-size:0.9rem;font-weight:700;color:var(--gold);
  margin-bottom:6px;position:relative;z-index:1;letter-spacing:0.02em;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.choice-desc{
  font-size:0.78rem;color:rgba(245,230,200,0.42);line-height:1.7;
  position:relative;z-index:1;
}
.choice-btn.locked{
  opacity:0.55;cursor:not-allowed;
  border-color:rgba(197,165,90,0.06);
  box-shadow:none;
  background:rgba(20,16,10,0.6);
}
.choice-btn.locked:hover{transform:none;box-shadow:none;border-color:rgba(197,165,90,0.06)}
.choice-btn.locked:hover::before{background:transparent}
.choice-btn.locked:hover::after{opacity:0}
.choice-lock-info{
  font-size:0.72rem;color:rgba(160,120,70,0.85);margin-top:6px;
  position:relative;z-index:1;letter-spacing:0.04em;
}
.choice-btn.locked .choice-title{color:rgba(197,165,90,0.45);text-shadow:none}

/* Unlocked hidden choice indicator */
.choice-unlocked-hint{
  display:inline-flex;align-items:center;gap:5px;
  font-size:0.68rem;color:rgba(46,139,87,0.95);margin-top:6px;
  position:relative;z-index:1;letter-spacing:0.04em;
}
.choice-unlocked-hint::before{
  content:'✦';font-size:0.6rem;color:rgba(46,139,87,0.8);
}
.choice-btn.unlocked-hidden{
  border-color:rgba(46,139,87,0.35);
}
.choice-btn.unlocked-hidden:hover{
  border-color:rgba(46,139,87,0.55);
  box-shadow:0 2px 15px rgba(46,139,87,0.1),inset 0 0 20px rgba(0,0,0,0.2);
}

/* Risky choice (dice-eligible hidden choices) */
.choice-btn.risky{
  position:relative;padding:14px 18px 16px;
  background:linear-gradient(135deg,rgba(18,14,10,0.85),rgba(22,17,12,0.75));
  border:1px solid rgba(197,165,90,0.18);
  box-shadow:0 3px 12px rgba(0,0,0,0.4),0 1px 3px rgba(0,0,0,0.25);
  margin-bottom:10px;animation:fadeInUp 0.5s ease both;
  transition:border-color 0.3s,box-shadow 0.3s;
}
.choice-btn.risky:hover{
  border-color:rgba(197,165,90,0.35);
  box-shadow:0 4px 16px rgba(0,0,0,0.5),0 2px 4px rgba(0,0,0,0.3);
}
.choice-btn.risky .choice-title{
  font-size:0.9rem;font-weight:700;color:rgba(210,170,70,0.85);
  margin-bottom:6px;letter-spacing:0.02em;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.choice-btn.risky .choice-desc{
  font-size:0.78rem;color:rgba(245,230,200,0.35);line-height:1.7;margin-bottom:10px;
}
.choice-risk-info{
  display:flex;align-items:center;gap:10px;
  font-size:0.72rem;color:rgba(210,160,60,0.6);
}
.risk-requirement{letter-spacing:0.04em;}
.risk-difficulty{
  font-size:0.7rem;letter-spacing:0.06em;color:rgba(210,160,60,0.7);
}
.risk-difficulty .diff-dot-filled{color:rgba(210,160,60,0.85)}
.risk-difficulty .diff-dot-empty{color:rgba(210,160,60,0.25)}
.dice-trigger-btn{
  display:inline-block;margin-left:auto;flex-shrink:0;
  padding:3px 14px;position:relative;z-index:2;
  background:linear-gradient(180deg,rgba(160,110,30,0.2),rgba(120,80,20,0.3));
  color:rgba(210,170,70,0.9);font-size:0.7rem;letter-spacing:0.2em;
  border:1px solid rgba(210,160,60,0.25);cursor:pointer;
  transition:all 0.3s;font-family:var(--font-body);
  text-shadow:0 1px 2px rgba(0,0,0,0.4);
  line-height:1.6;
}
.dice-trigger-btn:hover{
  background:linear-gradient(180deg,rgba(160,110,30,0.35),rgba(120,80,20,0.45));
  border-color:rgba(210,160,60,0.5);
  box-shadow:0 0 12px rgba(210,160,60,0.15);
}

/* Dice overlay */
.dice-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(5,3,1,0.92);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn 0.3s ease;
}
.dice-panel{
  width:340px;max-width:90vw;padding:32px 28px;text-align:center;
  background:linear-gradient(180deg,rgba(35,25,12,0.98),rgba(25,18,8,0.98));
  border:1px solid rgba(197,165,90,0.2);
  box-shadow:0 0 60px rgba(0,0,0,0.6),0 0 30px rgba(92,58,30,0.15),inset 0 0 40px rgba(0,0,0,0.3);
  position:relative;
}
.dice-panel::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(197,165,90,0.3),transparent);
}
.dice-panel::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(197,165,90,0.3),transparent);
}
.dice-title{
  font-family:var(--font-heading);font-size:1.4rem;color:var(--gold);
  letter-spacing:0.3em;margin-bottom:20px;
  text-shadow:0 2px 6px rgba(0,0,0,0.5);
}
.dice-info{margin-bottom:24px;}
.dice-requirement{
  font-size:0.78rem;color:rgba(245,230,200,0.5);margin-bottom:8px;
  letter-spacing:0.04em;
}
.dice-difficulty{
  display:inline-block;padding:3px 12px;margin-bottom:10px;
  font-size:0.75rem;letter-spacing:0.15em;
  border:1px solid rgba(197,165,90,0.2);background:rgba(0,0,0,0.25);
}
.dice-threshold{
  font-size:0.82rem;color:rgba(245,230,200,0.6);letter-spacing:0.06em;
}
.dice-threshold strong{color:var(--gold);font-size:1rem;}
.dice-face{
  width:100px;height:100px;margin:20px auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:2.8rem;color:var(--gold);
  border:2px solid rgba(197,165,90,0.25);
  background:linear-gradient(135deg,rgba(40,30,15,0.9),rgba(25,18,8,0.95));
  box-shadow:0 4px 20px rgba(0,0,0,0.4),inset 0 0 15px rgba(0,0,0,0.3);
  cursor:pointer;transition:transform 0.1s;
  user-select:none;
}
.dice-face:hover{transform:scale(1.05)}
.dice-face.rolling{animation:diceShake 0.12s infinite;}
@keyframes diceShake{
  0%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(-8deg) scale(1.05)}
  50%{transform:rotate(6deg) scale(0.95)}
  75%{transform:rotate(-4deg) scale(1.03)}
  100%{transform:rotate(0deg) scale(1)}
}
.dice-hint{
  font-size:0.72rem;color:rgba(245,230,200,0.3);margin-top:8px;
  letter-spacing:0.1em;
}
.dice-result{
  margin-top:16px;font-size:1rem;letter-spacing:0.15em;
  animation:fadeIn 0.4s ease;
}
.dice-result.success{color:#C5A55A;text-shadow:0 0 10px rgba(197,165,90,0.4)}
.dice-result.failure{color:#8B4513;text-shadow:0 0 10px rgba(139,69,19,0.3)}
.dice-confirm-btn{
  display:inline-block;margin-top:18px;padding:10px 36px;
  background:linear-gradient(180deg,rgba(92,58,30,0.35),rgba(74,42,18,0.5));
  color:var(--gold);font-size:0.85rem;letter-spacing:0.25em;
  border:1px solid rgba(197,165,90,0.2);cursor:pointer;
  transition:all 0.3s;font-family:var(--font-body);
  animation:fadeIn 0.5s ease;
}
.dice-confirm-btn:hover{
  background:linear-gradient(180deg,rgba(92,58,30,0.5),rgba(74,42,18,0.65));
  border-color:rgba(197,165,90,0.4);
  box-shadow:0 4px 16px rgba(92,58,30,0.3);
}
.dice-ink-splash{
  position:absolute;width:200px;height:200px;
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;opacity:0;
  border-radius:50%;
}
.dice-ink-splash.show{
  animation:inkSplash 0.6s ease-out forwards;
}
.dice-ink-splash.success-splash{
  background:radial-gradient(circle,rgba(197,165,90,0.15),transparent 70%);
}
.dice-ink-splash.failure-splash{
  background:radial-gradient(circle,rgba(139,69,19,0.15),transparent 70%);
}
@keyframes inkSplash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  50%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2)}
}

/* Chosen Choice (shown above result) */
.chosen-choice{
  animation:fadeInUp 0.4s ease;padding:14px 18px;margin-bottom:12px;
  background:linear-gradient(135deg,rgba(30,24,16,0.75),rgba(36,28,18,0.6));
  border:1px solid rgba(197,165,90,0.18);
  border-left:3px solid var(--gold);
  position:relative;
}
.chosen-choice-title{
  font-size:0.88rem;font-weight:700;color:var(--gold);
  margin-bottom:6px;letter-spacing:0.02em;
  text-shadow:0 1px 3px rgba(0,0,0,0.3);line-height:1.6;
}
.chosen-choice-desc{
  font-size:0.76rem;color:rgba(245,230,200,0.45);line-height:1.7;
}

/* Result Panel */
.result-panel{
  animation:fadeInUp 0.5s ease;padding:24px;
  background:linear-gradient(180deg,rgba(24,18,10,0.9),rgba(30,24,16,0.85));
  border:1px solid rgba(197,165,90,0.12);
  margin-bottom:24px;position:relative;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.2),0 4px 16px rgba(0,0,0,0.2);
}
.result-panel::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(197,165,90,0.2),transparent);
}
.result-title{
  font-size:0.68rem;color:rgba(197,165,90,0.6);letter-spacing:0.3em;
  margin-bottom:16px;padding:5px 0;text-align:center;
  border-bottom:1px solid rgba(197,165,90,0.08);
}
.result-changes{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;justify-content:center;
}
.result-change-item{
  font-size:0.76rem;padding:5px 12px;
  border:1px solid rgba(197,165,90,0.08);
  font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,0.15);
}
.result-change-item.positive{color:#C5A55A;border-color:rgba(197,165,90,0.2)}
.result-change-item.negative{color:#8B4513;border-color:rgba(139,69,19,0.2)}
.result-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;justify-content:center}
.result-tag{
  font-size:0.65rem;padding:2px 7px;
  background:rgba(92,58,30,0.1);border:1px solid rgba(92,58,30,0.25);
  color:var(--red-light);
}
.result-comment{
  font-size:0.82rem;color:rgba(245,230,200,0.5);line-height:1.9;
  padding:16px 18px;
  background:rgba(0,0,0,0.2);
  border-left:2px solid var(--red);font-style:italic;
  box-shadow:inset 0 0 15px rgba(0,0,0,0.15);
}
.result-comment::before{
  content:'【回音】';color:rgba(197,165,90,0.5);font-style:normal;
  font-size:0.62rem;letter-spacing:0.15em;display:block;margin-bottom:6px;
}
.next-event-btn{
  display:block;margin:20px auto 0;padding:12px 44px;
  background:linear-gradient(180deg,rgba(92,58,30,0.35),rgba(74,42,18,0.5));
  color:var(--gold);
  border:1px solid rgba(197,165,90,0.2);letter-spacing:0.25em;
  font-size:0.85rem;transition:all 0.3s;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.next-event-btn:hover{
  background:linear-gradient(180deg,rgba(92,58,30,0.5),rgba(74,42,18,0.65));
  border-color:rgba(197,165,90,0.4);
  box-shadow:0 4px 16px rgba(92,58,30,0.3);
  transform:translateY(-1px);
}

/* --- RIGHT PANEL (Court Relations) --- */
.panel-right{
  padding:0;position:relative;overflow:hidden;
  background:linear-gradient(225deg,rgba(18,14,8,0.9) 0%,rgba(24,19,12,0.85) 100%);
  border-left:2px solid rgba(197,165,90,0.12);
  box-shadow:inset 8px 0 16px rgba(0,0,0,0.15);
}
.panel-right::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.3);
}
.panel-right .panel-section{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(197,165,90,0.06);
}
.attitude-item{
  margin-bottom:14px;padding:10px 12px;
  background:linear-gradient(135deg,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
  border:1px solid rgba(197,165,90,0.06);
  position:relative;
}
.attitude-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;
}
.attitude-name{
  font-size:0.76rem;color:rgba(245,230,200,0.5);letter-spacing:0.08em;
}
.attitude-tier{
  font-size:0.68rem;font-weight:700;letter-spacing:0.08em;
  padding:1px 8px;
}
.attitude-tier.tier-0{color:#8B4513;background:rgba(139,69,19,0.10);border:1px solid rgba(139,69,19,0.18)}
.attitude-tier.tier-1{color:#9A6B3A;background:rgba(154,107,58,0.08)}
.attitude-tier.tier-2{color:#A07848;background:rgba(160,120,72,0.06)}
.attitude-tier.tier-3{color:rgba(197,165,90,0.45)}
.attitude-tier.tier-4{color:#B8963C;background:rgba(184,150,60,0.06)}
.attitude-tier.tier-5{color:var(--gold);background:rgba(197,165,90,0.08)}
.attitude-tier.tier-6{color:#D4B86A;background:rgba(212,184,106,0.10);border:1px solid rgba(212,184,106,0.18)}
.attitude-tier.tier-locked{color:#444;background:rgba(60,60,60,0.15);border:1px solid rgba(60,60,60,0.2)}
.attitude-locked .attitude-name{color:rgba(100,100,100,0.5)}
.attitude-locked .attitude-val{color:rgba(100,100,100,0.35)}
.attitude-locked .attitude-bar{border-color:rgba(60,60,60,0.15)}
.attitude-locked{opacity:0.5}
.attitude-bar{
  height:10px;
  background:rgba(0,0,0,0.4);
  position:relative;overflow:hidden;
  border:1px solid rgba(197,165,90,0.06);
  border-radius:4px;
}
.attitude-bar::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(245,230,200,0.04);z-index:1;
}
.attitude-fill{
  height:100%;transition:width 0.6s ease;
  box-shadow:0 0 8px rgba(197,165,90,0.15);
  border-radius:4px;
}
/* attitude bar colors now set dynamically via inline style */
.attitude-val{
  font-size:0.58rem;color:rgba(245,230,200,0.45);text-align:right;margin-top:3px;
  font-variant-numeric:tabular-nums;
}

/* ============================
   MOBILE RESPONSIVE OVERHAUL
   ============================ */

/* --- Tablet: <=1024px --- */
@media(max-width:1024px){
  .game-topbar{
    padding:0 12px;height:44px;flex-wrap:nowrap;
  }
  .topbar-rank{font-size:0.78rem;letter-spacing:0.1em}
  .topbar-turn{font-size:0.65rem;padding:3px 10px}
  .topbar-btn{font-size:0.65rem;padding:5px 10px}
  .event-title{font-size:2.2rem}
  .stage-overlay-title{font-size:2.6rem}
}

/* --- Mobile / Tablet: <=1024px portrait only --- */
@media(max-width:1024px) and (orientation:portrait){
  /* Allow game screen to scroll on mobile */
  #game-screen{height:auto !important;overflow:visible !important}

  /* TOPBAR: compact single row */
  .game-topbar{
    padding:0 8px;height:36px;gap:3px;
  }
  .topbar-rank{
    font-size:0.62rem;letter-spacing:0.04em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:40vw;
  }
  .topbar-turn{
    font-size:0.5rem;padding:2px 5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:32vw;letter-spacing:0.04em;
    border-left:1px solid rgba(197,165,90,0.08);
    border-right:1px solid rgba(197,165,90,0.08);
  }
  .topbar-actions{gap:0}
  .topbar-btn{font-size:0.52rem;padding:3px 6px;letter-spacing:0.02em}

  /* GAME LAYOUT: mobile — single column, scrollable */
  .game-layout{
    display:flex !important;flex-direction:column !important;
    max-width:100% !important;position:relative !important;
    height:auto !important;overflow:visible !important;
  }
  .panel-center{
    order:0 !important;flex:none !important;
    padding:10px 10px !important;min-height:0 !important;
    overflow-y:visible !important;
  }

  /* Mobile drawer toggle button — inline in flow */
  .mobile-drawer-toggle{
    display:flex !important;
    order:1 !important;
    position:static !important;
    align-items:center;justify-content:center;gap:6px;
    width:100%;padding:8px 0;
    background:rgba(14,11,7,0.97);
    border:none;border-top:1px solid rgba(197,165,90,0.15);
    color:rgba(197,165,90,0.5);font-size:0.6rem;
    letter-spacing:0.12em;cursor:pointer;
    flex-shrink:0;
  }
  .mobile-drawer-toggle:active{background:rgba(197,165,90,0.05)}
  .drawer-toggle-arrow{font-size:0.5rem}

  /* Side panels: hidden by default, inline when open */
  .panel-left,.panel-right{
    position:static !important;
    display:none !important;
    flex-direction:column !important;
    gap:0 !important;padding:0 !important;
    border:none !important;box-shadow:none !important;
    background:rgba(14,11,7,0.98) !important;
    overflow-y:visible !important;
    transform:none !important;
    width:auto !important;height:auto !important;max-height:none !important;
  }
  .panel-left::before,.panel-right::before{display:none}

  /* When drawer is open: show panels side-by-side in flow */
  .game-layout.drawer-open{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  .game-layout.drawer-open .panel-center{
    grid-column:1 / -1 !important;
  }
  .game-layout.drawer-open .mobile-drawer-toggle{
    grid-column:1 / -1 !important;
  }
  .game-layout.drawer-open .panel-left,
  .game-layout.drawer-open .panel-right{
    display:flex !important;
    border-top:1px solid rgba(197,165,90,0.08) !important;
  }
  .game-layout.drawer-open .panel-right{order:2;grid-column:1}
  .game-layout.drawer-open .panel-left{order:3;grid-column:2}

  .panel-section{
    padding:8px 10px 6px !important;
    border-bottom:1px solid rgba(197,165,90,0.04) !important;
    border-right:none;
  }
  .panel-section:nth-child(even){border-right:none}
  .panel-section-title{
    font-size:0.48rem !important;margin-bottom:6px !important;
    padding:3px 5px !important;letter-spacing:0.15em !important;
  }

  /* Stats: more compact on mobile */
  .stat-item{margin-bottom:4px !important;font-size:0.64rem !important;padding:0 2px !important}
  .stat-name{font-size:0.6rem !important;min-width:24px !important}
  .stat-bar-wrap{height:5px !important;margin:0 5px !important}
  .stat-val{font-size:0.58rem !important;min-width:18px !important}

  /* Attitudes: compact on mobile */
  .attitude-item{
    margin-bottom:5px !important;padding:4px 6px !important;
  }
  .attitude-header{margin-bottom:3px}
  .attitude-name{font-size:0.62rem !important}
  .attitude-tier{font-size:0.54rem !important;padding:1px 4px !important}
  .attitude-bar{height:5px !important}
  .attitude-val{font-size:0.46rem !important;margin-top:1px !important}

  /* Tags: tighter */
  .tags-container{gap:2px !important}
  .tag-stamp{font-size:0.48rem !important;padding:1px 4px !important}

  /* Player info: tighter */
  .player-info-row{padding:3px 0 !important}
  .player-info-label{font-size:0.58rem !important}
  .player-info-val{font-size:0.6rem !important}

  /* EVENT CONTENT: mobile-optimized */
  .event-stage{font-size:0.55rem;margin-bottom:4px;letter-spacing:0.1em}
  .event-title{
    font-size:1.45rem !important;margin-bottom:3px !important;
  }
  .event-title::after{margin:6px 0 10px !important;width:48px !important}

  /* Speaker */
  .speaker-box{margin-bottom:11px !important}
  .speaker-header{padding-left:6px !important}
  .speaker-avatar{width:26px !important;height:26px !important;font-size:0.55rem !important}
  .speaker-name{font-size:0.72rem !important}
  .speaker-role{font-size:0.5rem !important}
  .speaker-faction{font-size:0.46rem !important}
  .speaker-bubble{
    margin-left:12px !important;margin-top:4px !important;
    padding:8px 11px !important;
  }
  .speaker-line{font-size:0.76rem !important;line-height:1.55 !important}
  .speaker-line::before,.speaker-line::after{font-size:1rem !important}

  /* Narrative, flavor, focus */
  .event-narrative{
    font-size:0.76rem !important;line-height:1.6 !important;
    margin-bottom:10px !important;
  }
  .event-flavor{
    font-size:0.7rem !important;line-height:1.5 !important;
    margin-bottom:10px !important;padding:8px 11px !important;
  }
  .event-focus{
    font-size:0.76rem !important;line-height:1.5 !important;
    margin-bottom:13px !important;padding:8px 0 !important;
  }

  /* Choices: mobile-friendly tap targets */
  .choices-container{gap:5px !important;margin-bottom:11px !important}
  .choice-btn{padding:10px 12px !important}
  .choice-title{font-size:0.76rem !important;margin-bottom:2px !important;line-height:1.42 !important}
  .choice-desc{font-size:0.68rem !important;line-height:1.42 !important}
  .choice-lock-info{font-size:0.6rem !important}
  .choice-unlocked-hint{font-size:0.55rem !important}

  /* Risky choice */
  .choice-btn.risky{padding:10px 12px 11px !important}
  .choice-btn.risky .choice-title{font-size:0.76rem !important}
  .choice-btn.risky .choice-desc{font-size:0.68rem !important}
  .choice-risk-info{font-size:0.6rem !important;gap:4px !important;flex-wrap:wrap}
  .dice-trigger-btn{font-size:0.56rem !important;padding:2px 8px !important}

  /* Result panel */
  .result-panel{padding:11px 11px !important;margin-bottom:11px !important}
  .result-title{font-size:0.55rem !important;margin-bottom:8px !important}
  .result-changes{gap:4px !important;margin-bottom:8px !important}
  .result-change-item{font-size:0.65rem !important;padding:3px 7px !important}
  .result-tags{gap:3px !important;margin-bottom:8px !important}
  .result-tag{font-size:0.52rem !important}
  .result-comment{
    font-size:0.72rem !important;line-height:1.55 !important;
    padding:8px 11px !important;
  }
  .result-comment::before{font-size:0.5rem !important}
  .next-event-btn{
    padding:9px 26px !important;font-size:0.72rem !important;
    margin:10px auto 0 !important;
  }

  /* Act ending promotion paths on mobile */
  .act-ending-section .choice-btn{padding:12px 12px !important}

  /* Stage transition overlay */
  .stage-overlay-title{font-size:2rem !important;letter-spacing:0.1em !important}
  .stage-overlay-sub{font-size:0.75rem !important;letter-spacing:0.15em !important}
  .stage-overlay::before{inset:20px !important}

  /* Rank up toast */
  .rank-up-toast{
    top:48px !important;padding:10px 24px !important;
    max-width:80vw;
  }
  .rank-up-toast .rank-label{font-size:0.58rem !important}
  .rank-up-toast .rank-new{font-size:0.95rem !important}

  /* Modal */
  .modal-panel{padding:24px 18px !important;max-width:94vw !important}

  /* Ending screen */
  .ending-title{font-size:2.2rem !important}
  .ending-emotion{font-size:0.76rem !important;letter-spacing:0.1em !important;margin-bottom:17px !important}
  .ending-narrative{font-size:0.76rem !important;line-height:1.6 !important;margin-bottom:17px !important}
  .ending-stats{gap:4px !important;margin-bottom:18px !important}
  .ending-stat{font-size:0.58rem !important;padding:3px 8px !important}
  .ending-replay-btn{font-size:0.76rem !important;padding:10px 30px !important;letter-spacing:0.12em !important}
  .ending-comment{padding:10px !important;margin-top:13px !important}
  .ending-comment-text{font-size:0.72rem !important;line-height:1.55 !important}

  /* Title screen mobile */
  .title-bg-image{
    background-image:url('title-bg-mobile.webp') !important;
    background-position:center 30% !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    opacity:0.08 !important;
    mix-blend-mode:screen !important;
    filter:sepia(0.4) !important;
    z-index:1 !important;
  }
  .title-bg-vignette{
    z-index:6 !important;
  }
  .title-frame{
    min-width:0 !important;width:calc(100% - 32px) !important;
    padding:48px 24px !important;box-sizing:border-box !important;
  }
  .title-frame::after{inset:4px !important}
  .title-main{
    font-size:2.6rem !important;letter-spacing:0.3em !important;
    margin-bottom:8px !important;
  }
  .title-main::after{margin:12px auto 0 !important}
  .title-sub{
    font-size:0.78rem !important;letter-spacing:0.35em !important;
    margin-bottom:24px !important;
  }
  .title-tagline{
    font-size:0.78rem !important;margin-bottom:32px !important;
    max-width:100% !important;line-height:1.9 !important;
  }
  .title-buttons{
    flex-direction:column !important;gap:10px !important;
    align-items:center !important;width:100% !important;
  }
  .title-btn{
    font-size:0.82rem !important;padding:12px 0 !important;
    min-width:0 !important;width:100% !important;max-width:260px !important;
    letter-spacing:0.3em !important;
  }
  .title-sound-toggle{
    top:14px !important;right:14px !important;
    font-size:0.65rem !important;padding:4px 10px !important;
  }
  .title-version-topleft{
    top:14px !important;left:14px !important;
    font-size:0.5rem !important;
  }
  .title-follow-btn{font-size:0.55rem !important;padding:3px 10px !important}
  .title-bottom-bar{bottom:14px !important;gap:10px !important}

  /* Character select mobile */
  .select-header h2{font-size:1.8rem !important;letter-spacing:0.2em !important}
  .select-intro{font-size:0.75rem !important;padding:0 14px !important}
  .char-card{padding:20px 16px !important}
  .char-card-name{font-size:1.5rem !important}
  .char-card-desc{font-size:0.74rem !important;line-height:1.6 !important}
}

/* --- Extra small: <=380px --- */
/* Mobile font-size boost (phones ≤600px) */
@media(max-width:600px) and (orientation:portrait){
  html{font-size:17.5px}
}

/* Landscape on phones: show PC layout but scaled down ~30% */
@media(max-width:1024px) and (orientation:landscape){
  html{zoom:0.7}
  body{min-height:calc(100vh / 0.7)}
  #game-screen{height:calc(100vh / 0.7)}
  .game-layout{height:calc((100vh / 0.7) - 48px)}
  .screen{min-height:calc(100vh / 0.7)}
  .panel-left,.panel-right{
    overflow-y:auto;
    scrollbar-width:none;
  }
  .panel-left::-webkit-scrollbar,.panel-right::-webkit-scrollbar{display:none}
}

@media(max-width:380px) and (orientation:portrait){
  .topbar-rank{font-size:0.52rem;max-width:35vw}
  .topbar-turn{font-size:0.42rem;max-width:28vw;padding:2px 3px}
  .topbar-btn{font-size:0.44rem;padding:2px 4px}
  .event-title{font-size:1.2rem !important}
  .speaker-line{font-size:0.7rem !important}
  .event-narrative{font-size:0.7rem !important}
  .choice-title{font-size:0.7rem !important}
  .choice-desc{font-size:0.62rem !important}
  .panel-left,.panel-right{
    flex-direction:column !important;
  }
  .title-frame{padding:36px 18px !important}
  .title-main{font-size:2.2rem !important;letter-spacing:0.22em !important}
  .title-sub{font-size:0.7rem !important;letter-spacing:0.25em !important}
  .title-btn{max-width:220px !important;letter-spacing:0.2em !important}
}


/* ============================
   ENDING SCREEN
   ============================ */
#ending-screen{
  justify-content:center;align-items:center;text-align:center;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(197,165,90,0.04) 9px,rgba(197,165,90,0.04) 10px),
    repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(197,165,90,0.04) 9px,rgba(197,165,90,0.04) 10px),
    radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,0.5) 100%),
    linear-gradient(150deg,#0A0807 0%,#1C1610 25%,#2A1A10 50%,#1C1610 75%,#0A0807 100%);
  padding:40px 20px;
}
#endingContent{
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:680px;margin:0 auto;
}
.ending-badge{
  font-size:0.72rem;color:var(--red-light);letter-spacing:0.35em;
  margin-bottom:14px;
  padding:4px 16px;border:1px solid rgba(92,58,30,0.2);display:inline-block;
}
.ending-title{
  font-family:var(--font-heading);font-size:3.8rem;color:var(--gold);
  text-shadow:0 0 40px rgba(197,165,90,0.15),0 2px 4px rgba(0,0,0,0.4);
  margin-bottom:8px;
}
.ending-emotion{
  font-size:0.95rem;color:rgba(245,230,200,0.35);letter-spacing:0.25em;
  margin-bottom:36px;
}
.ending-narrative{
  max-width:600px;width:100%;font-size:0.9rem;color:rgba(245,230,200,0.55);
  line-height:2.1;margin-bottom:36px;text-align:left;text-indent:2em;
  margin-left:auto;margin-right:auto;
}
.ending-stats{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:40px;
}
.ending-stat{
  padding:5px 14px;font-size:0.72rem;
  border:1px solid rgba(197,165,90,0.1);color:rgba(245,230,200,0.4);
  background:rgba(197,165,90,0.02);font-variant-numeric:tabular-nums;
}
.ending-stat-zero{
  color:#e84040;border-color:rgba(232,64,64,0.4);
  background:rgba(139,0,0,0.15);font-weight:700;
}
.ending-replay-btn{
  background:linear-gradient(135deg,rgba(92,58,30,0.6),var(--blood));
  color:var(--gold);font-size:0.95rem;padding:14px 52px;
  border:1px solid rgba(197,165,90,0.25);letter-spacing:0.3em;
  transition:all 0.3s;position:relative;
}
.ending-replay-btn::after{
  content:'';position:absolute;inset:3px;border:1px solid rgba(197,165,90,0.08);
  pointer-events:none;
}
.ending-replay-btn:hover{
  transform:translateY(-2px);box-shadow:0 8px 30px rgba(92,58,30,0.4);
  border-color:rgba(197,165,90,0.4);
}
.ending-comment{
  max-width:600px;width:100%;margin-top:28px;padding:18px;
  background:rgba(42,35,24,0.5);border-left:2px solid var(--red);
  border-top:1px solid rgba(197,165,90,0.05);
  text-align:left;margin-left:auto;margin-right:auto;box-sizing:border-box;
}
.ending-comment-text{
  font-size:0.82rem;color:rgba(245,230,200,0.45);line-height:1.9;
  font-style:italic;
}
/* Stage transition overlay */
.stage-overlay{
  position:fixed;inset:0;z-index:999;display:flex;
  justify-content:center;align-items:center;flex-direction:column;
  background:rgba(13,10,7,0.96);animation:fadeIn 0.5s ease;
}
.stage-overlay::before{
  content:'';position:absolute;inset:40px;
  border:1px solid rgba(197,165,90,0.06);pointer-events:none;
}
.stage-overlay-title{
  font-family:var(--font-heading);font-size:3.2rem;color:var(--gold);
  text-shadow:0 0 40px rgba(197,165,90,0.2);margin-bottom:10px;
  animation:fadeInUp 0.8s ease both;letter-spacing:0.15em;
}
.stage-overlay-sub{
  font-size:0.85rem;color:rgba(245,230,200,0.35);letter-spacing:0.25em;
  animation:fadeInUp 0.8s ease 0.2s both;
}
/* Rank up notification */
.rank-up-toast{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:200;
  background:linear-gradient(180deg,rgba(42,35,24,0.97),rgba(32,26,18,0.97));
  border:1px solid var(--gold);
  padding:14px 32px;animation:slideDown 0.5s ease,fadeIn 0.5s ease;
  text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.4),0 0 30px rgba(197,165,90,0.08);
}
.rank-up-toast::before{
  content:'';position:absolute;inset:3px;border:1px solid rgba(197,165,90,0.1);
  pointer-events:none;
}
.rank-up-toast .rank-label{font-size:0.65rem;color:rgba(197,165,90,0.5);letter-spacing:0.2em}
.rank-up-toast .rank-new{font-size:1.1rem;color:var(--gold);margin-top:4px;font-weight:700;letter-spacing:0.1em}

/* ============================
   MODAL (Save/Load)
   ============================ */
.game-modal{
  position:fixed;inset:0;z-index:1000;display:flex;
  justify-content:center;align-items:center;
  opacity:0;pointer-events:none;transition:opacity 0.3s;
}
.game-modal.active{opacity:1;pointer-events:auto}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(5,3,1,0.85);
  backdrop-filter:blur(2px);
}
.modal-panel{
  position:relative;width:440px;max-width:90vw;max-height:85vh;overflow-y:auto;
  background:linear-gradient(180deg,#1A1510,#141008);
  border:2px solid rgba(197,165,90,0.15);
  box-shadow:0 16px 60px rgba(0,0,0,0.6),inset 0 0 40px rgba(0,0,0,0.3);
  padding:32px 28px;
  animation:fadeInUp 0.3s ease;
}
.modal-panel::before{
  content:'';position:absolute;top:-1px;left:20px;right:20px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(197,165,90,0.2),transparent);
}
.modal-title{
  font-size:0.7rem;color:rgba(197,165,90,0.6);letter-spacing:0.35em;
  text-align:center;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid rgba(197,165,90,0.08);
}
.modal-hint{
  font-size:0.8rem;color:rgba(245,230,200,0.4);line-height:1.8;
  text-align:center;margin-bottom:20px;
}
.save-slots{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
button.save-slot{
  appearance:none;-webkit-appearance:none;
  font:inherit;text-align:left;width:100%;
  display:block;
}
.save-slot{
  padding:14px 16px;cursor:pointer;position:relative;
  background:linear-gradient(135deg,rgba(30,24,16,0.8),rgba(24,18,10,0.7));
  border:1px solid rgba(197,165,90,0.08);
  transition:all 0.25s;
}
.save-slot:hover{
  border-color:rgba(197,165,90,0.25);
  box-shadow:0 2px 12px rgba(0,0,0,0.2),inset 0 0 15px rgba(92,58,30,0.04);
}
.save-slot.disabled{cursor:default;opacity:0.4}
.save-slot.disabled:hover{border-color:rgba(197,165,90,0.08);box-shadow:none}
.save-slot.auto-save-slot{
  border-left:2px solid rgba(120,180,120,0.35);
  background:linear-gradient(135deg,rgba(25,30,20,0.85),rgba(20,25,15,0.7));
}
.save-slot.auto-save-slot:hover{
  border-color:rgba(120,180,120,0.4);
  border-left-color:rgba(120,180,120,0.5);
}
.save-slot.auto-save-slot.readonly{
  cursor:default;opacity:0.6;
}
.save-slot.auto-save-slot.readonly:hover{
  border-color:rgba(120,180,120,0.35);
  border-left-color:rgba(120,180,120,0.35);
  box-shadow:none;
}
.slot-auto-tag{
  font-size:0.55rem;color:rgba(120,180,120,0.7);
  border:1px solid rgba(120,180,120,0.25);
  padding:1px 5px;letter-spacing:0.1em;
}
.slot-header{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;
}
.slot-num{font-size:0.68rem;color:rgba(197,165,90,0.5);letter-spacing:0.15em}
.slot-date{font-size:0.62rem;color:rgba(245,230,200,0.2)}
.slot-info{
  display:flex;gap:12px;align-items:baseline;margin-bottom:4px;
}
.slot-char{
  font-size:0.88rem;color:var(--gold);font-weight:700;
  text-shadow:0 0 6px rgba(197,165,90,0.1);
}
.slot-rank{font-size:0.72rem;color:rgba(245,230,200,0.35)}
.slot-event{font-size:0.72rem;color:rgba(245,230,200,0.3);display:flex;justify-content:space-between;align-items:baseline}
.slot-empty-text{
  font-size:0.78rem;color:rgba(245,230,200,0.15);text-align:center;
  padding:8px 0;
}
.slot-empty-msg{
  font-size:0.82rem;color:rgba(245,230,200,0.25);text-align:center;
  padding:24px 0;
}
.slot-delete{
  position:absolute;top:10px;right:10px;
  background:none;border:1px solid rgba(92,58,30,0.2);
  color:rgba(92,58,30,0.5);font-size:0.6rem;padding:2px 6px;
  cursor:pointer;transition:all 0.2s;
}
.slot-delete:hover{color:var(--red-light);border-color:rgba(92,58,30,0.5);background:rgba(92,58,30,0.08)}
.modal-actions{
  display:flex;gap:10px;justify-content:center;margin-bottom:16px;
}
.modal-action-btn{
  padding:10px 28px;font-size:0.82rem;letter-spacing:0.15em;
  transition:all 0.25s;
}
.modal-action-btn.confirm{
  background:linear-gradient(180deg,rgba(92,58,30,0.35),rgba(74,42,18,0.5));
  color:var(--gold);border:1px solid rgba(197,165,90,0.2);
}
.modal-action-btn.confirm:hover{
  background:linear-gradient(180deg,rgba(92,58,30,0.5),rgba(74,42,18,0.65));
  border-color:rgba(197,165,90,0.4);
}
.modal-action-btn.cancel{
  background:transparent;color:rgba(245,230,200,0.35);
  border:1px solid rgba(197,165,90,0.08);
}
.modal-action-btn.cancel:hover{color:rgba(245,230,200,0.5);border-color:rgba(197,165,90,0.15)}
.modal-close-btn{
  display:block;padding:8px 32px;margin:0 auto;
  background:transparent;color:rgba(197,165,90,0.4);
  border:1px solid rgba(197,165,90,0.1);font-size:0.78rem;
  letter-spacing:0.15em;transition:all 0.25s;
}
.modal-close-btn:hover{color:var(--gold);border-color:rgba(197,165,90,0.25)}
.modal-close-btn.restart{color:rgba(180,80,60,0.5);border-color:rgba(180,80,60,0.15)}
.modal-close-btn.restart:hover{color:rgba(210,90,60,0.85);border-color:rgba(210,90,60,0.3)}
.modal-btn-row{display:flex;justify-content:center;gap:16px;margin-top:4px}

/* Rank Tree Modal */
.game-modal.rank-tree .modal-panel{width:880px;max-width:96vw;padding:36px 28px 28px}
.rank-tree-title{
  font-family:var(--font-heading);font-size:1.6rem;color:var(--gold);
  text-align:center;margin-bottom:6px;letter-spacing:0.15em;
}
.rank-tree-sub{
  text-align:center;font-size:0.75rem;color:rgba(245,230,200,0.35);
  margin-bottom:20px;letter-spacing:0.1em;
}
.rank-tree-table{
  width:100%;border-collapse:separate;border-spacing:6px 4px;
}
.rank-tree-table th{
  text-align:center;padding:8px 4px 10px;
  font-size:0.72rem;letter-spacing:0.12em;font-weight:700;
  border-bottom:1px solid rgba(197,165,90,0.12);
  color:rgba(245,230,200,0.35);
}
.rank-tree-table th.active-col{color:var(--gold)}
.rank-tree-table th .rch-char{font-size:0.62rem;color:rgba(245,230,200,0.25);font-weight:400;display:block;margin-top:2px}
.rank-tree-table th.active-col .rch-char{color:rgba(197,165,90,0.45)}
.rt-rank-label{
  font-size:0.58rem;color:rgba(245,230,200,0.18);letter-spacing:0.08em;
  text-align:right;padding-right:8px;white-space:nowrap;vertical-align:middle;
  width:52px;
}
.rank-tree-cell{
  position:relative;text-align:center;padding:6px 4px;
  border:1px solid rgba(197,165,90,0.06);
  background:rgba(20,16,10,0.5);
  transition:all 0.3s;vertical-align:middle;
}
.rank-tree-cell .rtc-title{font-size:0.78rem;color:rgba(245,230,200,0.25);font-weight:700;letter-spacing:0.05em}
.rank-tree-cell.empty{border-color:transparent;background:transparent}
.rank-tree-cell.on-path{
  border-color:rgba(197,165,90,0.1);background:rgba(30,24,16,0.6);
}
.rank-tree-cell.on-path .rtc-title{color:rgba(245,230,200,0.45)}
.rank-tree-cell.reached{
  border-color:rgba(197,165,90,0.3);background:rgba(55,44,26,0.6);
  box-shadow:0 0 10px rgba(197,165,90,0.05);
}
.rank-tree-cell.reached .rtc-title{color:var(--gold)}
.rank-tree-cell.current{
  border-color:var(--gold);
  background:linear-gradient(180deg,rgba(92,58,30,0.35),rgba(80,40,10,0.4));
  box-shadow:0 0 20px rgba(197,165,90,0.12),inset 0 0 16px rgba(197,165,90,0.04);
}
.rank-tree-cell.current .rtc-title{color:#f5e6c8}
.rank-tree-cell.current::before{
  content:'▶ 当前';position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-size:0.55rem;color:var(--gold);letter-spacing:0.08em;white-space:nowrap;
}
.rank-tree-legend{
  display:flex;gap:16px;justify-content:center;margin-top:18px;
  font-size:0.68rem;color:rgba(245,230,200,0.3);
}
.rank-tree-legend span{display:flex;align-items:center;gap:5px}
.rank-tree-legend .leg-dot{width:8px;height:8px;border:1px solid rgba(197,165,90,0.2)}
.rank-tree-legend .leg-dot.lg-cur{border-color:var(--gold);background:rgba(92,58,30,0.4)}
.rank-tree-legend .leg-dot.lg-done{border-color:rgba(197,165,90,0.35);background:rgba(55,44,26,0.6)}
.rank-tree-legend .leg-dot.lg-path{border-color:rgba(197,165,90,0.15);background:rgba(30,24,16,0.6)}
.rank-tree-legend .leg-dot.lg-lock{background:rgba(20,16,10,0.5)}
/* Custom scrollbar */
.modal-panel::-webkit-scrollbar{width:6px}
.modal-panel::-webkit-scrollbar-track{background:rgba(10,8,6,0.4);border-left:1px solid rgba(197,165,90,0.06)}
.modal-panel::-webkit-scrollbar-thumb{
  background:rgba(197,165,90,0.2);border-radius:3px;
}
.modal-panel::-webkit-scrollbar-thumb:hover{background:rgba(197,165,90,0.35)}
.modal-panel{scrollbar-width:thin;scrollbar-color:rgba(197,165,90,0.2) rgba(10,8,6,0.4)}
.game-toast{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%);z-index:1001;
  background:linear-gradient(180deg,rgba(30,24,16,0.95),rgba(20,14,8,0.95));
  border:1px solid rgba(197,165,90,0.15);
  padding:10px 28px;font-size:0.8rem;color:rgba(245,230,200,0.6);
  letter-spacing:0.1em;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
  animation:fadeInUp 0.3s ease;
}