/*
 * Temi grafici. Il tema "classico" e' quello definito in index.html; gli
 * altri ridefiniscono le stesse variabili e aggiungono qualche decorazione.
 * Si sceglie con <html data-tema="...">, salvato nel browser di chi guarda.
 *
 * Specificita' (0,2,0): uguale alle regole per il tema scuro di sistema in
 * index.html, e questo file viene dopo, quindi vince sempre.
 */

/* ======================================================== NEON (synthwave) */
:root[data-tema="neon"]{
  --bg:#0A0614; --card:#130C22; --soft:#1E1433; --line:#2D2150;
  --ink:#F1ECFF; --mut:#9C90C4; --acc:#FF3EA5; --cool:#2EE6F5;
  --lt:#43367A; --dk:#251B4D; --co-lt:#9C8EDB; --co-dk:#7A6BC0;
  --ko-bg:#2A0E22; --ko-bd:#6B1E50; --ko-tx:#FF8FC8;
  --ok-bg:#08222A; --ok-bd:#145A66; --ok-tx:#7DEFFA;
  --wa-bg:#1F1606; --wa-bd:#5E4614; --wa-tx:#FFD27A;
  --tag-bg:#2A1E45; --tag-tx:#D9B8FF; --mat-bg:#3A0F2A; --div-bd:#5A3A92;
  --c1:#2EE6F5; --c2:#8C7CFF; --c3:#FF3EA5; --c4:#FFC94D;
  --fr-ok:#39FF9C; --fr-ko:#FF4D6D; --fr-mv:#C9BCFF; --bollo:#0A0614;
  --p1:#FF3EA5; --p2:#B04DFF; --p3:#5B4DB8;
  --trg:rgba(46,230,245,.5); --velo:rgba(5,2,12,.72);
  --f-tit:"Space Grotesk",system-ui,sans-serif; --f-txt:"Space Grotesk",system-ui,sans-serif;
  --f-num:"JetBrains Mono",ui-monospace,monospace; --r:14px; --r-s:12px;
  color-scheme:dark;
}
[data-tema="neon"] body{
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(255,62,165,.16), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(46,230,245,.12), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
[data-tema="neon"] h1{
  font-weight:700; letter-spacing:-.5px;
  background:linear-gradient(90deg,#FF3EA5,#B04DFF 50%,#2EE6F5); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
[data-tema="neon"] #board{
  box-shadow:0 0 0 1px rgba(255,62,165,.55),0 0 28px rgba(255,62,165,.28),0 0 60px rgba(46,230,245,.12);
}
[data-tema="neon"] .sel{outline:2px solid var(--cool);box-shadow:inset 0 0 18px rgba(46,230,245,.55)}
/* un contorno chiaro: senza, i pezzi neri spariscono sulle case scure */
[data-tema="neon"] .pz{filter:drop-shadow(0 0 .8px rgba(240,232,255,.95)) drop-shadow(0 0 4px rgba(190,170,255,.45))}
[data-tema="neon"] #frecce{filter:drop-shadow(0 0 4px rgba(255,255,255,.35))}
[data-tema="neon"] .card,[data-tema="neon"] .box,[data-tema="neon"] .legend,[data-tema="neon"] .strut{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-tema="neon"] .card:hover{box-shadow:0 0 0 1px rgba(255,62,165,.35),0 0 24px rgba(255,62,165,.12)}
[data-tema="neon"] button{background:transparent}
[data-tema="neon"] button:hover{border-color:var(--acc);box-shadow:0 0 14px rgba(255,62,165,.3)}
[data-tema="neon"] .ev{text-shadow:0 0 12px currentColor}
[data-tema="neon"] .avviso{box-shadow:0 0 0 1px rgba(255,210,122,.08)}

/* ======================================================== HUD (tattico) */
:root[data-tema="hud"]{
  --bg:#04101A; --card:rgba(8,30,44,.78); --soft:#0B2536; --line:#16445C;
  --ink:#D8F6FF; --mut:#6E9AB0; --acc:#00E1FF; --cool:#FFB020;
  --lt:#143850; --dk:#0A2131; --co-lt:#5A93B0; --co-dk:#3F7591;
  --ko-bg:rgba(255,77,77,.08); --ko-bd:#6E2A2A; --ko-tx:#FF8A80;
  --ok-bg:rgba(0,225,255,.07); --ok-bd:#145569; --ok-tx:#7FEFFF;
  --wa-bg:rgba(255,176,32,.07); --wa-bd:#6B5216; --wa-tx:#FFC860;
  --tag-bg:rgba(255,176,32,.12); --tag-tx:#FFC860; --mat-bg:rgba(255,77,77,.14); --div-bd:#2B6B8A;
  --c1:#00E1FF; --c2:#FFB020; --c3:#FF5C8A; --c4:#9DFF6A;
  --fr-ok:#6BFFB0; --fr-ko:#FF4D4D; --fr-mv:#8FB9CC; --bollo:#04101A;
  --p1:#00E1FF; --p2:#0090B0; --p3:#0B5C73;
  --trg:rgba(0,225,255,.45); --velo:rgba(2,8,14,.8);
  --f-tit:"Chakra Petch",system-ui,sans-serif; --f-txt:"Space Grotesk",system-ui,sans-serif;
  --f-num:"JetBrains Mono",ui-monospace,monospace; --r:3px; --r-s:2px;
  color-scheme:dark;
}
[data-tema="hud"] body{
  background:
    linear-gradient(rgba(0,225,255,.045) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(0,225,255,.045) 1px, transparent 1px) 0 0/24px 24px,
    radial-gradient(1200px 700px at 50% -20%, #0A2A3E, var(--bg) 70%);
  background-attachment:fixed;
}
[data-tema="hud"] h1{text-transform:uppercase;letter-spacing:2px;font-weight:700;font-size:22px;color:var(--acc)}
[data-tema="hud"] h1::after{content:"_";animation:hud-cursore 1.1s steps(1) infinite;margin-left:2px}
@keyframes hud-cursore{50%{opacity:0}}
[data-tema="hud"] .sub,[data-tema="hud"] .nlab,[data-tema="hud"] .box h2,[data-tema="hud"] .replab,
[data-tema="hud"] .sk-sopra,[data-tema="hud"] .pre{
  font-family:var(--f-tit);text-transform:uppercase;letter-spacing:1.2px}
[data-tema="hud"] #board{position:relative;outline:1px solid var(--acc);outline-offset:4px}
[data-tema="hud"] #board > div{box-shadow:inset 0 0 0 .5px rgba(0,225,255,.13)}
[data-tema="hud"] #board::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px)}
[data-tema="hud"] .pz{filter:drop-shadow(0 0 .8px rgba(200,245,255,.9)) drop-shadow(0 0 3px rgba(0,225,255,.35))}
[data-tema="hud"] #scheda{background:#071A27}
/* angoli a staffa su schede e riquadri */
[data-tema="hud"] .card,[data-tema="hud"] .box,[data-tema="hud"] .legend,[data-tema="hud"] .strut,
[data-tema="hud"] .vista.on{
  background:
    linear-gradient(var(--acc),var(--acc)) top left/12px 1.5px no-repeat,
    linear-gradient(var(--acc),var(--acc)) top left/1.5px 12px no-repeat,
    linear-gradient(var(--acc),var(--acc)) top right/12px 1.5px no-repeat,
    linear-gradient(var(--acc),var(--acc)) top right/1.5px 12px no-repeat,
    linear-gradient(var(--acc),var(--acc)) bottom left/12px 1.5px no-repeat,
    linear-gradient(var(--acc),var(--acc)) bottom left/1.5px 12px no-repeat,
    linear-gradient(var(--acc),var(--acc)) bottom right/12px 1.5px no-repeat,
    linear-gradient(var(--acc),var(--acc)) bottom right/1.5px 12px no-repeat,
    var(--card);
}
[data-tema="hud"] button{background:rgba(0,225,255,.04);font-family:var(--f-tit);
  text-transform:uppercase;letter-spacing:1px;font-size:13px}
[data-tema="hud"] button:hover{border-color:var(--acc);color:var(--acc)}
[data-tema="hud"] .lnk{text-transform:none;letter-spacing:0;font-family:inherit;font-size:inherit;background:none}
[data-tema="hud"] #mosse .mv1.att{background:var(--acc);color:var(--bg)}
[data-tema="hud"] .mv{font-family:var(--f-num);font-size:17px}

/* ======================================================== VETRO (aurora) */
:root[data-tema="vetro"]{
  --bg:#0D1024; --card:rgba(255,255,255,.07); --soft:rgba(255,255,255,.08); --line:rgba(255,255,255,.16);
  --ink:#F5F7FF; --mut:#A9B0D6; --acc:#7DF9C8; --cool:#B3A6FF;
  --lt:#DCE1F8; --dk:#8088CC; --co-lt:#6E76B8; --co-dk:#E4E8FF;
  --ko-bg:rgba(255,95,130,.12); --ko-bd:rgba(255,95,130,.35); --ko-tx:#FFB3C4;
  --ok-bg:rgba(125,249,200,.1); --ok-bd:rgba(125,249,200,.35); --ok-tx:#A8FFE0;
  --wa-bg:rgba(255,214,102,.09); --wa-bd:rgba(255,214,102,.3); --wa-tx:#FFE29A;
  --tag-bg:rgba(255,214,102,.15); --tag-tx:#FFE29A; --mat-bg:rgba(255,95,130,.18); --div-bd:rgba(179,166,255,.55);
  --c1:#00A884; --c2:#3D5AFE; --c3:#E91E63; --c4:#FF9100;
  --fr-ok:#00C853; --fr-ko:#FF1744; --fr-mv:#2A2F55; --bollo:#FFFFFF;
  --p1:#7DF9C8; --p2:#B3A6FF; --p3:#FF8FC0;
  --trg:rgba(61,90,254,.45); --velo:rgba(8,10,28,.55);
  --f-tit:"Sora",system-ui,sans-serif; --f-txt:"Sora",system-ui,sans-serif;
  --f-num:"Sora",system-ui,sans-serif; --r:22px; --r-s:16px;
  color-scheme:dark;
}
[data-tema="vetro"] body{
  background:
    radial-gradient(600px 420px at 8% 8%, rgba(91,60,255,.55), transparent 70%),
    radial-gradient(560px 420px at 92% 18%, rgba(0,194,168,.40), transparent 70%),
    radial-gradient(700px 520px at 60% 100%, rgba(255,95,162,.35), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
[data-tema="vetro"] h1{font-weight:700;letter-spacing:-.6px}
[data-tema="vetro"] .card,[data-tema="vetro"] .box,[data-tema="vetro"] .legend,[data-tema="vetro"] .strut,
[data-tema="vetro"] .avviso,[data-tema="vetro"] .vista.on,[data-tema="vetro"] #scheda{
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.18);
}
[data-tema="vetro"] #scheda{background:rgba(24,28,58,.82)}
[data-tema="vetro"] #board{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 18px 50px rgba(0,0,0,.35)}
[data-tema="vetro"] button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);border-radius:999px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
[data-tema="vetro"] button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
[data-tema="vetro"] .lnk,[data-tema="vetro"] .lnk:hover{background:none;border-radius:3px;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-tema="vetro"] .rvoce{border-radius:14px}
[data-tema="vetro"] .eco,[data-tema="vetro"] .apchip,[data-tema="vetro"] .rep span,[data-tema="vetro"] .trat span{border-radius:999px}

/* ======================================================== selettore */
.temi{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.temi .tl{font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--mut);margin-right:2px}
.temi button{min-height:30px;padding:3px 11px;font-size:12.5px;border-radius:999px}
.temi button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
[data-tema="hud"] .temi button{border-radius:2px}
[data-tema="hud"] .temi button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--bg)}
[data-tema="neon"] .temi button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff;
  box-shadow:0 0 14px rgba(255,62,165,.5)}

/* selettore delle frecce */
[data-tema="hud"] .seg{border-radius:2px}
[data-tema="hud"] .seg button[aria-pressed="true"]{background:var(--acc);color:var(--bg)}
[data-tema="neon"] .seg button,[data-tema="vetro"] .seg button{background:transparent;border-radius:0}
[data-tema="neon"] .seg button[aria-pressed="true"]{background:var(--acc);color:#fff}
[data-tema="vetro"] .seg{border-radius:999px}
[data-tema="vetro"] .seg button[aria-pressed="true"]{background:rgba(255,255,255,.85);color:#141833}