/* One live control owns its label and frame; background artwork contains no UI plates. */
@media(min-width:701px){
#timeMail[data-view=list]{background-image:url('assets/mail-list-clean-wide.png')}
#timeMail[data-view=write]{background-image:url('assets/mail-write-clean-wide.png')}
#timeMail[data-view=sealed]{background-image:url('assets/mail-sealed-clean-wide.png')}
#timeMail[data-view=read]{background-image:url('assets/mail-read-clean-wide.png')}
#timeMail[data-view] .mail-back{left:28px;top:28px;width:170px;max-width:170px;height:46px;display:flex;align-items:center;justify-content:center;background:#fff0d8!important;border:1px solid #c79e70!important;border-radius:28px!important;font-size:23px;padding:0}
#timeMail .mail-toolbar{right:35px;top:28px;width:195px;height:54px}
#timeMail .mail-toolbar button{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff0d8!important;border:1px solid #c79e70!important;border-radius:30px!important;font-size:26px;padding:0;color:#57341f!important}
#timeMail .mail-toolbar button::before{content:'✎';font-family:Arial,sans-serif;margin:0}
#timeMail .mail-filters{height:56px;background:#f7e8d4f5;border:1px solid #dcc19b;box-shadow:0 2px 5px #80532b18}
#timeMail[data-view=write] .mail-back{top:80px}
#timeMail[data-view=write] .mail-brand{top:12px;left:28px;line-height:1.5}
#timeMail .mail-letter-grid{grid-template-columns:repeat(3,360px);grid-template-rows:none;grid-auto-rows:300px;justify-content:space-between;align-content:start;align-items:start;gap:30px 20px;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;overscroll-behavior:contain;padding:4px 12px 12px;box-sizing:border-box}
#timeMail .mail-letter-card{width:360px;height:300px;min-height:0;max-height:none;margin:0!important;box-sizing:border-box}
#timeMail .mail-letter-card .envelope-title{font-size:26px}
#timeMail .mail-letter-card .letter-date{top:83%}
#timeMail .mail-settings input{border:1px solid #c69c70!important;border-radius:9px!important;background:#fff8ec88!important;box-sizing:border-box;padding:0 12px!important;line-height:1.4}
#timeMail .mail-manual-save{border:1px solid #b38a5f!important;border-radius:25px!important;background:#fff1d566!important;display:flex;align-items:center;justify-content:center;font-size:21px}
#timeMail .mail-settings>button,#timeMail .mail-sealed>button,#timeMail .mail-reading-actions button+button{display:flex;align-items:center;justify-content:center;border:1px solid #b0a06a!important;border-radius:40px!important;background:linear-gradient(#92925d,#797b47)!important;box-shadow:inset 0 0 0 2px #e6d6a044!important;color:#fff4dc!important}
#timeMail .mail-sealed>.mail-open-date{left:33%;width:34%;top:68%;height:48px;line-height:1.4;display:flex;align-items:center;justify-content:center;padding:0 12px;border:2px solid #b59a65;border-radius:32px;box-sizing:border-box;background:#fff1cddf;font-size:23px}
#timeMail .mail-sealed>button{left:40%;width:20%;height:57px;top:90%;font-size:26px}
#timeMail .mail-reading-actions button:first-child{background:#fff0d8;border:1px solid #bb9567;border-radius:35px;display:flex;align-items:center;justify-content:center}
}
.room-art-portal{background-image:url('assets/hub-room-clean.png');background-repeat:no-repeat;transition:transform .2s,filter .2s;box-shadow:none!important;backdrop-filter:none!important;border-radius:18%;mask-image:radial-gradient(ellipse at center,#000 62%,transparent 75%);transform-origin:center}
.room-art-portal:hover,.room-art-portal:focus-visible{transform:translateY(-3px) scale(1.035);filter:drop-shadow(0 2px 6px #e6ac49) brightness(1.06);backdrop-filter:none;outline:0}
.room-mailbox:hover,.room-mailbox:focus-visible{transform:translateY(-3px) scale(1.035);filter:drop-shadow(0 2px 6px #e6ac49)}
@media(prefers-reduced-motion:reduce){.room-art-portal{transition:none}}
/* Room illustrations are decoration; only the labelled navigation buttons open modules. */
#hub .room-mailbox{pointer-events:none;cursor:default;transition:none;transform:none!important;filter:drop-shadow(2px 5px 3px #60351a44)!important}
#hub .hub-entry{transition:transform .2s,box-shadow .2s,background .2s;animation:none}#hub .hub-entry:hover,#hub .hub-entry:focus-visible{transform:translateY(-5px) scale(1.025);box-shadow:0 0 18px #ffdd8a99,inset 0 1px 0 #fffaf0}@media(prefers-reduced-motion:reduce){#hub .hub-entry{transition:none}}