* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', system-ui, sans-serif;
  background: linear-gradient(180deg, #ffd6ef 0%, #c7a8ff 100%);
  color: #3a1e5c;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#canvasHolder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

#canvasHolder canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* HUD */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  pointer-events: none;
  z-index: 5;
}

.hud-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.player-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
  font-weight: bold;
  font-size: 18px;
}

.player-tag.pink {
  border: 3px solid #ff5fb0;
  color: #c41e7a;
}

.player-tag.purple {
  border: 3px solid #8b5fff;
  color: #4a1e99;
}

.kitty-icon {
  font-size: 22px;
}

.controls {
  font-size: 14px;
  background: rgba(0,0,0,0.08);
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 1px;
}

.level-info {
  text-align: center;
  background: rgba(255,255,255,0.9);
  padding: 6px 18px;
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
  border: 3px solid #ffb84d;
}

.level-label {
  font-size: 12px;
  color: #7a4a00;
  letter-spacing: 2px;
}

#levelNum {
  font-size: 28px;
  font-weight: bold;
  color: #d97706;
  line-height: 1;
}

.fish-count {
  font-size: 16px;
  margin-top: 2px;
  color: #0077b6;
  font-weight: bold;
}

/* Overlays */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(60, 20, 100, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.overlay.hidden { display: none; }

.panel {
  background: white;
  border-radius: 28px;
  padding: 30px 40px;
  max-width: 92vw;
  text-align: center;
  box-shadow: 0 10px 0 rgba(0,0,0,0.2), 0 0 0 6px #ff9fd8 inset;
  border: 6px solid #ffb3dd;
  animation: bounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.panel.success {
  border-color: #ffd84d;
  box-shadow: 0 10px 0 rgba(0,0,0,0.2), 0 0 0 6px #fff1a8 inset;
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.panel h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 42px);
  color: #c41e7a;
  text-shadow: 3px 3px 0 #ffd6ef;
}

.panel .subtitle {
  margin: 0 0 20px;
  font-size: 18px;
  color: #6b4a99;
}

.instructions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
  flex-wrap: wrap;
}

.inst-card {
  padding: 16px 20px;
  border-radius: 20px;
  min-width: 160px;
}

.inst-card.pink {
  background: #ffe4f1;
  border: 4px solid #ff5fb0;
}

.inst-card.purple {
  background: #ebe0ff;
  border: 4px solid #8b5fff;
}

.inst-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.inst-card.pink .inst-title { color: #c41e7a; }
.inst-card.purple .inst-title { color: #4a1e99; }

.inst-keys {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.key-row {
  display: flex;
  gap: 4px;
}

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  background: white;
  border: 2px solid #555;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px;
  color: #333;
  box-shadow: 0 3px 0 #555;
}

.tip {
  margin: 16px 0;
  font-size: 16px;
  color: #6b4a99;
  line-height: 1.5;
}

.big-btn {
  margin-top: 8px;
  padding: 14px 36px;
  font-size: 22px;
  font-weight: bold;
  font-family: inherit;
  color: white;
  background: linear-gradient(180deg, #ff7ec3, #ff3d9a);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 0 #c41e7a;
  transition: transform 0.1s, box-shadow 0.1s;
}

.big-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #c41e7a;
}

.big-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #c41e7a;
}

/* Theme banner */
.theme-banner {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  z-index: 8;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.theme-banner.hidden { display: none; }

.theme-banner-inner {
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,235,250,0.95));
  border: 5px solid #ff9fd8;
  border-radius: 22px;
  padding: 18px 38px;
  box-shadow: 0 12px 0 rgba(0,0,0,0.18), 0 0 30px rgba(255, 159, 216, 0.6);
  text-align: center;
  animation: bannerIn 2.4s ease-out forwards;
  transform-origin: center;
}

.theme-banner-sub {
  font-size: 16px;
  color: #8b4a99;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.theme-banner-title {
  font-size: clamp(28px, 4.5vw, 40px);
  font-weight: bold;
  color: #c41e7a;
  text-shadow: 3px 3px 0 #ffd6ef;
  margin-top: 4px;
}

@keyframes bannerIn {
  0% { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  15% { transform: scale(1.05) rotate(2deg); opacity: 1; }
  25% { transform: scale(1) rotate(0deg); }
  85% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(0.9) rotate(0deg); opacity: 0; }
}

/* Touch controls */
.touch-controls {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: none;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 6;
  pointer-events: none;
}

.pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.tbtn-row {
  display: flex;
  gap: 6px;
}

.tbtn {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 3px solid rgba(0,0,0,0.2);
  font-size: 22px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25);
}

.pink-pad .tbtn { background: #ff5fb0; }
.purple-pad .tbtn { background: #8b5fff; }

.tbtn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}

/* Show touch controls on smaller screens/touch devices */
@media (max-width: 900px), (pointer: coarse) {
  .touch-controls { display: flex; }
  .controls { display: none; }
}