/* 16-bit RPG skin. Dialogue, official character art and recorded voices are unchanged. */
:root {
  --ink:#f8efd1; --sub:#c3d3d2; --card:#122b40; --paper:#19364a;
  --line:#667e85; --green:#24766e; --green-d:#0a373c;
  --gold:#f3d789; --gold-d:#b18b46; --rose:#ffc377;
  --mint:#194c4c; --lemon:#444733; --peach:#4a393c;
  --sky:#203f59; --lav:#373955; --red:#54363f; --wood:#091723;
  --pixel:"DotGothic16","M PLUS Rounded 1c","Hiragino Sans",sans-serif;
  --disp:var(--pixel); --stageH:clamp(168px,30vh,260px);
  --edge:#e9ddb6; --deep:#081722; color-scheme:dark;
}
body { background:#091723; color:var(--ink); }
#bg { background-color:#112b39; background-position:center top; background-repeat:no-repeat; background-size:auto 100%; }
#bg > svg { display:none; }
#bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,15,27,.55),transparent 28%,transparent 72%,rgba(5,15,27,.55)); }
.app { max-width:560px; }
.top { position:relative; z-index:3; padding-bottom:4px; }
.pillbtn,.round,.bubble,.big,.half,.chip,.ask,.back,.item,.card,.b,.opt,.tk,.st span,.fact,.tiles li,.hintbox,.exch,.ticket,.eventbar,.toast,.emote,.num,.guide-note,#start .go {
  border-radius:0; border:2px solid var(--edge);
  box-shadow:0 3px 0 var(--deep),inset 0 0 0 2px rgba(5,19,30,.72);
}
button,a.b,.pillbtn,.chip,.back,.nextbtn,.speaker,.head h2,.card h3,.big .t,.half .t,.item .t,.opt,.tk b,.fact b,.game b,.medal .ttl,.st,.toast,.eventbar {
  font-family:var(--pixel); font-weight:400;
}
button,a.b { letter-spacing:.025em; }
.pillbtn,.round { background:#122b40; backdrop-filter:none; color:var(--ink); }
.pillbtn { font-size:13px; }
.pillbtn .stp { border-radius:0; background:var(--gold); box-shadow:2px 2px 0 #715d30; }
.pillbtn b { color:var(--gold); }
.round[aria-pressed="false"]::after { border-radius:0; background:var(--gold); }
.eventbar { background:#483444; color:#fff0ce; font-size:13px; }
.stage { isolation:isolate; }
.stage::before { content:""; position:absolute; z-index:-1; left:24px; right:24px; bottom:0; height:7px; background:repeating-linear-gradient(90deg,#91a9a1 0 8px,#273e48 8px 16px); border-top:2px solid #c9cfa5; box-shadow:0 3px 0 #07151e; }
.rug { background:#091a28; opacity:.35; border-radius:0; height:12%; width:66%; }
.motes i { border-radius:0; width:3px; height:3px; box-shadow:3px 0 0 rgba(243,215,137,.3); opacity:.5; animation-timing-function:steps(8); }
.panel { padding-top:14px; gap:14px; scrollbar-width:thin; scrollbar-color:#7e9e9d #142839; }
.bubble { background:#112b43; border-width:3px; padding:21px 16px 12px; margin-top:12px; box-shadow:0 0 0 2px #07151e,inset 0 0 0 2px #73918f,0 5px 0 #07151e; }
.bubble::before { top:-11px; border:none; background:var(--edge); width:12px; height:12px; clip-path:polygon(0 0,100% 0,100% 33%,67% 33%,67% 67%,33% 67%,33% 100%,0 100%); }
.speaker { background:#174c50; color:#fff0ce; border:2px solid var(--gold); border-radius:0; padding:3px 10px; top:-15px; box-shadow:3px 3px 0 #081722; }
.say { color:#fff5dc; font-size:clamp(16px,4.4vw,19px); }
.say em { color:#ffd77c; }
.say .cur { color:var(--gold); }
.nextbtn { background:#246b66; color:#fff4d3; border:2px solid #d7d8b4; border-radius:0; box-shadow:2px 2px 0 #081722; }
.nextbtn span { animation-timing-function:steps(2,end); }
.iconbtn { color:var(--edge); border-radius:0; }
.iconbtn:active { background:#21485d; }
.big { padding:15px 14px; border:3px solid var(--edge); }
.big.primary { color:#fff4ce; background:#1e655f; box-shadow:0 4px 0 #061b26,inset 0 0 0 2px #0a353d; }
.big.white,.half { background:#173549; color:#fff4d8; }
.big .ic,.item .ic,.half svg,.fact,.tiles li,.flow .f span,.game,.num,.item .n,.state,.st span,.hintbox,.exch,.ticket { border-radius:0; }
.big .ic { background:#184b4e; border:2px solid #8ba996; box-shadow:2px 2px 0 #081722; }
.big.white .ic { background:#16383e; }
.big .t { font-size:19px; }
.big .s { color:#e5e8cb; opacity:1; font-size:12px; }
.half { gap:7px; padding:14px 10px; }
.half .t { font-size:16px; }
.half .s { color:#d0dcda; }
.half:hover,.item:hover,.b.white:hover,.opt:hover { background:#234b60; }
.chip { background:#203e4d; color:#f3e8c4; padding:8px 12px; }
.chip.gold { background:#67572c; color:#fff1b6; animation:none; }
.ask { background:#122b40; padding:6px 6px 6px 12px; }
.ask input { color:var(--ink); }
.ask input::placeholder { color:#b5c7c8; }
.send { border-radius:0; background:#246b66; border:2px solid #d8dbb7; }
.back { color:#fff4d4; background:#17394d; padding:6px 10px; box-shadow:2px 2px 0 #081722; }
.head h2 { color:#ffe6a5; text-shadow:2px 2px 0 #081722; letter-spacing:.04em; }
.item { background:#153246; padding:13px 12px; }
.item .ic { border:1px solid #7d9b97; }
.item .n { color:#fff6dc; background:#1e665e; border:1px solid var(--gold); box-shadow:2px 2px 0 #081722; }
.item .s { color:#c5d5d5; }
.state { color:#a7bfb9; }
.state.ok { background:#26796b; box-shadow:2px 2px 0 #081722; }
.card { background:#122b40; padding:17px 15px; border:3px solid var(--edge); box-shadow:0 0 0 2px #07151e,inset 0 0 0 2px #759490,0 5px 0 #07151e; }
.card h3 { color:#ffdd8b; font-size:19px; line-height:1.65; }
.card p { line-height:1.8; }
.fact,.tiles li { border:1px solid #6c8f91; box-shadow:inset 0 0 0 1px #0c2636; }
.fact small { color:#cbd9d5; }
.fact b { color:#fff1ce; font-size:17px; }
.flow .f span { border:2px solid #8ea79d; box-shadow:2px 2px 0 #081722; }
.flow .ar { color:#e7c57e; }
.num { background:#205d5b; border:2px solid #d9d9b4; box-shadow:2px 2px 0 #081722; }
.num.r { background:#7a4a4b; box-shadow:2px 2px 0 #081722; }
.steps li:not(:last-child)::before { background:repeating-linear-gradient(#b1b788 0 4px,transparent 4px 8px); width:3px; }
.steps span { color:#c7d8d5; }
.tk { background:#193347; border:2px solid #d1ba83; }
.tk b { color:#ffdb91; }
.tk small,.note { color:#c6d4d3; }
.exch { background:#3a4236; border:2px solid #bca568; }
.coin { background:#d6b650; border:3px solid #f6e4a2; border-radius:0; box-shadow:3px 3px 0 #7e692c; color:#28342c; animation:none; }
.bignum { color:#fff0b4; }
.ticket { background:#17394b; color:#ffe8a3; border:2px dashed #d8c489; rotate:0deg; }
.arrow { color:#e7cd8d; }
.timeline .tl { border-radius:0; }
.game { border:1px solid #789799; }
.game span { color:#c4d5d2; }
.hintbox { background:#3b4536; border:2px solid #b7b885; }
.b { border:2px solid var(--edge); padding:13px 12px; line-height:1.6; }
.b.green { color:#fff4cc; background:#1e665f; box-shadow:0 4px 0 #071b29,inset 0 0 0 2px #124448; }
.b.gold { color:#fff2bd; background:#67582e; box-shadow:0 4px 0 #181f22,inset 0 0 0 2px #453e27; }
.b.white { color:#fff0cf; background:#1c3c4d; }
.b[disabled] { opacity:.65; }
.opt { color:#f9f0d4; background:#203d51; font-size:17px; border:2px solid #a5bcb2; }
.opt.ok { background:#24574b; box-shadow:0 0 0 2px #bcdaa2; }
.opt.ng { background:#603c49; box-shadow:0 0 0 2px #e7b5a9; }
.st { color:#efe8cd; }
.st span { background:#1a3447; border:2px dashed #92a69b; }
.st.ok span { background:#2a574c; rotate:0deg; border:2px solid #eed69a; box-shadow:3px 3px 0 #081722; }
.ring { border-radius:0; background:#d3b668; border:4px solid #f5dea1; animation:none; box-shadow:4px 4px 0 #071722; }
.ring div { border-radius:0; background:#183447; color:#ffe5a4; animation:none; }
.medal .ttl { color:#ffe1a0; }
.guide-note { background:#354436; border:1px solid #b9b68d; }
.emote { background:#1c4654; color:#ffe49d; font-family:var(--pixel); border:2px solid var(--gold); box-shadow:3px 3px 0 #081722; }
.emote::after { border-top-color:var(--gold); }
.toast { background:#193e4b; color:#ffe8af; box-shadow:3px 3px 0 #081722; }
#start { background:linear-gradient(180deg,rgba(5,17,28,.06) 0%,rgba(5,17,28,.36) 48%,#081a2c 76%); gap:17px; padding-bottom:max(28px,env(safe-area-inset-bottom,0px)); }
#start .logo { color:#ffe6a6; font-size:clamp(36px,11vw,56px); letter-spacing:.045em; text-shadow:3px 3px 0 #8b6a35,6px 6px 0 #061522; }
#start .logo small { color:#f5eac9; font-family:var(--pixel); font-weight:400; letter-spacing:.22em; font-size:17px; margin-top:14px; }
#start .go { color:#fff4c9; background:#205d58; border:3px solid #f2d99a; padding:14px 35px; box-shadow:0 0 0 3px #102a3c,inset 0 0 0 2px #a4b59a,0 6px 0 #07121d; animation:none; font-family:var(--pixel); font-weight:400; }
#start .go::before { content:"▶ "; color:#ffe6a2; }
#start p { color:#c9d8d2; }
.start-back { color:#e4dfc2; font-family:var(--pixel); font-weight:400; text-underline-offset:5px; }
.credit { color:#b0c3c3; font-size:11px; text-align:center; }
button:focus-visible,input:focus-visible,a:focus-visible,.bubble:focus-visible,.chara:focus-visible { outline:3px solid #ffe598; outline-offset:4px; }
button:active,a.b:active { transform:translateY(2px); }
/* Direct value wins over the original narrow-screen .stage variable. */
.app.compact .stage{--stageH:clamp(130px,19vh,170px)}
@media(min-width:700px){#bg{background-size:auto 100%;}.app{border-left:2px solid #486b70;border-right:2px solid #486b70;background:rgba(6,22,34,.12);}}
@media(max-width:350px){.big .t{font-size:17px}.pillbtn{font-size:12px}.head h2{font-size:16px}.card{padding:15px 12px}.card h3{font-size:17px}}
@media(max-height:650px){:root{--stageH:155px}.app.compact,.app.compact .stage{--stageH:105px}.panel{padding-top:10px}.bubble{padding-top:18px}.say{font-size:16px}#start{gap:12px}#start .logo{font-size:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#bg { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20560%20900%22%20shape-rendering%3D%22crispEdges%22%3E%3Cdefs%3E%3Cpattern%20id%3D%22bricks%22%20width%3D%2280%22%20height%3D%2248%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2280%22%20height%3D%2248%22%20fill%3D%22%231a3a49%22%2F%3E%3Cpath%20d%3D%22M0%200H80V24H0V48H80M40%200V24M0%2024V48M80%2024V48%22%20fill%3D%22none%22%20stroke%3D%22%23102b3a%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%205H36M45%2029H74%22%20stroke%3D%22%23234956%22%20stroke-width%3D%222%22%2F%3E%3C%2Fpattern%3E%3Cpattern%20id%3D%22floor%22%20width%3D%2280%22%20height%3D%2232%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Crect%20width%3D%2280%22%20height%3D%2232%22%20fill%3D%22%23162d3b%22%2F%3E%3Cpath%20d%3D%22M0%200H80V32H0Z%22%20stroke%3D%22%230d2230%22%20stroke-width%3D%223%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M5%206H72%22%20stroke%3D%22%23244350%22%20stroke-width%3D%222%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22560%22%20height%3D%22900%22%20fill%3D%22%23102734%22%2F%3E%3Crect%20y%3D%2236%22%20width%3D%22560%22%20height%3D%22410%22%20fill%3D%22url%28%23bricks%29%22%2F%3E%3Cpath%20d%3D%22M0%2036H560M0%2048H560M0%20416H560M0%20430H560%22%20stroke%3D%22%23284e59%22%20stroke-width%3D%226%22%2F%3E%3Crect%20x%3D%22210%22%20y%3D%2284%22%20width%3D%22140%22%20height%3D%22196%22%20fill%3D%22%23081c2b%22%2F%3E%3Cpath%20d%3D%22M210%2084H350V280H210Z%22%20fill%3D%22none%22%20stroke%3D%22%2388a399%22%20stroke-width%3D%228%22%2F%3E%3Cpath%20d%3D%22M222%2096H338V268H222Z%22%20fill%3D%22%230c2136%22%20stroke%3D%22%23365767%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M228%20232V218H242V202H256V214H270V192H284V206H298V194H312V211H332V264H228Z%22%20fill%3D%22%231c4d55%22%2F%3E%3Cpath%20d%3D%22M228%20248V236H248V222H268V234H286V218H306V232H332V264H228Z%22%20fill%3D%22%232b625e%22%2F%3E%3Cpath%20d%3D%22M276%2090V274M216%20176H344%22%20stroke%3D%22%2375938c%22%20stroke-width%3D%228%22%2F%3E%3Cpath%20d%3D%22M245%20118H251V124H245ZM313%20136H317V140H313ZM306%20107H310V111H306ZM232%20153H236V157H232Z%22%20fill%3D%22%23ebe6b9%22%2F%3E%3Cpath%20d%3D%22M294%20118H310V134H294Z%22%20fill%3D%22%23d8e6c7%22%2F%3E%3Cpath%20d%3D%22M302%20114H314V126H302Z%22%20fill%3D%22%230c2136%22%2F%3E%3Crect%20x%3D%22196%22%20y%3D%22280%22%20width%3D%22168%22%20height%3D%2212%22%20fill%3D%22%23819b8c%22%2F%3E%3Crect%20x%3D%22204%22%20y%3D%22292%22%20width%3D%22152%22%20height%3D%228%22%20fill%3D%22%232a4e56%22%2F%3E%3Cpath%20d%3D%22M36%20100H60V112H72V212H60V224H36V212H24V112H36Z%22%20fill%3D%22%23112534%22%20stroke%3D%22%2366847e%22%20stroke-width%3D%224%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%22128%22%20width%3D%2224%22%20height%3D%2264%22%20fill%3D%22%23b99b57%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22140%22%20width%3D%2216%22%20height%3D%2240%22%20fill%3D%22%23e5cd87%22%2F%3E%3Crect%20x%3D%2244%22%20y%3D%22148%22%20width%3D%228%22%20height%3D%2224%22%20fill%3D%22%23f4e6b8%22%2F%3E%3Cpath%20d%3D%22M500%20100H524V112H536V212H524V224H500V212H488V112H500Z%22%20fill%3D%22%23112534%22%20stroke%3D%22%2366847e%22%20stroke-width%3D%224%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%22128%22%20width%3D%2224%22%20height%3D%2264%22%20fill%3D%22%23b99b57%22%2F%3E%3Crect%20x%3D%22504%22%20y%3D%22140%22%20width%3D%2216%22%20height%3D%2240%22%20fill%3D%22%23e5cd87%22%2F%3E%3Crect%20x%3D%22508%22%20y%3D%22148%22%20width%3D%228%22%20height%3D%2224%22%20fill%3D%22%23f4e6b8%22%2F%3E%3Cpath%20d%3D%22M100%2064H160V180H148V192H136V204H124V192H112V180H100Z%22%20fill%3D%22%23205d5a%22%20stroke%3D%22%23547f78%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M400%2064H460V180H448V192H436V204H424V192H412V180H400Z%22%20fill%3D%22%23205d5a%22%20stroke%3D%22%23547f78%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M124%20104H136V116H148V128H136V140H124V128H112V116H124ZM424%20104H436V116H448V128H436V140H424V128H412V116H424Z%22%20fill%3D%22%23b8bb80%22%2F%3E%3Crect%20y%3D%22446%22%20width%3D%22560%22%20height%3D%22454%22%20fill%3D%22url%28%23floor%29%22%2F%3E%3Cpath%20d%3D%22M0%20446H560M0%20458H560%22%20stroke%3D%22%23607f7a%22%20stroke-width%3D%224%22%2F%3E%3Crect%20y%3D%22470%22%20width%3D%22560%22%20height%3D%22430%22%20fill%3D%22%23081b2c%22%20opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%22186%22%20y%3D%22352%22%20width%3D%22188%22%20height%3D%2212%22%20fill%3D%22%23152e37%22%2F%3E%3Crect%20x%3D%22166%22%20y%3D%22364%22%20width%3D%22228%22%20height%3D%2212%22%20fill%3D%22%230f2935%22%2F%3E%3Crect%20x%3D%22146%22%20y%3D%22376%22%20width%3D%22268%22%20height%3D%2212%22%20fill%3D%22%230d2631%22%2F%3E%3C%2Fsvg%3E"); }