:root{--bg-top: #0f172a;--bg-bottom: #0b1224;--panel: rgba(15, 23, 42, .95);--cyan: #22d3ee;--emerald: #22c55e;--amber: #f59e0b;--danger: #ef4444;--shadow: rgba(0, 0, 0, .4)}*{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}body{margin:0;padding:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;color:#e2e8f0;background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));overflow:hidden;touch-action:none}.app{width:100vw;height:100vh;position:relative;overflow:hidden}.canvas-container{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;touch-action:none;pointer-events:auto}.ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;display:flex;flex-direction:column;padding:8px;gap:8px}.stats-bar{display:flex;justify-content:space-around;align-items:center;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:8px 12px;gap:12px;box-shadow:0 4px 20px var(--shadow);pointer-events:auto;border:1px solid rgba(148,163,184,.2);align-self:flex-start;width:calc(100% - 16px);margin:0 auto}.stat-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.stat-label{font-size:.7rem;color:#94a3b8;font-weight:600;letter-spacing:.05em;text-transform:uppercase}.stat-value{font-size:1.1rem;font-weight:800;color:#f8fafc;letter-spacing:.02em}.stat-value.combo{color:var(--emerald);text-shadow:0 0 10px rgba(34,197,94,.5)}.next-block-preview{align-self:flex-end;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:8px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px var(--shadow);border:1px solid rgba(148,163,184,.2);pointer-events:none;margin-top:60px;margin-right:8px}.preview-label{font-size:.85rem;color:#94a3b8;font-weight:600}.preview-block{width:24px;height:24px;background:var(--cyan);border-radius:4px;box-shadow:0 2px 8px #22d3ee66}.controls-hint{align-self:center;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:8px 14px;box-shadow:0 4px 20px var(--shadow);border:1px solid rgba(148,163,184,.2);pointer-events:none;animation:fadeInOut 2s ease-in-out 2,fadeOut .5s ease-in 4s forwards;margin-top:auto;margin-bottom:20px}.controls-hint p{margin:0;font-size:.85rem;color:#cbd5e1;font-weight:500;text-align:center}@keyframes fadeInOut{0%,to{opacity:.6}50%{opacity:1}}@keyframes fadeOut{to{opacity:0;visibility:hidden}}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:auto}.modal{background:linear-gradient(180deg,#1e293b,#0f172a);border-radius:24px;padding:32px 24px;max-width:90%;width:400px;box-shadow:0 20px 60px #00000080;border:1px solid rgba(148,163,184,.3);animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal h1{font-size:2.5rem;margin:0 0 8px;text-align:center;background:linear-gradient(135deg,var(--cyan),var(--emerald));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal h2{font-size:2rem;margin:0 0 20px;text-align:center;color:#f8fafc}.instructions{color:#cbd5e1;line-height:1.8}.instructions ul{list-style:none;padding:0;margin:20px 0}.instructions li{padding:8px 0;font-size:.95rem}.instructions strong{color:var(--cyan)}.modal-actions{display:flex;gap:12px;margin-top:24px;justify-content:center}button{background:linear-gradient(135deg,#1e293b,#0f172a);color:#e2e8f0;border:1px solid rgba(148,163,184,.3);border-radius:12px;padding:12px 24px;font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 12px var(--shadow);transition:transform .15s ease,box-shadow .15s ease;font-size:1rem;touch-action:manipulation}button:hover{transform:translateY(-2px);box-shadow:0 6px 16px var(--shadow)}button:active{transform:translateY(0);box-shadow:0 2px 8px var(--shadow)}.primary-button{border-color:#22d3ee99;background:linear-gradient(135deg,#0ea5e9,#06b6d4);color:#0b1224}.summary{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}.card{background:#0f172a99;border-radius:12px;padding:16px;text-align:center;border:1px solid rgba(148,163,184,.2)}.card-label{font-size:.8rem;color:#94a3b8;margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.card-value{font-size:1.8rem;font-weight:800;color:var(--cyan);text-shadow:0 0 10px rgba(34,211,238,.5)}.gameover .modal h1{font-size:3rem;margin-bottom:24px}.toast-area{position:absolute;top:80px;left:50%;transform:translate(-50%);z-index:50;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:center}.toast{background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:12px 20px;color:#f8fafc;font-weight:600;box-shadow:0 4px 20px var(--shadow);border:1px solid rgba(148,163,184,.2);animation:toastSlideIn .3s ease-out,toastFadeOut .3s ease-in 2.7s;animation-fill-mode:forwards;pointer-events:auto;font-size:.9rem}.toast.success{border-color:#22c55e80;background:#22c55e33;color:var(--emerald)}.toast.error{border-color:#ef444480;background:#ef444433;color:var(--danger)}.toast.info{border-color:#22d3ee80;background:#22d3ee33;color:var(--cyan)}@keyframes toastSlideIn{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastFadeOut{to{opacity:0;transform:translate(-50%) translateY(-20px)}}@media(max-width:768px){.ui-overlay{padding:6px;gap:6px}.stats-bar{padding:6px 10px;gap:8px;border-radius:10px}.stat-label{font-size:.6rem}.stat-value{font-size:.9rem}.next-block-preview{padding:6px 12px;gap:8px;border-radius:10px;margin-top:50px;margin-right:6px}.preview-label{font-size:.75rem}.preview-block{width:20px;height:20px}.controls-hint{padding:6px 12px;border-radius:10px;margin-bottom:15px}.controls-hint p{font-size:.75rem}.modal{padding:24px 20px;max-width:95%}.modal h1{font-size:2rem}.modal h2{font-size:1.75rem}.card-value{font-size:1.5rem}.summary{gap:12px}.card{padding:12px}}@supports (padding: max(0px)){.ui-overlay{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}}*{touch-action:manipulation}