/* Approved star-window exploration and edge-to-edge room layouts. */
body.room-exploring { overflow:hidden; }
body.room-exploring main > .chapter { display:none; }
.hero:not([data-mode="globe"]) { height:100svh; min-height:0; max-height:none; overflow-anchor:none; }
.hero:not([data-mode="globe"]) .hero-bottom { display:none; }
.hero[data-mode="grid"] #planet { touch-action:none; }
.hero[data-mode="grid"]:after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(#061322b0,transparent 23%,transparent 87%,#061322b8); }
body.room-exploring:has(.hero) .header { height:80px; padding:0 3.6%; background:linear-gradient(#061322eb,#06132222); backdrop-filter:none; }
.room-exploring .header .brand { width:clamp(180px,18vw,285px); }
.room-exploring .header nav { font-size:15px; gap:40px; }
.room-exploring .header .download { font-size:26px; padding:10px 23px; }
.scene-frame { display:none; position:absolute; inset:9px; border:1px solid #e9c4859c; z-index:45; pointer-events:none; border-radius:3px 5px 2px 4px; }
.hero:not([data-mode="globe"]) .scene-frame { display:block; }
.scene-frame i { position:absolute; width:12px; height:12px; border:1px solid #e9c485c4; border-radius:0 0 8px; top:-1px; left:-1px; }
.scene-frame i:after { content:"✧"; position:absolute; top:-8px; left:-5px; color:#f3d9a4; font:13px serif; }
.scene-frame i:nth-child(2) { left:auto; right:-1px; transform:rotate(90deg); }
.scene-frame i:nth-child(3) { top:auto; bottom:-1px; left:auto; right:-1px; transform:rotate(180deg); }
.scene-frame i:nth-child(4) { top:auto; bottom:-1px; transform:rotate(270deg); }
.hero .explore-toolbar { inset:85px 3.6% auto; z-index:42; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.hero .explore-toolbar[hidden] { display:none; }
.hero .back { color:var(--paper); font:16px var(--hand); gap:10px; pointer-events:auto; min-height:44px; }
.hero .back span { background:#061322b3; border-color:#e9c4858c; width:39px; height:39px; font:25px var(--hand); }
.hero .back b { padding:5px 7px; background:#0613228c; }
.room-count { display:none; color:var(--paper); font:15px var(--hand); }
.grid-heading { position:absolute; top:138px; left:3.6%; z-index:3; pointer-events:none; }
.grid-heading h2 { font:400 clamp(25px,2vw,36px)/1.1 var(--hand); margin:0; padding:6px 12px 9px; background:#061322df; }
.grid-heading p { display:none; }
.hero[data-mode="grid"] .scene-tools { z-index:25; left:50%; bottom:27px; transform:translateX(-50%); border:1px solid #e9c4858c; border-radius:22px; background:#061322d9; padding:7px 21px; gap:20px; font:20px var(--hand); backdrop-filter:none; }
.hero .scene-tools[hidden] { display:none; }
.hero .scene-tools #roam-toggle { display:flex; align-items:center; gap:13px; width:auto; height:auto; min-height:32px; font:inherit; color:var(--paper); }
.roam-icon { font:20px var(--body); min-width:17px; }
.tools-count { border-left:1px solid #e9c48580; padding-left:20px; white-space:nowrap; }
.grid-selection { position:absolute; z-index:24; width:210px; padding:14px 18px; background:#061322ed; border-radius:45% 5% 13% 4% / 8% 13% 5% 16%; color:var(--paper); pointer-events:auto; }
.grid-selection[hidden] { display:none; }
.grid-selection h3 { margin:0; font:400 38px/1.05 var(--hand); }
.grid-selection p { margin:5px 0 9px; font:17px var(--hand); }
.selection-thumb { display:none; }
#enter-room { position:relative; padding:3px 0 9px; font:27px var(--hand); white-space:nowrap; }
#enter-room:after { content:""; position:absolute; height:4px; bottom:0; left:0; right:0; background:var(--lime); clip-path:polygon(0 70%,40% 0,100% 24%,94% 70%,0 100%); transform:rotate(-3deg); }
.hero[data-mode="grid"] .grid-selection:focus-within { outline:1px solid #f8f2df88; }

/* Room image, frame and floating UI occupy one viewport, without a sidebar. */
.hero[data-mode="focus"] .focus-layer { inset:12px; overflow:hidden; z-index:30; background:#061322; }
.hero[data-mode="focus"] .focus-layout { inset:0; position:absolute; width:100%; height:100%; padding:0; margin:0; max-width:none; }
.hero[data-mode="focus"] .room-card { position:absolute; inset:0; width:100%; }
.hero[data-mode="focus"] .room-hex { position:absolute; inset:0; width:100%; height:100%; margin:0; clip-path:none; border-radius:0; background:#061322; animation:none; }
.hero[data-mode="focus"] .room-image { inset:0; background-size:cover; background-position:var(--room-position,50% 50%); filter:none; border-radius:0; }
.hero[data-mode="focus"] .room-loop { inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--room-position,50% 50%); border-radius:0; }
.hero[data-mode="focus"] .room-hex:after { background:linear-gradient(0deg,#061322a3,transparent 27%,transparent 84%,#06132263),linear-gradient(90deg,#06132220,transparent 35%); }
.hero[data-mode="focus"] .preview-label { display:none; }
body.room-exploring:has(.hero[data-mode="focus"]) .header { pointer-events:none; height:65px; padding:0 3%; background:transparent; backdrop-filter:none; }
.hero[data-mode="focus"] #planet { outline:none; }
.room-exploring:has(.hero[data-mode="focus"]) .header .brand { width:190px; pointer-events:auto; filter:drop-shadow(0 1px 5px #06132277); }
.room-exploring:has(.hero[data-mode="focus"]) .header nav,
.room-exploring:has(.hero[data-mode="focus"]) .header .download { display:none; }
.hero[data-mode="focus"] .explore-toolbar { top:72px; left:3%; right:auto; }
.hero[data-mode="focus"] .room-count { display:none; }
.hero[data-mode="focus"] .room-description-block { left:3%; bottom:9%; max-width:40%; color:var(--paper); }
.hero[data-mode="focus"] .room-description-block h2 { margin:0 0 4px; font:400 clamp(40px,4vw,62px)/1.05 var(--hand); letter-spacing:0; }
.hero[data-mode="focus"] #room-owner { margin:7px 0; font:20px var(--hand); }
.hero[data-mode="focus"] .room-description-block #room-description { display:block; margin:10px 0 0; font:18px/1.6 var(--hand); color:#f8f2df; }
.hero[data-mode="focus"] .room-app-link { position:absolute; z-index:4; right:3%; bottom:6%; font:30px var(--hand); padding:12px 25px; gap:20px; }
.hero[data-mode="focus"] .room-switch { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); margin:0; gap:22px; color:var(--paper); font:13px var(--body); z-index:5; }
.hero[data-mode="focus"] .room-switch button { min-width:44px; min-height:44px; padding:0; font:33px var(--hand); }
.focus-tools { position:absolute; right:3%; top:20px; z-index:8; display:flex; gap:22px; color:var(--paper); text-shadow:0 1px 8px #061322; }
.focus-tools button { min-height:32px; font:19px var(--hand); }
.focus-tools small { position:absolute; right:0; top:37px; font:10px var(--body); opacity:.8; }
.hero[data-mode="focus"] .close-focus { display:none; }
.hero[data-mode="focus"] .conversation { position:absolute; inset:0; width:100%; height:100%; max-width:none; pointer-events:none; }
.hero[data-mode="focus"] .conversation .bubble { position:absolute; width:max-content; max-width:26%; margin:0; padding:9px 18px 10px 9px; align-items:center; gap:8px; color:#273c46; background:#fff8e8ed; border-radius:50px 44px 48px 36px / 36px 38px 29px 34px; box-shadow:0 4px 14px #06132226; pointer-events:auto; opacity:1; transform:none; animation:room-note-arrive .6s both,room-note-float 6.5s ease-in-out 1.5s infinite; }
.hero[data-mode="focus"] .bubble:nth-of-type(1) { left:9%; top:28%; animation-delay:.95s,1.6s; }
.hero[data-mode="focus"] .bubble:nth-of-type(2) { right:12%; top:16%; animation-delay:1.15s,2.3s; }
.hero[data-mode="focus"] .bubble:nth-of-type(3) { right:15%; top:64%; animation-delay:1.35s,3.1s; }
.hero[data-mode="focus"] .conversation .bubble>div { padding:0; min-width:0; max-width:none; background:none; border:0; border-radius:0; backdrop-filter:none; }
.hero[data-mode="focus"] .bubble small { color:#536267; font:11px var(--body); }
.hero[data-mode="focus"] .bubble p { font:19px/1.3 var(--hand); margin:3px 0 0; }
.hero[data-mode="focus"] .bubble .avatar { width:32px; height:32px; margin:0; font:19px var(--hand); border:2px solid #fffdf4; box-shadow:0 0 0 1px #c0b59a66; background:radial-gradient(at 25% 25%,#e5dbaf,#8fa5a2); }
.hero[data-mode="focus"] .bubble .pink { background:radial-gradient(at 30% 20%,#f1e5d2,#bb9a94); }
.hero[data-mode="focus"] .bubble .lilac { background:radial-gradient(at 30% 20%,#e3dcca,#979cb7); }
.hero[data-mode="focus"] .bubble:hover { animation-play-state:paused; }
.hero.comments-hidden .conversation { display:none; }
.hero.ui-hidden .room-description-block,.hero.ui-hidden .room-app-link,.hero.ui-hidden .room-switch,.hero.ui-hidden .conversation,.hero.ui-hidden .explore-toolbar,.hero.ui-hidden #comments-toggle,.hero.ui-hidden .focus-tools small { visibility:hidden; pointer-events:none; }
body:has(.hero.ui-hidden) .header { visibility:hidden; }
.room-portal { position:absolute; z-index:39; overflow:hidden; pointer-events:none; background:#061322; border:1px solid #e9c485; box-shadow:0 0 20px #f5d69650; }
.room-portal img { width:100%; height:100%; object-fit:cover; object-position:var(--room-position,50% 50%); }
.hero.portal-opening .focus-layer { opacity:0; }
.hero.portal-opening .explore-toolbar,.hero.portal-opening .grid-selection { visibility:hidden; }
.hero.portal-reveal .focus-layer { animation:room-view-arrive .5s both; }
.hero.room-switching .room-image { animation:room-view-arrive .45s both; }
@keyframes room-view-arrive { from{opacity:.25;transform:scale(1.025)}to{opacity:1;transform:scale(1)} }
@keyframes room-note-arrive { from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0} }
@keyframes room-note-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)} }

/* Portrait is composed separately: two main columns and thumb-reachable actions. */
@media(aspect-ratio < 1/1) {
  body.room-exploring:has(.hero) .header { height:68px; padding:0 6%; background:linear-gradient(#061322f5,#061322b5); }
  .room-exploring .header .brand { width:44%; max-width:190px; }
  .room-exploring .header .download { font:23px var(--hand); padding:9px 14px; gap:8px; }
  .hero .explore-toolbar { inset:73px 6% auto; }
  .hero .back { font-size:18px; gap:7px; }
  .hero .back span { width:34px; height:34px; font-size:25px; }
  .hero .back b { padding:0; background:none; }
  .hero[data-mode="grid"] .room-count { display:block; font-size:16px; }
  .grid-heading { top:124px; left:0; width:100%; text-align:center; }
  .grid-heading h2 { display:inline-block; font:35px/1.05 var(--hand); background:none; padding:0 0 12px; position:relative; }
  .grid-heading h2:after { content:""; position:absolute; bottom:3px; height:4px; left:0; right:0; background:var(--lime); clip-path:polygon(0 65%,85% 0,100% 60%,2% 100%); transform:rotate(-2deg); }
  .grid-heading p { display:block; font:19px var(--hand); margin:4px 0 0; }
  .hero[data-mode="grid"]:after { background:linear-gradient(#061322 0,#061322f2 125px,#0613229c 185px,transparent 245px,transparent 76%,#06132280 95%); }
  .hero .grid-selection { position:absolute; inset:auto 10px calc(61px + env(safe-area-inset-bottom)); width:auto; min-height:78px; padding:12px 13px; border:1px solid #e9c485a1; border-bottom:0; border-radius:15px 18px 0 0; background:#061322ed; display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:9px; }
  .hero .grid-selection[hidden] { display:none; }
  .selection-thumb { display:block; width:52px; height:59px; object-fit:cover; border:1px solid #e9c48566; border-radius:2px; }
  .grid-selection h3 { font-size:28px; white-space:nowrap; }
  .grid-selection p { font-size:16px; margin:5px 0 0; }
  #enter-room { font:24px var(--hand); background:var(--lime); color:#182117; padding:9px 10px; clip-path:polygon(4% 6%,40% 2%,96% 0,93% 13%,100% 24%,96% 50%,100% 76%,94% 84%,97% 94%,53% 96%,6% 100%,8% 89%,0 78%,5% 50%,0 20%); }
  #enter-room:after { display:none; }
  .hero[data-mode="grid"] .scene-tools { left:10px; right:10px; bottom:10px; transform:none; border-radius:0 0 5px 5px; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); height:auto; min-height:51px; justify-content:center; font:22px var(--hand); background:#061322f2; }
  .hero:not(.has-grid-selection) .scene-tools { border-radius:20px; }
  .hero .scene-tools #roam-toggle { min-height:32px; }
  .tools-count { display:none; }
  .hero[data-mode="focus"] .focus-layer { inset:7px; }
  .hero[data-mode="focus"] .scene-frame { inset:5px; }
  body.room-exploring:has(.hero[data-mode="focus"]) .header { height:51px; padding:0 6%; background:transparent; }
  .room-exploring:has(.hero[data-mode="focus"]) .header .brand { width:150px; }
  .hero[data-mode="focus"] .explore-toolbar { top:55px; left:6%; }
  .focus-tools { top:8px; right:10px; gap:6px; flex-direction:column; align-items:flex-end; }
  .focus-tools button { font:16px var(--hand); min-height:32px; padding:0 6px; background:#06132232; border-radius:3px; }
  .focus-tools small { top:70px; font-size:8px; }
  .hero[data-mode="focus"] .room-description-block { left:6%; bottom:114px; max-width:82%; }
  .hero[data-mode="focus"] .room-description-block h2 { font-size:42px; }
  .hero[data-mode="focus"] #room-owner { font-size:18px; margin:3px 0; }
  .hero[data-mode="focus"] .room-description-block #room-description { font-size:17px; margin-top:5px; }
  .hero[data-mode="focus"] .room-app-link { display:flex; right:6%; bottom:61px; font-size:25px; padding:10px 18px; gap:13px; }
  .hero[data-mode="focus"] .room-switch { bottom:8px; gap:22px; font-size:11px; }
  .hero[data-mode="focus"] .conversation .bubble { max-width:66%; gap:5px; padding:7px 12px 8px 7px; }
  .hero[data-mode="focus"] .bubble p { font-size:16px; line-height:1.25; }
  .hero[data-mode="focus"] .bubble small { font-size:9px; }
  .hero[data-mode="focus"] .bubble .avatar { width:26px; height:26px; font-size:16px; }
  .hero[data-mode="focus"] .bubble:nth-of-type(1) { left:5%; top:24%; }
  .hero[data-mode="focus"] .bubble:nth-of-type(2) { right:5%; top:56%; }
  .hero[data-mode="focus"] .bubble:nth-of-type(3) { display:none; }
}
@media (max-width:360px) and (aspect-ratio < 1/1) {
  .hero .grid-selection { grid-template-columns:38px minmax(0,1fr) auto; gap:6px; padding-inline:9px; }
  .selection-thumb { width:38px; height:50px; }
  .grid-selection h3 { font-size:25px; }
  #enter-room { font-size:21px; padding-inline:8px; }
  .room-count { font-size:13px!important; }
}
@media(prefers-reduced-motion:reduce) {
  .hero[data-mode="focus"] .conversation .bubble,.hero.portal-reveal .focus-layer,.hero.room-switching .room-image { animation:none; }
}