/* =====================================================================
   Kubíkův vláček 2 – styly
   ===================================================================== */
:root {
  --paper: #fff9ef; --ink: #17313f; --muted: #4d6772; --line: rgba(23, 49, 63, 0.12);
  --shadow: 0 18px 44px rgba(31, 47, 59, 0.16);
  --gold: #ffd166; --gold2: #efb953; --coral: #ff8b6f; --mint: #7ee2b8; --sky: #9ddcff;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --font: "Trebuchet MS", "Avenir Next", "Segoe UI", sans-serif;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--font); color: var(--ink);
  background: radial-gradient(circle at top left, rgba(255,219,133,.5), transparent 30%), radial-gradient(circle at top right, rgba(134,215,255,.45), transparent 32%), linear-gradient(180deg, #9ddcff 0%, #f7fbff 40%, #fff0d2 100%);
  -webkit-user-select: none; user-select: none; touch-action: manipulation; overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; line-height: 1.5; }
.eyebrow { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.72); color: #8b5a12; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#bootError { position: fixed; z-index: 1000; inset: 12px 12px auto; max-height: 32vh; overflow: auto; padding: 12px 40px 12px 14px; border-radius: 14px; background: rgba(84,14,18,.94); color: #fff4ee; font: 13px/1.4 Consolas, monospace; white-space: pre-wrap; -webkit-user-select: text; user-select: text; }
#bootErrorClose { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff4ee; font: 700 16px var(--font); cursor: pointer; }

.screen { position: fixed; inset: 0; overflow: hidden; }
.screen[hidden] { display: none !important; }
.screen-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(14px + var(--sat)) calc(14px + var(--sar)) calc(30px + var(--sab)) calc(14px + var(--sal)); }
.screen-panel > * { max-width: 960px; margin-left: auto; margin-right: auto; }

/* ---------- tlačítka ---------- */
.btn-primary, .btn-secondary, .btn-danger { border: 0; border-radius: 16px; min-height: 50px; padding: 0 20px; font-size: 17px; font-weight: 800; transition: transform .12s, filter .12s; }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #58370a; box-shadow: 0 8px 20px rgba(239,185,83,.35); }
.btn-primary:disabled { filter: grayscale(.7); opacity: .6; }
.btn-secondary { background: rgba(255,255,255,.9); border: 1px solid var(--line); }
.btn-danger { background: #ffd9d3; color: #8a2a1c; }
.btn-small { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 12px; min-height: 38px; padding: 0 12px; font-weight: 700; font-size: 14px; }
.btn-buy { border: 0; border-radius: 12px; min-height: 42px; padding: 0 16px; font-weight: 800; font-size: 15px; background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #58370a; white-space: nowrap; box-shadow: 0 6px 14px rgba(239,185,83,.35); }
.btn-back { border: 1px solid var(--line); background: rgba(255,255,255,.9); border-radius: 12px; min-height: 40px; padding: 0 14px; font-weight: 800; font-size: 15px; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { font-size: clamp(22px, 4vw, 30px); flex: 1; }
.coins-chip { background: rgba(255,255,255,.85); border-radius: 999px; padding: 8px 14px; font-weight: 800; }

/* ---------- menu ---------- */
.screen-menu { display: grid; place-items: center; overflow-y: auto; padding: calc(16px + var(--sat)) 16px calc(16px + var(--sab)); }
.menu-shell { width: min(560px, 100%); display: grid; gap: 14px; }
.menu-hero { position: relative; padding: 24px 24px 20px; border-radius: 28px; background: linear-gradient(135deg, rgba(255,249,236,.97), rgba(255,255,255,.8)); border: 1px solid rgba(255,255,255,.7); box-shadow: var(--shadow); overflow: hidden; }
.menu-hero h1 { margin-top: 12px; font-size: clamp(30px, 7vw, 46px); }
.menu-sub { margin-top: 10px; color: var(--muted); }
.menu-hero { padding-bottom: 74px; }
.menu-train { position: absolute; right: 12px; bottom: 6px; width: 200px; height: 60px; pointer-events: none; animation: chug 3s ease-in-out infinite; }
.menu-train .scene-train { left: auto; right: 0; transform: scale(.42); transform-origin: bottom right; transition: none; }
@keyframes chug { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
.menu-main { display: grid; text-align: left; gap: 2px; padding: 18px 22px; border: 0; border-radius: 22px; background: linear-gradient(135deg, #ffb55f, #ff8b6f); color: #fff8f1; box-shadow: 0 14px 30px rgba(255,139,111,.4); }
.menu-main:active { transform: scale(.985); }
.menu-main-label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.menu-main-title { font-size: 22px; font-weight: 800; }
.menu-main-sub { font-size: 14px; opacity: .9; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.menu-btn { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.88); font-weight: 800; font-size: 15px; }
.menu-btn span { font-size: 24px; font-family: var(--emoji); }
.menu-btn:active { transform: scale(.97); }
/* Atribut hidden má jen výchozí display: none prohlížeče a display: flex u .menu-btn výš ho přebije – dlaždice
   menu nebo okna Pro rodiče, které hra (nebo budoucí úprava) dá hidden, by jinak zůstala vidět. */
.menu-btn[hidden] { display: none; }
.menu-stats { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; color: var(--muted); font-weight: 700; font-size: 14px; }

/* ---------- světy a kapitoly ---------- */
.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.world-card { text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.9); overflow: hidden; box-shadow: 0 10px 26px rgba(28,47,62,.1); border-top: 6px solid var(--accent); }
.world-card.locked { filter: grayscale(.8); opacity: .65; }
.world-thumb { display: block; width: 100%; height: 150px; object-fit: cover; background: #dfe; }
.world-body { padding: 12px 14px 14px; }
.world-body h3 { font-size: 19px; }
.world-body p { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.world-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; font-weight: 800; color: #8b5a12; }
.levels-intro { color: var(--muted); margin-bottom: 14px; }
.level-list { display: grid; gap: 10px; }
.level-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ch name stars" "ch best stars"; align-items: center; gap: 2px 12px; text-align: left; padding: 12px 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.9); }
.level-row.locked { opacity: .55; }
.level-row.done { border-color: rgba(126,226,184,.7); }
.level-chapter { grid-area: ch; font-size: 12px; font-weight: 800; color: #8b5a12; background: rgba(255,209,102,.35); padding: 6px 8px; border-radius: 10px; white-space: nowrap; }
.level-name { grid-area: name; font-weight: 800; font-size: 16px; }
.level-stars { grid-area: stars; font-size: 20px; color: #e8a400; letter-spacing: 2px; }
.level-best { grid-area: best; font-size: 13px; color: var(--muted); font-family: var(--emoji), var(--font); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 14px; background: rgba(23,49,63,.45); backdrop-filter: blur(6px); overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 28px); overflow-y: auto; padding: 22px; border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); }
.modal-small { display: grid; gap: 10px; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(23,49,63,.08); font-weight: 800; }
.modal-card h2 { margin-top: 10px; font-size: 24px; }
.brief-summary { margin-top: 10px; }
.brief-summary[hidden] { display: none; }
.guide-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(255,209,102,.22); font-size: 15px; }
.guide-avatar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 22px; font-family: var(--emoji); }
.task-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.task-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: #fff; font-weight: 700; font-size: 15px; }
.task-emoji { font-size: 24px; font-family: var(--emoji); }
.task-route { color: var(--muted); font-weight: 600; font-size: 13px; font-family: var(--emoji), var(--font); }
.req-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.req { padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: #e6f7ee; color: #1f6b43; }
.req.warn { background: #fff3d6; color: #8b5a12; }
.req.bad { background: #ffe0da; color: #8a2a1c; }
.brief-footer { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.brief-stars { font-size: 24px; color: #e8a400; margin-right: auto; }

/* ---------- hra ---------- */
.screen-play { background: #9fd274; }
#gameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(10px + var(--sat)) calc(10px + var(--sar)) calc(10px + var(--sab)) calc(10px + var(--sal)); transition: opacity .25s; }
.hud.hud-hidden { opacity: 0; }
.hud > * { pointer-events: none; }
.hud button { pointer-events: auto; }
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hud-level { max-width: 60%; padding: 8px 12px; border-radius: 16px; background: rgba(255,250,240,.9); box-shadow: 0 6px 16px rgba(0,0,0,.12); font-size: 14px; }
.hud-level b { display: block; font-size: 14px; }
.hud-tasks { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.hud-task { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; font-weight: 700; }
.hud-task.done { opacity: .5; text-decoration: line-through; }
.hud-task span:first-child { font-family: var(--emoji); font-size: 16px; }
.hud-task-to { color: var(--muted); font-weight: 600; font-family: var(--emoji), var(--font); }
.hud-right { display: flex; gap: 6px; align-items: center; }
.hud-time { padding: 6px 10px; border-radius: 12px; background: rgba(255,250,240,.9); font-weight: 800; font-variant-numeric: tabular-nums; }
.hud-icon { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255,250,240,.9); font-size: 18px; box-shadow: 0 6px 16px rgba(0,0,0,.12); font-family: var(--emoji); }
.hud-icon.active { background: var(--gold); }
.guide-bubble { align-self: center; margin-top: auto; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; max-width: min(520px, 92%); padding: 10px 14px; border-radius: 18px; background: rgba(255,250,240,.95); box-shadow: 0 10px 24px rgba(0,0,0,.14); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; font-weight: 700; font-size: 15px; }
.guide-bubble.show { opacity: 1; transform: none; }
.hud-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; }
.hud-gauges { display: grid; gap: 5px; padding: 8px 10px; border-radius: 14px; background: rgba(255,250,240,.9); font-size: 14px; }
.gauge { display: flex; align-items: center; gap: 6px; }
.gauge span { font-family: var(--emoji); }
.gauge-bar { width: 58px; height: 8px; border-radius: 4px; background: rgba(23,49,63,.12); overflow: hidden; }
.gauge-bar i { display: block; height: 100%; width: 0; transition: width .4s; }
.hud-speed { justify-self: center; text-align: center; padding: 6px 12px; border-radius: 14px; background: rgba(255,250,240,.9); min-width: 96px; }
.speed-value { font-size: 26px; font-weight: 800; line-height: 1; }
.speed-value small { font-size: 11px; margin-left: 3px; }
.speed-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(23,49,63,.12); overflow: hidden; }
.speed-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--gold), var(--coral)); transition: width .15s; }
.hud-controls { display: flex; gap: 8px; align-items: end; }
.ctl { display: grid; place-items: center; gap: 2px; border: 0; border-radius: 18px; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,.16); touch-action: none; -webkit-user-select: none; user-select: none; }
.ctl small { font-size: 11px; font-weight: 800; }
.ctl-throttle { width: 84px; height: 84px; font-size: 30px; background: linear-gradient(180deg, #8ff0c4, #46c88c); color: #0d4d30; }
.ctl-brake { width: 74px; height: 74px; font-size: 26px; background: linear-gradient(180deg, #ffb3a7, #f0705a); color: #5a1d12; font-family: var(--emoji); }
.ctl-brake small, .ctl-horn small { font-family: var(--font); }
.ctl-horn { width: 62px; height: 62px; font-size: 24px; background: linear-gradient(180deg, #ffe08a, #efb953); color: #58370a; font-family: var(--emoji); }
.ctl-switch { width: 96px; height: 62px; font-size: 12px; background: linear-gradient(180deg, #d8ccff, #ab98ea); color: #2e1f66; }
.ctl-reverse { width: 62px; height: 62px; font-size: 22px; background: linear-gradient(180deg, #e9edf2, #b8c2cc); color: #2e3a44; }
.ctl-reverse.active { background: linear-gradient(180deg, #ffd983, #efb953); color: #58370a; transform: none; filter: none; box-shadow: 0 0 0 4px rgba(239,185,83,.35), 0 8px 18px rgba(0,0,0,.16); }
.ctl-switch b { font-size: 14px; }
.ctl-switch span { font-size: 11px; opacity: .85; }
.ctl.active { filter: brightness(1.12); transform: scale(.95); }
body.big-buttons .ctl-throttle { width: 104px; height: 104px; }
body.big-buttons .ctl-brake { width: 92px; height: 92px; }
body.big-buttons .ctl-horn { width: 76px; height: 76px; }
.pause-help { font-size: 13px; color: var(--muted); }
.hud-hand { position: absolute; z-index: 30; font-size: 44px; font-family: var(--emoji); transform: translate(-50%, -100%); pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); opacity: 0; transition: opacity .3s; }
.hud-hand.show { opacity: 1; animation: handpoke 1s ease-in-out infinite; }
@keyframes handpoke { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, -70%); } }
@media (max-width: 560px) {
  .hud-bottom { grid-template-columns: 1fr; gap: 6px; }
  .hud-gauges { grid-auto-flow: column; justify-self: start; }
  .hud-speed { justify-self: start; }
  .hud-controls { justify-content: flex-end; }
  .hud-level { max-width: 70%; }
}

/* ---------- scéna stanice ---------- */
.scene { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; background: #fff; padding-top: var(--sat); padding-bottom: var(--sab); }
.scene[hidden] { display: none; }
.scene-head { padding: 8px 14px 6px; background: var(--paper); border-bottom: 1px solid var(--line); }
.scene-title { display: flex; align-items: center; gap: 10px; }
.scene-title b { display: block; font-size: 18px; }
.scene-title small { color: var(--muted); font-weight: 700; }
.scene-icon { font-size: 30px; font-family: var(--emoji); }
.scene-hint { margin-top: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255,209,102,.25); font-weight: 700; font-size: 14.5px; min-height: 36px; transition: background .3s; }
.scene-hint.important { background: rgba(255,139,111,.3); }
.scene-view { position: relative; flex: 1; min-height: 230px; max-height: 58vh; overflow: hidden; --ground: min(30%, 150px); --back: 92px; }
.scene-sky { position: absolute; inset: 0; overflow: hidden; }
.s-sun { position: absolute; left: 8%; top: 6%; font-size: 44px; font-family: var(--emoji); filter: drop-shadow(0 0 14px rgba(255,220,120,.8)); }
.s-stars { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(circle, #fff 1.2px, transparent 1.6px), radial-gradient(circle, #fff 1px, transparent 1.4px); background-size: 90px 70px, 140px 110px; background-position: 10px 12px, 50px 40px; }
.scene-night .s-stars { opacity: .8; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .45; } }
.s-cloud { position: absolute; width: 110px; height: 34px; border-radius: 30px; background: rgba(255,255,255,.9); animation: cloud 40s linear infinite; }
.s-cloud::before, .s-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.s-cloud::before { width: 46px; height: 46px; left: 18px; top: -22px; }
.s-cloud::after { width: 34px; height: 34px; left: 56px; top: -14px; }
.s-cloud.c1 { top: 12%; left: -140px; } .s-cloud.c2 { top: 26%; left: -140px; animation-duration: 55s; animation-delay: -20s; transform: scale(.7); } .s-cloud.c3 { top: 5%; left: -140px; animation-duration: 70s; animation-delay: -45s; transform: scale(1.2); }
@keyframes cloud { to { left: 110%; } }
.scene-night .s-cloud { opacity: .25; }
.scene-hills { position: absolute; left: -10%; right: -10%; bottom: calc(var(--ground) + 60px); height: 42%; background: radial-gradient(ellipse at 20% 100%, var(--hill) 0 40%, transparent 41%), radial-gradient(ellipse at 60% 100%, var(--hill2) 0 45%, transparent 46%), radial-gradient(ellipse at 95% 100%, var(--hill) 0 35%, transparent 36%); }
.scene-props { position: absolute; inset: 0; pointer-events: none; }
.scene-props::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--ground); height: var(--back); background: linear-gradient(180deg, color-mix(in srgb, var(--hill2, #9fd274) 85%, white), var(--hill2, #9fd274)); }
.scene-props::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--ground) + var(--back) - 8px); height: 14px; opacity: .55; background: repeating-linear-gradient(90deg, #b48a5a 0 4px, transparent 4px 18px), linear-gradient(#b48a5a, #b48a5a) 0 6px / 100% 3px no-repeat; }
.scene-props > * { pointer-events: auto; }
.scene-building { position: absolute; right: 4%; bottom: calc(var(--ground) + var(--back)); width: min(240px, 42%); --accent: #ffb965; transition: transform .2s; z-index: 1; }
.scene-building.bounce { animation: bounce .5s; }
@keyframes bounce { 30% { transform: translateY(-10px) scale(1.04); } 60% { transform: translateY(0) scale(1); } }
.s-roof { height: 34px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), var(--accent)); border-radius: 12px 12px 0 0; margin: 0 -14px; box-shadow: 0 4px 0 rgba(0,0,0,.1); position: relative; }
.s-roof::before { content: ""; position: absolute; left: 50%; top: -22px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #fff; border: 3px solid #17313f; box-sizing: border-box; background-image: linear-gradient(#17313f, #17313f), linear-gradient(#17313f, #17313f); background-size: 2px 9px, 7px 2px; background-position: 50% 30%, 60% 50%; background-repeat: no-repeat; }
.s-roof::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 6px; background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 14px, transparent 14px 28px); }
.s-wall { position: relative; height: 96px; background: linear-gradient(180deg, #fbf3e2, #f0e2c6); border: 2px solid rgba(90,60,20,.15); border-top: 0; display: grid; place-items: center; }
.s-wall::before, .s-wall::after { content: ""; position: absolute; top: 18px; width: 26px; height: 30px; border-radius: 6px 6px 2px 2px; background: #bfe6ff; border: 3px solid #b48a5a; box-sizing: border-box; }
.s-wall::before { left: 14px; } .s-wall::after { right: 14px; }
.scene-night .s-wall::before, .scene-night .s-wall::after { background: #ffe08a; box-shadow: 0 0 12px rgba(255,224,138,.8); }
.s-sign { padding: 6px 12px; border-radius: 10px; background: #fff; border: 2px solid #17313f; font-weight: 800; font-size: 14px; text-align: center; max-width: 60%; }
.s-lamp-post { position: absolute; left: -26px; bottom: 0; width: 5px; height: 120px; background: #3a3f44; }
.s-lamp-post::after { content: ""; position: absolute; left: -7px; top: -10px; width: 18px; height: 14px; border-radius: 6px 6px 3px 3px; background: #ffe08a; box-shadow: 0 0 18px rgba(255,224,138,.9); }
.s-tower { position: absolute; left: 4%; bottom: calc(var(--ground) + var(--back)); width: 100px; height: 190px; z-index: 1; }
.s-tower[hidden], .s-bunker[hidden] { display: none; }
.s-tower-tank { position: absolute; left: 5px; top: 0; width: 80px; height: 70px; border-radius: 12px; background: linear-gradient(180deg, #8aa7b8, #5c7686); border: 3px solid #45596a; overflow: hidden; }
.s-tower-tank i { position: absolute; left: 0; right: 0; bottom: 0; height: 75%; background: linear-gradient(180deg, #6fc3f0, #3f9fd8); }
.s-tower-legs { position: absolute; left: 14px; right: 14px; top: 70px; bottom: 0; background: repeating-linear-gradient(90deg, #6b4a2a 0 8px, transparent 8px 26px), repeating-linear-gradient(0deg, transparent 0 22px, rgba(107,74,42,.6) 22px 26px); }
.s-crane { position: absolute; left: 70px; top: 30px; width: 90px; height: 12px; background: #45596a; border-radius: 6px; transform-origin: left center; transform: rotate(-35deg); transition: transform .6s ease; }
.s-tower.connected .s-crane { transform: rotate(0deg); }
.s-hose { position: absolute; right: -4px; top: 3px; width: 12px; height: 26px; border-radius: 6px; background: #3f7fd6; }
.s-hose-handle { position: absolute; right: -22px; top: 6px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 3px solid #3f7fd6; font-size: 24px; font-family: var(--emoji); cursor: grab; touch-action: none; box-shadow: 0 6px 14px rgba(0,0,0,.2); opacity: .5; transform: rotate(35deg); }
.s-tower.ready .s-hose-handle { opacity: 1; animation: pulse 1.2s infinite; }
.s-tower.connected .s-hose-handle { display: none; }
.s-bunker { position: absolute; left: 22%; bottom: calc(var(--ground) + var(--back)); width: 130px; height: 96px; z-index: 1; }
.s-bunker-roof { position: absolute; left: -8px; right: -8px; top: 0; height: 22px; background: #6b4a2a; border-radius: 6px 6px 0 0; }
.s-bunker-pile { position: absolute; left: 8px; right: 8px; bottom: 0; height: 62px; border-radius: 50% 50% 4px 4px / 70% 70% 4px 4px; background: radial-gradient(circle at 30% 30%, #4a4f55, #22262a 70%); box-shadow: inset 0 -8px 0 #111; }
.s-shovel { position: absolute; right: -16px; bottom: 8px; font-size: 40px; font-family: var(--emoji); transform-origin: bottom left; transform: rotate(-20deg); cursor: pointer; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); opacity: .55; }
.s-bunker.ready .s-shovel { opacity: 1; animation: pulse 1.2s infinite; }
.s-bunker.swing .s-shovel { animation: swing .45s ease-out; }
@keyframes swing { 0% { transform: rotate(-20deg); } 40% { transform: rotate(-90deg) translateY(-10px); } 100% { transform: rotate(-20deg); } }
.s-master { position: absolute; right: calc(4% + min(240px, 42%) + 10px); bottom: calc(var(--ground) + var(--back)); z-index: 1; font-size: 46px; font-family: var(--emoji); line-height: 1; }
.s-master.wave { animation: wave .6s ease-in-out 2; }
@keyframes wave { 50% { transform: rotate(-8deg) translateY(-4px); } }
.s-master-bubble { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px) scale(.8); padding: 6px 10px; border-radius: 12px; background: #fff; border: 2px solid var(--ink); font: 800 13px var(--font); white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; }
.s-master-bubble.show { opacity: 1; transform: translate(-50%, -6px) scale(1); }
.s-master-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; background: #fff; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.scene-rails { position: absolute; left: 0; right: 0; bottom: var(--ground); height: 12px; background: repeating-linear-gradient(90deg, #8d6b45 0 10px, transparent 10px 22px); border-top: 3px solid #5f6b73; border-bottom: 3px solid #5f6b73; }
.scene-platform { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ground); background: linear-gradient(180deg, #f2c85a, #e2b448); border-top: 6px solid #fff3c4; }
.scene-platform::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: repeating-linear-gradient(90deg, #fff 0 14px, transparent 14px 28px); opacity: .6; }
.scene-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; }
.scene-tray.drop-ok { outline: 3px dashed var(--mint); }
.scene-train-wrap { position: absolute; left: 0; right: 0; bottom: calc(var(--ground) + 8px); height: 150px; z-index: 3; }
@media (max-height: 760px) {
  .scene-view { --back: 30px; }
  .scene-building, .s-tower, .s-bunker, .s-master { transform: scale(.7); transform-origin: bottom center; }
  .s-master { transform-origin: bottom right; }
}
.scene-train { position: absolute; left: 50%; bottom: 0; display: flex; align-items: flex-end; gap: 6px; white-space: nowrap; --scale: 1; --offset: 0px; transform: translateX(calc(-50% + var(--offset))) scale(var(--scale)); transform-origin: bottom center; }
.scene-train.rolling .s-wheels i, .scene-train.rolling .s-wheels::before, .scene-train.rolling .s-wheels::after { animation: spin .35s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scene-dirt { position: absolute; pointer-events: none; z-index: 5; touch-action: none; }
.scene-shine { position: absolute; z-index: 6; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); background-size: 200% 100%; }
.scene-shine.show { opacity: 1; animation: shine 1.6s ease-in-out infinite; }
@keyframes shine { from { background-position: 200% 0; } to { background-position: -100% 0; } }
.scene[data-sub="hose"] .scene-dirt { cursor: crosshair; }

.s-loco { position: relative; width: 150px; height: 104px; --body: #e0453a; --trim: #ffd166; }
.s-loco .s-boiler { position: absolute; left: 0; bottom: 24px; width: 100px; height: 46px; border-radius: 23px 10px 10px 23px; background: linear-gradient(180deg, color-mix(in srgb, var(--body) 80%, white), var(--body) 60%, color-mix(in srgb, var(--body) 70%, black)); }
.s-loco .s-lamp { position: absolute; left: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: #fff1a8; box-shadow: 0 0 12px #fff1a8; border: 2px solid #5b6167; z-index: 2; }
.s-loco .s-boiler::before { content: ""; position: absolute; left: 2px; top: 5px; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #6b7177, #2b2f33 70%); border: 2px solid #1f2225; box-sizing: border-box; }
.s-loco .s-boiler::after { content: ""; position: absolute; left: 52px; top: -12px; width: 26px; height: 18px; border-radius: 13px 13px 3px 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--trim) 85%, white), color-mix(in srgb, var(--trim) 70%, black)); }
.s-loco .s-cab { position: absolute; right: 8px; bottom: 24px; width: 52px; height: 78px; border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--body) 75%, black) 0 14%, var(--body) 14%); border: 2px solid rgba(0,0,0,.18); }
.s-loco .s-cab::before { content: ""; position: absolute; left: -8px; right: -8px; top: -6px; height: 12px; border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--trim) 85%, white), var(--trim)); box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.s-loco::before { content: ""; position: absolute; left: -14px; bottom: 6px; width: 24px; height: 26px; background: linear-gradient(180deg, #d9dde2, #9aa3a8); clip-path: polygon(100% 0, 100% 100%, 0 100%, 55% 45%); border-radius: 3px; }
.s-loco::after { content: ""; position: absolute; left: 28px; width: 92px; bottom: 9px; height: 5px; border-radius: 3px; background: #c0392b; box-shadow: 0 1px 0 rgba(0,0,0,.3); z-index: 3; }
.s-loco .s-window { position: absolute; left: 8px; top: 16px; width: 34px; height: 28px; border-radius: 10px 10px 5px 5px; background: linear-gradient(135deg, #e8f7ff, #9fd3f5); border: 2px solid rgba(0,0,0,.2); box-sizing: border-box; }
.s-loco .s-firebox { position: absolute; left: 12px; bottom: 6px; width: 26px; height: 16px; border-radius: 4px; background: radial-gradient(circle at 50% 100%, #ffd166, #ff7a2b 55%, #7a2a10); box-shadow: 0 0 10px rgba(255,140,40,.8); transition: opacity .4s; }
.s-firebox.flash { animation: flash .5s; }
@keyframes flash { 30% { box-shadow: 0 0 26px rgba(255,180,60,1); transform: scale(1.15); } }
.s-loco .s-chimney { position: absolute; left: 20px; bottom: 64px; width: 18px; height: 30px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #4a4f55, #2b2f33 60%, #1f2225); }
.s-loco .s-chimney::after { content: ""; position: absolute; left: -6px; top: -4px; width: 30px; height: 11px; border-radius: 6px; background: linear-gradient(180deg, #7b8188, #3a3f44); }
.s-flags { position: absolute; left: 44px; bottom: 74px; display: flex; gap: 6px; }
.s-flags b { width: 10px; height: 14px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: #ff8b6f; }
.s-flags b:nth-child(2) { background: #7ee2b8; } .s-flags b:nth-child(3) { background: #ab98ea; }
.s-wheels { position: absolute; left: 10px; right: 10px; bottom: 0; height: 24px; display: flex; justify-content: space-around; }
.s-wheels i, .s-wheels::before, .s-wheels::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background: repeating-conic-gradient(#2b2f33 0 6deg, #b9c1c7 6deg 45deg); border: 3px solid #2b2f33; box-sizing: border-box; box-shadow: inset 0 0 0 3px #7b8188; }
.s-loco .s-wheels { left: 30px; right: 24px; height: 30px; }
.s-loco .s-wheels i, .s-loco .s-wheels::before, .s-loco .s-wheels::after { width: 30px; height: 30px; }
.s-tender { position: relative; width: 84px; height: 80px; }
.s-tender-body { position: absolute; left: 0; right: 0; bottom: 22px; height: 50px; border-radius: 6px 6px 4px 4px; background: linear-gradient(180deg, #7a3a30, #5a2a22); border: 2px solid rgba(0,0,0,.25); overflow: hidden; }
.s-coal-pile { position: absolute; left: 6px; right: 26px; bottom: 0; height: 100%; border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: radial-gradient(circle at 30% 30%, #4a4f55, #1f2226 70%); transition: height .4s; }
.s-water-glass { position: absolute; right: 6px; top: 6px; bottom: 6px; width: 12px; border-radius: 6px; background: rgba(255,255,255,.6); border: 2px solid #3b4a56; overflow: hidden; }
.s-water-glass i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(180deg, #7fd0ff, #3f9fd8); transition: height .3s; }
.s-tender.drop-target .s-tender-body, .s-tender.drop-ok .s-tender-body { outline: 4px solid var(--mint); box-shadow: 0 0 0 8px rgba(126,226,184,.35); }
.s-wagon { position: relative; width: 118px; height: 92px; --wcolor: #c98a4b; }
.s-wagon .s-slots { position: absolute; left: 4px; right: 4px; bottom: 24px; height: 58px; display: flex; gap: 4px; align-items: flex-end; justify-content: center; padding: 4px; border-radius: 8px; background: var(--wcolor); border: 2px solid rgba(0,0,0,.2); }
.s-coach .s-slots { background: linear-gradient(180deg, color-mix(in srgb, var(--wcolor) 70%, white) 0 30%, var(--wcolor) 30%); border-radius: 12px 12px 6px 6px; }
.s-tank .s-slots { border-radius: 28px; background: linear-gradient(180deg, #d8e7ee, var(--wcolor) 55%, #6f8590); }
.s-liquid { position: absolute; left: 10px; right: 10px; bottom: 28px; height: 0; border-radius: 0 0 22px 22px; background: rgba(90,170,230,.55); pointer-events: none; transition: height .5s; }
.s-cattle .s-slots { background: repeating-linear-gradient(90deg, var(--wcolor) 0 8px, color-mix(in srgb, var(--wcolor) 60%, black) 8px 10px); }
.s-fireworks .s-slots { background: linear-gradient(135deg, #ff8b6f, #ab98ea); }
.s-empty .s-slots { background: rgba(255,255,255,.35); border: 2px dashed rgba(23,49,63,.35); color: var(--muted); font-size: 11px; font-weight: 800; align-items: center; }
.s-wagon-label { position: absolute; left: 0; right: 0; top: -4px; text-align: center; font-size: 11px; font-weight: 800; color: var(--ink); background: rgba(255,255,255,.8); border-radius: 8px; padding: 2px 4px; }
.s-wagon.drop-target .s-slots { outline: 3px dashed var(--mint); }
.s-wagon.drop-ok .s-slots { outline: 4px solid var(--mint); box-shadow: 0 0 0 8px rgba(126,226,184,.35); }
.s-wagon.drop-bad .s-slots { outline: 4px solid #f0705a; }
.s-wagon.shake { animation: shake .45s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.s-door { position: absolute; left: 6px; bottom: 26px; width: 16px; height: 50px; border-radius: 4px; background: color-mix(in srgb, var(--wcolor) 70%, black); border: 2px solid rgba(0,0,0,.3); transform-origin: left center; transition: transform .3s; cursor: pointer; z-index: 2; }
.s-door::after { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 14px; border-radius: 3px; background: #e8f6ff; }
.s-door.open { transform: perspective(200px) rotateY(-110deg); }
.s-gate { position: absolute; right: 6px; bottom: 26px; width: 20px; height: 50px; background: repeating-linear-gradient(0deg, #6b4a2a 0 6px, transparent 6px 12px); border: 3px solid #6b4a2a; border-radius: 4px; transform-origin: right center; transition: transform .3s; cursor: pointer; z-index: 2; }
.s-gate.open { transform: perspective(200px) rotateY(110deg); }
.s-door.pulse, .s-gate.pulse { animation: pulse .8s infinite; }
.s-door.slam, .s-gate.slam { animation: slam .4s; }
@keyframes slam { 50% { transform: scaleX(1.15); } }
.s-slot { flex: 1; height: 100%; border-radius: 6px; background: rgba(255,255,255,.28); display: grid; place-items: center; min-width: 0; }
.s-chip { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 6px; background: rgba(255,255,255,.9); cursor: grab; touch-action: none; animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.4); } }
.s-chip.wave .s-emoji { animation: wavehand 2.2s ease-in-out infinite; display: inline-block; }
@keyframes wavehand { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-12deg); } 86% { transform: rotate(12deg); } 94% { transform: rotate(-8deg); } }
.s-chip-deliver { background: #d8ffe9; outline: 3px solid #46c88c; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(70,200,140,.28); } }
.s-emoji { font-family: var(--emoji); font-size: 26px; line-height: 1; }
.s-chip-tag { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9px; font-weight: 800; background: var(--ink); color: #fff; padding: 2px 5px; border-radius: 6px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.tool-dock { position: absolute; right: 8px; top: 8px; z-index: 12; display: grid; gap: 6px; }
.tool-btn { display: grid; justify-items: center; gap: 2px; width: 62px; padding: 6px 4px; border: 0; border-radius: 14px; background: rgba(255,250,240,.94); box-shadow: 0 6px 14px rgba(0,0,0,.16); font-size: 11px; font-weight: 800; }
.tool-btn.on { background: var(--gold); }
.tool-btn.alert { animation: pulse 1.4s infinite; outline: 2px solid var(--coral); }
.tool-emoji { font-family: var(--emoji); font-size: 24px; }
.tool-mini { width: 44px; height: 6px; border-radius: 3px; background: rgba(23,49,63,.15); overflow: hidden; }
.tool-mini i { display: block; height: 100%; }
.tool-panel { position: absolute; left: 8px; right: 78px; bottom: 8px; z-index: 12; padding: 10px; border-radius: 16px; background: rgba(255,250,240,.96); box-shadow: 0 10px 24px rgba(0,0,0,.18); display: grid; gap: 8px; }
.tool-panel[hidden] { display: none; }
.tool-title { font-weight: 800; font-size: 14px; }
.tool-note { font-size: 13px; color: var(--muted); }
.subtool-row { display: flex; gap: 6px; }
.subtool-row button { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 800; font-size: 13px; }
.subtool-row button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tool-progress { height: 10px; border-radius: 5px; background: rgba(23,49,63,.12); overflow: hidden; }
.tool-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), #46c88c); transition: width .25s; }
.pump-btn, .shovel-btn { min-height: 56px; border: 0; border-radius: 14px; font-weight: 800; font-size: 17px; background: linear-gradient(180deg, #8fd6ff, #3f9fd8); color: #0b3a5c; touch-action: none; -webkit-user-select: none; user-select: none; }
.pump-btn:disabled { filter: grayscale(.6); opacity: .6; }
.pump-btn.active { transform: scale(.97); filter: brightness(1.1); }
.shovel-btn { background: linear-gradient(180deg, #6b6f75, #34383d); color: #fff; }
.shovel-btn:active { transform: scale(.96); }
.tool-close { min-height: 40px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 800; }
.s-pointer { position: absolute; z-index: 14; font-size: 46px; font-family: var(--emoji); pointer-events: none; transform: translate(-90%, -50%) rotate(-30deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); opacity: 0; transition: opacity .3s; }
.s-pointer[hidden] { display: none; }
.s-pointer.show { opacity: 1; animation: point 1s ease-in-out infinite; }
.s-pointer.travel { animation: travel 1.6s ease-in-out infinite; }
@keyframes point { 50% { transform: translate(-70%, -35%) rotate(-30deg); } }
@keyframes travel { 0%, 15% { left: var(--fx); top: var(--fy); } 65%, 100% { left: var(--tx); top: var(--ty); } }
.scene-gauges { display: flex; gap: 10px; padding: 8px 14px; background: var(--paper); border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.s-gauge { display: flex; align-items: center; gap: 5px; flex: 1; }
.s-gauge span { font-family: var(--emoji); font-size: 14px; }
.s-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(23,49,63,.12); overflow: hidden; }
.s-bar i { display: block; height: 100%; transition: width .3s; }
.scene-tray { flex: 1; padding: 8px 14px; background: var(--paper); min-height: 118px; overflow-y: auto; }
.scene-tray-title { font-size: 13px; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.scene-tray-items { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
.s-card { flex: none; width: 108px; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border-radius: 14px; background: #fff; border: 2px solid var(--line); text-align: center; cursor: grab; touch-action: none; }
.s-card-label { font-size: 12px; font-weight: 800; }
.s-card-to { font-size: 11px; color: #8b5a12; font-weight: 700; }
.s-card-kind { font-size: 10px; color: var(--muted); }
.s-card-done { opacity: .55; border-color: #46c88c; cursor: default; }
.s-card-nowagon { border-color: #f0705a; border-style: dashed; }
.s-ghost { position: fixed; left: 0; top: 0; z-index: 999; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 12px 26px rgba(0,0,0,.25); pointer-events: none; }
.s-ghost .s-emoji { font-size: 34px; }
.scene-actions { display: flex; gap: 8px; padding: 8px 14px 12px; background: var(--paper); }
.scene-btn { flex: 1; min-height: 54px; border: 0; border-radius: 16px; font-weight: 800; font-size: 17px; background: rgba(255,255,255,.95); border: 1px solid var(--line); }
.scene-btn-go { background: linear-gradient(180deg, #8ff0c4, #46c88c); color: #0d4d30; }
.scene-btn-go:disabled { opacity: .6; }
.scene.busy .scene-tray, .scene.busy .tool-dock { pointer-events: none; opacity: .7; }
.scene-night .scene-hills { filter: brightness(.45); }
.scene-night .scene-platform { filter: brightness(.75); }
.scene-night .s-sun { filter: drop-shadow(0 0 14px rgba(200,220,255,.8)); }
.scene-dusk .scene-hills { filter: sepia(.3) brightness(.9); }

/* ---------- výsledek ---------- */
.screen-result { display: grid; place-items: center; }
.result-card { width: min(560px, 100%); padding: 24px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.result-card h2 { margin-top: 10px; font-size: 26px; }
.result-stars { font-size: 48px; margin: 10px 0; letter-spacing: 6px; }
.result-stars .star { color: rgba(23,49,63,.2); display: inline-block; }
.result-stars .star.on { color: #e8a400; animation: starpop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes starpop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1); } }
.result-outro { color: var(--muted); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.result-grid div { padding: 10px 6px; border-radius: 14px; background: #fff; }
.result-grid span { display: block; font-size: 12px; color: var(--muted); font-weight: 700; }
.result-grid b { font-size: 15px; }
.unlock { margin-top: 10px; padding: 10px; border-radius: 14px; background: rgba(255,209,102,.35); font-weight: 800; }
.result-actions { display: grid; gap: 8px; margin-top: 16px; }

/* ---------- depo ---------- */
.depot-stage { position: relative; height: 230px; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 12px; background: #9ddcff; }
.depot-stage .scene-sky { background: linear-gradient(#9ddcff, #ffffff); }
.depot-stage .scene-hills { bottom: 30%; }
.depot-stage .scene-rails { bottom: 26%; }
.depot-stage .scene-platform { height: 26%; }
.depot-stage .scene-train-wrap { bottom: calc(26% + 8px); height: 150px; }
.depot-stage .scene-train { transform: translateX(-50%) scale(var(--scale)); transition: none; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; }
.tabs button { flex: none; border: 1px solid var(--line); background: rgba(255,255,255,.85); border-radius: 999px; min-height: 42px; padding: 0 16px; font-weight: 800; font-size: 14px; font-family: var(--emoji), var(--font); }
.tabs button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.depot-content h3 { margin: 18px 0 8px; font-size: 17px; }
.depot-note { color: var(--muted); font-size: 14px; }
.depot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.depot-stats div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.9); border: 1px solid var(--line); }
.depot-stats span { grid-row: span 2; font-size: 26px; font-family: var(--emoji); }
.depot-stats b { font-size: 14px; }
.depot-stats small { color: var(--muted); font-size: 12px; }
.tp-wagon { display: inline-block; flex: none; width: 70px; height: 40px; border-radius: 6px; background: var(--wcolor, #c98a4b); border: 2px solid rgba(0,0,0,.2); vertical-align: middle; position: relative; }
.tp-wagon::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -8px; height: 8px; background: radial-gradient(circle at 20% 50%, #2b2f33 0 4px, transparent 5px), radial-gradient(circle at 80% 50%, #2b2f33 0 4px, transparent 5px); }
.tp-mini { width: 34px; height: 20px; border-radius: 4px; }
.tp-mini::after { display: none; }
.tp-coach { background: linear-gradient(180deg, #e8f6ff 0 35%, var(--wcolor) 35%); border-radius: 10px 10px 6px 6px; }
.tp-tank { border-radius: 20px; background: linear-gradient(180deg, #e2edf3, var(--wcolor) 55%, #6f8590); }
.tp-cattle { background: repeating-linear-gradient(90deg, var(--wcolor) 0 6px, #7a9950 6px 8px); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.slot-card { padding: 12px; border-radius: 18px; background: rgba(255,255,255,.9); border: 1px solid var(--line); display: grid; gap: 10px; }
.slot-wagon { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 12px; align-items: center; }
.slot-wagon .tp-wagon { grid-row: span 2; }
.slot-wagon small { color: var(--muted); font-size: 12px; }
.slot-empty { padding: 16px; border-radius: 12px; border: 2px dashed var(--line); text-align: center; color: var(--muted); font-weight: 700; }
.slot-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; min-height: 40px; padding: 0 14px; font-weight: 800; font-size: 14px; font-family: var(--emoji), var(--font); }
.chip.on { background: var(--ink); color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.shop-card { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.92); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(28,47,62,.08); }
.shop-card.owned-card { border-color: rgba(126,226,184,.8); }
.shop-card p { font-size: 13px; color: var(--muted); }
.shop-card small { font-size: 12px; color: #8b5a12; font-weight: 700; }
.shop-preview { width: 100%; height: 76px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(180deg, #e6f4ff, #f6fbff); }
.shop-icon { font-size: 40px; font-family: var(--emoji); }
.owned { padding: 8px 14px; border-radius: 999px; background: #e6f7ee; color: #1f6b43; font-weight: 800; font-size: 13px; }
.dots { display: flex; gap: 4px; }
.dots i { width: 16px; height: 8px; border-radius: 4px; background: rgba(23,49,63,.15); }
.dots i.on { background: var(--gold2); }
.paint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.paint-card { display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.9); border: 2px solid var(--line); text-align: center; }
.paint-card.on { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(239,185,83,.3); }
.paint-swatch { width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15), 0 6px 12px rgba(0,0,0,.15); }
.paint-card small { color: var(--muted); font-weight: 700; font-size: 12px; }

/* ---------- nastavení / účet / instalace ---------- */
.settings-card { padding: 16px; border-radius: 22px; background: rgba(255,255,255,.9); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(28,47,62,.08); margin-bottom: 12px; }
.settings-card h3 { margin: 0 0 10px; font-size: 17px; font-family: var(--emoji), var(--font); }
.settings-note { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.switch-row:first-of-type { border-top: 0; padding-top: 4px; }
.switch-row span { display: grid; gap: 2px; }
.switch-row small { color: var(--muted); font-weight: 600; font-size: 13px; }
.switch-row input { appearance: none; flex: none; width: 52px; height: 30px; border-radius: 15px; background: rgba(23,49,63,.2); position: relative; transition: background .2s; cursor: pointer; }
.switch-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: left .2s; }
.switch-row input:checked { background: #46c88c; }
.switch-row input:checked::after { left: 25px; }
.stats-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.stats-box div { padding: 10px; border-radius: 14px; background: rgba(255,249,236,.9); text-align: center; border: 1px solid var(--line); }
.stats-box b { display: block; font-size: 20px; }
.stats-box span { font-size: 12px; color: var(--muted); font-weight: 700; }
.export-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#exportBox { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid var(--line); font: 12px Consolas, monospace; -webkit-user-select: text; user-select: text; }
.version-line { margin-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.account-status { color: var(--muted); margin: 0 0 12px; }
.account-form { display: grid; gap: 10px; }
.account-form label { display: grid; gap: 4px; font-weight: 800; font-size: 14px; }
.account-form input { min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); font: 700 17px var(--font); -webkit-user-select: text; user-select: text; }
.install-steps { padding-left: 22px; line-height: 1.7; margin: 0; }
.install-done { padding: 12px; border-radius: 14px; background: #e6f7ee; font-weight: 800; margin-bottom: 10px; }

/* ---------- příběh ---------- */
.screen-story { display: grid; place-items: center; padding: 16px; overflow-y: auto; background: radial-gradient(circle at 30% 20%, rgba(255,219,133,.6), transparent 40%), linear-gradient(180deg, #7fcbf5, #fff0d2); }
.story-card { width: min(620px, 100%); padding: 22px; border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); }
.story-box { display: grid; gap: 14px; min-height: 150px; }
.story-line { display: flex; gap: 14px; align-items: flex-start; }
.story-avatar { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; font-size: 34px; font-family: var(--emoji); background: #d9f1ff; }
.story-avatar.kubik { background: #ffe4c4; }
.story-text b { display: block; margin-bottom: 2px; color: #8b5a12; }
.story-text p { font-size: 16.5px; }
.story-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.story-progress { margin-right: auto; color: var(--muted); font-weight: 700; }
#storySkip[hidden] { display: none; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--sab)); z-index: 2000; transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 16px; background: rgba(23,49,63,.92); color: #fff; font-weight: 700; font-size: 14.5px; max-width: 90%; text-align: center; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- v2.2: volná jízda, obtížnost, rodiče, spánek, postavičky, skiny ---------- */
.btn-free { border: 0; border-radius: 14px; min-height: 42px; padding: 0 14px; font-weight: 800; font-size: 14px; background: linear-gradient(180deg, #8ff0c4, #46c88c); color: #0d4d30; box-shadow: 0 6px 14px rgba(70,200,140,.3); font-family: var(--emoji), var(--font); }
.select { flex: none; min-height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: 800 14px var(--font); color: var(--ink); max-width: 46%; }
.menu-stats .chip { min-height: 34px; font-size: 13px; }
.parent-question { font-size: 26px; font-weight: 800; text-align: center; }
.parent-input { width: 100%; min-height: 56px; border-radius: 16px; border: 2px solid var(--line); font: 800 28px var(--font); text-align: center; -webkit-user-select: text; user-select: text; }
.parent-error { color: #8a2a1c; font-weight: 800; text-align: center; min-height: 20px; }
.daily-card { text-align: center; }
.daily-icon { font-size: 64px; font-family: var(--emoji); animation: giftpop .8s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes giftpop { from { transform: scale(.3) rotate(-20deg); } }
.screen-sleep { display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 30% 20%, rgba(120,140,220,.5), transparent 40%), linear-gradient(180deg, #1b2b55, #3a4a7a 60%, #6b6a9a); }
.sleep-card { width: min(480px, 100%); padding: 28px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); text-align: center; display: grid; gap: 12px; }
.sleep-train { font-size: 64px; font-family: var(--emoji); animation: chug 3s ease-in-out infinite; }
.s-waiting { position: absolute; right: calc(4% + min(240px, 42%) + 70px); bottom: calc(var(--ground) + var(--back)); z-index: 1; display: flex; gap: 6px; pointer-events: none; }
.s-figure { font-size: 30px; font-family: var(--emoji); animation: bob 1.6s ease-in-out infinite; display: inline-block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
@keyframes bob { 50% { transform: translateY(-5px); } }
@media (max-height: 760px) { .s-waiting { transform: scale(.7); transform-origin: bottom right; } }
.s-loco .s-plow { position: absolute; left: -22px; bottom: 4px; width: 30px; height: 34px; background: linear-gradient(180deg, #f2f5f8, #b8c0c8); clip-path: polygon(100% 0, 0 100%, 100% 100%); border-radius: 4px; z-index: 1; }
.s-loco.skin-wood .s-boiler { background: repeating-linear-gradient(90deg, #b07a4a 0 14px, #9a6a3e 14px 16px); }
.s-loco.skin-wood .s-cab { background: linear-gradient(180deg, #6b4a2a 0 14%, #b07a4a 14%); }
.s-loco.skin-wood .s-wheels i, .s-loco.skin-wood .s-wheels::before, .s-loco.skin-wood .s-wheels::after { background: repeating-conic-gradient(#6b4a2a 0 6deg, #d9b27a 6deg 45deg); }
.s-loco.skin-space .s-boiler { background: linear-gradient(180deg, #6a72c4, #3a3f7a 60%, #23264a); box-shadow: 0 0 18px rgba(143,227,255,.5); }
.s-loco.skin-space .s-chimney::after { background: linear-gradient(180deg, #8fe3ff, #3a7fa8); }
.s-loco.skin-candy .s-boiler { background: repeating-linear-gradient(135deg, #ff8fb8 0 12px, #fff 12px 20px); }
.s-loco.skin-candy .s-cab { background: linear-gradient(180deg, #ff5f9e 0 14%, #ffb3d1 14%); }

/* ---------- Jízda online (více hráčů) ---------- */
.menu-btn-online > span:last-child { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font); font-size: 15px; }
.menu-btn-online small { font-size: 12px; font-weight: 600; opacity: .7; }
.hud-online { height: 40px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255,250,240,.9); font-weight: 800; font-size: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.12); font-family: var(--emoji), var(--font); white-space: nowrap; }
.hud-online.lost { background: #ffd9d4; }
.online-card { text-align: center; }
.online-name { display: grid; gap: 6px; text-align: left; font-weight: 800; font-size: 14px; }
.online-name input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px; font: inherit; font-size: 18px; }
.online-rules { list-style: none; margin: 4px 0; padding: 0; text-align: left; display: grid; gap: 6px; font-size: 14px; }
.online-rules li { display: flex; gap: 8px; align-items: flex-start; }

/* ---------- v2.3: úkoly, profily, stavitel, dílna, album, kabina, události ---------- */
.menu-quests { display: grid; gap: 6px; }
.quest { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.85); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; }
.quest.done { opacity: .7; border-color: rgba(126,226,184,.8); }
.quest-emoji { font-family: var(--emoji); font-size: 20px; }
.quest-bar { width: 70px; height: 8px; border-radius: 4px; background: rgba(23,49,63,.12); overflow: hidden; }
.quest-bar i { display: block; height: 100%; background: var(--gold2); }
.profile-list { display: grid; gap: 8px; }
.profile-btn { display: flex; align-items: center; gap: 10px; min-height: 52px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-weight: 800; padding: 0 12px; text-align: left; }
.profile-btn.on { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(239,185,83,.3); }
.profile-btn span { font-family: var(--emoji); font-size: 26px; }
.profile-btn small { margin-left: auto; color: var(--muted); font-weight: 700; }
.hud-finish { display: none; background: var(--mint); }
body[data-free="1"] .hud-finish { display: block; }
.big-banner { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%) scale(.8); z-index: 25; padding: 18px 28px; border-radius: 24px; background: rgba(23,49,63,.9); color: #fff; font-weight: 800; font-size: clamp(20px, 5vw, 34px); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; text-align: center; }
.big-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.builder-row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.builder-row > span { font-weight: 800; }
.builder-input { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); font: 700 15px var(--font); width: 100%; -webkit-user-select: text; user-select: text; }
.builder-preview { width: 100%; height: auto; border-radius: 16px; background: #dfe; margin: 10px 0; display: block; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.album-card { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: #fff; border: 2px solid var(--line); text-align: center; font-size: 12px; }
.album-card.locked { opacity: .55; filter: grayscale(1); }
.album-card b { font-size: 11px; }
.album-card small { color: var(--muted); }
.sticker-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sticker-colors { display: flex; gap: 4px; }
.sticker-color { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; }
.sticker-color.on { border-color: var(--ink); }
.sticker-canvas { width: 100%; max-width: 360px; height: auto; border-radius: 12px; border: 2px dashed var(--line); background: #fff8e6; touch-action: none; display: block; }
.s-sticker { position: absolute; left: 6px; top: 24px; width: 40px; height: 20px; border-radius: 4px; object-fit: cover; z-index: 2; pointer-events: none; }
.s-driver { position: absolute; left: 6px; top: 2px; font-size: 20px; font-family: var(--emoji); }
.s-kitten { position: absolute; left: 20px; top: -14px; font-size: 22px; font-family: var(--emoji); z-index: 3; animation: bob 1.6s ease-in-out infinite; }
.s-wish { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 12px; background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 4px; }
.s-face { position: absolute; left: 6px; top: 8px; width: 30px; height: 30px; display: none; z-index: 2; }
.s-loco.face-1 .s-face, .s-loco.face-2 .s-face, .s-loco.face-3 .s-face, .s-loco.face-4 .s-face { display: block; }
.s-face .eye { position: absolute; top: 6px; width: 9px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #17313f; box-sizing: border-box; }
.s-face .eye::after { content: ""; position: absolute; left: 2px; top: 2px; width: 3px; height: 3px; border-radius: 50%; background: #17313f; }
.s-face .eye.l { left: 3px; } .s-face .eye.r { left: 16px; }
.s-face .mouth { position: absolute; left: 8px; top: 19px; width: 14px; height: 7px; border: 2px solid #17313f; border-top: 0; border-radius: 0 0 10px 10px; box-sizing: border-box; }
.s-face .glasses { display: none; }
.s-loco.face-2 .s-face .eye.r { height: 3px; top: 10px; border-radius: 2px; background: #17313f; }
.s-loco.face-2 .s-face .eye.r::after { display: none; }
.s-loco.face-3 .s-face .glasses { display: block; position: absolute; left: 1px; top: 4px; width: 26px; height: 12px; border: 2px solid #17313f; border-radius: 6px; box-sizing: border-box; background: rgba(23,49,63,.6); }
.s-loco.face-4 .s-face .eye { height: 3px; top: 10px; border-radius: 2px; background: #17313f; }
.s-loco.face-4 .s-face .eye::after { display: none; }
.s-loco.face-4 .s-face .mouth { width: 8px; height: 6px; border-radius: 50%; border-top: 2px solid #17313f; left: 11px; top: 20px; }
.s-loco.chimney-1 .s-chimney { height: 44px; width: 14px; left: 22px; }
.s-loco.chimney-1 .s-chimney::after { width: 22px; left: -4px; height: 8px; }
.s-loco.chimney-2 .s-chimney { height: 24px; width: 24px; left: 16px; }
.s-loco.chimney-2 .s-chimney::after { width: 40px; left: -8px; height: 14px; border-radius: 8px; }
.s-loco.cab-1 .s-cab { border-radius: 6px; }
.s-loco.cab-1 .s-cab::before { border-radius: 3px; height: 8px; top: -4px; }
.s-loco.cab-2 .s-cab::before { height: 16px; top: -12px; left: -14px; right: -14px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #e0453a, #b8302a); }
.s-loco.wheels-1 .s-wheels i, .s-loco.wheels-1 .s-wheels::before, .s-loco.wheels-1 .s-wheels::after { background: repeating-conic-gradient(#8a1f16 0 6deg, #ff8b6f 6deg 45deg); box-shadow: inset 0 0 0 3px #c0392b; }
.s-loco.wheels-2 .s-wheels i, .s-loco.wheels-2 .s-wheels::before, .s-loco.wheels-2 .s-wheels::after { background: repeating-conic-gradient(#8b5a12 0 6deg, #ffd166 6deg 45deg); box-shadow: inset 0 0 0 3px #e6b53a; }
.cab-view { position: absolute; inset: 0; z-index: 30; background: linear-gradient(180deg, #3a2a20, #6b4a2a 40%, #2b1f16); display: grid; grid-template-rows: 1fr auto auto; padding: 14px; gap: 10px; color: #fff; }
.cab-view[hidden] { display: none; }
.cab-window { position: relative; border: 10px solid #4a3220; border-radius: 22px; background: linear-gradient(#9ddcff, #cfe8a8 70%, #f2c85a 70%); display: grid; place-items: center; font-weight: 800; font-size: clamp(16px, 3vw, 24px); color: #17313f; min-height: 90px; }
.cab-kubik { position: absolute; right: 14px; bottom: 6px; font-size: 44px; font-family: var(--emoji); animation: bob 1.6s ease-in-out infinite; }
.cab-dials { display: flex; justify-content: space-around; gap: 8px; }
.dial { display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 800; }
.dial-face { width: 74px; height: 74px; border-radius: 50%; border: 5px solid #d9c7a0; background: conic-gradient(var(--c) calc(var(--v) * 1%), #2b2f33 0); display: grid; place-items: center; box-shadow: inset 0 0 0 6px #1f2225; }
.dial-face b { background: #1f2225; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; font-size: 13px; }
.cab-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cab-lever { width: 60px; height: 60px; border-radius: 12px; background: #1f2225; position: relative; cursor: pointer; flex: none; }
.cab-lever i { position: absolute; left: 26px; bottom: 8px; width: 8px; height: 40px; border-radius: 4px; background: #c0392b; transform-origin: bottom center; transform: rotate(30deg); transition: transform .25s; }
.cab-lever.up i { transform: rotate(-30deg); }
.cab-lever i::after { content: ""; position: absolute; left: -6px; top: -8px; width: 20px; height: 20px; border-radius: 50%; background: #ffd166; }
.cab-whistle, .cab-bell, .cab-close { flex: 1; min-height: 50px; border: 0; border-radius: 14px; font-weight: 800; font-size: 15px; background: #ffd166; color: #58370a; }
.cab-close { background: #fff; color: var(--ink); flex: 0.8; }
body.kindergarten .menu-btn#menuDepot, body.kindergarten .menu-stats, body.kindergarten .menu-quests, body.kindergarten .hud-gauges .gauge:last-child, body.kindergarten .hud-time, body.kindergarten #btnZoomIn, body.kindergarten #btnZoomOut, body.kindergarten .brief-stars { display: none !important; }
.builder-row > .chip-row + .chip-row { grid-column: 2; }

/* ---------- v2.4: online 2 – smajlíci, společný úkol, tabule, dárky ---------- */
/* tlačítko smajlíků v HUD */
.hud-emote { background: linear-gradient(180deg, #fff3c4, #ffd98a); font-size: 20px; }
.hud-emote.on { background: var(--gold); box-shadow: 0 0 0 3px rgba(239,185,83,.45), 0 6px 16px rgba(0,0,0,.12); }

/* plovoucí panel se smajlíky u pravého okraje: nad HUD i canvasem,
   ale pod scénou stanice (z-index 20) a kabinou (30), ať je nepřekrývá */
.emote-panel { position: absolute; z-index: 18; top: calc(60px + var(--sat)); right: calc(10px + var(--sar)); display: grid; grid-template-columns: repeat(2, auto); gap: 8px; padding: 10px; border-radius: 22px; background: rgba(255,250,240,.96); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.22); animation: emotepop .22s cubic-bezier(.2, 1.6, .4, 1) both; }
.emote-panel[hidden] { display: none !important; }
.emote-panel button { width: 52px; height: 52px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.12); font-size: 28px; line-height: 1; font-family: var(--emoji); transition: transform .12s, filter .12s; }
.emote-panel button:active { transform: scale(.92); filter: brightness(1.08); }
@keyframes emotepop { from { transform: scale(.6) translateY(-8px); opacity: 0; } }
body.big-buttons .emote-panel button { width: 62px; height: 62px; font-size: 32px; }
body.big-buttons .hud-emote { width: 48px; height: 48px; font-size: 24px; }

/* proužek společného úkolu místnosti */
.hud-quest { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; padding: 6px 8px; border-radius: 12px; background: rgba(255,209,102,.28); font-size: 13px; font-weight: 800; font-family: var(--emoji), var(--font); }
.hud-quest[hidden] { display: none !important; }
.hud-quest b { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.hud-quest small { color: var(--muted); font-weight: 700; font-size: 11.5px; }
.hud-quest .quest-emoji { flex: none; font-size: 16px; line-height: 1; }
.hud-quest .quest-label { flex: 1 1 110px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-quest .quest-bar { flex: 1 1 56px; width: auto; min-width: 48px; height: 8px; border-radius: 4px; background: rgba(23,49,63,.14); overflow: hidden; }
.hud-quest .quest-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent, var(--gold2)); transition: width .3s; }
.hud-quest.done { background: rgba(126,226,184,.35); }
body.big-buttons .hud-quest { font-size: 15px; }

/* chybová hláška v online modálu */
.online-err { margin: 0; color: #8a2a1c; font-weight: 800; font-size: 14px; text-align: left; padding: 8px 10px; border-radius: 12px; background: #ffe0da; }
.online-err[hidden] { display: none !important; }

/* výběr online mapy */
.online-maps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.online-maps:empty { display: none; }
.online-maps button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; min-height: 44px; padding: 0 16px; font: 800 14px var(--font); color: var(--ink); font-family: var(--emoji), var(--font); }
.online-maps button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.online-maps button small { display: block; font-size: 11px; font-weight: 700; opacity: .75; }

/* kód kamaráda */
.online-code-row input { text-transform: uppercase; text-align: center; font-size: 24px; font-weight: 800; letter-spacing: .22em; font-family: var(--font); }
.online-code-row input::placeholder { letter-spacing: .08em; font-size: 17px; text-transform: none; opacity: .45; }

/* tabule strojvůdců */
.board-card { text-align: center; }
.board-tabs { display: flex; gap: 8px; justify-content: center; }
.board-tabs .chip { flex: 1; max-width: 180px; }
.board-list { display: grid; gap: 6px; text-align: left; max-height: 46vh; overflow-y: auto; }
.board-list > * { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 800; font-size: 14.5px; font-family: var(--emoji), var(--font); }
.board-list > * > :nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list > * b { font-size: 15px; }
.board-list > * small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.board-list > *:nth-child(1) { background: linear-gradient(180deg, #fff3c4, #ffdf9a); border-color: var(--gold2); }
.board-list > *:nth-child(2) { background: linear-gradient(180deg, #f6f8fa, #e3e9ee); border-color: #c3cdd6; }
.board-list > *:nth-child(3) { background: linear-gradient(180deg, #ffe6cf, #f5cfa8); border-color: #dfab7a; }
.board-list > .board-empty, .board-list > .settings-note { background: rgba(255,255,255,.7); border-color: var(--line); color: var(--muted); font-weight: 700; justify-content: center; }
.board-rank { flex: none; width: 30px; text-align: center; font-size: 16px; }
.board-num { flex: none; font-variant-numeric: tabular-nums; }
body.big-buttons .board-list > * { font-size: 16px; padding: 12px 14px; }

/* lišta pro předání zásilky ve stanici */
.gift-bar { position: absolute; left: 0; right: 0; bottom: calc(86px + var(--sab)); z-index: 14; display: flex; align-items: center; gap: 8px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: linear-gradient(180deg, rgba(255,249,239,0), rgba(255,249,239,.94) 40%); }
.gift-bar[hidden] { display: none !important; }
.gift-bar:empty { display: none; }
.gift-bar-title { flex: none; white-space: nowrap; font-weight: 800; font-size: 14px; color: var(--muted); padding-left: 2px; font-family: var(--emoji), var(--font); }
.gift-bar button { flex: none; min-height: 52px; padding: 0 16px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #ffe08a, #efb953); color: #58370a; font: 800 16px var(--font); font-family: var(--emoji), var(--font); white-space: nowrap; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.gift-bar button:active { transform: scale(.96); }
.gift-bar button:disabled { filter: grayscale(.6); opacity: .6; }
body.big-buttons .gift-bar button { min-height: 62px; font-size: 18px; }

/* bublina s tipem od robota */
.mp-tip { position: absolute; z-index: 18; left: 50%; top: calc(64px + var(--sat)); transform: translateX(-50%); max-width: min(420px, 88%); padding: 10px 16px; border-radius: 18px; background: linear-gradient(180deg, #fff3c4, var(--gold)); color: #58370a; border: 2px solid rgba(88,55,10,.14); box-shadow: 0 12px 26px rgba(0,0,0,.2); font-weight: 800; font-size: 15px; line-height: 1.35; text-align: center; font-family: var(--emoji), var(--font); opacity: 0; transition: opacity .3s; }
/* třídu .show přidává a odebírá js/game.js – náběh animací, zmizení plynulým přechodem */
.mp-tip.show { opacity: 1; animation: mptip .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.mp-tip[hidden] { display: none !important; }
@keyframes mptip { from { transform: translate(-50%, -12px) scale(.85); opacity: 0; } }
body.big-buttons .mp-tip { font-size: 17px; }
body.kindergarten .mp-tip { font-size: 17px; }

/* malé displeje */
@media (max-width: 560px) {
  .emote-panel { top: calc(56px + var(--sat)); gap: 6px; padding: 8px; border-radius: 18px; }
  .emote-panel button { width: 46px; height: 46px; font-size: 24px; border-radius: 14px; }
  body.big-buttons .emote-panel button { width: 52px; height: 52px; font-size: 28px; }
  .hud-quest { font-size: 12px; }
  /* s tlačítkem smajlíků se horní lišta na úzkém telefonu radši zalomí, než aby se ikony smrskly */
  .hud-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .hud-right > * { flex: none; }
  .online-code-row input { font-size: 20px; letter-spacing: .16em; }
  .gift-bar button { min-height: 46px; font-size: 14.5px; padding: 0 12px; }
  .mp-tip { font-size: 13.5px; padding: 8px 12px; }
  .board-list { max-height: 40vh; }
}
@media (max-height: 520px) {
  .emote-panel { grid-template-columns: repeat(3, auto); top: calc(54px + var(--sat)); }
  .emote-panel button { width: 44px; height: 44px; font-size: 23px; }
  .mp-tip { top: calc(56px + var(--sat)); }
}

/* ---------- v2.4: finále mapy, posádka, přehled pro rodiče, profily ---------- */
.brief-crew { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 2px; }
.brief-crew:empty { display: none; }
.brief-crew .crew-pick { display: grid; justify-items: center; gap: 2px; min-width: 66px; padding: 6px 8px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font-size: 11px; font-weight: 800; }
.brief-crew .crew-pick.on { border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(239,185,83,.3); }
.brief-crew .crew-pick span { font-family: var(--emoji); font-size: 26px; }
.brief-crew .crew-title { font-weight: 800; font-size: 13px; color: var(--muted); width: 100%; }
.modal-wide { width: min(680px, 94vw); max-height: 88vh; overflow: auto; }
.profile-edit { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(23,49,63,.05); }
.profile-edit .chip-row { flex-wrap: wrap; }
.profile-btn img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }

/* =====================================================================
   Kubíkův vláček 2 – dobrodružství (js/adventure.js)
   Jen nová pravidla s prefixem .ad-. Nic z app.css se nepřepisuje.
   Vlož na konec css/app.css (nebo jako samostatný soubor za app.css).
   ===================================================================== */

/* ---------- lišta finále mapy v HUD (#hudBoss) ---------- */
.ad-boss-slot { display: flex; margin-top: 6px; pointer-events: none; }
.ad-boss-slot[hidden] { display: none !important; }

.ad-boss {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 250, 240, .92); border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  font-family: var(--font); color: var(--ink);
  font-size: 14px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ad-boss-emoji { font-family: var(--emoji); font-size: 18px; }
.ad-boss-count { min-width: 34px; text-align: center; }
.ad-boss-bar {
  display: block; width: 92px; height: 10px; border-radius: 999px;
  background: rgba(23, 49, 63, .12); overflow: hidden;
}
.ad-boss-bar i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  transition: width .3s ease;
}
.ad-boss-time { color: var(--muted); font-weight: 800; font-size: 13px; }

.ad-boss.urgent { background: rgba(255, 240, 232, .95); border-color: rgba(255, 139, 111, .55); }
.ad-boss.urgent .ad-boss-time { color: #b8412a; }
.ad-boss.urgent .ad-boss-emoji { animation: adBossPulse 1s ease-in-out infinite; }
.ad-boss.done { background: rgba(230, 247, 238, .95); border-color: rgba(126, 226, 184, .7); }
.ad-boss.done .ad-boss-bar i { background: linear-gradient(90deg, var(--mint), #4fc79a); }
.ad-boss.failed .ad-boss-bar i { background: linear-gradient(90deg, #cbd6db, #aebbc2); }

@keyframes adBossPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* ---------- záblesk blesku přes obrazovku (#adFlash) ---------- */
.ad-flash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .95), rgba(214, 234, 255, .45) 45%, rgba(255, 255, 255, 0) 72%);
  opacity: 0;
}
.ad-flash.on { animation: adFlash .22s ease-out 1; }
.ad-flash[hidden] { display: none !important; }
@keyframes adFlash { 0% { opacity: 0; } 18% { opacity: .9; } 45% { opacity: .25; } 100% { opacity: 0; } }

/* ---------- díly starých lokomotiv (depo, seznam map) ---------- */
.ad-parts {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line);
  font-family: var(--font); color: var(--muted);
  font-size: 12.5px; font-weight: 800;
}
.ad-parts .ad-parts-icon { font-family: var(--emoji); font-size: 14px; }
.ad-part-dots { display: inline-flex; gap: 4px; }
.ad-part-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(23, 49, 63, .14); box-shadow: inset 0 0 0 1px var(--line);
}
.ad-part-dot.on { background: linear-gradient(180deg, var(--gold), var(--gold2)); box-shadow: 0 2px 5px rgba(239, 185, 83, .45); }
.ad-parts.complete { color: #1f6b43; background: #e6f7ee; border-color: rgba(126, 226, 184, .7); }

/* ---------- odznak finálové kapitoly v seznamu kapitol ---------- */
.ad-final-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #58370a;
  font-family: var(--font); font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
}
.ad-final-chip span { font-family: var(--emoji); }

/* ---------- ohleduplnost k pohybu a velká tlačítka ---------- */
@media (prefers-reduced-motion: reduce) {
  .ad-boss.urgent .ad-boss-emoji { animation: none; }
  .ad-flash.on { animation: none; opacity: .5; }
  .ad-boss-bar i { transition: none; }
}
.big-buttons .ad-boss { font-size: 16px; padding: 8px 14px; }
.big-buttons .ad-boss-emoji { font-size: 21px; }
.big-buttons .ad-boss-bar { width: 110px; height: 12px; }
@media (max-width: 430px) {
  .ad-boss-bar { width: 64px; }
  .ad-boss { font-size: 13px; padding: 5px 10px; gap: 6px; }
}

/* =====================================================================
   Kubíkův vláček 2 – posádka a lokomotivy (js/crew.js)
   Nová pravidla s prefixem .cr- a varianty bočního pohledu
   .s-loco.loco-diesel / .loco-tram / .loco-drezina.
   Vkládá se na KONEC css/app.css, nic z app.css nepřepisuje natvrdo –
   tvary lokomotiv se mění jen v kombinaci .s-loco.loco-xxx.
   ===================================================================== */

/* ---------------- Dlaždice posádky a garáže ---------------- */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.cr-card { display: grid; justify-items: center; align-content: start; gap: 4px; width: 100%; min-height: 44px; padding: 10px 8px 12px; margin: 0; text-align: center; border: 2px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); font-family: var(--font); box-shadow: 0 6px 16px rgba(28, 47, 62, .08); }
button.cr-card { cursor: pointer; }
.cr-card.on { border-color: var(--gold2); background: linear-gradient(180deg, #fffdf5, #fff6dd); box-shadow: 0 0 0 3px rgba(239, 185, 83, .45); }
.cr-card.locked { background: rgba(255, 255, 255, .72); border-style: dashed; }
.cr-card b { font-size: 15px; font-weight: 800; line-height: 1.2; }
.cr-card p { margin: 0; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.cr-emoji { font-family: var(--emoji); font-size: 40px; line-height: 1.15; }
.cr-card.locked .cr-emoji { filter: grayscale(.55); opacity: .85; }

.cr-state { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; margin-top: 2px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 800; font-family: var(--emoji), var(--font); background: rgba(23, 49, 63, .06); color: var(--ink); }
.cr-state.on, .cr-state.buy { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #58370a; }
.cr-state.lock { background: transparent; color: var(--muted); font-weight: 700; }
.cr-note { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* tři malé pruhy: rychlost / brzdy / zrychlení */
.cr-bars { display: grid; gap: 4px; width: 100%; margin-top: 4px; }
.cr-bar { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; }
.cr-bar small { font-size: 10.5px; font-weight: 800; color: var(--muted); text-align: left; }
.cr-bar > span { position: relative; height: 8px; border-radius: 5px; background: rgba(23, 49, 63, .1); overflow: hidden; }
.cr-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--mint), var(--gold)); }

/* kolečka nasbíraných dílů */
.cr-parts { display: flex; gap: 5px; margin-top: 2px; }
.cr-parts i { width: 12px; height: 12px; border-radius: 50%; background: rgba(23, 49, 63, .14); box-shadow: inset 0 0 0 2px rgba(23, 49, 63, .1); }
.cr-parts i.on { background: var(--gold2); box-shadow: none; }

/* dětský režim: velké obrázky, žádné čtení */
.cr-big { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.cr-big .cr-emoji { font-size: 56px; }
.cr-big .cr-card p, .cr-big .cr-bars { display: none; }
.cr-big .cr-card b { font-size: 17px; }
.cr-big .cr-state { min-height: 44px; font-size: 14px; }

/* ---------------- Boční pohled: motorová lokomotiva ---------------- */
.s-loco.loco-diesel .s-chimney { left: 26px; bottom: 66px; width: 11px; height: 13px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, #5b6167, #2b2f33 60%, #1f2225); }
.s-loco.loco-diesel .s-chimney::after { display: none; }
.s-loco.loco-diesel .s-boiler { bottom: 24px; width: 96px; height: 52px; border-radius: 8px 6px 6px 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--body) 88%, white) 0 22%, var(--body) 22%, color-mix(in srgb, var(--body) 72%, black)); border: 2px solid rgba(0, 0, 0, .18); box-sizing: border-box; }
.s-loco.loco-diesel .s-boiler::before { left: 6px; top: 12px; width: 26px; height: 26px; border-radius: 5px; background: linear-gradient(180deg, #6b7177, #2b2f33); }
.s-loco.loco-diesel .s-boiler::after { left: 44px; top: 8px; width: 40px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, #3a3f44 0 4px, #6b7177 4px 8px); }
.s-loco.loco-diesel .s-cab { right: 6px; bottom: 24px; width: 56px; height: 82px; border-radius: 5px 5px 4px 4px; }
.s-loco.loco-diesel .s-cab::before { left: -6px; right: -6px; top: -5px; height: 9px; border-radius: 3px; background: linear-gradient(180deg, #eef2f5, #b9c1c7); }
.s-loco.loco-diesel .s-window { left: 8px; top: 12px; width: 38px; height: 30px; border-radius: 4px; }
.s-loco.loco-diesel .s-firebox { opacity: 0; }
.s-loco.loco-diesel::after { background: #eef2f5; }

/* ---------------- Boční pohled: veselá tramvaj ---------------- */
/* komín se překreslí na sběrač proudu, žádný nový prvek není potřeba */
.s-loco.loco-tram .s-chimney { left: 40px; bottom: 82px; width: 42px; height: 18px; border-radius: 0; background: none; border-top: 4px solid #4a4f55; border-left: 4px solid #4a4f55; transform: skewX(-22deg); }
.s-loco.loco-tram .s-chimney::after { left: -8px; top: -8px; width: 56px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #7b8188, #3a3f44); }
.s-loco.loco-tram .s-boiler { bottom: 24px; width: 104px; height: 56px; border-radius: 14px 8px 6px 14px; background: linear-gradient(180deg, #fff3d6 0 30%, var(--body) 30%, color-mix(in srgb, var(--body) 75%, black)); border: 2px solid rgba(0, 0, 0, .16); box-sizing: border-box; }
.s-loco.loco-tram .s-boiler::before { left: 8px; top: 16px; width: 30px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #e8f7ff, #9fd3f5); border-color: rgba(0, 0, 0, .2); }
.s-loco.loco-tram .s-boiler::after { left: 46px; top: 14px; width: 44px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #e8f7ff, #9fd3f5); }
.s-loco.loco-tram .s-cab { right: 8px; bottom: 24px; width: 50px; height: 62px; border-radius: 12px 12px 5px 5px; }
.s-loco.loco-tram .s-cab::before { top: -5px; height: 9px; background: linear-gradient(180deg, #fff8e6, var(--trim)); }
.s-loco.loco-tram .s-window { left: 7px; top: 10px; width: 36px; height: 30px; border-radius: 8px; }
.s-loco.loco-tram .s-firebox { opacity: 0; }
.s-loco.loco-tram::after { background: #cfd6db; }

/* ---------------- Boční pohled: malá drezína ---------------- */
.s-loco.loco-drezina { width: 118px; height: 88px; }
.s-loco.loco-drezina .s-chimney { display: none; }
.s-loco.loco-drezina .s-boiler { bottom: 22px; width: 76px; height: 38px; border-radius: 8px 6px 4px 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--body) 85%, white), var(--body) 55%, color-mix(in srgb, var(--body) 70%, black)); border: 2px solid rgba(0, 0, 0, .18); box-sizing: border-box; }
.s-loco.loco-drezina .s-boiler::before { left: 4px; top: 6px; width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(180deg, #b9c1c7, #6b7177); }
.s-loco.loco-drezina .s-boiler::after { left: 30px; top: -9px; width: 30px; height: 11px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--trim) 85%, white), color-mix(in srgb, var(--trim) 70%, black)); }
.s-loco.loco-drezina .s-face { top: 5px; left: 4px; transform: scale(.68); transform-origin: left top; }
.s-loco.loco-drezina .s-cab { right: 4px; bottom: 22px; width: 40px; height: 48px; border-radius: 8px 8px 4px 4px; }
.s-loco.loco-drezina .s-cab::before { left: -5px; right: -5px; top: -5px; height: 8px; border-radius: 4px; }
.s-loco.loco-drezina .s-window { left: 5px; top: 8px; width: 28px; height: 22px; border-radius: 6px; }
.s-loco.loco-drezina .s-firebox { opacity: 0; }
.s-loco.loco-drezina .s-wheels { left: 16px; right: 14px; height: 24px; }
.s-loco.loco-drezina .s-wheels i, .s-loco.loco-drezina .s-wheels::before, .s-loco.loco-drezina .s-wheels::after { width: 24px; height: 24px; }
.s-loco.loco-drezina::after { left: 20px; width: 70px; }
.s-loco.loco-drezina::before { left: -10px; width: 18px; height: 20px; }

/* =====================================================================
   Kubíkův vláček 2 – mini-hry ve stanici (js/minigames.js)
   POUZE nová pravidla s prefixem .mg-. Nic z css/app.css se nepřepisuje.
   Vloží se na konec css/app.css (nebo jako samostatný soubor za app.css).
   ===================================================================== */

/* ---------- rám mini-hry ---------- */
.mg-host {
  position: absolute; inset: 0; z-index: 32;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 6px;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, #fff9ef, #ffffff 55%, #fff3d9);
  font-family: var(--font); color: var(--ink);
  overflow: hidden; touch-action: none;
}
.mg-host[hidden] { display: none !important; }
.mg-head { display: flex; align-items: center; gap: 8px; }
.mg-head-emoji { font-family: var(--emoji); font-size: 26px; line-height: 1; }
.mg-head-title { flex: 1; font-size: 17px; font-weight: 800; }
.mg-close { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: 17px; font-weight: 800; }
.mg-close:active { transform: scale(.95); }
.mg-hint { padding: 7px 10px; border-radius: 12px; background: rgba(255, 209, 102, .3); font-weight: 800; font-size: 14.5px; min-height: 32px; }
.mg-host.mg-done .mg-hint { background: rgba(126, 226, 184, .45); }
.mg-board { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); min-height: 150px; background: linear-gradient(180deg, #eaf6ff, #ffffff 55%, #f6e6bf); }
.mg-controls { display: flex; gap: 8px; }
.mg-controls[hidden] { display: none; }

/* ---------- efekty (jen kosmetika) ---------- */
.mg-spark { position: absolute; font-family: var(--emoji); font-size: 18px; pointer-events: none; transform: translate(-50%, -50%); animation: mg-fly .9s ease-out forwards; }
@keyframes mg-fly { to { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -40px))) scale(.4); opacity: 0; } }
.mg-float { position: absolute; transform: translate(-50%, -50%); font-weight: 800; font-size: 18px; color: #8b5a12; white-space: nowrap; pointer-events: none; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); animation: mg-rise 1.3s ease-out forwards; }
@keyframes mg-rise { to { transform: translate(-50%, -170%); opacity: 0; } }
.mg-shake { animation: mg-shake .45s; }
@keyframes mg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mg-gone { animation: mg-shrink .3s ease-in forwards; }
@keyframes mg-shrink { to { transform: scale(.2) rotate(12deg); opacity: 0; } }
.mg-point { animation: mg-ring 1s ease-in-out infinite; }
@keyframes mg-ring { 0%, 100% { outline: 3px solid rgba(70, 200, 140, 0); outline-offset: 2px; } 50% { outline: 4px solid rgba(70, 200, 140, .9); outline-offset: 6px; } }

/* ---------- 1) namazat kola ---------- */
.mg-wheels { position: absolute; left: 0; right: 0; top: 6%; height: 58%; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; }
.mg-wheel {
  position: relative; flex: none;
  width: clamp(48px, 11vw, 76px); height: clamp(48px, 11vw, 76px);
  border-radius: 50%; box-sizing: border-box;
  background: repeating-conic-gradient(#2b2f33 0 6deg, #b9c1c7 6deg 45deg);
  border: 4px solid #2b2f33; box-shadow: inset 0 0 0 4px #7b8188;
}
.mg-wheel-hub { position: absolute; left: 50%; top: 50%; width: 30%; height: 30%; margin: -15% 0 0 -15%; border-radius: 50%; background: #7b8188; border: 2px solid #2b2f33; box-sizing: border-box; }
.mg-wheel-drop { position: absolute; left: 50%; top: -20px; margin-left: -9px; font-family: var(--emoji); font-size: 16px; opacity: 0; }
.mg-wheel.mg-oiled { border-color: var(--gold2); box-shadow: inset 0 0 0 4px var(--gold), 0 0 0 5px rgba(255, 209, 102, .45); }
.mg-wheel.mg-oiled .mg-wheel-drop { opacity: 1; }
.mg-wheel.mg-squeak { animation: mg-wobble .5s ease-in-out infinite; }
@keyframes mg-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.mg-wheel.mg-spin { animation: mg-turn 1.2s linear infinite; }
@keyframes mg-turn { to { transform: rotate(360deg); } }
.mg-wheel.mg-point { animation: mg-ring 1s ease-in-out infinite; }
.mg-can {
  position: absolute; left: 50%; bottom: 6px; width: 82px; height: 70px; margin-left: -41px;
  display: grid; place-items: center; border-radius: 18px;
  background: #fff; border: 3px solid var(--gold2); box-shadow: 0 8px 18px rgba(0, 0, 0, .2);
  touch-action: none; cursor: grab; z-index: 3;
}
.mg-can-emoji { font-family: var(--emoji); font-size: 38px; line-height: 1; }
.mg-can.mg-dragging { z-index: 7; cursor: grabbing; box-shadow: 0 14px 26px rgba(0, 0, 0, .3); }
.mg-can.mg-point { animation: mg-ring 1s ease-in-out infinite; }

/* ---------- 2) opravit lampu ---------- */
.mg-game-lamp .mg-board { background: linear-gradient(180deg, #101d40, #26365f 62%, #2d4a3c); }
.mg-game-lamp.mg-lit .mg-board { background: linear-gradient(180deg, #24345f, #3d5480 62%, #47694a); }
.mg-post { position: absolute; left: 50%; bottom: 0; width: 16px; height: 46%; margin-left: -8px; background: linear-gradient(90deg, #2f363d, #5b6167 45%, #2f363d); border-radius: 4px 4px 0 0; }
.mg-lamp { position: absolute; left: 50%; bottom: 44%; width: 130px; height: 104px; margin-left: -65px; }
.mg-lamp-arm { position: absolute; left: 50%; bottom: -6px; width: 10px; height: 22px; margin-left: -5px; background: #5b6167; border-radius: 3px; }
.mg-lamp-hood { position: absolute; left: 12px; right: 12px; top: 0; height: 32px; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #8aa7b8, #45596a); border: 2px solid #34434f; box-sizing: border-box; }
.mg-socket { position: absolute; left: 50%; top: 28px; width: 72px; height: 66px; margin-left: -36px; border-radius: 14px; box-sizing: border-box; background: rgba(255, 255, 255, .12); border: 3px dashed rgba(255, 255, 255, .4); display: grid; place-items: center; }
.mg-socket.mg-empty { border-color: var(--mint); background: rgba(126, 226, 184, .16); animation: mg-ring 1.3s ease-in-out infinite; }
.mg-lamp-light { position: absolute; left: 50%; top: 26px; width: 220px; height: 170px; margin-left: -110px; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0, rgba(255, 236, 160, .9), rgba(255, 236, 160, 0) 70%); }
.mg-lamp.mg-on .mg-lamp-light { opacity: 1; animation: mg-glow 2.2s ease-in-out infinite; }
@keyframes mg-glow { 50% { opacity: .72; } }
.mg-lamp.mg-on .mg-lamp-hood { background: linear-gradient(180deg, #b8d0dd, #5f7a8c); }
.mg-bulb { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); touch-action: none; cursor: grab; }
.mg-bulb-emoji { font-family: var(--emoji); font-size: 32px; line-height: 1; }
.mg-bulb.mg-dragging { z-index: 7; cursor: grabbing; }
.mg-bulb-broken { filter: grayscale(1) brightness(.72); }
.mg-bulb-broken::after { content: "✖"; position: absolute; right: -2px; top: -4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f0705a; color: #fff; font-size: 13px; font-weight: 800; }
.mg-bulb-in { background: #fff6c2; box-shadow: 0 0 18px rgba(255, 236, 160, .8); }
.mg-bulbbox { position: absolute; left: 10px; bottom: 8px; width: 92px; padding: 6px; border-radius: 14px; background: #c98a4b; border: 3px solid #8b5a12; box-sizing: border-box; display: grid; justify-items: center; gap: 2px; }
.mg-bulbbox-label { font-size: 11px; font-weight: 800; color: #fff8e6; }
.mg-bulbbox.mg-ready { animation: mg-ring 1.3s ease-in-out infinite; }
.mg-switch { position: absolute; right: 10px; bottom: 8px; min-width: 92px; min-height: 60px; padding: 6px; border: 0; border-radius: 16px; display: grid; justify-items: center; gap: 4px; background: linear-gradient(180deg, #e9edf2, #b8c2cc); color: #2e3a44; font: 800 13px var(--font); }
.mg-switch i { display: block; width: 30px; height: 26px; border-radius: 8px; background: #8a949c; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .18); }
.mg-switch.mg-ready { background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #58370a; animation: mg-ring 1.3s ease-in-out infinite; }
.mg-switch.mg-on { background: linear-gradient(180deg, #8ff0c4, #46c88c); color: #0d4d30; }
.mg-switch.mg-on i { background: #0d4d30; box-shadow: inset 0 8px 0 rgba(255, 255, 255, .25); }
.mg-switch:active { transform: scale(.97); }

/* ---------- 3) jeřáb ---------- */
.mg-game-crane .mg-board { background: linear-gradient(180deg, #dff0ff, #f6fbff 46%, #f2c85a 78%); }
.mg-rail { position: absolute; left: 0; right: 0; top: 2px; height: 10px; background: linear-gradient(180deg, #8b98a4, #45596a); border-radius: 5px; }
.mg-trolley { position: absolute; top: 8px; left: 50%; width: 0; height: 0; z-index: 4; }
.mg-trolley::before { content: ""; position: absolute; left: -24px; top: -10px; width: 48px; height: 22px; border-radius: 7px; background: linear-gradient(180deg, var(--gold), var(--gold2)); border: 2px solid #8b5a12; box-sizing: border-box; box-shadow: 0 4px 8px rgba(0, 0, 0, .2); }
.mg-rope { position: absolute; left: -3px; top: 12px; width: 6px; height: 14px; background: #5b6167; border-radius: 3px; }
.mg-hook { position: absolute; left: -16px; top: 22px; width: 32px; text-align: center; font-family: var(--emoji); font-size: 20px; }
.mg-row { position: absolute; left: 0; right: 0; }
.mg-row-boxes { top: 18%; height: 56px; }
.mg-row-wagons { bottom: 6px; height: 50px; }
.mg-box { position: absolute; top: 0; width: 64px; margin-left: -32px; padding: 5px 2px 4px; box-sizing: border-box; display: grid; justify-items: center; gap: 1px; border-radius: 12px; background: #c98a4b; border: 3px solid #8b5a12; box-shadow: 0 4px 10px rgba(0, 0, 0, .22); }
.mg-box-emoji { font-family: var(--emoji); font-size: 26px; line-height: 1; }
.mg-box-tag { font: 800 11px var(--emoji), var(--font); color: #fff8e6; }
.mg-box.mg-under { outline: 3px solid var(--mint); outline-offset: 3px; }
.mg-trolley .mg-box { left: 0; top: 44px; }
.mg-wagon { position: absolute; bottom: 0; width: 70px; height: 50px; margin-left: -35px; box-sizing: border-box; border-radius: 8px; background: var(--wc, #c98a4b); border: 2px solid rgba(0, 0, 0, .25); display: grid; justify-items: center; align-content: center; gap: 4px; }
.mg-wagon::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -7px; height: 9px; background: radial-gradient(circle at 20% 50%, #2b2f33 0 4px, transparent 5px), radial-gradient(circle at 80% 50%, #2b2f33 0 4px, transparent 5px); }
.mg-wagon-kind { font-family: var(--emoji); font-size: 20px; line-height: 1; }
.mg-wagon-slots { display: flex; gap: 3px; }
.mg-wagon-slots i { width: 11px; height: 11px; border-radius: 3px; background: rgba(255, 255, 255, .6); }
.mg-wagon-slots i.mg-slot-full { background: var(--ink); }
.mg-wagon.mg-under { outline: 3px solid var(--mint); outline-offset: 3px; }
.mg-wagon.mg-bad { outline: 3px solid #f0705a; outline-offset: 3px; }
.mg-btn { flex: 1; min-height: 56px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font: 800 20px var(--emoji), var(--font); touch-action: none; -webkit-user-select: none; user-select: none; }
.mg-btn-move { flex: 0 0 26%; }
.mg-act { flex: 1; border: 0; font-size: 17px; background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #58370a; }
.mg-act.mg-act-drop { background: linear-gradient(180deg, #8ff0c4, #46c88c); color: #0d4d30; }
.mg-btn.mg-hold { filter: brightness(1.08); transform: scale(.97); }
.mg-btn.mg-point { animation: mg-ring 1s ease-in-out infinite; }

/* ---------- scéna při běžící mini-hře (přidává station-scene.js) ---------- */
.scene.mg-open .scene-view { max-height: none; }
.scene.mg-open .scene-gauges, .scene.mg-open .scene-tray, .scene.mg-open .scene-actions { display: none; }

/* ---------- malé displeje ---------- */
@media (max-height: 620px) {
  .mg-head-emoji { font-size: 22px; }
  .mg-head-title { font-size: 15px; }
  .mg-hint { font-size: 13.5px; min-height: 28px; padding: 5px 8px; }
  .mg-can { width: 68px; height: 58px; margin-left: -34px; }
  .mg-can-emoji { font-size: 30px; }
  .mg-lamp { width: 112px; height: 92px; margin-left: -56px; }
  .mg-btn { min-height: 48px; }
}

/* =====================================================================
   Kubíkův vláček 2 – namluvený hlas (js/voice.js)
   Nová pravidla, prefix .vc- ; nic z css/app.css se nepřepisuje.
   Vlož na konec css/app.css (před případný blok @media print).
   ===================================================================== */

.vc-wrap { display: flex; flex-direction: column; gap: 10px; }
.vc-lead { color: var(--muted); font-size: 14px; }
.vc-lead b { color: var(--ink); }

/* hlavička: kolik je hotovo + pruh postupu */
.vc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vc-done { font-weight: 800; font-size: 14px; }
.vc-bar { flex: 1 1 140px; height: 10px; border-radius: 999px; background: rgba(23, 49, 63, .08); overflow: hidden; }
.vc-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--mint)); transition: width .2s; }

/* ukazatel hlasitosti při nahrávání */
.vc-meter { height: 12px; border-radius: 999px; background: rgba(23, 49, 63, .08); overflow: hidden; }
.vc-meter i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--mint), var(--gold2)); }

/* hláška pro rodiče */
.vc-msg { min-height: 20px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.vc-msg.warn { color: #8a2a1c; }

.vc-tools { display: flex; flex-wrap: wrap; gap: 8px; }

.vc-group { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; font-size: 15px; }
.vc-group span { font-family: var(--emoji); font-size: 18px; }

/* jeden řádek = jedna hláška */
.vc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .9); }
.vc-row.ok { border-color: rgba(126, 226, 184, .9); background: rgba(126, 226, 184, .14); }
.vc-row.pack { border-color: rgba(255, 209, 102, .9); background: rgba(255, 209, 102, .14); }
.vc-who { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--line); font-size: 20px; font-family: var(--emoji); }
.vc-text { flex: 1 1 190px; min-width: 150px; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.vc-state { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--muted); font-family: var(--emoji), var(--font); }

.vc-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vc-rec, .vc-btn { border: 1px solid var(--line); border-radius: 14px; background: #fff; font-family: var(--font); font-weight: 800; color: var(--ink); touch-action: none; }
.vc-rec { min-height: 44px; min-width: 108px; padding: 0 14px; font-size: 15px; background: linear-gradient(180deg, var(--gold), var(--gold2)); border: 0; color: #58370a; box-shadow: 0 6px 14px rgba(239, 185, 83, .3); }
.vc-rec.rec { background: linear-gradient(180deg, #ff9a80, #e8573a); color: #fff; box-shadow: 0 0 0 4px rgba(232, 87, 58, .25); }
.vc-btn { min-height: 44px; min-width: 44px; padding: 0 8px; font-size: 18px; font-family: var(--emoji), var(--font); }
.vc-rec:active, .vc-btn:active { transform: scale(.97); }
.vc-btn:disabled { opacity: .4; }

/* velká tlačítka pro malé prsty */
body.big-buttons .vc-rec { min-height: 54px; min-width: 128px; font-size: 17px; }
body.big-buttons .vc-btn { min-height: 54px; min-width: 54px; font-size: 21px; }

@media (max-width: 420px) {
  .vc-text { flex: 1 1 100%; }
  .vc-btns { width: 100%; margin-left: 0; }
  .vc-rec { flex: 1 1 auto; }
}

/* =====================================================================
   Kubíkův vláček 2 – hudba na pozadí (js/music.js)
   Jen NOVÁ pravidla, nic z app.css se nepřepisuje.
   Vlož na konec css/app.css (před případný blok @media pro tisk).
   ===================================================================== */

/* řádek s posuvníkem hlasitosti hudby (uvnitř .settings-card) */
.mu-vol-row { display: flex; align-items: center; gap: 12px; padding: 10px 0 4px; border-top: 1px solid var(--line); }
.mu-vol-row > b { flex: none; font-size: 15px; }
.mu-vol-val { flex: none; min-width: 44px; text-align: right; font-weight: 800; font-size: 14px; color: var(--muted); }

/* posuvník: vysoký 44 px kvůli dětským prstům, jezdec 28 px */
.mu-vol { appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 120px; height: 44px; background: transparent; cursor: pointer; }
.mu-vol:focus { outline: none; }
.mu-vol:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; border-radius: 12px; }
.mu-vol::-webkit-slider-runnable-track { height: 12px; border-radius: 6px; background: rgba(23, 49, 63, .14); border: 1px solid var(--line); }
.mu-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border: 0; border-radius: 50%; background: linear-gradient(180deg, var(--gold), var(--gold2)); box-shadow: 0 3px 8px rgba(28, 47, 62, .3); }
.mu-vol::-moz-range-track { height: 12px; border-radius: 6px; background: rgba(23, 49, 63, .14); border: 1px solid var(--line); }
.mu-vol::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: linear-gradient(180deg, var(--gold), var(--gold2)); box-shadow: 0 3px 8px rgba(28, 47, 62, .3); }

/* když je hudba vypnutá, posuvník zešedne (nastaví se atribut disabled) */
.mu-vol:disabled { opacity: .4; cursor: default; }
.mu-vol-row.mu-off > b, .mu-vol-row.mu-off .mu-vol-val { color: var(--muted); }

/* =====================================================================
   Kubíkův vláček 2 – přehled pro rodiče, střídání ve školce, diplom
   Nová pravidla pro modul js/report.js (window.VlacekReport).
   Vlož na konec css/app.css. Nic z app.css nepřepisuje, jen přidává.
   ===================================================================== */

/* ---------- přehled pro rodiče (RP.renderInto) ---------- */
.rp-wrap { display: grid; gap: 12px; }
.rp-head { font-size: 15px; color: var(--muted); font-weight: 700; }
.rp-head b { color: var(--ink); font-size: 18px; }

.rp-chart { display: block; width: 100%; height: auto; max-height: 210px; overflow: visible; }
.rp-chart-axis { stroke: var(--line); stroke-width: 2; }
.rp-chart-track { fill: rgba(23, 49, 63, 0.05); }
.rp-chart-bar { fill: var(--gold2); }
.rp-chart-bar.rp-today { fill: var(--mint); }
.rp-chart-num { fill: var(--muted); font: 700 15px var(--font); }
.rp-chart-day { fill: var(--muted); font: 800 16px var(--font); }
.rp-chart-day.rp-today { fill: var(--ink); }

.rp-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rp-skill { padding: 12px; border-radius: 16px; background: rgba(255, 249, 236, 0.9); border: 1px solid var(--line); --rp-fill: var(--gold2); }
.rp-skill[data-level="0"] { --rp-fill: #ffb59f; }
.rp-skill[data-level="1"] { --rp-fill: var(--gold); }
.rp-skill[data-level="2"] { --rp-fill: var(--gold2); }
.rp-skill[data-level="3"] { --rp-fill: var(--mint); }
.rp-skill-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rp-skill-head b { font-size: 15px; flex: 1; }
.rp-skill-emoji { font-family: var(--emoji); font-size: 20px; line-height: 1; }
.rp-level { padding: 4px 10px; border-radius: 999px; background: var(--rp-fill); color: #4a3510; font-size: 12px; font-weight: 800; white-space: nowrap; }
.rp-bar { height: 10px; border-radius: 999px; background: rgba(23, 49, 63, 0.08); overflow: hidden; }
.rp-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--rp-fill); transition: width .4s ease; }
.rp-hint { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.4; }

.rp-tips { padding: 12px 14px; border-radius: 16px; background: rgba(126, 226, 184, 0.16); border: 1px solid var(--line); }
.rp-tips h4 { margin: 0 0 6px; font-size: 15px; }
.rp-tip { font-size: 14px; line-height: 1.5; margin-top: 6px; }
.rp-tip::before { content: "💡 "; font-family: var(--emoji); }

.rp-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.rp-sum div { padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); text-align: center; }
.rp-sum b { display: block; font-size: 20px; }
.rp-sum span { font-size: 12px; color: var(--muted); font-weight: 700; }
.rp-note { color: var(--muted); font-size: 13px; }

/* ---------- střídání ve školce (RP.turnStart) ---------- */
.rp-turn-clock { position: fixed; z-index: 1900; left: 50%; top: calc(8px + var(--sat)); transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(23, 49, 63, 0.86); color: #fff; font: 800 16px/1 var(--font); font-family: var(--emoji), var(--font); pointer-events: none; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22); }
.rp-turn-clock.soon { background: #b3551d; animation: rp-blink 1s steps(2, end) infinite; }
.rp-turn-clock[hidden] { display: none !important; }
@keyframes rp-blink { 50% { opacity: .55; } }

.rp-turn-warn { position: fixed; z-index: 1900; left: 50%; top: calc(58px + var(--sat)); transform: translate(-50%, -8px); padding: 10px 18px; border-radius: 16px; background: var(--gold); color: #58370a; font: 800 16px var(--font); font-family: var(--emoji), var(--font); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; box-shadow: 0 10px 22px rgba(239, 185, 83, 0.45); }
.rp-turn-warn.show { opacity: 1; transform: translate(-50%, 0); }
.rp-turn-warn[hidden] { display: none !important; }

.rp-turn { position: fixed; inset: 0; z-index: 1950; display: grid; place-items: center; padding: 18px; background: rgba(23, 49, 63, 0.72); opacity: 0; transition: opacity .25s; }
.rp-turn.show { opacity: 1; }
.rp-turn[hidden] { display: none !important; }
.rp-turn-card { width: min(460px, 100%); padding: 26px 22px; border-radius: 28px; background: var(--paper); text-align: center; box-shadow: var(--shadow); transform: scale(.9); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.rp-turn.show .rp-turn-card { transform: scale(1); }
.rp-turn-emoji { font-family: var(--emoji); font-size: 54px; line-height: 1; }
.rp-turn-title { margin-top: 10px; font-size: clamp(30px, 8vw, 44px); font-weight: 800; color: var(--ink); }
.rp-turn-sub { margin-top: 8px; color: var(--muted); font-size: 16px; }
.rp-turn-btn { margin-top: 16px; border: 0; border-radius: 16px; min-height: 50px; padding: 0 24px; font: 800 17px var(--font); background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #58370a; box-shadow: 0 8px 20px rgba(239, 185, 83, 0.35); }

/* ---------- náhradní okno pro uložení diplomu (RP.shareDiploma) ---------- */
.rp-share { position: fixed; inset: 0; z-index: 1960; display: grid; place-items: center; padding: 14px; background: rgba(23, 49, 63, 0.7); overflow-y: auto; }
.rp-share-card { width: min(560px, 100%); padding: 16px; border-radius: 24px; background: var(--paper); text-align: center; box-shadow: var(--shadow); display: grid; gap: 10px; }
.rp-share-img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.rp-share-note { color: var(--muted); font-size: 14px; }
.rp-share-link { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 16px; background: linear-gradient(180deg, var(--gold), var(--gold2)); color: #58370a; font-weight: 800; font-size: 17px; text-decoration: none; font-family: var(--emoji), var(--font); }
.rp-share-close { border: 1px solid var(--line); border-radius: 16px; min-height: 46px; background: #fff; font: 800 16px var(--font); }

/* =====================================================================
   Kubíkův vláček 2 – dílna: nové části lokomotivy a vlastní zásilka
   Přidej BEZE ZMĚN na konec css/app.css. Nic z app.css nepřepisuje,
   jen doplňuje nová pravidla (prefix .ws-) a varianty .s-loco.lamp-*
   a .s-loco.buffer-*.
   ===================================================================== */

/* ---------- volitelné části lokomotivy (boční pohled) ---------- */
/* lamp-0 = kulatá lampa = výchozí vzhled z .s-loco .s-lamp */
.s-loco.lamp-1 .s-lamp { left: -5px; top: -3px; width: 18px; height: 15px; border-radius: 3px; }
.s-loco.lamp-2 .s-lamp {
  left: -8px; top: -8px; width: 24px; height: 24px; border: 0; border-radius: 0;
  background: #ffe08a; box-shadow: 0 0 14px rgba(255, 224, 138, .95);
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 34%);
}
/* buffer-0 = klasický klínový nárazník = výchozí .s-loco::before */
.s-loco.buffer-1::before, .s-loco.buffer-2::before {
  left: -17px; bottom: 6px; width: 26px; height: 26px;
  background: none; clip-path: none; border-radius: 0;
  display: grid; place-items: center;
  font-family: var(--emoji); font-size: 20px; line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
}
.s-loco.buffer-1::before { content: "❤️"; }
.s-loco.buffer-2::before { content: "🐾"; }

/* ---------- zásilka ve vagonu (boční pohled ve stanici i v depu) ---------- */
.ws-parcel { display: block; width: 34px; height: 34px; object-fit: contain; border-radius: 6px; pointer-events: none; }

/* ---------- obrazovka "Moje zásilka" v depu ---------- */
.ws-parcel-box { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ws-draw { flex: 0 1 200px; width: 200px; max-width: 100%; }
.ws-side { flex: 1 1 220px; min-width: 200px; display: grid; gap: 10px; align-content: start; }

.ws-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ws-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-color { width: 40px; height: 40px; min-height: 40px; padding: 0; border: 3px solid transparent; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.ws-color.on { border-color: var(--ink); transform: scale(1.06); }
.ws-erase.on { background: linear-gradient(180deg, var(--gold), var(--gold2)); border-color: var(--gold2); color: #58370a; }

.ws-canvas { display: block; width: 180px; height: 180px; max-width: 100%; border-radius: 16px; border: 2px dashed var(--line); background: #fff8e6; touch-action: none; cursor: crosshair; }
@supports (aspect-ratio: 1 / 1) { .ws-canvas { height: auto; aspect-ratio: 1 / 1; } }

.ws-field { display: grid; gap: 4px; font-size: 13px; font-weight: 800; color: var(--muted); }
.ws-name { min-height: 46px; padding: 0 12px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: 800 16px var(--font); }
.ws-name:focus { outline: 3px solid var(--gold); outline-offset: 1px; }

.ws-preview { padding: 10px 10px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .9); }
.ws-preview-title { margin-bottom: 14px; font-size: 12px; font-weight: 800; color: var(--muted); }
.ws-wagon { position: relative; width: 150px; max-width: 100%; height: 62px; margin: 0 auto; padding: 6px; border: 2px solid rgba(0, 0, 0, .2); border-radius: 8px; background: #c98a4b; }
.ws-wagon-body { display: flex; gap: 6px; height: 100%; }
.ws-slot { flex: 1; display: grid; place-items: center; min-width: 0; border-radius: 6px; background: rgba(255, 255, 255, .3); }
.ws-slot > * { grid-area: 1 / 1; }
.ws-slot-empty { background: rgba(255, 255, 255, .18); }
.ws-mini { display: block; width: 38px; height: 38px; border-radius: 6px; }
.ws-mini-emoji { font-family: var(--emoji); font-size: 28px; line-height: 1; }
.ws-mini[hidden], .ws-mini-emoji[hidden] { display: none; }
.ws-wagon-wheels { position: absolute; left: 14px; right: 14px; bottom: -9px; height: 10px; background: radial-gradient(circle at 18% 50%, #2b2f33 0 5px, transparent 6px), radial-gradient(circle at 82% 50%, #2b2f33 0 5px, transparent 6px); }
.ws-wagon-tag { position: absolute; left: 0; right: 0; top: -12px; padding: 2px 6px; border-radius: 8px; background: rgba(255, 255, 255, .88); text-align: center; font-size: 11px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ws-save { width: 100%; }
.ws-note { min-height: 20px; font-size: 13px; font-weight: 700; color: var(--muted); }

/* velká tlačítka pro nejmenší */
.big-buttons .ws-color { width: 48px; height: 48px; min-height: 48px; }
.big-buttons .ws-name { min-height: 54px; font-size: 18px; }

/* ---------- v2.4: nálada cestujících ---------- */
.s-figure { position: relative; }
.s-figure .s-mood { position: absolute; right: -6px; bottom: -2px; font-size: 13px; font-family: var(--emoji); filter: none; }
.s-figure.mood-sad { animation: bob 2.6s ease-in-out infinite; }
.s-figure.mood-wait { animation: bob 2s ease-in-out infinite; }

/* =====================================================================
   v2.4.1 – rozložení pro telefony (iPhone 12 Pro Max: 428×926 na výšku,
   926×428 na šířku; v Safari s lištami ještě méně). Vše, co dítě potřebuje,
   musí být vidět bez rolování: ovládání, nástroje ve stanici i tlačítko Odjet.
   ===================================================================== */
/* výška obrazovky = skutečně viditelná plocha (dvh), ne 100vh pod lištami Safari */
.screen { bottom: auto; height: 100vh; height: 100dvh; }
.modal { height: 100vh; height: 100dvh; bottom: auto; }
.modal-card { max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); }

/* nástroje ve stanici: vodorovná řada nahoře, zalamuje se, nikdy nepřesáhne výhled */
.tool-dock { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 12; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; pointer-events: none; }
.tool-dock > * { pointer-events: auto; }
.tool-panel { right: 8px; }

/* ---------- telefon na výšku ---------- */
@media (max-width: 520px) {
  .hud { padding: calc(6px + var(--sat)) calc(6px + var(--sar)) calc(8px + var(--sab)) calc(6px + var(--sal)); }
  .hud-level { max-width: 62%; padding: 6px 10px; font-size: 13px; }
  .hud-level b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-tasks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 2px; }
  .hud-tasks::-webkit-scrollbar { display: none; }
  .hud-task { flex: none; font-size: 12px; }
  .hud-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 5px; gap: 5px; }
  .hud-icon { width: 38px; height: 38px; font-size: 17px; border-radius: 11px; }
  .hud-time { padding: 5px 8px; font-size: 13px; }
  .guide-bubble { margin-bottom: 12px; font-size: 14px; padding: 8px 12px; max-width: 94%; }
  .hud-bottom { gap: 6px; }
  .hud-gauges { padding: 6px 8px; gap: 8px; font-size: 13px; }
  .gauge-bar { width: 44px; }
  .hud-speed { min-width: 84px; padding: 4px 10px; }
  .speed-value { font-size: 22px; }
  .hud-controls { gap: 6px; justify-content: space-between; }
  .ctl-switch { width: 22vw; min-width: 78px; max-width: 96px; height: 60px; }
  .ctl-horn { width: 58px; height: 58px; }
  .ctl-brake { width: 70px; height: 70px; }
  .ctl-throttle { width: 80px; height: 80px; }
  body.big-buttons .ctl-throttle { width: 92px; height: 92px; }
  body.big-buttons .ctl-brake { width: 80px; height: 80px; }
  body.big-buttons .ctl-horn { width: 64px; height: 64px; }

  .scene-head { padding: 6px 10px 6px; }
  .scene-title b { font-size: 16px; }
  .scene-title small { font-size: 12px; }
  .scene-icon { font-size: 24px; }
  .scene-hint { margin-top: 4px; padding: 6px 8px; font-size: 13.5px; min-height: 30px; }
  .scene-view { min-height: 200px; max-height: none; --ground: min(26%, 110px); --back: 30px; }
  .scene-building, .s-tower, .s-bunker, .s-master { transform: scale(.62); transform-origin: bottom center; }
  .s-master { transform-origin: bottom right; }
  .s-waiting { transform: scale(.62); transform-origin: bottom right; }
  .scene-train-wrap { height: 120px; }
  .tool-btn { width: 54px; padding: 5px 3px; font-size: 10px; }
  .tool-emoji { font-size: 21px; }
  .tool-mini { width: 38px; }
  .tool-panel { left: 8px; bottom: 6px; padding: 8px; gap: 6px; }
  .scene-gauges { padding: 5px 10px; font-size: 12px; gap: 8px; }
  .scene-tray { flex: none; min-height: 126px; max-height: 34vh; padding: 6px 10px; }
  .scene-tray-items { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .s-card { width: 92px; padding: 6px 4px; }
  .scene-actions { padding: 6px 10px 10px; }
  .scene-btn { min-height: 50px; font-size: 16px; }
  .cab-view { padding: 8px; gap: 6px; }
  .dial-face { width: 60px; height: 60px; }
}

/* ---------- telefon na šířku (nízká obrazovka) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hud { padding: calc(6px + var(--sat)) calc(8px + var(--sar)) calc(6px + var(--sab)) calc(8px + var(--sal)); }
  .hud-level { max-width: 40%; padding: 5px 10px; font-size: 12.5px; }
  .hud-level b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-tasks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 2px; }
  .hud-tasks::-webkit-scrollbar { display: none; }
  .hud-task { flex: none; font-size: 11.5px; }
  .hud-icon { width: 36px; height: 36px; font-size: 16px; }
  #btnZoomIn, #btnZoomOut { display: none; }
  .guide-bubble { align-self: flex-start; margin-bottom: 6px; max-width: 46%; font-size: 13.5px; padding: 6px 10px; }
  .hud-bottom { grid-template-columns: auto auto 1fr; gap: 8px; }
  .hud-gauges { grid-auto-flow: column; gap: 10px; padding: 5px 8px; font-size: 12px; }
  .gauge-bar { width: 40px; }
  .hud-speed { justify-self: start; min-width: 80px; padding: 4px 10px; }
  .speed-value { font-size: 20px; }
  .hud-controls { justify-self: end; gap: 6px; }
  .ctl-throttle { width: 74px; height: 74px; font-size: 26px; }
  .ctl-brake { width: 66px; height: 66px; font-size: 22px; }
  .ctl-horn { width: 56px; height: 56px; font-size: 20px; }
  .ctl-switch { width: 88px; height: 56px; }
  body.big-buttons .ctl-throttle { width: 84px; height: 84px; }
  body.big-buttons .ctl-brake { width: 74px; height: 74px; }
  body.big-buttons .ctl-horn { width: 62px; height: 62px; }

  /* stanice: výhled vlevo, nástupiště a Odjet vpravo, aby se všechno vešlo bez rolování */
  .scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 34%); grid-template-rows: auto minmax(0, 1fr) auto; }
  .scene-head { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; padding: 4px 10px; }
  .scene-title { flex: none; }
  .scene-title b { font-size: 15px; }
  .scene-title small { display: none; }
  .scene-icon { font-size: 22px; }
  .scene-hint { flex: 1; margin: 0; min-height: 0; padding: 5px 8px; font-size: 13px; }
  .scene-view { grid-column: 1; grid-row: 2 / 4; min-height: 0; max-height: none; --ground: min(24%, 90px); --back: 24px; }
  .scene-building, .s-tower, .s-bunker, .s-master { transform: scale(.6); transform-origin: bottom center; }
  .s-master { transform-origin: bottom right; }
  .s-waiting { transform: scale(.6); transform-origin: bottom right; }
  .scene-train-wrap { height: 110px; }
  .tool-btn { width: 54px; padding: 5px 3px; font-size: 10px; }
  .tool-emoji { font-size: 21px; }
  .tool-mini { width: 38px; }
  .tool-panel { left: 8px; right: 8px; bottom: 6px; padding: 8px; gap: 6px; }
  .tool-title { font-size: 13px; }
  .tool-note { display: none; }
  .pump-btn, .shovel-btn { min-height: 46px; font-size: 15px; }
  .scene-gauges { grid-column: 2; grid-row: 1; border-top: 0; border-left: 1px solid var(--line); padding: 6px 10px; font-size: 12px; gap: 6px; }
  .scene-tray { grid-column: 2; grid-row: 2; min-height: 0; border-left: 1px solid var(--line); padding: 6px 10px; }
  .scene-tray-items { gap: 6px; }
  .s-card { width: 86px; padding: 5px 4px; }
  .s-card .s-emoji { font-size: 26px; }
  .scene-actions { grid-column: 2; grid-row: 3; border-left: 1px solid var(--line); padding: 6px 10px 8px; }
  .scene-btn { min-height: 48px; font-size: 15px; }
  .cab-view { grid-template-rows: 1fr auto; padding: 8px; gap: 6px; }
  .cab-dials { display: none; }

  /* menu, depo a panely: méně místa nahoře, ať je hned vidět, co jde dělat */
  .screen-menu { place-items: start center; }
  .menu-hero { padding: 10px 16px 14px; }
  .menu-hero h1 { margin-top: 4px; font-size: 26px; }
  .menu-sub { margin-top: 4px; font-size: 13px; }
  .menu-train { display: none; }
  .menu-main { padding: 10px 16px; }
  .menu-main-title { font-size: 18px; }
  .depot-stage { height: 150px; }
  .modal-card { padding: 14px; }
}

/* velmi nízké okno (telefon na šířku v prohlížeči s lištou) */
@media (max-height: 400px) and (orientation: landscape) {
  .hud-level { display: none; }
  .guide-bubble { max-width: 52%; font-size: 12.5px; padding: 5px 9px; }
  .scene-view { --ground: 70px; --back: 18px; }
  .scene-train-wrap { height: 96px; }
  .scene-head { padding: 3px 8px; }
  .scene-hint { font-size: 12px; padding: 4px 6px; }
}

/* ---------- Lišta „Předat kamarádovi“ uvnitř bloku Odjet (online hra) ----------
   Dřív byla absolutně přes celou scénu a zakrývala nástupiště (na výšku z poloviny)
   i vagony (na šířku). Jako řádek v .scene-actions si vyhradí vlastní místo. */
.scene-actions { flex-wrap: wrap; }
.scene-actions > .gift-bar { position: static; bottom: auto; left: auto; right: auto; z-index: auto; flex: 0 0 100%; width: 100%; order: -1; margin: 0; padding: 0 0 6px; background: none; }
.scene-actions > .gift-bar button { min-height: 46px; padding: 0 12px; font-size: 15px; box-shadow: 0 4px 10px rgba(0,0,0,.14); }
body.big-buttons .scene-actions > .gift-bar button { min-height: 54px; font-size: 17px; }

/* ---------- 2.4.2: plynulé přechody, cedule kapitoly, konfety, postup, sluníčko, mraky v menu ---------- */
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen-menu, .screen-panel, .screen-result { animation: screenIn .3s ease-out; }
.level-splash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: linear-gradient(180deg, #9ddcff 0%, #d6f1ff 52%, #b8e08d 52.5%, #a3d474 100%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.level-splash[hidden] { display: none; }
.level-splash.in { opacity: 1; }
.level-splash.out { opacity: 0; }
/* Dokud cedule kapitoly svítí, bere ťuknutí sama – jinak by propadla do menu nebo mapy pod ní
   (dítě by omylem spustilo jinou kapitolu). Při odcházení (.out) už zase propouští.
   POZOR: spoléhá na to, že splash v js/game.js třídu .out přidá vždycky, i když cb() spadne
   (try/finally) – jinak by cedule po výjimce brala všechna ťuknutí. */
.level-splash.in:not(.out) { pointer-events: auto; }
.splash-card { text-align: center; padding: 20px 24px; width: min(520px, 94vw); }
.splash-card .eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.75); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.splash-card h2 { margin: 10px 0 4px; font-size: clamp(26px, 6vw, 42px); animation: splashPop .55s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes splashPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.splash-icons { font-family: var(--emoji); font-size: 32px; letter-spacing: 10px; min-height: 44px; animation: splashPop .55s .15s cubic-bezier(.2, 1.5, .4, 1) both; }
.splash-train { position: relative; height: 96px; margin: 8px auto 0; overflow: hidden; }
.splash-train::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 8px; background: repeating-linear-gradient(90deg, #8d6b45 0 10px, transparent 10px 22px); border-top: 3px solid #5f6b73; border-bottom: 3px solid #5f6b73; }
.splash-train .scene-train { position: absolute; left: 0; bottom: 14px; display: flex; align-items: flex-end; gap: 6px; white-space: nowrap; transform-origin: bottom left; transform: translateX(4%) scale(.5); --scale: .5; --offset: 0px; animation: splashRoll 1.1s cubic-bezier(.2, .8, .3, 1) both; z-index: 1; }
.splash-train .scene-train .s-wheels i, .splash-train .scene-train .s-wheels::before, .splash-train .scene-train .s-wheels::after { animation: spin .35s linear infinite; }
@keyframes splashRoll { from { transform: translateX(-110%) scale(.5); } to { transform: translateX(4%) scale(.5); } }
.btn-primary.counting { position: relative; overflow: hidden; }
.btn-primary.counting::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: rgba(255,255,255,.38); transition: width .1s linear; pointer-events: none; }
.hud-progress { height: 7px; margin-top: 6px; border-radius: 4px; background: rgba(23,49,63,.12); overflow: hidden; }
.hud-progress[hidden] { display: none; }
.hud-progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--mint), var(--gold)); transition: width .5s; }
.confetti { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.confetti[hidden] { display: none; }
.confetti i { position: absolute; top: -16px; width: 10px; height: 15px; border-radius: 3px; opacity: .95; animation: confettiFall 2.6s ease-in both; }
@keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(112vh) rotate(720deg); opacity: .3; } }
.s-sun { z-index: 0; }
.s-sun::before { content: ""; position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; z-index: -1; background: repeating-conic-gradient(rgba(255,240,150,.3) 0 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 68%); mask: radial-gradient(circle, #000 15%, transparent 68%); animation: rays 40s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.scene-night .s-sun::before, .scene-dusk .s-sun::before { display: none; }
/* Mraky jsou position: fixed, ne absolute: menu je posuvné (overflow-y: auto, tím i vodorovně auto) a mrak,
   který odplouvá za pravý okraj (left až 110 %), by v něm s absolute dělal vodorovný přesah – na telefonu se
   pak menu dalo pár sekund v každém kole mraku posunout do strany (test/ukoly.html to chytil na 360 px).
   Pevně umístěný box do posuvného obsahu menu nepatří. Obrazovka menu zabírá celé okno, takže procenta
   (top, left) vycházejí stejně; jen se mraky při posunu menu nahoru a dolů nehýbou – obloha zůstává. */
.screen-menu::before, .screen-menu::after { content: ""; position: fixed; z-index: 0; width: 220px; height: 70px; border-radius: 40px; background: rgba(255,255,255,.55); box-shadow: 40px -26px 0 -6px rgba(255,255,255,.55), 110px -14px 0 -2px rgba(255,255,255,.55); pointer-events: none; animation: menuCloud 70s linear infinite; }
.screen-menu::before { top: 6%; left: -260px; }
.screen-menu::after { top: 18%; left: -260px; animation-duration: 95s; animation-delay: -40s; transform: scale(.7); }
@keyframes menuCloud { to { left: 110%; } }
.screen-menu > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .screen-menu::before, .screen-menu::after, .s-sun::before, .confetti i, .splash-train .scene-train { animation: none; } }

/* ---------- 2.5.0: kreslené postavy (js/chars.js) ---------- */
.ch-wrap { display: inline-block; line-height: 0; vertical-align: bottom; }
.ch { width: 100%; height: 100%; overflow: visible; display: block; }
.ch .arm { transform-box: view-box; transition: transform .3s; }
.ch .arm-l { transform-origin: 21px 44px; }
.ch .arm-r { transform-origin: 43px 44px; }
.ch-wave .arm-r { animation: chWave 1.1s ease-in-out infinite; }
.ch-peek .arm-r { animation: chWave 1.4s ease-in-out infinite; }
.ch-happy .arm-l { transform: rotate(150deg); }
.ch-happy .arm-r { transform: rotate(-150deg); }
.ch-sad .arm { transform: rotate(0deg); }
@keyframes chWave { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-115deg); } }
.s-figure .ch-wrap { filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.s-card .ch-wrap, .album-card .ch-wrap { margin: 0 auto 2px; }
.s-chip .ch-wrap { pointer-events: none; }
.s-chip.s-peek { background: linear-gradient(180deg, #e8f6ff, #bfe6ff); overflow: hidden; }
.s-chip.s-peek .ch-wrap { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); }
.guide-avatar .ch-wrap, .story-avatar .ch-wrap { transform: translateY(2px); }
.s-master-emoji { display: inline-block; line-height: 0; }
.s-master.wave .ch-wrap .arm-r { animation: chWave .6s ease-in-out 2; }
.cab-kubik .ch-wrap { filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.s-ghost .ch-wrap { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ch-wave .arm-r, .ch-peek .arm-r { animation: none; transform: rotate(-135deg); } }

/* ---------- 2.5.0: každá mapa má stanici s vlastní tváří ---------- */
.s-worldprop { position: absolute; left: 44%; bottom: calc(var(--ground) + var(--back)); width: 90px; height: 120px; z-index: 0; pointer-events: none; display: none; }
.scene .s-worldprop { display: block; }
.scene-building .s-wall { position: relative; }
/* Pohádkové údolí: dřevěná zastávka s květinami */
.scene.world-valley .s-roof { background: linear-gradient(180deg, #ffd166, #efb953); }
.scene.world-valley .s-wall { background: repeating-linear-gradient(0deg, #f6e2b8 0 16px, #ecd39f 16px 18px); }
.scene.world-valley .s-worldprop { width: 80px; height: 60px; background: radial-gradient(circle at 20% 60%, #ff8fb8 0 8px, transparent 9px), radial-gradient(circle at 50% 40%, #ffd166 0 9px, transparent 10px), radial-gradient(circle at 80% 65%, #8fd6ff 0 8px, transparent 9px), radial-gradient(circle at 35% 85%, #46c88c 0 6px, transparent 7px), radial-gradient(circle at 65% 90%, #46c88c 0 6px, transparent 7px); }
/* Horský průsmyk: strmá střecha se sněhem, kamenné zdi */
.scene.world-mountain .s-roof { background: linear-gradient(180deg, #ffffff 0 22%, #6b7f8f 22%); clip-path: polygon(50% 0, 100% 100%, 0 100%); height: 46px; border-radius: 0; }
.scene.world-mountain .s-roof::before { display: none; }
.scene.world-mountain .s-wall { background: radial-gradient(circle at 20% 30%, #b9c6cf 0 10px, transparent 11px), radial-gradient(circle at 70% 60%, #b9c6cf 0 12px, transparent 13px), radial-gradient(circle at 40% 80%, #b9c6cf 0 9px, transparent 10px), #9fb0bd; }
.scene.world-mountain .scene-platform { background: linear-gradient(180deg, #e9f1f5, #cfdbe3); border-top-color: #ffffff; }
.scene.world-mountain .s-worldprop { width: 70px; height: 140px; background: linear-gradient(180deg, transparent 0 20%, #2f7a52 20%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* Přístavní zátoka: maják, modrobílé pruhy, prkna mola */
.scene.world-harbor .s-roof { background: linear-gradient(180deg, #3f7fd6, #2e5fa8); }
.scene.world-harbor .s-wall { background: repeating-linear-gradient(0deg, #ffffff 0 14px, #cfe6ff 14px 28px); }
.scene.world-harbor .scene-platform { background: repeating-linear-gradient(90deg, #d9b47a 0 26px, #c9a066 26px 30px); border-top-color: #f2dcb0; }
.scene.world-harbor .s-worldprop { width: 46px; height: 150px; left: 50%; background: repeating-linear-gradient(180deg, #e0453a 0 22px, #ffffff 22px 44px); border-radius: 8px 8px 2px 2px; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.scene.world-harbor .s-worldprop::before { content: ""; position: absolute; left: 6px; right: 6px; top: -22px; height: 24px; background: #ffd166; border-radius: 6px 6px 0 0; box-shadow: 0 0 22px 8px rgba(255,209,102,.6); }
/* Podzimní park a mlýn: větrný mlýn */
.scene.world-autumn .s-roof { background: linear-gradient(180deg, #c9622f, #a54a24); }
.scene.world-autumn .s-wall { background: #f0d9a6; }
.scene.world-autumn .scene-platform { background: linear-gradient(180deg, #d8c48a, #c8b078); }
.scene.world-autumn .s-worldprop { width: 60px; height: 130px; background: linear-gradient(180deg, #8a5a2b, #6b4a2a); clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.scene.world-autumn .s-worldprop::after { content: ""; position: absolute; left: 50%; top: 4px; width: 110px; height: 110px; margin-left: -55px; background: linear-gradient(90deg, transparent 46%, #f6e7c4 46% 54%, transparent 54%), linear-gradient(0deg, transparent 46%, #f6e7c4 46% 54%, transparent 54%); animation: rays 18s linear infinite; }
/* Květinové louky: úl a včely, zelená střecha */
.scene.world-meadow .s-roof { background: linear-gradient(180deg, #7ecb6a, #46a85a); }
.scene.world-meadow .s-wall { background: #fff8d6; }
.scene.world-meadow .s-worldprop { width: 64px; height: 70px; background: repeating-linear-gradient(180deg, #ffd166 0 12px, #e6b53a 12px 16px); border-radius: 14px 14px 6px 6px; }
.scene.world-meadow .s-worldprop::after { content: "🐝"; position: absolute; right: -18px; top: 10px; font-family: var(--emoji); font-size: 16px; animation: bob 1.4s ease-in-out infinite; }
/* Malovaná vesnička: malovaná fasáda, lucerna */
.scene.world-village .s-roof { background: linear-gradient(180deg, #e0453a, #b8302a); }
.scene.world-village .s-wall { background: linear-gradient(180deg, #fff 0 12%, #ffe4c4 12%); border-left: 6px solid #8fd6ff; border-right: 6px solid #8fd6ff; }
.scene.world-village .s-worldprop { width: 12px; height: 110px; background: #3a3f44; }
.scene.world-village .s-worldprop::after { content: ""; position: absolute; left: -12px; top: -14px; width: 36px; height: 26px; border-radius: 8px 8px 4px 4px; background: #ffe08a; box-shadow: 0 0 20px 6px rgba(255,224,138,.6); }
/* Písková zátoka: palma, písek */
.scene.world-dunes .s-roof { background: linear-gradient(180deg, #c9a35e, #a8843f); clip-path: polygon(0 100%, 8% 0, 22% 100%, 36% 0, 50% 100%, 64% 0, 78% 100%, 92% 0, 100% 100%); border-radius: 0; }
.scene.world-dunes .s-roof::before { display: none; }
.scene.world-dunes .s-wall { background: #f7ecd2; }
.scene.world-dunes .scene-platform { background: linear-gradient(180deg, #f2dfae, #e4cd93); border-top-color: #fff5d6; }
.scene.world-dunes .s-worldprop { width: 14px; height: 130px; background: linear-gradient(180deg, #8a5a2b, #6b4a2a); border-radius: 8px; left: 46%; }
.scene.world-dunes .s-worldprop::after { content: ""; position: absolute; left: -50px; top: -24px; width: 114px; height: 52px; background: radial-gradient(ellipse at 50% 100%, #46c88c 0 40%, transparent 41%), radial-gradient(ellipse at 15% 100%, #3f9b5c 0 30%, transparent 31%), radial-gradient(ellipse at 85% 100%, #3f9b5c 0 30%, transparent 31%); }
/* Staveniště u řeky: jeřáb a pruhy */
.scene.world-construction .s-roof { background: repeating-linear-gradient(135deg, #ffd166 0 12px, #17313f 12px 24px); }
.scene.world-construction .s-wall { background: #d9dde2; }
.scene.world-construction .s-worldprop { width: 14px; height: 150px; background: repeating-linear-gradient(180deg, #ffd166 0 10px, #e0453a 10px 20px); }
.scene.world-construction .s-worldprop::after { content: ""; position: absolute; left: -6px; top: 0; width: 120px; height: 8px; background: #e0453a; }
.scene.world-construction .s-worldprop::before { content: ""; position: absolute; left: 100px; top: 8px; width: 3px; height: 50px; background: #3a3f44; }
/* Šeptající les: dřevěná chata, houby */
.scene.world-forest .s-roof { background: linear-gradient(180deg, #4a3220, #2b1f16); }
.scene.world-forest .s-wall { background: repeating-linear-gradient(0deg, #8a5a2b 0 14px, #6b4a2a 14px 16px); }
.scene.world-forest .s-worldprop { width: 80px; height: 40px; background: radial-gradient(circle at 25% 30%, #e0453a 0 14px, transparent 15px), radial-gradient(circle at 70% 40%, #e0453a 0 10px, transparent 11px), radial-gradient(circle at 25% 70%, #fff 0 5px, transparent 6px), radial-gradient(circle at 70% 70%, #fff 0 4px, transparent 5px); }
/* Říční zahrady: skleník, vrba */
.scene.world-riverlands .s-roof { background: linear-gradient(180deg, rgba(200,240,255,.9), rgba(140,200,240,.9)); }
.scene.world-riverlands .s-wall { background: repeating-linear-gradient(90deg, rgba(220,245,255,.9) 0 22px, #b8d8e8 22px 25px); }
.scene.world-riverlands .s-worldprop { width: 12px; height: 120px; background: #6b4a2a; left: 47%; }
.scene.world-riverlands .s-worldprop::after { content: ""; position: absolute; left: -46px; top: -10px; width: 104px; height: 90px; border-radius: 50% 50% 40% 40%; background: radial-gradient(ellipse at 50% 20%, #9ad47e 0 45%, transparent 46%), repeating-linear-gradient(90deg, transparent 0 10px, #79c07c 10px 13px); opacity: .9; }
/* Hradní zahrady: cimbuří a věž */
.scene.world-castle .s-roof { background: #b9c6cf; clip-path: polygon(0 100%, 0 40%, 12% 40%, 12% 0, 24% 0, 24% 40%, 40% 40%, 40% 0, 52% 0, 52% 40%, 68% 40%, 68% 0, 80% 0, 80% 40%, 100% 40%, 100% 100%); border-radius: 0; }
.scene.world-castle .s-roof::before { display: none; }
.scene.world-castle .s-wall { background: radial-gradient(circle at 30% 30%, #d5dde3 0 12px, transparent 13px), radial-gradient(circle at 75% 65%, #d5dde3 0 12px, transparent 13px), #c4cfd7; }
.scene.world-castle .s-worldprop { width: 44px; height: 150px; background: #c4cfd7; border-radius: 4px 4px 0 0; }
.scene.world-castle .s-worldprop::after { content: ""; position: absolute; left: -6px; top: -38px; width: 56px; height: 40px; background: #8a63d2; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.scene.world-castle .s-worldprop::before { content: ""; position: absolute; left: 52px; top: -30px; width: 4px; height: 30px; background: #3a3f44; box-shadow: 4px 0 0 0 #e0453a, 16px 0 0 0 #e0453a; }
/* Trénink a online mapy: veselý pruhovaný stánek */
.scene.world-tutorial .s-roof, .scene.world-online .s-roof, .scene.world-online-mini .s-roof { background: repeating-linear-gradient(90deg, #ff8fb8 0 18px, #fff 18px 36px); }
@media (max-width: 520px), (max-height: 520px) { .s-worldprop { transform: scale(.6); transform-origin: bottom center; } }

/* ---------- 2.5.0: vagony ožívají, denní doba, dílna v depu ---------- */
.scene-train.rolling .s-chip { animation: cargoSway .55s ease-in-out infinite alternate; }
.scene-train.rolling .s-chip.s-peek { animation: none; }
@keyframes cargoSway { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(3deg) translateY(-2px); } }
.s-liquid { overflow: visible; }
.s-liquid i { position: absolute; left: -6%; right: -6%; top: -7px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.45); }
.scene-train.rolling .s-liquid i { animation: slosh .7s ease-in-out infinite alternate; }
@keyframes slosh { from { transform: translateX(-8%) rotate(-4deg); } to { transform: translateX(8%) rotate(4deg); } }
/* sluníčko putuje po obloze a nebe se zbarvuje podle denní doby (nastavuje station-scene.js) */
.scene-sky { transition: background 1.2s linear; }
.s-sun { transition: left 1.5s linear, top 1.5s linear; }
.scene-morning .scene-hills { filter: saturate(.9) brightness(1.05); }
.scene-evening .scene-hills { filter: sepia(.25) brightness(.92); }
.scene-evening .scene-platform { filter: sepia(.2); }
/* depo jako dílna: zvedák pod vláčkem a stříkací pistole při přebarvení */
/* zvedák: žlutočerný nosník se dvěma sloupky vyjede zpod vláčku a zvedne ho */
.depot-lift { position: absolute; left: 18%; right: 18%; bottom: calc(26% + 2px); height: 0; pointer-events: none; z-index: 2; border-radius: 4px; background: repeating-linear-gradient(90deg, #ffd166 0 14px, #17313f 14px 28px); box-shadow: 0 3px 0 rgba(0,0,0,.18); transition: height .5s cubic-bezier(.2, .8, .3, 1), transform .5s cubic-bezier(.2, .8, .3, 1); }
.depot-lift::before, .depot-lift::after { content: ""; position: absolute; top: 100%; width: 18px; height: 0; background: linear-gradient(90deg, #6b7b88, #9aa8b3 50%, #6b7b88); border-radius: 0 0 4px 4px; transition: height .5s cubic-bezier(.2, .8, .3, 1); }
.depot-lift::before { left: 10%; } .depot-lift::after { right: 10%; }
.depot-stage.lifted .depot-lift { height: 8px; transform: translateY(-22px); }
.depot-stage.lifted .depot-lift::before, .depot-stage.lifted .depot-lift::after { height: 24px; }
.depot-stage .scene-train { transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.depot-stage.lifted .scene-train { transform: translate(-50%, -24px) scale(var(--scale)); }
.depot-spray { position: absolute; z-index: 9; left: 50%; bottom: calc(26% + 40px); width: 44px; height: 44px; transform: translateX(-50%); pointer-events: none; animation: spray 1s linear both; }
.depot-spray::before { content: ""; position: absolute; left: 10px; top: 4px; width: 22px; height: 36px; border-radius: 6px; background: linear-gradient(180deg, #d9dde2, #9aa3a8); }
.depot-spray::after { content: ""; position: absolute; left: 14px; top: -6px; width: 14px; height: 10px; border-radius: 3px; background: var(--spray, #e0453a); }
.depot-spray i { position: absolute; left: 22px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--spray, #e0453a); opacity: 0; animation: sprayDot .5s ease-out infinite; }
.depot-spray i:nth-child(2) { animation-delay: .12s; } .depot-spray i:nth-child(3) { animation-delay: .24s; } .depot-spray i:nth-child(4) { animation-delay: .36s; }
@keyframes spray { 0% { left: 18%; } 100% { left: 82%; } }
@keyframes sprayDot { 0% { transform: translate(0, 0) scale(.6); opacity: .9; } 100% { transform: translate(-20px, 40px) scale(1.6); opacity: 0; } }
.depot-stage.repainting .scene-train { animation: repaintFlash 1s ease-in-out both; }
@keyframes repaintFlash { 0%, 100% { filter: none; } 50% { filter: brightness(1.25) saturate(1.3); } }
.depot-wrench { position: absolute; z-index: 9; left: 50%; bottom: calc(26% + 70px); font-size: 44px; font-family: var(--emoji); transform: translateX(-50%); pointer-events: none; animation: wrench .9s ease-in-out both; }
@keyframes wrench { 0%, 100% { transform: translateX(-50%) rotate(0); opacity: 0; } 20%, 80% { opacity: 1; } 35% { transform: translateX(-50%) rotate(-40deg); } 65% { transform: translateX(-50%) rotate(30deg); } }
.depot-stage .s-wagon.s-couple { animation: coupleIn .8s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes coupleIn { from { transform: translateX(160px); opacity: 0; } 70% { transform: translateX(-8px); opacity: 1; } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .scene-train.rolling .s-chip, .scene-train.rolling .s-liquid i, .depot-spray, .depot-wrench { animation: none; } }

/* ---------- 2.5.0: hračky na poličce v depu ---------- */
.toy-shelf { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 0; padding: 6px 4px; }
.toy-slot { position: relative; aspect-ratio: 1; border: 0; background: transparent; border-radius: 12px 12px 0 0; padding: 4px 6px 14px; cursor: pointer; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.toy-slot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(180deg, #c58f57, #b07a45); border-bottom: 4px solid #8a5a2b; }
.toy-slot:first-child::after { border-radius: 4px 0 0 4px; } .toy-slot:last-child::after { border-radius: 0 4px 4px 0; }
.toy-slot svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 2px rgba(0,0,0,.22)); transition: transform .2s; transform-origin: bottom center; }
.toy-slot:hover svg { transform: translateY(-4px); }
.toy-slot.selected { background: rgba(255,209,102,.45); }
.toy-slot.selected svg { animation: toyWiggle .5s ease-in-out infinite; }
.toy-slot.empty::before { content: ""; position: absolute; inset: 8px 10px 20px; border: 2px dashed rgba(23,49,63,.14); border-radius: 10px; }
.toy-slot.empty.target::before { border-color: #ffd166; background: rgba(255,209,102,.25); }
@keyframes toyWiggle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.toy-unlock { display: flex; align-items: center; gap: 12px; }
.toy-unlock svg { width: 60px; height: 60px; flex: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.22)); animation: toyBounce .9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes toyBounce { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }
@media (max-width: 520px) { .toy-shelf { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .toy-slot.selected svg, .toy-unlock svg { animation: none; } }

/* výhled stanice má přednost před zásobníkem, aby budova nezůstala schovaná pod řadou nástrojů */
.scene-view { flex-grow: 4; }
/* na telefonu stojí budova, výpravčí i čekající výš, aby je nezakryl vláček (rekvizity jsou zmenšené, vláček ne) */
@media (max-width: 520px) { .scene-view { --back: 150px; } .s-worldprop { transform: scale(.6); transform-origin: bottom center; } }
@media (max-height: 520px) and (orientation: landscape) { .scene-view { --back: 122px; } }

/* nízké rekvizity s tvarem: květiny se stonky, houby s nožkou */
.scene.world-valley .s-worldprop { width: 96px; height: 54px; background:
  radial-gradient(circle at 14% 26%, #ff8fb8 0 7px, transparent 8px), radial-gradient(circle at 42% 16%, #ffd166 0 8px, transparent 9px),
  radial-gradient(circle at 70% 30%, #8fd6ff 0 7px, transparent 8px), radial-gradient(circle at 92% 22%, #ff6f91 0 6px, transparent 7px),
  radial-gradient(circle at 14% 26%, #fff 0 2px, transparent 3px), radial-gradient(circle at 42% 16%, #fff 0 2px, transparent 3px), radial-gradient(circle at 70% 30%, #fff 0 2px, transparent 3px),
  linear-gradient(90deg, transparent 0 12.5%, #3f9b5c 12.5% 15.5%, transparent 15.5% 40.5%, #3f9b5c 40.5% 43.5%, transparent 43.5% 68.5%, #3f9b5c 68.5% 71.5%, transparent 71.5% 90.5%, #3f9b5c 90.5% 93.5%, transparent 93.5%) bottom / 100% 72% no-repeat,
  radial-gradient(ellipse at 50% 100%, #46c88c 0 46%, transparent 47%) bottom / 100% 60% no-repeat; }
.scene.world-forest .s-worldprop { width: 84px; height: 46px; background:
  linear-gradient(#f4e9d2, #e6d7b8) 12px 100% / 12px 24px no-repeat, radial-gradient(ellipse at 50% 100%, #e0453a 0 62%, transparent 63%) 0 0 / 36px 24px no-repeat,
  radial-gradient(circle at 30% 45%, #fff 0 3px, transparent 4px) 0 0 / 36px 24px no-repeat, radial-gradient(circle at 68% 60%, #fff 0 2.5px, transparent 3.5px) 0 0 / 36px 24px no-repeat,
  linear-gradient(#f4e9d2, #e6d7b8) 60px 100% / 9px 16px no-repeat, radial-gradient(ellipse at 50% 100%, #e0453a 0 62%, transparent 63%) 52px 14px / 26px 17px no-repeat,
  radial-gradient(circle at 40% 50%, #fff 0 2.5px, transparent 3.5px) 52px 14px / 26px 17px no-repeat; }

/* ---------- 2.5.1: panel nástroje na telefonu nezakrývá vláček ---------- */
.tool-panel.inline { position: static; margin: 0 0 8px; box-shadow: 0 2px 8px rgba(0,0,0,.08); border: 1px solid var(--line); background: #fff; }
.scene.tool-inline .scene-tray-title, .scene.tool-inline .scene-tray-items { display: none; }
.scene.tool-inline .scene-tray { overflow-y: auto; }
/* bílý pruh pod hrou: prostor pro lištu iPhonu (safe area) má stejnou barvu jako zbytek stanice, pozadí stránky není bílé */
html { background: #9ddcff; }
.scene { background: var(--paper); padding-bottom: 0; }
.scene-actions { padding-bottom: calc(12px + var(--sab)); }
/* velká obrazovka: panel zůstává dole ve výhledu, ale kompaktní (titulek + tlačítko + Hotovo vedle sebe), aby se vešel
   do pásu nástupiště pod vláčkem; poznámka je stejná jako nápověda nahoře, proto se tu neopakuje */
.tool-panel:not(.inline) { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 8px 12px; left: 8px; right: 8px; bottom: 8px; }
.tool-panel:not(.inline) .tool-title { grid-column: 1; margin: 0; }
.tool-panel:not(.inline) .tool-note { display: none; }
.tool-panel:not(.inline) .pump-btn, .tool-panel:not(.inline) .shovel-btn, .tool-panel:not(.inline) .subtool-row, .tool-panel:not(.inline) .tool-progress { grid-column: 1; }
.tool-panel:not(.inline) .pump-btn, .tool-panel:not(.inline) .shovel-btn { min-height: 44px; padding: 6px 14px; }
.tool-panel:not(.inline) .tool-close { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; min-height: 44px; margin: 0; }

/* ---------- v2.6: třídy, věty, události, odznaky, vzkazy ---------- */
/* věty v panelu smajlíků: druhý řádek přes oba sloupce, tlačítka s textem ≥ 44 px */
.emote-panel .emote-phrases { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.emote-panel .emote-phrases button { width: auto; height: auto; min-height: 44px; padding: 6px 10px; border-radius: 14px; font: 800 13px var(--font); line-height: 1.2; white-space: normal; background: linear-gradient(180deg, #fff, #fff3d6); color: var(--ink); }
body.big-buttons .emote-panel .emote-phrases button { min-height: 52px; font-size: 15px; }
/* bubliny s větou nad vláčky: HTML vrstva nad plátnem a pod HUD (smajlíky kreslí plátno, věty tahle vrstva) */
.phrase-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mp-phrase { position: absolute; left: 0; top: 0; max-width: 190px; padding: 6px 12px; border-radius: 16px; background: rgba(255,252,240,.96); border: 1.5px solid rgba(23,49,63,.25); color: var(--ink); font: 800 18px var(--font); line-height: 1.2; text-align: center; box-shadow: 0 6px 14px rgba(0,0,0,.14); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; will-change: transform, opacity; }
.mp-phrase.mine { border-color: var(--gold2); background: #fff8dd; }
/* proužek události v místnosti nad HUD (sněžení, bouřka, dvojité mince, párty) */
.hud-event { align-self: center; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(180deg, #fff3c4, var(--gold)); color: #58370a; border: 2px solid rgba(88,55,10,.14); box-shadow: 0 8px 18px rgba(0,0,0,.16); font-weight: 800; font-size: 14px; font-family: var(--emoji), var(--font); pointer-events: none; animation: emotepop .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.hud-event[hidden] { display: none !important; }
.hud-event .event-icon { font-size: 20px; line-height: 1; }
.hud-event .event-text { max-width: min(46vw, 320px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-event .event-left { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.7); font-size: 12px; font-variant-numeric: tabular-nums; }
.hud-event[data-kind="snow"] { background: linear-gradient(180deg, #fff, #d8efff); color: #1d4a6b; }
.hud-event[data-kind="storm"] { background: linear-gradient(180deg, #d5dde8, #93a3b8); color: #182638; }
.hud-event[data-kind="party"] { background: linear-gradient(180deg, #ffd6f0, #ffb3e6); color: #6b1d4e; }
body.big-buttons .hud-event { font-size: 16px; }
/* záblesk bouřky přes celou obrazovku (pod scénou stanice) */
.storm-flash { position: absolute; inset: 0; z-index: 19; pointer-events: none; background: #fff; opacity: 0; }
.storm-flash[hidden] { display: none !important; }
.storm-flash.on { animation: stormflash .6s ease-out both; }
@keyframes stormflash { 0% { opacity: 0; } 8% { opacity: .85; } 20% { opacity: .15; } 30% { opacity: .6; } 100% { opacity: 0; } }
/* štafeta v proužku úkolu: dva kroky, aktuální zvýrazněný, hotový přeškrtnutý */
.hud-quest .quest-label.relay { white-space: normal; line-height: 1.3; }
.hud-quest .quest-label.relay i { font-style: normal; opacity: .6; }
.hud-quest .quest-label.relay i.on { opacity: 1; background: rgba(255,255,255,.7); border-radius: 8px; padding: 1px 5px; }
.hud-quest .quest-label.relay i.ok { text-decoration: line-through; }
/* tabule: víc záložek, odznaky, kamarádi, kdo tu jezdí */
.board-tabs { flex-wrap: wrap; }
.board-tabs .chip { flex: 1 1 auto; max-width: none; min-height: 44px; }
.board-tabs .chip[hidden] { display: none !important; }
.board-list .badge-row { gap: 12px; }
.badge-icon { flex: none; font-size: 28px; line-height: 1; }
.badge-main { display: grid; gap: 2px; }
.badge-main small { white-space: normal; }
.badge-tier { flex: none; display: grid; justify-items: end; gap: 2px; color: var(--gold2); }
.badge-tier b { font-size: 18px; letter-spacing: .05em; }
.badge-tier small { color: var(--muted); }
.badge-row.tier-0 .badge-icon { filter: grayscale(1); opacity: .55; }
.friend-row, .player-row { display: flex; align-items: center; gap: 8px; }
.friend-row .friend-name, .board-list .player-row .board-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .friend-row > small, .board-list .player-row > :nth-child(2) { flex: none; }
.friend-row .btn-small, .player-row .btn-small { flex: none; min-height: 44px; border-radius: 14px; border: 0; background: linear-gradient(180deg, #ffe08a, #efb953); color: #58370a; font-weight: 800; }
.board-list .player-row.me { background: rgba(126,226,184,.25); }
body.big-buttons .friend-row .btn-small, body.big-buttons .player-row .btn-small { min-height: 52px; font-size: 16px; }
/* kamarádi v online modálu */
.online-friends { display: grid; gap: 6px; text-align: left; }
.online-friends[hidden] { display: none !important; }
.online-friends .friends-title { font-size: 14px; color: var(--muted); }
.online-friends .friend-row { padding: 6px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 800; font-size: 14px; font-family: var(--emoji), var(--font); }
.online-friends .friend-row small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.online-friends .settings-note { margin: 0; }
/* vzkaz od správce a potvrzovací okno (nahlášení, odchod ze třídy) */
.message-card { text-align: center; }
.message-list { display: grid; gap: 8px; text-align: left; max-height: 46vh; overflow-y: auto; }
.message-item { margin: 0; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 16px; line-height: 1.4; white-space: pre-wrap; }
body.big-buttons .message-item { font-size: 18px; }
/* třída v účtu (kód od paní učitelky) */
.account-class { font-weight: 800; margin: 6px 0; }
.account-class-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 8px; }
.account-class-row[hidden] { display: none !important; }
.account-class-row label { flex: 1 1 160px; display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.account-class-row input { text-transform: uppercase; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: .2em; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 0 10px; font-family: var(--font); }
.account-class-row .btn-secondary { flex: none; min-height: 48px; }
#accClassLeave[hidden] { display: none !important; }
@media (max-width: 560px) {
  .emote-panel .emote-phrases { grid-template-columns: 1fr; }
  .emote-panel .emote-phrases button { min-height: 44px; font-size: 12.5px; }
  .hud-event { font-size: 12.5px; padding: 5px 10px; }
  .mp-phrase { font-size: 15px; max-width: 150px; }
}

/* ---------- 2.6.0: dětské menu, depo na tři záložky, HUD bez čtení, kreslené ikony, lákadlo ---------- */
.menu-shell { position: relative; }
/* Roh „🔒 Pro rodiče“ je v dětském i dospělém menu: jen v jeho okně je „✉️ Napište nám“ a odkazy na
   stránky pro rodiče a o soukromí (návody na webu k nim vedou touhle cestou). Do 2.7.14 byl jen v dětském
   menu, takže rodič s vypnutým dětským režimem neměl kudy napsat. Hlavička menu má nahoře místo,
   ať roh nepřekryje štítek nad názvem hry (i na telefonu na šířku, kde je hlavička jinak nízká). */
.menu-parents { position: absolute; right: 0; top: 0; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.85); font: 700 13px var(--font); color: var(--muted); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.menu-hero { padding-top: 34px; }
/* věta „Dítě vidí v menu jen Hrát, Mapy, Depo a Online…“ platí jen pro dětské menu */
body:not(.kids-ui) #parentsModal .parents-kids-note { display: none; }
.kids-ui .menu-grid { grid-template-columns: repeat(3, 1fr); }
/* jen v dětském menu (.menu-grid): stejnou třídu menu-btn mají i tlačítka v okně Pro rodiče a bez
   .menu-grid by tohle pravidlo v dětském režimu schovalo i je – okno za zámkem by bylo prázdné */
.kids-ui .menu-grid .menu-btn:not(#menuWorlds):not(#menuDepot):not(#menuOnline) { display: none; }
.kids-ui .menu-grid .menu-btn { flex-direction: column; justify-content: center; min-height: 116px; gap: 6px; font-size: 15px; text-align: center; }
.kids-ui .menu-grid .menu-btn > span:first-child { font-size: 46px; line-height: 1; }
.kids-ui .menu-btn-online > span:last-child { align-items: center; }
.kids-ui .menu-btn-online small { display: none; }
.kids-ui .menu-quests, .kids-ui #menuProfile, .kids-ui #menuDifficulty, .kids-ui #menuShare, .kids-ui #menuPlayer { display: none; }
.parents-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 14px; }
.parents-grid .menu-btn { min-height: 52px; font-size: 14px; }
@media (max-width: 420px) { .kids-ui .menu-grid .menu-btn { min-height: 96px; } .kids-ui .menu-grid .menu-btn > span:first-child { font-size: 38px; } }
/* depo pro děti: tři záložky, uvnitř oddíly s nadpisem */
.kids-tab { display: none; }
.kids-ui .kids-tab { display: inline-flex; }
.kids-ui #depotTabs button:not(.kids-tab) { display: none; }
body.kindergarten .kids-tab[data-tab="shop"] { display: none; }
.depot-section { margin: 18px 0 8px; font-size: 17px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }
#depotContent > .depot-section:first-child { margin-top: 4px; }
/* HUD bez čtení: větší obrázky */
.kids-ui .hud-task { font-size: 17px; }
.kids-ui .hud-task-to { font-size: 19px; }
/* kreslené ikony místo emoji (Twemoji, CC-BY 4.0) – stejné na iPhonu, Androidu i Windows */
img.emj { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; pointer-events: none; }
button img.emj { vertical-align: -0.22em; }
/* lákadlo v menu: vláček popojede, zatočí koly a zahouká */
.menu-train.attract .scene-train { animation: menuAttract 4.4s ease-in-out both; }
.menu-train.attract .scene-train .s-wheels i, .menu-train.attract .scene-train .s-wheels::before, .menu-train.attract .scene-train .s-wheels::after { animation: spin .3s linear infinite; }
@keyframes menuAttract { 0%, 100% { transform: translateX(calc(-50% + var(--offset, 0px))) scale(var(--scale, 1)); } 45%, 60% { transform: translateX(calc(-50% + var(--offset, 0px) + 70px)) scale(var(--scale, 1)); } }
@media (prefers-reduced-motion: reduce) { .menu-train.attract .scene-train, .menu-train.attract .scene-train .s-wheels i { animation: none; } }

/* ---------- 2.7.0: přístupnost a výkon (Nastavení → Přístupnost; třídy na body nastavuje js/game.js applySettings) ---------- */
/* tlumené animace (body.reduce-motion): nic neplave, nebliká ani se nepřelévá – obrazovky se přepnou hned.
   Nekonečné animace (kola, ukazováček) doběhnou jednou, konfety a záblesk bouřky se vůbec neukážou. */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
body.reduce-motion .confetti, body.reduce-motion .storm-flash { display: none !important; }
body.reduce-motion .screen-menu::before, body.reduce-motion .screen-menu::after { animation: none !important; }
body.reduce-motion .screen-menu::before { left: 5%; }
body.reduce-motion .screen-menu::after { left: 64%; }
body.reduce-motion .s-sun::before { animation: none !important; }

/* jednodušší grafika (body.low-detail): mapu zjednodušuje renderer, tady jen drahé stíny, rozostření a stále běžící animace */
body.low-detail .hud-level, body.low-detail .hud-icon, body.low-detail .hud-online, body.low-detail .guide-bubble, body.low-detail .ctl, body.low-detail .emote-panel, body.low-detail .emote-panel button, body.low-detail .hud-hand { box-shadow: none; filter: none; }
body.low-detail .modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.low-detail .screen-menu::before, body.low-detail .screen-menu::after, body.low-detail .s-sun::before { animation: none; }

/* leváci (body.left-hand, #hud.left-hand): plyn a brzda u levého okraje, výhybka a houkačka směrem doprava,
   ukazatele (voda, uhlí, mince) vpravo; panel smajlíků u levého okraje */
.hud.left-hand .hud-controls { order: -1; flex-direction: row-reverse; justify-self: start; }
.hud.left-hand .hud-speed { order: 0; }
.hud.left-hand .hud-gauges { order: 1; justify-self: end; }
body.left-hand .emote-panel { right: auto; left: calc(10px + var(--sal)); }
@media (max-width: 560px) {
  /* na výšku je spodek HUD pod sebou: pořadí řádků zůstává, jen se zrcadlí do stran */
  .hud.left-hand .hud-controls, .hud.left-hand .hud-speed, .hud.left-hand .hud-gauges { order: 0; }
  .hud.left-hand .hud-controls { justify-self: stretch; }
  .hud.left-hand .hud-speed, .hud.left-hand .hud-gauges { justify-self: end; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hud.left-hand .hud-bottom { grid-template-columns: 1fr auto auto; }
  .hud.left-hand .hud-controls { order: -1; justify-self: start; }
  .hud.left-hand .hud-speed { order: 0; justify-self: end; }
  .hud.left-hand .hud-gauges { order: 1; }
}

/* větší kontrast (body.high-contrast): tmavší písmo, silné obrysy tlačítek a pruhů HUD, výraznější přepínače */
body.high-contrast { --ink: #051018; --muted: #1c2e37; --line: rgba(5,16,24,.5); --hud-bg: #fffdf7; --hud-edge: #051018; --hud-track: rgba(5,16,24,.3); }
body.high-contrast .hud-level, body.high-contrast .hud-time, body.high-contrast .hud-icon, body.high-contrast .hud-online, body.high-contrast .hud-gauges, body.high-contrast .hud-speed, body.high-contrast .guide-bubble { background: var(--hud-bg); color: var(--ink); box-shadow: 0 0 0 2px var(--hud-edge), 0 6px 16px rgba(0,0,0,.18); }
body.high-contrast .hud-icon.active { background: var(--gold); }
body.high-contrast .hud-quest, body.high-contrast .hud-event { box-shadow: 0 0 0 2px var(--hud-edge); color: var(--ink); }
body.high-contrast .gauge-bar, body.high-contrast .speed-bar, body.high-contrast .hud-progress { background: var(--hud-track); box-shadow: inset 0 0 0 1px var(--hud-edge); }
body.high-contrast .hud-task-to { color: var(--ink); }
body.high-contrast .hud-task.done { opacity: .75; }
body.high-contrast .ctl { box-shadow: 0 0 0 3px var(--hud-edge), 0 8px 18px rgba(0,0,0,.22); }
body.high-contrast .ctl small, body.high-contrast .ctl b, body.high-contrast .ctl span { color: #000; text-shadow: 0 0 3px #fff, 0 0 1px #fff; }
body.high-contrast .btn-primary, body.high-contrast .btn-secondary, body.high-contrast .btn-back, body.high-contrast .btn-small, body.high-contrast .menu-btn, body.high-contrast .chip, body.high-contrast .select, body.high-contrast .scene-btn, body.high-contrast .tool-btn, body.high-contrast .emote-panel button { border: 2px solid var(--ink); }
body.high-contrast .settings-card, body.high-contrast .modal-card, body.high-contrast .emote-panel { border: 2px solid var(--ink); }
body.high-contrast .switch-row input { background: rgba(5,16,24,.42); box-shadow: inset 0 0 0 2px var(--ink); }
body.high-contrast .switch-row input:checked { background: #11804b; }
body.high-contrast .switch-row small, body.high-contrast .settings-note, body.high-contrast .depot-note { color: var(--muted); }
body.high-contrast h1, body.high-contrast h2, body.high-contrast h3 { color: var(--ink); }
body.high-contrast .toast { background: #051018; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #051018; }
body.high-contrast :focus-visible { outline: 3px solid #051018; outline-offset: 2px; }

/* ---------- 2.7 (G3): smazání účtu ze hry ---------- */
.account-delete-row { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
.btn-account-delete { min-height: 36px; font-size: 13px; color: #a3281a; border-color: #f0b5aa; background: #fff5f3; }
.btn-account-delete:active { transform: scale(.97); }
.acc-delete-box { display: grid; gap: 10px; text-align: left; }
.acc-delete-pin { display: grid; gap: 4px; font-weight: 800; font-size: 14px; }
.acc-delete-pin input { min-height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); font: 800 22px var(--font); letter-spacing: .25em; text-align: center; -webkit-user-select: text; user-select: text; }
.acc-delete-err { margin: 0; padding: 8px 12px; border-radius: 12px; background: #ffd9d3; color: #8a2a1c; font-weight: 800; font-size: 15px; }
.message-card:has(.acc-delete-box) #messageOk { background: linear-gradient(180deg, #ff8a78, #d9492f); color: #fff; }
body.high-contrast .btn-account-delete { color: #7a1407; border: 2px solid #7a1407; }

/* ---------- 2.7.0: kola se točí správným směrem ---------- */
/* Boční pohled: kola se netočí věčnou animací (dřív vždy po směru hodinových ručiček, i když vláček jel doleva),
   ale podle ujeté dráhy. --roll = dráha vláčku v jeho vlastních px (posun / měřítko, při jízdě doleva klesá).
   Úhel = dráha · 360° / (π · průměr kola); záporný = proti směru hodinových ručiček = jízda doleva, tedy vpřed
   (komín vlevo). Ve stanici nastavuje --roll js/station-scene.js, menu, cedule kapitoly a vagon přijíždějící v depu
   ho animují tady. Stojící vláček (náhled v depu) má --roll 0, kola stojí. */
@property --roll { syntax: '<number>'; inherits: true; initial-value: 0; }
.s-wheels { --wheel-k: 4.7746; }                      /* kolo 24 px (vagony, tendr): 360 / (π · 24) */
.s-loco .s-wheels { --wheel-k: 3.8197; }              /* kolo lokomotivy 30 px: 360 / (π · 30) */
.s-loco.loco-drezina .s-wheels { --wheel-k: 4.7746; } /* drezína má kola 24 px */
.s-wheels i, .s-wheels::before, .s-wheels::after { transform: rotate(calc(var(--roll, 0) * var(--wheel-k, 4.7746) * 1deg)); }
/* staré věčné točení vypnout */
.scene-train.rolling .s-wheels i, .scene-train.rolling .s-wheels::before, .scene-train.rolling .s-wheels::after,
.splash-train .scene-train .s-wheels i, .splash-train .scene-train .s-wheels::before, .splash-train .scene-train .s-wheels::after,
.menu-train.attract .scene-train .s-wheels i, .menu-train.attract .scene-train .s-wheels::before, .menu-train.attract .scene-train .s-wheels::after { animation: none; }
/* menu: obal popojíždí o 10 px (chug) a kola se valí přesně o tolik; vnitřní vláček má měřítko .42 → 10 / .42 */
.menu-train .scene-train { animation: wheelsMenuChug 3s ease-in-out infinite; }
@keyframes wheelsMenuChug { 0%, 100% { --roll: 0; } 50% { --roll: -23.8095; } }
/* lákadlo v menu: vláček popojede 70 px doleva (vpřed) a vrátí se na místo; chug obalu i jeho kola se mezitím
   zastaví (paused), dráha lákadla se k nim přičte (animation-composition: add), takže kola nikde neskočí.
   Nahrazuje menuAttract z 2.6.0, kde translateX(-50% …) scale(1) vláček posunul a zvětšil a jel napřed doprava. */
.menu-train.attract { animation-play-state: paused; }
.menu-train.attract .scene-train { animation: wheelsMenuChug 3s ease-in-out infinite, wheelsMenuAttract 4.4s ease-in-out both, wheelsMenuAttractRoll 4.4s ease-in-out both; animation-play-state: paused, running, running; animation-composition: replace, replace, add; }
@keyframes wheelsMenuAttract { 0%, 100% { transform: scale(.42); } 45%, 60% { transform: translateX(-70px) scale(.42); } }
@keyframes wheelsMenuAttractRoll { 0%, 100% { --roll: 0; } 45%, 60% { --roll: -166.6667; } }
/* cedule kapitoly: vláček přijede zprava (vpřed, doleva) a zastaví na původním místě translateX(4%).
   Dráha je v px, aby šla přepočíst na otáčky: kolej je široká 472 px (plocha) → start 480 px vpravo,
   na telefonu (≤ 440 px, kolej ≤ 366 px) 370 px. --roll = posun / měřítko .5 */
.splash-train .scene-train { animation: wheelsSplashIn 1.1s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes wheelsSplashIn { from { transform: translateX(calc(4% + 480px)) scale(.5); --roll: 960; } to { transform: translateX(4%) scale(.5); --roll: 0; } }
@keyframes wheelsSplashInNarrow { from { transform: translateX(calc(4% + 370px)) scale(.5); --roll: 740; } to { transform: translateX(4%) scale(.5); --roll: 0; } }
@media (max-width: 440px) { .splash-train .scene-train { animation-name: wheelsSplashInNarrow; } }
/* depo: nový vagon přijede zprava (160 px → −8 px → 0, v souřadnicích vláčku) a kola se valí s ním */
.depot-stage .s-wagon.s-couple { animation: coupleIn .8s cubic-bezier(.2, .8, .3, 1) both, wheelsCoupleRoll .8s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes wheelsCoupleRoll { from { --roll: 160; } 70% { --roll: -8; } to { --roll: 0; } }
/* tlumené animace: kola stojí, vláček v menu ani na ceduli nepopojíždí */
@media (prefers-reduced-motion: reduce) {
  .s-wheels i, .s-wheels::before, .s-wheels::after { transform: none; }
  .menu-train .scene-train, .menu-train.attract .scene-train, .splash-train .scene-train { animation: none; }
}
body.reduce-motion .s-wheels i, body.reduce-motion .s-wheels::before, body.reduce-motion .s-wheels::after { transform: none; }

/* ---------- 2.7.0: mini-hry jedním ťuknutím ---------- */
/* celá hrací plocha je jedno velké tlačítko; zbytek se odehraje sám (js/minigames.js) */
.mg-host .mg-board { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.mg-host.mg-done .mg-board { cursor: default; }
.mg-hand { position: absolute; z-index: 9; font-family: var(--emoji); font-size: 42px; line-height: 1; pointer-events: none; transform: translate(-96%, -40%) rotate(-24deg); filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .35)); animation: mg-hand-tap 1s ease-in-out infinite; }
.mg-hand.mg-hand-flip { transform: translate(-4%, -40%) scaleX(-1) rotate(-24deg); animation-name: mg-hand-tap-flip; }
@keyframes mg-hand-tap { 0%, 100% { transform: translate(-96%, -40%) rotate(-24deg); } 50% { transform: translate(-80%, -30%) rotate(-24deg) scale(.92); } }
@keyframes mg-hand-tap-flip { 0%, 100% { transform: translate(-4%, -40%) scaleX(-1) rotate(-24deg); } 50% { transform: translate(-20%, -30%) scaleX(-1) rotate(-24deg) scale(.92); } }
/* 1) olejnička letí sama ke kolečku a kape */
.mg-can { cursor: pointer; }
.mg-can.mg-can-fly { z-index: 7; cursor: default; box-shadow: 0 14px 26px rgba(0, 0, 0, .28); }
.mg-oil-drop { position: absolute; z-index: 8; font-family: var(--emoji); font-size: 18px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); }
/* 2) žárovky létají samy */
.mg-game-lamp .mg-bulb { cursor: pointer; }
.mg-bulb.mg-flying { z-index: 7; }
/* 3) jeřáb bez tlačítek: zašedlá bedna teď nemá volný vagon */
.mg-game-crane .mg-controls { display: none !important; }
.mg-game-crane .mg-box { cursor: pointer; transition: opacity .25s, filter .25s; }
.mg-box.mg-box-wait { opacity: .45; filter: grayscale(.7); }
.mg-trolley .mg-box.mg-under { outline: none; }
body.reduce-motion .mg-hand { animation: none !important; }

/* ---------- 2.7.0: nakladani tuknutim, voda a uhli samy, myti jednim tahem ---------- */
/* postavičky na nástupišti jdou chytit (ťuknout) stejně jako karty v zásobníku; obal .s-waiting zůstává průchozí */
.scene .s-waiting .s-figure { pointer-events: auto; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.scene.dragging .s-waiting .s-figure { cursor: grabbing; }
/* věc, pro kterou vláček nemá vagon: karta / postavička se zatřese (bez trestu) */
.scene .s-card.shake, .scene .s-waiting .s-figure.shake { animation: shake .45s; }
/* mytí jedním tahem: prst po vláčku rovnou drhne */
.scene[data-sub="scrub"] .scene-dirt { cursor: crosshair; }
/* uhlí: jedno ťuknutí na lopatu, pak se háže samo – tlačítko jemně pracuje */
.shovel-btn.working { animation: shovelWork .65s ease-in-out infinite; }
@keyframes shovelWork { 50% { filter: brightness(1.25); transform: scale(.97); } }
/* ťuknutí na lopatu nebo zásobník uhlí rovnou zapne nakládání */
.scene .s-bunker:not([hidden]) { cursor: pointer; }
body.reduce-motion .shovel-btn.working { animation: none; }
/* zavřený panel nástroje nesmí zůstat jako prázdný bílý pruh ve výhledu (.tool-panel:not(.inline) má display: grid) */
.scene .tool-panel[hidden] { display: none; }

/* ---------- 2.7.0: kola se točí správným směrem (doplněk: točí se vzorek paprsků, ne celé kolo) ---------- */
/* Kola lokomotivy jsou ve skutečnosti ovály: 5 kol po 30 px (::before, 3× i, ::after) se smrskne do 96 px → 19,2 × 30 px
   (drezína 17,6 × 24 px). Otočení celého prvku by ovály převracelo a překrývalo, proto obrys stojí a otáčí se jen
   kónický přechod (from úhel). Úhel = --roll · --wheel-k (podle výšky kola), záporný = proti směru hodinových ručiček.
   Barevné varianty kol (dřevo, dílna wheels-1/2) musí být i tady, jinak by se jejich paprsky netočily. */
.s-wheels i, .s-wheels::before, .s-wheels::after { transform: none; --wheel-a: calc(var(--roll, 0) * var(--wheel-k, 4.7746) * 1deg); background: repeating-conic-gradient(from var(--wheel-a, 0deg), #2b2f33 0 6deg, #b9c1c7 6deg 45deg); }
.s-loco.skin-wood .s-wheels i, .s-loco.skin-wood .s-wheels::before, .s-loco.skin-wood .s-wheels::after { background: repeating-conic-gradient(from var(--wheel-a, 0deg), #6b4a2a 0 6deg, #d9b27a 6deg 45deg); }
.s-loco.wheels-1 .s-wheels i, .s-loco.wheels-1 .s-wheels::before, .s-loco.wheels-1 .s-wheels::after { background: repeating-conic-gradient(from var(--wheel-a, 0deg), #8a1f16 0 6deg, #ff8b6f 6deg 45deg); }
.s-loco.wheels-2 .s-wheels i, .s-loco.wheels-2 .s-wheels::before, .s-loco.wheels-2 .s-wheels::after { background: repeating-conic-gradient(from var(--wheel-a, 0deg), #8b5a12 0 6deg, #ffd166 6deg 45deg); }
@media (prefers-reduced-motion: reduce) { .s-wheels i, .s-wheels::before, .s-wheels::after { --wheel-a: 0deg; } }
body.reduce-motion .s-wheels i, body.reduce-motion .s-wheels::before, body.reduce-motion .s-wheels::after { --wheel-a: 0deg; }

/* ---------- 2.7.0: účet – přihlášenému se nesmí ukázat formulář pro založení a přihlášení; mazání účtu čeká na server ---------- */
/* .account-form { display: grid } by jinak přebilo atribut hidden (renderAccount ho u přihlášeného účtu nastavuje) */
.account-form[hidden] { display: none !important; }
/* okno „Smazat účet“ během čekání na server: tlačítko „Mažu…“ je neaktivní, pod PINem věta, že se maže */
.acc-delete-wait { margin: 0; padding: 8px 12px; border-radius: 12px; background: #e3f1ff; color: #1d4f7a; font-weight: 800; font-size: 15px; }
.acc-delete-wait::before { content: "⏳ "; font-family: var(--emoji); }
.message-card:has(.acc-delete-wait) #messageOk:disabled { cursor: progress; }
.acc-delete-pin input:disabled { background: #f4f1ec; color: #6b6660; }

/* ---------- 2.7.0: kola se točí správným směrem (doplněk 2: rychlá kola nesmí vypadat, že se točí pozpátku) ---------- */
/* Paprsky se opakují po 45°. Pootočí-li se kolo mezi dvěma snímky (60 Hz) o víc než 22,5°, oko vidí točení pozpátku
   (stroboskop). Ve stanici vláček přijíždí až ~2800 px/s (přes 150° za snímek), vagon v depu ~1200 px/s. Tam se proto úhel
   „smrskne“: do R0 = 5 px od místa zastavení se kolo valí přesně podle dráhy, dál přibývá úhel jen s (R0 / |dráha|)^(2/3):
     g(r) = (clamp(−R0, r, R0) + znaménko(r) · 3·R0^(2/3) · (max(R0, |r|)^(1/3) − R0^(1/3))) · K
   (spojité i s první derivací v R0, g(0) = 0, znaménko = směr jízdy). Příjezd (easeOut ³) a odjezd (easeIn ³) ve stanici
   i vagon v depu (cubic-bezier(.2, .8, .3, 1)) mají rychlost zhruba úměrnou |dráha|^(2/3), takže se kolo mimo cílovou zónu
   točí skoro stálou rychlostí ~4–10° za snímek – vždy vpřed – a u zastavení plynule dobrzdí na 0, bez skoku.
   Menu (chug, lákadlo) jede pomalu a cedule kapitoly má rychlý úsek schovaný, tam zůstává přesné valení.
   Bez pow() (starší prohlížeče) zůstane přesné valení z předchozí sekce. Ověřuje test/wheels.html (60Hz kontrola). */
@supports (width: calc(pow(8, 1 / 3) * 1px)) {
  .scene-view .scene-train .s-wheels i, .scene-view .scene-train .s-wheels::before, .scene-view .scene-train .s-wheels::after,
  .depot-stage .s-wagon.s-couple .s-wheels i, .depot-stage .s-wagon.s-couple .s-wheels::before, .depot-stage .s-wagon.s-couple .s-wheels::after {
    --wheel-r0: 5;
    --wheel-a: calc((clamp(-1 * var(--wheel-r0), var(--roll, 0), var(--wheel-r0)) + clamp(-1, var(--roll, 0) * 1000, 1) * 3 * pow(var(--wheel-r0), 2 / 3) * (pow(max(var(--wheel-r0), var(--roll, 0), -1 * var(--roll, 0)), 1 / 3) - pow(var(--wheel-r0), 1 / 3))) * var(--wheel-k, 4.7746) * 1deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .scene-view .scene-train .s-wheels i, .scene-view .scene-train .s-wheels::before, .scene-view .scene-train .s-wheels::after,
    .depot-stage .s-wagon.s-couple .s-wheels i, .depot-stage .s-wagon.s-couple .s-wheels::before, .depot-stage .s-wagon.s-couple .s-wheels::after { --wheel-a: 0deg; }
  }
  body.reduce-motion .scene-view .scene-train .s-wheels i, body.reduce-motion .scene-view .scene-train .s-wheels::before, body.reduce-motion .scene-view .scene-train .s-wheels::after,
  body.reduce-motion .depot-stage .s-wagon.s-couple .s-wheels i, body.reduce-motion .depot-stage .s-wagon.s-couple .s-wheels::before, body.reduce-motion .depot-stage .s-wagon.s-couple .s-wheels::after { --wheel-a: 0deg; }
}

/* ---------- 2.7.0 (oprava): postavičky, lopata a zásobník uhlí jdou ve stanici opravdu ťuknout ---------- */
/* Průhledný obal vláčku (celá šířka, z-index 3) ležel přes rekvizity za vláčkem – ťuknutí propadnou,
   chytají je jen samotné vozy (lokomotiva, tendr, vagony s věcmi). Plátno špíny má pointer-events vložené v JS. */
.scene .scene-train-wrap, .scene .scene-train { pointer-events: none; }
.scene .scene-train > * { pointer-events: auto; }
/* větší plocha pro prst: hadice (na telefonu zmenšená na 60 %) a postavičky */
.scene .s-hose-handle::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
.scene .s-waiting .s-figure::after { content: ""; position: absolute; inset: -8px -3px; }
/* Na užší nebo nižší obrazovce by postavičky stály schované za vláčkem nebo přes zásobník uhlí a lopatu –
   čekají proto vpředu na nástupišti (před vláčkem, pod budovou). */
@media (max-width: 760px), (max-height: 760px) {
  .scene .s-waiting { right: 4%; bottom: calc(var(--ground) * .22); }
}
/* mytí tahem: tah může začít i vedle vláčku – prohlížeč ho nesmí vzít jako posun stránky */
.scene[data-sub="scrub"] .scene-view { touch-action: none; }

/* ---------- 2.7.0: ikony v záložkách depa mají mezeru a jsou na středu ---------- */
.tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tabs button img.emj { margin: 0; vertical-align: middle; }

/* ---------- 2.7.0 (oprava): okno „Smazat účet“ na nízké obrazovce (telefon na šířku) ----------
   Na 844×390 byla věta „Mažu účet, chvilku počkej…“ i tlačítko pod viditelnou částí okna: seznam ve vzkazu má
   max-height 46vh s vlastním posuvníkem a karta pod ním další. Na nízké obrazovce je okno kompaktní – malá ikona vedle
   nadpisu, obsah bez vnitřního posuvníku, tlačítka v jedné řadě – a na šířku je text vlevo, PIN a stav čekání vpravo.
   Třídy acc-delete-card / acc-delete-busy dává kartě jen tohle okno (js/game.js openAccountDelete → showMessageModal). */
@media (max-height: 520px) {
  .message-card.acc-delete-card { grid-template-columns: auto 1fr 1fr; align-items: center; column-gap: 10px; row-gap: 8px; padding: 12px 16px; }
  .message-card.acc-delete-card > .daily-icon { grid-column: 1; grid-row: 1; font-size: 34px; line-height: 1; }
  .message-card.acc-delete-card > h2 { grid-column: 2 / -1; grid-row: 1; margin: 0; font-size: 21px; text-align: left; }
  .message-card.acc-delete-card > .message-list { grid-column: 1 / -1; max-height: none; overflow: visible; }
  .message-card.acc-delete-card > #messageOk { grid-column: 1 / 3; min-height: 46px; }
  .message-card.acc-delete-card > #messageCancel { grid-column: 3; min-height: 46px; }
  .message-card.acc-delete-card.acc-delete-busy > #messageOk { grid-column: 1 / -1; }
  .acc-delete-card .acc-delete-box { gap: 8px; }
  .acc-delete-card .acc-delete-box .message-item { padding: 8px 12px; font-size: 15px; line-height: 1.35; }
  .acc-delete-card .acc-delete-pin input { min-height: 42px; }
  .acc-delete-card .acc-delete-wait, .acc-delete-card .acc-delete-err { padding: 6px 10px; font-size: 14px; }
}
@media (max-height: 520px) and (min-width: 560px) {
  .message-card.acc-delete-card { width: min(720px, 100%); }
  .acc-delete-card .acc-delete-box { grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr; align-items: start; column-gap: 12px; }
  .acc-delete-card .acc-delete-box > .message-item { grid-column: 1; grid-row: 1 / span 2; }
  .acc-delete-card .acc-delete-box > .acc-delete-pin, .acc-delete-card .acc-delete-box > .acc-delete-wait, .acc-delete-card .acc-delete-box > .acc-delete-err { grid-column: 2; }
}

/* Zamknutý řádek v nastavení: přepínač nebo výběr, se kterým teď nejde hýbat (například mluvené
   komentáře, dokud je správce nepovolí ve správě hry). Rodič to má poznat na první pohled. */
.switch-row:has(input:disabled), .switch-row:has(select:disabled) { opacity: .65; }
.switch-row:has(input:disabled) input, .switch-row:has(select:disabled) select { cursor: default; }

/* =====================================================================
   2.7.11 – modrý pruh dole na iPhonu (PWA na ploše)
   Herní vrstvy se držely výšky (height: 100dvh, bottom: auto). Tam, kde se
   dvh nerovná skutečné výšce okna – a v aplikaci spuštěné z plochy, kde se
   pod domovský indikátor sahá díky viewport-fit=cover, se to stává – zbyl
   dole pruh, který hra vůbec nepřekreslila. Byl modrý proto, že pozadí
   stránky je přechod bez „no-repeat“: pod tělem stránky se začal dláždit
   znovu od začátku, a ten začíná nebeskou #9ddcff.
   Proto teď obojí: vrstvy se ukotví ke spodní hraně (bottom: 0), takže dolů
   dosáhnou vždycky bez ohledu na to, co dvh zrovna hlásí, a pozadí se
   neopakuje – kdyby přece jen kousek zbyl, naváže barvou, kterou přechod
   dole končí, ne modrou.
   Odsazení ovládání nad domovský indikátor tím netrpí: to dělá vnitřní
   okraj var(--sab) v .hud, ne výška vrstvy.
   ===================================================================== */
.screen { bottom: 0; height: auto; }
.modal { bottom: 0; height: auto; }
body { background-repeat: no-repeat; background-color: #fff0d2; }

/* =====================================================================
   2.7.14 – denní limit bez slz a nastavení tabletu
   Proužek varování (3 a 1 minutu před koncem) je nahoře jako „Ještě půl
   minuty“ u střídání (.rp-turn-warn), jen modrý – ať se ty dvě věci
   nepletou. Nechytá ťuknutí: dítě právě řídí.
   Výsledek poslední jízdy má místo další kapitoly řádek „Dnes to byla
   poslední jízda“; věta pod +15 minut nahradí tlačítko po dvou přidáních.
   Popisek „platí pro celý tablet“ je u šesti voleb tabletu – drobný, ať na
   telefonu nezabere víc než jeden řádek navíc.
   ===================================================================== */
.limit-warn { position: fixed; z-index: 1900; left: 50%; top: calc(58px + var(--sat)); transform: translate(-50%, -8px); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 16px; background: #2b4f8e; color: #fff; font: 800 16px var(--font); font-family: var(--emoji), var(--font); text-align: center; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; box-shadow: 0 10px 22px rgba(43, 79, 142, 0.4); }
.limit-warn.show { opacity: 1; transform: translate(-50%, 0); }
/* telefon na výšku: karta s úkoly kapitoly je nahoře přes celou šířku – proužek až pod ni */
@media (max-width: 600px) { .limit-warn { top: calc(104px + var(--sat)); } }
.limit-warn[hidden] { display: none !important; }
.result-last { margin: 2px auto 8px; padding: 8px 16px; width: fit-content; max-width: 100%; border-radius: 16px; background: #e6ecf8; color: #2b4f8e; font-weight: 800; font-size: 17px; }
.result-last[hidden], .sleep-note[hidden] { display: none; }
.sleep-note { margin: 0; color: var(--muted); font-weight: 700; }
.switch-row small.tablet-wide { font-size: 11.5px; font-weight: 700; color: #3b6f96; }
/* „Ve školce platí vždy.“ u zamčeného dětského režimu, obtížnosti a velkých tlačítek (js/game.js
   renderKinderLocks) – stejná modrá jako „platí pro celý tablet“, ať je vidět, odkud zámek jde */
.switch-row small.kinder-note { font-size: 11.5px; font-weight: 700; color: #3b6f96; }
.profile-today { margin: -4px 0 10px; font-weight: 700; }
body.high-contrast .limit-warn { background: #10284f; }
body.high-contrast .switch-row small.tablet-wide, body.high-contrast .switch-row small.kinder-note, body.high-contrast .result-last { color: #10284f; }

/* =====================================================================
   2.7.14 – denní úkoly v dětském menu, splněný úkol, barvy map v depu
   Odznaky úkolů (js/game.js questBadgeHTML) jsou pod tlačítkem Hrát, ale
   menší než dlaždice Mapy/Depo/Online: Hrát zůstává největší a první –
   odznaky ho nikdy neodsunou, jsou až za ním. Tečky místo „2/4“ (kolik
   svítí, tolik je hotovo), hotový úkol má zelenou nálepku ✓. Ve školce
   skryté (úkoly tam nejsou vidět vůbec, ani v dospělém seznamu).
   Splněný úkol (questFly): odznak přiletí nad vším, i nad stanicí, na
   ťuknutí nereaguje a po 1,4 s zmizí – jízdu ani ovládání nezastaví.
   ===================================================================== */
.menu-quest-badges { display: none; }
body.kids-ui:not(.kindergarten) .menu-quest-badges { display: flex; justify-content: center; gap: 16px; }
body.kindergarten .menu-quest-badges { display: none !important; }
.quest-badge { position: relative; flex: none; width: 66px; height: 66px; padding: 0; display: grid; place-content: center; justify-items: center; gap: 3px; border-radius: 50%; border: 2px solid rgba(255,255,255,.95); background: radial-gradient(circle at 35% 30%, #fffaf0, #ffe2a0); box-shadow: 0 6px 14px rgba(160,110,20,.22); color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.quest-badge:active { transform: scale(.94); }
.qb-emoji { font-family: var(--emoji); font-size: 26px; line-height: 1; }
.qb-dots { display: block; line-height: 0; text-align: center; }
.qb-dots i { display: inline-block; width: 8px; height: 8px; margin: 0 1.5px; border-radius: 50%; background: rgba(23,49,63,.2); }
.qb-dots i.on { background: #e08a12; }
.qb-dots.small i { width: 6px; height: 6px; margin: 1px; }   /* 5 a víc teček – jinak by se řada do kolečka nevešla */
.qb-bar { display: block; width: 42px; height: 7px; border-radius: 4px; background: rgba(23,49,63,.2); overflow: hidden; }
.qb-bar i { display: block; height: 100%; background: #e08a12; }
.quest-badge.done { background: radial-gradient(circle at 35% 30%, #f3fff8, #bdeed2); border-color: #fff; }
.quest-badge.done .qb-dots i, .quest-badge.done .qb-bar i { background: #2fae6b; }
.qb-check { position: absolute; right: -5px; top: -5px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; background: #2fae6b; color: #fff; font: 900 15px/1 var(--font); box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.quest-badge.hop { animation: questHop .6s ease-out; }
@keyframes questHop { 0%, 100% { transform: none; } 30% { transform: translateY(-10px) scale(1.06); } 55% { transform: translateY(0) scale(.97); } 75% { transform: translateY(-3px); } }
body.high-contrast .quest-badge { border: 2px solid var(--ink); }
body.high-contrast .qb-dots i { background: rgba(5,16,24,.35); }
body.high-contrast .qb-dots i.on { background: #8a4a00; }

.quest-fly { position: fixed; left: 50%; top: 30%; z-index: 1990; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle at 35% 30%, #fffaf0, #ffc94d); box-shadow: 0 10px 26px rgba(160,110,20,.45); pointer-events: none; animation: questFly 1.4s ease-out forwards; }
.qf-emoji { font-family: var(--emoji); font-size: 42px; line-height: 1; }
.qf-star { position: absolute; right: -12px; top: -12px; font-family: var(--emoji); font-size: 32px; line-height: 1; }
@keyframes questFly {
  0% { opacity: 0; transform: translateY(-90px) scale(.4) rotate(-20deg); }
  20% { opacity: 1; transform: translateY(0) scale(1.15) rotate(6deg); }
  32% { transform: scale(1) rotate(0); }
  78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(.7); }
}
/* tlumené animace: odznak se jen ukáže a zmizí (odstraní ho js/game.js), nikam neletí */
body.reduce-motion .quest-fly { animation: none !important; }

/* barvy map: za tři díly staré lokomotivy z mapy (js/game.js renderShopPaint), zamčená ukazuje 🔧 x/3 */
.paint-card .paint-map { font-size: 11.5px; line-height: 1.2; font-weight: 700; }
.paint-card .paint-parts { font-family: var(--emoji), var(--font); font-weight: 800; font-size: 15px; color: #8b5a12; }
.paint-card.map-paint.locked .paint-swatch { opacity: .55; filter: saturate(.75); }
@media (max-width: 420px) { .paint-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; } .paint-card { padding: 10px 6px; } }
/* Telefon na šířku: pod Hrát by odznaky odsunuly dlaždice Mapy/Depo/Online pod okraj – jdou proto
   vedle tlačítka Hrát (jedna řada), dlaždice zůstanou na obrazovce jako dřív. */
@media (max-height: 520px) and (orientation: landscape) {
  body.kids-ui:not(.kindergarten) .menu-shell { grid-template-columns: minmax(0, 1fr) auto; }
  body.kids-ui:not(.kindergarten) .menu-shell > * { grid-column: 1 / -1; }
  body.kids-ui:not(.kindergarten) .menu-shell > #menuContinue { grid-column: 1; }
  body.kids-ui:not(.kindergarten) .menu-shell > .menu-quest-badges { grid-column: 2; align-self: center; gap: 12px; }
}
/* Úzký telefon (360 px): tři dlaždice s 1fr se roztáhly na nejdelší slovo („vylepšení“), dětské menu
   bylo o 29 px širší než displej a „Pro rodiče“ vpravo nahoře přečnívalo. Sloupce smí být užší
   než slovo; na úzkém displeji mají dlaždice menší okraje a písmo, ať se „vylepšení“ vejde celé. */
.kids-ui .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 400px) {
  .kids-ui .menu-grid .menu-btn { padding: 0 6px; overflow-wrap: break-word; }
  .kids-ui .menu-grid .menu-btn > span:last-child, .kids-ui .menu-grid .menu-btn > span:last-child span { font-size: 19px; }
}

/* ✉️ Napište nám (2.7.14, okno #feedbackModal za rodičovským zámkem): velké ťukací hvězdy (52 px, na telefonu
   s rezervou nad 44 px), nevybrané šedé a průhledné. Pole má písmo 16 px – s menším iPhone při ťuknutí
   přiblíží celou stránku a zpátky ji nevrátí. Odeslat a Zpět vedle sebe, ať se okno vejde i na telefon
   na šířku (výška 428 px); co se nevejde, posune se uvnitř karty (.modal-card má overflow-y). */
.fb-ask { margin: 0; font-weight: 700; color: var(--ink); }
.fb-stars { display: flex; justify-content: center; gap: 6px; }
.fb-star { width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border: 2px solid transparent; border-radius: 14px; background: rgba(23,49,63,.06); font-size: 30px; line-height: 1; filter: grayscale(1); opacity: .45; transition: transform .12s, opacity .12s, filter .12s; }
.fb-star.on { filter: none; opacity: 1; background: rgba(255,209,102,.25); }
.fb-star[aria-checked="true"] { border-color: var(--gold2); }
.fb-star:active { transform: scale(.92); }
.fb-star:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.fb-star img.emj { vertical-align: middle; }
.fb-label { font-weight: 800; font-size: 14px; }
.fb-text { width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; }
.fb-count { margin: -6px 0 0; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-warn { margin: 0; font-weight: 700; }
.fb-reply { margin: 0; }
.fb-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fff1dc; color: #6b3f00; font-weight: 700; }
.fb-actions { display: flex; gap: 8px; }
.fb-actions > button { flex: 1 1 0; min-width: 0; }
body.high-contrast .fb-star { border-color: var(--ink); }
body.high-contrast .fb-star:not(.on) { opacity: .6; }
body.reduce-motion .fb-star { transition: none; }
@media (max-height: 520px) and (orientation: landscape) {
  .feedback-card { gap: 6px; }
  .fb-star { width: 46px; height: 46px; font-size: 26px; }
  .feedback-card h2 { margin-top: 0; font-size: 21px; }
  .fb-text { min-height: 60px; height: 64px; }   /* rows="4" by jinak držel skoro 110 px a Odeslat by ujelo pod okraj */
}
/* Do telefonu: řádky stavu pro den bez wi-fi a tlačítko „Připravit na hraní bez internetu“ (js/game.js renderInstall).
   Dlouhý popisek se na úzkém telefonu zalomí, tlačítko nesmí přetéct kartu. */
.install-status .settings-note { margin-bottom: 6px; }
.install-status .install-note { font-weight: 700; color: var(--ink); }
.install-prepare { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; height: auto; padding: 10px 18px; margin-top: 6px; text-align: center; }
.install-prepare[hidden] { display: none; }
.install-prepare:disabled { opacity: .6; }