@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#e9eafa;background:#060819;--accent:#9390ff;--tile:#faf4e4;--tile-bottom:#e0d5b8;--tile-edge:#b4a786;--ink:#214936;--red:#b83f41;--blue:#34569e;--back:#346151;--line:#ffffff1a;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;color:inherit;transition:background .2s,border-color .2s,box-shadow .2s}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,#viewport:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:hover:not(:disabled){border-color:var(--accent)}a{color:var(--accent)}[hidden]{display:none!important}#cosmos{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}header{display:flex;justify-content:space-between;align-items:center;padding:20px 4%;border-bottom:1px solid var(--line);background:#080c2090;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#edf0ff;font-weight:700;font-size:17px;letter-spacing:2px}.brand small{display:block;margin-top:5px;font-size:10px;font-weight:500;letter-spacing:2px;color:#969dbb}.brandmark{border:1px solid #aaa0e6;border-radius:7px;padding:6px 12px;background:linear-gradient(140deg,#292843,#0d1225);box-shadow:0 4px 0 #3c3c63;color:#e3d9ff;font:32px serif}nav{display:flex;gap:10px}nav button,.title-actions button,.tools button,.camera button{background:#11162baa;border:1px solid var(--line);padding:10px 16px;border-radius:8px;font-size:14px}#help{width:40px;padding:8px;border-radius:50%}main{max-width:1600px;padding:27px 4% 18px;margin:auto}.titlebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;color:#a6a1cc}h1{font:500 30px Manrope,sans-serif;letter-spacing:-1px;margin:7px 0 0}.title-actions{display:flex;gap:9px}.primary{background:linear-gradient(135deg,#7972d9,#5559ac)!important;border:1px solid #a299e766!important;border-radius:8px;padding:12px 20px;color:white!important}.observatory{position:relative;border:1px solid #a99be822;border-radius:18px;background:#060b2040;box-shadow:0 20px 80px #0004;overflow:hidden}.hud{position:absolute;z-index:5;top:18px;left:24px;display:flex;gap:32px;pointer-events:none}.hud span{display:block;font-size:10px;letter-spacing:1.5px;color:#a1aac8}.hud strong{display:block;font:500 22px Manrope,sans-serif;margin-top:5px;font-variant-numeric:tabular-nums}#viewport{height:min(67vh,740px);min-height:490px;position:relative;overflow:hidden;touch-action:none;cursor:grab}#viewport.dragging{cursor:grabbing}#viewport:before{content:'';position:absolute;inset:10% 5%;border:1px solid #9286e40c;border-radius:50%;pointer-events:none}.scene{position:absolute;left:50%;top:51%;width:0;height:0;perspective:2000px;transform-style:preserve-3d;will-change:transform}#world{position:absolute;transform-style:preserve-3d;transform-origin:0 0;transition:transform .1s ease-out}#platform,#tiles,#table-content{transform-style:preserve-3d;position:absolute;inset:0;pointer-events:none}.platform-top,.platform-bottom,.platform-front,.platform-back,.platform-left,.platform-right{position:absolute;border:1px solid #9d97e478;backface-visibility:hidden}.platform-top{background:linear-gradient(135deg,#263455e8,#161930f0 50%,#22243ee8);box-shadow:inset 0 0 40px #9390ff16,0 0 22px #7766cc30;border-radius:14px}.platform-front,.platform-back{height:48px;background:linear-gradient(#232a49,#0c0f22 68%,#575580 70%,#151831 80%)}.platform-left,.platform-right{width:48px;background:linear-gradient(90deg,#111427,#333754)}.platform-bottom{background:#080d1d;box-shadow:0 0 60px #4c3fa030}.tile{width:48px;height:64px;position:absolute;transform-style:preserve-3d;pointer-events:none;transition:translate .26s,scale .26s;animation:deal-in .6s backwards}.tile .face{position:absolute;backface-visibility:hidden;border:1px solid var(--tile-edge);border-radius:4px;pointer-events:none}.tile .top{pointer-events:auto;width:48px;height:64px;background:linear-gradient(145deg,var(--tile),var(--tile-bottom));transform:translateZ(14px);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px var(--tile);padding:4px;cursor:pointer;color:var(--ink);border-radius:5px;transition:filter .15s,box-shadow .2s}.tile .front{width:48px;height:14px;transform:translateY(57px) translateZ(7px) rotateX(-90deg);background:linear-gradient(var(--tile-bottom) 70%,var(--back) 71%)}.tile .back{width:48px;height:14px;transform:translateY(-7px) translateZ(7px) rotateX(90deg);background:var(--tile-bottom)}.tile .left{width:14px;height:64px;transform:translateX(-7px) translateZ(7px) rotateY(-90deg);background:var(--tile-bottom)}.tile .right{width:14px;height:64px;transform:translateX(41px) translateZ(7px) rotateY(90deg);background:var(--tile-edge)}.tile.blocked .top{filter:brightness(.67) saturate(.65)}body.no-guides .tile.blocked .top{filter:none}.tile.blocked .top{cursor:grab}.tile.selected,.tile.hinted{translate:0 0 9px}.tile.selected .top,.tile.hinted .top{box-shadow:inset 0 0 0 3px var(--accent),0 0 22px var(--accent);filter:none}.tile:not(.blocked):hover{translate:0 0 7px}.tile.vanishing{translate:0 0 95px;scale:.15}.mark{font:700 29px Georgia,'Noto Serif CJK SC',serif;line-height:1.05}.mark.red{color:var(--red)}.mark.blue{color:var(--blue)}.tile-caption{font:600 8px 'DM Sans',sans-serif;letter-spacing:.7px;margin-top:3px;white-space:nowrap}.pips{width:29px;height:38px;display:grid;grid-template-columns:repeat(3,1fr);align-content:center;justify-items:center;gap:3px}.pip{width:7px;height:7px;border:2px solid var(--blue);border-radius:50%}.bamboo .pip{width:5px;height:10px;border:0;background:var(--ink);border-radius:3px;box-shadow:inset 0 2px var(--tile),inset 0 -2px var(--tile)}.tile .concealed{background:repeating-linear-gradient(45deg,#2b335a,#2b335a 4px,#3a4169 4px,#3a4169 5px);color:#c4b9ee;border-color:#9187b8}.tile .concealed .mark{font-size:30px}.bottom-hud{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;background:#080d2299;border-top:1px solid var(--line)}.tools,.camera{display:flex;align-items:center;gap:7px}.tools button{padding:10px 13px}kbd{font-family:inherit;font-size:10px;margin-left:9px;background:#ffffff0d;padding:2px 5px;border-radius:3px;color:#8e96b8}.camera button{font-size:21px;padding:4px;width:34px;height:34px}.camera output{font-size:12px;width:43px;text-align:center;color:#b6bddb}.divider{width:1px;height:20px;background:var(--line);margin:0 5px}.footline{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 3px;font-size:13px;color:#a4adcc}.camera-help{font-size:9px;letter-spacing:.7px;white-space:nowrap;color:#687492}.camera-help b{font-weight:500;color:#939dc0}#overlay{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:8;background:#070b22dc;backdrop-filter:blur(12px);padding:25px}#overlay h2{font:500 32px Manrope;margin:0 0 12px}#overlay p{color:#abb5d2;max-width:500px;line-height:1.6}#overlay button{justify-self:center;margin-top:12px}dialog{color:#e5e7f8;background:linear-gradient(150deg,#191e37,#0d1229);border:1px solid #a89fea44;max-width:570px;width:calc(100% - 30px);max-height:90vh;border-radius:18px;padding:30px;box-shadow:0 25px 100px #000a}dialog::backdrop{background:#030617b8;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;gap:15px;margin-bottom:20px}.dialog-head h2{font:500 27px Manrope;margin:6px 0}.dialog-head button{align-self:flex-start;border:0;background:none;font-size:26px}.game-tabs{display:flex;gap:8px;margin-bottom:23px}.game-tabs button{flex:1;background:#080d2390;border:1px solid var(--line);padding:12px;border-radius:8px}.game-tabs .active{background:#7972d933;border-color:#8e87d9}label{display:flex;flex-direction:column;gap:9px;margin:20px 0;color:#d8ddf2;font-size:14px}select{width:100%;background:#0a1026;border:1px solid #444d72;border-radius:7px;color:#e5e8f7;padding:12px;min-height:45px}input[type=color]{width:100%;height:42px;border:1px solid #444d72;background:#0a1026;border-radius:7px;padding:5px}.check{flex-direction:row;align-items:center}.check input{accent-color:var(--accent);width:18px;height:18px}.full{width:100%;margin-top:20px}dialog p{font-size:14px;color:#aeb7d2;line-height:1.7}dialog h3{font-size:17px;margin-top:24px}#tray{display:flex;justify-content:center;gap:7px;min-height:80px;padding:12px;background:#141831}#tray .mini-tile{width:45px;height:60px}body[data-theme=jade]{--tile:#c8edcb;--tile-bottom:#82b496;--tile-edge:#578672;--ink:#17452f;--red:#9c342f;--back:#175e47}body[data-theme=obsidian]{--tile:#252944;--tile-bottom:#121528;--tile-edge:#777059;--ink:#e7c982;--red:#f39b84;--blue:#adc5f6;--back:#8b7342}body[data-theme=porcelain]{--tile:#f3faff;--tile-bottom:#d0e0f2;--tile-edge:#a6bdd3;--ink:#27559f;--red:#476abc;--blue:#244c93;--back:#3d63a8}body[data-theme=nebula]{--tile:#e4d8fa;--tile-bottom:#aca4d5;--tile-edge:#857ba9;--ink:#403060;--red:#9e3764;--blue:#514395;--back:#5b4487}.mini-tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:59px;background:linear-gradient(145deg,var(--tile),var(--tile-bottom));color:var(--ink);border:1px solid var(--tile-edge);border-radius:5px;box-shadow:0 4px 0 var(--back);padding:3px}.mini-tile .mark{font-size:26px}.mini-tile .tile-caption{font-size:7px}.mini-tile .pips{scale:.9}.mini-tile.selected{outline:3px solid var(--accent);translate:0 -8px}#traditional-panel{position:relative;z-index:5;padding:10px 20px 18px;background:#0a102bcd;border-top:1px solid var(--line)}#hand{display:flex;gap:5px;justify-content:center;padding:12px 0;overflow:auto;min-height:86px}#melds{display:flex;gap:12px;justify-content:center}#melds .mini-tile{scale:.7;margin:-6px}.meld-group{display:flex}#opponents{display:flex;justify-content:space-between;gap:15px;color:#9da9cd;font-size:12px}#claims{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}#claims button{background:#252b4c;color:#e8e6ff;border:1px solid #716da6;border-radius:6px;padding:10px 17px}#claims button.primary{background:#5b58a8}.table-seat{position:absolute;color:#bbc8ee;font-size:18px;text-align:center;transform:translateZ(10px)}.table-seat strong{display:block;color:#b4aadf;font-size:24px}.table-seat small{font-size:12px}.river{position:absolute;display:grid;grid-template-columns:repeat(6,30px);gap:3px;transform:translateZ(10px)}.river .mini-tile{width:29px;height:39px;box-shadow:0 2px 0 var(--back);border-radius:3px}.river .mark{font-size:20px}.river .pips{scale:.65;height:23px}.river .tile-caption{display:none}.wall-tile{position:absolute;width:24px;height:36px;background:linear-gradient(130deg,#344266,#192846);border:1px solid #66789f;border-radius:3px;box-shadow:0 8px 0 #142034;transform:translateZ(14px)}body.traditional #viewport{height:48vh;min-height:340px}body.traditional .hud{gap:25px}.result-table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}.result-table td{padding:7px;border-bottom:1px solid #ffffff14}.rule-note{border-left:2px solid var(--accent);padding-left:14px}.badge{display:inline-block;font-size:11px;background:#9990ff19;border:1px solid #9990ff44;border-radius:4px;padding:3px 6px;color:#c9c4ee}.traditional-unavailable{opacity:.65;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.traditional-unavailable strong{font-size:14px}@keyframes deal-in{from{translate:0 0 60px}to{translate:0 0 0}}@media(min-width:1500px){#viewport{height:70vh}}@media(max-width:900px){header{padding:16px 20px}.brand small{font-size:8px}nav{gap:5px}nav button{font-size:12px;padding:9px}main{padding:22px 15px}.camera-help{display:none}.hud{gap:23px}.footline{justify-content:center;text-align:center}#hand{justify-content:flex-start}#viewport{min-height:470px}}@media(max-width:540px){header{padding:13px 15px}.brand{font-size:13px;gap:9px}.brandmark{font-size:25px;padding:5px 9px}.brand small{display:none}nav button{padding:8px;font-size:11px}nav #help{width:29px}h1{font-size:25px}.eyebrow{font-size:9px}.title-actions button{font-size:12px;padding:10px}.hud{left:15px;top:15px;gap:21px}.hud span{font-size:8px}.hud strong{font-size:18px}.bottom-hud{flex-direction:column;padding:12px}.tools,.camera{justify-content:center}.tools button{font-size:13px;padding:9px 15px}#viewport{height:56vh;min-height:400px}dialog{padding:22px}.camera{gap:10px}#opponents{font-size:10px;gap:6px}#traditional-panel{padding:10px}#hand{gap:3px}.mini-tile{width:36px;height:52px}.mini-tile .mark{font-size:23px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}
.cube-panel{position:absolute;width:348px;height:348px;border:3px solid #a8a0d9;background:linear-gradient(135deg,#354163,#171f3a 65%,#272b4b);backface-visibility:hidden;box-shadow:inset 0 0 0 5px #121c35,inset 0 0 0 6px #a8a0d966,inset 0 0 40px #080b25}.cube-inlay{position:absolute;inset:10px;border:1px solid #a8a0d940;background:repeating-linear-gradient(0deg,transparent,transparent 67px,#ffffff08 67px,#ffffff08 68px),repeating-linear-gradient(90deg,transparent,transparent 51px,#ffffff08 51px,#ffffff08 52px)}.face-name{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:4px;color:#b8afd7}.tray-count{align-self:center;margin-left:15px;font-size:13px;color:#a9b1cc}body{background:transparent}body:before{content:'';position:fixed;inset:0;z-index:-2;background:#070c22 url('skybox.jpg') center/cover no-repeat;animation:cosmic-drift 80s ease-in-out infinite alternate;pointer-events:none}body:after{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(#04071877,transparent 35%,#03061766);pointer-events:none}@keyframes cosmic-drift{from{transform:scale(1)}to{transform:scale(1.09) translate(-1%,1%)}}body.still:before{animation:none}#cosmos{z-index:0}header,main{position:relative;z-index:1}
.table-center{position:absolute;width:200px;text-align:center;color:#c8c1e2}.table-center strong{display:block;font:42px Georgia}.table-center span{font-size:10px;letter-spacing:2px}.opponent-melds{position:absolute;display:flex;gap:2px;max-width:200px;flex-wrap:wrap}.opponent-melds .mini-tile{width:22px;height:31px}.opponent-melds .mark{font-size:16px}.opponent-melds .pips{scale:.5;width:20px;height:20px}.opponent-melds .tile-caption{display:none}.table-seat{width:130px}.table-seat strong{font-size:18px}.active-seat{color:#e0d8ff!important}.flower-count{font-size:12px;color:#a9b5cd;align-self:center}#overlay details{max-height:150px;overflow:auto;font-size:13px;margin-top:12px;text-align:left}#overlay summary{cursor:pointer;color:#c4b8f1}
/* A shared local coordinate frame prevents differing CSS transform origins from splitting the board. */
.board-surface{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0 0;transform-style:preserve-3d;pointer-events:none}.surface-panel{position:absolute;backface-visibility:hidden;pointer-events:none;box-sizing:border-box;background:linear-gradient(135deg,#364767,#18223c 70%,#2c3457);border:1px solid #9899c4;box-shadow:inset 0 0 0 5px #141d33,inset 0 0 0 6px #b9b2e14d}.sphere-facet{border:0;box-shadow:none}.gateway .top:after{content:'◆';position:absolute;top:2px;right:3px;font-size:7px;color:#755619}.gateway .top{border-color:#c9a761}.board-surface .tile{transform-origin:center center 0}.board-surface .surface-panel{transform-origin:0 0 0}
/* The cosmos is the playing area; controls float above it. */
body{height:100dvh;overflow:hidden}header{position:fixed;inset:12px 14px auto;z-index:20;padding:0;border:0;background:none;backdrop-filter:none;pointer-events:none}header>*{pointer-events:auto}.brand{font-size:12px;gap:8px}.brand small{display:none}.brandmark{font-size:22px;padding:3px 8px}nav{gap:5px}nav button{padding:8px 10px;font-size:12px;background:#0b1024df}main{position:fixed;inset:0;max-width:none;padding:0}.observatory{position:absolute;inset:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}#viewport{position:absolute;inset:0;width:100%;height:100dvh;min-height:0}#viewport:before{display:none}.scene{top:50%}.titlebar{position:fixed;top:65px;left:18px;right:18px;z-index:10;pointer-events:none;margin:0}.titlebar>*{pointer-events:auto}h1{font-size:18px;margin:3px 0}.eyebrow{font-size:8px;letter-spacing:1px}.title-actions button{font-size:12px;padding:7px 10px}.hud{top:120px;left:18px;gap:18px;padding:8px 11px;border-radius:8px;background:#080d22b0}.hud span{font-size:8px;letter-spacing:.5px}.hud strong{font-size:16px;margin-top:3px}.bottom-hud{position:fixed;bottom:38px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);border:1px solid #ffffff20;border-radius:12px;padding:7px;gap:18px;background:#080d22d9;backdrop-filter:blur(12px)}.tools button{padding:7px 9px;font-size:12px}.camera button{width:29px;height:29px;font-size:18px}.camera{gap:4px}.footline{position:fixed;bottom:5px;left:16px;right:16px;z-index:9;padding:5px;font-size:11px;pointer-events:none;text-shadow:0 1px 4px #000}.camera-help{display:none}#message{max-width:100%;padding:3px 8px;border-radius:6px;background:#080d22b0}#tray{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:8;border-radius:12px;min-height:0;padding:8px;background:#10162adb}#traditional-panel{position:fixed;bottom:93px;left:12px;right:12px;border-radius:12px;max-height:35vh;overflow:auto}body.traditional #viewport{inset:0 0 200px;height:calc(100dvh - 200px);min-height:0}body.quiet-hud .titlebar,body.quiet-hud .hud,body.quiet-hud .bottom-hud,body.quiet-hud .footline,body.quiet-hud .brand,body.quiet-hud nav button:not(#hide-hud){display:none}body.quiet-hud header{justify-content:flex-end}body.quiet-hud #tray{bottom:12px}body.quiet-hud.traditional #traditional-panel{bottom:12px}dialog{z-index:30}.surface-panel{box-shadow:none;border-color:#64678060}.tile .top{border-radius:3px}
@media(max-width:600px){header{inset:8px}.brand{font-size:0}.brandmark{font-size:22px}nav button{font-size:10px;padding:7px}nav{gap:3px}.titlebar{top:53px;left:12px;right:12px}.hud{top:104px;left:12px;gap:13px}.bottom-hud{flex-direction:row;gap:6px;bottom:44px}.tools button{padding:6px}.tools kbd,.tools button span{display:none}.tools button{font-size:18px;min-width:30px}.camera{gap:3px}.camera button{width:27px}.divider{display:none}.camera output{width:32px;font-size:10px}.footline{font-size:10px;left:5px;right:5px}.hud strong{font-size:14px}#traditional-panel{bottom:92px}#tray{bottom:98px}h1{font-size:16px}}
.tile.wedge .face:not(.top){display:none}.tile.wedge .top{border-radius:0;filter:drop-shadow(0 2px 0 var(--tile-edge))}.tile.wedge.blocked .top{filter:brightness(.67) saturate(.65)}

/* Invisible support geometry; tile tops alone define the solid shell. */
body.solid-board .surface-panel{display:none}body.solid-board .tile .top{border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--tile-edge)}body.solid-board .tile.wedge .top{filter:none}body.solid-board .tile.wedge.blocked .top{filter:brightness(.67) saturate(.65)}body.solid-board .tile.selected .top,body.solid-board .tile.hinted .top{box-shadow:inset 0 0 0 3px var(--accent);filter:none}

.shell-wall{position:absolute;height:14px;transform-origin:0 0;background:var(--tile-edge);pointer-events:none;backface-visibility:visible}
/* Celestial enamel faces, engraved themed backs and the GTGB collection. */
.tile-art{position:absolute;inset:0;display:block;background-image:url('tile-art.png');background-repeat:no-repeat;pointer-events:none}.tile .top{overflow:hidden;padding:0}.mini-tile{position:relative;overflow:hidden}.tile-art.gtgb-art{background-image:url('gtgb-sage.png');background-size:100% 100%;background-position:center}.gtgb-1{filter:hue-rotate(45deg)}.gtgb-2{filter:hue-rotate(290deg)}.gtgb-3{filter:grayscale(.75) contrast(1.2)}.gtgb-gem{position:absolute;right:4%;top:5%;font-size:12px;color:#ffecaa;text-shadow:0 1px 3px black}.tile-underside{position:absolute;inset:0;width:48px;height:64px;transform:rotateY(180deg);backface-visibility:hidden;pointer-events:none;overflow:hidden}.back-pattern{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,transparent 22%,#ccb77399 23%,transparent 25%,transparent 35%,#d1b57777 36%,transparent 38%),repeating-conic-gradient(from 45deg at 50% 50%,#b19fe622 0deg 2deg,transparent 2deg 45deg),radial-gradient(ellipse,#514078,#141c3c);box-shadow:inset 0 0 0 2px #ceb477,inset 0 0 0 4px #171a34;color:#f3dda8}.back-pattern:after{content:'✧ · ✧';position:absolute;bottom:6%;font-size:9px;letter-spacing:3px}.back-pattern i{font:28px Georgia;text-shadow:0 0 12px #ecd787}.tile-underside .back-pattern{transform:scaleX(-1)}body[data-background=aurora] .back-pattern{background-color:#194b40;filter:hue-rotate(75deg)}body[data-background=deep] .back-pattern{filter:saturate(.3) brightness(.7)}.tile .concealed{background:none}.tile .concealed .back-pattern{inset:0}#cosmic-event{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;place-items:center}#cosmic-event span{align-self:end;margin-bottom:12vh;color:#efe1b5;letter-spacing:3px;font-size:14px;text-shadow:0 0 18px #dcc799}.wind-event{animation:wind-bloom 3.2s both}.flower-event{animation:supernova 4.8s both}.season-event{background:linear-gradient(90deg,#68509b22,transparent,#3d8b9633)}body.cosmic-event #viewport{pointer-events:none}@keyframes wind-bloom{0%,100%{background:#0000}45%{background:#af9eff44}60%{background:#0000}}@keyframes supernova{0%{background:#fff0}23%{background:#fff8dbcc}38%,65%{background:#02020aff}72%{background:#edddff99}100%{background:#0000}}body.still #cosmic-event{display:none}
#online-dialog input:not([type=checkbox]){width:100%;padding:10px;border-radius:6px;border:1px solid #6a7194;background:#090f25;color:#e5e7f7}#online-dialog button{background:#1e2645;border:1px solid #ffffff30;border-radius:7px;padding:9px 12px;margin:3px}#public-rooms{display:flex;flex-direction:column}.riichi-dora{color:#b9bfda;font-size:12px;white-space:nowrap}.tile .top:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.tile .top:has(.tile-art){background:transparent}body[data-theme=jade] .tile-art:not(.gtgb-art){filter:sepia(.25) hue-rotate(45deg)}body[data-theme=obsidian] .tile-art:not(.gtgb-art){filter:brightness(.7) contrast(1.3)}body[data-theme=nebula] .tile-art:not(.gtgb-art){filter:hue-rotate(285deg)}body[data-theme=porcelain] .tile-art:not(.gtgb-art){filter:saturate(.7)}

.universe-half{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform-style:preserve-3d}.universe-half .scene{visibility:visible!important}#cosmic-event>span{z-index:2}
/* Real shape-specific solids with uncropped, independently rendered artwork. */
.tile .top,.tile-underside{width:100%;height:100%}.individual-art{position:absolute;inset:5%;display:flex;align-items:center;justify-content:center;pointer-events:none}.individual-art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.tile .top:has(.individual-art){background:linear-gradient(145deg,#fff8e7,#e6d5ac);overflow:hidden;box-shadow:inset 0 0 0 1px #b69b5f}.shape-circle,.shape-circle .top,.shape-circle .tile-underside{border-radius:50%}.shape-circle .individual-art{inset:9%}.shape-triangle .individual-art{inset:34% 24% 7%}.shape-triangle.triangle-down .individual-art{inset:7% 24% 34%}.shape-triangle .top{border-radius:0}.tile.shape-square .individual-art{inset:3%}.shape-circle .back-pattern,.shape-circle .tile-underside{border-radius:50%}.shape-circle .gtgb-art{inset:19%}.shape-triangle .gtgb-art{inset:35% 30% 9%}.shape-triangle.triangle-down .gtgb-art{inset:9% 30% 35%}.individual-art.gtgb-1{filter:hue-rotate(45deg)}.individual-art.gtgb-2{filter:hue-rotate(290deg)}.individual-art.gtgb-3{filter:grayscale(.75) contrast(1.2)}.individual-art.gtgb-art{background:none}.mini-tile .individual-art{inset:3%}

.tile.shape-triangle .individual-art{inset:auto;left:var(--art-x);top:var(--art-y);width:var(--art-size);height:var(--art-size)}

#tutorial-dialog{width:min(680px,94vw)}.lesson-menu{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lesson-menu button,.lesson-choice,.lesson-actions button,#audio-dialog button{padding:12px;border:1px solid #b0a0eb44;background:#171d35;border-radius:9px;text-align:left}.lesson-menu small{display:block;color:#b9aed8;margin-top:7px}.lesson-practice{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:22px 10px;position:relative}.lesson-practice>div small{display:block;text-align:center;color:#beb7d7;margin-top:8px}.lesson-tile{position:relative;width:82px;height:105px;background:#f2e4c2;border:2px solid #b99f67;border-radius:9px;box-shadow:0 5px #ae9768;overflow:hidden}.lesson-tile.lesson-blocked{filter:brightness(.5)}.lesson-practice [aria-pressed=true]{outline:3px solid #a894ff;outline-offset:4px}.lesson-feedback{min-height:65px;color:#d6cafd;background:#a293ed10;padding:14px;border-radius:9px}.lesson-actions{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}#tutorial-dialog progress{width:100%;height:7px;accent-color:#ac9cff}.connection-practice{padding-top:42px}.connection-practice.route-shown:before{content:'';position:absolute;left:calc(50% - 96px);width:192px;top:15px;height:28px;border:3px solid #a896ff;border-bottom:none}.sound-option{display:flex;gap:12px;align-items:center;margin:20px 0}.sound-option input{width:20px;height:20px}#audio-volume{width:100%}#music-file{display:block;width:100%;margin:12px 0}#audio-dialog{width:min(480px,94vw)}#audio-status{font-size:13px;color:#b8b5ca}nav{flex-wrap:wrap}@media(max-width:600px){.lesson-menu{grid-template-columns:1fr}.lesson-tile{width:62px;height:84px}.lesson-practice{gap:10px}#tutorial-control,#audio-control{padding:7px;font-size:12px}}
/* The start screen shares the actual cosmic stage and configurable tile board. */
#lobby{position:fixed;z-index:15;top:78px;bottom:24px;left:24px;width:370px;overflow:auto;padding:26px;background:linear-gradient(150deg,#10182bef,#101329dc);border:1px solid #b4a1e638;border-radius:18px;backdrop-filter:blur(16px);box-shadow:0 20px 60px #0005}#lobby h1{font-size:25px;line-height:1.3;margin:8px 0 12px}#lobby .eyebrow{font-size:12px}#lobby p{font-size:14px;line-height:1.6;color:#bac3dd}#lobby label{margin:14px 0;font-size:14px}#lobby select{padding:9px;font-size:14px}#lobby .game-tabs{margin:20px 0 12px}#lobby .game-tabs button{font-size:14px}#lobby #layout-note,#lobby #mode-description{font-size:13px}#lobby-online{width:100%;margin-top:10px;border:1px solid #a59beb55;border-radius:8px;background:#24263e;padding:13px;font-size:14px}#saved-journey{border:1px solid #9e8beb55;background:#8781d31a;padding:12px;border-radius:10px}#saved-journey button{width:100%}#saved-label,.save-note{display:block;font-size:12px;line-height:1.6;color:#a6afc9;margin-top:8px}body.in-lobby .titlebar,body.in-lobby .hud,body.in-lobby .bottom-hud,body.in-lobby .footline,body.in-lobby #traditional-panel,body.in-lobby #tray,body.in-lobby #save-control,body.in-lobby #collection,body.in-lobby #home-control,body.in-lobby #hide-hud{display:none}body.in-lobby #viewport{left:394px;width:calc(100% - 394px);height:100dvh;inset-block:0}body.in-lobby .tile .top{pointer-events:none}body.in-lobby #overlay{display:none}.lesson-teaching{border-left:3px solid var(--accent);padding:12px 16px;background:#938cff14;color:#eeeaff!important}.lesson-guide{outline:3px solid #c5b6ff;box-shadow:0 0 24px #a294ff88!important}.lesson-actions{flex-wrap:wrap}.lesson-actions button{font-size:14px}.tile.selected{translate:0 0 15px;animation:tile-wiggle 1.8s ease-in-out infinite;animation-delay:0s!important}.mini-tile.selected{animation:hand-wiggle 1.8s ease-in-out infinite}.tile.vanishing{opacity:0;translate:0 0 0;scale:1;animation:none}.departing-tile{position:fixed;z-index:19;pointer-events:none;background:var(--tile);border:2px solid var(--tile-edge);border-radius:5px;box-shadow:0 5px 0 var(--back),0 0 22px #c5b6ff55;overflow:hidden}.departing-tile img{width:100%;height:100%;object-fit:contain}.departing-tile .individual-art{inset:0;width:100%;height:100%}@keyframes tile-wiggle{0%,100%{rotate:0 0 1 -1.5deg}50%{rotate:0 0 1 1.5deg}}@keyframes hand-wiggle{0%,100%{rotate:-1.5deg}50%{rotate:1.5deg}}body.still .tile.selected,body.still .mini-tile.selected{animation:none}@media(max-width:760px){#lobby{top:auto;bottom:12px;left:12px;right:12px;width:auto;max-height:60dvh;padding:18px}body.in-lobby #viewport{left:0;width:100%;height:45dvh}body.in-lobby header{align-items:flex-start}body.in-lobby nav{max-width:75%;justify-content:flex-end}#lobby h1{font-size:22px}#lobby .lobby-intro{display:none}}

body.in-lobby .tile .top:disabled{opacity:1}#lobby{scrollbar-width:thin;scrollbar-color:#716a9a #14182d}#lobby #start-game{margin-top:12px}
.music-transport{display:flex;gap:8px;justify-content:space-between}.music-transport button{border:1px solid #9e93cc55;border-radius:8px;background:#28243e;padding:10px 14px;font-size:14px}#music-time{font-variant-numeric:tabular-nums;color:#aeb9d3;font-size:13px}#audio-dialog input[type=range]{accent-color:var(--accent);width:100%}
#audio-dialog{scrollbar-width:thin;scrollbar-color:#716a9a #14182d}#audio-dialog .sound-option{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;margin:12px 0}#audio-dialog .sound-option input{width:18px;height:18px;accent-color:var(--accent)}#audio-dialog label{margin:14px 0}#audio-level{width:100%;height:10px}

#viewport{user-select:none}#viewport.dragging .tile .top{cursor:grabbing}#viewport img{-webkit-user-drag:none}.capture-panel{border-top:1px solid var(--line);margin-top:24px;padding-top:10px}.capture-panel button{padding:10px;border:1px solid var(--line);border-radius:8px;background:#232940}.capture-actions{display:flex;gap:10px;flex-wrap:wrap}
/* Shared glass: alpha changes the pane, never the legibility of its controls. */
:root{--menu-opacity:.82}
dialog,#lobby,#appearance-dock,.pause-shard{background:linear-gradient(145deg,rgb(26 32 56 / var(--menu-opacity)),rgb(9 15 32 / var(--menu-opacity)));backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
dialog::backdrop{background:rgb(3 6 23 / calc(var(--menu-opacity) * .2));backdrop-filter:none}
#appearance-dock{position:fixed;z-index:15;top:78px;bottom:24px;right:24px;width:320px;padding:24px;overflow:auto;border:1px solid #b4a1e638;border-radius:18px;box-shadow:0 20px 60px #0005;scrollbar-width:thin;scrollbar-color:#716a9a #14182d}
#appearance-dock h2{font-size:25px}#appearance-dock label{margin:15px 0}#appearance-dock select{padding:9px}#appearance-dock .dialog-head{margin-bottom:12px}#appearance-dock p,#appearance-dock small{font-size:12px;line-height:1.6;color:#bac3dd}#menu-opacity{width:100%;accent-color:var(--accent)}#menu-opacity-value{font-variant-numeric:tabular-nums}
body.in-lobby #viewport{left:394px;width:calc(100% - 738px)}
body.pause-veil #overlay{background:transparent;backdrop-filter:none;display:grid;place-content:center;padding:20px;perspective:1000px}
.pause-shard{max-width:510px;padding:48px 42px;border:1px solid #d0d9ff66;clip-path:polygon(7% 0,94% 3%,100% 87%,88% 100%,0 94%,2% 12%);box-shadow:inset 0 0 60px #b3c9ff18;text-align:center}
.pause-shard h2{font-size:28px!important}.pause-shard p{line-height:1.7}.pause-shard button{margin:16px auto 0}
body.pause-veil #world{animation:pause-drift var(--drift-duration,120s) linear infinite}
body.pause-veil .tile .top{opacity:1!important;background:var(--tile-bottom)!important;color:transparent!important;box-shadow:none!important}
body.pause-veil .tile .top>*{visibility:hidden!important}body.pause-veil .tile.selected,body.pause-veil .tile.hinted{animation:none;translate:none}
body.pause-veil #traditional-panel,body.pause-veil .hud,body.pause-veil #tray{visibility:hidden;pointer-events:none}
@keyframes pause-drift{from{rotate:var(--drift-axis,1 1 1) 0deg}to{rotate:var(--drift-axis,1 1 1) 360deg}}
body.still.pause-veil #world{animation:none}@media(prefers-reduced-motion:reduce){body.pause-veil #world{animation:none}}
@media(max-width:1100px) and (min-width:761px){#lobby{width:290px;left:14px;padding:18px}#appearance-dock{width:260px;right:14px;padding:18px}body.in-lobby #viewport{left:304px;width:calc(100% - 578px)}}
@media(max-width:760px){body.in-lobby{overflow:auto}body.in-lobby #viewport{left:0;width:100%;height:45dvh}#lobby{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:auto;margin:42dvh 12px 12px;max-height:none}#appearance-dock{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:auto;margin:12px;max-height:none}.pause-shard{padding:35px 25px}}

@media(min-width:1101px){body.in-lobby:has(#appearance-dock[hidden]) #viewport{width:calc(100% - 394px)}}
@media(min-width:761px) and (max-width:1100px){body.in-lobby:has(#appearance-dock[hidden]) #viewport{width:calc(100% - 304px)}}
#lobby{transition:transform .4s ease,opacity .4s ease}body.mp-staging #lobby{transform:translateX(calc(-100% - 30px));opacity:0;pointer-events:none}body.mp-staging #online-dialog{position:fixed;margin:0;left:24px;top:78px;bottom:24px;max-height:none;width:min(700px,calc(100% - 390px));max-width:none;animation:stage-enter .4s ease}body.mp-staging #online-dialog::backdrop{background:transparent}#chat-log{height:180px;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:10px;background:#03081933;overflow-wrap:anywhere}#chat-log p{margin:6px 0;font-size:14px}#chat-form{display:flex;gap:10px;align-items:end}#chat-form label{flex:1;margin:10px 0}#chat-form button{margin-bottom:10px}#vote-options{display:grid;gap:8px}#vote-options button[aria-pressed=true]{border-color:var(--accent);background:#938cff33}#online-dialog button{padding:10px;border:1px solid var(--line);border-radius:8px;background:#202841}#staging-votes>p{font-size:12px;color:#bac3dd}#room-chat{margin:20px 0}@keyframes stage-enter{from{transform:translateX(-35px);opacity:0}to{transform:none;opacity:1}}@media(max-width:760px){body.mp-staging #online-dialog{left:12px;right:12px;top:65px;bottom:12px;width:auto}body.mp-staging #lobby{position:fixed;margin:0}#chat-form{display:block}}@media(prefers-reduced-motion:reduce){#lobby{transition:none}body.mp-staging #online-dialog{animation:none}}
body.mp-staging #online-dialog{height:calc(100dvh - 102px);overflow:auto;scrollbar-width:thin}#appearance-dialog .sound-option,#appearance-dock .sound-option{display:flex;flex-direction:row;align-items:center;gap:10px}#appearance-dialog input[type=range],#appearance-dock input[type=range]{width:100%;accent-color:var(--accent)}#native-audio input{width:100%}#native-audio details{font-size:13px;line-height:1.6}@media(max-width:760px){body.mp-staging #online-dialog{height:calc(100dvh - 77px)}}

body.setup-drift #world{animation:pause-drift var(--drift-duration,140s) linear infinite}body.setup-drift #viewport.dragging #world{animation-play-state:paused}body.still.setup-drift #world{animation:none}@media(prefers-reduced-motion:reduce){body.setup-drift #world{animation:none}}body.mp-staging #online-dialog{width:min(410px,calc(100% - 390px))}#chat-log{height:130px}#vote-summary{line-height:1.5}@media(max-width:760px){body.mp-staging #online-dialog{width:auto;top:38vh}body.mp-staging #viewport{height:38vh}}

body[data-background="solar-forge"]:before{background-image:url('solar-forge.png')}
body[data-theme="solar-forge"]{--tile:#fff0cc;--tile-bottom:#fff0cc;--tile-edge:#bf733f;--back:#bf733f}
body[data-theme="solar-forge"] .tile .top:has(.individual-art),body[data-theme="solar-forge"] .mini-tile{background:linear-gradient(145deg,#fff0cc,#bf733f);box-shadow:inset 0 0 0 1px #ffbc66}
body[data-theme="solar-forge"] .back-pattern{background:radial-gradient(circle,transparent 22%,#ffbc6699 24%,transparent 26%,transparent 37%,#ffbc6677 39%,transparent 41%),repeating-conic-gradient(from 45deg,#ffbc6633 0deg 2deg,transparent 2deg 45deg),radial-gradient(ellipse,#bf733f,#080a18);color:#fff0cc;box-shadow:inset 0 0 0 2px #bf733f}

body[data-background="frozen-cosmos"]:before{background-image:url('frozen-cosmos.png')}
body[data-theme="frozen-cosmos"]{--tile:#e0faff;--tile-bottom:#e0faff;--tile-edge:#78a9be;--back:#78a9be}
body[data-theme="frozen-cosmos"] .tile .top:has(.individual-art),body[data-theme="frozen-cosmos"] .mini-tile{background:linear-gradient(145deg,#e0faff,#78a9be);box-shadow:inset 0 0 0 1px #84dcff}
body[data-theme="frozen-cosmos"] .back-pattern{background:radial-gradient(circle,transparent 22%,#84dcff99 24%,transparent 26%,transparent 37%,#84dcff77 39%,transparent 41%),repeating-conic-gradient(from 45deg,#84dcff33 0deg 2deg,transparent 2deg 45deg),radial-gradient(ellipse,#78a9be,#080a18);color:#e0faff;box-shadow:inset 0 0 0 2px #78a9be}

body[data-background="rose-nebula"]:before{background-image:url('rose-nebula.png')}
body[data-theme="rose-nebula"]{--tile:#ffe1ee;--tile-bottom:#ffe1ee;--tile-edge:#ba738f;--back:#ba738f}
body[data-theme="rose-nebula"] .tile .top:has(.individual-art),body[data-theme="rose-nebula"] .mini-tile{background:linear-gradient(145deg,#ffe1ee,#ba738f);box-shadow:inset 0 0 0 1px #ff91bd}
body[data-theme="rose-nebula"] .back-pattern{background:radial-gradient(circle,transparent 22%,#ff91bd99 24%,transparent 26%,transparent 37%,#ff91bd77 39%,transparent 41%),repeating-conic-gradient(from 45deg,#ff91bd33 0deg 2deg,transparent 2deg 45deg),radial-gradient(ellipse,#ba738f,#080a18);color:#ffe1ee;box-shadow:inset 0 0 0 2px #ba738f}

body[data-background="event-horizon"]:before{background-image:url('event-horizon.png')}
body[data-theme="event-horizon"]{--tile:#ded5f5;--tile-bottom:#ded5f5;--tile-edge:#817292;--back:#817292}
body[data-theme="event-horizon"] .tile .top:has(.individual-art),body[data-theme="event-horizon"] .mini-tile{background:linear-gradient(145deg,#ded5f5,#817292);box-shadow:inset 0 0 0 1px #d1b2ff}
body[data-theme="event-horizon"] .back-pattern{background:radial-gradient(circle,transparent 22%,#d1b2ff99 24%,transparent 26%,transparent 37%,#d1b2ff77 39%,transparent 41%),repeating-conic-gradient(from 45deg,#d1b2ff33 0deg 2deg,transparent 2deg 45deg),radial-gradient(ellipse,#817292,#080a18);color:#ded5f5;box-shadow:inset 0 0 0 2px #817292}

body.setup-drift.manual-view #world{animation:none!important}
/* Low-frequency audio illumination keeps the 3D transform tree intact. */
#cavity-light{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;opacity:0}#cavity-light i{position:absolute;left:-100px;top:-100px;width:200px;height:200px;background:radial-gradient(circle,#fff 0%,#fff6c7 8%,var(--accent) 23%,transparent 68%);border-radius:50%;backface-visibility:visible}#cavity-light i:nth-child(2){transform:rotateY(90deg)}#cavity-light i:nth-child(3){transform:rotateX(90deg)}.tile .top:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,transparent 10%,#fff8 32%,var(--accent) 43%,transparent 62%);opacity:var(--tile-reflection,0)}.tile{animation:tile-arrival 1s cubic-bezier(.15,.7,.2,1) backwards}@keyframes tile-arrival{from{translate:var(--arrival-x,1200px) var(--arrival-y,-900px) 0;rotate:0 0 1 100deg}to{translate:0 0 0;rotate:0 0 1 0deg}}body.still .tile{animation:none}.victory-nova{position:fixed;inset:0;pointer-events:none;z-index:49;background:radial-gradient(circle at var(--nova-x) var(--nova-y),#fff 0%,#fff8d2 10%,#c5aeffbb 24%,transparent 55%);animation:victory-burst 2.2s ease-out both}@keyframes victory-burst{0%{opacity:0;scale:.02}25%{opacity:1;scale:1}45%{opacity:1;scale:3}100%{opacity:0;scale:5}}.victory-stats{padding:28px;border:1px solid var(--accent);border-radius:18px;background:rgb(12 18 38 / var(--menu-opacity));min-width:280px}.victory-stats dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.victory-stats dd{margin:0;text-align:right;color:var(--accent)}

.themed-face{position:absolute;inset:0;pointer-events:none;overflow:hidden}.set-enamel{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.tile .themed-face .individual-art,.mini-tile .themed-face .individual-art{inset:4%;border-radius:0;overflow:hidden}.tile.shape-triangle .themed-face .individual-art{inset:34% 24% 7%}.tile.shape-triangle.triangle-down .themed-face .individual-art{inset:7% 24% 34%}.themed-face[data-set="solar-forge"] .individual-art:not(.gtgb-art){filter:sepia(.22) saturate(1.25)}.themed-face[data-set="frozen-cosmos"] .individual-art:not(.gtgb-art){filter:saturate(.78) brightness(1.08)}.themed-face[data-set="rose-nebula"] .individual-art:not(.gtgb-art){filter:sepia(.12) saturate(1.1)}.themed-face[data-set="event-horizon"] .individual-art:not(.gtgb-art){filter:contrast(1.15) brightness(.9)}.themed-face .gtgb-gem{font-size:11px}.departing-tile .themed-face .individual-art{inset:18%;width:64%;height:64%}
body[data-theme="solar-forge"] .back-pattern{background-image:linear-gradient(#080a1844,#080a1888),url("https://geekthegreybeard.github.io/jade-cube-play/tile-faces-open/material-solar-forge.webp");background-size:cover;background-position:center;filter:none}
body[data-theme="frozen-cosmos"] .back-pattern{background-image:linear-gradient(#080a1844,#080a1888),url("https://geekthegreybeard.github.io/jade-cube-play/tile-faces-open/material-frozen-cosmos.webp");background-size:cover;background-position:center;filter:none}
body[data-theme="rose-nebula"] .back-pattern{background-image:linear-gradient(#080a1844,#080a1888),url("https://geekthegreybeard.github.io/jade-cube-play/tile-faces-open/material-rose-nebula.webp");background-size:cover;background-position:center;filter:none}
body[data-theme="event-horizon"] .back-pattern{background-image:linear-gradient(#080a1844,#080a1888),url("https://geekthegreybeard.github.io/jade-cube-play/tile-faces-open/material-event-horizon.webp");background-size:cover;background-position:center;filter:none}

/* Chat is the primary staging activity; voting stays compact beside it. */
body.mp-staging #online-dialog{width:min(820px,calc(100vw - 48px));padding:24px;z-index:25}body.mp-staging #room-info:not([hidden]){display:grid;grid-template-columns:minmax(180px,.8fr) minmax(280px,1.4fr);gap:12px 22px;align-items:start}#room-summary{grid-column:1/-1}#staging-votes{grid-column:1;grid-row:2}#room-chat{grid-column:2;grid-row:2/7;margin:0}#room-chat h3{font-size:22px;margin:0 0 12px}#chat-log{height:clamp(260px,48vh,500px);font-size:16px}#chat-log p{font-size:16px;line-height:1.55;margin:10px 0}#vote-options{grid-template-columns:1fr;gap:4px}#online-dialog #vote-options button{padding:6px 9px;margin:0;font-size:13px;line-height:1.3;text-align:left}#staging-votes h3{font-size:16px}#vote-summary{font-size:13px}body.mp-staging #room-info>label,body.mp-staging #room-info>button{grid-column:1}body.mp-staging #chat-form{display:block}#chat-form input{font-size:16px}body.mp-staging #appearance-dock{z-index:20}@media(max-width:900px){body.mp-staging #online-dialog{left:12px;right:12px;width:calc(100vw - 24px);top:76px;height:calc(100dvh - 90px)}body.mp-staging #room-info:not([hidden]){grid-template-columns:1fr}#room-chat{grid-column:1;grid-row:2}#staging-votes{grid-column:1;grid-row:3}#vote-options{grid-template-columns:repeat(2,minmax(0,1fr))}#chat-log{height:240px}}
/* Use the available face area for the high-resolution symbol, not inset filtering layers. */
.tile .themed-face .individual-art,.mini-tile .themed-face .individual-art{inset:4%;border-radius:0}.themed-face .individual-art:not(.gtgb-art){filter:none!important}.tile.shape-triangle .themed-face .individual-art{left:var(--art-x);top:var(--art-y);width:var(--art-size);height:var(--art-size);right:auto;bottom:auto}.individual-art img{image-rendering:auto}.tile.blocked .top{filter:brightness(.83)}.tile .top{box-shadow:none}.departing-tile .themed-face .individual-art{inset:4%;width:92%;height:92%;border-radius:0}

/* Dim with a translucent veil, keeping artwork out of low-resolution filter layers. */
.tile.blocked .top,body.solid-board .tile.wedge.blocked .top{filter:none}.tile.blocked .top:before{content:"";position:absolute;inset:0;background:#070b202c;z-index:3;pointer-events:none}body.no-guides .tile.blocked .top:before{display:none}body.mp-staging #online-dialog .dialog-head{margin-bottom:8px}body.mp-staging #room-summary{margin:0 0 8px}body.mp-staging #chat-log{height:clamp(180px,32vh,360px)}body.mp-staging #online-dialog h2{margin:0}body.mp-staging #online-dialog{scrollbar-width:thin}

/* Camera travel remains outside the independently rotating board. */
.scene{perspective-origin:0 0}#camera-rig{position:absolute;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0;transition:transform .1s ease-out}

#universe{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}body.surround-world:before{display:none}#welcome{position:fixed;inset:0;z-index:30;display:flex;align-items:center;padding:5vh 9vw;background:linear-gradient(90deg,#060b20e8, #080d2080 42%,transparent 70%);pointer-events:none}.welcome-copy{width:min(430px,42vw);pointer-events:auto}.welcome-crest{color:#e6d8a6;font-size:32px;letter-spacing:18px}.welcome-copy h1{font:500 clamp(70px,8vw,132px)/.88 Georgia,serif;letter-spacing:.035em;margin:22px 0;color:#efe7ca;text-shadow:0 2px 22px #adc4ff55}.welcome-tagline{font:20px Georgia,serif;color:#dfd3ae;letter-spacing:2px;margin:26px 0 36px}.welcome-actions{display:grid;gap:12px}.welcome-actions button{display:flex;justify-content:space-between;padding:19px 23px;background:linear-gradient(120deg,#27304bbd,#111829c9);border:1px solid #cfbb8270;box-shadow:inset 0 0 0 4px #0b102855;border-radius:3px;font-size:19px}.welcome-actions span{color:#dfc486}.welcome-actions button:hover{background:#41415bd9}.welcome-note{font-size:13px;color:#9da8c6;letter-spacing:1px;margin-top:24px}body.welcome-open #lobby,body.welcome-open #appearance-dock,body.welcome-open header,body.welcome-open .titlebar,body.welcome-open .hud,body.welcome-open .bottom-hud,body.welcome-open .footline{visibility:hidden;pointer-events:none}body.welcome-open .scene{left:72%}body.welcome-open #viewport{pointer-events:none}@media(max-width:700px){#welcome{padding:30px 7vw;align-items:flex-end;background:linear-gradient(0deg,#060b20fa, #080d2090 70%,transparent)}.welcome-copy{width:100%}.welcome-copy h1{font-size:60px}.welcome-crest,.welcome-copy .eyebrow{display:none}.welcome-tagline{font-size:17px;margin:16px 0}.welcome-actions button{padding:13px 20px}body.welcome-open .scene{left:70%;top:24%;scale:.65}.welcome-note{margin-bottom:0}}

body.welcome-open .tile{animation:none!important}

.welcome-audio{display:flex;align-items:center;gap:18px;margin-top:22px;font-size:14px}.welcome-audio button{background:#151e35cc;border:1px solid #cfbb8255;border-radius:6px;padding:10px 16px}.welcome-audio label{display:flex;align-items:center;gap:8px;color:#d1d8ee}

/* Closed translucent jade facets sit beneath the tile shell. */
body .board-surface .surface-panel{display:block;backface-visibility:visible;transform:translateZ(0);border:1px solid #b6f7d17a;background:radial-gradient(ellipse at 36% 27%,#d8ffe73b,transparent 58%),repeating-linear-gradient(127deg,transparent 0 38px,#c9ffdf15 39px,transparent 43px 87px),linear-gradient(145deg,#5bbc9670,#0d583f9c 48%,#78d3a477);box-shadow:inset 0 0 24px #b9ffdd38,inset 0 0 70px #01362955;pointer-events:none}.surface-panel:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse,#d7ffcfb0,#42e99855 36%,transparent 72%);opacity:var(--jade-glow,.08);pointer-events:none}#cavity-light i{background:radial-gradient(circle,#fff 0%,#f5ffe2 7%,#afffce 20%,#40eaa45c 38%,transparent 69%)}body:not(.solid-board) #cavity-light{transform:translateZ(-28px)}#cavity-light.core-nova i{animation:jade-core-burst 2.2s ease-out both}body.jade-nova .surface-panel:after{animation:jade-flare 2.2s ease-out both}@keyframes jade-core-burst{0%{scale:.3;opacity:.4}30%{scale:2.3;opacity:1}55%{scale:3.8;opacity:.9}100%{scale:5;opacity:0}}@keyframes jade-flare{0%{opacity:.1}30%,55%{opacity:1}100%{opacity:.08}}

.welcome-socials{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px}.welcome-socials a{color:#d8c897;font-size:14px;line-height:1.6;text-decoration:none;border-bottom:1px solid #d8c89744}.welcome-socials a:hover{color:#fff2c9;border-color:currentColor}.welcome-socials a:focus-visible{outline:2px solid #fff2c9;outline-offset:4px}#welcome{overflow-y:auto}.welcome-copy{margin-block:auto}@media(max-height:780px){.welcome-copy h1{font-size:clamp(60px,7vw,95px);margin:14px 0}.welcome-tagline{margin:16px 0 22px}.welcome-actions button{padding:13px 20px}.welcome-note{margin-top:16px}.welcome-audio{margin-top:16px}}
@media(min-width:701px) and (max-height:780px){#welcome{padding-block:24px;box-sizing:border-box}.welcome-crest{font-size:24px}.welcome-copy h1{font-size:76px;margin:10px 0}.welcome-tagline{margin:12px 0 16px}.welcome-actions{gap:8px}.welcome-actions button{min-height:0;padding:11px 20px}.welcome-audio{margin-top:12px}.welcome-note{margin:12px 0}.welcome-socials{margin-top:10px}}

.welcome-socials{gap:8px}.welcome-socials a{display:grid;place-items:center;width:40px;height:40px;border:1px solid #d8c89744;border-radius:50%;background:#111a2a88;transition:background .2s,transform .2s}.welcome-socials a:hover{background:#d8c89722;transform:translateY(-2px)}.welcome-socials img{display:block;filter:invert(87%) sepia(22%) saturate(515%) hue-rotate(2deg) brightness(93%)}

/* Keep wheel, touch and keyboard scrolling available without visible rails. */
*,*::before,*::after{scrollbar-width:none!important}*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.welcome-copy .welcome-socials{margin:12px 0 24px}.welcome-copy h1{margin-top:0}
@media(max-width:700px){.welcome-copy .eyebrow{display:block;margin:0 0 8px}.welcome-copy .welcome-socials{margin:8px 0 18px;gap:6px}.welcome-socials a{width:36px;height:36px}}
@media(max-height:780px){.welcome-copy .welcome-socials{margin:10px 0 18px}}
/* Portable layouts and GPU budgets. */
#mobile-menu{display:none}.mobile-render header,.mobile-render dialog,.mobile-render #lobby,.mobile-render #appearance-dock,.mobile-render .bottom-hud{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.mobile-render .tile .top{box-shadow:none}.mobile-render #world{transition:none}.mobile-render #viewport.dragging .tile{transition:none}.app-hidden *, .app-hidden *::before,.app-hidden *::after{animation-play-state:paused!important}
.mobile-render body:before{background-image:url('mobile-assets/skybox.webp')}
.mobile-render body[data-background="solar-forge"]:before{background-image:url('mobile-assets/solar-forge.webp')}.mobile-render body[data-background="frozen-cosmos"]:before{background-image:url('mobile-assets/frozen-cosmos.webp')}.mobile-render body[data-background="rose-nebula"]:before{background-image:url('mobile-assets/rose-nebula.webp')}.mobile-render body[data-background="event-horizon"]:before{background-image:url('mobile-assets/event-horizon.webp')}
.mobile-render body[data-theme="solar-forge"] .back-pattern{background-image:url('https://geekthegreybeard.github.io/jade-cube-play/tile-faces-open/material-solar-forge-small.webp')}.mobile-render body[data-theme="frozen-cosmos"] .back-pattern{background-image:url('https://geekthegreybeard.github.io/jade-cube-play/tile-faces-open/material-frozen-cosmos-small.webp')}.mobile-render body[data-theme="rose-nebula"] .back-pattern{background-image:url('https://geekthegreybeard.github.io/jade-cube-play/tile-faces-open/material-rose-nebula-small.webp')}.mobile-render body[data-theme="event-horizon"] .back-pattern{background-image:url('https://geekthegreybeard.github.io/jade-cube-play/tile-faces-open/material-event-horizon-small.webp')}
@media(max-width:1024px),(pointer:coarse){
 body,body.in-lobby{height:100dvh;min-height:0;overflow:hidden}header,body.in-lobby header{position:fixed;inset:0 0 auto 0;z-index:25;display:flex;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:#080d20d9;transform:none;height:auto;min-height:56px}header .brand{font-size:14px}header .brandmark{font-size:22px;padding:3px 9px}header .brand small{display:none}#mobile-menu{display:block;min-height:44px;padding:8px 14px;background:#17223c;border:1px solid #a6a3d655;border-radius:10px;color:#edf0ff}header nav,body.in-lobby header nav{display:none;position:absolute;top:100%;left:12px;right:12px;max-width:none;max-height:72dvh;overflow:auto;padding:12px;border-radius:12px;background:#101a30;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body.mobile-menu-open header nav{display:grid}header nav button,header nav #help{width:auto;min-height:44px;margin:0;font-size:14px}body.quiet-hud header{opacity:1;pointer-events:auto}
 .titlebar{top:calc(72px + env(safe-area-inset-top));left:12px;right:12px}.titlebar h1{font-size:18px}.hud{top:calc(126px + env(safe-area-inset-top));left:12px;gap:18px}.hud strong{font-size:17px}.title-actions button{min-height:44px}.bottom-hud{bottom:calc(14px + env(safe-area-inset-bottom));max-width:calc(100vw - 16px);padding:5px;gap:4px;background:#0c1429ed}.bottom-hud button{min-width:40px;min-height:44px;padding:8px}.bottom-hud .divider,.bottom-hud kbd,#rotate-left,#rotate-right{display:none}.bottom-hud .camera{gap:3px}.bottom-hud .tools{gap:3px}.bottom-hud .tools span{display:none}.footline{bottom:calc(72px + env(safe-area-inset-bottom));font-size:11px;padding:0 12px}.camera-help{display:none}#viewport,body.in-lobby #viewport{position:fixed;left:0;top:160px;width:100%;height:calc(100dvh - 250px);min-height:0}.scene{top:50%}
 #lobby{position:fixed;top:auto;bottom:calc(10px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;margin:0;max-height:56dvh;padding:18px;overflow:auto;background:#111b30ed;z-index:16}body.in-lobby #viewport,body.in-lobby:has(#appearance-dock[hidden]) #viewport{left:0;top:60px;width:100%;height:36dvh}#appearance-dock{position:fixed;top:calc(68px + env(safe-area-inset-top));bottom:calc(12px + env(safe-area-inset-bottom));left:12px;right:12px;width:auto;margin:0;max-height:none;overflow:auto;z-index:24;background:#111b30f2}dialog,body.mp-staging #online-dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 40px);overflow:auto;border-radius:16px;padding:18px}input,select,textarea{font-size:16px!important}#hand{overflow-x:auto;max-width:100%;justify-content:flex-start}.mini-tile{flex-shrink:0}
 body.welcome-open #viewport{top:0;left:0;width:100%;height:100dvh}body.welcome-open .scene{left:72%;top:18%;scale:.55}#welcome{padding:24px 7vw;box-sizing:border-box}.welcome-copy{width:min(430px,100%)}.welcome-copy .welcome-socials{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:100%;max-width:340px}.welcome-socials a{width:100%;min-width:0;height:40px;padding:0}.welcome-socials img{width:20px;height:20px}.welcome-copy h1{font-size:clamp(56px,10vh,86px)}.welcome-copy .eyebrow{display:block;letter-spacing:1px}.welcome-copy .welcome-crest{display:none}.welcome-copy .welcome-tagline{margin:14px 0 20px;font-size:17px}.welcome-copy .welcome-actions button{padding:12px 18px;min-height:48px;font-size:17px}.welcome-copy .welcome-audio{margin-top:16px}.welcome-copy .welcome-note{margin-top:14px}
}
@media(max-width:600px){#welcome{align-items:flex-end}.welcome-copy{margin:0}.welcome-copy h1{font-size:58px}.welcome-copy .welcome-socials{margin:8px 0 16px}}
@media(max-width:1024px) and (max-height:550px){#welcome{align-items:center;padding:12px 6vw}.welcome-copy{width:48%;margin:0}.welcome-copy h1{font-size:42px;margin-bottom:6px}.welcome-copy h1 br{display:none}.welcome-copy .welcome-tagline,.welcome-copy .welcome-note{display:none}.welcome-copy .welcome-socials{margin:6px 0 10px}.welcome-copy .welcome-actions{gap:5px}.welcome-copy .welcome-actions button{min-height:40px;padding:7px 12px}.welcome-copy .welcome-audio{margin-top:8px}body.welcome-open .scene{left:76%;top:50%;scale:.75}.titlebar{top:68px}.hud{top:115px}.bottom-hud{left:auto;right:10px;transform:none}.footline{display:none}#viewport{top:65px;height:calc(100dvh - 125px)}#lobby{left:10px;right:auto;width:48%;max-height:calc(100dvh - 84px)}body.in-lobby #viewport,body.in-lobby:has(#appearance-dock[hidden]) #viewport{left:50%;width:50%;top:64px;height:calc(100dvh - 75px)}}

/* A single white-hot bloom radiates from the jade cavity, then settles before results. */
#cavity-light.core-nova i{background:radial-gradient(circle,#fff 0 16%,#ffffde 24%,#b3ffd6 36%,#62efad88 52%,transparent 72%);filter:drop-shadow(0 0 35px #dffff2) brightness(1.8);animation:jade-core-burst 2.2s ease-out both}body.jade-nova .surface-panel{box-shadow:inset 0 0 90px #e7fff3,0 0 65px #aeffd8a0}#return-game{width:100%;margin:10px 0}#same-game{flex:none}.victory-stats .check{font-size:14px;margin:16px 0}
nav #hide-hud{order:999}
body[data-theme="astral-ink"]{--tile:#fff5dd;--tile-edge:#bba268;--back:#242b45}
body[data-theme="prismatic-obsidian"]{--tile:#151628;--tile-edge:#a6b4ce;--back:#101322}
body[data-theme="lunar-porcelain"]{--tile:#f3f7fa;--tile-edge:#9eacc7;--back:#19305c}
body[data-theme="imperial-jade"]{--tile:#e4f0d7;--tile-edge:#bca15c;--back:#193e36}
body[data-theme="prismatic-obsidian"] .tile .top:has(.collection-art){background:#151628}
body[data-theme="lunar-porcelain"] .tile .top:has(.collection-art){background:#f3f7fa}
body[data-theme="imperial-jade"] .tile .top:has(.collection-art){background:#e4f0d7}

#leaderboard-dialog{width:min(600px,94vw);max-height:90dvh;overflow:auto;scrollbar-width:none}#leaderboard-dialog::-webkit-scrollbar{display:none}#leaderboard-dialog select{width:100%;margin:8px 0;padding:8px;background:#11182b;color:#eee}#leaderboard-results table{width:100%;font-size:14px;text-align:left}#leaderboard-results td,#leaderboard-results th{padding:5px 8px}.leaderboard-name{display:flex;gap:12px}.leaderboard-name label{flex:1;min-width:0}.leaderboard-name input{width:100%;box-sizing:border-box;padding:8px;background:#11182b;color:#fff;border:1px solid #ffffff40}#leaderboard-submit p{font-size:12px}#leaderboard-dialog .rule-note{font-size:11px}