@font-face { font-family:Game; src:url('neodgm.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
/* Dusk. Colours derive from the generated ui-theme.css contract;
   the connected player's colour supplies the single selection accent. */
:root {
 color-scheme:dark; --ink:rgb(var(--ui-black)); --white:rgb(var(--ui-text)); --muted:rgb(var(--ui-muted));
 --dim:color-mix(in srgb,rgb(var(--ui-muted)) 75%,var(--ink)); --panel:rgb(var(--ui-black) / var(--ui-shop-opacity));
 --glass:rgb(var(--ui-black) / var(--ui-panel-opacity)); --row:color-mix(in srgb,rgb(var(--ui-text)) 5%,var(--ink));
 --line:color-mix(in srgb,rgb(var(--ui-border)) 45%,transparent); --line2:rgb(var(--ui-border));
 --raised:color-mix(in srgb,rgb(var(--ui-text)) 10%,var(--ink)); --hover:color-mix(in srgb,rgb(var(--ui-text)) 17%,var(--ink));
 --selected:color-mix(in srgb,var(--accent) 18%,var(--ink)); --disabled:color-mix(in srgb,rgb(var(--ui-text)) 16%,var(--ink));
 --accent-hover:color-mix(in srgb,var(--accent) 82%,rgb(var(--ui-text))); --accent-pressed:color-mix(in srgb,var(--accent) 82%,var(--ink));
 --num:Game,sans-serif; --body-size:14px;
 --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px;
 --tap-size:44px; --panel-inline:16px; --layout-gap:20px; --settings-gap:12px;
 --cut:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
}

:root { --safe-left:max(12px,env(safe-area-inset-left)); --safe-right:max(12px,env(safe-area-inset-right)); --safe-top:max(8px,env(safe-area-inset-top)); --safe-bottom:max(8px,env(safe-area-inset-bottom)); --view-height:100dvh; --view-width:100dvw; --view-top:0px; --content-height:calc(var(--view-height) - var(--safe-top) - var(--safe-bottom)); }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--ink); overscroll-behavior:none; font:var(--body-size)/1.5 Game,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; color:var(--white); -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; }
output,#progress,#relay-room-code,.relay-room-row>span:last-child { font-family:var(--num); }
button,input,select,summary { touch-action:manipulation; }
button,summary { font:inherit; font-weight:700; color:var(--white); background:var(--glass); border:1px solid var(--line2); border-radius:0; clip-path:var(--cut); cursor:pointer; min-height:44px; padding:6px 12px; transition:background .1s,border-color .1s,color .1s; }
button:hover,summary:hover { background:var(--hover); border-color:var(--white); }button:active { background:var(--raised); border-color:var(--accent); }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }button:focus-visible { box-shadow:inset 0 0 0 2px var(--accent); }
button:disabled { color:var(--dim); background:var(--disabled); border-color:var(--line); cursor:default; }
.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }.primary:active { background:var(--accent-pressed); }.primary:disabled { color:var(--dim); background:var(--disabled); border-color:var(--line); }
.teal { color:var(--white); background:var(--raised); }.secondary { background:var(--glass); }.close { width:44px; padding:0; flex:none; }.compact { font-size:13px; padding:6px 10px; }
h1,h2,h3,h4,p { margin:0; }h2 { font-size:20px; line-height:1.25; font-weight:700; }h3 { font-size:17px; line-height:1.3; }h4 { font-size:14px; line-height:1.4; }
.panel { background:var(--panel); padding:12px 16px; border:1px solid var(--line); }
.panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; flex:none; margin-bottom:8px; }
input:not([type=range]),select { font:inherit; font-size:16px; color:var(--white); background:var(--raised); border:1px solid var(--line2); border-radius:0; min-height:44px; padding:6px 9px; min-width:0; }select option { background:var(--ink); }input::placeholder { color:var(--dim); }input[readonly] { color:var(--muted); }
input[aria-invalid=true] { border-color:rgb(var(--ui-danger)); }.field-error,.is-error { color:rgb(var(--ui-danger))!important; }.field-error { font-size:13px; line-height:1.4; }
dialog { position:fixed; inset:auto; margin:0; left:calc((var(--safe-left) + var(--view-width) - var(--safe-right)) / 2); top:calc(var(--view-top) + (var(--safe-top) + var(--view-height) - var(--safe-bottom)) / 2); transform:translate(-50%,-50%); width:min(520px,calc(var(--view-width) - var(--safe-left) - var(--safe-right))); max-height:var(--content-height); color:var(--white); text-align:left; }
dialog::backdrop { background:rgb(var(--ui-black) / .85); }dialog p { font-size:14px; line-height:1.55; margin:10px 0; }dialog button { font-size:14px; }.confirm-actions { display:flex; gap:8px; justify-content:flex-end; }.confirm-actions button { flex:1; }
/* Browser interface adapts to the visible area; the game's landscape render surface is unchanged. */
#stage { position:fixed; top:0; left:0; width:max(100dvw,100dvh); height:min(100dvw,100dvh); }#unity-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; background:var(--ink); touch-action:none; outline:none; }#stage.lobby #unity-canvas { filter:blur(3px); }
#menu { position:absolute; top:var(--view-top); left:0; width:var(--view-width); height:var(--view-height); display:flex; align-items:center; justify-content:center; padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }#stage.lobby #menu { background:linear-gradient(90deg,rgb(var(--ui-black) / .9),rgb(var(--ui-black) / .4) 75%); }
#lobby-panel { position:relative; width:min(960px,100%); height:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,280px); align-items:center; gap:24px; padding:12px 0 56px; }
h1 { font-size:clamp(28px,5.2vh,40px); line-height:1.2; font-weight:900; }h1 span { display:block; }h1::after { content:''; display:block; width:48px; height:3px; margin-top:12px; background:var(--accent); }
.main-buttons { display:flex; flex-direction:column; gap:8px; }.main-buttons button { font-size:18px; min-height:48px; text-align:left; padding:8px 16px; }.main-buttons #settings { font-size:15px; min-height:44px; }#multiplayer small { color:var(--muted); font-size:.7em; }
#multiplayer-status { position:absolute; bottom:54px; left:0; font-size:13px; color:var(--muted); }#lobby-panel>footer { position:absolute; bottom:0; right:0; left:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; }#lobby-panel>footer button { border-color:var(--line); color:var(--muted); background:var(--glass); }#tutorial-toggle[aria-pressed=true] { color:var(--accent); border-color:var(--accent); }
.utility-menu { position:relative; }.utility-menu summary { display:grid; place-items:center; list-style:none; font-size:13px; color:var(--muted); border-color:var(--line); }.utility-menu summary::-webkit-details-marker { display:none; }.utility-actions { position:absolute; bottom:52px; right:0; z-index:3; width:210px; max-height:calc(var(--content-height) - 58px); overflow:auto; padding:8px; background:var(--panel); border:1px solid var(--line2); display:flex; flex-direction:column; gap:6px; }.utility-actions button { text-align:left; }
/* Fixed close/return actions; only settings contents may scroll on an unusually short viewport. */
#settings-panel { display:flex; flex-direction:column; width:min(840px,100%); max-height:100%; overflow:hidden; }
#settings-panel>.panel-header { gap:12px; }.settings-tabs { display:flex; flex:1; justify-content:center; gap:4px; max-width:380px; margin-left:auto; }.settings-tabs button { flex:1; padding:6px 10px; font-size:14px; clip-path:none; border:0; border-bottom:2px solid var(--line); background:transparent; color:var(--muted); }.settings-tabs button[aria-pressed=true] { color:var(--accent); border-bottom-color:var(--accent); }
.settings-body { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.camera-pages { display:flex; gap:6px; margin:0 0 6px; justify-content:flex-end; }.camera-pages button { min-height:44px; font-size:13px; background:transparent; border-color:var(--line); }.camera-pages button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--selected); }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.settings-grid[data-camera-view=position] { grid-template-columns:repeat(3,minmax(0,1fr)); }.slider-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:center; gap:2px 8px; padding:4px 8px; border-top:1px solid var(--line); background:transparent; }.slider-row label { font-size:14px; line-height:1.3; }.slider-row output { color:var(--accent); font-size:18px; line-height:1.2; white-space:nowrap; }.camera-mode { display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 7px; align-items:center; padding:4px 8px; border-top-color:var(--accent); }.camera-mode select { width:100%; }.camera-mode p { grid-column:1/-1; margin:0; color:var(--muted); font-size:13px; line-height:1.4; }
input[type=range] { width:100%; height:44px; margin:0; grid-column:1/-1; accent-color:var(--accent); touch-action:none; cursor:ew-resize; }.slider-row input:disabled { opacity:.4; cursor:default; }.range-hints { grid-column:1/-1; display:flex; justify-content:space-between; color:var(--dim); font-size:12px; line-height:1.3; }
.settings-status { display:flex; justify-content:space-between; gap:10px; flex:none; padding-top:5px; }#save-status,.balance-version { font-size:12px; line-height:1.4; color:var(--muted); margin:0; }.balance-version { text-align:right; }
.settings-grid[data-camera-view=shooting] { grid-template-columns:minmax(0,1fr); }.shooting-zoom-setting { grid-template-columns:minmax(0,1fr) 76px; }.shooting-zoom-setting button { min-width:76px; min-height:44px; clip-path:none; }.shooting-zoom-setting button[aria-checked=true] { color:var(--accent); border-color:var(--accent); background:var(--selected); }
.settings-actions { display:flex; gap:8px; flex:none; padding-top:7px; }.settings-actions button { font-size:14px; }.settings-actions .primary { flex:1; }#reset { font-size:12px; }
.control-settings { display:flex; align-items:end; gap:10px; padding-top:6px; }.control-settings label,.display-settings label { display:grid; flex:1; gap:5px; min-width:0; font-size:14px; }.control-settings select,.display-settings select { width:100%; }.control-settings button { white-space:nowrap; font-size:14px; }.display-settings { padding-top:6px; }.display-settings p,#controls-description { margin:10px 0; font-size:14px; line-height:1.5; color:var(--muted); }
#open-settings { position:absolute; right:var(--safe-right); top:calc(var(--safe-top) + 36px); width:44px; height:44px; min-height:44px; padding:0; border:0; clip-path:none; background:none; display:grid; place-items:center; color:var(--muted); }
#open-settings::before { content:""; position:absolute; inset:6px; border:1px solid var(--line); border-radius:50%; background:var(--glass); }
#open-settings svg { position:relative; pointer-events:none; }
#open-settings:hover,#open-settings:active { background:none; color:var(--white); }
#open-settings:focus-visible { outline:2px solid var(--accent); outline-offset:0; border-radius:50%; }
#controls-editor { position:absolute; inset:0; z-index:3; touch-action:none; background:rgb(var(--ui-black) / .18); }#control-safe-area { position:absolute; inset:0; pointer-events:none; visibility:hidden; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }#control-handles { position:absolute; inset:0; }.control-handle { position:absolute; transform:translate(-50%,-50%); padding:0; min-height:0; clip-path:none; border:2px dashed var(--line2); background:rgb(var(--ui-black) / var(--ui-control-opacity)); font-size:clamp(12px,2.7vh,16px); touch-action:none; cursor:grab; }.control-handle[data-control=joystick],.control-handle[data-control=fire],.control-handle[data-control=dash],.control-handle[data-control=basic],.control-handle[data-control=skill],.control-handle[data-control=medkit],.control-handle[data-control=grenade],.control-handle[data-control=reload],.control-handle[data-control=swap] { border-radius:50%; }.control-handle.selected { border-color:var(--accent); background:rgb(var(--accent-rgb) / .2); z-index:1; }
.control-toolbar { position:absolute; left:50%; top:var(--safe-top); transform:translateX(-50%); width:max-content; max-width:calc(100% - var(--safe-left) - var(--safe-right)); padding:6px 10px; background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--accent); display:flex; align-items:center; gap:12px; }.control-toolbar h2 { font-size:16px; }.control-toolbar p { font-size:12px; color:var(--muted); margin:2px 0 0; max-width:250px; }.control-actions { display:flex; gap:6px; }.control-actions button { font-size:13px; white-space:nowrap; }
/* Fullscreen role panels have compact choices and a bounded portrait, rather than stretched disabled cards. */
.role-lobby { width:min(940px,calc(var(--view-width) - var(--safe-left) - var(--safe-right))); height:min(420px,var(--content-height)); overflow:hidden; }.role-lobby[open] { display:flex; flex-direction:column; }.role-lobby .panel-header p { margin:3px 0 0; font-size:13px; color:var(--muted); }.single-role-layout { display:grid; grid-template-columns:minmax(166px,.9fr) minmax(0,1.8fr); grid-template-rows:minmax(0,1fr); gap:14px; flex:1; min-height:0; }.single-role-layout>.role-choices { grid-column:1; grid-row:1; width:calc(100% - 76px); align-self:center; }.single-character { grid-column:1; grid-row:1; justify-self:end; width:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; gap:5px; }.single-character img { width:100%; max-height:160px; object-fit:contain; min-height:0; }.single-character .role-model-note { font-size:12px; }#single-role-description { grid-column:2; grid-row:1; min-height:0; }
.role-choices { display:flex; flex-direction:column; gap:5px; min-height:0; overflow:auto; scrollbar-width:thin; }.role-choice { display:flex; align-items:center; justify-content:flex-start; gap:5px; flex:none; min-width:0; min-height:44px; padding:6px; font-size:14px; text-align:left; }.role-choice svg { width:18px; height:18px; flex:none; }.role-choice small { display:none; }.role-choice:disabled { font-size:13px; background:var(--row); }.role-choice[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--selected); box-shadow:inset 0 -2px 0 var(--accent); }.role-empty { font-size:13px; color:var(--muted); text-align:center; }.role-model-note { font-size:12px; line-height:1.4; color:var(--muted); text-align:center; }
.role-description { display:flex; flex-direction:column; min-height:0; min-width:0; padding:0 0 0 12px; border-left:1px solid var(--accent); font-size:14px; line-height:1.5; }.role-brief-tabs { display:flex; gap:4px; flex:none; border-bottom:1px solid var(--line); }.role-brief-tabs button { flex:1; min-width:0; padding:4px; font-size:14px; min-height:44px; clip-path:none; border:0; border-bottom:2px solid transparent; color:var(--muted); background:transparent; white-space:nowrap; }.role-brief-tabs button[aria-selected=true] { color:var(--accent); border-bottom-color:var(--accent); }.role-brief-page { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; overscroll-behavior:contain; padding-top:7px; }.role-description strong { color:var(--accent); font-size:15px; }.role-description p { margin:6px 0 0; font-size:14px; line-height:1.5; }.role-detail-section h4 { font-size:14px; }.role-detail-section small,.role-balance-note { display:block; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.5; }
.single-ready-footer { display:flex; align-items:center; gap:12px; flex:none; padding-top:8px; }.single-ready-footer .role-lock-note { flex:1; margin:0; font-size:12px; color:var(--muted); line-height:1.4; }#single-start { font-size:16px; min-width:140px; }
/* Room readiness belongs to the dialog, so it remains visible while reading a role. */
#multiplayer-help { width:min(1060px,calc(var(--view-width) - var(--safe-left) - var(--safe-right))); height:min(480px,var(--content-height)); padding:0; border:0; background:transparent; overflow:hidden; display:flex; flex-direction:column; gap:8px; }#multiplayer-help:not([open]) { display:none; }.relay-header { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:44px; flex:none; }.connection-note { margin:2px 0 0; color:var(--muted); font-size:12px; line-height:1.4; }.close-room { color:rgb(var(--ui-danger)); border-color:color-mix(in srgb,rgb(var(--ui-danger)) 60%,transparent); background:var(--glass); }.relay-room-pages { display:none; gap:5px; margin-left:auto; }.relay-room-pages button { font-size:13px; }.relay-room-pages button[aria-pressed=true] { color:var(--accent); border-color:var(--accent); background:var(--selected); }
.relay-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; flex:1; min-height:0; }.relay-board,.relay-profile { background:var(--glass); border:1px solid var(--line); border-top:2px solid var(--accent); padding:6px 10px; min-width:0; min-height:0; }.relay-board { display:flex; }#relay-entry { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.55fr); grid-template-rows:auto auto minmax(0,1fr) auto; gap:0 14px; min-height:0; }#relay-entry>.relay-list-heading { grid-column:1; grid-row:1; }.relay-list-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }.relay-list-heading h3 { font-size:17px; }#relay-list-count { font-size:12px; color:var(--muted); }.relay-list-columns { grid-column:1; grid-row:2; display:flex; justify-content:space-between; color:var(--dim); font-size:12px; padding:5px 8px; border-bottom:1px solid var(--line); }#relay-public-list { grid-column:1; grid-row:3; min-height:0; overflow:auto; padding-top:6px; scrollbar-width:thin; overscroll-behavior:contain; }
.relay-room-row { display:grid; grid-template-columns:minmax(0,1fr) 40px; gap:8px; align-items:center; width:100%; min-height:60px; margin:0 0 6px; padding:7px 8px; text-align:left; clip-path:none; background:var(--row); border:0; border-left:2px solid var(--line2); }.relay-room-row:hover { border-left-color:var(--accent); }.relay-room-row strong { display:block; font-size:14px; overflow-wrap:anywhere; }.relay-room-row small { display:block; margin-top:2px; font-size:12px; color:var(--muted); font-weight:400; }.relay-room-row>span:last-child { text-align:right; font-size:22px; color:var(--accent); }.relay-empty-list { display:grid; place-content:center; height:100%; min-height:54px; padding:8px; color:var(--muted); text-align:center; font-size:13px; line-height:1.5; white-space:pre-line; }
.list-pages { grid-column:1; grid-row:4; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:none; padding-top:4px; }.list-pages button { min-width:56px; }.list-pages output { min-width:44px; text-align:center; font-size:18px; color:var(--accent); }.relay-entry-actions { grid-column:2; grid-row:1/5; display:flex; flex-direction:column; justify-content:center; gap:10px; padding-left:12px; border-left:1px solid var(--line); min-width:0; }#relay-room-actions { display:grid; gap:6px; }.relay-field { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); min-width:0; }.relay-field input,.relay-field select { width:100%; }
#relay-room { display:flex; flex-direction:column; width:100%; min-height:0; }.relay-room-heading { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; flex:none; }.relay-room-heading>div:first-child { min-width:0; }#relay-room-title { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }#relay-room-kind { font-size:12px; color:var(--muted); }.relay-share { display:flex; align-items:center; gap:6px; margin:0; }.relay-share output { font-size:18px; letter-spacing:.03em; white-space:nowrap; color:var(--accent); }#relay-copy { min-width:44px; padding:6px; }
#relay-players { list-style:none; margin:7px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; min-height:0; flex:1; max-height:116px; align-self:stretch; overflow:auto; scrollbar-width:thin; }#relay-players li { display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto auto; align-content:center; gap:0 4px; min-width:0; min-height:66px; padding:5px; background:transparent; border:0; border-top:2px solid var(--line2); text-align:left; }#relay-players li:not(.empty-seat)[data-slot="0"] { border-top-color:var(--character0); }#relay-players li:not(.empty-seat)[data-slot="1"] { border-top-color:var(--character1); }#relay-players li:not(.empty-seat)[data-slot="2"] { border-top-color:var(--character2); }#relay-players li:not(.empty-seat)[data-slot="3"] { border-top-color:var(--character3); }#relay-players li.is-ready { background:transparent; }.relay-player-role { grid-column:2; grid-row:1; display:flex; gap:3px; align-items:center; font-size:11px; line-height:1.3; min-width:0; }.relay-player-role svg { display:none; }#relay-players img,.relay-unselected { grid-column:1; grid-row:1/4; width:28px; height:52px; object-fit:contain; align-self:center; }.relay-unselected { font-size:11px; color:var(--muted); }#relay-players strong { grid-column:2; grid-row:2; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }.relay-ready-badge { grid-column:2; grid-row:3; font-size:12px; color:var(--dim); line-height:1.3; }.is-ready .relay-ready-badge { color:var(--accent); }#relay-players .empty-seat { display:flex; justify-content:center; align-items:center; color:var(--dim); font-size:12px; background:transparent; border:0; }#relay-players .empty-seat>span { display:none; }
.relay-ready-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; flex:none; padding:0 10px; background:var(--panel); box-shadow:0 -1px var(--line); }#relay-ready-hint { flex:1; margin:0; font-size:13px; line-height:1.4; color:var(--muted); }.relay-ready-actions { display:flex; gap:6px; flex:none; }.relay-ready-actions button { min-width:112px; font-size:14px; }#relay-start:not(:disabled) { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.relay-footer { position:static; display:flex; align-items:center; gap:8px; min-height:20px; flex:none; padding:0 6px; color:var(--muted); }.relay-footer p { margin:0; font-size:12px; line-height:1.4; }#relay-status { flex:1; }#relay-ping { font-size:12px; min-height:44px; padding:5px 8px; }#relay-result:empty { display:none; }
.relay-profile { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(0,1.5fr); grid-template-rows:minmax(0,1fr) auto; gap:8px 14px; }.relay-profile>.role-choices { grid-column:1; grid-row:1; width:calc(100% - 70px); align-self:start; max-height:100%; }.relay-preview { grid-column:1; grid-row:1; align-self:start; justify-self:end; width:64px; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }.relay-character { position:relative; display:grid; place-items:center; width:100%; height:140px; min-height:0; }#relay-avatar { width:100%; height:100%; object-fit:contain; }.relay-character-floor { display:none; }#relay-selected-name { font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.relay-profile>.role-description { grid-column:2; grid-row:1; }.relay-profile-tabs { display:none; }#relay-profile-note { grid-column:1/-1; grid-row:2; margin:0; color:var(--muted); font-size:12px; line-height:1.4; }
#multiplayer-help.in-room .relay-layout { grid-template-columns:minmax(340px,1.05fr) minmax(0,1fr); }
/* Form inputs scroll independently from their submit button when the keyboard opens. */
.relay-options { width:min(640px,calc(var(--view-width) - var(--safe-left) - var(--safe-right))); overflow:hidden; }.relay-options[open] { display:flex; flex-direction:column; }.relay-options .panel-header { margin-bottom:7px; }.relay-options form { display:flex; flex-direction:column; min-height:0; }.relay-form-body { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:2px; }.relay-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; margin-bottom:7px; }.relay-modal-status { font-size:13px; line-height:1.4; min-height:18px; margin:6px 0!important; color:var(--muted); }.relay-options form>.primary { width:100%; flex:none; margin-top:6px; }.relay-code-field { margin-bottom:8px; }.relay-code-entry { display:flex; gap:6px; }.relay-code-entry input { flex:1; font:20px var(--num); letter-spacing:.06em; text-transform:uppercase; }.relay-code-entry button { flex:none; font-size:13px; white-space:nowrap; }
/* Launch, recovery, browser and installation help share the same hierarchy. */
.launch-pending #stage,.launch-pending #rotate { visibility:hidden; pointer-events:none; }#launch-screen { position:fixed; inset:0; z-index:20; display:grid; place-items:center; overflow:auto; padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); background:radial-gradient(ellipse at 35% 30%,var(--raised),var(--ink) 72%); }.launch-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,1fr); width:min(940px,100%); background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--accent); }.launch-art { display:block; width:100%; height:100%; object-fit:contain; min-height:0; }.launch-content { padding:14px 18px; }.launch-tagline { font-size:18px; font-weight:900; line-height:1.4; }.launch-description { font-size:13px; color:var(--muted); margin:6px 0 12px; }#launch-start { width:100%; font-size:18px; min-height:48px; }#launch-status { font-size:13px; color:var(--muted); min-height:2.8em; margin:8px 0; line-height:1.45; }.launch-tools { display:flex; gap:6px; flex-wrap:wrap; }.launch-tools button { flex:1; min-width:110px; font-size:12px; padding:5px 8px; }.kakao-share { background:var(--raised); color:var(--white); }.kakao-share:disabled { background:var(--disabled); color:var(--dim); }
#loading { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; background:radial-gradient(ellipse at 50% 40%,var(--raised),var(--ink) 72%); }.loading-brand { font-size:clamp(28px,6vh,42px); line-height:1.2; font-weight:900; margin-bottom:12px; }.loading-brand::after { content:''; display:block; margin:12px auto 0; width:48px; height:3px; background:var(--accent); }#progress { font-size:36px; line-height:1; color:var(--accent); margin:8px 0 12px; }#bar { width:min(400px,64vw); height:5px; background:var(--raised); }#bar-fill { height:100%; width:0; background:var(--accent); }#loading-title { font-size:14px; color:var(--muted); margin-top:10px; }#loading-line { font-size:12px; margin-top:14px; color:var(--muted); }#loading-line b { color:var(--accent); margin-right:8px; }#loading-actions { display:flex; gap:8px; margin-top:14px; }#combat-wait { position:absolute; left:50%; top:22%; transform:translateX(-50%); max-width:80%; padding:10px 16px; background:var(--panel); border:1px solid var(--line2); border-left:3px solid var(--accent); text-align:center; z-index:15; pointer-events:none; }
#rotate { position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:radial-gradient(ellipse at 50% 35%,var(--raised),var(--ink) 72%); padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); text-align:center; }#rotate h2 { font-size:24px; }#rotate p { color:var(--muted); font-size:14px; line-height:1.6; max-width:340px; }#rotate button { width:min(320px,100%); font-size:15px; }#rotate #display-status { font-size:13px; }.phone { width:96px; height:52px; border:2px solid var(--white); border-radius:6px; display:grid; place-items:center; margin-bottom:16px; }.phone span { font:34px Arial; color:var(--accent); }
#browser-help,#install-help,#share-help { overflow:auto; }#browser-help button,#install-help button,#share-help button { margin-top:6px; }#browser-status { font-size:13px; color:var(--muted); }#share-url { width:100%; font:14px monospace; }
@media (orientation:landscape) and (max-height:550px) {
 #multiplayer-help.in-room .relay-room-pages { display:flex; }#multiplayer-help.in-room .relay-layout { grid-template-columns:minmax(0,1fr); }#multiplayer-help.in-room[data-room-page=participants] .relay-profile,#multiplayer-help.in-room[data-room-page=role] .relay-board { display:none; }
 .role-lobby { height:var(--content-height); }.relay-character { height:112px; }.single-character img { max-height:128px; }
}
@media (orientation:landscape) and (max-width:640px) {
 #lobby-panel { grid-template-columns:minmax(0,1fr) 204px; gap:18px; }h1 { font-size:28px; }.panel { padding:10px 12px; }.single-role-layout { grid-template-columns:160px minmax(0,1fr); gap:10px; }.role-description { padding-left:8px; }.role-brief-tabs button { font-size:13px; }
 #relay-players { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(44px,1fr)); max-height:none; }#relay-players li { min-height:44px; grid-template-columns:22px minmax(0,1fr); grid-template-rows:auto auto; padding:3px 5px; }#relay-players img,.relay-unselected { width:22px; height:36px; grid-row:1/3; }.relay-player-role { grid-column:2; grid-row:1; font-size:11px; }#relay-players strong { grid-column:2; grid-row:2; padding-right:68px; }.relay-ready-badge { grid-column:2; grid-row:2; justify-self:end; font-size:11px; }#relay-players .empty-seat { min-height:44px; }
 .relay-room-heading { gap:6px; }.relay-room-heading .compact { font-size:12px; padding:5px 7px; }.relay-share output { font-size:16px; }.relay-ready-actions button { min-width:96px; }.relay-profile { grid-template-columns:150px minmax(0,1fr); gap:8px; }#relay-entry { grid-template-columns:minmax(0,1fr) 174px; gap:0 10px; }.relay-entry-actions { padding-left:10px; }
 .control-toolbar { flex-wrap:wrap; justify-content:center; }.control-toolbar p { max-width:180px; }
}
@media (orientation:landscape) and (max-height:300px) {
 .connection-note,.role-lobby .panel-header p { display:none; }#lobby-panel { padding-bottom:48px; }.main-buttons { flex-direction:row; flex-wrap:wrap; gap:6px; }.main-buttons #start,.main-buttons #multiplayer { width:100%; min-height:44px; font-size:16px; }.main-buttons #settings { width:100%; }h1 { font-size:24px; }.single-character { display:none; }.single-role-layout { grid-template-columns:96px minmax(0,1fr); }.single-role-layout>.role-choices { width:100%; align-self:stretch; }.role-lobby .single-ready-footer .role-lock-note { font-size:11px; }.relay-header { min-height:44px; }.relay-ready-footer { padding:3px 8px; }.relay-footer { display:none; }#multiplayer-help { gap:5px; }.relay-board { padding:5px 8px; }.relay-room-heading { min-height:44px; }#relay-room-kind { display:none; }#relay-players { margin-top:4px; }.relay-profile { grid-template-columns:98px minmax(0,1fr); }.relay-profile>.role-choices { width:100%; align-self:stretch; }.relay-preview,#relay-profile-note { display:none; }.relay-profile>.role-description { grid-row:1/3; }.relay-entry-actions>.relay-field { display:none; }.relay-entry-actions { gap:4px; }#relay-entry { grid-template-rows:auto minmax(0,1fr) auto; }.relay-list-columns { display:none; }#relay-public-list { grid-row:2; }#relay-list-pages { grid-row:3; }.relay-entry-actions { grid-row:1/4; }.relay-list-heading h3 { font-size:15px; }#relay-list-count { display:none; }.list-pages { padding-top:2px; }.list-pages button { min-height:44px; }
}
@media (orientation:portrait) { #stage { visibility:hidden; pointer-events:none; }.launch-card { display:block; width:min(680px,100%); }.launch-art { height:auto; max-height:45dvh; object-fit:cover; } }
@media (orientation:landscape) { #rotate { display:none; } }
#stage.playing,#stage.playing #unity-canvas { touch-action:none; overscroll-behavior:none; -webkit-user-select:none; user-select:none; }
@media (prefers-reduced-motion:reduce) { button { transition:none; } }

.error-details { width:min(640px,100%); min-width:0; font-size:12px; text-align:left; color:var(--muted); }
.error-details summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--accent); }
.error-details summary::after { content:'+'; margin-left:auto; }.error-details[open] summary::after { content:'-'; }
.error-details pre { margin:0; max-height:25vh; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:11px/1.45 monospace; user-select:text; -webkit-user-select:text; }
#loading.has-error .loading-brand,#loading.has-error #progress,#loading.has-error #bar { display:none; }
#runtime-error-details { flex:none; }#runtime-error-details pre { max-height:12vh; }

/* Compact utility triggers retain touch size while their contents stay secondary. */
.relay-header>div:first-child { min-width:0; }.relay-header h2 { white-space:nowrap; }.relay-header .connection-note { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.relay-header-tools { display:flex; align-items:center; gap:5px; flex:none; }.relay-header-tools .utility-actions { bottom:auto; top:50px; }.relay-header-tools summary { min-width:44px; }.relay-header-tools #relay-result { margin:4px; font-size:12px; color:var(--muted); }
.role-choice:disabled { flex-wrap:wrap; gap:0 4px; }.role-choice:disabled small { display:block; flex-basis:100%; padding-left:22px; font-size:11px; line-height:1.25; color:var(--muted); }
@media (orientation:landscape) and (max-height:300px) { .relay-footer { display:flex; }.relay-header h2 { font-size:18px; }.relay-header .connection-note { display:none; } }

@media (orientation:landscape) and (min-height:551px) { #relay-players { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(66px,1fr)); max-height:170px; } }

/* Signal: one corner cut, flat surfaces, bright selected text with a small accent marker. */
.settings-tabs button[aria-pressed=true],.role-brief-tabs button[aria-selected=true] { color:var(--white); }
.camera-pages button,.relay-room-pages button { clip-path:none; border:0; border-bottom:1px solid var(--line); background:transparent; }
.camera-pages button[aria-pressed=true],.relay-room-pages button[aria-pressed=true] { color:var(--white); border-bottom:2px solid var(--accent); background:transparent; }
.role-choice { color:var(--muted); border:0; border-left:2px solid transparent; background:transparent; clip-path:none; }
.role-choice[aria-pressed=true] { color:var(--white); border-color:transparent; border-left-color:var(--accent); background:transparent; box-shadow:none; }
.role-choice:disabled { flex-wrap:nowrap; min-height:28px; padding:4px; font-size:12px; line-height:1.4; border:0; background:transparent; gap:4px; }
.role-choice:disabled svg { display:none; }.role-choice:disabled small { flex-basis:auto; padding:0; font-size:10px; color:var(--dim); line-height:1.2; white-space:nowrap; }
.close-room,.relay-header-tools summary { border-color:transparent; background:transparent; }
.relay-profile { border-top:1px solid var(--line); }.relay-board { border-top:1px solid var(--line); }
.role-choice:disabled:hover { background:transparent; }
@media (orientation:landscape) and (max-height:300px) { .relay-ready-footer { padding:0 8px; } }

.role-choice>span { white-space:nowrap; }.role-choice:disabled { gap:3px; }

/* A visual viewport may shrink for a keyboard without changing layout media queries. */
.viewport-short .connection-note,.viewport-short .role-lobby .panel-header p { display:none; }
.viewport-short .relay-entry-actions>.relay-field { display:none; }.viewport-short .relay-entry-actions { gap:4px; }
.viewport-short #relay-entry { grid-template-rows:auto minmax(0,1fr) auto; }.viewport-short .relay-list-columns { display:none; }.viewport-short #relay-public-list { grid-row:2; }.viewport-short #relay-list-pages { grid-row:3; }.viewport-short .relay-entry-actions { grid-row:1/4; }
.viewport-short #relay-list-count { display:none; }.viewport-short .relay-preview,.viewport-short #relay-profile-note { display:none; }
.viewport-short .single-character { display:none; }.viewport-short .single-role-layout { grid-template-columns:96px minmax(0,1fr); }.viewport-short .single-role-layout>.role-choices { width:100%; align-self:stretch; }

/* Mobile is the sizing baseline; text density is independent of touch targets. */
.trial-note { display:block; margin-top:12px; font-size:13px; line-height:1.5; font-weight:400; color:var(--muted); }
#relay-invite-url { width:100%; min-width:0; margin-top:6px; font-size:16px; }
.role-model-note { display:none; }
@media (min-height:551px) {
 .relay-room-heading { grid-template-columns:minmax(0,1fr) auto; }
 .relay-share { grid-row:2; grid-column:1/-1; }
 #relay-leave-room { grid-row:1; grid-column:2; }
}
@media (orientation:landscape) and (max-height:550px) {
 :root { --body-size:13px; }
 h1 { font-size:clamp(24px,6.2vh,30px); }
 h1::after { margin-top:9px; }
 h2 { font-size:18px; } h3 { font-size:15px; }
 .panel { padding:8px 12px; }
 #lobby-panel { grid-template-columns:minmax(0,1fr) minmax(180px,240px); gap:18px; padding-top:8px; }
 .main-buttons button { font-size:16px; min-height:44px; padding:7px 12px; }
 dialog p,.slider-row label,.control-settings label,.display-settings label { font-size:13px; }
 .slider-row output { font-size:16px; }
 .relay-share { gap:5px; }
 .relay-share output { font-size:14px; }
 .relay-share button { font-size:12px; padding:6px 8px; white-space:nowrap; }
 #relay-room-title { font-size:14px; }
 .relay-room-heading { gap:6px; }
 #relay-ready-hint { font-size:12px; }
 #rotate h2 { font-size:20px; }
}
@media (orientation:landscape) and (max-width:720px) {
 .relay-room-heading { grid-template-columns:minmax(0,1fr) auto; }
 .relay-share { grid-row:2; grid-column:1/-1; }
 #relay-leave-room { grid-row:1; grid-column:2; }
}

/* Displayed-pixel spacing roles. Typography and player accent keep their own contracts. */
#lobby-panel { max-height:440px; grid-template-columns:minmax(0,1fr) minmax(180px,224px); gap:var(--layout-gap); }
.main-buttons { gap:var(--space-sm); }
.panel { padding-inline:var(--panel-inline); }
.panel-header { gap:var(--space-md); margin-bottom:var(--space-sm); }
#settings-panel { width:min(760px,100%); }
.settings-grid { gap:var(--settings-gap); }
.slider-row { padding:var(--space-sm); gap:var(--space-xs) var(--space-sm); }
.settings-tabs { gap:var(--space-xs); }
.settings-actions,.control-settings { gap:var(--space-sm); }
.settings-actions { padding-top:var(--space-sm); }
@media (orientation:landscape) and (max-height:550px) {
 :root { --panel-inline:12px; --layout-gap:16px; --settings-gap:8px; }
 #lobby-panel { padding-top:var(--space-sm); }
 .slider-row { padding:var(--space-xs) var(--space-sm); }
 .settings-tabs button { padding-inline:var(--space-sm); }
}
@media (orientation:landscape) and (max-width:640px) {
 #lobby-panel { grid-template-columns:minmax(0,1fr) 180px; gap:var(--space-md); }
 .control-settings { flex-wrap:wrap; }
 .control-settings label { flex-basis:calc(50% - var(--space-sm)); }
 .control-settings button { width:100%; }
}

/* Approved Dusk roles use displayed CSS pixels, independent of the Unity canvas.
   Browser safe-area/visual-viewport measurements above remain the layout bounds. */
:root {
 --body-size:var(--ui-font-body,14px); --num:Game,sans-serif;
 --line:rgb(var(--ui-border) / var(--ui-border-opacity,.25)); --line2:var(--line);
 --row:transparent; --raised:rgb(var(--ui-black) / var(--ui-panel-opacity));
 --hover:rgb(var(--ui-black) / var(--ui-panel-opacity)); --selected:transparent;
 --disabled:transparent; --cut:none;
}
html,body { font-size:14px; line-height:20px; font-weight:400; font-synthesis:none; }
body * { font-weight:400; font-synthesis:none; }
button,input,select,summary { font-family:Game,sans-serif; font-size:14px; line-height:20px; clip-path:none; border-radius:0; box-shadow:none; }
button,summary { background:transparent; border-color:var(--line); }
button:hover,summary:hover { background:transparent; border-color:var(--white); }
button:active { background:transparent; border-color:var(--accent); }
button:focus-visible { box-shadow:none; }
.primary,.primary:hover,.primary:active,.teal,.secondary { color:var(--white); background:transparent; }
.primary,.primary:hover { border-color:var(--accent); }
button:disabled,.primary:disabled { background:transparent; }
h1,h2,h3,h4,.loading-brand,.launch-tagline { font-size:16px; line-height:24px; font-weight:400; }
.relay-header h2 { font-size:16px; line-height:24px; }
h1::after,.loading-brand::after { display:none; }
small,.compact,.field-error,.connection-note,.trial-note { font-size:12px; line-height:16px; }
input:not([type=range]),select { font-size:14px; line-height:20px; background:transparent; }
.panel,.launch-card,.utility-actions { border:3px double var(--line); background:var(--panel); border-radius:0; }
.panel { padding:12px; }
.panel-header { gap:8px; }
dialog p { font-size:14px; line-height:20px; }
#stage.lobby #menu { background:rgb(var(--ui-black) / var(--ui-panel-opacity)); }
#stage.lobby #unity-canvas { filter:none; }
#launch-screen,#loading,#rotate { background:var(--ink); }
.launch-card { border-top:3px double var(--line); }
.launch-description,#launch-status,.trial-note { font-size:12px; line-height:16px; }
.main-buttons button,.main-buttons #settings,#launch-start,#single-start,#rotate button { font-size:14px; line-height:20px; }
.main-buttons #start,.main-buttons #multiplayer { font-size:14px; line-height:20px; }
#multiplayer small,#multiplayer-status,.utility-menu summary,#rotate #display-status,#browser-status { font-size:12px; line-height:16px; }
#rotate h2 { font-size:16px; line-height:24px; }
#rotate p { font-size:14px; line-height:20px; }
.phone { border-radius:0; }
.phone svg { color:var(--accent); }
#progress,.relay-room-row>span:last-child,.list-pages output,.relay-share output,.relay-code-entry input { font-family:var(--num); font-size:18px; line-height:24px; }
#relay-invite-url,#relay-room-title,.relay-list-heading h3 { font-size:16px; line-height:24px; }
#share-url { font-family:Game,sans-serif; font-size:14px; line-height:20px; }
.error-details pre { font-family:Game,sans-serif; font-size:12px; line-height:16px; }
.error-details summary::after { content:'+'; }
.error-details[open] summary::after { content:'-'; }
.role-choice,.role-brief-tabs button,.role-description p,.role-detail-section h4 { font-size:14px; line-height:20px; }
.role-description strong { font-size:16px; line-height:24px; }
.role-choice:disabled,.role-choice:disabled small,.role-empty,.role-model-note,.role-lobby .panel-header p,
.role-detail-section small,.role-balance-note,.single-ready-footer .role-lock-note,
.relay-player-role,.relay-ready-badge,.relay-empty-list,.relay-modal-status,.relay-code-entry button { font-size:12px; line-height:16px; }
.role-lobby .single-ready-footer .role-lock-note,.relay-unselected,#relay-ready-hint { font-size:12px; line-height:16px; }
#relay-players strong,.relay-field { font-size:14px; line-height:20px; }
.role-choice[aria-pressed=true] { border:1px solid var(--accent); background:transparent; box-shadow:none; }
.role-choice { border:1px solid transparent; }
.settings-tabs button[aria-pressed=true],.role-brief-tabs button[aria-selected=true],
.camera-pages button[aria-pressed=true],.relay-room-pages button[aria-pressed=true] { color:var(--white); background:transparent; border-bottom-color:var(--accent); }
.relay-board,.relay-profile { background:transparent; border:1px solid var(--line); }
#multiplayer-help { background:var(--panel); border:3px double var(--line); padding:12px; }
.close-room { color:var(--white); border-color:var(--line); }
.relay-room-row { background:transparent; border:1px solid var(--line); }
.relay-room-row:hover { border-color:var(--accent); }
.relay-share,.relay-ready-footer { background:transparent; }
#relay-start:not(:disabled) { background:transparent; color:var(--white); border-color:var(--accent); }

/* 318 = 24 padding + 6 border + 44 header + 184 body + 44 footer + 16 gaps.
   The camera position page is three 48px rows below a 36px page selector. */
#settings-panel { display:grid; width:min(600px,100%); height:min(318px,var(--content-height)); max-height:100%; padding:12px; grid-template-columns:minmax(0,1fr); grid-template-rows:44px minmax(0,1fr) 44px; gap:8px; overflow:hidden; }
#settings-panel>.panel-header { grid-row:1; min-height:44px; margin:0; gap:8px; }
#settings-title { flex:none; font-size:16px; line-height:24px; }
.settings-tabs { margin-left:auto; max-width:280px; }
.settings-tabs button { font-size:14px; line-height:20px; min-height:44px; padding:4px 8px; }
.settings-body { grid-row:2; overflow:auto; }
.camera-pages { gap:8px; min-height:32px; margin:0 0 4px; }
.camera-pages button { min-height:32px; padding:4px 8px; font-size:12px; line-height:16px; }
.settings-grid,.settings-grid[data-camera-view=position],.settings-grid[data-camera-view=shooting] { grid-template-columns:minmax(0,1fr); gap:0; }
.slider-row { grid-template-columns:112px minmax(0,1fr) 112px; min-height:48px; padding:1px 0 2px; gap:0 8px; align-content:center; }
.slider-row label { grid-column:1; grid-row:1; font-size:14px; line-height:20px; }
.slider-row output { grid-column:3; grid-row:1; font-size:18px; line-height:24px; text-align:right; }
.slider-row input[type=range] { grid-column:2; grid-row:1; height:44px; }
.range-hints { display:none; }
.camera-mode,.shooting-zoom-setting { grid-template-columns:minmax(0,1fr) 160px; padding:2px 0; gap:4px 8px; }
.camera-mode label { grid-column:1; grid-row:1; }
.camera-mode select,.shooting-zoom-setting button { grid-column:2; grid-row:1; min-height:44px; }
.camera-mode p { grid-column:1/-1; grid-row:2; font-size:12px; line-height:16px; }
.shooting-zoom-setting button[aria-checked=true] { color:var(--white); background:transparent; border-color:var(--accent); }
.control-settings { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:4px; padding:0; }
.control-settings label,.display-settings label { display:grid; grid-template-columns:minmax(0,1fr) 160px; gap:8px; align-items:center; font-size:14px; line-height:20px; min-height:44px; }
.control-settings button { min-height:44px; width:100%; }
.display-settings { padding:0; }
.display-settings p,#controls-description { font-size:12px; line-height:16px; margin:4px 0; }
.settings-status { grid-column:1; grid-row:3; align-self:center; display:flex; flex-direction:column; justify-content:center; width:144px; max-height:44px; padding:0; gap:0; overflow:auto; }
#save-status,.balance-version { font-size:12px; line-height:16px; text-align:left; overflow-wrap:anywhere; }
.settings-actions { grid-column:1; grid-row:3; justify-self:end; align-self:stretch; width:calc(100% - 156px); gap:8px; padding:0; }
.settings-actions button { min-height:44px; padding:4px 8px; font-size:14px; line-height:20px; }
#reset { font-size:12px; line-height:16px; }
.settings-actions .primary { min-width:56px; }
#settings-close { width:44px; height:44px; min-height:44px; }
#runtime-error-details { margin-top:8px; }

/* Measured bounds of this exact button are sent to SetCombatUtilityRect. */
#open-settings { top:var(--safe-top); width:32px; height:32px; min-height:32px; color:var(--white); border:1px solid var(--line); background:var(--glass); }
#open-settings::before { display:none; }
#open-settings:hover,#open-settings:active { background:var(--glass); border-color:var(--accent); }
#open-settings:focus-visible { border-radius:0; }
.control-handle { font-size:12px; line-height:16px; }
.control-toolbar { border:3px double var(--line); }
.control-toolbar h2 { font-size:16px; line-height:24px; }
.control-toolbar p,.control-actions button { font-size:12px; line-height:16px; }
@media (orientation:landscape) and (max-width:640px) {
 .settings-status { width:120px; }
 .settings-actions { width:calc(100% - 132px); }
 .slider-row { grid-template-columns:104px minmax(0,1fr) 112px; }
 .camera-mode,.shooting-zoom-setting { grid-template-columns:minmax(0,1fr) 144px; }
 .control-settings label,.display-settings label { grid-template-columns:minmax(0,1fr) 160px; flex-basis:auto; }
}
@media (max-width:480px) {
 #settings-panel { height:auto; max-height:100%; grid-template-rows:44px minmax(0,1fr) auto auto; }
 .settings-status { grid-row:3; width:100%; max-height:48px; }
 .settings-actions { grid-row:4; width:100%; }
 .slider-row { grid-template-columns:minmax(0,1fr) 112px; }
 .slider-row input[type=range] { grid-column:1/-1; grid-row:2; }
 .slider-row output { grid-column:2; }
 .camera-mode,.shooting-zoom-setting,.control-settings label,.display-settings label { grid-template-columns:minmax(0,1fr) 132px; }
 .camera-mode p { grid-row:2; }
}