/* Reference-inspired room chooser only. The original JPEG is an unmodified
   decorative sprite: no baked-in labels or screenshot-sized click overlay.
   Normal phone sizes show the whole chooser. Native dialog scrolling remains
   available for short windows, zoom, enlarged text, and safe-area insets. */
.live-dialog[data-mode="rooms"] {
  --picker-ink:#080d1b;
  --picker-muted:#565763;
  --picker-gap:clamp(8px,2cqi,12px);
  position:fixed;
  inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  margin:auto;
  width:min(680px,calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .78));
  max-width:none;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:0;
  box-sizing:border-box;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid #ffffffd9;
  border-radius:clamp(21px,4vw,28px);
  background:#fbf6f3;
  box-shadow:inset 0 3px 0 #fff9,0 22px 70px #211c313d;
  color:var(--picker-ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  container-type:inline-size;
}
.live-dialog[data-mode="rooms"]::backdrop{background:#2a263b73;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.live-dialog[data-mode="rooms"] .modal-header {
  position:relative;isolation:isolate;min-height:clamp(112px,26cqi,177px);
  padding:clamp(19px,5.6cqi,38px) 4.5cqi clamp(17px,4.5cqi,30px);
  display:flex;align-items:flex-start;gap:0;border:0;box-sizing:border-box;
}
.live-dialog[data-mode="rooms"] .modal-header>div{position:relative;z-index:1;width:67%}
.live-dialog[data-mode="rooms"] .modal-header h2 {
  margin:0;padding:0;font:800 clamp(1.7rem,7.25cqi,3.1rem)/1.04 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.045em;color:var(--picker-ink);text-shadow:none;overflow-wrap:anywhere;
}
.live-dialog[data-mode="rooms"] .modal-header h2::after {
  content:"";display:block;width:38%;height:clamp(5px,1.25cqi,9px);margin-top:8px;
  border-radius:70% 35% 55% 40%;background:linear-gradient(90deg,#ae76ed,#bd91ed 72%,#bd91ed00);transform:rotate(-1deg);
}
.live-dialog[data-mode="rooms"] .modal-header p{display:none}
.live-dialog[data-mode="rooms"] .close-button {
  position:absolute;z-index:3;right:2.6cqi;top:2.3cqi;width:44px;height:44px;min-height:44px;
  display:grid;place-items:center;flex:0 0 44px;padding:0;border-radius:50%;
  border:1px solid #d9d1cf;background:#fffaf7ed;color:#5b5b5f;font:400 30px/1 Arial,sans-serif;
  box-shadow:0 3px 8px #77636513;
}
.live-dialog[data-mode="rooms"] .modal-body{padding:0 3cqi 3cqi}
.live-dialog[data-mode="rooms"] .room-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--picker-gap);padding:0;margin:0}
.live-dialog[data-mode="rooms"] :is(.room-tile,.achievement-folder-link){position:relative;isolation:isolate;box-sizing:border-box;overflow:hidden;cursor:pointer;text-align:left;text-decoration:none;transition:box-shadow .15s ease,filter .15s ease}
.live-dialog[data-mode="rooms"] .room-grid .room-tile {
  --card-color:#f6effb;--card-accent:#dbc6ee;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;align-items:start;
  column-gap:clamp(6px,1.9cqi,13px);row-gap:0;min-width:0;min-height:max(94px,20.5cqi);
  padding:clamp(10px,2.5cqi,17px) clamp(8px,2cqi,14px);
  border:1px solid color-mix(in srgb,var(--card-accent) 45%,#ffffff);border-radius:clamp(14px,3.3cqi,23px);
  background:linear-gradient(125deg,var(--card-color) 50%,var(--card-accent));
  box-shadow:inset 0 1px 1px #fffc,0 4px 7px #4b344513;color:var(--picker-ink);
}
.live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="keepsakes"]{--card-color:#fff4e9;--card-accent:#f5cea5}
.live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="porch"]{--card-color:#edf5fd;--card-accent:#afd7f1}
.live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="campfire"]{--card-color:#ffebe6;--card-accent:#f1aaa5}
.live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="play"]{--card-color:#efefff;--card-accent:#b9bce9}
.live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="kitchen"]{--card-color:#f2f8ec;--card-accent:#c3d9ae}
.live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="beta"]{--card-color:#eeeeef;--card-accent:#d1d1d2;grid-column:1/-1;min-height:max(62px,15.5cqi);align-items:center}
.live-dialog[data-mode="rooms"] .room-picker-copy{position:relative;z-index:1;display:block;min-width:0;padding-top:2px}
.live-dialog[data-mode="rooms"] .room-grid .room-tile b {
  display:block;margin:0;padding:0 4px 0 0;font:800 clamp(.85rem,3.65cqi,1.5rem)/1.2 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.035em;color:var(--picker-ink);overflow-wrap:anywhere;
}
.live-dialog[data-mode="rooms"] .room-grid .room-tile small {
  display:block;max-width:10.7ch;margin:4px 0 0;padding:0;font:400 clamp(.72rem,2.75cqi,1.12rem)/1.28 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.02em;color:var(--picker-muted);overflow-wrap:anywhere;
}
.live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="porch"] small{max-width:none}
.live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="beta"] :is(b,small){max-width:none;margin-left:0}
.live-dialog[data-mode="rooms"] .room-picker-symbol {
  position:relative;z-index:1;display:block;flex:none;width:clamp(28px,8.8cqi,58px);aspect-ratio:1;border-radius:50%;
  background-image:url('room-picker-reference.jpg');background-repeat:no-repeat;
  background-size:var(--sprite-size);background-position:var(--sprite-position);
}
.live-dialog[data-mode="rooms"] :is(.room-picker-art,.room-picker-header-art){
  position:absolute;z-index:0;right:0;bottom:0;display:block;pointer-events:none;
  background-image:url('room-picker-reference.jpg');background-repeat:no-repeat;
  background-size:var(--sprite-size);background-position:var(--sprite-position);
}
.live-dialog[data-mode="rooms"] .room-picker-art{width:47%;height:auto;aspect-ratio:var(--art-ratio);mask-image:linear-gradient(90deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%)}
.live-dialog[data-mode="rooms"] .room-picker-art-fridge{width:auto;height:100%}
.live-dialog[data-mode="rooms"] .room-picker-art-beta{width:35%}
.live-dialog[data-mode="rooms"] .room-picker-header-art {
  width:46%;aspect-ratio:444/198;max-height:100%;
  clip-path:polygon(0 0,78% 0,78% 23%,100% 23%,100% 100%,0 100%);
  mask-image:linear-gradient(90deg,transparent,#000 18%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);
}
.live-dialog[data-mode="rooms"] .room-picker-chevron {
  position:absolute;z-index:2;right:clamp(9px,3cqi,20px);top:clamp(13px,3.7cqi,25px);width:9px;height:9px;
  border:solid #3d4149;border-width:0 2px 2px 0;transform:rotate(-45deg);pointer-events:none;
}
.live-dialog[data-mode="rooms"] .room-grid .room-tile.current{border-color:#9580ac;box-shadow:inset 0 0 0 1px #9580ac66,0 4px 7px #4b344513}
.live-dialog[data-mode="rooms"] .room-grid .room-tile.current::after{content:none;display:none}
.live-dialog[data-mode="rooms"] .room-grid .room-tile .room-location-badge {
  display:inline-flex;align-items:center;width:fit-content;max-width:100%;gap:3px;margin:5px 0 0;padding:2px 4px;
  border:1px solid #77658f55;border-radius:5px;background:#fffffff0;color:#56486a;font-size:.6rem;line-height:1.2;white-space:normal;
}
.live-dialog[data-mode="rooms"] .room-location-badge .location-person{width:10px;height:10px;flex:none}
.live-dialog[data-mode="rooms"] .room-tile .room-unread-dot{z-index:3;right:5px;top:5px;width:10px;height:10px;min-width:10px;border:2px solid white;background:#2478c6;border-radius:50%;box-shadow:0 0 0 1px #2478c633}
.live-dialog[data-mode="rooms"] .achievement-folder-link {
  display:flex;align-items:center;gap:clamp(8px,2.3cqi,16px);width:100%;min-height:max(58px,13.5cqi);margin:0 0 var(--picker-gap);
  padding:clamp(8px,1.8cqi,13px) clamp(8px,2cqi,14px);border:1px solid #e9dcee;border-radius:clamp(14px,3.3cqi,23px);
  background:linear-gradient(110deg,#fcecff,#f3e8fc);box-shadow:inset 0 1px 1px #fff,0 4px 7px #4b344513;color:var(--picker-ink);
}
.live-dialog[data-mode="rooms"] .achievement-folder-symbol{width:auto;height:auto;flex:0 0 auto;margin:0;background:none;border:0;border-radius:0;box-shadow:none}
.live-dialog[data-mode="rooms"] .achievement-folder-link>span:nth-child(2){min-width:0;padding-right:15px}
.live-dialog[data-mode="rooms"] .achievement-folder-link b{display:block;font-size:clamp(.94rem,3.65cqi,1.5rem);font-weight:800;line-height:1.2;letter-spacing:-.03em;color:var(--picker-ink)}
.live-dialog[data-mode="rooms"] .achievement-folder-link small{display:block;margin-top:4px;font-size:clamp(.72rem,2.75cqi,1.12rem);line-height:1.3;color:var(--picker-muted);letter-spacing:-.02em}
.live-dialog[data-mode="rooms"] .achievement-folder-link>.room-picker-chevron{top:calc(50% - 5px)}
.live-dialog[data-mode="rooms"] :is(.room-tile,.achievement-folder-link,.close-button):focus-visible{outline:3px solid #7650a0;outline-offset:-4px}
@media (hover:hover){.live-dialog[data-mode="rooms"] :is(.room-tile,.achievement-folder-link):hover{filter:brightness(1.025);box-shadow:0 5px 12px #4b344526}}
/* Very narrow or short screens can scroll rather than shrink the text away.
   Two columns remain the reference layout; at 200% text all labels can wrap. */
@media (max-width:600px){.live-dialog[data-mode="rooms"]{width:calc(100% - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:540px}}
@media (max-width:350px){
  .live-dialog[data-mode="rooms"] .modal-header{min-height:106px}
  .live-dialog[data-mode="rooms"] .modal-header h2{font-size:1.55rem}
  .live-dialog[data-mode="rooms"] .room-grid .room-tile{min-height:92px;column-gap:5px;padding-inline:7px}
  .live-dialog[data-mode="rooms"] .room-picker-symbol{width:26px}
  .live-dialog[data-mode="rooms"] .room-grid .room-tile b{font-size:.8rem}
  .live-dialog[data-mode="rooms"] .room-grid .room-tile small{font-size:.69rem}
  .live-dialog[data-mode="rooms"] .room-picker-chevron{right:8px;width:7px;height:7px}
  .live-dialog[data-mode="rooms"] .room-grid .room-tile[data-room="beta"]{min-height:60px}
}
@media (min-width:520px) and (max-height:500px) and (orientation:landscape){
  .live-dialog[data-mode="rooms"]{width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:680px}
  .live-dialog[data-mode="rooms"] .modal-header{min-height:105px;padding-block:15px}
  .live-dialog[data-mode="rooms"] .modal-header h2{font-size:1.9rem}
  .live-dialog[data-mode="rooms"] .room-grid .room-tile{min-height:94px}
}
@media (prefers-reduced-motion:reduce){.live-dialog[data-mode="rooms"] :is(.room-tile,.achievement-folder-link){transition:none}}
@media (forced-colors:active){
  .live-dialog[data-mode="rooms"]{background:Canvas;color:CanvasText;border:1px solid CanvasText}
  .live-dialog[data-mode="rooms"] :is(.room-picker-art,.room-picker-header-art,.room-picker-symbol){visibility:hidden}
  .live-dialog[data-mode="rooms"] :is(.room-tile,.achievement-folder-link,.close-button){border:1px solid ButtonText;background:ButtonFace;box-shadow:none}
  .live-dialog[data-mode="rooms"] .room-grid .room-tile.current{outline:2px solid Highlight}
  .live-dialog[data-mode="rooms"] :is(.modal-header h2,.room-grid .room-tile b,.room-grid .room-tile small,.achievement-folder-link b,.achievement-folder-link small){color:CanvasText}
  .live-dialog[data-mode="rooms"] .room-picker-chevron{border-color:ButtonText}
  .live-dialog[data-mode="rooms"] .room-tile .room-unread-dot{background:Highlight;border-color:Canvas}
}
/* Source-image rectangles: (left, top, width, height), in the original 1024×1536.
   These crop only illustrations; room names and descriptions are never pixels. */
.live-dialog[data-mode="rooms"] .room-picker-header-art{--sprite-size:230.630631% 775.757576%;--sprite-position:94.827586% 15.620329%}
.live-dialog[data-mode="rooms"] .room-picker-symbol-achievements{--sprite-size:1233.734940% 1850.602410%;--sprite-position:7.757705% 29.318651%}
.live-dialog[data-mode="rooms"] .room-picker-symbol-fridge{--sprite-size:1204.705882% 1807.058824%;--sprite-position:7.774228% 40.385941%}
.live-dialog[data-mode="rooms"] .room-picker-symbol-keepsakes{--sprite-size:1190.697674% 1786.046512%;--sprite-position:57.782516% 40.344828%}
.live-dialog[data-mode="rooms"] .room-picker-symbol-porch{--sprite-size:1190.697674% 1786.046512%;--sprite-position:7.782516% 55.172414%}
.live-dialog[data-mode="rooms"] .room-picker-symbol-campfire{--sprite-size:1190.697674% 1786.046512%;--sprite-position:57.889126% 55.241379%}
.live-dialog[data-mode="rooms"] .room-picker-symbol-play{--sprite-size:1190.697674% 1786.046512%;--sprite-position:7.782516% 70.620690%}
.live-dialog[data-mode="rooms"] .room-picker-symbol-kitchen{--sprite-size:1190.697674% 1786.046512%;--sprite-position:57.782516% 70.758621%}
.live-dialog[data-mode="rooms"] .room-picker-symbol-beta{--sprite-size:1190.697674% 1786.046512%;--sprite-position:7.782516% 85.724138%}
.live-dialog[data-mode="rooms"] .room-picker-art-fridge{--sprite-size:701.369863% 775.757576%;--sprite-position:40.432802% 42.002990%;--art-ratio:146/198}
.live-dialog[data-mode="rooms"] .room-picker-art-keepsakes{--sprite-size:568.888889% 1259.016393%;--sprite-position:93.601896% 45.120226%;--art-ratio:180/122}
.live-dialog[data-mode="rooms"] .room-picker-art-porch{--sprite-size:711.111111% 1190.697674%;--sprite-position:40.568182% 60.412225%;--art-ratio:144/129}
.live-dialog[data-mode="rooms"] .room-picker-art-campfire{--sprite-size:544.680851% 1290.756303%;--sprite-position:93.540670% 60.691602%;--art-ratio:188/119}
.live-dialog[data-mode="rooms"] .room-picker-art-play{--sprite-size:616.867470% 1066.666667%;--sprite-position:39.044289% 75.933908%;--art-ratio:166/144}
.live-dialog[data-mode="rooms"] .room-picker-art-kitchen{--sprite-size:538.947368% 1052.054795%;--sprite-position:93.525180% 75.971223%;--art-ratio:190/146}
.live-dialog[data-mode="rooms"] .room-picker-art-beta{--sprite-size:379.259259% 1190.697674%;--sprite-position:86.339523% 88.130775%;--art-ratio:270/129}
/* Keep these four captions in the quiet left-hand area below their icons.
   Campfire and Play Area retain the approved caption layout. The small matching
   paper backing protects readability when enlarged text makes a card taller. */
.live-dialog[data-mode="rooms"] .room-grid .room-tile:is([data-room="fridge"],[data-room="keepsakes"],[data-room="porch"],[data-room="kitchen"]) small {
  margin-left:calc(-1 * clamp(21px,7cqi,38px));
  margin-top:max(14px,4.2cqi);
  max-width:clamp(52px,18cqi,112px);
  padding:0 1px;
  border-radius:3px;
  background:var(--card-color);
  box-shadow:0 0 3px 2px var(--card-color);
  overflow-wrap:anywhere;
}
/* A glossy blue unread bubble, immediately left of the existing arrow.
   Both share the same top/right anchors; the 7px gap clears the rotated chevron.
   State, accessible labels and the current-room marker are unchanged. */
.live-dialog[data-mode="rooms"] .room-tile .room-unread-dot {
  width:14px;height:14px;min-width:14px;
  right:calc(clamp(9px,3cqi,20px) + 18px);
  top:calc(clamp(13px,3.7cqi,25px) - 2px);
  border:1px solid #d5f2ff;
  background:radial-gradient(circle at 29% 25%,#fff 0 8%,#bbf0ff 14%,#4cb9f5 34%,#0e83dd 62%,#0756b9 83%,#053e8e 100%);
  box-shadow:inset 1px 1px 2px #ffffffb3,inset -1px -2px 3px #003c8a73,0 1px 3px #16568973;
}
.live-dialog[data-mode="rooms"] .room-grid .room-tile.has-unread b{padding-right:calc(clamp(9px,3cqi,20px) + 36px - clamp(8px,2cqi,14px))}
@media (max-width:350px){
  .live-dialog[data-mode="rooms"] .room-tile .room-unread-dot{right:25px;top:11px}
}
@media (forced-colors:active){
  .live-dialog[data-mode="rooms"] .room-grid .room-tile:is([data-room="fridge"],[data-room="keepsakes"],[data-room="porch"],[data-room="kitchen"]) small{background:Canvas;box-shadow:none}
  .live-dialog[data-mode="rooms"] .room-tile .room-unread-dot{background:Highlight;border-color:Canvas;box-shadow:none}
}