/* DArcades brand layer. Loaded after every other stylesheet.
   Palette after unrealengine.com: near-black surfaces, white type and the
   electric-blue accent #26BBFF (the site's own tile colour). Dark is the default;
   the theme toggle switches to the light variant of the same palette. Game
   feedback colours (word tiles, maps, colour swatches) are left alone. */

body{
  --brand-accent:#26bbff;
  --brand-accent-strong:#0d9ee6;
  --brand-accent-ink:#00131f;
  --brand-glow:rgba(38,187,255,.18);
  --bg:var(--profile-bg,#f3f4f7);
  --paper:#ffffff;
  --surface-2:#f8f9fb;
  --ink:#0f1014;
  --muted:#5c5f6b;
  --line:#dde0e6;
  --soft:var(--profile-soft,#eceef2);
  --accent:var(--profile-accent,#0a8fd6);
  --link:#0a78b8;
  --shadow:0 1px 2px rgba(15,16,20,.06),0 8px 24px -16px rgba(15,16,20,.18);
  color-scheme:light;
}
body.dark{
  --bg:#0f0f13;
  --paper:#18181d;
  --surface-2:#1f1f25;
  --ink:#f4f4f6;
  --muted:#a2a3ad;
  --line:#2b2c34;
  --soft:#212128;
  --accent:#26bbff;
  --link:#4cc8ff;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
body,body[data-page]{background:var(--bg);color:var(--ink)}
body[data-page='home']{--bg:var(--profile-bg,#f3f4f7);--paper:#fff;--ink:#0f1014;--muted:#5c5f6b;--line:#dde0e6;--soft:var(--profile-soft,#eceef2);--accent:var(--profile-accent,#0a8fd6)}
body.dark[data-page='home']{--bg:#0f0f13;--paper:#18181d;--ink:#f4f4f6;--muted:#a2a3ad;--line:#2b2c34;--soft:#212128;--accent:#26bbff;background:var(--bg)}
::selection{background:var(--brand-accent);color:var(--brand-accent-ink)}
:focus-visible{outline-color:var(--brand-accent)}

/* Buttons and controls */
body[class] .btn{background:var(--paper);color:var(--ink);border-color:var(--line)}
body[class] .btn:hover{background:var(--soft)}
body[class] .btn-primary,body[data-page][class] .btn-primary{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-accent-ink);box-shadow:none}
body[class] .btn-primary:hover,body[data-page][class] .btn-primary:hover{background:#5ccbff;color:var(--brand-accent-ink)}
body[class] .btn-secondary{background:var(--soft)}
body[class] .floating-nav .home-control,body[data-page][class] .floating-nav .home-control,body[data-page='home'] .home-control{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-accent-ink);box-shadow:0 6px 20px -6px var(--brand-glow)}
body[class] .floating-nav .menu-control{background:var(--paper);border-color:var(--line);color:var(--ink)}
body[class] .menu-popover{background:var(--paper);border-color:var(--line);color:var(--ink)}
body[class] .menu-action:hover{background:var(--soft)}
body[class] .level-chip{background:var(--soft);color:var(--ink)}
body[class] .brand-mark{background:var(--brand-accent);color:var(--brand-accent-ink)}
body[class] .eyebrow{color:var(--accent)}
body[class] .mode-tabs{background:var(--soft)}
body[class] .mode-tabs a.active{background:var(--paper);color:var(--ink)}
body[class] .game-panel,body[class] .stats-dialog,body[class] .result-card{border-color:var(--line)}
body[class] .stats-dialog{background:var(--paper)}
body[class] .stats-dialog::backdrop{background:rgba(5,5,8,.6)}
body[class] .notice{background:var(--soft)}
body[class] .article a,body[class] .breadcrumb a,body[class] .daily-cloud-status a{color:var(--link)}
body[class] .site-footer{border-color:var(--line)}
body[class] .footer-links a:hover{color:var(--ink)}
body[class] .game-card{background:var(--paper);border-color:var(--line)}
body[class] .game-card:hover{border-color:var(--brand-accent);box-shadow:0 10px 30px -18px var(--brand-glow)}
body[class] .card-art{color:var(--ink)}
body[class] .card-category{background:rgba(255,255,255,.12);color:inherit}

/* Home: heading banner */
body[data-page][class] .hub-heading{background:radial-gradient(120% 140% at 0% 0%,rgba(38,187,255,.22),transparent 55%),linear-gradient(135deg,#14141a,#0b0b0e);border:1px solid #23232b;box-shadow:var(--shadow);color:#f4f4f6}
body[data-page][class] .hub-brand h1,body[data-page][class] .hub-stats strong{color:#fff}
body[data-page][class] .hub-brand p,body[data-page][class] .hub-stats span,body[data-page][class] .hub-stats small{color:#a2a3ad}
body[data-page][class] .hub-brand .brand-mark{background:var(--brand-accent);color:var(--brand-accent-ink);box-shadow:0 0 0 4px rgba(38,187,255,.15)}
body[data-page][class] .hub-overline{color:var(--muted)}

/* Home: daily card, gift, scorecard */
body[class] .daily-adventure{background:var(--paper);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow)}
body[class] .daily-adventure .eyebrow{color:var(--accent)}
body[class] .daily-reset,body[class] .daily-totals>div>span,body[class] .daily-totals small,body[class] .daily-adventure>p{color:var(--muted)}
body[class] .daily-gift{background:linear-gradient(135deg,rgba(38,187,255,.12),rgba(38,187,255,.04));border-color:rgba(38,187,255,.35)}
body[class] .daily-gift span{color:var(--muted)}
body[class] .daily-gift-button{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-accent-ink);box-shadow:none}
body[class] .daily-gift-button:hover{background:#5ccbff}
body[class] .daily-gift-button:disabled{background:var(--soft);border-color:var(--line);color:var(--muted)}
body[class] .daily-adventure .daily-gift-status{color:var(--accent)}
body[class] .daily-scorecard{border-color:var(--line)}
body[class] .daily-scorecard summary{color:var(--ink)}
body[class] .daily-score-table th,body[class] .daily-score-table td{border-color:var(--line)}
body[class] .daily-score-table thead th,body[class] .daily-score-table td:nth-child(2),body[class] .daily-score-table small{color:var(--muted)}
body[class] .daily-row-action{background:rgba(38,187,255,.14);color:var(--accent)}
body[class] .daily-row-action.practice{background:var(--soft);color:var(--muted)}
body[class] .daily-rules{background:var(--soft);color:var(--muted)}
body[class] .daily-cloud-status{color:var(--muted)}

/* Home: game cards */
body[data-page][class] .hub-card,body[data-page][class] .hub-card-featured,body[data-page][class] .hub-steps>div,body[data-page][class] .quest-home{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow);color:var(--ink)}
body[data-page][class] .hub-card:hover{border-color:var(--brand-accent);box-shadow:0 0 0 1px var(--brand-accent),0 14px 34px -20px var(--brand-glow)}
body[data-page][class] .hub-card-copy p{color:var(--muted)}
body[data-page][class] .hub-card-status{background:rgba(38,187,255,.12);border-color:rgba(38,187,255,.35);color:var(--accent)}
body[data-page][class] .hub-play{background:var(--brand-accent);color:var(--brand-accent-ink);box-shadow:none}
body[data-page][class] .hub-card-art svg{color:var(--ink)}
body.dark[data-page] .hub-card-art svg[style*="color:#292729"]{color:#e6e6ea!important}
body[data-page][class] .hub-steps>div>span{color:var(--accent)}
body[data-page][class] .hub-about{background:radial-gradient(90% 120% at 100% 0%,rgba(38,187,255,.25),transparent 60%),linear-gradient(135deg,#15151b,#0b0b0e);color:#f4f4f6;border:1px solid #23232b}
body[data-page][class] .hub-about .hub-overline{color:var(--brand-accent)}
body[data-page][class] .hub-about p{color:#c4c5cc}
body[data-page][class] .hub-about a{color:#fff}
body[class] .hub-library-head input,body[class] .hub-search input,body input[type=search]{background:var(--paper);border-color:var(--line);color:var(--ink)}
body[class] .hub-filters button,body[class] .hub-filter{border-color:var(--line);color:var(--muted);background:transparent}
body[class] .hub-filters button[aria-pressed=true],body[class] .hub-filter.active,body[class] .hub-filter[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
body[class] .hub-links a{color:var(--muted)}
body[class] .hub-links a:hover{color:var(--ink)}
body[class] .hub-arena{background:radial-gradient(80% 160% at 85% 50%,rgba(38,187,255,.35),transparent 60%),linear-gradient(120deg,#0b0b0e,#14141a 55%,#0f2a3a);border:1px solid #23232b;color:#fff}
body[class] .hub-arena .hub-play,body[class] .hub-arena .btn{background:var(--brand-accent);color:var(--brand-accent-ink)}

/* Progress, quests, rewards, collection, shop */
body[class] .progress-track{background:var(--soft)}
body[class] .progress-track>span,body[class] .progress-track>i,body[class] .progress-track>div{background:var(--brand-accent)}
body[class] .quest-card,body[class] .profile-overview,body[class] .reward-explainer{background:var(--paper);border-color:var(--line);color:var(--ink)}
body[class] .date-pill,body[class] .quest-reward{background:rgba(38,187,255,.12);color:var(--accent);border-color:rgba(38,187,255,.3)}
body[class] .rewards-tabs a{transition:color .2s ease,border-color .2s ease}body[class] .rewards-tabs a:hover{color:var(--ink)}body[class] .rewards-tabs a.active,body[class] .rewards-tabs button.active,body[class] .rewards-tabs [aria-selected=true]{background:transparent;color:var(--ink);border-bottom-color:var(--brand-accent)}

/* Game pages */
body[class] .game-title-row{border-color:var(--line)}
body[class] .daily-game-status{background:var(--paper);border-color:var(--line);color:var(--ink)}
body[class] .daily-game-status .muted,body[class] .daily-status-reset{color:var(--muted)}

/* Pets */
body[class] .pet-world{color:var(--ink)}
body[class] .pet-button-primary{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-accent-ink);box-shadow:none}
body[class] .pet-tabs .active,body[class] .pet-tabs [aria-selected=true]{background:var(--brand-accent);color:var(--brand-accent-ink)}

/* Pets: the storybook outlines follow the brand surfaces (variables used by pets.css). */
body{--pet-ink:var(--ink);--pet-edge:#c9ced8;--pet-shadow:rgba(15,16,20,.10);--pet-surface:var(--paper);--pet-raised:var(--surface-2)}
body.dark{--pet-edge:#34353f;--pet-shadow:rgba(0,0,0,.45);--pet-raised:#1d1d23}
body[class] .pet-preview{background:radial-gradient(90% 140% at 0% 50%,rgba(38,187,255,.14),transparent 60%),var(--paper);border-color:var(--line);box-shadow:var(--shadow)}

/* Games designed for a dark stage stay dark in either theme. */
body[data-game='higher-lower'],body[data-game='perfect-circle']{--bg:#0f0f13;--paper:#18181d;--surface-2:#1f1f25;--ink:#f4f4f6;--muted:#a2a3ad;--line:#2b2c34;--soft:#212128;--accent:#26bbff;color-scheme:dark;background:#0f0f13;color:#f4f4f6}

/* Account and rewards details */
body[class] .account-art{background:radial-gradient(90% 120% at 100% 0%,rgba(38,187,255,.18),transparent 60%),var(--paper);color:var(--ink)}
body[class] .account-art>span{background:rgba(38,187,255,.14)}
body[class] .account-art svg{color:var(--brand-accent)}
body[class] .profile-portrait{background:rgba(38,187,255,.14);border-color:rgba(38,187,255,.35);color:var(--brand-accent)}
body[class] .box-illustration{background:radial-gradient(70% 70% at 50% 40%,rgba(38,187,255,.22),transparent 70%),var(--surface-2)}

/* ── Motion ───────────────────────────────────────────────────────────
   One easing family everywhere: quick out-curves for UI, a soft spring for
   entrances. Everything below is switched off for reduced-motion users. */
body{--ease-out:cubic-bezier(.22,.8,.26,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);--t-fast:.16s;--t-med:.28s}

/* Page navigation: cross-fade with a small rise (View Transitions where supported). */
::view-transition-old(root){animation:brand-fade-out .18s var(--ease-out,ease) both}
::view-transition-new(root){animation:brand-rise-in .34s var(--ease-out,ease) both}
@keyframes brand-fade-out{to{opacity:0}}
@keyframes brand-rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes brand-pop-in{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes brand-fade-in{from{opacity:0}to{opacity:1}}
body.route-enter #main{animation:brand-rise-in .34s var(--ease-out) both}

/* Staggered entrances for card grids on first paint of a page. */
body.route-enter .hub-heading,body.route-enter .daily-adventure,body.route-enter .pet-preview,body.route-enter .hub-arena,
body.route-enter .hub-card,body.route-enter .hub-steps>div,body.route-enter .quest-home,body.route-enter .game-card,
body.route-enter .quest-card,body.route-enter .pet-adopt-card,body.route-enter .reward-card,body.route-enter .collection-card{animation:brand-pop-in .46s var(--ease-out) both}
body.route-enter .daily-adventure,body.route-enter .pet-preview{animation-delay:.05s}
body.route-enter .hub-arena{animation-delay:.1s}
body.route-enter :is(.hub-featured-grid,.hub-games-grid,.games-grid,.quests-grid,.pet-adopt-grid,.hub-steps)>:nth-child(1){animation-delay:.12s}
body.route-enter :is(.hub-featured-grid,.hub-games-grid,.games-grid,.quests-grid,.pet-adopt-grid,.hub-steps)>:nth-child(2){animation-delay:.16s}
body.route-enter :is(.hub-featured-grid,.hub-games-grid,.games-grid,.quests-grid,.pet-adopt-grid,.hub-steps)>:nth-child(3){animation-delay:.2s}
body.route-enter :is(.hub-featured-grid,.hub-games-grid,.games-grid,.quests-grid,.pet-adopt-grid,.hub-steps)>:nth-child(4){animation-delay:.24s}
body.route-enter :is(.hub-featured-grid,.hub-games-grid,.games-grid,.quests-grid,.pet-adopt-grid,.hub-steps)>:nth-child(5){animation-delay:.28s}
body.route-enter :is(.hub-featured-grid,.hub-games-grid,.games-grid,.quests-grid,.pet-adopt-grid,.hub-steps)>:nth-child(6){animation-delay:.32s}
body.route-enter :is(.hub-featured-grid,.hub-games-grid,.games-grid,.quests-grid,.pet-adopt-grid,.hub-steps)>:nth-child(7){animation-delay:.36s}
body.route-enter :is(.hub-featured-grid,.hub-games-grid,.games-grid,.quests-grid,.pet-adopt-grid,.hub-steps)>:nth-child(n+8){animation-delay:.4s}

/* Cards: lift, glow and a gentle press. */
body[class] :is(.hub-card,.game-card,.quest-card,.pet-adopt-card,.pet-shop-card,.reward-card,.collection-card){transition:transform var(--t-med) var(--ease-out),box-shadow var(--t-med) var(--ease-out),border-color var(--t-fast) ease,background-color var(--t-fast) ease;will-change:transform}
body[class] :is(.hub-card,.game-card,.quest-card,.pet-adopt-card,.pet-shop-card,.reward-card,.collection-card):hover{transform:translateY(-3px)}
body[class] :is(.hub-card,.game-card,.quest-card,.pet-adopt-card,.pet-shop-card):active{transform:translateY(-1px) scale(.985);transition-duration:.08s}
body[class] .hub-card .hub-card-art svg{transition:transform .4s var(--ease-spring)}
body[class] .hub-card:hover .hub-card-art svg{transform:scale(1.05) translateY(-2px)}
body[class] .hub-play svg{transition:transform var(--t-med) var(--ease-out)}
body[class] .hub-card:hover .hub-play svg{transform:translate(2px,-2px)}

/* Buttons and interactive controls: consistent hover, press and focus. */
body[class] :is(.btn,.hub-play,.daily-gift-button,.pet-button,.ar-btn,.ar-tab,.cm-btn,.eq-key,.fl-key,.home-control,.menu-control,.mode-tabs a,.pet-tabs button,.pet-filter,.sc-action,.sc-scrub>button){transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease,box-shadow var(--t-med) var(--ease-out),opacity var(--t-fast) ease}
body[class] :is(.btn,.daily-gift-button,.pet-button,.ar-btn,.cm-btn,.sc-action):hover:not(:disabled){transform:translateY(-1px)}
body[class] :is(.btn-primary,.daily-gift-button,.cm-btn,.sc-action,.pet-button-primary,.ar-btn-primary):hover:not(:disabled){box-shadow:0 8px 24px -10px rgba(38,187,255,.65)}
body[class] :is(.btn,.hub-play,.daily-gift-button,.pet-button,.ar-btn,.ar-tab,.cm-btn,.eq-key,.fl-key,.home-control,.menu-control,.sc-action,.sc-scrub>button):active:not(:disabled){transform:scale(.96);transition-duration:.06s}
body[class] .home-control:hover{transform:translateY(-1px) rotate(-6deg)}
body[class] :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--brand-accent);outline-offset:3px;transition:outline-offset var(--t-fast) var(--ease-out)}
body[class] input:is([type=text],[type=search],[type=email],:not([type])),body[class] select{transition:border-color var(--t-fast) ease,box-shadow var(--t-med) var(--ease-out)}
body[class] input:is([type=text],[type=search],[type=email],:not([type])):focus,body[class] select:focus{border-color:var(--brand-accent);box-shadow:0 0 0 3px rgba(38,187,255,.2)}

/* Menus, dialogs and disclosure panels. */
body[class] .site-menu[open] .menu-popover{animation:brand-pop-in .22s var(--ease-out) both;transform-origin:top right}
body[class] dialog[open]{animation:brand-pop-in .26s var(--ease-out) both}
body[class] dialog[open]::backdrop{animation:brand-fade-in .26s ease both}
body[class] details[open]>:not(summary){animation:brand-fade-in .3s ease both}
body[class] .daily-scorecard summary>span,body[class] .game-help summary::after{transition:transform var(--t-med) var(--ease-spring)}

/* Live values: progress bars fill smoothly; status text fades in. */
body[class] :is(.progress-track,.pet-meter-track) :is(span,i,div){transition:width .7s var(--ease-out)}
body[class] :is(.daily-gift-status,.eq-message,.fl-message,.ar-toast,[role=status]):not(:empty){animation:brand-fade-in .25s ease both}

/* Skeletons while games load. */
body[class] .loading{position:relative;overflow:hidden;color:var(--muted)}
body[class] .loading::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(38,187,255,.12),transparent);transform:translateX(-100%);animation:brand-shimmer 1.2s ease-in-out infinite}
@keyframes brand-shimmer{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  body[class] *,body[class] *::before,body[class] *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Results and end-of-game cards pop in when they appear. */
body[class] :is(.result-card,.eq-result,.cm-final,.pg-result,.fl-result,.sc-final,.cm-score){animation:brand-pop-in .42s var(--ease-spring) both}
body[class] .cm-score{animation-name:brand-score-in}
@keyframes brand-score-in{from{opacity:0;transform:translate(-50%,-40%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}
/* Filter chips and tabs glide between states. */
body[class] :is(.hub-filters button,.hub-filter,.pet-filter,.rewards-tabs a,.mode-tabs a){transition:background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease}