/* (c) 2026 Pretty Paperwork Network. All rights reserved. Not licensed for copying, redistribution or AI training. */
/* PPN Chat spike 4: merge. Every color is a PPN 95 theme token (plus the shop's --px-g caution color).
   Depth comes from CSS perspective: planes turn toward each other and float at different Z, wires join them.
   Borders: sheared slabs, beveled and notched corners (corner-shape, rounded fallback), interlocking chevrons,
   checker and caution-tape tessellations. Motion: transform and opacity only. */
:root{--sk:-9deg;--usk:9deg;--fs:15px;--spring:cubic-bezier(.25,1.55,.45,1);--line:3px solid var(--ink);--drop:5px 5px 0 var(--ink);
 --ground:color-mix(in srgb,var(--title-b) 62%,var(--paper));--tile:color-mix(in srgb,var(--paper) 46%,transparent);--caution:var(--px-g,#f5d90a);
 --tape:repeating-linear-gradient(-45deg,var(--caution) 0 10px,var(--ink) 10px 20px);
 --tape-p:repeating-linear-gradient(-45deg,var(--caution) 0 10px,var(--paper) 10px 20px);
 --checker:repeating-conic-gradient(var(--ink) 0 25%,var(--accent) 0 50%) 0 0/10px 10px;
 --checker-p:repeating-conic-gradient(var(--ink) 0 25%,var(--paper) 0 50%) 0 0/8px 8px;
 --teeth:linear-gradient(135deg,var(--ink) 25%,transparent 25%) -6px 0/12px 12px,linear-gradient(225deg,var(--ink) 25%,transparent 25%) -6px 0/12px 12px;
 --a-ros:8deg;--a-pv:-11deg;--a-wall:18deg;--a-field:-8deg;--a-hud:-10deg;--a-rail:36deg;--a-deck:22deg}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font:600 var(--fs)/1.3 'Josefin Sans',Tahoma,Verdana,sans-serif;color:var(--ink);background:var(--ground);overflow:hidden;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sp{flex:1}
.ico{width:20px;height:20px;flex:none}
.ico.chat .bub{fill:var(--paper);stroke:currentColor;stroke-width:2.2}.ico.chat .dots rect{fill:currentColor;transform-box:fill-box;transform-origin:center}
.vo{display:inline-grid;place-items:center;color:var(--ink)}
.vo.talk .dots rect{animation:mouth .36s ease-in-out infinite alternate}.vo.talk .dots rect:nth-child(2){animation-delay:.12s}.vo.talk .dots rect:nth-child(3){animation-delay:.24s}
@keyframes mouth{from{transform:scaleY(.45)}to{transform:scaleY(1.9) scaleX(.85)}}

/* ---------- the world: the shop's tiled ground, a tessellated floor in perspective, caution tape */
#world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;perspective:640px;perspective-origin:50% 18%}
#world .tiles{position:absolute;inset:-88px;background:var(--tile);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Crect x='8' y='8' width='72' height='72' rx='20'/%3E%3C/svg%3E") 0 0/88px 88px;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Crect x='8' y='8' width='72' height='72' rx='20'/%3E%3C/svg%3E") 0 0/88px 88px;animation:drift 18s linear infinite}
@keyframes drift{to{transform:translate(88px,-88px)}}
#world .floor{position:absolute;left:-60%;right:-60%;bottom:-2%;height:58%;transform-origin:50% 100%;transform:rotateX(76deg);
 background:repeating-conic-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 0 25%,transparent 0 50%) 0 0/96px 96px;
 -webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%)}
#world .band{position:absolute;left:-20%;width:140%;height:20px;background:var(--tape-p);border-block:3px solid var(--ink)}
#world .b1{bottom:12%;transform:rotate(-6deg)}#world .b2{top:30%;left:62%;width:70%;transform:rotate(-14deg);opacity:.75}
body[data-view=agent] #world .b2,body[data-view=chat] #world .b2{opacity:0}

/* ---------- layers */
#app{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:2}
#wires{position:fixed;left:0;top:0;z-index:3;pointer-events:none;overflow:visible;transition:opacity .25s}
#wires .w0{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
#wires .w1{fill:none;stroke:var(--paper);stroke-width:4;stroke-linecap:round}
#wires .w2{fill:none;stroke:var(--ink);stroke-width:4;stroke-dasharray:2 10;stroke-linecap:butt;opacity:.55}
#wires .lit .w1{stroke:var(--accent)}#wires .lit .w2{stroke:var(--paper);opacity:.8}
#wires .bus .w0{stroke-width:11}#wires .bus .w1{stroke:var(--caution);stroke-width:5}#wires .bus .w2{stroke:var(--ink);stroke-dasharray:6 6;opacity:1}
#wires .tick .w0{stroke-width:6}#wires .tick .w1{stroke-width:2}
#wires .plug{fill:var(--paper);stroke:var(--ink);stroke-width:3}#wires .lit .plug{fill:var(--accent)}
#wires .chv{fill:none;stroke:var(--accent-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:chv 1.4s linear infinite;animation-delay:calc(var(--j) * 90ms)}
#wires g:not(.lit) .chv{stroke:var(--ink)}
@keyframes chv{0%,100%{opacity:0}12%{opacity:1}40%{opacity:0}}
body:has(.mwrap) #wires{opacity:.2}
#fx{position:fixed;inset:0;z-index:58;pointer-events:none;overflow:hidden}
#wm{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;background:linear-gradient(125deg,var(--title-a),var(--accent));
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='200'%3E%3Cg font-family='Tahoma,Verdana,sans-serif' font-weight='bold' font-size='22' letter-spacing='7' transform='rotate(-12 260 100)'%3E%3Ctext x='30' y='70'%3ESIMULATED MODE%3C/text%3E%3Ctext x='290' y='170'%3ESIMULATED MODE%3C/text%3E%3Ctext x='-230' y='170'%3ESIMULATED MODE%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0/520px 200px repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='200'%3E%3Cg font-family='Tahoma,Verdana,sans-serif' font-weight='bold' font-size='22' letter-spacing='7' transform='rotate(-12 260 100)'%3E%3Ctext x='30' y='70'%3ESIMULATED MODE%3C/text%3E%3Ctext x='290' y='170'%3ESIMULATED MODE%3C/text%3E%3Ctext x='-230' y='170'%3ESIMULATED MODE%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0/520px 200px repeat}
#foot{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px 5px;text-align:center;font-size:12px;line-height:1.25;position:relative;z-index:61}
#foot>b{font-weight:700;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:3px 16px;box-shadow:3px 3px 0 var(--ink)}
#foot .fs,#foot .fx{display:none}
#foot button{flex:none;font-size:11px;font-weight:700;background:var(--ink);color:var(--paper);border-radius:999px;padding:3px 10px}
#toasts{position:fixed;right:16px;bottom:120px;z-index:70;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none}
.toast{background:var(--paper);color:var(--ink);border:var(--line);border-radius:12px;padding:7px 16px;box-shadow:var(--drop);font-size:13px;animation:tin .32s var(--spring) both;max-width:min(420px,90vw)}
.toast .st{font-style:normal;display:inline-block;margin-left:6px;padding:0 6px;background:var(--accent);color:var(--accent-ink);font-size:11px;border-radius:99px}
.toast.out{animation:tout .25s ease-in both}
@keyframes tin{from{transform:translateX(120%)}to{transform:none}}
@keyframes tout{to{transform:translateX(120%);opacity:0}}

/* ---------- borders: one family. Sheared slabs with beveled corners; notched cards; checker spines */
.btn,.mv,.back,.combo,.brand,.clock,.tab,.chip{border:var(--line);border-radius:12px}
@supports (corner-shape:bevel){
 .btn,.mv,.tab,.back,.combo,.clock{corner-shape:bevel}
 .ft{border-radius:30px 8px 30px 8px;corner-shape:bevel}
 .card{border-radius:8px 30px 8px 22px;corner-shape:bevel notch bevel round}
 .mod{border-radius:12px 40px 12px 40px;corner-shape:bevel}
 .bub{border-radius:22px 22px 22px 4px;corner-shape:round round round bevel}
 .deck{border-radius:26px 26px 10px 10px;corner-shape:bevel}
 .offer{border-radius:40px 10px;corner-shape:bevel}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:4px 18px 2px;background:var(--paper);color:var(--ink);font:italic 700 16px/1 'Josefin Sans',sans-serif;
 transform:skewX(var(--sk));box-shadow:3px 3px 0 var(--ink);text-decoration:none;white-space:nowrap;transition:transform .14s var(--spring)}
.btn>span{display:inline-flex;align-items:center;gap:7px;transform:skewX(var(--usk))}
.btn .ico{width:18px;height:18px}
.btn.lit{background:var(--accent);color:var(--accent-ink)}
.btn.big{font-size:19px;min-height:50px;padding:6px 28px 2px}
.btn.sm{font-size:12.5px;min-height:28px;padding:2px 10px 0}
@media (hover:hover){.btn:hover{transform:skewX(var(--sk)) translate(2px,-2px);box-shadow:5px 5px 0 var(--ink)}}
.btn:active{transform:skewX(var(--sk)) translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:center}
.k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sub)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;font-size:13.5px;margin-top:6px}
.kv dt{font-weight:700;color:var(--sub)}.kv dd{font-weight:600}
.note,.fine{display:block;font-size:12px;color:var(--sub);margin-top:6px;font-weight:600}
.stamp{display:inline-block;transform:rotate(-5deg);border:3px solid currentColor;border-radius:6px;padding:2px 9px 0;font:italic 700 14px/1.2 'Josefin Sans',sans-serif;letter-spacing:.02em}

/* ---------- top strip, brand, keys, credits combo */
.top,.hud{flex:none;display:flex;align-items:center;gap:12px;padding:9px 0 5px;min-width:0}
.brand{display:inline-flex;align-items:center;gap:8px;background:var(--title-a);color:var(--title-ink);padding:5px 16px 3px;border-radius:999px;box-shadow:var(--drop);font:italic 700 18px/1 'Josefin Sans',sans-serif;white-space:nowrap}
.brand>span{display:inline-flex;align-items:center;gap:8px}.brand svg{width:22px;height:22px}
.crumb{font:italic 700 clamp(18px,2.2vw,30px)/1 'Josefin Sans',sans-serif;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--paper);padding:6px 18px 2px;border:var(--line);transform:skewX(var(--sk));box-shadow:4px 4px 0 var(--ink)}
.keys{display:flex;gap:8px;font-size:12px;font-weight:700}.keys span{display:flex;gap:5px;align-items:center;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:2px 10px 1px 3px}
.keys kbd{font:700 10.5px/1 'Josefin Sans',sans-serif;background:var(--ink);color:var(--paper);border-radius:999px;padding:3px 7px 2px}
.combo{position:relative;flex:none;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;background:var(--ink);color:var(--paper);padding:4px 14px 5px;transform:skewX(var(--sk));box-shadow:4px 4px 0 var(--accent)}
.combo>*{transform:skewX(var(--usk))}
.combo .cv{grid-row:1/3;font:italic 700 26px/1 'Josefin Sans',sans-serif;min-width:1.2em;text-align:right}
.combo small{font-size:10px;line-height:1.05;opacity:.85;font-weight:600;text-align:left}
.combo .cm{grid-column:2;height:6px;width:64px;background:var(--paper);overflow:hidden;border-radius:3px}
.combo .cm i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--v,0));transition:transform .4s var(--spring)}

/* ---------- select: the roster plane turns toward the preview plane; a bus rail joins them */
.sel{flex:1;min-height:0;display:grid;grid-template:'top top' auto 'ros pv' minmax(0,1fr) 'more more' auto/minmax(0,1fr) minmax(330px,33%);gap:10px 56px;padding:0 22px 8px;perspective:1500px;perspective-origin:45% 40%}
.sel .top{grid-area:top}
.roster{grid-area:ros;min-height:0;display:grid;grid-template-columns:1.4fr 1.15fr 1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:12px 18px;padding:20px 22px 14px 58px;pointer-events:none;
 transform:rotateY(var(--a-ros));transform-origin:0 50%;transform-style:preserve-3d}
.ft{position:relative;min-width:0;min-height:0;transform:translateZ(var(--z,0px)) skewX(var(--sk));background:linear-gradient(160deg,var(--title-a),var(--title-b));color:var(--title-ink);
 border:var(--line);border-radius:14px;box-shadow:calc(5px + var(--z,0px) / 8) calc(5px + var(--z,0px) / 8) 0 var(--ink);text-align:left;transition:transform .34s var(--spring),box-shadow .34s var(--spring);--z:calc((6 - var(--i)) * 3px);pointer-events:auto}
.ft::before{content:'';position:absolute;left:10px;right:10px;bottom:6px;height:10px;background:var(--checker);opacity:.85;border-radius:2px}
.ft::after{content:'';position:absolute;inset:4px;border:4px solid var(--caution);border-radius:inherit;corner-shape:inherit;opacity:0}
.ft.on,.ft:focus-visible{--z:56px;z-index:2;transform:translateZ(var(--z)) translate(8px,-6px) skewX(var(--sk));outline:0}
.ft.on::after,.ft:focus-visible::after{opacity:1}
@media (hover:hover){.ft:hover:not(.on){transform:translateZ(calc(var(--z) + 14px)) skewX(var(--sk))}}
.ft-in{position:absolute;inset:0;transform:skewX(var(--usk));display:flex;flex-direction:column;justify-content:flex-end;gap:3px;padding:12px 22px 24px 26px}
.ft .em{position:absolute;right:5%;top:9%;height:52%;width:auto;max-width:58%;filter:drop-shadow(5px 5px 0 var(--ink))}
.ft-k{position:absolute;left:24px;top:11px;font:italic 700 13px/1 'Josefin Sans',sans-serif;opacity:.85}
.ft-t{display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.ft-n{font:italic 700 clamp(18px,2.1vw,36px)/.95 'Josefin Sans',sans-serif}
.ft-l{font-style:normal;font-weight:600;font-size:clamp(12px,1.05vw,16px);opacity:.92}
.ft-x{position:absolute;left:22px;top:32px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:700;padding:3px 10px 1px;border:2px solid var(--ink);border-radius:999px}
.ft-r{position:relative;display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.ft-r i{font-style:normal;font-size:11.5px;font-weight:700;padding:2px 8px 0;background:var(--ink);color:var(--paper);border-radius:999px;opacity:.85}
.ft-r i.d{background:var(--paper);color:var(--ink);opacity:1}.ft-r i.n{background:var(--caution);color:var(--ink);opacity:1}
.ft-b1,.ft-b2{grid-row:1/5}
.ft-pm{background:linear-gradient(160deg,var(--accent),var(--title-b) 140%);color:var(--accent-ink)}
.ft-sm .ft-in{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:6px 14px 14px 18px}
.ft-sm .em{position:static;height:64%;max-height:56px;flex:none;filter:drop-shadow(3px 3px 0 var(--ink))}
.ft-sm .ft-k{left:auto;right:14px;top:7px}
.ft-sm .ft-n{font-size:clamp(16px,1.6vw,24px)}
.ft-sm .ft-x{display:none}
.ft-sm::before{height:7px;bottom:4px;left:30%}
.roster>.ft:nth-child(4){margin-left:-12px}.roster>.ft:nth-child(5){margin-left:-24px}.roster>.ft:nth-child(6){margin-left:-36px}

/* the preview: hoverspace floating at depth over a tessellated pad */
.pv{grid-area:pv;position:relative;min-height:0;transform:rotateY(var(--a-pv));transform-origin:100% 50%;transform-style:preserve-3d;padding:14px 6px 6px 0}
.pv::before{content:'';position:absolute;inset:30px -6px 0 18px;border:3px solid var(--ink);border-radius:30px;background:color-mix(in srgb,var(--paper) 30%,transparent);transform:translateZ(-40px);
 box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--paper) 40%,transparent)}
.pv::after{content:'';position:absolute;left:40px;right:16px;top:22px;height:14px;background:var(--checker);border:2px solid var(--ink);transform:translateZ(-36px)}
.hs{position:relative;height:100%;display:grid;grid-template:'orb bub' auto 'hot hot' auto 'gh gh' auto 'lad lad' auto/auto minmax(0,1fr);gap:16px 16px;align-content:safe center;padding:26px 44px 18px 34px;transform-style:preserve-3d}
.pv-orb{grid-area:orb;transform:translateZ(90px)}
.pv-bub{grid-area:bub;align-self:center;transform:translateZ(64px) rotate(1deg)}
.pv-hot{grid-area:hot;transform:translateZ(48px) rotate(-1.4deg)}
.ghosts{grid-area:gh;display:flex;gap:14px;transform:translateZ(18px);min-width:0}
.ghosts>*{flex:1 1 0;min-width:0}
.pv-lad{grid-area:lad;transform:translateZ(6px)}

/* ---------- the orb: a score ring inside a tessellated cog */
.orb{position:relative;flex:none;width:clamp(116px,11vw,184px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--ink);
 background:var(--paper);border:var(--line);box-shadow:6px 7px 0 var(--ink)}
.orb::before{content:'';position:absolute;inset:-13px;border-radius:50%;background:repeating-conic-gradient(var(--ink) 0 7deg,transparent 0 15deg);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px))}
.orb .ring{position:absolute;inset:6px;border-radius:50%;background:conic-gradient(from -90deg,var(--accent) calc(var(--v,0) * 1%),color-mix(in srgb,var(--ink) 12%,transparent) 0);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px))}
.orb b{font:italic 700 clamp(32px,3.2vw,50px)/1 'Josefin Sans',sans-serif;position:relative}
.orb i{font-style:normal;font-weight:700;font-size:14px;margin-top:2px;position:relative}
.orb small{font-size:10.5px;color:var(--sub);max-width:72%;line-height:1.15;margin-top:2px;position:relative}
.orb.med .em{width:46%;height:auto;position:relative;filter:drop-shadow(3px 3px 0 var(--ink))}
button.orb{cursor:pointer}

/* ---------- Juniper's line: a bubble whose mouth is the PPN chat icon */
.bub{display:flex;gap:10px;align-items:flex-start;background:var(--paper);border:var(--line);border-radius:22px 22px 22px 4px;padding:10px 14px 10px 10px;box-shadow:4px 5px 0 var(--ink);min-width:0}
.bub:empty{display:none}
.bub>div{min-width:0}
.bub .vo .ico{width:34px;height:34px}
.bub b{display:block;font-size:12.5px;color:var(--sub)}.bub p{font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.ai,.role{font-style:normal;font-size:10px;padding:1px 6px 0;background:var(--ink);color:var(--paper);font-weight:700;border-radius:99px;margin-left:4px;vertical-align:1px}
.lt{display:inline-grid;font:700 9.5px/1.5 Tahoma,sans-serif;letter-spacing:.6px;background:var(--ink);color:var(--paper);padding:0 7px;border-radius:99px;margin-top:4px}
.lt i{grid-area:1/1;font-style:normal;white-space:nowrap}
.lt.sy i{opacity:0;animation:tagc 8s linear infinite;animation-delay:calc(var(--t) + var(--k) * 2s)}
@keyframes tagc{0%,24.9%{opacity:1}25%,100%{opacity:0}}

/* ---------- cards: notched paper with a checker spine; the hot one is the accent, taped */
.card{position:relative;flex:none;background:var(--paper);color:var(--ink);border:var(--line);border-radius:8px 26px 8px 22px;padding:14px 20px 16px 26px;box-shadow:5px 6px 0 var(--ink);display:grid;gap:2px;min-width:0}
.card::before{content:'';position:absolute;left:6px;top:12px;bottom:12px;width:8px;background:var(--checker-p);border-radius:2px;opacity:.7}
.card .big{font:italic 700 clamp(28px,2.6vw,40px)/1 'Josefin Sans',sans-serif;margin-top:2px;overflow-wrap:anywhere}
.card .big small{font-size:.5em}
.card h3{font:italic 700 18px/1.2 'Josefin Sans',sans-serif}
.card p{font-weight:400;font-size:14px;color:var(--sub)}
.card.hot{background:var(--accent);color:var(--accent-ink);box-shadow:8px 9px 0 var(--ink);padding-top:22px}
.card.hot::before{background:repeating-conic-gradient(var(--ink) 0 25%,var(--accent-ink) 0 50%) 0 0/8px 8px}
.card.hot::after{content:'';position:absolute;left:30px;right:56px;top:-9px;height:14px;background:var(--tape-p);border:2px solid var(--ink);transform:rotate(-1deg)}
.card.hot .k,.card.hot p,.card.hot .kv dt,.card.hot .note{color:color-mix(in srgb,var(--accent-ink) 82%,transparent)}
.card.hot .btn.lit{background:var(--paper);color:var(--ink)}
.card.hot .stamp{color:var(--accent-ink)}
.card.ghost{box-shadow:4px 4px 0 var(--ink);padding:10px 14px 12px 22px}
.card.ghost .big{font-size:26px}.card.ghost h3{font-size:14.5px}.card.ghost .btn{min-height:30px;font-size:13px;padding:3px 12px 0;pointer-events:none}
.card.scr{padding:6px;overflow:hidden;aspect-ratio:16/8;background:var(--ink)}.card.scr::before{display:none}
.card.scr img{width:100%;height:100%;object-fit:cover;border-radius:4px 20px 4px 16px;display:block}
.card.scr .pl{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:var(--accent);border:3px solid var(--ink)}
.card.scr .pl::after{content:'';position:absolute;left:15px;top:10px;border:10px solid transparent;border-left:14px solid var(--accent-ink);border-right:0}
.ghost2{max-width:100%}
.pg{height:16px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;overflow:hidden;margin:10px 0 2px}
.pg i{display:block;height:100%;background:var(--tape);transform-origin:left;transform:scaleX(0);transition:transform 2.2s linear}
.pg.go i{transform:scaleX(1)}

/* ---------- rounds: interlocking chevrons on a tilted rail (also the preview ladder) */
.chev{list-style:none;display:flex;min-width:0;filter:drop-shadow(3px 3px 0 var(--ink))}
.chev li{flex:1;min-width:0;position:relative;height:30px;margin-right:-10px;background:var(--ink);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)}
.chev li:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.chev li>span{position:absolute;inset:3px 4px 3px 3px;display:flex;align-items:center;gap:6px;padding:2px 14px 0 22px;background:var(--paper);color:var(--ink);font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;
 clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%)}
.chev li:first-child>span{padding-left:10px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.chev li em{font-style:italic;opacity:.6}
.chev li.done>span{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 99px color-mix(in srgb,var(--paper) 14%,transparent)}
.chev li.now>span{background:var(--accent);color:var(--accent-ink)}
.chev li.now{background:var(--caution)}
.pv-lad li{height:28px}

/* ---------- more rooms rail */
.more{grid-area:more;display:flex;align-items:center;gap:12px;min-width:0}
.more>b{flex:none;font:italic 700 15px/1 'Josefin Sans',sans-serif;background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 12px 3px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 6px 6px;min-width:0;scrollbar-width:thin}
.chip{flex:none;display:inline-flex;gap:6px;align-items:baseline;background:var(--paper);color:var(--ink);padding:4px 12px 2px;box-shadow:3px 3px 0 var(--ink);font-size:13px;border-width:2px;border-radius:999px}
.chip i{font-style:normal;font-size:11px;color:var(--sub)}
.chip.lk{background:var(--ink);color:var(--paper)}.chip.lk i{color:var(--paper);opacity:.8}

/* ---------- match: gantry HUD, rounds rail, log wall, hoverspace field, console deck */
.m{flex:1;min-height:0;display:grid;grid-template:'hud hud' auto 'rnd rnd' auto 'wall field' minmax(0,1fr) 'deck deck' auto/minmax(240px,25%) minmax(0,1fr);gap:10px 44px;padding:0 18px 8px;perspective:1600px;perspective-origin:50% 45%}
.hud{grid-area:hud;transform:rotateX(var(--a-hud));transform-origin:50% 100%}
.back{flex:none;background:var(--paper);color:var(--ink);padding:5px 14px 3px;box-shadow:3px 3px 0 var(--ink);font-weight:700;font-size:14px;transform:skewX(var(--sk))}
.back>span{display:inline-block;transform:skewX(var(--usk))}
.back:not(.logb)>span::before{content:'';display:inline-block;border:6px solid transparent;border-right:8px solid currentColor;border-left:0;margin-right:7px;vertical-align:1px}
.logb{display:none}
.hn{flex:none;display:flex;align-items:center;gap:8px;font:italic 700 clamp(17px,1.9vw,26px)/1 'Josefin Sans',sans-serif;max-width:28%;min-width:0}
.hn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hn .em{height:34px;width:auto;flex:none;filter:drop-shadow(2px 2px 0 var(--ink))}
.hb{flex:1;min-width:60px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:end}
.hb small{font-size:11px;font-weight:700}.hb em{font-style:italic;font-weight:700;font-size:13px;text-align:right;white-space:nowrap}
.hb.r small{order:2;text-align:right}.hb.r em{order:1;text-align:left}.hb.r .bar{order:3}
.bar{grid-column:1/3;position:relative;height:18px;transform:skewX(var(--sk));background:var(--paper);border:var(--line);border-radius:5px;overflow:hidden;margin-top:2px;box-shadow:4px 4px 0 var(--ink)}
.bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--v,0));transition:transform .45s var(--spring)}
.bar i.g{background:var(--sub);opacity:.3;transition:transform .9s .3s ease-out}
.bar i.f{background:linear-gradient(90deg,var(--title-a),var(--accent))}
.bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,var(--ink) 22px 24px);opacity:.35}
.hb.r .bar i{transform-origin:right}.hb.r .bar i.f{background:linear-gradient(270deg,var(--title-b),var(--title-a))}
.clock{flex:none;min-width:84px;text-align:center;transform:skewX(var(--sk));background:var(--paper);padding:4px 12px 3px;box-shadow:4px 4px 0 var(--ink)}
.clock>*{display:block;transform:skewX(var(--usk))}
.clock b{font:italic 700 28px/1 'Josefin Sans',sans-serif}.clock small{font-size:10.5px;font-weight:700;color:var(--sub);white-space:nowrap}
.rounds{grid-area:rnd;transform:rotateX(var(--a-rail));transform-origin:50% 0}
.wall{grid-area:wall;min-height:0;overflow-y:auto;overflow-x:hidden;transform:rotateY(var(--a-wall));transform-origin:0 50%;padding:4px 12px 10px 2px;scrollbar-width:thin}
.wall-k{display:inline-block;font:italic 700 13px/1 'Josefin Sans',sans-serif;background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 12px 3px;margin:0 0 8px}
.field{grid-area:field;min-height:0;position:relative;transform:rotateY(var(--a-field));transform-origin:100% 50%;transform-style:preserve-3d;display:grid;grid-template:'orb cards' minmax(0,1fr) 'shelf shelf' auto/minmax(170px,220px) minmax(0,1fr);gap:12px 40px;padding:16px 16px 12px 18px}
.field::before{content:'';position:absolute;inset:0;transform:translateZ(-30px);border-radius:30px;background:color-mix(in srgb,var(--paper) 24%,transparent);border:3px solid color-mix(in srgb,var(--ink) 50%,transparent);
 box-shadow:inset 0 0 0 7px color-mix(in srgb,var(--paper) 30%,transparent)}
.field::after{content:'';position:absolute;inset:-6px;pointer-events:none;transform:translateZ(-26px);
 background:linear-gradient(var(--ink),var(--ink)) 0 0/42px 7px,linear-gradient(var(--ink),var(--ink)) 0 0/7px 42px,linear-gradient(var(--ink),var(--ink)) 100% 0/42px 7px,linear-gradient(var(--ink),var(--ink)) 100% 0/7px 42px,
  linear-gradient(var(--ink),var(--ink)) 0 100%/42px 7px,linear-gradient(var(--ink),var(--ink)) 0 100%/7px 42px,linear-gradient(var(--ink),var(--ink)) 100% 100%/42px 7px,linear-gradient(var(--ink),var(--ink)) 100% 100%/7px 42px;background-repeat:no-repeat}
.orbcol{grid-area:orb;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:24px;min-height:0;padding:8px 0;transform:translateZ(54px)}
.orbcol .bub{align-self:stretch;max-height:100%;overflow:hidden}
.cards{grid-area:cards;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));grid-auto-flow:dense;align-content:safe center;gap:24px 22px;padding:18px 26px 22px 26px;perspective:1000px;scrollbar-width:thin;transform:translateZ(10px)}
.cards .card{transform:translateZ(8px) rotateX(3deg) rotate(var(--r,.5deg))}.cards .card:nth-child(2n){--r:-.6deg}
.cards .card.hot{grid-column:span 2;transform:translateZ(46px) rotateX(3deg) rotate(-1.1deg);z-index:1}
.cards .card.hot .big{font-size:clamp(34px,3.4vw,56px)}.cards .card.hot h3{font-size:21px}
.shelf{grid-area:shelf;transform:translateZ(34px);display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.sh-k{flex:none;font:italic 700 13px/1 'Josefin Sans',sans-serif;background:var(--tape-p);border:2px solid var(--ink);border-radius:6px;padding:0;color:var(--ink)}
.sh-k{background:var(--ink);color:var(--paper);padding:5px 12px 3px;transform:skewX(var(--sk))}
.sh-e{font-size:12.5px;font-weight:600;color:var(--ink);opacity:.8;white-space:nowrap}
.chip2{flex:none;display:flex;align-items:center;gap:8px;background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;padding:3px 3px 3px 10px;font-size:13px;font-weight:700;box-shadow:3px 3px 0 var(--ink)}
.chip2>.ico{width:16px;height:16px}
.chip2 button{display:flex;align-items:center;gap:5px;min-height:32px;padding:2px 12px 0;border-radius:999px;background:var(--caution);border:2px solid var(--ink);font-weight:700;font-size:12.5px;color:var(--ink)}
.chip2 button .ico{width:15px;height:15px}

/* the log: interlocking links, a zipper of finished steps */
.chain{list-style:none;display:flex;flex-direction:column;filter:drop-shadow(3px 3px 0 var(--ink))}
.chain>li{position:relative;background:var(--ink);margin-top:-9px;clip-path:polygon(0 0,50% 10px,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px));transform:skewY(-2deg)}
.chain>li:first-child{margin-top:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),50% 100%,0 calc(100% - 10px))}
.chain .lk{display:grid;gap:1px;margin:3px;padding:13px 14px 15px;background:var(--paper);color:var(--ink);transform:skewY(2deg);
 clip-path:polygon(0 0,50% 9px,100% 0,100% calc(100% - 9px),50% 100%,0 calc(100% - 9px))}
.chain>li:first-child .lk{padding-top:7px;clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),50% 100%,0 calc(100% - 9px))}
.chain .lk b{font:italic 700 14.5px/1.15 'Josefin Sans',sans-serif}
.chain .lk small{font-size:12.5px;font-weight:600;color:var(--sub);line-height:1.25}
.chain .lk .stamp{justify-self:start;font-size:11.5px;border-width:2px;padding:1px 7px 0;margin-top:3px}
.chain .lk-line .lk{background:color-mix(in srgb,var(--accent) 16%,var(--paper))}.chain .lk-line .lk b{font-size:12px;color:var(--sub)}.chain .lk-line .lk small{color:var(--ink);font-size:13px}
.chain .lk-me .lk{background:var(--accent);color:var(--accent-ink)}.chain .lk-me .lk small{color:var(--accent-ink)}
.chain .lk-clr .lk{background:var(--tape-p);padding-block:12px 14px}.chain .lk-clr .lk b{justify-self:center;background:var(--paper);border:2px solid var(--ink);border-radius:99px;padding:3px 12px 1px}

/* the console deck: moves and the composer on a tilted slab with a toothed lip */
.deck{grid-area:deck;position:relative;display:flex;gap:10px;align-items:center;min-width:0;background:var(--ink);border-radius:26px 26px 10px 10px;padding:12px 14px 10px;transform:rotateX(var(--a-deck));transform-origin:50% 100%;box-shadow:0 8px 0 color-mix(in srgb,var(--ink) 70%,var(--accent))}
.deck::before{content:'';position:absolute;left:30px;right:30px;top:-6px;height:6px;background:var(--teeth);opacity:.9}
.mvs{display:flex;gap:8px;flex:none}
.mv{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:7px;align-items:center;transform:skewX(var(--sk));background:var(--paper);color:var(--ink);padding:5px 12px 4px;box-shadow:0 4px 0 var(--accent);transition:transform .14s var(--spring);border-color:var(--paper)}
.mv>*{transform:skewX(var(--usk))}
.mv kbd{grid-row:1/3;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font:700 11px/1 'Josefin Sans',sans-serif;background:var(--ink);color:var(--paper);border-radius:99px}
.mv b{font:italic 700 17px/1 'Josefin Sans',sans-serif}.mv small{font-size:10.5px;opacity:.8}
@media (hover:hover){.mv:hover{transform:skewX(var(--sk)) translateY(-3px)}}
.mv.on{background:var(--accent);color:var(--accent-ink)}
.mv.fire{animation:fire .36s var(--spring)}
@keyframes fire{30%{transform:skewX(var(--sk)) translate(-3px,3px) scale(.92)}70%{transform:skewX(var(--sk)) translate(4px,-5px) scale(1.08)}}
.say{flex:1;display:flex;gap:8px;min-width:150px}
.say-in{flex:1;display:flex;background:var(--paper);border:3px solid var(--paper);border-radius:999px;min-width:0;box-shadow:inset 3px 3px 0 color-mix(in srgb,var(--ink) 20%,transparent)}
.say-in input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:9px 16px 7px;font-weight:600;outline:0}
.say-in:focus-within{border-color:var(--accent)}
.send{min-width:52px;border-color:var(--paper)}
.deck>.btn{border-color:var(--paper)}

/* ---------- rooms: bubbles float in the field, a lane of cards beside them */
.m-chat .field,.m-stage .field,.m-call .field{grid-template:'main lane' minmax(0,1fr)/minmax(0,1fr) minmax(250px,32%)}
.room{grid-area:main;min-height:0;display:flex;flex-direction:column}
.lane{grid-area:lane;min-height:0;display:flex;flex-direction:column;justify-content:safe center;gap:22px;padding:10px 8px 10px 0;perspective:900px}
.lane .card{transform:translateZ(16px) rotate(.6deg)}.lane .card.hot{transform:translateZ(40px) rotate(-1.1deg)}
.feed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:12px;padding:10px 10px 8px 4px;scrollbar-width:thin}
.ln{display:flex;gap:10px;align-items:flex-end;max-width:min(640px,88%)}
.ln.me,.ln.r{flex-direction:row-reverse;margin-left:auto}
.bw{min-width:0;display:flex;flex-direction:column;align-items:flex-start}.me .bw,.r .bw{align-items:flex-end}
.bb{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px 18px 18px 4px;padding:8px 14px 9px;box-shadow:3px 4px 0 var(--ink);min-width:0}
.r .bb{border-radius:18px 18px 4px 18px;box-shadow:inset -6px 0 0 var(--title-b),3px 4px 0 var(--ink)}
.me .bb{border-radius:18px 18px 4px 18px;background:var(--accent);color:var(--accent-ink)}
.rv .bb{box-shadow:inset 6px 0 0 var(--title-b),3px 4px 0 var(--ink)}.rv .bb p{font-style:italic}
.bb .nm{display:block;font-size:12px;color:var(--sub)}.me .bb .nm{color:var(--accent-ink)}
.bb p{font-weight:400;font-size:15px;overflow-wrap:anywhere}
.ln.sys{max-width:100%;margin:0 auto}.ln.sys .bb{font-size:13.5px;background:var(--tape-p);padding:6px 12px}.ln.sys .bb>*{background:var(--paper)}
.av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--paper);border:2.5px solid var(--ink);box-shadow:inset 0 0 0 3px var(--title-b)}
.rc{margin-top:6px;padding:8px 10px;border:2px dashed color-mix(in srgb,var(--ink) 45%,transparent);border-radius:10px;display:grid;gap:2px;font-size:13px}
.rc i{font-style:normal;color:var(--sub)}.rc small{color:var(--sub)}
.lkd{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--sub);font-size:13.5px}
.typing{min-height:22px;display:flex;gap:14px;font-size:13px;font-weight:700;padding-left:8px}
.ty{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:2px solid var(--ink);border-radius:99px;padding:1px 10px 0 2px}.ty .ico{width:20px;height:20px}
.wall .feed{overflow:visible;padding:0}.wall .ln{max-width:100%}.wall .bb p{font-size:13.5px}
#ppl .chain .lk{padding-block:10px 12px}

/* stage */
.screen{grid-area:main;align-self:center;background:var(--ink);border:var(--line);border-radius:30px 10px;padding:10px;box-shadow:8px 9px 0 var(--ink);aspect-ratio:16/9;max-height:100%;width:100%;max-width:calc((100vh - 230px) * 16 / 9);justify-self:center;transform:translateZ(0)}
.screen iframe,.cover{display:block;width:100%;height:100%;border:0;border-radius:22px 4px}
.cover{position:relative;overflow:hidden;background:#000;display:grid;place-items:center}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.cover .play{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:6px 26px 2px 10px;border-radius:99px;border:4px solid var(--ink);background:var(--accent);color:var(--accent-ink);font:italic 700 20px/1 'Josefin Sans',sans-serif;box-shadow:5px 5px 0 var(--ink)}
.cover .play i{width:44px;height:44px;border-radius:50%;background:var(--paper);border:3px solid var(--ink);display:grid;place-items:center}
.cover .play i::before{content:'';margin-left:5px;border-left:16px solid var(--ink);border-block:10px solid transparent}
.cover .ytl{position:absolute;right:14px;bottom:12px;padding:5px 12px 2px;border-radius:99px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font:700 13px 'Josefin Sans',sans-serif;text-decoration:none}
.air{position:absolute;left:14px;top:12px;z-index:2;background:var(--paper);color:var(--ink);font-size:12px;font-weight:700;padding:3px 10px 1px;border:2px solid var(--ink);border-radius:99px}

/* shop */
.m-shop .field{grid-template:'tabs' auto 'cards' minmax(0,1fr)/minmax(0,1fr)}
.tabs{grid-area:tabs;display:flex;gap:8px;flex-wrap:wrap}
.tab{background:var(--paper);color:var(--ink);padding:6px 16px 3px;font-weight:700;box-shadow:3px 3px 0 var(--ink);transform:skewX(var(--sk));border-width:2px}
.tab>span{display:inline-block;transform:skewX(var(--usk))}
.tab.on{background:var(--title-a);color:var(--title-ink)}
.cards.grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cards.grid .card.hot{grid-column:span 1}
.it h3{font-size:15px}.it .acts{margin-top:6px}

/* call */
.offer{grid-area:main;align-self:center;position:relative;background:linear-gradient(160deg,var(--accent),var(--title-b) 150%);color:var(--accent-ink);padding:22px 28px;border:var(--line);border-radius:40px 10px;box-shadow:9px 10px 0 var(--ink);display:flex;flex-direction:column;gap:6px;transform:rotate(-1.5deg)}
.offer .off{align-self:flex-start;background:var(--tape-p);border:2px solid var(--ink);border-radius:99px;padding:3px}.offer .off span{display:block;background:var(--paper);color:var(--ink);border-radius:99px;padding:3px 12px 0;font:italic 700 18px/1 'Josefin Sans',sans-serif}
.offer .pr{font:italic 700 clamp(56px,7vw,110px)/.9 'Josefin Sans',sans-serif;text-shadow:5px 5px 0 var(--ink)}
.offer s{opacity:.85;font-weight:700}.offer .then{font-size:14px;font-weight:600;max-width:30ch}
.voice{display:flex;align-items:center;gap:16px}.voice .em{height:84px;width:auto;flex:none}
.mouth .dots2 rect{transform-box:fill-box;transform-origin:center}
.talk .dots2 rect{animation:mouth .26s ease-in-out infinite alternate}.talk .dots2 rect:nth-child(2){animation-delay:.09s}.talk .dots2 rect:nth-child(3){animation-delay:.18s}
.mins{display:flex;gap:7px}

/* ---------- modalspace: notched sheets with a caution lip; they spring from what you touched */
#modals{position:relative;z-index:80}
.mwrap{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:12px}
.scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 40%,transparent);animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.mod{position:relative;width:min(560px,100%);max-height:calc(100vh - 24px);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:var(--line);border-radius:14px 40px 14px 40px;padding:30px 28px 20px;box-shadow:10px 11px 0 var(--ink)}
.tape-in{position:absolute;left:40px;right:80px;top:-11px;height:18px;background:var(--tape-p);border:2.5px solid var(--ink);transform-origin:left;transform:rotate(-1deg)}
.mbody{overflow-y:auto;min-height:0;padding:2px 4px 6px;margin:0 -4px}
.mod h2{font:italic 700 28px/1.05 'Josefin Sans',sans-serif;margin:4px 0 8px;padding-right:40px}.mod h3{font:italic 700 16px/1.1 'Josefin Sans',sans-serif;margin-top:10px}
.mod p{margin:6px 0;font-weight:400}
.mod .k{color:var(--accent)}
.mact{display:flex;gap:12px;flex-wrap:wrap;padding-top:14px;flex:none}
.mx{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink)}
.sim .stamp2{position:absolute;right:66px;top:18px;display:flex;flex-direction:column;align-items:center;transform:rotate(8deg);border:4px solid var(--ink);border-radius:10px;background:var(--tape-p);padding:3px;font:700 italic 14px/1.1 'Josefin Sans',sans-serif}
.sim .stamp2 span{background:var(--paper);padding:1px 5px 0}
.sim .lead{font-size:16px;font-weight:600;max-width:400px}
.ss{list-style:none;display:grid;gap:8px;margin:10px 0 0}
.ss li{border:2px solid var(--ink);border-radius:6px 18px 6px 14px;padding:8px 12px 6px;font-size:14px;font-weight:400}.ss li b{font-weight:700}
.rungs{display:grid;gap:10px;margin-top:10px}
.rung{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 9px;border:var(--line);border-radius:6px 20px;text-decoration:none;color:var(--ink);background:var(--paper);box-shadow:3px 4px 0 var(--ink)}
.rung i{font-style:normal;font-weight:700}
.credm .crb{font-size:54px}
.logm .chain{margin-top:8px}

/* ---------- FX: flourish layer (key events only) */
.fx-num{position:fixed;font:italic 700 34px/1 'Josefin Sans',sans-serif;color:var(--ink);background:var(--caution);border:3px solid var(--ink);border-radius:8px;padding:5px 10px 1px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap;transform:translate(-50%,-34px)}
.fx-sh{position:fixed;width:16px;height:16px;background:var(--accent);border:2px solid var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%)}
.fx-sh.k1{background:var(--ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.fx-sh.k2{background:var(--caution);clip-path:polygon(0 0,100% 0,0 100%)}
.fx-band{position:fixed;left:-10%;right:-10%;top:38%;display:flex;gap:18px;align-items:center;justify-content:center;padding:14px 0;border-block:5px solid var(--ink);transform:rotate(-4deg);animation:fxb 1.25s both}
.fx-band .tp{position:absolute;inset:0;background:var(--tape);z-index:-1}
.fx-band b,.fx-band span{background:var(--paper);color:var(--ink);border:4px solid var(--ink);padding:6px 22px 0;box-shadow:5px 5px 0 var(--ink);transform:skewX(var(--sk))}
.fx-band b{font:italic 700 clamp(28px,4.6vw,60px)/1.05 'Josefin Sans',sans-serif}
.fx-band span{font:italic 700 clamp(20px,3vw,40px)/1.05 'Josefin Sans',sans-serif;background:var(--accent);color:var(--accent-ink)}
.fx-band.clr{top:44%;padding:8px 0;animation-duration:1.05s}.fx-band.clr b{font-size:clamp(22px,3vw,40px)}
.fx-band.rank{top:34%;animation:fxr 1.7s both}.fx-band.rank span{font-size:clamp(34px,6vw,80px);transform:skewX(var(--sk)) rotate(-3deg)}
@keyframes fxb{0%{transform:rotate(-4deg) translateX(-110%)}20%{transform:rotate(-4deg) translateX(2%)}28%,74%{transform:rotate(-4deg) translateX(0);opacity:1}100%{transform:rotate(-4deg) translateX(110%);opacity:0}}
@keyframes fxr{0%{transform:rotate(-4deg) scale(2.2);opacity:0}14%{transform:rotate(-4deg) scale(.94);opacity:1}22%,80%{transform:rotate(-4deg) scale(1);opacity:1}100%{transform:rotate(-4deg) scale(1.1);opacity:0}}
.fx-stamp{position:fixed;display:grid;justify-items:center;gap:2px;padding:8px 18px 4px;border:5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 4px var(--accent),6px 6px 0 var(--ink);
 transform:translate(-50%,-50%) rotate(-9deg);animation:fxs 1.7s both;white-space:nowrap}
.fx-stamp b{font:italic 700 30px/1 'Josefin Sans',sans-serif;text-transform:uppercase;letter-spacing:.03em}.fx-stamp small{font-size:12px;font-weight:700}
@keyframes fxs{0%{transform:translate(-50%,-50%) rotate(-9deg) scale(2.6);opacity:0}12%{transform:translate(-50%,-50%) rotate(-9deg) scale(.92);opacity:1}20%,78%{transform:translate(-50%,-50%) rotate(-9deg) scale(1);opacity:1}100%{transform:translate(-50%,-50%) rotate(-9deg) scale(1);opacity:0}}
/* versus */
#vs{position:fixed;inset:0;z-index:55;pointer-events:none;display:none;overflow:hidden}
#vs.on{display:block}
#vs .vl,#vs .vr{position:absolute;top:0;bottom:0;width:60%;display:flex;align-items:center;padding:0 9%;font:italic 700 min(9vw,15vh)/1 'Josefin Sans',sans-serif;white-space:nowrap;border-inline:6px solid var(--ink)}
#vs .vl{left:-5%;background:var(--title-a);color:var(--title-ink);clip-path:polygon(0 0,100% 0,82% 100%,0 100%);animation:vsl .78s cubic-bezier(.2,1.25,.4,1) both}
#vs .vr{right:-5%;justify-content:flex-end;background:var(--accent);color:var(--accent-ink);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);animation:vsr .78s cubic-bezier(.2,1.25,.4,1) both}
#vs .vl::after,#vs .vr::after{content:'';position:absolute;top:0;bottom:0;width:18px;background:repeating-linear-gradient(180deg,var(--ink) 0 9px,transparent 9px 18px)}
#vs .vl::after{right:16%}#vs .vr::after{left:16%}
#vs .vr span{max-width:70%;white-space:normal;text-align:right;font-size:min(6.5vw,11vh)}
#vs .vt{position:absolute;left:-10%;right:-10%;top:50%;height:46px;margin-top:-23px;background:var(--tape-p);border-block:5px solid var(--ink);transform:rotate(-6deg);animation:vst .78s both}
#vs .vx{position:absolute;left:50%;top:50%;font:italic 700 min(14vw,26vh)/1 'Josefin Sans',sans-serif;color:var(--paper);-webkit-text-stroke:4px var(--ink);text-shadow:7px 7px 0 var(--ink);animation:vsx .78s both}
@keyframes vsl{0%{transform:translateX(-100%)}30%{transform:translateX(5%)}40%,68%{transform:translateX(0)}100%{transform:translateX(-112%)}}
@keyframes vsr{0%{transform:translateX(100%)}30%{transform:translateX(-5%)}40%,68%{transform:translateX(0)}100%{transform:translateX(112%)}}
@keyframes vst{0%,30%{transform:rotate(-6deg) scaleX(0);opacity:1}40%,70%{transform:rotate(-6deg) scaleX(1);opacity:1}100%{transform:rotate(-6deg) scaleX(1);opacity:0}}
@keyframes vsx{0%,26%{transform:translate(-50%,-50%) scale(2.6);opacity:0}38%{transform:translate(-50%,-50%) scale(.88);opacity:1}46%,70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}

/* ---------- reduced motion: no flight, no spin; flourishes hold still so their words still read */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .lt.sy i{opacity:0}.lt.sy i:nth-child(2){opacity:1}
 #world .tiles{animation:none}
 .fx-band,.fx-stamp{animation:none!important}
 #wires .chv{opacity:.6}
}

/* ---------- size: wide tablet */
@media (max-width:1300px){
 .sel{grid-template-columns:minmax(0,1fr) minmax(300px,36%);gap:10px 44px}
 .m{grid-template-columns:minmax(210px,24%) minmax(0,1fr);gap:10px 34px}
 .field{grid-template-columns:minmax(140px,170px) minmax(0,1fr);column-gap:30px}
 .cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
 .ghosts .card:nth-child(2){display:none}
 .keys{display:none}
 .mv{padding:5px 9px 4px}.mv b{font-size:15px}
}
/* ---------- size: phone and narrow */
@media (max-width:760px){
 :root{--fs:14px;--a-ros:0deg;--a-wall:0deg;--a-field:0deg;--a-hud:0deg;--a-rail:0deg;--a-deck:8deg}
 #foot .fl{display:none}#foot .fs{display:inline}#foot{font-size:11px}
 .sel{grid-template:'top' auto 'ros' 1fr 'more' auto/1fr;padding:0 12px 6px;perspective:900px}
 .pv{display:none}
 .crumb{font-size:17px;padding:5px 12px 1px}
 .roster{grid-template-columns:1fr;grid-template-rows:1.5fr 1.3fr repeat(4,1fr);padding:8px 16px 10px 10px;gap:10px;transform:rotateX(6deg);transform-origin:50% 0}
 .ft-b1,.ft-b2{grid-row:auto}
 .roster>.ft:nth-child(n){margin-left:0}.roster>.ft:nth-child(odd){margin-right:10px}.roster>.ft:nth-child(even){margin-left:10px}
 .ft.on{--z:30px}
 .ft-n,.ft-b1 .ft-n,.ft-b2 .ft-n{font-size:26px}.ft .em{height:58%;top:12%}.ft-sm .em{height:58%}
 .ft-x{left:auto;right:14px;top:10px}.ft-k,.ft-r{display:none}
 .m{grid-template:'hud' auto 'rnd' auto 'field' minmax(0,1fr) 'deck' auto/minmax(0,1fr);padding:0 10px 6px;gap:8px}
 .wall{display:none}.logb{display:inline-block}
 .hud{flex-wrap:wrap;gap:6px 8px;padding-top:7px}
 .hn{max-width:none;flex:1}.hn b{display:none}.hn .em{height:26px}
 .hb{order:5;flex:1 1 30%}.clock{order:6}.hud .combo{order:2}
 .hud .combo small,.hud .combo .cm{display:none}.hud .combo{grid-template-columns:auto}.hud .combo .cv{font-size:20px}
 .chev li>span{padding-left:16px;font-size:11px}.chev li em{display:none}.chev li:first-child>span{padding-left:8px}
 .field{grid-template:'orb' auto 'cards' minmax(0,1fr) 'shelf' auto/minmax(0,1fr);padding:10px 8px 6px;gap:8px}
 .field::after{display:none}
 .orbcol{flex-direction:row;align-items:center;gap:16px;padding:6px 4px 0 10px}
 .orb{width:84px}.orb::before{inset:-9px}.orb b{font-size:26px}.orb i{font-size:11px}.orb small{display:none}
 .orbcol .bub{flex:1}.bub p{font-size:13.5px}.bub .vo .ico{width:26px;height:26px}
 .cards{grid-template-columns:minmax(0,1fr);gap:16px;padding:12px 8px 12px 4px}
 .cards .card.hot{grid-column:auto}
 .card .big{font-size:28px}.card dl{grid-template-columns:auto 1fr}
 .deck{flex-wrap:wrap;padding:10px 10px 8px;border-radius:18px 18px 8px 8px}
 .mvs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:6px}
 .mv{grid-template-columns:auto 1fr}
 .say{min-width:100%}
 .m-chat .field,.m-stage .field,.m-call .field{grid-template:'main' minmax(0,1fr)/minmax(0,1fr)}
 .m-chat .lane{display:none}
 .m-stage .field{grid-template:'main' auto 'lane' minmax(0,1fr)/minmax(0,1fr)}.m-stage .lane{justify-content:flex-start;overflow-y:auto}
 .m-call .field{grid-template:'main' auto 'lane' minmax(0,1fr)/minmax(0,1fr);overflow-y:auto}.m-call .lane{justify-content:flex-start}
 .offer{padding:14px 18px}.offer .pr{font-size:56px}
 .screen{max-width:100%}
 .cards.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.it .big{font-size:22px}
 .mod{padding:26px 18px 16px}.mod h2{font-size:22px}
 .cover .play{font-size:16px;min-height:50px}.cover .play i{width:34px;height:34px}
}
@media (max-width:440px){.sel .crumb{display:none}.ft-n,.ft-b1 .ft-n,.ft-b2 .ft-n{font-size:24px}}
/* ---------- size: short frames (inside the monitor) */
@media (max-height:560px){
 :root{--fs:13.5px;--a-wall:0deg;--a-field:-3deg;--a-hud:0deg;--a-rail:0deg;--a-deck:10deg;--a-ros:5deg}
 #foot{padding:0 10px 3px;font-size:11px}#foot .fl{display:none}#foot .fs{display:inline}#foot>b{padding:1px 12px}#foot button{font-size:10px;padding:2px 8px}
 #world .band{height:12px}#world .floor{display:none}
 .top,.hud{padding:5px 0 3px;gap:8px}
 .brand{font-size:14px;padding:3px 12px 1px}.brand svg{width:16px;height:16px}
 .crumb{font-size:16px;padding:4px 12px 1px}.keys{display:none}
 .combo{padding:2px 10px 3px}.combo .cv{font-size:19px}.combo .cm{width:44px;height:4px}
 .sel{grid-template:'top' auto 'ros' 1fr 'more' auto/1fr;gap:4px;padding:0 12px 4px}
 .pv{display:none}
 .roster{grid-template-columns:1.55fr 1.3fr repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);padding:8px 18px 8px 8px;gap:12px}
 .ft-b1,.ft-b2{grid-row:auto}.roster>.ft:nth-child(n){margin:0}
 .ft.on{--z:30px}
 .ft-in{padding:8px 12px 16px 16px}.ft-sm .ft-in{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;padding:8px 8px 14px 12px}
 .ft-sm .em{position:absolute;right:6%;top:8%;height:40%;max-height:none}
 .ft-n,.ft-b1 .ft-n,.ft-b2 .ft-n{font-size:clamp(15px,2.3vw,24px)}.ft-sm .ft-n{font-size:clamp(13px,1.7vw,18px)}
 .ft-l{font-size:11.5px}.ft-k{top:6px;left:14px}.ft-x{top:22px;left:12px;font-size:11px}.ft-r{display:none}
 .ft::before{height:6px;bottom:4px}
 .more>b{font-size:12px}.chip{font-size:12px;padding:2px 10px 0}
 .m{grid-template:'hud' auto 'rnd' auto 'field' minmax(0,1fr) 'deck' auto/minmax(0,1fr);gap:5px;padding:0 12px 4px}
 .wall{display:none}.logb{display:inline-block}
 .back{padding:3px 10px 1px;font-size:12px}.hn{font-size:16px}.hn .em{height:22px}
 .bar{height:12px;box-shadow:3px 3px 0 var(--ink)}.hb small{font-size:10px}.hb em{font-size:11px}
 .clock{min-width:62px;padding:2px 8px 1px}.clock b{font-size:19px}.clock small{font-size:9.5px}
 .chev li{height:24px}.chev li>span{font-size:11px;inset:2px 3px 2px 2px}
 .field{grid-template:'orb cards' minmax(0,1fr) 'orb shelf' auto/minmax(0,190px) minmax(0,1fr);padding:8px 10px 6px;gap:6px 22px}
 .field::after{display:none}
 .orbcol{gap:10px;padding-top:6px}
 .orb{width:76px;box-shadow:4px 4px 0 var(--ink)}.orb::before{inset:-8px}.orb b{font-size:22px}.orb i{font-size:10px}.orb small{display:none}
 .bub{padding:6px 10px 6px 6px;gap:6px}.bub p{font-size:12.5px}.bub .vo .ico{width:22px;height:22px}.bub b{font-size:11px}
 .cards{display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;overflow-y:hidden;gap:14px;padding:12px 10px 10px 4px;scroll-snap-type:x mandatory}
 .cards .card{flex:0 0 min(300px,78%);scroll-snap-align:start;padding:10px 14px 12px 22px}
 .cards .card.hot{padding-top:16px}
 .card .big{font-size:24px}.card h3{font-size:15px}.card p{font-size:12.5px}.card .kv{font-size:12px;gap:1px 10px;margin-top:3px}
 .acts{margin-top:6px;gap:8px}.btn{min-height:34px;padding:3px 14px 1px;font-size:14px}.btn.big{font-size:16px;min-height:40px;padding:4px 20px 1px}
 .shelf{padding:0 2px 2px}.sh-e{display:none}.chip2{font-size:12px;padding:2px 2px 2px 8px}.chip2 button{min-height:26px}
 .deck{padding:7px 10px 6px;border-radius:16px 16px 8px 8px;gap:8px}
 .mv{padding:3px 10px 2px}.mv b{font-size:14px}.mv small{font-size:9.5px}.say-in input{padding:6px 12px 4px}
 .m-chat .field,.m-stage .field,.m-call .field{grid-template:'main lane' minmax(0,1fr)/minmax(0,1fr) minmax(200px,34%)}
 .lane{gap:12px;padding:4px 4px 4px 0}
 .screen{padding:6px;max-width:calc((100vh - 110px) * 16 / 9)}
 .offer{padding:10px 16px}.offer .pr{font-size:48px}.offer .then{font-size:12px}
 .mod{padding:22px 18px 12px;box-shadow:6px 6px 0 var(--ink)}.mod h2{font-size:19px;margin-bottom:4px}.mod p{font-size:13.5px}
 .mact{padding-top:8px;gap:8px}.mx{width:34px;height:34px;top:8px;right:8px}
 .ss{gap:5px}.ss li{padding:5px 10px 3px;font-size:12.5px}.sim .lead{font-size:13.5px}.sim .stamp2{font-size:11px;right:50px;top:12px}
 .fx-band{padding:8px 0}.fx-num{font-size:24px}
 .cover .play{min-height:40px;font-size:14px;padding:4px 16px 1px 6px;gap:8px}.cover .play i{width:28px;height:28px}.cover .play i::before{border-left-width:11px;border-block-width:7px}.cover .ytl{display:none}
}
/* the preview returns in wide short frames (1000x398): compact hoverspace at the right */
@media (max-height:560px) and (min-width:940px){
 .sel{grid-template:'top top' auto 'ros pv' minmax(0,1fr) 'more more' auto/minmax(0,1fr) minmax(250px,31%);gap:4px 36px}
 .pv{display:block;padding:4px 0 2px}
 .pv::before{inset:8px -4px 0 10px;border-radius:20px}.pv::after{display:none}
 .roster{grid-template-columns:1.3fr 1.2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px 12px}
 .ft-b1,.ft-b2{grid-row:1/3}
 .hs{grid-template:'orb hot' auto 'bub bub' auto/auto minmax(0,1fr);gap:10px 14px;padding:12px 14px 8px 20px}
 .pv-orb{width:74px}.pv-orb small,.pv .ghosts,.pv-lad{display:none}.pv-orb b{font-size:20px}.pv-orb i{font-size:10px}
 .pv-bub p{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pv-bub .lt{display:none}
 .pv-hot{padding:12px 12px 10px 20px}.pv-hot .big{font-size:20px}.pv-hot h3{font-size:13px}.pv-hot p{display:none}.pv-hot .btn.big{font-size:14px;min-height:34px;padding:3px 14px 0}.pv-hot::after{top:-7px;height:10px}
}
@media (max-height:560px) and (max-width:760px){.m-chat .field,.m-stage .field,.m-call .field{grid-template:'main' minmax(0,1fr)/minmax(0,1fr)}.lane{display:none}.mvs{display:flex;width:auto}.say{min-width:150px}.deck{flex-wrap:nowrap}
 .field{grid-template-columns:minmax(0,150px) minmax(0,1fr)}}
/* ---------- very short (monitor skins down to 200px) */
@media (max-height:330px){
 :root{--fs:12px;--a-field:0deg;--a-deck:0deg;--a-ros:0deg}
 #foot{font-size:10px;padding:0 8px 2px;gap:6px}#foot .fs{display:none}#foot .fx{display:inline}#foot>b{border-width:1.5px;box-shadow:none;padding:0 10px}#foot button{padding:0 8px}
 #world .band{display:none}
 .top,.hud{padding:3px 0 1px;gap:6px}
 .brand{font-size:12px;padding:2px 9px 0;box-shadow:2px 2px 0 var(--ink)}.brand svg{display:none}
 .crumb{font-size:13px;padding:2px 10px 0;box-shadow:2px 2px 0 var(--ink)}
 .combo{padding:1px 8px 1px;grid-template-columns:auto;box-shadow:2px 2px 0 var(--accent)}.combo small,.combo .cm{display:none}.combo .cv{font-size:15px;grid-row:auto}
 .roster{padding:4px 12px 4px 4px;gap:9px}
 .ft{border-width:2px;box-shadow:3px 3px 0 var(--ink)}.ft::before{display:none}.ft.on{--z:18px}
 .ft-in{padding:4px 8px 6px 12px}.ft-l,.ft-k{display:none}.ft .em{height:40%;top:14%}.ft-x{top:3px;left:8px;font-size:10px;padding:1px 6px 0}.ft-b1 .ft-x{display:none}
 .ft-n,.ft-sm .ft-n,.ft-b1 .ft-n,.ft-b2 .ft-n{font-size:13px;line-height:1}
 .more{gap:6px}.more>b{display:none}.chips{padding:2px 4px 3px;gap:6px}.chip{font-size:10.5px;padding:1px 8px 0}.chip i{display:none}
 .m{grid-template:'hud' auto 'field' minmax(0,1fr) 'deck' auto/minmax(0,1fr);gap:3px;padding:0 8px 3px}
 .rounds{display:none}
 .back{padding:1px 8px 0;font-size:11px;box-shadow:2px 2px 0 var(--ink)}.hn{font-size:13px;max-width:24%}.hn .em{display:none}
 .hud{flex-wrap:nowrap}.hud .hb{flex:1 1 0;order:0}.hud .clock{order:0}.hud .combo{order:0}
 .hb{grid-template-columns:1fr}.hb small{display:none}.hb em{font-size:10px;text-align:center}.hb.r em{text-align:center}
 .bar{height:9px;grid-column:1;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
 .clock{min-width:46px;padding:1px 6px 0;box-shadow:2px 2px 0 var(--ink)}.clock b{font-size:14px}.clock small{font-size:8.5px}
 .field{grid-template:'orb cards' minmax(0,1fr)/minmax(0,124px) minmax(0,1fr);padding:4px 6px 3px;gap:4px 14px}
 .field::before{border-radius:16px;border-width:2px}
 .shelf{grid-area:orb;align-self:end;flex-direction:column;align-items:stretch;gap:3px;overflow:visible;padding:0}.sh-k{display:none}
 .chip2{font-size:10px;padding:1px 1px 1px 6px;box-shadow:2px 2px 0 var(--ink)}.chip2>.ico{display:none}.chip2 button{min-height:20px;padding:0 6px;font-size:10px}.chip2 button .ico{display:none}
 .chip2:not(:last-child){display:none}
 .orbcol{flex-direction:row;align-items:flex-start;gap:6px;padding-top:4px}
 .orb{width:52px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}.orb::before{inset:-6px}.orb b{font-size:15px}.orb i{display:none}.orb .ring{inset:3px}
 .orbcol .bub{display:none}
 .cards{gap:10px;padding:8px 8px 4px 2px}
 .cards .card{flex:0 0 min(230px,82%);padding:5px 10px 7px 16px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}.cards .card.hot{padding-top:9px;box-shadow:4px 4px 0 var(--ink)}
 .card::before{width:5px;left:4px}.card.hot::after{height:8px;top:-5px;left:20px;right:30px}
 .card .k{font-size:9.5px}.card .big{font-size:16px}.card h3{font-size:12px}.card p,.card .kv,.card .note{display:none}
 .acts{margin-top:3px;gap:6px}.btn{min-height:24px;padding:2px 10px 0;font-size:12px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}.btn.big{font-size:13px;min-height:28px;padding:2px 12px 0}.btn .ico{display:none}
 .deck{padding:3px 6px 3px;border-radius:10px;gap:5px;box-shadow:none}.deck::before{display:none}
 .mvs{gap:5px}.mv{padding:1px 7px 0;grid-template-columns:auto;box-shadow:0 2px 0 var(--accent);border-width:2px}.mv kbd,.mv small{display:none}.mv b{font-size:12px}
 .say{min-width:110px;gap:5px}.say-in{border-width:2px}.say-in input{padding:2px 10px 1px}.send{min-width:38px;min-height:24px}
 .feed{gap:5px;padding:3px 6px 4px 2px}.bb{padding:3px 9px 4px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}.bb p{font-size:12px;line-height:1.25}.bb .nm{font-size:10px}.av{display:none}.lt{font-size:8.5px;margin-top:2px}
 .typing{display:none}
 .m-chat .field,.m-stage .field,.m-call .field{grid-template:'main' minmax(0,1fr)/minmax(0,1fr)}.lane{display:none}
 .m-call .field{grid-template:'main lane' minmax(0,1fr)/minmax(0,.9fr) minmax(0,1.1fr)}.m-call .lane{display:flex;justify-content:flex-start;overflow-y:auto}
 .offer{padding:6px 12px;transform:none;box-shadow:3px 3px 0 var(--ink);gap:2px;border-width:2px}.offer .pr{font-size:30px;text-shadow:2px 2px 0 var(--ink)}.offer .off span{font-size:12px}.offer .then,.offer .ln1{font-size:10.5px}
 .m-call .lane .card{transform:none}
 .tabs{gap:5px;flex-wrap:nowrap;overflow-x:auto}.tab{padding:1px 9px 0;font-size:11px}
 .cards.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));overflow-y:auto}.cards.grid .card{flex:none}
 .mwrap{padding:4px}.mod{padding:12px 12px 8px;border-width:2px;box-shadow:4px 4px 0 var(--ink)}.tape-in{height:10px;top:-6px}.mod h2{font-size:15px;margin:0 0 2px}
 .mod p,.ss li{font-size:11px}.ss li span{display:none}.sim .lead{display:none}.sim .stamp2{display:none}.mact .btn{min-height:28px}
 .fx-band{padding:4px 0;border-block-width:3px}.fx-band b{font-size:20px;padding:3px 12px 0;border-width:3px}.fx-band span{font-size:15px;padding:3px 12px 0;border-width:3px}.fx-band.rank span{font-size:24px}
 .fx-stamp{padding:4px 10px 2px;border-width:3px}.fx-stamp b{font-size:18px}.fx-stamp small{display:none}.fx-num{font-size:18px;padding:3px 6px 0}
 #vs .vt{height:24px;margin-top:-12px}
 .cover .play{min-height:30px;font-size:12px;padding:2px 10px 0 4px}.cover .play i{width:22px;height:22px}
 .screen{padding:4px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}.air{font-size:10px;top:6px;left:6px}
}
@media (max-height:230px){
 .ss{display:none}
 .hb{display:none}
 .roster{grid-template-columns:1.45fr 1.25fr repeat(4,minmax(0,1fr))}
 .cards .card{flex-basis:min(210px,80%)}.card .k{display:none}.card.hot::after{display:none}.cards .card.hot{padding-top:5px}
}

.dk-note{display:flex;align-items:center;gap:8px;color:var(--paper);font-size:13.5px;font-weight:600;padding-left:6px}.dk-note .ico{color:var(--caution)}
@media (max-height:560px){.cards .card,.cards .card.hot{transform:translateZ(0) rotate(var(--r,.4deg))}.cards .card.hot{--r:-.8deg}.cards{padding:14px 14px 10px 12px}}
@media (max-width:760px){.cards .card.hot{transform:translateZ(18px) rotate(-.8deg)}.cards{padding:14px 14px 14px 12px}.dk-note{display:none}}
@media (max-height:330px){.dk-note{display:none}}
@media (max-height:230px){.ss{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}.ss li{padding:1px 6px 0;font-size:10px;border-width:1.5px}.mod h2{font-size:13px}}
/* small frames: the field goes flat so floating parts never sit in front of a button */
@media (max-width:760px),(max-height:560px){.field{transform-style:flat}.orbcol,.shelf,.cards{transform:none}.field::before,.field::after{transform:none;z-index:-1}.shelf{position:relative;z-index:2}}
.cards,.wall,.feed{overflow-anchor:none}
@media (max-height:560px){.cards .card.hot .big{font-size:26px}.cards .card.hot h3{font-size:15px}}
@media (max-width:760px){.cards .card.hot .big{font-size:32px}.cards .card.hot h3{font-size:17px}}
@media (max-height:330px){.cards .card.hot .big{font-size:17px}.cards .card.hot h3,.cards .card h3{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* ================= roster windows (owner, round 2): live content cropped to a shard, street signage, no glyphs */
.ft{--shard:polygon(0 8%,56% 0,100% 10%,100% 84%,76% 100%,3% 92%)}
.ft-sm{--shard:polygon(6% 0,100% 0,100% 78%,88% 100%,0 100%,0 22%)}
.win{position:absolute;left:16px;right:16px;top:40px;height:54%;background:var(--ink);clip-path:var(--shard);pointer-events:none}
.wi{position:absolute;inset:3px;clip-path:var(--shard);background:color-mix(in srgb,var(--ink) 88%,var(--title-a));color:var(--paper);overflow:hidden;font-family:'Josefin Sans',sans-serif}
.ft-sm .win{left:auto;right:12px;top:10px;bottom:20px;height:auto;width:52%}
.ft-sm .ft-t{max-width:44%}
.ft-sm .ft-in{padding-right:14px}
.ft-x{z-index:2}.ft-k{z-index:2}
.ft-r{z-index:1}
/* split-flap cells */
.flaps{display:inline-flex;gap:2px}
.flaps i{display:inline-grid;place-items:center;min-width:.82em;padding:2px 1px 0;font:700 1em/1 'Josefin Sans',sans-serif;font-style:normal;color:var(--caution);background:color-mix(in srgb,var(--ink) 70%,#000);border-radius:2px;
 box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--paper) 18%,transparent),inset 0 50% 0 color-mix(in srgb,#000 20%,transparent);animation:flap 7s calc(var(--k) * 70ms) infinite both;transform-origin:50% 50%}
@keyframes flap{0%{transform:rotateX(90deg);opacity:.3}3%{transform:rotateX(-20deg);opacity:1}5%,100%{transform:none;opacity:1}}
/* proposal manager: a departure board */
.dep{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:16% 10% 10% 8%;font-size:clamp(11px,1.15vw,17px)}
.dh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cnt{display:inline-grid;justify-items:center;background:var(--accent);color:var(--accent-ink);border-radius:4px;padding:2px 7px 0;line-height:1}.cnt b{font-size:1.6em}.cnt small{font-size:.55em;font-weight:700}
.drows{display:grid;gap:3px;font-size:.78em}
.dr{display:grid;grid-template-columns:3.4em 1fr auto;gap:6px;align-items:center;border-top:1px dashed color-mix(in srgb,var(--paper) 30%,transparent);padding-top:2px}
.dr em{font-style:normal;color:var(--caution);opacity:.85}.dr b{font-weight:700;letter-spacing:.04em}
.dr i{font-style:normal;font-weight:700;padding:0 5px;border-radius:3px;background:var(--accent);color:var(--accent-ink);animation:tick 3.6s calc(var(--k) * .6s) steps(1) infinite}
.dr i.ok{background:var(--caution);color:var(--ink);animation:none}
@keyframes tick{0%{opacity:1}8%{opacity:.25}16%{opacity:1}}
/* housekeeper: messy names flip to clean ones beside the mess dial */
.tidy{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:14% 8% 10% 7%}
.dial{position:relative;width:clamp(56px,5.2vw,84px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;justify-items:center;background:conic-gradient(from -90deg,var(--caution) calc(var(--v) * 1%),color-mix(in srgb,var(--paper) 18%,transparent) 0);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));mask:none}
.dial::after{content:'';position:absolute;inset:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 88%,var(--title-a));z-index:0}
.dial b,.dial small{position:relative;z-index:1}.dial b{font:italic 700 clamp(18px,1.8vw,28px)/1 'Josefin Sans',sans-serif}.dial small{font-size:9px;font-weight:700;color:var(--caution)}
.frows{display:grid;gap:4px;min-width:0;font-size:clamp(10.5px,.95vw,14px)}
.fr{position:relative;display:grid;min-width:0;height:1.45em;perspective:300px}
.fr i{grid-area:1/1;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 6px 0;border-radius:3px;backface-visibility:hidden;animation:fa 8s calc(var(--k) * .55s) infinite both}
.fr .a{color:color-mix(in srgb,var(--paper) 70%,transparent);text-decoration:line-through;text-decoration-color:var(--accent)}
.fr .b{background:var(--paper);color:var(--ink);font-weight:700;animation-name:fb}
@keyframes fa{0%,30%{transform:none;opacity:1}38%,92%{transform:rotateX(90deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes fb{0%,32%{transform:rotateX(-90deg);opacity:0}40%,90%{transform:none;opacity:1}98%,100%{transform:rotateX(-90deg);opacity:0}}
/* stage: the playlist thumbnail, cropped, slowly panning, under a NOW PLAYING ticker */
.cover-win{position:absolute;inset:0;overflow:hidden}
.cover-win .pan{position:absolute;left:0;top:-10%;width:170%;height:120%;object-fit:cover;animation:pan 26s ease-in-out infinite alternate}
@keyframes pan{from{transform:translateX(0)}to{transform:translateX(-40%)}}
.led{position:absolute;left:0;right:0;bottom:8%;height:1.7em;background:#000;border-block:2px solid var(--caution);overflow:hidden;font:700 12px/1.7 'Josefin Sans',sans-serif;letter-spacing:.12em;color:var(--caution);text-shadow:0 0 6px var(--caution)}
.led::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,transparent 45%,#000 60%) 0 0/3px 3px;opacity:.55}
.tk{display:inline-block;white-space:nowrap;animation:tick-x 16s linear infinite}
@keyframes tick-x{to{transform:translateX(-33.33%)}}
/* cafe: the live room scrolling through the shard */
.cf{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.cf-in{display:flex;flex-direction:column;gap:6px;padding:6px 10px 6px 14px;animation:cfs 22s linear infinite}
@keyframes cfs{to{transform:translateY(-50%)}}
.cl{font-size:11.5px;line-height:1.25;font-weight:400;background:color-mix(in srgb,var(--paper) 94%,transparent);color:var(--ink);border-radius:8px 8px 8px 2px;padding:4px 7px 3px}
.cl b{font-weight:700;color:var(--accent)}.cl:nth-child(even){margin-left:14%;border-radius:8px 8px 2px 8px}
.cl .lt{display:table;font-size:8px;margin-top:2px;line-height:1.5}
.cf-live{position:absolute;right:14%;top:8%;display:flex;align-items:center;gap:5px;font:700 9.5px/1 'Josefin Sans',sans-serif;letter-spacing:.1em;background:var(--accent);color:var(--accent-ink);padding:3px 7px 2px;border-radius:99px}
.cf-live i{width:6px;height:6px;border-radius:50%;background:var(--accent-ink);animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
/* shop: a split-flap price board */
.brd{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10% 9% 12% 9%;font-size:clamp(9.5px,.82vw,13px)}
.bt{font-size:.85em;opacity:.9}.bt .flaps i{color:var(--paper)}
.sb{display:flex;justify-content:space-between;gap:6px;white-space:nowrap;overflow:hidden}
.sbp .flaps i{color:var(--paper);background:var(--accent)}
/* book a call: neon tube lettering that flickers on, glow held still */
.neon{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:2px;text-align:center;background:radial-gradient(120% 90% at 50% 40%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
.neon b{font:italic 700 clamp(22px,2.2vw,36px)/1 'Josefin Sans',sans-serif;color:var(--paper);-webkit-text-stroke:1px var(--accent);text-shadow:0 0 4px var(--accent),0 0 12px var(--accent),0 0 22px var(--accent);letter-spacing:.06em}
.neon .n1{border:2px solid var(--accent);border-radius:10px;padding:4px 12px 0;box-shadow:0 0 10px var(--accent),inset 0 0 8px var(--accent);animation:neon 6s steps(1) infinite}
.neon .n2{font-size:clamp(13px,1.2vw,20px);color:var(--caution);-webkit-text-stroke:0;text-shadow:0 0 4px var(--caution),0 0 12px var(--caution);animation:neon 6s .4s steps(1) infinite}
.neon .n3{font-size:9.5px;font-weight:700;letter-spacing:.1em;color:color-mix(in srgb,var(--paper) 75%,transparent)}
@keyframes neon{0%{opacity:.15}3%{opacity:1}5%{opacity:.3}7%{opacity:1}9%{opacity:.5}11%,100%{opacity:1}}
/* sizes */
@media (max-width:760px){
 .win{left:auto;right:14px;top:10px;bottom:20px;height:auto;width:50%}.ft-t{max-width:46%}
 .ft-b1 .ft-x,.ft-b2 .ft-x{right:auto;left:14px;top:10px}
 .dep{padding:12% 8% 8% 8%;font-size:11px}.drows .dr:nth-child(n+4){display:none}
 .tidy{padding:10% 6% 8% 8%}.dial{width:52px}.frows .fr:nth-child(n+4){display:none}
}
@media (max-height:560px){
 .win,.ft-sm .win{left:10px;right:10px;top:24px;bottom:auto;width:auto;height:46%}
 .ft-sm .ft-t,.ft-t{max-width:none}
 .dep{padding:12% 8% 6% 8%;font-size:10px;gap:3px}.drows .dr:nth-child(n+4){display:none}
 .tidy{grid-template-columns:auto 1fr;padding:12% 6% 6% 7%;gap:6px}.dial{width:44px}.dial::after{inset:5px}.dial b{font-size:15px}.dial small{display:none}.frows{font-size:9.5px}.frows .fr:nth-child(n+4){display:none}
 .neon b{font-size:18px}.neon .n2{font-size:10.5px}.neon .n3{display:none}
 .led{font-size:9.5px}.cl{font-size:9.5px}.cl .lt{display:none}.cf-live{font-size:8px}
 .brd{font-size:8.5px;padding:10% 6% 10% 8%;gap:3px}
}
@media (max-height:560px) and (min-width:940px){.ft-b1 .win,.ft-b2 .win{height:52%}}
@media (max-height:330px){
 .win,.ft-sm .win{top:16px;left:6px;right:6px;height:50%}
 .wi{inset:2px}
 .drows,.frows,.dial small,.cf-live,.bt,.n3{display:none}
 .dep{padding:14% 6% 4%;font-size:9px;justify-content:center}.dh .flaps{display:none}.cnt b{font-size:1.4em}
 .tidy{grid-template-columns:1fr;justify-items:center;padding:10% 4% 4%}.dial{width:36px}.dial::after{inset:4px}.dial b{font-size:12px}
 .brd{padding:12% 6% 6%}.sb:nth-child(n+3){display:none}.sbn{display:none}.sb{justify-content:center}
 .neon b{font-size:13px;padding:2px 6px 0}.neon .n2{font-size:8.5px}
 .led{font-size:8px;bottom:4%}.cl{font-size:8.5px;padding:2px 5px}
}
@media (prefers-reduced-motion:reduce){.fr .b{opacity:1}.fr .a{display:none}.pan{transform:translateX(-20%)}}
/* round 2 fixes: titles clear of the neighbour, fuller boards */
.ft-sm .ft-in{padding-left:30px}
.ft-b1 .win,.ft-b2 .win{height:46%}
.dep,.tidy{justify-content:center;align-content:center}
.dep{padding:12% 10% 12% 9%}
.sb{justify-content:flex-start;gap:8px;align-items:center}
.sbn{font-weight:700;letter-spacing:.06em;font-size:.95em;color:var(--paper);overflow:hidden;text-overflow:ellipsis;min-width:0;white-space:nowrap}
.sbp{flex:none}
@media (max-width:760px){.ft-x{display:none}.sb:nth-child(n+3){display:none}.brd{padding:8% 6% 8% 9%}.ft-sm .ft-in{padding-left:18px}}
@media (max-height:560px){.ft-sm .ft-in{padding-left:12px}.sb:nth-child(n+3){display:none}}
@media (max-width:760px){.brd .bt{display:none}.brd{font-size:12px;gap:6px}}

/* ================= round 5 (owner): a bright cafe and froyo bar. Pastel tints mixed toward paper, a rounded display face,
   menu-board hierarchy, cup and swirl, punch card, and cafe edge art (scallops, soft-serve waves, ticket perforations). */
:root{--disp:'Fredoka','Josefin Sans',Tahoma,sans-serif;
 --pa:color-mix(in srgb,var(--paper) 74%,var(--title-b));--pb:color-mix(in srgb,var(--paper) 72%,var(--accent));--pc:color-mix(in srgb,var(--paper) 70%,var(--caution));--pd:color-mix(in srgb,var(--paper) 62%,var(--title-a));
 --ground:color-mix(in srgb,var(--paper) 58%,var(--title-b));--tile:color-mix(in srgb,var(--paper) 60%,transparent);
 --awning:repeating-linear-gradient(90deg,var(--accent) 0 18px,var(--paper) 18px 36px);
 --awning-soft:repeating-linear-gradient(90deg,var(--pb) 0 18px,var(--paper) 18px 36px);
 --perf:radial-gradient(circle,color-mix(in srgb,var(--ink) 45%,transparent) 2px,transparent 2.6px);
 --tape:var(--awning);--tape-p:var(--awning-soft);--checker:var(--perf) 0 0/10px 8px;--checker-p:var(--perf) 0 0/8px 9px}
/* scalloped edge: a solid strip whose lower edge is a row of half circles, drawn with a mask */
.scal,.card.hot::after,.tape-in,#world .band,.fx-band .tp,#vs .vt,.chain .lk-clr .lk{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x;
 mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x}
#world .band{height:30px;border:0;background:var(--awning-soft);opacity:.85}
#world .floor{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--title-b) 16%,transparent) 0 48px,transparent 48px 96px)}
.card.hot::after{height:22px;top:-12px;border:0;background:var(--awning);transform:none;left:24px;right:48px}
.card.hot::after{background:repeating-linear-gradient(90deg,var(--paper) 0 16px,var(--pc) 16px 32px)}
.tape-in{height:26px;top:-14px;border:0;background:var(--awning);transform:none;left:34px;right:70px}
/* display type: rounded, friendly; Josefin stays for body */
.crumb,.ft-v b,.card .big,.card h3,.orb b,.mod h2,.fx-band b,.fx-band span,#vs .vl,#vs .vr,#vs .vx,.brand,.clock b,.chain .lk b,.hn,.offer .pr,.combo .cv,.fx-stamp b,.fx-num,.cover .play,.btn,.mv b,.wall-k,.more>b,.sh-k{font-family:var(--disp);font-style:normal}
.btn{font-weight:600;letter-spacing:.01em}
.card h3{font-weight:600}.card .big,.orb b,.crumb .cw,.ft-v b{font-weight:700}
/* cycling headline on a menu-board chip, with a froyo cup */
.crumb{display:inline-flex;align-items:center;gap:10px;transform:none;border-radius:999px;background:var(--paper);padding:4px 22px 4px 8px;font-size:clamp(20px,2.4vw,34px);overflow:hidden;min-width:min(330px,40vw)}
.crumb .swirl{width:1.25em;height:1.5em;flex:none}
.crumb .cw{display:inline-block;white-space:nowrap}
/* punch-card credits */
.combo{background:var(--paper);color:var(--ink);transform:none;border-radius:12px;box-shadow:4px 4px 0 var(--ink);padding:5px 14px 6px;-webkit-mask:radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) right/51% 100% no-repeat;mask:radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) right/51% 100% no-repeat}
.combo>*{transform:none}
.combo .cm{display:flex;gap:3px;width:auto;height:auto;background:none;overflow:visible}
.combo .cm i{width:9px;height:9px;border-radius:50%;border:1.5px dashed var(--ink);background:none;transform:none}
.combo .cm i.p{background:var(--accent);border:1.5px solid var(--ink)}
/* roster: pastel menu panels, a vertical knockout word on an ink slab along the long edge, the live window beside it */
.ft{background:linear-gradient(165deg,var(--pa),var(--pd));color:var(--ink)}
.ft-pm{background:linear-gradient(165deg,var(--pb),color-mix(in srgb,var(--paper) 55%,var(--accent)));color:var(--ink)}
.ft::after{border-color:var(--accent)}
.ft::before{left:96px;right:14px;height:8px;background:var(--perf) 0 0/10px 8px;opacity:1}
.ft-sm::before{left:64px}
.ft .em{display:none}
.ft-v{position:absolute;left:12px;top:12px;bottom:14px;width:auto;display:flex;align-items:center;justify-content:center;background:var(--ink);border-radius:14px;padding:12px 6px;z-index:3;box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 40%,transparent)}
.ft-v b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(34px,5.8vh,68px);line-height:.9;letter-spacing:.01em;white-space:nowrap;
 background:linear-gradient(0deg,var(--pc),var(--paper) 45%,var(--pb));-webkit-background-clip:text;background-clip:text;color:transparent}
.ft-sm .ft-v{left:10px;top:10px;bottom:10px;padding:8px 4px;border-radius:10px}
.ft-sm .ft-v b{font-size:clamp(22px,3.3vh,34px)}
.ft-in,.ft-sm .ft-in{flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:10px 14px 22px 96px}
.ft-sm .ft-in{padding:8px 10px 18px 62px}
.ft-t,.ft-sm .ft-t{max-width:none;position:relative;z-index:2;display:flex;flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
.ft-n{font:600 clamp(15px,1.3vw,20px)/1 var(--disp);font-style:normal}.ft-sm .ft-n{font-size:15px}
.ft-l{font:600 13px/1 var(--disp);font-style:normal;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:3px 10px 2px;opacity:1}
.ft-k{left:auto;right:14px;top:9px;z-index:3;font:600 12px/1 var(--disp);font-style:normal;background:var(--paper);border-radius:99px;padding:3px 7px 1px;border:1.5px solid var(--ink)}
.ft-x{left:auto;right:56px;top:6px;border-radius:999px;font-family:var(--disp)}
/* the windows: bigger, and the cafe and stage windows break out past the panel edge */
.win,.ft-sm .win{left:88px;right:-10px;top:30px;bottom:52px;height:auto;width:auto}
.ft-sm .win{left:58px;right:-16px;top:-12px;bottom:34px}
.win-cafe,.win-stage{z-index:2}
.ft-sm .win-cafe,.ft-sm .win-stage{right:-28px;top:-20px;bottom:30px}
.ft-sm .ft-t{z-index:4}
.win{filter:none}.wi{background:color-mix(in srgb,var(--ink) 90%,var(--title-a))}
.win::after{content:'';position:absolute;left:12%;right:12%;top:0;height:16px;background:var(--awning);-webkit-mask:linear-gradient(#000 0 0) top/100% 8px no-repeat,radial-gradient(circle at 6px 0,#000 5.5px,transparent 6px) bottom/12px 7px repeat-x;mask:linear-gradient(#000 0 0) top/100% 8px no-repeat,radial-gradient(circle at 6px 0,#000 5.5px,transparent 6px) bottom/12px 7px repeat-x;clip-path:none}
.cf-in{padding:8px 13% 8px 13%}.cl{font-size:12.5px}
.cf-live{top:14%}
.brd{padding:14% 10% 12% 12%}
/* cards: tickets with scooped corners and a perforated stub */
@supports (corner-shape:scoop){.card{border-radius:16px;corner-shape:scoop}.mod{border-radius:22px;corner-shape:scoop}}
.card::before{left:7px;top:14px;bottom:14px;width:6px;background:var(--perf) 0 0/6px 9px repeat-y;opacity:1}
.card.hot::before{background:radial-gradient(circle,var(--accent-ink) 2px,transparent 2.6px) 0 0/6px 9px repeat-y}
.card{background:var(--paper)}
.card.ghost{background:var(--pa)}
/* orb: a cupcake-liner rim instead of gear teeth */
.orb::before{background:repeating-conic-gradient(var(--pb) 0 7.5deg,var(--paper) 0 15deg);inset:-14px;border:0}
.orb{box-shadow:0 0 0 3px var(--ink) inset,6px 7px 0 var(--ink)}
/* rounds, chain and shelf in the cafe voice */
.chev li.now{background:var(--ink)}.chev li.now>span{background:var(--accent)}
.chev li>span{background:var(--pa)}
.chain .lk-line .lk{background:var(--pb)}
.chain .lk-clr .lk{background:var(--awning-soft);padding-bottom:20px}
.sh-k{background:var(--accent);color:var(--accent-ink);transform:none;border-radius:999px}
.chip2 button{background:var(--pc)}
/* the counter: the deck keeps its tilt, with a soft-serve wave along its lip */
.deck::before{left:16px;right:16px;top:-11px;height:12px;opacity:1;background:radial-gradient(circle at 12px 12px,var(--pb) 11px,transparent 11.5px) 0 0/24px 12px repeat-x}
.mv{border-radius:14px;box-shadow:0 4px 0 var(--pb)}
/* the field plate: a pastel tray */
.field::before{background:color-mix(in srgb,var(--paper) 40%,transparent);border-color:color-mix(in srgb,var(--ink) 35%,transparent)}
.pv::before{background:color-mix(in srgb,var(--paper) 45%,transparent)}
.pv::after{height:20px;border:0;background:var(--awning);-webkit-mask:linear-gradient(#000 0 0) top/100% 11px no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x;mask:linear-gradient(#000 0 0) top/100% 11px no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x}
/* flourish bands and versus in awning stripes with scalloped edges */
.fx-band{border:0}.fx-band .tp{background:var(--awning-soft)}
.fx-band b,.fx-band span{transform:none;border-radius:16px}
#vs .vt{border:0;background:var(--awning-soft);height:56px;margin-top:-28px}
#vs .vl::after,#vs .vr::after{background:radial-gradient(circle,var(--paper) 5px,transparent 5.5px) 0 0/18px 18px repeat-y}
#vs .vx{font-weight:700}
.fx-num{background:var(--pc);border-radius:999px}
.fx-stamp{border-radius:999px;padding:10px 26px 6px}
#wires .bus .w1{stroke:var(--pb)}#wires .bus .w2{stroke:var(--accent)}
.pg i{background:var(--awning)}
.brand{border-radius:999px}
.mx{border-radius:50%}
/* sizes */
@media (max-width:1300px){.ft-v b{font-size:clamp(30px,5vh,56px)}}
@media (max-width:760px){
 .crumb{display:none}
 .ft-v{left:10px;top:10px;bottom:10px;padding:6px 3px}.ft-v b,.ft-sm .ft-v b{font-size:clamp(22px,3.1vh,30px)}
 .ft-in,.ft-sm .ft-in{padding:8px 10px 14px 54px}
 .ft::before,.ft-sm::before{left:54px}
 .win,.ft-sm .win{left:auto;right:-6px;top:8px;bottom:18px;width:56%}
 .ft-sm .win-cafe,.ft-sm .win-stage{right:-14px;top:-8px;bottom:12px;width:60%}
 .ft-t,.ft-sm .ft-t{flex-direction:column;align-items:flex-start;gap:4px;max-width:36%}
 .ft-n{font-size:14px}.ft-l{font-size:12px}
 .ft-k{display:none}
 .tidy{grid-template-columns:auto 1fr;padding:12% 8% 8% 10%}.frows{font-size:10px}
 .cf-in{padding:6px 10% 6px 12%}.cl{font-size:11px}
 .sbn{display:none}.sb{justify-content:center}
}
@media (max-height:560px){
 .ft-v,.ft-sm .ft-v{left:7px;top:8px;bottom:8px;padding:6px 2px;border-radius:8px}.ft-v b,.ft-sm .ft-v b{font-size:clamp(16px,4.2vh,24px)}
 .ft-in,.ft-sm .ft-in{padding:6px 8px 14px 40px}
 .ft::before,.ft-sm::before{left:40px}
 .win,.ft-sm .win,.ft-sm .win-cafe,.ft-sm .win-stage{left:38px;right:-8px;top:18px;bottom:40px;width:auto;height:auto}
 .ft-sm .win-cafe,.ft-sm .win-stage{right:-14px;top:10px}
 .ft-t{gap:4px}.ft-n{font-size:12.5px}.ft-l{font-size:10.5px;padding:2px 7px 1px}
 .ft-k,.ft-x{display:none}
 .sbn{display:none}.sb{justify-content:center}
 .crumb{font-size:16px;min-width:0;padding:2px 14px 2px 6px}
 .combo .cm i{width:7px;height:7px}
}
@media (max-height:560px) and (min-width:940px){.win,.ft-sm .win{bottom:36px}}
@media (max-height:330px){
 .ft-v,.ft-sm .ft-v{left:5px;top:5px;bottom:5px;padding:4px 1px;border-radius:6px}.ft-v b,.ft-sm .ft-v b{font-size:13px}
 .ft-in,.ft-sm .ft-in{padding:4px 6px 6px 26px}
 .win,.ft-sm .win,.ft-sm .win-cafe,.ft-sm .win-stage{left:25px;right:-6px;top:6px;bottom:24px}
 .ft-t .ft-n{display:none}.ft-l{font-size:9.5px;padding:1px 6px 0;border-width:1.5px}
 .win::after{display:none}
 .crumb{font-size:12px}.crumb .swirl{display:none}
 .combo{padding:1px 8px}.combo .cm{display:none}
}
@media (prefers-reduced-motion:reduce){.crumb .cw{animation:none}}
/* round 5 fixes: the vertical word scales to its slab; windows fill the big panels; small panels clear the skew */
.ft{container-type:size}
.ft-v b,.ft-sm .ft-v b{font-size:min(68px,calc((100cqh - 46px) / (var(--len) * .6)))}
.ft-b1 .win,.ft-b2 .win{height:auto}
.dep{justify-content:center}
.roster{column-gap:26px}
.roster>.ft:nth-child(3){margin-left:26px}.roster>.ft:nth-child(4){margin-left:12px}.roster>.ft:nth-child(5){margin-left:-2px}.roster>.ft:nth-child(6){margin-left:-16px}
@media (max-width:760px){
 .roster>.ft:nth-child(n){margin-left:0}.roster>.ft:nth-child(odd){margin-right:10px}.roster>.ft:nth-child(even){margin-left:10px}
 .ft-n,.ft-b1 .ft-n,.ft-b2 .ft-n{font-size:15px}
 .win::after{display:none}
 .dep{padding:6% 8% 4% 10%;gap:4px}.dep .drows .dr:nth-child(n+2){display:none}
 .brd .bt{display:none}.brd{padding:6% 8% 6% 12%}
}
@media (max-height:560px){.ft-n,.ft-b1 .ft-n,.ft-b2 .ft-n{display:none}.win::after{display:none}.roster>.ft:nth-child(n){margin:0}}
.sbn{letter-spacing:.02em;text-overflow:clip}
@media (max-width:760px){
 .ft-v,.ft-sm .ft-v{top:6px;bottom:6px}
 .ft-v b,.ft-sm .ft-v b{font-size:min(30px,calc((100cqh - 22px) / (var(--len) * .6)))}
 .brand{padding:5px 10px}.brand>span{font-size:0;gap:0}.brand svg{width:22px;height:22px}
 .crumb{display:inline-flex;font-size:17px;min-width:0;padding:3px 14px 3px 6px;flex:1;max-width:170px}
}
@media (max-height:330px){
 .ft-v b,.ft-sm .ft-v b{font-size:min(17px,calc((100cqh - 12px) / (var(--len) * .6)))}
 .ft-v,.ft-sm .ft-v{top:4px;bottom:4px}
 .win,.ft-sm .win,.ft-sm .win-cafe,.ft-sm .win-stage{left:28px}
 .crumb{display:inline-flex;max-width:none;flex:none}
}
@media (max-width:1300px) and (min-width:761px) and (min-height:561px){
 .sel{grid-template-columns:minmax(0,1fr) minmax(290px,31%)}
 .roster{column-gap:20px;padding-left:44px}
 .ft-v b{font-size:min(50px,calc((100cqh - 46px) / (var(--len) * .6)))}
 .ft-sm .ft-v b{font-size:min(26px,calc((100cqh - 30px) / (var(--len) * .6)))}
 .ft-in{padding-left:72px}.ft-sm .ft-in{padding-left:48px}
 .win{left:66px;right:-8px}.ft-sm .win,.ft-sm .win-cafe,.ft-sm .win-stage{left:44px;right:-12px}
 .ft::before{left:72px}.ft-sm::before{left:48px}
 .ft-sm .ft-k,.ft-sm .ft-x{display:none}
 .dep{font-size:11px;padding:12% 8% 10% 8%}.frows{font-size:10.5px}.dial{width:56px}
 .neon b{font-size:22px}.neon .n2{font-size:12px}.neon .n3{display:none}
 .brd{font-size:9.5px}.sbn{display:none}
 .pv-bub{max-width:100%}
}

/* ================= round 6 (owner, live review): the preview never overflows its pad; rounds sit above the work; a per-panel select frame */
/* the preview stacks in fixed rows: rounds first (just above the pad), then orb + line, the hot card, and the ghosts take what is left */
.hs{grid-template:'lad lad' auto 'orb bub' auto 'hot hot' auto 'gh gh' minmax(0,1fr)/auto minmax(0,1fr);align-content:stretch;padding-top:4px;overflow:visible}
.pv-lad{align-self:start;margin:0 -8px 4px 6px;transform:translateZ(30px) rotate(-.6deg)}
.pv-orb{width:clamp(96px,9.5vw,170px)}
.pv-bub{min-width:0}
.pv-bub>div{min-width:0}
.pv-bub .lt{max-width:100%}
.pv-bub .lt i{white-space:normal;text-align:center}
/* ghosts fill the leftover row and drop out when it is too short to show them whole */
.ghosts{container-type:size;min-height:0;align-items:flex-start}
.ghosts>*{max-height:100%}
@container (max-height:96px){.ghosts>.card:not(.scr),.ghosts>.bub{display:none}}
@container (max-height:60px){.ghosts>.card.scr{display:none}}
.ghosts>.card.scr{flex:0 1 auto;aspect-ratio:16/8;height:100%;width:auto;max-width:100%;margin-inline:auto}
.ghost2 p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* cafe window on the roster: lines wrap anywhere (long links) and clip inside the window */
.cl{overflow-wrap:anywhere}
.win-cafe{overflow:hidden}

/* the select frame: drawn outside the panel (never inside it), with the slab lit as an inverted spine, and one signature per panel */
.ft::after{inset:-11px;border:3px solid var(--accent);box-shadow:0 0 0 3px var(--ink),inset 0 0 0 3px var(--ink);transform:scale(.97);transition:opacity .16s,transform .22s cubic-bezier(.2,1.4,.4,1);pointer-events:none;z-index:5}
.ft.on::after,.ft:focus-visible::after{transform:none}
.ft.on .ft-v,.ft:focus-visible .ft-v{background:var(--accent);box-shadow:0 0 0 3px var(--ink),4px 4px 0 var(--ink);transform:translateY(-8px) scaleY(1.035)}
.ft.on .ft-v b,.ft:focus-visible .ft-v b{background:none;color:var(--accent-ink);-webkit-text-stroke:0}
.ft-v{transition:transform .22s cubic-bezier(.2,1.4,.4,1)}
/* proposal: a fighter-select bracket, corner ticks in caution yellow */
.ft-pm::after{border-width:4px;background:
 linear-gradient(var(--caution),var(--caution)) 0 0/26px 6px no-repeat,linear-gradient(var(--caution),var(--caution)) 0 0/6px 26px no-repeat,
 linear-gradient(var(--caution),var(--caution)) 100% 100%/26px 6px no-repeat,linear-gradient(var(--caution),var(--caution)) 100% 100%/6px 26px no-repeat}
/* keep: a dashed selection marquee, like a tidy lasso */
.ft-hk::after{border-style:dashed;border-width:4px}
/* cafe: a dotted cupcake-liner ring */
.ft-cafe::after{border-style:dotted;border-width:6px}
/* stage: marquee bulbs that blink in turn */
.ft-stage::after{border:0;box-shadow:0 0 0 3px var(--ink);background:radial-gradient(circle,var(--caution) 3px,transparent 3.6px) 0 0/16px 16px;
 -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:8px}
.ft-stage.on::after{animation:bulbs .9s steps(2) infinite}
@keyframes bulbs{50%{opacity:.55}}
/* shop: a perforated ticket edge */
.ft-shop::after{border-style:double;border-width:7px}
/* call: a neon double tube */
.ft-call::after{border-color:var(--accent);box-shadow:0 0 0 3px var(--ink),0 0 14px 2px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 0 0 3px var(--ink)}
@media (prefers-reduced-motion:reduce){.ft::after,.ft-v{transition:none}.ft-stage.on::after{animation:none}}
@media (max-height:560px),(max-width:760px){.ft::after{inset:-6px;border-width:2px;box-shadow:0 0 0 2px var(--ink)}.ft.on .ft-v{transform:none}}
/* round 6b: tags hug their words; the ghost cafe line stacks name over text; short wide screens compact the preview */
.pv-bub .lt,.ghost2 .lt{width:max-content;max-width:100%}
.ghosts .ghost2{display:block;padding:8px 12px}
.ghosts .ghost2 b{display:block;font-size:12px}
.pv-orb{width:clamp(84px,min(9.5vw,19vh),170px)}
@media (max-height:700px) and (min-height:561px) and (min-width:761px){
 .hs{gap:8px 12px;padding-bottom:6px}
 .pv-hot{padding:10px 14px 10px 20px}.pv-hot .big{font-size:22px}.pv-hot h3{font-size:14px}.pv-hot p{display:none}
 .pv-hot .btn.big{font-size:16px;min-height:38px}
 .pv-bub p{font-size:12.5px}
}
/* round 6c: a narrow preview pad keeps the line readable: a smaller orb, a one-line tag, the ghost line hides when its row is short */
.pv{container:pv/inline-size}
@container pv (max-width:400px){
 .hs{padding-left:24px;padding-right:20px;column-gap:10px}
 .pv-orb{width:74px}.pv-orb b{font-size:20px}.pv-orb i,.pv-orb small{font-size:10px}
 .pv-bub{padding:6px 10px 6px 6px}.pv-bub p{font-size:12.5px}
 .pv-bub .lt,.ghost2 .lt{font-size:7.5px;letter-spacing:.3px}
 .pv-bub .lt i,.ghost2 .lt i{white-space:nowrap}
}
@container (max-height:96px){.ghosts .ghost2.bub{display:none}}
.pv-bub .lt,.ghost2 .lt{align-self:flex-start;justify-self:start}
/* round 6d: no sideways scroll on narrow screens */
@media (max-width:760px){html,body{overflow-x:clip}}
/* ================= the shop panel, crumpled stationery (owner): the sheet replaces the rounded slab; the slab, window, tags and perforation stay */
.ft-shop{background:none;border:0;box-shadow:none;border-radius:0}
.crum{position:absolute;inset:-6px -4px -4px -6px;width:calc(100% + 10px);height:calc(100% + 10px);overflow:visible;z-index:0;filter:drop-shadow(5px 5px 0 var(--ink));pointer-events:none}
.ft-shop .ft-in{z-index:1}
.cr-b{fill:color-mix(in srgb,var(--paper) 88%,var(--pc,var(--accent)));stroke:var(--ink);stroke-width:3px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cr-s{fill:var(--ink);opacity:.07}.cr-s1{opacity:.11}.cr-s2{fill:var(--paper);opacity:.5}
.cr-l{fill:none;stroke:var(--ink);stroke-width:1.2px;opacity:.32;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cr-f{opacity:0;animation:crBoil .42s steps(1,end) infinite}
.cr-f1{animation-delay:-.14s}.cr-f2{animation-delay:-.28s}
@keyframes crBoil{0%,33.33%{opacity:1}33.34%,100%{opacity:0}}
/* selected: the sheet boils faster and its edge inks in the accent; no generic ring */
.ft-shop::after{display:none}
.ft-shop.on .cr-f,.ft-shop:focus-visible .cr-f{animation-duration:.27s}
.ft-shop.on .cr-f1{animation-delay:-.09s}.ft-shop.on .cr-f2{animation-delay:-.18s}
.ft-shop.on .cr-b,.ft-shop:focus-visible .cr-b{stroke:var(--accent);stroke-width:5px}
.ft-shop.on .crum,.ft-shop:focus-visible .crum{filter:drop-shadow(0 0 0 var(--ink)) drop-shadow(6px 6px 0 var(--ink))}
@media (prefers-reduced-motion:reduce){.cr-f{animation:none!important}.cr-f0{opacity:1}}
/* the price board sits pinned on the sheet, so the crumpled paper shows around it */
.ft-shop .win,.ft-sm.ft-shop .win{top:12%;bottom:26%;right:7%;transform:rotate(-1.6deg);box-shadow:3px 3px 0 var(--ink)}
@media (max-height:560px){.ft-shop .win,.ft-sm.ft-shop .win{top:8%;bottom:22%;right:5%}}

/* round 7 (owner): Call leads the roster, Proposal is last and the smallest */
@media (min-width:761px) and (min-height:561px){.roster{grid-template-rows:repeat(3,minmax(0,1fr)) minmax(0,.72fr)}}
@media (max-width:760px) and (min-height:561px){.roster{grid-template-rows:1.5fr 1.3fr repeat(3,1fr) .75fr}}
@media (max-height:560px){.roster{grid-template-columns:1.55fr 1.3fr repeat(3,minmax(0,1fr)) minmax(0,.75fr)}}
@media (max-height:560px) and (min-width:940px){.roster{grid-template-columns:1.3fr 1.2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr))}}
/* round 8 (owner): the select frame sits behind the panel's content (the slab, window and tags lie on top of it);
   the lit slab pops out diagonally up-left, projected off the panel by stacked extrusion layers */
.ft::after{z-index:-1}
.ft.on .ft-v,.ft:focus-visible .ft-v{transform:translate(-8px,-7px) rotate(-1.2deg);
 box-shadow:0 0 0 3px var(--ink),3px 3px 0 3px var(--pc,var(--paper)),6px 6px 0 3px var(--ink),9px 9px 0 3px color-mix(in srgb,var(--ink) 35%,transparent)}
@media (max-height:560px),(max-width:760px){.ft.on .ft-v,.ft:focus-visible .ft-v{transform:translate(-4px,-3px) rotate(-1deg);
 box-shadow:0 0 0 2px var(--ink),2px 2px 0 2px var(--pc,var(--paper)),4px 4px 0 2px var(--ink)}}

/* ================= round 9 (owner): the rooms rail as navigation, and the credits as a ticket */
/* the rail wraps (never a sideways scroll): sections as inverted tabs, rooms sized by how big they are, the smallest fold into +N */
.more .chips{flex-wrap:wrap;align-content:flex-start;align-items:center;overflow:hidden;max-height:84px;row-gap:8px;column-gap:12px;padding:6px 6px 6px 4px}
.cg{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 8px 3px 3px;border-radius:999px;background:color-mix(in srgb,var(--paper) 40%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 30%,transparent)}
.cg.gone,.chip.fold{display:none}
.cgl{writing-mode:vertical-rl;transform:rotate(180deg);font:700 8.5px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 3px;border-radius:6px;align-self:stretch;text-align:center}
.cg.cur .cgl{background:var(--accent);color:var(--accent-ink);box-shadow:2px 2px 0 var(--ink)}
.chip{font-family:var(--disp);font-weight:600}
.chip.t1{font-size:16px;font-weight:700;padding:6px 16px 4px;box-shadow:4px 4px 0 var(--ink);border-width:2.5px}
.chip.t1:not(.lk){background:var(--accent);color:var(--accent-ink)}
.chip.t1:not(.lk) i{color:var(--accent-ink)}
.chip.t2{font-size:13px;padding:4px 12px 2px}
.chip.t3{font-size:11px;padding:2px 9px 1px;box-shadow:2px 2px 0 var(--ink);border-width:1.5px}
.chip.t3 i{display:none}
.chip.sec{border-style:dashed}
.chip.last{outline:3px solid var(--caution);outline-offset:2px}
.chip.plus{background:var(--caution);color:var(--ink);font-weight:700;font-size:12px;padding:3px 10px 1px}
/* the flourish: rooms pop in, one after another, whenever the rail is painted */
.chips.in .chip{animation:chipIn .42s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--d,0) * 35ms)}
.chips.in .cgl{animation:chipIn .3s ease-out both}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.6) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.chips.in .chip,.chips.in .cgl{animation:none}}
.roomsm .chips.all{display:flex;flex-wrap:wrap;gap:10px;max-height:none;overflow:visible;padding:8px 0 4px}
@media (max-height:760px){.more .chips{max-height:46px}}
@media (max-height:560px){.more .chips{max-height:30px;row-gap:4px;column-gap:6px;padding:2px}.cg{padding:1px 5px 1px 1px;gap:4px}.cgl{font-size:7px;padding:2px 2px}
 .chip.t1{font-size:12px;padding:2px 10px 0;box-shadow:2px 2px 0 var(--ink);border-width:2px}.chip.t2,.chip.t3,.chip.plus{font-size:10.5px;padding:1px 7px 0}.chip.last{outline-width:2px}}
@media (max-width:760px) and (min-height:561px){.more .chips{max-height:96px}}

/* credits: an admission ticket. The stub carries the big number; a perforation; the body reads CREDITS over the punch holes */
.combo{display:flex;align-items:stretch;padding:0;gap:0;background:var(--paper);color:var(--ink);border:var(--line);border-radius:14px;transform:rotate(-2.5deg);
 box-shadow:4px 4px 0 var(--ink);-webkit-mask:none;mask:none;overflow:hidden;transition:transform .2s cubic-bezier(.2,1.4,.4,1)}
@supports (corner-shape:scoop){.combo{corner-shape:scoop;border-radius:12px}}
.combo .cv{display:grid;place-items:center;min-width:1.5em;padding:4px 12px 2px 14px;background:var(--accent);color:var(--accent-ink);font:700 30px/1 var(--disp);
 border-right:2.5px dashed var(--ink);grid-row:auto;text-align:center}
.combo .ct{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:4px 12px 4px 10px;text-align:left}
.combo .ct em{font:700 13px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase}
.combo .ct small{font-size:8.5px;line-height:1;opacity:.7;font-weight:600;letter-spacing:.04em}
.combo .cm{display:flex;grid-column:auto}
@media (hover:hover){.combo:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
@media (max-height:560px){.combo .cv{font-size:18px;padding:2px 8px 0 9px}.combo .ct{padding:2px 8px}.combo .ct em{font-size:10px}.combo .ct small,.combo .cm{display:none}}
.hud .combo .ct{display:none}.hud .combo .cv{font-size:20px;border-right:0}
.chip.allr{background:var(--ink);color:var(--paper);font-weight:700;font-size:13px;padding:4px 12px 2px;box-shadow:3px 3px 0 var(--accent)}
.chip.allr i{color:var(--caution);opacity:1}
.roomsm .cg{flex-wrap:wrap;margin:0 0 6px}

/* ================= the stage teddy cover (app/teddy.js), shared with the classic chat */
/* ================================================================ stage cover: the teddy sprite (app/teddy.js) */
.td{position:absolute;inset:0;overflow:hidden;background:var(--ink,#111);container-type:inline-size;z-index:2}
.td-disc{position:absolute;left:4%;top:50%;width:62cqw;aspect-ratio:1;margin-top:-31cqw;border-radius:50%;background:var(--accent);display:block;
 box-shadow:0 0 0 1.4cqw var(--ink,#111),0 0 0 2.2cqw var(--title-b);transition:transform .55s cubic-bezier(.7,0,.2,1)}
.td-bear{position:absolute;left:12%;top:8%;width:46cqw;height:auto;overflow:visible;transform-origin:50% 90%;animation:tdIdle 2.8s ease-in-out infinite}
/* the hand-drawn outline boils: three frames, one visible at a time, stepped */
.td-f{opacity:0;animation:tdBoil .36s steps(1,end) infinite}
.td-f1{animation-delay:-.12s}
.td-f2{animation-delay:-.24s}
@keyframes tdBoil{0%,33.33%{opacity:1}33.34%,100%{opacity:0}}
@keyframes tdIdle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-1.6%) rotate(1.5deg)}}
.td-txt{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:2.4cqw;text-align:right;z-index:3}
.td-txt b{font:800 italic clamp(14px,4.4cqw,40px)/1 'Josefin Sans',Tahoma,sans-serif;color:var(--paper,#fff);max-width:38cqw}
.td-play{display:inline-flex;align-items:center;gap:1.4cqw;font:800 clamp(12px,2.6cqw,22px)/1 'Josefin Sans',Tahoma,sans-serif;color:var(--accent-ink);background:var(--accent);
 border:2px solid var(--paper,#fff);border-radius:40px;padding:1.4cqw 3cqw 1.4cqw 1.6cqw;box-shadow:.6cqw .6cqw 0 var(--title-b);cursor:pointer}
.td-play i{width:clamp(14px,3cqw,26px);aspect-ratio:1;border-radius:50%;background:var(--accent-ink);position:relative}
.td-play i::after{content:'';position:absolute;left:38%;top:26%;border-style:solid;border-width:.65em 0 .65em 1em;font-size:clamp(5px,.9cqw,8px);border-color:transparent transparent transparent var(--accent)}
.td-hit{position:absolute;inset:0;z-index:2;background:none;border:0;cursor:pointer}
.td-yt{position:absolute;right:2%;bottom:3%;z-index:4;font:bold 11px/1 Tahoma,sans-serif;color:var(--paper,#fff);opacity:.7;text-decoration:none}
.td-yt:hover{opacity:1;text-decoration:underline}
.td-load{position:absolute;right:5%;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:1.6cqw;opacity:0;pointer-events:none;color:var(--accent-ink)}
.td-load b{font:800 italic clamp(13px,3.6cqw,32px)/1 'Josefin Sans',Tahoma,sans-serif}
.td-load span{display:flex;gap:1.2cqw}
.td-load span i{width:1.8cqw;height:1.8cqw;min-width:7px;min-height:7px;border-radius:50%;background:var(--accent-ink);animation:tdDot .9s ease-in-out infinite}
.td-load span i:nth-child(2){animation-delay:.15s}
.td-load span i:nth-child(3){animation-delay:.3s}
@keyframes tdDot{0%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-60%);opacity:1}}
/* shards: tessellated triangles that burst from the bear on the tap */
.td-shards{position:absolute;left:35%;top:52%;width:0;height:0;z-index:3}
.td-sh{position:absolute;left:-1.6cqw;top:-1.6cqw;width:3.2cqw;height:3.2cqw;background:var(--title-b);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}
.td-sh:nth-child(even){background:var(--paper,#fff)}
/* 1. the pop */
.td.go .td-bear{animation:tdSquash .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes tdSquash{0%{transform:scale(1)}25%{transform:scale(1.14,.82)}55%{transform:scale(.9,1.12)}100%{transform:scale(1)}}
.td.go .td-sh{animation:tdShard .6s cubic-bezier(.2,.8,.3,1) var(--d) both}
@keyframes tdShard{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.5)}100%{opacity:0;transform:rotate(var(--a)) translateY(-26cqw) scale(1.1) rotate(160deg)}}
.td.go .td-txt{opacity:0;transform:translateY(-50%) translateX(6%);transition:opacity .25s,transform .25s}
.td.go .td-disc{transform:scale(3.4)}
/* 2. loading: the disc fills the stage, the bear centers and its eyes spin as dashes */
.td.loading .td-bear{animation:tdIdle 1.1s ease-in-out infinite;transition:transform .4s}
.td.loading .td-eye{stroke-dasharray:9 7;animation:tdSpin .8s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes tdSpin{to{transform:rotate(360deg)}}
.td.loading .td-load{opacity:1;transition:opacity .25s}
.td.slow .td-yt{opacity:1;font-size:13px;color:var(--accent-ink);text-decoration:underline}
/* 3. reveal: the cover drops away, the player fades in underneath */
.td.out{opacity:0;transform:scale(1.06);transition:opacity .45s ease,transform .45s ease}
.td-fr{opacity:0;transition:opacity .45s ease .1s}
.td-fr.in{opacity:1}
/* the home card's small cover: bear and Play only */
.td.mini .td-txt b,.td.mini .td-yt{display:none}
@media (prefers-reduced-motion:reduce){.td-bear,.td-f,.td.go .td-bear,.td.go .td-sh,.td.loading .td-eye,.td-load span i{animation:none!important}.td-f0{opacity:1}.td.go .td-disc{transition:none}}
.card.scr.tdbox{container-type:size;padding:0;background:var(--ink);overflow:hidden;position:relative}
.tdbox .td-fr,.tdbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit}
.tdbox .td-yt{display:none}
.ghosts .tdbox{pointer-events:auto}
/* the rail takes the whole row, and stays one line above the footer (the phone gets two) */
.more .chips{flex:1 1 auto;max-height:48px}
@media (max-height:560px){.more .chips{max-height:30px}}
@media (max-width:760px) and (min-height:561px){.more{flex-wrap:wrap}.more .chips{flex-basis:100%;max-height:92px}}
.more .chips{max-height:60px}
@media (max-height:560px){.more .chips{max-height:32px}}
@media (max-width:760px) and (min-height:561px){.more .chips{max-height:104px}}
/* section tabs sit inline (a vertical word made each group as tall as the word) */
.cgl{writing-mode:horizontal-tb;transform:skewX(-8deg);align-self:center;font-size:9px;padding:4px 7px 3px;border-radius:999px 4px 4px 999px}
@media (max-height:560px){.cgl{font-size:7.5px;padding:2px 5px 1px}}
.chip[hidden]{display:none}
.cg{max-width:100%;flex-wrap:wrap;row-gap:4px}
/* the pop-in grows from the chip itself (a downward start read as overflow and folded rooms needlessly) */
@keyframes chipIn2{from{opacity:0;transform:scale(.55)}70%{transform:scale(1.08)}}
.chips.in .chip{animation-name:chipIn2}.chips.in .cgl{animation-name:chipIn2}
@media (max-width:760px) and (min-height:561px){.more .chips{max-height:150px}.chip i{font-size:10px}}
html,body{overflow-x:clip}
/* owner: chat text is not selectable; typing fields still are */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}

/* ================= round 10 (owner): the big-screen chatroom. Flat and crisp (the 3D tilt rasterized the text soft),
   a solid booth instead of a see-through monitor frame, seats with stickers, a room header, roomier bubbles */
.m-chat{perspective:none}
.m-chat .field,.m-chat .wall{transform:none;transform-style:flat}
.m-chat .field::before,.m-chat .field::after{display:none}
/* the booth: a paper board on a hard shadow, an awning across the top, faint grid paper inside */
.m-chat .room{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;
 background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1.2px,transparent 1.6px);background-size:22px 22px;background-position:11px 11px}
.m-chat .rh{position:relative;display:flex;align-items:center;gap:12px;padding:22px 18px 10px;background:var(--pa,var(--paper));border-bottom:3px solid var(--ink)}
.m-chat .rh::before{content:'';position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,var(--accent) 0 18px,var(--paper) 18px 36px);
 -webkit-mask:linear-gradient(#000 0 0) top/100% 7px no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 7px repeat-x;mask:linear-gradient(#000 0 0) top/100% 7px no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 7px repeat-x}
.rh-t{display:flex;align-items:center;gap:10px;min-width:0}
.rh-t b{font:700 clamp(22px,2.2vw,32px)/1 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--ink);flex:none;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{50%{transform:scale(.6);opacity:.55}}
.rh-av{display:flex;margin-left:auto}
.rh-av .av{width:30px;height:30px;font-size:11px;margin-left:-9px;box-shadow:none}
.rh-n{font:600 13px/1 var(--disp);background:var(--ink);color:var(--paper);border-radius:99px;padding:5px 11px 4px;white-space:nowrap}
.m-chat .feed{padding:16px 18px 10px;gap:16px}
.m-chat .typing{padding:0 18px 10px}
/* avatars: round stickers, one pastel per person, ink ring */
.av{width:40px;height:40px;font:700 14px/1 var(--disp);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:var(--paper);color:var(--ink)}
.av.c0{background:var(--pa,var(--paper))}.av.c1{background:var(--pb,var(--paper))}.av.c2{background:var(--pc,var(--paper))}.av.c3{background:var(--pd,var(--paper))}.av.c4{background:var(--accent);color:var(--accent-ink)}
/* bubbles: bigger type, the name as a tab above */
.m-chat .ln{max-width:min(680px,86%)}
.m-chat .bb{border-width:3px;border-radius:20px 20px 20px 6px;padding:10px 16px 11px;box-shadow:4px 4px 0 var(--ink)}
.m-chat .r .bb{border-radius:20px 20px 6px 20px;box-shadow:inset -7px 0 0 var(--pc,var(--title-b)),4px 4px 0 var(--ink)}
.m-chat .me .bb{border-radius:20px 20px 6px 20px}
.m-chat .bb .nm{font:600 13px/1.1 var(--disp);color:var(--accent);margin-bottom:3px}
.m-chat .me .bb .nm{color:var(--accent-ink)}
.m-chat .bb p{font-size:16px;line-height:1.45;font-weight:500}
.m-chat .ln.sys .bb{border-radius:14px;font-size:14px}
/* the wall: seats, each a sticker and a name plate; staff get a ticket tag */
.seats{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0 4px 0 0}
.seat{display:flex;align-items:center;gap:10px;background:var(--paper);border:2.5px solid var(--ink);border-radius:999px 14px 14px 999px;padding:4px 12px 4px 4px;box-shadow:3px 3px 0 var(--ink);
 animation:seatIn .4s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--d,0) * 45ms)}
.seat>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.seat b{font:600 15px/1.1 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat i{font:700 10px/1 var(--disp);font-style:normal;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:var(--accent-ink);align-self:flex-start;padding:3px 7px 2px;border-radius:4px}
.seat.vip{background:var(--pa,var(--paper))}
@keyframes seatIn{from{opacity:0;transform:translateX(-18px) scale(.9)}}
/* the composer: a thick ticket bar */
.m-chat .say-in{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.m-chat .say-in input{font-size:16px;padding:12px 18px 10px}
@media (prefers-reduced-motion:reduce){.live,.seat{animation:none}}
/* short frames: a slimmer booth */
@media (max-height:560px){.m-chat .room{border-width:2px;border-radius:16px;box-shadow:4px 4px 0 var(--ink)}.m-chat .rh{padding:10px 10px 5px;gap:8px;border-bottom-width:2px}
 .m-chat .rh::before{height:8px}.rh-t b{font-size:16px}.rh-av{display:none}.rh-n{font-size:11px;padding:3px 8px 2px}.live{width:8px;height:8px;box-shadow:0 0 0 2px var(--ink)}
 .m-chat .feed{padding:6px 8px 4px;gap:6px}.m-chat .bb{border-width:2px;padding:4px 10px 5px;box-shadow:2px 2px 0 var(--ink)}.m-chat .bb p{font-size:12.5px;line-height:1.3}.m-chat .bb .nm{font-size:10.5px}}
@media (max-width:760px){.m-chat .room{border-radius:18px;box-shadow:5px 5px 0 var(--ink)}.rh-av{display:none}.m-chat .feed{padding:12px 10px 8px}.m-chat .ln{max-width:92%}.av{width:34px;height:34px;font-size:12px}}
/* the chatroom backdrop: crumpled stationery replaces the drifting tiles (only in the chat view) */
.paperbg{position:absolute;inset:0;width:100%;height:100%;display:none;background:color-mix(in srgb,var(--paper) 78%,var(--pa,var(--accent)))}
body[data-view="chat"] .paperbg{display:block}
body[data-view="chat"] #world .tiles,body[data-view="chat"] #world .floor{display:none}
.pb-d{fill:var(--ink);opacity:var(--o)}.pb-h{fill:var(--paper);opacity:var(--o)}.pb-m{fill:none}
.pb-l{fill:none;stroke:var(--ink);stroke-width:1px;opacity:.13;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.pb-f{opacity:0;animation:crBoil .6s steps(1,end) infinite}.pb-f1{animation-delay:-.2s}.pb-f2{animation-delay:-.4s}
@media (prefers-reduced-motion:reduce){.pb-f{animation:none}.pb-f0{opacity:1}}
/* seat stickers keep their own centering */
.seat>.av{display:grid;place-items:center;flex-direction:initial;gap:0}
.pb-d{opacity:calc(var(--o) * 1.8)}.pb-l{opacity:.2}

/* ================= round 11 (owner): phone roster as an accordion. Cards alternate a slight shear, overlap a touch and
   stretch when picked; the word sits across the card, multiplied in echoes, instead of the vertical slab */
@media (max-width:760px){
 .roster{transform:none;gap:0;padding:10px 14px 14px 10px;grid-template-rows:1.35fr 1.25fr repeat(3,1fr) .8fr}
 .roster>.ft:nth-child(n){margin:0 0 -6px}
 .roster>.ft{transform:skewY(var(--fold)) scaleY(.97);transform-origin:50% 50%;transition:transform .32s cubic-bezier(.2,1.5,.4,1),box-shadow .2s}
 .roster>.ft:nth-child(odd){--fold:-2.2deg}
 .roster>.ft:nth-child(even){--fold:2.2deg}
 .roster>.ft.on,.roster>.ft:focus-visible{transform:skewY(calc(var(--fold) * .4)) scale(1.03,1.1);z-index:4;box-shadow:6px 6px 0 var(--ink)}
 .roster>.ft:active{transform:skewY(var(--fold)) scale(.97,.92)}
 @media (hover:hover){.roster>.ft:hover:not(.on){transform:skewY(calc(var(--fold) * .6)) scale(1.015,1.05);z-index:3}}
 /* the occasional flourish: a quick accordion stretch and a light sweep */
 .roster>.ft.flare{animation:flareBox .8s cubic-bezier(.2,1.4,.4,1)}
 @keyframes flareBox{30%{transform:skewY(calc(var(--fold) * -.5)) scale(1.02,1.12)}60%{transform:skewY(var(--fold)) scale(1,.96)}}
 .roster>.ft.flare::before{content:'';position:absolute;inset:0;left:0;right:auto;width:40%;height:auto;bottom:0;border-radius:inherit;background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--paper) 70%,transparent),transparent);opacity:0;
  animation:flareSweep .8s ease-out;-webkit-mask:none;mask:none;z-index:6;pointer-events:none}
 @keyframes flareSweep{0%{opacity:1;transform:translateX(-60%)}100%{opacity:0;transform:translateX(260%)}}
 /* the word: across the top of the card, with two multiplied echoes behind it */
 .ft-v,.ft-sm .ft-v{left:10px;right:auto;top:6px;bottom:auto;background:none;box-shadow:none;padding:0;border-radius:0;z-index:5;display:block}
 .ft-v b,.ft-sm .ft-v b{writing-mode:horizontal-tb;transform:none;position:relative;display:block;font:700 clamp(24px,8vw,34px)/1 var(--disp);letter-spacing:-.01em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
 .ft-v b::before,.ft-v b::after{content:attr(data-w);position:absolute;left:0;top:0;z-index:-1;mix-blend-mode:multiply;pointer-events:none}
 .ft-v b::before{color:var(--accent);transform:translate(3px,3px)}
 .ft-v b::after{color:transparent;-webkit-text-stroke:1.5px var(--ink);transform:translate(6px,6px);opacity:.55}
 .ft.on .ft-v,.ft:focus-visible .ft-v{background:none;box-shadow:none;transform:translate(-2px,-3px)}
 .ft.on .ft-v b,.ft:focus-visible .ft-v b{color:var(--accent);background:none}
 .ft.on .ft-v b::before{color:var(--ink)}
 .ft.on .ft-v b::after{transform:translate(9px,8px);opacity:.7}
 /* the content below the word: tags and window clear it */
 .ft-in,.ft-sm .ft-in{padding:40px 10px 10px 12px}
 .win,.ft-sm .win,.ft-sm .win-cafe,.ft-sm .win-stage{left:auto;right:-6px;top:8px;bottom:12px;width:52%}
 .ft::before,.ft-sm::before{left:12px}
 .ft::after{inset:-6px}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.roster>.ft{transition:none}.roster>.ft.flare,.roster>.ft.flare::before{animation:none}}
@media (max-width:760px){
 .roster>.ft:nth-child(n){margin:0 0 -2px}
 .ft-n,.ft-b1 .ft-n,.ft-b2 .ft-n,.ft-sm .ft-n{display:none}
 .ft-v,.ft-sm .ft-v{top:11px}
 .ft-sm .ft-v b{font-size:clamp(21px,6.6vw,28px)}
 .ft-v b::before{transform:translate(2.5px,2.5px)}
 .ft-v b::after{transform:translate(5px,5px);opacity:.3;-webkit-text-stroke-width:1.2px}
 .ft.on .ft-v b::after{transform:translate(7px,7px);opacity:.45}
 .ft-in,.ft-sm .ft-in{justify-content:flex-end;padding:44px 10px 12px 12px}
}
/* phone: a card too short for the word and its tag keeps the word */
@media (max-width:760px){@container (max-height:96px){.ft-t{display:none}}}
/* phone header (owner): the cycling call to action reads whole. It takes the room, the credits ticket goes compact */
@media (max-width:760px){
 .sel .top{gap:8px}
 .crumb{max-width:none;flex:1 1 auto;min-width:0;font-size:clamp(14px,4.4vw,19px);padding:3px 12px 3px 5px;gap:6px;text-overflow:clip}
 .crumb .swirl{width:1.1em;height:1.3em}
 .sel .combo .ct small,.sel .combo .cm{display:none}
 .sel .combo .cv{font-size:22px;padding:3px 9px 1px 10px}
 .sel .combo .ct{padding:3px 9px}
 .sel .combo .ct em{font-size:11px;letter-spacing:.1em}
}
@media (max-width:440px){.sel .crumb{display:inline-flex}}
@media (max-width:400px){.sel .combo .ct{display:none}.sel .combo .cv{border-right:0;padding:3px 11px 1px}.sel .top{gap:6px}.crumb{padding-right:9px}}
@media (max-width:340px){.crumb .swirl{display:none}.crumb{padding-left:10px}.brand{padding:4px 7px}}
/* the narrowest header: credits shrink to the stub, which shows the balance most of the time and now and then flips to
   CREDITS, then TAP, so it reads as what it is; tapping opens the credits details */
.cfl{display:none}
@media (max-width:400px){
 .sel .combo{position:relative}
 .sel .combo .cv{width:3.1em;min-width:0;overflow:hidden;animation:cfNum 7s cubic-bezier(.3,1.3,.5,1) infinite}
 .sel .cfl{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
 .sel .cfl i{position:absolute;inset:0;display:grid;place-items:center;font:700 9.5px/1 var(--disp);font-style:normal;letter-spacing:.12em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink);opacity:0;transform:translateY(100%)}
 .sel .cfl i:nth-child(1){animation:cfA 7s cubic-bezier(.3,1.3,.5,1) infinite}
 .sel .cfl i:nth-child(2){animation:cfB 7s cubic-bezier(.3,1.3,.5,1) infinite;background:var(--ink);color:var(--paper);font-size:11px}
}
@keyframes cfNum{0%,64%{transform:none;opacity:1}68%,94%{transform:translateY(-100%);opacity:0}97%{transform:translateY(40%);opacity:0}100%{transform:none;opacity:1}}
@keyframes cfA{0%,64%{transform:translateY(100%);opacity:0}68%,78%{transform:none;opacity:1}82%,100%{transform:translateY(-100%);opacity:0}}
@keyframes cfB{0%,78%{transform:translateY(100%);opacity:0}82%,92%{transform:none;opacity:1}96%,100%{transform:translateY(-100%);opacity:0}}
@media (max-width:400px) and (prefers-reduced-motion:reduce){.sel .combo .cv,.sel .cfl i{animation:none}.sel .cfl{display:none}}
@media (max-width:760px){@container (max-height:96px){.roster .ft .ft-t,.roster .ft-sm .ft-t{display:none}}}
@media (max-width:760px){@container (min-height:80px){.roster .ft .ft-t,.roster .ft-sm .ft-t{display:flex}}}

/* ================= round 12 (owner): the order tracker on the proposal job. Delivery-style map (time across, attention up),
   the order as the teddy, a receipt to add, remove and hire movers. Flat (crisp), themed, fits every frame without scrolling */
.m.trk .field{display:block;transform:none;transform-style:flat}
.m.trk .field::before,.m.trk .field::after{display:none}
.m.trk .mvs{display:none}
.trkb{background:var(--accent);color:var(--accent-ink)}
.tk{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:18px}
/* the map */
.tk-map{position:relative;min-height:0;container-type:size;background:var(--paper);border:3px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);overflow:hidden;
 background-image:linear-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px);background-size:28px 28px}
.tk-eta{position:absolute;left:14px;top:12px;z-index:3;display:flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border-radius:999px;padding:6px 14px 5px 10px;box-shadow:3px 3px 0 var(--accent);max-width:calc(100% - 28px)}
.tk-eta b{font:700 clamp(12px,3.2cqh,16px)/1 var(--disp);white-space:nowrap}
.tk-eta small{font-size:11px;opacity:.8;white-space:nowrap}
.tk-eta .live{width:9px;height:9px;box-shadow:0 0 0 2px var(--paper)}
/* attention lanes: Standard at the bottom, Melina directly at the top */
.tk-lanes{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:54px;bottom:62px;display:grid;grid-template-rows:repeat(4,1fr)}
.tk-lanes li{grid-row:var(--r);border-top:2px dashed color-mix(in srgb,var(--ink) 22%,transparent);position:relative}
.tk-lanes li:last-child{border-bottom:2px dashed color-mix(in srgb,var(--ink) 22%,transparent)}
.tk-lanes li span{position:absolute;right:10px;bottom:4px;font:600 11px/1 var(--disp);color:color-mix(in srgb,var(--ink) 55%,transparent);text-transform:uppercase;letter-spacing:.08em}
.tk-lanes li.on{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.tk-lanes li.on span{color:var(--ink)}
/* the road: stops along the bottom, filled to where the bid is */
.tk-road{position:absolute;left:9%;right:7%;bottom:30px;height:6px;background:color-mix(in srgb,var(--ink) 18%,transparent);border-radius:9px}
.tk-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);border-radius:9px;transform-origin:0 50%;transform:scaleX(var(--p));transition:transform .6s cubic-bezier(.3,1.2,.5,1)}
.tk-stop{position:absolute;left:calc(var(--x) * 100%);top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center}
.tk-stop i{width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.tk-stop.done i{background:var(--accent)}
.tk-stop.now i{background:var(--caution);width:22px;height:22px;box-shadow:0 0 0 4px color-mix(in srgb,var(--caution) 40%,transparent)}
.tk-stop b{position:absolute;top:16px;font:600 10.5px/1.1 var(--disp);white-space:nowrap;color:color-mix(in srgb,var(--ink) 70%,transparent)}
.tk-stop.now b{color:var(--ink)}
/* the bear: placed on the map by round (across) and lane (up); its size is the order */
.tk-bear{position:absolute;z-index:2;left:calc(9% + var(--x) * 84%);top:calc(54px + (1 - var(--y)) * (100% - 116px) + (100% - 116px) / 8);transform:translate(-50%,-100%);display:grid;justify-items:center;pointer-events:none}
.tk-bs{display:block;width:clamp(38px,15cqh,82px);transform-origin:50% 100%;transition:none}
.tk-bear .tk-bs{width:calc(clamp(38px,15cqh,82px) * var(--s))}
.tk-bear .td-bear{position:static;display:block;width:100%;height:auto;animation:tdIdle 2.8s ease-in-out infinite}
.tk-bear.inf .td-bear{animation:tdIdle 1.2s ease-in-out infinite}
.tk-tag{font:700 10px/1 var(--disp);text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--paper);border-radius:99px;padding:3px 8px 2px;margin-top:-4px;white-space:nowrap}
.tk-bear.inf .tk-tag{background:var(--accent);color:var(--accent-ink)}
.tk-dolly{position:absolute;bottom:14px;width:70%;height:6px;border-radius:4px;background:var(--ink);opacity:0}
.tk-bear.moving .tk-dolly{opacity:.8;animation:dolly .3s steps(2) 3}
@keyframes dolly{50%{transform:translateX(4px)}}
/* the receipt */
.tk-bill{min-height:0;display:flex;flex-direction:column;gap:8px;background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);padding:12px 14px;overflow:hidden;
 -webkit-mask:radial-gradient(circle at 0 64px,transparent 9px,#000 9.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 64px,transparent 9px,#000 9.5px) right/51% 100% no-repeat;
 mask:radial-gradient(circle at 0 64px,transparent 9px,#000 9.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 64px,transparent 9px,#000 9.5px) right/51% 100% no-repeat}
.tk-bill header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:2.5px dashed var(--ink)}
.tk-bill .k{font:700 11px/1 var(--disp);text-transform:uppercase;letter-spacing:.12em;color:var(--sub)}
.tk-tot{font:700 clamp(22px,2.6vw,34px)/1 var(--disp)}
.tk-tot small{font-size:.5em}
.tk-line{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tk-line b{display:block;font:700 14px/1.1 var(--disp)}.tk-line i{font-style:normal;font-size:11px;color:var(--sub)}.tk-line em{font:700 15px/1 var(--disp);font-style:normal}
.tk-adds{display:grid;grid-template-columns:1fr 1fr;gap:6px;min-height:0}
.tk-add{display:grid;gap:2px;text-align:left;background:var(--pa,var(--paper));color:var(--ink);border:2px solid var(--ink);border-radius:12px;padding:6px 9px 6px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;min-width:0;transition:transform .15s}
.tk-add.early{background:var(--pb,var(--paper))}
.tk-add .tk-k{font:700 9px/1 var(--disp);text-transform:uppercase;letter-spacing:.08em;color:var(--sub);display:flex;gap:5px;flex-wrap:wrap}
.tk-add .tk-k i{font-style:normal;background:var(--ink);color:var(--paper);border-radius:3px;padding:1px 4px 0}
.tk-add b{font:600 12.5px/1.15 var(--disp)}
.tk-add em{font:700 12px/1 var(--disp);font-style:normal;color:var(--accent);justify-self:start}
.tk-add.on{background:var(--accent);color:var(--accent-ink);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.tk-add.on .tk-k,.tk-add.on em{color:var(--accent-ink)}.tk-add.on .tk-k i{background:var(--accent-ink);color:var(--accent)}
@media (hover:hover){.tk-add:hover{transform:translate(-1px,-2px) rotate(-.6deg)}}
.tk-move{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border-radius:12px;padding:7px 9px}
.tk-move.locked{opacity:.55}
.tk-mk{font:700 11px/1 var(--disp);text-transform:uppercase;letter-spacing:.1em;background:var(--caution);color:var(--ink);border-radius:4px;padding:3px 6px 2px}
.tk-move p{font-size:12px;line-height:1.2;margin:0}
.tk-ma{display:flex;gap:5px}
.tk-move .btn[disabled]{opacity:.45;pointer-events:none}
.tk-bill footer{margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tk-bill footer small{font-size:10.5px;color:var(--sub)}
.tk-send{min-height:40px}
/* wide tablet and phone: the map over the receipt */
@media (max-width:1000px) and (min-height:561px){.tk{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,1fr) auto;gap:12px}}
@media (max-width:760px){.tk-bill{padding:9px 10px;gap:6px;-webkit-mask:none;mask:none}.tk-add{padding:5px 7px}.tk-add b{font-size:11.5px}.tk-move p{display:none}.tk-move{grid-template-columns:auto 1fr}.tk-ma{justify-self:end}
 .tk-stop b{display:none}.tk-stop.now b{display:block}.tk-lanes li span{font-size:9px}.tk-eta small{display:none}.tk-bill footer small{display:none}}
/* short frames (inside the monitor): side by side, compact receipt with three columns */
@media (max-height:560px){.tk{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px}.tk-map,.tk-bill{border-width:2px;border-radius:12px;box-shadow:3px 3px 0 var(--ink)}
 .tk-bill{padding:5px 7px;gap:4px;-webkit-mask:none;mask:none}.tk-bill header{padding-bottom:3px}.tk-tot{font-size:16px}.tk-line{display:none}
 .tk-adds{grid-template-columns:repeat(3,1fr);gap:3px}.tk-add{padding:2px 5px;border-width:1.5px;box-shadow:1px 1px 0 var(--ink);border-radius:7px}.tk-add .tk-k{display:none}.tk-add b{font-size:9.5px;line-height:1.05}.tk-add em{font-size:9px}
 .tk-move{padding:3px 5px;gap:4px}.tk-move p{display:none}.tk-mk{font-size:8.5px}.tk-move .btn{min-height:22px;font-size:10px;padding:1px 7px 0}
 .tk-bill footer small{display:none}.tk-send{min-height:24px;font-size:11px;padding:1px 10px 0}
 .tk-eta{top:5px;left:6px;padding:3px 8px 2px}.tk-eta small{display:none}.tk-lanes{top:28px;bottom:30px}.tk-road{bottom:14px;height:4px}.tk-stop i{width:9px;height:9px;border-width:2px}.tk-stop.now i{width:12px;height:12px}.tk-stop b{display:none}
 .tk-lanes li span{font-size:7.5px;bottom:1px;right:5px}.tk-bear{top:calc(28px + (1 - var(--y)) * (100% - 58px) + (100% - 58px) / 8)}.tk-tag{font-size:7.5px;padding:1px 5px 0}}
@media (prefers-reduced-motion:reduce){.tk-fill{transition:none}.tk-bear .td-bear{animation:none}}
body.trk #wires{display:none}
/* the bear stands in its lane (bottom of the band), above the road */
.tk-bear{top:calc(54px + (4 - var(--y) * 3) * (100% - 116px) / 4 - 6px)}
.tk-move{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.tk-move p{flex:1 1 110px}
.tk-ma{margin-left:auto}
@media (max-height:560px){.tk-bear{top:calc(28px + (4 - var(--y) * 3) * (100% - 58px) / 4 - 2px)}.tk-move{flex-wrap:nowrap}}
/* the bear stays inside the map at any size (its width and height known from the scale) */
.tk-bear{--bw:calc(clamp(38px,15cqh,82px) * var(--s));left:clamp(calc(var(--bw) / 2 + 10px),calc(9% + var(--x) * 84%),calc(100% - var(--bw) / 2 - 10px));
 top:max(calc(var(--bw) * 1.3 + 10px),calc(54px + (4 - var(--y) * 3) * (100% - 116px) / 4 - 6px))}
.tk-add,.tk-add b{white-space:normal;overflow-wrap:anywhere}
.tk-add{align-content:start}
/* phone while tracking: the road replaces the rounds rail and the composer steps aside, so map and receipt share the screen */
@media (max-width:760px){
 .m.trk{grid-template:'hud' auto 'field' minmax(0,1fr)/minmax(0,1fr)}
 .m.trk .rounds,.m.trk .deck{display:none}
 .tk{grid-template-rows:minmax(130px,1fr) auto}
 .tk-adds{grid-template-columns:repeat(3,1fr);gap:4px}
 .tk-add{padding:4px 6px;border-radius:9px}.tk-add .tk-k{display:none}.tk-add b{font-size:11px;line-height:1.1}.tk-add em{font-size:10.5px}
}
@media (max-width:760px) and (max-height:700px){.tk-line{display:none}.tk-bill header{padding-bottom:4px}.tk-tot{font-size:20px}.tk-send{min-height:32px}}
@media (max-height:560px){.tk-bear{top:max(calc(var(--bw) * 1.3 + 6px),calc(28px + (4 - var(--y) * 3) * (100% - 58px) / 4 - 2px))}}
.tk-tag{position:relative;z-index:1}
@media (max-width:760px){.tk{grid-template-rows:minmax(170px,1fr) auto}}

/* ================= round 13 (owner): point of sale. One till for every place money could change hands, in the cafe's own
   stationery: the credits ticket, price stubs, receipts, punch cards, the awning. Flourish by stakes (FX.sale): a pop, a stub
   that flies between the ticket and the thing, a stamp for orders and bookings. Theme tokens only; transform and opacity. */
#fx{z-index:85}
/* the price stub: a verb, a dashed perforation, the price */
.btn .pp{font:700 .84em/1 var(--disp);font-style:normal;padding:3px 0 1px 9px;margin-left:2px;border-left:2px dashed currentColor;white-space:nowrap}
.btn.sm .pp{padding-left:7px}
.mv small.pp{font:700 10.5px/1 var(--disp);opacity:1;justify-self:start;background:var(--pc);color:var(--ink);border-radius:999px;padding:2px 7px 1px;border:1.5px solid var(--ink)}
.mv.on small.pp{background:var(--paper)}
.mins .mv b{white-space:nowrap}
/* the stub in flight */
.fx-stub{position:fixed;display:block;padding:6px 12px 5px 18px;background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:9px;box-shadow:3px 3px 0 var(--ink);
 font:700 15px/1 var(--disp);white-space:nowrap;transform:translate(-50%,-50%);background-image:radial-gradient(circle at 7px 50%,var(--accent) 0 3.5px,transparent 4px),linear-gradient(90deg,transparent 12px,var(--ink) 12px 13.5px,transparent 13.5px);background-size:100% 100%,100% 6px;background-repeat:no-repeat,repeat-y}
/* receipts slide out under the credits ticket, like a till printing */
#toasts{top:62px;bottom:auto;right:14px}
.toast{border-width:2.5px;border-radius:4px 4px 12px 12px;border-top-style:dashed;animation:tdrop .34s var(--spring) both}
@keyframes tdrop{from{transform:translateY(-16px) scaleY(.7);opacity:0}}
#toasts .toast:nth-last-child(n+4){display:none}
.toast .st{background:var(--pc);color:var(--ink);border:1.5px solid var(--ink)}
@media (max-height:560px){#toasts{top:40px}.toast{font-size:11.5px;padding:4px 10px}}

/* the credits sheet: a punch card */
.credm .mbody{display:grid;gap:12px}
.cr-tk{display:flex;align-items:stretch;align-self:start;justify-self:start;border:var(--line);border-radius:14px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);transform:rotate(-1.5deg);background:var(--paper)}
@supports (corner-shape:scoop){.cr-tk{corner-shape:scoop}}
.cr-tk .crb{display:grid;place-items:center;min-width:2.2em;padding:8px 18px 4px;background:var(--accent);color:var(--accent-ink);font:700 46px/1 var(--disp);border-right:3px dashed var(--ink)}
.cr-tk>span{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px 18px 6px 14px}
.cr-tk em{font:700 16px/1 var(--disp);font-style:normal;letter-spacing:.16em;text-transform:uppercase}.cr-tk small{font-size:11px;color:var(--sub)}
.credm h3{font:600 15px/1.1 var(--disp);margin:0}
.cr-g{display:grid;gap:8px;background:var(--pa);border:2px solid var(--ink);border-radius:14px;padding:10px 12px}
.cr-g header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}.cr-g header small{font-size:12px;color:var(--sub)}
.cr-g>.btn{justify-self:start}
.gift{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.gd{display:grid;justify-items:center;gap:2px;text-align:center}
.gd i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--ink) 55%,transparent);background:var(--paper)}
.gd i .ico{width:16px;height:16px;color:var(--accent-ink)}
.gd b{font:700 13px/1 var(--disp)}.gd small{font-size:9.5px;color:var(--sub);white-space:nowrap}
.gd.claimed i{background:var(--accent);border:2px solid var(--ink)}
.gd.today i{border:3px solid var(--ink);background:var(--caution);box-shadow:0 0 0 3px color-mix(in srgb,var(--caution) 40%,transparent)}
.gd.today b,.gd.today small{color:var(--ink);font-weight:700}
.gd.missed{opacity:.45}.gd.missed i{border-style:solid}
.gd.big i{width:38px;height:38px}
.packs{list-style:none;display:grid;gap:6px;margin-top:6px}
.packs li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:10px 22px 10px 22px;padding:5px 8px 5px 12px;background:var(--paper);box-shadow:2px 3px 0 var(--ink)}
.packs b{font:700 17px/1 var(--disp)}.packs small{font-size:11.5px;color:var(--sub)}
.cr-m .kv{font-size:12.5px}
@media (max-height:620px){.cr-tk .crb{font-size:30px;padding:4px 12px 2px}.cr-m{display:none}.credm .mbody{gap:8px}.gd i{width:22px;height:22px}.gd.big i{width:26px;height:26px}.gd small{display:none}}
@media (max-width:420px){.gift{gap:3px}.gd i{width:24px;height:24px}.gd.big i{width:28px;height:28px}.gd small{font-size:8.5px}}

/* short on credits: the gap on a meter */
.gap{display:grid;gap:5px;margin:4px 0 8px}
.gp{display:block;height:16px;border:2.5px solid var(--ink);border-radius:999px;background:repeating-linear-gradient(-45deg,var(--paper) 0 6px,var(--pc) 6px 12px);overflow:hidden}
.gp i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--f));border-right:2.5px solid var(--ink)}
.gl{font-size:13px}.gl b{font:700 15px/1 var(--disp)}
.shortm .mod,.mod:has(.gap){width:min(470px,100%)}

/* the call: a receipt with Book right under the total */
.card.rcpt{background:var(--paper);color:var(--ink);box-shadow:7px 8px 0 var(--ink)}
.card.rcpt::after{content:'';position:absolute;left:24px;right:48px;top:-12px;height:22px;background:var(--awning);
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x}
.card.rcpt .k{color:var(--accent)}
.rl{list-style:none;display:grid;gap:0;margin:6px 0 2px;font-size:13px}
.rl li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0 4px;border-bottom:2px dashed color-mix(in srgb,var(--ink) 30%,transparent)}
.rl li:last-child{border-bottom:0}
.rl em{font:700 14px/1 var(--disp);font-style:normal;white-space:nowrap}.rl s{font-weight:600;opacity:.6;font-size:12px}
.card.hot .rl li{border-bottom-color:color-mix(in srgb,var(--accent-ink) 40%,transparent)}
.card .big s{font-size:.42em;font-weight:600;opacity:.7;vertical-align:middle}
.card.ask{background:var(--pc)}
.dk-book .pp{font-size:.8em}
@media (max-height:560px){.rl{font-size:11px;margin:2px 0}.rl li{padding:2px 0 1px}.rl em{font-size:12px}.card.rcpt .note{display:none}}

/* a locked room: a turnstile ticket at the top of the feed */
.gate{position:relative;display:grid;justify-items:start;gap:4px;margin:16px 4px 10px;padding:22px 18px 14px;background:var(--pb);border:var(--line);border-radius:16px;box-shadow:5px 6px 0 var(--ink)}
@supports (corner-shape:scoop){.gate{corner-shape:scoop}}
.gate::before{content:'';position:absolute;left:22px;right:22px;top:-11px;height:20px;background:var(--awning);
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x}
.gk{display:inline-flex;align-items:center;gap:5px;font:700 11px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);border-radius:999px;padding:4px 10px 3px 7px}
.gk .ico{width:13px;height:13px}
.gt{font:700 clamp(22px,2.4vw,32px)/1.05 var(--disp)}
.gate p{font-size:13.5px;font-weight:400;max-width:46ch}
.gate .acts{margin-top:4px}.gate .note{margin-top:2px}
.lkd .btn{margin-left:2px}
@media (max-height:560px){.gate{margin:10px 2px 6px;padding:14px 10px 8px;gap:2px}.gate p{display:none}.gt{font-size:17px}.gate .note{font-size:10px}}

/* shop: an order leaves a drafted mark on its ticket */
.it .stamp{position:absolute;right:14px;top:12px;z-index:1;background:var(--paper);color:var(--accent)}
.it.hot .stamp{color:var(--ink)}
.rung{display:grid;grid-template-columns:1fr auto auto;gap:12px}
.rung b small{display:block;font:600 11px/1.2 'Josefin Sans',sans-serif;color:var(--sub)}
.rung .go{display:inline-flex;align-items:center;gap:5px;font:600 13px/1 var(--disp);background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 11px 4px}.rung .go .ico{width:14px;height:14px}
.rung.fit{background:var(--pb);box-shadow:4px 5px 0 var(--accent)}

/* ask on air */
.askf{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:6px}
.askf textarea{grid-column:1/-1;font:400 15px/1.35 'Josefin Sans',sans-serif;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:12px;padding:10px 12px;resize:none;min-height:70px}
.amt{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--disp)}
.amt input{width:84px;font:700 17px/1 var(--disp);color:var(--ink);background:var(--pc);border:2.5px solid var(--ink);border-radius:10px;padding:6px 8px 4px}
.amt small{color:var(--sub);font-size:11.5px}
@media (max-height:560px){.askf textarea{min-height:40px;padding:5px 8px}.askm .fine{display:none}}

/* tracker: dollars, the bundle punch card, rush */
.tk-bill header{position:relative}
.tk-bill header .stamp{position:absolute;left:46%;top:-4px;color:var(--accent);background:var(--paper);font-size:12px}
.tk-perks{display:flex;gap:6px;align-items:stretch}
.tk-bund{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:2px dashed var(--ink);border-radius:10px;padding:4px 8px}
.tk-bund .bh{display:flex;gap:4px;flex:none}
.tk-bund .bh i{width:13px;height:13px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--ink) 60%,transparent);background:var(--paper)}
.tk-bund .bh i.p{background:var(--accent);border:2px solid var(--ink)}
.tk-bund p{font-size:11.5px;line-height:1.15;margin:0}
.tk-bund.on{border-style:solid;background:var(--pc);box-shadow:2px 2px 0 var(--ink)}
.tk-rush{flex:none;display:grid;justify-items:center;align-content:center;gap:2px;border:2px solid var(--ink);border-radius:10px;padding:4px 10px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);cursor:pointer}
.tk-rush b{font:700 12.5px/1 var(--disp);text-transform:uppercase;letter-spacing:.08em}.tk-rush em{font:700 12px/1 var(--disp);font-style:normal;color:var(--accent)}
.tk-rush.on{background:var(--accent);color:var(--accent-ink)}.tk-rush.on em{color:var(--accent-ink)}
@media (hover:hover){.tk-rush:hover{transform:translate(-1px,-2px) rotate(-.8deg)}}
.tk-map.rush .tk-eta small{opacity:1;color:var(--caution)}
.tk-bear.rush::before{content:'';position:absolute;right:100%;top:30%;width:34px;height:40%;margin-right:-4px;opacity:.75;
 background:linear-gradient(var(--ink) 0 0) 0 0/100% 3px no-repeat,linear-gradient(var(--ink) 0 0) 10px 50%/70% 3px no-repeat,linear-gradient(var(--ink) 0 0) 4px 100%/85% 3px no-repeat}
.tk-bear.rush .tk-tag{background:var(--caution);color:var(--ink)}
@media (max-width:760px){.tk-bund p{font-size:10.5px}.tk-rush{padding:3px 7px}}
@media (max-height:560px){.tk-perks{gap:4px}.tk-bund{padding:1px 5px;gap:5px;border-width:1.5px}.tk-bund .bh i{width:8px;height:8px;border-width:1.5px}.tk-bund p{font-size:9px}
 .tk-rush{padding:1px 6px;border-width:1.5px;box-shadow:1px 1px 0 var(--ink);grid-auto-flow:column;gap:5px}.tk-rush b{font-size:9px}.tk-rush em{font-size:9px}.tk-bill header .stamp{font-size:9px;padding:0 5px}}

/* ================= POS round 2 (owner): the call window, the rooms bubble, the support bar */
/* the call: one window, centered, nothing else in the way */
.m.m-call{grid-template:'hud' auto 'field' minmax(0,1fr)/minmax(0,1fr)}
.m.m-call .wall,.m.m-call .deck{display:none}
.m.m-call .field{display:grid;grid-template:none;place-items:center;transform:none;transform-style:flat;padding:6px 4px 10px;overflow:hidden}
.m.m-call .field::before,.m.m-call .field::after{display:none}
.cw{position:relative;width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;gap:14px;background:var(--paper);color:var(--ink);border:var(--line);border-radius:28px;box-shadow:9px 10px 0 var(--ink);padding:30px 26px 18px;overflow:hidden}
@supports (corner-shape:scoop){.cw{corner-shape:scoop;border-radius:24px}}
.cw::before{content:'';position:absolute;left:0;right:0;top:0;height:22px;background:var(--awning);
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,radial-gradient(circle at 9px 0,#000 8.5px,transparent 9px) bottom/18px 9px repeat-x}
.cw-h{display:flex;align-items:center;gap:16px;min-width:0}
.cw-ic{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--pb);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.cw-ic .em{width:56px;height:56px}
.cw-h b{display:block;font:700 clamp(28px,4vw,44px)/1 var(--disp)}
.cw-h small{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);margin-top:4px}.cw-h .live{width:9px;height:9px}
.cw-b{display:grid;gap:12px;min-height:0}
.cw .mins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cw .mins .mv{display:grid;justify-items:center;grid-template-columns:none;padding:8px 4px 6px;transform:none;box-shadow:0 4px 0 var(--pb);border-radius:14px}
.cw .mins .mv>*{transform:none}.cw .mins .mv b{font:700 24px/1 var(--disp)}.cw .mins .mv small{font-size:11px}
.cw .mins .mv.on{box-shadow:0 4px 0 var(--ink)}
.cw-a{display:flex}.cw-a .btn{flex:1}
.cw-l{font-size:14px;font-weight:600;background:var(--pc);border:2px dashed var(--ink);border-radius:10px;padding:7px 10px 5px;margin:0}
.cw .note{margin:0}
.cw-v{display:grid;gap:10px}.cw-v .voice .em{height:64px}.cw-v .big{font:700 34px/1 var(--disp)}.cw-v h3{font:600 16px/1.2 var(--disp)}.cw-v p{font-size:13px;color:var(--sub)}
.cw-ic.talk .dots2 rect{animation:mouth .26s ease-in-out infinite alternate}.cw-ic.talk .dots2 rect:nth-child(2){animation-delay:.09s}.cw-ic.talk .dots2 rect:nth-child(3){animation-delay:.18s}
@media (max-height:600px){.cw{padding:20px 16px 10px;gap:8px;border-radius:18px;box-shadow:5px 6px 0 var(--ink)}.cw::before{height:14px}.cw-ic{width:52px;height:52px}.cw-ic .em{width:34px;height:34px}.cw-h b{font-size:24px}
 .cw .mins .mv{padding:4px 2px 3px}.cw .mins .mv b{font-size:17px}.cw-b{gap:7px}.cw .btn.big{min-height:38px;font-size:16px}.cw-l{font-size:12px;padding:4px 8px 3px}}
@media (max-height:440px){.cw{flex-direction:row;align-items:center;width:min(760px,100%);padding:16px 14px 8px;gap:12px}.cw-h{flex-direction:column;align-items:flex-start;gap:6px;flex:none;max-width:34%}.cw-h .k{display:none}
 .cw-b{flex:1;min-width:0}.cw .note{font-size:10.5px}}
@media (max-height:300px){.cw{padding:10px 10px 5px}.cw::before{height:8px}.cw-ic{display:none}.cw-h b{font-size:18px}.cw-h small{font-size:10.5px;margin:0}.cw .mins .mv b{font-size:14px}.cw .mins .mv small{display:none}
 .cw .btn.big{min-height:28px;font-size:13px}.cw .note{font-size:9.5px}.cw-l{font-size:10.5px}.cw-b{gap:5px}.cw-v .voice .em{display:none}.cw-v .big{font-size:20px}}

/* the rooms bubble: compact screens only, in place of the rail */
.rmb{display:none;flex:none;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer}
.rmb .ico{width:26px;height:26px}.rmb .ico.chat .bub{fill:var(--paper);stroke:var(--ink)}.rmb .ico.chat .dots rect{fill:var(--ink)}
@media (hover:hover){.rmb:hover{transform:translate(-1px,-2px) rotate(-6deg)}}
@media (max-width:760px),(max-height:460px){
 .sel .more{display:none}.sel .rmb{display:grid}
 .m-chat .deck{position:relative;padding-left:46px}
 .m-chat .deck .rmb{display:grid;position:absolute;left:-6px;top:50%;margin-top:-26px;width:52px;height:52px;z-index:2}
}
@media (max-height:460px){.sel .rmb{width:32px;height:32px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}.sel .rmb .ico{width:18px;height:18px}
 .m-chat .deck .rmb{width:38px;height:38px;margin-top:-19px;left:-4px;border-width:2px}.m-chat .deck{padding-left:36px}}
/* rooms as a filter list */
.rlm .mod{width:min(440px,100%)}
.rlist{display:grid;gap:10px;margin-top:6px}
.rg{border:0;display:grid;gap:5px}
.rg legend{font:700 11px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--paper);border-radius:999px;padding:4px 10px 3px;margin-bottom:5px}
.rr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;padding:8px 10px 7px 14px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:2px 3px 0 var(--ink);text-align:left}
.rr b{font:600 15px/1.1 var(--disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rr small{font:600 11.5px/1 var(--disp);color:var(--sub);white-space:nowrap}
.rr .sw{position:relative;width:36px;height:20px;border-radius:999px;border:2px solid var(--ink);background:var(--pa)}
.rr .sw::after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ink);transition:transform .2s var(--spring)}
.rr.on .sw{background:var(--accent)}.rr.on .sw::after{transform:translateX(16px);background:var(--paper);box-shadow:0 0 0 1.5px var(--ink)}
.rr.cur{background:var(--pb)}
@media (hover:hover){.rr:hover{transform:translate(-1px,-1px);box-shadow:3px 4px 0 var(--ink)}}
@media (max-height:560px){.rr{padding:4px 8px 3px 10px}.rr b{font-size:13px}.rlist{gap:6px}}

/* the support bar beside the composer */
.sup{display:flex;gap:8px;flex:none}
.supb{min-height:42px;border-color:var(--paper)}
.supb.badge{display:inline-flex;align-items:center;gap:4px;min-height:0;padding:5px 10px 4px;border-radius:999px;background:var(--caution);color:var(--ink);border:2.5px solid var(--paper);font:700 13px/1 var(--disp);cursor:pointer;box-shadow:2px 2px 0 var(--accent)}
.supb.badge .ico{width:15px;height:15px}.supb.badge.plus{background:var(--accent);color:var(--accent-ink)}
@media (max-width:760px){.m-chat .deck{flex-wrap:wrap}.m-chat .sup{order:-1;width:100%}.m-chat .sup .btn{flex:1;min-height:34px;font-size:14px}.m-chat .sup .badge{flex:none}
 .m-chat .say{min-width:0;flex:1 1 100%}}
@media (max-height:560px){.supb{min-height:28px;font-size:12px;padding:2px 10px 0}.supb .ico{width:14px;height:14px}.m-chat .deck{flex-wrap:nowrap}.m-chat .sup{order:0;width:auto}.m-chat .say{flex:1 1 auto}}
@media (max-height:300px){.sup .btn span{gap:4px}.sup .subs .ico,.sup .gift .ico{display:none}.supb{min-height:22px;font-size:11px;padding:1px 7px 0}}

/* gift and perks */
.giftm .mod,.perkm .mod{width:min(470px,100%)}
.giftm .mbody{display:grid;gap:9px}
.gfr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.gl2{font:700 12px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;min-width:72px}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.seg button,.ppl button{font:600 13px/1 var(--disp);padding:6px 11px 5px}.seg button.on{background:var(--ink);color:var(--paper)}
.ppl{display:flex;flex-wrap:wrap;gap:5px}.ppl button{border:2px solid var(--ink);border-radius:999px;background:var(--paper)}.ppl button.on{background:var(--accent);color:var(--accent-ink)}
.stp{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:999px;background:var(--pc);margin-left:auto}
.stp button{width:32px;height:30px;font:700 18px/1 var(--disp)}.stp b{min-width:74px;text-align:center;font:700 14px/1 var(--disp)}
.tgl{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;width:100%;border:2px solid var(--ink);border-radius:12px;padding:6px 10px 5px;background:var(--paper);text-align:left}
.tgl b{display:block;font:600 14px/1.1 var(--disp)}.tgl small{font-size:11px;color:var(--sub)}
.tgl .sw{position:relative;width:38px;height:22px;border-radius:999px;border:2px solid var(--ink);background:var(--pa)}
.tgl .sw::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--ink);transition:transform .2s var(--spring)}
.tgl.on{background:var(--pb)}.tgl.on .sw{background:var(--accent)}.tgl.on .sw::after{transform:translateX(16px);background:var(--paper)}
.gmsg{font:400 14px/1.3 'Josefin Sans',sans-serif;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:7px 10px 5px;width:100%}
.gtot{display:flex;align-items:baseline;gap:10px;border-top:2.5px dashed var(--ink);padding-top:8px}.gtot span{font:700 12px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase}
.gtot b{font:700 30px/1 var(--disp)}.tier{margin-left:auto;font:700 11px/1 var(--disp);border:2px solid var(--ink);border-radius:999px;padding:4px 9px 3px;background:var(--paper)}
.tier.tM{background:var(--pc)}.tier.tB{background:var(--accent);color:var(--accent-ink)}
.perks{list-style:none;display:grid;gap:6px;margin:6px 0}.perks li{display:grid;border:2px solid var(--ink);border-radius:10px 20px;padding:7px 12px 5px;background:var(--pa)}.perks b{font:600 15px/1.1 var(--disp)}.perks small{font-size:12px;color:var(--sub)}
@media (max-height:560px){.giftm .mbody{gap:5px}.tgl{padding:3px 8px 2px}.tgl small{display:none}.gtot b{font-size:20px}.stp button{height:24px;width:26px}.seg button,.ppl button{padding:4px 8px 3px;font-size:11.5px}.perks li{padding:3px 10px 2px}.perks small{display:none}}
/* the receipt never squeezes its additions into the rows below them */
@media (min-height:561px){.tk-adds{flex:none}}
@media (max-height:820px){.tk-add .tk-k{display:none}.tk-bill{gap:6px}}
.mod>.mbody>.k:first-child{padding-right:44px}
@media (max-height:560px){.tk-add{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px}.tk-add b{white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}.tk-adds{flex:none}}
@media (max-height:300px){.tk-bill{position:relative}.tk-perks{position:absolute;left:96px;top:6px;z-index:2}.tk-bund{padding:1px 4px}.tk-bund p{display:none}.tk-bill{gap:3px}.tk-move{padding:2px 5px}.tk-ma .btn{min-height:18px}.tk-send{min-height:22px}}
@media (max-height:300px){.tk-bill header{padding-bottom:2px}.tk-adds{gap:2px}.toast{font-size:10.5px;padding:3px 8px}#toasts{top:34px}}
/* the tracker shares its class name with the stage ticker; it must never inherit the ticker's sideways crawl */
.field>.tk{animation:none;white-space:normal}
@media (max-height:560px){.field>.tk{grid-template-rows:minmax(0,1fr)}}
@media (max-height:460px){.m-chat .lane .card h3,.cl-card p,.m-chat .lane .card .big s{display:none}.m-chat .lane{gap:10px}.m-chat .lane .card{padding-top:10px;padding-bottom:8px}}
@media (max-height:300px){.send .ico{display:block;width:16px;height:16px}}
@media (min-width:761px){.sup .supb{flex:none;max-width:190px}}

/* ================= POS round 3 (owner): availability, the call over time, members and perks, the gift counter, show-off in place */
/* level of detail: while one thing shows off, everything around it steps down (opacity only) */
body.lod .m>*:not(.lodf):not(:has(.lodf)),body.lod .field>*:not(.lodf):not(:has(.lodf)),body.lod .room>*:not(.lodf):not(:has(.lodf)),
body.lod .feed>*:not(.lodf):not(:has(.lodf)),body.lod .lane>*:not(.lodf):not(:has(.lodf)),body.lod .deck>*:not(.lodf):not(:has(.lodf)){opacity:.22;transition:opacity .3s}

/* her status: a pill with a dot, and a boop */
.avp{display:inline-flex;align-items:center;gap:6px;margin-top:5px;padding:3px 4px 3px 9px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-size:12px;max-width:100%}
.avp .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink);flex:none}
.avp b{font:700 13px/1 var(--disp)}.avp small{color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.av-call .dot,.av-busy .dot{background:var(--caution)}.av-closed .dot{background:var(--paper)}
.boop{flex:none;font:700 11px/1 var(--disp);background:var(--ink);color:var(--paper);border-radius:999px;padding:4px 9px 3px}.boop[disabled]{opacity:.55}
/* the schedule, in place */
.sch{display:grid;gap:9px}.sch-w{font-size:14px;margin:0}.sch-w b{font-family:var(--disp)}
.slots{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:7px}
.slot{display:grid;justify-items:center;gap:2px;width:100%;padding:7px 4px 6px;border:2px solid var(--ink);border-radius:10px 18px;background:var(--pa);box-shadow:2px 3px 0 var(--ink);font:600 12px/1 var(--disp)}
.slot b{font:700 11px/1 var(--disp);text-transform:uppercase;letter-spacing:.08em}.slot span{font-size:15px}
.slot.on{background:var(--accent);color:var(--accent-ink)}.slot.me{background:var(--pc);border-style:dashed}
.hrs{font-size:12px;margin:0;color:var(--sub)}.hrs b{color:var(--ink);font-family:var(--disp)}
.cw-a{gap:8px}
/* the call after the intro: ink instead of the coupon pink, and the rate on the ticket */
.cw.reg::before{background:repeating-linear-gradient(90deg,var(--ink) 0 18px,var(--paper) 18px 36px)}
.cl-card.reg{background:var(--ink);color:var(--paper)}.cl-card.reg .k,.cl-card.reg p{color:color-mix(in srgb,var(--paper) 75%,transparent)}.cl-card.reg .big small{font-size:.45em}
.cl-card.reg .btn.lit{background:var(--paper);color:var(--ink)}
.neon.reg .n2{color:var(--paper)}.nv-call .n1,.nv-busy .n1,.nv-closed .n1{color:var(--caution);border-color:var(--caution)}
.cl-card.flip,.pv-hot.flip,.cw.flip{animation:flipIn .6s cubic-bezier(.2,1.3,.4,1)}
@keyframes flipIn{from{transform:rotateY(80deg) scale(.9);opacity:.3}}
.cw-v.end .acts .btn.big{flex:1}
@media (max-height:600px){.slot{padding:4px 3px}.slot span{font-size:13px}.sch{gap:6px}}
@media (max-height:300px){.avp small,.hrs{display:none}.avp{margin-top:2px;font-size:10px;padding:1px 2px 1px 6px}.avp b{font-size:11px}.boop{padding:2px 6px}.slots{grid-template-columns:repeat(4,1fr);gap:4px}.slot{padding:2px}.slot b{font-size:8.5px}.slot span{font-size:11px}.sch-w{font-size:11px}}

/* the deck: perks button, Join, the member badge */
.pkb{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--pc);color:var(--ink);border:2.5px solid var(--paper);box-shadow:2px 2px 0 var(--accent);cursor:pointer}
.pkb .ico{width:20px;height:20px}
.supb .ico.ted,.mtk .ico.ted{width:18px;height:18px}
.sup.wide{flex:1 1 auto;min-width:0}
.mtk{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:5px 12px;border-radius:12px;background:var(--caution);color:var(--ink);border:2.5px solid var(--paper);transform-origin:right center}
.mtk b{font:700 16px/1 var(--disp);text-transform:uppercase;letter-spacing:.12em}.mtk small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.supb.join .pp{font-size:.78em}
@media (max-height:300px){.pkb{width:26px;height:26px;border-width:2px}.pkb .ico{width:14px;height:14px}}

/* the dock: perks and the gift counter rise out of the composer, in place */
.m-chat .deck{position:relative}
.dk{position:absolute;left:10px;right:10px;bottom:calc(100% + 8px);z-index:6;max-height:min(360px,calc(100vh - 150px));display:flex;flex-direction:column;transform-origin:50% 100%}
.dk>div{display:flex;flex-direction:column;min-height:0;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);overflow:hidden}
.dk-h{display:flex;align-items:center;gap:10px;padding:8px 8px 6px 14px;border-bottom:2.5px dashed var(--ink);flex:none}
.dk-h b{font:700 16px/1 var(--disp)}.dk-h small{font-size:11px;color:var(--sub);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-x{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);flex:none}.dk-x .ico{width:16px;height:16px}
.dk-h.awn{position:relative;padding-top:18px;border-bottom-style:solid}
.dk-h.awn::before{content:'';position:absolute;left:0;right:0;top:0;height:14px;background:var(--awning);-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,radial-gradient(circle at 7px 0,#000 6.5px,transparent 7px) bottom/14px 7px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,radial-gradient(circle at 7px 0,#000 6.5px,transparent 7px) bottom/14px 7px repeat-x}
/* perks: tickets with their own look */
.pks{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:7px;padding:9px;min-height:0;overflow:hidden}
.pk{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:7px;align-items:center;text-align:left;padding:6px 8px 6px 7px;border:2px solid var(--ink);border-radius:10px 18px;background:var(--paper);box-shadow:2px 3px 0 var(--ink)}
.pk .pk-s{grid-row:1/4;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--pa);border:2px solid var(--ink)}.pk .pk-s .ico{width:17px;height:17px}
.pk b{font:600 13.5px/1.1 var(--disp)}.pk small{font-size:10.5px;color:var(--sub);line-height:1.15}.pk em{font:700 11px/1 var(--disp);font-style:normal;color:var(--accent);margin-top:2px}
.pk.on{background:var(--accent);color:var(--accent-ink)}.pk.on small,.pk.on em{color:var(--accent-ink)}
.pk.lockd{opacity:.6;border-style:dashed}
.pk-paint b{background:linear-gradient(90deg,var(--accent),var(--title-b),var(--caution));-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-paint.on b{background:none;color:var(--accent-ink)}
.pk-hi .pk-s{background:var(--awning)}.pk-cheer .pk-s{background:var(--pc)}.pk-tts .pk-s{background:var(--pb)}
@media (hover:hover){.pk:hover{transform:translate(-1px,-2px) rotate(-.6deg)}}
@media (max-height:460px){.dk-h{padding:4px 6px 3px 10px}.dk-h b{font-size:13px}.dk-x{width:24px;height:24px}.pks{grid-template-columns:repeat(3,1fr);gap:4px;padding:5px}.pk{padding:3px 5px;column-gap:4px}.pk small{display:none}.pk .pk-s{width:20px;height:20px}.pk .pk-s .ico{width:12px;height:12px}.pk b{font-size:11.5px}.pk em{font-size:9.5px}.dk-h.awn{padding-top:12px}.dk-h.awn::before{height:10px}}
@media (max-height:300px){.dk{bottom:calc(100% + 3px)}.dk-h small{display:none}.pks{grid-template-columns:repeat(6,1fr)}.pk .pk-s{display:none}.pk{grid-template-columns:1fr;padding:2px 4px}.pk b{font-size:10px}}

/* the gift counter */
.gc-t{display:flex;gap:6px;padding:8px 10px 0;flex:none}
.gc-t button{font:600 13px/1 var(--disp);padding:6px 12px 5px;border:2px solid var(--ink);border-bottom:0;border-radius:10px 10px 0 0;background:var(--pa)}
.gc-t button.on{background:var(--paper);box-shadow:0 3px 0 var(--paper);position:relative;z-index:1}
.gc-b{border-top:2px solid var(--ink);padding:10px;min-height:0;overflow:hidden}
.gc-tip{display:flex;gap:12px;align-items:center}
.jar{position:relative;flex:none;display:grid;place-items:end center;width:64px;height:76px;border:3px solid var(--ink);border-top-width:5px;border-radius:10px 10px 22px 22px;background:var(--paper);overflow:hidden;color:var(--ink)}
.jar .jf{position:absolute;left:0;right:0;bottom:0;height:100%;background:repeating-linear-gradient(-45deg,var(--caution) 0 6px,var(--pc) 6px 12px);transform-origin:50% 100%;transform:scaleY(var(--f));transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.jar .ico{position:relative;width:34px;height:34px;margin-bottom:8px}
.gc-c{flex:1;min-width:0;display:grid;gap:7px}.gc-c .stp{margin-left:0;justify-self:start}
.note2{position:relative;display:block}.note2 .crum{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);pointer-events:none}
.note2 input,.note2 textarea{position:relative;width:100%;background:transparent;border:0;font:400 14px/1.3 'Josefin Sans',sans-serif;color:var(--ink);padding:8px 12px 6px;resize:none}
.gc-subs{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tix{display:flex;flex:1;min-width:60px;height:26px;position:relative}
.tix i{position:absolute;left:calc(var(--k) * 12px);top:2px;width:30px;height:20px;border:2px solid var(--ink);border-radius:4px;background:var(--pb);transform:rotate(calc(var(--k) * 4deg - 8deg));box-shadow:1px 1px 0 var(--ink)}
.gc-spot{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.spt{display:grid;gap:3px;padding:8px 10px;border:2px solid var(--ink);border-radius:12px;background:var(--pa)}.spt b{font:700 15px/1 var(--disp)}.spt small{font-size:11px;color:var(--sub)}
.spt-marq{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 7px var(--caution)}.spt-marq small{color:color-mix(in srgb,var(--paper) 75%,transparent)}
.spt-gopen{background:var(--pb)}
.spa{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.gc-f{display:flex;align-items:center;gap:10px;padding:7px 10px;border-top:2.5px dashed var(--ink);flex:none}
.gt2{display:flex;align-items:baseline;gap:7px;flex:1;min-width:0}.gt2 small{font:700 11px/1 var(--disp);text-transform:uppercase;letter-spacing:.1em}.gt2 b{font:700 24px/1 var(--disp)}
.gt2 .tier{margin:0;font-style:normal}
@media (max-width:420px){.jar{width:50px;height:60px}.gc-t button{padding:5px 9px 4px;font-size:12px}}
@media (max-height:460px){.gc-t{padding:4px 6px 0}.gc-t button{padding:3px 9px 2px;font-size:11.5px}.gc-b{padding:5px 8px}.jar{width:40px;height:46px;border-width:2px;border-top-width:3px}.jar .ico{width:22px;height:22px;margin-bottom:3px}.gc-c{gap:4px}
 .note2 input{padding:4px 8px 3px;font-size:12px}.gc-f{padding:3px 8px}.gt2 b{font-size:17px}.gc-f .btn{min-height:28px}.spt{padding:4px 7px}.spt small{display:none}.tgl small{display:none}.tgl{padding:2px 8px}}
@media (max-height:300px){.gc-tip{gap:6px}.jar{display:none}.gc-c{grid-template-columns:auto 1fr auto;align-items:center}.gc-t button{padding:2px 7px 1px;font-size:10px}.gc-b{padding:3px 6px}.gc-f .btn{min-height:22px;font-size:11px}.gt2 b{font-size:14px}.gt2 small{display:none}.spt b{font-size:12px}.gc-spot{gap:4px}}

/* the rush meter in the room header, and the header opening up in place */
.rush{display:inline-flex;align-items:center;gap:5px;flex:none;padding:2px 7px 2px 3px;border:2px solid var(--ink);border-radius:999px;background:var(--paper)}
.rush i{position:relative;width:46px;height:10px;border-radius:99px;background:var(--pa);overflow:hidden;border:1.5px solid var(--ink)}
.rush i::after{content:'';position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--v));transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
.rush b{font:700 11px/1 var(--disp)}
.rh{position:relative}
.hyp{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 12px 6px;background:var(--accent);color:var(--accent-ink);animation:hypIn .5s cubic-bezier(.2,1.3,.4,1) both;overflow:hidden}
.hyp .aw{position:absolute;left:0;right:0;top:0;height:14px;background:var(--awning-soft);-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,radial-gradient(circle at 7px 0,#000 6.5px,transparent 7px) bottom/14px 7px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,radial-gradient(circle at 7px 0,#000 6.5px,transparent 7px) bottom/14px 7px repeat-x;transform-origin:0 0;animation:awn .6s ease-out both}
.hyp b{font:700 clamp(18px,2.6vw,30px)/1 var(--disp)}.hyp small{font-size:13px;font-weight:700}
.hyp.marq{background:var(--ink);color:var(--caution);box-shadow:inset 0 0 0 5px var(--ink),inset 0 0 0 8px var(--caution)}.hyp.marq b{letter-spacing:.14em;text-transform:uppercase}.hyp.marq small{color:var(--paper)}
.hyp.gopen,.hyp.big{background:var(--caution);color:var(--ink)}.hyp.raid{background:var(--title-a);color:var(--title-ink)}
.rh.up{z-index:3}
@keyframes hypIn{from{transform:scaleY(.2);opacity:0}}
@keyframes awn{from{transform:scaleX(0)}}
@media (max-width:760px){.rush i{width:30px}.hyp small{display:none}}
@media (max-height:300px){.rush{display:none}.hyp{padding:8px 6px 2px}.hyp small{display:none}}

/* perk lines in the feed */
.nm.paint{background:linear-gradient(90deg,var(--accent),var(--title-b) 55%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.nm .ico.ted{width:14px;height:14px;vertical-align:-2px;margin-right:4px;color:var(--accent)}
.ln.pk-hi .bb{background:var(--pc);border-width:3px;box-shadow:4px 4px 0 var(--accent);position:relative;padding-top:16px}
.ln.pk-hi .bb::before{content:'';position:absolute;left:10px;right:10px;top:0;height:9px;background:var(--awning);-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 4px) no-repeat,radial-gradient(circle at 5px 0,#000 4.5px,transparent 5px) bottom/10px 5px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 4px) no-repeat,radial-gradient(circle at 5px 0,#000 4.5px,transparent 5px) bottom/10px 5px repeat-x}
.bigt{display:block;width:clamp(70px,14vh,130px);transform-origin:50% 80%}.bigt .td-bear{position:static;display:block;width:100%;height:auto}
.chr{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font:700 11px/1 var(--disp);font-style:normal;background:var(--caution);color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:3px 8px 2px}.chr .ico{width:12px;height:12px}
.spk{display:flex;align-items:center;gap:6px;margin-top:5px;font:600 11px/1.2 var(--disp);font-style:normal;color:var(--sub)}.spk .ico{width:18px;height:18px;color:var(--accent);flex:none}
.spk .w1,.spk .w2,.spk2 .w1,.spk2 .w2{animation:wave .7s ease-in-out 4 alternate}.spk .w2,.spk2 .w2{animation-delay:.2s}
@keyframes wave{from{opacity:.15}to{opacity:1}}
/* a gift card: crumpled paper under an awning stub */
.ln.gft .bb{position:relative;overflow:hidden;background:var(--paper);padding-top:14px;border-color:var(--ink)}
.ln.gft .bb .crum{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ln.gft .bb>*:not(.crum){position:relative;z-index:1}
.gl3{display:flex;align-items:center;gap:6px;font:700 15px/1.2 var(--disp)}.gl3 .ico{width:18px;height:18px;color:var(--accent)}
.gn{font-style:italic}.gt3{display:block;font-size:10px;color:var(--sub)}
/* read aloud on the stage: the ticket opens in place */
.card.ask.open,.card.ask.play{background:var(--paper);gap:6px}
.card.ask .askf{grid-template-columns:1fr auto;gap:8px;margin:0}.card.ask .note2{grid-column:1/-1}.card.ask textarea{min-height:52px}
.spk2{display:block;width:44px;height:44px;color:var(--accent)}.spk2 .ico{width:100%;height:100%}
@media (max-height:600px){.card.ask textarea{min-height:30px}.card.ask .fine{font-size:10.5px}}
@media (prefers-reduced-motion:reduce){body.lod *{transition:none!important}}
.ln.gft .bb,.ln.gft .bb .nm{color:var(--ink)}
.note2 .crum{opacity:.85}
.hyp{inset:0 0 -46px 0;transform-origin:50% 0;border-bottom:3px solid var(--ink);border-radius:0 0 22px 22px}
.hyp.marq b{font-size:clamp(22px,3.4vw,40px)}
@media (max-height:460px){.hyp{bottom:-22px}}
.ln.me .spk{color:inherit;opacity:.9}.ln.me .spk .ico{color:inherit}
@media (max-width:760px){.m-chat .say{flex:1 1 calc(100% - 54px)}.m-chat .pkb{order:1}.m-chat .say{order:2}}
.avp b{white-space:nowrap}
@media (max-width:420px){.avp small{max-width:9em}}
.cw-v .acts .btn{max-width:100%;white-space:normal}
@media (max-width:480px){.cw-v .acts{flex-direction:column;align-items:stretch}.cw-v .btn.big{font-size:16px;min-height:44px;padding:4px 14px 2px}}
.lane:has(.card.ask.open) .cl-card,.lane:has(.card.ask.play) .cl-card{display:none}
@media (max-height:460px){.card.ask .fine{display:none}.card.ask textarea{min-height:24px;font-size:12px}.card.ask .note2 textarea{padding:4px 8px}}
.dk{opacity:1!important}
.ln.gft .bb{isolation:isolate}
@media (max-height:300px){.dk{max-height:calc(100vh - 96px);left:4px;right:4px}}
@media (max-height:560px){.m-chat .sup .supb{flex:none}}
@media (max-height:560px){.m-chat .sup .supb{max-width:130px}}
@media (max-height:300px){.dk{max-height:calc(100vh - 104px)}
 .dk>div{border-width:2px;border-radius:10px;box-shadow:3px 3px 0 var(--ink)}
 .dk-h.awn{padding-top:2px}.dk-h.awn::before{display:none}.dk-h{padding:1px 3px 1px 8px;gap:6px}.dk-h b{font-size:11px}.dk-x{width:18px;height:18px;border-width:1.5px}.dk-x .ico{width:11px;height:11px}
 .gc-t{padding:2px 6px 0;gap:4px}.gc-t button{padding:1px 6px 0;font-size:9.5px;border-width:1.5px}
 .gc-b{flex:1 1 auto;padding:2px 6px;border-top-width:1.5px}.gc-c{gap:4px}.gc-c .stp button{height:18px;width:20px;font-size:13px}.gc-c .stp b{min-width:40px;font-size:11px}
 .note2 input{padding:1px 6px;font-size:10.5px}.note2 .crum{display:none}.note2{border:1.5px dashed var(--ink);border-radius:6px}
 .tgl{padding:0 6px;border-width:1.5px}.tgl b{font-size:10.5px}.tgl .sw{width:26px;height:15px}.tgl .sw::after{width:9px;height:9px}.tgl.on .sw::after{transform:translateX(11px)}
 .gc-f{padding:1px 6px;border-top-width:1.5px}.gc-f .btn{min-height:18px;font-size:10px;padding:0 8px}.gt2 b{font-size:12px}.tier{font-size:8.5px;padding:1px 5px}
 .gc-subs{gap:4px}.seg button,.ppl button{padding:1px 6px;font-size:9.5px}.tix{display:none}.gc-spot{grid-template-columns:1fr 1fr}.spt{padding:2px 5px}.spa .btn{min-height:16px;font-size:9px;padding:0 6px}}

/* ================= POS round 4: one notice at a time in the header's title slot; crisp subjects; schedule line; extend blocks */
#toasts{display:none}
.ntc{display:none}
.ntc-on>.ntc{display:flex;flex:1 1 0;min-width:0;align-items:center}
.ntc-on>.hn,.ntc-on>.crumb,.ntc-on>.keys,.ntc-on>.sp{display:none}
.ntc>span{display:block;max-width:100%;padding:5px 12px 4px;background:var(--paper);color:var(--ink);border:2px dashed var(--ink);border-radius:4px 4px 12px 12px;box-shadow:3px 3px 0 var(--ink);font:600 12.5px/1.25 var(--disp);overflow-wrap:anywhere}
.ntc .st{font-style:normal;display:inline-block;margin-left:6px;padding:0 6px;background:var(--pc);color:var(--ink);border:1.5px solid var(--ink);border-radius:99px;font-size:10.5px}
.hud .ntc{flex:2 1 0}
@media (max-width:420px){.ntc>span{font-size:11px;padding:3px 8px 2px}}
@media (max-height:300px){.ntc>span{font-size:10px;padding:1px 6px 0;border-width:1.5px;box-shadow:2px 2px 0 var(--ink)}}
/* the subject of a show-off stays at full contrast; its parents never dim it */
body.lod .lodf,body.lod .lodf *{opacity:1}
/* the line: tickets ahead, yours dashed at the back */
.lq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border:2px dashed var(--ink);border-radius:10px;font-size:12.5px}
.lq b{font-family:var(--disp)}
.lqt{display:flex;gap:3px}.lqt i{width:16px;height:22px;border:2px solid var(--ink);border-radius:3px;background:var(--pb)}.lqt i.me{border-style:dashed;background:var(--pc)}
.hrs a{color:var(--accent);font-weight:700;white-space:nowrap}
/* extend blocks */
.ext{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ext>b{font:700 12px/1 var(--disp);text-transform:uppercase;letter-spacing:.1em;margin-right:2px}
.ext .btn{min-height:36px;padding:3px 10px 1px;font-size:14px}
.boop.lk{display:inline-flex;align-items:center;gap:3px;background:var(--pa);color:var(--ink);border:1.5px dashed var(--ink)}.boop.lk .ico{width:11px;height:11px}
.avp.wide{gap:8px;padding:3px 3px 3px 10px}.avp.wide b{font-size:12px}
.gnc{font-size:10.5px;color:var(--sub);flex:1;min-width:0}.gc-f .gnc{text-align:right}.gnc.sp2{display:block;padding:0 10px 6px}
@media (max-width:480px){.ext .btn{font-size:12.5px;padding:2px 8px 0}.cw-v .acts .ext{flex-direction:row}.gc-f .gnc{display:none}}
@media (max-height:460px){.ext .btn{min-height:26px;font-size:11.5px}.lq{padding:2px 6px;font-size:11px}.lqt i{width:10px;height:14px}}
@media (max-height:300px){.ext>b{display:none}.ext .btn{min-height:20px;font-size:10px;padding:0 6px}.lq span:not(.lqt){display:none}.gnc{display:none}}
@media (max-width:480px){.gc-f{flex-wrap:wrap}.gc-f .gnc{display:block;order:3;flex-basis:100%;text-align:left}}
/* on narrow and short screens the notice swaps in for the HUD's bars too, so the header never grows */
@media (max-width:760px),(max-height:560px){.ntc-on>.hb,.ntc-on>.clock,.ntc-on>.logb{display:none}.hud .ntc{flex:1 1 0}}
.avp.wide{flex-wrap:wrap;border-radius:14px;max-width:100%}.cw-h>div{min-width:0}
/* tiny frames: the counter's close sits in the tab row, so the receipt and Gift always show whole */
@media (max-height:300px){.gc{position:relative}.gc .dk-h{position:absolute;right:3px;top:1px;z-index:2;border:0;padding:0;background:none}.gc .dk-h b{display:none}.gc-t{padding-right:28px}}
/* narrow: the notice takes the row the HUD bars use, so it reads in full without squeezing the buttons */
@media (max-width:760px){.hud.ntc-on{flex-wrap:wrap}.hud .ntc{flex:1 1 100%;order:5}.top.ntc-on{flex-wrap:wrap;row-gap:6px}.top .ntc{flex:1 1 100%;order:9}}
.m-chat .deck{z-index:7}
.cf.still .cf-in{animation:none!important;transform:none}

/* ================= POS round 4 (owner): the agent jobs fit a phone. The bar matches the chatroom bar (compact composer,
   rooms bubble half over its edge); the slash commands open in place above it only while you type; one active card
   leads, the rest wait as slim tickets; the empty undo shelf steps out */
@media (max-width:760px){
 .m-agent .deck{position:relative;flex-wrap:nowrap;padding:8px 10px 8px 46px;z-index:7}
 .m-agent .deck .rmb{display:grid;position:absolute;left:-6px;top:50%;margin-top:-26px;width:52px;height:52px;z-index:2}
 .m-agent .say{min-width:0;flex:1 1 auto}
 .m-agent .deck .mvs{display:none}
 .m-agent .deck.slash .mvs{display:grid;position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);z-index:6;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;background:var(--ink);border-radius:14px;box-shadow:0 6px 0 color-mix(in srgb,var(--ink) 70%,var(--accent))}
 .m-agent .hud{row-gap:4px;padding-top:5px}
 .m-agent .hb small,.m-agent .hb em{font-size:10px}.m-agent .clock{padding:2px 8px}.m-agent .clock b{font-size:18px}.m-agent .clock small{font-size:9px}
 .m-agent .field{padding:6px 6px 4px;gap:6px}
 .m-agent .orbcol{gap:10px;padding:2px 2px 0 6px}
 .m-agent .orb{width:62px}.m-agent .orb::before{inset:-7px}.m-agent .orb b{font-size:18px}.m-agent .orb i{font-size:9px}
 .m-agent .bub{padding:6px 10px}.m-agent .bub p{font-size:12.5px;line-height:1.25}
 .m-agent .cards{gap:8px;padding:10px 6px 4px 2px;overflow:hidden}
 .m-agent .cards .card.hot{padding:16px 14px 10px 22px}.m-agent .card .big{font-size:24px}.m-agent .card h3{font-size:15px}.m-agent .card p{font-size:12.5px}
 .m-agent .card .acts{margin-top:6px}.m-agent .card .kv{font-size:12px}
 .m-agent .cards .card:not(.hot){display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:6px 8px 6px 20px;box-shadow:3px 3px 0 var(--ink)}
 .m-agent .cards .card:not(.hot)>.k,.m-agent .cards .card:not(.hot)>p,.m-agent .cards .card:not(.hot)>.kv,.m-agent .cards .card:not(.hot)>.note,.m-agent .cards .card:not(.hot)>.pg{display:none}
 .m-agent .cards .card:not(.hot) .big{font-size:17px;margin:0}.m-agent .cards .card:not(.hot) h3{font-size:12.5px;line-height:1.15}
 .m-agent .cards .card:not(.hot) .acts{margin:0;flex-wrap:nowrap;gap:5px}.m-agent .cards .card:not(.hot) .acts .btn{min-height:28px;font-size:12px;padding:2px 9px 0}.m-agent .cards .card:not(.hot) .acts .btn:not(:first-child){display:none}
 .m-agent .cards .card:not(.hot) .stamp{grid-column:2;font-size:10px;justify-self:start}
 .m-agent .shelf:not(:has(.chip2)){display:none}
 .m-agent .shelf{padding:4px 6px}
}
@media (max-width:760px) and (max-height:700px){.m-agent .cards .card.hot>p{display:none}.m-agent .chev li>span{font-size:10px}.m-agent .rounds{margin:0}}
@media (max-width:760px) and (max-height:560px){.m-agent .orbcol .bub{display:none}}
@media (max-width:760px){.m-agent .card.hot .acts{flex-wrap:nowrap;gap:8px}.m-agent .card.hot .acts .btn{min-height:36px;font-size:14px;padding:3px 12px 1px}}
@media (max-width:760px) and (max-height:700px){.m-agent .cards .card.hot{padding:14px 12px 8px 20px}.m-agent .card.hot .kv{gap:1px 10px;font-size:11.5px}}
/* the Shop view: the site's shop fills the play area; no wall, no deck */
.m-shopv{grid-template:'hud' auto 'field' minmax(0,1fr)/minmax(0,1fr)}
.m-shopv .wall,.m-shopv .deck,.m-shopv .rounds{display:none}
.m-shopv .field{display:block;transform:none;transform-style:flat;padding:0}
.m-shopv .field::before,.m-shopv .field::after{display:none}
.shopfr{display:block;width:100%;height:100%;border:3px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--ink);background:var(--paper)}
@media (max-height:560px),(max-width:760px){.shopfr{border-width:2px;border-radius:12px;box-shadow:3px 3px 0 var(--ink)}}
.shopfr{border:0;box-shadow:none;border-radius:0;background:transparent}
/* every frame: the next cards wait as slim tickets under the active one, so the active card and its button are always in view */
@media (min-width:761px) and (max-height:820px){
 .m-agent .cards{gap:8px;overflow:hidden}
 .m-agent .cards .card:not(.hot){display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:6px 10px 6px 22px;box-shadow:3px 3px 0 var(--ink)}
 .m-agent .cards .card:not(.hot)>.k,.m-agent .cards .card:not(.hot)>p,.m-agent .cards .card:not(.hot)>.kv,.m-agent .cards .card:not(.hot)>.note,.m-agent .cards .card:not(.hot)>.pg{display:none}
 .m-agent .cards .card:not(.hot) .big{font-size:18px;margin:0}.m-agent .cards .card:not(.hot) h3{font-size:13px;line-height:1.15}
 .m-agent .cards .card:not(.hot) .acts{margin:0;flex-wrap:nowrap;gap:6px}.m-agent .cards .card:not(.hot) .acts .btn{min-height:30px;font-size:12.5px;padding:2px 10px 0}.m-agent .cards .card:not(.hot) .acts .btn:not(:first-child){display:none}
 .m-agent .cards .card:not(.hot) .stamp{grid-column:2;font-size:10px;justify-self:start}
 .m-agent .shelf:not(:has(.chip2)) .sh-e{display:none}
 .m-agent .orbcol .bub p{font-size:12.5px;line-height:1.25}}
@media (min-width:761px) and (max-height:700px){.m-agent .cards .card.hot>p{display:none}.m-agent .cards .card.hot .big{font-size:30px}.m-agent .cards .card.hot{padding-top:16px;padding-bottom:10px}}
/* short frames: the active card drops its fine print and sits at the top of its tray */
@media (max-height:460px){.m-agent .cards{align-content:start}.m-agent .cards .card.hot>p,.m-agent .cards .card.hot .kv,.m-agent .cards .card.hot>.note{display:none}.m-agent .cards .card.hot h3{font-size:13px}.m-agent .cards .card.hot .big{font-size:20px}
 .m-agent .cards .card.hot{padding:12px 10px 6px 20px}.m-agent .cards .card.hot .acts{margin-top:4px;flex-wrap:nowrap}.m-agent .cards .card.hot .acts .btn{min-height:28px;font-size:12.5px;padding:2px 10px 0}}
@media (max-height:300px){.m-agent .cards .card.hot>.k{display:none}.m-agent .cards .card.hot .big{font-size:15px}.m-agent .cards .card.hot h3{font-size:11px;line-height:1.1}
 .m-agent .cards .card.hot{padding:5px 8px 4px 16px}.m-agent .cards .card.hot::after{display:none}.m-agent .cards .card.hot .acts{margin-top:2px}.m-agent .cards .card.hot .acts .btn{min-height:20px;font-size:10.5px;padding:0 8px}
 .m-agent .cards{padding:4px 4px 2px}.m-agent .cards .card:not(.hot){display:none}}
/* the brand is the rooms button; the separate header rooms bubble is not needed */
button.brand{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.top .rmb{display:none}
@media (hover:hover){button.brand:hover{transform:translate(-1px,-2px) rotate(-2deg)}}
button.brand:active{transform:scale(.94)}

/* ================= connective lines: corkboard and circuit (owner), replacing the pipe look */
#wires .bus .w0{stroke:var(--ink);stroke-width:15;stroke-linecap:round}
#wires .bus .w1{stroke-width:11;stroke-dasharray:none;opacity:1}
#wires .ck0{fill:color-mix(in srgb,#c49a62 78%,var(--caution))}#wires .ck1{fill:color-mix(in srgb,#6b4a26 80%,var(--ink));opacity:.55}#wires .ck2{fill:#f3dcb4;opacity:.6}
#wires .tick .w1{stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:1.6;stroke-dasharray:none}
#wires .tick .w0{display:none}
/* push pins in the accent; the shadow falls down-right */
#wires .pin-sh{fill:var(--ink);opacity:.25}#wires .pin-hd{fill:var(--accent);stroke:var(--ink);stroke-width:2}#wires .pin-hl{fill:var(--paper);opacity:.75}
#wires .tick .pin-hd{fill:var(--caution)}
/* yarn: the live link, soft curves, a twist drawn as a fine dash */
#wires .lit .w0{stroke:var(--ink);stroke-width:5.5;opacity:.85}
#wires .lit .w1{stroke:var(--accent);stroke-width:3.4}
#wires .lit .w2{stroke:var(--accent-ink);stroke-width:3.4;stroke-dasharray:1.4 4.2;opacity:.45}
/* circuit traces: one thin line with solder pads */
#wires g.w:not(.lit):not(.bus):not(.tick) .w0{stroke-width:4.5}
#wires g.w:not(.lit):not(.bus):not(.tick) .w1{stroke:var(--accent);stroke-width:1.6}
#wires .pad circle{fill:var(--caution);stroke:var(--ink);stroke-width:2}#wires .pad .pad-h{fill:var(--ink);stroke:none}
#wires .plug{display:none}
#wires .chv{display:none}
/* round 13 (owner): string, not circuitry. Twine for the quiet links, yarn for the live one, both pinned */
#wires g.w:not(.lit):not(.bus) .w0{stroke:var(--ink);stroke-width:3.2;opacity:.35}
#wires g.w:not(.lit):not(.bus) .w1{stroke:color-mix(in srgb,#c8a874 70%,var(--paper));stroke-width:1.8;stroke-dasharray:3 2.2}
#wires .lit .w0{stroke-width:5;opacity:.5}
#wires .lit .w2{stroke-dasharray:2 3.4;opacity:.55}
#wires .tick .w0{display:block}
#wires .pad{display:none}
#wires .bus .w0{stroke:var(--ink);stroke-width:4.6;opacity:.45;stroke-dasharray:none}
#wires .bus .w1{stroke:color-mix(in srgb,#c8a874 70%,var(--paper));stroke-width:2.6;stroke-dasharray:3.2 2.2;opacity:1}

/* ================= round 14 (owner): rooms read as channels, not switches. Each channel is a small ticket drawn twice
   (two hand-drawn frames that boil in stop motion); activity speeds the boil, adds a stop-motion pulse, and when hot a
   hyperscale pop over rolling palette bands. Paid channels are crumpled tickets; members dashed; secret folded. */
.ch{--fill:var(--paper);--ink2:var(--ink);--spd:2.6s;position:relative;isolation:isolate;background:none!important;border:0!important;box-shadow:none!important;align-items:center!important}
.ch::before,.ch::after{content:'';position:absolute;inset:0;z-index:-2;background:var(--fill);border:2px solid var(--ink2);border-radius:13px 999px 999px 13px;box-shadow:2px 2px 0 var(--ink)}
.ch::before{transform:rotate(-1.1deg) translate(-.6px,.3px)}
.ch::after{transform:rotate(.9deg) translate(.6px,-.3px);border-radius:999px 12px 13px 999px;opacity:0}
.ch::before{animation:chA 1.1s steps(1,end) infinite}.ch::after{animation:chB 1.1s steps(1,end) infinite}
@keyframes chA{50%{opacity:0}}@keyframes chB{50%{opacity:1}}
.ch .chh{font:700 .82em/1 var(--disp);font-style:normal;opacity:.55;margin-right:-3px}
.chip.ch>i.lb,.ch small{font:600 10px/1 var(--disp);font-style:normal;background:var(--ink);color:var(--paper);border-radius:4px;padding:2px 5px 1px;opacity:1}
/* the colour of each kind */
.ch.k-free{--fill:var(--paper)}
.ch.t1.k-free{--fill:var(--accent)}.ch.t1.k-free,.ch.t1.k-free .chh{color:var(--accent-ink)}
.ch.k-mem{--fill:var(--pa,var(--paper))}.ch.k-mem::before,.ch.k-mem::after{border-style:dashed}
.ch.k-paid{--fill:color-mix(in srgb,var(--caution) 55%,var(--paper))}
.ch.k-paid::before,.ch.k-paid::after{border-radius:5px 11px 4px 12px/11px 4px 12px 5px;
 background:linear-gradient(118deg,transparent 31%,color-mix(in srgb,var(--ink) 16%,transparent) 32%,transparent 34%),linear-gradient(64deg,transparent 58%,color-mix(in srgb,var(--paper) 70%,transparent) 59%,transparent 62%),linear-gradient(160deg,transparent 70%,color-mix(in srgb,var(--ink) 12%,transparent) 71%,transparent 73%),var(--fill)}
.ch.k-paid::after{border-radius:11px 4px 12px 5px/4px 12px 5px 11px;
 background:linear-gradient(104deg,transparent 41%,color-mix(in srgb,var(--ink) 16%,transparent) 42%,transparent 44%),linear-gradient(48deg,transparent 22%,color-mix(in srgb,var(--paper) 70%,transparent) 23%,transparent 26%),linear-gradient(170deg,transparent 62%,color-mix(in srgb,var(--ink) 12%,transparent) 63%,transparent 65%),var(--fill)}
.ch.k-paid{-webkit-mask:radial-gradient(circle at 0 50%,transparent 4px,#000 4.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 4px,#000 4.5px) right/51% 100% no-repeat;
 mask:radial-gradient(circle at 0 50%,transparent 4px,#000 4.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 4px,#000 4.5px) right/51% 100% no-repeat;padding-left:12px!important;padding-right:12px!important}
.ch.k-paid::before,.ch.k-paid::after{animation-duration:.7s}
.ch.k-sec{--fill:color-mix(in srgb,var(--ink) 88%,var(--accent))}.ch.k-sec,.ch.k-sec .chh{color:var(--paper)}
.ch.k-sec::after{background:linear-gradient(135deg,var(--fill) 0 78%,color-mix(in srgb,var(--paper) 30%,var(--fill)) 78%)}
.ch.lk:not(.k-paid):not(.k-sec){--fill:var(--ink)}.ch.lk:not(.k-paid):not(.k-sec),.ch.lk:not(.k-paid):not(.k-sec) .chh{color:var(--paper)}
.ch.lk>i.lb,.ch.lk small{background:var(--paper);color:var(--ink)}
/* activity: quiet boils slowly; active boils fast with a stop-motion pulse; hot pops over rolling palette bands */
.ch[data-h="1"]::before,.ch[data-h="1"]::after{animation-duration:.45s}
.ch[data-h="1"]{animation:chPulse .9s steps(1,end) infinite}
@keyframes chPulse{50%{transform:scale(1.06)}}
.ch[data-h="2"]::before,.ch[data-h="2"]::after{animation-duration:.24s}
.ch[data-h="2"]{animation:chHot .6s steps(1,end) infinite;z-index:2}
@keyframes chHot{0%{transform:scale(1.12) rotate(-1.5deg)}33%{transform:scale(1.18) rotate(1deg)}66%{transform:scale(1.1) rotate(0)}}
.ch .cx{position:absolute;inset:2px;z-index:-1;border-radius:inherit;overflow:hidden;opacity:0;pointer-events:none;border-radius:11px 999px 999px 11px}
.ch .cx::before{content:'';position:absolute;top:0;bottom:0;left:0;width:300%;background:repeating-linear-gradient(90deg,var(--band-1) 0 8%,var(--band-2) 8% 16%,var(--band-3) 16% 24%,var(--band-4) 24% 32%,var(--band-5) 32% 40%,var(--band-6) 40% 48%,var(--band-7) 48% 56%,var(--band-1) 56% 64%,var(--band-2) 64% 72%,var(--band-3) 72% 80%,var(--band-4) 80% 88%,var(--band-5) 88% 96%,var(--band-6) 96% 100%);animation:chRoll var(--spd) linear infinite}
@keyframes chRoll{to{transform:translateX(-50%)}}
.ch[data-h="2"] .cx{opacity:.62}
.ch[data-h="2"]>span,.ch[data-h="2"]>b{text-shadow:0 0 3px var(--paper),0 0 2px var(--paper);color:var(--ink)}
.ch[data-h="2"] .chh{color:var(--ink);opacity:.8}
/* the rooms list: one channel per row, a ticket, not a switch */
.rr.ch{display:flex;align-items:center;gap:7px;width:100%;text-align:left;padding:9px 14px 8px 13px;cursor:pointer;font-family:var(--disp)}
.rr.ch b{flex:1;min-width:0;font:600 15px/1.1 var(--disp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr.ch .sw{display:none}
.rr.ch.cur::before,.rr.ch.cur::after{border-width:3px;box-shadow:3px 3px 0 var(--accent)}
.rr.ch[data-h="2"]{animation:chHotRow .6s steps(1,end) infinite}
@keyframes chHotRow{0%{transform:scale(1.03) rotate(-.6deg)}33%{transform:scale(1.05) rotate(.4deg)}66%{transform:scale(1.02)}}
@media (max-height:560px){.rr.ch{padding:4px 10px 3px}.rr.ch b{font-size:13px}}
@media (hover:hover){.ch:hover::before,.ch:hover::after{animation-duration:.3s}}
@media (prefers-reduced-motion:reduce){.ch,.ch::before,.ch::after,.ch .cx::before,.rr.ch{animation:none!important}.ch::after{opacity:0}.ch[data-h="2"]{transform:scale(1.08)}}

.ch .cx{inset:3px;border-radius:10px 999px 999px 10px}
.ch.k-paid .cx{border-radius:4px 10px 3px 11px}
.chip.ch.t1{padding:5px 14px 3px}

/* ================= round 15 (owner): on phones the card word is a cutout collage, about 30% bigger. Letters come from five
   prints; half sit on an inverted grungy block, half are outlined thick on nothing. Elsewhere they read as plain text. */
.ft-v b .rn{font-style:normal;display:inline}
@media (max-width:760px){
 .ft-v b,.ft-sm .ft-v b{font-size:clamp(31px,10.4vw,44px);display:flex;align-items:center;gap:0;letter-spacing:0}
 .ft-sm .ft-v b{font-size:clamp(27px,8.6vw,36px)}
 .ft-v b::before,.ft-v b::after{display:none!important}
 .ft-v b .rn{display:inline-block;line-height:.95;margin:0 calc(var(--x) - .02em);transform:translateY(var(--y)) rotate(var(--r)) scale(var(--s));transform-origin:50% 60%}
 .rn.rf0{font-family:var(--disp);font-weight:700}
 .rn.rf1{font-family:Georgia,'Times New Roman',serif;font-weight:700}
 .rn.rf2{font-family:'Arial Black',Impact,'Helvetica Neue',sans-serif;font-weight:900}
 .rn.rf3{font-family:'Courier New',Courier,monospace;font-weight:700}
 .rn.rf4{font-family:'Josefin Sans',sans-serif;font-weight:700;font-style:italic}
 .rn.rb{background:var(--ink);color:var(--paper);padding:.04em .1em 0;
  background-image:radial-gradient(color-mix(in srgb,var(--paper) 28%,transparent) .6px,transparent 1px),radial-gradient(color-mix(in srgb,var(--paper) 18%,transparent) .8px,transparent 1.3px);
  background-size:5px 6px,9px 7px;background-position:0 0,3px 2px;box-shadow:1.5px 1.5px 0 var(--accent);clip-path:polygon(2% 4%,97% 0,100% 94%,4% 100%)}
 .rn.ro{color:var(--paper);-webkit-text-stroke:.09em var(--ink);paint-order:stroke fill;text-shadow:.05em .05em 0 var(--accent);padding:0 .03em}
 .ft.on .rn.rb,.ft:focus-visible .rn.rb{background-color:var(--accent);color:var(--accent-ink);box-shadow:1.5px 1.5px 0 var(--ink)}
 .ft.on .rn.ro,.ft:focus-visible .rn.ro{text-shadow:.06em .06em 0 var(--ink);color:var(--accent)}
 .ft-v,.ft-sm .ft-v{top:9px}
 .ft-in,.ft-sm .ft-in{padding-top:52px}
}
/* long words fit beside a narrower preview window */
@media (max-width:760px){
 .ft-v b,.ft-sm .ft-v b{font-size:min(clamp(31px,10.4vw,44px),calc((100vw - 40px) * .56 / (var(--len) * .64)))}
 .ft-sm .ft-v b{font-size:min(clamp(27px,8.6vw,36px),calc((100vw - 40px) * .56 / (var(--len) * .64)))}
 .ft:has(.ft-v[style*="--len:7"]) .win,.ft:has(.ft-v[style*="--len:8"]) .win,.ft:has(.ft-v[style*="--len:9"]) .win{width:40%!important}
}
@media (max-width:760px){
 .ft-v b,.ft-sm .ft-v b{font-size:min(10.4vw,44px,calc((100vw - 40px) * .52 / (var(--len) * .64)))}
 .ft-sm .ft-v b{font-size:min(8.6vw,36px,calc((100vw - 40px) * .52 / (var(--len) * .64)))}
 .ft:has(.ft-v[style*="--len:7"]) :is(.win,.win-cafe),.ft:has(.ft-v[style*="--len:8"]) :is(.win,.win-cafe),.ft:has(.ft-v[style*="--len:9"]) :is(.win,.win-cafe){width:38%!important}
}

/* ================= round 16 (owner): channel chips as painterly cloud tickets, commissioned frames: two for simple
   channels, three for premium. The plain outline frames are retired. */
.ch::before,.ch::after{display:none!important}
.ch{--bt:1.2s;--wash:var(--fill)}
.ch .cf{position:absolute;inset:-5px -4px -6px;width:calc(100% + 8px);height:calc(100% + 11px);z-index:-2;overflow:visible;pointer-events:none}
.cf .f{opacity:0;animation:cf2 var(--bt) steps(1,end) infinite}
.cf.n2 .f1{animation-delay:calc(var(--bt) / -2)}
.cf.n3 .f{animation-name:cf3}.cf.n3 .f1{animation-delay:calc(var(--bt) / -3)}.cf.n3 .f2{animation-delay:calc(var(--bt) / -1.5)}
@keyframes cf2{0%{opacity:1}50%{opacity:0}}
@keyframes cf3{0%{opacity:1}33.333%{opacity:0}}
.cf .b{fill:var(--wash)}
.cf .hl{fill:var(--paper);opacity:.42}
.cf .sh{fill:var(--ink);opacity:.13}
.cf .bl{fill:none;stroke:var(--ink);stroke-width:3.6;opacity:.16;stroke-linejoin:round}
.cf .ln{fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cf .bl{vector-effect:non-scaling-stroke}
/* kinds: free a soft cloud; members a dusk cloud with a dashed seam; paid a gilt storm head; secret a night cloud */
.ch.k-free{--wash:var(--paper)}
.ch.t1.k-free{--wash:var(--accent)}
.ch.k-mem{--wash:color-mix(in srgb,var(--pa,var(--paper)) 80%,var(--paper))}.ch.k-mem .cf .ln{stroke-dasharray:5 2.5}
.ch.k-paid{--wash:color-mix(in srgb,var(--caution) 62%,var(--paper));-webkit-mask:none;mask:none}
.ch.k-paid .cf .hl{fill:color-mix(in srgb,var(--paper) 80%,var(--caution));opacity:.7}
.ch.k-paid .cf .ln{stroke-width:2.3}
.ch.k-paid .cf .bl{stroke:var(--accent);opacity:.35;stroke-width:5}
.ch.k-sec{--wash:color-mix(in srgb,var(--ink) 86%,var(--accent))}.ch.k-sec .cf .hl{opacity:.12}
.ch.lk:not(.k-paid):not(.k-sec){--wash:color-mix(in srgb,var(--ink) 92%,var(--paper))}
.ch.lk:not(.k-paid):not(.k-sec) .cf .hl{opacity:.1}
.ch.k-paid,.ch.k-paid .chh,.ch.k-paid>span,.ch.k-paid>b{color:var(--ink)}
/* activity speeds the boil; premium frames step a touch faster */
.ch{--bt:1.3s}.ch.k-paid,.ch.k-mem,.ch.k-sec{--bt:1s}
.ch[data-h="1"]{--bt:.5s}.ch[data-h="2"]{--bt:.27s}
.ch .cx{inset:4px 6px;border-radius:999px}
@media (prefers-reduced-motion:reduce){.cf .f{animation:none}.cf .f0{opacity:1}}
.cf .sh{opacity:.08}.cf .hl{opacity:.5}
.ch .cx{inset:6px 9px;border-radius:999px;opacity:0}
.ch[data-h="2"] .cx{opacity:.5}
.rr.ch .cf{inset:-6px -3px -7px;width:calc(100% + 6px);height:calc(100% + 13px)}
.cf .ln{stroke-width:1.5;opacity:.85}.cf .bl{stroke-width:4.5;opacity:.12}
.rlist{gap:14px}
.ch .cf{inset:-9px -5px -4px;height:calc(100% + 13px);width:calc(100% + 10px)}
.rr.ch .cf{inset:-10px -4px -4px;height:calc(100% + 14px);width:calc(100% + 8px)}
.ch .cf{inset:-17px -9px -3px;width:calc(100% + 18px);height:calc(100% + 20px)}
.rr.ch .cf{inset:-17px -9px -3px;width:calc(100% + 18px);height:calc(100% + 20px)}
.rlist{gap:20px}
.ch.k-free{--wash:color-mix(in srgb,var(--pb,var(--paper)) 55%,var(--paper))}
.ch.t1.k-free{--wash:var(--accent)}
.ch[data-h="2"] .cx{opacity:.45;inset:3px 10px 2px}

/* ================= round 17 (owner): painted summer cumulus, about 20% shorter. Tones come from the wash: a cool
   shadow mass, the lit body, warm highlight dabs, a near-white glint and a soft belly shade. No ink outline. */
.cf .b,.cf .hl,.cf .sh,.cf .bl,.cf .ln{display:none}
.cf .s{fill:color-mix(in srgb,var(--wash) 62%,color-mix(in srgb,var(--ink) 60%,#6f86b3))}
.cf .m{fill:var(--wash)}
.cf .l{fill:color-mix(in srgb,var(--wash) 45%,#fff6e6)}
.cf .w{fill:#fffdf8;opacity:.85}
.cf .u{fill:color-mix(in srgb,var(--wash) 70%,color-mix(in srgb,var(--ink) 50%,#7d8fbf));opacity:.55}
.ch.k-free{--wash:color-mix(in srgb,var(--pb,var(--paper)) 45%,#f7fbff)}
.ch.t1.k-free{--wash:color-mix(in srgb,var(--accent) 80%,#fff)}
.ch.k-mem{--wash:color-mix(in srgb,var(--pa,var(--paper)) 70%,#eef3ff)}
.ch.k-paid{--wash:color-mix(in srgb,var(--caution) 70%,#fff2d6)}
.ch.k-paid .cf .w{fill:#fff8d6}
.ch.k-sec{--wash:color-mix(in srgb,var(--ink) 80%,#5a4f8f)}.ch.k-sec .cf .w{opacity:.25}.ch.k-sec .cf .l{opacity:.35}
.ch.lk:not(.k-paid):not(.k-sec){--wash:color-mix(in srgb,var(--ink) 78%,#56627f)}
.ch.lk:not(.k-paid):not(.k-sec) .cf .w{opacity:.2}.ch.lk:not(.k-paid):not(.k-sec) .cf .l{opacity:.3}
.ch.k-mem .cf .m{stroke:none}
/* 20% shorter: tighter padding, a lower cloud */
.chip.ch{padding-top:1px!important;padding-bottom:0!important}
.chip.ch.t1{padding-top:2px!important;padding-bottom:1px!important}
.ch .cf{inset:-11px -8px -2px;width:calc(100% + 16px);height:calc(100% + 13px)}
.rr.ch{padding-top:5px;padding-bottom:4px}
.rr.ch .cf{inset:-11px -8px -2px;width:calc(100% + 16px);height:calc(100% + 13px)}
.rlist{gap:14px}
.ch>span,.ch>b,.ch .chh{position:relative}
.cf .l{fill:color-mix(in srgb,var(--wash) 35%,#fff7ea)}
.cf .w{fill:#fffefa;opacity:.7}
.ch.lk:not(.k-paid):not(.k-sec) .cf .l{opacity:1;fill:color-mix(in srgb,var(--wash) 70%,#c9d3ea)}
.ch.k-sec .cf .l{opacity:1;fill:color-mix(in srgb,var(--wash) 72%,#c7b8ff)}
.cf .l{fill:color-mix(in srgb,var(--wash) 22%,#fffaf0)}
.cf .m{fill:color-mix(in srgb,var(--wash) 82%,#8fa3c9)}
.cf .s{fill:color-mix(in srgb,var(--wash) 50%,color-mix(in srgb,var(--ink) 55%,#5f76a8))}
.cf .u{opacity:.7}
.ch.k-paid .cf .m{fill:color-mix(in srgb,var(--wash) 82%,#d39a5a)}
.ch.k-paid .cf .s{fill:color-mix(in srgb,var(--wash) 50%,#9a5b3a)}
.ch .cf{inset:-15px -8px -2px;height:calc(100% + 17px)}
.rr.ch .cf{inset:-15px -8px -2px;height:calc(100% + 17px)}
.rlist{gap:17px}
/* polish: no outline, value contrast carries the shape */
.cf .l{fill:color-mix(in srgb,var(--wash) 14%,#fffaf0)}
.cf .m{fill:color-mix(in srgb,var(--wash) 78%,#93a6cc)}
.cf .s{fill:color-mix(in srgb,var(--wash) 42%,color-mix(in srgb,var(--ink) 50%,#566ea3));opacity:.9}
.cf .w{opacity:.95}
.ch.k-paid .cf .l{fill:color-mix(in srgb,var(--wash) 18%,#fff6d8)}
.ch.k-paid .cf .w{fill:#fffbe8}
/* hot: a rolling rainbow ribbon trails under the cloud instead of covering the name */
.ch .cx,.ch[data-h="2"] .cx{inset:auto 10% -4px 10%;height:4px;border-radius:4px;opacity:0}
.ch[data-h="2"] .cx{opacity:.95}
.ch[data-h="2"]>span,.ch[data-h="2"]>b{text-shadow:none}
/* hover and keyboard focus: the cloud inverts to ink with paper type, for strong contrast */
@media (hover:hover){.ch:hover{--wash:var(--ink)!important}
 .ch:hover .cf .l{fill:color-mix(in srgb,var(--ink) 80%,var(--paper))!important;opacity:1!important}
 .ch:hover .cf .m{fill:var(--ink)!important}.ch:hover .cf .s{fill:color-mix(in srgb,var(--ink) 70%,#000)!important}
 .ch:hover .cf .w{fill:var(--paper)!important;opacity:.5!important}
 .ch:hover>span,.ch:hover>b,.ch:hover .chh{color:var(--paper)!important;opacity:1;text-shadow:none!important}
 .ch:hover>i.lb,.ch:hover small{background:var(--paper)!important;color:var(--ink)!important}}
.ch:focus-visible{outline:3px solid var(--accent);outline-offset:3px;--wash:var(--ink)!important}
.ch:focus-visible .cf .m,.ch:focus-visible .cf .l{fill:var(--ink)!important}
.ch:focus-visible>span,.ch:focus-visible>b,.ch:focus-visible .chh{color:var(--paper)!important;text-shadow:none!important}

/* ================= round 18 (owner): cutout collage on the slab words at every size, vertical slabs included.
   On the dark slab the blocks are paper with ink letters and the bare letters are paper with an accent outline. */
.ft-v b{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:var(--paper)}
.ft-v b .rn{display:inline-block;line-height:.98;margin:calc(var(--x) - .015em) 0;transform:translateX(var(--y)) rotate(var(--r)) scale(var(--s));transform-origin:50% 50%}
.rn.rf0{font-family:var(--disp);font-weight:700}
.rn.rf1{font-family:Georgia,'Times New Roman',serif;font-weight:700}
.rn.rf2{font-family:'Arial Black',Impact,'Helvetica Neue',sans-serif;font-weight:900}
.rn.rf3{font-family:'Courier New',Courier,monospace;font-weight:700}
.rn.rf4{font-family:'Josefin Sans',sans-serif;font-weight:700;font-style:italic}
.ft-v .rn.rb{background:var(--paper);color:var(--ink);padding:.06em .02em .05em;
 background-image:radial-gradient(color-mix(in srgb,var(--ink) 22%,transparent) .6px,transparent 1px),radial-gradient(color-mix(in srgb,var(--ink) 14%,transparent) .8px,transparent 1.3px);
 background-size:5px 6px,9px 7px;background-position:0 0,3px 2px;box-shadow:1.5px 1.5px 0 var(--accent);clip-path:polygon(4% 2%,100% 4%,96% 98%,0 96%)}
.ft-v .rn.ro{color:var(--paper);-webkit-text-stroke:.07em var(--accent);paint-order:stroke fill;padding:.02em 0}
.ft.on .ft-v .rn.rb,.ft:focus-visible .ft-v .rn.rb{background-color:var(--ink);color:var(--paper);box-shadow:1.5px 1.5px 0 var(--paper)}
.ft.on .ft-v .rn.ro,.ft:focus-visible .ft-v .rn.ro{color:var(--accent-ink);-webkit-text-stroke-color:var(--ink)}
/* phones keep the horizontal word, now about 20% bigger */
@media (max-width:760px){
 .ft-v b .rn{margin:0 calc(var(--x) - .02em);transform:translateY(var(--y)) rotate(var(--r)) scale(var(--s))}
 .ft-v .rn.rb{background-color:var(--ink);color:var(--paper);padding:.04em .1em 0;
  background-image:radial-gradient(color-mix(in srgb,var(--paper) 28%,transparent) .6px,transparent 1px),radial-gradient(color-mix(in srgb,var(--paper) 18%,transparent) .8px,transparent 1.3px)}
 .ft-v .rn.ro{color:var(--paper);-webkit-text-stroke:.09em var(--ink);text-shadow:.05em .05em 0 var(--accent)}
 .ft.on .ft-v .rn.rb,.ft:focus-visible .ft-v .rn.rb{background-color:var(--accent);color:var(--accent-ink);box-shadow:1.5px 1.5px 0 var(--ink)}
 .ft.on .ft-v .rn.ro,.ft:focus-visible .ft-v .rn.ro{color:var(--accent);-webkit-text-stroke-color:var(--ink)}
 .ft-v b,.ft-sm .ft-v b{font-size:min(12.5vw,53px,calc((100vw - 40px) * .58 / (var(--len) * .64)))}
 .ft-sm .ft-v b{font-size:min(10.3vw,43px,calc((100vw - 40px) * .58 / (var(--len) * .64)))}
 .ft-in,.ft-sm .ft-in{padding-top:60px}
}
@media (max-width:760px){
 /* long words take the card's top line; the preview drops below them, or steps aside on short cards */
 .ft:has(.ft-v[style*="--len:7"]) :is(.win,.win-cafe),.ft:has(.ft-v[style*="--len:8"]) :is(.win,.win-cafe),.ft:has(.ft-v[style*="--len:9"]) :is(.win,.win-cafe){top:calc(min(12.5vw,53px) + 16px)!important;width:44%!important}
 .ft:has(.ft-v[style*="--len:7"]),.ft:has(.ft-v[style*="--len:8"]),.ft:has(.ft-v[style*="--len:9"]){--long:1}
 .ft:has(.ft-v[style*="--len:8"]) .ft-v b{font-size:min(12.5vw,53px,calc((100vw - 48px) / (8 * .66)))}
 .ft:has(.ft-v[style*="--len:7"]) .ft-v b{font-size:min(12.5vw,53px,calc((100vw - 48px) / (7 * .66)))}
 @container (max-height:110px){.ft:has(.ft-v[style*="--len:8"]) :is(.win,.win-cafe),.ft:has(.ft-v[style*="--len:7"]) :is(.win,.win-cafe){display:none!important}}
}
@media (max-width:760px){@container (max-height:104px){.roster .ft .ft-t,.roster .ft-sm .ft-t{display:none!important}}}

/* ================= round 19 (owner): stationery bottom edges, one concept per card, three frames, hydrated on pick */
.ft::before,.ft-sm::before{display:none!important}
.edg{position:absolute;left:96px;right:14px;bottom:5px;height:12px;z-index:2;pointer-events:none}
.ft-sm .edg{left:64px;bottom:3px;height:10px}
.edg svg{display:block;width:100%;height:100%;overflow:visible}
.edg .ef{opacity:0}.edg .ef0{opacity:1}
.edg .ln{fill:none;stroke:color-mix(in srgb,var(--ink) 50%,transparent);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.edg .ac{fill:color-mix(in srgb,var(--ink) 35%,transparent);stroke:color-mix(in srgb,var(--ink) 40%,transparent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.edg .tp{fill:color-mix(in srgb,var(--pb,var(--paper)) 70%,transparent);stroke:color-mix(in srgb,var(--ink) 25%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.edg .fm{fill:color-mix(in srgb,var(--ink) 55%,transparent)}.edg .hl{fill:var(--paper);opacity:.75}
.edg .rc{fill:color-mix(in srgb,var(--paper) 85%,transparent);stroke:color-mix(in srgb,var(--ink) 35%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
/* hydrated: colour floods in and the three frames step */
.ft.on .edg .ef,.ft:focus-visible .edg .ef{animation:edg3 .45s steps(1,end) infinite}
.ft.on .edg .ef1,.ft:focus-visible .edg .ef1{animation-delay:-.15s}.ft.on .edg .ef2,.ft:focus-visible .edg .ef2{animation-delay:-.3s}
@keyframes edg3{0%{opacity:1}33.333%{opacity:0}}
@media (hover:hover){.ft:hover .edg .ef{animation:edg3 .6s steps(1,end) infinite}.ft:hover .edg .ef1{animation-delay:-.2s}.ft:hover .edg .ef2{animation-delay:-.4s}}
.ft.on .edg .ln,.ft:focus-visible .edg .ln{stroke:var(--accent);stroke-width:2.2}
.ft.on .edg .ac,.ft:focus-visible .edg .ac{fill:var(--accent);stroke:var(--ink)}
.ft.on .edg .tp,.ft:focus-visible .edg .tp{fill:var(--accent);stroke:var(--ink);opacity:.85}
.ft.on .edg .fm,.ft:focus-visible .edg .fm{fill:var(--ink)}
.ft.on .edg .rc,.ft:focus-visible .edg .rc{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.edg{transition:transform .25s cubic-bezier(.2,1.5,.4,1)}.ft.on .edg{transform:scaleY(1.3);transform-origin:50% 100%}
@media (max-width:760px){.edg,.ft-sm .edg{left:12px;right:12px;bottom:3px;height:9px}}
@media (max-height:560px){.edg,.ft-sm .edg{height:7px;bottom:2px}}
@media (prefers-reduced-motion:reduce){.edg .ef{animation:none!important}.edg .ef0{opacity:1!important}}

/* ================= round 20 (owner): every roster card is a sheet of crumpled stationery like the Shop's, each with
   its own creases and tint; picked or focused, the sheet inverts to ink */
.roster>.ft{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.roster>.ft::after{display:none!important}
.roster>.ft .ft-in{z-index:1}
.ft-call .cr-b{fill:color-mix(in srgb,var(--paper) 72%,var(--pa,var(--accent)))}
.ft-cafe .cr-b{fill:color-mix(in srgb,var(--paper) 72%,var(--pb,var(--accent)))}
.ft-hk .cr-b{fill:color-mix(in srgb,var(--paper) 74%,var(--pc,var(--accent)))}
.ft-stage .cr-b{fill:color-mix(in srgb,var(--paper) 74%,var(--pd,var(--accent)))}
.ft-pm .cr-b{fill:color-mix(in srgb,var(--paper) 66%,var(--accent))}
.roster>.ft.on .cr-f,.roster>.ft:focus-visible .cr-f{animation-duration:.27s}
.roster>.ft.on .cr-f1,.roster>.ft:focus-visible .cr-f1{animation-delay:-.09s}.roster>.ft.on .cr-f2,.roster>.ft:focus-visible .cr-f2{animation-delay:-.18s}
/* inverted: ink sheet, paper creases, accent edge */
.roster>.ft.on .cr-b,.roster>.ft:focus-visible .cr-b{fill:var(--ink)!important;stroke:var(--accent);stroke-width:4px}
.roster>.ft.on .cr-l,.roster>.ft:focus-visible .cr-l{stroke:var(--paper);opacity:.35}
.roster>.ft.on .cr-s,.roster>.ft:focus-visible .cr-s{fill:var(--paper);opacity:.08}
.roster>.ft.on .cr-s2,.roster>.ft:focus-visible .cr-s2{fill:var(--accent);opacity:.18}
.roster>.ft.on,.roster>.ft:focus-visible{color:var(--paper)}
.roster>.ft.on .crum,.roster>.ft:focus-visible .crum{filter:drop-shadow(6px 6px 0 var(--accent))}
@media (hover:hover){.roster>.ft:hover:not(.on) .cr-f{animation-duration:.33s}}
@media (max-width:760px),(max-height:560px){.crum{filter:drop-shadow(3px 3px 0 var(--ink))}.roster>.ft.on .crum{filter:drop-shadow(3px 3px 0 var(--accent))}}
@media (max-width:760px){.ft-call .ft-v b{font-size:min(18vw,78px)!important}.ft-call .ft-in{padding-top:calc(min(18vw,78px) + 16px)}}
/* inverted cutout cells, about 15% shorter */
.ft-v .rn.rb{padding-top:0!important;padding-bottom:0!important}
@media (max-width:760px){.ft-v .rn.rb{line-height:.85!important}}
/* the brand button: ink pill, paper type, in every palette */
button.brand{background:var(--ink);color:var(--paper);font:700 18px/1 var(--disp);border:2px solid var(--ink)}
button.brand svg [fill]:not([fill="none"]){fill:var(--paper)}
@media (max-width:1300px),(max-height:760px){button.brand{font-size:14px}}
@media (max-height:560px){button.brand{font-size:12px}}
@media (hover:hover){button.brand:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--ink)}}
button.brand:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* vertical slabs (every size above phones) read as plain type; the cutout collage is for phones only */
@media (min-width:761px){
 .ft-v b .rn,.ft-v .rn.rb,.ft-v .rn.ro{display:inline!important;transform:none!important;margin:0!important;padding:0!important;background:none!important;box-shadow:none!important;clip-path:none!important;
  -webkit-text-stroke:0!important;text-shadow:none!important;font-family:var(--disp)!important;font-weight:700!important;font-style:normal!important;color:var(--paper)!important;line-height:inherit!important}
 .ft.on .ft-v b .rn,.ft:focus-visible .ft-v b .rn{color:var(--accent-ink)!important}
}
/* vertical slabs: the mixed prints with a gentle tilt and nudge, no cells and no outlines */
@media (min-width:761px){
 .ft-v b .rn,.ft-v .rn.rb,.ft-v .rn.ro{display:inline-block!important;transform:translateX(calc(var(--y) * .6)) rotate(calc(var(--r) * .55))!important;margin:calc(var(--x) * .5) 0!important}
 .ft-v .rn.rf1{font-family:Georgia,'Times New Roman',serif!important}
 .ft-v .rn.rf2{font-family:'Arial Black',Impact,'Helvetica Neue',sans-serif!important;font-weight:900!important}
 .ft-v .rn.rf3{font-family:'Courier New',Courier,monospace!important}
 .ft-v .rn.rf4{font-family:'Josefin Sans',sans-serif!important;font-style:italic!important}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){.ft-v b .rn{transform:none!important}}
/* resting cards breathe: the sheets boil ten times slower, each card a beat after the one before */
.roster>.ft:not(.on):not(:hover):not(:focus-visible) .cr-f{animation-duration:4.2s;animation-delay:calc(var(--i,0) * -.7s)}
.roster>.ft:not(.on):not(:hover):not(:focus-visible) .cr-f1{animation-delay:calc(var(--i,0) * -.7s - 1.4s)}
.roster>.ft:not(.on):not(:hover):not(:focus-visible) .cr-f2{animation-delay:calc(var(--i,0) * -.7s - 2.8s)}
/* "More rooms" is a little wooden sign: planed board with grain, darker end grain, two nail heads */
.more>b{position:relative;background:
  repeating-linear-gradient(178deg,transparent 0 3px,rgba(60,32,12,.18) 3px 4px,transparent 4px 7px),
  repeating-linear-gradient(2deg,transparent 0 9px,rgba(255,236,200,.14) 9px 10px,transparent 10px 15px),
  linear-gradient(180deg,#c48a52,#a86e3b 55%,#8e5a2f);
 color:#fff7e6;text-shadow:0 1px 0 rgba(60,30,10,.7);border:2px solid #4a2a12;border-radius:5px 7px 4px 6px;
 box-shadow:inset 0 2px 0 rgba(255,232,190,.45),inset 0 -2px 0 rgba(60,30,10,.35),3px 3px 0 var(--ink);padding:6px 20px 4px;transform:rotate(-2deg)}
.more>b::before,.more>b::after{content:'';position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
 background:radial-gradient(circle at 35% 35%,#e9e2d6,#7d7468 70%);box-shadow:0 0 0 1px #3b2410}
.more>b::before{left:6px}.more>b::after{right:6px}
/* expanded layout: the picked card's slab is a wooden sign board (grain runs along the slab) */
@media (min-width:761px){
 .ft.on .ft-v,.ft:focus-visible .ft-v{background:
   repeating-linear-gradient(88deg,transparent 0 3px,rgba(60,32,12,.18) 3px 4px,transparent 4px 7px),
   repeating-linear-gradient(92deg,transparent 0 9px,rgba(255,236,200,.14) 9px 10px,transparent 10px 15px),
   linear-gradient(90deg,#c48a52,#a86e3b 55%,#8e5a2f)!important;
  border:2px solid #4a2a12;box-shadow:inset 2px 0 0 rgba(255,232,190,.45),inset -2px 0 0 rgba(60,30,10,.35),0 0 0 3px var(--ink),5px 5px 0 var(--ink)!important}
 .ft.on .ft-v b .rn,.ft:focus-visible .ft-v b .rn{color:#fff7e6!important;text-shadow:1px 1px 0 rgba(60,30,10,.75)!important}
}
/* phones: resting words sit in from the edge, a little faded; the picked card's word slides to its place at full ink */
@media (max-width:760px){
 .roster>.ft .ft-v{transition:transform .38s cubic-bezier(.2,1.3,.4,1)}
 .roster>.ft:not(.on):not(:focus-visible) .ft-v{transform:translateX(clamp(10px,5vw,26px))}
 .roster>.ft:not(.on):not(:focus-visible) .ft-v .rn{opacity:.55;transition:opacity .5s ease}
 .roster>.ft:not(.on) .ft-v .rn.hy{opacity:1;animation:rnHy 1.4s cubic-bezier(.2,1.5,.4,1)}
 @keyframes rnHy{0%{scale:1}22%{scale:1.22}45%{scale:.96}65%{scale:1.05}100%{scale:1}}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.roster>.ft .ft-v{transition:none}.roster>.ft .ft-v .rn{animation:none!important}}
@media (max-width:760px){.roster>.ft:not(.on):not(:focus-visible) .ft-v{transform:translateX(clamp(6px,3.4vw,22px))}.ft-sm:is(.ft-stage,.ft-shop,.ft-hk) .win{width:44%!important}}

/* ================= round 22 (owner): one calm, static, themed backdrop for the whole chat. The drifting tiles, floor,
   awning bands and the boiling paper sheet are retired; the cards and chips carry the motion. */
#world .tiles,#world .floor,#world .band,#world .paperbg,body[data-view] #world .paperbg{display:none!important;animation:none!important}
#world{background:
  radial-gradient(ellipse at 50% 38%,transparent 55%,color-mix(in srgb,var(--ink) 10%,transparent) 100%),
  radial-gradient(color-mix(in srgb,var(--ink) 11%,transparent) 1.1px,transparent 1.6px) 0 0/22px 22px,
  linear-gradient(170deg,color-mix(in srgb,var(--paper) 78%,var(--pa,var(--accent))),color-mix(in srgb,var(--paper) 70%,var(--pb,var(--accent))))}

/* ================= round 22 (owner): the outer chat backdrop is tame themed static; the chatroom keeps its sheet */
#world .stat{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.95}
body:not([data-view="chat"]) #world .tiles,body:not([data-view="chat"]) #world .floor,body:not([data-view="chat"]) #world .band{display:none!important}
body[data-view="chat"] #world .stat{display:none}
/* the static belongs to the select screen; every page opened from it (chatroom, call, proposal, help, stage, shop) shows
   the crumpled sheet, and the two crossfade on the way in and back out */
#world .stat,#world .paperbg{display:block!important;transition:opacity .45s ease}
body[data-view="select"] #world .paperbg{opacity:0}
body:not([data-view="select"]) #world .stat{opacity:0}
body:not([data-view="select"]) #world .tiles,body:not([data-view="select"]) #world .floor,body:not([data-view="select"]) #world .band{display:none!important}
@media (prefers-reduced-motion:reduce){#world .stat,#world .paperbg{transition:none}}
/* swapped (owner): the select screen gets the calm sheet; every page opened from it gets the static */
body[data-view="select"] #world .paperbg{opacity:1}
body[data-view="select"] #world .stat{opacity:0}
body:not([data-view="select"]) #world .stat{opacity:.95}
body:not([data-view="select"]) #world .paperbg{opacity:0}
/* Stage and Shop keep the calm sheet too */
body:is([data-view="stage"],[data-view="shopv"]) #world .paperbg{opacity:1}
body:is([data-view="stage"],[data-view="shopv"]) #world .stat{opacity:0}
/* the log column on job screens is flat, so its text renders crisp (the 3D tilt rasterized it soft) */
.m-agent .wall,.m-agent #log,.m-agent .chain,.m-agent .chain>li,.m-agent .chain .lk{transform:none!important;will-change:auto}
.m-agent .chain{filter:none;box-shadow:none}
.m-agent .chain>li{filter:drop-shadow(3px 3px 0 var(--ink))}

/* ================= the Call card's microphone (owner) */
.ft-call .edg{display:none}
.ft-call{overflow:hidden}
.mic{position:absolute;left:38%;width:min(34%,190px);bottom:0;height:62%;z-index:0;pointer-events:none;opacity:.55;
 transform:translateY(calc(100% - 30px));animation:micRise 11s cubic-bezier(.45,0,.55,1) infinite}
.mic svg{display:block;width:100%;height:auto;overflow:visible}
.mic .mb{fill:url(#micMetal)}.mic .mm{opacity:.9}
.mic .mp{stroke:#2b2f36;stroke-width:1.1;fill:none;opacity:.75}.mic .md{fill:#f2f4f7;opacity:.55}
.mic .mh{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.7}
.mic .mr{stroke:#2b2f36;stroke-width:3;opacity:.6}
.mic .mz{fill:none;stroke:#e6e9ee;stroke-width:1.4;stroke-linejoin:round;opacity:.8}
.mic .mf{opacity:0;animation:micBoil .36s steps(1,end) infinite}.mic .mf1{animation-delay:-.12s}.mic .mf2{animation-delay:-.24s}
@keyframes micBoil{0%{opacity:1}33.333%{opacity:0}}
.mic .ms path{stroke:var(--accent);stroke-width:4;stroke-linecap:round;opacity:0;animation:micTalk .5s steps(2,end) infinite}
.mic .ms path:nth-child(2n){animation-delay:-.25s}
@keyframes micTalk{0%{opacity:.9}50%{opacity:.15}}
/* root, a slow rise to about half the card, a hold, then down in two beats with short pauses */
@keyframes micRise{
 0%,10%{transform:translateY(calc(100% - 30px))}
 52%{transform:translateY(18%)}
 60%{transform:translateY(18%)}
 66%{transform:translateY(55%)}
 74%{transform:translateY(55%)}
 80%{transform:translateY(calc(100% - 30px))}
 100%{transform:translateY(calc(100% - 30px))}}
.ft-call.on .mic{opacity:.62}
@media (max-width:760px){.mic{left:auto;right:6%;width:30%;height:80%}}
@media (prefers-reduced-motion:reduce){.mic,.mic .mf,.mic .ms path{animation:none!important}.mic .mf0{opacity:1}}
/* the mic sits in front of the window's dark panel but under the words and tags, and stops below the OPEN sign */
.ft-call .win{z-index:0}.ft-call .mic{z-index:1;left:auto;right:9%;width:min(30%,170px)}
.ft-call .ft-v,.ft-call .ft-t,.ft-call .ft-x,.ft-call .ft-k{z-index:3}
@keyframes micRise{
 0%,10%{transform:translateY(calc(100% - 30px))}
 52%{transform:translateY(34%)}
 60%{transform:translateY(34%)}
 66%{transform:translateY(64%)}
 74%{transform:translateY(64%)}
 80%{transform:translateY(calc(100% - 30px))}
 100%{transform:translateY(calc(100% - 30px))}}
@media (max-width:760px){.ft-call .mic{right:auto;left:31%;width:15%;height:92%}}
.ft-call .ft-in .mic{position:absolute;bottom:-12px}
/* two puffs condense off the mic head at the top of its rise, like the call cell is smoking */
.mic{overflow:visible}
.mpf{position:absolute;bottom:calc(100% - 12%);display:block;font-style:normal;white-space:nowrap;opacity:0;transform-origin:50% 100%;z-index:2;
 padding:7px 13px 6px;background:var(--paper);color:var(--ink);border-radius:999px;font:700 clamp(10px,1.05vw,14px)/1 var(--disp);
 box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 25%,transparent),
  -9px 4px 0 -2px var(--paper),9px 5px 0 -3px var(--paper),-4px -6px 0 -1px var(--paper),6px -7px 0 -2px var(--paper);
 animation:micPuff 11s ease-out infinite}
.mpf b{position:relative}
.mpf.p1{left:-30%}
.mpf.p2{left:30%;bottom:calc(100% + 22%);animation-name:micPuff2}
/* the puffs belong to the same 11s cycle: they form at the peak (52 to 60%), drift up, and thin away as the head drops */
@keyframes micPuff{0%,49%{opacity:0;transform:translateY(10px) scale(.3)}
 53%{opacity:1;transform:translateY(0) scale(1.06)}56%{transform:translateY(-4px) scale(.98)}
 62%{opacity:.95;transform:translateY(-12px) scale(1)}70%{opacity:0;transform:translateY(-34px) scale(1.15)}100%{opacity:0}}
@keyframes micPuff2{0%,52%{opacity:0;transform:translateY(10px) scale(.3)}
 56%{opacity:1;transform:translateY(0) scale(1.06)}59%{transform:translateY(-4px) scale(.98)}
 64%{opacity:.95;transform:translateY(-12px) scale(1)}72%{opacity:0;transform:translateY(-36px) scale(1.15)}100%{opacity:0}}
@media (max-width:760px){.mpf{font-size:9.5px;padding:4px 8px 3px}.mpf.p1{left:-60%}.mpf.p2{left:10%}}
@media (prefers-reduced-motion:reduce){.mpf{animation:none!important;opacity:0}}
/* puffs drift off to the left of the mic head and beside its body: clear of the OPEN sign and inside the card */
.mpf.p1,.mpf.p2{left:auto}
.mpf.p1{right:55%;bottom:calc(100% - 26%)}
.mpf.p2{right:62%;bottom:calc(100% - 46%)}
@media (max-width:760px){.mpf{font-size:9px;padding:3px 7px 2px}
 .mpf.p1{right:auto;left:115%;bottom:calc(100% - 30%)}
 .mpf.p2{right:auto;left:125%;bottom:calc(100% - 52%)}}
.mpf.p1{right:6%;bottom:calc(100% - 1%)}
.mpf.p2{right:56%;bottom:calc(100% - 30%)}
@media (max-width:760px){
 .mpf.p1{left:auto;right:104%;bottom:calc(100% - 40%)}
 .mpf.p2{right:auto;left:108%;bottom:calc(100% - 92%)}}
@media (max-width:760px){.mpf.p2{display:none}.mpf.p1{right:auto;left:108%;bottom:calc(100% - 78%);z-index:4}}
@media (max-width:760px){.mpf.p1{bottom:64%}}
@media (max-width:760px){.mpf.p1{bottom:54%}}

/* ================= room ticker and deputy (owner) */
.tkr{display:flex;gap:6px;align-items:center;overflow:hidden;padding:5px 12px;border-bottom:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);
 background:color-mix(in srgb,var(--paper) 85%,var(--pb,var(--paper)));white-space:nowrap;min-height:28px;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
.tki{flex:none;display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--disp);padding:3px 8px 2px 3px;border-radius:999px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);opacity:calc(.35 + var(--f,1) * .65)}
.tki b{font-weight:700;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;background:var(--ink);color:var(--paper);border-radius:999px;padding:2px 6px 1px}
.tki i{font-style:normal;font-size:9.5px;opacity:.6}
.tki.k-slain b,.tki.k-mod b,.tki.k-vote b{background:#b3261e}.tki.k-hype b,.tki.k-raid b{background:var(--accent);color:var(--accent-ink)}
.tki.k-won b,.tki.k-order b,.tki.k-book b{background:color-mix(in srgb,var(--caution) 80%,#000);color:#fff}.tki.k-gift b,.tki.k-teddy b,.tki.k-cheer b{background:var(--accent)}
.tki.nw{animation:tkIn .55s cubic-bezier(.2,1.5,.4,1)}@keyframes tkIn{from{transform:scale(.4) translateX(-20px);opacity:0}}
.ln.vote .bb{background:color-mix(in srgb,var(--paper) 80%,#f4c7c3)}.dpt{font:700 9.5px/1 var(--disp);text-transform:uppercase;background:#b3261e;color:#fff;border-radius:4px;padding:2px 5px 1px}
.vc{display:inline-flex;gap:3px;align-items:baseline;font-weight:700}.vy{font-style:normal;font-size:1.25em}
.vn{opacity:.7}
.seat.deputy{position:relative;z-index:6;background:color-mix(in srgb,var(--paper) 70%,var(--caution));transform:scale(1.08);transition:transform .3s}
.seat .swd{position:absolute;right:10px;top:-30px;width:22px;height:58px;transform-origin:50% 90%;filter:drop-shadow(2px 2px 0 var(--ink))}
.feed{position:relative}
.swipe{position:absolute;left:0;right:0;top:20%;height:60%;pointer-events:none;z-index:7;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.95) 49%,var(--accent) 51%,transparent 60%);opacity:0}
.ln.slain .bb{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#b3261e}
.slainl .bb{opacity:.55;font-style:italic;font-size:12px}
@media (max-width:760px){.tkr{padding:4px 8px;min-height:24px}.tki{font-size:10.5px}.tki b{font-size:8.5px}}
@media (max-height:560px){.tkr{min-height:20px;padding:2px 8px}.tki{font-size:9.5px;padding:1px 6px 0 2px}.tki b{font-size:8px;padding:1px 4px 0}}
@media (prefers-reduced-motion:reduce){.tki.nw{animation:none}}
.ln.sys .bb>.dpt{background:#b3261e!important;color:#fff!important}.ln.sys .bb>.vc,.ln.sys .bb>.vn{background:none!important}
/* VIP crew channels: a velvet cloud with a gold glint */
.ch.k-vip{--wash:color-mix(in srgb,#5b2a6e 72%,var(--accent))}
.ch.k-vip,.ch.k-vip .chh,.ch.k-vip>span,.ch.k-vip>b{color:#fff6e0}
.ch.k-vip .cf .l{fill:color-mix(in srgb,var(--wash) 55%,#e9c46a)}.ch.k-vip .cf .w{fill:#ffe8a3;opacity:.9}
.ch.k-vip .cf .s{fill:color-mix(in srgb,var(--wash) 60%,#1a0d22)}
.ch.k-vip .chh::after{content:'VIP';margin-left:4px;font:700 8px/1 var(--disp);background:#e9c46a;color:#2a1433;border-radius:3px;padding:1px 3px 0;vertical-align:2px}
.ln.sys code{font:700 11px/1 ui-monospace,Menlo,monospace;background:var(--ink);color:var(--paper);border-radius:4px;padding:2px 5px}
/* studio mic: wider and flatter; held up while the Call card is hovered */
.ft-call .mic{width:min(42%,230px);height:48%}
.mic.held{animation:none}
.mic.held .mpf{animation-duration:4s;animation-name:micPuffH}.mic.held .mpf.p2{animation-delay:1.2s}
@keyframes micPuffH{0%{opacity:0;transform:translateY(10px) scale(.3)}12%{opacity:1;transform:none}60%{opacity:.95;transform:translateY(-10px)}85%,100%{opacity:0;transform:translateY(-30px) scale(1.1)}}
@media (max-width:760px){.ft-call .mic{width:22%;height:70%;left:28%}}

/* ================= the job's stage bar (owner): one ribbon, the current stage large; hover opens the rounds */
.sbar{grid-area:lad;position:relative;align-self:start;height:46px;margin:0 2px 6px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:3px 3px 0 var(--ink);overflow:hidden;cursor:default;transform:rotate(-.5deg)}
.sb-tr{position:absolute;inset:0}
.sb-f{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:0 50%;transform:scaleX(var(--p));
 background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--accent) 88%,var(--paper)) 0 10px,var(--accent) 10px 20px);transition:transform .8s cubic-bezier(.2,1.2,.4,1)}
.sb-sh{position:absolute;top:0;bottom:0;width:30%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-120%);animation:sbSh 3.6s ease-in-out infinite}
@keyframes sbSh{0%,55%{transform:translateX(-120%)}100%{transform:translateX(420%)}}
.sb-now{position:absolute;left:12px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:1px;z-index:2;transition:opacity .2s,transform .25s}
.sb-now small{font:700 9.5px/1 var(--disp);text-transform:uppercase;letter-spacing:.1em;color:var(--ink);opacity:.8}
.sb-now b{font:700 19px/1 var(--disp);color:var(--ink);background:var(--paper);padding:1px 7px 0;border-radius:6px;box-shadow:2px 2px 0 var(--ink);align-self:flex-start;animation:sbPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes sbPop{from{transform:scale(.5) rotate(-6deg);opacity:0}}
.sb-seg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),1fr);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .25s;z-index:3}
.sb-seg i{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;font:700 11px/1.05 var(--disp);font-style:normal;color:var(--ink);background:var(--paper);text-align:center;padding:0 3px}
.sb-seg i+i{border-left:2px dashed color-mix(in srgb,var(--ink) 45%,transparent)}
.sb-seg em{font-style:normal;font-size:9px;background:var(--ink);color:var(--paper);border-radius:999px;min-width:15px;height:15px;display:grid;place-items:center;flex:none}
.sb-seg i.dn{background:color-mix(in srgb,var(--accent) 30%,var(--paper))}
.sb-seg i.nw{background:var(--accent);color:var(--accent-ink)}.sb-seg i.nw em{background:var(--accent-ink);color:var(--accent)}
.sbar:hover .sb-seg,.sbar:focus-visible .sb-seg{opacity:1;transform:none}
.sbar:hover .sb-now,.sbar:focus-visible .sb-now{opacity:0;transform:translateY(-6px)}
.sbar:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:1300px){.sb-seg i{font-size:9.5px}.sb-now b{font-size:16px}}
@media (max-height:560px){.sbar{height:30px;border-width:2px;border-radius:9px}.sb-now small{display:none}.sb-now b{font-size:13px}.sb-seg i{font-size:8.5px}.sb-seg em{display:none}}
@media (prefers-reduced-motion:reduce){.sb-sh,.sb-now b{animation:none}.sb-f{transition:none}}
.sbar{transform:translateZ(32px) rotate(-.5deg);z-index:6}

/* ================= round 24 (owner): inertial sway; transparent panels are an unfilled crumpled sheet */
.roster>.ft-b1,.roster>.ft-b2{rotate:0 1 .35 var(--sw,0deg);transform-origin:50% 0}
.pv::before,.pv::after,.field::before,.field::after{display:none!important}
.pvc{position:relative;height:100%;transform-style:preserve-3d}
.gsheet{position:absolute;inset:26px -6px 0 14px;width:calc(100% - 8px);height:calc(100% - 26px);pointer-events:none;z-index:0;filter:none;transform:translateZ(-40px)}
.gsheet .cr-b{fill:none!important;stroke:color-mix(in srgb,var(--ink) 55%,transparent);stroke-width:2.5px}
.gsheet .cr-s{fill:var(--ink);opacity:.035}.gsheet .cr-s2{fill:var(--paper);opacity:.18}
.gsheet .cr-l{stroke:color-mix(in srgb,var(--ink) 40%,transparent);opacity:.5}
.gsheet .cr-f{animation-duration:4.2s}.gsheet .cr-f1{animation-delay:-1.4s}.gsheet .cr-f2{animation-delay:-2.8s}
.fsheet{position:absolute;grid-area:field;inset:auto;width:100%;height:100%;transform:none;z-index:0}
.m>.fsheet{position:relative}
@media (max-width:760px){.gsheet{inset:8px -4px 0 6px;width:calc(100% - 2px);height:calc(100% - 8px)}}
@media (prefers-reduced-motion:reduce){.roster>.ft-b1,.roster>.ft-b2{rotate:none}}
/* the Call screen's sheet is filled paper, so the call window sits on a solid page */
.m-call .fsheet .cr-b{fill:color-mix(in srgb,var(--paper) 94%,var(--pa,var(--accent)))!important;stroke:var(--ink)}
.m-call .fsheet{filter:drop-shadow(5px 5px 0 var(--ink))}
/* Proposal and Help sheets are filled paper too */
.m-agent .fsheet .cr-b{fill:color-mix(in srgb,var(--paper) 94%,var(--pa,var(--accent)))!important;stroke:var(--ink)}
.m-agent .fsheet{filter:drop-shadow(5px 5px 0 var(--ink))}
/* the card no longer clips (its slab may lift past the edge); only the mic is cut at the card's bottom */
.ft-call{overflow:visible}
.ft-call .mic{clip-path:inset(-60px -40px 12px -40px)}
/* the mic lives in a box the size of the card that clips its bottom; the card itself stays unclipped */
.micbox{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;border-radius:inherit}
.ft-call .micbox .mic{clip-path:none;overflow:visible}
.ft-call .micbox .mpf{z-index:3}

/* ================= ZOMBIE task board (owner) */
.ln.zt{max-width:min(560px,96%)!important;margin:0 auto}
.zt .bb{position:relative;display:grid;gap:5px;background:var(--paper)!important;border:2.5px solid var(--ink);border-radius:12px;padding:10px 12px;box-shadow:4px 4px 0 var(--ink);text-align:left;overflow:visible}
.zk{justify-self:start;font:700 9.5px/1 var(--disp);text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--paper)!important;border-radius:999px;padding:3px 8px 2px}
.zt-f .zk{background:var(--accent);color:var(--accent-ink)!important}
.zti{font:700 15px/1.2 var(--disp)}
.zme{font-size:12.5px;opacity:.85}.zme em{font-style:normal;font-weight:700;background:var(--caution);color:#1a1a1a;border-radius:4px;padding:1px 5px 0;margin-right:6px}
.zq{position:relative;display:flex;align-items:center;gap:8px;height:24px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--paper) 80%,var(--pb,var(--paper)))}
.zr{position:absolute;inset:0;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--accent) 70%,var(--paper)) 0 8px,var(--accent) 8px 16px);transform-origin:0 50%;animation:zDrain var(--ms) linear forwards}
@keyframes zDrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.zc{position:relative;z-index:1;padding:0 10px;font:700 11.5px/1 var(--disp);background:var(--paper);border-radius:999px;margin-left:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zv{font-style:normal;font-size:1.2em}.zd{font-style:normal;font-weight:600;opacity:.7}
.zq.zok .zr{animation:none;transform:none;background:color-mix(in srgb,#2e7d32 80%,var(--paper))}
.zq.zx .zr{animation:none;transform:none;background:#b3261e;opacity:.35}
.zq.zo{padding:0 10px;font:700 11.5px/1 var(--disp);border-style:dashed}
.zap{display:flex;flex-wrap:wrap;gap:6px}
.zh{display:inline-flex;align-items:center;gap:5px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:2px 9px 2px 2px;font:600 12px/1 var(--disp);transition:opacity .3s,transform .3s}
.zh .av{width:22px;height:22px;font-size:9px;border-width:2px;box-shadow:none}
.zh.zwin{background:var(--accent);color:var(--accent-ink);transform:scale(1.08)}.zh.zlose{opacity:.4}
.zstamp{position:absolute;right:10px;top:8px;font:800 15px/1 var(--disp);text-transform:uppercase;letter-spacing:.06em;color:#2e7d32;border:3px solid #2e7d32;border-radius:8px;padding:4px 8px 2px;background:color-mix(in srgb,var(--paper) 85%,transparent);pointer-events:none}
.zt .zstamp:is(:only-child){display:none}
.zdone .zstamp{color:#2e7d32}
.zx~.zstamp,.zt:has(.zx) .zstamp{color:#b3261e;border-color:#b3261e}
@media (max-width:760px){.zti{font-size:13.5px}.zstamp{font-size:12px}}
@media (prefers-reduced-motion:reduce){.zr{animation:none}}
.ln.sys.zt .bb>.zk{background:var(--ink)!important;color:var(--paper)!important}
.ln.sys.zt.zt-f .bb>.zk{background:var(--accent)!important;color:var(--accent-ink)!important}
.ln.sys.zt .bb>.zq{background:color-mix(in srgb,var(--paper) 80%,var(--pb,var(--paper)))!important}
.ln.sys.zt .bb>.zap,.ln.sys.zt .bb>.zme,.ln.sys.zt .bb>.zti{background:none!important}

/* square and tablet shapes: the two tall panels would pinch into strips, so the roster goes to two wide rows and the preview becomes a strip under it */
@media (min-width:761px) and (min-height:561px) and (max-aspect-ratio:4/3){
 .sel{grid-template:'top' auto 'ros' minmax(0,1fr) 'pv' auto 'more' auto/minmax(0,1fr);gap:6px}
 .roster{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1.5fr) minmax(0,1fr);gap:14px 16px;padding:18px 18px 0 18px}
 .ft-b1,.ft-b2{grid-row:1;grid-column:span 2}
 .roster>.ft:nth-child(n){margin:0}
 .pv{transform:none;padding:0;height:clamp(130px,17vh,172px)}
 .pv .ghosts{display:none}
 .hs{grid-template:'orb bub hot' auto/auto minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-content:center;align-items:center;padding:6px 18px}
 .pv-lad,.pv .pv-gh{display:none}
 .pv-hot{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;align-content:center;padding-top:22px;padding-bottom:14px}
 .pv-hot>:not(.acts){grid-column:1}.pv-hot .acts{grid-column:2;grid-row:1/span 4;margin:0}
 .pv-hot .big{font-size:26px;line-height:1.1}.pv-hot h3{font-size:15px;margin:0}.pv-hot p{font-size:12px;margin:0}
 body[data-view=select] #wires{display:none}
}

/* about 2:1 and wider: the four-across small cards pinch here too, so the roster takes the same two rows and fills the column to the bottom; the preview keeps its side column */
@media (min-width:761px) and (min-height:561px) and (min-aspect-ratio:19/10){
 .roster{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1.5fr) minmax(0,1fr);gap:14px 16px;padding:18px 14px 2px 18px}
 .ft-b1,.ft-b2{grid-row:1;grid-column:span 2}
 .roster>.ft:nth-child(n){margin:0}
 body[data-view=select] #wires{display:none}
}

/* short windows (owner, 2026-10-31): six cells in one row, or four beside the preview, pinch to strips where the label fills the cell and the art crushes.
   They take the same two wide rows as the 2:1 shape: Call and Chatroom over the four small cells */
@media (max-height:560px) and (min-height:331px) and (min-aspect-ratio:5/4){
 .roster{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1.35fr) minmax(0,1fr);gap:10px 12px;padding:10px 12px 4px 14px}
 .ft-b1,.ft-b2{grid-row:1;grid-column:span 2}
 .roster>.ft:nth-child(n){margin:0}
 .ft-v,.ft-sm .ft-v{left:6px;top:6px;bottom:6px;padding:4px 1px}
 .ft-v b{font-size:min(30px,calc((100cqh - 22px) / (var(--len) * .62)))}
 .ft-sm .ft-v b{font-size:min(22px,calc((100cqh - 22px) / (var(--len) * .62)))}
 .ft-in,.ft-sm .ft-in{padding:4px 6px 8px 44px}
 .ft::before,.ft-sm::before{left:44px}
 .win,.ft-sm .win,.ft-sm .win-cafe,.ft-sm .win-stage{left:42px;right:-6px;top:10px;bottom:30px;width:auto;height:auto}
 body[data-view=select] #wires{display:none}
}
/* the phone layout's labels run sideways, so in a short phone window they size to the cell's width instead */
@media (max-height:560px) and (min-height:331px) and (min-aspect-ratio:5/4) and (max-width:760px){
 .roster .ft .ft-v b{font-size:min(40px,calc((100cqw - 34px) / (var(--len) * .72)))!important}
 .roster .ft-sm .ft-v b{font-size:min(19px,calc((100cqw - 34px) / (var(--len) * .72)))!important}
}

/* every shape between square and 2:1 under 960 tall (owner, 2026-10-31): the three-column roster stacks four small cells in one column, and past 4:3 they snap to scrunched strips.
   They keep the two wide rows and the preview's side column. The three-column roster stays only where four stacked cells have the height for it */
@media (min-width:761px) and (min-height:561px) and (max-height:960px) and (min-aspect-ratio:1334/1000){
 .roster{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1.5fr) minmax(0,1fr);gap:14px 16px;padding:18px 14px 2px 18px}
 .ft-b1,.ft-b2{grid-row:1;grid-column:span 2}
 .roster>.ft:nth-child(n){margin:0}
 body[data-view=select] #wires{display:none}
}
/* near square and not tall: the preview strip under the roster leaves the rows too little height, so it goes, as it does in short windows */
@media (min-width:761px) and (min-height:561px) and (max-height:820px) and (max-aspect-ratio:4/3){
 .sel{grid-template:'top' auto 'ros' minmax(0,1fr) 'more' auto/minmax(0,1fr)}
 .pv{display:none}
}
/* phone width but near square: six stacked rows have no height, so the same two wide rows */
@media (max-width:760px) and (min-height:561px) and (min-aspect-ratio:9/10){
 .roster{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1.35fr) minmax(0,1fr);gap:10px 12px;padding:10px 12px 4px 14px}
 .ft-b1,.ft-b2{grid-row:1;grid-column:span 2}
 .roster>.ft:nth-child(n){margin:0}
 .roster .ft .ft-v b{font-size:min(40px,calc((100cqw - 34px) / (var(--len) * .72)))!important}
 .roster .ft-sm .ft-v b{font-size:min(19px,calc((100cqw - 34px) / (var(--len) * .72)))!important}
}
/* short and narrow: six cells in one row is the worst case left, so two columns of three */
@media (max-height:560px) and (min-height:331px) and (max-aspect-ratio:5/4){
 .roster{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px 10px;padding:8px 12px 4px 12px}
 .ft-b1,.ft-b2{grid-row:auto;grid-column:auto}
 .roster>.ft:nth-child(n){margin:0}
 .roster .ft .ft-v b,.roster .ft-sm .ft-v b{font-size:min(24px,calc((100cqw - 34px) / (var(--len) * .72)))!important}
}
/* near square just past phone width: the same compact measures as the phone tier beside it, so crossing 760 does not halve the cells */
@media (min-width:761px) and (min-height:561px) and (max-height:820px) and (max-aspect-ratio:4/3){
 .sel{padding:0 12px 6px;gap:4px}
 .roster{grid-template-rows:minmax(0,1.35fr) minmax(0,1fr);gap:10px 12px;padding:10px 12px 4px 14px}
}
/* the preview's side column grows with the window from nothing, so it never arrives all at once and takes a third of the cells' width in one step */
@media (min-width:761px) and (min-height:561px) and (max-height:960px) and (min-aspect-ratio:1334/1000){
 .sel{grid-template:'top top' auto 'ros pv' minmax(0,1fr) 'more more' auto/minmax(0,1fr) clamp(0px,calc((100vw - 980px) * 1.6),36%);column-gap:clamp(0px,calc((100vw - 980px) * .5),44px)}
}
@media (min-width:1301px) and (min-height:561px) and (max-height:960px) and (min-aspect-ratio:1334/1000){
 .sel{grid-template-columns:minmax(0,1fr) clamp(0px,calc((100vw - 980px) * 1.6),33%)}
}
@media (min-width:761px) and (max-height:560px) and (min-aspect-ratio:5/4){
 .sel{grid-template:'top top' auto 'ros pv' minmax(0,1fr) 'more more' auto/minmax(0,1fr) clamp(0px,calc(100vw - 760px),31%);gap:4px clamp(0px,calc((100vw - 760px) * .25),36px)}
 .pv{display:block;padding:4px 0 2px}
}
/* while that column is still narrow: nothing under 120 wide, then the orb and the offer stacked, with the bubble and side notes held back until they fit */
@media (min-width:761px) and (max-width:1054px) and (min-height:561px) and (max-height:960px) and (min-aspect-ratio:1334/1000){.pv{visibility:hidden}}
@media (min-width:761px) and (max-width:879px) and (max-height:560px) and (min-aspect-ratio:5/4){.pv{visibility:hidden}}
@container pv (max-width:259px){
 .hs{grid-template:'orb' auto 'hot' auto/minmax(0,1fr);gap:8px;align-content:center;justify-items:center;padding:8px 8px 8px 12px}
 .pv-bub,.pv .ghosts,.pv-lad,.pv .pv-gh{display:none}
 .pv-orb{width:min(84px,60cqw);transform:translateZ(90px)}
 .pv-orb small{display:none}
 .pv-hot{width:100%;box-sizing:border-box;padding:12px 10px 10px 14px;transform:translateZ(48px)}
 .pv-hot h3{font-size:13px;margin:0}.pv-hot p{display:none}.pv-hot .big{font-size:18px}
 .pv-hot .btn.big{font-size:13px;min-height:30px;padding:3px 10px 0}
 .pv-hot .acts{margin-top:6px}
}
/* the smallest windows (owner, 2026-10-31): the menu still has 216 of its 223 tall at 300, so six rows and columns here were the squish. Same two rows as just above, down to the browser's floor */
@media (max-height:330px){
 .roster{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1.35fr) minmax(0,1fr);gap:8px 10px;padding:6px 10px 4px 10px;transform:none}
 .ft-b1,.ft-b2{grid-row:1;grid-column:span 2}
 .roster>.ft:nth-child(n){margin:0}
 .ft-v,.ft-sm .ft-v{left:6px;top:6px;bottom:6px;padding:4px 1px}
 .ft-in,.ft-sm .ft-in{padding:4px 6px 8px 44px}
 .ft::before,.ft-sm::before{left:44px}
 .win,.ft-sm .win,.ft-sm .win-cafe,.ft-sm .win-stage{left:42px;right:-6px;top:10px;bottom:28px;width:auto;height:auto}
 .ft-t .ft-n{display:block}
 body[data-view=select] #wires{display:none}
}
/* labels run sideways at phone width and upright past it, so each sizes to the cell edge it runs along */
@media (max-height:330px) and (max-width:760px){
 .roster .ft .ft-v b{font-size:min(40px,calc((100cqw - 34px) / (var(--len) * .72)))!important}
 .roster .ft-sm .ft-v b{font-size:min(19px,calc((100cqw - 34px) / (var(--len) * .72)))!important}
}
@media (max-height:330px) and (min-width:761px){
 .roster .ft .ft-v b{font-size:min(26px,calc((100cqh - 20px) / (var(--len) * .66)))!important}
 .roster .ft-sm .ft-v b{font-size:min(20px,calc((100cqh - 20px) / (var(--len) * .66)))!important}
}