*{box-sizing:border-box}
:root{
  --bg:#030912;--panel:#071321;--panel2:#0a1a2d;--line:#168cff;
  --blue:#24a8ff;--cyan:#00e5ff;--green:#53e78c;--text:#eef6ff;
  --muted:#a9bad0;--gold:#ffd32a;--danger:#ff637b;
}
body{
  margin:0;min-height:100vh;background:
  radial-gradient(circle at 80% 15%,rgba(20,120,255,.16),transparent 28%),
  radial-gradient(circle at 15% 75%,rgba(0,229,255,.08),transparent 25%),
  linear-gradient(135deg,#02060b,#071321 55%,#02070d);
  color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px;
}
.app{width:min(1180px,94vw);margin:0 auto;padding:24px 0 34px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid rgba(36,168,255,.25);padding-bottom:18px}
.brand{display:flex;align-items:center;gap:15px}
.logo{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,150,255,.35))}
.eyebrow,.tag{font-size:11px;font-weight:900;letter-spacing:2px;color:var(--cyan)}
h1{margin:3px 0;font-size:clamp(25px,4vw,44px);line-height:1;font-weight:950;letter-spacing:1px}
h1 span{color:var(--blue)}
.brand p{margin:7px 0 0;color:var(--muted);font-size:13px}
.badge{border:1px solid var(--blue);padding:10px 16px;text-align:center;line-height:1.05;color:#dcecff;border-radius:10px;background:rgba(0,100,190,.1);box-shadow:0 0 20px rgba(0,130,255,.1)}
.badge strong{color:var(--cyan);font-size:15px}
.hero{display:flex;justify-content:space-between;align-items:end;gap:25px;padding:28px 4px 20px}
.hero-copy{max-width:720px}
.hero h2{font-size:clamp(34px,6vw,64px);margin:5px 0 10px;line-height:.95}
.hero p{font-size:17px;line-height:1.55;color:#c9d7e7;margin:0}
.hero p strong{color:var(--cyan)}
.stats{display:flex;gap:10px}
.stats>div{min-width:95px;padding:12px 13px;border:1px solid rgba(36,168,255,.35);background:rgba(6,19,34,.8);border-radius:10px;text-align:center}
.stats span{display:block;font-size:23px;font-weight:900;color:#fff}
.stats small{font-size:9px;letter-spacing:1.3px;color:var(--muted)}
.challenge-card{background:linear-gradient(180deg,rgba(7,19,33,.96),rgba(4,12,22,.96));border:1px solid rgba(36,168,255,.42);border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.instructions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.instruction{display:flex;align-items:center;gap:11px;background:rgba(14,31,51,.8);border:1px solid rgba(255,255,255,.07);border-radius:11px;padding:10px}
.number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#092c4d;border:1px solid var(--blue);color:var(--cyan);font-weight:900}
.instruction strong,.instruction small{display:block}
.instruction strong{font-size:12px;letter-spacing:1px}
.instruction small{color:var(--muted);font-size:11px;margin-top:3px}
.board-wrap{display:flex;align-items:center;gap:10px}
.side-label{width:74px;text-align:center;font-size:10px;letter-spacing:1px;color:var(--muted);line-height:1.35}
.side-label b{color:var(--blue)}
.side-label.right b{color:var(--green)}
.board{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;flex:1;max-width:930px;margin:auto}
.slot{height:128px;border:1px solid rgba(36,168,255,.22);border-radius:13px;background:linear-gradient(180deg,#0a1c30,#06111e);display:grid;place-items:center;position:relative;cursor:pointer;transition:.16s}
.slot:hover{border-color:rgba(36,168,255,.7);transform:translateY(-2px)}
.slot.empty{background:radial-gradient(circle,rgba(0,229,255,.09),transparent 65%),#06111e;cursor:default}
.slot.empty:after{content:"";width:42px;height:42px;border:2px dashed rgba(36,168,255,.25);border-radius:50%}
.robot{width:76px;height:88px;position:relative;filter:drop-shadow(0 7px 10px rgba(0,0,0,.35));user-select:none}
.robot .head{position:absolute;left:13px;top:4px;width:50px;height:38px;border-radius:13px 13px 10px 10px;background:linear-gradient(145deg,#f5fbff,#7c9bb7);border:2px solid #dff5ff}
.robot .eye{position:absolute;top:17px;width:8px;height:5px;border-radius:50%;background:#071321;box-shadow:0 0 7px currentColor}
.robot .e1{left:25px}.robot .e2{right:25px}
.robot .body{position:absolute;left:10px;top:42px;width:56px;height:38px;border-radius:12px;background:linear-gradient(145deg,#ecf7ff,#46647e);border:2px solid #c8e8fa}
.robot .core{position:absolute;left:30px;top:53px;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;background:#071321;box-shadow:0 0 9px currentColor}
.robot:before,.robot:after{content:"";position:absolute;top:47px;width:10px;height:27px;border-radius:8px;background:#607c95}
.robot:before{left:2px;transform:rotate(12deg)}.robot:after{right:2px;transform:rotate(-12deg)}
.robot.blue{color:var(--blue)}.robot.green{color:var(--green)}
.robot.blue .head{box-shadow:inset 0 -5px 0 rgba(36,168,255,.25)}
.robot.green .head{box-shadow:inset 0 -5px 0 rgba(83,231,140,.25)}
.robot.blue .eye{color:var(--blue)}.robot.green .eye{color:var(--green)}
.direction{position:absolute;bottom:7px;font-size:9px;letter-spacing:1px;color:rgba(255,255,255,.35)}
.slot.movable{box-shadow:0 0 0 1px rgba(0,229,255,.12),0 0 20px rgba(0,140,255,.07)}
.controls{display:flex;justify-content:center;gap:9px;margin:17px 0 12px}
.btn{border:1px solid rgba(36,168,255,.55);border-radius:9px;padding:10px 18px;background:#0a1c30;color:#fff;font-weight:800;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px);border-color:var(--cyan)}
.btn.primary{background:linear-gradient(135deg,#0878e8,#05b8e9);border:0;color:#00111d}
.btn.ghost{background:transparent;color:#c9e8ff}
.message{padding:12px 15px;border-radius:9px;text-align:center;font-size:13px;line-height:1.45;border:1px solid rgba(36,168,255,.18);color:#dbeaff;background:rgba(10,29,49,.7)}
.message.success{border-color:rgba(83,231,140,.45);color:#bfffd5}
.message.warn{border-color:rgba(255,211,42,.4);color:#ffeaa0}
.learning{margin-top:18px;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:17px;background:rgba(5,14,25,.75)}
.learning-title{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.mini-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:9px;background:#0b3357;color:var(--cyan);font-size:20px}
.learning-title>div>span{font-size:10px;color:var(--cyan);font-weight:900;letter-spacing:1.5px}
.learning h3{margin:2px 0 0;font-size:20px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.cards article{padding:13px;border-radius:10px;background:#081728;border:1px solid rgba(36,168,255,.14)}
.cards b{font-size:12px;color:#8fd5ff}
.cards p{font-size:11px;line-height:1.45;color:var(--muted);margin:6px 0 0}
footer{display:flex;justify-content:space-between;gap:20px;padding:17px 5px 0;color:#8295ab;font-size:11px}
footer strong{color:#dceaff}.footer-site{color:#6e9dc7}
.modal{position:fixed;inset:0;background:rgba(0,5,11,.78);backdrop-filter:blur(8px);display:none;place-items:center;padding:20px;z-index:10}
.modal.show{display:grid}
.modal-box{width:min(500px,95vw);text-align:center;background:linear-gradient(180deg,#0b2035,#06111d);border:1px solid var(--cyan);border-radius:20px;padding:30px;box-shadow:0 0 60px rgba(0,160,255,.22)}
.trophy{font-size:54px;margin-bottom:6px}
.modal-box h2{font-size:44px;margin:7px 0;color:#fff}
.modal-box p{color:#bdcfe0;line-height:1.5}
.result{display:flex;justify-content:center;gap:12px;margin:18px 0}
.result>div{min-width:115px;padding:12px;border-radius:10px;background:#071625;border:1px solid rgba(36,168,255,.25)}
.result span{display:block;font-size:24px;font-weight:900;color:var(--cyan)}
.result small{color:#8196ad}
.modal-question{font-size:13px!important;background:#081b2d;padding:11px;border-radius:9px}
@media(max-width:800px){
  .hero{display:block}.stats{margin-top:18px}.stats>div{flex:1}
  .instructions{grid-template-columns:1fr}.cards{grid-template-columns:1fr 1fr}
  .board{gap:5px}.slot{height:100px}.robot{transform:scale(.78)}
  .side-label{display:none}
}
@media(max-width:500px){
  .app{width:96vw;padding-top:12px}.topbar{align-items:flex-start}.badge{display:none}
  .logo{width:58px;height:58px} .brand p{font-size:11px}
  .board{gap:3px}.slot{height:82px;border-radius:8px}.robot{transform:scale(.62)}
  .cards{grid-template-columns:1fr}footer{display:block}.footer-site{margin-top:8px}
}