/* Vienna world shell */
/* z-index 9, one below .overlay's 10, and that number is load-bearing.
   #vienna-screen is itself an .overlay, and it sits LATE in index.html — so
   at the shared z-index 10 it painted on top of every overlay declared before
   it. Achievements (🏅 in the ledger) un-hid itself behind the world and
   looked like a dead button for exactly that reason; #circle-screen had
   already been patched to z-index 11 to escape the same trap. Vienna is a
   world shell, not a modal, so the general answer is to put it under all of
   them. Its own panels/maps/profiles keep their 30/31 — those are inside this
   stacking context and unaffected. */
#vienna-screen{padding:0;display:block;background:#0b0b14;z-index:9}
#vienna-screen.hidden{display:none}
/* The top bar is ONE flex row. It used to be a full-width hud with the coins
   pushed right by margin-left:auto, and an absolutely-positioned button strip
   sitting on top of them — which is exactly why the top right was a jumble. */
#vienna-topbar{position:absolute;left:0;right:0;top:0;height:44px;z-index:20;display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;background:rgba(9,9,20,.92);border-bottom:1px solid rgba(255,255,255,.12);font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;font-size:13px;color:#ddd}
#vienna-hud{flex:1;min-width:0;display:flex;align-items:center;gap:18px;overflow:hidden;white-space:nowrap}
#vienna-hud .vh-town{font-weight:800;letter-spacing:.5px;color:#ffd75e;overflow:hidden;text-overflow:ellipsis}
#vienna-hud .vh-coins{margin-left:auto;flex:none;position:relative}
/* a coin change floats under the counter (vienna.js coinFloat): red = the
   flee bite / a loss, gold = a gain. Dropped into the plate below the bar. */
.vh-float{position:absolute;right:0;top:calc(100% + 8px);white-space:nowrap;font-weight:700;font-size:13px;
  pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.75);animation:vh-float 1.8s ease-out forwards}
.vh-float.loss{color:#ff6b6b}
.vh-float.gain{color:#ffd75e}
@keyframes vh-float{
  0%{opacity:0;transform:translateY(-6px)}
  12%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(10px)}
  100%{opacity:0;transform:translateY(20px)}
}
#vienna-hud-btns{flex:none;display:flex;gap:6px;align-items:center}
#vienna-hud-btns button{font:700 12px "Avenir Next",system-ui,sans-serif;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eee;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap}
#vienna-hud-btns button.on{background:rgba(255,215,94,.18);border-color:rgba(255,215,94,.55);color:#ffd75e}
#vienna-hud-btns button:hover{background:rgba(255,255,255,.13);border-color:rgba(255,215,94,.5)}
#vienna-bug-btn{color:#ffb3b3}
#vienna-bug-btn:hover{border-color:rgba(255,120,120,.6) !important;background:rgba(255,90,90,.14) !important}
#vienna-burger{font-size:15px !important;line-height:1;padding:5px 10px !important}
#vienna-burger.on{background:#ffd75e !important;color:#221 !important;border-color:transparent !important}
/* narrow screens keep the icons and drop the words rather than wrapping */
@media (max-width:720px){ #vienna-hud-btns .vb-l{display:none} #vienna-hud .vh-rep{display:none} }
@media (max-width:520px){ #vienna-hud .vh-hearts{display:none} }
#vienna-hud .vh-town{font-weight:800;letter-spacing:.5px;color:#ffd75e}
#vienna-root{position:absolute;left:0;right:0;top:44px;bottom:0}
#vienna-panel,#vienna-map{position:absolute;inset:44px 0 0 0;z-index:30;display:grid;place-items:center;background:rgba(5,5,12,.82)}
#vienna-panel.hidden,#vienna-map.hidden{display:none}
.vp-card{width:min(900px,94%);background:#14121c;border:1px solid rgba(255,215,94,.35);border-radius:14px;overflow:hidden;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;position:relative}
.vp-card img{display:block;width:100%;max-height:52vh;object-fit:cover;background:#fff}
.vp-body{padding:14px 18px 18px}
.vp-body h2{font-size:18px;color:#ffd75e;margin:0 0 4px}
.vp-body p{font-size:13.5px;color:rgba(255,255,255,.7);margin:0 0 12px}
.vp-actions{display:flex;gap:8px;flex-wrap:wrap}
.vp-close{position:absolute;right:10px;top:8px;background:rgba(0,0,0,.55);border:0;color:#fff;font-size:16px;width:32px;height:32px;border-radius:50%;cursor:pointer}

/* duel portraits during a Vienna run: translucent busts, top corners, facing each other */
#duel-portraits{position:fixed;left:0;right:0;top:0;height:0;z-index:6;pointer-events:none}
#duel-portraits.hidden{display:none}
#duel-portraits img{position:absolute;top:6px;width:170px;height:170px;object-fit:contain;object-position:top;opacity:.62;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
#dp-you{left:8px}#dp-opp{right:8px;transform:scaleX(-1)}
.vi-flip{transform:scaleX(-1)}
@media (max-width:900px){#duel-portraits img{width:96px;height:96px}}

.vm-wrap{position:relative}.vm-wrap img{max-height:62vh}
.vm-tabs{position:absolute;left:10px;top:8px;display:flex;gap:6px;z-index:2}
.vm-tab{font:800 12px "Avenir Next",system-ui,sans-serif;padding:5px 12px;border-radius:999px;border:2px solid rgba(255,215,94,.5);background:rgba(20,16,10,.85);color:#ffd75e;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.vm-tab.on{background:#ffd75e;border-color:#ffd75e;color:#221}
@media (max-width:700px){.vm-tab{font-size:10px;padding:4px 9px}}
#vienna-map-pins{position:absolute;inset:0}
.vm-pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;line-height:1.1;font:800 12px "Avenir Next",system-ui,sans-serif;padding:5px 10px;border-radius:999px;border:2px solid #ffd75e;background:rgba(20,16,10,.9);color:#ffd75e;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.vm-pin small{font-size:9.5px;font-weight:700;opacity:.8}
.vm-pin.here{background:#ffd75e;color:#221}
.vm-pin.locked{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.7);cursor:not-allowed}
.vm-pin.soon{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.55);border-style:dashed;cursor:not-allowed}
/* a pin the level does not reach (experience, 2026-09-06): named, shut, its level on it */
.vm-pin.locked{border-color:rgba(255,139,160,.5);color:rgba(255,255,255,.7);cursor:not-allowed}
.vm-pin.locked small{color:#ff8ba0;opacity:1}
#vienna-hud .vh-lv{font-weight:800;color:#7be2ff;margin-right:6px}
.vp-piano.locked{opacity:.75}.vp-piano.locked .vp-price{color:#c9b47a}
/* the roads out of the cities (Vineyard, Alpine, Lagoon). Smaller and green,
   so a road never reads as another city on the tour. .locked is restated
   because this block sits after .vm-pin.locked and would otherwise win. */
.vm-pin.road{font-size:10.5px;padding:3px 8px;border-color:#8fd18a;color:#d6f0d1;background:rgba(12,22,12,.88)}
.vm-pin.road.here{background:#8fd18a;border-color:#8fd18a;color:#10210f}
.vm-pin.road.locked{border-color:rgba(255,255,255,.42);color:rgba(255,255,255,.66)}
@media (max-width:700px){.vm-pin{font-size:10px;padding:3px 7px}.vm-pin small{display:none}}
/* Under a ~600px-wide painting the roads start colliding with their own city
   (measured: clear at a 640px viewport, Vienna touches the Vineyard Road at
   600, Paris does too by 520; the eight cities alone never collide at any
   width). So on a phone the roads come off the map and the town gate stays
   the way out, exactly as it was before they were pinned. The note's own
   sentence about the green pins goes with them. */
@media (max-width:640px){.vm-pin.road,.vm-roads{display:none}}

/* the piano store ladder */
.vp-pianos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%}
.vp-piano{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center}
.vp-piano img{width:100%;max-height:96px;object-fit:contain;background:transparent}
.vp-piano b{font-size:13px;color:#fff}.vp-piano small{font-size:11px;color:rgba(255,255,255,.6);min-height:2.6em}
.vp-piano .vp-price{font:700 12px "Avenir Next",system-ui,sans-serif;color:#ffd75e}
.vp-piano.here{border-color:rgba(255,215,94,.7);background:rgba(255,215,94,.08)}
.vp-piano.locked{opacity:.55}
.vp-piano button{margin-top:auto}
.vp-card .vp-body{max-height:calc(100vh - 44px - 52vh - 20px);overflow:auto}
/* a panel with no picture (the piano store, a rival with no bust): the body
   takes back the 52vh the image would have had */
#vienna-panel.noimg .vp-card .vp-body{max-height:calc(100vh - 44px - 20px)}

/* ---- NPC profile page (the "Profile" pill on a character) ----
   Same plate as the room panel, laid out as a dossier: picture + facts on the
   left, the writing on the right. The picture is a painted bust where we have
   one and the walking sprite otherwise, so the frame sets the size and the
   image just fits inside it. */
#vienna-profile{position:absolute;inset:44px 0 0 0;z-index:31;display:grid;place-items:center;background:rgba(5,5,12,.85)}
#vienna-profile.hidden{display:none}
.np-card{width:min(840px,94%);max-height:calc(100vh - 64px);overflow:auto}
.np-grid{display:grid;grid-template-columns:216px 1fr;gap:20px;padding:20px 22px 22px}
.np-side{display:flex;flex-direction:column;gap:12px}
.np-frame{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid rgba(255,215,94,.3);
  background:radial-gradient(120% 100% at 50% 0%,#2a2438 0%,#15121e 70%)}
/* beats .vp-card img, which is written for the full-bleed room plates */
.np-card .np-frame img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:bottom center;background:transparent;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.np-card .np-frame img.np-bust{object-fit:cover;object-position:top center;filter:none}
.np-facts{display:flex;flex-direction:column;gap:7px}
.np-fact{display:flex;flex-direction:column;gap:1px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.np-fact b{font:800 9.5px "Avenir Next",system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;color:rgba(255,215,94,.75)}
.np-fact span{font-size:12px;color:rgba(255,255,255,.82);line-height:1.35}
.np-main h2{margin:0;font-size:26px;font-weight:800;color:#ffd75e;letter-spacing:.3px}
.np-title{margin-top:3px;font:700 12px "Avenir Next",system-ui,sans-serif;letter-spacing:1.1px;text-transform:uppercase;color:rgba(255,255,255,.62)}
.np-title .np-home{color:rgba(255,255,255,.42)}
.np-tag{margin-top:10px;font-size:14.5px;font-style:italic;color:rgba(255,255,255,.9)}
.np-quote{margin:12px 0 0;padding:8px 0 8px 14px;border-left:2px solid rgba(255,215,94,.45);
  font-size:13px;color:rgba(255,255,255,.66)}
.np-story{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.np-story p{margin:0;font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.78)}
.np-record{margin-top:12px;font:700 12px "Avenir Next",system-ui,sans-serif;color:#8ee7a6}
.np-actions{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.np-actions button{font:700 13px "Avenir Next",system-ui,sans-serif;padding:9px 16px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#eee}
.np-actions button.primary{border-color:rgba(255,215,94,.6);background:rgba(255,215,94,.14);color:#ffd75e}
@media (max-width:720px){
  .np-grid{grid-template-columns:1fr;gap:14px;padding:16px}
  .np-side{flex-direction:row;align-items:flex-start;gap:12px}
  .np-frame{width:132px;flex:0 0 132px}
  .np-facts{flex:1}
  .np-main h2{font-size:21px}
}

/* ---- the in-world ☰ menu (js/vienna.js renderMenu) ---------------------- */
#vienna-menu{position:absolute;right:10px;top:50px;z-index:40;width:300px;max-width:calc(100vw - 20px);max-height:calc(100% - 62px);overflow:auto;background:rgba(14,12,22,.97);border:1px solid rgba(255,215,94,.35);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.6);padding:8px;font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;color:#eee}
#vienna-menu.hidden{display:none}
#vienna-menu .vm-h{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:#ffd75e;opacity:.85;margin:10px 4px 5px}
#vienna-menu .vm-h:first-child{margin-top:2px}
#vienna-menu .vm-row{display:flex;align-items:center;gap:8px;padding:4px}
#vienna-menu .vm-row span{flex:1;font-size:12.5px}
#vienna-menu .vm-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:600 13px inherit;padding:8px 9px;border-radius:9px;border:1px solid transparent;background:transparent;color:#eee;cursor:pointer}
#vienna-menu .vm-item:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
#vienna-menu .vm-item i{font-style:normal;width:18px;text-align:center;flex:none}
#vienna-menu .vm-item.leave{color:#ffb4bd}
#vienna-menu hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:8px 2px}
/* the gait picker: one card per walk, the chosen one lit */
#vienna-menu .vm-gait{display:flex;flex-direction:column;gap:5px}
#vienna-menu .vm-gait button{text-align:left;font:inherit;padding:7px 9px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#eee;cursor:pointer}
#vienna-menu .vm-gait button:hover{background:rgba(255,255,255,.09)}
#vienna-menu .vm-gait button.on{background:rgba(255,215,94,.14);border-color:#ffd75e}
#vienna-menu .vm-gait b{display:block;font-size:12.5px}
#vienna-menu .vm-gait em{display:block;font-style:normal;font-size:10.5px;opacity:.6;line-height:1.35;margin-top:2px}
#vienna-menu .vm-gait button.on b::after{content:" \2713";color:#ffd75e}
/* a two-state switch, same idea as Settings' segmented control */
#vienna-menu .vm-seg{display:flex;flex:none;border:1px solid rgba(255,255,255,.18);border-radius:8px;overflow:hidden}
#vienna-menu .vm-seg button{font:700 11px inherit;padding:4px 10px;border:0;background:transparent;color:#bbb;cursor:pointer}
#vienna-menu .vm-seg button.on{background:#ffd75e;color:#221}

/* ---- the right-hand ledger (js/vienna.js renderSide) ---------------------
   A docked parchment panel: the TOWN shrinks to make room for it (town.js's
   ResizeObserver on the root refits the camera), so it never covers the
   plate. Collapsed, it is one tab on the right edge. Dressed after the plate's
   own palette: cream paper, ink, brass, the teal of the roofs. On narrow
   screens it slides over the town instead of docking. */
#vienna-screen{--vs-w:300px}
#vienna-screen.vs-open #vienna-root{right:var(--vs-w)}
#vienna-side{position:absolute;right:0;top:44px;bottom:0;width:var(--vs-w);z-index:25;display:none;flex-direction:column;
  color:#2b2419;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .08 0 0 0 .16 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg,#efe3c6 0%,#e6d6b0 55%,#dbc59a 100%);
  border-left:3px double #8a6a2c;box-shadow:-10px 0 28px rgba(0,0,0,.45)}
#vienna-screen.vs-open #vienna-side{display:flex}
/* Keep the reopen handle above room cards when they overlap on a phone. */
#vienna-side-tab{position:absolute;right:0;top:56px;z-index:25;display:flex;align-items:center;gap:6px;padding:6px 8px 6px 6px;
  border:2px solid #8a6a2c;border-right:0;border-radius:12px 0 0 12px;cursor:pointer;
  background:linear-gradient(180deg,#efe3c6,#dbc59a);color:#5b4b33;box-shadow:-4px 2px 12px rgba(0,0,0,.4);
  font:700 14px "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
#vienna-side-tab img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #b8923f;background:#2a2438}
#vienna-side-tab:hover{background:linear-gradient(180deg,#f6ecd4,#e6d6b0)}
#vienna-screen.vs-open #vienna-side-tab{display:none}

.vs-head{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px 6px 8px;border-bottom:1px solid #b39a68;
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0))}
.vs-title{flex:1;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#6b5528;text-align:center}
.vs-head button{font:700 13px inherit;font-family:inherit;color:#6b5528;background:transparent;border:1px solid transparent;border-radius:7px;padding:3px 8px;cursor:pointer}
.vs-head button:hover{background:rgba(138,106,44,.14);border-color:#b39a68}
.vs-body{flex:1;overflow:auto;padding:10px 12px 18px;scrollbar-width:thin;scrollbar-color:#b39a68 transparent}

/* the calling card: bust, name, level, hearts, reputation, coins */
.vs-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px 8px 12px;
  border:1px solid #b39a68;border-radius:12px;background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.vs-portrait{width:104px;height:104px;border-radius:50%;padding:0;overflow:hidden;cursor:pointer;position:relative;
  border:3px double #9a7a35;background:radial-gradient(120% 100% at 50% 0%,#3a3350 0%,#15121e 70%);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.vs-portrait img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.vs-portrait::after{content:"👗";position:absolute;right:2px;bottom:2px;font-size:15px;line-height:1;background:#efe3c6;border:1px solid #9a7a35;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.vs-portrait:hover::after{opacity:1}
.vs-name{margin-top:4px;font-size:19px;font-weight:700;color:#2b2419;line-height:1.1}
.vs-rank{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#6b5528}
.vs-elo{font-size:11.5px;color:#5b4b33;opacity:.85}
.vs-hearts{font-size:14px;letter-spacing:1px;margin-top:4px}
.vs-bar{width:100%;height:9px;margin-top:6px;border-radius:5px;border:1px solid #9a7a35;background:#cdb98f;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.vs-bar span{display:block;height:100%;background:linear-gradient(90deg,#b8923f,#e9c455);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2)}
/* the walking piano's card */
.vs-piano{display:flex;gap:10px;align-items:flex-start;padding:8px;border:1px solid #c9b07a;border-radius:8px;background:rgba(255,250,235,.55)}
.vs-piano img{width:78px;height:78px;object-fit:contain;flex:none}
.vs-pi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vs-pi b{display:flex;align-items:center;gap:6px;font-size:15px}
.vs-pi small{font-size:11.5px;color:#5c4a2a}
.vs-pi .vs-bar{margin-top:4px;height:7px}
.vs-bar.cond span{background:linear-gradient(90deg,#8a5a2b,#c98b3c)}
.vs-bar.tune span{background:linear-gradient(90deg,#2f6f6a,#4fa39b)}
.vs-mini{font:inherit;font-size:12px;line-height:1;padding:2px 6px;border-radius:6px;border:1px solid #9a7a35;background:#f4e9cf;color:#3b2a10;cursor:pointer}
.vs-pi .vs-note a{color:#7a4a12;text-decoration:underline;cursor:pointer}
.vs-away{align-self:flex-start;margin-top:5px}
.vs-pianos{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.vs-pick{flex:1 1 calc(33% - 6px);min-width:72px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 4px;border-radius:8px;border:1px solid #c9b07a;background:rgba(255,250,235,.55);color:#3b2a10;font:inherit;cursor:pointer;text-decoration:none}
.vs-pick img{width:64px;height:44px;object-fit:contain}
.vs-pick span{font-size:11px;line-height:1.15;text-align:center}
.vs-pick.on{border-color:#8a5a2b;background:rgba(233,196,85,.35);box-shadow:inset 0 0 0 1px #b8923f}
.vs-pick.locked{justify-content:center;opacity:.8;cursor:default;border-style:dashed}.vs-pick.locked span{font-size:18px;font-weight:700}.vs-pick.locked small{font-size:10px}
.vs-pick.locked.r-rare{border-color:#3a7bd5}.vs-pick.locked.r-legendary{border-color:#c98b3c}.vs-pick.locked.r-mythic{border-color:#8e44ad;background:rgba(142,68,173,.08)}
.vp-piano.drop .vp-price{color:#e9c455}.vp-piano.drop.r-mythic{border-color:rgba(200,120,255,.45)}.vp-piano.drop.r-legendary{border-color:rgba(255,190,80,.45)}.vp-piano.drop.r-rare{border-color:rgba(100,160,255,.45)}
.rw-piano{display:block;margin-top:6px;font-weight:700;color:#ffd75e}
.vs-pick.more{justify-content:center}.vs-pick.more span{font-size:16px;font-weight:700}.vs-pick.more small{font-size:10px;opacity:.75}
.vp-service{grid-column:1/-1;margin-top:10px;padding:10px 12px;border-top:1px solid rgba(0,0,0,.15);display:flex;flex-direction:column;gap:6px}
.vp-service small{opacity:.8}.vp-svc-btns{display:flex;gap:8px;flex-wrap:wrap}
.vs-xp{font-size:11.5px;color:#5b4b33}
.vs-coins{margin-top:4px;font-size:16px;font-weight:700;color:#2b2419;display:flex;align-items:center;gap:6px}

.vs-h{margin:14px 2px 6px;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#6b5528;
  display:flex;align-items:center;gap:8px}
.vs-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#b39a68,transparent)}

/* last piece played */
.vs-last{border:1px solid #b39a68;border-radius:10px;padding:9px 10px;background:rgba(255,255,255,.16);display:flex;flex-direction:column;gap:2px}
.vs-last b{font-size:14px;line-height:1.2;color:#2b2419}
.vs-last small{font-size:11.5px;font-style:italic;color:#5b4b33}
.vs-last .vs-res{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:12px;color:#5b4b33}
.vs-grade{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 12px "Avenir Next",system-ui,sans-serif;color:#fff;background:#6b5528}
.vs-grade[data-g="S"]{background:#c99a1e}.vs-grade[data-g="A"]{background:#3d8a4f}.vs-grade[data-g="B"]{background:#2e5d57}
.vs-grade[data-g="C"]{background:#b07a2a}.vs-grade[data-g="D"],.vs-grade[data-g="F"]{background:#a0413f}
.vs-last button{margin-top:7px;align-self:flex-start}
.vs-empty{font-size:12.5px;font-style:italic;color:#5b4b33}

/* engraved parchment buttons, two to a row */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
/* the class picker on the You tab (player_class, 2026-08-30) */
.vs-class{display:flex;gap:6px;flex-wrap:wrap}
.vs-cls{font:700 12px inherit;font-family:inherit;color:#2b2419;padding:7px 9px;border-radius:9px;cursor:pointer;
  border:1px solid #8a6a2c;background:linear-gradient(180deg,#f6ecd4,#e6d5b1);opacity:.75}
.vs-cls.on{opacity:1;border-color:#5c4413;box-shadow:0 0 0 2px rgba(138,106,44,.45)}
.vs-btn{display:flex;align-items:center;gap:7px;font:700 12.5px inherit;font-family:inherit;color:#2b2419;text-align:left;
  padding:8px 9px;border-radius:9px;cursor:pointer;border:1px solid #8a6a2c;
  background:linear-gradient(180deg,#f6ecd4,#e6d5b1);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.18)}
.vs-btn i{font-style:normal;font-size:15px;width:20px;text-align:center;flex:none}
.vs-btn:hover{background:linear-gradient(180deg,#fff7e3,#ecdcb8);border-color:#2e5d57;color:#1f3f3b}
.vs-btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}
.vs-btn.wide{grid-column:1 / -1}
.vs-btn.leave{color:#7a2f33;border-color:#a0413f}
.vs-btn:disabled{opacity:.5;cursor:default}
.vs-last button.vs-btn{padding:6px 10px;font-size:12px}

/* the wardrobe drawer: the outfit, the attire switch, the eight pianists */
.vs-fit{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid #b39a68;border-radius:12px;background:rgba(255,255,255,.18)}
.vs-fit img{width:72px;height:108px;object-fit:contain;object-position:bottom;background:radial-gradient(60% 40% at 50% 92%,rgba(0,0,0,.25),transparent 70%);border-radius:8px}
.vs-fit b{display:block;font-size:16px}.vs-fit small{display:block;font-size:12px;font-style:italic;color:#5b4b33;margin-top:2px}
.vs-seg{display:flex;border:1px solid #8a6a2c;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.2)}
.vs-seg button{flex:1;font:700 12px inherit;font-family:inherit;padding:7px 6px;border:0;background:transparent;color:#5b4b33;cursor:pointer}
.vs-seg button.on{background:#2e5d57;color:#f3e9cf}
.vs-looks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.vs-look{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 3px 4px;border-radius:9px;cursor:pointer;
  border:1px solid #b39a68;background:rgba(255,255,255,.14);font:700 9.5px inherit;font-family:inherit;color:#5b4b33;line-height:1.1;text-align:center}
.vs-look img{width:44px;height:66px;object-fit:contain;object-position:bottom}
.vs-look:hover{background:rgba(255,255,255,.35)}
.vs-look.on{border-color:#2e5d57;box-shadow:0 0 0 2px #2e5d57 inset;background:rgba(46,93,87,.12);color:#1f3f3b}
.vs-note{margin:10px 2px 0;font-size:11.5px;font-style:italic;color:#5b4b33;line-height:1.4}

/* the inventory drawer: pianos, note effects, attire */
.vs-items{display:flex;flex-direction:column;gap:6px}
.vs-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid #b39a68;border-radius:10px;background:rgba(255,255,255,.16)}
.vs-item img{width:54px;height:40px;object-fit:contain;flex:none}
.vs-item .vs-it{flex:1;min-width:0}
.vs-item b{display:block;font-size:13px;line-height:1.15}
.vs-item small{display:block;font-size:11px;font-style:italic;color:#5b4b33;line-height:1.3}
.vs-item.on{border-color:#2e5d57;background:rgba(46,93,87,.12)}
.vs-item .vs-on{font-size:11px;font-weight:700;color:#2e5d57;white-space:nowrap}
.vs-item button.vs-btn{padding:5px 8px;font-size:11.5px}
.vs-chips{display:flex;flex-wrap:wrap;gap:5px}
.vs-chip{font:700 11px inherit;font-family:inherit;padding:4px 9px;border-radius:999px;border:1px solid #b39a68;background:rgba(255,255,255,.2);color:#5b4b33}
.vs-chip.on{background:#2e5d57;border-color:#2e5d57;color:#f3e9cf}
.vs-chip .vs-ico{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:1px}

@media (max-width:720px){
  #vienna-screen{--vs-w:min(300px,86vw)}
  #vienna-screen.vs-open #vienna-root{right:0}       /* slides over the town rather than docking */
  #vienna-side{box-shadow:-14px 0 40px rgba(0,0,0,.6)}
}

/* ---- the fountain notice board (js/board.js) ----
   A wooden board with paper notices pinned to it, in the ledger's parchment
   voice so it reads as part of the square rather than the dark UI. */
#vienna-board{position:absolute;inset:44px 0 0 0;z-index:30;display:grid;place-items:center;background:rgba(5,5,12,.82)}
#vienna-board.hidden{display:none}
.nb-card{position:relative;width:min(1040px,96%);max-height:calc(100vh - 64px);display:flex;flex-direction:column;overflow:hidden;border-radius:14px;
  border:7px solid #5a3d22;box-shadow:inset 0 0 0 2px #8a6a3c,0 18px 50px rgba(0,0,0,.6);
  color:#2b2419;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.02 .9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .06 0 0 0 0 .02 0 0 0 .35 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg,#7a5634 0%,#6a4a2c 60%,#5c3f24 100%)}
.nb-card .vp-close{z-index:2}
#vienna-board-inner{display:flex;flex-direction:column;min-height:0;flex:1}
.nb-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 52px 10px 16px;border-bottom:2px solid rgba(0,0,0,.25);background:rgba(0,0,0,.18)}
.nb-title{font-weight:800;font-size:16px;color:#f3e4c2;letter-spacing:.4px;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.nb-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.nb-tab{font:700 12.5px inherit;font-family:inherit;padding:6px 11px;border-radius:8px;cursor:pointer;color:#f3e4c2;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);display:flex;align-items:center;gap:6px}
.nb-tab i{font-style:normal}
.nb-tab.on{background:linear-gradient(180deg,#f6ecd4,#e6d5b1);color:#2b2419;border-color:#2b2419}
.nb-body{overflow:auto;padding:16px 18px 20px;min-height:0}
.nb-loading,.nb-lead{color:#f3e4c2;font-size:13.5px;margin:0 0 12px;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.nb-lead{opacity:.9}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;align-items:start}
.nb-note{position:relative;min-width:0;overflow-wrap:break-word;padding:14px 14px 12px;border-radius:4px;border:1px solid #b39a68;box-shadow:0 6px 14px rgba(0,0,0,.35);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .08 0 0 0 .14 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    linear-gradient(180deg,#f3e8cf 0%,#e9dab7 100%);
  transform:rotate(-.35deg)}
.nb-grid>.nb-note:nth-child(2n){transform:rotate(.4deg)}
.nb-grid>.nb-note:nth-child(3n){transform:rotate(-.15deg)}
.nb-note::before{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ff7b6b,#a11c14 70%);box-shadow:0 2px 3px rgba(0,0,0,.45)}
.nb-note.featured{border-color:#8a6a2c;box-shadow:0 0 0 2px rgba(255,215,94,.55),0 6px 14px rgba(0,0,0,.35)}
.nb-note.live{box-shadow:0 0 0 2px rgba(46,93,87,.7),0 6px 14px rgba(0,0,0,.35)}
.nb-note.wanted{background:linear-gradient(180deg,#efdcb9,#e2c99b)}
.nb-kicker{font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#6b5528;margin-bottom:6px}
.nb-big{display:block;font-size:17px;line-height:1.2;color:#2b2419}
.nb-note small{display:block;font-size:12px;color:#5b4b33;margin-top:2px}
.nb-note p{margin:8px 0 0;font-size:13px;line-height:1.45}
.nb-note p.nb-meta,.nb-meta{font-size:11.5px;color:#6b5a3f}
.nb-quote{font-style:italic;color:#4b3b25}
.nb-ok{font-weight:700;color:#1f5b3b;font-size:12.5px}
.nb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.nb-row .vs-btn{font-size:12px;padding:7px 10px}
.nb-wanted,.nb-piano{display:flex;gap:12px;align-items:flex-start}
.nb-wanted img{width:84px;height:84px;object-fit:cover;object-position:top center;border-radius:8px;border:2px solid #8a6a2c;background:#2a2438;flex:none}
.nb-piano img{width:96px;height:72px;object-fit:contain;flex:none}
.nb-wanted>div,.nb-piano>div{min-width:0}
.nb-note s{color:#8a7a5c;font-size:12px;margin-left:4px}
.nb-form{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:4px}
.nb-form label{display:flex;flex-direction:column;gap:3px;min-width:0;justify-content:flex-start;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#6b5528}
.nb-form label.wide,.nb-form .wide,.nb-form p{grid-column:1 / -1}
.nb-form output{font:700 13px inherit;font-family:inherit;text-transform:none;letter-spacing:0;padding:7px 8px;border-radius:7px;border:1px dashed #b39a68;background:rgba(0,0,0,.06);color:#5b4b33;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-form input,.nb-form select{font:600 13px inherit;font-family:inherit;padding:7px 8px;border-radius:7px;border:1px solid #9a7a35;background:rgba(255,255,255,.55);color:#2b2419;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box;text-overflow:ellipsis}
.nb-form p{margin:2px 0 0}
.nb-form label>input,.nb-form label>select,.nb-form label>output{margin-top:auto}
.nb-pieces{margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.5}
/* a performance commission's claims, as the composer sees them */
.nb-claims{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.nb-claim{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border-radius:6px;background:rgba(0,0,0,.06);font-size:12.5px;color:#2b2419}
.nb-claim>span:first-child{flex:1 1 12ch;min-width:0}
.nb-claim small{display:block;font-size:11px;color:#6b5a3f}
.nb-claim.disputed{background:rgba(160,40,40,.1)}
.nb-claim.waived{opacity:.6}
.nb-claim .nb-row{margin:0;flex:none}
.nb-h{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#f3e4c2;margin:18px 0 10px;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.nb-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.nb-foot button{font:700 12.5px inherit;font-family:inherit;padding:8px 12px;border-radius:9px;cursor:pointer;color:#f3e4c2;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.nb-foot button:hover{background:rgba(255,255,255,.2)}
.nb-chip{display:inline-block;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid #b39a68;background:#f3e8cf;color:#5b4b33;margin:0 6px 6px 0}
.nb-entrants{margin:12px 0 4px;color:#f3e4c2;font-size:12.5px}
.nb-back{margin:0 0 12px}
.nb-back b{color:#f3e4c2;font-size:16px}
.nb-back .nb-meta{color:#e8d9b8}
/* the bracket: one column per round, matches as two-row cards; the live
   round is outlined, a winner in bold with the teal rim, you in gold */
.nb-bracket{display:flex;gap:14px;overflow-x:auto;padding:10px 2px 14px;align-items:stretch}
.nb-round{flex:none;width:210px;display:flex;flex-direction:column;justify-content:space-around;gap:10px;padding:8px;border-radius:10px;background:rgba(0,0,0,.14)}
.nb-round.live{outline:2px solid rgba(255,215,94,.7)}
.nb-rh{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#f3e4c2;text-align:center;margin-bottom:2px}
.nb-rh small{display:block;font-weight:600;letter-spacing:0;text-transform:none;color:#e8d9b8;font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-match{border:1px solid #b39a68;border-radius:6px;overflow:hidden;background:#f3e8cf;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.nb-match>div{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:12.5px;color:#2b2419;border-bottom:1px solid rgba(0,0,0,.12);min-height:30px}
.nb-match>div:last-child{border-bottom:0}
.nb-match>div b{margin-left:auto;font-size:12px;color:#5b4b33}
.nb-match>div.win{font-weight:800;background:rgba(46,93,87,.14)}
.nb-match>div.me{box-shadow:inset 3px 0 0 #c9a227}
.nb-match.empty>div{color:#9a8a6c}
.nb-seed{display:inline-block;min-width:16px;font-size:10px;font-weight:700;color:#6b5528;text-align:right}
.nb-bye{color:#9a8a6c}
@media (max-width:720px){
  .nb-card{width:100%;max-height:calc(100vh - 44px);border-width:0 0 4px;border-radius:0}
  .nb-head{padding:10px 48px 8px 12px}
  .nb-tabs{margin-left:0}
  .nb-body{padding:12px}
  .nb-grid{grid-template-columns:1fr}
  .nb-form{grid-template-columns:1fr}
}

/* ---- the loading screen on the way into the world (vienna.js showLoading) ----
   One of the storybook loading paintings over a slow drift, the city's name,
   a thin line that crawls while the town is fetched. z-index above the
   world and the menu, below the question box. */
#vienna-loading{position:fixed;inset:0;z-index:40;background:#07070d;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(18px,4vw,48px) clamp(22px,5vh,52px)}
#vienna-loading.hidden{display:none}
#vienna-loading #vl-img{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:center;animation:vl-drift 14s ease-in-out infinite alternate}
@keyframes vl-drift{from{transform:translate3d(-1.2%,0,0) scale(1)}to{transform:translate3d(1.2%,-1%,0) scale(1.04)}}
#vienna-loading .vl-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,5,12,.88) 0%,rgba(5,5,12,.35) 34%,rgba(5,5,12,0) 62%)}
#vienna-loading .vl-text{position:relative;display:flex;align-items:baseline;gap:12px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#vienna-loading .vl-text b{font-size:clamp(28px,5vw,54px);font-weight:900;letter-spacing:1px}
#vienna-loading .vl-text span{font-size:clamp(14px,2vw,20px);opacity:.8;letter-spacing:3px;text-transform:uppercase}
#vienna-loading .vl-bar{position:relative;height:3px;width:min(420px,60vw);margin-top:14px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden}
#vienna-loading .vl-bar i{position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,#f7d774,#fff);animation:vl-crawl 1.4s ease-in-out infinite}
@keyframes vl-crawl{to{left:100%}}
#vienna-loading .vl-hint{position:relative;margin-top:10px;font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.5px}
@media (prefers-reduced-motion:reduce){#vienna-loading #vl-img{animation:none}}

/* ---- the bag: a 4x4 grid of slots, and its tooltip (js/vienna.js renderInventory) ---- */
.vs-bag{border:1px solid #b39a68;border-radius:10px;padding:8px;background:rgba(255,255,255,.16)}
.vs-bag-h{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#6b5528;margin:0 2px 8px}
.vs-pager{display:flex;align-items:center;gap:6px;letter-spacing:0;text-transform:none}
.vs-pager button{font:700 12px inherit;font-family:inherit;padding:1px 7px;border-radius:6px;border:1px solid #9a7a35;background:#f4e9cf;color:#3b2a10;cursor:pointer}
.vs-pager button:disabled{opacity:.4;cursor:default}
.vs-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.vs-slot{position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:8px;padding:0;font:inherit;cursor:pointer;
  border:2px solid var(--rar,#b39a68);background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.2));box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.vs-slot.empty{cursor:default;border-color:#b39a68;opacity:.55;background:repeating-linear-gradient(45deg,rgba(0,0,0,.04) 0 6px,transparent 6px 12px),rgba(0,0,0,.1)}
.vs-slot:not(.empty):hover{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08));box-shadow:0 0 0 2px color-mix(in srgb,var(--rar) 55%,transparent),inset 0 2px 6px rgba(0,0,0,.2)}
.vs-slot-ico{font-size:26px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.vs-slot-ico img{display:block;width:40px;height:40px;object-fit:contain;margin:-7px}
#vs-tip .vt-art{width:20px;height:20px;object-fit:contain;vertical-align:-5px}
.vs-slot-n{position:absolute;right:3px;bottom:2px;font:700 11px "Avenir Next",system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.7);border-radius:6px;padding:0 4px;line-height:15px}
.vs-slot.r-common{--rar:#8a8071}.vs-slot.r-uncommon{--rar:#2f7d4f}.vs-slot.r-rare{--rar:#2b5fa8}
.vs-slot.r-legendary{--rar:#c99a1e;background:linear-gradient(180deg,rgba(255,215,94,.28),rgba(0,0,0,.2))}
#vs-tip{position:fixed;z-index:45;width:236px;padding:10px 12px;border-radius:10px;pointer-events:none;
  border:2px solid var(--rar,#b39a68);color:#f3e9cf;background:rgba(14,12,22,.97);box-shadow:0 10px 30px rgba(0,0,0,.6);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:12.5px;line-height:1.4}
#vs-tip.hidden{display:none}
#vs-tip b{display:block;font-size:14px;color:var(--rar,#ffd75e)}
#vs-tip .vt-rar{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:1px}
#vs-tip p{margin:6px 0;font-style:italic;color:rgba(255,255,255,.85)}
#vs-tip .vt-price{display:flex;align-items:center;gap:4px;font-weight:700;color:#ffd75e}
#vs-tip.r-common{--rar:#c9d1dc}#vs-tip.r-uncommon{--rar:#7dffb2}#vs-tip.r-rare{--rar:#34d3ff}#vs-tip.r-legendary{--rar:#ffd75e}
/* rarity chips on parchment: style.css colours a span.r-* for the dark UI, which is unreadable on cream */
.vs-chip.r-common,.vs-chip.r-uncommon,.vs-chip.r-rare,.vs-chip.r-legendary,.vs-chip.r-mythic{color:#5b4b33}
.vs-chip.r-rare{border-color:#3a7bd5}.vs-chip.r-legendary{border-color:#c98b3c;background:rgba(233,196,85,.25)}.vs-chip.r-mythic{border-color:#8e44ad;background:rgba(142,68,173,.1)}

/* ---- the ledger's tabs + the minimap (js/vienna.js renderSide, js/minimap.js) ----
   Lionel, 2026-08-30, off the Puzzle Pirates panel: the zone's minimap on
   top, then the panel divided into sections rather than one wall of buttons. */
.vs-mm-slot{flex:none}
.vs-mm{position:relative;background:#1a1712;border-bottom:2px solid #8a6a2c;line-height:0;overflow:hidden}
.vs-mm canvas{display:block;width:100%;cursor:crosshair}
.vs-mm-label{position:absolute;left:8px;bottom:6px;font:700 10.5px "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#ffd75e;text-shadow:0 1px 2px #000,0 0 4px #000;line-height:1;pointer-events:none}
/* the map folds to its own name bar, like every other block on the rail
   (js/fold.js, js/minimap.js) */
.vs-mm-fold{position:absolute;top:0;right:0;width:26px;height:24px;padding:0;border:0;cursor:pointer;line-height:24px;text-align:center;
  font:700 11px "Avenir Next","Segoe UI",system-ui,sans-serif;color:#ffd75e;background:linear-gradient(215deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.vs-mm-fold::before{content:"\25BE"}
.vs-mm-fold:hover{color:#fff}
.vs-mm.shut{line-height:normal;min-height:24px}
.vs-mm.shut .vs-mm-fold::before{content:"\25B8"}
.vs-mm.shut canvas{display:none}
.vs-mm.shut .vs-mm-label{position:static;display:block;padding:7px 28px 7px 8px;line-height:1.1;text-shadow:none}
/* the map's own icon: it stands for the map on the folded tab, where the
   plate's name would be a paragraph of horizontal space */
.vs-mm-ic{display:none;font-size:17px;line-height:1;padding:8px 30px 8px 10px}
#vienna-rail>.vs-mm.shut{border:2px solid #8a6a2c;border-right:0}
#vienna-rail>.vs-mm.shut .vs-mm-label{display:none}
#vienna-rail>.vs-mm.shut .vs-mm-ic{display:block}
#vienna-rail>.vs-mm.shut .vs-mm-fold{height:100%;width:22px;background:none;line-height:1;display:flex;align-items:center;justify-content:center}
/* tucked-away ledger: the map floats top right of the plate, beside the tab */
/* the rail down the right of the plate: the minimap (only while the ledger is
   tucked away) and the quest tracker under it. It is a column so the tracker
   never has to know how tall the minimap of this plate is. */
#vienna-rail{--rail-in:66px;position:absolute;right:0;padding-right:var(--rail-in);top:54px;width:calc(196px + var(--rail-in));
  box-sizing:border-box;z-index:24;display:flex;flex-direction:column;align-items:stretch;gap:8px;pointer-events:none}

#vienna-rail>*{pointer-events:auto}
#vienna-screen.vs-open #vienna-rail{--rail-in:calc(var(--vs-w) + 12px)}
/* the ledger's tab owns the top right corner while the ledger is tucked away,
   so the rail starts under it — the folded tabs continue the tab's own column
   down the edge rather than sliding beneath it */
#vienna-screen:not(.vs-open) #vienna-rail{top:112px}

/* ---- folded, a rail block is a TAB on the right edge, the ledger tab's own
   shape (Lionel, 2026-09-04: "they should minimize like the profile button,
   not in this way where it still takes up horizontal space"). It keeps its
   own skin — these are the world's chrome, not the parchment ledger — and
   gives the plate back every pixel but the handle. Only in the RAIL: the map
   and the tracker fold to a plain bar while the ledger holds them. */
#vienna-rail>.shut{align-self:flex-end;width:auto;min-width:60px;min-height:0;box-sizing:border-box;
  border-right:0;border-radius:12px 0 0 12px;box-shadow:-4px 2px 12px rgba(0,0,0,.45)}
/* it goes all the way to the screen edge only while the ledger is tucked away;
   with the ledger docked it tucks against the ledger's edge instead, or it
   would slide underneath a panel that outranks it */
#vienna-screen:not(.vs-open) #vienna-rail>.shut{margin-right:calc(-1 * var(--rail-in))}
#vienna-rail>.shut:hover{filter:brightness(1.15)}
/* one caret language down the whole rail, the ledger's own: |> tucks a block
   away to the edge, <| brings it back */
#vienna-rail>.vs-mm .vs-mm-fold::before{content:"\25B8"}
#vienna-rail>.vs-mm.shut .vs-mm-fold::before{content:"\25C2"}
.vs-mm.float{position:relative;right:auto;top:auto;width:100%;border:2px solid #8a6a2c;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
/* narrow: the plate has no room for both, so the tracker steps aside while
   somebody is speaking (the docked ledger holds it instead, see .vs-qt-slot) */
@media (max-width:840px){
  #vienna-screen:has(.tw-dialog:not(.hidden)) #vienna-rail{display:none}
}
@media (max-width:720px){
  #vienna-rail{--rail-in:56px;width:calc(162px + var(--rail-in))}
  .qt-a{display:none}          /* just "QUESTS" where the header has no room */
  #vienna-screen.vs-open #vienna-rail{display:none}   /* the ledger slides OVER the plate here */
}

/* ---- ACTIVE QUESTS: the tracker (js/vienna.js renderTracker, quests.js
   questTrackerHtml). A menu: the header opens and closes it, and the state
   sticks. Dressed like the dialogue box, because it is the same errand. */
#vienna-track{background:rgba(20,16,10,.92);border:1px solid rgba(255,215,94,.45);border-radius:11px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);overflow:hidden;color:#eee;
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif}
#vienna-track.hidden{display:none}
/* docked, it is the ledger's own second block, under the minimap: square
   shoulders, the map's gold rule under it, and no overlap with a speech */
.vs-qt-slot{flex:none}
.vs-qt-slot #vienna-track{border-radius:0;border-left:0;border-right:0;border-top:0;border-bottom:2px solid #8a6a2c;box-shadow:none;background:rgba(20,16,10,.96)}
.vs-qt-slot .qt-body{max-height:min(30vh,240px)}
.qt-head{display:flex;align-items:center;gap:5px;width:100%;padding:7px 8px;border:0;background:transparent;cursor:pointer;
  color:#ffd75e;font:900 10px inherit;font-family:inherit;letter-spacing:1px;text-transform:uppercase;text-align:left}
.qt-head:hover{background:rgba(255,215,94,.1)}
.qt-head b{flex:1;font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt-head .qt-n{font:900 9.5px inherit;padding:1px 5px;border-radius:999px;background:#ffd75e;color:#3a2a00;white-space:nowrap}
.qt-head .qt-car{opacity:.8}
#vienna-track.shut .qt-body{display:none}
/* on the rail it is a tab: the scroll, the count and the handle */
#vienna-rail>#vienna-track.shut .qt-head{padding:8px 8px 8px 10px;justify-content:space-between}
#vienna-rail>#vienna-track.shut .qt-head b{display:none}
.qt-car::before{content:"\25BE"}
#vienna-track.shut .qt-car::before{content:"\25B8"}
#vienna-rail>#vienna-track .qt-car::before{content:"\25B8"}
#vienna-rail>#vienna-track.shut .qt-car::before{content:"\25C2"}
.qt-body{padding:0 7px 7px;display:flex;flex-direction:column;gap:5px;max-height:min(46vh,340px);overflow:auto}
.qt-q{display:block;width:100%;text-align:left;cursor:pointer;padding:6px 8px;border-radius:8px;
  border:1px solid rgba(255,215,94,.22);background:rgba(255,255,255,.05);color:#efe6d4}
.qt-q:hover{border-color:rgba(255,215,94,.6);background:rgba(255,215,94,.12)}
.qt-q b{display:block;font:700 12.5px "EB Garamond","Iowan Old Style",Palatino,Georgia,serif;color:#ffe6a8;line-height:1.25}
.qt-q small{display:block;margin-top:2px;font:500 12px "EB Garamond","Iowan Old Style",Palatino,Georgia,serif;line-height:1.3;opacity:.85}
.qt-q i{display:block;margin-top:3px;font:700 9.5px inherit;font-family:inherit;font-style:normal;letter-spacing:.8px;text-transform:uppercase;opacity:.65}
.qt-q.ready{border-color:rgba(139,226,139,.5);background:rgba(139,226,139,.1)}
.qt-q.ready i{color:#8be28b;opacity:1}
.qt-none{margin:0;padding:2px 2px 4px;font:500 12px "EB Garamond","Iowan Old Style",Palatino,Georgia,serif;line-height:1.35;opacity:.7}
.qt-none b{color:#ffd75e}
.qt-all{width:100%;margin-top:2px;padding:5px;border-radius:7px;cursor:pointer;border:1px solid rgba(255,255,255,.16);
  background:transparent;color:#cfc4ad;font:700 10px inherit;font-family:inherit;letter-spacing:1px;text-transform:uppercase}
.qt-all:hover{border-color:rgba(255,215,94,.5);color:#ffd75e}
/* Five tabs must fit the ledger even with Android's fallback serif font.
   Use a valid inherited font declaration and let each column shrink. */
.vs-tabs{flex:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid #b39a68;background:rgba(0,0,0,.05)}
.vs-tab{min-width:0;min-height:44px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 2px 5px;border:0;border-right:1px solid rgba(179,154,104,.5);background:transparent;color:#6b5528;font:inherit;font-size:9.5px;font-weight:700;line-height:1.15;letter-spacing:.2px;text-transform:uppercase;cursor:pointer}
.vs-tab span{max-width:100%;overflow-wrap:anywhere}
/* In landscape, scroll past the map to the list instead of squeezing the
   body to a few pixels. The tabs stay available while reading the list. */
@media (max-height:600px){
  #vienna-side{overflow-y:auto}
  #vienna-side .vs-body{flex:none;overflow:visible}
  #vienna-side .vs-tabs{position:sticky;top:0;z-index:1;background:#e6d6b0}
}
.vs-tab:last-child{border-right:0}
.vs-tab i{font-style:normal;font-size:15px;line-height:1}
.vs-tab:hover{background:rgba(255,255,255,.25)}
.vs-tab.on{background:#2e5d57;color:#f3e9cf}
.vs-tab-n{position:absolute;right:6px;top:3px;min-width:15px;padding:0 4px;border-radius:8px;background:#a0413f;color:#fff;font:700 9.5px "Avenir Next",system-ui,sans-serif;line-height:15px;letter-spacing:0}
.vs-here{padding:4px 2px 0}
.vs-here b{display:block;font-size:19px;line-height:1.15;color:#2b2419}
.vs-here small{display:block;font-size:11.5px;font-style:italic;color:#5b4b33;margin-top:2px;line-height:1.35}
.vs-places{display:flex;flex-direction:column;gap:4px}
.vs-place{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font:600 12.5px inherit;font-family:inherit;color:#2b2419;padding:6px 8px;border-radius:8px;cursor:pointer;border:1px solid #c9b07a;background:rgba(255,250,235,.45)}
.vs-place i{font-style:normal;font-size:14px;width:18px;text-align:center;flex:none}
.vs-place span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-place:hover{background:#fff7e3;border-color:#2e5d57;color:#1f3f3b}
.vs-place::after{content:"walk ›";font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#8a6a2c;opacity:0;transition:opacity .15s}
.vs-place:hover::after{opacity:1}

/* ---- the People tab (js/social.js renderPeople) ---- */
.vs-status button{font-size:10.5px;padding:6px 3px;letter-spacing:.2px}
.vs-people{display:flex;flex-direction:column;gap:4px}
.vs-person{display:flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid #c9b07a;border-radius:8px;background:rgba(255,250,235,.45)}
.vs-person .vs-dot{width:8px;height:8px;border-radius:50%;flex:none;background:#9a8a6c;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.vs-person.on .vs-dot{background:#3d8a4f;box-shadow:0 0 0 2px rgba(61,138,79,.25)}
.vs-person.ask .vs-dot{background:#c98b3c}
.vs-person.off{opacity:.72}
.vs-pn{flex:1;min-width:0}
.vs-pn b{display:block;font-size:13px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-pn small{display:block;font-size:10.5px;font-style:italic;color:#5b4b33;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-pacts{display:flex;gap:3px;flex:none}
.vs-pacts button{font:700 12px inherit;font-family:inherit;line-height:1;width:26px;height:24px;padding:0;border-radius:6px;border:1px solid #9a7a35;background:#f4e9cf;color:#3b2a10;cursor:pointer}
.vs-pacts button:hover{background:#2e5d57;color:#f3e9cf;border-color:#2e5d57}
.vs-note button{font:inherit;font-weight:700;color:#7a4a12;background:transparent;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* ---- the chat (js/social.js) ----
   Laid OVER the plate, bottom left, never a section of its own (Lionel,
   2026-08-30): the lines carry their own shadow and a soft fade sits behind
   them; the input is one translucent pill. The prefix button is the picker
   (1 = the zone, 2 = the market, All = both and speaks here); the view class
   on #vienna-chat hides the channel you are not looking at. Whispers are
   purple, the world's own notes grey. */
#vienna-chat{position:absolute;left:0;bottom:0;width:min(600px,62%);z-index:22;display:flex;flex-direction:column;pointer-events:none;
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;color:#eee}
#vienna-chat.hidden{display:none}
/* The menu hosts this same panel outside Vienna, in one of two places
   (social.js menuChatHost). On the STAGE menu it rides the top of the
   setlist's own column (Lionel, 2026-09-13); on the classic menu there is no
   such column, so it keeps the foot of #menu, which needs a bottom row of its
   own or a full log would push the buttons out of the scrolling panel. */
#menu:has(> #vienna-chat){display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;overflow:hidden}
#menu:has(> #vienna-chat) > .menu-panel{min-height:0;max-height:100%;overflow-y:auto}
#menu > #vienna-chat{position:relative;justify-self:start;width:min(760px,100%);text-align:left;padding-bottom:env(safe-area-inset-bottom,0px)}
/* in the column: a card of its own, the log capped so the setlist under it
   stays on screen, and no fade to nothing at the top (there is no plate
   showing through here — the panel IS the ground) */
.menu-side > #vienna-chat{position:relative;width:100%;text-align:left}
.menu-side > #vienna-chat .vc-log{max-height:min(240px,30vh);padding:10px 12px 6px;border-radius:10px 10px 0 0;
  background:rgba(6,6,14,.55);-webkit-mask-image:none;mask-image:none}
.menu-side > #vienna-chat.vc-collapsed .vc-form{border-radius:10px}
/* a line carried across a reload is from before: quieter, and its <time>
   names the day on hover */
.vc-line.vc-old{opacity:.68}
.vc-log{flex:none;max-height:min(200px,32vh);overflow:auto;padding:26px 14px 6px 12px;font-size:13px;line-height:1.45;pointer-events:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;overflow-wrap:anywhere;
  text-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9);
  background:linear-gradient(to top,rgba(6,6,14,.62) 0%,rgba(6,6,14,.42) 60%,rgba(6,6,14,0) 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(to top,#000 0,#000 calc(100% - 26px),transparent 100%)}
.vc-collapsed .vc-log{display:none}
.vc-line{display:block;padding:1px 0}
/* one channel's view hides the other two; the log-on lines belong to General */
.vc-view-1 .vc-line:is(.vc-c2,.vc-c3),.vc-view-2 .vc-line:is(.vc-c1,.vc-c3,.vc-login),.vc-view-3 .vc-line:is(.vc-c1,.vc-c2,.vc-login){display:none}
.vc-line time{flex:none;white-space:nowrap;font-size:10px;color:rgba(255,255,255,.45);margin-right:6px;font-variant-numeric:tabular-nums}
.vc-line i{font-style:normal;font-size:10px;font-weight:700;margin-right:5px;padding:0 4px;border-radius:4px;background:rgba(255,215,94,.28);color:#ffd75e;vertical-align:1px;text-shadow:none}
.vc-line.vc-c2 i{background:rgba(95,211,197,.28);color:#5fd3c5}
.vc-line.vc-c3 i{background:rgba(255,159,122,.28);color:#ff9f7a}
.vc-line .vc-who{color:#ffd75e;cursor:pointer;margin-right:6px}
.vc-line .vc-who:hover{text-decoration:underline}
.vc-line.vc-c2 .vc-who{color:#5fd3c5}
.vc-line.vc-c3 .vc-who{color:#ff9f7a}
.vc-line.mine .vc-who{color:#7cc4ff}
.vc-line.vc-w{color:#e2c6ff}.vc-line.vc-w .vc-who{color:#c9a3ff;font-style:italic}
.vc-line.vc-sys{color:rgba(255,255,255,.75);font-style:italic}
.vc-line.vc-sys.ok{color:#8ee7a6}.vc-line.vc-sys.err{color:#ffb4bd}.vc-line.vc-sys.alert{color:#ffd75e;font-style:normal}
.vc-line.vc-sys code{font:700 11.5px ui-monospace,Menlo,monospace;color:#ffd75e;background:rgba(0,0,0,.45);padding:0 4px;border-radius:4px;font-style:normal;text-shadow:none}
.vc-line.vc-sys b[data-name]{cursor:pointer;color:#fff}
/* "X has logged on / off": quieter than a note, a friend's in green */
.vc-line.vc-sys.vc-login{color:rgba(255,255,255,.6);font-size:12px}
.vc-line.vc-sys.vc-login.off{color:rgba(255,255,255,.45)}
.vc-line.vc-sys.vc-login.friend{color:#8ee7a6;font-style:normal}
.vc-line.vc-sys.vc-login.friend.off{color:rgba(142,231,166,.7)}
/* 👋 on a log-on line and on a wave somebody sent me (js/social.js). Upright
   and green against the italic grey of the line, so it reads as the one thing
   to press; once pressed it is the same shape with no border. */
.vc-wave,.vc-waved{font:700 11px inherit;font-style:normal;margin-left:8px;padding:2px 9px;border-radius:999px;
  vertical-align:1px;text-shadow:none;white-space:nowrap;display:inline-block}
.vc-wave{cursor:pointer;border:1px solid #8ee7a6;background:rgba(142,231,166,.16);color:#bff5cd}
.vc-wave:hover{background:rgba(142,231,166,.32)}
.vc-waved{border:1px solid transparent;color:rgba(142,231,166,.7)}
/* the name sits in a sentence here, so the word spacing is the text's own */
.vc-line.vc-wavel{font-style:normal}.vc-line.vc-wavel .vc-who{margin-right:0}
/* an emote (/bow, /applause): the name finishes the sentence, so only the
   action leans over — the name stays the name, in its channel's colour */
.vc-line.vc-emote span{font-style:italic;color:rgba(255,255,255,.86)}
@media (pointer:coarse){.vc-wave{padding:5px 11px}}
/* THE WAY THERE, ON THE LINE (2026-09-13): a notice that says "your mail is
   over there" is a dead end — the chat is often the only thing on screen that
   has heard the news. Gold against the alert line's own ink, the 👋 button's
   shape, and big enough for a thumb. */
.vc-go{font:700 11px inherit;font-style:normal;margin-left:8px;padding:2px 9px;border-radius:999px;
  vertical-align:1px;text-shadow:none;white-space:nowrap;display:inline-block;
  cursor:pointer;border:1px solid #ffd75e;background:rgba(255,215,94,.18);color:#ffe9a8}
.vc-go:hover{background:rgba(255,215,94,.34)}
@media (pointer:coarse){.vc-go{padding:5px 11px}}
.vc-form{flex:none;position:relative;display:flex;align-items:center;gap:6px;height:44px;padding:0 10px 8px 10px;pointer-events:auto}
.vc-prefix{flex:none;font:700 11.5px inherit;min-width:26px;height:26px;padding:0 7px;border-radius:13px;border:0;display:grid;place-items:center;background:#ffd75e;color:#221;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.vc-prefix.vc-p2{background:#5fd3c5;color:#102422}
.vc-prefix.vc-p3{background:#ff9f7a;color:#2a1208}
.vc-prefix.vc-pall{background:linear-gradient(135deg,#ffd75e 34%,#5fd3c5 34% 66%,#ff9f7a 66%);color:#102422}
.vc-prefix:hover{filter:brightness(1.08)}
.vc-chmenu{position:absolute;left:10px;bottom:46px;z-index:2;display:flex;flex-direction:column;gap:2px;padding:5px;border-radius:10px;
  background:rgba(14,12,22,.97);border:1px solid rgba(255,215,94,.35);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.vc-chmenu.hidden{display:none}
.vc-chmenu button{display:flex;align-items:baseline;gap:7px;width:100%;text-align:left;font:600 12.5px inherit;padding:6px 10px;border-radius:7px;border:1px solid transparent;background:transparent;color:#eee;cursor:pointer;white-space:nowrap}
.vc-chmenu button b{min-width:22px;color:#ffd75e}
.vc-chmenu button:nth-child(2) b{color:#5fd3c5}
.vc-chmenu button:nth-child(3) b{color:#ff9f7a}
.vc-chmenu button small{color:rgba(255,255,255,.5);font-size:11px;margin-left:auto;padding-left:10px}
.vc-chmenu button:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.vc-chmenu button.on{background:rgba(255,215,94,.14);border-color:rgba(255,215,94,.5)}
.vc-form input{flex:1;min-width:0;font:500 13px inherit;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(9,9,20,.72);color:#fff;outline:none;box-shadow:0 2px 8px rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.vc-form input:focus{border-color:rgba(255,215,94,.7);background:rgba(9,9,20,.85)}
.vc-form input::placeholder{color:rgba(255,255,255,.5)}
/* the name suggester (social.js attachNameSuggest, 2026-09-12): "/w night"
   hangs the names that fit over the input, who is online first; the lit row
   is what Tab, → or Enter takes. Purple, the whisper's own colour. One
   element serves both chat inputs (the Gauntlet's .gx-form is
   position:relative for it). */
.vc-ac{position:absolute;left:10px;bottom:calc(100% + 2px);z-index:3;display:flex;flex-direction:column;gap:1px;min-width:220px;max-width:min(380px,calc(100% - 20px));padding:5px;border-radius:10px;
  background:rgba(14,12,22,.97);border:1px solid rgba(201,163,255,.45);box-shadow:0 10px 30px rgba(0,0,0,.6);font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;text-shadow:none}
.vc-ac[hidden]{display:none}
.vc-ac-i{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;font:600 12.5px inherit;padding:5px 9px;border-radius:7px;border:1px solid transparent;background:transparent;color:#eee;cursor:pointer;white-space:nowrap;overflow:hidden}
.vc-ac-i span{overflow:hidden;text-overflow:ellipsis}
.vc-ac-i b{color:#ffd75e}
.vc-ac-i small{margin-left:auto;padding-left:10px;font-size:11px;font-weight:500;color:rgba(255,255,255,.5);flex:none}
.vc-ac-i:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.vc-ac-i.on{background:rgba(201,163,255,.16);border-color:rgba(201,163,255,.55)}
.vc-ac-hint{padding:3px 9px 1px;font-size:10.5px;color:rgba(255,255,255,.4)}
/* "3 online" is the door to the list of who is on (social.js whoMenuHtml,
   2026-09-12, Lionel: "you should be able to click it and see whos on"). On a
   phone only the dot and the number fit; the word goes. */
.vc-online{flex:none;display:flex;align-items:center;gap:5px;font:600 11px inherit;padding:4px 9px;border-radius:999px;
  border:1px solid rgba(142,231,166,.32);background:rgba(9,9,20,.72);color:#8ee7a6;white-space:nowrap;cursor:pointer;text-shadow:0 1px 2px #000}
.vc-online:hover{background:rgba(142,231,166,.16);border-color:rgba(142,231,166,.6)}
.vc-online[aria-expanded="true"]{background:rgba(142,231,166,.2);border-color:rgba(142,231,166,.75)}
.vc-online.hidden{display:none}
.vc-online .vc-odot{width:6px;height:6px;border-radius:50%;background:#8ee7a6;box-shadow:0 0 6px rgba(142,231,166,.9);flex:none}
.vc-online b{font-weight:700}
/* The list is a BODY-level popover, laid against the button (social.js
   placeWhoMenu) — the profile card menu's own shape. It cannot live inside the
   bar: #menu is a stacking context at z 8 and the on-screen keyboard bar
   (#oskb, fixed, z 9) is its sibling, so no z-index inside the chat can clear
   it. Fixed, so it follows nothing and is placed on open, on resize and on a
   people change. */
.vc-whomenu{position:fixed;z-index:70;width:min(320px,calc(100vw - 24px));max-height:min(320px,52vh);overflow:auto;
  padding:8px;border-radius:12px;background:#12101b;border:1px solid rgba(142,231,166,.35);box-shadow:0 12px 34px rgba(0,0,0,.6);
  font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;text-shadow:none}
.vc-whomenu.hidden{display:none}
.vc-whomenu .vc-wm-h{display:flex;align-items:baseline;gap:6px;padding:2px 6px 7px;font:700 11px inherit;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.vc-whomenu .vc-wm-h span{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500;color:rgba(255,255,255,.38)}
.vc-whomenu .vc-wm-p{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:8px}
.vc-whomenu .vc-wm-p:hover{background:rgba(255,255,255,.06)}
.vc-whomenu .vc-wm-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#8ee7a6;box-shadow:0 0 6px rgba(142,231,166,.8)}
.vc-whomenu .vc-wm-p.friend .vc-wm-dot{background:#ffd75e;box-shadow:0 0 6px rgba(255,215,94,.8)}
.vc-whomenu .vc-wm-p.busy .vc-wm-dot{background:rgba(255,255,255,.35);box-shadow:none}
.vc-whomenu .vc-wm-n{min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:inherit}
/* a long name is what gives, never the level beside it */
.vc-whomenu .vc-wm-t{display:flex;align-items:baseline;gap:5px;max-width:100%;min-width:0}
.vc-whomenu .vc-wm-n b{min-width:0;font:700 12.5px inherit;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-whomenu .vc-wm-t i{flex:none;font-style:normal;font-weight:500;font-size:10.5px;color:rgba(255,255,255,.45)}
.vc-whomenu .vc-wm-n small{font-size:10.5px;color:rgba(255,255,255,.5);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-whomenu .vc-wm-n:hover b{text-decoration:underline}
.vc-whomenu .vc-wm-a{flex:none;display:flex;gap:2px;opacity:.75}
.vc-whomenu .vc-wm-p:hover .vc-wm-a{opacity:1}
.vc-whomenu .vc-wm-a button{width:24px;height:24px;padding:0;border-radius:7px;border:1px solid transparent;background:transparent;color:#eee;font-size:12px;line-height:1;cursor:pointer}
.vc-whomenu .vc-wm-a button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16)}
/* a 👋 already sent, on either list: still the same cell, so the row keeps its
   width and nothing under the finger moves — only the press is gone */
.vc-waved-b{cursor:default;opacity:.4}
.vc-waved-b:hover{background:transparent!important;border-color:transparent!important;color:inherit!important}
.vc-whomenu .vc-wm-note{padding:4px 7px 2px;font:500 11.5px inherit;color:rgba(255,255,255,.5);line-height:1.4}
.vc-whomenu .vc-wm-note button{font:inherit;color:#8ee7a6;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.vc-unread{flex:none;font:700 10.5px inherit;min-width:16px;padding:0 5px;border-radius:8px;background:#e5484d;color:#fff;line-height:16px;text-align:center}
.vc-unread.hidden{display:none}
.vc-toggle{flex:none;font:700 13px inherit;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(9,9,20,.72);color:#ddd;cursor:pointer}
.vc-toggle:hover{background:rgba(255,255,255,.14)}
@media (max-width:720px){
  #vienna-chat{width:calc(100% - 64px)}
  .vc-log{max-height:120px;font-size:12.5px}
  .vc-online{padding:4px 7px;gap:4px}
  .vc-online .vc-oword{display:none}
}

/* the quest log in the ledger (quests.js questLogHtml) */
.vq{margin:6px 0;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.vq .vq-t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.vq .vq-t i{font-style:normal;font-size:11px;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.12);white-space:nowrap}
.vq.offer .vq-t i{background:#ffd75e;color:#3a2a00}.vq.ready .vq-t i{background:#8be28b;color:#0d2d0d}.vq.open .vq-t i{background:#ffb35e;color:#3a1d00}
.vq.done{opacity:.55}.vq.locked{opacity:.45}
.vq small{display:block;margin-top:3px;opacity:.75}
.vq .vq-o{margin-top:4px;font-size:13px;line-height:1.35;color:#ffe6a8}
.vq .vs-grid{margin-top:6px}

/* ---- the recital programme (2026-08-30) ---- */
.vp-recitals { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.vp-slot { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: rgba(255, 255, 255, .05); border-radius: 8px; font-size: 13px; }
.vp-slot b { min-width: 108px; font-weight: 600; }
.vp-slot span { flex: 1; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-slot span i { opacity: .5; }
.vp-slot.live { background: rgba(255, 196, 84, .12); box-shadow: inset 0 0 0 1px rgba(255, 196, 84, .35); }
.vp-slot .small-btn { flex: none; }

/* naming a piano (2026-09-11, Lionel: not the browser's prompt): a sheet of
   the quest box's parchment over the world, the piano's own sprite beside the
   name. vienna.js namePiano builds it on first use. */
#vienna-piano-name{position:absolute;inset:44px 0 0 0;z-index:42;display:grid;place-items:center;background:rgba(5,5,12,.55)}
#vienna-piano-name.hidden{display:none}
.vpn-sheet{display:flex;gap:18px;align-items:center;width:min(540px,calc(100% - 60px));box-sizing:border-box;margin:0;
  background:#efdfbe;color:#332414;border:4px solid transparent;border-image:url(ui/quest-parchment-worn.webp) 46 fill stretch;
  border-image-width:34px;border-image-outset:14px;padding:20px 38px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));
  font-family:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.vpn-img{width:110px;height:110px;object-fit:contain;flex:none}
.vpn-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vpn-h{color:#6b2f1c;font-weight:800;font-size:13px;letter-spacing:1.7px;text-transform:uppercase}
.vpn-model{font-size:15.5px;font-style:italic;color:#5b4b33}
.vpn-input{margin-top:10px;width:100%;box-sizing:border-box;padding:6px 9px;outline:none;
  font-family:inherit;font-size:23px;font-weight:600;color:#2b2419;
  background:rgba(255,251,238,.55);border:0;border-bottom:2px solid #8a6a2c;border-radius:5px 5px 0 0}
.vpn-input:focus{background:rgba(255,251,238,.88);border-bottom-color:#6b2f1c}
.vpn-input::placeholder{color:#9a8660;font-style:italic;font-weight:500}
.vpn-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.vpn-actions button{font-family:inherit;font-weight:700;font-size:14px;padding:8px 14px;border-radius:7px;
  border:1.5px solid rgba(107,74,36,.85);background:rgba(255,251,238,.32);color:#4a3115;cursor:pointer}
.vpn-actions button:hover{background:#6b4a24;color:#f6ecd8}
.vpn-actions .vpn-ok{background:#6b4a24;color:#f6ecd8}
.vpn-actions .vpn-ok:hover{background:#4a3115}
.vpn-actions .hidden{display:none}
@media (max-width:560px){.vpn-sheet{flex-direction:column;text-align:center;padding:18px 26px;gap:8px}.vpn-img{width:84px;height:84px}.vpn-actions{justify-content:center}}