/* Policejní palubní deska – styly (base → r2 → light) */
/* Sdílené základní styly – komponenty; vzhledy (v1–v4) je přestylují */
:root {
  --font: 'Baloo 2', 'Nunito', system-ui, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --bg: #07101f; --panel: #101c33; --panel2: #18284a; --line: rgba(255,255,255,.08);
  --text: #f4f7ff; --muted: #9db0d6; --blue: #1d6bff; --red: #ff3b47; --yellow: #ffd400; --lime: #c6ff1a; --green: #22d36b;
  --radius: 28px; --tap: 140px;
  --lb-red: #ff2338; --lb-blue: #1f6bff; --lb-off-red: #4a0d16; --lb-off-blue: #0c1f4d;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--bg); color: var(--text); }
body {
  font-family: var(--font); font-weight: 700; -webkit-font-smoothing: antialiased;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  position: fixed; inset: 0;
}
img, svg { -webkit-user-drag: none; }
button, a { font: inherit; color: inherit; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; text-decoration: none; }
button:focus { outline: none; } button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
button { transition: transform .12s ease, filter .12s ease, background-color .2s, box-shadow .2s; }
button:active, .pressed { transform: scale(.95); filter: brightness(1.15); }
.ic { width: 1em; height: 1em; display: inline-block; flex: none; overflow: visible; }
[data-screen] { display: none; }
[data-screen].active { display: flex; }
.no-fullscreen [data-act="fullscreen"] { display: none !important; }

/* ---- Majáky ---- */
.lb { display: flex; align-items: center; gap: 1.2%; height: 100%; }
.lb-unit { flex: 1; display: flex; gap: 6px; height: 100%; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.06); }
.lb-unit i { flex: 1; position: relative; border-radius: 999px; background: var(--lb-off-red); }
.lb-r i { background: var(--lb-off-blue); }
.lb-unit i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: radial-gradient(circle at 50% 40%, #fff 0, var(--lb-red) 45%); box-shadow: 0 0 28px 8px var(--lb-red); }
.lb-r i::after { background: radial-gradient(circle at 50% 40%, #fff 0, var(--lb-blue) 45%); box-shadow: 0 0 28px 8px var(--lb-blue); }
.lb-mid { flex: 0 0 auto; padding: 0 22px; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #f3f6fb; color: #0d2a6b; font-weight: 800; letter-spacing: .12em; font-size: clamp(14px, 1.6vw, 26px); }
.lights-on .lb-l i::after { animation: pd-flash 1s linear infinite; }
.lights-on .lb-r i::after { animation: pd-flash 1s linear .5s infinite; }
.lights-on .lb-unit i:nth-child(2n)::after { animation-delay: .06s; }
.lights-on .lb-r i:nth-child(2n)::after { animation-delay: .56s; }
@keyframes pd-flash { 0%, 9% { opacity: 1; } 10%, 17% { opacity: 0; } 18%, 28% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes pd-flash-half { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pd-glow { from { opacity: .15; } to { opacity: .9; } }
@keyframes pd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pd-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes pd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.reduce-motion.lights-on .lb-l i::after { animation: pd-glow 1.6s ease-in-out infinite alternate; }
.reduce-motion.lights-on .lb-r i::after { animation: pd-glow 1.6s ease-in-out 1.6s infinite alternate-reverse; }

/* ---- Tachometr ---- */
.speedo { position: relative; }
.sp-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sp-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 16; stroke-linecap: round; }
.seg { fill: none; stroke-width: 16; opacity: .5; }
.seg-g { stroke: var(--green); } .seg-y { stroke: var(--yellow); } .seg-r { stroke: var(--red); }
.sp-prog { fill: none; stroke: var(--lime); stroke-width: 16; stroke-linecap: round; opacity: 0; }
.tk { stroke: rgba(255,255,255,.45); stroke-width: 2; } .tk-b { stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.sp-nums text { fill: var(--text); font-size: 21px; font-weight: 800; text-anchor: middle; font-family: var(--font); }
.sp-needle path { fill: var(--red); filter: drop-shadow(0 0 6px rgba(255,59,71,.7)); }
.sp-needle { transition: none; }
.sp-hub { fill: #e8eefc; stroke: var(--red); stroke-width: 5; }
.sp-num { fill: var(--text); font-size: 58px; font-weight: 800; text-anchor: middle; font-family: var(--font); }
.sp-unit { fill: var(--muted); font-size: 18px; font-weight: 700; text-anchor: middle; font-family: var(--font); }
.gear { display: inline-flex; gap: 10px; font-weight: 800; font-size: 28px; color: var(--muted); }
.gear span { opacity: .45; } .gear span.on { opacity: 1; color: var(--text); }

/* ---- Vysílačka ---- */
.radio { position: relative; display: flex; flex-direction: column; align-items: center; }
.radio-antenna { width: 30px; height: 90px; border-radius: 14px 14px 4px 4px; background: linear-gradient(90deg, #1b2230, #3a4558, #1b2230); align-self: flex-start; margin-left: 22%; margin-bottom: -6px; }
.radio-body { width: 100%; max-width: 420px; padding: 22px 24px 28px; border-radius: 44px; background: linear-gradient(160deg, #2c3546, #161c27); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.radio-head { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: space-between; color: #c9d4ea; letter-spacing: .14em; font-size: 16px; }
.radio-led { width: 18px; height: 18px; border-radius: 50%; background: #3a1a1e; box-shadow: inset 0 0 0 3px rgba(0,0,0,.4); }
.radio-tx .radio-led { background: #ff3344; box-shadow: 0 0 14px #ff3344; }
.radio-rx .radio-led { background: #2bff8a; box-shadow: 0 0 14px #2bff8a; }
.radio-lcd { width: 100%; border-radius: 16px; padding: 12px 16px; background: linear-gradient(#b9f36b, #8fd14f); color: #17330c; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: clamp(18px, 1.6vw, 24px); box-shadow: inset 0 3px 8px rgba(0,0,0,.25); min-height: 64px; }
.radio-ch { font-weight: 800; padding: 0 8px; border: 2px solid currentColor; border-radius: 8px; }
.radio-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio-bars { display: flex; gap: 3px; align-items: flex-end; height: 26px; }
.radio-bars i { width: 6px; background: #17330c; border-radius: 2px; height: 30%; opacity: .5; }
.radio-bars i:nth-child(2) { height: 45%; } .radio-bars i:nth-child(3) { height: 60%; } .radio-bars i:nth-child(4) { height: 80%; } .radio-bars i:nth-child(5) { height: 100%; }
.radio-rx .radio-bars i, .radio-tx .radio-bars i { opacity: 1; animation: pd-bars .5s ease-in-out infinite alternate; }
.radio-bars i:nth-child(2n) { animation-delay: .15s !important; }
@keyframes pd-bars { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
.radio-grill { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; width: 70%; }
.radio-grill i { aspect-ratio: 1; border-radius: 50%; background: #0b0f16; box-shadow: inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.08); }
.radio-ptt { width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 26px; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff6b74, #d91a2a 60%, #9e0d1a); box-shadow: 0 10px 0 #6d0711, 0 18px 30px rgba(0,0,0,.5); }
.radio-ptt .ic { font-size: 64px; }
.radio-ptt.pressed { transform: translateY(8px) scale(.97); box-shadow: 0 2px 0 #6d0711, 0 6px 16px rgba(0,0,0,.5); }
.radio-mission { margin-top: 18px; width: 100%; max-width: 460px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "i t" "b b"; gap: 12px 16px; align-items: center; padding: 18px; border-radius: 28px; background: #fff; color: #0b1a33; animation: pd-pulse 1.4s ease-in-out infinite; }
.radio-mission[hidden] { display: none; }
.rm-icon { grid-area: i; font-size: 84px; display: flex; } .rm-title { grid-area: t; font-size: clamp(22px, 2vw, 32px); font-weight: 800; line-height: 1.1; }
.rm-go { grid-area: b; min-height: 110px; border-radius: 24px; background: var(--green); color: #05220f; font-size: 36px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 8px 0 #11823d; }
.rm-go .ic { font-size: 70px; --ic-b: #1d4ed8; }

/* ---- Mise + odznaky ---- */
.missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; align-content: start; }
.mission { position: relative; min-height: var(--tap); border-radius: var(--radius); background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 10px; box-shadow: inset 0 0 0 2px var(--line); }
.mi-ic { font-size: clamp(80px, 10vh, 140px); display: flex; }
.mi-t { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.1; text-align: center; color: var(--muted); }
.mi-done { position: absolute; top: 10px; right: 12px; font-size: 34px; color: var(--yellow); opacity: 0; transform: scale(.5); transition: .3s; }
.mission.done .mi-done { opacity: 1; transform: none; }
.mission.pending { box-shadow: 0 0 0 5px var(--yellow), 0 0 30px rgba(255,212,0,.5); animation: pd-pulse 1.2s ease-in-out infinite; }
.badges { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bd-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bd { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 44px; background: rgba(255,255,255,.06); filter: grayscale(1); opacity: .35; }
.bd.got { filter: none; opacity: 1; background: rgba(255,212,0,.18); box-shadow: 0 0 0 3px var(--yellow); }
.bd-count { display: flex; align-items: center; gap: 8px; font-size: 34px; color: var(--yellow); }
.bd-count .ic { font-size: 46px; } .bd-count small { font-size: 18px; color: var(--muted); }

/* ---- Mapa ---- */
.map { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--map-ground, #9bd27c); }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map-ground { fill: var(--map-ground, #9bd27c); }
.blk { fill: var(--map-block, #c9eab0); } .blk.park { fill: var(--map-park, #b0e394); }
.map-streets line { stroke: var(--map-road, #4b5568); stroke-width: 66; stroke-linecap: round; }
.map-lines line { stroke: var(--map-line, #fff); stroke-width: 4; stroke-dasharray: 18 20; opacity: .85; }
.map-lbl { font-family: var(--font); font-weight: 800; font-size: 22px; text-anchor: middle; fill: var(--map-lbl, #2b3a55); letter-spacing: .06em; }
.ct-body { fill: #f7f9fc; stroke: #1b3d9c; stroke-width: 2; } .ct-stripe { fill: #1d4ed8; } .ct-stripe2 { fill: #c6ff1a; } .ct-glass { fill: #12203d; }
.ct-bar { fill: #1e293b; } .ct-l { fill: #5a1520; } .ct-r { fill: #14275a; } .ct-head { fill: #fff7c2; }
.lights-on .ct-l { animation: pd-car-r 1s steps(1) infinite; } .lights-on .ct-r { animation: pd-car-b 1s steps(1) infinite; }
@keyframes pd-car-r { 0% { fill: #ff2338; } 50% { fill: #5a1520; } }
@keyframes pd-car-b { 0% { fill: #14275a; } 50% { fill: #2f7bff; } }
.map-car { filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.ms-r { fill: #501018; } .ms-g { fill: #0f3a1f; } .ms-y { fill: #ffc400; animation: pd-blink 1s steps(1) infinite; }
@keyframes pd-blink { 50% { fill: #4a3a00; } }
.md-in { animation: pd-bob 1.2s ease-in-out infinite; }
.md-ring { fill: none; stroke: var(--yellow); stroke-width: 8; transform-box: fill-box; transform-origin: center; animation: pd-ring 1.4s ease-out infinite; }
.md-bg { fill: #fff; stroke: var(--yellow); stroke-width: 6; }
.map-tap circle { fill: none; stroke: #fff; stroke-width: 6; transform-box: fill-box; transform-origin: center; animation: pd-ring 1s ease-out infinite; }
.map-hint { position: absolute; left: 16px; top: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px; background: rgba(8,16,34,.75); color: #fff; font-size: 20px; pointer-events: none; }
.map-hint .ic { font-size: 40px; }
.moving .map-hint { opacity: 0; transition: opacity .3s; }

/* ---- Tísňové linky ---- */
.emergency { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.em-card { min-height: var(--tap); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 16px 18px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.em-ic { font-size: clamp(64px, 6.5vw, 120px); display: flex; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.em-num { font-size: clamp(48px, 5.4vw, 96px); font-weight: 800; line-height: .95; letter-spacing: .04em; }
.em-name { font-size: clamp(16px, 1.4vw, 24px); opacity: .9; }
.em-police { background: linear-gradient(135deg, #2a6cff, #0f3aa8); }
.em-amb { background: linear-gradient(135deg, #f6d23a, #b9dc2a); color: #1b2a06; }
.em-fire { background: linear-gradient(135deg, #ff5a3c, #c4161c); }
.em-112 { background: linear-gradient(135deg, #1f3c9b, #0b1d5c); }
.em-card.playing { animation: pd-pulse .7s ease-in-out infinite; box-shadow: 0 0 0 6px #fff, 0 0 40px rgba(255,255,255,.4); }
.keypad { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.kp-display { display: flex; align-items: center; gap: 14px; height: clamp(70px, 9vh, 100px); padding: 0 22px; border-radius: 22px; background: #050b17; box-shadow: inset 0 0 0 3px var(--line); }
.kp-ph { font-size: 46px; color: var(--muted); display: flex; }
.kp-num { font-size: clamp(44px, 5vh, 64px); font-weight: 800; letter-spacing: .25em; color: var(--text); }
.keypad.ok .kp-display { box-shadow: inset 0 0 0 4px var(--green); } .keypad.ok .kp-num { color: var(--green); }
.keypad.bad .kp-display { box-shadow: inset 0 0 0 4px var(--red); }
.kp-keys { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 12px; flex: 1; }
.kp-key { min-height: clamp(76px, 10vh, 118px); border-radius: 22px; background: var(--panel2); font-size: clamp(36px, 4.2vh, 54px); font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.kp-key .ic { font-size: 46px; } .kp-hint { color: var(--yellow); } .kp-del { color: var(--muted); }

/* ---- Semafor ---- */
.semafor { display: flex; gap: clamp(20px, 3vw, 56px); align-items: center; justify-content: center; }
.sf-light { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 48px; background: linear-gradient(#232b38, #11161f); box-shadow: 0 20px 40px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.1); }
.sf-lamp { width: clamp(110px, 16vh, 170px); aspect-ratio: 1; border-radius: 50%; background: #2a1013; box-shadow: inset 0 8px 20px rgba(0,0,0,.6); transition: background-color .25s, box-shadow .25s; }
.sf-y { background: #2a2208; } .sf-g { background: #0c2414; }
.semafor[data-light="r"] .sf-r { background: radial-gradient(circle at 40% 35%, #ffb3b8, #ff2338 55%); box-shadow: 0 0 50px 12px rgba(255,35,56,.6); }
.semafor[data-light="y"] .sf-y { background: radial-gradient(circle at 40% 35%, #fff1a8, #ffbf00 55%); box-shadow: 0 0 50px 12px rgba(255,191,0,.55); }
.semafor[data-light="g"] .sf-g { background: radial-gradient(circle at 40% 35%, #b6ffd2, #12d660 55%); box-shadow: 0 0 50px 12px rgba(18,214,96,.55); }
.sf-side { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
.sf-score { display: flex; gap: 10px; justify-content: center; }
.sf-score i { width: 48px; height: 48px; background: rgba(255,255,255,.15); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: .3s; }
.sf-score i.on { background: var(--yellow); transform: scale(1.15); }
.sf-answers { display: flex; gap: 16px; }
.sf-ans { width: clamp(140px, 12vw, 190px); min-height: clamp(140px, 18vh, 190px); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 26px; font-weight: 800; color: #fff; box-shadow: 0 8px 0 rgba(0,0,0,.35); }
.sf-ans .ic { font-size: 84px; }
.sf-ans-r { background: #e11d2e; } .sf-ans-y { background: #f5b400; color: #2a1d00; } .sf-ans-g { background: #12a84f; }
.sf-ans-g .ic { --ic-b: #0b5d2b; }
.sf-ans.yay { animation: pd-pulse .4s 2; box-shadow: 0 0 0 6px #fff; } .sf-ans.nope { animation: pd-shake .4s; }
@keyframes pd-shake { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.sf-start { min-height: 100px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.sf-start .ic { font-size: 50px; }
.semafor.playing .sf-start { opacity: .35; pointer-events: none; }
.signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sign { min-height: var(--tap); border-radius: var(--radius); background: var(--panel2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; }
.sign .ic { font-size: clamp(84px, 8vw, 140px); filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.sign span { font-size: 17px; color: var(--muted); }
.sign.pop { animation: pd-pulse .45s; }

/* ---- Bublina ---- */
.pd-bubble { position: fixed; left: 50%; bottom: 22px; z-index: 990; width: max-content; max-width: min(980px, 94vw); transform: translate(-50%, 140%); opacity: 0; transition: transform .35s cubic-bezier(.3,1.4,.6,1), opacity .25s;
  display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; border-radius: 36px; background: #fff; color: #0b1a33; box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 4px var(--yellow); pointer-events: none; }
.pd-bubble.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.pd-bubble-av { width: 84px; height: 84px; flex: none; border-radius: 50%; background: #e8f0ff; display: flex; align-items: center; justify-content: center; font-size: 64px; color: #1d4ed8; }
.pd-bubble-txt { font-size: clamp(19px, 1.9vw, 30px); line-height: 1.2; font-weight: 700; max-width: 640px; }
.pd-bubble-act:empty { display: none; }
.pd-bubble-btn { min-height: 110px; min-width: 200px; padding: 0 26px; border-radius: 28px; background: var(--green); color: #05220f; font-size: 32px; font-weight: 800; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 0 #11823d; animation: pd-pulse 1.2s ease-in-out infinite; }
.pd-bubble-btn .ic { font-size: 70px; --ic-b: #1d4ed8; }

/* ---- Rodičovské nastavení ---- */
.pd-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(3,8,20,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pd-modal.show { display: flex; }
.pd-modal-card { width: min(780px, 94vw); max-height: 92vh; overflow: auto; background: #0e1830; color: #eef3ff; border-radius: 28px; padding: 22px 28px 26px; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08); font-weight: 600; -webkit-user-select: none; user-select: none; }
.pm-head { display: flex; align-items: center; gap: 14px; } .pm-head .ic { font-size: 40px; color: var(--yellow); }
.pm-head h2 { margin: 0; flex: 1; font-size: 30px; }
.pm-x { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.pm-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; font-size: 19px; }
.pm-row > span { flex: 1; min-width: 200px; }
.pm-vol .ic { font-size: 30px; } .pm-vol label { flex: none; } .pm-vol input { flex: 1; min-width: 180px; height: 44px; accent-color: var(--yellow); } .pm-vol b { width: 64px; text-align: right; }
.pm-seg { display: inline-flex; background: rgba(255,255,255,.06); border-radius: 14px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.pm-seg button, .pm-seg a { padding: 10px 16px; border-radius: 10px; font-size: 17px; color: #c6d3ef; min-height: 48px; display: inline-flex; align-items: center; }
.pm-seg .on { background: var(--yellow); color: #1a1400; }
.pm-btn { padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.1); font-size: 17px; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; }
.pm-btn .ic { font-size: 24px; }
.pm-note { margin: 10px 0 0; font-size: 15px; color: #9fb0d4; line-height: 1.4; font-weight: 500; }
.pm-btns { gap: 12px; }

/* ---- Úvodní obrazovka ---- */
.pd-splash { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #16306a, #050a18 70%); transition: opacity .5s, transform .5s; }
.pd-splash.hide { opacity: 0; transform: scale(1.06); pointer-events: none; }
.spl-in { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 4vh, 44px); width: min(900px, 92vw); }
.spl-lb { width: 100%; height: clamp(50px, 8vh, 80px); }
.spl-lb.lb .lb-unit i::after { animation: pd-flash 1.2s linear infinite; } .spl-lb .lb-r i::after { animation-delay: .6s !important; }
.reduce-motion .spl-lb.lb .lb-unit i::after { animation: pd-glow 1.6s ease-in-out infinite alternate; }
.spl-title { display: flex; align-items: center; gap: 18px; font-size: clamp(34px, 5vw, 70px); font-weight: 800; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,.5); text-align: center; }
.spl-title .ic { font-size: 1.4em; }
.spl-start { width: clamp(200px, 30vh, 300px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #06210f; font-size: clamp(30px, 4vh, 44px); font-weight: 800; letter-spacing: .08em;
  background: radial-gradient(circle at 35% 30%, #9dffbf, #22d36b 55%, #12823e); box-shadow: 0 0 0 12px rgba(34,211,107,.18), 0 0 0 26px rgba(34,211,107,.08), 0 16px 0 #0c5c2b, 0 30px 60px rgba(0,0,0,.5); animation: pd-pulse 1.6s ease-in-out infinite; }
.spl-start .ic { font-size: 1.9em; --ic-a: #1d4ed8; }
.reduce-motion .spl-start { animation: none; }

/* ---- Scéna mise ---- */
.pd-scene { position: fixed; inset: 0; z-index: 950; display: none; align-items: center; justify-content: center; background: rgba(4,9,22,.82); padding: 2vh 2vw; }
.pd-scene.show { display: flex; }
.sc-card { position: relative; width: min(1180px, 96vw); height: min(92vh, 860px); display: flex; flex-direction: column; border-radius: 36px; overflow: hidden; background: #bfe6ff; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 6px #fff; }
.sc-head { display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 18px; background: #fff; color: #0b1a33; }
.sc-ic { font-size: 64px; display: flex; } .sc-title { flex: 1; font-size: clamp(22px, 2.4vw, 36px); }
.sc-dots { display: flex; gap: 10px; } .sc-dots i { width: 30px; height: 30px; border-radius: 50%; background: #dbe5f5; transition: .3s; }
.sc-dots i.on { background: var(--yellow); box-shadow: 0 0 0 3px #f59e0b; transform: scale(1.1); }
.sc-close { width: 110px; height: 90px; border-radius: 24px; background: #e2e8f0; color: #64748b; font-size: 54px; display: flex; align-items: center; justify-content: center; }
.pd-scene.done .sc-close { background: var(--green); color: #fff; box-shadow: 0 6px 0 #11823d; animation: pd-pulse 1s ease-in-out infinite; }
.sc-svg { flex: 1; width: 100%; min-height: 0; display: block; cursor: pointer; }
.sc-lbl { font-family: var(--font); font-weight: 800; font-size: 26px; fill: #fff; }
.sc-obj { transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.sc-halo { fill: rgba(255,255,255,.35); stroke: #fff; stroke-width: 5; stroke-dasharray: 14 10; transform-box: fill-box; transform-origin: center; animation: pd-spin 6s linear infinite; }
.pd-scene.done .sc-halo { display: none; }
@keyframes pd-spin { to { transform: rotate(360deg); } }
.sc-tap { position: absolute; right: 24px; bottom: 20px; font-size: 70px; color: var(--yellow); filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); animation: pd-bob 1s ease-in-out infinite; pointer-events: none; }
.pd-scene.done .sc-tap { display: none; }

/* ---- Oslava ---- */
.pd-confetti { position: fixed; inset: 0; z-index: 1100; pointer-events: none; overflow: hidden; }
.pd-confetti i { position: absolute; top: -30px; width: 14px; height: 22px; border-radius: 3px; animation: pd-fall 2.4s cubic-bezier(.3,.6,.6,1) forwards; }
@keyframes pd-fall { to { transform: translate(var(--dx), 115vh) rotate(var(--r)); } }
.pd-bigstar { position: absolute; left: 50%; top: 42%; font-size: min(36vh, 300px); color: var(--yellow); transform: translate(-50%, -50%) scale(0); filter: drop-shadow(0 0 40px rgba(255,212,0,.7)); animation: pd-star 2.6s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes pd-star { 0% { transform: translate(-50%,-50%) scale(0) rotate(-90deg); } 25%, 75% { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.3); opacity: 0; } }

/* ---- Světelná show ---- */
.pd-lightshow { position: fixed; inset: 0; z-index: 1150; display: none; grid-template-columns: 1fr 1fr; background: #000; }
.pd-lightshow.show { display: grid; }
.ls-l { background: radial-gradient(circle at 30% 50%, #ff4d5e, #b0001a 50%, #300006); animation: pd-flash-half 1s linear infinite; }
.ls-r { background: radial-gradient(circle at 70% 50%, #5c9bff, #0038c9 50%, #000c33); animation: pd-flash-half 1s linear .5s infinite; }
.reduce-motion .ls-l { animation: pd-glow 1.6s ease-in-out infinite alternate; } .reduce-motion .ls-r { animation: pd-glow 1.6s ease-in-out 1.6s infinite alternate-reverse; }
.ls-x { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 56px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }

/* ---- Omezené animace ---- */
.reduce-motion *, .reduce-motion *::before { transition-duration: .01s !important; }
.reduce-motion .pd-bubble-btn, .reduce-motion .radio-mission, .reduce-motion .mission.pending, .reduce-motion .md-in, .reduce-motion .sc-tap, .reduce-motion .pd-scene.done .sc-close, .reduce-motion .em-card.playing { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .pd-splash .spl-start { animation: none; } }

/* Round 2 – realistický automobilový UI skin */
@font-face{font-family:'Inter';src:url('../fonts/inter.woff2?v=d29d49c8db') format('woff2');font-weight:400 800;font-display:swap;font-style:normal}
body[data-skin=r2]{
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',Arial,sans-serif;
  --tap:140px;--radius:22px;
  --lb-a:#ff2a3a;--lb-b:#2a6bff;
  font-family:var(--font);font-weight:500;letter-spacing:-.01em;
  font-feature-settings:'tnum' 1,'ss01' 1;
}
body[data-skin=r2].lb-blue{--lb-a:#2a6bff;--lb-b:#1e90ff}
body[data-skin=r2] button{font-weight:600}
body[data-skin=r2] .ic{width:1em;height:1em;stroke-width:1.8}

/* ---- Lightbar physical housing ---- */
body[data-skin=r2] .lb{padding:0;background:transparent}
body[data-skin=r2] .lb-housing{
  display:flex;align-items:stretch;gap:8px;width:100%;height:100%;
  padding:5px 8px;border-radius:999px;
  background:linear-gradient(180deg,#2a3038,#12161c 55%,#0a0c10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 4px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.45);
}
body[data-skin=r2] .lb-unit{background:transparent;padding:2px;gap:3px;border-radius:999px}
body[data-skin=r2] .lb-unit i{
  border-radius:6px;background:#1a0a0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 3px rgba(0,0,0,.5);
}
body[data-skin=r2] .lb-r i{background:#070e1c}
body[data-skin=r2] .lb-unit i::after{
  border-radius:inherit;inset:1px;
  background:radial-gradient(circle at 50% 35%,#fff 0,var(--lb-a) 42%,transparent 70%);
  box-shadow:0 0 18px 4px var(--lb-a),0 0 40px 8px color-mix(in srgb,var(--lb-a) 55%,transparent);
}
body[data-skin=r2] .lb-r i::after{
  background:radial-gradient(circle at 50% 35%,#fff 0,var(--lb-b) 42%,transparent 70%);
  box-shadow:0 0 18px 4px var(--lb-b),0 0 40px 8px color-mix(in srgb,var(--lb-b) 55%,transparent);
}
body[data-skin=r2] .lb-mid{
  background:linear-gradient(180deg,#f7f9fc,#d5dae3);color:#0b1a3a;
  border-radius:10px;padding:0 18px;font-weight:800;letter-spacing:.18em;font-size:clamp(12px,1.3vw,18px);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.4);
}
body[data-skin=r2].lights-on .lb-l i::after{animation:pd-flash 1s linear infinite}
body[data-skin=r2].lights-on .lb-r i::after{animation:pd-flash 1s linear .5s infinite}
body[data-skin=r2].lights-on .lb-unit i:nth-child(2n)::after{animation-delay:.06s}
body[data-skin=r2].lights-on .lb-r i:nth-child(2n)::after{animation-delay:.56s}
body[data-skin=r2].reduce-motion.lights-on .lb-l i::after,
body[data-skin=r2].reduce-motion.lights-on .lb-r i::after{animation:pd-glow 1.6s ease-in-out infinite alternate}

/* ---- Speedo refined ---- */
body[data-skin=r2] .sp-track{stroke:rgba(255,255,255,.1);stroke-width:14}
body[data-skin=r2] .seg{stroke-width:14;opacity:.35}
body[data-skin=r2] .seg-g{stroke:#3dd68c}.seg-y{stroke:#f5c542}.seg-r{stroke:#ff4d5e}
body[data-skin=r2] .sp-prog{stroke:#5b9cff;stroke-width:14;opacity:1;filter:drop-shadow(0 0 6px rgba(91,156,255,.55))}
body[data-skin=r2] .sp-nums text{font-size:16px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
body[data-skin=r2] .sp-needle path{fill:#ff4d5e;filter:drop-shadow(0 0 4px rgba(255,77,94,.5))}
body[data-skin=r2] .sp-hub{fill:#e8eef8;stroke:#ff4d5e;stroke-width:4}
body[data-skin=r2] .sp-num{font-size:52px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
body[data-skin=r2] .sp-unit{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* ---- Map R2 ---- */
body[data-skin=r2] .map{position:relative;width:100%;height:100%;min-height:0;background:#0a1018;border-radius:inherit;overflow:hidden}
body[data-skin=r2] .map-svg{width:100%;height:100%;display:block}
body[data-skin=r2] .map-ground{fill:#0c121c}
body[data-skin=r2] .mout-b{fill:#151d2a;stroke:#1e293b;stroke-width:.5;opacity:.85}
body[data-skin=r2] .mout-t{fill:#163526;opacity:.7}
body[data-skin=r2] .map-blocks .blk{fill:#141c28;stroke:#243044;stroke-width:1.5}
body[data-skin=r2] .mpoi-ring{fill:none;stroke:rgba(91,156,255,.35);stroke-width:2}
body[data-skin=r2] .mpoi-bg{fill:#1a2436;stroke:#3d5a80;stroke-width:1.5}
body[data-skin=r2] .mpoi-ic{color:#9ec1ff;stroke:#9ec1ff}
body[data-skin=r2] .map-lbl{fill:#8fa3c4;font-size:18px;font-weight:600;text-anchor:middle;font-family:var(--font);letter-spacing:.04em;text-transform:uppercase}
body[data-skin=r2] .map-streets{stroke:#2a3448;stroke-width:54;stroke-linecap:butt}
body[data-skin=r2] .map-dashes{stroke:rgba(220,230,245,.55);stroke-width:3;stroke-linecap:butt;stroke-dasharray:none}
body[data-skin=r2] .route-glow{fill:none;stroke:#5b9cff;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;opacity:.35;filter:blur(2px)}
body[data-skin=r2] .route-line{fill:none;stroke:#7eb6ff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
body[data-skin=r2] .map-tap circle{fill:rgba(91,156,255,.25);stroke:#7eb6ff;stroke-width:3}
body[data-skin=r2] .md-ring{fill:none;stroke:#5b9cff;stroke-width:3;animation:pd-ring 1.4s ease-out infinite}
body[data-skin=r2] .md-bg{fill:#152238;stroke:#7eb6ff;stroke-width:2}
body[data-skin=r2] .ms-r{fill:#3a1a1e}.ms-y{fill:#3a3210}.ms-g{fill:#14301c}
body[data-skin=r2] .map-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:999px;background:rgba(10,16,28,.78);backdrop-filter:blur(10px);color:#c5d4ef;font-size:14px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08)}
body[data-skin=r2] .map-hint .ic{font-size:20px;color:#7eb6ff}
body[data-skin=r2] .r2-car .ct-l,body[data-skin=r2] .r2-car .ct-r{opacity:.35}
body[data-skin=r2].lights-on .r2-car .ct-l{opacity:1;filter:drop-shadow(0 0 6px #ff2a3a)}
body[data-skin=r2].lights-on .r2-car .ct-r{opacity:1;filter:drop-shadow(0 0 6px #2a6bff)}
body[data-skin=r2].lb-blue.lights-on .r2-car .ct-l{filter:drop-shadow(0 0 6px #2a6bff)}

/* ---- Car rear ---- */
body[data-skin=r2] .carrear{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
body[data-skin=r2] .carrear svg{width:100%;height:100%;max-height:100%;overflow:visible}
body[data-skin=r2] .cr-lens{fill:#1a0a0c}
body[data-skin=r2] .cr-lens-r{fill:#070e1c}
body[data-skin=r2].lights-on .cr-lens-l{fill:var(--lb-a);filter:drop-shadow(0 0 8px var(--lb-a))}
body[data-skin=r2].lights-on .cr-lens-r{fill:var(--lb-b);filter:drop-shadow(0 0 8px var(--lb-b))}
body[data-skin=r2] .cr-glow,.cr-refl{opacity:0}
body[data-skin=r2].lights-on .cr-glow-l{animation:pd-flash 1s linear infinite}
body[data-skin=r2].lights-on .cr-glow-r{animation:pd-flash 1s linear .5s infinite}
body[data-skin=r2].lights-on .cr-refl-l{animation:pd-flash 1s linear infinite}
body[data-skin=r2].reduce-motion.lights-on .cr-glow-l,
body[data-skin=r2].reduce-motion.lights-on .cr-glow-r,
body[data-skin=r2].reduce-motion.lights-on .cr-lens-l,
body[data-skin=r2].reduce-motion.lights-on .cr-lens-r{animation:pd-glow 1.6s ease-in-out infinite alternate}

/* ---- MDT radio ---- */
body[data-skin=r2] .mdt-radio{display:flex;flex-direction:column;height:100%;min-height:0;gap:12px;padding:14px;border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(22,28,40,.95),rgba(10,14,22,.98));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body[data-skin=r2] .mdt-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;font-weight:600;color:#9db0d0;letter-spacing:.04em;text-transform:uppercase}
body[data-skin=r2] .mdt-ch{display:inline-flex;align-items:center;gap:8px}
body[data-skin=r2] .mdt-call{display:inline-flex;align-items:center;gap:6px;color:#e8eefc}
body[data-skin=r2] .mdt-st{flex:1;text-align:right;color:#7eb6ff;text-transform:none;letter-spacing:0;font-size:14px}
body[data-skin=r2] .mdt-log{flex:1;min-height:120px;overflow:auto;padding:10px 12px;border-radius:14px;background:#0a0e14;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);font-variant-numeric:tabular-nums}
body[data-skin=r2] .ml{display:grid;grid-template-columns:52px auto 1fr;gap:8px 10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:14px;line-height:1.35}
body[data-skin=r2] .ml-t{color:#6b7c99;font-weight:600}.ml-f{color:#c6d4ef;font-weight:700}.ml-x{color:#a8b8d4;font-weight:500}
body[data-skin=r2] .ml-in .ml-f{color:#7eb6ff}.ml-out .ml-f{color:#3dd68c}
body[data-skin=r2] .mdt-inc{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:rgba(91,156,255,.1);box-shadow:inset 0 0 0 1px rgba(91,156,255,.35)}
body[data-skin=r2] .mdt-inc[hidden]{display:none!important}
body[data-skin=r2] .mdt-inc .rm-icon{font-size:48px;color:#7eb6ff}
body[data-skin=r2] .mdt-inc .rm-meta{flex:1;min-width:0}.mdt-inc .rm-meta small{display:block;color:#7eb6ff;font-size:11px;letter-spacing:.1em;font-weight:700}
body[data-skin=r2] .mdt-inc .rm-title{font-size:20px;font-weight:700;color:#eef3ff}
body[data-skin=r2] .mdt-inc .rm-go{min-height:var(--tap);min-width:180px;padding:0 22px;border-radius:16px;background:linear-gradient(180deg,#3dd68c,#1faa5c);color:#042012;
  display:flex;align-items:center;justify-content:center;gap:10px;font-size:18px;font-weight:700;box-shadow:0 8px 20px rgba(61,214,140,.25)}
body[data-skin=r2] .mdt-inc .rm-go .ic{font-size:36px}
body[data-skin=r2] .mdt-foot{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body[data-skin=r2] .mdt-call-btn,.mdt-ptt{min-height:var(--tap);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-size:15px;font-weight:650;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body[data-skin=r2] .mdt-call-btn{background:rgba(255,255,255,.06);color:#d5e0f4}
body[data-skin=r2] .mdt-ptt{background:linear-gradient(180deg,#2a64d4,#1a3f96);color:#fff}
body[data-skin=r2] .mdt-call-btn .ic,.mdt-ptt .ic{font-size:42px}
body[data-skin=r2] .radio-led{width:10px;height:10px;border-radius:50%;background:#3a1a1e;box-shadow:inset 0 0 0 2px rgba(0,0,0,.4)}
body[data-skin=r2].radio-tx .radio-led{background:#ff3344;box-shadow:0 0 10px #ff3344}
body[data-skin=r2].radio-rx .radio-led{background:#2bff8a;box-shadow:0 0 10px #2bff8a}
body[data-skin=r2] .radio-bars{display:inline-flex;gap:2px;align-items:flex-end;height:16px}
body[data-skin=r2] .radio-bars i{width:3px;background:#3a4a66;border-radius:1px;height:30%;opacity:.6}
body[data-skin=r2] .radio-bars i:nth-child(2){height:45%} .radio-bars i:nth-child(3){height:60%} .radio-bars i:nth-child(4){height:80%} .radio-bars i:nth-child(5){height:100%}
body[data-skin=r2].radio-rx .radio-bars i,body[data-skin=r2].radio-tx .radio-bars i{opacity:1;background:#7eb6ff;animation:pd-bars .5s ease-in-out infinite alternate}

/* ---- Missions list ---- */
body[data-skin=r2] .missions{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
body[data-skin=r2] .mission{min-height:100px;padding:14px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex;align-items:center;gap:12px;text-align:left;color:#d7e2f5;font-weight:600}
body[data-skin=r2] .mission .mi-ic{font-size:36px;color:#7eb6ff}.mission .mi-t{flex:1;font-size:15px;line-height:1.25}.mission .mi-done{opacity:0;color:#f5c542}
body[data-skin=r2] .mission.done .mi-done{opacity:1}.mission.pending{box-shadow:inset 0 0 0 1px rgba(91,156,255,.5);background:rgba(91,156,255,.1)}
body[data-skin=r2] .badges{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
body[data-skin=r2] .bd-row{display:flex;gap:6px}.bd{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:20px;color:#4a5a78;opacity:.45}
body[data-skin=r2] .bd.got{opacity:1;color:#f5c542;background:rgba(245,197,66,.12)}
body[data-skin=r2] .bd-count{display:flex;align-items:center;gap:6px;font-size:16px;color:#c5d4ef}.bd-count .ic{color:#f5c542}

/* ---- Incident checklist ---- */
.r2-inc{position:fixed;inset:0;z-index:980;display:none;align-items:center;justify-content:center;background:rgba(3,8,16,.72);backdrop-filter:blur(8px)}
.r2-inc.show{display:flex}
.r2-inc .inc-card{width:min(920px,94vw);max-height:90vh;overflow:auto;padding:22px 24px;border-radius:24px;
  background:linear-gradient(165deg,#161e2c,#0c121c);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);color:#e8eefc}
.r2-inc .inc-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.r2-inc .inc-ic{font-size:48px;color:#7eb6ff}
.r2-inc .inc-tt{flex:1;min-width:160px}.inc-tt small{display:block;color:#7eb6ff;font-size:12px;letter-spacing:.08em;font-weight:700}.inc-tt b{font-size:22px;font-weight:700}
.r2-inc .inc-flow{display:flex;gap:6px;flex-wrap:wrap}.inc-flow span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);color:#6b7c99;font-size:12px;font-weight:650}
.r2-inc .inc-flow span.on{background:rgba(61,214,140,.15);color:#3dd68c}.inc-flow span.cur{background:rgba(91,156,255,.2);color:#7eb6ff}
.r2-inc .inc-x{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:22px}
.r2-inc .inc-task{margin:14px 0;color:#a8b8d4;font-size:16px;line-height:1.4}
.r2-inc .inc-steps{display:grid;gap:10px}
.r2-inc .inc-step{display:grid;grid-template-columns:40px 40px 1fr 36px;align-items:center;gap:12px;min-height:72px;padding:12px 16px;border-radius:16px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);text-align:left;color:#9db0d0;opacity:.55}
.r2-inc .inc-step.cur{opacity:1;color:#eef3ff;box-shadow:inset 0 0 0 1px rgba(91,156,255,.45);background:rgba(91,156,255,.1)}
.r2-inc .inc-step.ok{opacity:1;color:#3dd68c;box-shadow:inset 0 0 0 1px rgba(61,214,140,.35)}
.r2-inc .is-n{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-weight:700;font-variant-numeric:tabular-nums}
.r2-inc .inc-step .ic{font-size:28px}.inc-step .is-ok{opacity:0}.inc-step.ok .is-ok{opacity:1}
.r2-inc .inc-done{display:none;align-items:center;gap:16px;margin-top:16px;padding:16px;border-radius:16px;background:rgba(61,214,140,.1)}
.r2-inc.done .inc-done{display:flex}.r2-inc.done .inc-steps{opacity:.5;pointer-events:none}
.r2-inc .inc-done .ic{font-size:48px;color:#f5c542}.inc-done b{display:block;font-size:18px}.inc-done small{color:#9db0d0}
.r2-inc .inc-back{margin-left:auto;min-height:64px;padding:0 20px;border-radius:14px;background:#3dd68c;color:#042012;display:flex;align-items:center;gap:8px;font-weight:700}

/* ---- Signs quiz ---- */
body[data-skin=r2] .signs2{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
body[data-skin=r2] .sg-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body[data-skin=r2] .sg-q{flex:1;font-size:16px;font-weight:600;color:#c5d4ef}
body[data-skin=r2] .sg-score{display:flex;gap:4px}.sg-score i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.12)}.sg-score i.on{background:#f5c542}
body[data-skin=r2] .sg-play{min-height:56px;padding:0 18px;border-radius:14px;background:rgba(91,156,255,.15);color:#7eb6ff;display:flex;align-items:center;gap:8px;font-weight:650}
body[data-skin=r2] .sg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:1;min-height:0}
body[data-skin=r2] .sg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:16px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);min-height:140px;color:#d7e2f5}
body[data-skin=r2] .sg-svg{width:min(100px,18vw);height:min(100px,18vw);filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
body[data-skin=r2] .sg-n{font-size:13px;font-weight:650;text-align:center;line-height:1.2}.sg-c{font-size:11px;color:#7a8bab;font-weight:600;letter-spacing:.06em}
body[data-skin=r2] .sg.pop,.sg.yay{transform:scale(1.04)}.sg.nope{filter:brightness(.7)}.sg.yay{box-shadow:inset 0 0 0 2px #3dd68c}

/* ---- Equipment ---- */
body[data-skin=r2] .equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;align-content:start}
body[data-skin=r2] .eq-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border-radius:16px;min-height:140px;text-align:left;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);color:#d7e2f5}
body[data-skin=r2] .eq-ic{font-size:36px;color:#7eb6ff}.eq-t{font-size:16px;font-weight:700}.eq-d{font-size:13px;color:#8fa3c4;font-weight:500;line-height:1.35}

/* ---- Emergency / keypad / semafor ---- */
body[data-skin=r2] .emergency{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
body[data-skin=r2] .em-card{min-height:var(--tap);border-radius:18px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body[data-skin=r2] .em-ic{font-size:48px}.em-num{font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.em-name{font-size:14px;font-weight:600;color:#9db0d0}
body[data-skin=r2] .em-police{--c:#2a6bff}.em-amb{--c:#ff4d5e}.em-fire{--c:#ff8a1f}.em-112{--c:#3dd68c}
body[data-skin=r2] .em-card .em-ic{color:var(--c)}.em-card.playing{box-shadow:inset 0 0 0 2px var(--c)}
body[data-skin=r2] .keypad{display:flex;flex-direction:column;height:100%;gap:12px}
body[data-skin=r2] .kp-display{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;background:rgba(0,0,0,.35);min-height:64px}
body[data-skin=r2] .kp-num{font-size:36px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.2em}
body[data-skin=r2] .kp-keys{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:10px}
body[data-skin=r2] .kp-key{border-radius:16px;background:rgba(255,255,255,.06);font-size:28px;font-weight:650;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body[data-skin=r2] .keypad.ok .kp-display{box-shadow:inset 0 0 0 2px #3dd68c}.keypad.bad .kp-display{box-shadow:inset 0 0 0 2px #ff4d5e}
body[data-skin=r2] .semafor{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;height:100%}
body[data-skin=r2] .sf-light{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:28px;background:#0e1218;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body[data-skin=r2] .sf-lamp{width:90px;height:90px;border-radius:50%;background:#1a1f28;box-shadow:inset 0 4px 8px rgba(0,0,0,.5)}
body[data-skin=r2] .semafor[data-light=r] .sf-r{background:#ff2a3a;box-shadow:0 0 30px #ff2a3a}
body[data-skin=r2] .semafor[data-light=y] .sf-y{background:#f5c542;box-shadow:0 0 30px #f5c542}
body[data-skin=r2] .semafor[data-light=g] .sf-g{background:#3dd68c;box-shadow:0 0 30px #3dd68c}
body[data-skin=r2] .sf-answers{display:grid;gap:10px}.sf-ans{min-height:var(--tap);border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:rgba(255,255,255,.05);font-size:20px;font-weight:650;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
body[data-skin=r2] .sf-ans .ic{font-size:40px}.sf-start{min-height:64px;border-radius:14px;background:rgba(91,156,255,.15);color:#7eb6ff;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:650;margin-top:10px}
body[data-skin=r2] .sf-score{display:flex;gap:6px;margin-bottom:10px}.sf-score i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12)}.sf-score i.on{background:#f5c542}

/* ---- Bubble / splash / modal refinements ---- */
body[data-skin=r2] .pd-bubble{border-radius:20px;padding:14px 16px;background:rgba(12,18,28,.92);backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);display:flex;align-items:center;gap:14px;font-weight:500}
body[data-skin=r2] .pd-bubble-av{width:56px;height:56px;border-radius:14px;background:rgba(91,156,255,.12);color:#7eb6ff;font-size:28px}
body[data-skin=r2] .pd-bubble-txt{font-size:clamp(15px,1.5vw,20px);font-weight:550;line-height:1.35;max-width:640px;color:#e8eefc}
body[data-skin=r2] .pd-bubble-btn{min-height:64px;min-width:160px;border-radius:14px;background:linear-gradient(180deg,#3dd68c,#1faa5c);color:#042012;font-size:18px;font-weight:700;box-shadow:0 6px 16px rgba(61,214,140,.3);animation:none}
body[data-skin=r2] .pd-bubble-btn .ic{font-size:28px}
body[data-skin=r2] .pd-modal-card{border-radius:20px;background:#101820;font-weight:500}
body[data-skin=r2] .pm-seg .on{background:#5b9cff;color:#041018}
body[data-skin=r2] .pd-splash{background:radial-gradient(circle at 50% 35%,#152238,#05080e 70%)}
body[data-skin=r2] .spl-title{flex-direction:column;gap:6px;font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.02em}
body[data-skin=r2] .spl-title small{font-size:12px;letter-spacing:.2em;color:#7eb6ff;font-weight:650}
body[data-skin=r2] .spl-start{border-radius:24px;width:clamp(180px,28vh,260px);aspect-ratio:1;background:linear-gradient(160deg,#2a64d4,#163a8a);color:#fff;
  box-shadow:0 20px 50px rgba(42,100,212,.35),inset 0 1px 0 rgba(255,255,255,.2);animation:none}
body[data-skin=r2] .spl-hint{margin:0;color:#8fa3c4;font-size:14px;font-weight:500}
body[data-skin=r2] .r2-award{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;pointer-events:none}
body[data-skin=r2] .aw-ring{position:absolute;width:180px;height:180px;border-radius:50%;border:2px solid rgba(245,197,66,.5);animation:pd-ring 1.2s ease-out forwards}
body[data-skin=r2] .aw-badge{font-size:96px;color:#f5c542;filter:drop-shadow(0 10px 30px rgba(245,197,66,.45));animation:pd-pulse .8s ease-out}

@media (max-width:700px){
  body[data-skin=r2] .sg-grid{grid-template-columns:repeat(2,1fr)}
  body[data-skin=r2] .emergency{grid-template-columns:repeat(2,1fr)}
  body[data-skin=r2] .semafor{grid-template-columns:1fr}
  body[data-skin=r2] .mdt-foot{grid-template-columns:1fr}
}

/* ---- Map R2 palette (dark default; light themes override vars) ---- */
body[data-skin=r2]{--m-ground:#0b1119;--m-block:#111925;--m-fp:#1a2433;--m-fp-sh:rgba(0,0,0,.45);--m-park:#0f2419;--m-tree:#17402a;--m-water:#0e2a45;--m-water-hi:#1b4569;
  --m-casing:#1a2230;--m-road:#2a3446;--m-dash:rgba(230,236,245,.5);--m-lbl:#9fb2cf;--m-st:#6f819e;--m-poi:#1a2538;--m-poi-ic:#9ec1ff;--m-poi-st:#3d5a80;--m-route:#5b9cff;--m-route-hi:#9ccaff;--m-out-b:#121a26;--m-out-t:#12291d;--m-play:#2a2216;--m-police:#16264a}
body[data-skin=r2] .map{background:var(--m-ground)}
body[data-skin=r2] .map-ground{fill:var(--m-ground)}
body[data-skin=r2] .mout-b{fill:var(--m-out-b);stroke:none;opacity:1}
body[data-skin=r2] .mout-t{fill:var(--m-out-t);opacity:1}
body[data-skin=r2] .map-blocks .blk{fill:var(--m-block);stroke:none}
body[data-skin=r2] .blk-park{fill:var(--m-park)}
body[data-skin=r2] .tree{fill:var(--m-tree)}
body[data-skin=r2] .path{fill:none;stroke:var(--m-fp);stroke-width:8;stroke-linecap:round;opacity:.9}
body[data-skin=r2] .water{fill:var(--m-water)} body[data-skin=r2] .water-hi{fill:var(--m-water-hi);opacity:.5}
body[data-skin=r2] .fp{fill:var(--m-fp)} body[data-skin=r2] .fp-sh{fill:var(--m-fp-sh)}
body[data-skin=r2] .blk-play{fill:var(--m-play)}
body[data-skin=r2] .fp-police{fill:var(--m-police)} body[data-skin=r2] .fp-police-top{fill:#2a6bff;opacity:.85}
body[data-skin=r2] .map-casing line{stroke:var(--m-casing);stroke-width:62;stroke-linecap:square}
body[data-skin=r2] .map-streets line{stroke:var(--m-road);stroke-width:52;stroke-linecap:square}
body[data-skin=r2] .map-dashes line{stroke:var(--m-dash);stroke-width:2.5}
body[data-skin=r2] .map-st{fill:var(--m-st);font-size:13px;font-weight:700;letter-spacing:.24em;text-anchor:middle;font-family:var(--font)}
body[data-skin=r2] .mpoi-bg{fill:var(--m-poi);stroke:var(--m-poi-st);stroke-width:1.5}
body[data-skin=r2] .mpoi-ic{color:var(--m-poi-ic)}
body[data-skin=r2] .map-poi-lbl{fill:var(--m-lbl);font-size:17px;font-weight:650;font-family:var(--font)}
body[data-skin=r2] .route-glow{stroke:var(--m-route)} body[data-skin=r2] .route-line{stroke:var(--m-route-hi)}
body[data-skin=r2] .map-car{filter:drop-shadow(0 8px 8px rgba(0,0,0,.45))}
body[data-skin=r2] .map-tap circle{fill:rgba(91,156,255,.18);stroke:var(--m-route-hi);stroke-width:3}
body[data-skin=r2] .map-hint{top:auto;left:50%;font-size:14px}
body[data-skin=r2] .map-st{paint-order:stroke;stroke:var(--m-road);stroke-width:10px;stroke-linejoin:round}
body[data-skin=r2] .r2-beam{opacity:0;transition:opacity .4s}
body[data-skin=r2].engine-on .r2-beam{opacity:1}
body[data-skin=r2] .mission{flex-direction:row;justify-content:flex-start}
body[data-skin=r2] .ctl{flex:1;min-width:0}
body[data-skin=r2] .t-drive.on,body[data-skin=r2] .t-drive.on .ic{color:#fff!important}
body[data-skin=r2] .mdt-inc{max-width:none;width:auto;margin:0;animation:none;display:flex;color:inherit}
body[data-skin=r2] .mdt-inc .rm-go{grid-area:auto}
body[data-skin=r2] .mdt-ptt{width:auto;aspect-ratio:auto;border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px rgba(42,100,212,.3)}
body[data-skin=r2] .mdt-ptt.pressed{transform:scale(.97);box-shadow:inset 0 0 0 2px #ff4d5e}
body[data-skin=r2] .mdt-radio>*{width:100%}
body[data-skin=r2] [data-act="lightshow"].tile{grid-column:1/-1}
/* --- vyplnění ploch --- */
body[data-skin=r2] .sos-l{display:flex;flex-direction:column;min-height:0}
body[data-skin=r2] .sos-l .emergency{flex:1;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}
body[data-skin=r2] .em-card{gap:8px;padding:20px}
body[data-skin=r2] .em-ic{font-size:56px}
body[data-skin=r2] .em-num{font-size:56px;color:var(--text,#fff)}
body[data-skin=r2] .em-name{font-size:17px;color:var(--text,#fff)}
body[data-skin=r2] .em-desc{font-size:14px;color:var(--muted,#8fa3c4);font-weight:500;text-align:center;max-width:26ch;line-height:1.35}
body[data-skin=r2] .scr-equip .equip{flex:1;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
body[data-skin=r2] .eq-card{justify-content:flex-end;padding:22px;gap:10px}
body[data-skin=r2] .eq-ic{font-size:60px;margin-bottom:auto}
body[data-skin=r2] .eq-t{font-size:20px}
body[data-skin=r2] .eq-d{font-size:14px}
body[data-skin=r2] .sg-svg{width:clamp(80px,9vw,150px);height:clamp(80px,9vw,150px)}
body[data-skin=r2] .sg-n{font-size:15px}
/* --- realistický semafor --- */
body[data-skin=r2] .semafor{grid-template-columns:auto minmax(200px,1fr)}
body[data-skin=r2] .sf-light{gap:10px;padding:16px 14px;border-radius:18px;background:linear-gradient(90deg,#15191f,#262c35 45%,#15191f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 20px 40px rgba(0,0,0,.45);position:relative}
body[data-skin=r2] .sf-light::after{content:'';position:absolute;left:50%;bottom:-60px;width:16px;height:60px;transform:translateX(-50%);background:linear-gradient(90deg,#1a1e24,#3a414c,#1a1e24)}
body[data-skin=r2] .sf-lamp{position:relative;width:clamp(76px,8vw,104px);height:clamp(76px,8vw,104px);border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#2a2f37,#0c0e12 70%);box-shadow:inset 0 3px 8px rgba(0,0,0,.8),0 0 0 4px #0b0d10}
body[data-skin=r2] .sf-lamp::before{content:'';position:absolute;left:-10%;right:-10%;top:-18%;height:46%;border-radius:50% 50% 0 0/100% 100% 0 0;
  background:linear-gradient(180deg,#0a0c0f,#1b1f26);box-shadow:0 2px 4px rgba(0,0,0,.6);z-index:2}
body[data-skin=r2] .sf-lamp::after{content:'';position:absolute;inset:8%;border-radius:50%;opacity:.25;
  background:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.6px) 0 0/7px 7px}
body[data-skin=r2] .sf-r{background:radial-gradient(circle at 50% 45%,#3a1416,#16080a 70%)}
body[data-skin=r2] .sf-y{background:radial-gradient(circle at 50% 45%,#3a2c10,#150f05 70%)}
body[data-skin=r2] .sf-g{background:radial-gradient(circle at 50% 45%,#10301e,#06120b 70%)}
body[data-skin=r2] .semafor[data-light=r] .sf-r{background:radial-gradient(circle at 50% 42%,#fff2f2 0,#ff4a4a 30%,#c40d1d 72%);box-shadow:0 0 40px 6px rgba(255,40,50,.55),0 0 0 4px #0b0d10}
body[data-skin=r2] .semafor[data-light=y] .sf-y{background:radial-gradient(circle at 50% 42%,#fffbe8 0,#ffc23a 30%,#d68a00 72%);box-shadow:0 0 40px 6px rgba(255,180,40,.5),0 0 0 4px #0b0d10}
body[data-skin=r2] .semafor[data-light=g] .sf-g{background:radial-gradient(circle at 50% 42%,#f0fff6 0,#3be08a 30%,#0a9a4f 72%);box-shadow:0 0 40px 6px rgba(40,220,120,.5),0 0 0 4px #0b0d10}
body[data-skin=r2] .sf-ans{color:var(--text,#e8eefc)}
body[data-skin=r2] .sf-ans-r .ic{color:#ff4d5e} body[data-skin=r2] .sf-ans-y .ic{color:#f5c542} body[data-skin=r2] .sf-ans-g .ic{color:#3dd68c}
body[data-skin=r2] .sf-ans.yay{box-shadow:inset 0 0 0 2px #3dd68c} body[data-skin=r2] .sf-ans.nope{box-shadow:inset 0 0 0 2px #ff4d5e}
body[data-skin=r2] .blk-play{fill:var(--m-park,#1d3a2a)}
body[data-skin=r2] .court rect,body[data-skin=r2] .court circle{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2}
body[data-skin=r2] .court>rect:first-child{fill:#2c5d8a;stroke:rgba(255,255,255,.7)}
body[data-skin=r2] .court line{stroke:rgba(255,255,255,.6);stroke-width:2}
body[data-skin=r2] .sandpit{fill:#b89a62;opacity:.75}
body[data-skin=r2] .play-eq{fill:#c2563a;opacity:.85} body[data-skin=r2] .play-eq-l{stroke:#f2d0a0;stroke-width:3}
body[data-skin=r2] .fp-police-hi{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.12)}
body[data-skin=r2] .park-lot line{stroke:rgba(255,255,255,.35);stroke-width:1.5}
body[data-skin=r2] .helipad{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2}

/* C – Light: Tesla light theme, white/silver, Czech police blue accents */
body.r2c{--bg:#eef0f3;--panel:#fff;--text:#11161f;--muted:#6b7380;--line:rgba(15,23,42,.08);--blue:#1d4fb8;--lime:#c6ff1a;background:var(--bg);color:var(--text);
  --m-ground:#dfe6ef;--m-block:#f5f7fa;--m-fp:#e6ebf2;--m-fp-sh:rgba(0,0,0,.06);--m-park:#d5e8d4;--m-tree:#6fae78;--m-water:#9ec9e6;--m-water-hi:#c5e3f5;
  --m-casing:#c5ceda;--m-road:#f8fafc;--m-dash:rgba(60,70,90,.45);--m-lbl:#334155;--m-st:#64748b;--m-poi:#fff;--m-poi-ic:#1d4fb8;--m-poi-st:#cbd5e1;--m-route:#1d4fb8;--m-route-hi:#3b82f6;--m-out-b:#e2e8f0;--m-out-t:#a7c4a3;--m-play:#efe6d5;--m-police:#dbe7ff}
body.r2c .app{position:absolute;inset:0;display:grid;grid-template-columns:clamp(420px,32vw,600px) 240px 1fr;grid-template-rows:64px 1fr auto;grid-template-areas:"top top top" "car menu content" "dock dock dock"}
body.r2c .top{grid-area:top;display:flex;align-items:center;gap:16px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.8)}
body.r2c .tp-l{display:flex;align-items:center;gap:16px}body.r2c .gear{font-size:20px;color:#9aa3b2}body.r2c .gear span.on{color:#111}
body.r2c .tp-unit{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue)}.tp-unit .ic{font-size:22px}
body.r2c .tp-lb{flex:1;height:36px;max-width:480px}
body.r2c .tp-r{display:flex;align-items:center;gap:12px;margin-left:auto;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
body.r2c .tp-temp{display:inline-flex;align-items:center;gap:4px}.tp-btn{width:48px;height:48px;border-radius:14px;background:#f3f5f8;display:flex;align-items:center;justify-content:center;font-size:22px;color:#556070}
body.r2c .tp-btn.holding{background:#dbe7ff;color:var(--blue)}

body.r2c .car{grid-area:car;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);min-height:0}
body.r2c .car-speed{display:flex;flex-direction:column;align-items:center;padding:18px 0 0}
body.r2c .car-speed b{font-size:clamp(84px,10vh,128px);line-height:.9;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
body.r2c .car-speed small{font-size:14px;letter-spacing:.16em;color:var(--muted);font-weight:700;text-transform:uppercase}
body.r2c .car-vis{position:relative;flex:1;min-height:180px;margin:8px 16px;border-radius:20px;overflow:hidden;background:#e8ecf1}
body.r2c .car-vis canvas{position:absolute;inset:0;width:100%;height:100%}
body.r2c .car-model{position:absolute;left:50%;bottom:2%;width:78%;aspect-ratio:4/3;transform:translateX(-50%)}
body.r2c .hot{position:absolute;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.12);font-size:14px;font-weight:700;color:#334155}
body.r2c .hot span{display:inline-flex;align-items:center;gap:6px}.hot .ic{font-size:18px}
body.r2c .hot-lights{left:12px;top:12px}.hot-horn{right:12px;top:12px}
body.r2c .hot.on{background:#1d4fb8;color:#fff}
body.r2c .car-act{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px 16px}
body.r2c .ca{min-height:120px;border-radius:20px;background:#f3f5f8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:17px;font-weight:700;color:#1f2937;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
body.r2c .ca .ic{font-size:40px;color:#475569}body.r2c .ca.on{background:#dbe7ff;color:var(--blue)}.ca.on .ic{color:var(--blue)}
body.r2c .ca-drive{background:linear-gradient(180deg,#2f7bff,#1d4fb8);color:#fff}.ca-drive .ic{color:#fff}.ca-drive.on{background:linear-gradient(180deg,#ef4444,#b91c1c)}

body.r2c .menu{grid-area:menu;display:flex;flex-direction:column;gap:6px;padding:12px;background:#f7f8fa;border-right:1px solid var(--line)}
body.r2c .mi{flex:1;min-height:80px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:700;color:#5b6573;text-align:center;padding:8px}
body.r2c .mi .ic{font-size:38px}body.r2c .mi.on{background:#fff;color:var(--blue);box-shadow:0 8px 24px rgba(15,23,42,.08),inset 0 0 0 1px rgba(29,79,184,.2)}

body.r2c .content{grid-area:content;min-height:0;position:relative;background:#eef0f3}
body.r2c .scr.active{position:absolute;inset:0;padding:16px;gap:14px;overflow:auto}
body.r2c .map-host{height:100%;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(15,23,42,.08)}
body.r2c .sh{margin:0 0 12px;font-size:20px;font-weight:700}.sh small{font-size:13px;color:var(--muted);font-weight:500;margin-left:8px}
body.r2c .ctl{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(140px,1fr);gap:14px;height:100%}
body.r2c .tile,body.r2c .t-main{border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(15,23,42,.06),inset 0 0 0 1px rgba(15,23,42,.05);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:17px;font-weight:700;min-height:140px;color:#1f2937}
body.r2c .tile .ic,body.r2c .t-main .ic{font-size:48px;color:#475569}
body.r2c .tile.on,body.r2c .t-main.on{background:#dbe7ff;color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}.tile.on .ic,.t-main.on .ic{color:var(--blue)}
body.r2c .t-siren{grid-row:span 2;display:flex;flex-direction:column;align-items:stretch;gap:10px;background:none;box-shadow:none;padding:0}
body.r2c .t-siren .t-main{flex:1}body.r2c .t-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
body.r2c .t-modes button{min-height:72px;border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;color:#5b6573;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
body.r2c .t-modes button.on{color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue);background:#dbe7ff}
body.r2c .t-drive{background:linear-gradient(180deg,#2f7bff,#1d4fb8)!important;color:#fff}.t-drive .ic{color:#fff!important}.t-drive.on{background:linear-gradient(180deg,#ef4444,#b91c1c)!important}
body.r2c .scr-radio.active{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
body.r2c .radio-side{background:#fff;border-radius:20px;padding:14px;overflow:auto;box-shadow:0 8px 24px rgba(15,23,42,.06)}
body.r2c .mdt-radio{background:linear-gradient(165deg,#fff,#f4f6f9)!important;color:#1f2937;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)!important}
body.r2c .mdt-head{color:#6b7380}body.r2c .mdt-call{color:#111}body.r2c .mdt-st{color:var(--blue)}
body.r2c .mdt-log{background:#f3f5f8}body.r2c .ml-t{color:#94a3b8}.ml-f{color:#1f2937}.ml-x{color:#475569}.ml-in .ml-f{color:var(--blue)}.ml-out .ml-f{color:#059669}
body.r2c .mdt-call-btn{background:#f3f5f8;color:#1f2937}body.r2c .mission{background:#f3f5f8;color:#1f2937}.mission .mi-ic{color:var(--blue)}
body.r2c .scr-sos.active{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}
body.r2c .sos-l,body.r2c .signs-r{background:#fff;border-radius:20px;padding:14px;overflow:auto;box-shadow:0 8px 24px rgba(15,23,42,.06)}
body.r2c .scr-signs.active{display:grid;grid-template-columns:auto 1fr;gap:14px}
body.r2c .scr-equip.active{flex-direction:column}body.r2c .eq-card{background:#fff;color:#1f2937;box-shadow:0 8px 24px rgba(15,23,42,.06)}.eq-ic{color:var(--blue)!important}.eq-d{color:#6b7380!important}
body.r2c .em-card{background:#fff;color:#1f2937}body.r2c .kp-display{background:#f3f5f8}body.r2c .kp-key{background:#fff;color:#1f2937}
body.r2c .sf-light{background:#111}body.r2c .sf-ans{background:#fff;color:#1f2937}body.r2c .sg{background:#fff;color:#1f2937}.sg-q{color:#334155!important}
body.r2c .pd-bubble{background:rgba(255,255,255,.95);color:#111}.pd-bubble-txt{color:#1f2937!important}.pd-bubble-av{background:#dbe7ff;color:var(--blue)}
body.r2c .pd-modal-card{background:#fff;color:#111}body.r2c .pm-seg .on{background:var(--blue);color:#fff}
body.r2c .pd-splash{background:radial-gradient(circle at 50% 35%,#dbe7ff,#eef0f3 70%)}body.r2c .spl-title{color:#111}.spl-title small{color:var(--blue)}.spl-hint{color:#6b7380}

body.r2c .dock{grid-area:dock;display:flex;align-items:center;gap:10px;padding:12px 18px;background:#fff;border-top:1px solid var(--line)}
body.r2c .dk{flex:1;min-height:118px;border-radius:18px;background:#f3f5f8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;color:#334155}
body.r2c .dk .ic{font-size:40px}body.r2c .dk.on{background:#dbe7ff;color:var(--blue)}
body.r2c .dk-siren.on{background:linear-gradient(180deg,#fee2e2,#dbe7ff)}
body.r2c .dk-modes{display:flex;gap:8px;flex:1.4}.dk-modes button{flex:1;min-height:118px;border-radius:18px;background:#f3f5f8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;color:#5b6573}
body.r2c .dk-modes button.on{background:#dbe7ff;color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}.dk-modes .ic{font-size:28px}

@media (max-height:860px){
  body.r2c .car-speed b{font-size:72px}body.r2c .ca{min-height:90px}body.r2c .dk,body.r2c .dk-modes button{min-height:92px}
  body.r2c .app{grid-template-columns:clamp(340px,30vw,480px) 180px 1fr}
}
@media (max-width:900px){
  body.r2c .app{grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr auto;grid-template-areas:"top" "car" "menu" "content" "dock"}
  body.r2c .car{border-right:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto}
  body.r2c .car-speed{padding:8px 0 0 12px;align-items:flex-start}.car-speed b{font-size:56px}
  body.r2c .car-vis{margin:8px;min-height:120px;height:120px}.car-act{grid-column:1/-1}.ca{min-height:72px;flex-direction:row}
  body.r2c .menu{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.mi{min-width:100px;min-height:72px}
  body.r2c .scr-radio.active,body.r2c .scr-sos.active,body.r2c .scr-signs.active{display:flex;flex-direction:column}
  body.r2c .ctl{grid-template-columns:repeat(2,1fr)}.t-siren{grid-column:1/-1;grid-row:auto}
  body.r2c .tp-lb{display:none}body.r2c .dock{overflow-x:auto}.dk{min-width:90px}
}
body.r2c .pd-bubble{bottom:160px}
body.r2c .em-num,body.r2c .em-name{color:#11161f}
body.r2c .sos-r{background:#fff;border-radius:20px;padding:14px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
body.r2c .kp-key{box-shadow:inset 0 0 0 1px rgba(15,23,42,.08)}
body.r2c .sf-ans{color:#1f2937}
body.r2c .signs-l{background:#fff;border-radius:20px;padding:20px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
body.r2c .sg-c{color:#64748b}
body.r2c .mdt-inc .rm-title{color:#11161f}
body.r2c .pd-bubble{bottom:auto;top:auto;left:calc(clamp(420px,32vw,600px)/2);bottom:170px;width:calc(clamp(420px,32vw,600px) - 40px);max-width:none;background:rgba(255,255,255,.96);box-shadow:0 20px 50px rgba(15,23,42,.18),inset 0 0 0 1px rgba(15,23,42,.06)}
body.r2c .pd-bubble-txt{color:#1f2937}
body.r2c .em-card{background:#f5f7fb;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.05)}
body.r2c .court>rect:first-child{fill:#5b8fc6}
body.r2c .park-lot line,body.r2c .helipad{stroke:rgba(15,23,42,.25)}
body.r2c .fp-police-hi{fill:rgba(42,107,255,.08);stroke:rgba(42,107,255,.25)}

/* ===== Light product polish ===== */
body.r2c .mi .ic, body.r2c .dk .ic, body.r2c .tile .ic, body.r2c .t-main .ic, body.r2c .ca .ic, body.r2c .hot .ic { filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
body.r2c .tile, body.r2c .t-main, body.r2c .dk, body.r2c .mi, body.r2c .ca, body.r2c .hot, body.r2c .snd, body.r2c .eq-card, body.r2c .em-card {
  transition: transform .14s cubic-bezier(.2,1.2,.4,1), box-shadow .18s, background .18s, color .18s;
}
body.r2c .tile:active, body.r2c .t-main:active, body.r2c .dk:active, body.r2c .mi:active, body.r2c .ca:active, body.r2c .snd:active, body.r2c .hot:active {
  transform: scale(.96);
}
body.r2c .scr.active { animation: pd-in .32s cubic-bezier(.2,.8,.2,1); }
@keyframes pd-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body.r2c.reduce-motion .scr.active { animation: none; }
body.r2c .content { position: relative; }

/* lightbar patterns via body[data-lbp] */
body.r2c .lb-r2 .lb-unit i { transition: background .08s, box-shadow .08s, opacity .08s; }
body[data-lbp=double].lights-on .lb-r2 .lb-unit.lb-l i { animation: pd-dbl 0.7s infinite; }
body[data-lbp=double].lights-on .lb-r2 .lb-unit.lb-r i { animation: pd-dbl 0.7s infinite .35s; }
body[data-lbp=triple].lights-on .lb-r2 .lb-unit.lb-l i { animation: pd-tri 0.85s infinite; }
body[data-lbp=triple].lights-on .lb-r2 .lb-unit.lb-r i { animation: pd-tri 0.85s infinite .42s; }
body[data-lbp=all].lights-on .lb-r2 .lb-unit i,
body[data-lbp=takedown].lights-on .lb-r2 .lb-unit i { animation: pd-all .5s infinite; }
body[data-lbp=takedown].lights-on .lb-r2 .lb-unit i { background: #f5f7ff !important; box-shadow: 0 0 16px #fff !important; }
body[data-lbp=cruise].lights-on .lb-r2 .lb-unit i { animation: pd-cruise 2.2s ease-in-out infinite; opacity: .55; }
body[data-lbp=rotate].lights-on .lb-r2 .lb-unit i { animation: pd-rot 1.2s linear infinite; }
body[data-lbp=rotate].lights-on .lb-r2 .lb-unit.lb-r i { animation-delay: .6s; }
body[data-lbp=sweep].lights-on .lb-r2 .lb-unit.lb-l i { animation: pd-sweep 1.6s linear infinite; }
body[data-lbp=sweep].lights-on .lb-r2 .lb-unit.lb-r i { animation: pd-sweep 1.6s linear infinite reverse; }
body[data-lbp=wigwag].lights-on .lb-r2 .lb-unit.lb-l i { animation: pd-ww 1s steps(1) infinite; }
body[data-lbp=wigwag].lights-on .lb-r2 .lb-unit.lb-r i { animation: pd-ww 1s steps(1) infinite .5s; }
body[data-lbp=arrow-l].lights-on .lb-r2 .lb-unit.lb-l i { animation: pd-arr .9s infinite; }
body[data-lbp=arrow-l].lights-on .lb-r2 .lb-unit.lb-r i { opacity: .15; animation: none; }
body[data-lbp=arrow-r].lights-on .lb-r2 .lb-unit.lb-r i { animation: pd-arr .9s infinite; }
body[data-lbp=arrow-r].lights-on .lb-r2 .lb-unit.lb-l i { opacity: .15; animation: none; }
body[data-lbp=arrow-both].lights-on .lb-r2 .lb-unit i { animation: pd-arr .9s infinite; }
body[data-lbp=arrow-both].lights-on .lb-r2 .lb-unit.lb-r i { animation-delay: .45s; }
@keyframes pd-dbl { 0%,8%,20%,28%{filter:brightness(3);opacity:1} 9%,19%,29%,100%{filter:none;opacity:.35} }
@keyframes pd-tri { 0%,6%,12%,18%,24%,30%{filter:brightness(3);opacity:1} 7%,11%,19%,23%,31%,100%{filter:none;opacity:.3} }
@keyframes pd-all { 0%,45%{filter:brightness(3.2);opacity:1} 50%,100%{filter:none;opacity:.25} }
@keyframes pd-cruise { 0%,100%{filter:brightness(1.4);opacity:.45} 50%{filter:brightness(2.2);opacity:.85} }
@keyframes pd-rot { 0%{filter:brightness(3);opacity:1} 50%{filter:none;opacity:.2} 100%{filter:brightness(3);opacity:1} }
@keyframes pd-sweep { 0%{filter:brightness(.8);opacity:.2} 40%{filter:brightness(3);opacity:1} 100%{filter:brightness(.8);opacity:.2} }
@keyframes pd-ww { 0%,49%{filter:brightness(3);opacity:1} 50%,100%{filter:none;opacity:.2} }
@keyframes pd-arr { 0%,40%{filter:brightness(3);opacity:1} 45%,100%{filter:none;opacity:.2} }
body.reduce-motion.lights-on .lb-r2 .lb-unit i { animation: none !important; opacity: .85; filter: brightness(2); }

/* Sounds panel */
body.r2c .scr-sounds.active { display:flex; flex-direction:column; overflow:auto; padding:8px 8px 16px; }
body.r2c .sounds { display:flex; flex-direction:column; gap:16px; height:100%; }
body.r2c .snd-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
body.r2c .snd-stop { display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 16px; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08); font-weight:700; color:#b91c1c; }
body.r2c .snd-sec h4 { margin:0 0 8px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#64748b; font-weight:700; }
body.r2c .snd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
body.r2c .snd { min-height:110px; border-radius:18px; background:#fff; box-shadow:0 8px 20px rgba(15,23,42,.06), inset 0 0 0 1px rgba(15,23,42,.05);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 8px; text-align:center; color:#1f2937; font-weight:700; }
body.r2c .snd .snd-ic, body.r2c .snd .ic { font-size:36px; color:var(--blue,#1d4fb8); }
body.r2c .snd-t { font-size:14px; } body.r2c .snd-h { font-size:11px; color:#64748b; font-weight:500; }
body.r2c .snd.on, body.r2c .snd[data-siren-mode].on { box-shadow:inset 0 0 0 2px var(--blue,#1d4fb8); background:#dbe7ff; }

/* Games */
.pd-game { position:fixed; inset:0; z-index:1200; background:rgba(15,23,42,.35); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; padding:20px; }
.pd-game.show { opacity:1; }
.pg-card { width:min(520px,96vw); background:#fff; border-radius:24px; padding:22px; box-shadow:0 30px 80px rgba(15,23,42,.25); color:#11161f; }
.pg-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pg-head h3 { margin:0; flex:1; font-size:22px; } .pg-head .ic { font-size:28px; color:var(--blue,#1d4fb8); }
.pg-head button { width:44px; height:44px; border-radius:12px; background:#f3f5f8; display:flex; align-items:center; justify-content:center; }
.pg-lead { color:#64748b; margin:0 0 14px; font-weight:500; }
.pg-radar { display:flex; flex-direction:column; align-items:center; padding:18px; border-radius:18px; background:#0b1220; color:#e8eefc; margin-bottom:12px; }
.pg-radar span { font-size:64px; font-weight:800; font-variant-numeric:tabular-nums; } .pg-radar small { color:#93a4c0; }
.pg-btn { width:100%; min-height:64px; border-radius:16px; background:linear-gradient(180deg,#3d7cff,#2556c4); color:#fff; font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; gap:10px; }
.pg-res { min-height:1.4em; font-weight:600; margin:10px 0 0; }
.pg-plate { font-size:36px; font-weight:800; letter-spacing:.08em; text-align:center; padding:16px; border-radius:12px; background:#f3f5f8; border:3px solid #1d4fb8; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.pg-opts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pg-opts button { min-height:56px; border-radius:14px; background:#f3f5f8; font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
.pg-lab { display:flex; flex-direction:column; gap:6px; font-weight:600; margin-bottom:12px; }
.pg-lab select { min-height:48px; border-radius:12px; border:1px solid rgba(15,23,42,.12); padding:0 12px; font:inherit; }
.pg-ticket { position:relative; padding:18px; border-radius:12px; background:#fffbeb; border:2px dashed #d97706; margin-bottom:12px; font-weight:600; line-height:1.6; }
.pg-stamp { position:absolute; right:16px; top:16px; width:84px; height:84px; border:4px solid #b91c1c; border-radius:50%; color:#b91c1c; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; letter-spacing:.06em; transform:rotate(-18deg); opacity:.25; transition:opacity .3s, transform .35s cubic-bezier(.2,1.4,.4,1); }
.pg-stamp.on { opacity:1; transform:rotate(-12deg) scale(1.05); }
/* mini-games v2: score, decisions, chips */
.pg-card { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.pg-score { display:flex; gap:6px; margin-right:4px; }
.pg-score i { width:12px; height:12px; border-radius:50%; background:#e2e8f0; transition:background .25s, transform .25s; }
.pg-score i.on { background:#f5b301; transform:scale(1.15); }
.pg-head button { width:48px; height:48px; flex:none; }
.pg-dec { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pg-dec[hidden], .pg-btn[hidden] { display:none !important; }
.pg-dec button { min-height:72px; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:800; font-size:20px; color:#fff; }
.pg-dec .ic { width:36px; height:36px; font-size:36px; }
.pg-ok { background:linear-gradient(180deg,#22a35a,#16803f); }
.pg-stop { background:linear-gradient(180deg,#ef4444,#c81e2b); }
.pg-stop .ic { --stop:#fff; color:#c81e2b; }
.pg-res.ok { color:#15803d; } .pg-res.bad { color:#c81e2b; }
.pg-plate { display:flex; align-items:stretch; justify-content:center; padding:0; overflow:hidden; background:#fff; border:3px solid #11161f; }
.pg-plate b { background:#1d4fb8; color:#fff; font-size:16px; display:flex; align-items:flex-end; padding:8px 8px 10px; letter-spacing:0; }
.pg-plate span { flex:1; padding:14px 8px; text-align:center; }
.pg-opts button { min-height:64px; border:2px solid transparent; transition:background .2s, border-color .2s; }
.pg-opts button.yay { background:#dcfce7; border-color:#22a35a; color:#15803d; }
.pg-opts button.nope { background:#fee2e2; border-color:#ef4444; color:#b91c1c; opacity:.7; }
.pg-offs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.pg-offs button { min-height:64px; border-radius:14px; background:#f3f5f8; display:flex; align-items:center; gap:10px; padding:8px 12px; font-weight:700; font-size:15px; text-align:left; border:2px solid transparent; color:#11161f; }
.pg-offs button .ic { width:30px; height:30px; font-size:30px; flex:none; color:var(--pb,#1d4fb8); }
.pg-offs button.on { background:#e6eeff; border-color:var(--pb,#1d4fb8); }
.pg-tno { font-size:13px; color:#92400e; letter-spacing:.04em; }
@media (max-width:480px), (max-height:500px) {
  .pd-game { padding:12px; align-items:center; }
  .pg-card { padding:16px; border-radius:20px; }
  .pg-head h3 { font-size:20px; } .pg-score i { width:10px; height:10px; } .pg-score { gap:4px; }
  .pg-radar { padding:10px; } .pg-radar span { font-size:48px; }
  .pg-plate { font-size:28px; }
  .pg-offs button { font-size:14px; min-height:56px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .pg-card { width:min(640px,96vw); }
  .pg-lead { margin-bottom:8px; }
  .pg-radar span { font-size:40px; }
  .pg-ticket { padding:10px 14px; line-height:1.4; }
  .pg-stamp { width:64px; height:64px; }
}

/* Parent about */
.pm-about { margin-top:14px; padding:14px; border-radius:16px; background:rgba(29,79,184,.06); }
.pm-about h3 { margin:0 0 6px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#1d4fb8; }
.pm-about p, .pm-about li { font-size:14px; color:#334155; font-weight:500; line-height:1.45; }
.pm-about ul { margin:8px 0 0; padding-left:18px; }

/* car idle ambient */
body.r2c.engine-on .car-model { filter: drop-shadow(0 8px 16px rgba(29,79,184,.18)); }
body.r2c.lights-on .car-model { animation: pd-carglow 1s ease-in-out infinite; }
@keyframes pd-carglow { 0%,100%{ filter:drop-shadow(-6px 0 12px rgba(255,60,70,.35)) drop-shadow(6px 0 12px rgba(60,120,255,.35)); } 50%{ filter:drop-shadow(-10px 0 18px rgba(255,60,70,.55)) drop-shadow(10px 0 18px rgba(60,120,255,.55)); } }
body.reduce-motion.lights-on .car-model { animation: none; }

/* responsive polish */
@media (max-width:900px) {
  body.r2c .snd-grid { grid-template-columns:repeat(3,1fr); }
  body.r2c .menu { flex-direction:row; overflow-x:auto; }
  body.r2c .mi { min-width:88px; }
}
@media (max-width:760px) {
  body.r2c .snd-grid { grid-template-columns:repeat(2,1fr); }
  body.r2c .pg-card { padding:16px; }
}
@media (max-height:500px) and (orientation:landscape) {
  body.r2c .top { height:48px; }
  body.r2c .dock { min-height:72px; }
  body.r2c .dk, body.r2c .dk-modes button { min-height:64px; }
  body.r2c .car-speed b { font-size:28px; }
}

/* Juniper car: lights are JS-driven from the shared pattern engine */
body[data-skin=r2] .cr-juniper .cr-glow,body[data-skin=r2] .cr-juniper .cr-refl{animation:none!important;opacity:0}
body[data-skin=r2] .cr-juniper .cr-lens-l{fill:#2a0b10}
body[data-skin=r2] .cr-juniper .cr-lens-r{fill:#0a1430}
body[data-skin=r2].lights-on .cr-juniper .cr-lens-l,body[data-skin=r2].lights-on .cr-juniper .cr-lens-r{animation:none!important}
body[data-skin=r2] .cr-tseg{fill:#e0101c;opacity:.35;transition:opacity .06s}
body[data-skin=r2] .r2-car.juniper .ct-l,body[data-skin=r2] .r2-car.juniper .ct-r{animation:none!important;filter:none}
body[data-skin=r2].lights-on .r2-car.juniper .ct-l{filter:drop-shadow(0 0 5px var(--lb-a))}
body[data-skin=r2].lights-on .r2-car.juniper .ct-r{filter:drop-shadow(0 0 5px var(--lb-b))}

/* ===== Phosphor duotone icons: bigger, colorful, legible ===== */
body.r2c { --ic-d: #3d7cff; --ic-do: .3; }
body.r2c .ic { overflow: visible; }
/* main tiles ~104px icon at 1920×1200 */
body.r2c .tile .ic, body.r2c .t-main .ic { font-size: clamp(56px, 5.6vw, 108px); }
body.r2c .t-modes .ic { font-size: clamp(34px, 2.8vw, 56px); }
body.r2c .tile, body.r2c .t-main { font-size: clamp(16px, 1.1vw, 21px); gap: 8px; }
/* dock ~68px */
body.r2c .dk .ic, body.r2c .dk-modes .ic { font-size: clamp(40px, 3.6vw, 68px); }
body.r2c .dk, body.r2c .dk-modes button { min-height: clamp(112px, 12vh, 150px); font-size: clamp(13px, .9vw, 16px); gap: 6px; }
/* side menu ~52px */
body.r2c .mi .ic { font-size: clamp(34px, 2.8vw, 54px); }
body.r2c .mi { font-size: clamp(12px, .78vw, 15px); gap: 6px; }
/* car quick buttons */
body.r2c .ca .ic { font-size: clamp(40px, 3.4vw, 64px); }
body.r2c .hot .ic { font-size: clamp(26px, 2vw, 38px); }
body.r2c .snd .snd-ic, body.r2c .snd > .ic, body.r2c .snd .ic { font-size: clamp(40px, 3.4vw, 60px); }
body.r2c .snd { min-height: clamp(120px, 12vh, 150px); }
body.r2c .eq-ic { font-size: clamp(56px, 5vw, 96px) !important; }
body.r2c .em-ic { font-size: clamp(48px, 4vw, 80px) !important; }
body.r2c .tp-btn .ic { font-size: 28px; }
/* per-function accent duotone */
body.r2c [data-act="siren"] { --ic-d: #ff3b4f; }
body.r2c [data-act="lights"] { --ic-d: #3d7cff; }
body.r2c [data-hold="horn"], body.r2c [data-hold="airhorn"] { --ic-d: #f59e0b; }
body.r2c [data-act="megaphone"] { --ic-d: #8b5cf6; }
body.r2c [data-act="seatbelt"] { --ic-d: #10b981; }
body.r2c [data-act="engine"] { --ic-d: #22c55e; }
body.r2c [data-act="drive"] { --ic-d: #ffffff; --ic-do: .45; }
body.r2c [data-act="lightshow"] { --ic-d: #ec4899; }
body.r2c [data-go="map"] { --ic-d: #10b981; } body.r2c [data-go="radio"] { --ic-d: #f59e0b; }
body.r2c [data-go="sos"] { --ic-d: #ff3b4f; } body.r2c [data-go="signs"] { --ic-d: #f59e0b; }
body.r2c [data-go="sounds"] { --ic-d: #8b5cf6; } body.r2c [data-go="equip"] { --ic-d: #10b981; }
body.r2c .on { --ic-do: .45; }
/* layout safety for bigger icons */
body.r2c .ctl { gap: 12px; }
body.r2c .menu { gap: 6px; overflow-y: auto; scrollbar-width: none; }
body.r2c .menu::-webkit-scrollbar { display: none; }
@media (max-height: 860px) {
  body.r2c .tile .ic, body.r2c .t-main .ic { font-size: clamp(44px, 7vh, 80px); }
  body.r2c .dk .ic, body.r2c .dk-modes .ic { font-size: clamp(34px, 5vh, 52px); }
  body.r2c .dk, body.r2c .dk-modes button { min-height: 96px; }
  body.r2c .mi .ic { font-size: clamp(28px, 4vh, 42px); }
  body.r2c .mi { min-height: 64px; }
  body.r2c .ca .ic { font-size: 44px; }
}
@media (max-width: 760px) {
  body.r2c .tile .ic, body.r2c .t-main .ic { font-size: 56px; }
  body.r2c .dk .ic, body.r2c .dk-modes .ic { font-size: 40px; }
  body.r2c .mi .ic { font-size: 36px; }
  body.r2c .dk, body.r2c .dk-modes button { min-height: 92px; min-width: 96px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.r2c .tile .ic, body.r2c .t-main .ic { font-size: 40px; }
  body.r2c .dk .ic, body.r2c .dk-modes .ic { font-size: 32px; }
  body.r2c .dk, body.r2c .dk-modes button { min-height: 72px; }
  body.r2c .mi .ic { font-size: 28px; }
  body.r2c .tile, body.r2c .t-main { min-height: 100px; }
}
body.r2c .tile .ic, body.r2c .t-main .ic, body.r2c .dk .ic, body.r2c .dk-modes .ic, body.r2c .mi .ic, body.r2c .ca .ic, body.r2c .snd .ic, body.r2c .eq-ic .ic { color: #1e3a6e; }
body.r2c .mi.on .ic, body.r2c .tile.on .ic, body.r2c .t-main.on .ic, body.r2c .dk.on .ic { color: #1d4fb8; }
body.r2c .t-drive .ic, body.r2c .t-drive.on .ic { color: #fff !important; }
/* fit 4 rows on short screens */
@media (max-height: 860px) and (min-width: 761px) {
  body.r2c .ctl { grid-auto-rows: minmax(0, 1fr); gap: 10px; }
  body.r2c .ctl > .tile, body.r2c .ctl .t-main { min-height: 0; }
  body.r2c .t-modes .ic { font-size: clamp(24px, 3.4vh, 34px); }
  body.r2c .t-modes button { min-height: 0; padding: 4px 2px; }
  body.r2c .t-modes span { font-size: 12px; }
}
/* narrow: never exceed viewport width */
@media (max-width: 900px) {
  body.r2c .app { grid-template-columns: minmax(0, 1fr); }
  body.r2c .app > * { min-width: 0; }
  body.r2c .car { grid-template-columns: auto minmax(0, 1fr); }
  body.r2c .tp-unit, body.r2c .tp-r { white-space: nowrap; }
  body.r2c .top { gap: 10px; padding: 0 12px; }
}
@media (max-width: 480px) {
  body.r2c .tp-temp { display: none; }
  body.r2c .tp-r { gap: 8px; }
  body.r2c .tp-btn { width: 42px; height: 42px; }
  body.r2c .hot { padding: 8px 10px; font-size: 13px; }
}
/* phone landscape: car left, menu+content right */
@media (max-height: 500px) and (orientation: landscape) {
  body.r2c .app { grid-template-columns: minmax(220px, 30vw) minmax(0, 1fr); grid-template-rows: 48px auto minmax(0, 1fr) auto; grid-template-areas: "top top" "car menu" "car content" "dock dock"; }
  body.r2c .car { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
  body.r2c .car-speed { flex-direction: row; align-items: baseline; gap: 6px; padding: 4px 10px 0; }
  body.r2c .car-vis { flex: 1; min-height: 0; height: auto; margin: 4px 8px; }
  body.r2c .car-act { gap: 6px; padding: 4px 8px 8px; }
  body.r2c .ca { min-height: 44px; flex-direction: row; gap: 6px; font-size: 13px; border-radius: 14px; }
  body.r2c .ca .ic { font-size: 24px; }
  body.r2c .hot { padding: 6px 9px; font-size: 12px; } body.r2c .hot .ic { font-size: 16px; }
  body.r2c .menu { flex-direction: row; overflow-x: auto; padding: 6px; border-bottom: 1px solid var(--line); border-right: 0; }
  body.r2c .mi { min-width: 78px; min-height: 52px; flex: none; gap: 2px; font-size: 11px; padding: 4px; }
  body.r2c .mi .ic { font-size: 26px; }
  body.r2c .scr.active { padding: 8px; }
  body.r2c .ctl { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 112px; height: auto; gap: 8px; }
  body.r2c .t-siren { grid-column: auto; grid-row: span 2; }
  body.r2c .tile, body.r2c .t-main { min-height: 0; font-size: 14px; gap: 4px; }
  body.r2c .tile .ic, body.r2c .t-main .ic { font-size: 40px; }
  body.r2c .t-modes .ic { font-size: 24px; } body.r2c .t-modes span { font-size: 11px; } body.r2c .t-modes button { min-height: 0; padding: 4px 2px; }
  body.r2c .dock { padding: 6px 10px; gap: 6px; min-height: 0; overflow-x: auto; }
  body.r2c .dk, body.r2c .dk-modes button { min-height: 60px; min-width: 76px; font-size: 12px; gap: 2px; }
  body.r2c .dk .ic, body.r2c .dk-modes .ic { font-size: 28px; }
}
/* signs: fit columns to available width */
body.r2c .scr-signs.active { grid-template-columns: auto minmax(0, 1fr); }
body.r2c .signs-r { min-width: 0; }
body.r2c .sg-grid { grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 9vw, 170px), 1fr)); overflow-y: auto; align-content: start; }
body.r2c .sg-svg { width: clamp(72px, 6.6vw, 128px); height: clamp(72px, 6.6vw, 128px); }
@media (max-width: 900px) { body.r2c .sg-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
@media (max-width: 900px) {
  body.r2c .scr-radio.active > *, body.r2c .scr-sos.active > *, body.r2c .scr-signs.active > * { flex: none; }
}
@media (max-width: 900px), (max-height: 500px) and (orientation: landscape) {
  body.r2c .semafor { height: auto; align-items: start; padding-bottom: 70px; }
  body.r2c .sf-ans { min-height: 60px; width: auto; flex-direction: row; font-size: 18px; gap: 10px; }
  body.r2c .sf-ans .ic { font-size: 32px; }
  body.r2c .sf-answers { gap: 8px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  body.r2c .scr-signs.active { display: flex; flex-direction: column; }
  body.r2c .scr-signs.active > * { flex: none; }
  body.r2c .semafor { height: auto; padding-bottom: 70px; grid-template-columns: auto minmax(0, 1fr); }
  body.r2c .sf-ans { min-height: 64px; width: auto; flex-direction: row; font-size: 18px; gap: 10px; }
  body.r2c .sf-ans .ic { font-size: 34px; }
}
/* equipment grid adapts to width */
body.r2c .scr-equip .equip { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); grid-auto-rows: minmax(150px, auto); }
body.r2c .eq-card { min-width: 0; }
@media (min-width: 1500px) and (min-height: 861px) { body.r2c .scr-equip .equip { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } }
@media (max-width: 480px) { body.r2c .scr-equip .equip { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.r2c .eq-ic { font-size: 48px !important; } }
@media (max-height: 500px) and (orientation: landscape) { body.r2c .scr-equip .equip { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } body.r2c .eq-ic { font-size: 40px !important; } }
/* radio: stack on mid widths */
@media (min-width: 901px) and (max-width: 1100px) {
  body.r2c .scr-radio.active { display: flex; flex-direction: column; }
  body.r2c .scr-radio.active > * { flex: none; }
}
body.r2c .scr-radio.active > * { min-width: 0; }
/* drive button in "Zastavit" state: clear red stop hand */
body.r2c .t-drive.on, body.r2c .ca-drive.on { background: linear-gradient(180deg, #fff5f5, #ffe1e4) !important; color: #b91c1c !important; box-shadow: inset 0 0 0 2px #ef4444, 0 8px 24px rgba(239, 68, 68, .18) !important; }
body.r2c .t-drive.on .ic, body.r2c .ca-drive.on .ic { color: #b91c1c !important; --ic-d: #ff3b4f; --ic-do: .5; }

/* =====================================================================
   FLAT REDESIGN (body.flat) – Material Symbols Rounded filled, 8px grid
   ===================================================================== */
body.r2c.flat {
  --bg: #eef1f6; --card: #ffffff; --ink: #0f172a; --ink-2: #334155; --muted: #64748b; --line: rgba(15,23,42,.07);
  --pb: #1d4fb8; --pb-2: #2f6bff; --pb-soft: #e7eefc; --red: #e5243b; --red-soft: #fdecee; --stop: #e5243b;
  --r-lg: 32px; --r-md: 24px; --r-sm: 16px;
  --sh-1: 0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.05);
  --sh-2: 0 2px 4px rgba(15,23,42,.05), 0 12px 32px rgba(15,23,42,.08);
  background: var(--bg); color: var(--ink); font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.r2c.flat .ic { width: 1em; height: 1em; }
body.r2c.flat button { -webkit-tap-highlight-color: transparent; }

/* ---- shell ---- */
body.r2c.flat .app { position: absolute; inset: 0; display: grid; grid-template-columns: clamp(400px, 29vw, 560px) minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr) auto; grid-template-areas: "top top" "car content" "tab tab"; }
body.r2c.flat .top { grid-area: top; height: auto; display: flex; align-items: center; gap: 24px; padding: 0 24px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); box-shadow: none; }
body.r2c.flat .tp-unit { font-size: 17px; font-weight: 700; color: var(--pb); gap: 8px; white-space: nowrap; } body.r2c.flat .tp-unit .ic { font-size: 24px; }
body.r2c.flat .gear { font-size: 18px; font-weight: 700; letter-spacing: .12em; }
body.r2c.flat .tp-r { gap: 16px; font-size: 16px; color: var(--ink-2); white-space: nowrap; }
body.r2c.flat .tp-temp .ic { font-size: 20px; }
body.r2c.flat .tp-btn { width: 48px; height: 48px; border-radius: 16px; background: #f1f4f9; color: var(--ink-2); font-size: 24px; }

/* ---- car column ---- */
body.r2c.flat .car { grid-area: car; display: flex; flex-direction: column; gap: 16px; padding: 24px; background: transparent; border: 0; min-height: 0; min-width: 0; }
body.r2c.flat .car-speed { flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; padding: 0; }
body.r2c.flat .car-speed b { font-size: clamp(64px, 8vh, 112px); font-weight: 600; letter-spacing: -.045em; line-height: .9; color: var(--ink); }
body.r2c.flat .car-speed small { font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
body.r2c.flat .car-vis { flex: 1; min-height: 0; margin: 0; border-radius: var(--r-lg); background: linear-gradient(#f4f6f9, #e3e8ef); box-shadow: var(--sh-1), inset 0 0 0 1px var(--line); }
body.r2c.flat .car-act { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; }
body.r2c.flat .ca { min-height: 88px; flex-direction: row; gap: 12px; padding: 0 16px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--sh-1); font-size: 17px; font-weight: 650; color: var(--ink); }
body.r2c.flat .ca .ic { font-size: 36px; color: var(--pb); }
body.r2c.flat .ca.on { background: var(--pb); color: #fff; box-shadow: 0 8px 24px rgba(29,79,184,.32); }
body.r2c.flat .ca.on .ic { color: #fff; }

/* ---- content ---- */
body.r2c.flat .content { grid-area: content; background: transparent; min-width: 0; }
body.r2c.flat .scr.active { padding: 24px 24px 24px 0; }
body.r2c.flat .scr-controls.active { display: block; }
body.r2c.flat .home { height: 100%; display: grid; grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px; }
body.r2c.flat .hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; min-height: 0; }
body.r2c.flat .apps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 24px; min-height: 0; }

/* hero tiles */
body.r2c.flat .hx { position: relative; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; border-radius: var(--r-lg); background: var(--card); color: var(--ink); box-shadow: var(--sh-2); transition: background .2s, box-shadow .25s, transform .12s; overflow: hidden; }
body.r2c.flat .hx > .ic, body.r2c.flat .hx-main > .ic { width: min(46cqw, 44cqh); height: min(46cqw, 44cqh); color: var(--pb); transition: color .2s; }
body.r2c.flat .hx-l { font-size: clamp(16px, min(9cqw, 9cqh), 30px); font-weight: 700; letter-spacing: -.01em; }
body.r2c.flat .hx-siren { padding: 0 0 16px; justify-content: stretch; }
body.r2c.flat .hx-main { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: inherit; border-radius: inherit; }
body.r2c.flat .hx-siren .hx-main > .ic { width: min(42cqw, 34cqh); height: min(42cqw, 34cqh); }
body.r2c.flat .hx-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: calc(100% - 32px); padding: 4px; border-radius: 16px; background: #eef2f8; }
body.r2c.flat .hx-seg button { min-height: clamp(40px, 13cqh, 56px); border-radius: 12px; font-size: clamp(12px, 5.2cqw, 16px); font-weight: 650; color: var(--ink-2); }
body.r2c.flat .hx-seg button.on { background: #fff; color: var(--pb); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.08); }
body.r2c.flat .hx.on, body.r2c.flat .hx.pressed, body.r2c.flat .hx-siren:has(.hx-main.on) { background: linear-gradient(160deg, #2f6bff, #1d4fb8); color: #fff; box-shadow: 0 0 0 4px rgba(47,107,255,.18), 0 16px 40px rgba(29,79,184,.38); }
body.r2c.flat .hx.on > .ic, body.r2c.flat .hx.pressed > .ic, body.r2c.flat .hx-main.on > .ic { color: #fff; }
body.r2c.flat .hx-siren:has(.hx-main.on) .hx-seg { background: rgba(255,255,255,.16); }
body.r2c.flat .hx-siren:has(.hx-main.on) .hx-seg button { color: rgba(255,255,255,.85); }
body.r2c.flat .hx-siren:has(.hx-main.on) .hx-seg button.on { background: #fff; color: var(--pb); }
body.r2c.flat .hx.on, body.r2c.flat .hx-siren:has(.hx-main.on) { animation: flat-pulse 1.6s ease-in-out infinite; }
@keyframes flat-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(47,107,255,.18), 0 16px 40px rgba(29,79,184,.32); } 50% { box-shadow: 0 0 0 10px rgba(47,107,255,.10), 0 16px 48px rgba(29,79,184,.5); } }
/* drive / stop */
body.r2c.flat .hx-drive.on { background: #fff; color: var(--red); animation: flat-pulse-red 1.6s ease-in-out infinite; }
body.r2c.flat .hx-drive.on > .ic { color: var(--red); }
@keyframes flat-pulse-red { 0%,100% { box-shadow: 0 0 0 3px rgba(229,36,59,.55), 0 16px 40px rgba(229,36,59,.18); } 50% { box-shadow: 0 0 0 9px rgba(229,36,59,.16), 0 16px 48px rgba(229,36,59,.3); } }
body.r2c.flat:not(.lights-on) .hx-drive:not(.on) > .ic { color: var(--pb); }

/* secondary app tiles */
body.r2c.flat .app-t { container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 6cqh, 16px); min-height: 0; padding: 8px; border-radius: var(--r-md); background: var(--card); box-shadow: var(--sh-1); color: var(--ink); transition: transform .12s, box-shadow .2s; }
body.r2c.flat .chip { display: flex; align-items: center; justify-content: center; width: min(56cqw, 58cqh); height: min(56cqw, 58cqh); border-radius: 28%; background: linear-gradient(160deg, #3474ff, #1d4fb8); color: #fff; box-shadow: 0 6px 16px rgba(29,79,184,.28); }
body.r2c.flat .chip .ic { width: 64%; height: 64%; }
body.r2c.flat .app-red .chip { background: linear-gradient(160deg, #f04459, #c8102e); box-shadow: 0 6px 16px rgba(200,16,46,.28); }
body.r2c.flat .app-l { font-size: clamp(12px, min(9cqw, 11cqh), 18px); font-weight: 650; color: var(--ink-2); text-align: center; line-height: 1.15; }
body.r2c.flat .app-t.on, body.r2c.flat .app-t.pressed { box-shadow: 0 0 0 3px rgba(47,107,255,.5), var(--sh-2); }
body.r2c.flat .hx:active, body.r2c.flat .app-t:active, body.r2c.flat .ca:active, body.r2c.flat .mi:active { transform: scale(.97); }

/* ---- tab bar ---- */
body.r2c.flat .menu.tabbar { grid-area: tab; display: flex; flex-direction: row; justify-content: center; gap: 8px; padding: 8px 24px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); border: 0; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
body.r2c.flat .tabbar::-webkit-scrollbar { display: none; }
body.r2c.flat .tabbar .mi { flex: 0 1 168px; min-width: 88px; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 20px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 650; box-shadow: none; }
body.r2c.flat .tabbar .mi .ic { font-size: 34px; color: inherit; }
body.r2c.flat .tabbar .mi.on { background: var(--pb-soft); color: var(--pb); box-shadow: none; }

/* ---- shared panels restyled to the flat language ---- */
body.r2c.flat .sh { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
body.r2c.flat .snd, body.r2c.flat .eq-card, body.r2c.flat .em-card, body.r2c.flat .sos-r, body.r2c.flat .signs-l, body.r2c.flat .signs-r, body.r2c.flat .radio-main, body.r2c.flat .radio-side { border-radius: var(--r-md); box-shadow: var(--sh-1); }
body.r2c.flat .snd > .ic, body.r2c.flat .snd .snd-ic { box-sizing: border-box; width: 64px !important; height: 64px !important; font-size: 64px !important; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, #3474ff, #1d4fb8); color: #fff !important; }
body.r2c.flat .snd.on > .ic { background: #fff; color: var(--pb) !important; }
body.r2c.flat .eq-ic { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 24px; background: linear-gradient(160deg, #3474ff, #1d4fb8); color: #fff !important; font-size: 48px !important; }
body.r2c.flat .eq-ic .ic { color: #fff; }

/* ---- 1101–1500 wide or short desktop ---- */
@media (max-height: 860px) and (min-width: 901px) {
  body.r2c.flat .app { grid-template-rows: 64px minmax(0, 1fr) auto; grid-template-columns: clamp(320px, 30vw, 460px) minmax(0, 1fr); }
  body.r2c.flat .car { padding: 16px; gap: 16px; }
  body.r2c.flat .scr.active { padding: 16px 16px 16px 0; }
  body.r2c.flat .home, body.r2c.flat .hero, body.r2c.flat .apps { gap: 16px; }
  body.r2c.flat .ca { min-height: 64px; font-size: 15px; } body.r2c.flat .ca .ic { font-size: 28px; }
  body.r2c.flat .tabbar .mi { min-height: 64px; font-size: 13px; gap: 4px; } body.r2c.flat .tabbar .mi .ic { font-size: 28px; }
}
/* mid widths (1024): hero 2×2, apps 4 per row, content scrolls */
@media (max-width: 1100px) and (min-width: 901px) {
  body.r2c.flat .scr-controls.active { overflow-y: auto; }
  body.r2c.flat .home { height: auto; grid-template-rows: auto auto; }
  body.r2c.flat .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.r2c.flat .hx { aspect-ratio: 1.45; }
  body.r2c.flat .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
  body.r2c.flat .app-t { aspect-ratio: 1.05; }
}
/* phones portrait / narrow */
@media (max-width: 900px) {
  body.r2c.flat .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px auto minmax(0, 1fr) auto; grid-template-areas: "top" "car" "content" "tab"; }
  body.r2c.flat .top { padding: 0 16px; gap: 12px; }
  body.r2c.flat .tp-lb { display: none; }
  body.r2c.flat .car { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 16px; padding: 12px 16px 8px; }
  body.r2c.flat .car-speed { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
  body.r2c.flat .car-speed b { font-size: 56px; }
  body.r2c.flat .car-vis { height: 132px; flex: none; border-radius: 24px; }
  body.r2c.flat .car-act { grid-column: 1 / -1; gap: 8px; }
  body.r2c.flat .ca { min-height: 56px; font-size: 15px; border-radius: 18px; } body.r2c.flat .ca .ic { font-size: 26px; }
  body.r2c.flat .scr.active { padding: 8px 16px 16px; }
  body.r2c.flat .scr-controls.active { overflow-y: auto; }
  body.r2c.flat .home { height: auto; grid-template-rows: auto auto; gap: 16px; }
  body.r2c.flat .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.r2c.flat .hx { aspect-ratio: 1; border-radius: 28px; }
  body.r2c.flat .hx-siren { aspect-ratio: .82; padding-bottom: 12px; }
  body.r2c.flat .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
  body.r2c.flat .app-t { aspect-ratio: .95; border-radius: 22px; }
  body.r2c.flat .menu.tabbar { justify-content: flex-start; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  body.r2c.flat .tabbar .mi { flex: 1 0 72px; min-width: 72px; min-height: 64px; font-size: 11px; gap: 4px; border-radius: 16px; padding: 6px 2px; }
  body.r2c.flat .tabbar .mi .ic { font-size: 28px; }
}
@media (max-width: 480px) {
  body.r2c.flat .tabbar .mi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
/* phone landscape */
@media (max-height: 500px) and (orientation: landscape) {
  body.r2c.flat .app { grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) auto; grid-template-areas: "top top" "car content" "tab tab"; }
  body.r2c.flat .top { padding: 0 12px; }
  body.r2c.flat .tp-btn { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
  body.r2c.flat .car { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
  body.r2c.flat .car-speed { flex-direction: row; align-items: baseline; gap: 6px; }
  body.r2c.flat .car-speed b { font-size: 30px; }
  body.r2c.flat .car-vis { flex: 1; height: auto; border-radius: 18px; }
  body.r2c.flat .car-act { gap: 6px; }
  body.r2c.flat .ca { min-height: 44px; font-size: 13px; gap: 6px; border-radius: 14px; padding: 0 8px; } body.r2c.flat .ca .ic { font-size: 22px; }
  body.r2c.flat .scr.active { padding: 8px 8px 8px 0; }
  body.r2c.flat .scr-controls.active { overflow-y: auto; }
  body.r2c.flat .home { height: auto; grid-template-rows: auto auto; gap: 8px; }
  body.r2c.flat .hero { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  body.r2c.flat .hx { aspect-ratio: .9; border-radius: 22px; }
  body.r2c.flat .hx-siren { padding-bottom: 8px; }
  body.r2c.flat .apps { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
  body.r2c.flat .app-t { aspect-ratio: .9; border-radius: 18px; padding: 4px; }
  body.r2c.flat .menu.tabbar { padding: 2px 8px; justify-content: center; gap: 4px; }
  body.r2c.flat .tabbar .mi { flex: 0 1 110px; min-width: 64px; min-height: 48px; font-size: 10.5px; gap: 2px; padding: 4px; border-radius: 12px; }
  body.r2c.flat .tabbar .mi .ic { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { body.r2c.flat .hx.on, body.r2c.flat .hx-siren:has(.hx-main.on), body.r2c.flat .hx-drive.on { animation: none; } }
body.reduce-motion.flat .hx.on, body.reduce-motion.flat .hx-siren:has(.hx-main.on), body.reduce-motion.flat .hx-drive.on { animation: none !important; }

/* ===== Media panels (Megafon, Kamera) ===== */
.pd-media { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15,23,42,.42); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; font-family: Inter, system-ui, sans-serif; color: #0f172a; }
.pd-media.show { opacity: 1; }
.pd-media button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pd-media .ic { width: 1em; height: 1em; flex: none; }
.pm-card { position: relative; width: min(960px, 100%); max-height: 100%; overflow: auto; background: #fff; border-radius: 32px; padding: 32px; box-shadow: 0 32px 80px rgba(15,23,42,.3); }
.pm-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.pm-chip { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#3474ff,#1d4fb8); color: #fff; font-size: 40px; box-shadow: 0 6px 16px rgba(29,79,184,.28); }
.pm-tt { flex: 1; min-width: 0; } .pm-tt h3 { margin: 0; font-size: 28px; font-weight: 750; letter-spacing: -.02em; } .pm-tt p { margin: 4px 0 0; color: #64748b; font-size: 16px; font-weight: 500; }
.pm-x { width: 56px; height: 56px; border-radius: 18px; background: #f1f4f9 !important; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #334155 !important; }
.pm-msg { margin-top: 16px; padding: 16px 20px; border-radius: 20px; background: #fdecee; color: #7f1d1d; display: flex; flex-direction: column; gap: 4px; }
.pm-msg b { font-size: 18px; } .pm-msg span { font-size: 15px; color: #9f1239; line-height: 1.4; }

.mg-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.mg-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0; }
.mg-rings { position: absolute; top: 16px; left: 50%; width: 280px; height: 280px; transform: translateX(-50%); pointer-events: none; }
.mg-rings i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(47,107,255,.35); transform: scale(calc(1 + var(--lvl, 0) * .28)); opacity: calc(.15 + var(--lvl, 0) * .85); transition: transform .08s linear, opacity .08s linear; }
.mg-rings i:nth-child(2) { inset: -22px; border-color: rgba(47,107,255,.22); transform: scale(calc(1 + var(--lvl, 0) * .38)); }
.mg-rings i:nth-child(3) { inset: -44px; border-color: rgba(47,107,255,.12); transform: scale(calc(1 + var(--lvl, 0) * .5)); }
.pd-meg.rec .mg-rings i { border-color: rgba(229,36,59,.45); }
.mg-hold { position: relative; width: 280px; height: 280px; border-radius: 50% !important; background: linear-gradient(160deg,#3474ff,#1d4fb8) !important; color: #fff !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 20px; font-weight: 700; box-shadow: 0 16px 40px rgba(29,79,184,.4), inset 0 -6px 0 rgba(0,0,0,.12); transition: transform .12s, background .2s; touch-action: none; user-select: none; }
.mg-hold .ic { font-size: 120px; }
.mg-hold.pressed { transform: scale(.96); }
.pd-meg.rec .mg-hold { background: linear-gradient(160deg,#f04459,#c8102e) !important; box-shadow: 0 16px 40px rgba(200,16,46,.4), 0 0 0 10px rgba(229,36,59,.15); }
.pd-meg.playing .mg-hold { background: linear-gradient(160deg,#22c55e,#15803d) !important; }
.mg-time { font-size: 18px; font-weight: 600; color: #64748b; font-variant-numeric: tabular-nums; } .mg-time b { color: #0f172a; font-size: 24px; }
.mg-bars { display: flex; align-items: center; gap: 4px; height: 48px; }
.mg-bars i { width: 8px; height: 48px; border-radius: 4px; background: linear-gradient(#3474ff,#1d4fb8); transform: scaleY(.08); transform-origin: center; transition: transform .06s linear; }
.pd-meg.rec .mg-bars i { background: linear-gradient(#f04459,#c8102e); }
.mg-side { display: flex; flex-direction: column; gap: 12px; }
.mg-lab { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; margin-top: 8px; }
.mg-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-chips button { min-height: 96px; border-radius: 20px; background: #f1f4f9 !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 650; }
.mg-chips button .ic { font-size: 36px; color: #1d4fb8; }
.mg-chips button.on { background: #1d4fb8 !important; color: #fff !important; box-shadow: 0 8px 20px rgba(29,79,184,.3); } .mg-chips button.on .ic { color: #fff; }
.mg-tog { min-height: 64px; border-radius: 18px; background: #f1f4f9 !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px 0 20px !important; font-size: 16px; font-weight: 600; text-align: left; }
.mg-tog i { flex: none; width: 52px; height: 32px; border-radius: 16px; background: #cbd5e1; position: relative; transition: background .2s; }
.mg-tog i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.mg-tog.on i { background: #1d4fb8; } .mg-tog.on i::after { transform: translateX(20px); }
.mg-warn { margin: 0; padding: 12px 16px; border-radius: 16px; background: #fff7e6; color: #92400e; font-size: 14px; font-weight: 600; }
.mg-replay { min-height: 64px; border-radius: 18px; background: #e7eefc !important; color: #1d4fb8 !important; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 700; }
.mg-replay .ic { font-size: 28px; } .mg-replay:disabled { opacity: .45; }
.mg-ann { background: #f1f4f9 !important; color: #334155 !important; }

/* kamera */
.pd-cam { padding: 16px; background: rgba(2,6,23,.75); }
.cam-card { width: 100%; height: 100%; max-width: none; padding: 16px; display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: 16px; background: #0b1220; color: #e2e8f0; border-radius: 32px; overflow: hidden; }
.pd-cam.has-ev .cam-card { grid-template-columns: minmax(0, 1fr) 260px; }
.cam-view { position: relative; min-height: 0; border-radius: 24px; overflow: hidden; background: #000; }
.cam-view video, .cam-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-view canvas { image-rendering: auto; }
.pd-cam.mirror .cam-view video, .pd-cam.mirror .cam-view canvas { transform: scaleX(-1); }
.cam-ov { position: absolute; inset: 0; pointer-events: none; font: 600 clamp(13px, 1.4vw, 20px)/1.2 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); letter-spacing: .06em;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.cam-corners i { position: absolute; width: 56px; height: 56px; border: 4px solid rgba(255,255,255,.85); }
.cam-corners i:nth-child(1) { left: 24px; top: 24px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.cam-corners i:nth-child(2) { right: 24px; top: 24px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.cam-corners i:nth-child(3) { left: 24px; bottom: 24px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.cam-corners i:nth-child(4) { right: 24px; bottom: 24px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.cam-tl, .cam-tr, .cam-bl, .cam-br { position: absolute; padding: 6px 10px; }
.cam-tl { left: 40px; top: 40px; display: flex; gap: 16px; align-items: center; } .cam-tr { right: 40px; top: 44px; }
.cam-bl { left: 40px; bottom: 40px; } .cam-br { right: 40px; bottom: 40px; }
.cam-rec { display: inline-flex; align-items: center; gap: 8px; color: #ff4d5e; font-weight: 800; }
.cam-rec i { width: 14px; height: 14px; border-radius: 50%; background: #ff2d43; box-shadow: 0 0 10px #ff2d43; animation: cam-blink 1s steps(1) infinite; }
@keyframes cam-blink { 50% { opacity: 0; } }
.cam-cross { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); background: linear-gradient(#fff,#fff) center/2px 100% no-repeat, linear-gradient(#fff,#fff) center/100% 2px no-repeat; opacity: .5; }
.pd-cam[data-filter=night] .cam-ov { color: #b6ff9e; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: cam-flash .45s ease-out; } @keyframes cam-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.cam-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #cbd5e1; font-size: 16px; }
.cam-wait b { font-size: 22px; color: #fff; } .cam-wait[hidden] { display: none; }
.cam-spin { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(255,255,255,.2); border-top-color: #fff; animation: cam-spin 1s linear infinite; margin-bottom: 8px; } @keyframes cam-spin { to { transform: rotate(360deg); } }
.cam-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 90%); margin: 0; background: #fff; }
.cam-msg .mg-replay { margin-top: 12px; }
.cam-bar { display: flex; align-items: center; gap: 16px; grid-column: 1; }
.cam-chips { display: flex; gap: 8px; flex: 1; min-width: 0; }
.cam-chips button { min-height: 64px; padding: 0 20px !important; border-radius: 20px; background: rgba(255,255,255,.08) !important; color: #e2e8f0 !important; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; white-space: nowrap; }
.cam-chips button .ic { font-size: 28px; } .cam-chips button.on { background: #fff !important; color: #0f172a !important; }
.cam-shot { min-width: 200px; min-height: 80px; border-radius: 40px; background: linear-gradient(160deg,#f04459,#c8102e) !important; color: #fff !important; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 22px; font-weight: 750; box-shadow: 0 10px 28px rgba(200,16,46,.4); }
.cam-shot .ic { font-size: 40px; } .cam-shot:disabled { opacity: .4; } .cam-shot:active { transform: scale(.97); }
.cam-right { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }
.cam-sw { width: 64px; height: 64px; border-radius: 20px; background: rgba(255,255,255,.08) !important; color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.cam-sw[hidden] { display: none; }
.pd-cam .pm-x { width: 64px; height: 64px; background: rgba(255,255,255,.1) !important; color: #fff !important; }
.cam-ev { display: none; grid-column: 2; grid-row: 1 / span 2; flex-direction: column; gap: 12px; overflow-y: auto; }
.pd-cam.has-ev .cam-ev { display: flex; }
.ev-card { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; color: #0f172a; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.ev-card.new { animation: ev-in .5s cubic-bezier(.2,.9,.3,1.2); } @keyframes ev-in { from { transform: translateY(-16px) rotate(-3deg) scale(.9); opacity: 0; } }
.ev-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.ev-card figcaption { position: relative; padding: 10px 56px 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.ev-card b { font-size: 16px; letter-spacing: .04em; color: #c8102e; } .ev-card span { font-size: 12px; color: #64748b; font-variant-numeric: tabular-nums; }
.ev-card a { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 12px; background: #f1f4f9; color: #1d4fb8; display: flex; align-items: center; justify-content: center; font-size: 24px; }
@media (max-width: 760px), (max-height: 500px) {
  .pd-media { padding: 8px; }
  .pm-card { padding: 20px; border-radius: 24px; }
  .mg-body { grid-template-columns: 1fr; gap: 16px; }
  .mg-hold, .mg-rings { width: 200px; height: 200px; } .mg-hold .ic { font-size: 84px; }
  .pm-tt h3 { font-size: 22px; } .pm-tt p { font-size: 14px; }
  .cam-card { padding: 8px; gap: 8px; border-radius: 20px; }
  .pd-cam.has-ev .cam-card { grid-template-columns: minmax(0, 1fr); }
  .pd-cam.has-ev .cam-ev { grid-column: 1; grid-row: auto; flex-direction: row; overflow-x: auto; max-height: 120px; }
  .ev-card { flex: 0 0 160px; } .ev-card img { aspect-ratio: 16/8; }
  .cam-bar { flex-wrap: wrap; gap: 8px; }
  .cam-chips { order: 2; flex-basis: 100%; overflow-x: auto; } .cam-chips button { min-height: 48px; padding: 0 14px !important; font-size: 14px; }
  .cam-shot { min-width: 140px; min-height: 60px; font-size: 18px; } .cam-shot .ic { font-size: 30px; }
  .cam-tl, .cam-bl { left: 20px; } .cam-tr, .cam-br { right: 20px; } .cam-tl, .cam-tr { top: 22px; } .cam-bl, .cam-br { bottom: 22px; }
  .cam-corners i { width: 32px; height: 32px; border-width: 3px; }
  .cam-corners i:nth-child(1), .cam-corners i:nth-child(3) { left: 10px; } .cam-corners i:nth-child(2), .cam-corners i:nth-child(4) { right: 10px; }
  .cam-corners i:nth-child(1), .cam-corners i:nth-child(2) { top: 10px; } .cam-corners i:nth-child(3), .cam-corners i:nth-child(4) { bottom: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) { .mg-body { grid-template-columns: auto 1fr; } .mg-chips button { min-height: 64px; } }
@media (prefers-reduced-motion: reduce) { .cam-rec i, .ev-card.new { animation: none; } .mg-rings i { transition: none; } }
.pm-msg[hidden], .mg-warn[hidden], .cam-msg[hidden] { display: none !important; }
.pm-x .ic { font-size: 32px; }
body.r2c.flat .hx > .ic { width: min(52cqw, 46cqh); height: min(52cqw, 46cqh); }
body.r2c.flat .hx-siren .hx-main > .ic { width: min(46cqw, 36cqh); height: min(46cqw, 36cqh); }
body.r2c.flat .hx-seg button { color: #334155 !important; font-weight: 700; background: transparent; }
body.r2c.flat .hx-seg button.on { background: #fff !important; color: var(--pb) !important; }
body.r2c.flat .hx-siren:has(.hx-main.on) .hx-seg button { color: rgba(255,255,255,.9) !important; }
body.r2c.flat .hx-siren:has(.hx-main.on) .hx-seg button.on { color: var(--pb) !important; }
@media (max-width: 900px) {
  body.r2c.flat .hx-siren { grid-column: 1 / -1; aspect-ratio: auto; height: auto; container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 12px; padding: 16px; }
  body.r2c.flat .hx-siren .hx-main { flex-direction: column; min-height: 132px; }
  body.r2c.flat .hx-siren .hx-main > .ic { width: 80px; height: 80px; }
  body.r2c.flat .hx-siren .hx-l { font-size: 22px; }
  body.r2c.flat .hx-siren .hx-seg { grid-template-columns: 1fr; width: 100%; gap: 4px; }
  body.r2c.flat .hx-siren .hx-seg button { min-height: 48px; font-size: 16px; }
  body.r2c.flat .hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.r2c.flat .hx:not(.hx-siren) { aspect-ratio: .86; border-radius: 24px; }
  body.r2c.flat .hx:not(.hx-siren) .hx-l { font-size: 16px; }
  body.r2c.flat .tp-r { gap: 8px; }
  body.r2c.flat .tp-btn { width: 44px; height: 44px; font-size: 22px; border-radius: 14px; }
  body.r2c.flat .tabbar .mi { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: 10.5px; }
  body.r2c.flat .tabbar .mi span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body.r2c.flat .ca span { white-space: nowrap; }
}
@media (max-width: 480px) { body.r2c.flat .tp-unit { font-size: 15px; } body.r2c.flat .top { gap: 8px; padding: 0 12px; } body.r2c.flat .gear { font-size: 15px; letter-spacing: .06em; } }
@media (max-height: 500px) and (orientation: landscape) {
  body.r2c.flat .hero { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
  body.r2c.flat .hx-siren { grid-column: auto; display: flex; padding: 0 0 8px; container-type: size; aspect-ratio: auto; height: auto; }
  body.r2c.flat .hx:not(.hx-siren) { aspect-ratio: .9; }
  body.r2c.flat .hx-siren .hx-main { min-height: 0; }
  body.r2c.flat .hx-siren .hx-main > .ic { width: min(40cqw, 34cqh); height: min(40cqw, 34cqh); }
  body.r2c.flat .hx-siren .hx-seg { grid-template-columns: repeat(3, 1fr); width: calc(100% - 16px); }
  body.r2c.flat .hx-siren .hx-seg button { min-height: 32px; font-size: 12px; }
  body.r2c.flat .tabbar .mi { flex: 0 1 110px; }
}
body.r2c.flat .snd .snd-ic, body.r2c.flat .snd > .ic { box-sizing: border-box; display: flex !important; align-items: center; justify-content: center; width: clamp(48px, 3.4vw, 64px) !important; height: clamp(48px, 3.4vw, 64px) !important; padding: 0 !important; font-size: clamp(32px, 2.4vw, 44px) !important; border-radius: 30%; background: linear-gradient(160deg, #3474ff, #1d4fb8) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(29,79,184,.25); }
body.r2c.flat .snd .snd-ic .ic { width: 1em !important; height: 1em !important; font-size: inherit !important; color: #fff !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
body.r2c.flat .snd { background: #fff; border-radius: 20px; box-shadow: var(--sh-1); }
body.r2c.flat .snd.on { background: #fff; box-shadow: 0 0 0 3px var(--pb), var(--sh-2); }
body.r2c.flat .snd-sec h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* ===== v7 polish: parent settings (flat), phone layouts, tap targets ===== */
body.r2c .pd-modal { background: rgba(15,23,42,.45); }
body.r2c .pd-modal-card { color: #11161f; box-shadow: 0 32px 80px rgba(15,23,42,.3); overscroll-behavior: contain; max-height: calc(100dvh - 32px); }
body.r2c .pd-modal .pm-head .ic { color: var(--pb, #1d4fb8); }
body.r2c .pd-modal .pm-x .ic { color: #334155; }
body.r2c .pd-modal .pm-row { border-bottom-color: #eef1f5; }
body.r2c .pd-modal .pm-vol input { accent-color: var(--pb, #1d4fb8); }
body.r2c .pd-modal .pm-seg { background: #f1f4f9; }
body.r2c .pd-modal .pm-seg button { color: #334155; font-weight: 650; }
body.r2c .pd-modal .pm-seg .on { background: var(--pb, #1d4fb8); color: #fff; box-shadow: 0 4px 12px rgba(29,79,184,.25); }
body.r2c .pd-modal .pm-btn { background: #eef3ff; color: var(--pb, #1d4fb8); font-weight: 700; }
body.r2c .pd-modal .pm-btn .ic { color: inherit; }
body.r2c .pd-modal .pm-note { color: #64748b; }
body.r2c .pd-modal .pm-about { color: #334155; }
body.r2c .pd-modal .pm-about h3 { color: #11161f; }

@media (max-width: 480px) {
  /* tap targets ≥ 48 px */
  body.r2c.flat .top .tp-btn, body.r2c.flat .top button { min-width: 48px; min-height: 48px; }
  body.r2c.flat .hx-seg button { min-height: 48px; }
  /* tab bar: readable labels, short label for SOS */
  body.r2c.flat .tabbar .mi { font-size: 11px; }
  body.r2c.flat .tabbar .mi span[data-s] { font-size: 0; }
  body.r2c.flat .tabbar .mi span[data-s]::after { content: attr(data-s); font-size: 11px; }
  /* radio: incoming event stacks, button full width */
  body.r2c .mdt-inc { flex-wrap: wrap; }
  body.r2c .mdt-inc .rm-icon { font-size: 40px; }
  body.r2c .mdt-inc .rm-meta { flex: 1 1 160px; }
  body.r2c .mdt-inc .rm-title { font-size: 18px; line-height: 1.2; }
  body.r2c .mdt-inc .rm-go { flex: 1 1 100%; min-width: 0; min-height: 64px; }
  body.r2c .mdt-head { gap: 6px 12px; }
  body.r2c .mdt-st { flex-basis: 100%; text-align: left; white-space: normal; }
  /* speech bubble at the top, over the car, so it never covers the controls */
  body.r2c .pd-bubble { left: 50%; width: calc(100vw - 24px); max-width: none; top: calc(8px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -140%); padding: 10px 12px; }
  body.r2c .pd-bubble.show { transform: translate(-50%, 0); }
  body.r2c .pd-bubble-av { width: 48px; height: 48px; font-size: 32px; }
  body.r2c .pd-bubble-txt { font-size: 16px; }
  body.r2c .pd-bubble-btn { min-height: 56px; min-width: 0; font-size: 18px; padding: 0 14px; border-radius: 16px; box-shadow: none; }
  body.r2c .pd-bubble-btn .ic { font-size: 32px; }
  /* settings */
  body.r2c .pd-modal { align-items: flex-end; }
  body.r2c .pd-modal-card { width: 100%; border-radius: 24px 24px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 92dvh; }
  body.r2c .pd-modal .pm-head h2 { font-size: 24px; }
  body.r2c .pd-modal .pm-row { font-size: 16px; gap: 8px 12px; }
  body.r2c .pd-modal .pm-row > span { min-width: 0; flex: 1 1 100%; }
  body.r2c .pd-modal .pm-seg button { font-size: 15px; padding: 8px 14px; }
  body.r2c .pd-modal .pm-vol input { min-width: 0; flex: 1 1 140px; }
  body.r2c .pd-modal .pm-btns .pm-btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 900px) {
  /* camera on phones: stacked overlay text, wrapping filter chips, compact evidence strip */
  .cam-tl { flex-wrap: wrap; gap: 4px 12px; max-width: calc(100% - 48px); }
  .cam-tr { top: auto !important; bottom: 52px; right: 20px; }
  .cam-ov { font-size: 12px; }
  .cam-chips { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible !important; }
  .cam-chips button { justify-content: center; padding: 0 6px !important; font-size: 13px !important; gap: 6px; min-height: 48px; }
  .cam-chips button .ic { font-size: 22px; width: 22px; height: 22px; flex: none; }
  .cam-chips button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pd-cam.has-ev .cam-ev { max-height: none; }
  .ev-card { flex: 0 0 240px; display: flex; align-items: stretch; }
  .ev-card img { width: 110px; height: 72px; aspect-ratio: auto; flex: none; }
  .ev-card figcaption { padding: 8px 52px 8px 10px; justify-content: center; min-width: 0; }
  .ev-card a { width: 48px; height: 48px; right: 4px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.r2c.flat .top .tp-btn, body.r2c.flat .top button { min-width: 48px; min-height: 48px; }
  body.r2c.flat .tabbar .mi { font-size: 11px; }
  body.r2c .pd-modal-card { max-height: calc(100dvh - 16px); padding: 14px 20px; }
  body.r2c .pd-bubble { bottom: 12px; }
}
@media (max-width: 380px) {
  body.r2c.flat .tp-temp { display: none !important; }
  body.r2c.flat .top { gap: 6px; padding: 0 8px; }
  body.r2c.flat .tp-r { gap: 6px; }
  body.r2c.flat .tp-unit { font-size: 14px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.r2c.flat .car-act { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.r2c.flat .ca { min-height: 48px; min-width: 0; padding: 0 6px; gap: 4px; font-size: 12px; overflow: hidden; }
  body.r2c.flat .ca span { white-space: normal !important; line-height: 1.1; text-align: left; overflow-wrap: anywhere; }
  body.r2c.flat .ca .ic { flex: none; }
  body.r2c.flat .hx-siren .hx-seg button { min-height: 48px; font-size: 13px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* camera on a phone held sideways: video left at full height, controls in a right column */
  .pd-cam .cam-card, .pd-cam.has-ev .cam-card { grid-template-columns: minmax(0, 1fr) 232px; grid-template-rows: auto minmax(0, 1fr); padding: 8px; gap: 8px; border-radius: 20px; }
  .pd-cam .cam-view { grid-column: 1; grid-row: 1 / span 2; }
  .pd-cam .cam-bar { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; flex-wrap: nowrap; }
  .pd-cam .cam-shot { grid-column: 1; grid-row: 1; min-height: 56px; }
  .pd-cam .cam-right { grid-column: 2; grid-row: 1; display: flex; gap: 8px; }
  .pd-cam .cam-right .pm-x, .pd-cam .cam-sw { width: 56px; height: 56px; }
  .pd-cam .cam-chips { grid-column: 1 / -1; grid-row: 2; order: 0; grid-template-columns: 1fr !important; gap: 6px; }
  .pd-cam .cam-chips button { justify-content: flex-start; padding: 0 12px !important; }
  .pd-cam.has-ev .cam-ev { grid-column: 2; grid-row: 2; flex-direction: column; overflow-y: auto; overflow-x: hidden; max-height: none; }
  .pd-cam .ev-card { flex: none; width: 100%; }
  .pd-cam .cam-tr { bottom: 44px; }
}
@media (max-width: 380px) {
  body.r2c.flat .tabbar .mi span[data-xs] { font-size: 0; }
  body.r2c.flat .tabbar .mi span[data-xs]::after { content: attr(data-xs); font-size: 11px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.r2c.flat .ca span { overflow-wrap: normal !important; hyphens: manual; }
  body.r2c.flat .ca .ic { font-size: 20px !important; width: 20px; height: 20px; }
}
/* mission checklist card in the light flat theme (was still dark) */
body.r2c .r2-inc { background: rgba(15,23,42,.45); }
body.r2c .r2-inc .inc-card { background: #fff; color: #11161f; box-shadow: 0 32px 80px rgba(15,23,42,.3); overscroll-behavior: contain; max-height: calc(100dvh - 32px); }
body.r2c .r2-inc .inc-ic { color: var(--pb, #1d4fb8); }
body.r2c .r2-inc .inc-tt small { color: var(--pb, #1d4fb8); }
body.r2c .r2-inc .inc-flow span { background: #f1f4f9; color: #64748b; }
body.r2c .r2-inc .inc-flow span.on { background: #dcfce7; color: #15803d; }
body.r2c .r2-inc .inc-flow span.cur { background: #e6eeff; color: var(--pb, #1d4fb8); }
body.r2c .r2-inc .inc-x { background: #f1f4f9; color: #334155; width: 48px; height: 48px; }
body.r2c .r2-inc .inc-task { color: #475569; }
body.r2c .r2-inc .inc-step { background: #f8fafc; box-shadow: inset 0 0 0 1px #e8edf3; color: #64748b; }
body.r2c .r2-inc .inc-step.cur { background: #eef3ff; color: #11161f; box-shadow: inset 0 0 0 2px var(--pb, #1d4fb8); }
body.r2c .r2-inc .inc-step.ok { background: #f0fdf4; color: #15803d; box-shadow: inset 0 0 0 1px #86efac; }
body.r2c .r2-inc .is-n { background: #e2e8f0; color: #334155; }
body.r2c .r2-inc .inc-step.cur .is-n { background: var(--pb, #1d4fb8); color: #fff; }
body.r2c .r2-inc .inc-step .ic { color: inherit; }
body.r2c .r2-inc .inc-step.cur .ic { color: var(--pb, #1d4fb8); }
body.r2c .r2-inc .inc-done { background: #f0fdf4; }
body.r2c .r2-inc .inc-done small { color: #475569; }
body.r2c .r2-inc .inc-back { background: linear-gradient(180deg, #22a35a, #16803f); color: #fff; }
@media (max-width: 480px) {
  body.r2c .r2-inc { align-items: flex-end; }
  body.r2c .r2-inc .inc-card { width: 100%; border-radius: 24px 24px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); max-height: 88dvh; }
  body.r2c .r2-inc .inc-head { position: relative; padding-right: 56px; }
  body.r2c .r2-inc .inc-x { position: absolute; right: 0; top: 0; }
  body.r2c .r2-inc .inc-step { grid-template-columns: 32px 32px 1fr 28px; gap: 10px; min-height: 64px; padding: 10px 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.r2c:has(.r2-inc.show) .pd-bubble { display: none; } /* the checklist card already shows the same instruction */
}
/*pd-rev*/:root{--pd-rev:"4e5ac28862"}