:root{--ink:#f6f2e9;--muted:#aebdca;--night:#060b12;--panel:#0e1723eb;--panel-border:#26394d;--cyan:#5cecff;--cyan-dark:#087e91;--gold:#f2c86d;--focus:#9af4ff}*{box-sizing:border-box}html{background:var(--night);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;min-width:320px}body{min-width:320px;min-height:100dvh;color:var(--ink);font-family:var(--font-geist-sans), Arial, Helvetica, sans-serif;background:radial-gradient(circle at 12% 10%,#17688533,#0000 30rem),radial-gradient(circle at 85% 78%,#cc95311f,#0000 34rem),linear-gradient(145deg,#060b12 0%,#09111c 48%,#070c13 100%);margin:0;line-height:1.5;overflow-x:hidden}button,video{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,[role=grid]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);align-items:start;gap:clamp(1rem,2.6vw,2.25rem);width:min(100% - clamp(2rem,6vw,6rem),1280px);min-height:100dvh;margin-inline:auto;padding-block:clamp(1.25rem,4vw,3.5rem);display:grid;position:relative}.game-panel,.gesture-panel{border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:clamp(1.15rem,2vw,1.75rem);min-width:0;position:relative;box-shadow:0 1.5rem 5rem #00000047}.game-panel{flex-direction:column;padding:clamp(1rem,3vw,2rem);display:flex}.game-panel:before,.gesture-panel:before{z-index:-1;border-radius:inherit;content:"";pointer-events:none;background:linear-gradient(135deg,#5cecff2e,#0000 34%,#f2c86d1f);position:absolute;inset:-1px}.game-header{justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:clamp(1rem,2.5vw,1.75rem);display:flex}.game-title{min-width:0}.eyebrow{color:var(--cyan);letter-spacing:.14em;text-transform:uppercase;margin:0 0 .25rem;font-size:.72rem;font-weight:700;line-height:1.3}.game-title h1,.gesture-header h2,.game-message h2{margin:0;line-height:1}.game-title h1{color:#fffdf8;letter-spacing:-.075em;font-size:clamp(2.15rem,5.3vw,4.6rem);font-weight:760}.game-title h1 span{color:var(--gold);font-family:var(--font-geist-mono), monospace;letter-spacing:-.08em}.game-intro{max-width:31rem;color:var(--muted);margin:.55rem 0 0;font-size:clamp(.8rem,1.4vw,.95rem)}.scoreboard{flex:none;gap:.55rem;display:flex}.scoreboard p{text-align:center;background:#111c29;border:1px solid #34485e;border-radius:.75rem;min-width:clamp(4.2rem,7.5vw,5.8rem);margin:0;padding:.55rem .7rem;display:grid}.scoreboard span{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;font-weight:700}.scoreboard strong{color:#fff8e9;font-family:var(--font-geist-mono), monospace;font-size:clamp(1rem,2.3vw,1.4rem)}.game-grid{touch-action:none;-webkit-user-select:none;user-select:none;background:#243141;border:1px solid #35485c;border-radius:clamp(.9rem,2vw,1.35rem);gap:clamp(.4rem,1.2vw,.75rem);width:min(100%,620px);margin-inline:auto;padding:clamp(.45rem,1.4vw,.85rem);display:grid;box-shadow:inset 0 0 0 1px #ffffff06,0 1rem 2.5rem #0000003d}.game-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.4rem,1.2vw,.75rem);display:grid}.tile{aspect-ratio:1;color:#17202b;min-width:0;font-family:var(--font-geist-mono), monospace;letter-spacing:-.075em;background:#344455;border:1px solid #ffffff1f;border-radius:clamp(.55rem,1.4vw,.9rem);place-items:center;font-size:clamp(1.3rem,5.7vw,3.35rem);font-weight:760;line-height:1;display:grid;box-shadow:inset 0 1px #ffffff2e,0 .45rem .8rem #00000029}.tile[data-value="0"]{background:#1a2735;border-color:#96aec521;box-shadow:inset 0 1px #ffffff06}.tile[data-value="2"]{background:#f5ead4}.tile[data-value="4"]{background:#f0ddba}.tile[data-value="8"]{background:#efbd72}.tile[data-value="16"]{background:#e99b58}.tile[data-value="32"]{color:#17202b;background:#e8784f}.tile[data-value="64"]{color:#fffaf1;background:#d9553f}.tile[data-value="128"]{background:#e7c255}.tile[data-value="256"]{background:#e2b744}.tile[data-value="512"]{background:#d9a52e}.tile[data-value="1024"]{color:#17202b;background:#cf951b;font-size:clamp(1rem,4.2vw,2.55rem)}.tile[data-value="2048"]{background:#f1c84f;font-size:clamp(1rem,4.2vw,2.55rem)}.tile:not([data-value="0"]):not([data-value="2"]):not([data-value="4"]):not([data-value="8"]):not([data-value="16"]):not([data-value="32"]):not([data-value="64"]):not([data-value="128"]):not([data-value="256"]):not([data-value="512"]):not([data-value="1024"]):not([data-value="2048"]){color:#061018;background:linear-gradient(145deg,#71e7ec,#278da7);font-size:clamp(.82rem,3.4vw,2.05rem)}.tile:not([data-value="0"]){animation:.15s cubic-bezier(.22,.9,.42,1.2) tile-arrive}.tile[data-merged=true]{animation:.18s cubic-bezier(.2,.85,.35,1.35) tile-merge}.game-grid[data-last-move=left]{animation:.16s ease-out nudge-left}.game-grid[data-last-move=right]{animation:.16s ease-out nudge-right}.game-grid[data-last-move=up]{animation:.16s ease-out nudge-up}.game-grid[data-last-move=down]{animation:.16s ease-out nudge-down}.game-footer{justify-content:space-between;align-items:center;gap:1rem;margin-top:clamp(1rem,2.3vw,1.4rem);display:flex}.game-readout{min-width:0;color:var(--muted);font-family:var(--font-geist-mono), monospace;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem}.game-readout p{margin:0}.game-readout p+p{margin-top:.15rem}.game-controls{flex-wrap:wrap;justify-content:flex-end;gap:.55rem;display:flex}.button{cursor:pointer;letter-spacing:.04em;border:1px solid #0000;border-radius:.7rem;min-height:2.75rem;padding:.68rem 1rem;font-size:.82rem;font-weight:750;transition:transform .14s,background-color .14s,border-color .14s}.button:hover:not(:disabled){transform:translateY(-2px)}.button:active:not(:disabled){transform:translateY(0)}.button:disabled{color:#77899a;cursor:not-allowed;background:#1c2936;border-color:#34485a}.button-primary{background:var(--gold);color:#18202a;border-color:#ffd777}.button-secondary{color:#e7eef4;background:#172433;border-color:#475c70}.game-message{z-index:4;text-align:center;background:#080f18f5;border:1px solid #ffd777;border-radius:1rem;place-items:center;gap:1rem;width:min(80%,24rem);padding:1.5rem;display:grid;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-shadow:0 1.5rem 4rem #0000008c}.game-message h2{color:#fff7e3;font-size:clamp(1.8rem,5vw,3rem)}.gesture-panel{padding:clamp(1rem,2.6vw,1.65rem);position:sticky;top:clamp(1.25rem,4vw,3.5rem)}.gesture-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.1rem;display:flex}.gesture-header h2{color:#f8fbfd;letter-spacing:-.045em;font-size:clamp(1.45rem,2.8vw,2rem)}.camera-state{color:#c5d0da;font-family:var(--font-geist-mono), monospace;letter-spacing:.08em;text-transform:uppercase;border:1px solid #425568;border-radius:999px;flex:none;align-items:center;gap:.45rem;padding:.35rem .55rem;font-size:.65rem;font-weight:700;display:inline-flex}.camera-state>span{aspect-ratio:1;background:#7d8d9a;border-radius:50%;width:.45rem}.camera-state[data-status=loading],.camera-state[data-status=searching],.camera-state[data-status=ready],.camera-state[data-status=tracking]{color:var(--cyan);border-color:#168da1}.camera-state[data-status=loading]>span,.camera-state[data-status=searching]>span,.camera-state[data-status=ready]>span,.camera-state[data-status=tracking]>span{background:var(--cyan);box-shadow:0 0 .7rem #5cecffbf}.camera-state[data-status=error]{color:#ffb8ae;border-color:#b96b62}.camera-frame{isolation:isolate;aspect-ratio:16/9;background:#060b11;border:1px solid #208ba0;border-radius:1rem;width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #5cecff14,0 0 2.2rem #12c5e01a}.camera-placeholder,.camera-video,.camera-canvas{width:100%;height:100%;position:absolute;inset:0}.camera-placeholder{background:linear-gradient(#3050651c 1px,#0000 1px) 0 0/2rem 2rem,linear-gradient(90deg,#3050651c 1px,#0000 1px) 0 0/2rem 2rem,radial-gradient(circle,#17293a 0%,#08111b 62%);place-items:center;display:grid}.camera-palm{aspect-ratio:.82;opacity:.65;border:2px solid #2b6674;border-radius:42% 42% 50% 50%;width:clamp(2.8rem,8vw,4.4rem);position:relative}.camera-palm:before{content:"";border:2px solid #2b6674;border-left:0;border-radius:0 70% 70% 0;width:42%;height:34%;position:absolute;bottom:18%;right:-30%;transform:rotate(-18deg)}.camera-palm:after{content:"";border:2px solid #2b6674;border-bottom-width:0;border-radius:50% 50% 0 0;height:85%;position:absolute;bottom:100%;left:5%;right:5%}.camera-video{z-index:1;object-fit:cover;transform:scaleX(-1)}.camera-canvas{z-index:2;pointer-events:none}.camera-status{z-index:3;color:#dce6ee;min-height:2rem;font-family:var(--font-geist-mono), monospace;text-align:center;background:#050d16db;border:1px solid #3d5368;border-radius:.55rem;padding:.5rem .65rem;font-size:clamp(.64rem,1.6vw,.76rem);font-weight:650;position:absolute;bottom:.7rem;left:.7rem;right:.7rem}.camera-status[data-status=ready],.camera-status[data-status=tracking]{border-color:var(--cyan-dark);color:var(--cyan)}.camera-status[data-status=error]{color:#ffc3bb;border-color:#9f5149}.gesture-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:1rem 0;padding:0;list-style:none;display:grid}.gesture-steps li{color:#e9f0f5;border-top:1px solid #3a4c5e;flex-direction:column;min-width:0;padding:.7rem;display:flex}.gesture-steps span{color:var(--cyan);font-family:var(--font-geist-mono), monospace;font-size:.62rem}.gesture-steps strong{margin-top:.25rem;font-size:clamp(.7rem,1.4vw,.8rem);line-height:1.35}.camera-action{align-items:center;gap:.8rem;display:flex}.button-camera{color:#edfcff;background:#0b687a;border-color:#31b8cf;flex:none}.camera-action p,.camera-detail{color:#c0ced9;margin:0;font-size:clamp(.68rem,1.3vw,.78rem)}.privacy-mark{aspect-ratio:1;width:1.1rem;color:var(--cyan);border:1px solid #2099aa;border-radius:50%;place-items:center;margin-right:.3rem;font-size:.7rem;display:inline-grid}.camera-detail{color:#8396a7;margin-top:.7rem}@keyframes tile-arrive{0%{opacity:.45;transform:scale(.84)}to{opacity:1;transform:scale(1)}}@keyframes tile-merge{0%{transform:scale(.92)}55%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes nudge-left{50%{transform:translate(-.3rem)}}@keyframes nudge-right{50%{transform:translate(.3rem)}}@keyframes nudge-up{50%{transform:translateY(-.3rem)}}@keyframes nudge-down{50%{transform:translateY(.3rem)}}@media (width<=900px){.app-shell{grid-template-columns:minmax(0,1fr);width:min(100% - 2rem,720px)}.gesture-panel{position:relative;top:auto}}@media (width<=560px){.app-shell{width:calc(100% - 1rem);padding-block:.5rem 1rem}.game-panel,.gesture-panel{border-radius:1rem}.game-header{flex-direction:column;align-items:flex-start}.scoreboard{width:100%}.scoreboard p{flex:1}.game-footer{flex-direction:column;align-items:stretch}.game-controls{grid-template-columns:1fr 1fr;display:grid}.game-controls .button{width:100%}.camera-action{flex-direction:column;align-items:stretch}.button-camera{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}