:root{--bg-1: #0b0f1a;--bg-2: #1b2233;--panel: #111827;--panel-border: #2a3550;--accent: #f59e0b;--text: #e5e7eb;--muted: #9aa6bf;--cell: 26px;--gap: 2px;--board-width: calc((var(--cell) * 10) + (var(--gap) * 9) + 40px)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%}body{margin:0;font-family:Courier New,Courier,monospace;background:radial-gradient(1200px 600px at 20% -10%,#24304d,transparent),radial-gradient(1000px 500px at 120% 20%,#182036,transparent),linear-gradient(180deg,var(--bg-1),var(--bg-2));color:var(--text);min-height:100vh;overflow:hidden}.viewport-fit{width:100vw;height:100vh;display:grid;place-items:center;padding:12px}.viewport-fit.is-fullscreen{padding:0}.app-frame{position:relative}.app-scale{position:absolute;top:0;left:0;transform-origin:top left;will-change:transform}.app{display:grid;grid-template-columns:max-content;gap:24px;padding:24px;width:fit-content;max-width:95vw;justify-content:center;background:#080c16bf;border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 20px 60px #0006}.title{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;gap:12px}.title-actions{display:inline-flex;align-items:center;gap:8px}.title h1{margin:0;font-size:28px;letter-spacing:1px}.title span{color:var(--accent);font-size:14px}.setup-button{min-width:42px;min-height:42px;padding:0;display:inline-grid;place-items:center;font-size:20px;line-height:1}.top-strip{grid-column:1 / -1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.top-hearts{color:var(--accent);font-size:22px;line-height:1;display:inline-flex;align-items:center;gap:0}.top-heart{display:inline-flex;align-items:center;justify-content:center;width:.9em}.top-heart.is-filled{color:var(--accent)}.top-heart.is-empty{color:var(--muted)}.top-next{display:grid;grid-template-columns:repeat(4,calc(var(--cell) / 2));grid-template-rows:repeat(4,calc(var(--cell) / 2));gap:1px;background:#0b1220;border:1px solid #27324a;border-radius:6px;padding:4px}.mini-preview-cell{width:calc(var(--cell) / 2);height:calc(var(--cell) / 2);background:#0e1424;border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff08}.top-stats{display:grid;gap:4px}.top-stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:var(--muted)}.top-stat strong{color:var(--text);font-size:14px}.board{position:relative;background:#0c1220;border:1px solid var(--panel-border);border-radius:12px;padding:12px;width:var(--board-width);justify-self:start}.board-status{position:absolute;top:50%;left:12px;right:12px;transform:translateY(-50%);z-index:2;pointer-events:none;padding:10px 19px;border-radius:8px;border:1px solid #27324a;background:#070a13d9;color:var(--accent);font-size:28px;font-weight:700;letter-spacing:.4px;text-align:center}.setup-overlay{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#070a13a6;border-radius:12px}.setup-panel{width:min(360px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:16px;display:grid;gap:10px}.setup-panel h2{margin:0 0 6px;font-size:16px;color:var(--accent)}.grid{display:grid;grid-template-columns:repeat(10,var(--cell));grid-template-rows:repeat(20,var(--cell));gap:var(--gap);background:#070a13;padding:8px;border-radius:8px}.cell{width:var(--cell);height:var(--cell);background:#0e1424;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff08}.side{display:flex;flex-direction:column;gap:16px}.side-top{display:grid;grid-template-columns:1fr;gap:16px}.side-col{display:flex;flex-direction:column;gap:16px}.board-controls{grid-column:1 / 2;display:grid;grid-template-columns:1fr;align-items:start;gap:12px;width:var(--board-width);max-width:var(--board-width);padding:8px 2px 0}.controls-stack{display:grid;gap:8px;justify-items:start}.control-buttons{grid-template-columns:repeat(2,max-content)}.control-buttons button{font-size:32px;line-height:1;display:inline-grid;place-items:center;min-width:64px;min-height:48px;padding:8px}.control-help{margin:0;font-size:12px;line-height:1.35;max-width:100%;width:100%;text-align:left}.touch-layout{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%}.touch-wasd{display:grid;grid-template-columns:repeat(3,max-content);grid-template-rows:repeat(3,max-content);gap:6px}.touch-key{font-size:26px;line-height:1;min-width:52px;min-height:44px;padding:6px}.touch-rotate{grid-column:2;grid-row:1}.touch-left{grid-column:1;grid-row:2}.touch-right{grid-column:3;grid-row:2}.touch-down{grid-column:2;grid-row:2}.touch-drop{font-size:28px;line-height:1;min-width:54px;min-height:94px;padding:6px}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:16px;display:grid;gap:10px}.panel h2{margin:0 0 6px;font-size:16px;color:var(--accent)}.stat{display:flex;justify-content:space-between;font-size:14px}.life-row{display:flex;justify-content:space-between;align-items:center;font-size:14px}.hearts{color:var(--accent);letter-spacing:2px}.preview-grid{display:grid;grid-template-columns:repeat(4,var(--cell));grid-template-rows:repeat(4,var(--cell));gap:var(--gap);background:#0b1220;padding:8px;border:1px solid #27324a;border-radius:8px;width:fit-content}.preview-cell{width:var(--cell);height:var(--cell);background:#0e1424;border-radius:4px;box-shadow:inset 0 0 0 1px #ffffff08}.piece-i{background:#38bdf8}.piece-o{background:#facc15}.piece-t{background:#c084fc}.piece-s{background:#4ade80}.piece-z{background:#f87171}.piece-j{background:#60a5fa}.piece-l{background:#fb923c}.controls{display:grid;gap:8px}button{background:var(--accent);color:#111827;border:none;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}button.secondary{background:#334155;color:var(--text)}button:active{transform:translateY(1px)}label{display:grid;gap:6px;font-size:13px;color:var(--muted)}input[type=number]{background:#0b1220;border:1px solid #27324a;color:var(--text);border-radius:6px;padding:8px;font-family:inherit}.help{font-size:12px;color:var(--muted);line-height:1.4}