#view {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    background: #2a2a2f;
}

#bar .gap { width: 10px; }
#volume { padding: 14px 16px; }
#volume input { width: 170px; margin: 0; accent-color: var(--punch); cursor: pointer; }

/* D: where you are, the weather and the time of day. */
#debug {
    position: fixed;
    top: 14px;
    right: 16px;
    padding: 8px 10px;
    font: 12px/1.45 ui-monospace, monospace;
    color: #f4f1e8;
    background: rgba(22, 22, 28, 0.6);
    border-left: 2px solid var(--punch);
}
#debug pre { margin: 0; font: inherit; white-space: pre; }
#debug .row { display: flex; gap: 4px; margin-top: 8px; }
#debug button {
    flex: 1;
    padding: 3px 6px;
    font: inherit;
    color: inherit;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
}
#debug button:hover { color: var(--punch); }
#debug button.on { color: #000; background: var(--punch); border-color: var(--punch); }
#debug input[type=range] { display: block; width: 100%; margin: 8px 0 2px; accent-color: var(--punch); cursor: pointer; }
#map canvas { cursor: crosshair; }

/* A place's name as you find it: high up, quiet, gone again in a few seconds. */
#place {
    position: fixed;
    top: max(9vh, 64px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.6s ease;
    font: 500 clamp(20px, 2.6vw, 34px)/1.1 "Chakra Petch", ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f4f1e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}
#place.on { opacity: 1; }
#place .kind { display: none; }
#place::after {
    content: "";
    display: block;
    width: 40%;
    height: 2px;
    margin: 12px auto 0;
    background: linear-gradient(90deg, transparent, var(--punch), transparent);
    opacity: 0.8;
}

/* A gate's countdown, high over you. */
#count {
    position: fixed;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    font: 600 clamp(44px, 6vw, 76px)/1 "Chakra Petch", ui-monospace, monospace;
    color: var(--punch);
    text-shadow: 0 0 18px rgba(127, 220, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.8);
}
#count.on { opacity: 1; }
#count.tick { animation: count 1s ease-out; }
@keyframes count {
    from { transform: translateX(-50%) scale(1.35); }
    to { transform: translateX(-50%) scale(1); }
}

/* The map: the continent on parchment, filling the screen inside the frame. */
#map {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(18, 18, 22, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#map[hidden] { display: none; }
#map canvas {
    width: min(92vw, 84vh);
    height: min(92vw, 84vh);
    margin-bottom: 60px;
    border: 2px solid var(--punch);
    outline: 1px solid #000;
    box-shadow: 0 0 0 3px #000, 0 12px 40px rgba(0, 0, 0, 0.5);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    image-rendering: auto;
    cursor: grab;
    touch-action: none;
}

/* The bag, open: the satchel seen from above, its pockets in a grid inside it. The bar stays over it. */
#bag {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(18, 18, 22, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    touch-action: none;
}
#bag[hidden] { display: none; }
#bag .satchel {
    position: relative;
    width: min(94vw, 1100px, calc((100vh - 190px) * 1.5));
    aspect-ratio: 3 / 2;
    margin-bottom: 120px;
}
/* A phone held upright: the bag runs off the sides so its inside fills the width. */
@media (max-aspect-ratio: 4 / 5) {
    #bag { overflow: hidden; }
    #bag .satchel { width: 150vw; margin: 0 -25vw 120px; }
}
#bag .satchel > img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
}
/* The floor of the bag (bag.png's, measured), in square pockets: COLS x ROWS in bag.js. */
#bag .slots {
    position: absolute;
    left: 18.88%;
    top: 37.55%;
    width: 62.5%;
    height: 33.48%;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
}
#bag .cell { box-shadow: inset 1px 1px 0 rgba(255, 214, 160, 0.08), inset -1px -1px 0 rgba(0, 0, 0, 0.34); }
#bag .thing {
    position: absolute;
    display: grid;
    place-items: center;
    cursor: grab;
}
#bag .thing img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.55));
}
@media (hover: hover) { #bag:not(.dragging) .thing:hover { box-shadow: inset 0 0 0 2px var(--punch); } }
#bag .thing.sel { box-shadow: inset 0 0 0 2px var(--punch); background: rgba(255, 252, 0, 0.07); }
#bag .thing.lifted img { opacity: 0.25; }
#bag .spot { position: absolute; pointer-events: none; box-shadow: inset 0 0 0 2px var(--punch); background: rgba(255, 252, 0, 0.12); }
#bag .spot.bad { box-shadow: inset 0 0 0 2px #e0442e; background: rgba(224, 68, 46, 0.14); }
#bag .ghost { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 5; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.6)); }
#bag.out .ghost { opacity: 0.75; }

/* The pan, over the bag at a fire: four things in it, or what they cooked into while there's no room for it. */
#pan { position: absolute; left: 37.2%; top: -3%; width: 40%; aspect-ratio: 3 / 2; z-index: 2; }
#pan[hidden] { display: none; }
#pan > img { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.6)); }
#pan .slots { position: absolute; left: 12.5%; top: 20.5%; width: 39%; height: 58.5%; display: grid; grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); gap: 4%; }
#pan .slot { position: relative; min-width: 0; min-height: 0; cursor: pointer; }
#pan .slot img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)); }
#pan .dish { grid-area: 1 / 1 / 3 / 3; }
@media (hover: hover) { #pan .slot:has(img):hover { box-shadow: inset 0 0 0 2px var(--punch); } }

/* At the pan, what can't go in it (or wouldn't make anything with what's there) is greyed out. */
#bag .thing.off { cursor: default; }
#bag .thing.off img { opacity: 0.28; filter: grayscale(1) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.55)); }

/* Close, top right, whenever the bag is open. */
#bagclose { left: auto; right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); transform: none; padding: 8px 10px; z-index: 3; }
/* Cook, big, bottom right: dim until what's in the pan makes something. */
#cook { left: auto; right: max(24px, env(safe-area-inset-right)); bottom: calc(var(--gap) + 76px); transform: none; padding: 12px; z-index: 3; }
#cook[hidden] { display: none; }
#cook .icon { width: 96px; height: 96px; }
#cook .icon svg { width: 52px; height: 52px; }
#cook.off { opacity: 0.35; }
#cook.off .icon { pointer-events: none; }
#cook:not(.off) .icon svg { color: var(--punch); animation: ready 1.6s ease-in-out infinite; }
@keyframes ready { 50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255, 252, 0, 0.6)); } }
@media (max-width: 700px) {
    #cook { bottom: calc(var(--gap) + 70px); right: 14px; padding: 8px; }
    #cook .icon { width: 64px; height: 64px; }
    #cook .icon svg { width: 36px; height: 36px; }
}

/* What a thing is: its name over the bar, while the pointer's on it or it's picked out. */
#what { width: auto; padding: 12px 18px; align-items: center; z-index: 3; }
#what .name { font: 500 15px/1.2 "Chakra Petch", ui-monospace, monospace; letter-spacing: 0.04em; color: #f4f1e8; white-space: nowrap; }

/* Something just went in the bag. */
#bagbtn.got svg { animation: got 0.55s ease-out; }
@keyframes got { 30% { transform: scale(1.4) translateY(-2px); color: var(--punch); } }
/* Full: it glows red and shakes. */
#bagbtn.full svg { color: #ff4a32; filter: drop-shadow(0 0 5px rgba(255, 60, 30, 0.9)); animation: full 0.6s ease-out; transition: color 0.4s, filter 0.4s; }
@keyframes full {
    15% { transform: translateX(-4px) rotate(-10deg); }
    30% { transform: translateX(4px) rotate(9deg); }
    45% { transform: translateX(-3px) rotate(-6deg); }
    60% { transform: translateX(3px) rotate(4deg); }
    80% { transform: translateX(-1px) rotate(-2deg); }
}