:root{color-scheme:dark;--bg:#0c1015;--panel:#131a22;--line:#2a3541;--text:#e8eef5;--muted:#9aaabb;--lime:#c6fa68;--cyan:#6ce8ec;--red:#ff998c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit;background:#1c2631;border:1px solid var(--line);border-radius:10px;padding:12px 16px}
button:hover{border-color:var(--lime)}
button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
button:disabled{cursor:default;opacity:.55}
input{font:inherit;background:#0e141b;border:1px solid var(--line);color:var(--text);border-radius:10px;padding:14px 16px;width:100%}
input:focus{outline:2px solid var(--cyan)}
label{display:block;font:11px monospace;letter-spacing:1px;color:var(--muted);margin:14px 0 6px}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 4%;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:10px}
.brand{color:white;text-decoration:none;font-size:22px;font-weight:900;letter-spacing:2px}
.brand span{color:var(--lime)}
.brand small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:4px}
#headerActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#headerActions button{font-size:12px}
#headerActions .code-pill{font:bold 14px monospace;letter-spacing:3px;color:var(--lime);background:#1c2631;border:1px solid var(--line);border-radius:10px;padding:8px 14px}
main{max-width:1500px;margin:auto;padding:30px 4%}
.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--muted);margin:0 0 12px}
h1{font-size:clamp(26px,3.2vw,44px);line-height:1.12;letter-spacing:-1.5px;margin:0 0 10px}
h1 em{font-style:normal;color:var(--lime)}

/* ---- Landing: login + join ---- */
.landing{display:grid;grid-template-columns:1fr;gap:22px;max-width:620px;margin:0 auto}
.landing-head{text-align:center;margin-bottom:6px}
.landing-head p{color:var(--muted);font-size:15px;line-height:1.6}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px}
.card h2{margin:0 0 4px;font-size:22px}
.card .sub{color:var(--muted);font-size:13px;margin:0 0 6px}
.card.teacher{border-color:#3a4a2f}
.card.student{border-color:#2a3a4a}
.card .error{color:var(--red);font-size:13px;margin-top:10px;min-height:0}
.card .primary{margin-top:18px;width:100%;font-size:16px}
.primary{background:var(--lime);color:#17200d;font-weight:800;border:0}
.primary:hover{filter:brightness(1.05)}
.ghost-btn{background:transparent}

/* ---- Lobby ---- */
.lobby{max-width:720px;margin:0 auto;text-align:center}
.code-big{font:900 54px monospace;letter-spacing:12px;color:var(--lime);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px 10px;margin:22px 0}
.lobby .players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0}
.lobby .players span{background:#1c2631;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px}
.count-pill{display:inline-block;background:#1c2631;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font:12px monospace;color:var(--cyan);margin-bottom:10px}

/* ---- Quiz (teacher control + student play) : testo grande ---- */
.quiz-panel{max-width:900px;margin:0 auto}
.quiz-meta{display:flex;justify-content:space-between;align-items:center;font:12px monospace;color:var(--cyan);margin-bottom:10px;letter-spacing:1px}
.meter{height:6px;background:#35414c;border-radius:4px;margin-bottom:22px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--lime)}
.quiz-question{font-size:clamp(24px,4vw,38px);line-height:1.25;font-weight:800;margin:0 0 26px;letter-spacing:-.5px}
.answers-big{display:grid;gap:14px}
@media(min-width:680px){.answers-big{grid-template-columns:1fr 1fr}}
.answer-big{text-align:left;font-size:clamp(17px,2.4vw,22px);line-height:1.35;display:flex;gap:16px;align-items:center;padding:20px 22px;border-radius:14px;min-height:72px}
.answer-big span.letter{color:var(--muted);font:800 16px monospace;background:#0e141b;border-radius:8px;padding:6px 10px;flex-shrink:0}
.answer-big.correct{border-color:var(--lime);background:#c6fa6822}
.answer-big.wrong{border-color:var(--red);background:#ff998c22}
.answer-big:disabled{opacity:1}

.waitscreen{text-align:center;padding:60px 10px;max-width:640px;margin:0 auto}
.waitscreen .big-emoji{font-size:64px;display:block;margin-bottom:18px}
.waitscreen h2{font-size:clamp(22px,4vw,32px);margin:0 0 10px}
.waitscreen p{color:var(--muted);font-size:16px;line-height:1.6}

.result-big{text-align:center;padding:50px 10px;max-width:640px;margin:0 auto;border-radius:20px}
.result-big.ok{background:#c6fa6818;border:2px solid var(--lime)}
.result-big.no{background:#ff998c18;border:2px solid var(--red)}
.result-big .mark{font-size:80px;display:block;margin-bottom:8px}
.result-big h2{font-size:clamp(26px,4.5vw,40px);margin:0}

/* ---- Teacher results / vote bars ---- */
.results-panel{max-width:900px;margin:0 auto}
.vote-row{display:flex;align-items:center;gap:14px;margin:12px 0}
.vote-row .vlabel{flex:0 0 46%;font-size:clamp(15px,2vw,19px);display:flex;gap:10px;align-items:center}
.vote-row .vlabel span.letter{color:var(--muted);font:800 14px monospace;background:#0e141b;border-radius:8px;padding:5px 9px}
.vote-bar-track{flex:1;background:#1c2631;border-radius:8px;height:30px;overflow:hidden;border:1px solid var(--line)}
.vote-bar-fill{height:100%;background:#44525e;transition:width .4s}
.vote-row.correct .vlabel{color:var(--lime)}
.vote-row.correct .vote-bar-fill{background:var(--lime)}
.vote-count{flex:0 0 40px;text-align:right;font:bold 14px monospace;color:var(--muted)}
.explain-box{background:#0b121a;border-radius:12px;padding:16px 18px;margin:20px 0;font-size:15px;line-height:1.6;color:var(--muted)}
.setbanner{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;text-align:center;max-width:640px;margin:0 auto}
.setbanner h2{margin:0 0 8px;font-size:24px}
.setbanner p{color:var(--muted);margin:0 0 18px}

/* ---- Assembly reuse (teacher build view) ---- */
.step{flex:1;border-top:2px solid var(--line);padding:14px 5px;font-size:12px;color:var(--muted)}
.step.active{border-color:var(--lime);color:var(--lime)}
.step.done{border-color:var(--cyan);color:var(--cyan)}
.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(310px,1fr);gap:22px}
.bench,aside{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.panelhead{display:flex;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line);align-items:center}
h2{margin:0;font-size:19px;letter-spacing:-.4px}
.live{color:var(--lime);font:9px monospace;white-space:nowrap}
#scene{height:520px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#26344255,transparent 65%),radial-gradient(#64778b22 1px,transparent 1px);background-size:auto,18px 18px;padding:22px}
.board{position:relative;width:350px;height:440px;background:repeating-linear-gradient(90deg,transparent 0 22px,#38565220 23px 24px),linear-gradient(120deg,#202c33,#101a20);border:3px solid #54626a;border-radius:8px;box-shadow:15px 15px 0 #05080c,0 22px 35px #0008}
.board:before,.board:after{content:'⊕';position:absolute;color:#c7ced2;font-size:22px;bottom:5px;left:5px}
.board:after{left:auto;right:5px}
.io{position:absolute;left:4%;top:6%;width:26%;height:40%;background:repeating-linear-gradient(135deg,#39414d 0 3px,#252e37 4px 9px);border:1px solid #67717a;clip-path:polygon(0 0,100% 0,100% 80%,70% 100%,0 100%)}
.io b{display:block;transform:rotate(-90deg);margin-top:85px;font-size:18px;color:var(--lime);letter-spacing:3px}
.vrm{position:absolute;left:35%;top:5%;width:43%;height:10%;background:repeating-linear-gradient(90deg,#6c747a 0 3px,#252c35 4px 8px)}
.chipset{position:absolute;right:6%;bottom:12%;height:18%;width:30%;background:repeating-linear-gradient(145deg,#3f4953 0 2px,#242d37 3px 10px);border:1px solid #5c6b76;display:grid;place-content:center;font:bold 13px monospace;color:#a6b7c4}
.board-label{position:absolute;bottom:3%;left:25%;max-width:68%;font:7px monospace;letter-spacing:.4px;color:#9aabb7}
.battery{position:absolute;left:15%;top:88%;width:24px;height:24px;border-radius:50%;background:linear-gradient(130deg,#87929a,#3e4b55);border:3px solid #919ca5}
.zone{position:absolute;padding:5px;border:1px dashed #6e899c;border-radius:5px;background:#071018bb;color:#9eb2c1;font:10px monospace;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;transition:background .2s,box-shadow .2s;min-width:0;overflow:hidden}
.zone small{font-size:8px;line-height:1.2;max-width:100%;overflow-wrap:anywhere}
.zone .part-art{min-height:0;flex:1;min-width:0}
.zone.highlight{border:2px solid var(--lime);background:#c6fa6818;box-shadow:0 0 20px #c6fa6822}
.zone.filled{border:1px solid #647785;background:#243341;box-shadow:3px 4px 0 #0008}
.zone.filled small{color:var(--lime)}
.zone.cpu{left:35%;top:22%;width:30%;height:24%}
.zone.ram{left:76%;top:17%;width:17%;height:37%;background:repeating-linear-gradient(90deg,#14191d 0 7px,#55636e 8px 10px)}
.board .zone.ssd{left:9%;top:73%;width:48%;height:11%;z-index:2}
.board .zone.gpu{left:9%;top:51%;width:63%;height:13%;z-index:2}
.board .zone.gpu.filled{left:9%;top:51%;width:63%;height:13%}
.board .zone.gpu .fan{width:29px;height:29px;border-width:2px}
.board .zone.gpu .fan:after{inset:8px}
.board .zone.ssd .ssd-art{max-width:100%;white-space:nowrap;font-size:7px;padding:3px;height:20px}
.part-art{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;height:65%;min-height:24px}
.cpu-art{background:linear-gradient(135deg,#d5d9d9,#6f7e87);border:4px solid #40554c;border-radius:4px;padding:10px;color:#26323a;font:bold 13px monospace;box-shadow:inset 0 0 0 1px #e1e3e3}
.ram-art{background:repeating-linear-gradient(90deg,#1d292f 0 10px,#52606b 11px 14px);border-bottom:5px solid #c0a35e;width:90%;height:25px;border-top:3px solid var(--lime)}
.fan{width:37px;height:37px;flex-shrink:0;border-radius:50%;border:3px solid #78dbdf;background:repeating-conic-gradient(#26363e 0 20deg,#5c7182 21deg 44deg);box-shadow:0 0 10px #71e7ec44;position:relative}
.fan:after{content:'';position:absolute;inset:11px;border-radius:50%;background:#27333f}
.ssd-art{height:23px;background:#193b35;border:2px solid #60736d;color:#dcdfca;font:8px monospace;padding:4px}
.tower{position:relative;width:340px;height:455px;border:10px solid #5c6873;background:linear-gradient(125deg,#26354099,#090f15);border-radius:10px;box-shadow:18px 15px 0 #070a0e}
.tower:after{content:'PC LAB / E-ATX';position:absolute;bottom:5px;right:10px;font:9px monospace;color:#7e8c99}
.tower .zone.mb{left:5%;top:8%;width:67%;height:54%}
.tower .zone.psu{left:4%;bottom:5%;width:60%;height:18%}
.tower .zone.fans{right:3%;top:9%;width:20%;height:66%}
.tower .zone.fans .part-art{flex-direction:column;height:85%}
.tower .zone.cooler{left:25%;top:22%;width:28%;height:20%;z-index:3}
.tower .zone.cooler .fan{width:32px;height:32px}
.tower .zone.gpu{left:10%;top:54%;height:12%;width:61%;z-index:4}
.tower .zone.gpu .fan{width:28px;height:28px;border-width:2px}
.tower .zone.gpu .fan:after{inset:8px}
.tower .zone.mb.filled{background:repeating-linear-gradient(45deg,#2c3e42 0 8px,#1b282d 9px 12px);justify-content:flex-start;align-items:flex-start;padding:7px}
.tower .zone.mb.filled>.part-art{display:none}
.tower .zone.mb.filled>small{font-size:8px;flex:none}
.tower.powered{box-shadow:18px 15px 0 #070a0e,0 0 60px #6ce8ec22}
.powered .fan{animation:spin 2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.emptycase{width:250px;height:360px;border:3px dashed #455564;border-radius:12px;display:grid;place-content:center;text-align:center;color:#8194a5;font:14px monospace;line-height:2}
.hint{display:flex;gap:12px;padding:14px 24px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5}
.hint span{color:var(--lime);font-size:24px}
.hint p{margin:0}
#action{padding:0 24px 20px;display:flex;gap:10px;flex-wrap:wrap}
#inventory{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.item{position:relative;text-align:left;padding:12px;min-height:109px;display:flex;flex-direction:column;gap:6px;min-width:0}
.item .part-art{height:34px;justify-content:start;overflow:hidden}
.item b{font-size:12px}
.item small{font-size:10px;color:var(--muted)}
.item.ready{border-color:var(--lime);touch-action:none;cursor:grab}
.item.selected{box-shadow:0 0 0 2px var(--lime)}
.item.installed{opacity:.65}
.item .fan{width:28px;height:28px;border-width:2px}
.item .fan:after{inset:8px}
.tag{color:var(--lime);font:9px monospace;letter-spacing:1px}
.monitor-section{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:24px;border:1px solid var(--line);border-radius:14px;padding:35px;background:linear-gradient(120deg,#192330,#11161e)}
.monitor-section h2{font-size:26px}
.monitor-section p{color:var(--muted);font-size:13px;line-height:1.6}
.monitor-art{width:260px;flex-shrink:0}
#screen{aspect-ratio:16/9;background:#080d12;border:9px solid #45515d;border-bottom-width:16px;border-radius:8px;display:grid;place-content:center;text-align:center;color:#627482;font:12px monospace;padding:10px}
#screen b{font-size:17px;display:block;color:var(--lime);margin-bottom:6px}
.stand{width:100px;height:40px;margin:auto;border-bottom:7px solid #5c6977;background:linear-gradient(90deg,transparent 40%,#45515d 40% 60%,transparent 60%)}
#screen.on{background:radial-gradient(at 30% 90%,#c6fa68,#226b75 40%,#16293b 80%);color:white}
footer{border-top:1px solid var(--line);padding:24px 4%;color:var(--muted);font:10px monospace;display:flex;justify-content:space-between;gap:20px}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--lime);color:#17200d;padding:12px 20px;border-radius:10px;z-index:100;opacity:0;pointer-events:none;max-width:90%;font-size:13px}
#toast.show{opacity:1}
.ghost{position:fixed;z-index:200;pointer-events:none;width:160px;background:#283744;border:2px solid var(--lime);border-radius:10px;padding:12px;font-size:12px;opacity:.9}
.celebrate{font-size:35px;color:var(--lime)}
.backrow{max-width:900px;margin:0 auto 14px}
.backrow button{font-size:12px}
@media(max-width:850px){.workspace{grid-template-columns:1fr}#scene{height:510px}aside{overflow:visible}.monitor-section{padding:23px}.monitor-section h2{font-size:21px}.monitor-art{width:190px}.live{display:none}}
@media(max-width:480px){main{padding:22px 14px}header{padding:16px 14px}.brand{font-size:19px}.code-big{font-size:38px;letter-spacing:7px}#scene{height:440px;padding:10px}.board{transform:scale(.85);flex-shrink:0}.tower{transform:scale(.85);flex-shrink:0}.panelhead{padding:16px}.monitor-section{flex-direction:column;align-items:start}.monitor-art{align-self:center}footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}