/* TapNova PRO V17.1 — visible visual layer */
:root{
  --tn-bg-0:#050711;--tn-bg-1:#0a1020;--tn-bg-2:#111b32;
  --tn-surface:rgba(12,18,33,.74);--tn-surface-strong:rgba(10,15,29,.90);
  --tn-border:rgba(164,205,255,.16);--tn-text:#f7f9ff;--tn-muted:#9fabc0;
  --tn-accent:#8b7cff;--tn-accent-2:#35d7ff;--tn-accent-3:#e7b8ff;
  --tn-glow:rgba(53,215,255,.28);--tn-radius-xl:24px;--tn-radius-md:14px;
}
html[data-tn-theme="cyberpunk"]{--tn-bg-0:#07030b;--tn-bg-1:#16091b;--tn-bg-2:#08141b;--tn-accent:#ff4fd8;--tn-accent-2:#36f4ff;--tn-accent-3:#ffe45e;--tn-glow:rgba(255,79,216,.28)}
html[data-tn-theme="cosmic"]{--tn-bg-0:#030714;--tn-bg-1:#0e1740;--tn-bg-2:#281451;--tn-accent:#a68cff;--tn-accent-2:#62e7ff;--tn-accent-3:#f1c7ff;--tn-glow:rgba(166,140,255,.30)}
html[data-tn-theme="anime"]{--tn-bg-0:#110b18;--tn-bg-1:#25132c;--tn-bg-2:#112133;--tn-accent:#ff91c8;--tn-accent-2:#7de8ff;--tn-accent-3:#fff0a8;--tn-glow:rgba(255,145,200,.28)}
html[data-tn-theme="minimal"]{--tn-bg-0:#0b0d12;--tn-bg-1:#11151d;--tn-bg-2:#161b25;--tn-accent:#e6eaf2;--tn-accent-2:#9aa7b8;--tn-accent-3:#ffffff;--tn-glow:rgba(255,255,255,.10)}
html[data-tn-theme="professional"]{--tn-bg-0:#071018;--tn-bg-1:#0c1a27;--tn-bg-2:#11283b;--tn-accent:#74b9ff;--tn-accent-2:#72e6c1;--tn-accent-3:#dcecff;--tn-glow:rgba(116,185,255,.22)}
html,body{background:var(--tn-bg-0)!important;color:var(--tn-text)!important}
body{position:relative;isolation:isolate}
.tn-v17-bg{position:fixed;inset:0;z-index:-4;overflow:hidden;pointer-events:none;background:linear-gradient(160deg,var(--tn-bg-0),var(--tn-bg-1) 52%,var(--tn-bg-2));}
.tn-v17-bg::before,.tn-v17-bg::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.52;will-change:transform;animation:tn-orbit 16s ease-in-out infinite alternate}
.tn-v17-bg::before{width:52vw;height:52vw;left:-12vw;top:-20vw;background:radial-gradient(circle,var(--tn-accent),transparent 66%)}
.tn-v17-bg::after{width:46vw;height:46vw;right:-10vw;bottom:-18vw;background:radial-gradient(circle,var(--tn-accent-2),transparent 68%);animation-duration:21s;animation-direction:alternate-reverse}
.tn-v17-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%)}
@keyframes tn-orbit{from{transform:translate3d(-2%,0,0) scale(.92)}to{transform:translate3d(8%,7%,0) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.tn-v17-bg::before,.tn-v17-bg::after{animation:none!important}}
html[data-tn-motion="off"] .tn-v17-bg::before,html[data-tn-motion="off"] .tn-v17-bg::after{animation:none!important}
/* Shared surfaces */
.nav,.top{backdrop-filter:blur(20px) saturate(1.2)}
.card,.panel,.game-shell,.ad,.song-card,.result-card{background:linear-gradient(180deg,rgba(18,26,45,.82),rgba(9,14,27,.78))!important;border:1px solid var(--tn-border)!important;box-shadow:0 22px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important}
.card,.panel,.game-shell{border-radius:var(--tn-radius-xl)!important}
.btn,button.btn{border-radius:var(--tn-radius-md)!important;border:1px solid rgba(166,211,255,.16)!important;background:rgba(20,28,47,.78)!important;color:var(--tn-text)!important;box-shadow:none!important;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease!important}
.btn:hover,button.btn:hover{transform:translateY(-2px);border-color:rgba(126,220,255,.42)!important;background:rgba(28,40,66,.92)!important;box-shadow:0 12px 30px rgba(0,0,0,.22)!important}
.btn.primary,.actions>.btn:first-child:not(.secondary),button.primary{background:linear-gradient(135deg,var(--tn-accent),var(--tn-accent-2))!important;color:#071019!important;border-color:transparent!important;font-weight:900!important;box-shadow:0 12px 32px var(--tn-glow)!important}
input[type="range"]{accent-color:var(--tn-accent-2)}
select,input:not([type="range"]):not([type="checkbox"]):not([type="color"]),textarea{background:rgba(6,11,22,.82)!important;border-color:var(--tn-border)!important;color:var(--tn-text)!important}
/* Home */
.tn-version-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid rgba(135,220,255,.22);border-radius:999px;background:rgba(7,14,27,.56);backdrop-filter:blur(12px);font-size:11px;font-weight:900;letter-spacing:.12em;color:#d9f7ff;text-transform:uppercase;margin-bottom:14px}.tn-version-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tn-accent-2);box-shadow:0 0 16px var(--tn-accent-2)}
.hero h1{background:linear-gradient(110deg,#fff 10%,var(--tn-accent-3) 42%,var(--tn-accent-2) 78%,#fff);background-size:180% auto;color:transparent!important;-webkit-background-clip:text;background-clip:text;text-shadow:none!important;letter-spacing:.075em!important}
.hero p{color:#bdc8da!important}.hero .eyebrow{color:var(--tn-accent-2)!important}
.tn-feature-strip{max-width:760px;margin:28px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.tn-feature{padding:11px 10px;border-radius:14px;border:1px solid var(--tn-border);background:rgba(7,13,25,.58);backdrop-filter:blur(12px);font-size:12px;color:var(--tn-muted)}.tn-feature b{display:block;color:var(--tn-text);font-size:14px;margin-bottom:2px}
.game-frame{box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
/* Settings visual lab */
.tn-visual-lab{margin:0 0 18px;padding:18px;border:1px solid rgba(118,222,255,.25);border-radius:20px;background:linear-gradient(135deg,rgba(32,45,79,.72),rgba(9,16,31,.72));box-shadow:0 18px 55px rgba(0,0,0,.25)}
.tn-visual-lab h2{margin:0 0 6px}.tn-visual-lab p{margin:0 0 14px;color:var(--tn-muted)}.tn-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tn-theme-btn{appearance:none;border:1px solid var(--tn-border);border-radius:14px;padding:12px;background:rgba(6,11,22,.66);color:var(--tn-text);font-weight:800;cursor:pointer;text-align:left;transition:.16s}.tn-theme-btn:hover{transform:translateY(-2px);border-color:var(--tn-accent-2)}.tn-theme-btn[aria-pressed="true"]{border-color:var(--tn-accent-2);box-shadow:0 0 0 2px rgba(53,215,255,.12),0 10px 28px var(--tn-glow);background:rgba(26,38,64,.92)}.tn-theme-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;background:linear-gradient(135deg,var(--tn-accent),var(--tn-accent-2))}
.tn-lab-options{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.tn-lab-options label{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--tn-border);border-radius:12px;background:rgba(6,11,22,.55);font-size:13px}
@media(max-width:760px){.tn-feature-strip{grid-template-columns:repeat(2,1fr)}.tn-theme-grid{grid-template-columns:repeat(2,1fr)}}

/* Bridge V16 variables to the V17 Theme Engine so legacy screens visibly react. */
html[data-tn-theme]{
  --bg:var(--tn-bg-0)!important;--panel:var(--tn-surface)!important;--line:var(--tn-border)!important;
  --text:var(--tn-text)!important;--muted:var(--tn-muted)!important;
  --accent:var(--tn-accent)!important;--accent2:var(--tn-accent-2)!important;
  --a:var(--tn-accent)!important;--b:var(--tn-accent-2)!important;
}
body{background:transparent!important}
.tn-v17-bg{z-index:-1}
body::before{opacity:.32!important}
html[data-tn-theme="minimal"] body::before{opacity:.10!important}
html[data-tn-theme="professional"] body::before{opacity:.18!important}