:root{--bg:#1b1f2e;--panel:#2a2f46;--panel2:#343a57;--edge:#0e1120;--hi:#4b5277;--text:#f4efe4;--muted:#a8acc4;--red:#d8402f;--red2:#9c2a1e;--gold:#f2c443;--green:#5cbd4a;--wood:#7a4f2e;--hud:48px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:'DotGothic16','Hiragino Kaku Gothic ProN','Noto Sans JP',monospace;font-size:14px;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges}
kbd,small{font-family:inherit}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:1440px;margin:auto}
/* HUD */
.hud{height:var(--hud);flex:none;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--wood);border-bottom:4px solid var(--edge);box-shadow:inset 0 -3px 0 #5a3a20,inset 0 3px 0 #9c6a3e}
.back{color:var(--text);text-decoration:none;width:28px;height:28px;display:grid;place-items:center;background:#5a3a20;box-shadow:inset 2px 2px 0 #9c6a3e,inset -2px -2px 0 #3a2410}
.logo{margin:0;font-size:15px;font-weight:400;white-space:nowrap;letter-spacing:1px}.logo b{color:var(--gold);font-weight:400;font-size:18px;text-shadow:2px 2px 0 var(--red2)}
.stats{display:flex;gap:6px;margin:0 0 0 auto;min-width:0}
.stats div{background:#3a2410;padding:2px 8px;min-width:64px;box-shadow:inset 2px 2px 0 #2a1808,inset -2px -2px 0 #9c6a3e}
.stats dt{font-size:9px;color:#e0c49a;letter-spacing:1px}.stats dd{margin:0;font-size:14px;white-space:nowrap}
#rep{color:var(--gold)}#money.debt{color:#ff8a7a}
.hud-buttons{display:flex;gap:6px}
.hud-button{width:34px;height:30px;background:#5a3a20;border:0;box-shadow:inset 2px 2px 0 #9c6a3e,inset -2px -2px 0 #3a2410;display:grid;place-items:center;line-height:1;font-size:14px}
.hud-button small{font-size:8px}
/* Stage */
.stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,26vw,320px);gap:8px;padding:8px}
.scene{position:relative;min-width:0;min-height:0;display:grid;place-items:center;background:#11131d;border:4px solid var(--edge);box-shadow:inset 0 0 0 2px var(--hi)}
#shop{display:block;cursor:pointer;touch-action:manipulation}
.time-bar{position:absolute;left:8px;right:8px;top:6px;height:6px;background:#0008;box-shadow:0 0 0 2px #0006}
.time-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f6c35a,#d8402f)}
.toast{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:#0e1120e6;border:2px solid var(--gold);padding:5px 12px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;max-width:94%;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.toast.visible{opacity:1}
/* Control panel */
.panel{min-height:0;overflow:auto;background:var(--panel);border:4px solid var(--edge);box-shadow:inset 0 0 0 2px var(--hi);padding:8px;display:flex;flex-direction:column}
.mode{display:flex;flex-direction:column;gap:8px;min-height:0}
.mode[hidden]{display:none}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px dashed var(--hi);padding-bottom:4px}
.panel-head b{font-weight:400;font-size:16px;color:var(--gold)}.panel-head span{color:var(--muted);font-size:12px}
.neta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:5px}
.neta{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 2px 3px;border:0;background:var(--panel2);box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--edge);font-size:11px;line-height:1.15}
.neta img{width:42px;height:30px}
.neta .price{font-size:10px;color:var(--muted)}
.neta .key{position:absolute;left:3px;top:2px;font-size:9px;color:var(--muted)}
.neta.active{background:#5a4a20;box-shadow:inset 2px 2px 0 var(--gold),inset -2px -2px 0 #3a2a10}
.neta:not(:disabled):active{transform:translateY(1px)}
.grip{background:#1e2236;padding:6px;box-shadow:inset 0 0 0 2px var(--hi)}
.grip[hidden]{display:none}
.grip-top{display:flex;align-items:center;gap:6px;margin-bottom:6px}.grip-top img{width:42px;height:30px}.grip-top span{flex:1}
.mini{border:0;background:var(--panel2);width:26px;height:26px;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--edge)}
.gauge{position:relative;height:18px;background:#5a2a2a;box-shadow:0 0 0 2px var(--edge);margin:0 4px 8px}
.zone{position:absolute;top:0;bottom:0;left:50%}
.zone.normal{background:#8a7a3a}.zone.good{background:#5c9a3a}.zone.great{background:#f2c443}
.gauge b{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 2px var(--edge)}
.press,.primary{border:0;background:var(--red);padding:10px 8px;font-size:17px;box-shadow:inset 3px 3px 0 #f07a64,inset -3px -3px 0 var(--red2);display:flex;justify-content:center;align-items:baseline;gap:8px;width:100%}
.press small,.primary small,.reg-buttons small{font-size:9px;opacity:.8}
.press:active,.primary:active{box-shadow:inset 3px 3px 0 var(--red2),inset -3px -3px 0 #f07a64}
.checkout-box{margin-top:auto;padding-top:6px;border-top:2px dashed var(--hi)}
.checkout-box .label{font-size:12px;color:var(--muted)}
.checkout-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;min-height:30px}
.checkout-list:empty::after{content:'いまはなし';color:#6a6e88;font-size:12px;align-self:center}
.call{border:0;background:var(--red);padding:4px 7px;font-size:12px;box-shadow:inset 2px 2px 0 #f07a64,inset -2px -2px 0 var(--red2);animation:blink 1s steps(2) infinite}
.call.late{background:#7a1a12}
@keyframes blink{50%{filter:brightness(1.3)}}
/* Register */
.pile-button{border:0;padding:6px;background:#3a2a1a;box-shadow:inset 2px 2px 0 #6a4a2a,inset -2px -2px 0 #1a1008}
.pile-button canvas{display:block;width:100%;height:auto}
.pile-hint{margin:0;font-size:11px;color:var(--muted);text-align:center}
.register-screen{background:#1d3a2a;color:#9cf09a;padding:6px 8px;box-shadow:inset 0 0 0 2px #0e1a12;font-size:12px;min-height:84px;display:flex;flex-direction:column}
.reg-lines{flex:1}.reg-lines div{display:flex;justify-content:space-between;gap:6px}
.reg-total{display:flex;justify-content:space-between;border-top:1px dashed #5c9a5a;margin-top:4px;padding-top:3px}.reg-total b{font-weight:400;font-size:17px;color:#d8ffd0}
.reg-buttons{display:flex;flex-direction:column;gap:6px}
.reg-buttons>button:not(.primary){border:0;background:var(--panel2);padding:7px;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--edge);display:flex;justify-content:center;gap:8px;align-items:baseline}
/* Dialogs */
.overlay{position:fixed;inset:0;background:#0b0d16cc;display:grid;place-items:center;padding:12px;z-index:10}
.overlay.hidden{display:none}
.dialog{width:min(640px,100%);max-height:calc(100dvh - 24px);overflow:auto;background:var(--panel);border:4px solid var(--edge);box-shadow:inset 0 0 0 3px var(--hi),8px 8px 0 #0006;padding:18px}
.dialog h2{margin:0 0 8px;font-weight:400;font-size:22px;color:var(--gold);text-shadow:2px 2px 0 var(--red2)}
.dialog p{line-height:1.6;margin:6px 0}
.eyebrow{font-size:11px;color:var(--muted);letter-spacing:2px}
.title-art{display:flex;justify-content:center;gap:6px;margin:6px 0 10px}.title-art img{width:56px;height:40px}
.dialog .primary{margin-top:10px}
.dialog-foot{position:sticky;bottom:-18px;margin:8px -18px -18px;padding:0 18px 14px;background:var(--panel);box-shadow:0 -6px 8px -4px #0008}
.dialog-foot .sub{margin-top:4px}
.sub{border:0;background:var(--panel2);padding:8px;width:100%;margin-top:6px;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--edge)}
.tabs{display:flex;gap:4px;margin:8px 0;flex-wrap:wrap}
.tab{border:0;background:var(--panel2);padding:6px 10px;box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--edge)}
.tab.selected{background:#5a4a20;box-shadow:inset 2px 2px 0 var(--gold),inset -2px -2px 0 #3a2a10}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:#1e2236;padding:6px 8px;box-shadow:inset 0 0 0 2px var(--hi)}
.row img{width:42px;height:30px}
.row .info b{font-weight:400}.row .info small{display:block;color:var(--muted);font-size:11px;line-height:1.4}
.row.locked{opacity:.6}
.stepper{display:flex;align-items:center;gap:4px}.stepper button{border:0;width:32px;height:30px;background:var(--panel2);box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--edge);font-size:16px}
.stepper output{min-width:58px;text-align:center;font-size:16px}
.buy{border:0;background:#3a7a3a;padding:6px 10px;box-shadow:inset 2px 2px 0 #6ab06a,inset -2px -2px 0 #1e4a1e;white-space:nowrap}
.tag{font-size:11px;padding:1px 5px;background:#0e1120;color:var(--muted)}
.cheap{color:#9cf09a}.pricey{color:#ff9a8a}
.money-line{display:flex;justify-content:space-between;align-items:center;background:#3a2410;padding:6px 10px;margin-top:4px}
.money-line b{font-weight:400;font-size:18px;color:var(--gold)}
.manage-top{display:flex;align-items:center;gap:12px}.manage-top h2{margin:0}.manage-top .money-line{flex:1;margin:0}
.report{display:grid;grid-template-columns:1fr auto;gap:2px 16px;background:#1d3a2a;color:#c8f0c0;padding:10px 12px;box-shadow:inset 0 0 0 2px #0e1a12}
.report span:nth-child(even){text-align:right}
.report .total{border-top:1px dashed #5c9a5a;padding-top:4px;margin-top:2px;font-size:18px;color:#fff}
.report .minus{color:#ffb0a0}
.help{line-height:1.7;margin:0;padding-left:1.2em}
.help li{margin:3px 0}
.rotate-hint{display:none}
/* Compact landscape phones */
@media (max-height:500px){
 :root{--hud:36px}
 html,body{font-size:12px}
 .hud{gap:6px;padding:0 6px;border-bottom-width:3px}
 .logo{display:none}
 .stats{gap:3px;margin-left:0;flex:1}.stats div{min-width:0;flex:1;padding:1px 5px}.stats dt{font-size:8px}.stats dd{font-size:12px}
 .hud-button{width:30px;height:26px}
 .stage{padding:4px;gap:4px;grid-template-columns:minmax(0,1fr) clamp(150px,27vw,240px)}
 .scene,.panel{border-width:3px}
 .panel{padding:5px}.mode{gap:5px}
 .panel-head b{font-size:14px}
 .neta-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:3px}
 .neta{font-size:10px;padding:2px 1px}.neta img{width:28px;height:20px}.neta .key{display:none}
 .grip{padding:4px}.grip-top{margin-bottom:4px}.grip-top img{width:28px;height:20px}
 .press,.primary{padding:7px;font-size:15px}
 .register-screen{min-height:60px;font-size:11px}
 .pile-hint{font-size:10px}
 .dialog{padding:12px}.dialog h2{font-size:18px}
 .dialog .eyebrow{font-size:10px}.tabs{margin:5px 0}.tab{padding:4px 8px}.row{padding:3px 6px;gap:8px}.row img{width:28px;height:20px}.money-line{padding:3px 8px}.money-line b{font-size:15px}
 .panel-head{order:-3}.checkout-box{order:-2;margin-top:0;padding:0 0 4px;border-top:0;border-bottom:2px dashed var(--hi)}.checkout-list{min-height:0}.grip{order:-1}
 .dialog-foot{bottom:-12px;margin:6px -12px -12px;padding:0 12px 8px;display:flex;gap:6px}.dialog-foot .primary{margin-top:6px;flex:2}.dialog-foot .sub{margin-top:6px;flex:1}
}
@media (max-width:700px) and (orientation:portrait){
 .rotate-hint{display:grid;place-items:center;align-content:center;gap:8px;position:fixed;inset:0;background:var(--bg);z-index:20;text-align:center}
 .rotate-hint span{font-size:48px;color:var(--gold)}
}
@media (max-width:900px) and (min-height:501px){
 .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr}
 .scene{aspect-ratio:16/9}
 .logo{display:none}
}