/* Game hub: native scrolling and fixed actions inside the portrait game frame. */
.hub-overlay { position:fixed; inset:0; z-index:2000; display:flex; align-items:flex-end; justify-content:center; background:#01111ce0; font-family:Manrope,sans-serif; color:var(--game-ink,#edf5e9); }
.hub-overlay *, .hub-overlay *::before, .hub-overlay *::after { box-sizing:border-box; }
.hub-sheet { width:100%; max-width:540px; height:min(94dvh,900px); display:flex; flex-direction:column; overflow:hidden; background:var(--game-panel,#082733); border:1px solid var(--game-line,#54706b); border-bottom:0; border-radius:26px 26px 0 0; box-shadow:0 -14px 80px #0008; animation:hub-enter .22s ease-out; }
.hub-sheet[data-screen=settings],.hub-sheet[data-screen=modes] { height:auto; max-height:94dvh; }
.hub-head { flex:none; display:flex; align-items:center; gap:12px; padding:19px 18px 14px; }
.hub-head .hub-art { width:42px; height:44px; }
.hub-head h2 { margin:0; font-size:23px; line-height:1.15; color:var(--game-gold,#ffe1a0); letter-spacing:-.6px; }
.hub-head p { margin:4px 0 0; font-size:11px; color:var(--game-muted,#97b5b6); }
.hub-close { margin-left:auto; width:44px; height:44px; flex:none; border:1px solid var(--game-line,#496774); border-radius:15px; background:var(--game-raised,#133b48); color:var(--game-gold,#ffdf9e); font-size:28px; line-height:1; }
.hub-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:4px 18px 22px; scrollbar-width:thin; scrollbar-color:#386270 transparent; }
.hub-overlay button { font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.hub-overlay button:disabled { cursor:default; opacity:.55; }
.hub-overlay button:active:not(:disabled) { transform:translateY(2px); }
.hub-overlay button:focus-visible,.hub-overlay select:focus-visible { outline:3px solid #7fe0c9; outline-offset:3px; }
.hub-foot { flex:none; padding:13px 18px max(16px,env(safe-area-inset-bottom)); background:var(--game-deep,#051e29); border-top:1px solid var(--game-line,#31515a); }
.hub-foot p { margin:0 0 10px; color:var(--game-muted,#a2bec0); font-size:12px; text-align:center; line-height:1.5; }
.hub-primary { width:100%; min-height:51px; border:1px solid #d99a37; border-radius:14px; box-shadow:0 4px 0 #805122; background:#ffcc59; color:#553710; font-size:16px; font-weight:800; padding:12px 15px; }
.hub-overlay .hub-primary:disabled { opacity:1; box-shadow:none; background:var(--game-raised,#21424a); border-color:var(--game-line,#436069); color:var(--game-muted,#a9c2c2); }
.hub-secondary { width:100%; min-height:46px; border:1px solid var(--game-line,#3f6971); border-radius:13px; background:var(--game-raised,#143e4b); color:var(--game-ink,#dcece1); font-size:14px; font-weight:700; padding:10px; }
.hub-art { display:block; flex:none; overflow:hidden; filter:drop-shadow(0 4px 3px #0003); }
.hub-tabs { display:flex; gap:4px; padding:4px; background:var(--game-deep,#031b26); border-radius:14px; margin:0 0 18px; }
.hub-tabs button { flex:1; min-height:40px; border:0; border-radius:10px; background:transparent; color:var(--game-muted,#9fbdc0); font-size:12px; font-weight:700; padding:8px 5px; }
.hub-tabs button[aria-pressed=true] { background:var(--game-accent,#286770); color:var(--game-ink,#f6efce); }
.hub-section-title { display:flex; justify-content:space-between; align-items:center; margin:22px 0 12px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--game-muted,#b6d1cd); }
.hub-section-title small { text-transform:none; letter-spacing:0; font-weight:400; color:var(--game-muted,#94b2b7); }
.hub-hero { position:relative; margin:4px 0 20px; padding:19px; border:1px solid #637c67; border-radius:20px; background:radial-gradient(ellipse at 80% 0,#286b61,transparent 75%),var(--game-panel,#103a43); }
.hub-hero h3 { margin:0 0 6px; color:var(--game-gold,#ffe4a5); font-size:21px; line-height:1.2; }
.hub-hero p { margin:0; max-width:210px; font-size:12px; line-height:1.6; color:var(--game-muted,#afcdca); }
.hub-rewards { display:grid; grid-template-columns:1fr 80px; align-items:center; gap:14px; }
.hub-rewards .hub-art { width:80px; height:83px; }
.hub-rewards button { grid-column:1/-1; }
.hub-counter { color:var(--game-gold,#ffde8b); font-weight:800; font-size:34px; line-height:1.1; margin-bottom:5px; }
.hub-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hub-mode { position:relative; min-height:190px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:17px 13px; border:1px solid var(--game-line,#355c65); border-radius:18px; background:var(--game-panel,#103844); color:var(--game-ink,#eff1de); }
.hub-mode[aria-pressed=true] { border:2px solid #f0c66c; padding:16px 12px; background:radial-gradient(ellipse at 80% 0,#335e58,transparent),var(--game-raised,#17464d); }
.hub-mode-mark { font-size:31px; line-height:1; color:#76ddc7; margin-bottom:16px; width:45px; height:42px; display:grid; place-items:center; }
.hub-mode strong { font-size:17px; margin-bottom:7px; }
.hub-mode p { margin:0 0 15px; font-size:12px; line-height:1.5; color:#a8c8c7; }
.hub-mode small { font-size:10px; color:#eacb89; margin-top:auto; }
.hub-tick { position:absolute; right:12px; top:13px; color:#ffd36c; font-size:16px; }
.hub-goal { display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:11px; padding:17px 0; border-bottom:1px solid #284b57; }
.hub-goal .hub-art { width:41px; height:47px; }
.hub-goal h3 { margin:0 0 6px; font-size:14px; line-height:1.4; color:#f4eecf; }
.hub-goal p { margin:0 0 10px; font-size:12px; line-height:1.5; color:#9ebdc0; }
.hub-goal-main { min-width:0; }
.hub-goal-progress { display:flex; justify-content:space-between; gap:6px; margin:9px 0 6px; font-size:11px; color:#a9c6c7; }
.hub-progress { height:7px; background:#011924; border-radius:10px; overflow:hidden; }
.hub-progress i { display:block; height:100%; min-width:0; background:#69cdb6; border-radius:10px; }
.hub-reward { color:#efce81; font-weight:700; white-space:nowrap; }
.hub-claim { min-height:42px; padding:8px 15px; background:#ffcf66; color:#5e411c; border:0; border-radius:11px; font-weight:800; font-size:12px; }
.hub-row-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:12px; }
.hub-toggle { min-height:44px; display:flex; align-items:center; gap:10px; font-size:12px; color:#acc7c8; margin-top:15px; }
.hub-toggle input { width:19px; height:19px; accent-color:#6dd5bf; }
.hub-empty { text-align:center; padding:40px 8px; }
.hub-empty .hub-art { width:110px; height:110px; margin:0 auto 25px; }
.hub-empty h3 { font-size:21px; color:var(--game-gold,#ffe1a0); margin:0 0 10px; }
.hub-empty p { font-size:13px; line-height:1.6; color:#a1bfc1; margin:0 0 24px; }
.hub-podium { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin:22px 0; }
.hub-podium-place { flex:1; min-width:0; text-align:center; }
.hub-podium-place .hub-art { width:58px; height:62px; margin:0 auto 9px; }
.hub-podium-place:nth-child(2) .hub-art { width:82px; height:88px; }
.hub-podium-place strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; color:#d3e0d8; }
.hub-podium-place b { display:block; font-size:17px; margin:6px 0 11px; color:#ffda88; }
.hub-podium-step { padding:12px 0; border-radius:12px 12px 0 0; background:#1b4854; color:#a8d0cc; font-size:22px; font-weight:800; }
.hub-podium-place:nth-child(2) .hub-podium-step { padding-top:23px; background:#4a593f; color:#ffd77c; }
.hub-rank { display:grid; grid-template-columns:27px 1fr auto; align-items:center; gap:10px; min-height:56px; border-bottom:1px solid #24444f; font-size:13px; }
.hub-rank > span { color:#8aadb3; }
.hub-rank b { color:#f2e6bf; font-size:14px; }
.hub-rank small { display:block; font-size:10px; color:#80a6ae; margin-top:3px; }
.hub-my-rank { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px; color:#b4ccca; }
.hub-my-rank b { color:#ffdb89; font-size:17px; }
.hub-best { text-align:center; padding:21px 15px; }
.hub-best small { color:#a5c5c3; font-size:11px; text-transform:uppercase; letter-spacing:1.5px; }
.hub-best strong { display:block; margin:8px 0; font-size:46px; color:#ffda88; }
.hub-skin-stage { text-align:center; position:relative; border-radius:22px; padding:20px 10px 16px; background:radial-gradient(ellipse at 50% 40%,var(--skin-glow,#286763),transparent 72%),var(--game-deep,#031c27); margin-bottom:17px; }
.hub-tiles { position:relative; width:170px; height:148px; margin:0 auto 12px; }
.hub-tile { position:absolute; display:grid; place-items:center; width:60px; height:69px; clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%); font-size:21px; font-weight:800; background:var(--tile); color:var(--number); box-shadow:inset 0 -7px #0003; }
.hub-tile:nth-child(1){left:29px;top:0}.hub-tile:nth-child(2){left:86px;top:0}.hub-tile:nth-child(3){left:0;top:51px}.hub-tile:nth-child(4){left:57px;top:51px}.hub-tile:nth-child(5){left:114px;top:51px}.hub-tile:nth-child(6){left:29px;top:102px}.hub-tile:nth-child(7){left:86px;top:102px}
.hub-skin-stage h3 { margin:27px 0 5px; font-size:23px; color:var(--game-ink,#fff0cc); }
.hub-skin-stage p { margin:0; font-size:12px; color:#abc7c4; }
.hub-skin-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.hub-skin-card { position:relative; border:1px solid var(--game-line,#30535f); border-radius:15px; background:var(--game-panel,var(--game-raised,#103641)); padding:13px 10px; color:var(--game-ink,#d8e8df); text-align:left; min-height:120px; }
.hub-skin-card[aria-pressed=true] { border-color:#efc15f; background:var(--game-raised,#214b4b); }
.hub-swatches { display:flex; justify-content:center; gap:0; margin:3px 0 14px; }
.hub-swatches i { display:block; width:32px; height:37px; margin:0 -1px; clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%); box-shadow:inset 0 -4px #0003; }
.hub-skin-card strong { display:block; font-size:13px; margin-bottom:5px; }
.hub-skin-card small { display:block; color:var(--game-muted,#97bab9); font-size:10px; }
.hub-setting { padding:18px 0; border-bottom:1px solid #2a4b55; }
.hub-setting h3 { margin:0 0 5px; font-size:16px; color:var(--game-ink,#f7eac9); }
.hub-setting p { margin:0; font-size:12px; line-height:1.5; color:var(--game-muted,#9bbcbf); }
.hub-setting-sound { display:flex; align-items:center; gap:20px; }
.hub-switch { width:54px; height:32px; flex:none; margin-left:auto; padding:4px; border:0; border-radius:30px; background:#395762; }
.hub-switch i { display:block; width:24px; height:24px; border-radius:50%; background:#f7f4d8; }
.hub-switch[aria-checked=true] { background:var(--game-accent,#3b9e89); }.hub-switch[aria-checked=true] i{margin-left:auto}
.hub-language { display:flex; gap:8px; margin-top:16px; }
.hub-language button { flex:1; min-height:47px; background:var(--game-raised,#123d49); border:1px solid var(--game-line,#345c66); border-radius:12px; color:var(--game-muted,#bad3d1); font-size:12px; font-weight:700; }
.hub-language button[aria-pressed=true] { border-color:#e6bb63; color:var(--game-gold,#ffe2a0); }
.hub-shop-feature { display:flex; align-items:center; gap:16px; }
.hub-shop-feature .hub-art { width:105px; height:116px; }.hub-shop-feature h3{font-size:19px}.hub-shop-feature strong{font-size:31px;color:var(--game-gold,#ffdc8d)}
.hub-pack-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hub-pack { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--game-line,#375b62); background:var(--game-panel,#103b46); border-radius:18px; padding:13px 9px; color:var(--game-ink,#e7eddc); }
.hub-pack[aria-pressed=true] { border:2px solid #e8be63; background:#28534d; }.hub-pack .hub-art{width:53px;height:53px;margin-bottom:9px}.hub-pack strong{font-size:21px;color:#ffe3a1}.hub-pack small{font-size:11px;color:#a6c5c1;margin:5px 0 9px}.hub-pack b{font-size:13px}
.hub-notice { margin:14px 0 0; color:#94b7bd; line-height:1.6; font-size:12px; }
.hub-confirm { text-align:center; padding:20px 0; }.hub-confirm h3{font-size:24px;color:var(--game-gold,#ffe1a0)}.hub-confirm p{font-size:14px;line-height:1.7;color:#aecac8}.hub-confirm .hub-counter{margin:25px 0}.hub-confirm .hub-secondary{margin-top:13px}
.hub-status { position:absolute; z-index:3; bottom:96px; left:20px; right:20px; padding:13px; background:#245c5d; border:1px solid #71a593; border-radius:13px; font-size:13px; color:var(--game-ink,#fff0cc); text-align:center; box-shadow:0 6px 20px #0007; }
@media(min-width:700px){.hub-overlay{width:var(--desktop-game-width);left:50%;right:auto;transform:translateX(-50%)}.hub-sheet{max-height:calc(100dvh - 24px);height:min(94dvh,860px)}}
@media(max-height:650px){.hub-sheet{height:97dvh}.hub-head{padding:12px 15px}.hub-head h2{font-size:21px}.hub-body{padding:3px 14px 18px}.hub-foot{padding:10px 14px 14px}.hub-mode{min-height:174px}.hub-skin-stage{padding-top:10px}.hub-tiles{transform:scale(.84);margin-top:-10px;margin-bottom:-10px}.hub-skin-stage h3{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.hub-sheet{animation:none}}
@keyframes hub-enter{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
/* Physical game controls, painted collections and direct manipulation. */
html *, html *::before, html *::after { scrollbar-width:none; }
*::-webkit-scrollbar { display:none; width:0; height:0; }
.hub-head { position:relative; padding-bottom:44px; gap:10px; }
.hub-head > div { min-width:0; }
.hub-head h2 { font-size:22px; }
.hub-head p { font-size:10px; }
.hub-head .hub-wallet { position:absolute; right:19px; bottom:9px; display:flex; align-items:center; gap:5px; color:var(--game-gold,#ffdc88); font-size:15px; min-height:25px; }
.hub-wallet b { font-variant-numeric:tabular-nums; }
.hub-coin { display:inline-block; width:1.25em; height:1.25em; vertical-align:-.23em; flex:none; overflow:hidden; }
.hub-wallet .hub-coin { width:25px; height:25px; }
.hub-body { scrollbar-width:none; touch-action:none; cursor:grab; padding-bottom:26px; }
.hub-body * { touch-action:none !important; }
.hub-body.is-dragging,.hub-body.is-dragging * { cursor:grabbing !important; }
.hub-body:focus-visible { outline:2px solid #6cc7b680; outline-offset:-3px; }
.hub-primary,.hub-claim { --button-cut:polygon(15px 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,15px 100%,0 50%); position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; min-height:58px; padding:12px 20px 18px; border:0; border-radius:0; background:transparent; box-shadow:none; color:#513014; font-size:16px; font-weight:800; transition:transform .12s ease,filter .12s ease; filter:drop-shadow(0 4px 3px #0004); }
.hub-primary::before,.hub-claim::before { content:''; position:absolute; inset:0; z-index:-2; background:#8a521d; clip-path:var(--button-cut); }
.hub-primary::after,.hub-claim::after { content:''; position:absolute; inset:2px 3px 7px; z-index:-1; background:#ffc94e; clip-path:var(--button-cut); }
.hub-overlay .hub-primary:active:not(:disabled),.hub-overlay .hub-claim:active:not(:disabled) { transform:translateY(4px); filter:none; }
.hub-primary:active::after,.hub-claim:active::after { background:#f5ba3e; }
.hub-overlay .hub-primary:disabled { background:transparent; border:0; color:var(--game-muted,#b0c9c6); filter:none; }
.hub-primary:disabled::before { background:var(--game-line,#132f38); }.hub-primary:disabled::after { background:var(--game-raised,#28505a); }
.hub-claim { min-height:46px; font-size:12px; padding:8px 15px 13px; --button-cut:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%); }
.hub-button-label { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; line-height:1.25; }
.hub-primary .hub-coin,.hub-claim .hub-coin { filter:drop-shadow(0 1px 1px #805014); }
.hub-foot { padding-top:12px; background:var(--game-deep,#061e28); }
.hub-foot .hub-secondary { margin-top:8px; }
.hub-tabs button { transition:background .18s ease,color .18s ease; }
.hub-secondary,.hub-close { transition:transform .12s ease,background .15s ease; }
@media(hover:hover){.hub-primary:not(:disabled):hover::after,.hub-claim:not(:disabled):hover::after{background:#ffd468}.hub-mode:not(:disabled):hover,.hub-skin-card:hover{border-color:#9aa67c}.hub-close:hover,.hub-secondary:hover{background:var(--game-raised,#245564)}}
/* One readable row per mode, with a large centered emblem and a selection ring. */
.hub-mode-grid { display:flex; flex-direction:column; gap:11px; }
.hub-mode { display:grid; grid-template-columns:76px minmax(0,1fr) 22px; align-items:center; gap:11px; min-height:119px; padding:13px 11px; border:1px solid #365863; border-radius:18px; background:linear-gradient(110deg,#1c454b,#0b303c); text-align:left; transition:border-color .18s,background .18s,transform .12s; }
.hub-mode[aria-pressed=true] { padding:13px 11px; border:1px solid #e5bd67; background:linear-gradient(110deg,#3b5747,#123c43); box-shadow:inset 0 0 0 1px #e5bd6733; }
.hub-mode-art { display:block; width:76px; height:80px; overflow:hidden; filter:drop-shadow(0 4px 4px #0005); }
.hub-mode-copy { display:flex; flex-direction:column; min-width:0; gap:6px; }
.hub-mode strong { margin:0; font-size:18px; }.hub-mode small { margin:0; color:#dfc38a; font-size:10px; line-height:1.5; }
.hub-mode-copy > span { font-size:11px; line-height:1.5; color:#a5c4c3; }
.hub-mode-check { display:grid; place-items:center; width:21px; height:21px; border:1px solid #527275; border-radius:50%; color:#45371b; font-size:13px; }
.hub-mode[aria-pressed=true] .hub-mode-check { background:#ffd16e; border-color:#ffd16e; }
.hub-overlay .hub-mode:disabled { opacity:.65; }.hub-mode:disabled .hub-mode-art{filter:saturate(.35)}
.hub-sheet[data-screen=modes] { height:auto; max-height:94dvh; }.hub-sheet[data-screen=settings]{height:auto}
.hub-sheet[data-screen=modes] .hub-body { flex:0 1 auto; }
/* Paint workshop: fixed live preview, scrollable palette collection. */
.hub-preview { flex:none; padding:0 16px 10px; }.hub-preview[hidden]{display:none}
.hub-skin-stage { display:flex; align-items:center; height:176px; margin:0; padding:14px 10px 14px 16px; overflow:hidden; border:1px solid #57716d70; border-radius:18px; background:linear-gradient(135deg,var(--skin-bg),var(--skin-end)); }
.hub-stage-caption { position:relative; z-index:1; width:104px; flex:none; text-align:left; }
.hub-stage-caption span { display:block; color:#92b3b6; font-size:8px; letter-spacing:2px; margin-bottom:10px; }
.hub-stage-caption b { display:block; color:var(--game-ink,#fff0cb); font-size:22px; line-height:1.2; margin-bottom:7px; }
.hub-stage-caption small { color:#9ababc; font-size:10px; line-height:1.5; display:block; }
.is-light .hub-stage-caption span,.is-light .hub-stage-caption small { color:#5b7169; }.is-light .hub-stage-caption b{color:#214f43}
.hub-board-preview { display:block; flex:1; width:0; min-width:0; height:174px; overflow:visible; animation:paint-reveal .32s ease-out; }
.hub-sheet[data-screen=skins] .hub-body { padding-top:0; }
.hub-sheet[data-screen=skins] .hub-tabs { position:sticky; top:0; z-index:2; border:1px solid var(--game-line,#1e4550); margin-bottom:12px; }
.hub-skin-grid { gap:10px; }
.hub-skin-card { position:relative; display:flex; flex-direction:column; align-items:center; min-height:153px; padding:9px 9px 13px; overflow:hidden; border-radius:17px; border:1px solid var(--game-line,#34505a); background:radial-gradient(ellipse at 50% 10%,color-mix(in srgb,var(--paint-accent) 18%,transparent),transparent 80%),var(--game-panel,#0c303b); text-align:center; transition:border-color .18s,transform .12s; }
.hub-skin-card[aria-pressed=true] { background:radial-gradient(ellipse at 50% 10%,color-mix(in srgb,var(--paint-accent) 27%,transparent),transparent 80%),var(--game-raised,#1c4146); border-color:#e6bf70; }
.hub-paint { display:block; width:118px; height:85px; filter:drop-shadow(0 5px 3px #0005); }
.hub-skin-copy { display:block; }.hub-skin-copy strong{font-size:14px;margin:3px 0 5px}.hub-skin-copy small{font-size:11px;color:var(--game-muted,#c3cfc1)}.hub-skin-copy .hub-coin{width:17px;height:17px}
.hub-skin-selected { position:absolute; top:9px; right:9px; color:var(--game-gold,#ffdc88); font-size:13px; }
.hub-selection { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px; font-size:13px; color:var(--game-muted,var(--game-muted,var(--game-muted,var(--game-muted,#a5c4c4)))); }.hub-selection strong{color:var(--game-ink,#f3e3b8)}.hub-selection span{font-size:11px}
.hub-confirm { padding:12px 4px; }.hub-confirm h3{font-size:21px;margin:8px 0}.hub-confirm p{font-size:12px}.hub-confirm .hub-counter{margin:16px 0}
/* Treasury: distinguish pack size with compositions of the existing coin art. */
.hub-shop-intro { padding:5px 3px 18px; }.hub-shop-intro>span{font-size:9px;letter-spacing:2px;color:#7dc8b7}.hub-shop-intro h3{font-size:23px;color:var(--game-gold,#ffe2a0);margin:9px 0 7px;line-height:1.2}.hub-shop-intro p{color:var(--game-muted,var(--game-muted,var(--game-muted,var(--game-muted,#a5c4c4))));font-size:11px;line-height:1.5;margin:0}
.hub-pack-grid { gap:11px; }
.hub-pack { position:relative; justify-content:flex-start; padding:11px 10px 14px; min-height:218px; border-color:#496260; border-radius:18px; background:radial-gradient(ellipse at 50% 10%,#5b693136,transparent 75%),#10313b; overflow:hidden; }
.hub-pack-art { position:relative; width:118px; height:106px; flex:none; margin:0 auto 6px; }
.hub-pack-art>.hub-art { width:112px; height:104px; margin:0; }.hub-pack-art.hero>.hub-art:first-child{width:105px;height:102px}.hub-pack-art.hero>.hub-art:last-child{position:absolute;right:-7px;bottom:0;width:50px;height:57px}
.coin-pile { width:98px; height:85px; margin:8px auto 19px; left:-8px; }.coin-pile>span{position:absolute;display:block}.coin-pile .hub-coin{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 2px #462409aa)}
.hub-pack h3 { font-size:12px; line-height:1.3; margin:3px 0 7px; color:#c8ddd4; }
.hub-pack strong { display:flex; align-items:center; gap:5px; font-size:24px; line-height:1; margin-bottom:12px; }.hub-pack strong .hub-coin{width:23px;height:23px}
.hub-pack-price { margin-top:auto; font-size:12px; color:#b7c9c4; border-top:1px solid #ffffff12; padding-top:9px; width:100%; text-align:center; }
.pack-hero { grid-column:1/-1; display:grid; grid-template-columns:110px 1fr; grid-template-rows:auto auto auto; column-gap:12px; min-height:140px; text-align:left; padding:16px; }.pack-hero .hub-pack-art{grid-row:1/4;grid-column:1}.pack-hero h3{font-size:17px}.pack-hero .hub-pack-price{text-align:left}.pack-hero strong{font-size:28px;margin-bottom:8px}
.hub-effects { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
.hub-flying-coin { position:absolute; display:block; width:32px; height:32px; will-change:transform; filter:drop-shadow(0 0 6px #ffc94e80); }.hub-flying-coin .hub-coin{width:100%;height:100%}
.hub-status { bottom:auto; top:105px; z-index:9; pointer-events:none; animation:hub-toast .22s ease-out; }
.hub-progress i { transition:width .4s ease; }
@keyframes paint-reveal{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:none}}
@keyframes hub-toast{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:359px){.hub-head h2{font-size:20px}.hub-head{padding-left:14px;padding-right:14px}.hub-head .hub-art{width:35px;height:38px}.hub-head p{font-size:9px}.hub-mode{grid-template-columns:61px minmax(0,1fr) 18px;gap:8px;padding:11px 9px;min-height:112px}.hub-mode[aria-pressed=true]{padding:11px 9px}.hub-mode-art{width:61px;height:68px}.hub-mode strong{font-size:16px}.hub-mode-copy>span{font-size:10px}.hub-paint{width:100px;height:75px}.hub-skin-card{min-height:140px}.hub-stage-caption{width:90px}.hub-stage-caption b{font-size:20px}.hub-pack-art{transform:scale(.9);transform-origin:center}.hub-pack{padding-left:6px;padding-right:6px}.pack-hero{padding:13px}}
@media(max-height:650px){.hub-head{padding-top:12px;padding-bottom:40px}.hub-preview{padding:0 14px 8px}.hub-skin-stage{height:128px;padding:8px 10px}.hub-board-preview{height:130px}.hub-stage-caption b{font-size:20px}.hub-stage-caption span{margin-bottom:6px}.hub-primary{min-height:51px;font-size:14px}.hub-foot{padding:9px 14px 12px}.hub-selection{margin-bottom:6px}.hub-foot p{font-size:10px;margin-bottom:7px}.hub-pack{min-height:203px}}
@media(prefers-reduced-motion:reduce){.hub-overlay *{animation:none!important;transition:none!important}}
.hub-mode[aria-pressed=true] .hub-mode-art { animation:emblem-select .3s ease-out; }
.hub-sheet[data-screen=shop] .hub-pack-art { animation:treasure-reveal .4s ease-out both; }
.hub-sheet[data-screen=shop] .hub-pack:nth-child(2) .hub-pack-art { animation-delay:.05s; }
.hub-sheet[data-screen=shop] .hub-pack:nth-child(3) .hub-pack-art { animation-delay:.1s; }
@keyframes emblem-select{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes treasure-reveal{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.hub-overlay *{animation:none!important;transition:none!important}}
.entry-guest,.hub-primary,.hub-claim { transition-timing-function:cubic-bezier(.39,.575,.565,1); }
.hub-sheet { position:relative; }
.hub-status { top:auto; bottom:104px; left:50%; right:auto; width:max-content; max-width:calc(100% - 36px); padding:11px 17px; transform:translateX(-50%); font-size:13px; background:var(--game-raised,#164d4a); border-color:var(--game-line,#6eaa88); box-shadow:0 6px 24px #0008; }
@keyframes hub-toast{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.hub-goal.is-achievement { grid-template-columns:54px minmax(0,1fr); gap:12px; }
.hub-ach-badge { display:flex; flex-direction:column; align-items:center; gap:7px; padding-top:2px; color:#d9a16b; }
.hub-ach-badge .hub-art { width:54px; height:60px; }
.hub-ach-badge span { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.hub-ach-badge[data-tier=silver] { color:#c5dfeb; }.hub-ach-badge[data-tier=gold]{color:#ffcf62}.hub-ach-badge[data-tier=diamond]{color:#8af1e5}
@media(max-width:359px){.hub-goal.is-achievement{grid-template-columns:46px minmax(0,1fr);gap:10px}.hub-ach-badge .hub-art{width:46px;height:54px}.hub-ach-badge span{font-size:7px}.hub-row-foot{flex-wrap:wrap}}

/* A focused in-game offer uses the same frame, art and actions as the treasury. */
.hub-offer-overlay { align-items:center; padding:16px; }
.hub-sheet[data-screen=booster] { height:auto; max-height:calc(100dvh - 32px); border:1px solid var(--game-line,#54706b); border-radius:24px; box-shadow:0 18px 70px #0009; }
.hub-sheet[data-screen=booster] .hub-head { padding:20px 20px 12px; }
.hub-sheet[data-screen=booster] .hub-wallet { display:none; }
.hub-sheet[data-screen=booster] .hub-head h2 { font-size:21px; }
.hub-sheet[data-screen=booster] .hub-head p { display:none; }
.hub-sheet[data-screen=booster] .hub-body { padding:0 22px 18px; }
.hub-booster-hero { text-align:center; }
.hub-booster-stage { position:relative; height:144px; display:grid; place-items:center; background:radial-gradient(ellipse at center,#28796960,transparent 66%); }
.hub-booster-stage::after { content:''; position:absolute; bottom:5px; left:calc(50% - 39px); width:78px; height:10px; background:#031a2490; border:1px solid #62c4b333; border-radius:50%; }
.hub-booster-art { width:112px; height:119px; overflow:hidden; filter:drop-shadow(0 6px 10px #0004); animation:hub-booster-reveal .32s ease-out; }
.hub-booster-hero h3 { margin:15px 0 8px; color:var(--game-gold,#ffe1a0); font-size:25px; line-height:1.2; }
.hub-booster-hero p { max-width:280px; margin:0 auto; color:#aec7c6; font-size:13px; line-height:1.6; }
.hub-booster-cost { display:flex; justify-content:space-between; gap:16px; padding-top:18px; margin:20px 0 0; border-top:1px solid #31535b; }
.hub-booster-cost > div:last-child { text-align:right; }
.hub-booster-cost dt { color:#96b5b8; font-size:11px; }
.hub-booster-cost dd { display:flex; align-items:center; gap:5px; margin:5px 0 0; color:#ffdf94; font-size:20px; font-weight:800; }
.hub-booster-cost > div:last-child dd { justify-content:flex-end; }
.hub-booster-short { display:flex; align-items:center; justify-content:center; gap:4px; margin:17px 0 0; font-size:12px; color:#d7c6a1; }
.hub-sheet[data-screen=booster] .hub-foot { padding:15px 20px 10px; }
.hub-foot .hub-secondary { margin-top:10px; }
.hub-offer-cancel { display:block; width:100%; min-height:42px; margin-top:7px; border:0; background:transparent; color:#a5c2c4; font-size:13px; }
@keyframes hub-booster-reveal { from { transform:translateY(10px) scale(.9); opacity:0; } to { transform:none; opacity:1; } }
@media(min-width:700px){body.is-playing .hub-overlay{width:min(480px,calc(100dvh * .58));}}
@media(max-height:650px){.hub-sheet[data-screen=booster] .hub-head{padding-top:12px;padding-bottom:8px}.hub-booster-stage{height:95px}.hub-booster-art{width:78px;height:83px}.hub-booster-hero h3{font-size:22px;margin-top:10px}.hub-booster-cost{margin-top:14px;padding-top:13px}.hub-sheet[data-screen=booster] .hub-foot{padding-top:10px}}
@media(prefers-reduced-motion:reduce){.hub-booster-art{animation:none}}

/* Treasury: one readable shelf per pack, ordered by amount. */
.hub-sheet[data-screen=shop] { height:auto; max-height:94dvh; background:radial-gradient(ellipse at 50% 0,#174c4e55,transparent 55%),var(--game-panel,#082733); }
.hub-sheet[data-screen=shop] .hub-head { display:grid; grid-template-columns:42px minmax(0,1fr) 44px; gap:10px; padding:20px 18px 12px; }
.hub-sheet[data-screen=shop] .hub-head > .hub-art { grid-column:1; grid-row:1; }
.hub-sheet[data-screen=shop] .hub-head > div:not(.hub-wallet) { grid-column:2; grid-row:1; }
.hub-sheet[data-screen=shop] .hub-close { grid-column:3; grid-row:1; }
.hub-sheet[data-screen=shop] .hub-wallet { position:static; grid-column:1/-1; display:flex; gap:7px; margin-top:4px; padding:10px 12px; border-radius:10px; border:1px solid #44686480; background:#021c2799; }
.treasury-balance-label { margin-right:auto; font-size:12px; color:#9fc1bd; }
.hub-sheet[data-screen=shop] .hub-wallet b { font-size:20px; }
.hub-sheet[data-screen=shop] .hub-body { flex:0 1 auto; padding:0 18px 16px; }
.treasury-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:5px 1px 12px; }
.treasury-caption h3 { margin:0; color:#dbe7d8; font-size:13px; font-weight:700; }
.treasury-caption > span { font-size:10px; color:#86abae; }
.treasury-stock { display:grid; gap:8px; }
.treasury-lot { position:relative; isolation:isolate; display:grid; grid-template-columns:74px minmax(0,1fr) 82px; align-items:center; gap:10px; min-height:84px; padding:7px 13px 7px 8px; animation:treasure-reveal .3s ease-out both; animation-delay:calc(var(--lot-index) * 35ms); }
.treasury-lot::before,.treasury-lot::after { content:''; position:absolute; inset:0; z-index:-2; clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px); }
.treasury-lot::before { background:#41636a; }
.treasury-lot::after { inset:1px; z-index:-1; background:linear-gradient(105deg,#24524a88,transparent 58%),#10333d; }
.treasury-lot.is-chest::before { background:#9a8250; }
.treasury-lot.is-chest::after { background:linear-gradient(105deg,#6c663b66,transparent 70%),#153b3f; }
.treasury-lot .hub-pack-art { width:70px; height:68px; margin:0; left:0; transform:none; animation:none!important; }
.treasury-lot .hub-pack-art > .hub-art { width:70px; height:68px; margin:0; }
.treasury-lot .coin-pile { width:57px; height:54px; left:0; }
.treasury-lot .hub-pack-art.hero > .hub-art:first-child { position:absolute; width:56px; height:53px; left:-2px; top:0; }
.treasury-lot .hub-pack-art.hero > .hub-art:last-child { width:47px; height:48px; right:-2px; bottom:0; }
.treasury-lot-copy { min-width:0; }
.treasury-lot-copy h3 { margin:0 0 5px; color:#a8c6c2; font-size:11px; line-height:1.2; font-weight:600; }
.treasury-lot-copy strong { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px; color:var(--game-gold,#ffe1a0); font-size:27px; line-height:1.1; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.treasury-lot-copy strong span { color:#a1bbb5; font-size:10px; font-weight:500; letter-spacing:0; }
.treasury-lot-price { padding:11px 0 11px 8px; border-left:1px solid #78908030; text-align:right; color:#d2d3bb; font-size:14px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hub-sheet[data-screen=shop] .hub-foot { padding:10px 18px max(13px,env(safe-area-inset-bottom)); }
.hub-sheet[data-screen=shop] .treasury-availability { margin:0 0 11px; color:#8fadaf; font-size:11px; }
.treasury-earn { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.treasury-earn > div { display:flex; align-items:center; gap:8px; min-width:0; }
.treasury-earn .hub-art { width:33px; height:39px; }
.treasury-earn strong { display:block; color:#d4e3d7; font-size:12px; }
.treasury-earn small { display:block; max-width:155px; margin-top:4px; color:#8fb0b3; font-size:10px; line-height:1.4; }
.treasury-earn .hub-primary { flex:none; width:auto; min-width:108px; min-height:47px; padding:10px 16px 15px; font-size:12px; }
body:has(.hub-overlay) #dev-fab { visibility:hidden; }
@media(max-width:359px){.hub-sheet[data-screen=shop] .hub-head{grid-template-columns:32px minmax(0,1fr) 40px;padding-left:12px;padding-right:12px;gap:8px}.hub-sheet[data-screen=shop] .hub-head h2{font-size:20px}.hub-sheet[data-screen=shop] .hub-body{padding-left:12px;padding-right:12px}.treasury-lot{grid-template-columns:58px minmax(0,1fr) 69px;gap:7px;padding-right:10px}.treasury-lot .hub-pack-art{scale:.85;transform-origin:left center}.treasury-lot-copy strong{font-size:24px}.treasury-lot-copy strong span{display:none}.treasury-lot-price{font-size:12px}.treasury-caption>span{display:none}.treasury-earn .hub-art{display:none}.treasury-earn .hub-primary{min-width:99px}.hub-sheet[data-screen=shop] .hub-foot{padding-left:12px;padding-right:12px}}
@media(max-height:650px){.hub-sheet[data-screen=shop]{max-height:97dvh}.hub-sheet[data-screen=shop] .hub-head{padding-top:12px;padding-bottom:8px;row-gap:4px}.hub-sheet[data-screen=shop] .hub-wallet{padding-top:5px;padding-bottom:5px}.treasury-caption{margin-bottom:8px}.treasury-stock{gap:6px}.treasury-lot{min-height:60px;padding-top:2px;padding-bottom:2px}.treasury-lot .hub-pack-art{height:52px}.treasury-lot .hub-pack-art>.hub-art{height:52px}.treasury-lot .coin-pile{height:47px;width:50px}.treasury-lot-copy strong{font-size:24px}.hub-sheet[data-screen=shop] .hub-body{padding-bottom:10px}.hub-sheet[data-screen=shop] .hub-foot{padding-top:8px;padding-bottom:9px}.hub-sheet[data-screen=shop] .treasury-availability{margin-bottom:7px}.treasury-earn small{display:none}}

/* Workshop: exact game textures above a compact paint collection. */
.hub-sheet[data-screen=skins] .hub-head { padding-bottom:38px; }
.hub-skin-stage { height:254px; display:block; padding:0; border-color:color-mix(in srgb,var(--skin-accent) 40%,transparent); }
.hub-stage-caption { width:auto; position:absolute; top:13px; left:15px; right:15px; display:grid; grid-template-columns:1fr auto; gap:3px 8px; }
.hub-stage-caption span { grid-column:1/-1; font-size:8px; margin:0; }
.hub-stage-caption b { margin:0; font-size:21px; }
.hub-stage-caption small { align-self:center; font-size:10px; text-align:right; max-width:135px; }
.hub-board-preview { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:275px; height:202px; }
.hub-stage-note { position:absolute; bottom:9px; inset-inline:8px; font-size:9px; color:#97b8b8; }
.hub-skin-stage.is-light .hub-stage-note { color:#526577; }
.hub-skin-grid { gap:8px; }
.hub-skin-card { display:grid; grid-template-columns:54px minmax(0,1fr); gap:5px; align-items:center; min-height:80px; padding:8px; border-radius:14px; text-align:left; }
.hub-skin-card .hub-paint { width:54px; height:49px; }
.hub-skin-copy { min-width:0; }
.hub-skin-copy strong { font-size:13px; margin:0 0 5px; }
.hub-skin-copy small { font-size:10px; line-height:1.35; }
.hub-skin-selected { top:4px; right:6px; font-size:10px; }
.hub-sheet[data-screen=skins] .hub-tabs { margin-bottom:9px; }
.hub-sheet[data-screen=skins] .hub-foot .hub-secondary { margin-top:9px; }
@media(max-width:359px) { .hub-skin-card { grid-template-columns:40px minmax(0,1fr);padding:8px 6px; }.hub-skin-card .hub-paint{width:40px;height:42px}.hub-skin-copy strong{font-size:12px}.hub-stage-caption small{max-width:110px;font-size:9px} }
@media(max-height:650px) { .hub-skin-stage{height:174px}.hub-board-preview{height:129px;width:174px;bottom:9px}.hub-stage-caption{top:8px;left:12px;right:12px}.hub-stage-caption span{font-size:7px}.hub-stage-caption b{font-size:17px}.hub-stage-caption small{font-size:9px}.hub-stage-note{font-size:8px;bottom:6px}.hub-skin-card{min-height:71px}.hub-sheet[data-screen=skins] .hub-head{padding-bottom:35px} }

.hub-board-preview{animation:skin-crystal-reveal .32s ease-out}
.hub-skin-stage .hub-board-preview{bottom:30px;height:181px;width:245px}
.hub-skin-view{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:3px;border-radius:20px;background:#00141b55;white-space:nowrap}
.hub-skin-view button{border:0;background:transparent;color:#c1d7db;border-radius:16px;padding:5px 13px;font:700 10px 'Manrope',sans-serif;cursor:pointer;min-height:28px}
.hub-skin-view button[aria-pressed=true]{background:#d1f4ef;color:#183c45}
.is-light .hub-skin-view{background:#7183a329}.is-light .hub-skin-view button{color:#38435e}.is-light .hub-skin-view button[aria-pressed=true]{background:#fff;color:#38435e}
.hub-number-palette{position:absolute;inset:76px 12px 47px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:5px 0}
.hub-number-gem{position:relative;display:grid;place-items:center;width:14.28%;height:57px}
.hub-number-gem img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.hub-number-gem b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:800;letter-spacing:-.3px;pointer-events:none}
@media(max-height:650px){.hub-skin-stage .hub-board-preview{bottom:29px;width:156px;height:115px}.hub-number-palette{inset:52px 8px 35px;gap:0}.hub-number-gem{height:39px}.hub-skin-view{bottom:4px;padding:1px}.hub-skin-view button{padding:3px 12px;min-height:26px}}
.has-palette .hub-skin-stage{height:296px}
.has-palette .hub-number-palette{bottom:89px}
.hub-palette-pages{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;color:#c1d7db}
.hub-palette-pages button{width:40px;height:40px;border:1px solid #ffffff25;border-radius:12px;background:#00141b44;color:inherit;font-size:25px;line-height:1;cursor:pointer}
.hub-palette-pages button:disabled{opacity:.25;cursor:default}
.hub-palette-pages span{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:108px;white-space:nowrap}
.hub-palette-pages b{font-size:11px}.hub-palette-pages small{font-size:9px;opacity:.75}
.is-light .hub-palette-pages{color:#38435e}.is-light .hub-palette-pages button{background:#ffffff88;border-color:#7183a340}
@media(max-height:650px){.has-palette .hub-skin-stage{height:216px}.has-palette .hub-number-palette{bottom:77px}.hub-palette-pages{bottom:32px}}
@keyframes skin-crystal-reveal{from{opacity:0;transform:translateX(-50%) translateY(7px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
.hub-sheet[data-screen=shop] .hub-wallet{background:var(--game-deep,#051e29);border-color:var(--game-line,#496774)}
.treasury-lot{background:var(--game-raised,#143e4b);border-color:var(--game-line,#496774)}
.treasury-lot-copy h3,.treasury-caption>span{color:var(--game-muted,#97b5b6)}
.treasury-lot-copy strong,.treasury-caption h3{color:var(--game-ink,#fff1cb)}
.treasury-lot-price{color:var(--game-gold,#ffdf91)}
:root[data-skin-light=true] .hub-stage-caption span,:root[data-skin-light=true] .hub-stage-caption small{color:#97b8b8}
:root[data-skin-light=true] .hub-stage-caption b{color:#fff1cb}
:root[data-skin-light=true] .is-light .hub-stage-caption span,:root[data-skin-light=true] .is-light .hub-stage-caption small{color:#526577}
:root[data-skin-light=true] .is-light .hub-stage-caption b{color:#243747}

.hub-tabs button[aria-pressed=true]{background:color-mix(in srgb,var(--game-accent,#53cbb7) 28%,var(--game-panel,#10343e));color:var(--game-ink,#fff1cb)}
:root[data-skin-light=true] .achievement-tier{color:var(--game-ink,#243747)}

body.game-paused #dev-fab{visibility:hidden}