* { box-sizing: border-box; }

html, body {
  overflow: hidden;
}

body {
  margin: 0;
  background: #0b0b16;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* iOS counts its toolbars into 100vh, which would centre the shell a
     toolbar's height too low; dvh is the height actually on screen */
  min-height: 100dvh;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: #f2f2f2;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  /* no magnifier/copy callout on a long press, no grey flash on every tap */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game-wrap {
  position: relative;
  width: 900px;
  height: 600px;
  flex-shrink: 0;
  transform-origin: center center;
  box-shadow: 0 0 40px rgba(80, 60, 200, 0.35);
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
}

canvas {
  display: block;
  background: #05040a;
}

.overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #241a3a 0%, #0b0b16 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.overlay.hidden { display: none; }

#start-screen {
  background-color: #000;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 75px 110px, #fff, transparent),
    radial-gradient(2px 2px at 130px 45px, #fff, transparent),
    radial-gradient(1.4px 1.4px at 170px 140px, #cfd6ff, transparent),
    radial-gradient(1px 1px at 10px 160px, #fff, transparent),
    radial-gradient(1.8px 1.8px at 100px 180px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 150px 10px, #cfd6ff, transparent),
    radial-gradient(1px 1px at 55px 60px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
}

.overlay h1 {
  font-size: 48px;
  margin: 0 0 10px 0;
  color: #ffd166;
  text-shadow: 0 0 12px rgba(255, 209, 102, 0.6);
}

.tagline {
  font-size: 16px;
  line-height: 1.5;
  color: #cfcfe8;
  margin-bottom: 24px;
}

.controls-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
  font-size: 15px;
  color: #e8e8ff;
}

.key {
  display: inline-block;
  background: #3a2f5c;
  border: 1px solid #7a6bb0;
  border-radius: 6px;
  padding: 3px 10px;
  margin-right: 10px;
  font-weight: bold;
  color: #ffd166;
  min-width: 70px;
}

button {
  background: #ff6b6b;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 0 #c94b4b;
  transition: transform 0.1s;
}

button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #c94b4b;
}

.win-btn-row {
  display: flex;
  gap: 14px;
}

.secondary-btn {
  background: #3a2f5c;
  box-shadow: 0 4px 0 #241f3d;
}

.secondary-btn:active {
  box-shadow: 0 1px 0 #241f3d;
}

#hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  padding: 14px 18px;
}

#hud.hidden { display: none; }

/* mute / pause cluster, top-right; the canvas compass sits below it */
#hud-controls {
  position: absolute;
  top: 14px;
  right: 18px;
  display: flex;
  gap: 8px;
}

.hud-btn {
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover only where there's a real hover — on an iPad it sticks after a tap */
@media (hover: hover) {
  .hud-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: none;
  }
}

/* the menu's own mute button, pinned to the start screen's corner */
#menu-mute-btn {
  position: absolute;
  top: 14px;
  right: 18px;
}

.hud-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

#health-bar-bg {
  width: 220px;
  height: 22px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  border-radius: 6px;
  overflow: hidden;
}

#health-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #57e389, #2ecc71);
  transition: width 0.15s;
}

/* while standing still heals you, so the bar creeping up has a visible cause */
#health-bar-fill.regenerating {
  animation: health-regen 1.1s ease-in-out infinite;
}

@keyframes health-regen {
  0%, 100% { box-shadow: inset 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.85); }
}

@media (prefers-reduced-motion: reduce) {
  #health-bar-fill.regenerating { animation: none; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.6); }
}

#coins {
  font-size: 18px;
  font-weight: bold;
  color: #ffd166;
  text-shadow: 1px 1px 2px #000;
}

#objective {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
}

#level-indicator {
  margin-top: 8px;
  font-size: 15px;
  font-weight: bold;
  color: #ffd166;
  text-shadow: 1px 1px 2px #000;
}

#friend-indicator {
  margin-top: 4px;
  font-size: 15px;
  font-weight: bold;
  color: #ff9dc4;
  text-shadow: 1px 1px 2px #000;
}

#parts-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.part-slot {
  display: inline-block;
  font-size: 20px;
  opacity: 0.3;
  filter: grayscale(1);
  transition: all 0.2s;
}

.part-slot.filled {
  opacity: 1;
  filter: none;
  transform: scale(1.2);
}

#toast {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: bold;
  color: #ffd166;
  text-shadow: 1px 1px 3px #000;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

#toast.show { opacity: 1; }

#daily-bonus-banner {
  background: linear-gradient(90deg, #ffd166, #ff6b6b);
  color: #241a3a;
  font-weight: bold;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.5);
  transition: opacity 0.4s;
}

#daily-bonus-banner.hidden { display: none; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  max-width: 840px;
}

.tab-btn {
  background: #3a2f5c;
  color: #cfcfe8;
  border: 1px solid #7a6bb0;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
}

.tab-btn.active {
  background: #ff6b6b;
  color: #fff;
  border-color: #ff6b6b;
}

.tab-panel.hidden { display: none; }

#coin-total {
  font-size: 18px;
  font-weight: bold;
  color: #ffd166;
  margin-bottom: 18px;
}

#shop-items,
#color-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
  width: 340px;
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.shop-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #4a3d6b;
  border-radius: 8px;
  padding: 10px 14px;
}

.shop-icon {
  font-size: 24px;
  margin-right: 12px;
}

.shop-info {
  flex: 1;
  text-align: left;
}

.shop-name {
  font-size: 15px;
  font-weight: bold;
  display: block;
}

.shop-desc {
  font-size: 15px;
  color: #cfcfe8;
  display: block;
}

.shop-cost {
  font-size: 13px;
  color: #ffd166;
  margin-right: 12px;
  white-space: nowrap;
}

.shop-btn {
  padding: 8px 14px;
  font-size: 13px;
  box-shadow: none;
  white-space: nowrap;
}

.shop-btn.owned {
  background: #4a4a4a;
  cursor: default;
}

.shop-btn.equipped {
  background: #2ecc71;
  cursor: default;
}

.shop-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#wheel-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 6px auto 22px;
}

#wheel {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 6px solid #ffd166;
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.4);
  position: relative;
}

#wheel-pointer {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  line-height: 1;
  color: #ffd166;
  text-shadow: 1px 1px 3px #000;
  z-index: 2;
}

.wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  margin-left: -20px;
  margin-top: -20px;
  text-align: center;
  pointer-events: none;
}

.wheel-label span {
  display: block;
}

.wheel-label .wheel-icon {
  font-size: 18px;
}

.wheel-label .wheel-text {
  font-size: 14px;
  font-weight: bold;
  color: inherit;
}

/* the real chance, sat under the prize it belongs to */
.wheel-label .wheel-pct {
  font-size: 12px;
  font-weight: bold;
  color: inherit;
  opacity: 0.85;
}

#spin-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 0 4px 0 #c94b4b;
  transform: none;
}

#spin-result {
  min-height: 22px;
  font-size: 15px;
  font-weight: bold;
  color: #ffd166;
  margin-top: 14px;
}

#name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #cfcfe8;
}

#player-name {
  /* Safari won't let anyone type into a field that inherits the body's
     user-select: none */
  -webkit-user-select: text;
  user-select: text;
  background: #241a3a;
  border: 1px solid #7a6bb0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 14px;
  color: #fff;
  width: 160px;
}

#player-name:focus {
  outline: none;
  border-color: #ffd166;
}

#leaderboard-list {
  width: 360px;
  max-width: 100%;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #4a3d6b;
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 8px;
  font-size: 14px;
}

.lb-row.lb-you {
  border-color: #ffd166;
  background: rgba(255, 209, 102, 0.12);
}

.lb-rank {
  font-weight: bold;
  color: #ffd166;
  width: 26px;
  flex-shrink: 0;
}

.lb-name {
  flex: 1;
  text-align: left;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-time {
  color: #7fd8ff;
  font-weight: bold;
  white-space: nowrap;
}

.lb-coins {
  color: #cfcfe8;
  font-size: 13px;
  white-space: nowrap;
  min-width: 56px;
  text-align: right;
}

#leaderboard-empty {
  color: #cfcfe8;
  font-size: 14px;
  padding: 20px 0;
}

/* ---------- touch controls ---------- */
#touch-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#joystick-base {
  position: absolute;
  left: 26px;
  bottom: 26px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.3);
  pointer-events: auto;
  touch-action: none;
}

/* an invisible ring around the stick that also grabs it, so a thumb that
   lands a little wide still steers instead of doing nothing */
#joystick-base::before {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
}

#joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  margin-top: -31px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.75);
  pointer-events: none;
  transition: background 0.1s;
}

#joystick-base.active #joystick-knob {
  background: rgba(127, 216, 255, 0.7);
}

#touch-actions {
  position: absolute;
  right: 26px;
  bottom: 26px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.touch-btn {
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dash-btn {
  width: 72px;
  height: 72px;
  font-size: 28px;
}

#attack-btn {
  width: 92px;
  height: 92px;
  font-size: 36px;
}

.touch-btn.active {
  background: rgba(255, 107, 107, 0.55);
  border-color: rgba(255, 107, 107, 0.8);
  transform: scale(0.94);
}

/* A 900x600 shell on a phone held upright scales to about 0.4, which leaves
   the HUD text near 6px — CrazyGames asks for legibility at
   devicePixelRatio 1, and 6px isn't. Turned sideways the same phone gets
   0.625 and readable text, so ask for the turn.
   The 560px ceiling is where the scale drops under ~0.62: phones land below
   it, tablets (768px and up) stay well clear and are never nagged.
   NOTE: game.js watches this exact query to pause behind the prompt — the
   two strings have to stay in step. */
#rotate-prompt { display: none; }

@media (orientation: portrait) and (pointer: coarse) and (max-width: 560px) {
  #rotate-prompt {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background: #0b0b16;
  }
}

#rotate-icon {
  font-size: 56px;
  animation: rotate-hint 2.4s ease-in-out infinite;
}

#rotate-prompt h2 {
  margin: 0;
  font-size: 24px;
  color: #ffd166;
}

#rotate-prompt p {
  margin: 0;
  font-size: 16px;
  color: #e8e8ff;
}

@keyframes rotate-hint {
  0%, 45% { transform: rotate(0deg); }
  70%, 100% { transform: rotate(-90deg); }
}

/* a player who has asked for less motion just gets the static icon */
@media (prefers-reduced-motion: reduce) {
  #rotate-icon { animation: none; }
}

/* The menu explains the controls, so it has to name the ones the player
   actually has: keys on a desktop, the on-screen stick and buttons on a
   phone. Touch is the default here because a device that reports neither
   hover nor a fine pointer is the ambiguous case, and on-screen controls
   are always present to match the instructions. */
.keyboard-controls { display: none; }

@media (hover: hover) and (pointer: fine) {
  #touch-controls { display: none; }
  .touch-controls-help { display: none; }
  .keyboard-controls { display: flex; }
}

/* game.js adds .touch-ui once it knows a finger is in play — a coarse
   pointer, an iPad (which can report a fine pointer with a trackpad case on),
   or simply the first touch on a touchscreen laptop. That beats the query
   above, so the stick and buttons are there for whoever is actually touching. */
body.touch-ui #touch-controls { display: block; }
body.touch-ui .touch-controls-help { display: flex; }
body.touch-ui .keyboard-controls { display: none; }

/* Everything a finger has to hit in the menus and HUD grows to at least
   48px of game space, which stays near or above 44pt even on an iPad held
   upright, where the shell is drawn at about 0.85. */
body.touch-ui .hud-btn {
  width: 52px;
  height: 52px;
  font-size: 24px;
}

body.touch-ui .tab-btn,
body.touch-ui .shop-btn {
  min-height: 48px;
  font-size: 16px;
}

body.touch-ui #player-name {
  min-height: 48px;
  /* 16px is also the size below which iOS zooms the page into the field */
  font-size: 16px;
}

/* The bigger rows can outgrow the 600px shell (the Armory nearly does
   already), so let the menu scroll with a finger instead of clipping its
   top and bottom off. The ::before/::after spacers centre the content when it
   fits and fall to nothing when it doesn't, so a long list starts at the top
   rather than hanging off both ends. */
body.touch-ui #start-screen {
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

body.touch-ui #start-screen::before,
body.touch-ui #start-screen::after {
  content: "";
  margin: auto;
}