:root {
  color-scheme: light;
  --ink: #35251f;
  --muted: #745e52;
  --paper: #f8edcf;
  --paper-light: #fff8e7;
  --red: #b93d2f;
  --red-dark: #76251f;
  --gold: #e9ad37;
  --gold-dark: #8f5b18;
  --blue: #236f83;
  --green: #39734e;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 900px; min-height: 620px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: #b24d32; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #087ea4; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lesson { height: 100%; padding: 14px; }
.forum { position: relative; height: 100%; min-height: 590px; overflow: hidden; isolation: isolate; border: 2px solid #6e2d22; border-radius: 24px; background: #d99a55 url("art/forum-backdrop-01.webp") center / cover no-repeat; box-shadow: 0 8px 0 #722d21, 0 25px 55px rgba(61,31,20,.28); }
.forum::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg,rgba(48,21,12,.2),transparent 28%,transparent 72%,rgba(48,21,12,.1)), linear-gradient(0deg,rgba(79,32,19,.22),transparent 45%); }

.quest-hud { position: absolute; z-index: 10; left: 20px; right: 20px; top: 18px; height: 68px; display: grid; grid-template-columns: 210px 1fr auto; align-items: center; gap: 18px; }
.quest-mark,.difficulty,.scores { border: 1px solid rgba(80,42,25,.3); background: rgba(255,248,231,.94); box-shadow: 0 5px 0 rgba(88,44,25,.22); backdrop-filter: blur(8px); }
.quest-mark { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 17px; border-radius: 14px; }
.quest-mark span,.difficulty span,.scores span { color: var(--muted); font-size: 10px; font-weight: 1000; letter-spacing: .11em; text-transform: uppercase; }
.quest-mark strong { margin-top: 3px; font-family: Georgia,serif; font-size: 17px; }
.difficulty { justify-self: center; width: min(350px,100%); display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 9px 14px; border-radius: 14px; }
.difficulty span b { color: var(--red-dark); font-size: 15px; }.difficulty strong { font-size: 12px; }
.difficulty > i { grid-column: 1/-1; height: 8px; overflow: hidden; border-radius: 99px; background: #ddcfb5; }
.difficulty > i b { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--red)); transition: width 220ms ease-out; }
.scores { height: 68px; display: flex; align-items: stretch; padding: 7px; border-radius: 14px; }
.scores > div { min-width: 72px; display: grid; place-content: center; padding: 0 10px; text-align: center; }
.scores > div + div { border-left: 1px solid #ddcfb5; }
.scores strong { display: block; margin-top: 2px; font-family: Georgia,serif; font-size: 21px; line-height: 1; }.scores strong i { color: #d68d16; font-style: normal; font-size: 15px; }

.mascot-camp { position: absolute; z-index: 4; left: 25px; bottom: 26px; width: 250px; height: calc(100% - 130px); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; pointer-events: none; }
.mascot { z-index: 2; width: min(235px,100%); max-height: 68%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 5px rgba(58,24,14,.34)); transform-origin: 50% 90%; transition: transform 180ms ease-out, filter 180ms ease-out; }
.speech { position: relative; z-index: 4; width: 220px; margin-bottom: -8px; padding: 13px 15px; border: 2px solid var(--ink); border-radius: 17px 17px 17px 5px; background: var(--paper-light); box-shadow: 0 5px 0 rgba(56,35,27,.2); font-size: 13px; font-weight: 900; line-height: 1.25; text-align: center; }
.speech::after { position: absolute; left: 25px; bottom: -13px; width: 18px; height: 18px; content: ""; transform: rotate(45deg); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--paper-light); }
.stand { z-index: 1; width: 190px; height: 45px; margin-top: -25px; display: grid; place-items: end center; padding-bottom: 7px; border: 2px solid #6d4932; border-radius: 50%; color: #6d4932; background: linear-gradient(#e0bd83,#ad7649); box-shadow: 0 6px 0 #75492f; font: 900 10px/1 Georgia,serif; letter-spacing: .16em; }
.forum.is-cheering .mascot { animation: mascot-cheer 620ms ease-out; }.forum.is-miss .mascot { animation: mascot-oops 350ms ease-out; filter: drop-shadow(0 10px 5px rgba(58,24,14,.34)) saturate(.75); }

.tablet-wrap { position: absolute; z-index: 3; left: 275px; right: 28px; top: 101px; bottom: 19px; display: grid; place-items: center; }
.tablet-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 13px 10px rgba(62,29,15,.32)); }
.tablet-content { position: relative; z-index: 2; width: 78%; height: 78%; display: grid; grid-template-rows: auto minmax(145px,1fr) auto auto; align-items: center; padding: 3px 8px 8px; }
.challenge-heading { text-align: center; }.challenge-heading span { color: var(--red-dark); font-size: 10px; font-weight: 1000; letter-spacing: .14em; text-transform: uppercase; }
.challenge-heading h1 { margin: 5px 0 4px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(28px,3.4vw,45px); line-height: 1; letter-spacing: -.035em; }.challenge-heading p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 700; }
.challenge-stage { min-height: 0; display: grid; place-items: center; padding: 9px 4px 4px; }
.inscription { display: grid; place-items: center; gap: 7px; }
.inscription small,.builder-label,.skill-chip { color: var(--muted); font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.roman-display { min-width: 210px; padding: 7px 24px 10px; border-bottom: 4px double rgba(93,61,43,.5); font-family: Georgia,"Times New Roman",serif; font-size: clamp(60px,8vw,98px); font-weight: 800; line-height: 1; letter-spacing: .11em; text-align: center; text-shadow: 0 2px #fff9e8; }
.token-breakdown { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; }
.value-token { padding: 6px 9px; border: 1px solid #b99d73; border-radius: 8px; background: rgba(255,250,231,.72); color: #674938; font: 800 13px/1 Georgia,serif; }.value-token.is-subtractive { border-color: var(--red); color: var(--red-dark); background: #f7d7c9; }
.builder { width: min(560px,100%); display: grid; justify-items: center; gap: 10px; }
.target { display: flex; align-items: baseline; gap: 10px; }.target span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }.target strong { font-family: Georgia,serif; font-size: 42px; color: var(--red-dark); }
.builder-slot { width: min(470px,100%); min-height: 72px; display: flex; align-items: center; justify-content: center; padding: 8px 15px; border: 2px dashed #947354; border-radius: 14px; background: rgba(255,251,237,.58); font-family: Georgia,serif; font-size: 48px; font-weight: 800; letter-spacing: .13em; }
.builder-slot.is-empty { color: #927f6f; font-family: inherit; font-size: 13px; letter-spacing: 0; font-weight: 800; }
.tile-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.numeral-tile { width: 54px; min-height: 54px; border: 2px solid #78533d; border-radius: 9px; background: linear-gradient(#fff8df,#e5c995); box-shadow: 0 5px 0 #8c623e, inset 0 0 0 2px rgba(255,255,255,.4); font: 900 25px/1 Georgia,serif; transition: transform 130ms ease-out, box-shadow 130ms ease-out; }
.numeral-tile:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 #8c623e; }.numeral-tile:active { transform: translateY(3px); box-shadow: 0 2px 0 #8c623e; }
.feedback { min-height: 27px; display: grid; place-items: center; color: var(--green); font-size: 13px; font-weight: 1000; text-align: center; }.feedback.is-error { color: var(--red-dark); }
.action-area { min-height: 77px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.choice-grid { width: min(580px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.choice,.primary,.secondary { min-height: 58px; border: 2px solid #9a795b; border-radius: 12px; background: #fff9e8; box-shadow: 0 5px 0 #b69a72; font-weight: 1000; transition: transform 130ms ease-out, box-shadow 130ms ease-out; }
.choice { font-family: Georgia,serif; font-size: 26px; }.choice small { display: block; margin-top: 3px; color: var(--muted); font: 800 11px/1.1 "Avenir Next",sans-serif; }
.choice:hover,.secondary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #b69a72; }.choice:active,.secondary:active { transform: translateY(3px); box-shadow: 0 2px 0 #b69a72; }
.primary { min-width: 210px; padding: 0 24px; border-color: var(--red-dark); color: white; background: var(--red); box-shadow: 0 6px 0 var(--red-dark); font-size: 15px; }.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--red-dark); }.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--red-dark); }
.secondary { min-width: 90px; padding: 0 16px; color: var(--muted); font-size: 13px; }
.builder-actions { display: flex; align-items: center; justify-content: center; gap: 9px; }
.explain-grid .choice { padding: 8px 10px; font-family: inherit; font-size: 13px; }
.skill-chip { display: inline-flex; padding: 5px 9px; border-radius: 99px; color: #6f3f20; background: #f0d59b; letter-spacing: .04em; }

.victory { position: absolute; z-index: 30; left: 50%; top: 53%; width: 360px; opacity: 0; transform: translate(-50%,-50%) scale(.2); pointer-events: none; }.victory img { width: 100%; filter: drop-shadow(0 12px 7px rgba(75,38,15,.3)); }.forum.is-level-up .victory { animation: victory-pop 900ms ease-out both; }
.confetti { position: absolute; z-index: 29; inset: 0; pointer-events: none; }.confetti i { position: absolute; left: 50%; top: 50%; width: 11px; height: 19px; border-radius: 3px; background: var(--gold); animation: confetti 780ms ease-out both; }.confetti i:nth-child(3n) { background: var(--red); }.confetti i:nth-child(3n+1) { background: var(--blue); }
.toast { position: absolute; z-index: 40; left: 50%; bottom: 28px; max-width: 76%; padding: 10px 17px; opacity: 0; transform: translate(-50%,12px); border-radius: 99px; color: white; background: var(--ink); pointer-events: none; font-size: 13px; font-weight: 900; transition: opacity 150ms ease-out,transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%,0); }

@keyframes mascot-cheer { 35% { transform: translateY(-17px) rotate(-4deg) scale(1.07); } 65% { transform: translateY(-6px) rotate(3deg) scale(1.04); } }
@keyframes mascot-oops { 30% { transform: translateX(-7px) rotate(-3deg); } 60% { transform: translateX(7px) rotate(3deg); } }
@keyframes victory-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(-12deg); } 35% { opacity: 1; transform: translate(-50%,-50%) scale(1.08) rotate(3deg); } 75% { opacity: 1; transform: translate(-50%,-50%) scale(.96); } 100% { opacity: 0; transform: translate(-50%,-56%) scale(1.02); } }
@keyframes confetti { to { opacity: 0; transform: translate(var(--x),var(--y)) rotate(var(--r)); } }
@media (max-height: 730px) { .quest-hud { top: 11px; }.tablet-wrap { top: 88px; bottom: 10px; }.mascot-camp { bottom: 12px; height: calc(100% - 112px); }.tablet-content { height: 82%; }.challenge-heading h1 { font-size: 29px; }.roman-display { font-size: 62px; }.action-area { min-height: 63px; }.choice,.primary,.secondary { min-height: 50px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }