:root {
  color-scheme: light;
  --ink: #27140d;
  --paper: #fff7df;
  --sky-top: #6cc6e8;
  --sky-low: #f7b453;
  --sand: #f0c15e;
  --sand-deep: #c77a2e;
  --hole: #23120c;
  --rim: #b86f2c;
  --teal: #006f72;
  --red: #bd2e2e;
  --gold: #ffd447;
  --shadow: 0 16px 35px rgba(67, 36, 16, 0.25);
}

* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 248, 190, 0.8), transparent 14rem),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-low) 52%, #da8434 100%);
  cursor: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.hole,
.controls button,
.toggle,
.avatar-control,
dialog button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button,
label {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.game-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  width: min(1120px, calc(100% - 24px));
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(8px, 1.5vh, 16px) 0;
}

.topbar,
.hud,
.controls,
.status-line {
  position: relative;
  z-index: 2;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(6px, 1.2vh, 12px);
}

.brand {
  display: grid;
  grid-template-columns: minmax(96px, 168px) minmax(0, auto);
  grid-template-areas:
    "logo eyebrow"
    "logo title";
  column-gap: 16px;
  align-items: center;
  min-width: 0;
}

.game-logo {
  grid-area: logo;
  width: 100%;
  max-height: 104px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.eyebrow {
  grid-area: eyebrow;
  margin: 0 0 2px;
  color: #5d3018;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  grid-area: title;
  margin: 0;
  font-size: clamp(2rem, 4.8vw, 4.7rem);
  line-height: 0.92;
  text-shadow: 0 4px 0 rgba(255, 244, 185, 0.6);
}

.avatar-control {
  display: grid;
  grid-template-columns: 64px auto;
  align-items: center;
  gap: 10px;
  min-width: 156px;
  color: var(--paper);
  font-weight: 800;
  background: rgba(39, 20, 13, 0.72);
  border: 2px solid rgba(255, 247, 223, 0.35);
  border-radius: 8px;
  padding: 8px 12px 8px 8px;
  box-shadow: var(--shadow);
}

.avatar-control input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffe090;
  border: 3px solid var(--paper);
}

.avatar.large {
  width: 84px;
  height: 84px;
}

.hud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: clamp(6px, 1.2vh, 12px);
}

.hud-item {
  min-width: 0;
  padding: clamp(6px, 1vh, 10px) 12px;
  color: var(--paper);
  background: rgba(38, 20, 13, 0.78);
  border: 2px solid rgba(255, 247, 223, 0.2);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hud-item span {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}

.hud-item strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.15rem, 2.6vw, 1.8rem);
  line-height: 1;
}

.combo-box.hot {
  background: #8f1f2c;
}

.arena {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border: 3px solid rgba(96, 46, 20, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 244, 180, 0.2) 0%, transparent 34%),
    linear-gradient(180deg, transparent 0 42%, rgba(240, 193, 94, 0.92) 43% 100%);
  box-shadow: var(--shadow);
}

.sun {
  position: absolute;
  top: 34px;
  right: 9%;
  width: 118px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6b0 0 35%, #f59b3d 66%, rgba(245, 155, 61, 0) 70%);
}

.dunes {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 260px;
  background-repeat: repeat-x;
  background-size: 520px 260px;
}

.dunes-back {
  bottom: 120px;
  opacity: 0.8;
  background-image: radial-gradient(80% 86% at 50% 100%, #e09b42 0 52%, transparent 53%);
}

.dunes-front {
  bottom: -4px;
  background-image: radial-gradient(86% 92% at 50% 100%, var(--sand) 0 56%, transparent 57%);
}

.sparkles {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.85) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255,212,71,0.8) 0 2px, transparent 3px);
  background-position: 8% 26%, 72% 38%;
  background-size: 170px 130px, 210px 170px;
}

.player-panel {
  position: absolute;
  left: clamp(12px, 2vw, 24px);
  top: clamp(58px, 10vh, 92px);
  z-index: 2;
  width: clamp(96px, 13vw, 150px);
  height: clamp(140px, 22vh, 220px);
  overflow: hidden;
  border: 4px solid rgba(255, 247, 223, 0.8);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,247,223,0.24), transparent 34%),
    rgba(39, 20, 13, 0.78);
  box-shadow: var(--shadow);
}

.player-panel::after {
  content: "";
  position: absolute;
  inset: auto 8px 8px;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.24);
  filter: blur(4px);
}

.player-panel img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: clamp(10px, 2vmin, 22px);
  width: min(860px, 90%, 62dvh);
  max-height: calc(100% - 40px);
  margin: clamp(38px, 8vh, 96px) auto 0;
  padding: clamp(8px, 1.5vmin, 18px);
  cursor: none;
}

.board button {
  cursor: none;
}

.hole {
  position: relative;
  aspect-ratio: 1.2 / 1;
  height: auto;
  overflow: hidden;
  border: 4px solid rgba(94, 45, 17, 0.5);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 42%, #0c0705 0 42%, var(--hole) 51%, var(--rim) 55%, #ecbd62 72%, rgba(255, 230, 154, 0.9) 100%);
  box-shadow:
    inset 0 14px 22px rgba(0, 0, 0, 0.48),
    0 18px 0 rgba(137, 78, 32, 0.24);
}

.hole:focus-visible {
  outline: 5px solid #fff7df;
  outline-offset: 4px;
}

.worm {
  position: absolute;
  left: 50%;
  bottom: -160%;
  width: min(77.4%, 159px);
  height: 110%;
  transform: translateX(-50%);
  border-radius: 0;
  background: url("assets/Norma_Hulud.png") center bottom / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 10px 6px rgba(0,0,0,0.28));
  transition: bottom 120ms ease-out, opacity 120ms ease-out, transform 120ms ease-out;
}

.worm::before,
.worm::after,
.worm-face {
  display: none;
}

.hole.active .worm {
  bottom: -8%;
}

.hole.fast .worm {
  filter: drop-shadow(0 10px 6px rgba(0,0,0,0.28)) saturate(1.25) hue-rotate(18deg);
}

.hole.golden .worm {
  filter: drop-shadow(0 10px 6px rgba(0,0,0,0.28)) sepia(0.55) saturate(1.6) brightness(1.2);
}

.hole.shai .worm {
  width: min(77.4%, 159px);
  height: 110%;
  bottom: -160%;
  border-radius: 0;
  background: url("assets/Shai_Hulud_Worm.png") center bottom / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 10px 6px rgba(0,0,0,0.28));
}

.hole.shai .worm::before,
.hole.shai .worm::after,
.hole.shai .worm-face {
  display: none;
}

.hole.active.shai .worm {
  bottom: -8%;
}

.hole.armored .worm {
  filter: drop-shadow(0 10px 6px rgba(0,0,0,0.28)) grayscale(0.45) contrast(1.15);
}

.hole.armored.cracked .worm {
  filter: drop-shadow(0 10px 6px rgba(0,0,0,0.28)) grayscale(0.15) saturate(1.4) brightness(1.12);
}

.dust,
.impact {
  pointer-events: none;
}

.dust {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 24%;
  height: 24px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(255, 229, 153, 0.95) 0 20%, transparent 70%);
}

.hole.active .dust {
  animation: puff 260ms ease-out;
}

.impact {
  position: absolute;
  top: 20%;
  left: 50%;
  min-width: 92px;
  transform: translate(-50%, -20%) rotate(-8deg) scale(0);
  color: #fff7df;
  background: var(--red);
  border: 3px solid var(--paper);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.9rem;
  font-weight: 950;
  box-shadow: 0 6px 0 rgba(39,20,13,0.22);
}

.hole.hit .impact {
  animation: impact 230ms ease-out;
}

.hole.hit .worm {
  transform: translateX(-50%) rotate(-9deg) scale(0.82);
  opacity: 0.35;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(6px, 1.2vh, 12px);
}

.controls button,
.toggle {
  min-height: 44px;
  color: var(--paper);
  background: rgba(39, 20, 13, 0.78);
  border: 2px solid rgba(255, 247, 223, 0.3);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 900;
  box-shadow: var(--shadow);
}

.controls .primary,
dialog .primary {
  color: var(--ink);
  background: var(--gold);
  border-color: #fff2a8;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}

.status-line {
  min-height: 24px;
  margin-top: 6px;
  color: #432413;
  font-weight: 800;
  font-size: clamp(0.84rem, 1.7vw, 1rem);
}

.status-line p {
  margin: 0;
}

dialog {
  width: min(360px, calc(100% - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}

dialog::backdrop {
  background: rgba(28, 14, 8, 0.6);
}

.dialog-body {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px;
  text-align: center;
}

.dialog-body h2,
.dialog-body p {
  margin: 0;
}

.dialog-body h2 {
  font-size: 2rem;
}

.dialog-body button {
  margin-top: 8px;
  min-height: 44px;
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 900;
}

.shake {
  animation: shake 150ms linear;
}

.mallet {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: 126px;
  height: 154px;
  pointer-events: none;
  transform: translate3d(var(--mallet-x, 50vw), var(--mallet-y, 50vh), 0) translate(-28px, -110px) rotate(-26deg);
  transform-origin: 42px 108px;
  transition: opacity 120ms ease-out;
  filter: drop-shadow(0 12px 10px rgba(39, 20, 13, 0.28));
}

.mallet.hidden {
  opacity: 0;
}

.mallet-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  height: 62px;
  border: 4px solid #631e17;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(180deg, #e43c2d 0%, #9c211b 100%);
  box-shadow: inset -10px 0 0 rgba(0,0,0,0.16);
}

.mallet-head::before,
.mallet-head::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 14px;
  height: 38px;
  border-radius: 50%;
  background: #ff7259;
}

.mallet-head::before {
  left: -8px;
}

.mallet-head::after {
  right: -8px;
  background: #761913;
}

.mallet-head img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  transform: translate(-50%, -50%);
  border: 3px solid #fff7df;
  border-radius: 50%;
  object-fit: cover;
  background: #ffe090;
}

.mallet-handle {
  position: absolute;
  left: 34px;
  top: 52px;
  width: 24px;
  height: 112px;
  border: 4px solid #432413;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.22), transparent 44%),
    repeating-linear-gradient(180deg, #9f5b2a 0 14px, #784018 15px 26px);
  transform: rotate(-28deg);
  transform-origin: top center;
}

.mallet.whacking {
  animation: mallet-whack 145ms ease-out;
}

@keyframes puff {
  from {
    opacity: 0.9;
    transform: scale(0.35);
  }
  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes impact {
  0% {
    transform: translate(-50%, -20%) rotate(-8deg) scale(0);
  }
  65% {
    transform: translate(-50%, -40%) rotate(7deg) scale(1);
  }
  100% {
    transform: translate(-50%, -54%) rotate(7deg) scale(0.7);
    opacity: 0;
  }
}

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

@keyframes mallet-whack {
  0% {
    transform: translate3d(var(--mallet-x), var(--mallet-y), 0) translate(-28px, -110px) rotate(-26deg);
  }
  55% {
    transform: translate3d(var(--mallet-x), var(--mallet-y), 0) translate(-16px, -88px) rotate(18deg);
  }
  100% {
    transform: translate3d(var(--mallet-x), var(--mallet-y), 0) translate(-28px, -110px) rotate(-26deg);
  }
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 1ms !important;
  scroll-behavior: auto !important;
  transition-duration: 1ms !important;
}

@media (hover: none), (pointer: coarse) {
  .mallet {
    display: none;
  }

  .board,
  .board button,
  .hole {
    cursor: auto;
  }

  .hole {
    border-width: 3px;
  }

  .controls button,
  .toggle,
  .avatar-control button,
  dialog button {
    min-height: 48px;
  }
}

@media (max-width: 760px) {
  .game-shell {
    width: min(100% - 12px, 560px);
    padding: 6px 0;
  }

  .topbar {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }

  .brand {
    grid-template-columns: 48px minmax(0, auto);
    grid-template-areas:
      "logo title"
      "logo title";
    column-gap: 8px;
    flex: 1 1 auto;
  }

  .game-logo {
    max-height: 48px;
    border-radius: 6px;
  }

  .eyebrow {
    display: none;
  }

  h1 {
    font-size: clamp(1.1rem, 5vw, 1.6rem);
    line-height: 1;
  }

  .avatar-control {
    flex: 0 0 auto;
    min-width: 0;
    grid-template-columns: 40px;
    grid-template-areas: "ava";
    padding: 4px;
    border-width: 2px;
    font-size: 0;
  }

  .avatar-control span {
    display: none;
  }

  .avatar {
    grid-area: ava;
    width: 40px;
    height: 40px;
    border-width: 2px;
  }

  .hud {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
  }

  .hud-item {
    padding: 4px 6px;
    border-width: 1px;
  }

  .hud-item span {
    font-size: 0.6rem;
    letter-spacing: 0.04em;
  }

  .hud-item strong {
    font-size: 1.05rem;
  }

  .arena {
    min-height: 0;
    border-width: 2px;
  }

  .board {
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    gap: 8px;
    width: min(100%, 58dvh);
    margin-top: clamp(28px, 6vh, 64px);
    padding: 8px;
  }

  .player-panel {
    left: 8px;
    top: 10px;
    width: 60px;
    height: 86px;
    border-width: 3px;
  }

  .sun {
    width: 80px;
    top: 18px;
  }

  .hole {
    height: auto;
  }

  .controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
  }

  .controls button,
  .toggle {
    width: 100%;
    justify-content: center;
    min-height: 42px;
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .status-line {
    margin-top: 4px;
    min-height: 18px;
    font-size: 0.78rem;
  }

  /* In-game minimization: when a round is live, collapse top + bottom chrome */
  body.playing .topbar,
  body.playing .status-line {
    display: none;
  }

  body.playing .hud {
    margin-bottom: 4px;
  }

  body.playing .hud-item {
    padding: 3px 6px;
  }

  body.playing .controls {
    grid-template-columns: 1fr;
    margin-top: 4px;
  }

  body.playing #startBtn,
  body.playing #muteBtn,
  body.playing .controls .toggle {
    display: none;
  }

  body.playing #resetBtn {
    min-height: 34px;
    padding: 4px 10px;
    font-size: 0.78rem;
    opacity: 0.85;
  }

  body.playing .board {
    margin-top: clamp(18px, 4vh, 48px);
    width: min(100%, 70dvh);
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .game-shell {
    width: min(100% - 12px, 900px);
    padding: 4px 0;
  }

  .topbar {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }

  .brand {
    grid-template-columns: 56px minmax(0, auto);
    column-gap: 8px;
  }

  .game-logo {
    max-height: 56px;
  }

  .eyebrow {
    display: none;
  }

  h1 {
    font-size: clamp(1rem, 3vw, 1.6rem);
  }

  .avatar-control {
    min-width: 0;
    grid-template-columns: 40px auto;
    padding: 4px 8px 4px 4px;
    font-size: 0.78rem;
  }

  .avatar-control .avatar {
    width: 40px;
    height: 40px;
    border-width: 2px;
  }

  .hud {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 4px;
  }

  .hud-item {
    padding: 4px 8px;
  }

  .hud-item span {
    font-size: 0.62rem;
  }

  .hud-item strong {
    font-size: 1rem;
  }

  .arena {
    border-width: 2px;
  }

  .board {
    width: min(100%, 80vh);
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    gap: 8px;
    margin-top: clamp(18px, 4vh, 48px);
    padding: 6px;
  }

  .player-panel {
    width: 56px;
    height: 80px;
    top: 8px;
    left: 8px;
    border-width: 2px;
  }

  .sun {
    width: 60px;
    top: 12px;
  }

  .controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 4px;
  }

  .controls button,
  .toggle {
    min-height: 40px;
    padding: 4px 8px;
    font-size: 0.8rem;
  }

  .status-line {
    margin-top: 2px;
    min-height: 18px;
    font-size: 0.78rem;
  }

  body.playing .topbar,
  body.playing .status-line {
    display: none;
  }

  body.playing #startBtn,
  body.playing #muteBtn,
  body.playing .controls .toggle {
    display: none;
  }

  body.playing .controls {
    grid-template-columns: 1fr;
    margin-top: 2px;
  }

  body.playing #resetBtn {
    min-height: 30px;
    padding: 2px 10px;
    font-size: 0.76rem;
    opacity: 0.85;
  }

  body.playing .hud {
    margin-bottom: 4px;
  }

  body.playing .board {
    margin-top: 8px;
    width: min(100%, 92vh);
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .brand {
    grid-template-columns: 118px minmax(0, auto);
  }

  h1 {
    font-size: clamp(1.8rem, 4vw, 3.4rem);
  }

  .avatar {
    width: 52px;
    height: 52px;
  }

  .avatar-control {
    grid-template-columns: 52px auto;
    padding: 6px 10px 6px 6px;
  }
}