/* Shared foundation. Festival and administration load separate themes. */
:root {
  --ink: #192b39;
  --muted: #526173;
  --line: #dce2e9;
  --body-font: "Nunito Sans", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; font-family: var(--body-font); color: var(--ink); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { overflow-wrap: break-word; }
p, address { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #156ca6; outline-offset: 5px; }
[hidden] { display: none !important; }
.container { width: min(100% - 48px, 1184px); max-width: 1184px; margin-inline: auto; padding-inline: 0; }
.narrow { max-width: 760px; }
.icon { width: 24px; height: 24px; display: inline-block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 2000; padding: 12px 18px; background: #fff; color: #15253d; border: 2px solid currentColor; border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
#main-content:focus { outline: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.55rem; font-weight: 900; line-height: 1; color: #143d42; }
.brand > span:last-child > span, .brand-label > span > span { color: #b84132; }
.brand-ball { flex: 0 0 32px; width: 32px; height: 32px; position: relative; border: 3px solid #143d42; border-radius: 50%; background: linear-gradient(#ef725b 0 43%, #143d42 43% 57%, #fff8e7 57%); }
.brand-ball i { position: absolute; width: 11px; height: 11px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff8e7; border: 3px solid #143d42; }
.brand-label { display: flex; flex-direction: column; gap: 6px; }
.brand-label small { font-family: var(--body-font); font-weight: 800; font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 600px) {
  .container { width: calc(100% - 36px); }
  html { scroll-padding-top: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.arcade-silhouette { filter: brightness(0); }
#arcade-board { margin-block: 1rem 2rem; }
#arcade-board .button { margin-block: .25rem; }
#arcade-board .arcade-slot { width: min(28vw, 8rem); height: 6rem; vertical-align: middle; padding: .25rem; }
.arcade-slot img { width: auto; max-height: 100%; }
.alola-canvas, .alola-holes, .alola-silhouette {
    border: 3px solid #184a5a;
    border-radius: 1.2rem;
    box-shadow: 0 .35rem 0 #184a5a;
}
.alola-canvas { display: block; width: 100%; max-width: 720px; height: auto; margin-bottom: 1.4rem; touch-action: none; }
.alola-holes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    max-width: 560px;
    padding: 2rem 1rem 1rem;
    background: linear-gradient(#64d3ee 0 15%, #19a5bc 15% 26%, #ffe3a1 26% 100%);
}
.alola-holes button {
    height: clamp(64px, 16vw, 100px);
    position: relative;
    border: 0;
    border-radius: 40%;
    background: radial-gradient(ellipse 44% 20% at 50% 76%, #503322 70%, #b37c4b 74%, #edbc76 98%, transparent);
    cursor: pointer;
    touch-action: manipulation;
}
.alola-holes button img { width: 88px; max-width: 100%; height: 100%; object-fit: contain; }
.alola-holes button span { position: absolute; right: 0; top: 0; color: #432b19; font-weight: 900; }
.alola-holes.is-frozen { filter: saturate(.35); }
.diglett-tide { min-height: 1.6rem; margin-bottom: .4rem; color: #08686f; font-weight: 900; }
.alola-holes .diglett-paired { outline: 3px solid #73fff4; outline-offset: -5px; }
.alola-holes .diglett-warning::before {
    content: "•"; display: block; margin: auto; width: 1.6rem; border-radius: 50%;
    background: #f2c578; color: #654023; font-weight: 900; box-shadow: 0 4px 0 #9e663a;
}
.alola-holes .diglett-warning.diglett-kind-1::before { content: "•••"; width: 2rem; }
.alola-holes .diglett-warning.diglett-kind-3::before { content: "✦"; background: #62476c; color: #fff; }
.alola-holes.diglett-urgent { border-color: #b65344; }
.alola-holes.is-frozen { box-shadow: 0 0 0 4px #8bc9ee; }
.alola-silhouette {
    display: grid;
    place-items: center;
    width: min(100%, 480px);
    min-height: 210px;
    background: radial-gradient(circle, #fff2af, #edaf58);
    margin-bottom: 1rem;
    overflow: hidden;
}
.alola-silhouette img { width: 160px; height: 160px; filter: brightness(0); image-rendering: pixelated; }
.alola-silhouette.phase-2 img { transform: rotate(180deg); }
.alola-silhouette.phase-3 img { transform: rotate(120deg) skew(12deg); }
@media (prefers-reduced-motion: no-preference) {
    .alola-silhouette.phase-3 img { animation: alola-turn 2s linear infinite; }
}
@keyframes alola-turn {
    from { transform: rotate(0) scaleX(.8); }
    to { transform: rotate(360deg) scaleX(1.15); }
}
.alola-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 480px; }
.alola-answers button {
    min-height: 3rem;
    border: 2px solid #184a5a;
    border-radius: .75rem;
    background: #d6f7ff;
    color: #183747;
    font-weight: 800;
    cursor: pointer;
}
.alola-answers button:nth-child(2n) { background: #ffe5a1; }
.alola-answers button:disabled { opacity: .55; }
#arcade-board progress { display: block; width: min(100%, 480px); accent-color: #e78329; margin-bottom: .8rem; }
#arcade-board .decidueye-meter { margin-top: .55rem; accent-color: #7256ab; }
.arcade-hero, .arcade-catalog, #arcade { text-align: center; }
.inner-hero.arcade-hero :is(h1, p) { margin-inline: auto; }
.arcade-catalog .game-card { align-items: center; }
#arcade-start { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .65rem; }
#arcade-name { max-width: 100%; }
#arcade-board > :is(.alola-canvas, .alola-holes, .alola-silhouette, .alola-answers, progress) { margin-inline: auto; }
#arcade-ranking { width: fit-content; max-width: 100%; margin-inline: auto; text-align: start; }
.capture-stage {
    width: min(100%, 620px);
    margin: 0 auto 1.2rem;
    padding: 1.5rem;
    border: 3px solid #184a5a;
    border-radius: 1.2rem;
    background: linear-gradient(#8de4f5 0 44%, #46c8d6 44% 55%, #ffe5a1 55%);
    box-shadow: 0 .35rem 0 #184a5a;
    cursor: pointer;
    touch-action: manipulation;
}
.capture-stage > div:first-of-type { display: grid; place-items: center; height: 125px; font-size: 2.8rem; }
.capture-stage img { width: 120px; height: 120px; image-rendering: pixelated; }
.capture-stage img.capture-pokeball { width: 76px; height: 76px; border-radius: 50%; object-fit: contain; image-rendering: auto; }
.capture-meter {
    position: relative;
    height: 24px;
    border: 2px solid #184a5a;
    border-radius: 8px;
    background: linear-gradient(to right, #e76864 18%, #ffd25b 18% 82%, #e76864 82%);
}
.capture-meter span { position: absolute; inset-block: 0; left: 50%; transform: translateX(-50%); background: #4bb86f; }
.capture-meter i {
    position: absolute;
    top: 100%;
    transform: translateX(-50%);
    border: .5rem solid transparent;
    border-bottom-color: #184a5a;
    border-top: 0;
}
.capture-collection { max-width: 620px; margin: 1rem auto; }
.capture-collection { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; padding: 0; list-style: none; }
.capture-collection li { display: grid; justify-items: center; padding: .55rem; border: 1px solid #b9d9ce; border-radius: .7rem; background: #f1fbf1; font-weight: 800; }
.capture-collection li.capture-shiny { border-color: #cf982c; background: #fff0ae; }
.capture-collection img { width: 56px; height: 56px; }
.capture-meter.capture-confirm { background: #9e8cc5; box-shadow: 0 0 0 3px #ddc9fa; }
.capture-meter.capture-fast { outline: 3px solid #b54278; }
@media (prefers-reduced-motion: no-preference) {
    .capture-throw img.capture-pokeball { animation: capture-arc .26s ease-out both; }
}
@keyframes capture-arc {
    0% { transform: translate(-3.5rem, 2rem) scale(.65) rotate(-32deg); }
    55% { transform: translate(-1rem, -1.2rem) rotate(14deg); }
    100% { transform: none; }
}
.capture-spark img { box-shadow: 0 0 0 .25rem #ffda64, 0 0 2rem #ffbf44; }
#arcade-board :is(button, a) { min-height: 44px; }
#arcade-board :is(button, a):focus-visible { outline: 3px solid #147b85; outline-offset: 3px; }
.arcade-feedback {
    min-height: 1.75rem;
    font-weight: 800;
    color: #176443;
}
.arcade-feedback[data-tone="miss"] { color: #a33832; }
.arcade-result {
    width: min(100%, 620px);
    margin: 0 auto 1rem;
    padding: 1rem;
    border: 2px solid #b4d8c8;
    border-radius: 1rem;
    background: #eef8e8;
}
.arcade-result h2 { margin: 0 0 .35rem; }
.arcade-result p { margin: 0; }
.arcade-music { margin-top: .65rem; }
.arcade-nav-target { display: inline-flex; align-items: center; min-height: 44px; }
#arcade-start input, #arcade-start button { min-height: 44px; }
#arcade-start input { font-size: 1rem; }
.bowling-tutorial {
    width: min(100%, 780px);
    margin: 0 auto 1.25rem;
    padding: clamp(1rem, 4vw, 2rem);
    border: 2px solid #dfb779;
    border-radius: 1.2rem;
    background: #fff1ca;
    color: #243b45;
}
.bowling-kicker { margin: 0 0 .35rem; font-weight: 900; color: #765022; }
.bowling-tutorial ol { display: grid; gap: .65rem; padding: 0; list-style: none; text-align: start; }
.bowling-tutorial li { padding: .8rem; border-radius: .8rem; background: #fffaf0; }
.bowling-tutorial li strong { display: block; }
.bowling-tutorial li span { float: inline-start; margin-inline-end: .65rem; color: #087176; font-size: 1.35rem; font-weight: 900; }
.bowling-keyboard { margin-bottom: 0; font-size: .9rem; }
.bowling-controls { display: grid; gap: .45rem; justify-items: center; width: min(100%, 540px); margin: 0 auto .6rem; }
.bowling-controls label { font-weight: 900; color: #754621; }
.bowling-controls input[type="range"] { width: 100%; min-height: 44px; accent-color: #196b68; }
#arcade-board .bowling-controls progress { margin: 0; width: 100%; accent-color: #dc9131; }
.bowling-controls button { width: min(100%, 320px); }
.bowling-arena { position: relative; width: min(100%, 720px); margin: 0 auto 1rem; }
#arcade-board .bowling-arena canvas { margin: 0; }
.bowling-arena .bowling-controls {
    position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
    width: min(80%, 320px); margin: 0; padding: .35rem .55rem;
    gap: .2rem; background: #122f3de8; border-radius: .7rem;
}
.bowling-arena .bowling-controls { pointer-events: none; }
.bowling-arena .bowling-controls[hidden] { display: none; }
.bowling-callout {
    pointer-events: none; position: absolute; top: 24%; left: 0; right: 0;
    display: grid; justify-items: center; text-align: center;
    color: #fff9de; text-shadow: 0 2px 4px #122f3d, 0 0 6px #122f3d;
}
.bowling-callout strong { font-size: clamp(1.4rem, 6vw, 3.6rem); line-height: 1; }
.bowling-callout span { font-weight: 900; font-size: clamp(.7rem, 2.8vw, 1.1rem); }
.bowling-callout[data-mark="strike"] strong { color: #ffe169; }
.bowling-callout[data-mark="spare"] strong { color: #afffee; }
@media (prefers-reduced-motion: no-preference) {
    .bowling-callout > * { animation: arcade-feedback-pop .35s ease-out both; }
}
.bowling-scorecard { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; padding: 0; margin: .7rem auto; max-width: 720px; list-style: none; }
.bowling-scorecard li { background: #fff2cc; border: 1px solid #d8bb79; border-radius: .4rem; padding: .3rem; color: #563920; font-size: .8rem; }
@media (min-width: 650px) { .bowling-scorecard { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.surf-tutorial { background: #dff8f5; border-color: #80c8c3; }
.surf-tutorial .bowling-kicker { color: #146566; }
.type-arena { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem; min-height: 92px; width: min(100%, 480px); margin: 0 auto .8rem; border-radius: 1rem; background: linear-gradient(145deg, #c2f3df, #9cdce7); }
.type-arena span, .type-arena strong { padding: .45rem .8rem; border-radius: 999px; background: #174e58; color: #fff; font-weight: 900; }
.type-arena[data-effect="immune"] { background: #e7e5f0; }
.type-arena[data-effect="resist"] { background: #f3dfc7; }
.type-arena[data-effect="quad"] { background: #ffe390; }
.type-arena[data-effect="quad"] strong { background: #6a491a; }
@media (prefers-reduced-motion: no-preference) {
    .type-arena[data-effect] strong { animation: arcade-feedback-pop .24s ease-out both; }
}
.silhouette-tutorial { background: #f3e6ff; border-color: #c5a3dd; }
.silhouette-tutorial .bowling-kicker { color: #61367d; }
.quiz-tutorial-scores { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0; list-style: none; }
.quiz-tutorial-scores li { padding: .35rem .65rem; border-radius: 999px; font-size: .83rem; font-weight: 800; }
.quiz-routes { display: grid; gap: .7rem; width: min(100%, 580px); margin: 1rem auto; }
.quiz-routes button { padding: .85rem; border: 2px solid #266d71; border-radius: .8rem; background: #d7f5eb; color: #183747; font-weight: 800; }
.quiz-routes button:last-child { background: #ead8ff; border-color: #734c99; }
@media (min-width: 560px) { .quiz-routes { grid-template-columns: 1fr 1fr; } }
.alola-silhouette.alola-reveal img { filter: none; transform: none; animation: none; }
#arcade-board [hidden] { display: none; }
.alola-silhouette.alola-master { outline: 4px solid #ffce51; outline-offset: -6px; }
.silhouette-review { width: min(100%, 480px); margin: 1rem auto; }
.silhouette-review summary { cursor: pointer; font-weight: 800; padding: .65rem; }
.silhouette-review ul { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; padding: 0; list-style: none; }
.silhouette-review li { display: grid; justify-items: center; }
.silhouette-review img { width: 64px; height: 64px; }
#arcade-restart { margin: .65rem .25rem 0; }
#arcade-restart[hidden] { display: none; }
@media (min-width: 690px) {
    .bowling-tutorial ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}
.quiz-difficulty { display: inline-block; padding: .35rem .8rem; border-radius: 999px; font-weight: 900; color: #183747; background: #c5efcd; }
.quiz-difficulty--1 { background: #caeaff; }
.quiz-difficulty--2 { background: #ffe5a1; }
.quiz-difficulty--3 { background: #ffc9ad; }
.quiz-difficulty--4 { background: #edd0ff; }
.alola-answers .quiz-answer-correct:disabled { background: #b5e9bd; border-color: #26774b; opacity: 1; }
.alola-answers .arcade-answer-miss:disabled, #arcade-board .arcade-type-miss:disabled { background: #ffc8bf; border-color: #a33832; color: #522724; opacity: 1; }
#arcade-board .arcade-type-correct:disabled { background: #b5e9bd; border-color: #26774b; color: #183747; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .arcade-feedback span { display: inline-block; animation: arcade-feedback-pop .24s ease-out both; }
    .arcade-result { animation: arcade-result-in .32s ease-out both; }
    .alola-holes button img { animation: arcade-target-in .15s ease-out both; }
    .capture-stage img { animation: arcade-target-in .22s ease-out both; }
    #arcade-board .button, .alola-answers button { transition: transform .12s ease-out; }
    #arcade-board .button:active, .alola-answers button:active { transform: scale(.96); }
}
@keyframes arcade-feedback-pop {
    from { opacity: .25; transform: translateY(.35rem) scale(.9); }
    65% { opacity: 1; transform: translateY(-.15rem) scale(1.07); }
    to { opacity: 1; transform: none; }
}
@keyframes arcade-result-in {
    from { opacity: 0; transform: translateY(.6rem); }
    to { opacity: 1; transform: none; }
}
@keyframes arcade-target-in {
    from { opacity: .4; transform: translateY(.45rem) scale(.88); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .capture-shake { animation: capture-shake .3s ease-in-out 3; }
}
@keyframes capture-shake {
    25% { transform: translateX(-7px) rotate(-10deg); }
    75% { transform: translateX(7px) rotate(10deg); }
}