/* PUZRUSH riso theme: yellow grainy ground, ink surfaces, colour accents and puzzle-shaped cards.
   Loaded last; it restyles the existing markup without changing behaviour. */
@font-face{font-family:'Archivo';src:url(/fonts/archivo-latin.woff2) format('woff2');font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/plex-mono-500-latin.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/plex-mono-700-latin.woff2) format('woff2');font-weight:700;font-display:swap}

:root{color-scheme:light;
 --y:#FFD21F;--ink:#16120D;--cream:#FFF3D6;--pink:#FF2E63;--blue:#2152FF;--teal:#27D0A3;--orange:#FF5B22;--sky:#A8E0FA;
 --bg:var(--y);--panel:var(--ink);--panel-light:#2A231B;--border:var(--ink);--text:var(--ink);--muted:#5A4A1E;--amber:var(--ink);--lime:#0B6E52;--danger:#B3123E;
 --font:'Archivo',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
 --btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);
 --pz-mask:radial-gradient(circle 24px at calc(50% - 12px) 0,#0000 calc(100% - .5px),#000),radial-gradient(circle 24px at 0 calc(50% - 12px),#0000 calc(100% - .5px),#000),radial-gradient(circle 16px at calc(100% - 16px) calc(50% - 12px),#000 calc(100% - .5px),#0000),radial-gradient(circle 16px at calc(50% - 12px) calc(100% - 16px),#000 calc(100% - .5px),#0000),linear-gradient(#000 0 0) 0 0/calc(100% - 24px) calc(100% - 24px) no-repeat}

/* Dark surfaces keep light text: variables are re-scoped, explicit colours are left alone. */
:where(.metric,.arena,.canvas-wrap,.stage-overlay,.leaderboard,.image-card,.room-code,.finished-banner,.toast,dialog,.mobile-controls,.save-status,.round-summary,.puzzle-card,.empty-state,.profile-stat,.settings-columns form,.friends-columns>section,.history-row,.invite-row,.lobby-image,.setup-preview,.spectator-toolbar,.matchmaking-message,.battle-image-note,#auth-dialog,.auth-preview,.point-wallet,.cosmetic-preview,.shop-card,.trophy-card,.invitation-entry,.world-puzzle,.elo-result,.collection-tableau,.tableau-preview,.collection-arrival-status,.prepare-art,.prepare-settings,.legal-draft,.page-footer,.puzzle-records-menu,.classic-workspace .arena-footer,#rankings-view #world-panel,#rankings-view .world-list,.profile-hero,.profile-shortcut,.friends-card,.settings-card,.app-sidebar.is-open,.welcome,.lobby-card,.countdown-card,.results-card){
 --bg:#16120D;--panel:#221C15;--panel-light:#2A231B;--border:#3A332A;--text:#FFF3D6;--muted:#C9BFA8;--amber:#FFD21F;--lime:#27D0A3;--danger:#FF7A93;--btn-bg:var(--y);--btn-fg:var(--ink);--sh:#000;color:var(--text)}

/* Ground */
html{background:var(--y)}
.app-layout{overflow-x:clip}
#mobile-game-details{--bg:#16120D;--text:#FFF3D6;--muted:#C9BFA8;--amber:#FFD21F;color:var(--text)}
body,.app-layout{background:var(--y) url(/grain.svg);color:var(--ink);font-family:var(--font)}
::selection{background:var(--pink);color:var(--ink)}
.app-layout :is(button,a,input,select,summary,canvas):focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* Type */
h1,h2,h3,.welcome h1{font-family:var(--font);font-weight:900;font-stretch:118%;letter-spacing:-.02em}
.app-layout>.main>.page-heading h1,.app-layout .prepare-heading h1,.shop-heading h1,#arena-view .welcome h1,#arena-view .rules-heading h2{text-transform:uppercase;line-height:.92;font-stretch:125%}
.app-layout>.main>.page-heading h1{font-size:clamp(30px,3.6vw,52px);text-shadow:4px 4px 0 var(--pink)}
.app-layout>.main>.page-heading h1>span{color:var(--muted);text-shadow:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:6px 12px;border-radius:999px;background:var(--text);color:var(--bg);font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em}
.eyebrow .little-square{display:none}
.app-layout .eyebrow{color:var(--bg)!important;background:var(--text)!important}
.app-layout>.main :is(.hub-heading,.world-heading,.shop-heading,.booster-heading) p:not(.eyebrow){color:var(--ink)}
#rankings-view .world-heading p:not(.eyebrow){color:var(--ink)}
#rankings-view .world-heading h1{text-transform:uppercase;line-height:.92;font-stretch:125%;font-size:clamp(32px,4vw,58px);text-shadow:4px 4px 0 var(--pink)}
#rankings-view .world-mark{border:0;background:var(--pink);color:var(--ink);border-radius:0;-webkit-mask:url(/piece.svg) center/contain no-repeat;mask:url(/piece.svg) center/contain no-repeat}
#rankings-view .world-tabs{border:0;background:transparent;gap:6px;padding:0}
#rankings-view .world-tabs button{border:0;border-radius:999px;background:#16120D12;color:var(--ink);font-weight:800}
#rankings-view .world-tabs button[aria-selected=true]{background:var(--ink);color:var(--y);box-shadow:3px 3px 0 var(--pink)}
#rankings-view #world-panel{border:0;background:var(--ink);border-radius:26px}
.empty-state{border:0!important;background:#221C15;border-radius:20px}
.round-pill{border:0;border-radius:999px;background:var(--pink);color:var(--ink);font-family:var(--mono);font-weight:700}
.round-pill>span{color:var(--ink);border-color:#16120D40}
.metric-label,.live-label,.ranking-labels,.image-number,.result-stats span,.page-footer small{font-family:var(--mono)}

/* Buttons and fields */
.button{border:0;border-radius:999px;font-family:var(--font);font-weight:800;transition:transform .15s ease,box-shadow .15s ease}
.button.primary,.app-layout .records-button{background:var(--btn-bg);border:0;color:var(--btn-fg);box-shadow:4px 4px 0 var(--pink)}
.button.primary:hover,.app-layout .records-button:hover{background:var(--btn-bg);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pink)}
.button.secondary{background:var(--cream);border:0;color:var(--ink);box-shadow:3px 3px 0 var(--sh)}
.button.secondary:hover{background:#fff;transform:translate(-2px,-2px)}
.button:active{transform:translate(2px,2px);box-shadow:0 0 0 transparent}
.icon-button{border:0;border-radius:999px;background:var(--cream);color:var(--ink)}
.icon-button:hover{border:0;background:#fff;color:var(--ink)}
.app-layout .abandon-button,#logout-button{background:var(--pink);border:0;color:var(--ink)}
.app-layout .abandon-button:hover,#logout-button:hover{background:#ff5c85;color:var(--ink)}
.text-button,.practice-button{color:var(--muted)}
.text-button:hover,.practice-button:hover{color:var(--text)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{background:var(--cream);color:var(--ink);border:0;border-radius:12px;box-shadow:3px 3px 0 var(--sh)}
input::placeholder,textarea::placeholder{color:#7A6A45}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,select:focus,textarea:focus{border:0;outline:3px solid var(--blue);outline-offset:2px}

/* No outlines: borders are hidden everywhere except functional guide lines and booster artwork. */
.app-layout :is(div,section,article,aside,li,ol,ul,button,label,details,summary,nav,header,footer,a,span,p,figure,dialog,table,tr,td,th):not(.qualification-line,.tear-line,.cut-guide,.timer-track):not(.booster-packet *,.pack-ceremony *,.booster-packet){border-color:transparent!important}
.category-pill{background:#16120D14;color:var(--ink)}
.app-layout :is(.prepare-settings,.stage-overlay,dialog) .category-pill{background:#221C15;color:var(--text)}
.category-pill[aria-pressed=true]{background:var(--teal)!important;color:var(--ink)!important}
.battle-image-note,.room-code{background:#221C15}

/* Header with horizontal navigation */
.app-layout{--header-height:76px}
.app-layout .header{background:var(--y) url(/grain.svg);border:0;box-shadow:none}
.header-credits{border:0!important;border-radius:999px!important;background:var(--cream)!important;color:var(--ink)!important;box-shadow:3px 3px 0 var(--ink)}
#arena-view .matchmaking-button small{color:inherit;opacity:.75}
.app-layout .header .brand{font-size:24px}
.app-layout .brand-name,.app-layout .brand>.brand-name,.app-layout .brand-name>span{color:var(--ink);font-weight:900;font-stretch:125%;letter-spacing:-.02em}
.brand-mark,.footer-brand .brand-mark{width:38px;height:38px;border-radius:0;background:var(--pink);-webkit-mask:url(/piece.svg) center/contain no-repeat;mask:url(/piece.svg) center/contain no-repeat}
.brand-mark svg{display:none}
.app-layout .header-language{color:var(--muted);font-family:var(--mono);font-size:11px}
.app-layout .header-language select{background:var(--cream);color:var(--ink);border:0;border-radius:999px;color-scheme:light;font-family:var(--mono);font-weight:700;min-height:42px;padding:0 12px;box-shadow:3px 3px 0 var(--ink)}
.account-button,.guest-account-button{border:0!important;border-radius:999px!important;background:var(--ink)!important;color:var(--y)!important;font-weight:800;min-height:44px;padding:0 18px!important;box-shadow:3px 3px 0 var(--pink)}
.connection{color:var(--muted)}

.app-sidebar{border:0;background:var(--ink)}
.app-sidebar .nav-button{border:0;color:var(--cream);font-weight:700;font-size:15px;border-radius:999px}
.app-sidebar .nav-button:hover{background:#2A231B;color:var(--y)}
.app-sidebar .nav-button.current{background:var(--y);color:var(--ink);border:0}
.sidebar-caption{color:#C9BFA8;font-family:var(--mono)}
.sidebar-resume{border:0;border-radius:999px;background:var(--teal);color:var(--ink);font-weight:800}
.navigation-backdrop{background:#16120Dcc}

@media(min-width:1281px){
 .app-layout{--navigation-width:0px}
 .app-layout .header{padding-left:clamp(16px,3vw,48px)}
 .app-layout .header .brand{width:auto;margin-right:auto;justify-content:flex-start}
 .app-sidebar{top:0;bottom:auto;left:calc(clamp(16px,3vw,48px) + 210px);height:var(--header-height);width:auto;padding:0;z-index:51;background:transparent;flex-direction:row;align-items:center;gap:10px;overflow:visible}
 .app-sidebar .sidebar-heading{display:none}
 .app-sidebar .sidebar-account-footer{display:flex;align-items:center;margin:0;padding:0;border:0;background:transparent}
 .app-sidebar .sidebar-language{display:flex!important;font-size:0;gap:0;margin:0}
 .app-sidebar .sidebar-language select{font-size:13px;min-width:0;width:auto}
 .app-sidebar .sidebar-nav{flex-direction:row;gap:4px}
 .app-sidebar .nav-button{width:auto;padding:11px 18px;color:var(--ink)}
 .app-sidebar .nav-button svg{display:none}
 .app-sidebar .nav-button:hover{background:#16120D14;color:var(--ink)}
 .app-sidebar .nav-button.current{background:var(--ink);color:var(--y)}
 .sidebar-resume{padding:10px 16px}
 .app-layout>.main{width:100%;margin-left:0;padding-left:clamp(16px,3vw,48px);padding-right:clamp(16px,3vw,48px)}
}
@media(max-width:1280px) and (min-width:701px){
 .app-layout{--navigation-width:0px;--header-height:70px}
 .app-layout .header{padding:0 20px;gap:12px}
 .app-layout .header .brand{width:auto}
 .navigation-toggle,#navigation-close{display:inline-flex}
 .app-sidebar{top:var(--header-height);width:260px;z-index:60;visibility:hidden;transform:translateX(-100%);transition:transform .18s ease,visibility .18s}
 .app-sidebar.is-open{visibility:visible;transform:translateX(0)}
 .app-layout>.main{width:100%;margin-left:0;padding:28px 24px 40px}
}
/* Phones: navigation becomes a thumb-reachable bottom tab bar. */
@media(max-width:700px){
 .app-layout{--navigation-width:0px}
 .navigation-toggle,#navigation-close,.app-sidebar .sidebar-heading,.navigation-backdrop{display:none!important}
 .app-sidebar .sidebar-account-footer{position:fixed;top:12px;left:64px;margin:0;padding:0;border:0;background:transparent}
 .app-sidebar .sidebar-language{display:flex!important;font-size:0;gap:0;margin:0}
 .app-sidebar .sidebar-language select{font-size:12px;width:70px;min-width:0;min-height:42px;padding:0 8px}
 .app-sidebar .sidebar-account-footer>:not(.sidebar-language){display:none!important}
 .app-sidebar,.app-sidebar.is-open{visibility:visible;transform:none;top:auto;bottom:0;left:0;right:0;width:auto;height:auto;z-index:70;padding:8px 8px calc(8px + env(safe-area-inset-bottom));flex-direction:row;align-items:stretch;gap:6px;overflow:visible;transition:none;}
 .app-sidebar .sidebar-nav{flex:1;flex-direction:row;gap:4px}
 .app-sidebar .nav-button{flex:1;min-width:0;flex-direction:column;justify-content:center;gap:3px;padding:8px 2px;font-size:10px;text-align:center;border-radius:16px;min-height:54px}
 .app-sidebar .nav-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
 .sidebar-resume{flex:0 0 auto;width:54px;padding:0;justify-content:center;border-radius:16px;font-size:0}
 .app-layout{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 .metrics .metric{-webkit-mask:none;mask:none;border:0!important;margin:0;padding-left:12px}
 .metrics{filter:none}
 .metrics .metric:nth-child(n){box-shadow:3px 3px 0 var(--ink)}
 .app-layout>.main>.page-heading h1{text-shadow:2px 2px 0 var(--pink);max-width:none}
 .app-layout h1{max-width:none;overflow-wrap:break-word}
 #arena-view .welcome h1{font-size:clamp(28px,9.2vw,44px);letter-spacing:-.03em}
 .app-layout>.main :is(.hub-heading,.world-heading,.shop-heading,.booster-heading) h1,#rankings-view .world-heading h1{font-size:clamp(28px,8.5vw,40px)}
 body[data-game-focus=true] .app-sidebar{display:none}
 body[data-game-focus=true].app-layout{padding-bottom:0}
}

/* Arena landing */
#arena-view .arena-entry{background:transparent;border:0;box-shadow:none;padding:28px 0 36px}
#arena-view .arena-entry .welcome{--bg:var(--y);--text:var(--ink);--muted:#5A4A1E;--amber:var(--ink);--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);color:var(--ink)}
#arena-view .welcome h1{font-size:clamp(46px,6.2vw,100px);margin:20px 0 22px;text-shadow:5px 5px 0 var(--pink)}
#arena-view .welcome h1>span{color:var(--cream);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink);margin-top:4px}
#arena-view .welcome-copy{color:var(--ink);font-size:18px;line-height:1.55;font-weight:500}
.arena-features{color:var(--ink);font-family:var(--mono);font-weight:700}
.arena-features svg{color:var(--pink)}
#arena-view .matchmaking-button{border-radius:999px;min-height:72px;font-size:18px;text-transform:uppercase;font-stretch:112%;box-shadow:6px 6px 0 var(--pink)}
#arena-view .entry-actions button{background:var(--cream);border:0;border-radius:999px;color:var(--ink);font-weight:800;font-size:13px;box-shadow:3px 3px 0 var(--ink)}
#arena-view .entry-actions button:hover{background:#fff}
#arena-view .entry-bottom a,#arena-view .practice-button{color:var(--ink);font-weight:700}
.practice-button>span{border:0;background:var(--ink);color:var(--y)}
.showcase-orbit{inset:-6% -14%;border:0;border-radius:0;background:url(/burst.svg) center/contain no-repeat;transform:rotate(-8deg)}
.showcase-label{color:var(--ink);font-family:var(--mono);font-weight:700;background:var(--y);padding:4px 8px;border-radius:999px;z-index:2}
.showcase-images{filter:drop-shadow(7px 7px 0 var(--ink))}
.showcase-images img{border:0;border-radius:0;box-shadow:none;}
.showcase-badge{background:var(--teal);border:0;border-radius:999px;color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.showcase-badge small{color:var(--ink)}
#arena-view .rules-heading .eyebrow{color:var(--y)}
#arena-view .rules-heading h2{font-size:clamp(34px,4.4vw,64px)}
#arena-view .rules-grid{gap:8px 8px;filter:drop-shadow(5px 5px 0 var(--ink))}
#arena-view .rules-grid article{padding:38px;border-radius:22px;background:var(--cream);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);color:var(--ink)}
#arena-view .rules-grid article:nth-child(2){background:var(--pink)}
#arena-view .rules-grid article:nth-child(3){background:var(--teal)}
#arena-view .rules-grid h3{font-size:22px;text-transform:uppercase;font-stretch:115%}
#arena-view .rules-grid p{color:var(--ink);font-size:15px;line-height:1.6}

/* Puzzle-shaped cards */

/* Game */
.metrics{gap:8px;filter:drop-shadow(5px 5px 0 var(--ink))}
.metrics .metric{border-radius:18px;background:var(--ink)}
.metrics .metric:nth-child(1){background:var(--cream);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--lime:#0B6E52;color:var(--ink)}
.metrics .metric:nth-child(3){background:var(--teal);--text:var(--ink);--muted:#16120Dcc;--amber:var(--ink);--lime:var(--ink);--danger:#9E0F36;color:var(--ink)}
.metric-value{font-weight:900;font-stretch:118%}
.timer-track{background:#16120D33}
.arena{border:0;border-radius:22px;background:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.arena-top,.arena-footer,.classic-workspace .save-status,.classic-workspace .arena-footer{border:0!important}
.canvas-wrap{background-color:#16120D;background-image:radial-gradient(#3A332A 1px,transparent 1.2px)}
.app-layout .sidebar{gap:8px;filter:drop-shadow(5px 5px 0 var(--ink))}
.sidebar .leaderboard,.sidebar .image-card{border-radius:20px;background:var(--ink)}
.rank-avatar{border-radius:0;background:var(--pink);color:var(--ink);-webkit-mask:url(/piece.svg) center/contain no-repeat;mask:url(/piece.svg) center/contain no-repeat}
.ranking-row.you{background:#FFD21F22}
.ranking-row.you .rank-avatar{background:var(--y);color:var(--ink)}
.rule-note p,.fairness-note,.fairness-note strong,.fairness-note>span:last-child,#seed-note{color:var(--ink)!important}
.rule-note>span{color:var(--ink);font-weight:800}
.app-layout .sidebar>:not(.leaderboard,.image-card){margin-top:20px}
.app-layout .sidebar>:first-child{margin-top:0}
.fairness-check{background:var(--ink);color:var(--y)}
#countdown-number{font-stretch:125%;font-weight:900}
.results-card h2{text-transform:uppercase;font-stretch:125%}
.toast{border:0;border-radius:999px;background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--pink)}
.toast.error{background:var(--pink);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
dialog{border:0;border-radius:24px;background:var(--ink);box-shadow:10px 10px 0 var(--pink)}
dialog::backdrop{background:#16120Dcc}
#auth-dialog{background:var(--ink)}
#auth-dialog .auth-preview{background:var(--blue) url(/grain.svg);border:0}
#auth-dialog .auth-switch{border:0;background:#221C15;border-radius:999px}
#auth-dialog .auth-switch button{border-radius:999px}
#arena-view .rules-grid .rule-number{color:var(--ink);font-family:var(--mono);font-weight:700}
#arena-view .rules-grid .rule-icon{border:0;background:var(--ink);color:var(--y);border-radius:999px}

/* Pages */
.app-layout>.main :is(.hub-heading,.shop-heading,.rankings-heading) h1,.app-layout>.main>h1{text-transform:uppercase;line-height:.92;font-stretch:125%;font-size:clamp(32px,4vw,58px);text-shadow:4px 4px 0 var(--pink)}
#catalog-view .catalog-tools label{color:var(--ink);font-weight:700}
#catalog-view #catalog-search{background:var(--cream);color:var(--ink);border:0;box-shadow:3px 3px 0 var(--ink)}
#catalog-view .category-pills button{border:0;border-radius:999px;background:var(--ink);color:var(--cream)}
#catalog-view .category-pills button[aria-pressed=true]{background:var(--pink);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
#catalog-view .category-pills button small{color:inherit;opacity:.75}
#catalog-view .catalog-tile .puzzle-cover{background:transparent;border:0;border-radius:0;padding:0;}
#catalog-view .catalog-tile .puzzle-cover img{border-radius:0}
#catalog-view .catalog-tile .favorite-button{right:34px;top:10px;border:0;background:var(--cream);color:var(--ink)}
#catalog-view .catalog-tile .favorite-button[aria-pressed=true]{background:var(--pink);color:var(--ink)}
.profile-tabs{gap:6px;border:0!important;box-shadow:none}
.profile-tabs button{border:0;border-radius:999px;font-weight:800}
.profile-tabs button:not(.current){color:var(--ink);background:#16120D12}
.profile-tabs .current,.auth-switch .current{background:var(--ink);color:var(--y);border:0}
.booster-wallet-chip{border:0;border-radius:999px;background:var(--cream);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.pack-gallery{--bg:#16120D;--text:#FFF3D6;--muted:#C9BFA8;--amber:#FFD21F;--sh:#000;color:var(--text);background:var(--ink) url(/grain.svg);border-radius:36px;padding:28px 0 8px;border:0;border-right:24px solid transparent;border-bottom:24px solid transparent;}
.pack-arrow{border:0;background:var(--y);color:var(--ink)}
.pack-arrow:hover{background:#fff;color:var(--ink)}
.booster-rules{border:0;border-radius:18px;background:#16120D12}
.app-layout .prepare-settings{border-radius:22px}
.app-layout .prepare-art{border-radius:22px;background:var(--ink);box-shadow:none}
.app-layout .prepare-heading a,.app-layout .prepare-back{color:var(--ink)}
.app-layout .prepare-settings .setting-switch{border:0;background:#221C15;border-radius:14px}
.app-layout .prepare-settings :is(select,input[type=number]){border:0;box-shadow:none}
.piece-presets button{border:0;border-radius:999px;background:#221C15;color:var(--muted)}
.piece-presets button:hover,.piece-presets button[aria-pressed=true]{border:0;background:var(--y);color:var(--ink)}
.app-layout .prepare-settings .time-estimate,.app-layout .prepare-settings .puzzle-records-menu{border-top:0}
.shop-card,.trophy-card,.profile-stat,.point-wallet,.friends-card,.settings-card{border-radius:20px}

.legal-page :is(p,li,dd,dt,td,th,small,.legal-updated,.legal-placeholder){color:var(--ink)}
.legal-page a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-page .legal-draft,.legal-page .legal-draft :is(p,li,strong,a){color:var(--cream)}
.legal-page .legal-placeholder{background:#16120D14;border-radius:8px;padding:2px 6px}

/* Footer */
.app-layout .page-footer{background:var(--ink);border:0;padding:40px clamp(16px,3vw,48px) 28px}
.app-layout .footer-brand,.app-layout .footer-brand>.brand-name,.footer-brand .brand-name>span{color:var(--y)}
.app-layout .footer-brand{font-size:26px}
.app-layout .footer-links a{color:var(--cream);font-size:13px;font-weight:600}
.app-layout .footer-links a:hover{color:var(--y)}
.footer-signature small{color:#C9BFA8}

@media(prefers-reduced-motion:reduce){.button{transition:none}}

/* Catalogue: square tiles locked together like a real jigsaw (3px kerf).
   Each tile reaches 30px into its right/bottom neighbour; knobs sit in that zone, sockets on the left/top. */
#catalog-view{overflow-x:clip}
#catalog-view #puzzle-grid{--cols:5;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:auto;gap:3px;align-items:start;padding-bottom:30px}
#catalog-view #puzzle-grid>.catalog-tile{grid-row-end:auto!important;position:relative;aspect-ratio:1;border:0;background:transparent;
 --ht:radial-gradient(circle 23px at calc(50% - 15px) 7px,#0000 calc(100% - .5px),#000);
 --hl:radial-gradient(circle 23px at 7px calc(50% - 15px),#0000 calc(100% - .5px),#000);
 --kr:radial-gradient(circle 20px at calc(100% - 20px) calc(50% - 15px),#000 calc(100% - .5px),#0000);
 --kb:radial-gradient(circle 20px at calc(50% - 15px) calc(100% - 20px),#000 calc(100% - .5px),#0000)}
#catalog-view #puzzle-grid>.catalog-tile .puzzle-cover{position:absolute;inset:0;height:auto;
 }
#catalog-view #puzzle-grid>.catalog-tile :is(.puzzle-card-entry,img){display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;border-radius:0}
#catalog-view #puzzle-grid>.catalog-tile .favorite-button{right:42px;top:12px}
#catalog-view #puzzle-grid>.catalog-tile:hover{z-index:2}
#catalog-view #puzzle-grid>.catalog-tile:hover img{filter:brightness(1.08) saturate(1.1)}
@media(max-width:1280px){
 #catalog-view #puzzle-grid{--cols:4}
}
@media(max-width:1000px){
 #catalog-view #puzzle-grid{--cols:3}
}
@media(max-width:620px){
 #catalog-view #puzzle-grid{--cols:2}
 #catalog-view #puzzle-grid>.catalog-tile .favorite-button{right:38px;top:8px;width:34px;height:34px}
}

/* Boosters: no backdrop panel, only the packs, each a 3D object with a puzzle silhouette. */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --tilt-x{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --tilt-y{syntax:'<angle>';inherits:false;initial-value:0deg}
.pack-gallery{background:transparent;border:0;padding:0;-webkit-mask:none;mask:none;--bg:var(--y);--text:var(--ink);--muted:#5A4A1E;--amber:var(--ink);--sh:var(--ink);color:var(--ink)}
.pack-stage{background:none;perspective:1100px}
.pack-stage:after{background:#16120D55}
.booster-packet{filter:none;transform-style:preserve-3d;transform:translateX(calc(var(--pack-offset)*var(--packet-gap) + var(--carousel-drag,0px))) rotateY(calc(var(--pack-offset)*-13deg + var(--spin) + var(--tilt-y))) rotateX(var(--tilt-x)) rotateZ(calc(var(--pack-offset)*2deg)) scale(var(--pack-scale))}
.booster-packet:not(.selected){opacity:.8}
.booster-packet.selected>.packet-choice{cursor:grab}
.pack-spinning .booster-packet.selected,.pack-spinning .booster-packet.selected>.packet-choice{transition:none;cursor:grabbing}
.pack-stage .booster-packet>.packet-choice{transform:translateZ(4px);backface-visibility:hidden;-webkit-backface-visibility:hidden;
 }
.pack-stage .booster-packet>.packet-tear{transform:translateZ(6px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.packet-back{position:absolute;inset:0;transform:rotateY(180deg) translateZ(4px);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:grid;place-items:center;align-content:center;gap:10px;color:var(--ink);text-align:center;
 background:hsl(var(--pack-tone) 85% 62%) url(/grain.svg);
 
 clip-path:polygon(0 1%,3% 0,6% 1%,9% 0,12% 1%,15% 0,18% 1%,21% 0,24% 1%,27% 0,30% 1%,33% 0,36% 1%,39% 0,42% 1%,45% 0,48% 1%,51% 0,54% 1%,57% 0,60% 1%,63% 0,66% 1%,69% 0,72% 1%,75% 0,78% 1%,81% 0,84% 1%,87% 0,90% 1%,93% 0,96% 1%,100% 0,100% 99%,97% 100%,94% 99%,91% 100%,88% 99%,85% 100%,82% 99%,79% 100%,76% 99%,73% 100%,70% 99%,67% 100%,64% 99%,61% 100%,58% 99%,55% 100%,52% 99%,49% 100%,46% 99%,43% 100%,40% 99%,37% 100%,34% 99%,31% 100%,28% 99%,25% 100%,22% 99%,19% 100%,16% 99%,13% 100%,10% 99%,7% 100%,4% 99%,0 100%)}
.packet-back-mark{width:46%;aspect-ratio:1;background:var(--ink);-webkit-mask:url(/piece.svg) center/contain no-repeat;mask:url(/piece.svg) center/contain no-repeat}
.packet-back-brand{font-weight:900;font-stretch:125%;font-size:26px;letter-spacing:-.01em}
.packet-back-label{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;max-width:80%}
.packet-edge{position:absolute;top:1.5%;bottom:1.5%;width:8px;background:linear-gradient(90deg,#8e978a,#eef2e6 50%,#8e978a)}
.packet-edge.left{left:-4px;transform:rotateY(-90deg)}
.packet-edge.right{right:-4px;transform:rotateY(90deg)}
.pack-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pack-actions .button{margin:0}
.pack-arrow{background:var(--ink);color:var(--y)}
.pack-arrow:hover{background:var(--ink);color:#fff}

/* Shared piece mask for the pages below (knob zone 24px, sockets on the left/top). */
.ink-text{--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--bg:var(--y);--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);color:var(--ink)}

/* Profile */
#account-email-verification{background:var(--teal);border-radius:22px;padding:20px 24px;margin-bottom:8px;--text:var(--ink);--muted:#16120Dcc;color:var(--ink)}
#profile-view #account-email-verification h2{text-transform:uppercase;font-stretch:118%;font-size:22px}
#profile-view .profile-hero{background:var(--pink);border:0;border-radius:28px;box-shadow:8px 8px 0 var(--ink);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--bg:var(--y);--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);color:var(--ink)}
#profile-view .profile-hero:after{display:none}
#profile-view .profile-cover{mix-blend-mode:multiply;opacity:.3;filter:grayscale(1)}
#profile-view .profile-hero h1{font-stretch:125%;text-transform:uppercase;font-size:clamp(36px,4.4vw,66px);line-height:.9;color:var(--ink)}
#profile-view .profile-kicker{font-family:var(--mono);font-weight:700;letter-spacing:.08em;color:var(--ink)!important}
#profile-view .friend-verification-note,#profile-view .friend-verification-note *{color:var(--ink)!important}
#profile-view :is(.friends-card,.settings-card,.trophy-card.earned,.history-row,.settings-columns form) h2{color:var(--text)}
#profile-view #profile-bio{color:var(--ink);font-size:16px}
#profile-view .profile-hero .profile-avatar{box-shadow:6px 6px 0 var(--ink)}
#profile-view .profile-account-state{border:0;background:var(--ink);color:var(--y)}
#profile-view .profile-hero .button.secondary{box-shadow:4px 4px 0 var(--ink)}
.profile-shortcuts{gap:8px!important;margin-top:28px;filter:drop-shadow(5px 5px 0 var(--ink))}
.profile-shortcut{border-radius:20px!important;background:var(--cream)!important;--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);color:var(--ink)!important}
.profile-shortcut:nth-child(2){background:var(--teal)!important}
.profile-shortcut:nth-child(3){background:var(--sky)!important}
.profile-shortcut span{font-weight:900;font-stretch:115%;font-size:17px;text-transform:uppercase}
.profile-shortcut small{color:var(--ink)!important}
.profile-shortcut svg{color:var(--ink)!important}
#profile-view .profile-stats{gap:8px;margin-top:8px;filter:drop-shadow(4px 4px 0 var(--ink))}
#profile-view .profile-stat{padding:16px 14px 14px;border-radius:18px;background:var(--cream);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);color:var(--ink)}
#profile-view .profile-stat strong{display:block;font-weight:900;font-stretch:125%;font-size:28px;color:var(--ink)}
#profile-view .profile-stat span{color:var(--ink);font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.04em}
#profile-view .profile-stat svg{color:var(--pink)}
#profile-view .profile-tabs{margin:44px 0 26px}
#profile-view .account-section-title,#profile-view section>h2{font-weight:900;font-stretch:125%;font-size:clamp(24px,2.4vw,34px);text-transform:uppercase;color:var(--ink)}
#profile-view .section-heading p{color:var(--ink)}
#profile-view .empty-state{background:var(--ink);color:#C9BFA8;border-radius:20px}
#profile-view :is(.trophy-card,.friends-card,.settings-card,.history-row,.invite-row,.invitation-entry){border-radius:20px}
#profile-view :has(>.trophy-card){gap:8px!important;filter:drop-shadow(5px 5px 0 var(--ink))}

#profile-view .trophy-card:not(.earned){opacity:1;filter:none;background:var(--cream);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);color:var(--ink)}
#profile-view .trophy-card:not(.earned) :is(p,small,span){color:var(--ink)}
#profile-view .trophy-card.earned{background:var(--ink);box-shadow:none}

/* Rankings */
#rankings-view .world-heading{align-items:flex-start;text-align:left}
#rankings-view .world-heading h1{font-size:clamp(40px,5.4vw,84px)}
#rankings-view #world-panel{padding:30px clamp(16px,2.5vw,36px) 34px}
#rankings-view .world-rules{color:#C9BFA8;max-width:none;text-align:left;margin:0 0 22px}
#rankings-view .world-filters label{color:var(--text)}
#rankings-view .world-filters select{background:var(--cream);color:var(--ink);border:0}
#rankings-view .world-puzzle{background:#221C15;border:0;border-radius:18px}
#rankings-view .world-puzzle img{border-radius:12px;-webkit-mask:url(/piece.svg) center/contain no-repeat;mask:url(/piece.svg) center/contain no-repeat;object-fit:cover}
#rankings-view .world-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;row-gap:6px;align-items:stretch;background:transparent;border:0;overflow:visible}
#rankings-view .world-list>*{grid-column:1/-1;order:5}
#rankings-view .world-labels{order:4;margin-top:22px;background:transparent;color:#C9BFA8;font-family:var(--mono);font-weight:700;letter-spacing:.06em}
#rankings-view .world-row{border:0;border-radius:16px}
#rankings-view .world-row:not(.world-labels,[data-rank="1"],[data-rank="2"],[data-rank="3"]):nth-child(even){background:#FFF3D60a}
#rankings-view .world-row .profile-avatar{border-radius:0;-webkit-mask:url(/piece.svg) center/contain no-repeat;mask:url(/piece.svg) center/contain no-repeat}
#rankings-view .world-score strong{color:var(--y);font-weight:900;font-stretch:118%}
#rankings-view .world-row:is([data-rank="1"],[data-rank="2"],[data-rank="3"]){grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;min-height:250px;padding:26px;background:var(--cream);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);color:var(--ink)}
#rankings-view .world-row[data-rank="2"]{order:1}
#rankings-view .world-row[data-rank="1"]{order:2;background:var(--pink) url(/burst.svg) right -70px top -70px/240px no-repeat}
#rankings-view .world-row[data-rank="1"]{background-image:none}
#rankings-view .world-row[data-rank="3"]{order:3;background:var(--sky)}
#rankings-view .world-row:is([data-rank="1"],[data-rank="2"],[data-rank="3"]) .world-rank{font-weight:900;font-stretch:125%;font-size:76px;line-height:1;color:var(--cream);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
#rankings-view .world-row[data-rank="1"] .world-rank{color:var(--y)}
#rankings-view .world-row:is([data-rank="1"],[data-rank="2"],[data-rank="3"]) :is(.world-person small,.world-person strong){color:var(--ink)}
#rankings-view .world-row:is([data-rank="1"],[data-rank="2"],[data-rank="3"]) .world-person strong{font-size:22px;font-weight:900;font-stretch:115%}
#rankings-view .world-row:is([data-rank="1"],[data-rank="2"],[data-rank="3"]) .world-score strong{color:var(--ink);font-size:42px;font-stretch:125%}
#rankings-view .world-row:is([data-rank="1"],[data-rank="2"],[data-rank="3"]) .world-person .profile-avatar{width:56px;height:56px;font-size:17px}
@media(max-width:760px){#rankings-view .world-list{grid-template-columns:minmax(0,1fr)}#rankings-view .world-row:is([data-rank="1"],[data-rank="2"],[data-rank="3"]){grid-column:1/-1;min-height:0}}

/* Shop */
#shop-view .shop-heading h1{text-shadow:5px 5px 0 var(--pink)}
#shop-view .point-wallet{background:var(--ink);border-radius:24px;padding:22px 26px}
#shop-view .point-wallet span{font-family:var(--mono);font-weight:700;color:#C9BFA8}
#shop-view .point-wallet strong{display:block;font-weight:900;font-stretch:125%;font-size:58px;line-height:1;color:var(--y)}
#shop-view .point-wallet small{color:var(--cream)}
#shop-view .shop-intro{gap:8px;margin:34px 0 8px;filter:drop-shadow(7px 7px 0 var(--ink))}
#shop-view .cosmetic-preview{border-radius:26px;padding:30px}
#shop-view .cosmetic-preview[data-background=plain]{background:var(--pink);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);color:var(--ink)}
#shop-view .cosmetic-preview strong{font-weight:900;font-stretch:125%;font-size:clamp(26px,2.6vw,40px);text-transform:uppercase;line-height:.95}
#shop-view .cosmetic-preview .profile-avatar{width:96px;height:96px;font-size:30px;box-shadow:5px 5px 0 var(--ink)}
#shop-view .shop-intro>div:last-child{background:var(--teal);border-radius:26px;padding:26px 26px 26px 42px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;color:var(--ink)}
#shop-view .shop-intro>div:last-child p{color:var(--ink);font-size:16px;font-weight:600}
#shop-view #shop-filters{margin:44px 0 26px}
#shop-view #shop-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding-bottom:30px;filter:drop-shadow(6px 6px 0 var(--ink))}
#shop-view .shop-card{padding:38px!important;border:0!important;border-radius:0;box-shadow:none;background:var(--cream);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);color:var(--ink);
 --ht:radial-gradient(circle 23px at calc(50% - 15px) 7px,#0000 calc(100% - .5px),#000);
 --hl:radial-gradient(circle 23px at 7px calc(50% - 15px),#0000 calc(100% - .5px),#000);
 --kr:radial-gradient(circle 20px at calc(100% - 20px) calc(50% - 15px),#000 calc(100% - .5px),#0000);
 --kb:radial-gradient(circle 20px at calc(50% - 15px) calc(100% - 20px),#000 calc(100% - .5px),#0000);
 }
#shop-view .shop-card:nth-child(8n+2),#shop-view .shop-card:nth-child(8n+7){background:var(--sky)}
#shop-view .shop-card:nth-child(8n+3),#shop-view .shop-card:nth-child(8n){background:var(--teal)}
#shop-view .shop-card:nth-child(8n+4){background:var(--orange)}
#shop-view .shop-card:nth-child(8n+6){background:var(--pink)}
#shop-view .shop-card h3{font-weight:900;font-stretch:112%;font-size:19px;color:var(--ink)}
#shop-view .shop-card .shop-label{color:var(--ink)!important;font-family:var(--mono);font-weight:700;font-size:12px}
#shop-view .shop-sample:not([data-background]),#shop-view .shop-sample[data-background=plain]{background:#16120D14;border:0}
#shop-view .shop-sample{border:0;border-radius:18px}
#shop-view .shop-card .button{margin-top:auto}
#shop-view .shop-sample[data-kind=title]{background:var(--ink)!important}
#shop-view .shop-sample[data-kind=title],#shop-view .shop-sample[data-kind=title] *{color:var(--y)!important}
#shop-view .cosmetic-preview{flex-wrap:wrap}
#rankings-view,#profile-view{overflow-x:clip}
#shop-view .cosmetic-preview[data-background=plain] #shop-preview-title{color:var(--ink)}
#boosters-view .small-copy{color:var(--ink)}
#shop-view .shop-card:nth-child(4n+1){--hl:linear-gradient(#000 0 0)}
#shop-view .shop-card:nth-child(4n){--kr:linear-gradient(#0000 0 0)}
#shop-view .shop-card:nth-child(-n+4){--ht:linear-gradient(#000 0 0)}
#shop-view{overflow-x:clip}
@media(max-width:1000px){
 #shop-view #shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #shop-view .shop-card:nth-child(n){--hl:radial-gradient(circle 23px at 7px calc(50% - 15px),#0000 calc(100% - .5px),#000);--kr:radial-gradient(circle 20px at calc(100% - 20px) calc(50% - 15px),#000 calc(100% - .5px),#0000);--ht:radial-gradient(circle 23px at calc(50% - 15px) 7px,#0000 calc(100% - .5px),#000)}
 #shop-view .shop-card:nth-child(2n+1){--hl:linear-gradient(#000 0 0)}
 #shop-view .shop-card:nth-child(2n){--kr:linear-gradient(#0000 0 0)}
 #shop-view .shop-card:nth-child(-n+2){--ht:linear-gradient(#000 0 0)}
 #shop-view .shop-intro{grid-template-columns:minmax(0,1fr)}
}

/* Boosters: collection, market and trades */
.booster-collection-grid{gap:8px!important;filter:drop-shadow(6px 6px 0 var(--ink))}
.collection-tableau{background:var(--ink);border-radius:22px}
#boosters-view select{background:var(--cream)!important;color:var(--ink)!important;border:0!important;box-shadow:3px 3px 0 var(--ink)}
.booster-recharge{font-weight:700}
.booster-recharge #booster-stock{color:var(--ink);font-weight:900;font-stretch:118%;font-size:22px}
.booster-rules{background:var(--ink)!important;color:var(--cream);padding:18px 22px;--text:var(--cream);--muted:#C9BFA8}
.booster-rules summary{font-weight:800;color:var(--y)}

/* Jigsaw groups: shapes come from jigsaw.mjs, each piece reaches --jk into its neighbours. */
.jig-group{column-gap:4px!important;row-gap:4px!important}
.jig-group.jig-shadow{filter:drop-shadow(5px 5px 0 var(--ink))}
:is(#arena-view,#catalog-view,#profile-view,#boosters-view,#rankings-view,#shop-view,#credits-view,#setup-view) .jig-tile.jig-tile{border:var(--jk) solid transparent!important;margin:calc(var(--jk)*-1)!important;border-radius:0!important;background-clip:border-box!important;box-shadow:none!important;-webkit-mask:none!important;mask:none!important}
#catalog-view #puzzle-grid>.catalog-tile.jig-tile{overflow:visible!important}
#catalog-view #puzzle-grid>.catalog-tile.jig-tile .puzzle-cover{inset:calc(var(--jk)*-1);-webkit-mask:none;mask:none}
#catalog-view #puzzle-grid>.catalog-tile.jig-tile .favorite-button{right:calc(var(--jk) + 12px);top:calc(var(--jk) + 12px)}
#puzzle-grid.jig-group{column-gap:3px!important;row-gap:3px!important}

/* Language follows the visitor's country; it can be changed only in Settings. Settings open from the profile. */
.app-sidebar .sidebar-account-footer,.app-layout .header .header-language{display:none!important}
#profile-view .profile-kicker,#arena-view .entry-bottom,.booster-rules{display:none!important}
@media(min-width:1101px){#arena-view .arena-showcase{align-self:end;margin-top:clamp(160px,15vw,240px)}}

/* Rankings: the black panel stays a plain panel. */
#rankings-view #world-panel{border:0!important;-webkit-mask:none!important;mask:none!important}

/* My artworks: light cards, missing pieces as a pale ghost of the artwork. */
.collection-tableau{background:var(--cream)!important;--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--lime:#0B6E52;--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);color:var(--ink)!important;padding:36px!important}
.collection-tableau:nth-child(6n+2){background:var(--sky)!important}
.collection-tableau:nth-child(6n+3){background:var(--teal)!important}
.collection-tableau:nth-child(6n+5){background:var(--pink)!important}
.collection-tableau :is(h3,p,small,.tableau-category,.collection-progress){color:var(--ink)!important}
.collection-tableau h3{font-weight:900;font-stretch:112%}
.collection-tableau .tableau-preview{background:#FFFFFF66;border:0;border-radius:0;box-shadow:none}
.tableau-puzzle>image{opacity:.32;filter:grayscale(1) contrast(.85)}
.collection-tableau .button:disabled{background:#16120D1f;color:#16120D99;box-shadow:none}

/* Credits page */
#credits-view{max-width:1100px}
#credits-view h1{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(44px,6vw,92px);line-height:.88;text-transform:uppercase;text-shadow:5px 5px 0 var(--pink)}
#credits-view .credit-dialog-balance{display:inline-block;margin:28px 0 8px;padding:18px 26px;background:var(--ink);color:var(--y);font-weight:900;font-stretch:118%;font-size:clamp(20px,2.2vw,30px);box-shadow:6px 6px 0 var(--pink)}
#credits-view .credit-dialog-note{max-width:720px;font-size:18px;line-height:1.55;color:var(--ink)}
#credits-view .credit-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px;margin-top:32px}
#credits-view .credit-actions>*{margin:0;width:auto;flex:0 0 auto}
#credits-view .credit-actions{align-items:flex-start}
#credits-view .credit-actions form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:20px 22px;background:var(--cream);box-shadow:6px 6px 0 var(--ink)}
#credits-view .credit-actions label{color:var(--ink);font-weight:700}
#credits-view .form-message{color:var(--ink);font-weight:700}

/* Booster: a solid 3D pack with four edges; the cap tears off along the strip. */
@property --tear-progress{syntax:'<number>';inherits:true;initial-value:0}
.pack-stage .booster-packet>.packet-choice{transform:translateZ(6px)}
.packet-back{transform:rotateY(180deg) translateZ(6px)}
.packet-edge{width:12px;background:linear-gradient(90deg,#7f887a,#f1f4ea 45%,#c6cdbf 60%,#7f887a)}
.packet-edge.left{left:-6px}
.packet-edge.right{right:-6px}
.packet-edge:is(.top,.bottom){top:auto;bottom:auto;left:2%;right:2%;width:auto;height:12px;background:repeating-linear-gradient(90deg,#c6cdbf 0 6px,#8e978a 6px 9px)}
.packet-edge.top{top:-6px;transform:rotateX(90deg)}
.packet-edge.bottom{bottom:-6px;transform:rotateX(-90deg)}
.booster-packet.selected>.packet-choice{cursor:grab}
.pack-spinning .booster-packet.selected>.packet-choice{cursor:grabbing}
.pack-stage .booster-packet>.packet-cap{position:absolute;inset:0;z-index:6;pointer-events:none;transform-origin:100% var(--packet-seam);transform:translateZ(7px) rotate(calc(var(--tear-progress)*-16deg)) translateY(calc(var(--tear-progress)*-6px));backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 6px 6px #16120D55)}
.booster-packet.tearing-pack:before{content:'';position:absolute;z-index:5;left:3%;right:3%;top:calc(var(--packet-seam) - 3px);height:6px;transform:translateZ(6.5px) scaleX(var(--tear-progress));transform-origin:left;border-radius:3px;background:linear-gradient(90deg,#fff,#FFD21F 60%,#fff);box-shadow:0 0 14px #FFD21F,0 0 30px #FF2E6388;pointer-events:none}
.pack-spark{position:absolute;z-index:30;pointer-events:none;-webkit-mask:url(/piece.svg) center/contain no-repeat;mask:url(/piece.svg) center/contain no-repeat}
.pack-actions,.pack-flip{display:none!important}
/* Inner spacing wide enough for the sockets cut into each piece. */
.profile-shortcut.jig-tile{padding:26px 30px!important}
#profile-view .profile-stat.jig-tile{padding:20px 22px!important}
#profile-view .trophy-card.jig-tile{padding:30px!important}
#rankings-view .world-row.jig-tile{padding:34px!important}
#shop-view .shop-intro>.jig-tile{padding:34px!important}

/* ===== Every button is a puzzle piece: square corners, knob on the right, socket on the left. ===== */
:is(.button,.icon-button,.account-button,.header-credits,.profile-tabs button,.world-tabs button,.category-pill,.piece-presets button,.pack-arrow,.auth-switch button,.provider-button,.settings-nav-button,.app-sidebar .nav-button,.sidebar-resume,.room-code,.direction,.zoom-controls button,.tableau-finish-chip,.collection-pagination button,.timer-option,.avatar-button):not(.text-button){
 --pk:14px;border-radius:0!important;border-top:0!important;border-bottom:0!important;border-left:0!important;border-right:var(--pk) solid transparent!important;background-clip:border-box!important;box-shadow:inset -3px -4px 0 rgba(22,18,13,.2)!important;
 -webkit-mask:radial-gradient(circle 9px at 2px 50%,#0000 calc(100% - .5px),#000),radial-gradient(circle 9px at calc(100% - 9px) 50%,#000 calc(100% - .5px),#0000),linear-gradient(#000 0 0) 0 0/calc(100% - var(--pk)) 100% no-repeat;-webkit-mask-composite:source-in,source-over;
 mask:radial-gradient(circle 9px at 2px 50%,#0000 calc(100% - .5px),#000),radial-gradient(circle 9px at calc(100% - 9px) 50%,#000 calc(100% - .5px),#0000),linear-gradient(#000 0 0) 0 0/calc(100% - var(--pk)) 100% no-repeat;mask-composite:intersect,add}
:is(.icon-button,.direction,.zoom-controls button,.pack-arrow){width:58px!important;min-width:58px!important;padding-left:8px!important;padding-right:0!important}
.app-sidebar .nav-button:not(.current){box-shadow:none!important}
.app-layout .button:hover:not(:disabled){transform:translate(-2px,-2px)}

/* ===== Favourite: a cream piece with a star; pink and spinning once chosen. ===== */
.app-layout .favorite-button{width:52px!important;height:52px!important;padding:0 0 3px 3px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--cream)!important;color:var(--ink)!important;font-size:22px!important;line-height:1;display:grid!important;place-items:center;-webkit-mask:url(/piece.svg) center/contain no-repeat!important;mask:url(/piece.svg) center/contain no-repeat!important;transition:transform .2s ease}
.app-layout .favorite-button:hover{transform:rotate(-10deg) scale(1.08)}
.app-layout .favorite-button[aria-pressed=true]{background:var(--pink)!important;animation:fav-pop .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes fav-pop{0%{transform:scale(.55) rotate(-40deg)}60%{transform:scale(1.25) rotate(10deg)}100%{transform:none}}

/* ===== Categories: each one has its own colour, also used for the catalogue seams. ===== */
.app-layout .category-pill{--cat:#16120D;--cat-fg:#FFD21F}
.app-layout .category-pill[data-category="Peintures"]{--cat:#FF2E63;--cat-fg:#16120D}
.app-layout .category-pill[data-category="Paysages"]{--cat:#2152FF;--cat-fg:#FFF3D6}
.app-layout .category-pill[data-category="Fleurs & natures mortes"]{--cat:#FF5B22;--cat-fg:#16120D}
.app-layout .category-pill[data-category="Animaux"]{--cat:#27D0A3;--cat-fg:#16120D}
.app-layout .category-pill[data-category="Japon & estampes"]{--cat:#A8E0FA;--cat-fg:#16120D}
.app-layout .category-pill[data-category="Photographies"]{--cat:#FFF3D6;--cat-fg:#16120D}
.app-layout .category-pill.category-pill:not([aria-pressed=true]){background:color-mix(in srgb,var(--cat) 32%,#FFF3D6)!important;color:#16120D!important}
.app-layout .category-pill.category-pill[aria-pressed=true]{background:var(--cat)!important;color:var(--cat-fg)!important;transform:translate(-2px,-3px)}
#catalog-view #puzzle-grid{background:#16120D}
#catalog-view:has(.category-pill[data-category="Peintures"][aria-pressed=true]) #puzzle-grid{background:#FF2E63}
#catalog-view:has(.category-pill[data-category="Paysages"][aria-pressed=true]) #puzzle-grid{background:#2152FF}
#catalog-view:has(.category-pill[data-category="Fleurs & natures mortes"][aria-pressed=true]) #puzzle-grid{background:#FF5B22}
#catalog-view:has(.category-pill[data-category="Animaux"][aria-pressed=true]) #puzzle-grid{background:#27D0A3}
#catalog-view:has(.category-pill[data-category="Japon & estampes"][aria-pressed=true]) #puzzle-grid{background:#A8E0FA}
#catalog-view:has(.category-pill[data-category="Photographies"][aria-pressed=true]) #puzzle-grid{background:#FFF3D6}
#catalog-view #puzzle-grid.jig-group{padding:0!important;margin-bottom:30px}

/* ===== Marketplace, friend trades and offers ===== */
#boosters-view .small-copy{font-size:16px;font-weight:600}
.collection-order-grid{gap:4px!important}
.collection-order{display:flex;flex-direction:column;gap:8px;padding:30px!important;background:var(--cream)!important;color:var(--ink)!important;--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--btn-bg:var(--ink);--btn-fg:var(--y);border:0!important}
.collection-order:nth-child(4n+2){background:var(--sky)!important}
.collection-order:nth-child(4n+3){background:var(--teal)!important}
.collection-order:nth-child(4n){background:var(--orange)!important}
.collection-order h3{margin:4px 0 0;font-weight:900;font-stretch:112%;font-size:19px;color:var(--ink)}
.collection-order :is(p,small){color:var(--ink)!important}
.collection-order .order-price{font-weight:900;font-stretch:125%;font-size:30px;color:var(--ink)}
.collection-order .order-wanted{align-self:flex-start;padding:6px 10px;background:var(--ink);color:var(--y)!important;font-family:var(--mono);font-weight:700;font-size:12px}
.collection-order .button{align-self:flex-start}
#boosters-view .empty-state,#profile-view .empty-state{background:var(--cream);color:var(--ink);font-size:16px;font-weight:600;box-shadow:6px 6px 0 var(--ink);border-radius:0}
.collection-trade-dialog{background:var(--y) url(/grain.svg)!important;color:var(--ink)!important;--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--bg:var(--y);--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);border-radius:0!important;box-shadow:12px 12px 0 var(--ink)!important;padding:30px!important}
.collection-trade-dialog h2{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:32px;color:var(--ink);text-shadow:4px 4px 0 var(--pink)}
.collection-trade-dialog :is(label,p,small,legend){color:var(--ink)!important;font-weight:700}
.collection-trade-dialog :is(select,input:not([type=checkbox]):not([type=radio])){background:#fff!important;color:var(--ink)!important;border:0!important;border-radius:0!important;box-shadow:4px 4px 0 var(--ink)!important;min-height:48px}
#profile-friends :is(.friends-card,section){background:var(--cream);color:var(--ink);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--bg:var(--y);--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);border:0;border-radius:0;box-shadow:8px 8px 0 var(--ink);padding:26px}
#profile-friends :is(h2,h3,strong,p,small,label,span){color:var(--ink)}
#profile-friends input{background:#fff!important;box-shadow:4px 4px 0 var(--ink)!important;border-radius:0!important}
#profile-friends .friend-row,#profile-friends li{border:0!important}

/* ===== My artworks ===== */
.collection-tableau .tableau-preview{background:#FFFFFFa6!important}
.collection-tableau .collection-progress{font-family:var(--mono);font-weight:700;font-size:14px}
.booster-filter{gap:10px}

/* ===== Credits page ===== */
#credits-view{max-width:1240px}
#credits-view .credit-dialog-note{font-size:19px;max-width:760px}
#credits-view .credit-dialog-balance:empty{display:none}
#credits-view .credit-dialog-balance{background:transparent;box-shadow:none;color:var(--ink);font-size:15px;padding:0;margin:8px 0 0}
.credit-wallet{display:flex;flex-wrap:wrap;gap:4px;margin:30px 0 8px;filter:drop-shadow(8px 8px 0 var(--ink))}
.credit-wallet-card{padding:24px 34px;background:var(--ink);color:var(--cream)}
.credit-wallet-card.is-points{background:var(--teal);color:var(--ink)}
.credit-wallet-card span{display:block;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em}
.credit-wallet-value{display:block;font-weight:900;font-stretch:125%;font-size:clamp(56px,7vw,96px);line-height:.95}
.credit-wallet-card.is-credits .credit-wallet-value{color:var(--y)}
#credits-view .credit-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4px!important;margin-top:56px;filter:drop-shadow(8px 8px 0 var(--ink))}
#credits-view .credit-actions>.button{grid-column:1/-1;justify-self:start}
.credit-card{display:flex;flex-direction:column;gap:14px;padding:34px;background:var(--pink);color:var(--ink);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--btn-bg:var(--ink);--btn-fg:var(--y)}
.credit-card.is-convert{background:var(--cream)}
.credit-card.is-soon{background:var(--blue);color:var(--cream);--text:var(--cream);--btn-bg:var(--cream);--btn-fg:var(--ink)}
.credit-card h2{margin:0;font-weight:900;font-stretch:118%;font-size:32px;line-height:.95;text-transform:uppercase;color:inherit}
.credit-card p,.credit-card label{margin:0;font-size:16px;color:inherit!important}
.credit-card .button{align-self:flex-start;margin-top:auto}
#credits-view .credit-card form{display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:0!important;background:transparent!important;box-shadow:none!important}
.credit-card-kicker{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.06em}
.credit-reserve{display:flex;gap:2px}
.credit-reserve i{width:42px;height:42px;background:var(--ink);opacity:.2;-webkit-mask:url(/piece.svg) center/contain no-repeat;mask:url(/piece.svg) center/contain no-repeat}
.credit-reserve i.on{opacity:1}
.credit-earn{margin-top:96px}
.credit-earn h2{margin:0 0 24px;font-weight:900;font-stretch:125%;font-size:clamp(34px,4vw,58px);text-transform:uppercase}
.credit-earn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px;filter:drop-shadow(8px 8px 0 var(--ink))}
.credit-earn-card{padding:34px;background:var(--sky)}
.credit-earn-card:nth-child(2){background:var(--orange)}
.credit-earn-card:nth-child(3){background:var(--teal)}
.credit-earn-card strong{display:block;margin:10px 0;font-weight:900;font-stretch:125%;font-size:60px;line-height:.95}
.credit-earn-card p{margin:0;font-size:16px}

/* ===== Sign-up: yellow form, ink story panel with a puzzle that assembles ===== */
#auth-dialog{background:var(--y) url(/grain.svg)!important;color:var(--ink);--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--bg:var(--y);--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);border-radius:0!important;box-shadow:14px 14px 0 var(--pink)!important;max-width:1060px}
#auth-dialog .auth-content :is(h2,p,label,span,small,strong){color:var(--ink)}
#auth-dialog #auth-title{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(32px,3.6vw,52px);line-height:.92;text-shadow:4px 4px 0 var(--pink)}
#auth-dialog .auth-story{background:var(--ink)!important;color:var(--cream);--text:var(--cream);--muted:#C9BFA8;border:0!important;border-radius:0!important}
#auth-dialog .auth-story :is(h2,p,li,span){color:var(--cream)}
#auth-dialog .auth-story h2{font-weight:900;font-stretch:118%;text-transform:uppercase;color:var(--y)}
#auth-dialog input:not([type=checkbox]){background:#fff!important;color:var(--ink)!important;border:0!important;border-radius:0!important;box-shadow:4px 4px 0 var(--ink)!important;min-height:52px}
#auth-dialog input:not([type=checkbox]):focus{box-shadow:6px 6px 0 var(--pink)!important;transform:translate(-2px,-2px)}
#auth-dialog .auth-switch{background:transparent!important;gap:4px}
#auth-dialog .auth-switch button:not(.current){background:#16120D1f!important;color:var(--ink)!important}
#auth-dialog .auth-steps span{border-radius:0!important}
#auth-dialog .auth-steps span.current{background:var(--ink)!important;color:var(--y)!important}
#auth-dialog .auth-preview{background:var(--cream)!important;border:0!important;border-radius:0!important;box-shadow:4px 4px 0 var(--ink)}
.auth-art.auth-board{position:relative!important;display:block!important;width:240px!important;height:240px!important;margin:28px auto 10px!important;background:repeating-linear-gradient(90deg,#FFF3D614 0 1px,transparent 1px 80px),repeating-linear-gradient(0deg,#FFF3D614 0 1px,transparent 1px 80px)!important;border:0!important}
#auth-dialog .auth-story{overflow:hidden}
.auth-art.auth-board{transform:scale(.72)!important;transform-origin:top center;margin:34px auto -54px!important}
#auth-dialog .provider-button.provider-chatgpt,#auth-dialog .provider-button.provider-chatgpt *{color:var(--cream)!important}
.auth-board-piece{position:absolute;width:128px;height:128px;filter:drop-shadow(3px 4px 0 #0008)}
.auth-board-piece img{position:absolute;width:240px;height:240px;max-width:none;object-fit:cover}
.auth-board-piece.placed{filter:none}
.auth-board-count{display:block;text-align:center;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--y)!important}

/* ===== Game setup: settings become stacked coloured pieces ===== */
.app-layout #setup-view .prepare-settings{background:transparent!important;padding:0!important;box-shadow:none!important;--text:var(--ink);--muted:#4E3F1B;--amber:var(--ink);--bg:var(--y);--btn-bg:var(--ink);--btn-fg:var(--y);--sh:var(--ink);color:var(--ink)}
.app-layout #setup-view .prepare-settings>h2{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:26px}
#setup-form{display:flex;flex-direction:column;gap:4px}
#setup-form>:is(.setting-switch,.setup-categories,.form-grid,.classic-options){margin:0!important;padding:24px!important;background:var(--cream)!important;color:var(--ink)!important}
#setup-form>.setup-categories{background:var(--sky)!important}
#setup-form>.form-grid{background:var(--teal)!important}
#setup-form>.classic-options{background:var(--orange)!important}
#setup-form :is(label,legend,small,span,strong,p){color:var(--ink)!important}
#setup-form :is(select,input[type=number],input[type=text],input:not([type])){background:#fff!important;color:var(--ink)!important;border:0!important;border-radius:0!important;box-shadow:3px 3px 0 var(--ink)!important}
#setup-form .time-estimate,#setup-form #setup-rules{margin:16px 0 0!important;padding:0!important}
#setup-form #setup-submit{margin-top:16px;min-height:66px;font-size:19px;text-transform:uppercase;font-stretch:112%}
.app-layout #setup-view .prepare-art{box-shadow:10px 10px 0 var(--ink)}
.app-layout #setup-view .prepare-heading h1{font-size:clamp(44px,6vw,92px)}
#setup-form .category-pill[aria-pressed=true],#setup-form .category-pill[aria-pressed=true] *{color:var(--cat-fg)!important}
#setup-form :is(.form-grid,.classic-options,.setup-categories) :is(.setting-switch,.battle-image-note){background:#fff!important;box-shadow:3px 3px 0 var(--ink)}
#setup-form .battle-image-note *{color:var(--ink)!important}
.app-sidebar .nav-button:not(.current){-webkit-mask:none!important;mask:none!important;border-right:0!important}
@media(max-width:700px){#arena-view .welcome h1{font-size:clamp(26px,8.4vw,40px)!important}.app-sidebar .nav-button.current{--pk:10px}}

/* ===== Sign-up as a full page, not a popup ===== */
#auth-dialog[open]{position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:0!important;box-shadow:none!important;overflow:auto!important;overflow-x:hidden!important}
#auth-dialog::backdrop{background:var(--y)}
#auth-dialog .auth-layout{min-height:100dvh!important;grid-template-columns:minmax(0,46fr) minmax(0,54fr)!important}
#auth-dialog .auth-story{display:flex!important;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,80px)!important;min-height:100dvh}
#auth-dialog .auth-story .auth-brand{position:absolute;top:28px;left:clamp(32px,5vw,80px)}
#auth-dialog .auth-art.auth-board{transform:scale(1.15)!important;margin:60px auto 50px!important}
#auth-dialog .auth-content{width:min(560px,100%);margin:auto;padding:clamp(32px,6vh,72px) clamp(24px,4vw,56px)!important;align-self:center}
#auth-dialog .auth-close{position:fixed!important;top:20px;right:24px;z-index:3;width:52px;height:52px;font-size:28px;background:var(--ink)!important;color:var(--y)!important;border:0!important}
@media(max-width:900px){
  #auth-dialog .auth-layout{display:block!important}
  #auth-dialog .auth-story{min-height:0;padding:24px!important}
  #auth-dialog .auth-story .auth-brand{position:static}
  #auth-dialog .auth-content{padding:28px 20px 48px!important}
  #auth-dialog .auth-art.auth-board{transform:scale(.6)!important;margin:20px auto -80px!important}
}