:root {color-scheme:dark;--bg:#070b18;--surface:#111b32;--cyan:#36e5ed;--pink:#ff4ea3;--gold:#ffda67;--muted:#aab5d3}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f0f5ff;background:radial-gradient(ellipse 80% 35% at 50% -10%,#152e5b 0%,transparent 100%),linear-gradient(180deg,#0b1124,var(--bg))}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(transparent 96%,#1c2d55 100%);background-size:100% 5px;z-index:5}
button{font:inherit;cursor:pointer;touch-action:manipulation}.shell{max-width:1050px;padding:20px clamp(12px,3vw,30px) 18px;margin:0 auto}.masthead,.top-controls,.game-controls,.stats,footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{text-decoration:none;color:var(--cyan);font-weight:900;letter-spacing:.12em;font-size:16px}.brand span{color:#fff}.brand small{display:block;font-size:9px;letter-spacing:.4em;color:#94a8ca;margin-top:3px}.top-controls{gap:8px}.mini,.control{color:#b4c2e1;background:#121e38;border:1px solid #334568;border-radius:9px;padding:9px 13px;font-size:12px;font-weight:800;letter-spacing:.05em}.mini:hover,.control:hover{border-color:var(--cyan);color:var(--cyan)}.hero{text-align:center;margin:12px 0 21px}.eyebrow,.panel-tag{color:var(--cyan);letter-spacing:.32em;font-size:10px;font-weight:800}.hero h1{font-size:clamp(29px,6vw,52px);line-height:1.08;letter-spacing:.08em;margin:7px 0;text-shadow:0 0 28px #35deeb55}.hero h1 span{color:var(--pink)}.hero p:last-child{color:var(--muted);font-size:13px;margin:7px 0}.console{padding:12px;border:1px solid #2b4369;border-radius:17px;background:linear-gradient(155deg,#131e36,#0b1226);box-shadow:0 0 55px #0abacf15,inset 0 1px #48608533}.stats{padding:3px 5px 12px;gap:6px}.stat{display:flex;align-items:flex-start;flex-direction:column;gap:4px}.stat span{color:#91a3c6;letter-spacing:.12em;font-size:10px;font-weight:800}.stat strong{font-size:clamp(13px,2.5vw,21px);font-variant-numeric:tabular-nums;letter-spacing:.08em}.stat:nth-child(1) strong{color:var(--cyan)}.stat:nth-child(3) strong{color:var(--pink)}.stat:nth-child(4) strong{color:var(--gold)}.stage{position:relative;aspect-ratio:10 / 7;width:100%;max-width:100%;border-radius:10px;overflow:hidden;background:#090e1d;border:1px solid #2a4166;box-shadow:inset 0 0 30px #000c;touch-action:none}canvas{width:100%;height:100%;display:block}.overlay{position:absolute;inset:0;background:#050915d9;display:flex;align-items:center;justify-content:center;padding:18px;z-index:2;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.panel{width:min(100%,460px);border:1px solid #3c5b81;border-radius:16px;background:linear-gradient(155deg,#162844e8,#10182fe8);box-shadow:0 0 45px #05d6de24;text-align:center;padding:clamp(19px,4vw,33px)}.panel h2{font-size:clamp(25px,5vw,43px);margin:10px 0 9px;color:white;letter-spacing:.04em;text-shadow:0 0 18px #36e5ed66}.panel p:not(.panel-tag){color:#b4c5e2;line-height:1.6;font-size:14px}.primary{border:0;border-radius:9px;padding:13px 34px;margin-top:13px;background:linear-gradient(105deg,var(--cyan),#36aafc);color:#041426;box-shadow:0 0 23px #36e5ed48;font-weight:900;letter-spacing:.09em}.primary:hover{filter:brightness(1.15)}.game-controls{padding:13px 4px 1px}.hint{font-size:11px;color:#879bbd;text-align:center}.touch-controls{display:none;justify-content:center;gap:12px;padding-top:11px}.touch-controls button{width:42%;max-width:175px;border:1px solid #376588;border-radius:9px;padding:14px;background:#13223e;color:var(--cyan);font-weight:900;font-size:20px;user-select:none;touch-action:none}footer{padding:20px 4px 3px;color:#64789b;font-size:10px;letter-spacing:.13em}@media(max-width:650px){.shell{padding:12px 9px}.hero{margin:5px 0 13px}.console{padding:7px;border-radius:11px}.stats{padding:5px 3px 9px}.stat span{font-size:8px}.hint{font-size:9px;line-height:1.5}.control{padding:9px;font-size:10px}.touch-controls{display:flex}footer{font-size:8px}.eyebrow{font-size:9px}}

/* ==========================================
   iBASTERISK ARKANOID - RESPONSIVE DISPLAY
   ========================================== */

/* Desktop a notebook */
@media (min-width: 651px) {

    .shell {
        max-width: min(1050px, 82dvh);
    }

    .hero {
        margin: 8px 0 14px;
    }

    .hero h1 {
        font-size: clamp(28px, 4.5vh, 52px);
    }

    .console {
        padding: 10px;
    }

    .stats {
        padding-bottom: 9px;
    }

    .game-controls {
        padding-top: 9px;
    }

    footer {
        padding-top: 12px;
    }
}

/* Nizsie obrazovky notebookov */
@media (min-width: 651px) and (max-height: 750px) {

    .shell {
        max-width: min(1050px, 76dvh);
        padding-top: 10px;
    }

    .hero {
        margin: 5px 0 9px;
    }

    .hero h1 {
        font-size: 30px;
    }

    .panel {
        padding: 15px;
    }

    .panel h2 {
        font-size: 28px;
    }
}

/* Mobilne zariadenia */
@media (max-width: 650px) {

    .stage {
        width: 100%;
        aspect-ratio: 10 / 7;
    }

    .hero h1 {
        font-size: clamp(24px, 7vw, 36px);
    }

    .panel {
        padding: 12px;
    }

    .panel h2 {
        font-size: clamp(20px, 6vw, 30px);
    }
}