:root{color-scheme:dark;--ink:#101c30;--paper:#e1d8b6;--muted:#899aa5;--orange:#df995b}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font:14px ui-monospace,'Apple SD Gothic Neo',monospace}#game{position:relative;width:100%;height:100dvh;isolation:isolate}canvas#scene{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none}button{font:inherit;color:inherit;cursor:pointer;background:#101c30cc;border:0;border-bottom:2px solid #829697;padding:10px 13px;min-height:44px;touch-action:manipulation;border-radius:0}button:hover:enabled{background:#263b49;color:#fff0bd}button:active:enabled{transform:translateY(2px)}button:disabled{opacity:.35;cursor:default}button:focus-visible{outline:2px solid #efc781;outline-offset:4px}[hidden]{display:none!important}header{position:absolute;top:max(16px,env(safe-area-inset-top));left:22px;right:22px;display:flex;gap:12px;align-items:center;pointer-events:none;font-variant-numeric:tabular-nums;text-shadow:2px 2px #101c30}header button{pointer-events:auto;background:transparent;border:0;font-size:20px;padding:4px;width:44px}#casts{flex:1;color:#a7b8bd}#wallet{margin-right:18px}#wallet.debt{color:#e3a083}#bag{position:absolute;top:70px;left:22px;background:#101c3077;border:0;display:flex;gap:10px;align-items:center;font-size:13px}#bag b{font-weight:400;color:#9bafb5}kbd{font:10px ui-monospace,monospace;color:#94a6ab;padding:2px 4px;border:1px solid #64767d;white-space:nowrap}footer{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.walk{display:flex;align-items:center;gap:5px}.walk button{width:44px;padding:8px}.walk kbd{margin-left:5px;border:0}#action{position:absolute;left:50%;transform:translateX(-50%);min-width:130px;white-space:nowrap}#action:active{transform:translate(-50%,2px)}#action.bite{color:#f1b965;border-color:#f1b965}#machine,#back{margin-left:auto}#notice{position:absolute;left:50%;bottom:80px;transform:translateX(-50%);font-size:12px;white-space:nowrap;text-shadow:2px 2px #101c30;pointer-events:none;color:#bdc5b8}#help{position:absolute;right:20px;bottom:75px;background:transparent;border:0;font-size:13px}#help-text{position:absolute;right:30px;bottom:105px;background:#101c30eb;padding:12px;font-size:12px;max-width:220px;line-height:1.8}dialog{background:#172b37;border:2px solid #91a3a0;padding:24px;box-shadow:6px 6px 0 #081321;color:var(--paper);width:470px;max-width:calc(100vw - 36px)}dialog::backdrop{background:#08132199}.dialog-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}.dialog-head h2{font-size:17px;font-weight:400;margin:0}.dialog-head span{color:#9caeaf;font-size:12px}.dialog-head button{margin-left:auto;border:0;font-size:23px;padding:0;width:35px;background:transparent}#slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.slot{border:2px solid #344d55;background:#10202b;padding:10px 4px;min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:12px}.slot canvas{width:64px;height:48px;image-rendering:pixelated}.slot.empty{border-style:dashed;opacity:.6}#bag-hint{font-size:11px;color:#91a7ab;min-height:15px;margin:18px 0 0}#ending h2{font-size:18px;font-weight:400}#receipt{font-size:13px;line-height:2.1;padding:14px 0;border-block:2px dashed #6b8080;margin:20px 0}#receipt p{display:flex;justify-content:space-between;margin:0}#restart{width:100%}#ticket{position:absolute;right:22px;top:80px;font-size:12px}.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}@media(max-width:600px){header{left:12px;right:12px;top:10px}#bag{left:10px;top:60px}footer{left:10px;right:10px;bottom:14px;gap:4px}.walk kbd,footer kbd{display:none}.walk button{width:38px;padding:5px}#action{min-width:94px;font-size:13px;padding:8px}#machine,#back{font-size:12px;padding:8px}#slots{grid-template-columns:repeat(2,1fr)}dialog{padding:18px}#notice{bottom:73px}#ticket{top:114px;right:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}button:active:enabled{transform:none}}
/* Harbor art direction: worn brass, canvas and dark sea glass. */
:root{--ink:#111f27;--paper:#d9d2ad;--muted:#829087;--orange:#ceb27b}html,body{background:var(--ink);font-size:13px}button{background:transparent;border:0;color:#b5beb0;text-shadow:1px 2px #101c22;letter-spacing:.03em}button:hover:enabled{background:#182c2ba8;color:#ede2b6}button:disabled{opacity:.26}button:focus-visible{outline:1px solid #d2bd87;outline-offset:2px}kbd{border:0;border-bottom:1px solid #70817480;color:#8e9d8e;font-size:9px;margin-left:8px}header{top:max(20px,env(safe-area-inset-top));left:28px;right:28px;opacity:.85}header button{font-size:17px}#casts{font-size:11px;letter-spacing:.16em;color:#9fafa1}#bag{left:22px;top:66px;background:transparent;font-size:11px;color:#b7bba4;gap:8px}#bag b{color:#89978a}#action{color:#d3c49a;min-width:150px;font-size:12px;background:#132724a8;box-shadow:inset 0 1px #66746155,inset 0 -1px #09171ccc;padding:9px 17px}#action.bite{color:#f1d59d;box-shadow:inset 0 -2px #b6965a;background:#263329cc}footer{left:24px;right:24px;bottom:max(22px,env(safe-area-inset-bottom))}.walk button{font-size:12px;color:#829587}.walk kbd{color:#77897b}#machine,#back{font-size:11px}#notice{font-size:11px;color:#b1b9a2;letter-spacing:.05em}#help{color:#819284}#help-text{background:#172724f2;color:#b7bca7;border:1px solid #4d6153;box-shadow:3px 3px #09181ccc}dialog{background:#303a30;border:1px solid #9b9d78;box-shadow:0 0 0 3px #1a2a25,7px 7px 0 #091819b3;padding:28px}dialog::backdrop{background:#081719bf}.dialog-head{padding-bottom:16px;border-bottom:1px solid #64725a;margin-bottom:20px}.dialog-head h2{font-size:15px;letter-spacing:.12em;color:#d8ceb0}.dialog-head span{font-size:11px;color:#9aa58d}.slot{background:#252e2a;border:1px solid #69725a;box-shadow:inset 0 0 0 2px #1c2823;min-height:126px;gap:16px;color:#c1c6aa;font-size:11px}.slot:hover:enabled{background:#3a4838;border-color:#b4aa7b}.slot.empty{border:1px solid #4e5c48;box-shadow:none;opacity:.5}.slot canvas{width:80px;height:60px}#bag-hint{color:#9aa68d}#ending{background:#c6bd97;color:#29392f;border-color:#ece0b2;text-shadow:none}#ending button{color:#29392f;text-shadow:none;border:1px solid #697457}#ending button:hover{background:#b0ac86}#receipt{border-color:#777d62}#ticket{color:#b3b89d;font-size:10px;letter-spacing:.05em}
@media(max-width:600px){header{left:13px;right:13px;top:10px}#bag{left:9px;top:57px}footer{left:8px;right:8px;bottom:max(16px,env(safe-area-inset-bottom))}#action{min-width:96px;padding:9px 12px;font-size:12px}.slot{min-height:110px}.slot canvas{width:80px;height:60px}#machine,#back{font-size:11px;padding:8px 6px}}

button svg{width:16px;height:16px;vertical-align:middle}#sound[aria-pressed="false"] svg{opacity:.45}#bag svg{width:15px;height:15px}header button{display:grid;place-items:center}

#inventory{border:3px solid #59634b;outline:1px solid #a5a180;outline-offset:-7px;background-color:#303a30;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath fill='%23434c3b' fill-opacity='.45' d='M0 0h1v1H0zM3 3h1v1H3z'/%3E%3C/svg%3E");clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}#inventory .dialog-head{border-bottom:1px dashed #798064}.slot{border-top:3px solid #7b8164;border-bottom:3px solid #1e2c24;box-shadow:inset 0 3px #15251c80}.slot.empty{border-top:3px solid #58634c;border-bottom:3px solid #253026;background:#27332a70;opacity:.75}
/* Controls belong to objects, not to a floating footer command bar. */
kbd{display:none}footer{pointer-events:none}footer .walk{pointer-events:auto}.walk{opacity:.6}.walk:hover,.walk:focus-within{opacity:1}
#action,#machine,#ticket{position:absolute;transform:none!important;margin:0;padding:0;min-width:0;min-height:44px;background:transparent!important;border:0!important;box-shadow:none!important;text-shadow:none!important;font-size:0;color:transparent!important;border-radius:0;cursor:pointer}
#action:focus-visible,#machine:focus-visible,#ticket:focus-visible{outline:1px dashed #c4b584;outline-offset:2px;background:#c4b5840a!important}
#back{position:absolute;left:25px;top:115px;bottom:auto;margin:0;width:44px;height:44px;font-size:25px;line-height:1;color:#adbaa8;background:transparent}
#game[data-view="machine"] footer,#game[data-view="machine"] #bag,#game[data-view="machine"] #help{display:none}
#machine-items{position:absolute;left:50%;bottom:3.5%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;padding:7px 15px;border-bottom:2px solid #718073;background:#101d20c9}
#machine-items button{width:68px;height:58px;padding:0;display:grid;place-items:center;background:transparent;border:0;box-shadow:none;min-height:44px}
#machine-items canvas{width:64px;height:48px;image-rendering:pixelated;pointer-events:none}
#machine-items button:hover,#machine-items button:focus-visible{background:#a3a57b20;outline:1px solid #9ba580;outline-offset:0}
@media(max-width:600px){#machine-items{gap:7px;padding:4px 6px;bottom:2%;width:auto}#machine-items button{width:56px;height:48px}#machine-items canvas{width:56px;height:42px}#back{left:8px;top:107px}}
/* Ending: a quiet way back to the gallery. */
#to-gallery{display:block;margin-top:14px;text-align:center;font-size:12px;color:#3f5144;text-underline-offset:3px}
#to-gallery:hover{color:#1d2b22}
#to-gallery:focus-visible{outline:1px solid #29392f;outline-offset:3px}
/* Touch screens: walking controls must read as controls. */
@media(hover:none){.walk{opacity:.9}.walk button{color:#c3cbb9;background:#101d20a0}}
/* Narrow screens: the back arrow sits beside the item shelf instead of over the machine. */
@media(max-width:600px){#back{top:auto;bottom:calc(2% + 2px);left:6px}}
/* Help lists one control per line. */
#help-text{white-space:pre-line}
/* Receipt: the balance, then two quiet lines about the sea. */
#receipt p.total{margin-top:8px}
#receipt p.sea{color:#4c5b48}
#receipt p.sea:first-of-type{margin-top:0}
/* Intro: a quiet title over the sky; game controls stay out of the way until he sits. */
#title-card{position:absolute;left:50%;top:18%;transform:translateX(-50%);margin:0;font-size:clamp(22px,4.2vw,44px);letter-spacing:.14em;color:#e6dcb4;text-shadow:3px 3px #0b151a;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .9s ease-out}
#game[data-phase="intro"] #title-card{opacity:1}
#game[data-phase="intro"] header,#game[data-phase="intro"] #bag,#game[data-phase="intro"] footer,#game[data-phase="intro"] #help,#game[data-phase="outro"] header,#game[data-phase="outro"] #bag,#game[data-phase="outro"] footer,#game[data-phase="outro"] #help{opacity:0;pointer-events:none}
header,#bag,footer,#help{transition:opacity .6s ease-out}
@media(prefers-reduced-motion:reduce){#title-card,header,#bag,footer,#help{transition:none}}
/* A ticket bought ahead of dawn: a quiet chip beside the wallet. */
#held-ticket{display:flex;align-items:center;gap:5px;margin-right:14px;font-size:11px;color:#d8c98f;letter-spacing:.04em}
#held-ticket svg{width:13px;height:13px}
/* HUD: the night clock on the left, ticket and wallet on the right; no sound or full-screen controls. */
#casts{font-size:12px;letter-spacing:.08em;color:#c3c9b4}
#wallet{margin-right:0}
/* Bag button: four pockets as pips, fish in sea-silver, found objects in brass. */
#bag{gap:9px;font-size:12px;color:#c9cdb5;padding:8px 10px 8px 0}
#bag svg{width:15px;height:15px}
#bag-pips{display:inline-flex;gap:3px}
#bag-pips i{display:block;width:7px;height:7px;box-shadow:inset 0 0 0 1px #7d8a78}
#bag-pips i.fish{background:#a9c2c6;box-shadow:none}
#bag-pips i.object{background:#d8c98f;box-shadow:none}
/* Bag pockets: integer-scaled icons, the name, and what tapping does. */
.slot{gap:8px;padding:12px 6px 10px;justify-content:flex-start}
.slot canvas{width:96px;height:72px;image-rendering:pixelated;background:#1c2620;box-shadow:inset 0 2px #12190f}
.slot-name{font-size:12px;color:#dcdcc4}
.slot-action{font-size:10px;letter-spacing:.08em;color:#d8c98f;border-top:1px solid #59634b;padding-top:5px;width:70%;text-align:center}
.slot.fish .slot-action{color:#a9c8cc}
.slot.empty{border:1px dashed #56604c!important;box-shadow:none;background:transparent;opacity:.7}
#bag-hint:empty{display:none}
@media(max-width:600px){.slot canvas{width:64px;height:48px}}
/* Skip: deliberate, quiet, bottom right during the intro and the ending. */
#skip{position:absolute;right:20px;bottom:max(22px,env(safe-area-inset-bottom));font-size:11px;letter-spacing:.08em;color:#b9c0aa;background:#101d20a8;padding:8px 14px;opacity:0;animation:skip-in .6s ease-out .8s forwards}
@keyframes skip-in{to{opacity:1}}
@media(prefers-reduced-motion:reduce){#skip{animation:none;opacity:1}}