@font-face { font-family: 'Pixelify Sans'; src: url('fonts/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
:root {
  --ink: #2b1d24; --paper: #fbf5e4; --paper2: #f1e6c8; --red: #c8323a; --red2: #8e1f2a; --gold: #f2c94c; --blue: #3f6fa8; --line: #8fa3c7;
  --glass: rgba(33, 22, 30, .78); --pixel: 'Pixelify Sans', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1b1418; color: #fff6e6; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--pixel); -webkit-font-smoothing: antialiased; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
[hidden] { display: none !important; }
kbd { font-family: var(--pixel); background: #fff6e6; color: var(--ink); border-radius: 3px; padding: 0 .35em; margin: 0 .1em; box-shadow: 0 2px 0 #b8a88a; font-size: .9em; }

button { cursor: pointer; border: 0; border-radius: 6px; padding: .62em 1.1em; background: #fff6e6; color: var(--ink); box-shadow: 0 3px 0 #b8a88a, 0 0 0 2px var(--ink); font-size: 1rem; transition: transform .06s; min-height: 44px; }
button:hover { background: #fffdf5; }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 #b8a88a, 0 0 0 2px var(--ink); }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button.primary { background: var(--red); color: #fff6e6; box-shadow: 0 3px 0 var(--red2), 0 0 0 2px var(--ink); }
button.primary:hover { background: #d8414a; }
button.round { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 1.1rem; }
.menu { display: flex; flex-direction: column; gap: .7rem; margin: 1rem 0; }
.menu.row { flex-direction: row; flex-wrap: wrap; }
.kicker { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .3rem; }
.small { font-size: .85rem; opacity: .85; }

/* telas */
.screen { position: absolute; inset: 0; display: none; z-index: 10; }
#app[data-screen="title"] #screen-title, #app[data-screen="map"] #screen-map { display: flex; }
.screen.modal.open { display: flex; }
.modal { align-items: center; justify-content: center; background: rgba(20, 12, 18, .58); padding: 16px; overflow: auto; z-index: 30; }
.card { background: var(--glass); border: 2px solid #fff6e633; border-radius: 12px; padding: 1.3rem 1.5rem; max-width: 34rem; width: 100%; box-shadow: 0 12px 40px #0008; backdrop-filter: blur(4px); }
.card h2 { margin: 0 0 .6rem; font-size: 1.6rem; color: var(--gold); }
.card.scroll { max-height: calc(100vh - 32px); overflow: auto; }
.card p { line-height: 1.45; }

#screen-title { align-items: flex-end; justify-content: flex-start; padding: 24px; background: linear-gradient(90deg, rgba(27, 20, 24, .78) 0%, rgba(27, 20, 24, .35) 45%, transparent 70%); }
.title-card { max-width: 30rem; }
.title-card h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1; margin: 0 0 .6rem; color: #fff6e6; text-shadow: 3px 3px 0 var(--red2), 6px 6px 0 #0006; letter-spacing: .02em; }
.tagline { font-size: 1.1rem; line-height: 1.4; margin: 0 0 .4rem; }
.title-card .menu { max-width: 16rem; }
.fiction { font-size: .85rem; line-height: 1.45; background: #0006; border-left: 4px solid var(--gold); padding: .5rem .7rem; border-radius: 4px; }
.keys { font-size: .8rem; opacity: .9; line-height: 1.9; }

/* mapa */
#screen-map { background: #1b1418e6; padding: 16px; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; overflow: auto; }
.map-wrap { flex: 1 1 520px; max-width: 760px; }
.map-wrap h2 { margin: 0 0 .5rem; color: var(--gold); }
#map { width: 100%; image-rendering: pixelated; border-radius: 8px; border: 3px solid #fff6e6; cursor: pointer; display: block; aspect-ratio: 16 / 9; }
.map-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.map-list button { width: 100%; font-size: .85rem; padding: .4em .5em; text-align: left; }
.map-list button[aria-current="true"] { background: var(--gold); }
.map-list button:disabled { opacity: .55; cursor: not-allowed; }
.map-info { flex: 0 1 320px; background: var(--glass); border-radius: 12px; padding: 1rem 1.2rem; }
.map-info h3 { margin: 0 0 .4rem; font-size: 1.3rem; }
.map-info p { margin: .3rem 0; line-height: 1.4; }
.progress { font-size: .85rem; opacity: .9; }

/* HUD */
#hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 0; z-index: 5; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-where { background: var(--glass); border-radius: 8px; padding: .35rem .6rem; display: flex; flex-direction: column; min-width: 0; }
.hud-where strong { font-size: 1rem; color: var(--gold); }
.hud-where span { font-size: .75rem; opacity: .9; }
.hud-stats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.stat { background: var(--glass); border-radius: 8px; padding: .25rem .55rem; display: inline-flex; align-items: center; gap: 4px; font-size: 1.05rem; }
.stat b { font-weight: 700; min-width: 1.3em; text-align: right; }
.stat small { opacity: .75; font-size: .8rem; }
.stat i { font-style: normal; font-size: .65rem; text-transform: uppercase; opacity: .75; letter-spacing: .06em; }
.stat.power { color: var(--gold); }
.stat.bump b { color: var(--gold); }
.ico { image-rendering: pixelated; width: 18px; height: auto; }
.trechos { display: inline-flex; gap: 3px; }
.trechos .q { width: 18px; height: 18px; border-radius: 3px; background: #fff6e61f; border: 2px solid #fff6e680; display: inline-grid; place-items: center; font-size: .8rem; line-height: 1; color: transparent; }
.trechos .q.on { background: var(--gold); border-color: var(--gold); color: var(--red2); }
.hud-buttons { display: flex; gap: 6px; }
.hud-buttons button[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }

#bubble { position: absolute; z-index: 6; width: max-content; max-width: min(19rem, 70vw); background: var(--paper); color: var(--ink); padding: .5rem .7rem; border-radius: 10px; box-shadow: 0 0 0 2px var(--ink), 0 4px 0 #0005; transform: translate(-50%, -100%); pointer-events: none; font-size: .95rem; line-height: 1.3; }
#bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--paper); border-bottom: 0; }
#bubble b { display: block; font-size: .7rem; text-transform: uppercase; color: var(--red); letter-spacing: .08em; }
#hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 6; background: var(--glass); border: 2px solid var(--gold); border-radius: 10px; padding: .5rem .9rem; max-width: min(34rem, 92vw); text-align: center; font-size: 1rem; line-height: 1.35; }
#toast { position: absolute; left: 50%; top: 70px; transform: translate(-50%, -8px); z-index: 7; background: var(--red); color: #fff6e6; padding: .4rem .9rem; border-radius: 8px; box-shadow: 0 0 0 2px var(--ink); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; font-size: 1rem; text-align: center; max-width: 90vw; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* toque */
#touch { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 max(12px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom)); pointer-events: none; }
.pad { display: flex; gap: 12px; pointer-events: auto; align-items: flex-end; }
#touch button { width: 76px; height: 76px; border-radius: 18px; font-size: 1.6rem; background: #fff6e6d9; touch-action: none; }
#touch button.jump { width: 96px; height: 96px; border-radius: 50%; background: #c8323ae6; color: #fff6e6; font-size: 1.05rem; box-shadow: 0 4px 0 var(--red2), 0 0 0 2px var(--ink); }
#touch button.run { width: 72px; height: 56px; font-size: .75rem; border-radius: 14px; }
#touch button.held { transform: translateY(3px); filter: brightness(.9); }
#app.touching #hint { bottom: 130px; }
#app.modal-open #touch, #app.modal-open #bubble, #app.modal-open #hint, #app.modal-open #tut { display: none !important; }

/* caderno */
.notebook { background: var(--red); padding: 12px 12px 12px 22px; border-radius: 10px; box-shadow: 0 0 0 3px var(--ink), 0 16px 40px #000a; max-width: 40rem; width: 100%; position: relative; }
.notebook::before { content: ''; position: absolute; left: 8px; top: 16px; bottom: 16px; width: 6px; background: repeating-linear-gradient(#2b1d24 0 6px, transparent 6px 22px); border-radius: 3px; }
.notebook.wide { max-width: 46rem; }
.page { background: var(--paper); color: var(--ink); border-radius: 4px; padding: 1rem 1.2rem 1rem 2.2rem; background-image: linear-gradient(90deg, transparent 1.6rem, #e8545a66 1.6rem, #e8545a66 calc(1.6rem + 2px), transparent calc(1.6rem + 2px)), repeating-linear-gradient(transparent 0 1.55rem, #8fa3c755 1.55rem calc(1.55rem + 1px)); max-height: calc(100vh - 140px); overflow: auto; user-select: text; -webkit-user-select: text; }
.pg-head { display: flex; justify-content: space-between; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
.page h2 { margin: .3rem 0 .5rem; font-size: 1.5rem; color: var(--ink); }
.pg-art { float: right; width: 136px; height: 68px; image-rendering: pixelated; margin: 0 0 .3rem .6rem; }
.cronica { font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.55rem; margin: 0 0 .6rem; min-height: 6rem; }
.cronica .cursor { display: inline-block; width: .5em; height: 1em; background: var(--blue); vertical-align: -2px; animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.trechos-list { list-style: none; padding: 0; margin: .4rem 0; }
.trechos-list li { font-family: Georgia, serif; font-style: italic; line-height: 1.4; margin: .35rem 0; padding-left: 1.6rem; position: relative; }
.trechos-list li::before { content: '“'; position: absolute; left: 0; top: -.2rem; font-size: 1.6rem; color: var(--red); font-style: normal; }
.trechos-list li.missing { opacity: .55; font-style: normal; }
.trechos-list li.missing::before { content: '·'; color: #999; }
.pg-stats { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .95rem; border-top: 2px dashed #c8b89a; padding-top: .5rem; margin-top: .5rem; }
.pg-stats .stars { color: #b8860b; letter-spacing: .1em; }
.fic { font-size: .78rem; opacity: .75; margin: .5rem 0 0; }
.page-actions { justify-content: center; }
#screen-page, #screen-notebook { flex-direction: column; }
.nb-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.nb-tabs button { min-height: 36px; padding: .3em .7em; font-size: .85rem; }
.nb-tabs button[aria-selected="true"] { background: var(--gold); }
.nb-tabs button.blank { opacity: .6; }
.nb-body .blank { font-family: Georgia, serif; font-style: italic; opacity: .6; }

/* opções */
fieldset { border: 2px solid #fff6e644; border-radius: 8px; margin: 0 0 .8rem; }
fieldset label { display: block; margin: .35rem 0; }
fieldset small { opacity: .75; display: block; margin-left: 1.6rem; font-size: .8rem; }
label.line { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
input[type="range"] { flex: 1; accent-color: var(--red); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--red); width: 1.1rem; height: 1.1rem; }
select { background: #fff6e6; color: var(--ink); border-radius: 6px; border: 2px solid var(--ink); padding: .2rem .4rem; }

#fallback { display: flex; z-index: 50; }
#save-warning { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 40; background: #7a2a2a; padding: .4rem .8rem; border-radius: 8px; font-size: .85rem; margin: 0; text-align: center; max-width: 92vw; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 1.4rem; z-index: 60; background: #1b1418; }
#app:not([data-screen="loading"]) .loading { display: none; }

/* treino da 1-1 (1.1.0): pedido ancorado perto do alvo, com o controle do aparelho em uso */
#tut { position: absolute; inset: 0; z-index: 6; pointer-events: none; font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0; }
#tut-cartao { position: absolute; left: 0; top: 0; width: max-content; max-width: min(19rem, calc(100vw - 16px)); background: var(--paper); color: var(--ink); border-radius: 10px; padding: .4rem .75rem .5rem; box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink), 0 6px 0 5px #0005; will-change: transform; }
#tut-cartao::after { content: ''; position: absolute; left: var(--seta-x, 50%); margin-left: -10px; border: 10px solid transparent; }
#tut-cartao[data-lado="cima"]::after { top: 100%; margin-top: 4px; border-top-color: var(--gold); border-bottom: 0; }
#tut-cartao[data-lado="baixo"]::after { bottom: 100%; margin-bottom: 4px; border-bottom-color: var(--gold); border-top: 0; }
#tut-cartao[data-lado="solto"]::after { display: none; }
#tut-rotulo { margin: 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
#tut-msg { margin: .1rem 0 .2rem; font-size: 1.08rem; line-height: 1.25; font-weight: 700; }
#tut-controle { margin: 0; font-size: .9rem; line-height: 1.9; }
#tut-controle:empty { display: none; }
#tut-controle kbd { font-size: .95rem; padding: 0 .45em; box-shadow: 0 2px 0 #b8a88a, 0 0 0 2px var(--ink); margin: 0 .15em; }
.tut-btn { display: inline-block; min-width: 1.8em; text-align: center; background: var(--red); color: #fff6e6; border-radius: 6px; padding: 0 .4em; margin: 0 .15em; line-height: 1.5; box-shadow: 0 2px 0 var(--red2), 0 0 0 2px var(--ink); font-size: .85rem; }
.tut-btn.move { background: #fff6e6; color: var(--ink); box-shadow: 0 2px 0 #b8a88a, 0 0 0 2px var(--ink); }
#tut-cartao[data-fase="erro"] { box-shadow: 0 0 0 3px var(--red), 0 0 0 5px var(--ink), 0 6px 0 5px #0005; }
#tut-cartao[data-fase="erro"]::after { border-top-color: var(--red); border-bottom-color: var(--red); }
#tut-cartao[data-fase="erro"] #tut-rotulo::before { content: '! '; font-weight: 700; }
#tut-cartao[data-fase="feito"] #tut-rotulo::before, #tut-cartao[data-fase="fim"] #tut-rotulo::before { content: '✓ '; font-weight: 700; }
#tut-anel { position: absolute; left: 0; top: 0; border: 3px dashed var(--gold); border-radius: 999px; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink), 0 0 18px #f2c94c99; animation: tut-pulso 1s ease-in-out infinite; }
#tut-seta { position: absolute; left: 0; top: 0; width: 36px; height: 30px; }
#tut-seta svg { display: block; image-rendering: pixelated; animation: tut-empurra .8s ease-in-out infinite; }
@keyframes tut-pulso { 50% { opacity: .55; } }
@keyframes tut-empurra { 50% { transform: translateX(8px); } }
@keyframes tut-botao { 50% { outline-offset: 7px; } }
#touch button.tut-alvo { outline: 4px solid var(--gold); outline-offset: 3px; animation: tut-botao .9s ease-in-out infinite; }
.stat.tut-destaque { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink); animation: tut-pulso 1s ease-in-out infinite; }
.tut-opt { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0; }
.tut-opt small { opacity: .75; font-size: .8rem; }
/* celular deitado: a pausa ganhou "Como jogar" e "Refazer tutorial"; em duas colunas ela continua cabendo */
@media (max-height: 520px) and (orientation: landscape) { #screen-pause .menu { display: grid; grid-template-columns: 1fr 1fr; } }
/* guia "Como jogar" (kit da coleção) com as cores do jogo */
.cj-fundo { --cj-painel: #21161c; --cj-painel-2: #3a2730; --cj-texto: #fff6e6; --cj-suave: #e2d3bd; --cj-destaque: #f2c94c; --cj-destaque-texto: #2b1d24; --cj-borda: #140c10; --cj-fonte: var(--pixel); }

@media (max-width: 720px) {
  .hud-where span { display: none; }
  .stat { font-size: .9rem; padding: .2rem .4rem; }
  .stat i { display: none; }
  .hud-stats { gap: 4px; }
  #screen-title { align-items: flex-end; padding: 16px; background: linear-gradient(0deg, rgba(27, 20, 24, .88) 0%, rgba(27, 20, 24, .6) 55%, transparent 85%); }
  .title-card .menu { max-width: none; }
  .map-list { grid-template-columns: repeat(2, 1fr); }
  .page { max-height: calc(100vh - 170px); }
  #touch button { width: 70px; height: 70px; }
  #touch button.jump { width: 88px; height: 88px; }
}
@media (max-width: 420px) {
  #toast { top: 118px; }
  #hud { flex-wrap: wrap; }
  .hud-where { order: 1; }
  .hud-buttons { order: 2; }
  .hud-stats { order: 3; width: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .cronica .cursor { animation: none; } #toast { transition: none; } #tut-anel, #tut-seta svg, #touch button.tut-alvo, .stat.tut-destaque { animation: none; } }