:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#172026;background:#eef4f6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--radius: 8px}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px}button{font:inherit}.app{min-height:100vh;display:grid;place-items:center;padding:24px;transition:background .22s ease,color .22s ease}.shell{width:min(1180px,100%);min-height:min(780px,calc(100vh - 48px));display:flex;flex-direction:column;gap:18px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.eyebrow{margin:0 0 6px;color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1{margin:0;color:var(--heading);font-size:clamp(2rem,6vw,4.7rem);line-height:.95;letter-spacing:0}.topbar-actions,.action-row{display:flex;gap:10px}.icon-button,.primary-button,.secondary-button,.text-button,.theme-option,.bubble{border:0;cursor:pointer}.icon-button{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius);color:var(--button-color);background:var(--button-bg);box-shadow:var(--control-shadow);transition:transform .16s ease,background .16s ease}.icon-button:hover,.primary-button:hover,.secondary-button:hover,.theme-option:hover,.text-button:hover{transform:translateY(-1px)}.layout{flex:1;display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:22px;align-items:stretch}.control-panel{display:flex;flex-direction:column;gap:18px;padding:18px;border:1px solid var(--panel-border);border-radius:var(--radius);color:var(--panel-text);background:var(--panel-bg);box-shadow:var(--panel-shadow)}.panel-section{display:grid;gap:12px}.date-chip{width:fit-content;padding:7px 10px;border-radius:var(--radius);color:var(--chip-color);background:var(--chip-bg);font-size:.82rem;font-weight:800}.difficulty{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}.difficulty svg{color:var(--accent)}.difficulty span,.theme-option strong{display:block;color:var(--heading);font-weight:900}.difficulty small{display:block;margin-top:2px;color:var(--muted);line-height:1.35}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{min-height:72px;display:flex;flex-direction:column;justify-content:space-between;padding:12px;border:1px solid var(--stat-border);border-radius:var(--radius);background:var(--stat-bg)}.stat span{color:var(--muted);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:0}.stat strong{color:var(--heading);font-size:1.45rem;line-height:1}.progress-track{width:100%;height:10px;overflow:hidden;border-radius:999px;background:var(--track-bg)}.progress-track span{display:block;height:100%;border-radius:inherit;background:var(--progress-bg);transition:width .22s ease}.theme-picker{display:grid;gap:8px}.theme-option{min-height:50px;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--option-border);border-radius:var(--radius);color:var(--panel-text);background:var(--option-bg);text-align:left;transition:border-color .16s ease,transform .16s ease,background .16s ease}.theme-option.active{border-color:var(--accent);background:var(--option-active-bg)}.theme-swatch{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff80}.theme-swatch.bright{background:radial-gradient(circle at 35% 30%,#ffffff 0 18%,transparent 19%),linear-gradient(135deg,#7bdff2,#f7d486)}.theme-swatch.realistic{background:radial-gradient(circle at 40% 28%,#ffffff 0 14%,transparent 15%),linear-gradient(135deg,#cad7d8,#b29365)}.theme-swatch.arcade{background:radial-gradient(circle at 38% 28%,#ffffff 0 13%,transparent 14%),linear-gradient(135deg,#00e5ff,#ff2f92 55%,#f8f047)}.primary-button,.secondary-button,.text-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius);font-weight:900;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.primary-button,.secondary-button{flex:1;padding:0 14px}.primary-button{color:var(--primary-color);background:var(--primary-bg);box-shadow:var(--primary-shadow)}.secondary-button{color:var(--secondary-color);background:var(--secondary-bg)}.text-button{width:100%;color:var(--muted);background:transparent}.board-wrap{min-height:500px;display:grid;place-items:center;padding:clamp(12px,3vw,28px);border-radius:var(--radius);background:var(--board-surface);box-shadow:var(--board-shadow)}.bubble-board{width:min(100%,760px);aspect-ratio:var(--cols) / var(--rows);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:clamp(7px,1.1vw,13px);padding:clamp(14px,2.2vw,24px);border:1px solid var(--sheet-border);border-radius:var(--radius);background:var(--sheet-bg);box-shadow:var(--sheet-shadow)}.bubble{position:relative;width:100%;height:100%;min-width:0;min-height:0;display:grid;place-items:center;padding:0;border-radius:50%;background:transparent;transform:scale(var(--scale)) rotate(var(--tilt));animation:settle .42s ease both;animation-delay:var(--delay)}.bubble span{position:relative;width:100%;aspect-ratio:1;display:block;border-radius:50%;background:var(--bubble-bg);box-shadow:var(--bubble-shadow);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease,background .15s ease}.bubble span:before{content:"";position:absolute;top:13%;right:18%;bottom:52%;left:23%;border-radius:50%;background:var(--bubble-highlight);filter:blur(1px)}.bubble span:after{content:"";position:absolute;top:13%;right:13%;bottom:13%;left:13%;border-radius:50%;border:1px solid var(--bubble-rim)}.bubble:not(:disabled):hover span{transform:translateY(-2px) scale(1.04);filter:saturate(1.08)}.bubble:not(:disabled):active span{transform:scale(.86)}.bubble.special span{background:var(--special-bg);box-shadow:var(--special-shadow)}.bubble.popped{cursor:default;transform:scale(var(--scale)) rotate(var(--tilt))}.bubble.popped span{transform:scale(.76);background:var(--popped-bg);box-shadow:var(--popped-shadow);filter:saturate(.72)}.bubble.popped span:before{opacity:.35}.bubble.popped span:after{top:25%;right:25%;bottom:25%;left:25%;border-color:var(--popped-rim)}.theme-bright{--heading: #10242a;--panel-text: #263a40;--muted: #64777d;--accent: #0f8ea4;--button-color: #123039;--button-bg: rgb(255 255 255 / .78);--control-shadow: 0 12px 30px rgb(39 77 85 / .14);--panel-bg: rgb(255 255 255 / .78);--panel-border: rgb(76 118 128 / .16);--panel-shadow: 0 22px 55px rgb(26 72 82 / .14);--chip-color: #0e5260;--chip-bg: #d8f5f7;--stat-bg: rgb(255 255 255 / .68);--stat-border: rgb(57 95 105 / .12);--track-bg: rgb(57 95 105 / .15);--progress-bg: linear-gradient(90deg, #10a9c7, #f5b13f);--option-bg: rgb(255 255 255 / .56);--option-active-bg: rgb(224 250 253 / .9);--option-border: rgb(62 101 110 / .14);--primary-color: #062e37;--primary-bg: linear-gradient(135deg, #8ce8f4, #f8cf72);--primary-shadow: 0 12px 28px rgb(13 128 151 / .24);--secondary-color: #123039;--secondary-bg: rgb(255 255 255 / .8);--board-surface: linear-gradient(120deg, rgb(246 252 253 / .96), rgb(232 241 244 / .94)), repeating-linear-gradient(90deg, transparent 0 34px, rgb(15 68 77 / .04) 35px 36px);--board-shadow: inset 0 0 0 1px rgb(255 255 255 / .72);--sheet-bg: linear-gradient(135deg, rgb(220 248 252 / .7), rgb(255 255 255 / .58));--sheet-border: rgb(65 123 133 / .2);--sheet-shadow: inset 0 1px 14px rgb(255 255 255 / .7), 0 26px 60px rgb(21 73 84 / .18);--bubble-bg: radial-gradient(circle at 35% 25%, rgb(255 255 255 / .96) 0 12%, transparent 14%), radial-gradient(circle at 50% 60%, rgb(124 221 238 / .45), rgb(205 249 255 / .68));--bubble-highlight: rgb(255 255 255 / .9);--bubble-rim: rgb(45 113 126 / .18);--bubble-shadow: inset -5px -8px 15px rgb(42 119 133 / .18), inset 5px 5px 14px rgb(255 255 255 / .72), 0 8px 16px rgb(34 88 99 / .15);--special-bg: radial-gradient(circle at 35% 25%, rgb(255 255 255 / .98) 0 12%, transparent 14%), radial-gradient(circle, rgb(255 210 91 / .76), rgb(124 221 238 / .72));--special-shadow: inset -5px -8px 15px rgb(42 119 133 / .18), 0 0 0 2px rgb(255 192 48 / .24), 0 10px 18px rgb(242 167 27 / .2);--popped-bg: radial-gradient(circle, rgb(160 206 214 / .18), rgb(139 185 194 / .38));--popped-shadow: inset 4px 5px 12px rgb(20 70 80 / .2), inset -2px -2px 8px rgb(255 255 255 / .4);--popped-rim: rgb(30 88 99 / .18);background:linear-gradient(135deg,#f5fbfc,#d9edf1 52%,#f7e7bd)}.theme-realistic{--heading: #252422;--panel-text: #332d27;--muted: #746b61;--accent: #6c7f82;--button-color: #2a2925;--button-bg: rgb(250 247 239 / .82);--control-shadow: 0 12px 28px rgb(52 40 24 / .14);--panel-bg: rgb(250 247 239 / .86);--panel-border: rgb(96 82 63 / .22);--panel-shadow: 0 22px 55px rgb(50 39 24 / .18);--chip-color: #3d352c;--chip-bg: #e7dccb;--stat-bg: rgb(255 255 255 / .48);--stat-border: rgb(96 82 63 / .18);--track-bg: rgb(82 72 60 / .18);--progress-bg: linear-gradient(90deg, #6a8c8f, #ba8d4e);--option-bg: rgb(255 255 255 / .45);--option-active-bg: rgb(232 225 213 / .86);--option-border: rgb(96 82 63 / .18);--primary-color: #fffaf1;--primary-bg: linear-gradient(135deg, #4f6669, #a1753f);--primary-shadow: 0 14px 28px rgb(83 64 38 / .28);--secondary-color: #332d27;--secondary-bg: rgb(255 252 244 / .84);--board-surface: repeating-linear-gradient(4deg, rgb(92 70 43 / .05) 0 1px, transparent 1px 10px), linear-gradient(135deg, #d9c7a7, #b8915e 54%, #c4b6a0);--board-shadow: inset 0 0 0 1px rgb(92 70 43 / .2);--sheet-bg: repeating-linear-gradient(35deg, rgb(255 255 255 / .2) 0 1px, transparent 1px 12px), linear-gradient(135deg, rgb(218 229 229 / .74), rgb(248 252 250 / .48));--sheet-border: rgb(64 77 78 / .2);--sheet-shadow: inset 0 2px 24px rgb(255 255 255 / .54), 0 30px 60px rgb(54 39 20 / .28);--bubble-bg: radial-gradient(circle at 36% 25%, rgb(255 255 255 / .92) 0 11%, transparent 13%), radial-gradient(circle at 54% 62%, rgb(226 235 235 / .54), rgb(180 201 201 / .76));--bubble-highlight: rgb(255 255 255 / .82);--bubble-rim: rgb(67 85 86 / .22);--bubble-shadow: inset -7px -9px 18px rgb(61 82 83 / .21), inset 5px 5px 14px rgb(255 255 255 / .62), 0 9px 15px rgb(68 50 28 / .2);--special-bg: radial-gradient(circle at 36% 25%, rgb(255 255 255 / .93) 0 11%, transparent 13%), radial-gradient(circle, rgb(190 216 218 / .86), rgb(191 154 92 / .7));--special-shadow: inset -7px -9px 18px rgb(61 82 83 / .2), 0 0 0 2px rgb(159 115 50 / .22), 0 10px 16px rgb(68 50 28 / .2);--popped-bg: radial-gradient(circle, rgb(150 166 166 / .22), rgb(117 132 132 / .42));--popped-shadow: inset 5px 7px 14px rgb(50 62 62 / .25), inset -2px -2px 9px rgb(255 255 255 / .32);--popped-rim: rgb(55 72 72 / .22);background:linear-gradient(145deg,#e9dfcf,#b59061 48%,#cad8d8)}.theme-arcade{--heading: #f8fbff;--panel-text: #eef7ff;--muted: #afbdd7;--accent: #30f2ff;--button-color: #f8fbff;--button-bg: rgb(14 22 45 / .82);--control-shadow: 0 0 28px rgb(36 237 255 / .12);--panel-bg: rgb(12 18 40 / .82);--panel-border: rgb(73 240 255 / .18);--panel-shadow: 0 22px 55px rgb(0 0 0 / .28);--chip-color: #05111c;--chip-bg: #30f2ff;--stat-bg: rgb(255 255 255 / .06);--stat-border: rgb(255 255 255 / .12);--track-bg: rgb(255 255 255 / .12);--progress-bg: linear-gradient(90deg, #30f2ff, #ff3fa3, #f7f34a);--option-bg: rgb(255 255 255 / .05);--option-active-bg: rgb(48 242 255 / .1);--option-border: rgb(255 255 255 / .11);--primary-color: #07101f;--primary-bg: linear-gradient(135deg, #30f2ff, #ff3fa3 65%, #f7f34a);--primary-shadow: 0 0 32px rgb(48 242 255 / .22);--secondary-color: #f8fbff;--secondary-bg: rgb(255 255 255 / .08);--board-surface: linear-gradient(90deg, rgb(48 242 255 / .1) 1px, transparent 1px), linear-gradient(0deg, rgb(255 63 163 / .08) 1px, transparent 1px), linear-gradient(135deg, #090e22, #1a1642 52%, #220e35);--board-shadow: inset 0 0 0 1px rgb(48 242 255 / .16);--sheet-bg: linear-gradient(90deg, rgb(48 242 255 / .12) 1px, transparent 1px), linear-gradient(0deg, rgb(255 63 163 / .1) 1px, transparent 1px), rgb(11 18 42 / .74);--sheet-border: rgb(48 242 255 / .22);--sheet-shadow: inset 0 0 24px rgb(48 242 255 / .1), 0 0 52px rgb(255 63 163 / .12);--bubble-bg: radial-gradient(circle at 35% 25%, rgb(255 255 255 / .95) 0 10%, transparent 12%), radial-gradient(circle, rgb(48 242 255 / .62), rgb(74 80 255 / .78));--bubble-highlight: rgb(255 255 255 / .9);--bubble-rim: rgb(255 255 255 / .24);--bubble-shadow: inset -5px -8px 14px rgb(0 0 0 / .18), inset 5px 5px 14px rgb(255 255 255 / .22), 0 0 18px rgb(48 242 255 / .22);--special-bg: radial-gradient(circle at 35% 25%, rgb(255 255 255 / .96) 0 10%, transparent 12%), radial-gradient(circle, rgb(247 243 74 / .86), rgb(255 63 163 / .78));--special-shadow: inset -5px -8px 14px rgb(0 0 0 / .18), 0 0 0 2px rgb(247 243 74 / .28), 0 0 22px rgb(255 63 163 / .32);--popped-bg: radial-gradient(circle, rgb(56 70 115 / .38), rgb(25 34 73 / .82));--popped-shadow: inset 5px 7px 14px rgb(0 0 0 / .34), 0 0 8px rgb(48 242 255 / .08);--popped-rim: rgb(255 255 255 / .1);background:radial-gradient(circle at 18% 20%,rgb(48 242 255 / .14),transparent 28%),radial-gradient(circle at 82% 8%,rgb(255 63 163 / .14),transparent 26%),linear-gradient(135deg,#080c1f,#14173a 55%,#260d34);background-size:auto,auto,auto}.theme-arcade .board-surface,.theme-arcade .sheet-bg{background-size:34px 34px,34px 34px,auto}@keyframes settle{0%{opacity:0;transform:scale(.7) rotate(var(--tilt))}to{opacity:1;transform:scale(var(--scale)) rotate(var(--tilt))}}@media(max-width:900px){.app{padding:16px}.shell{min-height:auto}.layout{grid-template-columns:1fr}.control-panel{order:2}.board-wrap{order:1;min-height:auto}.bubble-board{width:100%}}@media(max-width:620px){.topbar{align-items:stretch;flex-direction:column}.topbar-actions{align-self:flex-end}h1{font-size:2.35rem}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{min-height:62px;padding:9px}.stat strong{font-size:1.05rem}.action-row{flex-direction:column}.primary-button,.secondary-button{width:100%;flex:none}.bubble-board{gap:6px;padding:10px}}@media(max-width:430px){.app{padding:12px}.stats-grid{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}