@font-face{font-family:Monster;src:url('assets/mrsmonster.ttf') format('truetype');font-display:swap}@font-face{font-family:Typewriter;src:url('assets/mytype.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--lime:#dbfa69;--paper:#eee8d7;--ink:#111714;--pink:#ff88c3}*{box-sizing:border-box}body{margin:0;background:#101513;color:var(--paper);font-family:Arial,sans-serif;font-size:16px}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:5px}.mast{min-height:92px;padding:18px 28px;display:flex;align-items:center;gap:26px;border-bottom:4px solid #0a0e0b;background:#161d18}.brand{font-family:Monster,Impact,sans-serif;font-size:42px;line-height:1.1;color:var(--lime);text-decoration:none;transform:rotate(-2deg);white-space:nowrap}.mast nav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}.mast nav button{background:transparent;color:var(--paper);border:1px solid #6f7967;padding:11px 15px;font-family:Typewriter,monospace;font-size:16px}.mast nav button:hover{color:#152012;background:var(--lime);border-color:var(--lime)}.door-tag{font:12px Typewriter,monospace;max-width:150px;line-height:1.5;transform:rotate(3deg);color:#bec6ae}.scene-scroll{overflow:auto;background:#0b0e0d}.scene{position:relative;width:100%;max-width:1920px;margin:auto;aspect-ratio:16/9}.garage-art{width:100%;height:100%;display:block;object-fit:contain}.hotspot{position:absolute;background:transparent;border:2px solid transparent;padding:0;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .15s,border-color .15s}.hotspot:hover,.hotspot:focus-visible{background:#dcfa6924;border-color:#dcfa69;box-shadow:0 0 15px #dbfa6980}.hotspot .label{background:#dcfa69;box-shadow:3px 4px 0 #132216;border:2px solid #111714;padding:9px 12px;font:clamp(14px,1.05vw,20px)/1.1 Monster,Impact,sans-serif;letter-spacing:.6px;transform:rotate(-3deg);pointer-events:none;white-space:nowrap}.monitor{left:28%;top:44.5%;width:11%;height:11.5%}.monitor .label{transform:rotate(3deg)}.board{left:42%;top:40%;width:18%;height:19%}.board .label{background:#eee8d7;align-self:flex-end;margin-bottom:12px}.desk{left:63%;top:54%;width:17%;height:10%}.desk .label{background:#ffb9d7;transform:rotate(3deg)}.shelves{left:82%;top:30%;width:16%;height:40%}.shelves .label{background:#eee8d7;transform:rotate(-5deg)}footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:17px 28px;font:14px Typewriter,monospace;color:#c2c9b5}footer button{background:transparent;border:0;color:var(--lime);text-decoration:underline;text-underline-offset:5px;font:inherit}.mobile-hint{display:none}dialog{color:var(--ink);background:var(--paper);width:min(900px,calc(100% - 32px));max-height:88dvh;padding:25px 30px 32px;border:3px solid #182019;box-shadow:8px 8px 0 #dbfa6966;overflow:auto}dialog::backdrop{background:#080e0acc;backdrop-filter:blur(3px)}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:2px dashed #91927e;padding-bottom:14px}.panel-kicker{font:12px/1.4 Typewriter,monospace;letter-spacing:1px}.panel-top button{background:#19221b;color:var(--paper);border:0;padding:10px 14px;white-space:nowrap;min-height:44px}h1{font:42px/1.15 Monster,Impact,sans-serif;margin:24px 0 18px}h2{font:27px/1.2 Monster,Impact,sans-serif;margin:0}p{line-height:1.6}.intro{font-family:Typewriter,monospace;margin-top:0}.counts{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.counts span,.badge{display:inline-block;border:1px solid #757a61;padding:6px 10px;font:14px Typewriter,monospace}.counts span:first-child{background:#d8eb9f}.wheel-group{border-top:1px solid #9c9f8c}.wheel-group:last-child{border-bottom:1px solid #9c9f8c}summary{cursor:pointer;min-height:60px;padding:17px 6px;font:22px Typewriter,monospace;display:list-item}summary small{font:14px Arial,sans-serif;color:#4d5642;margin-left:10px}.entries{margin:0 0 20px;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.entries li{padding:11px 8px;border-bottom:1px dashed #b7b7a3;font-size:16px;line-height:1.4;overflow-wrap:anywhere}.entries li::before{content:'✦';color:#50712a;margin-right:8px}.rule{border-left:5px solid #677c38;background:#dce2c7;padding:20px;margin:20px 0}.rule p:last-child{margin-bottom:0}.empty{border:2px dashed #91977c;padding:35px 25px;text-align:center;margin:26px 0}.empty h2{font-size:32px}.empty p{max-width:500px;margin:18px auto 0}.rewards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.reward{padding:20px;border:1px solid #969e83;background:#f5f0e2}.reward h2{font-size:24px;margin-top:12px}.reward p{margin-bottom:0}.reward .badge{font-size:12px;background:#e3e9cd}.pending{background:#e3d5de;border-left:4px solid #995276;padding:12px 16px;font-size:14px;line-height:1.5}.flow{padding-left:28px}.flow li{padding:9px 0;line-height:1.5}.fine{font-size:14px;color:#515b48}@media(min-width:1500px){.mast{padding-left:42px;padding-right:42px}.brand{font-size:48px}.mast nav{margin-left:50px}.door-tag{margin-left:auto}.scene{width:min(100%,calc((100dvh - 160px)*16/9))}}@media(max-width:900px){.mast{flex-wrap:wrap;gap:15px;padding:18px}.brand{font-size:36px}.mast nav{margin-left:0}.door-tag{display:none}.scene{min-width:900px}.scene-scroll{max-height:70dvh}.mobile-hint{display:inline}footer{padding:16px;flex-wrap:wrap;font-size:12px}.hotspot .label{font-size:15px}}@media(max-width:540px){.mast nav{width:100%;gap:6px}.mast nav button{padding:10px;font-size:14px;flex:1}.entries,.rewards{grid-template-columns:1fr}dialog{padding:18px;width:calc(100% - 20px)}h1{font-size:34px}.panel-kicker{max-width:170px}summary{font-size:19px}.panel-top{gap:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#socials{display:flex;gap:16px;flex-wrap:wrap}#socials a{color:var(--lime)}.collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:20px 0 32px}.collection-item{background:#f6f0e3;border:1px solid #8f997a;color:#172019;padding:12px;text-align:left;font:18px Typewriter,monospace}.collection-item img{width:100%;height:180px;object-fit:contain;display:block;margin-bottom:12px}.creation-full{display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:20px auto}.watch-link{display:inline-block;background:#6741a8;color:white;padding:12px 18px}.placed-item{position:absolute;z-index:2;border:0;background:transparent;padding:0;cursor:pointer;filter:drop-shadow(2px 4px 3px #0006)}.placed-item img{width:100%;max-height:180px;object-fit:contain;display:block}.placed-item:hover{filter:drop-shadow(0 0 6px #dbfa69)}

.placed-item.existing-art{filter:none;border-radius:3px}.placed-item.existing-art img{visibility:hidden;height:100%;max-height:none}.placed-item.existing-art:hover,.placed-item.existing-art:focus-visible{outline:2px dashed #dbfa69;background:#dbfa6915}

.board .label{display:none}.friend-wall{position:absolute;left:43%;top:46%;width:15.8%;height:12%;pointer-events:none;z-index:3}.friend-photo{position:absolute;display:block;height:55%;pointer-events:auto;transform:rotate(-3deg);filter:drop-shadow(1px 2px 1px #0005)}.friend-photo:nth-child(even){transform:rotate(3deg)}.friend-photo img{width:100%;height:100%;object-fit:contain}.friend-photo:hover{outline:2px solid #dbfa69}.friend-portrait{display:block;max-width:100%;height:170px;object-fit:contain;margin:0 auto 14px}

/* The garage itself is the navigation. */
body{min-height:100dvh;display:grid;align-items:center}main{width:100%}.scene-scroll{max-height:none}.scene{width:min(100%,calc(100dvh * 16 / 9));max-width:none;min-width:0}.garage-sign{position:absolute;z-index:1;left:51%;top:22%;width:25%;font:clamp(18px,3vw,60px)/1.2 Monster,Impact,sans-serif;color:#dbee79;background:#16201c;border:3px solid #363c31;text-align:center;padding:12px;transform:rotate(-1deg);box-shadow:3px 5px #0005}.scene-socials{position:absolute;left:9%;top:47%;width:14%;z-index:3;display:flex!important;flex-direction:column;gap:12px!important;align-items:start}.scene-socials a{font:clamp(14px,1.2vw,24px)/1.2 Typewriter,monospace;background:#251931;color:#eddbff!important;border:2px solid #bd90d6;padding:9px 12px;text-decoration:none;transform:rotate(-3deg);box-shadow:2px 3px #0008;max-width:100%;overflow-wrap:anywhere}.scene-socials a:nth-child(even){background:#192019;border-color:#adbd7c;color:#dbee79!important;transform:rotate(2deg)}.rule-sign{left:42%;top:62%;width:10%;height:8%}.rule-sign .label{font-size:clamp(12px,1vw,18px)}.existing-friend{position:absolute;left:42.8%;top:45.2%;width:2.7%;height:6.2%;z-index:4;cursor:pointer}.existing-friend:hover,.existing-friend:focus-visible{outline:2px dashed #dbee79;background:#dbee7922}.hotspot .label{font-size:clamp(12px,1vw,20px)}@media(max-width:900px){body{display:block}.scene{width:1100px;min-width:1100px;max-width:none}.scene-scroll{height:100dvh;max-height:none;display:flex;align-items:center}.scene-socials a{font-size:16px}.garage-sign{font-size:32px}.hotspot .label{font-size:16px}}

#entrance{position:fixed;inset:0;z-index:20;background:#070b09;display:grid;place-items:center}#entrance[hidden]{display:none}#entrance-video{width:100%;height:100%;object-fit:contain}.entrance-controls{position:absolute;bottom:max(30px,6vh);left:16px;right:16px;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}.entrance-controls button{border:2px solid #162011;background:#dbfa69;color:#15200f;padding:14px 26px;box-shadow:4px 5px #0009}#enter-garage{font:clamp(24px,3vw,42px) Monster,Impact,sans-serif;transform:rotate(-2deg)}#entrance-sound{background:#152019;color:#f1efd9;font:14px Typewriter,monospace;border-color:#737c63}

/* Entrance projection floats over the actual garage; no opaque page backdrop. */
#entrance{background:transparent;isolation:isolate}
#entrance-video{position:absolute;width:min(60vw,calc(70dvh * 16 / 9));height:65dvh;max-width:100%;object-fit:contain;opacity:.72;mask-image:radial-gradient(ellipse at center,#000 48%,#000b 68%,transparent 84%);-webkit-mask-image:radial-gradient(ellipse at center,#000 48%,#000b 68%,transparent 84%)}
.entrance-controls{bottom:13vh}
body:has(#entrance:not([hidden])) .hotspot .label,body:has(#entrance:not([hidden])) .scene-socials,body:has(#entrance:not([hidden])) .garage-sign{visibility:hidden}
@media(max-width:900px){#entrance-video{width:94vw;height:62dvh}.entrance-controls{bottom:12vh}}

/* The video supplies the artwork and Enter lettering; this is its invisible hit area. */
#enter-garage{position:absolute;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(60vw,calc(70dvh * 16 / 9));height:65dvh;max-width:100%;border:0;padding:0;background:transparent;box-shadow:none;cursor:pointer;color:transparent}
#enter-garage:focus-visible{outline:3px dashed #dbfa69;outline-offset:4px;border-radius:12px}
@media(max-width:900px){#enter-garage{width:94vw;height:62dvh}}

.suggestion-box{left:42%;top:63.3%;width:8.2%;height:6.5%;z-index:2}.suggestion-box .label{background:#dbfa69;font-size:clamp(12px,1vw,18px);padding:6px 10px}.rule-sign{left:52%;top:65%;width:9%;height:7%}.suggestion-form{display:block;width:100%;height:65dvh;min-height:420px;border:0;margin-top:18px;background:white}@media(max-width:900px){.suggestion-box .label{font-size:14px}}