/* Layout: a modern site wearing an 80s arcade cabinet. Dark "cabinet" background, the logo's
   two gears as the neon marquee, game vocabulary (SELECT PLAYER, LEVELS, HIGH SCORES, PRESS START)
   always paired with plain Greek so nothing is lost. Deliberately single dark theme. */
:root{
  --bg:#0E0B1F;           /* night cabinet */
  --panel:#1B1636;        /* card panels */
  --panel-2:#241D47;
  --line:#33295F;
  --ink:#F3EFFF;
  --muted:#ADA6CE;
  --orange:#FF9F1C;       /* big gear */
  --yellow:#FFD23F;       /* small gear / sun */
  --cyan:#2EC4F1;         /* big gear core */
  --red:#FF3B3B;          /* small gear core, START */
  --violet:#7B5CFF;       /* neon details */
  --rust:#B5431A;         /* logo square */
  --gs-display:"Tektur","Commissioner","Segoe UI",Arial,sans-serif;
  --body:"Commissioner","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pixel:"Press Start 2P","Courier New",monospace;
  --music:"Noto Music","Segoe UI Symbol",serif;
  --ease:cubic-bezier(.25,.8,.25,1);
  --t:.55s;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --wrap:1200px;
  --glow-o:0 0 18px rgba(255,159,28,.55);
  --glow-c:0 0 18px rgba(46,196,241,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
/* faint CRT scanlines over the whole page */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--gs-display);font-weight:700;line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-.01em;color:var(--ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px{font-family:var(--pixel);font-size:.62rem;letter-spacing:.06em;line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;gap:10px;line-height:1;font-family:var(--pixel);font-size:.62rem;letter-spacing:.08em;color:var(--yellow);text-transform:uppercase}
.eyebrow::before{content:"";flex:none;width:7px;height:9px;margin-top:-2px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}
.section{padding-block:clamp(64px,9vw,112px);position:relative}
.section-head{display:grid;align-content:start;gap:14px;max-width:64ch;margin-bottom:clamp(30px,5vw,48px)}
.section-head h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.section-head p{color:var(--muted)}
.band{background:linear-gradient(180deg,#130F2A,#171233)}
.neon-o{color:var(--orange);text-shadow:var(--glow-o)}
.neon-c{color:var(--cyan);text-shadow:var(--glow-c)}

/* ---------- Buttons: arcade push buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:14px;font:700 1rem/1 var(--gs-display);letter-spacing:.02em;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.btn .tag{font-family:var(--pixel);font-size:.55rem;letter-spacing:.06em;opacity:.85;line-height:1;position:relative;top:var(--tag-y,2px)}
.btn .arr{display:inline-block;transition:transform var(--t) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-start{background:var(--red);color:#fff;box-shadow:0 6px 0 #9E1B1F,0 12px 26px -8px rgba(255,59,59,.7)}
.btn-start:hover{transform:translateY(-2px);box-shadow:0 8px 0 #9E1B1F,0 18px 34px -8px rgba(255,59,59,.85);background:#FF5252}
.btn-start:active{transform:translateY(5px);box-shadow:0 1px 0 #9E1B1F,0 6px 14px -6px rgba(255,59,59,.7)}
.btn-ghost{background:rgba(46,196,241,.06);color:var(--cyan);border-color:var(--cyan);box-shadow:inset 0 0 0 rgba(46,196,241,0),0 0 0 rgba(46,196,241,0)}
.btn-ghost:hover{background:rgba(46,196,241,.14);transform:translateY(-2px);box-shadow:inset 0 0 18px rgba(46,196,241,.25),0 0 22px rgba(46,196,241,.45);color:#fff}
.btn-yellow{background:var(--yellow);color:#14102A;box-shadow:0 6px 0 #B38F12,0 12px 26px -8px rgba(255,210,63,.6)}
.btn-yellow:hover{transform:translateY(-2px);box-shadow:0 8px 0 #B38F12,0 18px 34px -8px rgba(255,210,63,.8)}
.btn-yellow:active{transform:translateY(5px);box-shadow:0 1px 0 #B38F12}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--cyan);text-decoration:none;background:linear-gradient(var(--orange),var(--orange)) left bottom/0 2px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease),color var(--t) var(--ease)}
.link-arrow::after{content:"→";transition:transform var(--t) var(--ease)}
.link-arrow:hover{background-size:100% 2px;color:#fff}
.link-arrow:hover::after{transform:translateX(5px)}

/* ---------- Brand ---------- */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:0}
.brand-mark{width:50px;height:46px;flex:none;transition:transform .6s var(--ease)}
.brand-mark svg{width:100%;height:100%}
.brand-mark .mg-big,.brand-mark .mg-small{transition:transform 1.2s var(--ease)}
.brand:hover .mg-big{transform:rotate(60deg)}
.brand:hover .mg-small{transform:rotate(-100deg)}
.brand-text{display:grid;line-height:1.05}
.brand-name{white-space:nowrap;font-family:var(--gs-display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;text-transform:lowercase}
.brand-name b{color:var(--orange);font-weight:800}
.brand-sub{font-family:var(--pixel);font-size:.5rem;letter-spacing:.06em;color:var(--muted);margin-top:5px;white-space:nowrap}
.ray-o{fill:url(#gOr)}
.ray-y{fill:#FFD23F}
.brand-mark .ray-o{fill:#FF9F1C}

/* ---------- Header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(14,11,31,.82);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--orange),var(--cyan),var(--violet),transparent);opacity:.7}
.header-inner{max-width:1320px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.main-nav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.main-nav>ul>li>a,.nav-drop-btn{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:none;font:600 .95rem/1 var(--gs-display);letter-spacing:.01em;background:none;border:0;cursor:pointer;white-space:nowrap;transition:color var(--t) var(--ease),text-shadow var(--t) var(--ease)}
.main-nav>ul>li>a::after,.nav-drop-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--orange);box-shadow:var(--glow-o);transform:scaleX(0);transition:transform .45s var(--ease)}
.main-nav>ul>li>a:hover,.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{color:var(--yellow);text-shadow:0 0 12px rgba(255,210,63,.5)}
.main-nav>ul>li>a:hover::after,.nav-drop-btn:hover::after,.nav-drop.open .nav-drop-btn::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1)}
.main-nav a[aria-current="page"]{color:var(--yellow)}
.nav-drop{position:relative}
.nav-drop-btn svg{transition:transform var(--t) var(--ease)}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
.drop-panel{position:absolute;top:100%;left:50%;width:370px;padding-top:12px;opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.nav-drop.open .drop-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.drop-inner{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 48px -20px rgba(0,0,0,.8),0 0 0 1px rgba(123,92,255,.15);padding:8px;display:grid;gap:2px}
.drop-inner a{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink);transition:background .5s var(--ease)}
.drop-inner a:hover{background:var(--panel-2)}
.drop-ico{width:44px;height:44px;border-radius:12px;background:var(--panel-2);display:grid;place-items:center;color:var(--cyan);border:1px solid var(--line);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.drop-ico svg{width:22px;height:38px}
.drop-inner a strong{color:var(--pb,var(--ink));transition:text-shadow .5s var(--ease)}
.drop-inner a.p-on strong{color:#A08CFF}
.drop-inner a .drop-ico{color:var(--pb);border-color:color-mix(in srgb,var(--pb,#33295F) 45%,var(--line));box-shadow:0 0 8px -2px var(--pg,transparent)}
.drop-inner a:hover{background:var(--pc,var(--panel-2))}
.drop-inner a:hover strong{text-shadow:0 0 12px var(--pg)}
.drop-inner a:hover .drop-ico{border-color:var(--pb);box-shadow:0 0 18px var(--pg),inset 0 0 10px var(--pc);transform:rotate(-6deg)}
.drop-inner strong{display:block;font-weight:600;font-size:.98rem}
.drop-inner small{display:block;color:var(--muted);font-size:.82rem;line-height:1.35}
.menu-toggle{display:none}
@media (max-width:1240px){
  .main-nav{display:none}
  .menu-toggle{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;border:2px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
  .menu-toggle:hover{border-color:var(--orange);box-shadow:var(--glow-o)}
  .menu-toggle .bars{display:grid;gap:5px;width:20px}
  .menu-toggle .bars i{display:block;height:2px;border-radius:2px;background:currentColor}
  .menu-toggle .bars i:last-child{width:60%;justify-self:end}
}
@media (max-width:400px){.brand-name{font-size:1.25rem}.brand-mark{width:44px;height:40px}}

/* ---------- Mobile menu ---------- */
.mnav{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.mnav.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mnav-top{position:sticky;top:0;z-index:2;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.mnav-close{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;border:0;background:var(--red);color:#fff;cursor:pointer;box-shadow:0 4px 0 #9E1B1F;transition:transform .45s var(--ease)}
.mnav-close:hover{transform:rotate(90deg)}
.mnav-body{padding:12px var(--gutter-r) calc(env(safe-area-inset-bottom,0px) + 24px) var(--gutter);display:flex;flex-direction:column;flex:1}
.mnav-list{list-style:none;margin:0;padding:0}
.mnav-list>li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.mnav.open .mnav-list>li{opacity:1;transform:none}
.mnav.open .mnav-list>li:nth-child(2){transition-delay:.04s}.mnav.open .mnav-list>li:nth-child(3){transition-delay:.08s}.mnav.open .mnav-list>li:nth-child(4){transition-delay:.12s}.mnav.open .mnav-list>li:nth-child(5){transition-delay:.16s}.mnav.open .mnav-list>li:nth-child(6){transition-delay:.2s}.mnav.open .mnav-list>li:nth-child(7){transition-delay:.24s}
.mnav-list>li>a,.msub-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 2px;text-decoration:none;font:700 1.4rem/1.2 var(--gs-display);color:var(--ink);background:none;border:0;cursor:pointer;text-align:left;transition:color var(--t) var(--ease),padding var(--t) var(--ease)}
.mnav-list>li>a:hover,.msub-btn:hover{color:var(--yellow);padding-left:8px}
.mnav-list>li>a[aria-current="page"]{color:var(--yellow)}
.msub-btn .chev{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--panel);color:var(--cyan);transition:transform var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease)}
.msub-btn[aria-expanded="true"] .chev{transform:rotate(180deg);background:var(--orange);color:#14102A}
.msub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.msub.open{grid-template-rows:1fr}
.msub>div{overflow:hidden}
.msub ul{list-style:none;margin:0;padding:0 0 14px;display:grid;gap:4px}
.msub a{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:500;font-size:1.05rem;transition:background var(--t) var(--ease)}
.msub a{color:var(--pb,var(--ink));transition:background .5s var(--ease),text-shadow .5s var(--ease),color .5s var(--ease)}
.msub a .drop-ico{color:var(--pb);border-color:color-mix(in srgb,var(--pb,#33295F) 45%,var(--line));box-shadow:0 0 8px -2px var(--pg,transparent);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.msub a.p-on{color:#A08CFF}
.msub a:hover{background:var(--pc,var(--panel));text-shadow:0 0 12px var(--pg)}
.msub a:hover .drop-ico{border-color:var(--pb);box-shadow:0 0 18px var(--pg),inset 0 0 10px var(--pc);transform:rotate(-6deg)}
.msub a .drop-ico{width:40px;height:40px;flex:none}
.msub a .drop-ico svg{width:20px;height:34px}
.mnav-foot{margin-top:auto;padding-top:28px;display:grid;gap:10px}
.mnav-foot small{color:var(--muted);text-align:center}
body.menu-open{overflow:hidden}

/* ---------- Hero: the cabinet marquee ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,80px) clamp(48px,6vw,88px)}
/* the synthwave floor is a fretboard: 6 strings run toward you, frets scroll, note gems fall (Guitar Hero highway) */
.highway{position:absolute;left:50%;bottom:0;width:min(1000px,150%);height:50%;transform:translateX(-50%);perspective:480px;perspective-origin:50% 0;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent 0,#000 55%);mask:linear-gradient(180deg,transparent 0,#000 55%);opacity:.6}
.hw-plane{position:absolute;left:14%;right:14%;top:-60%;bottom:0;transform:rotateX(58deg);transform-origin:50% 100%;background:repeating-linear-gradient(0deg,rgba(201,195,232,.6) 0 3px,transparent 3px 90px),radial-gradient(circle,rgba(255,240,200,.55) 0 11px,transparent 12px),linear-gradient(90deg,transparent,rgba(36,29,71,.85) 3%,rgba(36,29,71,.85) 97%,transparent);background-size:100% 90px,100% 180px,100% 100%;background-position:0 0,50% -45px,0 0;animation:frets 2.2s linear infinite}
@keyframes frets{to{background-position:0 180px,50% 135px,0 0}}
.hw-str{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--c);box-shadow:0 0 10px var(--c);opacity:.75}
.gem{position:absolute;top:-8%;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff 0 12%,var(--c) 30%);box-shadow:0 0 20px var(--c);border:4px solid rgba(14,11,31,.7);animation:gem 3.3s linear infinite;opacity:0}
@keyframes gem{0%{top:-8%;opacity:0}40%{opacity:0}55%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
@media (max-width:900px){.highway{height:42%;opacity:.45}}
.hero::after{content:"";position:absolute;width:700px;height:700px;right:-160px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(255,159,28,.18),transparent 60%);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.hud{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:22px}
.hud span{font-family:var(--pixel);font-size:.6rem;letter-spacing:.06em;color:var(--muted)}
.hud>span{display:inline-flex;align-items:center;gap:10px;line-height:1}
.hud .hstars{display:inline-flex;gap:3px;margin-top:-2px;color:var(--yellow)}
.hud .hstars svg{width:11px;height:11px;filter:drop-shadow(0 0 4px rgba(255,210,63,.6))}
.hud .one{color:var(--red)}
.hud .hi{color:var(--yellow)}
.hero h1{font-size:clamp(2.5rem,6vw,4.6rem);font-weight:800;line-height:1.02}
.hero h1 .neon-o{display:inline-block}
.hero .lede-strong{font-family:var(--gs-display);font-weight:500;font-size:clamp(1.15rem,2vw,1.4rem);margin-top:18px;line-height:1.4}
.hero .lede-strong .nb{display:block}
.hero .lede{margin-top:14px;max-width:56ch;color:var(--muted);font-size:1.05rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.score-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none;padding:0}
.score-row li{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:.9rem;color:var(--muted);transition:border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.score-row li:hover{border-color:var(--yellow);transform:translateY(-2px)}
.score-row strong{color:var(--ink)}
.stars{color:var(--yellow);letter-spacing:1px;text-shadow:0 0 10px rgba(255,210,63,.5)}
.marquee{position:relative;justify-self:center;width:min(100%,520px)}
.marquee .gears{width:100%;height:auto;display:block;overflow:visible}
.marquee .g-big{animation:spin 26s linear infinite}
.marquee .g-small{animation:spin-r 15.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-r{to{transform:rotate(-360deg)}}
.marquee .arc{stroke-dasharray:6 10;animation:dash 6s linear infinite}
.marquee .a2{animation-duration:8s}.marquee .a3{animation-duration:10s}
@keyframes dash{to{stroke-dashoffset:-160}}
.coin-note{position:absolute;display:block;filter:drop-shadow(0 0 8px currentColor);animation:bob 2.6s ease-in-out infinite}
.coin-note svg{display:block;width:100%;height:100%}
.coin-note.n1{left:2%;top:8%;width:34px;height:42px;color:var(--yellow)}
.coin-note.n2{right:0;top:2%;width:46px;height:42px;color:var(--cyan);animation-delay:-.9s}
.coin-note.n3{left:6%;bottom:14%;width:26px;height:32px;color:var(--red);animation-delay:-1.7s}
@keyframes bob{50%{transform:translateY(-12px)}}
.insert{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-family:var(--pixel);font-size:.62rem;letter-spacing:.08em;color:var(--yellow);text-shadow:0 0 10px rgba(255,210,63,.6);white-space:nowrap;animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.marquee{order:-1;width:min(78%,360px)}}

/* ---------- HUD stats strip ---------- */
.stats{border-block:1px solid var(--line);background:#120E27}
.stats dl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
.stats dl>div{padding:22px 18px;border-left:1px solid var(--line);display:grid;gap:8px;transition:background var(--t) var(--ease)}
.stats dl>div:first-child{border-left:0}
.stats dl>div:hover{background:var(--panel)}
.stats dt{font-family:var(--pixel);font-size:.55rem;letter-spacing:.06em;color:var(--cyan)}
.stats dd{margin:0;font-family:var(--gs-display);font-weight:700;font-size:1.25rem;line-height:1.25}
.stats dd a{color:var(--yellow);text-decoration:none;background:linear-gradient(var(--orange),var(--orange)) left bottom/100% 2px no-repeat;padding-bottom:2px;transition:background-size .45s var(--ease)}
.stats dd a:hover{background-size:0 2px}
@media (max-width:980px){.stats dl{grid-template-columns:repeat(2,minmax(0,1fr))}.stats dl>div{border-left:0;border-top:1px solid var(--line)}.stats dl>div:nth-child(-n+2){border-top:0}.stats dl>div:nth-child(even){border-left:1px solid var(--line)}}
@media (max-width:420px){.stats dl{grid-template-columns:1fr}.stats dl>div{border-left:0!important;border-top:1px solid var(--line)!important}.stats dl>div:first-child{border-top:0!important}}

/* ---------- SELECT PLAYER ---------- */
.players{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.player{position:relative;overflow:hidden;display:grid;gap:12px;align-content:start;padding:22px 22px 24px;border-radius:20px;background:var(--panel);border:2px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease),color .55s var(--ease)}
.player::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,var(--pc,rgba(255,159,28,.22)),transparent 60%);opacity:0;transition:opacity .6s var(--ease)}
.player:hover{transform:translateY(-8px);border-color:var(--pb,var(--orange));box-shadow:0 0 0 1px var(--pb,var(--orange)),0 0 28px -4px var(--pb,var(--orange))}
.player:hover::before{opacity:1}
.player .pn{display:flex;justify-content:space-between;align-items:center;position:relative}
.player .pn span{font-family:var(--pixel);font-size:.55rem;color:var(--pb,var(--orange))}
.player .pn i{font-style:normal;font-family:var(--pixel);font-size:.5rem;color:var(--muted);opacity:0;transform:translateX(-6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.player:hover .pn i{opacity:1;transform:none;color:var(--yellow)}
.player .art{position:relative;height:190px;display:grid;place-items:center;color:var(--pb,var(--orange));filter:drop-shadow(0 0 10px var(--pg,rgba(255,159,28,.5)));transition:transform .7s var(--ease)}
.player:hover .art{transform:rotate(-8deg) scale(1.06)}
.player .art svg{height:100%;width:auto}
.player h3{position:relative;font-size:1.35rem}
.player p{position:relative;color:var(--muted);font-size:.93rem}
.player .go{position:relative;line-height:1.8;font-family:var(--pixel);font-size:.55rem;color:var(--cyan);letter-spacing:.06em;margin-top:4px}
.p-ac{--pb:#FF9F1C;--pc:rgba(255,159,28,.22);--pg:rgba(255,159,28,.55)}
.p-el{--pb:#2EC4F1;--pc:rgba(46,196,241,.22);--pg:rgba(46,196,241,.55)}
.p-uk{--pb:#FFD23F;--pc:rgba(255,210,63,.2);--pg:rgba(255,210,63,.55)}
.p-on{--pb:#7B5CFF;--pc:rgba(123,92,255,.25);--pg:rgba(123,92,255,.6)}
@media (max-width:1020px){.players{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.players{grid-template-columns:1fr}.player{grid-template-columns:96px 1fr;align-items:center;column-gap:16px}.player .pn{grid-column:1 / -1}.player .art{height:120px;grid-row:span 3}.player .go{font-size:.5rem}}

/* ---------- Game modes ---------- */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mode{position:relative;padding:28px 26px;border-radius:20px;background:var(--panel);border:1px solid var(--line);display:grid;gap:10px;align-content:start;transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease),color .55s var(--ease)}
.mode:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:0 0 26px -6px rgba(46,196,241,.6)}
.mode .ico{width:56px;height:56px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);color:var(--cyan);display:grid;place-items:center;transition:background .55s var(--ease),color .55s var(--ease),transform .6s var(--ease)}
.mode .ico svg{width:30px;height:30px}
.mode:hover .ico{background:var(--cyan);color:#0E0B1F;transform:rotate(-6deg)}
.mode .tag{font-family:var(--pixel);font-size:.55rem;color:var(--orange);letter-spacing:.06em}
.mode h3{font-size:1.3rem}
.mode p{color:var(--muted)}
@media (max-width:820px){.modes{grid-template-columns:1fr}}


/* ---------- Scale strip: A minor pentatonic on a neon fretboard, roots in orange ---------- */
.tab-strip{padding-block:clamp(52px,7vw,84px);border-block:1px solid var(--line);background:#0A0817}
.tab-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-bottom:30px}
.tab-head>div{display:grid;gap:12px;max-width:68ch}
.tab-head .px{color:var(--yellow)}
.tab-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.tab-head p{color:var(--muted)}
.board{padding:clamp(16px,3vw,30px);border-radius:22px;background:var(--panel);border:2px solid var(--line);transition:border-color .5s var(--ease)}
.board:hover{border-color:var(--cyan)}
.fb{display:block;width:100%;height:auto;overflow:visible}
.fb-v{display:none}
.fb-v .n text{font-size:11px}.fb-v .lbl{font-size:12px}
.fb .wood{fill:#120E27;stroke:#2F2858;stroke-width:2}
.fb .inlay{fill:#3A3266}
.fb .wire{stroke:#8E87B3;stroke-width:3;opacity:.75}
.fb .str{stroke:#C9C3E8;opacity:.7}
.fb .lbl{font:600 13px var(--body);fill:var(--orange)}
.fb .fno{font:600 13px var(--body);fill:var(--muted)}
.fb .n circle{fill:var(--cyan);stroke:#0A0817;stroke-width:3;filter:drop-shadow(0 0 6px rgba(46,196,241,.7));transition:fill .25s var(--ease),transform .25s var(--ease)}
.fb .n text{font:700 11.5px var(--body);fill:#0A0817;pointer-events:none}
.fb .n.root circle{fill:var(--orange);filter:drop-shadow(0 0 8px rgba(255,159,28,.85))}
.fb .n{transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease)}
.fb .n:hover,.fb .n.on{transform:scale(1.22)}
.fb .n.on circle{fill:var(--red);filter:drop-shadow(0 0 12px rgba(255,59,59,.9))}
.fb .n.on text{fill:#fff}
.legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:18px;list-style:none;padding:0;font-size:.92rem;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:10px}
.legend i{width:18px;height:18px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(46,196,241,.7)}
.legend .r i{background:var(--orange);box-shadow:0 0 8px rgba(255,159,28,.85)}
.legend strong{color:var(--ink)}
@media (max-width:620px){.fb-h{display:none}.fb-v{display:block}}

/* ---------- Bonus stage: method + chord ---------- */
.method{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,64px);align-items:start}
.m-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.m-list li{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:18px;border-radius:16px;border:1px solid transparent;transition:background .5s var(--ease),border-color .5s var(--ease)}
.m-list li:hover{background:var(--panel);border-color:var(--line)}
.m-list .sym svg{width:24px;height:24px}
.m-list .sym{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);font-family:var(--music);font-size:26px;color:var(--yellow);transition:background .5s var(--ease),color .5s var(--ease),transform .55s var(--ease),box-shadow .5s var(--ease)}
.m-list li:hover .sym{background:var(--red);color:#fff;transform:rotate(-6deg) scale(1.06);box-shadow:0 0 18px rgba(255,59,59,.6)}
.m-list h3{font-size:1.15rem;margin-bottom:4px}
.m-list p{color:var(--muted)}
.chord-card{position:sticky;top:110px;padding:26px;border-radius:22px;background:var(--panel);border:2px solid var(--line);display:grid;gap:14px;box-shadow:0 0 0 1px rgba(123,92,255,.12),0 30px 60px -30px rgba(0,0,0,.8);transition:border-color .55s var(--ease)}
.chord-card:hover{border-color:var(--yellow)}
.chord-card .px{color:var(--yellow)}
.chord-card h3{font-size:1.4rem}
.chord-card p{color:var(--muted);font-size:.95rem}
.chord-svg{width:100%;max-width:240px;justify-self:center;color:var(--ink)}
.chord-svg .dot{fill:var(--orange);transition:fill .4s var(--ease)}
.chord-card:hover .chord-svg .dot{fill:var(--red)}
@media (max-width:900px){.method{grid-template-columns:1fr}.chord-card{position:static}}

/* ---------- Player profile ---------- */
.profile{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.profile .txt{display:grid;gap:16px;min-width:0}
.profile h2{font-size:clamp(2.1rem,4.6vw,3.3rem)}
.profile p{color:var(--muted)}
.profile p.big{color:var(--ink);font-family:var(--gs-display);font-weight:500;font-size:1.2rem;line-height:1.5}
.collab{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.collab li{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-weight:500;font-size:.92rem;transition:border-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
.collab li:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.card-stats{padding:28px;border-radius:22px;background:#0A0817;border:2px solid var(--violet);box-shadow:0 0 0 1px rgba(123,92,255,.3),0 0 40px -10px rgba(123,92,255,.6);display:grid;gap:4px;font-family:var(--pixel);font-size:.62rem;letter-spacing:.05em}
.card-stats .ttl{color:var(--violet);margin-bottom:12px}
.card-stats .row{display:flex;justify-content:space-between;gap:12px;padding:14px 4px;border-bottom:1px dashed var(--line);transition:background .4s var(--ease),padding .4s var(--ease)}
.card-stats .row:hover{background:rgba(123,92,255,.1);padding-left:10px}
.card-stats .row:last-child{border-bottom:0}
.card-stats .k{color:var(--muted)}
.card-stats .v{color:var(--yellow);text-align:right}
.card-stats .gstar{display:inline-flex;align-items:center;gap:8px;line-height:1}
.card-stats .gstar svg{width:15px;height:15px;margin-top:-2px;filter:drop-shadow(0 0 6px rgba(255,210,63,.7))}
.card-stats .v.c{color:var(--cyan)}.card-stats .v.r{color:var(--red)}.card-stats .v.o{color:var(--orange)}
@media (max-width:900px){.profile{grid-template-columns:1fr}}
/* Player 1 CRT portrait */
.p1card{grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.p1card .p1-stats{display:grid;gap:4px;min-width:0}
.p1-crt{position:relative;width:186px;padding:12px 12px 34px;border-radius:18px;background:linear-gradient(180deg,#2A2350,#15112B);border:2px solid #3A3266;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 30px -18px #000}
.p1-glass{position:relative;aspect-ratio:3/4;border-radius:16px/20px;overflow:hidden;background:#05040C;box-shadow:0 0 0 3px #05040C,0 0 22px -4px rgba(123,92,255,.55)}
.p1-img{position:absolute;inset:0}
.p1-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;image-rendering:crisp-edges}
.p1-img .hd{opacity:0;transition:opacity .45s var(--ease)}
.p1card:hover .p1-img .hd{opacity:1}
.p1card:hover .p1-img{animation:p1glitch .4s steps(2) 1}
@keyframes p1glitch{0%{transform:translateX(0);filter:none}25%{transform:translateX(-3px);filter:hue-rotate(40deg) saturate(1.6)}50%{transform:translateX(2px);filter:none}75%{transform:translateX(-1px);filter:hue-rotate(-30deg)}100%{transform:none;filter:none}}
.p1-glass::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.p1-glass::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.65) 100%),linear-gradient(160deg,rgba(255,255,255,.14),transparent 32%)}
.p1-lbl{position:absolute;left:14px;right:14px;bottom:10px;display:flex;align-items:center;justify-content:space-between;font-family:var(--pixel);font-size:.45rem;letter-spacing:.06em;color:var(--muted)}
.p1-lbl b{font-weight:400;color:var(--yellow)}
.p1-lbl i{width:7px;height:7px;border-radius:50%;background:#7CFFB0;box-shadow:0 0 8px #7CFFB0}
.p1-crt.pre .p1-img{transform:scale(.6,.008);filter:brightness(4)}
.p1-crt.on .p1-img{animation:p1on .9s var(--ease) both}
@keyframes p1on{0%{transform:scale(.6,.008);filter:brightness(4)}35%{transform:scale(1,.008);filter:brightness(3)}70%{transform:scale(1,1);filter:brightness(1.6)}100%{transform:none;filter:none}}
@media (max-width:560px){.p1card{grid-template-columns:1fr;justify-items:center}.p1card .p1-stats{width:100%}}
@media (prefers-reduced-motion:reduce){.p1-crt.pre .p1-img{transform:none;filter:none}.p1-crt.on .p1-img,.p1card:hover .p1-img{animation:none}}

/* ---------- LEVELS (RGT) ---------- */
.levels{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.levels .txt{display:grid;gap:16px}
.levels .txt p{color:var(--muted)}
.lv{position:relative;padding:26px 24px 18px;border-radius:22px;background:var(--panel);border:2px solid var(--line);transition:border-color .55s var(--ease)}
.lv:hover{border-color:var(--orange)}
.lv-bars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr)) minmax(0,1.5fr);gap:8px;align-items:end;height:220px;list-style:none;margin:0;padding:0}
.lv-bars li{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.lv-bars .b{width:100%;border-radius:6px 6px 2px 2px;background:repeating-linear-gradient(0deg,var(--cyan) 0 10px,rgba(46,196,241,.55) 10px 12px);box-shadow:0 0 14px rgba(46,196,241,.35);display:grid;place-items:start center;padding-top:6px;font-family:var(--pixel);font-size:.55rem;color:#0E0B1F;transition:transform .5s var(--ease),filter .5s var(--ease);transform-origin:bottom}
.lv-bars li:hover .b{transform:scaleY(1.05);filter:hue-rotate(160deg) saturate(1.4)}
.lv-bars li.dip .b{background:repeating-linear-gradient(0deg,var(--orange) 0 10px,rgba(255,159,28,.6) 10px 12px);box-shadow:0 0 16px rgba(255,159,28,.5);color:#0E0B1F;font-size:.5rem;text-align:center;line-height:1.5;white-space:nowrap}
.lv-bars .l{font-family:var(--pixel);font-size:.45rem;color:var(--muted)}
@media (max-width:900px){.levels{grid-template-columns:1fr}}
@media (max-width:520px){.lv-bars{height:170px;gap:5px;grid-template-columns:repeat(8,minmax(0,1fr)) minmax(0,2.6fr)}.lv-bars li.dip .b{font-size:.42rem}.lv-bars .l{display:none}}

/* ---------- HIGH SCORES ---------- */
.hs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.hs-score{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:16px;background:#0A0817;border:2px solid var(--yellow);box-shadow:0 0 24px -6px rgba(255,210,63,.6)}
.hs-score .big{font-family:var(--pixel);font-size:1.6rem;color:var(--yellow);text-shadow:0 0 12px rgba(255,210,63,.6)}
.hs-score small{display:block;color:var(--muted);font-size:.8rem}
.board{border-radius:22px;background:#0A0817;border:2px solid var(--line);overflow:hidden}
.board .bh{display:grid;grid-template-columns:70px 1fr 120px;gap:14px;padding:14px 22px;font-family:var(--pixel);font-size:.55rem;color:var(--cyan);border-bottom:1px solid var(--line)}
.entry{display:grid;grid-template-columns:70px 1fr 120px;gap:14px;align-items:start;padding:22px;border-bottom:1px dashed var(--line);transition:background .45s var(--ease)}
.entry:last-child{border-bottom:0}
.entry:hover{background:rgba(255,210,63,.06)}
.entry .rank{font-family:var(--pixel);font-size:.8rem;color:var(--yellow)}
.entry:nth-child(3) .rank{color:var(--cyan)}.entry:nth-child(4) .rank{color:var(--orange)}
.entry blockquote{margin:0;font-size:1.02rem;line-height:1.6}
.entry .who{display:block;margin-top:8px;font-family:var(--pixel);font-size:.55rem;color:var(--muted);letter-spacing:.04em}
.entry .pts{text-align:right}
@media (max-width:640px){.board .bh{display:none}.entry{grid-template-columns:44px 1fr}.entry .pts{grid-column:2;text-align:left}}
.hs-cta{display:flex;justify-content:center;margin-top:26px}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px)}
.faq{display:grid;gap:10px;align-content:start}
.qa{border-radius:16px;background:var(--panel);border:1px solid var(--line);transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.qa:hover{border-color:color-mix(in srgb,var(--cyan) 50%,var(--line))}
.qa.open{border-color:var(--cyan);box-shadow:0 0 22px -6px rgba(46,196,241,.5)}
.qa h3{margin:0;font-size:1rem}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;background:none;border:0;cursor:pointer;text-align:left;font:700 1.08rem/1.35 var(--gs-display);color:var(--ink);transition:color var(--t) var(--ease)}
.qa button:hover,.qa.open button{color:var(--cyan)}
.qa .pm{flex:none;position:relative;width:34px;height:34px;border-radius:10px;background:var(--panel-2);transition:background .4s var(--ease),transform .45s var(--ease)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--cyan);transform:translate(-50%,-50%);transition:transform .45s var(--ease),background .4s var(--ease)}
.qa .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.open .pm{background:var(--cyan);transform:rotate(180deg)}
.qa.open .pm::before,.qa.open .pm::after{background:#0E0B1F}
.qa.open .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{padding:0 22px 22px;color:var(--muted);max-width:62ch}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}

/* ---------- Areas + map ---------- */
.areas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,56px);align-items:stretch}
.areas-body{display:grid;gap:18px;align-content:start}
.areas-body h2{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.areas-body>p{color:var(--muted)}
.area-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.area-list li{font-size:.88rem;padding:7px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);cursor:default;transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.area-list li:hover{background:var(--cyan);border-color:var(--cyan);color:#0E0B1F;transform:translateY(-2px)}
.area-list li.hq{background:var(--orange);border-color:var(--orange);color:#14102A;font-weight:700}
.map-box{position:relative;border-radius:22px;overflow:hidden;border:2px solid var(--line);min-height:420px;background:var(--panel)}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(185deg) saturate(.8) contrast(.95)}
.map-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);font-size:.9rem}
.map-link{position:absolute;left:14px;bottom:14px;z-index:2;min-height:46px;padding:0 18px;font-size:.92rem}
@media (max-width:900px){.areas{grid-template-columns:1fr}.map-box{min-height:340px}}

/* ---------- CTA: insert coin ---------- */
.cta{position:relative;overflow:hidden;background:radial-gradient(ellipse at 15% 10%,rgba(255,59,59,.2),transparent 50%),radial-gradient(ellipse at 90% 90%,rgba(46,196,241,.16),transparent 50%),#0E0B1F;border-block:1px solid var(--line);padding-block:clamp(80px,9vw,124px) clamp(60px,8vw,100px)}
.cta .px{color:var(--yellow);animation:blink 1.6s steps(1) infinite}
.cta h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-top:12px}
.cta p{color:var(--muted);margin-top:14px;max-width:50ch}
.contact-lines{display:grid;gap:12px}
.cline{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:16px;background:var(--panel);border:2px solid var(--line);text-decoration:none;color:var(--ink);min-width:0;transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.cline:hover{border-color:var(--orange);transform:translateX(6px);box-shadow:0 0 24px -6px rgba(255,159,28,.6)}
.cline .ci{width:46px;height:46px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 4px 0 #9E1B1F;transition:background .45s var(--ease)}
.cline:hover .ci{background:var(--orange)}
.cline .ci svg{width:22px;height:22px}
.cline small{display:block;font-family:var(--pixel);font-size:.5rem;letter-spacing:.06em;color:var(--cyan);margin-bottom:6px}
.cline .v{display:block;font-family:var(--gs-display);font-weight:700;font-size:clamp(1.05rem,2.6vw,1.35rem);overflow-wrap:anywhere}


/* the CTA is a combo guitar amp: handle, metal corners, control panel with a plugged-in cable, grille with two speakers */
.amp{position:relative;border-radius:30px;background:#0B0918;padding:16px;box-shadow:0 0 0 2px #2F2858,0 0 60px -12px rgba(123,92,255,.6),0 40px 80px -30px #000}
.amp::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-radial-gradient(circle at 30% 30%,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none}
.amp-handle{position:absolute;left:50%;top:-34px;width:190px;height:34px;margin-left:-95px;border:11px solid #0B0918;border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -2px 0 #2F2858,-2px 0 0 #2F2858,2px 0 0 #2F2858}
.amp-corner{position:absolute;width:48px;height:48px;background:radial-gradient(circle at 14px 14px,#fff 0 2px,#8E87B3 3px 4px,transparent 5px),linear-gradient(135deg,#E6E1FA,#8E87B3 45%,#3B3560);clip-path:polygon(0 0,100% 0,100% 26%,26% 100%,0 100%);border-radius:30px 0 0 0;z-index:3}
.amp-corner.tl{left:-3px;top:-3px}.amp-corner.tr{right:-3px;top:-3px;transform:scaleX(-1)}.amp-corner.bl{left:-3px;bottom:-3px;transform:scaleY(-1)}.amp-corner.br{right:-3px;bottom:-3px;transform:scale(-1)}
.amp-panel{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding:18px clamp(18px,3vw,30px);border-radius:16px 16px 6px 6px;background:linear-gradient(180deg,#2E2658,#1C1640);border:2px solid #3F3575;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.35)}
.amp-panel small{font-family:var(--pixel);font-size:.42rem;letter-spacing:.06em;color:#C9C3E8}
.jacks{display:flex;gap:16px}
.jack{position:relative;display:grid;justify-items:center;gap:8px}
.jack i{display:block;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#000 0 5px,#C9C3E8 6px 10px,#5A5385 11px 13px,#2A2350 14px)}
.cable{max-width:none;position:absolute;right:50%;top:15px;width:640px;height:200px;margin-top:-14px;overflow:visible;pointer-events:none}
.knobs{display:flex;gap:clamp(10px,2vw,22px);margin-inline:auto}
.knob{display:grid;justify-items:center;gap:6px}
.dial{position:relative;width:58px;height:58px;display:grid;place-items:center}
.dial::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 135deg,#221B48 0 90deg,transparent 0),repeating-conic-gradient(from -136deg,#C9C3E8 0 2deg,transparent 2deg 27deg);-webkit-mask:radial-gradient(circle,transparent 0 23px,#000 24px 29px,transparent 29.5px);mask:radial-gradient(circle,transparent 0 23px,#000 24px 29px,transparent 29.5px)}
.knob .k{position:relative;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#57507E,#14102A 72%);border:2px solid #0A0817;box-shadow:0 0 0 2px #4A4270,0 6px 10px -4px #000;transform:rotate(var(--r));transition:transform 1.4s var(--ease)}
.knob .k::after{content:"";position:absolute;left:50%;top:3px;width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.amp:hover .knob .k{transform:rotate(135deg)}
.knob:nth-child(2) .k{transition-delay:.08s}.knob:nth-child(3) .k{transition-delay:.16s}.knob:nth-child(4) .k{transition-delay:.24s}.knob:nth-child(5) .k{transition-delay:.32s}
.power{display:flex;align-items:center;gap:18px}
.toggle{display:grid;justify-items:center;gap:8px}
.toggle i{position:relative;display:block;width:22px;height:34px;border-radius:6px;background:#0A0817;box-shadow:0 0 0 2px #4A4270}
.toggle i::after{content:"";position:absolute;left:50%;top:4px;width:8px;height:16px;margin-left:-4px;border-radius:4px;background:linear-gradient(#E6E1FA,#8E87B3);transition:top .4s var(--ease)}
.amp:hover .toggle.sb i::after{top:14px}
.jewel{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFB3B3,var(--red) 55%,#7A1013);box-shadow:0 0 16px var(--red),0 0 0 4px #2F2858;animation:pilot 2.4s ease-in-out infinite}
@keyframes pilot{50%{box-shadow:0 0 28px var(--red),0 0 0 4px #2F2858}}
.amp-grille{position:relative;margin-top:14px;padding:96px clamp(22px,4vw,56px) clamp(36px,5vw,60px);border-radius:6px 6px 18px 18px;overflow:hidden;background:#17122F;border:3px solid var(--yellow);box-shadow:0 0 18px -4px rgba(255,210,63,.55),inset 0 0 40px rgba(0,0,0,.6)}
.spk{position:absolute;top:56%;width:min(34vw,360px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,0,0,.55) 0 17%,rgba(201,195,232,.09) 17.5% 19.5%,rgba(0,0,0,.35) 20% 58%,rgba(201,195,232,.07) 58.5% 61%,rgba(0,0,0,.2) 61.5% 69%,transparent 70%)}
.spk.s1{left:27%}.spk.s2{left:73%}
.cloth{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 6px),repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 6px)}
.badge{position:absolute;z-index:2;top:22px;left:50%;transform:translateX(-50%);padding:6px 18px 8px;border-radius:10px;background:linear-gradient(180deg,#E6E1FA,#8E87B3);box-shadow:0 4px 10px -4px #000;font-family:var(--gs-display);font-weight:800;font-style:italic;font-size:1.25rem;color:#14102A;white-space:nowrap}
.badge b{color:#B5431A}
.amp-content{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center}
@media (max-width:900px){.amp-content{grid-template-columns:1fr}.spk{width:min(80vw,420px)}.spk.s1{left:50%;top:32%}.spk.s2{left:50%;top:78%}}
@media (max-width:760px){.knob:nth-child(n+4){display:none}.toggle.sb{display:none}.jacks .jack:nth-child(2){display:none}}
@media (max-width:480px){.amp{padding:10px;border-radius:24px}.amp-panel{padding:14px 12px;gap:10px}.dial{width:46px;height:46px}.dial::before{-webkit-mask:radial-gradient(circle,transparent 0 18px,#000 19px 23px,transparent 23.5px);mask:radial-gradient(circle,transparent 0 18px,#000 19px 23px,transparent 23.5px)}.knob .k{width:32px;height:32px}.knob .k::after{height:9px}.knob:nth-child(3){display:none}.amp-grille{padding:84px 18px 26px}.badge{font-size:1.05rem}.amp-handle{width:150px;margin-left:-75px}.power{gap:12px}}

/* ================= CTA skin (home): 80s boombox =================
   handle, two speakers, cassette deck with the logo on the tape label, graphic EQ and piano keys;
   on hover PLAY goes down, the reels turn, the EQ dances and the speakers thump (all stop when the pointer leaves) */
.bbox{position:relative;margin-top:30px;border-radius:34px;background:#0B0918;padding:16px;box-shadow:0 0 0 2px #2F2858,0 0 70px -14px rgba(123,92,255,.6),0 0 40px -18px rgba(255,159,28,.6),0 40px 80px -30px #000}
.bb-handle{position:absolute;left:22%;right:22%;top:-40px;height:42px;border:12px solid #0B0918;border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 -2px 0 #2F2858,-2px 0 0 #2F2858,2px 0 0 #2F2858}
.bb-handle::before,.bb-handle::after{content:"";position:absolute;bottom:-6px;width:26px;height:14px;border-radius:4px;background:linear-gradient(#C9C3E8,#6E6799)}
.bb-handle::before{left:-19px}.bb-handle::after{right:-19px}
.bb-top{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,36px);padding:20px clamp(16px,3vw,30px);border-radius:20px 20px 6px 6px;background:linear-gradient(180deg,#2E2658,#1C1640);border:2px solid #3F3575;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -4px 10px rgba(0,0,0,.35)}
.spkr{--c:var(--orange);--g:rgba(255,159,28,.55);position:relative;width:clamp(120px,15vw,170px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#3A3266 0 9%,#0A0817 9.5% 13%,#1C1640 13.5% 52%,#0A0817 53% 60%,#241D47 61% 72%,#0A0817 73%);box-shadow:0 0 0 4px #0A0817,0 0 0 7px var(--c),0 0 22px 4px var(--g)}
.spkr::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14) 0 1.4px,transparent 1.6px) 0 0/9px 9px;-webkit-mask:radial-gradient(circle,transparent 0 12%,#000 13% 72%,transparent 73%);mask:radial-gradient(circle,transparent 0 12%,#000 13% 72%,transparent 73%)}
.spkr.r{--c:var(--cyan);--g:rgba(46,196,241,.55)}
.bbox:hover .spkr{animation:thump .42s var(--ease) 6}
@keyframes thump{40%{transform:scale(1.04)}}
.bb-mid{display:grid;gap:12px;justify-items:center;min-width:0}
.eq{display:flex;align-items:flex-end;gap:5px;height:44px}
.eq i{display:block;width:10px;height:var(--h);border-radius:2px;background:linear-gradient(0deg,var(--cyan) 0 45%,var(--yellow) 45% 75%,var(--red) 75%);box-shadow:0 0 6px rgba(46,196,241,.4);transform-origin:bottom;transition:height .4s var(--ease)}
.bbox:hover .eq i{animation:eq .5s ease-in-out infinite alternate;animation-delay:var(--d)}
@keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.deck{position:relative;width:min(100%,300px);padding:10px;border-radius:12px;background:#0A0817;border:2px solid #3F3575;box-shadow:inset 0 0 16px rgba(0,0,0,.8)}
.tape{position:relative;height:104px;border-radius:8px;background:linear-gradient(180deg,#E6E1FA,#B9B3D8);padding:8px 10px;display:grid;grid-template-rows:auto 1fr;gap:6px}
.tape-lbl{display:flex;justify-content:space-between;align-items:center;padding:3px 8px;border-radius:4px;background:linear-gradient(90deg,var(--orange),var(--red) 50%,var(--violet));font-family:var(--gs-display);font-weight:800;font-style:italic;font-size:.82rem;color:#fff}
.tape-lbl small{font-family:var(--pixel);font-style:normal;font-weight:400;font-size:.4rem}
.tape-win{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 14%;border-radius:20px;background:#120E27;box-shadow:inset 0 0 0 2px #2F2858}
.tape-win::before{content:"";position:absolute;left:30%;right:30%;top:30%;bottom:30%;border-radius:4px;background:#3A2C1E;opacity:.9}
.reel{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#120E27 0 22%,transparent 23%),repeating-conic-gradient(#F3EFFF 0 20deg,#B9B3D8 20deg 60deg);box-shadow:0 0 0 3px #0A0817;animation:spin 2.2s linear infinite;animation-play-state:paused}
.bbox:hover .reel{animation-play-state:running}
.keys{display:flex;gap:6px}
.keys i{font-style:normal;display:grid;place-items:center;min-width:46px;height:30px;padding:0 6px;border-radius:5px 5px 8px 8px;background:linear-gradient(180deg,#F3EFFF,#B9B3D8);color:#14102A;font-family:var(--pixel);font-size:.4rem;box-shadow:0 5px 0 #6E6799;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .4s var(--ease)}
.keys i.rec{color:var(--red);gap:5px;grid-auto-flow:column}
.keys i.rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 6px var(--red)}
.bbox:hover .keys i.play{transform:translateY(4px);box-shadow:0 1px 0 #9E7A06,0 0 14px rgba(255,210,63,.6);background:linear-gradient(180deg,#FFE08A,var(--yellow))}
.bb-face{position:relative;margin-top:12px;padding:84px clamp(22px,4vw,56px) clamp(36px,5vw,60px);border-radius:6px 6px 22px 22px;overflow:hidden;background:radial-gradient(circle,rgba(255,255,255,.035) 0 1.2px,transparent 1.4px) 0 0/10px 10px,radial-gradient(ellipse at 50% 0%,rgba(123,92,255,.18),transparent 60%),#17122F;border:3px solid var(--violet);box-shadow:0 0 18px -4px rgba(123,92,255,.7),inset 0 0 40px rgba(0,0,0,.55)}
.bb-face .badge{top:20px}
@media (max-width:760px){.spkr{width:96px}.eq i{width:7px}.keys i{min-width:38px}}
@media (max-width:600px){.bb-top{grid-template-columns:1fr}.spkr{display:none}.bb-handle{left:18%;right:18%}}
@media (max-width:420px){.bbox{padding:10px;border-radius:26px}.bb-face{padding:78px 18px 26px}.keys i:nth-child(n+5){display:none}}

/* ---------- Footer ---------- */
.site-footer{background:#08061A;color:#B9B3D8;font-size:.94rem}
.site-footer .wrap{padding-block:60px 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr .9fr 1.1fr 1.2fr;gap:40px}
.site-footer h3{font-family:var(--pixel);font-size:.55rem;letter-spacing:.06em;color:var(--orange);margin-bottom:18px;font-weight:400}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer ul a{display:inline-block;color:var(--ink);text-decoration:none;transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.site-footer ul a:hover{color:var(--yellow);transform:translateX(4px)}
.foot-brand{display:grid;gap:24px;align-content:start}
.foot-brand p{line-height:1.7}
.foot-contact a{color:var(--ink);text-decoration:none;transition:color var(--t) var(--ease)}
.foot-contact a:hover{color:var(--orange)}
.rgt{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:#B9B3D8;transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.rgt:hover{border-color:var(--cyan);background:rgba(46,196,241,.08);transform:translateY(-3px)}
.rgt b{font-family:var(--gs-display);font-size:1.15rem;color:#fff;letter-spacing:.04em;padding:8px 10px;border-radius:10px;background:var(--red)}
.rgt span{font-size:.84rem;line-height:1.45}
.ext::after{content:" ↗";font-size:.8em;color:var(--orange)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.84rem;color:#8E87B3}
.foot-bottom .px{color:var(--yellow)}
.foot-bottom{display:grid;grid-template-columns:1fr auto 1fr}
.foot-bottom .thanks{justify-self:center}
.fb-by{justify-self:end;text-align:right}
.fb-by a{color:var(--cyan);font-weight:600;text-decoration:none;background:linear-gradient(var(--cyan),var(--cyan)) left bottom/0 1px no-repeat;transition:color .45s var(--ease),background-size .45s var(--ease),text-shadow .45s var(--ease)}
.fb-by a:hover{color:#fff;background-size:100% 1px;text-shadow:0 0 12px rgba(46,196,241,.7)}
@media (max-width:820px){.foot-bottom{grid-template-columns:1fr;justify-items:start;text-align:left;gap:12px;padding-right:76px}.foot-bottom .thanks{order:-1;justify-self:start}.fb-by{justify-self:start;text-align:left}}
.thanks{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}.thanks svg{width:14px;height:18px}
@media (max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* back to top: coin */
.to-top{overflow:hidden;position:fixed;right:calc(max(18px, env(safe-area-inset-right, 0px)) + 4px);bottom:calc(env(safe-area-inset-bottom,0px) + 64px);z-index:70;width:58px;height:58px;border-radius:50%;border:3px solid #B38F12;padding:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#FFF08A,#FFD23F 55%,#E0A800);color:#5A4300;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(255,210,63,.6);opacity:0;visibility:hidden;transform:translateY(24px) scale(.85);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .5s,box-shadow .55s var(--ease),border-color .55s var(--ease),color .55s var(--ease)}
.to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease),color .55s var(--ease)}
.to-top::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FF8A80,#FF3B3B 55%,#C21F24);opacity:0;transition:opacity .55s var(--ease)}
.to-top .arrow{position:relative;z-index:1;transition:color .55s var(--ease)}
.to-top:hover{border-color:#9E1B1F;color:#fff;box-shadow:0 0 28px rgba(255,59,59,.65)}
.to-top:hover::before{opacity:1}
.to-top .arrow{width:22px;height:22px}

@media (max-width:560px){.to-top{width:52px;height:52px}}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translate(-50%,20px);background:var(--panel-2);border:1px solid var(--yellow);color:var(--ink);padding:12px 18px;border-radius:12px;font-size:.92rem;opacity:0;pointer-events:none;transition:.35s var(--ease);z-index:90;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}