:root {
    --promesa-ink: #172033;
    --promesa-night: #101827;
    --promesa-night-soft: #25334a;
    --promesa-paper: #f8f3e7;
    --promesa-gold: #e4ad46;
    --promesa-gold-soft: #f5d99b;
    --promesa-sand: #d9a968;
    --promesa-teal: #3a9aa0;
    --promesa-coral: #e47b63;
    --promesa-white: #fffdf7;
    --promesa-line: rgba(255, 253, 247, 0.18);
}

.promesa-game-body { background: var(--promesa-night); color: var(--promesa-paper); }
.promesa-site-header { position: relative; z-index: 20; background: #111b2b; }
.promesa-site-header .logo, .promesa-site-header .nav-link { color: var(--promesa-paper); }
.promesa-game { min-height: 100vh; background: #111b2b; }
.promesa-frame { width: min(1500px, 100%); margin: 0 auto; padding: clamp(0.6rem, 2vw, 1.5rem); }
.promesa-canvas-wrap { position: relative; min-height: min(820px, calc(100vh - 112px)); height: min(820px, calc(100vh - 112px)); overflow: hidden; background: #1d3148; border: 1px solid rgba(228, 173, 70, 0.42); box-shadow: 0 28px 70px rgba(0,0,0,.35); isolation: isolate; }
@supports (height: 100svh) { .promesa-canvas-wrap { min-height: min(820px, calc(100svh - 112px)); height: min(820px, calc(100svh - 112px)); } }
#promesa-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.promesa-canvas-wrap::after { position: absolute; inset: 0; z-index: 1; pointer-events: none; content: ''; background: linear-gradient(110deg, rgba(16,24,39,.4), transparent 28%, transparent 78%, rgba(16,24,39,.18)); border: 1px solid rgba(245,217,155,.16); box-shadow: inset 0 0 80px rgba(8,14,25,.18); }
.promesa-loading, .promesa-webgl-fallback { position: absolute; inset: 0; z-index: 12; display: grid; place-content: center; justify-items: center; gap: .65rem; text-align: center; background: radial-gradient(circle at center, #30465a 0%, #111b2b 72%); padding: 2rem; }
.promesa-loading strong { font-family: Georgia, serif; font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 500; }
.promesa-loading__mark { display: flex; gap: .4rem; }
.promesa-loading__mark span { display: block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--promesa-gold); animation: promesa-pulse 1s ease-in-out infinite; }
.promesa-loading__mark span:nth-child(2) { animation-delay: .15s; }.promesa-loading__mark span:nth-child(3) { animation-delay: .3s; }
@keyframes promesa-pulse { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
.promesa-screen { position: absolute; inset: 0; z-index: 5; display: grid; align-items: center; overflow: auto; padding: clamp(2rem, 6vw, 6rem); }
.promesa-screen[hidden], .promesa-modal[hidden], .promesa-hud[hidden], .promesa-touch-controls[hidden], .promesa-loading[hidden], .promesa-webgl-fallback[hidden] { display: none; }
.promesa-hud { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: space-between; padding: 1.1rem; pointer-events: none; }
.promesa-hud > * { pointer-events: auto; }
.promesa-hud__top, .promesa-hud__bottom { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.promesa-brand-chip { display: inline-flex; align-items: center; gap: .45rem; max-width: 70%; padding: .45rem .7rem; border: 1px solid rgba(255,253,247,.24); background: rgba(16,24,39,.68); color: rgba(255,253,247,.84); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.promesa-brand-chip__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--promesa-gold); box-shadow: 0 0 0 .2rem rgba(228,173,70,.18); }
.promesa-icon-button { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border: 1px solid rgba(255,253,247,.34); background: rgba(16,24,39,.68); color: var(--promesa-white); font-size: 1rem; cursor: pointer; }
.promesa-hud__stats { display: flex; flex-wrap: wrap; gap: .45rem; max-width: min(100%, 890px); margin-top: 1.2rem; }
.promesa-stat { display: grid; min-width: 6.2rem; gap: .16rem; padding: .55rem .65rem; border: 1px solid rgba(255,253,247,.2); background: rgba(16,24,39,.72); }
.promesa-stat__icon { width: 1rem; height: 1rem; color: var(--promesa-gold-soft); font-size: .9rem; line-height: 1rem; }
.promesa-stat strong { color: var(--promesa-white); font-size: .86rem; }
.promesa-stat span:last-child { color: rgba(255,253,247,.6); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.promesa-objective-pill, .promesa-timer { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.35rem; padding: .5rem .7rem; border: 1px solid rgba(255,253,247,.22); background: rgba(16,24,39,.76); color: rgba(255,253,247,.82); font-size: .72rem; }
.promesa-objective-pill { max-width: min(70%, 38rem); }
.promesa-timer { color: var(--promesa-gold-soft); font-variant-numeric: tabular-nums; font-weight: 800; }
.promesa-interaction-hint { position: absolute; left: 50%; bottom: 5.2rem; max-width: min(90%, 31rem); padding: .65rem .9rem; border: 1px solid rgba(245,217,155,.45); background: rgba(16,24,39,.88); color: var(--promesa-white); text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, .45rem); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.promesa-interaction-hint.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.promesa-announcement { position: absolute; left: 50%; bottom: 8.3rem; z-index: 6; max-width: min(90%, 33rem); padding: .65rem .9rem; border: 1px solid rgba(125,211,167,.5); background: rgba(16,24,39,.92); color: var(--promesa-white); text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, .45rem); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.promesa-announcement.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.promesa-screen--menu { align-items: end; background: linear-gradient(90deg, rgba(11,18,31,.94) 0%, rgba(11,18,31,.73) 41%, rgba(11,18,31,.08) 76%), linear-gradient(0deg, rgba(8,14,25,.8), transparent 54%); }
.promesa-title-block { max-width: 600px; padding-bottom: 4.5rem; }.promesa-title-block h1 { margin: .35rem 0 1.2rem; color: var(--promesa-white); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .96; letter-spacing: 0; }.promesa-title-block h1 em { color: var(--promesa-gold-soft); font-style: normal; }.promesa-title-block p:not(.promesa-kicker) { max-width: 30rem; color: rgba(255,253,247,.83); font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.55; }
.promesa-kicker { margin: 0; color: var(--promesa-gold-soft); font-size: .7rem; font-weight: 800; letter-spacing: .15em; line-height: 1.3; text-transform: uppercase; }.promesa-menu-actions { display: flex; flex-wrap: wrap; gap: .75rem; }.promesa-menu-note { margin: 1rem 0 0; max-width: 32rem; color: rgba(255,253,247,.6); font-size: .83rem; }
.promesa-menu-settings { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; margin-top: 1.15rem; color: rgba(255,253,247,.7); font-size: .72rem; }.promesa-menu-settings label { display: inline-flex; align-items: center; gap: .4rem; }.promesa-menu-settings input { accent-color: var(--promesa-gold); }
.promesa-button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .7rem; padding: .8rem 1.2rem; border: 1px solid transparent; border-radius: 2px; font: 700 .78rem/1.1 var(--font-body, Arial, sans-serif); letter-spacing: .04em; cursor: pointer; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease; }.promesa-button:hover { transform: translateY(-2px); }.promesa-button:focus-visible, .promesa-icon-button:focus-visible, .promesa-close:focus-visible, .promesa-touch-actions button:focus-visible { outline: 3px solid var(--promesa-gold-soft); outline-offset: 3px; }.promesa-button--gold { background: var(--promesa-gold); color: #172033; }.promesa-button--gold:hover { background: #f2c66a; }.promesa-button--quiet { border-color: rgba(255,253,247,.35); background: rgba(16,24,39,.45); color: var(--promesa-white); }.promesa-button--quiet:hover { border-color: var(--promesa-gold-soft); background: rgba(16,24,39,.75); }
.promesa-intro-card, .promesa-dialog, .promesa-victory-card { width: min(670px, 100%); margin: auto; padding: clamp(1.35rem, 4vw, 3rem); border: 1px solid rgba(245,217,155,.35); background: rgba(16,24,39,.91); box-shadow: 0 24px 60px rgba(0,0,0,.35); }.promesa-intro-card h2, .promesa-dialog h2, .promesa-victory-card h2 { margin: .4rem 0 .9rem; color: var(--promesa-white); font: 400 clamp(1.8rem, 4vw, 3.4rem)/1 Georgia, serif; }.promesa-intro-card > p:not(.promesa-kicker):not(.promesa-mobile-note), .promesa-dialog > p:not(.promesa-kicker), .promesa-victory-card > p:not(.promesa-kicker):not(.promesa-best-score) { color: rgba(255,253,247,.78); line-height: 1.65; }.promesa-objective { display: flex; align-items: flex-start; gap: .75rem; margin: 1.4rem 0; padding: 1rem; border-left: 3px solid var(--promesa-gold); background: rgba(228,173,70,.1); color: var(--promesa-gold-soft); line-height: 1.5; }.promesa-objective__icon { flex: 0 0 auto; color: var(--promesa-gold); }.promesa-control-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin: 1.5rem 0; }.promesa-control-grid div { display: grid; gap: .35rem; min-height: 4.4rem; align-content: center; padding: .5rem; border: 1px solid var(--promesa-line); text-align: center; }.promesa-control-grid b { color: var(--promesa-gold-soft); font-size: .7rem; }.promesa-control-grid span { color: rgba(255,253,247,.62); font-size: .68rem; }.promesa-mobile-note { color: rgba(255,253,247,.55); font-size: .82rem; }
.promesa-stat__icon--quiz { width: 1rem; height: 1rem; border: 1px solid currentColor; border-radius: 2px; color: var(--promesa-gold-soft); text-align: center; font-size: .7rem; line-height: .9rem; }
.promesa-touch-controls { position: absolute; inset: auto 1.2rem 1.2rem; z-index: 4; display: flex; align-items: end; justify-content: space-between; pointer-events: none; }.promesa-joystick { position: relative; width: 6.4rem; height: 6.4rem; border: 1px solid rgba(255,253,247,.38); border-radius: 50%; background: rgba(16,24,39,.34); pointer-events: auto; touch-action: none; }.promesa-joystick::before { content: ''; position: absolute; inset: .85rem; border: 1px dashed rgba(255,253,247,.25); border-radius: 50%; }.promesa-joystick span { position: relative; display: block; width: 2.4rem; height: 2.4rem; margin: 1.9rem auto 0; border: 1px solid rgba(255,253,247,.55); border-radius: 50%; background: rgba(228,173,70,.78); }.promesa-touch-actions { display: flex; align-items: end; gap: .7rem; pointer-events: auto; }.promesa-touch-actions button { width: 3.75rem; height: 3.75rem; border: 1px solid rgba(255,253,247,.45); border-radius: 50%; background: rgba(16,24,39,.7); color: var(--promesa-white); font-size: 1.35rem; font-weight: 800; touch-action: none; }.promesa-touch-actions button:last-child { background: rgba(58,154,160,.78); font-size: 1rem; }
.promesa-modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; overflow: auto; padding: 1rem; background: rgba(8,14,25,.68); }.promesa-dialog { position: relative; max-height: calc(100% - 2rem); overflow: auto; }.promesa-dialog--reading { width: min(620px, 100%); }.promesa-dialog--quiz { width: min(700px, 100%); }.promesa-close { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border: 1px solid var(--promesa-line); background: transparent; color: var(--promesa-white); font-size: 1.4rem; cursor: pointer; }.promesa-dialog h2 { padding-right: 2rem; font-size: clamp(1.6rem, 4vw, 2.6rem); }.promesa-reference { margin: 1rem 0 1.3rem; color: var(--promesa-gold-soft); font-size: .8rem; font-weight: 800; letter-spacing: .04em; }.promesa-quiz-options { display: grid; gap: .65rem; margin: 1.4rem 0; }.promesa-quiz-option { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; border: 1px solid rgba(255,253,247,.23); background: rgba(255,253,247,.06); color: var(--promesa-white); text-align: left; cursor: pointer; }.promesa-quiz-option:hover, .promesa-quiz-option:focus-visible { border-color: var(--promesa-gold); background: rgba(228,173,70,.14); outline: none; }.promesa-quiz-option__letter { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid var(--promesa-gold); border-radius: 50%; color: var(--promesa-gold-soft); font-size: .75rem; font-weight: 800; }.promesa-quiz-option.is-correct { border-color: #7dd3a7; background: rgba(63,153,111,.24); }.promesa-quiz-option.is-wrong { border-color: #f28a7a; background: rgba(193,68,61,.24); }.promesa-quiz-result { margin: 1rem 0 1.3rem; padding: 1rem; border-left: 3px solid var(--promesa-gold); background: rgba(255,253,247,.06); }.promesa-quiz-result strong { color: var(--promesa-gold-soft); }.promesa-quiz-result p { color: rgba(255,253,247,.75); line-height: 1.5; }.promesa-settings { display: grid; gap: .75rem; margin-top: 1.7rem; padding-top: 1.4rem; border-top: 1px solid var(--promesa-line); color: rgba(255,253,247,.72); font-size: .85rem; }.promesa-settings label { display: flex; align-items: center; gap: .65rem; }.promesa-settings input { accent-color: var(--promesa-gold); }
.promesa-victory-card { max-width: 750px; text-align: center; }.promesa-victory-card h2 { font-size: clamp(2.3rem, 5vw, 4.3rem); }.promesa-final-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1.8rem 0; }.promesa-final-stats div { display: grid; gap: .3rem; padding: .9rem .4rem; border-top: 1px solid var(--promesa-gold); background: rgba(255,253,247,.05); }.promesa-final-stats strong { color: var(--promesa-gold-soft); font: 700 1.3rem Georgia, serif; }.promesa-final-stats span { color: rgba(255,253,247,.58); font-size: .67rem; }.promesa-best-score { color: var(--promesa-gold-soft); font-size: .85rem; }.promesa-dialog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.5rem; }
.promesa-below { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.2fr) auto; align-items: center; gap: clamp(1rem, 4vw, 4rem); width: min(1200px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2.5rem, 7vw, 5.5rem) 0; }.promesa-below h2 { margin: .4rem 0 0; color: var(--promesa-white); font: 400 clamp(1.8rem, 3vw, 3rem) Georgia, serif; }.promesa-below > p { margin: 0; color: rgba(255,253,247,.68); line-height: 1.7; }.promesa-below-links { display: grid; gap: .8rem; }.promesa-below-links a { color: var(--promesa-gold-soft); font-size: .82rem; text-decoration: none; }.promesa-below-links a:hover { text-decoration: underline; }.promesa-footer { background: #0d1522; }.promesa-footer .footer-bottom { margin: 0; padding: 1.5rem 0; }
@media (max-width: 760px) { .promesa-canvas-wrap { min-height: calc(100vh - 90px); height: calc(100vh - 90px); } @supports (height: 100svh) { .promesa-canvas-wrap { min-height: calc(100svh - 90px); height: calc(100svh - 90px); } }.promesa-screen { padding: 1.25rem; }.promesa-title-block { padding-bottom: 3.5rem; }.promesa-title-block h1 { font-size: clamp(2.2rem, 11vw, 4rem); }.promesa-hud__stats { gap: .25rem; margin-top: .4rem; }.promesa-stat { min-width: 5.5rem; padding: .4rem .45rem; }.promesa-stat span:last-child { font-size: .56rem; }.promesa-objective-pill { max-width: calc(100% - 5.5rem); }.promesa-below { grid-template-columns: 1fr; gap: 1.1rem; }.promesa-below-links { grid-template-columns: 1fr 1fr; }.promesa-control-grid { grid-template-columns: repeat(3, 1fr); }.promesa-control-grid div:nth-child(4), .promesa-control-grid div:nth-child(5) { min-height: 3.2rem; }.promesa-final-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .promesa-site-header .header-container { padding-inline: .8rem; }.promesa-canvas-wrap { border-inline: 0; }.promesa-canvas-wrap::after { border-inline: 0; }.promesa-frame { padding: 0; }.promesa-screen--menu { align-items: end; background: linear-gradient(0deg, rgba(11,18,31,.96) 0%, rgba(11,18,31,.6) 59%, rgba(11,18,31,.08) 100%); }.promesa-title-block { padding-bottom: 2.8rem; }.promesa-title-block h1 { font-size: clamp(2.1rem, 10.5vw, 3.3rem); }.promesa-menu-actions { display: grid; }.promesa-menu-actions .promesa-button { width: 100%; }.promesa-hud { justify-content: flex-start; padding: .65rem; }.promesa-brand-chip { max-width: calc(100% - 3.2rem); font-size: .58rem; }.promesa-hud__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; margin-top: .5rem; }.promesa-stat { min-width: 0; padding: .3rem .35rem; }.promesa-stat span:last-child { font-size: .5rem; }.promesa-hud__bottom { align-items: end; margin-top: auto; margin-bottom: 1rem; }.promesa-objective-pill { min-height: 2.7rem; font-size: .61rem; }.promesa-interaction-hint { bottom: 7.8rem; }.promesa-touch-controls { inset-inline: .7rem; bottom: .7rem; }.promesa-joystick { width: 5.6rem; height: 5.6rem; }.promesa-joystick span { margin-top: 1.6rem; }.promesa-touch-actions button { width: 3.35rem; height: 3.35rem; }.promesa-intro-card, .promesa-dialog, .promesa-victory-card { padding: 1.25rem; }.promesa-control-grid { gap: .3rem; }.promesa-control-grid div { min-height: 3.5rem; padding: .3rem; }.promesa-control-grid b { font-size: .58rem; }.promesa-control-grid span { font-size: .55rem; }.promesa-below { width: calc(100% - 2rem); } }
/* Reduced motion suppresses ornamental motion while preserving outline/focus visibility. */
@media (prefers-reduced-motion: reduce) { .promesa-loading__mark span { animation: none !important; } .promesa-button, .promesa-interaction-hint, .promesa-announcement { transition: none !important; } .promesa-button:hover { transform: none; } }
body.promesa-reduced-motion .promesa-loading__mark span,
body.promesa-reduced-motion .promesa-button,
body.promesa-reduced-motion .promesa-interaction-hint,
body.promesa-reduced-motion .promesa-announcement { animation: none !important; transition: none !important; }
body.promesa-reduced-motion .promesa-button:hover { transform: none; }