/* Game-page styles: three optional looks a member can pick on /tasks
   (remembered per member, users.game_style). 'classic' loads none of this —
   the page keeps the regular app style. Everything here is scoped under
   .chores--toybox / .chores--arcade / .chores--hero so nothing leaks out. */

@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/baloo2-800.woff2') format('woff2')}
@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/bungee-400.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/rajdhani-700.woff2') format('woff2')}

/* ---- Shared layout for the game-only blocks (hero header + podium) ---- */
.ghero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 16px;padding:16px 18px;border-radius:20px}
.ghero__player{display:flex;align-items:center;gap:14px;min-width:0}
.ghero__ring{position:relative;flex:none;width:78px;height:78px;padding:5px;display:block}
/* The progress gradient lives on its own layer, so a shaped (hexagon) clip
   never cuts off the level badge hanging below the ring. */
.ghero__ringbg{position:absolute;inset:0;border-radius:50%;z-index:0}
.ghero__ring .avatar{position:relative;z-index:1;width:100%;height:100%;border-radius:50%;font-size:1.6rem;display:flex;align-items:center;justify-content:center}
.ghero__ring .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ghero__lvl{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);white-space:nowrap;border-radius:999px;font-size:.72rem;font-weight:800;padding:2px 10px;z-index:2}
.ghero__name{margin:0;font-size:1.3rem;line-height:1.15;font-weight:800}
.ghero__xpbar{width:220px;max-width:52vw;height:15px;border-radius:999px;overflow:hidden;margin-top:6px}
.ghero__xpfill{height:100%;border-radius:999px}
.ghero__xptext{margin:4px 0 0;font-size:.78rem;font-weight:700}
.ghero__coins{text-align:center;border-radius:16px;padding:10px 20px}
.ghero__coins b{display:block;font-size:1.55rem;line-height:1.15}
.ghero__coins span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.gpodium{display:flex;align-items:flex-end;justify-content:center;gap:16px;padding:26px 0 6px}
.gpodium__col{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800;position:relative}
.gpodium__crown{font-size:1.4rem;line-height:1;margin-bottom:-2px}
.gpodium__col .avatar{width:44px;height:44px;font-size:1.1rem}
.gpodium__col .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.gpodium__name{font-size:.9rem}
.gpodium__block{width:92px;border-radius:14px 14px 0 0;display:flex;flex-direction:column;align-items:center;padding:6px 0 10px}
.gpodium__block b{font-size:1.35rem;line-height:1.1}
.gpodium__stars{font-size:.8rem;font-weight:800}
.gpodium__col--1 .gpodium__block{height:96px}
.gpodium__col--2 .gpodium__block{height:66px}
.gpodium__col--3 .gpodium__block{height:48px}
.gstyle__opt.is-active{font-weight:800}

/* Big emoji on top of the mission card instead of a faint watermark. */
.chores--toybox .gtask__bg,.chores--arcade .gtask__bg,.chores--hero .gtask__bg{position:static;opacity:1;font-size:2.3rem;line-height:1;margin-bottom:2px}
.chores--toybox .gtask,.chores--arcade .gtask,.chores--hero .gtask{overflow:visible}
/* The regular card top-accent stripe does not belong in toybox/arcade; hero
   keeps one, restyled below in its own blue-cyan gradient. */
.chores--toybox .card::before,.chores--arcade .card::before{display:none}
/* Member switcher as horizontal pills: avatar left, name and stars inline. */
.chores--toybox .chores__member,.chores--arcade .chores__member,.chores--hero .chores__member{flex-direction:row;align-items:center;gap:8px;min-width:0;padding:6px 16px 6px 8px;border-radius:999px}
.chores--toybox .chores__member .avatar,.chores--arcade .chores__member .avatar,.chores--hero .chores__member .avatar{width:30px;height:30px;font-size:.9rem}
/* Saving-progress note under a locked shop reward. */
.chorereward__need{margin:6px 0 0;font-size:.76rem;font-weight:800}
.chores--toybox .chorereward__need{color:#8a5a00}
.chores--arcade .chorereward__need{color:var(--nx-dim)}
.chores--hero .chorereward__need{color:var(--hx-dim)}

/* GEDAAN!-stamp across a finished mission card (game looks; classic keeps
   the plain checkmark). Slightly dimmed card, rotated stamp on top. */
.gtask--done{opacity:.88}
.gtask__stamp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.gtask__stamp b{transform:rotate(-14deg);border:4px solid currentColor;border-radius:12px;padding:6px 18px;font-size:1.45rem;letter-spacing:.02em;line-height:1.3}
.chores--toybox .gtask__stamp b{color:#2c8443;background:rgba(255,255,255,.6);font-family:'Baloo 2',system-ui}
/* Arcade and Hero: same stamp design, but straight and at the bottom of the
   card (the tilted overlay suits only the toybox sticker look). */
.chores--arcade .gtask__stamp,.chores--hero .gtask__stamp{position:static;display:flex;justify-content:center;margin-top:2px}
.chores--arcade .gtask__stamp b,.chores--hero .gtask__stamp b{transform:none}
.chores--arcade .gtask__stamp b{color:var(--nx-cyan);background:rgba(13,14,43,.55);font-family:'Bungee',system-ui;font-size:.95rem;text-shadow:0 0 10px rgba(62,242,228,.7);box-shadow:0 0 16px rgba(62,242,228,.35)}
.chores--hero .gtask__stamp b{color:var(--hx-blue);background:rgba(255,255,255,.6);font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem}

/* Earned badges as chips hanging over the bottom edge of the mission card. */
.gtask__badgebar{position:absolute;bottom:-11px;left:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.gtask__badgechip{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:800;border-radius:999px;padding:2px 10px;white-space:nowrap}
.gtask__badgechip img,.gtask__badgechip svg{width:auto;height:14px}
.chores--toybox .gtask__badgechip{background:var(--tb-purple);color:#fff;border:2.5px solid var(--tb-ink)}
.chores--arcade .gtask__badgechip{background:#1c0f33;color:#fff;border:1.5px solid var(--nx-pink);box-shadow:0 0 10px rgba(255,77,216,.4)}
.chores--hero .gtask__badgechip{background:linear-gradient(90deg,var(--hx-blue),var(--hx-cyan));color:#fff;box-shadow:0 4px 10px rgba(97,93,250,.35)}

/* Style-picker options are buttons inside forms: strip the browser button
   chrome so they read as normal menu rows (every look, classic included). */
.navdd__menu form{display:contents}
button.navdd__item{width:100%;background:transparent;border:0;font:inherit;text-align:left;cursor:pointer;appearance:none}

/* Equal-height shop tiles: the name grows, price/button/note stay aligned. */
.chores--toybox .chores__shop,.chores--arcade .chores__shop,.chores--hero .chores__shop{grid-auto-rows:1fr}
.chores--toybox .chorereward,.chores--arcade .chorereward,.chores--hero .chorereward{display:flex;flex-direction:column}
.chores--toybox .chorereward__body,.chores--arcade .chorereward__body,.chores--hero .chorereward__body{display:flex;flex-direction:column;flex:1}
.chores--toybox .chorereward__name,.chores--arcade .chorereward__name,.chores--hero .chorereward__name{flex:1}

/* ============================ TOYBOX ============================ */
.chores--toybox{
  --tb-ink:#2e2440; --tb-card:#ffffff; --tb-sun:#ffb703; --tb-red:#ff5d5d; --tb-red-sh:#b73939;
  --tb-green:#4cc366; --tb-green-sh:#2c8443; --tb-purple:#7c5cff;
  --gh-ring:#ffb703; --gh-ring-rest:rgba(46,36,64,.14);
  background:linear-gradient(180deg,#dff1ff 0%,#eaf6ff 55%,#fdf3e0 100%);
  border:3px solid var(--tb-ink);border-radius:26px;padding:18px;color:var(--tb-ink)}
.chores--toybox .page__title{font-family:'Baloo 2',ui-rounded,system-ui,sans-serif;color:var(--tb-ink)}
.chores--toybox .muted{color:#5d5378}
.chores--toybox .ghero{background:transparent;border:none;padding:8px 4px 14px}
.chores--toybox .ghero__ring{width:88px;height:88px;padding:6px}
.chores--toybox .ghero__ring .avatar{border:3px solid #fff;background:var(--tb-purple);color:#fff;font-size:1.8rem}
.chores--toybox .ghero__lvl{background:var(--tb-sun);border:2.5px solid var(--tb-ink);color:var(--tb-ink);font-family:'Baloo 2',system-ui}
.chores--toybox .ghero__name{font-family:'Baloo 2',system-ui;color:var(--tb-ink);font-size:1.55rem}
.chores--toybox .ghero__xpbar{background:#fff;border:2.5px solid var(--tb-ink)}
.chores--toybox .ghero__xpfill{background:repeating-linear-gradient(-55deg,var(--tb-green) 0 12px,#5fd87a 12px 24px);animation:tb-shimmer 2.4s linear infinite}
@keyframes tb-shimmer{to{background-position:48px 0}}
.chores--toybox .ghero__xptext{color:#5d5378}
.chores--toybox .ghero__coins{background:#fff;border:3px solid var(--tb-ink);box-shadow:0 5px 0 var(--tb-ink);color:var(--tb-ink)}
.chores--toybox .ghero__coins b{font-family:'Baloo 2',system-ui}
.chores--toybox .ghero__coins span{color:#8a5a00}
.chores--toybox .chores__member{background:#fff;border:2.5px solid var(--tb-ink);border-radius:999px;box-shadow:0 3px 0 var(--tb-ink);color:var(--tb-ink)}
.chores--toybox .chores__member.is-active{background:#ffe08a;border-color:var(--tb-ink);transform:rotate(-1.5deg)}
.chores--toybox .chores__membername{font-weight:800}
.chores--toybox .chores__memberpts{color:#8a5a00;font-weight:800}
.chores--toybox .choreday{background:#fff;border:2.5px solid var(--tb-ink);border-radius:14px;box-shadow:0 3px 0 var(--tb-ink)}
.chores--toybox .choreday__tab{color:#5d5378;font-weight:800}
.chores--toybox .choreday__tab.is-active{background:var(--tb-purple);color:#fff}
.chores--toybox .gstreaks__chip{background:#fff2df;border:2.5px solid var(--tb-ink);border-radius:14px;box-shadow:0 3px 0 var(--tb-ink);color:var(--tb-ink);font-weight:800}
.chores--toybox .gstreaks__icon{animation:tb-flick 1s ease-in-out infinite alternate}
@keyframes tb-flick{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.12) rotate(5deg)}}
.chores--toybox .gtask-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.chores--toybox .gtask{background:var(--tb-card);border:3px solid var(--tb-ink);border-radius:22px;box-shadow:0 6px 0 var(--tb-ink);transition:transform .15s;color:var(--tb-ink)}
.chores--toybox .gtask:hover{transform:translateY(-3px)}
.chores--toybox .gtask__name{font-family:'Baloo 2',system-ui;font-size:1rem}
/* The +N sticker hangs over the top-right corner of the tile (the meta row
   must not be a positioning anchor, or the sticker lands next to the button). */
.chores--toybox .gtask__meta{position:static}
.chores--toybox .gtask .choretask__pts{position:absolute;top:-12px;right:-8px;background:var(--tb-sun);border:2.5px solid var(--tb-ink);border-radius:12px;font-family:'Baloo 2',system-ui;font-weight:800;padding:1px 10px;transform:rotate(6deg);box-shadow:0 3px 0 var(--tb-ink);color:var(--tb-ink);z-index:1}
/* Toybox header buttons + dropdown in the sticker look. */
.chores--toybox .shop__headbtns .btn{background:#fff;border:2.5px solid var(--tb-ink);border-radius:999px;color:var(--tb-ink);box-shadow:0 3px 0 var(--tb-ink);font-weight:800}
.chores--toybox .shop__headbtns .btn:hover{background:#ffe08a;color:var(--tb-ink)}
.chores--toybox .navdd__menu{background:#fff;border:2.5px solid var(--tb-ink);border-radius:16px;box-shadow:0 5px 0 var(--tb-ink)}
.chores--toybox .navdd__item{color:var(--tb-ink);font-weight:800;border-radius:10px}
.chores--toybox .navdd__item:hover{background:#ffe08a;color:var(--tb-ink)}
.chores--toybox .navdd__item.is-active{background:var(--tb-purple);color:#fff}
.chores--toybox .chores__count{background:var(--tb-red);color:#fff}
.chores--toybox .gtask__action .btn--primary{font-family:'Baloo 2',system-ui;font-size:1rem;background:var(--tb-red);color:#fff;border:3px solid var(--tb-ink);border-radius:16px;box-shadow:0 5px 0 var(--tb-red-sh);transition:transform .08s,box-shadow .08s}
.chores--toybox .gtask__action .btn--primary:hover{transform:translateY(-1px)}
.chores--toybox .gtask__action .btn--primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tb-red-sh)}
.chores--toybox .gtask__action .tag{background:#e9e4f6;border:2px dashed var(--tb-ink);border-radius:12px;color:#5d5378;font-weight:800}
.chores--toybox .chores__checked{filter:drop-shadow(0 2px 0 rgba(46,36,64,.3))}
.chores--toybox .chores__shoptitle{font-family:'Baloo 2',system-ui;font-size:1.25rem;color:var(--tb-ink)}
.chores--toybox .chorereward{background:#fff;border:3px solid var(--tb-ink);border-radius:22px;box-shadow:0 6px 0 var(--tb-ink);color:var(--tb-ink)}
.chores--toybox .chorereward__name{font-family:'Baloo 2',system-ui}
.chores--toybox .chorereward .btn--primary{font-family:'Baloo 2',system-ui;background:var(--tb-green);color:#fff;border:3px solid var(--tb-ink);border-radius:14px;box-shadow:0 4px 0 var(--tb-green-sh)}
.chores--toybox .chorereward .btn--primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--tb-green-sh)}
.chores--toybox .chorereward .btn--primary:disabled{background:#b9b3c9;box-shadow:0 4px 0 #837c96}
.chores--toybox .chorereward--locked{opacity:1;filter:grayscale(.5)}
.chores--toybox .chores__showall{border:2.5px solid var(--tb-ink);border-radius:14px;box-shadow:0 3px 0 var(--tb-ink);color:var(--tb-ink);background:#fff;font-weight:800}
.chores--toybox .gpodium__block{border:3px solid var(--tb-ink);box-shadow:0 5px 0 var(--tb-ink);font-family:'Baloo 2',system-ui;color:var(--tb-ink)}
.chores--toybox .gpodium__col--1 .gpodium__block{background:#ffe08a}
.chores--toybox .gpodium__col--2 .gpodium__block{background:#d9d4e8}
.chores--toybox .gpodium__col--3 .gpodium__block{background:#f3c89d}
.chores--toybox .gpodium__name{color:var(--tb-ink)}

/* ============================ NEON ARCADE ============================ */
.chores--arcade{
  --nx-bg:#0d0e2b; --nx-card:#151740; --nx-line:#2c2f6b; --nx-cyan:#3ef2e4; --nx-pink:#ff4dd8; --nx-gold:#ffe24d; --nx-text:#eef2ff; --nx-dim:#9aa0d8;
  --gh-ring:#3ef2e4; --gh-ring-rest:rgba(62,242,228,.15);
  background:var(--nx-bg);
  background-image:radial-gradient(60% 40% at 15% 0%,rgba(62,242,228,.10),transparent 70%),radial-gradient(50% 45% at 90% 100%,rgba(255,77,216,.12),transparent 70%);
  border:3px solid #05051a;border-radius:26px;padding:18px;color:var(--nx-text)}
.chores--arcade .page__title{font-family:'Bungee',system-ui,sans-serif;color:var(--nx-cyan);text-shadow:0 0 14px rgba(62,242,228,.55);font-size:1.35rem}
.chores--arcade .muted{color:var(--nx-dim)}
.chores--arcade .ghero{background:rgba(21,23,64,.72);border:1.5px solid var(--nx-line)}
.chores--arcade .ghero__ring .avatar{background:#1a1c45;color:var(--nx-cyan);border:2px solid var(--nx-cyan);box-shadow:0 0 14px rgba(62,242,228,.5)}
.chores--arcade .ghero__lvl{background:#05051a;border:1.5px solid var(--nx-cyan);color:var(--nx-cyan);font-family:'Bungee',system-ui;font-size:.62rem;text-shadow:0 0 8px rgba(62,242,228,.6)}
.chores--arcade .ghero__name{font-family:'Bungee',system-ui;color:var(--nx-text);font-size:1.05rem}
.chores--arcade .ghero__xpbar{background:#1a1c45;border:1.5px solid var(--nx-cyan);box-shadow:inset 0 0 10px rgba(62,242,228,.3)}
.chores--arcade .ghero__xpfill{background:linear-gradient(90deg,var(--nx-cyan),#7c5cff);box-shadow:0 0 12px rgba(62,242,228,.8)}
.chores--arcade .ghero__xptext{color:var(--nx-dim)}
.chores--arcade .ghero__coins{background:#05051a;border:1.5px solid var(--nx-gold);color:var(--nx-gold);box-shadow:0 0 16px rgba(255,226,77,.3)}
.chores--arcade .ghero__coins b{font-family:'Bungee',system-ui;text-shadow:0 0 12px rgba(255,226,77,.6)}
.chores--arcade .ghero__coins span{color:var(--nx-dim)}
.chores--arcade .chores__member{background:var(--nx-card);border:1.5px solid var(--nx-line);color:var(--nx-text)}
.chores--arcade .chores__member.is-active{border-color:var(--nx-cyan);background:#101243;box-shadow:0 0 14px rgba(62,242,228,.35)}
.chores--arcade .chores__memberpts{color:var(--nx-gold)}
.chores--arcade .choreday{background:var(--nx-card);border:1.5px solid var(--nx-line)}
.chores--arcade .choreday__tab{color:var(--nx-dim)}
.chores--arcade .choreday__tab.is-active{background:var(--nx-cyan);color:#0d0e2b;box-shadow:0 0 12px rgba(62,242,228,.5)}
.chores--arcade .gstreaks__chip{background:#1c0f33;border:1.5px solid var(--nx-pink);color:var(--nx-text);box-shadow:0 0 12px rgba(255,77,216,.35)}
.chores--arcade .gtask-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.chores--arcade .gtask{background:var(--nx-card);border:1.5px solid var(--nx-line);border-radius:16px;color:var(--nx-text);transition:box-shadow .2s,border-color .2s}
.chores--arcade .gtask:hover{border-color:var(--nx-cyan);box-shadow:0 0 18px rgba(62,242,228,.25)}
.chores--arcade .gtask__bg{filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}
.chores--arcade .gtask__name{color:var(--nx-text)}
.chores--arcade .gtask .choretask__pts{color:var(--nx-gold);font-family:'Bungee',system-ui;font-size:.72rem;text-shadow:0 0 8px rgba(255,226,77,.5)}
.chores--arcade .gtask__action .btn--primary{font-family:'Bungee',system-ui;font-size:.82rem;background:var(--nx-cyan);color:#0d0e2b;border:none;border-radius:12px;box-shadow:0 0 16px rgba(62,242,228,.55)}
.chores--arcade .gtask__action .btn--primary:hover{box-shadow:0 0 24px rgba(62,242,228,.8)}
.chores--arcade .gtask__action .tag{background:#1a1c45;border:1px dashed var(--nx-dim);color:var(--nx-dim)}
.chores--arcade .chores__shoptitle{font-family:'Bungee',system-ui;color:var(--nx-pink);text-shadow:0 0 12px rgba(255,77,216,.5);font-size:1.05rem}
.chores--arcade .chorereward{background:var(--nx-card);border:1.5px solid var(--nx-line);border-radius:16px;color:var(--nx-text)}
.chores--arcade .chorereward__pts{color:var(--nx-gold)}
.chores--arcade .chorereward .btn--primary{font-family:'Bungee',system-ui;font-size:.78rem;background:var(--nx-pink);color:#fff;border:none;border-radius:12px;box-shadow:0 0 14px rgba(255,77,216,.5)}
.chores--arcade .chorereward .btn--primary:disabled{background:#2c2f6b;color:var(--nx-dim);box-shadow:none}
.chores--arcade .chorereward--locked{opacity:.7}
.chores--arcade .chores__showall{background:transparent;border:1.5px solid var(--nx-line);color:var(--nx-dim)}
.chores--arcade .gpodium__block{border:1.5px solid var(--nx-line);background:var(--nx-card);color:var(--nx-text);font-family:'Bungee',system-ui}
.chores--arcade .gpodium__col--1 .gpodium__block{border-color:var(--nx-gold);box-shadow:0 0 18px rgba(255,226,77,.35)}
.chores--arcade .gpodium__col--2 .gpodium__block{border-color:var(--nx-cyan)}
.chores--arcade .gpodium__col--3 .gpodium__block{border-color:var(--nx-pink)}
.chores--arcade .gpodium__stars{color:var(--nx-gold)}
/* Arcade header buttons + dropdown: readable neon on the dark ground. */
.chores--arcade .shop__headbtns .btn{background:#151740;border:1.5px solid var(--nx-cyan);color:var(--nx-cyan);border-radius:12px;box-shadow:0 0 10px rgba(62,242,228,.25)}
.chores--arcade .shop__headbtns .btn:hover{background:#1a1c45;color:var(--nx-cyan);box-shadow:0 0 16px rgba(62,242,228,.5)}
.chores--arcade .navdd__menu{background:#0d0e2b;border:1.5px solid var(--nx-cyan);box-shadow:0 0 18px rgba(62,242,228,.3)}
.chores--arcade .navdd__item{color:var(--nx-text)}
.chores--arcade .navdd__item:hover{background:#1a1c45;color:var(--nx-cyan)}
.chores--arcade .navdd__item.is-active{background:var(--nx-cyan);color:#0d0e2b}
.chores--arcade .chores__count{background:var(--nx-pink);color:#fff}

/* ============================ HERO ============================ */
.chores--hero{
  --hx-bg:#f2f5fa; --hx-card:#ffffff; --hx-ink:#22284b; --hx-dim:#8a92b2; --hx-blue:#615dfa; --hx-cyan:#23d2e2; --hx-line:#e4e9f4;
  --gh-ring:#23d2e2; --gh-ring-rest:#e4e9f4;
  background:var(--hx-bg);border:1px solid var(--hx-line);border-radius:20px;padding:18px;color:var(--hx-ink)}
.chores--hero .page__title{font-family:'Rajdhani',system-ui,sans-serif;letter-spacing:.02em;color:var(--hx-ink);text-transform:uppercase}
.chores--hero .muted{color:var(--hx-dim)}
.chores--hero .card::before{height:4px;background:linear-gradient(90deg,var(--hx-blue),var(--hx-cyan));opacity:1}
.chores--hero .ghero{background:linear-gradient(120deg,var(--hx-blue),#8f7bfd 45%,var(--hx-cyan));background-size:180% 180%;animation:hx-drift 9s ease-in-out infinite alternate;color:#fff;box-shadow:0 12px 26px rgba(97,93,250,.35);border:2px solid rgba(255,255,255,.35)}
@keyframes hx-drift{from{background-position:0% 0%}to{background-position:100% 100%}}
.chores--hero .ghero__ringbg{border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.chores--hero .ghero__ring .avatar{border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);background:#3b3e66;color:#fff}
.chores--hero .ghero__lvl{background:#22284b;color:#fff;font-family:'Rajdhani',system-ui;letter-spacing:.05em;bottom:-10px}
.chores--hero .ghero__name{font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.03em;color:#fff}
.chores--hero .ghero__xpbar{background:rgba(255,255,255,.25)}
.chores--hero .ghero__xpfill{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.chores--hero .ghero__xptext{color:#e8ebff}
.chores--hero .ghero__coins{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff}
.chores--hero .ghero__coins b{font-family:'Rajdhani',system-ui}
.chores--hero .ghero__coins span{color:#e8ebff}
.chores--hero .chores__member{background:var(--hx-card);border:2px solid var(--hx-line);border-radius:14px;box-shadow:0 6px 14px rgba(34,40,75,.06);color:var(--hx-ink);transition:transform .15s,border-color .15s}
.chores--hero .chores__member:hover{transform:translateY(-2px);border-color:var(--hx-cyan)}
.chores--hero .chores__member .avatar{border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.chores--hero .chores__member.is-active{border-color:var(--hx-blue);box-shadow:0 8px 18px rgba(97,93,250,.25)}
.chores--hero .chores__membername{font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.04em}
.chores--hero .chores__memberpts{color:var(--hx-blue);font-weight:800}
.chores--hero .choreday{background:var(--hx-card);border:1px solid var(--hx-line);border-radius:12px}
.chores--hero .choreday__tab{color:var(--hx-dim);font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.05em}
.chores--hero .choreday__tab.is-active{background:var(--hx-blue);color:#fff}
.chores--hero .gstreaks__chip{background:var(--hx-card);border:1px solid var(--hx-line);border-radius:12px;box-shadow:0 6px 14px rgba(34,40,75,.06);color:var(--hx-ink);font-weight:800}
.chores--hero .gtask-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.chores--hero .gtask{background:var(--hx-card);border:2px solid var(--hx-line);border-radius:16px;box-shadow:0 8px 20px rgba(34,40,75,.07);color:var(--hx-ink);transition:transform .15s,box-shadow .15s,border-color .15s;text-align:center;align-items:center}
.chores--hero .gtask:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(97,93,250,.18);border-color:var(--hx-blue)}
.chores--hero .gtask:hover .gtask__bg{transform:rotate(-6deg) scale(1.08)}
.chores--hero .gtask__bg{transition:transform .2s}
.chores--hero .gtask__bg{background:linear-gradient(135deg,var(--hx-blue),var(--hx-cyan));clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);width:58px;height:58px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 4px}
.chores--hero .gtask__name{font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.03em;font-size:.95rem}
.chores--hero .gtask__meta{justify-content:center}
.chores--hero .gtask .choretask__pts{color:var(--hx-blue);font-weight:800}
.chores--hero .gtask__action{align-items:stretch;width:100%}
.chores--hero .gtask__action .btn--primary{font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.06em;background:var(--hx-blue);color:#fff;border:none;border-radius:12px;box-shadow:0 8px 16px rgba(97,93,250,.35)}
.chores--hero .gtask__action .btn--primary:hover{background:#4f4be0}
.chores--hero .gtask__action .tag{background:var(--hx-bg);border:1px solid var(--hx-line);color:var(--hx-dim);align-self:center}
.chores--hero .chores__shoptitle{font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.05em;font-size:1.15rem;color:var(--hx-ink)}
.chores--hero .chorereward{background:var(--hx-card);border:2px solid var(--hx-line);border-radius:16px;box-shadow:0 8px 20px rgba(34,40,75,.07);color:var(--hx-ink);transition:transform .15s,border-color .15s}
.chores--hero .chorereward:hover{transform:translateY(-2px);border-color:var(--hx-cyan)}
.chores--hero .chorereward__name{font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.03em}
.chores--hero .chorereward__pts{color:var(--hx-blue)}
.chores--hero .chorereward .btn--primary{font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.06em;background:var(--hx-cyan);color:#fff;border:none;border-radius:12px;box-shadow:0 8px 16px rgba(35,210,226,.35)}
.chores--hero .chorereward .btn--primary:disabled{background:#c7cde0;box-shadow:none}
.chores--hero .chorereward--locked{opacity:1;filter:grayscale(.45)}
.chores--hero .chores__showall{background:var(--hx-card);border:1px solid var(--hx-line);color:var(--hx-dim);border-radius:12px}
.chores--hero .gpodium__col .avatar{border-radius:0;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.chores--hero .gpodium__block{background:var(--hx-card);border:2px solid var(--hx-line);box-shadow:0 8px 20px rgba(34,40,75,.07);font-family:'Rajdhani',system-ui;color:var(--hx-ink)}
.chores--hero .gpodium__col--1 .gpodium__block{background:linear-gradient(160deg,#fff 40%,#fff3c9);border-color:#f0c34e}
.chores--hero .gpodium__col--2 .gpodium__block{border-color:var(--hx-blue)}
.chores--hero .gpodium__col--3 .gpodium__block{border-color:var(--hx-cyan)}
.chores--hero .gpodium__stars{color:var(--hx-blue)}
.chores--hero .gpodium__name{font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.04em}
/* Hero header buttons + dropdown. */
.chores--hero .shop__headbtns .btn{background:var(--hx-card);border:2px solid var(--hx-line);color:var(--hx-ink);border-radius:12px;font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 6px 14px rgba(34,40,75,.08)}
.chores--hero .shop__headbtns .btn:hover{border-color:var(--hx-blue);color:var(--hx-blue);background:var(--hx-card)}
.chores--hero .navdd__menu{background:var(--hx-card);border:2px solid var(--hx-line);border-radius:14px;box-shadow:0 14px 26px rgba(34,40,75,.14)}
.chores--hero .navdd__item{color:var(--hx-ink);font-family:'Rajdhani',system-ui;text-transform:uppercase;letter-spacing:.04em}
.chores--hero .navdd__item:hover{background:var(--hx-bg);color:var(--hx-blue)}
.chores--hero .navdd__item.is-active{background:var(--hx-blue);color:#fff}
.chores--hero .chores__count{background:var(--hx-cyan);color:#fff}

@media (prefers-reduced-motion: reduce){
  .chores--toybox .ghero__xpfill,.chores--toybox .gstreaks__icon,.chores--hero .ghero{animation:none}
}
@media (max-width:600px){
  .chores--toybox,.chores--arcade,.chores--hero{margin-left:-6px;margin-right:-6px;padding:12px}
  .ghero__xpbar{width:160px}
}
