@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  --forest-950: #274c36;
  --forest-800: #427653;
  --forest-700: #5d9c68;
  --leaf-500: #88c999;
  --leaf-100: #e6f6df;
  --wheat-500: #df9232;
  --wheat-100: #fff0bf;
  --earth-950: #51381d;
  --paper: #fff9e9;
  --paper-deep: #f8f1d8;
  --ink: #41372c;
  --muted: #6e6254;
  --danger: #b91c1c;
}

* { box-sizing: border-box; }

html { background: var(--paper-deep); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  overflow-x: hidden;
}

button, input { font: inherit; }

button { cursor: pointer; }

button:disabled { cursor: not-allowed; }

:focus-visible {
  outline: 3px solid var(--wheat-500);
  outline-offset: 3px;
}

.hidden { display: none !important; }

.eyebrow {
  margin: 0 0 0.32rem;
  color: var(--forest-700);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.projector-shell {
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.8rem, 1.9vh, 1.55rem);
  padding: clamp(0.8rem, 2.3vw, 2.65rem);
  background:
    linear-gradient(rgba(255, 250, 235, 0.48), rgba(250, 246, 215, 0.63)),
    url('../../bg.png') center / cover no-repeat;
}

.projector-body { height: 100dvh; overflow: hidden; }

.projector-header, .projector-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.projector-header { position: relative; justify-content: flex-end; }
.projector-header > :first-child { position: absolute; left: 50%; transform: translateX(-50%); }
.projector-actions { display: flex; align-items: center; justify-content: flex-end; gap: clamp(0.55rem, 1.1vw, 1rem); }

.fullscreen-button {
  min-height: clamp(2rem, 3.33vw, 2.66rem);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.37rem clamp(0.48rem, 0.83vw, 0.77rem);
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 0.67rem 0.83rem 0.67rem 0.83rem;
  background: linear-gradient(145deg, #6fa574, #4d825c);
  box-shadow: 0 3px 0 rgba(46, 98, 56, 0.2), 0 8px 15px rgba(52, 75, 43, 0.13);
  color: #fffdf2;
  font-size: clamp(0.62rem, 0.83vw, 0.67rem);
  font-weight: 900;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.fullscreen-button svg { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.fullscreen-button:hover { background: linear-gradient(145deg, #5a9464, #3e734d); }
.fullscreen-button:active { box-shadow: 0 1px 0 rgba(46, 98, 56, 0.2); transform: translateY(2px); }
.fullscreen-button[aria-pressed='true'] { background: linear-gradient(145deg, #e9aa4d, #cf8330); color: #593817; }

.projector-title, .admin-title, .login-panel h2, .section-heading h2 {
  margin: 0;
  color: var(--forest-950);
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 700;
}

.projector-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.14em;
  font-size: clamp(1.35rem, 3.05vw, 2.5rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7);
}

.projector-title__main { display: inline-flex; gap: 0.08em; }
.projector-title__main > span {
  min-width: 0.98em;
  display: inline-grid;
  place-items: center;
  padding: 0.08em 0.05em 0.11em;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 0.28em 0.44em 0.3em 0.46em;
  background: linear-gradient(145deg, #fff8d8, #ffeaa3);
  box-shadow: 0 0.11em 0 rgba(176, 117, 37, 0.22), 0 0.19em 0.32em rgba(93, 73, 37, 0.12);
  color: var(--forest-950);
  text-shadow: none;
}
.projector-title__main > span:nth-child(1) { transform: rotate(-5deg); }
.projector-title__main > span:nth-child(2) { background: linear-gradient(145deg, #effbdd, #ccecae); color: #32633e; transform: rotate(2deg) translateY(-0.05em); }
.projector-title__main > span:nth-child(3) { background: linear-gradient(145deg, #ffe990, #ffc963); color: #704214; transform: rotate(-1deg); }
.projector-title__main > span:nth-child(4) { background: linear-gradient(145deg, #e6f7d8, #b8e09e); color: #2d6241; transform: rotate(4deg) translateY(-0.04em); }
.projector-title__suffix {
  display: inline-block;
  padding: 0.16em 0.36em 0.19em;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 0.55em 0.78em 0.55em 0.78em;
  background: linear-gradient(145deg, #ffe588, #f5bc4c);
  box-shadow: 0 4px 0 rgba(173, 111, 30, 0.18);
  color: #674116;
  font-size: 0.5em;
  letter-spacing: 0.04em;
  text-shadow: none;
  transform: rotate(-2deg);
}

.progress-stage {
  min-height: 0;
  overflow: hidden;
  padding: clamp(0.35rem, 0.75vw, 0.75rem);
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: clamp(1.25rem, 2.5vw, 2.15rem);
  background: rgba(107, 144, 78, 0.24);
  box-shadow: 0 9px 0 rgba(117, 94, 47, 0.2), 0 25px 48px rgba(71, 79, 39, 0.17);
  backdrop-filter: blur(3px);
}

.projector-table { width: 100%; height: 100%; display: grid; gap: clamp(0.18rem, 0.35vw, 0.45rem); }

.projector-cell {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.68);
  border-radius: clamp(0.45rem, 0.9vw, 0.85rem);
  box-shadow: inset 0 -3px 0 rgba(77, 61, 35, 0.08);
  text-align: center;
}

.projector-corner { color: #4d3517; background: linear-gradient(145deg, #ffd979, #efa63a); }
.projector-station { color: #fffdf2; background: linear-gradient(145deg, #6fa574, #4d825c); }
.projector-team { color: #60421d; background: linear-gradient(145deg, #fff6d7, #f6df9d); }

.projector-corner, .projector-team { font-family: 'Fredoka', sans-serif; font-size: clamp(0.74rem, 1.55vw, 1.45rem); font-weight: 600; line-height: 1.05; }
.projector-corner span, .projector-team span { color: inherit; opacity: 0.76; font-family: 'Nunito', sans-serif; font-size: 0.75em; font-weight: 800; }

.projector-team { flex-direction: row; gap: 0.35em; padding: 0.2rem; white-space: nowrap; }
.projector-team .team-prefix,
.projector-team .team-suffix { color: #6d5430; opacity: 0.9; font-family: 'Nunito', system-ui, sans-serif; font-size: clamp(0.56rem, 1.15vw, 1rem); font-weight: 900; letter-spacing: 0.02em; }
.projector-team .team-number { color: #543313; font-family: 'Fredoka', 'Nunito', sans-serif; font-size: clamp(calc(1rem - 2px), calc(2.17vw - 2px), calc(2.1rem - 2px)); font-weight: 700; letter-spacing: -0.04em; line-height: 0.82; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45); }

.projector-station { flex-direction: column; gap: 4px; padding: 0.2rem; line-height: 1.04; }
.station-zodiac { color: #ffe88b; font-family: 'Fredoka', sans-serif; font-size: clamp(0.9rem, 2vw, 1.65rem); font-weight: 700; text-shadow: 0 2px 0 rgba(38, 73, 45, 0.25); }
.station-name { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(0.55rem, 1.15vw, 1.08rem); font-weight: 800; }

.projector-progress { background: rgba(255, 253, 242, 0.93); }
.projector-progress.is-complete { background: linear-gradient(145deg, #ffe487, #ffcb63); box-shadow: inset 0 -4px 0 rgba(156, 101, 27, 0.18); }
.animal-symbol { line-height: 1; font-size: clamp(1.4rem, 4.1vw, 4.25rem); filter: drop-shadow(0 4px 0 rgba(111, 72, 22, 0.16)); }

.projector-footer { color: #4a442c; font-size: clamp(0.68rem, 1.1vw, 0.92rem); font-weight: 800; }
.sync-indicator { display: inline-flex; align-items: center; gap: 0.45rem; }
.sync-indicator__dot { width: 0.62rem; height: 0.62rem; border-radius: 999px; background: #4eae6a; box-shadow: 0 0 0 4px rgba(78, 174, 106, 0.18); }
.admin-link, .back-link { color: #57401d; font-weight: 900; text-decoration: none; transition: color 180ms ease; }
.admin-link { padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(255, 250, 225, 0.68); }
.admin-link:hover, .back-link:hover { color: #ad6919; }
.admin-link span { padding-left: 0.3rem; }

.admin-body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 7% 9%, rgba(250, 204, 21, 0.24), transparent 19rem),
    radial-gradient(circle at 95% 96%, rgba(34, 197, 94, 0.18), transparent 24rem),
    var(--paper-deep);
}

.admin-shell { width: min(100% - 2rem, 78rem); margin: 0 auto; padding: clamp(1rem, 3vw, 3rem) 0 3rem; }
.admin-header { display: grid; gap: 1.25rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.back-link { width: max-content; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
.admin-title { font-size: clamp(1.4rem, 3.67vw, 2.8rem); line-height: 0.95; }

.login-panel, .admin-card {
  border: 3px solid rgba(255, 255, 255, 0.92);
  background: rgba(255, 253, 242, 0.9);
  box-shadow: 0 8px 0 rgba(153, 119, 58, 0.15), 0 20px 44px rgba(102, 77, 32, 0.12);
}

.login-panel { width: min(100%, 31rem); margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.5rem); border-radius: 1.35rem 2.5rem 1.35rem 2.5rem; }
.login-panel__badge { width: 3.1rem; height: 3.1rem; display: grid; place-items: center; margin-bottom: 1.2rem; border: 2px solid #fff; border-radius: 1rem; background: var(--wheat-100); color: #966018; box-shadow: 0 4px 0 rgba(172, 111, 30, 0.15); }
.login-panel__badge svg { width: 1.5rem; height: 1.5rem; }
.login-panel h2 { font-size: 2rem; }
.login-panel > p:not(.eyebrow):not(.security-note) { color: var(--muted); line-height: 1.6; }

.login-form, .station-input-field { display: grid; gap: 0.45rem; }
.login-form { margin-top: 1.5rem; }
.login-form label, .station-input-field span, .choice-group h3 { color: var(--forest-950); font-size: 0.9rem; font-weight: 800; }
.login-form input, .station-input-field input {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #a7d7b5;
  border-radius: 0.8rem;
  background: #fff;
  color: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.login-form input:focus, .station-input-field input:focus { border-color: var(--forest-700); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16); outline: none; }
.form-message { min-height: 1.25rem; margin: 0.3rem 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.form-message[data-state='error'] { color: var(--danger); }
.form-message[data-state='success'] { color: var(--forest-700); }
.security-note { margin: 1.2rem 0 0; color: #6b7280; font-size: 0.78rem; line-height: 1.5; }

.primary-action, .secondary-action, .danger-action {
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  padding: 0.65rem 1.05rem;
  font-weight: 800;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.primary-action { background: linear-gradient(145deg, #6ea874, #548f60); color: white; box-shadow: 0 5px 0 rgba(46, 98, 56, 0.2), 0 9px 18px rgba(21, 128, 61, 0.16); }
.primary-action:hover:not(:disabled) { background: linear-gradient(145deg, #5c9867, #467b51); }
.primary-action:disabled { background: #9ca3af; box-shadow: none; }
.secondary-action { border-color: var(--forest-700); background: #fff; color: var(--forest-800); }
.secondary-action:hover { background: var(--leaf-100); }
.danger-action { border-color: #fecaca; background: #fff; color: var(--danger); }
.danger-action:hover { background: #fef2f2; border-color: var(--danger); }

.dashboard { display: grid; gap: 1.25rem; }

.admin-card { padding: clamp(1.1rem, 3vw, 2rem); border-radius: 1.2rem; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.section-heading h2 { font-size: clamp(1.35rem, 2.8vw, 1.85rem); }
.selection-status { max-width: min(45%, 22rem); padding: 0.42rem 0.7rem; border: 1px solid #bbf7d0; border-radius: 999px; background: #f0fdf4; color: var(--forest-700); font-size: 0.75rem; font-weight: 800; text-align: center; }
.selection-status[data-state='ready'] { border-color: #fcd34d; background: #fffbeb; color: #854d0e; }
.choice-group { margin-top: 1.55rem; }
.choice-group h3 { margin: 0 0 0.6rem; }
.team-choice-grid, .station-choice-grid { display: grid; gap: 0.5rem; }
.team-choice-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.station-choice-grid { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.choice-button {
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.35rem;
  border: 1px solid #bbf7d0;
  border-radius: 0.75rem;
  background: #fff;
  color: var(--forest-950);
  font-size: clamp(0.62rem, 1.45vw, 0.92rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.choice-button:hover { border-color: var(--forest-700); background: #f0fdf4; }
.choice-button.is-selected { border-color: var(--wheat-500); background: var(--wheat-100); color: #78350f; box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.16); }
.checkin-actions, .settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.checkin-actions .form-message { margin: 0; }
.section-description { margin: 0.75rem 0 1.2rem; color: var(--muted); font-weight: 700; }
.reset-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

@media (max-width: 640px) {
  .projector-header, .projector-footer { gap: 0.6rem; }
  .projector-header > :first-child { position: static; transform: none; }
  .projector-footer { align-items: flex-end; }
  .projector-footer .sync-indicator { max-width: 52%; }
  .fullscreen-button { min-height: 1.78rem; padding: 0.28rem 0.36rem; }
  .fullscreen-button span { display: none; }
  .projector-corner, .projector-team { font-size: 0.66rem; }
  .projector-team { gap: 0.16rem; }
  .projector-team .team-prefix,
  .projector-team .team-suffix { font-size: 0.48rem; }
  .projector-team .team-number { font-size: calc(0.9rem - 1px); }
  .station-zodiac { font-size: 0.76rem; }
  .station-name { font-size: 0.45rem; }
  .animal-symbol { font-size: 1.22rem; }
  .admin-shell { width: min(100% - 1rem, 78rem); }
  .selection-status { max-width: 53%; font-size: 0.66rem; }
  .choice-button { min-height: 3rem; padding: 0.22rem; font-size: 0.56rem; }
  .checkin-actions { align-items: stretch; flex-direction: column; }
  .checkin-actions .primary-action { width: 100%; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .team-choice-button { font-size: 0; }
  .team-choice-button::before { content: attr(data-team-number); font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 1.2rem; line-height: 1; }
  .station-choice-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.16rem; }
  .station-choice-button__zodiac,
  .station-choice-button__name { display: block; }
  .station-choice-button__separator { display: none; }
  .station-choice-button__zodiac { color: var(--wheat-700); font-family: 'Fredoka', 'Nunito', sans-serif; font-size: 1.04em; }
  .station-choice-button__name { max-width: 100%; font-size: 0.74em; line-height: 1.1; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}