/* Antaŭen — main.css único. Contrato normativo: DESIGN.md; revisão 2026-09-13. */

/* Bestiário de Oporthuna: ferramenta web desktop, separada do jogo. */
.bestiario-body { color: var(--color-text-main); background: var(--color-brown-dark); user-select: auto; }
.bestiario-body [hidden] { display: none; }
.bestiario-main { overflow: auto; }
.bestiario-workspace { padding: clamp(16px, 2vw, 24px); overflow-wrap: anywhere; }
.bestiario-workspace h1 { color: var(--color-gold); margin-bottom: var(--space-4); }
.bestiario-workspace h2 { color: var(--color-gold-ink); margin-bottom: var(--space-3); font-size: 1.8rem; }
.bestiario-workspace p { margin-bottom: var(--space-3); }
.bestiario-login, .bestiario-panel { background: var(--color-cream); color: var(--color-text-main); border: 1px solid var(--color-brown); border-radius: var(--radius-card); padding: var(--space-4); min-width: 0; }
.bestiario-login { max-width: 560px; display: grid; gap: var(--space-4); }
.bestiario-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.4fr) minmax(200px, 300px); gap: var(--space-4); align-items: start; }
.bestiario-panel fieldset { border: 0; min-width: 0; padding: 0; margin: var(--space-4) 0; }
.bestiario-panel legend { font-family: var(--font-label); font-weight: 700; margin-bottom: var(--space-2); }
.bestiario-panel details { margin-bottom: var(--space-2); }
.bestiario-panel summary { min-height: 48px; padding: 12px; border: 1px solid var(--color-brown); border-radius: var(--radius-xs); font-family: var(--font-label); font-weight: 700; cursor: pointer; }
.bestiario-panel details[open] summary { margin-bottom: var(--space-3); background: var(--color-parchment); }
.bestiario-panel .input-wrap, .bestiario-login .input-wrap { background: var(--color-cream); border: 1px solid var(--color-brown); padding: 0 var(--space-3); }
.bestiario-panel .input, .bestiario-login .input { color: var(--field-value-ink); min-height: 48px; }
.bestiario-panel textarea.input { resize: vertical; }
.bestiario-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.bestiario-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }
.bestiario-actions label, .bestiario-checks label, .bestiario-poses label, .bestiario-workspace #comparison label { min-height: 48px; display: flex; align-items: center; gap: var(--space-2); }
.bestiario-checks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bestiario-workspace #distance, .bestiario-workspace #reference-opacity { width: 100%; min-height: 48px; }
.bestiario-list { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.bestiario-creature { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 56px; padding: var(--space-2); color: var(--color-text-main); background: var(--color-parchment); border: 1px solid var(--color-brown); border-radius: var(--radius-xs); text-align: left; }
.bestiario-creature img { width: 48px; height: 48px; object-fit: contain; }
.bestiario-creature span { min-width: 0; overflow-wrap: anywhere; }
.bestiario-creature[aria-pressed="true"] { outline: 3px solid var(--color-gold-ink); outline-offset: -3px; }
.bestiario-preview svg { display: block; width: 100%; height: auto; background: var(--color-brown-dark); border: 1px solid var(--color-brown); }
.bestiario-shadow { filter: brightness(0) blur(var(--bestiario-shadow-blur, 0px)); pointer-events: none; }
.bestiario-reference { pointer-events: none; }
.bestiario-shadow-blur-0 { --bestiario-shadow-blur: 0px; }
.bestiario-shadow-blur-1 { --bestiario-shadow-blur: 1px; }
.bestiario-shadow-blur-2 { --bestiario-shadow-blur: 2px; }
.bestiario-shadow-blur-3 { --bestiario-shadow-blur: 3px; }
.bestiario-shadow-blur-4 { --bestiario-shadow-blur: 4px; }
.bestiario-shadow-blur-5 { --bestiario-shadow-blur: 5px; }
.bestiario-shadow-blur-6 { --bestiario-shadow-blur: 6px; }
.bestiario-shadow-blur-7 { --bestiario-shadow-blur: 7px; }
.bestiario-shadow-blur-8 { --bestiario-shadow-blur: 8px; }
.bestiario-shadow-blur-9 { --bestiario-shadow-blur: 9px; }
.bestiario-shadow-blur-10 { --bestiario-shadow-blur: 10px; }
.bestiario-shadow-blur-11 { --bestiario-shadow-blur: 11px; }
.bestiario-shadow-blur-12 { --bestiario-shadow-blur: 12px; }
.bestiario-shadow-blur-13 { --bestiario-shadow-blur: 13px; }
.bestiario-shadow-blur-14 { --bestiario-shadow-blur: 14px; }
.bestiario-shadow-blur-15 { --bestiario-shadow-blur: 15px; }
.bestiario-shadow-blur-16 { --bestiario-shadow-blur: 16px; }
.bestiario-shadow-blur-17 { --bestiario-shadow-blur: 17px; }
.bestiario-shadow-blur-18 { --bestiario-shadow-blur: 18px; }
.bestiario-shadow-blur-19 { --bestiario-shadow-blur: 19px; }
.bestiario-shadow-blur-20 { --bestiario-shadow-blur: 20px; }
.bestiario-shadow-blur-21 { --bestiario-shadow-blur: 21px; }
.bestiario-shadow-blur-22 { --bestiario-shadow-blur: 22px; }
.bestiario-shadow-blur-23 { --bestiario-shadow-blur: 23px; }
.bestiario-shadow-blur-24 { --bestiario-shadow-blur: 24px; }
.bestiario-shadow-blur-25 { --bestiario-shadow-blur: 25px; }
.bestiario-shadow-blur-26 { --bestiario-shadow-blur: 26px; }
.bestiario-shadow-blur-27 { --bestiario-shadow-blur: 27px; }
.bestiario-shadow-blur-28 { --bestiario-shadow-blur: 28px; }
.bestiario-shadow-blur-29 { --bestiario-shadow-blur: 29px; }
.bestiario-shadow-blur-30 { --bestiario-shadow-blur: 30px; }
.bestiario-workspace #status { color: var(--color-cream); }
.bestiario-panel .field { margin-bottom: var(--space-3); }
@media (max-width: 900px) { .bestiario-grid { grid-template-columns: minmax(0, 1fr); } .bestiario-preview svg { max-width: 300px; } }

/* ---------- 01 FONTES -------------------------------------------------------
   WOFF2 oficiais locais em assets/fonts/ (sem CDN), latin + latin-ext;
   latin-ext cobre o "ŭ" de Antaŭen. SC hierarquiza títulos e identificações;
   Infant preserva toda a leitura contínua e os controles. */

/* Cormorant Garamond */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-400-700-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/cormorant-garamond-400-700-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Infant */
@font-face {
  font-family: "Cormorant Infant";
  src: url("assets/fonts/cormorant-infant-400-700-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Infant";
  src: url("assets/fonts/cormorant-infant-400-700-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant SC */
@font-face {
  font-family: "Cormorant SC";
  src: url("assets/fonts/cormorant-sc-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant SC";
  src: url("assets/fonts/cormorant-sc-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- TOKENS — contrato DESIGN.md ---------------------------------- */
:root {
  --color-parchment: #E8DCC4;
  --color-cream: #F5EBD8;
  --color-gold: #C8AA68;
  --color-gold-strong: #D89A4A;
  --color-brown: #6B4A2D;
  --color-brown-dark: #3E2A1D;
  --color-ink-deep: #3B281B;
  --color-sky: #7CB6E6;
  --color-moss: #6E8B57;
  --color-red-soft: #B86A5D;
  --color-text-main: #3E2A1D;
  --color-text-soft: #6B4A2D;
  --color-text-inverse: #F5EBD8;
  --color-success: #6E8B57;
  --color-warning: #D89A4A;
  --color-danger: #B86A5D;
  --color-info: #7CB6E6;
  --color-danger-ink: #8E3F35;
  --color-success-ink: #4F6838;
  --color-gold-ink: #805B24;
  --color-info-ink: #365B7B;
  --color-warning-ink: #6B4A2D;
  --color-attention-ink: #650000;
  --color-placeholder-ink: #75665C;
  --color-danger-light: #FFB4A8;
  --color-success-light: #B6D99C;
  --color-info-light: #A8D5FA;
  --color-warning-light: #EBC780;
  --color-primary-top: #D8B768;
  --color-primary-bottom: #BA9048;
  --color-secondary-top: #536C3B;
  --color-tertiary-top: #426D92;
  --color-danger-top: #9C4A3E;
  --surface-light: rgba(245,235,216,0.96);
  --surface-dark: rgba(30,20,14,0.94);
  --surface-scrim: rgba(30,20,14,0.84);
  --surface-glass-light: #F5EBD8A6;
  --surface-glass-dark: #F5EBD8A6;
  --surface-ink: var(--color-cream);
  --surface-soft: var(--color-cream);
  --surface-danger: var(--color-danger-light);
  --surface-success: var(--color-success-light);
  --surface-info: var(--color-info-light);
  --surface-warning: var(--color-warning-light);
  --surface-attention: var(--color-danger-light);
  --field-value-ink: var(--color-brown);
  --field-placeholder-ink: var(--color-placeholder-ink);
  --title-color: var(--color-gold);
  --font-title: "Cormorant SC";
  --font-body: "Cormorant Infant";
  --font-label: "Cormorant SC";
  --text-h1: clamp(2.4rem, 8vw, 4rem);
  --text-h2: clamp(1.8rem, 6vw, 2.8rem);
  --text-h3: clamp(1.35rem, 4.5vw, 2rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.875rem;
  --line-title: 1.15;
  --line-body: 1.5;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-card: 12px;
  --radius-modal: 32px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --screen-gutter: clamp(16px, 4vw, 24px);
  --characteristic-track-height: 36px;
  --characteristic-thumb-size: 28px;
  --mondmapo-ad-width: 320px;
  --mondmapo-ad-height: 100px;
  --blur-panel: 10px;
  --blur-heavy: 28px;
  --border-light: rgba(245,235,216,0.65);
  --border-gold: rgba(200,170,104,0.75);
  --border-brown: rgba(107,74,45,0.38);
  --shadow-soft: 0 10px 30px rgba(62,42,29,0.18);
  --shadow-card: 0 16px 42px rgba(62,42,29,0.26);
  --shadow-button: 0 4px 12px rgba(62,42,29,0.28);
  --shadow-glow: 0 0 12px rgba(216,154,74,0.35);
  --motion-tap: 120ms;
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --motion-screen: 350ms;
  --motion-slow: 400ms;
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.2,0.8,0.2,1);
  --ease-spring: cubic-bezier(0.18,1.25,0.35,1);
}

/* ---------- BASE / VIEWPORT ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--color-brown-dark); overscroll-behavior-y: none; }
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--line-body);
  color: var(--surface-ink);
  background: var(--color-brown-dark);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-user-select: none;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; transition: transform var(--duration-fast) var(--ease-standard); }
button:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):active { transform: scale(0.94) translateY(2px); }
input, textarea, select, [contenteditable="true"] { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
h1, .ds-title {
  font-family: var(--font-title);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--line-title);
  color: var(--title-color);
}
h2, .ds-heading { font: 700 var(--text-h2)/var(--line-title) var(--font-title); color: var(--surface-ink); }
h3, .ds-subheading { font: 700 var(--text-h3)/var(--line-title) var(--font-title); color: var(--surface-soft); }
.ds-body { font-size: var(--text-body); line-height: var(--line-body); }
.ds-caption { font-size: var(--text-caption); color: var(--surface-soft); }
.ds-code { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.app-main {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}
.app-screen {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background: var(--color-brown-dark);
}
.screen-background, .screen-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.screen-background { background-size: cover; background-position: center top; }
.screen-atmosphere { background: linear-gradient(180deg,rgba(62,42,29,0.15),rgba(62,42,29,0.45)); }
.screen-content {
  flex: 1 0 auto;
  min-height: 100%;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: calc(env(safe-area-inset-top,0px) + var(--screen-gutter));
  padding-right: calc(env(safe-area-inset-right,0px) + var(--screen-gutter));
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter));
  padding-left: calc(env(safe-area-inset-left,0px) + var(--screen-gutter));
  overflow-wrap: anywhere;
}
.page { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
/* Exceção Zhênitt 2026-10-23: somente Mondmapo reserva publicidade futura.
   No fluxo, não sobrepõe o jogo. Sem gutter no slot para caber 320px em 320px;
   a área de jogo conserva os quatro safe areas + gutter. */
.app-main--mondmapo .screen-content {
  min-height: 100vh;
  min-height: 100dvh;
  gap: 0;
  padding: 0;
}
.mondmapo-world {
  flex: 1 0 auto;
  min-width: 0;
  position: relative;
  padding-top: calc(env(safe-area-inset-top,0px) + var(--screen-gutter));
  padding-right: calc(env(safe-area-inset-right,0px) + var(--screen-gutter));
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter));
  padding-left: calc(env(safe-area-inset-left,0px) + var(--screen-gutter));
}
.mondmapo-ad-space {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding-right: env(safe-area-inset-right,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  padding-left: env(safe-area-inset-left,0px);
  background: var(--color-brown-dark);
}
.mondmapo-ad-slot {
  width: min(100%,var(--mondmapo-ad-width));
  height: var(--mondmapo-ad-height);
}
/* Cortina de viagem: top layer, apenas na área de jogo; reserva de ads visível. */
.location-transition {
  position: fixed;
  inset: 0 0 auto;
  margin: 0;
  width: 100%;
  max-width: none;
  height: calc(100vh - var(--mondmapo-ad-height) - env(safe-area-inset-bottom,0px));
  height: calc(100dvh - var(--mondmapo-ad-height) - env(safe-area-inset-bottom,0px));
  max-height: none;
  border: 0;
  border-radius: 0;
  padding: calc(env(safe-area-inset-top,0px) + var(--screen-gutter)) calc(env(safe-area-inset-right,0px) + var(--screen-gutter)) calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter)) calc(env(safe-area-inset-left,0px) + var(--screen-gutter));
  color: var(--color-cream);
  background: var(--color-brown-dark) url('assets/interface/backgrounds/bkgnd_paisagem_selecao.jpg') center top / cover no-repeat;
  overflow-y: auto;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}
.location-transition[open] { display: grid; align-items: center; }
.location-transition::backdrop { background: transparent; }
.location-transition-panel { width: 100%; margin: auto; text-align: center; }
.location-transition-actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.location-transition [hidden] { display: none; }
.screen-background--aresto { background-image: url('assets/interface/backgrounds/bkgnd_aresto.jpg'); }
.app-main--aresto .screen-content { min-height: 100vh; min-height: 100dvh; padding-top: calc(env(safe-area-inset-top,0px) + max(var(--screen-gutter),4vh)); }
.aresto-logo { width: 70vw; height: auto; align-self: center; flex-shrink: 0; margin: 0 auto; }
.aresto-panel.main-panel { margin-top: auto; margin-bottom: var(--space-6); display: grid; gap: var(--space-4); }
.aresto-panel [hidden], .aresto-appeal[hidden] { display: none; }
.aresto-countdown { font-variant-numeric: tabular-nums; }
.aresto-appeal.btn-icon { align-self: flex-start; margin-top: 0; color: var(--color-gold); }
.aresto-appeal-icon { width: 48px; height: 48px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.aresto-appeal-outline { stroke: var(--color-ink-deep); stroke-width: 3.5; }
.aresto-appeal-mark { stroke: currentColor; stroke-width: 2; }
.aresto-dialog.main-panel { margin: auto; width: min(calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - var(--screen-gutter) - var(--screen-gutter)),560px); max-height: calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--screen-gutter) - var(--screen-gutter)); max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - var(--screen-gutter) - var(--screen-gutter)); overflow-y: auto; }
.aresto-dialog::backdrop { background: var(--surface-scrim); }
.aresto-dialog > *, .aresto-form > * { margin-bottom: var(--space-4); }
.aresto-form { display: grid; min-width: 0; }
.aresto-letter { white-space: pre-wrap; overflow-wrap: anywhere; }
.page__title { margin-bottom: var(--space-2); }
.main-panel { width: 100%; max-width: 560px; margin: 0 auto; padding: var(--space-5); }

/* ---------- SURFACES / CONTEXTO ------------------------------------------- */
.glass-panel {
  background: var(--surface-glass-light);
  --surface-ink: var(--color-ink-deep);
  --surface-soft: var(--color-ink-deep);
  --surface-danger: var(--color-ink-deep);
  --surface-success: var(--color-ink-deep);
  --surface-info: var(--color-ink-deep);
  --surface-warning: var(--color-ink-deep);
  --surface-attention: var(--color-attention-ink);
  --title-color: var(--color-ink-deep);
  color: var(--surface-ink);
  border: 1px solid var(--color-brown);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-weight: 600;
  overflow-wrap: anywhere;
  backdrop-filter: blur(var(--blur-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel));
}
.glass-panel-light, .glass-panel-blue { background: var(--surface-glass-light); }
.glass-panel-dark {
  background: var(--surface-glass-dark);
  --surface-ink: var(--color-ink-deep);
  --surface-soft: var(--color-ink-deep);
  --surface-danger: var(--color-ink-deep);
  --surface-success: var(--color-ink-deep);
  --surface-info: var(--color-ink-deep);
  --surface-warning: var(--color-ink-deep);
  --surface-attention: var(--color-attention-ink);
  --title-color: var(--color-ink-deep);
  color: var(--surface-ink);
  border-color: var(--color-brown);
}
.glass-clear {
  --surface-ink: var(--color-ink-deep);
  --surface-soft: var(--color-ink-deep);
  --surface-danger: var(--color-ink-deep);
  --surface-success: var(--color-ink-deep);
  --surface-info: var(--color-ink-deep);
  --surface-warning: var(--color-ink-deep);
  --surface-attention: var(--color-attention-ink);
  --title-color: var(--color-ink-deep);
  color: var(--surface-ink);
}
.toast {
  --surface-ink: var(--color-cream);
  --surface-soft: var(--color-cream);
  --surface-danger: var(--color-danger-light);
  --surface-success: var(--color-success-light);
  --surface-info: var(--color-info-light);
  --surface-warning: var(--color-warning-light);
  --surface-attention: var(--color-danger-light);
  --title-color: var(--color-gold);
  color: var(--surface-ink);
  background: var(--surface-dark);
}
.card {
  background: var(--surface-light);
  --surface-ink: var(--color-text-main);
  --surface-soft: var(--color-text-soft);
  --surface-danger: var(--color-danger-ink);
  --surface-success: var(--color-success-ink);
  --surface-info: var(--color-info-ink);
  --surface-warning: var(--color-warning-ink);
  --surface-attention: var(--color-attention-ink);
  --title-color: var(--color-gold-ink);
  color: var(--surface-ink);
  border: 1.5px solid var(--border-light);
  overflow-wrap: anywhere;
}
.glass-clear {
  background: var(--surface-glass-light);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card { padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.card-title { font: 700 1.5rem/var(--line-title) var(--font-title); color: var(--surface-ink); }
.card-description { color: var(--surface-soft); }
.quest-card { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: var(--space-4); align-items: center; }
.quest-card > * { min-width: 0; }
.quest-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-md); }
.quest-reward { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* ---------- BUTTONS / FEEDBACK ------------------------------------------- */
.btn {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1.5px solid var(--color-brown);
  border-radius: var(--radius-md);
  background: var(--color-cream);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: var(--line-body);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-button);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.btn-primary { background: linear-gradient(180deg,var(--color-primary-top),var(--color-primary-bottom)); color: var(--color-text-main); }
.btn-secondary { background: linear-gradient(180deg,var(--color-secondary-top),var(--color-success-ink)); color: var(--color-text-inverse); }
.btn-tertiary { background: linear-gradient(180deg,var(--color-tertiary-top),var(--color-info-ink)); color: var(--color-text-inverse); }
.btn-danger { background: linear-gradient(180deg,var(--color-danger-top),var(--color-danger-ink)); color: var(--color-text-inverse); }
.btn-ghost { background: var(--color-cream); color: var(--color-text-main); box-shadow: none; }
.btn-icon { padding: var(--space-2); border: 0; background: transparent; box-shadow: none; border-radius: var(--radius-sm); }
@media (hover:hover) and (pointer:fine) {
  .btn:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):hover { box-shadow: var(--shadow-button),var(--shadow-glow); }
  .btn.btn-icon:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):hover { box-shadow: none; }
}
.btn:not(:disabled):not([aria-disabled="true"]):not(.is-disabled):not(.is-loading):active { transform: scale(0.94) translateY(2px); }
:where(button,input,select,textarea):disabled, .is-disabled, :where(button,[role="button"],[role="link"])[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.btn.is-loading { cursor: wait; }
.btn.is-loading::after {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ripple { position: absolute; inset: -2px; border: 2px solid currentColor; border-radius: inherit; pointer-events: none; animation: ripple var(--duration-slow) ease-out forwards; }
@keyframes ripple { to { opacity: 0; } }
.language-switcher { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn[aria-pressed="true"] { border-width: 3px; text-decoration: underline; }

/* ---------- FIELDS / SELECTION ------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field-label { font-family: var(--font-label); font-size: var(--text-small); font-weight: 700; color: var(--surface-soft); }
.field-required-marker { color: var(--surface-danger); }
.field-optional-marker { font-family: var(--font-body); font-weight: 600; text-transform: none; }
.field-group { min-width: 0; border: 0; }
.field-group > .field-label { display: block; margin-bottom: var(--space-2); padding: 0; }
.field[aria-disabled="true"] > .field-label, .field-group[aria-disabled="true"] > .field-label { opacity: 0.6; cursor: not-allowed; }
.input-wrap {
  --surface-ink: var(--field-value-ink);
  --surface-soft: var(--field-placeholder-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 0;
  padding: var(--space-3);
  background: var(--color-cream);
  color: var(--surface-ink);
  border: 2px solid var(--color-brown);
  border-radius: var(--radius-sm);
}
.input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--surface-ink); font-size: 1rem; line-height: var(--line-body); }
.input:focus-visible { outline: 0; box-shadow: none; }
.input::placeholder { color: var(--surface-soft); opacity: 1; }
.input-wrap--multiline { align-items: stretch; }
.input--multiline { min-height: calc(var(--space-8) * 3); resize: vertical; }
.input-wrap.is-error { border-color: var(--color-danger-ink); }
.field-hint { color: var(--surface-soft); font-size: var(--text-caption); }
.field-error { color: var(--surface-danger); font-size: var(--text-caption); font-weight: 600; }
.field-counter { align-self: flex-end; color: var(--surface-soft); font-size: 1rem; font-variant-numeric: tabular-nums; }
.form-required-note { color: var(--surface-attention); font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
.form-status { color: var(--surface-soft); font-size: 1rem; text-align: center; }
.form-status--attention { color: var(--surface-attention); font-weight: 700; }
.keyboard-scroll-region { scroll-padding-bottom: calc(env(keyboard-inset-height,0px) + var(--space-4)); }
:root.keyboard-overlay-open .keyboard-scroll-region {
  --keyboard-overlay-space: max(50vh,50dvh,env(keyboard-inset-height,0px));
  padding-bottom: calc(var(--space-4) + var(--keyboard-overlay-space));
  scroll-padding-top: var(--space-4);
  scroll-padding-bottom: var(--keyboard-overlay-space);
}
.custom-select { position: relative; min-width: 0; }
.custom-select.is-open { z-index: 10; }
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-3);
  border: 2px solid var(--color-brown);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: var(--line-body);
  text-align: left;
}
.custom-select-trigger::after { content: "⌄"; flex: 0 0 auto; color: var(--color-brown-dark); font-size: 1.25rem; font-weight: 700; line-height: 1; }
.custom-select-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.custom-select-trigger.is-placeholder { color: var(--color-text-soft); }
.custom-select-list {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  left: 0;
  z-index: 1;
  display: grid;
  max-height: min(240px,40dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid var(--color-brown);
  border-radius: var(--radius-sm);
  background: var(--color-cream);
  box-shadow: var(--shadow-card);
}
.custom-select-list[hidden] { display: none; }
.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-brown);
  background: var(--color-cream);
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
}
.custom-select-option:last-child { border-bottom: 0; }
.custom-select-option[aria-selected="true"] { border-left: 6px solid var(--color-ink-deep); background: var(--color-parchment); }
.custom-select-option[aria-selected="true"]::after { content: "♦"; color: var(--color-ink-deep); font-size: 1.25rem; line-height: 1; }
.checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 48px; min-height: 48px; cursor: pointer; color: var(--surface-ink); }
.checkbox input, .radio input { appearance: none; -webkit-appearance: none; flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid var(--color-brown); background: var(--color-cream); display: grid; place-items: center; }
.checkbox input { border-radius: 6px; }
.radio input { border-radius: 50%; }
.checkbox input:checked { background: var(--color-success-ink); }
.checkbox input:checked::after { content: "✓"; color: var(--color-cream); font-weight: 700; font-size: 14px; }
.radio input:checked::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-success-ink); }
.toggle { display: inline-flex; align-items: center; width: 64px; min-width: 64px; min-height: 48px; padding: 3px; border: 2px solid var(--color-brown); border-radius: var(--radius-pill); background: var(--color-cream); cursor: pointer; }
.toggle-thumb { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--color-brown); transition: transform var(--duration-fast) var(--ease-standard); }
.toggle[aria-checked="true"] { background: var(--color-success-ink); }
.toggle[aria-checked="true"] .toggle-thumb { transform: translateX(30px); background: var(--color-cream); }

/* ---------- TEMPORARY OVERLAYS ------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--screen-gutter); background: var(--surface-scrim); overflow-y: auto; }
.modal { width: min(100%,420px); max-height: calc(100vh - 48px); max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 48px); overflow-y: auto; padding: var(--space-5); border-radius: var(--radius-modal); overscroll-behavior: contain; }
.install-dialog { width: min(80%,420px); margin: auto; }
.install-dialog::backdrop { background: var(--surface-scrim); }
.install-dialog-title { color: var(--title-color); font-size: clamp(2.1rem,7vw,3.2rem); }
.install-dialog-manual { margin-top: var(--space-3); color: var(--surface-soft); font-size: var(--text-small); }
.install-dialog-actions { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.install-dialog-actions .btn { width: 100%; }
.install-dialog-actions .btn[hidden] { display: none; }
.sensor-permission-dialog { width: min(calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - var(--screen-gutter) - var(--screen-gutter)),420px); margin: auto; }
.sensor-permission-dialog::backdrop { background: var(--surface-scrim); }
.sensor-permission-dialog-title { color: var(--title-color); }
.sensor-permission-dialog-description { margin-top: var(--space-4); font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.sensor-permission-dialog-actions { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.sensor-permission-dialog-actions .btn { width: 100%; }
.sheet { position: fixed; inset: auto 0 0; z-index: 60; max-height: calc(100vh - 24px); max-height: calc(100dvh - env(safe-area-inset-top,0px) - 24px); overflow-y: auto; padding: var(--space-5); padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--space-5)); border-radius: var(--radius-modal) var(--radius-modal) 0 0; overscroll-behavior: contain; }
.sheet-handle { width: 48px; height: 5px; border-radius: var(--radius-pill); background: var(--surface-soft); margin: 0 auto var(--space-4); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-caption); font-weight: 600; background: var(--color-cream); color: var(--color-text-main); }
.chip-success { background: var(--color-success-ink); color: var(--color-cream); }
.chip-info { background: var(--color-sky); color: var(--color-text-main); }
.chip-warning { background: var(--color-gold-strong); color: var(--color-text-main); }
.chip-interactive { min-width: 48px; min-height: 48px; }
.badge { display: inline-grid; place-items: center; min-width: 24px; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--color-danger-ink); color: var(--color-cream); font-family: var(--font-body); font-size: var(--text-caption); font-weight: 600; }
.toast { position: fixed; left: calc(env(safe-area-inset-left,0px) + 5vw); right: calc(env(safe-area-inset-right,0px) + 5vw); bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter)); width: auto; max-width: none; min-height: 48px; margin: 0; padding: var(--space-4); border-radius: var(--radius-md); z-index: 100; pointer-events: none; }

/* ---------- ICONS / ART --------------------------------------------------- */
.icon { width: 24px; height: 24px; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: inherit; flex-shrink: 0; }
.icon-outline { fill: none; stroke: currentColor; }
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 44px; height: 44px; }
.icon-muted { color: var(--surface-soft); }
.icon-success { color: var(--surface-success); }
.icon-info { color: var(--surface-info); }
.icon-warning { color: var(--surface-warning); }
.icon-danger { color: var(--surface-danger); }
.icon-on-light { color: var(--color-text-soft); }
.icon-inherit { color: inherit; }
.grid-4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-4); }
.screen-background--bonvenon { background-image: url("assets/interface/backgrounds/bkgnd_bonvenon.jpg"); }
.screen-background--trejnejo, .screen-background--rolulo { background-image: url("assets/interface/backgrounds/bkgnd_rolulo.jpg"); }
.screen-background--atentigoj { background-image: url("assets/interface/backgrounds/bkgnd_atentigoj.jpg"); }
.screen-background--lingvon { background-image: url("assets/interface/backgrounds/bkgnd_lingvon.jpg"); }
.screen-background--itinero { background-image: url("assets/interface/backgrounds/bkgnd_itinero.jpg"); }
.screen-background--mondmapo-campo { background-image: url('assets/interface/backgrounds/bkgnd_paisagem_campo.jpg'); }
.screen-background--mondmapo-floresta { background-image: url('assets/interface/backgrounds/bkgnd_paisagem_floresta.jpg'); }
.screen-background--mondmapo-deserto { background-image: url('assets/interface/backgrounds/bkgnd_paisagem_deserto.jpg'); }
.screen-background--mondmapo-tundra { background-image: url('assets/interface/backgrounds/bkgnd_paisagem_tundra.jpg'); }
.screen-background--sensiloj { background-image: url("assets/interface/backgrounds/bkgnd_sensiloj.jpg"); }
.screen-background--karakterizajoj { background-image: url("assets/interface/backgrounds/bkgnd_karakterizajoj.jpg"); }
.brand-logo { display: block; width: 70%; max-width: 420px; height: auto; }
.frame-gold { border: 2px solid var(--color-gold); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.nekongrua {
  min-height: 100%;
  padding-top: calc(env(safe-area-inset-top,0px) + var(--screen-gutter));
  padding-right: calc(env(safe-area-inset-right,0px) + var(--screen-gutter));
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter));
  padding-left: calc(env(safe-area-inset-left,0px) + var(--screen-gutter));
}
.nekongrua-frame { display: grid; grid-template-columns: 15% minmax(0,70%) 15%; grid-template-rows: auto 1fr; position: relative; width: min(100%,480px,calc(90vh * 800 / 1779)); width: min(100%,480px,calc(90vh * 800 / 1779),calc(90dvh * 800 / 1779)); aspect-ratio: 800 / 1779; height: auto; min-height: 0; margin: auto; isolation: isolate; }
.nekongrua-frame::before { content: ""; grid-column: 1 / -1; grid-row: 1; padding-top: calc(38.42625% + var(--space-2)); }
.nekongrua-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: -1; }
.nekongrua-note { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; margin: var(--space-5) 0; padding: var(--space-4); text-align: center; overflow-wrap: anywhere; }
.nekongrua-note p + p { margin-top: var(--space-3); }
.nekongrua-text { color: var(--surface-soft); }
.app-main--bonvenon { position: relative; }
.app-main--lingvon { position: relative; }
.app-main--itinero { position: relative; }
.app-main--sensiloj { position: relative; }
.app-main--rolulo { --rolulo-safe-top: env(safe-area-inset-top,0px); position: relative; overflow-y: hidden; }
:fullscreen .app-main--rolulo, :-webkit-full-screen .app-main--rolulo { --rolulo-safe-top: 0px; }
.app-main--bonvenon .app-screen, .app-main--bonvenon .screen-content { position: static; }
.app-main--lingvon .app-screen, .app-main--lingvon .screen-content, .app-main--lingvon .lingvon { position: static; }
.lingvon { flex: 1 0 auto; min-height: 100%; min-width: 0; justify-content: flex-start; padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--space-6)); }
.app-main--bonvenon .bonvenon-logo { position: absolute; top: 12%; left: 0; right: 0; width: 75%; height: auto; margin: 0 auto; pointer-events: none; z-index: 1; }
.app-main--bonvenon .bonvenon-google-button { position: absolute; bottom: 10%; left: 0; right: 0; width: 60%; height: auto; margin: 0 auto; padding: 0; border: 0; background: transparent; cursor: pointer; isolation: isolate; z-index: 1; transition: transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard); }
.app-main--bonvenon .bonvenon-google-button:disabled { opacity: 1; cursor: wait; }
.app-main--bonvenon .bonvenon-google-button-art { position: relative; width: 100%; height: auto; z-index: 1; }
.app-main--bonvenon .bonvenon-google-button::before { content: ""; position: absolute; inset: -10%; border: 2px solid var(--color-gold); border-radius: 50%; box-shadow: 0 0 0 2px rgba(245,235,216,0.55), 0 0 28px rgba(216,154,74,0.9); opacity: 0; pointer-events: none; z-index: 0; }
.app-main--bonvenon .bonvenon-google-button::after { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(ellipse at center,rgba(255,250,210,0.9) 0 11%,rgba(216,154,74,0.74) 31%,rgba(200,170,104,0.28) 53%,transparent 72%); mix-blend-mode: screen; opacity: 0; pointer-events: none; z-index: 2; }
.app-main--bonvenon .bonvenon-google-button:active { transform: scale(0.94) translateY(2px); filter: brightness(0.9) saturate(1.25); }
.app-main--bonvenon .bonvenon-google-button.is-rune-struck::before { animation: bonvenon-rune-strike 650ms cubic-bezier(0.18,1.25,0.35,1) both; }
.app-main--bonvenon .bonvenon-google-button.is-rune-struck::after { animation: bonvenon-rune-flash 650ms cubic-bezier(0.18,1.25,0.35,1) both; }
.app-main--bonvenon .bonvenon-google-button.is-rune-struck .bonvenon-google-button-art { animation: bonvenon-google-recoil 650ms cubic-bezier(0.18,1.25,0.35,1) both; }
@keyframes bonvenon-rune-strike { 0% { opacity: 0; transform: scale(0.52) rotate(-18deg); } 24% { opacity: 1; transform: scale(0.9) rotate(5deg); } 58% { opacity: 0.75; transform: scale(1.08) rotate(13deg); } 100% { opacity: 0; transform: scale(1.38) rotate(24deg); } }
@keyframes bonvenon-rune-flash { 0% { opacity: 0; transform: scale(0.42); } 16% { opacity: 0.9; transform: scale(0.84); } 42% { opacity: 0.62; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.52); } }
@keyframes bonvenon-google-recoil { 0% { transform: scale(1); filter: brightness(1); } 18% { transform: scale(0.92); filter: brightness(1.28) saturate(1.3); } 48% { transform: scale(1.045); filter: brightness(1.1) saturate(1.16); } 100% { transform: scale(1); filter: brightness(1); } }
.app-main--lingvon .lingvon-logo { position: absolute; top: 2%; left: 0; right: 0; width: 75%; height: auto; margin: 0 auto; pointer-events: none; z-index: 1; }
.nekongrua-frame .nekongrua-logo { grid-column: 1 / -1; grid-row: 1; align-self: start; width: 75%; height: auto; margin: 8.895% auto 0; pointer-events: none; z-index: 1; }
.app-main--itinero .app-screen, .app-main--itinero .screen-content { position: static; }
.app-main--itinero .screen-content { gap: 0; padding: 0; }
.itinero-reading-layout {
  --itinero-logo-room: calc(4vh + 29.53125vw + var(--space-2));
  --itinero-logo-room: calc(4dvh + 29.53125vw + var(--space-2));
  /* Duas linhas de 15px/1.2, padding/borda e 8px entre aviso e leitura. */
  --itinero-hint-room: calc(max(48px,2.25rem + var(--space-2) + var(--space-2) + 2px) + var(--space-2));
  position: relative;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: minmax(var(--itinero-logo-room),1fr) auto minmax(var(--itinero-hint-room),1fr);
  gap: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  padding-top: calc(env(safe-area-inset-top,0px) + var(--screen-gutter));
  padding-right: calc(env(safe-area-inset-right,0px) + var(--screen-gutter));
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter));
  padding-left: calc(env(safe-area-inset-left,0px) + var(--screen-gutter));
}
.app-main--itinero .itinero-logo { position: absolute; top: 4%; left: 0; right: 0; width: 75%; height: auto; margin: 0 auto; pointer-events: none; z-index: 1; }
.itinero-fullscreen-hint { position: absolute; right: calc(env(safe-area-inset-right,0px) + var(--screen-gutter)); bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter)); z-index: 2; display: flex; align-items: center; gap: var(--space-2); min-height: 48px; max-width: calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - var(--screen-gutter) - var(--screen-gutter)); padding: var(--space-2) var(--space-3); font-size: 0.9375rem; line-height: 1.2; text-align: left; }
.itinero-character-status { grid-row: 2; align-self: center; justify-self: center; display: grid; justify-items: center; gap: var(--space-4); margin: 0 auto; text-align: center; }
.itinero-narrative-message { display: grid; gap: var(--space-2); width: 100%; min-width: 0; }
.itinero-character-copy { font-size: 1.25rem; line-height: 1.4; }
.itinero-message-credit { font-size: var(--text-small); line-height: var(--line-body); color: var(--surface-soft); }
.itinero-character-status [hidden] { display: none; }
.itinero-message--departing { animation: itinero-message-leave 180ms var(--ease-standard) forwards; }
.itinero-message--arriving { animation: itinero-message-arrive 180ms var(--ease-standard) both; }
@keyframes itinero-message-leave { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes itinero-message-arrive { from { transform: translateY(4px); } to { transform: translateY(0); } }
.itinero-fullscreen-icon { flex: 0 0 32px; width: 32px; height: 32px; }
.itinero-fullscreen-line { display: block; white-space: nowrap; }
:fullscreen .itinero-fullscreen-hint, :-webkit-full-screen .itinero-fullscreen-hint { display: none; }
:fullscreen .itinero-reading-layout, :-webkit-full-screen .itinero-reading-layout { --itinero-hint-room: 0px; }
.app-main--sensiloj .app-screen, .app-main--sensiloj .screen-content { position: static; }
.app-main--sensiloj .sensiloj-logo { position: absolute; top: 2%; left: 5%; width: 50%; height: auto; pointer-events: none; z-index: 1; }
.sensiloj-panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin-top: 38vh; margin-top: 38dvh; padding: var(--space-4); text-align: center; }
.sensiloj-title { font-size: var(--text-h2); }
.sensiloj-notice { max-width: 46ch; font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.sensiloj-permissions { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; margin-top: var(--space-3); }
.sensiloj-permission { display: flex; flex: 1 1 5.5rem; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--space-2); min-width: min-content; max-width: 100%; min-height: 48px; padding: var(--space-1); border: 2px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--surface-ink); font-family: var(--font-body); font-size: 1.375rem; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }
.sensiloj-permission:disabled { opacity: 1; }
.sensiloj-permission-art { width: min(80%,80px); height: auto; }
.sensiloj-permission-label { min-width: 0; }
.sensiloj-status { min-width: 0; font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.sensiloj-status--success { color: var(--surface-success); }
.sensiloj-status--danger { color: var(--surface-danger); }
.sensiloj-status--info { color: var(--surface-info); }
.sensiloj-status--warning { color: var(--surface-warning); }
.app-main--rolulo .app-screen { position: static; height: 100%; min-height: 0; overflow: hidden; }
.app-main--rolulo .screen-content { position: static; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
.app-main--rolulo .rolulo-logo { position: absolute; top: calc(var(--rolulo-safe-top) + 4%); left: 0; right: 0; width: 70%; height: auto; margin: 0 auto; pointer-events: none; z-index: 1; }
.rolulo-panel {
  position: absolute;
  top: calc(var(--rolulo-safe-top) + 4% + 26.90625vw + var(--space-2));
  right: 0;
  bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter) + 72px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(calc(100% - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - var(--screen-gutter) - var(--screen-gutter)),560px);
  margin: 0 auto;
  padding: var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  line-height: 1.25;
}
.rolulo-title, .rolulo-introduction { text-align: center; }
.rolulo-title { font-size: clamp(2rem, 6.5vw, 3rem); }
.rolulo-introduction { font-size: 1.125rem; line-height: 1.25; }
.rolulo-form { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.rolulo-identity-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(calc(var(--space-8) + var(--space-7)),96px); gap: var(--space-3); align-items: start; }
.rolulo-select-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); align-items: start; }
.rolulo-field-label { color: var(--color-ink-deep); font-size: 1.25rem; line-height: 1.25; }
.rolulo-field-label::before { content: "♦ "; color: var(--color-ink-deep); }
.rolulo-hair-group { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.rolulo-gender-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
.rolulo-gender-option, .rolulo-color-option { position: relative; display: grid; place-items: center; min-width: 0; cursor: pointer; }
.rolulo-gender-input, .rolulo-choice-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rolulo-gender-target { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); min-width: 72px; min-height: 80px; padding: var(--space-1); border: 3px solid transparent; border-radius: var(--radius-sm); transition: transform var(--duration-fast) var(--ease-spring),border-color var(--duration-fast) var(--ease-standard); }
.rolulo-gender-art { width: min(18vw,64px); height: auto; opacity: 0.68; filter: grayscale(100%); transition: filter var(--duration-base) var(--ease-standard),opacity var(--duration-base) var(--ease-standard); }
.rolulo-gender-name { font-size: 1.125rem; color: var(--surface-ink); }
.rolulo-gender-input:checked + .rolulo-gender-target { border-color: #fff; outline: 3px solid var(--color-brown-dark); outline-offset: 0; transform: scale(1.06); }
.rolulo-gender-input:checked + .rolulo-gender-target .rolulo-gender-art { opacity: 1; filter: grayscale(0); }
.rolulo-gender-option:active .rolulo-gender-target { transform: scale(0.94) translateY(2px); }
.rolulo-color-option:active .rolulo-choice-input:not(:disabled) + .rolulo-choice-target:not(.rolulo-swatch--diamond) { transform: scale(0.94); }
.rolulo-color-option:active .rolulo-choice-input:not(:disabled) + .rolulo-swatch--diamond { transform: rotate(45deg) scale(0.75); }
.rolulo-gender-input:focus-visible + .rolulo-gender-target, .rolulo-choice-input:focus-visible + .rolulo-swatch { outline: 3px solid var(--color-brown-dark); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-cream); }
.rolulo-color-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(48px,1fr)); gap: var(--space-2); align-items: center; }
.rolulo-choice-target { min-width: 48px; min-height: 48px; width: min(56px,100%); height: 56px; max-width: 100%; border: 3px solid var(--color-brown-dark); transform: scale(1); transition: transform var(--duration-fast) var(--ease-spring),border-color var(--duration-fast) var(--ease-standard); }
.rolulo-swatch--square { border-radius: var(--radius-xs); }
.rolulo-swatch--circle { border-radius: 50%; }
.rolulo-swatch--diamond { transform: rotate(45deg) scale(0.8); border-radius: var(--radius-xs); }
.rolulo-choice-input:checked + .rolulo-swatch { border-color: #fff; outline: 3px solid var(--color-brown-dark); outline-offset: 0; transform: scale(1.1); }
.rolulo-choice-input:checked + .rolulo-swatch--diamond { transform: rotate(45deg) scale(0.88); }
.rolulo-choice-input:disabled + .rolulo-swatch { opacity: 0.6; filter: grayscale(100%); cursor: not-allowed; transition: none; }
.rolulo-swatch--pele_c-yellow { background: #E7BD79; }
.rolulo-swatch--pele_c-white { background: #F4CFB3; }
.rolulo-swatch--pele_c-lightBrown { background: #CFA287; }
.rolulo-swatch--pele_c-brown { background: #A76A44; }
.rolulo-swatch--pele_c-darkBrown { background: #603E29; }
.rolulo-swatch--pele_c-black { background: #2B2521; }
.rolulo-swatch--olho_c-blue { background: #5F8FB8; }
.rolulo-swatch--olho_c-green { background: #6F9A6B; }
.rolulo-swatch--olho_c-brown { background: #6B4228; }
.rolulo-swatch--olho_c-black { background: #1F1A17; }
.rolulo-swatch--cabelo_c-blonde { background: #D8B05F; }
.rolulo-swatch--cabelo_c-red { background: #A94F2A; }
.rolulo-swatch--cabelo_c-lightBrown { background: #8A5A35; }
.rolulo-swatch--cabelo_c-darkBrown { background: #4B3024; }
.rolulo-swatch--cabelo_c-black { background: #1C1815; }
.rolulo-panel .input, .rolulo-panel .custom-select-trigger, .rolulo-panel .custom-select-option { font-size: 1.125rem; line-height: 1.25; }
.rolulo-advance { position: absolute; right: 0; bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter)); left: 0; display: grid; place-items: center; width: min(32%,120px); min-width: 96px; min-height: 48px; margin: 0 auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
.rolulo-advance-art { width: 100%; height: auto; }
.rolulo-advance:disabled { opacity: 0.6; filter: grayscale(100%); }
.rolulo-advance.is-confirmed { animation: rolulo-confirm var(--duration-slow) var(--ease-spring); }
@keyframes rolulo-confirm { 50% { transform: scale(1.08); } }
@media (max-width:480px) {
  .rolulo-select-grid { grid-template-columns: minmax(0,1fr); }
}
@media (orientation: landscape) and (min-width: 500px) and (max-height: 500px) {
  .app-main--rolulo .rolulo-logo { width: 35%; }
  .rolulo-panel { top: calc(var(--rolulo-safe-top) + 4% + 13.453125vw + var(--space-2)); bottom: calc(env(safe-area-inset-bottom,0px) + 60px + var(--space-2)); }
  .rolulo-advance { bottom: calc(env(safe-area-inset-bottom,0px) + var(--space-2)); width: 96px; }
}
.app-main--karakterizajoj { --karakterizajoj-safe-top: env(safe-area-inset-top,0px); --karakterizajoj-logo-space: min(27.5625vw,165.375px); position: relative; overflow-y: hidden; }
:fullscreen .app-main--karakterizajoj, :-webkit-full-screen .app-main--karakterizajoj { --karakterizajoj-safe-top: 0px; }
.app-main--karakterizajoj .app-screen { position: static; height: 100%; min-height: 0; overflow: hidden; }
.app-main--karakterizajoj .screen-content { position: static; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
.karakterizajoj-page { position: static; }
.app-main--karakterizajoj .karakterizajoj-logo { position: absolute; top: calc(var(--karakterizajoj-safe-top) + 4%); left: 0; right: 0; z-index: 1; width: 70%; max-width: 420px; height: auto; margin: 0 auto; pointer-events: none; }
.karakterizajoj-scroll {
  position: absolute;
  top: calc(var(--karakterizajoj-safe-top) + 4% + var(--karakterizajoj-logo-space) + var(--space-2));
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
  padding-top: var(--space-5);
  padding-right: calc(env(safe-area-inset-right,0px) + var(--screen-gutter));
  padding-bottom: calc(env(safe-area-inset-bottom,0px) + var(--screen-gutter));
  padding-left: calc(env(safe-area-inset-left,0px) + var(--screen-gutter));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: var(--space-5);
  mask-image: linear-gradient(to bottom,transparent 0,#000 var(--space-5));
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom,transparent 0,#000 var(--space-5));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}
.karakterizajoj-help { display: grid; justify-items: center; gap: var(--space-4); text-align: center; scroll-margin-top: var(--space-5); }
.karakterizajoj-help-icon, .karakterizajoj-question-icon { display: block; background: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; }
.karakterizajoj-help-icon { width: 48px; height: 48px; color: var(--color-brown-dark); mask-image: url("assets/interface/icons/badge-info.svg"); -webkit-mask-image: url("assets/interface/icons/badge-info.svg"); }
.karakterizajoj-question-icon { width: 24px; height: 24px; mask-image: url("assets/interface/icons/badge-question-mark.svg"); -webkit-mask-image: url("assets/interface/icons/badge-question-mark.svg"); }
.karakterizajoj-help-text { display: grid; gap: var(--space-3); max-width: 48ch; font-size: clamp(1.0625rem,4.25vw,1.1875rem); font-weight: 600; line-height: 1.35; }
.karakterizajoj-help-text p { margin: 0; }
.karakterizajoj-traits { padding: 0; }
.karakterizajoj-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-3); }
.karakterizajoj-title { flex: 1 1 14rem; min-width: 0; color: var(--color-brown-dark); font-size: 2rem; text-align: center; }
.karakterizajoj-help-trigger { display: grid; place-items: center; flex: 0 0 48px; width: 48px; min-width: 48px; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--color-brown-dark); transition: transform 100ms var(--ease-standard); }
.karakterizajoj-help-trigger:not(:disabled):active, .characteristic-name:not(:disabled):active, .karakterizajoj-help-trigger.is-popped, .characteristic-name.is-popped, .karakterizajoj-finish.is-popped { transform: scale(0.9); }
.karakterizajoj-rules, .karakterizajoj-count, .karakterizajoj-validation { margin-right: var(--space-4); margin-left: var(--space-4); text-align: center; }
.karakterizajoj-rules { font-size: 1.125rem; }
.karakterizajoj-count { margin-top: var(--space-2); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.karakterizajoj-validation { margin-top: var(--space-2); margin-bottom: var(--space-2); scroll-margin-top: var(--space-5); scroll-margin-bottom: var(--space-4); }
.karakterizajoj-columns { margin-top: var(--space-4); }
.karakterizajoj-column-headings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; }
.karakterizajoj-column-title { min-width: 0; padding: var(--space-4) var(--space-2); font-size: 1.5rem; text-align: center; }
.karakterizajoj-column-title--positive { color: var(--color-brown-dark); }
.karakterizajoj-column-title--negative { color: var(--color-brown-dark); }
.karakterizajoj-list { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.characteristic-row { display: flex; flex-direction: column; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.characteristic-side { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; padding: var(--space-1) var(--space-2); }
.characteristic-side--positive { justify-content: flex-start; color: var(--color-brown-dark); }
.characteristic-side--negative { justify-content: flex-end; color: var(--color-brown-dark); }
.characteristic-name { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: var(--space-1); border: 0; background: transparent; color: inherit; font-family: var(--font-body); font-size: clamp(1.375rem,5vw,1.625rem); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; transition: transform 100ms var(--ease-standard); }
.characteristic-name--positive { text-align: left; }
.characteristic-name--negative { text-align: right; }
.characteristic-name.is-antagonized { text-decoration: line-through 2px currentColor; }
.characteristic-switch { position: relative; flex: 0 0 64px; min-width: 64px; min-height: 48px; padding: 0 var(--space-1); border: 0; background: transparent; justify-content: flex-start; }
.characteristic-switch[aria-checked="true"] { background: transparent; }
.characteristic-switch::before { content: ""; position: absolute; top: calc((48px - var(--characteristic-track-height)) / 2); right: 0; left: 0; height: var(--characteristic-track-height); border: 2px solid var(--surface-ink); border-radius: var(--radius-pill); background: var(--color-cream); }
.characteristic-switch .toggle-thumb { position: relative; width: var(--characteristic-thumb-size); height: var(--characteristic-thumb-size); z-index: 1; }
.characteristic-switch[aria-checked="true"] .toggle-thumb { transform: translateX(calc(64px - var(--characteristic-thumb-size) - var(--space-1) - var(--space-1))); }
.characteristic-switch--negative .toggle-thumb { transform: translateX(calc(64px - var(--characteristic-thumb-size) - var(--space-1) - var(--space-1))); }
.characteristic-switch--negative[aria-checked="true"] .toggle-thumb { transform: translateX(0); }
.characteristic-switch[aria-invalid="true"]::before { border-color: var(--surface-attention); }
.characteristic-switch--positive[aria-checked="true"]::before { background: var(--color-tertiary-top); }
.characteristic-switch--negative[aria-checked="true"]::before { background: var(--color-danger-top); }
.karakterizajoj-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: min(100%,560px); }
.karakterizajoj-back, .karakterizajoj-finish { display: grid; place-items: center; min-width: 100px; min-height: 48px; padding: 0; border: 0; background: transparent; filter: drop-shadow(0 8px 8px rgba(30,20,14,0.55)); }
.karakterizajoj-back { width: 100px; text-decoration: none; }
.karakterizajoj-finish { width: 100px; transition: transform 100ms var(--ease-standard); }
.karakterizajoj-back-art, .karakterizajoj-finish-art { width: 100%; height: auto; }
.karakterizajoj-review-dialog { width: min(calc(100% - var(--screen-gutter) - var(--screen-gutter)),480px); margin: auto; }
.karakterizajoj-review-dialog::backdrop { background: var(--surface-scrim); }
.karakterizajoj-review-title { color: var(--title-color); font-size: var(--text-h2); }
.karakterizajoj-review-description { margin-top: var(--space-3); font-size: 1.125rem; }
.karakterizajoj-review-list { display: grid; gap: var(--space-2); margin: var(--space-4) 0; padding-left: var(--space-5); font-size: 1.125rem; }
.karakterizajoj-review-actions { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.karakterizajoj-review-dialog .btn { width: 100%; }
@media (orientation: landscape) and (min-width: 500px) and (max-height: 500px) {
  .app-main--karakterizajoj { --karakterizajoj-logo-space: min(13.78125vw,110.25px); }
  .app-main--karakterizajoj .karakterizajoj-logo { width: 35%; max-width: 280px; }
}
.logo-breathe { animation: breathe 2000ms ease-in-out infinite alternate both; animation-play-state: running; transform-origin: center; will-change: transform; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.05); } }
.lingvon-actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; width: 100%; margin-top: 60vh; margin-top: 60dvh; margin-right: auto; margin-bottom: 0; margin-left: auto; }
.lingvon-btn { min-width: 48px; min-height: 48px; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; width: 35%; }
.lingvon-btn-img { width: 100%; height: auto; }

/* ---------- ACCESSIBILITY / OPTIONAL EFFECTS ------------------------------ */
:where(button,a,input,textarea,select,[tabindex]:not([tabindex="-1"])):focus-visible, .input-wrap:focus-within {
  outline: 3px solid var(--color-brown-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-cream);
}
.input-wrap > .input:focus-visible { outline: 0; box-shadow: none; }
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: 0; }
.glass-panel .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.effects-low .glass-panel, .effects-low .glass-clear, .effects-low .modal-backdrop { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors:active) {
  .glass-panel, .glass-clear, .card, .btn, .toast, .input-wrap, .chip, .badge, .rolulo-choice-target, .rolulo-gender-target, .karakterizajoj-columns, .characteristic-side { background: Canvas; color: CanvasText; border-color: CanvasText; }
  h1,h2,h3,p,.ds-title,.field-label,.field-hint,.field-error,.icon { color: CanvasText; }
  :where(button,a,input,textarea,select,[tabindex]:not([tabindex="-1"])):focus-visible { outline-color: Highlight; }
}