/* ZONE STRIKE — framed panels for the menu screens (2026-10-01)
   Pause, game over, operation clear and the arena / versus screens sit on one frame (assets/ui/panel*.webp,
   cut from the UI stock set) drawn with border-image: the four ornamented corners keep their shape and only
   the plain stretches between them grow. Slices are in the WebP's pixels (1.4849 px per frame unit);
   --pk is how many CSS px one frame unit takes on screen, so the ornaments shrink on small screens.
   Every border-image here sits on a 1px transparent border: WebKit (Safari) skips border images on zero-width borders.
   Loaded after interface.css / story-interface.css / fx-plates.css. */
.result-shell,.pause-shell{--pk:clamp(.3px,.046vw,.6px);--panel:url(../assets/ui/panel.webp);position:relative;isolation:isolate;padding:max(30px,calc(var(--pk)*92)) max(24px,calc(var(--pk)*82)) max(34px,calc(var(--pk)*104)) max(26px,calc(var(--pk)*92))}
.result-shell::before,.pause-shell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid transparent;
 border-image-source:var(--panel);border-image-slice:167 584 276 953 fill;border-image-width:calc(var(--pk)*112.15) calc(var(--pk)*393.6) calc(var(--pk)*185.9) calc(var(--pk)*642.1);border-image-repeat:stretch}
.result-screen.gameover .result-shell{--panel:url(../assets/ui/panel-r.webp)}
.result-screen.gameover .result-shell>.eyebrow{color:#f58a7c}

/* entrance: the frame draws in from the top-left corner, then the contents settle */
.screen:not(.hidden) .result-shell::before,.screen:not(.hidden) .pause-shell::before{animation:fxpPanelIn .45s cubic-bezier(.2,.85,.25,1) both}
.screen:not(.hidden) .result-shell>*,.screen:not(.hidden) .pause-shell>*{animation:fxpPanelText .4s .12s cubic-bezier(.2,.85,.25,1) both}
@keyframes fxpPanelIn{from{opacity:0;clip-path:inset(0 100% 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes fxpPanelText{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* figures: framed cells instead of two long rules */
.result-shell .result-stats{border:0;padding:0;gap:8px}
.result-shell .result-stats>div{position:relative;padding:12px 14px 13px;background:rgba(240,237,226,.035);border:1px solid rgba(231,235,223,.13)}
.result-shell .result-stats>div::before{content:"";position:absolute;left:-1px;top:-1px;width:10px;height:2px;background:var(--accent)}
.result-screen.gameover .result-stats>div::before{background:#ef4b3f}

@media(max-width:700px){
 .result-shell .result-stats>div{padding:10px 11px 11px}
}
@media(prefers-reduced-motion:reduce){
 .screen:not(.hidden) .result-shell::before,.screen:not(.hidden) .pause-shell::before,.screen:not(.hidden) .result-shell>*,.screen:not(.hidden) .pause-shell>*{animation:none}
}
/* the arena result has four figures: one row of four instead of three and an orphan */
.arena-result .result-shell .result-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.arena-result .result-shell .result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- briefing ---------- */
/* map monitor framed by assets/ui/mapframe.webp (int2 #8), drawn as the map's own border-image pushed outwards
   so the existing ::before scanlines / ::after sweep and overflow:hidden stay as they are. The frame's inside is filled
   with the map's old background colour (#15272a), so the square map no longer shows past the chamfered corners.
   slices 282 375 190 686 px at 1.2522 px per frame unit; --mk = CSS px per frame unit */
#briefingMap{--mk:clamp(.26px,.05vw,.62px);--mo:clamp(6px,.8vw,12px);border:1px solid transparent;background:transparent;border-image-source:url(../assets/ui/mapframe.webp);border-image-slice:282 375 190 686 fill;border-image-width:calc(var(--mk)*225.15) calc(var(--mk)*299.6) calc(var(--mk)*152.1) calc(var(--mk)*548.1);border-image-outset:var(--mo);border-image-repeat:stretch;margin:calc(18px + var(--mo)) var(--mo) var(--mo)}
@media(max-width:700px){#briefingMap{margin-top:calc(12px + var(--mo))}}
/* frame choice cards (briefing, arena lobby, versus): the same corner tick as the figures on the result panels, in the frame's colour */
.vs-frame{position:relative}
.vs-frame::before{content:"";position:absolute;left:-1px;top:-1px;width:10px;height:2px;background:var(--ranker);opacity:.5;pointer-events:none;transition:width .2s,opacity .2s}
.vs-frame.selected::before{width:22px;opacity:1}

/* ---------- flight manual and archive dialogs ---------- */
/* these boxes scroll their own contents, so the frame is the box's own border-image (it stays put while the text scrolls) */
#howModal .card,.archive-shell{--pk:clamp(.3px,.046vw,.6px);border:1px solid transparent;background:transparent;border-image-source:url(../assets/ui/panel.webp);border-image-slice:167 584 276 953 fill;border-image-width:calc(var(--pk)*112.15) calc(var(--pk)*393.6) calc(var(--pk)*185.9) calc(var(--pk)*642.1);border-image-repeat:stretch;padding:max(30px,calc(var(--pk)*92)) max(24px,calc(var(--pk)*82)) max(34px,calc(var(--pk)*104)) max(26px,calc(var(--pk)*92))}

/* ---------- arena lobby ---------- */
/* a locked ranker shows an empty hexagon (the emblem's own outline) with a dim "?" instead of a blank space */
.arena-emblem.unknown{position:relative;background:currentColor;clip-path:polygon(50% 3.7%,90.1% 26.9%,90.1% 73.1%,50% 96.3%,9.9% 73.1%,9.9% 26.9%)}
.arena-emblem.unknown::before{content:"";position:absolute;inset:1.5px;background:#0d1618;clip-path:inherit}
.arena-emblem.unknown::after{content:"?";position:relative;font-family:var(--disp);font-size:15px;line-height:1;color:rgba(240,237,226,.4)}
.arena-card.locked .arena-card-info strong{letter-spacing:.3em;color:rgba(240,237,226,.55)}

/* the title screen is left as it is: its type-led layout already carries the look, and frames would only crowd it */

/* ---------- combat simulation (training mode, js/story/training.js) ---------- */
#trainPanel{--pk:.22px;position:fixed;z-index:17;left:50%;top:calc(20px + env(safe-area-inset-top,0px));width:min(470px,calc(100vw - 32px));transform:translate(-50%,-8px);opacity:0;visibility:hidden;pointer-events:none;isolation:isolate;padding:22px 24px 22px 26px;color:var(--ink);transition:opacity .25s,transform .25s,visibility 0s .25s}
#trainPanel::before{content:"";position:absolute;inset:0;z-index:-1;border:1px solid transparent;border-image-source:url(../assets/ui/panel.webp);border-image-slice:167 584 276 953 fill;border-image-width:calc(var(--pk)*112.15) calc(var(--pk)*393.6) calc(var(--pk)*185.9) calc(var(--pk)*642.1);border-image-repeat:stretch;opacity:.96}
#trainPanel.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .25s}
body:not([data-state="play"]) #trainPanel,.cinematic #trainPanel{visibility:hidden;opacity:0}
#trainPanel .tp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#trainPanel .tp-step{font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--accent-light)}
#trainPanel .tp-skip{pointer-events:auto;min-height:30px;padding:0 10px;border:1px solid var(--line);background:rgba(9,16,18,.6);color:var(--ink);font-size:9px;font-weight:650;letter-spacing:.14em}
#trainPanel .tp-skip span{margin-left:6px;font-size:8px;letter-spacing:.06em;color:var(--muted)}
#trainPanel .tp-skip:hover{border-color:rgba(240,237,226,.5)}
#trainPanel .tp-title{display:flex;align-items:baseline;gap:12px;margin-top:8px}
#trainPanel .tp-title b{font-family:var(--disp);font-size:24px;font-weight:500;letter-spacing:.08em;line-height:1.1}
#trainPanel .tp-title span{font-size:12px;font-weight:650;letter-spacing:.14em;color:var(--fxp-sub,#e3d5c2)}
#trainPanel .tp-text{margin-top:8px;font-size:12px;line-height:1.75;color:#d6dbd2}
#trainPanel .tp-input{margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.06em;color:#f3c9a6}
#trainPanel .tp-input kbd{display:inline-block;margin-right:3px;padding:2px 6px;border:1px solid rgba(240,237,226,.3);font-size:10px;color:#f0ede2}
#trainPanel .tp-count{display:flex;gap:5px;margin-top:12px}
#trainPanel .tp-count i{width:22px;height:4px;background:rgba(240,237,226,.18);transition:background .2s}
#trainPanel .tp-count i.on{background:var(--accent)}
#trainPanel.done .tp-title b{color:var(--accent-light)}
/* the campaign readouts that mean nothing in the simulation */
body.training #topleft .route-track,body.training #topleft .mission-kicker,body.training #objectiveText,body.training #topright,body.training #missionRadio{display:none!important}
@media(max-width:700px){
 #trainPanel{top:calc(112px + env(safe-area-inset-top,0px));padding:18px 18px 18px 20px}
 #trainPanel .tp-title b{font-size:20px}
 #trainPanel .tp-text{font-size:11.5px}
}
@media(max-height:530px) and (orientation:landscape){
 #trainPanel{top:calc(10px + env(safe-area-inset-top,0px));width:min(430px,46vw);padding:14px 16px 14px 18px}
 #trainPanel .tp-title{margin-top:4px}#trainPanel .tp-title b{font-size:17px}
 #trainPanel .tp-text{font-size:10.5px;line-height:1.6;margin-top:4px}
 #trainPanel .tp-input{margin-top:4px;font-size:10px}#trainPanel .tp-count{margin-top:7px}
}
/* entries: under the flight manual's OK, and under the deploy button of operation 01 */
#howModal .how-train{width:100%;margin-top:10px;justify-content:space-between}
#howModal .how-train span{font-size:8px;letter-spacing:.14em;color:var(--accent-light)}
.briefing-train{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;max-width:420px;margin-top:12px;min-height:40px;padding:0 14px;border:1px solid var(--line);background:rgba(9,16,18,.55);color:var(--ink);font-size:11px;letter-spacing:.04em;text-align:left;cursor:pointer;transition:border-color .16s,background .16s}
.briefing-train[hidden]{display:none}
.briefing-train span{flex:0 0 auto;font-size:8px;letter-spacing:.14em;color:var(--accent-light)}
.briefing-train:hover{border-color:rgba(240,237,226,.5);background:rgba(240,237,226,.06)}