/* Sticker Club: reusable surfaces and controls; SC2/SC3 host adapters below. No canvas, world, piece or drag rules belong in this stylesheet. */ :root{ --sc-ink:#30204f;--sc-muted:#705f81;--sc-paper:#fffdf7;--sc-cream:#fcf4e8; --sc-violet:#8634ed;--sc-violet-dark:#5821ae;--sc-mint:#def3e6;--sc-gold:#ffcb55; --sc-outline:#776186;--sc-shadow:#51355d1c;--sc-tap:48px;--sc-press:110ms; --sc-paper-edge:polygon(0 1%,6% 0,15% 1%,25% 0,38% 1%,52% 0,64% 1%,79% 0,91% 1%,100% 0,99.6% 17%,100% 32%,99.5% 49%,100% 64%,99.5% 83%,100% 99%,88% 100%,76% 99%,62% 100%,48% 99%,33% 100%,18% 99%,0 100%,.5% 84%,0 68%,.5% 50%,0 31%,.5% 14%); } .scPaper{position:relative;background:var(--sc-paper);border:1px solid #d8c9d4;border-radius:14px;box-shadow:0 5px 0 #e9dfd2,0 9px 19px var(--sc-shadow)} .scTape{display:inline-block;max-width:100%;padding:5px 14px;background:#ffe9a7;color:var(--sc-ink);clip-path:polygon(2% 0,100% 4%,98% 100%,0 94%);font-weight:900;letter-spacing:.02em} .scTicket{position:relative;background:var(--sc-mint);border:1px dashed #91c5ad;border-radius:16px;padding:14px 18px;color:var(--sc-ink)} .scButton,body[data-ui-theme=sticker-club] :is(#screen-home,#screen-library,#motifDialog) :is(.primaryBtn,.softBtn,.playPieces),body[data-ui-theme=sticker-club] .navBtn{ font-family:inherit;font-weight:900;line-height:1.2;min-height:var(--sc-tap);min-width:44px;border:1px solid #d6c6d2;border-radius:16px;padding:10px 18px;color:var(--sc-ink);background:linear-gradient(#fffefa,#f3e9df);box-shadow:inset 0 2px 0 #fff,0 3px 0 #d1c0b6,0 5px 9px #4e305011;cursor:pointer;transition:transform var(--sc-press),box-shadow var(--sc-press) } .scButton--primary,body[data-ui-theme=sticker-club] :is(#screen-home,#screen-library,#motifDialog) .primaryBtn,body[data-ui-theme=sticker-club] .navBtn.active{ color:#fff;background:linear-gradient(#a74dff,#7e2bdf 60%,#7021cf);border-color:#6126ac;box-shadow:inset 0 2px 0 #d5a6ff,0 3px 0 #49138f,0 5px 10px #6d28ab24;text-shadow:0 1px 1px #4c137455 } .scButton--reward{background:linear-gradient(#ffe480,#ffbf36);border-color:#c9952c;color:#52330b;box-shadow:inset 0 2px 0 #fff3bc,0 3px 0 #c18b32} .scButton:active,body[data-ui-theme=sticker-club] :is(#screen-home,#screen-library,#motifDialog) button:active,body[data-ui-theme=sticker-club] .navBtn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff66,0 1px 0 #b8a0b6} .scButton:disabled,body[data-ui-theme=sticker-club] :is(#screen-home,#screen-library,#motifDialog) button:disabled{opacity:.5;cursor:default;transform:none} .scButton:focus-visible,body[data-ui-theme=sticker-club] :is(.topbar,#screen-home,#screen-library,#motifDialog) :is(button,a,select):focus-visible{outline:3px solid #6242ad;outline-offset:4px} /* One bounded app shell on both desktop and phone; the puzzle keeps its own shell. */ body[data-ui-theme=sticker-club]:not(.playing){background:#eee1d5} body[data-ui-theme=sticker-club] .app{background-color:var(--sc-cream);background-image:radial-gradient(ellipse at 5% 8%,#f3d6c544,transparent 50%),radial-gradient(ellipse at 95% 90%,#d7d1ef44,transparent 55%);box-shadow:0 0 60px #503a3c19} body[data-ui-theme=sticker-club] .topbar{position:static;height:calc(84px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 30px 0;flex:none;border:0;background:transparent;box-shadow:none;backdrop-filter:none;gap:16px} body[data-ui-theme=sticker-club] .brandLogo{width:166px;height:auto;filter:drop-shadow(0 3px 0 #ffffffbb)} body[data-ui-theme=sticker-club] .brandTag{font-size:11px;border-color:#dcc9d5;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .topActions{margin-left:auto;min-width:0;gap:12px} body[data-ui-theme=sticker-club] #globalSettingsBtn{width:48px;height:48px;border:1px solid #e1d3d5;background:var(--sc-paper);color:#604690;border-radius:50%;font-size:27px;box-shadow:0 3px 0 #d6c8bd} body[data-ui-theme=sticker-club] .headerCoins{height:48px;padding:5px 14px 5px 7px;display:flex;align-items:center;gap:9px;border:1px solid #e6d5c2;border-radius:28px;background:#fffaf3;color:var(--sc-ink);box-shadow:inset 0 2px 0 #fff,0 3px 0 #decebc;font:900 18px/1 Nunito,sans-serif;cursor:pointer} body[data-ui-theme=sticker-club] .headerCoins strong{white-space:nowrap} body[data-ui-theme=sticker-club] .scCoin{display:grid;place-items:center;width:33px;height:33px;border:2px solid #dd981c;border-radius:50%;background:linear-gradient(#ffe98a,#ffc33d);box-shadow:inset 0 0 0 3px #ffe69c;color:#a9680e;font-size:23px;text-shadow:0 1px #fff0b0} body[data-ui-theme=sticker-club] .accountBtn{width:44px;height:44px;min-width:44px;max-width:44px;padding:0;font-size:0;background:var(--sc-paper);border:1px solid #e1d3d5;border-radius:50%;color:#604690;box-shadow:0 3px 0 #d6c8bd} body[data-ui-theme=sticker-club] .accountBtn:after{content:'↺';font-size:24px} body[data-ui-theme=sticker-club] .topbar .nav{position:absolute;z-index:50;left:0;right:0;bottom:0;top:auto;transform:none;display:flex;justify-content:center;gap:16px;height:calc(78px + env(safe-area-inset-bottom));padding:7px 22px max(7px,env(safe-area-inset-bottom));border:0;border-top:1px solid #d9c9ce;background:#fffaf2f5;backdrop-filter:none;box-shadow:0 -3px 14px #76578d09} body[data-ui-theme=sticker-club] .navBtn{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:0 1 145px;gap:3px;min-height:60px;padding:6px 12px;font-size:13px;border-color:transparent;background:transparent;box-shadow:none;border-radius:18px} body[data-ui-theme=sticker-club] .navGlyph{width:25px;height:25px;stroke-width:2.2} body[data-ui-theme=sticker-club] .app>main{margin-bottom:calc(78px + env(safe-area-inset-bottom))} body[data-ui-theme=sticker-club].playing .app>main{margin-bottom:0} body[data-ui-theme=sticker-club].playing .topbar{display:none} /* SC2: a photo sticker, a useful side ticket, and an always-reachable picture rail. */ body[data-ui-theme=sticker-club] #screen-home .galleryWrap{display:flex;flex-direction:column;gap:14px;padding:10px 34px 18px;height:100%;max-width:1200px;min-height:0;overflow:hidden} .scLobbyHeading{flex:none;display:flex;align-items:baseline;gap:16px;min-height:36px} .scLobbyHeading h1{font:900 clamp(23px,2.8vw,32px)/1.15 Nunito,sans-serif;color:var(--sc-ink);margin:0;letter-spacing:-.025em} .scLobbyHeading p{margin:0;color:var(--sc-muted);font-size:14px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero{position:relative;flex:1;min-height:0;max-height:600px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,.85fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:24px;padding:0;margin:0;border:0;background:none;box-shadow:none;overflow:visible;border-radius:0} body[data-ui-theme=sticker-club] #screen-home .lobbyHero:before,body[data-ui-theme=sticker-club] #screen-home .lobbyHero:after{display:none} body[data-ui-theme=sticker-club] #screen-home :is(.lobbyIntro,.lobbyHeroArt,.libraryFilters,#motifGrid,.previousMotifs,#homeAlbum){display:none} body[data-ui-theme=sticker-club] #screen-home .scPlayCard{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;padding:12px 12px 16px;background:var(--sc-paper);border:1px solid #cfbfcc;border-radius:14px;box-shadow:0 5px 0 #e1d3c9,0 9px 20px #54355b17;transform:rotate(-.45deg)} .scPlayCard:before{content:'';position:absolute;width:82px;height:22px;left:calc(50% - 41px);top:-11px;background:#ffe8a9b8;clip-path:polygon(2% 0,100% 6%,98% 100%,0 92%);transform:rotate(3deg);z-index:1;pointer-events:none} body[data-ui-theme=sticker-club] #screen-home .playPicture{position:relative;display:block;flex:1;min-height:0;width:100%;height:auto;max-height:none;aspect-ratio:auto;border:1px solid #cfbfcc;border-radius:8px;overflow:hidden;background:#f2e5db;box-shadow:none;transform:none} body[data-ui-theme=sticker-club] #screen-home .playPicture img{display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;border-radius:0;transform:none} body[data-ui-theme=sticker-club] #screen-home .playPictureGlow{display:none} body[data-ui-theme=sticker-club] #screen-home .playPrompt{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;padding:12px 4px 0;align-items:center;min-width:0;text-align:left} body[data-ui-theme=sticker-club] #screen-home .playPrompt>.eyebrow{grid-column:1;display:block;font-size:10px;font-weight:900;letter-spacing:.1em;color:#886c92;margin:0} body[data-ui-theme=sticker-club] #screen-home #lobbyPictureTitle{grid-column:1;grid-row:2;font:900 clamp(19px,2.2vw,27px)/1.1 Nunito,sans-serif;color:var(--sc-ink);margin:0;overflow-wrap:anywhere} body[data-ui-theme=sticker-club] #screen-home #lobbyPictureMeta{grid-column:1;grid-row:3;margin:3px 0;font-size:13px;color:var(--sc-muted);line-height:1.25} body[data-ui-theme=sticker-club] #screen-home #lobbyStart{grid-column:2;grid-row:1/4;align-self:center;margin:0;font-size:15px;padding:12px 22px;min-height:52px;white-space:nowrap} body[data-ui-theme=sticker-club] #screen-home #lobbyPieces{grid-column:1;justify-self:start;padding:4px 0;min-height:44px;border:0;background:none;box-shadow:none;font-size:12px;color:#6931a9;text-decoration:underline;text-underline-offset:3px} body[data-ui-theme=sticker-club] #screen-home #lobbyOpenStatus{grid-column:1/-1;font-size:12px;color:var(--sc-muted);margin:0;line-height:1.2} #lobbyOpenStatus:empty{display:none} .scLobbySide{display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 4px 8px} body[data-ui-theme=sticker-club] #screen-home #homeAchievementGoal{width:100%;min-width:0;grid-area:auto;align-self:auto;padding:0;border:0;border-radius:0;background:none} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalCard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:20px 16px;background:#e3f1e6;border:1px dashed #9fbdab;border-radius:15px;box-shadow:0 4px 0 #ceded0;min-width:0} body[data-ui-theme=sticker-club] #screen-home .goalMedalShell{width:64px;height:64px;grid-column:1;grid-row:1;min-width:0;align-self:start;margin:3px 0 0;filter:none} body[data-ui-theme=sticker-club] #screen-home .goalMedalShell img{width:100%;height:100%;object-fit:contain} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalCopy{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalCopy .eyebrow{display:block;font-size:10px;color:#4f6f5a;letter-spacing:.08em;margin:0} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalTitle{font:900 20px/1.15 Nunito,sans-serif;color:var(--sc-ink);margin:0} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalTrack{height:7px;max-width:none;margin:3px 0;background:#c1ddcc} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalProgress{font-size:12px;color:#3d6651} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalNote{font-size:12px;line-height:1.3;color:#526451;display:block;margin:0} body[data-ui-theme=sticker-club] #screen-home :is(.achievementGoalMessage,.achievementGoalNext):empty{display:none} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalActions{margin:5px 0 0;display:flex;justify-content:flex-start;gap:6px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalActions .achievementGoalPlay{display:none} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalDetails{min-height:44px;font-size:12px;padding:8px 12px} body[data-ui-theme=sticker-club] #screen-home .dailyInvitation{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:10px;padding:13px;border:1px solid #dfcaa9;border-radius:12px;background:#fff2cf;box-shadow:0 4px 0 #e6d6b9;margin:0;min-height:90px;width:100%;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationPhoto{grid-column:1;grid-row:1/3;width:62px;height:62px;border:3px solid #fffdf7;border-radius:7px;transform:rotate(-4deg);object-fit:cover} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationCopy{grid-column:2;min-width:0} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationCopy .eyebrow{display:block;font-size:9px;margin:0;color:#886139} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationCopy strong{font-size:15px;line-height:1.15;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationCopy small,body[data-ui-theme=sticker-club] #screen-home .dailyInvitationSeal{display:none} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationAction{grid-column:2;font-size:12px;font-weight:900;justify-self:start;white-space:normal} body[data-ui-theme=sticker-club] #screen-home .continuePanel{flex:none;padding:12px;gap:10px;margin:0;border:1px solid #d8c2de;border-radius:12px;background:#f4eafa;box-shadow:none} body[data-ui-theme=sticker-club] #screen-home .continuePanel img{width:60px;height:64px;object-fit:cover;border:3px solid #fff;border-radius:5px} body[data-ui-theme=sticker-club] #screen-home .continuePanel h2{font-size:15px;line-height:1.1;margin:4px 0} body[data-ui-theme=sticker-club] #screen-home .continuePanel p{font-size:11px;margin:4px 0} body[data-ui-theme=sticker-club] #screen-home .continuePanel .eyebrow{display:block;font-size:9px;margin:0} body[data-ui-theme=sticker-club] #screen-home .continuePanel .lobbyActions>.softBtn{display:none} body[data-ui-theme=sticker-club] #screen-home .continuePanel .primaryBtn{font-size:11px;padding:8px;min-height:44px} body[data-ui-theme=sticker-club] #screen-home .playerStrip{display:flex;flex:none;flex-wrap:wrap;gap:5px;padding:0;margin:0;border:0;box-shadow:none;background:none;min-height:0} body[data-ui-theme=sticker-club] #screen-home .playerStrip>:not(#retryResults):not(#playerStatus){display:none} body[data-ui-theme=sticker-club] #screen-home #playerStatus{font-size:12px;margin:0;max-height:32px;overflow:auto;color:var(--sc-muted)} body[data-ui-theme=sticker-club] #screen-home .playerStrip:not(:has(#retryResults:not([hidden]))):not(:has(#playerStatus:not(:empty))){display:none} body[data-ui-theme=sticker-club] #screen-home .playAlternatives{flex:none;display:block;margin:0;padding:0;background:none;border:0;box-shadow:none} body[data-ui-theme=sticker-club] #screen-home .playAlternatives>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 8px} body[data-ui-theme=sticker-club] #screen-home #lobbyOtherTitle{font:900 17px/1.15 Nunito,sans-serif;color:var(--sc-ink);margin:0} body[data-ui-theme=sticker-club] #screen-home #lobbyChoose{min-height:44px;padding:7px 12px;font-size:12px} body[data-ui-theme=sticker-club] #screen-home .playOtherRow{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center} body[data-ui-theme=sticker-club] #screen-home .playOtherRail{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;min-width:0;scroll-snap-type:x proximity;padding:3px 4px 6px;scrollbar-width:none} .playOtherRail::-webkit-scrollbar{display:none} body[data-ui-theme=sticker-club] #screen-home .playOtherCard{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:3px 9px;flex:0 0 230px;min-width:0;padding:6px;border:1px solid #d6c3ce;border-radius:9px;background:var(--sc-paper);box-shadow:0 3px 0 #ded0c5;color:var(--sc-ink);height:78px;scroll-snap-align:start;text-align:left} body[data-ui-theme=sticker-club] #screen-home .playOtherCard img{grid-column:1;grid-row:1/3;width:76px;height:61px;object-fit:cover;border-radius:5px} body[data-ui-theme=sticker-club] #screen-home .playOtherCard strong{grid-column:2;font-size:13px;line-height:1.15;max-width:none;white-space:normal;overflow-wrap:anywhere} body[data-ui-theme=sticker-club] #screen-home .playOtherCard small{grid-column:2;font-size:11px;color:var(--sc-muted)} /* SC3: a bounded photo grid. The host chooses page capacity from real free space. */ body[data-ui-theme=sticker-club] #screen-library .galleryWrap{height:100%;max-width:1280px;min-height:0;display:flex;flex-direction:column;gap:12px;padding:12px 30px 14px;overflow:hidden} body[data-ui-theme=sticker-club] #screen-library .galleryHeading{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:36px;margin:0;padding:0;background:none;border:0;box-shadow:none} body[data-ui-theme=sticker-club] #screen-library .galleryHeading h1{font:900 30px/1.1 Nunito,sans-serif;color:var(--sc-ink);margin:0} body[data-ui-theme=sticker-club] #screen-library :is(.libraryHeroToken,.libraryHeadingLead,.libraryHero .eyebrow,.libraryDeckHead h2,.libraryDeckHead .eyebrow,.libraryDeck>.libraryFilters,.libraryPersonalLink){display:none} body[data-ui-theme=sticker-club] #screen-library .mobileTabs{display:flex;flex:none;gap:6px;padding:4px;max-width:480px;min-height:52px;margin:0;background:#ede2ec;border:1px solid #e2d2e0;border-radius:18px} body[data-ui-theme=sticker-club] #screen-library .mobileTabs button{min-height:44px;flex:1;font-size:14px;padding:8px 20px;background:transparent;border:1px solid transparent;box-shadow:none} body[data-ui-theme=sticker-club] #screen-library .mobileTabs button[aria-pressed=true]{background:var(--sc-paper);border-color:#d7bfdf;box-shadow:0 2px 0 #c5acd1;color:#6933b0} body[data-ui-theme=sticker-club] #screen-library .libraryDeck{display:flex;flex-direction:column-reverse;flex:none;gap:6px;margin:0;padding:0;background:none;border:0;box-shadow:none} body[data-ui-theme=sticker-club] #screen-library .libraryDeckHead{display:flex;justify-content:flex-end;min-height:0;margin:0;padding:0} body[data-ui-theme=sticker-club] #libraryResultCount{font-size:12px;color:var(--sc-muted);line-height:1.2} body[data-ui-theme=sticker-club] #libraryMoodChips{display:flex;gap:7px;flex-wrap:nowrap;overflow:auto;scrollbar-width:none;padding:2px 3px 5px;margin:0;min-height:48px;max-width:100%} #libraryMoodChips::-webkit-scrollbar{display:none} body[data-ui-theme=sticker-club] #libraryMoodChips button{flex:none;font-size:12px;padding:9px 15px;min-height:40px;min-width:44px;border:1px solid #dbc4e1;border-radius:20px;box-shadow:none;background:#fff9f1;white-space:nowrap} body[data-ui-theme=sticker-club] #libraryMoodChips button.active{color:#fff;background:#8338dd;border-color:#7130b9} body[data-ui-theme=sticker-club] #libraryGrid{display:grid;grid-template-columns:repeat(var(--sc-columns,2),minmax(0,1fr));grid-template-rows:repeat(var(--sc-rows,3),minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:16px;flex:1;min-height:0;overflow:visible;scroll-snap-type:none;border-radius:0;padding:4px 3px 6px} body[data-ui-theme=sticker-club] #libraryGrid>.motifCard{display:flex;flex-direction:column;min-height:0;min-width:0;width:100%;height:100%;margin:0;padding:6px 6px 8px;grid-column:auto;border:1px solid #cdbacc;background:var(--sc-paper);border-radius:10px;box-shadow:0 4px 0 #dfd1c7,0 5px 11px #57335f0d;overflow:visible;position:relative;transform:none;transition:transform var(--sc-press)} body[data-ui-theme=sticker-club] #libraryGrid>.motifCard:nth-child(3n+1){transform:rotate(-.55deg)} body[data-ui-theme=sticker-club] #libraryGrid>.motifCard:nth-child(3n+2){transform:rotate(.45deg)} body[data-ui-theme=sticker-club] #libraryGrid>.motifCard:hover{transform:translateY(-2px)} body[data-ui-theme=sticker-club] #libraryGrid>.motifCard img{display:block;width:100%;height:0;flex:1;min-height:0;aspect-ratio:auto;object-fit:cover;object-position:center;border-radius:5px;background:#eadfdb} body[data-ui-theme=sticker-club] #libraryGrid .motifCaption{flex:none;width:100%;padding:7px 3px 0;display:flex;align-items:start;justify-content:space-between;gap:6px;min-width:0} body[data-ui-theme=sticker-club] #libraryGrid .motifCopy{display:block;min-width:0} body[data-ui-theme=sticker-club] #libraryGrid .motifCopy strong{display:block;font:900 clamp(13px,1.25vw,17px)/1.15 Nunito,sans-serif;color:var(--sc-ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} body[data-ui-theme=sticker-club] #libraryGrid .motifCopy small{display:block;font-size:11px;line-height:1.2;color:var(--sc-muted);margin-top:4px} body[data-ui-theme=sticker-club] #libraryGrid :is(.motifType,.motifQuickAction){display:none} body[data-ui-theme=sticker-club] #libraryGrid .motifStatus{font-size:10px;line-height:1.2;color:#6e457d;max-width:90px;text-align:right;white-space:normal} .scLibraryPager{display:flex;align-items:center;justify-content:center;gap:18px;min-height:48px;flex:none;padding:0;margin:0;color:var(--sc-muted)} .scLibraryPager button{width:48px;height:44px;padding:4px!important;min-height:44px!important;font-size:22px!important} .scLibraryPager span{font-size:13px;font-weight:900;min-width:70px;text-align:center} .scLibraryPager[hidden],.scLibrarySwipeHint[hidden]{display:none!important} .scLibrarySwipeHint{font-size:12px;font-weight:800;color:var(--sc-muted);margin-right:auto} body[data-ui-theme=sticker-club] #libraryGrid[data-collection-browse=scroll]{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 6px - 14px - (var(--sc-columns,2) - 1)*11px)/var(--sc-columns,2));column-gap:11px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:3px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b99bcc transparent;touch-action:pan-x pan-y pinch-zoom;padding-bottom:12px} body[data-ui-theme=sticker-club] #libraryGrid[data-collection-browse=scroll]>.motifCard{scroll-snap-align:start;scroll-snap-stop:normal;transform:none} body[data-ui-theme=sticker-club] #libraryGrid[data-collection-browse=scroll]>.scEmptyLibrary{grid-column:1/span var(--sc-columns,2)} .scEmptyLibrary{grid-column:1/-1;grid-row:1/-1;display:grid;place-content:center;text-align:center;color:var(--sc-muted);border:1px dashed #cdb7d3;border-radius:18px;padding:24px} body[data-ui-theme=sticker-club] #screen-library .personalLibrary{display:none} body[data-ui-theme=sticker-club] #screen-library[data-library-tab=personal]{display:flex;flex-direction:column;align-items:stretch;min-height:0} body[data-ui-theme=sticker-club] #screen-library[data-library-tab=personal]>.galleryWrap{flex:none;width:100%;height:auto} body[data-ui-theme=sticker-club] #screen-library[data-library-tab=personal] :is(.libraryDeck,#libraryGrid,.scLibraryPager){display:none} body[data-ui-theme=sticker-club] #screen-library[data-library-tab=personal] .personalLibrary{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0;padding:10px 30px 20px} /* Focused size chooser: photograph + real controls, never text baked into art. */ body[data-ui-theme=sticker-club] #motifDialog{color:var(--sc-ink);background:var(--sc-paper);border:1px solid #aa8fb3;border-radius:22px;box-shadow:0 7px 0 #ccb8c9,0 24px 60px #30203b44;width:min(820px,calc(100vw - 32px));height:min(690px,calc(100dvh - 48px));max-height:calc(100dvh - 32px);padding:14px;overflow:auto} body[data-ui-theme=sticker-club] #motifDialog::backdrop{background:#2d1c405c;backdrop-filter:none} body[data-ui-theme=sticker-club] #motifDialog[open]{display:grid;grid-template-columns:1.1fr 1fr;gap:18px} body[data-ui-theme=sticker-club] #motifDialog .scPreviewClose{position:sticky;top:0;z-index:3;grid-area:1/1/2/3;align-self:start;flex:none;width:100%;height:0} body[data-ui-theme=sticker-club] #motifDialog .motifPreview{grid-area:1/1} body[data-ui-theme=sticker-club] #motifDialog .motifInfo{grid-area:1/2} body[data-ui-theme=sticker-club] #motifDialog .motifPreview{background:#eadedb;border:1px solid #d4bdce;border-radius:12px;min-height:0;overflow:hidden;align-self:start;position:sticky;top:0} body[data-ui-theme=sticker-club] #motifDialog .motifPreview img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain} body[data-ui-theme=sticker-club] #motifDialog .motifInfo{min-width:0;padding:25px 4px 2px;overflow:visible;align-self:start} body[data-ui-theme=sticker-club] #motifDialog .motifInfo h2{font:900 26px/1.15 Nunito,sans-serif;color:var(--sc-ink);margin:6px 0 10px} body[data-ui-theme=sticker-club] #motifDialog .motifInfo p{font-size:13px;line-height:1.35;color:var(--sc-muted)} body[data-ui-theme=sticker-club] #motifDialog .motifInfo>.eyebrow{color:#76528c;font-size:10px;font-weight:900} body[data-ui-theme=sticker-club] #motifDialog .motifClose{z-index:2;top:0;right:0;width:44px;height:44px;border:1px solid #d9c9d3;border-radius:50%;background:#fffdf7;color:#64427e;font-size:25px;box-shadow:0 3px 0 #d7c8bc} body[data-ui-theme=sticker-club] #motifDialog .pieceCountLabel{font-size:14px;font-weight:900;color:var(--sc-ink);margin:14px 0 8px} body[data-ui-theme=sticker-club] #motifDialog #pieceCount{display:none} body[data-ui-theme=sticker-club] #motifDialog .pieceChoices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} body[data-ui-theme=sticker-club] #motifDialog .pieceChoices button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;min-width:0;padding:8px 4px;border:1px solid #d5bfda;border-radius:14px;background:#f6eff7;color:var(--sc-ink);box-shadow:0 3px 0 #d9c7df;font:700 11px/1.1 Nunito,sans-serif} body[data-ui-theme=sticker-club] #motifDialog .pieceChoices strong{font-size:21px;font-weight:1000} body[data-ui-theme=sticker-club] #motifDialog .pieceChoices button[aria-pressed=true]{background:linear-gradient(#a24bf5,#7b2bcd);border-color:#6928a9;color:#fff;box-shadow:inset 0 2px 0 #d1a0ff,0 3px 0 #52218f} body[data-ui-theme=sticker-club] #motifDialog #startMotif{width:100%;min-height:50px;margin:6px 0;font-size:15px} body[data-ui-theme=sticker-club] #motifDialog #motifLeaderboard{border-top:1px dashed #d5c5d8;margin-top:12px;padding-top:10px} body[data-ui-theme=sticker-club] #startupIntro{background:radial-gradient(ellipse at 50% 43%,#fffaf2,#f9ecdc);color:var(--sc-ink)} body[data-ui-theme=sticker-club] #startupIntro .introActions h1{color:var(--sc-ink);text-shadow:0 2px 0 #fff9;font-family:Nunito,sans-serif} body[data-ui-theme=sticker-club] #startupIntro :is(.introActions p,.introReplay,.introStatus){color:var(--sc-muted)} body[data-ui-theme=sticker-club] #startupIntro .introSkip{background:#fffaf1c9;color:var(--sc-muted);border-color:#ddcbd8} body[data-ui-theme=sticker-club] #startupIntro button:focus-visible{outline-color:#6943b2} body[data-ui-theme=sticker-club] #startupIntro .introStart{border:1px solid #6924ad;background:linear-gradient(#a64dff,#792bda);color:#fff;box-shadow:inset 0 2px 0 #d5a1ff,0 4px 0 #511b93} @media(max-width:700px){ body[data-ui-theme=sticker-club] .topbar{height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;gap:8px} body[data-ui-theme=sticker-club] .brandLogo{width:126px}body[data-ui-theme=sticker-club] .brandTag{display:none} body[data-ui-theme=sticker-club] .topActions{gap:8px}body[data-ui-theme=sticker-club] .headerCoins{font-size:16px;padding-right:12px;gap:7px;height:44px} body[data-ui-theme=sticker-club] #globalSettingsBtn{width:44px;height:44px;font-size:24px} body[data-ui-theme=sticker-club] .topbar .nav{height:calc(72px + env(safe-area-inset-bottom));padding:5px 12px max(5px,env(safe-area-inset-bottom));gap:8px} body[data-ui-theme=sticker-club] .navBtn{flex:1;min-height:58px;font-size:12px;padding:5px;border-radius:17px} body[data-ui-theme=sticker-club] .app>main{margin-bottom:calc(72px + env(safe-area-inset-bottom))} body[data-ui-theme=sticker-club] #screen-home .galleryWrap{padding:8px 14px 12px;gap:10px} .scLobbyHeading{min-height:28px}.scLobbyHeading h1{font-size:24px}.scLobbyHeading p{display:none} body[data-ui-theme=sticker-club] #screen-home .lobbyHero{max-height:none;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:12px} body[data-ui-theme=sticker-club] #screen-home .scPlayCard{padding:8px 8px 10px;transform:rotate(-.3deg)} body[data-ui-theme=sticker-club] #screen-home .playPrompt{gap:2px 8px;padding-top:9px} body[data-ui-theme=sticker-club] #screen-home #lobbyPictureTitle{font-size:19px} body[data-ui-theme=sticker-club] #screen-home #lobbyPictureMeta{font-size:12px} body[data-ui-theme=sticker-club] #screen-home #lobbyStart{font-size:13px;padding:10px 13px;min-height:50px} .scLobbySide{gap:9px;overflow:auto;max-height:205px;padding:1px 3px 5px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalCard{grid-template-columns:43px minmax(0,1fr);padding:11px;gap:9px} body[data-ui-theme=sticker-club] #screen-home .goalMedalShell{width:43px;height:43px;margin:3px 0} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalCopy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalCopy>.eyebrow{grid-column:1;font-size:9px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalTitle{grid-column:1;font-size:16px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalProgress{grid-column:1;font-size:11px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalNote{grid-column:1/-1;font-size:11px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalTrack{display:none} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalActions{grid-column:2;grid-row:1/4;align-self:center;margin:0} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalDetails{font-size:11px;padding:8px;max-width:85px} body[data-ui-theme=sticker-club] #screen-home .dailyInvitation{grid-template-columns:44px minmax(0,1fr) auto;gap:8px;padding:9px;min-height:64px} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationPhoto{width:44px;height:44px;grid-row:1} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationAction{grid-column:3;grid-row:1;font-size:11px;max-width:82px} body[data-ui-theme=sticker-club] #screen-home .dailyInvitationCopy strong{font-size:13px} body[data-ui-theme=sticker-club] #screen-home #lobbyOtherTitle{font-size:15px} body[data-ui-theme=sticker-club] #screen-home .playAlternatives>header{margin-bottom:4px} body[data-ui-theme=sticker-club] #screen-home .playOtherRow{grid-template-columns:32px minmax(0,1fr) 32px;gap:5px} body[data-ui-theme=sticker-club] #screen-home :is(#lobbyOtherPrev,#lobbyOtherNext){min-width:32px;padding:4px;font-size:22px;min-height:48px} body[data-ui-theme=sticker-club] #screen-home .playOtherCard{flex-basis:200px;height:69px;grid-template-columns:65px minmax(0,1fr);padding:5px;gap:3px 7px} body[data-ui-theme=sticker-club] #screen-home .playOtherCard img{width:65px;height:55px} body[data-ui-theme=sticker-club] #screen-home .playOtherCard strong{font-size:12px} body[data-ui-theme=sticker-club] #screen-library .galleryWrap{padding:8px 14px 10px;gap:8px} body[data-ui-theme=sticker-club] #screen-library .galleryHeading h1{font-size:26px} body[data-ui-theme=sticker-club] #screen-library .mobileTabs{max-width:none;padding:3px;min-height:50px} body[data-ui-theme=sticker-club] #screen-library .mobileTabs button{font-size:13px;min-height:44px;padding:8px} body[data-ui-theme=sticker-club] #libraryGrid{gap:13px 11px;padding:3px 3px 6px} body[data-ui-theme=sticker-club] #libraryGrid>.motifCard{padding:5px 5px 7px;border-radius:9px} body[data-ui-theme=sticker-club] #libraryGrid .motifCaption{padding:6px 2px 0;display:block} body[data-ui-theme=sticker-club] #libraryGrid .motifCopy strong{font-size:13px} body[data-ui-theme=sticker-club] #libraryGrid .motifCopy small{font-size:10px;margin-top:3px} body[data-ui-theme=sticker-club] #libraryGrid .motifAction{position:absolute;top:9px;right:9px;max-width:90px} body[data-ui-theme=sticker-club] #libraryGrid .motifStatus{display:block;padding:3px 6px;background:#fffaf1e8;border-radius:6px;font-size:9px;max-width:100%} body[data-ui-theme=sticker-club] #screen-library[data-library-tab=personal] .personalLibrary{padding:8px 14px 16px} body[data-ui-theme=sticker-club] #motifDialog{padding:10px;width:calc(100vw - 24px);height:min(820px,calc(100dvh - 28px));max-height:calc(100dvh - 28px);border-radius:20px} body[data-ui-theme=sticker-club] #motifDialog[open]{display:flex;flex-direction:column;gap:0;overflow:auto} body[data-ui-theme=sticker-club] #motifDialog .motifPreview{position:static;flex:none;width:100%;height:clamp(140px,27dvh,260px)} body[data-ui-theme=sticker-club] #motifDialog .motifPreview img{width:100%;height:100%;object-fit:contain} body[data-ui-theme=sticker-club] #motifDialog .motifInfo{padding:13px 5px 2px;overflow:visible;flex:none} body[data-ui-theme=sticker-club] #motifDialog .motifInfo h2{font-size:23px;margin:6px 0} body[data-ui-theme=sticker-club] #motifDialog .pieceChoices{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} body[data-ui-theme=sticker-club] #motifDialog .pieceChoices button{font-size:9px;min-height:62px;border-radius:12px} body[data-ui-theme=sticker-club] #motifDialog .pieceChoices strong{font-size:20px} } @media(max-height:740px) and (max-width:700px){ .scLobbyHeading{min-height:24px}.scLobbyHeading h1{font-size:21px} body[data-ui-theme=sticker-club] #screen-home .galleryWrap{gap:8px} .scLobbySide{max-height:100px} body[data-ui-theme=sticker-club] #screen-home .lobbyHero .achievementGoalNote{display:none} body[data-ui-theme=sticker-club] #screen-home .dailyInvitation{display:none} body[data-ui-theme=sticker-club] #screen-home .continuePanel{padding:8px} body[data-ui-theme=sticker-club] #screen-library .galleryWrap{gap:6px} body[data-ui-theme=sticker-club] #screen-library .libraryDeckHead{display:none} } @media(max-width:360px){body[data-ui-theme=sticker-club] .brandLogo{width:92px}body[data-ui-theme=sticker-club] .topActions{gap:6px}body[data-ui-theme=sticker-club] .headerCoins{font-size:14px;padding-right:8px;gap:5px}body[data-ui-theme=sticker-club] #screen-home #lobbyStart{font-size:12px;padding:10px}body[data-ui-theme=sticker-club] #screen-home #lobbyPictureTitle{font-size:17px}} @media(max-height:500px){ body[data-ui-theme=sticker-club] .topbar{height:54px} body[data-ui-theme=sticker-club] .topbar .nav{height:62px;padding-top:4px;padding-bottom:4px} body[data-ui-theme=sticker-club] .navBtn{min-height:52px} body[data-ui-theme=sticker-club] .app>main{margin-bottom:62px} body[data-ui-theme=sticker-club] #screen-home .galleryWrap{gap:6px;padding-top:2px;padding-bottom:8px} body[data-ui-theme=sticker-club] #screen-home .scLobbyHeading{display:none} body[data-ui-theme=sticker-club] #screen-home .lobbyHero{grid-template-columns:minmax(0,1.3fr) minmax(220px,1fr);grid-template-rows:minmax(0,1fr);gap:14px} body[data-ui-theme=sticker-club] #screen-home .scLobbySide{max-height:none} body[data-ui-theme=sticker-club] #screen-home .playAlternatives>header{display:none} body[data-ui-theme=sticker-club] #screen-home .playOtherCard{height:58px;grid-template-columns:56px 1fr} body[data-ui-theme=sticker-club] #screen-home .playOtherCard img{width:56px;height:46px} body[data-ui-theme=sticker-club] #screen-library .galleryWrap{padding-top:4px;gap:4px} body[data-ui-theme=sticker-club] #screen-library .galleryHeading{display:none} body[data-ui-theme=sticker-club] #screen-library .libraryDeckHead{display:none} body[data-ui-theme=sticker-club] #screen-library .mobileTabs{position:absolute;right:14px;top:4px;min-height:44px;z-index:2} body[data-ui-theme=sticker-club] #screen-library .libraryDeck{padding-right:230px} body[data-ui-theme=sticker-club] #motifDialog[open]{display:grid;grid-template-columns:1fr 1fr;gap:12px} body[data-ui-theme=sticker-club] #motifDialog .motifPreview{height:auto;position:sticky;top:0} body[data-ui-theme=sticker-club] #motifDialog .pieceChoices{grid-template-columns:repeat(5,1fr)} body[data-ui-theme=sticker-club] #motifDialog .motifInfo{padding-top:20px} } @media(prefers-reduced-motion:reduce){.scButton,body[data-ui-theme=sticker-club] :is(.topbar,#screen-home,#screen-library,#motifDialog) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}} html.reduced-motion body[data-ui-theme=sticker-club] :is(.topbar,#screen-home,#screen-library,#motifDialog) *{animation:none!important;transition:none!important;scroll-behavior:auto!important} /* SC4–SC6. Presentation only: personal photos, floating tools and result receipts. */ body[data-ui-theme=sticker-club] :is(.personalEditor,.personalBackupDialog,.personalDeleteDialog,.leaderDialog){color:var(--sc-ink);background:var(--sc-paper);border:1px solid #cdbbca;border-radius:18px;box-shadow:0 6px 0 #ddcfc3,0 22px 70px #30204f40;max-width:calc(100vw - 24px);padding:22px;box-sizing:border-box} body[data-ui-theme=sticker-club] :is(.personalEditor,.personalBackupDialog,.personalDeleteDialog,.leaderDialog)::backdrop{background:#30263a99;backdrop-filter:none} body[data-ui-theme=sticker-club] :where(.personalEditor,.personalBackupDialog,.personalDeleteDialog,.leaderDialog,#screen-complete,#playToolsPanel,#abandonBack) :is(.softBtn,.primaryBtn){min-height:48px;font-weight:900;font-family:inherit;line-height:1.2;border-radius:14px;padding:10px 16px;color:var(--sc-ink);border:1px solid #cdbdca;background:linear-gradient(#fffefa,#f1e6db);box-shadow:inset 0 2px #fff,0 3px 0 #cdbdaf;transition:translate var(--sc-press),box-shadow var(--sc-press)} body[data-ui-theme=sticker-club] :is(.personalEditor,.personalBackupDialog,#screen-complete) .primaryBtn{color:white;background:linear-gradient(#a74dff,#7e2bdf 60%,#7021cf);border-color:#6126ac;box-shadow:inset 0 2px #d5a6ff,0 3px 0 #49138f} body[data-ui-theme=sticker-club] :where(.personalEditor,.personalBackupDialog,.personalDeleteDialog,.leaderDialog,#screen-complete,#playToolsPanel,#abandonBack) button:active:not(:disabled){translate:0 2px} body[data-ui-theme=sticker-club] :where(.personalEditor,.personalBackupDialog,.personalDeleteDialog,.leaderDialog,#screen-complete,#playToolsPanel,#abandonBack) button:disabled{opacity:.5;cursor:default;translate:none} body[data-ui-theme=sticker-club] :where(.personalEditor,.personalBackupDialog,.personalDeleteDialog,.leaderDialog,#screen-complete,#playToolsPanel,#abandonBack) :is(button,input,select,summary):focus-visible{outline:3px solid #7440b4;outline-offset:3px} .scDialogHead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex:none;padding:0 0 16px;border-bottom:1px solid #dccbd5;min-width:0} .scDialogHead h2{font:900 clamp(21px,3vw,28px)/1.15 Nunito,sans-serif;color:var(--sc-ink);margin:4px 0;overflow-wrap:anywhere} .scDialogHead small{color:var(--sc-muted);font-size:12px} body[data-ui-theme=sticker-club] .scDialogHead .iconBtn{display:grid;place-items:center;flex:none;float:none;width:48px;height:48px;margin:0;padding:0;border:1px solid #d7c7d2;background:#f7eee4;color:var(--sc-ink);border-radius:50%;box-shadow:0 3px 0 #d6c5b8;font-size:24px} .scDialogFoot{display:flex;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid #dccbd5;flex:none;min-width:0} .scDialogFoot>button{flex:1;min-width:0} /* Personal pictures are photo prints. The local-only storage notice remains visible. */ body[data-ui-theme=sticker-club] .personalHeading h2{font:900 26px/1.15 Nunito,sans-serif;margin:12px 0 5px;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .personalHeading p{margin:0;color:var(--sc-muted);font-size:13px} body[data-ui-theme=sticker-club] #personalStorageStatus{font-size:12px;line-height:1.45;max-width:820px;margin:14px 0;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .personalCards{gap:22px;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));margin:18px 0 8px;align-items:start} body[data-ui-theme=sticker-club] .personalCard{padding:12px;border-radius:10px;background:var(--sc-paper);border:1px solid #cfbfcc;box-shadow:0 4px 0 #dfd0c6,0 7px 15px #54355b12;min-width:0} body[data-ui-theme=sticker-club] .personalCard>img{height:170px;border-radius:4px;border:1px solid #e2d5d7} body[data-ui-theme=sticker-club] .personalCard h3{font:900 19px/1.2 Nunito,sans-serif;color:var(--sc-ink);margin:12px 2px} body[data-ui-theme=sticker-club] .personalCard>[data-delete]{font-size:12px;background:none;box-shadow:none;border-color:transparent;color:#9e3b51;padding:8px;min-height:44px} body[data-ui-theme=sticker-club] .personalPuzzleButton{display:flex;align-items:center;text-align:left;gap:10px;min-width:0;padding:8px;font-size:12px;border-radius:8px;background:#e6f1e8;box-shadow:none;border:1px dashed #aac4b4;line-height:1.4} body[data-ui-theme=sticker-club] .personalPuzzleButton img{width:52px;height:42px;object-fit:cover;border-radius:3px;flex:none} body[data-ui-theme=sticker-club] .personalPuzzleButton span{min-width:0;overflow-wrap:anywhere} body[data-ui-theme=sticker-club] .scAddPhoto{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:220px;width:100%;padding:24px;background:#fffaf1;color:var(--sc-ink);border:2px dashed #bca4c8;border-radius:13px;cursor:pointer;font:inherit} .scAddPhoto>span{display:grid;place-items:center;width:64px;height:64px;border-radius:17px;background:#eee1ff;color:#7634be;font-size:40px;transform:rotate(-6deg)} .scAddPhoto strong{font-size:20px;max-width:330px}.scAddPhoto small{color:var(--sc-muted);font-size:13px} body[data-ui-theme=sticker-club] .backupControls{margin:16px 0;padding:14px 0;border-block:1px dashed #cfbfcc;gap:12px} body[data-ui-theme=sticker-club] .backupControls p{color:var(--sc-muted);font-size:12px;line-height:1.4} /* Stable crop editor: only its form scrolls; close/save never move off screen. */ body[data-ui-theme=sticker-club] .personalEditor{width:1000px;height:min(720px,calc(100dvh - 36px));max-height:calc(100dvh - 36px);overflow:hidden} body[data-ui-theme=sticker-club] .personalEditor[open]{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:18px} .personalEditor>.scDialogHead,.personalEditor>.scDialogFoot{grid-column:1/-1} .scCropStage{position:relative;display:grid;place-items:center;grid-template-rows:minmax(0,1fr) auto;min-width:0;min-height:0;padding:12px;gap:12px;border:1px solid #d3c6bf;background:#e9e3da;border-radius:10px;box-shadow:inset 0 1px 6px #47394a12} body[data-ui-theme=sticker-club] .personalEditor canvas{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border:5px solid #fffdf7;border-radius:2px;box-shadow:0 3px 8px #30204f22;box-sizing:border-box} .scCropStage>span{color:#66576e;font-size:12px;text-align:center;line-height:1.3} .scCropForm{overflow:auto;overscroll-behavior:contain;padding:3px 5px 8px;min-width:0;min-height:0} body[data-ui-theme=sticker-club] .personalControls{display:grid;grid-template-columns:1fr;gap:18px;margin:0} body[data-ui-theme=sticker-club] .personalControls label,.scCropPosition label{display:grid;gap:8px;font-size:13px;font-weight:800;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .personalControls :is(input,select){width:100%;min-width:0;min-height:48px;font:800 14px Nunito,sans-serif;color:var(--sc-ink);border:1px solid #cfbfcc;background:#fffaf2;box-shadow:inset 0 2px 3px #54355b09;border-radius:9px;padding:10px} body[data-ui-theme=sticker-club] .personalEditor input[type=range]{accent-color:#8634ed;padding:0;box-shadow:none;border:0;min-height:44px;width:100%} .scCropPosition{margin-top:16px;border-top:1px dashed #cdbdca}.scCropPosition summary{display:flex;align-items:center;min-height:48px;cursor:pointer;font-size:13px;font-weight:900;color:#7336a6;list-style:none}.scCropPosition summary:after{content:'⌄';margin-left:auto}.scCropPosition[open] summary:after{content:'⌃'}.scCropPosition label{margin-bottom:8px} body[data-ui-theme=sticker-club] #personalQuality{font-size:12px;line-height:1.45;color:#865715}#personalQuality:empty,#personalEditorStatus:empty,#backupStatus:empty{display:none} body[data-ui-theme=sticker-club] #personalEditorStatus{font-size:13px;line-height:1.4;color:var(--sc-ink);background:#e7f1e9;padding:10px;border:1px dashed #a5c2ae;border-radius:8px} body[data-ui-theme=sticker-club] .personalBackupDialog{width:760px;max-height:calc(100dvh - 32px);overflow:hidden} body[data-ui-theme=sticker-club] .personalBackupDialog[open]{display:flex;flex-direction:column;gap:14px} .scBackupBody{overflow:auto;overscroll-behavior:contain;min-height:0;padding:0 4px} body[data-ui-theme=sticker-club] .scBackupBody>p{font-size:13px;line-height:1.5;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .backupPicture{padding:14px 0;border-top:1px dashed #cdbdca;min-width:0} body[data-ui-theme=sticker-club] .backupPicture>img{border:4px solid white;border-radius:3px;box-shadow:0 2px 4px #54355b22} body[data-ui-theme=sticker-club] .backupPicture h3{font:900 19px Nunito,sans-serif;color:var(--sc-ink);margin:6px 0} body[data-ui-theme=sticker-club] .backupPicture label{font-size:13px;line-height:1.5;min-height:44px;align-items:center;padding:7px;border-radius:8px} .backupPicture label:has(input:checked){background:#e2f1e5}.backupPicture input{width:22px;height:22px;accent-color:#7f31d5} body[data-ui-theme=sticker-club] .personalDeleteDialog{width:450px;max-height:calc(100dvh - 32px);overflow:auto} body[data-ui-theme=sticker-club] .personalDeleteDialog h2{font:900 26px Nunito,sans-serif;margin:18px 0 8px} body[data-ui-theme=sticker-club] .personalDeleteDialog p{font-size:15px;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .personalDeleteDialog .personalHeading{flex-wrap:nowrap;margin-top:24px} body[data-ui-theme=sticker-club] .personalDeleteDialog .primaryBtn{color:#fff;background:linear-gradient(#cd6678,#ae3e56);border-color:#a03c50;box-shadow:0 3px 0 #853348} /* SC5: small stickers around an unchanged full-screen puzzle table. */ body[data-ui-theme=sticker-club].playing #screen-play .hud{--hud-top:max(14px,env(safe-area-inset-top));--hud-bottom:max(14px,env(safe-area-inset-bottom))} body[data-ui-theme=sticker-club].playing #screen-play .hudActions{top:var(--hud-top);right:var(--hud-right);bottom:auto;left:auto;gap:8px} body[data-ui-theme=sticker-club].playing #screen-play .playTools{top:auto;bottom:var(--hud-bottom)} body[data-ui-theme=sticker-club].playing #screen-play .zoomGroup{left:var(--hud-left);right:auto;bottom:var(--hud-bottom)} .scPlayReceipt{position:absolute;top:calc(var(--hud-top) + 66px);left:var(--hud-left);display:flex;gap:8px;align-items:center;padding:5px 10px;border:1px solid #ffffff8a;border-radius:7px;background:#fff9eae8;color:#4b395a;font:800 11px/1.2 Nunito,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 2px 3px #30204f16;pointer-events:none} .scPlayReceipt span+span{border-left:1px solid #c8b9c9;padding-left:8px} body[data-ui-theme=sticker-club].playing #screen-play .arcadeControl{border-color:#f3e7fa;border-radius:15px} body[data-ui-theme=sticker-club].playing #screen-play #previewBtn{--arcade-edge:#258e82;background:linear-gradient(#65d9c5,#2ba692);box-shadow:inset 0 2px #b8f3e1,0 3px 0 #21786e,0 6px 8px #30204f24;color:white} body[data-ui-theme=sticker-club].playing #screen-play #hintBtn{--arcade-edge:#5924a8;background:linear-gradient(#aa62ff,#8135df);box-shadow:inset 0 2px #ddbcff,0 3px 0 #5924a8,0 6px 8px #30204f24;color:white} body[data-ui-theme=sticker-club].playing #screen-play .playToolsPanel{top:auto;bottom:calc(100% + 12px);width:min(360px,calc(100vw - 24px));max-height:min(660px,calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));padding:16px;gap:8px;background:var(--sc-paper);border:1px solid #cdbbca;border-radius:14px;box-shadow:0 5px 0 #d3c3b4,0 12px 26px #30204f33} body[data-ui-theme=sticker-club].playing .playToolsPanel .scDialogHead{padding-bottom:10px}.playToolsPanel .scDialogHead h2{font-size:21px} body[data-ui-theme=sticker-club].playing #screen-play .playToolsPanel>.hudBtn{border:1px solid #e1d2dc;background:#f7eee4;border-radius:9px;color:var(--sc-ink);box-shadow:0 2px 0 #d8c8ba;min-height:48px;font-size:13px} body[data-ui-theme=sticker-club].playing #screen-play .playToolsPanel>.quietAction{color:#984054;background:none;border-top:1px dashed #d6becb;box-shadow:none;border-radius:0} body[data-ui-theme=sticker-club] .playInfo{padding:4px 0;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .playInfo h2{font-size:18px;margin:3px 0 8px;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #playToolsPanel .playGoal{margin:0;padding:9px;background:#e4f0e7;border:1px dashed #a8c1ae;border-radius:9px} body[data-ui-theme=sticker-club] #playToolsPanel .playGoalSummary{padding:0} body[data-ui-theme=sticker-club] .referenceCard{border:1px solid #cbbac8;border-radius:6px;background:var(--sc-paper);padding:9px;box-shadow:0 5px 0 #d8cabd,0 18px 55px #30204f55} body[data-ui-theme=sticker-club] .referenceImage{border-radius:3px}body[data-ui-theme=sticker-club] .referenceCaption{padding:9px 4px 4px} body[data-ui-theme=sticker-club] .referenceTitle{color:var(--sc-ink);font-weight:900} body[data-ui-theme=sticker-club] .referenceEyebrow,body[data-ui-theme=sticker-club] .referenceHint{color:var(--sc-muted)} body[data-ui-theme=sticker-club] .startCue{background:#fff6dd;border:1px solid #e3b96d;border-radius:12px;box-shadow:0 4px 0 #c8ab7e,0 8px 18px #30204f20;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #abandonBack .confirmModal{width:min(470px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto;background:var(--sc-paper);border:1px solid #cfbfcc;border-radius:16px;box-shadow:0 5px 0 #d9cabc,0 20px 60px #30204f44} body[data-ui-theme=sticker-club] #abandonBack .confirmIcon{display:none} body[data-ui-theme=sticker-club] #abandonBack .confirmBody{display:block}body[data-ui-theme=sticker-club] #abandonBack .confirmSub{line-height:1.5} body[data-ui-theme=sticker-club] #abandonBack .confirmLead{font-size:17px;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #abandonBack .confirmActions{gap:12px;flex-wrap:wrap} body[data-ui-theme=sticker-club] #abandonCancelBtn{background:linear-gradient(#a74dff,#7e2bdf);color:#fff;border-color:#6c2caf;box-shadow:0 3px 0 #49138f} body[data-ui-theme=sticker-club] #abandonConfirmBtn{min-height:48px;text-transform:none;letter-spacing:0;padding:12px 16px;background:#f9e7e9;color:#96384f;border:1px solid #d5a6b3;border-radius:14px;box-shadow:0 3px 0 #caa4ae} /* SC6: one focused result, one inner detail area, always-reachable next action. */ body[data-ui-theme=sticker-club]:has(#screen-complete.active) .topbar{display:none} body[data-ui-theme=sticker-club]:has(#screen-complete.active) .app>main{margin-bottom:0} body[data-ui-theme=sticker-club] #screen-complete .completeWrap{height:100%;min-height:0;overflow:hidden;display:grid;place-items:center;padding:max(22px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));background:radial-gradient(ellipse at 15% 25%,#f8e4bf66,transparent 60%),var(--sc-cream)} body[data-ui-theme=sticker-club] #screen-complete .completeCard{width:min(1050px,100%);height:min(780px,100%);max-height:100%;display:grid;grid-template-columns:minmax(210px,.85fr) minmax(0,1.2fr);gap:24px;padding:24px;border-radius:15px;border:1px solid #d1bfcc;background:var(--sc-paper);box-shadow:0 5px 0 #dfd1c5,0 12px 35px #54355b16;overflow:hidden;min-width:0;min-height:0} body[data-ui-theme=sticker-club] #screen-complete .completeImage{position:relative;grid-area:1/1;align-self:center;height:auto;min-height:0;width:100%;aspect-ratio:var(--sc-result-ratio,4/3)!important;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#f4ecdf;border:9px solid white;border-bottom-width:34px;border-radius:5px;box-shadow:0 4px 0 #e2d4c7,0 7px 16px #54355b17;transform:rotate(-2deg)} body[data-ui-theme=sticker-club] #screen-complete .completeImage:before{content:'';position:absolute;top:-17px;left:calc(50% - 40px);width:80px;height:22px;background:#ffe3a9b5;transform:rotate(4deg);clip-path:polygon(2% 0,100% 4%,98% 100%,0 94%)} body[data-ui-theme=sticker-club] #screen-complete .completeImage:after{display:none} body[data-ui-theme=sticker-club] #screen-complete .completeBody{grid-area:1/2;display:flex;flex-direction:column;gap:12px;padding:0;height:100%;min-height:0;min-width:0} .scResultHeading{flex:none;text-align:left;min-width:0}.scResultHeading .scTape{font-size:11px;letter-spacing:.05em} body[data-ui-theme=sticker-club] #screen-complete .completeBody h1{font:900 clamp(23px,3vw,31px)/1.15 Nunito,sans-serif;color:var(--sc-ink);margin:12px 0 0;overflow-wrap:anywhere} .scResultScroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 5px 6px 0;scrollbar-width:thin} body[data-ui-theme=sticker-club] #screen-complete .resultGrid{grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 14px} body[data-ui-theme=sticker-club] #screen-complete .resultBox{padding:10px 12px;background:#f2e7ff;border:1px dashed #c6adde;border-radius:9px;text-align:left} body[data-ui-theme=sticker-club] #screen-complete .resultBox:nth-child(2){background:#e4f1e7;border-color:#aac7b4} body[data-ui-theme=sticker-club] #screen-complete .resultBox small{color:var(--sc-muted);font-size:12px} body[data-ui-theme=sticker-club] #screen-complete .resultBox b{font:900 25px/1.3 Nunito,sans-serif;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-complete .rankResult{margin:10px 0;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-complete .resultSaveStatus{color:#506652;font-size:12px;font-weight:800;margin:6px 0 10px} body[data-ui-theme=sticker-club] #screen-complete .resultEarned{padding:12px;border:1px dashed #c5b0dc;border-radius:10px;background:#f4eaff} body[data-ui-theme=sticker-club] #screen-complete .resultEarned h3{font-size:15px;margin:0 0 8px} body[data-ui-theme=sticker-club] #screen-complete .resultRewardAmount{background:none;border:0;box-shadow:none;padding:0;text-align:left;min-width:0} body[data-ui-theme=sticker-club] #screen-complete .resultCurrency{color:#7331b1;background:#e0c7ff;border-color:#c0a4d5} body[data-ui-theme=sticker-club] #screen-complete .resultCoins:before{display:none} body[data-ui-theme=sticker-club] #screen-complete .resultCoins .resultCurrency{color:#98600c;background:#ffdc74;border-color:#d7a12d} body[data-ui-theme=sticker-club] #screen-complete .resultXpSymbol{font-size:12px;font-weight:900}body[data-ui-theme=sticker-club] #screen-complete .resultCoinSymbol{width:32px;height:32px;object-fit:contain;background:none;border:0;border-radius:0;box-shadow:none} body[data-ui-theme=sticker-club] #screen-complete :is(.resultDiscoveries,.resultRanking){border:1px solid #d9c8d5;background:#fffaf2;border-radius:9px;box-shadow:none} body[data-ui-theme=sticker-club] #screen-complete :is(.resultDiscoveries,.resultRanking)>summary{min-height:48px;padding:12px;font-size:13px;color:var(--sc-ink);font-weight:900} body[data-ui-theme=sticker-club] #screen-complete #resultAchievementGoal{padding:12px;margin:12px 0;background:#e4f1e7;border:1px dashed #a4c4af;border-radius:10px} body[data-ui-theme=sticker-club] #screen-complete .resultAlbum{background:#fff3cf;border:1px dashed #d5bb72;border-radius:10px} body[data-ui-theme=sticker-club] #screen-complete .completeActions{position:static;display:flex;flex:none;flex-wrap:wrap;gap:10px;margin:0;padding:12px 0 2px;border-top:1px solid #dccccf;background:var(--sc-paper)} body[data-ui-theme=sticker-club] #screen-complete .nextPuzzleCard{order:-1;flex-basis:100%;min-height:82px;margin:0;padding:10px 14px;border-radius:13px;animation:none;transform:none;min-width:0} body[data-ui-theme=sticker-club] #screen-complete .nextPuzzleCard:before,body[data-ui-theme=sticker-club] #screen-complete .nextPuzzleCard:after{display:none} body[data-ui-theme=sticker-club] #screen-complete .nextPuzzleThumb{width:60px;height:49px;border:3px solid #ffffffb0;border-radius:4px;transform:rotate(-3deg)} body[data-ui-theme=sticker-club] #screen-complete .nextPuzzleCopy{text-align:left;min-width:0}.nextPuzzleCopy small{font-size:9px} body[data-ui-theme=sticker-club] #screen-complete :is(#completeHomeBtn,#replayPuzzle){flex:1;font-size:13px;min-width:0} body[data-ui-theme=sticker-club] #screen-complete .nextPuzzleStatus{flex:none;margin:0;font-size:12px;line-height:1.3}.nextPuzzleStatus:empty{display:none} /* Rankings keep their actual period, version, assistance and own-position rules. */ body[data-ui-theme=sticker-club] .leaderDialog{width:760px;height:min(800px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);overflow:hidden} body[data-ui-theme=sticker-club] .leaderDialog[open]{display:flex;flex-direction:column;gap:12px} body[data-ui-theme=sticker-club] .leaderDialog #leaderTitle{color:var(--sc-ink);font:900 24px/1.2 Nunito,sans-serif;margin:10px 0 0} body[data-ui-theme=sticker-club] .leaderDialog #fullBoard{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 5px 8px 0;scrollbar-width:thin} body[data-ui-theme=sticker-club] .leaderDialog .boardSubtitle{margin:2px 0 14px;font-size:13px;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .leaderDialog .boardPeriods{gap:7px;margin:10px 0} body[data-ui-theme=sticker-club] .leaderDialog .boardPeriods button{font-size:12px;padding:9px 12px;flex:1} body[data-ui-theme=sticker-club] .leaderDialog .boardPeriods button[aria-pressed=true]{color:white;background:#8434dc;border-color:#6f2ab5;box-shadow:0 3px 0 #5821ae} body[data-ui-theme=sticker-club] .leaderDialog .puzzlerList{display:grid;gap:9px} body[data-ui-theme=sticker-club] .leaderDialog .puzzlerCard{border:1px solid #e0d1d9;background:#fffaf2;box-shadow:none;border-radius:9px;padding:12px;min-width:0} body[data-ui-theme=sticker-club] .leaderDialog .puzzlerCard.isYou{background:#e0f1e6;border:1px dashed #8bb39a} body[data-ui-theme=sticker-club] .leaderDialog .puzzlerIdentity strong{font-size:14px;color:var(--sc-ink);overflow-wrap:anywhere}.leaderDialog .puzzlerScore strong{font-variant-numeric:tabular-nums} body[data-ui-theme=sticker-club] .leaderDialog .boardOwnCard{width:100%;min-height:48px;background:#e0f1e6;color:#355945;border:1px dashed #91b49d;border-radius:9px;padding:12px;font-weight:900;margin-top:10px} body[data-ui-theme=sticker-club] .leaderDialog .boardBest{color:#526e5b!important} @media(max-width:700px){ body[data-ui-theme=sticker-club] .personalCards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px} body[data-ui-theme=sticker-club] .personalLibrary>.personalHeading{align-items:flex-start;gap:14px} body[data-ui-theme=sticker-club] .personalHeading .scTape{font-size:11px} body[data-ui-theme=sticker-club] .personalEditor{width:600px;height:min(880px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);padding:16px} body[data-ui-theme=sticker-club] .personalEditor[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(130px,.95fr) minmax(155px,1fr) auto;gap:12px} .personalEditor>.scDialogHead,.personalEditor>.scDialogFoot{grid-column:1} .scDialogHead{padding-bottom:10px;gap:10px}.scDialogHead h2{font-size:22px}.scDialogHead small{font-size:11px} .scDialogFoot{padding-top:10px;gap:10px} body[data-ui-theme=sticker-club] .personalControls{grid-template-columns:1fr 1fr;gap:12px}.scCropZoom{grid-column:1/-1} body[data-ui-theme=sticker-club] .personalControls :is(input,select){padding:8px;font-size:13px} body[data-ui-theme=sticker-club] :is(.personalBackupDialog,.personalDeleteDialog,.leaderDialog){padding:16px} body[data-ui-theme=sticker-club].playing #screen-play .hudActions .hudLabel{display:none} body[data-ui-theme=sticker-club].playing #screen-play .hudActions .arcadeControl{min-width:48px;padding:0 10px} .scPlayReceipt{top:calc(var(--hud-top) + 57px);font-size:10px;padding:4px 8px;gap:7px} body[data-ui-theme=sticker-club].playing #screen-play .playToolsPanel{padding:14px;width:min(350px,calc(100vw - 24px));max-height:calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom))} body[data-ui-theme=sticker-club] #screen-complete .completeWrap{padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))} body[data-ui-theme=sticker-club] #screen-complete .completeCard{height:100%;width:100%;display:flex;flex-direction:column;gap:16px;padding:16px;border-radius:12px} body[data-ui-theme=sticker-club] #screen-complete .completeImage{flex:none;align-self:center;height:clamp(100px,20dvh,180px);width:90%;border-width:6px;border-bottom-width:18px;transform:rotate(-1deg)} body[data-ui-theme=sticker-club] #screen-complete .completeBody{height:auto;flex:1;gap:10px} body[data-ui-theme=sticker-club] #screen-complete .completeBody h1{font-size:23px;margin-top:7px} body[data-ui-theme=sticker-club] #screen-complete .resultBox b{font-size:22px} body[data-ui-theme=sticker-club] #screen-complete .nextPuzzleCard{min-height:72px;font-size:13px;padding:8px 12px} body[data-ui-theme=sticker-club] .leaderDialog .boardPeriods button{padding-inline:8px;font-size:11px} } @media(max-height:560px){ body[data-ui-theme=sticker-club] .personalEditor[open]{grid-template-columns:minmax(0,1fr) minmax(210px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:10px} .personalEditor>.scDialogHead,.personalEditor>.scDialogFoot{grid-column:1/-1} body[data-ui-theme=sticker-club] #screen-complete .completeCard{display:grid;grid-template-columns:minmax(130px,.6fr) minmax(0,1fr);padding:14px;gap:18px} body[data-ui-theme=sticker-club] #screen-complete .completeImage{grid-area:1/1;height:80%;width:100%;min-height:0} body[data-ui-theme=sticker-club] #screen-complete .completeBody{grid-area:1/2;height:100%;gap:6px} body[data-ui-theme=sticker-club] #screen-complete .completeBody h1{font-size:20px;margin-top:4px} body[data-ui-theme=sticker-club] #screen-complete .nextPuzzleCard{min-height:60px} body[data-ui-theme=sticker-club] #screen-complete .completeActions{gap:7px;padding-top:7px} } @media(prefers-reduced-motion:reduce){body[data-ui-theme=sticker-club] :is(.personalEditor,.personalBackupDialog,.leaderDialog,#screen-complete,#playToolsPanel) *{animation:none!important;transition:none!important}} html.reduced-motion body[data-ui-theme=sticker-club] :is(.personalEditor,.personalBackupDialog,.leaderDialog,#screen-complete,#playToolsPanel) *{animation:none!important;transition:none!important} /* SC7–SC9: Progress is a collection of tickets, stickers and photo books. Presentation only. No world geometry, reward rules or continuous animations. */ body[data-ui-theme=sticker-club] .progressWrap{max-width:1120px;padding:12px 30px 18px;gap:12px;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .progressHeader{min-height:44px} body[data-ui-theme=sticker-club] .progressHeader .eyebrow{font-size:10px;color:var(--sc-muted);letter-spacing:.13em} body[data-ui-theme=sticker-club] .progressHeader h1{font:900 30px/1.1 Nunito,sans-serif;letter-spacing:-.025em} body[data-ui-theme=sticker-club] :where(.progressWrap,.achievementDialog,.medalReveal) :where(.softBtn,.primaryBtn,.achievementTabs button,.achievementDisplay button,.achievementFamily button){min-height:48px;min-width:44px;padding:10px 16px;border:1px solid #cbbace;border-radius:16px;background:var(--sc-paper);box-shadow:inset 0 2px 0 #fff,0 3px 0 #d8c6d7;color:var(--sc-ink);font:900 14px/1.2 Nunito,sans-serif;cursor:pointer;transition:transform var(--sc-press),box-shadow var(--sc-press)} body[data-ui-theme=sticker-club] :where(.progressWrap,.achievementDialog,.medalReveal) :where(.softBtn,.primaryBtn):active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 0 #fff,0 1px 0 #c8b4cc} body[data-ui-theme=sticker-club] :where(.progressWrap,.achievementDialog,.medalReveal) .primaryBtn{background:linear-gradient(#9946f3,#7c2edc);border-color:#6923bc;box-shadow:inset 0 2px 0 #ffffff50,0 4px 0 #5821a3;color:#fff} body[data-ui-theme=sticker-club] :where(.progressWrap,.achievementDialog,.medalReveal) button:disabled{opacity:.5;cursor:default;transform:none} body[data-ui-theme=sticker-club] :where(.progressWrap,.achievementDialog,.medalReveal) button:focus-visible{outline:3px solid #6723b3;outline-offset:3px} body[data-ui-theme=sticker-club] .progressRefresh{width:48px;padding:8px;border-radius:50%} body[data-ui-theme=sticker-club] .progressTabs{gap:8px;padding:4px 2px 7px;border-bottom:1px dashed #cdb9c8} body[data-ui-theme=sticker-club] .progressTabs .softBtn{flex:1;max-width:190px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:9px 13px;font-size:14px;border-radius:16px 16px 12px 12px} body[data-ui-theme=sticker-club] :where(.progressTabs,.progressAlbumTabs,.goalTabs,.achievementTabs,.achievementDisplay) :is([aria-selected=true],[aria-pressed=true]){background:linear-gradient(#9946f3,#7c2edc);border-color:#6923bc;box-shadow:inset 0 2px 0 #ffffff50,0 3px 0 #5821a3;color:#fff} body[data-ui-theme=sticker-club] .progressTabs .progressSymbol{width:23px;height:23px} body[data-ui-theme=sticker-club] .progressPanel{gap:12px} body[data-ui-theme=sticker-club] .progressOverview{width:100%;max-width:940px;margin:auto;gap:18px;padding:6px 5px 12px;justify-content:center;scrollbar-width:thin} .scProgressWelcome{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px} .scProgressWelcome strong{font:900 20px/1.15 Nunito,sans-serif} .scProgressWelcome p{font-size:13px;color:var(--sc-muted);margin:0} body[data-ui-theme=sticker-club] .progressStats{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px} body[data-ui-theme=sticker-club] .progressStats .playerJourney{position:relative;padding:18px 20px;border:1px solid #d5c6d7;border-radius:12px;background:var(--sc-paper);box-shadow:3px 4px 0 #e5d8d0;gap:14px;transform:rotate(-.4deg)} body[data-ui-theme=sticker-club] .progressStats .journeyMascot{width:66px;height:66px;object-fit:contain} body[data-ui-theme=sticker-club] .progressStats .journeyLevel{width:44px;height:44px;font-size:22px;border-radius:15px;transform:rotate(-5deg);background:linear-gradient(#a759ef,#7c35c6);box-shadow:0 3px 0 #603095} body[data-ui-theme=sticker-club] .progressStats .journeyCopy{gap:4px} body[data-ui-theme=sticker-club] .progressStats .journeyCopy strong{font-size:19px;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .progressStats .journeyCopy .eyebrow{font-size:10px;color:#6c4c8c} body[data-ui-theme=sticker-club] .progressStats .journeyTrack{height:8px;box-shadow:none;background:#e8ddef;margin:2px 0} body[data-ui-theme=sticker-club] .progressStats .journeyFill{background:linear-gradient(90deg,#aa68ec,#8536db);box-shadow:none} body[data-ui-theme=sticker-club] .progressStats .journeyFill i{display:none} body[data-ui-theme=sticker-club] .progressStats .journeyCopy small{font-size:12px;color:#614975} body[data-ui-theme=sticker-club] .progressStats .journeyCopy .scLevelHelp{font-size:11px;font-weight:600;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .progressStats .playerStreak{align-items:center;justify-content:center;gap:12px;padding:16px;border:2px dashed #cfaa64;border-radius:22px 15px 24px 14px;background:#fff0c7;box-shadow:none;transform:rotate(1deg)} body[data-ui-theme=sticker-club] .progressStats .playerStreak>span{color:#d58c19;font-size:34px} body[data-ui-theme=sticker-club] .progressStats .playerStreak strong{font-size:17px;color:#654613} body[data-ui-theme=sticker-club] .progressStats .playerStreak :is(small,.eyebrow){color:#755a2b;font-size:11px} body[data-ui-theme=sticker-club] .progressNext{position:relative;grid-template-columns:72px minmax(0,1fr) auto;gap:6px 16px;padding:18px 22px;background:var(--sc-mint);border:1px dashed #95b5a4;border-radius:10px;box-shadow:0 4px 0 #cdddd0} body[data-ui-theme=sticker-club] .progressNext[data-kind=missions]{background:#e2f2ec} body[data-ui-theme=sticker-club] .progressNext>.scNextArt{grid-column:1;grid-row:1/4;width:72px;height:72px;object-fit:contain} body[data-ui-theme=sticker-club] .progressNext:has(.scNextArt)>.progressNextIcon{display:none} body[data-ui-theme=sticker-club] .progressNext>.eyebrow{grid-row:1;font-size:10px;letter-spacing:.1em;color:#486953} body[data-ui-theme=sticker-club] .progressNext>strong{font:900 21px/1.15 Nunito,sans-serif} body[data-ui-theme=sticker-club] .progressNext>.progressNextCount{font-size:13px;color:#435c4b} body[data-ui-theme=sticker-club] .progressNext>.progressBadge{font-size:10px} body[data-ui-theme=sticker-club] .progressNext>.softBtn{grid-column:3;grid-row:2/4;justify-self:end;margin:0} body[data-ui-theme=sticker-club] .progressLinks{gap:20px;padding:5px 0} body[data-ui-theme=sticker-club] .progressDoor{position:relative;min-height:114px;padding:17px 15px;gap:5px 12px;border:1px solid #d9c8db;border-radius:13px;background:var(--sc-paper);box-shadow:0 4px 0 #dfd1db;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .progressDoor:after{content:'→';grid-column:3;grid-row:1/3;align-self:center;font-size:23px;color:#8151aa} body[data-ui-theme=sticker-club] .progressDoor[data-kind=medals]{transform:rotate(-1deg)} body[data-ui-theme=sticker-club] .progressDoor[data-kind=missions]{background:#eaf5ee;border-style:dashed;border-color:#b1ccbb} body[data-ui-theme=sticker-club] .progressDoor[data-kind=albums]{background:#fff3d6;border-color:#d8bd88;transform:rotate(1deg)} body[data-ui-theme=sticker-club] .progressDoorIcon{width:42px;height:42px;padding:8px;background:#f0e5ff;color:#8534cb;border-radius:17px;box-sizing:content-box} body[data-ui-theme=sticker-club] .progressDoor[data-kind=missions] .progressDoorIcon{background:#d1e9db;color:#32775b;border-radius:12px} body[data-ui-theme=sticker-club] .progressDoor[data-kind=albums] .progressDoorIcon{background:#f5dfb0;color:#96601b;border-radius:8px} body[data-ui-theme=sticker-club] .progressDoor strong{font-size:19px} body[data-ui-theme=sticker-club] .progressDoor small{font-size:12px;color:#665273} body[data-ui-theme=sticker-club] .progressBadge{border-radius:8px;font-size:11px;line-height:1.25;padding:5px 8px;box-shadow:none} body[data-ui-theme=sticker-club] .progressBadge[data-state=reward]{background:#fff0c1;border-color:#d9b861;color:#70440e} /* A mission is a perforated, mint paper ticket, with a separate reward tear-off. */ body[data-ui-theme=sticker-club] .missionsPanel{max-width:760px;gap:10px;padding:3px 5px 6px} body[data-ui-theme=sticker-club] .missionsPanel>header{gap:7px;min-height:24px} body[data-ui-theme=sticker-club] .missionsPanel h2{font-size:18px} body[data-ui-theme=sticker-club] .missionsPanel .goalIntro{font-size:12px;line-height:1.35;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .goalTabs{padding:0;background:none;border-radius:0;gap:10px} body[data-ui-theme=sticker-club] .goalTabs button{flex:1} body[data-ui-theme=sticker-club] .missionsPanel .goalContent{padding:12px 5px 9px;display:flex;align-items:center;flex-direction:column;scrollbar-width:thin} body[data-ui-theme=sticker-club] .missionsPanel .goalCard{box-sizing:border-box;position:relative;width:100%;max-width:700px;display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px 18px;padding:26px;border:1px dashed #9bb8a6;border-radius:12px;background:#e4f1e8;box-shadow:0 5px 0 #cadfd0;text-align:left;overflow:visible} body[data-ui-theme=sticker-club] .missionsPanel .goalCard:before{content:'';position:absolute;left:16px;right:16px;top:-7px;height:13px;background:radial-gradient(circle at 6px 6px,var(--sc-cream) 3px,transparent 3.6px) 0 0/18px 13px repeat-x;pointer-events:none} body[data-ui-theme=sticker-club] .missionsPanel .goalCard[data-period=weekly]{background:#fff0dc;border-color:#d1b591;box-shadow:0 5px 0 #e7d4bc} body[data-ui-theme=sticker-club] .missionsPanel .goalCard>.bitmapArt{grid-column:1;grid-row:1/5;align-self:center;width:76px;height:76px} body[data-ui-theme=sticker-club] .missionsPanel .goalCard>h3{font:900 27px/1.1 Nunito,sans-serif;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .missionsPanel .goalCard>.eyebrow{font-size:10px;color:#4a6b54} body[data-ui-theme=sticker-club] .missionsPanel .goalDescription{font-size:15px;color:#4d6054} body[data-ui-theme=sticker-club] .missionsPanel .goalTrack{height:9px;background:#c8dfd0;box-shadow:none;margin:5px 0 0} body[data-ui-theme=sticker-club] .missionsPanel .goalFill{background:linear-gradient(90deg,#82cda7,#4f9d78)} body[data-ui-theme=sticker-club] .missionsPanel .goalProgress{font-size:14px;color:#45614e} body[data-ui-theme=sticker-club] .missionsPanel .goalPrize{padding:7px 10px;border-radius:8px;background:#fff4d7;border-color:#d8b979;font-size:12px} body[data-ui-theme=sticker-club] .missionsPanel .goalActions{padding-top:14px;border-top:1px dashed #a8bba8;gap:9px} body[data-ui-theme=sticker-club] .missionsPanel .goalActions .primaryBtn{min-height:48px} body[data-ui-theme=sticker-club] .missionsPanel .goalActions .primaryBtn[data-goal-action=claim],body[data-ui-theme=sticker-club] .achievementDialog .achievementClaim{background:linear-gradient(#ffe18a,#ffc64d);border-color:#c8902c;box-shadow:inset 0 2px 0 #fff5c4,0 4px 0 #bd8522;color:#583713} body[data-ui-theme=sticker-club] .missionsPanel .goalDone{color:#45614e;font-size:13px} body[data-ui-theme=sticker-club] .missionsPanel .goalRule{font-size:11px;color:#596d5c} body[data-ui-theme=sticker-club] .missionsPanel .goalRelax{font-size:12px;min-height:44px;padding:8px 13px;box-shadow:0 2px 0 #d8c6d7} /* Unique medal illustrations sit on an open collector's sheet, not dashboard tiles. */ body[data-ui-theme=sticker-club] .progressCabinet .achievementsWrap{gap:9px;padding:0 5px 5px} body[data-ui-theme=sticker-club] .progressCabinet .achievementsHero{min-height:52px;padding:3px 0;border:0;background:none;box-shadow:none;gap:9px} body[data-ui-theme=sticker-club] .progressCabinet .achievementsHeroArt{width:42px;height:42px} body[data-ui-theme=sticker-club] .progressCabinet .achievementsHero h1{font-size:22px;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .progressCabinet .achievementsHero p{font-size:12px;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .progressCabinet .achievementRefresh{min-width:44px;min-height:44px;width:44px;padding:6px;border-radius:50%} body[data-ui-theme=sticker-club] .progressCabinet .achievementTabs{gap:8px;padding:0;background:none;border:0;box-shadow:none} body[data-ui-theme=sticker-club] .progressCabinet .achievementTabs button{font-size:13px;min-height:44px;padding:8px 15px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTools{gap:10px;min-height:44px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTools>p{color:var(--sc-muted);font-size:12px} body[data-ui-theme=sticker-club] .progressCabinet .achievementDisplay{gap:6px;padding:0;background:none} body[data-ui-theme=sticker-club] .progressCabinet .achievementDisplay button{font-size:12px;min-height:44px;padding:6px 12px} body[data-ui-theme=sticker-club] .progressCabinet .achievementCards{gap:15px;padding:5px;box-sizing:border-box} body[data-ui-theme=sticker-club] .progressCabinet .achievementCard{padding:12px 12px 9px;gap:9px;border:1px dashed #d9c8d5;border-radius:13px;background:#fffdf766;color:var(--sc-ink);box-shadow:none;scrollbar-width:thin} body[data-ui-theme=sticker-club] .progressCabinet .achievementOwned{background:#fffdf7b8;border-color:#c7d5c8} body[data-ui-theme=sticker-club] .progressCabinet .achievementCard:hover:not(:disabled){background:var(--sc-paper);box-shadow:0 4px 0 #e3d6dd} body[data-ui-theme=sticker-club] .progressCabinet .achievementCard strong{font-size:16px;color:var(--sc-ink);line-height:1.2} body[data-ui-theme=sticker-club] .progressCabinet .achievementCard small{font-size:11px;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .progressCabinet .achievementCardCopy{gap:5px;align-items:center} body[data-ui-theme=sticker-club] .progressCabinet .achievementCardCopy .progressBadge{font-size:10px;padding:4px 7px;width:fit-content} body[data-ui-theme=sticker-club] .progressCabinet .achievementArt:has(img){width:104px;height:104px;filter:drop-shadow(0 3px 2px #4f2f6324)} body[data-ui-theme=sticker-club] .progressCabinet .achievementCheck{top:9px;right:9px;width:22px;height:22px;background:#dceede;border-color:#a9c6ad;color:#3b6c47} body[data-ui-theme=sticker-club] .progressCabinet .achievementProgress{width:100%;font-size:12px;color:#684783} body[data-ui-theme=sticker-club] .progressCabinet .achievementCards[data-layout=list] .achievementCardCopy{align-items:start} body[data-ui-theme=sticker-club] .progressCabinet .achievementCards[data-layout=list] .achievementArt:has(img){width:74px;height:74px} body[data-ui-theme=sticker-club] .progressCabinet .achievementPager{padding:2px 0 4px;min-height:48px;gap:12px;border-top:1px dashed #d8c4d3} body[data-ui-theme=sticker-club] .progressCabinet .achievementPager span{font-size:12px;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .progressCabinet .achievementPager button{width:48px;padding:8px} body[data-ui-theme=sticker-club] .progressCabinet .achievementNotice{background:#fff4da;border:1px dashed #d6b97d;border-radius:9px;color:#73521d;font-size:12px;padding:8px 12px} body[data-ui-theme=sticker-club] .progressCabinet .achievementEmpty{width:100%;grid-column:1/-1;border:1px dashed #ccb5d8;border-radius:12px;background:var(--sc-paper);padding:20px;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .progressCabinet .achievementEmpty h2{color:var(--sc-ink)} body[data-ui-theme=sticker-club] .achievementDialog{padding:18px 26px 26px;border:1px solid #c8b2ce;border-radius:17px;background:var(--sc-paper);box-shadow:5px 7px 0 #d8c3cb,0 20px 65px #37244045;color:var(--sc-ink);scrollbar-width:thin} body[data-ui-theme=sticker-club] .achievementDialog::backdrop{background:#34244799} body[data-ui-theme=sticker-club] .achievementDetailClose{position:sticky;float:right;top:0;right:0;z-index:4;width:44px;height:44px;margin:0 0 -44px;background:var(--sc-paper);border:1px solid #d5bfd7;border-radius:50%;box-shadow:0 3px 0 #dfcedc;color:#6e3da1} body[data-ui-theme=sticker-club] .achievementDialog .achievementArtLarge:has(img){width:156px;height:156px;margin:14px auto 15px;filter:drop-shadow(0 5px 3px #48235a22)} body[data-ui-theme=sticker-club] .achievementDialog h2{font-size:29px;line-height:1.15;clear:both} body[data-ui-theme=sticker-club] .achievementDialog>.eyebrow{display:block;font-size:10px;color:#82579e;letter-spacing:.14em} body[data-ui-theme=sticker-club] .achievementDialog .achievementRewardHelp{padding:12px 6px 0;border-top:1px dashed #d6c3ce;font-size:12px;color:var(--sc-muted)} body[data-ui-theme=sticker-club] .achievementDialog .achievementReward{border:1px dashed #d1ad68;border-radius:8px;background:#fff0c7;color:#71501a} body[data-ui-theme=sticker-club] .achievementDialog .achievementDetailPath{padding:9px;border-radius:8px;background:#f0e7f8;font-size:12px} body[data-ui-theme=sticker-club] .achievementTrail{background:none;border:0;box-shadow:none} body[data-ui-theme=sticker-club] .trailIntro{padding:5px 10px;background:none;border-bottom:1px dashed #d0bad4} body[data-ui-theme=sticker-club] .trailHint{color:var(--sc-muted)} body[data-ui-theme=sticker-club] .achievementTrailNode{border:1px dashed #c7acd9;border-radius:16px;background:var(--sc-paper);box-shadow:0 3px 0 #dfcfe8;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .achievementTrailNode.trailEarned{background:#edf5ec;border-color:#a7c4ad;box-shadow:0 3px 0 #cadacb} body[data-ui-theme=sticker-club] .achievementTrailNode.trailFog{background:#eee7f0;border-color:#c6b6ce;box-shadow:none} body[data-ui-theme=sticker-club] .progressCabinet .achievementTrailNode{padding:7px 9px;gap:4px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTrailNode .achievementArt:has(img){width:66px;height:66px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTrailNode .progressBadge{padding:3px 6px;font-size:10px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTrailNode .trailNodeCopy{gap:3px} body[data-ui-theme=sticker-club] .trailLinkBase{stroke:#d8c7df} body[data-ui-theme=sticker-club] .trailLinkNext{stroke:#ac8bc6;stroke-dasharray:3 7} body[data-ui-theme=sticker-club] .trailLinkEarned{stroke:#7fab8a;stroke-dasharray:3 7} /* Albums are paper books. The completed-picture history remains a different collection. */ body[data-ui-theme=sticker-club] .progressAlbumTabs{gap:9px} body[data-ui-theme=sticker-club] .progressAlbumTabs button{min-height:44px;padding:8px 16px;font-size:13px} body[data-ui-theme=sticker-club] .progressPanel .albumContent{max-width:820px;gap:9px;padding:0 5px 8px} body[data-ui-theme=sticker-club] .progressBookPager{justify-content:center;gap:18px;padding:2px} body[data-ui-theme=sticker-club] .progressBookPager button{width:46px;min-height:44px;padding:6px} body[data-ui-theme=sticker-club] .progressBookPager span{color:var(--sc-muted);font:900 12px Nunito,sans-serif} body[data-ui-theme=sticker-club] .progressPanel .albumBook{padding:25px 28px 22px 38px;border:1px solid #d7bf92;border-left:12px solid #b99976;border-radius:8px 18px 18px 8px;background:repeating-linear-gradient(0deg,transparent 0 31px,#e6d4a83b 31px 32px),#fff8e5;box-shadow:5px 5px 0 #e6d1ae,8px 8px 0 #d9bd95;scrollbar-width:thin} body[data-ui-theme=sticker-club] .progressPanel .albumBook h3{font:900 30px/1.15 Nunito,sans-serif;color:var(--sc-ink);margin:8px 0} body[data-ui-theme=sticker-club] .progressPanel .albumBook>p{font-size:13px;line-height:1.4;color:#756044} body[data-ui-theme=sticker-club] .progressPanel .albumBook>.eyebrow{letter-spacing:.1em;font-size:10px;color:#8a672d} body[data-ui-theme=sticker-club] .progressPanel .albumBookIcon{color:#a37a3d;width:36px;height:36px} body[data-ui-theme=sticker-club] .progressPanel .albumPages{gap:18px;padding:8px 3px;margin:14px 0} body[data-ui-theme=sticker-club] .progressPanel .albumPages:has(>.albumSlot:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} body[data-ui-theme=sticker-club] .progressPanel .albumSlot{position:relative;align-self:start;border:1px solid #d1c1b4;border-radius:3px;padding:6px 6px 0;background:#fffdf7;box-shadow:2px 4px 0 #c8b89b50;transform:rotate(-2deg);overflow:visible} body[data-ui-theme=sticker-club] .progressPanel .albumSlot:nth-child(even){transform:rotate(2deg)} body[data-ui-theme=sticker-club] .progressPanel .albumSlot:not(.albumSlotDone) .albumPhoto{opacity:.55;filter:saturate(.5)} body[data-ui-theme=sticker-club] .progressPanel .albumPhoto{height:clamp(80px,19dvh,180px);aspect-ratio:4/3;border-radius:1px} body[data-ui-theme=sticker-club] .progressPanel .albumCheck{width:25px;height:25px;right:4px;top:4px;bottom:auto;border:1px solid #bbad95;box-shadow:0 2px 3px #55412a20;background:#fff9ed;color:#8b7655} body[data-ui-theme=sticker-club] .progressPanel .albumSlotDone .albumCheck{background:#e2f2df;border-color:#a7c4a0;color:#3b6c40} body[data-ui-theme=sticker-club] .progressPanel .albumPictureTitle{padding:10px 2px;font-size:13px;line-height:1.2;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .progressPanel .albumCount{display:block;font-size:13px;margin:8px 0 16px;color:#795b28} body[data-ui-theme=sticker-club] .progressPanel .albumBook>.primaryBtn{width:100%;margin:6px 0} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .achievementCard{background:none;border:0;box-shadow:none} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .pictureBadgeArt{padding:7px;border-radius:3px;border:1px solid #c6b5bf;background:#fffdf7;box-shadow:2px 4px 0 #d3c3cd;transform:rotate(-2deg);filter:none;width:130px;height:106px} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .pictureBadgeArt img{border-radius:0;object-fit:cover} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .pictureBadgeArt{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .pictureBadgeArt img{min-width:0;min-height:0;grid-area:1/1} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .achievementCards:is([data-compact=true],[data-layout=list]) .pictureBadgeArt{width:66px;height:54px;padding:4px} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .achievementCard:nth-child(even) .pictureBadgeArt{transform:rotate(2deg)} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .pictureBadgeSeal{border-radius:50%;background:#e8f3e1;border-color:#adc7a4;color:#3d7044} /* The existing finite reveal gets paper rays and the same collectible presentation. */ body[data-ui-theme=sticker-club] .medalReveal{border:1px solid #cbb4cf;border-radius:18px;background:var(--sc-paper);box-shadow:5px 7px 0 #d6c2cd,0 22px 70px #30204455;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .medalRevealContent{gap:13px} body[data-ui-theme=sticker-club] .medalReveal .eyebrow{align-self:center;font-size:12px;background:#fff0b9;border:1px dashed #d4b569;transform:rotate(-2deg);padding:6px 16px;color:#80501a;letter-spacing:.12em} body[data-ui-theme=sticker-club] .medalRevealStage{height:230px;width:290px;max-width:100%} body[data-ui-theme=sticker-club] .medalRevealRing{width:220px;height:220px;border:0;outline:0;border-radius:0;background:repeating-conic-gradient(from 10deg,#ffdc85 0 9deg,transparent 9deg 30deg);clip-path:polygon(50% 0,59% 20%,75% 7%,77% 28%,93% 25%,84% 44%,100% 50%,80% 59%,93% 75%,72% 77%,75% 93%,56% 84%,50% 100%,41% 80%,25% 93%,23% 72%,7% 75%,16% 56%,0 50%,20% 41%,7% 25%,28% 23%,25% 7%,44% 16%)} body[data-ui-theme=sticker-club] .medalRevealHalo{background:radial-gradient(ellipse,#ffecb7,transparent 70%)} body[data-ui-theme=sticker-club] .medalRevealStage .medalRevealArt{width:208px;height:208px} body[data-ui-theme=sticker-club] .medalReveal h2{font-size:30px;color:var(--sc-ink)} body[data-ui-theme=sticker-club] .medalRevealReward{border:1px dashed #bba3d3;border-radius:9px;background:#f0e6fb;font-size:12px;color:#68428b;padding:11px} body[data-ui-theme=sticker-club] .medalRevealDescription{color:var(--sc-muted);font-size:13px} body[data-ui-theme=sticker-club] .medalRevealItem{padding:10px;border:1px dashed #d4c1cf;border-radius:9px;background:#fff8ec} body[data-ui-theme=sticker-club] .medalRevealItem small{color:#715b7d} body[data-ui-theme=sticker-club] .medalRevealActions{padding-top:12px;border-top:1px dashed #d0bacb} @media(max-width:700px){ body[data-ui-theme=sticker-club] .progressWrap{padding:7px 12px 10px;gap:8px} body[data-ui-theme=sticker-club] .progressHeader{min-height:34px} body[data-ui-theme=sticker-club] .progressHeader h1{font-size:25px} body[data-ui-theme=sticker-club] .progressHeader .eyebrow{display:none} body[data-ui-theme=sticker-club] .progressRefresh{min-height:44px;width:44px} body[data-ui-theme=sticker-club] .progressTabs{gap:6px;padding-top:0} body[data-ui-theme=sticker-club] .progressTabs .softBtn{flex-direction:column;gap:3px;min-height:56px;padding:6px 3px;font-size:11px} body[data-ui-theme=sticker-club] .progressTabs .progressSymbol{width:22px;height:22px} body[data-ui-theme=sticker-club] .progressOverview{justify-content:flex-start;gap:13px;padding:5px 3px 8px} .scProgressWelcome{gap:3px}.scProgressWelcome strong{font-size:17px}.scProgressWelcome p{font-size:11px} body[data-ui-theme=sticker-club] .progressStats{gap:10px;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)} body[data-ui-theme=sticker-club] .progressStats .playerJourney{padding:11px 10px;gap:8px;min-height:100px} body[data-ui-theme=sticker-club] .progressStats .journeyMascot{display:none} body[data-ui-theme=sticker-club] .progressStats .journeyLevel{width:30px;height:34px;font-size:18px;border-radius:11px} body[data-ui-theme=sticker-club] .progressStats .journeyCopy strong{font-size:14px} body[data-ui-theme=sticker-club] .progressStats .journeyCopy small{font-size:10px;line-height:1.3} body[data-ui-theme=sticker-club] .progressStats .journeyCopy .scLevelHelp{font-size:9px} body[data-ui-theme=sticker-club] .progressStats .playerStreak{flex-direction:column;gap:4px;padding:9px 6px;text-align:center} body[data-ui-theme=sticker-club] .progressStats .playerStreak>span{font-size:24px;line-height:1} body[data-ui-theme=sticker-club] .progressStats .playerStreak strong{font-size:13px;line-height:1.2} body[data-ui-theme=sticker-club] .progressStats .playerStreak :is(small,.eyebrow){font-size:9px} body[data-ui-theme=sticker-club] .progressNext{grid-template-columns:54px minmax(0,1fr) auto;padding:13px 12px;gap:4px 9px} body[data-ui-theme=sticker-club] .progressNext>.scNextArt{width:54px;height:54px} body[data-ui-theme=sticker-club] .progressNext>.eyebrow{font-size:9px} body[data-ui-theme=sticker-club] .progressNext>strong{font-size:16px} body[data-ui-theme=sticker-club] .progressNext>.progressNextCount{font-size:11px} body[data-ui-theme=sticker-club] .progressNext>.progressBadge{display:none} body[data-ui-theme=sticker-club] .progressNext>.softBtn{font-size:11px;min-height:44px;max-width:90px;padding:7px} body[data-ui-theme=sticker-club] .progressLinks{grid-template-columns:1fr;gap:10px;padding:2px 2px 5px} body[data-ui-theme=sticker-club] .progressDoor{min-height:67px;grid-template-columns:42px minmax(0,1fr) 22px;padding:10px 13px;gap:2px 12px} body[data-ui-theme=sticker-club] .progressDoorIcon{width:27px;height:27px;padding:7px;border-radius:13px} body[data-ui-theme=sticker-club] .progressDoor strong{font-size:17px} body[data-ui-theme=sticker-club] .progressDoor small{font-size:11px} body[data-ui-theme=sticker-club] .missionsPanel{gap:8px;padding:2px 3px 5px} body[data-ui-theme=sticker-club] .missionsPanel>header{display:none} body[data-ui-theme=sticker-club] .missionsPanel .goalIntro{font-size:11px} body[data-ui-theme=sticker-club] .goalTabs button{min-height:44px;font-size:13px} body[data-ui-theme=sticker-club] .missionsPanel .goalCard{padding:21px 16px 16px;grid-template-columns:58px minmax(0,1fr);gap:10px 12px} body[data-ui-theme=sticker-club] .missionsPanel .goalCard>.bitmapArt{width:58px;height:58px} body[data-ui-theme=sticker-club] .missionsPanel .goalCard>h3{font-size:22px} body[data-ui-theme=sticker-club] .missionsPanel .goalDescription{font-size:13px} body[data-ui-theme=sticker-club] .missionsPanel .goalRule{font-size:10px} body[data-ui-theme=sticker-club] .progressCabinet .achievementsHero{min-height:38px;padding:0} body[data-ui-theme=sticker-club] .progressCabinet .achievementsHero h1{font-size:19px} body[data-ui-theme=sticker-club] .progressCabinet .achievementsHero p{font-size:11px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTabs{gap:6px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTabs button{padding:7px 5px;font-size:11px;min-height:44px} body[data-ui-theme=sticker-club] .progressCabinet .achievementCards{gap:10px;padding:3px} body[data-ui-theme=sticker-club] .progressCabinet .achievementCard{padding:10px 8px 8px;gap:7px} body[data-ui-theme=sticker-club] .progressCabinet .achievementCard strong{font-size:14px} body[data-ui-theme=sticker-club] .progressCabinet .achievementArt:has(img){width:88px;height:88px} body[data-ui-theme=sticker-club] .progressCabinet .achievementPager span{font-size:11px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTrailNode .achievementArt:has(img){width:50px;height:50px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTrailNode strong{font-size:13px} body[data-ui-theme=sticker-club] .achievementDialog{padding:15px 20px 20px} body[data-ui-theme=sticker-club] .achievementDialog .achievementArtLarge:has(img){width:132px;height:132px} body[data-ui-theme=sticker-club] .achievementDialog h2{font-size:25px} body[data-ui-theme=sticker-club] .progressAlbumTabs button{flex:1;font-size:12px;padding:8px} body[data-ui-theme=sticker-club] .progressPanel .albumBook{padding:18px 15px 16px 20px;border-left-width:9px} body[data-ui-theme=sticker-club] .progressPanel .albumBook h3{font-size:25px} body[data-ui-theme=sticker-club] .progressPanel .albumPages{gap:12px;margin:10px 0} body[data-ui-theme=sticker-club] .progressPanel .albumPictureTitle{font-size:12px;padding:8px 0} body[data-ui-theme=sticker-club] .progressPanel .albumPhoto{height:clamp(80px,18dvh,160px)} body[data-ui-theme=sticker-club] .medalReveal{padding:20px} body[data-ui-theme=sticker-club] .medalRevealStage{height:205px} body[data-ui-theme=sticker-club] .medalRevealStage .medalRevealArt{width:184px;height:184px} body[data-ui-theme=sticker-club] .medalRevealRing{width:200px;height:200px} body[data-ui-theme=sticker-club] .medalReveal h2{font-size:27px} } @media(max-height:740px){ body[data-ui-theme=sticker-club] .progressWrap{gap:6px;padding-block:5px} body[data-ui-theme=sticker-club] .progressHeader .eyebrow{display:none} body[data-ui-theme=sticker-club] .progressTabs .softBtn{flex-direction:row;min-height:44px;gap:5px} body[data-ui-theme=sticker-club] .progressTabs .progressSymbol{width:19px;height:19px} body[data-ui-theme=sticker-club] .progressOverview{gap:9px} .scProgressWelcome p{display:none} body[data-ui-theme=sticker-club] .progressStats .playerJourney{min-height:0;padding:8px;gap:7px} body[data-ui-theme=sticker-club] .progressStats .journeyCopy{gap:2px} body[data-ui-theme=sticker-club] .progressStats .journeyCopy strong{font-size:13px} body[data-ui-theme=sticker-club] .progressStats .journeyCopy .scLevelHelp{display:block;font-size:11px;line-height:1.35} body[data-ui-theme=sticker-club] .progressStats .journeyMascot{display:none} body[data-ui-theme=sticker-club] .progressStats .playerStreak{padding:6px} body[data-ui-theme=sticker-club] .progressNext{padding:8px 10px;gap:3px 9px} body[data-ui-theme=sticker-club] .progressNext>.softBtn{grid-row:1/4} body[data-ui-theme=sticker-club] .progressNext>.scNextArt{width:44px;height:44px} body[data-ui-theme=sticker-club] .progressLinks{gap:7px} body[data-ui-theme=sticker-club] .progressDoor{min-height:50px;padding:6px 12px} body[data-ui-theme=sticker-club] .progressDoorIcon{width:24px;height:24px;padding:5px} body[data-ui-theme=sticker-club] .progressDoor strong{font-size:16px;line-height:1.1} body[data-ui-theme=sticker-club] .progressDoor small{font-size:10px;line-height:1.2} body[data-ui-theme=sticker-club] .missionsPanel .goalCard{padding:17px 14px 14px;gap:8px 12px} body[data-ui-theme=sticker-club] .missionsPanel .goalCard>h3{font-size:21px} body[data-ui-theme=sticker-club] .missionsPanel .goalActions{padding-top:10px} body[data-ui-theme=sticker-club] .progressCabinet .achievementsWrap{gap:5px} body[data-ui-theme=sticker-club] .progressCabinet .achievementArt:has(img){width:64px;height:64px} body[data-ui-theme=sticker-club] .progressCabinet .achievementCard{gap:5px;padding:8px} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .achievementCards[data-layout=wall]:not([data-compact=true]) .pictureBadgeArt{width:106px;height:86px} body[data-ui-theme=sticker-club] .progressPanel .albumBook{padding-block:13px} body[data-ui-theme=sticker-club] .progressPanel .albumBook h3{font-size:23px} body[data-ui-theme=sticker-club] .progressPanel .albumPhoto{height:90px} } @media(min-width:701px) and (max-height:520px){ body[data-ui-theme=sticker-club] .progressHeader{display:none} body[data-ui-theme=sticker-club] .progressOverview{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto auto;align-content:center;gap:8px 14px;overflow:auto} .scProgressWelcome{grid-column:1/-1} body[data-ui-theme=sticker-club] .progressStats{grid-column:1;gap:8px} body[data-ui-theme=sticker-club] .progressNext{grid-column:2;grid-row:2} body[data-ui-theme=sticker-club] .progressLinks{grid-column:1/-1;gap:9px;margin:0} body[data-ui-theme=sticker-club] .progressDoor{min-height:62px;padding:8px;transform:none} body[data-ui-theme=sticker-club] .progressDoorIcon{width:25px;height:25px;padding:5px} body[data-ui-theme=sticker-club] .progressDoor strong{font-size:15px} body[data-ui-theme=sticker-club] .progressDoor small{font-size:10px} body[data-ui-theme=sticker-club] .progressCabinet{overflow:hidden;height:100%} body[data-ui-theme=sticker-club] .progressCabinet .achievementsWrap{display:grid;min-height:0;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px auto minmax(0,1fr) 44px;grid-template-areas:'tabs tools' 'notice notice' 'panel panel' 'pager pager';gap:4px 8px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTabs{grid-area:tabs;min-width:0} body[data-ui-theme=sticker-club] .progressCabinet .achievementTools{grid-area:tools;min-width:0;justify-content:end} body[data-ui-theme=sticker-club] .progressCabinet .achievementNotice{grid-area:notice} body[data-ui-theme=sticker-club] .progressCabinet .achievementPanel{grid-area:panel;min-height:0} body[data-ui-theme=sticker-club] .progressCabinet .achievementPager{grid-area:pager;min-height:44px;margin:0;padding:0} body[data-ui-theme=sticker-club] .progressCabinet .achievementPager button{min-height:44px;height:44px} body[data-ui-theme=sticker-club] #progressPictures>#playerCollections{display:none} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .achievementTools{display:none} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .achievementsWrap{grid-template-rows:auto auto minmax(0,1fr) 44px} body[data-ui-theme=sticker-club] .progressCabinet .achievementsHero{display:none} body[data-ui-theme=sticker-club] .progressCabinet .achievementTools{min-height:44px} body[data-ui-theme=sticker-club] .progressCabinet .achievementCards[data-layout=wall] .achievementArt:has(img){width:44px;height:44px} body[data-ui-theme=sticker-club] .progressCabinet .achievementCards[data-layout=wall] .achievementCardCopy{align-items:start} body[data-ui-theme=sticker-club] .progressCabinet[data-pictures=true] .achievementCards[data-layout=wall]:not([data-compact=true]) .pictureBadgeArt{width:66px;height:54px} body[data-ui-theme=sticker-club] .progressCabinet .achievementTrailNode .achievementArt:has(img){width:32px;height:32px} body[data-ui-theme=sticker-club] .missionsPanel>header,body[data-ui-theme=sticker-club] .missionsPanel .goalIntro{display:none} body[data-ui-theme=sticker-club] .progressPanel .albumPages{margin:5px 0;gap:10px} body[data-ui-theme=sticker-club] .progressPanel .albumPhoto{height:75px} body[data-ui-theme=sticker-club] .progressPanel .albumBook h3{font-size:21px} } @media(max-height:540px){ body[data-ui-theme=sticker-club] .medalRevealContent{gap:7px} body[data-ui-theme=sticker-club] .medalRevealStage{height:108px;width:200px} body[data-ui-theme=sticker-club] .medalRevealStage .medalRevealArt{width:108px;height:108px} body[data-ui-theme=sticker-club] .medalRevealRing{width:114px;height:114px} body[data-ui-theme=sticker-club] .medalReveal h2{font-size:23px} body[data-ui-theme=sticker-club] .medalRevealReward{padding:6px} body[data-ui-theme=sticker-club] .medalRevealDescription{font-size:11px} body[data-ui-theme=sticker-club] .medalReveal .eyebrow{padding:4px 12px;font-size:9px} body[data-ui-theme=sticker-club] .achievementDialog .achievementArtLarge:has(img){width:82px;height:82px} } @media(prefers-reduced-motion:reduce){ body[data-ui-theme=sticker-club] :where(.progressWrap,.achievementDialog,.medalReveal) button{transition:none} body[data-ui-theme=sticker-club] .progressCabinet .achievementCard:hover{transform:none} } html.reduced-motion body[data-ui-theme=sticker-club] :where(.progressWrap,.achievementDialog,.medalReveal) button{transition:none} /* SC10–SC13: storefront, purchase sheets and small utility surfaces. Presentation only; server receipts, prices, consent and identity stay authoritative. */ body[data-ui-theme=sticker-club] :where(#screen-shop,#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog,#settingsBack,.performancePanel,#bootScreen) :is(.primaryBtn,.softBtn,.iconBtn,.shopPreviewReplay,.performanceActions button){font-family:inherit;font-weight:900;min-height:48px;min-width:44px;line-height:1.2;padding:10px 16px;border:1px solid #d6c6d2;border-radius:15px;background:linear-gradient(#fffefa,#f3e9df);color:var(--sc-ink);box-shadow:inset 0 2px 0 #fff,0 3px 0 #d1c0b6,0 5px 9px #4e305011;cursor:pointer;transition:transform var(--sc-press),box-shadow var(--sc-press)} body[data-ui-theme=sticker-club] :where(#screen-shop,#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog,#settingsBack,#bootScreen) .primaryBtn{background:linear-gradient(#a74dff,#7e2bdf 60%,#7021cf);color:white;border-color:#6126ac;box-shadow:inset 0 2px 0 #d5a6ff,0 3px 0 #49138f,0 5px 10px #6d28ab24} body[data-ui-theme=sticker-club] :where(#screen-shop,#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog,#settingsBack,.performancePanel,#bootScreen) button:disabled{opacity:.5;cursor:default;transform:none} body[data-ui-theme=sticker-club] :where(#screen-shop,#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog,#settingsBack,.performancePanel,#bootScreen) :is(button,input,select,summary,textarea):focus-visible{outline:3px solid #6242ad;outline-offset:3px} body[data-ui-theme=sticker-club] :where(#screen-shop,#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog,#settingsBack,.performancePanel) button:not(:disabled):active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 0 #b8a0b6} body[data-ui-theme=sticker-club] :where(#screen-shop,#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog,#settingsBack,.performancePanel) [hidden]{display:none!important} /* Shop: a little paper display. Only the catalogue scrolls on desktop. */ body[data-ui-theme=sticker-club] #screen-shop .shopWrap{height:100%;min-height:0;max-width:1180px;display:flex;flex-direction:column;gap:12px;padding:12px 28px 18px;overflow:auto;overscroll-behavior:contain;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-shop .shopHero{display:flex;flex:none;justify-content:space-between;align-items:center;gap:14px;padding:8px 2px;background:none;border:0;border-radius:0;box-shadow:none} body[data-ui-theme=sticker-club] #screen-shop .shopHero h1{margin:5px 0;font:900 clamp(25px,3vw,34px)/1.1 Nunito,sans-serif;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-shop .shopHero p{font-size:13px;line-height:1.4;color:var(--sc-muted);max-width:640px} body[data-ui-theme=sticker-club] #screen-shop .shopHero .eyebrow{font-size:10px;letter-spacing:.05em} body[data-ui-theme=sticker-club] #screen-shop .shopBalance{margin:0;flex:none;border:1px dashed #c59631;border-radius:13px;background:#fff0ba;color:#62410c;box-shadow:0 3px 0 #e9d2a1;padding:12px 15px;font:900 17px Nunito,sans-serif} body[data-ui-theme=sticker-club] #screen-shop .shopBalance:before{background:linear-gradient(#ffe989,#ffc345);box-shadow:inset 0 0 0 2px #fff1af;border:1px solid #ca8d23} body[data-ui-theme=sticker-club] .scShopNotice{display:flex;flex-direction:column;flex:none;gap:8px;align-items:stretch;min-width:0;min-height:20px} body[data-ui-theme=sticker-club] #shopRetry{align-self:flex-start} body[data-ui-theme=sticker-club] #screen-shop .shopStatus{min-height:0;max-height:none;margin:0;padding:0;font-size:12px;line-height:1.4;color:var(--sc-muted);overflow:visible} body[data-ui-theme=sticker-club] #screen-shop .shopItems{flex:none;gap:20px;padding:5px 3px 10px} body[data-ui-theme=sticker-club] #screen-shop :is(.shopCard,.paidPackCard){padding:16px;min-height:0;border:1px solid #d2c0cf;border-radius:12px;background:var(--sc-paper);box-shadow:0 4px 0 #e4d6ca,0 7px 14px #5b3a6610;overflow:visible;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-shop .shopCard:after{display:none} body[data-ui-theme=sticker-club] #screen-shop .shopCardHead{min-height:22px;gap:5px;flex-wrap:wrap} body[data-ui-theme=sticker-club] #screen-shop :is(.shopType,.shopRarity){font-size:10px;color:var(--sc-muted)} body[data-ui-theme=sticker-club] #screen-shop .shopRarity{border:0;background:#eee4f5;border-radius:7px;padding:4px 7px} body[data-ui-theme=sticker-club] #screen-shop .shopOwnership{font-size:9px;letter-spacing:0;background:var(--sc-mint);color:#285e47;border-radius:7px} body[data-ui-theme=sticker-club] #screen-shop .shopOwnership--equipped{background:#e9dcfb;color:#5a2b92} body[data-ui-theme=sticker-club] #screen-shop .shopCard--owned{border-color:#a0c9af;background:#fafff8} body[data-ui-theme=sticker-club] #screen-shop .shopCard--equipped{border-color:#a583c9;box-shadow:0 4px 0 #cfb7e1,inset 0 0 0 2px #eee0fa} body[data-ui-theme=sticker-club] #screen-shop .shopCard--irreversible{border-color:#d0b67a;background:#fffaf0} body[data-ui-theme=sticker-club] #screen-shop .shopCardVisual{height:150px;margin:10px 0;min-height:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);border:0;border-bottom:1px dashed #dbc8df;border-radius:0;background:radial-gradient(ellipse at 50% 50%,#e8d7fa88,transparent 67%);overflow:visible} body[data-ui-theme=sticker-club] #screen-shop .shopCardVisual .bitmapArt{min-height:0;min-width:0;height:calc(100% - 22px);align-self:start;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)} body[data-ui-theme=sticker-club] #screen-shop .shopCardVisual .bitmapArt .shopIllustration{min-height:0;min-width:0;height:100%;max-height:100%;grid-area:1/1} body[data-ui-theme=sticker-club] #screen-shop .shopCardVisual:before{display:none} body[data-ui-theme=sticker-club] #screen-shop .shopCardVisual .shopIllustration{filter:drop-shadow(0 4px 2px #60407018);height:calc(100% - 22px);width:min(72%,170px)} body[data-ui-theme=sticker-club] #screen-shop .shopVisualCue{color:var(--sc-muted);font-size:10px;background:none;border:0;bottom:1px} body[data-ui-theme=sticker-club] #screen-shop :is(.shopCard h2,.paidPackCard h3){margin:4px 0 6px;font:900 22px/1.15 Nunito,sans-serif;color:var(--sc-ink);overflow-wrap:anywhere} body[data-ui-theme=sticker-club] #screen-shop :is(.shopDescription,.paidPackDescription){color:var(--sc-muted);font-size:13px;line-height:1.45} body[data-ui-theme=sticker-club] #screen-shop .shopCardFoot{padding-top:12px;gap:8px} body[data-ui-theme=sticker-club] #screen-shop :is(.shopPrice,.paidPackPrice){color:#775016;font:900 17px Nunito,sans-serif} body[data-ui-theme=sticker-club] #screen-shop .shopPriceLabel{color:#8a672c;font-size:10px} body[data-ui-theme=sticker-club] #screen-shop .shopCardActions{gap:9px;margin-top:12px} body[data-ui-theme=sticker-club] #screen-shop .shopCardActions button{font-size:12px;white-space:normal;padding:9px 10px} body[data-ui-theme=sticker-club] #screen-shop .shopUse--active{background:#eee5f5;color:#5a3a78;border-color:#c8b3d6;box-shadow:0 3px 0 #c6b5d2} body[data-ui-theme=sticker-club] #screen-shop .paidPacks{margin:12px 0 0;padding:20px 3px 10px;border-top:1px dashed #ccb7d4;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-shop .paidPacks h2{font:900 25px Nunito,sans-serif;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #screen-shop .paidPacks>div>p{color:var(--sc-muted);font-size:13px} body[data-ui-theme=sticker-club] #screen-shop .paidPackCard{border-color:#b6c8d4;background:#fcfdff;gap:9px} body[data-ui-theme=sticker-club] #screen-shop .paidPackContents{color:#5f687d!important;font-size:12px} /* Native dialogs retain browser focus trapping and Escape support. */ body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog){width:min(560px,calc(100vw - 28px));max-height:calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom));box-sizing:border-box;overflow:auto;overscroll-behavior:contain;padding:22px;border:1px solid #ccbaca;border-radius:14px;background:var(--sc-paper);color:var(--sc-ink);box-shadow:0 6px 0 #d8c5b9,0 18px 40px #39214940} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog)::backdrop{background:#35243d80;backdrop-filter:none} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog) h2{margin:12px 0;font:900 clamp(23px,3.5vw,29px)/1.15 Nunito,sans-serif;color:var(--sc-ink);overflow-wrap:anywhere} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog) .eyebrow{font-size:10px;letter-spacing:.04em;color:#6e4b28;line-height:1.4;max-width:calc(100% - 56px)} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog) :is(.shopConfirmClose,.purchaseClose){position:sticky;float:right;top:0;right:auto;margin:0 0 5px 10px;width:48px;height:48px;z-index:5;padding:0;font-size:25px;background:var(--sc-paper);border-radius:50%} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog) p{color:var(--sc-muted);font-size:14px;line-height:1.5;overflow-wrap:anywhere} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog) .modalActions{clear:both;position:sticky;bottom:-22px;z-index:4;display:flex;flex-wrap:wrap;gap:10px;margin:18px -22px -22px;padding:14px 22px 19px;background:var(--sc-paper);border-top:1px dashed #d9c7d6;border-radius:0;box-shadow:0 -5px 10px #fffdf7cc} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog) .modalActions button{flex:1;font-size:13px;white-space:normal} body[data-ui-theme=sticker-club] #shopDetails .shopPreview{margin:14px 0;border:1px dashed #c7adcf;border-radius:12px;min-height:180px;background-color:#f7f1fa;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #shopDetails .shopPreview .shopIllustration{height:120px;width:150px} body[data-ui-theme=sticker-club] #shopDetails :is(.shopDetailsPrice,.shopDetailsLocation){color:#795520} body[data-ui-theme=sticker-club] #shopConfirm{width:min(440px,calc(100vw - 28px))} body[data-ui-theme=sticker-club] #shopConfirmPurchase{background:linear-gradient(#ffe58c,#ffc446);color:#573809;border-color:#c5932b;box-shadow:inset 0 2px 0 #fff3bf,0 3px 0 #b78126} /* Pending is never styled as unlocked. The server's fulfillment drives data-state. */ body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutArt{height:108px;margin:8px auto 0} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutArt .shopIllustration{width:128px;height:108px;margin:0 auto} body[data-ui-theme=sticker-club] #paidCheckout .packArtCaption{display:block;text-align:center;color:var(--sc-muted);font-size:10px} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutContents{padding:12px 14px;border:1px dashed #bca9c9;border-radius:10px;background:#f4ecfa;color:var(--sc-ink)!important;font-size:13px} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutTotal{display:inline-block;margin:12px 0 4px;padding:6px 13px;background:#fff0be;border:1px dashed #c8a34c;border-radius:9px;font:900 24px Nunito,sans-serif;color:#725016} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutTotal:empty{display:none} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutSandbox{font-size:12px;color:#865916!important;background:#fff7dc;border-left:3px solid #d4a240;padding:8px 11px} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutConsent{clear:both;margin:12px 0;gap:12px;border:1px solid #cbb8d4;border-radius:10px;background:#fffaf1;color:var(--sc-ink);font-size:13px;line-height:1.45;padding:12px;cursor:pointer} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutConsent input{width:24px;height:24px;accent-color:var(--sc-violet);margin:0;flex:none} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutStatus:empty{display:none} body[data-ui-theme=sticker-club] #paidCheckout .scCheckoutHandoff{font-size:11px;margin:12px 0 0} body[data-ui-theme=sticker-club] #paidCheckout .scPaymentSignal{display:none} body[data-ui-theme=sticker-club] #paidCheckout:not([data-state=review]) :is(.paidCheckoutArt,.packArtCaption,.scCheckoutHandoff){display:none} body[data-ui-theme=sticker-club] #paidCheckout:not([data-state=review]) .scPaymentSignal{display:grid;place-items:center;clear:both;width:72px;height:72px;margin:14px auto;background:#fff0bf;border:1px dashed #caa54b;border-radius:50%;color:#876124;font:900 38px Nunito,sans-serif;box-shadow:0 4px 0 #e8d6ae} body[data-ui-theme=sticker-club] #paidCheckout[data-state=pending] .scPaymentSignal:after{content:'…'} body[data-ui-theme=sticker-club] #paidCheckout[data-state=ready] .scPaymentSignal{background:var(--sc-mint);border-color:#80b89a;color:#2a664b;box-shadow:0 4px 0 #c1dfcb} body[data-ui-theme=sticker-club] #paidCheckout[data-state=ready] .scPaymentSignal:after{content:'✓'} body[data-ui-theme=sticker-club] #paidCheckout:is([data-state=cancelled],[data-state=unavailable]) .scPaymentSignal:after{content:'↩'} body[data-ui-theme=sticker-club] #paidCheckout[data-state=failed] .scPaymentSignal:after{content:'!'} body[data-ui-theme=sticker-club] :is(.purchaseError,.paidCheckoutError){color:#a13d4e!important;border-left:3px solid #b95362;padding-left:10px} /* Recovery is only for paid packs, not a misleading progress-sync account. */ body[data-ui-theme=sticker-club] .scRecoverySteps{clear:both;list-style:none;display:flex;gap:10px;margin:15px 0 20px;padding:0} body[data-ui-theme=sticker-club] .scRecoverySteps li{display:flex;align-items:center;justify-content:center;flex:1;gap:7px;min-height:42px;border-bottom:2px dashed #d9c9dd;color:var(--sc-muted);font-size:12px;font-weight:800} body[data-ui-theme=sticker-club] .scRecoverySteps b{display:grid;place-items:center;width:25px;height:25px;border:1px solid #d4c3da;border-radius:50%;background:#f3eaf7} body[data-ui-theme=sticker-club] .scRecoverySteps [aria-current=step]{color:#622bac;border-color:#8d50c4} body[data-ui-theme=sticker-club] .scRecoverySteps [aria-current=step] b{color:white;background:var(--sc-violet);border-color:#6126ac} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseForm{margin:16px 0 0;gap:10px;clear:both} body[data-ui-theme=sticker-club] #purchaseAccountDialog :is(.purchaseForm label,.purchaseLabel){font-size:13px;font-weight:900;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseForm input{min-height:52px;border:1px solid #a78cb8;background:white;color:var(--sc-ink);font:700 16px Nunito,sans-serif;border-radius:10px;padding:12px;user-select:text;-webkit-user-select:text} body[data-ui-theme=sticker-club] #purchaseAccountDialog #purchaseCode{letter-spacing:.18em;text-align:center;font:900 22px/1.3 monospace} body[data-ui-theme=sticker-club] #purchaseAccountDialog :is(.purchaseHint,.purchaseStatus){margin:0;font-size:12px} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseForm>.primaryBtn{width:100%;justify-self:stretch;margin-top:6px} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseActions{gap:10px;flex-wrap:wrap} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseActions button{flex:1;font-size:13px} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseSummary{clear:both;border:1px dashed #95bda6;background:var(--sc-mint);color:#2b5845;padding:14px;border-radius:10px} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseSummary strong{overflow-wrap:anywhere} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseActive{background:#2f674c;color:white} body[data-ui-theme=sticker-club] #purchaseAccountDialog h3{font:900 21px Nunito,sans-serif;color:var(--sc-ink);margin:20px 0 10px} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseEntitlements li{border:1px solid #dacbdb;background:#f7eff9;color:var(--sc-ink);border-radius:9px} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseEntitlements span{color:#34674e} body[data-ui-theme=sticker-club] #purchaseAccountDialog .purchaseEmpty{background:#f8f0e4;border:1px dashed #d1bb9d;border-radius:10px;padding:14px;font-size:13px} /* Settings: fixed header/footer, one intentional inner scroll for long options. */ body[data-ui-theme=sticker-club] #settingsBack{padding:max(15px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(15px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:#35243d80;backdrop-filter:none} body[data-ui-theme=sticker-club] #settingsBack .modal{display:flex;flex-direction:column;max-height:100%;overflow:hidden;background:var(--sc-paper);border:1px solid #ccbaca;border-radius:14px;box-shadow:0 6px 0 #d8c5b9,0 18px 40px #39214940;color:var(--sc-ink)} body[data-ui-theme=sticker-club] #settingsBack .modalHead{display:flex;flex:none;gap:16px;padding:18px 20px 12px;align-items:center;border-bottom:1px dashed #ddcdda} body[data-ui-theme=sticker-club] #settingsBack .modalHead h3{font:900 28px Nunito,sans-serif;color:var(--sc-ink);margin:5px 0 0} body[data-ui-theme=sticker-club] #settingsBack .modalHead .eyebrow{font-size:9px;letter-spacing:.04em} body[data-ui-theme=sticker-club] #settingsBack .modalHead .iconBtn{margin-left:auto;width:48px;height:48px;padding:0;border-radius:50%;font-size:25px} body[data-ui-theme=sticker-club] #settingsBack .modalBody{flex:1;min-height:0;padding:16px 20px 0;overflow:auto;overscroll-behavior:contain} body[data-ui-theme=sticker-club] #settingsBack .settingGroup{padding:14px 0;margin:0;border:0;border-bottom:1px dashed #d8c6db;border-radius:0;background:none} body[data-ui-theme=sticker-club] #settingsBack .settingGroup:first-child{padding-top:4px} body[data-ui-theme=sticker-club] #settingsBack .settingGroup h4{font:900 17px Nunito,sans-serif;color:var(--sc-ink);margin:0 0 10px} body[data-ui-theme=sticker-club] #settingsBack .settingGroup label{color:var(--sc-ink)!important;font-size:14px!important;min-height:44px;cursor:pointer} body[data-ui-theme=sticker-club] #settingsBack :is(.settingHint,.installHelp p,.soundTestStatus){color:var(--sc-muted);font-size:12px;line-height:1.5} body[data-ui-theme=sticker-club] #settingsBack input[type=checkbox]{width:24px;height:24px;accent-color:var(--sc-violet);flex:none;cursor:pointer} body[data-ui-theme=sticker-club] #settingsBack .feedbackChoice{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px} body[data-ui-theme=sticker-club] #settingsBack .feedbackChoice>label{display:flex;align-items:center} body[data-ui-theme=sticker-club] #settingsBack .feedbackToggle{display:flex;align-items:center;gap:10px} body[data-ui-theme=sticker-club] #settingsBack .themeMixer label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px} body[data-ui-theme=sticker-club] #settingsBack .themeMixer input{grid-column:1/-1;width:100%;min-width:0;min-height:44px;accent-color:var(--sc-violet)} body[data-ui-theme=sticker-club] #settingsBack .themeMixer output{font-variant-numeric:tabular-nums;color:var(--sc-violet);font-weight:900} body[data-ui-theme=sticker-club] #settingsBack .themeMixer input:disabled{opacity:.45;cursor:default} body[data-ui-theme=sticker-club] #settingsBack select{min-height:44px;max-width:100%;padding:8px 30px 8px 10px;border:1px solid #bd9ecf;border-radius:9px;background:#f6eefb;color:var(--sc-ink);font:800 14px Nunito,sans-serif} body[data-ui-theme=sticker-club] #settingsBack .feedbackPicker{min-width:0;display:flex;gap:7px;align-items:center} body[data-ui-theme=sticker-club] #previewSnapEffect{min-height:44px;min-width:44px;border:1px solid #c6abd5;border-radius:10px;background:#f1e2fd;color:#622bac;font:900 13px Nunito,sans-serif} body[data-ui-theme=sticker-club] #settingsBack .installHelp summary{min-height:44px;font:900 14px/44px Nunito,sans-serif;color:#64418b;cursor:pointer} body[data-ui-theme=sticker-club] #settingsBack .installHelp p{margin:3px 0 0} body[data-ui-theme=sticker-club] #settingsBack .modalActions{display:flex;flex:none;gap:10px;padding:12px 20px 18px;background:var(--sc-paper);border-top:1px dashed #ddcdda} body[data-ui-theme=sticker-club] #settingsBack .modalActions button{margin-left:auto;min-width:120px} body[data-ui-theme=sticker-club] .performancePanel{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;border:1px solid #c7aecf;border-radius:12px;background:var(--sc-paper);box-shadow:0 4px 0 #dcc9df,0 8px 24px #51355d25;color:var(--sc-ink);font:13px/1.45 Nunito,sans-serif} body[data-ui-theme=sticker-club] .performanceToggle{min-height:48px;border-radius:10px;background:#eedffb;color:#5b2f89;font:900 14px Nunito,sans-serif;position:sticky;top:0;z-index:1;border:0;border-bottom:1px dashed #c6acd6} body[data-ui-theme=sticker-club] .performanceActions{display:grid;grid-template-columns:1fr 1fr;gap:9px} body[data-ui-theme=sticker-club] .performanceActions button{padding:8px;font-size:12px} body[data-ui-theme=sticker-club] .performanceActions [data-start]{background:var(--sc-mint);border-color:#91b8a2;color:#2c5e45} body[data-ui-theme=sticker-club] .performancePanel [data-status]{padding:8px 10px;border-radius:8px;background:#f4eafa;font-size:12px;font-weight:800} body[data-ui-theme=sticker-club] .performancePanel textarea{border:1px solid #baa2c9;border-radius:8px;min-height:100px;padding:8px;background:#fffdf8;color:var(--sc-ink);user-select:text;-webkit-user-select:text} body[data-ui-theme=sticker-club] #bootScreen{background:var(--sc-cream);color:var(--sc-ink)} body[data-ui-theme=sticker-club] #bootScreen h1{color:var(--sc-ink);font:900 40px Nunito,sans-serif} body[data-ui-theme=sticker-club] #bootMessage{color:var(--sc-muted);font-size:15px;line-height:1.5;max-width:35em;padding:12px 18px;background:var(--sc-paper);border:1px dashed #ccb6d4;border-radius:12px} body[data-ui-theme=sticker-club] :is(.achievementNotice,.leaderError,.personalEmpty){background:#fff6db;border:1px dashed #c9a653;border-radius:10px;color:#705420;padding:12px;line-height:1.4} @media(max-width:700px),(max-height:520px){ body[data-ui-theme=sticker-club] #screen-shop .shopWrap{padding:8px 14px 10px;gap:8px;overflow:hidden} body[data-ui-theme=sticker-club] #screen-shop .shopHero{padding:2px 0;display:flex;gap:10px} body[data-ui-theme=sticker-club] #screen-shop .shopHero h1{font-size:26px;margin:0} body[data-ui-theme=sticker-club] #screen-shop .shopHero :is(p,.eyebrow){display:none} body[data-ui-theme=sticker-club] #screen-shop .shopBalance{padding:8px 11px;font-size:14px} body[data-ui-theme=sticker-club] #screen-shop .shopStatus{font-size:11px;max-height:45px;overflow:auto} body[data-ui-theme=sticker-club] #screen-shop .mobileTabs{display:flex;margin:0;gap:10px;padding:0;flex:none} body[data-ui-theme=sticker-club] #screen-shop .mobileTabs button{flex:1;min-height:44px;padding:7px 12px;font-size:13px} body[data-ui-theme=sticker-club] #screen-shop .mobileTabs [aria-pressed=true]{background:#ead9fc;border-color:#ae8dc4;color:#5f2997;box-shadow:0 3px 0 #c5a8db} body[data-ui-theme=sticker-club] #screen-shop :is(#shopItems,#paidPackItems){display:grid;flex:1;min-height:0;grid-template-columns:none;grid-template-rows:minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:100%;padding:0;margin:0;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:12px} body[data-ui-theme=sticker-club] #screen-shop :is(#shopItems,#paidPackItems)::-webkit-scrollbar{display:none} body[data-ui-theme=sticker-club] #screen-shop :is(#shopItems>.shopCard,#paidPackItems>.paidPackCard){display:flex;flex-direction:column;height:100%;max-height:100%;padding:14px;gap:5px;overflow:auto;box-sizing:border-box;overscroll-behavior:contain;border-radius:12px;box-shadow:none} body[data-ui-theme=sticker-club] #screen-shop .shopCardVisual{flex:1 1 120px;min-height:55px;max-height:30dvh;height:auto;margin:3px 0 8px} body[data-ui-theme=sticker-club] #screen-shop :is(.shopCard h2,.paidPackCard h3){font-size:23px;margin:0;grid-area:auto} body[data-ui-theme=sticker-club] #screen-shop :is(.shopDescription,.paidPackDescription){font-size:13px;max-height:3em;overflow:hidden;margin:3px 0;display:block} body[data-ui-theme=sticker-club] #screen-shop .shopCardFoot{padding-top:8px;grid-area:auto;flex:none} body[data-ui-theme=sticker-club] #screen-shop .shopCardActions{margin:4px 0 3px;grid-area:auto;flex:none} body[data-ui-theme=sticker-club] #screen-shop .mobilePager{display:flex;margin:0;min-height:48px;padding:3px 0;gap:16px;flex:none;justify-content:center} body[data-ui-theme=sticker-club] #screen-shop .mobilePager button{padding:5px;min-width:48px} body[data-ui-theme=sticker-club] #screen-shop .paidPacks{padding:0;margin:0;border:0} body[data-ui-theme=sticker-club] #screen-shop[data-shop-tab=cosmetics] #paidPacks,body[data-ui-theme=sticker-club] #screen-shop[data-shop-tab=packs] :is(#shopItems,#shopItems+.mobilePager){display:none} body[data-ui-theme=sticker-club] #screen-shop[data-shop-tab=packs] #paidPacks:not([hidden]){display:flex;flex:1;min-height:0;flex-direction:column;gap:0} body[data-ui-theme=sticker-club] #screen-shop .paidPacks>div:first-child{display:none} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog){padding:18px} body[data-ui-theme=sticker-club] :is(#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog) .modalActions{bottom:-18px;margin:16px -18px -18px;padding:12px 18px 17px} body[data-ui-theme=sticker-club] #settingsBack .modalHead{padding:12px 16px} body[data-ui-theme=sticker-club] #settingsBack .modalBody{padding:8px 16px 0} body[data-ui-theme=sticker-club] #settingsBack .modalActions{padding:10px 16px 15px} } @media(max-height:740px){ body[data-ui-theme=sticker-club] #screen-shop .shopCardVisual{max-height:20dvh;flex-basis:88px} body[data-ui-theme=sticker-club] #screen-shop :is(.shopCard h2,.paidPackCard h3){font-size:20px} body[data-ui-theme=sticker-club] #screen-shop .shopRarity{display:none} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutArt{height:75px} body[data-ui-theme=sticker-club] #paidCheckout .paidCheckoutArt .shopIllustration{height:75px} body[data-ui-theme=sticker-club] #shopDetails .shopPreview{min-height:140px} } @media(max-width:700px) and (max-height:740px){ body[data-ui-theme=sticker-club] #screen-shop :is(.shopDescription,.paidPackDescription){display:none} body[data-ui-theme=sticker-club] #screen-shop .shopWrap{gap:6px} } @media(max-height:520px) and (min-width:701px){ body[data-ui-theme=sticker-club] #screen-shop .shopWrap{padding:4px 14px;gap:4px} body[data-ui-theme=sticker-club] #screen-shop .shopHero{display:none} body[data-ui-theme=sticker-club] #screen-shop .shopStatus{max-height:28px;font-size:10px} body[data-ui-theme=sticker-club] #screen-shop :is(#shopItems>.shopCard,#paidPackItems>.paidPackCard){display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:3px 14px;padding:8px 12px} body[data-ui-theme=sticker-club] #screen-shop :is(.shopCardHead,.paidPackCard>.shopType){display:flex;grid-column:2;grid-row:1} body[data-ui-theme=sticker-club] #screen-shop .shopCardVisual{grid-column:1;grid-row:1/4;max-height:none;min-height:70px;height:100%;margin:0;border:0} body[data-ui-theme=sticker-club] #screen-shop :is(.shopCard h2,.paidPackCard h3){grid-column:2;grid-row:2;align-self:start;font-size:19px} body[data-ui-theme=sticker-club] #screen-shop :is(.shopDescription,.paidPackDescription,.paidPackContents){display:none} body[data-ui-theme=sticker-club] #screen-shop .shopCardFoot{grid-column:2;grid-row:2;align-self:end;justify-self:end;padding:0;margin:0} body[data-ui-theme=sticker-club] #screen-shop .shopCardActions{grid-column:2;grid-row:3;margin:0} body[data-ui-theme=sticker-club] #screen-shop .paidPackFoot{grid-column:2;grid-row:3;margin:0} body[data-ui-theme=sticker-club] #settingsBack .modalHead .eyebrow{display:none} body[data-ui-theme=sticker-club] #settingsBack .modalHead h3{font-size:23px;margin:0} } @media(prefers-reduced-motion:reduce){body[data-ui-theme=sticker-club] :where(#screen-shop,#shopDetails,#shopConfirm,#paidCheckout,#purchaseAccountDialog,#settingsBack,.performancePanel) :is(button,.shopIllustration){transition:none;transform:none}} /* R4: one shared game frame and a dense, semantic list. No individual player cards. */ .rankingsList{--rank-row:28px;--rank-ink:#624776;--rank-muted:#816b90;display:flex;flex:1;min-width:0;min-height:0;background:#fffaf5;color:var(--rank-ink);border:1px solid #e5d7e9;border-radius:12px;overflow:hidden} .rankingsList [hidden]{display:none!important} .rankingsScroller{flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#cbb3df #f7effa;position:relative;scroll-padding-top:32px} .rankingsScroller:focus-visible{outline:3px solid #9453ca;outline-offset:-3px} .rankingsTable{width:100%;table-layout:fixed;border-spacing:0;border-collapse:separate;font:600 14px/1.3 Nunito,system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:left;color:inherit} .rankingsRankColumn{width:64px}.rankingsTimeColumn{width:108px} .rankingsTable th{position:sticky;top:0;z-index:1;height:30px;background:#f7eef9;border-bottom:1px solid #e1cee9;color:#7c628a;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase} .rankingsTable th,.rankingsTable td{padding:0 12px;white-space:nowrap;box-sizing:border-box} .rankingsTable td{height:var(--rank-row);border:0;vertical-align:middle} .rankingsTable :is(th,td):first-child{text-align:center;padding-inline:4px;color:#7f668d} .rankingsTable :is(th,td):last-child{text-align:right} .rankingsRow:nth-child(even){background:#b893df09} .rankingsIdentity{display:flex;align-items:center;gap:7px;min-width:0} .rankingsIdentity .playerFlag{display:inline-block;flex:0 0 20px;width:20px;height:15px;object-fit:cover;border-radius:2px;vertical-align:middle} .rankingsName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rankingsTime{color:#57376c;font-weight:800;letter-spacing:.1px} .rankingsRank{font-size:12px;font-weight:800} .rankingsMedal{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:1000;color:#81550c;border:1px solid #d8ab47;background:linear-gradient(135deg,#fff7ce,#ecc14a);box-shadow:inset 0 0 0 2px #ffe8a4,0 1px 1px #97631022;vertical-align:middle} .rankingsMedal[data-rank="2"]{color:#645c77;border-color:#b6aec6;background:linear-gradient(135deg,#fff,#ccc5db);box-shadow:inset 0 0 0 2px #e9e5f0} .rankingsMedal[data-rank="3"]{color:#7c4726;border-color:#d09a6b;background:linear-gradient(135deg,#ffe6c8,#dba16d);box-shadow:inset 0 0 0 2px #f2cba5} .rankingsRowYou{background:linear-gradient(90deg,#8d4dc7,#7137ac)!important;color:white;font-weight:900} .rankingsRowYou td:first-child,.rankingsRowYou .rankingsTime{color:white} .rankingsYou{flex:none;font-size:10px;line-height:1.2;border:1px solid #fff8;border-radius:4px;padding:1px 4px;color:#fff} .rankingsFound td{animation:rankings-found 1.6s ease-out 1} @keyframes rankings-found{0%,42%{background:#ffe99c55}100%{background:transparent}} .rankingsState{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:9px;color:#7b6389;font:600 14px/1.5 Nunito,system-ui,sans-serif} .rankingsState strong{font-size:20px;color:#624077}.rankingsState p{margin:0;max-width:32ch} .rankingsListPreview{flex:none}.rankingsListPreview .rankingsScroller{overflow:visible}.rankingsListPreview .rankingsTable th{position:static} body[data-ui-theme=sticker-club] .leaderDialog.rankingsDialog{width:1040px;height:min(860px,calc(100dvh - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:2px solid #fff7f4;border-radius:22px;background:#fffaf5;overflow:hidden} body[data-ui-theme=sticker-club] .leaderDialog.rankingsDialog[open]{display:flex;flex-direction:column;gap:0} .rankingsHeading{display:flex;align-items:center;gap:13px;flex:none;padding:13px 18px;border-bottom:1px solid #e5d8ea;background:linear-gradient(105deg,#f5eaff,#fff4df)} .rankingsHeading>div{min-width:0;flex:1}.rankingsHeading small{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#886299} .rankingsHeading .rankingsThumb{flex:none;width:56px;height:50px;object-fit:cover;border:3px solid white;border-radius:9px;transform:rotate(-3deg);box-shadow:0 3px 5px #71518025} body[data-ui-theme=sticker-club] .rankingsDialog #leaderTitle{margin:1px 0 4px;font:1000 23px/1.15 Nunito,sans-serif;color:#4f3069;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rankingsHeading #leaderContext{margin:0;font:800 12px/1.3 Nunito,sans-serif;color:#79568c} .rankingsHeading .leaderClose{flex:none;float:none;width:44px;height:44px;border-radius:13px;background:#fffaf5;border:1px solid #ddcce7;color:#795190;font-size:25px;box-shadow:0 3px 0 #d9c8e2} body[data-ui-theme=sticker-club] .rankingsDialog #fullBoard{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:0;min-width:0;flex:1} .rankingsPanel{display:flex;flex:1;min-height:0;min-width:0} .rankingsSizes{display:flex;align-items:center;gap:12px;padding:9px 18px;flex:none;background:#fffaf5;border-bottom:1px solid #e5d8ea} .rankingsSizeLabel{font-size:13px;font-weight:900;color:#6a457f}.rankingsSizeChoices{display:flex;gap:7px;min-width:0} body[data-ui-theme=sticker-club] .rankingsDialog .rankingsSizeChoices button{min-width:48px;min-height:44px;padding:6px 12px;font:900 15px Nunito,sans-serif;border-radius:12px;background:#fffdf9;border:1px solid #cbb6dc;box-shadow:0 2px 0 #dccde5;color:#67417e} body[data-ui-theme=sticker-club] .rankingsDialog .rankingsSizeChoices [aria-pressed=true]{background:linear-gradient(#a24cf4,#7626cc);border-color:#9144de;color:white;box-shadow:0 3px 0 #61209d;opacity:1} .rankingsAllTime{margin-left:auto;border:0;background:transparent;box-shadow:none;color:#6934a5;font:800 13px Nunito,sans-serif;min-height:44px;padding:7px;text-decoration:underline;text-underline-offset:3px} .rankingsPlay{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px 15px;border-top:1px solid #e5d8ea;background:#fff6e8} .rankingsPlay p{margin:0;max-width:42ch;color:#705378;font:700 13px/1.4 Nunito,sans-serif} body[data-ui-theme=sticker-club] .rankingsDialog .rankingsPlay button{flex:none;min-height:48px;padding:10px 22px;font-size:16px;border-radius:15px;color:#fff;background:linear-gradient(#a74dff,#7e2bdf 60%,#7021cf);border-color:#6126ac;box-shadow:inset 0 2px #d5a6ff,0 3px 0 #49138f} .rankingsSizes button:focus-visible,.rankingsPlay button:focus-visible{outline:3px solid #8450bd;outline-offset:3px} @media(max-width:480px){.rankingsSizes{padding:7px 10px;gap:8px;flex-wrap:wrap}.rankingsSizeLabel{font-size:11px}.rankingsSizeChoices{flex:1;gap:5px}body[data-ui-theme=sticker-club] .rankingsDialog .rankingsSizeChoices button{flex:1;min-width:0;padding:6px 7px;font-size:14px}.rankingsAllTime{font-size:11px;margin-left:0;padding:5px}.rankingsPlay{flex-direction:column;gap:6px;padding:8px 12px 12px}.rankingsPlay p{font-size:12px;text-align:center;max-width:none}body[data-ui-theme=sticker-club] .rankingsDialog .rankingsPlay button{width:100%;font-size:15px;min-height:46px}} .rankingsAside{flex:0 0 194px;display:flex;flex-direction:column;gap:25px;padding:23px 19px;background:linear-gradient(180deg,#f8effc,#fff6e9);border-right:1px solid #e5d7e9} .rankingsPhoto{position:relative;background:white;border:5px solid white;border-radius:12px;box-shadow:0 4px 9px #67417124;transform:rotate(-3deg)} .rankingsPhoto img{display:block;width:100%;aspect-ratio:1.14;object-fit:cover;border-radius:7px} .rankingsPhoto>span{position:absolute;bottom:13px;left:-12px;padding:4px 9px;border:1px solid #ffecb5;background:linear-gradient(#fff2b7,#f7d88a);color:#7e5421;border-radius:4px;font:900 11px Nunito,sans-serif;transform:rotate(3deg);box-shadow:0 2px 0 #d9b878} .rankingsOwn{display:flex;flex-direction:column;gap:9px;padding-top:6px}.rankingsOwnLabel{text-transform:uppercase;font-size:11px;letter-spacing:.08em;font-weight:900;color:#8a6a9d} .rankingsOwnRank{font-size:39px;line-height:1.15;font-weight:1000;letter-spacing:-1px;color:#8147b8}.rankingsOwnTime{font-size:19px;line-height:1.3;font-weight:800;font-variant-numeric:tabular-nums;color:#6c4981} .rankingsPane{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;padding:0 16px} .rankingsTools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:58px} .rankingsJumps{display:flex;gap:7px} body[data-ui-theme=sticker-club] .rankingsDialog :is(.rankingsJumps,.rankingsPaging) .softBtn{min-height:40px;padding:7px 13px;font-size:12px;line-height:1.2;border-radius:10px;background:#fbf5ff;border-color:#d9c3e7;color:#784999;box-shadow:0 2px 0 #dbcae3} body[data-ui-theme=sticker-club] .rankingsDialog .rankingsJumps .softBtn:disabled{opacity:.55} .rankingsOwnStrip{display:none} .rankingsOptions{position:relative;font-size:12px;color:#78568d;flex:none} .rankingsOptions>summary{min-height:40px;padding:10px 5px;cursor:pointer;font-weight:900;list-style:none} .rankingsOptionsPanel{position:absolute;z-index:3;right:0;top:100%;width:min(350px,calc(100vw - 60px));max-height:min(360px,calc(100dvh - 200px));overflow:auto;overscroll-behavior:contain;padding:14px;background:#fffaf6;border:1px solid #dbc7e6;border-radius:13px;box-shadow:0 8px 22px #50306536} body[data-ui-theme=sticker-club] .rankingsDialog .boardPeriods{margin:0 0 8px;display:flex;flex-wrap:wrap} body[data-ui-theme=sticker-club] .rankingsDialog .boardPeriods button{min-height:40px;padding:7px 8px;flex:1 1 38%;font-size:12px} .rankingsOptions .boardSearch{margin:12px 0 0;align-items:end;gap:8px}.rankingsOptions .boardSearch label{min-width:0;font-size:12px}.rankingsOptions .boardSearch input{width:100%;min-width:0;font-size:14px;padding:8px} .rankingsFooter{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;min-height:54px;font-size:11px;color:#806990;position:relative} .rankingsCount{margin:0;min-width:0;font-variant-numeric:tabular-nums}.rankingsPaging{display:flex;gap:7px} .rankingsRules{position:static;flex:none}.rankingsRules>summary{font-size:11px;min-height:40px;padding:12px 0 10px;list-style:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .rankingsRulePanel{position:absolute;z-index:3;right:0;bottom:100%;width:min(390px,100%);max-height:240px;overflow:auto;padding:16px;border:1px solid #dac7e3;border-radius:12px;background:#fffaf6;box-shadow:0 -5px 20px #50306526;box-sizing:border-box;font:600 13px/1.6 Nunito,sans-serif;color:#6f5380}.rankingsRulePanel p{margin:0}.rankingsRulePanel label{display:block;margin-top:12px} .rankingsPreview .rankingsPane{padding:0}.rankingsPreview .rankingsTools{min-height:38px}.rankingsPreview .rankingsFooter{flex-wrap:wrap}.rankingsPreviewOwn{font-size:12px;font-weight:900;color:#7846a3;margin:0 0 6px}.rankingsPreview .rankingsOptionsPanel{right:auto;left:0} @media(max-width:780px){ .rankingsAside{display:none}.rankingsOwnStrip{display:block;flex:none;margin:0;padding:10px 0;border-bottom:1px solid #ebdfee;color:#79528e;font:800 12px/1.2 Nunito,sans-serif;font-variant-numeric:tabular-nums} .rankingsPane{padding:0 12px}.rankingsTools{min-height:52px;gap:8px} .rankingsList{--rank-row:30px}.rankingsHeading{padding:11px 12px;gap:10px} body[data-ui-theme=sticker-club] .rankingsDialog #leaderTitle{font-size:20px} } @media(max-width:480px){ body[data-ui-theme=sticker-club] .leaderDialog.rankingsDialog{max-width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);border-radius:17px} .rankingsHeading .rankingsThumb{width:42px;height:42px;border-width:2px}.rankingsHeading{gap:9px;padding:10px} body[data-ui-theme=sticker-club] .rankingsDialog #leaderTitle{font-size:17px}.rankingsHeading #leaderContext{font-size:11px} .rankingsTable{font-size:13px}.rankingsRankColumn{width:40px}.rankingsTimeColumn{width:91px}.rankingsTable th,.rankingsTable td{padding-inline:6px}.rankingsIdentity{gap:4px}.rankingsYou{padding-inline:3px;font-size:9px} body[data-ui-theme=sticker-club] .rankingsDialog .rankingsJumps .softBtn{padding-inline:9px;font-size:11px} .rankingsOptions{font-size:11px}.rankingsFooter{gap:6px}.rankingsCount{font-size:10px} body[data-ui-theme=sticker-club] .rankingsDialog .rankingsPaging .softBtn{padding-inline:8px;font-size:11px} } @media(max-height:600px){.rankingsAside{padding-top:15px;gap:15px}.rankingsPhoto img{max-height:100px}.rankingsHeading{padding-block:6px}.rankingsHeading .rankingsThumb{height:38px}.rankingsTools{min-height:46px}.rankingsOwnStrip{padding-block:7px}.rankingsFooter{min-height:46px}} @media(prefers-reduced-motion:reduce){.rankingsFound td{animation:none}} html.reduced-motion .rankingsFound td{animation:none} /* Respect device safe areas and keep interactive controls easy to tap. */ body[data-ui-theme=sticker-club] .leaderDialog.rankingsDialog{inset:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);height:min(860px,calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)));max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))} body[data-ui-theme=sticker-club] .rankingsDialog :is(.rankingsJumps,.rankingsPaging,.boardPeriods) .softBtn,.rankingsOptions>summary,.rankingsRules>summary{min-height:44px} .rankingsNoResult .rankingsOwnRank{font-size:24px;letter-spacing:-.3px}.rankingsNoResult .rankingsOwnTime{font-size:13px;font-weight:600} @media(max-width:480px){body[data-ui-theme=sticker-club] .leaderDialog.rankingsDialog{height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-width:calc(100vw - 12px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}} /* R5: bounded continuous list; spacers preserve absolute row positions. */ .rankingsList{position:relative} .rankingsScroller{overflow-anchor:none;scroll-behavior:auto} .rankingsTable .rankingsSpacer td{padding:0;border:0;line-height:0;font-size:0;background:transparent} .rankingsTable .rankingsSpacer{background:transparent;pointer-events:none} .rankingsNotice{position:absolute;z-index:2;bottom:8px;left:8px;right:8px;display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;background:#fff9f3f5;border:1px solid #ddc8e7;border-radius:12px;box-shadow:0 3px 12px #5e3a7520;font:700 12px/1.4 Nunito,sans-serif;color:#725085} .rankingsNotice[hidden]{display:none} body[data-ui-theme=sticker-club] .rankingsNotice .softBtn{min-height:44px;min-width:64px;padding:6px 10px;font-size:12px;flex:none} @media(max-width:480px){.rankingsNotice{padding:7px;font-size:11px;gap:6px}} /* R6 Rankings overview. Only the inner content scrolls; navigation stays put. */ .rankDirectoryDaily,.rankDirectory{width:min(100%,850px);margin-inline:auto} .rankHub>.rankHubHeading,.rankHub>.rankHubTabs{width:min(100%,850px);margin-inline:auto} .rankDirectoryDaily .rankHubDaily{grid-template-columns:clamp(90px,26%,210px) minmax(0,1fr);min-height:0;border-radius:19px;margin:0;box-shadow:0 3px 0 #ddcbb8} .rankDirectoryDaily .rankHubArt{min-height:0;height:auto}.rankDirectoryDaily .rankHubStamp{width:46px;height:28px;left:5px;bottom:4px} .rankDirectoryDaily .rankHubDailyCopy{padding:9px 14px;gap:2px}.rankDirectoryDaily .rankHubDailyCopy h2{font-size:clamp(17px,2.8vw,24px);line-height:1.12}.rankDirectoryDaily .rankHubDailyCopy .eyebrow{display:block;font-size:10px} .rankDirectoryDaily .rankHubDailyCopy .primaryBtn{width:auto;min-height:38px;font-size:14px;padding:6px 12px;margin:4px 0 3px} .rankDirectoryDaily .rankHubState{max-width:none;margin:0;padding:12px}.rankDirectoryDaily .rankHubState h2{font-size:17px}.rankDirectoryDaily .rankHubState p{margin:4px} .rankDirectoryHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 8px} .rankDirectoryHeading h2{margin:0;font-size:22px}.rankDirectoryCount,.rankDirectoryRows small{color:#685678} .rankDirectorySearch{background:#fffdf9;color:#40265a;border:1px solid #cbb8ce;border-radius:12px;padding:9px 13px;min-height:44px;width:100%;font:inherit} .rankDirectoryLast{border:0;background:transparent;color:#67349f;box-shadow:none;border-radius:6px;text-align:left;font:inherit;font-size:14px;font-weight:800;min-height:40px;padding:5px 2px} .rankDirectoryRows.rankHubRecords{margin:10px 0 0}.rankDirectoryRows:empty{display:none} .rankDirectoryMore:not([hidden]){display:block;margin:6px auto;min-height:44px}.rankDirectorySearch:focus-visible,.rankDirectoryLast:focus-visible{outline:3px solid #8d59ce;outline-offset:1px} #screen-rankings.active{height:100%;min-height:0;overflow:hidden} .rankHub{max-width:1100px;height:100%;min-height:0;margin:auto;padding:22px 28px 18px;display:flex;flex-direction:column;gap:16px;color:var(--sc-ink,#44316b)} .rankHubHeading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none} .rankHubHeading h1{margin:3px 0;font-size:36px;line-height:1.1}.rankHubHeading p{margin:6px 0 0;color:var(--sc-muted,#817292)} .rankHubFind{flex:none;min-height:46px}.rankHubTabs{display:flex;gap:10px;flex:none} .rankHubTabs button{min-height:46px;min-width:145px;padding:9px 20px} .rankHubTabs [aria-selected=true]{background:linear-gradient(#a785e3,#7948c4);color:white;border-color:#9c74d6;box-shadow:inset 0 2px 0 #ffffff77,0 3px 0 #63439a} .rankHubPanel{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:4px 5px 18px 0} .rankHubDaily{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:340px;max-width:990px;margin:8px auto 0;border:2px solid #fff;border-radius:30px;background:linear-gradient(125deg,#fffdf7,#f7ebd7);box-shadow:0 4px 0 #ddcbb8,0 12px 30px #58403012;overflow:hidden} .rankHubArt{position:relative;min-height:180px;background:linear-gradient(135deg,#f6cf80,#bda8dc);display:grid;place-items:center} .rankHubArt>img:not(.rankHubStamp){width:100%;height:100%;position:absolute;inset:0;object-fit:cover} .rankHubStamp{position:absolute;bottom:18px;left:18px;object-fit:contain;filter:drop-shadow(0 3px 2px #2b184044)} .rankHubDailyCopy{padding:32px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px} .rankHubDailyCopy h2{font-size:30px;line-height:1.15;margin:0}.rankHubDate{font-size:13px;color:#806b88} .rankHubDailyCopy p{margin:0;max-width:350px}.rankHubPieces{font-size:24px;color:#7545ad} .rankHubDailyCopy .primaryBtn{min-height:48px;margin-top:8px;width:100%} .rankHubSizes{display:flex;flex-wrap:wrap;gap:8px}.rankHubSizes button{min-height:44px;padding:9px 13px} .rankHubNote{text-align:center;color:#85718d;font-size:13px;margin:19px 0 0} .rankHubState{max-width:600px;margin:24px auto;padding:28px;border:2px solid white;border-radius:24px;background:#fff9f2;box-shadow:0 3px 0 #ded0db;text-align:center} .rankHubState h2{margin:0 0 8px;font-size:24px}.rankHubState p{margin:0 0 16px;color:#806d89}.rankHubState button{min-height:46px} .rankHubRecordsHeading{display:flex;gap:12px;justify-content:space-between;align-items:baseline}.rankHubRecordsHeading h2{font-size:22px;margin:2px 0 12px}.rankHubRecordsHeading p{font-size:13px;margin:0 0 12px;color:#806c88} .rankHubRecords{list-style:none;padding:0;margin:0;border:1px solid #e1d3e5;border-radius:18px;background:#fffaf6;overflow:hidden} .rankHubRecords>li+li{border-top:1px solid #eadfeb} .rankHubRecord{display:flex;align-items:center;gap:12px;width:100%;min-height:70px;padding:9px 14px;border:0;border-radius:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;box-shadow:none} .rankHubRecord:hover{background:#f2e9fc}.rankHubRecord:focus-visible{outline:3px solid #8151c9;outline-offset:-3px} .rankHubRecordArt{width:56px;height:44px;flex:none;display:grid;place-items:center;background:#eadbf3;border-radius:8px;color:#8953c4;font-size:25px;overflow:hidden}.rankHubRecordArt img{width:100%;height:100%;object-fit:cover} .rankHubRecordCopy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.rankHubRecordCopy strong{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:16px}.rankHubRecordCopy small{font-size:12px;color:#80688f} .rankHubRecordResult{display:flex;gap:18px;align-items:center;flex:none;font-variant-numeric:tabular-nums}.rankHubRecordResult strong{color:#8050ba;font-size:18px}.rankHubRecordResult span{font-weight:800;font-size:16px} .rankHubRecordArrow{font-size:26px;color:#9b78ba}.rankHubPaging{display:flex;justify-content:space-between;gap:10px;margin-top:12px}.rankHubPaging button{min-height:44px} .rankHubRecordStatus{font-size:12px;text-align:center;color:#806a8d;margin:8px 0 0} @media(max-width:700px){ body[data-ui-theme=sticker-club] .topbar .nav{gap:3px;padding-left:8px;padding-right:8px} body[data-ui-theme=sticker-club] .navBtn{font-size:11px;padding-left:2px;padding-right:2px;min-width:0} .rankHub{padding:12px 14px 8px;gap:12px}.rankHubHeading{align-items:flex-start;gap:6px}.rankHubHeading h1{font-size:28px}.rankHubHeading .eyebrow{font-size:9px;letter-spacing:1px}.rankHubHeading p{font-size:12px;max-width:210px}.rankHubFind{min-height:44px;max-width:114px;padding:8px;font-size:12px} .rankHubTabs{gap:8px}.rankHubTabs button{flex:1;min-width:0;font-size:15px;padding:8px 12px} .rankHubDaily{grid-template-columns:1fr;min-height:0;border-radius:22px;margin-top:2px}.rankHubArt{height:clamp(115px,21dvh,220px);min-height:115px}.rankHubStamp{width:90px;height:51px;bottom:10px;left:10px} .rankHubDailyCopy{padding:18px;gap:8px}.rankHubDailyCopy h2{font-size:24px}.rankHubPieces{font-size:21px}.rankHubDailyCopy p{font-size:13px}.rankHubDailyCopy .primaryBtn{margin-top:4px;font-size:16px} .rankHubNote{margin-top:13px;font-size:11px}.rankHubPanel{padding-right:0;scrollbar-gutter:auto}.rankHubState{margin-top:4px;padding:22px 14px} .rankHubRecordsHeading{display:block}.rankHubRecordsHeading h2{margin-bottom:4px}.rankHubRecordsHeading p{font-size:12px}.rankHubRecord{gap:9px;padding:8px;min-height:66px}.rankHubRecordArt{width:42px;height:40px}.rankHubRecordCopy strong{font-size:14px}.rankHubRecordCopy small{font-size:11px}.rankHubRecordResult{flex-direction:column;gap:1px;align-items:flex-end}.rankHubRecordResult strong{font-size:15px}.rankHubRecordResult span{font-size:14px}.rankHubRecordArrow{font-size:22px} } @media(max-height:650px){.rankHubArt{min-height:70px;height:90px}.rankHubDaily{min-height:0}.rankHubDailyCopy{padding:14px;gap:6px}.rankHubDailyCopy h2{font-size:22px}.rankHubNote{display:none}.rankHubDailyCopy .eyebrow{display:none}.rankHubDailyCopy .primaryBtn{margin-top:0}.rankHubDailyCopy>p:not(.rankHubDate){font-size:12px}.rankHubHeading p{display:none}.rankHub{gap:8px;padding-top:8px}} @media(max-height:650px){ .rankHubHeading .eyebrow{display:none}.rankHubHeading h1{margin-top:0} .rankHubDaily{grid-template-columns:minmax(72px,.35fr) minmax(0,1fr)} .rankHubArt{height:auto;min-height:0}.rankHubStamp{width:60px;height:35px;left:8px;bottom:8px} .rankHubDailyCopy>p:not(.rankHubDate){display:none}.rankHubDailyCopy .primaryBtn{font-size:14px;padding:8px 10px} } /* R7: contextual rankings stay in the game, above a preserved board. */ body.playing #screen-play .hudRankings{position:fixed;right:var(--hud-right,14px);bottom:calc(var(--hud-bottom,14px) + 62px);width:48px;min-width:48px;height:48px;padding:0;color:#8255b6;background:linear-gradient(#fffdf7,#eee3f7)} body.rankings-paused.puzzle-paused :is(#stage,#world){visibility:visible!important} body.jv3[data-ui-theme=sticker-club] #screen-home[data-play-lobby] .playPrompt .lobbyLinks{display:flex;grid-column:1/-1;align-items:center;gap:8px;order:2;min-height:44px} body.jv3[data-ui-theme=sticker-club] #screen-home[data-play-lobby] .lobbyLinks>button{flex:1;min-width:0;min-height:44px;margin:0;font-size:13px;padding:7px 10px;white-space:nowrap} #previewRankings,#resultRankings{min-height:44px} /* RK5: one visible finish comparison, followed by direct list/replay actions. */ body[data-ui-theme=sticker-club] #screen-complete .resultRanking{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:8px 0 10px;padding:13px 14px;border:1px solid #ddcce7;border-radius:14px;background:#faf4ff;text-align:left;min-height:0} body[data-ui-theme=sticker-club] #screen-complete .resultRanking[hidden]{display:none} body[data-ui-theme=sticker-club] #screen-complete .resultRanking[data-award=best]{border-color:#d9b55d;background:linear-gradient(115deg,#fff4d4,#fffaf2 65%,#f6ecff)} #screen-complete .resultRankingPicture{display:block;max-width:100%;overflow-wrap:anywhere;font:850 12px/1.3 Nunito,sans-serif;color:#674f7b} #screen-complete .resultRankingContext{font-size:11px;line-height:1.5;margin-top:2px} #screen-complete .resultRanking h3{font-size:clamp(17px,2vw,22px);margin:7px 0 4px;line-height:1.2} body[data-ui-theme=sticker-club] #screen-complete .resultRanking p{margin:4px 0 0!important;font-size:13px;line-height:1.4} #screen-complete .resultRanking .resultRankingExtra{font-weight:900;color:#694190} #screen-complete .resultRankingPlace{min-width:0;max-width:160px;padding-left:12px;text-align:center} #screen-complete .resultRankingPlace strong{font-size:clamp(27px,4vw,38px);overflow-wrap:anywhere} #screen-complete .resultRankingPlace span{font-size:11px;line-height:1.4} .finishRankingActions{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px} body[data-ui-theme=sticker-club] #screen-complete .finishRankingActions>button{flex:1;min-width:0;min-height:44px;padding:9px 12px;font-size:12px;white-space:normal} @media(max-width:400px){body[data-ui-theme=sticker-club] #screen-complete .resultRanking{padding:11px;gap:8px}#screen-complete .resultRankingPlace{max-width:105px;padding-left:8px}} @media(max-width:700px){body.jv3[data-ui-theme=sticker-club] #screen-home[data-play-lobby] .lobbyLinks>button{font-size:12px;padding-inline:7px}} /* R9: concise state/context help without adding cards to the player list. */ .rankingsBoardNote{flex:none;margin:0 0 7px;padding:7px 9px;border-radius:8px;background:#f3eaf9;color:#79558c;font:700 11px/1.4 Nunito,sans-serif} .rankingsBoardNote[hidden]{display:none} .rankingsTieNote{display:block;font-size:10px;line-height:1.4;color:#8a7395} .rankingsFooter>div:first-child{min-width:0} .rankingsNoResult .rankingsOwnRank{font-size:24px;letter-spacing:-.3px} .rankingsNoResult .rankingsOwnTime{font-size:13px} .rankingsPhoto[hidden],.rankingsHeading .rankingsThumb[hidden]{display:none} /* Period selection and player search have separate, explicit entry points. */ .rankingsTools{flex-wrap:wrap} .rankingsFilters{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-inline-start:auto;flex-wrap:wrap} .rankingsScope{font-size:12px;font-weight:900;color:#78568d;padding:10px 5px} .rankingsOptions .boardSearch input,.rankingsOptions .boardSearch button{min-height:44px} .rankingsOptions>summary:focus-visible{outline:3px solid #7847b8;outline-offset:2px;border-radius:8px} @media(max-width:480px){.rankingsTools{gap:4px 8px;padding-block:4px}.rankingsFilters{gap:10px}.rankingsOptionsPanel{box-sizing:border-box}} .rankingsFilters>.rankingsOptions{position:static} .rankingsPosition[hidden]{display:none!important} .rankingsJumpHelp{margin:0;font:600 12px/1.4 Nunito,sans-serif;color:#725385}