@font-face{font-family:PunchioPixel;src:url('./menu-pixel.woff') format('woff');font-display:swap;font-weight:400}
:root{--menu-paper:#fce4a8;--menu-light:#fff4d0;--menu-ink:#181828;--menu-wood:#884018;--menu-teal:#176354;--menu-gold:#f8b800}
dialog{color-scheme:light;background:var(--menu-paper);color:var(--menu-ink);border:4px solid var(--menu-ink);border-radius:0;box-shadow:0 0 0 4px var(--menu-gold),6px 8px 0 #181828,0 18px 64px #0008;width:min(92vw,760px);padding:24px}
dialog::backdrop{background:#101824b8}dialog h2,dialog legend,dialog button,.world-card b,.shop-wallet,.shop-price,.shop-eyebrow{font-family:PunchioPixel,monospace;font-weight:400;font-synthesis:none}
.dialog-heading{border-bottom:4px solid var(--menu-wood);padding-bottom:12px;margin-bottom:18px}.dialog-heading h2,dialog h2{color:var(--menu-ink);font-size:30px;letter-spacing:0;text-shadow:2px 2px var(--menu-light)}
dialog p,dialog dd,dialog label,.save-options span{color:#593b28;font-size:13px;line-height:1.65}dialog dt{color:var(--menu-teal)}
dialog button{background:var(--menu-teal);color:var(--menu-light);border:2px solid var(--menu-ink);border-radius:0;box-shadow:inset 0 2px #58b8b0,0 3px var(--menu-ink);font-size:20px;line-height:1.4;padding:10px 12px}
dialog button:hover{background:#287c68}dialog button:active{box-shadow:inset 0 2px #58b8b0,0 1px var(--menu-ink);transform:translateY(2px)}
dialog button:focus-visible,dialog input:focus-visible{outline:3px solid #203888;outline-offset:3px}
dialog fieldset{border:2px solid #884018;border-radius:0;background:#fff0c0;padding:14px;margin-bottom:18px}dialog legend{color:#593b28;background:var(--menu-paper);font-size:20px;padding:0 8px}
dialog input{color:#181828;background:#fff4d0;border:2px solid #884018;border-radius:0;font-family:inherit}
.avatar{background:transparent!important;border:0!important;width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.worlds{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.world-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px;background:#fff4d0;color:#181828;box-shadow:inset 0 2px #fff,0 3px #884018}
.world-card .world-icon{width:128px;height:96px;display:block;image-rendering:pixelated;border:2px solid #181828}
.world-card b{font-size:20px;color:inherit}.world-card small{font-size:11px;line-height:1.4;color:inherit}.world-card:hover,.world-card.selected{color:#181828;background:#f8b800;border-color:#181828}.world-card.locked{color:#6b604c;background:#d5c298}.world-card.locked canvas{filter:saturate(.35);opacity:.65}
.connection,#completion,#location,#saveStatus{color:#593b28}.pause-button,.world-nav-button{border:2px solid #181828;background:#fce4a8;color:#181828;box-shadow:2px 2px #181828;border-radius:0;font-family:PunchioPixel,monospace}.pause-button{font-size:10px;min-width:40px}.world-nav-button{font-size:10px}
.item-shop{width:min(820px,94vw);padding:24px;border:4px solid #181828;background:#fce4a8;color:#181828;box-shadow:0 0 0 4px #f8b800,6px 8px #181828,0 18px 64px #0008}
.item-shop header{border-bottom:4px solid #884018}.item-shop h2{color:#181828;font-size:30px}.item-shop .shop-eyebrow{font-size:10px;letter-spacing:0;color:#176354}.item-shop .shop-intro,.item-shop .shop-message,.item-shop footer{color:#593b28}.item-shop .shop-wallet{color:#884018;font-size:20px}
.shop-stock{gap:12px}.shop-offer{background:#fff4d0;color:#181828;border:2px solid #884018;box-shadow:inset 0 2px #fff,0 3px #884018;gap:8px;padding:12px 6px}.shop-offer:hover,.shop-offer:focus-visible{background:#f8b800;color:#181828;border-color:#181828}.shop-offer strong{font-size:20px;font-weight:400}.shop-price{font-size:20px;color:#884018}.shop-unaffordable{background:#e8d5ac;color:#5a5148}.shop-unaffordable .shop-price{color:#5a5148}.shop-offer canvas{width:48px;height:48px}.shop-close{font-size:30px;color:#fff4d0;background:#176354}
@media(max-width:640px){dialog,.item-shop{padding:14px}.worlds{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.world-card .world-icon{width:64px;height:48px}.world-card b,dialog button,dialog legend,.shop-offer strong,.shop-price,.item-shop .shop-wallet{font-size:10px}.dialog-heading h2,.item-shop h2{font-size:20px}.world-card small{font-size:10px}.shop-stock{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.shop-offer{padding:12px 4px}.shop-offer canvas{width:48px;height:48px}dialog button{min-height:36px;line-height:1.8}.shop-close{font-size:20px}}

#pause #name{background:#fff4d0;color:#181828;border:2px solid #884018}dialog .dialog-heading button{color:#181828;background:#f8b800;border:2px solid #181828;box-shadow:none}#pauseButton{font-size:10px;min-width:48px}

/* The pause tile uses the exact display scale of the game's native pixels. */
#stage #pauseButton{width:max(32px,var(--menu-button-size,32px));height:max(32px,var(--menu-button-size,32px));min-width:0;min-height:0;aspect-ratio:1;opacity:1;border:0;background:transparent;box-shadow:none;padding:0;line-height:0}
#pauseButton canvas{display:block;width:var(--menu-button-size,32px);height:var(--menu-button-size,32px);image-rendering:pixelated;pointer-events:none}
#stage #pauseButton:hover{filter:brightness(1.12)}#stage #pauseButton:active{transform:translateY(calc(var(--menu-button-size,32px)/16))}
