:root {
  --bg: #0a0612;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05030a;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 800px at 50% -10%, #241041 0%, #0a0612 55%, #05030a 100%);
}

#game {
  display: block;
  image-rendering: auto;
  touch-action: none;
  /* size set by JS to device pixel ratio */
}

/* ---- Loading ---- */
#loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #05030a;
  z-index: 50;
  transition: opacity 0.5s ease;
  font-size: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #9a7fd0;
}
#loading.gone { opacity: 0; pointer-events: none; }

.loading-blob {
  width: 70px; height: 70px;
  border-radius: 46% 54% 58% 42% / 55% 48% 52% 45%;
  background: radial-gradient(circle at 35% 30%, #ff9a3c, #d63d3d);
  box-shadow: 0 0 40px #ff6a3caa, inset -8px -10px 18px #0006, inset 6px 8px 14px #fff6;
  animation: wobble 1.4s ease-in-out infinite;
}
@keyframes wobble {
  0%,100% { border-radius: 46% 54% 58% 42% / 55% 48% 52% 45%; transform: translateY(0) scale(1,1); }
  30% { border-radius: 58% 42% 45% 55% / 42% 60% 40% 58%; transform: translateY(-6px) scale(1.06,0.94); }
  60% { border-radius: 42% 58% 55% 45% / 60% 40% 62% 38%; transform: translateY(4px) scale(0.95,1.05); }
}

/* ---- Touch controls ---- */
#touch-controls {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 18px 22px calc(18px + env(safe-area-inset-bottom));
  z-index: 20;
  pointer-events: none;
}
#touch-controls.hidden { display: none; }
#touch-controls .dpad,
#touch-controls .abtns { display: flex; gap: 14px; align-items: center; pointer-events: auto; }

.tbtn {
  width: 62px; height: 62px;
  border-radius: 20px;
  border: none;
  background: linear-gradient(180deg, #ffffff22, #ffffff09);
  border: 1px solid #ffffff22;
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px #0007, inset 0 1px 0 #ffffff33;
  transition: transform 0.05s, background 0.1s;
}
.tbtn:active { transform: scale(0.9); background: linear-gradient(180deg, #ffffff44, #ffffff18); }
.tbtn.drop { width: 92px; font-size: 15px; letter-spacing: 0.1em; }
.tbtn.rot { background: linear-gradient(180deg, #ffd36e33, #ff8a3c18); }
.tbtn.attack { display: none; width: 72px; font-size: 14px; letter-spacing: 0.08em; background: linear-gradient(180deg, #ff5a7a55, #b45bff22); }
.tbtn.attack.showdown-active { display: flex; }

.hidden { display: none !important; }

/* Title-screen placements stay above the title, away from game controls. */
#monetization {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  z-index: 25;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
#monetization [hidden], #monetization[hidden] { display: none !important; }
#promotion, #coffee-link { pointer-events: auto; }
#promotion {
  display: flex;
  align-items: center;
  max-width: 320px;
  border: 1px solid #bfa0ec38;
  border-radius: 14px;
  background: #130d20ed;
}
#promotion-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  text-decoration: none;
  color: #e5d8fa;
}
.promotion-label { color: #b8a4d2; font-size: 10px; letter-spacing: .04em; }
.promotion-heading { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#promotion-dismiss {
  border: 0;
  border-radius: 10px;
  margin-right: 4px;
  width: 36px;
  min-width: 36px;
  height: 44px;
  background: transparent;
  color: #b8a4d2;
  font-size: 22px;
  cursor: pointer;
}
#coffee-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin-left: auto;
  padding: 10px 15px;
  border: 1px solid #ffda8090;
  border-radius: 24px;
  background: #ffdb83;
  color: #302013;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
#coffee-link:hover { background: #ffe6a8; }
#promotion-link:hover { color: #fff; }
#promotion-dismiss:hover { background: #ffffff15; color: #fff; }
#monetization :focus-visible { outline: 3px solid #80deff; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 480px) {
  #monetization { gap: 6px; }
  #promotion { max-width: calc(100% - 144px); }
  #promotion-link { padding: 8px; }
  .promotion-label { font-size: 8px; letter-spacing: 0; }
  #coffee-link { padding: 10px; font-size: 11px; gap: 4px; }
}
/* Preserve the title on small landscape phones and short embedded windows. */
@media (max-height: 539px) { #monetization { display: none; } }