/* 2048 Candy Pop. Glossy candy tiles, a frosted candy-box board, springy bounces.
   Everything is scoped to .g48-stage / .g48 so it leaves site.css alone. */
.g48-stage {
  --c-bg1: #ffe1f0; --c-bg2: #dff4ff; --c-bg3: #fff1cf; --dot: rgba(255,255,255,.75);
  --ink: #4a2340; --ink2: #8a5a7c; --board: #f6a9cb; --board-edge: #e486b0; --cell: rgba(255,255,255,.48);
  --pill: #ffffff; --shadow: 0 18px 40px -16px rgba(140,40,100,.45);
  --t2: #fff6e6; --f2: #8a4b2a; --t4: #ffd2e6; --f4: #a3245b; --t8: #ffb347; --f8: #5e2600; --t16: #ffe066; --f16: #5e4100;
  --t32: #9be15d; --f32: #1d4700; --t64: #ff5fa2; --f64: #ffffff; --t128: #4f86ff; --f128: #ffffff; --t256: #9b5de5; --f256: #ffffff;
  --t512: #e63946; --f512: #ffffff; --t1024: #10b3a3; --f1024: #ffffff; --tbig: #3d2a5c; --fbig: #ffffff;
  --ov: rgba(255,240,248,.86); --btn: #ff4f9a; --btn-edge: #c92f72; --btn2: #ffffff; --btn2-edge: #e9b3cf;
  --cp: "Titan One", "Arial Rounded MT Bold", system-ui, sans-serif;
  position: relative; margin-top: -28px; padding: 22px 0 30px; color: var(--ink);
  background-image: radial-gradient(var(--dot) 2.5px, transparent 3px), radial-gradient(var(--dot) 2.5px, transparent 3px);
  background-size: 34px 34px; background-position: 0 0, 17px 17px;
  border-image: linear-gradient(120deg, var(--c-bg1), var(--c-bg2) 55%, var(--c-bg3)) fill 0 / 0 / 0 100vmax;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g48-stage {
  --c-bg1: #2b1638; --c-bg2: #1a1834; --c-bg3: #2d1a2c; --dot: rgba(255,120,200,.12);
  --ink: #ffe6f4; --ink2: #d7a9c8; --board: #4b2a5e; --board-edge: #3a1f4a; --cell: rgba(255,255,255,.08);
  --pill: #3a2248; --shadow: 0 18px 40px -16px rgba(0,0,0,.7);
  --t2: #f7e9d7; --t4: #ffc4de; --ov: rgba(36,18,46,.88); --btn2: #3a2248; --btn2-edge: #241330; } }
:root[data-theme="dark"] .g48-stage {
  --c-bg1: #2b1638; --c-bg2: #1a1834; --c-bg3: #2d1a2c; --dot: rgba(255,120,200,.12);
  --ink: #ffe6f4; --ink2: #d7a9c8; --board: #4b2a5e; --board-edge: #3a1f4a; --cell: rgba(255,255,255,.08);
  --pill: #3a2248; --shadow: 0 18px 40px -16px rgba(0,0,0,.7);
  --t2: #f7e9d7; --t4: #ffc4de; --ov: rgba(36,18,46,.88); --btn2: #3a2248; --btn2-edge: #241330; }

.page-head h1 { font-family: "Titan One", system-ui, sans-serif; font-weight: 400; letter-spacing: .01em; color: #ff4f9a; }
.page-head .eyebrow { color: #c92f72; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page-head .eyebrow { color: #ff8fc0; } }
:root[data-theme="dark"] .page-head .eyebrow { color: #ff8fc0; }
.backlink { font-weight: 800; font-size: 14px; text-decoration: none; justify-self: start; }
.backlink:hover { text-decoration: underline; }

/* Hero: candy wordmark and two photo "candy bubbles" */
.g48-hero { max-width: 560px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g48-mark { width: min(300px, 62%); height: auto; display: block; overflow: visible; }
.g48-mark text { font-family: var(--cp); }
.g48-mark .sh { fill: var(--board-edge); }
.g48-mark .d { stroke: #fff; stroke-width: 7px; paint-order: stroke; stroke-linejoin: round; }
.g48-mark .rib { fill: var(--ink); }
.g48-mark .ribt { fill: var(--c-bg1); font-size: 15px; letter-spacing: .22em; }
.g48-mark .spr { animation: g48twinkle 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.g48-mark .spr:nth-of-type(2n) { animation-delay: -1.2s; }
@keyframes g48twinkle { 50% { transform: rotate(40deg) scale(.7); opacity: .6; } }
.g48-bubbles { position: relative; width: 150px; height: 112px; flex: none; }
.g48-bub { position: absolute; margin: 0; border-radius: 50%; overflow: hidden; background: var(--pill); box-shadow: 0 0 0 5px #fff, 0 10px 22px -8px rgba(140,40,100,.55); }
.g48-bub.a { width: 104px; height: 104px; right: 0; top: 0; }
.g48-bub.b { width: 66px; height: 66px; left: 0; bottom: 0; animation: g48float 4s ease-in-out infinite; }
@keyframes g48float { 50% { transform: translateY(-6px) rotate(-4deg); } }
.g48-bub svg, .g48-bub img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g48-bub img { opacity: 0; transform: scale(1.15); transition: opacity .6s, transform .6s cubic-bezier(.3,1.5,.6,1); }
.g48-bub.has img { opacity: 1; transform: none; }
.g48-bub::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 32% 22%, rgba(255,255,255,.75), transparent 34%); pointer-events: none; }
.g48-credits { max-width: 480px; margin: 12px auto 0; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--ink2); }
.g48-credits:empty { display: none; }
.g48-credits a { color: inherit; }

.g48 { max-width: 480px; margin: 0 auto; display: grid; gap: 16px; --gap: 12px; }
.g48 .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.g48 .scores { display: flex; gap: 10px; }
.g48 .sbox { position: relative; min-width: 92px; padding: 6px 16px 7px; border-radius: 999px; text-align: center; color: #fff;
  background: repeating-linear-gradient(-45deg, #ff5fa2 0 10px, #ff7fb6 10px 20px); box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 3px 0 #c92f72; }
.g48 .sbox + .sbox { background: repeating-linear-gradient(-45deg, #4f86ff 0 10px, #6f9cff 10px 20px); box-shadow: inset 0 -4px 0 rgba(0,0,0,.14), 0 3px 0 #2f5fd0; }
.g48 .sbox span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; opacity: .95; }
.g48 .sbox b { display: block; font-family: var(--cp); font-weight: 400; font-size: 25px; line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.g48 .plus { position: absolute; left: 0; right: 0; top: 14px; font-family: var(--cp); font-size: 22px; color: #ff4f9a; -webkit-text-stroke: 1px #fff; pointer-events: none; animation: g48plus .8s cubic-bezier(.2,1.4,.5,1) forwards; }
@keyframes g48plus { from { opacity: 1; transform: translateY(0) scale(.6); } 30% { transform: translateY(-14px) scale(1.2); } to { opacity: 0; transform: translateY(-40px) scale(1); } }
.g48 .btns { display: flex; gap: 8px; }
.g48 .btn { border-radius: 999px; font-family: var(--cp); font-weight: 400; letter-spacing: .02em; min-height: 46px; border: 0; transition: transform .1s, box-shadow .1s; }
.g48 .btn.primary { background: var(--btn); color: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 4px 0 var(--btn-edge); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.g48 .btn.ghost { background: var(--btn2); color: var(--ink); box-shadow: 0 4px 0 var(--btn2-edge); }
.g48 .btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.g48 .btn:hover:not(:disabled) { filter: brightness(1.06); }
.g48 .btn:disabled { opacity: .45; cursor: default; }

.g48 .board { position: relative; width: 100%; aspect-ratio: 1; background: var(--board); border-radius: 28px;
  box-shadow: inset 0 0 0 6px var(--board-edge), inset 0 8px 18px rgba(0,0,0,.08), 0 0 0 6px rgba(255,255,255,.85), var(--shadow);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; container-type: inline-size; overflow: hidden; }
.g48 .board:focus-visible { outline: 4px solid #ff4f9a; outline-offset: 8px; }
.g48 .cell, .g48 .tile { position: absolute; left: 0; top: 0; width: calc((100% - 5 * var(--gap)) / 4); height: calc((100% - 5 * var(--gap)) / 4);
  transform: translate(calc(var(--gap) + var(--x) * (100% + var(--gap))), calc(var(--gap) + var(--y) * (100% + var(--gap)))); }
.g48 .cell { background: var(--cell); border-radius: 30%; box-shadow: inset 0 3px 6px rgba(0,0,0,.08); }
.g48 .tile { transition: transform .12s cubic-bezier(.3,1.25,.6,1); z-index: 1; }
.g48 .tile.merged { z-index: 2; }
.g48 .tile .in { width: 100%; height: 100%; border-radius: 30%; display: grid; place-items: center; font-family: var(--cp); font-weight: 400;
  font-size: 12cqw; line-height: 1; font-variant-numeric: tabular-nums; background-color: var(--t2); color: var(--f2);
  background-image: radial-gradient(ellipse 55% 40% at 32% 22%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%), linear-gradient(rgba(255,255,255,.18), rgba(0,0,0,.08));
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.13), inset 0 2px 0 rgba(255,255,255,.6), 0 4px 0 rgba(90,20,60,.16); }
.g48 .tile.d3 .in { font-size: 9.5cqw; } .g48 .tile.d4 .in { font-size: 7.6cqw; } .g48 .tile.d5 .in { font-size: 6.2cqw; }
.g48 .v4 .in { background-color: var(--t4); color: var(--f4); } .g48 .v8 .in { background-color: var(--t8); color: var(--f8); }
.g48 .v16 .in { background-color: var(--t16); color: var(--f16); } .g48 .v32 .in { background-color: var(--t32); color: var(--f32); }
.g48 .v64 .in, .g48 .v128 .in, .g48 .v256 .in, .g48 .v512 .in, .g48 .v1024 .in, .g48 .v2048 .in, .g48 .vbig .in { text-shadow: 0 2px 0 rgba(0,0,0,.28); }
.g48 .v64 .in { background-color: var(--t64); color: var(--f64); } .g48 .v128 .in { background-color: var(--t128); color: var(--f128); }
.g48 .v256 .in { background-color: var(--t256); color: var(--f256); } .g48 .v512 .in { background-color: var(--t512); color: var(--f512); }
.g48 .v1024 .in { background-color: var(--t1024); color: var(--f1024); }
.g48 .v2048 .in { color: #fff; background-image: radial-gradient(ellipse 55% 40% at 32% 22%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%), linear-gradient(135deg, #ff5fa2, #ffb347 35%, #9be15d 65%, #4f86ff);
  background-size: 100% 100%, 200% 200%; animation: g48rainbow 3s linear infinite; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15), 0 0 0 4px #fff, 0 0 24px rgba(255,95,162,.7); }
@keyframes g48rainbow { 50% { background-position: 0 0, 100% 100%; } }
.g48 .vbig .in { background-color: var(--tbig); color: var(--fbig); }
/* Stripes on mid-value candies, like a candy cane twist */
.g48 .v128 .in, .g48 .v512 .in { background-image: radial-gradient(ellipse 55% 40% at 32% 22%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%), repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 8px, transparent 8px 16px); }
.g48 .tile.new .in { animation: g48new .34s cubic-bezier(.2,1.8,.4,1) .1s backwards; }
.g48 .tile.merged .in { animation: g48pop .36s ease-out .1s backwards; }
@keyframes g48new { from { transform: scale(0) rotate(-20deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes g48pop { 0% { transform: scale(.6); opacity: 0; } 35% { transform: scale(1.22, .82); opacity: 1; } 60% { transform: scale(.9, 1.12); } 80% { transform: scale(1.04, .97); } 100% { transform: scale(1); } }

.g48 .overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; text-align: center;
  background: var(--ov); border-radius: 28px; animation: g48fade .3s ease-out; color: var(--ink); }
.g48 .overlay h2 { font-family: var(--cp); font-weight: 400; font-size: clamp(30px, 10cqw, 50px); color: #ff4f9a; -webkit-text-stroke: 0; text-shadow: 0 4px 0 rgba(201,47,114,.25); animation: g48bounce .6s cubic-bezier(.2,1.8,.4,1); }
.g48 .overlay p { margin: 0; color: var(--ink2); font-weight: 800; }
.g48 .overlay .btns { flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.g48 .overlay::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 28px;
  background-image: radial-gradient(circle, #ff5fa2 3px, transparent 3.5px), radial-gradient(circle, #4f86ff 3px, transparent 3.5px), radial-gradient(circle, #9be15d 3px, transparent 3.5px), radial-gradient(circle, #ffb347 3px, transparent 3.5px);
  background-size: 90px 70px, 110px 90px, 70px 110px, 130px 80px; background-position: 10px 5px, 40px 30px, 60px 12px, 25px 50px; opacity: .55; animation: g48fall 6s linear infinite; }
@keyframes g48fall { to { background-position: 10px 75px, 40px 120px, 60px 122px, 25px 130px; } }
@keyframes g48fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g48bounce { from { transform: scale(.3); } to { transform: scale(1); } }

.g48 .hint { text-align: center; font-size: 14px; color: var(--ink2); margin: 0; font-weight: 700; }
.g48 kbd { font: inherit; font-weight: 800; font-size: 12px; border-radius: 8px; padding: 0 7px; background: var(--pill); color: var(--ink); box-shadow: 0 2px 0 var(--btn2-edge); }
.g48 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Guide: pastel and plain */
.guide#guide { background: #fff3f9; border: 3px dashed #f6a9cb; }
.guide#guide h2, .guide#guide h3 { font-family: "Titan One", system-ui, sans-serif; font-weight: 400; color: #c92f72; }
.guide#guide .faq h3 { color: inherit; font-family: var(--font-head); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guide#guide { background: #24172c; border-color: #4b2a5e; } :root:not([data-theme="light"]) .guide#guide h2, :root:not([data-theme="light"]) .guide#guide > h3 { color: #ff8fc0; } }
:root[data-theme="dark"] .guide#guide { background: #24172c; border-color: #4b2a5e; }
:root[data-theme="dark"] .guide#guide h2, :root[data-theme="dark"] .guide#guide > h3 { color: #ff8fc0; }

@media (max-width: 480px) {
  .g48 { --gap: 8px; }
  .g48 .top { flex-wrap: nowrap; gap: 8px; }
  .g48 .scores, .g48 .top > .btns { gap: 6px; }
  .g48 .sbox { min-width: 62px; padding: 5px 10px 6px; }
  .g48 .sbox b { font-size: 20px; }
  .g48 .top .btn { padding: 8px 12px; font-size: 14px; min-height: 44px; white-space: nowrap; }
  .g48 .board, .g48 .overlay, .g48 .overlay::before { border-radius: 20px; }
  .g48-bubbles { width: 118px; height: 90px; }
  .g48-bub.a { width: 82px; height: 82px; } .g48-bub.b { width: 52px; height: 52px; }
}
@media (max-width: 359px) { .g48 .top { flex-wrap: wrap; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .g48 .tile { transition: none; } .g48-stage *, .g48-stage *::before { animation: none !important; } }