:root{ /* Sunpop palette */ --bg1:#eef7f4; --bg2:#f4eefb; --surface:#ffffff; --surface-2:#f1f3fb; --line:#e5e2f0; --ink:#1f2440; --muted:#656a8a; --primary:#7a3ff0; --primary-2:#6a2fe0; --daily:#ef6c00; --battle:#f5356b; --goal:#18a558; --friends:#0898b0; --tile:#26224e; --tile-ink:#f5f3ff; --gold:#ffb020; /* Takeover ownership colours (match HUE[] in app.js) */ --o0:#3b82f6; --o1:#f97316; --o2:#22c55e; --o3:#eab308; --o4:#a855f7; --o5:#14b8a6; --o6:#ec4899; --o7:#94a3b8; --radius:18px; --shadow:0 10px 30px rgba(31,37,72,.14); --shadow-sm:0 3px 12px rgba(31,37,72,.09); } /* Dark mode — a separate axis from the tile-skin themes (data-theme=…). Set on via a boot script + the Appearance toggle. Redefines only the neutral tokens; brand purple + semantic hues stay (brightened a touch so they read on a dark ground). Free for everyone. */ :root[data-mode="dark"]{ --bg1:#0e0f17; --bg2:#14121e; /* near-black indigo, faint purple lean */ --surface:#1b1c27; --surface-2:#252634; /* card, then a step lighter for insets/segments */ --line:#30313f; /* soft hairline border */ --ink:#e9ebf6; --muted:#9aa0bd; /* near-white text, legible secondary */ --primary:#8b5cf6; --primary-2:#7c3aed; /* brand purple, nudged brighter for dark */ --daily:#ff9142; --battle:#ff5c85; --goal:#2ece78; --friends:#25c2dd; --gold:#ffbe3d; --shadow:0 14px 34px rgba(0,0,0,.55); --shadow-sm:0 4px 14px rgba(0,0,0,.4); } *{ box-sizing:border-box; margin:0; padding:0; } [hidden]{ display:none !important; } body{ font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; color:var(--ink); min-height:100vh; background:linear-gradient(165deg,var(--bg1),var(--bg2)); background-attachment:fixed; } /* header */ .topbar{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px; } .brand{ display:flex; align-items:center; gap:10px; } .brand-mark{ width:30px; height:30px; border-radius:9px; background:linear-gradient(var(--primary),var(--primary-2)); color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(122,63,240,.4); } .brand-name{ font-size:20px; font-weight:800; letter-spacing:-.3px; color:var(--ink); } .topbtns{ display:flex; gap:8px; } .chip{ font:inherit; font-size:14px; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:8px 14px; color:var(--muted); box-shadow:var(--shadow-sm); } .chip:hover{ color:var(--ink); } .page{ max-width:1060px; margin:0 auto; padding:14px 14px 40px; } /* home */ .home{ position:fixed; inset:0; z-index:90; display:flex; align-items:flex-start; justify-content:center; padding:16px 16px 16px; overflow-y:auto; background:linear-gradient(165deg,var(--bg1),var(--bg2)); } .home-inner{ width:100%; max-width:440px; margin:auto; } .hero{ text-align:center; margin:2px 0 12px; } .hero-title{ font-size:36px; font-weight:800; letter-spacing:-1.2px; color:var(--ink); line-height:1; } .hero-sub{ margin:6px auto 0; max-width:360px; color:var(--muted); font-size:13.5px; line-height:1.4; } .play-cta{ width:100%; font:inherit; font-size:22px; font-weight:800; color:#fff; cursor:pointer; border:none; border-radius:var(--radius); padding:20px; background:linear-gradient(var(--primary),var(--primary-2)); box-shadow:0 10px 24px rgba(122,63,240,.42); transition:transform .08s ease; } .play-cta:hover{ filter:brightness(1.05); } .play-cta:active{ transform:translateY(2px); } .mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; } .mode-card{ font:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:5px; background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:14px; box-shadow:var(--shadow-sm); transition:transform .1s ease, box-shadow .1s ease; } .mode-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); } .mode-card:active{ transform:translateY(0); } .mc-title{ font-weight:800; font-size:15.5px; color:var(--ink); display:flex; align-items:center; gap:8px; } .mc-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; } .mc-dot.daily{ background:var(--daily); } .mc-dot.battle{ background:var(--battle); } .mc-dot.goal{ background:var(--goal); } .mc-dot.friends{ background:var(--friends); } .mc-desc{ font-size:12.5px; color:var(--muted); line-height:1.4; } .home-status{ text-align:center; margin-top:12px; font-size:13px; color:var(--muted); } .account-row{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; margin-top:6px; } .account-row button{ font:inherit; font-size:14px; background:none; border:none; color:var(--muted); cursor:pointer; padding:2px; } .account-row button:hover{ color:var(--primary); text-decoration:underline; } .home-tag{ margin:14px 2px 0; color:var(--muted); font-size:15px; line-height:1.45; } .howto-steps{ margin:6px 0 18px; padding-left:20px; line-height:1.5; } .howto-steps li{ margin:12px 0; color:var(--muted); } .howto-steps b{ color:var(--ink); } @keyframes tilepop{ 0%{ transform:scale(1); } 30%{ transform:scale(1.16); box-shadow:0 0 22px rgba(124,201,143,.9), 0 5px 8px rgba(0,0,0,.28); } 100%{ transform:scale(1); } } /* "not a word" toast (expert mode) */ .toast{ position:fixed; left:50%; top:38%; z-index:260; pointer-events:none; background:#2a2f52; color:#fff; font-weight:700; font-size:16px; padding:10px 20px; border-radius:12px; box-shadow:0 8px 22px rgba(20,24,50,.4); animation:toastfade 1s ease-out forwards; } @keyframes toastfade{ 0%{ opacity:0; transform:translate(-50%,8px); } 15%{ opacity:1; transform:translate(-50%,0); } 80%{ opacity:1; transform:translate(-50%,0); } 100%{ opacity:0; transform:translate(-50%,-10px); } } /* achievement / level-up pop */ .ach-pop{ position:fixed; top:16px; left:50%; z-index:300; display:flex; align-items:center; gap:14px; min-width:300px; max-width:92vw; padding:12px 20px; border-radius:16px; pointer-events:none; background:linear-gradient(#fff7e0,#f6e3b0); border:2px solid #e0b84e; box-shadow:0 12px 28px rgba(0,0,0,.3); animation:achin .5s cubic-bezier(.2,.9,.3,1) forwards; } .ach-pop.out{ animation:achout .42s ease-in forwards; } @keyframes achin{ from{ transform:translate(-50%,-130%); } to{ transform:translate(-50%,0); } } @keyframes achout{ from{ transform:translate(-50%,0); opacity:1; } to{ transform:translate(-50%,-130%); opacity:0; } } .ach-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(#f4c430,#e0a02a); box-shadow:0 2px 6px rgba(0,0,0,.25); } .ach-ic.level{ font-weight:800; font-size:20px; background:linear-gradient(#7a3ff0,#6a2fe0); } .ach-title{ font-weight:800; color:#7a5a10; font-size:15px; } .ach-sub{ color:#6b7192; font-size:14px; } /* bingo celebration */ .bingo{ position:fixed; left:50%; top:44%; z-index:250; pointer-events:none; text-align:center; transform:translate(-50%,-50%); animation:bingopop 1.5s cubic-bezier(.2,.9,.3,1) forwards; } .bingo-word{ display:block; font-size:60px; font-weight:800; letter-spacing:-1px; color:var(--ink); text-shadow:0 6px 20px rgba(31,37,72,.25); } .bingo-plus{ display:block; margin-top:2px; font-size:32px; font-weight:800; color:var(--primary); } @keyframes bingopop{ 0%{ transform:translate(-50%,-50%) scale(.4) rotate(-6deg); opacity:0; } 18%{ transform:translate(-50%,-50%) scale(1.18) rotate(3deg); opacity:1; } 32%{ transform:translate(-50%,-50%) scale(1) rotate(0); } 70%{ transform:translate(-50%,-52%) scale(1); opacity:1; } 100%{ transform:translate(-50%,-64%) scale(1); opacity:0; } } /* confetti burst (long-word / milestone celebration) */ .confetti-piece{ position:fixed; z-index:255; pointer-events:none; width:9px; height:14px; border-radius:2px; transform:translate(-50%,-50%); animation:confetti 1.3s cubic-bezier(.2,.7,.4,1) forwards; } @keyframes confetti{ 0%{ opacity:1; transform:translate(-50%,-50%) rotate(0); } 100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); } } /* modals */ .modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(20,24,50,.5); backdrop-filter:blur(3px); padding:16px; } #auth{ z-index:150; } /* auth can be opened OVER another modal (e.g. the results screen) — keep it on top so it isn't hidden behind */ .modal-box{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px 30px; max-width:470px; text-align:center; color:var(--ink); max-height:calc(100dvh - 24px); overflow-y:auto; box-shadow:var(--shadow); } .modal-box.left{ text-align:left; max-width:540px; } .modal-box h2{ color:var(--ink); letter-spacing:-.3px; font-size:24px; font-weight:800; margin-bottom:12px; } .modal-box p{ margin:9px 0; line-height:1.45; color:var(--muted); } .modal-box ul{ margin:8px 0 8px 22px; line-height:1.6; color:var(--muted); } .modal-box .lead{ margin-top:16px; font-weight:bold; color:var(--ink); } .setup-box{ max-width:460px; } .cfg{ display:flex; flex-direction:column; gap:15px; margin:20px 0 22px; text-align:left; } .cfg-row{ display:flex; flex-direction:column; gap:7px; } .cfg-label{ font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); } .cfg-hint{ display:block; font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); margin-top:2px; } .seg{ display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:4px; } .seg .opt{ flex:1; font:inherit; font-size:15px; font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--muted); padding:10px 6px; border-radius:9px; transition:background .12s; } .seg .opt:hover:not(.on){ background:#fff; } .seg .opt.on{ background:var(--primary); color:#fff; font-weight:800; box-shadow:0 2px 6px rgba(122,63,240,.35); } .opts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:6px 0; } .opt{ font:inherit; font-size:15px; cursor:pointer; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:9px 16px; color:var(--ink); font-weight:600; } .opt.on{ background:var(--primary); color:#fff; border-color:var(--primary); font-weight:700; } .big{ font:inherit; font-size:19px; font-weight:800; cursor:pointer; background:linear-gradient(var(--primary),var(--primary-2)); color:#fff; border:none; border-radius:14px; padding:14px 36px; margin-top:14px; box-shadow:0 6px 16px rgba(122,63,240,.35); } .big:hover{ filter:brightness(1.05); } .big:active{ transform:translateY(1px); } /* close/leave/back sits on its own line, pinned to the top-right of the box — never over the title */ .modal-x{ position:absolute; top:14px; right:14px; width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); font-size:0; z-index:2; } .modal-x::before, .modal-x::after{ content:""; position:absolute; top:50%; left:50%; width:15px; height:2px; margin:-1px 0 0 -7.5px; background:currentColor; border-radius:2px; } .modal-x::before{ transform:rotate(45deg); } .modal-x::after{ transform:rotate(-45deg); } .modal-x:hover{ background:var(--line); color:var(--ink); } .set-row{ display:flex; align-items:center; justify-content:center; gap:12px; margin:14px 0; font-size:18px; } /* level */ .level-box{ margin:6px 0 14px; } .level-num{ font-size:22px; font-weight:800; color:#6a2fe0; } .level-bar{ height:14px; border-radius:8px; background:#e3d6b6; overflow:hidden; margin:8px 0 5px; border:1px solid #d3c39a; } .level-fill{ height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,#7a3ff0,#a5a2f2); transition:width .5s ease; } .level-xp{ font-size:13px; color:#7a6f57; } /* achievements page (full-screen, sidebar + content) */ .ach-page{ position:fixed; inset:0; z-index:95; display:flex; background:linear-gradient(135deg,var(--bg1),var(--bg2)); overflow:hidden; } .ach-side{ width:250px; flex:0 0 auto; background:var(--surface); border-right:1px solid var(--line); padding:22px 18px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; } .ach-side-logo{ display:flex; align-items:center; gap:9px; } .ach-side-name{ font-size:20px; font-weight:800; letter-spacing:2px; color:var(--primary); line-height:1; } .ach-side-name span{ display:block; font-size:10px; letter-spacing:5px; color:var(--muted); margin-top:2px; } .ach-trophy{ background:linear-gradient(160deg,var(--primary),var(--primary-2)); border-radius:18px; padding:20px 16px; text-align:center; color:#fff; box-shadow:0 8px 22px rgba(122,63,240,.32); } .ach-trophy-ic{ width:64px; height:64px; margin:0 auto 8px; color:var(--gold); } .ach-trophy-ic svg{ width:100%; height:100%; } .ach-trophy-num{ font-size:30px; font-weight:800; } .ach-trophy-lab{ font-size:11px; letter-spacing:2px; opacity:.85; margin-bottom:12px; } .ach-trophy-bar{ height:8px; background:rgba(255,255,255,.25); border-radius:6px; overflow:hidden; } .ach-trophy-bar>div{ height:100%; background:linear-gradient(90deg,var(--gold),#ffd873); border-radius:6px; transition:width .4s; } .ach-trophy-pct{ font-size:11px; margin-top:8px; opacity:.9; } .ach-filters{ display:flex; flex-direction:column; gap:7px; } .ach-filter{ display:flex; align-items:center; justify-content:space-between; font:inherit; font-size:15px; font-weight:600; cursor:pointer; background:transparent; border:none; border-radius:12px; padding:11px 14px; color:var(--muted); } .ach-filter b{ font-size:12px; font-weight:700; color:var(--muted); background:var(--surface-2); border-radius:8px; padding:1px 9px; } .ach-filter:hover{ background:var(--surface-2); color:var(--ink); } .ach-filter.on{ background:var(--primary); color:#fff; } .ach-filter.on b{ background:rgba(255,255,255,.25); color:#fff; } .ach-main{ flex:1; overflow-y:auto; padding:26px 30px 40px; } .ach-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; } .ach-head h2{ color:var(--primary); letter-spacing:2px; font-size:30px; } .ach-subtitle{ color:var(--muted); font-size:15px; margin-top:4px; } .ach-head .chip{ flex:0 0 auto; } .ach-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; } .ach-sum{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow-sm); } .ach-sum-ic{ width:46px; height:46px; border-radius:50%; background:color-mix(in srgb,var(--gold) 20%,var(--surface)); color:var(--gold); display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .ach-sum-ic.green{ background:color-mix(in srgb,var(--goal) 16%,var(--surface)); color:var(--goal); } .ach-sum-ic svg{ width:24px; height:24px; } .ach-sum-lab{ font-size:13px; color:var(--muted); } .ach-sum-num{ font-size:22px; font-weight:800; color:var(--ink); } .ach-sum-sub{ font-size:12px; color:var(--muted); } .ach-ring{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; background:var(--line); } .ach-ring span{ background:var(--surface); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--primary); } .ach-section{ margin-bottom:24px; } .ach-sec-head{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:800; letter-spacing:1.5px; color:var(--primary); margin-bottom:12px; } .ach-sec-ic{ width:22px; height:22px; color:var(--primary); } .ach-sec-ic svg{ width:100%; height:100%; } .ach-sec-count{ margin-left:auto; font-size:12px; font-weight:600; letter-spacing:0; color:var(--muted); } .ach-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; } .acard{ display:flex; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px; box-shadow:var(--shadow-sm); } .acard-ic{ width:48px; height:48px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--muted); } .acard-ic.on{ background:color-mix(in srgb,var(--primary) 14%,var(--surface)); color:var(--primary); } .acard-ic svg{ width:26px; height:26px; } .acard-num{ font-size:19px; font-weight:800; letter-spacing:-.5px; } .acard-body{ flex:1; min-width:0; } .acard-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .acard-name{ font-weight:700; color:var(--ink); font-size:15px; } .acard-count{ font-size:13px; font-weight:800; color:var(--muted); } .acard-desc{ font-size:13px; color:var(--muted); margin:2px 0 9px; } .acard-bar{ height:7px; background:var(--surface-2); border-radius:5px; overflow:hidden; margin-bottom:10px; } .acard-bar>div{ height:100%; background:linear-gradient(90deg,var(--primary),#a78bfa); border-radius:5px; } .acard-tiers{ display:flex; gap:6px; flex-wrap:wrap; } .tchip{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--muted); background:var(--surface-2); border:1.5px solid var(--line); } .tchip.done{ color:#fff; background:linear-gradient(160deg,var(--primary),var(--primary-2)); border-color:var(--primary-2); box-shadow:0 1px 4px rgba(122,63,240,.35); } /* status filter (main area, visible on mobile where the sidebar is hidden) — "see what you hit" */ .ach-status{ display:inline-flex; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:18px; } .ach-status button{ font:inherit; font-size:13px; font-weight:700; cursor:pointer; border:none; background:none; color:var(--muted); padding:7px 16px; border-radius:999px; } .ach-status button.on{ color:#fff; background:linear-gradient(var(--primary),var(--primary-2)); box-shadow:0 3px 10px rgba(122,63,240,.3); } /* per-card earned state */ .acard.locked{ opacity:.82; } .acard.complete{ border-color:color-mix(in srgb,var(--gold) 45%,var(--line)); } .acard-status{ flex:0 0 auto; font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; white-space:nowrap; letter-spacing:.2px; } .acard-status.s-earned{ color:var(--goal); background:color-mix(in srgb,var(--goal) 15%,var(--surface)); } .acard-status.s-complete{ color:#7a5a10; background:linear-gradient(160deg,#ffe9a8,#f4c430); } .acard-status.s-locked{ color:var(--muted); background:var(--surface-2); border:1px solid var(--line); } .acard-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acard-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .acard-foot .acard-tiers{ flex:1 1 auto; } .acard-foot .acard-count{ flex:0 0 auto; } .ach-empty{ text-align:center; color:var(--muted); font-size:14px; padding:48px 20px; } /* "Recently unlocked" — celebrates exactly what the user just earned */ .ach-recent{ background:color-mix(in srgb,var(--gold) 12%,var(--surface)); border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line)); border-radius:16px; padding:14px 16px; margin-bottom:18px; box-shadow:var(--shadow-sm); } .ach-recent-head{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#a9791b; margin-bottom:11px; } .ach-recent-head svg{ width:16px; height:16px; color:var(--gold); } .ach-recent-list{ display:flex; flex-direction:column; gap:8px; } .ari{ display:flex; align-items:center; gap:11px; } .ari-ic{ width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; background:color-mix(in srgb,var(--gold) 20%,var(--surface)); color:#b9860b; } .ari-ic svg{ width:20px; height:20px; } .ari-num{ font-size:15px; font-weight:800; } .ari-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:var(--ink); font-size:14px; } .ari-tier{ flex:0 0 auto; font-size:12px; font-weight:800; color:#7a5a10; background:linear-gradient(160deg,#ffe9a8,#f4c430); padding:2px 10px; border-radius:999px; } .ari-new, .acard-new{ flex:0 0 auto; font-size:10px; font-weight:900; letter-spacing:.5px; color:#fff; background:linear-gradient(var(--primary),var(--primary-2)); padding:3px 7px; border-radius:6px; } /* NEW markers in the main list */ .tchip.new{ box-shadow:0 0 0 2px var(--gold),0 0 8px rgba(255,176,32,.6); animation:achpulse 1.6s ease-in-out infinite; } @keyframes achpulse{ 0%,100%{ box-shadow:0 0 0 2px var(--gold),0 0 6px rgba(255,176,32,.5); } 50%{ box-shadow:0 0 0 2px var(--gold),0 0 13px rgba(255,176,32,.9); } } .acard.has-new{ border-color:color-mix(in srgb,var(--gold) 50%,var(--line)); } @media (prefers-reduced-motion:reduce){ .tchip.new{ animation:none; } } .ach-foot{ text-align:center; color:var(--muted); font-size:14px; background:var(--surface); border:1px dashed var(--line); border-radius:12px; padding:12px; margin-top:8px; } @media (max-width:720px){ .ach-side{ display:none; } .ach-summary{ grid-template-columns:1fr; } } .prof-note{ font-size:13px; color:#6b7192; margin-bottom:6px; } .prof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; } .prof-stat{ background:#fff; border:1px solid #e5e8f2; border-radius:14px; padding:16px 10px; } .prof-num{ font-size:34px; font-weight:800; color:#6a2fe0; line-height:1.1; } .prof-lab{ font-size:13px; color:#7a6f57; margin-top:4px; } .over-box{ max-width:400px; } .over-head{ display:flex; align-items:center; justify-content:center; gap:12px; } .over-av{ position:relative; flex:none; } .over-av .av{ box-shadow:0 4px 14px rgba(0,0,0,.16); } .over-trophy{ position:absolute; right:-8px; bottom:-6px; width:30px; height:30px; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.22)); } .over-trophy svg{ width:100%; height:100%; } .over-title{ font-size:40px !important; letter-spacing:-1px; font-weight:800; animation:overpop .5s cubic-bezier(.2,.9,.3,1); } .over-title.win{ color:var(--primary) !important; } .over-title.lose{ color:var(--muted) !important; } @keyframes overpop{ 0%{ transform:scale(.5); opacity:0; } 55%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } } .over-scores{ margin:14px 0; } .over-scores .row{ display:flex; align-items:center; gap:8px; font-size:18px; padding:8px 4px; border-bottom:1px solid var(--line); } .over-scores .row .rn{ flex:1; text-align:left; color:var(--ink); } .over-scores .row .rv{ color:var(--muted); font-weight:700; } .over-scores .row.win{ font-weight:bold; } .over-scores .row.win .rn, .over-scores .row.win .rv{ color:var(--primary); } .over-recap{ margin:6px 0 4px; } .recap-line{ font-size:15px; color:var(--muted); } .recap-line b{ color:var(--ink); } .over-btns{ display:flex; flex-direction:column; gap:9px; margin-top:14px; } .over-btns .big{ margin-top:0; padding:12px 14px; font-size:16px; width:100%; white-space:nowrap; } .over-btn-row{ display:flex; gap:9px; } .over-btn-row .big{ flex:1; } .share-btn{ background:var(--surface) !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:var(--shadow-sm) !important; } .over-menu{ display:block; margin:14px auto 0; font-size:15px; color:var(--muted); } /* end-game primary action → green "go" so it's the obvious tap; Back to Menu is a real (secondary) button */ .big.green{ background:linear-gradient(#22c55e,#16a34a); box-shadow:0 6px 16px rgba(22,163,74,.34); } .big.green:hover{ filter:brightness(1.05); } .over-menu-btn{ display:block; width:100%; margin:12px auto 0; font:inherit; font-size:15px; font-weight:800; cursor:pointer; padding:12px 14px; border-radius:14px; background:var(--surface); color:var(--muted); border:1px solid var(--line); box-shadow:var(--shadow-sm); } .over-menu-btn:hover{ color:var(--ink); border-color:#c9c4de; } .over-menu-btn:active{ transform:translateY(1px); } /* ---- online client: auth / profile / leaderboard ---- */ .field{ font:inherit; font-size:16px; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); } .field:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(122,63,240,.2); } .field-err{ color:#c0392b; font-size:13px; min-height:16px; font-weight:600; } .field-hint{ color:var(--muted); font-size:12px; margin-top:-4px; } .prof-name-row{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; } .mini-btn{ font:inherit; font-size:12px; font-weight:700; cursor:pointer; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:4px 10px; color:var(--muted); } .mini-btn:hover{ color:var(--ink); } .edit-name{ display:flex; flex-direction:column; gap:8px; max-width:280px; margin:10px auto 0; text-align:left; } .edit-name-row{ display:flex; align-items:center; gap:12px; } .edit-name-row .big{ flex:1; } .leader-list{ max-height:52vh; overflow-y:auto; margin-top:2px; text-align:left; } .leader-row{ display:flex; align-items:center; gap:12px; padding:9px 6px; border-bottom:1px solid #e3d6b6; } .leader-rank{ width:26px; height:26px; border-radius:50%; background:#f4f6fd; color:#7a6f57; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; } .leader-rank.m1{ background:linear-gradient(#ffe9a8,#f4c430); color:#7a5a10; box-shadow:0 2px 6px rgba(244,196,48,.5); } .leader-rank.m2{ background:linear-gradient(#eef1f6,#c3ccdb); color:#525a6c; box-shadow:0 2px 6px rgba(160,170,190,.45); } .leader-rank.m3{ background:linear-gradient(#f6d6ac,#d68a4c); color:#5f3512; box-shadow:0 2px 6px rgba(198,130,70,.45); } .leader-name{ flex:1; min-width:0; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:5px; } .leader-name .ln-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .leader-xp{ color:#6b7192; font-weight:700; font-size:14px; white-space:nowrap; flex:0 0 auto; } .leader-arw{ flex:0 0 auto; color:#c2c9dc; font-weight:700; font-size:18px; line-height:1; margin-left:-4px; } .leader-row.me{ background:linear-gradient(90deg,rgba(255,150,40,.16),rgba(255,150,40,.03)); border:1.5px solid #ff9a3c; border-radius:12px; margin:4px 0; padding:9px 8px; } .leader-row.me .leader-name{ color:#e0700f; } /* leaderboard header + columns */ .lb-head{ text-align:center; margin-bottom:8px; } .lb-trophy{ display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(150deg,#ffe9a8,#f4c430); box-shadow:0 6px 16px rgba(244,196,48,.4); margin-bottom:4px; } .lb-trophy svg{ width:28px; height:28px; } .lb-head h2{ margin:0; } .lb-tag{ margin:2px 0 0; color:var(--muted); font-weight:600; font-size:13px; } .lb-cols{ display:flex; align-items:center; gap:12px; padding:0 6px 6px; font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); opacity:.7; border-bottom:1px solid #e3d6b6; } .lb-cols .lbc-rank{ width:26px; text-align:center; flex:0 0 auto; } .lb-cols .lbc-player{ flex:1; padding-left:48px; } .lb-cols .lbc-val{ flex:0 0 auto; } /* your-position footer */ .lb-you{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:16px; background:linear-gradient(135deg,#8b5cf6,#6d28d9); color:#fff; box-shadow:0 8px 20px rgba(109,40,217,.35); } .lb-you .ly-rank{ font-weight:800; font-size:15px; min-width:32px; flex:0 0 auto; } .lb-you .ly-name{ flex:1; min-width:0; font-weight:800; display:flex; align-items:center; gap:6px; } .lb-you .leader-xp{ color:rgba(255,255,255,.92); font-weight:800; } .lb-you .leader-xp b{ color:#fff !important; } .lb-you .ly-tag{ font-size:8.5px; letter-spacing:.5px; background:rgba(255,255,255,.25); border-radius:5px; padding:1px 5px; flex:0 0 auto; } .pro-tag{ display:inline-block; background:linear-gradient(#e0a02a,#c98a1e); color:#fff; font-weight:800; letter-spacing:2px; font-size:13px; padding:4px 14px; border-radius:10px; margin:8px 0; } /* ---- hardening + pro perks ---- */ .verify-bar{ text-align:center; background:#fff4e0; color:#a15c12; font-weight:600; font-size:14px; padding:8px 14px; border-bottom:1px solid #f6e0bd; } .linkbtn{ font:inherit; font-weight:800; background:none; border:none; color:var(--primary); text-decoration:underline; cursor:pointer; } .adbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; text-align:center; padding:10px; cursor:pointer; padding-bottom:calc(10px + env(safe-area-inset-bottom)); /* clear the home-bar notch */ background:var(--surface); color:var(--muted); font-size:13px; border-top:1px solid var(--line); } .adbar b{ color:#6a2fe0; } /* ---------- phone layout (portrait) ---------- */ @media (max-width:560px){ .felt{ padding:10px 8px; } /* opponents stack above/below so the board gets the full width */ .arena{ flex-direction:column; gap:6px; } .oppside{ display:flex; flex-direction:row; gap:6px; justify-content:center; flex-wrap:wrap; } .zone{ width:100%; min-height:120px; } /* smaller BASE tiles so long words fit near scale 1 (fitBoard then barely shrinks) */ .tile{ width:46px; height:54px; } .tile .pip{ font-size:24px; } .tile .val{ font-size:10px; } .hand{ gap:6px; min-height:56px; } /* keep insertion + drop hit-zones finger-sized */ .gap{ height:74px; } .gap.ins,.gap.drop{ width:30px; } .gap.drop.over{ width:52px !important; } /* the fixed adbar must not sit over the actions row / rack */ .table{ padding-bottom:72px; } .actions{ margin:14px 0 6px; gap:10px; } .act{ font-size:17px; padding:12px 22px; } .myrack{ gap:10px; padding:10px 12px; } .turn-badge{ font-size:16px; padding:7px 18px; } .combo-meter{ top:56px; font-size:.95rem; } .modal-box{ padding:22px 18px; } } .tos-row{ font-size:13px; color:#6a5c46; display:flex; align-items:center; gap:7px; } .tos-row a{ color:#6a2fe0; } /* theme picker (profile) */ .theme-head{ font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin:14px 0 6px; } .theme-pick{ display:flex; gap:10px; justify-content:center; margin-bottom:14px; } .swatch{ width:38px; height:38px; border-radius:10px; cursor:pointer; border:2px solid var(--line); position:relative; } .swatch.on{ box-shadow:0 0 0 3px var(--primary); } .swatch.locked{ opacity:.55; } /* Appearance: light/dark switch (free for everyone) */ .dark-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; font:inherit; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:8px; } .dt-face{ display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; font-size:15px; } .dt-ic{ display:flex; width:20px; height:20px; } .dt-ic svg{ width:100%; height:100%; } .dt-sun{ color:var(--gold); } .dt-moon{ color:var(--primary); display:none; } .dt-track{ position:relative; width:46px; height:26px; border-radius:999px; background:var(--line); flex:none; transition:background .18s ease; } .dt-thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .18s ease; } .dark-toggle[aria-checked="true"] .dt-track{ background:linear-gradient(var(--primary),var(--primary-2)); } .dark-toggle[aria-checked="true"] .dt-thumb{ transform:translateX(20px); } .dark-toggle[aria-checked="true"] .dt-sun{ display:none; } .dark-toggle[aria-checked="true"] .dt-moon{ display:flex; } .sw-default{ background:linear-gradient(#f8eed3,#efe1bd); } .sw-dark{ background:linear-gradient(#3a3f4a,#2b2f38); } .sw-wood{ background:linear-gradient(#c8935a,#b07d45); } .sw-neon{ background:linear-gradient(#1b1030,#120a22); box-shadow:inset 0 0 8px rgba(57,255,208,.6); } /* tile themes (Pro cosmetic) — applied via */ /* account settings */ .set-email{ text-align:center; color:#6b7192; font-size:14px; margin-bottom:14px; } .set-section{ display:flex; flex-direction:column; gap:9px; padding:14px 0; border-top:1px solid #e3d6b6; } .set-title{ font-weight:800; color:var(--ink); font-size:15px; } .set-note{ font-size:13px; color:#9a8d70; margin:0; } .set-section.danger .set-title{ color:#b0392b; } .danger-btn{ background:#fdecec !important; color:#b0392b !important; border-color:#e8b4b0 !important; } /* google sign-in */ .or-div{ text-align:center; color:#8a90b0; font-size:13px; margin:12px 0 8px; } .gbtn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; font:inherit; font-size:16px; font-weight:700; cursor:pointer; background:#fff; border:1px solid #dcd0ab; border-radius:12px; padding:11px 16px; color:#20264a; } .gbtn:hover{ background:#f4f6fd; } /* play-online menu + private room lobby */ .home-btn.big-cta{ font-size:26px; padding:22px; box-shadow:0 5px 0 rgba(0,0,0,.24); } .join-row{ display:flex; gap:8px; } .join-row .field{ flex:1; text-transform:uppercase; letter-spacing:2px; font-weight:700; text-align:center; } .join-row .home-btn{ flex:0 0 auto; width:auto; padding:11px 20px; } .online-note{ font-size:13px; color:var(--muted); max-width:320px; margin:14px auto 0; line-height:1.45; } .lobby-sub{ color:var(--muted); font-size:14px; margin-top:6px; } .lobby-code{ font-size:52px; font-weight:800; letter-spacing:10px; color:var(--primary); margin:6px 0 12px; padding-left:10px; } .lobby-players{ display:flex; flex-direction:column; gap:8px; max-width:280px; margin:16px auto; } .lobby-player{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-weight:700; color:var(--ink); } .lobby-player.kickable{ cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } .lobby-player.kickable:active{ background:#ffe1e6; border-color:#ffb3c0; } .lobby-hint{ color:var(--muted); font-size:12px; text-align:center; margin-top:-2px; } .host-tag{ font-size:11px; font-weight:800; letter-spacing:1px; color:#fff; background:var(--primary); border-radius:8px; padding:1px 8px; margin-left:6px; } .lobby-wait{ color:var(--muted); font-size:14px; } /* host: remove-a-member menu (from a long-press) */ .kick-menu{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1200; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:10px; width:min(88vw,300px); text-align:center; } .kick-menu .kick-name{ font-size:17px; font-weight:800; color:var(--ink); } .kick-menu button{ font:inherit; font-weight:800; font-size:15px; border-radius:12px; padding:11px; cursor:pointer; border:1px solid var(--line); } .kick-menu .kick-remove{ background:var(--battle); color:#fff; border-color:var(--battle); } .kick-menu .kick-cancel{ background:var(--surface-2); color:var(--ink); } /* stop accidental text/callout selection while playing */ .home-card, .home-btn, .ach-page, .lobby-code, .brand { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; } /* ======================= WORD HUNT ======================= */ #huntWrap{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:8px 4px 90px; } .hunt-top{ width:100%; max-width:420px; display:flex; align-items:center; justify-content:space-between; gap:10px; } /* fixed line-box so the <=560px font-size drop (30->26px) can't change .hunt-top's height on rotation/resize and nudge the board */ .hunt-timer{ font-size:30px; line-height:40px; font-weight:800; color:var(--ink); min-width:74px; font-variant-numeric:tabular-nums; } .hunt-timer.low{ color:var(--battle); animation:pulselow 1s ease-in-out infinite; } @keyframes pulselow{ 50%{ opacity:.45; } } .hunt-scores{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .hs{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:5px 12px; text-align:center; min-width:56px; box-shadow:var(--shadow-sm); } .hs b{ display:block; font-size:18px; color:var(--ink); line-height:1.1; } .hs span{ font-size:11px; color:var(--muted); } .hs.me{ background:var(--primary); border-color:var(--primary); } .hs.me b{ color:#fff; } .hs.me span{ color:#dfe0fb; } /* one line only: this echo sits directly above the board, so a long traced word wrapping to a 2nd line would push the board down mid-swipe and snap it back on lift. Keep it single-line (clip an over-long word rather than wrap). */ .hunt-word{ min-height:34px; font-size:26px; font-weight:800; letter-spacing:4px; color:var(--muted); text-transform:uppercase; white-space:nowrap; max-width:100%; overflow:hidden; } .hunt-word.valid{ color:#16a34a; } .hunt-word.invalid{ color:var(--battle); } .hunt-word.dupe{ color:var(--daily); } .hunt-word.scored{ animation:tilepop .3s ease; } .hunt-grid{ position:relative; display:grid; grid-template-columns:repeat(var(--n,4), 1fr); gap:9px; width:min(92vw, 380px); touch-action:none; user-select:none; -webkit-user-select:none; } .hunt-line{ position:absolute; inset:0; pointer-events:none; z-index:3; overflow:visible; } .hcell{ position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--tile); border-radius:14px; box-shadow:0 4px 12px rgba(31,37,72,.2), inset 0 1px 0 rgba(255,255,255,.1); font-size:min(8.5vw,34px); font-weight:800; color:var(--tile-ink); transition:transform .1s ease, background .1s ease; } .hcell .pip{ pointer-events:none; } .hcell.sel{ background:linear-gradient(var(--primary),var(--primary-2)); color:#fff; box-shadow:0 0 0 3px rgba(122,63,240,.3), 0 5px 12px rgba(122,63,240,.4); transform:scale(1.05); z-index:2; } .hcell.flash-good{ background:linear-gradient(#34d399,#10b981) !important; color:#fff !important; } .hcell.flash-bad{ background:linear-gradient(#fb7185,#f43f5e) !important; color:#fff !important; } .hcell.flash-dupe{ background:linear-gradient(#fbbf24,#f59e0b) !important; color:#fff !important; } .hunt-actions{ display:flex; gap:12px; } .hunt-hint{ font-size:13px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px; } .hint-help{ flex:0 0 auto; width:20px; height:20px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); font:inherit; font-weight:800; font-size:12px; line-height:1; cursor:pointer; } .hint-help:hover{ color:var(--ink); border-color:var(--muted); } .mh-box{ max-width:420px; } .mh-body{ margin-top:4px; } .mh-body p{ margin:8px 0; color:var(--muted); line-height:1.5; font-size:14px; } .mh-body b{ color:var(--ink); } .mh-toggle{ display:flex; align-items:center; gap:9px; margin-top:16px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; } .mh-toggle input{ width:18px; height:18px; accent-color:var(--primary); cursor:pointer; } /* pre-game + in-game coaching (mode tips, Takeover colour legend, Gauntlet mode pill) */ .gi-card .gi-tip{ font-size:14px; color:var(--muted); line-height:1.4; max-width:300px; margin-top:2px; } .gi-you{ color:var(--ink); font-weight:700; } .gi-sw{ display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-1px; margin:0 3px; box-shadow:0 0 0 1px rgba(0,0,0,.18); } .tile-you{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:5px; } .tile-sw{ width:12px; height:12px; border-radius:3px; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.18); } .goal-mode{ display:inline-block; background:var(--goal); color:#fff; font-size:10px; font-weight:800; letter-spacing:.5px; padding:1px 7px; border-radius:999px; margin-right:7px; vertical-align:1px; } .gi-optout{ pointer-events:auto; margin-top:8px; background:none; border:none; cursor:pointer; font:inherit; font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:2px; } .gi-optout:hover{ color:var(--ink); } .hunt-result-score .big-score{ font-size:56px; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-1.5px; } .hunt-found-line{ font-size:16px; color:var(--muted); margin:8px 0; } .hunt-found-line b{ color:var(--ink); } .hunt-missed{ margin-top:6px; } .missed-h{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; } .missed-words{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:6px; } .missed-words span{ background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:3px 9px; font-weight:700; color:var(--muted); } @media (max-width:560px){ .hunt-grid{ width:96vw; gap:7px; } .hunt-timer{ font-size:26px; } } /* ===== Battle + Goal (Word Hunt formats) ===== */ .home-btn.battle{ background:linear-gradient(#e4572e,#c8431f); color:#fff; border:none; } .home-btn.goal{ background:linear-gradient(#8e5bd0,#7444bb); color:#fff; border:none; } #huntWrap[data-format="battle"] .hunt-word, #huntWrap[data-format="goal"] .hunt-word{ min-height:30px; font-size:22px; } /* Takeover: a claimed tile is FILLED with its owner's colour (bright letters), so the board reads as territory. :not(.sel) lets the purple trace-highlight still win while you're tracing over an owned tile. */ .hcell[data-owner]{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.45); } .hcell[data-owner="0"]{ --own:var(--o0); } .hcell[data-owner="1"]{ --own:var(--o1); } .hcell[data-owner="2"]{ --own:var(--o2); } .hcell[data-owner="3"]{ --own:var(--o3); } .hcell[data-owner="4"]{ --own:var(--o4); } .hcell[data-owner="5"]{ --own:var(--o5); } .hcell[data-owner="6"]{ --own:var(--o6); } .hcell[data-owner="7"]{ --own:var(--o7); } /* each additional use of a tile darkens it (~15%/level, depth 0..3) — "who used it more" reads as deeper colour */ .hcell[data-owner]:not(.sel){ background:color-mix(in srgb, var(--own), #000 calc(var(--depth,0) * 15%)); } .hcell.mine{ box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.12), 0 5px 12px rgba(31,37,72,.3); transform:scale(1.05); z-index:1; } .hcell.claimpop{ animation:claimpop .36s cubic-bezier(.2,.9,.3,1); } @keyframes claimpop{ 0%{ transform:scale(.8); } 55%{ transform:scale(1.14); } 100%{ transform:scale(1); } } /* ===== avatars (Word Creatures) — circular chip: initials fallback + PNG on top + CSS border frame ===== */ .av{ position:relative; display:inline-flex; border-radius:50%; flex:none; vertical-align:middle; } .av .av-fb, .av .av-img{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; } .av .av-fb{ display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; letter-spacing:-.02em; } .av .av-img{ object-fit:contain; padding:7.5%; box-sizing:border-box; background:var(--surface-2); } /* animated pixel-sprite avatars (idle loop). steps(N,jump-none) lands on each frame exactly (jump-end would show partial frames); image-rendering:pixelated keeps it crisp when scaled up. */ .av .av-sprite{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; background-color:var(--surface-2); background-repeat:no-repeat; background-size:400% 100%; background-position-y:52%; image-rendering:pixelated; } .av-dino{ animation:av-dino-idle .9s steps(4,jump-none) infinite; } .av-dumpling{ animation:av-dino-idle 1.1s steps(4,jump-none) infinite; } /* squishy dumpling: same 4-frame strip, gentler loop */ .av-happy{ animation:av-dino-idle 1.1s steps(4,jump-none) infinite; } /* happy dumpling: 4-frame strip */ .av .av-happy{ image-rendering:auto; } /* high-res illustrated art → smooth, not pixelated (overrides .av-sprite) */ .av .av-six{ background-size:600% 100%; image-rendering:auto; } /* 6-frame illustrated strip (overrides the 4-frame default) */ .av-six{ animation:av-dino-idle 1s steps(6,jump-none) infinite; } @keyframes av-dino-idle{ from{ background-position-x:0%; } to{ background-position-x:100%; } } @media (prefers-reduced-motion: reduce){ .av-dino, .av-dumpling, .av-happy, .av-six{ animation:none; } } .av-b-none{ box-shadow:0 0 0 2px rgba(0,0,0,.12); } .av-b-bronze{ box-shadow:0 0 0 2px #cd7f32, 0 0 6px rgba(205,127,50,.45); } .av-b-silver{ box-shadow:0 0 0 2px #c0c7d0, 0 0 6px rgba(192,199,208,.55); } .av-b-gold{ box-shadow:0 0 0 2px #f5c542, 0 0 9px rgba(245,197,66,.6); } /* animated Pro frames */ .av-b-holo{ animation:av-holo 3.4s linear infinite; } @keyframes av-holo{ 0%{ box-shadow:0 0 0 3px #ff5ac8,0 0 12px rgba(255,90,200,.75); } 20%{ box-shadow:0 0 0 3px #a05aff,0 0 12px rgba(160,90,255,.75); } 40%{ box-shadow:0 0 0 3px #5ac8ff,0 0 12px rgba(90,200,255,.75); } 60%{ box-shadow:0 0 0 3px #7cff5a,0 0 12px rgba(124,255,90,.75); } 80%{ box-shadow:0 0 0 3px #ffe45a,0 0 12px rgba(255,228,90,.75); } 100%{ box-shadow:0 0 0 3px #ff5ac8,0 0 12px rgba(255,90,200,.75); } } .av-b-neon{ animation:av-neon 1.6s ease-in-out infinite; } @keyframes av-neon{ 0%,100%{ box-shadow:0 0 0 2px #22d3ee,0 0 6px rgba(34,211,238,.5); } 50%{ box-shadow:0 0 0 2px #22d3ee,0 0 14px rgba(34,211,238,.95); } } .av-b-flame{ animation:av-flame 1.3s ease-in-out infinite; } @keyframes av-flame{ 0%,100%{ box-shadow:0 0 0 2px #ff7a1a,0 0 6px rgba(255,90,20,.5); } 50%{ box-shadow:0 0 0 2px #ffb01a,0 0 16px rgba(255,140,26,.95); } } /* Shop frames (distinct colours from the Pro set) */ .av-b-aurora{ animation:av-aurora 2.6s ease-in-out infinite; } @keyframes av-aurora{ 0%,100%{ box-shadow:0 0 0 3px #22c55e,0 0 12px rgba(34,197,94,.7); } 33%{ box-shadow:0 0 0 3px #14b8a6,0 0 14px rgba(20,184,166,.8); } 66%{ box-shadow:0 0 0 3px #3b82f6,0 0 16px rgba(59,130,246,.85); } } .av-b-crimson{ animation:av-crimson 1.4s ease-in-out infinite; } @keyframes av-crimson{ 0%,100%{ box-shadow:0 0 0 3px #ff2d6a,0 0 8px rgba(255,45,106,.55); } 50%{ box-shadow:0 0 0 3px #ff5c8a,0 0 20px rgba(255,45,106,.95); } } @media (prefers-reduced-motion: reduce){ .av-b-holo,.av-b-neon,.av-b-flame,.av-b-aurora,.av-b-crimson{ animation:none; } } /* --- NEW frame concepts (free local preview) --- */ .av-b-rosegold{ box-shadow:0 0 0 2px #e79aa2, 0 0 0 3.5px #f7d0c0, 0 0 11px rgba(231,154,162,.6); } .av-b-obsidian{ box-shadow:0 0 0 2px #15121d, 0 0 0 3.5px #d4af37, 0 0 8px rgba(0,0,0,.45); } .av-b-emerald{ box-shadow:0 0 0 2px #17a25f, 0 0 0 3.5px #86e6ad, 0 0 11px rgba(23,162,95,.55); } .av-b-sapphire{ box-shadow:0 0 0 2px #2563eb, 0 0 0 3.5px #93b8ff, 0 0 11px rgba(37,99,235,.55); } .av-b-amethyst{ box-shadow:0 0 0 2px #8b3fe0, 0 0 0 3.5px #cea8ff, 0 0 11px rgba(139,63,224,.55); } .av-b-electric{ animation:av-electric 1.2s ease-in-out infinite; } @keyframes av-electric{ 0%,100%{ box-shadow:0 0 0 2px #38bdf8,0 0 6px rgba(56,189,248,.6); } 50%{ box-shadow:0 0 0 2px #bae6fd,0 0 17px rgba(56,189,248,.95),0 0 28px rgba(56,189,248,.5); } } .av-b-frost{ animation:av-frost 2.6s ease-in-out infinite; } @keyframes av-frost{ 0%,100%{ box-shadow:0 0 0 2px #bfe6ff,0 0 8px rgba(191,230,255,.6); } 50%{ box-shadow:0 0 0 2px #eaf7ff,0 0 15px rgba(191,230,255,.95); } } .av-b-prism{ box-shadow:0 0 9px rgba(168,85,247,.4); } .av-b-sunburst{ box-shadow:0 0 8px rgba(245,197,66,.5); } .av-b-galaxy{ animation:av-galaxy 2.4s ease-in-out infinite; } @keyframes av-galaxy{ 0%,100%{ box-shadow:0 0 8px rgba(124,63,240,.6); } 33%{ box-shadow:0 0 18px rgba(59,130,246,.9); } 66%{ box-shadow:0 0 18px rgba(217,70,239,.9); } } .av-b-prism::before,.av-b-sunburst::before,.av-b-galaxy::before{ content:""; position:absolute; inset:-4px; border-radius:50%; -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px)); mask:radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px)); } .av-b-prism::before{ background:conic-gradient(from 0deg,#ff5c7a,#ffb020,#22c55e,#3b82f6,#a855f7,#ff5c7a); animation:av-spin 3s linear infinite; } .av-b-sunburst::before{ background:repeating-conic-gradient(#f5c542 0 12deg,#b8860b 12deg 24deg); animation:av-spin 6s linear infinite; } .av-b-galaxy::before{ background:radial-gradient(1.2px 1.2px at 22% 30%,#fff,transparent),radial-gradient(1px 1px at 74% 22%,#fff,transparent),radial-gradient(1.3px 1.3px at 82% 68%,#fff,transparent),radial-gradient(1px 1px at 30% 78%,#fff,transparent),radial-gradient(1px 1px at 60% 90%,#cbb8ff,transparent),radial-gradient(circle at 28% 26%,#8b3fe0,transparent 45%),radial-gradient(circle at 74% 72%,#3b82f6,transparent 45%),radial-gradient(circle at 50% 50%,#1a1140,#0b0a1e 75%); animation:av-spin 10s linear infinite; } @keyframes av-spin{ to{ transform:rotate(360deg); } } /* Coffee set — Latte frame (spinning latte swirl + warm pulse) */ .av-b-latte{ animation:av-latte 2.4s ease-in-out infinite; } @keyframes av-latte{ 0%,100%{ box-shadow:0 0 8px rgba(180,120,70,.55); } 50%{ box-shadow:0 0 18px rgba(210,150,90,.95),0 0 30px rgba(150,90,50,.5); } } .av-b-latte::before{ content:""; position:absolute; inset:-4px; border-radius:50%; background:conic-gradient(from 0deg,#3b2417,#8a5a34,#efe0c4,#8a5a34,#5a3620,#c69a6a,#f4e8cf,#6f4e37,#3b2417); animation:av-spin 5s linear infinite; -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px)); mask:radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 calc(100% - 8px)); } @media (prefers-reduced-motion: reduce){ .av-b-electric,.av-b-frost,.av-b-galaxy,.av-b-latte,.av-b-prism::before,.av-b-sunburst::before,.av-b-galaxy::before,.av-b-latte::before{ animation:none; } } /* ===== in-game HUD: opponents strip on top, your profile card under the board ===== */ /* The opponents strip sits ABOVE the board, so its height must be constant no matter how many players are in the room — otherwise more chips = more rows = the board gets pushed down. Keep it a single non-wrapping lane that scrolls sideways; player count and live re-sorting then never change its height, so the board never moves. */ .hunt-oppo{ display:flex; flex-direction:column; gap:5px; margin:0 0 2px; width:100%; align-items:center; } .hopp-row{ display:flex; gap:6px; flex-wrap:nowrap; justify-content:safe center; width:100%; max-width:440px; overflow-x:auto; overflow-y:hidden; padding-bottom:1px; scrollbar-width:none; -ms-overflow-style:none; } .hopp-row::-webkit-scrollbar{ display:none; } .hopp{ flex:none; display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:3px 10px 3px 5px; box-shadow:var(--shadow-sm); } .hopp .avatar-wrap, .hopp .av-img, .hopp img, .hopp svg, .hopp .av-sprite{ width:28px !important; height:28px !important; } .hopp-name{ font-size:12.5px; font-weight:800; color:var(--ink); max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:4px; } .hopp-val{ font-size:13px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } /* Gauntlet/Takeover stack a banner above the board — tighten the whole play area so the board never gets pushed off */ #huntWrap[data-format="goal"], #huntWrap[data-format="battle"]{ gap:8px; padding-top:4px; } #huntWrap[data-format="goal"] .hunt-goal{ padding:6px 14px; height:106px; } #huntWrap[data-format="goal"] .goal-label{ font-size:14px; } #huntWrap[data-format="goal"] .goal-prog b{ font-size:18px; } #huntWrap[data-format="goal"] .goal-done{ font-size:11px; } #huntWrap[data-format="goal"] .goal-letters{ margin-top:3px; } #huntWrap[data-format="goal"] .goal-letters span{ width:19px; height:19px; font-size:11px; } .hopp-dot{ width:9px; height:9px; border-radius:50%; flex:none; } .hopp-body{ display:flex; flex-direction:column; line-height:1.2; min-width:0; } .hopp-name{ font-size:14px; font-weight:800; color:var(--ink); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:flex; align-items:center; gap:5px; } .hopp-sub{ display:flex; align-items:center; gap:8px; margin-top:1px; } .hopp-sub .hopp-rank{ font-size:11.5px; font-weight:800; font-style:normal; font-variant-numeric:tabular-nums; } .hopp-val{ font-size:12.5px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums; } .hunt-me{ display:flex; justify-content:center; margin:8px 0 2px; } .hme{ display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:8px 16px 8px 8px; box-shadow:var(--shadow-sm); min-width:230px; max-width:340px; width:100%; } .hme-info{ flex:1; display:flex; flex-direction:column; line-height:1.15; min-width:0; } .hme-name{ font-size:15px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hme-meta{ font-size:12px; color:var(--muted); } .hme-meta .rk{ font-style:normal; font-weight:800; } .hme-val{ text-align:right; flex:none; } .hme-val b{ display:block; font-size:22px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; } .hme-val span{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; } /* profile: avatar header + avatar/frame pickers */ .prof-head{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:2px; } .cos-pick{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:4px 0 14px; } .cos{ font:inherit; cursor:pointer; background:none; border:none; padding:2px; display:flex; flex-direction:column; align-items:center; gap:5px; } .cos-cap{ font-size:10.5px; color:var(--muted); max-width:66px; text-align:center; line-height:1.1; } .cos.on .av{ outline:2px solid var(--primary); outline-offset:2px; } .cos.on .cos-cap{ color:var(--primary); font-weight:800; } .cos.locked .av{ filter:grayscale(1); opacity:.45; } /* battle tile bar */ .tilebar{ display:flex; width:100%; height:16px; border-radius:9px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); } .tilebar .seg{ height:100%; transition:width .25s ease; } .tilebar .seg.neutral{ background:#dfe3f0; } .tilechips{ display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:center; margin-top:6px; font-size:13px; } .tilechips .tchip{ display:inline-flex; align-items:center; gap:4px; color:var(--muted); background:none; border:none; width:auto; height:auto; } .tilechips .tchip.me{ font-weight:800; color:var(--ink); } .tilechips .tchip i.dot{ width:11px; height:11px; border-radius:3px; display:inline-block; flex:0 0 auto; } .tilechips .tchip b{ color:var(--ink); } .tilechips .tchip{ align-items:flex-start; } .tc-body{ display:flex; flex-direction:column; line-height:1.2; } /* goal banner + progress rail */ /* Gauntlet cycles goals mid-game (label length changes; the letters row appears/grows). The banner sits above the board, so its height must stay constant across goals or the board jumps. Center content in a fixed min-height box, cap the label at two lines, and keep the letters on one scrolling row — nothing can exceed the reserved height. */ .hunt-goal{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--goal); border-radius:14px; padding:9px 15px; text-align:center; max-width:420px; width:100%; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; } .goal-label{ font-weight:800; color:var(--ink); font-size:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .goal-prog{ font-size:15px; color:var(--muted); } .goal-prog b{ color:var(--goal); font-size:20px; } .goal-letters{ display:flex; flex-wrap:nowrap; gap:4px; justify-content:safe center; margin-top:5px; max-width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; } .goal-letters::-webkit-scrollbar{ display:none; } .goal-letters span{ flex:none; } .goal-letters span{ background:var(--goal); color:#fff; font-weight:800; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13px; } .hunt-scores .grail{ display:flex; align-items:center; gap:8px; width:100%; max-width:280px; font-size:13px; margin:2px 0; } .hunt-scores .grail.me{ font-weight:800; } .grail .gn{ display:flex; flex-direction:column; width:auto; min-width:88px; max-width:130px; text-align:left; color:var(--muted); line-height:1.2; } .grail .gn .gn-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .grail .gbar{ flex:1; height:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; overflow:hidden; } .grail .gbar i{ display:block; height:100%; border-radius:6px; transition:width .3s ease; } .grail .gc{ width:52px; text-align:right; color:var(--muted); } #huntWrap[data-format="goal"] .hunt-scores, #huntWrap[data-format="battle"] .hunt-scores{ flex-direction:column; align-items:flex-end; } /* huntRoom join row */ .join-row{ display:flex; gap:8px; justify-content:center; margin-top:12px; } .join-input{ font:inherit; font-size:18px; font-weight:800; letter-spacing:3px; text-transform:uppercase; text-align:center; width:110px; padding:9px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink); } .goal-done{ font-size:12px; font-weight:800; color:var(--goal); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .grail .gdone{ font-weight:800; color:var(--goal); width:34px; text-align:right; } /* XP bar on the results screen */ .xp-wrap{ margin:14px auto 4px; max-width:300px; } .xp-head{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); font-weight:700; margin-bottom:5px; } .xp-head b{ color:var(--ink); } .xp-head .xp-gain{ margin-left:auto; color:var(--primary); font-weight:800; } .xp-track{ position:relative; height:12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); overflow:hidden; } .xp-guest{ font-size:13px; color:var(--muted); } /* guest post-game conversion card */ .su-card{ margin:14px 2px 4px; padding:16px 16px 14px; border:2px solid var(--primary); border-radius:16px; background:linear-gradient(180deg, rgba(122,63,240,.07), rgba(122,63,240,0)); text-align:center; } .su-head{ font-size:18px; font-weight:800; color:var(--ink); } .su-sub{ font-size:13.5px; color:var(--muted); line-height:1.45; margin:4px auto 12px; max-width:34ch; } .su-google{ font-size:16px; font-weight:800; box-shadow:0 4px 12px rgba(31,36,64,.1); } .su-email{ display:block; width:100%; margin-top:9px; padding:4px; background:none; border:none; color:var(--primary); font:inherit; font-size:14px; font-weight:700; cursor:pointer; } .su-email:hover{ text-decoration:underline; } .su-loss{ font-size:12px; color:var(--muted); margin-top:10px; } /* demoted secondary button (guest Play Again → outline so signup is the hero) */ .big.btn-secondary{ background:none; color:var(--muted); box-shadow:none; border:2px solid var(--line); font-weight:700; } .big.btn-secondary:hover{ filter:none; background:var(--surface-2); } /* ===== redesigned finished screen ===== */ .over-title.lose{ color:var(--muted) !important; } /* in-game numeric rating beside a name (chess.com style) */ .rtg{ font-style:normal; font-weight:800; font-variant-numeric:tabular-nums; } .hopp-name .rtg{ font-size:10.5px; } .hme-name .rtg{ font-size:13px; margin:0 2px; } /* head-to-head score strip */ #huntH2H.h2h-score{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; margin:12px 0 2px; } .h2h-side{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 8px; text-align:center; box-shadow:var(--shadow-sm); } .h2h-side.me.winner{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(122,63,240,.18),var(--shadow-sm); } .h2h-side .who{ font-size:12.5px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .h2h-side .who .r{ font-weight:800; font-variant-numeric:tabular-nums; } .h2h-side .pts{ font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1.05; font-variant-numeric:tabular-nums; } .h2h-side .lbl{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; } .h2h-score .vs{ font-size:12px; font-weight:800; color:#a49fbf; } /* count-up race reveal: cards pop in together, scores sprint 0->final, winner glows at the line */ .js-count{ font-variant-numeric:tabular-nums; } .h2h-detail{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.3; } .h2h-detail b{ color:var(--ink); font-weight:800; } .solo-score .h2h-detail{ font-size:14px; margin-top:7px; } #huntH2H .h2h-side, #huntH2H .big-score, #huntH2H .over-scores .row{ animation:raceIn .34s cubic-bezier(.2,.9,.3,1) both; } @keyframes raceIn{ from{ opacity:0; transform:translateY(9px) scale(.96); } to{ opacity:1; transform:none; } } #huntH2H.raced .h2h-side.winner{ animation:winGlow .7s ease; } #huntH2H.raced .over-scores .row.win{ animation:winGlowRow .7s ease; } @keyframes winGlow{ 0%{ box-shadow:var(--shadow-sm); } 45%{ box-shadow:0 0 0 3px rgba(34,197,94,.55),0 8px 20px rgba(34,197,94,.35); } 100%{ box-shadow:var(--shadow-sm); } } @keyframes winGlowRow{ 0%,100%{ background:transparent; } 45%{ background:rgba(34,197,94,.16); } } @media (prefers-reduced-motion:reduce){ #huntH2H .h2h-side, #huntH2H .big-score, #huntH2H .over-scores .row, #huntH2H.raced .h2h-side.winner, #huntH2H.raced .over-scores .row.win{ animation:none !important; } } /* cinematic end-of-game reveal overlay: one player at a time, then the results screen */ .rv-overlay{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; cursor:pointer; background:radial-gradient(120% 90% at 50% 28%, rgba(52,36,96,.93), rgba(12,10,24,.97)); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); } .rv-overlay.in{ animation:rvFade .3s ease both; } .rv-overlay.out{ animation:rvFade .32s ease reverse both; } @keyframes rvFade{ from{ opacity:0 } to{ opacity:1 } } .rv-skip{ position:absolute; top:16px; right:18px; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.42); } .rv-stage{ width:min(90vw,420px); padding:24px; text-align:center; color:#fff; } .rv-card{ animation:rvCardIn .42s cubic-bezier(.2,.9,.3,1) both; } .rv-card.pop{ animation:rvPop .5s ease; } @keyframes rvCardIn{ from{ opacity:0; transform:translateY(18px) scale(.92) } to{ opacity:1; transform:none } } @keyframes rvPop{ 0%{ transform:scale(1) } 42%{ transform:scale(1.05) } 100%{ transform:scale(1) } } .rv-rank{ font-size:13px; font-weight:800; letter-spacing:3px; color:rgba(255,255,255,.5); } .rv-crown{ font-size:14px; font-weight:900; letter-spacing:2px; color:#ffd24a; text-shadow:0 0 18px rgba(255,210,74,.5); } .rv-name{ font-size:clamp(30px,9vw,40px); font-weight:900; letter-spacing:-.5px; margin:8px 0 16px; line-height:1.05; } .rv-line{ font-size:19px; margin:8px 0; color:rgba(255,255,255,.82); animation:rvLineIn .36s ease both; } .rv-line b{ color:#fff; font-weight:800; } @keyframes rvLineIn{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } } .rv-scorewrap{ margin-top:18px; } .rv-score{ font-size:clamp(46px,15vw,62px); font-weight:900; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; line-height:1; } .rv-lbl{ font-size:14px; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.55); margin-left:4px; } .rv-card.winner .rv-score{ color:#3ddc84; text-shadow:0 0 30px rgba(61,220,132,.55); } @media (prefers-reduced-motion:reduce){ .rv-card, .rv-line, .rv-card.pop{ animation:none; } } #huntH2H .hunt-result-score{ text-align:center; margin:10px 0 2px; } #huntH2H.h2h-multi .over-scores{ margin-top:8px; } .over-scores .rr{ font-weight:800; font-size:12px; font-variant-numeric:tabular-nums; margin-left:5px; } /* progression card: rating change + two-colour XP together */ .prog{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 15px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:11px; margin:12px 0; text-align:left; } .prog .xp-wrap{ margin:0; max-width:none; } .rating-row{ display:flex; align-items:center; gap:9px; } .rating-row .rank-dot{ width:9px; height:9px; border-radius:50%; flex:none; } .rating-row .rank-name{ font-weight:800; font-size:14px; } .rating-move{ margin-left:auto; display:flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums; } .rating-move .from{ color:var(--muted); font-weight:700; font-size:13px; } .rating-move .arw{ color:#b4afc9; } .rating-move .to{ color:var(--ink); font-weight:800; font-size:16px; } .rating-move .delta{ font-weight:800; font-size:13px; padding:1px 7px; border-radius:20px; } .rating-move .delta.up{ color:#0d7a45; background:#e2f6ea; } .rating-move .delta.down{ color:#b5303f; background:#fdeaec; } .xp-base{ position:absolute; left:0; top:0; height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); width:0; transition:width .8s cubic-bezier(.2,.9,.3,1); } .xp-gain-fill{ position:absolute; top:0; height:100%; background:linear-gradient(90deg,#ffd873,var(--gold)); width:0; box-shadow:0 0 10px rgba(255,176,32,.55); transition:width 1s cubic-bezier(.2,.9,.3,1) .35s; } .prog .xp-track{ position:relative; height:14px; } .prog .xp-head .xp-gain{ color:#c98a00; } .xp-legend{ display:flex; gap:14px; font-size:10.5px; color:var(--muted); } .xp-legend span{ display:flex; align-items:center; gap:5px; } .xp-legend .swatch{ width:10px; height:10px; border-radius:3px; } .xp-legend .swatch.base{ background:var(--primary); } .xp-legend .swatch.gain{ background:var(--gold); } /* head-to-head words */ .words-h{ display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#7d789a; margin:6px 0 6px; } .words-h .wh-note{ font-weight:600; text-transform:none; letter-spacing:0; } .h2h-words{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .wr-stack{ display:flex; flex-direction:column; gap:14px; } .wcol-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; } .wcol-head .n{ font-size:12.5px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .wcol-head .c{ font-size:10.5px; font-weight:700; color:var(--muted); flex:none; margin-left:6px; } .wcol.win .wcol-head .n{ color:var(--primary); } .wlist{ display:flex; flex-direction:column; gap:4px; } .wr-stack .wlist{ flex-flow:row wrap; } .wrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:4px 9px; font-size:13px; font-weight:700; color:var(--ink); } .wrow .ww{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; } .wrow .wp{ color:var(--primary); font-weight:800; font-size:11px; font-variant-numeric:tabular-nums; flex:none; } .wrow .wchev{ flex:none; color:#b7bcd4; font-weight:800; font-size:15px; line-height:1; margin-left:-1px; } /* affordance: this row taps to a definition */ .wrow.shared{ opacity:.42; } .wrow.best{ border-color:var(--gold); background:#fff8e9; } /* home v2 — big main modes + secondary + nav */ .mode-big{ font:inherit; text-align:left; cursor:pointer; width:100%; display:flex; flex-direction:column; gap:3px; border:none; border-radius:16px; padding:12px 18px; color:#fff; margin-bottom:8px; box-shadow:var(--shadow-sm); transition:transform .1s ease, box-shadow .1s ease; } .mode-big:hover{ transform:translateY(-2px); box-shadow:var(--shadow); } .mode-big:active{ transform:translateY(0); } .mode-big.wordhunt{ background:linear-gradient(135deg,#5b7cfa,#4361ee); box-shadow:0 8px 22px rgba(67,97,238,.34); } .mode-big.takeover{ background:linear-gradient(135deg,#ff5a86,#f5356b); box-shadow:0 8px 20px rgba(245,53,107,.32); } .mode-big.gauntlet{ background:linear-gradient(135deg,#28c56e,#18a558); box-shadow:0 8px 20px rgba(24,165,88,.3); } .mb-name{ font-size:21px; font-weight:800; letter-spacing:-.5px; } .mb-desc{ font-size:12px; opacity:.94; line-height:1.28; } .mode-row{ display:flex; gap:10px; margin-bottom:10px; } .mode-mini{ font:inherit; flex:1; cursor:pointer; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:9px 8px; box-shadow:var(--shadow-sm); transition:transform .1s ease; display:flex; flex-direction:column; gap:2px; } .mode-mini:hover{ transform:translateY(-2px); } .mode-mini b{ color:var(--ink); font-size:15px; } .mode-mini span{ color:var(--muted); font-size:11px; } /* Daily not played yet today → gold "play me" glow */ /* the Daily button (#dailyHunt, a .hw card) glows gold until today's Daily is played — see updateDailyGlow() */ #dailyHunt.daily-ready{ border-color:#f5c542; animation:daily-glow 1.9s ease-in-out infinite; } #dailyHunt.daily-ready .hw-text b{ color:#c8951a; } @keyframes daily-glow{ 0%,100%{ box-shadow:0 0 0 2px #f5c542, 0 0 12px rgba(245,197,66,.5); } 50%{ box-shadow:0 0 0 2px #f5c542, 0 0 26px rgba(245,197,66,.95); } } @media (prefers-reduced-motion: reduce){ #dailyHunt.daily-ready{ animation:none; box-shadow:0 0 0 2px #f5c542; } } .nav-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; } .nav-btn{ font:inherit; min-width:0; cursor:pointer; font-weight:700; font-size:10.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:9px 2px; box-shadow:var(--shadow-sm); transition:transform .1s ease, color .1s ease; display:flex; flex-direction:column; align-items:center; gap:4px; } .nav-btn .nav-ic{ width:22px; height:22px; flex:none; } .nav-btn span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .nav-btn:hover{ transform:translateY(-2px); color:var(--primary); } .mode-start-desc{ color:var(--muted); font-size:15px; margin:4px 0 12px; line-height:1.4; } /* mode picker (redesign): header icon badge, players pill, globe/robot icons */ .ms-ic{ width:56px; height:56px; margin:2px auto 10px; border-radius:16px; background:color-mix(in srgb,var(--primary) 13%,var(--surface)); color:var(--primary); display:flex; align-items:center; justify-content:center; } .ms-ic svg{ width:30px; height:30px; } .ms-players{ display:inline-flex; align-items:center; gap:6px; margin:0 auto 18px; padding:5px 13px; border-radius:20px; background:var(--surface-2); color:var(--primary); font-size:13px; font-weight:700; } .ms-players svg{ width:15px; height:15px; } .ms-online.big{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:13px; background:linear-gradient(135deg,#8b5cf6 0%,#7a3ff0 50%,#6d28d9 100%); box-shadow:0 8px 22px rgba(122,63,240,.42); } .ms-online.big:hover{ filter:brightness(1.05); } .ms-globe{ display:flex; } .ms-globe svg{ width:26px; height:26px; } .ms-online-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; } .ms-diff{ margin:0 0 12px; } .ms-cpu.big{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; } .ms-bot{ display:flex; } .ms-bot svg{ width:20px; height:20px; } /* Play with Friends: join section + segmented code input */ .fr-join{ text-align:center; } .fr-join-h{ font-size:19px; font-weight:800; color:var(--ink); } .fr-join-sub{ font-size:13px; color:var(--muted); margin:2px 0 12px; } .code-cells{ display:flex; justify-content:center; gap:9px; margin-bottom:14px; } .code-cell{ width:52px; height:60px; text-align:center; font-size:26px; font-weight:800; color:var(--ink); text-transform:uppercase; background:var(--surface-2); border:2px solid var(--line); border-radius:14px; outline:none; caret-color:var(--primary); transition:border-color .12s, background .12s; } .code-cell:focus{ border-color:var(--primary); background:var(--surface); } .fr-note{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px; font-size:12.5px; color:var(--muted); } .fr-note svg{ width:16px; height:16px; flex:none; color:var(--primary); } /* results: coloured 1v1 score cards (YOU purple, opponent dark) */ .h2h-score .h2h-side{ border-color:transparent; box-shadow:0 6px 16px rgba(31,37,72,.18); } .h2h-score .h2h-side.me{ background:linear-gradient(150deg,#8b5cf6,#6d28d9); } .h2h-score .h2h-side:not(.me){ background:linear-gradient(150deg,#3a3f5e,#232640); } .h2h-score .h2h-side.me.winner{ box-shadow:0 0 0 3px rgba(139,92,246,.35),0 6px 16px rgba(122,63,240,.3); } .h2h-score .h2h-side .who{ display:inline-block; max-width:100%; padding:3px 12px; border-radius:11px; margin-bottom:5px; font-size:11px; letter-spacing:.5px; text-transform:uppercase; background:rgba(255,255,255,.2); color:#fff; } .h2h-score .h2h-side .who .uname{ color:#fff; } .h2h-score .h2h-side .who .r{ display:none; } /* hide the rank-coloured rating on the score cards — the rating change has its own row */ .h2h-score .h2h-side .pts{ color:#fff; } .h2h-score .h2h-side .lbl{ color:rgba(255,255,255,.7); } .h2h-score .h2h-side .h2h-detail{ color:rgba(255,255,255,.8); } .h2h-score .h2h-side .h2h-detail b{ color:#fff; } /* results: Word Coach card */ .coach-card{ display:flex; align-items:center; gap:12px; text-align:left; background:linear-gradient(120deg,#fff6e6,#fff0f0); border:1px solid #ffe0bd; border-radius:16px; padding:11px 13px; margin:12px 0; } .cc-ic{ width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; } .cc-ic svg{ width:38px; height:38px; } .cc-txt{ flex:1; min-width:0; } .cc-title{ font-size:15px; font-weight:800; color:#e8730a; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; } .cc-sub{ font-size:12px; color:var(--muted); line-height:1.3; margin-top:1px; } .cc-btn{ flex:none; font:inherit; font-size:14px; font-weight:800; color:#fff; background:linear-gradient(120deg,#ff9e2c,#ff6a2b); border:none; border-radius:12px; padding:11px 16px; cursor:pointer; box-shadow:0 4px 12px rgba(255,122,43,.35); } .cc-btn:hover{ filter:brightness(1.05); } .cc-btn:active{ transform:translateY(1px); } /* profile redesign: section heading, career-stats row, rank badges, customize button */ .prof-sec-h{ font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); text-align:center; margin:16px 0 8px; } .prof-career{ display:flex; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 4px; box-shadow:var(--shadow-sm); margin-bottom:4px; } .pc-stat{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; border-left:1px solid var(--line); } .pc-stat:first-child{ border-left:none; } .pc-ic{ display:flex; color:var(--primary); } .pc-ic svg{ width:22px; height:22px; } .pc-stat:nth-child(2) .pc-ic{ color:#e0980a; } .pc-stat:nth-child(3) .pc-ic{ color:#3aa5e8; } .pc-stat:nth-child(4) .pc-ic{ color:#ff7a1a; } .pc-num{ font-size:21px; font-weight:800; color:var(--ink); line-height:1; } .pc-lab{ font-size:10.5px; color:var(--muted); font-weight:700; } .mrank .mr-badge{ display:block; margin:2px 0 1px; } .mrank .rank-hex{ width:42px; height:46px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.18)); } .cz-open-btn{ display:flex; align-items:center; justify-content:center; gap:12px; text-align:left; position:relative; } .cz-ic{ display:flex; flex:none; } .cz-ic svg{ width:26px; height:26px; } .cz-txt{ flex:none; display:flex; flex-direction:column; line-height:1.15; } .cz-sub{ font-size:12px; font-weight:600; opacity:.9; } .cz-arw{ position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:22px; opacity:.8; } /* mode-start + friends: keep the "play online" path visually separate from vs-computer / join */ .ms-online{ display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; } .ms-online .ms-sub{ font-size:12px; font-weight:600; opacity:.9; letter-spacing:.2px; } .or-sep{ display:flex; align-items:center; gap:12px; margin:16px 4px 6px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; } .or-sep::before, .or-sep::after{ content:""; flex:1; height:1px; background:var(--line); } .cpu-group{ border:1px solid var(--line); background:var(--surface-2); border-radius:16px; padding:14px 14px 16px; text-align:left; } .cpu-group .big{ width:100%; margin-top:14px; } .fr-join{ align-items:center; margin-top:4px; } .fr-join-lbl{ font-size:15px; letter-spacing:.6px; color:var(--ink); } /* end-of-game word breakdown */ .word-recap{ margin:12px 0 6px; text-align:left; max-height:230px; overflow-y:auto; } .wr-player{ margin-bottom:12px; } .wr-name{ font-size:13px; font-weight:800; color:var(--ink); margin-bottom:6px; display:flex; align-items:baseline; gap:8px; } .wr-count{ font-size:11px; font-weight:600; color:var(--muted); } .wr-words{ display:flex; flex-wrap:wrap; gap:6px; } .wr-word{ display:inline-flex; align-items:center; gap:5px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:4px 9px; font-weight:700; font-size:13px; color:var(--ink); text-transform:uppercase; letter-spacing:.5px; opacity:0; transform:translateY(6px) scale(.9); animation:wrpop .34s cubic-bezier(.2,.9,.3,1) forwards; } .wr-word .wr-p{ font-size:11px; font-weight:800; color:var(--primary); letter-spacing:0; text-transform:none; } @keyframes wrpop{ to{ opacity:1; transform:translateY(0) scale(1); } } /* Gauntlet: the whole goal card blows up front-and-centre, counts 3-2-1, then flies into the banner */ .goal-intro{ position:fixed; inset:0; z-index:240; display:none; align-items:center; justify-content:center; background:rgba(20,24,50,.6); backdrop-filter:blur(3px); padding:24px; pointer-events:none; opacity:1; transition:opacity .5s ease; } .goal-intro.show{ display:flex; } .goal-intro.show .gi-card{ animation:giin .36s cubic-bezier(.2,.9,.3,1.25); } .goal-intro.shrink{ opacity:0; } /* backdrop fades as the card lands on the real banner underneath */ .gi-card{ background:var(--surface); border:1px solid var(--line); border-left:6px solid var(--goal); border-radius:20px; padding:26px 34px; box-shadow:0 24px 70px rgba(0,0,0,.4); text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; min-width:min(82vw,340px); transition:transform .52s cubic-bezier(.5,0,.35,1); will-change:transform; } .gi-kicker{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--goal); } .gi-card .gi-label{ font-size:26px; font-weight:800; color:var(--ink); max-width:300px; line-height:1.15; } .gi-card .gi-prog{ font-size:16px; color:var(--muted); } .gi-card .gi-prog b{ color:var(--goal); font-size:22px; } .gi-count{ font-size:64px; font-weight:800; color:var(--goal); line-height:1; margin-top:2px; } /* pre-game versus card (X vs Y) inside the 3-2-1 intro */ .goal-intro.has-vs .gi-card{ border-left-color:var(--primary); } .gi-vs{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:4px; } .gi-vs.many{ flex-wrap:wrap; gap:10px 12px; max-width:340px; } .gi-vs.many .vp{ min-width:66px; gap:3px; } .gi-vs.many .vp-name{ font-size:12px; max-width:76px; } .gi-vs.many .vp-meta{ font-size:10px; gap:4px; } .goal-intro .gi-card{ max-height:calc(100dvh - 24px); overflow-y:auto; } /* never overflow the screen (8-player Gauntlet on a small phone) */ .vp{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:78px; } .vp .av{ box-shadow:0 4px 12px rgba(0,0,0,.18); } .vp.me .vp-name{ color:var(--primary); } .vp-name{ font-size:14px; font-weight:800; color:var(--ink); max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .vp-meta{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; } .vp-lv{ color:var(--muted); } .vs-x{ font-size:20px; font-weight:900; color:var(--muted); letter-spacing:1px; } /* shop purchase confirmation */ .buy-confirm{ z-index:200; } .bc-box{ max-width:320px; text-align:center; } .bc-name{ font-size:20px; font-weight:800; color:var(--ink); } .bc-price{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:17px; font-weight:700; color:var(--ink); margin:12px 0 4px; } .bc-price b{ font-size:22px; } .bc-have{ display:flex; align-items:center; justify-content:center; gap:5px; font-size:13px; color:var(--muted); } .bc-have.short{ color:var(--battle); font-weight:700; } .bc-btns{ display:flex; gap:10px; margin-top:18px; } .bc-btns .big{ flex:1; margin-top:0; padding:12px 16px; } .gi-count.tick{ animation:gitick .5s ease; } @keyframes giin{ from{ opacity:0; transform:scale(.8) translateY(12px);} to{ opacity:1; transform:scale(1) translateY(0);} } @keyframes gitick{ 0%{ transform:scale(1.55); opacity:.25;} 55%{ transform:scale(1); opacity:1;} } /* ---- prominent guest sign-in CTA (home) ---- */ .signin-cta{ display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; cursor:pointer; border:none; border-radius:16px; padding:13px 18px; margin-bottom:4px; text-align:center; background:linear-gradient(120deg,var(--primary),#a24ff0); color:#fff; box-shadow:0 8px 22px rgba(122,63,240,.35); transition:transform .12s ease, box-shadow .12s ease; } .signin-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(122,63,240,.45); } .signin-cta .sc-main{ font-size:16px; font-weight:800; letter-spacing:.2px; } .signin-cta .sc-sub{ font-size:12.5px; opacity:.92; } /* ---- in-game level + rank tag ---- */ .pmeta{ font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.2px; white-space:nowrap; } .pmeta .rk{ font-style:normal; font-weight:800; } .hs .pmeta{ display:block; margin-top:2px; } .hs.me .pmeta{ color:#dfe0fb; } .hs.me .pmeta .rk{ color:#fff !important; } .tc-name{ white-space:nowrap; } /* ---- Ranks info modal ---- */ .ranks-intro{ font-size:13px; color:var(--muted); margin:2px 0 10px; line-height:1.45; } .ranks-list{ text-align:left; } .rank-row{ display:flex; align-items:center; gap:11px; padding:9px 8px; border-bottom:1px solid var(--line); font-size:15px; } .rank-row:last-child{ border-bottom:none; } .rank-dot{ width:13px; height:13px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 3px rgba(0,0,0,.05); } .rank-row .rank-badge{ flex:0 0 auto; display:flex; width:34px; height:37px; filter:drop-shadow(0 2px 3px rgba(20,24,50,.18)); } .rank-row .rank-badge .rank-hex{ width:34px; height:37px; display:block; } .rank-name{ font-weight:800; color:var(--ink); flex:1; } .rank-range{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; } .rank-row.here{ background:color-mix(in srgb, var(--primary) 12%, transparent); border-radius:10px; } .rank-you{ font-size:11px; font-weight:800; color:#fff; background:var(--primary); border-radius:20px; padding:2px 9px; margin-left:8px; } /* ---- rank badge in profile ---- */ .prof-ranks{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; cursor:pointer; margin:4px 0 14px; } .mrank{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 6px 12px; border-radius:14px; border:1.5px solid var(--rk,var(--line)); background:color-mix(in srgb, var(--rk,#888) 9%, var(--surface)); } .mrank .mr-mode{ font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); } .mrank .mr-rank{ font-weight:800; font-size:15px; line-height:1.15; text-align:center; } .mrank .mr-rating{ font-size:15px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } /* ===== Pro tile themes: recolor the Word Hunt board via --tile / --tile-ink ===== */ body[data-theme="dark"]{ --tile:linear-gradient(#3a3f4a,#2b2f38); --tile-ink:#e8ecf3; } body[data-theme="wood"]{ --tile:linear-gradient(#c8935a,#b07d45); --tile-ink:#3a2412; } body[data-theme="neon"]{ --tile:linear-gradient(#1b1030,#120a22); --tile-ink:#39ffd0; } body[data-theme="sunset"]{ --tile:linear-gradient(160deg,#ff7e5f,#feb47b); --tile-ink:#4a1e12; } body[data-theme="ocean"]{ --tile:linear-gradient(160deg,#2b5876,#4e4376); --tile-ink:#e0f2fe; } body[data-theme="candy"]{ --tile:linear-gradient(160deg,#ff9a9e,#fecfef); --tile-ink:#7a2247; } body[data-theme="gold"]{ --tile:linear-gradient(160deg,#f6d365,#fda085); --tile-ink:#5a3b0a; } .sw-sunset{ background:linear-gradient(160deg,#ff7e5f,#feb47b); } .sw-ocean{ background:linear-gradient(160deg,#2b5876,#4e4376); } .sw-candy{ background:linear-gradient(160deg,#ff9a9e,#fecfef); } .sw-gold{ background:linear-gradient(160deg,#f6d365,#fda085); } .theme-pick{ flex-wrap:wrap; } /* ===== visible Pro flair ===== */ .pro-chip{ font-size:8.5px; font-weight:800; letter-spacing:.5px; color:#3a2b00; background:linear-gradient(#ffd873,#ffb020); border-radius:5px; padding:1px 4px; margin-left:4px; vertical-align:middle; box-shadow:0 1px 2px rgba(0,0,0,.15); } .leader-row.pro .leader-name{ font-weight:800; } /* Pro is shown by the PRO chip; name stays regular unless a name effect is equipped */ /* ===== Word Coach ===== */ .coach-btn{ background:linear-gradient(120deg,#ffb020,#ff7a3f) !important; } .coach-panel{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:14px; margin:10px 0; text-align:left; } .coach-head{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--primary); margin-bottom:10px; } .coach-eff{ display:flex; align-items:center; gap:16px; } .ce-ring{ --p:0; width:66px; height:66px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--primary) calc(var(--p)*3.6deg), var(--line) 0); } .ce-ring span{ width:50px; height:50px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:var(--ink); } .ce-body b{ display:block; font-size:20px; color:var(--ink); } .ce-body>span{ font-size:12px; color:var(--muted); } .ce-sub{ font-size:12px; color:var(--muted); margin-top:2px; } .coach-sub{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:12px 0 6px; } .coach-missed{ display:flex; flex-wrap:wrap; gap:6px; } .coach-missed .cw{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:3px 8px; font-size:13px; font-weight:700; color:var(--ink); } .coach-missed .cw i{ font-style:normal; font-size:10px; font-weight:800; color:var(--goal); margin-left:5px; } /* tap a word -> definition popover (post-game). Themed via vars so it reads on light + dark. */ .wrow, .coach-missed .cw{ cursor:pointer; } .wrow:hover, .coach-missed .cw:hover{ border-color:var(--primary); } .tap-hint{ font-size:10px; font-weight:700; color:var(--primary); text-transform:none; letter-spacing:0; opacity:.85; margin-left:6px; } .defpop{ position:fixed; z-index:120; max-width:min(340px,88vw); max-height:min(60vh,420px); overflow-y:auto; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:0 14px 44px rgba(20,0,60,.30),0 2px 8px rgba(0,0,0,.14); padding:12px 14px; font-size:13.5px; line-height:1.42; } .defpop-w{ font-weight:800; font-size:15px; color:var(--primary); letter-spacing:.2px; } .defpop-lem{ font-weight:700; color:var(--muted); font-size:13px; } .defpop-body{ margin-top:6px; } .defpop-def{ margin-top:5px; color:var(--ink); } .defpop-def + .defpop-def{ padding-top:5px; border-top:1px solid var(--line); } .defpop-pos{ font-style:italic; color:var(--muted); font-weight:700; margin-right:4px; } .defpop-none{ color:var(--muted); } .defpop-src{ margin-top:9px; font-size:10px; color:var(--muted); opacity:.7; text-align:right; letter-spacing:.2px; } .defpop.loading .defpop-body{ color:var(--muted); } .coach-foot{ font-size:12px; color:var(--muted); margin-top:10px; text-align:center; } .coach-stats{ display:flex; gap:10px; } .cstat{ flex:1; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; } .cstat b{ display:block; font-size:19px; color:var(--ink); } .cstat span{ font-size:11px; color:var(--muted); } .coach-lock{ text-align:center; padding:8px; } .cl-title{ font-weight:800; color:var(--ink); font-size:16px; } .cl-sub{ font-size:13px; color:var(--muted); margin:6px 0 12px; line-height:1.4; } /* ===== Pro Stats dashboard ===== */ .stats-body{ text-align:left; } .stat-hero3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:16px; } .shx{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border-radius:16px; border:1.5px solid color-mix(in srgb, var(--mc) 30%, #fff); background:color-mix(in srgb, var(--mc) 8%, var(--surface)); } .shx-badge{ width:44px; height:50px; margin-bottom:3px; filter:drop-shadow(0 3px 5px color-mix(in srgb, var(--mc) 40%, transparent)); } .shx-badge .mode-hex{ width:44px; height:50px; display:block; } .shx-mode{ font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); } .shx-rank{ font-weight:800; font-size:13.5px; line-height:1.15; text-align:center; } .shx-rating{ font-size:20px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.15; } .shx-pct{ margin-top:6px; font-size:10px; font-weight:800; color:#fff; background:var(--mc); border-radius:999px; padding:2px 10px; letter-spacing:.02em; } .stat-hero{ display:flex; justify-content:space-between; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px; } .sh-rank{ font-size:22px; font-weight:800; } .sh-rating{ font-size:14px; color:var(--muted); } .sh-pct{ text-align:right; } .sh-pct b{ font-size:22px; color:var(--primary); display:block; } .sh-pct span{ font-size:12px; color:var(--muted); } .stat-block{ margin-bottom:18px; } .sb-h{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:9px; } .spark{ width:100%; height:48px; display:block; } .rc-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:12px 12px 6px; } .rc{ width:100%; height:auto; display:block; } .rc-grid{ stroke:color-mix(in srgb, var(--muted) 35%, transparent); stroke-width:1; stroke-dasharray:3 4; } .rc-lbl{ fill:var(--muted); font-size:9px; font-weight:600; text-anchor:end; font-variant-numeric:tabular-nums; } .rc-xlbl{ fill:var(--muted); font-size:8.5px; font-weight:600; } .rc-dot{ fill:var(--goal); } .rc-hit{ cursor:pointer; } .rc-cap{ text-align:center; font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:4px; } .rc-cap b{ font-size:16px; color:var(--goal); font-weight:800; font-variant-numeric:tabular-nums; } .stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px; } .sg{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:12px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; } .sg-ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--c); background:color-mix(in srgb, var(--c) 15%, #fff); margin-bottom:7px; } .sg-ic svg{ width:20px; height:20px; } .sg b{ display:block; font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; } .sg span{ font-size:11px; color:var(--muted); font-weight:600; } .lw-banner{ display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:16px; background:linear-gradient(100deg,#fff7e6,#fdecc8); border:1px solid #f3d998; } .lw-badge{ width:42px; height:48px; flex:0 0 auto; filter:drop-shadow(0 3px 5px rgba(244,181,40,.45)); } .lw-badge .gold-hex{ width:42px; height:48px; display:block; } .lw-txt{ display:flex; flex-direction:column; line-height:1.12; min-width:0; } .lw-lbl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.7px; color:#a9791b; } .lw-word{ font-size:25px; font-weight:800; letter-spacing:1px; color:var(--primary); word-break:break-all; } .lw-word em{ font-size:15px; color:var(--muted); font-weight:700; font-style:normal; letter-spacing:0; } .mode-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; } .mc{ background:color-mix(in srgb, var(--mc) 8%, var(--surface)); border:1.5px solid color-mix(in srgb, var(--mc) 26%, #fff); border-radius:14px; padding:11px 6px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; } .mc-ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--mc); } .mc-ic svg{ width:18px; height:18px; } .mc-lab{ font-size:10.5px; font-weight:700; color:var(--muted); } .mc-val{ font-size:18px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; } .wl-bars{ display:flex; gap:8px; align-items:flex-end; height:150px; padding-top:6px; } .wlb{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; } .wlb i{ display:block; width:78%; min-height:4px; background:linear-gradient(180deg,#9a63f5,#7a3ff0); border-radius:6px 6px 0 0; } .wlb span{ font-size:11px; color:var(--muted); font-weight:600; margin-top:5px; } .wlb em{ font-size:11px; font-style:normal; font-weight:800; color:var(--ink); margin-bottom:4px; font-variant-numeric:tabular-nums; } .stats-loading{ text-align:center; color:var(--muted); padding:30px; } /* ===== Daily Archive ===== */ .archive-body{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .archive-day{ font:inherit; cursor:pointer; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px; font-weight:700; color:var(--ink); } .archive-day:hover{ border-color:var(--primary); color:var(--primary); } /* ===== Pro perks page ===== */ .go-pro-btn{ background:linear-gradient(120deg,#ffd873,#ffb020) !important; color:#3a2b00 !important; font-weight:800; } .pro-box{ max-width:440px; } .pro-hero{ text-align:center; margin-bottom:14px; } .pro-crown{ width:46px; height:46px; margin:0 auto; color:#ffb020; filter:drop-shadow(0 3px 8px rgba(255,176,32,.4)); } .pro-crown svg{ width:100%; height:100%; } .pro-title{ font-size:26px; font-weight:800; color:var(--ink); letter-spacing:.5px; margin:6px 0 2px; } .pro-title span{ background:linear-gradient(120deg,#ffb020,#ff8a3f); -webkit-background-clip:text; background-clip:text; color:transparent; } .pro-price{ font-size:20px; font-weight:800; color:var(--primary); } .pro-tagline{ font-size:14px; color:var(--muted); margin-top:4px; } .pro-perks{ display:flex; flex-direction:column; gap:13px; text-align:left; margin:18px 0; } .perk{ display:flex; gap:12px; align-items:flex-start; } .perk-ic{ flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:50%; background:linear-gradient(#ffd873,#ffb020); position:relative; } .perk-ic::after{ content:""; position:absolute; left:7px; top:4px; width:5px; height:9px; border:solid #3a2b00; border-width:0 2px 2px 0; transform:rotate(45deg); } .perk-t b{ display:block; color:var(--ink); font-size:15px; } .perk-t span{ font-size:13px; color:var(--muted); line-height:1.4; } .pro-upgrade{ width:100%; background:linear-gradient(120deg,#ffd873,#ffb020) !important; color:#3a2b00 !important; font-weight:800; font-size:17px; } .pro-upgrade:disabled{ opacity:.6; cursor:default; } .pro-redeem{ display:flex; gap:8px; margin-top:10px; } .redeem-input{ flex:1; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--fg); font-size:15px; letter-spacing:.5px; text-transform:uppercase; } .redeem-input::placeholder{ text-transform:none; letter-spacing:normal; color:var(--muted); } .redeem-btn{ padding:10px 16px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--fg); font-weight:700; cursor:pointer; white-space:nowrap; } .redeem-btn:hover{ background:var(--panel2,var(--panel)); } .redeem-btn:disabled{ opacity:.5; cursor:default; } .pro-foot{ font-size:12px; color:var(--muted); margin-top:12px; line-height:1.45; text-align:center; } /* ===== Daily placing (finish screen) + leaderboard tabs ===== */ .lb-loading{ text-align:center; color:var(--muted); padding:20px; } .lb-tabs{ } .daily-place{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:16px; margin:10px 0; text-align:center; } .dp-head{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--daily); margin-bottom:8px; } .dp-place{ display:flex; flex-direction:column; align-items:center; } .dp-place b{ font-size:34px; font-weight:800; color:var(--ink); line-height:1; } .dp-place span{ font-size:13px; color:var(--muted); margin-top:2px; } .dp-note{ font-size:12px; color:var(--muted); margin-top:10px; line-height:1.4; } .dp-streak{ display:inline-flex; align-items:center; gap:5px; background:rgba(255,122,26,.12); border:1px solid rgba(255,122,26,.35); border-radius:999px; padding:4px 12px; font-size:13px; color:var(--ink); font-weight:600; margin-bottom:10px; } .dp-streak b{ color:#ff7a1a; font-weight:800; font-size:15px; } .dp-flame{ width:15px; height:15px; } .cmp-row{ display:flex; justify-content:space-between; align-items:center; padding:6px 4px; font-size:14px; border-top:1px solid var(--line); } .cmp-row:first-of-type{ border-top:none; } .cmp-row.me{ color:var(--primary); font-weight:800; } .cmp-row b{ font-variant-numeric:tabular-nums; } .dp-wait, .dp-signin{ color:var(--muted); font-size:14px; } /* ===== Streak Freeze ===== */ .dp-freeze{ display:inline-flex; align-items:center; gap:6px; background:rgba(58,165,232,.12); border:1px solid rgba(58,165,232,.35); border-radius:999px; padding:4px 12px; font-size:12.5px; color:var(--ink); font-weight:700; margin-bottom:10px; } .dp-freeze.quiet{ background:var(--surface-2); border-color:var(--line); color:var(--muted); font-weight:600; } .dp-snow{ width:15px; height:15px; flex:none; } /* ============ Home redesign ============ */ .home-inner{ padding-bottom:96px; } :root{ --wh-blue:#4361ee; --wh-blue2:#3550d8; --wh-blue-lt:#5b7cfa; } /* profile card */ .hprofile{ font:inherit; text-align:left; width:100%; display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:13px 15px; box-shadow:var(--shadow-sm); cursor:pointer; } .hprofile:active{ transform:translateY(1px); } .hp-av{ position:relative; width:54px; height:54px; flex:none; } .hp-av .avatar-wrap, .hp-av img, .hp-av svg{ width:54px !important; height:54px !important; } .hp-dot{ position:absolute; right:0; bottom:0; width:13px; height:13px; border-radius:50%; background:#2fcf6b; border:3px solid #fff; } .hp-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; } .hp-row{ display:flex; align-items:center; gap:8px; } .hp-name{ font-size:18px; font-weight:800; letter-spacing:-.2px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hp-lv{ font-size:13px; color:var(--muted); font-weight:700; flex:none; } .hp-pro{ font-size:10.5px; font-weight:800; color:#fff; background:linear-gradient(var(--wh-blue-lt),var(--wh-blue2)); padding:2px 8px; border-radius:6px; flex:none; } .hp-xp{ font-size:12px; font-weight:800; color:var(--wh-blue); font-variant-numeric:tabular-nums; } .hp-xp b{ color:var(--muted); font-weight:700; } .hp-bar{ height:7px; border-radius:6px; background:#e9edf6; overflow:hidden; } .hp-bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--wh-blue),var(--wh-blue-lt)); } .hp-guest{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.35; } .hp-guest small{ display:block; font-weight:600; color:var(--muted); font-size:12.5px; margin-top:2px; } /* logo */ .hlogo{ text-align:center; margin:24px 0 26px; } .hlogo h1{ font-size:42px; font-weight:900; letter-spacing:-1.4px; color:var(--ink); position:relative; display:inline-block; } .hlogo .hstar{ position:absolute; top:-4px; right:-14px; } .hlogo .hstar svg{ width:18px; height:18px; } .hlogo .hswoosh{ height:7px; width:180px; margin:3px auto 0; background:linear-gradient(90deg,transparent,#8ba4f5,transparent); border-radius:8px; } .hlogo p{ margin-top:10px; color:var(--muted); font-size:15.5px; font-weight:600; } /* Word Hunt hero */ .hhero{ font:inherit; text-align:left; width:100%; display:flex; flex-direction:column; align-items:flex-start; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; border:none; border-radius:24px; padding:22px; color:#fff; background:transparent; box-shadow:0 14px 30px rgba(53,80,216,.34); } .hhero::before{ content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit; background:linear-gradient(150deg,#5b7cfa,#3550d8); } .hhero::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.6; background:url(word-hunt-stopwatch.webp) no-repeat right -116px bottom -70px / auto 150%; } .hhero:hover{ filter:brightness(1.03); } .hhero:active{ transform:translateY(1px); } .hhero-ic{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; margin-bottom:13px; } .hhero-ic svg{ width:22px; height:22px; } .hhero-name{ font-size:36px; font-weight:900; letter-spacing:-1px; line-height:1; } .hhero-sub{ margin-top:8px; font-size:15px; opacity:.92; font-weight:500; } .hhero-chips{ display:flex; gap:10px; margin-top:15px; } .hchip{ display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.16); border-radius:11px; padding:8px 12px; font-size:13.5px; font-weight:700; } .hchip svg{ width:16px; height:16px; } .hfind{ margin-top:16px; display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--wh-blue2); font-weight:800; font-size:16px; border-radius:13px; padding:12px 20px; box-shadow:0 6px 14px rgba(0,0,0,.14); } .hfind svg{ width:17px; height:17px; } /* Takeover / Gauntlet */ .hduo{ display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:13px; } .hg{ font:inherit; text-align:left; cursor:pointer; border:none; border-radius:22px; padding:17px; color:#fff; min-height:196px; display:flex; flex-direction:column; position:relative; overflow:hidden; isolation:isolate; } .hg:hover{ filter:brightness(1.03); } .hg:active{ transform:translateY(1px); } .hg::before{ content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit; } .hg::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:.35; background-repeat:no-repeat; background-position:right -36px bottom -12px; background-size:auto 100%; } .hg.red{ box-shadow:0 12px 26px rgba(232,73,106,.3); } .hg.red::before{ background:linear-gradient(160deg,#f2637d,#e8496a); } .hg.red::after{ background-image:url(takeover.webp); } .hg.green{ box-shadow:0 12px 26px rgba(32,165,85,.3); } .hg.green::before{ background:linear-gradient(160deg,#34c06b,#20a555); } .hg.green::after{ background-image:url(gauntlet.webp); } .hg-ic{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.18); display:grid; place-items:center; margin-bottom:11px; } .hg-ic svg{ width:20px; height:20px; } .hg-name{ font-size:24px; font-weight:900; letter-spacing:-.5px; } .hg-desc{ margin-top:6px; font-size:13px; line-height:1.35; opacity:.94; font-weight:500; flex:1; } .hplay{ align-self:flex-start; margin-top:12px; display:inline-flex; align-items:center; gap:5px; background:#fff; font-weight:800; font-size:15px; border-radius:11px; padding:9px 16px; } .hplay svg{ width:15px; height:15px; } .hg.red .hplay{ color:#e8496a; } .hg.green .hplay{ color:#20a555; } /* section + wide cards */ .hsect{ display:flex; align-items:center; gap:8px; margin:22px 2px 12px; font-size:16px; font-weight:800; color:var(--ink); } .hsect-star svg{ width:18px; height:18px; display:block; } .hwide{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .hw{ font:inherit; text-align:left; display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:13px; box-shadow:var(--shadow-sm); cursor:pointer; } .hw:active{ transform:translateY(1px); } .hw-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; } .hw-ic svg{ width:22px; height:22px; } .hw-ic.blue{ background:linear-gradient(var(--wh-blue-lt),var(--wh-blue2)); } .hw-ic.purple{ background:linear-gradient(#7a5cff,#5b3fe0); } .hw-text{ min-width:0; } .hw-text b{ display:block; font-size:14.5px; font-weight:800; color:var(--ink); } .hw-text span{ font-size:12px; color:var(--muted); } .hw-chev{ margin-left:auto; color:#c2c8d8; } .hw-chev svg{ width:18px; height:18px; } /* bottom nav */ .bnav{ position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:520px; height:calc(74px + env(safe-area-inset-bottom, 0px)); background:var(--surface); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-around; padding-bottom:env(safe-area-inset-bottom,4px); z-index:40; box-shadow:0 -4px 18px rgba(22,29,51,.06); } .bn{ font:inherit; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--muted); cursor:pointer; padding:6px 8px; } .bn svg{ width:22px; height:22px; } .bn.on{ color:var(--wh-blue); } /* profile modal: relocated secondary items */ .prof-more{ display:flex; flex-direction:column; gap:2px; margin-top:16px; border-top:1px solid var(--line); padding-top:8px; } .pm-row{ font:inherit; display:flex; align-items:center; justify-content:space-between; background:none; border:none; cursor:pointer; padding:12px 4px; font-size:15px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); } .pm-row:last-child{ border-bottom:none; } .pm-row:active{ background:var(--surface-2); } /* creator program (affiliate) panel */ #partnerBody{ text-align:center; } .pt-sub{ font-size:15px; color:var(--muted); line-height:1.5; margin:6px 4px 16px; } .pt-sub b{ color:var(--goal); } .pt-code{ font-size:24px; font-weight:800; letter-spacing:3px; color:var(--ink); background:var(--surface-2); border:2px dashed var(--line); border-radius:14px; padding:14px; margin-bottom:12px; } .pt-stats{ display:flex; gap:10px; margin-top:18px; } .pt-stats > div{ flex:1; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:14px 6px; } .pt-stats b{ display:block; font-size:24px; font-weight:800; color:var(--ink); } .pt-stats span{ font-size:12px; color:var(--muted); } .pt-note{ font-size:12px; color:var(--muted); margin-top:14px; } .pt-msg{ color:var(--muted); padding:24px; } .pt-form{ display:flex; flex-direction:column; gap:6px; margin-top:14px; text-align:left; } .pt-form .field{ width:100%; font:inherit; } .pt-form textarea.field{ resize:vertical; min-height:46px; line-height:1.45; } .pt-form .big{ margin-top:10px; } .pt-label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:10px 2px 0; } .pt-form .pt-label:first-child{ margin-top:0; } .pt-opt{ font-weight:600; text-transform:none; letter-spacing:0; opacity:.75; } .pt-info{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--muted); color:#fff; font-size:10px; font-weight:800; font-style:italic; text-transform:none; letter-spacing:0; cursor:help; } .pt-tip{ position:absolute; bottom:150%; left:0; width:210px; background:var(--ink); color:#fff; font-size:12px; font-weight:600; line-height:1.45; text-transform:none; letter-spacing:0; padding:8px 10px; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.28); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .12s, transform .12s; z-index:20; pointer-events:none; } .pt-info:hover .pt-tip, .pt-info:focus .pt-tip{ opacity:1; visibility:visible; transform:translateY(0); } .pt-agree{ font-size:12px; color:var(--muted); text-align:center; margin:8px 2px 0; } .pt-discord{ display:inline-block; margin-top:6px; color:var(--friends); font-weight:700; font-size:13px; text-decoration:none; } .pt-discord:hover{ text-decoration:underline; } .pt-terms{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); text-align:left; } .pt-terms summary{ cursor:pointer; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); list-style:none; display:flex; align-items:center; gap:7px; } .pt-terms summary::-webkit-details-marker{ display:none; } .pt-terms summary::before{ content:"›"; font-size:18px; line-height:1; transition:transform .15s; } .pt-terms[open] summary::before{ transform:rotate(90deg); } .pt-terms ul{ margin:12px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:9px; } .pt-terms li{ font-size:12.5px; line-height:1.5; color:var(--muted); } .pm-chev{ color:#c2c8d8; font-size:20px; } /* new-achievement nudge: badge the home profile + bottom-nav Profile, glow the Awards row */ #homeProfile{ position:relative; } .hp-badge{ position:absolute; top:8px; right:10px; background:#f5356b; color:#fff; font-size:10px; font-weight:800; letter-spacing:.01em; border-radius:999px; padding:2px 8px; box-shadow:0 2px 6px rgba(245,53,107,.45); } #homeProfile.has-new{ animation:hpGlow 2.2s ease-in-out infinite; } @keyframes hpGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,53,107,0); } 50%{ box-shadow:0 0 0 3px rgba(245,53,107,.20); } } .bn{ position:relative; } .bn-badge{ position:absolute; top:1px; left:50%; transform:translateX(3px); min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; background:#f5356b; color:#fff; font-size:9.5px; font-weight:800; line-height:1; border-radius:999px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.25); } .pm-row .pm-badge{ margin-left:auto; margin-right:8px; background:#f5356b; color:#fff; font-size:11px; font-weight:800; border-radius:999px; padding:2px 9px; } #achBtn.glow{ border-radius:10px; animation:achGlow 1.8s ease-in-out infinite; } @keyframes achGlow{ 0%,100%{ background:transparent; } 50%{ background:color-mix(in srgb, #f5356b 13%, transparent); } } @media (prefers-reduced-motion: reduce){ #homeProfile.has-new, #achBtn.glow{ animation:none; } } .pm-sign{ color:var(--wh-blue); justify-content:center; margin-top:4px; } /* ============ Shop ============ */ /* home shop button */ .shopbtn{ position:relative; overflow:hidden; width:100%; margin-top:11px; border:none; border-radius:16px; padding:15px 16px; cursor:pointer; display:flex; align-items:center; gap:12px; color:#fff; text-align:left; font:inherit; background:linear-gradient(105deg,#7a3ff0,#b24bd6 55%,#ff7ab0); box-shadow:0 10px 26px rgba(122,63,240,.38); } .shopbtn:active{ transform:translateY(1px); } .shopbtn .sb-ic{ width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,.2); display:grid; place-items:center; flex:none; } .shopbtn .sb-ic svg{ width:24px; height:24px; } .shopbtn .sb-t b{ font-size:18px; font-weight:900; letter-spacing:-.2px; display:block; } .shopbtn .sb-t small{ font-size:12.5px; opacity:.92; font-weight:600; } .sb-shine{ position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); animation:sb-shine 3.6s ease-in-out infinite; } @keyframes sb-shine{ 0%,58%{ left:-60%; } 100%{ left:130%; } } .newpill{ position:absolute; top:11px; right:13px; background:var(--gold,#ffc23c); color:#3a2b00; font-size:10px; font-weight:900; padding:2px 8px; border-radius:20px; letter-spacing:.5px; } /* shop modal */ .shop-box{ max-width:440px; } .shop-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .shop-title{ font-size:24px; font-weight:900; letter-spacing:-.5px; } .coins{ display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:5px 12px 5px 6px; } .coins b{ font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; } .coin{ display:block; } .shop-tabs{ display:flex; gap:7px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; } .shop-tab{ font:inherit; white-space:nowrap; font-size:12.5px; font-weight:800; border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:20px; padding:7px 14px; cursor:pointer; } .shop-tab.on{ background:var(--ink); color:#fff; border-color:var(--ink); } .shop-load{ text-align:center; color:var(--muted); padding:26px; font-size:14px; } .shop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .sitem{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:var(--shadow-sm); } .sprev{ height:88px; border-radius:12px; overflow:hidden; margin-bottom:8px; display:grid; place-items:center; position:relative; } .sbot{ display:flex; align-items:center; justify-content:space-between; gap:6px; } .snm{ font-size:13px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bbtn{ font:inherit; font-size:12px; font-weight:800; border:none; border-radius:9px; padding:7px 12px; cursor:pointer; background:linear-gradient(var(--primary),var(--primary-2)); color:#fff; flex:none; } .bbtn.own{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line); } .bbtn.equipped{ background:#e6f7ee; color:var(--goal); cursor:default; } .bbtn .price{ display:inline-flex; align-items:center; gap:3px; } /* trail previews */ .tp{ width:100%; height:100%; } .tp svg{ width:100%; height:100%; } .p-flame{ background:linear-gradient(#3a1e12,#1c0e08); } .p-frost{ background:linear-gradient(#0f2530,#0a1620); } .p-rainbow{ background:linear-gradient(#241b4d,#140f2b); } .p-gold{ background:linear-gradient(#2a2410,#161206); } .p-default{ background:#20203a; } .tline{ fill:none; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24 300; animation:tdraw 2.2s linear infinite; filter:drop-shadow(0 0 4px currentColor); } @keyframes tdraw{ to{ stroke-dashoffset:-324; } } .s-flame{ stroke:#ff8a3d; color:#ff8a3d; } .s-frost{ stroke:#6fdcff; color:#6fdcff; } .s-gold{ stroke:#ffcf4d; color:#ffcf4d; } .s-default{ stroke:#8a7bf0; color:#8a7bf0; } .s-rainbow{ stroke:#ffb020; color:#ffb020; } /* name effects (colored so they read on light + dark) */ .np{ width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(#f4f2fb,#ece8f8); } .namebox{ font-size:22px; font-weight:900; } .nmfx{ display:inline-block; font-weight:inherit; } .nm-gold{ background:linear-gradient(90deg,#e08a00,#ffd25e,#e08a00); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:nmshift 2.5s linear infinite; } .nm-rainbow{ background:linear-gradient(90deg,#ff5c7a,#ff9a20,#22c55e,#3b82f6,#a855f7,#ff5c7a); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:nmshift 3s linear infinite; } .nm-glow{ color:#7a3ff0; text-shadow:0 0 7px rgba(122,63,240,.55); animation:nmpulse 1.7s ease-in-out infinite; } .nm-ember{ color:#ff6a1a; text-shadow:0 0 7px rgba(255,90,20,.5); animation:nmpulse 1.9s ease-in-out infinite; } /* NEW name effects — background-image (not the shorthand) so background-clip:text isn't reset to border-box */ .nm-fxfrost,.nm-aqua,.nm-fxemerald,.nm-fxamethyst,.nm-sunset,.nm-chrome,.nm-candy,.nm-fxholo{ background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:nmshift 2.6s linear infinite; } .nm-fxfrost{ background-image:linear-gradient(90deg,#3aa0e0,#9fd8f5,#3aa0e0); } .nm-aqua{ background-image:linear-gradient(90deg,#0e9aad,#22d6c4,#0e9aad); } .nm-fxemerald{ background-image:linear-gradient(90deg,#0c9350,#4fd98a,#0c9350); } .nm-fxamethyst{ background-image:linear-gradient(90deg,#7a3ff0,#b98cff,#7a3ff0); } .nm-sunset{ background-image:linear-gradient(90deg,#ff7a1a,#ff4d8d,#a855f7,#ff7a1a); background-size:300% auto; } .nm-chrome{ background-image:linear-gradient(90deg,#6f7789,#b6becc,#6f7789); } .nm-candy{ background-image:linear-gradient(90deg,#ff6cc4,#b96bff,#ff6cc4); } .nm-fxholo{ background-image:linear-gradient(90deg,#2fc8ef,#ff7ac9,#8a6bff,#2fc8ef); background-size:300% auto; } .nm-toxic{ color:#3fb814; text-shadow:0 0 8px rgba(90,220,20,.6); animation:nmpulse 1.6s ease-in-out infinite; } .nm-glitch{ color:var(--ink); animation:nmglitch 1.1s steps(2) infinite; text-shadow:1.6px 0 #ff2d9b,-1.6px 0 #00e5ff; } @keyframes nmglitch{ 0%,100%{ text-shadow:1.6px 0 #ff2d9b,-1.6px 0 #00e5ff; } 50%{ text-shadow:-1.6px 0 #ff2d9b,1.6px 0 #00e5ff; } } .nm-espresso{ background-image:linear-gradient(90deg,#5a3620,#a9713f,#f2dcae,#c68a4e,#5a3620); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:nmshift 2.4s linear infinite; } /* coffee set */ @keyframes nmshift{ to{ background-position:200% center; } } @keyframes nmpulse{ 50%{ text-shadow:0 0 12px currentColor; } } /* finisher previews: a looping miniature of the real victory burst (matches finisherBurst) */ .fp{ width:100%; height:100%; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(#f6f3ff,#efeafc); } .fp.fin-sparks{ background:linear-gradient(#1a1330,#0e0b1e); } .fp.fin-fireworks{ background:linear-gradient(#0f1030,#0a0a1e); } .finpv{ position:absolute; width:8px; height:8px; border-radius:50%; transform:translate(var(--x),var(--y)); animation:finpvBurst 1.9s ease-out infinite; } .finpv.rect{ width:6px; height:10px; border-radius:1.5px; } /* confetti = paper rectangles; sparks/fireworks = round */ .fp-none{ font-size:12px; font-weight:700; color:var(--muted); } /* "None" = no finisher, so no burst */ @keyframes finpvBurst{ 0%{ transform:translate(0,0) scale(.25); opacity:0; } 18%{ opacity:1; } 60%{ transform:translate(var(--x),var(--y)) scale(1); opacity:1; } 100%{ transform:translate(calc(var(--x)*1.18),calc(var(--y)*1.18)) scale(.6); opacity:0; } } /* frame previews */ .frp{ width:100%; height:100%; display:grid; place-items:center; background:#191630; } .frameav{ width:60px; height:60px; border-radius:50%; position:relative; display:grid; place-items:center; } .frameav .inner{ width:60px; height:60px; border-radius:50%; background:linear-gradient(#bcd0ff,#8ea9f5); display:grid; place-items:center; font-weight:800; color:#31509c; font-size:22px; } /* finisher particle layer (over the results screen) */ .fin-layer{ position:fixed; inset:0; z-index:280; pointer-events:none; } .finp{ position:fixed; left:50%; width:9px; height:13px; border-radius:2px; transform:translate(-50%,-50%); animation:finfly 1.5s ease-out forwards; } @keyframes finfly{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:0; } 12%{ opacity:1; } 100%{ transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(300deg); opacity:0; } } @media (prefers-reduced-motion:reduce){ .tline,.nm-gold,.nm-rainbow,.nm-glow,.nm-ember,.nm-fxfrost,.nm-aqua,.nm-fxemerald,.nm-fxamethyst,.nm-sunset,.nm-chrome,.nm-candy,.nm-fxholo,.nm-toxic,.nm-glitch,.nm-espresso,.sb-shine{ animation:none; } } /* finisher: brief screen flash (the "slap") + distinct shop previews */ .fin-flash{ position:fixed; inset:0; pointer-events:none; animation:finflash .6s ease-out forwards; } @keyframes finflash{ 0%{ opacity:0; } 18%{ opacity:.5; } 100%{ opacity:0; } } .ff-confetti{ background:radial-gradient(circle at 50% 38%, rgba(122,63,240,.4), transparent 62%); } .ff-sparks{ background:radial-gradient(circle at 50% 38%, rgba(255,190,60,.45), transparent 62%); } .ff-fireworks{ background:radial-gradient(circle at 50% 38%, rgba(255,90,120,.4), transparent 62%); } .shop-note{ font-size:12px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:8px 11px; margin-bottom:11px; line-height:1.4; } @media (prefers-reduced-motion:reduce){ .fin-flash,.finpv{ animation:none; } } /* opponent level tag + finisher taunt banner */ .hopp-sub .hopp-lv{ font-size:11.5px; font-weight:700; font-style:normal; color:var(--muted); } .fin-taunt{ position:fixed; top:13%; left:50%; transform:translateX(-50%); z-index:285; pointer-events:auto; text-align:center; background:rgba(20,16,40,.94); color:#fff; padding:12px 34px 12px 22px; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.45); animation:tauntin .4s ease-out; max-width:88vw; } .fin-taunt b{ display:block; font-size:18px; font-weight:900; color:#ff5c8a; } .fin-taunt span{ font-size:12.5px; opacity:.88; } .fin-taunt-x{ position:absolute; top:5px; right:8px; background:none; border:none; color:rgba(255,255,255,.65); font-size:20px; font-weight:700; line-height:1; cursor:pointer; padding:2px 6px; } .fin-taunt-x:hover{ color:#fff; } @keyframes tauntin{ from{ transform:translate(-50%,-16px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } } /* "+N coins" earn pop */ .coin-earn{ position:fixed; top:30%; left:50%; z-index:262; pointer-events:none; display:flex; align-items:center; gap:7px; background:linear-gradient(#ffd873,#f0a300); color:#5a3d00; font-weight:900; padding:10px 18px; border-radius:16px; box-shadow:0 10px 26px rgba(240,163,0,.5); transform:translate(-50%,-50%); animation:coinpop 2.4s cubic-bezier(.2,.9,.3,1) forwards; } .coin-earn b{ font-size:22px; } .coin-earn span{ font-size:13px; opacity:.85; } @keyframes coinpop{ 0%{ transform:translate(-50%,-30%) scale(.4); opacity:0; } 14%{ transform:translate(-50%,-50%) scale(1.12); opacity:1; } 28%{ transform:translate(-50%,-50%) scale(1); } 72%{ opacity:1; } 100%{ transform:translate(-50%,-150%) scale(.95); opacity:0; } } @media (prefers-reduced-motion:reduce){ .coin-earn{ animation:none; } } /* coin packs (Stripe) */ .coins .coin-plus{ width:24px; height:24px; border-radius:50%; background:var(--gold,#ffc23c); color:#3a2b00; font-weight:900; font-size:18px; line-height:1; border:none; cursor:pointer; display:grid; place-items:center; margin-left:3px; } .shop-back{ font:inherit; font-size:13px; font-weight:700; color:var(--muted); background:none; border:none; cursor:pointer; padding:2px 0; margin-bottom:10px; } .pack-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .packc{ position:relative; font:inherit; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 12px 14px; display:flex; flex-direction:column; align-items:center; gap:2px; box-shadow:var(--shadow-sm); } .packc:active{ transform:translateY(1px); } .packc.best{ border-color:var(--gold,#ffc23c); box-shadow:0 0 0 2px rgba(255,194,60,.35),var(--shadow-sm); } .pack-best{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--gold,#ffc23c); color:#3a2b00; font-size:9px; font-weight:900; letter-spacing:.4px; padding:2px 9px; border-radius:20px; white-space:nowrap; } .pack-coins{ display:flex; align-items:center; gap:6px; } .pack-coins b{ font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; color:var(--ink); } .pack-lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700; } .pack-price{ margin-top:8px; background:linear-gradient(var(--primary),var(--primary-2)); color:#fff; font-weight:800; font-size:15px; padding:7px 18px; border-radius:11px; } .pack-foot{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:14px; } /* credits */ .credits-title{ font-size:22px; font-weight:800; letter-spacing:-.3px; } .credits-sub{ color:var(--muted); font-size:13px; margin:4px 0 14px; } .credits-list{ list-style:none; display:flex; flex-direction:column; gap:12px; text-align:left; } .credits-list li{ font-size:13.5px; line-height:1.5; color:var(--ink); } .credits-list a{ color:var(--primary); font-weight:700; } /* shop avatar preview */ .avp{ width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(#f4f2fb,#ece8f8); } /* ===== Customize (unified cosmetics: browse, equip/remove, buy in one place) ===== */ .cz-open-btn{ background:linear-gradient(var(--primary),var(--primary-2)); } .cz-modal{ padding:0; align-items:stretch; } .cz-box{ width:100%; max-width:480px; margin:0 auto; border-radius:0; padding:14px 14px 0; text-align:left; display:flex; flex-direction:column; overflow:hidden; max-height:100dvh; } .cz-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-right:58px; } .cz-title{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0; } #czMain{ flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; } .cz-load{ margin:auto; color:var(--muted); font-weight:600; } /* hero preview */ .cz-preview{ display:flex; align-items:center; gap:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:18px; padding:13px 15px; } .cz-av{ position:relative; width:66px; height:66px; flex:none; } .cz-edit{ position:absolute; right:-4px; bottom:-4px; width:26px; height:26px; border-radius:50%; border:2px solid var(--surface); background:linear-gradient(var(--primary),var(--primary-2)); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:0 2px 6px rgba(122,63,240,.4); } .cz-edit svg{ width:14px; height:14px; } .cz-pvname{ font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.1; } .cz-meta{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .cz-chip{ font-size:11px; font-weight:700; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px 9px; } .cz-chip b{ color:var(--ink); font-weight:800; } .cz-status{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px 9px; } .cz-status.on{ color:#12925a; background:#e7f7ee; border-color:#bfe8d0; } .cz-status svg{ width:13px; height:13px; } /* category tabs */ .cz-tabs{ display:flex; gap:4px; } /* all 5 tabs fit — no horizontal scroll, so the Name tab is always visible */ .cz-tab{ flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:4px; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:12px; color:var(--muted); background:transparent; padding:8px 4px; border-radius:999px; white-space:nowrap; } .cz-tab-ic{ display:flex; width:14px; height:14px; flex:none; } .cz-tab-ic svg{ width:100%; height:100%; } .cz-tab.on{ color:#fff; background:linear-gradient(var(--primary),var(--primary-2)); box-shadow:0 4px 12px rgba(122,63,240,.32); } /* filter segmented */ .cz-filter{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .cz-seg{ display:inline-flex; background:var(--surface-2); border-radius:999px; padding:3px; } .cz-seg button{ display:inline-flex; align-items:center; gap:5px; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:12.5px; color:var(--muted); background:transparent; padding:6px 13px; border-radius:999px; } .cz-seg-ic{ display:flex; width:14px; height:14px; } .cz-seg-ic svg{ width:100%; height:100%; } .cz-seg button.on{ color:var(--primary-2); background:var(--surface); box-shadow:0 2px 6px rgba(20,24,50,.10); } .cz-count{ font-size:12px; color:var(--muted); font-weight:600; white-space:nowrap; } /* grid */ .cz-scroll{ flex:1; min-height:0; overflow-y:auto; margin:0 -4px; padding:0 4px 6px; } .cz-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .cz-cell{ position:relative; min-width:0; cursor:pointer; border:none; background:transparent; font:inherit; padding:0; display:flex; flex-direction:column; align-items:center; gap:6px; } .cz-sw{ position:relative; width:100%; aspect-ratio:1; border-radius:16px; background:var(--surface); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:transform .12s, box-shadow .12s, border-color .12s; } .cz-cell:hover .cz-sw{ transform:translateY(-2px); } .cz-cell.sel .cz-sw{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary), 0 6px 16px rgba(122,63,240,.24); } .cz-cell.equipped:not(.sel) .cz-sw{ border-color:#ffc23c; box-shadow:0 0 0 2px #ffc23c; } .cz-cell.locked .cz-sw{ background:var(--surface-2); } .cz-cname{ font-size:11.5px; font-weight:700; color:var(--ink); text-align:center; line-height:1.12; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cz-tag{ font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; gap:3px; } .cz-tag.eq{ color:#b47f00; } .cz-tag.owned{ color:#12925a; } .cz-tag.price{ color:#8a5a00; } .cz-tag.req{ color:var(--muted); font-weight:700; font-size:10px; text-align:center; line-height:1.15; white-space:normal; } .cz-badge{ position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,.2); } .cz-badge svg{ width:12px; height:12px; } .cz-badge.sel{ background:var(--primary); color:#fff; } .cz-badge.eq{ background:#ffc23c; color:#5a3c00; } .cz-badge.own{ background:#20c07a; color:#fff; } .cz-lockic{ position:absolute; top:6px; right:6px; width:17px; height:17px; color:var(--muted); opacity:.7; } .cz-lockic svg{ width:100%; height:100%; } .cz-sw .avp,.cz-sw .tp,.cz-sw .np,.cz-sw .fp,.cz-sw .frp{ max-width:100%; max-height:100%; } .cz-sw .namebox{ font-size:12px; letter-spacing:-.3px; } /* sticky action dock */ .cz-dock{ display:flex; align-items:center; gap:12px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); margin:0 -14px; border-top:1px solid var(--line); background:var(--surface); } .cz-dock.empty{ justify-content:center; } .cz-hint{ font-size:12.5px; color:var(--muted); text-align:center; font-weight:600; } .cd-sw{ width:56px; height:56px; flex:none; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; } .cd-sw .avp,.cd-sw .tp,.cd-sw .np,.cd-sw .fp,.cd-sw .frp{ max-width:100%; max-height:100%; } .cd-sw .namebox{ font-size:11px; } .cd-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } .cd-name{ font-size:15px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cd-price{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:800; color:#8a5a00; } .cd-eq{ font-size:12.5px; font-weight:700; color:#b47f00; } .cd-own{ font-size:12.5px; font-weight:700; color:#12925a; } .cd-req{ font-size:12px; font-weight:600; color:var(--muted); } .cz-buy{ flex:none; border:none; cursor:pointer; font:inherit; font-weight:800; font-size:14.5px; color:#fff; background:linear-gradient(var(--primary),var(--primary-2)); border-radius:14px; padding:13px 18px; display:inline-flex; align-items:center; gap:7px; box-shadow:0 6px 16px rgba(122,63,240,.32); } .cz-buy .cb-c{ display:inline-flex; align-items:center; gap:3px; background:rgba(255,255,255,.22); border-radius:999px; padding:2px 8px; font-size:13px; } .cz-buy.remove{ background:var(--surface-2); color:var(--primary-2); box-shadow:none; } .cz-buy.off{ background:var(--surface-2); color:var(--muted); box-shadow:none; cursor:default; } /* misc reused */ .cz-empty{ margin:30px auto; color:var(--muted); font-weight:600; text-align:center; max-width:240px; line-height:1.5; } .cz-back{ background:none; border:none; color:var(--primary-2); font:inherit; font-weight:700; cursor:pointer; padding:4px 0; } .cz-note{ font-size:13px; color:var(--muted); margin:6px 0 12px; } /* ===== Daily hub (opens on the Daily button: recent results, ranks, top scores + play) ===== */ .dh-box{ text-align:left; } .dh-title{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0 0 10px; text-align:center; } .dh-load,.dh-empty{ color:var(--muted); font-weight:600; text-align:center; padding:22px 10px; } /* streak pill */ .dh-streak{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 14px; } .dh-streak-pill{ display:inline-flex; align-items:center; gap:6px; background:linear-gradient(135deg,#fff3e6,#ffe8d1); color:#b4530a; border:1px solid #ffd6ab; border-radius:999px; padding:5px 13px; font-weight:700; font-size:12.5px; } .dh-flame{ color:#ff7a2d; font-weight:900; font-size:16px; } .dh-streak-best{ color:var(--muted); font-weight:600; font-size:12.5px; } /* placement medal (shared by hero + rows) */ .dh-medal{ flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px; color:#fff; box-shadow:0 3px 8px rgba(31,37,72,.16); } .dh-medal.sm{ width:30px; height:30px; font-size:13px; box-shadow:none; } .dh-medal.g1{ background:linear-gradient(150deg,#ffd75e,#f5a623); color:#5a3a00; } .dh-medal.g2{ background:linear-gradient(150deg,#e6ecf5,#b9c4d6); color:#3a4460; } .dh-medal.g3{ background:linear-gradient(150deg,#f0b487,#cd7f4c); color:#4a2609; } .dh-medal.gn{ background:linear-gradient(150deg,#a98bf5,#7a3ff0); } .dh-medal.gmiss{ background:var(--surface-2); color:var(--muted); border:1.5px solid var(--line); box-shadow:none; } /* today hero */ .dh-hero{ display:flex; align-items:center; gap:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:18px; padding:15px 17px; } .dh-hero.done{ background:linear-gradient(135deg,#faf5ff,#efe6ff); border-color:rgba(122,63,240,.28); } .dh-hero-main{ min-width:0; } .dh-hero-lbl{ font-size:10.5px; font-weight:800; letter-spacing:1.4px; color:var(--primary-2); } .dh-hero-score{ font-size:27px; font-weight:900; letter-spacing:-.02em; color:var(--ink); line-height:1.1; margin:1px 0; } .dh-hero-score b{ font-weight:900; } .dh-hero-score.dh-wait{ font-size:19px; color:var(--muted); } .dh-hero-sub{ font-size:13px; font-weight:600; color:var(--muted); } .dh-win{ color:#c48a00; font-weight:800; } .dh-play{ width:100%; margin:14px 0 2px; background:linear-gradient(var(--primary),var(--primary-2)); } .dh-head{ font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; margin:20px 0 10px; } .dh-list{ display:flex; flex-direction:column; gap:8px; } .dh-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:9px 13px; border-radius:14px; background:var(--surface); border:1px solid var(--line); } .dh-mid{ display:flex; flex-direction:column; gap:1px; min-width:0; } .dh-when{ font-size:11.5px; font-weight:700; color:var(--muted); } .dh-you b{ font-size:16px; font-weight:800; color:var(--ink); } .dh-of{ font-size:11px; font-weight:600; color:var(--muted); } .dh-you.dh-miss{ font-size:13px; color:var(--muted); font-style:italic; font-weight:600; } .dh-top{ text-align:right; font-size:12px; color:var(--muted); white-space:nowrap; line-height:1.35; } .dh-toplbl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; } .dh-top b{ color:var(--ink); font-weight:800; } .dh-topby{ display:block; font-size:11.5px; } .dh-archive{ display:block; width:100%; text-align:center; background:none; border:none; color:var(--primary-2); font:inherit; font-weight:700; cursor:pointer; padding:16px 0 4px; font-size:13.5px; } /* clickable username → opens the player-stats card */ .uname{ color:var(--primary-2); font-weight:700; cursor:pointer; } .uname:hover{ text-decoration:underline; } .leader-row[data-user]{ cursor:pointer; } /* player-stats popover */ .us-box{ max-width:360px; } .us-head{ display:flex; align-items:center; gap:14px; margin:2px 0 16px; } .us-av{ flex:none; } .us-av .avatar-wrap,.us-av img,.us-av svg{ width:76px !important; height:76px !important; } .us-id{ min-width:0; } .us-name{ font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; gap:7px; } .us-sub{ font-size:13px; font-weight:600; color:var(--muted); margin-top:2px; } .us-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .us-stat{ background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:11px 6px; text-align:center; } .us-stat b{ display:block; font-size:19px; font-weight:900; color:var(--ink); letter-spacing:-.02em; } .us-stat span{ display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-top:2px; } .us-sech{ font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; margin:18px 0 9px; } .us-modes{ display:flex; flex-direction:column; gap:7px; } .us-mode{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:9px 13px; } .us-mode-name{ font-size:13.5px; font-weight:700; color:var(--ink); } .us-mode-rank{ font-size:12px; font-weight:700; } .us-mode-rating{ font-size:15px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; } .us-extra{ display:flex; flex-direction:column; gap:4px; margin-top:14px; font-size:12.5px; font-weight:600; color:var(--muted); } .us-extra b{ color:var(--ink); font-weight:800; } /* ===== Dark-mode straggler fixes: surfaces/borders that were hardcoded for a light ground. Placed last so source order wins at equal specificity; :not() preserves medal ranks. ===== */ :root[data-mode="dark"] .avp, :root[data-mode="dark"] .np, :root[data-mode="dark"] .fp{ background:linear-gradient(#21222f,#191a24); } :root[data-mode="dark"] .set-section{ border-top-color:var(--line); } :root[data-mode="dark"] .set-section.danger .set-title{ color:#ff6f61; } :root[data-mode="dark"] .danger-btn{ background:rgba(255,90,80,.13) !important; color:#ff7a6e !important; border-color:rgba(255,90,80,.42) !important; } :root[data-mode="dark"] .leader-rank:not(.m1):not(.m2):not(.m3){ background:var(--surface-2); color:var(--muted); } :root[data-mode="dark"] .gbtn{ background:var(--surface-2); border-color:var(--line); color:var(--ink); } :root[data-mode="dark"] .gbtn:hover{ background:var(--line); } /* --- Full dark-mode straggler sweep (from parallel CSS audit) --- */ /* top bars + terms */ :root[data-mode="dark"] .verify-bar{ background:rgba(255,176,26,.14); color:#f0c07a; border-bottom-color:rgba(255,176,26,.3); } :root[data-mode="dark"] .adbar b{ color:var(--primary); } :root[data-mode="dark"] .tos-row{ color:var(--muted); } :root[data-mode="dark"] .tos-row a{ color:var(--primary); } /* profile home card + career stats */ :root[data-mode="dark"] .prof-note{ color:var(--muted); } :root[data-mode="dark"] .prof-stat{ background:var(--surface); border-color:var(--line); } :root[data-mode="dark"] .prof-lab{ color:var(--muted); } :root[data-mode="dark"] .hp-dot{ border-color:var(--surface); } :root[data-mode="dark"] .hp-bar{ background:var(--surface-2); } /* level-up modal xp bar */ :root[data-mode="dark"] .level-bar{ background:var(--surface-2); border-color:var(--line); } :root[data-mode="dark"] .level-xp{ color:var(--muted); } /* leaderboard extras */ :root[data-mode="dark"] .leader-row{ border-bottom-color:var(--line); } :root[data-mode="dark"] .leader-xp{ color:var(--muted); } :root[data-mode="dark"] .lb-cols{ border-bottom-color:var(--line); } /* segmented option hover */ :root[data-mode="dark"] .seg .opt:hover:not(.on){ background:var(--surface); } /* results / rewards / word list */ :root[data-mode="dark"] .over-menu-btn:hover{ border-color:#454863; } :root[data-mode="dark"] .coach-card{ background:linear-gradient(120deg,#2b2620,#2a2126); border-color:#3a2e28; } :root[data-mode="dark"] .rating-move .delta.up{ background:rgba(34,197,94,.16); color:#4ade80; } :root[data-mode="dark"] .rating-move .delta.down{ background:rgba(239,68,68,.16); color:#f87171; } :root[data-mode="dark"] .words-h{ color:#9aa0bd; } :root[data-mode="dark"] .wrow.best{ background:rgba(255,200,60,.12); } :root[data-mode="dark"] .lw-banner{ background:linear-gradient(100deg,#2c2616,#2a2413); border-color:#4a3d1e; } :root[data-mode="dark"] .lw-lbl{ color:#d9b048; } /* stat/mode cards: color-mix borders/fills that mixed with #fff */ :root[data-mode="dark"] .shx{ border-color:color-mix(in srgb, var(--mc) 30%, var(--surface)); } :root[data-mode="dark"] .sg-ic{ background:color-mix(in srgb, var(--c) 15%, var(--surface)); } :root[data-mode="dark"] .mc{ border-color:color-mix(in srgb, var(--mc) 26%, var(--surface)); } /* battle tile bar neutral segment */ :root[data-mode="dark"] .tilebar .seg.neutral{ background:#3a3b4a; } /* elements whose background is var(--ink) (inverts to near-white in dark) */ :root[data-mode="dark"] .pt-tip{ background:var(--surface-2); } :root[data-mode="dark"] .shop-tab.on{ color:var(--surface); } :root[data-mode="dark"] .bbtn.equipped{ background:rgba(52,192,107,.16); } /* settings email + customize status/price */ :root[data-mode="dark"] .set-email{ color:var(--muted); } :root[data-mode="dark"] .cz-status.on{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.34); color:#4ade80; } :root[data-mode="dark"] .cz-tag.price{ color:#f0b429; } :root[data-mode="dark"] .cd-price{ color:#f0b429; } /* daily hero */ :root[data-mode="dark"] .dh-streak-pill{ background:linear-gradient(135deg,rgba(255,138,60,.16),rgba(255,110,40,.1)); border-color:rgba(255,150,80,.34); color:#ffb877; } :root[data-mode="dark"] .dh-hero.done{ background:linear-gradient(135deg,#231b33,#1d1830); } /* lobby kick press feedback */ :root[data-mode="dark"] .lobby-player.kickable:active{ background:rgba(255,90,120,.18); border-color:rgba(255,90,120,.45); }