:root{color-scheme:dark;--gold:#eac47d;--ink:#111c29;--muted:#94a9b4}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 35%,#263b42 0,#111c29 65%);color:#e9e4d5;font:15px/1.7 Georgia,serif}header,footer{max-width:1120px;margin:auto;padding:24px 30px;display:flex;justify-content:space-between;gap:20px;font:11px/1.6 monospace;letter-spacing:2px;color:var(--muted)}header a{color:inherit;text-decoration:none}header a:first-child{color:var(--gold)}header span{color:var(--muted)}main{max-width:900px;margin:auto;padding:0 24px}.intro{text-align:center;padding:22px 0 28px}.eyebrow{font:10px/1.7 monospace;letter-spacing:3px;color:var(--gold)}h1{font-size:clamp(32px,6vw,57px);line-height:1.1;margin:12px 0 15px;color:#f4e4bf;font-weight:normal;letter-spacing:-1px}h1 small{display:block;font-size:18px;font-style:italic;letter-spacing:1px;margin-bottom:10px}.subtitle{font:12px monospace;letter-spacing:7px;color:var(--gold)}.cabinet{max-width:772px;margin:auto;border:1px solid #a38d5a;border-radius:5px;background:#090f18;box-shadow:0 25px 80px #0005;padding:12px}.cabinet-top{display:flex;justify-content:space-between;gap:12px;padding:0 3px 10px;font:9px/1.5 monospace;letter-spacing:1px;color:var(--gold)}#status{color:var(--muted);text-align:right}canvas{display:block;width:100%;image-rendering:pixelated;background:#111c29;outline-offset:4px;touch-action:none;aspect-ratio:256/224}.toolbar{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding-top:12px}button{border:1px solid #53616a;background:#1a2935;color:#e9e4d5;border-radius:3px;padding:9px 12px;font:10px monospace;cursor:pointer}button:hover,button:active{background:#354849;border-color:var(--gold)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.below{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:24px 12px;color:#b9c7c8}.below p{margin:8px 0}.below b{color:var(--gold);font-weight:normal}.below>div:last-child{font:11px/1.9 monospace}.note{color:var(--muted)}details{font-size:13px;color:var(--muted);padding:10px 12px 30px}summary{cursor:pointer;color:var(--gold)}footer{border-top:1px solid #33424a;margin-top:15px;font-size:9px}.touch{display:flex;justify-content:space-between;align-items:center;max-width:600px;margin:18px auto 0;touch-action:none;user-select:none}.dpad{display:grid;grid-template:repeat(3,42px)/repeat(3,44px);gap:3px}.dpad button{font-size:16px;padding:0}.up{grid-area:1/2}.left{grid-area:2/1}.down{grid-area:3/2}.right{grid-area:2/3}.actions{display:flex;gap:12px;align-items:center}.actions button{width:48px;height:48px;border-radius:50%;border-color:#9c885d;font-size:15px}.actions button:first-child{width:40px;height:34px;font-size:9px;border-radius:4px}@media(pointer:fine){.touch{display:none}}@media(max-width:600px){header{padding:18px;font-size:9px;letter-spacing:1px}header a:last-child{max-width:120px;text-align:right}main{padding:0 10px}.intro{padding:8px 0 18px}.cabinet{padding:6px}.cabinet-top{font-size:8px}#status{max-width:130px}.below{grid-template-columns:1fr;gap:12px;padding-top:12px}.toolbar button{padding:10px 8px;font-size:9px}footer{padding:20px 15px;letter-spacing:1px}footer span{display:none}}

/* Keep the playfield and touch controls together inside Safari's visible area.
   svh reserves space for expanded browser chrome; safe-area covers the home bar. */
@media (any-pointer:coarse){
 header{padding:8px 12px;font-size:9px;letter-spacing:1px;line-height:16px}
 header a:last-child{max-width:none}
 main{padding:0 8px}
 .intro{padding:4px 0 8px}
 .intro .eyebrow,.intro .subtitle{display:none}
 h1{font-size:23px;margin:0;line-height:28px;letter-spacing:0}
 h1 small{display:inline;font-size:12px;margin:0}
 .play-area{height:calc(100vh - 84px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100svh - 84px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;padding-bottom:8px;max-width:772px;margin:auto}
 .cabinet{width:100%;flex:1;min-height:0;margin:0;padding:6px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
 .cabinet-top{font-size:8px;padding-bottom:4px;line-height:12px}
 #status{max-width:45%}
 canvas{width:100%;height:100%;min-height:0;object-fit:contain;aspect-ratio:auto}
 .toolbar{padding-top:6px;gap:4px}
 .toolbar button{padding:8px 6px;min-height:34px;font-size:9px}
 .touch{display:flex;flex:0 0 132px;width:100%;margin:0 auto;padding:0 4px;max-width:600px}
 .dpad{grid-template:repeat(3,42px)/repeat(3,44px)}
 .actions{gap:10px}
 .actions button{width:48px;height:48px}
 .below{padding-top:12px}
}
@media (any-pointer:coarse) and (orientation:landscape) and (max-height:600px){
 header,.intro{display:none}
 .play-area{height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(0,1fr) 192px;padding:6px max(6px,env(safe-area-inset-right,0px)) 6px max(6px,env(safe-area-inset-left,0px));max-width:none}
 .touch{height:100%;flex-direction:column;justify-content:center;gap:14px;padding:0}
 .actions{gap:8px}
 .cabinet{height:100%}
}

.objective{margin:6px 4px 0;color:#e9d6a9;font:11px/1.5 monospace;text-align:center}
@media(any-pointer:coarse){.objective{font-size:10px;line-height:1.4;margin:5px 2px 0}}

/* iOS long-press must never select arrow glyphs or open a callout. */
.touch,.touch *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.touch button{appearance:none;-webkit-appearance:none;cursor:default}

/* File selection occupies the same screen as the adventure, including on phones. */
.screen-wrap{position:relative;min-height:0;aspect-ratio:1;overflow:hidden;background:#070c15}
.screen-wrap canvas{width:100%;height:100%;aspect-ratio:1;object-fit:contain}
.profiles{position:absolute;inset:0;z-index:2;overflow:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 0,#172b42,#080e19 75%);padding:clamp(10px,3%,24px);font-family:monospace;border:1px solid #294c7c;scrollbar-width:thin}
.profiles[hidden],#register[hidden],#slot-list[hidden]{display:none}
.profile-heading{text-align:center;border-top:3px solid #456fce;padding-top:8px;margin-bottom:12px}
.profile-heading>span{font-size:9px;letter-spacing:3px;color:#d5af67}
.profile-heading h2{font:clamp(14px,3.4vw,24px)/1.2 monospace;text-transform:uppercase;letter-spacing:2px;color:#e8ecf5;margin:8px 0 12px}
.slot-card{display:grid;grid-template-columns:1fr auto;gap:6px;border:1px solid #344c72;background:#101d31;padding:8px;margin:8px 0}
.slot-play{display:flex;align-items:center;gap:14px;border:0;text-align:left;min-height:52px;background:none;padding:4px;color:#f2e6c5;font-size:clamp(11px,2.2vw,16px)}
.slot-play strong{display:block;letter-spacing:2px}.slot-play small{display:block;font-size:9px;color:#9bb0cc;letter-spacing:0;margin-top:4px}
.slot-card .slot-manage{display:flex;flex-direction:column;justify-content:center;gap:4px}.slot-manage button{font-size:9px;padding:6px}
.hippo-portrait{width:30px;height:36px;flex-shrink:0;image-rendering:pixelated}
#register{max-width:460px;margin:auto;text-align:center}#register label{font-size:12px;letter-spacing:2px;color:#e8c583}
.name-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0}.name-row input{min-width:0;width:75%;border:0;border-bottom:2px solid #618ee3;border-radius:0;background:#0b1524;color:#fff1cd;font:16px/1.5 monospace;padding:7px;text-transform:uppercase}.name-row input:focus{outline:1px solid #97b3ef}
#hero-preview{display:flex;width:32px}.name-keys{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;border:2px solid #456fce;padding:6px;margin:10px 0}
.name-keys button{padding:7px 0;border:0;font-size:12px;min-height:28px}.name-keys button.wide{grid-column:span 5;font-size:10px}
#name-help,#profile-message{font:10px/1.4 monospace;color:#99afc9;margin:8px 0;text-align:center}.colors{display:flex;justify-content:center;gap:6px}.colors button{padding:5px 10px;font-size:9px}.colors [aria-pressed="true"]{border-color:#ebc472;background:#35445b}.register-actions{display:flex;justify-content:space-between;gap:10px}.register-actions button{min-height:34px}.register-actions button:last-child{color:#edcc87;border-color:#b39962}
@media(any-pointer:coarse){.screen-wrap{aspect-ratio:auto}.profiles{padding:8px}.profile-heading{padding-top:4px;margin-bottom:6px}.profile-heading h2{font-size:14px;margin:5px 0}.slot-card{padding:4px;margin:5px 0}.slot-play{min-height:38px;gap:9px}.slot-play small{font-size:8px}.slot-manage button{padding:4px}.name-keys{margin:6px 0;padding:4px}.name-keys button{padding:4px 0;min-height:25px}#profile-message{font-size:9px}.name-row{margin:4px 0}.name-row input{padding:3px;font-size:16px}}