* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; background:#14141f; font-family:-apple-system,'Segoe UI',system-ui,sans-serif; user-select:none; -webkit-user-select:none; touch-action:none; }
#app { height:100%; max-width:520px; margin:0 auto; display:flex; flex-direction:column; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
header { display:flex; justify-content:space-between; align-items:center; padding:4px 2px 12px; }
.logo { font-size:26px; font-weight:900; color:#fff; letter-spacing:1px; }
.logo span { color:#ffd166; }
.scores { display:flex; gap:10px; }
.score-box { background:#1f1f30; border-radius:12px; padding:6px 14px; text-align:center; min-width:76px; }
.score-box label { font-size:10px; font-weight:700; color:#8a8aa3; letter-spacing:2px; }
.score-box div { font-size:22px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; }
.score-box.best div { color:#ffd166; }
#board-wrap { position:relative; width:100%; aspect-ratio:1; }
#board { position:absolute; inset:0; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(10,1fr); gap:3px; background:#1a1a2a; border-radius:14px; padding:6px; }
.cell { background:#242438; border-radius:4px; transition:background .12s, transform .12s; position:relative; }
.cell.filled { box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); }
.cell.ghost { opacity:.55; transform:scale(.92); }
.cell.clearing { animation:pop .3s ease forwards; }
@keyframes pop { 40% { transform:scale(1.25); filter:brightness(1.6);} 100% { transform:scale(0); opacity:0; } }
#tray { display:flex; justify-content:space-around; align-items:center; height:110px; margin-top:14px; }
.tray-piece { display:grid; gap:2px; cursor:grab; padding:8px; transition:transform .15s, opacity .2s; touch-action:none; }
.tray-piece.placed { opacity:0; transform:scale(.5); pointer-events:none; }
.tray-piece .p-cell { border-radius:3px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); }
#drag-ghost { position:fixed; z-index:50; pointer-events:none; display:grid; gap:2px; opacity:.95; filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
#combo { position:absolute; left:50%; top:38%; transform:translateX(-50%); font-size:34px; font-weight:900; color:#ffd166; text-shadow:0 2px 12px rgba(255,209,102,.4); z-index:40; pointer-events:none; animation:comboPop 1s ease forwards; }
@keyframes comboPop { 0% { transform:translateX(-50%) scale(.3); opacity:0;} 25% { transform:translateX(-50%) scale(1.2); opacity:1;} 70% { transform:translateX(-50%) scale(1); opacity:1;} 100% { transform:translateX(-50%) scale(1); opacity:0;} }
#gameover { position:fixed; inset:0; background:rgba(10,10,18,.8); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:100; }
#gameover.hidden, .hidden { display:none; }
.card { background:#1f1f30; border-radius:24px; padding:36px 48px; text-align:center; animation:cardIn .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes cardIn { from { transform:scale(.6); opacity:0;} }
.go-title { font-size:15px; font-weight:800; letter-spacing:4px; color:#8a8aa3; }
.go-score { font-size:56px; font-weight:900; color:#fff; margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.go-best { font-size:14px; font-weight:800; color:#ffd166; min-height:20px; margin-bottom:18px; }
#again { background:#ffd166; color:#14141f; border:0; font-size:17px; font-weight:900; letter-spacing:1px; padding:14px 32px; border-radius:14px; cursor:pointer; box-shadow:0 4px 0 #c9a13f; }
#again:active { transform:translateY(3px); box-shadow:0 1px 0 #c9a13f; }
.shake { animation:shake .3s; }
@keyframes shake { 25% { transform:translateX(-5px);} 50% { transform:translateX(5px);} 75% { transform:translateX(-3px);} }
#daily { font-size:10px; font-weight:800; letter-spacing:2px; color:#8a8aa3; margin-top:2px; }
.particle { position:absolute; width:7px; height:7px; border-radius:2px; pointer-events:none; z-index:45; animation:fly .65s cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes fly { to { transform:translate(var(--dx),var(--dy)) scale(.2); opacity:0; } }
.float-score { position:absolute; transform:translate(-50%,-50%); font-size:18px; font-weight:900; color:#fff; pointer-events:none; z-index:46; animation:floatUp .85s ease-out forwards; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.float-score.big { font-size:26px; color:#ffd166; }
@keyframes floatUp { 20% { opacity:1; } 100% { transform:translate(-50%,-160%); opacity:0; } }
.cell.blocked { background:#5c2438 !important; transition:none; }
.tray-piece.last-hope { animation:hope 1.1s ease-in-out infinite; }
@keyframes hope { 50% { transform:scale(1.12); filter:brightness(1.25); } }