:root{--bg:#000;--fg:#fcfcfc;--gold:#f8d838;--blue:#0000a8;--dim:#7c7c7c;--red:#d82800;--u:3px;
--f:'DotGothic16','Hiragino Kaku Gothic ProN','Yu Gothic',monospace;
--notch:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
*{box-sizing:border-box}
html,body{margin:0;background:#000;color:var(--fg);font-family:var(--f);overflow-x:hidden}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;font-size:16px;line-height:1.7}
button{font-family:inherit;color:inherit;cursor:pointer}
a{color:var(--gold)}
.win{background:#000;position:relative;border:5px double var(--fg);clip-path:var(--notch);padding:6px 12px}
#bar{width:100%;max-width:1100px;display:flex;gap:8px;align-items:center;padding:8px 14px;font-size:13px;flex-wrap:wrap}
#bar .ttl{flex:1;text-align:center;color:var(--dim);letter-spacing:.1em}
#bar .back{white-space:nowrap}
#bar button{background:#000;border:2px solid var(--fg);padding:2px 10px;font-size:13px;line-height:1.6}
#bar button:hover,#bar button:focus-visible{background:var(--fg);color:#000;outline:0}
#game{position:relative;width:100%;max-width:1100px;padding:8px 14px 28px;display:flex;flex-direction:column;align-items:center}
#stagebox{position:relative;width:calc(var(--u)*256)}
#screen{position:relative;width:calc(var(--u)*256);height:calc(var(--u)*144);background:#000;overflow:hidden;box-shadow:0 0 0 4px #000,0 0 0 8px var(--fg),0 0 0 12px #000}
#view{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated}
#screen.crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:7;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.55) 100%)}
#screen.crt #view{border-radius:5% / 7%;filter:saturate(1.15) contrast(1.06)}
#screen.crt{border-radius:5% / 7%}
#boot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:8}
#boot[hidden]{display:none}
#banner{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*3);background:rgba(0,0,0,.82);border:2px solid var(--fg);padding:2px 10px;font-size:max(11px,calc(var(--u)*4));line-height:1.5;z-index:2}
#banner .b1{display:block;color:var(--gold)}
#banner .b2{display:block;font-size:.85em}
#ename{position:absolute;left:50%;top:calc(var(--u)*3);transform:translateX(-50%);padding:2px 12px;z-index:2;display:flex;gap:10px;align-items:center;white-space:nowrap;font-size:max(11px,calc(var(--u)*4.2));border-width:4px}
#ename[hidden]{display:none}
#ename.true .nm{color:#ff6040}
.gauge{display:block;width:calc(var(--u)*34);height:10px;border:2px solid var(--fg);background:#000}
.gauge i{display:block;height:100%;background:#00a800;transition:width .4s steps(8)}
#ename.true .gauge i{background:#d82800}
#party{position:absolute;right:calc(var(--u)*5);top:calc(var(--u)*5);padding:4px 10px;font-size:13px;line-height:1.35;z-index:3;background:rgba(0,0,0,.92);border-width:5px}
#party[hidden]{display:none}
#party .row{display:flex;gap:8px;white-space:pre}
#party .n{min-width:5.2em}
#party .lv{min-width:4.6em;color:var(--dim)}
#party .low b{color:var(--red)}
#party .row.hurt b{color:var(--red)}
#party .row.hurt{animation:hurtrow .24s steps(2) 3}
#party .row.new{animation:newrow .3s steps(2) 3}
@keyframes hurtrow{50%{background:rgba(216,40,0,.45)}}
@keyframes newrow{50%{background:rgba(248,216,56,.55);color:#000}}
#party b{font-weight:400;color:var(--fg)}
#face{position:absolute;left:calc(var(--u)*4);bottom:calc(var(--u)*4);width:calc(var(--u)*36);height:calc(var(--u)*39);image-rendering:pixelated;padding:0;z-index:2;background:#000;border-width:4px}
#face[hidden]{display:none}
#lvwin{position:absolute;left:calc(var(--u)*8);top:calc(var(--u)*34);z-index:4;font-size:max(12px,calc(var(--u)*5));line-height:1.5;padding:6px 14px;min-width:calc(var(--u)*56)}
#lvwin[hidden]{display:none}
#lvwin div{color:var(--gold);white-space:pre}
#roll{position:absolute;inset:0;z-index:3;overflow:hidden;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55))}
#roll[hidden]{display:none}
#roll .in{position:absolute;left:0;right:0;top:0;padding:0 8%;text-align:center;will-change:transform}
#roll p{margin:0 0 calc(var(--u)*9);font-size:max(12px,calc(var(--u)*4.6));line-height:1.7;text-shadow:2px 2px 0 #000;white-space:pre-wrap}
#roll p.ttl{color:var(--gold);font-size:max(15px,calc(var(--u)*7))}
#roll p.note{color:#c8c8c8;font-size:max(10px,calc(var(--u)*3.4))}
#msgwrap{position:relative;width:calc(var(--u)*256);margin-top:22px}
#msg{min-height:7.6em;padding:10px 18px;font-size:max(15px,calc(var(--u)*4.5));line-height:1.75}
#msgtext{margin:0;white-space:pre-wrap;word-break:break-all}
#arrow{position:absolute;right:16px;bottom:4px;visibility:hidden;color:var(--fg)}
#arrow.on{visibility:visible;animation:bl .7s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
#cmd{position:absolute;right:calc(var(--u)*5);bottom:calc(100% + var(--u)*6 + 10px);min-width:210px;max-width:min(560px,70%);padding:8px 14px;z-index:4;display:flex;flex-direction:column}
#cmd[hidden]{display:none}
#cmd.wide{min-width:340px}
#cmd.two{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.opt{display:flex;gap:6px;align-items:baseline;text-align:left;background:none;border:0;padding:3px 4px;font-size:17px;line-height:1.5}
.opt .cur{visibility:hidden;color:var(--fg);width:1em}
.opt.sel .cur{visibility:visible;animation:bl .6s steps(2) infinite}
.opt.sel{color:var(--gold)}
.opt.dis{color:var(--dim)}
body[data-state=end] #cmd{position:static;margin:14px 0 0;max-width:none;min-width:0;width:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
body[data-state=end] #cmd.wide{min-width:0}
#jumon,#namewin{position:absolute;left:50%;top:calc(var(--u)*72 + 8px);transform:translate(-50%,-50%);z-index:6;display:flex;gap:8px;flex-wrap:wrap;width:min(520px,92%);justify-content:center}
#jumon[hidden],#namewin[hidden]{display:none}
#nameLead{flex:1 1 100%;margin:0 0 4px;text-align:center}
#jumon input,#namewin input{flex:1 1 100%;background:#000;color:var(--fg);border:2px solid var(--fg);font:inherit;font-size:20px;padding:4px 8px;letter-spacing:.1em}
#jumon button,#namewin button{background:#000;border:2px solid var(--fg);padding:2px 14px;font-size:15px}
#jumon button:hover,#namewin button:hover{background:var(--fg);color:#000}
#book{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:50;display:flex;align-items:center;justify-content:center;padding:18px}
#book[hidden]{display:none}
.bookwin{width:min(820px,100%);max-height:100%;display:flex;flex-direction:column;padding:12px 18px}
.bookhead{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.bookhead button{background:#000;border:2px solid var(--fg);padding:2px 10px;font-size:13px}
.bookhead button:hover,.bookhead button:focus-visible{background:var(--fg);color:#000;outline:0}
#bookBody{overflow:auto;flex:1;padding-right:6px;font-size:15px;line-height:1.8;min-height:0}
#bookBody h2{font-size:16px;color:var(--gold);margin:1.2em 0 .2em;font-weight:400}
#bookBody p{margin:.2em 0;white-space:pre-wrap}
.booklinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:15px}
body.book-open{overflow:hidden}
noscript{display:block;max-width:760px;padding:14px 18px;margin:12px auto;border:2px solid var(--fg);font-size:15px}
noscript h2{color:var(--gold);font-weight:400;font-size:16px;margin:1.2em 0 .2em}
noscript p{margin:.2em 0;white-space:pre-wrap}
@media (max-width:720px){
 body{font-size:15px;min-height:100vh;min-height:100dvh}
 #bar{padding:4px 10px;gap:6px;font-size:12px}
 #bar::after{content:"";flex:1 1 100%;order:2;height:0}
 #bar .ttl{display:none}
 #bar .back{flex:1 1 auto;order:0}
 #bar #btnSkip{order:1}
 #bar #btnSound,#bar #btnSpeed,#bar #btnCrt{order:3;flex:1 1 0}
 #bar button{font-size:12px;padding:6px 4px;line-height:1.4}
 #game{padding:6px 10px calc(16px + env(safe-area-inset-bottom))}
 #party{position:static;margin:10px 0 0;width:100%;font-size:11px;line-height:1.25;padding:3px 8px;background:#000}
 #party .row{gap:5px}
 #party .n{min-width:4.6em}
 #msgwrap{width:100%;max-width:calc(var(--u)*256 + 24px);margin-top:10px}
 #msg{min-height:6.2em;line-height:1.6;padding:8px 10px;font-size:15px}
 #arrow{right:10px;bottom:2px}
 #cmd{position:static;margin:10px 0 0;max-width:none;min-width:0;width:100%;padding:6px 8px;display:grid;grid-template-columns:1fr 1fr;column-gap:8px}
 #cmd.wide{min-width:0;display:flex;flex-direction:column}
 body[data-state=end] #cmd.wide{display:flex}
 .opt{font-size:16px;padding:9px 4px;min-height:44px;align-items:center}
 #jumon,#namewin{width:94%;top:calc(var(--u)*72 + 6px)}
 #jumon input,#namewin input{font-size:18px;padding:8px}
 #jumon button,#namewin button{padding:8px 14px;min-height:44px}
 #roll p{margin-bottom:calc(var(--u)*8)}
}
@media (prefers-reduced-motion:reduce){#arrow.on,.opt.sel .cur,#party .row.hurt,#party .row.new{animation:none}.gauge i{transition:none}}