/* MAINLAND — style.css — Royal Dark Edition */
:root {
  --bg:        #080612;
  --surface:   #100c20;
  --surface2:  #1a1430;
  --border:    #2a1e50;
  --border2:   #3d2e70;
  --gold:      #d4aa3a;
  --gold-dim:  #7a601a;
  --gold-light:#f0cc60;
  --coral:     #c84b3c;
  --teal:      #3cb8a8;
  --violet:    #6040c0;
  --text:      #ede5d0;
  --text-dim:  #7a7090;
  --hp:        #c84b3c;
  --xp:        #4060d0;
  --font-d:    'Cinzel', serif;
  --font-b:    'Crimson Pro', Georgia, serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);overflow:hidden;height:100dvh;width:100dvw}

/* ── SCREENS ────────────────────────── */
.screen{position:fixed;inset:0;display:none}
.screen.active{display:flex}
.overlay{align-items:center;justify-content:center;background:rgba(4,2,12,0.92);backdrop-filter:blur(8px);z-index:100}

/* ── MENU ───────────────────────────── */
#menu-screen{flex-direction:column;align-items:center;justify-content:center;background:var(--bg)}
#menu-canvas{position:absolute;inset:0;pointer-events:none}

.menu-content{
  position:relative;text-align:center;max-width:580px;padding:2rem;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
}

.title-eyebrow{
  font-family:var(--font-d);font-size:.72rem;letter-spacing:.28em;
  color:var(--gold-dim);text-transform:uppercase;
}

.game-title{
  font-family:var(--font-d);font-size:clamp(4rem,13vw,7rem);font-weight:900;
  letter-spacing:.14em;line-height:1;
  background:linear-gradient(160deg,#f0cc60 0%,#d4aa3a 40%,#a07820 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 40px rgba(212,170,58,.4));
}

.title-divider{display:flex;align-items:center;gap:12px;width:100%;max-width:300px}
.title-divider span:first-child,.title-divider span:last-child{
  flex:1;height:1px;background:linear-gradient(to right,transparent,var(--gold-dim));
}
.title-divider span:last-child{background:linear-gradient(to left,transparent,var(--gold-dim))}
.diamond{color:var(--gold);font-size:.9rem}

.tagline{font-size:1.15rem;color:var(--text-dim);line-height:1.9;font-style:italic;font-weight:300}
.tagline em{color:var(--gold-light);font-style:normal;font-weight:400}

.btn-primary{
  font-family:var(--font-d);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(135deg,#c89020,#d4aa3a,#b87820);
  color:#080612;border:none;padding:.8rem 2.8rem;border-radius:2px;cursor:pointer;
  position:relative;overflow:hidden;
  box-shadow:0 0 30px rgba(212,170,58,.2),inset 0 1px 0 rgba(255,255,255,.15);
  transition:all .2s;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .4s;
}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-primary:hover{box-shadow:0 0 50px rgba(212,170,58,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-inner{position:relative;z-index:1}

.key-legend{
  display:flex;gap:1.2rem;font-size:.82rem;color:var(--text-dim);
  flex-wrap:wrap;justify-content:center;
}
kbd{
  font-family:var(--font-b);background:var(--surface2);
  border:1px solid var(--border2);border-radius:3px;
  padding:1px 7px;font-size:.78rem;color:var(--text);
}
.ai-badge{
  font-size:.72rem;color:var(--teal);
  border:1px solid rgba(60,184,168,.25);padding:4px 14px;
  border-radius:20px;letter-spacing:.04em;
}

/* ── GAME CANVAS ────────────────────── */
#game-screen{background:#050310}
#game-canvas{display:block;position:absolute;inset:0}

/* ── HUD ────────────────────────────── */
#hud{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:12px 14px;pointer-events:none;z-index:10;
}
#hud-left{
  background:rgba(8,6,18,.88);
  border:1px solid var(--border);border-radius:6px;
  padding:10px 14px;min-width:220px;backdrop-filter:blur(10px);
  border-top:1px solid var(--gold-dim);
}
.hud-name{
  font-family:var(--font-d);font-size:.68rem;letter-spacing:.22em;
  color:var(--gold);margin-bottom:7px;
}
.bar-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.bar-label{font-family:var(--font-d);font-size:.6rem;letter-spacing:.1em;color:var(--text-dim);width:22px}
.bar-track{flex:1;height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.bar{height:100%;border-radius:4px;transition:width .25s}
.hp-bar{background:linear-gradient(90deg,#a03030,#e05050)}
.xp-bar{background:linear-gradient(90deg,#3050a0,#5070d0)}
.bar-num{font-size:.68rem;color:var(--text-dim);min-width:56px}
#stat-row{font-size:.7rem;color:var(--text-dim);margin-top:4px}
#stat-row span{color:var(--text)}

#hud-center{text-align:center;pointer-events:none}
#floor-label{
  font-family:var(--font-d);font-size:.78rem;letter-spacing:.22em;
  color:var(--gold-dim);text-transform:uppercase;margin-top:4px;
}
#kill-counter{font-size:.68rem;color:var(--text-dim);margin-top:3px}

#hud-right canvas{
  display:block;background:rgba(8,6,18,.88);
  border:1px solid var(--border);border-radius:5px;padding:3px;
  backdrop-filter:blur(10px);border-top:1px solid var(--gold-dim);
}

/* ── DASH BAR ───────────────────────── */
#dash-bar-wrap{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;pointer-events:none;
}
#dash-bar-wrap .bar-label{font-size:.6rem;letter-spacing:.12em;color:var(--text-dim)}
#dash-bar-wrap .bar-track{width:80px;height:5px}
#dash-bar{background:linear-gradient(90deg,#3cb8a8,#60d4c0);width:100%}

/* ── BOSS BAR ───────────────────────── */
#boss-bar-wrap{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:360px;text-align:center;z-index:11;pointer-events:none;
}
#boss-name-label{
  font-family:var(--font-d);font-size:.78rem;letter-spacing:.2em;
  color:var(--coral);margin-bottom:4px;text-transform:uppercase;
}
#boss-phase-label{font-size:.65rem;color:#ff8060;margin-top:3px;letter-spacing:.08em}
.boss-track{height:14px;background:rgba(255,255,255,.06);border-radius:7px;border:1px solid rgba(200,75,60,.4);overflow:hidden}
#boss-hp-bar{height:100%;background:linear-gradient(90deg,#8a2020,#c84040);border-radius:7px;transition:width .2s}

/* ── DIALOGUE ───────────────────────── */
#dialogue-wrap{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  width:min(700px,calc(100vw - 28px));
  background:rgba(8,6,18,.96);
  border:1px solid var(--gold-dim);border-radius:8px;
  padding:0;z-index:20;backdrop-filter:blur(14px);
  box-shadow:0 0 60px rgba(212,170,58,.1),0 20px 60px rgba(0,0,0,.6);
  overflow:hidden;
}
#dialogue-header{
  background:linear-gradient(90deg,rgba(212,170,58,.12),rgba(212,170,58,.04));
  border-bottom:1px solid rgba(212,170,58,.2);
  padding:10px 20px;display:flex;align-items:center;gap:12px;
}
#dialogue-speaker{
  font-family:var(--font-d);font-size:.78rem;letter-spacing:.16em;
  color:var(--gold);text-transform:uppercase;
}
#dialogue-role{font-size:.72rem;color:var(--text-dim);font-style:italic}
#dialogue-text{
  font-size:1.08rem;line-height:1.75;color:var(--text);
  min-height:56px;font-style:italic;font-weight:300;
  padding:16px 20px 10px;
}
.dialogue-loading{color:var(--text-dim)!important;font-style:normal!important}
#dialogue-input-wrap{display:flex;gap:8px;padding:0 20px 12px}
#dialogue-input{
  flex:1;background:var(--surface2);border:1px solid var(--border2);
  border-radius:4px;color:var(--text);font-family:var(--font-b);
  font-size:1rem;padding:8px 12px;outline:none;
}
#dialogue-input:focus{border-color:var(--gold-dim)}
#btn-send{
  font-family:var(--font-d);font-size:.72rem;letter-spacing:.08em;
  background:var(--gold);color:var(--bg);border:none;
  border-radius:4px;padding:8px 16px;cursor:pointer;pointer-events:all;
  white-space:nowrap;
}
#btn-send:hover{background:var(--gold-light)}
#dialogue-hint{
  font-size:.72rem;color:var(--text-dim);padding:0 20px 12px;letter-spacing:.04em;
}

/* ── TOASTS ─────────────────────────── */
#toast-log{
  position:absolute;top:90px;left:16px;z-index:15;
  pointer-events:none;display:flex;flex-direction:column;gap:5px;
}
.toast{
  background:rgba(8,6,18,.9);border-left:2px solid var(--gold-dim);
  color:var(--text);font-size:.8rem;padding:5px 12px;
  border-radius:0 4px 4px 0;backdrop-filter:blur(4px);
  animation:slideIn .2s ease;transition:opacity .5s;
}
.toast.good{border-left-color:#50c878}
.toast.bad{border-left-color:var(--coral)}
.toast.info{border-left-color:var(--teal)}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

/* ── OVERLAYS ───────────────────────── */
.overlay-box{
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  background:var(--surface);border:1px solid var(--border2);
  border-radius:12px;padding:2.5rem 3rem;max-width:420px;width:90%;
  border-top:1px solid var(--gold-dim);
  box-shadow:0 0 80px rgba(0,0,0,.8);
}
.levelup-box{border-top-color:var(--gold)}
.overlay-icon{font-size:2.5rem;line-height:1}
.overlay-title{font-family:var(--font-d);font-size:1.8rem;font-weight:700;line-height:1.2}
.overlay-sub{font-size:1rem;color:var(--text-dim);font-style:italic;line-height:1.7;font-weight:300}
.overlay-stats{
  font-size:.85rem;color:var(--text-dim);line-height:2;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:6px;padding:.75rem 1.5rem;width:100%;text-align:left;
}
.overlay-stats strong{color:var(--text)}

.loading-rune{
  font-size:3.5rem;color:var(--gold-dim);
  animation:spin 3s linear infinite;display:block;margin-bottom:1rem;
}
@keyframes spin{to{transform:rotate(360deg)}}

.hidden{display:none!important}