/* ============ Theme tokens: bright daytime cartoon ============ */
:root {
  --ink: #2a1c10;
  --ink-soft: #6b5a48;
  --paper: #fff8e7;
  --paper-edge: #f0dcb4;
  --glow: #ffe066;

  /* Wood */
  --wood-hi: #d4955a;
  --wood: #ad6a33;
  --wood-lo: #8a4f22;
  --wood-edge: #4f2a10;

  /* Pawn / board colors */
  --red: #e53935;
  --red-dark: #8e1515;
  --green: #22a23a;
  --green-dark: #0f5e1e;
  --yellow: #f7c21b;
  --yellow-dark: #b07d00;
  --blue: #1e6fe0;
  --blue-dark: #0d3c8a;

  --font-title: 'Fredoka', 'Baloo 2', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius: 18px;
  --radius-big: 28px;
  --gutter: max(16px, env(safe-area-inset-left));
  --tap: 48px;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font-title);
  font-weight: 600;
  color: #fff;
  background: #7ccbff;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button,
input,
select { font: inherit; color: inherit; }

input { user-select: text; -webkit-user-select: text; }

[hidden] { display: none !important; }

/* White text with a dark cartoon outline, used on wood and buttons */
.outlined,
.plank-title,
.dialog-title {
  color: #fff;
  -webkit-text-stroke: .1em var(--wood-edge);
  paint-order: stroke fill;
  text-shadow: 0 .08em 0 var(--wood-edge);
}

/* ============ Menu background picture (behind every screen; the game screen covers it) ============ */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #5fb8ec url("../assets/menu-background.png") center / cover no-repeat;
  transition: filter .4s ease;
}

/* The picture's logo is meant for the main menu; elsewhere it is softened so it doesn't peek out
   half-hidden behind titles and panels. */
body[data-screen]:not([data-screen="menu"]) .scene {
  inset: -24px;   /* blurred edges would fade at the screen border */
  filter: blur(5px) brightness(.88) saturate(.9);
}

/* ============ App shell and screens ============ */
#app {
  position: relative;
  z-index: 1;
  height: 100%;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) var(--gutter) max(16px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: scale(.94) translateY(20px);
  filter: blur(6px);
  transition: opacity .45s ease, transform .45s var(--ease-bounce), filter .45s ease, visibility 0s linear .45s;
}

/* No lingering filter on the visible screen: it would create a containing block for fixed children. */
.screen.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  transition: opacity .45s ease, transform .45s var(--ease-bounce), filter .45s ease, visibility 0s;
}

/* ============ Glossy pill buttons ============ */
.pill {
  --c1: #7be36a;
  --c2: #2fbf2f;
  --c3: #13801b;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 60px;
  padding: .35em 1.5em;
  border: 4px solid var(--c3);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 140%);
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, .16),
    inset 0 3px 0 rgba(255, 255, 255, .35),
    0 6px 0 var(--c3),
    0 11px 18px rgba(0, 0, 0, .28);
  color: #fff;
  font-family: var(--font-title);
  font-size: clamp(1.2rem, 4.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  -webkit-text-stroke: .07em rgba(0, 0, 0, .35);
  paint-order: stroke fill;
  text-shadow: 0 .07em 0 rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}

/* Shine across the top */
.pill::before {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: 7%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .08));
  pointer-events: none;
}

.pill > * { position: relative; }

/* Hover and tap keep the entrance animation (--enter) in the list so it never restarts
   (and briefly hides the button) when the hover or tap animation ends. */
.pill, .round-btn { animation: var(--enter, none); }
.pill:hover:not(:disabled) { filter: brightness(1.06); animation: var(--enter, none), wobble .6s ease; }

.pill:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow:
    inset 0 -4px 0 rgba(0, 0, 0, .16),
    inset 0 3px 0 rgba(255, 255, 255, .35),
    0 1px 0 var(--c3),
    0 4px 8px rgba(0, 0, 0, .28);
}

.pill:disabled { cursor: not-allowed; filter: grayscale(.75) brightness(.92); opacity: .75; }
.pill.tap { animation: var(--enter, none), tap-bounce .4s var(--ease-bounce); }

.pill:focus-visible,
.round-btn:focus-visible,
.switch:focus-visible,
.stepper button:focus-visible,
.color-choice:focus-visible,
.side-choice:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 9px rgba(31, 134, 234, .6);
}

.pill-icon {
  width: 1.15em;
  height: 1.15em;
  fill: #fff;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}

.pill-emoji { font-size: 1.05em; -webkit-text-stroke: 0; text-shadow: none; }

.pill-xl { min-height: 78px; font-size: clamp(1.6rem, 6vw, 2.3rem); }
.pill-small { min-height: 48px; padding: .25em 1.1em; font-size: clamp(1rem, 3.5vw, 1.2rem); border-width: 3px; }

.pill-green { --c1: #7be36a; --c2: #2fbf2f; --c3: #13801b; }
.pill-blue { --c1: #6cc3ff; --c2: #1f86ea; --c3: #0c4fa8; }
.pill-purple { --c1: #c08cff; --c2: #8a46e0; --c3: #5321a3; }
.pill-orange { --c1: #ffc463; --c2: #f58a14; --c3: #b05400; }
.pill-red { --c1: #ff8a7a; --c2: #e8382d; --c3: #a3150f; }
.pill-yellow { --c1: #ffe98a; --c2: #f7c21b; --c3: #a87600; }

@keyframes wobble {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -2.5deg; }
  40% { rotate: 2deg; }
  60% { rotate: -1.2deg; }
  80% { rotate: .6deg; }
}

@keyframes tap-bounce {
  0% { scale: 1; }
  35% { scale: .93; }
  70% { scale: 1.05; }
  100% { scale: 1; }
}

/* ============ Round blue icon buttons ============ */
.round-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 4px solid #0c4fa8;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #7cc8ff, #1f86ea 60%, #1360bf);
  box-shadow: 0 0 0 3px #fff, inset 0 -5px 0 rgba(0, 0, 0, .18), 0 6px 12px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}

.round-btn::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 8%;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.round-btn svg {
  position: relative;
  width: 58%;
  height: 58%;
  fill: #fff;
  color: #fff;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3));
}

.round-btn:hover { filter: brightness(1.08); animation: var(--enter, none), wobble .6s ease; }
.round-btn:active { transform: translateY(3px) scale(.96); }
.round-btn.tap { animation: var(--enter, none), tap-bounce .4s var(--ease-bounce); }

/* Off state: dimmed icon with a red slash */
.off-slash {
  position: absolute;
  inset: 20%;
  display: none;
  pointer-events: none;
}

.off-slash::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: #ff4d4f;
  box-shadow: 0 0 0 2px #fff;
  transform: rotate(-45deg);
}

.round-btn[aria-pressed="false"] { filter: saturate(.55); }
.round-btn[aria-pressed="false"] svg { opacity: .65; }
.round-btn[aria-pressed="false"] .off-slash { display: block; }

/* ============ Wood ============ */
.wood,
.wood-panel,
.plank-title,
.dialog {
  background:
    repeating-linear-gradient(176deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(183deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, var(--wood-lo));
  border: 4px solid var(--wood-edge);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .28),
    inset 0 -6px 0 rgba(0, 0, 0, .18),
    0 8px 0 #3a1e0a,
    0 14px 26px rgba(0, 0, 0, .3);
}

.wood-panel {
  width: min(640px, 100%);
  padding: 1.25rem;
  border-radius: var(--radius-big);
  text-shadow: 0 2px 0 rgba(60, 30, 10, .6);
}

/* Screen titles hang on a little wooden sign */
.plank-title {
  position: relative;
  margin: 0;
  padding: .15em 1em .2em;
  border-radius: 16px;
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  animation: sign-drop .7s var(--ease-bounce) both;
}

/* Nails */
.plank-title::before,
.plank-title::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f1e2c8, #8a7556);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

.plank-title::before { left: 10px; }
.plank-title::after { right: 10px; }

@keyframes sign-drop {
  0% { opacity: 0; transform: translateY(-40px) rotate(-6deg); }
  60% { opacity: 1; transform: translateY(6px) rotate(2deg); }
  100% { transform: none; }
}

/* ============ Dialogs, overlays, toast ============ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(16, 40, 70, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade-in .25s ease;
}

.dialog {
  width: min(440px, 100%);
  max-height: calc(100% - 16px);
  overflow-y: auto;
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: var(--radius-big);
  text-align: center;
  animation: pop-in .4s var(--ease-bounce);
}

.dialog-title {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 700;
}

.dialog-text {
  margin: 0 0 1.25rem;
  font-size: 1.15rem;
  line-height: 1.4;
  text-shadow: 0 2px 0 rgba(60, 30, 10, .6);
}

.dialog-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.dialog-buttons .pill { width: 100%; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: .65em 1.3em;
  border: 3px solid var(--wood-edge);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
  transform: translate(-50%, 150%);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s var(--ease-bounce), opacity .25s ease;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

@keyframes fade-in { from { opacity: 0; } }

@keyframes pop-in {
  from { opacity: 0; transform: scale(.7) translateY(30px); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-6deg); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
}

.wiggle { animation: wiggle .5s ease; }

/* Gentle idle bob for pawns */
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5%; }
}

@keyframes glow-pulse {
  0%, 100% { opacity: .55; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}