:root{color-scheme:dark;--base:#0d1725;--ink:#e9e9db;--muted:#9eafbb;--gold:#ffdc8d}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% -20%,#233d50 0,#101d2c 48%,#0a121f 100%);color:var(--ink);font-family:ui-sans-serif,system-ui,"Noto Sans JP",sans-serif}
body{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:18px 14px 20px;overscroll-behavior:none}
.frame{width:min(980px,100%)}.header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 3px 14px}.eyebrow{font-size:10px;letter-spacing:.22em;color:#9ab5c2;font-weight:800}.header h1{font-size:25px;line-height:1.2;letter-spacing:.06em;margin:7px 0 0;font-weight:900}.header h1 span{font-size:11px;letter-spacing:.12em;color:#a7bec4;font-weight:700}.status{font-size:10px;font-weight:800;letter-spacing:.14em;white-space:nowrap;color:#bbcad0}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#73daba;box-shadow:0 0 12px #60c7ac;vertical-align:middle;margin-right:7px}
.screen-frame{border:2px solid #48617a;background:#1d3348;box-shadow:0 20px 75px #0007,0 0 0 5px #0c1a2d,0 0 0 7px #283e50;border-radius:9px;overflow:hidden}.bezel-top,.bezel-bottom{display:flex;justify-content:space-between;align-items:center;height:24px;padding:0 15px;font-size:9px;font-weight:800;letter-spacing:.18em;color:#94b2b9;background:linear-gradient(#213a50,#182d41)}.bezel-bottom{justify-content:center;gap:16px;height:17px;font-size:7px;color:#719ca4}
canvas{width:100%;height:auto;aspect-ratio:3 / 2;display:block;background:#0b1722;image-rendering:pixelated;image-rendering:crisp-edges;outline:0;touch-action:none}
.game-bottom{padding:12px 4px}.gamepad{width:100%;display:none;align-items:center;justify-content:space-between;gap:20px;touch-action:none;user-select:none;-webkit-user-select:none}.dpad{width:150px;height:150px;position:relative;flex:0 0 150px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:4px}.control{font-family:inherit;cursor:pointer;border:1px solid #617a8e;border-bottom:3px solid #334a63;border-radius:10px;background:linear-gradient(#344c64,#1d3449);color:#e8f0ec;font-weight:900;touch-action:none;user-select:none;box-shadow:inset 0 1px #ffffff26}.control:active,.control.active{background:linear-gradient(#557e8b,#2a586b);transform:translateY(1px);border-bottom-width:2px}.dpad .up{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad .down{grid-column:2;grid-row:3}.dpad-center{grid-column:2;grid-row:2;background:#263c53;border:1px solid #455f75;border-radius:9px}.actionpad{display:flex;align-items:flex-end;gap:13px}.a-control,.b-control{width:65px;height:65px;border-radius:50%;font-size:23px}.a-control{background:linear-gradient(#d79c74,#a86457);border-color:#e2a889;border-bottom-color:#684b50}.b-control{background:linear-gradient(#8b9ec2,#506b99);border-color:#9fb2ca;border-bottom-color:#344764}.menu-control{font-size:11px;padding:11px 13px;align-self:center;margin-right:8px}.info-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;color:#a4b5bd;line-height:1.8}.controls-info strong{color:var(--gold);padding-right:7px}.info-row kbd{font-family:inherit;padding:2px 6px;background:#23394c;color:#dbe7e6;border:1px solid #38546c;border-radius:4px;font-size:10px}.note{white-space:nowrap;font-size:10px}footer{font-size:10px;color:#758c99;text-align:center;padding-top:3px;letter-spacing:.025em}
@media(hover:none),(pointer:coarse){body{align-items:flex-start;padding:10px 10px 18px}.header{margin:5px 2px 14px}.header h1{font-size:21px}.header h1 span{display:none}.eyebrow{font-size:8px}.status{font-size:8px}.gamepad{display:flex}.info-row{margin-top:12px}.controls-info{display:none}.note{white-space:normal;font-size:10px}footer{font-size:9px}}
@media(max-width:580px){.status{display:none}.bezel-top{font-size:8px;height:19px}.gamepad{gap:6px}.dpad{width:135px;height:135px;flex-basis:135px}.actionpad{gap:8px}.a-control,.b-control{width:55px;height:55px;font-size:19px}.menu-control{padding:10px 8px;margin-right:0}.screen-frame{border-radius:5px}}
@media(max-width:360px){.dpad{width:118px;height:118px;flex-basis:118px}.a-control,.b-control{width:47px;height:47px;font-size:17px}.actionpad{gap:5px}.menu-control{font-size:9px}}

.facebar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:15px 0 4px;padding:12px 15px;border-radius:12px;background:#162c40;border:1px solid #38546b}
.facebar strong{font-size:12px;color:#f6e7c5;margin-right:5px}.facebar p{margin:0;font-size:10px;color:#a5bac7}
.faceopt{background:#24425a;color:#e7f1ee;border:1px solid #54738a;border-radius:8px;padding:9px 15px;font-family:inherit;font-weight:800;cursor:pointer}
.faceopt.chosen{background:#e7d1a1;color:#1d3346;border-color:#ffefc9}.faceopt:focus-visible{outline:3px solid #ffe8a5}
@media(max-width:520px){.facebar{gap:6px;padding:10px}.faceopt{flex:1;padding:9px 5px}.facebar strong{flex-basis:100%}}

.rebuildbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:13px 0 4px;padding:12px 14px;border-radius:12px;background:#162c40;border:1px solid #39576f;color:#e8ead9;font-size:12px}
.rebuildbar strong{color:#ffe9bd}.rebuildbar span{color:#bed2db;font-size:11px;flex:1}
.rebuildbar .sheet{display:block;width:128px;max-width:100%;height:auto;image-rendering:pixelated;background:#779b83;border:1px solid #718c91}
@media(max-width:580px){.gamepad{display:flex}.controls-info{display:none}}
@media(max-width:520px){.rebuildbar strong{width:100%}}

.companionbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px;margin:15px 0 8px;border-radius:11px;background:#182f41;border:1px solid #49717e} .companionbar strong{font-size:15px;color:#ffe2a8} .companionbar p{font-size:11px;line-height:1.7;margin:5px 0 0;color:#c0ccd0} #companion-toggle{flex:0 0 auto;font:800 12px inherit;font-family:inherit;background:#e7cf9d;color:#1d3449;border:0;border-radius:8px;padding:12px 16px;cursor:pointer;min-height:44px} #companion-toggle[aria-pressed="true"]{background:#6cbfa4;color:#11263b}.rebuildbar .rina-sheet{width:192px} @media(max-width:580px){.companionbar{flex-direction:column;align-items:stretch}.companionbar button{width:100%}}

.cast-section{background:#172b3c;border:1px solid #54737c;border-radius:14px;padding:19px;margin:14px 0;color:#eaf0e9}
.cast-head{display:flex;gap:12px;align-items:center;justify-content:space-between}.cast-head h2{font-size:23px;margin:5px 0 6px}.cast-head p{font-size:12px;line-height:1.8;color:#c4d2d3;margin:0}.cast-kicker{font-size:10px;color:#d2b77f;letter-spacing:2px}.cast-note{font-size:10px;color:#d0dfd7;text-align:right;flex:0 0 auto}.cast-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}.cast-tabs button,.cast-controls button,.cast-play{font-family:inherit;border:1px solid #66828a;color:#dce8e2;background:#294357;border-radius:7px;padding:9px 12px;min-height:44px;cursor:pointer;font-weight:700}.cast-tabs button[aria-pressed="true"],.cast-controls button[aria-pressed="true"]{background:#ecddb9;border-color:#f7e8cb;color:#213648}.cast-compare{display:grid;grid-template-columns:minmax(210px,300px) 1fr;gap:17px}.cast-stage{border:1px solid #719493;border-radius:10px;background:#d7e6d6;color:#233f48;text-align:center;padding:13px}.stage-label{font-size:14px;font-weight:800;padding-bottom:9px}.cast-stage canvas{width:144px;height:192px;image-rendering:pixelated;display:block;margin:0 auto;border-radius:5px;background:#e0eadd}.cast-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:10px 0}.cast-controls button{font-size:11px;min-height:34px;padding:7px}.cast-play{background:#244857;color:#f6dfae;font-size:12px;min-height:36px}.cast-details{background:#223e4e;border:1px solid #426879;border-radius:10px;padding:17px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}.cast-info{line-height:1.9;font-size:14px}.cast-mini-head{font-size:12px;color:#e8d6ae;font-weight:800}.cast-direction-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.cast-direction-grid div{text-align:center;font-size:11px;color:#d2e6df}.cast-direction-grid canvas{width:60px;height:80px;max-width:100%;image-rendering:pixelated}.cast-small{font-size:11px;color:#a7c0bd;line-height:1.7;margin:0}@media(max-width:650px){.cast-head{display:block}.cast-note{display:block;text-align:left;margin-top:9px}.cast-compare{grid-template-columns:1fr}.cast-section{padding:12px}.cast-tabs button{flex:1 1 27%;font-size:12px;padding:7px}.cast-details{padding:12px}}

.chapter-panel{margin:14px 0 10px;padding:18px 22px;border:1px solid #476d75;border-radius:12px;background:linear-gradient(130deg,#1b3646,#142735);color:#e9e9dc}
.chapter-kicker{font-size:10px;letter-spacing:.16em;color:#e6c892;font-weight:800}.chapter-panel h2{margin:8px 0;font-size:19px;color:#fff0d1}.chapter-panel p{font-size:12px;line-height:1.85;color:#c3d6d7;margin:5px 0}.chapter-panel .chapter-foot{font-size:11px;color:#9fb8c5;margin-top:8px}
@media(max-width:580px){.chapter-panel{padding:14px}.chapter-panel h2{font-size:16px}.chapter-panel p{font-size:11px}}

.sound-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 12px;font-size:10px;color:#90abb9}.sound-row button{background:#22394c;color:#eddeb6;border:1px solid #4e7181;border-radius:6px;padding:6px 11px;min-height:32px;cursor:pointer;font-size:11px;font-family:inherit}.sound-row button[aria-pressed="false"]{color:#9aafbe}

/* v1.2 — prominent destination guidance and responsive map button */
.navigation-bar{display:flex;align-items:center;gap:14px;margin:12px 2px 0;padding:14px 16px;background:linear-gradient(115deg,#203d51,#132739);border:1px solid #77a29d;border-left:5px solid #f3d88f;border-radius:11px;box-shadow:0 6px 24px #030d1855}
.nav-symbol{font-size:26px;color:#f3d68d;width:35px;text-align:center;text-shadow:0 0 18px #ffe8ae66}
.nav-body{min-width:0;flex:1}.nav-overline{font-size:10px;font-weight:900;letter-spacing:.13em;color:#a8d4ce}.nav-title{font-size:18px;font-weight:900;color:#fff4d3;line-height:1.45;margin:3px 0}.nav-detail{font-size:12px;line-height:1.6;color:#bdd3d7}
.nav-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.nav-distance{font-size:13px;font-weight:900;min-width:75px;text-align:center;color:#f2ddb0}.nav-map-button{border:1px solid #f2d99e;background:#eed59e;color:#263c4b;border-radius:8px;min-height:48px;padding:8px 16px;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer}.nav-map-button[aria-pressed=true]{background:#76bea9;border-color:#a5edcd}.nav-map-button small{font-size:10px;opacity:.7;padding-left:4px}
@media(max-width:620px){.navigation-bar{gap:8px;padding:10px 9px;margin-top:10px}.nav-symbol{width:19px;font-size:20px}.nav-overline{font-size:8px;letter-spacing:.02em}.nav-title{font-size:14px}.nav-detail{font-size:10px}.nav-actions{flex-direction:column-reverse;gap:4px}.nav-distance{font-size:11px;min-width:0}.nav-map-button{padding:8px 9px;min-height:42px;font-size:12px}.nav-map-button small{display:none}}