/* Стили внутри shadow root шапки и баннера: изолированы от игр в обе стороны. */
:host{
  --accent:#c6f068;--accent-ink:#11140a;--bg:#0c0e13;--surface:#141720;--surface-2:#1b1f2a;
  --line:#262b38;--text:#e9ecf2;--muted:#9aa2b3;--radius:12px;
  font:500 14px/1.4 "Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.bar{position:relative;display:flex;align-items:center;gap:20px;height:var(--shell-h,52px);padding:0 16px;
  background:rgba(12,14,19,.92);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;
  font:600 15px/1 "Unbounded","Manrope",sans-serif;letter-spacing:-.01em}
.logo img{display:block;width:26px;height:26px}
.nav{display:flex;gap:4px}
.nav a{display:block;padding:8px 12px;border-radius:8px;color:var(--muted);text-decoration:none;transition:color .2s,background-color .2s}
.nav a:hover{color:var(--text);background:var(--surface-2)}
:host([data-active="games"]) a[data-nav="games"],
:host([data-active="history"]) a[data-nav="history"],
:host([data-active="articles"]) a[data-nav="articles"],
:host([data-active="about"]) a[data-nav="about"]{color:var(--text);background:var(--surface-2)}
.tools{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
.tools:empty{display:none}
.game-title{font:600 14px/1 "Unbounded","Manrope",sans-serif;color:var(--accent);margin-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools button,.menu-btn{height:34px;min-width:34px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);white-space:nowrap;transition:background-color .2s,border-color .2s}
.tools button:hover,.menu-btn:hover{background:var(--surface-2);border-color:#3a4050}
.tools button:active,.menu-btn:active{transform:translateY(1px)}
.menu-btn{display:none;margin-left:auto}
.tools:not(:empty) + .menu-btn{margin-left:0}

.help{position:fixed;top:calc(var(--shell-h,52px) + 8px);right:8px;bottom:8px;width:min(420px,calc(100vw - 16px));overflow:auto;
  padding:20px 22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(4,6,10,.6)}
[hidden]{display:none!important}
.help-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.help h2{margin:0;font:600 20px/1.2 "Unbounded","Manrope",sans-serif}
.help h3{margin:20px 0 6px;font-size:13px;color:var(--muted);font-weight:600}
.help p,.help ul{margin:0;font-size:15px;line-height:1.55}
.help ul{padding-left:1.1em}
.help li{margin:.25em 0}
.help a{color:var(--accent)}
.help-close{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2)}

.banner{display:flex;align-items:center;gap:16px;max-width:760px;margin:0 auto;padding:14px 16px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--line);box-shadow:0 18px 50px rgba(4,6,10,.55)}
.banner p{margin:0;flex:1;font-size:14px;color:var(--text)}
.banner a{color:var(--accent)}
.banner button{flex:none;height:38px;padding:0 18px;border-radius:8px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:700}

@media (max-width:760px){
  .logo span{display:none}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;gap:2px;padding:8px;
    background:var(--bg);border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:12px}
  .tools button[data-action="random"]{display:none}
  .banner{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}