/* Cipherdrop skins. A skin is one block of color variables. To add a skin:
   copy a block, change the name and the colors, then add it to SKINS in js/settings.js.
   rgb triplets (no "rgb()") are used with alpha: rgba(var(--c1),.5) */
:root,[data-skin="ice"]{
  --c1:46,242,255;   --gold:#2EF2FF; --c1hi:#B9FBFF; --gold-ink:#00161C;   /* player / primary */
  --c2:255,43,214;   --mag:#FF2BD6;  --c2hi:#FF9BEA;                       /* computer / accent */
  --c3:124,255,138;  --good:#7CFF8A;                                       /* correct */
  --c4:255,46,108;   --bad:#FF2E6C;                                        /* miss */
  --bgr:4,5,11;      --bg:#04050B;   --sky1:#0A0820; --sky2:#1A0A33;       /* ground + canvas sky */
  --pd:14,20,40; --pm:32,48,92; --pl:64,90,150;                            /* panel tints dark/mid/light */
  --ink:#E9F7FF; --muted:#8C9DC0;
}
[data-skin="sakura"]{
  --c1:255,150,220;  --gold:#FF96DC; --c1hi:#FFD6F1; --gold-ink:#2A0620;
  --c2:170,140,255;  --mag:#AA8CFF;  --c2hi:#DCCFFF;
  --c3:140,255,190;  --good:#8CFFBE;
  --c4:255,90,120;   --bad:#FF5A78;
  --bgr:12,6,18;     --bg:#0C0612;   --sky1:#1A0A24; --sky2:#3A1240;
  --pd:32,16,40; --pm:62,32,78; --pl:104,64,134;
  --ink:#FFF0FA; --muted:#B99CC6;
}
[data-skin="lagoon"]{
  --c1:64,240,200;   --gold:#40F0C8; --c1hi:#C2FFF0; --gold-ink:#002018;
  --c2:255,140,90;   --mag:#FF8C5A;  --c2hi:#FFD0B8;
  --c3:190,255,110;  --good:#BEFF6E;
  --c4:255,80,100;   --bad:#FF5064;
  --bgr:2,12,16;     --bg:#020C10;   --sky1:#04202A; --sky2:#0A3A44;
  --pd:8,30,38; --pm:18,58,70; --pl:42,102,112;
  --ink:#E8FFFA; --muted:#8AB5B0;
}
[data-skin="sunset"]{
  --c1:255,200,60;   --gold:#FFC83C; --c1hi:#FFF0B8; --gold-ink:#241400;
  --c2:180,100,255;  --mag:#B464FF;  --c2hi:#E2C8FF;
  --c3:120,255,160;  --good:#78FFA0;
  --c4:255,70,90;    --bad:#FF465A;
  --bgr:12,6,20;     --bg:#0C0614;   --sky1:#1E0A2E; --sky2:#4A1A3A;
  --pd:30,16,44; --pm:60,34,84; --pl:98,66,132;
  --ink:#FFF8E8; --muted:#B8A6C8;
}
/* shared tokens built from the skin colors */
:root{
  --bg2:rgba(var(--bgr),.7);
  --panel:rgba(var(--pd),.52); --panel2:rgba(var(--pm),.42); --line:rgba(var(--c1),.16); --edge:rgba(var(--c1),.30);
  --cell:rgba(var(--pm),.66); --cell2:rgba(var(--pm),.55);
  --display:"Chakra Petch","Rajdhani","Arial Narrow",system-ui,sans-serif;
  --mono:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --glowc:0 0 14px rgba(var(--c1),.55),0 0 34px rgba(var(--c1),.25);
  --glowm:0 0 14px rgba(var(--c2),.55),0 0 34px rgba(var(--c2),.25);
  color-scheme:dark;
}

/* ---------- Study: plain classroom look for homeschool and students.
   Same app, no game styling: paper background, no neon, no grid, no rain, no glitches. ---------- */
[data-skin="study"]{
  --c1:37,99,235;    --gold:#2563EB; --c1hi:#1E3A8A; --gold-ink:#FFFFFF;
  --c2:194,65,12;    --mag:#C2410C;  --c2hi:#9A3412;
  --c3:21,128,61;    --good:#15803D;
  --c4:185,28,28;    --bad:#B91C1C;
  --bgr:247,247,244; --bg:#F7F7F4;   --sky1:#F7F7F4; --sky2:#F7F7F4;
  --pd:255,255,255; --pm:226,232,240; --pl:148,163,184;
  --ink:#1F2937; --muted:#5B6474;
  --display:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --glowc:0 1px 2px rgba(15,23,42,.12); --glowm:0 1px 2px rgba(15,23,42,.12);
  --panel:#FFFFFF; --panel2:#F1F5F9; --line:#D7DEE8; --edge:#CBD5E1; --cell:#EEF2F7; --bg2:#FFFFFF;
  color-scheme:light;
}
[data-skin="study"] #bgfx,[data-skin="study"] #mx,[data-skin="study"] .scan,[data-skin="study"] .vig,[data-skin="study"] #flash,
[data-skin="study"] .noise,[data-skin="study"] .micro,[data-skin="study"] .logoframe::before,[data-skin="study"] .logoframe::after,
[data-skin="study"] .playwrap::before,[data-skin="study"] .playwrap::after,[data-skin="study"] .hudbar .readout,
[data-skin="study"] .filenum::before,[data-skin="study"] .glitchlogo::before,[data-skin="study"] .glitchlogo::after,
[data-skin="study"] .play::after,[data-skin="study"] .cursor{display:none!important}
[data-skin="study"] *,[data-skin="study"] *::before,[data-skin="study"] *::after{animation:none!important;text-shadow:none!important}
[data-skin="study"] body{background:var(--bg)}
[data-skin="study"] .glitchlogo{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);font-size:clamp(34px,min(7vw,8vh),60px);letter-spacing:0;text-transform:none;filter:none}
[data-skin="study"] .glitchlogo .slash{-webkit-text-fill-color:var(--gold);color:var(--gold)}
[data-skin="study"] .brand .tagline{letter-spacing:.02em;font-size:15px}
[data-skin="study"] .tagline b{color:var(--gold)}
[data-skin="study"] .hudbar{border-bottom-color:transparent;justify-content:flex-end}
[data-skin="study"] h1,[data-skin="study"] h2,[data-skin="study"] h3,[data-skin="study"] .play,[data-skin="study"] .act b,[data-skin="study"] .chips button,
[data-skin="study"] .gtitle,[data-skin="study"] .info h2,[data-skin="study"] .tags span,[data-skin="study"] .filenum,[data-skin="study"] .mklab,
[data-skin="study"] .setlab,[data-skin="study"] .qnum,[data-skin="study"] .sizes b,[data-skin="study"] .stname b,[data-skin="study"] .bigbtn b,
[data-skin="study"] .styles button b,[data-skin="study"] .skins button b,[data-skin="study"] .hstep b,[data-skin="study"] .art .ttl{text-transform:none;letter-spacing:.01em}
/* panels: plain white cards, no corner ticks, soft shadow */
[data-skin="study"] .hud,[data-skin="study"] .qcard,[data-skin="study"] .mine,[data-skin="study"] .endcard,[data-skin="study"] .sheet .in,
[data-skin="study"] .strow,[data-skin="study"] .ststeps{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.08);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-skin="study"] .sheet{background:rgba(15,23,42,.35)}
/* buttons: plain rounded */
[data-skin="study"] .play,[data-skin="study"] .arrow{clip-path:none;border-radius:10px;filter:none}
[data-skin="study"] .play{background:var(--gold);color:#fff;letter-spacing:.04em;box-shadow:0 2px 6px rgba(37,99,235,.3)}
[data-skin="study"] .play .ps{letter-spacing:.04em}
[data-skin="study"] .act{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.08)}
[data-skin="study"] .act small{letter-spacing:.02em;text-transform:none}
[data-skin="study"] .act.build svg{color:var(--good)}
[data-skin="study"] .bigbtn{background:#FFFFFF;border-color:var(--line);box-shadow:0 1px 3px rgba(15,23,42,.08)}
[data-skin="study"] .chips button{background:#FFFFFF;border-radius:999px}
[data-skin="study"] .chips button.on{background:var(--gold);color:#fff;border-color:var(--gold);box-shadow:none}
[data-skin="study"] .tags span{border-radius:999px;background:var(--panel2);border-color:var(--line);color:var(--muted)}
[data-skin="study"] .icon{background:#FFFFFF;border-color:var(--line);color:var(--ink);backdrop-filter:none}
[data-skin="study"] .icon.gear,[data-skin="study"] .helpbtn{color:var(--gold)}
/* cards: flat color tiles with icon and name instead of game art */
[data-skin="study"] .art{background:linear-gradient(150deg,var(--a),var(--b))!important}
[data-skin="study"] .art::before,[data-skin="study"] .art .shade{display:none}
[data-skin="study"] .art img[src^="art/"]{display:none}
[data-skin="study"] .art .ttl{display:block;color:#fff}
[data-skin="study"] .art .glyph{opacity:1!important;filter:none!important;transform:none!important}
[data-skin="study"] .card .art{box-shadow:0 6px 18px rgba(15,23,42,.18);-webkit-box-reflect:unset;border:0}
[data-skin="study"] .card.tear .art{animation:none}
/* board: plain grid */
[data-skin="study"] .board{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.08);backdrop-filter:none}
[data-skin="study"] .cell{background:#EEF2F7;border:1px solid #D7DEE8;box-shadow:none;color:#fff}
[data-skin="study"] .board.aim{border-color:var(--gold);box-shadow:0 0 0 2px rgba(37,99,235,.25)}
[data-skin="study"] .board.aim .cell:not(.hit):not(.miss){background:#E0EAFF;border-color:#93B4F5}
[data-skin="study"] .cell.hit{background:var(--gold);border-color:var(--gold);box-shadow:none}
[data-skin="study"] .cell.done{background:var(--good);border-color:var(--good);color:#fff;box-shadow:none}
[data-skin="study"] .cell.miss{background:#FFFFFF}
[data-skin="study"] .rack .t{background:#FFFFFF;border-color:var(--line);color:var(--ink);backdrop-filter:none}
[data-skin="study"] .rack .t.on{color:#fff}
[data-skin="study"] .board.mini .cell{background:#E2E8F0}
[data-skin="study"] .board.mini .cell.mine-w{background:#93B4F5}
[data-skin="study"] input,[data-skin="study"] textarea,[data-skin="study"] .mk input[type=text],[data-skin="study"] .mk textarea{background:#FFFFFF!important;color:var(--ink)!important;border-color:var(--line)!important}
[data-skin="study"] .mkbar{background:rgba(255,255,255,.96)}
[data-skin="study"] .badge{color:#fff}
[data-skin="study"] .toast{background:#FFFFFF;color:var(--ink);border-color:var(--line);box-shadow:0 4px 14px rgba(15,23,42,.15)}
[data-skin="study"] .flow:focus-visible{outline:none}