:root{color-scheme:light;--white:#fff;--green:#00583c;--yellow:#f5cb31;--red:#bd302c;--ink:var(--green);--muted:#35715c;--line:#00583c35;--soft:#00583c08;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;color:var(--ink);background:var(--white)}
button,input,textarea,select{font:inherit}
footer{position:relative;width:min(100% - 40px,1120px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 0}
.masthead{position:relative;width:100%;margin:0;background:var(--white)}
.masthead-inner{width:min(100% - 40px,1120px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0}
.masthead{border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;gap:11px;color:var(--green);text-decoration:none;letter-spacing:.1em;font-size:.7rem;font-weight:800;line-height:1.5}
.wordmark small{display:block;font-size:.65rem;letter-spacing:.25em}
.chor-logo{display:block;width:48px;height:48px;border-radius:50%;object-fit:contain;background:var(--white);flex:none}
.venue,.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.67rem;font-weight:800;color:var(--green)}
.shell{position:relative;flex:1;width:min(100% - 28px,640px);margin:clamp(24px,5vw,64px) auto 30px}
.card{position:relative;border:1px solid var(--line);border-radius:22px;padding:clamp(23px,5vw,48px);background:var(--white);overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--green)}

.hero{text-align:center}
.ornament{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 22px;border-radius:50%;background:var(--soft);color:var(--green);font-size:1.5rem}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.12;margin:12px 0 20px;overflow-wrap:anywhere}
h1{font-size:clamp(2rem,7vw,3.7rem);letter-spacing:-.04em}
h1 em{display:block;font-style:italic;color:var(--green)}
h2{font-size:1.7rem;letter-spacing:-.02em}
p{line-height:1.6;margin:0 0 15px;color:var(--muted)}
.hero .rules{text-align:left}
.rules{padding:20px;border:1px solid var(--line);border-radius:12px;margin:24px 0;background:var(--soft)}
.rules p:last-child{margin:0}
.metrics{font-size:.83rem;font-weight:750;color:var(--green);margin:20px 0}
button,.button{display:inline-grid;place-items:center;min-height:50px;border:1px solid var(--green);border-radius:9px;padding:12px 17px;background:var(--green);color:var(--white);font-weight:750;cursor:pointer;text-decoration:none;line-height:1.25;font-size:.88rem}
button:hover:not(:disabled),.button:hover{background:var(--green);color:var(--white)}
button:disabled{opacity:.5;cursor:default}
.primary{width:100%;letter-spacing:.065em}
.secondary{background:var(--white);color:var(--green)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
label{display:grid;gap:8px;margin:18px 0 15px;font-weight:700;font-size:.88rem}
input,textarea,select{width:100%;padding:14px;border:1px solid #00583c65;border-radius:8px;font-size:1rem;background:var(--white);color:var(--green)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--green)}
textarea{resize:vertical;min-height:100px}
details{margin:18px 0;color:var(--muted);font-size:.85rem;line-height:1.55}
summary{cursor:pointer;color:var(--green);font-weight:650;padding-block:10px}
progress{width:100%;height:6px;appearance:none;border:0;border-radius:8px;background:#00583c16;margin:8px 0 17px}
progress::-webkit-progress-bar{background:#00583c16;border-radius:8px}
progress::-webkit-progress-value{background:var(--green);border-radius:8px}
progress::-moz-progress-bar{background:var(--green);border-radius:8px}
.feedback{min-height:1.3em;margin-top:12px;font-size:.88rem;overflow-wrap:anywhere}
.bad{color:var(--red)}
.good{color:var(--green);font-weight:650}
.connection{text-align:center;font-size:.85rem;margin-top:18px}
.code{display:block;overflow-wrap:anywhere;border:1px dashed var(--green);border-radius:8px;padding:14px;margin:20px 0;font-size:.87rem;line-height:1.7;background:var(--soft)}
.prize-qr{margin:24px auto 20px;text-align:center}
.prize-qr canvas{display:block;max-width:100%;height:auto;margin:auto}
.prize-qr figcaption{font-size:.82rem;color:var(--muted);margin-top:8px}
.celebrate .ornament{animation:celebrate 500ms ease-out}
@keyframes celebrate{from{transform:scale(.75) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
.station-map{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:24px 0 28px}
.station-map figcaption{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--green);color:var(--white)}
.station-map figcaption img{width:36px;height:36px;aspect-ratio:1;flex:none;background:transparent;filter:brightness(0) invert(1)}
.station-map-copy{display:flex;flex-direction:column;gap:5px}
.station-map .eyebrow{color:var(--white);font-size:.62rem}
.room-name{font-size:1.15rem;font-weight:650}
.station-map img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:contain;background:var(--white)}
.map-fallback{padding:18px}
footer{border-top:1px solid var(--line);font-size:.7rem;color:var(--muted);padding:20px 0}

.admin-shell{width:min(100% - 28px,1100px)}
.admin-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.admin-grid section,.admin-box{padding:20px;border:1px solid var(--line);border-radius:12px;margin:16px 0}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;text-align:left;font-size:.84rem}
td,th{padding:11px 8px;border-bottom:1px solid var(--line)}
th{font-weight:750;color:var(--green)}
.check{display:flex;align-items:center;gap:10px}
.admin-box ol{padding-inline-start:20px}
.count-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:22px 0}
.count-grid div{border:1px solid var(--line);border-radius:10px;padding:14px 12px;background:var(--soft)}
.count-grid strong{display:block;font-size:1.5rem;color:var(--green)}
.count-grid span{font-size:.77rem}
.duplicate-warning{border:1px solid var(--yellow);border-left:5px solid var(--yellow);border-radius:8px;padding:16px;margin:16px 0;background:#f5cb311a;font-size:.9rem;color:var(--green)}
.duplicate-warning p{margin:8px 0 0}
.prize-result{padding:22px 18px;border:1px solid var(--green);border-radius:12px;margin:24px 0}
.status-good,.status-bad{padding:14px;border-radius:8px;font-weight:750}
.status-good{background:var(--green);color:var(--white)}
.status-bad{background:var(--red);color:var(--white)}
.scanner{margin:25px 0}
.scanner video{display:block;width:100%;max-height:440px;object-fit:cover;border:3px solid var(--green);border-radius:12px;background:var(--green)}
.scanner-hint{font-size:.85rem;margin:10px 0}
.scanner .actions{margin-top:14px}
[hidden]{display:none!important}
@media(max-width:390px){.venue{display:none}.masthead-inner,footer{width:calc(100% - 28px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


/* The regional flags stay separate from the green-and-white interface. */
.region-flags {
  display: flex;
  gap: 8px;
  align-items: center;
}
.region-flags img {
  display: block;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}
.guest-app .masthead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--white);
  min-height: 78px;
}
.menu-back {
  color: var(--green);
  font-size: .83rem;
  font-weight: 750;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
}
.menu-screen {
  border: 0;
  border-radius: 0;
  padding: 0;
}
.menu-screen::before {
  display: none;
}
.menu-screen h1 {
  font-size: clamp(2.4rem, 7vw, 3.5rem);
  margin-bottom: 12px;
}
.menu-intro {
  max-width: 30em;
  font-size: .95rem;
}
.menu-options {
  display: grid;
  gap: 14px;
  margin: 30px 0 22px;
}
.quiz-menu-card {
  position: relative;
  border-radius: 18px;
  background: var(--green);
  overflow: hidden;
}
.quiz-menu-link {
  display: grid;
  gap: 8px;
  padding: 25px 70px 28px 25px;
  min-height: 210px;
  color: var(--white);
  text-decoration: none;
}
.menu-quiz-symbol {
  position: absolute;
  bottom: 20px;
  right: 18px;
  width: 82px;
  height: 82px;
  opacity: .14;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.menu-number {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.menu-option-title {
  font: 400 clamp(3.2rem, 13vw, 4.7rem)/1 Georgia, serif;
  letter-spacing: -.03em;
}
.menu-option-detail {
  display: block;
  font-size: .82rem;
  line-height: 1.5;
}
.menu-quiz-status {
  font-size: .8rem;
  font-weight: 700;
  padding-top: 9px;
}
.quiz-info-button {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ffffff88;
  background: transparent;
  color: var(--white);
  font: 400 1.35rem Georgia, serif;
}
.quiz-info-button:hover:not(:disabled) {
  background: var(--white);
  color: var(--green);
}
.menu-secondary-link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 23px;
  min-height: 100px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--green);
  text-decoration: none;
}
.menu-secondary-link:hover {
  background: var(--soft);
}
.menu-option-copy {
  flex: 1;
}
.menu-secondary-title {
  display: block;
  font: 400 1.6rem Georgia, serif;
  margin-bottom: 6px;
}
.menu-arrow {
  font-size: 1.2rem;
}
.social-footer {
  display: block;
  text-align: center;
  padding: 24px 0 28px;
}
.social-footer p {
  margin: 0 0 10px;
  font-size: .76rem;
}
.social-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 20px;
}
.social-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--green);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}
dialog {
  color: var(--green);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 25px;
  width: min(560px, calc(100% - 28px));
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
dialog::backdrop {
  background: #00583c80;
}
dialog h2 {
  font-size: 2rem;
  margin: 12px 0 16px;
}
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dialog-close {
  padding: 0;
  min-height: 44px;
  width: 44px;
  flex: none;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--green);
  font-size: 1.5rem;
}
.info-stations {
  display: grid;
  gap: 6px;
  margin: 20px 0;
  padding-left: 0;
  list-style: none;
  font-size: .87rem;
}
.station-symbol-guide {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  margin: 22px 0;
  background: var(--soft);
  border: 1px dashed var(--green);
  border-radius: 10px;
  font-size: .85rem;
}
.station-symbol {
  display: grid;
  place-items: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  object-fit: contain;
}
.station-symbol-guide p {
  margin: 5px 0;
  font-size: .84rem;
}
.info-note {
  margin-bottom: 0;
  font-size: .84rem;
}
.overview-map {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 25px 0 30px;
}
.overview-map img {
  display: block;
  width: 100%;
  height: auto;
}
.overview-map figcaption {
  padding: 10px 15px;
  border-top: 1px solid var(--line);
  font-size: .77rem;
}
.station-directory {
  margin: 20px 0 30px;
  padding: 0;
  list-style: none;
}
.station-directory li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.station-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .75rem;
  flex: none;
}
.icebreaker-explanation {
  font-size: .84rem;
}
.icebreaker-card {
  display: block;
  width: 100%;
  min-height: 360px;
  padding: 0;
  margin: 28px 0 15px;
  border: 0;
  border-radius: 16px;
  color: var(--green);
  background: var(--white);
  perspective: 1200px;
  text-align: left;
  font-weight: 400;
}
.icebreaker-card:hover:not(:disabled) {
  color: var(--green);
  background: var(--white);
}
.icebreaker-inner {
  position: relative;
  display: grid;
  min-height: 360px;
  transform-style: preserve-3d;
  transition: transform 500ms ease;
}
.icebreaker-card.is-flipped .icebreaker-inner {
  transform: rotateY(180deg);
}
.icebreaker-face {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  min-height: 360px;
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.icebreaker-face::before,
.icebreaker-face::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--yellow);
}
.icebreaker-face::after {
  top: 4px;
  background: var(--red);
}
.icebreaker-back {
  transform: rotateY(180deg);
}
.icebreaker-question {
  display: block;
  font: 400 clamp(1.7rem, 6vw, 2.4rem)/1.22 Georgia, serif;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.icebreaker-tap {
  font-size: .74rem;
  font-weight: 650;
}
.icebreaker-status {
  text-align: center;
  font-size: .78rem;
}
.icebreaker-status {
  font-weight: 700;
  margin-bottom: 8px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 390px) {
  .header-actions { gap: 10px; }
  .quiz-menu-link { padding-left: 22px; }
  .icebreaker-face { padding: 27px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .icebreaker-inner { transition: none; }
}

body.info-open { overflow: hidden; }

#screen h1 { scroll-margin-top: 110px; }

@media (max-width: 600px) {
  .masthead-inner > .venue { display: none; }
}

.language-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 52px;
  min-height: 48px;
  padding: 5px;
  background: var(--white);
  border: 1px solid transparent;
  color: var(--green);
  border-radius: 8px;
}
.language-toggle img {
  display: block;
  width: 36px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.language-toggle:hover:not(:disabled),
.language-toggle[aria-pressed="true"] {
  background: var(--soft);
  color: var(--green);
  border-color: var(--green);
}
.language-code {
  font-size: .55rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
}
.answer-success {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0 0 26px;
  padding: 21px 18px;
  border-radius: 12px;
  background: var(--green);
  color: var(--white);
  text-align: left;
  scroll-margin-top: 110px;
  animation: success-arrive 250ms ease-out;
}
.answer-success-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid #ffffff88;
  border-radius: 50%;
  font-size: 1.3rem;
}
.answer-success-title {
  display: block;
  font-size: clamp(1.2rem, 4.5vw, 1.55rem);
  font-weight: 800;
  line-height: 1.25;
}
.answer-success p {
  margin: 7px 0 0;
  color: var(--white);
  font-size: .86rem;
  line-height: 1.5;
}
@keyframes success-arrive {
  from { opacity: .3; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .answer-success { animation: none; }
}