@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap");

:root {
  --gold: #f0b90b;
  --gold-light: #f8d33a;
  --bg: #080a0d;
  --panel: rgba(20, 23, 28, 0.88);
  --line: rgba(255, 255, 255, 0.09);
  --muted: #8f98a8;
  --text: #f5f6f7;
  --green: #2ed573;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, "Noto Sans SC", sans-serif;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, #1b1708 0, #0d0f12 34%, var(--bg) 65%);
  background-size: 44px 44px, 44px 44px, auto;
  overflow-x: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .14; }
.ambient-one { width: 320px; height: 320px; background: var(--gold); top: 20%; left: -220px; }
.ambient-two { width: 240px; height: 240px; background: #8b6b00; right: -100px; top: 55%; }

.topbar {
  height: 74px;
  padding: 0 clamp(22px, 5vw, 78px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(8,10,13,.75);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { display: flex; align-items: center; gap: 11px; color: white; text-decoration: none; }
.brand-mark { width: 27px; height: 27px; position: relative; transform: rotate(45deg); }
.brand-mark i { position: absolute; width: 7px; height: 7px; background: var(--gold); }
.brand-mark i:nth-child(1) { top: 0; left: 10px; }
.brand-mark i:nth-child(2) { top: 10px; left: 0; }
.brand-mark i:nth-child(3) { top: 10px; left: 10px; }
.brand-mark i:nth-child(4) { top: 10px; right: 0; }
.brand-mark i:nth-child(5) { bottom: 0; left: 10px; }
.brand-name { font-size: 18px; letter-spacing: .4px; font-weight: 800; }
.brand-name b { color: var(--gold); }
.beta { font-size: 8px; letter-spacing: 1px; color: var(--gold); border: 1px solid rgba(240,185,11,.45); padding: 3px 5px; border-radius: 3px; }
.nav-links { display: flex; align-items: stretch; height: 100%; gap: 34px; }
.nav-links a { color: var(--muted); text-decoration: none; display: flex; align-items: center; font-size: 13px; position: relative; }
.nav-links a.active, .nav-links a:hover { color: white; }
.nav-links a.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gold); }
.sound-button { background: none; border: 0; color: #89909d; cursor: pointer; font-size: 19px; }
.sound-button.muted { opacity: .35; text-decoration: line-through; }
.wallet-button {
  border: 1px solid rgba(240,185,11,.55);
  background: rgba(240,185,11,.07);
  color: var(--gold);
  border-radius: 7px;
  padding: 10px 17px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  transition: .2s;
}
.wallet-button:hover { background: var(--gold); color: #111; transform: translateY(-1px); }
.wallet-dot { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }

main { width: min(1320px, calc(100% - 36px)); margin: auto; }
.hero { text-align: center; padding: 74px 20px 49px; }
.eyebrow { font-size: 10px; letter-spacing: 4px; color: var(--gold); font-weight: 800; }
.eyebrow span { display: inline-block; width: 18px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 9px; }
.hero h1 { margin: 18px 0 14px; font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -3px; font-weight: 900; }
.hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--gold); text-shadow: 0 0 38px rgba(240,185,11,.17); }
.hero > p { color: #a0a6b0; line-height: 1.8; font-size: 13px; margin: 0; }
.hero-stats { display: flex; justify-content: center; gap: 35px; margin-top: 34px; }
.hero-stats div:not(.divider) { display: flex; flex-direction: column; gap: 4px; }
.hero-stats strong { font-size: 16px; }
.hero-stats span { font-size: 9px; color: #6f7784; letter-spacing: 1px; }
.hero-stats .divider { width: 1px; background: var(--line); }

.game-layout { display: grid; grid-template-columns: 215px 480px 300px; gap: 24px; justify-content: center; align-items: start; }
.panel, .board-shell {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(24,27,32,.94), rgba(13,15,18,.92));
  box-shadow: 0 22px 60px rgba(0,0,0,.3);
}
.panel { border-radius: 10px; padding: 21px; }
.panel-kicker { font-size: 8px; color: #6f7784; letter-spacing: 2px; font-weight: 700; }
.score-block { margin: 19px -21px 0; padding: 0 21px 21px; border-bottom: 1px solid var(--line); position: relative; }
.score-block span { font-size: 11px; color: var(--muted); }
.score-block strong { display: block; font-size: 38px; letter-spacing: -1px; margin-top: 5px; }
.score-block small { position: absolute; right: 21px; bottom: 28px; color: var(--green); font-weight: 700; opacity: 0; }
.score-block small.pop { animation: scorePop .7s ease; }
@keyframes scorePop { 0%{opacity:0; transform:translateY(8px)} 25%{opacity:1} 100%{opacity:0;transform:translateY(-12px)} }
.mini-stat { display: flex; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.mini-stat b { color: white; font-size: 13px; }
.boost-wrap { margin-top: 19px; }
.boost-label { display: flex; justify-content: space-between; font-size: 10px; color: #a8aeb8; }
.boost-label b { color: var(--gold); }
.boost-track { height: 4px; background: #2a2e34; margin: 9px 0; overflow: hidden; }
.boost-track i { display:block; height:100%; width:0; background:linear-gradient(90deg,#a67c00,var(--gold-light)); box-shadow:0 0 10px var(--gold); transition:width .3s; }
.boost-wrap small { display: block; color: #59606c; font-size: 8px; line-height: 1.5; }
.new-game-button { width: 100%; margin-top: 20px; border: 1px solid #343941; background: #25292f; padding: 11px; border-radius: 5px; font-size: 10px; font-weight: 700; cursor:pointer; }
.new-game-button:hover { border-color: var(--gold); color: var(--gold); }

.board-shell { border-radius: 12px; padding: 20px; }
.status-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; font-size:9px; letter-spacing:1px; color:#8f98a8; }
.status-row > span:first-child i { width:5px;height:5px;background:var(--green);border-radius:50%;display:inline-block;margin-right:7px;box-shadow:0 0 7px var(--green); }
.turn-count b { color: var(--gold); margin-left: 5px; }
.board {
  width: 438px;
  height: 438px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 9px;
  padding: 10px;
  background: #080a0c;
  border: 1px solid #31353b;
  border-radius: 7px;
  box-shadow: inset 0 0 40px rgba(0,0,0,.65);
  touch-action: none;
}
.tile {
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  background: #171a1f;
  border: 1px solid rgba(255,255,255,.04);
  color: #4d535d;
  font-weight: 900;
  font-size: 29px;
  overflow:hidden;
  transition: background .15s, transform .12s;
}
.tile::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 45%); pointer-events:none; }
.tile.new { animation: tileAppear .22s cubic-bezier(.2,1.8,.5,1); }
.tile.merged { animation: tileMerge .3s cubic-bezier(.2,1.8,.5,1); }
@keyframes tileAppear { from{transform:scale(.2);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes tileMerge { 0%{transform:scale(.75)} 50%{transform:scale(1.14)} 100%{transform:scale(1)} }
.tile[data-value="2"] { background:#242424;color:#ddd;border-color:#383838; }
.tile[data-value="4"] { background:#313028;color:#f2e8c9;border-color:#4e4933; }
.tile[data-value="8"] { background:#5a4610;color:#ffd95b;border-color:#8f6c0d; }
.tile[data-value="16"] { background:#7c5907;color:#fff0a1;border-color:#b88405;box-shadow:inset 0 0 22px rgba(240,185,11,.15); }
.tile[data-value="32"] { background:#a47400;color:white;border-color:#d79a00;box-shadow:0 0 16px rgba(240,185,11,.16); }
.tile[data-value="64"] { background:#d39c05;color:#101010;border-color:#ffd43f;box-shadow:0 0 22px rgba(240,185,11,.26); }
.tile[data-value="128"] { background:#efb90b;color:#0e0f10;border-color:#ffdc60;box-shadow:0 0 30px rgba(240,185,11,.38); }
.tile[data-value="256"] { background:linear-gradient(135deg,#f4c21e,#ffe376);color:#111;border-color:#fff0ae;box-shadow:0 0 32px rgba(240,185,11,.5); }
.tile[data-value="512"] { background:linear-gradient(135deg,#ffe06c,#fff6c7);color:#191400;border-color:white;box-shadow:0 0 38px rgba(255,225,98,.58); }
.tile[data-value="1024"] { background:linear-gradient(135deg,#fff,#f4c321);color:#151109;border-color:white;box-shadow:0 0 45px rgba(255,255,255,.5);font-size:25px; }
.tile[data-value="2048"], .tile.super { background:linear-gradient(135deg,#111 10%,#f0b90b 11%,#fff3b1 50%,#f0b90b 89%,#111 90%);color:#0b0c0d;border-color:white;box-shadow:0 0 50px rgba(240,185,11,.8);font-size:24px; }
.controls-hint { display:flex;align-items:center;justify-content:center;gap:11px;margin-top:16px;color:#69717e; }
.controls-hint p { margin:0;font-size:8px;line-height:1.5; }
.controls-hint p b { color:#aab0b9;font-size:9px; }
.key-cluster { display:grid;grid-template-columns:repeat(3,15px);grid-template-rows:repeat(2,15px);gap:2px; }
.key-cluster i { background:#24282e;border:1px solid #3a3f47;border-radius:2px;font-style:normal;font-size:8px;text-align:center;line-height:13px; }
.key-cluster i:first-child { grid-column:2; }.key-cluster i:nth-child(2){grid-column:1}.key-cluster i:nth-child(3){grid-column:2}.key-cluster i:nth-child(4){grid-column:3}
.hint-line { width:1px;height:30px;background:var(--line);margin:0 5px; }.gesture{font-size:25px;color:var(--gold)}
.powerup-row { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px; }
.power-button { border:1px solid #343941;background:#181b20;border-radius:5px;display:flex;align-items:center;gap:9px;padding:10px;cursor:pointer;text-align:left; }
.power-button:disabled { opacity:.35;cursor:not-allowed; }.power-button:not(:disabled):hover { border-color:var(--gold); }
.power-button > span { color:var(--gold);font-size:20px; }.power-button div{display:flex;flex-direction:column}.power-button b{font-size:9px}.power-button small{font-size:7px;color:#69717e;margin-top:2px}

.right-panel { padding: 21px 18px 17px; }
.leader-head { display:flex;justify-content:space-between;align-items:flex-start; }
.leader-head h2 { font-size:17px;margin:7px 0 0; }
.live-badge { font-size:7px;color:var(--green);background:rgba(46,213,115,.08);border:1px solid rgba(46,213,115,.25);padding:5px 7px;border-radius:3px;letter-spacing:1px; }
.live-badge i { display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--green);margin-right:4px;animation:pulse 1.4s infinite; }
.live-badge.offline { color:#8f98a8;background:rgba(143,152,168,.08);border-color:rgba(143,152,168,.22); }
.live-badge.offline i { background:#8f98a8;box-shadow:none;animation:none; }
.live-badge.error { color:#ff6b6b;background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.22); }
.live-badge.error i { background:#ff6b6b;animation:none; }
@keyframes pulse { 50%{opacity:.25} }
.rank-tabs { display:grid;grid-template-columns:1fr 1fr;background:#0d0f12;border-radius:4px;padding:3px;margin:17px 0 10px; }
.rank-tabs button { border:0;background:transparent;color:#646c78;font-size:9px;padding:7px;cursor:pointer;border-radius:3px; }
.rank-tabs button.active { background:#25292f;color:white; }
.rank-list { min-height: 250px; }
.rank-empty { min-height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;text-align:center;color:#69717e;font-size:9px;line-height:1.6; }
.rank-empty b { color:#aeb4bd;font-size:10px; }
.rank-row { display:grid;grid-template-columns:21px 31px 1fr auto;gap:8px;align-items:center;padding:9px 4px;border-bottom:1px solid rgba(255,255,255,.05); }
.rank-row .rank-number { font-size:10px;color:#68717d;font-weight:700;text-align:center; }
.rank-row:nth-child(1) .rank-number{color:#f6c72a}.rank-row:nth-child(2) .rank-number{color:#c7cbd1}.rank-row:nth-child(3) .rank-number{color:#c58655}
.avatar { width:29px;height:29px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;background:linear-gradient(135deg,#30353d,#15181c);color:#b2b8c0;border:1px solid #3b414a; }
.avatar.gold{background:linear-gradient(135deg,#7b5e00,#e7b10b);color:#111;border-color:#f8d03a}.avatar.blue{background:linear-gradient(135deg,#153a4d,#2983a7)}.avatar.purple{background:linear-gradient(135deg,#322052,#714eaa)}.avatar.red{background:linear-gradient(135deg,#59252d,#a34350)}
.rank-row div:nth-child(3),.your-rank div{display:flex;flex-direction:column;min-width:0}.rank-row b,.your-rank b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-row small,.your-rank small{color:#59616d;font-size:7px;margin-top:3px}.rank-row strong{font-size:10px}
.your-rank { display:grid;grid-template-columns:21px 31px 1fr auto;gap:8px;align-items:center;margin:11px -6px 0;padding:11px 10px;background:rgba(240,185,11,.07);border:1px solid rgba(240,185,11,.25);border-radius:5px; }
.your-rank .rank-number{font-size:10px;color:var(--gold);font-weight:800;text-align:center}.avatar.you{color:var(--gold);font-size:7px;border-color:rgba(240,185,11,.4)}.your-rank strong{color:var(--gold);font-size:11px}.rank-note{text-align:center;color:#515965;font-size:7px;margin:9px 0 0}
.submit-score-button{width:100%;margin-top:10px;padding:9px;border-radius:4px;border:1px solid rgba(240,185,11,.35);background:rgba(240,185,11,.08);color:var(--gold);font-size:8px;font-weight:800;letter-spacing:.5px;cursor:pointer}.submit-score-button:hover:not(:disabled){background:var(--gold);color:#111}.submit-score-button:disabled{opacity:.32;cursor:not-allowed}

.how-to { padding: 105px 0 95px; }
.section-title{text-align:center}.section-title span{font-size:8px;color:var(--gold);letter-spacing:3px}.section-title h2{font-size:28px;margin:10px 0 38px}
.steps { display:grid;grid-template-columns:repeat(3,1fr);max-width:810px;margin:auto; }
.steps article{text-align:center;position:relative;padding:14px 45px}.steps article+article{border-left:1px solid var(--line)}.steps article>span{position:absolute;top:0;left:42px;color:#30353d;font-size:25px;font-weight:900}.steps i{display:block;font-size:31px;color:var(--gold);font-style:normal;height:42px}.steps h3{font-size:13px;margin:15px 0 8px}.steps p{font-size:9px;color:#737c89;margin:0}
footer { min-height:80px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(25px,6vw,85px);color:#525a65;font-size:8px;letter-spacing:.3px; }
.footer-brand{font-size:13px;color:white;font-weight:800}.footer-brand b{color:var(--gold)}footer>span{letter-spacing:2px}

.modal-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px; }
.modal-backdrop[hidden]{display:none}.modal{width:min(390px,100%);background:#15181d;border:1px solid rgba(240,185,11,.3);border-radius:12px;padding:34px;text-align:center;box-shadow:0 0 80px rgba(240,185,11,.12);position:relative}.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;color:#757d89;font-size:25px;cursor:pointer}.modal-icon{display:flex;width:54px;height:54px;align-items:center;justify-content:center;background:rgba(240,185,11,.12);color:var(--gold);margin:0 auto 18px;transform:rotate(45deg);font-size:23px}.modal-icon::first-letter{transform:rotate(-45deg)}.modal h2{font-size:22px;margin:0 0 10px}.modal p{font-size:11px;color:#929aa6;line-height:1.7}.modal-primary{margin-top:14px;width:100%;border:0;background:var(--gold);color:#0b0d0f;font-weight:800;border-radius:5px;padding:12px;cursor:pointer}
.toast-stack{position:fixed;right:22px;top:90px;z-index:120;display:flex;flex-direction:column;gap:8px}.toast{background:#20242a;border:1px solid #3b414a;border-left:3px solid var(--gold);padding:11px 15px;border-radius:5px;font-size:10px;box-shadow:0 10px 25px rgba(0,0,0,.3);animation:toastIn .25s ease;max-width:280px}.toast b{color:var(--gold);margin-right:6px}@keyframes toastIn{from{opacity:0;transform:translateX(20px)}}
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:110;overflow:hidden}.confetti{position:absolute;top:-15px;width:7px;height:14px;background:var(--gold);animation:fall 1.8s ease-in forwards}@keyframes fall{to{transform:translate(var(--drift),105vh) rotate(720deg);opacity:.4}}

@media(max-width:1050px){.game-layout{grid-template-columns:210px 480px}.right-panel{grid-column:1/-1;width:480px;justify-self:end}.rank-list{min-height:auto}.rank-row{padding:8px}.hero{padding-top:55px}}
@media(max-width:760px){
  .topbar{height:62px;padding:0 16px}.nav-links{display:none}.beta{display:none}.wallet-button{padding:9px 11px}.hero{padding:48px 5px 35px}.hero h1{letter-spacing:-2px}.hero-stats{gap:17px}.game-layout{display:flex;flex-direction:column;align-items:center}.left-panel{width:min(480px,100%);display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.left-panel>.panel-kicker,.score-block,.boost-wrap,.new-game-button{grid-column:1/-1}.mini-stat{padding:12px 0}.board-shell{width:100%;padding:12px}.board{width:100%;height:auto;aspect-ratio:1}.right-panel{width:100%}.controls-hint{margin-bottom:3px}.steps{grid-template-columns:1fr}.steps article+article{border-left:0;border-top:1px solid var(--line)}.steps article{padding:30px}.steps article>span{left:25%}.how-to{padding:75px 0}footer{padding:25px;gap:15px;flex-direction:column;text-align:center}.tile{font-size:clamp(18px,7vw,29px)}
}
@media(max-width:390px){main{width:calc(100% - 20px)}.hero-stats .divider{display:none}.hero-stats{gap:13px}.board{gap:6px;padding:7px}.controls-hint{transform:scale(.9)}.powerup-row{grid-template-columns:1fr}.left-panel{padding:18px}.score-block{margin-left:-18px;margin-right:-18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;scroll-behavior:auto!important;transition:none!important}}