/* =============================================================
   MĪHARO: Escape the Arcade — Stylesheet
   Dark cinematic / Māori fantasy / arcade neon
   Mobile-first, beginner-friendly, no preprocessor needed.
   ============================================================= */

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

/* ---- Design tokens ---- */
:root {
  --bg-deep: #04060d;
  --bg-card: rgba(18, 26, 44, 0.72);
  --line: rgba(120, 200, 220, 0.14);

  --mauri: #00f0c8;          /* teal mauri */
  --mauri-soft: #57ffd9;
  --gold: #f4c046;           /* whetū gold */
  --gold-soft: #ffd97a;
  --kura: #ff5d6c;           /* sacred red, warnings */

  --text: #eaf2ff;
  --text-dim: #95a3ba;
  --text-faint: #5a6779;

  --radius: 14px;
  --radius-lg: 22px;

  --shadow-glow: 0 0 30px rgba(0, 240, 200, 0.18), 0 0 60px rgba(0, 240, 200, 0.08);
  --shadow-gold: 0 0 30px rgba(244, 192, 70, 0.22);

  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html, body {
  min-height: 100vh;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 143, 120, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(244, 192, 70, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(20, 30, 60, 0.5) 0%, transparent 70%),
    var(--bg-deep);
  background-attachment: fixed;
}

/* Faint film grain */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; opacity: 0.4; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.08 0 0 0 0 0.12 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Faint star dots */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 78% 32%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 42% 76%, rgba(255,255,255,0.4),  transparent 60%),
    radial-gradient(1px 1px at 88% 88%, rgba(255,255,255,0.5),  transparent 60%),
    radial-gradient(1px 1px at 22% 60%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 65% 10%, rgba(255,255,255,0.4),  transparent 60%);
}

/* ---- Layout shells ---- */
.page {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 18px 60px;
}
.shell { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 22px; }
.screen-wrap { width: 100%; max-width: 1200px; display: grid; grid-template-columns: 1fr; gap: 22px; }

/* ---- Brand ---- */
.brand {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 14px; margin-bottom: 6px; text-align: center;
}
.brand__mark {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: clamp(28px, 5vw, 44px); letter-spacing: 0.18em;
  background: linear-gradient(180deg, #fff 0%, var(--mauri-soft) 60%, var(--mauri) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 28px rgba(0, 240, 200, 0.25);
}
.brand__logo {
  width: 160px; height: auto;
  margin: 6px 0 2px;
  filter: drop-shadow(0 0 18px rgba(0, 240, 200, 0.35));
}
.brand__sub {
  font-family: 'Cinzel', serif; font-weight: 500;
  letter-spacing: 0.4em; font-size: 11px;
  color: var(--gold); text-transform: uppercase;
}

/* ---- Cards ---- */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.03);
}
.card::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: var(--radius-lg); padding: 1px;
  background: linear-gradient(135deg, rgba(0,240,200,0.4), transparent 40%, rgba(244,192,70,0.3) 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.card__title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 20px; letter-spacing: 0.06em; margin-bottom: 6px;
}
.card__lede { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin-bottom: 18px; }

/* ---- Forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field__label {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600;
}
.input {
  width: 100%;
  background: rgba(8, 12, 22, 0.85);
  border: 1px solid rgba(120, 200, 220, 0.18);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: inherit; font-size: 16px;
  color: var(--text); letter-spacing: 0.04em;
  transition: border-color 200ms var(--easing), box-shadow 200ms var(--easing);
}
.input:focus {
  outline: none; border-color: var(--mauri);
  box-shadow: 0 0 0 3px rgba(0, 240, 200, 0.15), 0 0 24px rgba(0, 240, 200, 0.18);
}
.input::placeholder { color: var(--text-faint); }
textarea.input {
  resize: vertical; min-height: 130px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; line-height: 1.55;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  font-family: 'Cinzel', serif; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-size: 13px; padding: 16px 22px;
  border-radius: var(--radius); border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(0,240,200,0.18), rgba(0,143,120,0.18));
  border-color: rgba(0, 240, 200, 0.45);
  color: var(--mauri-soft); cursor: pointer;
  transition: transform 140ms var(--easing), box-shadow 200ms var(--easing), background 200ms var(--easing);
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
  background: linear-gradient(180deg, rgba(0,240,200,0.28), rgba(0,143,120,0.28));
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); }

.btn--gold {
  background: linear-gradient(180deg, rgba(244,192,70,0.22), rgba(180,130,30,0.22));
  border-color: rgba(244, 192, 70, 0.55); color: var(--gold-soft);
}
.btn--gold:hover:not(:disabled) {
  box-shadow: var(--shadow-gold);
  background: linear-gradient(180deg, rgba(244,192,70,0.32), rgba(180,130,30,0.32));
}
.btn--ghost {
  background: transparent; border-color: var(--line); color: var(--text-dim);
}
.btn--ghost:hover:not(:disabled) {
  border-color: rgba(0, 240, 200, 0.35); color: var(--text); box-shadow: none;
}
.btn--danger {
  background: linear-gradient(180deg, rgba(255,93,108,0.18), rgba(170,40,50,0.22));
  border-color: rgba(255, 93, 108, 0.55); color: #ffb0b8;
}
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 140px; }

/* ---- Status / banners ---- */
.status { font-size: 13px; margin-top: 10px; min-height: 18px; }
.status--ok { color: var(--mauri-soft); }
.status--bad { color: #ff8e9a; }
.status--info { color: var(--text-dim); }

.banner {
  border-radius: var(--radius); padding: 12px 14px;
  font-size: 13px; border: 1px solid;
  display: flex; align-items: center; gap: 10px;
}
.banner--wait {
  background: rgba(244, 192, 70, 0.07);
  border-color: rgba(244, 192, 70, 0.3);
  color: var(--gold-soft);
}
.banner--ok {
  background: rgba(0, 240, 200, 0.06);
  border-color: rgba(0, 240, 200, 0.3);
  color: var(--mauri-soft);
}

/* ---- Choose role ---- */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .role-grid { grid-template-columns: 1fr; } }

.role {
  position: relative; padding: 24px 18px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(120, 200, 220, 0.18);
  background: linear-gradient(180deg, rgba(20,30,55,0.6), rgba(8,12,22,0.85));
  cursor: pointer;
  transition: transform 200ms var(--easing), border-color 200ms var(--easing), box-shadow 200ms var(--easing);
  text-align: left;
}
.role:hover:not(.role--taken) {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 200, 0.5);
  box-shadow: var(--shadow-glow);
}
.role__name {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: 22px; letter-spacing: 0.14em; margin-bottom: 4px;
}
.role--maui .role__name {
  background: linear-gradient(180deg, #fff, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.role--hine .role__name {
  background: linear-gradient(180deg, #fff, var(--mauri));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.role__role {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.role__desc { color: var(--text-dim); font-size: 13px; line-height: 1.55; }
.role__avatar {
  display: block; width: 80px; height: 80px;
  object-fit: cover; border-radius: 50%;
  margin: 0 auto 12px;
  border: 2px solid rgba(120, 200, 220, 0.3);
  filter: drop-shadow(0 0 12px rgba(0, 240, 200, 0.25));
}
.role--maui .role__avatar { border-color: rgba(244, 192, 70, 0.5); filter: drop-shadow(0 0 12px rgba(244, 192, 70, 0.3)); }
.role--hine .role__avatar { border-color: rgba(0, 240, 200, 0.5); filter: drop-shadow(0 0 12px rgba(0, 240, 200, 0.3)); }
.role--taken { cursor: not-allowed; opacity: 0.45; filter: grayscale(0.6); }
.role__taken-tag {
  display: inline-block; margin-top: 10px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--kura); border: 1px solid rgba(255, 93, 108, 0.4);
  padding: 4px 8px; border-radius: 999px;
}

/* ---- Character select screen ---- */
.choose-header {
  text-align: center;
  padding: 28px 0 18px;
}
.choose-header__game {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 10px; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.choose-header__title {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: clamp(26px, 5vw, 38px); letter-spacing: 0.1em;
  background: linear-gradient(180deg, #fff 0%, var(--mauri-soft) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  margin-bottom: 8px;
}
.choose-header__sub {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--text-faint);
}
.choose-role-grid { margin-top: 6px; }
.choose-role-grid .role {
  text-align: center;
  padding: 28px 16px 22px;
}
.choose-role-grid .role__avatar {
  width: 100px; height: 100px;
  margin: 0 auto 16px;
}
.choose-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px 0; margin-top: 6px;
}
.choose-footer__back {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); text-decoration: none;
  transition: color 180ms;
}
.choose-footer__back:hover { color: var(--mauri-soft); }
.choose-footer__admin {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); text-decoration: none; opacity: 0.5;
  transition: opacity 180ms, color 180ms;
}
.choose-footer__admin:hover { opacity: 1; color: var(--text-dim); }
.choose-footer__room {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- Player / Screen shared ---- */
.scene-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.scene-meta__role--maui { color: var(--gold); }
.scene-meta__role--hinengaro { color: var(--mauri); }

.scene-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: 0.06em; margin-bottom: 14px; line-height: 1.2;
}
.story {
  color: var(--text-dim); line-height: 1.6; font-size: 15px;
  white-space: pre-line; margin-bottom: 18px;
}

.clue-block {
  border-left: 2px solid var(--mauri);
  padding: 10px 0 10px 16px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, rgba(0,240,200,0.06), transparent 80%);
}
.clue-block--gold {
  border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(244,192,70,0.06), transparent 80%);
}
.clue-block__label {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 4px;
}
.clue-block__text { font-size: 14px; line-height: 1.6; color: var(--text); }

/* ---- Media frames (videos + images) ---- */
.media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0, 240, 200, 0.28);
  background: #000;
  margin-bottom: 14px;
  aspect-ratio: 16 / 9;
  box-shadow:
    0 30px 60px -25px rgba(0, 0, 0, 0.85),
    0 0 70px -10px rgba(0, 240, 200, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: mediaFade 600ms var(--easing) both;
}
.media iframe {
  position: relative; width: 100%; height: 100%;
  border: 0; display: block;
}
.media-label {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  margin: 4px 2px 8px;
  display: flex; align-items: center; gap: 10px;
}
.media-label::before, .media-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,192,70,0.35), transparent);
}

.image-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(244, 192, 70, 0.32);
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(244,192,70,0.04), rgba(0,0,0,0.35));
  box-shadow:
    0 20px 40px -20px rgba(0,0,0,0.8),
    0 0 60px -15px rgba(244,192,70,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.03);
  animation: mediaFade 600ms var(--easing) both;
}
.image-frame img {
  width: 100%; display: block;
  animation: mediaFade 700ms var(--easing) both;
}
.image-frame__placeholder {
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  text-align: center; padding: 24px;
  font-family: 'Cinzel', serif;
  font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-soft);
  background:
    radial-gradient(ellipse at center, rgba(244,192,70,0.10), transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 6px, transparent 6px 12px),
    #0a0f1c;
}
.image-frame__placeholder::before {
  content: '◆';
  display: block; font-size: 26px; color: var(--gold);
  margin-bottom: 6px;
  filter: drop-shadow(0 0 14px rgba(244,192,70,0.55));
  animation: mauriPulse 2.6s var(--easing) infinite;
}

@keyframes mediaFade {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Word buttons + answer ---- */
.word-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.word-btn {
  font-family: 'Manrope', sans-serif; font-weight: 600;
  letter-spacing: 0.04em; font-size: 14px;
  padding: 11px 16px;
  background: rgba(8, 12, 22, 0.75);
  border: 1px solid rgba(0, 240, 200, 0.28);
  color: var(--text); border-radius: 999px; cursor: pointer;
  transition: transform 140ms var(--easing), border-color 200ms var(--easing), background 200ms var(--easing);
}
.word-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--mauri);
  background: rgba(0, 240, 200, 0.08);
  box-shadow: 0 0 16px rgba(0, 240, 200, 0.2);
}
.word-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.answer-display {
  min-height: 56px;
  border: 1px dashed rgba(0, 240, 200, 0.28);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 16px; letter-spacing: 0.04em;
  color: var(--text);
  background: rgba(0, 240, 200, 0.04);
  margin-bottom: 12px;
  word-break: break-word;
}
.answer-display:empty::before {
  content: 'Tap the words below to build your answer…';
  color: var(--text-faint);
  font-style: italic; font-size: 14px;
}

/* ---- Shared screen extras ---- */
.screen-hero { text-align: center; padding: 32px 24px; }
.screen-hero .scene-title { font-size: clamp(28px, 5vw, 48px); }

.progress-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.progress-cell {
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(8, 12, 22, 0.65); text-align: center;
}
.progress-cell__role {
  font-family: 'Cinzel', serif;
  font-size: 18px; letter-spacing: 0.16em; margin-bottom: 4px;
}
.progress-cell--maui .progress-cell__role { color: var(--gold); }
.progress-cell--hine .progress-cell__role { color: var(--mauri); }
.progress-cell__state {
  font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--text-faint);
}
.progress-cell--ok {
  border-color: rgba(0, 240, 200, 0.5);
  box-shadow: 0 0 24px rgba(0, 240, 200, 0.15);
}
.progress-cell--ok .progress-cell__state { color: var(--mauri-soft); }
.progress-cell--waiting { border-color: rgba(244, 192, 70, 0.4); }
.progress-cell--waiting .progress-cell__state { color: var(--gold-soft); }

@keyframes mauriPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 240, 200, 0.0); }
  50%      { box-shadow: 0 0 28px 0 rgba(0, 240, 200, 0.35); }
}
.mauri-pulse { animation: mauriPulse 2.4s var(--easing) infinite; }

/* ---- Meta strip / footer ---- */
.meta-strip {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint); padding: 4px 4px 0;
}
.meta-strip a { color: var(--text-dim); text-decoration: none; }
.meta-strip a:hover { color: var(--mauri-soft); }

/* ---- KV display (admin / create-room) ---- */
.kv {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 12px 14px; border-radius: var(--radius);
  background: rgba(8, 12, 22, 0.65);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}
.kv__k {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-faint);
}
.kv__v {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 18px; letter-spacing: 0.1em; word-break: break-all;
}
.kv__v--mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 500; font-size: 13px; letter-spacing: 0;
}

/* ---- Utility ---- */
.center { text-align: center; }
.muted  { color: var(--text-dim); }
.faint  { color: var(--text-faint); }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; }
.hidden { display: none !important; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .page { padding: 18px 14px 50px; }
  .card { padding: 22px 18px; }
  .word-btn { font-size: 13px; padding: 10px 14px; }
}
@media (min-width: 1024px) {
  .screen-wrap { padding: 12px; }
  .screen-hero .story { font-size: 18px; max-width: 800px; margin-left: auto; margin-right: auto; }
  .progress-cell { padding: 22px; }
  .progress-cell__role { font-size: 22px; }
  .media {
    box-shadow:
      0 40px 80px -30px rgba(0, 0, 0, 0.9),
      0 0 120px -20px rgba(0, 240, 200, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
}

/* =============================================================
   LEVEL 2 ADDITIONS — append to end of style.css
   Mīharo: Ngā Oro o te Ngahere — The Sounds of the Forest
   ============================================================= */

/* ---- L2 generic panel (wraps each mini-game) ---- */
.l2-panel {
  border: 1px solid rgba(0, 240, 200, 0.18);
  border-radius: var(--radius);
  background: rgba(6, 12, 24, 0.85);
  padding: 20px 18px;
  margin-bottom: 18px;
}
.l2-panel__title {
  font-family: 'Cinzel', serif;
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--gold);
  margin-bottom: 8px;
}
.l2-panel__desc {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.6; margin-bottom: 14px;
  white-space: pre-line;
}
.l2-status {
  font-size: 13px; margin-top: 12px; min-height: 18px;
}
.l2-status--ok  { color: var(--mauri-soft); }
.l2-status--bad { color: #ff8e9a; }
.l2-status--info { color: var(--text-dim); }

/* Reveal card (shown after mini-game success) */
.l2-reveal {
  margin-top: 18px;
  border: 1px solid rgba(0, 240, 200, 0.35);
  border-radius: var(--radius);
  background: rgba(0, 240, 200, 0.05);
  padding: 16px 18px;
}
.l2-reveal__title {
  font-family: 'Cinzel', serif;
  font-size: 14px; color: var(--mauri-soft);
  letter-spacing: 0.08em; margin-bottom: 4px;
}
.l2-reveal__text {
  font-size: 12px; color: var(--text-dim);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 10px;
}
.l2-reveal__sequence {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 18px; letter-spacing: 0.12em;
  color: var(--gold); word-break: break-word;
  text-shadow: 0 0 20px rgba(244, 192, 70, 0.4);
}

/* ---- Legend (symbol puzzle) ---- */
.l2-legend {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 16px;
}
.l2-legend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(244, 192, 70, 0.06);
  border: 1px solid rgba(244, 192, 70, 0.2);
  border-radius: 8px;
  font-size: 13px;
}
.l2-symbol-icon {
  font-size: 18px; line-height: 1;
  width: 28px; text-align: center;
}

/* ---- Direction buttons (compass & maze) ---- */
.l2-dir-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 10px;
}
.l2-dir-btn {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.1em;
  padding: 14px 8px;
  background: rgba(244, 192, 70, 0.1);
  border: 1px solid rgba(244, 192, 70, 0.4);
  border-radius: var(--radius);
  color: var(--gold-soft); cursor: pointer;
  transition: background 180ms, transform 100ms, box-shadow 180ms;
}
.l2-dir-btn:hover:not(:disabled) {
  background: rgba(244, 192, 70, 0.22);
  box-shadow: 0 0 18px rgba(244, 192, 70, 0.28);
  transform: translateY(-1px);
}
.l2-dir-btn:active:not(:disabled) { transform: translateY(0); }
.l2-dir-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.l2-dir-btn--done {
  background: rgba(0, 240, 200, 0.12);
  border-color: rgba(0, 240, 200, 0.5);
  color: var(--mauri-soft);
}
.l2-dir-btn--flash {
  background: rgba(244, 192, 70, 0.4) !important;
}

/* Calibration dots */
.l2-cal-dots {
  display: flex; justify-content: center; gap: 16px;
  margin-bottom: 8px; font-size: 16px;
  color: var(--text-faint);
}
.l2-cal-dot--ok { color: var(--mauri-soft); }

/* ============================================================ */
/* COMPASS (Task 1 — Māui)                                      */
/* ============================================================ */
.compass-wrap {
  display: flex; justify-content: center;
  margin: 18px 0 20px;
}
.compass {
  width: 190px; height: 190px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(60,40,0,0.7), rgba(10,7,2,0.98) 75%);
  border: 2px solid rgba(244, 192, 70, 0.55);
  box-shadow:
    0 0 40px rgba(244, 192, 70, 0.22),
    0 0 80px rgba(244, 192, 70, 0.08),
    inset 0 0 24px rgba(244, 192, 70, 0.08);
  position: relative;
  transition: box-shadow 600ms var(--easing);
}
.compass--complete {
  box-shadow:
    0 0 60px rgba(0, 240, 200, 0.5),
    0 0 120px rgba(0, 240, 200, 0.2),
    inset 0 0 30px rgba(0, 240, 200, 0.12) !important;
  border-color: rgba(0, 240, 200, 0.7) !important;
}
.compass-ring-outer {
  position: absolute; inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(244, 192, 70, 0.22);
}
.compass-dial {
  position: absolute; inset: 0;
  border-radius: 50%;
}
.compass-dir {
  position: absolute;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; color: var(--gold-soft);
  letter-spacing: 0.06em;
  transform: translate(-50%, -50%);
}
.compass-n { top: 14%; left: 50%; }
.compass-e { top: 50%; left: 86%; }
.compass-s { top: 86%; left: 50%; }
.compass-w { top: 50%; left: 14%; }

.compass-needle {
  position: absolute;
  left: 50%; top: 16%;
  width: 3px; height: 35%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #fff 0%, var(--gold) 40%, rgba(244,192,70,0.3) 100%);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 0 10px rgba(244, 192, 70, 0.7);
}
.compass-needle::after {
  content: '';
  position: absolute;
  left: -1px; top: 100%;
  width: 5px; height: 28%;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, rgba(180,80,80,0.8), rgba(120,30,30,0.4));
}
.compass-center {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(244, 192, 70, 0.8);
}

/* Sequence display dots */
.l2-seq-display {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}
.l2-seq-dot {
  width: 38px; height: 38px;
  border: 1px solid rgba(244, 192, 70, 0.3);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
  color: var(--text-faint);
  background: rgba(244, 192, 70, 0.05);
}
.l2-seq-dot--filled {
  color: var(--gold);
  border-color: rgba(244, 192, 70, 0.6);
  background: rgba(244, 192, 70, 0.1);
  box-shadow: 0 0 10px rgba(244, 192, 70, 0.2);
}
.l2-clear-seq { margin-top: 10px; }

/* ============================================================ */
/* SYMBOL PUZZLE (Task 1 — Hinengaro)                           */
/* ============================================================ */
.l2-stones {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 12px;
}
.l2-stone {
  border: 1px solid rgba(120, 200, 220, 0.2);
  border-radius: var(--radius);
  padding: 12px 10px;
  background: rgba(8, 12, 28, 0.8);
  text-align: center;
}
.l2-stone__num {
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 4px;
}
.l2-stone__icon {
  font-size: 22px; line-height: 1; margin-bottom: 4px;
}
.l2-stone__name {
  font-size: 11px; color: var(--text-dim);
  margin-bottom: 8px; letter-spacing: 0.06em;
}
.l2-stone__choices {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.l2-choice-btn {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; padding: 8px 4px;
  border: 1px solid rgba(120, 200, 220, 0.22);
  border-radius: 6px; cursor: pointer;
  background: rgba(8, 12, 22, 0.8); color: var(--text-dim);
  transition: background 160ms, border-color 160ms;
}
.l2-choice-btn:hover:not(:disabled) {
  background: rgba(0, 240, 200, 0.1);
  border-color: rgba(0, 240, 200, 0.45);
  color: var(--text);
}
.l2-choice-btn--sel {
  background: rgba(0, 240, 200, 0.14) !important;
  border-color: rgba(0, 240, 200, 0.65) !important;
  color: var(--mauri-soft) !important;
}
.l2-choice-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.l2-stone__result {
  font-size: 14px; margin-top: 6px; font-weight: 700; min-height: 20px;
}
.l2-stone__result--ok  { color: var(--mauri-soft); }
.l2-stone__result--bad { color: #ff8e9a; }

/* ============================================================ */
/* MAZE (Task 2 — Māui)                                         */
/* ============================================================ */
.maze-grid {
  display: grid;
  gap: 3px;
  margin: 0 auto 18px;
  max-width: 300px;
}
.maze-cell {
  aspect-ratio: 1;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  transition: background 200ms, box-shadow 200ms;
}
.maze-cell--wall {
  background: rgba(20, 30, 55, 0.95);
  border: 1px solid rgba(30, 45, 75, 0.8);
}
.maze-cell {
  background: rgba(8, 14, 30, 0.6);
  border: 1px solid rgba(40, 60, 100, 0.4);
}
.maze-cell--wall { background: rgba(15, 22, 40, 0.98); }
.maze-cell--goal {
  background: rgba(244, 192, 70, 0.12);
  border-color: rgba(244, 192, 70, 0.5);
  color: var(--gold);
  box-shadow: 0 0 14px rgba(244, 192, 70, 0.3);
  animation: mauriPulse 2s infinite;
}
.maze-cell--player {
  background: rgba(0, 240, 200, 0.15);
  border-color: rgba(0, 240, 200, 0.6);
  color: var(--mauri-soft);
  box-shadow: 0 0 12px rgba(0, 240, 200, 0.35);
}
.maze-cell--player-goal {
  background: rgba(0, 240, 200, 0.25);
  border-color: var(--mauri);
  color: var(--mauri-soft);
  font-size: 18px;
  box-shadow: 0 0 30px rgba(0, 240, 200, 0.5);
}
/* Directional cross for maze */
.l2-dir-cross { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 10px; }
.l2-dir-cross__row { display: flex; gap: 6px; align-items: center; }
.l2-dir-cross__center { width: 54px; height: 44px; }
.l2-dir-cross .l2-dir-btn { width: 72px; padding: 14px 8px; }

/* ============================================================ */
/* WORDLE (Task 2 — Hinengaro)                                  */
/* ============================================================ */
.wordle-grid {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 14px;
}
.wordle-row {
  display: flex; gap: 5px;
}
.wordle-cell {
  flex: 1;
  aspect-ratio: 1;
  max-width: 52px;
  border: 2px solid rgba(120, 200, 220, 0.22);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 18px; color: var(--text);
  background: rgba(8, 12, 22, 0.85);
  transition: border-color 200ms;
}
.wordle-cell--green {
  background: rgba(0, 200, 120, 0.25);
  border-color: rgba(0, 200, 120, 0.7);
  color: #7dffc3;
  box-shadow: 0 0 10px rgba(0, 200, 120, 0.25);
}
.wordle-cell--yellow {
  background: rgba(244, 192, 70, 0.2);
  border-color: rgba(244, 192, 70, 0.65);
  color: var(--gold-soft);
  box-shadow: 0 0 10px rgba(244, 192, 70, 0.2);
}
.wordle-cell--gray {
  background: rgba(30, 40, 60, 0.7);
  border-color: rgba(60, 70, 90, 0.5);
  color: var(--text-faint);
}
.wordle-keyboard {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: 8px;
}
.wordle-kb-row {
  display: flex; justify-content: center; gap: 4px;
}
.wordle-key {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px;
  padding: 12px 7px; min-width: 30px;
  border: 1px solid rgba(120, 200, 220, 0.22);
  border-radius: 6px; cursor: pointer;
  background: rgba(14, 22, 40, 0.85); color: var(--text-dim);
  transition: background 160ms, color 160ms;
}
.wordle-key:hover:not(:disabled) {
  background: rgba(0, 240, 200, 0.1);
  color: var(--text);
}
.wordle-key--wide { min-width: 54px; font-size: 10px; }
.wordle-key--green  { background: rgba(0, 200, 120, 0.25); border-color: rgba(0,200,120,0.5); color: #7dffc3; }
.wordle-key--yellow { background: rgba(244, 192, 70, 0.2); border-color: rgba(244,192,70,0.5); color: var(--gold-soft); }
.wordle-key--gray   { background: rgba(25, 35, 55, 0.9); border-color: rgba(40,55,80,0.4); color: var(--text-faint); }
.wordle-key:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================ */
/* BEAT STONES — RHYTHM (Task 3 — Māui)                         */
/* ============================================================ */
.beat-stones {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.beat-stone {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 240, 200, 0.28);
  cursor: pointer;
  transition: background 200ms, box-shadow 200ms, transform 100ms;
  user-select: none;
}
.beat-stone--slow {
  width: 72px; height: 72px;
  background: rgba(0, 240, 200, 0.06);
}
.beat-stone--quick {
  width: 52px; height: 52px;
  background: rgba(244, 192, 70, 0.06);
  border-color: rgba(244, 192, 70, 0.28);
}
.beat-stone__label {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.beat-stone--slow .beat-stone__label  { color: var(--text-dim); }
.beat-stone--quick .beat-stone__label { color: rgba(244,192,70,0.6); }
.beat-stone__num {
  font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700;
  color: var(--text-dim);
}
.beat-stone--lit {
  transform: scale(1.08);
  box-shadow: 0 0 28px rgba(0, 240, 200, 0.5), inset 0 0 12px rgba(0, 240, 200, 0.15);
  background: rgba(0, 240, 200, 0.18) !important;
  border-color: var(--mauri) !important;
}
.beat-stone--lit .beat-stone__label,
.beat-stone--lit .beat-stone__num { color: var(--mauri-soft); }
.beat-stone--tapped {
  background: rgba(0, 240, 200, 0.25) !important;
  border-color: rgba(0, 240, 200, 0.7) !important;
  box-shadow: 0 0 18px rgba(0, 240, 200, 0.3);
}

/* ============================================================ */
/* LYRICS PUZZLE (Task 3 — Hinengaro)                           */
/* ============================================================ */
.lyrics-slots {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}
.lyrics-slot {
  min-width: 52px; padding: 10px 12px;
  border: 1px dashed rgba(0, 240, 200, 0.35);
  border-radius: var(--radius);
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 15px; text-align: center;
  color: var(--mauri-soft);
  background: rgba(0, 240, 200, 0.04);
  letter-spacing: 0.06em;
}
.lyrics-words {
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 12px;
}
.lyrics-word-btn {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.08em;
  padding: 11px 16px;
  border: 1px solid rgba(0, 240, 200, 0.35);
  border-radius: 999px; cursor: pointer;
  background: rgba(0, 240, 200, 0.07);
  color: var(--text);
  transition: background 160ms, transform 100ms, border-color 160ms;
}
.lyrics-word-btn:hover:not(:disabled):not(.lyrics-word-btn--used) {
  background: rgba(0, 240, 200, 0.15);
  border-color: var(--mauri);
  transform: translateY(-1px);
}
.lyrics-word-btn--used {
  opacity: 0.35; cursor: not-allowed; text-decoration: line-through;
}
/* =============================================================
   LEVEL 2 CSS ADDITIONS — paste at the bottom of style.css
   Mīharo: Ngā Oro o te Ngahere — The Sounds of the Forest
   ============================================================= */

/* ---- Generic L2 panel ---- */
.l2-panel {
  border: 1px solid rgba(0, 240, 200, 0.18);
  border-radius: var(--radius);
  background: rgba(6, 12, 24, 0.88);
  padding: 18px 16px;
  margin-bottom: 18px;
}
.l2-panel--placeholder {
  border-color: rgba(244, 192, 70, 0.22);
  background: rgba(10, 10, 20, 0.85);
  text-align: center;
}
.l2-panel__title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 15px; letter-spacing: 0.1em;
  color: var(--gold); margin-bottom: 8px;
}
.l2-panel__desc {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.65; margin-bottom: 14px;
  white-space: pre-line;
}
.l2-placeholder-msg {
  color: var(--text-dim); font-size: 14px; line-height: 1.7;
  padding: 20px 8px;
}
.l2-placeholder-msg code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--gold-soft); font-size: 12px;
}
.l2-status {
  font-size: 13px; margin-top: 12px; min-height: 18px; line-height: 1.5;
}
.l2-status--ok   { color: var(--mauri-soft); }
.l2-status--bad  { color: #ff8e9a; }
.l2-status--info { color: var(--text-dim); }

.l2-hint {
  margin-top: 10px; padding: 10px 14px;
  border: 1px solid rgba(244, 192, 70, 0.28);
  border-radius: var(--radius);
  background: rgba(244, 192, 70, 0.05);
  font-size: 13px; color: var(--gold-soft); line-height: 1.6;
}

/* Reveal card */
.l2-reveal {
  margin-top: 16px;
  border: 1px solid rgba(0, 240, 200, 0.38);
  border-radius: var(--radius);
  background: rgba(0, 240, 200, 0.05);
  padding: 14px 16px;
}
.l2-reveal__title {
  font-family: 'Cinzel', serif; font-size: 14px;
  color: var(--mauri-soft); letter-spacing: 0.07em; margin-bottom: 4px;
}
.l2-reveal__text {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 8px;
}
.l2-reveal__sequence {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 17px; letter-spacing: 0.1em; color: var(--gold);
  word-break: break-word; line-height: 1.5;
  text-shadow: 0 0 18px rgba(244, 192, 70, 0.35);
}
.l2-reveal__order {
  margin-top: 10px; font-size: 13px; line-height: 1.7;
  color: var(--mauri-soft); white-space: pre-line;
}
.l2-poem {
  font-size: 13px; line-height: 1.9; color: var(--text-dim);
  font-style: italic; white-space: pre-line;
  border-left: 2px solid rgba(0, 240, 200, 0.22);
  padding-left: 12px; margin-bottom: 16px;
}

/* Small button variant */
.btn--sm { font-size: 11px; padding: 10px 16px; }

/* ======================================================== */
/* TASK 1 — FOREST MAP (Māui)                               */
/* ======================================================== */

.fmap-grid {
  display: grid; gap: 2px;
  margin: 0 auto 14px;
  max-width: 300px;
}
.fmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 18, 36, 0.7);
  border: 1px solid rgba(0, 50, 40, 0.4);
  transition: box-shadow 220ms;
}
.fmap-cell--wall {
  background:
    repeating-linear-gradient(45deg,
      rgba(10,6,4,0.98) 0 4px,
      rgba(18,12,6,0.96) 4px 8px);
  border-color: rgba(30,20,10,0.6);
}
.fmap-cell--landmark .fmap-lm-dot,
.fmap-cell--decoy    .fmap-lm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0.6;
  box-shadow: 0 0 5px rgba(244,192,70,0.5);
}
.fmap-cell--decoy .fmap-lm-dot {
  background: rgba(120,80,60,0.7);
  box-shadow: none;
}
.fmap-cell--player {
  background: rgba(0, 240, 200, 0.18) !important;
  border-color: rgba(0, 240, 200, 0.7) !important;
  box-shadow: 0 0 14px rgba(0, 240, 200, 0.4);
}
.fmap-cell--player::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mauri-soft);
  box-shadow: 0 0 8px var(--mauri);
}
.fmap-cell--visited .fmap-lm-dot {
  background: var(--mauri-soft) !important;
  opacity: 1 !important;
  box-shadow: 0 0 8px rgba(0,240,200,0.6) !important;
}
.fmap-progress {
  font-family: 'Cinzel', serif; font-size: 12px;
  letter-spacing: 0.12em; color: var(--gold); margin-bottom: 10px;
  text-align: center;
}

/* Compass controls */
.fmap-compass {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-bottom: 10px;
}
.fmap-compass-row { display: flex; gap: 4px; align-items: center; }
.fmap-compass-center { width: 48px; height: 42px; }
.fmap-btn {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.08em;
  padding: 12px 16px; min-width: 54px;
  background: rgba(244, 192, 70, 0.08);
  border: 1px solid rgba(244, 192, 70, 0.38);
  border-radius: var(--radius); color: var(--gold-soft);
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 100ms;
}
.fmap-btn:hover:not(:disabled) {
  background: rgba(244, 192, 70, 0.2);
  box-shadow: 0 0 14px rgba(244, 192, 70, 0.25);
  transform: translateY(-1px);
}
.fmap-btn:active:not(:disabled) { transform: translateY(0); }
.fmap-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ======================================================== */
/* TASK 1 — LANDMARK PUZZLE (Hinengaro)                     */
/* ======================================================== */

.lm-cards {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: 14px;
}
.lm-card {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 12px;
  letter-spacing: 0.05em; padding: 9px 12px;
  border: 1px solid rgba(0, 240, 200, 0.28);
  border-radius: 8px; cursor: pointer;
  background: rgba(6, 14, 28, 0.85); color: var(--text-dim);
  transition: background 160ms, border-color 160ms, transform 100ms;
}
.lm-card:hover:not(:disabled):not(.lm-card--used) {
  background: rgba(0, 240, 200, 0.1);
  border-color: rgba(0, 240, 200, 0.55);
  color: var(--text); transform: translateY(-1px);
}
.lm-card--used {
  opacity: 0.3; cursor: not-allowed; text-decoration: line-through;
}
.lm-card:disabled { opacity: 0.3; cursor: not-allowed; }

.lm-slots {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 14px;
}
.lm-slot {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 10px; min-width: 60px;
  border: 1px dashed rgba(244, 192, 70, 0.25);
  border-radius: 8px;
  background: rgba(12, 8, 4, 0.7);
  transition: border-color 200ms;
}
.lm-slot__num {
  font-size: 9px; letter-spacing: 0.2em; color: var(--text-faint);
  margin-bottom: 3px;
}
.lm-slot__name {
  font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 0.04em; color: var(--text-dim); text-align: center;
}
.lm-slot--filled {
  border-color: rgba(0, 240, 200, 0.42);
  background: rgba(0, 240, 200, 0.05);
}
.lm-slot--filled .lm-slot__name { color: var(--mauri-soft); }

.lm-seq-item {
  display: inline-block;
  font-family: 'Cinzel', serif; font-size: 13px;
  color: var(--mauri-soft); margin: 2px 0;
}
.lm-seq-arrow {
  color: var(--text-faint); font-size: 11px; margin: 0 3px;
}

/* ======================================================== */
/* TASK 2 — STONE MAZE (Māui)                               */
/* ======================================================== */

.mz-grid {
  display: grid; gap: 2px;
  margin: 0 auto 14px;
  width: 100%; max-width: 330px;
  box-sizing: border-box; overflow: hidden;
}
.mz-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  /* All floor cells intentionally identical — no path colouring */
  background: rgba(8, 14, 28, 0.75);
  border: 1px solid rgba(20, 35, 55, 0.5);
  font-size: 8px;
  overflow: hidden;
  transition: background 200ms, box-shadow 200ms;
}
@media (max-width: 380px) {
  .mz-grid { gap: 1px; max-width: 100%; }
  .mz-cell { font-size: 6px; }
  .mz-stone-name { font-size: 5px; letter-spacing: 0; }
  .mz-end-mark { font-size: 5px; }
  .mz-gate-label { font-size: 4px; }
  .mz-hud-stone { font-size: 9px; padding: 4px 7px; }
}
.mz-cell--wall {
  background:
    linear-gradient(135deg, rgba(12,8,6,0.98), rgba(20,14,10,0.97));
  border-color: rgba(35,20,10,0.55);
}
.mz-cell--stone {
  background: rgba(0, 240, 200, 0.07);
  border-color: rgba(0, 240, 200, 0.5);
  animation: mauriPulse 2.2s var(--easing) infinite;
}
.mz-cell--stone-taken {
  background: rgba(0, 240, 200, 0.03);
  border-color: rgba(0, 240, 200, 0.2);
  opacity: 0.5;
}
.mz-stone-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 7px; letter-spacing: 0.06em;
  color: var(--mauri-soft); text-align: center; line-height: 1.2;
}
.mz-cell--end {
  background: rgba(244, 192, 70, 0.1);
  border-color: rgba(244, 192, 70, 0.5);
  animation: mauriPulse 2.5s var(--easing) infinite;
}
.mz-end-mark {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 7px; color: var(--gold); letter-spacing: 0.04em;
}
.mz-cell--player {
  background: rgba(0, 240, 200, 0.18) !important;
  border-color: var(--mauri) !important;
  box-shadow: 0 0 12px rgba(0, 240, 200, 0.35);
}
.mz-cell--player::after {
  content: ''; position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mauri-soft);
  box-shadow: 0 0 8px var(--mauri);
}
.mz-cell--gate {
  background: rgba(180, 100, 20, 0.1);
  border-color: rgba(244, 192, 70, 0.3);
}
.mz-gate-label {
  font-size: 6px; font-family: 'Cinzel', serif;
  letter-spacing: 0.05em; color: rgba(244, 192, 70, 0.6);
  text-align: center; line-height: 1.2;
}
.mz-cell--gate-open { background: rgba(0, 240, 200, 0.06); border-color: rgba(0,240,200,0.3); }
.mz-cell--gate-open .mz-gate-label { color: var(--mauri-soft); }

.mz-hud {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
  font-size: 12px; color: var(--text-dim);
}
.mz-hud-row { letter-spacing: 0.08em; }
.mz-hud-stones { display: flex; gap: 8px; flex-wrap: wrap; }
.mz-hud-stone {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.1em;
  padding: 5px 10px;
  border: 1px solid rgba(0, 240, 200, 0.22);
  border-radius: 6px; color: var(--text-faint);
  background: rgba(6, 12, 22, 0.8);
  transition: all 250ms;
}
.mz-hud-stone--done {
  border-color: rgba(0, 240, 200, 0.6) !important;
  color: var(--mauri-soft) !important;
  background: rgba(0, 240, 200, 0.1) !important;
  box-shadow: 0 0 10px rgba(0, 240, 200, 0.2);
}

/* ======================================================== */
/* TASK 2 — WAIATA WORDLE (Hinengaro)                       */
/* ======================================================== */

.wordle-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.wordle-row  { display: flex; gap: 4px; }
.wordle-cell {
  flex: 1; aspect-ratio: 1; max-width: 50px;
  border: 2px solid rgba(120, 200, 220, 0.2);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px;
  color: var(--text); background: rgba(8, 12, 22, 0.85);
}
.wordle-cell--green  { background:rgba(0,190,110,0.22); border-color:rgba(0,190,110,0.65); color:#7dffc3; box-shadow:0 0 8px rgba(0,190,110,0.2); }
.wordle-cell--yellow { background:rgba(244,192,70,0.18); border-color:rgba(244,192,70,0.6); color:var(--gold-soft); box-shadow:0 0 8px rgba(244,192,70,0.15); }
.wordle-cell--gray   { background:rgba(25,35,55,0.8); border-color:rgba(50,65,85,0.5); color:var(--text-faint); }
.wordle-keyboard { display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.wordle-kb-row   { display:flex; justify-content:center; gap:3px; }
.wordle-key {
  font-family:'Cinzel',serif; font-weight:700; font-size:10px;
  padding:10px 6px; min-width:28px;
  border:1px solid rgba(120,200,220,0.2); border-radius:5px;
  cursor:pointer; background:rgba(14,22,40,0.85); color:var(--text-dim);
  transition:background 140ms;
}
.wordle-key:hover:not(:disabled) { background:rgba(0,240,200,0.1); color:var(--text); }
.wordle-key--wide { min-width:48px; font-size:9px; }
.wordle-key--green  { background:rgba(0,190,110,0.22); border-color:rgba(0,190,110,0.5); color:#7dffc3; }
.wordle-key--yellow { background:rgba(244,192,70,0.18); border-color:rgba(244,192,70,0.5); color:var(--gold-soft); }
.wordle-key--gray   { background:rgba(22,30,50,0.95); border-color:rgba(40,55,75,0.4); color:var(--text-faint); }
.wordle-key:disabled { opacity:0.4; cursor:not-allowed; }

/* ======================================================== */
/* TASK 3 — RIVER STONES RHYTHM (Māui)                      */
/* Real river stone visuals — no square buttons             */
/* ======================================================== */

.rstones-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-bottom: 18px; padding: 10px 0;
}

.rstone {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  cursor: pointer; user-select: none;
  transition: transform 160ms var(--easing), box-shadow 200ms;
  border-radius: 50% / 40%;
  border: none; background: transparent; padding: 0;
}
.rstone--slow {
  width: 76px; height: 62px;
  color: var(--mauri-soft);
  filter: drop-shadow(0 0 6px rgba(0,240,200,0.25));
}
.rstone--quick {
  width: 58px; height: 48px;
  color: var(--gold-soft);
  filter: drop-shadow(0 0 6px rgba(244,192,70,0.22));
}
.rstone-svg {
  width: 100%; height: 100%; display: block;
}
.rstone--slow  .rstone-svg { color: rgba(0, 240, 200, 0.8); }
.rstone--quick .rstone-svg { color: rgba(244, 192, 70, 0.8); }

.rstone-label {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.rstone-num {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; color: rgba(255,255,255,0.15);
}

/* Lit state — stone glows when active during demo/play */
.rstone--lit {
  transform: scale(1.12);
  filter: drop-shadow(0 0 18px currentColor) drop-shadow(0 0 40px currentColor) !important;
}
.rstone--slow.rstone--lit  .rstone-svg { color: var(--mauri); }
.rstone--quick.rstone--lit .rstone-svg { color: var(--gold); }
.rstone--lit .rstone-num   { color: rgba(255,255,255,0.7); }

/* Tapped state — confirmed tap */
.rstone--tapped .rstone-svg {
  color: var(--mauri-soft) !important;
  opacity: 0.7;
}

/* ======================================================== */
/* TASK 3 — FLOWING WAIATA (Hinengaro)                      */
/* ======================================================== */

.river-panel {
  position: relative;
  height: 110px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 240, 200, 0.22);
  background:
    linear-gradient(180deg,
      rgba(0, 30, 50, 0.92) 0%,
      rgba(0, 20, 40, 0.96) 50%,
      rgba(0, 25, 45, 0.92) 100%);
  margin-bottom: 14px;
}

/* Animated ripple shimmer */
.river-ripple {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 60px,
      rgba(0, 240, 200, 0.04) 60px,
      rgba(0, 240, 200, 0.04) 62px
    );
  animation: rippleMove 8s linear infinite;
  pointer-events: none;
}
@keyframes rippleMove {
  from { background-position: 0 0; }
  to   { background-position: 120px 0; }
}

/* Flowing word stones in the river */
.river-word {
  position: absolute;
  transform: translateY(-50%);
  animation: riverFlow var(--dur, 12s) linear var(--delay, 0s) infinite;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.07em;
  color: var(--mauri-soft);
  padding: 8px 14px;
  background: rgba(0, 30, 50, 0.85);
  border: 1px solid rgba(0, 240, 200, 0.35);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(0, 240, 200, 0.15), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 150ms, background 150ms;
  z-index: 2;
}
@keyframes riverFlow {
  from { left: 110%; }
  to   { left: -30%; }
}
.river-word:hover:not(:disabled):not(.river-word--picked) {
  background: rgba(0, 240, 200, 0.18);
  border-color: var(--mauri);
  box-shadow: 0 0 20px rgba(0, 240, 200, 0.3);
}
.river-word--picked {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
  animation-play-state: paused;
}

/* Answer slots below the river */
.waiata-slots {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.waiata-slot {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 10px; min-width: 46px;
  border: 1px dashed rgba(0, 240, 200, 0.25);
  border-radius: 8px;
  background: rgba(6, 12, 24, 0.8);
  transition: border-color 200ms, background 200ms;
}
.waiata-slot__num {
  font-size: 9px; letter-spacing: 0.18em; color: var(--text-faint); margin-bottom: 2px;
}
.waiata-slot__word {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-dim); min-height: 16px; text-align: center;
}
.waiata-slot--filled {
  border-color: rgba(0, 240, 200, 0.5);
  background: rgba(0, 240, 200, 0.06);
}
.waiata-slot--filled .waiata-slot__word { color: var(--mauri-soft); }
/* ---- Generic L2 panel ---- */
.l2-panel {
  border: 1px solid rgba(0, 240, 200, 0.18);
  border-radius: var(--radius);
  background: rgba(6, 12, 24, 0.88);
  padding: 18px 16px;
  margin-bottom: 18px;
}
.l2-panel--placeholder {
  border-color: rgba(244, 192, 70, 0.22);
  background: rgba(10, 10, 20, 0.85);
  text-align: center;
}
.l2-panel__title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 15px; letter-spacing: 0.1em;
  color: var(--gold); margin-bottom: 8px;
}
.l2-panel__desc {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.65; margin-bottom: 14px;
  white-space: pre-line;
}
.l2-placeholder-msg {
  color: var(--text-dim); font-size: 14px; line-height: 1.7;
  padding: 20px 8px;
}
.l2-placeholder-msg code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--gold-soft); font-size: 12px;
}
.l2-status {
  font-size: 13px; margin-top: 12px; min-height: 18px; line-height: 1.5;
}
.l2-status--ok   { color: var(--mauri-soft); }
.l2-status--bad  { color: #ff8e9a; }
.l2-status--info { color: var(--text-dim); }

.l2-hint {
  margin-top: 10px; padding: 10px 14px;
  border: 1px solid rgba(244, 192, 70, 0.28);
  border-radius: var(--radius);
  background: rgba(244, 192, 70, 0.05);
  font-size: 13px; color: var(--gold-soft); line-height: 1.6;
}

/* Reveal card */
.l2-reveal {
  margin-top: 16px;
  border: 1px solid rgba(0, 240, 200, 0.38);
  border-radius: var(--radius);
  background: rgba(0, 240, 200, 0.05);
  padding: 14px 16px;
}
.l2-reveal__title {
  font-family: 'Cinzel', serif; font-size: 14px;
  color: var(--mauri-soft); letter-spacing: 0.07em; margin-bottom: 4px;
}
.l2-reveal__text {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 8px;
}
.l2-reveal__sequence {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 17px; letter-spacing: 0.1em; color: var(--gold);
  word-break: break-word; line-height: 1.5;
  text-shadow: 0 0 18px rgba(244, 192, 70, 0.35);
}
.l2-reveal__order {
  margin-top: 10px; font-size: 13px; line-height: 1.7;
  color: var(--mauri-soft); white-space: pre-line;
}
.l2-poem {
  font-size: 13px; line-height: 1.9; color: var(--text-dim);
  font-style: italic; white-space: pre-line;
  border-left: 2px solid rgba(0, 240, 200, 0.22);
  padding-left: 12px; margin-bottom: 16px;
}

/* Small button variant */
.btn--sm { font-size: 11px; padding: 10px 16px; }

/* ======================================================== */
/* TASK 1 — FOREST MAP (Māui)                               */
/* ======================================================== */

.fmap-grid {
  display: grid; gap: 2px;
  margin: 0 auto 14px;
  max-width: 300px;
}
.fmap-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 18, 36, 0.7);
  border: 1px solid rgba(0, 50, 40, 0.4);
  transition: box-shadow 220ms;
}
.fmap-cell--wall {
  background:
    repeating-linear-gradient(45deg,
      rgba(10,6,4,0.98) 0 4px,
      rgba(18,12,6,0.96) 4px 8px);
  border-color: rgba(30,20,10,0.6);
}
.fmap-cell--landmark .fmap-lm-dot,
.fmap-cell--decoy    .fmap-lm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: 0.6;
  box-shadow: 0 0 5px rgba(244,192,70,0.5);
}
.fmap-cell--decoy .fmap-lm-dot {
  background: rgba(120,80,60,0.7);
  box-shadow: none;
}
.fmap-cell--player {
  background: rgba(0, 240, 200, 0.18) !important;
  border-color: rgba(0, 240, 200, 0.7) !important;
  box-shadow: 0 0 14px rgba(0, 240, 200, 0.4);
}
.fmap-cell--player::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mauri-soft);
  box-shadow: 0 0 8px var(--mauri);
}
.fmap-cell--visited .fmap-lm-dot {
  background: var(--mauri-soft) !important;
  opacity: 1 !important;
  box-shadow: 0 0 8px rgba(0,240,200,0.6) !important;
}
.fmap-progress {
  font-family: 'Cinzel', serif; font-size: 12px;
  letter-spacing: 0.12em; color: var(--gold); margin-bottom: 10px;
  text-align: center;
}

/* Compass controls */
.fmap-compass {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-bottom: 10px;
}
.fmap-compass-row { display: flex; gap: 4px; align-items: center; }
.fmap-compass-center { width: 48px; height: 42px; }
.fmap-btn {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.08em;
  padding: 12px 16px; min-width: 54px;
  background: rgba(244, 192, 70, 0.08);
  border: 1px solid rgba(244, 192, 70, 0.38);
  border-radius: var(--radius); color: var(--gold-soft);
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 100ms;
}
.fmap-btn:hover:not(:disabled) {
  background: rgba(244, 192, 70, 0.2);
  box-shadow: 0 0 14px rgba(244, 192, 70, 0.25);
  transform: translateY(-1px);
}
.fmap-btn:active:not(:disabled) { transform: translateY(0); }
.fmap-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ======================================================== */
/* TASK 1 — LANDMARK PUZZLE (Hinengaro)                     */
/* ======================================================== */

.lm-cards {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-bottom: 14px;
}
.lm-card {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 12px;
  letter-spacing: 0.05em; padding: 9px 12px;
  border: 1px solid rgba(0, 240, 200, 0.28);
  border-radius: 8px; cursor: pointer;
  background: rgba(6, 14, 28, 0.85); color: var(--text-dim);
  transition: background 160ms, border-color 160ms, transform 100ms;
}
.lm-card:hover:not(:disabled):not(.lm-card--used) {
  background: rgba(0, 240, 200, 0.1);
  border-color: rgba(0, 240, 200, 0.55);
  color: var(--text); transform: translateY(-1px);
}
.lm-card--used {
  opacity: 0.3; cursor: not-allowed; text-decoration: line-through;
}
.lm-card:disabled { opacity: 0.3; cursor: not-allowed; }

.lm-slots {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 14px;
}
.lm-slot {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 10px; min-width: 60px;
  border: 1px dashed rgba(244, 192, 70, 0.25);
  border-radius: 8px;
  background: rgba(12, 8, 4, 0.7);
  transition: border-color 200ms;
}
.lm-slot__num {
  font-size: 9px; letter-spacing: 0.2em; color: var(--text-faint);
  margin-bottom: 3px;
}
.lm-slot__name {
  font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 0.04em; color: var(--text-dim); text-align: center;
}
.lm-slot--filled {
  border-color: rgba(0, 240, 200, 0.42);
  background: rgba(0, 240, 200, 0.05);
}
.lm-slot--filled .lm-slot__name { color: var(--mauri-soft); }

.lm-seq-item {
  display: inline-block;
  font-family: 'Cinzel', serif; font-size: 13px;
  color: var(--mauri-soft); margin: 2px 0;
}
.lm-seq-arrow {
  color: var(--text-faint); font-size: 11px; margin: 0 3px;
}

/* ======================================================== */
/* TASK 2 — STONE MAZE (Māui)                               */
/* ======================================================== */

.mz-grid {
  display: grid; gap: 2px;
  margin: 0 auto 14px;
  width: 100%; max-width: 330px;
  box-sizing: border-box; overflow: hidden;
}
.mz-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  /* All floor cells intentionally identical — no path colouring */
  background: rgba(8, 14, 28, 0.75);
  border: 1px solid rgba(20, 35, 55, 0.5);
  font-size: 8px;
  overflow: hidden;
  transition: background 200ms, box-shadow 200ms;
}
@media (max-width: 380px) {
  .mz-grid { gap: 1px; max-width: 100%; }
  .mz-cell { font-size: 6px; }
  .mz-stone-name { font-size: 5px; letter-spacing: 0; }
  .mz-end-mark { font-size: 5px; }
  .mz-gate-label { font-size: 4px; }
  .mz-hud-stone { font-size: 9px; padding: 4px 7px; }
}
.mz-cell--wall {
  background:
    linear-gradient(135deg, rgba(12,8,6,0.98), rgba(20,14,10,0.97));
  border-color: rgba(35,20,10,0.55);
}
.mz-cell--stone {
  background: rgba(0, 240, 200, 0.07);
  border-color: rgba(0, 240, 200, 0.5);
  animation: mauriPulse 2.2s var(--easing) infinite;
}
.mz-cell--stone-taken {
  background: rgba(0, 240, 200, 0.03);
  border-color: rgba(0, 240, 200, 0.2);
  opacity: 0.5;
}
.mz-stone-name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 7px; letter-spacing: 0.06em;
  color: var(--mauri-soft); text-align: center; line-height: 1.2;
}
.mz-cell--end {
  background: rgba(244, 192, 70, 0.1);
  border-color: rgba(244, 192, 70, 0.5);
  animation: mauriPulse 2.5s var(--easing) infinite;
}
.mz-end-mark {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 7px; color: var(--gold); letter-spacing: 0.04em;
}
.mz-cell--player {
  background: rgba(0, 240, 200, 0.18) !important;
  border-color: var(--mauri) !important;
  box-shadow: 0 0 12px rgba(0, 240, 200, 0.35);
}
.mz-cell--player::after {
  content: ''; position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mauri-soft);
  box-shadow: 0 0 8px var(--mauri);
}
.mz-cell--gate {
  background: rgba(180, 100, 20, 0.1);
  border-color: rgba(244, 192, 70, 0.3);
}
.mz-gate-label {
  font-size: 6px; font-family: 'Cinzel', serif;
  letter-spacing: 0.05em; color: rgba(244, 192, 70, 0.6);
  text-align: center; line-height: 1.2;
}
.mz-cell--gate-open { background: rgba(0, 240, 200, 0.06); border-color: rgba(0,240,200,0.3); }
.mz-cell--gate-open .mz-gate-label { color: var(--mauri-soft); }

.mz-hud {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
  font-size: 12px; color: var(--text-dim);
}
.mz-hud-row { letter-spacing: 0.08em; }
.mz-hud-stones { display: flex; gap: 8px; flex-wrap: wrap; }
.mz-hud-stone {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.1em;
  padding: 5px 10px;
  border: 1px solid rgba(0, 240, 200, 0.22);
  border-radius: 6px; color: var(--text-faint);
  background: rgba(6, 12, 22, 0.8);
  transition: all 250ms;
}
.mz-hud-stone--done {
  border-color: rgba(0, 240, 200, 0.6) !important;
  color: var(--mauri-soft) !important;
  background: rgba(0, 240, 200, 0.1) !important;
  box-shadow: 0 0 10px rgba(0, 240, 200, 0.2);
}

/* ======================================================== */
/* TASK 2 — WAIATA WORDLE (Hinengaro)                       */
/* ======================================================== */

.wordle-grid { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.wordle-row  { display: flex; gap: 4px; }
.wordle-cell {
  flex: 1; aspect-ratio: 1; max-width: 50px;
  border: 2px solid rgba(120, 200, 220, 0.2);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 17px;
  color: var(--text); background: rgba(8, 12, 22, 0.85);
}
.wordle-cell--green  { background:rgba(0,190,110,0.22); border-color:rgba(0,190,110,0.65); color:#7dffc3; box-shadow:0 0 8px rgba(0,190,110,0.2); }
.wordle-cell--yellow { background:rgba(244,192,70,0.18); border-color:rgba(244,192,70,0.6); color:var(--gold-soft); box-shadow:0 0 8px rgba(244,192,70,0.15); }
.wordle-cell--gray   { background:rgba(25,35,55,0.8); border-color:rgba(50,65,85,0.5); color:var(--text-faint); }
.wordle-keyboard { display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.wordle-kb-row   { display:flex; justify-content:center; gap:3px; }
.wordle-key {
  font-family:'Cinzel',serif; font-weight:700; font-size:10px;
  padding:10px 6px; min-width:28px;
  border:1px solid rgba(120,200,220,0.2); border-radius:5px;
  cursor:pointer; background:rgba(14,22,40,0.85); color:var(--text-dim);
  transition:background 140ms;
}
.wordle-key:hover:not(:disabled) { background:rgba(0,240,200,0.1); color:var(--text); }
.wordle-key--wide { min-width:48px; font-size:9px; }
.wordle-key--green  { background:rgba(0,190,110,0.22); border-color:rgba(0,190,110,0.5); color:#7dffc3; }
.wordle-key--yellow { background:rgba(244,192,70,0.18); border-color:rgba(244,192,70,0.5); color:var(--gold-soft); }
.wordle-key--gray   { background:rgba(22,30,50,0.95); border-color:rgba(40,55,75,0.4); color:var(--text-faint); }
.wordle-key:disabled { opacity:0.4; cursor:not-allowed; }

/* ======================================================== */
/* TASK 3 — RIVER STONES RHYTHM (Māui)                      */
/* Real river stone visuals — no square buttons             */
/* ======================================================== */

.rstones-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
  margin-bottom: 18px; padding: 10px 0;
}

.rstone {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px;
  cursor: pointer; user-select: none;
  transition: transform 160ms var(--easing), box-shadow 200ms;
  border-radius: 50% / 40%;
  border: none; background: transparent; padding: 0;
}
.rstone--slow {
  width: 76px; height: 62px;
  color: var(--mauri-soft);
  filter: drop-shadow(0 0 6px rgba(0,240,200,0.25));
}
.rstone--quick {
  width: 58px; height: 48px;
  color: var(--gold-soft);
  filter: drop-shadow(0 0 6px rgba(244,192,70,0.22));
}
.rstone-svg {
  width: 100%; height: 100%; display: block;
}
.rstone--slow  .rstone-svg { color: rgba(0, 240, 200, 0.8); }
.rstone--quick .rstone-svg { color: rgba(244, 192, 70, 0.8); }

.rstone-label {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.rstone-num {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; color: rgba(255,255,255,0.15);
}

/* Lit state — stone glows when active during demo/play */
.rstone--lit {
  transform: scale(1.12);
  filter: drop-shadow(0 0 18px currentColor) drop-shadow(0 0 40px currentColor) !important;
}
.rstone--slow.rstone--lit  .rstone-svg { color: var(--mauri); }
.rstone--quick.rstone--lit .rstone-svg { color: var(--gold); }
.rstone--lit .rstone-num   { color: rgba(255,255,255,0.7); }

/* Tapped state — confirmed tap */
.rstone--tapped .rstone-svg {
  color: var(--mauri-soft) !important;
  opacity: 0.7;
}

/* ======================================================== */
/* TASK 3 — FLOWING WAIATA (Hinengaro)                      */
/* ======================================================== */

.river-panel {
  position: relative;
  height: 110px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 240, 200, 0.22);
  background:
    linear-gradient(180deg,
      rgba(0, 30, 50, 0.92) 0%,
      rgba(0, 20, 40, 0.96) 50%,
      rgba(0, 25, 45, 0.92) 100%);
  margin-bottom: 14px;
}

/* Animated ripple shimmer */
.river-ripple {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 60px,
      rgba(0, 240, 200, 0.04) 60px,
      rgba(0, 240, 200, 0.04) 62px
    );
  animation: rippleMove 8s linear infinite;
  pointer-events: none;
}
@keyframes rippleMove {
  from { background-position: 0 0; }
  to   { background-position: 120px 0; }
}

/* Flowing word stones in the river */
.river-word {
  position: absolute;
  transform: translateY(-50%);
  animation: riverFlow var(--dur, 12s) linear var(--delay, 0s) infinite;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.07em;
  color: var(--mauri-soft);
  padding: 8px 14px;
  background: rgba(0, 30, 50, 0.85);
  border: 1px solid rgba(0, 240, 200, 0.35);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(0, 240, 200, 0.15), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color 150ms, background 150ms;
  z-index: 2;
}
@keyframes riverFlow {
  from { left: 110%; }
  to   { left: -30%; }
}
.river-word:hover:not(:disabled):not(.river-word--picked) {
  background: rgba(0, 240, 200, 0.18);
  border-color: var(--mauri);
  box-shadow: 0 0 20px rgba(0, 240, 200, 0.3);
}
.river-word--picked {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
  animation-play-state: paused;
}

/* Answer slots below the river */
.waiata-slots {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.waiata-slot {
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 10px; min-width: 46px;
  border: 1px dashed rgba(0, 240, 200, 0.25);
  border-radius: 8px;
  background: rgba(6, 12, 24, 0.8);
  transition: border-color 200ms, background 200ms;
}
.waiata-slot__num {
  font-size: 9px; letter-spacing: 0.18em; color: var(--text-faint); margin-bottom: 2px;
}
.waiata-slot__word {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-dim); min-height: 16px; text-align: center;
}
.waiata-slot--filled {
  border-color: rgba(0, 240, 200, 0.5);
  background: rgba(0, 240, 200, 0.06);
}
.waiata-slot--filled .waiata-slot__word { color: var(--mauri-soft); }


/* =============================================================
   LEVEL 3 — Ngā Mahi a Māui · The Deeds of Māui
   Cinematic Māori action level:
   bold · mythic · glowing · dramatic · escape-room quality
   Palette: sun-gold, deep-ocean teal, fire-ember orange, mauri
   ============================================================= */

/* ── L3 extra tokens ── */
:root {
  --l3-fire:      #ff5a1a;
  --l3-fire-soft: #ffb87a;
  --l3-coal:      #2a0e00;
}

/* ── Shared L3 keyframes ── */
@keyframes l3SunRace {
  from { left: 0; }
  to   { left: calc(100% - 44px); }
}
@keyframes l3AnchorGlow {
  0%,100% { box-shadow: 0 0 12px rgba(244,192,70,0.45); }
  50%      { box-shadow: 0 0 32px rgba(244,192,70,0.85), 0 0 64px rgba(244,192,70,0.35); }
}
@keyframes l3AnchorShake {
  0%,100% { transform: translateX(0) rotate(0); }
  12%  { transform: translateX(-6px) rotate(-2deg); }
  28%  { transform: translateX(7px)  rotate(2deg);  }
  44%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px);  }
  76%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px);  }
}
@keyframes l3HookPulse {
  0%,100% { box-shadow: 0 0 10px rgba(0,240,200,0.55); }
  50%      { box-shadow: 0 0 28px rgba(0,240,200,0.95), 0 0 55px rgba(0,240,200,0.45); }
}
@keyframes l3LandPulse {
  0%   { box-shadow: 0 0 12px rgba(244,192,70,0.3); }
  100% { box-shadow: 0 0 36px rgba(244,192,70,0.85), 0 0 70px rgba(244,192,70,0.45); }
}
@keyframes l3FlameFlicker {
  0%,100% { transform: scaleY(1);    opacity: 0.9; }
  35%      { transform: scaleY(1.08); opacity: 1;   }
  65%      { transform: scaleY(0.96); opacity: 0.85; }
}
@keyframes l3EmberError {
  0%,100% { transform: translateX(0); filter: brightness(1); }
  14% { transform: translateX(-5px) rotate(-1.5deg); filter: brightness(0.45) saturate(0.2); }
  30% { transform: translateX(6px)  rotate(1.5deg);  filter: brightness(0.45) saturate(0.2); }
  46% { transform: translateX(-4px); filter: brightness(0.55); }
  62% { transform: translateX(4px);  filter: brightness(0.55); }
  78% { transform: translateX(-2px); }
  92% { transform: translateX(2px);  }
}
@keyframes l3DirError {
  0%,100% { transform: scale(1); }
  20% { transform: scale(0.93); }
  45% { transform: scale(1.06); }
  70% { transform: scale(0.97); }
}
@keyframes l3PullPulse {
  0%,100% { box-shadow: 0 0 20px rgba(244,192,70,0.55), 0 0 44px rgba(255,90,26,0.3); transform: scale(1); }
  50%      { box-shadow: 0 0 44px rgba(244,192,70,0.85), 0 0 90px rgba(255,90,26,0.55); transform: scale(1.025); }
}
@keyframes l3RevealEmerge {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}


/* ═══════════════════════════════════════════════════════════
   TASK 1 — SUN ANCHORS (Māui) & SYMBOL ORDER (Hinengaro)
   Sky chamber: racing sun, carved rope anchors, gold glow
   ═══════════════════════════════════════════════════════════ */

/* Sky-themed panel override */
.l3-sky-panel {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(244,192,70,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(60,20,100,0.2) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,6,24,0.97) 0%, rgba(4,4,16,0.99) 100%);
  border-color: rgba(244,192,70,0.28);
  box-shadow: 0 0 50px rgba(244,192,70,0.07), inset 0 0 70px rgba(50,10,80,0.1);
}

/* Sky chamber — sun track viewport */
.l3-sky-chamber {
  position: relative;
  height: 80px;
  margin: 4px 0 16px;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(244,192,70,0.07) 0%, transparent 55%),
    linear-gradient(180deg, rgba(18,14,44,0.92) 0%, rgba(6,4,18,0.97) 100%);
  border: 1px solid rgba(244,192,70,0.18);
}
/* Star scatter */
.l3-sky-chamber::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 9%  28%, rgba(255,255,255,0.65), transparent 80%),
    radial-gradient(1px 1px at 28% 65%, rgba(255,255,255,0.45), transparent 80%),
    radial-gradient(1px 1px at 52% 22%, rgba(255,255,255,0.55), transparent 80%),
    radial-gradient(1px 1px at 73% 70%, rgba(255,255,255,0.5),  transparent 80%),
    radial-gradient(1px 1px at 91% 38%, rgba(255,255,255,0.55), transparent 80%),
    radial-gradient(1px 1px at 42% 82%, rgba(255,255,255,0.4),  transparent 80%);
}

/* Sun path rail */
.l3-sky-track {
  position: absolute;
  left: 14px; right: 14px;
  top: 50%; transform: translateY(-50%);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(244,192,70,0.32) 20%, rgba(244,192,70,0.32) 80%, transparent 100%);
}

/* Racing sun */
.l3-sun {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  font-size: 30px; line-height: 1;
  color: var(--gold);
  text-shadow:
    0 0 10px rgba(244,192,70,0.95),
    0 0 28px rgba(244,192,70,0.7),
    0 0 60px rgba(255,180,30,0.45);
  animation: l3SunRace 3.8s linear infinite;
  will-change: left;
  cursor: default;
  transition: text-shadow 1.4s var(--easing);
}
/* Sun slows when all anchors bound */
.l3-sun--slow {
  animation-duration: 30s !important;
  animation-timing-function: cubic-bezier(0.9, 0, 1, 1) !important;
  text-shadow:
    0 0 20px rgba(244,192,70,1),
    0 0 55px rgba(244,192,70,0.85),
    0 0 110px rgba(244,192,70,0.55),
    0 0 220px rgba(255,150,20,0.35) !important;
  filter: drop-shadow(0 0 22px rgba(244,192,70,0.8));
}

/* Rope-bound counter */
.l3-rope-progress {
  position: absolute;
  bottom: 7px; right: 12px;
  font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244,192,70,0.65);
}

/* Anchor button grid — 2 columns */
.l3-anchor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

/* Carved rope anchor */
.l3-anchor-btn {
  position: relative;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 20px 12px 17px;
  border-radius: var(--radius);
  border: 2px solid rgba(244,192,70,0.32);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,192,70,0.13) 0%, transparent 65%),
    linear-gradient(180deg, rgba(34,22,5,0.96) 0%, rgba(12,7,1,0.99) 100%);
  color: rgba(244,192,70,0.82);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(244,192,70,0.1);
  transition: border-color 200ms, box-shadow 220ms, transform 140ms, background 220ms, color 200ms;
}
/* Carved rune accent */
.l3-anchor-btn::before {
  content: '✦';
  position: absolute; top: 7px; right: 9px;
  font-size: 8px; color: rgba(244,192,70,0.22); pointer-events: none;
}
.l3-anchor-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg, transparent 0, transparent 9px,
    rgba(255,255,255,0.016) 9px, rgba(255,255,255,0.016) 10px
  );
  pointer-events: none;
}
.l3-anchor-btn:hover:not(:disabled) {
  border-color: rgba(244,192,70,0.7);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,192,70,0.24) 0%, transparent 65%),
    linear-gradient(180deg, rgba(52,34,6,0.96) 0%, rgba(18,11,1,0.99) 100%);
  box-shadow: 0 6px 26px rgba(0,0,0,0.5), 0 0 22px rgba(244,192,70,0.32), inset 0 1px 0 rgba(244,192,70,0.18);
  transform: translateY(-2px);
  color: var(--gold-soft);
}
.l3-anchor-btn:active:not(:disabled) { transform: translateY(0); }
.l3-anchor-btn:disabled { opacity: 0.44; cursor: not-allowed; }

/* Correctly activated anchor — teal/mauri pulse */
.l3-anchor-btn--done {
  border-color: rgba(0,240,200,0.7) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,240,200,0.22) 0%, transparent 65%),
    linear-gradient(180deg, rgba(0,28,22,0.96) 0%, rgba(0,10,8,0.99) 100%) !important;
  color: var(--mauri-soft) !important;
  animation: l3AnchorGlow 2.2s var(--easing) infinite !important;
  cursor: not-allowed;
}
.l3-anchor-btn--done::before { content: '✓'; color: var(--mauri-soft); opacity: 0.75; }

/* Wrong anchor — shake + red cold-flash */
.l3-anchor-btn--error {
  border-color: rgba(255,93,108,0.72) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,93,108,0.2) 0%, transparent 65%),
    linear-gradient(180deg, rgba(48,4,8,0.96) 0%, rgba(18,1,3,0.99) 100%) !important;
  color: #ff8e9a !important;
  box-shadow: 0 0 28px rgba(255,93,108,0.48) !important;
  animation: l3AnchorShake 0.52s var(--easing) both !important;
}

/* ── Symbol Order tiles (Hinengaro) ── */
.l3-sym-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.l3-sym-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 15px 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(244,192,70,0.26);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,192,70,0.09) 0%, transparent 60%),
    rgba(14, 9, 2, 0.94);
  cursor: pointer; text-align: center;
  transition: border-color 180ms, box-shadow 200ms, transform 130ms, opacity 200ms;
}
.l3-sym-tile:hover:not(:disabled):not(.l3-sym-tile--used) {
  border-color: rgba(244,192,70,0.65);
  box-shadow: 0 0 18px rgba(244,192,70,0.26);
  transform: translateY(-1px);
}
.l3-sym-tile:active:not(:disabled):not(.l3-sym-tile--used) { transform: translateY(0); }
.l3-sym-tile__sym {
  font-size: 26px; line-height: 1; display: block;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(244,192,70,0.65);
}
.l3-sym-tile__name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em; display: block;
  color: var(--gold-soft);
}
.l3-sym-tile__clue {
  font-size: 11px; line-height: 1.5; display: block;
  color: var(--text-dim);
}
.l3-sym-tile--used {
  opacity: 0.28; cursor: not-allowed;
  border-color: rgba(244,192,70,0.08) !important;
  box-shadow: none !important; transform: none !important;
}
.l3-sym-tile:disabled { opacity: 0.28; cursor: not-allowed; }

/* Symbol order slots — 4 across */
.l3-sym-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 10px;
}
.l3-sym-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 6px; min-height: 60px;
  border: 1px dashed rgba(244,192,70,0.28);
  border-radius: var(--radius);
  background: rgba(10,6,1,0.88);
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
  text-align: center;
}
.l3-sym-slot__num {
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(120,80,20,0.5); margin-bottom: 3px;
}
.l3-sym-slot__name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.07em;
  color: rgba(120,80,20,0.45);
}
.l3-sym-slot--filled {
  border-color: rgba(244,192,70,0.6); border-style: solid;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,192,70,0.12) 0%, transparent 65%),
    rgba(18,10,1,0.92);
  box-shadow: 0 0 12px rgba(244,192,70,0.22);
}
.l3-sym-slot--filled .l3-sym-slot__name { color: var(--gold-soft); }


/* ═══════════════════════════════════════════════════════════
   TASK 2 — HOOK PATH (Māui) & ROUTE DECODER (Hinengaro)
   Ocean map: dark glowing sea, hook trail, LAND target
   ═══════════════════════════════════════════════════════════ */

.l3-ocean-panel {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,200,255,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 8% 50%,   rgba(0,70,120,0.12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(2,12,26,0.97) 0%, rgba(1,5,14,0.99) 100%);
  border-color: rgba(0,180,240,0.22);
  box-shadow: 0 0 50px rgba(0,90,160,0.07), inset 0 0 90px rgba(0,30,70,0.22);
}

/* HUD: moves counter */
.l3-hook-hud {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Cinzel', serif; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(0,210,250,0.6);
  margin-bottom: 10px; padding: 5px 2px;
}
#hookPullHud {
  color: var(--gold-soft);
  text-shadow: 0 0 14px rgba(244,192,70,0.6);
  animation: l3AnchorGlow 1.5s var(--easing) infinite;
}

/* Ocean grid container */
.l3-ocean-grid {
  display: grid;
  gap: 4px;
  margin: 0 auto 14px;
  max-width: 360px;
}

/* Base ocean cell — subtle wave lines */
.l3-ocean-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0, transparent 14px,
      rgba(0,150,200,0.022) 14px, rgba(0,150,200,0.022) 15px
    ),
    rgba(1,12,28,0.92);
  border: 1px solid rgba(0,110,180,0.2);
  transition: background 280ms, box-shadow 280ms, border-color 280ms;
}

/* Hook current position — bright teal orb */
.l3-ocean-cell--hook {
  background:
    radial-gradient(circle, rgba(0,240,200,0.38) 0%, rgba(0,90,160,0.18) 55%, transparent 100%),
    rgba(0,18,38,0.92) !important;
  border-color: rgba(0,240,200,0.82) !important;
  box-shadow:
    0 0 22px rgba(0,240,200,0.75),
    0 0 50px rgba(0,240,200,0.35),
    inset 0 0 12px rgba(0,240,200,0.22) !important;
  animation: l3HookPulse 1.1s var(--easing) infinite !important;
}

/* Trail — fading teal wake */
.l3-ocean-cell--trail {
  background:
    radial-gradient(circle, rgba(0,160,190,0.2) 0%, transparent 70%),
    rgba(0,14,30,0.92) !important;
  border-color: rgba(0,160,190,0.42) !important;
  box-shadow: 0 0 8px rgba(0,160,190,0.28) !important;
}

/* LAND destination — gold pulse */
.l3-ocean-cell--land {
  background:
    radial-gradient(ellipse at 50% 65%, rgba(244,192,70,0.26) 0%, rgba(60,38,8,0.72) 60%, transparent 100%),
    rgba(18,12,2,0.94) !important;
  border: 2px solid rgba(244,192,70,0.58) !important;
  animation: l3LandPulse 2s var(--easing) infinite alternate !important;
}
.l3-land-mark {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--gold);
  text-shadow: 0 0 9px rgba(244,192,70,0.8);
}

/* Directional cross */
.l3-dir-cross {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  margin-bottom: 10px;
}
.l3-dir-cross__row { display: flex; gap: 5px; align-items: center; }
.l3-dir-cross__center { width: 64px; height: 48px; }

/* Direction buttons — carved ocean runes */
.l3-dir-btn {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em;
  padding: 14px 12px; width: 92px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,180,240,0.35);
  background: linear-gradient(180deg, rgba(0,36,72,0.88) 0%, rgba(0,14,32,0.96) 100%);
  color: rgba(0,210,250,0.88);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.45);
  transition: border-color 160ms, box-shadow 180ms, transform 110ms, background 160ms, color 160ms;
}
.l3-dir-btn:hover:not(:disabled) {
  border-color: rgba(0,210,250,0.72);
  background: linear-gradient(180deg, rgba(0,55,110,0.9) 0%, rgba(0,20,44,0.96) 100%);
  box-shadow: 0 0 20px rgba(0,190,240,0.32), 0 4px 16px rgba(0,0,0,0.45);
  transform: translateY(-2px);
  color: #8cf6ff;
}
.l3-dir-btn:active:not(:disabled) { transform: translateY(0); }
.l3-dir-btn:disabled { opacity: 0.34; cursor: not-allowed; }

/* Wrong direction — cold error */
.l3-dir-btn--error {
  border-color: rgba(255,93,108,0.65) !important;
  background: linear-gradient(180deg, rgba(55,4,8,0.92) 0%, rgba(22,1,3,0.97) 100%) !important;
  color: #ff8e9a !important;
  box-shadow: 0 0 22px rgba(255,93,108,0.42) !important;
  animation: l3DirError 0.38s var(--easing) both !important;
}

/* PULL button — gold + fire drama */
.l3-pull-btn {
  background:
    linear-gradient(180deg,
      rgba(244,192,70,0.36) 0%,
      rgba(180,90,14,0.34) 50%,
      rgba(55,18,0,0.45) 100%) !important;
  border-color: rgba(244,192,70,0.72) !important;
  color: var(--gold-soft) !important;
  font-size: 16px !important;
  letter-spacing: 0.22em !important;
  text-shadow: 0 0 18px rgba(244,192,70,0.7) !important;
  animation: l3PullPulse 1.7s var(--easing) infinite !important;
}
.l3-pull-btn:hover:not(:disabled) {
  background:
    linear-gradient(180deg,
      rgba(244,192,70,0.55) 0%,
      rgba(200,110,20,0.5)  50%,
      rgba(75,25,0,0.55)    100%) !important;
  transform: translateY(-3px) !important;
}

/* Route decoder tiles (Hinengaro) — 3 columns */
.l3-route-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 14px;
}
.l3-route-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px 10px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,160,210,0.28);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,130,190,0.09) 0%, transparent 60%),
    rgba(2,9,20,0.93);
  cursor: pointer; text-align: center;
  transition: border-color 180ms, box-shadow 200ms, transform 130ms, opacity 200ms;
}
.l3-route-tile:hover:not(:disabled):not(.l3-route-tile--used) {
  border-color: rgba(0,210,250,0.62);
  box-shadow: 0 0 16px rgba(0,190,240,0.24);
  transform: translateY(-1px);
}
.l3-route-tile__sym {
  font-size: 22px; line-height: 1; display: block;
  color: rgba(0,210,250,0.9);
  text-shadow: 0 0 12px rgba(0,180,240,0.55);
}
.l3-route-tile__move {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  display: block; color: rgba(0,210,250,0.82);
}
.l3-route-tile__clue {
  font-size: 10px; line-height: 1.5; display: block;
  color: var(--text-dim);
}
.l3-route-tile--used {
  opacity: 0.26; cursor: not-allowed;
  border-color: rgba(0,160,210,0.08) !important;
  box-shadow: none !important; transform: none !important;
}
.l3-route-tile:disabled { opacity: 0.26; cursor: not-allowed; }

/* Route decode slots — 6 across */
.l3-route-slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px; margin-bottom: 10px;
}
.l3-route-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 4px; min-height: 52px;
  border: 1px dashed rgba(0,160,210,0.3);
  border-radius: 8px;
  background: rgba(1,7,18,0.9);
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
  text-align: center;
}
.l3-route-slot__num {
  font-size: 9px; letter-spacing: 0.2em; color: var(--text-faint); margin-bottom: 2px;
}
.l3-route-slot__val {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 10px; letter-spacing: 0.1em;
  color: rgba(0,160,200,0.4);
}
.l3-route-slot--filled {
  border-color: rgba(0,210,250,0.58); border-style: solid;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,190,240,0.11) 0%, transparent 65%),
    rgba(1,10,24,0.92);
  box-shadow: 0 0 9px rgba(0,190,240,0.22);
}
.l3-route-slot--filled .l3-route-slot__val { color: rgba(0,215,255,0.9); }


/* ═══════════════════════════════════════════════════════════
   TASK 3 — FIRE SPARKS (Māui) & EMBER CLUES (Hinengaro)
   Ember chamber: warm dark, fire-glow stones, flame meter
   ═══════════════════════════════════════════════════════════ */

/* Ember-themed panel override */
.l3-ember-panel {
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255,80,20,0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 18% 60%,  rgba(160,40,0,0.1) 0%, transparent 50%),
    linear-gradient(180deg, rgba(16,5,1,0.98) 0%, rgba(6,2,0,1) 100%);
  border-color: rgba(220,80,18,0.28);
  box-shadow:
    0 0 60px rgba(220,60,0,0.1),
    inset 0 -50px 90px rgba(200,40,0,0.07);
}

/* Flame meter — 4 bar segments */
.l3-flame-meter {
  display: flex; gap: 8px; justify-content: center;
  margin: 8px 0 18px;
  padding: 10px 16px;
  background: rgba(8,3,0,0.88);
  border-radius: var(--radius);
  border: 1px solid rgba(70,28,4,0.55);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
}
.l3-flame-bar {
  flex: 1; max-width: 64px; height: 40px;
  border-radius: 6px 6px 3px 3px;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(38,14,4,0.92) 0%, rgba(16,5,1,0.97) 100%);
  border: 1px solid rgba(80,36,8,0.52);
  transition: background 450ms var(--easing), box-shadow 450ms var(--easing), border-color 450ms;
}
.l3-flame-bar::before {
  content: '◉';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  color: rgba(80,36,8,0.48);
  transition: color 450ms, text-shadow 450ms;
}
.l3-flame-bar--lit {
  background:
    linear-gradient(180deg,
      rgba(255,210,50,0.95)  0%,
      rgba(255,120,14,0.92)  30%,
      rgba(210,50,0,0.88)    65%,
      rgba(110,18,0,0.7)     100%) !important;
  border-color: rgba(255,165,38,0.72) !important;
  box-shadow:
    0 0 22px rgba(255,120,14,0.75),
    0 0 55px rgba(255,70,0,0.45),
    inset 0 0 12px rgba(255,210,50,0.28) !important;
  animation: l3FlameFlicker 0.85s var(--easing) infinite !important;
}
.l3-flame-bar--lit::before {
  color: rgba(255,248,210,0.92) !important;
  text-shadow: 0 0 10px rgba(255,210,50,0.95) !important;
}

/* Ember stone grid — 3 columns */
.l3-ember-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 14px;
}

/* Base ember stone — neutral appearance (true/false revealed only by tap feedback) */
.l3-ember-stone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 18px 10px 14px;
  border-radius: var(--radius);
  border: 2px solid rgba(90,80,60,0.42);
  cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, rgba(22,18,12,0.96) 0%, rgba(12,10,7,0.99) 100%);
  box-shadow: 0 3px 12px rgba(0,0,0,0.50);
  transition: transform 150ms, box-shadow 200ms, border-color 200ms, background 220ms;
}
.l3-ember-stone:hover:not(:disabled) {
  border-color: rgba(130,115,85,0.65);
  background: linear-gradient(180deg, rgba(34,28,18,0.97) 0%, rgba(18,14,8,0.99) 100%);
  box-shadow: 0 0 16px rgba(160,130,70,0.18);
  transform: translateY(-1px);
}
/* Stone texture */
.l3-ember-stone::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    135deg, transparent 0, transparent 9px,
    rgba(255,255,255,0.015) 9px, rgba(255,255,255,0.015) 10px
  );
}

/* True fire-starter stone — warm amber glow */
.l3-ember-stone--true {
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255,110,24,0.22) 0%, transparent 65%),
    linear-gradient(180deg, rgba(38,16,3,0.96) 0%, rgba(18,6,1,0.99) 100%);
  border-color: rgba(190,72,14,0.5);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 0 10px rgba(160,50,8,0.22);
}
.l3-ember-stone--true:hover:not(:disabled) {
  border-color: rgba(255,130,32,0.75);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,150,40,0.32) 0%, transparent 65%),
    linear-gradient(180deg, rgba(58,22,3,0.96) 0%, rgba(26,8,1,0.99) 100%);
  box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 24px rgba(210,90,14,0.46);
  transform: translateY(-2px) scale(1.02);
}

/* False/decoy stone — cold dead */
.l3-ember-stone--false {
  background: linear-gradient(180deg, rgba(15,19,30,0.96) 0%, rgba(7,9,16,0.99) 100%);
  border-color: rgba(44,60,90,0.38);
  box-shadow: 0 3px 12px rgba(0,0,0,0.45);
}
.l3-ember-stone--false:hover:not(:disabled) {
  border-color: rgba(55,75,120,0.55);
  box-shadow: 0 0 12px rgba(34,50,90,0.26);
  transform: translateY(-1px);
}

.l3-ember-stone__sym {
  font-size: 24px; line-height: 1; display: block;
  color: rgba(155,140,105,0.75);
  transition: color 200ms, text-shadow 200ms;
}

.l3-ember-stone__name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; display: block;
  color: rgba(155,140,105,0.75);
}

/* Correctly struck — blazing */
.l3-ember-stone--struck {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,210,55,0.38) 0%, rgba(190,70,5,0.28) 50%, transparent 80%),
    linear-gradient(180deg, rgba(48,18,0,0.96) 0%, rgba(18,6,0,0.99) 100%) !important;
  border-color: rgba(255,200,55,0.78) !important;
  box-shadow:
    0 0 26px rgba(255,150,16,0.68),
    0 0 56px rgba(210,70,0,0.38),
    inset 0 0 15px rgba(255,210,55,0.18) !important;
  cursor: not-allowed;
}
.l3-ember-stone--struck .l3-ember-stone__sym  { color: var(--gold-soft) !important; text-shadow: 0 0 18px rgba(255,200,40,0.92) !important; }
.l3-ember-stone--struck .l3-ember-stone__name { color: var(--gold-soft) !important; }

/* Error flash — cold shock */
.l3-ember-stone--error {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,44,100,0.3) 0%, transparent 65%),
    linear-gradient(180deg, rgba(5,8,20,0.97) 0%, rgba(1,3,10,0.99) 100%) !important;
  border-color: rgba(70,100,185,0.62) !important;
  box-shadow: 0 0 22px rgba(50,85,165,0.42) !important;
  animation: l3EmberError 0.48s var(--easing) both !important;
}
.l3-ember-stone--error .l3-ember-stone__sym  { color: rgba(70,100,185,0.72) !important; text-shadow: none !important; }
.l3-ember-stone--error .l3-ember-stone__name { color: rgba(70,100,185,0.72) !important; }


/* ── Ember Clue Cards (Hinengaro) — 2 columns ── */
.l3-ember-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 14px;
}
/* Base ember card — neutral appearance (true/false revealed only by tap feedback) */
.l3-ember-card {
  display: flex; flex-direction: column;
  padding: 12px 10px; border-radius: var(--radius);
  border: 1px solid rgba(85,75,55,0.40);
  cursor: pointer; text-align: left; position: relative; overflow: hidden;
  background: rgba(18,15,10,0.94);
  box-shadow: 0 3px 10px rgba(0,0,0,0.44);
  transition: transform 150ms, box-shadow 200ms, border-color 200ms, background 220ms;
}
.l3-ember-card:hover:not(:disabled):not(.l3-ember-card--struck):not(.l3-ember-card--error) {
  border-color: rgba(125,110,80,0.62);
  background: rgba(26,22,14,0.96);
  box-shadow: 0 0 12px rgba(150,125,70,0.16);
  transform: translateY(-1px);
}

/* True card — warm ember */
.l3-ember-card--true {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,90,18,0.14) 0%, transparent 58%),
    rgba(20,7,1,0.93);
  border-color: rgba(170,62,14,0.42);
  box-shadow: 0 3px 14px rgba(0,0,0,0.48);
}
.l3-ember-card--true:hover:not(:disabled):not(.l3-ember-card--struck) {
  border-color: rgba(255,120,34,0.65);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,130,34,0.24) 0%, transparent 58%),
    rgba(26,9,1,0.94);
  box-shadow: 0 0 20px rgba(190,72,8,0.36);
  transform: translateY(-1px);
}

/* False card — cold dead */
.l3-ember-card--false {
  background: rgba(8,10,19,0.93);
  border-color: rgba(38,48,70,0.42);
  box-shadow: 0 3px 10px rgba(0,0,0,0.42);
}
.l3-ember-card--false:hover:not(:disabled):not(.l3-ember-card--error) {
  border-color: rgba(48,65,100,0.58);
  box-shadow: 0 0 10px rgba(28,44,85,0.22);
  transform: translateY(-1px);
}

.l3-ember-card__header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.l3-ember-card__sym {
  font-size: 20px; line-height: 1; flex-shrink: 0;
  color: rgba(148,132,98,0.72);
}

.l3-ember-card__name {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(148,132,98,0.72);
}

.l3-ember-card__clue {
  font-size: 11px; line-height: 1.55;
  color: var(--text-dim);
}

/* Correctly tapped card */
.l3-ember-card--struck {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,200,55,0.22) 0%, transparent 55%),
    rgba(26,10,0,0.95) !important;
  border-color: rgba(255,175,38,0.65) !important;
  box-shadow: 0 0 22px rgba(255,130,16,0.52), inset 0 0 12px rgba(255,200,55,0.1) !important;
  cursor: not-allowed;
}
.l3-ember-card--struck .l3-ember-card__name { color: var(--gold-soft) !important; }
.l3-ember-card--struck .l3-ember-card__sym  { color: var(--gold-soft) !important; text-shadow: 0 0 14px rgba(255,200,40,0.85) !important; }

/* Error flash */
.l3-ember-card--error {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,38,88,0.3) 0%, transparent 65%),
    rgba(3,5,14,0.97) !important;
  border-color: rgba(55,85,155,0.58) !important;
  box-shadow: 0 0 18px rgba(38,72,155,0.36) !important;
  animation: l3EmberError 0.48s var(--easing) both !important;
}
.l3-ember-card--error .l3-ember-card__name { color: rgba(70,100,175,0.72) !important; }
.l3-ember-card--error .l3-ember-card__sym  { color: rgba(55,85,155,0.62) !important; }

/* Ember order slots (Hinengaro) */
.l3-ember-order-row { margin-top: 10px; }
.l3-ember-order-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-top: 6px;
}
.l3-ember-order-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 6px; min-height: 58px;
  border: 1px dashed rgba(170,72,14,0.36);
  border-radius: var(--radius);
  background: rgba(9,3,0,0.9);
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
  text-align: center;
}
.l3-ember-order-slot__num {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(110,52,14,0.55); margin-bottom: 3px;
}
.l3-ember-order-slot__val {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.1em;
  color: rgba(110,52,14,0.48); min-height: 16px;
}
.l3-ember-order-slot--filled {
  border-color: rgba(255,150,34,0.56); border-style: solid;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,110,14,0.14) 0%, transparent 60%),
    rgba(13,5,0,0.93);
  box-shadow: 0 0 12px rgba(210,90,14,0.26);
}
.l3-ember-order-slot--filled .l3-ember-order-slot__val { color: rgba(255,175,55,0.92); }


/* ═══════════════════════════════════════════════════════════
   L3 REVEAL CARD — cinematic entrance, large glowing word
   ═══════════════════════════════════════════════════════════ */
.l3-sky-panel   .l2-reveal,
.l3-ocean-panel .l2-reveal,
.l3-ember-panel .l2-reveal {
  border-color: rgba(244,192,70,0.55) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,192,70,0.1) 0%, transparent 55%),
    rgba(12,7,1,0.96) !important;
  box-shadow: 0 0 44px rgba(244,192,70,0.22), 0 0 90px rgba(244,192,70,0.09);
  animation: l3RevealEmerge 650ms var(--easing) both !important;
}
.l3-sky-panel   .l2-reveal__sequence,
.l3-ocean-panel .l2-reveal__sequence,
.l3-ember-panel .l2-reveal__sequence {
  font-size: 30px !important;
  letter-spacing: 0.22em !important;
  color: var(--gold) !important;
  text-shadow:
    0 0 22px rgba(244,192,70,0.95),
    0 0 55px rgba(244,192,70,0.55),
    0 0 110px rgba(255,160,18,0.35) !important;
}


/* ═══════════════════════════════════════════════════════════
   L3 RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .l3-anchor-grid    { grid-template-columns: 1fr 1fr; }
  .l3-sym-tiles      { grid-template-columns: 1fr 1fr; }
  .l3-sym-slots      { grid-template-columns: repeat(2, 1fr); }
  .l3-route-tiles    { grid-template-columns: repeat(2, 1fr); }
  .l3-route-slots    { grid-template-columns: repeat(3, 1fr); }
  .l3-ember-grid     { grid-template-columns: repeat(2, 1fr); }
  .l3-ember-cards    { grid-template-columns: 1fr; }
  .l3-ember-order-slots { grid-template-columns: repeat(2, 1fr); }
  .l3-dir-btn        { width: 76px; padding: 12px 8px; font-size: 11px; }
  .l3-dir-cross__center { width: 48px; height: 40px; }
  .l3-ocean-grid     { max-width: 300px; }
  .l3-flame-bar      { height: 34px; }
}


/* ======================================================== */
/* LEVEL 3 BIRD VOICES  (Task 3 — Phase 5A)                  */
/* ======================================================== */

.bird-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 240, 200, 0.08), transparent 58%),
    rgba(6, 12, 24, 0.9);
}

.bird-order-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 14px;
}

.bird-order-chip,
.bird-order-dot {
  border: 1px solid rgba(0, 240, 200, 0.22);
  background: rgba(0, 30, 45, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.bird-order-chip {
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.bird-order-chip--active {
  border-color: var(--gold);
  color: var(--gold-soft);
}

.bird-order-chip--done {
  border-color: var(--mauri);
  color: var(--mauri-soft);
  background: rgba(0, 240, 200, 0.1);
}

.bird-order-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
}

.bird-order-dot--active {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(244, 192, 70, 0.4);
}

.bird-order-dot--done {
  border-color: var(--mauri);
  background: var(--mauri);
  box-shadow: 0 0 14px rgba(0, 240, 200, 0.45);
}

.bird-path-grid {
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto 12px;
}

.bird-path-cell,
.forest-voice-card {
  min-height: 64px;
  border-radius: 10px;
  transition: transform 140ms, border-color 180ms, background 180ms, box-shadow 180ms;
}

.bird-path-cell--empty {
  border: 1px solid rgba(0, 240, 200, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.bird-path-cell--stone,
.forest-voice-card {
  border: 1px solid rgba(0, 240, 200, 0.25);
  background:
    linear-gradient(180deg, rgba(0, 240, 200, 0.08), rgba(0, 20, 36, 0.9));
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}

.bird-path-cell--stone:hover:not(:disabled),
.forest-voice-card:hover:not(:disabled) {
  border-color: var(--mauri);
  box-shadow: 0 0 18px rgba(0, 240, 200, 0.22);
  transform: translateY(-1px);
}

.bird-path-cell--visited,
.forest-voice-card--chosen {
  border-color: var(--mauri);
  background: rgba(0, 240, 200, 0.13);
  box-shadow: 0 0 18px rgba(0, 240, 200, 0.28);
}

.bird-path-cell--wrong,
.forest-voice-card--wrong {
  border-color: rgba(255, 93, 108, 0.55);
  background: rgba(255, 93, 108, 0.14);
  box-shadow: 0 0 18px rgba(255, 93, 108, 0.25);
}

.forest-voice-card--flash {
  border-color: var(--gold);
  background: rgba(244, 192, 70, 0.18);
  box-shadow: 0 0 24px rgba(244, 192, 70, 0.45);
  transform: translateY(-2px) scale(1.02);
}

.bird-glyph {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
}

.bird-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
}

.forest-voice-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}

.forest-voice-card:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  .bird-path-grid { gap: 6px; }
  .bird-path-cell,
  .forest-voice-card { min-height: 58px; }
  .bird-order-chip { font-size: 10px; padding: 7px 8px; }
}


/* ======================================================== */
/* WAIATA PIANO  (Legacy Task 3 — Māui, unused)              */
/* G-major keyboard  D4 E4 F♯4 G4 A4 B4 C5 D5 E5           */
/* Dark carved wood · mauri glow · gold accents             */
/* ======================================================== */

.waiata-piano-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,240,200,0.07), transparent 60%),
    rgba(6, 10, 20, 0.92);
  border-color: rgba(0, 240, 200, 0.25);
}

.wpiano-wrap {
  position: relative;
  margin: 14px 0 10px;
  border-radius: 12px;
  padding: 14px 10px 18px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.012) 0 1px,
      transparent 1px 30px
    ),
    linear-gradient(180deg, #0d0a06 0%, #1a1208 40%, #0f0b05 100%);
  border: 1px solid rgba(244,192,70,0.22);
  box-shadow:
    0 0 40px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -2px 4px rgba(0,0,0,0.5);
}

.wpiano-keysig {
  font-family: 'Cinzel', serif;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(244,192,70,0.45);
  text-align: center; margin-bottom: 12px;
}

/* Key row */
.wpiano-keys {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: flex-end;
}

/* Individual key */
.wkey {
  flex: 1;
  min-width: 0;
  max-width: 58px;
  height: 90px;
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(244,192,70,0.18);
  border-top: 2px solid rgba(244,192,70,0.3);
  background:
    linear-gradient(180deg,
      rgba(30,22,10,0.95) 0%,
      rgba(18,13,5,0.98) 60%,
      rgba(10,8,3,1) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  cursor: pointer;
  position: relative;
  transition: background 140ms, box-shadow 140ms, transform 80ms;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
  /* mauri grain line running down each key */
  overflow: hidden;
}
.wkey::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 65%;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(0,240,200,0.22) 0%,
    rgba(0,240,200,0.06) 60%,
    transparent 100%);
  pointer-events: none;
}

/* F♯ key — visually distinct (slightly shorter, slightly brighter top) */
.wkey[data-note="F#4"] {
  height: 80px;
  background:
    linear-gradient(180deg,
      rgba(40,28,8,0.97) 0%,
      rgba(20,14,4,0.99) 60%,
      rgba(10,8,3,1) 100%);
  border-color: rgba(244,192,70,0.32);
  border-top-color: rgba(244,192,70,0.55);
}
.wkey[data-note="F#4"]::before {
  background: linear-gradient(180deg,
    rgba(244,192,70,0.28) 0%,
    rgba(244,192,70,0.07) 60%,
    transparent 100%);
}

.wkey:hover:not(:disabled) {
  background:
    linear-gradient(180deg,
      rgba(0,240,200,0.12) 0%,
      rgba(18,13,5,0.97) 50%,
      rgba(10,8,3,1) 100%);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.55),
    0 0 16px rgba(0,240,200,0.18),
    inset 0 1px 0 rgba(0,240,200,0.12);
  transform: translateY(1px);
}
.wkey:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.wkey:disabled { opacity: 0.35; cursor: not-allowed; }

/* Glow state — demo playback */
.wkey--lit {
  background:
    linear-gradient(180deg,
      rgba(0,240,200,0.32) 0%,
      rgba(0,180,150,0.18) 40%,
      rgba(10,8,3,1) 100%) !important;
  border-top-color: var(--mauri) !important;
  box-shadow:
    0 0 28px rgba(0,240,200,0.55),
    0 0 60px rgba(0,240,200,0.22),
    inset 0 0 14px rgba(0,240,200,0.18) !important;
  transform: translateY(2px);
}
.wkey[data-note="F#4"].wkey--lit {
  background:
    linear-gradient(180deg,
      rgba(244,192,70,0.38) 0%,
      rgba(180,130,30,0.18) 40%,
      rgba(10,8,3,1) 100%) !important;
  border-top-color: var(--gold) !important;
  box-shadow:
    0 0 28px rgba(244,192,70,0.55),
    0 0 60px rgba(244,192,70,0.22),
    inset 0 0 14px rgba(244,192,70,0.18) !important;
}

/* Player tap flash */
.wkey--tapped {
  background:
    linear-gradient(180deg,
      rgba(0,240,200,0.45) 0%,
      rgba(0,200,170,0.22) 40%,
      rgba(10,8,3,1) 100%) !important;
  box-shadow:
    0 0 40px rgba(0,240,200,0.7),
    inset 0 0 20px rgba(0,240,200,0.25) !important;
  transform: translateY(3px);
}

/* Key labels */
.wkey__label {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.06em;
  color: rgba(244,192,70,0.65);
  line-height: 1;
}
.wkey__note {
  font-size: 9px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
  margin-top: 3px; line-height: 1;
}
.wkey--lit .wkey__label,
.wkey--tapped .wkey__label { color: var(--mauri-soft); }
.wkey[data-note="F#4"] .wkey__label { color: rgba(244,192,70,0.85); }
.wkey[data-note="F#4"].wkey--lit .wkey__label { color: var(--gold-soft); }

/* Wrong-key shake */
@keyframes wrongShake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-6px) rotate(-1deg); }
  30%     { transform: translateX(6px)  rotate(1deg);  }
  45%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px);  }
  75%     { transform: translateX(-3px); }
  88%     { transform: translateX(3px);  }
}
.wkey--wrong-shake {
  animation: wrongShake 0.5s var(--easing) both;
  box-shadow: 0 0 30px rgba(255,93,108,0.5) !important;
}

/* Progress dots */
.wprog {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center;
  margin: 10px 0 4px;
  min-height: 14px;
}
.wprog-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 200ms, box-shadow 200ms;
}
.wprog-dot--ok {
  background: var(--mauri);
  border-color: var(--mauri);
  box-shadow: 0 0 6px rgba(0,240,200,0.6);
}
.wprog-dot--bad {
  background: var(--kura);
  border-color: var(--kura);
  box-shadow: 0 0 6px rgba(255,93,108,0.6);
}

/* ── Sun Boss (L4 Task 1 Māui) ── */
.l4-sun-hud {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
  text-align: center;
}
.l4-sun-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.l4-sun-btn {
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(140,90,30,0.45);
  background: rgba(20,12,5,0.85);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font-mono);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s, border-color 0.1s;
}
.l4-sun-btn:active { transform: scale(0.95); }
.l4-sun-btn--throw {
  border-color: rgba(244,192,70,0.55);
  background: rgba(30,18,3,0.90);
  color: var(--gold);
  font-weight: 700;
  padding: 0.55rem 1.1rem;
}
.l4-sun-btn--hold {
  border-color: rgba(0,240,200,0.55);
  background: rgba(3,18,14,0.90);
  color: var(--mauri);
  font-weight: 700;
  padding: 0.55rem 1.1rem;
}

/* ======================================================== */
/* LEVEL 5 — TE ARA KI AOTEAROA                             */
/* Ocean voyage themed puzzle styles                         */
/* ======================================================== */

/* ---- Level 5 panel themes ---- */
.l5-ocean-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 80, 140, 0.12), transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(0, 120, 180, 0.06), transparent 55%),
    rgba(2, 8, 20, 0.96);
  border-color: rgba(0, 140, 200, 0.22);
}
.l5-ocean-panel .l2-panel__title {
  color: #5bcfff;
  text-shadow: 0 0 18px rgba(91, 207, 255, 0.3);
}
.l5-star-panel {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(100, 60, 200, 0.07), transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(244, 192, 70, 0.05), transparent 50%),
    rgba(2, 4, 14, 0.97);
  border-color: rgba(200, 180, 255, 0.2);
}
.l5-star-panel .l2-panel__title {
  color: #c8b8ff;
  text-shadow: 0 0 18px rgba(200, 180, 255, 0.3);
}
.l5-hang-panel {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0, 80, 140, 0.1), transparent 55%),
    rgba(2, 8, 20, 0.97);
  border-color: rgba(0, 120, 180, 0.22);
}
.l5-hang-panel .l2-panel__title {
  color: #5bcfff;
  text-shadow: 0 0 18px rgba(91, 207, 255, 0.3);
}

/* ---- Waka build ---- */
.l5-waka-progress {
  display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap;
  justify-content: center;
}
.l5-waka-seg {
  height: 8px; flex: 1; min-width: 18px; max-width: 42px;
  border-radius: 4px;
  background: rgba(0, 80, 140, 0.3);
  border: 1px solid rgba(0, 140, 200, 0.25);
  transition: background 300ms, border-color 300ms, box-shadow 300ms;
}
.l5-waka-seg--lit {
  background: rgba(91, 207, 255, 0.4);
  border-color: rgba(91, 207, 255, 0.7);
  box-shadow: 0 0 8px rgba(91, 207, 255, 0.3);
}
.l5-waka-piece-grid {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px;
}
.l5-waka-piece {
  flex: 1; min-width: 120px; max-width: 48%;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px;
  border: 1px solid rgba(0, 140, 200, 0.3);
  border-radius: var(--radius);
  background: rgba(2, 10, 22, 0.9);
  cursor: pointer;
  transition: all 200ms;
  text-align: center;
}
.l5-waka-piece:hover:not(:disabled):not(.l5-waka-piece--placed) {
  border-color: rgba(91, 207, 255, 0.6);
  background: rgba(0, 80, 140, 0.15);
  box-shadow: 0 0 12px rgba(91, 207, 255, 0.15);
  transform: translateY(-1px);
}
.l5-waka-piece__sym {
  font-size: 20px; color: rgba(91, 207, 255, 0.5);
  transition: color 200ms;
}
.l5-waka-piece__name {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.07em; color: var(--text-dim);
}
.l5-waka-piece__clue {
  font-size: 11px; line-height: 1.4; color: var(--text-faint);
}
.l5-waka-piece--placed {
  opacity: 0.35; cursor: not-allowed;
  border-color: rgba(0, 240, 200, 0.35);
}
.l5-waka-piece--placed .l5-waka-piece__sym { color: var(--mauri-soft); }
.l5-waka-piece--error {
  border-color: rgba(255, 80, 80, 0.55) !important;
  background: rgba(80, 10, 20, 0.5) !important;
  animation: ceShake 0.4s ease both;
}

/* ---- Kete cards ---- */
.l5-kete-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 7px; margin-bottom: 12px;
}
.l5-kete-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 6px 8px;
  border: 1px solid rgba(100, 160, 80, 0.22);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(10, 16, 8, 0.96) 0%, rgba(6, 10, 6, 0.98) 100%);
  cursor: pointer;
  transition: all 200ms; text-align: center;
}
.l5-kete-card:hover:not(:disabled) {
  border-color: rgba(150, 220, 100, 0.5);
  box-shadow: 0 0 10px rgba(150, 220, 100, 0.1);
  transform: translateY(-1px);
}
.l5-kete-card--selected {
  border-color: rgba(0, 240, 200, 0.65) !important;
  background: linear-gradient(160deg, rgba(0, 30, 20, 0.98) 0%, rgba(0, 20, 14, 0.99) 100%) !important;
  box-shadow: 0 0 14px rgba(0, 240, 200, 0.2);
}
.l5-kete-card--error {
  border-color: rgba(255, 80, 80, 0.6) !important;
  background: rgba(60, 10, 10, 0.95) !important;
  animation: ceShake 0.4s ease both;
}
.l5-kete-card__sym {
  font-size: 18px; color: rgba(150, 200, 100, 0.5);
  margin-bottom: 4px; transition: color 200ms;
}
.l5-kete-card--selected .l5-kete-card__sym { color: var(--mauri-soft); }
.l5-kete-card__name {
  font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--gold-soft); margin-bottom: 3px;
}
.l5-kete-card__desc {
  font-size: 9px; line-height: 1.35; color: var(--text-faint);
}

/* ---- Wind steering ---- */
.l5-wind-path {
  display: flex; gap: 4px; margin-bottom: 14px; justify-content: center;
  align-items: center; flex-wrap: wrap;
}
.l5-wind-waypoint {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(0, 140, 200, 0.3);
  background: rgba(2, 8, 20, 0.9);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: rgba(0, 140, 200, 0.4);
  transition: all 300ms;
}
.l5-wind-waypoint--lit {
  border-color: rgba(91, 207, 255, 0.8);
  background: rgba(0, 80, 140, 0.25);
  box-shadow: 0 0 12px rgba(91, 207, 255, 0.3);
  color: #5bcfff;
}
.l5-wind-waypoint-line {
  flex: 1; height: 2px; max-width: 24px;
  background: rgba(0, 140, 200, 0.2);
  border-radius: 1px;
  transition: background 300ms;
}
.l5-wind-direction {
  text-align: center; font-size: 36px;
  color: rgba(91, 207, 255, 0.65);
  margin: 8px 0;
  text-shadow: 0 0 20px rgba(91, 207, 255, 0.3);
}
.l5-wind-condition {
  font-size: 13px; line-height: 1.65; color: var(--text-dim);
  margin-bottom: 12px; text-align: center;
}
.l5-wind-choices { display: flex; flex-direction: column; gap: 6px; }
.l5-wind-choice {
  padding: 11px 14px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid rgba(0, 140, 200, 0.22);
  background: rgba(2, 8, 20, 0.9);
  font-size: 13px; color: var(--text-dim);
  text-align: left; transition: all 175ms;
}
.l5-wind-choice:hover:not(:disabled) {
  border-color: rgba(91, 207, 255, 0.45);
  background: rgba(0, 60, 120, 0.12);
  color: var(--text);
}
.l5-wind-choice--wrong {
  border-color: rgba(255, 70, 70, 0.5) !important;
  background: rgba(80, 10, 20, 0.5) !important;
  animation: ceShake 0.4s ease both;
}
.l5-wind-choice--done {
  border-color: rgba(91, 207, 255, 0.55) !important;
  background: rgba(0, 80, 140, 0.12) !important;
  color: #5bcfff !important;
  cursor: default;
}

/* ---- Star wordfind ---- */
.l5-star-grid-wrap { margin: 10px 0 12px; }
.l5-star-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  margin: 0 auto;
  max-width: 320px;
}
.l5-star-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.05em;
  color: rgba(200, 180, 255, 0.45);
  border: 1px solid rgba(100, 80, 180, 0.15);
  border-radius: 4px;
  background: rgba(4, 4, 16, 0.85);
  cursor: pointer;
  transition: all 160ms;
  user-select: none; -webkit-user-select: none;
}
.l5-star-cell:hover:not(.l5-star-cell--found):not(.l5-star-cell--key-found) {
  color: rgba(200, 180, 255, 0.85);
  border-color: rgba(160, 130, 255, 0.45);
  background: rgba(60, 40, 120, 0.2);
}
.l5-star-cell--from {
  color: var(--gold-soft) !important;
  border-color: rgba(244, 192, 70, 0.7) !important;
  background: rgba(40, 28, 6, 0.9) !important;
  box-shadow: 0 0 10px rgba(244, 192, 70, 0.25);
}
.l5-star-cell--found {
  color: rgba(200, 180, 255, 0.6);
  border-color: rgba(120, 100, 200, 0.35);
  background: rgba(40, 28, 80, 0.4);
  cursor: default; pointer-events: none;
}
.l5-star-cell--key-found {
  color: var(--gold) !important;
  border-color: rgba(244, 192, 70, 0.6) !important;
  background: rgba(40, 28, 6, 0.6) !important;
  box-shadow: 0 0 8px rgba(244, 192, 70, 0.25);
  cursor: default; pointer-events: none;
}
.l5-star-word-list {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px;
}
.l5-star-word-tag {
  font-family: 'Cinzel', serif; font-size: 11px;
  letter-spacing: 0.1em; padding: 5px 9px;
  border: 1px solid rgba(100, 80, 180, 0.28);
  border-radius: 6px;
  background: rgba(4, 4, 16, 0.85);
  color: var(--text-faint);
  transition: all 250ms;
}
.l5-star-word-tag--found {
  border-color: rgba(200, 180, 255, 0.55);
  color: rgba(200, 180, 255, 0.85);
  background: rgba(60, 40, 120, 0.2);
}
.l5-star-word-tag--key {
  border-color: rgba(244, 192, 70, 0.4);
  color: var(--gold-soft);
}
.l5-star-word-tag--key-found {
  border-color: rgba(244, 192, 70, 0.7) !important;
  color: var(--gold) !important;
  background: rgba(40, 28, 6, 0.5) !important;
  box-shadow: 0 0 8px rgba(244, 192, 70, 0.2);
  text-shadow: 0 0 10px rgba(244, 192, 70, 0.4);
}

/* ---- Ocean signs scene ---- */
.l5-ocean-scene {
  position: relative;
  width: 100%; height: 220px;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px 0 12px;
  border: 1px solid rgba(0, 120, 200, 0.18);
  background: #020c1a;
  touch-action: manipulation;
}
.l5-ocean-layer {
  position: absolute; pointer-events: none;
}
.l5-ocean-sky {
  top: 0; left: 0; right: 0; height: 45%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(10, 20, 60, 0.9), transparent 50%),
    linear-gradient(180deg, rgba(4, 8, 22, 0.98) 0%, rgba(8, 16, 36, 0.9) 100%);
}
.l5-ocean-waves {
  bottom: 0; left: 0; right: 0; height: 55%;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0, 30, 60, 0.7) 0 2px,
      rgba(0, 20, 45, 0.8) 2px 8px
    ),
    linear-gradient(0deg, rgba(0, 10, 28, 0.98) 0%, rgba(0, 20, 45, 0.85) 100%);
}
.l5-ocean-sign {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0, 10, 30, 0.82);
  border: 1px solid rgba(0, 120, 200, 0.2);
  color: rgba(0, 160, 220, 0.35);
  font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 220ms;
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.l5-ocean-sign:hover:not(.l5-ocean-sign--found):not(:disabled) {
  color: rgba(0, 200, 255, 0.75);
  border-color: rgba(0, 180, 255, 0.55);
  background: rgba(0, 30, 60, 0.88);
  box-shadow: 0 0 14px rgba(0, 180, 255, 0.22);
}
.l5-ocean-sign--found {
  color: var(--mauri-soft) !important;
  border-color: rgba(0, 240, 200, 0.7) !important;
  background: rgba(0, 240, 200, 0.08) !important;
  box-shadow: 0 0 16px rgba(0, 240, 200, 0.35) !important;
  pointer-events: none;
}
.l5-ocean-sign--wrong {
  color: rgba(255, 80, 80, 0.75) !important;
  border-color: rgba(255, 80, 80, 0.5) !important;
  background: rgba(80, 10, 20, 0.5) !important;
  animation: ceShake 0.4s ease both;
}
.l5-mauri-meter {
  display: flex; gap: 6px; margin-bottom: 10px;
  align-items: center;
}
.l5-mauri-meter__label {
  font-size: 10px; letter-spacing: 0.15em; color: var(--text-faint);
  text-transform: uppercase; white-space: nowrap;
}
.l5-mauri-pip {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0, 240, 200, 0.7);
  border: 1px solid rgba(0, 240, 200, 0.5);
  box-shadow: 0 0 6px rgba(0, 240, 200, 0.4);
  transition: all 300ms;
}
.l5-mauri-pip--dim {
  background: rgba(30, 40, 60, 0.6);
  border-color: rgba(50, 60, 80, 0.3);
  box-shadow: none;
}
.l5-signs-found {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; min-height: 24px;
}
.l5-sign-found-tag {
  font-size: 10px; letter-spacing: 0.08em;
  color: var(--mauri-soft);
  padding: 3px 7px;
  border: 1px solid rgba(0, 240, 200, 0.28);
  border-radius: 5px;
  background: rgba(0, 240, 200, 0.05);
}

/* ---- Hangman puzzle ---- */
.l5-hang-stars {
  display: flex; gap: 6px; margin-bottom: 12px; justify-content: center;
}
.l5-hang-star {
  font-size: 16px;
  color: rgba(244, 192, 70, 0.85);
  text-shadow: 0 0 8px rgba(244, 192, 70, 0.5);
  transition: color 300ms, text-shadow 300ms;
}
.l5-hang-star--dimmed {
  color: rgba(40, 45, 65, 0.6) !important;
  text-shadow: none !important;
}
.l5-hang-blanks {
  display: flex; gap: 8px; margin-bottom: 18px;
  justify-content: center; flex-wrap: wrap;
}
.l5-hang-blank {
  display: flex; align-items: flex-end; justify-content: center;
  width: 30px; height: 40px;
  border-bottom: 2px solid rgba(91, 207, 255, 0.5);
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 20px;
  color: #5bcfff; letter-spacing: 0.05em; padding-bottom: 2px;
  transition: color 300ms, text-shadow 300ms;
}
.l5-hang-blank--revealed {
  text-shadow: 0 0 12px rgba(91, 207, 255, 0.5);
}
.l5-hang-kb {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 12px; align-items: center;
}
.l5-hang-kb-row {
  display: flex; gap: 3px;
}
.l5-hang-key {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px;
  padding: 9px 5px; min-width: 25px;
  border: 1px solid rgba(0, 140, 200, 0.3);
  border-radius: 5px;
  background: rgba(2, 8, 20, 0.9);
  color: rgba(91, 207, 255, 0.75);
  cursor: pointer; transition: all 140ms;
}
.l5-hang-key:hover:not(:disabled) {
  background: rgba(0, 60, 120, 0.22);
  border-color: rgba(91, 207, 255, 0.65);
  color: #5bcfff;
}
.l5-hang-key--correct {
  background: rgba(0, 80, 140, 0.3) !important;
  border-color: rgba(91, 207, 255, 0.75) !important;
  color: #5bcfff !important;
  cursor: default;
}
.l5-hang-key--wrong {
  background: rgba(20, 12, 18, 0.9) !important;
  border-color: rgba(80, 40, 50, 0.35) !important;
  color: rgba(80, 55, 65, 0.55) !important;
  cursor: not-allowed;
}

/* ---- Reward words (finale) ---- */
.l5-reward-words {
  display: flex; gap: 10px; justify-content: center;
  margin-bottom: 18px; flex-wrap: wrap;
}
.l5-reward-word {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 16px; letter-spacing: 0.12em;
  color: var(--gold);
  padding: 8px 16px;
  border: 1px solid rgba(244, 192, 70, 0.45);
  border-radius: 8px;
  background: rgba(30, 20, 4, 0.88);
  box-shadow: 0 0 14px rgba(244, 192, 70, 0.18);
  text-shadow: 0 0 12px rgba(244, 192, 70, 0.35);
}

/* (l5-sail-* styles moved to the waka sailing section below) */

/* ======================================================== */
/* LEVEL 5 — WAKA IMAGE PUZZLE  (Māui Task 1)               */
/* ======================================================== */

/* Progress bar */
.l5-puz-prog-wrap {
  width: 100%; height: 6px;
  background: rgba(0, 60, 120, 0.25);
  border-radius: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}
.l5-puz-prog-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(0,200,180,0.7), rgba(91,207,255,0.9));
  border-radius: 3px;
  transition: width 300ms ease;
  box-shadow: 0 0 8px rgba(91,207,255,0.4);
}

/* Puzzle board — 5 cols × 4 rows */
.l5-puz-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  aspect-ratio: 5 / 4;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 10px;
  padding: 3px;
  border: 1px solid rgba(91, 207, 255, 0.25);
  border-radius: 8px;
  background: rgba(0, 10, 25, 0.8);
  box-sizing: border-box;
}

/* Each board slot */
.l5-puz-slot {
  position: relative;
  border: 1px dashed rgba(91, 207, 255, 0.20);
  border-radius: 3px;
  background: rgba(0, 15, 35, 0.7);
  overflow: hidden;
  transition: border-color 160ms, box-shadow 160ms;
}

/* Very faint guide ghost inside each empty slot */
.l5-puz-ghost {
  position: absolute; inset: 0;
  opacity: 0.07;
  background-size: inherit;
  background-position: inherit;
  background-repeat: no-repeat;
  pointer-events: none;
}
.l5-puz-slot--filled .l5-puz-ghost { display: none; }

/* Hover highlight while dragging over a slot */
.l5-puz-slot--hover {
  border-color: rgba(91, 207, 255, 0.65) !important;
  box-shadow: 0 0 10px rgba(91, 207, 255, 0.22);
}

/* Wrong-drop flash */
.l5-puz-slot--wrong {
  border-color: rgba(255, 70, 70, 0.65) !important;
  box-shadow: 0 0 10px rgba(255, 70, 70, 0.25) !important;
  animation: ceShake 0.4s ease both;
}

/* Snap glow when a tile is correctly locked */
.l5-puz-slot--snap { animation: puzSnap 0.6s ease both; }
@keyframes puzSnap {
  0%   { box-shadow: 0 0 0 rgba(0,240,200,0); }
  40%  { box-shadow: 0 0 18px rgba(0,240,200,0.7); }
  100% { box-shadow: 0 0 4px rgba(0,240,200,0.15); }
}

/* Board-complete glow */
.l5-puz-board--complete {
  border-color: rgba(0, 240, 200, 0.55) !important;
  box-shadow: 0 0 24px rgba(0, 240, 200, 0.18);
}

/* Tile tray — same 5-col grid as board */
.l5-puz-tray {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2px;
  aspect-ratio: 5 / 4;
  width: 100%;
  max-width: 340px;
  margin: 0 auto 4px;
  padding: 3px;
  border: 1px solid rgba(91, 207, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 8, 22, 0.7);
  box-sizing: border-box;
}

/* Draggable tile */
.l5-puz-tile {
  width: 100%; height: 100%;
  border-radius: 3px;
  cursor: grab;
  touch-action: none;
  border: 1px solid rgba(91, 207, 255, 0.22);
  background-color: rgba(0, 15, 35, 0.8);
  transition: box-shadow 120ms, opacity 120ms, transform 80ms;
  user-select: none; -webkit-user-select: none;
}
.l5-puz-tile:hover:not(.l5-puz-tile--locked):not(.l5-puz-tile--dragging) {
  box-shadow: 0 0 8px rgba(91, 207, 255, 0.28);
  transform: scale(1.06);
}

/* Original tile while being dragged (hidden; ghost floats instead) */
.l5-puz-tile--dragging {
  opacity: 0 !important;
  cursor: grabbing;
  transform: none !important;
}

/* Tile locked permanently into a slot */
.l5-puz-tile--locked {
  cursor: default;
  border: none;
  border-radius: 0;
  transform: none !important;
  pointer-events: none;
}

/* Hint image — hidden by default, shown for 3s when Hint button pressed */
.l5-puz-hint-img {
  display: block;
  width: 100%; max-width: 340px;
  margin: 0 auto 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 200, 0.4);
  opacity: 0.88;
}
.l5-puz-hint-img.hidden { display: none; }

/* ======================================================== */
/* LEVEL 5 — MATCH-3 OCEAN PUZZLE  (Māui Task 3)            */
/* ======================================================== */

.l5-m3-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 4px 0;
}
.l5-m3-ttl {
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; color: #5bcfff;
  text-align: center; margin-bottom: 2px;
}
.l5-m3-sub {
  font-size: 11px; color: rgba(200, 220, 255, 0.65);
  text-align: center; letter-spacing: 0.04em;
}

/* Header row: moves + goal counters */
.l5-m3-bar {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 380px; gap: 8px;
}
.l5-m3-mv {
  font-size: 11px; letter-spacing: 0.1em;
  color: rgba(91, 207, 255, 0.85); white-space: nowrap;
}
.l5-m3-goals {
  display: flex; gap: 8px;
}
.l5-m3-goal {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; min-width: 38px;
}
.l5-m3-gi {
  width: 22px; height: 22px; object-fit: contain;
  border-radius: 3px;
}
.l5-m3-gbw {
  width: 34px; height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
}
.l5-m3-gb {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #00c8a0, #5bcfff);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.l5-m3-gc {
  font-size: 9px; letter-spacing: 0.06em;
  color: rgba(91, 207, 255, 0.8);
}

/* Board */
.l5-m3-board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: rgba(0, 12, 30, 0.75);
  border: 1px solid rgba(0, 180, 220, 0.18);
  border-radius: 8px;
  padding: 4px;
  width: 100%; max-width: 380px;
  box-sizing: border-box;
}
.l5-m3-cell {
  aspect-ratio: 1;
  position: relative;
}
.l5-m3-tile {
  width: 100%; height: 100%;
  border-radius: 5px;
  background: rgba(0, 25, 55, 0.7);
  border: 1px solid rgba(0, 160, 190, 0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  box-sizing: border-box;
}
.l5-m3-tile img {
  width: 78%; height: 78%;
  object-fit: contain;
  pointer-events: none; display: block;
}
.l5-m3-tile--fb {
  font-size: 18px; line-height: 1;
  color: rgba(200, 240, 255, 0.85);
}
.l5-m3-tile--selected {
  border-color: rgba(0, 240, 200, 0.85);
  box-shadow: 0 0 0 2px rgba(0, 240, 200, 0.55), 0 0 7px rgba(0, 240, 200, 0.25);
  background: rgba(0, 55, 75, 0.75);
  transform: scale(1.1);
  z-index: 2;
}
.l5-m3-tile--pop {
  animation: l5m3Pop 0.28s ease forwards;
  pointer-events: none;
}
@keyframes l5m3Pop {
  0%   { transform: scale(1);   opacity: 1; }
  45%  { transform: scale(1.28); opacity: 0.85; }
  100% { transform: scale(0);   opacity: 0; }
}
.l5-m3-tile--new {
  animation: l5m3Drop 0.24s ease-out;
}
@keyframes l5m3Drop {
  from { opacity: 0; transform: translateY(-14px) scale(0.82); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mauri glow burst on tile clear */
.l5-m3-glow {
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 230, 190, 0.65), transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: l5m3Burst 0.42s ease forwards;
  z-index: 10;
}
@keyframes l5m3Burst {
  from { width: 0;    height: 0;    opacity: 1; }
  to   { width: 52px; height: 52px; opacity: 0; }
}

/* Retry button */
.l5-m3-retry {
  margin-top: 6px;
}

/* ======================================================== */
/* LEVEL 5 — OCEAN BOARD GAME  (Māui Task 3)               */
/* ======================================================== */

.l5-bd-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 4px 0;
}
.l5-bd-ttl {
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; color: #5bcfff; text-align: center;
}
.l5-bd-sub {
  font-size: 11px; color: rgba(200,220,255,0.6);
  text-align: center; letter-spacing: 0.04em;
}

/* 5×5 board */
.l5-bd-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  background: rgba(0,10,28,0.8);
  border: 1px solid rgba(0,160,210,0.2);
  border-radius: 8px;
  padding: 5px;
  width: 100%; max-width: 340px;
  box-sizing: border-box;
}
.l5-bd-sq {
  aspect-ratio: 1;
  border-radius: 5px;
  background: rgba(0,22,50,0.75);
  border: 1px solid rgba(0,130,170,0.14);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  box-sizing: border-box;
}
.l5-bd-num {
  font-size: 8px; color: rgba(91,207,255,0.4);
  line-height: 1; position: absolute; top: 2px; left: 3px;
}
.l5-bd-sym {
  font-size: 13px; line-height: 1;
}
.l5-bd-token {
  font-size: 16px; line-height: 1;
}

/* Square types */
.l5-bd-sq--wave    { background: rgba(0,55,120,0.75); border-color: rgba(0,190,230,0.4); }
.l5-bd-sq--current { background: rgba(0,70,100,0.75); border-color: rgba(0,210,190,0.4); }
.l5-bd-sq--taniwha { background: rgba(80,0,40,0.75);  border-color: rgba(220,30,100,0.4); }
.l5-bd-sq--storm   { background: rgba(30,0,80,0.75);  border-color: rgba(110,60,230,0.4); }
.l5-bd-sq--star    { background: rgba(60,50,0,0.8);   border-color: rgba(230,200,0,0.45); }
.l5-bd-sq--land    { background: rgba(0,70,35,0.85);  border-color: rgba(0,220,120,0.55); }
.l5-bd-sq--start   { border-color: rgba(255,255,255,0.25); }
.l5-bd-sq--active  {
  box-shadow: 0 0 12px rgba(0,240,200,0.5);
  border-color: rgba(0,240,200,0.75) !important;
  transition: box-shadow 0.2s;
}

/* Legend */
.l5-bd-legend {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  justify-content: center;
  max-width: 340px;
}
.l5-bd-leg {
  font-size: 9px; letter-spacing: 0.05em;
  padding: 2px 5px; border-radius: 3px;
  color: rgba(200,220,255,0.7);
  background: rgba(0,20,50,0.5);
  border: 1px solid rgba(255,255,255,0.08);
}
.l5-bd-leg--wave    { border-color: rgba(0,190,230,0.3); }
.l5-bd-leg--current { border-color: rgba(0,210,190,0.3); }
.l5-bd-leg--taniwha { border-color: rgba(220,30,100,0.3); }
.l5-bd-leg--storm   { border-color: rgba(110,60,230,0.3); }
.l5-bd-leg--star    { border-color: rgba(230,200,0,0.3); }
.l5-bd-leg--land    { border-color: rgba(0,220,120,0.3); }

/* Controls */
.l5-bd-controls {
  display: flex; align-items: center; gap: 14px;
}
.l5-bd-btn {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.1em; padding: 10px 24px;
  background: rgba(0,60,130,0.6);
  border: 1px solid rgba(0,200,240,0.35);
  border-radius: 6px; color: #5bcfff;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.l5-bd-btn:hover:not(:disabled) {
  background: rgba(0,80,160,0.65);
  box-shadow: 0 0 12px rgba(91,207,255,0.2);
}
.l5-bd-btn:active:not(:disabled) {
  transform: scale(0.95);
}
.l5-bd-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.l5-bd-dice {
  font-family: 'Cinzel', serif; font-size: 32px; font-weight: 700;
  color: #ffc840; min-width: 36px; text-align: center;
  text-shadow: 0 0 10px rgba(255,200,64,0.4);
}

/* ======================================================== */
/* LEVEL 5 — MEMORY CARD GAME  (Hinengaro Task 3)           */
/* ======================================================== */

.l5-mem-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 4px 0;
}
.l5-mem-ttl {
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; color: #5bcfff; text-align: center;
}
.l5-mem-sub {
  font-size: 11px; color: rgba(200,220,255,0.6);
  text-align: center; letter-spacing: 0.04em;
}
.l5-mem-prog {
  font-size: 11px; color: rgba(0,230,180,0.8);
  letter-spacing: 0.08em; text-align: center;
}

/* 4×4 grid */
.l5-mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  width: 100%; max-width: 320px;
  box-sizing: border-box;
}
.l5-mem-card {
  aspect-ratio: 1;
  cursor: pointer;
  perspective: 500px;
  -webkit-perspective: 500px;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.l5-mem-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.32s ease;
  -webkit-transition: -webkit-transform 0.32s ease;
  will-change: transform;
}
.l5-mem-card--flipped .l5-mem-inner,
.l5-mem-card--matched .l5-mem-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.l5-mem-back,
.l5-mem-front {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.l5-mem-back {
  background: linear-gradient(135deg, rgba(0,28,68,0.92), rgba(0,55,115,0.85));
  border: 1px solid rgba(0,160,220,0.28);
  font-size: 20px; color: rgba(91,207,255,0.28);
  font-family: 'Cinzel', serif;
}
.l5-mem-front {
  background: rgba(0,18,45,0.85);
  border: 1px solid rgba(0,160,200,0.22);
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}
.l5-mem-front img {
  width: 72%; height: 72%;
  object-fit: contain;
  pointer-events: none; display: block;
}
.l5-mem-front--fb {
  font-size: 22px; color: rgba(200,240,255,0.85);
}

/* Matched card: teal glow */
.l5-mem-card--matched .l5-mem-front {
  border-color: rgba(0,220,170,0.55);
  background: rgba(0,45,38,0.75);
  box-shadow: 0 0 8px rgba(0,210,160,0.25);
}

/* =============================================================
   LEVEL 6 — Ngā Kete o te Ora / The Baskets of Life
   Garden green · forest shadow · kete gold healing palette
   ============================================================= */

/* ---- Panel themes ---- */
.l6-garden-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 200, 80, 0.07), transparent 55%),
    rgba(4, 14, 6, 0.94);
  border: 1px solid rgba(0, 200, 80, 0.22);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.l6-forest-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(20, 80, 30, 0.1), transparent 60%),
    rgba(4, 10, 6, 0.96);
  border: 1px solid rgba(0, 160, 60, 0.2);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}
.l6-kete-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244, 192, 70, 0.08), transparent 55%),
    rgba(12, 8, 4, 0.95);
  border: 1px solid rgba(244, 192, 70, 0.25);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

/* ---- Panel subtitle ---- */
.l6-garden-panel .l6-panel-sub,
.l6-forest-panel .l6-panel-sub,
.l6-kete-panel   .l6-panel-sub {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   SNAKE — Māui Task 1 (l6-snake-*)
   ══════════════════════════════════════════════════════════ */

.l6-snake-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  min-height: 28px;
}
.l6-snake-hearts { display: flex; gap: 4px; }
.l6-snake-heart  { color: var(--kura, #ff5d6c); font-size: 1.1rem; transition: opacity 200ms; }
.l6-snake-heart--lost { opacity: 0.15; }
.l6-snake-score-label { font-size: 0.82rem; color: var(--text-dim); }

.l6-snake-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 1px;
  background: #050f07;
  border: 2px solid rgba(0, 200, 60, 0.35);
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto 14px;
  max-width: 304px;
  aspect-ratio: 1;
  image-rendering: pixelated;
}
.l6-snake-cell {
  background: #071409;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-family: monospace;
  color: rgba(0,200,60,0.3);
  user-select: none;
}
.l6-snake-cell--head {
  background: rgba(0, 220, 70, 0.85);
  color: #050f07;
  font-size: 0.65rem;
}
.l6-snake-cell--body {
  background: rgba(0, 180, 50, 0.55);
  color: #050f07;
}
.l6-snake-cell--item {
  background: transparent;
  color: #00ff55;
  font-size: 0.72rem;
}
.l6-snake-cell--stone {
  background: rgba(40, 40, 50, 0.7);
  color: rgba(80, 80, 90, 0.6);
  font-size: 0.6rem;
}

.l6-snake-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 8px auto 0;
  max-width: 160px;
}
.l6-snake-dpad-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.l6-snake-btn {
  width: 52px;
  height: 48px;
  background: rgba(0, 240, 200, 0.10);
  border: 1px solid rgba(0, 240, 200, 0.28);
  border-radius: 10px;
  color: var(--mauri);
  font-size: 1.1rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 90ms;
  user-select: none;
}
.l6-snake-btn:active:not(:disabled) { background: rgba(0, 240, 200, 0.22); }
.l6-snake-btn:disabled { opacity: 0.25; cursor: default; }
.l6-snake-btn--center { opacity: 0.2; cursor: default; }

/* ═══════════════════════════════════════════════════════════
   SUDOKU — Hinengaro Task 1 (l6-sdk-*)
   ══════════════════════════════════════════════════════════ */

.l6-sdk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.l6-sdk-legend-item { display: flex; align-items: center; gap: 4px; }

.l6-sdk-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(0, 120, 60, 0.18);
  border: 2px solid rgba(0, 200, 80, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto 14px;
  max-width: 280px;
  aspect-ratio: 1;
}
.l6-sdk-cell {
  background: rgba(4, 18, 8, 0.90);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  border: 1px solid rgba(0, 140, 60, 0.12);
  transition: background 120ms;
  padding: 4px 2px;
}
.l6-sdk-cell--given {
  background: rgba(0, 50, 20, 0.60);
  cursor: default;
  border-color: rgba(0, 160, 70, 0.22);
}
.l6-sdk-cell--selected {
  background: rgba(0, 240, 200, 0.14);
  border-color: rgba(0, 240, 200, 0.45);
  box-shadow: inset 0 0 0 1px rgba(0, 240, 200, 0.3);
}
.l6-sdk-cell--filled {
  background: rgba(0, 160, 70, 0.14);
}
.l6-sdk-cell--box-right  { border-right-width: 2px;  border-right-color: rgba(0, 200, 80, 0.38); }
.l6-sdk-cell--box-bottom { border-bottom-width: 2px; border-bottom-color: rgba(0, 200, 80, 0.38); }

.l6-sdk-icon  { font-size: 1.1rem; color: var(--mauri-soft); line-height: 1; }
.l6-sdk-label { font-size: 0.58rem; color: var(--text-dim); letter-spacing: 0.04em; }
.l6-sdk-cell--given .l6-sdk-icon  { color: var(--gold); }
.l6-sdk-cell--given .l6-sdk-label { color: rgba(244,192,70,0.65); }

.l6-sdk-sym-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.l6-sdk-sym-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: rgba(0, 160, 70, 0.12);
  border: 1px solid rgba(0, 200, 80, 0.28);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.84rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 100ms;
}
.l6-sdk-sym-btn:hover { background: rgba(0, 200, 80, 0.2); }
.l6-sdk-sym-btn:active { background: rgba(0, 200, 80, 0.28); }

/* ═══════════════════════════════════════════════════════════
   PINBALL — Māui Task 2 (l6-pb-*)
   ══════════════════════════════════════════════════════════ */

.l6-pb-lives {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.l6-pb-area {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(0, 180, 60, 0.08), transparent 50%),
    rgba(2, 10, 4, 0.95);
  border: 1px solid rgba(0, 160, 60, 0.3);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto 12px;
  touch-action: none;
}

.l6-pb-ball {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #57ffd9, #00c896);
  box-shadow: 0 0 10px rgba(0, 240, 200, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: none;
}

.l6-pb-target {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(0, 240, 200, 0.5);
  background: rgba(0, 60, 30, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--mauri-soft);
  text-align: center;
  line-height: 1.15;
  pointer-events: none;
  transition: background 300ms, border-color 300ms;
}
.l6-pb-target--hit {
  background: rgba(0, 200, 100, 0.35);
  border-color: rgba(0, 240, 200, 0.9);
  box-shadow: 0 0 12px rgba(0, 240, 200, 0.4);
  color: var(--mauri);
}

.l6-pb-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.l6-pb-btn {
  padding: 10px 18px;
  background: rgba(0, 160, 70, 0.12);
  border: 1px solid rgba(0, 200, 80, 0.28);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 90ms;
  user-select: none;
}
.l6-pb-btn:hover:not(:disabled) { background: rgba(0, 200, 80, 0.2); }
.l6-pb-btn:active:not(:disabled) { background: rgba(0, 200, 80, 0.3); }
.l6-pb-btn:disabled { opacity: 0.25; cursor: default; }
.l6-pb-btn--launch {
  background: rgba(0, 240, 200, 0.14);
  border-color: rgba(0, 240, 200, 0.45);
  color: var(--mauri-soft);
  font-weight: 600;
}
.l6-pb-btn--launch:hover:not(:disabled) { background: rgba(0, 240, 200, 0.24); }

/* =========================================================
   LEVEL 6 — WAKA JIGSAW  (.l6-jig-*)
   Māui Task 1 — Assemble the waka puzzle
   ========================================================= */
.l6-jig-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin: 10px auto;
  max-width: 288px;
  background: rgba(0, 10, 22, 0.7);
  border: 1px solid rgba(0, 180, 240, 0.28);
  border-radius: 10px;
  overflow: hidden;
  padding: 3px;
}
.l6-jig-ghost {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
.l6-jig-slot {
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1.5px dashed rgba(0, 200, 240, 0.3);
  background-color: rgba(0, 20, 40, 0.55);
  cursor: pointer;
  transition: border-color 0.18s;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.l6-jig-slot:not(.l6-jig-slot--filled):hover {
  border-color: rgba(0, 240, 200, 0.65);
  background-color: rgba(0, 240, 200, 0.07);
}
.l6-jig-slot--filled {
  border-style: solid;
  border-color: rgba(0, 240, 200, 0.38);
  cursor: default;
}
.l6-jig-slot--wrong {
  animation: l6JigWrong 0.42s ease;
  border-color: var(--kura) !important;
}
@keyframes l6JigWrong {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}
.l6-jig-label {
  font-size: 10px;
  color: rgba(140, 190, 230, 0.5);
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
  margin: 8px 0 3px;
}
.l6-jig-tray {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 288px;
  margin: 0 auto 4px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 5px;
}
.l6-jig-piece {
  aspect-ratio: 1;
  border: 2px solid rgba(0, 180, 240, 0.3);
  border-radius: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.l6-jig-piece:hover {
  border-color: rgba(0, 240, 200, 0.6);
  transform: scale(1.05);
}
.l6-jig-piece--selected {
  border-color: rgba(0, 240, 200, 1);
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(0, 240, 200, 0.55), 0 0 14px rgba(0, 240, 200, 0.35);
  transform: scale(1.08);
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════
   BOGGLE — Hinengaro Task 2 (l6-bog-*)
   ══════════════════════════════════════════════════════════ */

.l6-bog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  max-width: 220px;
  margin: 0 auto 14px;
}
.l6-bog-cell {
  background: rgba(0, 40, 18, 0.80);
  border: 1px solid rgba(0, 160, 60, 0.3);
  border-radius: 7px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mauri-soft);
  letter-spacing: 0.02em;
  user-select: none;
}

.l6-bog-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.l6-bog-input-row input {
  flex: 1;
  padding: 10px 12px;
  background: rgba(0, 30, 12, 0.8);
  border: 1px solid rgba(0, 200, 80, 0.3);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  outline: none;
}
.l6-bog-input-row input:focus { border-color: rgba(0, 240, 200, 0.55); }
.l6-bog-input-row button {
  padding: 10px 16px;
  background: rgba(0, 200, 80, 0.14);
  border: 1px solid rgba(0, 200, 80, 0.32);
  border-radius: 8px;
  color: var(--mauri-soft);
  font-size: 0.88rem;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.l6-bog-input-row button:active { background: rgba(0, 200, 80, 0.25); }

.l6-bog-found {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}
.l6-bog-found-word {
  padding: 4px 10px;
  background: rgba(0, 200, 100, 0.14);
  border: 1px solid rgba(0, 200, 80, 0.32);
  border-radius: 20px;
  font-size: 0.8rem;
  color: var(--mauri-soft);
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════
   PIN THE TAIL ON THE HORSE — Māui Task 3 (l6-pt-*)
   ══════════════════════════════════════════════════════════ */

.l6-pt-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.l6-pt-area {
  position: relative;
  width: 280px;
  height: 180px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  background: rgba(244,192,70,0.04);
  border: 1px solid rgba(244,192,70,0.14);
  border-radius: 10px;
}

/* CSS horse — animated side to side */
.l6-pt-horse-group {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 120px;
  transform: translate(-50%, -50%);
  animation: l6HorseSwing 1.8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes l6HorseSwing {
  from { transform: translate(-110px, -50%); }
  to   { transform: translate(-30px,  -50%); }
}
.l6-pt-horse-body {
  position: absolute;
  left: 58px; top: 24px;
  width: 118px; height: 58px;
  background: #8b5e3c;
  border-radius: 30% 25% 28% 32% / 46% 46% 54% 54%;
  box-shadow: inset -8px -5px 0 rgba(0,0,0,0.20);
}
.l6-pt-horse-belly {
  position: absolute;
  left: 76px; top: 50px;
  width: 72px; height: 22px;
  background: #a07850;
  border-radius: 50%;
  opacity: 0.55;
}
.l6-pt-horse-neck {
  position: absolute;
  left: 40px; top: 8px;
  width: 30px; height: 48px;
  background: #8b5e3c;
  border-radius: 48% 52% 30% 30%;
  transform: rotate(-16deg);
  transform-origin: bottom center;
  box-shadow: inset -4px -2px 0 rgba(0,0,0,0.15);
}
.l6-pt-horse-head {
  position: absolute;
  left: 12px; top: -2px;
  width: 48px; height: 34px;
  background: #8b5e3c;
  border-radius: 36% 55% 55% 38%;
  transform: rotate(-8deg);
  box-shadow: inset -4px -2px 0 rgba(0,0,0,0.12);
}
.l6-pt-horse-ear {
  position: absolute;
  left: 27px; top: -12px;
  width: 11px; height: 17px;
  background: #7a5030;
  border-radius: 50% 50% 30% 30%;
  transform: rotate(8deg);
}
.l6-pt-horse-eye {
  position: absolute;
  left: 8px; top: 9px;
  width: 9px; height: 9px;
  background: #150e08;
  border-radius: 50%;
  border: 2px solid #3d2210;
}
.l6-pt-horse-nostril {
  position: absolute;
  right: 5px; top: 18px;
  width: 7px; height: 5px;
  background: #5a3520;
  border-radius: 50%;
}
.l6-pt-horse-mane {
  position: absolute;
  left: 24px; top: -8px;
  width: 44px; height: 32px;
  background: #4a2c10;
  border-radius: 42% 32% 52% 40%;
  opacity: 0.92;
  z-index: 1;
}
.l6-pt-horse-leg {
  position: absolute;
  width: 13px;
  border-radius: 3px 3px 5px 5px;
  background: #7a4e2c;
  box-shadow: inset -2px 0 0 rgba(0,0,0,0.15);
}
.l6-pt-horse-leg-fl { left: 72px;  top: 76px; height: 40px; }
.l6-pt-horse-leg-fr { left: 90px;  top: 76px; height: 40px; }
.l6-pt-horse-leg-bl { left: 130px; top: 76px; height: 38px; }
.l6-pt-horse-leg-br { left: 148px; top: 76px; height: 38px; }
.l6-pt-horse-hoof {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 9px;
  background: #1a0e04;
  border-radius: 3px;
}

.l6-pt-tail {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(244,192,70,0.7));
  z-index: 10;
}
.l6-pt-hint {
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--gold-soft);
  white-space: nowrap;
  pointer-events: none;
  animation: ptHintPulse 1.4s ease-in-out infinite;
  z-index: 5;
}
@keyframes ptHintPulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}

.l6-pt-instruction {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════
   2 TRUTHS 1 LIE — Hinengaro Task 3 (l6-tt-*)
   ══════════════════════════════════════════════════════════ */

.l6-tt-progress {
  font-size: 0.82rem;
  color: var(--gold-soft);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.l6-tt-statements {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.l6-tt-stmt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(12, 8, 4, 0.80);
  border: 1px solid rgba(244, 192, 70, 0.2);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms, border-color 120ms;
}
.l6-tt-stmt:hover:not(:disabled) {
  background: rgba(244, 192, 70, 0.08);
  border-color: rgba(244, 192, 70, 0.36);
}
.l6-tt-stmt:disabled { cursor: default; }
.l6-tt-stmt--lie {
  background: rgba(0, 200, 100, 0.14) !important;
  border-color: rgba(0, 240, 200, 0.55) !important;
  color: var(--mauri-soft);
}
.l6-tt-stmt--wrong {
  background: rgba(255, 60, 70, 0.18) !important;
  border-color: rgba(255, 60, 70, 0.5) !important;
  animation: ttWrongFlash 0.35s ease both;
}
@keyframes ttWrongFlash {
  0%   { transform: translateX(-4px); }
  33%  { transform: translateX(4px); }
  66%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.l6-tt-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(244, 192, 70, 0.18);
  border: 1px solid rgba(244, 192, 70, 0.35);
  color: var(--gold-soft);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.l6-tt-text {
  flex: 1;
}

/* ============================================================
   LEVEL 7 — Ngā Maunga Ora
   Panel themes + mini-game CSS
   ============================================================ */

/* ── Panel themes ──────────────────────────────────────────── */
.l7-lava-panel {
  background: radial-gradient(ellipse at top, rgba(220, 60, 20, 0.10) 0%, transparent 70%);
  border: 1px solid rgba(220, 60, 20, 0.28);
  border-radius: var(--radius);
  padding: 16px;
}
.l7-mist-panel {
  background: radial-gradient(ellipse at top, rgba(0, 160, 200, 0.09) 0%, transparent 70%);
  border: 1px solid rgba(0, 160, 200, 0.26);
  border-radius: var(--radius);
  padding: 16px;
}
.l7-peace-panel {
  background: radial-gradient(ellipse at top, rgba(0, 240, 200, 0.08) 0%, transparent 70%);
  border: 1px solid rgba(0, 240, 200, 0.24);
  border-radius: var(--radius);
  padding: 16px;
}

/* ── Task 1 Māui: Obstacle Dodge ──────────────────────────── */
.l7-dodge-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.l7-dodge-lives {
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--kura);
}
.l7-dodge-score {
  font-size: 13px;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-weight: 700;
}
.l7-dodge-area {
  position: relative;
  height: 260px;
  background: linear-gradient(180deg, rgba(30, 8, 0, 0.92) 0%, rgba(16, 4, 0, 0.96) 100%);
  border: 1px solid rgba(220, 60, 20, 0.25);
  border-radius: 8px;
  overflow: hidden;
  margin: 6px 0;
}
.l7-dodge-player {
  position: absolute;
  bottom: 8px;
  width: 20%;
  text-align: center;
  font-size: 22px;
  line-height: 1;
}
.l7-dodge-item {
  position: absolute;
  width: 20%;
  text-align: center;
  font-size: 20px;
  line-height: 1;
}
.l7-dodge-item--mauri {
  color: var(--mauri);
  text-shadow: 0 0 8px var(--mauri);
}
.l7-dodge-item--hazard {
  color: var(--kura);
}
.l7-dodge-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 8px 0 4px;
}

/* ── Task 1 Hinengaro: RPS Energy Balance ─────────────────── */
.l7-rps-progress {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.l7-rps-prompt {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.l7-rps-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.l7-rps-btn {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.l7-rps-btn:hover:not(:disabled) {
  background: rgba(0, 240, 200, 0.08);
  border-color: rgba(0, 240, 200, 0.3);
}
.l7-rps-btn:disabled { cursor: default; opacity: 0.7; }
.l7-rps-btn--ok {
  background: rgba(0, 240, 200, 0.15) !important;
  border-color: var(--mauri) !important;
  color: var(--mauri-soft);
}
.l7-rps-btn--bad {
  background: rgba(255, 60, 70, 0.18) !important;
  border-color: rgba(255, 60, 70, 0.5) !important;
}

/* ── Task 2 Māui: Pulse Calibration ──────────────────────── */
.l7-pulse-bar-wrap {
  position: relative;
  height: 44px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  margin: 14px 0;
  overflow: hidden;
}
.l7-pulse-zone {
  position: absolute;
  left: 39%;
  width: 22%;
  height: 100%;
  background: rgba(244, 192, 70, 0.22);
  border-left:  2px solid rgba(244, 192, 70, 0.7);
  border-right: 2px solid rgba(244, 192, 70, 0.7);
  pointer-events: none;
}
.l7-pulse-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: rgba(0, 240, 200, 0.18);
  pointer-events: none;
}
.l7-pulse-marker {
  position: absolute;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--mauri);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px var(--mauri);
  pointer-events: none;
}
.l7-pulse-btn-wrap {
  text-align: center;
  margin: 14px 0 10px;
}
.l7-pulse-btn {
  font-size: 17px;
  padding: 13px 36px;
  letter-spacing: 0.05em;
}
.l7-pulse-counters {
  display: flex;
  justify-content: center;
  gap: 28px;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text-dim);
}

/* ── Task 2 Hinengaro: Cause & Effect ────────────────────── */
.l7-ce-progress {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.l7-ce-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.l7-ce-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.l7-ce-cause,
.l7-ce-effect {
  width: 100%;
  padding: 9px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.l7-ce-cause:hover:not(:disabled),
.l7-ce-effect:hover:not(:disabled) {
  background: rgba(0, 240, 200, 0.07);
  border-color: rgba(0, 240, 200, 0.28);
}
.l7-ce-cause:disabled,
.l7-ce-effect:disabled { cursor: default; }
.l7-ce-selected {
  border-color: var(--gold) !important;
  background: rgba(244, 192, 70, 0.12) !important;
}
.l7-ce-matched {
  border-color: rgba(0, 240, 200, 0.45) !important;
  background: rgba(0, 240, 200, 0.10) !important;
  color: var(--mauri-soft);
  opacity: 0.75;
}
.l7-ce-wrong {
  border-color: rgba(255, 60, 70, 0.55) !important;
  background: rgba(255, 60, 70, 0.14) !important;
  animation: ceWrongShake 0.32s ease both;
}
@keyframes ceWrongShake {
  0%   { transform: translateX(-3px); }
  35%  { transform: translateX(3px); }
  70%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* ── Task 3 Māui: Maze ────────────────────────────────────── */
.l7-maze-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  max-width: 294px;
  margin: 12px auto;
}
.l7-maze-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 12px;
  background: rgba(0, 240, 200, 0.07);
  border: 1px solid rgba(0, 240, 200, 0.12);
  color: var(--text-dim);
}
.l7-maze-cell--wall {
  background: rgba(255, 80, 30, 0.30);
  border-color: rgba(255, 80, 30, 0.40);
  color: rgba(255, 80, 30, 0.6);
}
.l7-maze-cell--end {
  background: rgba(244, 192, 70, 0.18);
  border-color: rgba(244, 192, 70, 0.50);
  color: var(--gold);
}
.l7-maze-cell--player {
  background: rgba(0, 240, 200, 0.22);
  border-color: var(--mauri);
  font-size: 14px;
}
.l7-maze-controls {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
}
.l7-maze-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.l7-maze-dpad-mid {
  display: flex;
  gap: 32px;
}
.l7-maze-btn {
  width: 52px;
  height: 48px;
  font-size: 16px;
}

/* ── Task 3 Hinengaro: Taonga Placement ──────────────────── */
.l7-taonga-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}
.l7-taonga-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 12px;
  background: rgba(0, 240, 200, 0.06);
  border: 1px solid rgba(0, 240, 200, 0.22);
  border-radius: 10px;
  min-width: 62px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, opacity 0.2s;
}
.l7-taonga-item:hover:not(:disabled) {
  background: rgba(0, 240, 200, 0.12);
  border-color: rgba(0, 240, 200, 0.4);
}
.l7-taonga-item:disabled { cursor: default; }
.l7-taonga-item-icon { font-size: 24px; line-height: 1; }
.l7-taonga-item-name { font-size: 11px; color: var(--text-dim); }
.l7-taonga-item--selected {
  border-color: var(--gold) !important;
  background: rgba(244, 192, 70, 0.14) !important;
  box-shadow: 0 0 8px rgba(244, 192, 70, 0.25);
}
.l7-taonga-item--placed {
  opacity: 0.38;
  border-color: rgba(0, 240, 200, 0.14) !important;
}
.l7-taonga-locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.l7-taonga-loc {
  padding: 11px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 0.14s, border-color 0.14s;
}
.l7-taonga-loc:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.28);
}
.l7-taonga-loc-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.l7-taonga-loc-content {
  font-size: 14px;
  color: var(--text);
  min-height: 20px;
}
.l7-taonga-loc--filled {
  border-style: solid;
  border-color: rgba(0, 240, 200, 0.45);
  background: rgba(0, 240, 200, 0.08);
}
.l7-taonga-loc--wrong {
  border-color: rgba(255, 60, 70, 0.55) !important;
  background: rgba(255, 60, 70, 0.12) !important;
  animation: ceWrongShake 0.32s ease both;
}

/* =============================================================
   LEVEL 8 — Te Ao i Mua / The World Before
   Warm firelight · forest green · earth · river blue · gold mauri
   ============================================================= */

/* ── Level 8 panel theme ─────────────────────────────────── */
.l8-kainga-panel {
  background: radial-gradient(ellipse at top, rgba(180, 120, 30, 0.12) 0%, transparent 70%);
  border: 1px solid rgba(180, 120, 30, 0.30);
  border-radius: var(--radius);
  padding: 16px;
}

/* ── Task 1 Māui: Kī-o-Rahi Arena ───────────────────────── */
.l8-ki-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.l8-ki-lives {
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--kura);
}
.l8-ki-score {
  font-size: 13px;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-weight: 700;
}
.l8-ki-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin: 6px 0;
}
.l8-ki-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 20px;
  line-height: 1;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s;
}
.l8-ki-cell--light {
  background: rgba(60, 40, 10, 0.55);
  border: 1px solid rgba(180, 120, 30, 0.18);
}
.l8-ki-cell--dark {
  background: rgba(30, 20, 5, 0.70);
  border: 1px solid rgba(180, 120, 30, 0.10);
}
.l8-ki-cell--player {
  background: rgba(0, 200, 160, 0.20) !important;
  border-color: var(--mauri) !important;
  box-shadow: 0 0 8px rgba(0, 240, 200, 0.35);
}
.l8-ki-cell--def {
  background: rgba(255, 60, 60, 0.18) !important;
  border-color: rgba(255, 60, 60, 0.5) !important;
}
.l8-ki-cell--centre {
  background: rgba(244, 192, 70, 0.12) !important;
  border-color: rgba(244, 192, 70, 0.40) !important;
}
.l8-ki-controls {
  display: flex;
  justify-content: center;
  margin: 10px 0 4px;
}
.l8-ki-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.l8-ki-dpad-mid {
  display: flex;
  gap: 4px;
}
.l8-ki-btn {
  min-width: 52px;
  min-height: 44px;
}

/* ── Task 1 Hinengaro: Maramataka Puzzle ─────────────────── */
.l8-mara-progress {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.l8-mara-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.l8-mara-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.l8-mara-sign,
.l8-mara-action {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(180, 120, 30, 0.22);
  border-radius: 9px;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
.l8-mara-sign:hover:not(:disabled),
.l8-mara-action:hover:not(:disabled) {
  background: rgba(180, 120, 30, 0.12);
  border-color: rgba(244, 192, 70, 0.40);
}
.l8-mara-sign:disabled,
.l8-mara-action:disabled { cursor: default; }
.l8-mara-selected {
  background: rgba(244, 192, 70, 0.14) !important;
  border-color: rgba(244, 192, 70, 0.60) !important;
  color: var(--gold-soft) !important;
}
.l8-mara-matched {
  background: rgba(0, 240, 200, 0.12) !important;
  border-color: rgba(0, 240, 200, 0.45) !important;
  color: var(--mauri-soft) !important;
  opacity: 0.80;
}
.l8-mara-wrong {
  border-color: rgba(255, 60, 70, 0.55) !important;
  background: rgba(255, 60, 70, 0.12) !important;
  animation: ceWrongShake 0.32s ease both;
}

/* ── Task 2 Māui: Kai Gathering ──────────────────────────── */
.l8-kai-hud {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
  padding: 0 2px;
}
.l8-kai-area {
  position: relative;
  width: 100%;
  height: 260px;
  background: linear-gradient(180deg, rgba(10, 40, 20, 0.92) 0%, rgba(5, 25, 10, 0.96) 100%);
  border: 1px solid rgba(60, 160, 80, 0.25);
  border-radius: 8px;
  overflow: hidden;
  margin: 6px 0;
}
.l8-kai-target {
  position: absolute;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.07);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}
.l8-kai-target--correct {
  border-color: rgba(0, 240, 200, 0.40);
  box-shadow: 0 0 10px rgba(0, 240, 200, 0.20);
}
.l8-kai-target--wrong {
  border-color: rgba(255, 60, 70, 0.30);
}
.l8-kai-target--correct:hover {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 0 16px rgba(0, 240, 200, 0.40);
}
.l8-kai-target--wrong:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.l8-kai-target--good {
  background: rgba(0, 240, 200, 0.25) !important;
  border-color: var(--mauri) !important;
}
.l8-kai-target--penalty {
  background: rgba(255, 60, 70, 0.25) !important;
  border-color: var(--kura) !important;
}

/* ── Task 2 Hinengaro: I Spy Kāinga ─────────────────────── */
.l8-ispy-progress,
.l8-kaitiaki-progress {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.l8-ispy-scene,
.l8-kaitiaki-scene {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(180, 120, 30, 0.25);
  margin-bottom: 10px;
  background: linear-gradient(180deg,
    rgba(8, 30, 50, 0.95) 0%,
    rgba(12, 50, 20, 0.90) 40%,
    rgba(30, 18, 8, 0.95) 100%
  );
}
/* Scene background decorative layers */
.l8-ispy-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(8, 22, 45, 0.9) 0%, rgba(12, 40, 18, 0.6) 100%);
}
.l8-ispy-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(35, 18, 5, 0.6) 0%, rgba(50, 28, 8, 0.95) 100%);
}
.l8-ispy-whare {
  position: absolute;
  left: 15%; top: 22%;
  width: 22%; height: 35%;
  background: rgba(60, 35, 10, 0.75);
  border: 1px solid rgba(180, 100, 30, 0.4);
  border-radius: 2px 2px 0 0;
  clip-path: polygon(10% 100%, 90% 100%, 100% 40%, 50% 0%, 0% 40%);
}
.l8-ispy-garden {
  position: absolute;
  left: 60%; bottom: 25%;
  width: 30%; height: 22%;
  background: rgba(20, 80, 25, 0.55);
  border: 1px solid rgba(40, 160, 50, 0.35);
  border-radius: 4px;
}
.l8-ispy-awa {
  position: absolute;
  bottom: 8%; left: 0; right: 0;
  height: 10%;
  background: linear-gradient(90deg, transparent, rgba(20, 80, 160, 0.40), rgba(0, 120, 200, 0.35), transparent);
  border-radius: 4px;
}
/* Additional elements for kaitiaki scene */
.l8-kaitiaki-marae {
  position: absolute;
  left: 30%; top: 28%;
  width: 38%; height: 30%;
  background: rgba(50, 30, 8, 0.70);
  border: 1px solid rgba(180, 100, 30, 0.45);
  border-radius: 3px;
}
.l8-kaitiaki-pou {
  position: absolute;
  left: 48%; top: 15%;
  width: 4%; height: 45%;
  background: rgba(80, 45, 12, 0.90);
  border: 1px solid rgba(180, 100, 30, 0.50);
  border-radius: 2px;
}
.l8-kaitiaki-path {
  position: absolute;
  bottom: 15%; left: 10%; right: 10%;
  height: 6%;
  background: rgba(90, 60, 20, 0.50);
  border-radius: 3px;
}
/* Clickable hidden items */
.l8-ispy-item,
.l8-kaitiaki-item {
  position: absolute;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(180, 120, 30, 0.30);
  background: rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.l8-ispy-item:hover,
.l8-kaitiaki-item:hover {
  transform: translate(-50%, -50%) scale(1.15);
  border-color: rgba(244, 192, 70, 0.60);
  box-shadow: 0 0 10px rgba(244, 192, 70, 0.25);
}
.l8-ispy-item--found,
.l8-kaitiaki-item--found {
  background: rgba(0, 240, 200, 0.22) !important;
  border-color: var(--mauri) !important;
  box-shadow: 0 0 12px rgba(0, 240, 200, 0.40);
  cursor: default;
  opacity: 0.70;
}

/* ── Task 3 Hinengaro: Whakapapa Protocol ─────────────────── */
.l8-wp-roles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0.8rem;
}
.l8-wp-role-card {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(140,90,30,0.40);
  background: rgba(18,10,3,0.85);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  width: 100%;
}
.l8-wp-role-card:hover { background: rgba(140,90,30,0.20); border-color: var(--gold); }
.l8-wp-role-card:active { transform: scale(0.97); }
.l8-wp-role-emoji { font-size: 1.3rem; flex-shrink: 0; }
.l8-wp-role-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--gold);
  display: block;
  white-space: nowrap;
}
.l8-wp-role-desc {
  font-size: 0.70rem;
  color: var(--text-dim);
  line-height: 1.35;
  display: block;
}
.l8-wp-placed-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin-bottom: 0.3rem;
}
.l8-wp-placed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 28px;
  margin-bottom: 0.3rem;
}
.l8-wp-empty { font-size: 0.75rem; color: var(--text-dim); font-style: italic; }
.l8-wp-placed-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--mauri);
}
.l8-wp-placed-num { font-size: 0.65rem; color: var(--text-dim); width: 14px; text-align: right; }
.l8-wp-placed-emoji { font-size: 1rem; }
.l8-wp-placed-role { font-weight: 700; }
.l8-wp-prog {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

/* ── Task 3 Māui: Strategy Board ─────────────────────────── */
.l8-strat-hud {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.l8-strat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  margin: 6px 0;
}
.l8-strat-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.12s, box-shadow 0.12s;
}
.l8-strat-cell--light {
  background: rgba(60, 38, 10, 0.55);
  border: 1px solid rgba(180, 120, 30, 0.16);
}
.l8-strat-cell--dark {
  background: rgba(22, 14, 4, 0.72);
  border: 1px solid rgba(180, 120, 30, 0.08);
}
.l8-strat-cell--sel {
  background: rgba(244, 192, 70, 0.22) !important;
  border-color: rgba(244, 192, 70, 0.60) !important;
  box-shadow: 0 0 8px rgba(244, 192, 70, 0.30);
}
.l8-strat-cell:hover:not(.l8-strat-cell--sel) {
  background: rgba(255,255,255,0.06) !important;
}
.l8-strat-piece {
  pointer-events: none;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   LEVEL 9 — Te Taenga Mai / The Arrival of Change
   Tone: parchment, ink, shadow, old map, broken gold, dark red
   ═══════════════════════════════════════════════════════════ */

.l9-panel {
  background: rgba(18, 12, 8, 0.90);
  border-color: rgba(140, 90, 30, 0.35);
}

/* ── Level 9 complete portal ── */
.l9-complete-portal {
  text-align: center;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 6vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--mauri);
  text-shadow: 0 0 24px rgba(0, 240, 200, 0.55), 0 0 6px rgba(0,0,0,0.8);
  padding: 1.5rem 0 0.5rem;
}

/* ── Nohoanga Ngaro ── */
.l9-noho-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  font-family: var(--font-head);
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.l9-noho-timer-bar {
  height: 6px;
  background: rgba(255,255,255,0.10);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.l9-noho-timer-fill {
  height: 100%;
  background: var(--mauri);
  border-radius: 4px;
  transition: width 0.9s linear, background 0.3s;
}
.l9-noho-timer--urgent {
  background: var(--kura) !important;
}
.l9-noho-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.l9-noho-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.45rem 0.3rem 0.4rem;
  border: 1px solid rgba(140,90,30,0.35);
  border-radius: 8px;
  background: rgba(30,20,10,0.6);
  color: var(--text);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  min-height: 72px;
  position: relative;
}
.l9-noho-seat:active { transform: scale(0.96); }
.l9-noho-seat__icon  { font-size: 1.5rem; line-height: 1; }
.l9-noho-seat__name  { font-size: 0.62rem; opacity: 0.75; text-align: center; }
.l9-noho-seat__you   { font-size: 0.6rem; color: var(--gold); font-weight: 700; }
.l9-noho-seat__threat {
  position: absolute;
  top: 2px; right: 4px;
  font-size: 0.9rem;
}
.l9-noho-seat--player {
  border-color: var(--gold);
  background: rgba(244,192,70,0.15);
  box-shadow: 0 0 10px rgba(244,192,70,0.25);
}
.l9-noho-seat--threat {
  border-color: var(--kura);
  background: rgba(255,93,108,0.15);
  animation: l9-threat-pulse 0.8s ease-in-out infinite alternate;
}
.l9-noho-seat--blocked {
  border-color: rgba(80,60,40,0.4);
  background: rgba(10,8,5,0.7);
  opacity: 0.5;
  cursor: default;
}
@keyframes l9-threat-pulse {
  from { box-shadow: 0 0 6px rgba(255,93,108,0.3); }
  to   { box-shadow: 0 0 18px rgba(255,93,108,0.7); }
}

/* ── Hidden History ── */
.l9-hist-progress {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: right;
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.l9-hist-scene {
  position: relative;
  width: 100%;
  padding-top: 62%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: #1a1008;
  border: 1px solid rgba(140,90,30,0.3);
}
.l9-hist-bg {
  position: absolute;
  pointer-events: none;
}
.l9-hist-bg--sky {
  top: 0; left: 0; right: 0; height: 38%;
  background: linear-gradient(180deg, #1c1408 0%, #2a1f10 100%);
}
.l9-hist-bg--ground {
  bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, #2e1f0e 0%, #1a0f06 100%);
}
.l9-hist-bg--paper {
  top: 15%; left: 10%; right: 10%; height: 70%;
  background: rgba(220, 200, 160, 0.07);
  border: 1px solid rgba(200,180,120,0.15);
  border-radius: 3px;
}
.l9-hist-bg--lines {
  top: 20%; left: 5%; right: 5%; height: 60%;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 12px,
    rgba(180,150,80,0.06) 12px, rgba(180,150,80,0.06) 13px
  );
}
.l9-hist-item {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(140,90,30,0.5);
  background: rgba(20,12,5,0.75);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.l9-hist-item:hover  { background: rgba(140,90,30,0.3); border-color: var(--gold); transform: translate(-50%,-50%) scale(1.12); }
.l9-hist-item:active { transform: translate(-50%,-50%) scale(0.96); }
.l9-hist-item--found {
  background: rgba(0,240,200,0.18);
  border-color: var(--mauri);
  box-shadow: 0 0 8px rgba(0,240,200,0.3);
  cursor: default;
}

/* ── Whenua Board ── */
.l9-board-mana-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.l9-board-mana-label { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; }
.l9-board-mana-bar {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.l9-board-mana-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease, background 0.4s;
}
.l9-board-mana-num {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.l9-board-pos {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: right;
  margin-bottom: 0.5rem;
}
.l9-board-strip {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 0.75rem;
  scrollbar-width: thin;
}
.l9-board-sq {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  font-size: 1rem;
  border: 1px solid rgba(140,90,30,0.25);
  background: rgba(25,15,8,0.7);
  transition: background 0.2s;
}
.l9-board-sq--visited  { opacity: 0.4; background: rgba(10,8,5,0.8); }
.l9-board-sq--current  { border-color: var(--gold); background: rgba(244,192,70,0.20); box-shadow: 0 0 8px rgba(244,192,70,0.35); }
.l9-board-sq--ahead    { opacity: 0.65; }
.l9-board-card {
  background: rgba(18,12,6,0.85);
  border: 1px solid rgba(140,90,30,0.35);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  text-align: center;
  min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
}
.l9-board-card-emoji  { font-size: 2rem; line-height: 1; }
.l9-board-card-label  { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--text); }
.l9-board-card-effect { font-size: 0.82rem; font-weight: 700; }
.l9-board-card-effect--good { color: var(--mauri); }
.l9-board-card-effect--bad  { color: var(--kura); }
.l9-board-card-desc   { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }

/* ── Hidden Kupu ── */
.l9-kupu-prog {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.l9-kupu-word {
  font-family: var(--font-head);
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-align: center;
  padding: 0.6rem 0 0.3rem;
  min-height: 2.8rem;
  white-space: pre;
}
.l9-kupu-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
  margin-bottom: 0.4rem;
  min-height: 1rem;
}
.l9-kupu-fade {
  text-align: center;
  font-size: 1.1rem;
  color: var(--mauri);
  letter-spacing: 0.12em;
  margin-bottom: 0.6rem;
}
.l9-kupu-fade-gone { color: rgba(255,255,255,0.15); }
.l9-kupu-keyboard {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.l9-kupu-key {
  width: 34px; height: 34px;
  border-radius: 5px;
  border: 1px solid rgba(140,90,30,0.4);
  background: rgba(30,18,8,0.8);
  color: var(--text);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  display: flex; align-items: center; justify-content: center;
}
.l9-kupu-key:hover:not(:disabled) { background: rgba(140,90,30,0.30); border-color: var(--gold); }
.l9-kupu-key:active:not(:disabled){ transform: scale(0.93); }
.l9-kupu-key--used  { opacity: 0.28; cursor: default; background: rgba(10,6,3,0.7); }
.l9-kupu-key--wrong { border-color: var(--kura) !important; color: var(--kura) !important; }

/* ── Path of Consequence ── */
.l9-path-mana-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.l9-path-card {
  background: rgba(18,12,6,0.85);
  border: 1px solid rgba(140,90,30,0.35);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.5rem;
}
.l9-path-step {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.l9-path-situation {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 0.9rem;
}
.l9-path-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.l9-path-option {
  text-align: left;
  white-space: normal;
  padding: 0.55rem 0.85rem;
  font-size: 0.84rem;
  line-height: 1.4;
  border-color: rgba(140,90,30,0.4) !important;
  color: var(--text) !important;
}
.l9-path-option:hover { border-color: var(--gold) !important; background: rgba(244,192,70,0.08) !important; }
.l9-path-outcome {
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 0.5rem 0;
}
.l9-path-feedback--ok  { color: var(--mauri); }
.l9-path-feedback--bad { color: rgba(255,180,100,0.9); }
.l9-path-complete {
  text-align: center;
  padding: 0.5rem 0;
}
.l9-path-complete__icon { font-size: 2rem; margin-bottom: 0.4rem; color: var(--mauri); }
.l9-path-complete__text { font-size: 0.88rem; color: var(--text); line-height: 1.55; white-space: pre-line; }
.l9-path-complete__mana { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.5rem; }

/* ── Kupu Categories ── */
.l9-cat-prog {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}
.l9-cat-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 380px) { .l9-cat-layout { grid-template-columns: 1fr; } }
.l9-cat-tiles-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}
.l9-cat-tiles {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.l9-cat-tile {
  padding: 0.4rem 0.6rem;
  border-radius: 7px;
  border: 1px solid rgba(140,90,30,0.40);
  background: rgba(25,15,8,0.75);
  color: var(--text);
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
  text-align: left;
}
.l9-cat-tile:hover { background: rgba(140,90,30,0.22); border-color: var(--gold); }
.l9-cat-tile:active { transform: scale(0.97); }
.l9-cat-tile--selected {
  border-color: var(--gold);
  background: rgba(244,192,70,0.18);
  box-shadow: 0 0 8px rgba(244,192,70,0.25);
}
.l9-cat-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.l9-cat-category {
  padding: 0.45rem 0.55rem;
  border-radius: 7px;
  border: 1px solid rgba(0,240,200,0.22);
  background: rgba(0,240,200,0.04);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.l9-cat-category:hover { background: rgba(0,240,200,0.10); border-color: var(--mauri); }
.l9-cat-category--done {
  border-color: var(--mauri);
  background: rgba(0,240,200,0.12);
  cursor: default;
}
.l9-cat-category--shake {
  animation: l9-cat-shake 0.35s ease;
}
@keyframes l9-cat-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.l9-cat-category__label {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mauri);
  letter-spacing: 0.06em;
}
.l9-cat-category__desc {
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-top: 1px;
}
.l9-cat-category__words {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0.3rem;
  min-height: 4px;
}
.l9-cat-placed-word {
  font-size: 0.7rem;
  background: rgba(0,240,200,0.14);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--mauri);
}

/* ── Resistance Rally (L9 Task 2 Māui) ── */
.l9-rr-progress {
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  text-align: center;
}
.l9-rr-tile-area {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.l9-rr-tile {
  width: 100%;
  padding: 1rem 0.9rem;
  border-radius: 12px;
  border: 2px solid rgba(140,90,30,0.45);
  background: rgba(20,12,5,0.88);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
.l9-rr-tile:active { transform: scale(0.97); }
.l9-rr-tile--pressure {
  border-color: rgba(255,80,80,0.55);
  background: rgba(30,8,8,0.92);
}
.l9-rr-tile--resistance {
  border-color: rgba(0,200,140,0.50);
  background: rgba(4,20,14,0.92);
}
.l9-rr-tile--community {
  border-color: rgba(244,192,70,0.55);
  background: rgba(20,14,3,0.92);
}
.l9-rr-tile-type {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}
.l9-rr-tile--pressure  .l9-rr-tile-type { color: rgba(255,110,110,0.80); }
.l9-rr-tile--resistance .l9-rr-tile-type { color: rgba(0,220,160,0.80); }
.l9-rr-tile--community  .l9-rr-tile-type { color: var(--gold); }
.l9-rr-tile-emoji {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.l9-rr-tile-label {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.l9-rr-tile-desc {
  font-size: 0.76rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}
.l9-rr-tile-cta {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-dim);
  opacity: 0.75;
}
.l9-rr-timer-track {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.l9-rr-timer-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 3px;
  transition: width 0.1s linear;
}

/* =============================================================
   LEVEL 10 — Hokinga Mai / The Journey Home
   ============================================================= */

/* ── L10 generic panel wrapper ── */
.l10-panel {
  border-color: rgba(0, 240, 200, 0.22);
  background: rgba(4, 8, 18, 0.92);
}

/* ── Complete / Finale portal ── */
.l10-complete-portal {
  padding: 2rem 1rem;
  text-align: center;
}
.l10-complete-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.l10-complete-words span {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(14px, 3vw, 20px);
  letter-spacing: 0.14em;
  color: var(--gold);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(244,192,70,0.4);
  border-radius: 999px;
  background: rgba(244,192,70,0.07);
  text-shadow: 0 0 20px rgba(244,192,70,0.4);
  animation: mauriPulse 2.8s var(--easing) infinite;
}
.l10-complete-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(22px, 5vw, 36px);
  letter-spacing: 0.22em;
  background: linear-gradient(180deg, #fff 0%, var(--mauri-soft) 60%, var(--mauri) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  margin-bottom: 0.5rem;
}
.l10-complete-sub {
  font-family: 'Cinzel', serif;
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Task 1a: Earthquake Balance ── */
.l10-eq-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}
.l10-eq-bar-wrap {
  position: relative;
  width: 100%;
  height: 36px;
  background: rgba(6, 12, 24, 0.9);
  border: 1px solid rgba(0,240,200,0.2);
  border-radius: 999px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.l10-eq-safe-zone {
  position: absolute;
  top: 0; bottom: 0;
  left: 36%; right: 36%;
  background: rgba(0, 240, 200, 0.12);
  border-left: 2px solid rgba(0,240,200,0.4);
  border-right: 2px solid rgba(0,240,200,0.4);
}
.l10-eq-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(244,192,70,0.7);
  transition: left 0.12s linear, background 0.18s;
  z-index: 2;
}
.l10-eq-marker--safe    { background: var(--mauri-soft); box-shadow: 0 0 14px rgba(0,240,200,0.8); }
.l10-eq-marker--danger  { background: var(--kura);       box-shadow: 0 0 12px rgba(255,93,108,0.7); }
.l10-eq-timer-bar {
  width: 100%; height: 5px;
  background: rgba(0,240,200,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.9rem;
}
.l10-eq-timer-fill {
  height: 100%;
  background: var(--mauri);
  border-radius: 3px;
  transition: width 0.45s linear;
}
.l10-eq-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 0.5rem;
}
.l10-eq-btn {
  flex: 1;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.14em;
  padding: 16px 12px;
  background: rgba(244,192,70,0.1);
  border: 1px solid rgba(244,192,70,0.4);
  border-radius: var(--radius);
  color: var(--gold-soft); cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 100ms;
  user-select: none;
}
.l10-eq-btn:hover { background: rgba(244,192,70,0.22); box-shadow: 0 0 14px rgba(244,192,70,0.25); transform: translateY(-1px); }
.l10-eq-btn:active { transform: translateY(0); }

/* ── Task 1b: Emergency Signal ── */
.l10-sig-prog {
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--mauri); margin-bottom: 0.75rem; text-align: center;
}
.l10-sig-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 0.5rem;
}
.l10-sig-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: rgba(6, 14, 30, 0.85);
  border: 1px solid rgba(0,240,200,0.22);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 160ms, border-color 160ms, transform 110ms;
}
.l10-sig-card:hover:not(:disabled) { background: rgba(0,240,200,0.08); border-color: rgba(0,240,200,0.55); transform: translateY(-1px); }
.l10-sig-card:active:not(:disabled) { transform: translateY(0); }
.l10-sig-card:disabled { opacity: 0.5; cursor: not-allowed; }
.l10-sig-card--placed {
  border-color: rgba(0,240,200,0.55);
  background: rgba(0,240,200,0.08);
  cursor: not-allowed;
}
.l10-sig-card--wrong {
  border-color: var(--kura) !important;
  background: rgba(255,93,108,0.12) !important;
  animation: l10-shake 0.3s ease;
}
.l10-sig-icon  { font-size: 1.6rem; line-height: 1; }
.l10-sig-label { font-size: 0.75rem; color: var(--text); text-align: center; line-height: 1.3; }
.l10-sig-num {
  position: absolute; top: 5px; right: 8px;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 0.75rem; color: var(--gold);
}

/* ── Task 2a + 5a: Lane Runner ── */
.l10-runner-hud {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-dim);
  margin-bottom: 0.6rem;
}
.l10-runner-grid {
  display: grid;
  gap: 3px;
  margin: 0 auto 0.8rem;
  max-width: 280px;
}
.l10-runner-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: rgba(6, 12, 28, 0.8);
  border: 1px solid rgba(30, 55, 80, 0.5);
  border-radius: 5px;
  transition: background 180ms;
}
.l10-runner-cell--player {
  background: rgba(0,240,200,0.18) !important;
  border-color: var(--mauri) !important;
  box-shadow: 0 0 10px rgba(0,240,200,0.4);
  color: var(--mauri-soft);
  font-size: 1.2rem;
}
.l10-runner-controls {
  display: flex; gap: 10px; margin-bottom: 0.5rem;
}
.l10-runner-btn {
  flex: 1;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.14em;
  padding: 16px 12px;
  background: rgba(0,240,200,0.08);
  border: 1px solid rgba(0,240,200,0.35);
  border-radius: var(--radius);
  color: var(--mauri-soft); cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 100ms;
  user-select: none;
}
.l10-runner-btn:hover { background: rgba(0,240,200,0.18); box-shadow: 0 0 14px rgba(0,240,200,0.25); transform: translateY(-1px); }
.l10-runner-btn:active { transform: translateY(0); }

/* ── Task 2b: Ocean Echo Memory ── */
.l10-echo-round {
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mauri-soft); text-align: center; margin-bottom: 0.75rem;
}
.l10-echo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 280px;
  margin: 0 auto 0.8rem;
}
.l10-echo-btn {
  aspect-ratio: 1;
  font-size: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 14, 30, 0.85);
  border: 2px solid var(--echo-color, rgba(0,240,200,0.3));
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 140ms, box-shadow 140ms, transform 100ms;
  color: var(--text);
}
.l10-echo-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.l10-echo-btn:not(:disabled):hover { background: rgba(255,255,255,0.06); transform: scale(1.04); }
.l10-echo-btn--flash {
  background: var(--echo-color, rgba(0,240,200,0.3)) !important;
  box-shadow: 0 0 24px var(--echo-color, rgba(0,240,200,0.5));
  transform: scale(1.08);
}
.l10-echo-btn--correct {
  background: rgba(0,240,200,0.25) !important;
  box-shadow: 0 0 18px rgba(0,240,200,0.5);
}
.l10-echo-btn--wrong {
  background: rgba(255,93,108,0.25) !important;
  box-shadow: 0 0 18px rgba(255,93,108,0.5);
}

/* ── Task 3a: Pā Maze ── */
.l10-maze-wrap {
  display: flex; justify-content: center;
  margin-bottom: 0.8rem;
}
.l10-maze-grid {
  display: grid;
  gap: 2px;
  max-width: 260px; width: 100%;
}
.l10-maze-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 16, 32, 0.8);
  border: 1px solid rgba(30, 55, 80, 0.45);
  border-radius: 3px;
  font-size: 0.75rem;
  transition: background 200ms, box-shadow 200ms;
}
.l10-maze-cell--wall {
  background: linear-gradient(135deg, rgba(14,9,5,0.98), rgba(24,16,10,0.97));
  border-color: rgba(40,25,12,0.55);
}
.l10-maze-cell--goal {
  background: rgba(244,192,70,0.1);
  border-color: rgba(244,192,70,0.5);
  color: var(--gold);
  font-size: 0.8rem;
  animation: mauriPulse 2.4s var(--easing) infinite;
}
.l10-maze-cell--player {
  background: rgba(0,240,200,0.2) !important;
  border-color: var(--mauri) !important;
  box-shadow: 0 0 12px rgba(0,240,200,0.4);
  color: var(--mauri-soft);
}
.l10-maze-controls {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin-bottom: 0.5rem;
}
.l10-maze-ctrl-row {
  display: flex; gap: 6px; align-items: center;
}
.l10-maze-btn {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; padding: 13px 18px; min-width: 52px;
  background: rgba(244,192,70,0.08);
  border: 1px solid rgba(244,192,70,0.38);
  border-radius: var(--radius); color: var(--gold-soft);
  cursor: pointer;
  transition: background 160ms, box-shadow 160ms, transform 100ms;
}
.l10-maze-btn:hover { background: rgba(244,192,70,0.2); box-shadow: 0 0 12px rgba(244,192,70,0.25); transform: translateY(-1px); }
.l10-maze-btn:active { transform: translateY(0); }

/* ── Task 3b: Taonga Placement ── */
.l10-taonga-prog {
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--mauri); margin-bottom: 0.75rem; text-align: center;
}
.l10-taonga-section-label {
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-dim);
  margin-bottom: 0.4rem;
}
.l10-taonga-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0.5rem;
}
.l10-taonga-tiles {
  display: flex; flex-direction: column; gap: 5px;
}
.l10-taonga-tile {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px;
  background: rgba(6, 14, 30, 0.85);
  border: 1px solid rgba(244,192,70,0.28);
  border-radius: 8px; cursor: pointer;
  transition: background 140ms, border-color 140ms, transform 100ms;
}
.l10-taonga-tile:hover { background: rgba(244,192,70,0.1); border-color: var(--gold); transform: translateY(-1px); }
.l10-taonga-tile:active { transform: translateY(0); }
.l10-taonga-tile--selected {
  border-color: var(--gold);
  background: rgba(244,192,70,0.18);
  box-shadow: 0 0 8px rgba(244,192,70,0.25);
}
.l10-taonga-label { font-size: 0.82rem; color: var(--text); }
.l10-taonga-locs {
  display: flex; flex-direction: column; gap: 5px;
}
.l10-taonga-loc {
  padding: 9px 10px;
  background: rgba(0,240,200,0.04);
  border: 1px solid rgba(0,240,200,0.2);
  border-radius: 8px; cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.l10-taonga-loc:hover { background: rgba(0,240,200,0.10); border-color: var(--mauri); }
.l10-taonga-loc--done {
  border-color: rgba(0,240,200,0.55);
  background: rgba(0,240,200,0.10);
  cursor: default;
}
.l10-taonga-loc--shake { animation: l10-shake 0.35s ease; }
.l10-taonga-loc-icon  { font-size: 1rem; margin-right: 4px; }
.l10-taonga-loc-label { font-size: 0.75rem; color: var(--text); display: block; }
.l10-taonga-loc-placed {
  font-size: 0.7rem; color: var(--mauri-soft);
  display: block; margin-top: 2px;
}

/* ── Task 4a: City Grid Reaction ── */
.l10-city-hud {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-dim);
  margin-bottom: 0.75rem;
}
.l10-city-signal-wrap {
  display: flex; justify-content: center;
  margin-bottom: 0.75rem;
}
.l10-city-signal {
  font-size: 4rem;
  line-height: 1;
  filter: grayscale(0.6);
  transition: filter 200ms, transform 200ms;
}
.l10-city-signal--go   { filter: none; transform: scale(1.1); animation: mauriPulse 0.8s var(--easing) infinite; }
.l10-city-signal--stop { filter: grayscale(0.3); transform: scale(1); }
.l10-city-go-btn {
  display: block; width: 100%;
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: 18px; letter-spacing: 0.22em;
  padding: 20px 16px;
  background: rgba(6, 14, 30, 0.9);
  border: 2px solid rgba(0,240,200,0.2);
  border-radius: var(--radius);
  color: var(--text-faint); cursor: not-allowed;
  transition: background 160ms, border-color 160ms, box-shadow 160ms, transform 100ms;
  margin-bottom: 0.5rem;
}
.l10-city-go-btn--active {
  background: rgba(0,240,200,0.14);
  border-color: var(--mauri);
  color: var(--mauri-soft);
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0,240,200,0.25);
  animation: l10-pulse-btn 0.5s var(--easing) infinite alternate;
}
.l10-city-go-btn--active:hover { background: rgba(0,240,200,0.22); transform: translateY(-1px); }
.l10-city-go-btn--active:active { transform: translateY(0); }
@keyframes l10-pulse-btn {
  from { box-shadow: 0 0 16px rgba(0,240,200,0.2); }
  to   { box-shadow: 0 0 30px rgba(0,240,200,0.45); }
}

/* ── Task 4b: Te Reo Memory Cards ── */
.l10-mem-prog {
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--mauri); margin-bottom: 0.75rem; text-align: center;
}
.l10-mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 0.5rem;
}
.l10-mem-card {
  position: relative;
  aspect-ratio: 1;
  perspective: 600px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}
.l10-mem-card-back,
.l10-mem-card-front {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 0.65rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 3px;
  line-height: 1.2;
  transition: opacity 200ms, transform 200ms;
  backface-visibility: hidden;
}
.l10-mem-card-back {
  background: rgba(18, 26, 44, 0.92);
  border: 1px solid rgba(0,240,200,0.22);
  color: var(--mauri-soft);
  font-size: 0.85rem;
}
.l10-mem-card-front {
  background: rgba(6, 14, 30, 0.92);
  border: 1px solid rgba(244,192,70,0.35);
  color: var(--text);
  opacity: 0;
  font-size: 0.6rem;
}
.l10-mem-card--flipped .l10-mem-card-back  { opacity: 0; }
.l10-mem-card--flipped .l10-mem-card-front { opacity: 1; }
.l10-mem-card--matched .l10-mem-card-front {
  border-color: rgba(0,240,200,0.55);
  background: rgba(0,240,200,0.12);
  color: var(--mauri-soft);
}
.l10-mem-card:not(:disabled):hover .l10-mem-card-back {
  border-color: rgba(0,240,200,0.5);
  background: rgba(0,240,200,0.08);
}

/* ── Task 5b: Password Cipher ── */
.l10-cipher-prog {
  font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--mauri); margin-bottom: 0.75rem; text-align: center;
}
.l10-cipher-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0.5rem;
}
.l10-cipher-tiles {
  display: flex; flex-direction: column; gap: 5px;
}
.l10-cipher-tile {
  padding: 8px 10px;
  background: rgba(6, 14, 30, 0.85);
  border: 1px solid rgba(244,192,70,0.28);
  border-radius: 7px; cursor: pointer;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--gold-soft);
  text-align: center;
  transition: background 140ms, border-color 140ms, transform 100ms;
  word-break: break-word;
}
.l10-cipher-tile:hover { background: rgba(244,192,70,0.1); border-color: var(--gold); transform: translateY(-1px); }
.l10-cipher-tile:active { transform: translateY(0); }
.l10-cipher-tile--selected {
  border-color: var(--gold);
  background: rgba(244,192,70,0.18);
  box-shadow: 0 0 8px rgba(244,192,70,0.25);
}
.l10-cipher-slots {
  display: flex; flex-direction: column; gap: 4px;
}
.l10-cipher-slot {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px;
  background: rgba(0,240,200,0.04);
  border: 1px solid rgba(0,240,200,0.18);
  border-radius: 6px; cursor: pointer;
  transition: background 140ms, border-color 140ms;
  min-height: 36px;
}
.l10-cipher-slot:hover { background: rgba(0,240,200,0.10); border-color: var(--mauri); }
.l10-cipher-slot--placed {
  border-color: rgba(0,240,200,0.5);
  background: rgba(0,240,200,0.10);
  cursor: default;
}
.l10-cipher-slot--shake { animation: l10-shake 0.35s ease; }
.l10-cipher-slot-num {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 0.68rem; color: var(--text-faint);
  white-space: nowrap; min-width: 18px;
}
.l10-cipher-slot-word {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 0.68rem; color: var(--mauri-soft);
  word-break: break-word;
}

/* ── Shared shake keyframe ── */
@keyframes l10-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ── Mobile tweaks for Level 10 ── */
@media (max-width: 380px) {
  .l10-taonga-layout,
  .l10-cipher-layout { grid-template-columns: 1fr; }
  .l10-mem-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .l10-mem-card-front,
  .l10-mem-card-back  { font-size: 0.55rem; }
}

/* ── Level 10 NEW mini-game classes ── */

/* Falling Floor */
.l10-ff-hud {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.82rem; color: var(--text-dim); margin: 6px 0 4px;
}
.l10-ff-timer-bar {
  height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin: 6px 0 8px; overflow: hidden;
}
.l10-ff-timer-fill {
  height: 100%; background: var(--kura); border-radius: 3px; transition: width 0.1s linear;
}
.l10-ff-grid {
  display: grid; gap: 4px; margin: 8px 0;
}
.l10-ff-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 4px;
  background: rgba(255,255,255,0.04); font-size: 1rem; cursor: default;
  transition: background 0.15s;
}
.l10-ff-cell--danger {
  background: rgba(255,93,108,0.35); border-color: var(--kura);
  animation: l10-ff-pulse 0.4s ease infinite alternate;
}
.l10-ff-cell--player  { background: rgba(0,240,200,0.18); border-color: var(--mauri); font-weight: 700; }
.l10-ff-cell--doomed  { background: rgba(200,0,30,0.55);  border-color: #ff0000; }
.l10-ff-cell[data-idx] { cursor: pointer; }
.l10-ff-cell[data-idx]:hover { background: rgba(0,240,200,0.22); border-color: var(--mauri); }
@keyframes l10-ff-pulse { to { background: rgba(255,93,108,0.65); } }

/* Emergency Network */
.l10-net-prog {
  font-size: 0.78rem; color: var(--text-dim); text-align: center; margin: 4px 0 8px;
}
.l10-net-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0;
}
.l10-net-node {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border: 2px solid rgba(0,240,200,0.3); border-radius: 8px;
  padding: 10px 6px; cursor: pointer; background: rgba(0,240,200,0.05);
  transition: background 0.15s, border-color 0.15s;
}
.l10-net-node:hover         { background: rgba(0,240,200,0.12); border-color: var(--mauri); }
.l10-net-node--dark         { border-color: rgba(150,150,150,0.3); background: rgba(0,0,0,0.3); }
.l10-net-node--selected     { border-color: var(--gold); background: rgba(244,192,70,0.12); }
.l10-net-node--wrong        { animation: l10-shake 0.3s ease; border-color: var(--kura); }
.l10-net-node-icon          { font-size: 1.4rem; line-height: 1; }
.l10-net-node-num           { font-size: 0.62rem; color: var(--text-dim); }

/* Current Navigator */
.l10-nav-hud {
  display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-dim); margin: 6px 0 4px;
}
.l10-nav-pips {
  display: flex; gap: 8px; justify-content: center; margin: 6px 0;
}
.l10-nav-pip {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold);
  background: transparent; transition: background 0.2s;
}
.l10-nav-pip--done { background: var(--gold); }
.l10-nav-lanes {
  display: flex; flex-direction: column; gap: 8px; margin: 10px 0;
}
.l10-nav-lane {
  width: 100%; padding: 14px 12px; border: 1px solid rgba(0,240,200,0.35);
  border-radius: 8px; background: rgba(0,240,200,0.06); color: var(--text);
  font-size: 0.9rem; cursor: pointer; text-align: left; transition: background 0.15s;
}
.l10-nav-lane:hover { background: rgba(0,240,200,0.14); border-color: var(--mauri); }

/* Whale Compass */
.l10-whale-round {
  font-size: 0.78rem; color: var(--text-dim); text-align: center; margin: 4px 0 8px;
}
.l10-whale-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0;
}
.l10-whale-btn {
  padding: 14px 8px; border: 1px solid rgba(0,240,200,0.35); border-radius: 8px;
  background: rgba(0,240,200,0.05); color: var(--text); font-size: 1rem; cursor: pointer;
  transition: background 0.15s; min-height: 56px;
}
.l10-whale-btn:disabled          { opacity: 0.4; cursor: not-allowed; }
.l10-whale-btn:not(:disabled):hover { background: rgba(0,240,200,0.12); border-color: var(--mauri); }
.l10-whale-btn--flash   { background: rgba(0,240,200,0.45) !important; border-color: var(--mauri); }
.l10-whale-btn--correct { background: rgba(0,240,200,0.35) !important; }
.l10-whale-btn--wrong   { background: rgba(255,93,108,0.4) !important; border-color: var(--kura); }

/* Beehive Hex Path */
.l10-hex-area {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0;
}
.l10-hex-spacer { min-height: 60px; }
.l10-hex-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 64px; border: 2px solid rgba(255,255,255,0.12); border-radius: 8px;
  background: rgba(255,255,255,0.04); padding: 6px; text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.l10-hex-cell--blocked  { background: rgba(0,0,0,0.5); border-color: rgba(80,80,80,0.4); opacity: 0.5; }
.l10-hex-cell--goal     { border-color: var(--gold); background: rgba(244,192,70,0.08); }
.l10-hex-cell--current  { border-color: var(--mauri); background: rgba(0,240,200,0.14); }
.l10-hex-cell--visited  { border-color: rgba(0,240,200,0.3); background: rgba(0,240,200,0.05); }
.l10-hex-cell--adjacent { border-color: var(--gold); background: rgba(244,192,70,0.1); cursor: pointer; }
.l10-hex-cell--adjacent:hover { background: rgba(244,192,70,0.2); }
.l10-hex-icon  { font-size: 1.2rem; line-height: 1; }
.l10-hex-label { font-size: 0.62rem; color: var(--text-dim); line-height: 1.2; }
.l10-hex-you   { font-size: 0.55rem; color: var(--mauri); font-weight: 700; }

/* Hive Restoration */
.l10-hive-prog {
  font-size: 0.78rem; color: var(--text-dim); text-align: center; margin: 4px 0 8px;
}
.l10-hive-cells {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0;
}
.l10-hive-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px;
  border: 1px solid rgba(0,240,200,0.3); border-radius: 8px; background: rgba(0,240,200,0.05);
  cursor: pointer; text-align: center; transition: background 0.15s;
  position: relative;
}
.l10-hive-cell:hover:not(:disabled) { background: rgba(0,240,200,0.12); border-color: var(--mauri); }
.l10-hive-cell:disabled             { opacity: 0.5; cursor: not-allowed; }
.l10-hive-cell--placed              { background: rgba(0,240,200,0.14); border-color: var(--mauri); }
.l10-hive-cell--wrong               { animation: l10-shake 0.3s ease; border-color: var(--kura); }
.l10-hive-icon  { font-size: 1.4rem; }
.l10-hive-label { font-size: 0.8rem; font-weight: 700; color: var(--text); }
.l10-hive-desc  { font-size: 0.62rem; color: var(--text-dim); line-height: 1.3; }
.l10-hive-num {
  position: absolute; top: 4px; right: 6px;
  font-size: 0.7rem; font-weight: 700; color: var(--gold);
}

/* Pā Defense */
.l10-pa-hud {
  font-size: 0.82rem; color: var(--text-dim); text-align: center; margin: 6px 0 2px;
}
.l10-pa-def-count {
  font-size: 0.72rem; color: var(--mauri-soft); text-align: center; margin: 2px 0 6px;
}
.l10-pa-grid {
  display: grid; gap: 3px; margin: 8px 0;
}
.l10-pa-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; font-size: 0.9rem;
  background: rgba(255,255,255,0.04); transition: background 0.12s;
}
.l10-pa-cell[data-r]      { cursor: pointer; }
.l10-pa-cell[data-r]:hover { background: rgba(0,240,200,0.14); border-color: var(--mauri); }
.l10-pa-cell--centre       { background: rgba(244,192,70,0.15); border-color: var(--gold); }
.l10-pa-cell--def          { background: rgba(0,240,200,0.18); border-color: var(--mauri); }
.l10-pa-cell--threat       { background: rgba(255,93,108,0.25); border-color: var(--kura); }
.l10-pa-controls { display: flex; justify-content: center; margin: 8px 0; }
.l10-pa-btn {
  padding: 10px 22px; border: 1px solid var(--kura); border-radius: 6px;
  background: rgba(255,93,108,0.1); color: var(--text); cursor: pointer; font-size: 0.88rem;
  transition: background 0.15s;
}
.l10-pa-btn:hover:not(:disabled) { background: rgba(255,93,108,0.22); }
.l10-pa-btn:disabled             { opacity: 0.45; cursor: not-allowed; }

/* Mōteatea Sequence */
.l10-mot-prog {
  font-size: 0.78rem; color: var(--text-dim); text-align: center; margin: 4px 0 8px;
}
.l10-mot-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0;
}
.l10-mot-col { display: flex; flex-direction: column; }
.l10-mot-label {
  font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px;
}
.l10-mot-frags { display: flex; flex-direction: column; gap: 5px; }
.l10-mot-frag {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 8px; border: 1px solid rgba(0,240,200,0.25); border-radius: 6px;
  background: rgba(0,240,200,0.04); cursor: pointer; text-align: left; transition: background 0.15s;
}
.l10-mot-frag:hover       { background: rgba(0,240,200,0.10); border-color: var(--mauri); }
.l10-mot-frag--wrong      { animation: l10-shake 0.3s ease; border-color: var(--kura); }
.l10-mot-role { font-size: 0.7rem; font-weight: 700; color: var(--gold); }
.l10-mot-text { font-size: 0.62rem; color: var(--text-dim); line-height: 1.3; }
.l10-mot-placed { display: flex; flex-direction: column; gap: 4px; }
.l10-mot-placed-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border: 1px solid rgba(0,240,200,0.2); border-radius: 5px; background: rgba(0,240,200,0.06);
}
.l10-mot-num  { font-size: 0.7rem; font-weight: 700; color: var(--mauri-soft); min-width: 14px; }
.l10-mot-empty { font-size: 0.75rem; color: var(--text-dim); padding: 6px; }

/* Reo Signal Chase */
.l10-reo-hud {
  display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-dim); margin: 6px 0 4px;
}
.l10-reo-grid {
  display: grid; gap: 4px; margin: 8px 0;
}
.l10-reo-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  background: rgba(255,255,255,0.03); font-size: 1rem; cursor: default;
  transition: background 0.12s, border-color 0.12s;
}
.l10-reo-cell--active {
  background: rgba(0,240,200,0.2); border-color: var(--mauri); cursor: pointer;
  animation: mauriPulse 0.6s var(--easing) infinite;
}
.l10-reo-cell--active:hover { background: rgba(0,240,200,0.35); }

/* Tāmaki Lexicon */
.l10-tam-prog {
  font-size: 0.78rem; color: var(--text-dim); text-align: center; margin: 4px 0 8px;
}
.l10-tam-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0;
}
.l10-tam-col { display: flex; flex-direction: column; }
.l10-tam-label {
  font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px;
}
.l10-tam-names, .l10-tam-meanings { display: flex; flex-direction: column; gap: 5px; }
.l10-tam-name, .l10-tam-meaning {
  padding: 8px 10px; border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  background: rgba(255,255,255,0.04); color: var(--text); cursor: pointer; text-align: left;
  font-size: 0.78rem; transition: background 0.15s, border-color 0.15s;
}
.l10-tam-name:hover:not(:disabled),
.l10-tam-meaning:hover:not(:disabled) { background: rgba(0,240,200,0.10); border-color: var(--mauri); }
.l10-tam-name:disabled,
.l10-tam-meaning:disabled             { opacity: 0.5; cursor: not-allowed; }
.l10-tam-name--selected               { border-color: var(--gold); background: rgba(244,192,70,0.10); }
.l10-tam-name--matched,
.l10-tam-meaning--matched             { background: rgba(0,240,200,0.12); border-color: var(--mauri); opacity: 0.75; }
.l10-tam-meaning--wrong               { animation: l10-shake 0.35s ease; border-color: var(--kura); }

/* Mobile tweaks for new L10 mini-games */
@media (max-width: 380px) {
  .l10-mot-layout,
  .l10-tam-layout { grid-template-columns: 1fr; }
  .l10-hive-cells { grid-template-columns: 1fr; }
  .l10-whale-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   LEVEL 1 — Te Waka Tōhorā mini-games
   All classes prefixed  l1-
   ═══════════════════════════════════════════════════════════ */

.l1-panel {
  background: rgba(0,16,32,0.75);
  border: 1px solid var(--mauri,#00f0c8);
  border-radius: 0.75rem;
  padding: 1.25rem 1rem;
  margin: 0.75rem 0;
}
.l1-panel-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mauri,#00f0c8);
  text-align: center;
  margin: 0 0 0.9rem;
}
.l1-result {
  color: var(--gold,#ffd700);
  font-weight: 700;
  text-align: center;
  padding: 0.6rem;
  margin-top: 0.75rem;
  font-size: 1rem;
}
.l1-done-msg {
  color: var(--mauri,#00f0c8);
  text-align: center;
  font-size: 0.95rem;
  padding: 1rem;
}

/* ── Symbol Dial ── */
.l1-dial-wrap {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin: 0.5rem 0;
}
.l1-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.l1-dial-face {
  font-size: 2rem;
  width: 3.2rem;
  height: 3.2rem;
  background: rgba(0,240,200,0.08);
  border: 1.5px solid var(--mauri,#00f0c8);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mauri,#00f0c8);
  user-select: none;
}
.l1-dial-arrow {
  background: none;
  border: none;
  color: var(--mauri,#00f0c8);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem 0.9rem;
  border-radius: 0.25rem;
  line-height: 1;
}
.l1-dial-arrow:hover { background: rgba(0,240,200,0.14); }
.l1-dial-arrow:disabled { opacity: 0.3; cursor: default; }

/* ── Meaning Match ── */
.l1-match-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.l1-match-col {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.l1-match-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0.5rem;
  padding: 0.55rem 0.4rem;
  color: #e8e8e8;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background 0.13s, border-color 0.13s;
}
.l1-match-item:hover:not(:disabled) { background: rgba(0,240,200,0.12); }
.l1-match-item--selected {
  border-color: var(--gold,#ffd700);
  background: rgba(255,215,0,0.12);
  color: var(--gold,#ffd700);
}
.l1-match-item--paired {
  border-color: var(--mauri,#00f0c8);
  background: rgba(0,240,200,0.12);
  color: var(--mauri,#00f0c8);
  opacity: 0.65;
}
.l1-match-item--wrong {
  border-color: #f55;
  background: rgba(255,80,80,0.14);
  color: #f55;
}

/* ── Maze ── */
.l1-maze-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  max-width: 260px;
  margin: 0 auto 0.9rem;
}
.l1-maze-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.l1-maze-cell--wall {
  background: rgba(0,240,200,0.11);
  border-color: rgba(0,240,200,0.28);
}
.l1-maze-cell--goal {
  background: rgba(255,215,0,0.22);
  border-color: var(--gold,#ffd700);
  box-shadow: 0 0 8px rgba(255,215,0,0.35);
}
.l1-maze-cell--player {
  background: var(--mauri,#00f0c8);
  border-color: var(--mauri,#00f0c8);
  box-shadow: 0 0 6px rgba(0,240,200,0.5);
}
.l1-maze-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.l1-maze-row {
  display: flex;
  gap: 0.5rem;
}
.l1-maze-btn {
  background: rgba(0,240,200,0.08);
  border: 1px solid var(--mauri,#00f0c8);
  color: var(--mauri,#00f0c8);
  border-radius: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  min-width: 2.8rem;
  line-height: 1;
}
.l1-maze-btn:hover:not(:disabled) { background: rgba(0,240,200,0.22); }
.l1-maze-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Quiz ── */
.l1-quiz-round {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin: 0 0 0.5rem;
}
.l1-quiz-question {
  font-size: 0.9rem;
  color: #eee;
  text-align: center;
  line-height: 1.45;
  margin: 0 0 0.9rem;
}
.l1-quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.l1-quiz-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0.5rem;
  padding: 0.65rem 0.4rem;
  color: #e0e0e0;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
  transition: background 0.12s;
}
.l1-quiz-btn:hover:not(:disabled) { background: rgba(0,240,200,0.14); }
.l1-quiz-btn--correct {
  border-color: var(--mauri,#00f0c8);
  background: rgba(0,240,200,0.2);
  color: var(--mauri,#00f0c8);
}
.l1-quiz-btn--wrong {
  border-color: #f55;
  background: rgba(255,80,80,0.14);
  color: #f55;
}
.l1-quiz-btn:disabled { cursor: default; }

/* ── Star Trace ── */
.l1-star-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  max-width: 270px;
  margin: 0 auto 0.9rem;
}
.l1-star-cell {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  background: transparent;
  color: transparent;
}
.l1-star-cell--star {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.35);
  cursor: pointer;
}
.l1-star-cell--next {
  background: rgba(255,215,0,0.18);
  border-color: var(--gold,#ffd700);
  color: var(--gold,#ffd700);
  animation: l1-pulse 0.85s ease-in-out infinite alternate;
}
.l1-star-cell--traced {
  background: rgba(0,240,200,0.22);
  border-color: var(--mauri,#00f0c8);
  color: var(--mauri,#00f0c8);
  font-weight: 700;
  cursor: default;
}
.l1-star-cell--wrong {
  background: rgba(255,80,80,0.2);
  border-color: #f55;
  color: #f55;
}

@keyframes l1-pulse {
  from { box-shadow: 0 0 4px rgba(255,215,0,0.4); }
  to   { box-shadow: 0 0 14px rgba(255,215,0,0.85); }
}

/* ═══════════════════════════════════════════════════════════
   AHO SYSTEM — floating button + modal
   ═══════════════════════════════════════════════════════════ */

.aho-btn {
  position: fixed; bottom: 24px; right: 20px; z-index: 1200;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 58px; height: 58px;
  background: radial-gradient(circle at 50% 40%, rgba(0,240,200,0.18), rgba(4,6,13,0.92));
  border: 1.5px solid rgba(0,240,200,0.55);
  border-radius: 50%;
  color: var(--mauri,#00f0c8); cursor: pointer;
  box-shadow: 0 0 22px rgba(0,240,200,0.22), 0 6px 24px rgba(0,0,0,0.6);
  transition: transform 160ms var(--easing), box-shadow 200ms var(--easing);
}
.aho-btn:hover { transform: scale(1.08); box-shadow: 0 0 36px rgba(0,240,200,0.38), 0 6px 24px rgba(0,0,0,0.6); }
.aho-btn.hidden { display: none; }
.aho-btn__icon { font-size: 20px; line-height: 1; }
.aho-btn__label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; }

.aho-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(2,4,10,0.78); backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 16px 32px;
  animation: ahoFadeIn 220ms var(--easing) both;
}
.aho-overlay.hidden { display: none; }

@keyframes ahoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.aho-modal {
  width: 100%; max-width: 520px;
  background: linear-gradient(180deg, rgba(6,16,32,0.98), rgba(2,6,14,0.98));
  border: 1px solid rgba(0,240,200,0.35);
  border-radius: 22px 22px 16px 16px;
  padding: 0 0 20px;
  box-shadow: 0 -8px 60px rgba(0,240,200,0.12), 0 40px 80px rgba(0,0,0,0.8);
  animation: ahoSlideUp 260ms var(--easing) both;
}

@keyframes ahoSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.aho-modal__header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(0,240,200,0.12);
}
.aho-modal__rune {
  font-size: 22px; color: var(--mauri,#00f0c8);
  filter: drop-shadow(0 0 8px rgba(0,240,200,0.6));
  animation: l1-pulse 2.2s ease-in-out infinite alternate;
}
.aho-modal__title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mauri-soft, #57ffd9); flex: 1;
}
.aho-modal__close {
  background: none; border: none; color: var(--text-faint,#5a6779);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: color 140ms, background 140ms;
}
.aho-modal__close:hover { color: var(--text,#eaf2ff); background: rgba(255,255,255,0.06); }

.aho-modal__body { padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 14px; }

.aho-hint { border-radius: 12px; padding: 14px 16px; }
.aho-hint--1 {
  background: rgba(0,240,200,0.04);
  border: 1px solid rgba(0,240,200,0.18);
}
.aho-hint--2 {
  background: rgba(0,200,180,0.06);
  border: 1px solid rgba(0,240,200,0.28);
}
.aho-hint--3 {
  background: rgba(0,240,200,0.09);
  border: 1px solid rgba(0,240,200,0.42);
}
.aho-hint__text {
  font-size: 14px; line-height: 1.65; color: var(--text,#eaf2ff);
  white-space: pre-line; font-style: italic;
}

.aho-modal__actions { padding: 0 20px; }
.aho-modal__hint-btn {
  width: 100%; padding: 13px 18px;
  background: rgba(0,240,200,0.07); border: 1px solid rgba(0,240,200,0.35);
  border-radius: 10px; color: var(--mauri-soft,#57ffd9); cursor: pointer;
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 160ms, box-shadow 160ms;
}
.aho-modal__hint-btn:hover { background: rgba(0,240,200,0.14); box-shadow: 0 0 18px rgba(0,240,200,0.2); }
.aho-modal__hint-btn.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════
   LEVEL 1 new mini-game styles
   ═══════════════════════════════════════════════════════════ */

/* ── Celestial Dial (Task 1 Māui) ── */
.l1-cdial-wrap { display: flex; gap: 1rem; justify-content: center; margin: 0.5rem 0; flex-wrap: wrap; }
.l1-cdial-col  { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.l1-cdial-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(0,240,200,0.55); margin-bottom: 0.25rem; text-align: center;
}
.l1-dial-face--ok {
  border-color: var(--gold,#ffd700) !important;
  background: rgba(255,215,0,0.18) !important;
  color: var(--gold,#ffd700) !important;
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

/* ── Waka Nav — uses l1-maze-* classes, grid set via inline style ── */

/* ── Echo Tap (Task 2 Hinengaro) ── */
.l1-echo-round {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45); text-align: center; margin-bottom: 0.5rem;
}
.l1-echo-syms {
  display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-bottom: 0.75rem;
}
.l1-echo-btn {
  width: 52px; height: 52px;
  background: rgba(0,240,200,0.06); border: 1.5px solid rgba(0,240,200,0.3);
  border-radius: 10px; color: var(--mauri,#00f0c8);
  font-size: 1.4rem; cursor: pointer;
  transition: background 120ms, box-shadow 120ms, transform 80ms;
}
.l1-echo-btn:disabled { opacity: 0.4; cursor: default; }
.l1-echo-btn--lit {
  background: rgba(0,240,200,0.35) !important;
  box-shadow: 0 0 22px rgba(0,240,200,0.6);
  transform: scale(1.1);
}
.l1-echo-btn--tap { background: rgba(0,240,200,0.22) !important; transform: scale(0.94); }
.l1-echo-status { font-size: 0.82rem; color: var(--text-dim,#95a3ba); text-align: center; min-height: 1.1em; }

/* ── Rotating Lock (Task 3 Māui) ── */
.l1-rlock-ring {
  display: flex; flex-wrap: wrap; gap: 3px; justify-content: center;
  margin: 0.5rem 0;
}
.l1-rlock-cell {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 5px;
  background: rgba(255,255,255,0.03); font-size: 1.05rem;
  color: rgba(255,255,255,0.55);
}
.l1-rlock-cell--marker {
  border-color: var(--gold,#ffd700); background: rgba(255,215,0,0.1);
  color: var(--gold,#ffd700); box-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.l1-rlock-btns { display: flex; gap: 0.6rem; justify-content: center; margin: 0.5rem 0; }
.l1-rlock-state { text-align: center; font-size: 1.1rem; margin: 0.3rem 0; letter-spacing: 0.5em; }
.l1-rlock-mk { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.l1-rlock-mk--ok { color: var(--mauri,#00f0c8); font-weight: 700; }

/* ── Glyph Pair (Task 3 Hinengaro) ── */
.l1-glyph-area { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.25rem; }
.l1-glyph-col  { display: flex; flex-direction: column; gap: 0.4rem; }
.l1-glyph-btn {
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 0.55rem 0.5rem;
  color: #e8e8e8; font-size: 0.82rem; cursor: pointer; text-align: left;
  transition: background 0.13s, border-color 0.13s;
}
.l1-glyph-btn:hover:not(:disabled) { background: rgba(0,240,200,0.1); border-color: rgba(0,240,200,0.45); }
.l1-glyph-btn--sel { border-color: var(--gold,#ffd700) !important; background: rgba(255,215,0,0.1) !important; color: var(--gold,#ffd700) !important; }
.l1-glyph-btn--done { border-color: var(--mauri,#00f0c8); background: rgba(0,240,200,0.1); color: var(--mauri,#00f0c8); opacity: 0.65; }
.l1-glyph-btn--wrong { border-color: #f55 !important; background: rgba(255,80,80,0.12) !important; color: #f55 !important; }
.l1-glyph-btn:disabled { cursor: default; }
.l1-glyph-icon { font-size: 1.15rem; flex-shrink: 0; }
.l1-glyph-word { font-size: 0.78rem; }

/* ── Tree Climb (Task 4 Māui) ── */
.l1-tree-grid {
  display: grid; gap: 3px; margin: 0 auto 0.9rem; max-width: 260px;
}
.l1-tree-cell {
  aspect-ratio: 1; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.l1-tree-cell--open { background: rgba(139,90,43,0.15); border: 1px solid rgba(139,90,43,0.3); }
.l1-tree-cell--broken { background: rgba(30,30,30,0.8); border: 1px solid rgba(40,40,40,0.5); }
.l1-tree-cell--crown {
  background: rgba(255,215,0,0.2); border: 1px solid var(--gold,#ffd700);
  box-shadow: 0 0 10px rgba(255,215,0,0.4); color: var(--gold,#ffd700);
  animation: l1-pulse 1s ease-in-out infinite alternate;
}
.l1-tree-cell--crown::after { content: '✦'; font-size: 0.9rem; }
.l1-tree-cell--player {
  background: var(--mauri,#00f0c8) !important; border-color: var(--mauri,#00f0c8) !important;
  box-shadow: 0 0 8px rgba(0,240,200,0.55);
}
.l1-tree-cell--player::after { content: '◉'; font-size: 0.75rem; color: #001a14; }

/* ── Rhythm Pulse (Task 4 Hinengaro) ── */
.l1-rp-round { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); text-align: center; margin-bottom: 0.5rem; }
.l1-rp-stones { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 0.75rem; flex-wrap: wrap; }
.l1-rp-stone {
  width: 64px; height: 64px; border-radius: 12px;
  background: rgba(128,128,128,0.08); border: 2px solid rgba(128,128,128,0.3);
  cursor: pointer; transition: transform 80ms, box-shadow 140ms;
  border-color: var(--stone-color,#888);
  background: color-mix(in srgb, var(--stone-color,#888) 12%, transparent);
}
.l1-rp-stone:disabled { opacity: 0.4; cursor: default; }
.l1-rp-stone--lit {
  transform: scale(1.12);
  background: var(--stone-color,#888) !important;
  box-shadow: 0 0 28px var(--stone-color,#888);
}
.l1-rp-stat { font-size: 0.82rem; color: var(--text-dim,#95a3ba); text-align: center; min-height: 1.1em; }

/* ── Forge Bounce (Task 5 Māui) ── */
.l1-forge-chamber { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
.l1-forge-emitter {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mauri,#00f0c8); padding: 0.4rem 1rem;
  border: 1px solid rgba(0,240,200,0.35); border-radius: 6px;
  background: rgba(0,240,200,0.06);
}
.l1-forge-row { display: flex; gap: 0.5rem; justify-content: center; }
.l1-forge-paddle {
  width: 72px; height: 60px;
  background: rgba(244,192,70,0.08); border: 1.5px solid rgba(244,192,70,0.4);
  border-radius: 8px; color: var(--gold,#ffd700); font-size: 1.6rem; cursor: pointer;
  transition: background 140ms, box-shadow 140ms, transform 80ms;
}
.l1-forge-paddle:hover { background: rgba(244,192,70,0.18); box-shadow: 0 0 16px rgba(244,192,70,0.3); transform: scale(1.04); }
.l1-forge-hole {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold,#ffd700); padding: 0.4rem 1rem;
  border: 1px solid rgba(244,192,70,0.5); border-radius: 6px;
  background: rgba(244,192,70,0.08);
  animation: l1-pulse 1.4s ease-in-out infinite alternate;
}
.l1-forge-stat { font-size: 0.82rem; text-align: center; margin-top: 0.5rem; min-height: 1.2em; }

/* ── Drag Order (Task 5 Hinengaro) ── */
.l1-dragord-list { display: flex; flex-direction: column; gap: 0.35rem; }
.l1-dragord-row {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 0.45rem 0.6rem;
}
.l1-dragord-arr {
  background: rgba(0,240,200,0.08); border: 1px solid rgba(0,240,200,0.28);
  color: var(--mauri,#00f0c8); border-radius: 5px; font-size: 0.9rem;
  padding: 0.25rem 0.55rem; cursor: pointer; flex-shrink: 0;
  transition: background 120ms;
}
.l1-dragord-arr:hover:not(:disabled) { background: rgba(0,240,200,0.2); }
.l1-dragord-arr:disabled { opacity: 0.3; cursor: default; }
.l1-dragord-item { display: flex; align-items: center; gap: 0.5rem; flex: 1; font-size: 0.88rem; }
.l1-dragord-sym { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.l1-dragord-stat { font-size: 0.82rem; text-align: center; margin-top: 0.4rem; min-height: 1.1em; }

/* ── Ring Align (Task 6 Māui) ── */
.l1-ralign-wrap { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 0.5rem 0; }
.l1-ralign-col  { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.l1-ralign-lbl  { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(0,240,200,0.5); }
.l1-ralign-row  { display: flex; align-items: center; gap: 0.35rem; }
.l1-ralign-pos  {
  width: 2.8rem; height: 2.8rem;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.1rem;
  background: rgba(0,240,200,0.06); border: 1.5px solid rgba(0,240,200,0.28);
  border-radius: 8px; color: rgba(255,255,255,0.6);
  transition: border-color 200ms, background 200ms, color 200ms;
}
.l1-ralign-pos--ok {
  border-color: var(--gold,#ffd700) !important;
  background: rgba(255,215,0,0.16) !important;
  color: var(--gold,#ffd700) !important;
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

/* ═══════════════════════════════════════════════════════════
   PHOTO BOOTH
   ═══════════════════════════════════════════════════════════ */

/* Trigger button on the complete screen */
.btn--photo {
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(0,240,200,0.08), rgba(0,143,120,0.10));
  border-color: rgba(0,240,200,0.38);
  color: var(--mauri-soft);
}
.btn--photo:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(0,240,200,0.20), rgba(0,143,120,0.20));
  box-shadow: 0 0 28px rgba(0,240,200,0.20);
}

/* Full-screen backdrop */
.photo-overlay {
  position: fixed; inset: 0; z-index: 960;
  background: rgba(2,4,10,0.88); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: ahoFadeIn 220ms var(--easing) both;
}
.photo-overlay.hidden { display: none; }

/* Modal card */
.photo-modal {
  width: 100%; max-width: 480px;
  background: linear-gradient(180deg, rgba(6,16,32,0.98), rgba(2,6,14,0.98));
  border: 1px solid rgba(0,240,200,0.25);
  border-radius: var(--radius-lg);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.9),
    0 0 60px -10px rgba(0,240,200,0.10);
  max-height: 90vh; overflow-y: auto;
  animation: ahoSlideUp 260ms var(--easing) both;
}

/* Header */
.photo-modal__header {
  display: flex; align-items: center;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(0,240,200,0.10);
}
.photo-modal__title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--mauri-soft); flex: 1;
}
.photo-modal__close {
  background: none; border: none; color: var(--text-faint);
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: color 140ms, background 140ms;
}
.photo-modal__close:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* Body */
.photo-modal__body { padding: 16px; }

/* Preview state */
.photo-preview { display: flex; flex-direction: column; gap: 12px; }

/* Camera viewport — 4:3 */
.photo-cam-wrap {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  background: #000;
  border: 1px solid rgba(0,240,200,0.16);
  position: relative;
}
.photo-cam-inner { width: 100%; height: 100%; position: relative; }

.photo-video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scaleX(-1); /* mirror for natural selfie feel */
}

/* Error / unavailable state inside the camera viewport */
.photo-cam-error {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  font-size: 13px; color: var(--text-dim); line-height: 1.6;
  background: rgba(4,6,13,0.95);
}

/* Privacy notice */
.photo-privacy {
  font-size: 11px; letter-spacing: 0.03em;
  color: var(--text-faint); text-align: center; line-height: 1.5;
}

/* Preview buttons */
.photo-preview-btns { display: flex; gap: 8px; }
.photo-preview-btns .btn { flex: 1; }

/* Result state */
.photo-result { display: flex; flex-direction: column; gap: 12px; }

/* Result image frame */
.photo-result-frame {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(0,240,200,0.20);
  background: #000;
  box-shadow: 0 0 40px -12px rgba(0,240,200,0.14);
}
.photo-result-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Result buttons */
.photo-result-btns { display: flex; gap: 8px; }
.photo-result-btns .btn { flex: 1; }

/* ═══════════════════════════════════════════════════════════
   SCENE BACKGROUND — full-bleed environmental image
   Sits behind .page (z-index 0 vs page z-index 1).
   JS sets background-image and adds .scene-bg--active.
   ═══════════════════════════════════════════════════════════ */
.scene-bg {
  position: fixed; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 900ms var(--easing);
  pointer-events: none;
}
.scene-bg--active { opacity: 1; }

/* Dark cinematic overlay so UI text stays readable */
.scene-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4,6,13,0.82) 0%,
    rgba(4,6,13,0.50) 30%,
    rgba(4,6,13,0.55) 65%,
    rgba(4,6,13,0.88) 100%
  );
}

/* ═══════════════════════════════════════════════════════════
   INTRO / TITLE SCREENS  (index.html)
   Two fixed overlays that sit above .page (z-index 1).
   JS adds/removes .hidden and .intro-overlay--out to
   transition between title → crawl → room entry.
   ═══════════════════════════════════════════════════════════ */

/* ── Base overlay layer ── */
.intro-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-deep);
  opacity: 1;
  transition: opacity 600ms var(--easing);
}
.intro-overlay.hidden        { display: none; }
.intro-overlay--out          { opacity: 0; pointer-events: none; }

/* ── Title screen ambient glow ── */
#introTitle {
  background:
    radial-gradient(ellipse 70% 50% at 28% 25%, rgba(0,240,200,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 72% 78%, rgba(244,192,70,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(0,80,70,0.10) 0%, transparent 65%),
    var(--bg-deep);
  animation: introBgPulse 7s ease-in-out infinite alternate;
}
@keyframes introBgPulse {
  from { filter: brightness(0.92); }
  to   { filter: brightness(1.04); }
}

/* Use portal-open image as subtle background on title */
#introTitle::before {
  content: '';
  position: absolute; inset: 0;
  background: url('assets/global/portal-open.png') center center / cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

/* ── Title content block ── */
.intro-title-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 0; text-align: center;
  padding: 40px 28px;
}

.intro-eyebrow {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0.55em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  animation: introFadeUp 1.0s 0.2s var(--easing) both;
}

.intro-heading {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: clamp(52px, 14vw, 96px);
  letter-spacing: 0.10em; line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, var(--mauri-soft) 55%, var(--mauri) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 35px rgba(0,240,200,0.40)) drop-shadow(0 0 70px rgba(0,240,200,0.18));
  margin-bottom: 18px;
  animation: introFadeUp 1.2s 0.4s var(--easing) both;
}

.intro-tagline {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: 13px; letter-spacing: 0.48em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
  animation: introFadeUp 1.0s 0.7s var(--easing) both;
}

.intro-sub {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 40px;
  animation: introFadeUp 1.0s 0.9s var(--easing) both;
}

.intro-enter-btn {
  max-width: 260px; width: 100%;
  animation: introFadeUp 1.0s 1.2s var(--easing) both;
}

@keyframes introFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Crawl overlay ── */
.intro-overlay--crawl {
  background: #020408;
  /* override flex centering — crawl stage fills screen absolutely */
  align-items: stretch;
  justify-content: stretch;
}
.miharo-crawl-overlay { z-index: 1500; }

/* Top / bottom cinematic fade masks */
.crawl-mask {
  position: absolute; left: 0; right: 0; z-index: 3;
  pointer-events: none;
}
.crawl-mask--top {
  top: 0; height: 38%;
  background: linear-gradient(180deg, #020408 0%, #020408 35%, transparent 100%);
}
.crawl-mask--bottom {
  bottom: 0; height: 38%;
  background: linear-gradient(0deg, #020408 0%, #020408 35%, transparent 100%);
}

/* Skip button */
.crawl-skip-btn {
  position: absolute; top: 20px; right: 20px; z-index: 10;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; color: var(--text-faint);
  font-family: 'Cinzel', serif; font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.crawl-skip-btn:hover {
  background: rgba(255,255,255,0.10);
  color: var(--text);
  border-color: rgba(255,255,255,0.28);
}

/* Begin button — appears when crawl ends, centered over the masks */
.cinematic-actions {
  position: fixed;
  left: 50%;
  bottom: clamp(24px, 6vh, 72px);
  transform: translateX(-50%);
  z-index: 20;
  width: min(420px, calc(100vw - 32px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cinematic-actions.hidden { display: none; }
.cinematic-begin,
.crawl-begin-btn,
#cinematicContinue {
  position: static;
  width: 100%;
  max-width: 360px;
  min-width: 0;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: none;
  pointer-events: auto;
  animation: introFadeUp 700ms var(--easing) both;
}
.cinematic-begin:hover:not(:disabled),
.crawl-begin-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* ── 3D crawl stage ── */
.crawl-stage {
  position: absolute; inset: 0;
  perspective: 360px;
  perspective-origin: 50% 12%;
  display: flex; justify-content: center;
  overflow: hidden;
}

/* Scrolling band — translateY animation applied via .crawl-band--running */
.crawl-band {
  position: absolute;
  width: 72%; max-width: 560px;
  transform: translateY(100vh); /* off-screen at start, before animation */
}
.crawl-band--running {
  animation: introCrawl 65s linear forwards;
}
@keyframes introCrawl {
  from { transform: translateY(100vh); }
  to   { transform: translateY(-290%); }
}

/* Perspective tilt applied to inner band */
.crawl-tilt {
  transform-origin: 50% 100%;
  transform: rotateX(20deg);
}

/* Actual text content */
.crawl-content {
  display: flex; flex-direction: column; gap: 30px;
  text-align: center;
  padding-top: 8vh;
  padding-bottom: 55vh; /* empty space after last word so text clears screen */
}

.crawl-heading {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(16px, 3.5vw, 22px);
  letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.crawl-content p {
  font-family: 'Cinzel', serif;
  font-size: clamp(13px, 2.2vw, 16px);
  letter-spacing: 0.07em; line-height: 1.85;
  color: rgba(220, 235, 255, 0.72);
  margin: 0;
}

/* Emphasis paragraphs */
.crawl-portal {
  font-size: clamp(17px, 3vw, 22px) !important;
  color: var(--mauri-soft) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
}

.crawl-lines {
  color: var(--gold-soft) !important;
  line-height: 2.2 !important;
}

.crawl-welcome {
  font-size: clamp(15px, 2.8vw, 19px) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.20em !important;
  margin-top: 14px !important;
}

.crawl-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.85) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 32%, rgba(0,240,200,0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 75%, rgba(244,192,70,0.85) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 68%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
    radial-gradient(ellipse at 50% 62%, rgba(0,240,200,0.18), transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(244,192,70,0.10), transparent 55%);
  opacity: 0.8;
}

.miharo-play-panel {
  border-color: rgba(0,240,200,0.24);
  box-shadow: inset 0 0 34px rgba(0,240,200,0.05);
}

.miharo-glyph-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.miharo-glyph,
.miharo-tree-part {
  min-height: 82px;
  border: 1px solid rgba(0,240,200,0.24);
  border-radius: 8px;
  background: rgba(2,10,20,0.74);
  color: var(--text);
  cursor: pointer;
}

.miharo-glyph span {
  display: block;
  font-size: 28px;
  color: var(--gold);
}

.miharo-glyph small,
.miharo-tree-part small {
  display: block;
  margin-top: 6px;
  color: var(--text-dim);
}

.miharo-glyph--chosen,
.miharo-tree-part--lit {
  border-color: var(--mauri);
  background: rgba(0,240,200,0.14);
  box-shadow: 0 0 22px rgba(0,240,200,0.20);
}

.miharo-sequence {
  margin-top: 12px;
  min-height: 26px;
  text-align: center;
  color: var(--mauri-soft);
  font-family: "Cinzel", serif;
  letter-spacing: 0.08em;
}

.miharo-tree {
  display: grid;
  gap: 10px;
}

.miharo-tree-part strong {
  display: block;
  font-family: "Cinzel", serif;
  color: var(--gold-soft);
}

.miharo-tree--complete {
  filter: drop-shadow(0 0 18px rgba(0,240,200,0.38));
}

.miharo-stars {
  position: relative;
  min-height: 320px;
  border: 1px solid rgba(0,240,200,0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,240,200,0.14), transparent 38%),
    linear-gradient(180deg, rgba(4,8,18,0.9), rgba(0,0,0,0.72));
  overflow: hidden;
}

.miharo-stars::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 20%;
  bottom: 25%;
  border: 1px solid rgba(244,192,70,0.12);
  transform: rotate(-8deg);
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}

.miharo-stars--complete::after {
  opacity: 1;
}

.miharo-star {
  position: absolute;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 999px;
  border: 1px solid rgba(244,192,70,0.45);
  background: rgba(244,192,70,0.10);
  color: var(--gold);
  box-shadow: 0 0 18px rgba(244,192,70,0.24);
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.miharo-star__glyph {
  display: block;
  line-height: 1;
  pointer-events: none;
}

.miharo-star--current {
  border-color: rgba(244,192,70,0.9);
  background: rgba(244,192,70,0.18);
  box-shadow:
    0 0 22px rgba(244,192,70,0.42),
    0 0 44px rgba(0,240,200,0.16);
  animation: miharo-star-call 1.15s ease-in-out infinite alternate;
}

.miharo-star--lit {
  background: rgba(0,240,200,0.24);
  border-color: var(--mauri);
  color: #fff;
  box-shadow:
    0 0 18px rgba(0,240,200,0.45),
    0 0 34px rgba(244,192,70,0.18);
}

.miharo-star--wrong {
  border-color: #ff8e9a;
  color: #ff8e9a;
}

@keyframes miharo-star-call {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.miharo-complete-panel {
  text-align: center;
}

.miharo-complete-mark {
  font-family: "Cinzel", serif;
  font-size: 24px;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 10px;
}

.role--image-missing::before {
  content: "✦";
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,240,200,0.32);
  color: var(--mauri);
  font-size: 34px;
}

@media (max-width: 520px) {
  .miharo-glyph-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .miharo-stars {
    min-height: 280px;
  }
}

/* =============================================================
   MĪHARO — MINI-GAME SHARED STYLES (miniGames.js)
   All .mg-* classes and .map-* classes used by the mini-game
   renderer (scripts/miniGames.js). Loaded globally via style.css.
   ============================================================= */

/* ── Base panel ─────────────────────────────────────────────── */
.mg-panel {
  border: 1px solid rgba(0,240,200,0.2);
  border-radius: 14px;
  background: rgba(6,12,24,0.9);
  padding: 18px 16px 22px;
  margin-bottom: 6px;
}
.mg-panel--success {
  border-color: rgba(0,240,200,0.5);
  background: rgba(0,40,30,0.6);
}
.mg-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 15px; letter-spacing: 0.1em;
  color: var(--mauri); margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(0,240,200,0.2);
}
.mg-instruction {
  font-size: 13px; color: var(--text-dim);
  line-height: 1.65; margin-bottom: 14px;
}
.mg-complete-text {
  font-size: 14px; color: var(--mauri-soft);
  line-height: 1.65; margin-top: 10px;
}
.mg-progress-bar {
  height: 6px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden; margin: 8px 0 4px;
}
.mg-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mauri), var(--mauri-soft));
  border-radius: 3px; transition: width 0.35s ease;
}
.mg-progress-text {
  font-size: 12px; color: var(--text-faint);
  margin-bottom: 14px; text-align: center;
}
.mg-status {
  font-size: 12px; min-height: 18px; margin-top: 8px;
  color: var(--text-dim); line-height: 1.5;
}
.mg-status--ok  { color: var(--mauri-soft); }
.mg-status--bad { color: #ff8e9a; }

/* ── Check / action button ──────────────────────────────────── */
.mg-check-btn {
  display: block; width: 100%; margin-top: 14px;
  padding: 12px 18px;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mauri-soft);
  background: rgba(0,240,200,0.1);
  border: 1px solid rgba(0,240,200,0.35);
  border-radius: 10px; cursor: pointer;
  transition: background 0.18s;
}
.mg-check-btn:hover { background: rgba(0,240,200,0.2); }
.mg-check-btn--wrong {
  border-color: rgba(255,93,108,0.55);
  color: #ffb0b8; background: rgba(255,93,108,0.12);
}

/* ── Preparing fallback ──────────────────────────────────────── */
.mg-preparing {
  padding: 28px 18px; text-align: center;
  border: 1px dashed rgba(0,240,200,0.2);
  border-radius: 14px;
  color: var(--text-dim); font-size: 14px; line-height: 1.7;
}
.mg-preparing__icon {
  font-size: 32px; margin-bottom: 10px; display: block;
  opacity: 0.5;
}

/* ── Garden Rows (gardenPinball) ─────────────────────────────── */
.mg-garden-rows {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.mg-garden-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(0,80,30,0.2);
  border: 1px solid rgba(0,200,80,0.2);
  border-radius: 10px; cursor: pointer; text-align: left;
  transition: background 0.18s, border-color 0.18s;
}
.mg-garden-row:hover:not(:disabled) {
  background: rgba(0,120,40,0.3);
  border-color: rgba(0,240,120,0.4);
}
.mg-garden-row--done {
  background: rgba(0,200,80,0.12);
  border-color: rgba(0,240,200,0.4);
  cursor: default;
}
.mg-garden-row__emoji { font-size: 24px; line-height: 1; }
.mg-garden-row__label {
  flex: 1; font-size: 14px; font-weight: 600;
  color: var(--text);
}
.mg-garden-row__state {
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-faint);
}
.mg-garden-row--done .mg-garden-row__state { color: var(--mauri-soft); }

/* ── Growth Sudoku ───────────────────────────────────────────── */
.mg-sudoku-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; max-width: 220px; margin: 14px auto 4px;
}
.mg-sudoku-cell {
  aspect-ratio: 1; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,240,200,0.2); border-radius: 8px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  -webkit-user-select: none; user-select: none;
}
.mg-sudoku-cell:hover:not(:disabled):not(.mg-sudoku-cell--fixed) {
  background: rgba(0,240,200,0.1);
  border-color: rgba(0,240,200,0.45);
}
.mg-sudoku-cell--fixed {
  background: rgba(0,40,20,0.4);
  border-color: rgba(0,200,100,0.3);
  cursor: default;
}

/* ── Noke Soil / Tile Reveal ─────────────────────────────────── */
.mg-soil-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5px; margin: 12px 0;
}
.mg-soil-tile {
  aspect-ratio: 1; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60,35,15,0.6);
  border: 1px solid rgba(120,70,30,0.3); border-radius: 8px;
  cursor: pointer; transition: background 0.18s;
  -webkit-user-select: none; user-select: none;
  color: rgba(0,0,0,0);
  font-size: 12px; color: var(--text-faint);
}
.mg-soil-tile::before {
  content: '?'; font-size: 16px; color: rgba(150,100,50,0.4);
}
.mg-soil-tile--revealed {
  background: rgba(40,25,10,0.8);
  border-color: rgba(150,100,50,0.4);
  cursor: default;
}
.mg-soil-tile--revealed::before { content: ''; }
.mg-soil-tile--target {
  background: rgba(0,80,40,0.4);
  border-color: rgba(0,200,100,0.6);
  box-shadow: 0 0 12px rgba(0,200,100,0.3) inset;
}
.mg-soil-tile--target::before { content: ''; }

/* ── Letter Grid / Boggle / Word Find ───────────────────────── */
.mg-letter-grid {
  display: grid; gap: 4px;
  margin: 10px 0;
  -webkit-user-select: none; user-select: none;
}
.mg-letter-grid--5 { grid-template-columns: repeat(5, 1fr); max-width: 260px; margin: 10px auto; }
.mg-letter-grid--6 { grid-template-columns: repeat(6, 1fr); max-width: 300px; margin: 10px auto; }
.mg-letter-grid--9 { grid-template-columns: repeat(9, 1fr); max-width: 360px; margin: 10px auto; }
.mg-letter-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
  background: rgba(0,0,30,0.5); color: rgba(160,200,255,0.7);
  border: 1px solid rgba(80,100,200,0.15); border-radius: 4px;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.mg-letter-cell:hover { background: rgba(80,100,200,0.18); color: rgba(200,220,255,0.9); }
.mg-letter-cell--selected {
  background: rgba(0,240,200,0.2); color: var(--mauri-soft);
  border-color: rgba(0,240,200,0.5);
}
.mg-letter-cell--found {
  background: rgba(0,200,200,0.15); color: #00e0c0;
  border-color: rgba(0,200,200,0.35); cursor: default;
}
.mg-word-found-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mg-word-tag {
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px;
  border: 1px solid rgba(140,160,255,0.3);
  color: rgba(200,210,255,0.6); background: rgba(0,0,0,0.3);
}
.mg-word-tag--found {
  color: var(--mauri-soft); border-color: rgba(0,240,200,0.4);
  text-decoration: line-through;
}
.mg-selected-word {
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--mauri-soft);
  min-height: 24px; margin: 6px 0; text-align: center;
}
.mg-word-controls { display: flex; gap: 8px; margin-top: 8px; }
.mg-word-btn {
  flex: 1; padding: 10px 12px;
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(0,240,200,0.1); border: 1px solid rgba(0,240,200,0.3);
  border-radius: 8px; color: var(--mauri-soft); cursor: pointer;
  transition: background 0.15s;
}
.mg-word-btn:hover { background: rgba(0,240,200,0.2); }
.mg-word-btn--clear {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15);
  color: var(--text-dim);
}

/* ── Hoiho Path ──────────────────────────────────────────────── */
.mg-path-wrap {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px; margin: 14px 0; justify-content: center;
}
.mg-path-node {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2px;
  font-size: 11px; text-align: center; line-height: 1.2;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(0,200,200,0.2);
  border-radius: 10px; cursor: default;
  transition: background 0.2s, border-color 0.2s;
  -webkit-user-select: none; user-select: none;
}
.mg-path-node__emoji { font-size: 20px; line-height: 1; }
.mg-path-node__label { font-size: 9px; color: var(--text-faint); }
.mg-path-node--current {
  background: rgba(0,240,200,0.15);
  border-color: rgba(0,240,200,0.6);
  box-shadow: 0 0 12px rgba(0,240,200,0.3);
}

/* =========================================================
   LEVEL 5 — GARDEN PINBALL  (.l5-pb-*)
   ========================================================= */
.l5-pb-meter-wrap {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.12);
  border-radius: 6px;
  margin: 8px 0 2px;
  overflow: hidden;
}
.l5-pb-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #5ecb7a, #a8e89e);
  border-radius: 6px;
  transition: width 0.3s ease;
}
.l5-pb-area {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 280px;
  margin: 10px auto 6px;
  background-image:
    linear-gradient(rgba(0, 18, 6, 0.28), rgba(0, 18, 6, 0.28)),
    url("assets/level5/01-task1-pinball-area-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid rgba(100, 200, 80, 0.35);
  border-radius: 10px;
  overflow: hidden;
}
.l5-pb-ball {
  position: absolute;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 18px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 2;
}
.l5-pb-token {
  position: absolute;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 22px;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 1;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.l5-pb-token--done {
  opacity: 0 !important;
  transform: scale(1.8) !important;
}
.l5-pb-flippers {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 6px 0 4px;
}
.l5-pb-flipper {
  flex: 1;
  max-width: 150px;
  padding: 16px 10px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  background: rgba(80, 190, 100, 0.75);
  color: #0d1f0d;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.12s ease, transform 0.08s ease;
}
.l5-pb-flipper:active {
  background: rgba(200, 230, 80, 0.9);
  transform: scale(0.95);
}

/* =========================================================
   LEVEL 5 — WAKA SAILING  (.l5-sail-*)
   Māui Task 3 — steer the waka, collect stars, reach island
   ========================================================= */
.l5-sail-hud {
  font-family: 'Cinzel', serif; font-size: 12px; color: var(--gold);
  letter-spacing: 0.08em; text-align: center; margin: 4px 0 6px;
}
.l5-sail-area {
  position: relative;
  width: 100%; max-width: 320px;
  height: 210px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(0, 150, 240, 0.35);
  background-image: url('assets/level5/03-task3-sailing-ocean-bg.png');
  background-size: cover;
  background-position: center;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.l5-sail-waka {
  position: absolute;
  width: 50px;
  height: auto;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55));
  -webkit-user-select: none; user-select: none;
}
.l5-sail-star {
  position: absolute;
  width: 28px; height: 28px;
  margin-left: -14px; margin-top: -14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  pointer-events: none; z-index: 6;
  animation: l5SailStarPulse 1.6s ease-in-out infinite;
}
.l5-sail-star::after { content: '⭐'; }
.l5-sail-star--gone  { opacity: 0; animation: none; transition: opacity 0.35s ease; }
@keyframes l5SailStarPulse {
  0%,100% { filter: drop-shadow(0 0 3px rgba(255,215,0,0.4)); transform: scale(1); }
  50%     { filter: drop-shadow(0 0 10px rgba(255,230,0,1));  transform: scale(1.2); }
}
.l5-sail-rock {
  position: absolute;
  width: 28px; height: 28px;
  margin-left: -14px; margin-top: -14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  pointer-events: none; z-index: 5;
}
.l5-sail-rock::after { content: '🪨'; }
.l5-sail-island {
  position: absolute;
  width: 36px; height: 36px;
  margin-left: -18px; margin-top: -18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  pointer-events: none; z-index: 5;
  opacity: 0.4;
  transition: opacity 0.45s ease;
}
.l5-sail-island::after { content: '🏝️'; }
.l5-sail-island--active {
  opacity: 1;
  animation: l5SailIslandGlow 1.4s ease-in-out infinite;
}
@keyframes l5SailIslandGlow {
  0%,100% { filter: drop-shadow(0 0 5px rgba(244,192,70,0.45)); }
  50%     { filter: drop-shadow(0 0 18px rgba(244,200,70,0.95)); }
}
.l5-sail-controls {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin: 8px auto 2px;
}
.l5-sail-ctrl-row { display: flex; gap: 6px; justify-content: center; }
.l5-sail-btn {
  width: 48px; height: 48px;
  background: rgba(0,55,100,0.55); border: 1px solid rgba(0,150,240,0.45);
  border-radius: 10px; font-size: 20px; color: var(--mauri-soft);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.l5-sail-btn:active { background: rgba(0,100,180,0.7); }
@media (max-width: 380px) {
  .l5-sail-area { height: 190px; }
  .l5-sail-btn  { width: 44px; height: 44px; font-size: 18px; }
}

/* =========================================================
   LEVEL 5 — NOKE SOIL  (.l5-nk-*)
   ========================================================= */
.l5-nk-counter {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: rgba(200, 240, 180, 0.9);
  margin: 6px 0 2px;
  letter-spacing: 0.04em;
}
.l5-nk-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-width: 270px;
  margin: 8px auto;
  -webkit-user-select: none;
  user-select: none;
}
.l5-nk-cell {
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 6px;
}
.l5-nk-cell--soil {
  background: rgba(101, 67, 33, 0.55);
  border: 1px solid rgba(160, 100, 50, 0.3);
}
.l5-nk-cell--trail {
  background: rgba(160, 110, 55, 0.35);
  border: 1px dashed rgba(200, 140, 70, 0.45);
}
.l5-nk-cell--rock {
  background: rgba(70, 70, 70, 0.7);
  border: 1px solid rgba(120, 120, 120, 0.5);
}
.l5-nk-cell--nutrient {
  background: rgba(40, 110, 40, 0.55);
  border: 2px solid rgba(80, 210, 80, 0.65);
  box-shadow: 0 0 6px rgba(80, 210, 80, 0.3);
}
.l5-nk-cell--done {
  background: rgba(40, 110, 40, 0.2);
  border: 1px solid rgba(80, 210, 80, 0.25);
  font-size: 13px;
  color: rgba(100, 220, 100, 0.5);
}
.l5-nk-cell--noke {
  background: rgba(90, 170, 70, 0.3);
  border: 2px solid rgba(140, 230, 100, 0.75);
  box-shadow: 0 0 8px rgba(140, 230, 100, 0.35);
}
.l5-nk-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 10px auto 6px;
}
.l5-nk-dpad-row {
  display: flex;
  gap: 5px;
  align-items: center;
}
.l5-nk-dpad-mid {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  -webkit-user-select: none;
  user-select: none;
}
.l5-nk-btn {
  width: 54px;
  height: 54px;
  font-size: 22px;
  border: none;
  border-radius: 10px;
  background: rgba(70, 130, 50, 0.65);
  color: #d8f0c0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s ease, transform 0.08s ease;
}
.l5-nk-btn:active {
  background: rgba(130, 210, 70, 0.85);
  transform: scale(0.91);
}
/* =========================================================
   LEVEL 7 — MAUNGA SIGNALS  (.l7-sr-*)
   ========================================================= */
.l7-sr-card {
  background: rgba(40, 30, 20, 0.55);
  border: 1px solid rgba(200, 140, 60, 0.35);
  border-radius: 12px;
  padding: 16px 14px 12px;
  margin: 10px 0 12px;
  text-align: center;
}
.l7-sr-visual {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 8px;
  -webkit-user-select: none;
  user-select: none;
}
.l7-sr-text {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(240, 220, 180, 0.95);
  margin-bottom: 8px;
}
.l7-sr-progress {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(200, 160, 80, 0.75);
  text-transform: uppercase;
}
.l7-sr-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 8px;
}
.l7-sr-btn {
  width: 100%;
  padding: 14px 12px;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  border: 1px solid rgba(160, 120, 60, 0.4);
  border-radius: 10px;
  background: rgba(60, 40, 20, 0.55);
  color: rgba(240, 220, 180, 0.9);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.l7-sr-btn:not(:disabled):active {
  background: rgba(100, 70, 30, 0.7);
  transform: scale(0.98);
}
.l7-sr-btn--correct {
  background: rgba(40, 110, 40, 0.65) !important;
  border-color: rgba(80, 210, 80, 0.7) !important;
  color: rgba(180, 255, 160, 0.95) !important;
}
.l7-sr-btn--wrong {
  background: rgba(110, 30, 30, 0.6) !important;
  border-color: rgba(220, 80, 80, 0.6) !important;
  color: rgba(255, 180, 170, 0.9) !important;
}
.l7-sr-feedback {
  font-size: 13px;
  line-height: 1.4;
  min-height: 20px;
  padding: 4px 2px;
  color: rgba(200, 200, 200, 0.8);
}
.l7-sr-feedback--correct {
  color: rgba(140, 230, 120, 0.95);
}
.l7-sr-feedback--wrong {
  color: rgba(255, 170, 150, 0.9);
}

.mg-path-node--next {
  cursor: pointer;
  border-color: rgba(244,192,70,0.5);
  animation: mgNodePulse 1.4s ease-in-out infinite;
}
@keyframes mgNodePulse {
  0%,100% { box-shadow: 0 0 0 rgba(244,192,70,0); }
  50%      { box-shadow: 0 0 14px rgba(244,192,70,0.5); }
}
.mg-path-node--visited {
  background: rgba(0,100,80,0.2);
  border-color: rgba(0,200,150,0.25);
  opacity: 0.7;
}
.mg-path-node--goal {
  background: rgba(0,180,80,0.2);
  border-color: rgba(0,240,120,0.4);
}
.mg-path-arrow {
  color: var(--text-faint); font-size: 16px; line-height: 1;
  flex-shrink: 0;
}
.mg-path-break { width: 100%; height: 0; display: flex; align-items: center; }

/* ── Two Truths ──────────────────────────────────────────────── */
.mg-truth-cards {
  display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
}
.mg-truth-card {
  padding: 12px 14px; text-align: left; width: 100%;
  font-size: 13px; line-height: 1.55; color: var(--text);
  background: rgba(0,0,0,0.35); border: 1px solid rgba(120,160,220,0.18);
  border-radius: 10px; cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.mg-truth-card:hover:not(:disabled) {
  background: rgba(60,80,140,0.3);
  border-color: rgba(120,160,255,0.35);
}
.mg-truth-card--correct {
  background: rgba(0,120,80,0.3) !important;
  border-color: rgba(0,240,160,0.55) !important;
  color: var(--mauri-soft) !important;
}
.mg-truth-card--wrong {
  background: rgba(120,30,30,0.3) !important;
  border-color: rgba(255,93,108,0.5) !important;
  animation: mgWrong 0.4s ease;
}
@keyframes mgWrong {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}
.mg-round-badge {
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--text-faint);
  margin-bottom: 10px; text-align: center;
}

/* ── Interactive Map / Hotspots (Level 1 + map tasks) ─────────── */
.map-wrapper {
  position: relative; max-width: 700px; margin: 14px auto 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0,200,200,0.2);
}
.game-map {
  display: block; width: 100%; height: auto;
  border-radius: 10px;
}
.game-map--error {
  display: none;
}
.map-hotspot {
  position: absolute;
  width: 52px; height: 52px;
  transform: translate(-50%, -50%);
  background: rgba(0,240,200,0.15);
  border: 2px solid rgba(0,240,200,0.7);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
  animation: hotspotPulse 2.2s ease-in-out infinite;
}
@keyframes hotspotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,240,200,0.4); }
  50%     { box-shadow: 0 0 0 10px rgba(0,240,200,0); }
}
.map-hotspot:hover {
  background: rgba(0,240,200,0.3);
  box-shadow: 0 0 0 8px rgba(0,240,200,0.15);
}
.map-hotspot__label {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700;
  font-family: 'Cinzel', serif; letter-spacing: 0.06em;
  color: var(--mauri-soft);
  background: rgba(4,6,14,0.9); border: 1px solid rgba(0,240,200,0.3);
  padding: 3px 7px; border-radius: 4px;
  pointer-events: none;
}
.map-hotspot.correct {
  border-color: rgba(0,240,120,0.9);
  background: rgba(0,200,80,0.25);
  animation: none;
  box-shadow: 0 0 16px rgba(0,240,120,0.5);
}
.map-hotspot.wrong {
  border-color: rgba(255,93,108,0.9);
  background: rgba(255,60,80,0.2);
  animation: mgWrong 0.4s ease;
}
.mg-map-instruction {
  text-align: center; font-size: 13px; color: var(--text-dim);
  margin: 10px 0 4px; line-height: 1.6;
}

/* ── Memory Card Game ────────────────────────────────────────── */
.mg-mem-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; max-width: 340px; margin: 10px auto;
}
.mg-mem-card {
  aspect-ratio: 1; cursor: pointer; perspective: 600px;
  border-radius: 6px; -webkit-user-select: none; user-select: none;
}
.mg-mem-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.35s ease;
  border-radius: 6px;
}
.mg-mem-card--flipped .mg-mem-inner,
.mg-mem-card--matched .mg-mem-inner { transform: rotateY(180deg); }
.mg-mem-card--matched { opacity: 0.7; cursor: default; }
.mg-mem-back, .mg-mem-front {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.mg-mem-back {
  background: rgba(0,40,100,0.8); border: 1px solid rgba(0,160,255,0.25);
  font-size: 22px; color: rgba(0,160,255,0.4);
}
.mg-mem-front {
  background: rgba(0,20,60,0.9); border: 1px solid rgba(0,200,255,0.35);
  transform: rotateY(180deg); font-size: 24px;
}
.mg-mem-card--matched .mg-mem-front {
  border-color: rgba(0,240,200,0.5);
  box-shadow: 0 0 10px rgba(0,240,200,0.2) inset;
}
.mg-mem-status {
  font-size: 12px; color: var(--mauri-soft); text-align: center; margin: 6px 0;
  font-family: 'Cinzel', serif;
}
.mg-mem-grid--5pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 260px;
}
.mg-mem-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(160, 220, 255, 0.75);
  margin-top: 3px;
  -webkit-user-select: none;
  user-select: none;
}
.mg-mem-meaning {
  min-height: 20px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: rgba(160, 240, 200, 0);
  padding: 4px 6px;
  transition: color 0.3s ease;
  margin: 4px 0 2px;
}
.mg-mem-meaning--show {
  color: rgba(160, 240, 200, 0.92);
}

/* =========================================================
   LEVEL 6 — WAKA PATH  (.l6-wp-*)
   ========================================================= */
.l6-wp-counter {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: rgba(160, 220, 255, 0.9);
  margin: 6px 0 2px;
  letter-spacing: 0.04em;
}
.l6-wp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-width: 270px;
  margin: 8px auto;
  -webkit-user-select: none;
  user-select: none;
}
.l6-wp-cell {
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 6px;
}
.l6-wp-cell--ocean {
  background: rgba(0, 40, 100, 0.55);
  border: 1px solid rgba(0, 120, 200, 0.25);
}
.l6-wp-cell--trail {
  background: rgba(0, 60, 140, 0.35);
  border: 1px dashed rgba(0, 160, 240, 0.3);
}
.l6-wp-cell--taniwha {
  background: rgba(60, 10, 10, 0.65);
  border: 1px solid rgba(180, 40, 40, 0.45);
}
.l6-wp-cell--star {
  background: rgba(40, 60, 0, 0.55);
  border: 2px solid rgba(255, 220, 40, 0.65);
  box-shadow: 0 0 6px rgba(255, 220, 40, 0.3);
}
.l6-wp-cell--star-done {
  background: rgba(40, 60, 0, 0.2);
  border: 1px solid rgba(200, 180, 30, 0.2);
  font-size: 12px;
  color: rgba(220, 200, 60, 0.45);
}
.l6-wp-cell--whenua {
  background: rgba(0, 80, 20, 0.55);
  border: 2px solid rgba(60, 200, 80, 0.6);
  box-shadow: 0 0 8px rgba(60, 200, 80, 0.25);
}
.l6-wp-cell--waka {
  background: rgba(0, 80, 160, 0.4);
  border: 2px solid rgba(100, 180, 255, 0.75);
  box-shadow: 0 0 8px rgba(100, 180, 255, 0.3);
}
.l6-wp-dpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 10px auto 6px;
}
.l6-wp-dpad-row {
  display: flex;
  gap: 5px;
  align-items: center;
}
.l6-wp-dpad-mid {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  -webkit-user-select: none;
  user-select: none;
}
.l6-wp-btn {
  width: 54px;
  height: 54px;
  font-size: 22px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 80, 160, 0.65);
  color: rgba(160, 220, 255, 0.9);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s ease, transform 0.08s ease;
}
.l6-wp-btn:active {
  background: rgba(0, 160, 255, 0.8);
  transform: scale(0.91);
}

/* ── Kete Cards ──────────────────────────────────────────────── */
.mg-kete-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 7px; margin: 10px 0;
}
@media (min-width: 400px) { .mg-kete-grid { grid-template-columns: repeat(3, 1fr); } }
.mg-kete-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 6px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(0,200,255,0.18);
  border-radius: 8px; cursor: pointer; text-align: center;
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  -webkit-user-select: none; user-select: none;
}
.mg-kete-card:hover:not(:disabled) { transform: translateY(-2px); }
.mg-kete-card--selected {
  background: rgba(0,240,200,0.12); border-color: rgba(0,240,200,0.55);
}
.mg-kete-card--error {
  background: rgba(255,80,80,0.12); border-color: rgba(255,80,80,0.55);
  animation: mgWrong 0.4s ease;
}
.mg-kete-card__sym  { font-size: 22px; line-height: 1; }
.mg-kete-card__name {
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.88); letter-spacing: 0.06em;
}
.mg-kete-status { font-size: 12px; color: var(--text-dim); text-align: center; margin: 8px 0; }

/* ── Dice / Board Game ───────────────────────────────────────── */
.mg-board-wrap { padding: 12px 8px; }
.mg-board {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 3px; margin-bottom: 10px;
}
.mg-board-sq {
  position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,20,50,0.7);
  border: 1px solid rgba(0,100,200,0.2); border-radius: 4px; overflow: hidden;
}
.mg-board-num  { font-size: 9px; color: rgba(255,255,255,0.3); position: absolute; top: 2px; left: 3px; }
.mg-board-sym  { font-size: 13px; line-height: 1; }
.mg-board-token { font-size: 16px; line-height: 1; filter: drop-shadow(0 0 6px rgba(0,240,200,0.8)); z-index: 2; }
.mg-board-sq--wave    { background: rgba(0,80,180,0.3); border-color: rgba(0,160,255,0.35); }
.mg-board-sq--taniwha { background: rgba(100,0,40,0.3); border-color: rgba(200,50,100,0.35); }
.mg-board-sq--storm   { background: rgba(80,40,0,0.3); border-color: rgba(244,192,70,0.35); }
.mg-board-sq--star    { background: rgba(40,40,80,0.3); border-color: rgba(180,180,255,0.35); }
.mg-board-sq--land    { background: rgba(0,80,40,0.4); border-color: rgba(0,200,100,0.5); }
.mg-board-sq--active  { box-shadow: 0 0 14px rgba(0,240,200,0.6) inset; }
.mg-board-controls {
  display: flex; align-items: center; gap: 14px;
  justify-content: center; margin-bottom: 8px;
}
.mg-dice-btn {
  padding: 10px 22px;
  background: rgba(0,160,255,0.15); border: 1px solid rgba(0,160,255,0.4);
  border-radius: 8px; color: #7ec8ff;
  font-family: 'Cinzel', serif; font-size: 13px; cursor: pointer;
  transition: background 0.15s;
}
.mg-dice-btn:active  { background: rgba(0,160,255,0.3); }
.mg-dice-btn:disabled { opacity: 0.4; cursor: default; }
.mg-dice-val {
  font-family: 'Cinzel', serif; font-size: 28px; font-weight: 700;
  color: #ffd050; min-width: 36px; text-align: center;
  text-shadow: 0 0 10px rgba(255,208,80,0.5);
}
.mg-board-legend {
  display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; margin: 6px 0;
}
.mg-board-leg { font-size: 10px; color: rgba(255,255,255,0.45); }

/* ── RPS / Choice game ───────────────────────────────────────── */
.mg-rps-wrap { text-align: center; }
.mg-rps-choices { display: flex; gap: 10px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.mg-rps-btn {
  width: 72px; height: 72px; border-radius: 50%;
  font-size: 32px; line-height: 1;
  background: rgba(0,0,0,0.4); border: 2px solid rgba(120,160,220,0.3);
  cursor: pointer; transition: transform 0.15s, background 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.mg-rps-btn:hover:not(:disabled) {
  transform: scale(1.12);
  background: rgba(0,240,200,0.15);
  border-color: rgba(0,240,200,0.5);
}
.mg-rps-result { font-size: 14px; line-height: 1.6; margin: 10px 0; min-height: 40px; }
.mg-rps-score  {
  font-family: 'Cinzel', serif; font-size: 13px;
  color: var(--text-dim); letter-spacing: 0.1em;
}

/* ── Generic grid nav (safePath, aim, dodge) ─────────────────── */
.mg-nav-grid {
  display: grid; gap: 4px; margin: 10px auto;
}
.mg-nav-grid--5 { grid-template-columns: repeat(5, 1fr); max-width: 280px; }
.mg-nav-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 200px; }
.mg-nav-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 18px; border-radius: 6px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(80,80,120,0.2);
  cursor: default; transition: background 0.15s;
}
.mg-nav-cell--safe   { background: rgba(0,100,60,0.2); border-color: rgba(0,200,100,0.25); }
.mg-nav-cell--danger { background: rgba(100,20,20,0.3); border-color: rgba(200,50,50,0.25); }
.mg-nav-cell--current { border-color: rgba(0,240,200,0.7); box-shadow: 0 0 12px rgba(0,240,200,0.3) inset; }
.mg-nav-cell--goal   { background: rgba(0,80,150,0.3); border-color: rgba(0,160,255,0.5); }
.mg-nav-cell--next   { cursor: pointer; border-color: rgba(244,192,70,0.6); animation: mgNodePulse 1.4s ease-in-out infinite; }
.mg-nav-cell--revealed { opacity: 1; }

/* ── Sequence/order game ─────────────────────────────────────── */
.mg-sequence-zone { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.mg-sequence-item {
  padding: 11px 14px; text-align: left; width: 100%;
  font-size: 13px; line-height: 1.5; color: var(--text);
  background: rgba(0,0,0,0.35); border: 1px solid rgba(100,120,200,0.2);
  border-radius: 10px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mg-sequence-item:hover:not(:disabled) {
  background: rgba(40,60,140,0.3);
  border-color: rgba(120,140,255,0.4);
}
.mg-sequence-item--selected {
  background: rgba(0,240,200,0.1) !important;
  border-color: rgba(0,240,200,0.5) !important;
  color: var(--mauri-soft) !important;
}
.mg-sequence-item--placed {
  background: rgba(0,80,50,0.2) !important;
  border-color: rgba(0,200,120,0.35) !important;
  cursor: default !important; opacity: 0.75;
}
.mg-sequence-slots { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.mg-sequence-slot {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.25); border: 1px dashed rgba(100,120,200,0.25);
  border-radius: 8px; font-size: 12px; color: var(--text-faint);
}
.mg-sequence-slot--filled {
  background: rgba(0,80,50,0.2); border-color: rgba(0,200,120,0.35);
  color: var(--text);
}
.mg-seq-num {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  color: var(--gold); min-width: 18px;
}

/* ── Taonga placement ─────────────────────────────────────────── */
.mg-placement-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0;
}
.mg-placement-stones { display: flex; flex-direction: column; gap: 6px; }
.mg-placement-stone {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(100,120,200,0.2);
  font-size: 13px; color: var(--text); text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.mg-placement-stone--active {
  background: rgba(0,240,200,0.15); border-color: rgba(0,240,200,0.5);
  color: var(--mauri-soft);
}
.mg-placement-stone--placed { opacity: 0.6; cursor: default; }
.mg-placement-zones { display: flex; flex-direction: column; gap: 6px; }
.mg-placement-zone {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(80,100,160,0.2);
  font-size: 12px; color: var(--text-dim);
  transition: background 0.15s, border-color 0.15s;
}
.mg-placement-zone:hover:not(:disabled) {
  background: rgba(40,60,140,0.25); border-color: rgba(120,140,255,0.35);
}
.mg-placement-zone--filled { border-color: rgba(0,200,100,0.4); color: var(--mauri-soft); }

/* ── Pulse / rhythm game ─────────────────────────────────────── */
.mg-pulse-area { text-align: center; padding: 10px 0; }
.mg-pulse-circle {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(0,0,0,0.4); border: 3px solid rgba(0,240,200,0.3);
  margin: 12px auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; transition: transform 0.15s;
}
.mg-pulse-circle--pulse {
  animation: mgPulseAnim 0.8s ease-in-out infinite;
  border-color: rgba(0,240,200,0.7);
}
@keyframes mgPulseAnim {
  0%,100% { transform: scale(1); border-color: rgba(0,240,200,0.3); }
  50%      { transform: scale(1.15); border-color: rgba(0,240,200,0.9); }
}
.mg-pulse-btn {
  padding: 14px 28px;
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(0,240,200,0.15); border: 2px solid rgba(0,240,200,0.45);
  border-radius: 12px; color: var(--mauri-soft); cursor: pointer;
  transition: background 0.15s;
}
.mg-pulse-btn:active { background: rgba(0,240,200,0.35); transform: scale(0.97); }
.mg-pulse-hits {
  font-family: 'Cinzel', serif; font-size: 13px;
  color: var(--text-dim); margin-top: 10px; letter-spacing: 0.1em;
}

/* ── Maunga Eruption (Hangman) ───────────────────────────────── */
.mg-eruption-stage { text-align: center; padding: 8px 0 4px; }
.mg-eruption-emoji { font-size: 40px; line-height: 1.2; }
.mg-eruption-label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.mg-eruption-bar-wrap {
  height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(100,20,20,0.2); border: 1px solid rgba(200,50,50,0.2);
  margin: 8px 0 10px;
}
.mg-eruption-bar-fill {
  height: 100%; transition: width 0.4s ease;
  background: linear-gradient(90deg, rgba(240,140,0,0.6), rgba(220,40,20,0.8));
}
.mg-eruption-clue {
  font-size: 12px; color: var(--text-faint); margin-bottom: 10px;
  font-style: italic; line-height: 1.4;
}
.mg-eruption-word {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  margin: 10px 0 8px;
}
.mg-eruption-letter {
  min-width: 20px; height: 30px; padding: 0 3px;
  border-bottom: 2px solid rgba(100,120,200,0.45);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
  color: var(--text-faint); letter-spacing: 0.05em;
}
.mg-eruption-letter--found { color: var(--mauri-soft); border-bottom-color: rgba(0,240,200,0.5); }
.mg-eruption-misses {
  font-size: 11px; color: var(--text-faint); text-align: center;
  margin-bottom: 6px; min-height: 16px; letter-spacing: 0.06em;
}
.mg-eruption-keys {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  margin: 8px 0;
}
.mg-eruption-key {
  width: 30px; height: 30px; border-radius: 6px;
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(100,120,200,0.25);
  color: var(--text); cursor: pointer; transition: background 0.12s;
}
.mg-eruption-key:hover:not(:disabled) {
  background: rgba(40,60,140,0.3); border-color: rgba(120,140,255,0.4);
}
.mg-eruption-key--hit  { background: rgba(0,80,50,0.3) !important; border-color: rgba(0,200,120,0.45) !important; color: var(--mauri-soft) !important; cursor: default; }
.mg-eruption-key--miss { background: rgba(80,20,20,0.3) !important; border-color: rgba(180,50,50,0.3) !important; color: var(--text-faint) !important; cursor: default; }

/* ── Phrase Rebuild / Anagram ────────────────────────────────── */
.mg-phrase-wrap { margin: 10px 0; }
.mg-phrase-display {
  min-height: 42px; padding: 10px 12px; margin-bottom: 10px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(0,240,200,0.2);
  border-radius: 8px; font-size: 14px; color: var(--mauri-soft);
  font-family: 'Cinzel', serif; letter-spacing: 0.06em;
  min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.mg-phrase-words { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mg-phrase-word {
  padding: 8px 12px; border-radius: 8px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(100,120,220,0.2);
  font-size: 13px; color: var(--text); cursor: pointer;
  transition: background 0.15s;
}
.mg-phrase-word:hover:not(:disabled) {
  background: rgba(40,60,140,0.3); border-color: rgba(120,140,255,0.4);
}
.mg-phrase-word--used { opacity: 0.4; cursor: default; }
.mg-phrase-word--chosen { background: rgba(0,240,200,0.12); border-color: rgba(0,240,200,0.4); }

/* ── Aim / Reveal grid ───────────────────────────────────────── */
.mg-aim-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; max-width: 220px; margin: 12px auto;
}
.mg-aim-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 28px; border-radius: 10px;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(100,120,200,0.2);
  cursor: pointer; transition: background 0.15s;
}
.mg-aim-cell--hit { background: rgba(0,200,80,0.2); border-color: rgba(0,240,120,0.5); cursor: default; }
.mg-aim-cell--miss { background: rgba(40,20,20,0.4); cursor: default; opacity: 0.6; }

/* ── maramataka phases ───────────────────────────────────────── */
.mg-mara-phases { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mg-mara-phase { padding: 12px 14px; border-radius: 10px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(100,120,200,0.2); }
.mg-mara-phase-name {
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
  color: var(--gold); margin-bottom: 4px;
}
.mg-mara-phase-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mg-mara-opt {
  flex: 1; min-width: 80px; padding: 8px 10px; border-radius: 8px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(80,100,160,0.2);
  font-size: 12px; color: var(--text); cursor: pointer;
  transition: background 0.15s; text-align: center;
}
.mg-mara-opt:hover:not(:disabled) { background: rgba(40,60,140,0.3); }
.mg-mara-opt--correct { background: rgba(0,120,60,0.3) !important; border-color: rgba(0,240,120,0.5) !important; color: var(--mauri-soft) !important; }
.mg-mara-opt--wrong   { background: rgba(120,20,20,0.3) !important; border-color: rgba(255,80,80,0.4) !important; animation: mgWrong 0.4s ease; }

/* ── Truth sort ──────────────────────────────────────────────── */
.mg-sort-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mg-sort-bin {
  padding: 10px 8px; border-radius: 10px; min-height: 80px;
  background: rgba(0,0,0,0.3); border: 1px dashed rgba(100,120,200,0.25);
}
.mg-sort-bin--truth { border-color: rgba(0,200,100,0.3); }
.mg-sort-bin--false { border-color: rgba(255,80,80,0.3); }
.mg-sort-bin-title {
  font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; margin-bottom: 6px;
  color: var(--text-dim);
}
.mg-sort-card {
  padding: 8px 10px; border-radius: 6px; margin-bottom: 5px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(100,120,200,0.2);
  font-size: 12px; line-height: 1.45; color: var(--text);
  cursor: pointer; transition: background 0.15s;
}
.mg-sort-cards-pool { display: flex; flex-direction: column; gap: 5px; }
.mg-sort-card:hover:not(:disabled) { background: rgba(40,60,140,0.3); }
.mg-sort-card--truth { border-color: rgba(0,200,100,0.4); }
.mg-sort-card--false { border-color: rgba(255,80,80,0.4); }

/* ── Level 8 hiddenObject — zone buttons ─────────────────────── */
.mg-hidden-zones {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0;
}
.mg-hidden-zone-btn {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(140,100,40,0.25);
  border-radius: 8px;
  color: var(--text, #e0d4b8);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s;
}
.mg-hidden-zone-btn:hover:not(:disabled) {
  background: rgba(180,120,30,0.14);
  border-color: rgba(244,192,70,0.35);
}
.mg-hidden-zone-btn--correct {
  background: rgba(0,120,60,0.3) !important;
  border-color: rgba(0,240,120,0.5) !important;
  color: #6ff0a8 !important;
}
.mg-hidden-zone-btn--wrong {
  background: rgba(120,20,20,0.3) !important;
  border-color: rgba(255,80,80,0.4) !important;
  animation: mgWrong 0.4s ease;
}

/* ── Level 8 hiddenObject — taonga clue card ─────────────────── */
.l8-ho-clue {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(140,100,40,0.35);
  border-radius: 10px;
  padding: 14px 12px 12px;
  text-align: center;
  margin: 4px 0 6px;
}
.l8-ho-clue__icon {
  font-size: 2rem;
  display: block;
}
.l8-ho-clue__name {
  font-size: 14px;
  font-weight: 700;
  color: #c9a87c;
  margin: 6px 0 5px;
  font-family: 'Cinzel', serif;
}
.l8-ho-clue__text {
  font-size: 12px;
  color: var(--text-dim, rgba(200,190,170,0.7));
  line-height: 1.5;
  font-style: italic;
}

/* =============================================================
   LEVEL 9 — renderLandProtect  (mg-land-*)
   Māui: Protect land tiles before countdown bars expire
   ============================================================= */

.mg-land-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 320px;
  margin: 8px auto 10px;
}

.mg-land-tile {
  background: rgba(22, 14, 6, 0.80);
  border: 1px solid rgba(140, 90, 30, 0.40);
  border-radius: 10px;
  padding: 10px 10px 8px;
  min-height: 70px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mg-land-tile:hover:not(.mg-land-tile--saved):not(.mg-land-tile--lost) {
  background: rgba(140, 90, 30, 0.16);
  border-color: rgba(244, 192, 70, 0.45);
}
.mg-land-tile:active:not(.mg-land-tile--saved):not(.mg-land-tile--lost) {
  transform: scale(0.97);
}

.mg-land-name {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #e0d4b8);
  letter-spacing: 0.06em;
  text-align: center;
}

.mg-land-bar-wrap {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
}

.mg-land-bar {
  height: 100%;
  width: 100%;
  background: var(--gold, #f4c046);
  border-radius: 5px;
  transition: width 0.08s linear, background 0.3s;
}

.mg-land-tile--saved {
  background: rgba(0, 80, 40, 0.40) !important;
  border-color: rgba(0, 220, 140, 0.55) !important;
  box-shadow: 0 0 10px rgba(0, 220, 140, 0.20);
  cursor: default;
}
.mg-land-tile--saved .mg-land-name {
  color: rgba(0, 220, 140, 0.90);
}

.mg-land-tile--lost {
  background: rgba(80, 10, 10, 0.55) !important;
  border-color: rgba(220, 50, 50, 0.55) !important;
  opacity: 0.70;
  cursor: default;
}
.mg-land-tile--lost .mg-land-name {
  color: rgba(255, 100, 100, 0.80);
}
.mg-land-tile--lost .mg-land-bar {
  background: rgba(220, 50, 50, 0.60);
}

/* =============================================================
   LEVEL 9 — renderThreadRunner  (l9-nav-* / l9-dpad-*)
   Māui: Navigate the aho through checkpoints to the goal
   ============================================================= */

.l9-nav-grid {
  display: grid;
  gap: 3px;
  max-width: 270px;
  margin: 0 auto 4px;
}

.l9-nav-cell {
  aspect-ratio: 1 / 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(140, 90, 30, 0.25);
  background: rgba(22, 14, 6, 0.65);
  font-size: 1.1rem;
  transition: background 0.15s, border-color 0.15s;
}

.l9-nav-cell--wall {
  background: rgba(10, 6, 3, 0.85) !important;
  border-color: rgba(60, 30, 10, 0.40) !important;
  opacity: 0.55;
}

.l9-nav-cell--player {
  background: rgba(180, 120, 20, 0.25) !important;
  border-color: var(--gold, #f4c046) !important;
  box-shadow: 0 0 8px rgba(244, 192, 70, 0.30);
}

.l9-nav-cell--goal {
  background: rgba(0, 80, 50, 0.30) !important;
  border-color: rgba(0, 200, 130, 0.50) !important;
  box-shadow: 0 0 8px rgba(0, 200, 130, 0.20);
}

.l9-nav-cell--checkpoint {
  background: rgba(100, 60, 10, 0.28) !important;
  border-color: rgba(200, 150, 50, 0.45) !important;
}

.l9-nav-cell--cp-done {
  background: rgba(0, 60, 30, 0.35) !important;
  border-color: rgba(0, 180, 110, 0.45) !important;
  opacity: 0.75;
}

.l9-dpad {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(3, 54px);
  gap: 4px;
  justify-content: center;
  margin: 8px auto 4px;
}

.l9-dpad-btn {
  width: 54px;
  height: 54px;
  background: rgba(22, 14, 6, 0.75);
  border: 1px solid rgba(140, 90, 30, 0.40);
  border-radius: 8px;
  color: var(--text, #e0d4b8);
  font-size: 18px;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.l9-dpad-btn:hover:not(:disabled) {
  background: rgba(140, 90, 30, 0.22);
  border-color: rgba(244, 192, 70, 0.45);
}
.l9-dpad-btn:active:not(:disabled) {
  background: rgba(180, 120, 30, 0.35);
  transform: scale(0.93);
}

/* =============================================================
   LEVEL 9 — renderMemoryWeave  (mg-weave-*)
   Hinengaro: Tap survival strands in the correct order
   ============================================================= */

.mg-weave-woven {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 6px 0 10px;
  padding: 8px 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(140, 90, 30, 0.20);
  border-radius: 8px;
  min-height: 36px;
}

.mg-weave-arrow {
  font-size: 11px;
  color: rgba(180, 130, 50, 0.35);
  padding: 0 1px;
  flex-shrink: 0;
}

.mg-weave-slot {
  font-size: 11px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(140, 90, 30, 0.28);
  background: rgba(22, 14, 6, 0.55);
  color: rgba(200, 170, 100, 0.35);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.mg-weave-slot--done {
  border-color: rgba(200, 150, 50, 0.65) !important;
  background: rgba(100, 60, 10, 0.35) !important;
  color: var(--gold, #f4c046) !important;
  box-shadow: 0 0 6px rgba(200, 150, 50, 0.18);
}