/* clawmaster.ru — персона «Светлый аркадный зал» (уникальная, не P1–P5).
   СВЕТЛАЯ тема (правило проекта: тёмная — только для хоррор-игр; Claw Master — аркада).
   Палитра взята из самой игры: тёплый золотисто-кремовый фон — как экран героев
   (золото #F5B93C), тёмно-индиговый текст, бирюзовый акцент капсулы + малиновый второй.
   Аркадность добираем не темнотой, а: яркой полосой-«маркизой» в шапке, акцентной
   чертой у H2, «стеклянными» плашками и цветными обводками. */
:root{
  --bg:#FFF8EC; --bg2:#FFFDF7; --card:#FFFFFF; --panel:#FBF3E4;
  --ink:#1E2235; --muted:#6E7389; --line:#F0E3CE; --line2:#E6DAC2;
  --cyan:#0B7F78; --cyan-soft:#DCF3F1;
  --magenta:#C42A63; --magenta-soft:#FCE4ED;
  --amber:#B57900; --amber-soft:#FDF0D5;
  --green:#1F8A4C;
  --radius:14px;
  --shadow:0 2px 10px rgba(30,34,53,.05);
  --shadow-hi:0 8px 26px rgba(30,34,53,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font:16px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-image:radial-gradient(760px 380px at 12% -6%,rgba(11,127,120,.07),transparent 62%),
                   radial-gradient(680px 340px at 92% 2%,rgba(196,42,99,.06),transparent 64%);
  background-attachment:fixed;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.22;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:2.15rem}
h2{font-size:1.42rem;margin:2.1rem 0 .75rem;padding-left:.6rem;border-left:3px solid var(--cyan)}
h3{font-size:1.1rem;margin:1.5rem 0 .45rem;color:var(--cyan)}
p{margin:.72rem 0}
.container{max-width:940px;margin:0 auto;padding:0 18px}
.lead{font-size:1.08rem;color:#4C5266}
.kicker{display:inline-block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);font-weight:800;margin-bottom:.35rem}

/* ---------- шапка: ОДНА строка + «маркиза» автомата ---------- */
header.cab{background:rgba(255,253,247,.95);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
header.cab::before{content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--cyan) 0%,#F2B705 34%,var(--magenta) 68%,var(--cyan) 100%)}
.cab-in{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;height:60px;
  overflow-x:auto;scrollbar-width:none}
.cab-in::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);white-space:nowrap;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px;border:1px solid var(--line2)}
.brand b{font-size:1.1rem;letter-spacing:-.01em;display:block;line-height:1.1}
.brand .sub{display:block;font-size:.65rem;color:var(--muted);font-weight:600;letter-spacing:.06em}
nav.nv{display:flex;gap:17px;white-space:nowrap}
nav.nv a{color:var(--ink);font-size:.9rem;font-weight:600;padding:5px 1px;
  border-bottom:2px solid transparent}
nav.nv a:hover{color:var(--cyan);text-decoration:none;border-bottom-color:var(--cyan)}
nav.nv a.active{color:var(--cyan);border-bottom-color:var(--cyan)}

/* ---------- крошки ---------- */
.crumbs{font-size:.75rem;color:var(--muted);padding:.85rem 0 .1rem}
.crumbs a,.crumbs span{color:var(--muted)}

/* ---------- хиро (внутри контейнера) ---------- */
.hero{background:linear-gradient(160deg,#FFFFFF 0%,#FFF6E4 100%);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.5rem;margin:1rem 0 1.4rem;
  box-shadow:var(--shadow),inset 0 3px 0 0 rgba(11,127,120,.16)}
.hero h1{margin:.15rem 0 .55rem}
.hero .lead{max-width:46rem}

/* ---------- сетки/карточки ---------- */
.grid{display:grid;gap:16px;margin:1.2rem 0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .12s;box-shadow:var(--shadow)}
.card:hover{border-color:#BFE6E2;box-shadow:var(--shadow-hi);transform:translateY(-2px)}
.card .pad{padding:12px 14px}
.card .t{font-weight:700;font-size:.95rem}
.card .m{font-size:.8rem;color:var(--muted);margin-top:3px}
.card img{width:100%;height:auto;display:block}

/* ---------- бестиарий ---------- */
.best{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:1.2rem 0}
.bst{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.bst .av{flex:0 0 74px;width:74px;height:74px;border-radius:12px;display:grid;place-items:center;
  font-size:2rem;background:var(--panel);border:1px solid var(--line2)}
.bst .nm{font-weight:800}
.bst .ds{font-size:.88rem;margin-top:.15rem;color:#41465C}
.bst .tag{display:inline-block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);background:var(--amber-soft);border-radius:5px;padding:1px 7px;margin-top:.4rem;
  font-weight:700}

/* ---------- таблица зеркал ---------- */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:1rem 0;box-shadow:var(--shadow)}
.tbl th{background:var(--panel);text-align:left;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:#7A6A4A;padding:10px 13px;border-bottom:1px solid var(--line2)}
.tbl td{padding:11px 13px;border-top:1px solid var(--line);font-size:.9rem;vertical-align:middle}
.tbl tr:nth-child(even) td{background:#FFFCF6}
.btn{display:inline-block;background:linear-gradient(180deg,#12A79C,var(--cyan));color:#fff!important;
  font-weight:800;border-radius:9px;padding:7px 15px;font-size:.85rem;white-space:nowrap;
  box-shadow:0 2px 6px rgba(11,127,120,.28)}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--cyan)!important;border:1px solid var(--cyan);box-shadow:none}
.ok{color:var(--green);font-weight:700}
.unk{color:var(--amber);font-weight:700}

/* ---------- бейджи сторов ---------- */
.store-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:1.1rem 0}
.store-row a{line-height:0;opacity:.97;transition:transform .1s,opacity .15s}
.store-row a:hover{transform:translateY(-2px);opacity:1;text-decoration:none}
.store-row img{height:52px;width:auto;border-radius:7px}

/* ---------- скрины ---------- */
figure.scr{margin:1.5rem 0}
figure.scr img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line2);
  display:block;box-shadow:var(--shadow-hi)}
figure.scr figcaption{font-size:.8rem;color:var(--muted);margin-top:.45rem}

/* ---------- прочее ---------- */
ul.tick,ol.tick{margin:.7rem 0 .7rem 1.3rem}
ul.tick li,ol.tick li{margin:.38rem 0}
.note{background:var(--amber-soft);border-left:3px solid #E7A400;border-radius:0 10px 10px 0;
  padding:.85rem 1rem;font-size:.9rem;margin:1.2rem 0}
.note.bad{background:var(--magenta-soft);border-left-color:var(--magenta)}
.note.good{background:var(--cyan-soft);border-left-color:var(--cyan)}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:.6rem 0;
  overflow:hidden;box-shadow:var(--shadow)}
details.faq summary{cursor:pointer;padding:.85rem 1.05rem;font-weight:700;list-style:none;
  position:relative;font-size:.95rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:1.05rem;color:var(--cyan);font-weight:800}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 1.05rem 1rem;font-size:.92rem;color:#4C5266}
code.copy-code{display:inline-block;background:#F4F6F8;border:1px solid var(--line2);color:#0B5D57;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;padding:4px 10px;border-radius:6px;
  cursor:pointer;user-select:all;margin:2px 0}
code.copy-code:hover{border-color:var(--cyan)}
code.copy-code.done{color:var(--amber);border-color:#E7A400;background:var(--amber-soft)}

/* ---------- футер ---------- */
footer.cab{border-top:1px solid var(--line);margin-top:3rem;padding:1.3rem 0 2rem;
  color:var(--muted);font-size:.84rem;background:var(--bg2)}
footer.cab .links{display:flex;flex-wrap:wrap;gap:5px 13px}
footer.cab .links a{color:var(--muted)}
footer.cab .disc{margin-top:.65rem;font-size:.72rem;opacity:.9;line-height:1.5}

@media(max-width:820px){
  h1{font-size:1.72rem}
  .brand .sub{display:none}
  .g3,.best{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .tbl{display:block;overflow-x:auto}
}
@media(max-width:520px){
  .g3,.best{grid-template-columns:1fr}
  .bst .av{flex-basis:60px;width:60px;height:60px;font-size:1.6rem}
}