:root{color-scheme: light;font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif;--cn_surface: #f8fafc;--cn_ink: #172033;--cn_muted: #5f6b7d;--cn_border: #cbd5e1;--cn_focus: #122a63;--cn_board_gap: clamp(1px, 0.28vw, 3px);}*{box-sizing: border-box;}body{margin: 0;min-width: 0;min-height: 100vh;color: var(--cn_ink);background: radial-gradient(circle at 50% -10%, #dff4ff 0, transparent 42rem), linear-gradient(180deg, #f8fbff, #edf2f7);}button, select{font: inherit;}button, select{min-height: 2.5rem;}button{cursor: pointer;}button:focus-visible, select:focus-visible, .cls_cell:focus-visible{outline: 3px solid var(--cn_focus);outline-offset: 2px;}.cls_app{width: min(100% - 1rem, 64rem);margin: 0 auto;padding: max(0.6rem, env(safe-area-inset-top)) 0 max(1rem, env(safe-area-inset-bottom));}.cls_header, .cls_toolbar, .cls_stats, .cls_preview_bar{display: flex;align-items: center;}.cls_header{justify-content: space-between;gap: 1rem;margin-bottom: 0.35rem;padding-inline: 0.25rem;}.cls_header_actions{display: flex;gap: 0.35rem;}.cls_mode_switch{display: flex;gap: 0.15rem;padding: 0.15rem;border-radius: 0.7rem;background: rgb(203 213 225 / 65%);}.cls_mode_switch button{min-height: 1.9rem;padding: 0.25rem 0.65rem;border: 0;border-radius: 0.55rem;color: var(--cn_muted);background: transparent;font-size: 0.82rem;font-weight: 800;}.cls_mode_switch button.cls_active{color: var(--cn_ink);background: #fff;box-shadow: 0 1px 3px rgb(15 23 42 / 18%);}h1, h2, p{margin-top: 0;}h1{margin-bottom: 0;font-size: clamp(1.45rem, 4.5vw, 2rem);letter-spacing: -0.04em;}.cls_game_surface{padding: clamp(0.35rem, 1.5vw, 0.8rem);overflow: clip;border: 1px solid rgb(148 163 184 / 55%);border-radius: 1.1rem;background: rgb(255 255 255 / 88%);box-shadow: 0 1.1rem 3rem rgb(36 55 80 / 12%);}.cls_mode_status{margin: 0 0 0.25rem;color: var(--cn_muted);font-size: 0.78rem;font-weight: 750;text-align: center;}.cls_toolbar{justify-content: center;gap: 0.5rem;flex-wrap: wrap;margin-top: 0.4rem;}.cls_primary_button, .cls_icon_button, .cls_toolbar > button, select, .cls_dialog button{border: 1px solid var(--cn_border);border-radius: 0.72rem;padding: 0.55rem 0.85rem;color: var(--cn_ink);background: #fff;font-weight: 700;}.cls_icon_button{width: 2.25rem;min-height: 2.25rem;padding: 0;border-radius: 50%;font-size: 1.05rem;}.cls_primary_button{color: #fff;border-color: #244aa5;background: linear-gradient(145deg, #315fc8, #24489b);}.cls_difficulty_label{display: flex;align-items: center;gap: 0.45rem;color: var(--cn_muted);font-size: 0.86rem;font-weight: 700;}.cls_difficulty_label[hidden]{display: none;}.cls_daily_difficulty{margin: 0;color: var(--cn_muted);font-size: 0.86rem;font-weight: 700;}.cls_daily_difficulty[hidden]{display: none;}.cls_stats{justify-content: center;gap: clamp(0.45rem, 3vw, 1.4rem);margin: 0 0 0.35rem;}.cls_stats div{min-width: 4.1rem;text-align: center;}.cls_stats dt{color: var(--cn_muted);font-size: 0.7rem;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;}.cls_stats dd{margin: -0.05rem 0 0;font-size: clamp(1rem, 3.5vw, 1.3rem);font-weight: 800;font-variant-numeric: tabular-nums;}.cls_preview_bar{position: relative;justify-content: center;min-height: 1.45rem;color: var(--cn_muted);font-size: 0.88rem;font-weight: 650;text-align: center;}.cls_preview_bar p{margin-bottom: 0;}.cls_score_feedback{position: absolute;right: 0.5rem;color: #1d7a50;font-size: 1.05rem;font-weight: 900;opacity: 0;transform: translateY(0.25rem);}.cls_score_feedback.cls_pop{animation: fn_score_pop 420ms ease-out;}.cls_board{--gv_columns: 16;--gv_rows: 12;display: grid;grid-template-columns: repeat(var(--gv_columns), minmax(0, 1fr));grid-template-rows: repeat(var(--gv_rows), minmax(0, 1fr));gap: var(--cn_board_gap);width: 100%;aspect-ratio: var(--gv_columns) / var(--gv_rows);padding: clamp(3px, 0.8vw, 8px);overflow: hidden;border: 1px solid #334155;border-radius: 0.8rem;background: linear-gradient(145deg, #26364f, #172033);touch-action: manipulation;}.cls_cell{position: relative;display: grid;min-width: 0;min-height: 0;width: 100%;height: 100%;padding: 8%;place-items: center;overflow: visible;border: 0;border-radius: 50%;color: rgb(255 255 255 / 88%);background: radial-gradient(circle at 31% 23%, rgb(255 255 255 / 92%) 0 4%, rgb(255 255 255 / 45%) 5% 11%, transparent 13%), radial-gradient(circle at 36% 29%, var(--cn_ball_light) 0 12%, var(--cn_ball_color) 46%, var(--cn_ball_deep) 78%, var(--cn_ball_edge) 100%);box-shadow: inset 0.08em 0.1em 0.13em rgb(255 255 255 / 24%), inset -0.12em -0.18em 0.2em rgb(0 0 0 / 28%), 0 0.13em 0.2em rgb(0 0 0 / 38%);transition: transform 110ms ease, filter 110ms ease, opacity 90ms ease;}.cls_cell[data-color="0"]{visibility: hidden;pointer-events: none;}.cls_cell[data-color="1"]{--cn_ball_light: #ff8a91;--cn_ball_color: #e34b57;--cn_ball_deep: #a91f2d;--cn_ball_edge: #68131d;}.cls_cell[data-color="2"]{--cn_ball_light: #64dbb5;--cn_ball_color: #229978;--cn_ball_deep: #11634f;--cn_ball_edge: #093d32;}.cls_cell[data-color="3"]{--cn_ball_light: #79b8ff;--cn_ball_color: #377fd5;--cn_ball_deep: #24549b;--cn_ball_edge: #183563;}.cls_cell[data-color="4"]{--cn_ball_light: #ffd477;--cn_ball_color: #d89520;--cn_ball_deep: #98610d;--cn_ball_edge: #593705;}.cls_cell[data-color="5"]{--cn_ball_light: #c5a0f3;--cn_ball_color: #895fc1;--cn_ball_deep: #5d398e;--cn_ball_edge: #392257;}.cls_symbol{font-size: clamp(0.61rem, 2.05vw, 1.18rem);line-height: 1;opacity: 0.88;font-weight: 700;transform: translateY(1%);text-shadow: 0 1px 2px rgb(0 0 0 / 62%);}.cls_symbols_off .cls_symbol{display: none;}.cls_cell.cls_previewed{z-index: 2;filter: brightness(1.14) saturate(1.08);transform: translateY(-2%) scale(1.07);box-shadow: 0 0 0 1px #fff, 0 0 0 3px #172033, 0 0.2em 0.38em rgb(0 0 0 / 48%);}.cls_cell.cls_selected{box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f4b942, 0 0.2em 0.42em rgb(0 0 0 / 52%);animation: fn_selected_pulse 760ms ease-in-out infinite alternate;}.cls_cell.cls_removing{animation: fn_ball_pop 100ms cubic-bezier(.2,.8,.25,1) forwards;}.cls_board.cls_settling .cls_cell{animation: fn_settle 150ms ease-out;}.cls_board[aria-disabled="true"] .cls_cell{cursor: wait;}.cls_touch_hint{margin: -0.05rem 0 0.25rem;color: var(--cn_muted);font-size: 0.75rem;text-align: center;}.cls_touch_hint[hidden]{display: none;}.cls_dialog_overlay{position: fixed;z-index: 20;inset: 0;display: grid;padding: 1rem;place-items: center;background: rgb(15 23 42 / 64%);backdrop-filter: blur(4px);}.cls_dialog_overlay[hidden]{display: none;}.cls_dialog{width: min(100%, 31rem);max-height: min(90vh, 40rem);overflow: auto;padding: clamp(1rem, 4vw, 1.5rem);border-radius: 1rem;background: #fff;box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 28%);}.cls_dialog h2{margin-bottom: 0.65rem;}.cls_dialog p{color: var(--cn_muted);line-height: 1.55;}.cls_result_best{font-weight: 800;color: #1d5f46 !important;}.cls_result_run_type{display: inline-block;margin-bottom: 0.35rem;padding: 0.2rem 0.55rem;border-radius: 999px;color: #334155 !important;background: #e2e8f0;font-size: 0.78rem;font-weight: 850;}.cls_dialog_actions{display: flex;gap: 0.65rem;flex-wrap: wrap;}.cls_settings_dialog{width: min(100%, 26rem);}.cls_stats_dialog{width: min(100%, 30rem);}.cls_stats_dialog h3{margin: 0.9rem 0 0.35rem;}.cls_stats_summary{margin: 0 0 0.55rem;}.cls_stats_breakdown, .cls_stats_grid{display: grid;grid-template-columns: repeat(3, 1fr);gap: 0.5rem;margin: 0 0 0.8rem;}.cls_stats_grid{grid-template-columns: repeat(4, 1fr);}.cls_stats_breakdown > div, .cls_stats_grid > div{padding: 0.55rem 0.35rem;border-radius: 0.65rem;background: #f1f5f9;text-align: center;}.cls_stats_breakdown strong, .cls_stats_grid dt{display: block;color: var(--cn_muted);font-size: 0.72rem;}.cls_stats_breakdown span, .cls_stats_grid dd{display: block;margin: 0.2rem 0 0;font-weight: 850;}.cls_setting_row{display: flex;align-items: center;justify-content: space-between;gap: 1rem;margin: 0.75rem 0 1.2rem;padding: 0.85rem;border-radius: 0.75rem;background: #f1f5f9;cursor: pointer;}.cls_setting_row span{display: grid;gap: 0.2rem;}.cls_setting_row small{color: var(--cn_muted);line-height: 1.35;}.cls_setting_row input{width: 1.35rem;height: 1.35rem;accent-color: #315fc8;}.cls_setting_row.cls_volume_row input{width: min(12rem, 48vw);height: auto;}.cls_result_stats{display: flex;gap: 1rem;margin: 1rem 0;}.cls_result_stats div{flex: 1;padding: 0.65rem;border-radius: 0.65rem;background: #f1f5f9;text-align: center;}.cls_result_stats dt{color: var(--cn_muted);font-size: 0.72rem;font-weight: 700;text-transform: uppercase;}.cls_result_stats dd{margin: 0.2rem 0 0;font-size: 1.25rem;font-weight: 850;}.cls_visually_hidden{position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0, 0, 0, 0) !important;white-space: nowrap !important;border: 0 !important;}@keyframes fn_selected_pulse {to { filter: brightness(1.23) saturate(1.1);transform: translateY(-3%) scale(1.09);} }@keyframes fn_ball_pop {35% { filter: brightness(1.5);transform: scale(1.1);} 100%{filter: brightness(1.25);opacity: 0;transform: scale(0.18);} }@keyframes fn_settle {from { transform: translateY(-18%) scale(0.92);opacity: 0.75;} }@keyframes fn_score_pop {0% { opacity: 0;transform: translateY(0.35rem);} 30%{opacity: 1;} 100%{opacity: 0;transform: translateY(-0.55rem);} }@media (hover: hover) and (pointer: fine) {.cls_touch_hint { display: none;}}@media (max-width: 34rem) {.cls_app { width: 100%;padding-top: 0.2rem;}  .cls_header{margin-bottom: 0.2rem;padding-inline: 0.55rem;}  .cls_header{gap: 0.35rem;}  .cls_mode_switch button{padding-inline: 0.48rem;}  .cls_game_surface{padding: 0.25rem 0.3rem 0.45rem;border-inline: 0;border-radius: 0.7rem;}  .cls_toolbar{padding-inline: 0.1rem;}  .cls_toolbar > button{flex: 1 1 6rem;}  .cls_difficulty_label{flex: 1 1 100%;justify-content: center;}  .cls_difficulty_label select{flex: 1;max-width: 12.5rem;}  .cls_board{border-radius: 0.45rem;}  .cls_symbol{font-size: clamp(0.83rem, 2.8vw, 1.4rem);}  .cls_header_actions{gap: 0.2rem;}  .cls_header_actions button{padding-inline: 0.45rem;}  .cls_stats_grid{grid-template-columns: repeat(2, 1fr);}}@media (prefers-reduced-motion: reduce) {*, *::before, *::after { scroll-behavior: auto !important;animation-duration: 1ms !important;animation-iteration-count: 1 !important;transition-duration: 1ms !important;}}