* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
    Quicksand, Comfortaa, "Varela Round", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, #fdf0f6 0%, #eef2ff 55%, #eefaf1 100%);
  color: #6b5b77;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px 8px;
  gap: 6px;
}

/* ---------- HUD ---------- */

#hud { width: min(94vw, 420px); display: flex; flex-direction: column; gap: 8px; }
.hud-row { display: flex; align-items: center; gap: 10px; }

#levelBadge {
  background: linear-gradient(135deg, #cdbdf7, #b7d7fb);
  color: #fff;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(160, 140, 220, .35);
  white-space: nowrap;
}

#pips { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.pip {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px #e3d9ef;
  transition: transform .25s, background .25s, box-shadow .25s;
}
.pip.done {
  background: linear-gradient(135deg, #ffb7d0, #ffd7a8);
  box-shadow: 0 2px 6px rgba(255, 150, 190, .5);
  transform: scale(1.15);
}

#scoreBox {
  background: #ffffffcc;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 800;
  font-size: 15px;
  color: #8a76a8;
  box-shadow: 0 3px 10px rgba(190, 175, 220, .25);
  white-space: nowrap;
}
#scoreBox small { margin-left: 4px; font-weight: 600; color: #bcaed0; }

#healthWrap { flex: 1; display: flex; align-items: center; gap: 8px; }
.heart { font-size: 18px; filter: drop-shadow(0 2px 3px rgba(255,150,190,.4)); }
#healthBar {
  position: relative; flex: 1; height: 18px;
  background: #ffffffb0; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(180, 160, 210, .25);
}
#healthFill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff9fbe, #ffc3a3);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4, 1.3, .5, 1), background .35s;
}
#healthFill.low { background: linear-gradient(90deg, #ff7d9b, #ff9d8a); }
#healthText {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #a2648a;
  text-shadow: 0 1px 2px #ffffffaa;
}

/* ---------- word preview ---------- */

#wordPreview {
  min-height: 30px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; font-size: 19px; letter-spacing: 3px; color: #8a76a8;
  transition: color .15s;
}
#wordPreview .meta { font-size: 12px; letter-spacing: 0; font-weight: 700; color: #b9a8ce; }
#wordPreview .meta .hp { color: #f2789d; }
#wordPreview.good { color: #4db892; }
#wordPreview.bad { color: #f2789d; animation: shake .3s; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ---------- board ---------- */

#boardWrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
#board { position: relative; touch-action: none; }

#divider {
  position: absolute; left: -6px; right: -6px;
  border-top: 2px dashed #d9c9ee;
  display: flex; justify-content: center;
  pointer-events: none;
  z-index: 0;
}
#divider span {
  margin-top: -11px;
  background: linear-gradient(160deg, #fdf0f6, #f2f1fc);
  color: #c5b3dd;
  font-size: 11px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0 10px;
}

#trail {
  position: absolute; inset: 0;
  z-index: 6; pointer-events: none;
  overflow: visible;
}
#trail polyline {
  fill: none;
  stroke: rgba(190, 160, 235, .45);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile {
  position: absolute; top: 0; left: 0;
  z-index: 2;
  transition: transform .32s cubic-bezier(.3, 1.35, .45, 1);
  will-change: transform;
}
.tile .face {
  width: 100%; height: 100%;
  border-radius: 24%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  font-weight: 800;
  color: #7c6893;
  transition: transform .15s, box-shadow .15s, filter .2s;
}
.tile .face .val {
  position: absolute; right: 9%; bottom: 5%;
  font-size: .34em; font-weight: 800; opacity: .55;
}

.tile.queue { z-index: 1; pointer-events: none; }
.tile.queue .face { opacity: .38; box-shadow: none; filter: saturate(.8); }
.tile.play .face { opacity: 1; box-shadow: 0 4px 10px rgba(170, 145, 210, .28), inset 0 -3px 0 rgba(130, 100, 170, .12); }

.tile.play.sel .face {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(150, 110, 220, .45), 0 0 0 3px #fffc inset;
  filter: brightness(1.06);
}
.tile.play.reused .face::after {
  content: "↺";
  position: absolute; top: 2%; left: 8%;
  font-size: .38em; color: #f2789d; font-weight: 800;
}

.tile.rowhint .face { box-shadow: 0 0 0 3px #ffb7d0, 0 6px 14px rgba(255, 140, 185, .4); }

.tile.popping .face {
  transform: scale(0) rotate(20deg);
  transition: transform .24s ease-in;
}

/* pastel color set */
.c0 .face { background: linear-gradient(150deg, #ffe0ec, #ffc9dd); }
.c1 .face { background: linear-gradient(150deg, #d6f7e4, #b9eed1); }
.c2 .face { background: linear-gradient(150deg, #e8e2fd, #d4c9f9); }
.c3 .face { background: linear-gradient(150deg, #fff0d9, #ffdfb3); }
.c4 .face { background: linear-gradient(150deg, #dbeffe, #bfe2fc); }

/* ---------- floating score popup ---------- */

.popup {
  position: absolute;
  z-index: 20;
  font-weight: 800;
  color: #8a76a8;
  text-shadow: 0 2px 0 #fff;
  pointer-events: none;
  animation: floatUp 1s ease-out forwards;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.popup .mult { color: #f2a15f; }
@keyframes floatUp {
  0% { opacity: 0; margin-top: 6px; }
  15% { opacity: 1; }
  100% { opacity: 0; margin-top: -46px; }
}

/* ---------- banner (targeting mode) ---------- */

#banner {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  font-weight: 700; font-size: 14px; color: #8a76a8;
  box-shadow: 0 6px 18px rgba(170, 145, 210, .3);
}
#banner[hidden] { display: none; }
#bannerCancel {
  border: 0; border-radius: 999px;
  background: #ffe3ed; color: #e06d95;
  font-weight: 800; font-size: 12px;
  padding: 6px 12px; cursor: pointer;
  font-family: inherit;
}

/* ---------- inventory ---------- */

#inventory { display: flex; gap: 10px; padding: 2px 0 4px; min-height: 58px; }
.invBtn {
  position: relative;
  border: 0; cursor: pointer;
  width: 52px; height: 52px;
  border-radius: 18px;
  background: #ffffffd9;
  box-shadow: 0 4px 12px rgba(180, 160, 215, .3);
  font-size: 23px;
  transition: transform .15s, opacity .2s;
  font-family: inherit;
}
.invBtn:active { transform: scale(.92); }
.invBtn:disabled { opacity: .35; cursor: default; }
.invBtn .cnt {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb7d0, #ffd7a8);
  color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(255, 150, 190, .5);
}

/* ---------- overlay / dialogs ---------- */

#overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(120, 95, 160, .28);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
#overlay[hidden] { display: none; }

.dialog {
  background: linear-gradient(170deg, #fffdfe, #f7f3ff);
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(90, 60, 140, .35);
  padding: 26px 24px;
  width: min(92vw, 420px);
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
  animation: popIn .35s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes popIn { from { transform: scale(.7); opacity: 0; } }

.dialog h1 { margin: 0 0 6px; font-size: 30px; color: #8a76a8; letter-spacing: 1px; }
.dialog h2 { margin: 0 0 4px; font-size: 22px; color: #8a76a8; }
.dialog p  { margin: 6px 0; font-size: 14px; color: #a291bb; line-height: 1.5; }
.dialog .big { font-size: 44px; margin: 4px 0; }

.btn {
  border: 0; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 16px;
  color: #fff;
  background: linear-gradient(135deg, #f9a8c9, #c3aef5);
  padding: 12px 30px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(200, 140, 200, .45);
  margin-top: 14px;
  transition: transform .15s;
}
.btn:active { transform: scale(.95); }
.btn.ghost {
  background: #fff; color: #a68cc8;
  box-shadow: 0 4px 12px rgba(180, 160, 215, .3);
}

.rules { text-align: left; margin: 12px auto 0; max-width: 320px; }
.rules li { font-size: 13.5px; color: #a291bb; margin: 7px 0; line-height: 1.45; list-style: none; }

/* store */
.storePts {
  display: inline-block;
  background: #fff; border-radius: 999px;
  padding: 6px 16px; font-weight: 800; color: #e8a34f;
  box-shadow: 0 3px 10px rgba(220, 180, 130, .3);
  margin: 4px 0 10px;
}
.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.item {
  background: #fff; border-radius: 20px;
  padding: 12px 10px 10px;
  box-shadow: 0 4px 14px rgba(185, 165, 220, .22);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.item .ic { font-size: 26px; }
.item .nm { font-weight: 800; font-size: 13px; color: #8a76a8; }
.item .ds { font-size: 11px; color: #b3a3c9; line-height: 1.35; min-height: 30px; }
.item .own { font-size: 10.5px; font-weight: 700; color: #7cc9a6; min-height: 14px; }
.item button {
  border: 0; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #ffd9a8, #ffc3c3);
  color: #b06d3f; font-weight: 800; font-size: 12.5px;
  border-radius: 999px; padding: 6px 16px;
  box-shadow: 0 3px 8px rgba(230, 170, 120, .35);
}
.item button:disabled { opacity: .4; cursor: default; }

/* letter picker */
.alphabet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 12px; }
.alphabet button {
  border: 0; cursor: pointer; font-family: inherit;
  background: #fff; border-radius: 12px;
  font-size: 17px; font-weight: 800; color: #8a76a8;
  padding: 9px 0;
  box-shadow: 0 3px 8px rgba(185, 165, 220, .25);
}
.alphabet button:active { transform: scale(.9); }