@font-face { font-family:"Inkhand"; src:url("fonts/Caveat.ttf") format("truetype"); font-display:swap; }
:root { --ink:#0b0907; --bone:#e8dcc4; --umber:#5a4632; --blood:#8e1b17; --brass:#b08a4a; --mute:#b9ab90; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--ink); color:var(--bone); font:17px/1.5 Georgia,"Times New Roman",serif; overflow:hidden; }
button { font:700 14px Georgia,serif; letter-spacing:1px; text-transform:uppercase; color:var(--bone); cursor:pointer; padding:10px 14px;
  background:linear-gradient(#2b2017,#16100b); border:2px solid var(--brass); box-shadow:inset 0 0 0 2px #000,0 3px 0 #000; }
button:hover { background:linear-gradient(#3a2b1e,#1d150e); color:#fff; } button:active { transform:translateY(2px); }
button:disabled { opacity:.45; cursor:default; }
button.big { font-size:18px; padding:14px 26px; }
button.sel { border-color:var(--blood); color:#fff; background:linear-gradient(#4a1512,#230a08); }
.hidden { display:none !important; }

#bg { position:fixed; inset:0; background:center/cover no-repeat; filter:brightness(.32) saturate(.7); transition:background-image .6s; animation:lamp 6s infinite; }
#vig { position:fixed; inset:0; background:radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(0,0,0,.92) 85%); pointer-events:none; }
#rain { position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:repeating-linear-gradient(105deg,transparent 0 18px,rgba(220,220,255,.5) 18px 19px);
  background-size:200px 200px; animation:rain .5s linear infinite; }
#flash { position:fixed; inset:0; background:#cfd8ff; opacity:0; pointer-events:none; z-index:50; }
@keyframes lamp { 0%,100%{filter:brightness(.32) saturate(.7)} 48%{filter:brightness(.37)} 50%{filter:brightness(.25)} 52%{filter:brightness(.35)} }
@keyframes rain { to { background-position:-60px 200px } }

.screen { position:fixed; inset:0; display:none; z-index:2; } .screen.on { display:block; }
.narr { color:var(--mute); font-style:italic; }

/* title */
#title.on { display:flex; align-items:center; justify-content:center; }
.title-card { text-align:center; max-width:760px; padding:20px; }
.series { color:var(--brass); letter-spacing:6px; font-variant:small-caps; font-size:20px; }
h1 { font:700 64px/1.05 Georgia,serif; margin:14px 0; letter-spacing:2px; text-shadow:3px 3px 0 #000,0 0 26px rgba(142,27,23,.6); }
.tagline { font-size:20px; color:var(--mute); font-style:italic; }
.row { display:flex; gap:12px; justify-content:center; margin-top:22px; flex-wrap:wrap; } .row.small button { font-size:12px; padding:6px 10px; }
.fine { font-size:12px; color:#7d6f58; margin-top:26px; }

/* intro */
#intro.on { display:flex; align-items:center; justify-content:center; }
.scroll { max-width:720px; padding:30px; background:rgba(15,10,7,.85); border:2px solid #2a1f15; outline:1px solid var(--umber); font-size:20px; text-align:center; }

/* top bar */
#top { display:flex; justify-content:space-between; gap:10px; padding:12px 18px; background:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.4)); flex-wrap:wrap; }
#places, #tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
#ep-tag { color:var(--brass); font-variant:small-caps; letter-spacing:2px; margin-left:8px; }

/* place view */
#place-view { max-width:980px; margin:4vh auto; padding:22px 26px; background:rgba(15,10,7,.82); border:2px solid #2a1f15; outline:1px solid var(--umber); }
#place-intro { font-size:19px; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:14px; }
h3 { font-variant:small-caps; letter-spacing:2px; color:var(--brass); margin:6px 0 10px; font-weight:400; }
.person { display:flex; gap:12px; align-items:center; margin-bottom:10px; cursor:pointer; padding:6px; border:1px solid transparent; }
.person:hover { border-color:var(--brass); background:rgba(176,138,74,.08); }
.person img { width:64px; height:80px; object-fit:cover; border:2px solid #1a140e; outline:1px solid var(--brass); filter:grayscale(.3); }
.person .t { color:var(--mute); font-size:14px; display:block; } .person .sins { color:var(--blood); font-size:12px; font-variant:small-caps; letter-spacing:1px; }
#spots button { display:block; width:100%; margin-bottom:8px; text-align:left; text-transform:none; font-size:15px; }
#exam-out { margin-top:14px; min-height:28px; }

/* talk view */
#talk-view { position:fixed; top:62px; bottom:0; left:0; right:0; display:grid; grid-template-columns:1fr 1fr; }
#left { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
#frame { position:relative; height:72vh; aspect-ratio:1085/1400; border:10px solid #1a140e; outline:2px solid var(--brass); background:#000; overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.9); }
#frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s; } #frame img.out { opacity:0; }
#frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 110px rgba(0,0,0,.85); pointer-events:none; }
#redwash { position:absolute; inset:0; background:var(--blood); mix-blend-mode:multiply; opacity:0; transition:opacity .4s; z-index:3; pointer-events:none; }
#nameplate { text-align:center; } #nameplate b { display:block; font-size:22px; letter-spacing:1px; } #nameplate span { color:var(--brass); font-style:italic; }
.shake { animation:shake .45s; }
@keyframes shake { 10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)} 30%,50%,70%{transform:translate(-7px,2px) rotate(-.5deg)} 40%,60%{transform:translate(7px,-1px) rotate(.5deg)} }
#right { display:flex; flex-direction:column; gap:10px; padding:2vh 3vw 3vh 1vw; min-height:0; }
.bar-label { display:flex; justify-content:space-between; font-variant:small-caps; letter-spacing:2px; color:var(--brass); }
.bar { height:16px; border:2px solid var(--brass); background:#120d09; position:relative; }
.bar span { position:absolute; inset:0 auto 0 0; width:100%; background:linear-gradient(90deg,#5d0f0c,var(--blood)); transition:width .8s cubic-bezier(.2,.8,.2,1); }
.bar i { position:absolute; top:0; bottom:0; width:2px; background:rgba(176,138,74,.6); }
#log { flex:1; overflow-y:auto; padding:14px 16px; background:rgba(15,10,7,.86); border:2px solid #2a1f15; outline:1px solid var(--umber); min-height:0; }
.q { color:var(--brass); margin-top:10px; } .q b { font-variant:small-caps; font-weight:400; }
.a { margin-top:3px; } .a b { font-variant:small-caps; font-weight:400; color:#c9a; }
.clue-get { margin:8px 0; padding:8px 10px; border-left:4px solid var(--blood); background:rgba(142,27,23,.12); font-size:15px; }
.clue-get b { display:block; color:#e6b; font-variant:small-caps; letter-spacing:1px; }
.typing::after { content:"…"; animation:blink 1s infinite; } @keyframes blink { 50% { opacity:.2 } }
#ask-form { display:flex; gap:8px; } #q { flex:1; font:16px Georgia,serif; padding:10px; color:var(--bone); background:#120d09; border:2px solid var(--umber); }
#q:focus { outline:none; border-color:var(--brass); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#evidence-pick { max-height:22vh; overflow-y:auto; display:flex; flex-wrap:wrap; gap:6px; padding:8px; background:rgba(0,0,0,.6); border:1px solid var(--umber); }
#evidence-pick button { text-transform:none; font-size:13px; padding:6px 9px; }

/* overlays */
.overlay { position:fixed; inset:0; display:none; z-index:20; background:rgba(0,0,0,.75); align-items:center; justify-content:center; }
.overlay.on { display:flex; }
.paper { width:min(860px,94vw); max-height:88vh; overflow-y:auto; padding:26px 30px; color:#2a1d12; background:#e8dcc4;
  background-image:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.4),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(90,70,50,.25),transparent 60%);
  border:2px solid #5a4632; box-shadow:0 0 0 6px #1a140e,0 20px 60px #000; }
.paper.dark { color:var(--bone); background:#16100b; border-color:var(--brass); }
.paper h2 { margin:0 0 12px; font-size:30px; letter-spacing:2px; }
.paper button { color:var(--bone); }
.card { display:inline-block; vertical-align:top; width:calc(50% - 8px); margin:0 8px 10px 0; padding:10px 12px; border:1px solid #8a7356; background:rgba(255,255,255,.35); font-size:15px; }
.card b { display:block; font-variant:small-caps; letter-spacing:1px; color:#5a1210; }
.card.pick { cursor:pointer; } .card.pick.sel { background:rgba(142,27,23,.25); border-color:#8e1b17; }
#acc-suspects { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
#acc-out { margin-top:12px; color:#3a2a1a; }
.paper.dark .narr { color:var(--mute); }

#banner { position:fixed; left:0; right:0; top:40%; z-index:40; text-align:center; pointer-events:none; opacity:0;
  font:700 58px Georgia,serif; letter-spacing:6px; color:var(--blood); text-shadow:3px 3px 0 #000,0 0 30px #000;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.88) 20%,rgba(0,0,0,.88) 80%,transparent); padding:16px 0; }
#banner.show { animation:banner 2.8s forwards; }
@keyframes banner { 0%{opacity:0;transform:scale(1.4)} 12%{opacity:1;transform:scale(1)} 80%{opacity:1} 100%{opacity:0} }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:45; padding:10px 18px; background:#1a0d0b; border:2px solid var(--blood);
  opacity:0; transition:opacity .4s; pointer-events:none; }
#toast.on { opacity:1; }

@media (max-width:820px) {
  h1 { font-size:40px; } .cols { grid-template-columns:1fr; } .card { width:100%; }
  #talk-view { grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow-y:auto; }
  #frame { height:34vh; } #nameplate b { font-size:17px; }
}

#q.confront { border-color:var(--blood); box-shadow:0 0 0 1px var(--blood), 0 0 14px rgba(142,27,23,.5); }

/* notebook tabs + handwriting */
.tabs { display:flex; gap:0; margin:-4px 0 14px; border-bottom:2px solid #5a4632; }
.paper .tab { background:transparent; color:#5a4632; border:2px solid #5a4632; border-bottom:none; box-shadow:none; margin-right:6px; padding:8px 16px; }
.paper .tab.sel { background:#5a4632; color:#e8dcc4; }
.hand { font-family:"Inkhand", "Segoe Print", cursive; font-size:25px; line-height:34px; color:#1f2a44;
  background-image:repeating-linear-gradient(transparent 0 33px, rgba(70,90,140,.25) 33px 34px); padding:2px 8px 10px 46px; position:relative; }
.hand::before { content:""; position:absolute; left:34px; top:0; bottom:0; width:2px; background:rgba(142,27,23,.35); }
.hand .sec { color:#5a1210; text-decoration:underline; margin-top:6px; }
.hand .n { display:block; } .hand .n i { color:#7a2a20; font-style:normal; }
.hand .n.new { animation:inkin 1.2s ease-out; } @keyframes inkin { from { opacity:0; clip-path:inset(0 100% 0 0) } to { opacity:1; clip-path:inset(0 0 0 0) } }
.hand .ev { color:#5a1210; }
/* accuse grid */
#acc-suspects { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:12px 0 6px; }
.acc-p { cursor:pointer; text-align:center; padding:6px; border:2px solid transparent; transition:transform .15s; }
.acc-p img { width:100%; aspect-ratio:1085/1400; object-fit:cover; border:3px solid #1a140e; outline:1px solid #8a7356; filter:grayscale(.35) sepia(.2); }
.acc-p span { display:block; font-weight:700; margin-top:6px; font-size:15px; } .acc-p small { color:#6b5a44; font-style:italic; }
.acc-p:hover { transform:translateY(-3px); } .acc-p:hover img { filter:none; }
.acc-p.sel { border-color:#8e1b17; background:rgba(142,27,23,.15); } .acc-p.sel img { filter:none; outline:3px solid #8e1b17; }
.acc-h { color:#5a4632; margin-top:10px; }
@media (max-width:820px) { #acc-suspects { grid-template-columns:repeat(3,1fr); } .hand { font-size:21px; } }
#nb-btn.pulse { animation:pulse 1.5s; } @keyframes pulse { 30% { box-shadow:0 0 0 3px var(--brass),0 0 18px var(--brass); } }

/* evidence images */
.card { display:inline-flex; gap:10px; align-items:flex-start; }
.card .ev-img { width:78px; height:78px; object-fit:cover; flex:none; border:2px solid #1a140e; outline:1px solid #8a7356; }
.clue-get { display:flex; gap:10px; align-items:flex-start; } .clue-get img { width:64px; height:64px; object-fit:cover; flex:none; border:1px solid var(--brass); }
#evidence-pick .ev-pick { display:flex; align-items:center; gap:6px; padding:4px 8px 4px 4px; }
#evidence-pick .ev-pick img { width:34px; height:34px; object-fit:cover; }
#ev-reveal { position:fixed; inset:0; z-index:42; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); cursor:pointer; }
#ev-reveal.on { display:flex; }
.ev-card { width:min(360px,86vw); padding:16px 16px 12px; text-align:center; color:#2a1d12; background:#e8dcc4; border:2px solid #5a4632;
  box-shadow:0 0 0 6px #1a140e, 0 20px 60px #000; animation:cardin .7s cubic-bezier(.2,.9,.3,1.2); }
.ev-card img { width:100%; aspect-ratio:1; object-fit:cover; border:3px solid #1a140e; }
.ev-card .ev-k { font-variant:small-caps; letter-spacing:3px; color:#8e1b17; margin-bottom:8px; }
.ev-card b { display:block; font-size:22px; margin-top:8px; } .ev-card p { margin:6px 0 0; font-size:15px; }
@keyframes cardin { from { opacity:0; transform:translateY(40px) rotate(-6deg) scale(.8); } to { opacity:1; transform:none; } }

/* ---------- point & click room ---------- */
#place-view { position:fixed; top:62px; bottom:0; left:0; right:0; max-width:none; margin:0; padding:0; background:none; border:none; outline:none;
  display:flex; flex-direction:column; align-items:center; }
#room { position:relative; flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
#room-img { max-width:100%; max-height:100%; aspect-ratio:16/9; object-fit:contain; display:block; filter:brightness(.78) saturate(.85);
  box-shadow:0 0 80px #000; animation:roomlamp 7s infinite; }
@keyframes roomlamp { 0%,100%{filter:brightness(.78) saturate(.85)} 49%{filter:brightness(.84)} 51%{filter:brightness(.68)} 53%{filter:brightness(.8)} }
#hotspots { position:absolute; pointer-events:none; }
.spot { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; width:52px; height:52px; padding:0; border-radius:50%;
  border:2px solid var(--brass); background:radial-gradient(circle, rgba(40,28,18,.85) 55%, rgba(176,138,74,.25)); box-shadow:0 0 0 0 rgba(255,200,120,.5);
  display:flex; align-items:center; justify-content:center; animation:spot 2.6s infinite; cursor:zoom-in; }
.spot svg { width:26px; height:26px; }
.spot:hover { background:radial-gradient(circle, rgba(90,60,30,.95) 55%, rgba(255,210,140,.35)); transform:translate(-50%,-50%) scale(1.12); }
.spot .lbl { position:absolute; top:58px; left:50%; transform:translateX(-50%); white-space:nowrap; font:600 13px Georgia,serif; letter-spacing:1px;
  color:var(--bone); background:rgba(0,0,0,.75); padding:3px 8px; border:1px solid var(--umber); opacity:0; transition:opacity .2s; pointer-events:none; }
.spot:hover .lbl, .spot:focus .lbl { opacity:1; }
.spot.done { animation:none; opacity:.55; border-color:#6b5a44; }
.spot.done::after { content:"✓"; position:absolute; right:-4px; top:-6px; font:700 16px Georgia; color:#c9b27a; text-shadow:0 0 3px #000; }
.spot.busy { animation:spin 1s linear infinite; }
@keyframes spot { 0%,100% { box-shadow:0 0 0 0 rgba(255,200,120,.45); } 50% { box-shadow:0 0 0 10px rgba(255,200,120,0); } }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
#strip { width:min(1100px,100%); display:grid; grid-template-columns: 1.3fr auto; grid-template-areas:"intro people" "out people"; gap:4px 18px;
  padding:10px 18px 12px; background:linear-gradient(rgba(10,7,5,.35), rgba(10,7,5,.72)); border-top:1px solid rgba(176,138,74,.4);
  backdrop-filter: blur(2px); }
#place-intro { grid-area:intro; font-size:16px; margin:0; } #exam-out { grid-area:out; margin:0; min-height:24px; font-size:16px; color:var(--bone); }
#people { grid-area:people; display:flex; gap:10px; align-items:center; }
#people .person { margin:0; background:rgba(0,0,0,.45); }
#exam-person { margin-top:4px; font-size:12px; }
@media (max-width:820px) {
  #strip { grid-template-columns:1fr; grid-template-areas:"intro" "out" "people"; }
  .spot { width:40px; height:40px; } .spot svg { width:20px; height:20px; } .spot .lbl { top:44px; font-size:11px; }
}

/* ---------- layout fix: header in flow, views fill the rest (header can wrap) ---------- */
#game.on { display:flex; flex-direction:column; height:100vh; height:100dvh; }
#top { flex:none; position:relative; z-index:6; }
#place-view, #talk-view { position:relative !important; top:auto !important; left:auto; right:auto; bottom:auto; flex:1; min-height:0; }
#talk-view:not(.hidden) { display:grid; }
#place-view:not(.hidden) { display:flex; }
#left { min-height:0; height:100%; padding:10px 0; }
#frame { height:auto; flex:1 1 0; min-height:0; max-height:72vh; }
#nameplate { flex:none; } #exam-person { flex:none; }
/* ---------- suspects standing in the room ---------- */
.who { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer; text-align:center; padding:0; background:none; border:none; box-shadow:none; }
.who img { width:92px; height:118px; object-fit:cover; border-radius:46px/59px; border:3px solid var(--brass);
  box-shadow:0 0 0 3px #000, 0 0 22px rgba(255,190,110,.55); animation:who 3.2s infinite; display:block; margin:0 auto; }
.who span { display:inline-block; margin-top:6px; font:700 13px Georgia,serif; letter-spacing:1px; color:var(--bone); background:rgba(0,0,0,.8);
  padding:3px 10px; border:1px solid var(--brass); white-space:nowrap; text-transform:none; }
.who small { display:block; color:var(--brass); font-style:italic; font-size:12px; text-shadow:0 0 4px #000; text-transform:none; letter-spacing:0; }
.who:hover img { transform:scale(1.06); box-shadow:0 0 0 3px #000, 0 0 30px rgba(255,210,140,.9); } .who:hover { background:none; }
.who.broken img { border-color:var(--blood); filter:saturate(.6); }
@keyframes who { 0%,100% { box-shadow:0 0 0 3px #000, 0 0 16px rgba(255,190,110,.4); } 50% { box-shadow:0 0 0 3px #000, 0 0 28px rgba(255,190,110,.75); } }
@media (max-width:820px) { .who img { width:54px; height:70px; } .who span { font-size:11px; padding:2px 6px; } .who small { display:none; }
  #frame { max-height:34vh; } #talk-view:not(.hidden) { display:grid; overflow-y:auto; } #left { height:auto; } }
/* suspects live in the room now: no duplicate card in the strip */
#place-view #people { display:none; }
#strip { grid-template-columns:1fr; grid-template-areas:"intro" "out"; }
#snd-btn { font-size:16px; padding:6px 10px; min-width:42px; }
/* top bar: spread across the full width, centred */
#top { justify-content:center; align-items:center; gap:8px; }
#places, #tools { flex:1 1 auto; justify-content:center; }
#places { flex-grow:5; } #tools { flex-grow:2; }
#places button, #tools button { flex:1 1 0; white-space:nowrap; }
#tools #snd-btn { flex:0 0 auto; }
#ep-tag { flex:none; }
/* no native image drag: a slight mouse move during a click was starting a drag and swallowing the click */
img { -webkit-user-drag:none; user-drag:none; }
#room, #room *, .who, .spot, .person, .acc-p { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
/* pressed state must keep the centring transform, or the medallion/magnifier jumps away mid-click */
.who:active { transform:translate(-50%,-50%) translateY(2px); }
.spot:active { transform:translate(-50%,-50%) scale(.95); }

/* ---------- notebook hub (bottom-left, permanent) ---------- */
#top #places { flex:1 1 100%; }
#hub { position:fixed; left:14px; bottom:14px; z-index:8; width:150px; display:flex; flex-direction:column; align-items:flex-start; pointer-events:none; }
#hub > * { pointer-events:auto; }
#nb-btn { position:relative; width:150px; height:150px; padding:0; border:none; background:none; box-shadow:none; cursor:pointer;
  transform:rotate(-6deg); transition:transform .25s; }
#nb-btn:hover { background:none; transform:rotate(-2deg) scale(1.06); } #nb-btn:active { transform:rotate(-2deg) scale(1.02); }
#nb-btn img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 6px 14px #000) brightness(.95);
  -webkit-mask-image:radial-gradient(circle, #000 60%, transparent 72%); mask-image:radial-gradient(circle, #000 60%, transparent 72%); }
#nb-btn .hub-lbl { position:absolute; left:50%; bottom:4px; transform:translateX(-50%) rotate(6deg); font:700 12px Georgia,serif; letter-spacing:2px;
  color:var(--bone); background:rgba(0,0,0,.75); padding:2px 8px; border:1px solid var(--umber); white-space:nowrap; }
#nb-btn.pulse img { animation:nbglow 1.5s; }
@keyframes nbglow { 0%,100% { filter:drop-shadow(0 6px 14px #000); } 40% { filter:drop-shadow(0 0 22px rgba(255,200,120,.95)) brightness(1.25); } }
#nb-btn.unread::after { content:""; position:absolute; top:22px; right:22px; width:14px; height:14px; border-radius:50%; background:var(--blood);
  box-shadow:0 0 0 2px #000, 0 0 10px var(--blood); }
.ribbon { position:absolute; left:104px; bottom:46px; transform:rotate(-6deg); padding:5px 12px 5px 16px; font:700 12px Georgia,serif; letter-spacing:2px;
  color:#f2dcd0; background:linear-gradient(#7a1d18,#4a0f0c); border:1px solid #2a0705; box-shadow:0 3px 8px #000;
  clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%); }
.ribbon:hover { background:linear-gradient(#9a2620,#5a130f); transform:rotate(-6deg) translateX(3px); }
.ribbon:active { transform:rotate(-6deg) translateX(1px); }
.ribbon.ready { animation:ribbon 2.2s infinite; }
@keyframes ribbon { 0%,100% { box-shadow:0 3px 8px #000; } 50% { box-shadow:0 0 16px 3px rgba(200,40,30,.8); } }
#hub-meta { display:flex; gap:8px; align-items:center; margin:2px 0 0 8px; }
#hub-meta #snd-btn { font-size:14px; padding:4px 8px; min-width:0; background:rgba(0,0,0,.6); }
#hub-meta #ep-tag { font:italic 12px Georgia,serif; color:var(--brass); text-shadow:0 0 4px #000; white-space:nowrap; }
.paper .tab.tab-acc { margin-left:auto; color:#7a1d18; border-color:#7a1d18; }
.paper .tab.tab-acc:hover { background:#7a1d18; color:#f2dcd0; }
/* keep the room strip text clear of the hub */
#strip { padding-left:190px; }
/* talk view: leave the bottom-left corner to the hub */
#left { padding-bottom:150px !important; }
@media (max-width:820px) {
  #hub { left:6px; bottom:6px; width:76px; }
  #nb-btn { width:76px; height:76px; } #nb-btn .hub-lbl { display:none; } #nb-btn.unread::after { top:10px; right:10px; width:10px; height:10px; }
  .ribbon { left:56px; bottom:30px; font-size:10px; padding:3px 8px 3px 10px; }
  #hub-meta #ep-tag { display:none; }
  #strip { padding-left:96px; } #left { padding-bottom:10px !important; }
}
.ribbon { left:112px; bottom:84px; }
@media (max-width:820px) { .ribbon { left:58px; bottom:44px; } }
@media (max-width:820px) {
  .ribbon { left:4px; bottom:86px; }
  .who span { max-width:96px; overflow:hidden; text-overflow:ellipsis; vertical-align:top; }
}

/* ---------- wax seal (replaces the ribbon) ---------- */
.seal { position:absolute; left:104px; bottom:70px; width:74px; height:74px; padding:0; border:none; background:none; box-shadow:none;
  transform:rotate(12deg); transition:transform .2s; cursor:pointer; }
.seal:hover { background:none; transform:rotate(4deg) scale(1.1); } .seal:active { transform:rotate(4deg) scale(.96); }
.seal img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
  -webkit-mask-image:radial-gradient(circle, #000 52%, transparent 66%); mask-image:radial-gradient(circle, #000 52%, transparent 66%);
  filter:drop-shadow(0 4px 6px #000) saturate(.9) brightness(.9); }
.seal span { position:absolute; left:50%; top:100%; transform:translateX(-50%) rotate(-12deg); margin-top:-6px; font:700 10px Georgia,serif;
  letter-spacing:2px; color:#d9a89a; text-shadow:0 0 4px #000, 0 0 2px #000; white-space:nowrap; opacity:0; transition:opacity .2s; }
.seal:hover span, .seal.ready span { opacity:1; }
.seal.ready img { animation:seal 2.4s infinite; }
@keyframes seal { 0%,100% { filter:drop-shadow(0 4px 6px #000) saturate(.9) brightness(.9); }
  50% { filter:drop-shadow(0 0 14px rgba(200,40,30,.9)) saturate(1.1) brightness(1.15); } }
@media (max-width:820px) { .seal { left:46px; bottom:44px; width:44px; height:44px; } .seal span { display:none; } }
.seal span { transform:translateX(-50%) rotate(-12deg) translate(6px, 4px); margin-top:0; background:rgba(0,0,0,.7); padding:1px 5px; }