/* Pause and character selection: the existing emerald palette, with a quieter game UI. */
@font-face{font-family:Oxanium;src:url('./assets/fonts/Oxanium.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog){--screen-font:Oxanium,'Trebuchet MS',sans-serif;font-family:var(--screen-font)}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) button,:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .eyebrow{font-family:var(--screen-font)}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) button{touch-action:manipulation}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-button{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:58px;margin:0;padding:12px 32px;border:0;border-radius:0;
  background:none;color:#b6d4c4;font:500 15px/1.25 var(--screen-font);letter-spacing:.12em;
  box-shadow:none;clip-path:none;transition:color .18s;
}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-frame{position:absolute;z-index:-1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-surface{fill:#05221a9e;stroke:#6fa98e48;stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .18s,stroke .18s}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-rails{fill:none;stroke:#7abfa069;stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .18s}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-label{font:inherit;position:relative}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-arrow{position:absolute;right:26px;font:300 32px/1 var(--screen-font);color:var(--green)}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-primary{color:#dcfff0;font-weight:600;text-shadow:0 0 16px #49f6bd33}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-primary .cut-surface{fill:#0d3b2cb8;stroke:#49f6bda3}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-primary .cut-rails{stroke:#49f6bd;filter:drop-shadow(0 0 3px #49f6bd66)}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-button:focus-visible{outline:2px solid #d7efdf;outline-offset:5px}
:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-button:active .cut-surface{fill:#1e523ddd;stroke:#d7ffec}
@media(hover:hover){
  :is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-button:hover{color:#dcfff0}
  :is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-button:hover .cut-surface{fill:#0d3b2cc9;stroke:#49f6bd}
  :is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) .cut-button:hover .cut-rails{stroke:#b8ffe0}
}

/* Pause has no enclosing card: one compact, centered menu over the paused scene. */
#pause-screen{padding:max(20px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));align-items:center;background:radial-gradient(ellipse at center,#031710ed 0%,#02120dd9 60%,#020d0ce6 100%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#pause-screen .pause-dialog{width:min(360px,100%);margin:auto;padding:0;border:0;box-shadow:none;background:none;text-align:center}
#pause-screen .pause-dialog::before{display:none}
#pause-screen .pause-heading>.eyebrow{font:400 9px/1.3 var(--screen-font);letter-spacing:.22em;color:#91b7a3}
#pause-screen #pause-title{margin:17px 0 10px;font:500 40px/1.05 var(--screen-font);letter-spacing:.22em;text-indent:.22em;color:#d7efdf}
#pause-screen .pause-heading p{font:400 12px/1.5 var(--screen-font);color:#9ebba9;margin:0}
#pause-screen .pause-actions{display:flex;flex-direction:column;gap:9px;margin-top:28px}
#pause-screen #resume-button{min-height:64px;font-size:18px;letter-spacing:.16em}
#pause-screen #graphics-button .cut-label{display:flex;align-items:center;justify-content:center;gap:12px}
#pause-screen #graphics-quality{font:400 9px/1.3 var(--screen-font);letter-spacing:.06em;color:#91b7a3}
#pause-screen #quit-button{font-size:12px;color:#90b39e}
#pause-screen #quit-button .cut-surface{fill:#03171059;stroke:transparent}
#pause-screen #quit-button .cut-rails{stroke:#6fa98e30}
#pause-screen .pause-shortcut{display:block;margin-top:23px;font:400 8px/1.4 var(--screen-font);color:#769b86;letter-spacing:.1em}
#pause-screen .pause-shortcut kbd{font:inherit;min-width:0;line-height:inherit;margin:0 3px;padding:0;border:0;background:none;color:#a5c5b2}

/* Character selection fits one viewport; photos get the flexible middle area. */
#selection{
  height:100vh;height:100dvh;min-height:0;max-height:100dvh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px auto minmax(156px,1fr) auto auto auto;
  row-gap:16px;justify-items:center;
  padding:max(20px,env(safe-area-inset-top,0px)) max(4.5vw,env(safe-area-inset-right,0px)) max(18px,env(safe-area-inset-bottom,0px)) max(4.5vw,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse at 50% 55%,#0b322582,transparent 65%),#03100e;
}
#selection::before{display:none}
#selection>*{width:min(1120px,100%);min-width:0;grid-area:auto}
#selection .selection-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
#selection .selection-header .text-button{display:flex;align-items:center;gap:8px;min-width:64px;min-height:44px;padding:0;font:500 10px/1.2 var(--screen-font);letter-spacing:.12em;color:#b6d4c4}
#selection .selection-header .text-button>span{font-size:19px}
#selection .selection-brand{font-size:13px;line-height:1.2;letter-spacing:.2em;font-weight:600;color:#d7efdf}
#selection .selection-brand>span{font-size:9px;letter-spacing:.12em;font-weight:400;color:#83aa94;margin-left:5px}
#selection .selection-header .sound-toggle{min-width:64px;height:44px;padding:0 0 0 8px;border:0;background:none;border-radius:0;justify-content:flex-end;color:#b6d4c4}
#selection .selection-header .sound-state{font:400 8px/1 var(--screen-font);letter-spacing:.06em}
#selection .select-heading{margin:0;text-align:center}
#selection .select-heading>.eyebrow{display:block;font:400 8px/1.4 var(--screen-font);letter-spacing:.26em;color:#89b39b}
#selection .select-heading h2{font:500 clamp(22px,2.6vw,34px)/1.15 var(--screen-font);letter-spacing:.07em;margin:9px 0 0;color:#d7efdf}
#selection .select-heading h2 span{color:var(--green);font-weight:600}
#selection .roster-stage{display:grid;grid-template-rows:minmax(110px,1fr) auto;gap:14px;min-height:0;height:100%;width:min(1120px,100%)}
#selection .characters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;width:100%;height:100%;min-height:0;max-width:none;margin:0;padding:0;overflow:visible;grid-area:auto;align-self:stretch}
#selection .character-card{width:100%;height:100%;max-height:none;min-width:0;min-height:110px;align-self:stretch;padding:0;border:1px solid #31534740;background:#082219;transform:none;border-radius:0;box-shadow:none;transition:border-color .2s,box-shadow .2s;scroll-snap-align:none}
#selection .character-card img{width:100%;height:100%;object-fit:cover;object-position:var(--portrait-crop,50% 25%)!important;filter:brightness(.79) saturate(.65);transform:none;transition:filter .2s}
#selection .character-card::after{background:linear-gradient(0deg,#031710f5 0%,#03171099 19%,transparent 55%)}
#selection .character-card.active{transform:none;border-color:#49f6bdbd;box-shadow:0 0 18px #49f6bd12}
#selection .character-card.active img{filter:brightness(1.1) saturate(.85);transform:none}
#selection .character-card:focus-visible{outline:2px solid #dcfff0;outline-offset:4px}
#selection .character-card .number{top:12px;left:12px;font:400 8px/1 var(--screen-font);color:#b4d4c3;letter-spacing:.1em}
#selection .card-selected{top:9px;right:9px;width:19px;height:19px;font:600 10px/1 var(--screen-font);border:1px solid #49f6bd99;border-radius:50%;background:#0b3225d9;color:var(--green)}
#selection .character-info{left:12px;right:4px;bottom:14px}
#selection .character-info small{font:400 7px/1.4 var(--screen-font);letter-spacing:.14em;color:#a7c4b5}
#selection .character-info strong{font:600 clamp(13px,1.65vw,20px)/1.25 var(--screen-font);letter-spacing:.025em;margin:5px 0 0}
#selection .character-info em{display:none}
#selection .selected-info{text-align:center;min-width:0}
#selection .selected-info>strong{display:block;font:600 18px/1.2 var(--screen-font);letter-spacing:.06em;margin:0}
#selection .selected-info>strong span{font:400 9px/1.2 var(--screen-font);letter-spacing:.1em;color:#91b7a3;margin-left:7px}
#selection .selected-info>p{font:400 11px/1.45 var(--screen-font);color:#9ebba9;margin:5px 0 0}
#selection .run-setup{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:28px;padding-top:13px;border-top:1px solid #6fa98e26}
#selection .difficulty-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%;min-width:0;margin:0;padding:0;border:0;background:none;grid-area:auto}
#selection .difficulty-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;grid-area:auto}
#selection .difficulty-copy .eyebrow{font:500 9px/1.3 var(--screen-font);letter-spacing:.12em;color:#b6d4c4;flex:none}
#selection .difficulty-panel p{font:400 9px/1.4 var(--screen-font);color:#91aa9c;margin:0;min-height:0;text-align:right}
#selection .difficulty-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:7px;grid-area:auto}
#selection .difficulty-switch button{position:relative;min-width:0;min-height:48px;padding:7px 4px;border:0;border-top:1px solid transparent;border-bottom:1px solid #6fa98e45;background:none;color:#a7c4b5;font-family:var(--screen-font);box-shadow:none;transition:background .15s,border-color .15s}
#selection .difficulty-switch strong{display:block;font:500 12px/1.2 var(--screen-font);letter-spacing:.1em}
#selection .difficulty-switch small{display:block;font:400 8px/1.2 var(--screen-font);letter-spacing:.04em;margin:5px 0 0;color:#91b7a3}
#selection .difficulty-switch button.active{color:#d7ffec;border-color:#49f6bd9e;background:linear-gradient(90deg,transparent,#49f6bd12,transparent)}
#selection .difficulty-switch button.active strong{color:var(--green)}
#selection .run-options{display:flex;align-items:stretch;justify-content:space-between;gap:18px;min-width:0}
#selection .mode-switch{display:flex;flex:1;min-width:0;width:auto;padding:0;gap:8px;border:0;background:none}
#selection .mode-switch button{display:block;flex:1;min-width:0;min-height:48px;padding:7px 2px;border:0;border-bottom:1px solid #6fa98e45;background:none;font:500 9px/1.3 var(--screen-font);letter-spacing:.07em;color:#88a895}
#selection .mode-switch button span{font:400 8px/1.2 var(--screen-font);letter-spacing:.06em;margin-top:5px}
#selection .mode-switch button.active{background:none;color:#d7efdf;border-bottom-color:var(--green)}
#selection .mode-switch button.active span{color:#a7c4b5}
#selection .assault-toggle{grid-area:auto;display:flex;justify-content:space-between;align-items:center;gap:9px;flex:1.1;min-width:0;width:auto;min-height:48px;padding:7px 0 7px 14px;border:0;border-left:1px solid #6fa98e26;background:none;color:#a7c4b5}
#selection .assault-toggle strong{font:500 9px/1.3 var(--screen-font);letter-spacing:.06em}
#selection .assault-toggle small{font:400 8px/1.3 var(--screen-font);letter-spacing:0;margin:5px 0 0;color:#88a895;white-space:normal}
#selection .assault-toggle .assault-state{position:relative;flex:none;min-width:32px;padding:5px 3px;border:1px solid #6fa98e45;border-radius:2px;background:none;color:#88a895;font:500 9px/1.2 var(--screen-font);letter-spacing:.03em}
#selection .assault-toggle[aria-checked="true"]{background:none;color:#ffd0ad;border-color:#6fa98e26}
#selection .assault-toggle[aria-checked="true"] .assault-state{border-color:#c5866470;color:#ffd0ad;background:#3b211955}
#selection .assault-toggle[aria-checked="true"] small{color:#d9ad91}
#selection .selection-bottom{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:0;width:100%;max-width:none;margin:0;padding:0;border:0;grid-area:auto}
#selection .launch-controls{display:block;width:min(400px,100%);min-width:0}
#selection #start-button{font-size:15px;min-height:58px;padding:12px 40px;letter-spacing:.1em}
#selection .select-footer{display:flex;justify-content:center;gap:24px;margin:0;font:400 7px/1.4 var(--screen-font);letter-spacing:.04em;color:#799a86;text-align:center;grid-area:auto}
#selection .select-footer kbd{font:inherit;min-width:14px;line-height:15px;margin:0 2px;border:0;background:none}
@media(hover:hover){#selection .character-card:hover img{filter:brightness(1) saturate(.8);transform:none}#selection .difficulty-switch button:hover{background:#49f6bd08}#selection .mode-switch button:hover{color:#d7efdf}}

@media(max-width:700px){
  #selection{grid-template-rows:44px auto minmax(156px,1fr) auto auto;gap:14px;padding:max(10px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
  #selection .selection-brand{font-size:11px;letter-spacing:.12em}
  #selection .selection-brand>span{font-size:8px;letter-spacing:.07em}
  #selection .select-heading>.eyebrow{font-size:7px;letter-spacing:.22em}
  #selection .select-heading h2{font-size:clamp(20px,5.6vw,26px);margin-top:7px;letter-spacing:.045em}
  #selection .roster-stage{gap:12px}
  #selection .characters{gap:6px}
  #selection .character-card .number{top:8px;left:6px;font-size:7px}
  #selection .card-selected{top:5px;right:4px;width:15px;height:15px;font-size:8px}
  #selection .character-info{left:5px;right:2px;bottom:10px}
  #selection .character-info small{font-size:6px;letter-spacing:0}
  #selection .character-info strong{font-size:clamp(9px,2.7vw,13px);letter-spacing:0;margin-top:4px}
  #selection .selected-info>strong{font-size:17px;line-height:1.2;margin:0}
  #selection .selected-info>strong span{font-size:8px}
  #selection .selected-info>p{font-size:10px;line-height:1.4;margin-top:4px}
  #selection .run-setup{grid-template-columns:minmax(0,1fr);gap:10px;padding-top:11px}
  #selection .difficulty-copy{gap:10px}
  #selection .difficulty-copy .eyebrow{font-size:8px;letter-spacing:.08em}
  #selection .difficulty-panel p{font-size:8px;line-height:1.4}
  #selection .difficulty-switch button{min-height:46px;padding:6px 3px}
  #selection .difficulty-switch strong{font-size:11px;letter-spacing:.07em}
  #selection .run-options{gap:12px}
  #selection .mode-switch{gap:6px}
  #selection .mode-switch button{min-height:44px;font-size:9px;letter-spacing:0;padding:6px 2px}
  #selection .mode-switch button span{font-size:8px}
  #selection .assault-toggle{min-height:44px;padding:5px 0 5px 12px;gap:6px}
  #selection .assault-toggle strong{font-size:8px;letter-spacing:0}
  #selection .assault-toggle small{font-size:7px;margin-top:4px}
  #selection .assault-toggle .assault-state{min-width:28px;font-size:8px}
  #selection #start-button{min-height:56px;font-size:13px;letter-spacing:.08em}
  #selection .select-footer{display:none}
  #pause-screen .pause-dialog{width:min(340px,100%)}
  #pause-screen #pause-title{font-size:36px}
  #pause-screen .cut-button{min-height:56px;font-size:14px}
  #pause-screen #resume-button{min-height:62px;font-size:17px}
}
@media(max-width:700px) and (max-height:650px){
  #selection{gap:9px;grid-template-rows:44px auto minmax(135px,1fr) auto auto;padding-top:max(6px,env(safe-area-inset-top,0px));padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  #selection .select-heading>.eyebrow{display:none}
  #selection .select-heading h2{font-size:20px;margin:0}
  #selection .roster-stage{grid-template-rows:minmax(95px,1fr) auto;gap:8px}
  #selection .character-card{min-height:95px}
  #selection .selected-info>strong{font-size:15px}
  #selection .selected-info>p{font-size:9px;margin-top:3px}
  #selection .run-setup{padding-top:8px;gap:7px}
  #selection .difficulty-panel{gap:5px}
  #selection #start-button{min-height:50px;font-size:12px}
  #pause-screen .pause-actions{gap:6px;margin-top:20px}
  #pause-screen .cut-button{min-height:50px}
  #pause-screen #resume-button{min-height:56px}
  #pause-screen .pause-shortcut{margin-top:16px}
}
@media(orientation:landscape) and (max-height:560px){
  #selection{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:44px auto minmax(0,1fr) 54px;column-gap:24px;row-gap:10px;padding:8px max(18px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
  #selection .selection-header{grid-column:1/-1;grid-row:1}
  #selection .select-heading{grid-column:1;grid-row:2;text-align:left;align-self:start}
  #selection .select-heading>.eyebrow{display:none}
  #selection .select-heading h2{font-size:18px;margin:0}
  #selection .roster-stage{grid-column:1;grid-row:3/5;gap:8px;grid-template-rows:minmax(80px,1fr) auto}
  #selection .characters{gap:5px}
  #selection .character-card{min-height:80px}
  #selection .character-info{left:4px;bottom:8px}
  #selection .character-info strong{font-size:clamp(8px,1.4vw,12px);letter-spacing:0}
  #selection .character-info small{font-size:6px;letter-spacing:0}
  #selection .character-card .number{left:6px;top:7px;font-size:6px}
  #selection .card-selected{width:14px;height:14px;top:4px;right:3px;font-size:7px}
  #selection .selected-info{text-align:left}
  #selection .selected-info>strong{font-size:14px}
  #selection .selected-info>p{font-size:9px;margin-top:3px}
  #selection .run-setup{grid-column:2;grid-row:2/4;grid-template-columns:minmax(0,1fr);align-self:center;gap:10px;padding-top:0;border:0}
  #selection .difficulty-copy{display:block}
  #selection .difficulty-copy .eyebrow{font-size:8px}
  #selection .difficulty-panel p{text-align:left;font-size:8px;margin-top:5px}
  #selection .difficulty-panel{gap:8px}
  #selection .difficulty-switch strong{font-size:10px}
  #selection .difficulty-switch button{min-height:44px}
  #selection .run-options{gap:10px}
  #selection .assault-toggle{padding-left:10px;min-height:44px}
  #selection .assault-toggle strong{font-size:8px;letter-spacing:0}
  #selection .assault-toggle small{font-size:7px}
  #selection .mode-switch button{font-size:8px;min-height:44px;letter-spacing:0}
  #selection .selection-bottom{grid-column:2;grid-row:4;align-self:end}
  #selection #start-button{min-height:50px;font-size:12px}
  #selection .select-footer{display:none}
  #pause-screen .pause-dialog{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:30px;width:min(650px,100%)}
  #pause-screen .pause-heading>.eyebrow{font-size:7px;letter-spacing:.12em}
  #pause-screen #pause-title{font-size:32px;letter-spacing:.16em;text-indent:.16em;margin:15px 0 8px}
  #pause-screen .pause-heading p{font-size:10px}
  #pause-screen .pause-actions{margin:0;gap:5px}
  #pause-screen .cut-button{min-height:46px;font-size:12px;padding:8px 24px}
  #pause-screen #resume-button{min-height:52px;font-size:15px}
  #pause-screen #graphics-button .cut-label{gap:8px}
  #pause-screen #graphics-quality{font-size:8px}
  #pause-screen #quit-button{font-size:10px}
  #pause-screen .pause-shortcut{display:none}
}
@media(hover:none){#pause-screen .pause-shortcut{display:none}}
@media(prefers-reduced-motion:reduce){:is(#menu,#selection,#pause-screen,#result-screen,#story-dialog,#name-dialog,#menu-settings-dialog) *{transition:none!important}}

/* Run results use the same open, angular menu as pause. */
#result-screen{align-items:center;padding:max(22px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(22px,env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px));background:radial-gradient(ellipse at center,#031710ed 0%,#02120dd9 60%,#020d0ce6 100%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
#result-screen .result-dialog{width:min(420px,100%);min-width:0;margin:auto;padding:0;border:0;box-shadow:none;background:none;text-align:center}
#result-screen .result-dialog::before{display:none}
#result-screen #result-eyebrow{display:block;font:400 9px/1.5 var(--screen-font);letter-spacing:.18em;color:#91b7a3}
#result-screen #result-title{margin:15px 0 12px;font:500 clamp(28px,7vw,38px)/1.15 var(--screen-font);letter-spacing:.04em;color:#d7efdf}
#result-screen #result-title span{color:var(--green)}
#result-screen #result-message{max-width:360px;margin:0 auto;font:400 11px/1.6 var(--screen-font);color:#9ebba9;text-wrap:pretty}
#result-screen .result-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;justify-content:normal;margin:21px 0 10px;padding:0 0 16px;border:0;border-bottom:1px solid #6fa98e26}
#result-screen .result-stats>div:first-child{grid-column:1/-1}
#result-screen .result-stats small{font:400 8px/1.4 var(--screen-font);letter-spacing:.16em;color:#91b7a3}
#result-screen .result-stats strong{margin-top:4px;font:500 19px/1.15 var(--screen-font);font-variant-numeric:tabular-nums;letter-spacing:.05em;color:#cbe6d8}
#result-screen #result-score{font-size:46px;font-weight:500;letter-spacing:.04em;color:#dcfff0}
#result-screen #result-combat{font:400 9px/1.5 var(--screen-font);letter-spacing:.06em;color:#9ebba9;margin:8px 0 0}
#result-screen #record-message{font:400 9px/1.5 var(--screen-font)!important;letter-spacing:.04em;color:#49f6bd!important;margin:7px 0 0}
#result-screen #broadcast{padding:0;margin:12px 0 0}
#result-screen .broadcast-track{height:2px;margin:0 0 6px;background:#244b3666}
#result-screen #broadcast-label{display:block;font:400 8px/1.5 var(--screen-font);letter-spacing:.06em;color:#91b7a3}
#result-screen .online-result-box{padding:13px 0 0;border:0;margin:0 0 7px}
#result-screen #online-result{font:400 10px/1.5 var(--screen-font);letter-spacing:0;color:#9ebba9;margin:0 auto 5px;max-width:360px}
#result-screen #online-result:empty{display:none}
#result-screen #online-retry{min-height:44px;margin:0 auto 3px;padding:8px 14px;font:500 10px/1.3 var(--screen-font);letter-spacing:.08em;color:var(--green)}
#result-screen #result-leaderboard{min-height:48px;margin:7px 0 0;font-size:11px;letter-spacing:.08em}
#result-screen #retry-button{min-height:60px;font-size:16px;letter-spacing:.14em;margin:0}
#result-screen #change-button{min-height:52px;font-size:12px;margin-top:7px}
#result-screen #result-menu-button{min-height:44px;font-size:10px;margin-top:5px;color:#90b39e}
#result-screen .cut-quiet .cut-surface{fill:#03171059;stroke:transparent}
#result-screen .cut-quiet .cut-rails{stroke:#6fa98e30}
@media(max-height:740px){
 #result-screen{padding-top:16px;padding-bottom:16px}
 #result-screen #result-title{font-size:28px;margin:10px 0 8px}
 #result-screen #result-message{font-size:10px;line-height:1.5}
 #result-screen .result-stats{margin-top:14px;gap:10px;padding-bottom:11px}
 #result-screen #result-score{font-size:38px}
 #result-screen #result-leaderboard{min-height:44px}
 #result-screen #retry-button{min-height:54px;font-size:14px}
 #result-screen #change-button{min-height:46px}
}
@media(orientation:landscape) and (max-height:560px){
 #result-screen .result-dialog{width:min(760px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:34px;align-items:center}
 #result-screen .result-dialog>*{grid-column:1}
 #result-screen .online-result-box{grid-column:2;grid-row:1/5;align-self:end;padding:0;margin-bottom:8px}
 #result-screen #retry-button{grid-column:2;grid-row:5;min-height:48px}
 #result-screen #change-button{grid-column:2;grid-row:6;min-height:44px}
 #result-screen #result-menu-button{grid-column:2;grid-row:7;min-height:44px}
 #result-screen .result-stats{margin:12px 0 6px;gap:9px}
 #result-screen #result-title{font-size:27px}
 #result-screen #result-score{font-size:34px}
 #result-screen #result-eyebrow{font-size:7px}
}

/* Main menu follows the pause menu's typography and angular controls. */
#menu .menu-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:12px 0;min-height:0}
#menu .menu-brand{align-self:auto;flex:none;text-align:center}
#menu h1{margin:0;font:500 clamp(56px,9dvh,82px)/1.1 var(--screen-font);letter-spacing:.2em;text-indent:.2em;color:#d7efdf;text-shadow:0 2px 24px #020d0c80;transform:none}
#menu .menu-navigation{width:min(360px,100%);gap:9px;align-self:auto;flex:none}
#menu .cut-button{min-height:58px;padding:12px 32px;font-size:15px;letter-spacing:.12em}
#menu #choose-button{min-height:64px;font-size:18px;letter-spacing:.16em}
#menu .menu-mission{font:400 10px/1.5 var(--screen-font);letter-spacing:.03em;color:#9ebba9;flex:none}
#menu .menu-mission span{color:#9ebba9}
#menu .menu-shade{background:radial-gradient(ellipse at center,#031710b8 0%,#02120dc9 65%,#020d0ce6 100%)}
#menu .menu-photo{opacity:.66}
#menu .menu-footer{font-family:var(--screen-font);letter-spacing:.06em}
@media(max-width:700px){
 #menu .menu-center{gap:25px;padding:10px 0}
 #menu h1{font-size:clamp(54px,10dvh,72px);margin:0}
 #menu .menu-navigation{width:min(360px,100%);gap:9px}
 #menu .menu-mission{font-size:10px}
}
@media(max-width:700px) and (max-height:620px){
 #menu .menu-center{gap:17px;padding:0}
 #menu h1{font-size:48px}
 #menu .menu-navigation{gap:6px}
 #menu .cut-button{min-height:46px;font-size:13px;padding:9px 28px}
 #menu #choose-button{min-height:52px;font-size:16px}
 #menu .menu-mission{font-size:9px}
}
@media(orientation:landscape) and (max-height:560px){
 #menu .menu-center{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:30px;row-gap:8px;padding:0 3vw;align-items:center;justify-items:center}
 #menu .menu-brand{grid-column:1;grid-row:1;align-self:center}
 #menu h1{font-size:clamp(50px,13vw,76px)}
 #menu .menu-navigation{grid-column:2;grid-row:1/3;width:min(330px,100%);gap:5px}
 #menu .cut-button{min-height:46px;font-size:12px;padding:9px 26px}
 #menu #choose-button{min-height:52px;font-size:15px}
 #menu .menu-mission{grid-column:1;grid-row:2;align-self:end;font-size:9px}
}

/* Story is an optional, readable panel reached from the main menu. */
#story-dialog{width:min(500px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:32px;background:#031710f5;border:1px solid #6fa98e45;box-shadow:0 20px 80px #0007}
#story-dialog::before{display:none}
#story-dialog::backdrop{background:#020d0cbd;backdrop-filter:blur(6px)}
#story-dialog>.eyebrow{display:block;padding-right:28px;font:400 8px/1.5 var(--screen-font);letter-spacing:.17em;color:#91b7a3}
#story-dialog h2{font:500 30px/1.2 var(--screen-font);letter-spacing:.03em;margin:20px 0}
#story-dialog .story-copy p{font:400 12px/1.75 var(--screen-font);color:#b6d4c4;margin:0 0 14px}
#story-dialog .story-destination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;margin:20px 0;border-block:1px solid #6fa98e26}
#story-dialog .story-destination span{font:400 8px/1.5 var(--screen-font);letter-spacing:.08em;color:#91b7a3}
#story-dialog .story-destination span:last-child{text-align:right;max-width:110px}
#story-dialog .story-destination strong{font:500 22px/1.2 var(--screen-font);color:var(--green);white-space:nowrap}
#story-dialog .story-actions{display:flex;flex-direction:column;gap:6px}
#story-dialog #story-back{min-height:44px;font-size:10px;color:#90b39e}
#story-dialog #story-back .cut-surface{fill:none;stroke:transparent}
#story-dialog #story-back .cut-rails{stroke:#6fa98e30}
#story-dialog #close-story{min-width:44px;min-height:44px;top:7px;right:7px;color:#b6d4c4}
#story-dialog #close-story:focus-visible{outline:1px solid #dcfff0}
@media(max-width:500px){#story-dialog{padding:28px 22px}#story-dialog h2{font-size:27px}#story-dialog .story-copy p{font-size:11px}#story-dialog .story-destination{gap:8px}#story-dialog .story-destination strong{font-size:20px}#story-dialog .story-destination span{font-size:7px}}
@media(orientation:landscape) and (max-height:400px){#menu .menu-navigation{gap:3px}#menu .cut-button,#menu #choose-button{min-height:44px}#menu .menu-mission{display:none}}

/* Record naming uses the same open composition and angular controls as pause. */
#name-dialog{width:min(380px,calc(100% - 48px));max-width:380px;max-height:calc(100dvh - 40px);margin:auto;padding:4px 5px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center;overflow-y:auto;overflow-x:hidden;color:#d7efdf;scroll-padding:16px;color-scheme:dark}
#name-dialog::before{display:none}
#name-dialog::backdrop{background:radial-gradient(ellipse at center,#031710f5 0%,#02120ded 65%,#020d0cf5 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#name-dialog>.eyebrow{display:block;font:400 9px/1.5 var(--screen-font);letter-spacing:.2em;color:#91b7a3}
#name-dialog #name-title{font:500 clamp(26px,6vw,32px)/1.2 var(--screen-font);letter-spacing:.025em;margin:18px 0 14px;color:#d7efdf}
#name-dialog #name-title span{color:var(--green)}
#name-dialog #name-result{font:400 11px/1.65 var(--screen-font);color:#9ebba9;letter-spacing:0;margin:0 auto;max-width:350px;text-wrap:pretty}
#name-dialog #name-form{margin:25px 0 0}
#name-dialog label{font:500 9px/1.5 var(--screen-font);letter-spacing:.12em;text-align:left;color:#a7c4b5}
#name-dialog #player-name{display:block;width:100%;min-height:52px;margin:9px 0 0;padding:12px 14px;border:0;border-bottom:1px solid #6fa98e69;border-radius:0;background:#05221a99;box-shadow:none;color:#dcfff0;font:400 16px/1.4 var(--screen-font);letter-spacing:.04em;transition:border-color .15s,background .15s;scroll-margin:20px;outline:none}
#name-dialog #player-name::placeholder{color:#769b86;opacity:1;font-weight:400;letter-spacing:.02em}
#name-dialog #player-name:focus{border-bottom-color:var(--green);background:#0d3b2ca6;outline:1px solid #49f6bd69;outline-offset:3px}
#name-dialog #name-note{font:400 10px/1.65 var(--screen-font);color:#91aa9c;letter-spacing:0;margin:13px 0 0;text-align:left}
#name-dialog #name-error{min-height:18px;margin:8px 0 10px;font:400 11px/1.5 var(--screen-font);letter-spacing:0;color:#d7efdf;overflow-wrap:anywhere}
#name-dialog #name-submit{min-height:60px;font-size:12px;letter-spacing:.1em;padding:12px 28px;margin:0}
#name-dialog #name-submit:disabled{opacity:.6;cursor:wait}
#name-dialog #guest-button{min-height:52px;font-size:12px;letter-spacing:.12em;margin-top:8px}
@media(max-height:600px){
 #name-dialog{max-height:calc(100dvh - 24px)}
 #name-dialog #name-title{font-size:25px;margin:12px 0 10px}
 #name-dialog #name-form{margin-top:18px}
 #name-dialog #name-submit{min-height:52px}
 #name-dialog #guest-button{min-height:46px;margin-top:5px}
}
@media(prefers-reduced-motion:reduce){#name-dialog #player-name{transition:none}}

/* Settings share the minimal pause menu, with compact difficulty tabs. */
#menu-settings-dialog{width:min(380px,calc(100% - 48px));max-height:calc(100dvh - 40px);padding:24px 5px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center;overflow-y:auto;overflow-x:hidden;scroll-padding:16px;color:#d7efdf}
#menu-settings-dialog::before{display:none}
#menu-settings-dialog::backdrop{background:radial-gradient(ellipse at center,#031710f5 0%,#02120ded 65%,#020d0cf5 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#menu-settings-dialog>.eyebrow{display:block;font:400 9px/1.5 var(--screen-font);letter-spacing:.2em;color:#91b7a3}
#menu-settings-dialog #settings-title{font:500 clamp(26px,6vw,32px)/1.2 var(--screen-font);letter-spacing:.025em;margin:18px 0 28px;color:#d7efdf}
#menu-settings-dialog #settings-title span{color:var(--green)}
#menu-settings-dialog #close-menu-settings{top:0;right:0;min-width:44px;min-height:44px;padding:0;border:0;background:none;color:#a7c4b5;font:300 25px/1 var(--screen-font)}
#menu-settings-dialog #close-menu-settings:focus-visible{outline:1px solid #dcfff0;outline-offset:-3px}
#menu-settings-dialog .menu-settings-level>.eyebrow{font:500 9px/1.4 var(--screen-font);letter-spacing:.12em;margin:0 0 13px;color:#a7c4b5}
#menu-settings-dialog .difficulty-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;width:100%}
#menu-settings-dialog .difficulty-switch button{min-width:0;min-height:62px;padding:10px 3px;border:0;border-top:1px solid transparent;border-bottom:1px solid #6fa98e45;border-radius:0;background:none;box-shadow:none;color:#a7c4b5;transition:background .15s,border-color .15s}
#menu-settings-dialog .difficulty-switch strong{font:500 12px/1.3 var(--screen-font);letter-spacing:.06em}
#menu-settings-dialog .difficulty-switch small{font:400 8px/1.3 var(--screen-font);margin-top:7px;letter-spacing:.05em;color:#91b7a3}
#menu-settings-dialog .difficulty-switch button.active{border-color:#49f6bd9e;background:linear-gradient(90deg,transparent,#49f6bd12,transparent);box-shadow:none}
#menu-settings-dialog .difficulty-switch button.active strong{color:var(--green)}
#menu-settings-dialog .difficulty-switch button.active small{color:#b6d4c4}
#menu-settings-dialog .difficulty-switch button:focus-visible{outline:1px solid #dcfff0;outline-offset:3px}
#menu-settings-dialog [data-difficulty-description]{font:400 10px/1.6 var(--screen-font);letter-spacing:0;color:#9ebba9;min-height:32px;margin:13px 0 22px;text-align:center}
#menu-settings-dialog .settings-audio{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:70px;margin:0;padding:12px 28px;border:0;background:none;text-align:left}
#menu-settings-dialog .settings-audio strong{font:500 11px/1.35 var(--screen-font);letter-spacing:.06em;color:#b6d4c4}
#menu-settings-dialog .settings-audio small{font:400 8px/1.4 var(--screen-font);letter-spacing:.03em;color:#91b7a3;margin-top:5px}
#menu-settings-dialog .settings-audio .sound-state{font:500 10px/1.3 var(--screen-font);letter-spacing:.06em;min-width:28px;padding:5px 0;border:0;background:none;text-align:right;color:var(--green)}
#menu-settings-dialog #settings-done{min-height:60px;font-size:13px;letter-spacing:.1em;margin-top:20px;padding:12px 32px}
@media(hover:hover){#menu-settings-dialog .difficulty-switch button:hover{background:#49f6bd08}#menu-settings-dialog #close-menu-settings:hover{color:var(--green)}}
@media(max-height:600px){#menu-settings-dialog{max-height:calc(100dvh - 24px);padding-top:20px}#menu-settings-dialog #settings-title{font-size:25px;margin:12px 0 20px}#menu-settings-dialog .difficulty-switch button{min-height:54px}#menu-settings-dialog [data-difficulty-description]{margin-bottom:14px}#menu-settings-dialog .settings-audio{min-height:62px}#menu-settings-dialog #settings-done{min-height:52px;margin-top:14px}}
@media(prefers-reduced-motion:reduce){#menu-settings-dialog .difficulty-switch button{transition:none}}