:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#f8f0de;background:#0b0b12;font-synthesis:none;--gold:#ffd96e;--muted:#b1a7b9;--line:rgba(226,205,165,.18)}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;min-height:100%;background:#0b0b12}body{overflow:hidden;overscroll-behavior:none}button{font:inherit;cursor:pointer;border:0;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #fff0ad;outline-offset:4px}.hidden{display:none!important}.stage{position:relative;width:min(1600px,100vw);height:min(100vh,56.25vw);margin:0 auto;overflow:hidden;isolation:isolate;background:#17121e;box-shadow:0 22px 100px #000b}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 42%,#08050d72 100%);z-index:1}.screen{position:absolute;inset:0;z-index:5}.title-screen{background:linear-gradient(110deg,#221624ee,#22162488 45%,#140c1599),url("../assets/ui/channels_leyuan233_story-cover.webp") center/cover}.title-shade{position:absolute;inset:0;background:linear-gradient(0deg,#110e19ef,transparent 42%),linear-gradient(90deg,#181420 2%,#211622ce 38%,transparent 73%)}.title-top{position:absolute;top:4.3%;left:4.4%;right:4.4%;display:flex;align-items:center;justify-content:space-between;z-index:4}.brand{display:flex;align-items:center;gap:10px;color:#efe1c9}.brand-mark{font-size:24px;color:var(--gold)}.brand b{font-size:clamp(12px,1.45vw,22px);letter-spacing:.13em}.brand span:last-child{border-left:1px solid #6c5860;padding-left:14px;font-size:11px;color:#b5a3a3;letter-spacing:.2em}.title-tools{display:flex;gap:10px}.icon-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid #e2c98a55;border-radius:50%;background:#17121e66;font-size:20px;transition:.2s}.icon-btn:hover{background:#80673c55;color:var(--gold)}.title-copy{position:absolute;left:6.1%;top:22%;z-index:3;width:48%}.eyebrow{font-size:clamp(11px,1vw,17px);letter-spacing:.16em;color:#cebc91;display:flex;align-items:center;gap:10px}.eyebrow span{height:7px;width:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 15px #ffcb5766}.eyebrow.center{justify-content:center}.title-copy h1{font-family:Georgia,"Noto Serif SC",serif;font-size:clamp(48px,7.2vw,112px);line-height:1.15;letter-spacing:-.06em;margin:2.5% 0 3.7%;font-weight:900;text-shadow:0 6px 24px #0003}.subtitle{font-size:clamp(16px,1.5vw,26px);line-height:1.9;color:#f3e7da;margin:0 0 6%;letter-spacing:.025em;font-weight:700}.primary{background:linear-gradient(145deg,#ffdf80,#edbd4d);color:#322313;font-weight:800;border-radius:8px;padding:14px 25px;display:inline-flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 3px #956e2d,0 8px 30px #d49c2430;transition:transform .15s,filter .15s}.primary:hover{transform:translateY(-2px);filter:brightness(1.06)}.primary:active{transform:translateY(2px)}.start-btn{width:min(450px,42vw);font-size:clamp(16px,1.35vw,22px);justify-content:space-between;padding:18px 20px}.start-btn b{letter-spacing:.06em}.micro-copy{color:#b6a6a7;font-size:clamp(10px,.82vw,14px);line-height:2.3;margin-top:18px}.micro-copy small{color:#aa9da1}.title-stamp{position:absolute;right:5%;bottom:8%;z-index:3;transform:rotate(-8deg);background:#efc255;color:#30211a;padding:10px 15px;font-size:clamp(12px,1.05vw,17px);font-weight:900;border-radius:10px 10px 10px 0;box-shadow:5px 6px #291627;border:2px solid #ffed9c}.title-stamp small{font-size:.6em;letter-spacing:.16em;display:block;margin-top:3px;opacity:.65}.overlay{background:#120d20c9;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center}.modal-card,.upgrade-card-wrap{position:relative;width:min(500px,80%);text-align:center;background:linear-gradient(145deg,#352a40f5,#211b2cf5);border:1px solid #94734d88;border-radius:13px;box-shadow:0 25px 80px #0007;padding:36px}.modal-card h2{font-size:32px;margin:15px -15px 12px;letter-spacing:-.03em}.modal-card p{color:#b5a8bc;font-size:14px;line-height:1.9}.wide{width:100%;margin-top:18px}.text-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:none;color:#b8aabd;font-size:14px;margin-top:12px}.text-btn:hover{color:#f6d18b}.special-btn{display:flex;margin-top:9px;color:#d8c08c;font-size:12px;opacity:.86}.special-btn:hover{color:#ffe291;opacity:1}.close-btn{position:absolute;right:15px;top:12px;background:none;color:#b8aabd;font-size:28px}.setting-row{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:20px;border-bottom:1px solid var(--line);padding:18px 0;cursor:pointer}.setting-row b,.setting-row small{display:block}.setting-row small{font-size:12px;color:#ac9db3;margin-top:5px}.setting-row input{position:absolute;opacity:0;pointer-events:none}.switch{width:42px;height:24px;border-radius:15px;background:#110e17;border:1px solid #75657d;position:relative;flex-shrink:0}.switch:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#918294;transition:.2s}.setting-row input:checked+.switch{background:#846536;border-color:#c8a263}.setting-row input:checked+.switch:after{background:#ffe197;transform:translate(18px)}.upgrade-card-wrap{width:min(1050px,90%);padding:36px 42px}.upgrade-card-wrap>h2{font-size:42px;margin:12px 0}.upgrade-card-wrap>p{color:#b7a8c2;margin:0 0 25px}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.upgrade-option{min-height:230px;padding:24px 20px;border:1px solid #8e729252;border-radius:12px;background:linear-gradient(145deg,#493651,#251c34);text-align:left;transition:.2s}.upgrade-option:hover{transform:translateY(-6px);border-color:#e7bb62}.upgrade-option b{display:grid;place-items:center;font-size:34px;color:#f1c674;width:56px;height:56px;background:#b18b4220;border:1px solid #c8a35d45;border-radius:13px}.upgrade-option h3{font-size:21px;margin:16px 0 8px;color:#ffe5aa}.upgrade-option p{font-size:14px;line-height:1.7;color:#c3b2ca;min-height:66px}.upgrade-option span{color:#dfc28c;font-size:13px}.defeat-face{font-size:72px;color:#ecc368;line-height:.8;margin-bottom:25px}.win-card{display:flex;align-items:center;gap:52px;width:min(960px,86%);padding:45px;background:linear-gradient(145deg,#352a40f5,#211b2cf5);border:1px solid #94734d88;border-radius:14px;box-shadow:0 25px 80px #0007}.win-card>img{height:330px;max-width:38%;object-fit:contain;filter:drop-shadow(0 20px 25px #0007)}.win-card h2{font-size:54px;line-height:1.17;margin:15px 0}.win-card h2 em{font-style:normal;color:#ffda70}.win-card p{color:#c6b6d0;line-height:1.8}.result-stats{display:flex;border-top:1px solid #ac8f6933;border-bottom:1px solid #ac8f6933;margin:22px 0;gap:42px;padding:16px 0}.result-stats span{display:grid;gap:4px}.result-stats b{font-size:34px;color:#f6e7cf}.result-stats small{color:#b2a0bc}.overlay .eyebrow{font-size:13px}@keyframes fadeOut{0%,60%{opacity:1}100%{opacity:0;visibility:hidden}}@media(max-width:900px){.stage{width:100vw;height:56.25vw;max-height:100vh}.title-top{top:3%;left:4%;right:4%}.brand b{font-size:11px}.brand span:last-child{display:none}.icon-btn{width:34px;height:34px;font-size:16px}.title-copy{left:5%;top:21%;width:50%}.title-copy h1{font-size:clamp(42px,8vw,72px)}.subtitle{font-size:clamp(13px,2vw,18px)}.micro-copy{font-size:10px}.title-stamp{right:4%;bottom:5%;font-size:11px}.icon-btn{border-color:#d2b66d50}.modal-card{width:min(84%,460px);padding:24px}.modal-card h2{font-size:24px}.upgrade-card-wrap{padding:24px 20px}.upgrade-card-wrap>h2{font-size:26px}.upgrade-grid{gap:8px}.upgrade-option{padding:14px 12px;min-height:170px}.upgrade-option b{width:40px;height:40px;font-size:24px}.upgrade-option h3{font-size:15px;margin:9px 0 4px}.upgrade-option p{font-size:10px;line-height:1.45;min-height:52px}.upgrade-option span{font-size:10px}.win-card{gap:20px;padding:25px}.win-card>img{height:230px}.win-card h2{font-size:32px}.result-stats{gap:18px}.result-stats b{font-size:24px}}@media(max-width:600px){.title-copy{top:18%;width:60%}.title-copy h1{font-size:43px}.subtitle{font-size:12px}.start-btn{width:80%;font-size:14px;padding:12px}.title-stamp{display:none}.upgrade-card-wrap{width:94%;padding:20px 12px}.upgrade-card-wrap>h2{font-size:21px}.upgrade-option{min-height:136px;padding:10px}.upgrade-option p{font-size:8px;min-height:42px}.upgrade-option h3{font-size:11px}.win-card{width:94%;gap:10px;padding:18px}.win-card>img{height:150px}.win-card h2{font-size:22px}.win-card p{font-size:10px}.result-stats{gap:10px;margin:12px 0;padding:10px 0}.result-stats b{font-size:17px}.result-stats small{font-size:8px}.win-card .primary{font-size:11px;padding:10px 14px}}@keyframes fieldSafePulse{from{box-shadow:0 5px 18px #0007,0 0 8px #66dff244}to{box-shadow:0 5px 18px #0007,0 0 24px #66dff288}}

/* Keep the arena's proportions; reserve enough room for real touch targets. */
html, body { min-height: 100dvh; }
#app { min-height: 100dvh; display: grid; place-items: center; }
.stage { width: min(1600px, 100vw, 177.7778dvh); height: auto; max-height: none; aspect-ratio: 16 / 9; }
.stage{ -webkit-user-select: none; user-select: none; }
.stage canvas{ touch-action: none; }
.screen { pointer-events: none; }
.title-screen, .overlay, .screen button, .setting-row { pointer-events: auto; }
.overlay { z-index: 20; padding: 16px; overflow-y: auto; }
.modal-card, .upgrade-card-wrap, .win-card { max-height: 100%; overflow-y: auto; }
.title-copy { top: 20%; }
.title-copy h1 { white-space: nowrap; }
.subtitle { margin-bottom: 5%; }
.adventure-actions { display: flex; flex-direction: column; gap: 12px; max-width: 450px; }
.adventure-actions .start-btn { width: 100%; min-height: 48px; }
.adventure-actions:has(#continueBtn:not(.hidden)) #startBtn {
  width: auto; min-height: 36px; align-self: flex-start; padding: 6px 0;
  color: #cbbda8; font-size: 13px; background: transparent; box-shadow: none;
}
.adventure-actions:has(#continueBtn:not(.hidden)) #startBtn > span { display: none; }
.save-summary { color: #e2c77e; font-size: 12px; margin: 10px 0 0; line-height: 1.5; }
.micro-copy { margin-top: 10px; line-height: 1.8; }
.loading-status { font-size: 12px; color: #decdac; line-height: 1.6; margin: 6px 0; }
.special-btn { justify-content: flex-start; padding-left: 0; margin-top: 5px; min-height: 36px; }
.special-btn span { margin-left: 6px; } .result-stats{ font-variant-numeric: tabular-nums; }
.setting-row input:focus-visible + .switch { outline: 3px solid #fff0ad; outline-offset: 4px; }
.upgrade-option { display: flex; flex-direction: column; }
.upgrade-option span { margin-top: auto; padding-top: 10px; }
@media (max-height: 520px) and (orientation: landscape) {
  .title-copy { top: 17%; width: 54%; }
  .title-copy h1 { font-size: clamp(36px, 7vw, 60px); margin: 2% 0; }
  .eyebrow { font-size: 9px; margin: 7px 0; }
  .subtitle { font-size: 12px; line-height: 1.5; margin-bottom: 9px; }
  .adventure-actions { gap: 4px; max-width: 300px; }
  .adventure-actions .start-btn { padding: 10px 14px; min-height: 40px; font-size: 14px; }
  .special-btn { min-height: 30px; padding: 6px 0; margin: 3px 0; font-size: 10px; }
  .save-summary, .micro-copy, .loading-status { font-size: 9px; margin: 4px 0; }
  .micro-copy br { display: none; }
  .micro-copy small { margin-left: 6px; }
  .title-copy .adventure-actions:has(#continueBtn:not(.hidden)) #startBtn { min-height: 24px; padding: 3px 0; font-size: 11px; }
  .title-top { top: 3%; }
  .icon-btn { width: 36px; height: 36px; }
  .modal-card { padding: 18px 24px; }
  .modal-card h2 { font-size: 22px; margin: 10px 0; }
  .modal-card p { font-size: 12px; margin: 8px 0; }
  .modal-card .wide { margin-top: 10px; padding: 10px 16px; }
  .modal-card .text-btn { margin-top: 6px; padding: 8px; }
  .setting-row { padding: 12px 0; }
  .defeat-face { font-size: 40px; margin-bottom: 14px; }
  .upgrade-card-wrap { padding: 14px 20px; }
  .upgrade-card-wrap > h2 { font-size: 24px; margin: 6px 0; }
  .upgrade-card-wrap > p { margin-bottom: 12px; font-size: 11px; }
  .upgrade-option { padding: 12px; min-height: 150px; }
  .upgrade-option b { width: 32px; height: 32px; font-size: 22px; }
  .upgrade-option h3 { margin: 8px 0 4px; font-size: 14px; }
  .upgrade-option p { min-height: 28px; margin: 4px 0; font-size: 10px; }
  .upgrade-option span { font-size: 10px; }
  .win-card { padding: 22px; gap: 20px; }
  .win-card > img { height: 190px; }
  .win-card h2 { font-size: 28px; }
  .win-card p { font-size: 11px; }
  .result-stats { margin: 12px 0; padding: 10px 0; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .stage { --arena-top: clamp(190px, 24dvh, 250px); width: 100vw; height: max(700px, 100dvh); aspect-ratio: auto; background: #171321; }
  body { overflow-y: auto; }
  .stage canvas { inset: auto 0; top: var(--arena-top); height: 56.25vw; border-top: 1px solid #d8b45a22; border-bottom: 1px solid #d8b45a22; }
  .title-screen { background-position: 65% center; }
  .title-shade { background: linear-gradient(0deg, #171321 3%, #171321ed 32%, #17132166 75%, #171321aa); }
  .title-top { top: max(20px, env(safe-area-inset-top)); left: 22px; right: 22px; }
  .brand b { font-size: 11px; letter-spacing: .06em; }
  .brand-mark { font-size: 20px; }
  .icon-btn { width: 40px; height: 40px; }
  .title-tools { gap: 8px; }
  .title-copy { top: auto; left: 24px; right: 24px; bottom: max(34px, env(safe-area-inset-bottom)); width: auto; }
  .title-copy h1 { font-size: clamp(42px, 13vw, 72px); margin: 12px 0 18px; }
  .title-copy .eyebrow { font-size: 11px; }
  .subtitle { font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
  .adventure-actions .start-btn { width: 100%; font-size: 16px; padding: 16px 18px; }
  .special-btn { font-size: 12px; padding: 14px 0; margin-top: 10px; }
  .micro-copy { font-size: 11px; line-height: 1.9; margin-top: 14px; }
  .title-stamp { display: none; }
  .modal-card { width: 100%; padding: 28px 22px; }
  .modal-card h2 { font-size: 26px; }
  .modal-card p { font-size: 13px; }
  .upgrade-card-wrap { width: 100%; padding: 24px 16px; }
  .upgrade-card-wrap > h2 { font-size: 26px; }
  .upgrade-card-wrap > p { font-size: 12px; margin-bottom: 18px; }
  .upgrade-grid { grid-template-columns: 1fr; gap: 10px; }
  .upgrade-option { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; min-height: 112px; padding: 15px; }
  .upgrade-option b { grid-row: 1 / 4; width: 42px; height: 42px; font-size: 25px; }
  .upgrade-option h3 { font-size: 16px; margin: 0 0 5px; }
  .upgrade-option p { font-size: 12px; min-height: 0; margin: 0; }
  .upgrade-option span { font-size: 11px; padding-top: 8px; }
  .win-card { width: 100%; flex-direction: column; gap: 0; padding: 26px 22px; }
  .win-card > img { height: 140px; max-width: 100%; }
  .win-card h2 { font-size: 30px; }
  .win-card p { font-size: 12px; }
  .result-stats { justify-content: space-between; gap: 12px; padding: 16px 0; }
  .result-stats b { font-size: 25px; }
  .result-stats small { font-size: 11px; }
  .win-card .primary { font-size: 14px; padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .primary:hover, .upgrade-option:hover { transform: none; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .title-top { left: 18px; right: 18px; }
  .brand { gap: 6px; }
  .brand b { font-size: 10px; }
  .title-tools { gap: 5px; }
}

/* The pause screen doubles as a readable, keyboard-accessible skill reference. */
.pause-guide { margin-top: 16px; text-align: left; border: 1px solid #c7ad7840; border-radius: 8px; background: #17141d66; }
.pause-guide summary { padding: 12px 14px; cursor: pointer; color: #e8d29e; font-size: 13px; }
.pause-guide summary:focus-visible { outline: 3px solid #fff0ad; outline-offset: 2px; border-radius: 6px; }
.pause-guide dl { margin: 0 14px; }
.pause-guide dl > div { padding: 10px 0; border-top: 1px solid #c7ad7826; }
.pause-guide dt { color: #f4e7c9; font-size: 13px; font-weight: 600; }
.pause-guide dd { margin: 5px 0 0; color: #c7bccb; font-size: 12px; line-height: 1.7; }
.pause-guide kbd { display: inline-block; margin-right: 7px; padding: 2px 5px; border: 1px solid #c7ad783d; border-radius: 3px; color: #d8bf87; font: 10px ui-monospace, monospace; }
.modal-card .pause-guide > p { margin: 8px 14px 14px; font-size: 11px; line-height: 1.7; }
@media (max-height: 520px) and (orientation: landscape) {
  .pause-guide { margin-top: 8px; }
  .pause-guide summary { padding: 9px 12px; font-size: 12px; }
}

.modal-card, .upgrade-card-wrap, .win-card { scrollbar-width: thin; scrollbar-color: #8f7e5b #231d2c; }
.upgrade-option > b { background: radial-gradient(ellipse at 45% 35%, #e0b86524, #231c1b); border-color: #cba76455; box-shadow: inset 0 1px 0 #fff0c520; }
.upgrade-option > b > img { display: block; width: 88%; height: 88%; object-fit: contain; }