*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#9fd6ff;font-family:"Segoe UI","Trebuchet MS",Tahoma,sans-serif;color:#0b2a48;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none}
input{-webkit-user-select:text;user-select:text}
#view{position:fixed;inset:0;width:100%;height:100%;display:block}
#tags,#hov{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
#pz{position:fixed;inset:0;pointer-events:none;z-index:6}
button{font:inherit}
.glass{pointer-events:auto;border-radius:10px;border:1px solid rgba(255,255,255,.75);background:linear-gradient(rgba(255,255,255,.62),rgba(210,238,255,.42) 48%,rgba(160,215,250,.38) 52%,rgba(205,240,255,.5));-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 6px 24px rgba(0,60,120,.25),inset 0 1px 0 #fff;color:#0b2a48;text-shadow:0 1px 0 rgba(255,255,255,.8)}
/* zone pill, way home, mute */
.zone{position:absolute;left:24px;top:24px;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;font-size:15px;font-weight:600;border:1px solid rgba(255,255,255,.75);cursor:pointer;transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.zone img{width:40px;height:40px;pointer-events:none;-webkit-user-drag:none}
.zone:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(0,60,120,.3),0 0 0 3px rgba(127,216,255,.35),inset 0 1px 0 #fff}
.zone:active{transform:scale(.96)}
.zone i{font-style:normal;font-size:11px;opacity:.7;transition:transform .3s}
.zone.open i{transform:rotate(180deg)}
.home{position:absolute;left:24px;top:84px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:filter .2s}
.home:hover{filter:brightness(1.08) drop-shadow(0 0 6px #7fd8ff)}
.mute{position:absolute;right:24px;top:24px;width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.mute:hover{filter:brightness(1.08) drop-shadow(0 0 6px #7fd8ff)}
.pzmenu{position:absolute;left:24px;top:136px;display:grid;gap:6px;padding:8px;min-width:260px;animation:pzdrop .35s cubic-bezier(.3,1.3,.5,1)}
.pzmenu[hidden],.lift[hidden],#flash[hidden]{display:none}
@keyframes pzdrop{from{opacity:0;transform:translateY(-8px) scale(.96)}}
.zb{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border-radius:12px;border:1px solid rgba(255,255,255,.85);background:radial-gradient(ellipse at 50% -20%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),linear-gradient(#e9f7ff,#bfe4fb 50%,#9fd6f7 51%,#cbeeff);color:#0b2a48;text-align:left;cursor:pointer;box-shadow:0 2px 6px rgba(0,60,120,.18),inset 0 -3px 6px rgba(40,140,220,.15);animation:pzzb .35s both;transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s,filter .3s}
@keyframes pzzb{from{opacity:0;transform:translateX(-10px)}}
.zb:hover{transform:translateX(4px) scale(1.02);box-shadow:0 4px 14px rgba(0,90,170,.3),0 0 0 3px rgba(127,216,255,.45),inset 0 -3px 6px rgba(40,140,220,.15);filter:brightness(1.05)}
.zb:active{transform:scale(.96)}
.zb.on{background:radial-gradient(ellipse at 50% -20%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),linear-gradient(#e3fbd6,#b6ec98 50%,#8fdc6a 51%,#c4f3a8)}
.zi{width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:50%;background:radial-gradient(circle at 50% 25%,#fff,rgba(255,255,255,.2) 60%),linear-gradient(#5fd3ff,#1593e6);box-shadow:inset 0 -3px 5px rgba(0,50,120,.3),0 2px 4px rgba(0,50,110,.25)}
.zb.on .zi{background:radial-gradient(circle at 50% 25%,#fff,rgba(255,255,255,.2) 60%),linear-gradient(#9be27f,#3fae1d)}
.zt{display:flex;flex-direction:column;line-height:1.2}.zt b{font-size:14px}.zt small{font-size:11px;opacity:.7}
.hint{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);padding:6px 14px;font-size:13px;animation:pzfade 1.2s 7s forwards;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@keyframes pzfade{to{opacity:0}}
/* chat bar */
.chat{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(520px,calc(100vw - 48px));display:flex;gap:8px;padding:8px}
.chat input{flex:1 1 0;min-width:120px;width:auto;border-radius:999px;border:1px solid #8cbbe0;background:linear-gradient(#fff,#eef8ff);padding:8px 14px;font:inherit;font-size:16px;color:#0b2a48;outline:none;box-shadow:inset 0 2px 4px rgba(0,60,120,.12)}
.chat input:focus{border-color:#2fc6ff;box-shadow:0 0 0 3px rgba(47,198,255,.25),inset 0 2px 4px rgba(0,60,120,.12)}
.chat .send{position:relative;overflow:visible;display:flex;align-items:center;gap:6px;flex:0 0 auto;min-width:92px;justify-content:center;padding:7px 18px 7px 20px;border-radius:999px;border:1px solid #0d6db8;font-weight:700;font-size:14px;color:#fff;cursor:pointer;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,50,110,.6);background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.95),rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 50%),linear-gradient(#58d2ff,#1aa0f0 50%,#0b7fd8 51%,#2cb6ff);box-shadow:0 3px 10px rgba(0,100,200,.45),0 0 0 1px rgba(255,255,255,.5) inset,0 -2px 6px rgba(0,60,150,.35) inset;transition:transform .35s cubic-bezier(.3,1.6,.45,1),box-shadow .35s,filter .35s}
.chat .send .lbl,.chat .send svg{position:relative;z-index:1}
.chat .send .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.chat .send .shine::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transition:left .7s cubic-bezier(.3,.7,.3,1)}
.chat .send:hover{transform:translateY(-2px) scale(1.06);filter:brightness(1.06)}
.chat .send:hover .shine::after{left:130%}
.chat .send:hover svg{animation:pzfly .6s cubic-bezier(.3,1.4,.5,1)}
@keyframes pzfly{40%{transform:translate(3px,-3px) rotate(-8deg)}}
.chat .send:active{transform:scale(.9);transition-duration:.08s}
.chat .send:focus,.chat .send:focus-visible{outline:none}
.chat .send.sent{animation:pzsent .55s cubic-bezier(.3,1.6,.45,1)}
@keyframes pzsent{0%{transform:scale(.86)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.chat .send.nope{animation:pznope .4s ease-in-out}
@keyframes pznope{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
.chat .send[disabled]{filter:grayscale(.85) brightness(1.08);opacity:.75;cursor:default}
#cool{position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:2px;background:rgba(255,255,255,.9);transform-origin:left;transform:scaleX(0);pointer-events:none}
.sbub{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff,rgba(190,240,255,.55) 45%,rgba(120,210,255,.25) 70%);border:1px solid rgba(255,255,255,.8);box-shadow:0 0 4px rgba(255,255,255,.6);animation:pzbub .85s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes pzbub{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1)}}
/* chat log */
#log{position:absolute;left:24px;bottom:96px;width:min(380px,calc(100vw - 48px));max-height:30vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;pointer-events:none}
#log div{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.8);border-radius:10px;padding:3px 9px;font-size:13px;line-height:1.3;word-break:break-word;align-self:flex-start;max-width:100%;animation:logIn .25s;box-shadow:0 2px 6px rgba(0,60,120,.12)}
#log b{margin-right:5px}
#log div.sys{background:rgba(30,90,150,.55);color:#fff;font-size:12px;text-shadow:none}
@keyframes logIn{from{opacity:0;transform:translateY(6px)}}
/* lift */
.lift{position:absolute;left:50%;top:50%;transform:translate(-50%,-62%);padding:14px 18px;text-align:center;animation:pzpop .45s cubic-bezier(.3,1.3,.5,1)}
@keyframes pzpop{from{opacity:0;transform:translate(-50%,-55%) scale(.92)}}
.lift h4{margin:0 0 10px;font-size:16px;color:#0b2a48;text-shadow:0 1px 0 #fff}
.lift .fl{display:grid;gap:8px}
.lift button{display:flex;gap:10px;align-items:center;justify-content:flex-start;min-width:230px;border-radius:999px;background:linear-gradient(rgba(255,255,255,.97),rgba(226,244,255,.95) 48%,rgba(196,230,252,.95) 52%,rgba(226,246,255,.97));color:#0b2a48;text-shadow:0 1px 0 rgba(255,255,255,.9);border:1px solid rgba(90,160,215,.75);font-size:15px;font-weight:700;padding:7px 16px 7px 8px;cursor:pointer;box-shadow:0 2px 6px rgba(0,60,120,.15),inset 0 1px 0 #fff;transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.lift button:hover{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(127,216,255,.45),0 4px 10px rgba(0,90,170,.2),inset 0 1px 0 #fff}
.lift button b{width:34px;height:34px;line-height:32px;flex:none;border-radius:50%;text-align:center;color:#fff;font-size:16px;font-weight:800;-webkit-text-stroke:3px #063f86;paint-order:stroke fill;text-shadow:0 0 1px #063f86,0 2px 3px rgba(0,30,80,.55);background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.85),rgba(255,255,255,0) 55%),linear-gradient(#4cc8ff,#0a6fd6);border:1px solid #0a5fb8}
.lift button.here{opacity:.75}
.lift button.here b{background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.85),rgba(255,255,255,0) 55%),linear-gradient(#9be27f,#3fae1d);border-color:#2f8a15;-webkit-text-stroke-color:#1f6a0c;text-shadow:0 0 1px #1f6a0c,0 2px 3px rgba(10,50,0,.5)}
.flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,0),rgba(220,245,255,.9));animation:pzlift 1.1s ease-out forwards;pointer-events:none}
.flash b{position:absolute;left:50%;top:40%;transform:translateX(-50%);font-size:28px;color:#0b4a8a;text-shadow:0 2px 0 #fff;white-space:nowrap}
@keyframes pzlift{0%{opacity:1}60%{opacity:.85}100%{opacity:0}}
/* hover label */
.hovtag{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.hovtag span{display:block;padding:6px 14px;border-radius:999px;font-weight:700;font-size:13px;color:#0b2a48;white-space:nowrap;text-shadow:0 1px 0 #fff;background:linear-gradient(rgba(255,255,255,.97),rgba(222,244,255,.95) 50%,rgba(190,232,255,.95) 51%,rgba(230,248,255,.97));border:1px solid rgba(80,160,220,.8);box-shadow:0 0 0 3px rgba(127,216,255,.35),0 4px 12px rgba(0,80,160,.25),inset 0 1px 0 #fff;animation:hovin .35s cubic-bezier(.3,1.5,.5,1)}
.hovtag span:after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:#d7f0ff;border-right:1px solid rgba(80,160,220,.8);border-bottom:1px solid rgba(80,160,220,.8)}
@keyframes hovin{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
/* name tags + speech bubbles (spawn-nametag) */
.tag{position:absolute;left:0;top:0;z-index:1;display:flex;flex-direction:column;align-items:center;will-change:transform}
.tag .row{display:flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:linear-gradient(rgba(255,255,255,.55),rgba(190,228,255,.4) 50%,rgba(120,190,240,.42) 51%,rgba(180,225,255,.5));box-shadow:0 2px 8px rgba(0,50,110,.25)}
.tag .head{display:block;flex:none;width:14px;height:14px;border-radius:9999px;background:#2a2a30}
.tag .name{font:600 12px/1 "Segoe UI","Trebuchet MS",Tahoma,sans-serif;color:#0b2a48;text-shadow:0 1px 0 rgba(255,255,255,.8);white-space:nowrap}
.said{position:absolute;left:50%;bottom:0;margin-bottom:8px;transform:translateX(-50%);width:max-content;max-width:260px;animation:nametag-say 6s linear both}
.said>div{position:relative;min-width:110px;color:#06223e;font:700 16px/1.35 "Segoe UI","Trebuchet MS",Tahoma,sans-serif;max-width:260px;text-align:center;padding:10px 17px;border-radius:18px;border:2px solid #2f86c8;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,1),rgba(255,255,255,0) 70%),linear-gradient(#ffffff,#eaf6ff 55%,#cfe9ff);box-shadow:0 0 0 3px rgba(255,255,255,.85),0 6px 18px rgba(0,50,110,.45),inset 0 1px 0 #fff,inset 0 -3px 6px rgba(80,160,220,.2);text-shadow:0 1px 0 #fff}
.said>div::after{content:"";position:absolute;left:50%;bottom:-10px;width:17px;height:17px;transform:translateX(-50%) rotate(45deg);background:linear-gradient(135deg,transparent 50%,#cfe9ff 50%);border-right:2px solid #2f86c8;border-bottom:2px solid #2f86c8;border-bottom-right-radius:4px}
@keyframes nametag-say{0%{opacity:0;transform:translate(-50%,6px)}4%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,0)}}
/* zone iris: a glossy bubble that circles in, then out on the new place */
#iris{position:fixed;inset:0;z-index:26;pointer-events:none;clip-path:circle(0% at 50% 50%);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0 18%,rgba(255,255,255,.35) 19%,rgba(255,255,255,0) 21%),radial-gradient(circle at 32% 24%,rgba(255,255,255,.85),rgba(255,255,255,0) 26%),radial-gradient(circle at 70% 78%,rgba(190,255,140,.75),rgba(190,255,140,0) 40%),linear-gradient(135deg,#0a6fd6,#2fc6ff 45%,#7be04a)}
#iris i{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,255,255,.25) 40%,rgba(255,255,255,.05) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
#load{position:fixed;inset:0;z-index:30;background:linear-gradient(#5db6f5,#bfe6ff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .6s}
#load.off{opacity:0;pointer-events:none}
#load .ring{width:54px;height:54px;border-radius:50%;border:6px solid rgba(255,255,255,.5);border-top-color:#fff;animation:sp 1s linear infinite}
#load p{color:#fff;font-weight:600;text-shadow:0 1px 3px rgba(0,60,110,.6)}
@keyframes sp{to{transform:rotate(360deg)}}
/* arcade board: one clean card at the right, out of the way of the cabinets */
#arc{position:absolute;right:24px;top:84px;bottom:100px;display:flex;align-items:center;pointer-events:none}
.arc{pointer-events:auto;width:300px;padding:12px 14px 14px;border-radius:20px;text-align:center;background:linear-gradient(rgba(255,255,255,.82),rgba(222,243,255,.78));border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 40px rgba(0,50,110,.3),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:pzpop2 .4s cubic-bezier(.3,1.3,.5,1);color:#0b2a48}
@keyframes pzpop2{from{opacity:0;transform:translateX(16px) scale(.96)}}
.arc .ah{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.arc .ti{font-size:17px;font-weight:800;letter-spacing:.01em;background:linear-gradient(#0a6fd6,#2fc6ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.arc .ax{width:26px;height:26px;border-radius:50%;border:0;background:rgba(10,60,110,.08);color:#4a6f8f;font-size:12px;cursor:pointer;transition:background .2s,transform .2s}
.arc .ax:hover{background:rgba(220,60,40,.18);color:#b3261a;transform:scale(1.1)}
.arc .pl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.chip{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:12px;background:rgba(10,60,110,.06);border:1.5px solid transparent;font-size:12px;font-weight:600;min-width:0;transition:all .3s}
.chip .dot{flex:none;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--c) 60%);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.chip .nm{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip b{flex:none;min-width:20px;padding:1px 6px;border-radius:9px;background:#fff;font-size:12px;box-shadow:inset 0 0 0 1px rgba(10,60,110,.12)}
.chip.on{background:#fff;border-color:#2fc6ff;box-shadow:0 0 12px rgba(47,198,255,.5)}
.chip.empty{opacity:.55}
.chip.me .nm{font-weight:800}
.chip.me{border-color:rgba(10,111,214,.35)}
.arc .msg{margin:10px 0 2px;min-height:34px;display:flex;align-items:center;justify-content:center;padding:5px 10px;border-radius:12px;font-size:14px;font-weight:700;background:rgba(10,60,110,.06)}
.arc .msg.turn{background:linear-gradient(#e3fbd6,#b6ec98);color:#1d6a0c}
.arc .msg.won{background:linear-gradient(#fff6c9,#ffd75a);color:#7a5200}
.arc .msg.lost,.arc .msg.draw{background:rgba(10,60,110,.1);color:#38566f}
.arc .ab{margin-top:8px;border:0;background:none;color:#4a6f8f;font:inherit;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 8px}
.arc .ab:hover{color:#0a6fd6}
/* tic-tac-glow */
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:9px;border-radius:16px;background:linear-gradient(#0b3a86,#06204e);box-shadow:inset 0 2px 8px rgba(0,0,0,.4),0 0 0 1px rgba(47,198,255,.4)}
.cell{aspect-ratio:1;border:0;border-radius:11px;padding:0;background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.25);cursor:default;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s,box-shadow .3s}
.cell.open:not([disabled]){cursor:pointer}
.cell.open:not([disabled]):hover{background:linear-gradient(rgba(127,232,255,.4),rgba(127,232,255,.16));transform:scale(1.05)}
.cell .mk{width:76%;height:76%;filter:drop-shadow(0 0 5px rgba(255,255,255,.85));animation:mkpop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes mkpop{from{transform:scale(.3);opacity:0}}
.cell.win{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.25));box-shadow:0 0 0 2px #fff,0 0 16px #7be04a}
/* bubble four */
.cg{display:flex;gap:4px;padding:8px 8px 6px;border-radius:16px;background:linear-gradient(#2fa8ee,#0a6fd6);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 0 1px rgba(5,60,140,.5)}
.cg .col{flex:1;display:flex;flex-direction:column-reverse;gap:4px;padding:2px;border-radius:12px;transition:background .2s}
.cg .col.play{cursor:pointer}.cg .col.play:hover{background:rgba(255,255,255,.22)}
.hole{position:relative;display:block;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#062c63,#0a3d85);box-shadow:inset 0 3px 5px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.35)}
.disc{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.9),rgba(255,255,255,0) 45%),var(--c);box-shadow:inset 0 -4px 7px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.3)}
.hole.new .disc{animation:drop2 .5s cubic-bezier(.4,1.5,.5,1)}
@keyframes drop2{from{transform:translateY(-320%);opacity:.4}}
.hole.win .disc{box-shadow:0 0 0 2px #fff,0 0 14px #fff}
@media (max-width:560px){#arc{right:50%;top:auto;bottom:84px;transform:translateX(50%);display:block}.arc{width:min(300px,calc(100vw - 24px))}.zone{left:12px;top:12px}.home{left:12px;top:70px}.mute{right:12px;top:12px}.pzmenu{left:12px;top:120px}.chat{bottom:12px;width:calc(100vw - 24px)}#log{left:12px;bottom:78px}.hint{display:none}}

/* the page-drawn cursor, as on the desktop */
#swcursor{position:fixed;left:0;top:0;width:40px;height:44px;background:url(../assets/cursor-lg.png) no-repeat 0 0/40px 44px;pointer-events:none;z-index:2147483647;opacity:0;will-change:transform;contain:strict}
#swcursor.on{opacity:1}
@media (hover:hover) and (pointer:fine){html.swcur,html.swcur *,html.swcur *:hover,html.swcur *:active{cursor:none !important}}
/* inside the desktop window the window's own X is the way out */
html.embed .home{display:none}
@media (hover:hover) and (pointer:fine){html.embed,html.embed *,html.embed *:hover,html.embed *:active{cursor:none !important}}

/* smiley tray */
.chat .emob{flex:0 0 auto;width:38px;height:38px;padding:5px;border-radius:50%;border:1px solid rgba(255,255,255,.9);background:radial-gradient(circle at 50% 18%,#fff,rgba(255,255,255,.3) 55%),linear-gradient(#fff6c9,#ffd75a);box-shadow:0 2px 6px rgba(160,110,0,.25),inset 0 -2px 4px rgba(200,140,0,.25);cursor:pointer;transition:transform .35s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.chat .emob img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.chat .emob:hover{transform:translateY(-2px) scale(1.08) rotate(-6deg);box-shadow:0 4px 12px rgba(200,150,0,.35),0 0 0 3px rgba(255,220,100,.4)}
.chat .emob:active{transform:scale(.9)}
.chat .emob.on{box-shadow:0 0 0 3px rgba(127,216,255,.6),0 2px 8px rgba(0,90,170,.3)}
.tray{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:6px 8px;width:min(520px,calc(100vw - 48px));animation:pztray .32s cubic-bezier(.3,1.35,.5,1);transform-origin:50% 100%}
.tray[hidden]{display:none}
@keyframes pztray{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.94)}}
.tray button{width:30px;height:30px;padding:2px;border-radius:50%;border:1px solid transparent;background:transparent;cursor:pointer;transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .3s,border-color .3s}
.tray button:hover{transform:translateY(-3px) scale(1.25);background:rgba(255,255,255,.6);border-color:rgba(120,180,225,.8)}
.tray button:active{transform:scale(.9)}
.tray img{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,30,60,.3));pointer-events:none;-webkit-user-drag:none}
.tray.cool button{opacity:.4;filter:grayscale(.7);pointer-events:none;transition:opacity .4s,filter .4s}
.tray .emot{width:100%;text-align:center;font-size:12px;font-weight:700;opacity:.8}
.pzemo{position:absolute;left:50%;bottom:100%;margin-bottom:4px;width:32px;height:32px;transform:translateX(-50%);filter:drop-shadow(0 2px 4px rgba(0,40,90,.35));animation:pzemo 3.4s cubic-bezier(.3,1.3,.5,1) forwards;pointer-events:none}
@keyframes pzemo{0%{opacity:0;transform:translate(-50%,40%) scale(.3)}12%{opacity:1;transform:translate(-50%,0) scale(1.1)}20%{transform:translate(-50%,0) scale(1)}80%{opacity:1;transform:translate(-50%,-15%) scale(1)}100%{opacity:0;transform:translate(-50%,-30%) scale(.9)}}




/* guests: chat is locked until they log in */
.gnote{position:absolute;left:50%;bottom:86px;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.2,1.2,.4,1),opacity .18s ease;display:flex;align-items:center;gap:12px;padding:7px 8px 7px 16px;font-size:13px;font-weight:600;white-space:nowrap;max-width:calc(100vw - 24px)}
.gnote[hidden]{display:none}
.gnote button{border-radius:999px;border:1px solid #0d6db8;padding:5px 16px;font:inherit;font-weight:700;font-size:13px;color:#fff;cursor:pointer;text-shadow:0 1px 2px rgba(0,50,110,.6);background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.95),rgba(255,255,255,0) 50%),linear-gradient(#58d2ff,#1aa0f0 50%,#0b7fd8 51%,#2cb6ff);box-shadow:0 2px 6px rgba(0,100,200,.4),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .3s cubic-bezier(.3,1.6,.45,1)}
.gnote button:hover{transform:translateY(-1px) scale(1.06)}
.chat input[readonly]{background:linear-gradient(#e9eef3,#dde5ec);color:#6a7d90;cursor:not-allowed}
.chat .send.loginbtn{background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.95),rgba(255,255,255,0) 50%),linear-gradient(#8fe07a,#37b02a 50%,#2a9a1e 51%,#4cc83a);border-color:#1f7d2c}
@media (max-width:560px){.gnote{bottom:70px;white-space:normal;text-align:left;font-size:12px}}

/* a logged-in player's profile card (click them in the Plaza) */
.pcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(280px,calc(100vw - 32px));padding:18px 18px 16px;text-align:center;animation:pcin .35s cubic-bezier(.2,1.2,.4,1)}
.pcard[hidden]{display:none}
@keyframes pcin{from{opacity:0;transform:translate(-50%,-46%) scale(.92)}}
.pcx{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.55);color:#27567c;font-size:12px;cursor:pointer;line-height:1}
.pcx:hover{background:#fff}
.pcav{width:92px;height:92px;margin:0 auto 6px;border-radius:50%;background:radial-gradient(circle at 50% 80%,#dff4ff,#fff 75%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 3px 10px rgba(0,60,120,.25);display:flex;align-items:center;justify-content:center}
.pcav svg{width:74px;height:74px}
.pcn{font-size:18px;font-weight:800;color:#0b3a66;word-break:break-word}
.pcb{margin-top:6px;font-size:13px;line-height:1.45;color:#27475f;word-break:break-word;white-space:pre-wrap}
.pcb.none{opacity:.55;font-style:italic}

.tag .row.link{pointer-events:auto;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .2s,filter .2s}
.tag .row.link .name{transition:color .2s}
.tag .row.link:hover{transform:scale(1.1);filter:brightness(1.1);box-shadow:0 3px 12px rgba(0,110,220,.55),0 0 0 2px rgba(255,255,255,.9);background:linear-gradient(rgba(255,255,255,.85),rgba(170,225,255,.7) 50%,rgba(90,185,250,.7) 51%,rgba(170,225,255,.8))}
.tag .row.link:hover .name{color:#054a99}
.tag .row.link:active{transform:scale(.97)}
.pcact{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.pcb1{border-radius:999px;border:1px solid rgba(90,150,200,.8);padding:6px 16px;font:inherit;font-weight:700;font-size:13px;color:#27567c;background:linear-gradient(#fff,#dcefff);cursor:pointer;transition:transform .25s cubic-bezier(.3,1.5,.5,1),filter .2s}
.pcb1:hover:not([disabled]){transform:translateY(-1px) scale(1.06);filter:brightness(1.05)}
.pcb1.go{border-color:#1f7d2c;color:#fff;text-shadow:0 1px 1px rgba(0,60,0,.5);background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.9),rgba(255,255,255,0) 52%),linear-gradient(#7ee05c,#2fb23a 55%,#25a032)}
.pcb1.done{border-color:rgba(60,160,70,.6);color:#1f7d2c;cursor:default}.pcb1[disabled]{opacity:.8;cursor:default}

.gnote.up{transform:translate(-50%,0);opacity:1;pointer-events:auto}

/* verified players: a small glossy tick and a soft, slowly breathing glow around the name plate */
.tag .row .vt{width:15px;height:15px;margin-left:5px;flex:none;filter:drop-shadow(0 0 3px rgba(60,170,255,.9))}
.tag .row.verified{border-color:rgba(255,255,255,.95);background:linear-gradient(rgba(255,255,255,.82),rgba(175,225,255,.6) 50%,rgba(110,195,255,.6) 51%,rgba(190,235,255,.75));animation:vglow 4.5s ease-in-out infinite}
@keyframes vglow{0%,100%{box-shadow:0 0 6px 1px rgba(80,190,255,.5),0 0 12px 2px rgba(80,190,255,.22),0 2px 8px rgba(0,50,110,.25)}50%{box-shadow:0 0 9px 2px rgba(110,205,255,.7),0 0 17px 3px rgba(80,190,255,.32),0 2px 8px rgba(0,50,110,.25)}}
.pcn .vt{width:18px;height:18px;vertical-align:-3px}
.pcard.verified{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 22px 5px rgba(80,190,255,.6),0 10px 30px rgba(0,40,90,.3)}
#log b .vt{width:13px;height:13px;vertical-align:-2px;margin-left:3px}

.chat .emob.skb{padding:6px;background:radial-gradient(circle at 50% 18%,#fff,rgba(255,255,255,.3) 55%),linear-gradient(#e6f6ff,#a9dcff)}
.chat .emob.skb svg{width:100%;height:100%;display:block;pointer-events:none}
.chat .emob.skb.on{box-shadow:0 0 0 3px rgba(255,170,60,.7),0 2px 10px rgba(255,140,0,.4)}

/* the owner: crown, a shimmering border in the colour of their character (rainbow if they wear the rainbow), a stronger glow */
.tag .row .crown{font-size:13px;line-height:1;margin:0 4px 0 2px;filter:drop-shadow(0 1px 2px rgba(120,80,0,.5))}
.tag .row.owner{--oc:#ffc72c;border:2px solid transparent;padding:2px 9px 2px 4px;background:linear-gradient(rgba(240,250,255,.95),rgba(205,236,255,.92)) padding-box,linear-gradient(100deg,var(--oc),color-mix(in srgb,var(--oc) 55%,#fff),var(--oc),color-mix(in srgb,var(--oc) 55%,#fff),var(--oc)) border-box;background-size:100% 100%,300% 100%;animation:ownershift 9s linear infinite,ownerglow 5s ease-in-out infinite}
.tag .row.owner-rb{background:linear-gradient(rgba(240,250,255,.95),rgba(205,236,255,.92)) padding-box,linear-gradient(100deg,#ff5fa8,#ffb03a,#7be04a,#2fd8e8,#b56bff,#ff5fa8,#ffb03a,#7be04a) border-box;background-size:100% 100%,300% 100%;animation:ownershift 10s linear infinite,ownerglow 5s ease-in-out infinite,rainbowhue 16s linear infinite}
@keyframes ownershift{to{background-position:0 0,300% 0}}
@keyframes ownerglow{0%,100%{box-shadow:0 0 6px 1px color-mix(in srgb,var(--oc) 50%,transparent),0 0 12px 2px color-mix(in srgb,var(--oc) 22%,transparent)}50%{box-shadow:0 0 9px 2px color-mix(in srgb,var(--oc) 68%,transparent),0 0 17px 3px color-mix(in srgb,var(--oc) 32%,transparent)}}
.tag .row.owner-rb{--oc:#c06bff}
@keyframes rainbowhue{to{filter:hue-rotate(360deg)}}
.vt.rb{animation:rainbowhue 7s linear infinite}
.pcav .rbsvg{animation:rainbowhue 7s linear infinite}

/* the three buttons in the corners: polished Vista glass (opaque enough that the grass behind never tints them green) */
.zone,.home,.mute{position:absolute;overflow:hidden;color:#0b2a48;text-shadow:0 1px 0 rgba(255,255,255,.9);font-family:"Segoe UI","Trebuchet MS",Tahoma,sans-serif;
  background:linear-gradient(180deg,#ffffff 0%,#eaf7ff 46%,#b9e1fa 52%,#d9f2ff 100%) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 0 0 1px rgba(25,95,155,.55),0 5px 16px rgba(0,45,95,.35),inset 0 1px 0 #fff,inset 0 -7px 12px rgba(70,170,235,.28) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .25s,filter .25s}
.zone::before,.home::before,.mute::before{content:"";position:absolute;left:3px;right:3px;top:2px;height:46%;border-radius:inherit;background:linear-gradient(rgba(255,255,255,.95),rgba(255,255,255,.18));pointer-events:none}
.zone:hover,.home:hover,.mute:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 0 0 1px rgba(25,110,175,.7),0 8px 22px rgba(0,60,120,.4),0 0 0 4px rgba(120,210,255,.35),inset 0 1px 0 #fff,inset 0 -7px 12px rgba(70,170,235,.35) !important}
.zone:active,.home:active,.mute:active{transform:scale(.96);box-shadow:0 0 0 1px rgba(25,95,155,.7),0 2px 8px rgba(0,45,95,.35),inset 0 3px 8px rgba(40,130,200,.4) !important}
.zone{border-radius:14px;padding:7px 16px 7px 8px}
.zone img{filter:drop-shadow(0 2px 3px rgba(0,50,100,.35))}
.zone span,.zone i{position:relative;z-index:1}.zone i{color:#2a6aa8;opacity:1;font-size:12px}
.home{border-radius:999px;padding:6px 16px 6px 12px;font-weight:700;color:#14507f}
.mute{border-radius:50%;color:#14507f}

/* ---- The Club: the player card, its pill, and the DJ booth window. Solid, light panels with dark text: readable over the dark hall ---- */
.clubcard,.clubpanel{color:#0b2a48;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,#ffffff 0%,#eaf6ff 48%,#d6ebfb 100%);border:1px solid #fff;box-shadow:0 12px 34px rgba(0,25,70,.5),0 0 0 1px rgba(20,90,150,.4),inset 0 1px 0 #fff,inset 0 -8px 16px rgba(90,170,235,.18);font-family:"Segoe UI","Trebuchet MS",Tahoma,sans-serif}
.clubcard{position:absolute;right:12px;top:66px;width:252px;padding:10px 10px 11px;border-radius:18px;animation:pzpop .45s cubic-bezier(.3,1.3,.5,1)}
.clubcard[hidden],.clubpanel[hidden],.clubpill[hidden]{display:none}
.clubcard.min{left:-9999px;right:auto;top:0;animation:none}  /* collapsed: moved off screen but still alive, so the music keeps playing */
.chead{display:flex;align-items:center;justify-content:space-between;margin:0 2px 7px}.chead b{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#2a6aa0}
.cx{width:26px;height:26px;border-radius:50%;border:1px solid rgba(80,140,195,.85);background:linear-gradient(#fff,#d9edfc);color:#27567c;font-weight:900;font-size:15px;line-height:1;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.5,.5,1)}.cx:hover{transform:scale(1.12)}
.cvid{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#2a1a6a,#071230);box-shadow:0 0 0 1px rgba(10,60,120,.45),0 3px 10px rgba(0,30,80,.35)}
.cvid.off .cph{visibility:hidden}
.cvid.off::after{content:"🎧";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;opacity:.6}
.cph,.cph iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.clisten{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:auto;cursor:pointer;font:inherit;font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 1px rgba(0,60,0,.55);padding:10px 18px;border-radius:999px;border:1px solid #1f7d2c;white-space:nowrap;background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.9),rgba(255,255,255,0) 52%),linear-gradient(#7ee05c,#2fb23a 55%,#25a032);box-shadow:0 4px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7);animation:clpulse 1.6s ease-in-out infinite}
.clisten[hidden]{display:none}
@keyframes clpulse{50%{transform:translate(-50%,-50%) scale(1.07)}}
.cmeta{margin:9px 2px 5px;line-height:1.3}.cmeta b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;font-weight:700;word-break:break-word;color:#0a2540}.cmeta span{display:block;font-size:13px;color:#3d607a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cbar{height:6px;border-radius:3px;background:#c4dcee;overflow:hidden;margin:0 2px 9px;box-shadow:inset 0 1px 2px rgba(0,50,100,.25)}.cbar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#35c6ff,#ff6fc8);transition:width .5s linear}
.crow{display:flex;gap:8px;margin-bottom:9px}
.cb,.cl-b{font:inherit;font-weight:700;font-size:13.5px;color:#1f4f78;border-radius:999px;border:1px solid rgba(80,140,195,.9);padding:7px 14px;cursor:pointer;background:linear-gradient(#fff,#d9edfc);box-shadow:0 1px 3px rgba(0,60,120,.2),inset 0 1px 0 #fff;transition:transform .25s cubic-bezier(.3,1.5,.5,1),filter .2s;white-space:nowrap}
.cb:hover:not([disabled]),.cl-b:hover:not([disabled]){transform:translateY(-1px) scale(1.04);filter:brightness(1.05)}
.cb[disabled],.cl-b[disabled]{opacity:.5;cursor:default}.cb[hidden]{display:none}
.cb.skip,.cl-b.skip{border-color:#b8541a;color:#fff;text-shadow:0 1px 1px rgba(80,30,0,.55);background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.85),rgba(255,255,255,0) 52%),linear-gradient(#ffb066,#ee7d20 55%,#e06f12)}
.cb.go,.cl-b.go{border-color:#1f7d2c;color:#fff;text-shadow:0 1px 1px rgba(0,60,0,.55);background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.9),rgba(255,255,255,0) 52%),linear-gradient(#7ee05c,#2fb23a 55%,#25a032)}
.crow .skip{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.crow .go{flex:none}
.cvolrow{display:flex;align-items:center;gap:8px;margin:0 2px}
.cvolrow .cb{padding:4px 9px;font-size:15px;flex:none}
.cvolrow input[type=range]{flex:1;min-width:0;height:22px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.cvolrow input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,#35c6ff var(--v,70%),#c4dcee var(--v,70%));box-shadow:inset 0 1px 2px rgba(0,50,100,.35)}
.cvolrow input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:#c4dcee}.cvolrow input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:#35c6ff}
.cvolrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;border:1px solid #1d6aa8;background:radial-gradient(circle at 50% 25%,#fff,rgba(255,255,255,0) 60%),linear-gradient(#6fd0ff,#1a8ae0);box-shadow:0 2px 4px rgba(0,40,90,.45)}
.cvolrow input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:1px solid #1d6aa8;background:linear-gradient(#6fd0ff,#1a8ae0)}
.cvolrow output{flex:none;width:34px;text-align:right;font-size:12.5px;font-weight:700;color:#3d607a}
.clubpill{position:absolute;right:12px;top:66px;display:flex;align-items:center;gap:8px;max-width:240px;padding:7px 14px 7px 10px;border-radius:999px;border:1px solid #fff;cursor:pointer;font:inherit;font-weight:700;font-size:13.5px;color:#0a2540;background:linear-gradient(#fff,#d9edfc);box-shadow:0 6px 18px rgba(0,25,70,.45),0 0 0 1px rgba(20,90,150,.4),inset 0 1px 0 #fff;pointer-events:auto;animation:pzpop .35s cubic-bezier(.3,1.3,.5,1)}
.clubpill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clubpill:hover{filter:brightness(1.05)}
.clubpill i{font-style:normal;font-size:16px}.clubpill.on i{animation:clbob 1s ease-in-out infinite}@keyframes clbob{50%{transform:translateY(-2px) rotate(8deg)}}
.clubpanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(470px,calc(100vw - 24px));max-height:min(660px,calc(100vh - 90px));overflow:auto;padding:16px 18px 16px;border-radius:20px;animation:pcin .35s cubic-bezier(.2,1.2,.4,1);font-size:14px;line-height:1.45}
.clubpanel h4{margin:0 0 12px;font-size:20px;font-weight:800;color:#0a2540}
.clubpanel h5{margin:16px 0 7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2a6aa0}
.cl-close{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(80,140,195,.9);background:linear-gradient(#fff,#d9edfc);color:#27567c;font-weight:900;font-size:15px;cursor:pointer}.cl-close:hover{filter:brightness(1.06)}
.cl-card{padding:10px 12px;border-radius:14px;background:#fff;border:1px solid #c9e0f2;box-shadow:0 1px 3px rgba(0,60,120,.12)}
.cl-now b{display:block;font-size:15.5px;font-weight:700;word-break:break-word;color:#0a2540}.cl-now span{display:block;margin-top:3px;font-size:13px;color:#3d607a}
.cl-now+.cl-b{margin-top:10px;width:100%}
.cl-djs{display:flex;flex-wrap:wrap;gap:7px}.cl-djs span{padding:5px 12px;border-radius:999px;background:#fff;border:1px solid #bcd8ee;font-weight:700;font-size:13px;color:#16486f}.cl-djs span.on{background:linear-gradient(#caf5b3,#8fe068);border-color:#3fae1d;color:#124a0c}.cl-djs i,.cl-list i{font-style:normal;color:#5a7a92;font-weight:600;margin-left:5px}
.cl-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}.cl-list li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:12px;background:#fff;border:1px solid #cfe3f3;font-size:14px;color:#0b2a48;word-break:break-word}
.cl-x{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(200,80,60,.7);background:linear-gradient(#fff,#ffd9d2);color:#a8321f;font-weight:900;cursor:pointer;line-height:1}
.cl-add{display:flex;gap:8px}.cl-add input{flex:1;min-width:0;font:inherit;font-size:14px;height:38px;padding:0 14px;border-radius:999px;border:1px solid #8fbbdc;background:#fff;color:#0a2540;outline:none;box-shadow:inset 0 1px 3px rgba(0,60,120,.15)}.cl-add input::placeholder{color:#7a97ad}.cl-add input:focus{border-color:#2a8ad0;box-shadow:0 0 0 3px rgba(80,180,255,.4)}
.cl-note{min-height:20px;margin:7px 4px 0;font-size:13px;color:#1b5f95}.cl-note.bad{color:#b02a14;font-weight:700}.cl-m{margin:4px 0 10px;color:#3d607a}
.cl-rules{margin-top:16px;font-size:13px}.cl-rules summary{cursor:pointer;font-weight:700;color:#2a6aa0}.cl-rules ul{margin:8px 0 0;padding-left:20px;color:#26485f}.cl-rules li{margin-bottom:4px}
@media (max-width:560px){.clubcard{width:182px;top:88px;right:8px;padding:8px}.cmeta b{font-size:13px}.cmeta span{font-size:12px}.crow{gap:6px}.cb{padding:6px 10px;font-size:12.5px}.crow .go{flex:none}.clubpill{top:88px;right:8px;max-width:190px}}
.cvolrow .cb.cmute{padding:4px 12px;font-size:13px;min-width:66px}.cb.cmute.on{border-color:#b8541a;color:#fff;text-shadow:0 1px 1px rgba(80,30,0,.55);background:linear-gradient(#ffb066,#ee7d20 55%,#e06f12)}

/* the Plaza's sound switch is a written tab under "Desktop" ("Mute" / "Unmute"), not a round icon */
.mute{right:auto !important;left:24px;top:126px;width:auto !important;height:auto !important;border-radius:999px !important;padding:6px 16px !important;font-size:13px !important;font-weight:700;display:block !important}
.mute.off{color:#fff !important;border-color:#b8541a !important;text-shadow:0 1px 1px rgba(80,30,0,.55) !important;background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.85),rgba(255,255,255,0) 52%),linear-gradient(#ffb066,#ee7d20 55%,#e06f12) !important}
html.embed .mute{top:84px}
@media (max-width:560px){.mute{left:12px;top:112px}html.embed .mute{top:70px}}

/* the three corner tabs: same width and height, an even 12px gap between them */
.home,.mute{min-width:112px;height:34px !important;padding:0 16px !important;text-align:center;box-sizing:border-box;display:flex !important;align-items:center;justify-content:center;gap:6px;line-height:1}
.home{left:24px;top:92px}
.mute{left:24px;top:138px !important}
html.embed .mute{top:92px !important}
@media (max-width:560px){.home{left:12px;top:80px}.mute{left:12px;top:126px !important}html.embed .mute{top:80px !important}}

/* the booth inside the Plaza (only on a Plaza page opened on its own; on the desktop it is a window): a sheet from the bottom on a phone */
.clubpanel.bt-root{overflow:auto;padding:16px;-webkit-overflow-scrolling:touch}
@media (max-width:560px){.clubpanel{left:0 !important;top:auto !important;bottom:0;transform:none !important;width:100% !important;max-height:88vh !important;border-radius:20px 20px 0 0 !important;padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important}}

/* indoors the skateboard button is greyed out */
.skb.off{opacity:.45;filter:grayscale(.6)}

/* the DJ stage transition: the iris becomes a spinning glossy vinyl record on an aqua glass stage (Frutiger Aero: light shafts, floating bubbles, a bubble-bright label) */
#iris .rdisc,#iris .rsheen,#iris .rlbl,#iris .rtxt,#iris .rring{display:none}
#iris.rec{background:radial-gradient(90% 70% at 50% 108%,rgba(190,255,150,.65),rgba(190,255,150,0) 60%),radial-gradient(70% 55% at 18% 8%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),linear-gradient(160deg,#7fe3ff 0%,#2a9df4 42%,#0a4fb0 100%);overflow:hidden}
#iris.rec::before{content:"";position:absolute;left:50%;top:50%;width:230vmax;height:230vmax;margin:-115vmax 0 0 -115vmax;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.17) 0 5deg,rgba(255,255,255,0) 5deg 15deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%);animation:recrays 26s linear infinite}
#iris.rec::after{content:"";position:absolute;left:50%;top:50%;--d:min(78vmin,560px);width:calc(var(--d) * 1.55);height:calc(var(--d) * 1.55);margin:calc(var(--d) * -.775) 0 0 calc(var(--d) * -.775);border-radius:50%;background:radial-gradient(circle,rgba(150,240,255,.55) 0,rgba(150,240,255,.18) 40%,rgba(150,240,255,0) 68%);animation:rechalo 2.4s ease-in-out infinite}
#iris.rec i{display:block;animation:recbub 5s ease-in-out infinite}
#iris.rec i:nth-child(2n){animation-duration:6.5s;animation-delay:-2s}#iris.rec i:nth-child(3n){animation-duration:4.2s;animation-delay:-1s}
#iris.rec .rdisc,#iris.rec .rsheen,#iris.rec .rlbl,#iris.rec .rring{display:block;position:absolute;left:50%;top:50%;--d:min(78vmin,560px);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%}
#iris.rec .rdisc{background:repeating-radial-gradient(circle at 50% 50%,#0a2a58 0 2px,#16457f 2px 4px),radial-gradient(circle,#1b5596,#061a3a);box-shadow:0 0 0 8px rgba(255,255,255,.65),0 0 0 11px rgba(10,80,150,.5),0 0 70px 14px rgba(120,230,255,.55),0 26px 60px rgba(0,30,90,.55),inset 0 0 60px rgba(120,225,255,.45);animation:recspin 2.4s linear infinite}
#iris.rec .rsheen{background:conic-gradient(from 25deg,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 6%,rgba(255,255,255,0) 16%,rgba(255,255,255,0) 50%,rgba(190,245,255,.55) 56%,rgba(255,255,255,0) 66%),radial-gradient(circle at 30% 22%,rgba(255,255,255,.5),rgba(255,255,255,0) 30%);mix-blend-mode:screen}
#iris.rec .rlbl{--d2:calc(min(78vmin,560px) * .36);width:var(--d2);height:var(--d2);margin:calc(var(--d2) / -2) 0 0 calc(var(--d2) / -2);background:radial-gradient(circle at 35% 25%,#fff,#c9f4ff 26%,#47cbff 62%,#0a6fd6);box-shadow:inset 0 0 0 5px rgba(255,255,255,.9),inset 0 0 0 8px rgba(10,100,190,.4),inset 0 -14px 24px rgba(0,80,170,.35),0 0 0 3px rgba(5,40,90,.6);animation:recspin 2.4s linear infinite}
#iris.rec .rlbl::after{content:"";position:absolute;left:50%;top:50%;width:9%;height:9%;margin:-4.5% 0 0 -4.5%;border-radius:50%;background:#06305c;box-shadow:0 0 0 3px rgba(255,255,255,.85)}
#iris.rec .rring{--d:min(78vmin,560px);width:calc(var(--d) * 1.14);height:calc(var(--d) * 1.14);margin:calc(var(--d) * -.57) 0 0 calc(var(--d) * -.57);border:2px solid rgba(255,255,255,.55);animation:recring 2.4s ease-out infinite}
#iris.rec .rring:nth-of-type(2){animation-delay:-1.2s}
#iris.rec .rtxt{display:flex;flex-direction:column;align-items:center;position:absolute;left:50%;top:calc(50% + min(78vmin,560px) * .275);transform:translateX(-50%);color:#fff;text-align:center;text-shadow:0 2px 6px rgba(0,40,100,.75),0 0 20px rgba(140,235,255,.95)}
#iris.rec .rtxt b{font:900 clamp(20px,5.2vmin,40px)/1.1 "Segoe UI","Trebuchet MS",Tahoma,sans-serif;letter-spacing:.16em}
#iris.rec .rtxt small{margin-top:3px;font:700 clamp(12px,2.6vmin,18px)/1.3 "Segoe UI",Tahoma,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.95}
@keyframes recspin{to{transform:rotate(360deg)}}
@keyframes recrays{to{transform:rotate(360deg)}}
@keyframes rechalo{50%{transform:scale(1.07);opacity:.8}}
@keyframes recbub{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-26px) scale(1.08)}}
@keyframes recring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}

/* the moves button (between the skateboard and the smileys) and its tray: wave, jump, dance, spin, bow */
.chat .actb{font-size:20px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.acttray{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);display:flex;gap:8px;padding:10px 12px;animation:pztray .3s cubic-bezier(.3,1.4,.5,1)}
.acttray[hidden]{display:none}
.acttray button{display:flex;flex-direction:column;align-items:center;gap:2px;width:62px;padding:7px 4px 6px;border-radius:16px;border:1px solid rgba(120,180,225,.85);background:linear-gradient(#fff,#dbeeff);color:#0b2a48;font:700 12px "Segoe UI",Tahoma,sans-serif;cursor:pointer;box-shadow:0 2px 6px rgba(0,60,120,.2),inset 0 1px 0 #fff;transition:transform .3s cubic-bezier(.3,1.5,.5,1),filter .2s}
.acttray button i{font-style:normal;font-size:26px;line-height:1.1}
.acttray button:hover{transform:translateY(-3px) scale(1.07);filter:brightness(1.05)}
.acttray button:active{transform:scale(.93)}
.acttray.cool button{opacity:.55;pointer-events:none}
.pzact{position:absolute;left:50%;bottom:100%;margin-bottom:6px;font-size:26px;line-height:1;transform:translateX(-50%);filter:drop-shadow(0 2px 3px rgba(0,40,90,.4));animation:pzact 1.8s ease-out forwards;pointer-events:none}
@keyframes pzact{0%{opacity:0;transform:translate(-50%,40%) scale(.4)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}30%{transform:translate(-50%,-4%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
@media (max-width:560px){.acttray{gap:5px;padding:8px}.acttray button{width:54px}}

/* on phones, with Graphics set to Low, or once the game has had to lower the quality: no blur behind the glass (re-blurring a moving 3D picture is costly), a little more opaque instead */
html.lite .glass,html.lite .arc{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
html.lite .glass{background:linear-gradient(rgba(255,255,255,.8),rgba(214,238,255,.68) 48%,rgba(165,218,250,.62) 52%,rgba(208,241,255,.76))}
.zb.gfx{border-top:1px solid rgba(80,140,200,.35);margin-top:4px}

/* the moves and graphics buttons use drawn / generated artwork */
.chat .actb{padding:2px}.chat .actb img{width:100%;height:100%;object-fit:contain;display:block}
.chat .gfxb{padding:4px}.chat .gfxb svg{width:100%;height:100%;display:block;pointer-events:none;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}.chat .gfxb:hover svg{transform:rotate(60deg)}
.acttray button i{width:46px;height:46px;filter:drop-shadow(0 2px 2px rgba(0,50,100,.3))}.acttray button i img{width:100%;height:100%;object-fit:contain;display:block}
.acttray button{width:68px}.pzact{width:40px;height:40px}.pzact img{width:100%;height:100%;object-fit:contain;display:block}
.gfxtray{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);width:min(300px,calc(100vw - 32px));padding:12px;animation:pztray .3s cubic-bezier(.3,1.4,.5,1)}
.gfxtray[hidden]{display:none}.gfxtray h4{margin:0 0 8px 4px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#2a6aa0}
.gfxtray button{display:block;width:100%;text-align:left;margin-top:6px;padding:9px 14px;border-radius:14px;border:1px solid rgba(120,180,225,.85);background:linear-gradient(#fff,#dbeeff);color:#0b2a48;font:inherit;cursor:pointer;box-shadow:0 2px 6px rgba(0,60,120,.18),inset 0 1px 0 #fff;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.gfxtray button:hover{transform:translateY(-2px)}.gfxtray button b{display:block;font-size:15px}.gfxtray button small{display:block;font-size:12px;color:#3d607a;margin-top:1px}
.gfxtray button.on{background:linear-gradient(#caf5b3,#8fe068);border-color:#3fae1d}

/* every round button in the chat bar is the same glossy blue as the skateboard (the smileys, the moves, the cogwheel) */
.chat .emob{background:radial-gradient(circle at 50% 18%,#fff,rgba(255,255,255,.3) 55%),linear-gradient(#e6f6ff,#a9dcff) !important}
.chat .emob:hover{box-shadow:0 4px 12px rgba(0,110,200,.35),0 0 0 3px rgba(127,216,255,.55) !important}
.chat .emob.on{box-shadow:0 0 0 3px rgba(127,216,255,.75),0 2px 10px rgba(0,110,200,.4) !important}
.chat .emob.skb.on{box-shadow:0 0 0 3px rgba(255,170,60,.7),0 2px 10px rgba(255,140,0,.4) !important}

.chat .gfxb{padding:8px !important}

.dupveil{position:absolute;inset:0;z-index:60;background:rgba(10,40,70,.45);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center}
.dupveil[hidden]{display:none}
.dupcard{padding:20px 22px 18px;width:min(320px,calc(100vw - 32px));text-align:center}
.dupbtn{margin-top:14px;padding:9px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.85);background:linear-gradient(#bfe7ff,#5fb8f5 52%,#2e97e8);color:#fff;font-weight:800;font-size:14px;text-shadow:0 1px 2px rgba(0,60,120,.5);cursor:pointer;box-shadow:0 3px 10px rgba(0,100,200,.35)}
.dupbtn:hover{filter:brightness(1.08)}