.cf-page { --cf-peach: #68edff; --cf-muted: #a5adca; --cf-border: #343953; --cf-game-width: clamp(340px, calc(100dvh - 365px), 590px); max-width: calc(var(--cf-game-width) + 303px); margin: 0 auto; color: #eef5ff; }
.content-page:has(.cf-page) { padding-top: 24px; padding-bottom: 18px; }
.cf-page [hidden] { display: none !important; }
.cf-page button { font: inherit; cursor: pointer; }
.cf-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.cf-eyebrow { font-size: 9px; letter-spacing: 2.1px; font-weight: 600; color: #bca9ba; margin: 0 0 9px; }
.cf-eyebrow span { color: var(--cf-peach); margin-right: 7px; }
.cf-heading h1 { font-size: clamp(34px, 4.5vw, 48px); letter-spacing: -2px; line-height: 1; font-weight: 750; margin: 0; }
.cf-heading em, .cf-intro em { font-family: Georgia, serif; font-weight: 400; color: var(--cf-peach); }
.cf-heading h1 > span { font-size: 23px; vertical-align: top; margin-left: 13px; color: #ff4ed0; }
.cf-heading > a { font-size: 11px; text-decoration: none; color: #c7b8c9; white-space: nowrap; }
.cf-heading > a:hover { color: var(--cf-peach); }
.cf-layout { display: grid; grid-template-columns: minmax(0, var(--cf-game-width)) 265px; gap: 38px; align-items: start; }
.cf-game { min-width: 0; }
.cf-hud { padding: 15px 18px 14px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 34px; align-items: center; gap: 12px; background: #1b2036; border: 1px solid #3d4666; border-bottom: 0; border-radius: 16px 16px 0 0; }
.cf-hud > div { min-width: 0; }
.cf-hud > div > span { display: block; color: #c0adbf; font-size: 9px; letter-spacing: 1.8px; margin-bottom: 4px; }
.cf-hud strong { display: block; font-size: clamp(20px, 3vw, 29px); letter-spacing: -.7px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cf-hud .cf-score strong { color: var(--cf-peach); font-size: clamp(27px, 4vw, 37px); }
.cf-best i { color: #e4bb78; font-style: normal; font-size: 14px; }
.cf-icon-button { width: 34px; height: 34px; border: 1px solid #655166; color: #cdbccf; background: transparent; border-radius: 50%; padding: 7px; }
.cf-icon-button:hover, .cf-icon-button[aria-pressed="true"] { color: var(--cf-peach); border-color: var(--cf-peach); }
.cf-icon-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cf-board-wrap { position: relative; padding: 12px; background: #13192c; border: 1px solid #3d4666; border-top: 0; overflow: hidden; }
.cf-board { position: relative; width: 100%; aspect-ratio: 1; border-radius: 5px; background: repeating-conic-gradient(#202840 0% 25%, #1b2239 0% 50%) 0 0 / 22.22222% 22.22222%; isolation: isolate; touch-action: pan-y; }
.cf-tile { position: absolute; left: 0; top: 0; width: 11.111111%; height: 11.111111%; background: transparent; border: 0; padding: 0; display: grid; place-items: center; transition: transform .28s cubic-bezier(.22,.68,.3,1.12); touch-action: none; -webkit-tap-highlight-color: transparent; z-index: 1; }
.cf-tile:focus { outline: none; }
.cf-tile:focus-visible::after, .cf-tile.cf-selected::after { content: ''; position: absolute; inset: 3%; border-radius: 9px; border: 2px solid #e0fbff; }
.cf-tile:focus-visible::after { border-style: dashed; }
.cf-tile:hover .cf-candy { scale: 1.08; }
.cf-candy { position: relative; display: grid; place-items: center; width: 74%; height: 74%; background: radial-gradient(ellipse at 28% 15%, var(--cf-light) 0%, var(--cf-color) 44%, var(--cf-deep) 100%); border: 0; box-shadow: inset -4px -5px 5px #0005, inset 2px 3px 4px #ffffff59; transition: scale .14s; }
.cf-candy::before { content: ''; position: absolute; top: 12%; left: 18%; width: 42%; height: 23%; border-radius: 50%; background: linear-gradient(160deg, #ffffffa6, var(--cf-light)); transform: rotate(-25deg); }
.cf-candy::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(130deg, #ffffff0d, transparent 50%, #00000026); pointer-events: none; }
/* Hue and silhouette are independent recognition cues, including on small screens. */
.cf-c0, .cf-hue0 { --cf-light: #79f5ff; --cf-color: #00dfff; --cf-deep: #008bd4; }
.cf-c1, .cf-hue1 { --cf-light: #ff8bdf; --cf-color: #ff23bf; --cf-deep: #c90084; }
.cf-c2, .cf-hue2 { --cf-light: #fbff8b; --cf-color: #eeff24; --cf-deep: #bbba07; }
.cf-c3, .cf-hue3 { --cf-light: #b4ff7b; --cf-color: #59ff2d; --cf-deep: #16ae32; }
.cf-c4, .cf-hue4 { --cf-light: #c193ff; --cf-color: #9252ff; --cf-deep: #571bd4; }
.cf-c5, .cf-hue5 { --cf-light: #d4b293; --cf-color: #b98250; --cf-deep: #8b623c; }
.cf-c0 { border-radius: 50%; }
.cf-c1 { width: 90%; height: 46%; border-radius: 48%; rotate: -30deg; }
.cf-c2 { width: 68%; height: 68%; border-radius: 24% 66% 54% 66%; rotate: 45deg; }
.cf-c3 { width: 70%; height: 70%; border-radius: 26%; }
.cf-c3::after { background: linear-gradient(90deg, transparent 0 72%, #00000029 74%), linear-gradient(0deg, transparent 0 76%, #ffffff1c 78%); }
.cf-c4 { width: 60%; height: 60%; border-radius: 23%; rotate: 45deg; }
.cf-c5 { width: 90%; height: 42%; border-radius: 50%; }
.cf-candy i { display: none; position: relative; font-style: normal; line-height: 1; font-size: clamp(14px, 2.2vw, 27px); color: white; text-shadow: 0 1px 1px #0007; z-index: 1; }
.cf-c1 i { rotate: 30deg; }
.cf-c2 i, .cf-c4 i { rotate: -45deg; }
.cf-special-line, .cf-special-cross, .cf-special-color { box-shadow: inset 0 -3px 2px #0003, inset 0 2px 2px #fffa; }
.cf-special-line { background: repeating-linear-gradient(0deg, transparent 0 22%, #ffffffb3 23% 30%, transparent 31% 45%), radial-gradient(ellipse at 35% 20%, var(--cf-light), var(--cf-color) 40%, var(--cf-deep)); }
.cf-special-cross { background: linear-gradient(0deg, transparent 42%, #ffffffc4 43% 57%, transparent 58%), linear-gradient(90deg, transparent 42%, #ffffffc4 43% 57%, transparent 58%), var(--cf-color); }
.cf-special-color { background: radial-gradient(circle at 30% 30%, #fff 0 5%, transparent 7%), radial-gradient(circle at 65% 60%, #fff 0 6%, transparent 8%), conic-gradient(from 30deg, var(--cf-deep), var(--cf-light), var(--cf-color), var(--cf-deep), var(--cf-light), var(--cf-deep)); }
.cf-power-mark { position: absolute; right: 2%; bottom: 2%; display: grid; place-items: center; width: 36%; height: 36%; min-width: 12px; min-height: 12px; max-width: 19px; max-height: 19px; border-radius: 50%; background: #f1fbff; color: #141a32; box-shadow: 0 1px 3px #050916bb; font: 800 11px/1 "Segoe UI", sans-serif; z-index: 2; pointer-events: none; }
.cf-tile.cf-pop .cf-candy { animation: cf-pop .21s ease-in forwards; }
.cf-tile.cf-hint .cf-candy { animation: cf-hint .7s ease-in-out 3; }
.cf-tile.cf-invalid .cf-candy { animation: cf-invalid .23s ease-in-out; }
.cf-effects { pointer-events: none; position: absolute; inset: 12px; z-index: 5; overflow: hidden; }
.cf-beam { position: absolute; height: 9%; left: 0; right: 0; background: linear-gradient(transparent, #70edff 45%, #fff 50%, #70edff 55%, transparent); animation: cf-beam .36s ease-out forwards; }
.cf-beam.cf-vertical { width: 9%; height: auto; top: 0; bottom: 0; right: auto; background: linear-gradient(90deg, transparent, #70edff 45%, #fff 50%, #70edff 55%, transparent); }
.cf-ring { position: absolute; width: 11.111%; height: 11.111%; border: 3px solid #c0faff; border-radius: 50%; animation: cf-ring .4s ease-out forwards; }
.cf-celebration { position: absolute; inset: 35% 0 auto; text-align: center; pointer-events: none; z-index: 8; color: #fff2dc; font-family: Georgia, serif; font-style: italic; font-size: clamp(29px, 4vw, 48px); text-shadow: 0 2px 1px #141a32; opacity: 0; }
.cf-celebration.cf-show { animation: cf-celebrate .85s ease-out forwards; }
.cf-celebration small { display: block; font: 700 15px "Segoe UI", sans-serif; letter-spacing: 2px; margin-top: 4px; }
.cf-board-footer { display: flex; justify-content: space-between; gap: 12px; font-size: 8px; letter-spacing: 1.6px; color: #a7b5d0; padding: 14px 17px; border: 1px solid #3d4666; border-top: 0; border-radius: 0 0 13px 13px; background: #1b2036; }
.cf-board-footer i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 8px; background: #c2dda7; }
.cf-actions { display: flex; gap: 9px; margin-top: 15px; }
.cf-actions button { background: #211f2a; color: #d6c7d8; border: 1px solid #4b3e50; font-size: 11px; padding: 9px 15px; border-radius: 7px; min-height: 40px; }
.cf-actions button > span { color: var(--cf-peach); font-size: 17px; margin-right: 5px; }
.cf-actions button:last-child { margin-left: auto; }
.cf-actions button:hover { background: #352a3b; border-color: #ba91ac; }
.cf-actions button:disabled { opacity: .45; cursor: wait; }
.cf-status { min-height: 36px; margin: 12px 2px 0; color: #bcaabd; font-size: 11px; line-height: 1.7; }
.cf-sidebar { padding-top: 9px; }
.cf-small-label { display: block; color: #bc9caf; font-size: 9px; letter-spacing: 1.7px; font-weight: 650; }
.cf-intro h2 { margin: 15px 0 13px; font-size: 29px; line-height: 1.3; letter-spacing: -1px; font-weight: 650; }
.cf-intro p, .cf-input-help p { font-size: 12px; line-height: 1.9; color: var(--cf-muted); margin: 0; }
.cf-specials { border-top: 1px solid var(--cf-border); border-bottom: 1px solid var(--cf-border); padding: 24px 0 5px; margin-top: 25px; }
.cf-rule { display: flex; align-items: center; gap: 19px; margin: 23px 0; }
.cf-rule-symbol { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; }
.cf-rule-symbol .cf-candy i { display: block; font-size: 18px; }
.cf-rule h3 { font-size: 10px; font-weight: 400; color: #aa96ac; margin: 0 0 5px; }
.cf-rule h3 b { color: #ead7e9; font-weight: 600; font-size: 12px; }
.cf-rule h3 > span { display: block; margin-top: 4px; color: #f1e4ee; font-size: 13px; font-weight: 600; }
.cf-rule p { font-size: 11px; line-height: 1.75; color: #b0a0b4; margin: 0; }
.cf-input-help { margin-top: 25px; }
.cf-input-help p { margin-top: 10px; font-size: 11px; }
.cf-input-help details { margin-top: 12px; font-size: 10px; color: #c7b0c6; }
.cf-input-help summary { cursor: pointer; }
.cf-save-note { display: flex; gap: 8px; font-size: 10px; color: #a391a8; line-height: 1.8; margin: 23px 0 0; }
.cf-save-note > span { color: #c7adcd; }
.cf-dialog { max-width: min(400px, calc(100% - 32px)); border-radius: 18px; border: 1px solid #866880; background: #2b2232; color: #f6eff7; padding: 28px; text-align: center; }
.cf-dialog::backdrop { background: #0e0a14ba; backdrop-filter: blur(5px); }
.cf-dialog-star { color: var(--cf-peach); font-size: 35px; }
.cf-dialog h2 { font: italic 29px Georgia, serif; margin: 12px 0; }
.cf-dialog p { color: #c8b7ca; font-size: 13px; line-height: 1.8; }
.cf-dialog form > div { display: flex; gap: 10px; margin-top: 25px; }
.cf-dialog button { flex: 1; padding: 11px; background: #443449; border: 1px solid #745a73; border-radius: 7px; color: #f5e9f5; font-size: 12px; }
.cf-dialog button.cf-primary { background: var(--cf-peach); color: #3e263b; border-color: var(--cf-peach); }
@keyframes cf-pop { 35% { scale: 1.25; filter: brightness(1.5); } 100% { scale: .1; opacity: 0; } }
@keyframes cf-hint { 50% { scale: 1.18; filter: brightness(1.4); } }
@keyframes cf-invalid { 30% { translate: -3px; } 70% { translate: 3px; } }
@keyframes cf-beam { from { opacity: 1; scale: .5; } to { opacity: 0; scale: 1.2; } }
@keyframes cf-ring { to { scale: 6; opacity: 0; } }
@keyframes cf-celebrate { 0% { opacity: 0; translate: 0 15px; scale: .8; } 25%, 65% { opacity: 1; translate: 0; scale: 1; } 100% { opacity: 0; translate: 0 -25px; } }
@media (max-width: 850px) { .cf-layout { gap: 24px; grid-template-columns: minmax(0, 1fr) 225px; } .cf-hud { padding: 16px; gap: 10px; } .cf-intro h2 { font-size: 25px; } .cf-rule { gap: 15px; } }
@media (max-width: 650px) { .content-page:has(.cf-page) { padding: 25px 14px; } .cf-page { margin: 0 auto; max-width: 500px; } .cf-layout { grid-template-columns: 1fr; gap: 14px; } .cf-heading { margin-bottom: 23px; } .cf-heading h1 { font-size: 39px; } .cf-heading > a { font-size: 10px; } .cf-hud { padding: 17px; } .cf-hud .cf-score strong { font-size: 32px; } .cf-hud strong { font-size: 24px; } .cf-board-wrap { padding: 8px; } .cf-effects { inset: 8px; } .cf-board-footer { font-size: 7px; letter-spacing: 1px; padding: 12px; } .cf-actions button { padding: 8px 12px; font-size: 11px; } .cf-sidebar { padding-top: 15px; } .cf-intro h2 br { display: none; } .cf-intro h2 em { margin-left: 6px; } .cf-intro h2 { font-size: 27px; } .cf-specials { margin-top: 18px; padding-top: 20px; } .cf-rule { margin: 20px 0; } .cf-rule h3 > span { display: inline; margin-left: 8px; } .cf-specials .cf-rule p { font-size: 12px; } .cf-candy i { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .cf-tile, .cf-candy { transition: none; } .cf-tile.cf-pop .cf-candy { animation: none; opacity: .25; } .cf-tile.cf-hint .cf-candy { animation: none; outline: 2px solid white; outline-offset: 4px; } .cf-tile.cf-invalid .cf-candy, .cf-beam, .cf-ring, .cf-celebration.cf-show { animation: none; } }