:root { --cell: 52px; --gap: 5px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: linear-gradient(180deg,#dbeafe,#eaf2ff); color: #1f2a44; }
.app {
  width: min(1240px, calc(100vw - 24px));
  margin: 12px auto;
  background: url('./assets/app-bg.jpg') center/100% 100% no-repeat;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.1);
  padding: 12px;
  overflow: hidden;
}
.hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 6px 4px 10px; }
.hud-left { justify-self: start; }
.hud-center { justify-self: center; }
.hud-right { justify-self: end; }

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  border: 3px solid rgba(255,255,255,.72);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -4px 0 rgba(0,0,0,.14),
    0 0 0 3px #9ad7ff,
    0 6px 12px rgba(0,0,0,.24);
  text-shadow: 0 2px 0 rgba(0,0,0,.22);
  -webkit-text-stroke: 0.8px rgba(18, 28, 45, 0.35);
  paint-order: stroke fill;
  font-size: 20px;
}

.score-pill { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.42), rgba(255,255,255,0) 38%), linear-gradient(180deg, #ffd46c 0%, #ffac4b 52%, #f27d33 100%); min-width: 230px; }
.level-pill { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.42), rgba(255,255,255,0) 38%), linear-gradient(180deg, #98f5b8 0%, #57dd87 52%, #1daa5f 100%); min-width: 300px; justify-content:center; }
.target-pill { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.42), rgba(255,255,255,0) 38%), linear-gradient(180deg, #86dfff 0%, #48befa 52%, #1490d4 100%); }
.pause-pill { background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.42), rgba(255,255,255,0) 38%), linear-gradient(180deg, #dfc4ff 0%, #bf8cff 52%, #9a58f3 100%); min-width: 150px; justify-content:center; cursor:pointer; }
.side-target-pill { width: 100%; justify-content: center; margin-bottom: 10px; }

.stat-pill .icon {
  font-size: 20px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

.stat-pill strong, .stat-pill span {
  letter-spacing: .2px;
}
.game-layout { display: grid; grid-template-columns: 1fr max-content 360px; gap: 14px; margin: 12px 0; align-items: start; width: 100%; }
.game-layout > section { grid-column: 2; display: flex; justify-content: center; }
.game-layout > aside { grid-column: 3; justify-self: stretch; width: 100%; }
.board-wrap { position: relative; width: max-content; margin: 0 auto; }
.board { display: grid; grid-template-columns: repeat(8, var(--cell)); gap: var(--gap); background: #3254a5; padding: 10px; border-radius: 14px; width: max-content; }
.line-indicators { position:absolute; inset:0; pointer-events:none; z-index: 25; }
.line-indicator {
  position:absolute;
  overflow: visible;
  border: none;
  border-radius: 12px;
  background: rgba(255, 245, 170, 0.18);
  box-shadow:
    0 0 20px rgba(255,245,170,.95),
    0 0 36px rgba(255,245,170,.68);
  animation: lineBasePulse 1300ms ease-in-out infinite;
}

/* outward repeating glow ring (glow only, no outline) */
.line-indicator::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: none;
  box-shadow: 0 0 0 0 rgba(255,245,170,.75);
  animation: lineRingExpand 1300ms ease-out infinite;
}

/* subtle internal shimmer */
.line-indicator::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 14px;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,0) 65%);
  transform: translateX(-130%);
  animation: lineSweep 1500ms linear infinite;
}

@keyframes lineBasePulse {
  0% { filter: brightness(1); opacity: .72; }
  50% { filter: brightness(1.18); opacity: .95; }
  100% { filter: brightness(1); opacity: .72; }
}

@keyframes lineRingExpand {
  0% {
    opacity: .7;
    box-shadow: 0 0 0 0 rgba(255,245,170,.5);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0 16px rgba(255,245,170,0);
  }
}

@keyframes lineSweep {
  0% { transform: translateX(-130%); opacity:.18; }
  30% { opacity:.65; }
  100% { transform: translateX(130%); opacity:.08; }
}
.cell { position: relative; width: var(--cell); height: var(--cell); border-radius: 8px; background: #24438f; border: 1px solid rgba(255,255,255,.08); z-index: 1; }
.cell.filled {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), rgba(255,255,255,0) 42%),
    linear-gradient(to bottom, color-mix(in srgb, var(--block-color) 88%, white), color-mix(in srgb, var(--block-color) 85%, black));
  border-color: color-mix(in srgb, var(--block-color) 72%, #111);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.14),
    0 2px 6px rgba(0,0,0,.2);
}
.side { background: #f4f8ff; border-radius: 12px; padding: 12px; }
.palette { display: flex; gap: 8px; margin: 10px 0; }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 2px solid rgba(0,0,0,.15); }
.tip { font-size: 13px; opacity: .8; }
.progress-box { margin: 10px 0; background:#fff; border-radius:10px; padding:8px; border:1px solid #dbeafe; }
.progress-head { display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:#1e3a8a; margin-bottom:6px; }
.progress-track { height:10px; background:#dbeafe; border-radius:999px; overflow:hidden; }
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg,#22c55e,#84cc16); transition:width .25s ease; }
.app > section { text-align: center; }
.pieces {
  --slot: calc(var(--cell) * 3 + var(--gap) * 2 + 16px);
  display: grid;
  grid-template-columns: repeat(3, var(--slot));
  gap: 14px;
  padding: 8px;
  background: #f5f6ff;
  border-radius: 10px;
  margin: 14px auto 0;
  width: calc(var(--slot) * 3 + 14px * 2 + 16px);
}
.piece {
  width: var(--slot);
  height: var(--slot);
  display: grid;
  place-content: center;
  gap: var(--gap);
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  cursor: grab;
  user-select: none;
}
.piece:active { cursor: grabbing; }
.piece-cell {
  width: var(--cell);
  height: var(--cell);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.2);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -3px 0 rgba(0,0,0,0.12),
    0 2px 6px rgba(0,0,0,0.18);
}
.piece-cell.filled {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.38), rgba(255,255,255,0) 42%),
    linear-gradient(to bottom, color-mix(in srgb, var(--piece-color) 90%, white), color-mix(in srgb, var(--piece-color) 84%, black));
  border-color: color-mix(in srgb, var(--piece-color) 74%, #111);
}

.piece.incoming {
  animation: pieceIncoming 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes pieceIncoming {
  0% { transform: translateX(-18px) scale(0.8); opacity: 0; }
  70% { transform: translateX(4px) scale(1.06); opacity: 1; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

.cell.preview-ok {
  z-index: 5;
  outline: 2px solid var(--preview-color, #34d399);
  outline-offset: -2px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), rgba(255,255,255,0) 42%),
    linear-gradient(to bottom, color-mix(in srgb, var(--preview-color, #34d399) 90%, white), color-mix(in srgb, var(--preview-color, #34d399) 84%, black)) !important;
  border-color: color-mix(in srgb, var(--preview-color, #34d399) 72%, #111);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.28) inset,
    0 0 14px var(--preview-color, #34d399),
    0 0 26px color-mix(in srgb, var(--preview-color, #34d399) 78%, white);
}

.cell.preview-bad {
  z-index: 5;
  outline: 2px solid #f87171;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 9999px rgba(248, 113, 113, 0.4), 0 0 12px rgba(248, 113, 113, 0.4);
}



.cell.place-pop {
  animation: placePop 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes placePop {
  0% { transform: scale(0.72); filter: brightness(1.35) saturate(1.2); }
  60% { transform: scale(1.14); filter: brightness(1.12) saturate(1.1); }
  100% { transform: scale(1); filter: brightness(1) saturate(1); }
}

.board.line-clear .cell {
  animation: lineClear 280ms ease-out;
}

@keyframes lineClear {
  0% { filter: brightness(1.4); box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset, 0 0 16px #fff; }
  100% { filter: brightness(1); box-shadow: none; }
}

.combo-fx {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 28px;
  z-index: 30;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 14px rgba(255,255,255,.65);
  opacity: 0;
}

.combo-fx.show {
  animation: comboPop 560ms ease-out;
}

@keyframes comboPop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.72); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1); }
}
footer { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.lang-corner { margin-left: auto; }
button:not(.pause-pill) { border: none; background: linear-gradient(180deg,#4ade80,#22c55e); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 800; cursor: pointer; box-shadow:0 4px 10px rgba(34,197,94,.3); }
button:not(.pause-pill):active { transform: translateY(1px); }
.btn-secondary { background: linear-gradient(180deg,#60a5fa,#3b82f6); box-shadow:0 4px 10px rgba(59,130,246,.3); }
.lang-box { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lang-box select { border-radius: 8px; border: none; padding: 4px 8px; }
#status { font-weight: 700; }

.modal { position: fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal.hidden { display:none; }
.modal-card { width:min(420px,92vw); background:#fff; border-radius:16px; padding:18px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.modal-card h2 { margin: 0 0 4px; color:#1d4ed8; }
.modal-card p { margin: 0 0 8px; color:#475569; }
.modal-stars { font-size: 28px; margin-bottom:10px; }
.modal-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.modal-stats > div { background:#f1f5ff; border-radius:10px; padding:8px; }
.modal-stats span { display:block; font-size:12px; color:#64748b; }
.modal-stats strong { font-size:22px; color:#1e3a8a; }
.modal-actions { display:flex; gap:8px; justify-content:center; }

@media (max-width: 900px) {
  .hud { grid-template-columns: 1fr; justify-items: center; }
  .hud-left, .hud-center, .hud-right { justify-self: center; }
  .game-layout { grid-template-columns: 1fr; width: auto; margin: 14px 0; }
  .game-layout > section,
  .game-layout > aside { grid-column: 1; }
  :root { --cell: 36px; --gap: 4px; }
}