:root {
  color-scheme: dark;
  --bg: #0a1119;
  --panel: #111e29;
  --raised: #182835;
  --line: #314453;
  --soft-line: #263845;
  --text: #e6edf0;
  --subtle: #aebfc8;
  --muted: #91a6b3;
  --ice: #93dedc;
  --amber: #e7bb78;
  --r: 8px;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: radial-gradient(ellipse at 80% 2%, #13212c 0%, transparent 55%), var(--bg); min-width: 280px; }
button, input, select { font: inherit; }
button, select, input[type="range"], .switch { cursor: pointer; }
button, select, input { color: inherit; }
button { touch-action: manipulation; }
button:disabled, input:disabled, select:disabled { cursor: default; opacity: .43; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin: 0; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); border: 0; }

.masthead { border-bottom: 1px solid var(--soft-line); background: #0c151e; }
.mast-inner, .workspace { width: min(100%,1696px); margin-inline: auto; padding-inline: clamp(16px,3.4vw,58px); }
.mast-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 73px; }
.identity, .identity-type, .guide-link, .section-heading, .stage-name, .phase-nav, .phase-toolbar, .scenario-field, .status, .keyboard-strip, .transport-row, .switch, .toggle-row { display: flex; align-items: center; }
.identity { gap: 12px; }
.identity-glyph { width: 34px; height: 43px; filter: drop-shadow(0 0 9px #67c5ca32); }
.identity-type { gap: 15px; }
.identity-type strong { font-size: 21px; letter-spacing: .09em; font-weight: 750; }
.identity-type span { border-left: 1px solid #3b4b57; padding: 3px 0 3px 15px; color: var(--subtle); font-size: 13px; font-weight: 600; letter-spacing: .07em; }
.guide-link { gap: 8px; color: #cadddf; text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 0 8px 6px; }
.mast-links { display: flex; align-items: center; gap: 18px; }
.guide-link .icon { width: 16px; height: 16px; }
.guide-link span:last-child { color: var(--muted); }
.guide-link:hover { color: #f4fcff; text-decoration: underline; text-underline-offset: 4px; }
.workspace { padding-top: 21px; padding-bottom: 32px; }
.phase-toolbar { justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 17px; }
.phase-nav { gap: 4px; }
.nav-label, .scenario-field > span { font-size: 12px; font-weight: 650; letter-spacing: .04em; color: var(--subtle); }
.nav-label { margin-right: 10px; }
.phase-nav button { min-width: 46px; min-height: 32px; padding: 5px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--muted); font: 650 14px/1.25 var(--mono); }
.phase-nav button:hover { color: var(--text); background: var(--raised); }
.phase-nav button:is(.active,.selected,[aria-pressed=true],[aria-current]:not([aria-current=false]),[data-active=true]) { background: #1e343d; color: #b4f1ed; border-color: #45656d; }
.scenario-field { gap: 10px; }
select, input[type=number] { min-width: 0; height: 36px; border-radius: 4px; border: 1px solid #3c515f; background-color: #10202c; padding: 0 10px; font-size: 13px; font-weight: 550; }
select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg,transparent 50%,#a6b8c2 50%),linear-gradient(135deg,#a6b8c2 50%,transparent 50%); background-repeat: no-repeat; background-size: 5px 5px; background-position: right 13px center,right 8px center; }
select:hover, input[type=number]:hover { border-color: #718b98; }
.scenario-field select { width: clamp(200px,20vw,320px); height: 36px; }
.console-grid { display: grid; grid-template-columns: minmax(0,2.55fr) minmax(278px,1fr); align-items: start; gap: 16px; }
.exercise-column, .briefing-column { display: grid; align-content: start; gap: 14px; min-width: 0; }
.stage-panel, .panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.stage-panel { overflow: hidden; box-shadow: 0 10px 30px #0002; }
.stage-head { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 15px 20px; min-height: 64px; border-bottom: 1px solid #35515f; background: linear-gradient(110deg,#1a2d39,#14222d 78%); }
.stage-name { gap: 12px; min-width: 0; }
.stage-tools { display: flex; align-items: center; gap: 12px; }
.stage-tools > * { white-space: nowrap; }
body:has(#fixedView:checked) :is(#camera,.follow-help),
body:not(:has(#fixedView:checked)) .fixed-help { display: none; }
.phase-tag { display: inline-flex; align-items: center; border: 1px solid #42747a; border-radius: 3px; color: #acf1eb; background: #16363c; padding: 4px 7px; white-space: nowrap; font: 700 11px/1.25 var(--mono); letter-spacing: .04em; }
h1 { color: #f1f6f6; font-size: clamp(19px,1.7vw,28px); line-height: 1.35; letter-spacing: .04em; font-weight: 720; text-wrap: pretty; }
.status { flex-shrink: 0; gap: 7px; font-size: 12px; color: #d0dedd; }
.status::before { content: ""; width: 6px; height: 6px; background: var(--ice); box-shadow: 0 0 7px #87ddda70; border-radius: 50%; }
.destination-readout { display: flex; align-items: baseline; gap: 8px; padding: 5px 14px; min-height: 28px; background: #15252b; color: #abbcc3; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.45; }
.destination-readout[hidden] { display: none; }
.destination-key { align-self: center; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; }
.destination-readout.has-destination { color: #87f3b5; }
#destinationState { white-space: nowrap; }
#destinationName { color: #f0f7f3; font-size: 13px; overflow-wrap: anywhere; }
#destinationPreview { display: inline-block; margin-inline-start: .65em; color: #94e5fc; }
#destinationPreview::before { content: ''; display: inline-block; width: .66em; height: .66em; margin-inline-end: .35em; border: 1.5px dashed currentColor; border-radius: 50%; }
#destinationNotice { color: #d2dce0; font-weight: 500; }
#destinationPreview[hidden], #destinationNotice[hidden] { display: none; }
.self-marker-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 16px; padding: 5px 14px 7px; background: var(--panel); border-bottom: 1px solid var(--line); }
.self-marker-bar[hidden] { display: none; }
.self-marker-caption { display: grid; gap: 2px; font-size: 12px; line-height: 1.3; }
#selfMarkerTitle { color: var(--text); }
#selfMarkerValue { color: var(--ice); }
#retryMarker { align-self: center; white-space: nowrap; }
.self-marker-choices { flex: 1 1 320px; max-width: 470px; min-width: 0; display: grid; grid-template-columns: 3fr 3fr 2fr auto; align-items: end; gap: 9px; }
.self-marker-group { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.self-marker-family { flex-basis: 100%; color: var(--subtle); font-size: 11px; line-height: 1.15; }
.self-marker-choice, .self-marker-clear { min-height: 35px; padding: 2px; border: 1px solid #47616c; border-radius: 4px; background: #1a2b37; color: #e5eff1; }
.self-marker-choice { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.self-marker-choice img { width: 30px; max-width: 100%; height: 30px; object-fit: contain; }
.self-marker-clear { padding-inline: 7px; font-size: 12px; }
.self-marker-choice:hover, .self-marker-clear:enabled:hover { background: #29424d; }
.self-marker-choice[aria-pressed=true] { border-color: var(--ice); box-shadow: inset 0 0 0 1px var(--ice); background: #294d50; }
@media (max-width: 620px) {
  .self-marker-bar { gap: 4px 8px; padding: 4px 8px 5px; }
  .self-marker-caption { display: flex; align-items: baseline; gap: 8px; }
  .self-marker-choices { gap: 6px; }
  .self-marker-clear { padding-inline: 5px; }
}
@media (max-width: 350px) {
  .self-marker-choices { gap: 3px; }
  .self-marker-choice { padding-inline: 0; }
}
.stage-viewport { position: relative; isolation: isolate; background: #0a1c2a; }
#arena { height: clamp(500px,57vh,780px); width: 100%; position: relative; overflow: hidden; touch-action: none; }
#arena > canvas { display: block; }
#arena:focus-visible { outline-offset: -3px; }
.camera-button { position: absolute; z-index: 4; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #6d8c968c; border-radius: 4px; padding: 6px 10px; background: #10232dd9; color: #deebee; font-size: 12px; font-weight: 600; backdrop-filter: blur(6px); }
.camera-button::before { content: ""; width: 13px; height: 10px; border: 1.5px solid currentColor; border-radius: 55%; background: radial-gradient(circle,currentColor 0 2px,transparent 2.2px); transform: rotate(-8deg); }
.camera-button:hover { background: #203a48; }
.touch-pad { display: none; position: absolute; z-index: 4; left: 10px; bottom: 10px; grid-template-columns: repeat(3,40px); gap: 3px; }
.touch-pad button { height: 38px; touch-action: none; -webkit-user-select: none; user-select: none; background: #11242fd4; border: 1px solid #8ca9b27d; border-radius: 5px; font: 650 19px/1 system-ui,sans-serif; color: #d9eced; }
.touch-pad button:active { background: #395d65; }
.transport { display: grid; gap: 12px; padding: 13px 19px 15px; border-top: 1px solid var(--line); }
.seek-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; }
#timeline { display: block; width: 100%; margin: 0; accent-color: var(--ice); height: 18px; }
#clock { color: #d1e4e6; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.transport-row { gap: 7px; }
.primary-button, .text-button { min-height: 35px; border-radius: 4px; padding: 6px 12px; font-size: 13px; font-weight: 650; }
.primary-button { background: #9adeda; color: #0b272c; border: 1px solid #b4eee9; min-width: 100px; }
.primary-button:hover { background: #b8ebe8; }
.text-button { border: 1px solid #344b59; background: #192a36; color: #d6e1e5; }
.text-button:hover { background: #243c49; border-color: #52717e; }
.speed-field { margin-left: auto; }
#speed { height: 35px; font-family: var(--mono); }
.keyboard-strip { gap: 8px 18px; flex-wrap: wrap; padding: 9px 19px; border-top: 1px solid var(--soft-line); background: #0e1a24; color: #a0b2bc; font-size: 11px; line-height: 1.5; }
.keyboard-strip > span { white-space: nowrap; }
kbd { font: 500 10px/1.3 var(--mono); padding: 1px 4px; border: 1px solid #3b4a56; border-radius: 3px; color: #d1dce0; background: #172532; }
kbd + kbd { margin-left: 2px; }

.section-heading { gap: 9px; margin-bottom: 13px; }
.section-heading .icon { color: var(--ice); width: 18px; height: 18px; }
h2 { font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: .045em; }
.panel { padding: 17px 18px; }
#party { display: grid; gap: 4px; }
#party > * { display: flex; gap: 8px; align-items: center; min-width: 0; min-height: 26px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; background: #162531; color: #c6d2d8; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
#party > :is(.self,.mine,.is-player,[data-self=true]) { border-color: #7f6e4f; background: #302e28; }
#party :is(.slot,.party-role) { color: #dbe6eb; font: 600 12px/1.3 var(--mono); }
#party :is(.debuff,.party-debuff) { color: #b9c9d2; }
#feedback { max-height: 230px; overflow: auto; color: var(--subtle); font-size: 12px; line-height: 1.65; scrollbar-width: thin; }
#feedback > * + * { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--soft-line); }
#feedback :is(.pass,.ok,[data-result=pass]) { color: #a3ddbd; }
#feedback :is(.fail,.ng,[data-result=fail]) { color: #f1aaa5; }
.settings-panel .section-heading { margin-bottom: 16px; }
.fields-grid { display: grid; grid-template-columns: minmax(65px,.65fr) minmax(130px,1.7fr) minmax(75px,.7fr) minmax(94px,1fr) minmax(115px,1.12fr); gap: 10px; }
.control-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.control-field > span { font-size: 11px; color: var(--subtle); font-weight: 600; }
.control-field > :is(input,select) { width: 100%; }
#role, #seed { font-family: var(--mono); }
.toggle-row { flex-wrap: wrap; gap: 11px 16px; border-top: 1px solid var(--soft-line); margin-top: 15px; padding-top: 13px; }
.switch { position: relative; gap: 7px; font-size: 12px; color: #b9cbd3; min-height: 24px; }
.switch input { position: absolute; width: 28px; height: 19px; opacity: 0; left: 0; margin: 0; }
.switch-track { width: 27px; height: 15px; border-radius: 12px; background: #20333f; border: 1px solid #506472; flex-shrink: 0; }
.switch-track::after { content: ""; display: block; width: 9px; height: 9px; margin: 2px 0 0 2px; border-radius: 50%; background: #9eacb3; transition: transform .16s,background .16s; }
.switch input:checked + .switch-track { background: #326365; border-color: #6caba8; }
.switch input:checked + .switch-track::after { background: #c4f8ec; transform: translateX(12px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--amber); outline-offset: 3px; }
.switch input:disabled ~ * { opacity: .45; }

.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.primary-button::before { content: ""; display: block; width: 8px; height: 10px; background: currentColor; clip-path: polygon(0 0,100% 50%,0 100%); }
.primary-button.playing::before { width: 9px; clip-path: none; background: linear-gradient(to right,currentColor 0 3px,transparent 3px 6px,currentColor 6px); }
#party .party-row { column-gap: 9px; padding: 3px 5px; }
#party .party-role { display: inline-flex; width: 32px; justify-content: center; align-items: center; align-self: flex-start; flex-shrink: 0; min-height: 20px; border: 1px solid; border-radius: 3px; }
#party .tank { color: #bfd7fb; background: #283a53; border-color: #425979; }
#party .heal { color: #baecd3; background: #203d37; border-color: #385e52; }
#party .dps { color: #f1c6c0; background: #432e35; border-color: #64434b; }
#party .self { box-shadow: inset 2px 0 0 var(--amber); }
#party .self .party-debuff { color: #f2d9ae; }
#feedback { scrollbar-color: #405862 transparent; overscroll-behavior-y: contain; }
.result-row { display: grid; grid-template-columns: 33px minmax(0,1fr) auto; align-items: baseline; gap: 6px; }
.result-row time { color: var(--muted); font: 11px/1.45 var(--mono); }
.result-row span { color: #d1dfe4; }
.result-row strong { font-size: 11px; font-weight: 650; white-space: nowrap; }
.result-phase { display: block; color: #d6e7e8; padding: 5px 0; }
.credits { border-top: 1px solid var(--soft-line); background: #0b141b; }
.credits-inner { width: min(100%,1696px); margin-inline: auto; padding: 14px clamp(16px,3.4vw,58px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 18px; font-size: 11px; line-height: 1.65; color: var(--muted); }
.credits b { font-weight: 550; color: #b2c4cb; }
.credits a { display: inline-block; padding-inline-start: 5px; color: var(--ice); text-underline-offset: 3px; }
.license-info summary { cursor: pointer; color: #b2c4cb; }
.license-info p { margin: 5px 0 0; }

@media (max-width: 1140px) {
  .fields-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .console-grid { grid-template-columns: minmax(0,2.14fr) minmax(250px,1fr); gap: 12px; }
  .panel { padding: 15px; }
}
@media (max-width: 840px) {
  .console-grid { grid-template-columns: 1fr; }
  .briefing-column { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  #arena { height: clamp(400px,57vh,650px); }
}
@media (pointer: coarse), (max-width: 620px) {
  .touch-pad { display: grid; }
  .keyboard-strip { display: none; }
  .speed-field select, .text-button, .primary-button { min-height: 40px; }
}
@media (max-width: 620px) {
  .mast-inner, .workspace { padding-inline: 10px; }
  .mast-inner { min-height: 58px; }
  .identity { gap: 6px; }
  .identity-glyph { width: 27px; height: 34px; }
  .identity-type { align-items: flex-start; flex-direction: column; gap: 1px; }
  .identity-type strong { font-size: 17px; line-height: 1.16; }
  .identity-type span { border: 0; padding: 0; font-size: 10px; }
  .guide-link { font-size: 12px; }
  .mast-links { gap: 10px; }
  .workspace { padding-top: 12px; }
  .phase-toolbar { gap: 10px; margin-bottom: 11px; }
  .phase-nav { gap: 2px; }
  .phase-nav button { min-width: 35px; min-height: 34px; padding-inline: 6px; }
  .nav-label, .scenario-field > span { display: none; }
  .scenario-field { flex: 1 1 140px; min-width: 0; }
  .scenario-field select { width: 100%; font-size: 12px; }
  .stage-head { padding: 10px 12px; min-height: 47px; gap: 7px; }
  .stage-name { gap: 7px; }
  h1 { font-size: 17px; }
  .phase-tag { font-size: 10px; padding: 3px 5px; }
  .status { font-size: 10px; gap: 4px; }
  #arena { height: clamp(335px,53svh,510px); }
  .transport { padding: 10px; gap: 8px; }
  .text-button, .primary-button { padding-inline: 9px; font-size: 12px; }
  .primary-button { min-width: 75px; }
  .transport-row { gap: 4px; }
  #clock { font-size: 10px; }
  .exercise-column, .briefing-column { gap: 10px; }
  .fields-grid { grid-template-columns: minmax(80px,1fr) minmax(0,1.3fr); }
  .settings-panel, .panel { padding: 13px; }
  .briefing-column { grid-template-columns: 1fr; }
  .control-field > :is(input,select) { min-height: 40px; }
  .camera-button { right: 7px; top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
.seed-tools{display:flex;align-items:stretch;min-width:0;gap:4px}
.seed-tools input{width:0;min-width:0;flex:1;background:#101e29;color:inherit;border:1px solid #34505e;border-radius:5px;padding:6px}
.seed-tools button{border:1px solid #385968;color:#b6e9ec;background:#203846;border-radius:5px;padding:0 8px;cursor:pointer}
.effect-icon:has(img){display:inline-flex;width:19px;height:25px;flex:0 0 auto;border:none;background:transparent;padding:0}
.effect-icon img{height:100%;width:100%;object-fit:contain}
@media (max-width:620px){#personalStatus{max-height:118px}.effect-icon:has(img){width:15px;height:20px}}

/* The combat interface stays at the image edges so movement and ground effects remain visible. */
.enemy-hud, .self-hud { position: absolute; z-index: 3; pointer-events: none; user-select: none; }
.enemy-hud { top: 13px; left: 14px; width: clamp(230px,31%,365px); max-width: calc(100% - 130px); }
#castHud, #personalAttack { display: grid; gap: 4px; }
.cast-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; column-gap: 8px; row-gap: 2px;
  padding: 6px 10px 7px; color: #f7f1dc; text-shadow: 0 1px 3px #000;
  background: linear-gradient(100deg,#111823f2,#141c26dd); border: 1px solid #a597746e;
  border-left: 2px solid #d4ae71; border-radius: 3px; box-shadow: 0 2px 8px #06101866;
}
.cast-enemy { grid-column: 1/-1; color: #e0d6bf; font-size: 10px; font-weight: 600; line-height: 1.3; }
.cast-name, .attack-name { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; line-height: 1.35; }
.cast-time, .attack-time, .effect-time { font: 600 11px/1.25 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cast-time { color: #f9d895; }
.cast-meter { grid-column: 1/-1; display: block; width: 100%; height: 5px; margin-top: 2px; overflow: hidden; border: 0; border-radius: 2px; appearance: none; color: #ffd48b; background: #4c463e; }
.cast-meter::-webkit-progress-bar { background: #4c463e; }
.cast-meter::-webkit-progress-value { background: linear-gradient(90deg,#b8844e,#ffdc91); }
.cast-meter::-moz-progress-bar { background: linear-gradient(90deg,#b8844e,#ffdc91); }
.self-hud { right: 14px; bottom: 12px; width: max-content; max-width: min(54%,410px); display: grid; justify-items: end; gap: 5px; }
.target-alert, .status-tray { max-width: 100%; min-width: 0; }
.target-alert:has(#personalAttack:empty), .status-tray:has(#personalStatus:empty) { display: none; }
.hud-heading { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; font-size: 10px; font-weight: 750; line-height: 1.35; color: #f6fbfb; letter-spacing: .05em; text-shadow: 0 1px 3px #000,0 0 4px #14202d; }
.target-alert { min-width: min(168px,100%); padding: 5px 9px 6px; border-radius: 3px; border: 1px solid #c2827199; border-left: 3px solid #edb187; color: #fceee2; background: linear-gradient(95deg,#392327f2,#20222de8); }
.target-alert .hud-heading { color: #edbcab; }
.hud-heading .icon { width: 12px; height: 12px; }
.attack-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.attack-time { color: #ffd5aa; }
.status-tray { padding: 5px 7px 6px; background: #111d28e8; border: 1px solid #899aab60; border-radius: 3px; }
.status-tray .hud-heading { color: #cad8dd; }
#personalStatus { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 3px; }
.effect-chip {
  --effect: #c2b3da;
  display: inline-flex; gap: 4px; align-items: center; min-width: 0; max-width: 100%; padding: 2px 5px 2px 2px;
  border: 1px solid #75839454; border-radius: 3px; color: #f2f5f8; background: #28323e;
}
.effect-chip:is([data-kind=fire],[data-kind=damage]) { --effect: #ffb28c; }
.effect-chip:is([data-kind=ice],[data-kind=water]) { --effect: #a0e1fc; }
.effect-chip:is([data-kind=gaze],[data-kind=rewind]) { --effect: #d5b1f6; }
.effect-chip:is([data-kind=lightning],[data-kind=thunder],[data-kind=stack]) { --effect: #f3d89a; }
.effect-chip:is([data-kind=spread],[data-kind=wind]) { --effect: #b1e2d0; }
.effect-icon { display: inline-grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid var(--effect); border-radius: 3px; color: var(--effect); background: #182431; font: 700 11px/1 system-ui,sans-serif; }
.effect-icon:empty::before { content: "◆"; font-size: 9px; }
.effect-name { min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 650; line-height: 1.3; }
.effect-time { color: var(--effect); font-size: 10px; }
@media (pointer: coarse), (max-width: 620px) {
  .self-hud { max-width: min(calc(100% - 156px),410px); }
}
@media (max-width: 620px) {
  .enemy-hud { top: 7px; left: 7px; width: min(228px,calc(100% - 110px)); max-width: none; }
  .cast-row { padding: 4px 6px 5px; gap: 1px 4px; }
  .cast-enemy, .hud-heading { font-size: 9px; }
  .cast-name, .attack-name { font-size: 11px; }
  .cast-time, .attack-time { font-size: 10px; }
  .self-hud { right: 7px; bottom: 7px; max-width: calc(100% - 148px); gap: 3px; }
  .effect-chip { gap: 3px; padding: 1px 3px 1px 1px; }
  .effect-icon { flex-basis: 17px; width: 17px; height: 17px; font-size: 10px; }
  .effect-name { font-size: 10px; }
  .effect-time { font-size: 9px; }
  .target-alert, .status-tray { padding: 4px 5px; }
  #personalStatus { max-height: 88px; overflow-y: auto; pointer-events: auto; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: thin; align-content: start; }
}

.feedback-toast {
  --outcome-ink: #b3e1c9;
  --outcome-edge: #5f887c;
  position: absolute; z-index: 3; left: 14px; bottom: 12px; width: fit-content; max-width: min(40%,320px);
  display: flex; gap: 8px; align-items: center; padding: 5px 10px 6px 7px; border: 1px solid var(--outcome-edge);
  border-left: 3px solid var(--outcome-ink); border-radius: 3px; color: #f2f5f5; background: #172a29eb;
  pointer-events: none; user-select: none; text-shadow: 0 1px 2px #12181b;
}
.feedback-toast[hidden] { display: none; }
.feedback-toast:is([data-result=fail],.fail) {
  --outcome-ink: #ffb1a4; --outcome-edge: #ad7068;
  background: linear-gradient(105deg,#49272aef,#231e27f0); box-shadow: 0 1px 12px #1b101c40;
}
.stage-viewport:has(#feedbackToast:is([data-result=fail],.fail):not([hidden]))::after {
  content: ""; position: absolute; z-index: 2; inset: 0; border-left: 2px solid #e8867678;
  box-shadow: inset 9px 0 14px -12px #ed8d7e; pointer-events: none;
}
#toastSymbol { flex: 0 0 auto; font: 700 23px/1 Arial,sans-serif; color: var(--outcome-ink); }
.toast-body { min-width: 0; display: grid; gap: 1px; }
#toastTime { font: 600 10px/1.2 var(--mono); color: var(--outcome-ink); }
#toastTime:empty { display: none; }
#toastName { font-size: 12px; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
#resultCount { margin-left: auto; min-width: 0; color: var(--subtle); font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums; text-align: right; }
.retry-check { margin-top: 12px; min-height: 33px; border: 1px solid #405966; border-radius: 4px; background: #1c303c; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.retry-check:not(:disabled):hover { background: #29424c; border-color: #66828b; }
@media (pointer: coarse), (max-width: 620px) {
  .feedback-toast { bottom: 96px; left: 10px; max-width: min(40%,255px); padding: 4px 6px; gap: 5px; }
  .retry-check { min-height: 40px; }
}
@media (max-width: 620px) {
  .feedback-toast { bottom: 94px; max-width: 128px; left: 8px; }
  #toastSymbol { font-size: 21px; }
  #toastName { font-size: 10px; }
  #toastTime { font-size: 9px; }
}
.toolbar-fields, .role-field { display: flex; align-items: center; }
.toolbar-fields { min-width: 0; gap: 16px; }
.role-field { flex: 0 0 auto; gap: 7px; }
.role-field > span { font-size: 12px; font-weight: 650; color: var(--subtle); white-space: nowrap; }
.role-field select { min-width: 66px; color: #c7eeeb; border-color: #47717a; }
.fields-grid { grid-template-columns: minmax(115px,1.6fr) minmax(85px,.75fr) minmax(94px,1fr) minmax(110px,1.12fr); }
@media (max-width: 1140px) {
  .fields-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .toolbar-fields { flex-basis: 100%; display: grid; grid-template-columns: minmax(0,1fr) minmax(85px,.43fr); column-gap: 8px; }
  .toolbar-fields :is(.scenario-field,.role-field) { display: flex; gap: 3px; flex-direction: column; align-items: stretch; }
  .toolbar-fields :is(.scenario-field,.role-field) > span { display: block; font-size: 10px; }
  .toolbar-fields :is(.scenario-field,.role-field) select { width: 100%; min-height: 39px; }
}

.experience-switch {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  min-width: 0;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #0e1922;
}
.experience-choice {
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.experience-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.experience-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 100%;
  min-height: 42px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #adbec7;
}
.experience-label strong { font-size: 14px; line-height: 1.4; font-weight: 680; }
.experience-label small { padding-left: 10px; border-left: 1px solid #3b4b56; font-size: 11px; color: var(--muted); }
.experience-label .icon { width: 18px; height: 18px; color: #9ab0b9; }
.experience-choice:hover .experience-label { background: #172631; color: var(--text); }
.experience-choice input:checked + .experience-label {
  border-color: #476e75;
  background: #1b353c;
  color: #daf8f3;
}
.experience-choice input:checked + .experience-label .icon { color: #9ee5dc; }
.experience-choice input:checked + .experience-label small { border-color: #47696b; color: #bedfdf; }
.experience-choice input:focus-visible + .experience-label { outline: 2px solid var(--amber); outline-offset: -2px; }

.teaching-card {
  --cue: #a2e6de;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #456b6f;
  border-radius: var(--r);
  background: #17212b;
}
.teaching-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #32545a;
  background: #193237;
  color: var(--cue);
  font-size: 12px;
  font-weight: 670;
}
.teaching-header .icon { width: 17px; height: 17px; }
.teaching-body { padding: 15px 16px; }
.teaching-body h2 { font-size: clamp(16px,1.3vw,21px); line-height: 1.5; color: #f6f4ec; letter-spacing: .025em; }
.guided-card .teaching-body p { margin: 3px 0 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.teaching-body p:empty { display: none; }
.guided-card .teaching-body p { color: #b9cbd2; margin-top: 7px; }
.guided-card .teaching-body .guided-action { color: #e9f5f3; }

.teaching-card[hidden],
body:not([data-mode=guided]) #guidedPanel,
body[data-mode=live] .switch:has(#gaze) { display: none; }
body[data-mode=live] .pattern-field { display: none; }
body[data-mode=live] .fields-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.teaching-focus:not(:empty) {
  outline: 2px solid #ffcf82;
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 4px #26221c, 0 0 14px 3px #f3b95980;
}
/* The upper center carries boss head tells, including Banish III's top orb. */
@media (orientation: portrait) and (max-width: 620px) {
  .enemy-hud { width: min(40%,185px); }
}
.fields-grid { grid-template-columns: minmax(130px,1.4fr) minmax(85px,.75fr) minmax(115px,1fr); }

@media (max-width: 840px) {
  .experience-label { flex-wrap: wrap; gap: 3px 7px; }
  .experience-label small { display: none; }
  .console-grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .exercise-column, .briefing-column { display: contents; }
  .stage-panel { order: 0; }
  .teaching-card { order: 1; }
  .settings-panel { order: 2; }
  .party-panel { order: 4; }
  .results-panel { order: 5; }
  #battleLog { order: 6; }
}
@media (max-width: 620px) {
  .experience-switch { margin-bottom: 11px; padding: 3px; }
  .experience-label { gap: 5px; padding: 5px 2px; min-height: 39px; }
  .experience-label strong { font-size: 12px; }
  .experience-label .icon { width: 15px; height: 15px; }
  .teaching-header { padding: 8px 12px; }
  .teaching-body { padding: 10px 12px; }
  .fields-grid { grid-template-columns: minmax(110px,1.2fr) minmax(85px,1fr); }
  .fields-grid .marker-field { grid-column: 1/-1; }
}
@media (max-width: 345px) {
  .experience-label .icon { display: none; }
  .transport-row { flex-wrap: wrap; }
}

/* Keep the cast bars and movement pad in the same view on short screens. */
@media (orientation: landscape) and (max-height: 560px) {
  .mast-inner, .workspace { padding-inline: max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right)); }
  .mast-inner { min-height: 33px; }
  .identity-glyph { width: 19px; height: 26px; }
  .identity-type strong { font-size: 15px; }
  .identity-type span { font-size: 11px; }
  .guide-link { padding-block: 5px; }
  .workspace { padding-top: 4px; }
  .experience-switch { margin-bottom: 4px; padding: 2px; }
  .experience-label { min-height: 34px; padding: 3px; gap: 5px; }
  .experience-label small, .phase-nav .nav-label, .toolbar-fields label > span { display: none; }
  .experience-label strong { font-size: 12px; }
  .experience-label .icon { width: 14px; height: 14px; }
  .phase-toolbar { flex-wrap: nowrap; gap: 5px; margin-bottom: 4px; }
  .phase-nav { gap: 1px; }
  .phase-nav button { min-width: 32px; min-height: 34px; padding-inline: 3px; }
  .toolbar-fields { display: flex; flex: 1; gap: 5px; }
  .scenario-field { flex: 1; min-width: 0; }
  .scenario-field select { width: 100%; }
  .toolbar-fields :is(.scenario-field,.role-field) select { min-height: 34px; height: 34px; }
  .stage-head { padding: 4px 10px; min-height: 32px; }
  .stage-tools { flex-direction: row; align-items: center; gap: 8px; }
  .stage-name h1 { font-size: 16px; }
  #arena { height: calc(100svh - 177px); min-height: 130px; }
  .transport { gap: 3px; padding: 4px 8px; }
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 650px) {
  .workspace {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0,1.15fr);
    align-items: center;
    column-gap: 12px;
  }
  .console-grid { display: grid; grid-column: 1/-1; grid-template-columns: minmax(0,1fr) clamp(220px,29vw,330px); align-items: start; gap: 9px; }
  .exercise-column, .briefing-column { display: grid; grid-template-columns: minmax(0,1fr); }
  #arena { height: calc(100svh - 131px); }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 649px) {
  .enemy-hud:has(.cast-row + .cast-row) { width: min(420px,calc(100% - 120px)); }
  #castHud:has(.cast-row + .cast-row) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .self-marker-bar:not([hidden]) + .stage-viewport .self-hud { max-width: min(32%,158px); }
  .self-marker-bar:not([hidden]) + .stage-viewport .self-hud:has(#personalAttack:not(:empty)) #personalStatus { max-height: 44px; }
}
.gamepad-help { margin-top: 12px; border-top: 1px solid #304c59; padding-top: 10px; }
.gamepad-help summary { cursor: pointer; color: #b7e9e4; font-weight: 650; }
.gamepad-help p { font-size: 12px; line-height: 1.65; margin: 9px 0; }
.gamepad-help .gamepad-name { color: #a4bbc6; overflow-wrap: anywhere; }
.gamepad-help table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gamepad-help th, .gamepad-help td { padding: 6px 5px; border-bottom: 1px solid #304552; text-align: left; }
.gamepad-help td:first-child { width: 43%; color: #d2e7ed; }
#gamepadMarkerHint { font-size: 11px; color: #baf7e6; }
.self-marker-caption:has(#gamepadMarkerHint:not([hidden])) { max-width: 100%; flex-wrap: wrap; }
#gamepadMarkerHint { flex-basis: 100%; }
.gamepad-selection { outline: 2px solid #85ffe0; outline-offset: 2px; }
.self-marker-choices.relativity-markers {
  flex: 1 1 320px; max-width: 470px; grid-template-columns: minmax(0,1fr) auto;
  align-items: stretch; gap: 7px;
}
.relativity-marker-role { min-width: 0; border: 1px solid #3b5362; border-radius: 4px; padding: 5px 6px; }
.relativity-marker-role.own-role { border-color: #75c8c1; background: #18343d; }
.relativity-marker-title { display: block; color: #d5e5eb; font-size: 11px; margin-bottom: 5px; }
.own-role .relativity-marker-title { color: #a5f0df; }
.relativity-marker-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.relativity-marker-category { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
.relativity-marker-timing { text-align: center; font-size: 11px; line-height: 1.2; color: #d5e5eb; white-space: nowrap; }
.relativity-marker-buttons { display: flex; justify-content: center; gap: 2px; }
.relativity-markers .self-marker-choice { position: relative; flex: 0 1 37px; }
.marker-ice-symbol { width: 26px; height: 30px; filter: hue-rotate(35deg) saturate(1.5); }
.relativity-markers .self-marker-choice .marker-ice-assignment {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  background: #10232d; border-radius: 2px;
}
.relativity-markers .self-marker-clear { align-self: center; }
@media (max-width: 620px) {
  .self-marker-choices.relativity-markers { flex-basis: 100%; }
  .relativity-marker-role { padding: 4px; }
  .relativity-marker-grid { gap: 3px; }
  .relativity-markers .self-marker-choice { min-height: 31px; }
  .relativity-markers .self-marker-choice img:not(.marker-ice-assignment) { width: 24px; height: 24px; }
  .marker-ice-symbol { width: 22px; height: 26px; }
  .self-marker-bar:has(.relativity-markers) + .stage-viewport #arena { height: clamp(130px,calc(100svh - 226px),510px); }
}
@media (max-width: 539px) {
  .self-marker-choices.relativity-markers { grid-template-columns: minmax(0,1fr) 35px; gap: 5px; }
  .relativity-marker-role { grid-column: 1; }
  .relativity-markers .self-marker-clear { grid-column: 2; grid-row: 1; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .self-marker-bar:has(.relativity-markers) + .stage-viewport #arena { height: calc(100svh - 190px); min-height: 130px; }
}