/* ── The Table — a candlelit, parchment-and-gold theme ─────────────────────── */
:root{
  --bg:#15100b; --bg2:#1d1610; --panel:#211a12; --panel2:#2a2118;
  --ink:#e9ddc6; --ink-dim:#b6a684; --ink-faint:#8a795c;
  --gold:#c9a34e; --gold-bright:#e8c977; --crimson:#9c3b2e; --crimson-bright:#c8503c;
  --green:#6f8f4f; --blue:#5a7ba6; --amethyst:#7d5a9c;
  --line:#3a2e20; --line-soft:#2c2218;
  --parchment:#e9dcc0; --parchment-ink:#2a2114;
  --shadow:0 10px 40px rgba(0,0,0,.5);
  --serif:"EB Garamond",Georgia,serif; --display:"Cinzel",serif; --ui:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(120% 80% at 50% -10%, #2a2014 0%, var(--bg) 55%, #0d0907 100%) fixed;
  color:var(--ink); font-family:var(--ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#3a2e20;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#4a3a28}

/* ── Join gate ─────────────────────────────────────────────────────────────── */
.gate{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;z-index:50;
  background:linear-gradient(rgba(10,7,4,.72),rgba(8,5,3,.9)), url('/splash.jpg') center/cover no-repeat,
    radial-gradient(circle at 50% 38%,#241a10,#0c0805 70%)}
.gate-card{backdrop-filter:blur(3px)}
.gate-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:16px;padding:38px 34px;width:min(92vw,400px);box-shadow:var(--shadow);text-align:center}
.gate-sigil{font-size:46px;filter:drop-shadow(0 0 18px rgba(201,163,78,.6));animation:flicker 4s infinite}
@keyframes flicker{0%,100%{opacity:1}48%{opacity:.82}50%{opacity:.95}52%{opacity:.8}}
.gate-title{font-family:var(--display);font-weight:700;letter-spacing:.08em;margin:.3em 0 .1em;
  font-size:30px;color:var(--gold-bright)}
.gate-sub{color:var(--ink-dim);font-family:var(--serif);font-size:17px;font-style:italic;margin:0 0 22px}
#join-form{display:flex;flex-direction:column;gap:14px;text-align:left}
#join-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
#join-form input{background:#160f09;border:1px solid var(--line);color:var(--ink);border-radius:9px;
  padding:11px 13px;font-size:16px;font-family:var(--ui);transition:border-color .2s}
#join-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,78,.12)}
#join-btn{margin-top:6px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#231806;
  border:none;border-radius:9px;padding:12px;font-weight:600;font-size:15px;letter-spacing:.03em;
  box-shadow:0 4px 16px rgba(201,163,78,.25);transition:transform .08s,filter .2s}
#join-btn:hover{filter:brightness(1.07)} #join-btn:active{transform:translateY(1px)}
.gate-error{color:var(--crimson-bright);font-size:13px;min-height:1em;text-align:center}
.gate-foot{color:var(--ink-faint);font-family:var(--serif);font-style:italic;font-size:14px}

/* ── App shell ─────────────────────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100%}
.topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(42,33,24,.9),rgba(29,22,16,.7));backdrop-filter:blur(6px);z-index:10}
.scene-head{flex:1;min-width:0;text-align:center}
.scene-title{font-family:var(--display);font-size:18px;font-weight:600;color:var(--gold-bright);
  letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene-sub{font-family:var(--serif);font-style:italic;color:var(--ink-dim);font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:10px}
.clock{font-family:var(--serif);color:var(--ink-dim);font-size:13px;font-style:italic}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--ink-dim);border-radius:8px;
  width:38px;height:38px;font-size:17px;display:grid;place-items:center;transition:.15s}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-bright)}

.stage{flex:1;display:grid;grid-template-columns:248px minmax(0,1fr) 320px;min-height:0}
.rail{overflow-y:auto;min-height:0;padding:14px;display:flex;flex-direction:column;gap:14px;background:rgba(13,9,6,.35)}
.rail-left{border-right:1px solid var(--line-soft)}
.rail-right{border-left:1px solid var(--line-soft)}
.panel{background:linear-gradient(180deg,var(--panel),#1b150e);border:1px solid var(--line-soft);
  border-radius:12px;padding:13px}
.panel-h{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin:0 0 11px;display:flex;align-items:center;justify-content:space-between}

/* Roster */
.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.roster li{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:8px;transition:.15s}
.roster li:hover{background:var(--panel2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none;box-shadow:0 0 0 0 rgba(111,143,79,.5)}
.dot.on{background:var(--green);box-shadow:0 0 8px rgba(111,143,79,.8)}
.roster .who{display:flex;flex-direction:column;min-width:0}
.roster .pc{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster .pl{font-size:12px;color:var(--ink-faint)}
.roster .typing-i{font-size:11px;color:var(--gold);font-style:italic}

/* Initiative */
.initiative{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.initiative li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;background:#1a130c;
  border:1px solid transparent;font-size:13px;flex-wrap:wrap}
.initiative .hpbar{flex-basis:100%}
.initiative li.active{border-color:var(--gold);background:#2a1f10;box-shadow:0 0 12px rgba(201,163,78,.2)}
.initiative .ini-num{font-family:var(--display);color:var(--gold);width:22px;text-align:center;font-size:13px}
.initiative .ini-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.initiative .ini-name.pc{color:var(--gold-bright)}
.initiative .ini-hp{font-size:11px;color:var(--ink-faint)}
.hpbar{height:4px;background:#3a2218;border-radius:3px;overflow:hidden;margin-top:3px}
.hpbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--crimson),var(--crimson-bright))}
.round-badge{font-family:var(--ui);font-size:11px;color:var(--ink-faint);letter-spacing:.04em;text-transform:none}

/* ── Center: scene art ─────────────────────────────────────────────────────── */
/* min-height:0 is essential: without it the column grows to fit the whole feed
   and pushes the composer off-screen instead of letting .feed scroll inside. */
.center{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.scene-art{position:relative;max-height:38vh;overflow:hidden;border-bottom:1px solid var(--line);
  background:#0c0805;flex:none;transition:max-height .4s ease}
/* When collapsed, keep a slim clickable bar so the image can be brought back. */
.scene-art.collapsed{max-height:32px;height:32px;min-height:32px}
.scene-art.collapsed img,.scene-art.collapsed .scene-art-cap,.scene-art.collapsed .art-collapse{display:none}
.art-showbar{display:none}
.scene-art.collapsed .art-showbar{display:flex;align-items:center;justify-content:center;gap:8px;
  position:absolute;inset:0;width:100%;background:linear-gradient(180deg,#211a12,#1a130c);border:none;
  color:var(--gold);font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.scene-art.collapsed .art-showbar:hover{color:var(--gold-bright);background:#241b11}
.scene-art img{width:100%;height:100%;object-fit:cover;display:block;max-height:38vh;
  animation:revealArt 1.1s ease}
@keyframes revealArt{from{opacity:0;transform:scale(1.04);filter:saturate(.6) brightness(.7)}to{opacity:1}}
.scene-art-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 18px 10px;
  background:linear-gradient(transparent,rgba(8,5,3,.9));font-family:var(--serif);font-style:italic;
  color:var(--ink);font-size:14px}
.art-collapse{position:absolute;top:8px;right:8px;background:rgba(8,5,3,.6);border:1px solid var(--line);
  color:var(--ink-dim);border-radius:7px;width:30px;height:30px}

/* ── Feed ──────────────────────────────────────────────────────────────────── */
.feed{flex:1;overflow-y:auto;padding:22px clamp(14px,5vw,64px);display:flex;flex-direction:column;gap:16px;
  scroll-behavior:smooth}
.msg{max-width:760px;animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* DM narration — illuminated parchment voice */
.msg.dm .body{font-family:var(--serif);font-size:18.5px;line-height:1.66;color:#f0e6d0}
.msg.dm .body p{margin:0 0 .7em} .msg.dm .body p:last-child{margin:0}
.msg.dm .body em{color:var(--gold-bright);font-style:italic}
.msg.dm .body strong{color:#fff;font-weight:600}
.msg.dm .body h3{font-family:var(--display);color:var(--gold);font-size:16px;letter-spacing:.06em;
  margin:.4em 0 .3em;text-transform:uppercase}
.msg.dm .body blockquote{border-left:3px solid var(--gold);margin:.6em 0;padding:.1em 0 .1em 14px;
  color:var(--ink-dim)}
.msg.dm .body hr{border:none;border-top:1px solid var(--line);margin:1em 0}
.msg.dm .body ul{margin:.4em 0;padding-left:1.3em}
.msg.dm.speech{padding-left:16px;border-left:3px solid var(--amethyst)}
.msg .speaker{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amethyst);margin-bottom:4px}
.msg.dm.speech .body{font-style:italic}

/* Player lines */
.msg.player{align-self:flex-end;max-width:560px}
.msg.player .bubble{background:linear-gradient(180deg,#27201a,#211a13);border:1px solid var(--line);
  border-radius:13px 13px 4px 13px;padding:9px 13px}
.msg.player .pname{font-size:11px;color:var(--gold);font-weight:600;letter-spacing:.04em;margin-bottom:2px}
.msg.player .ptext{color:var(--ink);white-space:pre-wrap;word-wrap:break-word}
.msg.player.do .bubble{border-style:dashed;border-color:var(--gold)}
.msg.player.do .ptext{font-style:italic;color:var(--gold-bright)}
.msg.player.do .ptext::before{content:"⚔ ";opacity:.6}
.msg.player.ooc{opacity:.72} .msg.player.ooc .bubble{background:#181109;border-radius:13px}
.msg.player.ooc .ptext{font-size:13px;color:var(--ink-dim)}
.msg.player.ooc .ptext::before{content:"(ooc) ";color:var(--ink-faint)}

/* System lines */
.msg.system{align-self:center;color:var(--ink-faint);font-family:var(--serif);font-style:italic;font-size:14px;
  text-align:center;max-width:540px}

/* Roll cards */
.msg.roll{align-self:center;max-width:420px}
.rollcard{background:linear-gradient(180deg,#241b11,#1a130b);border:1px solid var(--line);border-radius:12px;
  padding:11px 15px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
.rollcard .die3d{font-size:30px;filter:drop-shadow(0 0 10px rgba(201,163,78,.4));animation:tumble .7s ease}
@keyframes tumble{0%{transform:rotate(-180deg) scale(.4);opacity:0}70%{transform:rotate(12deg) scale(1.15)}100%{transform:none;opacity:1}}
.rollcard .roll-main{flex:1;min-width:0}
.rollcard .roll-who{font-size:12px;color:var(--ink-dim)}
.rollcard .roll-who b{color:var(--gold)}
.rollcard .roll-break{font-size:13px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.rollcard .roll-total{font-family:var(--display);font-size:26px;color:var(--gold-bright);line-height:1}
.rollcard.success{border-color:var(--green)} .rollcard.success .roll-total{color:#a9d27e}
.rollcard.fail{border-color:var(--crimson)} .rollcard.fail .roll-total{color:var(--crimson-bright)}
.rollcard.crit{border-color:var(--gold-bright);box-shadow:0 0 26px rgba(232,201,119,.4);animation:critpulse 1.2s}
@keyframes critpulse{0%,100%{box-shadow:0 0 26px rgba(232,201,119,.35)}50%{box-shadow:0 0 40px rgba(232,201,119,.7)}}
.rollcard .roll-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:20px}
.roll-tag.success{background:rgba(111,143,79,.2);color:#a9d27e}
.roll-tag.fail{background:rgba(156,59,46,.22);color:var(--crimson-bright)}
.roll-tag.crit{background:rgba(232,201,119,.2);color:var(--gold-bright)}

/* DM typing indicator */
.dm-typing{display:flex;align-items:center;gap:5px;padding:4px 64px 0;color:var(--ink-faint);
  font-family:var(--serif)}
.dm-typing span{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink 1.2s infinite}
.dm-typing span:nth-child(2){animation-delay:.2s}.dm-typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* ── Composer ──────────────────────────────────────────────────────────────── */
.composer{display:flex;align-items:flex-end;gap:9px;padding:12px clamp(12px,4vw,40px) 16px;
  border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(20,15,10,.4),rgba(13,9,6,.7))}
.composer-modes{display:flex;flex-direction:column;gap:3px}
.mode-btn{background:transparent;border:1px solid var(--line);color:var(--ink-faint);border-radius:6px;
  font-size:11px;padding:3px 8px;letter-spacing:.04em;transition:.12s}
.mode-btn.active{border-color:var(--gold);color:var(--gold-bright);background:rgba(201,163,78,.1)}
#composer-input{flex:1;resize:none;background:#160f09;border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:11px 14px;font-family:var(--serif);font-size:16px;line-height:1.4;max-height:180px}
#composer-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,163,78,.1)}
.send-btn{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#231806;border:none;
  border-radius:11px;width:46px;height:46px;font-size:18px;flex:none;transition:.1s}
.send-btn:hover{filter:brightness(1.08)} .send-btn:active{transform:translateY(1px)}

/* ── Sheet panel ───────────────────────────────────────────────────────────── */
.sheet-panel{font-size:14px}
.sheet-empty{color:var(--ink-faint);font-family:var(--serif);font-style:italic;text-align:center;padding:18px 6px}
.sheet-name{font-family:var(--display);color:var(--gold-bright);font-size:17px;letter-spacing:.03em}
.sheet-meta{color:var(--ink-dim);font-size:12.5px;margin-bottom:10px}
.sheet-vitals{display:flex;gap:8px;margin-bottom:12px}
.vital{flex:1;background:#1a130c;border:1px solid var(--line-soft);border-radius:9px;padding:7px;text-align:center}
.vital .vk{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.vital .vv{font-family:var(--display);font-size:20px;color:var(--ink)}
.vital.hp .vv{color:var(--crimson-bright)} .vital.ac .vv{color:var(--blue)}
.abilities{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.abil{background:#1a130c;border:1px solid var(--line-soft);border-radius:9px;padding:6px 4px;text-align:center}
.abil .ak{font-size:10px;letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.abil .am{font-family:var(--display);font-size:18px;color:var(--ink)}
.abil .as{font-size:11px;color:var(--ink-faint)}
.sheet-sec{margin-top:10px} .sheet-sec h4{font-family:var(--display);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin:0 0 5px}
.chip{display:inline-block;background:#1f1810;border:1px solid var(--line-soft);border-radius:14px;
  padding:2px 9px;font-size:12px;margin:0 4px 4px 0;color:var(--ink-dim)}
.skill-roll{cursor:pointer;transition:.12s}.skill-roll:hover{border-color:var(--gold);color:var(--gold-bright)}

/* Dice tray */
.dice-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:9px}
.die-btn{background:#1a130c;border:1px solid var(--line);color:var(--ink-dim);border-radius:8px;padding:8px 0;
  font-family:var(--display);font-size:13px;transition:.12s}
.die-btn:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}
.dice-custom{display:flex;gap:6px}
.dice-custom input{flex:1;min-width:0;background:#160f09;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px;font-family:var(--serif)}
.dice-custom select{background:#160f09;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:0 4px}
.dice-custom button{background:var(--panel2);border:1px solid var(--gold);color:var(--gold-bright);
  border-radius:8px;padding:0 12px}

/* Art "being painted" shimmer placeholder */
.scene-art.painting{min-height:180px;background:linear-gradient(110deg,#1a130c 30%,#2a2014 50%,#1a130c 70%);
  background-size:220% 100%;animation:shimmer 1.6s linear infinite;display:flex;align-items:flex-end}
.scene-art.painting img{display:none}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-120% 0}}
.scene-art.painting .scene-art-cap{position:static;width:100%;background:transparent;color:var(--gold);
  font-style:italic;text-align:center;padding:0 0 16px}
.scene-art-img{cursor:zoom-in}

/* Roll request banner */
.roll-request{display:flex;align-items:center;gap:12px;justify-content:space-between;
  margin:0 clamp(12px,4vw,40px);padding:9px 14px;background:linear-gradient(180deg,#2a2010,#1f1810);
  border:1px solid var(--gold);border-radius:11px;box-shadow:0 0 22px rgba(201,163,78,.18);animation:rise .3s}
.roll-request .rr-text{font-family:var(--serif);font-size:15px;color:var(--ink)}
.roll-request .rr-text b{color:var(--gold-bright)}
.roll-request .rr-btn{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#231806;border:none;
  border-radius:9px;padding:8px 18px;font-weight:600;font-family:var(--display);letter-spacing:.04em;flex:none}
.roll-request .rr-btn:hover{filter:brightness(1.08)}

/* Avatars & portraits */
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);cursor:zoom-in}
.avatar-blank{display:grid;place-items:center;background:#2a2014;color:var(--gold);font-family:var(--display);
  font-size:14px;cursor:default}
.sheet-portrait{width:100%;height:150px;object-fit:cover;border-radius:10px;border:1px solid var(--line);
  margin-bottom:10px;cursor:zoom-in;animation:revealArt 1s ease}

/* HP flash */
.vital.hp.flash-down{animation:hpdown .9s ease}
.vital.hp.flash-up{animation:hpup .9s ease}
@keyframes hpdown{0%,100%{background:#1a130c}30%{background:#4a1810;box-shadow:0 0 16px rgba(200,80,60,.6)}}
@keyframes hpup{0%,100%{background:#1a130c}30%{background:#1f3a18;box-shadow:0 0 16px rgba(111,143,79,.6)}}

/* Conditions + death saves + slots */
.chip.cond{border-color:var(--crimson);color:var(--crimson-bright);background:rgba(156,59,46,.12)}
.chip.slot{font-family:var(--display);color:var(--gold)}
.sheet-sec.death h4{color:var(--crimson-bright)}
.ds-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-dim);margin-bottom:3px}
.ds-row span{flex:1}
.ds-pip{width:13px;height:13px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.ds-pip.ok{background:var(--green);border-color:var(--green)}
.ds-pip.bad{background:var(--crimson);border-color:var(--crimson)}

/* Right-click context menu (kick) */
.ctxmenu{position:fixed;z-index:90;width:200px;background:linear-gradient(180deg,#2a2118,#1d160f);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;animation:rise .15s}
.ctxmenu .ctx-head{padding:8px 12px;font-family:var(--display);font-size:12px;letter-spacing:.06em;
  color:var(--gold);border-bottom:1px solid var(--line-soft)}
.ctxmenu .ctx-item{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--ink);
  padding:9px 12px;font-size:14px;font-family:var(--ui)}
.ctxmenu .ctx-item:hover{background:var(--panel2)}
.ctxmenu .ctx-item.kick{color:var(--crimson-bright)}
.ctxmenu .ctx-item.kick:hover{background:rgba(156,59,46,.18)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(5,3,2,.94);display:grid;place-items:center;
  padding:24px;cursor:zoom-out;animation:rise .25s}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:var(--shadow);border:1px solid var(--line)}

/* Toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2);
  border:1px solid var(--gold);color:var(--ink);padding:10px 18px;border-radius:10px;box-shadow:var(--shadow);
  z-index:60;font-size:14px;animation:rise .3s}

/* ── Responsive ────────────────────────────────────────────────────────────── */
.rail.drawer-open{display:flex}
@media (max-width:1080px){
  /* Rails become fixed overlays, so the stage is a single full-width column.
     (If we left 3 columns, the lone in-flow .center would auto-place into the
      0px first column and collapse the feed.) */
  .stage{grid-template-columns:minmax(0,1fr)}
  .center{grid-column:1}
  .rail{position:fixed;top:0;bottom:0;width:288px;z-index:30;box-shadow:var(--shadow);display:none;
    background:linear-gradient(180deg,#1d160f,#120d08)}
  .rail-left{left:0;border-right:1px solid var(--line)}
  .rail-right{right:0;border-left:1px solid var(--line)}
  .rail.open{display:flex}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20}
}
@media (min-width:1081px){ .icon-btn{display:none} }
@media (max-width:560px){
  .feed{padding:16px 14px} .msg.dm .body{font-size:17px} .msg.player{max-width:80%}
  .scene-art,.scene-art img{max-height:30vh}
}