:root{--paper:#efe8d8;--ink:#1d1815;--night:#090808;--lime:#d9ff56;--pink:#ff4d87;--cyan:#65efff;--shadow:0 28px 80px rgba(0,0,0,.46)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080707;color:#fff;font-family:Arial,Helvetica,sans-serif}button,a{font:inherit}button{cursor:pointer}.hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
#app{position:fixed;inset:0;background:#080707}.paper{color:var(--ink);background:var(--paper);background-image:linear-gradient(rgba(255,255,255,.2),rgba(0,0,0,.04));border:1px solid rgba(255,255,255,.18);box-shadow:var(--shadow);clip-path:polygon(1% 2%,99% 0,100% 96%,98% 99%,2% 98%,0 94%,1% 50%,0 7%)}
.boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;background:#090808;transition:opacity .7s,visibility .7s}.boot:not(.active){opacity:0;visibility:hidden;pointer-events:none}.boot-art{position:absolute;inset:-3%;background:url('assets/room-248.webp') center/cover no-repeat;filter:blur(3px) saturate(.72);transform:scale(1.06)}.boot-shade{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(0,0,0,.16),rgba(0,0,0,.76) 70%),linear-gradient(180deg,rgba(4,4,4,.15),rgba(4,4,4,.7))}.boot-copy{position:relative;z-index:2;text-align:center;padding:24px}.boot-mark{font-size:clamp(74px,15vw,190px);font-weight:1000;line-height:.76;letter-spacing:-.08em;text-shadow:0 6px 35px #000}.boot-copy p{font-weight:900;letter-spacing:.22em;font-size:11px;margin:28px 0 14px}.boot-copy button{padding:15px 24px;border:1px solid rgba(255,255,255,.32);background:rgba(10,9,9,.76);color:#fff;font-weight:1000;letter-spacing:.08em;box-shadow:0 18px 60px rgba(0,0,0,.35);transition:.2s}.boot-copy button:hover{transform:translateY(-2px);border-color:var(--lime);color:#f1ffc5}.boot-copy small{display:block;margin-top:13px;opacity:.62}
.experience{position:fixed;inset:0;overflow:hidden;background:#090808}.ambient-backdrop{position:absolute;inset:-4%;background-position:center;background-size:cover;filter:blur(34px) brightness(.42) saturate(.8);transform:scale(1.12);transition:background-image .5s ease}.stage{position:absolute;inset:0;overflow:hidden;touch-action:none}.scene{position:absolute;left:50%;top:50%;height:100vh;aspect-ratio:16/9;transform:translate(calc(-50% + var(--pan-x,0px) + var(--tilt-x,0px)),calc(-50% + var(--tilt-y,0px))) scale(var(--tilt-s,1));opacity:0;visibility:hidden;transition:opacity .55s ease,transform .28s ease;overflow:hidden;box-shadow:0 0 90px rgba(0,0,0,.7)}.scene.square-scene{aspect-ratio:3/2}.scene.active{opacity:1;visibility:visible}.scene-art{width:100%;height:100%;display:block;object-fit:fill;user-select:none;-webkit-user-drag:none}.light-wash,.rain-sheen,.film-grain{position:absolute;inset:0;pointer-events:none}.room-light{background:radial-gradient(circle at 22% 42%,rgba(255,197,121,.08),transparent 25%),radial-gradient(circle at 76% 30%,rgba(255,79,172,.06),transparent 28%);mix-blend-mode:screen}.square-light{background:radial-gradient(circle at 55% 42%,rgba(255,152,96,.08),transparent 22%),radial-gradient(circle at 76% 46%,rgba(184,67,255,.07),transparent 25%);mix-blend-mode:screen;animation:breathe 6s ease-in-out infinite alternate}.rain-sheen{opacity:.12;background:linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.22) 39%,transparent 40% 56%,rgba(255,255,255,.1) 57%,transparent 58%);background-size:160% 160%;animation:sheen 8s linear infinite;mix-blend-mode:screen}.film-grain{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}@keyframes breathe{to{opacity:.58}}@keyframes sheen{to{background-position:-160% 0}}
.hotspot{position:absolute;z-index:12;border:0;background:transparent;outline:none}.hotspot::after{content:attr(data-tip);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);padding:8px 10px;background:rgba(8,7,7,.86);border:1px solid rgba(255,255,255,.17);color:#fff;font-size:9px;font-weight:900;letter-spacing:.09em;white-space:nowrap;opacity:0;transition:.16s;box-shadow:0 8px 28px rgba(0,0,0,.3)}.hotspot:hover::after,.hotspot:focus-visible::after{opacity:1;transform:translate(-50%,-50%) scale(1)}.hotspot:focus-visible{outline:2px dashed var(--lime);outline-offset:2px}

.world-mark{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.23);background:rgba(9,8,8,.48);backdrop-filter:blur(8px);color:#fff;font-size:18px;font-weight:1000;opacity:.42;transition:.18s}.world-mark:hover,.world-mark:focus-visible,.world-mark.open{opacity:1;border-color:var(--lime);color:#efffbc;transform:scale(1.04)}.world-tools{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 55px);z-index:59;display:grid;gap:5px;padding:7px;background:rgba(7,7,7,.75);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(11px);box-shadow:0 18px 50px rgba(0,0,0,.34)}.world-tools button{border:0;background:transparent;color:#fff;text-align:right;padding:8px 9px;font-size:9px;font-weight:900;letter-spacing:.08em}.world-tools button:hover{background:rgba(255,255,255,.08);color:#eaff9d}.touch-hint{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));z-index:50;transform:translateX(-50%);padding:8px 10px;background:rgba(7,7,7,.58);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap;transition:.3s}
.dialogue{position:fixed;z-index:90;left:50%;bottom:24px;transform:translateX(-50%);width:min(770px,calc(100vw - 40px));min-height:112px;padding:18px 58px 18px 122px}.portrait{position:absolute;left:20px;bottom:16px;width:82px;height:82px;background:#171310;color:#fff;display:grid;place-items:center;font-weight:1000;border:5px solid #f7f1e6;box-shadow:0 0 0 2px #171310;transform:rotate(-2deg)}.dialog-name{display:inline-block;padding:4px 12px;background:#171310;color:#fff;font-weight:1000;transform:rotate(-1deg)}.dialog-copy p{margin:10px 0 0;font-size:clamp(15px,1.5vw,21px);line-height:1.35}.close-x{position:absolute;right:10px;top:8px;border:0;background:transparent;color:#181410;font-size:30px;font-weight:900;line-height:1}
.modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(4,3,3,.72);backdrop-filter:blur(8px)}.map-card{position:relative;width:min(760px,94vw);padding:28px 30px;max-height:88vh;overflow:auto}.kicker{margin:0 0 6px;font-weight:1000;letter-spacing:.14em;font-size:11px}.map-card h2{font-size:clamp(38px,7vw,76px);line-height:.88;margin:8px 0 16px;letter-spacing:-.05em}.ink-button{border:0;background:#151210;color:#fff;padding:15px 24px;font-weight:1000;letter-spacing:.05em}.ink-button.small{padding:10px 14px;font-size:12px}.map-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.map-grid button{border:2px solid #1c1814;background:rgba(255,255,255,.28);color:#171310;text-align:left;padding:15px;font-weight:1000;min-height:80px}.map-grid button:hover{transform:rotate(-.4deg) translateY(-2px);background:#fff}.map-grid small{font-weight:600;opacity:.58}.map-grid .locked{opacity:.5}
.phone-shell{position:relative;width:min(390px,92vw);height:min(720px,88vh);padding:12px;border-radius:42px;background:#0b0b0d;border:4px solid #29292d;box-shadow:0 28px 90px #000;overflow:hidden}.phone-shell::before{content:"";position:absolute;left:50%;top:8px;transform:translateX(-50%);width:92px;height:23px;border-radius:14px;background:#020203}.phone-close{position:absolute;right:18px;top:16px;z-index:3;border:0;background:transparent;color:#fff;font-size:25px}.phone-top{height:48px;padding:17px 14px 0;display:flex;justify-content:space-between;font-size:11px}.phone-screen{height:calc(100% - 48px);padding:26px 16px 16px;border-radius:27px;background:linear-gradient(180deg,#191b22,#0c0d12);overflow:auto}.phone-screen h2{font-size:54px;margin:2px 0 8px}.phone-screen>p{color:#bbb;line-height:1.45}.phone-app{width:100%;display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:#fff;padding:13px;margin-top:9px;text-decoration:none;text-align:left}.phone-app b{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#252834;font-size:15px}.phone-app span{font-weight:1000}
.transition{position:fixed;inset:0;z-index:130;display:grid;place-items:center;background:#080707;opacity:0;visibility:hidden;pointer-events:none;transition:.3s}.transition.show{opacity:1;visibility:visible}.transition span{font-size:clamp(70px,18vw,220px);font-weight:1000;letter-spacing:-.08em}.toast{position:fixed;z-index:160;left:50%;top:18px;transform:translate(-50%,-10px);background:#111;color:#fff;padding:10px 14px;border:1px solid rgba(255,255,255,.15);font-size:10px;font-weight:1000;letter-spacing:.08em;opacity:0;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.ambient-backdrop{filter:blur(26px) brightness(.34)}.scene{top:0;height:100vh;left:50%;transform:translateX(calc(-50% + var(--pan-x,0px)));aspect-ratio:16/9}.scene.square-scene{aspect-ratio:3/2}.hotspot::after{display:none}.dialogue{left:12px;right:12px;bottom:14px;transform:none;width:auto;padding:13px 42px 13px 91px;min-height:90px}.portrait{width:62px;height:62px;left:15px}.dialog-copy p{font-size:14px}.map-grid{grid-template-columns:1fr}.map-card{padding:24px 20px}.world-mark{width:44px;height:44px}.world-tools{bottom:64px}.touch-hint{bottom:14px;font-size:8px}.boot-mark{font-size:26vw}}
@media(max-height:520px) and (orientation:landscape){.dialogue{bottom:8px;min-height:82px}.map-card{max-height:92vh}.touch-hint{left:12px;bottom:10px;transform:none}.world-mark{bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* v4 full illustrated district backgrounds */
.scene.zoom-scene{aspect-ratio:16/9}
.scene-back.paper-tab{position:absolute;left:18px;top:18px;z-index:30;padding:10px 14px;background:rgba(247,241,230,.92);border:2px solid #1c1814;color:#171310;font-size:12px;font-weight:1000;letter-spacing:.08em;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.scene-caption{position:absolute;left:22px;bottom:20px;z-index:24;padding:12px 14px 10px;background:rgba(247,241,230,.93);max-width:min(360px,64vw);transition:opacity .25s ease}
.scene-caption b{display:block;font-size:18px;letter-spacing:.02em}.scene-caption span{display:block;margin-top:6px;font-size:13px;line-height:1.35}.caption-hide{opacity:0;pointer-events:none}
.zoom-scene .scene-art{object-fit:cover}

/* map state */
.map-grid button.visited{box-shadow:inset 0 0 0 2px #1c1814;background:#fff8d8;position:relative}.map-grid button.visited::after{content:attr(data-visited);position:absolute;right:10px;top:10px;font-size:9px;letter-spacing:.08em;opacity:.55}
@media(max-width:700px){
  .scene-caption{left:12px;right:58px;bottom:14px;max-width:none;padding:10px 12px}.scene-caption b{font-size:16px}.scene-caption span{font-size:12px}
  .scene-back.paper-tab{left:12px;top:12px;padding:8px 10px;font-size:10px}
}

.passport-card{position:relative;width:min(820px,94vw);padding:28px 30px;max-height:88vh;overflow:auto}
.passport-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 20px}
.passport-chip{padding:14px;background:rgba(255,255,255,.35);border:2px solid #1c1814;display:flex;flex-direction:column;gap:4px}
.passport-chip b{font-size:28px;line-height:1;font-weight:1000}.passport-chip span{font-size:10px;letter-spacing:.12em;font-weight:1000;opacity:.7}
.passport-list{display:grid;gap:8px;margin:10px 0 14px}.passport-row{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;border:2px solid #1c1814;background:rgba(255,255,255,.25);font-weight:1000;gap:12px}.passport-row span{line-height:1.2}.passport-row b{font-size:11px;letter-spacing:.12em}.passport-row.is-visited{background:#fff8d8}.passport-row.is-missing{opacity:.62}.passport-hint{margin:12px 0 0;font-size:15px;line-height:1.45;max-width:640px}
@media(max-width:700px){.passport-card{padding:24px 20px}.passport-stats{grid-template-columns:1fr;gap:8px}.passport-chip b{font-size:24px}.passport-row{padding:12px}.passport-row b{font-size:10px}}

/* v3 experience layer */
.scene-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:screen;opacity:.45}
.atmosphere-radio{background:radial-gradient(circle at 58% 42%,rgba(255,54,80,.08),transparent 23%),radial-gradient(circle at 72% 33%,rgba(99,239,255,.06),transparent 20%);animation:radioPulse 4s ease-in-out infinite alternate}
@keyframes radioPulse{to{opacity:.72;filter:saturate(1.18)}}
.atmosphere-rain{opacity:.2;background:repeating-linear-gradient(108deg,transparent 0 18px,rgba(255,255,255,.11) 19px 20px,transparent 21px 37px);background-size:140% 140%;animation:districtRain 7s linear infinite}
@keyframes districtRain{to{background-position:-260px 400px}}
.atmosphere-sun{background:radial-gradient(circle at 78% 22%,rgba(255,214,118,.18),transparent 26%),linear-gradient(180deg,rgba(255,191,92,.03),rgba(255,140,55,.05));animation:sunBreath 6s ease-in-out infinite alternate}
@keyframes sunBreath{to{opacity:.7;filter:brightness(1.08)}}
.atmosphere-pet{background:radial-gradient(circle at 50% 62%,rgba(255,202,133,.08),transparent 40%);animation:petWarm 5s ease-in-out infinite alternate}
@keyframes petWarm{to{opacity:.62}}
.atmosphere-station{background:linear-gradient(100deg,transparent 0 48%,rgba(255,213,153,.07) 49%,transparent 51%);background-size:220% 100%;animation:stationSweep 9s linear infinite}
@keyframes stationSweep{to{background-position:-220% 0}}
.atmosphere-smoke{background:radial-gradient(ellipse at 55% 72%,rgba(255,145,76,.05),transparent 42%),linear-gradient(180deg,transparent 55%,rgba(255,255,255,.035));filter:blur(2px);animation:smokeMove 8s ease-in-out infinite alternate}
@keyframes smokeMove{to{transform:translateX(12px) translateY(-4px);opacity:.62}}
.atmosphere-symbiote{background:radial-gradient(circle at 61% 55%,rgba(255,0,85,.12),transparent 26%),radial-gradient(circle at 38% 45%,rgba(151,52,255,.08),transparent 30%);animation:symPulse 3.2s ease-in-out infinite alternate}
@keyframes symPulse{to{opacity:.78;filter:saturate(1.35) brightness(1.05)}}

.transition{background:radial-gradient(circle at 50% 45%,#161113,#080707 72%)}
.transition-card{text-align:center;transform:translateY(10px) scale(.97);opacity:.9;transition:.28s}.transition.show .transition-card{transform:translateY(0) scale(1);opacity:1}
.transition-card span{display:block;font-size:clamp(48px,11vw,150px);font-weight:1000;letter-spacing:-.06em;line-height:.85}.transition-card small{display:block;margin-top:18px;font-size:clamp(10px,1.4vw,16px);letter-spacing:.28em;font-weight:900;opacity:.66}

.golden-status{margin:18px 0 4px;padding:16px 18px;border:3px solid #1c1814;background:linear-gradient(135deg,#f7e8a0,#fff9d2 42%,#d9b34b);color:#18120a;font-size:clamp(22px,4vw,42px);font-weight:1000;letter-spacing:.06em;text-align:center;transform:rotate(-1deg);box-shadow:0 12px 28px rgba(104,70,0,.18)}
.postcard-card{position:relative;width:min(980px,96vw);padding:24px;max-height:92vh;overflow:auto}.postcard-card h2{font-size:clamp(38px,7vw,72px);line-height:.9;margin:8px 0 18px;letter-spacing:-.05em}.postcard-card canvas{display:block;width:100%;height:auto;background:#111;border:4px solid #1c1814;box-shadow:0 18px 45px rgba(0,0,0,.28)}.postcard-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.postcard-actions .ink-button{flex:1;min-width:180px}

/* deeper return-visit feeling */
.returning-square .square-light{opacity:.18;animation:breathe 3.8s ease-in-out infinite alternate}.returning-square .rain-sheen{opacity:.17}
@media(max-width:700px){.postcard-card{padding:18px 14px}.postcard-actions{display:grid}.postcard-actions .ink-button{width:100%}.transition-card small{margin-top:12px}.scene-atmosphere{opacity:.34}}

/* stress-test hardening */
.modal{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.world-tools{max-height:calc(100vh - 84px);overflow:auto;-webkit-overflow-scrolling:touch}
.close-x,.phone-close{min-width:44px;min-height:44px;display:grid;place-items:center}
@media(max-width:700px){
  .scene-back.paper-tab{left:calc(50% - 50vw + 12px);top:12px;min-height:44px;display:flex;align-items:center}
  .scene-caption{left:calc(50% - 50vw + 12px);right:auto;width:calc(100vw - 82px);max-width:none;bottom:14px}
  .world-tools button{min-height:44px;padding:11px 12px;font-size:10px}
  .phone-app{min-height:48px}
  .touch-hint{max-width:calc(100vw - 86px);overflow:hidden;text-overflow:ellipsis}
}
@media(max-height:520px) and (orientation:landscape){
  .world-tools{max-height:calc(100vh - 70px);bottom:58px}
  .scene-back.paper-tab{top:8px;min-height:40px}
  .scene-caption{bottom:8px;max-height:42vh;overflow:auto}
  .dialogue{max-height:48vh;overflow:auto}
  .phone-shell{height:92vh;border-radius:26px}
  .phone-screen{padding-top:18px}
}

/* keep contextual scene navigation visible whenever a 16:9 artwork is wider than the viewport */
@media (max-aspect-ratio:16/9){
  .zoom-scene .scene-back.paper-tab{left:calc(50% - 50vw + 18px)}
  .zoom-scene .scene-caption{left:calc(50% - 50vw + 22px);right:auto;max-width:min(360px,calc(100vw - 84px))}
}
@media (max-width:700px) and (max-aspect-ratio:16/9){
  .zoom-scene .scene-back.paper-tab{left:calc(50% - 50vw + 12px)}
  .zoom-scene .scene-caption{left:calc(50% - 50vw + 12px);width:calc(100vw - 82px);max-width:none}
}
.viewport-reset .scene{transition:none!important}
@media(max-width:700px){.scene{transition:opacity .55s ease}}

/* immersive phone landscape: fill the display rather than letterbox the world */
@media(max-height:520px) and (orientation:landscape){
  .scene,.scene.zoom-scene{top:50%;left:50%;height:max(100vh,56.25vw);transform:translate(calc(-50% + var(--pan-x,0px)),calc(-50% + var(--pan-y,0px)))}.scene.square-scene,.scene.other8-scene{height:max(100vh,66.667vw)}
  .zoom-scene .scene-back.paper-tab{left:calc(50% - 50vw + 12px)}
  .zoom-scene .scene-caption{left:calc(50% - 50vw + 12px);right:auto;width:min(360px,calc(100vw - 82px));max-width:none}
}
@media(max-height:520px) and (orientation:landscape){
  .zoom-scene .scene-back.paper-tab{top:calc(50% - 50vh + 8px)}
  .zoom-scene .scene-caption{bottom:calc(50% - 50vh + 8px)}
}

/* v5 Radio 8 broadcast + 8's House */
.atmosphere-house{background:radial-gradient(circle at 71% 28%,rgba(255,164,76,.14),transparent 28%),radial-gradient(circle at 45% 48%,rgba(119,70,255,.06),transparent 34%);animation:houseGlow 6s ease-in-out infinite alternate}
@keyframes houseGlow{to{opacity:.7;filter:brightness(1.04) saturate(1.08)}}

.broadcast-card{position:relative;width:min(1180px,96vw);padding:26px 28px;max-height:92vh;overflow:auto}
.broadcast-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.broadcast-head h2{font-size:clamp(48px,8vw,94px);line-height:.8;margin:4px 0 10px;letter-spacing:-.06em}.broadcast-head>div>p:last-child{margin:0;font-weight:1000;letter-spacing:.08em}
.on-air-lamp{display:flex;align-items:center;gap:9px;background:#171310;color:#fff;padding:12px 14px;font-weight:1000;letter-spacing:.11em;font-size:11px;white-space:nowrap}.on-air-lamp span{width:11px;height:11px;border-radius:50%;background:#ff315a;box-shadow:0 0 18px #ff315a;animation:onAirBlink 1.4s ease-in-out infinite alternate}@keyframes onAirBlink{to{opacity:.35;box-shadow:0 0 4px #ff315a}}
.broadcast-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:20px;align-items:start}.broadcast-player iframe{width:100%;height:450px;border:0;border-radius:10px;background:#111}.broadcast-external{display:block;margin-top:8px;padding:11px 12px;background:#171310;color:#fff;text-decoration:none;text-align:center;font-size:11px;font-weight:1000;letter-spacing:.06em}.broadcast-copy{padding:18px;border:2px solid #1c1814;background:rgba(255,255,255,.3)}.broadcast-copy h3{font-size:clamp(30px,4vw,52px);line-height:.9;margin:6px 0 10px}.broadcast-summary{line-height:1.45;margin:0 0 14px}.ep-tracklist{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.rotation-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:26px 0 10px}.rotation-head p{margin:0}.rotation-head p:last-child{font-size:12px;opacity:.64}
.release-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.release-tile{min-height:82px;border:2px solid #1c1814;background:rgba(255,255,255,.28);color:#171310;text-decoration:none;text-align:left;padding:13px;display:flex;flex-direction:column;justify-content:center;gap:5px;font-weight:inherit}.release-tile b{font-size:14px;line-height:1.15}.release-tile span{font-size:10px;line-height:1.3;opacity:.62;font-weight:800}.release-tile:hover,.release-tile:focus-visible{background:#fff;transform:translateY(-2px)}.release-tile.is-live{background:#171310;color:#fff;box-shadow:inset 0 0 0 2px #ff315a}.release-tile.is-live::after{content:'ON AIR';font-size:8px;letter-spacing:.14em;color:#ff7d96;font-weight:1000}
.broadcast-featured{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:2px solid #1c1814}.broadcast-featured .kicker{width:100%;margin-bottom:0}.broadcast-featured a{background:#171310;color:#fff;text-decoration:none;padding:9px 11px;font-size:10px;font-weight:1000;letter-spacing:.04em}

@media(max-width:820px){.broadcast-layout{grid-template-columns:1fr}.broadcast-player iframe{height:430px}.release-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.broadcast-head{align-items:center}.on-air-lamp{font-size:9px}}
@media(max-width:520px){.broadcast-card{padding:22px 15px}.broadcast-head{display:block}.on-air-lamp{display:inline-flex;margin-top:10px}.broadcast-player iframe{height:390px}.release-grid{grid-template-columns:1fr}.release-tile{min-height:66px}.rotation-head{display:block}.rotation-head p:last-child{margin-top:5px}.broadcast-featured{display:grid}.broadcast-featured a{display:block}}

/* EP track areas + website map refinements */
.map-section-title{margin:18px 0 8px;font-size:11px;font-weight:1000;letter-spacing:.18em;opacity:.66}
.ep-grid{margin-top:10px}
.track-jump{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px 14px;border:2px solid #1c1814;background:rgba(255,255,255,.22);color:#171310;text-align:left;font-weight:1000}
.track-jump span{font-size:11px;line-height:1.2;opacity:.7;font-weight:800}
.track-jump:hover,.track-jump:focus-visible{background:#fff;transform:translateY(-1px)}
.atmosphere-mirror{background:radial-gradient(circle at 51% 43%,rgba(120,210,255,.17),transparent 24%),radial-gradient(circle at 72% 18%,rgba(255,163,98,.12),transparent 18%);animation:mirrorPulse 4.5s ease-in-out infinite alternate}
@keyframes mirrorPulse{to{opacity:.82;filter:saturate(1.1) brightness(1.08)}}
.atmosphere-closed{background:radial-gradient(circle at 62% 44%,rgba(255,192,115,.11),transparent 24%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.14));animation:closedBreath 5.2s ease-in-out infinite alternate}
@keyframes closedBreath{to{opacity:.78}}
.atmosphere-barren{background:linear-gradient(115deg,transparent 0 40%,rgba(255,255,255,.05) 41%,transparent 42% 52%,rgba(255,205,140,.04) 53%,transparent 54%),radial-gradient(circle at 76% 23%,rgba(255,164,96,.11),transparent 21%);background-size:180% 180%;animation:barrenGlow 8s linear infinite}
@keyframes barrenGlow{to{background-position:-180% 0,0 0}}
.atmosphere-outro{background:radial-gradient(circle at 82% 30%,rgba(255,214,131,.18),transparent 24%),linear-gradient(180deg,rgba(255,177,94,.04),rgba(255,132,61,.08));animation:outroSun 6s ease-in-out infinite alternate}
@keyframes outroSun{to{opacity:.8;filter:brightness(1.06)}}

@media(max-width:520px){.track-jump{padding:11px 12px;gap:10px}.track-jump span{font-size:10px}}

/* v7 lorebook + passport route polish */
.lore-card{position:relative;width:min(980px,94vw);max-height:88vh;overflow:auto;padding:28px 30px 26px}.lore-columns{display:grid;grid-template-columns:1.15fr .95fr;gap:22px;margin-top:14px}.lore-card h3{margin:0 0 10px;font-size:22px}.lore-card p{margin:0 0 14px;line-height:1.55}.lore-list{margin:0;padding-left:18px;display:grid;gap:8px}.lore-list li{line-height:1.45}.lore-route{display:grid;gap:8px}.lore-foot{margin-top:16px;font-weight:1000;letter-spacing:.05em}.passport-stats{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.lore-columns{grid-template-columns:1fr}.lore-card{padding:24px 20px 22px}.passport-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.passport-stats{grid-template-columns:1fr}.lore-card h3{font-size:20px}}

/* v9 hotspot alignment — measured against each launch artwork (percent of the scene box) */
/* Room 248 */
.hs-room-door{left:0;top:3%;width:13%;height:52%}.hs-room-248{left:33%;top:27%;width:17%;height:53%}.hs-room-strider{left:22%;top:41%;width:11%;height:23%}.hs-room-kobe{left:50%;top:50%;width:10%;height:13%}.hs-room-laptop{left:66%;top:74%;width:17%;height:15%}.hs-room-poster{left:48%;top:7%;width:9%;height:34%}.hs-room-secret{left:60.5%;top:55%;width:13.5%;height:13%}
/* Town Square (3:2) */
.hs-radio{left:86%;top:28%;width:14%;height:41%}.hs-whiskey{left:80%;top:0;width:20%;height:27%}.hs-sunflower{left:69%;top:50%;width:17%;height:19%}.hs-symbiote{left:63%;top:45%;width:8%;height:12%}.hs-signpost{left:33.5%;top:15%;width:10%;height:28%}.hs-motel{left:66%;top:26%;width:9%;height:11%}.hs-square-248{left:22.5%;top:42%;width:12.5%;height:44%}.hs-square-strider{left:5%;top:54%;width:17%;height:21%}.hs-square-kobe{left:35%;top:60%;width:8.5%;height:15%}.hs-square-secret{left:47%;top:41%;width:9%;height:13%}
/* Radio 8 */
.hs-radio-talk{left:37%;top:32%;width:17%;height:42%}.hs-radio-strider{left:15%;top:49%;width:20%;height:30%}.hs-radio-kobe{left:62%;top:51%;width:11%;height:19%}.hs-radio-broadcast{left:25%;top:10%;width:12%;height:13%}.hs-radio-signal{left:66%;top:23%;width:11%;height:11%}.hs-radio-note{left:26.5%;top:23.5%;width:8.5%;height:12.5%}.hs-radio-secret{left:58.5%;top:40%;width:4.5%;height:9%}
/* Whiskey District */
.hs-whiskey-talk{left:35%;top:40%;width:12%;height:43%}.hs-whiskey-strider{left:21%;top:51%;width:14%;height:24%}.hs-whiskey-kobe{left:47.5%;top:56%;width:6%;height:17%}.hs-whiskey-note{left:10.5%;top:43%;width:10%;height:32%}.hs-whiskey-secret2{left:86%;top:57%;width:14%;height:33%}
/* Sunflower Fields */
.hs-sunflower-talk{left:21%;top:34%;width:14%;height:48%}.hs-sunflower-strider{left:4%;top:46%;width:17%;height:21%}.hs-sunflower-kobe{left:35%;top:52%;width:11%;height:14%}.hs-sunflower-note{left:3%;top:11%;width:15%;height:22%}.hs-sunflower-secret2{left:48%;top:33%;width:7%;height:8%}
/* Symbiote Underpass */
.hs-symbiote-talk{left:22%;top:40%;width:14%;height:44%}.hs-symbiote-strider{left:6%;top:50%;width:16%;height:24%}.hs-symbiote-kobe{left:36%;top:54%;width:6.5%;height:18%}.hs-symbiote-note{left:55%;top:45%;width:18%;height:26%}.hs-symbiote-secret2{left:85.5%;top:7%;width:9%;height:14%}
/* Pet Quarter */
.hs-pet-talk{left:24.5%;top:43%;width:9.5%;height:40%}.hs-pet-strider{left:10%;top:60%;width:14.5%;height:22%}.hs-pet-kobe{left:33%;top:63%;width:6.5%;height:15%}.hs-pet-note{left:69.5%;top:1%;width:15%;height:39%}.hs-pet-secret{left:77%;top:72%;width:14%;height:11%}
/* Escorted Leave Station */
.hs-station-talk{left:14.5%;top:40%;width:12.5%;height:48%}.hs-station-strider{left:27%;top:50%;width:9%;height:21%}.hs-station-kobe{left:36%;top:54%;width:6.5%;height:17%}.hs-station-secret{left:51%;top:4%;width:33%;height:26%}.hs-station-note{left:7.5%;top:28%;width:7.5%;height:20%}
/* Burnt Bridge */
.hs-bridge-talk{left:12%;top:39%;width:14.5%;height:44%}.hs-bridge-strider{left:26.5%;top:53%;width:17%;height:26%}.hs-bridge-kobe{left:75%;top:57%;width:9.5%;height:17%}.hs-bridge-secret{left:84%;top:14%;width:15%;height:28%}.hs-bridge-note{left:3%;top:12%;width:20%;height:26%}
/* Mirror Gate */
.hs-mirror-talk{left:20%;top:38%;width:12%;height:42%}.hs-mirror-strider{left:7%;top:48%;width:13%;height:24%}.hs-mirror-kobe{left:32%;top:53%;width:7%;height:18%}.hs-mirror-note{left:39.5%;top:47%;width:5.5%;height:13%}.hs-mirror-secret{left:47%;top:20%;width:14%;height:55%}
/* Closed Doors */
.hs-closed-talk{left:30%;top:30%;width:14%;height:43%}.hs-closed-strider{left:11%;top:53%;width:19%;height:23%}.hs-closed-kobe{left:44%;top:45%;width:10%;height:14%}.hs-closed-note{left:42%;top:73%;width:20%;height:18%}.hs-closed-secret{left:76%;top:10%;width:15%;height:49%}
/* Barren Rap Land */
.hs-barren-talk{left:24%;top:41%;width:11%;height:44%}.hs-barren-strider{left:6%;top:53%;width:17%;height:25%}.hs-barren-kobe{left:35%;top:56%;width:9%;height:19%}.hs-barren-note{left:42%;top:76%;width:20%;height:18%}.hs-barren-secret{left:39%;top:2%;width:12%;height:35%}
/* Exit Gate */
.hs-outro-talk{left:19%;top:41%;width:15%;height:37%}.hs-outro-strider{left:7%;top:49%;width:12%;height:22%}.hs-outro-kobe{left:34.5%;top:59%;width:10.5%;height:21%}.hs-outro-note{left:40%;top:2%;width:42%;height:28%}.hs-outro-secret{left:82.5%;top:10%;width:15.5%;height:56%}
/* 8's House */
.hs-house-talk{left:24%;top:27%;width:20%;height:37%}.hs-house-strider{left:7%;top:42%;width:16.5%;height:25%}.hs-house-kobe{left:44.5%;top:52%;width:10.5%;height:13%}.hs-house-radio{left:36%;top:20%;width:15%;height:16%}.hs-house-map{left:77%;top:10%;width:8.5%;height:36%}.hs-house-secret{left:31.5%;top:64%;width:17%;height:18%}.hs-house-note{left:4%;top:8%;width:10%;height:26%}

/* v9 The Other 8 — same Town Square art, turned inside out */
.scene.other8-scene{aspect-ratio:3/2}
.other8-scene .scene-art{filter:hue-rotate(160deg) saturate(1.3) contrast(1.08) brightness(.82)}
.other8-wash{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 52% 33%,rgba(255,40,120,.22),transparent 30%),radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,0,0,.72) 100%);mix-blend-mode:multiply;animation:other8Pulse 5s ease-in-out infinite alternate}
@keyframes other8Pulse{to{opacity:.7}}
.hs-other8-secret{left:45.5%;top:28.5%;width:14%;height:9.5%}
.other8-message b{color:#8a0f3c}
/* The Other 8 is 3:2 and can be narrower than the viewport — keep its UI inside the art */
.other8-scene .scene-back.paper-tab{left:max(12px,calc(50% - 50vw + 12px))!important}
.other8-scene .scene-caption{left:max(12px,calc(50% - 50vw + 12px))!important;max-width:min(360px,calc(100% - 24px))!important}

/* v9 panning on any screen where the art is wider than the view; scene UI stays pinned to the viewport */
.stage.can-pan{cursor:grab}.stage.is-panning{cursor:grabbing}
.stage.is-panning .scene{transition:opacity .55s ease}
.scene-back.paper-tab,.scene-caption{transform:translate(calc(-1 * var(--pan-x,0px)),calc(-1 * var(--pan-y,0px)))}
.hs-house-note{top:14%;height:20%}
.touch-hint{pointer-events:none;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 104px)!important;left:50%!important;transform:translateX(-50%)!important}

/* v10: speech box dismisses on tap */
.dialogue{cursor:pointer}
.dialogue::after{content:'TAP TO CLOSE';position:absolute;right:14px;bottom:8px;font-size:9px;font-weight:900;letter-spacing:.12em;opacity:.45}
@media(max-width:700px){.dialogue::after{right:10px;bottom:6px;font-size:8px}}
/* v10: phone landscape — keep the Sunflower Fields sign clear of the back button */
@media(max-height:520px) and (orientation:landscape){.hs-sunflower-note{top:21%;height:12%}}

/* v11 mobile: dynamic viewport height so browser bars never hide the art */
@supports (height:100dvh){
  html,body{height:100dvh}
  .scene{height:100dvh}
  @media(max-width:700px){.scene{height:100dvh}}
  @media(max-height:520px) and (orientation:landscape){
    .scene,.scene.zoom-scene{height:max(100dvh,56.25vw)}
    .scene.square-scene,.scene.other8-scene{height:max(100dvh,66.667vw)}
    .zoom-scene .scene-back.paper-tab{top:calc(50% - 50dvh + 8px)}
    .zoom-scene .scene-caption{bottom:calc(50% - 50dvh + 8px)}
  }
}
/* keep scene controls clear of notches / rounded corners */
.scene-back.paper-tab,.scene-caption{margin-left:env(safe-area-inset-left,0px)}

/* v11 turn-your-phone prompt (portrait phones only) */
.rotate-prompt{position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:28px;background:radial-gradient(circle at 50% 40%,rgba(22,17,19,.9),rgba(8,7,7,.97) 70%);backdrop-filter:blur(10px);text-align:center}
.rotate-card{max-width:320px}
.rotate-phone{width:64px;height:108px;margin:0 auto 26px;border:4px solid #f1eadc;border-radius:14px;position:relative;animation:rotatePhone 2.6s ease-in-out infinite}
.rotate-phone::before{content:'8';position:absolute;inset:0;display:grid;place-items:center;font-weight:1000;font-size:30px;color:#f1eadc}
.rotate-phone::after{content:'';position:absolute;left:50%;bottom:6px;width:16px;height:3px;margin-left:-8px;border-radius:2px;background:#f1eadc;opacity:.6}
@keyframes rotatePhone{0%,20%{transform:rotate(0)}45%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.rotate-card h2{margin:0 0 10px;font-size:34px;line-height:.95;letter-spacing:-.03em;font-weight:1000}
.rotate-card p{margin:0 0 22px;line-height:1.45;color:#cfc8bb}
.rotate-card button{display:block;width:100%;min-height:48px;margin-top:10px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-weight:900;letter-spacing:.08em;font-size:12px}
.rotate-card button.primary{background:#f1eadc;color:#171310;border-color:#f1eadc}
@media (orientation:portrait) and (max-width:600px){
  .needs-rotate .rotate-prompt{display:grid}
}

/* v11 polish */
@media(max-width:700px){.toast{top:calc(max(12px,env(safe-area-inset-top)) + 54px);max-width:calc(100vw - 24px);text-align:center}}
@media(max-height:520px) and (orientation:landscape){.toast{top:10px}}
.broadcast-head{padding-right:48px}
@media(max-height:520px) and (orientation:landscape){.hs-whiskey{top:17%;height:11%}}
.toast{pointer-events:none}

/* v12: character portraits in the speech box */
.portrait.has-art{background-size:cover;background-position:center;color:transparent}
/* v12: touch screens have no hover — hide hotspot labels so they can't get stuck after a tap */
@media (hover:none){.hotspot::after{display:none!important}.hotspot:focus{outline:none}}
/* v12: quick full-screen button (touch devices, only while not full screen) */
.fs-quick{position:fixed;z-index:60;right:calc(max(12px,env(safe-area-inset-right)) + 106px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px);width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(8,7,7,.62);backdrop-filter:blur(8px);display:grid;place-items:center;padding:0}
.fs-quick span{width:16px;height:16px;position:relative;background:
 linear-gradient(#fff,#fff) 0 0/6px 2px no-repeat,linear-gradient(#fff,#fff) 0 0/2px 6px no-repeat,
 linear-gradient(#fff,#fff) 100% 0/6px 2px no-repeat,linear-gradient(#fff,#fff) 100% 0/2px 6px no-repeat,
 linear-gradient(#fff,#fff) 0 100%/6px 2px no-repeat,linear-gradient(#fff,#fff) 0 100%/2px 6px no-repeat,
 linear-gradient(#fff,#fff) 100% 100%/6px 2px no-repeat,linear-gradient(#fff,#fff) 100% 100%/2px 6px no-repeat}
.fs-quick.hidden{display:none}
/* v12: postcard fits a landscape phone without scrolling */
@media(max-height:520px) and (orientation:landscape){
  .postcard-card{padding:12px 16px;display:grid;grid-template-columns:auto minmax(170px,210px);grid-template-rows:auto 1fr;column-gap:16px;width:min(900px,96vw);overflow:hidden}
  .postcard-card .kicker,.postcard-card h2{grid-column:1/-1}
  .postcard-card h2{font-size:26px;margin:2px 0 8px}
  .postcard-card canvas{height:calc(100dvh - 120px);width:auto;max-width:100%}
  .postcard-actions{display:flex;flex-direction:column;justify-content:center;margin:0}
  .postcard-actions .ink-button{min-width:0;width:100%;flex:none}
}
/* v12: phone panel — clock clear of the close button; landscape uses a wider two-column layout */
.phone-top{padding-right:58px}
@media(max-height:520px) and (orientation:landscape){
  .phone-shell{width:min(760px,94vw);height:92dvh}
  .phone-shell::before{display:none}
  .phone-top{height:36px;padding-top:10px}
  .phone-screen{height:calc(100% - 36px);padding:12px 16px 14px;display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-content:start}
  .phone-screen .kicker,.phone-screen h2,.phone-screen>p{grid-column:1/-1}
  .phone-screen h2{font-size:32px;margin:0 0 2px}
  .phone-screen>p{margin:0 0 4px;font-size:13px}
  .phone-app{margin-top:8px;padding:8px 10px;min-height:44px}
  .phone-app b{width:32px;height:32px}
}
.phone-app b{flex:none;font-size:15px;overflow:hidden}.phone-app b:first-child:not(:only-child){letter-spacing:-.04em}.phone-app[href^="https://www"] b{font-size:10px}

/* v13: hint dots — every clickable thing gets a soft pulse until you've tapped it */
.hotspot::before{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,248,225,.92);box-shadow:0 0 0 0 rgba(255,236,170,.65),0 0 10px rgba(255,230,160,.7);pointer-events:none;animation:hintPulse 2.4s ease-out infinite;animation-delay:var(--hint-delay,0s);transition:opacity .3s}
@keyframes hintPulse{0%{box-shadow:0 0 0 0 rgba(255,236,170,.6),0 0 10px rgba(255,230,160,.7);transform:scale(.85)}60%{box-shadow:0 0 0 14px rgba(255,236,170,0),0 0 10px rgba(255,230,160,.5);transform:scale(1)}100%{box-shadow:0 0 0 0 rgba(255,236,170,0),0 0 10px rgba(255,230,160,.4);transform:scale(.85)}}
.hotspot.seen::before{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;animation:none;opacity:.35;box-shadow:none}
.hotspot[data-go]::before{background:rgba(160,230,255,.95);box-shadow:0 0 10px rgba(140,210,255,.8)}
.hotspot[data-secret]::before{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;opacity:.75}
html.hints-off .hotspot::before{display:none}
@media (prefers-reduced-motion:reduce){.hotspot::before{animation:none}}
.hotspot.prop:hover::after{opacity:1}

/* v13: found counter */
.found-chip{position:fixed;z-index:55;top:calc(max(12px,env(safe-area-inset-top)));right:calc(max(12px,env(safe-area-inset-right)));padding:7px 11px;background:rgba(8,7,7,.66);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#f1eadc;font-size:10px;font-weight:900;letter-spacing:.12em;pointer-events:none}
.found-chip.complete{background:#d9a931;color:#171310;border-color:#d9a931}
.found-chip.complete::before{content:'★ '}
@media(max-width:700px){.found-chip{top:calc(max(12px,env(safe-area-inset-top)) + 4px);font-size:9px;padding:6px 9px}}

/* v13: dialogue link + secret reveal */
.dialog-link{display:inline-block;margin-top:8px;padding:8px 12px;background:#171310;color:#f7f1e6;font-size:11px;font-weight:900;letter-spacing:.08em;text-decoration:none}
.dialog-link.hidden{display:none}
.dialogue.secret-found{background:#f3dc92;box-shadow:0 0 0 3px #171310,0 18px 60px rgba(217,169,49,.45)}
.dialogue.secret-found .portrait{background:#171310;color:#f3dc92;font-size:34px}
.dialogue.secret-found .dialog-name{background:#171310;color:#f3dc92}
.dialogue.stamp{animation:secretStamp .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes secretStamp{0%{transform:translateX(-50%) scale(.82);opacity:0}100%{transform:translateX(-50%) scale(1);opacity:1}}
@media(max-width:700px){@keyframes secretStamp{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}}
.hotspot.prop{z-index:13}
.passport-stats{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}@media(max-width:700px){.passport-stats{grid-template-columns:1fr 1fr}}

/* v13: speech box never covers the 8 menu / full-screen buttons */
@media(max-width:700px){.dialogue{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 58px)}}
@media(max-height:520px) and (orientation:landscape){.dialogue{left:max(12px,env(safe-area-inset-left));right:calc(max(12px,env(safe-area-inset-right)) + 180px);width:auto;transform:none}}

/* v14 sound controls */
.boot-sound{display:block;margin:12px auto 0;background:transparent;border:1px solid rgba(255,255,255,.28);color:#e9e2d4;font-weight:900;font-size:11px;letter-spacing:.14em;padding:9px 14px;min-height:36px;cursor:pointer}
.boot-sound[aria-pressed="false"]{opacity:.55}
.sound-quick{position:fixed;z-index:60;right:calc(max(12px,env(safe-area-inset-right)) + 58px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 4px);width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(8,7,7,.62);backdrop-filter:blur(8px);display:grid;place-items:center;padding:0;cursor:pointer}
.sound-quick.hidden{display:none}
.sound-quick span{position:relative;width:18px;height:16px}
.sound-quick span::before{content:'';position:absolute;left:0;top:5px;width:5px;height:6px;background:#fff;box-shadow:3px 0 0 #fff;clip-path:none}
.sound-quick span::after{content:'';position:absolute;left:2px;top:1px;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:8px solid #fff}
.sound-quick i{display:none}
.sound-quick:not(.muted) span{background:radial-gradient(circle at 0 50%,transparent 9px,#fff 9px,#fff 10.5px,transparent 11px) 3px 0/15px 16px no-repeat}
.sound-quick.muted span{background:linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%) 11px 4px/8px 8px no-repeat,linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%) 11px 4px/8px 8px no-repeat}
@media(max-height:520px) and (orientation:landscape){
  /* sideways phones: keep the art clear — sound on/off lives in the 8 menu here */
  .sound-quick{display:none!important}
  .fs-quick{right:calc(max(12px,env(safe-area-inset-right)) + 58px)}
}

/* v14: the 8 menu is a clear, labelled paper tab */
.world-mark.paper-tab{width:auto;height:44px;min-width:0;border-radius:0;opacity:1;padding:0 14px 0 6px;display:flex;align-items:center;gap:9px;
  background:#f1eadc;color:#171310;border:2px solid #171310;box-shadow:0 6px 18px rgba(0,0,0,.45);font-size:13px;letter-spacing:.14em;font-weight:1000;transform:none;cursor:pointer}
.world-mark .wm-8{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#171310;color:#f1eadc;font-size:17px;letter-spacing:0}
.world-mark.paper-tab:hover,.world-mark.paper-tab:focus-visible{background:#fff;color:#171310;border-color:#171310;transform:translateY(-1px)}
.world-mark.paper-tab.open{background:#171310;color:#f1eadc;border-color:#f1eadc}
.world-mark.paper-tab.open .wm-8{background:#f1eadc;color:#171310}
.world-mark.coach::after{content:'';position:absolute;inset:-7px;border:2px solid #f1eadc;pointer-events:none;animation:menuPulse 1.8s ease-out infinite}
@keyframes menuPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.menu-coach{position:fixed;z-index:61;right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px);background:#171310;color:#f1eadc;font-size:10px;font-weight:1000;letter-spacing:.12em;padding:8px 10px;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.4);animation:coachBob 1.8s ease-in-out infinite}
.menu-coach::after{content:'';position:absolute;right:26px;bottom:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#171310}
.menu-coach.hidden{display:none}
@keyframes coachBob{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.world-mark.coach::after,.menu-coach{animation:none}}
/* menu list: bigger, clearer items */
.world-tools{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px);background:rgba(10,9,9,.92);border:2px solid #f1eadc;padding:6px}
.world-tools button{font-size:12px;letter-spacing:.1em;padding:10px 14px;min-height:42px;color:#f1eadc}
.world-tools button:hover,.world-tools button:focus-visible{background:#f1eadc;color:#171310}
/* round buttons sit left of the wider menu tab */
.sound-quick{right:calc(max(12px,env(safe-area-inset-right)) + 124px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 2px)}
.fs-quick{right:calc(max(12px,env(safe-area-inset-right)) + 172px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 2px)}
@media(max-height:520px) and (orientation:landscape){
  .world-mark.paper-tab{height:40px}
  .world-tools{bottom:58px}
  .fs-quick{right:calc(max(12px,env(safe-area-inset-right)) + 124px)}
  .menu-coach{bottom:58px}
}
.world-tools{z-index:62}
@media(max-height:520px) and (orientation:landscape){
  .world-tools{grid-template-columns:1fr 1fr;column-gap:4px;max-height:calc(100dvh - 70px)}
  .world-tools button{min-height:38px;padding:8px 12px}
}

/* v14: How to play — big, plain, easy to read */
.tutorial-modal{z-index:230}
.tutorial-card{position:relative;width:min(760px,94vw);max-height:90vh;max-height:90dvh;overflow:auto;padding:26px 28px 24px}
.tutorial-card .kicker{margin:0}
.tutorial-card h2{margin:4px 0 16px;font-size:clamp(34px,6vw,54px);line-height:1;letter-spacing:-.03em;text-transform:none}
.tutorial-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tutorial-steps li{display:flex;gap:14px;align-items:flex-start;padding:14px;border:2px solid #1c1814;background:rgba(255,255,255,.45)}
.tutorial-steps p{margin:0;font-size:18px;line-height:1.4;color:#1c1814}
.tutorial-steps b{font-weight:1000}
.t-icon{flex:none;width:48px;height:48px;border-radius:50%;background:#1c1814;display:grid;place-items:center;font-size:24px;line-height:1}
.t-icon.t-text,.t-icon.t-eight{color:#f1eadc;font-weight:1000;font-size:26px}
.tutorial-go{display:block;width:100%;margin-top:16px;min-height:56px;font-size:18px}
@media (hover:hover) and (pointer:fine){.tutorial-steps .t-phone{display:none}}
@media(max-width:640px){.tutorial-steps{grid-template-columns:1fr}.tutorial-card{padding:22px 18px 18px}.tutorial-steps p{font-size:17px}}
@media(max-height:520px) and (orientation:landscape){
  .tutorial-card{padding:14px 18px;width:min(900px,96vw)}
  .tutorial-card h2{font-size:28px;margin:2px 0 8px}
  .tutorial-steps{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .tutorial-steps li{padding:10px;gap:10px}
  .tutorial-steps p{font-size:15px}
  .t-icon{width:38px;height:38px;font-size:19px}
  .tutorial-go{margin-top:10px;min-height:46px}
}
/* title screen buttons */
.boot-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.boot-row .boot-sound{margin:0}
.boot-copy .boot-help{padding:11px 18px;background:#f1eadc;color:#171310;border:2px solid #f1eadc;font-size:13px;letter-spacing:.12em}
.boot-copy .boot-help:hover{background:#fff;color:#171310;border-color:#fff}
.boot-copy .boot-sound{padding:11px 16px;font-size:13px}
.boot-copy small{display:block;margin-top:16px;font-size:15px;letter-spacing:.02em;color:#e9e2d4}
.tutorial-go{position:sticky;bottom:0;z-index:2;box-shadow:0 -12px 18px 4px #efe8da}
@media (orientation:landscape){.tutorial-steps .t-phone{display:none}}
@media(max-height:520px) and (orientation:landscape){.tutorial-card{padding-bottom:10px}.tutorial-steps p{font-size:14.5px}}
@media(max-height:520px) and (orientation:landscape){@keyframes secretStamp{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}}

/* v14: 8's House (new artwork) */
.hs-house-talk{left:29%;top:25%;width:15%;height:36%}
.hs-house-strider{left:38%;top:67%;width:26%;height:17%}
.hs-house-kobe{left:64%;top:66%;width:14%;height:12%}
.hs-house-secret{left:76%;top:12%;width:5%;height:15%}
.hs-house-note{left:22%;top:8%;width:9%;height:19%}
.hs-house-radio{left:11%;top:27%;width:10%;height:19%}
/* v15: tablets — speech box sits above the corner buttons */
@media (min-width:701px) and (max-width:1100px) and (min-height:521px){.dialogue{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 62px)}}
.rotate-card .rotate-tip{font-size:13px;line-height:1.4;opacity:.72;margin:-10px 0 18px}