:root {
    color-scheme: dark;
    --red: #f01c12;
    --red-dark: #b9130c;
    --metal: #dedede;
    --ink: #111;
    --lcd: #85877e;
    --lcd-ink: #11150f;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 50% 0%, #343943 0, #181b21 56%, #101216 100%);
    color: #fff;
    overscroll-behavior: none;
}
button { font: inherit; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.page-shell {
    width: min(1560px, 100%);
    margin: 0 auto;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}
.game-column { min-width: 0; }
.toolbar { display: flex; justify-content: flex-end; gap: 9px; margin-bottom: 10px; }
.toolbar-button {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 11px;
    padding: 9px 13px;
    cursor: pointer;
    font-weight: 750;
}
.toolbar-button:hover { background: rgba(255,255,255,.14); }
.toolbar-button:not(.is-on) { opacity: .55; }
.console {
    position: relative;
    width: 100%;
    aspect-ratio: 1.72 / 1;
    min-height: 490px;
    border: clamp(9px, 1.3vw, 18px) solid var(--red);
    border-radius: 10px;
    background:
        linear-gradient(100deg, rgba(255,255,255,.62), transparent 16%, rgba(0,0,0,.05) 50%, rgba(255,255,255,.38) 82%),
        repeating-linear-gradient(90deg, #e9e9e9 0 2px, #d7d7d7 2px 4px);
    color: #0d0d0d;
    overflow: hidden;
    box-shadow: 0 20px 52px rgba(0,0,0,.48), inset 0 0 0 4px rgba(255,255,255,.38), inset 0 0 0 8px rgba(120,0,0,.24);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.console::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.35), transparent 23%, transparent 65%, rgba(255,255,255,.16));
    mix-blend-mode: screen;
}
.console-top-glow { position:absolute; inset:0 0 auto; height:9px; background:rgba(255,255,255,.35); }
.brand-mark {
    position: absolute;
    left: 2.5%; top: 7.7%; width: 9%; aspect-ratio: 1;
    border: clamp(2px,.25vw,4px) solid #111;
    border-radius: 50%; display:flex; align-items:center; justify-content:center;
    font-size: clamp(20px, 3vw, 52px); letter-spacing:-.12em;
}
.brand-dot { position:absolute; left:-6%; width:18%; aspect-ratio:1; background:#351510; border-radius:50%; }
.console-title, .console-footer {
    position:absolute; left:18.2%; width:62.5%;
    display:flex; align-items:center; gap:12px; white-space:nowrap;
}
.console-title { top: 4.8%; }
.console-footer { bottom: 7.4%; }
.console-title span, .console-footer span { height:3px; background:#111; flex:1; }
.console-title b { color:var(--red); font-size:clamp(21px,3.15vw,57px); line-height:1; }
.console-footer b { font-size:clamp(18px,2.55vw,44px); line-height:1; }
.screen-shell {
    position:absolute; left:20.3%; top:16.8%; width:58.4%; height:67%;
    background:#777;
    border:clamp(7px,1vw,14px) solid var(--red);
    border-radius:clamp(12px,1.5vw,22px);
    box-shadow:0 0 0 4px #efefef, 0 0 0 8px #141414, 0 0 0 13px #efefef, 0 0 0 27px rgba(0,0,0,.09), inset 0 0 22px rgba(0,0,0,.3);
    overflow:hidden;
}
.game-screen { width:100%; height:100%; display:block; background:var(--lcd); }
.game-screen * { vector-effect: non-scaling-stroke; }
.lcd-bg { fill:#85877e; }
.scenery, .rabbit, .wolf, #eggsLayer, #missLayer { fill:none; stroke:var(--lcd-ink); stroke-width:4.3; stroke-linecap:round; stroke-linejoin:round; }
.hen { fill:rgba(20,22,18,.08); }
.hen circle { fill:var(--lcd-ink); stroke:none; }
.ramps path:first-child { stroke:#80521d; stroke-width:7; }
.ramp-rails { stroke:#80521d; stroke-width:4; }
.supports { stroke:#80521d; stroke-width:4; }
.bush { fill:#0b5f13; stroke:#0b5f13; }
.grass { stroke:#0b5f13; }
.rabbit { transition:opacity .08s; }
.rabbit.is-hidden { opacity:0; }
.rabbit .bell { fill:none; }
.score-text {
    font-family:"Courier New", monospace; font-size:72px; text-anchor:end; fill:#11150f;
    letter-spacing:2px; font-weight:400;
}
.mode-text { font:700 25px Arial,sans-serif; text-anchor:end; fill:#11150f; }
.egg { fill:none; stroke:#11150f; stroke-width:4.5; }
.miss-egg { fill:none; stroke:#11150f; stroke-width:4.5; }
.chick-icon { fill:none; stroke:#11150f; stroke-width:3.3; }
.chick-icon.half { animation:halfPenalty .55s steps(1,end) infinite; }
@keyframes halfPenalty { 50% { opacity:.15; } }
.wolf { transition:transform .065s steps(1,end); fill:none; }
.wolf-body { fill:rgba(18,20,16,.06); }
.wolf-body circle { fill:#11150f; stroke:none; }
.shorts { fill:rgba(20,22,18,.16); }
.basket { fill:rgba(20,22,18,.04); }
.wolf-arm { fill:none; }
.screen-message rect { fill:rgba(133,135,126,.94); stroke:#11150f; stroke-width:5; }
.screen-message text { fill:#11150f; text-anchor:middle; font:700 31px Arial,sans-serif; }
.screen-message text:last-child { font-size:24px; }
.screen-message.is-hidden { display:none; }
.side-buttons-right { position:absolute; top:7.4%; right:2.2%; width:12.5%; display:grid; gap:clamp(5px,.7vw,12px); }
.mode-button { border:0; background:transparent; color:#111; cursor:pointer; padding:0; text-align:center; }
.mode-button span {
    display:block; width:58%; height:clamp(23px,3vw,50px); margin:0 auto 2px;
    border:clamp(4px,.5vw,8px) solid var(--red);
    border-radius:999px; background:linear-gradient(#f7f7f7,#a5a5a5);
    box-shadow:inset 0 2px 4px rgba(255,255,255,.9),0 2px 2px rgba(0,0,0,.25);
}
.mode-button:active span, .mode-button.active span { transform:translateY(2px); background:linear-gradient(#a3a3a3,#ececec); }
.mode-button b { display:block; font-size:clamp(11px,1.35vw,23px); }
.speaker-symbol { position:absolute; left:86%; top:0; font-size:clamp(20px,2.6vw,45px); line-height:.75; text-align:center; }
.speaker-symbol i { display:block; font-style:normal; font-size:.55em; line-height:.55; letter-spacing:.12em; }
.movement-buttons { position:absolute; top:50%; transform:translateY(-36%); display:grid; gap:clamp(11px,1.5vw,24px); width:13%; }
.movement-left { left:2.2%; }
.movement-right { right:2.2%; }
.move-button {
    position:relative; border:0; background:transparent; padding:0; aspect-ratio:1.15; cursor:pointer;
    touch-action:none;
}
.move-button::before {
    content:""; position:absolute; width:58%; aspect-ratio:1; border-radius:50%; left:21%; top:18%;
    background:linear-gradient(145deg,#f7f7f7,#a0a0a0 68%,#e4e4e4);
    border:clamp(4px,.55vw,8px) solid var(--red);
    box-shadow:0 3px 4px rgba(0,0,0,.35),inset 0 2px 4px #fff;
}
.move-button:active::before, .move-button.active::before { transform:translateY(3px) scale(.97); filter:brightness(.88); }
.move-button i { position:absolute; color:rgba(0,0,0,.38); font:800 clamp(10px,1.15vw,18px) Arial; left:47%; top:39%; z-index:1; font-style:normal; }
.arrow { position:absolute; width:0; height:0; border-left:clamp(12px,1.4vw,23px) solid transparent; border-right:clamp(12px,1.4vw,23px) solid transparent; border-bottom:clamp(20px,2.4vw,39px) solid #111; z-index:1; }
.arrow-ul { left:0; top:0; transform:rotate(-45deg); }
.arrow-ll { left:0; bottom:0; transform:rotate(-135deg); }
.arrow-ur { right:0; top:0; transform:rotate(45deg); }
.arrow-lr { right:0; bottom:0; transform:rotate(135deg); }
.status-strip {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:12px;
    border:1px solid rgba(255,255,255,.12); border-radius:12px; overflow:hidden;
    background:rgba(255,255,255,.05);
}
.status-strip div { padding:10px 14px; text-align:center; background:rgba(9,10,13,.48); }
.status-strip small { display:block; opacity:.65; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.status-strip strong { display:block; margin-top:3px; }
.leaderboard-panel {
    background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.13); border-radius:18px;
    padding:18px; box-shadow:0 16px 42px rgba(0,0,0,.27); backdrop-filter:blur(10px);
}
.leaderboard-panel header { display:flex; justify-content:space-between; align-items:end; gap:12px; }
.leaderboard-panel small { opacity:.58; letter-spacing:.12em; font-weight:800; }
.leaderboard-panel h2 { margin:2px 0 0; font-size:28px; }
.leaderboard-tabs { display:flex; gap:5px; }
.leaderboard-tabs button { width:36px; height:33px; border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff; border-radius:9px; cursor:pointer; font-weight:900; }
.leaderboard-tabs button.active { background:var(--red); border-color:var(--red); }
.login-state { margin:15px 0 9px; padding:10px 11px; border-radius:10px; background:rgba(0,0,0,.22); font-size:13px; }
.login-state.logged { border-left:4px solid #58c86b; }
.login-state.guest { border-left:4px solid #f1b344; }
.leaderboard-list { margin:0; padding:0; list-style:none; counter-reset:rank; }
.leaderboard-list li { counter-increment:rank; display:grid; grid-template-columns:31px 1fr auto; align-items:center; gap:9px; min-height:42px; border-bottom:1px solid rgba(255,255,255,.08); }
.leaderboard-list li::before { content:counter(rank); width:25px; height:25px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.09); font-size:12px; font-weight:850; }
.leaderboard-list li:nth-child(1)::before { background:#e0b638; color:#211b00; }
.leaderboard-list li:nth-child(2)::before { background:#bcc1c8; color:#1d1f22; }
.leaderboard-list li:nth-child(3)::before { background:#b97846; color:#231104; }
.leaderboard-list .player { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard-list .points { font-variant-numeric:tabular-nums; font-weight:900; }
.leaderboard-list .loading, .leaderboard-list .empty { display:block; padding:17px 0; opacity:.6; }
.leaderboard-list .loading::before, .leaderboard-list .empty::before { display:none; }
.rules-note { margin:15px 0 0; opacity:.54; font-size:12px; line-height:1.45; }
body.is-fullscreen { overflow:hidden; background:#0b0c0e; }
body.is-fullscreen .page-shell { width:100vw; height:100vh; padding:0; display:block; }
body.is-fullscreen .toolbar, body.is-fullscreen .leaderboard-panel, body.is-fullscreen .status-strip { display:none; }
body.is-fullscreen .game-column { width:100%; height:100%; display:grid; place-items:center; }
body.is-fullscreen .console { width:min(100vw,172vh); height:auto; max-height:100vh; min-height:0; border-radius:0; }
@media (max-width:1100px) {
    .page-shell { grid-template-columns:1fr; }
    .leaderboard-panel { width:min(680px,100%); margin:0 auto; }
}
@media (max-width:760px) {
    body { background:#111317; }
    .page-shell { padding:7px; gap:10px; }
    .toolbar { margin:0 0 7px; }
    .toolbar-button span { display:none; }
    .console { min-height:0; aspect-ratio:1.54 / 1; border-width:8px; }
    .screen-shell { left:18.5%; width:63%; top:17%; height:64%; border-width:6px; box-shadow:0 0 0 2px #eee,0 0 0 5px #111,0 0 0 8px #eee,0 0 0 14px rgba(0,0,0,.09); }
    .brand-mark { left:1.5%; top:5%; width:12.5%; font-size:clamp(16px,5.2vw,33px); }
    .console-title { left:18%; width:64%; top:4%; }
    .console-title b { font-size:clamp(17px,5vw,34px); }
    .console-footer { left:20%; width:60%; bottom:5.8%; }
    .console-footer b { font-size:clamp(14px,4vw,27px); }
    .side-buttons-right { right:1%; width:14.5%; top:6%; }
    .mode-button b { font-size:clamp(8px,2.6vw,15px); }
    .mode-button span { border-width:3px; height:clamp(18px,5vw,32px); }
    .speaker-symbol { display:none; }
    .movement-buttons { width:16%; top:53%; gap:3px; }
    .movement-left { left:.4%; }
    .movement-right { right:.4%; }
    .move-button::before { border-width:4px; width:63%; left:18%; }
    .arrow { border-left-width:10px; border-right-width:10px; border-bottom-width:19px; }
    .move-button i { font-size:9px; }
    .status-strip { margin-top:7px; }
    .status-strip div { padding:7px 4px; }
    .status-strip strong { font-size:13px; }
    .leaderboard-panel { border-radius:13px; padding:14px; }
}
@media (orientation:portrait) and (max-width:760px) {
    .console { aspect-ratio:1.38 / 1; }
    .screen-shell { top:18%; height:60%; }
    .console-footer { bottom:6%; }
}

/* Kompaktní režim pro iframe portálu nebrzdime.cz. */
body.is-embedded {
    min-height: 100vh;
    overflow: hidden;
    background: #0c0e12;
}
body.is-embedded .page-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: block;
}
body.is-embedded .game-column {
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
}
body.is-embedded .toolbar,
body.is-embedded .leaderboard-panel,
body.is-embedded .status-strip {
    display: none !important;
}
body.is-embedded .console {
    width: min(100%, 1360px);
    max-height: 100vh;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
}
@media (max-width: 760px) {
    body.is-embedded .console {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        aspect-ratio: auto;
        border-radius: 0;
    }
}

/* v1.3.0 – celé zařízení je vždy vidět uvnitř mobilního herního okna. */
html { height: 100%; }
body.is-embedded {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
body.is-embedded .page-shell,
body.is-embedded .game-column {
    width: 100%;
    height: 100%;
    min-height: 0;
}
body.is-embedded .game-column {
    display: grid;
    place-items: center;
    overflow: hidden;
}
body.is-embedded .console {
    width: min(100vw, calc(100dvh * 1.72));
    height: min(100dvh, calc(100vw / 1.72));
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1.72 / 1;
    border-radius: 0;
    box-shadow: none;
}
@supports not (height: 100dvh) {
    body.is-embedded .console {
        width: min(100vw, calc(100vh * 1.72));
        height: min(100vh, calc(100vw / 1.72));
    }
}
@media (max-width: 760px) {
    body.is-embedded .console {
        width: min(100vw, calc(100dvh * 1.72));
        height: min(100dvh, calc(100vw / 1.72));
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: 1.72 / 1;
    }
}