/* The play hub is one open composition, not a stack of cards. */
body.studio-shell:has(.calm-hub){background:#101418}
body.studio-shell:has(.calm-hub)>header{border-bottom-color:transparent;background:transparent}
body.studio-shell:has(.calm-hub) #main{max-width:1160px;padding-top:9px;padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))}
.calm-hub{--hub-ivory:#f2ede4;--hub-copper:#d7ab88;--hub-muted:#a6acaf;width:100%;margin:0 auto;color:var(--hub-ivory)}
.hub-mode-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:60px;border-bottom:1px solid #ffffff12}
.hub-caption,.hub-edition{flex:1;font-size:8px;font-weight:500;letter-spacing:2px;color:#8a9196}
.hub-edition{text-align:right;letter-spacing:1.6px}
.hub-mode-switch{display:flex;align-self:stretch;align-items:stretch;gap:32px}
.studio-shell .hub-mode-switch button{position:relative;min-height:52px;padding:0 4px;background:transparent;border:0;border-radius:0;color:#929b9f;font-size:12px;font-weight:500;letter-spacing:.1px;transition:color 140ms ease}
.studio-shell .hub-mode-switch button::after{content:'';position:absolute;bottom:-1px;left:4px;right:4px;height:2px;background:transparent;transition:background-color 140ms ease}
.studio-shell .hub-mode-switch button[aria-selected=true]{color:var(--hub-ivory)}
.studio-shell .hub-mode-switch button[aria-selected=true]::after{background:var(--hub-copper)}
.studio-shell .hub-mode-switch button:hover{color:#e9c4a5;background:transparent}
#hub-play-panel{outline-offset:8px}
#hub-play-panel:focus:not(:focus-visible){outline:none}
.hub-scene{position:relative;isolation:isolate;min-height:440px;display:flex;flex-direction:column;justify-content:space-between}
.hub-scene-art{position:absolute;z-index:-2;inset:0 -48px -20px;pointer-events:none;background-image:linear-gradient(0deg,#101418 0%,#10141810 62%,#10141840 100%),linear-gradient(90deg,#101418e8 0%,#1014186b 42%,#10141808 78%),var(--hub-scene);background-position:center,center,center 47%;background-size:cover;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);opacity:.86}
.hub-scene::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#101418 0%,#10141800 15%,#10141800 70%,#101418 100%);pointer-events:none}
.hub-scene-top{display:flex;align-items:center;gap:13px;padding:27px 2px 0;font-size:8px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:#aeb4b5}
.hub-scene-rule{width:28px;height:1px;background:#c5a68c66}
.hub-scene-top>span:last-child{color:#c1a790;font-size:8px}
.hub-scene-copy{position:relative;padding:82px 0 40px;max-width:65%}
.calm-hub .hub-overline{display:block;margin:0 0 14px;font-size:9px;line-height:1.5;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--hub-copper)}
.hub-scene-copy h1{font:500 clamp(50px,6.1vw,78px)/1.08 Inter,Arial,sans-serif;letter-spacing:-3.5px;margin:0 0 15px;color:var(--hub-ivory);text-wrap:balance}
.hub-scene-description{font-size:13px;line-height:1.7;color:#b5b9b8;max-width:320px}
.hub-play-row{display:flex;align-items:center;gap:26px;margin-top:25px}
.studio-shell .hub-play{min-height:48px;min-width:0;padding:0 0 0 1px;gap:23px;border:0;border-radius:0;background:none;color:var(--hub-ivory);font-size:13px;font-weight:500;letter-spacing:0;box-shadow:none;text-align:left}
.studio-shell .hub-play .hub-play-arrow{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;background:#cda47e;border:1px solid #e2bd97;color:#202326;border-radius:50%;box-shadow:inset 0 1px #fff2;transition:background-color 140ms ease,transform 140ms ease}
.studio-shell .hub-play:hover,.studio-shell .hub-play:not(:disabled):hover{background:none;border-color:transparent;color:#edcfb2;transform:none}
.studio-shell .hub-play:hover .hub-play-arrow{background:#ebc6a3;transform:translateX(3px)}
.studio-shell .hub-play:active{background:none;color:#d7ab88}
.hub-play svg,.hub-mode-foot>a svg,.hub-learn svg,.hub-deck-edit svg{width:19px;height:19px;flex-shrink:0}
.hub-play-note{padding-left:25px;border-left:1px solid #ffffff1f;font-size:10px;line-height:1.7;color:#8e979b}
.hub-training-footer{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;padding:12px 0 0;border-top:1px solid #ffffff12}
.hub-deck{display:flex;align-items:center;gap:25px;min-height:136px;max-width:100%;border-radius:6px}
.hub-deck-art{position:relative;display:block;flex:0 0 88px;width:88px;height:108px;margin:4px 0 4px 9px}
.hub-deck-art img{position:absolute;top:7px;left:10px;width:62px;height:91px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 6px #0007);transition:transform 180ms ease;transform-origin:50% 90%}
.hub-deck-art img:nth-child(1){transform:translate(-13px,3px) rotate(-13deg);opacity:.72}
.hub-deck-art img:nth-child(2){transform:translate(13px,0) rotate(10deg);opacity:.84}
.hub-deck-art img:nth-child(3){transform:translate(0,-2px) rotate(-2deg)}
.hub-deck:hover .hub-deck-art img:nth-child(1){transform:translate(-17px,3px) rotate(-17deg)}
.hub-deck:hover .hub-deck-art img:nth-child(2){transform:translate(17px,0) rotate(14deg)}
.hub-deck-copy{display:block;flex:1;min-width:0}
.calm-hub .hub-deck-copy .hub-overline{font-size:8px;letter-spacing:1.6px;color:#90999d;margin-bottom:8px}
.hub-deck-name{display:block;font-size:17px;font-weight:500;letter-spacing:-.3px;line-height:1.4;overflow-wrap:anywhere;color:#e7e5de}
.hub-deck-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:11px;line-height:1.4}
.hub-deck-count{font-size:11px;font-weight:500;color:#cbc3b6;font-variant-numeric:tabular-nums}
.hub-deck-count>span{color:#91999d;font-weight:400;margin-left:3px}
.hub-deck-edit{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:#d2b398}
.hub-deck-edit svg{width:15px;height:15px}
.hub-deck:hover .hub-deck-name{color:#f2d8bd}
.hub-setup{align-self:start;min-width:0;margin-top:25px;color:#c0c6c8;font-size:12px}
.hub-setup summary{list-style:none;display:flex;align-items:center;gap:15px;min-height:72px;padding:10px 0;cursor:pointer;border-radius:5px}
.hub-setup summary::-webkit-details-marker{display:none}
.hub-setting-icon,.hub-foot-symbol{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid #ffffff18;border-radius:50%;color:#bda78f}
.hub-setting-icon svg,.hub-foot-symbol svg{width:21px;height:21px}
.hub-setup-copy{display:block;flex:1;min-width:0}
.hub-setup-copy strong{display:block;font-size:12px;font-weight:500;line-height:1.5;color:#dddcd6}
.hub-setup-meta{display:block;margin-top:5px;font-size:10px;line-height:1.6;color:#8f9a9f}
.hub-disclosure-mark{width:18px;height:18px;flex-shrink:0;margin-right:2px;color:#b9a48f}
.hub-disclosure-stem{transition:opacity 120ms ease}
.hub-setup[open] .hub-disclosure-stem{opacity:0}
.hub-setup summary:hover .hub-setup-copy strong{color:#f2d8bd}
.hub-setup-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:17px;padding:18px 0 5px 55px}
.hub-setup-fields label{font-size:10px;line-height:1.5;color:#aeb6b9;min-width:0}
body.studio-shell .hub-setup-fields select{display:block;width:100%;margin-top:7px;font-size:13px;min-height:46px;border-color:#ffffff25;background-color:#191f24;border-radius:6px}
.studio-shell .hub-learn{justify-self:start;background:none;border:0;display:flex;align-items:center;gap:12px;color:#d2b390;padding:0;min-height:44px;font-size:11px}
.hub-world-art{position:absolute;z-index:-1;right:3%;top:0;width:min(480px,52%);opacity:.7;pointer-events:none;transform:rotate(-12deg)}
.hub-world-art>svg{display:block;width:100%;height:auto;stroke:#b5a18555;stroke-width:1}
.hub-world-art .hub-orbit{stroke-dasharray:1 11;stroke:#cab29266}
.hub-world-art .hub-world-land{fill:#af9b7519;stroke:#b8a68b77;stroke-width:1.2}
.hub-world-art .hub-world-point{fill:#e6bd8b;stroke:none}
.hub-world-art .hub-world-route{stroke:#d9b68d99;stroke-dasharray:3 5}
.calm-hub[data-mode=world] .hub-scene-art{opacity:.17;background-position:center,center,65% 55%}
.calm-hub[data-mode=world] .hub-scene-copy{max-width:65%}
.calm-hub[data-mode=online] .hub-scene-art{opacity:.3}
.hub-online-art{position:absolute;z-index:-1;right:8%;top:40px;width:260px;height:350px;pointer-events:none;opacity:.83}
.hub-online-art img{position:absolute;width:184px;height:270px;object-fit:contain;filter:drop-shadow(0 15px 15px #0007)}
.hub-online-art img:first-child{left:0;top:15px;transform:rotate(-13deg);opacity:.7}
.hub-online-art img:last-child{right:0;top:37px;transform:rotate(9deg)}
.hub-mode-foot{display:flex;align-items:center;gap:19px;min-height:124px;padding:20px 4px;border-top:1px solid #ffffff12}
.hub-mode-foot>div{flex:1;min-width:0}
.hub-mode-foot strong{font-size:12px;line-height:1.6;font-weight:500;color:#d9d9d2}
.hub-scope{display:block;font-size:10px;line-height:1.7;color:#8f9a9f;margin-top:5px}
.hub-mode-foot>a{display:inline-flex;align-items:center;gap:17px;min-height:44px;padding-left:20px;color:#d5b99c;font-size:11px;white-space:nowrap}
/* Preserve six equal columns and the original More trigger in the centered dock. */
body.studio-shell:not(.in-battle):not(.in-online)>nav{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));left:50%!important;right:auto!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;width:min(660px,calc(100% - 32px));height:68px;transform:translateX(-50%)!important;gap:0!important;padding:0!important;box-sizing:border-box;border:1px solid #ffffff23;border-radius:12px;background:#171d22f5;box-shadow:0 10px 36px #0008;overflow:visible}
body.studio-shell>nav button{width:100%;min-width:0!important;min-height:64px;padding:9px 2px;font-size:10px;gap:5px;border-radius:10px;color:#9ba7af;box-sizing:border-box}
body.studio-shell>nav button.active{color:#e6c6a1;background:#d7a27d0a}
body.studio-shell>nav button.active:before{inset:0 35% auto;height:2px;background:#d7b18b;border-radius:0 0 2px 2px}
body.studio-shell>nav button svg{width:21px;height:21px}
body.studio-shell>nav button:focus-visible{outline-offset:-4px}
@media(min-width:1450px){.hub-scene{min-height:490px}.hub-scene-copy{padding-top:100px}.hub-training-footer{gap:130px}.hub-world-art{width:500px}}
@media(max-width:800px){.hub-caption,.hub-edition{font-size:7px;letter-spacing:1.2px}.hub-mode-switch{gap:24px}.hub-scene-copy{max-width:75%}.hub-training-footer{gap:32px}.hub-deck{gap:16px}.hub-deck-name{font-size:16px}.hub-online-art{right:3%;opacity:.65}.hub-setup-fields{padding-left:0}}
@media(max-width:600px){
 body.studio-shell:has(.calm-hub)>header{height:68px;padding:0 22px}
 body.studio-shell:has(.calm-hub) #main{padding:0 22px calc(108px + env(safe-area-inset-bottom,0px))}
 .hub-mode-bar{justify-content:center;min-height:50px;gap:0}
 .hub-caption,.hub-edition{display:none}
 .hub-mode-switch{width:100%;justify-content:space-between;gap:0}
 .studio-shell .hub-mode-switch button{min-height:50px;padding:0 14px;font-size:12px}
 .studio-shell .hub-mode-switch button::after{left:14px;right:14px}
 .hub-scene{min-height:354px}
 .hub-scene-art{inset:0 -22px -12px;background-image:linear-gradient(0deg,#101418 0%,#101418eb 12%,#10141855 54%,#10141820 100%),linear-gradient(90deg,#10141855,#10141800 75%),var(--hub-scene);background-position:center,center,67% 46%;mask-image:none;opacity:.95}
 .hub-scene::after{background:linear-gradient(180deg,#101418 0%,#10141800 20%,#10141800 80%,#101418 100%)}
 .hub-scene-top{padding:20px 0 0;gap:10px;font-size:7px;letter-spacing:1.5px}
 .hub-scene-top>span:last-child{font-size:7px}
 .hub-scene-rule{width:20px}
 .hub-scene-copy{max-width:100%;padding:119px 0 26px}
 .calm-hub .hub-overline{font-size:8px;letter-spacing:1.6px;margin-bottom:10px}
 .hub-scene-copy h1{font-size:45px;letter-spacing:-2px;line-height:1.08;margin-bottom:11px}
 .hub-scene-description{font-size:12px;line-height:1.6;max-width:285px;color:#b7bab8}
 .hub-play-row{margin-top:20px;gap:20px}
 .studio-shell .hub-play{gap:20px;font-size:13px;min-height:45px}
 .studio-shell .hub-play .hub-play-arrow{width:44px;height:44px}
 .hub-play-note{font-size:9px;padding-left:18px}
 .hub-training-footer{display:block;padding:10px 0 0}
 .hub-deck{gap:18px;min-height:124px}
 .hub-deck-art{flex-basis:80px;width:80px;height:100px;margin-left:3px}
 .hub-deck-art img{width:57px;height:84px;left:10px;top:6px}
 .calm-hub .hub-deck-copy .hub-overline{font-size:8px;margin-bottom:7px}
 .hub-deck-name{font-size:16px;line-height:1.4;letter-spacing:-.3px}
 .hub-deck-meta{margin-top:9px;gap:10px 16px}
 .hub-deck-count{font-size:10px}
 .hub-deck-edit{font-size:10px}
 .hub-setup{margin-top:3px}
 .hub-setup summary{min-height:68px;gap:13px;padding:10px 2px}
 .hub-setting-icon{flex-basis:36px;width:36px;height:36px}
 .hub-setting-icon svg{width:20px;height:20px}
 .hub-setup-copy strong{font-size:12px}
 .hub-setup-meta{font-size:10px;margin-top:3px}
 .hub-setup-fields{gap:16px;padding:14px 2px 0}
 .hub-setup-fields label{font-size:11px}
 body.studio-shell .hub-setup-fields select{font-size:16px;min-height:48px}
 .studio-shell .hub-learn{font-size:12px}
 .hub-world-art{width:280px;max-width:90%;right:-21px;top:22px;opacity:.62}
 .calm-hub[data-mode=world] .hub-scene-copy{max-width:100%;padding-top:132px}
 .calm-hub[data-mode=online] .hub-scene-copy{padding-top:139px}
 .hub-online-art{width:180px;height:225px;right:4px;top:20px;opacity:.68}
 .hub-online-art img{width:119px;height:174px}
 .hub-online-art img:first-child{top:5px}
 .hub-online-art img:last-child{top:23px}
 .hub-mode-foot{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;min-height:0;padding:24px 0 8px}
 .hub-foot-symbol{width:36px;height:36px}
 .hub-mode-foot strong{font-size:11px}
 .hub-scope{font-size:10px;margin-top:4px}
 .hub-mode-foot>a{grid-column:2;justify-self:start;font-size:11px;gap:18px;padding:0;margin-top:0}
 body.studio-shell:not(.in-battle):not(.in-online)>nav{width:calc(100% - 24px);max-width:430px;height:66px;border-radius:11px;bottom:calc(8px + env(safe-area-inset-bottom,0px))!important}
 body.studio-shell>nav button{font-size:9px;min-height:64px;padding:9px 0;letter-spacing:0}
}
@media(max-width:350px){
 body.studio-shell:has(.calm-hub)>header{padding:0 18px}
 body.studio-shell:has(.calm-hub) #main{padding-left:18px;padding-right:18px}
 .hub-scene{min-height:306px}
 .hub-scene-art{left:-18px;right:-18px}
 .hub-scene-copy{padding-top:76px}
 .hub-scene-copy h1{font-size:39px;letter-spacing:-1.8px}
 .hub-deck{gap:13px;min-height:112px}
 .hub-deck-art{flex-basis:72px;width:72px;height:86px;margin-left:0}
 .hub-deck-art img{width:46px;height:67px;left:12px;top:10px}
 .hub-deck-art img:nth-child(1),.hub-deck:hover .hub-deck-art img:nth-child(1){transform:translate(-3px,3px) rotate(-8deg)}
 .hub-deck-art img:nth-child(2),.hub-deck:hover .hub-deck-art img:nth-child(2){transform:translate(6px,0) rotate(7deg)}
 .hub-deck-name{font-size:15px}
 .hub-deck-meta{gap:8px 13px}
 .hub-play-row{gap:15px}
 .hub-play-note{padding-left:14px}
 .studio-shell .hub-play{gap:16px}
 .hub-scene-top{font-size:6.5px;letter-spacing:1.2px}
}
@media(prefers-reduced-motion:reduce){.calm-hub *{transition:none!important}.studio-shell .hub-play:hover .hub-play-arrow{transform:none}}
@media(forced-colors:active){
 .hub-scene-art,.hub-world-art,.hub-online-art{display:none}
 .studio-shell .hub-mode-switch button[aria-selected=true]::after{background:Highlight}
 .studio-shell .hub-play .hub-play-arrow{border-color:ButtonText}
 .hub-mode-bar,.hub-training-footer,.hub-mode-foot,.hub-setting-icon,.hub-foot-symbol{border-color:GrayText}
}