:root{--bg: #02040a;--bg-grid-line: rgba(30, 41, 59, .45);--accent: #f97316;--accent-soft: rgba(249, 115, 22, .15);--accent-alt: #3b82f6;--text-primary: #e5e7eb;--text-secondary: #9ca3af;--text-muted: #6b7280;--border-subtle: rgba(148, 163, 184, .25);--border-strong: rgba(148, 163, 184, .5);--bg-x: 50%;--bg-y: 50%;--bg-hue: 200;--radius-lg: 18px;--radius-md: 12px;--radius-pill: 999px;--shadow-strong: 0 28px 80px rgba(0, 0, 0, .65);--shadow-soft: 0 18px 44px rgba(0, 0, 0, .45);--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font-sans);color:var(--text-primary);background:var(--bg)}.app{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at var(--bg-x) var(--bg-y),hsla(var(--bg-hue),90%,55%,.32),transparent 52%),radial-gradient(circle at top,#020617 0,#020617 55%,#020617)}.app-bg-grid{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(90deg,var(--bg-grid-line) 1px,transparent 1px),linear-gradient(0deg,var(--bg-grid-line) 1px,transparent 1px);background-size:32px 32px;mix-blend-mode:soft-light;opacity:.9}.app-shell{position:relative;max-width:1180px;margin:0 auto;padding:20px 18px 32px;display:flex;flex-direction:column;gap:20px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:999px;background:radial-gradient(circle at top left,#1e293bd9,#0f172aeb),#020617b3;border:1px solid rgba(148,163,184,.22);box-shadow:var(--shadow-soft)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:32px;height:32px;border-radius:12px;background:linear-gradient(135deg,#f97316,#facc15,#22c55e,#3b82f6,#ec4899);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 28px #0f172ae6}.brand-logo{width:24px;height:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));opacity:.95}.brand-mark svg{width:24px;height:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.brand-text{display:flex;flex-direction:column}.brand-name{font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}.brand-tagline{font-size:12px;color:var(--text-muted)}.nav{display:flex;align-items:center;gap:4px}.nav-link{border-radius:var(--radius-pill);border:none;padding:8px 16px;background:transparent;color:var(--text-muted);font-size:14px;cursor:pointer;transition:background .15s ease,color .15s ease}.nav-link:hover{background:#0f172ae6;color:var(--text-primary)}.nav-link--active{background:radial-gradient(circle at top,#0f172af2,#020617);color:#fee2e2;border:1px solid rgba(248,250,252,.18)}.wallet-area{display:flex;align-items:center;gap:8px}.wallet-pill{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--radius-pill);background:#0f172af2;border:1px solid rgba(148,163,184,.4);font-size:12px}.wallet-label{color:#4ade80}.wallet-address{color:var(--text-secondary)}.btn{border-radius:var(--radius-pill);border:none;padding:10px 18px;font-size:14px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background .15s ease,transform .12s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease}.btn-primary{background:linear-gradient(135deg,#f97316,#fde047);color:#111827;box-shadow:0 18px 44px #f9731638,0 18px 48px #0000008c}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 20px 40px #0f172af2}.btn-secondary{background:#020617c7;color:#e2e8f0c7;border:1px solid rgba(148,163,184,.25)}.btn-secondary:hover{border-color:var(--border-strong);color:var(--text-primary)}.btn.full{width:100%;margin-top:8px}.section{border-radius:var(--radius-lg);padding:22px 22px 24px;background:radial-gradient(circle at top left,#0f172af5,#020617 60%),radial-gradient(circle at bottom right,#0f172ae6,#020617 60%);border:1px solid rgba(148,163,184,.22);box-shadow:var(--shadow-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.section--play{padding:18px}.section--leaderboard,.section--how{padding:22px 22px 24px;min-height:80vh}.section--guide{padding:22px 22px 24px;min-height:100vh}.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px;margin-top:24px;margin-bottom:40px}.guide-card{border-radius:var(--radius-lg);padding:20px;background:radial-gradient(circle at top left,rgba(30,64,175,.15),transparent 55%),radial-gradient(circle at top left,#020617,#020617 65%);border:1px solid rgba(30,41,59,.9);box-shadow:0 16px 32px #0f172ae6;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.guide-card:hover{transform:translateY(-2px);box-shadow:0 22px 44px #0f172afa;border-color:#94a3b8b3}.guide-card-number{width:28px;height:28px;border-radius:999px;background:linear-gradient(135deg,#f97316,#fde047);color:#111827;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;margin-bottom:12px}.guide-card h2{margin:0 0 12px;font-size:18px;color:var(--text-primary)}.guide-card p{margin:0 0 12px;font-size:13px;color:var(--text-secondary);line-height:1.6}.guide-card p:last-child{margin-bottom:0}.guide-cta{text-align:center;padding:40px 20px;border-radius:var(--radius-lg);background:radial-gradient(circle at top,rgba(249,115,22,.1),transparent 50%),radial-gradient(circle at top left,#020617,#020617 70%);border:1px solid rgba(249,115,22,.3)}.guide-cta h2{margin:0 0 12px;font-size:26px;background:linear-gradient(135deg,#f97316,#fde047);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.guide-cta p{font-size:15px;color:var(--text-secondary);max-width:500px;margin:0 auto 20px;line-height:1.6}@media(max-width:900px){.guide-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.guide-cta h2{font-size:20px}}@media(max-width:640px){.guide-grid{grid-template-columns:1fr;gap:12px}.guide-card{padding:16px}.guide-cta{padding:24px 16px}}.play-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.play-title{margin:0;font-size:28px;letter-spacing:-.02em}.play-subtitle{margin:6px 0 10px;font-size:14px;color:var(--text-secondary)}.play-filters{display:flex;flex-wrap:wrap;gap:8px}.filter-chip{border-radius:var(--radius-pill);padding:8px 12px;border:1px solid rgba(148,163,184,.22);background:#020617a6;color:#e2e8f0b8;font-size:13px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease}.filter-chip:hover{transform:translateY(-1px);border-color:#e2e8f052;color:#e2e8f0e6}.filter-chip--active{border-color:#f973168c;background:#f9731624;color:#fef3c7eb;box-shadow:0 12px 32px #f973161f}.play-header-right{display:flex;align-items:center;gap:10px}.search{position:relative}.search-input{width:260px;border-radius:var(--radius-pill);padding:10px 14px;background:#020617b8;border:1px solid rgba(148,163,184,.22);color:#e2e8f0e6;outline:none;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease}.search-input:focus{border-color:#f973168c;box-shadow:0 0 0 4px #f973161f}.search-input::placeholder{color:#94a3b899}.section-header h1{margin:0 0 4px;font-size:22px}.section-header p{margin:0;font-size:13px;color:var(--text-secondary)}.play-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}.card{border-radius:var(--radius-lg);background:radial-gradient(circle at top left,#020617,#020617 75%);border:1px solid rgba(30,41,59,.95);padding:12px 12px 10px;box-shadow:0 16px 32px #0f172ae6;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.card:hover{transform:translateY(-2px);box-shadow:0 22px 44px #0f172afa;border-color:#94a3b8b3}.play-grid-card{border-radius:var(--radius-lg);background:radial-gradient(circle at top,rgba(249,115,22,.08),transparent 55%),radial-gradient(circle at top left,#020617,#020617 70%);border:1px solid rgba(30,64,175,.9);padding:12px;display:flex;flex-direction:column;gap:10px}.card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.card-header.small{margin-bottom:4px}.card-title{font-size:15px;font-weight:600}.card-subtitle{font-size:12px;color:var(--text-muted)}.grid-and-legend{display:flex;flex-direction:column;gap:8px}.grid-legend{display:flex;flex-wrap:wrap;gap:6px;font-size:11px}.pill{border-radius:var(--radius-pill);padding:4px 9px;border:1px solid rgba(148,163,184,.5);background:#0f172ae6}.pill--orange{border-color:#f97316e6}.pill--blue{border-color:#3b82f6e6}.pill--pink{border-color:#ec4899e6}.pill--lime{border-color:#84cc16e6}.grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;padding:12px;border-radius:var(--radius-md);background:radial-gradient(circle at top,#0f172ae6,#020617 70%);border:1px solid rgba(55,65,81,.95)}.grid-spot{position:relative;padding-bottom:100%;border-radius:12px;border:1px solid rgba(30,41,59,.95);background:radial-gradient(circle at top,#020617,#020617 85%);cursor:pointer;overflow:hidden;transition:transform .1s ease,box-shadow .15s ease,border-color .12s ease,background .12s ease}.grid-spot--orange{background:radial-gradient(circle at top,#f9731659,#020617)}.grid-spot--blue{background:radial-gradient(circle at top,#3b82f64d,#020617)}.grid-spot--pink{background:radial-gradient(circle at top,#ec489952,#020617)}.grid-spot--lime{background:radial-gradient(circle at top,#84cc1659,#020617)}.grid-spot--mine{border-color:#22c55efa;box-shadow:0 0 0 1px #22c55ee6,0 14px 26px #0f172af2}.grid-spot--taken{border-color:#f87171cc}.grid-spot:hover{transform:translateY(-1px);box-shadow:0 12px 22px #0f172af2;border-color:#f8fafc2e}.grid-spot-id{position:absolute;top:3px;left:4px;font-size:10px;color:#0f172ae6;text-shadow:0 0 6px rgba(15,23,42,.9)}.grid-spot-owner-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));transition:all .3s ease}.grid-spot-logo{width:50px;height:50px;transition:all .3s ease}.grid-spot-logo--orange{filter:drop-shadow(0 1px 3px rgba(249,115,22,.6)) brightness(1.2) hue-rotate(0deg)}.grid-spot-logo--blue{filter:drop-shadow(0 1px 3px rgba(59,130,246,.6)) brightness(1.2) hue-rotate(200deg)}.grid-spot-logo--pink{filter:drop-shadow(0 1px 3px rgba(236,72,153,.6)) brightness(1.2) hue-rotate(280deg)}.grid-spot-logo--lime{filter:drop-shadow(0 1px 3px rgba(132,204,22,.6)) brightness(1.2) hue-rotate(90deg)}.grid-spot-logo--mine{width:14px;height:14px;filter:drop-shadow(0 2px 6px rgba(34,197,94,.8)) drop-shadow(0 0 8px rgba(34,197,94,.4)) brightness(1.3) saturate(1.5)}.grid-spot-owner-icon--mine{animation:pulse-mine 2s ease-in-out infinite}@keyframes pulse-mine{0%,to{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 2px 6px rgba(34,197,94,.8))}50%{transform:translate(-50%,-50%) scale(1.15);filter:drop-shadow(0 4px 12px rgba(34,197,94,1))}}.grid-spot:hover .grid-spot-owner-icon--mine .grid-spot-logo--mine{filter:drop-shadow(0 2px 6px rgba(34,197,94,.8)) drop-shadow(0 0 12px rgba(34,197,94,.6)) brightness(1.4) saturate(1.8)}.grid-spot:hover .grid-spot-logo--orange{filter:drop-shadow(0 2px 6px rgba(249,115,22,.8)) brightness(1.3)}.grid-spot:hover .grid-spot-logo--blue{filter:drop-shadow(0 2px 6px rgba(59,130,246,.8)) brightness(1.3) hue-rotate(200deg)}.grid-spot:hover .grid-spot-logo--pink{filter:drop-shadow(0 2px 6px rgba(236,72,153,.8)) brightness(1.3) hue-rotate(280deg)}.grid-spot:hover .grid-spot-logo--lime{filter:drop-shadow(0 2px 6px rgba(132,204,22,.8)) brightness(1.3) hue-rotate(90deg)}.git-icon{width:14px;height:14px;stroke-linecap:round;stroke-linejoin:round}.play-side{display:flex;flex-direction:column;gap:10px}.mascot-card{display:flex;align-items:center;gap:10px}.mascot-icon{width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,#f97316,#b91c1c);box-shadow:0 14px 32px #0f172af2}.mascot-text h2{margin:0 0 4px;font-size:15px}.mascot-text p{margin:0;font-size:12px;color:var(--text-secondary)}.rewards-card{padding-bottom:8px}.rewards-list{display:flex;flex-direction:column;gap:4px;margin-top:2px;max-height:180px;overflow:auto}.reward-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:6px;padding:4px 6px;border-radius:10px;background:#0f172aeb;font-size:11px}.reward-color-dot{width:8px;height:8px;border-radius:999px}.reward-color-dot--orange{background:#f97316}.reward-color-dot--blue{background:#3b82f6}.reward-color-dot--pink{background:#ec4899}.reward-color-dot--lime{background:#84cc16}.reward-label{color:var(--text-secondary)}.reward-amount{color:#4ade80}.reward-time{color:var(--text-muted)}.wallet-card{padding-bottom:10px}.wallet-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding:4px 0}.wallet-row-label{color:var(--text-muted)}.wallet-row-value{color:var(--text-secondary)}.empty-text{font-size:12px;color:var(--text-muted);padding:4px 0}.leaderboard-card{margin-top:14px;padding:14px 14px 10px}.leaderboard-header-row,.leaderboard-row{display:grid;grid-template-columns:50px minmax(0,1.8fr) 80px 70px 100px 80px;gap:6px;font-size:12px;align-items:center}.leaderboard-header-row{color:var(--text-muted);margin-bottom:8px}.leaderboard-row{padding:6px 8px;border-radius:12px}.leaderboard-row:nth-child(odd){background:radial-gradient(circle at left,#1e40af29,#0f172af2)}.leaderboard-row--me{border:1px solid rgba(96,165,250,.7);box-shadow:0 10px 26px #0f172af2;background:radial-gradient(circle at left,#3b82f633,#020617)}.leader-name{color:var(--text-secondary)}.pnl{font-weight:500}.pnl--positive{color:#4ade80}.pnl--negative{color:#f97373}.how-grid{margin-top:18px;display:flex;flex-direction:column;gap:18px}.how-step{border-radius:var(--radius-lg);padding:16px 16px 14px;border:1px solid rgba(30,41,59,.9);background:radial-gradient(circle at top left,rgba(30,64,175,.24),transparent 55%),radial-gradient(circle at top left,#020617,#020617 65%);box-shadow:0 18px 40px #0f172aeb}.how-step-number{width:22px;height:22px;border-radius:999px;background:#0f172af2;border:1px solid rgba(148,163,184,.5);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-muted);margin-bottom:6px}.how-step h2{margin:0 0 6px;font-size:16px}.how-step p{margin:0;font-size:13px;color:var(--text-secondary)}.how-step-footer{margin-top:12px;display:flex;justify-content:flex-start}.how-step-btn{border-radius:var(--radius-pill);border:none;padding:8px 14px;font-size:13px;cursor:pointer;background:linear-gradient(135deg,#f97316,#fde047);color:#111827;box-shadow:0 12px 26px #f9731647;transition:transform .12s ease,box-shadow .15s ease}.how-step-btn:hover{transform:translateY(-1px);box-shadow:0 16px 32px #f9731652}.how-step-btn--ghost{background:transparent;color:#e2e8f0db;border:1px solid rgba(148,163,184,.45);box-shadow:none}.how-step-btn--ghost:hover{background:#0f172ae6;box-shadow:0 10px 26px #0f172af2}.leaderboard-filters{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}@media(max-width:900px){.topbar{flex-wrap:wrap;align-items:flex-start}.play-main{grid-template-columns:minmax(0,1fr)}.play-header{flex-direction:column}.play-header-right,.search-input{width:100%}.how-grid{grid-template-columns:minmax(0,1fr)}.leaderboard-header-row,.leaderboard-row{grid-template-columns:40px minmax(0,1.6fr) 70px 60px 80px 70px}}@media(max-width:640px){.app-shell{padding-inline:10px}.nav{width:100%;justify-content:center}.wallet-area{width:100%;justify-content:space-between}.section--play{padding:10px}.grid{gap:3px}}