:root {
  --t: 56px;
  --g: 6px;
}

* {
  box-sizing: border-box;
}

/* ---------- page ---------- */

html,
body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #14161c;
  color: #eee;
  font-family: system-ui, sans-serif;
}

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

#hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(16px + env(safe-area-inset-right))
    12px
    calc(16px + env(safe-area-inset-left));
  background: linear-gradient(#14161cf0, #14161c00);
}

#score {
  min-width: 90px;
  font-size: 28px;
  font-weight: 800;
}

#words {
  min-width: 90px;
  text-align: right;
  opacity: 0.7;
}

#clock {
  position: relative;
  flex: 1;
  height: 26px;
  background: #262a35;
  border-radius: 13px;
  overflow: hidden;
}

#clockbar {
  width: 100%;
  height: 100%;
  background: #4caf7d;
  transition: background 0.3s;
}

#clock.low #clockbar {
  background: #e5484d;
}

#clocktext {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#clock.bump {
  animation: bump 0.35s;
}

/* ---------- world & tiles ---------- */

#viewport {
  position: fixed;
  inset: 0;
}

#world {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.28s ease-out;
}

.tile {
  position: absolute;
  width: var(--t);
  height: var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b3040;
  border: 2px solid #3b4258;
  border-radius: 8px;
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
  transition: background 0.15s, border-color 0.15s;
}

.tile.x2 {
  background: #5a2328;
  border-color: #e5484d;
}

.tile.x3 {
  background: #41245c;
  border-color: #a45cf0;
}

/* multiplier: bottom left */
.tile .m {
  position: absolute;
  left: 4px;
  bottom: 1px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
  text-transform: lowercase;
}

/* letter score: bottom right */
.tile .p {
  position: absolute;
  right: 4px;
  bottom: 1px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
}

.tile.pending .l {
  opacity: 0.35;
}

.tile.cursor {
  border-color: #ffd166;
  box-shadow: 0 0 0 2px #ffd16666;
}

.tile.done {
  background: #2f5d46;
  border-color: #4caf7d;
  opacity: 0.5;
  animation: done 0.6s;
}

.tile.bad {
  background: #6b2a2e;
  border-color: #e5484d;
  animation: shake 0.3s;
}

.tile.pop {
  animation: pop 0.2s;
}

/* ghost letter from the hint system */
.tile .g {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.28;
  pointer-events: none;
}

.tile.typed .g {
  visibility: hidden;
}

/* shine sweep across a completed word */
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}

.tile.shine::after {
  animation: shine 0.6s ease-out var(--d, 0ms);
}

/* ---------- toast ---------- */

#toast {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 8px 16px;
  background: #000a;
  border-radius: 20px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

#toast.show {
  opacity: 1;
}

/* ---------- tutorial (first two words) ---------- */

#tutorial {
  position: fixed;
  left: 50%;
  top: calc(64px + env(safe-area-inset-top));
  z-index: 5;
  max-width: 88vw;
  padding: 10px 18px;
  background: #000a;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.4s;
  pointer-events: none;
  animation: float 3s ease-in-out infinite;
}

#tutorial.show {
  opacity: 1;
}

#tutorial b {
  color: #ffd166;
}

/* ---------- intro: HUD + hint hidden until 3 words are typed ---------- */

body.intro #hud,
body.intro #hint {
  opacity: 0;
  pointer-events: none;
}

/* no transition while entering intro (instant hide), fade only when it ends */
body:not(.intro) #hud,
body:not(.intro) #hint {
  transition: opacity 1s;
}

/* ---------- mute button ---------- */

#mute {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 6;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #262a35;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

#mute svg {
  width: 18px;
  height: 18px;
}

#mute .bi-volume-mute-fill {
  display: none;
}

#mute.muted .bi-volume-mute-fill {
  display: block;
}

#mute.muted .bi-volume-up-fill {
  display: none;
}

/* ---------- hint button (bottom right) ---------- */

#hint {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right));
  bottom: 16px;
  z-index: 6;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0e1bca6;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
}

#hint[hidden] {
  display: none;
}

#hint:disabled {
  background: #3b4258;
  opacity: 0.6;
  cursor: default;
}

#hintnum {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5484d;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* ---------- hidden input (opens the mobile keyboard) ---------- */

#kb {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  font-size: 16px; /* 16px+ stops iOS from zooming in on focus */
  caret-color: transparent;
  opacity: 0;
  pointer-events: none;
}

/* ---------- start / game over overlay ---------- */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  background: #14161cee;
  text-align: center;
}

#overlay.hidden {
  display: none;
}

/* game over: let the zoomed-out map show through */
#overlay.end {
  background: #14161c99;
}

#stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 6px 24px;
  padding: 14px 20px;
  background: #14161ce6;
  border-radius: 12px;
  text-align: left;
}

#stats:empty {
  display: none;
}

#stats div {
  opacity: 0.7;
}

#stats b {
  text-align: right;
}

#overlay h1 {
  margin: 0;
  font-size: clamp(36px, 12vw, 56px);
  letter-spacing: 2px;
}

#overlay p {
  max-width: 460px;
  line-height: 1.5;
  opacity: 0.85;
}

#overlay button {
  padding: 12px 40px;
  background: #4caf7d;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- score celebrations ---------- */

#fx {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* screen-edge pulse; color, size, brightness and duration are set from JS */
#edge {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 var(--b, 80px) var(--sp, 20px) var(--c, #fff);
}

#edge.pulse {
  animation: edge var(--dur, 0.6s) ease-out;
}

#rating {
  position: fixed;
  left: 50%;
  top: 24%;
  z-index: 7;
  transform: translateX(-50%);
  font-weight: 900;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 18px currentColor, 0 2px 0 #0008;
  opacity: 0;
  pointer-events: none;
}

#rating.show {
  animation: rating var(--dur, 1.2s) ease-out;
}

/* ---------- animations ---------- */

@keyframes edge {
  0% {
    opacity: 0;
  }
  15% {
    opacity: var(--o, 1);
  }
  100% {
    opacity: 0;
  }
}

@keyframes rating {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.18);
  }
  25% {
    transform: translateX(-50%) scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-24px) scale(1.04);
  }
}

@keyframes float {
  50% {
    transform: translateX(-50%) translateY(-6px);
  }
}

@keyframes bump {
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 14px #4caf7d;
  }
}

@keyframes shake {
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

@keyframes pop {
  50% {
    transform: scale(1.12);
  }
}

@keyframes shine {
  to {
    transform: translateX(120%);
  }
}

@keyframes done {
  0%,
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

/* ---------- small screens ---------- */

@media (max-width: 480px) {
  #hud {
    gap: 10px;
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }

  #score {
    min-width: 56px;
    font-size: 22px;
  }

  #words {
    min-width: 56px;
    font-size: 13px;
  }

  #clock {
    height: 22px;
  }

  #mute {
    top: calc(58px + env(safe-area-inset-top));
  }
}