:root {
    --blue: #31b8ff;
    --blue-2: #0a74ff;
    --cyan: #6ce8ff;
    --ink: #050911;
    --panel: rgba(8, 15, 27, .94);
    --panel-2: rgba(13, 24, 40, .92);
    --line: rgba(87, 190, 255, .24);
    --line-strong: rgba(86, 201, 255, .58);
    --text: #eef8ff;
    --muted: #86a4b7;
    --good: #61f2bd;
    --warn: #ffc66d;
    --danger: #ff5b68;
    --mono: "Consolas", "Lucida Console", monospace;
    --ui: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: transparent;
    font-family: var(--ui);
    user-select: none;
}
button, input, select { font: inherit; }
button { color: inherit; }

#app {
    position: fixed;
    inset: 0;
    display: none;
    pointer-events: none;
}
#app.visible { display: block; }

/* Artwork is 1080x1438 with a real alpha channel, and the device occupies
   574x1359 of it at (247,23). The shell is sized to the DEVICE, not the file:
   the crop below maps that bounding box exactly onto the shell so every screen
   overlay percentage below is a percentage of the radio itself.

   The previous art was RGB with NO alpha, so its studio backdrop was opaque
   pixels baked into the image. No amount of rectangular cropping removes a
   backdrop that surrounds the device on all four sides -- in game it rendered
   as a grey panel floating behind the radio. Transparency is what fixes that,
   not CSS. Keep any replacement art RGBA with the device cut out. */
#radio-shell {
    --sh: min(96vh, calc(1035px * var(--rs-scale, 1)));
    --u: calc(var(--sh) / 100);
    position: fixed;
    left: 66vw;
    top: 2vh;
    height: var(--sh);
    aspect-ratio: 1080 / 1618;
    pointer-events: auto;
    z-index: 20;
    transform-origin: top left;
    filter: drop-shadow(0 2.1vh 1.8vh rgba(0,0,0,.74));
    animation: radio-in .24s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes radio-in {
    from { opacity: 0; transform: translateY(1.2vh) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
#radio-art-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
#radio-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}
.window-label {
    position: absolute;
    z-index: 50;
    top: 2.4%;
    left: 50%;
    transform: translateX(-50%);
    padding: .18rem .45rem;
    border: 1px solid rgba(71,181,255,.52);
    border-radius: 999px;
    background: rgba(3,12,22,.8);
    color: #bceaff;
    font: 800 max(8px, calc(var(--u) * .95))/1 var(--mono);
    letter-spacing: .16em;
    box-shadow: 0 0 12px rgba(0,153,255,.2);
}

/* Fixed full-size EMS display viewport. Every frame asset is normalized around
   the same 370x640 transparent glass opening. The live UI uses the same small
   safety inset on every shell, so frame changes never move or resize it. */
#screen-bezel {
    position: absolute;
    left: 33.6111%;
    top: 38.1953%;
    width: 32.7778%;
    height: 38.5661%;
    z-index: 15;
    padding: .45%;
    border-radius: 4.5%;
    overflow: hidden;
}
#radio-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    color: var(--text);
    border: 1px solid rgba(57,181,255,.44);
    border-radius: 4%;
    background:
        radial-gradient(circle at 20% -20%, rgba(32,149,255,.22), transparent 43%),
        linear-gradient(180deg, rgba(5,11,20,.97), rgba(3,8,15,.985));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        inset 0 0 24px rgba(0,0,0,.52),
        0 0 9px rgba(0,166,255,.24);
    font-size: max(7px, calc(var(--u) * .78));
}
.screen-glass {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background: linear-gradient(126deg, rgba(255,255,255,.055), transparent 25%, transparent 70%, rgba(61,178,255,.025));
}
.scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 21;
    pointer-events: none;
    opacity: .22;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    animation: scan 6s linear infinite;
}
@keyframes scan { from { top: -2%; } to { top: 102%; } }

.screen-header, .frequency-strip, .screen-tabs, #screen-content, .screen-footer { position: relative; z-index: 2; }
.screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3%;
    padding: 3.2% 4.1% 2.4%;
    border-bottom: 1px solid var(--line);
}
.screen-brand { display: flex; align-items: center; gap: 5%; min-width: 0; }
.brand-mark {
    display: grid;
    place-items: center;
    width: calc(var(--u) * 2.75);
    aspect-ratio: 1;
    flex: 0 0 auto;
    border: 1px solid rgba(71,190,255,.48);
    border-radius: 28%;
    color: #dff7ff;
    background: linear-gradient(135deg, rgba(28,137,255,.3), rgba(12,27,44,.8));
    font: 900 max(7px, calc(var(--u) * 1.0))/1 var(--mono);
    box-shadow: inset 0 0 10px rgba(31,156,255,.16);
}
.screen-brand strong {
    display: block;
    font: 900 max(8px, calc(var(--u) * 1.05))/1 var(--mono);
    letter-spacing: .16em;
}
.screen-brand small {
    display: block;
    max-width: calc(var(--u) * 11.5);
    margin-top: .12rem;
    color: var(--muted);
    font: 700 max(6px, calc(var(--u) * .66))/1 var(--mono);
    letter-spacing: .08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.screen-status { display: grid; gap: .08rem; text-align: right; flex: 0 0 auto; }
.screen-status span {
    color: #91cbe8;
    font: 800 max(6px, calc(var(--u) * .7))/1 var(--mono);
    letter-spacing: .04em;
}
#screen-battery.low { color: var(--danger); animation: blink 1.1s steps(1) infinite; }

.frequency-strip {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 3%;
    padding: 3.0% 4.1%;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(9,24,39,.8), rgba(3,11,20,.25));
}
.frequency-block { display: grid; gap: .1rem; }
.frequency-label { color: #6d95ab; font: 800 max(5px, calc(var(--u) * .55))/1 var(--mono); letter-spacing: .14em; }
#screen-frequency {
    color: #8ee8ff;
    font: 900 max(12px, calc(var(--u) * 1.8))/1 var(--mono);
    letter-spacing: .03em;
    text-shadow: 0 0 9px rgba(34,175,255,.38);
}
.frequency-copy { min-width: 0; }
.frequency-copy strong {
    display: block;
    color: #f3fbff;
    font: 900 max(7px, calc(var(--u) * .88))/1.05 var(--mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.frequency-copy small {
    display: block;
    margin-top: .14rem;
    color: #7ea0b4;
    font: 700 max(5.5px, calc(var(--u) * .62))/1 var(--mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#screen-talk {
    padding: .28rem .34rem;
    border: 1px solid rgba(91,149,178,.34);
    border-radius: 999px;
    color: #8cacbe;
    background: rgba(7,20,31,.68);
    font: 900 max(5.5px, calc(var(--u) * .62))/1 var(--mono);
    white-space: nowrap;
}
#screen-talk.talking {
    color: #04151d;
    border-color: #7eeeff;
    background: #6de7ff;
    box-shadow: 0 0 11px rgba(62,205,255,.45);
    animation: blink .55s steps(1) infinite;
}
@keyframes blink { 50% { opacity: .4; } }

.screen-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2%;
    padding: 2.1% 3.3% 1.9%;
    border-bottom: 1px solid rgba(73,174,230,.13);
}
.tab {
    min-width: 0;
    border: 0;
    border-radius: 20%;
    padding: .18rem .06rem .14rem;
    cursor: pointer;
    color: #6f93a8;
    background: transparent;
    font: 800 max(5px, calc(var(--u) * .56))/1 var(--mono);
}
.tab b { display: block; margin-bottom: .12rem; color: #93b8cd; font-size: 1.18em; }
.tab span { display: block; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.tab:hover { color: #dff7ff; background: rgba(36,142,210,.1); }
.tab.active { color: #dff8ff; background: rgba(30,135,222,.18); box-shadow: inset 0 -1px 0 #48c5ff; }
.tab.active b { color: #69d7ff; text-shadow: 0 0 8px rgba(55,192,255,.42); }

#screen-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 2.1% 3.4% 2.4%;
    scrollbar-width: thin;
    scrollbar-color: rgba(68,179,235,.55) transparent;
}
#screen-content::-webkit-scrollbar { width: 3px; }
#screen-content::-webkit-scrollbar-thumb { background: rgba(68,179,235,.55); border-radius: 999px; }

.screen-footer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 3%;
    min-height: 7.5%;
    padding: 1.5% 3.4%;
    border-top: 1px solid var(--line);
    background: rgba(2,7,13,.86);
}
#last-sync, #keypad-entry { color: #62869b; font: 700 max(5px, calc(var(--u) * .56))/1 var(--mono); white-space: nowrap; }
#keypad-entry { color: #80dfff; }
#distress-button {
    border: 1px solid rgba(255,79,94,.48);
    border-radius: .28rem;
    padding: .24rem .38rem;
    cursor: pointer;
    color: #ff8791;
    background: rgba(88,13,22,.34);
    font: 900 max(5px, calc(var(--u) * .58))/1 var(--mono);
}
#distress-button.active { color: white; background: #d92f42; box-shadow: 0 0 10px rgba(255,64,83,.4); animation: blink .65s steps(1) infinite; }

/* Shared cards */
.empty {
    display: grid;
    place-items: center;
    min-height: 100%;
    padding: 1rem .4rem;
    text-align: center;
    color: #628399;
    font: 800 max(6px, calc(var(--u) * .68))/1.45 var(--mono);
    letter-spacing: .06em;
}
.card, .member, .channel-row, .distress-card, .unit-detail, .setting, .jammer-panel {
    border: 1px solid rgba(83,174,226,.16);
    background: linear-gradient(145deg, rgba(14,27,43,.78), rgba(5,12,22,.82));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
.home-stack { display: grid; gap: .36rem; }
.hero-card { position: relative; overflow: hidden; padding: .5rem; border-radius: .38rem; }
.hero-card::after { content:""; position:absolute; inset:auto -20% -55% 15%; height:90%; background:radial-gradient(circle, rgba(18,151,255,.2), transparent 65%); pointer-events:none; }
.hero-kicker { color:#6c94aa; font:800 max(5px, calc(var(--u)*.56))/1 var(--mono); letter-spacing:.12em; }
.hero-line { display:flex; align-items:flex-end; justify-content:space-between; gap:.4rem; margin-top:.22rem; }
.hero-frequency { color:#98ecff; font:900 max(14px, calc(var(--u)*2.05))/1 var(--mono); text-shadow:0 0 10px rgba(35,173,255,.35); }
.hero-copy { min-width:0; flex:1; }
.hero-copy strong { display:block; color:#fff; font:900 max(7px, calc(var(--u)*.82))/1.05 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero-copy small { display:block; margin-top:.12rem; color:#7e9eb1; font:700 max(5.5px, calc(var(--u)*.58))/1 var(--mono); }
.signal-pill { padding:.2rem .28rem; border-radius:999px; color:var(--good); background:rgba(48,201,150,.1); border:1px solid rgba(70,230,175,.22); font:800 max(5px, calc(var(--u)*.56))/1 var(--mono); }
.signal-pill.bad { color:var(--danger); background:rgba(255,61,79,.1); border-color:rgba(255,83,98,.28); }
.home-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.18rem; }
.stat { min-width:0; padding:.32rem .18rem; border:1px solid rgba(74,157,205,.12); border-radius:.28rem; background:rgba(5,14,24,.58); text-align:center; }
.stat b { display:block; color:#dff7ff; font:900 max(7px, calc(var(--u)*.78))/1 var(--mono); }
.stat small { display:block; margin-top:.12rem; color:#63859a; font:700 max(4.5px, calc(var(--u)*.5))/1 var(--mono); }
.section-label { display:flex; align-items:center; justify-content:space-between; gap:.3rem; margin:.12rem 0 .22rem; color:#7093a8; font:800 max(5px, calc(var(--u)*.55))/1 var(--mono); letter-spacing:.09em; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:.22rem; }
.quick-channel { padding:.34rem .36rem; min-width:0; border:1px solid rgba(72,177,235,.18); border-radius:.28rem; color:#bdd9e8; background:rgba(9,23,36,.64); cursor:pointer; text-align:left; }
.quick-channel b { color:#7fdfff; font:900 max(7px, calc(var(--u)*.76))/1 var(--mono); }
.quick-channel span { display:block; margin-top:.1rem; font:800 max(5px, calc(var(--u)*.55))/1 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quick-channel:hover { border-color:rgba(81,202,255,.48); background:rgba(14,39,60,.72); }
.alert-strip { padding:.34rem .4rem; border:1px solid rgba(255,74,89,.32); border-radius:.3rem; color:#ffacb3; background:rgba(104,11,25,.26); font:800 max(5.5px, calc(var(--u)*.6))/1.2 var(--mono); }

.direct-tune { display:grid; grid-template-columns:1fr auto; gap:.25rem; margin-bottom:.32rem; }
.direct-tune input { min-width:0; border:1px solid rgba(75,176,229,.22); border-radius:.28rem; outline:0; padding:.34rem .38rem; color:#dff9ff; background:rgba(5,13,22,.9); font:800 max(6px, calc(var(--u)*.66))/1 var(--mono); }
.direct-tune button, .join-button, .star-button, .mini-button, .gps-button, .setting-buttons button, .jammer-actions button, .detail-action {
    border:1px solid rgba(70,180,238,.28); border-radius:.25rem; background:rgba(14,38,58,.7); color:#aee7ff; cursor:pointer; font:800 max(5px, calc(var(--u)*.56))/1 var(--mono);
}
.direct-tune button { padding:.34rem .42rem; }

.channel-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.3rem; margin-bottom:.22rem; padding:.34rem .38rem; border-radius:.3rem; cursor:pointer; }
.channel-row:hover, .channel-row.live { border-color:rgba(79,202,255,.4); background:linear-gradient(145deg, rgba(19,49,72,.82), rgba(6,18,30,.86)); }
.channel-row.locked { opacity:.43; cursor:not-allowed; }
.channel-row .freq { color:#7fe4ff; font:900 max(8px, calc(var(--u)*.88))/1 var(--mono); }
.channel-row strong { display:block; color:#eaf9ff; font:900 max(6px, calc(var(--u)*.68))/1 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.channel-row small { display:block; margin-top:.1rem; color:#63869b; font:700 max(4.5px, calc(var(--u)*.49))/1 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.channel-actions { display:flex; gap:.16rem; }
.join-button, .star-button { padding:.25rem .28rem; }
.star-button { min-width:1.6rem; }
.star-button.active { color:#ffd36d; border-color:rgba(255,206,99,.34); }

.member { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.14rem .3rem; margin-bottom:.22rem; padding:.35rem .38rem; border-radius:.3rem; cursor:pointer; }
.member:hover, .member.selected { border-color:rgba(74,196,255,.4); background:rgba(16,43,64,.75); }
.member.talking { box-shadow:inset 2px 0 0 var(--cyan); }
.member.distress { border-color:rgba(255,73,91,.4); box-shadow:inset 2px 0 0 var(--danger); }
.member.offline { opacity:.52; }
.member-main { min-width:0; }
.member-main strong { display:block; color:#edfaff; font:900 max(6.5px, calc(var(--u)*.7))/1 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-main small { display:block; margin-top:.1rem; color:#718fa2; font:700 max(4.7px, calc(var(--u)*.5))/1 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-side { display:grid; justify-items:end; gap:.1rem; }
.member-side small { color:#63869a; font:700 max(4.5px, calc(var(--u)*.48))/1 var(--mono); }
.condition { padding:.16rem .23rem; border-radius:999px; border:1px solid rgba(104,167,201,.2); color:#b9d7e7; font:800 max(4.6px, calc(var(--u)*.5))/1 var(--mono); white-space:nowrap; }
.condition.STABLE { color:var(--good); border-color:rgba(74,220,168,.3); }
.condition.INJURED { color:var(--warn); border-color:rgba(255,193,90,.3); }
.condition.CRITICAL, .condition.UNCONSCIOUS, .condition.DECEASED { color:var(--danger); border-color:rgba(255,80,95,.34); }
.location { grid-column:1 / -1; min-width:0; color:#7898aa; font:700 max(4.8px, calc(var(--u)*.52))/1.1 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mute-button { position:absolute; right:.32rem; bottom:.28rem; padding:.2rem .26rem; }

.unit-detail { padding:.45rem; border-radius:.35rem; }
.detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.35rem; }
.detail-head strong { display:block; color:#effaff; font:900 max(7px, calc(var(--u)*.8))/1 var(--mono); }
.detail-head small { display:block; margin-top:.12rem; color:#6f91a5; font:700 max(5px, calc(var(--u)*.53))/1 var(--mono); }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.2rem; margin-top:.36rem; }
.detail-metric { padding:.28rem; border:1px solid rgba(75,164,214,.13); border-radius:.25rem; background:rgba(2,9,16,.42); }
.detail-metric b { display:block; color:#cfefff; font:900 max(6px, calc(var(--u)*.67))/1 var(--mono); }
.detail-metric small { display:block; margin-top:.1rem; color:#5e8094; font:700 max(4.4px, calc(var(--u)*.46))/1 var(--mono); }
.detail-actions { display:flex; gap:.22rem; margin-top:.34rem; }
.detail-action { flex:1; padding:.3rem .24rem; }

.distress-card { margin-bottom:.22rem; padding:.4rem; border-radius:.3rem; border-color:rgba(255,82,99,.28); }
.distress-title { display:flex; justify-content:space-between; gap:.3rem; }
.distress-title strong { color:#fff0f2; font:900 max(6.5px, calc(var(--u)*.7))/1 var(--mono); }
.distress-title span { color:#ff8390; font:900 max(6px, calc(var(--u)*.65))/1 var(--mono); }
.distress-card small { display:block; margin-top:.14rem; color:#b17780; font:700 max(4.7px, calc(var(--u)*.49))/1 var(--mono); }
.distress-location { margin-top:.24rem; color:#f3dfe3; font:800 max(5px, calc(var(--u)*.55))/1.15 var(--mono); }
.gps-button { margin-top:.28rem; padding:.26rem .34rem; }

.settings-grid { display:grid; grid-template-columns:1fr; gap:.24rem; }
.setting { display:grid; gap:.2rem; padding:.34rem .38rem; border-radius:.28rem; }
.setting span, .jammer-heading { color:#8cb2c6; font:800 max(5px, calc(var(--u)*.54))/1 var(--mono); }
.setting input[type="text"], .setting input:not([type]), .setting select { width:100%; min-width:0; border:1px solid rgba(75,171,225,.18); border-radius:.24rem; outline:0; padding:.28rem .3rem; color:#e2f6ff; background:#07111d; font:700 max(5px, calc(var(--u)*.56))/1 var(--mono); }
.setting input[type="range"] { width:100%; accent-color:#2faeff; }
.setting.toggle { grid-template-columns:1fr auto; align-items:center; }
.setting.toggle input { accent-color:#2fb8ff; }
.setting-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:.2rem; }
.setting-buttons button, .jammer-actions button { padding:.3rem .24rem; }
.jammer-panel { padding:.36rem; border-radius:.3rem; }
.jammer-heading { display:flex; justify-content:space-between; gap:.3rem; }
.jammer-copy { display:block; margin:.2rem 0; color:#66889c; font:700 max(4.6px, calc(var(--u)*.48))/1.25 var(--mono); }
.jammer-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:.18rem; }
.jammer-actions button:disabled { opacity:.35; cursor:not-allowed; }

#radio-screen.signal-jammed { box-shadow:inset 0 0 24px rgba(255,48,66,.1), 0 0 9px rgba(255,48,66,.22); }
#radio-screen.signal-jammed .scanline { background:linear-gradient(90deg,transparent,var(--danger),transparent); }
#radio-screen.distress-alert { animation: distress-pulse .45s ease 0s 4 alternate; }
@keyframes distress-pulse { to { box-shadow:inset 0 0 28px rgba(255,42,62,.24),0 0 14px rgba(255,42,62,.42); } }
#radio-screen.powered-off #screen-content, #radio-screen.powered-off .screen-tabs { opacity:.45; filter:saturate(.45); }

/* Hardware hotspots aligned to the three lower buttons of the chosen radio. */
.hotspot { position:absolute; z-index:32; border:0; background:transparent; cursor:pointer; }
.hw-volume { left:29.8%; top:65.6%; width:19.1%; height:4.9%; }
.hw-power { left:48.1%; top:65.2%; width:15.0%; height:5.6%; border-radius:35%; }
.hw-sos { left:64.3%; top:65.6%; width:18.7%; height:4.9%; }
.close {
    right:13.5%; top:26.0%; width:calc(var(--u)*2.8); height:calc(var(--u)*2.8);
    display:grid; place-items:center; border:1px solid rgba(93,198,255,.35); border-radius:50%;
    color:#d9f7ff; background:rgba(4,15,25,.78); font:700 max(10px, calc(var(--u)*1.05))/1 Arial;
    opacity:.72;
}
.close:hover { opacity:1; box-shadow:0 0 10px rgba(51,190,255,.3); }
#gameplay-hint {
    position:absolute;
    left:50%; bottom:1.2%; transform:translateX(-50%);
    z-index:31; width:85%; text-align:center;
    color:rgba(149,201,226,.55); font:700 max(6px, calc(var(--u)*.62))/1 var(--mono); letter-spacing:.05em;
    pointer-events:none;
}

/* Compact optional roster overlay. */
#roster-overlay {
    position:fixed;
    display:none;
    width:min(14rem, 18vw);
    transform-origin:top left;
    padding:.4rem;
    border:1px solid rgba(72,186,240,.22);
    border-radius:.55rem;
    color:#dff7ff;
    background:rgba(4,11,18,.82);
    box-shadow:0 .55rem 1.6rem rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(8px);
    z-index:10;
    pointer-events:none;
    font-family:var(--mono);
}
#roster-overlay.visible { display:block; }
#roster-overlay header { display:flex; justify-content:space-between; gap:.4rem; padding:.12rem .12rem .34rem; border-bottom:1px solid rgba(78,184,235,.16); font-size:.68rem; }
#roster-overlay header span { color:#63bce8; }
.overlay-member { display:flex; justify-content:space-between; gap:.45rem; padding:.28rem .18rem; border-bottom:1px solid rgba(71,156,196,.08); font-size:.62rem; }
.overlay-member span { color:#7799ac; }
.overlay-member.talking b, .overlay-member.talking span { color:#70e6ff; }
.overlay-member.distress b, .overlay-member.distress span { color:#ff7582; }
.overlay-empty { padding:.45rem .18rem; color:#647f90; font-size:.62rem; }

@media (max-height: 800px) {
    /* 94vh, not 98vh. With top:2vh the old value totalled exactly 100vh, so on
       a 768px or 720px display the radio ended flush against the bottom edge
       with zero margin -- it fits arithmetically but reads as cut off. */
    #radio-shell { --sh: min(94vh, calc(790px * var(--rs-scale, 1))); }
}

/* EMS frame selector and display controls. The frame PNGs are supplied
   EMS references with only the surrounding studio background alpha-cleaned. */
#radio-art { object-fit: fill; filter: none !important; transition: opacity .2s ease; }
#radio-screen { --ui-accent: #6d7cff; --font-zoom: 1; border-color: var(--ui-accent); }
#radio-screen .screen-header, #radio-screen .frequency-strip, #radio-screen .screen-footer, #screen-content { zoom: var(--font-zoom); }
#radio-screen[data-font="clinical"] { --ui: "Arial Narrow", "Segoe UI", Arial, sans-serif; }
#radio-screen[data-font="tactical"] { --ui: "Consolas", "Lucida Console", monospace; }
#radio-screen[data-font="signal"] { --ui: "Trebuchet MS", "Arial Narrow", sans-serif; }
#radio-screen[data-font="dispatch"] { --ui: Impact, "Arial Narrow", sans-serif; }
#radio-screen[data-font="modern"] { --ui: "Segoe UI", Arial, sans-serif; }
#radio-screen[data-background="midnight"] { background: radial-gradient(circle at 20% -20%, rgba(73,86,190,.2), transparent 43%), linear-gradient(180deg, #0b1020, #030611); }
#radio-screen[data-background="blueprint"] { background: radial-gradient(circle at 50% 0%, rgba(49,124,220,.2), transparent 42%), linear-gradient(180deg, #0b1b32, #030913); }
#radio-screen[data-background="slate"] { background: radial-gradient(circle at 80% 0%, rgba(126,143,176,.16), transparent 42%), linear-gradient(180deg, #18202a, #080c13); }
#radio-screen[data-background="command"] { background: radial-gradient(circle at 50% 0%, rgba(220,63,79,.18), transparent 42%), linear-gradient(180deg, #28151a, #0d080b); }
#radio-screen[data-animation="clean"] .scanline { display: none; }
#radio-screen[data-animation="pulse"] .screen-header { animation: ems-status-pulse 2.8s ease-in-out infinite; }
@keyframes ems-status-pulse { 50% { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ui-accent) 38%, transparent); } }
.visual-panel { display: grid; gap: .25rem; padding: .38rem; border: 1px solid color-mix(in srgb, var(--ui-accent) 26%, transparent); border-radius: .34rem; background: linear-gradient(145deg, rgba(21,27,45,.86), rgba(6,9,20,.9)); }
.settings-heading { display: flex; justify-content: space-between; gap: .3rem; color: #b5c2e0; font: 900 max(5px, calc(var(--u) * .55))/1 var(--mono); letter-spacing: .08em; }
.settings-heading span { color: var(--ui-accent); }
.frame-grid { display: grid; grid-template-columns: 1fr; gap: .2rem; }
.frame-choice { display: grid; grid-template-columns: 1.9rem minmax(0,1fr); align-items: center; gap: .14rem .28rem; min-width: 0; padding: .25rem; border: 1px solid rgba(112,140,181,.18); border-radius: .28rem; color: #c3cde0; background: rgba(6,12,26,.72); cursor: pointer; text-align: left; }
.frame-choice.active { border-color: var(--choice-accent); background: color-mix(in srgb, var(--choice-accent) 12%, rgba(6,12,26,.72)); box-shadow: inset 2px 0 0 var(--choice-accent); }
.frame-choice:active, .palette-choice:active { transform: translateY(1px); }
.frame-choice b { min-width: 0; overflow: hidden; color: #f1f5ff; font: 900 max(5px, calc(var(--u) * .52))/1 var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.frame-choice small { min-width: 0; overflow: hidden; color: #8290aa; font: 700 max(4px, calc(var(--u) * .42))/1 var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.frame-preview { grid-row: 1 / span 2; display: grid; place-items: center; width: 1.7rem; height: 2.35rem; overflow: hidden; border: 2px solid var(--choice-accent); border-radius: .48rem; background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(0,0,0,.5)); box-shadow: 0 0 9px color-mix(in srgb, var(--choice-accent) 25%, transparent); }
.frame-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: .3rem; }
.color-row { display: grid; grid-template-columns: 1fr; gap: .25rem; align-items: end; }
.color-input, .palette-wrap { display: grid; gap: .18rem; min-width: 0; color: #9baecf; font: 800 max(5px, calc(var(--u) * .5))/1 var(--mono); }
.color-input input[type="color"] { width: 100%; height: 1.45rem; padding: .12rem; border: 1px solid rgba(75,130,225,.25); border-radius: .24rem; background: #07101d; cursor: pointer; }
.palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .14rem; }
.palette-choice { display: grid; justify-items: center; gap: .1rem; min-width: 0; padding: .12rem .08rem; border: 1px solid rgba(112,140,181,.16); border-radius: .24rem; color: #8192ac; background: rgba(5,10,20,.72); cursor: pointer; }
.palette-choice.active { border-color: var(--choice-accent); color: #f0f4ff; }
.palette-choice i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--choice-accent); box-shadow: 0 0 7px color-mix(in srgb, var(--choice-accent) 30%, transparent); }
.palette-choice b { overflow: hidden; max-width: 100%; font: 800 max(3.5px, calc(var(--u) * .38))/1 var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.setting select:focus-visible, .setting input:focus-visible, .frame-choice:focus-visible, .palette-choice:focus-visible, button:focus-visible { outline: 1px solid var(--ui-accent); outline-offset: 1px; }
@media (max-width: 420px), (max-height: 650px) { .frame-grid { grid-template-columns: 1fr; } .color-row { grid-template-columns: 1fr; } }