:root{--primary-color: #b34a42;--secondary-color: #4a7ab3;--light-color: #ffffff;--accent-color: #ffffff;--grid-bg-color: #0f172a;--grid-line-color: #253348;--heading-bg-color: #b34a42;--level-bg-color: #4a7ab3;--level-label-bg-color: #75a8e7;--timer-label-bg-color: #e77575;--ui-border-color: #000000;--ui-text-color: #ffffff;--game-canvas-bg-color: #1a1a2e;--body-background-color: #000000;--text-color: #ffffff;--title-color: #ffffff}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none}body{overflow:hidden;width:100%;height:100%;background-color:var(--body-background-color);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;-webkit-touch-callout:none}.game-area{position:fixed;left:50%;top:0;transform:translate(-50%);width:400px;max-width:100%;height:100%;padding-top:env(safe-area-inset-top,0);box-sizing:border-box;pointer-events:none}.game-area>*{pointer-events:auto}.game-canvas-wrap{position:absolute;inset:0;z-index:0}#gameCanvas{width:100%;height:100%;display:block;touch-action:none}.game-top{position:absolute;top:0;left:0;right:0;height:72px;z-index:10;box-sizing:border-box}.score-display{position:absolute;top:50%;transform:translateY(-50%);width:80px;background:var(--heading-bg-color);padding:0;border-radius:20px;border:2px solid var(--ui-border-color);box-shadow:0 4px 0 0 var(--ui-border-color);font-family:Bungee,Arial Black,sans-serif;color:var(--ui-text-color);z-index:100;display:flex;flex-direction:column;overflow:hidden}.score-left{left:8px}.score-right{right:8px;left:auto;background:var(--level-bg-color)}.score-right .score-label{background:var(--level-label-bg-color)}.score-label{font-size:.6rem;text-transform:uppercase;letter-spacing:1px;padding:6px 12px;text-align:center;background:var(--timer-label-bg-color)}.score-value{font-size:1.4rem;line-height:1;padding:6px 12px;text-align:center}.game-heading{position:absolute;top:90px;left:0;right:0;margin:0;padding:10px 16px;font-family:Bungee,Arial Black,sans-serif;font-size:1.1rem;text-transform:uppercase;letter-spacing:2px;text-align:center;color:var(--ui-text-color);background:var(--heading-bg-color);border-bottom:2px solid var(--ui-border-color);box-shadow:0 2px 0 0 var(--ui-border-color);z-index:10}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--body-background-color);display:flex;justify-content:center;align-items:center;z-index:300;transition:opacity .3s ease-out}.loading-screen.hidden{opacity:0;pointer-events:none}.start-screen{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0f766e;z-index:250}.start-panel{width:280px;max-width:90%;padding:24px 20px 20px;border-radius:24px;background:radial-gradient(circle at top,#7c3aed,#4c1d95 55%,#1e1b4b);border:2px solid var(--ui-border-color);box-shadow:0 6px 0 0 var(--ui-border-color);text-align:center;display:flex;flex-direction:column;gap:18px}.start-title{margin:0;font-family:Bungee,Arial Black,sans-serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:2px;color:var(--ui-text-color)}.start-buttons{display:flex;flex-direction:column;gap:10px;margin-top:6px}.primary-btn,.secondary-btn{width:100%;padding:10px 14px;border-radius:999px;border:2px solid var(--ui-border-color);font-family:Nunito,sans-serif;font-size:.95rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:transform .1s ease,box-shadow .1s ease,background .15s ease}.primary-btn{background:var(--primary-color);color:var(--light-color);box-shadow:0 4px #000}.secondary-btn{background:var(--secondary-color);color:var(--light-color);box-shadow:0 4px #000}.primary-btn:hover,.secondary-btn:hover{transform:translateY(1px);box-shadow:0 3px #000}.primary-btn:active,.secondary-btn:active{transform:translateY(2px);box-shadow:0 2px #000}.start-screen.hidden{display:none}.howto-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009}.howto-panel{width:320px;max-width:95%;padding:18px 18px 16px;border-radius:20px;background:#0f172afa;border:2px solid var(--ui-border-color);box-shadow:0 6px 0 0 var(--ui-border-color);color:var(--ui-text-color);font-family:Nunito,sans-serif;display:flex;flex-direction:column;gap:10px}.howto-title{margin:0;font-family:Bungee,Arial Black,sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:1px;text-align:center}.howto-intro{margin:4px 0 6px;font-size:.75rem;text-align:center}.howto-grids-row{display:flex;justify-content:space-between;gap:8px;margin-top:4px}.howto-grid-block{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:4px}.howto-grid-block.wide{margin-top:8px}.howto-grid-svg{width:72px;height:auto;display:block}.howto-grid-block.wide .howto-grid-svg{width:144px}.howto-caption{margin:0;font-size:.7rem;text-align:center}.howto-close-btn{margin-top:8px;font-size:.8rem}.howto-overlay.hidden{display:none}.gameover-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;z-index:260}.gameover-panel{width:260px;max-width:90%;padding:18px 18px 16px;border-radius:20px;background:var(--heading-bg-color);border:2px solid var(--ui-border-color);box-shadow:0 6px 0 0 var(--ui-border-color);color:var(--ui-text-color);text-align:center;font-family:Nunito,sans-serif}.gameover-title{margin:0 0 8px;font-family:Bungee,Arial Black,sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:1px}.gameover-score{margin:0 0 10px;font-size:.85rem}.gameover-score span{font-weight:700}.gameover-restart-btn{margin-top:4px;font-size:.9rem;background:var(--secondary-color);color:var(--light-color)}.gameover-overlay.hidden{display:none}.loading-panel{width:220px;max-width:90%;background:var(--level-bg-color);border-radius:24px;border:2px solid var(--ui-border-color);box-shadow:0 4px 0 0 var(--ui-border-color);font-family:Bungee,Arial Black,sans-serif;color:var(--ui-text-color);display:flex;flex-direction:column;overflow:hidden}.loading-label{font-size:1rem;text-transform:uppercase;letter-spacing:2px;padding:14px 16px;text-align:center;background:var(--level-label-bg-color)}.loading-content{padding:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.game-area{width:100%}}