/* ===================================================================== ArcadeOn · Match 3 — "neo-arcade" presentation layer (2026 redesign) Ported from the approved prototype. All colour decisions route through CSS custom properties on , so "bright" is the default token set and Amethyst / Crimson / Ocean / Mono slot in as overrides (these map to the paid board-theme cosmetics). The DOM contract main.js depends on is preserved exactly: #board with .tile[data-type] buttons, tile--selected/matched/swap/hint states, board--intro/shake/celebrate/shuffle/pulse/target states, the [data-hud] mirrors, .mode-toggle__btn/.is-active, panels toggled via the [hidden] attribute + #panel-overlay, #gameover, #particle-layer/.particle, and the keyframe names main.js triggers. Tiles keep our egg/shell/octopus sprites, each sitting in a colour-coded candy well so every type reads at a glance. ===================================================================== */ /* ---------- THEME TOKENS ---------- */ :root{ --font-display:'Fredoka', system-ui, sans-serif; --font-ui:'Nunito', system-ui, sans-serif; /* Per-type tile wells — constant across themes (the gems are the brand). */ --w0-1:#ffe7d2; --w0-2:#ffd0a8; --w0-r:#ff8a3d; /* orange Egg_1 */ --w1-1:#fff6d2; --w1-2:#ffe8a0; --w1-r:#ffce33; /* yellow Egg_2 */ --w2-1:#dcf3ff; --w2-2:#b6e4fb; --w2-r:#36b6f0; /* blue Egg_3 */ --w3-1:#ddf7e3; --w3-2:#b6ecc3; --w3-r:#46c66a; /* green Egg_4 */ --w4-1:#ffe1f0; --w4-2:#ffc1de; --w4-r:#ff5ea8; /* magenta Egg_5 */ --w5-1:#ffe0e0; --w5-2:#ffbcbc; --w5-r:#fb5d5d; /* red Egg_6 */ --w6-1:#f0e6ff; --w6-2:#d9c2fb; --w6-r:#b07bf0; /* pearl Seashell */ --w7-1:#ffe6dc; --w7-2:#ffc6b3; --w7-r:#ff7a59; /* coral octopus */ } /* DEFAULT — "Bright" */ body[data-theme="bright"]{ --bg-1:#fff4ec; --bg-2:#e9f4ff; --bg-3:#fde7f1; --blob-a:#ffd9c2; --blob-b:#c8e6ff; --blob-c:#ffd0e6; --board:#fffaf4; --board-edge:#f0e2d4; --well:#f4ebe1; --well-edge:#fff; --panel:rgba(255,255,255,.82); --panel-solid:#ffffff; --panel-border:rgba(120,90,140,.16); --ink:#3a2d3f; --ink-soft:#8a7d8e; --ink-faint:#b9aebc; --accent-1:#ff7a59; --accent-2:#ff4d8d; --accent-ink:#fff; --mint-1:#34d9b0; --mint-2:#16b39a; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#7a4a00; --ring:#ff4d8d; --glow:rgba(255,122,89,.55); --shadow:rgba(120,80,90,.22); } /* Amethyst (cosmetic: theme_amethyst) */ body[data-theme="amethyst"]{ --bg-1:#1a1230; --bg-2:#241043; --bg-3:#12091f; --blob-a:#5b2a8c; --blob-b:#7a3bd6; --blob-c:#3a1f6b; --board:#241a3d; --board-edge:#160f29; --well:#1c1433; --well-edge:#34264f; --panel:rgba(38,26,64,.86); --panel-solid:#241a3d; --panel-border:rgba(150,110,220,.28); --ink:#efe6ff; --ink-soft:#b3a3d6; --ink-faint:#7a6aa0; --accent-1:#b06bff; --accent-2:#7a3bd6; --accent-ink:#fff; --mint-1:#22d3ee; --mint-2:#0ea5c4; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#c08bff; --glow:rgba(176,107,255,.6); --shadow:rgba(0,0,0,.5); } /* Crimson (cosmetic: theme_crimson) */ body[data-theme="crimson"]{ --bg-1:#2a0e14; --bg-2:#3d1018; --bg-3:#1a070b; --blob-a:#7a1f2a; --blob-b:#b22a3a; --blob-c:#5a141d; --board:#33141a; --board-edge:#220c10; --well:#291016; --well-edge:#48202a; --panel:rgba(51,20,26,.86); --panel-solid:#33141a; --panel-border:rgba(220,90,110,.28); --ink:#ffe8ea; --ink-soft:#d6a3aa; --ink-faint:#a06a72; --accent-1:#ff5a72; --accent-2:#d62a44; --accent-ink:#fff; --mint-1:#ffae5a; --mint-2:#f5821f; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#ff6b80; --glow:rgba(255,90,114,.6); --shadow:rgba(0,0,0,.5); } /* Ocean (cosmetic: theme_ocean) */ body[data-theme="ocean"]{ --bg-1:#06283d; --bg-2:#0a3a52; --bg-3:#041a2b; --blob-a:#0e5c75; --blob-b:#1b8aa6; --blob-c:#0a4258; --board:#0c344a; --board-edge:#06222f; --well:#0a2c40; --well-edge:#17475e; --panel:rgba(12,52,74,.86); --panel-solid:#0c344a; --panel-border:rgba(90,200,230,.26); --ink:#e6f7ff; --ink-soft:#9fcde0; --ink-faint:#5f93a8; --accent-1:#2fd0d6; --accent-2:#1b9bd6; --accent-ink:#03222c; --mint-1:#5ce0b0; --mint-2:#22b38f; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#0a2a1f; --ring:#5ce0ff; --glow:rgba(47,208,214,.6); --shadow:rgba(0,0,0,.5); } /* Mono (cosmetic: theme_mono) */ body[data-theme="mono"]{ --bg-1:#1c1c1e; --bg-2:#2a2a2e; --bg-3:#141416; --blob-a:#3a3a40; --blob-b:#4a4a52; --blob-c:#2c2c30; --board:#252528; --board-edge:#161618; --well:#1e1e21; --well-edge:#34343a; --panel:rgba(37,37,40,.88); --panel-solid:#252528; --panel-border:rgba(255,255,255,.12); --ink:#f2f2f4; --ink-soft:#a8a8b0; --ink-faint:#6e6e76; --accent-1:#e8e8ec; --accent-2:#b8b8c0; --accent-ink:#1c1c1e; --mint-1:#c8c8d0; --mint-2:#9a9aa2; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#ffffff; --glow:rgba(255,255,255,.4); --shadow:rgba(0,0,0,.55); } /* Sunset Boulevard (cosmetic: theme_sunset) */ body[data-theme="sunset"]{ --bg-1:#2a0e1f; --bg-2:#3d1228; --bg-3:#1a0813; --blob-a:#7a2a4a; --blob-b:#b6435f; --blob-c:#5e1f3a; --board:#331426; --board-edge:#220c19; --well:#291020; --well-edge:#48203a; --panel:rgba(51,20,38,.86); --panel-solid:#331426; --panel-border:rgba(255,150,130,.26); --ink:#ffe8ec; --ink-soft:#e0a8b8; --ink-faint:#a06a82; --accent-1:#ff8a6a; --accent-2:#f9627f; --accent-ink:#fff; --mint-1:#ffd6a5; --mint-2:#f9a86a; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#ff9a7a; --glow:rgba(249,115,98,.6); --shadow:rgba(0,0,0,.5); } /* Verdant Grove (cosmetic: theme_forest) */ body[data-theme="forest"]{ --bg-1:#0a1f12; --bg-2:#0e2e1a; --bg-3:#06140b; --blob-a:#1a5233; --blob-b:#2f7d4f; --blob-c:#143e25; --board:#0e2c1a; --board-edge:#061a0f; --well:#0b2415; --well-edge:#17422a; --panel:rgba(14,44,26,.86); --panel-solid:#0e2c1a; --panel-border:rgba(120,200,140,.26); --ink:#e8ffee; --ink-soft:#a8d6b8; --ink-faint:#6a9a7a; --accent-1:#5fd98a; --accent-2:#2f9d5f; --accent-ink:#03220f; --mint-1:#a7d97c; --mint-2:#6aa84f; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#0a2a14; --ring:#7cf0a8; --glow:rgba(95,217,138,.55); --shadow:rgba(0,0,0,.5); } /* Rose Quartz (cosmetic: theme_rose) */ body[data-theme="rose"]{ --bg-1:#2a0f1c; --bg-2:#3d1528; --bg-3:#1a0912; --blob-a:#7a2f4a; --blob-b:#e26d8f; --blob-c:#5a2238; --board:#331627; --board-edge:#220d18; --well:#29121e; --well-edge:#482038; --panel:rgba(51,22,39,.86); --panel-solid:#331627; --panel-border:rgba(245,170,195,.28); --ink:#ffe8ef; --ink-soft:#e0aac0; --ink-faint:#a86f88; --accent-1:#f48aaa; --accent-2:#e2638f; --accent-ink:#fff; --mint-1:#f9c5d5; --mint-2:#d98aa3; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#ffaac4; --glow:rgba(226,109,143,.55); --shadow:rgba(0,0,0,.5); } /* Obsidian Gold (cosmetic: theme_obsidian) */ body[data-theme="obsidian"]{ --bg-1:#0e0e10; --bg-2:#1a1a1e; --bg-3:#08080a; --blob-a:#2e2e33; --blob-b:#3a3a40; --blob-c:#1c1c1f; --board:#1a1a1e; --board-edge:#0c0c0e; --well:#141416; --well-edge:#2e2e33; --panel:rgba(20,20,24,.9); --panel-solid:#1a1a1e; --panel-border:rgba(230,181,74,.26); --ink:#f5efe0; --ink-soft:#c8bfa8; --ink-faint:#8a8270; --accent-1:#f5d27a; --accent-2:#e6b54a; --accent-ink:#221800; --mint-1:#e6c97a; --mint-2:#b8860b; --gold-1:#ffd64a; --gold-2:#e6b54a; --gold-ink:#221800; --ring:#f5d27a; --glow:rgba(230,181,74,.5); --shadow:rgba(0,0,0,.6); } /* Galaxy Drift (cosmetic: theme_galaxy) */ body[data-theme="galaxy"]{ --bg-1:#0a0a23; --bg-2:#15123a; --bg-3:#06061a; --blob-a:#2e2a6b; --blob-b:#4338ca; --blob-c:#1e1b4b; --board:#141235; --board-edge:#0a0820; --well:#100e2a; --well-edge:#2a2658; --panel:rgba(20,18,53,.88); --panel-solid:#141235; --panel-border:rgba(124,108,250,.3); --ink:#ece8ff; --ink-soft:#b0a8e0; --ink-faint:#726aa0; --accent-1:#7c6cf5; --accent-2:#5a4fe0; --accent-ink:#fff; --mint-1:#67e8f9; --mint-2:#22d3ee; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#67e8f9; --glow:rgba(99,102,241,.6); --shadow:rgba(0,0,0,.55); } /* Prismatic Royale (cosmetic: theme_prism) */ body[data-theme="prism"]{ --bg-1:#160a2e; --bg-2:#241043; --bg-3:#0f0720; --blob-a:#6a3bb6; --blob-b:#a855f7; --blob-c:#ec4899; --board:#241640; --board-edge:#150c28; --well:#1c1235; --well-edge:#3b2858; --panel:rgba(36,22,64,.86); --panel-solid:#241640; --panel-border:rgba(168,85,247,.32); --ink:#f5ecff; --ink-soft:#c4b0e6; --ink-faint:#8a72b0; --accent-1:#c77dff; --accent-2:#ec4899; --accent-ink:#fff; --mint-1:#5eead4; --mint-2:#2dd4bf; --gold-1:#fde68a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#c77dff; --glow:rgba(168,85,247,.6); --shadow:rgba(0,0,0,.5); } /* Summer Solstice (cosmetic: theme_solstice) */ body[data-theme="solstice"]{ --bg-1:#2a1606; --bg-2:#3d2110; --bg-3:#1a0d04; --blob-a:#7a4210; --blob-b:#c2701a; --blob-c:#5e3210; --board:#331d0c; --board-edge:#221207; --well:#291708; --well-edge:#48301a; --panel:rgba(51,29,12,.86); --panel-solid:#331d0c; --panel-border:rgba(255,180,80,.28); --ink:#fff2db; --ink-soft:#e0c89a; --ink-faint:#a8906a; --accent-1:#ffb84a; --accent-2:#f59e0b; --accent-ink:#2a1800; --mint-1:#ffd166; --mint-2:#f5a416; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#ffd166; --glow:rgba(245,158,11,.55); --shadow:rgba(0,0,0,.5); } /* Aurora Veil (cosmetic: theme_aurora) */ body[data-theme="aurora"]{ --bg-1:#04121a; --bg-2:#0a2a2e; --bg-3:#020d12; --blob-a:#0e5252; --blob-b:#1f8a70; --blob-c:#0a3a3f; --board:#0a2a2e; --board-edge:#04181c; --well:#08222a; --well-edge:#154248; --panel:rgba(10,42,46,.86); --panel-solid:#0a2a2e; --panel-border:rgba(126,249,192,.26); --ink:#e6fff4; --ink-soft:#a0d6c4; --ink-faint:#5f9a8a; --accent-1:#3ee0b0; --accent-2:#b388ff; --accent-ink:#03221a; --mint-1:#7ef9c0; --mint-2:#38b2a0; --gold-1:#ffd64a; --gold-2:#f7a416; --gold-ink:#3a2400; --ring:#7ef9c0; --glow:rgba(31,138,112,.6); --shadow:rgba(0,0,0,.5); } /* ---------- RESET / BASE ---------- */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ font-family:var(--font-ui); color:var(--ink); background:var(--bg-2); overflow:hidden; position:relative; user-select:none; transition:background .5s ease; } button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} /* Old casino frame/vignette are retired in this theme. */ .frame,.vignette{display:none !important} /* ---------- ATMOSPHERE ---------- */ .bg{position:fixed;inset:0;z-index:0;overflow:hidden; background: radial-gradient(120% 90% at 15% 0%, var(--bg-1) 0%, transparent 55%), radial-gradient(120% 90% at 95% 10%, var(--bg-3) 0%, transparent 50%), var(--bg-2); transition:background .5s ease;} .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite;will-change:transform;transform:translateZ(0)} .blob.a{width:46vmax;height:46vmax;background:var(--blob-a);top:-14vmax;left:-10vmax} .blob.b{width:40vmax;height:40vmax;background:var(--blob-b);bottom:-16vmax;right:-8vmax;animation-delay:-7s} .blob.c{width:30vmax;height:30vmax;background:var(--blob-c);top:40%;left:55%;animation-delay:-13s} @keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vmax,3vmax) scale(1.08)}66%{transform:translate(-3vmax,2vmax) scale(.96)}} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* ---------- LOADING SCREEN ---------- Matches the atmosphere background so the fade reveals the same backdrop. Theme-token driven, so it adapts to Bright / Amethyst / Crimson / Ocean / Mono. */ .preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center; background: radial-gradient(120% 90% at 15% 0%, var(--bg-1) 0%, transparent 55%), radial-gradient(120% 90% at 95% 10%, var(--bg-3) 0%, transparent 50%), var(--bg-2); transition:opacity .5s ease, visibility .5s ease} .preloader.is-done{opacity:0;visibility:hidden} .preloader[hidden]{display:none} .preloader__inner{width:min(420px,86vw);text-align:center;padding:0 16px} .preloader__badge{font-family:var(--font-ui);font-weight:800;font-size:11px;letter-spacing:.3em; text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px} .preloader__title{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,11vw,56px); line-height:1;margin-bottom:24px;letter-spacing:.01em; background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); -webkit-background-clip:text;background-clip:text;color:transparent} .preloader__gems{display:flex;gap:11px;justify-content:center;margin-bottom:24px} .preloader__gems span{width:17px;height:17px;border-radius:30%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 0 4px 9px rgba(0,0,0,.18); animation:gembounce .9s ease-in-out infinite} .preloader__gems span:nth-child(1){background:radial-gradient(circle at 40% 30%,var(--w0-1),var(--w0-2));animation-delay:0s} .preloader__gems span:nth-child(2){background:radial-gradient(circle at 40% 30%,var(--w4-1),var(--w4-2));animation-delay:.12s} .preloader__gems span:nth-child(3){background:radial-gradient(circle at 40% 30%,var(--w2-1),var(--w2-2));animation-delay:.24s} .preloader__gems span:nth-child(4){background:radial-gradient(circle at 40% 30%,var(--w3-1),var(--w3-2));animation-delay:.36s} .preloader__gems span:nth-child(5){background:radial-gradient(circle at 40% 30%,var(--w1-1),var(--w1-2));animation-delay:.48s} @keyframes gembounce{0%,100%{transform:translateY(0) scale(1);opacity:.7}50%{transform:translateY(-14px) scale(1.08);opacity:1}} .preloader__bar{height:12px;border-radius:999px;overflow:hidden; background:color-mix(in srgb,var(--ink) 10%,transparent);border:1.5px solid var(--panel-border)} .preloader__fill{height:100%;width:0%;border-radius:999px; background:linear-gradient(90deg,var(--gold-1),var(--accent-1),var(--accent-2));transition:width .25s ease} .preloader__meta{display:flex;flex-direction:column;align-items:center;gap:6px; margin-top:13px;font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center} .preloader__meta span:first-child{color:var(--ink);font-variant-numeric:tabular-nums;font-size:15px} .preloader__tip{max-width:100%} /* ---------- APP SHELL ---------- */ /* Centred phone-width column, full height, never scrolls. */ .app, #game{position:relative;z-index:2;height:100svh;max-height:100svh;display:flex;flex-direction:column; justify-content:safe center; max-width:560px;margin:0 auto; padding:calc(14px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));gap:12px} /* ---------- TOP BAR ---------- */ .topbar{display:flex;align-items:center;gap:10px;flex:none;min-width:0} .brand,.logo{display:flex;flex-direction:column;line-height:.95;margin-right:auto} .brand__label,.logo .eyebrow{font-family:var(--font-ui);font-weight:800;font-size:9px;letter-spacing:.3em; color:var(--ink-soft);text-transform:uppercase} .brand__title,.logo .word{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:.01em;color:var(--ink)} .brand__title{background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); -webkit-background-clip:text;background-clip:text;color:transparent} .pill,.chip--coins{display:flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:14px;min-width:0; background:var(--panel);border:1.5px solid var(--panel-border);backdrop-filter:blur(12px); font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink); box-shadow:0 6px 16px -8px var(--shadow);transition:transform .12s} .pill .coin,.chip--coins .coin{width:20px;height:20px;flex:none} .chip--coins strong{font-weight:700;color:var(--gold-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pill.pulse,.chip--coins.pulse{animation:pillpulse .45s ease} @keyframes pillpulse{40%{transform:scale(1.14);color:var(--gold-2)}} .icobtn,.chip--icon,.chip--menu{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:none; background:var(--panel);border:1.5px solid var(--panel-border);backdrop-filter:blur(12px); box-shadow:0 6px 16px -8px var(--shadow);transition:transform .12s,background .2s; font-size:18px;line-height:1;color:var(--ink)} .icobtn:active,.chip--icon:active,.chip--menu:active{transform:scale(.9)} .icobtn svg{width:19px;height:19px;color:var(--ink)} .chip--icon[aria-pressed="true"]{opacity:.55} /* keep header-actions inline and at natural size so the menu stays on-screen */ .header-actions{display:flex;gap:10px;align-items:center;flex:none} /* ---------- MODE TABS ---------- */ .modes,.mode-toggle{display:flex;gap:5px;padding:5px;border-radius:17px;flex:none; background:var(--panel);border:1.5px solid var(--panel-border);backdrop-filter:blur(12px); box-shadow:0 8px 20px -12px var(--shadow)} .mode,.mode-toggle__btn{flex:1;height:42px;border-radius:12px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:1px;color:var(--ink-soft);font-family:var(--font-display); font-weight:600;font-size:14px;position:relative;transition:color .2s,background .2s} .mode small,.mode-toggle__btn small{font-family:var(--font-ui);font-weight:700;font-size:8.5px;letter-spacing:.06em; opacity:.8;text-transform:uppercase} .mode.on,.mode-toggle__btn.is-active{color:var(--accent-ink); background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); box-shadow:0 8px 18px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.35)} .mode.on small,.mode-toggle__btn.is-active small{opacity:.9} /* ---------- HUD ---------- */ .hud,.table__stats{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;flex:none; padding:11px 16px;border-radius:18px; background:var(--panel);border:1.5px solid var(--panel-border);backdrop-filter:blur(12px); box-shadow:0 10px 26px -16px var(--shadow)} .stat{display:flex;flex-direction:column;min-width:0} .stat.right{align-items:flex-end;text-align:right} .stat .label,.stat__label{font-weight:800;font-size:9px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase} .stat .val,.stat__value{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1;color:var(--ink); font-variant-numeric:tabular-nums;transition:transform .12s,color .2s; max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stat--pulse .stat__value,.stat .val.pop{animation:stat-pop .4s ease} .combometer{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:84px} .combometer .ctxt{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-soft)} .combometer .ctxt b,.combometer .ctxt .stat__value{color:var(--accent-2);font-size:13px;display:inline} .cbar{width:84px;height:7px;border-radius:6px;background:color-mix(in srgb,var(--ink) 14%,transparent);overflow:hidden} .cbar i{display:block;height:100%;width:0%;border-radius:6px; background:linear-gradient(90deg,var(--gold-1),var(--accent-1),var(--accent-2)); transition:width .25s ease} /* ---------- BOARD ---------- .boardwrap is a size container; the square board = min(its w, its h) so it always fits both axes. main.js sets --cols and renders .tile buttons. */ .boardwrap,.board-shell{flex:0 1 auto;min-height:0;position:relative;width:100%; display:flex;justify-content:center;align-items:center} /* Square board sized to fit the viewport: capped by the column width (100%), by the height left after the chrome (calc), and by a sane desktop max. The whole app column is centre-justified, so any slack is balanced top/bottom rather than dumped into one gap below the board. */ .boardframe{position:relative;width:min(100%, clamp(180px, calc(100svh - 320px), 560px));aspect-ratio:1; border-radius:26px;padding:11px; background:linear-gradient(160deg,var(--board) 0%, color-mix(in srgb,var(--board) 82%, #000 4%) 100%); border:1.5px solid var(--board-edge); box-shadow:0 24px 50px -22px var(--shadow), inset 0 2px 0 var(--well-edge), inset 0 -10px 24px -10px rgba(0,0,0,.18)} .board{display:grid;gap:clamp(3px,1.3%,7px);width:100%;height:100%; grid-template-columns:repeat(var(--cols,8),1fr);grid-auto-rows:1fr;position:relative;z-index:1; /* Swipe-to-swap is computed from pointer down/up coords; claim the gesture so a diagonal swipe can't be hijacked by the browser as a scroll/zoom. */ touch-action:none} /* board feedback states (main.js toggles these on #board) */ .board.board--celebrate{animation:board-glow .7s ease} .board.board--shake{animation:board-shake .4s ease} .board.board--pulse{animation:board-pulse .28s ease-out} .board.board--shuffle{animation:board-shuffle .35s ease-out} .board.board--intro .tile{animation:tile-pop .35s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--delay,0ms)} .board--target .tile{cursor:crosshair} .board--target .tile::after{content:"";position:absolute;inset:8%;border-radius:18%; border:2.5px dashed var(--ring);opacity:.8;animation:tgt 1s linear infinite} @keyframes tgt{to{transform:rotate(360deg)}} /* ---------- TILES (egg sprites in a candy well) ---------- */ .tile{position:relative;width:100%;height:100%;aspect-ratio:1;border:none;border-radius:20%;cursor:pointer; overflow:hidden;background-repeat:no-repeat;background-position:center;background-color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.92), inset 0 0 0 4px var(--well-r,rgba(120,90,140,.25)), inset 0 -5px 9px rgba(0,0,0,.12), 0 4px 9px rgba(0,0,0,.2); transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .16s,filter .16s; -webkit-tap-highlight-color:transparent} .tile::before{content:"";position:absolute;inset:0; background:radial-gradient(circle at 32% 16%, rgba(255,255,255,.8), transparent 52%); opacity:.7;pointer-events:none} .tile:not(.tile--selected):hover{transform:translateY(-3px) scale(1.05);filter:brightness(1.04) saturate(1.05)} .tile:active{transform:scale(.93)} .tile:focus-visible{outline:3px solid var(--ring);outline-offset:2px} .tile--selected{transform:translateY(-3px) scale(1.08);z-index:5; box-shadow:inset 0 0 0 3px #fff, 0 0 0 3px var(--well-r,var(--ring)), 0 0 16px var(--glow), 0 12px 22px rgba(0,0,0,.28)} .tile--swap{animation:swap-jolt .25s ease;z-index:6} .tile--matched{animation:match-flash .3s ease-in-out forwards;z-index:6} .tile--hint{animation:hintb .8s ease-in-out infinite;z-index:4} @keyframes hintb{50%{transform:scale(1.13) translateY(-5%)}} /* per-type: sprite layered over a candy radial well; --well-r tints the ring */ .tile[data-type="0"]{--well-r:var(--w0-r);background-image:url("img/tiles/Egg_1.png"),radial-gradient(circle at 50% 30%,var(--w0-1),var(--w0-2));background-size:76%,cover} .tile[data-type="1"]{--well-r:var(--w1-r);background-image:url("img/tiles/Egg_2.png"),radial-gradient(circle at 50% 30%,var(--w1-1),var(--w1-2));background-size:76%,cover} .tile[data-type="2"]{--well-r:var(--w2-r);background-image:url("img/tiles/Egg_3.png"),radial-gradient(circle at 50% 30%,var(--w2-1),var(--w2-2));background-size:76%,cover} .tile[data-type="3"]{--well-r:var(--w3-r);background-image:url("img/tiles/Egg_4.png"),radial-gradient(circle at 50% 30%,var(--w3-1),var(--w3-2));background-size:76%,cover} .tile[data-type="4"]{--well-r:var(--w4-r);background-image:url("img/tiles/Egg_5.png"),radial-gradient(circle at 50% 30%,var(--w4-1),var(--w4-2));background-size:76%,cover} .tile[data-type="5"]{--well-r:var(--w5-r);background-image:url("img/tiles/Egg_6.png"),radial-gradient(circle at 50% 30%,var(--w5-1),var(--w5-2));background-size:76%,cover} .tile[data-type="6"]{--well-r:var(--w6-r);background-image:url("img/tiles/Seashell_3.png"),radial-gradient(circle at 50% 30%,var(--w6-1),var(--w6-2));background-size:72%,cover} .tile[data-type="7"]{--well-r:var(--w7-r);background-image:url("img/tiles/Fish_6.png"),radial-gradient(circle at 50% 30%,var(--w7-1),var(--w7-2));background-size:82%,cover} /* ---------- FX layers (main.js: particles, combo burst, score pop) ---------- */ .table__particles{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible} .particle{position:absolute;width:var(--particle-size,8px);height:var(--particle-size,8px);border-radius:50%; background:var(--particle-color,radial-gradient(circle,#fff,var(--gold-1)));transform:translate(-50%,-50%); animation:particle-pop var(--particle-duration,700ms) ease-out forwards;box-shadow:0 0 8px var(--glow)} .combo-burst{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:9; font-family:var(--font-display);font-weight:700;text-align:center;pointer-events:none;opacity:0; color:#fff;text-shadow:0 3px 0 var(--accent-2),0 6px 18px var(--glow);font-size:clamp(2rem,9vw,3.4rem)} .combo-burst--show{animation:combo-burst .9s cubic-bezier(.2,1.4,.4,1)} .score-pop{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-display); font-weight:700;font-size:18px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4); opacity:0;animation:score-pop .8s ease-out forwards;pointer-events:none;white-space:nowrap} /* ---------- STATUS LINE ---------- */ .status{flex:none;text-align:center;font-family:var(--font-ui);font-weight:700;font-size:12.5px; color:var(--ink-soft);padding:2px 8px;min-height:1.2em} .status--flash{animation:status-flash .4s ease} /* ---------- POWER-UP DOCK ---------- */ .dock{display:flex;gap:8px;align-items:center;flex:none} .dock .slot{flex:1;height:62px;border-radius:16px;position:relative;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:2px; background:var(--panel);border:1.5px solid var(--panel-border);backdrop-filter:blur(12px); box-shadow:0 8px 18px -12px var(--shadow);transition:transform .12s,opacity .2s;color:var(--ink)} .dock .slot:active{transform:scale(.93)} .dock .slot[disabled]{opacity:.4;pointer-events:none} .dock .slot .pu{font-size:24px;line-height:1} .dock .slot .nm{font-family:var(--font-display);font-weight:600;font-size:9.5px;color:var(--ink-soft); text-transform:uppercase;letter-spacing:.03em} .dock .slot .cnt{position:absolute;top:-6px;right:-5px;min-width:20px;height:20px;padding:0 5px; border-radius:10px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); color:var(--accent-ink);font-family:var(--font-display);font-weight:700;font-size:11px; display:grid;place-items:center;box-shadow:0 3px 8px -2px var(--glow)} .dock .shopbtn{width:62px;height:62px;border-radius:16px;flex:none;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:2px;color:var(--accent-ink); background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); box-shadow:0 10px 22px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35);transition:transform .12s} .dock .shopbtn:active{transform:scale(.93)} .dock .shopbtn svg{width:22px;height:22px} .dock .shopbtn small{font-family:var(--font-display);font-weight:600;font-size:9px;letter-spacing:.04em} .dock.ranked{opacity:.5;pointer-events:none} .rankednote{flex:none;text-align:center;font-weight:800;font-size:11px;letter-spacing:.04em;color:var(--ink-soft);padding:2px} .rankednote[hidden]{display:none} /* ---------- SLIDE-OVER PANELS ---------- main.js shows/hides via the [hidden] attribute; #panel-overlay is the scrim. */ .panel-overlay{position:fixed;inset:0;z-index:40;background:rgba(20,10,20,.45);backdrop-filter:blur(3px)} .panel-overlay[hidden]{display:none} .panel{position:fixed;top:0;right:0;height:100vh;height:100svh;z-index:50;width:min(420px,90vw); background:var(--panel-solid);border-left:1.5px solid var(--panel-border); box-shadow:-20px 0 50px -20px rgba(0,0,0,.5); display:flex;flex-direction:column;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));gap:0; animation:panel-slide .34s cubic-bezier(.5,1,.4,1)} .panel[hidden]{display:none} .panel__header,.phead{display:flex;align-items:center;gap:10px;margin-bottom:18px} .panel__header h2,.phead h2{font-family:var(--font-display);font-weight:700;font-size:24px;margin-right:auto;color:var(--ink)} .panel__close{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:none; background:var(--panel);border:1.5px solid var(--panel-border);color:var(--ink);font-size:0; box-shadow:0 6px 16px -8px var(--shadow)} .panel__close::before{content:"✕";font-family:var(--font-ui);font-size:15px;font-weight:800} .panel__body,.pbody{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:11px;padding-right:2px} .panel__body::-webkit-scrollbar,.pbody::-webkit-scrollbar{width:7px} .panel__body::-webkit-scrollbar-thumb,.pbody::-webkit-scrollbar-thumb{background:var(--ink-faint);border-radius:4px} .shopwallet{display:flex;align-items:center;gap:8px;padding:14px 16px;border-radius:16px;margin-bottom:6px; background:linear-gradient(135deg,var(--gold-1),var(--gold-2));color:var(--gold-ink); font-family:var(--font-display);font-weight:700;font-size:22px; box-shadow:0 10px 24px -12px var(--gold-2)} .shopwallet .coin{width:26px;height:26px} .shopwallet small{font-family:var(--font-ui);font-weight:800;font-size:10px;letter-spacing:.14em; opacity:.7;text-transform:uppercase;margin-right:auto} /* power-up shop items (main.js builds .powerup buttons inside #powerups-items) */ .powerups{display:flex;flex-direction:column;gap:11px} .powerups__items{display:flex;flex-direction:column;gap:11px} .powerup{display:flex;align-items:center;gap:13px;padding:13px;border-radius:16px;width:100%;text-align:left; background:color-mix(in srgb,var(--panel-solid) 100%, var(--ink) 5%); border:1.5px solid var(--panel-border);color:var(--ink);transition:transform .12s,border-color .2s} .powerup:hover:not(:disabled){transform:translateY(-1px);border-color:var(--accent-2)} .powerup:disabled{opacity:.4;pointer-events:none} .powerup.is-active{border-color:var(--mint-2);box-shadow:0 0 0 1.5px var(--mint-2) inset} .powerup__icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;font-size:28px; background:radial-gradient(120% 120% at 50% 20%, color-mix(in srgb,var(--ink) 8%,transparent), transparent)} .powerup>span:nth-child(2){flex:1;min-width:0;font-family:var(--font-display);font-weight:600;font-size:16px} .powerup__cost{flex:none;height:38px;padding:0 13px;border-radius:12px;display:inline-flex;align-items:center;gap:4px; font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--gold-ink); background:linear-gradient(135deg,var(--gold-1),var(--gold-2));box-shadow:0 6px 14px -6px var(--gold-2)} .powerup__owned{flex:none;min-width:30px;height:30px;padding:0 9px;border-radius:11px;display:inline-flex; align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:14px; color:var(--mint-2);background:color-mix(in srgb,var(--mint-1) 22%,transparent)} .powerups__ranked{color:var(--ink-soft);font-weight:700;font-size:12px;text-align:center;padding:8px} .powerups__ranked[hidden]{display:none} /* stats grid + leaderboard rows */ .ui-menu__stats,.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px} .stat--menu,.statcard{padding:16px;border-radius:16px;background:color-mix(in srgb,var(--panel-solid) 100%,var(--ink) 5%); border:1.5px solid var(--panel-border);display:flex;flex-direction:column} .statcard .k,.stat--menu .stat__label{font-weight:800;font-size:10px;letter-spacing:.12em;color:var(--ink-faint);text-transform:uppercase} .statcard .v,.stat--menu .stat__value{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums} .statcard.wide{grid-column:1/-1} .lblrow{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px; background:color-mix(in srgb,var(--panel-solid) 100%,var(--ink) 5%);border:1.5px solid var(--panel-border); font-weight:800;font-size:13px;color:var(--ink)} .lblrow .rk{font-family:var(--font-display);font-weight:700;color:var(--accent-2);font-size:16px} .lblrow.me{background:linear-gradient(135deg,color-mix(in srgb,var(--accent-1) 22%,transparent),color-mix(in srgb,var(--accent-2) 12%,transparent));border-color:var(--accent-2)} /* menu rows / theme picker / toggle / links */ .section-title{font-weight:900;font-size:11px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase;margin:6px 2px 2px} /* How-to-play tutorial (menu panel) */ .howto{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px;text-align:left} .howto__item{display:flex;align-items:center;gap:12px; background:color-mix(in srgb,var(--panel-solid) 100%,var(--ink) 5%);border:1.5px solid var(--panel-border); border-radius:12px;padding:10px 14px;font-family:var(--font-ui);font-weight:700;font-size:14px;color:var(--ink)} .howto__icon{font-size:20px;width:26px;text-align:center} .themes{display:grid;grid-template-columns:repeat(5,1fr);gap:9px} .themechip{aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden;border:2.5px solid transparent;transition:transform .12s,border-color .2s} .themechip:active{transform:scale(.92)} .themechip.on{border-color:var(--ring)} .themechip.locked{opacity:.55;filter:grayscale(.3)} .themechip__lock{position:absolute;top:4px;right:4px;font-size:11px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))} .themechip span{position:absolute;left:0;right:0;bottom:0;font-family:var(--font-ui);font-weight:800; font-size:8px;letter-spacing:.04em;text-align:center;padding:2px;color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.55));text-transform:uppercase} .settings-row,.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px; background:color-mix(in srgb,var(--panel-solid) 100%,var(--ink) 5%);border:1.5px solid var(--panel-border); font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);width:100%;text-align:left} .settings-row__label{display:flex;align-items:center;gap:10px} .settings-row__hint{font-family:var(--font-ui);font-weight:700;font-size:11px;color:var(--ink-soft);display:block} .switch,.sw{width:50px;height:29px;border-radius:16px;background:var(--ink-faint);position:relative;transition:background .2s;flex:none} .settings-row.is-on .switch,.sw.on{background:var(--mint-1)} .switch__knob,.sw i{position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3);transition:left .2s} .settings-row.is-on .switch__knob,.sw.on i{left:24px} .menubtn,.button--ghost,.chip--link,.button{display:flex;align-items:center;gap:12px;padding:16px;border-radius:14px;width:100%;text-align:left; background:color-mix(in srgb,var(--panel-solid) 100%,var(--ink) 5%);border:1.5px solid var(--panel-border); font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink);transition:transform .1s;text-decoration:none} .menubtn:active,.button--ghost:active,.button:active{transform:scale(.98)} .button{justify-content:center;color:var(--accent-ink);border:none; background:linear-gradient(135deg,var(--accent-1),var(--accent-2));box-shadow:0 10px 22px -10px var(--glow)} .menu-panel__links{display:flex;gap:8px;flex-wrap:wrap} .chip--link{width:auto;flex:1;justify-content:center;font-size:14px;padding:12px} /* account */ .acct{display:flex;align-items:center;gap:14px;padding:18px;border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--accent-1) 18%,var(--panel-solid)),var(--panel-solid)); border:1.5px solid var(--panel-border)} .avatar{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;flex:none; background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:var(--accent-ink); font-family:var(--font-display);font-weight:700;font-size:28px;box-shadow:0 8px 18px -8px var(--glow);position:relative} .lvlbar{height:9px;border-radius:6px;background:color-mix(in srgb,var(--ink) 14%,transparent);overflow:hidden;margin-top:7px} .lvlbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--mint-1),var(--mint-2))} /* ---------- GAME OVER (main.js: #gameover toggled via [hidden]) ---------- */ .gameover{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px; background:rgba(20,10,20,.55);backdrop-filter:blur(5px);animation:modal-fade .3s ease} .gameover[hidden]{display:none} .gameover__card{width:100%;max-width:360px;border-radius:26px;padding:26px;text-align:center; background:var(--panel-solid);border:1.5px solid var(--panel-border); box-shadow:0 30px 70px -24px rgba(0,0,0,.6);animation:modal-rise .35s cubic-bezier(.3,1.5,.5,1)} .gameover__title{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--ink)} .gameover__score{font-family:var(--font-display);font-weight:700;font-size:60px;line-height:1;margin:8px 0;color:var(--ink);font-variant-numeric:tabular-nums} .gameover__score strong{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent} .gameover__actions{display:flex;flex-direction:column;gap:9px;margin-top:18px} .gameover__btn{width:100%;height:54px;border-radius:16px;font-family:var(--font-display);font-weight:600;font-size:17px; color:var(--accent-ink);background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); box-shadow:0 12px 26px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,.35); display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s} .gameover__btn:active{transform:scale(.96)} .gameover__btn--ghost{background:transparent;color:var(--ink-soft);box-shadow:none;border:1.5px solid var(--panel-border);font-size:15px;height:46px} .gameover__btn:disabled{opacity:.5} .gameover__note{margin-top:10px;min-height:1em;font-size:12.5px;font-weight:800;color:var(--accent-2)} /* ---------- LEVEL-UP TOAST (created by shared UI) ---------- */ .level-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(16px); display:flex;align-items:center;gap:12px;background:var(--panel-solid);border:1.5px solid var(--panel-border); border-radius:16px;padding:12px 16px;box-shadow:0 16px 36px -16px rgba(0,0,0,.6);z-index:70;opacity:0; transition:opacity .3s ease,transform .3s ease} .level-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)} .level-toast__badge{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center; font-family:var(--font-display);font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent-1),var(--accent-2))} .level-toast__title{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)} .level-toast__meta{font-size:12px;color:var(--ink-soft);font-weight:700} .level-toast__close{border:none;background:transparent;color:var(--ink-soft);cursor:pointer;font-size:18px;margin-left:6px} /* generic shared cards (boosts/events/tournaments — dormant but safe) */ .panel__card{display:grid;gap:8px;border:1.5px solid var(--panel-border);border-radius:14px; background:color-mix(in srgb,var(--panel-solid) 100%,var(--ink) 5%);padding:12px} .panel__card-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink)} .panel__card-meta{font-size:12px;color:var(--ink-soft);font-weight:700} .tournament-empty{color:var(--ink-soft);font-weight:700;font-size:13px} .aria{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* ===================================================================== Keyframes (names main.js triggers — kept stable) ===================================================================== */ @keyframes tile-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}} @keyframes match-flash{30%{transform:scale(1.3) rotate(6deg)}100%{transform:scale(0) rotate(-12deg);opacity:0}} @keyframes swap-jolt{0%{transform:scale(1)}50%{transform:scale(1.08) rotate(.5deg)}100%{transform:scale(1)}} @keyframes board-shake{10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-5px)}} @keyframes board-glow{0%,100%{box-shadow:0 0 0 0 transparent}45%{box-shadow:0 0 0 4px var(--glow)}} @keyframes board-pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}} @keyframes board-shuffle{0%{transform:scale(1)}30%{transform:scale(.98) rotate(-.6deg)}60%{transform:scale(1.01) rotate(.6deg)}100%{transform:scale(1)}} @keyframes combo-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(2deg)}70%{opacity:1;transform:translate(-50%,-55%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(.95)}} @keyframes status-flash{0%,100%{color:var(--ink-soft)}50%{color:var(--accent-2)}} @keyframes score-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-140%) scale(.9)}} @keyframes stat-pop{40%{transform:scale(1.18);color:var(--accent-2)}} @keyframes particle-pop{0%{transform:translate(-50%,-50%) scale(1);opacity:.95}100%{transform:translate(calc(-50% + var(--particle-x,0px)),calc(-50% + var(--particle-y,0px))) scale(.2);opacity:0}} @keyframes panel-slide{from{transform:translateX(102%)}to{transform:translateX(0)}} @keyframes modal-fade{from{opacity:0}to{opacity:1}} @keyframes modal-rise{from{transform:scale(.85) translateY(12px)}to{transform:scale(1) translateY(0)}} /* ---------- RESPONSIVE ---------- */ @media(min-width:761px){ .app,#game{max-width:560px} .tile:hover{transform:scale(1.05)} .dock .slot:hover{transform:translateY(-2px)} } @media(max-height:720px){ .stat .val,.stat__value{font-size:22px} .dock .slot,.dock .shopbtn{height:54px} .app,#game{gap:9px} } @media(max-width:380px){ .mode,.mode-toggle__btn{font-size:12.5px} .stat .val,.stat__value{font-size:20px} } @media(prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} .blob{display:none} } /* ===================================================================== COLOURBLIND-SAFE PALETTES (Comfort & Access) --------------------------------------------------------------------- Additive + opt-in. When the user has no palette preference the accessibility-game-head partial stamps NOTHING and these rules never match, so the board renders byte-for-byte as today. When palette is set, we remap ONLY the per-type tile-well colour vars (--wN-1 light, --wN-2 mid, --wN-r ring) to a colourblind-safe set built on the Okabe–Ito / Wong palette, keeping all 8 categories maximally distinct for that deficiency. Each remap also lightly tints the ring var so the accent stays legible. The sprites (Egg/Seashell/Fish per type) are an independent, always-on shape cue — colour is the secondary signal — so distinctness never relies on hue alone. Theme overrides above only set chrome tokens, not --wN-*, so palette wins for the tiles. None of this is read by gameplay/RNG/scoring — visuals only. */ /* Deuteranopia (red–green): lean on blue / orange / yellow / purple / cyan / vermillion; avoid green-vs-red pairings. */ html[data-a11y-palette="deuteranopia"] body.match3{ --w0-1:#fbe2c4; --w0-2:#f4c794; --w0-r:#e69f00; /* 0 orange */ --w1-1:#fcf6c8; --w1-2:#f6ec90; --w1-r:#f0e442; /* 1 yellow */ --w2-1:#d4ecfb; --w2-2:#a9d8f5; --w2-r:#56b4e9; /* 2 sky-blue */ --w3-1:#cfeee2; --w3-2:#9adcc4; --w3-r:#009e73; /* 3 b-green */ --w4-1:#f4d8e7; --w4-2:#e7b2cf; --w4-r:#cc79a7; /* 4 r-purple */ --w5-1:#f6d3bd; --w5-2:#eeb08a; --w5-r:#d55e00; /* 5 vermilln */ --w6-1:#cdddf0; --w6-2:#9bbbe1; --w6-r:#0072b2; /* 6 blue */ --w7-1:#dadada; --w7-2:#b4b4b4; --w7-r:#3a3a3a; /* 7 dark-grey*/ } /* Protanopia: same red–green strategy as deuteranopia. */ html[data-a11y-palette="protanopia"] body.match3{ --w0-1:#fbe2c4; --w0-2:#f4c794; --w0-r:#e69f00; /* 0 orange */ --w1-1:#fcf6c8; --w1-2:#f6ec90; --w1-r:#f0e442; /* 1 yellow */ --w2-1:#d4ecfb; --w2-2:#a9d8f5; --w2-r:#56b4e9; /* 2 sky-blue */ --w3-1:#cfeee2; --w3-2:#9adcc4; --w3-r:#009e73; /* 3 b-green */ --w4-1:#f4d8e7; --w4-2:#e7b2cf; --w4-r:#cc79a7; /* 4 r-purple */ --w5-1:#f6d3bd; --w5-2:#eeb08a; --w5-r:#d55e00; /* 5 vermilln */ --w6-1:#cdddf0; --w6-2:#9bbbe1; --w6-r:#0072b2; /* 6 blue */ --w7-1:#dadada; --w7-2:#b4b4b4; --w7-r:#3a3a3a; /* 7 dark-grey*/ } /* Tritanopia (blue–yellow): avoid blue-vs-yellow; lean on vermillion / green / orange / purple / pink / teal. */ html[data-a11y-palette="tritanopia"] body.match3{ --w0-1:#f6d3bd; --w0-2:#eeb08a; --w0-r:#d55e00; /* 0 vermilln */ --w1-1:#cfeee2; --w1-2:#9adcc4; --w1-r:#009e73; /* 1 b-green */ --w2-1:#cddff0; --w2-2:#9bc0e1; --w2-r:#0072b2; /* 2 blue */ --w3-1:#f4d8e7; --w3-2:#e7b2cf; --w3-r:#cc79a7; /* 3 r-purple */ --w4-1:#fbddc9; --w4-2:#f3b994; --w4-r:#e69f00; /* 4 orange */ --w5-1:#f6c9c4; --w5-2:#ec9b92; --w5-r:#c8443a; /* 5 red */ --w6-1:#d4ecfb; --w6-2:#a9d8f5; --w6-r:#56b4e9; /* 6 sky-blue */ --w7-1:#dadada; --w7-2:#b4b4b4; --w7-r:#3a3a3a; /* 7 dark-grey*/ }