/* Account desk: shared borders, responsive navigation, and sculptural tiles. */
:root { --desk-border:rgba(255,255,255,.38); --desk-surface:rgba(24,25,29,.88); --desk-muted:#bcbcc2; }
:root.warm { --desk-border:#b8b2a9; --desk-surface:rgba(247,243,235,.92); --desk-muted:#615e58; }
[hidden] { display:none!important; }
main > :is(.playground,.home-catalog),.utility-dialog {border:1px solid var(--desk-border)!important;}
.account-header {position:relative;z-index:5;margin:20px 0 0;}
.account-row {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;}
.account-header button,.account-header input {font:inherit;color:inherit;}
.account-row button {cursor:pointer;background:transparent;border:0;}
.profile-trigger {display:flex;align-items:center;gap:12px;text-align:left;}
.avatar {display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#d9f183;color:#222;font-weight:800;border:1px solid #a8ba6a;}
.account-row small {display:block;font-size:11px;color:var(--desk-muted);margin-bottom:5px;}
.balance-trigger {justify-self:end;text-align:right;}
.balance-trigger strong {font-size:17px;}
.balance-trigger strong span {margin-left:12px;}
.omni-search {position:relative;max-width:360px;}
.omni-search label {position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;}
#omniSearch {width:100%;box-sizing:border-box;border:1px solid var(--desk-border);border-radius:30px;}
.omni-magnifier{position:absolute;right:16px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--desk-muted);pointer-events:none;}
#omniSearch::placeholder {color:var(--desk-muted);opacity:1;}
#omniResults {position:absolute;left:0;right:0;top:calc(100% + 10px);padding:8px;border-radius:20px;background:var(--desk-surface);backdrop-filter:blur(24px);border:1px solid var(--desk-border);box-shadow:0 12px 30px #0003;max-height:330px;overflow:auto;}
#omniResults :is(a,button) {display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:13px 10px;box-sizing:border-box;border:0;border-radius:12px;color:inherit;text-decoration:none;background:transparent;text-align:left;font-size:13px;cursor:pointer;}
#omniResults :is(a,button):hover {background:#8882;}
#omniResults small {font-size:10px;white-space:nowrap;margin:0;}
#omniResults p {font-size:12px;padding:12px;}
.account-actions {display:flex;justify-content:center;gap:10px;margin-top:24px;}
.account-actions button {border:1px solid var(--desk-border);border-radius:30px;background:var(--desk-surface);padding:12px 22px;display:flex;gap:10px;align-items:center;font-size:13px;cursor:pointer;}
/* Keep the hero identity, with account controls now above it. */
.playground .nav-left,.playground .nav-actions {visibility:hidden;pointer-events:none;}
.quick-layout {grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1fr);gap:8px;}
.quick-middle {grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:16px;}
.quick-favorites,.warm .quick-favorites {background:#df237b;color:#fff6fb;overflow:visible;min-height:205px;isolation:isolate;}
.quick-favorites .quick-kicker,.quick-favorites p {max-width:70%;}
.quick-favorites .quick-avatars img {border-color:#df237b;}
.heart-object {position:absolute;right:-25px;top:-43px;width:clamp(118px,11vw,158px);height:auto;overflow:visible;filter:drop-shadow(-5px 12px 6px rgba(74,7,38,.36));transform:rotate(12deg);pointer-events:none;z-index:2;}
@media (prefers-reduced-motion:no-preference){
 .favorite-heart-solid{animation:favorite-heart-float 3.8s ease-in-out infinite alternate}
 @keyframes favorite-heart-float{to{transform:translateY(-4px)}}
}

.quick-box {position:relative;overflow:visible;width:100%;max-width:100%;min-width:0;aspect-ratio:1;min-height:0;align-self:start;justify-self:stretch;padding:clamp(16px,2vw,24px);background:#1642d9;color:#ffe84c;isolation:isolate;box-shadow:inset -14px -8px 0 #112c9c;transform-style:preserve-3d;}
.quick-box .quick-kicker {display:block;font-size:8px;letter-spacing:.7px;margin-top:12px;color:#fff;white-space:normal;overflow-wrap:anywhere;line-height:1.5;}
.box-word {display:block;font-size:clamp(32px,4vw,57px);line-height:.85;letter-spacing:-3px;margin:16px 0 24px;transform:rotate(-5deg);font-weight:900;}
.box-word span {font-size:30px;position:absolute;right:3px;top:12px;}
.box-caption {display:block;font-size:10px;color:#fff;margin-bottom:10px;}
.box-checker {position:absolute;bottom:0;left:0;right:14px;height:28px;background:repeating-conic-gradient(#fff 0 25%,transparent 0 50%) 0 0/40px 40px;border-radius:0 0 0 25px;}
/* Article tile: text stays in flow; illustration keeps its own reserved space. */
.quick-layout > *, .quick-middle > * {min-width:0;}
.quick-article {background:#ffda38;color:#352907;overflow:visible;min-height:440px;display:flex;flex-direction:column;padding:24px 20px 0;container-type:inline-size;}
.quick-article:after {display:none;}
.quick-article > .quick-kicker {position:static;line-height:1.5;overflow-wrap:anywhere;}
.quick-article-copy {position:static;margin-top:34px;margin-bottom:36px;min-width:0;}
.quick-article-copy small {display:block;line-height:1.6;font-size:10px;}
.quick-article-copy h3 {font-size:clamp(22px,12cqi,32px);line-height:1.13;letter-spacing:-.7px;margin:16px 0 22px;overflow-wrap:anywhere;}
.quick-article .quick-link {display:block;font-size:12px;line-height:1.5;}
.utility-dialog {box-sizing:border-box;width:min(880px,calc(100% - 40px));max-height:calc(100dvh - 48px);padding:40px;border-radius:34px;background:var(--desk-surface);color:inherit;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 22px 70px #0003;overflow:auto;}
.utility-dialog::backdrop {background:#0002;}
.utility-close {position:sticky;top:0;float:right;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--desk-border);border-radius:50%;background:var(--desk-surface);color:inherit;font:26px/1 Arial;cursor:pointer;}
.utility-dialog .home-catalog {content-visibility:visible!important;contain:none!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:none!important;backdrop-filter:none!important;}
.utility-dialog .home-catalog:before,.utility-dialog .home-catalog:after {display:none!important;}
.utility-dialog h2 {padding-right:30px;}
.account-identity {display:flex;align-items:center;gap:20px;}
.account-identity .avatar {width:70px;height:70px;font-size:28px;flex-shrink:0;}
.account-identity h2 {margin-bottom:4px;}
.account-identity p {margin-top:4px;}
.account-facts {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;}
.account-facts span {padding:18px;border:1px solid var(--desk-border);border-radius:18px;font-size:12px;color:var(--desk-muted);}
.account-facts strong {display:block;margin-top:10px;color:inherit;font-size:15px;}
.service-products {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.service-products button {display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border:1px solid var(--desk-border);border-radius:18px;color:inherit;background:#8881;font:inherit;font-size:13px;cursor:pointer;}
.service-products img {width:40px;height:46px;object-fit:cover;border-radius:9px;}
.service-products b {margin-left:auto;}
@media(max-width:1280px){.quick-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)}.account-row{gap:18px}.omni-search{max-width:none}}
@media(min-width:651px) and (max-width:1000px){
 .quick-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quick-article{grid-column:1/-1;min-height:0}

}
@media(max-width:650px){
 .account-header{margin-top:14px}.account-row{grid-template-columns:1fr 1fr;gap:18px}.omni-search{grid-row:2;grid-column:1/-1}.profile-trigger{grid-column:1;grid-row:1}.balance-trigger{grid-column:2;grid-row:1}.account-actions{margin-top:14px}.account-actions button{flex:1;justify-content:center}.account-row small{font-size:10px}.avatar{width:42px;height:42px}.balance-trigger strong{font-size:14px}
 .quick-layout{grid-template-columns:1fr 1fr}.quick-middle{display:contents}.quick-favorites{grid-column:1/-1;padding-right:100px}.quick-box{grid-column:1/-1;max-width:290px;width:100%;justify-self:center;padding:28px;min-height:0}.box-word{font-size:62px;margin-top:28px}.quick-article-copy{margin-top:24px}
 .utility-dialog{width:calc(100% - 32px);padding:24px;max-height:calc(100dvh - 40px);border-radius:28px}.utility-dialog h2{font-size:28px}.service-products{grid-template-columns:1fr}.account-facts{grid-template-columns:1fr}.account-facts span{display:flex;align-items:center;justify-content:space-between}.account-facts strong{margin:0}
}
@media(prefers-reduced-motion:reduce){.box-lid{transition:none}}

/* Account header: balance, four actions, then full-width discovery. */
.account-row{display:flex;justify-content:center}
.profile-balance{display:flex;align-items:center;gap:12px}
.profile-trigger strong{font-size:20px;font-variant-numeric:tabular-nums}
#balanceVisibility{position:relative;display:grid;place-items:center;align-self:flex-end;margin-bottom:5px;width:20px;height:20px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
#balanceVisibility::after{content:"";position:absolute;inset:-12px;}
#balanceVisibility svg{width:20px;height:20px}.eye-slash{display:none}#balanceVisibility[aria-pressed=true] .eye-slash{display:block}
.account-header>.omni-search{max-width:760px;width:100%;margin:22px auto}
#omniSearch{height:40px;min-height:40px;padding:8px 44px 8px 18px;line-height:22px;background:var(--desk-surface);transform:none;}
.account-actions{align-items:center}
/* Plain frosted switch; sun left and moon right, without glow. */
.account-actions .glass-theme{--orb-size:36px;--orb-travel:56px;position:relative;flex:none;width:100px;height:44px;min-width:100px;overflow:hidden;padding:0;border-radius:30px;border:1px solid var(--desk-border);background:var(--desk-surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:none;transition:background .4s,border-color .4s}
.theme-orb{position:absolute;left:3px;top:3px;width:var(--orb-size);height:var(--orb-size);border-radius:50%;transform:translateX(var(--orb-travel));background:transparent;border:1px solid var(--desk-border);box-sizing:border-box;box-shadow:none;color:inherit;transition:transform .45s cubic-bezier(.22,.9,.3,1)}
.theme-orb svg{position:absolute;inset:20%;width:60%;height:60%;transition:opacity .25s,transform .45s;pointer-events:none}
.theme-orb .toggle-sun{opacity:0;transform:rotate(-45deg) scale(.8)}
.theme-orb .toggle-moon{opacity:1;transform:rotate(0) scale(1)}
.glass-theme[aria-checked=true]{background:var(--desk-surface);border-color:var(--desk-border);box-shadow:none;}
.glass-theme[aria-checked=true] .theme-orb{transform:translateX(0);color:inherit;}
.glass-theme[aria-checked=true] .toggle-sun{opacity:1;transform:rotate(0) scale(1)}
.glass-theme[aria-checked=true] .toggle-moon{opacity:0;transform:rotate(45deg) scale(.8)}
.theme-caption{position:absolute;inset:0 calc(var(--orb-size) + 5px) 0 3px;display:grid;place-items:center;font-size:clamp(11px,1.2vw,13px);line-height:1;font-weight:500;pointer-events:none}
.glass-theme[aria-checked=true] .theme-caption{inset:0 3px 0 calc(var(--orb-size) + 5px)}
.glass-theme:focus-visible,#balanceVisibility:focus-visible,.floating-chat:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* Match the checkout glass recipe; retain theme-specific edges. */
body .utility-dialog{background:linear-gradient(125deg,#ffffff16,#ffffff04),rgba(17,20,26,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:inset 0 1px 0 #ffffff70,0 14px 32px #0005;color:var(--ink)}
body.warm .utility-dialog{background:linear-gradient(125deg,#ffffff50,#ffffff16),rgba(242,238,230,.78);box-shadow:inset 0 1px 0 #ffffffcc,0 14px 32px #0003}
.utility-dialog::backdrop{background:transparent}
.profile-wallet{margin:24px 0;padding:24px;border:1px solid var(--desk-border);border-radius:22px;background:#8881}
.profile-wallet h3{font-size:32px;margin:10px 0}.profile-wallet p{margin:0;font-size:13px}
.language-setting{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;font-size:14px}
.language-setting select{font:inherit;color:inherit;background:var(--desk-surface);border:1px solid var(--desk-border);padding:12px;border-radius:14px;max-width:65%}
.floating-chat{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));z-index:30;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;padding:12px;border:1px solid var(--desk-border);background:linear-gradient(135deg,#ffffff25,#ffffff05),#20242a80;color:var(--ink);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 1px #fff8,0 6px 20px #0003;cursor:pointer}
.warm .floating-chat{background:linear-gradient(135deg,#ffffff80,#ffffff15),#eee8df80}.floating-chat svg{width:22px;height:22px}
@media(max-width:650px){.account-row{display:flex}.floating-chat{right:calc(28px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:46px;height:46px;padding:11px}body .utility-dialog{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.profile-wallet h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.glass-theme,.theme-orb,.theme-orb svg{transition:none!important}}

/* Services and checkout share the same responsive modal frame. */
dialog#selection,
#utilityDialog[data-panel="services"] {
  --modal-gap: clamp(24px, 4vw, 40px);
  inset: max(var(--modal-gap), env(safe-area-inset-top))
    max(var(--modal-gap), env(safe-area-inset-right))
    max(var(--modal-gap), env(safe-area-inset-bottom))
    max(var(--modal-gap), env(safe-area-inset-left));
  width: min(
    1040px,
    calc(
      100% - max(var(--modal-gap), env(safe-area-inset-left)) -
        max(var(--modal-gap), env(safe-area-inset-right))
    )
  );
  max-height: calc(
    100vh - max(var(--modal-gap), env(safe-area-inset-top)) -
      max(var(--modal-gap), env(safe-area-inset-bottom))
  );
  max-height: calc(
    100dvh - max(var(--modal-gap), env(safe-area-inset-top)) -
      max(var(--modal-gap), env(safe-area-inset-bottom))
  );
  margin: auto;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-width: thin;
}
#utilityDialog[data-panel="services"] {max-width:none;padding:36px;border-radius:30px;}
@media(max-width:650px){#utilityDialog[data-panel="services"]{padding:24px 16px;border-radius:24px;}}

/* Shared glass clarity, matching the Play Desk reference surface. */
body {--desk-glass-blur:12px;--panel-blur:var(--desk-glass-blur);}
body .playground::before,
body #quickAccess,
body #catalog.home-catalog,
body .account-actions button,
body #balanceVisibility,
body #omniSearch,
body #omniResults,
body .floating-chat,
body .utility-dialog,
body dialog#selection {
  backdrop-filter:blur(var(--desk-glass-blur));
  -webkit-backdrop-filter:blur(var(--desk-glass-blur));
}
body .account-actions button,
body .account-actions .glass-theme,
body #balanceVisibility,
body #omniSearch {background:rgba(12,14,19,.58);}
body.warm .account-actions button,
body.warm .account-actions .glass-theme,
body.warm #balanceVisibility,
body.warm #omniSearch {background:rgba(247,243,235,.58);}

/* Sharp vector wallpaper fitted between the hero and catalog boundaries. */
html body > .wallpaper {
 position:fixed;inset:0 auto auto 0;width:0;height:0;min-height:0;
 background:transparent center / contain no-repeat;
 transform-origin:top left;will-change:transform;
}
html body > .dark-wall{background-image:url(assets/itembox-wordmark-dark.svg);}
html body.warm > .warm-wall{background-image:url(assets/itembox-wordmark-warm.svg);}
@media(max-width:650px){html body > .wallpaper{transform-origin:top center;}}

body #balanceVisibility,body.warm #balanceVisibility{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;}

/* One cubic model: the same four hinged faces remain attached in both states. */
body #quickBox{width:100%;max-width:280px;aspect-ratio:auto;padding:0;margin:0 auto;background:none;border:0;box-shadow:none;overflow:visible;perspective:900px;display:grid;place-items:center;isolation:auto;}
.box-model{position:relative;display:block;width:var(--cube);height:var(--cube);transform-style:preserve-3d;transform:rotateX(18deg) rotateY(-28deg) rotateZ(-9deg);transition:transform .8s cubic-bezier(.2,.75,.2,1);pointer-events:none;}
.box-face{position:absolute;inset:0;border:1px solid #5774c7;background:linear-gradient(125deg,#163fba,#102c88);backface-visibility:visible;box-sizing:border-box;}
/* The flaps meet the walls without a painted hinge/rim stripe. */
.box-front,.box-back,.box-left,.box-right{border-top:0;}
.box-front{transform:translateZ(var(--half));padding:calc(var(--cube)*.1125) calc(var(--cube)*.0875);text-align:left;}
.box-front small{display:block;color:#e3e8ff;font:calc(var(--cube)*.0375)/1.6 monospace;letter-spacing:.3px;}
.box-front strong{display:block;font-size:calc(var(--cube)*.2375);line-height:.86;letter-spacing:-1px;color:#ffe552;margin-top:calc(var(--cube)*.1375);}
.box-right{transform:rotateY(90deg) translateZ(var(--half));background:linear-gradient(90deg,#0c236e,#173b9d);display:grid;place-items:center;color:#ffe552;font-size:42px;}
.box-left{transform:rotateY(-90deg) translateZ(var(--half));background:#163a9b;}
.box-back{transform:rotateY(180deg) translateZ(var(--half));background:#102767;}
.box-bottom{transform:rotateX(-90deg) translateZ(var(--half));background:#0a1d58;}
.cube-checker{position:absolute;bottom:0;left:0;right:0;height:18px;background:repeating-conic-gradient(#f4f3e9 0 25%,#173697 0 50%) 0 0/28px 28px;}
.box-roof{position:absolute;inset:0;transform:rotateX(90deg) translateZ(var(--half));transform-style:preserve-3d;}
.box-interior{position:absolute;inset:0;background:radial-gradient(ellipse,#172b70,#050d29);border:0;display:grid;place-items:center;color:#ffe552;font-size:42px;transform:translateZ(-3px);}
.cube-flap{position:absolute;display:block;background:linear-gradient(125deg,#2852ba,#163788);border:0;box-sizing:border-box;transition:transform .85s cubic-bezier(.2,.75,.2,1);backface-visibility:visible;}
.cube-front,.cube-back{left:0;width:100%;height:50%;transform:translateZ(2px);}
.cube-back{top:0;transform-origin:center top;}
.cube-front{bottom:0;transform-origin:center bottom;}
.cube-left,.cube-right{top:0;height:100%;width:50%;}
.cube-left{left:0;transform-origin:left center;}
.cube-right{right:0;transform-origin:right center;}
#quickBox[aria-expanded="true"] .cube-back{transform:rotateX(130deg);}
#quickBox[aria-expanded="true"] .cube-front{transform:rotateX(-130deg);}
#quickBox[aria-expanded="true"] .cube-left{transform:rotateY(-125deg);}
#quickBox[aria-expanded="true"] .cube-right{transform:rotateY(125deg);}
#quickBox[aria-expanded="true"] .box-model{transform:translateY(8px) rotateX(-25deg) rotateY(-28deg) rotateZ(-9deg);}
.cube-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;color:var(--ink);font-size:12px;}
body #quickAccess.box-is-open{overflow:visible;content-visibility:visible;contain:none;z-index:10;}
.box-is-open .quick-middle{position:relative;z-index:10;}
@media(max-width:650px){body #quickBox{width:100%;}}
@media(prefers-reduced-motion:reduce){.box-model,.cube-flap{transition:none;}}

/* Reserve space for the folded photo above the lower-right corner. */
.quick-article .book-object {
 display:block;pointer-events:none;flex:none;align-self:flex-end;
 width:min(82%,260px);height:auto;aspect-ratio:1;
 margin:auto -38px -17px auto;filter:drop-shadow(3px 9px 7px #382b163b);
}
@media(max-width:1000px){
 .quick-article{position:relative;}
 .quick-article .book-object{position:absolute;right:-12px;bottom:-15px;margin:0;width:min(39%,194px);}
 .quick-article .quick-article-copy{max-width:57%;}
 .quick-layout .quick-article{min-height:240px;}
}

/* Account popup: compact content-sized layout with comfortable viewport margins. */
#utilityDialog[data-panel="account"]{width:min(520px,calc(100% - 48px));max-height:calc(100dvh - 64px);padding:26px;border-radius:28px;}
#utilityDialog[data-panel="account"] .eyebrow{margin-top:8px;margin-bottom:20px;}
#utilityDialog[data-panel="account"] .account-identity{gap:14px;clear:both;}
#utilityDialog[data-panel="account"] .account-identity .avatar{width:52px;height:52px;font-size:22px;}
#utilityDialog[data-panel="account"] .account-identity h2{font-size:26px;margin-top:0;}
#utilityDialog[data-panel="account"] .account-identity p{font-size:13px;margin-bottom:0;}
#utilityDialog[data-panel="account"] .profile-wallet{margin:18px 0;padding:18px;border-radius:18px;}
#utilityDialog[data-panel="account"] .profile-wallet h3{font-size:28px;margin:8px 0;}
#utilityDialog[data-panel="account"] .account-facts{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;gap:8px;}
#utilityDialog[data-panel="account"] .account-facts span{display:block;padding:12px;border-radius:14px;}
#utilityDialog[data-panel="account"] .account-facts strong{margin-top:5px;font-size:14px;}
#utilityDialog[data-panel="account"] .language-setting{margin-top:18px;font-size:13px;}
#utilityDialog[data-panel="account"] .service-note{font-size:12px;line-height:1.55;margin:14px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;}
@media(max-width:650px){#utilityDialog[data-panel="account"]{padding:20px;width:calc(100% - 40px);max-height:calc(100dvh - 64px);border-radius:24px;}}

/* All preview popups use the checkout reference material. */
body {
 --popup-glass:linear-gradient(125deg,#ffffff16,#ffffff04),rgba(17,20,26,.72);
 --popup-blur:7px;
 --popup-shadow:inset 0 1px 0 #ffffff70,0 14px 32px #0005;
}
body.warm {
 --tile-shadow:0 2px 4px #32291b12, 0 7px 16px #32291b18;
 --popup-glass:linear-gradient(125deg,#ffffff50,#ffffff16),rgba(242,238,230,.78);
 --popup-shadow:inset 0 1px 0 #ffffffcc,0 14px 32px #0003;
}
body.warm :is(.quick-game,.quick-favorites,.quick-article) {
 box-shadow:var(--tile-shadow);
}
body.warm :is(#omniSearch,.account-actions > button:not(.glass-theme)) {
 box-shadow:var(--control-shadow);
}
body:is(body,.warm) :is(dialog#selection,.utility-dialog) {
 background:var(--popup-glass);
 backdrop-filter:blur(var(--popup-blur));
 -webkit-backdrop-filter:blur(var(--popup-blur));
 box-shadow:var(--popup-shadow);
 border:1px solid var(--main-edge)!important;
 color:var(--ink);
}
body:is(body,.warm) dialog#articleDialog {
 background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
 box-shadow:var(--popup-shadow);border:1px solid var(--main-edge);
}
body:is(body,.warm) dialog#articleDialog::before {
 background:var(--popup-glass);
 backdrop-filter:blur(var(--popup-blur));
 -webkit-backdrop-filter:blur(var(--popup-blur));
}

/* Match the measured live hero surface across all three primary cards. */
body:is(body,.warm) :is(.playground,#quickAccess,#catalog.home-catalog) {
 background:var(--panel-glass);
 border:1px solid var(--main-edge)!important;
 box-shadow:var(--main-shadow);
}
body:is(body,.warm) .playground {backdrop-filter:none;-webkit-backdrop-filter:none;}
body:is(body,.warm) .playground::before {background:transparent;}
@media(max-width:650px){body{--desk-glass-blur:9px;--popup-blur:5px;}}

/* Slightly shorter side cards, with a dedicated gap above the BOX. */
.quick-game{padding-bottom:266px;}
@media(max-width:1000px){.quick-article-copy{margin-bottom:24px;}}
@media(max-width:650px){.quick-game{padding-bottom:246px;}}

/* Compact access desk: adjacent tiles share a small, consistent gutter. */
@media(max-width:650px){
 .quick-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-height:0;align-items:stretch;}
 .quick-middle{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-content:start;}
 .quick-game{grid-column:auto;min-height:0;padding:22px 14px 190px;z-index:2;}
 .quick-game h3{font-size:30px;letter-spacing:-1px;}
 .quick-game p{font-size:14px;}
 .quick-game img{height:205px;bottom:-12px;}
 .quick-game-status{left:12px;font-size:11px;}
 .quick-favorites{grid-column:auto;min-height:194px;padding:22px 13px 16px;}
 .quick-favorites .quick-kicker{font-size:8px;letter-spacing:1px;max-width:70%;}
 .quick-favorites h3{font-size:27px;letter-spacing:-1px;}
 .quick-favorites p{font-size:13px;max-width:95%;}
 .quick-favorites .quick-link{font-size:11px;}
 .heart-object{width:76px;top:-16px;right:-10px;}
 body #quickBox{max-width:100%;margin:0;}
 .quick-article{grid-column:1/-1;min-height:250px;padding:22px 20px 0;position:relative;}
 .quick-article-copy{margin:20px 0 32px;}
 .quick-article-copy h3{font-size:27px;}

}

@media(max-width:650px){.cube-caption{font-size:10px;}.quick-game img{width:100%;right:-4px;}.quick-game-status{bottom:10px;}.quick-article-copy{max-width:62%;}}

/* Mobile account controls: compact row, aligned balance, wider search. */
@media(max-width:650px){
 .profile-balance{gap:7px;align-items:flex-end;}
 .profile-trigger{padding:0;}
 .profile-trigger strong{display:block;line-height:24px;}
 #balanceVisibility{align-self:flex-end;width:20px;height:24px;margin:0;transform:translateY(-1px);}
 #balanceVisibility svg{width:17px;height:17px;}
 .account-actions{width:calc(100% - 32px);margin:18px auto 0;}
 .account-actions button{flex:1 1 0;min-width:0;min-height:34px;padding:7px 5px;gap:4px;font-size:11px;line-height:18px;white-space:nowrap;}
 .account-actions .glass-theme{--orb-size:26px;--orb-travel:34px;flex:0 0 68px;width:68px;min-width:68px;height:34px;min-height:34px;padding:0;}
 .account-header>.omni-search{width:calc(100% - 16px);margin:16px auto;}
 #omniSearch{height:36px;min-height:36px;padding:6px 44px 6px 18px;line-height:22px;}
}

/* Mobile catalog: two readable product tiles per row. */
@media(max-width:650px){
 #catalogGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 #catalogGrid .catalog-item{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px;border-radius:20px;}
 #catalogGrid .catalog-item img{width:52px;height:60px;flex:none;border-radius:12px;}
 #catalogGrid .catalog-item span{min-width:0;width:100%;font-size:12px;line-height:1.35;overflow-wrap:anywhere;}
 #catalogGrid .catalog-item small{font-size:10px;line-height:1.45;margin-top:5px;}
 #catalogGrid .catalog-item b{position:absolute;top:14px;right:12px;margin:0;font-size:15px;}
}

/* Keep the heart above adjacent tiles; give the BOX a little breathing room. */
.quick-middle{position:relative;z-index:3;}
.quick-article{z-index:1;}
body #quickBox{container-type:inline-size;--cube:min(205px,68cqw);--half:calc(var(--cube) / 2);margin-top:14px;height:284px;min-height:284px;}
/* A single gentle greeting; only the model moves, never the layout or lids. */
.box-greeting-active .box-model{animation:box-greeting 1.4s ease-in-out both;}
@keyframes box-greeting{
  0%,100%{transform:rotateX(18deg) rotateY(-28deg) rotateZ(-9deg);}
  18%{transform:translateY(2px) rotateX(18deg) rotateY(-28deg) rotateZ(-12deg);}
  40%{transform:translateY(-6px) rotateX(18deg) rotateY(-25deg) rotateZ(-6deg);}
  65%{transform:translateY(1px) rotateX(18deg) rotateY(-29deg) rotateZ(-11deg);}
  82%{transform:translateY(-2px) rotateX(18deg) rotateY(-28deg) rotateZ(-8deg);}
}
@media(max-width:650px){body #quickBox{--cube:min(139px,68cqw);margin-top:12px;height:216px;min-height:216px;}}
@media(prefers-reduced-motion:reduce){.box-greeting-active .box-model{animation:none;}}

.box-actions{display:grid;gap:12px;margin-top:24px;}

/* Selected BOX opening: Soft anticipation. Other dialogs keep their motion. */
body #quickBox.box-anticipating{animation:box-soft-anticipation .28s ease-in-out;}
@keyframes box-soft-anticipation{
  50%{transform:translateY(5px) scale(.95);}
}
body .utility-dialog[open][data-panel="box"]{
  animation:box-popup-soft .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes box-popup-soft{
  0%{opacity:0;transform:translateY(30px) scale(.85);}
  75%{opacity:1;transform:translateY(-4px) scale(1.015);}
  100%{opacity:1;transform:none;}
}
@media(prefers-reduced-motion:reduce){
  body #quickBox.box-anticipating,
  body .utility-dialog[open][data-panel="box"]{animation:none;}
}

/* Footer: two touching objects, without an enclosing glass panel. */
body .contact-footer{display:block;padding:56px 16px 64px;margin:0;border:0;background:none;box-shadow:none;color:var(--ink);}
.footer-pair{display:flex;justify-content:center;align-items:flex-end;max-width:700px;margin:0 auto;isolation:isolate;}
.contact-wallet{position:relative;flex:0 1 310px;min-width:0;height:300px;transform:rotate(-8deg);transform-origin:bottom right;z-index:2;}
.wallet-pocket{position:absolute;inset:auto 0 0;width:100%;height:250px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:16px;padding:30px;text-align:left;cursor:pointer;color:#f7f7f5;border:1px solid #454545;border-radius:25px 25px 35px 35px;background:linear-gradient(135deg,#303030,#151515 65%);box-shadow:inset 0 0 0 5px #232323,inset 0 0 0 6px #383838,0 8px 12px -4px #0005,0 24px 34px -8px #0006,0 40px 56px -16px #0004;z-index:8;}
.wallet-pocket:before{content:"";position:absolute;inset:10px;border:1px dashed #ffffff16;border-radius:19px 19px 26px 26px;pointer-events:none;}
body .wallet-pocket img{width:38px;height:32px;filter:none;object-fit:contain;margin:0 0 auto;}
.wallet-title{font-size:clamp(20px,3vw,30px);font-weight:700;letter-spacing:-.04em;line-height:1.1;}
.wallet-caption{font-size:12px;color:#c5c5c5;width:100%;display:flex;justify-content:space-between;gap:8px;}
.wallet-cards{position:absolute;inset:0;--step:72px;--left-step:2px;--offset:0px;--axis:-8deg;}
.wallet-card{
 position:absolute;bottom:160px;left:16.5%;width:67%;height:130px;box-sizing:border-box;
 overflow:hidden;isolation:isolate;border:1px solid #ffffff65;border-radius:17px;
 padding:13px 15px;display:flex;align-items:flex-start;justify-content:space-between;
 color:var(--print);background:var(--paper);text-decoration:none;text-align:left;
 font-size:14px;line-height:1.2;font-family:inherit;cursor:pointer;
 box-shadow:0 5px 12px #0003;transform-origin:center;
 transform:translateY(calc(var(--i)*9px));
 transition:transform .58s cubic-bezier(.22,.88,.25,1);
}
.wallet-card::before,.wallet-card::after{position:absolute;pointer-events:none;z-index:-1;}
.wallet-card::before{content:var(--mark);left:-.08em;bottom:-.3em;font:900 112px/1 system-ui;letter-spacing:-.1em;color:var(--accent);transform:rotate(-9deg);}
.wallet-card::after{content:"→";right:12%;bottom:5%;border-radius:50%;width:1.2em;height:1.2em;display:grid;place-items:center;background:var(--accent);color:var(--paper-ink,var(--paper));font:700 54px/1 system-ui;}
.wallet-card span{background:var(--paper-ink,var(--paper));color:var(--print);padding:3px 7px;border-radius:4px;font-weight:750;font-size:14px;}
.wallet-card b{font-size:16px;}
.wallet-instagram{--i:0;--angle:-10deg;--paper:#f2df40;--print:#322008;--accent:#fa962b;--mark:"◎";z-index:1;}
.wallet-whatsapp{--i:1;--angle:11deg;--paper:#f38425;--print:#38170a;--accent:#eaa5f5;z-index:2;}
.wallet-whatsapp::before{
 content:"";width:.95em;height:.95em;background:var(--accent);
 clip-path:polygon(44% 0,56% 0,56% 35%,81% 10%,90% 19%,65% 44%,100% 44%,100% 56%,65% 56%,90% 81%,81% 90%,56% 65%,56% 100%,44% 100%,44% 65%,19% 90%,10% 81%,35% 56%,0 56%,0 44%,35% 44%,10% 19%,19% 10%,44% 35%);
}
.wallet-email{--i:2;--angle:-7deg;--paper:#b7ddeddd;--paper-ink:#badfea;--print:#112e3f;--accent:#568bad;--mark:"@";z-index:3;}
.wallet-about{--i:3;--angle:9deg;--paper:#f6f2e7;--print:#242426;--accent:#c5beb3;--mark:"IB";z-index:4;}
.wallet-privacy{--i:4;--angle:-6deg;--paper:#d7b7ed;--print:#31203e;--accent:#9561ad;--mark:"§";z-index:5;}
.wallet-help{--i:5;--angle:6deg;--paper:#b8df88;--print:#193220;--accent:#608e54;--mark:"?";z-index:6;}
.contact-wallet.is-open .wallet-card{
 --row:calc(5 - var(--i));
 transform:translate(calc(var(--offset) - var(--row)*var(--left-step)),calc(-42px - var(--row)*var(--step))) rotate(calc(var(--angle) - var(--axis)));
 translate:0 var(--lift,0px);
 transition:transform .58s cubic-bezier(.22,.88,.25,1) calc(var(--i)*40ms),translate .18s ease;
}
@media (hover:hover) and (pointer:fine){
 .contact-wallet.is-open .wallet-card:hover{--lift:-8px;}
}
.contact-wallet.is-open .wallet-card:focus-visible{--lift:-8px;}
.wallet-pocket:focus-visible,.wallet-card:focus-visible{outline:3px solid #b9d957;outline-offset:4px;}
.footer-disclaimer{position:relative;flex:0 1 310px;min-width:0;box-sizing:border-box;margin:0 0 0 -10px;padding:30px 28px 24px;border:1px solid rgba(255,255,255,.8);border-radius:30px;background:linear-gradient(140deg,rgba(255,255,255,.86),rgba(255,253,248,.69) 42%,rgba(245,245,242,.76) 80%,rgba(255,255,255,.88));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:#22221f;transform:rotate(4deg);box-shadow:0 7px 12px -4px #0004,0 24px 34px -8px #0005,0 40px 56px -16px #0003,inset 0 2px 2px #fff,inset 0 -2px 4px #ffffff9c;z-index:3;}
.footer-label,.disclaimer-signature{font:10px/1.4 monospace;letter-spacing:.13em;color:#45453f;}
.footer-disclaimer h2{font-size:27px;line-height:1.12;letter-spacing:-.045em;margin:22px 0 16px;}
.footer-disclaimer p{font-size:12px;line-height:1.65;margin:0 0 12px;color:#33332f;}
.disclaimer-signature{display:block;margin-top:20px;}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;margin:64px auto 0;max-width:650px;font-size:11px;opacity:.75;}
.footer-bottom a{color:inherit;text-decoration:none;}
.footer-bottom .footer-email{display:block;margin-top:6px;text-decoration:underline;text-underline-offset:3px;}
@media(max-width:650px){
 body .contact-footer{padding:40px 7% 52px;}
 .footer-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;}
 .contact-wallet{height:auto;aspect-ratio:310/300;}
 .wallet-pocket,.footer-disclaimer{width:100%;height:auto;aspect-ratio:310/250;box-sizing:border-box;}
 .wallet-pocket{min-height:0;padding:8%;gap:1.4vw;border-radius:3.5vw;}
 .wallet-pocket:before{inset:5px;border-radius:inherit;}
 body .wallet-pocket img{width:14%;height:auto;}
 .wallet-title{font-size:clamp(14px,4vw,26px);}
 .wallet-caption{font-size:clamp(9px,1.7vw,12px);}
 .wallet-cards{--step:55.38%;--left-step:.96%;}
 .wallet-card{height:43.333%;bottom:53.333%;padding:4%;border-radius:2vw;transform:translateY(calc(var(--i)*6.923%));}
 .wallet-card span,.wallet-card b{font-size:clamp(9px,2vw,14px);padding:0;}
 .wallet-card::before{font-size:15vw;}
 .wallet-card::after{font-size:7vw;}
 .contact-wallet.is-open .wallet-card{transform:translate(calc(0% - var(--row)*var(--left-step)),calc(-32.31% - var(--row)*var(--step))) rotate(calc(var(--angle) - var(--axis)));}
 .footer-disclaimer{margin-left:-2%;padding:8%;border-radius:3.8vw;overflow:hidden;display:flex;flex-direction:column;}
 .footer-label{font-size:clamp(8px,1.5vw,10px);}
 .disclaimer-copy{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;scrollbar-width:thin;}
 .footer-disclaimer h2{font-size:clamp(14px,3.6vw,24px);margin:8px 0;}
 .footer-bottom{font-size:10px;margin-top:40px;}
}
@media(prefers-reduced-motion:reduce){.wallet-card,.contact-wallet.is-open .wallet-card{transition:none;}}

/* Shared search typography; touch inputs retain a zoom-safe editing size. */
:is(#omniSearch, #catalogSearch, #searchGames) {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
}
:is(#omniSearch, #catalogSearch, #searchGames)::placeholder {
  font-size: 13px;
  font-weight: 400;
}
@media (any-pointer: coarse) {
  :is(#omniSearch, #catalogSearch, #searchGames) { font-size: 16px; }
}

.footer-disclaimer .policy-link{display:inline-block;color:#26291f;font-size:13px;font-weight:650;text-underline-offset:3px;line-height:1.5;}

.member-choices{display:flex;flex-wrap:wrap;gap:10px;}
.member-message{padding:14px 0;border-bottom:1px solid var(--desk-border);}
.member-message p,.member-status{font-size:14px;}
#localRegistration label,#demoDeposit label{display:grid;gap:6px;}
#localRegistration input,#demoDeposit select{padding:10px 14px;border:1px solid var(--desk-border);border-radius:12px;background:var(--control-fill);color:var(--ink);font:inherit;font-size:16px;}
.profile-trigger small,.account-identity h2{max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:650px){
 .account-actions{width:calc(100% - 16px);max-width:400px;gap:4px;flex-wrap:wrap;}
 .account-actions button{flex:0 1 auto;padding-inline:6px;}
}

/* A restrained contact shadow gives the quick-access objects more depth. */
body:is(body,.warm) :is(.quick-game,.quick-favorites,.quick-article){
 box-shadow:0 5px 9px -4px #0003,0 15px 24px -9px #0004;
}
body #quickBox::after{
 content:"";position:absolute;left:18%;right:12%;bottom:6px;height:20px;
 background:radial-gradient(ellipse,#0004 0%,#0002 38%,transparent 72%);
 filter:blur(6px);pointer-events:none;z-index:-1;
}

/* Mario must overlap the journal tile at every responsive breakpoint. */
.quick-layout > .quick-game{position:relative;z-index:2;overflow:visible;}
.quick-layout > .quick-article{position:relative;z-index:1;}

/* Product thumbnails reuse the catalog artwork and keep names readable on mobile. */
#omniResults button[data-product]{justify-content:flex-start;gap:12px}
#omniResults .search-product-image{display:block;width:36px;height:42px;flex:0 0 36px;object-fit:cover;border-radius:8px;background:#ffffff12}
#omniResults .search-product-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;line-height:1.35;overflow-wrap:anywhere}
#omniResults .search-product-copy small{font-size:10px;letter-spacing:.04em;white-space:normal;opacity:.75}