/* 影騎士と紙の姫: ゲーム本体のスタイル。読み込み元は ../index.html */
:root{
--bg:#22130c; --panel:#2f1b12; --panel2:#3d2418; --line:#6a3f26; --text:#f5e2bf; --muted:#caa27a;
--gold:#f0b04c; --gold-ink:#2b1508; --ghost:#9fe6b4; --danger:#e3664a;
--curtain1:#8a2222; --curtain2:#5a1314; --fringe:#d9a441; --frame:#120804;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
color-scheme:dark;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){--bg:#160c07;--panel:#241409;--panel2:#331d12;--line:#5e3720;--text:#f3dfbd;--muted:#c29a72;}
}
:root[data-theme="dark"]{--bg:#160c07;--panel:#241409;--panel2:#331d12;--line:#5e3720;--text:#f3dfbd;--muted:#c29a72;}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg);color:var(--text);
font-family:"DotGothic16","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
touch-action:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:none}
button:focus-visible{outline:2px solid var(--ghost);outline-offset:2px}
#app{height:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:6px;
padding:6px max(10px,env(safe-area-inset-right,0px)) 8px max(10px,env(safe-area-inset-left,0px))}
/* HUD ( pixel icons, notched pixel frames ) */
.ico svg,.ibtn svg,.tool svg,.pad svg,#fragIco svg,#benchSwap svg,#sThumb svg{display:block;height:auto}
#hud{display:flex;align-items:center;gap:2px;min-height:44px}
#ink{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
#ink .ico{color:var(--ghost)}
#ink .ico svg{width:14px}
#inkBar{position:relative;flex:1;max-width:150px;height:9px;background:var(--frame);
box-shadow:0 -2px 0 var(--line),0 2px 0 var(--line),-2px 0 0 var(--line),2px 0 0 var(--line)}
#inkFill{position:absolute;inset:0 auto 0 0;width:100%;background:repeating-linear-gradient(90deg,var(--ghost) 0 5px,transparent 5px 6px);transition:width .08s steps(3)}
#ink.empty #inkFill{background:var(--danger)}
#ink.flash #inkBar{box-shadow:0 -2px 0 var(--danger),0 2px 0 var(--danger),-2px 0 0 var(--danger),2px 0 0 var(--danger)}
#strokeMarks{display:flex;align-items:center;gap:3px;margin-left:8px;flex:none;color:var(--ghost);font-size:15px;font-variant-numeric:tabular-nums}
#strokeMarks svg{width:14px;height:auto;display:block}
#strokeMarks.none{color:var(--muted);opacity:.55}
#strokeMarks.flash{color:var(--danger);opacity:1}
#inkNum{font-size:15px;min-width:1.6em;text-align:right;font-variant-numeric:tabular-nums}
#fragIco{flex:none;margin:0 8px 0 6px;color:var(--muted);opacity:.45}
#fragIco svg{width:16px}
#fragIco.got{color:var(--text);opacity:1}
@keyframes needp{0%,100%{transform:none}30%{transform:scale(1.5)}60%{transform:scale(.9)}}
#fragIco.need{animation:needp .6s steps(6);color:var(--gold);opacity:1}
.ibtn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--text)}
.ibtn svg{width:22px}
.ibtn:active{color:var(--gold)}
.ibtn:disabled{opacity:.28;cursor:default}
.ibtn[aria-pressed="true"]{color:var(--gold)}
@keyframes deny{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.ibtn.deny{animation:deny .4s steps(4);color:var(--danger)!important;opacity:1!important}
body.dock #bZoom{display:none}
/* grid */
#mid{flex:1;min-height:0;display:grid;gap:8px;grid-template-columns:1fr 1fr;
grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"stage stage" "lamp lamp" "padl padr"}
body.dock #mid{grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"stage stage" "bench bench" "lamp lamp" "padl padr"}
#stageArea{grid-area:stage;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}
body.dock #stageArea{align-items:flex-start}
#stageWrap{position:relative;width:240px;height:144px;background:var(--frame);box-shadow:6px 9px 0 8px rgba(0,0,0,.4)}
#stageWrap::before{content:'';position:absolute;inset:-16px -8px -12px -8px;border:8px solid transparent;border-top-width:16px;border-bottom-width:12px;border-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2224%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2222%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2220%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%228%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%2210%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2212%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%2214%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2216%22%20y%3D%224%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%2218%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%224%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%2220%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%225%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%229%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%2213%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%2217%22%20y%3D%226%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%236a1418%22/%3E%3Crect%20x%3D%2220%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%226%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%227%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%228%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%229%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2210%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2210%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2210%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%2210%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2210%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2210%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2210%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2210%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2211%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2211%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2211%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2211%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2211%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2211%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2211%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2212%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2212%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%2212%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2212%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2212%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2212%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2212%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2213%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2214%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2214%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2214%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2214%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2214%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2215%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2215%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2215%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%2215%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2215%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2215%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2215%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2215%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2216%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2216%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%2216%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2220%22%20y%3D%2216%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2216%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2216%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2216%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2217%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2217%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2217%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%223%22%20y%3D%2217%22%20width%3D%2218%22%20height%3D%221%22%20fill%3D%22%231a0c06%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2217%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2217%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2217%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2218%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2218%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%222%22%20y%3D%2218%22%20width%3D%2220%22%20height%3D%221%22%20fill%3D%22%239a6e34%22/%3E%3Crect%20x%3D%2222%22%20y%3D%2218%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2218%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2219%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2219%22%20width%3D%2222%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2219%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2220%22%20width%3D%2222%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2221%22%20width%3D%2222%22%20height%3D%221%22%20fill%3D%22%233a2212%22/%3E%3Crect%20x%3D%2223%22%20y%3D%2221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%220%22%20y%3D%2222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3Crect%20x%3D%221%22%20y%3D%2222%22%20width%3D%2223%22%20height%3D%221%22%20fill%3D%22%23241208%22/%3E%3Crect%20x%3D%220%22%20y%3D%2223%22%20width%3D%2224%22%20height%3D%221%22%20fill%3D%22%23120804%22/%3E%3C/svg%3E") 8 8 8 8 round;image-rendering:pixelated;border-image-width:16px 8px 12px 8px;pointer-events:none;z-index:6;background:none}
#stageWrap::after{content:'';position:absolute;left:10px;right:10px;bottom:-9px;height:4px;pointer-events:none;z-index:7;background:radial-gradient(circle at 50% 50%,#ffe6a0 0 1px,#e8a33c 1.5px,transparent 2.5px) 0 0/22px 4px repeat-x;filter:drop-shadow(0 0 3px rgba(255,200,110,.8));animation:foot 3.2s steps(8) infinite}
@keyframes foot{0%,100%{opacity:.85}30%{opacity:1}60%{opacity:.7}}
#game{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:crosshair}
#clip{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.curtain{position:absolute;top:0;bottom:0;width:51%;transition:transform .65s steps(9);pointer-events:none;
/* deep velvet in the half-dark: folds with a lit ridge, velvet grain, shadow at top and bottom, a dim gold fringe */
background:
linear-gradient(0deg,#7a5420 0 1px,#b8862e 1px 2px,#6a4618 2px 3px,rgba(0,0,0,.6) 3px 4px,transparent 4px),
repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 1px,rgba(0,0,0,.18) 1px 2px) 0 calc(100% - 4px)/6px 3px repeat-x,
linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.18) 26%,rgba(0,0,0,.05) 55%,rgba(0,0,0,.45)),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%224%22%20height%3D%224%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.28%22/%3E%3Crect%20x%3D%223%22%20y%3D%222%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.22%22/%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.05%22/%3E%3Crect%20x%3D%222%22%20y%3D%221%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.04%22/%3E%3C/svg%3E"),
repeating-linear-gradient(90deg,#2a0508 0 2px,#4a0b10 2px 5px,#6a141b 5px 7px,#8a2228 7px 8px,#5a0e14 8px 11px,#3a070c 11px 14px)}
.curtain.l{left:0;transform:translateX(-101%);box-shadow:inset -4px 0 0 rgba(0,0,0,.55)}
.curtain.r{right:0;transform:translateX(101%);box-shadow:inset 4px 0 0 rgba(0,0,0,.55)}
/* the light on the closed curtain: warm, from the footlights and the candles, never still */
#clip::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s steps(4);mix-blend-mode:screen;
background:radial-gradient(ellipse 70% 55% at 50% 108%,rgba(255,170,80,.34),rgba(255,120,40,.12) 45%,transparent 72%),
radial-gradient(ellipse 30% 40% at 50% 46%,rgba(255,200,120,.10),transparent 70%);
animation:curtainFlick 2.4s steps(12) infinite}
#stageWrap.closed #clip::after{opacity:1}
@keyframes curtainFlick{
0%{transform:translate(0,0) scale(1);filter:brightness(1)}
12%{transform:translate(1px,0) scale(1.02);filter:brightness(1.12)}
25%{transform:translate(-1px,1px) scale(.99);filter:brightness(.9)}
40%{transform:translate(2px,0) scale(1.03);filter:brightness(1.18)}
55%{transform:translate(0,1px) scale(1);filter:brightness(.95)}
70%{transform:translate(-2px,0) scale(1.01);filter:brightness(1.08)}
85%{transform:translate(1px,-1px) scale(.98);filter:brightness(.88)}
100%{transform:translate(0,0) scale(1);filter:brightness(1)}}
/* the folds sway a little as the cloth moves */
@keyframes clothSway{0%,100%{background-position:0 0,0 calc(100% - 4px),0 0,0 0,0 0}50%{background-position:0 0,1px calc(100% - 4px),0 0,1px 0,1px 0}}
#stageWrap.closed .curtain{animation:clothSway 3.2s steps(2) infinite}
#stageWrap.closed .curtain{transform:translateX(0)}
#stageWrap.noanim .curtain{transition:none}
#cardLabel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:0;transition:opacity .2s;color:var(--text);text-shadow:2px 2px 0 rgba(0,0,0,.6)}
#cardLabel b{font-weight:normal;font-size:clamp(14px,3.4vw,20px);color:var(--fringe)}
#cardLabel span{font-size:clamp(20px,5vw,32px)}
#stageWrap.closed #cardLabel{opacity:1}
#cardLabel b,#cardLabel span{text-shadow:0 1px 0 #000,0 0 6px rgba(255,170,80,.45);animation:labelFlick 1.9s steps(6) infinite}
@keyframes labelFlick{0%,100%{opacity:1}30%{opacity:.86}55%{opacity:.97}80%{opacity:.9}}
#clearCandles .emb{color:var(--fringe);opacity:.9}
#clearCandles .emb svg{width:30px;height:auto;display:block;filter:drop-shadow(0 0 6px rgba(217,164,65,.5))}
#clearCandles{display:flex;gap:14px;margin-top:6px;min-height:0}
#clearCandles .cc{position:relative;width:14px;height:34px}
#clearCandles .cc i{position:absolute;left:4px;bottom:0;width:6px;height:18px;background:#e8dcc0;box-shadow:inset -1px 0 0 #b8a888,inset 1px 0 0 #f6efdc}
#clearCandles .cc i::before{content:'';position:absolute;left:2.5px;top:-2px;width:1px;height:2px;background:#3a2a1a}
#clearCandles .cc b{position:absolute;left:3px;bottom:18px;width:8px;height:12px;opacity:0;transition:opacity .3s steps(3);
background:radial-gradient(ellipse at 50% 70%,#fffbea 0 18%,#ffd978 25%,#ff9f3d 45%,transparent 60%);filter:drop-shadow(0 0 5px rgba(255,190,90,.9))}
#clearCandles .cc.lit b{opacity:1;animation:ccf .5s steps(2) infinite}
@keyframes ccf{0%{transform:translateX(-.5px) scaleY(1)}50%{transform:translateX(.5px) scaleY(1.08)}}
#sClear{background:rgba(20,10,6,.55);box-shadow:none;padding:12px 16px 10px}
#ov.clear-bg{align-items:flex-end}
/* bench (magnifier): the canvas draws its own pixel ring */
#bench{display:none;z-index:4}
#bench.show{display:block}
#stageWrap > #bench{position:absolute;top:8px;left:8px}
.lens{position:relative;width:120px;height:120px}
#benchCvs{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;cursor:crosshair;filter:drop-shadow(4px 5px 0 rgba(0,0,0,.42))}
#benchSwap{position:absolute;right:0;bottom:0;width:44px;height:40px;display:none;align-items:center;justify-content:center;color:var(--text);background:var(--panel);border:0;cursor:pointer;
box-shadow:0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line)}
#benchSwap svg{width:22px}
#benchSwap.on{display:flex}
/* on phones held upright, undo / redo live on the lens corners, right under the drawing thumb */
.lensbtn{display:none;position:absolute;top:-2px;width:46px;height:46px;align-items:center;justify-content:center;padding:0;border:0;cursor:pointer;
color:var(--text);background:var(--panel);box-shadow:0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line),0 6px 0 rgba(0,0,0,.45)}
.lensbtn svg{width:22px;display:block;height:auto}
#lUndo{right:-2px}
#lRedo{left:-2px;width:40px;height:40px}
#lRedo svg{width:18px}
.lensbtn:active{transform:translateY(3px);color:var(--gold)}
.lensbtn:disabled{opacity:.3;cursor:default}
.lensbtn.deny{animation:deny .4s steps(4);color:var(--danger)!important;opacity:1!important}
body.dock:not(.benchtiny) .lensbtn{display:flex}
body.dock:not(.benchtiny) #bUndo,body.dock:not(.benchtiny) #bRedo{display:none}
body.dock #bench{grid-area:bench;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
body.dock #bench.tiny{visibility:hidden}
body.is-title #bench,body.is-ending #bench{display:none!important}
/* lantern controls */
#lamp{grid-area:lamp;display:flex;align-items:center;gap:16px;padding:4px 4px}
#lamp.off{display:none}
.tools{display:flex;gap:12px;flex:none}
.tool{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--panel);border:0;cursor:pointer;color:var(--muted);
box-shadow:0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line),0 6px 0 rgba(0,0,0,.45)}
.tool svg{width:22px}
.tool[aria-pressed="true"]{color:var(--gold);background:var(--panel2);
box-shadow:0 -3px 0 var(--gold),0 3px 0 var(--gold),-3px 0 0 var(--gold),3px 0 0 var(--gold),0 6px 0 rgba(0,0,0,.45)}
#dist{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
#dist .ico{flex:none;color:var(--muted)}
#dist .ico svg{width:20px}
#dist .ico.dim svg{width:14px}
#slider{position:relative;flex:1;height:40px;cursor:pointer;touch-action:none}
#sTrack{position:absolute;left:0;right:0;top:19px;height:3px;background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 6px)}
#sFill{position:absolute;left:0;top:19px;height:3px;background:var(--gold)}
#sThumb{position:absolute;top:2px;width:24px;margin-left:-12px;color:var(--gold);filter:drop-shadow(0 0 4px rgba(255,190,90,.55)) drop-shadow(2px 3px 0 rgba(0,0,0,.45))}
#sThumb svg{width:24px}
@keyframes hintthumb{0%{left:20%;opacity:0}15%{opacity:.9}70%{left:95%;opacity:.9}100%{left:95%;opacity:0}}
#slider.hint::after{content:'';position:absolute;top:6px;width:10px;height:16px;margin-left:-5px;background:#eafff0;opacity:.8;animation:hintthumb 2.2s steps(22) infinite;box-shadow:0 0 6px rgba(234,255,240,.6)}
@keyframes hintbtn{0%,100%{box-shadow:0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line)}50%{box-shadow:0 -3px 0 #eafff0,0 3px 0 #eafff0,-3px 0 0 #eafff0,3px 0 0 #eafff0}}
.tool.hint{animation:hintbtn 1.2s steps(2) infinite;color:#eafff0}
#slider:focus-visible{outline:2px solid var(--ghost);outline-offset:3px}
/* pads */
#padL{grid-area:padl;justify-self:start;align-self:end;display:flex;gap:14px;padding:3px}
#padR{grid-area:padr;justify-self:end;align-self:end;padding:3px}
.pad{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:0;cursor:pointer;color:var(--text);
box-shadow:inset 0 3px 0 rgba(255,236,200,.05),0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line),0 8px 0 rgba(0,0,0,.45)}
.pad svg{width:26px}
#pJ svg{width:32px}
.pad.on{transform:translateY(4px);color:var(--gold);background:var(--panel2);
box-shadow:0 -3px 0 var(--gold),0 3px 0 var(--gold),-3px 0 0 var(--gold),3px 0 0 var(--gold),0 4px 0 rgba(0,0,0,.45)}
#pJ{width:88px;height:80px}
#keys{grid-area:keys;display:none;font-size:12px;color:var(--muted);line-height:1.6;text-align:center}
body.nopad #padL,body.nopad #padR{display:none}
body.nopad #keys{display:block}
body.nopad #mid{grid-template-areas:"stage stage" "lamp lamp" "keys keys"}
@media (orientation:landscape) and (max-height:560px){
body:not(.nopad) #mid{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"padl stage padr" "padl lamp padr"}
body:not(.nopad) #padL{flex-direction:column-reverse;gap:8px}
.pad{width:62px;height:62px}
#pJ{width:74px;height:74px}
}
body.is-title #stageWrap::after{opacity:.5}
body.is-title #hud,body.is-title #lamp,body.is-title #padL,body.is-title #padR,body.is-title #keys,
body.is-ending #hud,body.is-ending #lamp,body.is-ending #padL,body.is-ending #padR,body.is-ending #keys{display:none}
body.is-title #stageArea{padding:clamp(130px,33vh,320px) 0 clamp(120px,24vh,220px);align-items:center} /* top: room for the pixel logo ( js/title-logo.js fits it to the space above the stage ) */
body.is-ending #stageArea{align-items:flex-start;padding:4px 0 min(44vh,330px)}
body.dock.is-title #mid,body.dock.is-ending #mid{grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"stage stage" "lamp lamp" "padl padr"}
/* overlays */
#ov{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);background:rgba(12,6,3,.74)}
#ov.show{display:flex}
#ov.clear-bg{background:rgba(12,6,3,.3)}
#ov.title-bg{background:transparent}
#ov.inter-bg{background:#0a0503}
#ov.end-bg{background:transparent;align-items:flex-end}
.screen{display:none;width:min(400px,100%);max-height:100%;overflow:auto;background:var(--panel);border:0;box-shadow:0 -4px 0 var(--line),0 4px 0 var(--line),-4px 0 0 var(--line),4px 0 0 var(--line),8px 12px 0 rgba(0,0,0,.5);padding:22px 20px 16px;text-align:center}
.screen.on{display:block}
.screen h2{margin:0 0 14px;font-weight:normal;font-size:20px;color:var(--gold)}
.pbtn{display:block;width:calc(100% - 6px);margin:12px auto;padding:12px 10px;font-size:17px;background:var(--panel2);border:0;cursor:pointer;box-shadow:0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line),0 6px 0 rgba(0,0,0,.45)}
.pbtn.primary{background:var(--gold);color:var(--gold-ink);box-shadow:0 -3px 0 #ffd58a,0 3px 0 #b97a24,-3px 0 0 #e09a3a,3px 0 0 #e09a3a,0 6px 0 rgba(0,0,0,.45)}
.pbtn:active{transform:translateY(3px)}
.row2{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.row2>[hidden]{display:none}
.row2 .pbtn{margin:4px 0}
#sTitle.on{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:auto;max-height:none;overflow:hidden;pointer-events:none;background:transparent;border:0;box-shadow:none;
padding:calc(env(safe-area-inset-top,0px) + 22px) 16px calc(env(safe-area-inset-bottom,0px) + 18px)}
#sTitle .t-top,#sTitle .t-bottom{pointer-events:auto;width:min(420px,100%)}
#sTitle .t-top{width:min(560px,100%)}
#sTitle .lead{max-width:22em}
/* title logo: a pixel canvas ( js/title-logo.js ) that casts its own shadow. the canvas is larger than the box
by a margin for the shadow and the glow, and hangs out of it on every side */
.logo{display:flex;flex-direction:column;align-items:center}
.logo-mark{position:relative;margin:0 auto;width:192px;height:116px;font-size:inherit;font-weight:normal}
#logoCvs{position:absolute;left:-16px;top:-16px;display:block;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
.logo .en{margin:10px 0 0;font-size:13px;letter-spacing:.5em;padding-left:.5em;color:var(--gold);opacity:0;transition:opacity .5s steps(4)}
.logo.lit .en{opacity:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the buttons and the footer come up after the logo has landed ( --intro is set by title-logo.js ) */
@keyframes tIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#sTitle.on .t-btns,#sTitle.on .note,#sTitle.on .t-foot{animation:tIn .4s steps(4) var(--intro,1.2s) both}
#sTitle.on .t-foot{animation-delay:calc(var(--intro,1.2s) + .15s)}
.t-btns{display:flex;flex-direction:column;align-items:center}
.t-foot{margin:14px 0 0;font-size:11px;letter-spacing:.06em;line-height:1.7;color:var(--muted);text-shadow:1px 1px 0 var(--frame)}
.t-foot p{margin:0}
.t-foot a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(245,226,191,.3);padding:2px 1px}
.t-foot a:hover,.t-foot a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.t-foot a:focus-visible{outline:2px solid var(--ghost);outline-offset:2px}
.lead{margin:16px auto 0;max-width:22em;font-size:14px;line-height:1.8;color:var(--text);text-shadow:1px 1px 0 var(--frame)}
.note{margin:12px 0 0;font-size:13px;color:var(--muted);min-height:1em}
.note svg{display:inline-block;width:10px;height:auto;vertical-align:-1px;margin-right:6px;color:var(--text)}
#sTitle .pbtn{width:220px;max-width:100%;margin:8px auto;padding:8px 10px;font-size:15px}
#sTitle .note{margin-top:8px}
@media (max-height:560px){body.is-title #stageArea{padding:108px 0 84px}#sTitle.on{padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}.logo .en{display:none}#sTitle .lead,#sTitle .note{display:none}#sTitle .t-btns{flex-direction:row;justify-content:center;gap:12px}#sTitle .t-btns .pbtn{margin:4px 0;width:auto;padding:7px 16px}.t-foot{margin-top:8px}.logo .en{margin-top:6px;font-size:11px}}
@media (prefers-reduced-motion: reduce){#sTitle.on .t-btns,#sTitle.on .note,#sTitle.on .t-foot{animation:none}.logo .en{transition:none}}
.chap{margin:4px 0 16px;text-align:left}
/* the world map */
#sSelect{width:min(460px,100%);padding:10px;display:none;flex-direction:column;gap:10px;overflow:hidden}
#sSelect.on{display:flex}
#mapScroll{overflow-y:auto;max-height:calc(100dvh - 230px);min-height:200px;scrollbar-width:thin;background:#060403;box-shadow:0 0 0 3px #1a0e08,0 0 0 5px var(--line)}
#mapBox{position:relative;width:100%;aspect-ratio:240/440}
#mapCvs{width:100%;height:100%;display:block;image-rendering:pixelated}
.mnode{position:absolute;transform:translate(-50%,-62%);width:12%;aspect-ratio:1;padding:0;border:0;cursor:pointer;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;--fl:#ffb347;--core:#fff3c8}
.mnode i{display:block;width:34%;height:46%;background:radial-gradient(ellipse at 50% 72%,var(--core) 0 22%,var(--fl) 38%,rgba(0,0,0,0) 66%);clip-path:polygon(50% 0,72% 38%,82% 70%,62% 100%,38% 100%,18% 70%,28% 38%);filter:drop-shadow(0 0 4px var(--fl));animation:mflick .45s steps(2) infinite}
.mnode b{font-size:clamp(9px,2.5vw,11px);line-height:1;color:#f3e4c0;text-shadow:0 1px 0 #000,0 0 3px #000;font-weight:bold}
.mnode:not(.done):not(.next) i{width:18%;height:18%;border-radius:50%;clip-path:none;background:#8a3a22;filter:drop-shadow(0 0 3px #c0502a);animation:none;opacity:.9}
.mnode:not(.done):not(.next) b{color:#a8927a}
.mnode.a2{--fl:#e8d070}.mnode.a3{--fl:#a8f0b8;--core:#f0fff4}.mnode.a4{--fl:#ff8aa0;--core:#fff0f2}
.mnode.next i{width:40%;height:54%;animation:mflick .3s steps(2) infinite}
.mnode.locked{cursor:default}
.mnode.locked b{color:#6e5c4c}
.mnode.shake{animation:mshake .35s steps(4)}
@keyframes mshake{25%{transform:translate(calc(-50% - 3px),-62%)}75%{transform:translate(calc(-50% + 3px),-62%)}}
.mnode.mend{width:14%}
.mnode.sel b{color:#fff;background:rgba(0,0,0,.55);padding:1px 3px}
@keyframes mflick{50%{transform:translateX(1px) scaleY(1.08)}}
.mdeco{position:absolute;transform:translate(-50%,0);display:flex;gap:1px;pointer-events:none}
.mdeco i{display:block;width:4px;height:5px;background:#e8a33c;clip-path:polygon(50% 0,100% 60%,50% 100%,0 60%);filter:drop-shadow(0 0 2px #e8a33c)}
.mdeco i.off{background:rgba(240,220,180,.18);filter:none}
.mfrag{position:absolute;transform:translate(-10%,-110%);width:8px;height:9px;background:#fffaf0;box-shadow:0 0 0 1px #2a1a10,0 0 5px 1px rgba(255,210,120,.8);pointer-events:none}
.mlabel{position:absolute;transform:translate(-50%,-50%);padding:2px 7px 3px;background:rgba(20,12,8,.8);color:#c8b48c;box-shadow:0 0 0 1px rgba(200,170,120,.25);font-size:clamp(9px,2.5vw,12px);white-space:nowrap;pointer-events:none;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.mlabel small{opacity:.75;margin-left:4px}
#mapCard{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--panel2);text-align:left}
#mcTop{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#mcId{color:var(--gold);font-weight:normal;font-size:13px}
#mcName{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mcInfo{display:flex;align-items:center;gap:6px}
#mcInfo .flames svg{width:12px}
#mcGo{flex:none;width:auto;padding:10px 16px;margin:0}
#mapBtns{display:flex;gap:10px}
#mapBtns .pbtn{margin:0;flex:1}
.chap h3{margin:0 0 8px;font-weight:normal;font-size:15px;color:var(--text)}
.chap h3 small{font-size:12px;color:var(--muted);margin-left:8px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sbtn{padding:9px 2px 7px;background:var(--panel2);border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:3px;box-shadow:0 -3px 0 var(--line),0 3px 0 var(--line),-3px 0 0 var(--line),3px 0 0 var(--line),0 6px 0 rgba(0,0,0,.45)}
.sbtn .n{font-size:17px;color:var(--gold)}
.sbtn .t{font-size:10px;color:var(--muted);line-height:1.3;word-break:keep-all}
.sbtn:active{transform:translateY(3px)}
.flames{display:flex;gap:3px;justify-content:center;align-items:center}
.flames svg{width:9px;height:12px;shape-rendering:crispEdges}
.flames .on{fill:var(--gold)}
.flames .off{fill:var(--line)}
#cFlames svg{width:22px;height:28px}
#cFlames{gap:8px;margin:12px 0 8px}
#cName{font-size:15px;color:var(--muted)}
#cHead{font-size:26px;color:var(--gold);margin:0 0 4px}
#cInk{font-size:14px;margin:0 0 10px}
#cFrag{display:none;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;font-size:14px;color:var(--muted)}
#cFrag.on{display:flex}
#cFrag svg{width:13px;height:auto;color:var(--line)}
#cFrag svg.got{color:var(--text)}
#cFrag.new span{color:var(--text)}
#sEnd{background:rgba(20,10,6,.88);padding:16px 18px 12px}
@media (prefers-reduced-motion: reduce){.curtain{transition:none}}