/* Realm Hunt – visual style (Style Guide v1.0).
 * Dark fantasy: obsidian, iron frames, runes, ember highlights. Dark only – the hunt happens at night. */
:root {
  /* Palette (style guide §2) */
  --obsidian: #0A0A0C; --crimson: #8A1F1F; --steel: #C0C0C8; --ash: #5A5A5F; --amber: #D97A1A;
  --moss: #2F3E2F; --bone: #E3DCC7; --void: #2A0F2F;

  /* Roles */
  --bg: #0A0A0C; --bg-2: #101013; --panel: #141417; --panel-2: #1b1b20; --panel-3: #232329;
  --line: #34343c; --line-hi: #55555f;
  --text: #E3DCC7; --muted: #8f8a80; --accent: #D97A1A; --accent-ink: #120a04; --accent-soft: rgba(217, 122, 26, .25);
  --hp: #a8281f; --sta: #7d9a4e; --mana: #6e3f8e; --stagger: #D97A1A; --xp: #8e5ab8; --rank: #b8862e;
  --good: #9fbf6a; --bad: #e0553f; --warn-bg: #2a1210;
  --glow: 0 0 12px rgba(217, 122, 26, .45);
  --shadow: 0 8px 24px rgba(0, 0, 0, .55);
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; color: var(--text); font: 16px/1.5 var(--font-body);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(138, 31, 31, .18), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(42, 15, 47, .35), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}
#app { max-width: 1160px; margin: 0 auto; padding-block: 0 56px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.loading { padding: 32px; font-family: var(--font-display); letter-spacing: .12em; color: var(--muted); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; margin: 0 0 8px; text-wrap: balance; color: var(--bone); }
h2 { font-size: 1.05rem; text-transform: uppercase; }
h2::before { content: 'ᛟ'; color: var(--amber); margin-right: 10px; font-family: var(--font-body); text-shadow: var(--glow); }
h3 { font-size: .98rem; }
.small-h { font: 700 .74rem var(--font-display); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin: 14px 0 6px; }
p { margin: 0 0 8px; } ul { margin: 0 0 8px; padding-left: 18px; }
a { color: var(--amber); text-decoration-color: rgba(217, 122, 26, .4); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
.money, .stat-grid, .num, .bar em, .dmg, .dmgnum, .hurtnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .small { font-size: .88rem; } .up { color: var(--good); } .down { color: var(--bad); }
.row { display: flex; align-items: center; } .gap { gap: 8px; } .wrap { flex-wrap: wrap; } .end { justify-content: flex-end; margin-top: 8px; }
kbd { font: 700 .66rem var(--font-body); border: 1px solid var(--line-hi); border-bottom-width: 2px; border-radius: 2px; padding: 0 4px; background: #0d0d10; color: var(--steel); }

/* ---------- Top bar & nav ---------- */
.topbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 16px 0 12px; border-bottom: 1px solid var(--line); position: relative; }
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); opacity: .5; }
.brand { font: 900 1.3rem var(--font-display); color: var(--bone); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.brand .rune { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--amber); font-size: .95rem; text-shadow: var(--glow); }
.brand .rune::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--amber); transform: rotate(45deg); box-shadow: var(--glow), inset 0 0 8px rgba(217, 122, 26, .3); }
.who { font-size: .95rem; } .who b { font-family: var(--font-display); letter-spacing: .04em; }
.money { display: flex; gap: 14px; font-weight: 700; align-items: center; color: var(--bone); }
.money > span[title] { color: #e8c37a; }
.nav { display: flex; gap: 2px; overflow-x: auto; padding: 0; margin-top: 2px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.nav button { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 10px 14px 9px; cursor: pointer; font: 700 .78rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.nav button:hover { color: var(--bone); }
.nav button.on { color: var(--bone); border-bottom-color: var(--amber); text-shadow: 0 0 10px rgba(217, 122, 26, .5); }
.view { padding-top: 16px; display: grid; gap: 16px; }
.view > div { display: grid; gap: 16px; }

/* ---------- Iron panels with rivets ---------- */
.panel {
  position: relative; min-width: 0; padding: 18px;
  background:
    radial-gradient(circle at 8px 8px, #6a6a72 0 1.6px, #1a1a1e 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 8px) 8px, #6a6a72 0 1.6px, #1a1a1e 2.4px, transparent 3px),
    radial-gradient(circle at 8px calc(100% - 8px), #6a6a72 0 1.6px, #1a1a1e 2.4px, transparent 3px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #6a6a72 0 1.6px, #1a1a1e 2.4px, transparent 3px),
    linear-gradient(180deg, #17171b, #0f0f12);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(192, 192, 200, .1), inset 0 0 0 1px rgba(0, 0, 0, .8), var(--shadow);
}
.grid { display: grid; gap: 12px; } .grid-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.card { position: relative; background: linear-gradient(180deg, var(--panel-2), #141418); border: 1px solid var(--line); border-radius: 2px; padding: 12px; text-align: left; color: var(--text); font: inherit; min-width: 0; overflow: hidden; }
.card.locked { opacity: .6; }
.card.pick { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.card.pick:hover { border-color: var(--line-hi); }
.card.pick.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), var(--glow); }
.card.boss { border-color: #5a2a1a; box-shadow: inset 0 0 0 1px rgba(138, 31, 31, .5); }
.realm-top, .stage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stage-head h2::before { content: none; }
.tag { display: inline-block; font: 700 .68rem var(--font-body); text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 2px; border: 1px solid var(--line-hi); color: var(--muted); background: rgba(0, 0, 0, .3); white-space: nowrap; }
.tag.ok { color: var(--good); border-color: rgba(159, 191, 106, .6); } .tag.bad { color: var(--bad); border-color: rgba(224, 85, 63, .7); }
.tag-boss { color: #ff8a5c; border-color: var(--crimson); background: rgba(138, 31, 31, .25); }
.tag.el-eld { color: #ff9a2e; border-color: #8a4a12; } .tag.el-frost { color: #9fdcf5; border-color: #3a6a82; } .tag.el-blixt { color: #f3e27a; border-color: #7a6a20; } .tag.el-gift { color: #9fd04a; border-color: #4a6a1a; } .tag.el-helig { color: #f4ecd6; border-color: #8a826a; }
.chip { display: inline-block; font-size: .82rem; padding: 1px 8px; border-radius: 2px; background: #0d0d10; border: 1px solid var(--line); margin: 2px 0; }
.chip-miss { color: var(--bad); border-color: var(--bad); }
.chip-btn { background: var(--panel-2); border: 1px solid var(--line-hi); color: var(--text); padding: 6px 12px; border-radius: 2px; cursor: pointer; font: 500 .9rem var(--font-body); }
.chip-btn:hover { border-color: var(--steel); }
.chip-btn.on { background: linear-gradient(180deg, #9a3a14, #5a1a0c); color: var(--bone); border-color: var(--amber); box-shadow: var(--glow); }
.warn-box { background: linear-gradient(90deg, rgba(138, 31, 31, .35), rgba(138, 31, 31, .08)); border-left: 3px solid var(--crimson); padding: 8px 12px; }

/* ---------- Buttons: forged iron ---------- */
.btn {
  font: 700 .82rem var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(180deg, #2c2c33, #17171b 60%, #111114);
  color: var(--bone); border: 1px solid var(--line-hi); border-radius: 2px; padding: 9px 16px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .5);
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.btn:hover:not(:disabled) { border-color: var(--amber); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .5), var(--glow); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.6); }
.btn-primary { background: linear-gradient(180deg, #a52a20, #6e1814 55%, #4a0f0c); border-color: #c0562a; color: #fff0de; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.btn-primary:hover:not(:disabled) { border-color: #ffb066; box-shadow: 0 0 16px rgba(217, 122, 26, .55), inset 0 1px 0 rgba(255, 220, 180, .2); }
.btn-ghost { background: transparent; box-shadow: none; border-color: var(--line); color: var(--muted); }
.btn-small { padding: 5px 10px; font-size: .7rem; } .btn-big { padding: 14px 32px; font-size: .95rem; }
.cta { display: flex; justify-content: center; flex-wrap: wrap; }
button:focus-visible, .item:focus-visible, input:focus-visible, select:focus-visible, .pt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- Meters ---------- */
.bar { position: relative; height: 20px; background: linear-gradient(180deg, #060607, #121215); border-radius: 1px; overflow: hidden; margin: 6px 0; border: 1px solid #2a2a30; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8); }
.bar span { position: absolute; inset: 0 auto 0 0; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.bar span::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(0, 0, 0, .35) 18px 19px); }
.bar em { position: relative; font: 700 .72rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding-left: 8px; line-height: 18px; color: #fff4e4; text-shadow: 0 1px 2px #000; }
.bar-hp span { background: linear-gradient(180deg, #d0402f, #8A1F1F 60%, #5a1010); }
.bar-sta span { background: linear-gradient(180deg, #a6bf6a, #5f7a3a 60%, #3a4a22); }
.bar-mana span { background: linear-gradient(180deg, #9a64c4, #5a2a7a 60%, #2A0F2F); }
.bar-stagger span { background: linear-gradient(180deg, #ffb35a, #D97A1A 60%, #8a4a10); box-shadow: 0 0 10px rgba(217, 122, 26, .6); }
.bar-xp span { background: var(--xp); } .bar-rank span { background: linear-gradient(180deg, #e0b25a, #9a6a1e); }
.bar-part { height: 12px; margin: 4px 0 0; } .bar-part span { background: linear-gradient(180deg, #c0562a, #7a2a12); }
.bar-part em { display: none; }
.rank-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 8px 0; }

/* ---------- Character creation ---------- */
.hero { text-align: center; padding: 36px 0 10px; }
.hero h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); text-shadow: 0 0 24px rgba(217, 122, 26, .45), 0 2px 0 #000; }
.hero p { color: var(--muted); font-size: 1.05rem; }
.hero::after { content: 'ᚱ  ᛖ  ᚨ  ᛚ  ᛗ'; display: block; margin-top: 6px; color: var(--amber); letter-spacing: .5em; opacity: .7; text-shadow: var(--glow); }
input { width: 100%; font: inherit; font-size: 1.1rem; padding: 11px 13px; border-radius: 2px; border: 1px solid var(--line-hi); background: #0b0b0d; color: var(--bone); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7); }
.stat-row { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.stat-pill { font-size: .74rem; padding: 1px 6px; border-radius: 2px; background: #0d0d10; border: 1px solid var(--line); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.stat-grid b { color: #f2d9a8; }

/* ---------- Art ---------- */
.rh-art, .rh-realm { display: block; width: 100%; height: auto; }
.rh-art .crack { display: none; }
.rh-art .pt.broken .crack { display: inline; }
.rh-art .pt.broken .lose { display: none; }
.rh-art .phase2-only { display: none; }
.rh-art.phase2 .phase2-only { display: inline; }
.rh-art .flame { transition: opacity .3s; }
.rh-art.phase2 .flame { opacity: .85; }
.rh-art.unknown .beast { filter: brightness(0) drop-shadow(0 0 2px rgba(217, 122, 26, .7)); }
.rh-art.unknown .phase2-only { display: none; }
.rh-art.slain .beast { filter: grayscale(.7) brightness(.55); transform: rotate(4deg) translateY(10px); transform-origin: 200px 260px; transform-box: view-box; }
.rh-art .pt[data-act], .rh-art .beast[data-act] { cursor: crosshair; }
.rh-art .pt[data-act]:hover { filter: drop-shadow(0 0 3px rgba(192, 192, 200, .9)); }
.rh-art .pt.on { filter: drop-shadow(0 0 2px #ffb35a) drop-shadow(0 0 6px rgba(217, 122, 26, .9)); }
.rh-art.floats .beast { animation: rh-float 4.5s ease-in-out infinite; }
.rh-art.windup .eye { animation: rh-pulse .7s ease-in-out infinite alternate; }
.rh-art.windup .beast { animation: rh-windup 1.4s ease-in-out infinite; transform-origin: 200px 260px; transform-box: view-box; }
.rh-art.reeling .beast { transform: rotate(-5deg) translateX(-6px); transform-origin: 200px 260px; transform-box: view-box; filter: brightness(.8); }
.rh-art.fx-hit .beast { animation: rh-shake .32s linear 1; }
.rh-art.fx-hit .hitflash { animation: rh-flash .28s ease-out 1; }
.rh-art .embers circle { animation: rh-rise 6s linear infinite; }
.rh-art .embers circle:nth-child(2n) { animation-duration: 8s; animation-delay: -3s; }
.rh-art .snow circle { animation: rh-fall 7s linear infinite; }
.rh-art .snow circle:nth-child(3n) { animation-duration: 10s; animation-delay: -4s; }
@keyframes rh-float { 50% { transform: translateY(-8px); } }
@keyframes rh-pulse { to { opacity: .55; } }
@keyframes rh-windup { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025) translateY(-2px); } }
@keyframes rh-shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
@keyframes rh-flash { 0% { opacity: .35; } 100% { opacity: 0; } }
@keyframes rh-rise { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-120px); opacity: 0; } }
@keyframes rh-fall { from { transform: translate(0, -20px); } to { transform: translate(-14px, 120px); } }

.banner { margin: -12px -12px 10px; border-bottom: 1px solid var(--line); line-height: 0; }
.banner .rh-realm { aspect-ratio: 400 / 120; }
.group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.group-head h2 { margin: 0; }
.banner-mini { flex: none; width: 150px; line-height: 0; border: 1px solid var(--line); }
.banner-mini .rh-realm { aspect-ratio: 400 / 120; }
@media (max-width: 480px) { .banner-mini { width: 96px; } }
.thumb { margin: -12px -12px 10px; border-bottom: 1px solid var(--line); line-height: 0; aspect-ratio: 400 / 220; overflow: hidden; }
.thumb .rh-art { height: 100%; }
.card.realm h3, .card.contract h3, .card.beast h3 { font-size: 1rem; }
.prep-head::after { content: ''; display: block; clear: both; }
.prep-head .prep-art { float: left; width: min(340px, 42%); margin: 0 18px 4px 0; border: 1px solid var(--line); line-height: 0; }
.prep-head .prep-art .rh-art { aspect-ratio: 400 / 260; }
@media (max-width: 640px) { .prep-head .prep-art { float: none; width: auto; margin: 0 0 12px; } }

/* ---------- The hunt ---------- */
.hunt { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.hunt .log { grid-column: 1 / -1; }
.stage.is-boss { border-color: #5a2a1a; }
.stage.danger { box-shadow: inset 0 0 0 1px rgba(138, 31, 31, .7), 0 0 28px rgba(138, 31, 31, .35), var(--shadow); }
.stage .phase { color: #ff8a5c; }
.stage-art { position: relative; margin: 8px -18px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); line-height: 0; overflow: hidden; }
.stage-art .rh-art { aspect-ratio: 400 / 280; }
.art-hint { position: absolute; right: 10px; bottom: 6px; margin: 0; line-height: 1.2; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(227, 220, 199, .45); pointer-events: none; }
.callouts { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; pointer-events: none; line-height: 1; }
.callout {
  font: 900 clamp(1.4rem, 4.4vw, 2.4rem) var(--font-display); letter-spacing: .12em; text-align: center; color: #ffe6c2;
  text-shadow: 0 0 18px rgba(217, 122, 26, .9), 0 0 4px #000, 0 3px 0 #000;
  animation: rh-slam 1.6s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 140ms);
}
.callout + .callout { font-size: clamp(1rem, 3vw, 1.5rem); }
.co-break { color: #ffd08a; } .co-blow { color: #fff; text-shadow: 0 0 20px #ff5a2a, 0 0 4px #000, 0 3px 0 #000; }
.co-stagger { color: #ffb35a; } .co-phase { color: #ff6a4a; text-shadow: 0 0 24px #8A1F1F, 0 3px 0 #000; }
.co-dodge { color: #d6f0a8; text-shadow: 0 0 14px rgba(125, 154, 78, .9), 0 3px 0 #000; }
.co-resist { color: #b8b4aa; text-shadow: 0 0 6px #000, 0 3px 0 #000; }
.co-weak.el-frost { color: #c8f0ff; text-shadow: 0 0 18px #4ab0e0, 0 3px 0 #000; } .co-weak.el-blixt { color: #fff6b0; text-shadow: 0 0 18px #d8c030, 0 3px 0 #000; } .co-weak.el-helig { color: #fff; text-shadow: 0 0 18px #e3dcc7, 0 3px 0 #000; }
.result-art .callout { animation-fill-mode: both; animation-name: rh-slam-stay; }
@keyframes rh-slam { 0% { transform: scale(1.7); opacity: 0; } 12% { transform: scale(.96); opacity: 1; } 20% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes rh-slam-stay { 0% { transform: scale(1.7); opacity: 0; } 15% { transform: scale(.96); opacity: 1; } 25%, 100% { transform: scale(1); opacity: 1; } }
.dmgnum { position: absolute; right: 18%; top: 18%; font: 900 1.6rem var(--font-display); color: #fff; text-shadow: 0 0 10px #c0392b, 0 2px 0 #000; animation: rh-float-up 1.1s ease-out both; line-height: 1; pointer-events: none; }
.pbars { position: relative; }
.hurtnum, .healnum { position: absolute; right: 6px; top: -10px; z-index: 2; font: 900 1.3rem var(--font-display); line-height: 1; animation: rh-float-up 1.2s ease-out both; pointer-events: none; }
.hurtnum { color: #ff6a52; text-shadow: 0 0 10px #8A1F1F, 0 2px 0 #000; } .hurtnum small { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.healnum { color: #c8e89a; text-shadow: 0 0 10px #3a5a1a, 0 2px 0 #000; }
.player.fx-hurt { animation: rh-hurt .5s ease-out 1; }
@keyframes rh-float-up { 0% { transform: translateY(8px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes rh-hurt { 0% { box-shadow: inset 0 0 60px rgba(168, 40, 31, .8), var(--shadow); transform: translateX(-4px); } 30% { transform: translateX(3px); } 100% { box-shadow: inset 0 0 0 rgba(168, 40, 31, 0), var(--shadow); transform: none; } }

.intent { position: relative; border: 1px solid var(--line-hi); background: linear-gradient(90deg, #1d1d22, #121215); border-radius: 2px; padding: 10px 12px 10px 16px; margin: 10px 0; }
.intent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--steel); opacity: .6; }
.intent.danger { border-color: var(--crimson); background: linear-gradient(90deg, rgba(138, 31, 31, .35), #121215 70%); }
.intent.danger::before { background: #e0553f; opacity: 1; box-shadow: 0 0 12px #e0553f; animation: rh-pulse .6s ease-in-out infinite alternate; }
.intent-title { font-size: 1.08rem; } .intent-title b { font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { font: 700 .7rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tell { font-style: italic; color: #cfc6b0; margin: 2px 0 6px; }
.dmg { color: #ff6a52; font-weight: 700; }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.part { text-align: left; background: linear-gradient(180deg, #1d1d22, #141417); border: 1px solid var(--line); border-radius: 2px; padding: 6px 8px; color: var(--text); font: inherit; font-size: .86rem; cursor: pointer; }
.part:hover { border-color: var(--line-hi); }
.part.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber), var(--glow); }
.part.broken { opacity: .75; } .part .broke { color: #ff9a5a; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-top: 12px; }
.act { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; }
.act kbd { position: absolute; top: 6px; right: 6px; }
.act > span { padding-right: 18px; }
.act small { font: 500 .74rem var(--font-body); letter-spacing: .02em; text-transform: none; color: var(--muted); }
.act-heavy { border-color: #6a2a20; } .act-dodge, .act-block { border-color: #4a5a32; } .act-sign { border-color: #4a2a5a; } .act-potion { border-color: #5a4a2a; }
.act.fits:not(:disabled) { border-color: #9fbf6a; box-shadow: 0 0 10px rgba(159, 191, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .08); }
.loglist { list-style: none; padding: 0; margin: 0; max-height: 260px; overflow: auto; font-size: .9rem; }
.loglist li { padding: 4px 0; border-bottom: 1px solid #1f1f24; } .loglist small { color: var(--muted); display: inline-block; min-width: 24px; font-variant-numeric: tabular-nums; }
.log-hurt, .log-loss, .log-dot { color: #ec8a78; } .log-dodge, .log-heal, .log-win { color: var(--good); }
.log-break, .log-stagger, .log-phase { color: #ffb35a; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.log-warn { color: var(--muted); font-style: italic; }
.result-art { position: relative; margin: -18px -18px 14px; line-height: 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.result-art .rh-art { aspect-ratio: auto; height: clamp(190px, 32vw, 330px); }
.result-win h2 { color: #f2d9a8; } .result-loss h2 { color: var(--bad); }
.msgs { margin-top: 10px; }

/* ---------- Items ---------- */
.item { background: linear-gradient(180deg, #1b1b20, #141417); border: 1px solid var(--line); border-left: 3px solid var(--rar); border-radius: 2px; padding: 10px 12px; cursor: pointer; min-width: 0; box-shadow: inset 6px 0 14px -10px var(--rar); }
.item:hover { border-color: var(--line-hi); border-left-color: var(--rar); }
.item.selected { box-shadow: inset 0 0 0 1px var(--rar), 0 0 14px -4px var(--rar); }
.item-head { display: flex; justify-content: space-between; gap: 8px; } .item-head strong { color: var(--bone); font-family: var(--font-display); font-size: .92rem; letter-spacing: .03em; }
.item-sub { font-size: .8rem; color: var(--muted); } .rar { color: var(--rar); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.affixes { font-size: .84rem; margin: 6px 0 0; color: #d8cfb8; }
.item-actions { margin-top: 8px; display: grid; gap: 6px; } .compare span { margin-right: 8px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.slot { border: 1px solid var(--line); border-left: 3px solid var(--rar, var(--line)); border-radius: 2px; padding: 8px 10px; display: grid; gap: 4px; background: linear-gradient(180deg, #1b1b20, #141417); }
.mats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.mats li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid #1f1f24; padding: 4px 0; }

/* ---------- The Altar ---------- */
table.stats { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
table.stats th { text-align: left; font-weight: 700; padding: 6px 0; } table.stats th small { display: block; font-weight: 400; color: var(--muted); }
table.stats td { padding: 6px 8px; } .num { font: 900 1.2rem var(--font-display); text-align: right; width: 52px; color: #f2d9a8; }
table.stats tr + tr { border-top: 1px solid #24242a; }
.skill { display: grid; gap: 2px; }
.quest.done { opacity: .55; }

/* ---------- Painted images ---------- */
.rh-photo { position: relative; overflow: hidden; background: #0A0A0C; line-height: 0; }
.rh-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .3s, transform .3s; }
.rh-photo .ph-fx { position: absolute; inset: 0; pointer-events: none; }
.stage-art .rh-photo { aspect-ratio: 3 / 2; cursor: crosshair; }
.thumb .rh-photo, .prep-art .rh-photo, .result-art .rh-photo { height: 100%; }
.prep-art .rh-photo { aspect-ratio: 3 / 2; }
.result-art .rh-photo { height: clamp(190px, 32vw, 330px); }
.banner .rh-photo, .banner-mini .rh-photo { aspect-ratio: 400 / 120; }
.rh-photo.unknown > img { filter: brightness(.14) blur(3px) saturate(.3); transform: scale(1.05); }
.rh-photo.unknown::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 2.6rem var(--font-display); color: rgba(217, 122, 26, .6); text-shadow: var(--glow); line-height: 1; }
.rh-photo.slain > img { filter: grayscale(.8) brightness(.5); transform: scale(1.03) rotate(1deg); }
.rh-photo.reeling > img { transform: rotate(-3deg) scale(1.06) translateX(-8px); filter: brightness(.8) saturate(.8); }
.rh-photo.phase2 .ph-fx { box-shadow: inset 0 0 90px rgba(168, 30, 20, .55); }
.rh-photo.windup .ph-fx { animation: rh-windup-glow .7s ease-in-out infinite alternate; }
.rh-photo.windup > img { animation: rh-windup 1.4s ease-in-out infinite; }
.rh-photo.fx-hit > img { animation: rh-shake .32s linear 1; }
.rh-photo.fx-hit .ph-fx { animation: rh-photo-flash .3s ease-out 1; }
@keyframes rh-windup-glow { from { box-shadow: inset 0 0 40px rgba(224, 85, 63, .25); } to { box-shadow: inset 0 0 120px rgba(224, 85, 63, .6); } }
@keyframes rh-photo-flash { 0% { background: rgba(255, 240, 220, .35); } 100% { background: transparent; } }
.item.has-img { display: grid; grid-template-columns: 56px 1fr; column-gap: 10px; align-items: start; }
.item.has-img > :not(.item-img) { grid-column: 2; }
.item.has-img > .item-img { grid-row: 1 / span 4; }
.item-img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; background: #0A0A0C; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 0 10px -4px var(--rar, transparent); }
.recipe-img { float: right; margin: 0 0 6px 8px; width: 64px; height: 64px; }
.slot-img { width: 44px; height: 44px; }
.shop-name { display: inline-flex; align-items: center; gap: 8px; }
.shop-img { width: 32px; height: 32px; }

/* ---------- Hunt of the Week ---------- */
.weekly { border-color: #7a4a1a; box-shadow: inset 0 0 0 1px rgba(217, 122, 26, .25), var(--shadow); }
.weekly-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.weekly-head h2::before { content: '᛭'; }
.weekly-rule { border-left: 3px solid var(--amber); padding: 6px 10px; background: rgba(217, 122, 26, .08); }
.grid-4.weekly-grid, .weekly .grid-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ---------- Hall of Hunters ---------- */
.hall-head { text-align: center; padding: 8px 0 0; }
.hall-head h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 18px rgba(217, 122, 26, .4); margin: 0; }
.hall-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .hall-grid { grid-template-columns: minmax(0, 1fr); } }
.tabs { margin: 4px 0 10px; }
.btn.on { border-color: var(--amber); color: #ffd9a8; box-shadow: inset 0 0 0 1px var(--amber); }
.board { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.board li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(90deg, #19191d, #121215); border: 1px solid #24242a; border-radius: 2px; }
.board .pos { font: 900 1.05rem var(--font-display); color: var(--muted); text-align: center; }
.board .who { display: grid; min-width: 0; } .board .who b { font-family: var(--font-display); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .score { font: 700 1rem var(--font-display); color: #f2d9a8; text-align: right; white-space: nowrap; } .board .score small { font: 500 .75rem var(--font-body); color: var(--muted); }
.board .top-1 { border-color: #8a6a1e; } .board .top-1 .pos { color: #e8c37a; text-shadow: 0 0 10px rgba(232, 195, 122, .6); }
.board .top-2 .pos { color: var(--steel); } .board .top-3 .pos { color: #c0703a; }
.board li.you { border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.center { text-align: center; }
.form { display: grid; gap: 10px; margin-top: 8px; }
.form label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }

/* ---------- Admin statistics ---------- */
.admin { display: grid; gap: 16px; padding-top: 16px; }
.admin-login { max-width: 460px; margin: 40px auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 2px; padding: 10px 12px; background: #101013; border: 1px solid var(--line); }
.kpi b { font: 900 1.6rem var(--font-display); color: #f2d9a8; }
.funnel { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.funnel li { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 90px 70px; gap: 10px; align-items: center; font-size: .9rem; }
.f-bar { height: 14px; background: #0d0d10; border: 1px solid #24242a; }
.f-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8A1F1F, #D97A1A); }
.f-num { text-align: right; font-variant-numeric: tabular-nums; } .f-num small { color: var(--muted); }
.f-drop { white-space: nowrap; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .f-drop.bad { color: var(--bad); font-weight: 700; }
.daily { list-style: none; padding: 0; margin: 8px 0 0; display: flex; gap: 4px; align-items: flex-end; height: 140px; }
.daily li { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.daily li span { width: 100%; min-height: 2px; background: linear-gradient(180deg, #D97A1A, #8A1F1F); }
.daily small { font-size: .65rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.admin-table th.num, .admin-table td.num { font: 600 .95rem var(--font-body); text-align: right; width: auto; color: var(--text); }
@media (max-width: 640px) { .funnel li { grid-template-columns: 1fr 70px 46px; } .f-bar { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- Tutorial coach ---------- */
.coach { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; margin: 0 0 4px;
  background: linear-gradient(90deg, rgba(217, 122, 26, .16), rgba(20, 20, 23, .95) 60%); border: 1px solid #7a4a1a; border-left: 3px solid var(--amber); border-radius: 2px; box-shadow: var(--glow); }
.player .coach { margin: 12px 0 0; }
.coach-rune { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--amber); color: var(--amber); font-size: 1.1rem; text-shadow: var(--glow); border-radius: 50%; }
.coach-body p { margin: 2px 0 0; color: var(--bone); }
.coach-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.coach-hl { position: relative; z-index: 1; outline: 2px solid var(--amber) !important; outline-offset: 3px; animation: rh-coach 1.1s ease-in-out infinite alternate; }
.rh-art .coach-hl { outline: none !important; animation: none; filter: drop-shadow(0 0 4px #ffb35a) drop-shadow(0 0 10px rgba(217, 122, 26, .9)); }
@keyframes rh-coach { from { box-shadow: 0 0 0 rgba(217, 122, 26, 0); } to { box-shadow: 0 0 18px rgba(217, 122, 26, .75); } }
@media (max-width: 560px) { .coach { grid-template-columns: auto 1fr; } .coach-btns { grid-column: 1 / -1; } }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; z-index: 10; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: linear-gradient(180deg, #1d1d22, #121215); border: 1px solid var(--line-hi); border-left: 3px solid var(--amber); padding: 9px 12px; border-radius: 2px; box-shadow: 0 8px 22px rgba(0, 0, 0, .6); font-size: .92rem; animation: in .2s ease-out; }
.toast-warn { border-left-color: #e0553f; } .toast-good { border-left-color: #9fbf6a; }
@keyframes in { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Language select ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang select { font: 600 .8rem var(--font-body); color: var(--bone); background: #0d0d10; border: 1px solid var(--line-hi); border-radius: 2px; padding: 4px 8px; cursor: pointer; }

@media (max-width: 820px) {
  .hunt { grid-template-columns: minmax(0, 1fr); }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .act kbd, .art-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .callout, .dmgnum, .hurtnum, .healnum { animation: none !important; }
}