:root {
  --ink: #142b42;
  --navy: #17395c;
  --chalk: #f6efd8;
  --paper: #fffaf0;
  --gold: #f4bd4f;
  --coral: #ee6b58;
  --mint: #62bba3;
  --sky: #7ec9dc;
  --shadow: rgba(16, 35, 56, 0.28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { width:100%;min-height:100%;height:100%; }

body {
  margin: 0;
  display:block;
  color: var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    #102e4b;
  background-size: 24px 24px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  overflow:hidden;
}

button { font: inherit; }
button:focus-visible, canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.game-shell {
  width:100vw;
  height:100vh;
  padding:0;
}

.topbar, .footer-strip {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--chalk);
}
.topbar { position:fixed;z-index:95;left:0;right:0;top:0;padding:0 24px;background:linear-gradient(180deg,rgba(9,31,49,.88),rgba(9,31,49,0));pointer-events:none; }
.topbar > * { pointer-events:auto; }

.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup h1 { margin: 0; font: 700 25px/1 "KaiTi", "STKaiti", serif; letter-spacing: .08em; }
.brand-lockup p { margin: 4px 0 0; font: 11px/1 "Consolas", monospace; letter-spacing: .28em; opacity: .7; }
.class-stamp {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 2px solid var(--gold); color: var(--gold); border-radius: 50%;
  font: 800 17px/1 "Consolas", monospace; transform: rotate(-7deg);
  box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold);
}

.top-actions { display: flex; gap: 8px; }
.icon-button, .text-button {
  border: 1px solid rgba(246,239,216,.25); color: var(--chalk); background: rgba(255,255,255,.06);
  height: 36px; border-radius: 4px; cursor: pointer;
}
.icon-button { width: 36px; font: 700 18px/1 serif; }
.text-button { padding: 0 16px; font-size: 13px; letter-spacing: .12em; }
.icon-button:hover, .text-button:hover { background: rgba(255,255,255,.13); }
.info-button { position:relative;color:var(--navy);background:var(--gold);border-color:var(--navy);box-shadow:3px 3px 0 var(--navy);font:900 16px/1 Georgia,serif; }
.info-button:hover { color:var(--navy);background:#f8d985;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--navy); }
.info-button:focus-visible { outline:3px solid var(--paper);outline-offset:3px; }

.stage-wrap {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  aspect-ratio:auto;
  min-height:0;
  overflow: hidden;
  background: #74b9c8;
  border:0;
  border-radius:0;
  box-shadow:none;
}

#gameCanvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.quest-note {
  position: absolute; z-index: 5; top: 22px; right: 22px; width: 220px; min-height: 136px;
  padding: 17px 18px 15px 25px; color: #26394a;
  background:
    repeating-linear-gradient(transparent 0 25px, rgba(79,137,165,.16) 26px 27px),
    linear-gradient(90deg, transparent 17px, rgba(222,91,83,.25) 18px 19px, transparent 20px),
    var(--paper);
  box-shadow: 4px 5px 0 rgba(20,43,66,.24);
  transform: rotate(1.2deg);
  transition: transform .25s ease;
}
.quest-note.changed { animation: note-pop .42s ease; }
.tape { position: absolute; top: -8px; left: 73px; width: 72px; height: 20px; background: rgba(247,207,108,.66); transform: rotate(-4deg); }
.note-label { display: block; color: var(--coral); font: 700 10px/1 "Consolas", monospace; letter-spacing: .18em; text-transform: uppercase; }
.quest-note strong { display: block; margin-top: 9px; font: 700 17px/1.25 "KaiTi", "STKaiti", serif; }
.quest-note p { min-height: 34px; margin: 5px 0 9px; font-size: 11px; line-height: 1.5; }
.quest-note small { display: block; margin-top: 4px; text-align: right; font: 10px/1 "Consolas", monospace; color: #6a7b85; }
.quest-progress { height: 4px; overflow: hidden; background: rgba(20,43,66,.13); }
.quest-progress span { display: block; width: 0; height: 100%; background: var(--coral); transition: width .4s ease; }

.buff-hud { position:absolute;z-index:7;left:22px;top:22px;width:185px;color:var(--paper);filter:drop-shadow(0 7px 10px rgba(9,29,47,.3)); }
.buff-hud > button { display:flex;align-items:center;gap:9px;width:100%;padding:7px;color:var(--paper);background:rgba(16,43,64,.92);border:2px solid var(--gold);cursor:pointer;text-align:left; }
.buff-hud > button > b { display:grid;flex:0 0 34px;height:34px;place-items:center;color:var(--navy);background:var(--gold);font:900 15px/1 "Consolas",monospace; }
.buff-hud > button span,.buff-hud strong,.buff-hud small{display:block}.buff-hud strong{font-size:11px}.buff-hud small{margin-top:3px;color:rgba(255,250,240,.65);font-size:8px}
.buff-hud > div { height:5px;margin:3px 2px 0;background:rgba(255,255,255,.15);overflow:hidden; }
.buff-hud > div i { display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--coral),var(--gold));transition:width .12s linear; }
.buff-hud.active > button { animation:buff-pulse .55s ease-in-out infinite alternate;box-shadow:0 0 22px rgba(244,189,79,.55); }
.buff-hud.empty > button { filter:grayscale(1);opacity:.55; }

.interaction-hint {
  position: absolute; z-index: 8; left: 50%; bottom: 24px; transform: translateX(-50%);
  align-items: center; gap: 9px; padding: 7px 13px 7px 7px;
  color: var(--chalk); background: rgba(13,36,56,.9); border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.interaction-hint:not([hidden]) { display: flex; animation: hint-in .2s ease; }
kbd { display: inline-grid; min-width: 28px; min-height: 26px; place-items: center; padding: 0 6px; color: var(--ink); background: var(--chalk); border: 0; border-radius: 3px; box-shadow: 0 3px 0 #a89f82; font: 700 12px/1 "Consolas", monospace; }

.dialogue {
  position: absolute; z-index: 20; left: 50%; bottom: 27px; transform: translateX(-50%);
  width: min(720px, calc(100% - 40px)); min-height: 116px; align-items: stretch;
  color: var(--ink); background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 7px 8px 0 rgba(17,40,61,.45);
}
.dialogue:not([hidden]) { display: flex; animation: dialogue-in .18s ease-out; }
.speaker-avatar { flex: 0 0 100px; display: grid; place-items: center; color: var(--chalk); background: var(--coral); font: 700 38px/1 "KaiTi", serif; }
.dialogue-copy { position: relative; flex: 1; padding: 15px 20px; }
.speaker-name { color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.dialogue p { margin: 7px 0 16px; font-size: 14px; line-height: 1.65; }
.dialogue small { position: absolute; right: 14px; bottom: 8px; color: #7c8b91; font: 10px/1 "Consolas", monospace; }

.toast {
  position: absolute; z-index: 25; left: 50%; top: 38px; transform: translate(-50%, -15px);
  padding: 10px 18px; color: var(--chalk); background: var(--ink); border-bottom: 3px solid var(--gold);
  font-size: 12px; opacity: 0; pointer-events: none; transition: .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal-card {
  position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(430px, calc(100% - 40px)); padding: 30px; text-align: center;
  color: var(--ink); background: var(--paper); border: 3px solid var(--ink); box-shadow: 10px 12px 0 rgba(15,36,56,.5);
}
.modal-card:not([hidden]) { display: block; animation: modal-in .22s ease-out; }
.modal-card::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(20,43,66,.22); pointer-events: none; }
.modal-kicker { position: relative; color: var(--coral); font: 800 10px/1 "Consolas", monospace; letter-spacing: .2em; }
.modal-card h2 { position: relative; margin: 10px 0 12px; font: 700 26px/1.2 "KaiTi", serif; }
.modal-card p { position: relative; font-size: 13px; line-height: 1.7; }
.quiet-button { position: relative; border: 0; padding: 6px; color: #667982; background: transparent; cursor: pointer; font-size: 11px; text-decoration: underline; }
.primary-button { position: relative; padding: 12px 24px; color: var(--chalk); background: var(--coral); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; font-weight: 800; }
.primary-button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.help-card { position:fixed;z-index:120;width:min(760px,calc(100% - 32px));max-height:min(82vh,720px);overflow:auto;padding:27px 30px 25px;text-align:left;box-shadow:10px 12px 0 rgba(15,36,56,.5),0 0 0 100vmax rgba(7,28,45,.68); }
.help-card > .primary-button { position:absolute;right:13px;top:12px;z-index:2;display:block;margin:0;padding:8px 11px;box-shadow:3px 3px 0 var(--ink);font-size:9px; }
.help-card .modal-kicker,.help-card > h2 { display:block;text-align:center; }
.guide-intro { margin:0 auto 17px;padding:8px 12px;text-align:center;color:#526a73;background:#e6ece4;border-left:4px solid var(--gold);font-size:11px !important; }
.guide-intro b { display:inline-grid;width:20px;height:20px;place-items:center;margin:0 2px;color:var(--paper);background:var(--navy);font:900 11px/1 Georgia,serif; }
.guide-grid { position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:11px; }
.guide-section { padding:13px 14px;background:rgba(255,255,255,.44);border:1px solid rgba(20,43,66,.16); }
.guide-section h3 { margin:0 0 10px;color:var(--navy);font:800 15px/1.2 "KaiTi",serif; }
.guide-section p { margin:0;color:#52656d;font-size:10px;line-height:1.7; }
.guide-controls { grid-row:span 2; }
.control-list { position: relative; display: grid; gap: 12px; margin: 20px 0; }
.control-list span { display: flex; align-items: center; gap: 8px; }
.control-list em { margin-left: auto; font-style: normal; font-size: 12px; color: #60717a; }
.guide-controls .control-list { gap:7px;margin:0; }
.guide-controls .control-list span { min-height:25px;padding-bottom:5px;border-bottom:1px dashed rgba(20,43,66,.14); }
.guide-controls .control-list span:last-child { padding-bottom:0;border-bottom:0; }
.guide-controls .control-list em { max-width:172px;text-align:right;font-size:10px; }
.guide-steps { display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:guide-step; }
.guide-steps li { position:relative;padding-left:28px;counter-increment:guide-step; }
.guide-steps li::before { content:counter(guide-step);position:absolute;left:0;top:0;display:grid;width:20px;height:20px;place-items:center;color:var(--paper);background:var(--coral);font:900 9px/1 "Consolas",monospace; }
.guide-steps b,.guide-steps span { display:block; }
.guide-steps b { color:var(--ink);font-size:10px; }
.guide-steps span { margin-top:2px;color:#63757c;font-size:9px;line-height:1.4; }
.guide-markers { display:grid;grid-template-columns:1fr 1fr;gap:7px; }
.guide-markers span { display:flex;align-items:center;gap:7px;color:#566a72;font-size:9px; }
.guide-markers i { display:grid;width:23px;height:23px;place-items:center;color:var(--paper);background:var(--navy);font:900 9px/1 "Consolas",monospace;font-style:normal; }
.guide-markers .guide-main,.guide-markers .guide-coin { color:var(--navy);background:var(--gold); }
.guide-markers .guide-main { transform:rotate(45deg); }
.guide-markers .guide-play { background:#4f89a0; }
.guide-markers .guide-patrol { background:var(--coral); }
.guide-save { margin:12px 0 0 !important;padding:9px 11px;color:#50626a;background:#f3d47c;border:1px dashed rgba(20,43,66,.35);font-size:10px !important; }
.guide-settings { position:relative;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:9px;margin-top:12px;padding:14px;color:var(--ink);background:#dce6df;border:2px solid var(--navy); }
.guide-settings > div:first-child { align-self:center; }
.guide-settings h3 { margin:5px 0 0;font:800 16px/1 "KaiTi",serif; }
.setting-volume { display:grid;grid-column:span 2;gap:7px;padding:9px 11px;background:rgba(255,255,255,.55);border:1px solid rgba(20,43,66,.17); }
.setting-volume > span { display:flex;justify-content:space-between;align-items:center;font-size:10px; }
.setting-volume small { color:var(--coral);font:900 10px/1 "Consolas",monospace; }
.setting-volume input { width:100%;accent-color:var(--coral);cursor:pointer; }
.setting-toggle { display:flex;align-items:center;gap:8px;min-height:47px;padding:8px 9px;background:rgba(255,255,255,.55);border:1px solid rgba(20,43,66,.17);cursor:pointer; }
.setting-toggle input { width:18px;height:18px;flex:0 0 auto;accent-color:var(--coral); }
.setting-toggle span,.setting-toggle b,.setting-toggle small { display:block; }
.setting-toggle b { font-size:9px; }
.setting-toggle small { margin-top:3px;color:#65777d;font-size:7px;line-height:1.35; }
.setting-quality { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:47px;padding:8px 9px;background:rgba(255,255,255,.55);border:1px solid rgba(20,43,66,.17); }
.setting-quality span,.setting-quality b,.setting-quality small { display:block; }
.setting-quality b { font-size:9px; }.setting-quality small { margin-top:3px;color:#65777d;font-size:7px; }
.setting-quality select { min-width:76px;padding:7px;color:var(--paper);background:var(--navy);border:1px solid var(--ink);font-size:9px;font-weight:900; }
.setting-actions { display:flex;grid-column:span 2;gap:7px; }
.setting-actions button { flex:1;padding:8px 10px;color:var(--paper);background:var(--navy);border:1px solid var(--ink);cursor:pointer;font-size:8px;font-weight:900; }
.setting-actions button:hover { color:var(--navy);background:var(--gold); }
.setting-status { grid-column:1/-1;margin:0 !important;color:#5e7178;font-size:8px !important; }
body.guide-open .help-card { display:block; }
body.high-contrast { --navy:#071c30;--ink:#071421;--paper:#fffdf5;--gold:#ffd44f;--coral:#ff5d4f;--mint:#62d9b4; }
body.high-contrast button,body.high-contrast .ow-main-tracker,body.high-contrast .ow-world-legend { border-color:#fffdf5; }
body.large-ui .ow-main-tracker,body.large-ui .ow-quest-panel,body.large-ui .help-card { font-size:115%; }
body.large-ui .ow-main-tracker p,body.large-ui .ow-main-command,body.large-ui .guide-section p,body.large-ui .guide-steps span { font-size:10px; }
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after { scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important; }

.launch-track { position: relative; height: 24px; margin: 25px 0 22px; overflow: hidden; background: #dbe4df; border: 2px solid var(--ink); box-shadow: inset 0 3px 0 rgba(20,43,66,.12); }
.sweet-spot { position: absolute; left: 42%; width: 16%; top: 0; bottom: 0; background: var(--gold); border-left: 2px dashed rgba(20,43,66,.35); border-right: 2px dashed rgba(20,43,66,.35); }
.launch-track i { position: absolute; left: 0; top: -4px; width: 5px; height: 30px; background: var(--coral); box-shadow: 1px 0 0 var(--ink); }
.launcher-card > small { position: relative; display: block; margin-top: 16px; color: #647680; font-size: 10px; }

.workshop-machine { position:relative;height:28px;margin:25px 0 18px;overflow:hidden;background:#d6dfda;border:3px solid var(--ink);box-shadow:inset 0 3px 0 rgba(20,43,66,.12); }
.workshop-machine span { position:absolute;left:18%;top:0;bottom:0;width:13%;background:var(--gold);box-shadow:0 0 12px rgba(244,189,79,.65);transition:left .2s; }
.workshop-machine i { position:absolute;left:0;top:-4px;width:5px;height:31px;background:var(--coral);box-shadow:1px 0 var(--ink); }
.workshop-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px; }
.workshop-steps span { padding:8px;color:#718087;background:#e5ebe6;border:1px solid rgba(20,43,66,.18);font-size:10px; }
.workshop-steps span b { display:inline-grid;width:18px;height:18px;place-items:center;margin-right:4px;color:var(--paper);background:#84939a;border-radius:50%;font:9px/1 "Consolas",monospace; }
.workshop-steps span.active { color:var(--navy);background:#f8d985;border-color:var(--navy);font-weight:800; }
.workshop-steps span.done { color:#3f725f;background:#cce4d8; }

.kick-door { position:relative;width:150px;height:152px;margin:18px auto 14px;overflow:hidden;color:#ead9b5;background:linear-gradient(90deg,#5f4435,#8b674e 50%,#5f4435);border:7px solid var(--ink);box-shadow:inset 0 0 0 3px rgba(255,255,255,.08);transform-origin:left center;transition:transform .55s ease; }
.kick-door span { display:inline-block;margin-top:15px;padding:4px 10px;background:var(--ink);font-size:10px;letter-spacing:.15em; }
.kick-door i { position:absolute;width:3px;height:62px;background:#d6c69d;transform:rotate(38deg);opacity:0;transition:opacity .15s; }
.kick-door i:nth-child(2){left:54px;top:49px}.kick-door i:nth-child(3){left:91px;top:69px;transform:rotate(-32deg)}.kick-door i:nth-child(4){left:75px;top:40px;transform:rotate(8deg)}
.kick-door.crack-1 i:nth-child(2),.kick-door.crack-2 i{opacity:1}.kick-door.open{transform:perspective(400px) rotateY(-77deg)}
.kick-combo { display:grid;grid-template-columns:90px 1fr 90px;gap:9px;align-items:center; }
.kick-combo button { padding:10px 6px;color:var(--paper);background:var(--navy);border:2px solid var(--ink);box-shadow:0 3px var(--ink);cursor:pointer;font-size:11px;font-weight:800; }
.kick-combo button.expected { color:var(--navy);background:var(--gold);transform:translateY(2px);box-shadow:0 1px var(--ink); }
.kick-combo > div { height:12px;overflow:hidden;background:#d6dfda;border:2px solid var(--ink); }
.kick-combo > div i { display:block;width:0;height:100%;background:linear-gradient(90deg,var(--mint),var(--gold),var(--coral));transition:width .18s; }
.kick-card #finalKick:disabled { opacity:.35;cursor:not-allowed; }
.kick-card { position:fixed;z-index:110;box-shadow:10px 12px 0 rgba(15,36,56,.55),0 0 0 100vmax rgba(7,28,45,.7); }

.cleaner-duel-card { position:fixed;z-index:111;width:min(680px,calc(100% - 34px));max-height:calc(100vh - 28px);overflow:auto;box-shadow:12px 14px 0 rgba(15,36,56,.58),0 0 0 100vmax rgba(7,28,45,.78); }
.cleaner-duel-card::after { content:"C6 · 事故核查单";position:absolute;right:24px;top:22px;padding:5px 8px;color:var(--coral);border:2px solid var(--coral);font:900 8px/1 "Consolas",monospace;letter-spacing:.12em;transform:rotate(3deg); }
.cleaner-duel-board { position:relative;display:grid;grid-template-columns:120px 1fr;gap:12px;margin:14px 0 12px;padding:12px;color:var(--paper);background:linear-gradient(120deg,#102a42,#214e63);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06); }
.cleaner-duel-board::before { content:"";position:absolute;left:119px;top:28px;width:46px;height:2px;background:var(--coral);transform:rotate(-12deg);transform-origin:left;opacity:.65; }
.cleaner-duel-board aside { display:grid;justify-items:center;align-content:center;padding-right:11px;text-align:center;border-right:1px dashed rgba(255,250,240,.28); }
.cleaner-portrait { display:grid;width:58px;height:58px;place-items:center;margin-bottom:7px;color:var(--navy);background:var(--gold);border:4px double var(--paper);border-radius:50%;font:900 21px/1 "KaiTi",serif;box-shadow:4px 4px 0 rgba(0,0,0,.2); }
.cleaner-duel-board aside b,.cleaner-duel-board aside small { display:block; }.cleaner-duel-board aside b{font-size:11px}.cleaner-duel-board aside small{margin-top:4px;color:rgba(255,250,240,.58);font-size:7px;line-height:1.35}
.cleaner-duel-board section { min-width:0;align-self:center; }
.cleaner-case-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;color:rgba(255,250,240,.66);font:800 8px/1 "Consolas",monospace; }.cleaner-case-head > span{color:var(--gold);letter-spacing:.12em}.cleaner-case-head b{font-weight:800}.cleaner-case-head em{color:var(--coral);font-style:normal}
.cleaner-suspicion { height:12px;overflow:hidden;background:rgba(255,255,255,.12);border:1px solid rgba(255,250,240,.35); }.cleaner-suspicion i{display:block;width:30%;height:100%;background:linear-gradient(90deg,var(--gold),var(--coral));transition:width .3s ease}
.cleaner-evidence { display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px; }.cleaner-evidence span{padding:6px 4px;text-align:center;color:rgba(255,250,240,.44);background:rgba(255,255,255,.05);border:1px solid rgba(255,250,240,.12);font-size:7px}.cleaner-evidence span.solved{color:var(--navy);background:var(--mint);border-color:var(--paper);font-weight:900}
.cleaner-duel-card blockquote { position:relative;margin:0;padding:11px 14px 11px 34px;color:var(--paper);background:var(--navy);border-left:6px solid var(--gold);font:700 13px/1.5 "KaiTi",serif; }.cleaner-duel-card blockquote::before{content:"?";position:absolute;left:9px;top:7px;color:var(--gold);font:900 22px/1 "KaiTi",serif}
.cleaner-duel-card .cleaner-clue { margin:8px 0 !important;padding:7px 9px;color:#4f626c;background:rgba(244,189,79,.16);border:1px dashed rgba(20,43,66,.34);font-size:9px;line-height:1.45; }
.cleaner-duel-options { display:grid;gap:7px;counter-reset:duel-option; }.cleaner-duel-options button{position:relative;counter-increment:duel-option;padding:9px 10px 9px 37px;text-align:left;color:var(--navy);background:#fffaf0;border:2px solid rgba(20,43,66,.24);box-shadow:0 2px 0 rgba(20,43,66,.18);cursor:pointer;font-size:9px;font-weight:800;line-height:1.45}.cleaner-duel-options button::before{content:counter(duel-option);position:absolute;left:9px;top:50%;display:grid;width:19px;height:19px;place-items:center;color:var(--paper);background:var(--navy);font:900 8px/1 "Consolas",monospace;transform:translateY(-50%)}.cleaner-duel-options button:hover,.cleaner-duel-options button:focus-visible{background:var(--gold);border-color:var(--navy);transform:translateX(3px)}.cleaner-duel-options button.correct{color:#285d4c;background:#c8e7da;border-color:var(--mint)}.cleaner-duel-options button.wrong{color:#7d352e;background:#f1c6bd;border-color:var(--coral)}.cleaner-duel-options button:disabled{cursor:default;transform:none}
.cleaner-duel-card.won .cleaner-portrait { background:var(--mint); }.cleaner-duel-card.lost .cleaner-portrait{color:var(--paper);background:var(--coral)}

.scene-game { width: min(540px, calc(100% - 34px)); }
.scene-game > small { position: relative; display: block; margin: 10px 0; color: #647680; font-size: 10px; }
.game-status { min-height: 22px; margin: 10px 0 !important; color: var(--coral); font-weight: 800; }

.light-stage { position: relative; height: 205px; margin: 18px 0 10px; overflow: hidden; background: linear-gradient(180deg,#18324b,#0c2134); border: 3px solid var(--ink); }
.light-stage::before { content: ""; position: absolute; inset: 0; opacity: .2; background: repeating-linear-gradient(90deg,transparent 0 49px,rgba(255,255,255,.12) 50px); }
.shadow-emblem { position: absolute; z-index: 3; left: 50%; top: 35px; width: 92px; height: 92px; display: grid; place-items: center; transform: translateX(-50%); color: rgba(244,189,79,.3); border: 4px double currentColor; border-radius: 50%; transition: color .25s, filter .25s; }
.shadow-emblem b { font: 900 24px/1 "Consolas",monospace; }
.shadow-emblem span { position: absolute; bottom: -28px; color: var(--paper); font: 10px/1 "Consolas",monospace; }
.shadow-emblem.aligned { color: var(--gold); filter: drop-shadow(0 0 15px rgba(244,189,79,.8)); }
.light-stage button { --turn: 0deg; position: absolute; z-index: 4; bottom: 12px; width: 52px; height: 44px; color: var(--paper); background: #365469; border: 2px solid #8a9da4; border-radius: 20px 20px 5px 5px; cursor: pointer; }
.light-stage button:nth-of-type(1) { left: 55px; }.light-stage button:nth-of-type(2) { left: calc(50% - 26px); }.light-stage button:nth-of-type(3) { right: 55px; }
.light-stage button i { position: absolute; left: 23px; bottom: 36px; width: 6px; height: 118px; opacity: .36; background: linear-gradient(0deg,rgba(244,189,79,.8),rgba(244,189,79,0)); transform: rotate(var(--turn)); transform-origin: bottom center; transition: transform .22s ease, opacity .22s; }
.light-stage button.is-correct i { opacity: .85; }
.light-stage button small { position: relative; font-size: 8px; }

.track-grid { position: relative; display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3,58px); justify-content: center; gap: 4px; width: 250px; margin: 20px auto 12px; padding: 12px 30px; background: #56717a; border: 3px solid var(--ink); box-shadow: inset 0 0 0 5px rgba(255,255,255,.08); }
.track-grid::before,.track-grid::after { content:""; position:absolute; top:94px; width:31px; height:9px; background:var(--gold); border:2px solid var(--ink); }
.track-grid::before{left:-20px}.track-grid::after{right:-20px}
.track-grid button { display:grid;place-items:center;padding:0;color:#d9ded8;background:#324c58;border:1px solid #7e9295;cursor:pointer;font:700 36px/1 "Consolas",monospace;transition:background .15s,transform .15s; }
.track-grid button:hover { background:#3f5d67; }
.track-grid button.on-route { color:var(--gold);background:#294759; }
.track-grid > i { position:absolute; z-index:5; left:-21px; top:91px; width:18px; height:15px; background:var(--coral); border:2px solid var(--ink); border-radius:3px; opacity:0; }
.track-grid > i.run-success { opacity:1; animation: cart-run 1.6s ease-in-out forwards; }
.track-grid > i.run-fail { opacity:1; animation: cart-fail .65s ease-in-out; }
.track-card > .primary-button { margin-right:10px; }

.radio-display { position:relative;height:110px;margin:18px 0 20px;overflow:hidden;background:#102b3d;border:3px solid var(--ink);box-shadow:inset 0 0 25px rgba(0,0,0,.35); }
.radio-display::before { content:"";position:absolute;inset:0;background:linear-gradient(rgba(98,187,163,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(98,187,163,.1) 1px,transparent 1px);background-size:18px 18px; }
.target-wave,.player-wave { position:absolute;left:22px;right:22px;top:31px;height:44px;background:var(--gold);clip-path:polygon(0 50%,6% 15%,12% 75%,18% 30%,24% 60%,30% 20%,36% 70%,42% 35%,48% 55%,54% 25%,60% 76%,66% 18%,72% 62%,78% 30%,84% 72%,90% 22%,96% 55%,100% 50%);opacity:.32; }
.player-wave { background:var(--mint);opacity:.9;filter:blur(2px);transform:translateY(9px) scaleY(.5);transition:filter .18s,transform .18s; }
.radio-display b { position:absolute;right:8px;bottom:7px;color:var(--mint);font:9px/1 "Consolas",monospace;letter-spacing:.08em; }
.mixer-controls { position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.mixer-controls label { display:grid;gap:8px;color:#556b75;font-size:10px;font-weight:800; }
.mixer-controls label span { display:flex;align-items:center;gap:4px; }
.mixer-controls input { min-width:0;width:100%;accent-color:var(--coral); }
.mixer-controls button { flex:0 0 24px;height:24px;padding:0;color:var(--paper);background:var(--navy);border:0;border-radius:2px;cursor:pointer;font:800 14px/1 sans-serif; }
.mixer-controls button:hover { background:var(--coral); }

@keyframes cart-run { 0%{left:-21px;top:91px} 26%{left:92px;top:91px} 46%{left:92px;top:153px} 68%{left:154px;top:153px} 84%{left:154px;top:91px} 100%{left:252px;top:91px} }
@keyframes cart-fail { 0%,100%{transform:translateX(0)} 25%{transform:translateX(18px)} 50%{transform:translateX(9px)} 75%{transform:translateX(21px)} }

.memory-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 23px 0 14px; }
.memory-grid button { min-height: 76px; color: var(--ink); background: #dde7e2; border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); cursor: pointer; transition: transform .08s, background .08s; }
.memory-grid button b, .memory-grid button small { display: block; }
.memory-grid button b { font: 800 21px/1 "KaiTi", serif; }
.memory-grid button small { margin-top: 7px; color: #66777f; font-size: 9px; }
.memory-grid button.flash, .memory-grid button:active { color: var(--navy); background: var(--gold); transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.memory-status { min-height: 22px; margin: 8px 0 !important; color: var(--coral); font-weight: 800; }

.start-screen, .ending-screen {
  position: absolute; z-index: 50; inset: 0; overflow: hidden; color: var(--chalk);
  background: linear-gradient(180deg, #77c8db 0%, #cce4c7 73%, #4e8d75 74%, #2c674f 100%);
}
.start-screen { display: grid; place-items: center; }
.title-card { position: relative; z-index: 3; margin-top: -28px; text-align: center; }
.eyebrow { display: inline-block; padding: 6px 11px; color: var(--navy); background: var(--gold); transform: rotate(-1deg); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.title-card h2 { margin: 14px 0 -2px; color: var(--chalk); text-shadow: 4px 5px 0 var(--navy); font: 700 clamp(48px, 8vw, 82px)/.95 "KaiTi", "STKaiti", serif; letter-spacing: .05em; }
.title-card h2 b { display: inline-grid; width: .99em; height: .99em; place-items: center; margin-right: .08em; color: var(--gold); border: .08em solid var(--gold); border-radius: 50%; font-family: "Consolas", monospace; font-size: .7em; transform: rotate(-7deg); }
.subtitle { margin: 11px 0; color: var(--navy); font: 800 14px/1 "Consolas", monospace; letter-spacing: .65em; }
.intro { margin: 14px auto 10px; color: #234e61; font: 12px/1.6 "KaiTi", serif; }
.character-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: min(580px, calc(100vw - 75px)); margin: 0 auto 14px; }
.character-select button { display: flex; align-items: center; gap: 8px; padding: 7px 8px; text-align: left; color: var(--navy); background: rgba(255,250,240,.78); border: 2px solid transparent; box-shadow: 0 3px 0 rgba(23,57,92,.2); cursor: pointer; }
.character-select button:hover { background: var(--paper); }
.character-select button.selected { border-color: var(--navy); background: var(--gold); transform: translateY(-2px); box-shadow: 0 5px 0 var(--navy); }
.character-select button > i { display: grid; flex: 0 0 34px; height: 34px; place-items: center; color: var(--paper); background: var(--coral); border-radius: 50%; font: 800 16px/1 "KaiTi", serif; }
.character-select button:nth-child(2) > i { background: #4d8f82; }
.character-select button:nth-child(3) > i { background: #6978b7; }
.character-select span, .character-select b, .character-select small { display: block; }
.character-select b { font-size: 11px; }
.character-select small { margin-top: 3px; color: #566e79; font-size: 8px; white-space: nowrap; }
.start-button { display: inline-flex; align-items: center; gap: 32px; padding: 0 0 0 22px; color: var(--chalk); background: var(--coral); border: 3px solid var(--navy); box-shadow: 6px 6px 0 var(--navy); cursor: pointer; font-weight: 800; }
.start-button i { display: grid; width: 48px; height: 46px; place-items: center; color: var(--navy); background: var(--gold); border-left: 3px solid var(--navy); font-style: normal; font-size: 22px; }
.start-button:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--navy); }
.title-card > small { display: block; margin-top: 18px; color: rgba(23,57,92,.65); font: 9px/1 "Consolas", monospace; letter-spacing: .08em; }
.production-credit { display:grid;grid-template-columns:auto auto;justify-content:center;gap:0 16px;width:max-content;max-width:calc(100vw - 38px);margin:12px auto 0;padding:7px 11px 6px;color:var(--navy);background:rgba(246,239,216,.88);border:1px solid rgba(23,57,92,.48);box-shadow:3px 3px 0 rgba(23,57,92,.2);transform:rotate(-.45deg);font:800 9px/1.25 "KaiTi",serif; }
.production-credit strong { grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 5px;padding-bottom:5px;border-bottom:1px dashed rgba(23,57,92,.35);font-size:10px;letter-spacing:.09em; }
.production-credit strong i { display:grid;width:21px;height:21px;place-items:center;color:var(--gold);background:var(--navy);border-radius:50%;font:900 7px/1 "Consolas",monospace;transform:rotate(-8deg); }
.production-credit span { display:flex;gap:6px;align-items:baseline;white-space:nowrap; }
.production-credit span b { color:var(--coral);font-size:8px;letter-spacing:.08em; }
.school-silhouette { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 34%; background: #275b49; clip-path: polygon(0 50%, 9% 50%, 9% 25%, 26% 25%, 26% 42%, 38% 42%, 38% 4%, 67% 4%, 67% 42%, 79% 42%, 79% 20%, 94% 20%, 94% 50%, 100% 50%, 100% 100%, 0 100%); }
.school-silhouette i { position: relative; display: inline-block; width: 18px; height: 25px; margin: 38px 17px 0; background: #f2c659; opacity: .72; }
.sky-doodles span { position: absolute; z-index: 2; color: rgba(246,239,216,.75); font: 700 28px/1 "KaiTi", serif; }
.sky-doodles span:nth-child(1) { left: 11%; top: 18%; }
.sky-doodles span:nth-child(2) { left: 22%; top: 54%; transform: rotate(22deg); }
.sky-doodles span:nth-child(3) { right: 15%; top: 23%; font-size: 42px; transform: rotate(12deg); }
.sky-doodles span:nth-child(4) { right: 24%; top: 62%; }

.arcade-mode { position:absolute;z-index:80;inset:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;color:var(--paper);background:#0e2c47; }
.arcade-header { display:grid;grid-template-columns:1.1fr 1.6fr auto;gap:18px;align-items:center;padding:12px 18px;background:#10263c;border-bottom:3px solid var(--gold); }
.arcade-header span,.arcade-brief > span { color:var(--gold);font:800 9px/1 "Consolas",monospace;letter-spacing:.17em; }
.arcade-header h2 { margin:4px 0 0;font:700 22px/1 "KaiTi",serif; }
.arcade-stats { display:flex;justify-content:center;gap:22px; }
.arcade-stats span { color:rgba(255,250,240,.66);letter-spacing:.06em;white-space:nowrap; }
.arcade-stats b { display:block;margin-top:5px;color:var(--paper);font:900 17px/1 "Consolas",monospace; }
.arcade-header button,.arcade-footer button { padding:8px 11px;color:var(--paper);background:transparent;border:1px solid rgba(255,255,255,.35);cursor:pointer;font-size:9px;font-weight:800; }
.arcade-header button:hover,.arcade-footer button:hover { color:var(--navy);background:var(--gold);border-color:var(--gold); }
.arcade-brief { display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:8px 18px;color:var(--ink);background:var(--paper);border-bottom:2px solid var(--ink); }
.arcade-brief > span { padding:5px 8px;color:var(--paper);background:var(--coral); }
.arcade-brief p,.arcade-brief strong { margin:0;font-size:10px; }
.arcade-brief strong { color:var(--coral);text-align:right; }
.arcade-canvas-wrap { position:relative;isolation:isolate;min-height:0;display:grid;place-items:center;overflow:hidden;background:#091f32; }
#arcadeCanvas { width:100%;height:100%;min-height:0;display:block;object-fit:contain;background:#315e67;image-rendering:auto; }
.arcade-result { position:absolute;z-index:7;left:50%;top:50%;width:min(430px,calc(100% - 34px));padding:19px 22px 18px;text-align:center;color:var(--paper);background:linear-gradient(145deg,rgba(12,38,59,.97),rgba(20,62,82,.97));border:2px solid var(--gold);box-shadow:0 0 0 5px rgba(9,31,49,.72),12px 14px 0 rgba(4,17,29,.48);transform:translate(-50%,-50%);animation:result-arrive .38s cubic-bezier(.2,.8,.2,1) both; }
.arcade-result::before,.arcade-result::after { content:"";position:absolute;top:10px;width:42px;height:3px;background:var(--gold);box-shadow:0 7px 0 rgba(244,189,79,.35); }.arcade-result::before{left:12px}.arcade-result::after{right:12px}
.arcade-result > span { color:var(--gold);font:900 8px/1 "Consolas",monospace;letter-spacing:.2em; }
.arcade-result-grade { display:grid;width:82px;height:82px;place-content:center;margin:10px auto 8px;color:var(--navy);background:var(--gold);border:4px double var(--paper);border-radius:50%;box-shadow:0 0 28px rgba(244,189,79,.34);transform:rotate(-4deg); }
.arcade-result-grade b { font:900 38px/.82 "Consolas",monospace; }.arcade-result-grade small{margin-top:7px;font-size:7px;font-weight:900;letter-spacing:.08em}
.arcade-result[data-grade="S"] .arcade-result-grade { color:#4c3410;background:#ffd75c;box-shadow:0 0 34px rgba(255,215,92,.62); }.arcade-result[data-grade="A"] .arcade-result-grade{background:#8edfc6}.arcade-result[data-grade="B"] .arcade-result-grade{background:#89b8dc}.arcade-result[data-grade="C"] .arcade-result-grade{background:#ddaa7b}.arcade-result[data-grade="F"] .arcade-result-grade{color:var(--paper);background:var(--coral);box-shadow:none}.arcade-result[data-grade="assisted"] .arcade-result-grade{background:#c4b5df}
.arcade-result h3 { margin:0 0 11px;font:700 22px/1 "KaiTi",serif;letter-spacing:.08em; }
.arcade-result-breakdown { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px; }
.arcade-result-breakdown span { padding:8px 5px;background:rgba(255,255,255,.07);border-top:2px solid rgba(244,189,79,.35); }.arcade-result-breakdown small,.arcade-result-breakdown b{display:block}.arcade-result-breakdown small{color:rgba(255,250,240,.55);font-size:7px}.arcade-result-breakdown b{margin-top:5px;font:900 13px/1 "Consolas",monospace}
.arcade-result p { min-height:14px;margin:0 0 12px;color:rgba(255,250,240,.72);font-size:8px;line-height:1.5; }
.arcade-result button { min-width:150px;padding:9px 16px;color:var(--navy);background:var(--gold);border:2px solid var(--paper);box-shadow:3px 4px 0 rgba(0,0,0,.22);cursor:pointer;font-size:9px;font-weight:900; }
@keyframes result-arrive { from{opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.94)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.arcade-footer { display:flex;justify-content:space-between;align-items:center;min-height:47px;padding:7px 18px;background:#10263c;border-top:2px solid rgba(244,189,79,.45); }
.arcade-footer p { margin:0;color:rgba(255,250,240,.7);font-size:10px; }
.arcade-footer button { margin-left:7px;color:var(--navy);background:var(--gold);border-color:var(--ink); }
.arcade-footer #arcadeAssist { color:var(--paper);background:var(--mint); }
.arcade-touch { display:none;position:absolute;z-index:5;inset:0;pointer-events:none; }
.arcade-touch button { position:absolute;width:45px;height:45px;color:var(--paper);background:rgba(14,39,59,.76);border:1px solid rgba(255,255,255,.28);border-radius:7px;pointer-events:auto; }
.arcade-touch #arcadeAction { right:24px;bottom:25px;width:72px;height:72px;color:var(--navy);background:rgba(244,189,79,.9);border-radius:50%;font-weight:900; }

.open-world-mode { position:absolute;z-index:85;inset:0;display:grid;grid-template-rows:72px minmax(0,1fr);overflow:hidden;color:var(--paper);background:#16354d; }
.ow-header { position:relative;z-index:6;display:grid;grid-template-columns:190px 1fr auto;gap:20px;align-items:center;padding:8px 13px 8px 17px;background:linear-gradient(90deg,#0c263c,#173c59 65%,#102a42);border-bottom:3px solid var(--gold);box-shadow:0 5px 0 rgba(8,29,46,.28); }
.ow-identity { position:relative;padding-left:53px; }
.ow-identity::before { content:"C6";position:absolute;left:0;top:1px;display:grid;width:43px;height:43px;place-items:center;color:var(--gold);border:3px double var(--gold);border-radius:50%;font:900 13px/1 "Consolas",monospace;transform:rotate(-8deg); }
.ow-identity > span { color:var(--gold);font:800 9px/1 "Consolas",monospace;letter-spacing:.08em; }
.ow-identity h2 { margin:3px 0 2px;font:700 22px/1 "KaiTi",serif;letter-spacing:.08em; }
.ow-identity small { color:rgba(255,250,240,.6);font-size:8px; }
.ow-stats { display:flex;justify-content:center;gap:9px; }
.ow-stats span { min-width:70px;padding:7px 9px;text-align:center;background:rgba(255,255,255,.055);border-left:2px solid rgba(244,189,79,.42); }
.ow-stats small,.ow-stats b { display:block; }
.ow-stats small { color:rgba(255,250,240,.55);font:7px/1 "Consolas",monospace;letter-spacing:.08em; }
.ow-stats small em { color:var(--mint);font-style:normal;letter-spacing:0; }
.ow-stats b { margin-top:5px;color:var(--gold);font:900 13px/1 "Consolas",monospace; }
.ow-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px; }
.ow-actions button { padding:7px 9px;color:var(--paper);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.23);cursor:pointer;font-size:8px;font-weight:800; }
.ow-actions button:hover { color:var(--navy);background:var(--gold);border-color:var(--gold); }
#openWorldCanvas { width:100%;height:100%;min-height:0;display:block;background:#6eaa72;image-rendering:auto; }

.ow-main-tracker { position:absolute;z-index:10;left:16px;top:87px;width:330px;padding:11px 14px 10px;text-align:left;color:var(--ink);background:linear-gradient(105deg,#f4bd4f,#ffe29a);border:2px solid var(--navy);border-left:8px solid var(--coral);box-shadow:6px 7px 0 rgba(8,29,46,.38);cursor:pointer; }
.ow-main-tracker::after { content:"打开任务本  J";position:absolute;right:10px;top:10px;color:rgba(20,43,66,.56);font:800 7px/1 "Consolas",monospace; }
.ow-main-tracker > span { display:flex;align-items:center;gap:8px;padding-right:82px; }
.ow-main-tracker > span b { padding:4px 6px;color:var(--paper);background:var(--navy);font:900 8px/1 "Consolas",monospace; }
.ow-main-tracker > span small { color:#7c5632;font-size:8px;font-weight:800; }
.ow-main-tracker strong { display:block;margin-top:8px;font:700 19px/1 "KaiTi",serif; }
.ow-main-tracker p { margin:4px 0 7px;color:#4f5050;font-size:9px;line-height:1.45; }
.ow-main-command { display:grid;grid-template-columns:48px 1fr;align-items:start;margin-top:5px;color:#354650;font-size:9px;line-height:1.35; }
.ow-main-command b { padding:3px 5px;text-align:center;color:var(--paper);background:var(--navy);font-size:8px; }
.ow-main-command em { padding:2px 0 2px 8px;font-style:normal;font-weight:800; }
.ow-main-tracker > i { display:block;color:var(--coral);font:900 8px/1 "Consolas",monospace;font-style:normal; }
.ow-main-tracker.complete { color:var(--paper);background:linear-gradient(105deg,#477261,#62bba3);border-left-color:var(--gold); }
.ow-main-tracker.complete p,.ow-main-tracker.complete > i,.ow-main-tracker.complete > span small { color:rgba(255,250,240,.75); }

.ow-world-legend { position:absolute;z-index:9;right:14px;bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;width:245px;padding:9px 11px;color:var(--paper);background:rgba(9,31,49,.88);border:1px solid rgba(244,189,79,.72);box-shadow:4px 5px 0 rgba(8,29,46,.28);pointer-events:none; }
.ow-world-legend > b { grid-column:1/-1;color:var(--gold);font:900 8px/1 "Consolas",monospace;letter-spacing:.1em; }
.ow-world-legend span { display:flex;align-items:center;gap:5px;font-size:7px;white-space:nowrap; }
.ow-world-legend i { display:grid;width:18px;height:18px;place-items:center;font:900 8px/1 "Consolas",monospace;font-style:normal; }
.ow-legend-toggle { display:none;position:absolute;z-index:11;color:var(--paper);background:rgba(9,31,49,.88);border:1px solid var(--gold);font-size:8px;font-weight:900; }
.legend-main { color:var(--navy);background:var(--gold);transform:rotate(45deg); }.legend-main::first-letter{transform:rotate(-45deg)}
.legend-play { color:var(--paper);background:#4f89a0; }
.legend-coin { color:var(--navy);background:var(--gold);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.legend-patrol { color:var(--paper);background:var(--coral); }

.ow-quest-panel { position:absolute;z-index:12;right:14px;top:87px;bottom:14px;width:min(360px,calc(100% - 28px));overflow:auto;padding:28px 23px 20px 31px;color:var(--ink);background:repeating-linear-gradient(transparent 0 27px,rgba(79,137,165,.14) 28px 29px),linear-gradient(90deg,transparent 21px,rgba(222,91,83,.28) 22px 24px,transparent 25px),var(--paper);border:2px solid var(--ink);box-shadow:9px 10px 0 rgba(8,29,46,.42);transform:rotate(.35deg); }
.ow-notebook-tab { position:absolute;left:-2px;top:-2px;padding:6px 11px;color:var(--paper);background:var(--coral);font:800 8px/1 "Consolas",monospace;letter-spacing:.12em; }
#owPanelClose { position:absolute;right:8px;top:7px;width:27px;height:27px;color:var(--paper);background:var(--navy);border:0;cursor:pointer;font-size:18px; }
.ow-kicker { display:block;margin:10px 0 5px;color:var(--coral);font:900 8px/1 "Consolas",monospace;letter-spacing:.18em;text-transform:uppercase; }
.ow-quest-panel h3 { margin:0 0 14px;font:700 25px/1 "KaiTi",serif; }
.ow-main-card { margin:7px 0 18px;padding:12px;color:var(--paper);background:var(--navy);border-left:6px solid var(--gold);box-shadow:4px 4px 0 rgba(20,43,66,.2); }
.ow-main-card > b { color:var(--gold);font:900 8px/1 "Consolas",monospace; }
.ow-main-card h3 { margin:7px 0 5px;color:var(--paper);font-size:22px; }
.ow-main-card > p { margin:0 0 10px;color:rgba(255,250,240,.75);font-size:9px;line-height:1.55; }
.ow-main-directions { display:grid;grid-template-columns:48px 1fr;gap:5px;margin:0 0 11px; }
.ow-main-directions dt { padding:5px;text-align:center;color:var(--navy);background:var(--gold);font-size:8px;font-weight:900; }
.ow-main-directions dd { margin:0;padding:5px 7px;color:var(--paper);background:rgba(255,255,255,.08);font-size:8px;line-height:1.4; }
.ow-main-timeline { display:grid;gap:4px; }
.ow-main-timeline span { position:relative;padding:5px 7px 5px 25px;color:rgba(255,250,240,.4);background:rgba(255,255,255,.04);font-size:8px; }
.ow-main-timeline span::before { content:attr(data-step);position:absolute;left:6px;top:5px;color:rgba(255,250,240,.45);font:800 7px/1 "Consolas",monospace; }
.ow-main-timeline span.done { color:#bde7d5; }.ow-main-timeline span.done::before { content:"✓";color:var(--mint); }
.ow-main-timeline span.current { color:var(--navy);background:var(--gold);font-weight:900; }.ow-main-timeline span.current::before { color:var(--coral); }
.ow-task-list { display:grid;gap:7px;margin-bottom:18px; }
.ow-task-list article { position:relative;padding:7px 8px 7px 32px;background:rgba(255,250,240,.73);border:1px solid rgba(20,43,66,.17); }
.ow-task-list article::before { content:"";position:absolute;left:9px;top:10px;width:12px;height:12px;border:2px solid var(--navy);transform:rotate(-4deg); }
.ow-task-list article.done { color:#477261;background:rgba(98,187,163,.13); }
.ow-task-list article.done::before { content:"✓";display:grid;place-items:center;color:var(--paper);background:var(--mint);border-color:var(--mint);font:900 9px/1 sans-serif; }
.ow-task-list b,.ow-task-list small { display:block; }
.ow-task-list b { font-size:10px; }
.ow-task-list small { margin-top:3px;color:#687a83;font-size:8px;line-height:1.45; }
.ow-task-list i { position:absolute;right:7px;top:9px;color:var(--coral);font:800 8px/1 "Consolas",monospace;font-style:normal; }
.ow-task-list.world article { border-left:3px solid var(--gold); }
.ow-quest-panel > p { margin:5px 0 0;padding-top:9px;color:#6b7a80;border-top:1px dashed rgba(20,43,66,.35);font:9px/1.6 "KaiTi",serif; }

.ow-map-overlay { position:absolute;z-index:16;inset:0;display:grid;place-items:center;padding:18px;background:rgba(7,28,45,.78);backdrop-filter:blur(3px); }
.ow-map-overlay > div { width:min(710px,100%);padding:22px 26px 18px;color:var(--ink);background:#eee2bf;border:4px solid var(--navy);box-shadow:12px 13px 0 rgba(4,19,31,.55);transform:rotate(-.4deg); }
.ow-map-overlay h3 { margin:5px 0 12px;font:700 24px/1 "KaiTi",serif; }
#owMapCanvas { width:100%;height:auto;display:block;background:#c7d0af;border:2px solid var(--navy);box-shadow:inset 0 0 0 5px rgba(255,250,240,.45);image-rendering:auto; }
.ow-map-legend { display:flex;flex-wrap:wrap;gap:7px 13px;margin:10px 0;color:#566a72;font-size:8px; }
.ow-map-legend span { display:flex;align-items:center;gap:5px; }
.ow-map-legend i { display:grid;width:14px;height:14px;place-items:center;margin:0;border:2px solid var(--navy);border-radius:0;color:var(--navy);font:900 7px/1 "Consolas",monospace;font-style:normal; }
.ow-map-legend .map-you { background:var(--coral);clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%); }
.ow-map-legend .map-main { background:var(--gold);transform:rotate(45deg); }
.ow-map-legend .map-activity { color:var(--paper);background:#4f89a0; }
.ow-map-legend .map-unknown { color:var(--paper);background:#8b9694; }
.ow-map-overlay button { float:right;padding:8px 15px;color:var(--paper);background:var(--navy);border:2px solid var(--ink);cursor:pointer;font-size:9px;font-weight:800; }

.ow-level-overlay,.ow-save-overlay { position:absolute;z-index:17;inset:0;display:grid;place-items:center;padding:18px;background:rgba(7,28,45,.86);backdrop-filter:blur(4px); }
.ow-level-overlay > div,.ow-save-overlay > div { position:relative;width:min(920px,100%);max-height:calc(100vh - 36px);overflow:auto;padding:24px 27px 20px;color:var(--ink);background:#eee2bf;border:4px solid var(--navy);box-shadow:12px 13px 0 rgba(4,19,31,.55); }
.ow-level-overlay h3,.ow-save-overlay h3 { margin:5px 0 7px;font:700 27px/1 "KaiTi",serif; }
.ow-level-overlay > div > p,.ow-save-overlay > div > p { margin:0 0 14px;color:#61727a;font-size:9px; }
.ow-level-summary { position:absolute;right:28px;top:22px;text-align:right; }
.ow-level-summary b,.ow-level-summary span,.ow-level-summary em { display:block; }
.ow-level-summary b { color:var(--coral);font:900 19px/1 "Consolas",monospace; }
.ow-level-summary span { margin-top:4px;color:#6a797e;font-size:7px;letter-spacing:.12em; }
.ow-level-summary em { margin-top:5px;color:var(--navy);font:900 7px/1 "Consolas",monospace;font-style:normal;letter-spacing:.04em; }
.ow-level-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:17px 0; }
.ow-level-grid button { position:relative;min-height:86px;padding:11px 9px 9px 42px;text-align:left;color:var(--navy);background:rgba(255,250,240,.76);border:2px solid rgba(20,43,66,.22);border-left:5px solid var(--gold);cursor:pointer; }
.ow-level-grid button:hover { color:var(--paper);background:var(--navy);transform:translateY(-2px); }
.ow-level-grid button.done { background:#cee4d8;border-left-color:var(--mint); }
.ow-level-grid button.done:hover { background:#477261; }
.ow-level-grid button > i { position:absolute;left:9px;top:11px;display:grid;width:24px;height:24px;place-items:center;color:var(--paper);background:var(--coral);border-radius:50%;font:900 8px/1 "Consolas",monospace;font-style:normal; }
.ow-level-grid button.done > i { background:var(--mint); }
.ow-level-grid b,.ow-level-grid small,.ow-level-grid span { display:block; }
.ow-level-grid button > em { position:absolute;right:7px;top:7px;min-width:24px;padding:4px 5px;text-align:center;color:#64767d;background:rgba(20,43,66,.08);border:1px solid rgba(20,43,66,.18);font:900 7px/1 "Consolas",monospace;font-style:normal; }
.ow-level-grid button > em.rank-s { color:#4c3410;background:#ffd75c;border-color:#b8841f; }.ow-level-grid button > em.rank-a{color:#17483c;background:#8edfc6;border-color:#438d7b}.ow-level-grid button > em.rank-b{color:#17395c;background:#9ac5e6;border-color:#4f89a0}.ow-level-grid button > em.rank-c{color:#633819;background:#e3b083;border-color:#ae7040}
.ow-level-grid button:hover > em { color:var(--navy);background:var(--paper);border-color:var(--gold); }
.ow-level-grid b { font:700 13px/1.1 "KaiTi",serif; }
.ow-level-grid small { margin-top:5px;color:#66777d;font-size:7px;line-height:1.4; }
.ow-level-grid button:hover small { color:rgba(255,250,240,.65); }
.ow-level-grid span { margin-top:6px;color:var(--coral);font:800 7px/1 "Consolas",monospace; }
.ow-overlay-close { float:right;padding:8px 16px;color:var(--paper);background:var(--navy);border:2px solid var(--ink);cursor:pointer;font-size:9px;font-weight:800; }
.ow-save-slots { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:17px 0; }
.ow-save-slot { min-height:205px;padding:15px;color:var(--ink);background:rgba(255,250,240,.78);border:2px solid var(--navy);box-shadow:4px 4px 0 rgba(20,43,66,.18); }
.ow-save-slot.current { border-color:var(--coral);box-shadow:4px 4px 0 var(--coral); }
.ow-save-slot > span { color:var(--coral);font:900 9px/1 "Consolas",monospace;letter-spacing:.12em; }
.ow-save-slot h4 { margin:10px 0 7px;font:700 20px/1 "KaiTi",serif; }
.ow-save-slot p { min-height:56px;margin:0 0 12px;color:#64767d;font-size:8px;line-height:1.65; }
.ow-save-slot button { width:100%;margin-top:6px;padding:7px;color:var(--paper);background:var(--navy);border:1px solid var(--ink);cursor:pointer;font-size:8px;font-weight:800; }
.ow-save-slot button[data-save-action="save"] { color:var(--navy);background:var(--gold); }
.ow-save-slot button[data-save-action="new"] { color:var(--coral);background:transparent;border-color:var(--coral); }
.ow-save-slot button:disabled { opacity:.35;cursor:not-allowed; }

.ow-prompt { position:absolute;z-index:10;left:50%;bottom:25px;display:flex;align-items:center;gap:9px;padding:7px 12px;color:var(--paper);background:rgba(9,31,49,.9);border:2px solid var(--gold);transform:translateX(-50%);box-shadow:0 5px 13px rgba(0,0,0,.28);font-size:10px;font-weight:800; }
.ow-prompt kbd { display:grid;width:27px;height:27px;place-items:center;color:var(--navy);background:var(--gold);border:0;box-shadow:none;font:900 12px/1 "Consolas",monospace; }
.ow-ability-meter { position:absolute;z-index:10;left:17px;bottom:17px;width:190px;padding:8px;color:var(--paper);background:rgba(9,31,49,.86);border-left:3px solid var(--coral);filter:drop-shadow(0 5px 9px rgba(0,0,0,.28)); }
.ow-ability-meter > span { display:flex;align-items:center;gap:8px; }
.ow-ability-meter > span b { display:grid;width:27px;height:27px;place-items:center;color:var(--navy);background:var(--gold);font:900 11px/1 "Consolas",monospace; }
.ow-ability-meter small { font-size:8px; }
.ow-ability-meter > i { display:block;height:4px;margin-top:7px;overflow:hidden;background:rgba(255,255,255,.16); }
.ow-ability-meter > i b { display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--coral),var(--gold));transition:width .18s; }
.ow-toast { position:absolute;z-index:13;left:50%;top:88px;max-width:min(560px,calc(100% - 38px));padding:9px 17px;color:var(--navy);background:var(--gold);border:2px solid var(--navy);box-shadow:5px 5px 0 rgba(8,29,46,.35);opacity:0;pointer-events:none;transform:translate(-50%,-8px);transition:opacity .18s,transform .18s;font-size:10px;font-weight:800; }
.ow-toast.show { opacity:1;transform:translate(-50%,0); }

.ow-upgrade-splash { position:absolute;z-index:20;inset:0;display:grid;place-content:center;padding:20px;text-align:center;color:var(--paper);background:radial-gradient(circle at 50% 44%,rgba(244,189,79,.26),transparent 24%),rgba(7,28,45,.94); }
.ow-upgrade-splash::before { content:"";position:absolute;left:15%;right:15%;top:25%;bottom:25%;border:1px solid rgba(244,189,79,.48);box-shadow:inset 0 0 70px rgba(244,189,79,.08); }
.ow-upgrade-splash > * { position:relative; }
.ow-upgrade-splash span { color:var(--gold);font:900 10px/1 "Consolas",monospace;letter-spacing:.3em; }
.ow-upgrade-splash h3 { margin:13px 0 8px;color:var(--gold);text-shadow:4px 4px 0 rgba(0,0,0,.3);font:700 47px/1 "KaiTi",serif; }
.ow-upgrade-splash p { margin:0 auto 22px;max-width:470px;color:rgba(255,250,240,.75);font:13px/1.7 "KaiTi",serif; }
.ow-upgrade-splash button { justify-self:center;padding:10px 19px;color:var(--navy);background:var(--gold);border:2px solid var(--paper);cursor:pointer;font-size:10px;font-weight:900; }
.ow-touch { display:none;position:absolute;z-index:11;inset:0;pointer-events:none; }
.ow-touch button { position:absolute;width:42px;height:42px;color:var(--paper);background:rgba(9,31,49,.72);border:1px solid rgba(255,255,255,.26);border-radius:7px;pointer-events:auto;user-select:none;font-weight:900; }
.ow-touch #owTouchAction { right:22px;bottom:30px;width:68px;height:68px;color:var(--navy);background:rgba(244,189,79,.9);border-radius:50%;font-size:20px; }
.ow-touch #owTouchAbility { right:98px;bottom:82px;width:48px;height:48px;background:rgba(238,107,88,.9);border-radius:50%;font-size:15px; }
.virtual-joystick { position:absolute;left:18px;bottom:18px;width:126px;height:126px;border:2px solid rgba(255,255,255,.34);border-radius:50%;background:radial-gradient(circle,rgba(244,189,79,.11) 0 24%,rgba(9,31,49,.66) 26% 100%);box-shadow:inset 0 0 0 12px rgba(255,255,255,.035),0 7px 18px rgba(0,0,0,.22);pointer-events:auto;touch-action:none;user-select:none; }
.virtual-joystick::before,.virtual-joystick::after { content:"";position:absolute;left:50%;top:50%;background:rgba(255,255,255,.15);transform:translate(-50%,-50%); }
.virtual-joystick::before { width:1px;height:88px; }.virtual-joystick::after { width:88px;height:1px; }
.virtual-joystick i { position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;background:var(--gold);border:3px solid var(--navy);box-shadow:0 5px 0 rgba(9,31,49,.5);transform:translate(-50%,-50%);will-change:transform; }
.virtual-joystick span { position:absolute;left:50%;top:8px;color:rgba(255,255,255,.45);font:800 8px/1 "Consolas",monospace;transform:translateX(-50%); }

.ending-screen { display: grid; place-items: center; z-index: 60; background: rgba(14,40,62,.92); backdrop-filter: blur(4px); }
.ending-card { width: min(530px, calc(100% - 38px)); padding: 38px 42px 32px; text-align: center; color: var(--ink); background: var(--paper); border: 4px solid var(--gold); box-shadow: 11px 12px 0 #081f34; }
.ending-badge { display: inline-grid; width: 70px; height: 70px; place-items: center; margin-bottom: 12px; color: var(--gold); background: var(--navy); border: 5px double var(--gold); border-radius: 50%; font: 900 25px/1 "Consolas", monospace; transform: rotate(-7deg); }
.ending-card h2 { margin: 8px 0 12px; font: 700 34px/1 "KaiTi", serif; }
.ending-card > p:not(.modal-kicker) { font: 14px/1.8 "KaiTi", serif; }
.ending-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0; border: solid rgba(20,43,66,.15); border-width: 1px 0; }
.ending-stats span { padding: 14px 6px; }
.ending-stats span + span { border-left: 1px solid rgba(20,43,66,.15); }
.ending-stats b, .ending-stats small { display: block; }
.ending-stats b { color: var(--coral); font: 800 18px/1 "Consolas", monospace; }
.ending-stats small { margin-top: 6px; color: #70808a; font-size: 9px; letter-spacing: .15em; }
.ending-credit { margin:-10px 0 18px !important;color:#6c7b83;font:800 9px/1.5 "KaiTi",serif !important;letter-spacing:.04em; }

.chapter-splash { position: absolute; z-index: 55; inset: 0; display: grid; place-content: center; text-align: center; color: var(--chalk); background: rgba(12,34,53,.94); }
.chapter-splash::before, .chapter-splash::after { content: ""; position: absolute; left: 12%; right: 12%; height: 1px; background: rgba(244,189,79,.5); }
.chapter-splash::before { top: 28%; }
.chapter-splash::after { bottom: 28%; }
.chapter-splash span { color: var(--gold); font: 800 11px/1 "Consolas", monospace; letter-spacing: .35em; }
.chapter-splash h2 { margin: 14px 0 10px; font: 700 42px/1 "KaiTi", serif; letter-spacing: .08em; }
.chapter-splash p { margin: 0; color: rgba(246,239,216,.7); font: 13px/1.5 "KaiTi", serif; }

.cinematic { position:absolute;z-index:58;inset:0;overflow:hidden;color:var(--paper);background:#071b2e; }
.cinematic::before,.cinematic::after { content:"";position:absolute;z-index:6;left:0;right:0;height:55px;background:#061522; }
.cinematic::before{top:0}.cinematic::after{bottom:0}
.cinematic-visual { position:absolute;inset:55px 0;background:linear-gradient(165deg,#315f70,#122e47 65%,#0b2034);transition:background .5s; }
.cinematic-visual::before { content:"";position:absolute;left:10%;right:10%;bottom:18%;height:28%;background:#c8b991;box-shadow:0 -150px 0 rgba(232,217,180,.16);clip-path:polygon(0 18%,100% 0,100% 100%,0 100%); }
.cinematic-visual[data-scene="wind"] { background:linear-gradient(165deg,#5d7881,#1b3c55 60%,#11283e); }
.cinematic-visual[data-scene="badge"] { background:radial-gradient(circle at 65% 55%,#b7884d 0 4%,#1a3b52 5%,#091d30 52%); }
.cinematic-window { position:relative;display:inline-block;width:90px;height:125px;margin:45px 0 0 14%;background:linear-gradient(#e9c76d,#6ba8af);border:12px solid #173247;box-shadow:0 0 30px rgba(244,189,79,.16); }
.flying-badge { position:absolute;right:20%;top:40%;display:grid;width:72px;height:72px;place-items:center;color:var(--gold);border:5px double var(--gold);border-radius:50%;font:900 22px/1 "Consolas",monospace;animation:badge-fall 2.4s ease-in-out infinite; }
.cinematic-copy { position:absolute;z-index:8;left:8%;bottom:16%;max-width:560px;text-shadow:0 2px 12px #071b2e; }
.cinematic-copy span { color:var(--gold);font:800 10px/1 "Consolas",monospace;letter-spacing:.26em; }
.cinematic-copy h2 { margin:10px 0 8px;font:700 clamp(27px,5vw,48px)/1.05 "KaiTi",serif;letter-spacing:.05em; }
.cinematic-copy p { margin:0;color:rgba(255,250,240,.76);font:13px/1.7 "KaiTi",serif; }
.cinematic > button { position:absolute;z-index:9;right:7%;bottom:13%;padding:10px 14px;color:var(--paper);background:transparent;border:1px solid rgba(255,255,255,.35);cursor:pointer; }
.cinematic > button i { margin-left:20px;color:var(--gold);font-style:normal; }
.cinematic > .cinematic-skip { top:70px;right:18px;bottom:auto;padding:6px 9px;border:0;color:rgba(255,255,255,.45);font-size:10px;text-decoration:underline; }
.screen-flash { position:absolute;z-index:48;inset:0;pointer-events:none;background:var(--paper);opacity:0; }
.screen-flash.active { animation:screen-flash .4s ease-out; }

@keyframes badge-fall { 0%{transform:translate(0,-35px) rotate(-8deg)} 55%{transform:translate(-70px,45px) rotate(165deg)} 100%{transform:translate(-105px,60px) rotate(220deg);opacity:.1} }
@keyframes screen-flash { 0%{opacity:.75} 100%{opacity:0} }
@keyframes buff-pulse { from{transform:translateY(0);filter:brightness(1)} to{transform:translateY(-2px);filter:brightness(1.16)} }

.touch-controls { display: none; position: absolute; z-index: 10; inset: 0; pointer-events: none; }
.touch-action, .touch-buff { position:absolute;width:42px;height:42px;color:var(--chalk);background:rgba(14,39,59,.68);border:1px solid rgba(255,255,255,.25);border-radius:7px;pointer-events:auto;user-select:none; }
.touch-action { right: 26px; bottom: 38px; width: 68px; height: 68px; border-radius: 50%; color: var(--ink); background: rgba(244,189,79,.88); font-size: 22px; font-weight: 900; }
.touch-buff { right:104px;bottom:83px;width:48px;height:48px;border-radius:50%;color:var(--paper);background:rgba(238,107,88,.9);font-size:16px;font-weight:900; }

.footer-strip { position:fixed;z-index:94;left:0;right:0;bottom:0;min-height:48px;padding:0 24px;color:rgba(246,239,216,.65);background:linear-gradient(0deg,rgba(9,31,49,.82),rgba(9,31,49,0));font:10px/1 "Consolas",monospace;letter-spacing:.1em;pointer-events:none; }
.immersive-mode .footer-strip { display:none; }
.immersive-mode .topbar { display:flex;min-height:0;justify-content:flex-end;padding:10px 14px;background:none; }
.immersive-mode .topbar .brand-lockup,.immersive-mode .topbar #soundBtn { display:none; }
.footer-strip p { margin: 0; font: 12px/1 "KaiTi", serif; opacity: .65; }
#locationLabel, #clockLabel { min-width: 90px; }
#clockLabel { text-align: right; color: var(--gold); }

@keyframes note-pop { 50% { transform: rotate(-1deg) scale(1.045); } }
@keyframes hint-in { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes dialogue-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -47%) scale(.97); } }

@media (pointer: coarse), (max-width: 760px) {
  .game-shell { padding:0; }
  .topbar { min-height: 52px; }
  .brand-lockup h1 { font-size: 19px; }
  .brand-lockup p { display: none; }
  .class-stamp { width: 34px; height: 34px; font-size: 14px; }
  .stage-wrap { min-height:0;aspect-ratio:auto;height:100vh;border-width:0; }
  .touch-controls { display: block; }
  .arcade-touch { display:block; }
  .ow-touch { display:block; }
  .quest-note { top: 12px; right: 12px; width: 177px; min-height: 110px; padding: 12px 13px 10px 21px; }
  .buff-hud { left:12px;top:12px;width:145px; }
  .buff-hud > button { padding:5px; }
  .quest-note strong { font-size: 14px; margin-top: 6px; }
  .quest-note p { min-height: 29px; margin: 3px 0 5px; font-size: 9px; }
  .dialogue { bottom: 155px; width: calc(100% - 24px); }
  .speaker-avatar { flex-basis: 64px; font-size: 28px; }
  .dialogue-copy { padding: 12px; }
  .dialogue p { font-size: 12px; }
  .footer-strip { display: none; }
  .interaction-hint { bottom: 126px; }
  .title-card { transform: scale(.88); }
  .production-credit { margin-top:10px;padding:6px 9px 5px;gap:0 10px; }
  .help-card { width:calc(100% - 18px);max-height:calc(100vh - 84px);padding:22px 15px 18px; }
  .cleaner-duel-card { width:calc(100% - 16px);max-height:calc(100vh - 16px);padding:18px 12px 14px; }
  .cleaner-duel-card::after { display:none; }
  .cleaner-duel-card > p { font-size:10px;line-height:1.45; }
  .cleaner-duel-board { grid-template-columns:86px 1fr;gap:8px;margin:8px 0;padding:8px; }
  .cleaner-duel-board::before { display:none; }.cleaner-portrait{width:44px;height:44px;font-size:17px}.cleaner-duel-board aside{padding-right:7px}.cleaner-evidence{grid-template-columns:repeat(2,1fr)}
  .cleaner-duel-card blockquote { padding:8px 9px 8px 29px;font-size:11px; }.cleaner-duel-card .cleaner-clue{margin:6px 0 !important;padding:6px 7px;font-size:8px}.cleaner-duel-options{gap:5px}.cleaner-duel-options button{padding:7px 7px 7px 34px;font-size:8px}
  .guide-grid { grid-template-columns:1fr; }
  .guide-controls { grid-row:auto; }
  .guide-section { padding:11px; }
  .guide-controls .control-list em { max-width:190px; }
  .guide-settings { grid-template-columns:1fr 1fr;padding:11px; }
  .guide-settings > div:first-child,.setting-volume,.setting-status { grid-column:1/-1; }
  .setting-actions { grid-column:1/-1; }
  .character-select { grid-template-columns: repeat(3, 1fr); width: 320px; }
  .character-select button { display: block; padding: 5px; text-align: center; }
  .character-select button > i { margin: 0 auto 4px; }
  .character-select small { display: none; }
  .arcade-header { grid-template-columns:1fr auto;padding:9px 10px; }
  .arcade-stats { grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:20px; }
  .arcade-header > button { grid-column:2;grid-row:1; }
  .arcade-brief { grid-template-columns:auto 1fr;padding:6px 10px; }
  .arcade-brief strong { grid-column:1/-1;text-align:left; }
  .arcade-footer { padding:6px 10px; }
  .arcade-footer p { max-width:58%; }
  .arcade-result { width:calc(100% - 24px);max-height:calc(100% - 16px);overflow:auto;padding:12px 12px 11px;box-shadow:0 0 0 3px rgba(9,31,49,.72),6px 7px 0 rgba(4,17,29,.4); }
  .arcade-result-grade { width:60px;height:60px;margin:6px auto; }.arcade-result-grade b{font-size:28px}.arcade-result-grade small{margin-top:4px;font-size:6px}
  .arcade-result h3 { margin-bottom:7px;font-size:18px; }.arcade-result-breakdown{margin-bottom:7px}.arcade-result-breakdown span{padding:5px 3px}.arcade-result p{margin-bottom:7px}.arcade-result button{padding:7px 12px}
  .open-world-mode { grid-template-rows:88px minmax(0,1fr); }
  .ow-header { grid-template-columns:105px minmax(0,1fr);grid-template-rows:42px 30px;gap:3px 6px;padding:5px 56px 5px 8px; }
  .ow-identity { align-self:center;padding-left:38px; }
  .ow-identity::before { top:1px;width:30px;height:30px;border-width:2px;font-size:9px; }
  .ow-identity > span { font-size:7px; }
  .ow-identity h2 { margin-top:2px;font-size:15px;white-space:nowrap; }
  .ow-identity small { display:none; }
  .ow-stats { grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,1fr);justify-content:stretch;gap:2px; }
  .ow-stats span { min-width:0;padding:3px 2px; }
  .ow-stats small { font-size:6px; }
  .ow-stats b { margin-top:3px;font-size:10px; }
  .ow-actions { grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(5,1fr);align-self:center;max-width:none;gap:2px; }
  .ow-actions button { min-width:0;height:34px;padding:4px 2px;font-size:0;line-height:1; }
  .ow-actions button::after { font-size:7px; }
  #owQuestToggle::after { content:"任务"; } #owLevelToggle::after { content:"关卡"; } #owMapToggle::after { content:"地图"; } #owSaveToggle::after { content:"存档"; } #owExit::after { content:"菜单"; }
  .ow-main-tracker { left:8px;top:96px;width:230px;padding:9px 10px 8px;border-left-width:6px; }
  .ow-main-tracker::after { display:none; }
  .ow-main-tracker > span { padding-right:0; }
  .ow-main-tracker > span small { display:none; }
  .ow-main-tracker strong { margin-top:6px;font-size:16px; }
  .ow-main-tracker p { display:none; }
  .ow-main-command { grid-template-columns:43px 1fr;margin-top:4px;font-size:8px; }
  .ow-main-command b { font-size:7px; }
  .ow-world-legend { display:none;right:10px;top:229px;bottom:auto;grid-template-columns:1fr;width:119px;padding:7px 8px; }
  .ow-world-legend.mobile-open { display:grid; }
  .ow-legend-toggle { display:block;right:10px;top:194px;min-width:76px;min-height:30px;padding:6px 9px; }
  .ow-quest-panel { top:88px;bottom:10px;right:10px;width:calc(100% - 20px); }
  .ow-map-overlay { padding:8px; }
  .ow-map-overlay > div { padding:16px 13px 13px; }
  .ow-map-overlay h3 { font-size:18px; }
  .ow-level-overlay,.ow-save-overlay { padding:7px; }
  .ow-level-overlay > div,.ow-save-overlay > div { max-height:calc(100vh - 14px);padding:17px 11px 13px; }
  .ow-level-overlay h3,.ow-save-overlay h3 { font-size:20px; }
  .ow-level-summary { position:static;margin-bottom:9px;text-align:left; }
  .ow-level-grid { grid-template-columns:repeat(2,1fr);gap:7px; }
  .ow-level-grid button { min-height:82px;padding:9px 6px 7px 35px; }
  .ow-level-grid button > i { left:6px;top:8px; }
  .ow-save-slots { grid-template-columns:1fr; }
  .ow-save-slot { min-height:0; }
  .ow-prompt { left:auto;right:10px;bottom:calc(147px + env(safe-area-inset-bottom));max-width:calc(100% - 190px);transform:none; }
  .ow-ability-meter { left:10px;top:auto;bottom:calc(154px + env(safe-area-inset-bottom));width:160px;transform:none; }
  .ow-toast { top:auto;bottom:calc(226px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 24px); }
  .virtual-joystick { bottom:calc(14px + env(safe-area-inset-bottom)); }
  .ow-touch #owTouchAction { bottom:calc(26px + env(safe-area-inset-bottom)); }
  .ow-touch #owTouchAbility { bottom:calc(78px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}