/* The Guildhall's tavern floor (hall.py's Tavern room; tavern.js draws it).
   The room keeps literal wood-and-fire colours on purpose: it is a place, not
   chrome, and it reads the same under every theme. */
.tw-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.tw-bar button{font-family:'Alegreya SC',serif;font-weight:700;font-size:12.5px;letter-spacing:.05em;
  color:var(--ink-dim);background:var(--panel-2);border:1px solid var(--hairline);border-radius:2px;padding:4px 12px;cursor:pointer}
.tw-bar button.on{color:var(--ground-deep);background:linear-gradient(180deg,var(--gold-bright),var(--gold));border-color:var(--brass)}
.tw-bar input[type=range]{width:90px;accent-color:var(--gold)}
.tw-bar .dim{font-size:12.5px}
.tw-grp{display:inline-flex;gap:6px;align-items:center}
/* every control is a fixed size, so picking a tune or toggling never shifts its neighbours */
.tw-bar select{font-family:'Alegreya',serif;font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--hairline);
  border-radius:2px;padding:3px 6px;width:200px;cursor:pointer;text-overflow:ellipsis}
.tw-bar button:disabled{opacity:.35;cursor:default}
@media (max-width:700px){.tw-l{display:none}.tw-bar input[type=range]{width:64px}.tw-bar select{width:140px}}
/* the room keeps the painting's 16:7 at every size, so people's % positions stay on the floor */
.scene{position:relative;aspect-ratio:16/7;margin:0 0 10px;--tw-s:1;border:1px solid var(--hairline);
  border-radius:3px;overflow:hidden;user-select:none;background:#21160f}
.tw-room{position:absolute;inset:0;background:center/cover no-repeat}
.tw-prop{position:absolute;transform:translate(-50%,-100%);pointer-events:none;display:block;height:auto}
/* the job board's brass plaque, under the board: how many quests are open */
.tw-jobcount{position:absolute;right:3.2%;top:39.5%;width:10.6%;text-align:center;cursor:pointer;z-index:1;
  font-family:'Alegreya SC',serif;font-weight:700;font-size:calc(11px * var(--tw-s));color:#2a1a0c;
  background:linear-gradient(180deg,#e2c27a,#b98d3c);border:1px solid #6e5223;border-radius:3px;padding:2px 0;
  box-shadow:0 2px 4px rgba(0,0,0,.45)}
.tw-jobcount span{font-family:'Cinzel',serif;font-size:1.25em;margin-right:4px}
.tw-jobcount small{font-size:1em}
/* firelight and lantern light over the painting: the only always-on motion, and the motion toggle stops it */
.tw-light{position:absolute;pointer-events:none;border-radius:50%;mix-blend-mode:screen;transform:translate(-50%,-50%)}
.tw-fire{left:50%;top:40%;width:13%;height:30%;background:radial-gradient(closest-side,rgba(255,190,90,.55),rgba(255,120,30,.18) 60%,transparent);
  animation:tw-flick 1.3s ease-in-out infinite alternate}
.tw-hearthglow{left:50%;top:62%;width:62%;height:46%;background:radial-gradient(closest-side,rgba(255,150,60,.2),transparent);
  animation:tw-glow 2.6s ease-in-out infinite alternate}
.tw-lantern{top:17%;width:7%;height:16%;background:radial-gradient(closest-side,rgba(255,205,120,.4),transparent);
  animation:tw-glow 3.4s ease-in-out infinite alternate}
.tw-lantern.b{animation-delay:-1.7s}
@keyframes tw-flick{0%{opacity:.55;transform:translate(-50%,-50%) scale(1)}35%{opacity:1;transform:translate(-50%,-52%) scale(1.06,1.1)}
  70%{opacity:.7;transform:translate(-50%,-50%) scale(.97,1.02)}100%{opacity:.95;transform:translate(-50%,-51%) scale(1.04,1.06)}}
@keyframes tw-glow{0%{opacity:.65}100%{opacity:1}}
.scene.still .tw-light{animation:none}
/* people */
.npc{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:pointer}
.npc .fig{height:100%;width:auto;display:block;transform-origin:50% 100%;will-change:transform;
  filter:drop-shadow(0 6px 4px rgba(0,0,0,.45))}
.npc .tile{height:40%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:2px solid #c9a35a;overflow:hidden;
  background:#2b1d14;color:#f1d79a;font-family:'Cinzel',serif;font-weight:700;font-size:18px;margin-top:auto;
  box-shadow:0 5px 6px rgba(0,0,0,.5);transform-origin:50% 100%}
.npc .tile img{width:100%;height:100%;object-fit:cover;filter:none}
/* a token's box is the token: the bubble sits on its head */
.npc.token .tile{height:100%;margin-top:0}
/* near a wall the bubble opens inward */
.npc.edge-l .bubble{left:0}.npc.edge-l .bubble::after{left:22px}
.npc.edge-r .bubble{right:0}.npc.edge-r .bubble::after{left:auto;right:16px;margin-left:0}
.npc .tag{position:absolute;top:100%;margin-top:3px;white-space:nowrap;font-family:'Alegreya SC',serif;font-weight:700;
  font-size:max(9px,calc(11px * var(--tw-s)));line-height:1;color:#f6ead2;background:rgba(20,12,7,.62);border-radius:8px;padding:2px 7px 3px;pointer-events:none}
.npc .bubble{position:absolute;bottom:100%;margin-bottom:8px;max-width:max(150px,calc(210px * var(--tw-s)));width:max-content;padding:5px 10px;border-radius:10px;
  background:#f6eedc;color:#2a1d12;font-family:'Alegreya',serif;font-size:max(11px,calc(13px * var(--tw-s)));line-height:1.3;
  box-shadow:0 2px 7px rgba(0,0,0,.45);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;pointer-events:none}
.npc .bubble::after{content:'';position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#f6eedc}
.npc .bubble.show{opacity:1;transform:none}
.npc .emote{position:absolute;bottom:100%;font-size:20px;pointer-events:none;animation:tw-rise 1.8s ease-out forwards}
@keyframes tw-rise{0%{opacity:0;transform:translateY(6px) scale(.7)}15%{opacity:1;transform:translateY(-4px) scale(1.1)}100%{opacity:0;transform:translateY(-38px) scale(1)}}
.npc.sel .tag{color:#ffe08a}
.npc.talking{z-index:990 !important}
.npc:hover,.npc.sel{z-index:999 !important}
.floorcard{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--hairline);border-radius:3px;
  padding:10px 14px;margin:0 0 18px;font-size:14.5px}
.floorcard:empty{display:none}
/* Full: the room on the whole screen, letterboxed, still zoomable */
.tw-wrap{position:relative}
.tw-close{display:none}
.tw-wrap.theater{position:fixed;inset:0;z-index:2000;margin:0;background:#0b0705;display:flex;overflow:auto}
.tw-wrap.theater::before{content:'';position:fixed;inset:-60px;z-index:-1;background:var(--tw-art) center/cover;filter:blur(30px) brightness(.32)}
.tw-wrap.theater .scene{margin:auto;max-width:none;flex:none;max-height:none}
.tw-wrap.theater .tw-close{display:block;position:fixed;top:10px;right:12px;z-index:2001;font-size:18px;line-height:1;padding:8px 12px;
  color:#f6ead2;background:rgba(20,12,7,.75);border:1px solid #6e5223;border-radius:4px;cursor:pointer}
.tw-wrap:fullscreen{background:#0b0705;width:100vw;height:100vh}