.room-view .yearbook-overlay[hidden],.room-view .yearbook-form[hidden],.room-view .yearbook-scroll[hidden],.room-view .yearbook-footer[hidden],.room-view .yearbook-mobile-pages[hidden],.room-view .yearbook-photo-preview[hidden],.room-view .yearbook-video[hidden],.room-view .yearbook-capture[hidden],.room-view .yearbook-camera-cancel[hidden],.room-view .yearbook-close[hidden] { display:none; }
.room-view .yearbook-overlay { position:fixed; z-index:20000; inset:0; display:grid; place-items:center; padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); font-family:Georgia,serif; }
.room-view .yearbook-shade { position:absolute; inset:0; border:0; background:#090f21bd; backdrop-filter:blur(8px); cursor:pointer; }
.room-view .yearbook-dialog { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; min-height:0; width:min(1320px,calc((100svh - 105px) * 1.5),100%); max-height:calc(100svh - 28px); color:#302b29; }
.room-view .yearbook-close { z-index:3; }
.room-view .yearbook-scroll { min-width:0; min-height:0; width:100%; overflow:auto; scrollbar-width:thin; }
.room-view .yearbook-book { position:relative; width:100%; min-width:760px; aspect-ratio:3/2; background:url('../../assets/room/yearbook-spread.webp') center/100% 100% no-repeat; filter:drop-shadow(0 22px 20px #0008); }
.room-view .yearbook-page { position:absolute; top:10%; height:78%; display:flex; flex-direction:column; align-items:center; }
.room-view .yearbook-left { left:6.3%; width:40.2%; }
.room-view .yearbook-right { left:53.3%; width:40.2%; }
.room-view .yearbook-title,.room-view .yearbook-sign-title { flex:none; margin:0 0 2.2%; font:small-caps 700 clamp(16px,2.2vw,30px)/1.2 Georgia,serif; letter-spacing:.08em; color:#2b3451; text-align:center; }
.room-view .yearbook-grid { width:88%; flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); column-gap:4%; row-gap:2%; }
.room-view .yearbook-square { min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.room-view .yearbook-square-photo { display:grid; place-items:center; width:min(100%,14vh); aspect-ratio:1; position:relative; overflow:hidden; border:2px solid #f9f2db; outline:1px solid #bdb49f; background:linear-gradient(140deg,#bed3ce,#e9c3aa); box-shadow:1px 2px 3px #5b49332e; font-size:clamp(22px,4vw,49px); line-height:1; }
.room-view .yearbook-square-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.room-view .yearbook-square.is-empty .yearbook-square-photo { background:#e4dbc8; opacity:.58; }
.room-view .yearbook-square-name { max-width:100%; overflow-wrap:anywhere; font:700 clamp(10px,1.2vw,17px)/1.1 Georgia,serif; text-align:center; }
.room-view .yearbook-signatures { width:86%; flex:1; display:grid; grid-template-rows:repeat(9,1fr); min-height:0; }
.room-view .yearbook-signature { min-height:0; border-bottom:1px solid #7868483b; position:relative; display:flex; align-items:center; gap:8px; padding:1px 0; }
.room-view .yearbook-signature-message { flex:1; margin:0; color:#32466d; font:italic clamp(9px,1.24vw,17px)/1.16 'Comic Sans MS','Bradley Hand',cursive; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.room-view .yearbook-signature-name { flex:none; max-width:48%; overflow-wrap:anywhere; color:#56416d; font:italic 700 clamp(10px,1.2vw,17px)/1.1 'Comic Sans MS','Bradley Hand',cursive; text-align:right; }
.room-view .yearbook-remove { position:absolute; right:-35px; top:0; padding:2px 3px; border:0; background:#fff8; color:#812b2b; font:11px Arial,sans-serif; cursor:pointer; }
.room-view .yearbook-empty { align-self:center; text-align:center; color:#726a60; font:italic 20px Georgia,serif; }
.room-view .yearbook-footer { display:flex; align-items:center; justify-content:center; gap:15px; margin-top:-8px; padding:10px 15px; border-radius:10px; background:#efe2c8; box-shadow:0 5px 20px #0005; }
.room-view .yearbook-page-button,.room-view .yearbook-add { border:1px solid #33415e; border-radius:4px; background:#1d2d4e; color:#f7edd4; cursor:pointer; }
.room-view .yearbook-page-button { width:44px; height:44px; font-size:20px; }
.room-view .yearbook-page-button:disabled { opacity:.35; cursor:default; }
.room-view .yearbook-add { padding:8px 12px; font:700 14px Georgia,serif; }
.room-view .yearbook-count { min-width:105px; text-align:center; font:14px Georgia,serif; }
.room-view .yearbook-status { min-height:1.3em; margin:5px 0 0; color:#fff5dd; text-shadow:0 1px 4px #000; font:14px Arial,sans-serif; text-align:center; }
.room-view .yearbook-form { position:relative; width:min(440px,calc(100vw - 28px)); max-height:calc(100svh - 42px); overflow:auto; padding:26px 29px; background:#eee0bc; border:9px solid #162849; border-radius:8px; box-shadow:0 20px 50px #0008,inset 0 0 40px #a8874d33; }
.room-view .yearbook-form h2 { margin:0 35px 18px 0; font:small-caps 700 27px Georgia,serif; color:#233657; }
.room-view .yearbook-form-close { width:44px; height:44px; position:absolute; right:12px; top:8px; border:0; background:none; color:#233657; font:30px Georgia,serif; cursor:pointer; }
.room-view .yearbook-field-label { display:block; margin:12px 0 5px; font:700 14px Georgia,serif; color:#3e3b32; }
.room-view .yearbook-input { display:block; box-sizing:border-box; width:100%; margin-top:5px; padding:9px; border:1px solid #84765f; border-radius:3px; background:#fffaf0; color:#2c2924; font:16px Georgia,serif; }
.room-view .yearbook-message { resize:vertical; }
.room-view .yearbook-avatars { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.room-view .yearbook-avatar { padding:4px; border:2px solid transparent; border-radius:5px; background:#f6ecd2; font:27px/1.2 sans-serif; cursor:pointer; }
.room-view .yearbook-avatar[aria-pressed="true"] { border-color:#243d74; background:#d2dddf; }
.room-view .yearbook-upload-label,.room-view .yearbook-camera { display:inline-block; margin:12px 6px 0 0; padding:6px 9px; border:1px solid #71654d; border-radius:3px; background:#faf2de; color:#2d3c59; font:13px Georgia,serif; cursor:pointer; }
.room-view .yearbook-upload { position:absolute; width:1px; height:1px; opacity:0; }
.room-view .yearbook-photo-preview { margin:10px 0 0; }
.room-view .yearbook-photo-preview img { display:block; width:88px; height:88px; object-fit:cover; border:3px solid #fff7e7; box-shadow:1px 2px 5px #0005; }
.room-view .yearbook-video { width:100%; max-height:170px; margin-top:10px; object-fit:contain; background:#111; }
.room-view .yearbook-capture,.room-view .yearbook-camera-cancel { margin:5px 5px 0 0; padding:5px; }
.room-view .yearbook-disclosure { margin:13px 0; font:12px/1.35 Arial,sans-serif; color:#645947; }
.room-view .yearbook-honeypot { position:absolute; left:-10000px; }
.room-view .yearbook-submit { width:100%; padding:10px; border:0; border-radius:3px; background:#1d2d4e; color:#fff5df; font:700 15px Georgia,serif; cursor:pointer; }
.room-view .yearbook-submit:disabled { opacity:.6; }
.room-view .yearbook-overlay :focus-visible { outline:3px solid #b97d23; outline-offset:2px; }
@media(max-width:800px) { .room-view .yearbook-book { min-width:760px; } .room-view .yearbook-square-photo { width:78px; } .room-view .yearbook-signature-message { font-size:10px; } .room-view .yearbook-signature-name { font-size:10px; } .room-view .yearbook-title,.room-view .yearbook-sign-title { font-size:17px; } }
@media(max-height:650px) { .room-view .yearbook-dialog { max-height:calc(100dvh - 28px); } .room-view .yearbook-scroll { max-height:calc(100dvh - 140px); } }

.room-view .yearbook-mobile-pages { display:none; }
@media(max-width:800px), (max-height:650px) {
  .room-view .yearbook-mobile-pages:not([hidden]) { display:flex; gap:8px; margin:4px 0 0; }
  .room-view .yearbook-mobile-pages button { padding:5px 8px; border:1px solid #b6a381; border-radius:4px; background:#efe2c8; color:#213250; font:13px Georgia,serif; }
  .room-view .yearbook-footer { gap:5px; padding:7px; margin-top:4px; }
  .room-view .yearbook-count { min-width:83px; font-size:12px; }
  .room-view .yearbook-add { padding:7px; font-size:12px; }
}

.room-view .yearbook-upload-label:focus-within { outline:3px solid #b97d23; outline-offset:2px; }
@media(pointer:coarse) {
  .room-view .yearbook-avatars { grid-template-columns:repeat(4,1fr); }
  .room-view .yearbook-avatar,.room-view .yearbook-camera,.room-view .yearbook-capture,.room-view .yearbook-camera-cancel,.room-view .yearbook-mobile-pages button { min-height:44px; }
}