/* ASH TV · Office Cam — a 3D room, watched like a broadcast
   Palette from the-ashen-complete-rebrand/01-brandbook-and-guidelines/the-ashen-colours.json */
:root{
  --obsidian:#0B0B0D; --cherry:#310710; --crimson:#79091A; --ruby:#A61129; --highlight:#BC2237;
  --bone:#E8DFD2; --ash:#B9B1AF; --charcoal:#141416;
  --line:rgba(166,17,41,.4); --line-soft:rgba(185,177,175,.14);
  --display:Georgia,"Times New Roman",serif; --sans:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif; --mono:Consolas,"Cascadia Mono","SF Mono",Menlo,monospace;
  --logo:url("../the-ashen-complete-rebrand/02-approved-logo/the-ashen-deep-soul-red.png");
  --world:url("../the-ashen-complete-rebrand/03-brand-world-and-apparel/the-ashen-brand-world.png");
  --fit:1; --cam:none; --camdur:4s; --iyaw:0deg;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#000;color:var(--bone);font-family:var(--sans);font-size:15px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}
.emblem{--h:40px;width:calc(var(--h)*.648);height:var(--h);background:url("flame.png") center/contain no-repeat}
.lockup{}

/* ---------- stage ---------- */
#stage{position:fixed;inset:0;overflow:hidden;background:#000}
#viewport{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform:translate(-50%,-50%) scale(var(--fit));transform-origin:center;background:#050506;overflow:hidden}
#scene{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 44%}
#room{position:absolute;left:0;top:0;width:1600px;height:900px;transform-style:preserve-3d;transform:var(--cam);transition:transform var(--camdur) cubic-bezier(.45,.02,.2,1)}
#room.cut{transition:none}
#room{pointer-events:none}#room *{pointer-events:auto}#room .set{pointer-events:none}   /* the room's own (front) plane must not swallow clicks meant for things behind it */
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
#grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen}

/* ---------- room surfaces ---------- */
.wall,.floor,.ceiling{position:absolute;transform-style:preserve-3d;backface-visibility:visible}
#props,#actors,.set{position:absolute;left:0;top:0;transform-style:preserve-3d}   /* without this the groups flatten and desks never occlude the players */
.set{width:1600px;height:900px}
#fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .45s;z-index:25}
#fade.on{opacity:1}
.wall{background:
  linear-gradient(180deg,rgba(0,0,0,.45),transparent 25%,transparent 75%,rgba(0,0,0,.55)),
  repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 2px,transparent 2px 160px),
  linear-gradient(90deg,#101013,#17171b 50%,#0f0f12)}
.wall.back{left:0;top:0;width:1600px;height:900px;transform:translateZ(-1000px)}
.wall.left{left:0;top:0;width:1000px;height:900px;transform-origin:left;transform:rotateY(90deg);background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 25%,transparent 75%,rgba(0,0,0,.6)),linear-gradient(90deg,#141418,#1d1d22)}
.wall.right{left:600px;top:0;width:1000px;height:900px;transform-origin:right;transform:rotateY(-90deg);background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 25%,transparent 75%,rgba(0,0,0,.6)),linear-gradient(90deg,#1d1d22,#141418)}
.skirting{position:absolute;left:0;right:0;bottom:0;height:16px;background:linear-gradient(#232328,#0d0d10);border-top:1px solid rgba(232,223,210,.14)}
.floor{left:0;top:900px;width:1600px;height:1000px;transform-origin:top;transform:rotateX(-90deg);background:radial-gradient(60% 60% at 50% 60%,#1a1a1f,#0b0b0d 90%)}
.floor .rug{position:absolute;left:280px;top:180px;width:1040px;height:600px;background:linear-gradient(180deg,rgba(121,9,26,.35),rgba(49,7,16,.45));border:1px solid rgba(166,17,41,.35);box-shadow:inset 0 0 80px rgba(0,0,0,.5)}
.floor .grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(185,177,175,.06) 0 1px,transparent 1px 100px),repeating-linear-gradient(0deg,rgba(185,177,175,.06) 0 1px,transparent 1px 100px);-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%)}
.ceiling{left:0;top:0;width:1600px;height:1000px;transform-origin:top;transform:rotateX(-90deg);background:linear-gradient(180deg,#0a0a0c,#060607)}
.ceiling .lamp{position:absolute;top:380px;width:260px;height:70px;border-radius:6px;background:linear-gradient(#2a2a30,#1a1a1f);box-shadow:0 0 90px 30px rgba(232,223,210,.08)}
.ceiling .lamp::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:6px;background:rgba(232,223,210,.55);border-radius:3px;filter:blur(1px)}
.ceiling .l1{left:220px}.ceiling .l2{left:670px}.ceiling .l3{left:1120px}

/* back wall décor */
.door{position:absolute;left:40px;top:530px;width:160px;height:370px;background:#1b1b20;border:5px solid #2a2a31;border-bottom:0;box-shadow:0 0 0 1px #0a0a0c}
.door .leaf{position:absolute;inset:0;background:linear-gradient(90deg,#1a1a1f,#232329 45%,#1a1a1f);box-shadow:inset 0 0 40px rgba(0,0,0,.6);transition:box-shadow .3s}
.door .panel{position:absolute;left:22px;right:22px;top:26px;height:130px;border:2px solid rgba(232,223,210,.08);border-radius:2px}
.door .panel.low{top:190px;height:150px}
.door .handle{position:absolute;right:16px;top:178px;width:26px;height:6px;border-radius:3px;background:linear-gradient(#c9c2b8,#8d867f);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.door::after{content:"";position:absolute;left:-40px;right:-40px;bottom:0;height:14px;background:radial-gradient(50% 100% at 50% 100%,rgba(121,9,26,.25),transparent)}
.door.side{cursor:pointer}
.door.side:hover .leaf{box-shadow:inset 0 0 40px rgba(0,0,0,.6),inset 0 0 0 3px var(--ruby)}
.door .sign{position:absolute;left:50%;top:-44px;transform:translateX(-50%);white-space:nowrap;padding:6px 14px;border:1px solid var(--line);background:rgba(11,11,13,.85);font-family:var(--display);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone)}
.wall.left .door.side{left:350px}
.wall.right .door.side{left:490px}
.window{position:absolute;left:400px;top:90px;width:330px;height:320px;border:8px solid #1c1c21;background:#000;box-shadow:inset 0 0 60px rgba(0,0,0,.8),0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.window .view{position:absolute;inset:0;background:var(--world) 55% 40%/cover;opacity:.92;animation:drift 50s ease-in-out infinite alternate}
.window::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:8px;background:#1c1c21;transform:translateX(-50%)}
@keyframes drift{from{transform:scale(1.05) translateX(0)}to{transform:scale(1.1) translateX(-12px)}}
.wall-emblem{position:absolute;left:760px;top:130px;--h:170px;filter:drop-shadow(0 18px 26px rgba(0,0,0,.75))}
.wallscreen{position:absolute;left:900px;top:90px;width:520px;height:320px;cursor:pointer;background:#050506;border:7px solid #1a1a1e;box-shadow:0 0 0 1px #000,0 20px 50px rgba(0,0,0,.6),inset 0 0 40px rgba(121,9,26,.15);padding:14px 18px;font-family:var(--mono);color:var(--ash);overflow:hidden}
.wallscreen:hover{box-shadow:0 0 0 2px var(--ruby),0 20px 50px rgba(0,0,0,.6),0 0 70px rgba(188,34,55,.35)}
.wallscreen.on{box-shadow:0 0 0 1px #000,0 20px 50px rgba(0,0,0,.6),0 0 60px rgba(188,34,55,.25),inset 0 0 40px rgba(121,9,26,.2)}
.ws-title{font-family:var(--display);color:var(--bone);letter-spacing:.3em;font-size:15px;text-transform:uppercase;display:flex;justify-content:space-between}.ws-title small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ash)}
.ws-sub{font-size:10px;letter-spacing:.14em;margin-top:2px}
.ws-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:8px 0 4px}
.ws-score b{font-size:64px;color:var(--bone);font-weight:400;line-height:1}
.ws-score b.o{color:var(--ash);text-align:right}
.ws-score span{font-size:13px;color:var(--bone);letter-spacing:.14em;text-align:center}
.ws-score span em{display:block;font-style:normal;color:var(--highlight);font-size:11px;margin-top:4px}
.ws-rows{display:grid;grid-template-columns:1fr 1fr;gap:3px 22px;font-size:13px;margin-top:8px}
.ws-rows div{display:flex;justify-content:space-between;white-space:nowrap}
.ws-rows div b{color:var(--bone);font-weight:400}
.ws-rows div.o{color:var(--ash)}
.ws-live{color:var(--bone);background:var(--crimson);padding:2px 8px;border-radius:2px;animation:pulse 2.4s ease-in-out infinite}
.ws-idle{display:grid;place-items:center;height:100%;text-align:center}
.ws-idle .emblem{--h:90px;margin-bottom:8px}

/* frames */
.frame{position:absolute;border:5px solid #1e1e23;background:#000;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.frame img{width:100%;height:100%;object-fit:cover;opacity:.9}
.frame.small{width:70px;height:70px}
.frame.small.a{left:1440px;top:120px}.frame.small.b{left:1440px;top:200px}
.wall.left .frame.apparel{left:90px;top:330px;width:220px;height:132px}
.wall.left .board{position:absolute;left:560px;top:470px;width:380px;height:280px;background:linear-gradient(160deg,#1c1c22,#111115);border:4px solid #3a3a42;border-radius:3px;box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,223,210,.06);padding:14px 16px;color:var(--bone)}
.b-head{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid rgba(232,223,210,.14)}
.b-title{font-family:var(--display);font-size:14px;letter-spacing:.3em;text-transform:uppercase}
.b-sub{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--ash)}
.b-map{position:absolute;left:16px;top:52px;width:180px;height:180px}
.b-map rect{fill:rgba(232,223,210,.03);stroke:rgba(232,223,210,.25);stroke-width:1}
.b-map .lane{fill:none;stroke:rgba(232,223,210,.35);stroke-width:1.2;stroke-linecap:round}
.b-map .river{fill:none;stroke:rgba(185,177,175,.3);stroke-width:3;stroke-dasharray:1 3;stroke-linecap:round}
.b-map .mark{fill:none;stroke:var(--highlight);stroke-width:2}
.b-map .arrow{fill:none;stroke:var(--highlight);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-map .dot{fill:var(--bone)}
.b-notes{position:absolute;left:210px;right:16px;top:64px;display:grid;gap:14px}
.b-notes i{display:block;height:3px;border-radius:2px;background:rgba(232,223,210,.55)}
.b-tray{position:absolute;left:30px;right:30px;bottom:-16px;height:12px;background:linear-gradient(#3a3a42,#26262c);border-radius:0 0 3px 3px;box-shadow:0 4px 8px rgba(0,0,0,.5)}
.b-tray b{position:absolute;left:14px;top:-5px;width:48px;height:7px;border-radius:3px;background:#d9d3c8}
.b-tray b.r{left:70px;background:var(--ruby)}
.wall.right .frame.poster{left:250px;top:290px;width:176px;height:220px}
.wall.right .frame.small.c{left:200px;top:340px;width:100px;height:100px}

/* ---------- boxes (props) ---------- */
.box{position:absolute;left:0;top:0;transform-style:preserve-3d}
.box .f{position:absolute;left:0;top:0;backface-visibility:visible}
.box .front{}
.box .top{transform-origin:top;transform:rotateX(-90deg)}
.box .left{transform-origin:left;transform:rotateY(90deg)}
.box .right{transform-origin:left;transform:rotateY(90deg)}
.box .back{}
.desk-top{background:linear-gradient(180deg,#2a2a31,#1e1e24);border-bottom:1px solid rgba(232,223,210,.12)}
.desk-front{background:linear-gradient(180deg,#1e1e24,#0f0f12);border-top:2px solid rgba(232,223,210,.22)}
.desk-side{background:linear-gradient(180deg,#171719,#0b0b0d)}
.mon-front{background:#050506;border:3px solid #202025;overflow:hidden;box-shadow:0 0 0 1px #000}
.mon-front canvas{width:100%;height:100%;display:block}
.mon-front .led{position:absolute;right:4px;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--ash)}
.mon-front.on .led{background:var(--highlight);box-shadow:0 0 6px var(--highlight)}
.mon-front.on{box-shadow:0 0 0 1px #000,0 0 40px rgba(188,34,55,.35)}
.mon-side{background:#141417}
.fridge-front{background:linear-gradient(90deg,#34343b,#202025 60%,#18181c);border:2px solid #3a3a42;border-radius:8px 8px 3px 3px}
.fridge-front::before{content:"";position:absolute;left:12px;top:60px;width:6px;height:120px;border-radius:3px;background:#55555e}
.fridge-front::after{content:"";position:absolute;left:0;right:0;top:120px;height:2px;background:#0a0a0c}
.fridge-front .emblem{position:absolute;left:50%;top:190px;transform:translateX(-50%);--h:34px}
.fridge-side{background:#1a1a1e}.fridge-top{background:#2a2a30}
.counter-top{background:linear-gradient(#34343b,#24242a)}.counter-front{background:linear-gradient(#22222a,#121215);border-top:2px solid rgba(232,223,210,.2)}.counter-side{background:#17171b}
.couch-front{background:linear-gradient(#4a1020,#310710 70%,#220510);border-radius:8px 8px 3px 3px}
.couch-top{background:linear-gradient(#5a1526,#3f0c19)}.couch-side{background:#2c0810}
.couchback-front{background:linear-gradient(#4f1223,#3a0a16);border-radius:10px 10px 0 0}.couchback-top{background:#5a1526}
.chair-front{background:linear-gradient(#1f1f24,#121215);border-radius:6px 6px 2px 2px}.chair-top{background:#26262c}.chair-side{background:#151518}
.chairback-front{background:linear-gradient(180deg,#2b2b32,#17171b);border:2px solid #34343b;border-radius:14px 14px 4px 4px;box-shadow:inset 0 0 0 6px #1d1d22}
.chairback-front::after{content:"";position:absolute;left:16px;right:16px;top:30px;height:40px;border-radius:6px;background:linear-gradient(90deg,transparent,rgba(166,17,41,.35),transparent)}
.plant{position:absolute;left:0;top:0;width:0;height:0}
.plant i{position:absolute;bottom:0;left:-3px;width:6px;height:90px;background:#1f3a24;border-radius:3px;transform-origin:bottom}
.plant i:nth-child(1){transform:rotate(-28deg)}.plant i:nth-child(3){transform:rotate(28deg)}
.plant b{position:absolute;bottom:-2px;left:-20px;width:40px;height:44px;background:linear-gradient(#2e2e35,#1a1a1e);border-radius:3px 3px 8px 8px}

/* ---------- break room + trophy room props ---------- */
.table-top{background:linear-gradient(#2c2c33,#1e1e24);border-bottom:1px solid rgba(232,223,210,.12)}
.table-front{background:linear-gradient(#1e1e24,#141417)}.table-side{background:#17171b}
.leg-f{background:#111114}
.kettle-f{background:linear-gradient(#34343b,#1d1d22);border-radius:6px 6px 3px 3px}.kettle-t{background:#3c3c44}
.mug-f{background:var(--crimson)}.mug-t{background:#5a0d1c}.mug-f.ash{background:#8d867f}.mug-t.ash{background:#a39c95}
.cab-front{background:linear-gradient(#232329,#141417);border-top:2px solid rgba(232,223,210,.16)}.cab-top{background:#2a2a31}.cab-side{background:#17171b}
.ped-front{background:linear-gradient(#2d2d34,#151518);border-top:1px solid rgba(232,223,210,.2)}.ped-top{background:#34343b}.ped-side{background:#1c1c21}
.ped-front .plaque{position:absolute;left:12%;right:12%;top:18px;padding:7px 6px;border:1px solid var(--line);background:rgba(11,11,13,.7);font-family:var(--display);font-size:10px;letter-spacing:.22em;text-transform:uppercase;text-align:center;color:var(--bone);line-height:1.5}
.ped-front .plaque small{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--ash);text-transform:none}
.glass-f{background:rgba(232,223,210,.045);border:1px solid rgba(232,223,210,.22);box-shadow:inset 0 0 30px rgba(232,223,210,.04)}
.glass-t{background:rgba(232,223,210,.07);border:1px solid rgba(232,223,210,.22)}
.glass-s{background:rgba(232,223,210,.03);border:1px solid rgba(232,223,210,.16)}
.bill{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.bill>*{position:absolute;left:50%;bottom:0;transform:translateX(-50%) rotateY(var(--iyaw))}
.bill .emblem{filter:drop-shadow(0 10px 18px rgba(0,0,0,.7))}
.spot{position:absolute;left:0;top:0;width:200px;height:300px;margin-left:-100px;background:radial-gradient(50% 100% at 50% 100%,rgba(188,34,55,.22),transparent 70%);transform:rotateY(var(--iyaw))}
.honours{position:absolute;left:440px;top:230px;width:720px;height:440px;cursor:pointer;background:linear-gradient(160deg,#1a1a20,#101013);border:4px solid #3a3a42;padding:18px 22px;color:var(--bone);box-shadow:0 14px 40px rgba(0,0,0,.6)}
.honours .h-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px}
.honours .h-title{font-family:var(--display);font-size:24px;letter-spacing:.3em;text-transform:uppercase}
.honours .h-sub{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ash)}
.honours .h-row{display:grid;grid-template-columns:80px 1fr auto;gap:14px;font-family:var(--mono);font-size:14px;padding:7px 0;border-bottom:1px solid rgba(185,177,175,.08)}
.honours .h-row span{color:var(--ash)}
.honours .h-row b{font-weight:400;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.honours .h-row em{font-style:normal;font-size:11px;letter-spacing:.2em;padding:2px 8px;border-radius:2px;background:var(--crimson)}
.honours .h-row em.l{background:transparent;border:1px solid var(--line-soft);color:var(--ash)}
.honours .h-empty{color:var(--ash);font-size:12px}
.honours:hover{box-shadow:0 0 0 2px var(--ruby),0 14px 40px rgba(0,0,0,.6),0 0 60px rgba(188,34,55,.3)}
.tv{position:absolute;left:1000px;top:200px;width:320px;height:190px;background:#050506;border:6px solid #1a1a1e;box-shadow:0 0 0 1px #000,0 20px 50px rgba(0,0,0,.6);display:grid;place-items:center;text-align:center;color:var(--ash);font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.tv .emblem{--h:70px;margin:0 auto 6px}
.tv b{display:block;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.3em;color:var(--bone);text-transform:uppercase}
.tv-score .emblem{--h:54px;margin:0 auto 8px}
.tv-line{display:flex;align-items:center;justify-content:center;gap:10px}
.tv-line b{font-size:11px;letter-spacing:.2em;display:inline}
.tv-line b.o{color:var(--ash)}
.tv-line em{font-style:normal;font-size:34px;color:var(--bone);line-height:1}
.tv-line em.o{color:var(--ash)}
.tv-line i{font-style:normal;color:var(--ash)}
.tv-score small{display:block;margin-top:8px;font-size:10px;letter-spacing:.14em;color:var(--ash)}
.frame.big{width:420px;height:280px}
.frame.wide{width:320px;height:213px}
.cupboard{position:absolute;top:400px;width:180px;height:150px;background:linear-gradient(#26262c,#18181c);border:3px solid #2e2e35;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.cupboard::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#0d0d10}
.cupboard::after{content:"";position:absolute;left:50%;top:60px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:linear-gradient(#c9c2b8,#8d867f)}
.machine-f{background:linear-gradient(#2e2e35,#17171b);border-radius:4px 4px 2px 2px}.machine-t{background:#3a3a42}.machine-s{background:#1e1e23}
.machine-f::after{content:"";position:absolute;left:20%;right:20%;top:26%;height:8px;background:var(--crimson);border-radius:2px}
.micro-f{background:linear-gradient(#26262c,#141417);border:3px solid #34343b;border-radius:3px}
.micro-f::before{content:"";position:absolute;left:8%;top:14%;width:62%;height:64%;background:#050506;border:1px solid rgba(232,223,210,.12)}
.micro-f::after{content:"";position:absolute;right:9%;top:24%;width:8px;height:8px;border-radius:50%;background:var(--highlight);box-shadow:0 14px 0 var(--ash)}
.frame.tall{width:220px;height:275px}
.frame.mid{width:180px;height:180px}
.set .rug.brk{left:480px;top:220px;width:640px;height:420px;background:linear-gradient(180deg,rgba(49,7,16,.5),rgba(49,7,16,.35))}
.set .rug.trp{left:300px;top:120px;width:1000px;height:700px;background:linear-gradient(180deg,rgba(121,9,26,.3),rgba(49,7,16,.45))}

/* ---------- actors ---------- */
.actor{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transition:transform var(--dur,1s) linear,opacity .6s}
/* The billboard is a fixed 400x990 box, scaled to a third, clipped at the floor line. The cutout is laid out at its
   native height so Chrome rasterises it sharp; sitting slides the cutout down inside the box, so the plane never
   crosses the floor (which would break the 3D depth sorting). */
.actor .bb{position:absolute;left:-200px;bottom:0;width:400px;height:990px;overflow:hidden;transform-origin:50% 100%;transform:rotateY(var(--iyaw)) scale(.3333)}
.actor .bb img{position:absolute;bottom:0;left:50%;height:990px;transform:translateX(-50%);filter:drop-shadow(0 0 30px rgba(166,17,41,.2));animation:breathe 4s ease-in-out infinite;transform-origin:50% 100%;transition:bottom .7s cubic-bezier(.4,0,.2,1)}
.actor.seated .bb img{bottom:-180px}
.actor .shadow{position:absolute;left:50%;bottom:-10px;width:360px;height:70px;margin-left:-180px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.7),transparent 70%);transition:opacity .5s}
.actor.seated .shadow{opacity:0}
.actor.flip .bb img{transform:translateX(-50%) scaleX(-1);animation-name:breathef}
.actor.walking .bb img{animation:walk .42s ease-in-out infinite}
.actor.flip.walking .bb img{animation:walkf .42s ease-in-out infinite}
@keyframes walk{0%,100%{transform:translateX(-50%) translateY(0) rotate(-1.5deg)}50%{transform:translateX(-50%) translateY(-21px) rotate(1.5deg)}}
@keyframes walkf{0%,100%{transform:translateX(-50%) scaleX(-1) translateY(0) rotate(1.5deg)}50%{transform:translateX(-50%) scaleX(-1) translateY(-21px) rotate(-1.5deg)}}
@keyframes breathe{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.008)}}
@keyframes breathef{0%,100%{transform:translateX(-50%) scaleX(-1) scaleY(1)}50%{transform:translateX(-50%) scaleX(-1) scaleY(1.008)}}
.actor.hidden{opacity:0}
.actor .bb{cursor:pointer}
.actor .tag{position:absolute;left:50%;top:40px;transform:translateX(-50%);white-space:nowrap;padding:14px 30px;border:3px solid var(--line);border-radius:8px;background:rgba(11,11,13,.85);font-family:var(--display);font-size:38px;letter-spacing:.06em;color:var(--bone);opacity:0;transition:opacity .25s;pointer-events:none}
.actor .tag small{display:block;font-family:var(--sans);font-size:24px;letter-spacing:.3em;color:var(--ash);text-transform:uppercase;margin-top:4px}
.actor:hover .tag,.actor.focus .tag{opacity:1}
.actor:hover .bb img{filter:drop-shadow(0 0 60px rgba(188,34,55,.75))}
.actor.focus .bb img{filter:drop-shadow(0 0 70px rgba(188,34,55,.6))}
.actor.dim .bb img{filter:brightness(.55)}
.actor.speaking .bb img{filter:drop-shadow(0 0 60px rgba(188,34,55,.6))}

/* ---------- broadcast overlay ---------- */
.overlay{position:absolute;inset:0;pointer-events:none;font-family:var(--sans)}
.overlay>*{pointer-events:none}
.bug{position:absolute;left:28px;top:22px;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;background:rgba(11,11,13,.7);border:1px solid var(--line-soft);border-radius:3px;backdrop-filter:blur(8px)}
.bug-name{font-family:var(--display);letter-spacing:.3em;font-size:13px;text-transform:uppercase}
.bug-badge{font-family:var(--mono);font-size:10px;letter-spacing:.2em;padding:3px 7px;border:1px solid var(--ruby);border-radius:2px;color:var(--bone)}
.bug-badge.live{background:var(--crimson);border-color:var(--crimson);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.topright{position:absolute;right:28px;bottom:58px;display:flex;align-items:center;gap:8px;pointer-events:auto}
.roomnav{position:absolute;left:50%;top:22px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto}
.roomnav .ob.on{border-color:var(--ruby);color:var(--bone);background:rgba(121,9,26,.3)}
.clock{font-family:var(--mono);font-size:13px;color:var(--ash);padding:8px 12px;background:rgba(11,11,13,.6);border:1px solid var(--line-soft);border-radius:3px}
.ob{padding:8px 12px;border:1px solid var(--line-soft);border-radius:3px;font-size:11px;letter-spacing:.16em;color:var(--ash);background:rgba(11,11,13,.6);transition:all .2s}
.ob:hover{border-color:var(--ruby);color:var(--bone)}
.ticker{position:absolute;left:0;right:0;bottom:0;height:40px;display:flex;background:rgba(11,11,13,.86);border-top:1px solid var(--line);overflow:hidden}
.ticker-label{flex:none;padding:0 18px;display:flex;align-items:center;font-family:var(--display);font-size:11px;letter-spacing:.3em;background:var(--crimson);color:var(--bone)}
.ticker-track{flex:1;overflow:hidden;position:relative}
.ticker-text{position:absolute;white-space:nowrap;top:0;line-height:40px;font-family:var(--mono);font-size:12px;color:var(--ash);letter-spacing:.06em;animation:ticker var(--tdur,70s) linear infinite;padding-left:100%}
.ticker-text b{color:var(--bone);font-weight:400}
.ticker-text i{color:var(--highlight);font-style:normal;margin:0 14px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.hint{position:absolute;left:28px;bottom:58px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);padding:9px 16px;background:rgba(11,11,13,.6);border:1px solid var(--line-soft);border-radius:3px;transition:opacity .4s}
.hint.off{opacity:0}
.info{position:absolute;left:28px;top:136px;bottom:52px;width:min(480px,calc(100vw - 56px));pointer-events:auto;background:rgba(11,11,13,.9);border:1px solid var(--line);border-radius:4px;padding:14px 20px 16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 80px rgba(0,0,0,.7);transform:translateX(-30px);opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1);overflow:auto;scrollbar-width:thin}
.info::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--highlight),transparent)}
.info.show{opacity:1;transform:none;pointer-events:auto}
.info:not(.show){pointer-events:none}
#btnBack{position:absolute;left:28px;top:90px;pointer-events:auto}
.i-role{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--highlight);font-weight:600}
.i-name{font-family:var(--display);font-size:32px;letter-spacing:.03em;line-height:1;margin:4px 0 4px}
.i-nick{font-family:var(--display);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.i-tag{margin:8px 0 0;font-family:var(--display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);border-left:2px solid var(--crimson);padding-left:12px}
.i-muted{color:var(--ash);margin:0}
.i-sec{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.i-sec .lbl,.lbl{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);font-weight:600}
.i-match{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.i-chip{font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding:5px 10px;border-radius:2px;background:var(--crimson);color:var(--bone)}
.i-chip.loss{background:transparent;border:1px solid var(--line-soft);color:var(--ash)}
.i-vsline{font-family:var(--mono);font-size:11px;color:var(--ash);letter-spacing:.02em;flex:1;min-width:0}
.i-champ{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;margin-top:10px}
.i-champ b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.04em}
.i-champ small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.i-kda3{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;margin-top:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.i-kda3>div{padding:9px 6px 8px;text-align:center;border-right:1px solid var(--line-soft)}
.i-kda3>div:last-child{border-right:0}
.i-kda3 b{display:block;font-family:var(--mono);font-weight:400;font-size:32px;line-height:1;color:var(--bone)}
.i-kda3 span{display:block;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);margin-top:5px}
.i-kda3 .ratio{background:rgba(121,9,26,.16)}
.i-kda3 .ratio b{color:var(--highlight);font-size:24px;padding-top:5px}
.i-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.i-tiles>div{background:rgba(20,20,22,.9);border:1px solid var(--line-soft);border-radius:3px;padding:7px 10px}
.i-tiles span{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);white-space:nowrap}
.i-tiles b{display:block;font-family:var(--mono);font-weight:400;font-size:18px;color:var(--bone);margin-top:2px}
.i-tiles b i{font-style:normal;font-size:13px;color:var(--ash);margin-left:2px}
.i-duel{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;margin-top:6px}
.i-duel .me,.i-duel .op{min-width:0}
.i-duel .op{text-align:right;color:var(--ash)}
.i-duel b{display:block;font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.i-duel span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-top:3px}
.i-duel em{display:block;font-style:normal;font-family:var(--mono);font-size:16px;margin-top:4px;color:var(--bone)}
.i-duel .op em{color:var(--ash)}
.i-duel .mid{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);padding-top:6px}
.i-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin-top:6px}
.i-table th{text-align:left;font-family:var(--sans);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);padding:4px 6px;border-bottom:1px solid var(--line-soft)}
.i-table td{padding:6px 6px;border-bottom:1px solid rgba(185,177,175,.07);white-space:nowrap}
.i-table td.r{text-align:right}
.i-table td.wrap{white-space:normal;line-height:1.3}
.i-table tr.op td{color:var(--ash)}
.i-table tr.head td{font-family:var(--display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);padding-top:12px;border-bottom:0}
.i-table tr.head td.op{color:var(--ash)}
.i-table tr.head td b{color:var(--highlight);font-weight:400}
.i-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin-top:8px}
.i-score b{font-family:var(--mono);font-size:44px;font-weight:400;line-height:1}
.i-score b.o{color:var(--ash);text-align:right}
.i-score span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:center;color:var(--bone)}
.i-score span em{display:block;font-style:normal;color:var(--highlight);font-size:10px;margin-top:3px}
.flag{display:inline-block;width:18px;height:12px;vertical-align:-1px;margin-right:8px;border:1px solid rgba(0,0,0,.5);background:#555}
.flag[data-c="GB"]{background:linear-gradient(#C8102E,#C8102E) center/100% 2px no-repeat,linear-gradient(#C8102E,#C8102E) center/2px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 4px no-repeat,linear-gradient(#fff,#fff) center/4px 100% no-repeat,linear-gradient(45deg,transparent 46%,#fff 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff 46% 54%,transparent 54%),#012169}
.flag[data-c="FR"]{background:linear-gradient(90deg,#0055A4 0 33.3%,#fff 33.3% 66.6%,#EF4135 66.6%)}
.flag[data-c="IT"]{background:linear-gradient(90deg,#009246 0 33.3%,#fff 33.3% 66.6%,#CE2B37 66.6%)}
.flag[data-c="RO"]{background:linear-gradient(90deg,#002B7F 0 33.3%,#FCD116 33.3% 66.6%,#CE1126 66.6%)}
.flag[data-c="DK"]{background:linear-gradient(#fff,#fff) 6px 0/2px 100% no-repeat,linear-gradient(#fff,#fff) 0 5px/100% 2px no-repeat,#C8102E}
@media (max-width:700px){.info{left:12px;right:12px;width:auto;top:80px}}
@media (max-height:680px){.info{top:120px;padding:10px 16px 12px}.i-name{font-size:28px}.i-kda3 b{font-size:26px}.i-kda3>div{padding:6px 4px}.i-tiles b{font-size:16px}.i-tag{margin-top:4px}.i-sec{margin-top:8px;padding-top:6px}}

/* ---------- intro ---------- */
#intro{position:absolute;inset:0;z-index:30;display:grid;place-content:center;justify-items:center;gap:8px;background:#000;text-align:center;transition:opacity .8s}
#intro.gone{opacity:0;pointer-events:none}
#intro img{width:min(420px,70vw)}
.intro-eyebrow{font-family:var(--display);letter-spacing:.4em;text-transform:uppercase;font-size:14px;color:var(--ash);margin-bottom:22px}
#intro p{color:var(--ash);font-size:14px;margin:6px 0 14px;max-width:46ch}
.start{padding:14px 34px;background:var(--crimson);border:1px solid var(--crimson);border-radius:3px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--bone);transition:background .2s}
.start:hover{background:var(--ruby)}
#intro small{color:var(--ash);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-top:12px}

@media (prefers-reduced-motion:reduce){.actor img,.window .view,.ticker-text,.bug-badge{animation:none!important}#room{transition:none}}