:root {
  --ink: #18343a;
  --muted: #60757b;
  --panel: rgba(255, 255, 255, 0.76);
  --panel-line: rgba(38, 88, 98, 0.18);
  --accent: #e45655;
  --tile-w: 54px;
  --tile-h: 62px;
  --gap-x: 39px;
  --gap-y: 51px;
  --lift-x: 7px;
  --lift-y: -8px;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }

body {
  color: var(--ink);
  font-family: "Noto Sans KR", system-ui, sans-serif;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0.32)),
    linear-gradient(145deg, #c5eef0 0%, #eef2dc 46%, #f8d7ca 100%);
}

.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
}

.topbar {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(330px, 620px);
  align-items: center;
  gap: 10px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.brand {
  display: grid;
  grid-template-columns: auto minmax(212px, 280px);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

h1 {
  margin: 0;
  font-family: "Jua", "Noto Sans KR", sans-serif;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1;
  color: #24424a;
  text-shadow: 0 2px 0 rgba(255,255,255,0.78);
  white-space: nowrap;
}

.hold-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  background: rgba(255,255,255,0.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 12px 26px rgba(65, 118, 126, 0.14);
}

.hold-slot {
  position: relative;
  aspect-ratio: 0.88;
  min-height: 54px;
  border: 1px dashed rgba(49, 89, 96, 0.28);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(246, 253, 251, 0.68);
}

.hold-slot.filled {
  border-style: solid;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 4px 0 rgba(74, 117, 120, 0.28);
}

.slot-tile {
  position: relative;
  width: 86%;
  height: 86%;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-family: "Baloo 2", "Noto Sans KR", sans-serif;
  font-size: clamp(26px, 4.2vw, 38px);
  font-weight: 800;
  line-height: 1;
  color: #24363a;
  background: linear-gradient(145deg, var(--tile-hi, #fffaf0), var(--tile-mid, #ffe5b7) 58%, var(--tile-low, #d9a96b));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.86), inset -2px -2px 0 rgba(96,62,36,0.13);
  transition: transform 120ms ease;
}
.slot-tile:not(.matching):active { transform: scale(0.92); }

.slot-tile.matching { animation: slotMatch 260ms ease forwards; }

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(62px, 1fr));
  gap: 7px;
}

.stats div {
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(68, 126, 141, 0.13), inset 0 1px 0 rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
}

.stats span { display: block; font-size: 11px; color: var(--muted); }
.stats strong { display: block; margin-top: 1px; font-size: 18px; color: #18343d; }

.table-wrap {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}

.board {
  position: relative;
  width: 390px;
  height: 690px;
  max-width: 100%;
  overflow: visible;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(44, 107, 122, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(44, 107, 122, 0.055) 1px, transparent 1px),
    linear-gradient(160deg, rgba(255,255,255,0.48), rgba(222, 249, 246, 0.34));
  background-size: 34px 34px, 34px 34px, auto;
}

.match-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 10000;
}

.match-link {
  fill: none;
  stroke: #ff6b66;
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(255, 107, 102, 0.75));
  animation: linkFade 170ms ease-out forwards;
}

.tile {
  position: absolute;
  width: var(--tile-w);
  height: var(--tile-h);
  border: 1px solid rgba(86, 75, 58, 0.2);
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: #26363a;
  font-family: "Baloo 2", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Noto Sans KR", sans-serif;
  font-size: calc(var(--tile-w) * 0.56);
  font-weight: 800;
  line-height: 1;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.9), transparent 29%),
    linear-gradient(145deg, var(--tile-hi, #fffaf0), var(--tile-mid, #ffe5b7) 58%, var(--tile-low, #d9a96b));
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.82),
    inset -2px -2px 0 rgba(96,62,36,0.14),
    2px 3px 0 var(--tile-edge, #b9814c),
    6px 9px 14px rgba(59, 92, 101, 0.26);
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
  transition: transform 140ms ease, filter 140ms ease, opacity 220ms ease, box-shadow 140ms ease;
}

.tile::before {
  content: "";
  position: absolute;
  inset: 5px 5px auto auto;
  width: 18%;
  height: 20%;
  border-radius: 999px;
  background: rgba(255,255,255,0.42);
}

.tile::after {
  content: attr(data-label);
  position: absolute;
  right: 5px;
  bottom: 4px;
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(var(--tile-w) * 0.12);
  font-weight: 800;
  color: rgba(42, 48, 52, 0.48);
}

.tile.fruit, .slot-tile.fruit { --tile-hi: #fff7db; --tile-mid: #ffd88d; --tile-low: #ec9d63; --tile-edge: #c87545; }
.tile.weather, .slot-tile.weather { --tile-hi: #effcff; --tile-mid: #bfe9ff; --tile-low: #8fc9e7; --tile-edge: #5b9fbd; }
.tile.flower, .slot-tile.flower { --tile-hi: #fff4fb; --tile-mid: #ffc7df; --tile-low: #df92bd; --tile-edge: #ba6699; }
.tile.food, .slot-tile.food { --tile-hi: #fff8e8; --tile-mid: #f4dfa6; --tile-low: #c9ab72; --tile-edge: #9f8352; }
.tile.lucky, .slot-tile.lucky { --tile-hi: #f7fff2; --tile-mid: #bfeab2; --tile-low: #89c97c; --tile-edge: #629f5e; }
.tile.number, .slot-tile.number { --tile-hi: #fffdf2; --tile-mid: #ffd36e; --tile-low: #ea9b4e; --tile-edge: #bc7440; }
.tile.letter, .slot-tile.letter { --tile-hi: #f0fbff; --tile-mid: #aacdf4; --tile-low: #7ba5dc; --tile-edge: #5d7fb5; }

.tile.blocked { cursor: default; filter: saturate(0.7) brightness(0.83); }
.tile.hint { animation: hintPulse 720ms ease-in-out 3; }
.tile.removing { pointer-events: none; animation: tilePop 340ms ease forwards; }
.tile.wrong { animation: wrongShake 260ms ease; }
.tile.moving { pointer-events: none; animation: tileMoveOut 230ms ease forwards; }

.tile .shard,
.slot-tile .shard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  height: 18%;
  background: var(--shard-color, #ffd166);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 15% 82%, 0 24%);
  transform: translate(-50%, -50%);
  animation: shardFly 420ms ease-out forwards;
}

.tile.removing .spark,
.slot-tile .spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--spark-color);
  transform: translate(-50%, -50%);
  animation: sparkFly 360ms ease-out forwards;
}

.controls {
  width: min(620px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 54px repeat(3, 1fr);
  gap: 9px;
}

button {
  min-height: 46px;
  border: 1px solid rgba(32, 75, 86, 0.18);
  border-radius: 8px;
  color: #17313a;
  background: linear-gradient(#ffffff, #dff6f3);
  box-shadow: 0 4px 0 #96c7c7, 0 10px 20px rgba(75, 125, 136, 0.17);
  font: 800 16px "Noto Sans KR", system-ui, sans-serif;
}
button:disabled { opacity: 0.48; cursor: not-allowed; }
button:not(:disabled):active { transform: translateY(2px); box-shadow: 0 2px 0 #96c7c7, 0 6px 14px rgba(75,125,136,0.14); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  z-index: 30000;
  max-width: min(90vw, 420px);
  padding: 9px 13px;
  border: 1px solid rgba(32, 75, 86, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #17313a;
  box-shadow: 0 14px 34px rgba(70, 124, 138, 0.18);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.combo-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 20000;
  transform: translate(-50%, -50%) scale(0.82);
  opacity: 0;
  pointer-events: none;
  font: 800 34px "Jua", "Noto Sans KR", sans-serif;
  color: #ff5d57;
  text-shadow: 0 3px 0 #fff, 0 10px 26px rgba(196, 61, 61, 0.22);
}
.combo-pop.show { animation: comboFloat 880ms ease-out forwards; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 25000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(37, 70, 78, 0.36);
}
.modal[hidden] { display: none; }
.modal-panel {
  position: relative;
  width: min(430px, 100%);
  overflow: hidden;
  border: 1px solid rgba(32, 75, 86, 0.18);
  border-radius: 8px;
  padding: 34px 22px 24px;
  text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(220, 249, 245, 0.96));
  box-shadow: 0 30px 90px rgba(64, 112, 124, 0.28);
}
.modal h2 { margin: 0; font-family: "Jua", sans-serif; font-size: 56px; color: #e45655; }
.modal p { margin: 8px 0 22px; font-size: 22px; font-weight: 800; }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.game-over-panel h2 { color: #374951; }

@keyframes linkFade {
  0% { opacity: 0; stroke-dasharray: 0 500; }
  35% { opacity: 1; }
  100% { opacity: 0; stroke-dasharray: 500 0; }
}
@keyframes tileMoveOut {
  to { opacity: 0; transform: translateY(-18px) scale(0.86); }
}
@keyframes tilePop {
  0% { filter: brightness(1.16); opacity: 1; transform: translateY(0) scale(1); }
  45% { filter: brightness(1.55); transform: translateY(-8px) rotate(-2deg) scale(1.06); }
  100% { transform: translateY(-18px) rotate(3deg) scale(0.72); opacity: 0; }
}
@keyframes shardFly {
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--shard-x)), calc(-50% + var(--shard-y))) rotate(var(--shard-rot)) scale(0.22);
  }
}
@keyframes sparkFly {
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0.2);
  }
}
@keyframes hintPulse { 50% { filter: brightness(1.28); outline: 3px solid #ff6b66; outline-offset: 2px; } }
@keyframes wrongShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes slotMatch {
  55% { transform: translateY(-5px) scale(1.08); filter: brightness(1.25); }
  100% { transform: translateY(-16px) scale(0.68); opacity: 0; }
}
@keyframes comboFloat {
  0% { opacity: 0; transform: translate(-50%, -44%) scale(0.78); }
  22% { opacity: 1; transform: translate(-50%, -58%) scale(var(--combo-scale, 1)); }
  100% { opacity: 0; transform: translate(-50%, -92%) scale(calc(var(--combo-scale, 1) * 1.08)); }
}

@media (max-width: 860px) {
  .app { gap: 7px; padding-left: 8px; padding-right: 8px; }
  .topbar { grid-template-columns: 1fr; }
  .brand { grid-template-columns: 1fr; justify-items: center; }
  .hold-slots { width: min(310px, 100%); }
  .stats { grid-template-columns: repeat(5, 1fr); min-width: 0; }
  .stats div { padding: 6px; }
  .stats strong { font-size: 14px; }
  .controls { grid-template-columns: 48px repeat(3, 1fr); gap: 7px; }
  button { min-height: 42px; font-size: 14px; }
  .combo-pop { font-size: 28px; }
}