/* ROAM HUD Lab — layouts details + five skins */

/* shared fx */
.overlay.clear{background:none;pointer-events:none}.overlay.clear .win{pointer-events:auto;box-shadow:0 10px 40px rgba(0,0,0,.55)}
.group-dash{padding:9px}
.irow.sel{outline:1px solid var(--acc)}
/* visor layout */
.wing{top:50%;width:300px}
.wing>.w{width:100%}
.wl{left:26px;transform:translateY(-50%) perspective(1100px) rotateY(17deg);transform-origin:left center;align-items:stretch}
.wr{right:26px;transform:translateY(-50%) perspective(1100px) rotateY(-17deg);transform-origin:right center;align-items:stretch}
.wing .w-res{grid-template-columns:1fr 1fr}.wing .ro{min-width:0}
[data-layout=visor] .arcrow{gap:22px}
[data-layout=visor] .arcrow>.w-switches{transform:rotate(5deg) translateY(-6px);max-width:190px;justify-content:flex-end}
[data-layout=visor] .arcrow>.w-weapons{transform:rotate(-5deg) translateY(-6px)}
[data-layout=visor] .tr{top:60px}
/* medallion layout */
[data-layout=medallion] .bc>.w-switches{max-width:176px;justify-content:flex-end}
[data-layout=medallion] .bc{gap:14px}
[data-layout=medallion] .w-weapons.round,[data-layout=visor] .w-weapons.round{background:none;border:0;padding:0}
[data-layout=medallion] .w-weapons.round::before,[data-layout=visor] .w-weapons.round::before{display:none}
.w-weapons.round .modes .sw{padding:3px 6px;font-size:11.5px}
[data-layout=corners] .tr .w-nav{justify-content:flex-end}
[data-layout=corners] .bl .w-switches{max-width:420px}

/* ═════════ 1. DASH — the truck's own dashboard: steel, toggles, Casio LCD ═════════ */
[data-skin=dash]{--bg:rgb(39 43 46/var(--alpha));--bg2:#1a1e20;--line:#777e81;--line2:#4b555b;--ink:#e0d8ca;--dim:#aaa69e;--acc:#eac779;--warn:#e89a3c;--bad:#e06a3c;--good:#c0cf92;--lcd:#8e9a80;--lcdink:#1d2318}
[data-skin=dash] .p{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 10px rgba(0,0,0,.35);background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 40%)}
[data-skin=dash] .group-dash::before,[data-skin=dash] .group-dash::after{content:"";position:absolute;top:4px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9aa0a2,#3a3f42)}
[data-skin=dash] .group-dash::before{left:4px}[data-skin=dash] .group-dash::after{right:4px}
[data-skin=dash] .ro,[data-skin=dash] .w-radio .scr,[data-skin=dash] .w-time .spd b,[data-skin=dash] .drive-lcd .big{background:var(--lcd);color:var(--lcdink);border:2px solid #15191b;box-shadow:inset 0 2px 5px rgba(0,0,0,.35)}
[data-skin=dash] .ro b{font:italic 400 17px/1 "DSEG14-Classic","DSEG14 Classic",var(--font-num);color:inherit}
[data-skin=dash] .ro u,[data-skin=dash] .ro .rate,[data-skin=dash] .ro .lbl{color:inherit;opacity:.7}
[data-skin=dash] .ro .ic{color:inherit}
[data-skin=dash] .ro.warn,[data-skin=dash] .ro.bad{background:#23281c;color:#c8d4a6}
[data-skin=dash] .ro.bad{color:#ff8a66;animation:blink 1s steps(2) infinite}
[data-skin=dash] .ro.warn b,[data-skin=dash] .ro.bad b{color:inherit}
[data-skin=dash] .w-radio .scr .top{border-color:rgba(0,0,0,.4)}
[data-skin=dash] .g-needle{stroke:#e4b56b}
[data-skin=dash] .sw,[data-skin=dash] .btn{background:linear-gradient(180deg,#3a4043,#2a2f32);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.5)}
[data-skin=dash] .sw .lever{background:#15191b;box-shadow:inset 0 0 0 1px #5d6264;width:9px;height:17px}
[data-skin=dash] .sw .lever::after{height:8px;background:linear-gradient(180deg,#d8dadb,#7d8385)}
[data-skin=dash] .sw.on .lever::after{background:linear-gradient(180deg,#fbe3a0,#b39a3a)}
[data-skin=dash] .btn.pri{background:var(--acc);color:#1d1a12}
[data-skin=dash] .w-time .go{box-shadow:inset 0 0 0 4px #33383b,0 3px 8px rgba(0,0,0,.5)}
[data-skin=dash] .win{box-shadow:0 0 0 1px #15191b,0 20px 60px rgba(0,0,0,.6);border-width:2px}

/* ═════════ 2. TERMINAL — green phosphor with orange calls, retro-futurist war-room ═════════ */
[data-skin=term]{--font:"Anonymous Pro","Courier New",monospace;--font-head:"Anonymous Pro","Courier New",monospace;--font-num:"Anonymous Pro","Courier New",monospace;font-size:13px;line-height:1.2;font-weight:700;
  --bg:rgb(13 11 6/var(--alpha));--bg2:#191407;--line:#a87400;--line2:#5a4208;--ink:#ffb000;--dim:#b07a10;--acc:#ffd76a;--warn:#ffe9a8;--bad:#ff5a36;--good:#ffd76a;--r:3px;--scrim:rgba(6,5,2,.78)}
[data-skin=term].fx-glow .hud,[data-skin=term].fx-glow .win{text-shadow:0 0 6px rgb(93 255 138/.55)}
[data-skin=term] .p,[data-skin=term] .win{border:5px solid #3d3329;border-radius:12px;box-shadow:inset 0 0 0 2px #0a0906,inset 0 0 34px rgb(93 255 138/.13),0 0 0 1px #15110c,0 4px 12px rgba(0,0,0,.5);
  background-image:repeating-linear-gradient(0deg,rgb(255 176 0/.045) 0 1px,transparent 1px 3px)}
[data-skin=term] .p::after{content:"";position:absolute;right:5px;top:-4px;width:3px;height:3px;border-radius:50%;background:#8a7a66;box-shadow:-14px 0 0 #8a7a66}
[data-skin=term] .hd{font:700 12px/1 var(--font);letter-spacing:.08em;color:var(--ink)}
[data-skin=term] .hd b{font:700 11px/1 "Roboto Serif";background:#d9cfae;color:#241d12;padding:3px 7px 2px;transform:rotate(-1.200deg);text-shadow:none;letter-spacing:.1em;box-shadow:1px 1px 0 rgba(0,0,0,.5)}
[data-skin=term] .btn,[data-skin=term] .sw{background:none;border:1px solid var(--line2);font:700 12.8px/1 var(--font);text-transform:uppercase;letter-spacing:.03em;border-radius:0;color:var(--ink)}
[data-skin=term] .sw{color:var(--dim)}
[data-skin=term] .sw.on,[data-skin=term] .btn.on,[data-skin=term] .btn.pri{background:var(--ink);color:#050b07;border-color:var(--ink);text-shadow:none}
[data-skin=term] .sw.on kbd,[data-skin=term] .btn.pri kbd,[data-skin=term] .btn.on kbd{color:#050b07;border-color:#050b07}
[data-skin=term] .sw.hot{background:var(--bad);border-color:var(--bad);color:#050b07}
[data-skin=term] .sw .lever{display:none}
[data-skin=term] .sw:not(.on)>span::before{content:"[ "}[data-skin=term] .sw:not(.on)>span::after{content:" ]"}
[data-skin=term] .w-switches.round .sw>span::before,[data-skin=term] .w-switches.round .sw>span::after{content:none}
[data-skin=term] .w-switches.round .sw{font-size:11px}
[data-skin=term] kbd{font:700 10.4px/1 var(--font);border-radius:0}
[data-skin=term] .ro{background:none;border:0;border-bottom:1px dashed var(--line2);border-radius:0;padding:2px 2px}
[data-skin=term] .ro b{font:700 19.2px/1 var(--font)}
[data-skin=term] .ro u,[data-skin=term] .ro .rate,[data-skin=term] .ro .lbl{font:700 11.2px/1 var(--font);letter-spacing:.04em}
[data-skin=term] .ro.warn b,[data-skin=term] .ro.warn .ic{color:var(--warn)}
[data-skin=term] .ro.bad{background:var(--bad);color:#050b07;text-shadow:none}[data-skin=term] .ro.bad *{color:#050b07!important}
[data-skin=term] .truckfig img,[data-skin=term] .fit img{filter:grayscale(1) contrast(1.500) brightness(1.300) sepia(1) saturate(4) hue-rotate(-12deg);mix-blend-mode:screen;opacity:.8}
[data-skin=term] .drive-bars .k,[data-skin=term] .drive-bars .v{font:700 13.6px/1 var(--font)}
[data-skin=term] .bar{border-color:var(--line2);background:none}
[data-skin=term] .bar.seg{height:13px}[data-skin=term] .bar.seg>i{-webkit-mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 9px);mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 9px)}
[data-skin=term] .g-big{font-family:var(--font);font-weight:400}[data-skin=term] .g-t{font-size:11.2px}[data-skin=term] .g-s{font:700 9.6px var(--font);letter-spacing:.06em}
[data-skin=term] .w-log li,[data-skin=term] .w-contacts table,[data-skin=term] .w-objective .q,[data-skin=term] .parts li,[data-skin=term] .kv,[data-skin=term] .irow{font-size:12.4px}
[data-skin=term] .w-log li time,[data-skin=term] .parts li b,[data-skin=term] .num{font:700 12px/1.2 var(--font)}
[data-skin=term] .w-log li::before{content:">";color:var(--dim)}[data-skin=term] .w-log li{gap:5px}
[data-skin=term] .w-contacts th{font:700 10.4px/1 var(--font)}
[data-skin=term] .alert{font:700 13.6px/1 var(--font);border-radius:0;border-width:2px}
[data-skin=term] .alert.bad{background:var(--bad);color:#050b07;text-shadow:none}[data-skin=term] .alert.bad small{color:#050b07}
[data-skin=term] .alert small{font:700 11.2px/1 var(--font)}
[data-skin=term] .w-time .go{border-radius:8px;border:5px solid #3d3329;background:#0c1a10;font:700 12px/1 var(--font)}
[data-skin=term] .w-time .clock,[data-skin=term] .w-time .spd b{font:700 13.6px/1.1 var(--font)}
[data-skin=term] .w-radio .scr{font:700 12.8px/1.15 var(--font);border-style:dashed}
[data-skin=term] .wcard{border-radius:0}[data-skin=term] .wcard .nm,[data-skin=term] .wcard .st,[data-skin=term] .wcard .n{font:700 11.2px/1 var(--font)}
[data-skin=term] .round .wcard .nm{font-size:11px}
[data-skin=term] .win>header h2{font:700 25.6px/1 var(--font);text-transform:uppercase}
[data-skin=term] .win h3,[data-skin=term] .irow .nm b,[data-skin=term] .perk b,[data-skin=term] .sktabs b{font:700 15.2px/1.1 var(--font);text-transform:uppercase}
[data-skin=term] .win p{font-size:14.4px;line-height:1.25}[data-skin=term] .dlg .txt h3{font-size:24px}
[data-skin=term] .win .pane,[data-skin=term] .irow,[data-skin=term] .perk,[data-skin=term] .chip{background:none;border-radius:0}
[data-skin=term] .chip,[data-skin=term] .irow .stat,[data-skin=term] .btn .cost{font:700 12px/1.1 var(--font)}
[data-skin=term] .mapv{background:#050b07}[data-skin=term] .mapv svg{filter:invert(1) grayscale(1) sepia(1) saturate(5) hue-rotate(-14deg)}
[data-skin=term] .irow{border-left-color:var(--line)}[data-skin=term] .irow .iic{background:none}
[data-skin=term] .tt{background:#050b07}
[data-skin=term] .group-dash{padding:12px}

/* ═════════ 4. GLASS — thin modern overlay (EVE Photon lesson): group by function, hide chrome ═════════ */
[data-skin=glass]{--font:"Roboto Slab",Georgia,serif;--font-head:"Roboto Slab",Georgia,serif;--font-num:"Anonymous Pro","Courier New",monospace;
  --bg:rgb(14 15 17/calc(var(--alpha)*.94));--bg2:rgb(255 255 255/.06);--line:rgb(255 255 255/.2);--line2:rgb(255 255 255/.11);--ink:#f4efe4;--dim:#a8a297;--acc:#ff9d4d;--warn:#ffc857;--bad:#ff5d4a;--good:#a8d672;--r:5px;--scrim:rgba(10,9,8,.55);--ring-fill:.7}
[data-skin=glass] .p,[data-skin=glass] .win{border-color:var(--line2);box-shadow:0 8px 28px rgba(0,0,0,.3)}
[data-skin=glass] .p>.hd:first-child{margin:-8px -8px 7px;padding:6px 8px;border-bottom:1px solid var(--line2);background:rgb(255 255 255/.04)}
[data-skin=glass] .hd{font:600 10.500px/1 var(--font-head);letter-spacing:.16em}
[data-skin=glass] .ro{background:none;border:0;flex-direction:row;padding:3px 8px 3px 6px;border-left:2px solid var(--line)}
[data-skin=glass] .ro.warn{border-color:var(--warn)}[data-skin=glass] .ro.bad{border-color:var(--bad);background:rgb(255 93 74/.14)}
[data-skin=glass] .w-res{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r);padding:6px;gap:4px 6px}
[data-skin=glass] .btn,[data-skin=glass] .sw{background:rgb(255 255 255/.05);border-color:var(--line2);font:500 12.500px/1.1 var(--font-head);border-radius:4px}
[data-skin=glass] .w-switches:not(.round),[data-skin=glass] .w-nav:not(.rail){background:var(--bg);padding:5px;border-radius:7px;border:1px solid var(--line2)}
[data-skin=glass] .sw.on{background:rgb(255 157 77/.16);border-color:var(--acc)}
[data-skin=glass] .sw .lever{width:20px;height:10px;border-radius:5px;background:rgb(255 255 255/.14)}
[data-skin=glass] .sw .lever::after{left:1px;right:auto;top:1px;bottom:1px;width:8px;height:auto;border-radius:50%}
[data-skin=glass] .sw.on .lever::after{left:auto;right:1px}
[data-skin=glass] .w-switches.round .sw,[data-skin=glass] .round .wcard{background:var(--bg);border-color:var(--line)}
[data-skin=glass] .btn.pri{background:var(--acc);color:#1a1208;border-color:var(--acc);font-weight:600}
[data-skin=glass] .btn.pri kbd{color:#1a1208!important;border-color:#1a1208!important}
[data-skin=glass] .w-nav.rail{background:var(--bg);padding:5px;border-radius:9px;border:1px solid var(--line2)}
[data-skin=glass] .w-nav.rail .btn{border-color:transparent;background:none}
[data-skin=glass] .g-hub{fill:rgb(14 15 17);stroke:var(--line)}
[data-skin=glass] .w-time .go{border-radius:50%;border:1px solid var(--line);background:var(--bg)}
[data-skin=glass] .w-time .go:hover{background:var(--acc);color:#1a1208}
[data-skin=glass] .alert{border-radius:20px;border-width:1px;font:600 11.500px/1 var(--font-head);padding:6px 12px}
[data-skin=glass] .alert.bad{background:rgb(120 26 18/.82);color:#fff;border-color:var(--bad)}[data-skin=glass] .alert.bad small{color:#ffd0c8}
[data-skin=glass] .w-radio .scr{border:0;background:none;padding:0;font:400 12.500px/1.4 var(--font);text-transform:none;letter-spacing:0}
[data-skin=glass] .w-radio .scr .top{font:600 10.500px/1 var(--font-head);letter-spacing:.16em;color:var(--acc);border:0}
[data-skin=glass] .win{background:rgb(16 17 19/.86);border-radius:10px}
[data-skin=glass] .win>header{border-bottom:1px solid var(--line2);margin-bottom:10px}
[data-skin=glass] .win>header h2{font:600 19px/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase}
[data-skin=glass] .banner{border-radius:10px 10px 0 0}
[data-skin=glass] .truckfig img{border-radius:4px;opacity:.95}
[data-skin=glass] .w-drive.p{border-radius:8px}

/* ═════════ 5. PRINT — the world's own language: paper, sumi ink, vermilion seals ═════════ */
[data-skin=print]{--font:"PT Serif",Georgia,serif;--font-head:"Yeseva One","PT Serif",serif;--font-num:"Anonymous Pro","Courier New",monospace;
  --bg:rgb(233 221 194/var(--alpha));--bg2:rgb(214 199 166/.6);--line:#1f1b16;--line2:rgb(31 27 22/.3);--ink:#1f1b16;--dim:#6a5f4e;--acc:#c23b22;--warn:#b0680e;--bad:#c23b22;--good:#2e5e4e;--r:1px;--scrim:rgba(46,34,22,.6);--ring-fill:.92;
  --paper: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'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-skin=print] .p,[data-skin=print] .win{background-image:var(--paper);border:1.500px solid var(--line);box-shadow:3px 3px 0 rgb(31 27 22/.55);outline:1px solid var(--line2);outline-offset:-5px}
[data-skin=print] .hd{font:400 12px/1 var(--font-head);letter-spacing:.16em;color:var(--dim)}
[data-skin=print] .hd b{color:var(--acc);font-weight:800}
[data-skin=print] .btn,[data-skin=print] .sw{background:rgb(233 221 194/.9);background-image:var(--paper);border:1.200px solid var(--line);font:400 13px/1.1 var(--font-head);letter-spacing:.04em;color:var(--ink);box-shadow:2px 2px 0 rgb(31 27 22/.4)}
[data-skin=print] .sw{color:var(--dim)}
[data-skin=print] .sw .lever{width:14px;height:14px;border-radius:50%;background:none;border:1.200px solid var(--dim)}
[data-skin=print] .sw .lever::after{inset:2px;height:auto;border-radius:50%;background:none}
[data-skin=print] .sw.on{color:var(--ink)}[data-skin=print] .sw.on .lever{border-color:var(--acc)}[data-skin=print] .sw.on .lever::after{background:var(--acc)}
[data-skin=print] .btn.on{border-color:var(--acc);color:var(--acc)}
[data-skin=print] .btn.pri,[data-skin=print] .sw.hot{background:var(--acc);color:#f1e7cf;border-color:#7d2414}
[data-skin=print] .btn.pri kbd{color:#f1e7cf!important;border-color:#f1e7cf!important}
[data-skin=print] .btn .cost{color:var(--acc)}[data-skin=print] .btn.pri .cost{color:#f1e7cf}
[data-skin=print] .w-switches.round .sw.on{background:var(--acc);color:#f1e7cf;box-shadow:2px 2px 0 rgb(31 27 22/.5)}
[data-skin=print] .w-switches.round .sw kbd{background:#e9ddc2}
[data-skin=print] .ro{background:none;border:0;border-bottom:1.200px solid var(--line);border-radius:0;padding:3px 4px}
[data-skin=print] .ro b{font:400 19px/1 var(--font-head)}
[data-skin=print] .w-res{background:var(--bg);background-image:var(--paper);border:1.500px solid var(--line);padding:7px 9px;box-shadow:3px 3px 0 rgb(31 27 22/.55);gap:3px 12px}
[data-skin=print] .truckfig img,[data-skin=print] .fit img{filter:grayscale(1) contrast(1.500) brightness(1.250);mix-blend-mode:multiply}
[data-skin=print] .truckfig{background:rgb(120 100 70/.25)}
[data-skin=print] .truckfig .part.dmg{background:rgb(176 104 14/.45)}[data-skin=print] .truckfig .part.crit{background:rgb(194 59 34/.6)}
[data-skin=print] .fit{background:#8b7a5c}
[data-skin=print] .fit .it{background:rgb(233 221 194/.8);color:var(--ink);border-color:var(--ink)}
[data-skin=print] .fit .it.hover{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
[data-skin=print] .bar{background:none;border-color:var(--line)}
[data-skin=print] .g-hub{fill:#e9ddc2;stroke:var(--line);stroke-width:1.500}
[data-skin=print] .g-track{stroke:rgb(31 27 22/.22)}[data-skin=print] .g-needle{stroke:var(--acc)}
[data-skin=print] .g-big{font-family:var(--font-head);font-weight:800}
[data-skin=print] .alert{background:var(--bg);background-image:var(--paper);font:400 13px/1 var(--font-head);border-width:1.500px;box-shadow:2px 2px 0 rgb(31 27 22/.5)}
[data-skin=print] .alert.bad{background:var(--acc);color:#f1e7cf;border-color:#7d2414;animation:none}[data-skin=print] .alert.bad small{color:#f1dcc8}
[data-skin=print] .w-radio .scr{background:none;border:0;border-left:3px solid var(--acc);font:500 13px/1.35 var(--font);text-transform:none;letter-spacing:0;font-style:italic}
[data-skin=print] .w-radio .scr .top{font:400 11px/1 var(--font-head);letter-spacing:.16em;font-style:normal;border-color:var(--line2)}
[data-skin=print] .w-time .go{border-radius:50%;background:var(--acc);border:2px solid #7d2414;color:#f1e7cf;box-shadow:3px 3px 0 rgb(31 27 22/.55);font:400 11px/1 var(--font-head)}
[data-skin=print] .w-time .go:hover{color:#fff;border-color:var(--ink)}
[data-skin=print] .w-time .clock{background:var(--bg);padding:3px 7px;border:1.200px solid var(--line)}
[data-skin=print] .w-time .spd b{background:#e9ddc2;border-color:var(--line)}
[data-skin=print] .wcard{background:rgb(233 221 194/.6);border-color:var(--line)}[data-skin=print] .wcard.sel{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
[data-skin=print] .wcard .n{color:var(--acc)}
[data-skin=print] .round .wcard{background:#e9ddc2;background-image:var(--paper);box-shadow:2px 2px 0 rgb(31 27 22/.5)}
[data-skin=print] .win>header h2{font:400 28px/1 var(--font-head)}
[data-skin=print] .win h3,[data-skin=print] .irow .nm b,[data-skin=print] .perk b,[data-skin=print] .sktabs b{font-family:var(--font-head);font-weight:700}
[data-skin=print] .win p{font:500 15.500px/1.6 var(--font-head)}
[data-skin=print] .win .pane,[data-skin=print] .irow,[data-skin=print] .perk,[data-skin=print] .chip{background:rgb(255 250 235/.35);border-color:var(--line2)}
[data-skin=print] .irow{border-left-color:var(--cat)}
[data-skin=print] .chip.on{background:var(--acc);color:#f1e7cf;border-color:#7d2414}
[data-skin=print] .tt{background:#e9ddc2;background-image:var(--paper);box-shadow:3px 3px 0 rgb(31 27 22/.55)}
[data-skin=print] .cargo>i.f{background:rgb(176 104 14/.2)}
[data-skin=print] .t-warn{color:#8f4f06}
[data-skin=print] .w-nav.rail .btn{border-radius:50%}
[data-skin=print] kbd{border-color:var(--dim)}

/* bar layout: compact readouts so the dash fits beside the right dock */
[data-layout=bar] .ro .lbl,[data-layout=bar] .ro .rate{display:none}
[data-layout=bar] .ro{min-width:88px}
[data-layout=bar] .group-dash .w-nav .btn kbd{display:none}
[data-layout=bar] .w-truck.lite{padding:4px}

/* fixes after first visual pass */
.w-switches.round .sw{border-radius:50%!important;background:var(--bg);overflow:visible}
.w-switches.round .sw>span{font-size:9.500px;line-height:1;max-width:46px;overflow:hidden}
.w-switches.round .sw>span::before,.w-switches.round .sw>span::after{content:none!important}
.w-switches.round .sw.locked{opacity:.6}
.truckfig .part.dmg,.truckfig .part.crit{background-image:repeating-linear-gradient(-45deg,transparent 0 3px,rgba(0,0,0,.35) 3px 5px)}
.wcard .st{white-space:nowrap;gap:4px}
.w-log ul{max-height:6.600em}
body.nopanel #hint{display:none}
[data-skin=print] .truckfig img,[data-skin=print] .fit img{filter:sepia(.45) contrast(1.050) brightness(1.080);mix-blend-mode:normal}
[data-skin=print] .truckfig{background:none;outline:1.200px solid var(--line)}
/* link: keep the world readable */
/* scrap */
[data-skin=term] .ro{min-width:138px}
[data-skin=term] .sw.on{background:var(--ink)}[data-skin=term] .sw.hot{background:var(--bad)}
[data-skin=term] .w-res{background:rgb(5 11 7/var(--alpha));padding:5px 7px;border:1px solid var(--line2)}
[data-skin=term] .ro.bad{animation:none}
/* glass */
[data-skin=glass] .w-switches.round .sw.on{background:rgb(60 34 12/.85);border-color:var(--acc)}
[data-skin=glass] .truckfig{width:84px}

[data-layout=medallion] .w-weapons.round,[data-layout=visor] .w-weapons.round{box-shadow:none!important;background-image:none!important;outline:0!important}

[data-skin=glass] .w-weapons.round .modes .sw{background:var(--bg);}
.fit .it{font-size:8px;line-height:1;letter-spacing:0;font-stretch:62%;overflow-wrap:normal}

/* glow is per-element text only: no filter on the HUD layer, nothing drawn over the game picture */
[data-skin=glass] .w-time .clock,[data-skin=dash] .w-time .clock,[data-skin=term] .w-time .clock{background:var(--bg);padding:3px 6px;border-radius:var(--r)}
[data-skin=print] .ro b,[data-skin=print] .g-big{font-weight:400}
.overlay{background:rgba(8,8,10,.6)!important}.overlay.clear{background:none!important}

/* mono skins tint the game icons per element (never the whole HUD) */
[data-skin=term] .gi{filter:grayscale(1) sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.150)}
[data-skin=print] .gi{filter:contrast(1.100) saturate(.9)}


/* ═════════ TERMINAL palette and shapes (overrides the block above) ═════════ */
[data-skin=term]{--bg:rgb(5 11 7/var(--alpha));--bg2:#0c1a10;--line:#2fbf5a;--line2:#1c6b35;--ink:#63ff8f;--dim:#2f9e55;--acc:#ff8a1f;--warn:#ffb347;--bad:#ff4a1f;--good:#63ff8f;--r:0px;--font-head:"Playfair Display",serif;--scrim:rgba(2,6,3,.8)}
[data-skin=term].fx-glow .hud,[data-skin=term].fx-glow .win{text-shadow:0 0 6px rgb(93 255 138/.5)}
[data-skin=term] .p,[data-skin=term] .win{border:1px solid var(--line);border-radius:0;box-shadow:none;
  background-image:linear-gradient(rgb(47 191 90/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(47 191 90/.07) 1px,transparent 1px);background-size:22px 22px}
[data-skin=term] .p::after{right:auto;left:-1px;top:-1px;width:26px;height:5px;border-radius:0;background:var(--acc);box-shadow:none}
[data-skin=term] .p::before{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;background:linear-gradient(135deg,transparent 50%,var(--line) 50%)}
[data-skin=term] .hd b{font:900 12px/1 var(--font-head);background:var(--acc);color:#050b07;padding:3px 8px 2px;transform:none;letter-spacing:.16em;text-shadow:none;box-shadow:none;text-transform:uppercase}
[data-skin=term] .hd{color:var(--dim)}
[data-skin=term] .sw.on,[data-skin=term] .btn.on,[data-skin=term] .btn.pri{background:var(--acc);border-color:var(--acc);color:#050b07}
[data-skin=term] .sw.hot{background:var(--bad);border-color:var(--bad)}
[data-skin=term] .ro b,[data-skin=term] .g-big{color:var(--ink)}
[data-skin=term] .ro.warn b,[data-skin=term] .ro.warn .ic{color:var(--warn)}
[data-skin=term] .ro .lbl{color:var(--acc)}
[data-skin=term] .truckfig img,[data-skin=term] .fit img{filter:grayscale(1) contrast(1.600) brightness(1.300) sepia(1) saturate(5) hue-rotate(70deg);mix-blend-mode:screen;opacity:.85}
[data-skin=term] .gi{filter:grayscale(1) sepia(1) saturate(5) hue-rotate(70deg) brightness(1.200)}
[data-skin=term] .g-acc,[data-skin=term] .g-needle{stroke:var(--acc)}
[data-skin=term] .g-hub{fill:#050b07;stroke:var(--line)}
[data-skin=term] .alert{font:900 15px/1 var(--font-head);letter-spacing:.18em;border:0;padding:6px 12px 6px 26px;text-shadow:none;background:repeating-linear-gradient(-45deg,var(--c) 0 8px,transparent 8px 16px) left/15px 100% no-repeat,#050b07;outline:1px solid var(--c)}
[data-skin=term] .alert.warn{--c:var(--acc)}
[data-skin=term] .alert.bad{background:var(--bad);color:#050b07;outline:0}[data-skin=term] .alert.bad small{color:#050b07}
[data-skin=term] .alert small{font:700 11px/1 var(--font);letter-spacing:.04em;text-transform:uppercase}
[data-skin=term] .w-time .go{border:0;border-radius:0;background:var(--acc);color:#050b07;text-shadow:none;width:84px;height:76px;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);font:900 11px/1 var(--font-head);letter-spacing:.12em}
[data-skin=term] .w-time .go:hover{background:var(--ink);color:#050b07}
[data-skin=term] .win>header h2{font:900 30px/1 var(--font-head);letter-spacing:.14em;color:var(--acc);text-shadow:none}
[data-skin=term] .win h3,[data-skin=term] .dlg .txt h3{color:var(--acc)}
[data-skin=term] .wcard.sel{border-color:var(--acc)}[data-skin=term] .wcard .n{color:var(--acc)}
[data-skin=term] .w-log li.good{color:var(--ink)}[data-skin=term] .w-log li{color:#b6ffca}
[data-skin=term] .w-log li.warn{color:var(--warn)}[data-skin=term] .w-log li.bad{color:var(--bad)}
[data-skin=term] .mapv{background:#050b07}[data-skin=term] .mapv svg{filter:invert(1) grayscale(1) sepia(1) saturate(5) hue-rotate(70deg)}
[data-skin=term] .irow{border-left-color:var(--acc)}
[data-skin=term] .w-compass .g-hub{fill:#050b07}
[data-skin=term] .cargo>i.f{border-color:var(--line);background:rgb(47 191 90/.12)}

/* ═════════ TOON — chunky cartoon HUD: cream panels, thick outlines, green and orange ═════════ */
[data-skin=toon]{--font:"Roboto Slab",Georgia,serif;--font-head:"Roboto Slab",Georgia,serif;--font-num:"Roboto Slab",Georgia,serif;font-weight:600;
  --bg:rgb(245 232 196/var(--alpha));--bg2:#e6d5a6;--line:#2a2118;--line2:rgb(42 33 24/.35);--ink:#2a2118;--dim:#756650;--acc:#f28c28;--warn:#d9730d;--bad:#e2452f;--good:#4f9a2f;--r:12px;--pad:10px;--scrim:rgba(30,22,12,.6);--ring-fill:1;--ol:3px solid #2a2118}
[data-skin=toon] .p,[data-skin=toon] .win{border:var(--ol);box-shadow:0 5px 0 #3a2a1e}
[data-skin=toon] .win{border-radius:20px;border-width:4px}
[data-skin=toon] .hd{font:800 11.500px/1 var(--font-head);letter-spacing:.08em;color:var(--dim)}
[data-skin=toon] .hd b{background:var(--acc);color:#3a2a1e;border:2px solid #3a2a1e;border-radius:20px;padding:3px 9px;font-weight:900}
[data-skin=toon] .btn,[data-skin=toon] .sw{background:#fff3d2;border:2.500px solid #3a2a1e;border-radius:10px;font:800 13px/1.1 var(--font-head);color:#3a2a1e;box-shadow:0 3px 0 #3a2a1e}
[data-skin=toon] .btn:hover{background:var(--acc);color:#3a2a1e}
[data-skin=toon] .sw{color:#756650}
[data-skin=toon] .sw.on{background:#8ccfae;color:#3a2a1e}
[data-skin=toon] .sw.hot{background:var(--bad);color:#fff3d2}
[data-skin=toon] .btn.on,[data-skin=toon] .btn.pri,[data-skin=toon] .chip.on{background:var(--acc);color:#3a2a1e;border-color:#3a2a1e}
[data-skin=toon] .btn.pri kbd{color:#3a2a1e!important;border-color:#3a2a1e!important}
[data-skin=toon] .btn .cost{color:#a04b00}
[data-skin=toon] .sw .lever{width:24px;height:13px;border-radius:8px;background:#cbb98a;border:2px solid #3a2a1e}
[data-skin=toon] .sw .lever::after{left:0;right:auto;top:0;bottom:0;width:9px;height:auto;border-radius:50%;background:#3a2a1e}
[data-skin=toon] .sw.on .lever{background:#fff3d2}[data-skin=toon] .sw.on .lever::after{left:auto;right:0;background:#3a2a1e}
[data-skin=toon] kbd{border:2px solid #3a2a1e;border-radius:5px;color:#3a2a1e;font:800 9.500px/1 var(--font);background:#fff3d2}
[data-skin=toon] .ro{background:#fff3d2;border:2.500px solid #3a2a1e;border-radius:20px;padding:3px 10px 3px 4px}
[data-skin=toon] .ro .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:#8ccfae;border:2px solid #3a2a1e;color:#3a2a1e;stroke-width:2.400}
[data-skin=toon] .ro b{font:900 17px/1 var(--font-num)}
[data-skin=toon] .ro.warn{background:#ffd08a}[data-skin=toon] .ro.warn .ic{background:var(--acc)}
[data-skin=toon] .ro.bad{background:#ffb3a3}[data-skin=toon] .ro.bad .ic{background:var(--bad);color:#fff3d2}
[data-skin=toon] .ro.warn b,[data-skin=toon] .ro.bad b{color:#3a2a1e}
[data-skin=toon] .ro u,[data-skin=toon] .ro .lbl,[data-skin=toon] .ro .rate{font-family:var(--font);font-weight:700}
[data-skin=toon] .bar{height:10px;border:2px solid #3a2a1e;border-radius:6px;background:#fff3d2;overflow:hidden}
[data-skin=toon] .bar>i{background:#8ccfae}
[data-skin=toon] .bar.seg{height:14px}
[data-skin=toon] .parts li.dmg .bar>i,[data-skin=toon] .bar.warn>i{background:var(--acc)}[data-skin=toon] .parts li.crit .bar>i,[data-skin=toon] .bar.bad>i{background:var(--bad)}
[data-skin=toon] .parts li.dmg{color:#a04b00}
[data-skin=toon] .truckfig img{border:2.500px solid #3a2a1e;border-radius:10px}
[data-skin=toon] .g-track{stroke:#cbb98a;stroke-width:8;stroke-linecap:round}
[data-skin=toon] .g-val{stroke:#2f8f72;stroke-width:8;stroke-linecap:round}[data-skin=toon] .g-acc{stroke:var(--acc);stroke-width:7;stroke-linecap:round}
[data-skin=toon] .g-warn,[data-skin=toon] .g-bad,[data-skin=toon] .g-good{stroke-width:8;stroke-linecap:round}
[data-skin=toon] path[stroke-dasharray]{stroke-dasharray:none}
[data-skin=toon] .g-needle{stroke:#3a2a1e;stroke-width:5}[data-skin=toon] .g-tick{stroke:#3a2a1e;stroke-width:2}
[data-skin=toon] .g-hub{fill:#fff3d2;stroke:#3a2a1e;stroke-width:3}
[data-skin=toon] .g-big{font-family:var(--font-head);font-weight:900}[data-skin=toon] .g-t,[data-skin=toon] .g-s{font-family:var(--font-head);font-weight:800}
[data-skin=toon] .w-compass .n-fwd{fill:var(--bad);stroke:#3a2a1e;stroke-width:1.500}[data-skin=toon] .w-compass .n-back{fill:#fff3d2;opacity:1;stroke:#3a2a1e;stroke-width:1.500}
[data-skin=toon] .w-compass.round{filter:none}
[data-skin=toon] .wcard{background:#fff3d2;border:2.500px solid #3a2a1e;border-radius:10px}
[data-skin=toon] .wcard.sel{background:#cfeadb}[data-skin=toon] .wcard.firing{background:#ffd08a;border-color:#3a2a1e}
[data-skin=toon] .wcard .n{color:#3a2a1e;font-weight:900}[data-skin=toon] .wcard .nm{font-weight:800}
[data-skin=toon] .pips i{border-radius:2px;background:#3a2a1e}
[data-skin=toon] .alert{border:2.500px solid #3a2a1e;border-radius:20px;background:#ffd08a;color:#3a2a1e;font:900 12px/1 var(--font-head);box-shadow:0 3px 0 #3a2a1e;animation:none}
[data-skin=toon] .alert.bad{background:var(--bad);color:#fff3d2}[data-skin=toon] .alert.bad small{color:#ffe1d6}[data-skin=toon] .alert small{color:#5a4a36;font-weight:600}
[data-skin=toon] .w-radio .scr{background:#3a2a1e;color:#9ff0b8;border:0;border-radius:8px;font:700 12.500px/1.35 "Anonymous Pro","Courier New",monospace}
[data-skin=toon] .w-radio .scr .top{color:var(--acc);border-color:#5a4a36}
[data-skin=toon] .w-time .go{width:82px;height:82px;border-radius:50%;background:var(--acc);border:4px solid #3a2a1e;box-shadow:0 6px 0 #3a2a1e;color:#3a2a1e;font:900 11px/1 var(--font-head)}
[data-skin=toon] .w-time .go:hover{background:#8ccfae;color:#3a2a1e}
[data-skin=toon] .w-time .clock{background:var(--bg);border:2.500px solid #3a2a1e;border-radius:10px;padding:3px 8px;font-weight:800}
[data-skin=toon] .w-time .spd b{background:#fff3d2;border:2.500px solid #3a2a1e;border-radius:8px;font-weight:900}
[data-skin=toon] .w-contacts td{border-color:var(--line2)}[data-skin=toon] .w-contacts tr.hostile td:first-child{color:#b3260f}
[data-skin=toon] .w-log li.good{color:#1f6f58}[data-skin=toon] .w-log li.bad{color:#b3260f}[data-skin=toon] .w-log li.warn{color:#a04b00}
[data-skin=toon] .t-warn{color:#a04b00}[data-skin=toon] .t-good{color:#1f6f58}[data-skin=toon] .t-bad{color:#b3260f}[data-skin=toon] .t-acc{color:#a04b00}
[data-skin=toon] .w-switches.round .sw{background:#fff3d2;box-shadow:0 4px 0 #3a2a1e}
[data-skin=toon] .w-switches.round .sw.on{background:#8ccfae}
[data-skin=toon] .w-weapons.round .wcard{background:#fff3d2;box-shadow:0 4px 0 #3a2a1e}
[data-skin=toon] .w-nav.rail .btn{border-radius:50%}
[data-skin=toon] .win>header h2{font:900 28px/1 var(--font-head)}
[data-skin=toon] .win h3,[data-skin=toon] .irow .nm b,[data-skin=toon] .perk b,[data-skin=toon] .sktabs b{font-weight:800}
[data-skin=toon] .win .pane,[data-skin=toon] .irow,[data-skin=toon] .perk,[data-skin=toon] .chip{background:#fff3d2;border:2px solid #3a2a1e;border-radius:10px}
[data-skin=toon] .irow{border-left:8px solid var(--cat,#3a2a1e)}
[data-skin=toon] .irow .iic{background:none}
[data-skin=toon] .banner{border-radius:15px 15px 0 0;border-bottom:4px solid #3a2a1e}
[data-skin=toon] .dlg .art,[data-skin=toon] .mapv{border:3px solid #3a2a1e;border-radius:12px}
[data-skin=toon] .tt{border:3px solid #3a2a1e;border-radius:12px;box-shadow:0 5px 0 #3a2a1e;background:#fff3d2}
[data-skin=toon] .cargo>i{border:2px solid #3a2a1e;border-radius:7px;background:#e6d5a6}[data-skin=toon] .cargo>i.f{background:#fff3d2}[data-skin=toon] .cargo>i.sel{background:#ffd08a}
[data-skin=toon] .fit{border:3px solid #3a2a1e;border-radius:12px;overflow:hidden}
[data-skin=toon] .fit .it{border:2.500px solid #3a2a1e;border-radius:6px;background:rgb(255 243 210/.85);color:#3a2a1e}
[data-skin=toon] .fit .it.hover{background:#ffd08a;box-shadow:none}
[data-skin=toon] .sktabs div.on{border-color:var(--acc);border-bottom-width:4px}
[data-skin=toon] .group-dash{padding:12px}

/* ═════════ DASH, more physical: real bat-handle tumblers, lamps, embossed tape labels, push buttons ═════════ */
[data-skin=dash] .p{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(180deg,rgba(255,255,255,.05),transparent 45%)}
[data-skin=dash] .group-dash{padding:12px 14px 10px;border-width:2px;border-color:#15191b;box-shadow:inset 0 0 0 1px #6a7275,inset 0 2px 0 1px rgba(255,255,255,.12),0 4px 12px rgba(0,0,0,.5)}
[data-skin=dash] .group-dash::before,[data-skin=dash] .group-dash::after{width:9px;height:9px;top:5px;background:radial-gradient(circle at 35% 30%,#cfd3d4,#565c5f 60%,#22272a);box-shadow:0 0 0 1px #15191b,inset 0 0 0 0 #000}
[data-skin=dash] .group-dash::before{left:5px}[data-skin=dash] .group-dash::after{right:5px}
[data-skin=dash] .w-switches:not(.round){gap:2px;align-items:flex-end;padding:2px 6px;background:#1d2123;border-radius:4px;box-shadow:inset 0 2px 5px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08)}
[data-skin=dash] .w-switches:not(.round) .sw{flex-direction:column;gap:5px;width:62px;padding:15px 2px 5px;background:none;border:0;box-shadow:none;position:relative;border-radius:0}
[data-skin=dash] .w-switches:not(.round) .sw::before{content:"";position:absolute;top:3px;left:50%;margin-left:-4.500px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6b3a2c,#2a1410);box-shadow:0 0 0 1.500px #0e1112,0 0 0 2.500px #6a7275}
[data-skin=dash] .w-switches:not(.round) .sw.on::before{background:radial-gradient(circle at 35% 30%,#f4ffd8,#9be36a 45%,#3f8a2a);box-shadow:0 0 0 1.500px #0e1112,0 0 0 2.500px #6a7275,0 0 9px 2px rgba(155,227,106,.75)}
[data-skin=dash] .w-switches:not(.round) .sw.hot::before{background:radial-gradient(circle at 35% 30%,#ffe3d8,#ff6a3c 45%,#a02a12);box-shadow:0 0 0 1.500px #0e1112,0 0 0 2.500px #6a7275,0 0 9px 2px rgba(255,106,60,.8)}
[data-skin=dash] .w-switches:not(.round) .sw .lever{display:block;width:24px;height:40px;background:none;box-shadow:none;border-radius:0;position:relative}
[data-skin=dash] .w-switches:not(.round) .sw .lever::before{content:"";position:absolute;left:1px;top:9px;width:22px;height:22px;border-radius:50%;background:conic-gradient(#9aa0a2,#4d5356,#b9bec0,#4d5356,#9aa0a2,#4d5356,#b9bec0,#4d5356,#9aa0a2);box-shadow:0 0 0 1.500px #0e1112,inset 0 0 0 5px rgba(20,24,26,.55),0 2px 3px rgba(0,0,0,.6)}
[data-skin=dash] .w-switches:not(.round) .sw .lever::after{content:"";position:absolute;left:8px;right:auto;width:8px;height:22px;top:auto;bottom:-1px;border-radius:4px 4px 5px 5px/4px 4px 9px 9px;background:linear-gradient(90deg,#6b7173,#f1f3f3 40%,#a9aeb0 70%,#4d5356);box-shadow:0 3px 3px rgba(0,0,0,.6)}
[data-skin=dash] .w-switches:not(.round) .sw.on .lever::after{bottom:auto;top:-1px;border-radius:4px 4px 5px 5px/9px 9px 4px 4px;box-shadow:0 -1px 2px rgba(0,0,0,.4);background:linear-gradient(90deg,#6b7173,#ffffff 40%,#c4c8c9 70%,#4d5356)}
[data-skin=dash] .w-switches:not(.round) .sw>span{font:700 9.500px/1 "Anonymous Pro","Courier New",monospace;letter-spacing:.06em;text-transform:uppercase;background:#141414;color:#f1ede0;padding:3px 5px 2px;border-radius:1px;box-shadow:0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px #000;white-space:nowrap}
[data-skin=dash] .w-switches:not(.round) .sw kbd{display:none}
[data-skin=dash] .w-switches:not(.round) .sw.locked{opacity:.5}
[data-skin=dash] .w-switches:not(.round) .sw.push>.ic{display:block;width:28px;height:28px;padding:6px;margin:6px 0;border-radius:50%;color:#1d1a12;stroke-width:2.200;background:radial-gradient(circle at 35% 28%,#ffe9b0,#e4b56b 50%,#8a6d1c);box-shadow:0 0 0 2px #0e1112,0 0 0 4px #6a7275,0 3px 4px rgba(0,0,0,.6)}
[data-skin=dash] .w-nav:not(.rail) .btn{background:linear-gradient(180deg,#454c4f,#2c3134);border:1px solid #0e1112;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 3px 0 #15191b,0 4px 5px rgba(0,0,0,.5);padding:7px 9px;margin-bottom:3px}
[data-skin=dash] .w-nav:not(.rail) .btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 #15191b}
[data-skin=dash] .group-dash>.row:last-child{align-items:flex-end;gap:12px}
[data-skin=dash] .w-compass.round{background:none;border:0;box-shadow:none;padding:0}
[data-skin=dash] .w-compass .g-hub{fill:#e8e0cc;stroke:#0e1112;stroke-width:2}
[data-skin=dash] .w-compass svg{border-radius:50%;box-shadow:0 0 0 3px #6a7275,0 0 0 4.500px #0e1112,0 3px 6px rgba(0,0,0,.5)}
[data-skin=dash] .w-compass .g-t{fill:#1d1a12}[data-skin=dash] .w-compass .c-N{fill:#b04a26}
[data-skin=dash] .w-compass .g-tick{stroke:#1d1a12}
[data-skin=dash] .w-compass .n-fwd{fill:#b04a26}[data-skin=dash] .w-compass .n-back{fill:#1d1a12;opacity:.7}[data-skin=dash] .w-compass .n-pin{fill:#0e1112}
[data-skin=dash] .w-drive.dial{box-shadow:0 0 0 2px #6a7275,0 0 0 3.500px #0e1112,inset 0 3px 8px rgba(0,0,0,.7)}
[data-skin=dash] .w-time .go{border-radius:50%;width:80px;height:80px;border:0;background:radial-gradient(circle at 38% 30%,#f0d9a0,#d0a050 55%,#7a5a18);color:#1d1a12;box-shadow:0 0 0 4px #0e1112,0 0 0 8px #6a7275,0 0 0 9.500px #0e1112,0 6px 10px rgba(0,0,0,.6)}
[data-skin=dash] .w-time .go:hover{color:#1d1a12;filter:brightness(1.080)}
[data-skin=dash] .w-time{gap:16px;padding:0 10px 10px 0}
/* glass + print compass */
[data-skin=glass] .w-compass .g-hub{fill:rgb(14 15 17/.9)}
[data-skin=print] .w-compass .n-fwd{fill:var(--acc)}[data-skin=print] .w-compass .n-back{fill:var(--ink);opacity:.8}
[data-skin=print] .w-compass .g-t{font-family:var(--font-head)!important;font-weight:400!important}
[data-skin=print] .w-compass svg{filter:drop-shadow(3px 3px 0 rgb(31 27 22/.55))}
[data-skin=term] .sw.locked{opacity:.62}


/* ═════════ TOON, tuned to the board: device casings, paper cards, tape, a little CRT ═════════ */
[data-skin=toon] .hd b{background:#f0bd4f}
[data-skin=toon] .w-objective{transform:rotate(-1.200deg);background-color:#fbf1d6;border-radius:6px}
[data-skin=toon] .w-objective::before{content:"";position:absolute;left:50%;top:-11px;width:74px;height:20px;margin-left:-37px;background:rgb(240 189 79/.9);border:2px solid #3a2a1e;transform:rotate(2deg);border-radius:2px}
[data-skin=toon] .w-radio,[data-skin=toon] .w-log{border-radius:16px}
[data-skin=toon] .w-radio .scr{background:#16261d;color:#9ff0b8;border:3px solid #3a2a1e;border-radius:10px;box-shadow:inset 0 0 0 3px #0c1711,inset 0 0 18px rgb(159 240 184/.25)}
[data-skin=toon] .w-radio::after,[data-skin=toon] .w-weapons::after,[data-skin=toon] .w-truck::after{content:"";position:absolute;right:9px;top:8px;width:9px;height:9px;border-radius:50%;background:#e8842c;border:2px solid #3a2a1e;box-shadow:-15px 0 0 -0px #8ccfae,-15px 0 0 2px #3a2a1e}
[data-skin=toon] .w-truck::after{top:auto;bottom:8px}
[data-skin=toon] .alert.warn{background:#f0bd4f}
[data-skin=toon] .irow:nth-child(even){transform:rotate(.150deg)}
[data-skin=toon] .win{background-color:#f3e6c4}
[data-skin=toon] .win .pane{background:#fbf1d6}

/* ═════════ TERMINAL, tuned to the board: text is green, drawings are orange ═════════ */
[data-skin=term] .hd{gap:8px}
[data-skin=term] .hd b{background:var(--ink);color:#050b07;font:700 11.500px/1 var(--font);letter-spacing:.1em;padding:3px 7px 2px}
[data-skin=term] .hd::after{content:"";order:1;flex:1;border-top:1px dashed var(--line2);min-width:8px}
[data-skin=term] .hd>span{order:2}
[data-skin=term] .sw.on,[data-skin=term] .btn.on,[data-skin=term] .btn.pri,[data-skin=term] .chip.on{background:var(--ink);border-color:var(--ink);color:#050b07;text-shadow:none}
[data-skin=term] .sw.hot{background:var(--bad);border-color:var(--bad)}
[data-skin=term] .truckfig img,[data-skin=term] .fit img{filter:grayscale(1) contrast(1.700) brightness(1.250) sepia(1) saturate(6) hue-rotate(-18deg)}
[data-skin=term] .gi{filter:grayscale(1) sepia(1) saturate(6) hue-rotate(-18deg) brightness(1.150)}
[data-skin=term] .truckfig{outline:1px dashed #b85f10;outline-offset:3px}
[data-skin=term] .bar>i,[data-skin=term] .parts li .bar>i{background:var(--acc)}
[data-skin=term] .bar.bad>i,[data-skin=term] .parts li.crit .bar>i{background:var(--bad)}
[data-skin=term] .bar{border-color:#7a430f}
[data-skin=term] .g-val{stroke:var(--acc)}[data-skin=term] .g-track{stroke:#5a3410}[data-skin=term] .g-tick{stroke:#b85f10}
[data-skin=term] .g-acc,[data-skin=term] .g-needle{stroke:#ffd9a8}
[data-skin=term] .g-hub{stroke:#b85f10}
[data-skin=term] .w-compass .n-fwd{fill:var(--acc)}[data-skin=term] .w-compass .g-t{fill:var(--ink)}
[data-skin=term] .fit .it{border-color:var(--acc);background:rgb(255 138 31/.12)}
[data-skin=term] .fit .cells.grid{background-image:linear-gradient(#5a3410 1px,transparent 1px),linear-gradient(90deg,#5a3410 1px,transparent 1px)}
[data-skin=term] .cargo>i.f{border-color:var(--acc);background:rgb(255 138 31/.1)}
[data-skin=term] .mapv svg{filter:invert(1) grayscale(1) sepia(1) saturate(6) hue-rotate(-18deg)}
[data-skin=term] .wcard.sel{border-color:var(--ink)}[data-skin=term] .wcard .n{color:var(--ink)}
[data-skin=term] .ro .lbl{color:var(--dim)}
[data-skin=term] .win>header h2{font:900 30px/1 var(--font-head)}

/* ═════════ NEO TOON — cartoon sci-fi out of flat pill blocks: black, cream, orange, salmon ═════════ */
[data-skin=neo]{--font:"Roboto Serif",Georgia,serif;--font-head:"Roboto Slab",Georgia,serif;--font-num:"Roboto Slab",Georgia,serif;font-weight:500;
  --bg:rgb(20 17 15/var(--alpha));--bg2:#2b2623;--line:#e8dcc0;--line2:rgb(232 220 192/.22);--ink:#f3ead4;--dim:#b5a98e;--acc:#f28b30;--warn:#f2b63d;--bad:#e2503a;--good:#8fd0a8;--r:14px;--pad:10px;--scrim:rgba(10,8,7,.7);--ring-fill:1;--blk:#141210;--pink:#e7a79d;--sal:#e0795c}
[data-skin=neo] .p{border:0;border-left:14px solid var(--elbow,var(--acc));border-radius:24px 10px 10px 24px;padding-left:12px}
[data-skin=neo] .w-truck{--elbow:var(--good)}[data-skin=neo] .w-log{--elbow:var(--sal)}[data-skin=neo] .w-contacts{--elbow:var(--line)}[data-skin=neo] .w-radio{--elbow:var(--pink)}[data-skin=neo] .w-objective{--elbow:var(--warn)}
[data-skin=neo] .win{border:0;border-left:22px solid var(--acc);border-radius:36px 14px 14px 36px}
[data-skin=neo] .hd{font:700 10.500px/1 var(--font-head);letter-spacing:.12em;color:var(--dim)}
[data-skin=neo] .hd b{background:var(--line);color:var(--blk);border-radius:20px;padding:4px 12px;font-weight:800}
[data-skin=neo] .btn,[data-skin=neo] .sw{border:0;border-radius:20px;background:var(--line);color:var(--blk);font:800 12px/1.1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;padding:6px 12px}
[data-skin=neo] .btn:hover{background:var(--acc);color:var(--blk)}
[data-skin=neo] .sw{background:#4a423c;color:#cfc4aa}
[data-skin=neo] .sw.on{background:var(--acc);color:var(--blk)}
[data-skin=neo] .sw.hot{background:var(--bad);color:#fff}
[data-skin=neo] .btn.on,[data-skin=neo] .btn.pri,[data-skin=neo] .chip.on{background:var(--acc);color:var(--blk)}
[data-skin=neo] .btn.off{background:#4a423c;color:#cfc4aa}
[data-skin=neo] .btn .cost{color:#7a3a06;font-family:var(--font-num);font-weight:800}
[data-skin=neo] .sw .lever{width:10px;height:10px;border-radius:50%;background:#2b2623}
[data-skin=neo] .sw .lever::after{display:none}
[data-skin=neo] .sw.on .lever{background:var(--blk)}
[data-skin=neo] kbd{border:0;background:rgb(20 18 16/.22);color:inherit;border-radius:8px;font:800 9.500px/1 var(--font-head);padding:2px 5px}
[data-skin=neo] .ro{border:0;border-radius:20px;background:var(--line);color:var(--blk);padding:4px 12px 4px 10px;min-width:112px}
[data-skin=neo] .ro:nth-child(4n+2){background:var(--acc)}[data-skin=neo] .ro:nth-child(4n+3){background:var(--pink)}[data-skin=neo] .ro:nth-child(4n){background:var(--sal)}
[data-skin=neo] .ro b{font:900 20px/1 var(--font-num);color:var(--blk)}
[data-skin=neo] .ro u,[data-skin=neo] .ro .lbl,[data-skin=neo] .ro .rate,[data-skin=neo] .ro .ic{color:var(--blk);opacity:.75;font-family:var(--font-head);font-weight:700}
[data-skin=neo] .ro .ic{opacity:1;stroke-width:2.400}
[data-skin=neo] .ro.warn{background:var(--warn)}[data-skin=neo] .ro.bad{background:var(--bad)}
[data-skin=neo] .ro.bad b,[data-skin=neo] .ro.bad .ic,[data-skin=neo] .ro.bad u,[data-skin=neo] .ro.bad .lbl,[data-skin=neo] .ro.bad .rate{color:#fff;opacity:1}
[data-skin=neo] .ro.warn b,[data-skin=neo] .ro.warn .ic{color:var(--blk)}
[data-skin=neo] .bar{height:10px;border:0;border-radius:6px;background:#4a423c;overflow:hidden}[data-skin=neo] .bar>i{background:var(--line);border-radius:6px}
[data-skin=neo] .bar.seg{height:14px}
[data-skin=neo] .parts li.dmg .bar>i,[data-skin=neo] .bar.warn>i{background:var(--acc)}[data-skin=neo] .parts li.crit .bar>i,[data-skin=neo] .bar.bad>i{background:var(--bad)}
[data-skin=neo] .parts li b,[data-skin=neo] .num{font-family:var(--font-num);font-weight:700}
[data-skin=neo] .g-track{stroke:#4a423c;stroke-width:9}[data-skin=neo] .g-val{stroke:var(--line);stroke-width:9}[data-skin=neo] .g-acc{stroke:var(--acc);stroke-width:8}
[data-skin=neo] .g-warn,[data-skin=neo] .g-bad,[data-skin=neo] .g-good{stroke-width:9}
[data-skin=neo] path[stroke-dasharray]{stroke-dasharray:22 4}
[data-skin=neo] .g-needle{stroke:var(--acc);stroke-width:6;stroke-linecap:round}[data-skin=neo] .g-tick{stroke:var(--dim);stroke-width:2}
[data-skin=neo] .g-hub{fill:var(--blk);stroke:none}
[data-skin=neo] .g-big{font:900 34px var(--font-num)}[data-skin=neo] .g-t,[data-skin=neo] .g-s{font-family:var(--font-head);font-weight:800}
[data-skin=neo] .truckfig img{border-radius:14px}
[data-skin=neo] .wcard{border:0;border-top:10px solid #4a423c;border-radius:14px;background:#2b2623}
[data-skin=neo] .wcard.sel{border-top-color:var(--line)}[data-skin=neo] .wcard.firing{border-top-color:var(--bad)}
[data-skin=neo] .wcard .nm{font:800 12px/1.05 var(--font-head);text-transform:uppercase}[data-skin=neo] .wcard .n{color:var(--line)}
[data-skin=neo] .wcard .ft .btn{padding:3px 6px;font-size:10px}
[data-skin=neo] .alert{border:0;border-radius:20px;background:var(--warn);color:var(--blk);font:800 12px/1 var(--font-head);padding:7px 14px;animation:none}
[data-skin=neo] .alert small{color:#4a3508;font-weight:600}
[data-skin=neo] .alert.bad{background:var(--bad);color:#fff}[data-skin=neo] .alert.bad small{color:#ffe0d8}
[data-skin=neo] .w-radio .scr{border:0;background:none;padding:0;color:var(--ink);font:500 12.500px/1.4 var(--font);text-transform:none;letter-spacing:0}
[data-skin=neo] .w-radio .scr .top{border:0;font:800 10.500px/1 var(--font-head);letter-spacing:.12em;color:var(--pink)}
[data-skin=neo] .w-time .go{width:84px;height:84px;border:0;border-radius:50%;background:var(--acc);color:var(--blk);font:900 11px/1 var(--font-head);box-shadow:0 0 0 6px var(--blk),0 0 0 12px var(--line)}
[data-skin=neo] .w-time .go:hover{background:var(--line);color:var(--blk)}
[data-skin=neo] .w-time{gap:20px;padding:0 14px 14px 0}
[data-skin=neo] .w-time .clock{background:var(--blk);border-radius:14px;padding:5px 10px;font-family:var(--font-num);font-weight:700}
[data-skin=neo] .w-time .spd b{background:var(--blk);border:0;border-radius:12px;font-family:var(--font-num);font-weight:800}
[data-skin=neo] .w-time .spd .btn{padding:5px 8px}
[data-skin=neo] .w-contacts td{border-color:var(--line2)}
[data-skin=neo] .w-switches.round .sw{background:#4a423c;color:#cfc4aa}
[data-skin=neo] .w-switches.round .sw.on{background:var(--acc);color:var(--blk);box-shadow:0 0 0 4px var(--blk),0 0 0 7px var(--line)}
[data-skin=neo] .w-switches.round .sw kbd{background:var(--blk);color:var(--line)}
[data-skin=neo] .w-weapons.round .wcard{border-radius:50%;border:0;background:var(--blk);box-shadow:0 0 0 4px #4a423c}
[data-skin=neo] .w-weapons.round .wcard.sel{box-shadow:0 0 0 4px var(--line)}
[data-skin=neo] .w-weapons.round .wcard .n{background:var(--line);color:var(--blk);border:0}
[data-skin=neo] .w-weapons.round .modes .sw{background:#4a423c}[data-skin=neo] .w-weapons.round .modes .sw.on{background:var(--acc)}
[data-skin=neo] .w-nav.rail{gap:6px}[data-skin=neo] .w-nav.rail .btn{border-radius:50%;padding:0}
[data-skin=neo] .w-nav:not(.rail) .btn{padding:6px 10px}[data-skin=neo] .w-nav:not(.rail) .btn:nth-child(2n){background:var(--pink)}[data-skin=neo] .w-nav:not(.rail) .btn:nth-child(3n){background:var(--sal)}
[data-skin=neo] .win>header h2{font:900 30px/1 var(--font-head);text-transform:uppercase;letter-spacing:.02em}
[data-skin=neo] .win h3,[data-skin=neo] .irow .nm b,[data-skin=neo] .perk b,[data-skin=neo] .sktabs b{font-family:var(--font-head);font-weight:800}
[data-skin=neo] .win .pane,[data-skin=neo] .irow,[data-skin=neo] .perk{background:#2b2623;border:0;border-radius:14px}
[data-skin=neo] .irow{border-left:10px solid var(--cat,var(--line));border-radius:16px 10px 10px 16px}
[data-skin=neo] .irow .iic{background:none}
[data-skin=neo] .irow .btn{padding:4px 10px}
[data-skin=neo] .chip{border:0;border-radius:20px;background:#3a3430;font-family:var(--font-head);font-weight:700}
[data-skin=neo] .banner{border-radius:14px 14px 0 0;border:0}
[data-skin=neo] .tt{background:var(--blk);border:0;border-left:12px solid var(--pink);border-radius:20px 10px 10px 20px}
[data-skin=neo] .cargo>i{border:0;border-radius:10px;background:#2b2623}[data-skin=neo] .cargo>i.f{background:#4a423c}[data-skin=neo] .cargo>i.sel{background:var(--acc)}
[data-skin=neo] .fit{border-radius:16px;overflow:hidden}
[data-skin=neo] .fit .it{border:2.500px solid var(--line);border-radius:8px;background:rgb(20 18 16/.55)}
[data-skin=neo] .sktabs div.on{border-color:var(--acc);border-bottom-width:5px}
[data-skin=neo] .mapv,[data-skin=neo] .dlg .art{border:0;border-radius:16px}
[data-skin=neo] .w-compass .n-fwd{fill:var(--acc)}[data-skin=neo] .w-compass .n-back{fill:var(--line);opacity:.8}[data-skin=neo] .w-compass .g-hub{fill:var(--blk);stroke:var(--line);stroke-width:2.500}
[data-skin=neo] .group-dash{padding:12px}
[data-skin=neo] .t-acc{color:var(--acc)}
[data-skin=neo][data-layout=bar] .ro{min-width:84px}[data-skin=neo][data-layout=bar] .sw kbd,[data-skin=neo][data-layout=bar] .w-nav .btn kbd{display:none}
[data-skin=neo] .wing .truckfig{width:88px}
[data-skin=toon] .w-radio::after,[data-skin=toon] .w-weapons::after{display:none}
[data-skin=neo] .irow{grid-template-columns:34px 1fr auto auto 104px}
[data-skin=neo] .irow .btn{padding:4px 8px;font-size:11px;gap:4px}
[data-skin=neo] .w-nav:not(.rail) .btn{padding:6px 9px;font-size:11px;gap:4px}[data-skin=neo] .w-nav:not(.rail) .btn kbd{display:none}
[data-skin=neo] .alert{padding:7px 11px;font-size:11.500px}


/* ═════════ GADGET — cartoon pocket hardware: bone plastic, orange trim, keycaps, slide switches, tiny screens ═════════ */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]){--font:"Roboto Slab",Georgia,serif;--font-head:"Roboto Slab",Georgia,serif;--font-num:"Anonymous Pro","Courier New",monospace;font-weight:500;
  --bg:rgb(233 225 207/var(--alpha));--bg2:#d8cfba;--line:#2e2b2a;--line2:rgb(46 43 42/.26);--ink:#2e2b2a;--dim:#7a7264;--acc:#f26a1b;--warn:#e8a21c;--bad:#d6402b;--good:#2f8f55;--r:12px;--pad:10px;--scrim:rgba(24,22,20,.6);--ring-fill:1;
  --scr:#15251c;--scr-ink:#7ff0a0;--lcd:#c9d3bd;--key:#8792a0;--cap:#f6f1e4;
  --case:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -4px 0 rgba(46,43,42,.13),0 4px 0 #2e2b2a}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .p,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-res,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches:not(.round),:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-nav:not(.rail){background:var(--bg);border:2px solid var(--line);border-radius:14px;box-shadow:var(--case)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-res,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches:not(.round),:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-nav:not(.rail){padding:8px 10px 11px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .group-dash .w-res,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .group-dash .w-switches:not(.round),:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .group-dash .w-nav:not(.rail){background:var(--bg2);box-shadow:inset 0 2px 4px rgba(46,43,42,.25)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .p::before{content:"";position:absolute;left:7px;bottom:8px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#2e2b2a 0 1px,#b9af98 1.500px 2.500px,#2e2b2a 3px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .hd{font:800 10px/1 var(--font-head);letter-spacing:.14em;color:var(--dim)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .hd b{color:var(--ink);font-weight:900}
/* keycaps */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .btn{background:var(--cap);border:2px solid var(--line);border-radius:9px;font:800 12px/1.1 var(--font-head);color:var(--ink);padding:6px 10px 8px;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(46,43,42,.16),0 3px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .btn:hover{background:#ffd9b8;color:var(--ink);border-color:var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 1px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .btn.on,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .btn.pri,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .chip.on{background:var(--acc);color:#2e2b2a;border-color:var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .btn.pri kbd,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .btn.on kbd{color:#2e2b2a!important;border-color:#2e2b2a!important}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .btn .cost{color:#9a3d06;font-weight:700}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-nav .btn{background:var(--key);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.22),0 3px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-nav .btn:nth-child(1){background:#f3b8c4;color:var(--ink)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-nav .btn:nth-child(3){background:#f2d04a;color:var(--ink)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-nav .btn:nth-child(5){background:var(--cap);color:var(--ink)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-nav .btn kbd{color:inherit;border-color:currentColor;opacity:.8}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) kbd{border:1.500px solid var(--dim);border-radius:4px;font:700 9.500px/1 var(--font-num);color:var(--dim)}
/* slide switches with a lamp */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw{background:none;border:0;border-radius:0;padding:2px 2px 2px 14px;gap:6px;position:relative;font:800 11px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw::before{content:"";position:absolute;left:0;top:50%;margin-top:-5px;width:9px;height:9px;border-radius:50%;background:#5b2a20;border:2px solid var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw.on{color:var(--ink)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw.on::before{background:#58e07c;box-shadow:0 0 0 2px rgb(88 224 124/.35)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw.hot::before{background:#ff5a3c;box-shadow:0 0 0 2px rgb(255 90 60/.35)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw .lever{display:block;width:32px;height:16px;border-radius:5px;background:#2e2b2a;border:2px solid var(--line);position:relative}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw .lever::after{content:"";position:absolute;left:0;right:auto;top:0;bottom:0;width:15px;height:auto;border-radius:3px;background:repeating-linear-gradient(90deg,#f26a1b 0 2px,#b94b0c 2px 3px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw.on .lever::after{left:auto;right:0;top:0;background:repeating-linear-gradient(90deg,#6fe08f 0 2px,#2f8f55 2px 3px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw.hot .lever::after{background:repeating-linear-gradient(90deg,#ff7a5c 0 2px,#b3260f 2px 3px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches:not(.round){gap:9px 14px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches:not(.round) .sw.push{padding-left:0}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches:not(.round) .sw.push::before{display:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches:not(.round) .sw.push>.ic{display:block;width:26px;height:26px;padding:5px;border-radius:8px;background:var(--key);color:#fff;border:2px solid var(--line);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 2px 0 var(--line);stroke-width:2.200}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sw.locked{opacity:.5}
/* knobs (round layouts) */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches.round .sw{padding:0;border:2px solid var(--line)!important;color:#fff;background:radial-gradient(circle,#6b6660 0 44%,#2e2b2a 45% 50%,transparent 51%),repeating-conic-gradient(#e2bd66 0 6deg,#a9832f 6deg 12deg);box-shadow:0 4px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches.round .sw.on{background:radial-gradient(circle,#d6402b 0 44%,#2e2b2a 45% 50%,transparent 51%),repeating-conic-gradient(#e2bd66 0 6deg,#a9832f 6deg 12deg)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches.round .sw::before,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches.round .sw>span{display:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches.round .sw kbd{background:var(--cap);color:var(--ink);border-color:var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches.round .sw .ic{width:17px;height:17px;stroke-width:2.200}
/* little screens */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro{background:var(--lcd);color:#22301f;border:2px solid var(--line);border-radius:6px;box-shadow:inset 0 2px 3px rgba(46,43,42,.3)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro b{font:700 18px/1 var(--font-num);color:inherit}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro u,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro .lbl,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro .rate,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro .ic{color:inherit;opacity:.72;font-family:var(--font-num)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro .ic{opacity:1}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro.warn{background:#f2c230}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro.bad{background:var(--bad);color:#fff6ea}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro.warn b,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro.warn .ic,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro.bad b,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .ro.bad .ic{color:inherit}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-radio .scr{background:#1b1b1d;color:#f3f0e6;border:2px solid var(--line);border-radius:12px 12px 5px 5px;font:700 12.500px/1.35 var(--font-num);padding:9px 11px;min-height:66px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-radio .scr .top{border-color:#3d3d40;color:#7ff0a0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-radio::after{content:"";position:absolute;left:92px;right:52px;bottom:16px;height:17px;background:radial-gradient(circle,#2e2b2a 1.600px,transparent 2px) 0 0/7px 6px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log ul{background:#e4e8dc;border:2px solid var(--line);border-radius:8px;padding:5px 7px;box-shadow:inset 0 2px 3px rgba(46,43,42,.22);font-family:var(--font-num)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li{font:700 12px/1.25 var(--font-num)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li:first-child{background:#2e2b2a;color:#eef2e4;margin:-2px -4px 0;padding:2px 4px;border-radius:3px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li:first-child time{color:#b9c4ae}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li.good{color:#1f6f3c}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li.bad{color:#a8240f}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li.warn{color:#8a5a00}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li:first-child.bad,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li:first-child.warn,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-log li:first-child.good{color:#ffd9b8}
/* radar-style gauges */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-hub{fill:var(--scr);stroke:var(--line);stroke-width:2}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-track{stroke:#2c5a40}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-val{stroke:var(--scr-ink)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-acc{stroke:#f2c230}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-tick{stroke:#58a878}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-needle{stroke:#ff8a3c;stroke-width:3.500}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-big{fill:var(--scr-ink);font-family:var(--font-num);font-weight:700}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-t{fill:#b6f5c8;font-weight:700}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .g-s{fill:#6fbf8a;font:700 8.500px var(--font-num)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-drive.ring{padding:16px 16px 20px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-drive.ring svg{border-radius:50%;box-shadow:0 0 0 5px #e9e1cf,0 0 0 7px #2e2b2a,0 0 0 12px var(--acc),0 0 0 14px #2e2b2a,0 5px 0 14px #2e2b2a}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-drive.dial svg{background:var(--scr);border:2px solid var(--line);border-radius:10px;padding:3px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .drive-bars .k{font:800 10px/1 var(--font-head)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .drive-bars .v{font-weight:700}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .drive-lcd .big{background:var(--lcd);border:2px solid var(--line);border-radius:8px;color:#22301f}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-compass svg{border-radius:50%;box-shadow:0 0 0 4px #e9e1cf,0 0 0 6px #2e2b2a,0 4px 0 6px #2e2b2a}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-compass{padding:7px 7px 11px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-compass .g-t{fill:#b6f5c8}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-compass .c-N{fill:#ff8a3c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-compass .n-fwd{fill:#ff8a3c}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-compass .n-back{fill:#58a878;opacity:.9}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-compass .n-pin{fill:#e9e1cf}
/* bars as LED strips */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .bar{height:9px;background:#2e2b2a;border:0;border-radius:3px;padding:0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .bar>i{background:#58e07c;top:2px;bottom:2px;left:2px;border-radius:1px;-webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .bar.seg{height:13px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .parts li.dmg .bar>i,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .bar.warn>i{background:#f2a23c}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .parts li.crit .bar>i,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .bar.bad>i{background:#ff5a3c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .parts li.dmg{color:#9a4a00}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .parts li b{font-weight:700}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .truckfig{border:2px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:0 0 0 3px var(--acc),0 0 0 5px var(--line);margin:5px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .truckfig img{border-radius:0}
/* weapon module tiles */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard{background:var(--cap);border:2px solid var(--line);border-radius:10px;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(46,43,42,.14),0 3px 0 var(--line);padding:6px 7px 8px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard.sel{background:#8fe0aa}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard.firing{background:#f08a78;border-color:var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard.empty{background:#3a3634;border-style:solid;opacity:1}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard.empty .nm,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard.empty .n{color:#8d857a}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .n{color:var(--ink);font-weight:700}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .nm{font-weight:800}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .st{color:#4a453e;font-weight:700}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .st .t-good{color:#1f6f3c}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .st .t-bad{color:#7a1608}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .st .t-warn{color:#7a4a00}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .cyc{background:#2e2b2a;height:4px;border-radius:2px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .cyc i{background:var(--acc)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard .ft .btn{padding:2px 5px 4px;font-size:10.500px;box-shadow:0 2px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .pips i{background:var(--ink);border-radius:1px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-weapons.round{gap:0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-weapons.round .wcard{border-radius:16px;width:66px;height:66px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-weapons.round .wcard .cyc{display:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-weapons.round .wcard .n{background:var(--cap);border-color:var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-weapons.round .modes{background:var(--bg);border:2px solid var(--line);border-radius:10px;padding:5px 8px;box-shadow:0 3px 0 var(--line);width:max-content}
/* labels and the turn key */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .alert{background:#f2c230;color:var(--ink);border:2px solid var(--line);border-radius:7px;font:900 11.500px/1 var(--font-head);box-shadow:0 3px 0 var(--line);animation:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .alert small{color:#5a4708;font-weight:600}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .alert.bad{background:var(--bad);color:#fff6ea}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .alert.bad small{color:#ffd9cf}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-time .go{width:82px;height:80px;border:2px solid var(--line);border-radius:18px;background:var(--acc);color:var(--ink);font:900 11px/1 var(--font-head);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -5px 0 rgba(0,0,0,.18),0 6px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-time .go:hover{background:#ff8a3c;color:var(--ink)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-time{padding:0 0 6px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-time .clock,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-time .spd b{background:var(--lcd);color:#22301f;border:2px solid var(--line);border-radius:6px;padding:3px 7px;font-weight:700}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-time .spd .btn{padding:4px 6px 6px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-contacts td{border-color:var(--line2);font-weight:500}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-contacts tr.hostile td:first-child{color:#a8240f}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-contacts tr.friendly td:first-child{color:#1f6f3c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-contacts tr.sel td{background:rgb(242 106 27/.2)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .t-warn{color:#8a5a00}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .t-good{color:#1f6f3c}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .t-bad{color:#a8240f}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .t-acc{color:#b94b0c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-objective .q .num{color:#b94b0c;font-weight:700}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-nav.rail{background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:7px 7px 10px;box-shadow:var(--case);gap:7px}
/* windows: a bigger case with an orange gasket */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .win{background:#e9e1cf;border:2px solid var(--line);border-radius:22px;box-shadow:inset 0 0 0 5px var(--acc),inset 0 0 0 7px var(--line),0 8px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .win>header{padding:20px 24px 10px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .win .body{padding:6px 24px 24px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .win>header h2{font:900 26px/1 var(--font-head);letter-spacing:.01em}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .win h3,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .irow .nm b,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .perk b,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sktabs b{font-weight:800}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .win .pane{background:var(--bg2);border:2px solid var(--line);border-radius:12px;box-shadow:inset 0 3px 5px rgba(46,43,42,.22)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .irow,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .perk{background:var(--cap);border:2px solid var(--line);border-radius:9px;box-shadow:0 2px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .irow{border-left:9px solid var(--cat,var(--line))}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .irow .iic{background:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .irow .btn{padding:3px 8px 5px;box-shadow:0 2px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .chip{background:var(--cap);border:2px solid var(--line);border-radius:7px;font-weight:700}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .banner{border-radius:14px 14px 0 0;margin:9px 9px 0;border:2px solid var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .banner.s{height:100px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .tt{background:var(--cap);border:2px solid var(--line);border-radius:12px;box-shadow:0 4px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .cargo>i{background:#cfc5ae;border:2px solid var(--line);border-radius:8px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .cargo>i.f{background:var(--cap);box-shadow:0 2px 0 var(--line)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .cargo>i.sel{background:#8fe0aa}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .fit{border:2px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 0 0 4px var(--acc),0 0 0 6px var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .fit .it{border:2px solid #f6f1e4;border-radius:6px;background:rgb(46 43 42/.5);color:#f6f1e4}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .fit .it.hover{border-color:#8fe0aa;box-shadow:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .fit .cells.grid{background-image:linear-gradient(rgb(246 241 228/.22) 1px,transparent 1px),linear-gradient(90deg,rgb(246 241 228/.22) 1px,transparent 1px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .sktabs div.on{border-color:var(--acc);border-bottom-width:4px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .mapv,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .dlg .art{border:2px solid var(--line);border-radius:12px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .group-dash{padding:12px 12px 14px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=bar] .ro{min-width:86px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=bar] .w-nav .btn kbd{display:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wing .truckfig{width:86px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .win .list{gap:3px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .irow{padding:2px 8px;grid-template-columns:34px 1fr auto auto 104px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .irow .iic{height:28px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .banner.s{height:84px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .wcard{width:98px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-radio::after{left:104px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .win.lg{height:800px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-drive.ring svg{width:172px;height:172px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-drive.ring{padding:15px 15px 19px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=bar] .sw kbd{display:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=bar] .ro{min-width:74px;padding:3px 6px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=bar] .ro b{font-size:16px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=bar] .w-switches:not(.round){gap:7px 10px;max-width:430px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=bar] .w-nav .btn{padding:5px 7px 7px;font-size:11px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=bar] .group-dash>.row:last-child{align-items:flex-start}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .w-switches.round{max-width:186px!important;gap:8px}


/* ═════════ GADGET devices (layout "devices") ═════════ */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-dev{position:relative;background:var(--bg);border:2.500px solid var(--line);border-radius:20px;padding:12px 12px 15px;box-shadow:inset 0 3px 0 rgba(255,255,255,.7),inset 0 -5px 0 rgba(46,43,42,.14),0 5px 0 var(--line);color:var(--ink);font-family:var(--font-head)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-dev button{font:inherit;color:inherit}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-dev>header{display:flex;justify-content:space-between;align-items:center;font:900 10px/1 var(--font-head);letter-spacing:.14em;margin:0 2px 8px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-dev>header span{font:700 10.500px/1 var(--font-num);letter-spacing:.04em;background:var(--lcd);border:2px solid var(--line);border-radius:5px;padding:3px 6px}
/* LED strips */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-led{display:flex;gap:2px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-led i{width:7px;height:5px;border-radius:1px;background:rgb(46 43 42/.25)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-led i.on{background:#2f9f5a}
/* 1. module board */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-grid{display:grid;grid-template-columns:repeat(4,72px);gap:6px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile{position:relative;width:72px;height:72px;border:2.500px solid var(--line);border-radius:11px;background:#f4ecd6;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:0 0 6px;box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 -4px 0 rgba(46,43,42,.15)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile:hover{transform:translateY(-1px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile small{position:absolute;left:6px;top:5px;font:700 8.500px/1 var(--font-num);opacity:.7}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile .gi{position:absolute;top:9px;left:50%;margin-left:-17px;width:34px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile b{font:800 8.500px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;max-width:64px;overflow:hidden;white-space:nowrap}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.dmg{background:#edc65a}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.dmg .gd-led i.on{background:#b3590a}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.crit{background:#e0604a;color:#fff6ea}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.crit .gd-led i.on{background:#fff6ea}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.crit .gd-led i{background:rgb(46 43 42/.4)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn{background:#dfe6ea}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn.sel{background:#8fe0aa}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn.firing{background:#f0705a}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.socket,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.dark{background:#3a3634;color:#d8cfba;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -4px 0 rgba(0,0,0,.3)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile .hole{position:absolute;top:10px;left:50%;margin-left:-16px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,#1b1917 0 34%,#56504b 36% 44%,#1b1917 46% 60%,#6b645d 62%);border:2px solid #1b1917}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile em{position:absolute;top:17px;left:0;right:0;text-align:center;font:700 22px/1 var(--font-num);font-style:normal;color:#7ff0a0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-pips{display:flex;gap:2px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-pips i{width:6px;height:6px;border-radius:50%;border:1.500px solid var(--line)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-pips i.on{background:var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-board footer{display:flex;gap:14px;margin:10px 2px 0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-slide{display:flex;align-items:center;gap:6px;font:800 9.500px/1 var(--font-head)!important;letter-spacing:.1em;color:var(--dim)!important}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-slide i{width:30px;height:15px;border-radius:5px;background:#2e2b2a;border:2px solid var(--line);position:relative}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-slide i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;border-radius:3px;background:repeating-linear-gradient(90deg,#f26a1b 0 2px,#b94b0c 2px 3px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-slide.on{color:var(--ink)!important}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-slide.on i::after{left:auto;right:0;background:repeating-linear-gradient(90deg,#6fe08f 0 2px,#2f8f55 2px 3px)}
/* 2. gauge unit */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-gauge{display:grid;grid-template-columns:auto auto;gap:8px;border-radius:24px 24px 20px 20px;box-shadow:inset 0 0 0 4px var(--acc),inset 0 0 0 6px var(--line),0 5px 0 var(--line);padding:16px 16px 18px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber{width:222px;height:134px;background:#f4d21f;border:2.500px solid var(--line);border-radius:14px 14px 8px 8px;box-shadow:inset 0 0 0 3px #c9a40a,inset 0 0 22px rgb(122 58 0/.3);padding:3px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber svg{display:block;width:100%;height:100%;fill:none;stroke:#6b3200;stroke-linecap:round}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber .tk{stroke-width:2}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber .tr{stroke-width:9;stroke:rgb(107 50 0/.22)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber .vl{stroke-width:9}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber .lm{stroke-width:9;stroke:#d6402b}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber .nd{stroke-width:4}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber circle{fill:#6b3200;stroke:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber text{fill:#6b3200;stroke:none;font:700 10px var(--font-num);letter-spacing:.08em}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber text.big{font:700 34px var(--font-num);letter-spacing:0;paint-order:stroke;stroke:#f4d21f;stroke-width:6px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-strips{display:flex;gap:6px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled{display:flex;flex-direction:column;align-items:center;gap:3px;width:30px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled span{display:flex;flex-direction:column-reverse;gap:2px;background:#2e2b2a;border:2px solid var(--line);border-radius:5px;padding:3px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled i{width:16px;height:6px;border-radius:1px;background:#4a4541}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled i.on{background:#58e07c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled.warn i.on{background:#f2a23c}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled.bad i.on{background:#ff5a3c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled b{font:900 8px/1 var(--font-head);letter-spacing:.08em}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled u{text-decoration:none;font:700 10.500px/1 var(--font-num)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-vled.bad u{color:#a8240f}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-cells{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-cells div{display:flex;align-items:center;gap:4px;background:var(--lcd);border:2px solid var(--line);border-radius:6px;padding:4px 6px;box-shadow:inset 0 2px 3px rgba(46,43,42,.3);color:#22301f}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-cells b{font:700 15px/1 var(--font-num)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-cells u{text-decoration:none;font:700 9.500px/1 var(--font-num);opacity:.7}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-cells .ic{width:12px;height:12px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-cells .warn{background:#f2c230}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-cells .bad{background:var(--bad);color:#fff6ea}
/* 3. scanner */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-scan{display:grid;grid-template-columns:196px 54px;gap:8px 10px;width:290px;border-radius:26px 14px 20px 20px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar{width:196px;height:196px;background:#12261b;border:2.500px solid var(--line);border-radius:16px;box-shadow:inset 0 0 0 3px #0a1710,inset 0 0 26px rgb(127 240 160/.25);padding:4px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar svg{display:block;width:100%;height:100%;fill:none;stroke:#3fbf78;stroke-width:1.300}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar .sw{fill:rgb(127 240 160/.16);stroke:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar text{fill:#7ff0a0;stroke:none;font:700 11px var(--font-num)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar text.n{fill:#ff8a3c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar .me{fill:#ff8a3c;stroke:#12261b;stroke-width:1.500}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar .bl rect{fill:#d9ffe4;stroke:none}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar .bl.hostile rect{fill:#ff6a4a}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar .bl.friendly rect{fill:#7ff0a0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar .bl .rg{stroke:#ff6a4a;stroke-width:1.500;stroke-dasharray:3 3}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-radar .bl text{font-size:9px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-side{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:2px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lamp{width:11px;height:11px;border-radius:50%;border:2px solid var(--line);background:#5b2a20}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lamp.on{background:#58e07c;box-shadow:0 0 0 3px rgb(88 224 124/.3)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-knob2{width:40px;height:40px;border-radius:50%;border:2.500px solid var(--line);background:radial-gradient(circle,#d6402b 0 36%,#2e2b2a 38% 44%,transparent 46%),repeating-conic-gradient(#e2bd66 0 7deg,#a9832f 7deg 14deg);box-shadow:0 3px 0 var(--line);margin-top:auto}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lcd{grid-column:1/-1;background:#e4e8dc;border:2px solid var(--line);border-radius:8px;padding:5px 8px;box-shadow:inset 0 2px 3px rgba(46,43,42,.22);font:700 11.500px/1.35 var(--font-num);color:#22301f}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lcd li{display:flex;justify-content:space-between;gap:8px;white-space:nowrap}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lcd li span{overflow:hidden;text-overflow:ellipsis}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lcd li.hostile{color:#a8240f}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lcd li.friendly{color:#1f6f3c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lcd li.sel{background:#2e2b2a;color:#ffd9b8;margin:0 -4px;padding:0 4px;border-radius:3px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-lcd header{display:flex;justify-content:space-between;background:#2e2b2a;color:#eef2e4;margin:-2px -4px 4px;padding:2px 6px;border-radius:4px;letter-spacing:.06em}
/* keys */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key{position:relative;width:58px;height:58px;border:2.500px solid var(--line);border-radius:13px;background:#efe6d2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:inset 0 3px 0 rgba(255,255,255,.75),inset 0 -6px 0 rgba(46,43,42,.16),0 3px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key:active{transform:translateY(2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.75),0 1px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key .ic{width:20px;height:20px;stroke-width:2.200;margin-top:4px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key b{font:800 8px/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key small{position:absolute;left:6px;top:5px;font:700 8.500px/1 var(--font-num);opacity:.65}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key>i{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:rgb(46 43 42/.28)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.on,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.nav{background:var(--k)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.on>i{background:#fff;box-shadow:0 0 0 1.500px var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.hot{background:#ff5a3c;color:#fff6ea}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.locked{background:#c9c1af;color:#857d6f;box-shadow:inset 0 -3px 0 rgba(46,43,42,.14),0 1px 0 var(--line);transform:translateY(2px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.sm{width:42px;height:38px;border-radius:9px;background:var(--key);color:#fff}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.sm .ic{margin:0;width:17px;height:17px}
/* 4. log stick */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-stick{display:grid;grid-template-columns:34px 1fr 26px;gap:9px;align-items:center;width:290px;border-radius:14px;padding:9px 12px 12px;margin-right:16px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-grille{width:34px;height:34px;border-radius:7px;border:2px solid var(--line);background:#2e2b2a radial-gradient(circle,#8d857a 1.300px,transparent 1.800px) 1px 1px/6px 6px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-stick .gd-lcd{grid-column:auto;min-width:0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-stick .gd-lcd li{display:block;overflow:hidden;text-overflow:ellipsis;font-size:11px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-stick .gd-lcd li.bad{color:#a8240f}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-stick .gd-lcd li.good{color:#1f6f3c}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-stick .gd-lcd li.warn{color:#8a5a00}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-btns{display:flex;flex-direction:column;gap:8px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-round{width:24px;height:24px;border-radius:50%;border:2.500px solid var(--line);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 2px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-round.g{background:#4fbf5f}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-round.o{background:#f28a2c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-plug{position:absolute;right:-19px;top:50%;margin-top:-22px;width:18px;height:44px;border:2.500px solid var(--line);border-left:0;border-radius:0 4px 4px 0;background:linear-gradient(#aab2bd,#7c8691);box-shadow:inset 0 -18px 0 -14px #2e2b2a}
/* 5. console */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-console{width:286px;border-radius:26px 26px 22px 22px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen{background:#1b1b1d;color:#f3f0e6;border:2.500px solid var(--line);border-radius:14px 14px 6px 6px;padding:9px 11px 7px;font:700 12px/1.3 var(--font-num);text-transform:uppercase;letter-spacing:.03em;margin-right:46px;min-height:84px;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen footer{display:flex;justify-content:space-between;font-size:9.500px;color:#b8a878}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen footer>span:first-child{color:#58e07c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen .eq{display:inline-flex;gap:2px;align-items:flex-end;height:9px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen .eq i{width:2px;background:currentColor;animation:eq 1s ease-in-out infinite}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen .eq i:nth-child(2){animation-delay:-.3s}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen .eq i:nth-child(3){animation-delay:-.6s}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-dial{position:absolute;right:-12px;top:-12px;width:66px;height:66px;border-radius:50%;border:2.500px solid var(--line);background:radial-gradient(circle,#f6f1e4 0 60%,#f26a1b 62% 66%,#f6f1e4 68%);box-shadow:inset 0 3px 0 rgba(255,255,255,.8),0 4px 0 var(--line);font:700 17px/1 var(--font-num)!important}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-keys{display:grid;grid-template-columns:repeat(4,58px);gap:8px 9px;margin-top:11px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-space{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:11px;border:2.500px solid var(--line);border-radius:13px;background:var(--acc);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -6px 0 rgba(0,0,0,.18),0 3px 0 var(--line);font:900 13px/1 var(--font-head)!important;letter-spacing:.08em}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-space:active{transform:translateY(2px)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-space .ic{width:18px;height:18px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-space small{font:600 10px/1 var(--font-head);letter-spacing:.02em;opacity:.75;text-transform:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-space.sm{height:34px;margin-top:8px;font-size:11.500px!important;letter-spacing:.02em}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-space kbd{color:var(--ink);border-color:var(--ink)}
/* 6. pager and stickers */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-pager{width:270px;border-radius:14px 14px 20px 20px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-pager .gd-lcd li b{color:#b94b0c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-stickers{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:4px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-sticker{display:flex;align-items:center;gap:7px;padding:6px 12px;background:#f2c230;color:var(--ink);border-radius:9px;font:900 12px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 0 3px #fff8ea,0 0 0 5px var(--line),3px 5px 0 4px rgb(46 43 42/.35);transform:rotate(-1.500deg)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-sticker:nth-child(even){transform:rotate(1.200deg)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-sticker small{font:600 11px/1 var(--font-head);letter-spacing:0;text-transform:none;opacity:.8}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-sticker.bad{background:var(--bad);color:#fff6ea}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-sticker .ic{width:15px;height:15px;stroke-width:2.200}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard])[data-layout=devices] .tr{gap:12px;align-items:flex-end}


/* ═════════ GADGET devices, second pass: truck scheme back, equipment panel, printed tile keypad ═════════ */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-truck{width:330px;cursor:pointer}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-truckrow{display:flex;gap:12px;align-items:stretch}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-truck .truckfig{width:100px;margin:5px 5px 5px 5px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li{display:grid;grid-template-columns:1fr auto 24px;gap:6px;align-items:center;font:700 11px/1 var(--font-head);white-space:nowrap}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li b{font:700 11px/1 var(--font-num);text-align:right}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts .gd-led i{width:5px;height:8px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li.dmg{color:#9a4a00}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li.dmg .gd-led i.on{background:#f2a23c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li.crit{color:#a8240f}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li.crit .gd-led i.on{background:#ff5a3c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li.sum{display:flex;justify-content:space-between;margin-top:4px;padding-top:6px;border-top:2px solid var(--line2);font:700 11px/1 var(--font-num)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li.sum span{display:flex;align-items:center;gap:4px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-parts li.sum .ic{width:12px;height:12px}
/* shared flat printed tiles, tightly set in a dark frame */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-grid,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-keys{background:#1f1d1b;border:2.500px solid #1f1d1b;border-radius:10px;gap:3px;padding:0;margin-top:0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-equip{width:330px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-grid{grid-template-columns:repeat(4,1fr)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key{border:0;border-radius:7px;background:#eadfbe;box-shadow:inset 0 1.500px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(31,29,27,.14);color:#1f1d1b}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile{width:auto;height:78px;padding-bottom:7px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile:hover,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key:hover{filter:brightness(1.060);transform:none}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile .gi{top:11px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile em{position:static;font:700 8.500px/1 var(--font-num);font-style:normal;color:inherit;opacity:.75;text-transform:uppercase}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn{background:#eadfbe}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn.util{background:#d6b96c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn.sel{background:#62c99b}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn.firing{background:#c9534a;color:#fbf2dc}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn.firing .gd-pips i{border-color:#fbf2dc}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.wpn.firing .gd-pips i.on{background:#fbf2dc}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-tile.socket{background:#2c2c2e;color:#a59d8d;box-shadow:inset 0 1.500px 0 rgba(255,255,255,.1),inset 0 -3px 0 rgba(0,0,0,.3)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-equip footer{display:flex;align-items:center;gap:12px;margin:10px 2px 0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-equip footer .sp{flex:1}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-mini{display:flex;align-items:center;justify-content:center;min-width:30px;height:24px;padding:0 7px;border:2px solid var(--line);border-radius:6px;background:#eadfbe;font:800 9px/1 var(--font-head)!important;letter-spacing:.08em;box-shadow:0 2px 0 var(--line)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-mini .ic{width:13px;height:13px}
/* keypad */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-console{width:276px;background:#dccfa8;border-radius:16px;padding:14px 12px 15px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-console::after{content:"";position:absolute;left:-7px;top:118px;width:6px;height:150px;background:linear-gradient(#dccfa8 0 22px,transparent 22px 34px,#dccfa8 34px 78px,transparent 78px 90px,#dccfa8 90px);border:2.500px solid var(--line);border-right:0;border-radius:4px 0 0 4px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-cap{position:absolute;left:34px;top:-15px;width:64px;height:14px;border:2.500px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;background:linear-gradient(90deg,#8a6a22,#e6c66e 30%,#c9a64a 60%,#8a6a22)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-screen{margin-right:0;border-radius:9px;min-height:78px;margin-bottom:9px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-keys{display:grid;grid-template-columns:repeat(4,1fr)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key{width:auto;height:58px;justify-content:flex-end;gap:3px;padding:0 0 7px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(31,29,27,.3)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key>span{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:26px;height:26px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key>span.ring{border:1.600px solid currentColor;border-radius:50%}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key .ic{width:17px;height:17px;margin:0;stroke-width:1.900}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key>.ic{position:absolute;top:11px;left:50%;margin-left:-9px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key b{font:800 7.500px/1 var(--font-head);letter-spacing:.1em}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key small{left:5px;top:4px;font-size:7.500px;opacity:.6}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key kbd{position:absolute;right:4px;top:3px;border:0;padding:0;min-width:0;font:700 9px/1 var(--font-num);color:inherit;opacity:.8}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.tog span,:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.c-red span{color:#b8352b}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.on{background:#62c99b}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.on span{color:#1f1d1b}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.push{background:#d6b96c}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.push span{color:#1f1d1b}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.hot{background:#c9534a;color:#fbf2dc}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.hot span{color:#fbf2dc}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.locked{background:#2c2c2e;color:#8d867a;box-shadow:inset 0 1.500px 0 rgba(255,255,255,.08);transform:none}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.locked span{color:#8d867a}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.nav{background:#eadfbe}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.c-must{background:#d6b96c}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.c-green{background:#3f4d45;color:#e6dcc0}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.c-dark{background:#2c2c2e;color:#e6dcc0;box-shadow:inset 0 1.500px 0 rgba(255,255,255,.1),inset 0 -3px 0 rgba(0,0,0,.3)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.c-red.cut{background:#c9534a;color:#fbf2dc;clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.c-red.cut .ic{left:38%;top:9px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.c-red.cut b{align-self:flex-start;margin-left:6px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.c-red.cut kbd{right:5px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.lcdk{background:#16241c;color:#7ff0a0;box-shadow:inset 0 0 0 2px #0a1710}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.lcdk em{position:absolute;top:10px;left:0;right:0;text-align:center;font:700 20px/1 var(--font-num);font-style:normal}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.space{grid-column:span 3;flex-direction:row;align-items:center;justify-content:center;gap:8px;padding:0;background:var(--acc);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.18)}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.space .ic{position:static;margin:0;width:18px;height:18px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-key.space b{font:900 11px/1 var(--font-head);letter-spacing:.1em}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-keys{clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
/* gauge readout variants on the amber scope */
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber .o{fill:none;stroke:rgb(107 50 0/.3);stroke-width:1.500;stroke-dasharray:3 4}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-amber.g-ring .big{font-size:30px}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-rows{display:flex;flex-direction:column;justify-content:center;gap:9px;height:100%;padding:0 8px;color:#6b3200}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-rows div{display:grid;grid-template-columns:30px 1fr 30px;gap:6px;align-items:center}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-rows b{font:900 9px/1 var(--font-head);letter-spacing:.08em}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-rows u{text-decoration:none;font:700 12px/1 var(--font-num);text-align:right}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-rows span{display:flex;gap:2px}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-rows i{flex:1;height:12px;border-radius:1px;background:rgb(107 50 0/.2)}:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-rows i.on{background:#6b3200}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-digits{display:flex;align-items:center;justify-content:center;gap:12px;height:100%;color:#6b3200}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-digits b{font:700 72px/1 var(--font-num);letter-spacing:-.02em}
:is([data-skin=gadget],[data-skin=pixel],[data-skin=hard]) .gd-digits span{font:700 10.500px/1.5 var(--font-num);letter-spacing:.06em}


/* ═════════ DOODLE — cartoon pinboard ═════════ */
[data-skin=doodle]{--font:"Roboto Slab",Georgia,serif;--font-head:"Roboto Slab",Georgia,serif;--font-num:"Roboto Slab",Georgia,serif;font-weight:600;
  --bg:rgb(241 228 200/var(--alpha));--bg2:#dcc8a4;--line:#3a1a1e;--line2:rgb(58 26 30/.3);--ink:#3a1a1e;--dim:#7d5a52;--acc:#f2683a;--warn:#d98a12;--bad:#e2392f;--good:#4f9a4a;--r:10px;--pad:10px;--scrim:rgba(40,18,22,.62);--ring-fill:1;
  --paper:#f1e4c8;--tan:#cdb596;--wood:#b5713d;--mint:#a9c2b0;--lilac:#b79ad0;--must:#f0b93a;--wob:14px 9px 16px 8px/9px 15px 8px 14px;--sh:4px 5px 0 rgb(58 26 30/.5)}
/* standard widgets and windows in the same hand (used by the other layouts and by all screens) */
[data-skin=doodle] .p,[data-skin=doodle] .win,[data-skin=doodle] .w-res{background:var(--bg);border:3px solid var(--line);border-radius:var(--wob);box-shadow:var(--sh)}
[data-skin=doodle] .w-res{padding:8px}
[data-skin=doodle] .win{border-width:4px;border-radius:22px 12px 24px 10px/12px 22px 10px 20px;transform:rotate(-.4deg)}
[data-skin=doodle] .hd{font:900 11px/1 var(--font-head);letter-spacing:.08em;color:var(--dim)}[data-skin=doodle] .hd b{color:var(--ink);font-weight:900}
[data-skin=doodle] .btn,[data-skin=doodle] .sw{background:#f6ecd2;border:3px solid var(--line);border-radius:9px 6px 10px 5px;font:900 12.500px/1.1 var(--font-head);color:var(--ink);box-shadow:2px 3px 0 var(--line)}
[data-skin=doodle] .btn:hover{background:var(--must);color:var(--ink)}
[data-skin=doodle] .btn.on,[data-skin=doodle] .btn.pri,[data-skin=doodle] .chip.on,[data-skin=doodle] .sw.on{background:var(--must);color:var(--ink);border-color:var(--line)}
[data-skin=doodle] .btn.pri kbd{color:var(--ink)!important;border-color:var(--ink)!important}
[data-skin=doodle] .sw.hot{background:var(--bad);color:#fff}[data-skin=doodle] .sw .lever{display:none}
[data-skin=doodle] .btn .cost{color:#a3330f}
[data-skin=doodle] kbd{border:2px solid var(--line);border-radius:4px;color:var(--ink);font:800 9.500px/1 var(--font)}
[data-skin=doodle] .ro{background:#f6ecd2;border:2.500px solid var(--line);border-radius:8px 5px 9px 4px}[data-skin=doodle] .ro b{font:900 18px/1 var(--font)}
[data-skin=doodle] .ro.warn{background:var(--must)}[data-skin=doodle] .ro.bad{background:var(--bad);color:#fff}[data-skin=doodle] .ro.bad b,[data-skin=doodle] .ro.bad .ic,[data-skin=doodle] .ro.warn b,[data-skin=doodle] .ro.warn .ic{color:inherit}
[data-skin=doodle] .bar{height:11px;border:0;background:none;border-bottom:2px solid var(--line2)}[data-skin=doodle] .bar>i{background:#6a3038;border-radius:3px 7px 4px 8px;bottom:2px}
[data-skin=doodle] .bar.warn>i,[data-skin=doodle] .parts li.dmg .bar>i{background:var(--warn)}[data-skin=doodle] .bar.bad>i,[data-skin=doodle] .parts li.crit .bar>i{background:var(--bad)}
[data-skin=doodle] .g-hub{fill:#f6ecd2;stroke:var(--line);stroke-width:3}[data-skin=doodle] .g-track{stroke:var(--tan);stroke-width:8;stroke-linecap:round}[data-skin=doodle] .g-val{stroke:#6a3038;stroke-width:8;stroke-linecap:round}
[data-skin=doodle] .g-acc{stroke:var(--acc);stroke-width:6}[data-skin=doodle] .g-needle{stroke:var(--bad);stroke-width:5}[data-skin=doodle] .g-tick{stroke:var(--line);stroke-width:2}
[data-skin=doodle] .g-big,[data-skin=doodle] .g-t,[data-skin=doodle] .g-s{font-family:var(--font);font-weight:900}[data-skin=doodle] path[stroke-dasharray]{stroke-dasharray:none}
[data-skin=doodle] .wcard{background:#f6ecd2;border:3px solid var(--line);border-radius:9px 6px 10px 5px}[data-skin=doodle] .wcard.sel{background:var(--must)}[data-skin=doodle] .wcard.firing{background:#f09a8c}[data-skin=doodle] .wcard .n{color:var(--ink)}
[data-skin=doodle] .alert{background:var(--must);color:var(--ink);border:3px solid var(--line);border-radius:8px;font:900 12px/1 var(--font);box-shadow:var(--sh);animation:none}[data-skin=doodle] .alert.bad{background:var(--bad);color:#fff}[data-skin=doodle] .alert.bad small{color:#ffe0d8}
[data-skin=doodle] .w-radio .scr{background:#2e2a2e;color:#f6ecd2;border:3px solid var(--line);border-radius:8px;font:700 12.500px/1.35 var(--font);text-transform:none;letter-spacing:0}[data-skin=doodle] .w-radio .scr .top{color:var(--must)}
[data-skin=doodle] .w-time .go{border-radius:50%;background:var(--bad);border:4px solid var(--line);color:#fff;box-shadow:var(--sh);font:900 11px/1 var(--font)}
[data-skin=doodle] .w-time .clock,[data-skin=doodle] .w-time .spd b{background:var(--bg);border:2.500px solid var(--line);border-radius:7px;padding:3px 7px;font-weight:900}
[data-skin=doodle] .t-warn{color:#9a5a00}[data-skin=doodle] .t-good{color:#2f6f2a}[data-skin=doodle] .t-bad{color:#b3260f}[data-skin=doodle] .t-acc{color:#a3330f}
[data-skin=doodle] .win>header h2{font:900 30px/1 var(--font-head);transform:rotate(-1deg);transform-origin:left}
[data-skin=doodle] .win h3,[data-skin=doodle] .irow .nm b,[data-skin=doodle] .perk b,[data-skin=doodle] .sktabs b{font-weight:900}
[data-skin=doodle] .win .pane{background:#f6ecd2;border:3px solid var(--line);border-radius:var(--wob)}
[data-skin=doodle] .irow,[data-skin=doodle] .perk{background:#f6ecd2;border:0;border-bottom:2.500px solid var(--line);border-left:10px solid var(--cat,var(--line));border-radius:3px 8px 2px 6px}
[data-skin=doodle] .irow:nth-child(even){background:var(--tan);transform:rotate(.2deg)}[data-skin=doodle] .irow .iic{background:none}
[data-skin=doodle] .chip{background:#f6ecd2;border:2.500px solid var(--line);border-radius:7px 4px 8px 3px;font-weight:800}
[data-skin=doodle] .banner{border-radius:16px 8px 0 0;border-bottom:4px solid var(--line)}
[data-skin=doodle] .tt{background:#f6ecd2;border:3px solid var(--line);border-radius:var(--wob);box-shadow:var(--sh);transform:rotate(1.5deg)}
[data-skin=doodle] .cargo>i{border:2.500px solid var(--line);border-radius:7px 4px 8px 3px;background:var(--tan)}[data-skin=doodle] .cargo>i.f{background:#f6ecd2}[data-skin=doodle] .cargo>i.sel{background:var(--must)}
[data-skin=doodle] .fit{border:3px solid var(--line);border-radius:12px;overflow:hidden;transform:rotate(-1.5deg);box-shadow:var(--sh)}[data-skin=doodle] .fit .it{border:2.500px solid #f6ecd2;background:rgb(58 26 30/.5);color:#f6ecd2}
[data-skin=doodle] .mapv,[data-skin=doodle] .dlg .art{border:4px solid #f6ecd2;outline:3px solid var(--line);border-radius:4px;transform:rotate(-1.5deg);box-shadow:var(--sh)}
[data-skin=doodle] .sktabs div.on{border-color:var(--acc);border-bottom-width:5px}
/* ── pinboard pieces ── */
[data-skin=doodle] .hud section,[data-skin=doodle] .hud button{font-family:var(--font);color:var(--ink)}
[data-skin=doodle] .dd-doodle{display:block;width:100%;fill:none;stroke:var(--line);stroke-width:2.600;stroke-linejoin:round;stroke-linecap:round}
[data-skin=doodle] .dd-brush{display:block;height:12px;position:relative;border-bottom:2px solid rgb(58 26 30/.22)}
[data-skin=doodle] .dd-brush i{position:absolute;left:0;top:0;bottom:2px;background:#6a3038;border-radius:3px 8px 4px 9px/4px 5px 6px 3px;transform:skewX(-8deg)}
[data-skin=doodle] .dd-brush.bad i{background:var(--bad)}
[data-skin=doodle] .dd-bolt{position:absolute;width:20px;height:20px;background:var(--lilac);clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);box-shadow:inset 0 0 0 3px var(--line);z-index:2}
[data-skin=doodle] .dd-bolt::after{content:"";position:absolute;inset:6px 8.500px;background:var(--line);box-shadow:0 0 0 0 var(--line);transform:rotate(20deg)}
[data-skin=doodle] .dd-bolt.a{left:5px;top:5px}[data-skin=doodle] .dd-bolt.b{right:5px;top:5px}[data-skin=doodle] .dd-bolt.c{left:5px;bottom:5px}[data-skin=doodle] .dd-bolt.d{right:5px;bottom:5px}
/* truck plate */
[data-skin=doodle] .dd-board{position:relative;width:344px;padding:14px;background:var(--wood) repeating-linear-gradient(4deg,transparent 0 13px,rgb(58 26 30/.16) 13px 15px);border:3px solid var(--line);border-radius:12px 7px 14px 6px;box-shadow:var(--sh);transform:rotate(-1deg);cursor:pointer}
[data-skin=doodle] .dd-plate{background:var(--mint);border:3px solid var(--line);border-radius:8px 12px 6px 10px;padding:10px 14px 12px}
[data-skin=doodle] .dd-plate h4{display:flex;justify-content:space-between;font:900 15px/1 var(--font);text-transform:uppercase;letter-spacing:.03em;color:#f6fff4;text-shadow:1.500px 1.500px 0 var(--line);margin:0 12px 8px}
[data-skin=doodle] .dd-row{display:flex;gap:12px;align-items:center}
[data-skin=doodle] .dd-photo{background:#fbf5e4;border:3px solid var(--line);padding:5px 5px 7px;box-shadow:3px 4px 0 rgb(58 26 30/.4);transform:rotate(-3deg);flex:none}
[data-skin=doodle] .dd-truck .truckfig{width:92px}[data-skin=doodle] .dd-truck .truckfig img{border-radius:0}
[data-skin=doodle] .dd-parts{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
[data-skin=doodle] .dd-parts li{display:grid;grid-template-columns:66px 1fr 22px;gap:6px;align-items:center;font:800 11.500px/1 var(--font)}
[data-skin=doodle] .dd-parts li b{text-align:right;font-weight:900}
[data-skin=doodle] .dd-parts li.dmg .dd-brush i{background:#c9700c}[data-skin=doodle] .dd-parts li.crit .dd-brush i{background:var(--bad)}[data-skin=doodle] .dd-parts li.crit{color:#a3180c}
/* equipment cards */
[data-skin=doodle] .dd-equip{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding-left:6px}
[data-skin=doodle] .dd-cards{display:flex;padding-top:8px}
[data-skin=doodle] .dd-card{position:relative;width:86px;height:112px;margin-right:-8px;background:#f1dfd0;border:3px solid var(--line);border-radius:8px 5px 9px 4px;box-shadow:3px 4px 0 rgb(58 26 30/.45);transform:rotate(var(--rot));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:0 4px 8px}
[data-skin=doodle] .dd-card:hover{transform:rotate(var(--rot)) translateY(-6px);z-index:3}
[data-skin=doodle] .dd-card small{position:absolute;left:6px;top:4px;font:900 13px/1 var(--font)}
[data-skin=doodle] .dd-card .gi{position:absolute;top:14px;left:50%;margin-left:-24px;width:48px}
[data-skin=doodle] .dd-card b{font:900 10.500px/1.05 var(--font);text-transform:uppercase;text-align:center}
[data-skin=doodle] .dd-card em{font:700 9.500px/1 var(--font);font-style:normal;color:var(--dim)}
[data-skin=doodle] .dd-card.sel{background:var(--must);transform:rotate(var(--rot)) translateY(-8px);z-index:2}
[data-skin=doodle] .dd-card.firing{background:#f08a78}[data-skin=doodle] .dd-card.firing em{color:#7a1608}
[data-skin=doodle] .dd-card.empty{background:none;border-style:dashed;box-shadow:none;color:#f6ecd2;justify-content:center;padding:0}[data-skin=doodle] .dd-card.empty b{color:#f6ecd2;text-shadow:1.500px 1.500px 0 var(--line)}[data-skin=doodle] .dd-card.empty small{color:#f6ecd2}
[data-skin=doodle] .dd-dots{display:flex;gap:2px}[data-skin=doodle] .dd-dots i{width:7px;height:7px;border-radius:50%;border:2px solid var(--line)}[data-skin=doodle] .dd-dots i.on{background:var(--line)}
[data-skin=doodle] .dd-plate.sm{display:flex;gap:14px;padding:7px 14px 9px;transform:rotate(1deg);box-shadow:var(--sh)}
/* slot sliders */
[data-skin=doodle] .dd-slot{display:flex;flex-direction:column;align-items:center;gap:4px}
[data-skin=doodle] .dd-slot b{font:900 11px/1 var(--font);text-transform:uppercase;letter-spacing:.04em;color:#f6fff4;text-shadow:1.500px 1.500px 0 var(--line)}
[data-skin=doodle] .dd-slot span{display:block;width:50px;height:13px;background:#5a2a22;border:2.500px solid var(--line);border-radius:4px 7px 5px 8px;position:relative}
[data-skin=doodle] .dd-slot span i{position:absolute;left:-2px;top:-7px;width:18px;height:22px;background:#a9b9dc;border:2.500px solid var(--line);border-radius:4px 6px 3px 5px;box-shadow:inset -3px -3px 0 rgb(58 26 30/.2);transition:left .15s}
[data-skin=doodle] .dd-slot.on span i{left:30px;background:#9ad36a}[data-skin=doodle] .dd-slot.hot span i{background:var(--bad)}
[data-skin=doodle] .dd-slot.locked{opacity:.55}
/* speed disc */
[data-skin=doodle] .dd-speed{width:166px;height:166px;background:#f6ecd2;border:3.500px solid var(--line);border-radius:50% 48% 52% 49%;box-shadow:var(--sh);transform:rotate(-4deg);padding:5px;margin-right:-14px;z-index:2;display:grid;place-items:center}
[data-skin=doodle] .dd-speed svg{width:100%;height:100%;fill:none;stroke:var(--line);stroke-linecap:round}
[data-skin=doodle] .dd-speed .tr{stroke:var(--tan);stroke-width:13}[data-skin=doodle] .dd-speed .vl{stroke:#6a3038;stroke-width:13}[data-skin=doodle] .dd-speed .lm{stroke:var(--bad);stroke-width:13}
[data-skin=doodle] .dd-speed .nd{stroke:var(--bad);stroke-width:6}[data-skin=doodle] .dd-speed circle:not(.tr){fill:var(--line);stroke:none}
[data-skin=doodle] .dd-speed text{fill:var(--ink);stroke:none;font:800 10.500px var(--font);text-transform:uppercase}[data-skin=doodle] .dd-speed text.big{font:900 34px var(--font)}[data-skin=doodle] .dd-speed .mx{fill:var(--bad)}
[data-skin=doodle] .dd-bars{display:flex;flex-direction:column;align-items:center;gap:3px;width:104px}[data-skin=doodle] .dd-bars b{font:900 44px/1 var(--font)}[data-skin=doodle] .dd-bars.big b{font-size:62px}
[data-skin=doodle] .dd-bars u{text-decoration:none;font:800 11px/1 var(--font);text-transform:uppercase}[data-skin=doodle] .dd-bars em{font:800 10.500px/1 var(--font);font-style:normal;color:var(--bad);text-transform:uppercase;margin-top:4px}
[data-skin=doodle] .dd-bars .dd-brush{width:100%}
/* torn list with flags */
[data-skin=doodle] .dd-list{position:relative;width:292px;margin-right:34px;border:3px solid var(--line);border-radius:6px 3px 8px 4px;box-shadow:var(--sh);background:#f6ecd2;transform:rotate(.8deg)}
[data-skin=doodle] .dd-list header{display:flex;align-items:baseline;gap:10px;background:#7a4a50;color:#f6ecd2;padding:6px 12px;font:800 11.500px/1 var(--font);border-bottom:3px solid var(--line)}
[data-skin=doodle] .dd-list header b{font:900 22px/1 var(--font);margin-right:auto}[data-skin=doodle] .dd-list header small{font-size:12px}
[data-skin=doodle] .dd-list header .warn{color:var(--must)}[data-skin=doodle] .dd-list header .bad{color:#ffb0a0}
[data-skin=doodle] .dd-item{position:relative;display:grid;grid-template-columns:84px 1fr;gap:2px 8px;align-items:center;padding:6px 12px 7px}
[data-skin=doodle] .dd-item:nth-child(odd){background:var(--tan)}
[data-skin=doodle] .dd-item b{font:900 16px/1 var(--font);text-transform:uppercase;letter-spacing:.02em}
[data-skin=doodle] .dd-item u{text-decoration:none;font:900 16px/1 var(--font);text-align:right}
[data-skin=doodle] .dd-item .dd-brush{grid-column:1/-1;height:10px;border:0}
[data-skin=doodle] .dd-item.warn u{color:#9a5a00}[data-skin=doodle] .dd-item.warn .dd-brush i{background:#c9700c}
[data-skin=doodle] .dd-item.bad u,[data-skin=doodle] .dd-item.bad b{color:#a3180c}[data-skin=doodle] .dd-item.bad .dd-brush i{background:var(--bad)}
[data-skin=doodle] .dd-flag{position:absolute;right:-36px;top:5px;width:40px;height:32px;display:grid;place-items:center;clip-path:polygon(0 0,100% 8%,84% 50%,100% 92%,0 100%);background:var(--acc);transform:rotate(-4deg);padding-right:8px}
[data-skin=doodle] .dd-item:nth-child(even) .dd-flag{transform:rotate(3deg)}
[data-skin=doodle] .dd-flag.y{background:#e8c94a}[data-skin=doodle] .dd-flag.b{background:#56b9d6}[data-skin=doodle] .dd-flag.r{background:#e2392f}
[data-skin=doodle] .dd-flag .ic{width:17px;height:17px;stroke-width:2.600;color:var(--line)}
/* plank */
[data-skin=doodle] .dd-plank{position:relative;display:flex;align-items:flex-end;gap:16px;padding:9px 36px 11px;background:var(--wood) repeating-linear-gradient(-3deg,transparent 0 11px,rgb(58 26 30/.16) 11px 13px);border:3px solid var(--line);border-radius:7px 12px 6px 10px;box-shadow:var(--sh);transform:rotate(-.7deg)}
[data-skin=doodle] .dd-plank .dd-bolt.a{top:50%;margin-top:-10px}[data-skin=doodle] .dd-plank .dd-bolt.b{top:50%;margin-top:-10px}
[data-skin=doodle] .dd-push{display:flex;flex-direction:column;align-items:center;gap:3px}
[data-skin=doodle] .dd-push span{display:grid;place-items:center;width:34px;height:34px;background:var(--bad);clip-path:polygon(28% 0,72% 0,100% 28%,100% 72%,72% 100%,28% 100%,0 72%,0 28%);box-shadow:inset 0 0 0 3px var(--line)}
[data-skin=doodle] .dd-push .ic{width:17px;height:17px;stroke-width:2.600;color:#fff}
[data-skin=doodle] .dd-push b{font:900 11px/1 var(--font);text-transform:uppercase;color:#f6fff4;text-shadow:1.500px 1.500px 0 var(--line)}
[data-skin=doodle] .dd-push.locked{opacity:.55}[data-skin=doodle] .dd-push.locked span{background:#8d7f78}
/* speech box and note */
[data-skin=doodle] .dd-say{position:relative;display:flex;align-items:flex-end;width:330px}
[data-skin=doodle] .dd-photo.sm{width:66px;padding:4px 4px 6px;transform:rotate(-6deg);margin:0 -10px 4px 0;z-index:2}
[data-skin=doodle] .dd-bubble{flex:1;position:relative;background:#2e2a2e;color:#f6ecd2;border:3px solid var(--line);border-radius:6px 10px 7px 12px;box-shadow:inset 0 0 0 2px #2e2a2e,inset 0 0 0 3.500px var(--must),var(--sh);padding:18px 14px 9px 18px;margin-top:12px}
[data-skin=doodle] .dd-bubble h4{position:absolute;left:-8px;top:-14px;background:var(--must);color:var(--ink);border:3px solid var(--line);padding:4px 22px 4px 10px;font:900 12px/1 var(--font);text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%);transform:rotate(-2deg)}
[data-skin=doodle] .dd-bubble p{font:700 12.500px/1.35 var(--font);color:#f6ecd2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
[data-skin=doodle] .dd-bubble button{display:flex;align-items:center;gap:4px;margin:5px 0 0 auto;color:var(--must)!important;font:900 10.500px/1 var(--font)!important;text-transform:uppercase}[data-skin=doodle] .dd-bubble button .ic{width:13px;height:13px}
[data-skin=doodle] .dd-note{position:relative;width:300px;background:#fbf5e4 repeating-linear-gradient(transparent 0 19px,rgb(86 185 214/.5) 19px 20px);background-position:0 30px;border:3px solid var(--line);border-radius:3px 6px 4px 8px;box-shadow:var(--sh);padding:9px 12px 8px 30px;transform:rotate(1.600deg);cursor:pointer}
[data-skin=doodle] .dd-note::before{content:"";position:absolute;left:21px;top:0;bottom:0;border-left:2px solid rgb(226 57 47/.55)}
[data-skin=doodle] .dd-note h4{font:900 13px/1 var(--font);text-transform:uppercase;margin-bottom:8px}
[data-skin=doodle] .dd-note li{font:700 12px/20px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin=doodle] .dd-note li time{font-weight:900;margin-right:6px;color:var(--dim)}
[data-skin=doodle] .dd-note li.bad{color:#b3260f}[data-skin=doodle] .dd-note li.good{color:#2f6f2a}[data-skin=doodle] .dd-note li.warn{color:#9a5a00}
[data-skin=doodle] .dd-tape{position:absolute;left:50%;top:-11px;width:78px;height:20px;margin-left:-39px;background:rgb(240 185 58/.85);border:2px solid rgb(58 26 30/.55);transform:rotate(-3deg)}
/* map and photos */
[data-skin=doodle] .dd-map{position:relative;width:300px;background:#efe3bd radial-gradient(circle at 20% 30%,rgb(181 113 61/.18) 0 14px,transparent 15px),#efe3bd;border:3px solid var(--line);border-radius:5px 9px 4px 10px;box-shadow:var(--sh);padding:6px;transform:rotate(-2deg);cursor:pointer}
[data-skin=doodle] .dd-map svg{display:block;width:100%;fill:none;stroke:var(--line);stroke-width:2.400;stroke-linecap:round;stroke-linejoin:round}
[data-skin=doodle] .dd-map .blob{fill:rgb(125 90 82/.35);stroke:none}[data-skin=doodle] .dd-map .b2{fill:rgb(205 181 150/.9)}
[data-skin=doodle] .dd-map .route{stroke-width:4;stroke-dasharray:9 8;stroke:#6a3038}[data-skin=doodle] .dd-map .x{stroke:var(--bad);stroke-width:5}
[data-skin=doodle] .dd-map .cactus{stroke:#4f7a4a;stroke-width:4}
[data-skin=doodle] .dd-map .me{fill:var(--acc);stroke-width:2.500}
[data-skin=doodle] .dd-map .mk circle{fill:#fbf5e4}[data-skin=doodle] .dd-map .mk.hostile circle{fill:#f08a78}[data-skin=doodle] .dd-map .mk.friendly circle{fill:#a9d39a}
[data-skin=doodle] .dd-map text{fill:var(--ink);stroke:none;font:900 11px var(--font)}
[data-skin=doodle] .dd-map .rose circle{fill:#fbf5e4}[data-skin=doodle] .dd-map .rose path{stroke-width:1.600}[data-skin=doodle] .dd-map .rose .nd{fill:var(--bad);stroke-width:1.500}
[data-skin=doodle] .dd-pin{position:absolute;right:14px;top:-10px;width:24px;height:24px;border-radius:50%;background:#8fa8c8;border:3px solid var(--line);box-shadow:inset -3px -3px 0 rgb(58 26 30/.25),2px 3px 0 rgb(58 26 30/.4);z-index:2}
[data-skin=doodle] .dd-mugs{display:flex;justify-content:flex-end;padding-right:8px;margin-top:-6px}
[data-skin=doodle] .dd-photo.mug{position:relative;width:96px;margin-left:-6px;transform:rotate(var(--rot));cursor:pointer}
[data-skin=doodle] .dd-photo.mug .dd-doodle{background:#cfd9dc}[data-skin=doodle] .dd-photo.mug.hostile .dd-doodle{background:#efb5a6}[data-skin=doodle] .dd-photo.mug.friendly .dd-doodle{background:#c5dfb8}
[data-skin=doodle] .dd-photo.mug figcaption{display:flex;flex-direction:column;gap:2px;padding-top:4px;font:800 9.500px/1 var(--font)}
[data-skin=doodle] .dd-photo.mug figcaption b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:900}[data-skin=doodle] .dd-photo.mug figcaption u{text-decoration:none;color:var(--dim)}
[data-skin=doodle] .dd-photo.mug .n{position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;background:var(--must);border:2.500px solid var(--line);display:grid;place-items:center;font:900 10.500px/1 var(--font)}
[data-skin=doodle] .dd-photo.mug.sel{transform:rotate(var(--rot)) translateY(-8px) scale(1.060);z-index:2}
[data-skin=doodle] .stamp{position:absolute;right:-6px;top:22px;font:900 9.500px/1 var(--font);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--bad);border:2.500px solid var(--bad);border-radius:4px;padding:2px 4px;transform:rotate(-14deg);background:rgb(251 245 228/.75)}
/* tabs and the turn bolt */
[data-skin=doodle] .dd-tabs{display:flex;gap:4px;align-items:flex-end}
[data-skin=doodle] .dd-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:52px;height:66px;background:var(--tan);border:3px solid var(--line);border-bottom-width:5px;border-radius:9px 7px 3px 3px;box-shadow:2px 3px 0 rgb(58 26 30/.4)}
[data-skin=doodle] .dd-tab:nth-child(even){transform:rotate(1.500deg)}[data-skin=doodle] .dd-tab:nth-child(odd){transform:rotate(-1deg)}
[data-skin=doodle] .dd-tab:hover,[data-skin=doodle] .dd-tab.on{background:var(--must);height:74px}
[data-skin=doodle] .dd-tab .ic{width:22px;height:22px;stroke-width:2.400}[data-skin=doodle] .dd-tab b{font:900 8.500px/1 var(--font);text-transform:uppercase}
[data-skin=doodle] .dd-go{width:96px;height:96px;margin-left:8px;background:var(--line);clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);padding:5px;transform:rotate(6deg)}
[data-skin=doodle] .dd-go span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:100%;background:var(--bad);clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);box-shadow:inset -6px -8px 0 rgb(58 26 30/.22);color:#fff}
[data-skin=doodle] .dd-go:hover span{background:#f2683a}
[data-skin=doodle] .dd-go .ic{width:30px;height:30px;color:var(--line)}[data-skin=doodle] .dd-go b{font:900 11px/1 var(--font);text-transform:uppercase;color:var(--line)}
/* task card and ribbons */
[data-skin=doodle] .dd-task{position:relative;width:268px;background:#fbf5e4;border:3px solid var(--line);border-radius:4px 9px 5px 10px;box-shadow:var(--sh);padding:12px 14px 12px;transform:rotate(-1.800deg);margin:6px 0 0 6px}
[data-skin=doodle] .dd-task h4{font:900 14px/1 var(--font);text-transform:uppercase;margin-bottom:8px;padding-bottom:6px;border-bottom:2.500px dashed var(--line2)}
[data-skin=doodle] .dd-task p{display:flex;justify-content:space-between;gap:8px;font:700 12px/1.5 var(--font)}[data-skin=doodle] .dd-task p b{color:#a3330f;font-weight:900;white-space:nowrap}
[data-skin=doodle] .dd-clip{position:absolute;left:22px;top:-13px;width:16px;height:36px;border:3px solid #6f7f93;border-radius:8px;border-bottom-color:transparent;transform:rotate(8deg)}
[data-skin=doodle] .dd-tag{display:flex;align-items:center;gap:7px;margin-top:9px;padding:7px 26px 7px 12px;background:var(--acc);border:0;font:900 12.500px/1 var(--font)!important;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);box-shadow:inset 0 0 0 3px var(--line)}
[data-skin=doodle] .dd-tag:hover{background:var(--must)}
[data-skin=doodle] .dd-ribbons{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:6px}
[data-skin=doodle] .dd-ribbon{display:flex;align-items:center;gap:7px;padding:7px 30px;background:var(--must);color:var(--ink);font:900 13px/1 var(--font);text-transform:uppercase;letter-spacing:.03em;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%);transform:rotate(var(--rot));box-shadow:inset 0 3px 0 var(--line),inset 0 -3px 0 var(--line)}
[data-skin=doodle] .dd-ribbon small{font:700 11px/1 var(--font);text-transform:none;letter-spacing:0;opacity:.85}
[data-skin=doodle] .dd-ribbon.bad{background:var(--bad);color:#fff}
[data-skin=doodle] .dd-ribbon .ic{width:16px;height:16px;stroke-width:2.600}
[data-skin=doodle][data-layout=pinboard] .tr{gap:0;align-items:flex-end}[data-skin=doodle][data-layout=pinboard] .br{gap:12px}[data-skin=doodle][data-layout=pinboard] .bl{gap:12px}
[data-skin=doodle][data-layout=pinboard] .bc{align-items:center;gap:10px}

[data-skin=doodle] .dd-map{background:radial-gradient(circle at 78% 62%,rgb(205 181 150/.9) 0 30px,transparent 31px),radial-gradient(circle at 22% 70%,rgb(181 113 61/.16) 0 22px,transparent 23px),#efe3bd}
[data-skin=doodle] .irow{grid-template-columns:34px 1fr auto auto 106px}
[data-skin=doodle] .irow .btn{padding:3px 8px;box-shadow:2px 2px 0 var(--line)}

/* DOODLE: no wood — cartoon scrap-metal plates: riveted steel, rust blots, weld seams, hazard tape */
[data-skin=doodle]{--steel:#6f7d86;--steel2:#8b989f;--rust:#b5562a;
  --rivets:radial-gradient(circle,#3a1a1e 0 2.200px,#c9d2d6 2.600px 4.200px,#3a1a1e 4.600px 5.400px,transparent 5.800px)}
[data-skin=doodle] .dd-board{background:
  radial-gradient(ellipse 46px 26px at 12% 88%,var(--rust) 0 60%,#8f3f1c 61% 72%,transparent 73%),
  radial-gradient(ellipse 34px 20px at 93% 14%,var(--rust) 0 58%,#8f3f1c 59% 72%,transparent 73%),
  radial-gradient(ellipse 18px 12px at 70% 96%,#8f3f1c 0 70%,transparent 71%),
  linear-gradient(100deg,transparent 0 61%,rgb(58 26 30/.55) 61% 61.800%,transparent 61.800%),
  linear-gradient(8deg,transparent 0 30%,rgb(255 255 255/.12) 30% 30.600%,transparent 30.600%),
  linear-gradient(-14deg,transparent 0 72%,rgb(255 255 255/.1) 72% 72.500%,transparent 72.500%),
  var(--steel);border-radius:6px 12px 5px 14px;padding:16px 14px 14px}
[data-skin=doodle] .dd-board::before{content:"";position:absolute;left:34px;right:34px;top:3px;height:8px;background:repeating-linear-gradient(-45deg,#f0b93a 0 9px,#3a1a1e 9px 18px);border:2px solid var(--line);border-radius:2px}
[data-skin=doodle] .dd-board::after{content:"";position:absolute;right:-9px;bottom:26px;width:54px;height:40px;background:var(--steel2);border:3px solid var(--line);border-radius:4px 7px 3px 6px;transform:rotate(7deg);
  background-image:var(--rivets),var(--rivets),var(--rivets),var(--rivets);background-size:12px 12px;background-repeat:no-repeat;background-position:2px 2px,calc(100% - 2px) 2px,2px calc(100% - 2px),calc(100% - 2px) calc(100% - 2px);background-color:var(--steel2)}
[data-skin=doodle] .dd-bolt{background:#c9d2d6}
[data-skin=doodle] .dd-plate{background:
  radial-gradient(ellipse 22px 12px at 96% 92%,rgb(181 86 42/.75) 0 65%,transparent 66%),
  linear-gradient(170deg,transparent 0 48%,rgb(58 26 30/.18) 48% 48.700%,transparent 48.700%),#b9c6c1;border-radius:5px 9px 4px 8px}
[data-skin=doodle] .dd-plate h4,[data-skin=doodle] .dd-slot b,[data-skin=doodle] .dd-push b{color:#f6f1e2}
[data-skin=doodle] .dd-plank{background:
  repeating-linear-gradient(-45deg,#f0b93a 0 9px,#3a1a1e 9px 18px) left/26px 100% no-repeat,
  repeating-linear-gradient(-45deg,#f0b93a 0 9px,#3a1a1e 9px 18px) right/26px 100% no-repeat,
  radial-gradient(ellipse 40px 16px at 30% 100%,var(--rust) 0 62%,#8f3f1c 63% 74%,transparent 75%),
  radial-gradient(ellipse 26px 12px at 74% 0%,#8f3f1c 0 70%,transparent 71%),
  linear-gradient(96deg,transparent 0 52%,rgb(58 26 30/.5) 52% 52.600%,transparent 52.600%),
  var(--steel);border-radius:4px 8px 5px 9px;padding:9px 44px 11px}
[data-skin=doodle] .dd-plank .dd-bolt.a{left:3px}[data-skin=doodle] .dd-plank .dd-bolt.b{right:3px}
[data-skin=doodle] .dd-slot span{background:#2b3237}
[data-skin=doodle] .dd-slot span i{background:#d5dbde}
[data-skin=doodle] .dd-plate.sm{background:
  radial-gradient(ellipse 18px 10px at 6% 10%,rgb(181 86 42/.8) 0 65%,transparent 66%),#b9c6c1}
[data-skin=doodle] .dd-board::after{right:-16px;bottom:-8px;width:44px;height:34px;transform:rotate(9deg);z-index:3}
[data-skin=doodle] .dd-board .dd-bolt.d{display:none}
[data-skin=doodle] .dd-board{padding:18px 16px 16px}


/* ═════════ PIXEL — the Gadget devices redrawn as chunky pixel hardware (shares the Gadget structure above) ═════════ */
[data-skin=pixel]{--font:"Press Start 2P","Courier New",monospace;--font-head:"Press Start 2P","Courier New",monospace;--font-num:"Press Start 2P","Courier New",monospace;font-weight:400;
  --navy:#0f2a3f;--teal:#0f6b5c;--green:#1fa37a;--mint:#c8f0b8;--yel:#f2d23c;--org:#f2683a;
  --bg:rgb(31 163 122/var(--alpha));--bg2:#178f6c;--line:#0f2a3f;--line2:rgb(15 42 63/.45);--ink:#0f2a3f;--dim:#0f4f4a;--acc:#f2683a;--warn:#f2d23c;--bad:#f2683a;--good:#c8f0b8;--r:0px;--scrim:rgba(8,22,34,.72);
  --scr:#0f2a3f;--scr-ink:#c8f0b8;--lcd:#c8f0b8;--key:#0f6b5c;--cap:#c8f0b8;
  --case:inset -4px -4px 0 #0f6b5c,inset 4px 4px 0 #5fd0a0,4px 4px 0 #0f2a3f;--dith:repeating-conic-gradient(rgb(15 107 92/.5) 0 25%,transparent 0 50%)}
[data-skin=pixel] .hud *,[data-skin=pixel] .overlay *{font-family:"Press Start 2P","Courier New",monospace!important;font-size:8px!important;line-height:1.500!important;letter-spacing:0!important;font-weight:400!important;font-style:normal!important;border-radius:0!important;text-shadow:none!important;font-variation-settings:normal}
[data-skin=pixel] svg{shape-rendering:crispEdges}
[data-skin=pixel] .gi{background-image:var(--px-items,url(assets/items.svg));image-rendering:pixelated}
[data-skin=pixel] .gi.ch{background-image:var(--px-chassis,url(assets/chassis.png))}
[data-skin=pixel] .truckfig img,[data-skin=pixel] .fit img{content:var(--px-truck,url(assets/truck-top.jpg));image-rendering:pixelated}
[data-skin=pixel] .banner{background-image:var(--px-gate,url(assets/art-bowl-gate.jpg))!important;image-rendering:pixelated}
[data-skin=pixel] .dlg .art{background-image:var(--px-seat,url(assets/art-seat.jpg))!important;image-rendering:pixelated}
/* casings */
[data-skin=pixel] .gd-dev,[data-skin=pixel] .p,[data-skin=pixel] .w-res,[data-skin=pixel] .w-switches:not(.round),[data-skin=pixel] .w-nav:not(.rail),[data-skin=pixel] .win{background:var(--bg) var(--dith) 0 0/4px 4px;border:4px solid var(--navy);box-shadow:var(--case)}
[data-skin=pixel] .gd-dev{padding:14px 12px 16px}
[data-skin=pixel] .gd-dev::before{content:"";position:absolute;right:26px;top:0;width:12px;height:10px;background:linear-gradient(90deg,var(--yel) 0 4px,transparent 4px 8px,var(--yel) 8px);z-index:1}
[data-skin=pixel] .p::before{display:none}
[data-skin=pixel] .gd-dev>header{font-size:8px!important;margin-bottom:8px;color:var(--navy)}
[data-skin=pixel] .gd-dev>header span{background:var(--navy);color:var(--mint);border:0;padding:3px 5px}
[data-skin=pixel] .gd-gauge{box-shadow:inset 0 0 0 4px var(--yel),inset 0 0 0 8px var(--navy),4px 4px 0 var(--navy);padding:18px 16px}
[data-skin=pixel] .gd-console{background:var(--bg) var(--dith) 0 0/4px 4px}
[data-skin=pixel] .gd-console::after{background:var(--green);border-width:4px;left:-10px;width:6px}
[data-skin=pixel] .gd-cap{background:linear-gradient(90deg,var(--yel) 0 8px,#b99a1c 8px 12px,var(--yel) 12px 40px,#b99a1c 40px 44px,var(--yel) 44px);border-width:4px;top:-16px;height:12px}
/* screens */
[data-skin=pixel] .gd-screen,[data-skin=pixel] .w-radio .scr{background:var(--navy);color:var(--mint);border:4px solid var(--navy);box-shadow:inset 0 0 0 2px #1d4a5c;text-transform:uppercase}
[data-skin=pixel] .gd-screen footer{color:var(--yel)}[data-skin=pixel] .gd-screen footer>span:first-child{color:#5fd0a0}
[data-skin=pixel] .gd-amber{background:var(--mint);box-shadow:inset 4px 4px 0 #8fc48a;border-width:4px}
[data-skin=pixel] .gd-amber svg{stroke:var(--navy)}[data-skin=pixel] .gd-amber circle,[data-skin=pixel] .gd-amber text{fill:var(--navy)}
[data-skin=pixel] .gd-amber .tr{stroke:rgb(15 42 63/.22);stroke-width:8}[data-skin=pixel] .gd-amber .vl{stroke-width:8;stroke-linecap:butt}[data-skin=pixel] .gd-amber .lm{stroke:var(--org);stroke-width:8;stroke-linecap:butt}
[data-skin=pixel] .gd-amber .nd{stroke-width:4;stroke-linecap:butt}[data-skin=pixel] .gd-amber .o{fill:none}
[data-skin=pixel] .gd-amber text.big{font-size:24px!important;stroke:var(--mint);stroke-width:6px}
[data-skin=pixel] .gd-rows,[data-skin=pixel] .gd-digits{color:var(--navy)}[data-skin=pixel] .gd-rows i{background:rgb(15 42 63/.2)}[data-skin=pixel] .gd-rows i.on{background:var(--navy)}
[data-skin=pixel] .gd-digits b{font-size:40px!important;line-height:1!important}
[data-skin=pixel] .gd-radar{background:var(--navy);box-shadow:inset 0 0 0 2px #1d4a5c;border-width:4px}
[data-skin=pixel] .gd-radar svg{stroke:#1fa37a;stroke-width:2}[data-skin=pixel] .gd-radar .sw{fill:rgb(200 240 184/.14)}
[data-skin=pixel] .gd-radar text{fill:var(--mint)}[data-skin=pixel] .gd-radar text.n,[data-skin=pixel] .gd-radar .me{fill:var(--yel)}
[data-skin=pixel] .gd-radar .bl rect{fill:var(--mint)}[data-skin=pixel] .gd-radar .bl.hostile rect{fill:var(--org)}[data-skin=pixel] .gd-radar .bl .rg{stroke:var(--org);stroke-width:2}
[data-skin=pixel] .gd-lcd,[data-skin=pixel] .w-log ul{background:var(--mint);color:var(--navy);border:4px solid var(--navy);box-shadow:inset 4px 4px 0 #8fc48a}
[data-skin=pixel] .gd-lcd header,[data-skin=pixel] .gd-lcd li.sel,[data-skin=pixel] .w-log li:first-child{background:var(--navy);color:var(--mint)}
[data-skin=pixel] .gd-lcd li.hostile{color:#a3330f}[data-skin=pixel] .gd-lcd li.friendly{color:var(--teal)}[data-skin=pixel] .gd-lcd li.sel{color:var(--yel)}
[data-skin=pixel] .gd-stick .gd-lcd li.bad{color:#a3330f}[data-skin=pixel] .gd-stick .gd-lcd li.good{color:var(--teal)}[data-skin=pixel] .gd-stick .gd-lcd li.warn{color:#7a5a00}
[data-skin=pixel] .gd-cells div,[data-skin=pixel] .ro{background:var(--mint);color:var(--navy);border:2px solid var(--navy);box-shadow:inset 2px 2px 0 #8fc48a}
[data-skin=pixel] .gd-cells .warn,[data-skin=pixel] .ro.warn{background:var(--yel)}[data-skin=pixel] .gd-cells .bad,[data-skin=pixel] .ro.bad{background:var(--org);color:var(--navy)}
[data-skin=pixel] .ro b,[data-skin=pixel] .ro .ic,[data-skin=pixel] .ro u,[data-skin=pixel] .ro .lbl{color:var(--navy)!important}
/* LED strips */
[data-skin=pixel] .gd-led i{width:6px;height:6px;background:rgb(15 42 63/.3)}[data-skin=pixel] .gd-led i.on{background:var(--mint)}
[data-skin=pixel] .gd-parts .gd-led i{width:4px;height:8px}
[data-skin=pixel] .gd-parts li.dmg{color:#5a3a00}[data-skin=pixel] .gd-parts li.dmg .gd-led i.on{background:var(--yel)}
[data-skin=pixel] .gd-parts li.crit{color:#7a1a00}[data-skin=pixel] .gd-parts li.crit .gd-led i.on{background:var(--org)}
[data-skin=pixel] .gd-parts li{grid-template-columns:1fr auto 26px;gap:4px}[data-skin=pixel] .gd-parts li span{overflow:hidden;text-overflow:clip;white-space:nowrap}
[data-skin=pixel] .gd-vled span{background:var(--navy);border:2px solid var(--navy);padding:2px}[data-skin=pixel] .gd-vled i{background:#1d4a5c;width:16px;height:6px}
[data-skin=pixel] .gd-vled i.on{background:var(--mint)}[data-skin=pixel] .gd-vled.warn i.on{background:var(--yel)}[data-skin=pixel] .gd-vled.bad i.on{background:var(--org)}
[data-skin=pixel] .gd-vled.bad u{color:#7a1a00}
[data-skin=pixel] .gd-truck .truckfig{box-shadow:0 0 0 4px var(--yel),0 0 0 8px var(--navy);border:0;margin:8px}
[data-skin=pixel] .gd-truck,[data-skin=pixel] .gd-equip{width:340px}
/* tiles and keys */
[data-skin=pixel] .gd-grid,[data-skin=pixel] .gd-keys{background:var(--navy);border:4px solid var(--navy);gap:4px;clip-path:none}
[data-skin=pixel] .gd-tile,[data-skin=pixel] .gd-key{background:var(--mint);color:var(--navy);box-shadow:inset -4px -4px 0 #8fc48a,inset 4px 4px 0 #eafbe0}
[data-skin=pixel] .gd-key:active{box-shadow:inset 4px 4px 0 #8fc48a;transform:none}
[data-skin=pixel] .gd-tile b,[data-skin=pixel] .gd-key b{font-size:8px!important;transform:scale(.75);white-space:nowrap}
[data-skin=pixel] .gd-tile small,[data-skin=pixel] .gd-key small{transform:scale(.75);transform-origin:left top;opacity:.7}
[data-skin=pixel] .gd-key kbd{transform:scale(.75);transform-origin:right top}
[data-skin=pixel] .gd-tile em{transform:scale(.75);opacity:.8}
[data-skin=pixel] .gd-key>span.ring{border:2px solid currentColor}
[data-skin=pixel] .gd-key.tog span,[data-skin=pixel] .gd-key.c-red span{color:var(--teal)}
[data-skin=pixel] .gd-key.on,[data-skin=pixel] .gd-tile.wpn.sel{background:var(--yel);box-shadow:inset -4px -4px 0 #b99a1c,inset 4px 4px 0 #fff3a8}[data-skin=pixel] .gd-key.on span{color:var(--navy)}
[data-skin=pixel] .gd-key.push,[data-skin=pixel] .gd-key.c-must,[data-skin=pixel] .gd-tile.wpn.util{background:#5fd0a0;box-shadow:inset -4px -4px 0 #1fa37a,inset 4px 4px 0 #a8f0cc}
[data-skin=pixel] .gd-key.hot,[data-skin=pixel] .gd-tile.wpn.firing,[data-skin=pixel] .gd-key.c-red.cut,[data-skin=pixel] .gd-tile.crit{background:var(--org);color:var(--navy);box-shadow:inset -4px -4px 0 #a3330f,inset 4px 4px 0 #ffb08a}
[data-skin=pixel] .gd-key.hot span{color:var(--navy)}
[data-skin=pixel] .gd-key.c-red.cut{clip-path:none}[data-skin=pixel] .gd-key.c-red.cut .ic{left:50%}[data-skin=pixel] .gd-key.c-red.cut b{align-self:center;margin:0}
[data-skin=pixel] .gd-key.locked,[data-skin=pixel] .gd-key.c-dark,[data-skin=pixel] .gd-tile.socket,[data-skin=pixel] .gd-tile.dark,[data-skin=pixel] .gd-key.c-green{background:var(--teal);color:var(--mint);box-shadow:inset -4px -4px 0 #0a4a40,inset 4px 4px 0 #178f6c}
[data-skin=pixel] .gd-key.locked,[data-skin=pixel] .gd-key.locked span{color:#5fb89a}
[data-skin=pixel] .gd-tile.dmg{background:var(--yel)}
[data-skin=pixel] .gd-tile .hole{background:var(--navy);border:4px solid #0a4a40;box-shadow:inset 0 0 0 4px #178f6c}
[data-skin=pixel] .gd-tile.wpn.firing .gd-pips i{border-color:var(--navy)}[data-skin=pixel] .gd-tile.wpn.firing .gd-pips i.on{background:var(--navy)}
[data-skin=pixel] .gd-pips i{width:6px;height:6px;border:2px solid var(--navy)}
[data-skin=pixel] .gd-key.lcdk{background:var(--navy);color:var(--mint);box-shadow:inset 0 0 0 2px #1d4a5c}[data-skin=pixel] .gd-key.lcdk em{font-size:16px!important;top:10px}
[data-skin=pixel] .gd-key.space,[data-skin=pixel] .gd-space,[data-skin=pixel] .w-time .go{background:var(--org);color:var(--navy);border:0;box-shadow:inset -4px -4px 0 #a3330f,inset 4px 4px 0 #ffb08a}
[data-skin=pixel] .gd-space{border:4px solid var(--navy)}
[data-skin=pixel] .gd-key.sm{background:var(--teal);color:var(--mint);box-shadow:inset -4px -4px 0 #0a4a40,inset 4px 4px 0 #178f6c;border:2px solid var(--navy)}
[data-skin=pixel] .gd-mini{background:var(--mint);border:2px solid var(--navy);box-shadow:2px 2px 0 var(--navy)}
[data-skin=pixel] .gd-slide{color:var(--navy)!important}
[data-skin=pixel] .gd-slide i{background:var(--navy);border:2px solid var(--navy)}[data-skin=pixel] .gd-slide i::after{background:var(--org)}[data-skin=pixel] .gd-slide.on i::after{background:var(--mint)}
[data-skin=pixel] .gd-lamp{background:#0a4a40;border:2px solid var(--navy)}[data-skin=pixel] .gd-lamp.on{background:var(--yel);box-shadow:none}
[data-skin=pixel] .gd-knob2{background:var(--yel);border:4px solid var(--navy);box-shadow:inset -4px -4px 0 #b99a1c,inset 0 0 0 8px var(--yel),inset 0 0 0 16px var(--org)}
[data-skin=pixel] .gd-grille{background:var(--navy) repeating-conic-gradient(#1fa37a 0 25%,transparent 0 50%) 0 0/8px 8px;border:2px solid var(--navy)}
[data-skin=pixel] .gd-round{border:2px solid var(--navy);box-shadow:2px 2px 0 var(--navy)}[data-skin=pixel] .gd-round.g{background:var(--mint)}[data-skin=pixel] .gd-round.o{background:var(--org)}
[data-skin=pixel] .gd-plug{background:#8fa8b8;border-width:4px}
[data-skin=pixel] .gd-sticker{background:var(--yel);color:var(--navy);box-shadow:0 0 0 4px var(--navy),4px 4px 0 4px rgb(15 42 63/.5);transform:none!important;padding:8px 10px}
[data-skin=pixel] .gd-sticker.bad{background:var(--org);color:var(--navy)}
[data-skin=pixel] .gd-pager .gd-lcd li b{color:#a3330f}
[data-skin=pixel] .gd-stick{padding:10px 12px 12px}
/* the standard widgets and windows, pixel-cut */
[data-skin=pixel] .btn,[data-skin=pixel] .chip,[data-skin=pixel] .irow,[data-skin=pixel] .perk,[data-skin=pixel] .wcard,[data-skin=pixel] .cargo>i.f,[data-skin=pixel] .tt{background:var(--mint);color:var(--navy);border:2px solid var(--navy);box-shadow:2px 2px 0 var(--navy)}
[data-skin=pixel] .btn.on,[data-skin=pixel] .btn.pri,[data-skin=pixel] .chip.on,[data-skin=pixel] .wcard.sel,[data-skin=pixel] .cargo>i.sel{background:var(--yel);color:var(--navy)}
[data-skin=pixel] .w-nav .btn,[data-skin=pixel] .w-nav .btn:nth-child(n){background:var(--teal);color:var(--mint)}
[data-skin=pixel] .win{box-shadow:inset 0 0 0 4px var(--yel),inset 0 0 0 8px var(--navy),8px 8px 0 var(--navy);background-color:var(--green)}
[data-skin=pixel] .win>header h2,[data-skin=pixel] .dlg .txt h3{font-size:16px!important;color:var(--navy)}
[data-skin=pixel] .win .pane{background:var(--bg2);border:4px solid var(--navy);box-shadow:inset 4px 4px 0 #0f6b5c}
[data-skin=pixel] .win p{color:var(--navy);line-height:2!important}
[data-skin=pixel] .irow{border-left:8px solid var(--cat,var(--navy))}
[data-skin=pixel] .cargo>i{background:var(--teal);border:2px solid var(--navy)}
[data-skin=pixel] .fit{box-shadow:0 0 0 4px var(--yel),0 0 0 8px var(--navy);border:0}
[data-skin=pixel] .fit .it{border:2px solid var(--mint);color:var(--mint);background:rgb(15 42 63/.55)}
[data-skin=pixel] .bar{background:var(--navy);border:0}[data-skin=pixel] .bar>i{background:var(--mint)}[data-skin=pixel] .bar.warn>i{background:var(--yel)}[data-skin=pixel] .bar.bad>i{background:var(--org)}
[data-skin=pixel] .alert{background:var(--yel);color:var(--navy);border:4px solid var(--navy);box-shadow:4px 4px 0 var(--navy)}[data-skin=pixel] .alert.bad{background:var(--org);color:var(--navy)}[data-skin=pixel] .alert small{color:var(--navy)}
[data-skin=pixel] .t-warn,[data-skin=pixel] .t-acc,[data-skin=pixel] .btn .cost{color:#7a3a00}[data-skin=pixel] .t-good{color:var(--teal)}[data-skin=pixel] .t-bad{color:#a3330f}[data-skin=pixel] .t-dim{color:#0f4f4a}
[data-skin=pixel] .hd{color:var(--navy)}
[data-skin=pixel] kbd{border:2px solid currentColor;color:inherit;padding:1px 2px}
[data-skin=pixel] .gd-key kbd{border:0}
[data-skin=pixel] .irow{grid-template-columns:34px 1fr auto auto 116px}
[data-skin=pixel] .mapv svg text{font-size:8px!important}
[data-skin=pixel] .gd-truck,[data-skin=pixel] .gd-equip{width:364px}
[data-skin=pixel] .gd-parts .gd-led{gap:1px}[data-skin=pixel] .gd-parts .gd-led i{width:3px}
[data-skin=pixel] .gd-screen footer span+span{display:none}
[data-skin=pixel] .gd-screen footer{white-space:nowrap}


/* PIXEL, second pass: not everything in boxes — round things are drawn as real pixel art, casings get pixel-cut corners */
[data-skin=pixel]{--pxo:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy);
  --case:inset -4px -4px 0 #0f6b5c,inset 4px 4px 0 #5fd0a0,var(--pxo),4px 8px 0 rgb(15 42 63/.45),8px 4px 0 rgb(15 42 63/.45)}
[data-skin=pixel] .gd-dev,[data-skin=pixel] .p,[data-skin=pixel] .w-res,[data-skin=pixel] .w-switches:not(.round),[data-skin=pixel] .w-nav:not(.rail){border:0;margin:4px}
[data-skin=pixel] .win{border:0;box-shadow:inset 0 0 0 4px var(--yel),inset 0 0 0 8px var(--navy),var(--pxo),8px 12px 0 rgb(15 42 63/.5),12px 8px 0 rgb(15 42 63/.5)}
[data-skin=pixel] .gd-screen,[data-skin=pixel] .gd-lcd,[data-skin=pixel] .w-log ul,[data-skin=pixel] .gd-grid,[data-skin=pixel] .gd-keys,[data-skin=pixel] .gd-amber{border:0;margin:4px;box-shadow:var(--pxo)}
[data-skin=pixel] .gd-screen{box-shadow:inset 0 0 0 2px #1d4a5c,var(--pxo)}
[data-skin=pixel] .gd-lcd,[data-skin=pixel] .w-log ul{box-shadow:inset 4px 4px 0 #8fc48a,var(--pxo)}
[data-skin=pixel] .gd-amber{box-shadow:inset 4px 4px 0 #8fc48a,var(--pxo)}
[data-skin=pixel] .gd-stick .gd-lcd,[data-skin=pixel] .gd-scan .gd-lcd{margin:4px}
/* the speed dial stands on its own, round */
[data-skin=pixel] .gd-gauge.px-open{background:none;box-shadow:none;padding:0;margin:0;gap:10px 14px;align-items:center}
[data-skin=pixel] .gd-gauge.px-open::before{display:none}
[data-skin=pixel] .px-dial{position:relative;width:198px;height:198px}
[data-skin=pixel] .px-dial img,[data-skin=pixel] .gd-radar img{display:block;width:100%;height:100%;image-rendering:pixelated}
[data-skin=pixel] .px-dial b{position:absolute;left:0;right:0;top:112px;text-align:center;font-size:24px!important;line-height:1!important;color:var(--navy)}
[data-skin=pixel] .px-dial b.ring{top:84px}
[data-skin=pixel] .px-dial u,[data-skin=pixel] .px-dial em{position:absolute;left:0;right:0;text-align:center;text-decoration:none;color:var(--navy)}
[data-skin=pixel] .px-dial u{top:142px}[data-skin=pixel] .px-dial em{top:156px;color:#a3330f}
[data-skin=pixel] .px-dial b.ring~u{top:114px}[data-skin=pixel] .px-dial b.ring~em{top:128px}
[data-skin=pixel] .gd-gauge.px-open .gd-strips{background:var(--bg) var(--dith) 0 0/4px 4px;box-shadow:var(--case);padding:10px 10px 8px;margin:4px}
[data-skin=pixel] .gd-gauge.px-open .gd-cells{background:var(--bg) var(--dith) 0 0/4px 4px;box-shadow:var(--case);padding:8px;margin:4px}
/* radar is a round screen, not a boxed one */
[data-skin=pixel] .gd-radar.px-round{background:none;border:0;box-shadow:none;padding:0;width:198px;height:198px}
[data-skin=pixel] .gd-scan{grid-template-columns:198px 54px}
/* small round parts cut the pixel way */
[data-skin=pixel] .gd-knob2{border:0;margin:4px;background:var(--org);box-shadow:inset 0 0 0 8px var(--yel),var(--pxo)}
[data-skin=pixel] .gd-lamp,[data-skin=pixel] .gd-round{border:0;margin:2px;box-shadow:0 -2px 0 var(--navy),0 2px 0 var(--navy),-2px 0 0 var(--navy),2px 0 0 var(--navy)}
[data-skin=pixel] .gd-lamp.on{box-shadow:0 -2px 0 var(--navy),0 2px 0 var(--navy),-2px 0 0 var(--navy),2px 0 0 var(--navy)}
[data-skin=pixel] .gd-key.sm,[data-skin=pixel] .gd-mini,[data-skin=pixel] .gd-space{border:0;margin:2px;box-shadow:inset -4px -4px 0 #0a4a40,inset 4px 4px 0 #178f6c,0 -2px 0 var(--navy),0 2px 0 var(--navy),-2px 0 0 var(--navy),2px 0 0 var(--navy)}
[data-skin=pixel] .gd-mini{box-shadow:0 -2px 0 var(--navy),0 2px 0 var(--navy),-2px 0 0 var(--navy),2px 0 0 var(--navy)}
[data-skin=pixel] .gd-space{box-shadow:inset -4px -4px 0 #a3330f,inset 4px 4px 0 #ffb08a,var(--pxo);margin:4px;width:calc(100% - 8px)}
[data-skin=pixel] .gd-sticker{box-shadow:var(--pxo),4px 8px 0 rgb(15 42 63/.45),8px 4px 0 rgb(15 42 63/.45)}
[data-skin=pixel] .gd-truck .truckfig{box-shadow:0 -4px 0 var(--yel),0 4px 0 var(--yel),-4px 0 0 var(--yel),4px 0 0 var(--yel),0 -8px 0 var(--navy),0 8px 0 var(--navy),-8px 0 0 var(--navy),8px 0 0 var(--navy),-4px -4px 0 var(--navy),4px -4px 0 var(--navy),-4px 4px 0 var(--navy),4px 4px 0 var(--navy)}
[data-skin=pixel] .gd-key.nav:not([class*=c-]),[data-skin=pixel] .gd-tile.wpn:not(.sel):not(.firing):not(.util){background:var(--mint)}


/* ═════════ HARDWARE — the Gadget devices as worn, realistic machinery: gunmetal, brass, olive paint, placards ═════════ */
[data-skin=hard]{--font:"Roboto Slab",Georgia,serif;--font-head:"Roboto Slab",Georgia,serif;--font-num:"Anonymous Pro","Courier New",monospace;font-weight:500;
  --bg:rgb(58 62 64/var(--alpha));--bg2:#2a2d2f;--line:#0e1011;--line2:rgb(233 224 200/.16);--ink:#e9e0c8;--dim:#a39c88;--acc:#e8872e;--warn:#e8b23a;--bad:#d2452c;--good:#9fc46a;--r:6px;--scrim:rgba(8,9,10,.72);
  --scr:#101315;--scr-ink:#ffb347;--lcd:#d8cfb2;--key:#4f5659;--cap:#4a5053;--plac:#d8cfb2;--brass:#b08a45;--olive:#6f7a4a;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --rivet:radial-gradient(circle at 35% 30%,#f3d79a 0 1.200px,#b08a45 1.600px 3px,#3a2c12 3.400px 4.200px,transparent 4.600px);
  --metal:linear-gradient(165deg,rgb(255 255 255/.1),transparent 34%,rgb(0 0 0/.22));
  --case:inset 0 1px 0 rgb(255 255 255/.2),inset 0 -2px 0 rgb(0 0 0/.5),0 0 0 1px #5d6468,0 10px 22px rgb(0 0 0/.55)}
[data-skin=hard] .gd-dev,[data-skin=hard] .p,[data-skin=hard] .w-res,[data-skin=hard] .w-switches:not(.round),[data-skin=hard] .w-nav:not(.rail),[data-skin=hard] .win{
  background:var(--rivet) 6px 6px/10px 10px no-repeat,var(--rivet) calc(100% - 6px) 6px/10px 10px no-repeat,var(--rivet) 6px calc(100% - 6px)/10px 10px no-repeat,var(--rivet) calc(100% - 6px) calc(100% - 6px)/10px 10px no-repeat,var(--grain),var(--metal),var(--bg);
  border:2px solid var(--line);border-radius:8px;box-shadow:var(--case);color:var(--ink)}
[data-skin=hard] .p::before{display:none}
[data-skin=hard] .gd-dev{padding:18px 14px 16px}
[data-skin=hard] .gd-dev>header{margin:0 4px 9px 12px;color:var(--ink)}
[data-skin=hard] .gd-dev>header b{background:var(--plac);color:#1c1a16;padding:4px 9px 3px;border-radius:2px;font:800 10px/1 var(--font-head);letter-spacing:.14em;box-shadow:inset 0 0 0 1px #8d8468,0 1px 2px rgb(0 0 0/.6)}
[data-skin=hard] .gd-dev>header span{background:#0b0c0d;color:#f1e9d2;border:1px solid #000;border-radius:2px;box-shadow:inset 0 1px 3px #000,0 0 0 1px #6b7074;padding:3px 7px;margin-right:8px}
/* tiles and keys: steel plates in a black recess */
[data-skin=hard] .gd-grid,[data-skin=hard] .gd-keys{background:#08090a;border:2px solid #08090a;border-radius:5px;gap:3px;box-shadow:inset 0 2px 5px #000,0 1px 0 rgb(255 255 255/.14);clip-path:none}
[data-skin=hard] .gd-tile,[data-skin=hard] .gd-key{background:var(--grain),linear-gradient(180deg,#5a6165,#3d4346 55%,#33383b);color:var(--ink);border-radius:3px;box-shadow:inset 0 1px 0 rgb(255 255 255/.22),inset 0 -2px 0 rgb(0 0 0/.45),inset 1px 0 0 rgb(255 255 255/.06)}
[data-skin=hard] .gd-key:active{box-shadow:inset 0 2px 4px rgb(0 0 0/.7);transform:translateY(1px)}
[data-skin=hard] .gd-key>span.ring{border-color:currentColor;opacity:.95}
[data-skin=hard] .gd-key.tog span,[data-skin=hard] .gd-key.c-red span{color:var(--acc)}
[data-skin=hard] .gd-key.on{background:var(--grain),linear-gradient(180deg,#ffc266,#e8872e 60%,#b85f10);color:#1c1408;box-shadow:inset 0 1px 0 rgb(255 255 255/.5),inset 0 -2px 0 rgb(0 0 0/.35),0 0 12px rgb(232 135 46/.7)}
[data-skin=hard] .gd-key.on span{color:#1c1408}
[data-skin=hard] .gd-key.push,[data-skin=hard] .gd-tile.wpn.util{background:var(--grain),linear-gradient(180deg,#8a9560,#6f7a4a 55%,#56603a);color:#f1ecd6}[data-skin=hard] .gd-key.push span{color:#f1ecd6}
[data-skin=hard] .gd-key.hot,[data-skin=hard] .gd-tile.wpn.firing,[data-skin=hard] .gd-tile.crit{background:var(--grain),linear-gradient(180deg,#e8644a,#c23a22 60%,#8f2412);color:#fff1e6;box-shadow:inset 0 1px 0 rgb(255 255 255/.35),0 0 12px rgb(210 69 44/.65)}
[data-skin=hard] .gd-key.hot span{color:#fff1e6}
[data-skin=hard] .gd-key.locked,[data-skin=hard] .gd-key.c-dark,[data-skin=hard] .gd-tile.socket,[data-skin=hard] .gd-tile.dark{background:var(--grain),repeating-linear-gradient(-45deg,transparent 0 5px,rgb(0 0 0/.25) 5px 7px),linear-gradient(180deg,#2b2f31,#1c1f21);color:#8b8576;box-shadow:inset 0 1px 0 rgb(255 255 255/.08),inset 0 -2px 0 rgb(0 0 0/.5);transform:none}
[data-skin=hard] .gd-key.locked span{color:#8b8576}[data-skin=hard] .gd-key.c-dark{color:var(--ink)}
[data-skin=hard] .gd-key.nav{background:var(--grain),linear-gradient(180deg,#5a6165,#3d4346 55%,#33383b)}
[data-skin=hard] .gd-key.c-must{background:var(--grain),linear-gradient(180deg,#d1ac62,#b08a45 55%,#86662c);color:#1c1408}
[data-skin=hard] .gd-key.c-green{background:var(--grain),linear-gradient(180deg,#5d6840,#48522f);color:#f1ecd6}
[data-skin=hard] .gd-key.c-red.cut{background:var(--grain),linear-gradient(180deg,#c9573c,#9a3a24);color:#fff1e6;clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
[data-skin=hard] .gd-key.lcdk{background:#08090a;color:var(--scr-ink);box-shadow:inset 0 2px 6px #000,inset 0 0 0 1px #2c2f31}[data-skin=hard] .gd-key.lcdk em{text-shadow:0 0 8px rgb(255 179 71/.7)}
[data-skin=hard] .gd-key.space,[data-skin=hard] .gd-space{background:repeating-linear-gradient(-45deg,transparent 0 12px,rgb(0 0 0/.16) 12px 24px),var(--grain),linear-gradient(180deg,#f3a548,#e8872e 55%,#b9600f);color:#1c1408;border:0;box-shadow:inset 0 1px 0 rgb(255 255 255/.5),inset 0 -3px 0 rgb(0 0 0/.35)}
[data-skin=hard] .gd-space{border:2px solid var(--line);border-radius:4px;box-shadow:inset 0 1px 0 rgb(255 255 255/.5),inset 0 -3px 0 rgb(0 0 0/.35),0 2px 4px rgb(0 0 0/.5)}
[data-skin=hard] .gd-space kbd{color:#1c1408;border-color:#1c1408}
[data-skin=hard] .gd-tile.dmg{background:var(--grain),linear-gradient(180deg,#e8c25a,#c99a2a 60%,#9a7414);color:#1c1408}
[data-skin=hard] .gd-tile.wpn.sel{background:var(--grain),linear-gradient(180deg,#eee6cc,#d8cfb2 60%,#b9ae8c);color:#1c1a16;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #8d8468,0 0 0 1px var(--acc)}
[data-skin=hard] .gd-tile .hole{background:radial-gradient(circle,#050505 0 32%,#3c4144 34% 42%,#0b0c0d 44% 58%,#555b5f 60% 64%,#1c1f21 66%);border:1px solid #000}
[data-skin=hard] .gd-tile em{color:inherit}[data-skin=hard] .gd-tile.dark em{color:var(--scr-ink);text-shadow:0 0 8px rgb(255 179 71/.6)}
[data-skin=hard] .gd-pips i{border-color:currentColor}[data-skin=hard] .gd-pips i.on{background:currentColor}
[data-skin=hard] .gd-key.sm{background:var(--grain),linear-gradient(180deg,#6a7175,#3d4346);color:var(--ink);border:1px solid #000;border-radius:4px;box-shadow:inset 0 1px 0 rgb(255 255 255/.3),0 2px 3px rgb(0 0 0/.6)}
[data-skin=hard] .gd-mini{background:linear-gradient(180deg,#6a7175,#3d4346);color:var(--ink)!important;border:1px solid #000;border-radius:3px;box-shadow:inset 0 1px 0 rgb(255 255 255/.3),0 2px 3px rgb(0 0 0/.6)}
[data-skin=hard] .gd-slide{color:var(--dim)!important}[data-skin=hard] .gd-slide.on{color:var(--ink)!important}
[data-skin=hard] .gd-slide i{background:#08090a;border:1px solid #000;border-radius:8px;box-shadow:inset 0 2px 4px #000,0 1px 0 rgb(255 255 255/.15);height:15px}
[data-skin=hard] .gd-slide i::after{top:1px;bottom:1px;left:1px;width:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1f3f3,#8d9498 55%,#3d4346)}
[data-skin=hard] .gd-slide.on i::after{left:auto;right:1px;background:radial-gradient(circle at 35% 30%,#fff2cf,#e8872e 55%,#8f4a08);box-shadow:0 0 8px rgb(232 135 46/.8)}
/* glass, dials and placards */
[data-skin=hard] .gd-screen{background:radial-gradient(ellipse at 30% 0,rgb(255 255 255/.1),transparent 55%),#0c0e0f;color:var(--scr-ink);border:2px solid #000;border-radius:6px;box-shadow:inset 0 0 18px #000,0 0 0 2px var(--brass),0 0 0 3px #000;text-shadow:0 0 7px rgb(255 179 71/.55)}
[data-skin=hard] .gd-screen footer{color:#b8894a}[data-skin=hard] .gd-screen footer>span:first-child{color:var(--good);text-shadow:0 0 6px rgb(159 196 106/.6)}
[data-skin=hard] .gd-amber{background:radial-gradient(ellipse at 28% -10%,rgb(255 255 255/.14),transparent 50%),radial-gradient(circle at 50% 80%,#24282a,#0c0e0f 75%);border:2px solid #000;border-radius:10px;box-shadow:inset 0 0 20px #000,0 0 0 3px var(--brass),0 0 0 4px #000,0 3px 8px rgb(0 0 0/.6)}
[data-skin=hard] .gd-amber svg{stroke:#e9e0c8}[data-skin=hard] .gd-amber circle,[data-skin=hard] .gd-amber text{fill:#e9e0c8}
[data-skin=hard] .gd-amber .tr{stroke:rgb(233 224 200/.14)}[data-skin=hard] .gd-amber .vl{stroke:#e9e0c8}[data-skin=hard] .gd-amber .lm{stroke:var(--bad)}
[data-skin=hard] .gd-amber .nd{stroke:var(--acc)}[data-skin=hard] .gd-amber circle:not(.o){fill:var(--acc)}[data-skin=hard] .gd-amber .o{fill:none;stroke:rgb(233 224 200/.3)}
[data-skin=hard] .gd-amber text.big{stroke:#0c0e0f;fill:#fff6de}
[data-skin=hard] .gd-rows,[data-skin=hard] .gd-digits{color:#e9e0c8}[data-skin=hard] .gd-rows i{background:rgb(233 224 200/.12)}[data-skin=hard] .gd-rows i.on{background:var(--acc);box-shadow:0 0 5px rgb(232 135 46/.7)}
[data-skin=hard] .gd-digits b{background:#08090a;padding:4px 10px;border-radius:3px;box-shadow:inset 0 2px 6px #000,0 0 0 1px #6b7074}
[data-skin=hard] .gd-gauge{box-shadow:var(--case);padding:18px 16px}
[data-skin=hard] .gd-radar{background:radial-gradient(ellipse at 30% 10%,rgb(255 255 255/.12),transparent 45%),radial-gradient(circle,#123a22,#07160d 78%);border:2px solid #000;border-radius:50%;box-shadow:inset 0 0 26px #000,0 0 0 4px var(--brass),0 0 0 5px #000,0 4px 10px rgb(0 0 0/.6);padding:8px}
[data-skin=hard] .gd-radar svg{stroke:#4fe08a;filter:none}[data-skin=hard] .gd-radar .sw{fill:rgb(79 224 138/.16)}
[data-skin=hard] .gd-radar text{fill:#9ff0b8}[data-skin=hard] .gd-radar text.n,[data-skin=hard] .gd-radar .me{fill:var(--acc)}
[data-skin=hard] .gd-lcd{background:linear-gradient(180deg,#e4dcc2,#cfc5a4);color:#1c1a16;border:1px solid #6f6850;border-radius:2px;box-shadow:inset 0 0 0 1px rgb(255 255 255/.4),0 2px 4px rgb(0 0 0/.6)}
[data-skin=hard] .gd-lcd header{background:#1c1a16;color:#e9e0c8;border-radius:1px}
[data-skin=hard] .gd-lcd li.sel{background:#1c1a16;color:#ffc98a}[data-skin=hard] .gd-lcd li.hostile{color:#a02a14}[data-skin=hard] .gd-lcd li.friendly{color:#3d6a1c}
[data-skin=hard] .gd-pager .gd-lcd li b{color:#a04a08}
[data-skin=hard] .gd-cells div{background:#08090a;color:#f1e9d2;border:1px solid #000;border-radius:2px;box-shadow:inset 0 2px 5px #000,0 0 0 1px #6b7074}
[data-skin=hard] .gd-cells .warn{background:#08090a;color:var(--warn)}[data-skin=hard] .gd-cells .bad{background:#2a0c08;color:#ff7a5c;box-shadow:inset 0 2px 5px #000,0 0 0 1px var(--bad)}
/* lamps, strips, knobs, mesh */
[data-skin=hard] .gd-led i{background:#0b0c0d;box-shadow:inset 0 1px 1px #000}[data-skin=hard] .gd-led i.on{background:#9be36a;box-shadow:0 0 4px rgb(155 227 106/.8)}
[data-skin=hard] .gd-parts li.dmg{color:var(--warn)}[data-skin=hard] .gd-parts li.dmg .gd-led i.on{background:#f2b23c;box-shadow:0 0 4px rgb(242 178 60/.8)}
[data-skin=hard] .gd-parts li.crit{color:#ff7a5c}[data-skin=hard] .gd-parts li.crit .gd-led i.on{background:#ff5a3c;box-shadow:0 0 5px rgb(255 90 60/.9)}
[data-skin=hard] .gd-parts li.sum{border-color:var(--line2)}
[data-skin=hard] .gd-vled span{background:#08090a;border:1px solid #000;border-radius:3px;box-shadow:inset 0 2px 5px #000,0 0 0 1px #6b7074}
[data-skin=hard] .gd-vled i{background:#1a1d1f}[data-skin=hard] .gd-vled i.on{background:#9be36a;box-shadow:0 0 5px rgb(155 227 106/.8)}
[data-skin=hard] .gd-vled.warn i.on{background:#f2b23c;box-shadow:0 0 5px rgb(242 178 60/.8)}[data-skin=hard] .gd-vled.bad i.on{background:#ff5a3c;box-shadow:0 0 6px rgb(255 90 60/.9)}
[data-skin=hard] .gd-vled.bad u{color:#ff7a5c}
[data-skin=hard] .gd-lamp{border:1px solid #000;background:radial-gradient(circle at 35% 30%,#7a3a2c,#2a1410);box-shadow:0 0 0 2px #6b7074}
[data-skin=hard] .gd-lamp.on{background:radial-gradient(circle at 35% 30%,#f4ffd8,#9be36a 45%,#3f8a2a);box-shadow:0 0 0 2px #6b7074,0 0 10px 2px rgb(155 227 106/.75)}
[data-skin=hard] .gd-knob2{border:1px solid #000;background:radial-gradient(circle,#1c1f21 0 18%,transparent 19%),conic-gradient(#9aa0a2,#4d5356,#c9ced0,#4d5356,#9aa0a2,#4d5356,#c9ced0,#4d5356,#9aa0a2);box-shadow:0 0 0 3px #2b2f31,0 0 0 4px #000,0 4px 6px rgb(0 0 0/.6)}
[data-skin=hard] .gd-grille{background:repeating-linear-gradient(45deg,transparent 0 3px,#3c4144 3px 4px),repeating-linear-gradient(-45deg,transparent 0 3px,#3c4144 3px 4px),#060707;border:1px solid #000;border-radius:3px;box-shadow:inset 0 2px 5px #000,0 0 0 1px #6b7074}
[data-skin=hard] .gd-round{border:1px solid #000;box-shadow:inset 0 2px 2px rgb(255 255 255/.45),inset 0 -3px 3px rgb(0 0 0/.4),0 2px 3px rgb(0 0 0/.6)}
[data-skin=hard] .gd-round.g{background:radial-gradient(circle at 35% 30%,#b9e08a,#5f9a34)}[data-skin=hard] .gd-round.o{background:radial-gradient(circle at 35% 30%,#ffc98a,#d9731a)}
[data-skin=hard] .gd-plug{background:linear-gradient(90deg,#8d9498,#d5dadc 40%,#6a7175);border:1px solid #000;border-left:0}
[data-skin=hard] .gd-stick{background:radial-gradient(ellipse 30px 14px at 88% 100%,#7a4a22 0 60%,transparent 62%),radial-gradient(ellipse 18px 10px at 6% 0,#7a4a22 0 60%,transparent 62%),var(--grain),linear-gradient(165deg,#7f8a58,#5d6840 60%,#4a5432);border-radius:6px}
[data-skin=hard] .gd-console{background:var(--rivet) 6px 6px/10px 10px no-repeat,var(--rivet) calc(100% - 6px) 6px/10px 10px no-repeat,var(--grain),var(--metal),#3a3e40}
[data-skin=hard] .gd-console::after{background:#3a3e40;border:2px solid var(--line);border-right:0;left:-8px}
[data-skin=hard] .gd-cap{background:linear-gradient(90deg,#6a4f18,#f1d68a 28%,#b08a45 55%,#6a4f18);border:2px solid #000;border-bottom:0;top:-13px}
[data-skin=hard] .gd-truck .truckfig{border:1px solid #000;border-radius:3px;box-shadow:0 0 0 3px var(--brass),0 0 0 4px #000,0 3px 8px rgb(0 0 0/.6)}
[data-skin=hard] .gd-sticker{background:linear-gradient(180deg,#eee6cc,#d2c8a6);color:#1c1a16;border-radius:2px;box-shadow:inset 6px 0 0 var(--warn),inset 0 0 0 1px #8d8468,0 0 0 1px #000,0 6px 12px rgb(0 0 0/.55);padding-left:16px;transform:none!important}
[data-skin=hard] .gd-sticker.bad{background:linear-gradient(180deg,#d9573c,#a8341e);color:#fff1e6;box-shadow:inset 6px 0 0 #ffd23c,inset 0 0 0 1px #5a1408,0 0 0 1px #000,0 0 14px rgb(210 69 44/.6),0 6px 12px rgb(0 0 0/.55)}
/* the standard widgets and windows in the same material */
[data-skin=hard] .btn,[data-skin=hard] .chip,[data-skin=hard] .irow,[data-skin=hard] .perk,[data-skin=hard] .wcard,[data-skin=hard] .tt{background:var(--grain),linear-gradient(180deg,#565d61,#3a4043);color:var(--ink);border:1px solid #000;border-radius:3px;box-shadow:inset 0 1px 0 rgb(255 255 255/.2),0 2px 3px rgb(0 0 0/.5)}
[data-skin=hard] .btn:hover{background:linear-gradient(180deg,#6a7175,#454b4e);color:#fff6de;border-color:#000}
[data-skin=hard] .btn.on,[data-skin=hard] .btn.pri,[data-skin=hard] .chip.on,[data-skin=hard] .wcard.sel{background:var(--grain),linear-gradient(180deg,#ffc266,#e8872e 60%,#b85f10);color:#1c1408;border-color:#000}
[data-skin=hard] .btn.pri kbd,[data-skin=hard] .btn.on kbd{color:#1c1408!important;border-color:#1c1408!important}
[data-skin=hard] .btn .cost{color:#ffc98a}[data-skin=hard] .btn.pri .cost{color:#1c1408}
[data-skin=hard] .w-nav .btn,[data-skin=hard] .w-nav .btn:nth-child(n){background:var(--grain),linear-gradient(180deg,#565d61,#3a4043);color:var(--ink)}
[data-skin=hard] .ro{background:#08090a;color:#f1e9d2;border:1px solid #000;box-shadow:inset 0 2px 5px #000,0 0 0 1px #6b7074}
[data-skin=hard] .ro.warn{background:#08090a;color:var(--warn)}[data-skin=hard] .ro.bad{background:#2a0c08;color:#ff7a5c}
[data-skin=hard] .win{background-color:#35393b}
[data-skin=hard] .win>header h2{color:#1c1a16;background:var(--plac);display:inline-block;padding:6px 14px 5px;border-radius:2px;box-shadow:inset 0 0 0 1px #8d8468,0 2px 4px rgb(0 0 0/.6);font:800 20px/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase}
[data-skin=hard] .win .pane{background:#1f2224;border:1px solid #000;box-shadow:inset 0 3px 8px #000,0 1px 0 rgb(255 255 255/.14)}
[data-skin=hard] .irow{border-left:6px solid var(--cat,#6b7074)}
[data-skin=hard] .cargo>i{background:#141618;border:1px solid #000;box-shadow:inset 0 2px 4px #000}[data-skin=hard] .cargo>i.f{background:linear-gradient(180deg,#565d61,#3a4043)}[data-skin=hard] .cargo>i.sel{background:linear-gradient(180deg,#ffc266,#e8872e)}
[data-skin=hard] .fit{border:1px solid #000;box-shadow:0 0 0 3px var(--brass),0 0 0 4px #000}
[data-skin=hard] .banner{border:1px solid #000;box-shadow:0 0 0 2px var(--brass),0 0 0 3px #000;margin:14px 14px 0;border-radius:3px}
[data-skin=hard] .bar{background:#08090a;box-shadow:inset 0 1px 3px #000}[data-skin=hard] .bar>i{background:#9be36a}[data-skin=hard] .bar.warn>i{background:#f2b23c}[data-skin=hard] .bar.bad>i{background:#ff5a3c}
[data-skin=hard] .alert{background:linear-gradient(180deg,#eee6cc,#d2c8a6);color:#1c1a16;border:1px solid #000;border-radius:2px;box-shadow:inset 6px 0 0 var(--warn),0 6px 12px rgb(0 0 0/.55);animation:none}[data-skin=hard] .alert small{color:#5a5340}
[data-skin=hard] .alert.bad{background:linear-gradient(180deg,#d9573c,#a8341e);color:#fff1e6}[data-skin=hard] .alert.bad small{color:#ffd9cf}
[data-skin=hard] .w-radio .scr{background:#0c0e0f;color:var(--scr-ink);border:2px solid #000;box-shadow:inset 0 0 18px #000,0 0 0 2px var(--brass);text-shadow:0 0 7px rgb(255 179 71/.55)}
[data-skin=hard] .w-log ul{background:linear-gradient(180deg,#e4dcc2,#cfc5a4);color:#1c1a16;border:1px solid #6f6850}
[data-skin=hard] .w-time .go{background:linear-gradient(180deg,#f3a548,#e8872e 55%,#b9600f);color:#1c1408;border:2px solid #000;border-radius:6px;box-shadow:inset 0 1px 0 rgb(255 255 255/.5),0 4px 8px rgb(0 0 0/.6)}
[data-skin=hard] .w-time .clock,[data-skin=hard] .w-time .spd b{background:#08090a;color:#f1e9d2;border:1px solid #000;box-shadow:0 0 0 1px #6b7074}
[data-skin=hard] .t-warn{color:var(--warn)}[data-skin=hard] .t-good{color:var(--good)}[data-skin=hard] .t-bad{color:#ff7a5c}[data-skin=hard] .t-acc{color:#ffc98a}
[data-skin=hard] kbd{border-color:currentColor;color:inherit;opacity:.8}
[data-skin=hard] .w-contacts tr.hostile td:first-child{color:#ff7a5c}[data-skin=hard] .w-contacts tr.friendly td:first-child{color:var(--good)}
[data-skin=hard] .w-objective .q .num{color:#ffc98a}
[data-skin=hard] .mapv,[data-skin=hard] .dlg .art{border:1px solid #000;box-shadow:0 0 0 2px var(--brass),0 0 0 3px #000}
[data-skin=hard] .g-hub{fill:#0c0e0f;stroke:var(--brass)}[data-skin=hard] .g-val{stroke:#e9e0c8}[data-skin=hard] .g-track{stroke:rgb(233 224 200/.16)}[data-skin=hard] .g-big,[data-skin=hard] .g-t{fill:#e9e0c8}[data-skin=hard] .g-s{fill:#a39c88}

[data-skin=hard] .gd-tile.wpn{background:var(--grain),linear-gradient(180deg,#5a6165,#3d4346 55%,#33383b);color:var(--ink)}

/* ═════════ AMBER — orange vector terminal ═════════ */
[data-skin=amber]{--font:"Anonymous Pro","Courier New",monospace;--font-head:"Anonymous Pro","Courier New",monospace;--font-num:"Anonymous Pro","Courier New",monospace;font-weight:700;font-size:12.500px;
  --o:#ff9a1f;--od:#a8560a;--ob:#ffd08a;--rd:#ff3d1f;--k:#0d0700;
  --bg:rgb(13 7 0/var(--alpha));--bg2:#1a0e02;--line:#ff9a1f;--line2:rgb(255 154 31/.38);--ink:#ff9a1f;--dim:#b8660f;--acc:#ffd08a;--warn:#ffd08a;--bad:#ff3d1f;--good:#ff9a1f;--r:0px;--scrim:rgba(8,4,0,.8)}
[data-skin=amber].fx-glow .hud,[data-skin=amber].fx-glow .win{text-shadow:0 0 6px rgb(255 154 31/.55)}
[data-skin=amber] svg{shape-rendering:crispEdges}
[data-skin=amber] .hud,[data-skin=amber] .hud button,[data-skin=amber] .overlay{font-family:var(--font);font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--o)}
/* the console pieces */
[data-skin=amber] .ct-top{left:14px;right:14px;top:14px}[data-skin=amber] .ct-bottom{left:14px;right:14px;bottom:14px}
[data-skin=amber] .ct-u{top:58px}[data-skin=amber] .ct-d{bottom:68px}
[data-skin=amber] .ct-status{flex:1;display:flex;align-items:center;gap:0;background:var(--bg);border:1px solid var(--o);font-size:12.500px;white-space:nowrap;overflow:hidden}
[data-skin=amber] .ct-status>b{background:var(--o);color:var(--k);padding:7px 12px;text-shadow:none}
[data-skin=amber] .ct-status>span{padding:7px 11px;border-right:1px solid var(--line2);color:var(--ob)}
[data-skin=amber] .ct-status u{text-decoration:none;color:var(--dim);margin-right:6px}
[data-skin=amber] .ct-status .warn{background:var(--od);color:var(--k);text-shadow:none}[data-skin=amber] .ct-status .warn u{color:var(--k)}
[data-skin=amber] .ct-status .bad{background:var(--rd);color:var(--k);text-shadow:none;animation:blink 1s steps(2) infinite}[data-skin=amber] .ct-status .bad u{color:var(--k)}
[data-skin=amber] .ct-status>i{margin-left:auto;padding:7px 12px;font-style:normal;border-left:1px solid var(--o);cursor:pointer}
[data-skin=amber] .ct-box{position:relative;background:var(--bg);border:1px solid var(--o);padding:14px 11px 10px;box-shadow:inset 0 0 0 3px var(--k),inset 0 0 0 4px var(--line2)}
[data-skin=amber] .ct-box>h4{position:absolute;left:12px;top:-8px;background:var(--k);padding:0 7px;font:700 11.500px/16px var(--font);color:var(--ob);border-left:1px solid var(--o);border-right:1px solid var(--o)}
[data-skin=amber] .ct-box table{border-collapse:collapse;font-size:12px}[data-skin=amber] .ct-box td{padding:1.500px 8px 1.500px 0;white-space:nowrap}
[data-skin=amber] .ct-box td:last-child{text-align:right;padding-right:0;color:var(--ob)}
[data-skin=amber] .ct-seg{display:inline-flex;gap:1px;vertical-align:middle}
[data-skin=amber] .ct-seg i{width:6px;height:10px;border:1px solid var(--line2)}[data-skin=amber] .ct-seg i.on{background:var(--o);border-color:var(--o)}
[data-skin=amber] .ct-seg.bad i.on{background:var(--rd);border-color:var(--rd)}
[data-skin=amber] .rd,[data-skin=amber] tr.crit,[data-skin=amber] li.bad{color:var(--rd)}
[data-skin=amber] tr.crit .ct-seg i.on{background:var(--rd);border-color:var(--rd)}[data-skin=amber] tr.dmg{color:var(--ob)}[data-skin=amber] tr.dmg .ct-seg i.on{background:var(--ob);border-color:var(--ob)}
[data-skin=amber] tr.sel td,[data-skin=amber] .ct-cell.sel{background:var(--o);color:var(--k);text-shadow:none}
[data-skin=amber] tr.rd.sel td{background:var(--rd)}
/* truck */
[data-skin=amber] .ct-truck{width:356px;cursor:pointer}
[data-skin=amber] .ct-row{display:flex;gap:12px;align-items:center}
[data-skin=amber] .ct-truck .truckfig{width:92px;border:1px solid var(--line2);background:linear-gradient(var(--line2) 1px,transparent 1px) 0 0/100% 12px,linear-gradient(90deg,var(--line2) 1px,transparent 1px) 0 0/12px 100%}
[data-skin=amber] .truckfig img,[data-skin=amber] .fit img{filter:grayscale(1) contrast(1.800) brightness(1.200) sepia(1) saturate(7) hue-rotate(-14deg);mix-blend-mode:screen;opacity:.85}
[data-skin=amber] .truckfig .part.dmg{border-color:var(--ob);background:rgb(255 208 138/.2)}[data-skin=amber] .truckfig .part.crit{border-color:var(--rd);background:rgb(255 61 31/.35)}
/* equipment */
[data-skin=amber] .ct-equip{width:356px}
[data-skin=amber] .ct-cells{display:grid;grid-template-columns:1fr 1fr;gap:5px}
[data-skin=amber] .ct-cell{border:1px solid var(--o);padding:4px 7px;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden}
[data-skin=amber] .ct-cell span{display:block;color:var(--dim);font-size:11px}[data-skin=amber] .ct-cell.sel span{color:var(--k)}
[data-skin=amber] .ct-cell.firing{background:var(--rd);border-color:var(--rd);color:var(--k);text-shadow:none}[data-skin=amber] .ct-cell.firing span{color:var(--k)}
[data-skin=amber] .ct-cell.empty{border-style:dashed;border-color:var(--line2);color:var(--dim)}
[data-skin=amber] .ct-opts{display:flex;gap:14px;margin-top:8px;font-size:12px}[data-skin=amber] .ct-opts button{color:var(--dim)}[data-skin=amber] .ct-opts button.on{color:var(--ob)}
/* speed */
[data-skin=amber] .ct-speed{width:360px}
[data-skin=amber] .ct-speed svg,[data-skin=amber] .ct-map svg{display:block;width:100%;fill:none;stroke:var(--o);stroke-width:1.200}
[data-skin=amber] .ct-box svg text{fill:var(--o);stroke:none;font:700 11px var(--font)}[data-skin=amber] .ct-box svg text.xl{font-size:36px;fill:var(--ob)}
[data-skin=amber] .ct-box svg .hv{stroke-width:5}[data-skin=amber] .ct-box svg .fl{fill:var(--o)}[data-skin=amber] .ct-box svg .rd{stroke:var(--rd)}[data-skin=amber] .ct-box svg .rd.fl{fill:var(--rd)}
[data-skin=amber] .ct-box svg .rd text{fill:var(--rd)}
[data-skin=amber] .ct-bigrow{display:flex;align-items:center;gap:12px;margin:4px 0}[data-skin=amber] .ct-bigrow b{font-size:36px;line-height:1;color:var(--ob)}[data-skin=amber] .ct-bigrow b.xxl{font-size:64px}
[data-skin=amber] .ct-bigrow u{text-decoration:none;font-size:12px;line-height:1.5;min-width:64px}[data-skin=amber] .ct-bigrow.sm u{color:var(--rd)}
[data-skin=amber] .ct-bigrow .ct-seg i{width:7px;height:16px}
/* map */
[data-skin=amber] .ct-map{width:330px}[data-skin=amber] .ct-map svg{cursor:pointer;border:1px solid var(--line2);margin-bottom:8px}
[data-skin=amber] .ct-map .gr{stroke:rgb(255 154 31/.22)}[data-skin=amber] .ct-map .gr2{stroke:rgb(255 154 31/.3);stroke-dasharray:2 5}[data-skin=amber] .ct-map .ds{stroke-dasharray:6 5}
[data-skin=amber] .ct-map table{width:100%}[data-skin=amber] .ct-map td:nth-child(3){color:var(--dim)}[data-skin=amber] .ct-map tr.sel td:nth-child(3){color:var(--k)}
[data-skin=amber] .ct-map td:nth-child(2){max-width:150px;overflow:hidden;text-overflow:ellipsis}
/* log, radio, task, alerts */
[data-skin=amber] .ct-log,[data-skin=amber] .ct-radio{width:356px}
[data-skin=amber] .ct-log{cursor:pointer}
[data-skin=amber] .ct-log li{font-size:12px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-skin=amber] .ct-log time{color:var(--dim);margin-right:8px}[data-skin=amber] .ct-log li.dim{color:var(--dim)}[data-skin=amber] .ct-log li.warn,[data-skin=amber] .ct-log li.good{color:var(--ob)}
[data-skin=amber] .ct-log .cur i,[data-skin=amber] .ct-radio p i{display:inline-block;width:8px;height:13px;background:var(--o);vertical-align:-2px;margin-left:3px;animation:blink 1s steps(2) infinite}
[data-skin=amber] .ct-radio p{font-size:12px;line-height:1.45;color:var(--ob);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
[data-skin=amber] .ct-radio button,[data-skin=amber] .ct-task button{margin-top:7px;border:1px solid var(--o);padding:3px 8px;font-size:12px}
[data-skin=amber] .ct-task{width:300px}[data-skin=amber] .ct-task table{width:100%}
[data-skin=amber] button.inv,[data-skin=amber] .ct-radio button:hover{background:var(--o);color:var(--k);text-shadow:none}
[data-skin=amber] .ct-alerts{display:flex;flex-direction:column;align-items:center;gap:5px}
[data-skin=amber] .ct-alerts div{background:var(--bg);border:1px solid var(--ob);color:var(--ob);padding:5px 12px;font-size:13px;white-space:nowrap}
[data-skin=amber] .ct-alerts small{font-size:11px;color:var(--dim);margin-left:6px}
[data-skin=amber] .ct-alerts .bad{background:var(--rd);border-color:var(--rd);color:var(--k);text-shadow:none;animation:blink 1.200s steps(2) infinite}[data-skin=amber] .ct-alerts .bad small{color:var(--k)}
/* function-key bar */
[data-skin=amber] .ct-keys{flex:1;display:flex;gap:4px;align-items:stretch}
[data-skin=amber] .ct-keys button{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--o);padding:0 10px 0 0;font-size:12px;height:38px;white-space:nowrap}
[data-skin=amber] .ct-keys button b{align-self:stretch;display:grid;place-items:center;min-width:26px;padding:0 6px;background:var(--o);color:var(--k);text-shadow:none}
[data-skin=amber] .ct-keys button u{text-decoration:none;color:var(--dim);font-size:11px}
[data-skin=amber] .ct-keys button.on{background:var(--o);color:var(--k);text-shadow:none}[data-skin=amber] .ct-keys button.on b{background:var(--k);color:var(--o)}[data-skin=amber] .ct-keys button.on u{color:var(--k)}
[data-skin=amber] .ct-keys button.hot{background:var(--rd);border-color:var(--rd);color:var(--k)}[data-skin=amber] .ct-keys button.hot b{background:var(--k);color:var(--rd)}
[data-skin=amber] .ct-keys button.locked{border-style:dashed;border-color:var(--line2);color:var(--dim)}[data-skin=amber] .ct-keys button.locked b{background:none;color:var(--dim);border-right:1px dashed var(--line2)}
[data-skin=amber] .ct-keys button:hover:not(.locked){border-color:var(--ob);color:var(--ob)}[data-skin=amber] .ct-keys button.on:hover{color:var(--k)}
[data-skin=amber] .ct-keys>span{width:10px}[data-skin=amber] .ct-keys>span.grow{flex:1}
[data-skin=amber] .ct-keys .spd{padding:0 12px;color:var(--ob)}
[data-skin=amber] .ct-keys .go{background:var(--o);color:var(--k);text-shadow:none;padding-right:16px;font-size:13.500px}[data-skin=amber] .ct-keys .go b{background:var(--k);color:var(--o);padding:0 10px}
/* standard widgets and windows in the same terminal */
[data-skin=amber] .p,[data-skin=amber] .win,[data-skin=amber] .w-res{background:var(--bg);border:1px solid var(--o);border-radius:0;box-shadow:inset 0 0 0 3px var(--k),inset 0 0 0 4px var(--line2)}
[data-skin=amber] .w-res{padding:8px}
[data-skin=amber] .hd{font:700 11.500px/1 var(--font);color:var(--dim);letter-spacing:.04em}[data-skin=amber] .hd b{color:var(--ob)}
[data-skin=amber] .btn,[data-skin=amber] .sw,[data-skin=amber] .chip{background:var(--k);border:1px solid var(--o);border-radius:0;font:700 12px/1.1 var(--font);color:var(--o);text-transform:uppercase}
[data-skin=amber] .sw{color:var(--dim)}[data-skin=amber] .sw .lever{display:none}
[data-skin=amber] .btn:hover{border-color:var(--ob);color:var(--ob)}
[data-skin=amber] .btn.on,[data-skin=amber] .btn.pri,[data-skin=amber] .sw.on,[data-skin=amber] .chip.on{background:var(--o);color:var(--k);border-color:var(--o);text-shadow:none}
[data-skin=amber] .btn.pri kbd,[data-skin=amber] .btn.on kbd,[data-skin=amber] .sw.on kbd{color:var(--k);border-color:var(--k)}
[data-skin=amber] .sw.hot{background:var(--rd);border-color:var(--rd);color:var(--k)}
[data-skin=amber] kbd{border:1px solid currentColor;border-radius:0;color:inherit;font:700 10px/1 var(--font)}
[data-skin=amber] .ro{background:none;border:0;border-bottom:1px dashed var(--line2);border-radius:0}[data-skin=amber] .ro b{font:700 19px/1 var(--font);color:var(--ob)}
[data-skin=amber] .ro.bad{background:var(--rd);color:var(--k)}[data-skin=amber] .ro.bad *{color:var(--k)!important}
[data-skin=amber] .bar{background:none;border-color:var(--line2);border-radius:0}[data-skin=amber] .bar>i{background:var(--o)}[data-skin=amber] .bar.bad>i,[data-skin=amber] .parts li.crit .bar>i{background:var(--rd)}
[data-skin=amber] .g-hub{fill:var(--k);stroke:var(--o)}[data-skin=amber] .g-val,[data-skin=amber] .g-acc,[data-skin=amber] .g-needle{stroke:var(--o)}[data-skin=amber] .g-track{stroke:var(--line2)}[data-skin=amber] .g-tick{stroke:var(--od)}
[data-skin=amber] .g-big,[data-skin=amber] .g-t{fill:var(--ob);font-family:var(--font)}[data-skin=amber] .g-s{fill:var(--dim);font-family:var(--font)}
[data-skin=amber] .gi{filter:grayscale(1) sepia(1) saturate(7) hue-rotate(-14deg) brightness(1.150)}
[data-skin=amber] .wcard{background:var(--k);border:1px solid var(--line2);border-radius:0}[data-skin=amber] .wcard.sel{border-color:var(--o)}[data-skin=amber] .wcard .n{color:var(--ob)}
[data-skin=amber] .alert{background:var(--bg);border:1px solid var(--ob);border-radius:0;color:var(--ob);font:700 13px/1 var(--font)}[data-skin=amber] .alert.bad{background:var(--rd);border-color:var(--rd);color:var(--k);text-shadow:none}[data-skin=amber] .alert.bad small{color:var(--k)}
[data-skin=amber] .w-radio .scr{background:none;border:1px dashed var(--line2);font:700 12px/1.4 var(--font);color:var(--ob)}
[data-skin=amber] .w-time .go{background:var(--o);color:var(--k);border:0;border-radius:0;text-shadow:none;font:700 12px/1 var(--font)}
[data-skin=amber] .w-time .spd b,[data-skin=amber] .w-time .clock{background:var(--bg);border:1px solid var(--line2);font-family:var(--font)}
[data-skin=amber] .win>header h2{font:700 26px/1 var(--font);letter-spacing:.06em;color:var(--ob)}
[data-skin=amber] .win>header{border-bottom:1px solid var(--o);margin:0 14px 10px;padding-left:4px;padding-right:4px}
[data-skin=amber] .win h3,[data-skin=amber] .irow .nm b,[data-skin=amber] .perk b,[data-skin=amber] .sktabs b{font:700 15px/1.2 var(--font);color:var(--ob)}
[data-skin=amber] .win p{font:700 14.500px/1.55 var(--font);text-transform:none}
[data-skin=amber] .win .pane,[data-skin=amber] .irow,[data-skin=amber] .perk{background:none;border:1px solid var(--line2);border-radius:0}
[data-skin=amber] .irow{border-left:4px solid var(--o)}[data-skin=amber] .irow .iic{background:none}[data-skin=amber] .irow.sel{outline:0;background:rgb(255 154 31/.14)}
[data-skin=amber] .irow .stat,[data-skin=amber] .chip,[data-skin=amber] .btn .cost,[data-skin=amber] .num,[data-skin=amber] .kv{font-family:var(--font);font-weight:700}
[data-skin=amber] .btn .cost{color:var(--ob)}[data-skin=amber] .btn.pri .cost{color:var(--k)}
[data-skin=amber] .banner,[data-skin=amber] .dlg .art{border:1px solid var(--o)}
[data-skin=amber] .mapv{background:var(--k);border-color:var(--o)}[data-skin=amber] .mapv svg{filter:invert(1) grayscale(1) sepia(1) saturate(7) hue-rotate(-14deg)}
[data-skin=amber] .cargo>i{border:1px solid var(--line2);background:none;border-radius:0}[data-skin=amber] .cargo>i.f{border-color:var(--o)}[data-skin=amber] .cargo>i.sel{background:rgb(255 154 31/.25)}
[data-skin=amber] .fit .it{border:1px solid var(--o);background:rgb(255 154 31/.1);color:var(--ob)}[data-skin=amber] .fit .cells.grid{background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px)}
[data-skin=amber] .tt{background:var(--k);border:1px solid var(--o)}
[data-skin=amber] .t-warn,[data-skin=amber] .t-acc,[data-skin=amber] .t-good{color:var(--ob)}[data-skin=amber] .t-bad{color:var(--rd)}[data-skin=amber] .t-dim{color:var(--dim)}
[data-skin=amber] .w-log li,[data-skin=amber] .w-contacts table,[data-skin=amber] .parts li{font-family:var(--font)}
[data-skin=amber] .w-compass .n-fwd{fill:var(--o)}