@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Crimson+Pro:wght@400;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

:root {
  --bg: #130900;
  --b1: #7a4818;
  --b2: #9a6028;
  --b3: #c08040;
  --ce: #6a3e16;
  --ceb: #4a2a0a;
  --cf: #d4a850;
  --cs: #f0d070;
  --csh: #8a6020;
  --gold: #e8c060;
  --gold2: #f5d878;
  --light: #f5dfa0;
  --muted: #a07848;
  --panel: #2a1506;
  --panel2: #3a1e08;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  font-family: 'Crimson Pro', 'Georgia', serif;
  background: #130900;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: radial-gradient(ellipse 120% 140% at 50% 0%, #4a2810 0%, #130900 70%);
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(88deg, transparent 0, transparent 22px, rgba(0, 0, 0, .03) 22px, rgba(0, 0, 0, .03) 23px),
    repeating-linear-gradient(92deg, transparent 0, transparent 15px, rgba(255, 190, 80, .02) 15px, rgba(255, 190, 80, .02) 16px)
}

/* ══ SCREENS ══ */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  transition: opacity .5s, transform .5s;
  will-change: opacity, transform;
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.97)
}

.screen.slide-out-left {
  opacity: 0;
  transform: translateX(-100%)
}

.screen.slide-in-right {
  animation: slideInR .4s cubic-bezier(.22, 1, .36, 1) forwards
}

.screen.slide-in-left {
  animation: slideInL .4s cubic-bezier(.22, 1, .36, 1) forwards
}

@keyframes slideInR {
  0% {
    opacity: 0;
    transform: translateX(60%)
  }

  100% {
    opacity: 1;
    transform: translateX(0)
  }
}

@keyframes slideInL {
  0% {
    opacity: 0;
    transform: translateX(-60%)
  }

  100% {
    opacity: 1;
    transform: translateX(0)
  }
}

/* ══════════════════════════════════
   SPLASH SCREEN
══════════════════════════════════ */
#splash {
  background: radial-gradient(ellipse 120% 140% at 50% 20%, #5a3015 0%, #130900 70%)
}

.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px
}

.splash-logo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center
}

.splash-board {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  grid-template-rows: repeat(5, 28px);
  gap: 3px;
  animation: boardIn .8s ease-out forwards;
  opacity: 0
}

@keyframes boardIn {
  0% {
    opacity: 0;
    transform: scale(.5) rotate(-15deg)
  }

  60% {
    opacity: 1;
    transform: scale(1.08) rotate(3deg)
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0)
  }
}

.sb {
  border-radius: 4px;
  position: relative;
  overflow: hidden
}

.sb.e {
  background: linear-gradient(145deg, #6e421a, #4a2a0a);
  border: 1px solid #3a1a08
}

.sb.f {
  background: linear-gradient(145deg, #f0d070, #d4a850 45%, #9a7228);
  border: 1px solid #8a6018;
  box-shadow: inset 0 1px 0 rgba(255, 235, 130, .5)
}

.sb.f::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 238, 150, .4) 0%, transparent 100%)
}

.splash-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 36px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 4px;
  text-align: center;
  text-shadow: 0 0 40px rgba(232, 192, 60, .6), 0 2px 8px rgba(0, 0, 0, .9);
  animation: titleIn .7s .4s ease-out both
}

@keyframes titleIn {
  0% {
    opacity: 0;
    transform: translateY(20px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.splash-sub {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: titleIn .7s .6s ease-out both
}

.splash-bar-wrap {
  width: 160px;
  height: 3px;
  background: rgba(255, 200, 80, .15);
  border-radius: 2px;
  overflow: hidden;
  animation: titleIn .5s .9s ease-out both
}

.splash-bar {
  height: 100%;
  background: linear-gradient(90deg, #a06018, var(--gold), #a06018);
  border-radius: 2px;
  animation: loadBar 2s .4s linear both
}

@keyframes loadBar {
  0% {
    width: 0%
  }

  100% {
    width: 100%
  }
}

/* ══════════════════════════════════
   HOME SCREEN
══════════════════════════════════ */
#home {
  padding: 0;
  align-items: stretch;
  position: relative;
}

#home::-webkit-scrollbar {
  width: 0
}

.home-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 430px;
  min-height: calc(100vh - 60px);
  padding: 24px 16px 30px;
  gap: 0;
  margin: 0 auto
}

/* Logo top */
.home-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px
}

.home-mini-board {
  display: grid;
  grid-template-columns: repeat(5, 18px);
  grid-template-rows: repeat(4, 18px);
  gap: 2px
}

.hmb {
  border-radius: 3px
}

.hmb.e {
  background: linear-gradient(145deg, #6e421a, #4a2a0a);
  border: 1px solid #3a1a08
}

.hmb.f {
  background: linear-gradient(145deg, #f0d070, #d4a850 45%, #9a7228);
  border: 1px solid #8a6018
}

.home-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow: 0 0 24px rgba(232, 192, 60, .5), 0 2px 6px rgba(0, 0, 0, .8)
}

.home-tagline {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase
}

/* Play btn */
.play-btn {
  width: 100%;
  max-width: 280px;
  background: linear-gradient(150deg, #d09520, #a07010, #c08018);
  border: 2.5px solid #f0c040;
  border-radius: 14px;
  color: #fff8e0;
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  padding: 16px 0;
  cursor: pointer;
  box-shadow: 0 6px 30px rgba(200, 140, 0, .4), inset 0 1px 0 rgba(255, 240, 150, .3);
  transition: transform .15s, box-shadow .15s;
  margin-bottom: 20px;
}

.play-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 40px rgba(220, 160, 0, .5)
}

.play-btn:active {
  transform: scale(.96)
}

/* Stats row */
.home-stats {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 20px
}

.hstat {
  flex: 1;
  background: var(--panel2);
  border: 1.5px solid var(--b1);
  border-radius: 11px;
  padding: 10px 8px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

.hstat-v {
  font-size: 22px;
  font-weight: bold;
  color: var(--gold);
  line-height: 1.1
}

.hstat-l {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 2px
}

/* History section */
.section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px
}

.section-title {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 14px;
  color: var(--light);
  letter-spacing: 2px;
  text-transform: uppercase;
  flex: 1
}

.section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--b1), transparent)
}

.clear-btn {
  font-size: 10px;
  color: var(--muted);
  background: rgba(0, 0, 0, .3);
  border: 1px solid #4a2a0a;
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
  letter-spacing: .5px;
  transition: color .2s, border-color .2s
}

.clear-btn:hover {
  color: #e07050;
  border-color: #a04020
}

/* History list */
#historyList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.history-empty {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 1px;
  background: rgba(0, 0, 0, .2);
  border: 1px dashed #4a2a0a;
  border-radius: 10px
}

.hist-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1.5px solid var(--b1);
  border-radius: 10px;
  padding: 9px 12px;
  position: relative;
  overflow: hidden;
  animation: rowIn .3s ease-out both;
}

@keyframes rowIn {
  0% {
    opacity: 0;
    transform: translateX(-16px)
  }

  100% {
    opacity: 1;
    transform: translateX(0)
  }
}

.hist-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--row-color, #c8a030)
}

.hist-rank {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--row-color, var(--muted));
  min-width: 22px;
  text-align: center
}

.hist-name {
  flex: 1;
  font-size: 14px;
  color: var(--light);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.hist-meta {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4
}

.hist-score {
  font-size: 18px;
  font-weight: bold;
  color: var(--gold);
  text-align: right;
  min-width: 60px
}

.hist-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px
}

.hbadge {
  font-size: 9px;
  color: var(--muted);
  background: rgba(0, 0, 0, .35);
  border: 1px solid #4a2a0a;
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: .5px
}

/* Top-3 glow */
.hist-row.rank-1 {
  background: linear-gradient(135deg, #3a2208, #2a1404);
  border-color: #d4a030
}

.hist-row.rank-2 {
  background: linear-gradient(135deg, #2e2020, #1e1010);
  border-color: #9090a0
}

.hist-row.rank-3 {
  background: linear-gradient(135deg, #2e1e10, #1e1008);
  border-color: #c08040
}

.medal {
  font-size: 18px;
  line-height: 1
}

/* Name input modal */
#nameModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(10, 4, 1, .88);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px)
}

#nameModal.on {
  display: flex
}

.nm-box {
  background: linear-gradient(155deg, #4a2810, #2a1404);
  border: 2.5px solid var(--b2);
  border-radius: 18px;
  padding: 30px 34px;
  text-align: center;
  max-width: 300px;
  width: 92%;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .8)
}

.nm-title {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 6px
}

.nm-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px
}

.nm-score-big {
  font-size: 44px;
  font-weight: bold;
  color: var(--light);
  margin-bottom: 4px
}

.nm-score-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px
}

.nm-input {
  width: 100%;
  background: rgba(0, 0, 0, .5);
  border: 1.5px solid var(--b2);
  border-radius: 9px;
  color: var(--light);
  font-size: 16px;
  font-family: 'Crimson Pro', Georgia, serif;
  padding: 10px 14px;
  text-align: center;
  letter-spacing: 1px;
  outline: none;
  margin-bottom: 16px;
  touch-action: auto
}

.nm-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232, 192, 60, .2)
}

.nm-row {
  display: flex;
  gap: 10px
}

.nm-btn {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .1s
}

.nm-btn:active {
  transform: scale(.95)
}

.nm-save {
  background: linear-gradient(145deg, #c89018, #a07010);
  border: 2px solid #e8b030;
  color: #fff8e0
}

.nm-skip {
  background: rgba(0, 0, 0, .3);
  border: 1.5px solid #5a3010;
  color: var(--muted)
}

/* ══════════════════════════════════
   GAME SCREEN
══════════════════════════════════ */
#game {
  background: transparent;
  padding: 0;
}

#gameInner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100dvh;
  max-width: 430px;
  padding: 8px 8px 20px;
  gap: 6px;
  margin: 0 auto;
}

#header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  gap: 4px
}

.scard {
  flex: 1;
  background: linear-gradient(160deg, var(--panel2), #271206);
  border: 1.5px solid var(--b1);
  border-radius: 9px;
  padding: 4px 8px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 200, 80, .08)
}

.slbl {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase
}

.snum {
  font-size: 20px;
  font-weight: bold;
  color: var(--gold);
  line-height: 1.2;
  text-shadow: 0 0 14px rgba(232, 192, 60, .4)
}

.snum.bump {
  animation: numBump .25s ease-out
}

@keyframes numBump {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.3)
  }

  100% {
    transform: scale(1)
  }
}

#gLogo {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer
}

#gLogo .gl {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: var(--light);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3
}

#gLogo .gh {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1px
}

#subbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  padding: 0 2px
}

.badge {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid #5a3010;
  border-radius: 6px;
  padding: 3px 8px
}

.badge span {
  color: var(--gold);
  font-weight: bold
}

#muteBtn {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, .35);
  border: 1.5px solid var(--b1);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background .15s, transform .1s
}

#muteBtn:active {
  transform: scale(.88)
}

#homeBtn {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, .35);
  border: 1.5px solid var(--b1);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .15s, transform .1s
}

#homeBtn:active {
  transform: scale(.88)
}

#comboBar {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 18px
}

#comboLabel {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .3s
}

#comboLabel.on {
  opacity: 1
}

#comboTrack {
  width: 90%;
  height: 5px;
  background: rgba(0, 0, 0, .4);
  border-radius: 3px;
  overflow: hidden
}

#comboFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #e8a020, #f8e040);
  border-radius: 3px;
  transition: width .3s, background .3s
}

#gwrap {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(140deg, #4a2208, #2a1204);
  border: 3px solid var(--b2);
  border-radius: 13px;
  padding: 6px;
  box-shadow: 0 5px 24px rgba(0, 0, 0, .7), inset 0 2px 6px rgba(255, 200, 80, .07), 0 0 0 1px rgba(255, 180, 70, .12)
}

#gwrap.shake {
  animation: shake .35s ease-out
}

@keyframes shake {
  0% {
    transform: translate(0)
  }

  10% {
    transform: translate(-5px, 2px)
  }

  20% {
    transform: translate(5px, -2px)
  }

  30% {
    transform: translate(-4px, 3px)
  }

  40% {
    transform: translate(4px, -1px)
  }

  50% {
    transform: translate(-2px, 2px)
  }

  60% {
    transform: translate(2px, -1px)
  }

  80% {
    transform: translate(-1px, 1px)
  }

  100% {
    transform: translate(0)
  }
}

#grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 2px;
  background: #5a3010;
  border-radius: 7px;
  padding: 2px
}

.cell {
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: background .07s
}

.cell.empty {
  background: linear-gradient(145deg, #6e421a, #553010);
  border: 1px solid var(--ceb)
}

.cell.empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, .18) 0%, transparent 55%)
}

.cell.filled {
  background: linear-gradient(145deg, var(--cs), var(--cf) 45%, #9a7228);
  border: 1px solid var(--csh);
  box-shadow: inset 0 1px 0 rgba(255, 235, 130, .55), inset 0 -1px 0 rgba(0, 0, 0, .28)
}

.cell.filled::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(255, 238, 150, .38) 0%, transparent 100%);
  border-radius: 3px 3px 0 0
}

.cell.hl {
  background: linear-gradient(145deg, #f8e070, #d8a830, #b88018) !important;
  border-color: #a07018 !important
}

.cell.bad {
  background: linear-gradient(145deg, #c85848, #a03828) !important;
  border-color: #803020 !important
}

.cell.flash {
  animation: flashCell .42s ease-out forwards
}

.cell.wave {
  animation: waveCell .5s ease-out forwards
}

.cell.place-in {
  animation: placeIn .18s ease-out
}

@keyframes flashCell {
  0% {
    background: linear-gradient(145deg, #fff8c0, #ffe850);
    transform: scale(1.06)
  }

  55% {
    background: #fffce0;
    transform: scale(1.1)
  }

  100% {
    background: linear-gradient(145deg, #6e421a, #553010);
    transform: scale(1)
  }
}

@keyframes waveCell {
  0% {
    background: linear-gradient(145deg, #fff0a0, #ffd040);
    transform: scale(1.08)
  }

  40% {
    background: linear-gradient(145deg, #ffee80, #ffc820);
    transform: scale(1.12)
  }

  100% {
    background: linear-gradient(145deg, #6e421a, #553010);
    transform: scale(1)
  }
}

@keyframes placeIn {
  0% {
    transform: scale(.65);
    opacity: .5
  }

  100% {
    transform: scale(1);
    opacity: 1
  }
}

#tray {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(140deg, var(--panel2), #231005);
  border: 2px solid var(--b1);
  border-radius: 13px;
  padding: 8px 4px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
  min-height: 86px
}

.slot {
  width: 30%;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative
}

.rot-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, .45);
  border: 1px solid #6a3a10;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s, transform .1s;
  z-index: 10
}

.slot.has-piece:hover .rot-btn,
.slot.show-rot .rot-btn {
  opacity: 1
}

.rot-btn:hover {
  background: rgba(160, 80, 10, .6);
  transform: scale(1.15)
}

.rot-btn:active {
  transform: scale(.88) rotate(45deg)
}

.pgrid {
  display: grid;
  gap: 2px;
  cursor: pointer;
  transition: opacity .15s, transform .2s;
  animation: trayIn .32s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes trayIn {
  0% {
    transform: scale(.4) rotate(-15deg);
    opacity: 0
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1
  }
}

.pgrid.gone {
  opacity: .1;
  pointer-events: none;
  transform: scale(.75)
}

.pgrid.dragging {
  opacity: .25;
  transform: scale(.88)
}

.pgrid.spin-cw {
  animation: spinCW .28s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes spinCW {
  0% {
    transform: scale(1.0) rotate(0deg)
  }

  40% {
    transform: scale(1.18) rotate(50deg)
  }

  70% {
    transform: scale(1.12) rotate(85deg)
  }

  100% {
    transform: scale(1.0) rotate(90deg)
  }
}

.pc {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(145deg, #eacf7a, #c8a038, #9a7822);
  border: 1px solid #8a6018;
  box-shadow: inset 0 1px 0 rgba(255, 232, 130, .5);
  position: relative;
  overflow: hidden
}

.pc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 235, 140, .42) 0%, transparent 100%);
  border-radius: 3px 3px 0 0
}

#ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  display: none;
  gap: 2px;
  transform: translate(-50%, -115%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6))
}

#ghost.on {
  display: grid
}

.gc {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: linear-gradient(145deg, #f8e068, #d8a830, #b08020);
  border: 1px solid #a07018;
  box-shadow: inset 0 1px 0 rgba(255, 238, 140, .65);
  position: relative;
  overflow: hidden;
  opacity: .93
}

.gc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 242, 160, .5) 0%, transparent 100%);
  border-radius: 4px 4px 0 0
}

/* ── Game Over overlay ── */
.go-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(12, 5, 1, .9);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px)
}

.go-overlay.on {
  display: flex
}

.go-box {
  background: linear-gradient(155deg, #4a2810, #2a1404);
  border: 2.5px solid var(--b2);
  border-radius: 18px;
  padding: 28px 34px;
  text-align: center;
  max-width: 310px;
  width: 92%;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .8)
}

.go-title {
  font-family: 'Cinzel', serif;
  font-size: 26px;
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 4px
}

.go-score {
  font-size: 52px;
  color: var(--light);
  font-weight: bold;
  margin: 8px 0 2px
}

.go-lbl {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1.5px;
  margin-bottom: 6px
}

.go-best {
  font-size: 14px;
  color: #c8a050;
  margin-bottom: 14px
}

.go-stats {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px
}

.go-stat {
  background: rgba(0, 0, 0, .3);
  border: 1px solid #5a3010;
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 70px
}

.go-stat-v {
  font-size: 20px;
  color: var(--gold);
  font-weight: bold
}

.go-stat-l {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase
}

.go-btns {
  display: flex;
  gap: 10px;
  justify-content: center
}

.gbtn {
  flex: 1;
  padding: 11px 6px;
  border-radius: 10px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  font-weight: 700;
  transition: transform .1s;
  max-width: 130px
}

.gbtn:active {
  transform: scale(.95)
}

.gbtn-play {
  background: linear-gradient(145deg, #c89018, #a07010);
  border: 2px solid #e8b030;
  color: #fff8e0
}

.gbtn-home {
  background: rgba(0, 0, 0, .3);
  border: 1.5px solid #6a3a10;
  color: var(--muted)
}

/* ── Fx ── */
#fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 600
}

#lvlSplash {
  position: fixed;
  inset: 0;
  z-index: 650;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0
}

#lvlSplash.on {
  animation: lvlPop .9s ease-out forwards
}

@keyframes lvlPop {
  0% {
    opacity: 0;
    transform: scale(.5)
  }

  30% {
    opacity: 1;
    transform: scale(1.1)
  }

  60% {
    opacity: 1;
    transform: scale(1)
  }

  90% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: scale(1)
  }
}

.lvlText {
  font-family: 'Cinzel', serif;
  font-size: 40px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(255, 220, 60, .8), 0 2px 6px rgba(0, 0, 0, .9)
}

.lvlSub {
  font-size: 14px;
  color: var(--light);
  letter-spacing: 2px;
  margin-top: 4px;
  text-align: center
}

#perfectBanner {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  pointer-events: none;
  opacity: 0;
  font-family: 'Cinzel', serif;
  font-size: 24px;
  color: #ffe040;
  font-weight: bold;
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(255, 200, 0, .9), 0 2px 6px rgba(0, 0, 0, .9);
  white-space: nowrap
}

#perfectBanner.on {
  animation: perfectPop 1.4s ease-out forwards
}

@keyframes perfectPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(.5)
  }

  25% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1)
  }

  70% {
    opacity: 1;
    transform: translateX(-50%) scale(1)
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(.9)
  }
}

.pop {
  position: fixed;
  pointer-events: none;
  z-index: 2000;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
  white-space: nowrap;
  animation: popUp .95s ease-out forwards
}

@keyframes popUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }

  100% {
    opacity: 0;
    transform: translateY(-75px) scale(1.35)
  }
}

#rotToast {
  position: fixed;
  bottom: 25%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 800;
  pointer-events: none;
  opacity: 0;
  font-size: 13px;
  color: var(--light);
  background: rgba(60, 30, 5, .9);
  border: 1px solid var(--b2);
  border-radius: 8px;
  padding: 5px 14px;
  white-space: nowrap;
  letter-spacing: 1px
}

#rotToast.on {
  animation: toastPop .9s ease-out forwards
}

@keyframes toastPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px)
  }

  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0)
  }

  80% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

/* ══ FOOTER ══ */
.site-footer {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  padding: 20px 10px;
  text-align: center;
  border-top: 1px solid var(--b1);
  background: rgba(0, 0, 0, 0.2);
  margin-top: auto;
  z-index: 5;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--gold);
}

.footer-copy {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.5px;
}

/* ══ SEO SECTION ══ */
.seo-section {
  width: 100%;
  max-width: 430px;
  margin: 20px auto;
  padding: 0 16px;
  color: var(--light);
}

.seo-section h2 {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 10px;
  text-align: center;
}

.seo-section p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 15px;
  color: var(--muted);
}

/* ══ AD SLOT ══ */
.ad-slot-wrapper {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  margin-top: auto;
}

.ad-slot-300x250 {
  width: 300px;
  height: 270px;
  /* 250 + label */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Admin Button (Hidden) */
#adminAccess {
  position: fixed;
  bottom: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  opacity: 0.1;
  cursor: pointer;
  z-index: 100;
}