:root{
  --room-edge:rgba(41,231,255,.36);
  --room-panel:rgba(8,19,44,.92);
  --room-panel-strong:rgba(6,16,38,.97);
  --room-soft:rgba(169,196,214,.88);
}

/* Expansion 5 Step 6C: hidden-state safety + sticky-header spacing.
   Author CSS must never override the native [hidden] contract. */
.library-room-page [hidden]{display:none!important}
#room-hero,#room-editor,#room-customizer{scroll-margin-top:110px}

.library-room-page .site-header{z-index:60}
.library-room-main{
  width:min(1500px,calc(100% - 30px));
  margin:20px auto 0;
}
.room-loading,.room-error{
  padding:32px;
  display:flex;
  gap:18px;
  align-items:center;
  min-height:190px;
}
.room-loading h1,.room-error h1{margin:5px 0 8px;font-size:clamp(30px,4vw,52px)}
.room-loading p,.room-error p{margin:0;color:var(--muted)}
.room-spinner{
  width:48px;height:48px;border-radius:50%;
  border:4px solid rgba(41,231,255,.18);
  border-top-color:var(--cyan);
  animation:room-spin .9s linear infinite;
  flex:0 0 auto;
}
@keyframes room-spin{to{transform:rotate(360deg)}}
.room-error-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.room-hero{
  position:relative;
  min-height:470px;
  border:1px solid var(--room-edge);
  border-radius:26px;
  overflow:hidden;
  background:#061022;
  box-shadow:0 30px 100px rgba(0,0,0,.42),0 0 45px rgba(41,231,255,.09);
  isolation:isolate;
}
.room-wallpaper{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 70% 30%,rgba(255,95,210,.24),transparent 38%),
    linear-gradient(135deg,#091933,#101f49 42%,#0a1534 100%);
  background-size:cover;
  background-position:center;
  z-index:0;
  transform:scale(1.015);
}
.room-hero-shade{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(2,7,18,.88) 0%,rgba(2,7,18,.62) 28%,rgba(2,7,18,.08) 58%,rgba(2,7,18,.3) 100%),
    linear-gradient(180deg,rgba(3,8,20,.02) 42%,rgba(3,8,20,.84) 100%);
  pointer-events:none;
}
.room-bookend{
  position:absolute;
  bottom:0;
  width:clamp(115px,12vw,190px);
  max-height:82%;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.55));
}
.room-bookend-left{left:10px}
.room-bookend-right{right:10px;transform:scaleX(-1)}
.room-pet{
  position:absolute;
  right:18%;
  bottom:22px;
  width:clamp(90px,10vw,155px);
  max-height:42%;
  object-fit:contain;
  z-index:3;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.55));
}
.room-identity{
  position:absolute;
  left:clamp(28px,9vw,150px);
  bottom:34px;
  z-index:5;
  display:flex;
  align-items:flex-end;
  gap:20px;
  max-width:min(760px,64%);
}
.room-avatar-wrap{
  width:156px;height:156px;flex:0 0 156px;
  position:relative;
  border-radius:24px;
  display:grid;place-items:center;
}
.room-avatar{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:22px;
  border:3px solid rgba(41,231,255,.78);
  background:#071024;
  box-shadow:0 0 0 4px rgba(5,10,24,.78),0 0 32px rgba(41,231,255,.3);
}
.room-avatar-frame{
  position:absolute;inset:-10%;
  width:120%;height:120%;
  object-fit:contain;
  pointer-events:none;
  z-index:2;
}
.room-identity-copy{
  min-width:0;
  padding:16px 18px 14px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(3,9,23,.88),rgba(3,9,23,.54));
  border:1px solid rgba(94,230,255,.18);
  backdrop-filter:blur(6px);
}
.room-name-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.room-name-line h1{
  margin:0;
  font-size:clamp(30px,4vw,54px);
  letter-spacing:-.045em;
  line-height:.98;
}
.room-role-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:5px 10px;border-radius:999px;
  border:1px solid rgba(212,107,255,.55);
  background:rgba(212,107,255,.12);
  color:#f0a8ff;font-weight:900;font-size:12px;text-transform:uppercase;
}
.room-title{margin:8px 0 2px;color:var(--cyan);font-weight:900;font-size:18px}
.room-bio{margin:4px 0 10px;color:#e6f7ff;font-size:16px;max-width:630px}
.room-meta{display:flex;gap:12px;flex-wrap:wrap;color:#bdd8e8;font-size:13px}
.room-meta span{
  padding:6px 9px;border:1px solid rgba(94,230,255,.16);
  border-radius:999px;background:rgba(5,10,24,.48)
}
.room-cosmetic-labels{
  position:absolute;
  right:28px;bottom:28px;z-index:5;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
  max-width:44%;
}
.room-cosmetic-labels span{
  padding:9px 12px;border-radius:999px;
  border:1px solid rgba(41,231,255,.32);
  background:rgba(3,9,23,.78);
  color:#dffbff;font-size:12px;font-weight:800;
  backdrop-filter:blur(7px);
}
.room-owner-actions{
  position:absolute;right:28px;top:24px;z-index:6;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
  max-width:55%;
}
.room-local-message{
  display:inline-flex;align-items:center;
  padding:9px 12px;border-radius:12px;
  border:1px solid rgba(114,255,157,.45);
  background:rgba(114,255,157,.1);
  color:#caffda;font-weight:800;font-size:12px;
}

.room-tabs{
  margin-top:14px;
  padding:10px;
  display:flex;gap:8px;flex-wrap:wrap;
  overflow:visible;
}
.room-tab,.room-cosmetic-tab{
  appearance:none;border:1px solid var(--line);border-radius:999px;
  background:rgba(16,31,73,.68);color:var(--ink);
  min-height:44px;padding:9px 18px;font:inherit;font-weight:900;cursor:pointer;
}
.room-tab[aria-selected="true"],.room-cosmetic-tab[aria-selected="true"]{
  border-color:rgba(255,95,210,.78);
  color:#ff8de0;
  box-shadow:0 0 0 1px rgba(255,95,210,.18),0 0 22px rgba(255,95,210,.1);
}
.room-tab:hover,.room-cosmetic-tab:hover{border-color:var(--cyan)}

.room-body-grid{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(300px,.72fr);
  gap:16px;
  margin-top:16px;
  align-items:start;
}
.room-primary,.room-sidebar{display:grid;gap:16px}
.room-panel,.room-side-card,.room-editor,.room-customizer{padding:22px}
.room-panel-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  margin-bottom:16px;
}
.room-panel-head h2,.room-side-card h2{
  margin:4px 0 0;
  font-size:clamp(25px,3vw,38px);
  line-height:1.05;
  letter-spacing:-.035em;
}
.room-panel-head p{margin:7px 0 0;color:var(--muted)}
.room-chip{
  padding:7px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--cyan);font-size:12px;font-weight:900;white-space:nowrap;
}
.room-empty-state{
  min-height:210px;
  display:grid;place-content:center;
  text-align:center;
  padding:28px;
  border:1px dashed rgba(94,230,255,.28);
  border-radius:18px;
  background:rgba(5,10,24,.28);
}
.room-empty-state strong{font-size:22px}
.room-empty-state p{margin:6px auto 0;color:var(--muted);max-width:560px}
.room-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.room-link-card{
  display:block;
  min-height:142px;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(5,10,24,.38);
  color:var(--ink);text-decoration:none;
}
.room-link-card:hover{border-color:var(--cyan);transform:translateY(-1px)}
.room-link-card strong{display:block;font-size:20px;margin-bottom:7px}
.room-link-card span{color:var(--muted)}
.room-about-copy{font-size:18px;color:#dff6ff;white-space:pre-wrap}

.room-equipped-list{display:grid;gap:8px;margin:16px 0}
.room-equipped-list div{
  display:flex;justify-content:space-between;gap:18px;
  border-bottom:1px solid rgba(94,230,255,.12);
  padding:9px 0;
}
.room-equipped-list dt{color:var(--muted)}
.room-equipped-list dd{margin:0;text-align:right;font-weight:900}
.room-side-card p{color:var(--muted)}
.room-side-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

.room-editor,.room-customizer{margin-top:16px}
.room-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.room-form-grid label{font-weight:900;color:#dff8ff}
.room-form-grid input,.room-form-grid select,.room-form-grid textarea{
  width:100%;
  margin-top:7px;
  background:#071126;
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:14px;
  padding:12px 13px;
  font:inherit;
}
.room-form-grid textarea{min-height:150px;resize:vertical}
.room-form-full{grid-column:1/-1}
.room-form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}

.room-customizer-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.room-preview-banner{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:14px;
  border:1px solid rgba(212,107,255,.44);
  background:rgba(212,107,255,.08);
  border-radius:16px;
}
.room-preview-banner strong{color:#f3a2ff}
.room-preview-banner span{color:var(--muted);flex:1 1 240px}
.room-cosmetic-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.room-cosmetic-grid[data-type="background"]{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.room-cosmetic-grid[data-type="bookend"]{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.room-cosmetic-card{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(10,24,55,.74),rgba(5,10,24,.58));
  min-width:0;
  display:flex;
  flex-direction:column;
  box-shadow:0 14px 36px rgba(0,0,0,.2);
}
.room-cosmetic-card:hover{
  border-color:rgba(41,231,255,.44);
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
.room-cosmetic-card.is-equipped{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(41,231,255,.18),0 16px 42px rgba(0,0,0,.28)}
.room-cosmetic-preview{
  aspect-ratio:1;
  background:
    radial-gradient(circle at 50% 42%,rgba(41,231,255,.08),transparent 55%),
    #061022;
  display:grid;place-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(94,230,255,.14);
}
.room-cosmetic-grid[data-type="background"] .room-cosmetic-preview{
  aspect-ratio:16/5;
  min-height:0;
}
.room-cosmetic-preview.is-tall{aspect-ratio:1}
.room-cosmetic-preview img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.room-cosmetic-grid[data-type="background"] .room-cosmetic-preview img{
  object-fit:cover;
}
.room-cosmetic-preview.is-tall img{object-fit:contain;padding:18px}
.room-cosmetic-grid[data-type="bookend"] .room-cosmetic-preview.is-tall img{
  padding:22px 28px;
  max-height:280px;
}
.room-cosmetic-info{
  padding:16px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
.room-cosmetic-info h3{font-size:17px;margin:0 0 5px}
.room-cosmetic-info p{font-size:13px;color:var(--muted);margin:0;min-height:42px;line-height:1.45}
.room-cosmetic-meta{
  display:flex;justify-content:space-between;gap:8px;align-items:center;
  margin-top:12px;font-size:12px;font-weight:900;
}
.room-cosmetic-tier{text-transform:uppercase;color:#f09eff}
.room-cosmetic-price{color:var(--cyan)}
.room-cosmetic-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.room-cosmetic-actions .btn{flex:1 1 auto;padding:8px 10px;font-size:12px;min-height:40px}
.room-cosmetic-actions .btn[disabled]{opacity:.48;cursor:not-allowed;transform:none}

@media(max-width:1100px){
  .room-hero{min-height:540px}
  .room-identity{left:34px;max-width:75%}
  .room-cosmetic-labels{left:34px;right:auto;bottom:14px;max-width:72%;justify-content:flex-start}
  .room-body-grid{grid-template-columns:1fr}
  .room-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .room-cosmetic-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .library-room-main{width:min(100% - 18px,1500px)}
  .room-hero{min-height:610px}
  .room-bookend{width:110px;opacity:.9}
  .room-pet{right:18px}
  .room-owner-actions{left:18px;right:18px;top:16px;max-width:none;justify-content:flex-start}
  .room-identity{
    left:18px;right:18px;bottom:64px;max-width:none;
    align-items:center;
  }
  .room-avatar-wrap{width:126px;height:126px;flex-basis:126px}
  .room-name-line h1{font-size:34px}
  .room-cosmetic-labels{left:18px;right:18px;max-width:none}
  .room-sidebar{grid-template-columns:1fr}
  .room-cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .room-hero{min-height:700px;border-radius:20px}
  .room-hero-shade{
    background:
      linear-gradient(180deg,rgba(2,7,18,.1),rgba(2,7,18,.42) 34%,rgba(2,7,18,.94) 68%),
      linear-gradient(90deg,rgba(2,7,18,.28),rgba(2,7,18,.18));
  }
  .room-bookend{width:88px;bottom:180px}
  .room-identity{
    bottom:92px;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:end;
  }
  .room-avatar-wrap{width:96px;height:96px}
  .room-identity-copy{padding:12px}
  .room-name-line h1{font-size:27px}
  .room-title{font-size:15px}
  .room-bio{font-size:14px}
  .room-meta{font-size:11px}
  .room-cosmetic-labels{bottom:16px}
  .room-owner-actions .btn{font-size:12px;padding:8px 10px}
  .room-tabs{overflow-x:auto;flex-wrap:nowrap}
  .room-tab{white-space:nowrap}
  .room-panel,.room-side-card,.room-editor,.room-customizer{padding:16px}
  .room-link-grid,.room-form-grid,.room-cosmetic-grid{grid-template-columns:1fr}
  .room-form-full{grid-column:auto}
}

.room-editor,.room-customizer,.room-hero{scroll-margin-top:96px}
.room-card-message{
  display:block;
  margin-top:9px;
  padding:8px 10px;
  border-radius:11px;
  border:1px solid rgba(114,255,157,.4);
  background:rgba(114,255,157,.08);
  color:#caffda;
  font-size:12px;
  font-weight:800;
}
.room-card-message.is-error{
  border-color:rgba(255,100,124,.52);
  background:rgba(255,100,124,.09);
  color:#ffd0d7;
}

/* Step 6B polish: never show empty status pills. */
.room-local-message[hidden],.room-card-message[hidden]{display:none!important}

@media(max-width:1100px){
  .room-cosmetic-grid[data-type="background"],
  .room-cosmetic-grid[data-type="bookend"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .room-cosmetic-grid[data-type="background"],
  .room-cosmetic-grid[data-type="bookend"]{grid-template-columns:1fr}
  .room-cosmetic-grid[data-type="background"] .room-cosmetic-preview{aspect-ratio:16/6}
}

/* Expansion 5 Step 6D: page-state guard. Inline critical CSS in library-room.html
   is authoritative; these rules are the stylesheet backup. */
body.library-room-page[data-room-state="loading"] #room-loading{display:flex!important}
body.library-room-page:not([data-room-state="loading"]) #room-loading{display:none!important}
body.library-room-page[data-room-state="error"] #room-error{display:flex!important}
body.library-room-page:not([data-room-state="error"]) #room-error{display:none!important}
body.library-room-page[data-room-state="ready"] #room-shell{display:block!important}
body.library-room-page:not([data-room-state="ready"]) #room-shell{display:none!important}


/* ==========================================================================\n   Expansion 5 Step 6E — Library Room hero composition rebuild\n   Goal: match the approved mockup's composition instead of looking like a\n   profile card pasted over a banner. Wallpaper, bookends, avatar/frame and\n   pet remain independent layers.\n   ========================================================================== */

.room-hero{
  min-height:410px;
  border-radius:24px;
  background:#040b18;
  box-shadow:
    0 24px 70px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(41,231,255,.05),
    0 0 34px rgba(41,231,255,.06);
}
.room-wallpaper{
  transform:none;
  background-size:cover;
  background-position:center center;
  filter:saturate(1.05) contrast(1.02);
}
.room-hero-shade{
  background:
    linear-gradient(90deg,rgba(2,7,18,.72) 0%,rgba(2,7,18,.46) 22%,rgba(2,7,18,.11) 48%,rgba(2,7,18,.03) 72%,rgba(2,7,18,.18) 100%),
    linear-gradient(180deg,rgba(2,7,18,.02) 45%,rgba(2,7,18,.22) 66%,rgba(2,7,18,.78) 100%);
}
.room-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:5px;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(41,231,255,.5) 18%,rgba(255,95,210,.4) 50%,rgba(41,231,255,.5) 82%,transparent);
  opacity:.5;
}

.room-bookend{
  bottom:12px;
  width:clamp(108px,10vw,160px);
  max-height:68%;
  z-index:3;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.58));
}
.room-bookend-left{left:16px}
.room-bookend-right{right:16px}
.room-pet{
  right:22%;
  bottom:18px;
  width:clamp(82px,8vw,132px);
  max-height:34%;
  z-index:4;
}

.room-identity{
  left:clamp(34px,5.2vw,82px);
  bottom:24px;
  max-width:min(780px,68%);
  gap:18px;
  align-items:center;
}
.room-avatar-wrap{
  width:138px;
  height:138px;
  flex:0 0 138px;
  border-radius:24px;
}
.room-avatar{
  border-radius:22px;
  border:3px solid rgba(41,231,255,.82);
  box-shadow:
    0 0 0 5px rgba(3,10,22,.78),
    0 14px 34px rgba(0,0,0,.4),
    0 0 28px rgba(41,231,255,.22);
}
.room-identity-copy{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.room-name-line{
  gap:9px;
  align-items:center;
}
.room-name-line h1{
  font-size:clamp(30px,3.2vw,44px);
  letter-spacing:-.04em;
  line-height:1;
}
.room-role-badge{
  min-height:26px;
  padding:4px 8px;
  background:rgba(12,13,31,.74);
  border-color:rgba(255,95,210,.55);
  font-size:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.room-title{
  margin:8px 0 3px;
  font-size:16px;
  color:#30efff;
  text-shadow:0 1px 8px rgba(0,0,0,.75);
}
.room-bio{
  margin:4px 0 8px;
  max-width:610px;
  font-size:15px;
  line-height:1.45;
  color:#eefaff;
}
.room-meta{
  gap:12px;
  font-size:12px;
  color:#d2e8f3;
}
.room-meta span{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}
.room-meta span + span::before{
  content:"•";
  margin-right:12px;
  color:rgba(41,231,255,.7);
}

.room-cosmetic-labels{
  right:24px;
  bottom:20px;
  max-width:42%;
  gap:7px;
  z-index:6;
}
.room-cosmetic-labels span{
  padding:8px 11px;
  background:rgba(2,9,22,.74);
  border-color:rgba(41,231,255,.3);
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
}

/* Owner controls belong with the section tabs, not floating over the room art. */
.room-tabs{
  align-items:center;
  gap:8px;
  padding:10px 12px;
  min-height:64px;
}
.room-owner-actions{
  position:static;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:none;
}
.room-owner-actions[hidden]{display:none!important}
.room-owner-actions .btn{
  min-height:42px;
  padding:9px 14px;
  white-space:nowrap;
}
.room-owner-actions .room-local-message{
  flex-basis:100%;
  margin-left:auto;
  max-width:420px;
}

/* Tighten the first content row so the hero feels like one designed profile. */
.room-body-grid{margin-top:14px;gap:14px}
.room-panel,.room-side-card{box-shadow:0 12px 32px rgba(0,0,0,.12)}

@media(max-width:1100px){
  .room-hero{min-height:440px}
  .room-identity{left:32px;max-width:72%}
  .room-cosmetic-labels{right:20px;left:auto;bottom:18px;max-width:48%;justify-content:flex-end}
  .room-owner-actions{width:100%;margin-left:0;justify-content:flex-start;padding-top:2px}
}
@media(max-width:820px){
  .room-hero{min-height:520px}
  .room-identity{left:20px;right:20px;bottom:62px;max-width:none;align-items:center}
  .room-avatar-wrap{width:118px;height:118px;flex-basis:118px}
  .room-cosmetic-labels{left:20px;right:20px;bottom:16px;max-width:none;justify-content:flex-start}
  .room-tabs{align-items:flex-start}
}
@media(max-width:620px){
  .room-hero{min-height:610px}
  .room-hero-shade{
    background:
      linear-gradient(180deg,rgba(2,7,18,.05) 26%,rgba(2,7,18,.35) 48%,rgba(2,7,18,.92) 72%),
      linear-gradient(90deg,rgba(2,7,18,.28),rgba(2,7,18,.12));
  }
  .room-bookend{width:74px;bottom:172px;opacity:.82}
  .room-identity{
    display:grid;
    grid-template-columns:88px 1fr;
    left:16px;right:16px;bottom:78px;
    gap:12px;
  }
  .room-avatar-wrap{width:88px;height:88px;flex-basis:88px}
  .room-name-line h1{font-size:27px}
  .room-title{font-size:14px}
  .room-bio{font-size:13px;line-height:1.35}
  .room-meta{font-size:11px;gap:8px}
  .room-meta span + span::before{margin-right:8px}
  .room-cosmetic-labels{bottom:14px}
  .room-owner-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .room-owner-actions .btn:first-child{grid-column:1/-1}
  .room-owner-actions .room-local-message{grid-column:1/-1;max-width:none}
}


/* ========================================================================== 
   Expansion 5 Step 6F — Room-first hero cleanup
   The background is decorative personality, not a promotional banner.
   Keep identity clear of independent left/right bookend layers.
   ========================================================================== */

.room-cosmetic-labels{display:none!important}

.room-wallpaper{
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:none;
  image-rendering:auto;
}

.room-hero-shade{
  background:
    linear-gradient(180deg,rgba(2,7,18,.02) 0%,rgba(2,7,18,.03) 52%,rgba(2,7,18,.64) 100%),
    linear-gradient(90deg,rgba(2,7,18,.32) 0%,rgba(2,7,18,.08) 28%,rgba(2,7,18,.03) 70%,rgba(2,7,18,.24) 100%);
}

.room-bookend{
  width:clamp(96px,9vw,142px);
  bottom:12px;
  max-height:72%;
  z-index:3;
}
.room-bookend-left{left:18px}
.room-bookend-right{right:18px}

.room-identity{
  left:clamp(170px,13vw,230px);
  right:clamp(170px,13vw,230px);
  bottom:28px;
  max-width:none;
  width:auto;
  z-index:5;
}
.room-avatar-wrap{
  width:132px;
  height:132px;
  flex-basis:132px;
}
.room-identity-copy{
  min-width:0;
  max-width:720px;
}

@media(max-width:1100px){
  .room-identity{
    left:150px;
    right:150px;
    max-width:none;
  }
  .room-bookend{width:104px}
}

@media(max-width:820px){
  .room-hero{min-height:520px}
  .room-bookend{width:82px;bottom:14px}
  .room-bookend-left{left:12px}
  .room-bookend-right{right:12px}
  .room-identity{
    left:108px;
    right:108px;
    bottom:34px;
    max-width:none;
  }
  .room-avatar-wrap{width:108px;height:108px;flex-basis:108px}
}

@media(max-width:620px){
  .room-hero{min-height:610px}
  .room-bookend{width:58px;bottom:12px;opacity:.92}
  .room-identity{
    left:16px;
    right:16px;
    bottom:104px;
    max-width:none;
    grid-template-columns:82px minmax(0,1fr);
  }
  .room-avatar-wrap{width:82px;height:82px;flex-basis:82px}
}

/* ========================================================================== 
   Expansion 5 Step 6G — true bookend rails + crisp center room
   Bookends sit OUTSIDE the room background, full-height and flush against it.
   ========================================================================== */
.room-hero{
  display:grid;
  grid-template-columns:clamp(118px,10vw,168px) minmax(0,1fr) clamp(118px,10vw,168px);
  gap:0;
  min-height:430px;
  padding:0;
  overflow:hidden;
  background:#030914;
}
.room-hero:not(.has-bookends){
  grid-template-columns:0 minmax(0,1fr) 0;
}
.room-bookend-slot{
  position:relative;
  min-width:0;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:center;
  background:
    linear-gradient(180deg,rgba(11,20,39,.98),rgba(4,8,17,.98));
  z-index:2;
}
.room-bookend-slot-left{
  border-right:1px solid rgba(75,228,255,.24);
  box-shadow:inset -14px 0 24px rgba(0,0,0,.28);
}
.room-bookend-slot-right{
  border-left:1px solid rgba(75,228,255,.24);
  box-shadow:inset 14px 0 24px rgba(0,0,0,.28);
}
.room-scene{
  position:relative;
  min-width:0;
  min-height:430px;
  overflow:hidden;
  isolation:isolate;
  background:#061022;
}
.room-wallpaper{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:none;
  transform:none;
}
.room-hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,7,18,0) 0%,rgba(2,7,18,.02) 55%,rgba(2,7,18,.58) 100%),
    linear-gradient(90deg,rgba(2,7,18,.22) 0%,rgba(2,7,18,.02) 35%,rgba(2,7,18,.02) 70%,rgba(2,7,18,.16) 100%);
}
.room-bookend{
  position:static!important;
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain;
  object-position:right bottom;
  margin:0;
  padding:0;
  z-index:auto;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.5));
}
.room-bookend-right{
  transform:scaleX(-1);
  object-position:right bottom;
}
.room-bookend-left{transform:none}
.room-identity{
  left:clamp(24px,3vw,48px);
  right:clamp(24px,3vw,48px);
  bottom:28px;
  max-width:none;
  width:auto;
  z-index:5;
}
.room-pet{
  right:4%;
  bottom:18px;
  z-index:4;
}
.room-hero::after{display:none}

@media(max-width:1000px){
  .room-hero{
    grid-template-columns:96px minmax(0,1fr) 96px;
    min-height:460px;
  }
  .room-scene{min-height:460px}
  .room-identity{left:20px;right:20px}
}
@media(max-width:760px){
  .room-hero{
    grid-template-columns:72px minmax(0,1fr) 72px;
    min-height:540px;
  }
  .room-scene{min-height:540px}
  .room-identity{
    left:16px;
    right:16px;
    bottom:28px;
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    gap:12px;
  }
  .room-avatar-wrap{width:96px;height:96px;flex-basis:96px}
}
@media(max-width:520px){
  .room-hero{
    grid-template-columns:52px minmax(0,1fr) 52px;
    min-height:590px;
  }
  .room-scene{min-height:590px}
  .room-identity{
    grid-template-columns:76px minmax(0,1fr);
    bottom:24px;
  }
  .room-avatar-wrap{width:76px;height:76px;flex-basis:76px}
}

/* ========================================================================== 
   Expansion 5 Step 6H — cover-photo profile + reversible bookend rails
   ========================================================================== */
.room-hero{
  display:grid;
  grid-template-columns:clamp(130px,13vw,200px) minmax(0,1fr) clamp(130px,13vw,200px);
  gap:0;
  min-height:0;
  padding:0;
  overflow:hidden;
  align-items:stretch;
  background:#030914;
}
.room-hero:not(.has-bookends){
  grid-template-columns:0 minmax(0,1fr) 0;
}
.room-scene{
  position:relative;
  min-width:0;
  min-height:0;
  aspect-ratio:3 / 1;
  overflow:hidden;
  isolation:isolate;
  background:#061022;
}
.room-wallpaper{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:none!important;
  transform:none!important;
}
.room-hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,7,18,.34) 0%,rgba(2,7,18,.06) 28%,rgba(2,7,18,0) 62%);
}
.room-bookend-slot{
  position:relative;
  min-width:0;
  height:auto;
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:center;
  background:#040914;
  z-index:2;
  border:0;
  box-shadow:none;
}
.room-bookend-slot-left{border-right:0;box-shadow:none}
.room-bookend-slot-right{border-left:0;box-shadow:none}
.room-bookend{
  position:static!important;
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain;
  object-position:center bottom;
  margin:0;
  padding:0;
  transform:none!important;
  filter:none;
}
.room-bookend-left,.room-bookend-right{transform:none!important}
.room-identity{
  position:absolute;
  left:22px;
  right:auto;
  bottom:18px;
  z-index:5;
  width:min(760px,calc(100% - 44px));
  max-width:none;
  display:flex;
  gap:14px;
  align-items:flex-end;
}
.room-avatar-wrap{
  width:112px;
  height:112px;
  flex:0 0 112px;
}
.room-identity-copy{
  min-width:0;
  padding:12px 16px 13px;
  border:1px solid rgba(94,230,255,.22);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(3,9,23,.84),rgba(7,17,40,.7));
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(7px);
}
.room-name-line h1{font-size:clamp(28px,3vw,42px)}
.room-title{font-size:16px;margin-top:4px}
.room-bio{font-size:14px;margin:3px 0 7px}
.room-meta span{padding:4px 7px;background:rgba(5,10,24,.42)}
.room-pet{right:18px;bottom:14px;z-index:4}

.room-bookend-direction{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:16px 18px;
  margin-bottom:16px;
  border:1px solid rgba(94,230,255,.22);
  border-radius:18px;
  background:rgba(5,10,24,.48);
}
.room-bookend-direction[hidden]{display:none!important}
.room-bookend-direction h3{margin:4px 0 6px;font-size:19px}
.room-bookend-direction p{margin:0;color:var(--muted);max-width:760px;font-size:13px;line-height:1.5}
.room-bookend-direction-controls{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.room-direction-choice{
  appearance:none;
  min-height:42px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(16,31,73,.68);
  color:var(--ink);
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.room-direction-choice[aria-pressed="true"]{
  border-color:var(--cyan);
  color:var(--cyan);
  box-shadow:0 0 0 1px rgba(41,231,255,.16);
}
.room-cosmetic-grid[data-type="background"]{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.room-cosmetic-grid[data-type="background"] .room-cosmetic-preview{
  aspect-ratio:3 / 1;
}
.room-cosmetic-grid[data-type="bookend"] .room-cosmetic-preview.is-tall{
  aspect-ratio:3 / 2;
}
.room-cosmetic-grid[data-type="bookend"] .room-cosmetic-preview.is-tall img{
  padding:8px;
  max-height:none;
  object-fit:cover;
}

@media(max-width:1000px){
  .room-hero{grid-template-columns:112px minmax(0,1fr) 112px}
  .room-scene{aspect-ratio:2.4 / 1}
  .room-bookend-direction{grid-template-columns:1fr}
  .room-bookend-direction-controls{justify-content:flex-start}
}
@media(max-width:760px){
  .room-hero{grid-template-columns:74px minmax(0,1fr) 74px}
  .room-scene{aspect-ratio:1.55 / 1}
  .room-identity{left:14px;bottom:14px;width:calc(100% - 28px);display:grid;grid-template-columns:82px minmax(0,1fr)}
  .room-avatar-wrap{width:82px;height:82px;flex-basis:82px}
  .room-identity-copy{padding:10px 12px}
  .room-bio{display:none}
}
@media(max-width:520px){
  .room-hero{grid-template-columns:50px minmax(0,1fr) 50px}
  .room-scene{aspect-ratio:1.2 / 1}
  .room-identity{grid-template-columns:68px minmax(0,1fr)}
  .room-avatar-wrap{width:68px;height:68px;flex-basis:68px}
  .room-name-line h1{font-size:24px}
  .room-meta{display:none}
  .room-cosmetic-grid[data-type="background"]{grid-template-columns:1fr}
}

/* ==========================================================================\n   Expansion 5 Step 6I — stacked cosmetic previews + adaptive bookend blend\n   Multiple tabs can preview together. Bookend rails inherit the color mood\n   of the active cover photo instead of reading like unrelated photo strips.\n   ========================================================================== */
.room-hero{
  --room-cover-edge-left:rgb(6 16 34);
  --room-cover-edge-right:rgb(6 16 34);
}

.room-bookend-slot{
  isolation:isolate;
}
.room-bookend-slot-left{
  background:
    linear-gradient(90deg,
      #030914 0%,
      color-mix(in srgb,var(--room-cover-edge-left) 35%,#030914) 38%,
      color-mix(in srgb,var(--room-cover-edge-left) 72%,#030914) 76%,
      var(--room-cover-edge-left) 100%);
}
.room-bookend-slot-right{
  background:
    linear-gradient(90deg,
      var(--room-cover-edge-right) 0%,
      color-mix(in srgb,var(--room-cover-edge-right) 72%,#030914) 24%,
      color-mix(in srgb,var(--room-cover-edge-right) 35%,#030914) 62%,
      #030914 100%);
}

/* Fade only the inner seam of the bookend artwork so its generated backdrop
   dissolves into the sampled cover-photo edge color. The sculpture remains crisp. */
.room-bookend-slot-left .room-bookend{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 86%,rgba(0,0,0,.92) 91%,rgba(0,0,0,.48) 97%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 86%,rgba(0,0,0,.92) 91%,rgba(0,0,0,.48) 97%,transparent 100%);
  filter:drop-shadow(10px 0 18px rgba(0,0,0,.24));
}
.room-bookend-slot-right .room-bookend{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.48) 3%,rgba(0,0,0,.92) 9%,#000 14%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.48) 3%,rgba(0,0,0,.92) 9%,#000 14%,#000 100%);
  filter:drop-shadow(-10px 0 18px rgba(0,0,0,.24));
}

.room-bookend-slot-left::after,
.room-bookend-slot-right::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:22px;
  z-index:3;
  pointer-events:none;
}
.room-bookend-slot-left::after{
  right:-1px;
  background:linear-gradient(90deg,transparent,var(--room-cover-edge-left));
}
.room-bookend-slot-right::after{
  left:-1px;
  background:linear-gradient(90deg,var(--room-cover-edge-right),transparent);
}

.room-cosmetic-card.is-previewing{
  border-color:#f09eff;
  box-shadow:0 0 0 1px rgba(240,158,255,.22),0 18px 42px rgba(0,0,0,.3);
}
.room-cosmetic-actions .btn.is-active-preview{
  border-color:#f09eff;
  color:#ffd9ff;
  background:rgba(107,38,139,.34);
}
.room-preview-banner{
  align-items:center;
}
.room-preview-banner span{
  line-height:1.45;
}

@media(max-width:760px){
  .room-bookend-slot-left::after,
  .room-bookend-slot-right::after{width:14px}
}


/* ==========================================================================
   Expansion 5 Step 6J — outward cutout bookends
   Cutout bookends live outside the cover photo. Their full-height flat rail
   touches the cover edge while the decorative sculpture escapes outward into
   the normal City Pixels page background.
   ========================================================================== */

.room-cosmetic-behavior{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border:1px solid rgba(94,230,255,.18);
  border-radius:999px;
  color:#ccefff;
  background:rgba(5,10,24,.5);
  font-size:11px;
  font-weight:900;
}

/* The legacy/panel bookends retain Step 6I adaptive blending. */
.room-hero.bookends-cutout{
  border:0;
  border-radius:0;
  overflow:visible;
  background:transparent;
  box-shadow:none;
}

.room-hero.bookends-cutout .room-scene{
  z-index:1;
  border:1px solid var(--room-edge);
  border-radius:22px;
  overflow:hidden;
  box-shadow:
    0 24px 70px rgba(0,0,0,.4),
    0 0 34px rgba(41,231,255,.08);
}

/* Transparent outer rails: the page itself shows around the sculpture. */
.room-hero.bookends-cutout .room-bookend-slot{
  z-index:3;
  overflow:visible;
  background:transparent!important;
  isolation:auto;
}

.room-hero.bookends-cutout .room-bookend-slot-left{
  margin-right:-2px;
}
.room-hero.bookends-cutout .room-bookend-slot-right{
  margin-left:-2px;
}

/* Remove legacy seam fades/masks from true cutout assets. */
.room-hero.bookends-cutout .room-bookend{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain;
  padding:0;
  margin:0;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.42));
}
.room-hero.bookends-cutout .room-bookend-slot-left .room-bookend{
  object-position:right center;
}
.room-hero.bookends-cutout .room-bookend-slot-right .room-bookend{
  object-position:left center;
}
.room-hero.bookends-cutout .room-bookend-slot-left::after,
.room-hero.bookends-cutout .room-bookend-slot-right::after{
  display:none!important;
}

/* A cutout needs enough room to read as a real sculptural bookend without
   stealing excessive width from the 3:1 cover photo. */
.room-hero.bookends-cutout{
  grid-template-columns:clamp(118px,10.5vw,170px) minmax(0,1fr) clamp(118px,10.5vw,170px);
}

@media(max-width:1000px){
  .room-hero.bookends-cutout{
    grid-template-columns:102px minmax(0,1fr) 102px;
  }
}
@media(max-width:760px){
  .room-hero.bookends-cutout{
    grid-template-columns:68px minmax(0,1fr) 68px;
  }
  .room-hero.bookends-cutout .room-scene{
    border-radius:16px;
  }
}
@media(max-width:520px){
  .room-hero.bookends-cutout{
    grid-template-columns:46px minmax(0,1fr) 46px;
  }
}

/* ==========================================================================\n   Gothic Gargoyles V14 — intrinsic-ratio, flush-only override\n   Isolated to Gothic Gargoyles. Panthers and every other bookend keep the\n   proven Step 6J geometry. The gargoyle artwork is rendered at full hero\n   height using its native aspect ratio and is allowed to extend OUTWARD from\n   the existing rail. The inner architectural spine stays flush to the cover.\n   ========================================================================== */
.room-hero.bookends-cutout .room-bookend-slot{
  position:relative;
}
.room-hero.bookends-cutout .room-bookend[src*="gothic-gargoyles-v12-left"],
.room-hero.bookends-cutout .room-bookend[src*="gothic-gargoyles-v12-right"],
.room-hero.bookends-cutout .room-bookend[src*="gothic-gargoyles-v11-left"],
.room-hero.bookends-cutout .room-bookend[src*="gothic-gargoyles-v11-right"]{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:auto!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
}
.room-hero.bookends-cutout .room-bookend-slot-left .room-bookend[src*="gothic-gargoyles-v12-left"],
.room-hero.bookends-cutout .room-bookend-slot-left .room-bookend[src*="gothic-gargoyles-v11-left"]{
  right:-2px!important;
  left:auto!important;
  object-position:right center!important;
}
.room-hero.bookends-cutout .room-bookend-slot-right .room-bookend[src*="gothic-gargoyles-v12-right"],
.room-hero.bookends-cutout .room-bookend-slot-right .room-bookend[src*="gothic-gargoyles-v11-right"]{
  left:-2px!important;
  right:auto!important;
  object-position:left center!important;
}


/* 2026-10-06 launch hotfix: contain bookend rails and prevent page-wide horizontal scroll.
   This intentionally leaves the existing cosmetic catalog/assets untouched. */
html,body.library-room-page{max-width:100%;overflow-x:hidden}
.library-room-main{max-width:calc(100vw - 18px)}
.room-hero.bookends-cutout{overflow:hidden!important;border-radius:24px}
.room-hero.bookends-cutout .room-bookend-slot{overflow:hidden!important;margin-left:0!important;margin-right:0!important}
.room-hero.bookends-cutout .room-bookend-slot-left .room-bookend{right:0!important}
.room-hero.bookends-cutout .room-bookend-slot-right .room-bookend{left:0!important}
@media(max-width:760px){.room-hero.bookends-cutout{border-radius:18px}}

/* 2026-10-06 Step 2 launch polish: keep cutout bookends visibly outside the cover photo. */
.room-hero.bookends-cutout{column-gap:10px!important}
.room-hero.bookends-cutout .room-bookend-slot-left .room-bookend{object-position:left center!important;right:auto!important;left:0!important}
.room-hero.bookends-cutout .room-bookend-slot-right .room-bookend{object-position:right center!important;left:auto!important;right:0!important}
@media(max-width:760px){.room-hero.bookends-cutout{column-gap:5px!important}}

/* 2026-10-06 QA hotfix: reserve true exterior rails for cutout bookends.
   The cover photo must end before the sculpture begins; bookends never sit over the photo. */
.room-hero.bookends-cutout{
  grid-template-columns:clamp(150px,12vw,205px) minmax(0,1fr) clamp(150px,12vw,205px)!important;
  column-gap:16px!important;
  background:transparent!important;
  overflow:visible!important;
}
.room-hero.bookends-cutout .room-scene{
  grid-column:2!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.room-hero.bookends-cutout .room-bookend-slot{
  background:#030914!important;
  overflow:hidden!important;
  border-radius:18px;
}
.room-hero.bookends-cutout .room-bookend-slot-left{grid-column:1!important}
.room-hero.bookends-cutout .room-bookend-slot-right{grid-column:3!important}
.room-hero.bookends-cutout .room-bookend{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  margin:0!important;
}
.room-hero.bookends-cutout .room-bookend-slot-left .room-bookend{
  object-position:right center!important;
  left:auto!important;
  right:0!important;
}
.room-hero.bookends-cutout .room-bookend-slot-right .room-bookend{
  object-position:left center!important;
  left:0!important;
  right:auto!important;
}
@media(max-width:1000px){
  .room-hero.bookends-cutout{
    grid-template-columns:118px minmax(0,1fr) 118px!important;
    column-gap:10px!important;
  }
}
@media(max-width:760px){
  .room-hero.bookends-cutout{
    grid-template-columns:76px minmax(0,1fr) 76px!important;
    column-gap:6px!important;
    overflow:hidden!important;
  }
}
@media(max-width:520px){
  .room-hero.bookends-cutout{
    grid-template-columns:52px minmax(0,1fr) 52px!important;
    column-gap:4px!important;
  }
}

/* 2026-10-06 QA hotfix 2: pull exterior bookends tight to the wallpaper edge. */
.room-hero.bookends-cutout{
  column-gap:2px!important;
}
@media(max-width:1000px){
  .room-hero.bookends-cutout{column-gap:2px!important}
}
@media(max-width:760px){
  .room-hero.bookends-cutout{column-gap:1px!important}
}
@media(max-width:520px){
  .room-hero.bookends-cutout{column-gap:1px!important}
}

/* ========================================================================== 
   2026-10-06 UNIFORM LIBRARY ROOM GEOMETRY
   One canonical display system for every wallpaper and every bookend.

   Design canvas:
     wallpaper = 1800 x 600 (3:1)
     left rail  = 240 x 600
     right rail = 240 x 600
     full room  = 2280 x 600 (3.8:1)

   Existing source assets are NEVER cropped by CSS. Wallpapers use contain;
   bookends use contain. New assets should be prepared on these canonical
   canvases so every cosmetic has identical visible geometry.
   ========================================================================== */

.library-room-main{
  width:min(1540px,calc(100% - 24px));
}

.room-hero,
.room-hero.bookends-cutout,
.room-hero.has-bookends,
.room-hero.has-bookends.bookends-cutout{
  display:grid!important;
  grid-template-columns:240fr 1800fr 240fr!important;
  grid-template-rows:1fr!important;
  column-gap:0!important;
  gap:0!important;
  width:100%!important;
  aspect-ratio:3.8 / 1!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:22px!important;
  background:#030914!important;
  box-shadow:0 24px 70px rgba(0,0,0,.4),0 0 34px rgba(41,231,255,.08)!important;
  align-items:stretch!important;
}

.room-hero:not(.has-bookends){
  grid-template-columns:0 1fr 0!important;
  aspect-ratio:3 / 1!important;
}

.room-hero .room-scene,
.room-hero.bookends-cutout .room-scene{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  position:relative!important;
  overflow:hidden!important;
  border:1px solid var(--room-edge)!important;
  border-radius:18px!important;
  background:#061022!important;
  box-shadow:none!important;
  isolation:isolate!important;
}

/* Preserve the entire wallpaper. A correctly prepared 3:1 wallpaper fills
   the scene exactly; older non-3:1 assets letterbox instead of being cropped. */
.room-hero .room-wallpaper,
.room-hero.bookends-cutout .room-wallpaper{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-color:#061022!important;
  transform:none!important;
  filter:none!important;
}

.room-hero .room-bookend-slot,
.room-hero.bookends-cutout .room-bookend-slot{
  position:relative!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:#030914!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  isolation:isolate!important;
}
.room-hero .room-bookend-slot-left,
.room-hero.bookends-cutout .room-bookend-slot-left{grid-column:1!important}
.room-hero .room-bookend-slot-right,
.room-hero.bookends-cutout .room-bookend-slot-right{grid-column:3!important}

/* All bookends occupy the same canonical rail box. This deliberately removes
   per-asset sizing hacks, including old Gothic-specific geometry. */
.room-hero .room-bookend,
.room-hero.bookends-cutout .room-bookend,
.room-hero.bookends-cutout .room-bookend[src*="gothic-gargoyles"],
.room-hero .room-bookend[src*="gothic-gargoyles"]{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  transform:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.42))!important;
}
.room-hero .room-bookend-slot-left .room-bookend,
.room-hero.bookends-cutout .room-bookend-slot-left .room-bookend{
  object-position:right center!important;
}
.room-hero .room-bookend-slot-right .room-bookend,
.room-hero.bookends-cutout .room-bookend-slot-right .room-bookend{
  object-position:left center!important;
}
.room-hero .room-bookend-slot::after,
.room-hero.bookends-cutout .room-bookend-slot::after{display:none!important}

/* The room composition scales as one unit on every device. */
@media(max-width:1000px){
  .library-room-main{width:min(100% - 16px,1540px)}
  .room-hero,
  .room-hero.bookends-cutout,
  .room-hero.has-bookends,
  .room-hero.has-bookends.bookends-cutout{
    grid-template-columns:240fr 1800fr 240fr!important;
    aspect-ratio:3.8 / 1!important;
  }
}

@media(max-width:760px){
  .library-room-main{width:calc(100% - 10px)}
  .room-hero,
  .room-hero.bookends-cutout,
  .room-hero.has-bookends,
  .room-hero.has-bookends.bookends-cutout{
    grid-template-columns:240fr 1800fr 240fr!important;
    aspect-ratio:3.8 / 1!important;
    border-radius:14px!important;
  }
  .room-hero .room-scene,
  .room-hero.bookends-cutout .room-scene{border-radius:12px!important}

  /* Keep identity information readable without changing the visual geometry. */
  .room-identity{
    left:8px!important;
    right:8px!important;
    bottom:6px!important;
    width:auto!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:7px!important;
  }
  .room-avatar-wrap{width:46px!important;height:46px!important;flex-basis:46px!important}
  .room-identity-copy{padding:5px 8px!important;border-radius:10px!important}
  .room-name-line h1{font-size:clamp(14px,4vw,22px)!important}
  .room-title{font-size:11px!important;margin:2px 0!important}
  .room-bio,.room-meta,.room-role-badge{display:none!important}
}

@media(max-width:520px){
  .room-identity{
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:5px!important;
    left:5px!important;
    right:5px!important;
    bottom:4px!important;
  }
  .room-avatar-wrap{width:36px!important;height:36px!important;flex-basis:36px!important}
  .room-name-line h1{font-size:14px!important}
  .room-title{font-size:9px!important}
}

/* ==========================================================================\n   2026-10-06 FINAL UNIFORM LIBRARY ROOM GEOMETRY\n   Preserve every wallpaper pixel. Standard source geometry:\n   wallpaper = 2172x724 (3:1), each bookend = 724x2172 (1:3).\n   At render time all three layers scale together; no wallpaper cropping.\n   ========================================================================== */
.room-hero,
.room-hero.bookends-cutout,
.room-hero.has-bookends,
.room-hero.has-bookends.bookends-cutout{
  display:grid!important;
  grid-template-columns:1fr 9fr 1fr!important;
  grid-template-rows:1fr!important;
  column-gap:0!important;
  gap:0!important;
  width:100%!important;
  aspect-ratio:11 / 3!important;
  min-height:0!important;
  overflow:hidden!important;
  align-items:stretch!important;
  background:#030914!important;
}
.room-hero:not(.has-bookends){
  grid-template-columns:0 1fr 0!important;
  aspect-ratio:3 / 1!important;
}
.room-hero .room-scene,
.room-hero.bookends-cutout .room-scene{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:3 / 1!important;
  overflow:hidden!important;
  position:relative!important;
  background:#061022!important;
}
.room-hero .room-wallpaper,
.room-hero.bookends-cutout .room-wallpaper{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-size:100% 100%!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  filter:none!important;
  transform:none!important;
}
.room-hero .room-bookend-slot,
.room-hero.bookends-cutout .room-bookend-slot{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#030914!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:stretch!important;
}
.room-hero .room-bookend,
.room-hero.bookends-cutout .room-bookend,
.room-hero .room-bookend[src*="gothic-gargoyles"],
.room-hero.bookends-cutout .room-bookend[src*="gothic-gargoyles"]{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.room-hero .room-bookend-slot-left{grid-column:1!important}
.room-hero .room-bookend-slot-right{grid-column:3!important}

@media(max-width:1000px){
  .room-hero,
  .room-hero.bookends-cutout,
  .room-hero.has-bookends,
  .room-hero.has-bookends.bookends-cutout{
    grid-template-columns:1fr 9fr 1fr!important;
    aspect-ratio:11 / 3!important;
  }
}
@media(max-width:760px){
  .room-hero,
  .room-hero.bookends-cutout,
  .room-hero.has-bookends,
  .room-hero.has-bookends.bookends-cutout{
    grid-template-columns:1fr 9fr 1fr!important;
    aspect-ratio:11 / 3!important;
  }
}


/* ==========================================================================
   2026-10-06 — Nine-bookend catalog launch geometry
   All bookend artwork renders at full room height without distortion.
   The inner/back edge stays flush against the wallpaper. Any spare width
   remains OUTSIDE the wallpaper, never between the bookend and room image.
   ========================================================================== */
.room-hero,
.room-hero.bookends-cutout,
.room-hero.has-bookends,
.room-hero.has-bookends.bookends-cutout{
  grid-template-columns:minmax(0,1.2fr) minmax(0,9fr) minmax(0,1.2fr)!important;
  aspect-ratio:11.4 / 3!important;
  column-gap:0!important;
  gap:0!important;
}

.room-hero .room-bookend-slot-left,
.room-hero.bookends-cutout .room-bookend-slot-left{
  justify-content:flex-end!important;
  align-items:stretch!important;
}
.room-hero .room-bookend-slot-right,
.room-hero.bookends-cutout .room-bookend-slot-right{
  justify-content:flex-start!important;
  align-items:stretch!important;
}

.room-hero .room-bookend,
.room-hero.bookends-cutout .room-bookend{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

.room-hero .room-bookend-slot-left .room-bookend,
.room-hero.bookends-cutout .room-bookend-slot-left .room-bookend{
  object-position:right center!important;
}
.room-hero .room-bookend-slot-right .room-bookend,
.room-hero.bookends-cutout .room-bookend-slot-right .room-bookend{
  object-position:left center!important;
}

@media(max-width:1000px){
  .room-hero,
  .room-hero.bookends-cutout,
  .room-hero.has-bookends,
  .room-hero.has-bookends.bookends-cutout{
    grid-template-columns:minmax(0,1.2fr) minmax(0,9fr) minmax(0,1.2fr)!important;
    aspect-ratio:11.4 / 3!important;
  }
}
.library-content{display:grid;gap:22px}.library-entry-form{display:grid;gap:12px;margin-top:16px}.library-entry-form label{display:grid;gap:6px}.library-entry-form input,.library-entry-form select,.library-entry-form textarea{width:100%;max-width:100%;padding:12px;box-sizing:border-box;background:#07111f;color:#fff;border:1px solid #31506f;border-radius:10px}.library-entry-form textarea{min-height:160px}.library-entry{padding:18px;border:1px solid #31506f;border-radius:14px}.library-entry p{white-space:pre-wrap;overflow-wrap:anywhere}.library-content summary{cursor:pointer;font-weight:700;padding:12px 0}.library-content input[type=checkbox]{width:auto;margin-right:10px}

.library-shelves-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),300px));gap:20px;align-items:start}.library-shelves-grid>div:first-child{grid-column:1/-1}.library-shelves-grid .library-entry{width:100%;min-width:0;padding:18px;overflow-wrap:anywhere}.library-shelf-cover{display:block;width:100%;height:210px;object-fit:contain;margin:0 0 16px}

/* Illustrated frames use nine-slice borders so entry length never stretches corner artwork. */
.library-entry:has(.journal-entry-content){padding:0;border:0}
.journal-entry-content{padding:20px;border:1px solid var(--line,#31506f);border-radius:14px;min-width:0;background:var(--panel,rgba(8,20,40,.8))}
.journal-entry-content.journal-framed{border:solid transparent;border-width:48px 64px;border-image-slice:150 220;border-image-width:1;border-image-repeat:stretch;padding:6px 12px;border-radius:0}
.journal-entry-content h3{margin:0 0 10px}.journal-entry-content time,.journal-frame-name{font-size:.82rem;color:var(--muted,#a8b9cd)}
.journal-entry-content p{line-height:1.75;overflow-wrap:anywhere}.journal-frame-name{display:block;margin-top:14px}
.library-entry>.btn,.library-entry>details{margin-top:12px}.library-avatar-upload{display:grid;gap:12px;padding:18px;border:1px solid var(--line,#31506f);border-radius:14px;margin:16px 0}.library-avatar-upload[hidden]{display:none}.library-avatar-upload input{max-width:100%}
@media(max-width:600px){.journal-entry-content.journal-framed{border-width:26px 34px;padding:8px 6px}.journal-entry-content{padding:16px}}

/* Test: keep journal frame edges from stretching */
.journal-entry-content.journal-framed {
  border-image-repeat: round;
}
/* Compact mobile room toolbar; native details preserve keyboard/touch access. */
.room-section-tabs{display:flex;gap:8px;align-items:center}
.room-manage-menu>summary{display:none}
.room-manage-options{display:flex;gap:8px}
.library-section-privacy{display:flex;align-items:center;gap:6px}
.library-visibility-label{font-size:12px;color:var(--muted);white-space:nowrap}
.library-section-menu{position:relative}
.library-section-menu>summary{list-style:none;cursor:pointer;padding:6px 10px;font-size:24px;line-height:30px;min-width:44px;text-align:center;box-sizing:border-box}
.library-section-menu>summary::-webkit-details-marker{display:none}
.library-section-menu .library-privacy-toggle{position:absolute;right:0;top:100%;z-index:5;white-space:nowrap;background:var(--panel);box-shadow:0 6px 20px #0002}
.room-share-link{display:flex;gap:5px;align-items:center}
@media(max-width:620px){
 .room-tabs.panel{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;padding:8px 12px!important;gap:6px!important;min-height:0!important;border-radius:12px!important}
 .room-section-tabs{width:100%;overflow-x:auto;gap:0;border-bottom:1px solid var(--line);scrollbar-width:thin}
 .room-section-tabs .room-tab{flex:1 0 auto!important;min-height:44px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:14px!important;padding:10px 12px!important}
 .room-section-tabs .room-tab[aria-selected=true]{border-bottom-color:var(--accent,#00829a)!important;color:var(--text)!important}
 .room-owner-actions{display:flex!important;flex-wrap:wrap!important;justify-content:flex-end!important;gap:8px!important;width:100%!important;padding:0!important}
 .room-manage-menu{position:relative;margin-right:auto}
 .room-manage-menu>summary{display:flex;gap:8px;align-items:center;min-height:44px;font-size:14px;font-weight:700;cursor:pointer;list-style:none}
 .room-manage-menu>summary::-webkit-details-marker{display:none}
 .room-manage-options{display:none;position:absolute;top:100%;left:0;min-width:190px;max-width:calc(100vw - 72px);padding:6px;z-index:8;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 10px 25px #0003}
 .room-manage-menu[open] .room-manage-options{display:grid}
 .room-manage-options .btn{border:0!important;border-radius:5px!important;background:transparent!important;text-align:left!important;justify-content:flex-start!important;min-height:44px!important;font-size:14px!important;color:var(--text)!important}
 .room-owner-actions>.btn{border:0!important;background:transparent!important;padding:8px!important;min-height:44px!important;font-size:13px!important}
 .room-share-label{display:none}.room-share-link>span:first-child{font-size:24px}
 .room-panel-head{display:flex!important;align-items:center!important;flex-wrap:wrap;gap:8px!important}
 .room-panel-head>div:first-child{flex:1 1 170px;min-width:0}
 .room-panel-head h2{font-size:23px!important;line-height:1.2!important;margin:4px 0!important}
 .room-panel-head .library-section-privacy{margin-left:auto;order:3}
 .room-panel-head .library-compose-open{font-size:13px!important;padding:8px 12px!important;min-height:44px!important;border-radius:8px!important}
}

/* 2026-11-05: frame artwork aligns with avatar area; preserve aspect ratio */
.room-avatar-wrap { isolation: isolate; }
.room-avatar-wrap > .room-avatar-frame { inset:-6% !important; width:112% !important; height:112% !important; object-fit:contain !important; object-position:center !important; }