/* ============================================================
   Тема сайту — мова оформлення dungeonsanddragons.com:
   чорне + бурштин (#de8435) + ред D&D (#e40712), вузькі капітелі
   Oswald з широким трекінгом, гострі кути, кнопки-привиди.
   Свідомо єдина (темна) тема.
   ============================================================ */
:root{
  --bg:#000000;
  --panel:#0c0c0c;
  --panel-2:#151515;
  --line:rgba(255,255,255,.14);
  --line-hi:rgba(255,255,255,.34);
  --ember:#de8435;
  --ember-dim:rgba(222,132,53,.13);
  --blood:#e40712;
  --text:#ffffff;
  --muted:rgba(255,255,255,.62);
  --dim:rgba(255,255,255,.40);
  --danger:#e40712;
  --radius:0px;
  --font:"Oswald","Arial Narrow",system-ui,-apple-system,sans-serif;
  --brandfont:"Grenze Gotisch","Oswald",serif;
  --track:.14em;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 520px at 50% -18%, rgba(222,132,53,.07) 0%, rgba(222,132,53,0) 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-weight:300;
  line-height:1.65;
  letter-spacing:.005em;
  min-height:100vh;
}
a{color:var(--ember);text-decoration:none;transition:color .15s}
a:hover{color:#f0a860;text-decoration:none}
.muted{color:var(--muted)}

/* фон сайту + анімація (жар) */
#site-bg{
  position:fixed;inset:-3%;z-index:0;pointer-events:none;display:none;
  background:var(--site-bg,none) center/cover no-repeat;
  filter:blur(1.8px) brightness(.92);
  animation:kenburns 56s ease-in-out infinite alternate;
  will-change:transform;
}
#site-bg.on{display:block}
@media (max-width:640px){
  #site-bg{background-image:var(--site-bg-mobile, var(--site-bg, none))}
}
#site-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(140% 100% at 46% 4%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.72) 58%, rgba(0,0,0,.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.52));
}
@keyframes kenburns{
  from{transform:scale(1.02) translate(0,0)}
  to{transform:scale(1.08) translate(-1%,1%)}
}
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
.topbar,.wrap,.modal-backdrop{position:relative;z-index:1}
.topbar{z-index:20}
@media (prefers-reduced-motion:reduce){#ambient{display:none}#site-bg{animation:none}}
code{background:var(--panel-2);padding:2px 6px;border-radius:0;font-size:.9em;color:#f0c79a}

/* ---------- шапка / навігація ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(0,0,0,.9);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar__inner{
  max-width:1080px;margin:0 auto;padding:15px 20px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.brand{
  font-family:var(--brandfont);
  font-size:26px;font-weight:600;letter-spacing:.02em;
  color:var(--text);white-space:nowrap;line-height:1;
}
.brand a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:11px}
.brand a:hover{color:var(--ember)}
.brand__mark{
  height:38px;width:auto;flex:none;display:block;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));
}
.nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.nav a{
  padding:8px 14px;font-size:13px;font-weight:400;color:var(--muted);
  text-transform:uppercase;letter-spacing:var(--track);
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--ember);border-bottom-color:var(--ember)}

.wrap{max-width:1080px;margin:0 auto;padding:40px 20px 96px}
.wrap--narrow{max-width:760px}
h1.page-title{
  font-weight:600;font-size:clamp(1.7rem,4.4vw,2.4rem);
  text-transform:uppercase;letter-spacing:.16em;color:var(--text);
  margin:.1em 0 .7em;text-wrap:balance;line-height:1.1;
}
.lead{color:var(--muted);font-size:15px;margin:0 0 24px;max-width:62ch}

/* «Головна» — герой */
.page-title--hero{font-size:clamp(2rem,5.5vw,3.2rem);letter-spacing:.09em;margin-top:8px}
.lead--hero{font-size:17px;line-height:1.55;color:rgba(255,255,255,.82);font-weight:400;max-width:54ch;margin-bottom:32px}
.prose-final{
  margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.16em;font-size:14px;font-weight:500;
  color:var(--ember);
}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:0;cursor:pointer;
  font-family:var(--font);font-size:12.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--track);
  border:1px solid var(--line-hi);background:transparent;color:var(--text);
  transition:border-color .15s,background .15s,color .15s;
}
.btn:hover{border-color:var(--text);background:rgba(255,255,255,.06);text-decoration:none}
.btn svg{width:14px;height:14px;transition:transform .2s ease}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{border-color:var(--ember);color:var(--ember)}
.btn--primary:hover{background:var(--ember-dim);color:#f0a860;border-color:#f0a860}
.btn--ghost{border-color:var(--line)}
.btn--ghost:hover{border-color:var(--line-hi)}
.btn--sm{padding:7px 13px;font-size:11px}
.btn--danger{border-color:rgba(228,7,18,.5);color:#ff6b74}
.btn--danger:hover{border-color:var(--blood);background:rgba(228,7,18,.1)}

/* ---------- сітка ігор ---------- */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.games-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.game-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:22px;border-radius:0;color:inherit;overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  transition:border-color .16s,transform .12s,background .16s;
}
.game-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:3;
  background:var(--ember);opacity:0;transition:opacity .16s;
}
.game-card:hover{border-color:var(--line-hi);transform:translateY(-2px);text-decoration:none;background:#111}
.game-card:hover::before{opacity:1}

/* фон гри на картці */
.game-card__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:.4;filter:brightness(.82);
  transition:opacity .4s ease,filter .4s ease,transform 6s ease;
}
.game-card--has-bg{background:#000}
.game-card--has-bg::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.74) 52%,rgba(0,0,0,.52) 100%);
  transition:background .4s ease;
}
.game-card--has-bg > :not(.game-card__bg){position:relative;z-index:2}
.game-card--has-bg .game-card__title,
.game-card--has-bg .game-card__desc{text-shadow:0 1px 6px rgba(0,0,0,.85)}
.game-card--has-bg:hover{background:#000}
.game-card--has-bg:hover .game-card__bg{
  opacity:.95;filter:brightness(1.18) saturate(1.08);transform:scale(1.04);
}
.game-card--has-bg:hover::after{
  background:linear-gradient(105deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.46) 46%,rgba(0,0,0,.14) 100%);
}
.game-card__title{
  margin:0;font-size:18px;font-weight:600;color:var(--text);
  text-transform:uppercase;letter-spacing:.06em;line-height:1.15;
}
.game-card__desc{margin:0;font-size:13.5px;font-weight:300;color:var(--muted);flex:1;line-height:1.55}
.game-card__meta{
  display:flex;flex-wrap:wrap;gap:6px 10px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--dim);
}
.game-card__meta span{display:inline-flex;align-items:center}
.game-card__meta span:not(:last-child)::after{content:"·";margin-left:10px;color:rgba(255,255,255,.25)}
.game-card__meta .lc,.game-meta .lc{text-transform:lowercase}
.game-card__badge{
  align-self:flex-start;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:0;background:var(--ember-dim);
  border:1px solid rgba(222,132,53,.45);color:var(--ember);
  margin-bottom:2px;
}
.empty-state{
  grid-column:1/-1;text-align:center;padding:66px 20px;color:var(--dim);
  border:1px dashed var(--line);border-radius:0;font-size:14px;
}

/* ---------- список «ігри для додавання» ---------- */
.queue{margin-top:38px}
.queue h3{
  font-weight:600;color:var(--text);font-size:14px;margin:0 0 6px;
  text-transform:uppercase;letter-spacing:.12em;
}
.queue__item{
  display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:13px 15px;border:1px solid var(--line);border-radius:0;
  background:var(--panel);margin-top:8px;font-size:13.5px;
}
.queue__item b{color:var(--text);font-weight:500}
.queue__item .links{color:var(--muted);word-break:break-all;font-size:12.5px;margin-top:3px}
.queue__item .note{color:var(--dim);font-size:12px;margin-top:3px}

/* ---------- контент-блоки ---------- */
.prose{font-weight:300;color:rgba(255,255,255,.8);line-height:1.7}
.prose p{margin:.9em 0;max-width:60ch}
.prose ul{padding-left:1.3em}
.news-item{border-left:2px solid var(--ember);padding:2px 0 2px 16px;margin:0 0 26px}
.news-item .date{font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.news-kind{
  display:inline-block;margin-left:8px;padding:1px 7px;border-radius:0;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember);background:var(--ember-dim);border:1px solid rgba(222,132,53,.4);
}
.news-item h3{
  margin:.3em 0 .3em;font-weight:600;color:var(--text);font-size:15px;
  text-transform:uppercase;letter-spacing:.08em;
}
.news-item p{margin:.3em 0;color:var(--muted);font-size:14px;font-weight:300}

/* ---------- екран гри ---------- */
.game-head{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:8px}
.game-head h1{margin:.1em 0 .3em;font-weight:600;font-size:30px;color:var(--text);text-transform:uppercase;letter-spacing:.1em}
.game-head .lead{margin:0}

/* герой-фон на екрані гри */
.game-hero{
  position:relative;margin:-40px -20px 24px;padding:0;
  background-size:cover;background-position:center;overflow:hidden;
  animation:heroZoom 24s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{background-size:104%}to{background-size:116%}}
.game-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.92) 100%);
}
.game-hero__in{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:64px 20px 26px}
.game-hero__in .page-title{text-shadow:0 2px 20px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){.game-hero{animation:none}}
.game-meta{
  display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:14px;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
}
.game-meta span{display:inline-flex;align-items:center}
.game-meta span:not(:last-child)::after{content:"·";margin-left:12px;color:rgba(255,255,255,.25)}
.game-meta b{color:var(--text);font-weight:500}

.subtabs{display:flex;gap:2px;flex-wrap:wrap;margin:18px 0 24px;border-bottom:1px solid var(--line)}
.subtabs button{
  padding:10px 15px;border:none;background:none;color:var(--muted);cursor:pointer;
  font-family:var(--font);font-size:12px;text-transform:uppercase;letter-spacing:var(--track);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;
}
.subtabs button:hover{color:var(--text)}
.subtabs button.active{color:var(--ember);border-bottom-color:var(--ember)}
.subpanel{display:none}
.subpanel.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.subpanel iframe{width:100%;border:1px solid var(--line);border-radius:0;background:#fff}

.rules h2{font-weight:600;font-size:18px;color:var(--text);margin:1.7em 0 .5em;text-transform:uppercase;letter-spacing:.08em}
.rules h3{font-weight:500;font-size:15px;color:#e8e8e8;margin:1.3em 0 .4em;text-transform:uppercase;letter-spacing:.05em}
.rules ul,.rules ol{padding-left:1.3em}
.rules li{margin:.3em 0}
.rules table{border-collapse:collapse;width:100%;margin:1em 0;font-size:14px}
.rules th,.rules td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.rules th{background:var(--panel-2);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.callout{margin:1.2em 0;padding:14px 16px;border-radius:0;background:var(--panel-2);border:1px solid var(--line);border-left:2px solid var(--ember)}

.back-link{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.back-link:hover{color:var(--ember)}
footer.site-foot{margin-top:74px;text-align:center;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}

/* ---------- партійний лист ---------- */
.sheet-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 12px}
.sheet-frame{
  position:relative;width:100%;border:1px solid var(--line);border-radius:0;
  overflow:hidden;background:#0a0a0a;height:min(80vh,900px);
}
.sheet-frame iframe{width:100%;height:100%;border:0;display:block}
.sheet-hint{font-size:12px;color:var(--dim);margin:8px 0 0;transition:opacity .3s;text-transform:uppercase;letter-spacing:.06em}
.sheet-hint--warn{color:#ff6b74}
.launch-card{
  margin-top:26px;padding:40px 24px;text-align:center;
  border:1px solid var(--line);border-radius:0;background:var(--panel);
}
.launch-card__ic{width:34px;height:34px;margin:0 auto 14px;display:block;color:var(--ember)}
.launch-card p{max-width:420px;margin:0 auto 20px;color:var(--muted);font-size:14px;font-weight:300}
.field-row{display:flex;gap:14px;flex-wrap:wrap}
.field-row .field{flex:1;min-width:130px}

/* ---------- модалка ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;
  z-index:100;overflow-y:auto;
}
.modal-backdrop[hidden]{display:none}
.modal{
  width:100%;max-width:560px;background:#0a0a0a;
  border:1px solid var(--line-hi);border-radius:0;padding:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.modal h2{margin:0 0 6px;font-weight:600;font-size:18px;color:var(--text);text-transform:uppercase;letter-spacing:.1em}
.modal .hint{margin:0 0 20px;font-size:13px;color:var(--muted);font-weight:300}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em}
.field input[type=text],.field textarea{
  width:100%;padding:10px 12px;border-radius:0;border:1px solid var(--line);
  background:#000;color:var(--text);font-size:14px;font-family:var(--font);font-weight:300;
}
.field textarea{resize:vertical;min-height:70px;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ember)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}

/* ---------- віджет ШІ-ведучого ---------- */
.gm{display:flex;flex-direction:column;gap:12px}
.gm__bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gm__tts{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);cursor:pointer;text-transform:uppercase;letter-spacing:.06em}
.gm__log{
  display:flex;flex-direction:column;gap:14px;
  max-height:60vh;overflow-y:auto;padding:16px;
  border:1px solid var(--line);border-radius:0;background:rgba(255,255,255,.02);
}
.gm__msg{display:flex;flex-direction:column;gap:3px;max-width:88%}
.gm__msg--user{align-self:flex-end;align-items:flex-end}
.gm__who{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.gm__text{
  white-space:pre-wrap;line-height:1.65;font-size:14.5px;font-weight:300;
  padding:11px 14px;border-radius:0;border:1px solid var(--line);
}
.gm__msg--gm .gm__text{background:var(--panel-2);color:var(--text)}
.gm__msg--user .gm__text{background:var(--ember-dim);border-color:rgba(222,132,53,.35);color:#f0c79a}
.gm__text--typing::after{content:"▍";animation:blink 1s steps(1) infinite;color:var(--ember)}
@keyframes blink{50%{opacity:0}}
.gm__form{display:flex;gap:10px;align-items:flex-end}
.gm__form textarea{
  flex:1;padding:10px 12px;border-radius:0;border:1px solid var(--line);
  background:#000;color:var(--text);font-family:var(--font);font-weight:300;font-size:14px;resize:vertical;min-height:44px;
}
.gm__form textarea:focus{outline:none;border-color:var(--ember)}
.gm__form button{white-space:nowrap}
.gm__hint{
  font-size:13px;color:#ff6b74;background:rgba(228,7,18,.08);
  border:1px solid rgba(228,7,18,.3);border-radius:0;padding:10px 12px;white-space:pre-wrap;
}

:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  body{background:#fff;color:#111}
  .topbar,.subtabs,.back-link,footer.site-foot,.gm__form,.gm__bar{display:none}
  a{color:#111}
  .subpanel{display:block!important}
}