/* Same chrome as the Martian Base / World Dungeon sprite pages: monospace, square 2px borders, acid green on space black. */
*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#07040f;--panel:#0e0820;--soft:#1a0f33;--line:#26a51f;--acc:#9dff4a;--pink:#ff6fb5;--cyan:#4fe0ff;--yellow:#ffc21a;--red:#ff7a6a;--text:#eef2fa;--dim:#8a93a8}
html,body{margin:0;background:var(--bg);color:var(--text);font:13px/1.45 monospace}
button{font:inherit;font-weight:700;letter-spacing:1px;cursor:pointer;color:var(--acc);background:var(--panel);border:2px solid var(--line);border-radius:0;padding:8px 12px;min-height:38px}
button:hover{background:#155c17;color:#dcffa8}
button:disabled{opacity:.4;cursor:not-allowed}
button:focus-visible,canvas:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
[hidden]{display:none!important}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.game{margin:auto;padding:0 24px 24px}
/* Header: the title, the shop's tabs and, quieter on the right, the tools; under it, one bar of counters. */
header{padding:12px 0;border-bottom:2px solid var(--line);margin-bottom:14px}
header .bar{display:flex;align-items:center;gap:16px}
.tools{display:flex;gap:6px;margin-left:auto}
.tool{font-size:11px;font-weight:400;padding:4px 10px;min-height:30px;color:var(--dim);border-color:var(--soft);background:transparent}
.tool:hover{color:var(--acc);border-color:var(--line);background:var(--panel)}
select.tool{font:inherit;font-size:11px;letter-spacing:1px;cursor:pointer;border:2px solid var(--soft);border-radius:0}select.tool option{background:var(--panel);color:var(--acc)}
.sound[aria-pressed="false"]{text-decoration:line-through;opacity:.55}
h1{white-space:nowrap}.tool .short{display:none}
h1{font-size:18px;letter-spacing:2px;color:var(--acc);margin:0;line-height:0}
/* The neon sign and the tabs are drawn (infobar.mjs); their text stays for screen readers. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h1 canvas,nav canvas{display:block}
/* The counters are drawn on an LED display (infobar.mjs drawHud); the HTML ones stay for screen readers. */
#hudled{display:block;margin-top:12px}
.hud{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);display:grid;grid-template-columns:repeat(6,1fr);margin-top:12px;border:2px solid var(--soft);background:var(--panel)}
.hud>div{display:flex;flex-direction:column;padding:5px 14px;border-left:1px solid var(--soft)}
.hud>div:first-child{border-left:none}.hud>.money{border-left:2px solid var(--nebula,#2a1450)}
.hud span{font-size:10px;letter-spacing:1px;color:var(--dim)}
.hud strong{font-size:17px;line-height:1.4;color:var(--acc);white-space:nowrap}
#clock{color:var(--cyan)}#wallet{color:var(--yellow)}#rep{color:var(--pink)}
.room{position:relative;border:2px solid var(--soft);background:#030208;overflow:hidden}
.room canvas{display:block}
.dialogue{position:absolute;right:2%;top:5%;width:30%;max-width:380px;display:flex;gap:10px;align-items:flex-start;background:#07040fee;border:2px solid var(--line);padding:8px 10px}
.dialogue canvas{flex:none;background:#1a0f33;border:1px solid #2a1450}
.dialogue span{display:block;color:var(--acc);font-size:11px;font-weight:bold;letter-spacing:1px}
.dialogue p{margin:4px 0 0;color:var(--text);line-height:1.45}
.dialogue>div{flex:1}
.patience{height:4px;margin-top:6px;background:#1a0f33}
.patience i{display:block;height:100%;width:100%;background:var(--acc)}
.patience i.mid{background:var(--yellow)}.patience i.low{background:var(--red)}
nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
nav button,nav button:hover{padding:0;min-height:0;border:none;background:none;line-height:0}
/* The pinned bulletin and the till’s LED display share one row under the shop. */
.infobar{display:flex;gap:10px;align-items:flex-start;margin:12px 0}
/* Both are drawn (infobar.mjs): the pinned bulletin is a button, the LED display keeps its text for screen readers. */
.bulletin{flex:none;padding:0;min-height:0;border:none;background:none;line-height:0}
.bulletin:hover{background:none}
.infobar canvas{display:block}
.led{flex:1}
.desk-scroll{width:100%;overflow:auto;overscroll-behavior-x:contain;background:#1c0f08;border:2px solid var(--soft)}
.desk-scroll canvas{display:block;margin:0 auto;touch-action:none;cursor:grab}
.desk-scroll canvas:active{cursor:grabbing}
.controls{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin:0;padding:8px 10px;background:var(--panel);border:2px solid var(--soft);border-top:none;font-size:11px;color:var(--dim)}
.controls b{color:var(--cyan);font-weight:400}
/* The decision buttons are drawn on the mat; these stay for keyboard and screen readers and show on focus. */
.decisions{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.decisions:focus-within{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:flex;gap:10px;padding:10px 0}
.buy{color:var(--acc);border-color:var(--line)}
.buy:hover{background:var(--acc);color:#07040f}
.buy span{margin-left:14px;color:inherit}
.reject{color:var(--red);border-color:#7a0714}
.reject:hover{background:#7a0714;color:#ffe3f1}
.status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.inventory{border:2px solid var(--soft);background:var(--panel);padding:18px;min-height:320px}
.inventory h2{font-size:14px;letter-spacing:1px;color:var(--acc);margin:0 0 12px}
.inventory>p{color:var(--dim)}
/* The shop window is drawn on a canvas; its buttons stay in the page for keyboard and screen readers and show on focus. */
.vitrine{display:flex;flex-direction:column;align-items:center}
/* With room enough, the bulletin and the LED display stand as a column on the window's left, as on the bench. */
.vitrine.with-side{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center}
.infobar.side{flex-direction:column;margin:0}.infobar.side .led{flex:none}
.vitrine.with-side .shelf-keys:focus-within{flex-basis:100%}
.vitrine canvas{display:block;cursor:default}#trophies{row-gap:14px}.vitrine canvas.hot{cursor:pointer}
.shelf-keys{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shelf-keys:focus-within{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:flex;flex-wrap:wrap;gap:8px;padding:10px 0}
.empty{padding:50px 0;text-align:center;color:var(--dim)}
.log-row{display:flex;gap:20px;border-bottom:1px solid var(--soft);padding:10px 0}
.log-row small{font-size:11px;color:var(--acc);white-space:nowrap}
.log-row p{margin:0}
#between{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px;border:2px solid var(--line);background:#0b2a0c;margin-top:14px}
#between h2{font-size:15px;color:var(--acc);margin:0 0 4px}
#between p{color:var(--dim);margin:0}
dialog{background:var(--panel);border:2px solid var(--line);color:var(--text);padding:22px;max-width:640px;width:calc(100% - 32px)}
dialog::backdrop{background:#030208d0}
dialog h2{font-size:16px;letter-spacing:1px;color:var(--acc);margin:0 0 14px}
dialog h3{font-size:13px;color:var(--yellow)}
dialog li{padding:4px 0}dialog ol{padding-left:22px}
dialog .tiny{font-size:11px;color:var(--dim)}
dialog>button{margin-top:16px;width:100%}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.summary>div{padding:10px;border:2px solid var(--soft);color:var(--dim)}
.summary b{display:block;font-size:20px;color:var(--acc);margin-top:4px}
@media(max-width:900px){
 .game{padding:0 12px 16px}header .bar{flex-wrap:wrap;gap:10px}.title{flex:1}
 .hud>div{padding:4px 8px}.hud strong{font-size:14px}
 .dialogue{position:static;width:auto;max-width:none;border-width:2px 0 0}
 .infobar{flex-wrap:wrap}
 nav{order:3;width:100%}.tools{order:2}
 .controls{justify-content:flex-start;font-size:10px}
}
@media(max-width:560px){
 .hud{grid-template-columns:repeat(3,1fr)}.hud>div:nth-child(4){border-left:none}.hud>div:nth-child(n+4){border-top:1px solid var(--soft)}.hud span{font-size:9px;white-space:nowrap}.hud strong{font-size:13px}
 .tool .long{display:none}.tool .short{display:inline}
 .stock-row{grid-template-columns:auto 1fr}.stock-row .prices{text-align:left}.stock-row>button{grid-column:1/-1}
 #between{flex-direction:column;align-items:stretch}
 .summary b{font-size:17px}
}
/* The title screen and the intro: one pixel canvas over the whole page, at a whole-number scale. */
.screen{position:fixed;inset:0;z-index:10;display:flex;overflow:auto;background:#030208}
.screen canvas{display:block;margin:auto;flex:none}
.screen canvas[hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}