/* One campaign picker and one settings panel, including short landscape phones. */
#app[data-screen=home] #board-wrap{filter:brightness(.36) blur(1px)}
#app #home{background:radial-gradient(ellipse at 50% 35%,#020c1433,#020b14b8);isolation:isolate}
#app .mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#app[data-screen=play] #settingsButton,#app[data-screen=play] #slotsButton{display:none}
#app #modalActions:empty{display:none}
#app #modal[data-kind=missions] #modalCard{height:min(670px,calc(var(--vh) - max(32px,var(--safe-bottom)) - 16px));width:min(1040px,100%)}
#app #modal[data-kind=missions] #modalBody{overflow:hidden;flex:1;display:flex;min-height:0}
#app .settings-panel{display:flex;flex-direction:column;gap:14px;min-width:0}
#app .control-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#app .control-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 12px;min-height:112px;min-width:0}
#app .control-choice>.ui-icon{width:40px;height:40px}
#app .control-choice[aria-pressed=true]{border-color:var(--console-accent);background:linear-gradient(140deg,#3c5b53,#19383c);box-shadow:inset 0 -2px var(--console-accent)}
#app .control-caption{text-align:center;margin:0;font-size:12px;line-height:1.45}
#app .settings-tools{display:flex;gap:10px;justify-content:center}
#app .settings-tools button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;min-height:44px}
@media(max-width:600px) and (min-height:441px){
 #app .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .mode-card:last-child{grid-column:1/-1;aspect-ratio:3/1}
 #app .control-choice{padding:13px 4px;gap:9px;min-height:96px;font-size:11px}
 #app .control-choice>.ui-icon{width:32px;height:32px}
}
@media(max-height:440px){
 #app #modal[data-kind=missions] #modalCard{height:calc(var(--vh) - max(8px,var(--safe-bottom)) - 8px);padding:7px 12px}
 #app #modal[data-kind=missions] .modal-head{height:44px;min-height:44px;margin-bottom:5px}
 #app #modal[data-kind=settings] #modalCard{padding:6px 12px}
 #app #modal[data-kind=settings] .modal-head{height:44px;min-height:44px;margin-bottom:4px}
 #app #modal[data-kind=settings] #modalBody{overflow:hidden}
 #app .settings-panel{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center}
 #app .control-choices{gap:6px;min-width:0}
 #app .control-choice{padding:5px 6px;min-height:49px;height:49px;flex-direction:row;gap:7px;font-size:11px}
 #app .control-choice>.ui-icon{width:24px;height:24px}
 #app .settings-tools{flex-direction:column;gap:5px;grid-column:2;grid-row:1/3}
 #app .settings-tools button{padding:5px 9px;font-size:10px;gap:6px}
 #app .settings-tools .ui-icon{width:17px;height:17px}
 #app .control-caption{font-size:10px!important;text-align:left;grid-column:1;margin:0!important;line-height:1.35!important}
 #app #modal[data-kind=settings] #modalActions{margin-top:5px}
}
html.compact #app #modal[data-kind=missions] #modalCard{height:calc(var(--vh) - max(8px,var(--safe-bottom)) - 8px);padding:7px 12px}
html.compact #app #modal[data-kind=missions] .modal-head{height:44px;min-height:44px;margin-bottom:5px}

#app .topbar .brand{margin-left:52px}
#app .modal-head{gap:10px}
#app .modal-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app #modal[data-kind=missions] .modal-head h2{flex:1}
@media(max-width:600px){#app #modal[data-kind=shop] .modal-head h2{display:none}}

#app .continue-destination{display:flex;flex-direction:column;gap:3px;align-items:center;max-width:90%;text-align:center;line-height:1.3}
#app .continue-destination>span{color:#b5c9c3;font-size:12px}
#app .continue-destination>strong{color:#e1e9dc;font-size:14px;font-weight:600}
#app .mode-progress{position:absolute;top:9px;right:9px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:5px 7px;border:1px solid #83a99540;border-radius:4px;background:#0b202ce0;color:#e5cca1;font:11px ui-monospace,monospace;pointer-events:none}
#app .mode-progress>.ui-icon{width:15px;height:15px}
#app .mode-progress>small{font:inherit;color:#c8dfcf;margin-left:5px}
#app .modal-head{height:auto;min-height:44px}
html.compact #app #modal .modal-head{height:44px;min-height:44px}
#app #modal[data-kind=settings] .settings-panel{display:flex;flex-direction:column;gap:9px}
#app #modal[data-kind=settings] .control-caption{text-align:center}
@media(max-height:440px){#app .mode-progress{top:4px;right:4px;font-size:9px;padding:3px 4px;gap:3px}#app .mode-progress>.ui-icon{width:12px;height:12px}#app .continue-destination{flex-direction:row;gap:8px;max-width:90%;white-space:nowrap}#app .continue-destination>span,#app .continue-destination>strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}#app #modal[data-kind=missions] .modal-head{height:44px;min-height:44px}#app #modal[data-kind=settings] .modal-head{height:44px;min-height:44px}#app #modal[data-kind=settings] .control-choice{min-height:44px;height:44px}#app #modal[data-kind=settings] .settings-panel{gap:5px}}
html.compact #app .continue-destination{flex-direction:row;gap:8px;max-width:90%;white-space:nowrap}
html.compact #app .continue-destination>span,html.compact #app .continue-destination>strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}
html.compact #app .mode-progress{top:4px;right:4px;font-size:9px;padding:3px 4px;gap:3px}
html.compact #app .mode-progress>.ui-icon{width:12px;height:12px}

#app #bonusHud{pointer-events:auto;min-height:44px;height:44px;min-width:44px;padding:4px 6px;border-color:transparent;box-shadow:none;background:transparent;align-items:center;justify-content:center}
#app #bonusHud:hover{border-color:#8fbd9d66;background:#1c3d3a66}
#app .objectives-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#app .objective-card{min-width:0;background:#112c34;border:1px solid #729c8740;border-radius:5px;overflow:hidden}
#app .objective-card canvas{width:100%;display:block;aspect-ratio:16/9;object-fit:contain}
#app .objective-card h3{font-size:14px;margin:9px 12px 4px;display:flex;align-items:center;gap:7px}
#app .objective-card h3 .ui-icon{width:20px;height:20px}
#app .objective-card p{margin:0 12px 12px;font-size:12px;line-height:1.4}
@media(max-height:440px){#app .objectives-grid{gap:9px}#app .objective-card{display:grid;grid-template-columns:88px 1fr;column-gap:7px;align-items:center}#app .objective-card canvas{grid-row:1/3;width:88px;height:78px;aspect-ratio:auto}#app .objective-card h3{font-size:11px;margin:5px 6px 0 0;gap:4px}#app .objective-card h3 .ui-icon{width:16px;height:16px}#app .objective-card p{font-size:10px!important;line-height:1.35!important;margin:3px 6px 5px 0!important}}
@media(max-height:300px){#app .endless-arena{height:min(94px,calc(var(--vh) - 139px - max(8px,var(--safe-bottom))))}}
html.compact #app .endless-arena{height:min(94px,calc(var(--vh) - 139px - max(8px,var(--safe-bottom))))}

#app .mode-progress>small{display:flex;align-items:center;gap:3px}
#app .mode-progress>small .ui-icon{width:12px;height:12px}
@media(max-height:300px){#app #modal[data-kind=slots] .slot-card{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:3px 6px;align-items:center;padding:6px}#app #modal[data-kind=slots] .slot-card canvas{grid-row:1/3;width:58px;height:48px;aspect-ratio:auto;object-fit:contain}#app #modal[data-kind=slots] .slot-card strong{font-size:11px;margin:0}#app #modal[data-kind=slots] .slot-stats{gap:5px}#app #modal[data-kind=slots] .slot-stats .ui-icon{width:14px;height:14px}#app .result-scene canvas{height:min(86px,calc(var(--vh) - 143px - max(8px,var(--safe-bottom))));object-fit:contain}#app .objective-card{grid-template-columns:64px 1fr}#app .objective-card canvas{width:64px;height:64px}}
html.compact #app #modal[data-kind=slots] .slot-card{display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:3px 6px;align-items:center;padding:6px}html.compact #app #modal[data-kind=slots] .slot-card canvas{grid-row:1/3;width:58px;height:48px;aspect-ratio:auto;object-fit:contain}html.compact #app #modal[data-kind=slots] .slot-card strong{font-size:11px;margin:0}html.compact #app #modal[data-kind=slots] .slot-stats{gap:5px}html.compact #app #modal[data-kind=slots] .slot-stats .ui-icon{width:14px;height:14px}html.compact #app .result-scene canvas{height:min(86px,calc(var(--vh) - 143px - max(8px,var(--safe-bottom))));object-fit:contain}html.compact #app .objective-card{grid-template-columns:64px 1fr}html.compact #app .objective-card canvas{width:64px;height:64px}

/* UI illustrations keep their authored proportions through rotation and browser-bar resize.
   The playable board and the spatial mine map have their own adaptive renderers. */
#app :is(.mode-card,.endless-arena,.result-scene,.objective-card,.slot-card,.skin-card,.paint-card) canvas{object-fit:contain;object-position:center}
@media(max-height:440px) and (min-width:540px){
#app #modal[data-kind=shop] :is(.skin-card,.paint-card){flex:0 0 282px;display:grid;grid-template-columns:124px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:8px;row-gap:2px;padding:4px;align-items:center}
#app #modal[data-kind=shop] :is(.skin-card,.paint-card) canvas{grid-column:1;grid-row:1/3;width:124px;height:clamp(60px,calc(var(--vh) - 156px - max(8px,var(--safe-bottom))),100px);aspect-ratio:auto;object-fit:contain}
#app #modal[data-kind=shop] .rig-info{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:22px;gap:1px;padding:0}
#app #modal[data-kind=shop] .rig-info h3{margin:0;font-size:11px}
#app #modal[data-kind=shop] :is(.skin-card,.paint-card)>button{grid-column:2;grid-row:2;min-width:0;min-height:44px;padding:4px;font-size:10px}
#app #modal[data-kind=shop] .rig-perk{white-space:nowrap;line-height:1.2}#app #modal[data-kind=shop] .rig-perk>span{max-width:none;white-space:nowrap}
}
html.compact #app #modal[data-kind=shop] :is(.skin-card,.paint-card){flex:0 0 282px;display:grid;grid-template-columns:124px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:8px;row-gap:2px;padding:4px;align-items:center}
html.compact #app #modal[data-kind=shop] :is(.skin-card,.paint-card) canvas{grid-column:1;grid-row:1/3;width:124px;height:clamp(60px,calc(var(--vh) - 156px - max(8px,var(--safe-bottom))),100px);aspect-ratio:auto;object-fit:contain}
html.compact #app #modal[data-kind=shop] .rig-info{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:22px;gap:1px;padding:0}
html.compact #app #modal[data-kind=shop] .rig-info h3{margin:0;font-size:11px}
html.compact #app #modal[data-kind=shop] :is(.skin-card,.paint-card)>button{grid-column:2;grid-row:2;min-width:0;min-height:44px;padding:4px;font-size:10px}
html.compact #app #modal[data-kind=shop] .rig-perk{white-space:nowrap;line-height:1.2}html.compact #app #modal[data-kind=shop] .rig-perk>span{max-width:none;white-space:nowrap}