/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Root ── */
html { height: 100%; overflow: hidden; }

/* ── Body ── */
body {
  background: #2c1f0e;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  font-family: 'Georgia', serif;
  user-select: none;
  overflow: hidden;
  touch-action: none;   /* prevent browser pan/zoom on the whole page */
}

/* ── Game wrapper ── */
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#game-wrapper {
  position: relative;
  /* Scale to fit viewport in both orientations, never exceed native 800×480.
     The third term caps width so that aspect-ratio never makes height exceed 100dvh. */
  width: min(800px, 100vw, calc(100dvh * 800 / 480));
  aspect-ratio: 800 / 480;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,0.7), 0 0 0 3px #8b6340;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── HUD ── */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(to bottom, rgba(30,20,10,0.75), transparent);
  pointer-events: none;
  z-index: 5;
}

#hud-left { display: flex; align-items: center; gap: 6px; }
.hud-icon { font-size: 1.3rem; }

#lives-pip {
  display: flex;
  gap: 4px;
}

/* Heart pips drawn by JS as ♥ chars */
#lives-pip span {
  font-size: 1.1rem;
  color: #e86060;
  text-shadow: 0 0 6px #e86060;
}

#hud-center, #hud-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

#hud-hs {
  font-size: 0.68rem;
  color: #ffe08a;
  letter-spacing: 1px;
  opacity: 0.85;
}

.hud-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c8a87a;
}

#clam-count, #level-num {
  font-size: 1.25rem;
  color: #fff8ee;
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* ── Message ribbon ── */
#message-ribbon {
  position: absolute;
  bottom: 56px; left: 50%;
  transform: translateX(-50%);
  background: rgba(30,18,8,0.82);
  color: #f5ddb0;
  font-size: 0.95rem;
  padding: 8px 24px;
  border-radius: 20px;
  border: 1px solid #8b6340;
  white-space: nowrap;
  z-index: 6;
  pointer-events: none;
  transition: opacity 0.4s;
}
#message-ribbon.hidden { display: none; }

/* ── Overlay ── */
#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(20, 12, 4, 0.72);
  backdrop-filter: blur(3px);
  z-index: 10;
  border-radius: 16px;
}

#overlay.hidden { display: none; }

/* ── Panel ── */
.panel {
  text-align: center;
  padding: 36px 52px;
  background: linear-gradient(160deg, #3d2a12, #2a1a08);
  border: 2px solid #8b6340;
  border-radius: 20px;
  box-shadow: 0 0 60px rgba(200,140,60,0.18), inset 0 1px 0 rgba(255,220,160,0.1);
  max-width: 440px;
}

.panel.hidden { display: none !important; }

.otter-emoji {
  font-size: 3.2rem;
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.panel h1 {
  font-size: 2.4rem;
  color: #f5ddb0;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(200,140,60,0.4);
  margin-bottom: 4px;
}

.panel h2 {
  font-size: 1.9rem;
  color: #f5ddb0;
  margin-bottom: 10px;
}

.tagline {
  color: #c8a87a;
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 18px;
}

.panel p {
  color: #c8a87a;
  font-size: 0.93rem;
  margin-bottom: 8px;
  line-height: 1.6;
}

.score-line {
  color: #f5ddb0 !important;
  font-size: 1.05rem !important;
  margin-top: 8px !important;
}

/* ── Name input (start screen) ── */
.name-input-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0 4px;
}

.name-input-row label {
  font-size: 0.85rem;
  color: #c8a87a;
  letter-spacing: 1px;
}

.name-input-row input {
  padding: 8px 14px;
  background: rgba(0,0,0,0.3);
  border: 1px solid #8b6340;
  border-radius: 20px;
  color: #f5ddb0;
  font-family: 'Georgia', serif;
  font-size: 1rem;
  text-align: center;
  width: 180px;
  outline: none;
  transition: border-color 0.2s;
  user-select: text;
}

.name-input-row input:focus {
  border-color: #e8b96a;
}

.name-input-row input::placeholder {
  color: rgba(200,168,122,0.45);
}

/* ── Controls box ── */
.controls-box {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 12px 18px;
  margin: 14px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ctrl-row {
  font-size: 0.85rem;
  color: #b09060;
}

.ctrl-row strong { color: #f5ddb0; }

.otter-type-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.otter-type-label {
  font-size: 0.85rem;
  color: #c8a87a;
  letter-spacing: 1px;
}
#otter-type-swatches {
  display: flex;
  gap: 10px;
}
.otter-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}
.otter-swatch:hover { transform: scale(1.15); }
.otter-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transform: scale(1.18);
}
.otter-swatch-tip {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: #d4a872;
  white-space: nowrap;
  pointer-events: none;
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid #7a5a30;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.8em;
  color: #f5ddb0;
}

/* ── Button ── */
button {
  margin-top: 8px;
  padding: 11px 36px;
  font-family: 'Georgia', serif;
  font-size: 1rem;
  letter-spacing: 1px;
  color: #2a1a08;
  background: linear-gradient(to bottom, #e8b96a, #c8852a);
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 3px 12px rgba(200,120,30,0.4);
  transition: filter 0.15s, transform 0.1s;
}

button:hover  { filter: brightness(1.12); transform: translateY(-1px); }
button:active { filter: brightness(0.95); transform: translateY(1px); }

/* ── Level-up countdown ── */
#countdown {
  font-size: 3.5rem;
  color: #f5ddb0;
  margin-top: 10px;
  text-shadow: 0 0 20px rgba(200,140,60,0.6);
}

/* ── On-screen touch controls ── */
#touch-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 10px 10px;
  pointer-events: none;   /* let game canvas receive events by default */
  z-index: 8;
}

#touch-dpad, #touch-action {
  display: flex;
  gap: 8px;
  pointer-events: all;
}

.touch-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.30);
  border: 2px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.3rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  transition: background 0.08s, border-color 0.08s;
  /* Remove default button styles */
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
}

.touch-btn:active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ── Fullscreen button (touch devices only) ── */
#btn-fullscreen {
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.30);
  border: 2px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.80);
  font-size: 1.1rem;
  display: none;          /* hidden by default; shown on touch devices below */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0; margin: 0;
  appearance: none; -webkit-appearance: none;
  touch-action: none;
  z-index: 9;
}
#btn-fullscreen:active { background: rgba(255,255,255,0.22); }

/* Show touch controls only on touch/coarse pointer devices */
@media (hover: hover) and (pointer: fine) {
  #touch-controls { display: none; }
}

@media (hover: none), (pointer: coarse) {
  #btn-fullscreen { display: flex; }
}

/* Mobile responsive: instructions */
.desktop-only { display: block; }
.mobile-only  { display: none;  }

@media (hover: none), (pointer: coarse) {
  .desktop-only { display: none;  }
  .mobile-only  { display: block; }
}

/* ── Hat shop ── */
.shop-clams {
  color: #f5ddb0;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

#hat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 14px;
  padding-right: 2px;
}

.hat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: rgba(0,0,0,0.22);
  border-radius: 10px;
  border: 1px solid rgba(139,99,64,0.4);
}
.hat-item.equipped {
  border-color: #e8b96a;
  background: rgba(232,185,106,0.12);
}
.hat-item.box-locked {
  border-color: rgba(180,120,255,0.45);
  background: rgba(120,60,200,0.10);
  opacity: 0.75;
}

.hat-name  { font-size: 0.78rem; color: #f5ddb0; text-align: center; }
.hat-price { font-size: 0.72rem; color: #c8a87a; }

.hat-btn {
  margin: 2px 0 0;
  padding: 4px 12px;
  font-size: 0.75rem;
  letter-spacing: 0;
  border-radius: 16px;
}
.hat-btn:disabled { opacity: 0.45; filter: none; transform: none; cursor: default; }

/* Responsive panel: shrink padding on small screens */
@media (max-width: 480px) {
  .panel {
    padding: 20px 16px;
    max-width: 92vw;
  }
  .panel h1 { font-size: 1.8rem; }
  .panel h2 { font-size: 1.5rem; }
  .otter-emoji { font-size: 2.4rem; margin-bottom: 6px; }
  .tagline { margin-bottom: 10px; }
  .name-input-row { margin: 8px 0 2px; }
  .otter-type-row { margin: 2px 0 4px; }
  .otter-swatch { width: 28px; height: 28px; }
  .otter-swatch-tip { display: none; }
  .controls-box { margin: 8px 0 12px; padding: 8px 14px; }
}

/* On touch/mobile the overlay escapes the clipped game-wrapper so the
   full panel is reachable — auto-margins center it when there's space,
   scroll brings the button into view when there isn't */
@media (hover: none), (pointer: coarse) {
  #overlay {
    position: fixed;
    inset: 0;
    border-radius: 0;
    overflow-y: auto;
    touch-action: pan-y;
    align-items: flex-start;
  }
  #overlay .panel {
    flex-shrink: 0;
    margin: auto;
    width: calc(100% - 24px);
    max-width: 440px;
  }
}