/* SIEŤOVKA – svetlý, priateľský vzhľad pre žiakov */
:root{
  --bg:#f5f1e8; --paper:#fffdf8; --line:#e2dccd; --text:#22303c; --muted:#6b7682;
  --blue:#2b7de9; --blue2:#e5f0ff; --green:#23a05a; --green2:#e3f6eb;
  --red:#e0533d; --red2:#fde9e5; --yellow:#f5b400; --yellow2:#fff5d4; --orange:#e8890c;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:17px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif}
h1,h2,h3{margin:0 0 .35em;line-height:1.2}
h1{font-size:30px} h2{font-size:22px} h3{font-size:18px}
a{color:var(--blue)}
.muted{color:var(--muted)} .small{font-size:14px}
.hidden{display:none!important}

/* ---------- lišta ---------- */
.top{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--paper);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:30;flex-wrap:wrap}
.logo{font-weight:800;font-size:22px;color:var(--text);white-space:nowrap;text-decoration:none}
.logo span{color:var(--blue)}
.steps{display:flex;gap:8px;flex-wrap:wrap}
.step{border:2px solid var(--line);background:#fff;border-radius:999px;padding:6px 16px;font-weight:600;font-size:15px;font-family:inherit;color:var(--text);cursor:pointer}
.step:hover{border-color:var(--blue)}
.step.on{background:var(--blue);border-color:var(--blue);color:#fff}
.who{margin-left:auto;display:flex;gap:12px;align-items:center;font-size:15px}
.who b{color:var(--blue)}

/* ---------- tlačidlá ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border:0;border-radius:14px;
  padding:13px 24px;font-weight:700;font-size:18px;font-family:inherit;cursor:pointer;text-decoration:none;box-shadow:0 3px 0 #1c5fb8;transition:transform .08s}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #1c5fb8}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.green{background:var(--green);box-shadow:0 3px 0 #17773f}
.btn.yellow{background:var(--yellow);color:#3a2a00;box-shadow:0 3px 0 #b88700}
.btn.white{background:#fff;color:var(--text);border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}
.btn.sm{padding:8px 16px;font-size:15px;border-radius:11px}
.btn.big{padding:16px 30px;font-size:21px}
.btn.wide{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- rozloženie ---------- */
.wrap{max-width:1500px;margin:0 auto;padding:16px 20px 60px}
.game{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start}
.card{background:var(--paper);border:2px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.side{position:sticky;top:76px}

/* ---------- sprievodca ---------- */
.guide{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.guide .ava{flex:0 0 64px;height:64px;border-radius:50%;background:#fff;border:3px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:36px}
.guide .say{position:relative;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px 18px;font-size:19px;flex:1;min-height:64px;display:flex;align-items:center}
.guide .say::before{content:"";position:absolute;left:-11px;top:22px;border:10px solid transparent;border-right-color:var(--line);border-left:0}
.guide .say::after{content:"";position:absolute;left:-8px;top:23px;border:9px solid transparent;border-right-color:#fff;border-left:0}
.guide .say b{color:var(--blue)}
.guide .who2{font-size:13px;color:var(--muted);display:block;margin-bottom:2px}

/* ---------- pôdorys ---------- */
.planbox{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:8px;overflow:auto}
svg.plan{display:block;width:100%;min-width:760px;height:auto;user-select:none;-webkit-user-select:none}
svg.plan text{font-family:"Segoe UI",system-ui,sans-serif}
.room-name{font-size:17px;font-weight:700;fill:#3a4652}
.room-wall{fill:none;stroke:#55606b;stroke-width:6;stroke-linejoin:round}
.door{fill:var(--door,#efe8da)}
.yard-sign{font-size:20px;font-weight:800;fill:#4c7a2b}
.dev{cursor:pointer}
.dev .box{fill:#fff;stroke:#c9ced4;stroke-width:3}
.dev:hover .box{stroke:var(--blue)}
.dev .emo{font-size:30px;text-anchor:middle;dominant-baseline:central}
.dev .lblbg{fill:#fff;stroke:#d5d9de;stroke-width:1.5}
.dev .lbl{font-size:14px;font-weight:600;text-anchor:middle;fill:#2c3742}
.dev.ok .box{stroke:var(--green);fill:var(--green2)}
.dev.bad .box{stroke:var(--red);fill:var(--red2)}
.dev.sel .box{stroke:var(--yellow);stroke-width:5;fill:var(--yellow2)}
.dev .halo{fill:none;stroke:var(--blue);stroke-width:4;opacity:0}
.dev.target .halo{opacity:1;animation:pulse 1.1s ease-in-out infinite}
.dev.dim{opacity:.35}
@keyframes pulse{0%,100%{stroke-opacity:.25;r:38}50%{stroke-opacity:.95;r:44}}
.cable{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.cable.utp{stroke:var(--blue)}
.cable.fiber{stroke:var(--orange);stroke-width:7}
.cable.wifi{stroke:var(--green);stroke-dasharray:2 10;stroke-width:5}
.cable.broken{stroke:var(--red);stroke-dasharray:12 9}
.cable.sel{stroke:var(--yellow);stroke-width:10}
.cable-hit{fill:none;stroke:transparent;stroke-width:24;cursor:pointer}
.cable-hit:hover + .cable-glow, .cable-glow.on{opacity:1}
.cable-glow{fill:none;stroke:rgba(245,180,0,.45);stroke-width:18;stroke-linecap:round;opacity:0;pointer-events:none}
.wifi-zone{fill:rgba(35,160,90,.10);stroke:rgba(35,160,90,.55);stroke-width:2.5;stroke-dasharray:8 7;pointer-events:none}
.slot{cursor:pointer}
.slot circle{fill:rgba(43,125,233,.10);stroke:var(--blue);stroke-width:3;stroke-dasharray:7 6;animation:pulse2 1.2s ease-in-out infinite}
.slot text{font-size:34px;font-weight:700;fill:var(--blue);text-anchor:middle;dominant-baseline:central}
@keyframes pulse2{0%,100%{opacity:.55}50%{opacity:1}}
.bub rect{stroke-width:2.5}
.bub.ok rect{fill:#fff;stroke:var(--green)}
.bub.bad rect{fill:#fff;stroke:var(--red)}
.bub.off rect{fill:#fff;stroke:#8d969f}
.bub text{font-size:14.5px;font-weight:700;text-anchor:middle;dominant-baseline:central;fill:#2c3742}
.tag rect{fill:#fff4e0;stroke:var(--orange);stroke-width:2.5}
.tag text{font:800 16px ui-monospace,Consolas,monospace;dominant-baseline:central;fill:#a45d00}
.tag.bad rect{fill:var(--red2);stroke:var(--red)} .tag.bad text{fill:#b3301c}
.tag.ok rect{fill:var(--green2);stroke:var(--green)} .tag.ok text{fill:#17773f}
.sign rect{fill:#fff;stroke:var(--blue);stroke-width:2}
.sign text{font:700 15px ui-monospace,Consolas,monospace;dominant-baseline:central;fill:var(--blue)}
.sign.pub rect{stroke:#7b3fc4} .sign.pub text{fill:#7b3fc4}
.pk{fill:var(--yellow);stroke:#8a6500;stroke-width:2}
.pk.bad{fill:var(--red);stroke:#8c2a1c}
.len{font-size:14px;font-weight:700;fill:#55606b;paint-order:stroke;stroke:#fff;stroke-width:5;text-anchor:middle}

/* ---------- pravý panel ---------- */
.mission h2{display:flex;gap:10px;align-items:center}
.mission .num{font-size:14px;color:var(--muted);font-weight:600}
.checks{list-style:none;padding:0;margin:12px 0}
.checks li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:17px}
.checks li:last-child{border:0}
.checks .mk{flex:0 0 30px;height:30px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:16px;background:#fff}
.checks li.done .mk{background:var(--green);border-color:var(--green);color:#fff}
.checks li.done{color:#2b6c45}
.checks li.now .mk{border-color:var(--blue);color:var(--blue);font-weight:800}

/* krabica so zariadeniami */
.tray{display:flex;gap:12px;flex-wrap:wrap}
.tray button{flex:1 1 140px;display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:3px solid var(--line);border-radius:16px;
  padding:12px 10px;font-weight:600;font-size:16px;font-family:inherit;color:var(--text);cursor:pointer}
.tray button i{font-style:normal;font-size:40px;line-height:1.1}
.tray button small{font-weight:500;color:var(--muted);font-size:13px;text-align:center}
.tray button:hover{border-color:var(--blue)}
.tray button.on{border-color:var(--yellow);background:var(--yellow2)}
.tray button:disabled{opacity:.4;cursor:default}

/* hovor */
.call{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:14px}
.call .head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.call .head .ph{font-size:30px;animation:ring 1s ease-in-out 3}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.chat{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto}
.msg{max-width:90%;padding:10px 14px;border-radius:16px;font-size:16.5px;animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.msg.them{background:#f1f3f5;align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--blue2);align-self:flex-end;border-bottom-right-radius:4px}
.ask{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ask button{text-align:left;background:#fff;border:2px solid var(--blue);color:var(--blue);border-radius:12px;padding:10px 14px;font-weight:600;font-size:16px;font-family:inherit;cursor:pointer}
.ask button:hover{background:var(--blue2)}

/* veľké voľby (oprava, typ kábla, triedenie) */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:14px 0}
.choice{background:#fff;border:3px solid var(--line);border-radius:16px;padding:16px 12px;text-align:center;cursor:pointer;font-weight:600;font-size:17px;font-family:inherit;color:var(--text)}
.choice i{display:block;font-style:normal;font-size:44px;line-height:1.15;margin-bottom:4px}
.choice small{display:block;font-weight:500;font-size:14px;color:var(--muted);margin-top:4px}
.choice:hover{border-color:var(--blue)}
.choice.yes small{color:var(--green)} .choice.no small{color:var(--red)}
.choice.no{background:#fbfaf7}

/* hlášky */
.note{border-radius:14px;padding:12px 16px;margin:10px 0;font-size:16.5px;border:2px solid}
.note b{display:block;margin-bottom:2px}
.note.g{background:var(--green2);border-color:#9ad6b0}
.note.b{background:var(--red2);border-color:#f2b2a6}
.note.i{background:var(--blue2);border-color:#b3d0f7}
.note.w{background:var(--yellow2);border-color:#f1d27a}

/* modálne okno */
.modal{position:fixed;inset:0;background:rgba(34,48,60,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
.modal .box{background:var(--paper);border-radius:22px;padding:24px 28px;max-width:640px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:pop .2s}
.stars{font-size:44px;letter-spacing:4px;color:var(--yellow);line-height:1.1}
.stars .e{color:#d9d4c7}

/* IP tabuľka */
.addr{display:flex;flex-direction:column;gap:10px}
.addr .r{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 12px;cursor:text}
.addr .r.bad{border-color:var(--red);background:#fffaf9}
.addr .r.ok{border-color:#9ad6b0}
.addr .ic{font-size:26px;width:34px;text-align:center}
.addr .nm{flex:1 1 80px;font-weight:600;font-size:16px;white-space:nowrap}
.addr .ip{font:700 18px ui-monospace,Consolas,monospace;display:flex;align-items:center;gap:2px;margin-left:auto}
.addr .ip .net{color:var(--blue)}
.addr input{width:58px;font:700 19px ui-monospace,Consolas,monospace;text-align:center;border:2px solid var(--line);border-radius:10px;padding:6px 4px;color:var(--orange);background:#fffaf0}
.addr input.netin{width:46px;color:var(--blue);background:#f4f8ff}
.addr input:focus{outline:3px solid rgba(43,125,233,.3);border-color:var(--blue)}
.addr input:disabled{background:#f4f2ec;color:#8c8c8c}
.addr .why{font-size:15px;color:#b3301c;flex-basis:100%;padding-left:44px}
.sort{display:flex;flex-direction:column;gap:10px}
.sort .r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 12px}
.sort .ipv{font:700 20px ui-monospace,Consolas,monospace;flex:1;min-width:150px}
.sort button{border:2px solid var(--line);background:#fff;border-radius:11px;padding:8px 12px;font-weight:600;font-size:15px;font-family:inherit;cursor:pointer;color:var(--text)}
.sort button.on.in{background:var(--blue);border-color:var(--blue);color:#fff}
.sort button.on.out{background:#7b3fc4;border-color:#7b3fc4;color:#fff}
.sort .r.ok{border-color:var(--green)} .sort .r.bad{border-color:var(--red)}

/* úvod */
.home{max-width:1100px;margin:20px auto}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.lv{background:var(--paper);border:3px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:8px}
.lv .pic{font-size:64px;line-height:1}
.lv h2{font-size:24px}
.lv p{margin:0;color:var(--muted);flex:1}
.lv.l1{border-color:#f2c5bb} .lv.l2{border-color:#b3d0f7} .lv.l3{border-color:#cdb5ee}
.cheat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.cheat div{background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-size:16px}
.cheat i{font-style:normal;font-size:30px;display:block}

/* prihlásenie */
.login{max-width:480px;margin:40px auto}
label.f{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:16px;margin-bottom:14px}
label.f input{font:inherit;font-size:19px;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:#fff}
label.f input:focus{outline:3px solid rgba(43,125,233,.3);border-color:var(--blue)}

/* učiteľ */
table.t{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
table.t th{text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px;border-bottom:2px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
select{font:inherit;padding:8px 12px;border:2px solid var(--line);border-radius:10px;background:#fff}

#toasts{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px;max-width:420px}
#toasts .note{box-shadow:0 10px 30px rgba(0,0,0,.18);margin:0}

@media(max-width:1150px){
  .game{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
}
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:10px}
  .top{padding:8px 10px;gap:8px}
  .steps{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .guide .ava{flex-basis:48px;height:48px;font-size:26px}
  .guide .say{font-size:17px}
  h1{font-size:24px}
}