/* Ink, aged brass and warm paper. Material and hierarchy shared by every normal 2D screen. */
body[data-chronicle]{--ink:#1b2731;--paper:#f2e9d7;--muted:#bbc2c0;--gold:#d7ba83;--brass:#a88b59;--line:#c9ac743d;--panel:#202e37;--well:#121e25}
body[data-chronicle] #game{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:var(--paper)}
body[data-chronicle] .vignette{background:radial-gradient(ellipse at 50% 52%,transparent 52%,#0b1b2445 100%)}
body[data-chronicle] #game button{transition:background .14s,border-color .14s,box-shadow .14s;cursor:pointer}
body[data-chronicle] #game button:active:not(:disabled){filter:brightness(1.14)}
body[data-chronicle] #game button:focus-visible{outline:2px solid #f6d39b;outline-offset:3px}
body[data-chronicle] .menu{background:linear-gradient(90deg,#111f2bf5 0%,#152733cf 30%,#18282f45 59%,transparent 80%)}
body[data-chronicle] .menu-content{width:min(390px,85vw);margin-left:7vw;position:relative;padding:30px 0}
body[data-chronicle] .menu h1{font:400 clamp(62px,7vw,94px)/1.1 "KaiTi","STKaiti","Songti SC",serif;letter-spacing:9px;color:#f0e4c8;text-shadow:0 2px 18px #10212688}
body[data-chronicle] .menu h1 span{display:inline;padding:0;margin:0}
body[data-chronicle] .menu .eyebrow{font-size:11px;letter-spacing:5px;color:#d9b67b;margin-bottom:20px}
body[data-chronicle] .menu .gold-rule{width:180px;background:linear-gradient(90deg,#d1b681,transparent);margin:23px 0}
body[data-chronicle] #menu-description{font-size:14px;line-height:1.9;letter-spacing:1px;color:#cbd0c7}
body[data-chronicle] #start{background:linear-gradient(115deg,#ecd9ae,#c9ac73);border:1px solid #e5d0a1;color:#25313a;border-radius:2px;font-size:16px;letter-spacing:4px;box-shadow:0 5px 22px #09131c40,inset 0 0 0 3px #f8e7bc45;max-width:300px}
body[data-chronicle] #guide-menu,body[data-chronicle] #equipment-menu{width:300px;max-width:100%;height:38px;margin-top:8px;text-align:left;padding:0 0 0 13px;font-size:12px;letter-spacing:1px;border:0;border-left:1px solid #b498634f;background:transparent;color:#d4d4c9;box-shadow:none}
body[data-chronicle] #guide-menu:hover,body[data-chronicle] #equipment-menu:hover{border-color:#e4cd96;background:#dccda512}
body[data-chronicle] .menu-options{font-size:11px;gap:15px;color:#b7c4c3;margin-top:16px}
body[data-chronicle] .menu-options input{accent-color:#d1b77d}
body[data-chronicle] .prototype-note{color:#9aaeb1;font-size:10px;letter-spacing:1px;line-height:1.6}
body[data-chronicle] #loading,body[data-chronicle] #error{background:radial-gradient(ellipse at 50% 40%,#2d3f47,#14232e);color:#ead9b6}
body[data-chronicle] .top-tools .tool{border-radius:4px;border-color:#d5b87c66;background:linear-gradient(140deg,#24353edb,#182731e8);box-shadow:inset 0 0 0 2px #d8bb7810,0 2px 8px #0c17252e}
body[data-chronicle] .tool svg{width:23px;height:23px;stroke:#e4d7b7}
body[data-chronicle] #game .vitals{background:linear-gradient(115deg,#172933ee,#263b3ae0);border:1px solid #d0b78355;border-radius:4px;box-shadow:0 3px 14px #0b1d2933;gap:10px;padding:8px 10px;max-width:290px}
body[data-chronicle] .portrait{border-radius:3px;border-color:#d9c497;outline:none;box-shadow:inset 0 0 0 2px #dbc28b33;background:#223740;overflow:hidden}
body[data-chronicle] .portrait img{width:100%;height:100%;object-fit:cover}
body[data-chronicle] .hero-name{letter-spacing:1px;font-size:14px;margin-bottom:7px}
body[data-chronicle] #game .bar{transform:none;border:1px solid #b8c9b039;background:#0f2026c9;border-radius:1px}
body[data-chronicle] #hp-fill{background:linear-gradient(90deg,#4f8272,#9aba93);box-shadow:inset 0 1px #d7e6b755}
body[data-chronicle] #mp-fill{background:linear-gradient(90deg,#426675,#92c3c0)}
body[data-chronicle] .bar span{transform:none;font:10px/11px Arial,sans-serif;text-shadow:0 1px 2px #132928}
body[data-chronicle] #game .quest{background:linear-gradient(105deg,#192b34ec,#23363bd6);border:1px solid #d7bd855c;border-radius:3px;box-shadow:0 3px 10px #0c192524;text-shadow:none}
body[data-chronicle] .quest small{color:#b8c6c4;letter-spacing:1px;font-size:10px;margin-bottom:3px}
body[data-chronicle] .quest strong{font-weight:500;letter-spacing:.5px}
body[data-chronicle] #direction{color:#dac398;font-size:11px}
body[data-chronicle] #game .quest.has-journey-details{gap:4px}
body[data-chronicle] #game .quest.has-journey-details>div{min-width:0;flex:1}
body[data-chronicle] #game #journey-details-toggle{position:relative;inset:auto;flex:0 0 40px;width:40px;min-width:0;height:44px;min-height:44px;padding:8px;border:0;border-radius:0;background:transparent;color:#d6bf91;pointer-events:auto;display:grid;place-items:center}
body[data-chronicle] #game #journey-details-toggle[hidden]{display:none}
#journey-details-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
#journey-details-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
/* Branches expose the available choices; only the selected detail expands. */
body[data-chronicle] #game .quest.has-story-choices{align-items:flex-start}
body[data-chronicle] #game #journey-branches{display:flex;gap:4px;margin:4px 0;pointer-events:auto}
body[data-chronicle] #game #journey-branches[hidden]{display:none}
body[data-chronicle] #game #journey-branches button{flex:1;min-width:44px;min-height:44px;padding:4px;font:12px/1.3 "Microsoft YaHei",sans-serif;letter-spacing:0;border:1px solid #afbbaf80;border-radius:3px;background:#263e45;color:#e5e5cf}
body[data-chronicle] #game #journey-branches button[aria-pressed=true]{color:#ffedba;background:#565b40;border-color:#d9c17d;box-shadow:inset 0 -2px #e7d294}
body[data-chronicle] #game #journey-branches button:focus-visible{outline:2px solid #fff0bc;outline-offset:2px}
body[data-chronicle] #game.choosing-story #action-track{display:none}
body[data-chronicle] #game[data-mobile=true] .quest.has-story-choices{margin-right:12px;padding:5px 6px;gap:2px}
body[data-chronicle] #game[data-mobile=true] .quest.has-story-choices #journey-details-toggle{flex-basis:44px;width:44px;padding:8px}
body[data-chronicle] #journal{border-radius:3px;background:#2c3e40;border-color:#d3b57877}
body[data-chronicle] #action-track{background:#27393fef;border:1px solid #baa37080;color:#ead8b1;border-radius:2px;box-shadow:0 2px 7px #14232e33;font-size:11px}
body[data-chronicle] #action-track svg{display:none}
body[data-chronicle] #chronicle-shortcuts{gap:4px}
body[data-chronicle] #chronicle-shortcuts button{background:#1b2e36dc;border:1px solid #b7bca744;border-radius:2px;font-size:11px;letter-spacing:1px;min-height:36px;padding:5px 10px;color:#e4e3cc;box-shadow:0 1px 5px #17272a33}
body[data-chronicle] #chronicle-save{background:#172a33ad;color:#a8c2bb;border:0;font-size:10px;letter-spacing:.3px;padding:3px 7px}
body[data-chronicle] #action-dialogue{border:1px solid #c4aa6c55;border-left:3px solid #cfb178;background:linear-gradient(110deg,#1e2d37f5,#253740ed);box-shadow:0 5px 18px #152c3140;border-radius:3px}
body[data-chronicle] #action-dialogue b{color:#e2c493;letter-spacing:1px}
body[data-chronicle] #action-dialogue p{color:#d7ddcf;line-height:1.65}
body[data-chronicle] #action-dialogue img{border-radius:2px;border-color:#c5aa75}
body[data-chronicle] .skill{background:radial-gradient(circle at 35% 25%,#4f7278e8,#233a47eb 66%,#182c38ef);border:1px solid #b9cdb885;box-shadow:inset 0 0 0 3px #e5dab518,inset 0 -5px 12px #0c1a254d,0 3px 8px #0e1c263d}
body[data-chronicle] .skill.attack{background:radial-gradient(circle at 35% 25%,#9c8c62ee,#5b5c48ee 66%,#374334);border-color:#e5cf947f;box-shadow:inset 0 0 0 4px #e2d1a026,inset 0 -5px 13px #352b1f66,0 4px 12px #121d2745}
body[data-chronicle] .skill svg:not(.cooldown-ring){filter:drop-shadow(0 1px 2px #142730);stroke:#e9e5cf}
body[data-chronicle] .skill.attack svg:not(.cooldown-ring){width:33px;height:33px;stroke:#fff0cd}
body[data-chronicle] .skill span{color:#e4e5d1;text-shadow:0 1px 3px #1b2d38}
body[data-chronicle] .skill kbd{color:#c2cdc3}
body[data-chronicle] .skill.cooling{background:radial-gradient(circle at 35% 25%,#33474b,#1b303a)}
body[data-chronicle] .skill.locked{opacity:.58}
body[data-chronicle] .skill .cooldown{font:600 12px/1.2 Arial,"Microsoft YaHei",sans-serif;color:#fff0cf;text-shadow:0 1px 3px #071823}
body[data-chronicle] #joystick{background:radial-gradient(ellipse,#213c4355,#182d3833);border-color:#c4c8b24d;box-shadow:inset 0 0 0 5px #cad8bf0c}
body[data-chronicle] .joystick-ring{border-color:#d9d4b237;max-width:70%;max-height:70%}
body[data-chronicle] #stick{background:radial-gradient(circle at 32% 24%,#bdccaf99,#6c8c7b99 60%,#314f51aa);border-color:#d6dfbf99;box-shadow:inset 0 0 0 3px #ebecd01a,0 3px 8px #0f252b66}
body[data-chronicle] .interact{border:1px solid #e5cf95;border-radius:3px;background:linear-gradient(120deg,#eddfb6,#c3b884);color:#243a3c;box-shadow:0 3px 12px #19323655,inset 0 0 0 2px #f6e6c449;font-size:13px}
body[data-chronicle] #game #boss-hud{background:linear-gradient(90deg,#23313fe3,#293640e6);border:1px solid #c0a57866;border-radius:3px;padding:6px 11px 9px;box-shadow:0 3px 10px #091a2633}
body[data-chronicle] #boss-hud>div{background:#14212b;overflow:hidden;border-radius:1px;height:5px;border:1px solid #c8ab7559}
body[data-chronicle] #boss-fill{background:linear-gradient(90deg,#a66c51,#dcc395);box-shadow:inset 0 1px #ffe0a660}
body[data-chronicle] #chronicle-tactics button{background:#23333bcf;border-color:#c3b79059;border-radius:2px;min-height:36px;font-size:11px;color:#d6dfd1}
body[data-chronicle] #chronicle-tactics button:disabled{background:#24323b99;color:#92a5a4;border-color:#a9b7a226}
body[data-chronicle] #toast{background:#23343def;color:#e4dbc2;border-color:#c6ae7777;border-radius:3px;font-size:12px;letter-spacing:.5px;padding:8px 15px;max-width:70%}
body[data-chronicle] .damage-number{color:#fff0c0;font:600 22px/1 Georgia,serif;text-shadow:0 2px 2px #443c28,1px 0 #463c2b,-1px 0 #463c2b;transform-origin:0 100%}
body[data-chronicle] .training-number{font:11px/1.4 "Microsoft YaHei",sans-serif;color:#dbe6d0}
#scene-caption{position:absolute;left:50%;top:27%;transform:translate(-50%,-5px);opacity:0;z-index:4;pointer-events:none;text-align:center;transition:opacity .35s,transform .35s;text-shadow:0 2px 10px #162833}
#scene-caption.visible{opacity:1;transform:translate(-50%,0)}
#scene-caption:not(.visible){visibility:hidden}
#scene-caption small{display:block;font-size:10px;color:#efe0b9;letter-spacing:3px;margin-bottom:7px}
#scene-caption strong{display:block;font:400 24px/1.3 "KaiTi","STKaiti",serif;letter-spacing:7px;color:#f8edce;border-bottom:1px solid #e7cb8766;padding:0 12px 9px}
body[data-chronicle] .chronicle-overlay{background:#101e2ab3}
body[data-chronicle] #chronicle-panel .chronicle-sheet{background:linear-gradient(125deg,#2d3d45,#1d2a35);border:1px solid #c2a777;border-radius:4px;box-shadow:0 14px 60px #060d1677,inset 0 0 0 4px #d4b36e0c}
body[data-chronicle] #chronicle-panel .chronicle-sheet>header{background:linear-gradient(90deg,#283b43,#1a2934);border-bottom:1px solid #cfb57e55;position:relative}
body[data-chronicle] .chronicle-sheet>header:before{content:"";width:3px;height:24px;background:#d0af71;margin-right:4px;flex:none}
body[data-chronicle] #chronicle-title{font-family:"KaiTi","STKaiti",serif;letter-spacing:3px;color:#ecdfc1}
body[data-chronicle] #chronicle-footer{background:#192832;color:#a5b6b5;border-color:#acb7a82e}
body[data-chronicle] #chronicle-interface button,body[data-chronicle] #chronicle-interface .chronicle-link{background:linear-gradient(115deg,#32464c,#273b42);border-color:#bca47766;border-radius:3px;box-shadow:inset 0 1px #eddaa813;color:#eee5cf}
body[data-chronicle] #chronicle-interface button:hover:not(:disabled){background:#3e5458;border-color:#dbc594}
body[data-chronicle] #chronicle-interface button:disabled{background:#25363d;color:#8faaa7;border-color:#b3c3ad33;box-shadow:none}
body[data-chronicle] #chronicle-body input:not([type=radio]),body[data-chronicle] #chronicle-body select,body[data-chronicle] #chronicle-body textarea{background:#1a2b34;border-color:#a4ad9877;color:#efe7ce}
body[data-chronicle] #chronicle-body input[type=radio]{accent-color:#cbb37f}
body[data-chronicle] #chronicle-body p{color:#c0cac5}
body[data-chronicle] #chronicle-body button>span{color:#c6d0c6}
body[data-chronicle] #chronicle-body .sp-space:before{background:linear-gradient(115deg,#1d2b35ba,#24354065)}
body[data-chronicle] #chronicle-body .sp-menu{background-image:linear-gradient(125deg,#22313bf5,#182832eb),var(--scene)}
body[data-chronicle] #chronicle-body .sp-compass .sp-tile{border:1px solid #c6ad752f;background:linear-gradient(120deg,#ffffff04,#9bb9a907);border-radius:3px;box-shadow:inset 0 0 0 2px #d4bc8509;min-height:98px;position:relative}
body[data-chronicle] #chronicle-body .sp-compass .sp-tile:hover{background:#d4c09216;border-color:#dbc39380}
body[data-chronicle] #chronicle-body .sp-compass .sp-icon{width:46px;height:46px;margin-bottom:7px;border-radius:6px;box-shadow:0 2px 10px #0d1e2b45}
body[data-chronicle] #chronicle-body .sp-bottom{background:#1b2a35f0;border-top:1px solid #cdb17b33;gap:6px}
body[data-chronicle] #chronicle-body .sp-detail{background:linear-gradient(140deg,#ebdfc0,#d4c9a9);border:1px solid #cfb787;box-shadow:inset 0 0 0 4px #f3e7c13d;color:#263d3e;border-radius:3px}
body[data-chronicle] #chronicle-body .sp-detail h3{color:#26383c}
body[data-chronicle] #chronicle-body .sp-detail p{color:#4f625e;line-height:1.8}
body[data-chronicle] #chronicle-body .sp-paperdoll{background:linear-gradient(140deg,#405053b8,#263942a3);border:1px solid #cebd8855;border-radius:3px}
body[data-chronicle] #chronicle-body .sp-bag{background:#1828318a;border:1px solid #b5b59d33;gap:8px}
body[data-chronicle] #chronicle-body .sp-item{background:linear-gradient(140deg,#34474c,#24373e);border-color:#c0ae7e52;box-shadow:inset 0 0 0 3px #ddca9710}
body[data-chronicle] #chronicle-body .sp-item[aria-pressed=true],body[data-chronicle] #chronicle-body .sp-book[aria-pressed=true]{border-color:#ead19b;background:#49605b;box-shadow:inset 0 0 0 2px #e9d19b33}
body[data-chronicle] .sp-hero,body[data-chronicle] .sp-character-portrait{background-image:url('./assets/formal-hero.webp')}
body[data-chronicle] #game[data-gender="女"] .sp-hero{background-image:url('./assets/formal-hero-female.webp')}
body[data-chronicle] .sp-character-portrait[data-gender="女"]{background-image:url('./assets/formal-hero-female.webp')}
body[data-chronicle] #chronicle-body .creation-options>label{background:#1d303847;border-color:#b5b29844}
body[data-chronicle] #chronicle-body .creation-options>label.selected{background:#6a7a6040;border-color:#d9c18b;box-shadow:inset 3px 0 #dbc28b}
body[data-chronicle] .sp-character-card{background:#2b3d44;border-color:#c2b37b66}
body[data-chronicle] .sp-work-controls button,body[data-chronicle] .sp-work-instructions{background:#21353fee;border-color:#cebd8855}
body[data-chronicle] .orientation-guide{background:#263941eb;border-color:#c7ae7777}
body[data-chronicle] .orientation-actions button{background:#decca2;color:#263c3e}
body[data-chronicle] .orientation-actions button+button{background:#253940;color:#e7e2cb}
.ref-codex-summary{display:flex;align-items:center;gap:15px;padding:18px 6% 0;flex:none}
.ref-seal{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #ad8962;color:#e8c49b;background:#79614e29;font:22px "KaiTi",serif;box-shadow:inset 0 0 0 3px #b1916833}
.ref-codex-summary b{display:block;font-size:16px;letter-spacing:2px}.ref-codex-summary small{display:block;color:#acbbb6;font-size:11px;margin-top:2px}
body[data-chronicle] #chronicle-body .ref-codex-summary p{margin:0 0 0 auto;text-align:right;font-size:12px;color:#d5c094;max-width:45%}
.ref-codex-groups{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:20px 6% 30px;align-content:center}
/* A short viewport scrolls one menu; fixed-height flex shrink must not pull
   group titles over the character summary or hide rows behind the footer. */
body[data-chronicle] #chronicle-body .ref-codex{height:auto;min-height:100%;overflow:visible}
body[data-chronicle] #chronicle-body .ref-codex-groups{flex:1 0 auto;min-height:min-content;align-content:start}
body[data-chronicle] #chronicle-body .ref-codex>.sp-bottom{flex:none;position:static}
body[data-chronicle] #chronicle-body .ref-codex>.sp-bottom button{min-height:44px!important}
body[data-chronicle] #chronicle-body .ref-codex>.social-menu-entry{flex:none;width:90%;margin:12px auto 0}
body[data-chronicle] #chronicle-body .ref-codex-groups section{margin:0;min-width:0}
body[data-chronicle] #chronicle-body .ref-codex-groups h3{font:12px/1.5 "Microsoft YaHei",sans-serif;letter-spacing:2px;color:#b5c1b9;padding-bottom:10px;border-bottom:1px solid #d6b77a3d;margin:0 0 12px}
.ref-codex-groups section>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(130deg,#dce5d10b,#96b5b108);border-color:#c6b27b3d;border-radius:3px;min-height:125px;padding:14px 8px}
body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile .sp-icon{width:48px;height:48px;margin:0 0 9px;flex:none;box-shadow:0 3px 12px #111f2b44;border-radius:6px}
body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile span{color:#eee3c9;text-align:center;line-height:1.4}
body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile b{font-size:14px;display:block;font-weight:500}
body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile small{display:block;font-size:10px;color:#a9beb5;margin-top:4px}
body[data-chronicle] #chronicle-body .ref-codex .sp-bottom button:last-child{border-color:#dbc594;background:linear-gradient(120deg,#d7c395,#bba875);color:#263a3e}
@media(orientation:landscape) and (max-height:520px){
 body[data-chronicle] .menu-content{width:330px;margin-left:6vw;padding:16px 0}
 body[data-chronicle] .menu h1{font-size:51px;letter-spacing:6px}
 body[data-chronicle] .menu .eyebrow{margin-bottom:10px;font-size:10px}
 body[data-chronicle] .menu .gold-rule{margin:12px 0;width:110px}
 body[data-chronicle] #menu-description{font-size:12px;margin-bottom:13px;line-height:1.7}
 body[data-chronicle] #start{height:44px;width:250px;font-size:14px}
 body[data-chronicle] #guide-menu,body[data-chronicle] #equipment-menu{height:44px;min-height:44px;width:250px;margin-top:2px;font-size:11px}
 body[data-chronicle] .menu-options{margin-top:9px;font-size:10px}
 body[data-chronicle] .prototype-note{margin-top:6px;font-size:9px}
 body[data-chronicle] #game .vitals{padding:6px 8px;max-width:none}
 body[data-chronicle] #game .hero-name{font-size:12px;margin-bottom:4px}
 body[data-chronicle] #chronicle-shortcuts button{min-height:44px;padding:4px 8px;font-size:10px}
 body[data-chronicle] #game.in-action-combat .quest{visibility:hidden}
 body[data-chronicle] #game[data-mobile=true][data-orientation=landscape] .hud-top>#boss-hud{top:1px;width:min(280px,35%)}
 body[data-chronicle] #game #action-dialogue,body[data-chronicle] #game.in-action-combat #action-dialogue{top:123px;left:var(--edge-left);transform:none;width:255px;min-width:0;max-width:32%;padding:6px 27px 6px 8px}
 body[data-chronicle] #game #action-track{right:calc(var(--edge-right) + 200px);left:auto;transform:none;top:73px;min-height:44px;width:44px;padding:3px;font-size:9px}
 body[data-chronicle] #game #action-track svg{display:block;width:16px;height:16px;margin:0 auto 3px}
 body[data-chronicle] #game #chronicle-tactics{bottom:8px;gap:3px}
 body[data-chronicle] #game #chronicle-tactics button{min-height:32px;padding:4px 6px;font-size:10px}
 body[data-chronicle] #chronicle-body .sp-compass{gap:8px;padding:10px 5%}
 body[data-chronicle] #chronicle-body .sp-compass .sp-tile{min-height:72px;padding:6px;font-size:11px}
 body[data-chronicle] #chronicle-body .sp-compass .sp-icon{width:36px;height:36px;margin-bottom:5px}
 #scene-caption{top:32%}#scene-caption strong{font-size:20px}
 .ref-codex-summary{padding:8px 5% 0;gap:9px}.ref-seal{width:28px;height:28px;font-size:16px}.ref-codex-summary b{font-size:12px}.ref-codex-summary small{font-size:10px}
 body[data-chronicle] #chronicle-body .ref-codex-summary p{font-size:10px}
 .ref-codex-groups{gap:13px;padding:10px 5% 13px}
 body[data-chronicle] #chronicle-body .ref-codex-groups h3{font-size:10px;padding-bottom:5px;margin-bottom:7px;letter-spacing:1px}
 .ref-codex-groups section>div{gap:6px}
 body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile{min-height:71px;padding:6px 3px}
 body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile .sp-icon{width:28px;height:28px;margin-bottom:4px}
 body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile b{font-size:11px}
 body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile small{display:none}
}
@media(orientation:portrait) and (max-width:600px){
 body[data-chronicle] .menu-content{width:calc(100% - 56px);margin:0 28px}
 body[data-chronicle] .menu h1{font-size:62px}
 body[data-chronicle] #start,body[data-chronicle] #guide-menu,body[data-chronicle] #equipment-menu{width:100%;max-width:300px}
 body[data-chronicle] #game #action-dialogue{top:235px}
 body[data-chronicle] #game #boss-hud{position:absolute;grid-area:1/1/-1/-1;top:180px;left:0;right:0;width:100%;max-width:none;transform:none;display:flex;align-items:center;gap:9px}
 body[data-chronicle] #game #boss-hud>div{flex:1;margin:0}
 body[data-chronicle] #game .quest{border-left:2px solid #c6ae73;max-width:100%}
 body[data-chronicle] #game #chronicle-tactics button{min-height:36px;font-size:11px;padding:5px 7px}
 body[data-chronicle] #chronicle-body .sp-compass{gap:9px;padding:14px}
 body[data-chronicle] #chronicle-body .sp-compass .sp-tile{min-height:94px;font-size:12px}
 body[data-chronicle] #chronicle-body .sp-compass .sp-icon{width:42px;height:42px}
 #scene-caption{top:42%}#scene-caption strong{font-size:21px}
 .ref-codex-summary{padding:15px 15px 0;gap:10px}.ref-codex-summary p{display:none}
 .ref-codex-groups{grid-template-columns:1fr;gap:16px;flex:none;padding:17px 15px}
 body[data-chronicle] #chronicle-body .ref-codex-groups h3{margin-bottom:8px}
 body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile{flex-direction:row;justify-content:flex-start;text-align:left;min-height:73px;padding:9px 8px;gap:9px}
 body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile .sp-icon{width:34px;height:34px;margin:0}
 body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile span{text-align:left}
 body[data-chronicle] #chronicle-body .ref-codex-groups .sp-tile b{font-size:12px}
}
@media(orientation:landscape) and (max-height:300px){
 body[data-chronicle] .menu-content{padding:8px 0}
 body[data-chronicle] .menu h1{font-size:39px}body[data-chronicle] .menu .eyebrow{margin-bottom:5px}
 body[data-chronicle] .menu .gold-rule{margin:7px 0}body[data-chronicle] #menu-description{margin-bottom:6px}
 body[data-chronicle] #guide-menu,body[data-chronicle] #equipment-menu{height:44px;min-height:44px;margin-top:2px}
 body[data-chronicle] .menu-options{margin-top:3px}
 body[data-chronicle] #action-dialogue p{max-height:35px}
}
body[data-chronicle] #game[data-mobile=true] #chronicle-tactics button{min-height:44px}
body[data-chronicle] #game[data-mobile=true] #chronicle-shortcuts button{min-height:44px}
body[data-chronicle] #chronicle-body .sp-paperdoll{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:0;overflow:auto;scroll-padding-bottom:10px}
body[data-chronicle] #chronicle-body .sp-paperdoll>b{order:1}
body[data-chronicle] #chronicle-body .sp-paperdoll>span{order:2}
body[data-chronicle] #chronicle-body .sp-paperdoll>.sp-hero{position:relative;left:auto;top:auto;transform:none;order:3;width:160px;max-width:100%;height:auto;aspect-ratio:1;margin:5px auto 8px;flex:none}
body[data-chronicle] #chronicle-body .sp-paperdoll>.sp-worn{order:4;margin-top:0;align-self:stretch;justify-content:center;flex:none}
body[data-chronicle] #chronicle-body .sp-paperdoll>span:last-child{order:5;font-size:11px}
@media(max-height:520px),(orientation:portrait) and (max-width:600px){
 body[data-chronicle] #chronicle-body .sp-paperdoll>.sp-hero{width:110px;margin:2px auto 4px}
 body[data-chronicle] #chronicle-body .sp-paperdoll>.sp-worn{gap:3px}
 body[data-chronicle] #chronicle-body .sp-paperdoll>.sp-worn button{padding:4px!important;min-width:0;flex:1}
 body[data-chronicle] #chronicle-body .sp-paperdoll{gap:3px}
}
@media(orientation:landscape) and (max-height:520px){body[data-chronicle] #chronicle-body .sp-paperdoll>.sp-hero{width:95px}}
@media(prefers-reduced-motion:reduce){#scene-caption{transition:none}body[data-chronicle] #game button{transition:none}}
.sp-technique-range{display:flex;align-items:center;gap:12px;margin:10px 0;color:#46645c;font-size:12px}.sp-technique-range svg{width:96px;height:72px;flex:none;fill:#527c6433;stroke:#527c64;stroke-width:1.5}.sp-technique-range .range-player{fill:#966e37;stroke:none}.sp-technique-range .range-direction{fill:none;stroke:#966e37}
body[data-chronicle] #chronicle-panel[data-panel="vein-confirm"]{align-items:flex-end}
body[data-chronicle] #chronicle-panel[data-panel="vein-confirm"] .chronicle-sheet{width:min(720px,100%);height:auto;max-height:100%;margin-inline:auto}
body[data-chronicle] #chronicle-panel[data-panel="vein-confirm"] #chronicle-body{padding:12px 16px}
body[data-chronicle] #chronicle-body .vein-confirm-copy{line-height:1.45;margin-bottom:10px;font-size:13px}
body[data-chronicle] #chronicle-body .vein-confirm-copy>b{color:#e7d09e;font-weight:500}
body[data-chronicle] #chronicle-body .vein-confirm-copy>p{margin:5px 0;font:13px/1.45 "Microsoft YaHei",sans-serif}
body[data-chronicle] #chronicle-body .vein-confirm-copy>small{font-size:11px;color:#aabbaf}
body[data-chronicle] #chronicle-panel[data-panel="vein-confirm"] .chronicle-choices{grid-template-columns:1fr 1fr;gap:8px}
body[data-chronicle] #chronicle-panel[data-panel="vein-confirm"] .chronicle-choices button{min-height:48px;padding:8px 12px;line-height:1.4}
body[data-chronicle] #chronicle-panel[data-panel="vein-confirm"] .chronicle-choices button b{font-size:14px}
body[data-chronicle] #chronicle-panel[data-panel="vein-confirm"] .chronicle-choices button span{font-size:11px;margin-top:3px}
body[data-chronicle] #chronicle-body .sp-library{min-height:0;overflow:hidden}
body[data-chronicle] #chronicle-body .sp-library .sp-detail{min-height:0;height:100%;align-self:stretch;max-height:100%;overscroll-behavior:contain}
body[data-chronicle] #chronicle-body .sp-detail .sp-actions button{min-height:44px}
body[data-chronicle] #chronicle-body .sp-book.locked[aria-pressed=true]{filter:none;opacity:.9}
/* The selected scroll keeps its title and action buttons while details scroll. */
body[data-chronicle] #chronicle-body .sp-library .sp-technique-sheet{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;overflow:hidden;text-align:left}
.sp-technique-sheet>header{display:flex;gap:9px;align-items:center;min-width:0}
.sp-technique-sheet>header>.sp-icon{width:30px;height:30px;flex:none;margin:0}
body[data-chronicle] #chronicle-body .sp-technique-sheet>header>h3{font-size:16px;line-height:1.4;margin:0!important}
.sp-technique-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#75866b transparent;touch-action:pan-y}
body[data-chronicle] #chronicle-body .sp-technique-scroll>p{font-size:11px;line-height:1.5;margin:3px 0 6px}
body[data-chronicle] #chronicle-body .sp-technique-sheet>.sp-actions{flex-wrap:nowrap;gap:6px;border-top:1px solid #6c725347;padding-top:6px}
body[data-chronicle] #chronicle-body .sp-technique-sheet>.sp-actions>button{flex:1;min-width:0;font-size:12px;line-height:1.35;padding:5px 6px}
@media(orientation:landscape) and (max-height:520px){
 body[data-chronicle] #chronicle-body .sp-library{grid-template-columns:minmax(0,1fr) minmax(225px,40%)}
 body[data-chronicle] #chronicle-body .sp-sockets>button{height:44px;min-height:44px;min-width:0;width:145px;align-content:center;column-gap:4px;grid-template-rows:auto auto}
 body[data-chronicle] #chronicle-body .sp-sockets>button>b{font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
 body[data-chronicle] #chronicle-body .sp-sockets>button>small{font-size:10px;line-height:1.3;margin:0}
 body[data-chronicle] #chronicle-body .sp-library .sp-shelf{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));min-height:0;overflow:auto}
 body[data-chronicle] #chronicle-body .sp-technique-sheet>header>h3{font-size:14px}
 body[data-chronicle] #chronicle-body .sp-technique-sheet>.sp-actions>button{font-size:11px}
}
@media(orientation:landscape) and (max-width:700px) and (max-height:400px){
 body[data-chronicle] #chronicle-body .sp-library .sp-technique-sheet{padding:8px}
 body[data-chronicle] #chronicle-body .sp-technique-sheet>header>.sp-icon{width:26px;height:26px}
 body[data-chronicle] #chronicle-body .sp-sockets{gap:6px}
 body[data-chronicle] #chronicle-body .sp-sockets>button{display:block;width:25%}
 body[data-chronicle] #chronicle-body .sp-sockets>button>.sp-icon{display:none}
 body[data-chronicle] #chronicle-body .sp-sockets>button>b{font-size:11px;line-height:1.6}
}
body[data-chronicle] #chronicle-body .sp-book[aria-pressed=true]::after{content:'◇'}
@media(orientation:portrait) and (max-width:600px){
 body[data-chronicle] #chronicle-body .sp-library{height:100%;grid-template-rows:auto minmax(100px,1fr) minmax(180px,36%)}
 body[data-chronicle] #chronicle-body .sp-library .sp-shelf{min-height:0;overflow:auto;overscroll-behavior:contain}
 body[data-chronicle] #chronicle-body .sp-library .sp-detail{position:relative;bottom:auto}
}

/* Actual-hit rhythm is contained within the existing hero card. */
body[data-chronicle] #martial-rhythm{position:relative;display:flex;align-items:center;gap:5px;margin-top:5px;padding:0 0 4px;min-width:0;height:17px;box-sizing:content-box;color:#c7cabe;font:10px/1.2 "Microsoft YaHei",sans-serif}
body[data-chronicle] #martial-rhythm[hidden]{display:none}
#martial-rhythm .flow-pips{display:flex;gap:3px;flex:none}#martial-rhythm .flow-pips i{width:5px;height:5px;transform:rotate(45deg);background:#213039;border:1px solid #9b947a77}#martial-rhythm .flow-pips i.lit{background:var(--flow-colour);border-color:var(--flow-colour)}#martial-rhythm>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}#martial-rhythm .flow-time{position:absolute;left:0;bottom:0;height:2px;background:var(--flow-colour);opacity:.75;width:100%;transform-origin:left}#martial-rhythm.ready{color:var(--flow-colour)}body[data-chronicle] .skill.flow-ready{border-color:#edc994;box-shadow:inset 0 0 0 3px #e8c07c55,0 0 0 1px #e8c07c77}
@media(orientation:landscape) and (max-height:520px){body[data-chronicle] #martial-rhythm{font-size:9px;margin-top:3px;height:13px;padding-bottom:3px}}

/* A quiet cultivation gauge between the two thumb controls. */
body[data-chronicle] #cultivation-track{position:absolute;z-index:12;left:50%;bottom:max(7px,env(safe-area-inset-bottom));transform:translateX(-50%);width:clamp(160px,28vw,320px);pointer-events:none;text-align:center;color:#dddbc9;font:10px/1.3 "Microsoft YaHei",sans-serif;text-shadow:0 1px 3px #122328}
#cultivation-track>span{display:block;white-space:normal;font-size:10px;letter-spacing:.3px}
#cultivation-track>i{display:block;margin-top:3px;height:3px;background:#102329c9;border:1px solid #b6a57655;overflow:hidden}
#cultivation-track>i>b{display:block;width:100%;height:100%;background:#bfb789;transform-origin:left;transition:transform .25s ease,background-color .2s}
#cultivation-track.ready{color:#efd09b}#cultivation-track.ready>i>b,#cultivation-track.gained>i>b{background:#f0dba9}
#cultivation-track.complete{color:#cae2d4}#cultivation-track.complete>i>b{background:#a8cdb8}
body[data-chronicle] #growth-arrival{position:absolute;z-index:14;pointer-events:none;left:50%;top:28%;transform:translateX(-50%);width:min(370px,78%);box-sizing:border-box;padding:11px 18px;text-align:center;background:linear-gradient(90deg,#21313c00,#21313c 15%,#21313c 85%,#21313c00);color:#e3d7b6;border-top:1px solid #c6b07c99;border-bottom:1px solid #c6b07c99}
#growth-arrival>small{display:block;color:#bcbaad;font:10px/1.4 "Microsoft YaHei",sans-serif;letter-spacing:4px}
#growth-arrival>strong{display:block;margin:4px 0;font:22px/1.35 "Songti SC","SimSun",serif;letter-spacing:3px}
#growth-arrival>span{display:block;font:11px/1.5 "Microsoft YaHei",sans-serif}
#growth-arrival>em{display:block;margin-top:5px;color:#c9d8c6;font:11px/1.5 "Microsoft YaHei",sans-serif}
body[data-chronicle] #tribulation-track{position:absolute;z-index:12;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:clamp(150px,28vw,270px);pointer-events:none;text-align:center;color:#e3d5b3;font:10px/1.4 "Microsoft YaHei",sans-serif;text-shadow:0 1px 3px #10232b}
#tribulation-track>div{display:flex;gap:5px;margin-top:4px}
#tribulation-track i{flex:1;height:5px;border:1px solid #b9a27088;background:#12232ad9;overflow:hidden}
#tribulation-track b{display:block;height:100%;width:100%;transform-origin:left;background:#c7ddb7}
#tribulation-track .current{border-color:#e8c986}#tribulation-track .stable{border-color:#c7ddb7}#tribulation-track.warning{color:#ffd5b5}
#tribulation-track[hidden]{display:none!important}
#cultivation-track[hidden],#growth-arrival[hidden]{display:none!important}
/* Keep the growth line below, rather than over, portrait thumb labels. */
@media(orientation:portrait) and (max-width:700px){
 body[data-chronicle] #growth-arrival{top:max(36%,calc(var(--medicine-portrait-top,230px) + 60px))}
 body[data-chronicle] #game[data-mobile=true] #cultivation-track{width:calc(100% - 32px)}
 body[data-chronicle] #game[data-mobile=true] .skillbar{bottom:calc(var(--edge-bottom) + 28px)}
 body[data-chronicle] #game[data-mobile=true] #joystick{bottom:calc(var(--edge-bottom) + 38px)}
 body[data-chronicle] #game[data-mobile=true] .interact{bottom:calc(var(--edge-bottom) + 201px)}
}
@media(orientation:landscape) and (max-height:400px){#growth-arrival>strong{font-size:18px}body[data-chronicle] #growth-arrival{top:24%;padding:7px 16px}#cultivation-track>span{font-size:9px}}
@media(orientation:landscape) and (max-width:700px) and (max-height:400px){body[data-chronicle] #growth-arrival{top:max(100px,30%);width:min(260px,40%);padding:7px 12px}}
@media(prefers-reduced-motion:reduce){#cultivation-track>i>b{transition:none}}
/* Companion roster: usable portraits and controls in short phone landscapes. */
body[data-chronicle] #chronicle-body .sp-people{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);grid-template-rows:auto auto;gap:16px;padding:18px;align-items:start}
body[data-chronicle] .sp-people .sp-portraits{gap:10px;align-items:stretch;min-width:0}
body[data-chronicle] .sp-people .sp-portraits>button{min-width:0;padding:8px;align-self:start}
body[data-chronicle] .sp-people .sp-portraits img{height:180px;object-fit:cover}
body[data-chronicle] .sp-people .sp-portraits b{font-size:15px!important;line-height:1.4;margin:6px 0 3px;white-space:nowrap}
body[data-chronicle] .sp-people .sp-portraits small{font-size:11px;line-height:1.5;display:block}
body[data-chronicle] .sp-people .sp-portraits em{font-style:normal;display:block;font-size:10px;color:#e4c384;margin-top:4px}
body[data-chronicle] #chronicle-body .sp-people .sp-detail{width:auto;min-width:0;padding:12px;text-align:left;max-height:none}
body[data-chronicle] .sp-people .sp-detail>.sp-icon{display:none}
body[data-chronicle] #chronicle-body .sp-people .sp-detail h3{font-size:17px;margin:0 0 8px!important}
body[data-chronicle] #chronicle-body .sp-people .sp-detail p{font-size:13px;line-height:1.6;margin:8px 0 12px}
body[data-chronicle] .sp-people .sp-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
body[data-chronicle] #chronicle-body .sp-people .sp-actions button{min-width:0;width:auto;min-height:44px;padding:7px 5px;font-size:12px;line-height:1.4}
body[data-chronicle] .sp-people>.sp-hint{grid-column:1/-1;position:static;width:auto;margin:0;padding:6px 10px;text-align:left;font-size:11px}
@media (orientation:landscape) and (max-height:520px){
 body[data-chronicle] #chronicle-body .sp-people{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px;padding:10px}
 body[data-chronicle] .sp-people .sp-portraits{gap:6px}
 body[data-chronicle] .sp-people .sp-portraits>button{padding:5px}
 body[data-chronicle] .sp-people .sp-portraits img{height:100px}
 body[data-chronicle] .sp-people .sp-portraits b{font-size:12px!important}
 body[data-chronicle] .sp-people .sp-portraits small{font-size:10px}
 body[data-chronicle] #chronicle-body .sp-people .sp-detail{padding:9px}
 body[data-chronicle] #chronicle-body .sp-people .sp-detail h3{font-size:14px}
 body[data-chronicle] #chronicle-body .sp-people .sp-detail p{font-size:11px;margin:5px 0 8px}
 body[data-chronicle] #chronicle-body .sp-people .sp-actions button{font-size:11px}
}
@media (orientation:portrait) and (max-width:700px){
 body[data-chronicle] #chronicle-body .sp-people{grid-template-columns:minmax(0,1fr);padding:10px;gap:12px}
 body[data-chronicle] .sp-people .sp-portraits img{height:115px}
 body[data-chronicle] .sp-people .sp-portraits b{font-size:13px!important}
}