/* =========================================================
   Wishworkskins — слой оформления.
   Подключается после styles.css и задаёт палитру и «дорогие» детали:
   стеклянная шапка, тонкие линии, зерно на фоне, сдержанное свечение.
   Палитра выбирается атрибутом data-theme на <html>.
   ========================================================= */

/* ---------- Палитры ---------- */
:root,
html[data-theme="holo"]{
  /* Graphite Holo: графит + голографическая пастель (как holo-стикеры) */
  --bg:#0b0b0f; --bg-top:rgba(11,11,15,.72);
  --surface:#131318; --surface-2:#1a1a21; --surface-3:#22222b;
  --line:rgba(255,255,255,.075); --line-strong:rgba(255,255,255,.14);
  --text:#ecebf3; --muted:#8e8c9d; --white:#ffffff;
  --accent:#f4b6d8; --accent-2:#a9e6f2; --accent-3:#cbbcff;
  --accent-rgb:244,182,216;
  --accent-ink:#17111c;
  --grad:linear-gradient(115deg,#f7b9d8 0%,#d5c2ff 45%,#a7e8f1 100%);
  --grad-text:linear-gradient(100deg,#ffd3e8,#d9cbff 50%,#bdf1f7);
  --bg-glow:radial-gradient(900px 480px at 10% -120px,rgba(244,182,216,.14),transparent 70%),
            radial-gradient(800px 420px at 100% -60px,rgba(169,230,242,.10),transparent 70%);
}
html[data-theme="velvet"]{
  /* Velvet Rose: тёмная слива + пыльная роза + шампань */
  --bg:#1a0b13; --bg-top:rgba(26,11,19,.74);
  --surface:#241019; --surface-2:#2e1621; --surface-3:#3a1d2a;
  --line:rgba(255,220,232,.08); --line-strong:rgba(255,220,232,.16);
  --text:#f6eaef; --muted:#ab929e; --white:#fff7fa;
  --accent:#f2a9c0; --accent-2:#e9c99d; --accent-3:#f6c7d6;
  --accent-rgb:242,169,192;
  --accent-ink:#2a0e1a;
  --grad:linear-gradient(115deg,#f4afc5 0%,#f1c0b6 50%,#e9cb9f 100%);
  --grad-text:linear-gradient(100deg,#ffd0de,#f3d3b5);
  --bg-glow:radial-gradient(900px 480px at 15% -120px,rgba(242,169,192,.16),transparent 70%),
            radial-gradient(700px 420px at 100% 0,rgba(233,201,157,.09),transparent 70%);
}
html[data-theme="midnight"]{
  /* Midnight Neon: глубокий индиго + горячий розовый + циан, неон только в акцентах */
  --bg:#08091a; --bg-top:rgba(8,9,26,.72);
  --surface:#0f1128; --surface-2:#151839; --surface-3:#1c2048;
  --line:rgba(160,170,255,.10); --line-strong:rgba(160,170,255,.2);
  --text:#e9eaff; --muted:#8b90bf; --white:#ffffff;
  --accent:#ff6bb5; --accent-2:#6ff0ff; --accent-3:#a99bff;
  --accent-rgb:255,107,181;
  --accent-ink:#ffffff;
  --grad:linear-gradient(115deg,#ff5aa9 0%,#b46bff 55%,#53d9ff 100%);
  --grad-text:linear-gradient(100deg,#ff9bd0,#c9a6ff 50%,#8cecff);
  --bg-glow:radial-gradient(900px 500px at 10% -140px,rgba(255,90,169,.20),transparent 70%),
            radial-gradient(800px 460px at 100% -40px,rgba(83,217,255,.13),transparent 70%);
}

/* связываем с переменными из styles.css */
:root, html[data-theme]{
  --panel:var(--surface); --tile:var(--surface-2); --tile-hover:var(--surface-3);
  --text-soft:var(--muted);
  --pink:var(--accent); --neon:var(--accent); --neon-2:var(--accent-2);
  --btn:var(--accent); --btn-hover:var(--accent);
  --yes:var(--accent); --yes-hover:var(--accent);
  --no:var(--surface-3); --no-hover:#3a3446;
  --glow:0 0 0 1px rgba(var(--accent-rgb),.35),0 8px 30px -6px rgba(var(--accent-rgb),.45);
  --glow-soft:0 10px 40px -12px rgba(var(--accent-rgb),.35);
  --radius:14px;
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.9);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Основа ---------- */
body{background:var(--bg-glow),var(--bg);background-attachment:fixed;color:var(--text);letter-spacing:-.005em}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:var(--grain);opacity:.55;mix-blend-mode:overlay}
.top,main,.vote,.foot{position:relative;z-index:1}
.top{z-index:30}
::selection{background:rgba(var(--accent-rgb),.35);color:#fff}
:focus-visible{outline:2px solid var(--accent)}

/* ---------- Шапка: стекло и тонкая линия ---------- */
.top{background:var(--bg-top);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.top::after{height:1px;opacity:.55;background:var(--grad);box-shadow:none}
.brand img{filter:none}
.wordmark{color:var(--white);text-shadow:none;font-weight:700;letter-spacing:-.035em}
.wordmark b{font-weight:700;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.mainnav a:hover{background:rgba(255,255,255,.05)}

/* кнопки */
.btn-neon,.vote-btn,.steam,.strip-cta,.q-actions .yes,.q-done .yes,.empty button{
  background:var(--grad);color:var(--accent-ink);font-weight:650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 28px -10px rgba(var(--accent-rgb),.65);
  text-shadow:none;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;
}
.btn-neon:hover,.vote-btn:hover,.steam:hover,.strip:hover .strip-cta,.q-actions .yes:hover,.q-done .yes:hover{
  background:var(--grad);filter:brightness(1.06) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px -10px rgba(var(--accent-rgb),.8);
}
.btn-ghost{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);background:rgba(255,255,255,.02)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.06)}

/* ---------- Голосование ---------- */
.vote-head h2{color:var(--white);font-size:1.6rem;font-weight:750;letter-spacing:-.035em}
.vote-head p{color:var(--muted)}
.strip{
  border-radius:20px;padding:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--surface);
  box-shadow:var(--shadow-card);position:relative;overflow:hidden;
}
/* голографическая рамка */
.strip::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.strip-pics .pin{border-radius:12px;background:var(--surface-2);box-shadow:none;opacity:.82}
.strip:hover .pin{opacity:.6}
.strip-pics .pin span{background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));position:absolute;left:0;right:0;bottom:0;padding:18px 10px 8px;color:#fff}
.strip-pics .pin{position:relative}
.strip-pics .pin img{aspect-ratio:16/10}
.strip-cta{border-radius:999px;padding:13px 28px;font-size:1rem}
.vote-progress{color:var(--muted)}

/* ---------- Каталог ---------- */
.catalog-bar{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:4px 8px;box-shadow:var(--shadow-card)}
.tabs button{color:var(--muted);font-weight:550;border-bottom:0;border-radius:10px;padding:9px 14px;margin:4px 0}
.tabs button:hover{color:var(--white);background:rgba(255,255,255,.04)}
.tabs button[aria-current="page"]{color:var(--white);text-shadow:none;background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.search input,.sort select{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:10px}
.search input{border-radius:999px}
.search input:focus{border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}
.count{color:var(--muted);margin:18px 2px 18px}

.grid{gap:22px 18px}
.card button{
  border-radius:var(--radius);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card button:hover{background:var(--surface);transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.45);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 50px -24px rgba(var(--accent-rgb),.45)}
.card .pic{border-radius:0;background:var(--surface-2);transition:transform .35s ease}
.card button:hover .pic{transform:scale(1.03)}
.card .meta{padding:12px 14px 14px;border-top:1px solid var(--line);position:relative;background:var(--surface)}
.card .title{font-weight:600;font-size:.96rem;letter-spacing:-.01em}
.card .author{color:var(--muted)}
.card .row{margin-top:10px}
.card .votes{color:var(--text);opacity:.8;font-weight:500}
.card .kind{background:transparent;color:var(--muted);border:1px solid var(--line-strong);border-radius:999px;font-size:.72rem;padding:1px 8px}
.card .mine{background:var(--grad);color:var(--accent-ink);font-weight:650;border-radius:999px;box-shadow:0 6px 16px -6px rgba(var(--accent-rgb),.7);top:10px;left:10px}

.pager button{background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--text)}
.pager button:hover:not(:disabled){background:var(--surface-2)}
.pager button[aria-current="page"]{background:var(--grad);color:var(--accent-ink);border-color:transparent;box-shadow:none}

.foot{background:transparent;border-top:1px solid var(--line);color:var(--muted)}

/* ---------- Окна ---------- */
dialog{background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:20px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.85),0 0 0 1px rgba(var(--accent-rgb),.08)}
dialog::backdrop{background:rgba(5,5,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.close{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}
.close:hover{background:rgba(255,255,255,.12);box-shadow:none;color:#fff}
.kind-chip{background:transparent;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.4);border-radius:999px}
.info h2,.q-info h2,.q-done h2,.authbox h2{color:var(--white);letter-spacing:-.035em}
.by{color:var(--muted)}
.by a{color:var(--accent)}
.stats div{background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.stats dt{color:var(--muted)}
.stats dd{color:var(--white);font-weight:650}
.viewer,.q-pic{background:var(--bg)}
.thumbs{background:var(--bg)}
.thumbs button{border-radius:8px;overflow:hidden}
.thumbs button[aria-current="true"]{border-color:var(--accent)}
.desc{color:var(--muted)}
.vote-btn{border-radius:999px}
.vote-btn[aria-pressed="true"]{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.7)}
.sheet-actions .steam{background:rgba(255,255,255,.03);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.sheet-actions .steam:hover{background:rgba(255,255,255,.07);filter:none}
.vote-note b{color:var(--accent)}
.q-top{background:transparent;border-bottom:1px solid var(--line)}
.q-actions .no{background:var(--surface-3);color:var(--text)}
.q-actions .skip{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
.q-steam{color:var(--accent)}
.auth-logo{filter:none}
.steam-login{background:#101318;border:1px solid var(--line-strong);border-radius:14px}
.steam-login:hover{border-color:rgba(var(--accent-rgb),.6);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.1)}
.auth-msg{color:var(--accent)}
.user-chip{background:rgba(255,255,255,.03);border-color:var(--line-strong)}
.user-chip img{box-shadow:0 0 0 2px var(--surface),0 0 0 3px rgba(var(--accent-rgb),.8)}
.user-menu{background:var(--surface);border-color:var(--line-strong)}

@media (max-width:760px){
  .catalog-bar{border-radius:16px;padding:4px}
  .sheet-actions{background:linear-gradient(180deg,transparent,var(--surface) 24%)}
  dialog.authbox{border:1px solid var(--line-strong)}
  .vote-head h2{font-size:1.35rem}
  .tabs button{padding:9px 10px}
}
@media (hover:none){
  .card button:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow-card)}
  .card button:hover .pic{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .card button,.card .pic{transition:none}
}

/* строки под кнопкой голосования */
.vote-note{display:flex;flex-direction:column;gap:3px;color:var(--muted)}
.note-line b{color:var(--accent);font-weight:650}
.note-hint{font-size:.8rem;opacity:.85}
@media (max-width:760px){ .vote-note{align-items:center} }