.app-shell{position:relative;min-height:100vh;overflow:hidden}.app-backdrop{position:fixed;inset:0;background:radial-gradient(circle at top left,rgba(110,87,224,.28),transparent 28%),radial-gradient(circle at top right,rgba(28,214,181,.22),transparent 24%),linear-gradient(180deg,#120f24,#1d1533 45%,#120f24)}.app-content{position:relative;z-index:1;width:min(1280px,calc(100% - 32px));margin:0 auto;padding:32px 0 48px}.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;padding:28px 32px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:#0b0f1f9e;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 24px 60px #00000047}.eyebrow{margin:0 0 8px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#9db8ff}.hero h1{margin:0;font-size:clamp(2.2rem,4vw,3.8rem);line-height:1.05}.hero-copy{max-width:40rem;margin:12px 0 0;color:#ecefffbd}.hero-status{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:#ffffff14;color:#f2f4ff;white-space:nowrap}.status-dot{width:10px;height:10px;border-radius:50%}.status-dot.online{background:#34d399;box-shadow:0 0 12px #34d399b3}.status-dot.offline{background:#f59e0b;box-shadow:0 0 12px #f59e0bb3}.layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:24px;align-items:start}.game-column,.sidebar{min-width:0}.sidebar{display:grid;gap:20px}.panel{padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:#0b0f1f94;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 18px 50px #0003}.panel-header{margin-bottom:18px}.panel-header h2{margin:0;font-size:1.4rem}.panel-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.panel-copy{margin:0;color:#ecefffbd}.mode-toggle{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-bottom:18px;padding:4px;border-radius:16px;background:#ffffff14}.mode-tab{border:0;border-radius:12px;background:transparent;color:#ecefffbd;padding:10px 12px;cursor:pointer;transition:.18s ease}.mode-tab.active{background:linear-gradient(135deg,#7c3aed,#22c55e);color:#fff}.auth-form{display:grid;gap:14px;margin-bottom:16px}.reset-form{margin-top:18px}.oauth-actions{display:grid;gap:10px;margin-bottom:16px}.clerk-actions{display:grid;gap:12px;margin-bottom:16px}.clerk-account-actions{display:flex;align-items:center;gap:12px;margin:16px 0}.clerk-user-button-shell{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:4px;border-radius:16px;background:#ffffff0f}.clerk-email{margin-top:10px}.oauth-action{width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#ffffff0f;color:#fff;cursor:pointer;font-weight:600;transition:transform .16s ease,background .16s ease,opacity .16s ease}.oauth-action:hover{transform:translateY(-1px);background:#ffffff1a}.oauth-action:disabled{opacity:.65;cursor:wait}.auth-divider{position:relative;margin:2px 0 16px;text-align:center}.auth-divider:before{content:"";position:absolute;inset:50% 0 auto;border-top:1px solid rgba(255,255,255,.12)}.auth-divider span{position:relative;display:inline-block;padding:0 10px;background:#0b0f1ff2;color:#ecefff99;font-size:.85rem}.field{display:grid;gap:8px}.field span{font-size:.92rem;color:#ecefffd6}.field input{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:#ffffff0f;color:#fff;padding:12px 14px;outline:none;transition:border-color .16s ease,background .16s ease}.field input:focus{border-color:#7dd3fcb3;background:#ffffff1a}.primary-action,.secondary-action,.ghost-action{border:0;border-radius:16px;cursor:pointer;font-weight:700;transition:transform .16s ease,opacity .16s ease,background .16s ease}.primary-action{padding:12px 16px;color:#fff;background:linear-gradient(135deg,#7c3aed,#2563eb)}.secondary-action{padding:12px 16px;color:#fff;background:#ffffff1a}.ghost-action{padding:10px 14px;color:#c4d5ff;background:#ffffff0f}.text-action{padding:0;border:0;background:transparent;color:#7dd3fc;cursor:pointer;font:inherit;font-weight:600}.primary-action:hover,.secondary-action:hover,.ghost-action:hover{transform:translateY(-1px)}.primary-action:disabled{opacity:.65;cursor:wait}.feedback{margin:16px 0 0;padding:12px 14px;border-radius:14px;font-size:.94rem}.feedback.success{background:#34d39926;color:#a7f3d0}.feedback.error{background:#f8717126;color:#fecaca}.feedback.info{background:#60a5fa26;color:#bfdbfe}.oauth-fallback{margin:12px 0 0;color:#cbd5e1;font-size:.95rem;line-height:1.6}.oauth-fallback a{color:#7dd3fc;font-weight:600}.inline-actions,.reset-actions{display:flex;align-items:center;gap:12px}.inline-actions{margin-top:12px}.reset-actions{margin-top:4px}.leaderboard-list{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}.leaderboard-item{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:14px 16px;border-radius:18px;background:#ffffff0f}.leaderboard-item.current-user{outline:1px solid rgba(96,165,250,.5);background:#60a5fa1f}.leaderboard-rank{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:700;background:#ffffff14}.leaderboard-meta,.leaderboard-score{display:grid;gap:4px}.leaderboard-meta span,.leaderboard-score span{color:#ecefffa3;font-size:.84rem}.leaderboard-score{text-align:right}@media(max-width:1080px){.layout{grid-template-columns:1fr}}@media(max-width:720px){.app-content{width:min(100% - 20px,1280px);padding-top:20px}.hero{padding:22px;border-radius:22px;flex-direction:column;align-items:flex-start}.panel{padding:20px;border-radius:20px}.leaderboard-item{grid-template-columns:auto 1fr}.leaderboard-score{grid-column:2;text-align:left}}.snake-game{--board-cell-size: 20px;display:flex;flex-direction:column;align-items:center;padding:28px 24px;background:#0b0f1f94;border:1px solid rgba(255,255,255,.12);border-radius:28px;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);width:100%;font-family:Arial,sans-serif;box-shadow:0 18px 50px #00000038}.game-header{text-align:center;margin-bottom:20px;color:#fff}.game-header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.player-badge{margin:0 0 16px;color:#ffffffd6}.player-badge.muted{color:#ffffff9e}.game-stats{display:flex;gap:20px;justify-content:center;font-size:1.2rem;font-weight:700}.score,.length{background:#fff3;padding:8px 16px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.milestone-notification{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffd700e6;color:#333;padding:20px 40px;border-radius:50px;font-size:2rem;font-weight:700;z-index:100;box-shadow:0 0 50px #ffd70080;animation:milestone-pop .5s cubic-bezier(.175,.885,.32,1.275) forwards,milestone-fade .5s ease-in 2.5s forwards;pointer-events:none;text-align:center;white-space:nowrap}@keyframes milestone-pop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes milestone-fade{to{opacity:0;transform:translate(-50%,-60%)}}.effect-indicator{background:#ffffff4d;padding:8px 16px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:pulse 1s infinite}.effect-indicator.ghost{background:#b19cd9cc}.effect-indicator.paused{background:#ffc107cc}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.game-board-container{display:flex;justify-content:center;width:100%;margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}.game-board{display:grid;grid-template-columns:repeat(20,var(--board-cell-size));grid-template-rows:repeat(20,var(--board-cell-size));gap:1px;background:#0000004d;padding:10px;border-radius:15px;box-shadow:0 10px 30px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:fit-content;margin:0 auto}.cell{width:var(--board-cell-size);height:var(--board-cell-size);background:#ffffff1a;border-radius:3px;position:relative;transition:all .1s ease;display:flex;justify-content:center;align-items:center}.cell.snake-head{background:linear-gradient(45deg,#4caf50,#45a049);border-radius:50%;box-shadow:0 0 10px #4caf50cc;animation:snake-glow 1s ease-in-out infinite alternate}.cell.snake-body{background:linear-gradient(45deg,#66bb6a,#4caf50);border-radius:6px;animation:snake-pulse .5s ease-in-out infinite alternate}.cell.snake-body.ghost-mode{background:linear-gradient(45deg,#b19cd9,#9b87c7);opacity:.8;animation:ghost-float 2s ease-in-out infinite}@keyframes snake-glow{0%{box-shadow:0 0 10px #4caf50cc}to{box-shadow:0 0 20px #4caf50}}@keyframes snake-pulse{0%{transform:scale(1)}to{transform:scale(1.05)}}@keyframes ghost-float{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.food{width:14px;height:14px;border-radius:50%;animation:food-bounce .6s ease-in-out infinite alternate;box-shadow:0 0 8px currentColor}.food-normal{background:#ff6b6b;animation:food-bounce .8s ease-in-out infinite alternate}.food-golden{background:#ffd93d;animation:golden-spin 2s linear infinite,food-bounce .6s ease-in-out infinite alternate;box-shadow:0 0 15px #ffd93d}.food-speed{background:#4ecdc4;animation:speed-pulse .4s ease-in-out infinite alternate;box-shadow:0 0 12px #4ecdc4}.food-slow{background:#a8e6cf;animation:slow-wave 1.5s ease-in-out infinite,food-bounce .6s ease-in-out infinite alternate;box-shadow:0 0 10px #a8e6cf}.food-ghost{background:#b19cd9;animation:ghost-fade 1s ease-in-out infinite,food-bounce .6s ease-in-out infinite alternate;box-shadow:0 0 12px #b19cd9}@keyframes food-bounce{0%{scale:1}to{scale:1.2}}@keyframes golden-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes speed-pulse{0%{scale:1}to{scale:1.3}}@keyframes slow-wave{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}@keyframes ghost-fade{0%,to{opacity:1}50%{opacity:.6}}.game-controls{text-align:center;color:#fff}.touch-controls{width:100%;max-width:340px;margin-bottom:20px;color:#fff}.touch-controls-copy{margin:0 0 12px;text-align:center;color:#ffffffb8;font-size:.95rem}.touch-controls-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:". up ." "left center right" ". down .";gap:12px}.touch-control-btn{min-height:56px;border:0;border-radius:18px;background:#ffffff1f;color:#fff;font-size:1.45rem;font-weight:700;box-shadow:0 12px 24px #0000002e;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);cursor:pointer;transition:transform .12s ease,background .12s ease,opacity .12s ease;touch-action:manipulation;-webkit-user-select:none;user-select:none}.touch-control-btn:hover:not(:disabled){transform:translateY(-1px);background:#ffffff2e}.touch-control-btn:active:not(:disabled){transform:scale(.98)}.touch-control-btn:disabled{opacity:.45;cursor:not-allowed}.touch-control-btn.up{grid-area:up}.touch-control-btn.left{grid-area:left}.touch-control-btn.center{grid-area:center;background:linear-gradient(135deg,#7c3aede6,#2563ebe6)}.touch-control-btn.right{grid-area:right}.touch-control-btn.down{grid-area:down}.start-btn,.restart-btn{background:linear-gradient(45deg,#4caf50,#45a049);color:#fff;border:none;padding:15px 30px;font-size:1.2rem;font-weight:700;border-radius:25px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #4caf504d}.start-btn:hover,.restart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4caf5066}.game-over{background:#000c;padding:30px;border-radius:15px;color:#fff;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-over h2{font-size:2rem;margin-bottom:10px;color:#ff6b6b}.submission-copy{margin:12px 0 0;color:#ffffffc2}.submission-status{margin:12px 0 0;padding:10px 12px;border-radius:12px}.submission-status.success{background:#34d39929;color:#a7f3d0}.submission-status.error{background:#f8717129;color:#fecaca}.submission-status.info{background:#60a5fa29;color:#bfdbfe}.game-info{background:#ffffff1a;padding:20px;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;max-width:400px}.game-info p{margin-bottom:15px;font-size:1.1rem;text-align:center}.food-legend{margin-top:15px}.food-legend h3{margin-bottom:10px;text-align:center;color:#ffd93d}.legend-item{display:flex;align-items:center;margin-bottom:8px;font-size:.9rem}.legend-color{width:12px;height:12px;border-radius:50%;margin-right:10px;box-shadow:0 0 5px currentColor}.legend-color.normal{background:#ff6b6b}.legend-color.golden{background:#ffd93d}.legend-color.speed{background:#4ecdc4}.legend-color.slow{background:#a8e6cf}.legend-color.ghost{background:#b19cd9}@media(max-width:768px){.snake-game{--board-cell-size: clamp(12px, calc((100vw - 104px)/20) , 15px);padding:24px 16px}.game-board{padding:8px}.food{width:10px;height:10px}.game-header h1{font-size:2rem}.game-stats{flex-direction:column;gap:10px}.touch-controls{max-width:100%}.touch-control-btn{min-height:52px;border-radius:16px}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}