:root {
  --bg: #070504;
  --gold: #c9a45c;
  --gold-hi: #f0d28a;
  --gold-dk: #6b5433;
  --text: #d8cdb8;
  --muted: #8f8370;
  --panel: linear-gradient(180deg, #1b1510 0%, #0e0a07 100%);
  --border: #5a4630;
  --red: #b0201a;
  --blue: #3f6ae0;
  --normal: #e6e2d8;
  --magic: #7390ff;
  --rare: #f2d640;
  --legendary: #ff8a1a;
  --serif: 'Cinzel', Georgia, serif;
  --body: 'EB Garamond', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--body); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
canvas#game { position: fixed; inset: 0; display: block; cursor: crosshair; touch-action: none; }
canvas#gpu { position: fixed; inset: 0; display: none; pointer-events: none; }
.touch-only { display: none; }
body.touch .touch-only { display: inline; }
body.touch .desk-only { display: none; }
.hidden { display: none !important; }
kbd { font-family: var(--serif); font-size: 0.75em; color: var(--gold); border: 1px solid var(--gold-dk); border-radius: 3px; padding: 0 3px; margin-left: 2px; }

/* ------------------------------------------------ Buttons */
.btn {
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.06em; color: var(--gold-hi);
  background: linear-gradient(180deg, #3a2a1a, #1a120a); border: 1px solid var(--gold-dk);
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.15), 0 2px 6px rgba(0, 0, 0, 0.6);
  padding: 10px 22px; font-size: 15px; cursor: pointer; border-radius: 2px; transition: all 0.15s;
}
.btn:hover { color: #fff; border-color: var(--gold); background: linear-gradient(180deg, #5a3e22, #2a1a0e); box-shadow: 0 0 14px rgba(255, 160, 60, 0.35); }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn.tiny { padding: 3px 8px; font-size: 10px; letter-spacing: 0.03em; }
.btn.primary { color: #fff; border-color: #c8862a; background: linear-gradient(180deg, #8a3a10, #4a1a06); }
.btn.primary:hover { background: linear-gradient(180deg, #b0501a, #6a2408); }

/* ------------------------------------------------ Menü */
.screen { position: fixed; inset: 0; overflow-y: auto; z-index: 20; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.menu-inner { max-width: 1180px; margin: 0 auto; padding: 28px 20px 30px; text-align: center; }
.title-orn { color: var(--gold-dk); font-size: 22px; }
.title {
  font-family: 'Cinzel Decorative', var(--serif); font-weight: 900; font-size: clamp(44px, 8vw, 92px); margin: 0; line-height: 1;
  background: linear-gradient(180deg, #ffe8b0 0%, #e0a040 45%, #8a3a10 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 100, 20, 0.45)) drop-shadow(0 3px 0 #1a0a04);
  letter-spacing: 0.04em;
}
.subtitle { font-family: var(--serif); color: #b0806a; letter-spacing: 0.35em; text-transform: uppercase; font-size: 13px; margin-top: 8px; }
.lore { max-width: 720px; margin: 18px auto 8px; font-size: 18px; line-height: 1.5; color: #bfb09a; font-style: italic; }
.pick { font-family: var(--serif); color: var(--gold); font-weight: 600; font-size: 16px; letter-spacing: 0.3em; text-transform: uppercase; margin: 22px 0 14px; }
.pick::before, .pick::after { content: '—'; color: var(--gold-dk); margin: 0 12px; }

#heroGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hero-card {
  position: relative; background: var(--panel); border: 1px solid var(--border); cursor: pointer; padding: 10px 8px 12px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}
.hero-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 0 20px rgba(255, 140, 40, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.8); }
.hero-card.sel { border-color: #ff9a3a; box-shadow: 0 0 26px rgba(255, 120, 30, 0.45), inset 0 0 30px rgba(0, 0, 0, 0.8); }
.hero-card canvas { display: block; margin: 0 auto; width: 150px; height: 150px; }
.hero-card .hname { font-family: var(--serif); font-weight: 900; font-size: 22px; color: var(--gold-hi); letter-spacing: 0.05em; }
.hero-card .hclass { font-family: var(--serif); font-size: 12px; color: #c07a4a; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-card .hres { font-size: 12px; color: var(--muted); margin-top: 2px; }
.hero-card .hsave { position: absolute; top: 6px; right: 8px; font-size: 11px; font-family: var(--serif); color: #7ad07a; }

#heroDetail {
  margin: 18px auto 0; max-width: 980px; background: var(--panel); border: 1px solid var(--border); padding: 18px 22px; text-align: left;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}
#heroDetail .dh { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
#heroDetail .dh .n { font-family: var(--serif); font-size: 28px; font-weight: 900; color: var(--gold-hi); }
#heroDetail .dh .c { font-family: var(--serif); color: #c07a4a; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }
#heroDetail .dh .ph { color: var(--muted); font-size: 14px; font-style: italic; }
#heroDetail .dd { font-size: 17px; margin: 6px 0 12px; color: #cbbfa8; }
.skill-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.skill-item { background: rgba(0, 0, 0, 0.35); border: 1px solid #3a2c1c; padding: 8px 10px; }
.skill-item .si-h { display: flex; align-items: center; gap: 8px; }
.skill-item .si-i { font-size: 22px; }
.skill-item .si-n { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 13px; }
.skill-item .si-k { font-size: 11px; color: var(--muted); font-family: var(--serif); }
.skill-item .si-d { font-size: 14px; color: #b8ac96; margin-top: 4px; line-height: 1.3; }
.detail-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.detail-actions .note { color: var(--muted); font-size: 14px; }

.menu-footer { margin-top: 22px; color: var(--muted); font-size: 14px; display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.menu-footer b { color: var(--gold); font-family: var(--serif); font-size: 12px; }

/* ------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button, #hud .slot { pointer-events: auto; }
canvas#game.overlay-only { background: transparent; }
#topLeft { position: absolute; top: 14px; left: 16px; }
#floorLabel { font-family: var(--serif); font-weight: 700; color: var(--gold-hi); font-size: 17px; text-shadow: 0 2px 4px #000; }
#heroLabel { font-family: var(--serif); color: #b09a7a; font-size: 12px; text-shadow: 0 2px 4px #000; margin-top: 2px; }
#buffs { display: flex; gap: 6px; margin-top: 8px; }
.buff { width: 30px; height: 30px; border: 1px solid var(--gold-dk); background: rgba(0, 0, 0, 0.6); display: grid; place-items: center; font-size: 16px; position: relative; }
.buff .bt { position: absolute; bottom: -12px; left: 0; right: 0; font-size: 10px; text-align: center; color: var(--gold); font-family: var(--serif); }
#goldLabel { position: absolute; top: 142px; right: 16px; font-family: var(--serif); color: #f0d060; font-size: 14px; text-shadow: 0 2px 4px #000; }

#targetBar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(420px, 46vw); text-align: center; }
#targetBar .tname { font-family: var(--serif); font-weight: 700; font-size: 15px; text-shadow: 0 2px 4px #000; color: #eee; }
#targetBar .tbar { height: 12px; background: rgba(0, 0, 0, 0.75); border: 1px solid #5a2a1a; margin-top: 3px; }
#targetBar .tfill { height: 100%; background: linear-gradient(180deg, #e03020, #800c08); width: 100%; transition: width 0.08s; }
#targetBar.boss .tbar { height: 16px; border-color: #a0501a; box-shadow: 0 0 12px rgba(255, 80, 20, 0.4); }
#targetBar.boss .tname { font-size: 19px; color: #ff9a5a; }
#targetBar .taff { font-size: 12px; color: #8aaaff; font-family: var(--serif); margin-top: 2px; text-shadow: 0 1px 3px #000; }

#msgs { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 90vw; }
.msg { font-family: var(--serif); font-weight: 700; font-size: 15px; text-shadow: 0 2px 4px #000, 0 0 10px #000; color: var(--text); animation: msgIn 0.25s ease-out; transition: opacity 0.6s; text-align: center; }
.msg.gold { color: #ffd870; font-size: 18px; }
.msg.skill { color: #7ae0ff; }
.msg.warn { color: #ff8a6a; font-size: 13px; }
.msg.info { color: #d8cdb8; font-size: 13px; font-weight: 600; }
.msg.boss { color: #ff5a3a; font-size: 19px; font-style: italic; }
.msg.shrine { color: #e0b0ff; }
.msg.legendary { color: var(--legendary); font-size: 18px; }
.msg.rare { color: var(--rare); }
.msg.magic { color: var(--magic); }
.msg.normal { color: var(--normal); font-size: 13px; }
@keyframes msgIn { from { transform: translateY(-8px) scale(1.1); opacity: 0; } }

#floorTitle { position: absolute; top: 30%; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity 0.8s; }
#floorTitle.show { opacity: 1; }
#floorTitle .ft1 { font-family: 'Cinzel Decorative', var(--serif); font-weight: 900; font-size: 54px; color: var(--gold-hi); text-shadow: 0 0 20px rgba(255, 100, 20, 0.6), 0 4px 0 #000; }
#floorTitle .ft2 { font-family: var(--serif); font-size: 18px; letter-spacing: 0.2em; color: #c08a6a; text-shadow: 0 2px 4px #000; }

#bottomBar {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 14px;
  padding: 0 10px 10px;
}
#centerBar {
  background: linear-gradient(180deg, rgba(30, 22, 14, 0.94), rgba(10, 7, 4, 0.97)); border: 1px solid var(--border); border-bottom: none;
  padding: 8px 12px 8px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 200, 120, 0.08);
  margin-bottom: -10px; padding-bottom: 16px;
}
#xpBar { position: relative; height: 9px; background: #120c06; border: 1px solid #3a2c1c; margin-bottom: 8px; }
#xpBar .xp-fill { height: 100%; width: 0; background: linear-gradient(180deg, #e8c860, #8a6a1a); transition: width 0.2s; }
#xpBar .xp-text { position: absolute; inset: -2px 0 0; font-size: 9px; text-align: center; font-family: var(--serif); color: #fff; text-shadow: 0 1px 2px #000; line-height: 11px; }
#skillRow { display: flex; gap: 6px; justify-content: center; }
.slot {
  position: relative; width: 56px; height: 56px; border: 2px solid #4a3a26; background: radial-gradient(circle at 50% 40%, #2a2016, #0c0805);
  display: grid; place-items: center; box-shadow: inset 0 0 12px #000; overflow: hidden; cursor: help;
}
.slot .icon { font-size: 28px; filter: drop-shadow(0 2px 2px #000); }
.slot .key { position: absolute; bottom: 1px; right: 3px; font-size: 10px; font-family: var(--serif); font-weight: 700; color: var(--gold); text-shadow: 0 1px 2px #000; }
.slot .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, 0.72); }
.slot .cdt { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-weight: 900; color: #fff; font-size: 16px; text-shadow: 0 1px 3px #000; }
.slot.locked .icon { filter: grayscale(1) brightness(0.35); }
.slot.locked::after { content: attr(data-lock); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 10px; color: #c8a06a; text-align: center; line-height: 1.1; }
.slot.nores { border-color: #7a1a1a; }
.slot.nores .icon { filter: saturate(0.3) brightness(0.6); }
.slot.active { border-color: #ffb040; box-shadow: 0 0 10px rgba(255, 160, 40, 0.6), inset 0 0 12px #000; }
.slot.potion { margin-left: 8px; }
.slot.potion .cnt { position: absolute; top: 1px; left: 4px; font-family: var(--serif); font-weight: 700; color: #fff; font-size: 12px; text-shadow: 0 1px 2px #000; }
.slot-sep { width: 1px; background: #3a2c1c; margin: 4px 2px; }
#miniBtns { display: flex; gap: 4px; justify-content: center; margin-top: 7px; }

.orb {
  position: relative; width: 124px; height: 124px; border-radius: 50%; overflow: hidden; background: #0c0404;
  border: 3px solid #3a2c1c; box-shadow: 0 0 0 3px #6b5433, 0 0 0 5px #1a120a, 0 6px 20px rgba(0, 0, 0, 0.9), inset 0 0 25px #000;
  pointer-events: auto;
}
.orb-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: radial-gradient(circle at 42% 38%, #ff6a5a 0%, #c0160e 38%, #5a0404 80%); background-size: 124px 124px; background-position: bottom center;
  transition: height 0.15s;
}
.orb-fill::before {
  content: ''; position: absolute; left: -50%; right: -50%; top: -6px; height: 12px; background: rgba(255, 255, 255, 0.18); border-radius: 45%;
  animation: wave 3s linear infinite;
}
@keyframes wave { from { transform: translateX(-10%) rotate(0deg); } to { transform: translateX(10%) rotate(360deg); } }
.orb-glass { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55) 100%); }
.orb-text { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px #000; opacity: 0; transition: opacity 0.2s; }
.orb:hover .orb-text { opacity: 1; }
#lifeOrb.low { animation: pulse 0.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px #6b5433, 0 0 0 5px #1a120a, 0 0 30px rgba(255, 0, 0, 0.8), inset 0 0 25px #000; } }

/* ------------------------------------------------ Panels */
.panel {
  position: fixed; top: 60px; z-index: 15; width: 360px; max-height: calc(100vh - 220px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); box-shadow: 0 0 40px rgba(0, 0, 0, 0.9); padding: 0 14px 14px;
}
#inventory { right: 16px; }
#charPanel { left: 16px; }
.panel-head { font-family: var(--serif); font-weight: 900; color: var(--gold-hi); font-size: 18px; letter-spacing: 0.1em; text-align: center; padding: 12px 0 10px; border-bottom: 1px solid #3a2c1c; margin-bottom: 12px; position: sticky; top: 0; background: #1a140f; z-index: 2; }
.panel-head .x { position: absolute; right: 0; top: 10px; background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.panel-head .x:hover { color: #fff; }
#equipGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eslot { position: relative; height: 64px; border: 1px solid #3a2c1c; background: rgba(0, 0, 0, 0.45); display: grid; place-items: center; cursor: pointer; }
.eslot .el { position: absolute; top: 2px; left: 4px; font-size: 9px; color: var(--muted); font-family: var(--serif); letter-spacing: 0.05em; }
.eslot .ei { font-size: 26px; }
.eslot.empty .ei { opacity: 0.18; filter: grayscale(1); }
.eslot:hover, .bslot:hover { border-color: var(--gold); }
.inv-sub { font-family: var(--serif); color: var(--gold); font-size: 13px; margin: 14px 0 6px; letter-spacing: 0.1em; }
#bagGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.bslot { aspect-ratio: 1; border: 1px solid #2a2016; background: rgba(0, 0, 0, 0.4); display: grid; place-items: center; font-size: 22px; cursor: pointer; position: relative; }
.bslot.better::after { content: '▲'; position: absolute; top: 0; right: 2px; font-size: 9px; color: #6aff6a; }
.r-normal { box-shadow: inset 0 0 0 1px rgba(230, 226, 216, 0.15); }
.r-magic { box-shadow: inset 0 0 0 1px var(--magic), inset 0 0 12px rgba(115, 144, 255, 0.35); }
.r-rare { box-shadow: inset 0 0 0 1px var(--rare), inset 0 0 12px rgba(242, 214, 64, 0.35); }
.r-legendary { box-shadow: inset 0 0 0 1px var(--legendary), inset 0 0 16px rgba(255, 138, 26, 0.55); }
.inv-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: center; }
.inv-hint { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }

#charBody .row { display: flex; justify-content: space-between; padding: 4px 2px; border-bottom: 1px dotted #2a2016; font-size: 15px; }
#charBody .row span:first-child { color: var(--muted); }
#charBody .row span:last-child { color: var(--gold-hi); font-family: var(--serif); font-weight: 600; font-size: 13px; }
#charBody .sec { font-family: var(--serif); color: var(--gold); margin: 12px 0 4px; font-size: 13px; letter-spacing: 0.1em; }

#tooltip {
  position: fixed; z-index: 50; max-width: 320px; pointer-events: none; background: rgba(8, 5, 3, 0.96); border: 1px solid var(--gold-dk);
  padding: 10px 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.9); font-size: 14px; line-height: 1.35;
}
#tooltip .tt-name { font-family: var(--serif); font-weight: 700; font-size: 15px; }
#tooltip .tt-type { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
#tooltip .tt-stat { color: #8ab0ff; }
#tooltip .tt-flavor { color: #c08a4a; font-style: italic; margin-top: 6px; }
#tooltip .tt-cmp { margin-top: 8px; border-top: 1px solid #2a2016; padding-top: 6px; font-size: 13px; }
#tooltip .up { color: #6aff6a; }
#tooltip .down { color: #ff6a6a; }
#tooltip .tt-hint { color: var(--muted); font-size: 11px; margin-top: 6px; }
#tooltip .tt-cost { color: #9ab; font-size: 12px; }

/* ------------------------------------------------ Overlays */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.panel { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.touch-only-btn { display: none; }
body.touch .touch-only-btn { display: inline-block; }
.ov-box { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; padding: 30px 40px; }
.ov-box h2 { font-family: 'Cinzel Decorative', var(--serif); font-size: 46px; margin: 0 0 10px; color: var(--gold-hi); text-shadow: 0 0 20px rgba(255, 120, 30, 0.5); }
.ov-sub { font-size: 18px; color: #bfb09a; margin: 0 0 10px; max-width: 560px; }
.death-title { color: #d01a10 !important; font-size: 64px !important; text-shadow: 0 0 30px rgba(255, 0, 0, 0.6), 0 4px 0 #000 !important; animation: deathIn 1.5s ease-out; }
@keyframes deathIn { from { opacity: 0; transform: scale(1.3); letter-spacing: 0.3em; } }
.victory-title { background: linear-gradient(180deg, #fff0c0, #e0a040); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
#death { background: radial-gradient(circle, rgba(60, 0, 0, 0.5), rgba(0, 0, 0, 0.85)); }

#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.7s; z-index: 40; }
#fade.on { opacity: 1; }
#smallScreen { display: none; }

@media (max-width: 900px) {
  #heroGrid { grid-template-columns: repeat(2, 1fr); }
  .orb { width: 90px; height: 90px; }
  .orb-fill { background-size: 90px 90px; }
  .slot { width: 44px; height: 44px; }
  .slot .icon { font-size: 22px; }
}

/* ------------------------------------------------ Touch / Mobil */
#touchUI { display: none; }
#rotateHint { display: none; }
#tooltip.interactive { pointer-events: auto; }
.tt-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

body.touch #bottomBar, body.touch #heroLabel, body.touch #goldLabel { display: none; }
body.touch #touchUI { display: block; }
body.touch #topLeft { top: calc(8px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); }
body.touch #floorLabel { font-size: 12px; }
body.touch #buffs { margin-top: 70px; }
body.touch #targetBar { top: 8px; width: min(260px, 30vw); }
body.touch #targetBar .tname { font-size: 12px; }
body.touch #msgs { top: 48px; }
body.touch .msg { font-size: 13px; }
body.touch #floorTitle .ft1 { font-size: 36px; }

#joyZone { position: absolute; left: 0; top: 70px; bottom: 0; width: 46%; pointer-events: auto; touch-action: none; }
#joyBase { position: fixed; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; border: 2px solid rgba(201, 164, 92, 0.35);
  background: radial-gradient(circle, rgba(40, 28, 16, 0.35), rgba(0, 0, 0, 0.15)); opacity: 0; transition: opacity 0.15s; left: 120px; top: 70%; }
#joyBase.on { opacity: 1; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8a6a3a, #3a2814); border: 2px solid #c9a45c; box-shadow: 0 0 12px rgba(0, 0, 0, 0.8); }

#touchSkills { position: absolute; right: calc(8px + env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); width: 250px; height: 210px; pointer-events: none; }
.tbtn { position: absolute; border-radius: 50%; pointer-events: auto; touch-action: none; cursor: pointer; border-width: 2px; }
.tbtn .icon { font-size: 26px; }
.tbtn.pressed { border-color: #ffb040; transform: scale(0.94); box-shadow: 0 0 14px rgba(255, 160, 40, 0.6), inset 0 0 12px #000; }
.tbtn.t0 { width: 92px; height: 92px; right: 6px; bottom: 6px; }
.tbtn.t0 .icon { font-size: 40px; }
.tbtn.t1 { width: 62px; height: 62px; right: 108px; bottom: 8px; }
.tbtn.t2 { width: 58px; height: 58px; right: 104px; bottom: 82px; }
.tbtn.t3 { width: 58px; height: 58px; right: 58px; bottom: 116px; }
.tbtn.t4 { width: 52px; height: 52px; right: 0; bottom: 106px; }
.tbtn.tpot { width: 48px; height: 48px; right: 176px; bottom: 6px; }
.tbtn.tpot .icon { font-size: 22px; }
.tbtn.locked::after { font-size: 9px; }

#touchTop { position: absolute; top: calc(118px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); display: flex; gap: 6px; }
#touchTop .tb { pointer-events: auto; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--gold-dk); background: rgba(20, 14, 8, 0.85); font-size: 17px; display: grid; place-items: center; padding: 0; }

#mBars { position: absolute; top: calc(30px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); width: min(220px, 29vw); }
.mrow { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.mlvl { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold-dk); background: #1a120a; color: var(--gold-hi); font-family: var(--serif); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
.mlvl.ghost { visibility: hidden; height: 8px; }
.mbar { position: relative; flex: 1; height: 14px; background: rgba(0, 0, 0, 0.75); border: 1px solid #4a3a26; overflow: hidden; }
.mbar.res { height: 8px; }
#mLife { height: 100%; background: linear-gradient(180deg, #ff5a4a, #9a0c08); width: 100%; }
#mRes { height: 100%; width: 100%; }
#mLifeT { position: absolute; inset: 0; font-size: 10px; font-family: var(--serif); color: #fff; text-align: center; line-height: 14px; text-shadow: 0 1px 2px #000; }
.mxp { height: 3px; background: rgba(0, 0, 0, 0.6); margin-left: 28px; }
#mXp { height: 100%; background: #d8b050; width: 0; }

body.touch .panel { top: calc(8px + env(safe-area-inset-top)); max-height: calc(100vh - 16px); width: min(360px, 48vw); z-index: 25; }
body.touch #tooltip { max-width: min(320px, 60vw); font-size: 13px; }
body.touch .hero-card canvas { width: 120px; height: 120px; }
body.touch .bslot.touch:active { border-color: var(--gold); }

@media (orientation: portrait) {
  body.touch.playing #rotateHint { display: grid; place-items: center; align-content: center; position: fixed; inset: 0; z-index: 70; background: rgba(5, 3, 2, 0.95); color: var(--gold-hi); font-family: var(--serif); text-align: center; font-size: 40px; }
  body.touch.playing #rotateHint p { font-size: 16px; }
}
@media (max-height: 500px) {
  .ov-box { padding: 12px 20px; gap: 8px; }
  .ov-box h2 { font-size: 30px !important; margin-bottom: 4px; }
  .death-title { font-size: 40px !important; }
  .ov-sub { font-size: 14px; margin-bottom: 4px; }
  .ov-box .btn { padding: 8px 18px; font-size: 13px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #heroGrid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .hero-card, body.touch .hero-card { padding: 4px 4px 8px; }
  .hero-card canvas, body.touch .hero-card canvas { width: 84px; height: 84px; }
  .hero-card .hclass { font-size: 10px; }
  .pick { margin: 10px 0 8px; font-size: 13px; }
  #heroDetail { padding: 12px 14px; }
  #heroDetail .dd { font-size: 15px; }
  .skill-item .si-d { font-size: 13px; }
  .menu-inner { padding-top: 10px; }
  .title { font-size: 44px; }
  .lore { font-size: 15px; margin: 8px auto; }
  .hero-card .hname { font-size: 17px; }
}