:root {
  --bg: #0c0a0e;
  --panel: #141117;
  --panel-2: #1b171f;
  --line: #2a2430;
  --text: #e8e2d6;
  --dim: #9a9086;
  --faint: #6a6270;
  --gold: #f0c36a;
  --ember: #ff7a45;
  --blood: #e0445a;
  --moss: #8fbf5f;
  --frost: #8fb8e8;
  --violet: #c7a6ff;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; }
body { background: radial-gradient(1200px 600px at 30% -10%, #231a22 0%, transparent 60%), var(--bg); min-height: 100vh; }
button { font: inherit; color: inherit; cursor: pointer; }
.c-blood { color: var(--blood); }
.c-gold { color: var(--gold); }

header { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 28px; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.logo b { font-family: var(--serif); font-size: 34px; font-weight: 700; letter-spacing: .12em; color: var(--gold); }
.logo span { font-family: var(--serif); font-size: 18px; color: var(--dim); font-style: italic; }
.daybadge { font-family: var(--serif); font-size: 20px; }
.daybadge em { color: var(--dim); font-style: normal; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 13px; color: var(--dim); flex-wrap: wrap; }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--blood); font-weight: 600; letter-spacing: .1em; font-size: 12px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--blood); animation: pulse 1.6s infinite; }
.live.off { color: var(--faint); }
.live.off i { background: var(--faint); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224,68,90,.6); } 70% { box-shadow: 0 0 0 10px rgba(224,68,90,0); } 100% { box-shadow: 0 0 0 0 rgba(224,68,90,0); } }
.mono { font-family: var(--mono); color: var(--text); }

.stats { display: flex; gap: 10px 28px; flex-wrap: wrap; padding: 12px 28px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--dim); background: rgba(20,17,23,.6); }
.stats b { color: var(--text); font-weight: 600; }
.stats .rec b { color: var(--gold); }
.stats .won b { color: var(--gold); }
.stats .unbeaten b { color: var(--blood); }

main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; padding: 22px 28px; max-width: 1480px; margin: 0 auto; }
.col { display: grid; gap: 22px; align-content: start; min-width: 0; }
@media (max-width: 1000px) {
  main { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  header, .stats { padding-left: 16px; padding-right: 16px; }
  .hdr-right { margin-left: 0; }
}

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.card h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: .02em; }
.card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px 0; flex-wrap: wrap; }
.card-hd small { color: var(--faint); font-size: 12px; }

.mapwrap { position: relative; padding: 14px; }
#map { display: block; width: 100%; border-radius: 8px; background: #07060a; }
.floorlabel { position: absolute; left: 30px; top: 24px; font-family: var(--serif); font-size: 22px; text-shadow: 0 2px 10px #000; pointer-events: none; }
.floorlabel small { display: block; font-family: var(--sans); font-size: 12px; color: var(--dim); }
.activity { position: absolute; right: 30px; top: 26px; font-size: 13px; color: var(--gold); background: rgba(12,10,14,.85); border: 1px solid var(--line); padding: 6px 12px; border-radius: 99px; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity:empty { display: none; }
.overlay { position: absolute; inset: 14px; display: grid; place-items: center; text-align: center; background: rgba(7,6,10,.55); border-radius: 8px; font-family: var(--serif); font-size: 26px; padding: 20px; pointer-events: none; }
.overlay small { display: block; font-family: var(--sans); font-size: 14px; color: var(--dim); margin-top: 8px; }
.overlay .big { font-family: var(--mono); font-size: 34px; color: var(--gold); display: block; margin-top: 10px; }
.replaybar { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: rgba(12,10,14,.92); border: 1px solid #4a3a20; padding: 8px 10px 8px 14px; border-radius: 99px; font-size: 13px; white-space: nowrap; }
.rp-tag { color: var(--gold); font-weight: 600; letter-spacing: .12em; font-size: 11px; }
.rp-speeds { display: flex; gap: 2px; }
.rp-speeds button { background: none; border: 1px solid transparent; border-radius: 99px; padding: 3px 9px; color: var(--dim); font-size: 12px; }
.rp-speeds button.on { border-color: var(--line); color: var(--text); background: var(--panel-2); }
.rp-live { background: var(--gold); color: #1a1208; border: 0; border-radius: 99px; padding: 6px 14px; font-weight: 600; font-size: 12.5px; }

.timeline { position: relative; padding: 4px 18px 10px; }
.timeline svg { width: 100%; height: 160px; display: block; cursor: crosshair; }
.tl-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12px; white-space: nowrap; pointer-events: none; }
.tl-legend { display: flex; gap: 16px; font-size: 12px; color: var(--faint); padding: 0 18px 14px; flex-wrap: wrap; }

.hero { padding: 18px; }
.hero-top { display: flex; gap: 14px; align-items: center; }
.sigil { width: 54px; height: 54px; flex: none; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--gold); background: radial-gradient(circle at 50% 40%, #3a2c18, #17120c); border: 1px solid #4a3a20; }
.sigil.dead { color: var(--faint); background: #15121a; border-color: var(--line); }
.hero-name { font-family: var(--serif); font-size: 25px; font-weight: 700; line-height: 1.05; }
.hero-sub { font-size: 13px; color: var(--dim); margin-top: 3px; }
.bar { height: 8px; border-radius: 99px; background: #241e27; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; transition: width .4s; }
.bar .hp { background: linear-gradient(90deg, #c03048, #ff6070); }
.bar .hp.psn { background: linear-gradient(90deg, #5a9a30, #a0e060); }
.bar .xp { background: linear-gradient(90deg, #8a6a2a, #f0c36a); }
.barrow { display: grid; grid-template-columns: 32px 1fr 80px; gap: 10px; align-items: center; font-size: 12px; color: var(--dim); margin-top: 12px; }
.barrow span:last-child { text-align: right; font-family: var(--mono); color: var(--text); }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.kv div { background: var(--panel-2); border-radius: 10px; padding: 8px 10px; }
.kv small { display: block; color: var(--faint); font-size: 11px; }
.kv b { font-family: var(--mono); font-size: 16px; }
.gear { margin: 16px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.gear li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--line); }
.gear li .g { font-family: var(--mono); width: 18px; text-align: center; flex: none; }
.gear li .v { margin-left: auto; font-family: var(--mono); color: var(--moss); font-size: 12px; white-space: nowrap; }
.gear li.leg { color: var(--gold); }
.gear li.none { color: var(--faint); }
.status { margin-top: 14px; font-size: 12.5px; color: var(--dim); display: flex; justify-content: space-between; gap: 10px; }
.status b { color: var(--text); font-weight: 500; }
.waiting { color: var(--dim); font-size: 14px; line-height: 1.6; margin-top: 14px; }

.toggle { font-size: 12px; color: var(--faint); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.toggle input { accent-color: var(--gold); }
.log { padding: 8px 6px 10px; max-height: 520px; overflow: auto; }
.log::-webkit-scrollbar { width: 6px; }
.log::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.entry { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 6px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.entry.new { animation: appear .6s ease; }
.entry:hover { background: var(--panel-2); }
.entry time { font-family: var(--mono); font-size: 11.5px; color: var(--faint); padding-top: 2px; }
.entry.minor { color: var(--dim); }
.log.major .entry.minor { display: none; }
.entry.death { color: #ffb3bd; background: rgba(224,68,90,.08); }
.entry.hero, .entry.legend, .entry.record { color: var(--gold); }
.entry.danger { color: var(--ember); }
.entry.boss { color: var(--violet); }
.entry.grave { color: #d0c8e0; }
.entry.win { color: #1a1208; background: var(--gold); font-weight: 600; }
.log-empty { color: var(--faint); font-size: 13px; padding: 10px 12px; }
@keyframes appear { from { opacity: 0; transform: translateY(-6px); background: rgba(240,195,106,.12); } to { opacity: 1; transform: none; } }

.below { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .below { grid-template-columns: minmax(0, 1fr); } }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-weight: 500; color: var(--faint); font-size: 12px; padding: 10px 18px 8px; border-bottom: 1px solid var(--line); }
td { padding: 9px 18px; border-bottom: 1px solid #1f1a23; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: var(--panel-2); }
td.n { font-family: var(--serif); font-size: 17px; font-weight: 600; }
td.n small { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--faint); font-weight: 400; }
td.m { font-family: var(--mono); font-size: 12.5px; }
tr.alive td.n { color: var(--gold); }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: #2a1c10; color: var(--gold); margin-left: 6px; font-family: var(--sans); font-weight: 500; }
.empty-row td { color: var(--faint); font-family: var(--sans); cursor: default; }
.days { display: grid; gap: 10px; padding: 14px 18px 14px; }
.day { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; background: var(--panel-2); border-radius: 10px; padding: 12px 14px; }
.day .d { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--dim); }
.day .t { font-size: 13px; }
.day .t small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }
.day.won { outline: 1px solid #6a5020; }
.day.won .d { color: var(--gold); }
.depth { font-family: var(--mono); font-size: 13px; text-align: right; }
.depth .spark { display: block; height: 4px; margin: 6px 0 0 auto; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--ember)); }
.days-empty { color: var(--faint); font-size: 13.5px; line-height: 1.6; }
.boss-note { margin: 0 18px 18px; padding: 12px 14px; border: 1px dashed #4a2030; border-radius: 10px; font-size: 13px; color: #d7a0aa; line-height: 1.5; }
.boss-note b { font-family: var(--mono); color: var(--blood); }
.boss-note.won { border-color: #6a5020; color: var(--gold); }

footer { max-width: 1480px; margin: 10px auto 40px; padding: 0 28px; color: var(--faint); font-size: 13px; line-height: 1.6; }
footer b { color: var(--dim); font-weight: 500; }

/* музыка и язык */
.music { display: inline-flex; align-items: center; gap: 8px; }
.mus-btn { width: 30px; height: 30px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; color: var(--dim); padding: 0; }
.mus-btn svg { width: 16px; height: 16px; }
.mus-btn .wave { display: none; }
.music.on .mus-btn { color: var(--gold); border-color: #4a3a20; }
.music.on .mus-btn .wave { display: inline; }
.music.on .mus-btn .mute { display: none; }
#vol { width: 86px; accent-color: var(--gold); cursor: pointer; }
.music:not(.on) #vol { opacity: .45; }
.langs { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.langs button { background: none; border: 0; padding: 4px 9px; font-size: 11.5px; letter-spacing: .06em; color: var(--faint); }
.langs button.on { background: var(--panel-2); color: var(--text); }

/* поделиться */
.rp-share { background: none; border: 1px solid #4a3a20; color: var(--gold); border-radius: 99px; padding: 5px 12px; font-size: 12.5px; }
.entry { grid-template-columns: 44px 1fr auto; }
.entry .sh { opacity: 0; background: none; border: 0; padding: 0 2px; color: var(--faint); font-size: 14px; line-height: 1; }
.entry:hover .sh, .entry .sh:focus-visible { opacity: 1; }
.entry .sh:hover { color: var(--gold); }
td.act { width: 30px; padding-left: 0; padding-right: 12px; text-align: right; }
td.act button { background: none; border: 0; color: var(--faint); font-size: 14px; padding: 2px; }
td.act button:hover { color: var(--gold); }
@media (hover: none) { .entry .sh { opacity: .7; } }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--panel-2); border: 1px solid #4a3a20; color: var(--text); padding: 10px 18px; border-radius: 99px; font-size: 13.5px; z-index: 10; box-shadow: 0 8px 30px rgba(0,0,0,.5); animation: appear .3s ease; }

/* режим эфира: /?stream=1 — кадр 1920×1080 для OBS */
.stream-url, .banner { display: none; }
html.stream, html.stream body { overflow: hidden; }
html.stream body { width: 1920px; height: 1080px; transform-origin: 0 0; cursor: none; }
html.stream .music, html.stream .langs, html.stream .below, html.stream footer, html.stream .replaybar, html.stream .toast,
html.stream .card-hd small, html.stream .tl-legend, html.stream .toggle, html.stream .entry .sh, html.stream .logo span { display: none !important; }
html.stream header { height: 88px; padding: 0 32px; flex-wrap: nowrap; gap: 28px; }
html.stream .logo b { font-size: 42px; }
html.stream .stream-url { display: inline-block; font-family: var(--mono); font-size: 24px; color: var(--gold); background: var(--panel-2); border: 1px solid #4a3a20; padding: 6px 18px; border-radius: 99px; }
html.stream .daybadge { font-size: 26px; }
html.stream .hdr-right { font-size: 17px; gap: 28px; flex-wrap: nowrap; }
html.stream .live { font-size: 15px; }
html.stream .stats { height: 48px; padding: 0 32px; align-items: center; font-size: 18px; flex-wrap: nowrap; overflow: hidden; }
html.stream main {
  max-width: none; height: 944px; padding: 20px 24px; gap: 20px;
  grid-template-columns: minmax(0, 1fr) 600px;
  grid-template-rows: auto minmax(0, 1fr) 190px;
  grid-template-areas: "map hero" "map log" "map tl";
}
html.stream .col { display: contents; }
html.stream .mapwrap { grid-area: map; display: flex; align-items: center; }
html.stream .hero { grid-area: hero; padding: 20px 22px; }
html.stream .logcard { grid-area: log; display: flex; flex-direction: column; overflow: hidden; }
html.stream .tlcard { grid-area: tl; overflow: hidden; }
html.stream .timeline svg { height: 140px; }
html.stream .log { max-height: none; flex: 1; overflow: hidden; padding-top: 4px; }
html.stream .entry { font-size: 16px; grid-template-columns: 52px 1fr; padding: 5px 12px; }
html.stream .entry time { font-size: 13px; }
html.stream .card h3 { font-size: 24px; }
html.stream .hero-name { font-size: 32px; }
html.stream .hero-sub, html.stream .status { font-size: 15px; }
html.stream .gear { font-size: 15.5px; margin-top: 12px; }
html.stream .gear li { padding: 5px 0; }
html.stream .kv b { font-size: 19px; }
html.stream .floorlabel { font-size: 32px; left: 34px; top: 30px; }
html.stream .floorlabel small { font-size: 15px; }
html.stream .activity { font-size: 18px; right: 34px; top: 32px; padding: 8px 16px; }
html.stream .overlay { font-size: 36px; }
html.stream .overlay .big { font-size: 48px; }
html.stream .banner {
  display: block; position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  max-width: 88%; text-align: center; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.25;
  background: rgba(12,10,14,.94); border: 1px solid #4a3a20; color: var(--gold); padding: 14px 30px; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); animation: banner-in .6s ease;
}
html.stream .banner[hidden] { display: none; }
html.stream .banner.death { color: #ffb3bd; border-color: #6a2030; }
html.stream .banner.boss { color: var(--violet); }
html.stream .banner.win { background: var(--gold); color: #1a1208; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }