/* The Ship, painted (p4): overrides on ship.css for the living paintings */
.poster{object-fit:cover;filter:saturate(.95)}
.lay.gl{opacity:0;transition:opacity .9s ease}
.room.live .lay.gl{opacity:1}
.room.live .poster{visibility:hidden;transition:visibility 0s .9s}
.stage{touch-action:none;cursor:grab}.stage:active{cursor:grabbing}
.room .ui{touch-action:pan-y}
.vig{background:linear-gradient(to bottom,rgba(0,0,0,.32),transparent 14%,transparent 78%,rgba(0,0,0,.8) 100%),linear-gradient(to right,rgba(0,0,0,.42),transparent 12%,transparent 88%,rgba(0,0,0,.42)),radial-gradient(ellipse 80% 75% at 50% 48%,transparent 62%,rgba(0,0,0,.42) 100%)}
/* brass controls that softly breathe */
@keyframes brass{0%,100%{box-shadow:0 0 0 1px rgba(212,165,55,.45),0 0 14px rgba(255,190,90,.12),inset 0 0 12px rgba(255,214,140,.06)}50%{box-shadow:0 0 0 1px rgba(255,214,140,.75),0 0 26px rgba(255,190,90,.3),inset 0 0 16px rgba(255,214,140,.14)}}
.go:not(.quiet){border-radius:999px;padding:12px 26px;background:radial-gradient(120% 140% at 50% 0%,rgba(255,214,140,.14),rgba(40,26,10,.55) 60%,rgba(10,6,2,.55));
 animation:brass 3.6s ease-in-out infinite;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.go:not(.quiet):hover,.go:not(.quiet):focus-visible{background:radial-gradient(120% 140% at 50% 0%,rgba(255,224,150,.3),rgba(60,38,12,.6) 60%,rgba(10,6,2,.55))}
.row .go:not(.quiet)+.go:not(.quiet){animation-delay:-1.2s}
.opt::before{width:7px;height:7px;border-radius:50%;top:20px;left:9px;background:radial-gradient(circle,#ffe8b0,#d4a537 55%,rgba(212,165,55,0) 72%);box-shadow:0 0 8px rgba(255,200,110,.7);opacity:.85;animation:stud 3.2s ease-in-out infinite}
.opt:nth-child(2)::before{animation-delay:-1s}.opt:nth-child(3)::before{animation-delay:-2s}
@keyframes stud{50%{box-shadow:0 0 14px rgba(255,210,120,.95);opacity:1}}
.opt:hover::before,.opt:focus-visible::before{width:9px;opacity:1}
.hold .bg{stroke:rgba(212,165,55,.45)}.hold{animation:brassR 3.6s ease-in-out infinite;border-radius:50%}
@keyframes brassR{50%{box-shadow:0 0 28px rgba(255,190,90,.28)}}
.arch{animation:brass 4.2s ease-in-out infinite}.door:nth-child(2) .arch{animation-delay:-.8s}.door:nth-child(3) .arch{animation-delay:-1.6s}.door:nth-child(4) .arch{animation-delay:-2.4s}.door:nth-child(5) .arch{animation-delay:-3.2s}
.door:hover .arch,.door:focus-visible .arch{animation:none}
/* lobby: the hall painting is the room; the doors sit low, over the floor */
.room[data-room=lobby] .doors{top:auto;bottom:calc(5vh + env(safe-area-inset-bottom));transform:none}
.room[data-room=lobby] .door{width:clamp(110px,12vw,170px)}
.room[data-room=lobby] .lobby-h{top:calc(7% + env(safe-area-inset-top))}
.room[data-room=lobby] .lobby-h .t{text-shadow:0 0 18px #000,0 0 6px #000}
.room[data-room=lobby]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.18) 60%,rgba(0,0,0,.34));z-index:0}
.room[data-room=lobby] .ui{z-index:2}
@media (max-width:760px){.room[data-room=lobby] .door{width:calc(33.3% - 10px)}}
/* sound and tilt, beside the site menu */
#mute,#tilt{position:fixed;z-index:20;top:calc(6px + env(safe-area-inset-top));height:32px;border:0;border-radius:9px;background:transparent;color:#e9dcb8;opacity:.5;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
#mute{right:calc(42px + env(safe-area-inset-right));width:32px}
#mute svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}#mute .x{display:none}#mute.off .w{display:none}#mute.off .x{display:inline}
#tilt{right:calc(80px + env(safe-area-inset-right));padding:0 9px;font:12px/1 var(--sans,system-ui);letter-spacing:.2em;box-shadow:0 0 0 1px rgba(212,165,55,.45)}
#tilt.on{opacity:1;color:#ffe08a;box-shadow:0 0 0 1px rgba(255,224,138,.9),0 0 14px rgba(255,200,110,.4)}#tilt.no{opacity:.3}
#mute:hover,#mute:focus-visible,#tilt:hover,#tilt:focus-visible{opacity:1;outline:none}
#tilt[hidden]{display:none}
.meter{top:calc(48px + env(safe-area-inset-top))}
html.sitting #mute,html.sitting #tilt,html.sitting .smenu-btn{opacity:.12;transition:opacity 2s}
/* the window: sitting quietly, and a stand prompt you can actually read */
.standnote{position:absolute;left:50%;bottom:calc(7vh + env(safe-area-inset-bottom));transform:translate(-50%,8px);z-index:6;border:0;cursor:pointer;
 display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 22px 13px;border-radius:999px;background:rgba(6,8,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
 box-shadow:0 0 0 1px rgba(212,165,55,.35),0 8px 30px rgba(0,0,0,.5);color:#f3ead4;opacity:0;transition:opacity 1.6s ease,transform 1.6s ease;white-space:nowrap}
.standnote.in{opacity:.92;transform:translate(-50%,0)}
.standnote span{font:italic 17px/1.25 var(--serif,Georgia,serif);color:#e9dfc6}
.standnote b{font:500 12.5px/1.2 var(--sans,system-ui);letter-spacing:.22em;text-transform:uppercase;color:#ffe08a}
@media (max-width:600px){.standnote span{font-size:16px}.standnote b{font-size:12px}}
@media (prefers-reduced-motion:reduce){.go,.arch,.hold,.opt::before{animation:none!important}}
.room[data-room=lobby] .door b{text-shadow:0 0 12px #000,0 0 4px #000,0 0 2px #000}
.room[data-room=lobby] .door small{color:#cfc3a4;text-shadow:0 0 10px #000,0 0 3px #000,0 0 2px #000}
@media (max-width:760px){.room[data-room=lobby] .arch{aspect-ratio:3/3.6}.room[data-room=lobby] .door b{font-size:15.5px;margin-top:8px;line-height:1.15}.room[data-room=lobby] .door small{font-size:12px}.room[data-room=lobby] .doors{gap:10px 10px}}
.room[data-room=lobby] .door b{text-align:center}.room[data-room=lobby] .lobby-h .small{color:#e2d6b8;opacity:1}
@media (min-width:761px){.room[data-room=lobby] .door{width:clamp(100px,9.5vw,138px)}.room[data-room=lobby] .arch{aspect-ratio:3/4}.room[data-room=lobby] .door b{font-size:clamp(15px,1.45vw,18px);margin-top:8px}.room[data-room=lobby] .door small{font-size:13px}.room[data-room=lobby] .doors{gap:clamp(10px,1.6vw,22px);bottom:calc(3.5vh + env(safe-area-inset-bottom))}}

/* ring: dark smoke headroom above the painting (the camera lowers the painting so the whole head clears the top bar) */
.room[data-room=ring] .kb::before{content:'';position:absolute;left:-2%;right:-2%;bottom:100%;height:60%;pointer-events:none;
 background:linear-gradient(to top,rgb(12,12,14) 0,rgb(8,8,9) 35%,rgb(4,4,5) 100%)}
.room[data-room=ring] .kb::after{content:'';position:absolute;left:-10%;right:-10%;bottom:99.6%;height:40%;pointer-events:none;opacity:.9;
 background:radial-gradient(28% 60% at 30% 70%,rgba(70,70,78,.10),transparent 70%),radial-gradient(24% 50% at 62% 80%,rgba(80,78,86,.09),transparent 70%),radial-gradient(30% 55% at 85% 60%,rgba(60,60,68,.08),transparent 70%);
 -webkit-mask-image:linear-gradient(to top,transparent 0,#000 45%);mask-image:linear-gradient(to top,transparent 0,#000 45%);animation:headfog 22s ease-in-out infinite alternate}
@keyframes headfog{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,-6%,0)}}
@media (prefers-reduced-motion:reduce){.room[data-room=ring] .kb::after{animation-duration:120s}}

/* ===== the 360 hall ===== */
.room.pano{background:#050608}
.h3host{position:absolute;inset:0;overflow:hidden;touch-action:none;background:#050608}
.h3-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:opacity .8s}
.h3.ready .h3-poster{opacity:0}
.h3-cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;opacity:0;transition:opacity .9s}
.h3.ready .h3-cv{opacity:1}.h3.grab .h3-cv{cursor:grabbing}
.h3-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.h3-hots{position:absolute;inset:0;pointer-events:none}
.h3-hs{--k:0;position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;text-decoration:none;margin:-11px 0 0 -110px;width:220px;text-align:center;color:inherit;will-change:transform;-webkit-tap-highlight-color:transparent}
.h3-hs.off{visibility:hidden}
.h3-hs i{width:22px;height:22px;border-radius:50%;position:relative;display:block;
 background:radial-gradient(circle,rgba(255,232,190,calc(.55 + .45*var(--k))) 0 18%,rgba(212,165,55,calc(.25 + .35*var(--k))) 34%,rgba(90,150,255,.0) 70%);
 box-shadow:0 0 calc(8px + 22px*var(--k)) rgba(212,165,55,calc(.25 + .5*var(--k))),0 0 0 1px rgba(212,165,55,calc(.25 + .5*var(--k)));animation:h3pulse 2.6s ease-in-out infinite}
.h3-hs i::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(120,170,255,calc(.12 + .35*var(--k)));animation:h3ring 2.6s ease-out infinite}
@keyframes h3pulse{50%{transform:scale(1.12)}}@keyframes h3ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
.h3-hs b{margin-top:9px;padding:5px 12px 5px 14px;border-radius:999px;background:rgba(4,6,10,calc(.6 + .25*var(--k)));font-weight:500;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:#d4a537;text-shadow:0 0 8px #000,0 0 14px #000;opacity:calc(.72 + .28*var(--k));transition:opacity .3s}
.h3-hs small{font-style:italic;font-size:14px;color:#e8dcc0;padding:2px 10px;border-radius:8px;background:rgba(4,6,10,calc(.7*var(--k)));text-shadow:0 0 8px #000,0 0 12px #000;margin-top:2px;opacity:calc(var(--k)*.95);transition:opacity .3s}
.h3-hs:hover b,.h3-hs:focus-visible b{opacity:1}.h3-hs:hover small,.h3-hs:focus-visible small{opacity:.95}
.h3-hs:focus-visible{outline:none}.h3-hs:focus-visible i{outline:1px solid #d4a537;outline-offset:6px}
.h3-hint{position:absolute;left:50%;bottom:calc(9vh + env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;padding:8px 18px;border-radius:999px;background:rgba(4,6,10,.62);border:1px solid rgba(212,165,55,.35);
 font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:#d4a537;opacity:0;transition:opacity 1.2s;pointer-events:none;white-space:nowrap}
.h3-hint.on{opacity:1}
.h3.nogl .h3-poster{filter:none}
.h3-hots.list{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;padding:18px 14px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.85) 40%)}
.h3-hs.list{position:static;margin:0;width:auto;--k:1}
@media (prefers-reduced-motion:reduce){.h3-hs i,.h3-hs i::after{animation:none}}

/* ===== exterior: the hatch cue and the push-in through warm light ===== */
.hatchcue{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;color:inherit;-webkit-tap-highlight-color:transparent}
.hatchcue i{width:46px;height:46px;border-radius:50%;display:block;position:relative;background:radial-gradient(circle,rgba(255,230,190,.55) 0 14%,rgba(255,200,130,.18) 40%,transparent 70%);animation:h3pulse 2.4s ease-in-out infinite}
.hatchcue i::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(212,165,55,.6);animation:h3ring 2.4s ease-out infinite}
.hatchcue b{padding:6px 14px 6px 17px;border-radius:999px;background:rgba(4,8,16,.62);border:1px solid rgba(212,165,55,.4);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#d4a537;text-shadow:0 0 10px #000,0 0 18px #000;white-space:nowrap}
.room[data-room=outside].boarding .hatchcue{opacity:0;transition:opacity .4s}
.room[data-room=outside].boarding .ui{pointer-events:none}
.room[data-room=outside] .stage{cursor:pointer}
.warp{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .7s ease-in;
 background:radial-gradient(circle at var(--wx,60%) var(--wy,70%),#fffaf2 0,#fbefdc 22%,rgba(226,196,150,.92) 55%,rgba(60,42,26,.9) 100%)}
.warp.on{opacity:.94;transition:opacity .5s ease-in}
.warp:not(.on){transition:opacity .8s ease-out}

/* ring: a true answer flashes green and throws sparks at the critic; other answers just dim softly */
.room[data-room=ring] .sparks{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:40}
.room[data-room=ring] .opt.hit{color:#d8ffe2;border-color:rgba(110,255,160,.8);box-shadow:0 0 0 1px rgba(110,255,160,.5),0 0 22px rgba(70,255,130,.55),inset 0 0 18px rgba(70,255,130,.25);animation:hitg 1.6s ease-out 1;text-shadow:0 0 10px rgba(90,255,140,.7)}
.room[data-room=ring] .opt.hit::before{background:#7dffa8!important;box-shadow:0 0 12px #5dff94!important}
@keyframes hitg{0%{box-shadow:0 0 0 1px rgba(150,255,190,1),0 0 46px rgba(90,255,150,.95),inset 0 0 30px rgba(90,255,150,.5)}100%{box-shadow:0 0 0 1px rgba(110,255,160,.5),0 0 22px rgba(70,255,130,.55),inset 0 0 18px rgba(70,255,130,.25)}}
.room[data-room=ring] .opt.miss{opacity:.6;transition:opacity .8s}
@media (prefers-reduced-motion:reduce){.room[data-room=ring] .opt.hit{animation:none}}

/* weights: the soul panel under the strength meter (halos are the readout) */
/* the soul (Weights): big and centred in the open space of the scene; on desktop that is right of the text column, between it and the lantern */
.soulp{position:absolute;z-index:3;left:calc(62.5% - 260px);top:max(140px,calc(50vh - 300px));width:520px;height:min(540px,60vh);pointer-events:none;
 background:radial-gradient(closest-side,rgba(4,6,12,.38),rgba(4,6,12,0));
 /* the halos and the heart flare may run past the panel: feather every edge so nothing ever shows a box */
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.soulp canvas{width:100%;height:100%;display:block}
@media (max-width:760px){.soulp{left:50%;transform:translateX(-50%);width:min(370px,95vw);top:calc(58px + env(safe-area-inset-top));height:clamp(220px,calc(43vh - 62px),340px)}.room[data-room=weights] .meter{z-index:4}}

/* the particle/fog layer rides exactly with the painting (no separate parallax offset from --px/--py) */
.room canvas.fx{transform:none!important}

/* the soul's light spilling onto the painted room (screen blend; opacity driven by strength in soul.js); under the text */
.soulspill{position:absolute;z-index:0;left:62.5%;top:calc(max(140px,calc(50vh - 300px)) + min(540px,60vh)*.33);width:1100px;height:1000px;transform:translate(-50%,-50%);pointer-events:none;opacity:0;mix-blend-mode:screen;
 background:radial-gradient(closest-side,rgba(255,226,170,.5),rgba(255,196,120,.22) 38%,rgba(255,170,90,.07) 70%,rgba(255,160,80,0))}
@media (max-width:760px){.soulspill{left:50%;top:calc(58px + env(safe-area-inset-top) + clamp(220px,calc(43vh - 62px),340px)*.33);width:720px;height:640px}}
@media (prefers-reduced-motion:reduce){.soulspill{transition:opacity .6s}}
/* the scale, reworked */
.room[data-room=scale] .sc-ok{font-size:14.5px;letter-spacing:.16em;opacity:.62;margin-top:2px;font-style:italic}
.room[data-room=scale] .sc-rv{font-size:clamp(17px,4.2vw,20px);line-height:1.38;color:#f3e8cc;text-align:center;max-width:620px;margin:12px 0 4px}
.room[data-room=scale] .sc-rv span{display:block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:2px}
.room[data-room=scale] .sc-rv.love span{color:rgba(255,214,130,.85)}.room[data-room=scale] .sc-rv.fear span{color:rgba(232,120,96,.85)}
.room[data-room=scale] .sc-rv em{font-size:.9em;color:#d9cba6}
.room[data-room=scale] .sc-head{font-size:clamp(25px,6vw,34px)}
.room[data-room=scale] .sc-f{max-width:600px;text-align:center;font-size:clamp(16.5px,4vw,19px);line-height:1.4;color:#e4d7b6;margin:8px 0 2px}
.room[data-room=scale] .sc-f b{font-weight:500;color:#f0b8a0}.room[data-room=scale] .sc-f span{opacity:.6;font-size:.85em}
/* the captain's window: a clean view, the words sit low over the console lip on a soft scrim */
.room[data-room=window] .wpanel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding:56px 18px calc(18px + env(safe-area-inset-bottom));pointer-events:auto;
 background:radial-gradient(120% 100% at 50% 100%,rgba(2,4,10,.78),rgba(2,4,10,.55) 45%,rgba(2,4,10,0) 78%)}
.room[data-room=window] .wpanel .lead{font-size:clamp(23px,5.4vw,30px);font-weight:400;opacity:.92;margin:0}
.room[data-room=window] .wpanel .body{font-size:clamp(15.5px,3.9vw,18px);opacity:.78;margin:2px 0 0}
.room[data-room=window] .wpanel .chips{max-width:760px;margin-top:4px;gap:0 2px}
.room[data-room=window] .wpanel .chip{min-height:34px;padding:5px 9px;font-size:clamp(14.5px,3.7vw,17px);color:#d9dfe9;opacity:.85}
.room[data-room=window] .wpanel .chip.sel,.room[data-room=window] .wpanel .chip:hover{color:#ffe7b8;opacity:1}
.room[data-room=window] .wpanel input.mine{width:min(440px,100%);font-size:17px;padding:5px 6px;margin-top:2px;background:rgba(0,0,0,.25);border-bottom-color:rgba(190,205,235,.35)}
.room[data-room=window] .wpanel .go{margin-top:10px}
.room[data-room=window].wlow .shade{opacity:0}
@media (max-width:760px){.room[data-room=window] .wpanel{padding-top:40px}
 .room[data-room=window] .wpanel .chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;max-width:100%;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
 .room[data-room=window] .wpanel .chips::-webkit-scrollbar{display:none}.room[data-room=window] .wpanel .chip{white-space:nowrap;flex:none}}
.room[data-room=scale]:not(.land) .shade{top:calc(var(--uiTop,0px) - 26px);background:linear-gradient(to bottom,transparent,rgba(0,0,0,.86) 44px,rgba(0,0,0,.95))}
/* white rooms: a soft frosted scrim behind the text column, stronger shadows, brighter notes */
:is(.room[data-room=scale],.room[data-room=weights],.room[data-room=mat],.room[data-room=ring]).land .shade{top:0;bottom:0;left:0;right:0;width:auto;height:auto;
 background:radial-gradient(ellipse 38% 70% at 24% 50%,rgba(5,7,13,.74),rgba(5,7,13,.64) 45%,rgba(5,7,13,.3) 78%,rgba(5,7,13,0) 100%);
 -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
 -webkit-mask-image:radial-gradient(ellipse 44% 78% at 24% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 44% 78% at 24% 50%,#000 52%,transparent 100%)}
:is(.room[data-room=scale],.room[data-room=weights],.room[data-room=mat],.room[data-room=ring]):not(.land) .shade{background:linear-gradient(to bottom,transparent,rgba(5,7,13,.86) 70px,rgba(5,7,13,.94));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 60px);mask-image:linear-gradient(to bottom,transparent,#000 60px)}
:is(.room[data-room=scale],.room[data-room=weights],.room[data-room=mat],.room[data-room=ring]) .ui .t{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 12px rgba(0,0,0,.7),0 0 28px rgba(0,0,0,.45)}
:is(.room[data-room=scale],.room[data-room=weights],.room[data-room=mat],.room[data-room=ring]) .ui .small{color:#ddd2b6;opacity:1}
:is(.room[data-room=scale],.room[data-room=weights],.room[data-room=mat],.room[data-room=ring]) .ui .count{color:rgba(232,196,110,.9)}
:is(.room[data-room=scale],.room[data-room=weights],.room[data-room=mat],.room[data-room=ring]) .ui .go{background:rgba(6,8,14,.5);color:#f0c968}
:is(.room[data-room=scale],.room[data-room=weights],.room[data-room=mat],.room[data-room=ring]) .ui .go.quiet{color:#e2d6b8}
:is(.room[data-room=scale],.room[data-room=weights],.room[data-room=mat],.room[data-room=ring]) .ui .opts.done .opt{opacity:.32}
.room[data-room=scale] .sc-ok{opacity:.85}
/* ring: choose your opponent (tap cards: a painted portrait and a short name; voices met before carry a quiet mark) */
.room[data-room=ring] .rpick .mcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:560px;margin:10px auto 0}
.room[data-room=ring] .mcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 0 7px;border:1px solid rgba(212,165,55,.35);border-radius:12px;overflow:hidden;background:rgba(6,8,14,.62);color:#efe4c6;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:transform .2s,border-color .2s,box-shadow .2s}
.room[data-room=ring] .mcard img{display:block;width:100%;aspect-ratio:4/5;object-position:50% 20%;object-fit:cover;filter:saturate(.95) contrast(1.04)}
.room[data-room=ring] .mcard b{font-weight:600;font-size:clamp(13px,3.5vw,16px);line-height:1.15;margin-top:5px;padding:0 4px;text-align:center}
.room[data-room=ring] .mcard i{font-style:normal;font-size:clamp(11px,2.9vw,13px);color:#cdbf9f;opacity:.8;padding:0 4px;text-align:center;line-height:1.15}
.room[data-room=ring] .mcard:hover,.room[data-room=ring] .mcard:focus-visible{border-color:rgba(255,214,140,.85);box-shadow:0 0 18px rgba(255,190,90,.25);transform:translateY(-2px)}
.room[data-room=ring] .mcard:active{transform:scale(.97)}
.room[data-room=ring] .mcard.won::after{content:'met';position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:999px;font-size:11px;letter-spacing:.06em;color:#d8ffe2;background:rgba(10,40,24,.7);border:1px solid rgba(110,255,160,.45)}
.room[data-room=ring] .mcard.won img{filter:saturate(.7) brightness(.85)}
@media (min-width:860px){.room[data-room=ring] .rpick .mcards{gap:10px;max-width:400px}}
/* ring: the death, a full-screen painting with moving layers, then stillness and one line */
.room[data-room=ring] .rdeath{position:fixed;inset:0;z-index:60;background:#05060a;opacity:0;transition:opacity .35s ease;overflow:hidden}
.room[data-room=ring] .rdeath.on{opacity:1}
.room[data-room=ring] .rdeath .rdp{position:absolute;inset:0}
.room[data-room=ring] .rdeath img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 5.5s cubic-bezier(.2,.7,.2,1),filter 2.4s ease}
.room[data-room=ring] .rdeath.on img{transform:scale(1.0)}
.room[data-room=ring] .rdeath.still img{filter:brightness(.82) saturate(.92)}
.room[data-room=ring] .rdeath canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.room[data-room=ring] .rdeath .rflash{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,#fff,rgba(255,250,235,.85) 40%,rgba(255,240,210,.4));opacity:0;pointer-events:none}
.room[data-room=ring] .rdeath.on .rflash{animation:rdflash 1.1s ease-out 1}
@keyframes rdflash{0%{opacity:1}100%{opacity:0}}
.room[data-room=ring] .rdeath.shake .rdp{animation:rdshake .9s cubic-bezier(.36,.07,.19,.97) 1}
@keyframes rdshake{0%,100%{transform:translate(0,0)}10%{transform:translate(-14px,9px)}20%{transform:translate(12px,-11px)}30%{transform:translate(-10px,7px)}40%{transform:translate(9px,-6px)}55%{transform:translate(-6px,4px)}70%{transform:translate(4px,-3px)}85%{transform:translate(-2px,1px)}}
.room[data-room=ring] .rdeath .rdline{position:absolute;left:0;right:0;bottom:0;padding:60px 20px calc(26px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,rgba(4,5,10,.78) 46%,rgba(4,5,10,.9));text-align:center;opacity:0;transition:opacity 1.2s ease}
.room[data-room=ring] .rdeath.still .rdline{opacity:1}
.room[data-room=ring] .rdeath .rdline .lead{max-width:30ch;margin:0 auto}
.room[data-room=ring] .rdeath .rdline .t{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){.room[data-room=ring] .rdeath{transition:opacity 1.2s ease}.room[data-room=ring] .rdeath img{transform:none!important;transition:filter 2.4s ease}.room[data-room=ring] .rdeath.on .rflash,.room[data-room=ring] .rdeath.shake .rdp{animation:none}}
.room[data-room=ring] .rdeath .rdc{display:flex;flex-direction:column;align-items:center;gap:12px}
.room[data-room=ring] .rdeath .rdc .small{color:#ddd2b6}
/* ring: the menace grows. A red-black aura gathers around it, the edges of the screen close in, and each surge throbs (--g: 0 small .. 1 max; --ax/--ay: its face on screen) */
.room[data-room=ring] .rvig{position:absolute;inset:0;pointer-events:none;--g:0;--ax:50%;--ay:28%;overflow:hidden}
.room[data-room=ring] .rvig i{position:absolute;inset:0;display:block}
.room[data-room=ring] .rvig .rv-aura{background:radial-gradient(circle at var(--ax) var(--ay),rgba(255,255,255,1) 0,rgba(240,200,188,1) calc(10% + 6% * var(--g)),rgba(128,30,20,1) calc(34% + 10% * var(--g)),rgba(52,6,5,1) 70%,rgba(20,2,2,1) 100%);mix-blend-mode:multiply;opacity:calc(var(--g) * .74)}
@supports (background:color-mix(in srgb,red 50%,black)){.room[data-room=ring] .rvig .rv-aura{background:radial-gradient(circle at var(--ax) var(--ay),#fff 0,color-mix(in srgb,rgb(var(--lc,255,96,36)) 30%,#f0c8bc) calc(10% + 6% * var(--g)),color-mix(in srgb,rgb(var(--lc,255,96,36)) 38%,#80141a) calc(34% + 10% * var(--g)),color-mix(in srgb,rgb(var(--lc,255,96,36)) 18%,#340606) 70%,#140202 100%)}}
.room[data-room=ring] .rvig .rv-edge{background:radial-gradient(ellipse 78% 64% at 50% 34%,transparent calc(62% - 26% * var(--g)),rgba(26,0,0,calc(.35 + .5 * var(--g))) 86%,rgba(6,0,0,calc(.55 + .4 * var(--g))) 100%);opacity:calc(var(--g) * 1.1)}
.room[data-room=ring] .rvig .rv-hit{background:radial-gradient(ellipse 70% 60% at 50% 34%,transparent 38%,rgba(150,12,6,.55) 82%,rgba(40,0,0,.85) 100%);opacity:0}
.room[data-room=ring] .rvig.hit .rv-hit{animation:rvhit 1.3s cubic-bezier(.2,.7,.3,1) 1}
@keyframes rvhit{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.room[data-room=ring] .rvig.hit .rv-hit{animation-duration:2.4s}}
/* ring death (resume): driven from JS: a slow push-in, the painting crumbles to dust (canvas.rdust), a second flash in the voice's colour, then the line, centred in the dark */
.room[data-room=ring] .rdeath img{transform:scale(1);transform-origin:50% 38%;transition:filter 2.4s ease,opacity 1.2s ease;will-change:transform}
.room[data-room=ring] .rdeath.on img{transform:scale(1)}
.room[data-room=ring] .rdeath.dz img,.room[data-room=ring] .rdeath.gone img{opacity:0;transition:opacity .05s}
.room[data-room=ring] .rdeath.gone img{transition:opacity 1.2s ease}
.room[data-room=ring] .rdeath .rflash2{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 36%,rgba(var(--dc),.9),rgba(var(--dc),.25) 38%,transparent 72%)}
.room[data-room=ring] .rdeath.dz .rflash2,.room[data-room=ring] .rdeath.gone .rflash2{animation:rdflash2 1.6s ease-out 1}
@keyframes rdflash2{0%{opacity:0}14%{opacity:.9}100%{opacity:0}}
.room[data-room=ring] .rdeath::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(var(--dc,255,240,210),.16),transparent 60%);opacity:0;transition:opacity 2s ease}
.room[data-room=ring] .rdeath.still::before{opacity:1}
.room[data-room=ring] .rdeath .rdline{top:0;display:flex;align-items:center;justify-content:center;padding:calc(60px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom));background:none}
.room[data-room=ring] .rdeath .rdline .lead{max-width:24ch;font-size:clamp(22px,5.6vw,30px)}
.room[data-room=ring] .rdeath.still{cursor:pointer}
.room[data-room=ring] .rdeath.out{opacity:0;transition:opacity .9s ease;pointer-events:none}