.b-main { flex: 1; display: flex; justify-content: center; padding: 16px 16px 32px; }
.b-wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; position: relative; }
.b-grid {
  --gap: 4px;
  width: 100%; aspect-ratio: 1; padding: 8px; border-radius: 20px;
  background: #e4e4ea; display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  touch-action: none;
}
.b-cell { border-radius: 7px; background: rgba(255,255,255,0.65); position: relative; transition: background-color 0.12s var(--ease); }
.b-cell.f, .b-pc { box-shadow: inset 0 -3px 0 rgba(0,0,0,0.14), inset 0 2px 0 rgba(255,255,255,0.35); }
.c1 { background: #ef4444; } .c2 { background: #f59e0b; } .c3 { background: #eab308; }
.c4 { background: #22c55e; } .c5 { background: #06b6d4; } .c6 { background: #3b82f6; } .c7 { background: #a855f7; }
.b-cell.prev { background: rgba(21, 128, 61, 0.35); }
.b-cell.prev.bad { background: rgba(180, 35, 24, 0.25); }
.b-cell.willclear::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.95); }
.b-cell.pop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pc, #fff); animation: bpop 0.42s var(--ease) forwards; }
@keyframes bpop { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.12); opacity: 0.9; filter: brightness(1.6); } 100% { transform: scale(0.2); opacity: 0; } }
.b-combo { height: 28px; margin-top: 10px; font-size: 17px; font-weight: 600; color: #15803d; letter-spacing: -0.01em; opacity: 0; transition: opacity 0.2s; }
.b-combo.show { opacity: 1; }
.b-tray { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; min-height: 120px; }
.b-slot { display: flex; align-items: center; justify-content: center; height: 120px; overflow: hidden; border-radius: 16px; background: rgba(255,255,255,0.6); cursor: grab; touch-action: none; transition: opacity 0.15s, transform 0.15s var(--ease); }
.b-slot:active { cursor: grabbing; }
.b-slot.empty { cursor: default; background: transparent; }
.b-slot.lifted { opacity: 0.25; }
.b-slot.dead { opacity: 0.35; }
.b-piece { display: grid; gap: 3px; pointer-events: none; }
.b-pc { border-radius: 5px; }
.b-hint { font-size: 13px; color: #86868b; text-align: center; margin: 16px 0 0; }
.b-ghost { position: fixed; left: 0; top: 0; z-index: 1500; pointer-events: none; display: grid; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.22)); }
.b-ghost[hidden] { display: none; }
.b-ghost .b-pc { border-radius: 7px; }
@media (max-width: 640px) {
  .b-main { padding: 10px 10px 24px; }
  .b-grid { --gap: 3px; padding: 6px; border-radius: 16px; }
  .b-cell { border-radius: 5px; }
  .b-slot { height: 104px; }
  #restart span { display: none; }
  #restart { width: 40px; justify-content: center; padding: 0; }
}

/* ===== Scene look (same in light and dark): deep blue stage, glass grid, glossy blocks ===== */
/* Owner 11-08: emerald stage in light mode, midnight + emerald glow in dark mode */
.b-wrap { padding: 16px 16px 18px; border-radius: 28px; background: radial-gradient(120% 80% at 50% 0%, #22c55e 0%, #15803d 40%, #052e1c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px rgba(5,46,28,.35); overflow: hidden; }
[data-theme="dark"] .b-wrap { background: radial-gradient(90% 60% at 50% 0%, rgba(34,197,94,.35) 0%, rgba(34,197,94,0) 60%), linear-gradient(180deg, #151b18 0%, #0a0d0b 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.5); }
.b-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 30% at 85% 10%, rgba(134,239,172,.25), transparent 70%), radial-gradient(35% 25% at 10% 90%, rgba(250,204,21,.12), transparent 70%); pointer-events: none; }
.b-grid, [data-theme="dark"] .b-grid { position: relative; background: rgba(4, 12, 40, .45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 6px 18px rgba(0,0,0,.35); }
.b-cell:not(.f), [data-theme="dark"] .b-cell:not(.f) { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.b-cell.f, .b-pc { box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.25); }
.b-cell.f::after, .b-pc::after { content: ""; position: absolute; left: 14%; top: 10%; width: 42%; height: 26%; border-radius: 40% 40% 50% 50%; background: rgba(255,255,255,.35); pointer-events: none; }
.b-pc { position: relative; }
.c1 { background: linear-gradient(160deg, #ff8a8a, #ef4444 55%, #b91c1c); }
.c2 { background: linear-gradient(160deg, #fdba74, #f59e0b 55%, #c2410c); }
.c3 { background: linear-gradient(160deg, #fef08a, #eab308 55%, #a16207); }
.c4 { background: linear-gradient(160deg, #86efac, #22c55e 55%, #15803d); }
.c5 { background: linear-gradient(160deg, #67e8f9, #06b6d4 55%, #0e7490); }
.c6 { background: linear-gradient(160deg, #93c5fd, #3b82f6 55%, #1d4ed8); }
.c7 { background: linear-gradient(160deg, #d8b4fe, #a855f7 55%, #7e22ce); }
.b-cell.prev { background: rgba(134, 239, 172, .4) !important; box-shadow: inset 0 0 0 2px rgba(187,247,208,.7); }
.b-cell.prev.bad { background: rgba(248, 113, 113, .35) !important; box-shadow: inset 0 0 0 2px rgba(254,202,202,.6); }
.b-cell.willclear::after { inset: 0; left: 0; top: 0; width: auto; height: auto; border-radius: inherit; background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 2px #fff; }
.b-cell.land { animation: b-land .28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes b-land { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.b-slot:not(.empty), [data-theme="dark"] .b-slot:not(.empty) { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.b-slot:not(.empty):hover { background: rgba(255,255,255,.13); }
.b-combo, [data-theme="dark"] .b-combo { color: #fde047; text-shadow: 0 2px 8px rgba(0,0,0,.4); position: relative; }
.b-hint, [data-theme="dark"] .b-hint { color: rgba(255,255,255,.7); position: relative; }
.b-tray { position: relative; }
.b-ghost .b-pc { box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 0 rgba(0,0,0,.22), 0 10px 18px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .b-cell.land { animation: none; } }