/* Mares de Palavras — aventura pirata "premium": madeira, pergaminho, ouro, vidro azul-marinho.
   Tudo em em/% dentro do palco 16:9 (80em x 45em). Animações só com transform/opacity e nunca
   escondem conteúdo. Texto sempre sobre vidro escuro ou pergaminho claro. */

:root {
  /* o engine sobrescreve estes com ART.palette no carregamento (por isso a UI usa os tokens abaixo) */
  --sky: #38c5e8;
  --sea: #1664c0;
  --sand: #f6e3b0;
  --ink: #1b1233;
  --paper: #fffaf0;
  --a: #2fb34a;
  --b: #e8453c;
  --x: #2f7be8;
  --y: #f5c518;
  --accent: #ff7a1a;

  /* ouro */
  --gold-1: #ffe59a;
  --gold-2: #e8b445;
  --gold-3: #9a6a1f;
  --gold-frame: linear-gradient(145deg, #ffe59a 0%, #e8b445 36%, #9a6a1f 62%, #e8b445 84%, #ffe59a 100%);
  --gold-frame-dark: linear-gradient(145deg, #fff0b8 0%, #d9962b 40%, #7a4a10 70%, #c98a1e 100%);
  /* madeira */
  --wood-1: #8a4b22;
  --wood-2: #5e2f14;
  /* pergaminho */
  --parch: #fbf0d4;
  --parch-fill: radial-gradient(ellipse at 50% 38%, #fffaea 0%, #fbf0d4 58%, #f0dcaa 100%);
  --text-dark: #3a2414;
  --text-soft: #70502f;
  --cream: #fff3d6;
  /* vidro */
  --glass: linear-gradient(180deg, rgba(24, 50, 92, .86), rgba(10, 22, 50, .84));
  --glass-solid: linear-gradient(180deg, #17315e, #0b1a3a);
  /* joias dos botões */
  --ja: #2fae3c;
  --jb: #e53935;
  --jx: #1e74e8;
  --jy: #f5b700;
  --shadow: 0 .5em 1.2em rgba(8, 14, 40, .45);
  --focus: 0 0 0 .2em #ffe59a, 0 0 1.4em .2em rgba(255, 200, 80, .85);

  --display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #060b1e;
  color: var(--text-dark);
  font-family: var(--body);
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; margin: 0; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
svg { display: block; }

/* ---------- Palco 16:9 ---------- */
#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  transform: translate(-50%, -50%);
  font-size: max(6px, min(2.2vh, 1.25vw));
  overflow: hidden;
  background: #7fd3ff;
  line-height: 1.2;
}
/* vinheta discreta nas bordas */
#stage::after {
  content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(5, 10, 30, 0) 58%, rgba(5, 10, 30, .35) 100%);
}

/* ---------- Fundo sem imagem (céu, sol, nuvens, mar) ---------- */
#bg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #7fd3ff 0%, #c8f0ff 55.4%, #2a7fd6 56%, #0f3f8f 100%); }
#bg::before { /* reflexos claros no mar */
  content: ""; position: absolute; inset: 56% 0 0 0;
  background:
    radial-gradient(ellipse 3em .3em at 50% 50%, rgba(255, 255, 255, .38), transparent) 0 0 / 11em 3.4em,
    radial-gradient(ellipse 2em .22em at 50% 50%, rgba(255, 255, 255, .26), transparent) 5em 1.5em / 7em 2.6em;
}
#bg::after { /* coluna de luz do sol na água */
  content: ""; position: absolute; right: calc(9% + .6em); top: 56%; height: 40%; width: 9em;
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 244, 190, .5), rgba(255, 244, 190, 0) 100%);
}
#bg .sun {
  position: absolute; right: 9%; top: 6%; width: 10em; height: 10em; border-radius: 50%;
  background: radial-gradient(circle, #fff7c4 0 30%, #ffe678 34% 64%, #ffd13f 100%);
  box-shadow: 0 0 3em 1em rgba(255, 240, 170, .85), 0 0 11em 5em rgba(255, 232, 150, .35);
}
#bg .cloud {
  position: absolute; height: 3.6em; width: 13em; border-radius: 2em;
  background: radial-gradient(ellipse at 50% 30%, #ffffff, #f1faff 60%, #d9edfb);
  box-shadow: inset 0 -.5em .7em rgba(180, 215, 242, .45), 0 .3em .7em rgba(120, 170, 215, .18);
  animation: drift 40s linear infinite alternate;
}
#bg .cloud::before { content: ""; position: absolute; left: 2.2em; top: -2em; width: 5.6em; height: 4.6em; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #ffffff, #f1faff 70%, #e2f1fc); }
#bg .c1 { left: 6%; top: 12%; }
#bg .c2 { left: 52%; top: 6%; width: 10em; animation-duration: 55s; }
#bg .c3 { left: 28%; top: 31%; width: 8em; height: 3em; animation-duration: 48s; animation-direction: alternate-reverse; }
#bg .waves {
  position: absolute; left: -3em; right: -3em; top: calc(56% - .2em); height: 1.5em;
  background: radial-gradient(ellipse 1.5em .45em at 50% 0, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)) 0 0 / 3em 1.5em repeat-x;
  animation: sway 3s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateX(-2em); } to { transform: translateX(7em); } }
@keyframes sway { from { transform: translateX(-1em); } to { transform: translateX(1em); } }

/* ---------- Telas ---------- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 2.2em 3em;
  z-index: 1;
}
.screen.enter { animation: fadein .35s ease-out; }
/* Só desliza: a tela fica visível mesmo se a animação não rodar (aba em segundo plano, prints). */
@keyframes fadein { from { transform: translateY(.8em); } to { transform: none; } }

.ic { display: inline-flex; width: 2.2em; height: 2.2em; flex: none; }
.ic svg { width: 100%; height: 100%; }

/* ---------- Painéis: vidro azul-marinho e pergaminho, moldura dourada ---------- */
.panel {
  position: relative;
  background: var(--glass); color: var(--cream);
  border: .2em solid transparent; border-radius: 1.1em;
  box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .18), var(--shadow);
}
.panel::before { /* moldura dourada em anel (não cobre o conteúdo) */
  content: ""; position: absolute; inset: -.2em; padding: .2em; border-radius: inherit;
  background: var(--ring, var(--gold-frame)); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.panel.dark { background: var(--glass); color: var(--cream); }
.panel.light {
  background: var(--parch-fill); color: var(--text-dark);
  box-shadow: inset 0 0 1.4em rgba(150, 100, 30, .25), var(--shadow);
}

/* ---------- Botões de menu: madeira-teca com moldura dourada ---------- */
.btn {
  font-family: var(--display); font-weight: 400; letter-spacing: .04em;
  font-size: 1.9em; line-height: 1.1;
  padding: .3em 1em; min-height: 2em;
  color: var(--cream); text-shadow: 0 .07em 0 rgba(30, 12, 0, .6);
  border: .18em solid transparent; border-radius: .75em;
  background:
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .07) 0 .25em, rgba(255, 255, 255, 0) .25em .7em) padding-box,
    linear-gradient(180deg, #9b552a, #8a4b22 45%, #5e2f14) padding-box,
    var(--gold-frame) border-box;
  box-shadow: inset 0 .1em 0 rgba(255, 224, 170, .38), inset 0 -.18em .3em rgba(30, 10, 0, .35), var(--shadow);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  position: relative;
}
.btn.primary {
  color: #4a2a10; text-shadow: 0 .06em 0 rgba(255, 244, 200, .55);
  background:
    linear-gradient(180deg, #ffe08a, #f0b43c 55%, #c98a1e) padding-box,
    var(--gold-frame-dark) border-box;
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .55), inset 0 -.18em .3em rgba(120, 70, 10, .35), var(--shadow);
}
.btn.small { font-size: 1.45em; padding: .25em .6em; }
.btn:active { transform: translateY(.1em); }

/* foco bem forte (TV): brilho dourado + leve elevação */
.nav:focus, .mbtn:focus {
  outline: none;
  box-shadow: var(--focus);
  transform: translateY(-.15em) scale(1.03);
  z-index: 3;
}
.btn.nav:focus {
  background:
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .05) 0 .25em, rgba(255, 255, 255, 0) .25em .7em) padding-box,
    linear-gradient(180deg, #b66a38, #9b552a 45%, #6c3718) padding-box,
    var(--gold-frame) border-box;
  box-shadow: inset 0 .1em 0 rgba(255, 224, 170, .45), inset 0 -.18em .3em rgba(30, 10, 0, .3), var(--focus);
}
.btn.primary.nav:focus {
  background:
    linear-gradient(180deg, #fff0b0, #ffcb52 55%, #e0a02a) padding-box,
    var(--gold-frame-dark) border-box;
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .65), var(--focus);
}
.nav[aria-disabled="true"] { opacity: .4; }

/* ---------- Título ---------- */
#title { flex-direction: row; align-items: center; gap: 2em; padding: 2em 3em; }
.t-art { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; min-width: 0; }
.t-art::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 4.5em; background: radial-gradient(ellipse, #fbe9b8, #e6c680); border-radius: 50%; z-index: 0; }
.t-art svg { position: relative; z-index: 1; height: 90%; width: auto; max-width: 100%; margin-bottom: 1.6em; animation: bob 2.6s ease-in-out infinite alternate; }
.t-side { flex: none; width: 41em; display: flex; flex-direction: column; gap: 1.2em; }
.t-logo { padding: .9em 1.4em 1em; text-align: center; }
.t-logo h1 {
  font-family: var(--display); font-weight: 400; letter-spacing: .04em;
  font-size: 4.3em; line-height: .95;
  color: #ffd45a;
  background: linear-gradient(180deg, #fff3b8 0%, #ffd45a 38%, #f0a92a 62%, #c97a14 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .12em 0 #6b3a10) drop-shadow(0 .3em .6em rgba(0, 0, 0, .45)); /* estático */
}
.t-sub { font-family: var(--display); font-size: 2em; letter-spacing: .05em; color: var(--cream); margin-top: .15em; text-shadow: 0 .06em 0 rgba(0, 0, 0, .45); }
.t-tag { font-size: 1.25em; color: #cfe6ff; margin-top: .15em; }
.press-a {
  display: flex; align-items: center; justify-content: center; gap: .6em; font-size: 1.7em; font-family: var(--display); letter-spacing: .05em; color: var(--cream);
  background: var(--glass-solid) padding-box, var(--gold-frame) border-box;
  border: .12em solid transparent; border-radius: 2em; padding: .15em .9em .15em .3em; align-self: center;
  box-shadow: var(--shadow);
  animation: pulse 1.2s ease-in-out infinite alternate;
}
.press-a .ic { width: 1.7em; height: 1.7em; }
.menu { display: flex; flex-direction: column; gap: 1.2em; align-items: stretch; padding: 0 .6em; }
.menu .btn { width: 100%; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-.9em); } }

/* ---------- Como jogar ---------- */
#howto { align-items: center; gap: 1.2em; }
.s-title { font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 3.2em; padding: .1em 1.2em; }
.how-body { width: 100%; max-width: 68em; flex: 1; min-height: 0; padding: 1.2em 1.8em; display: flex; flex-direction: column; justify-content: space-between; gap: .6em; }
.how-row { display: flex; align-items: center; gap: 1em; font-size: 1.55em; line-height: 1.15; }
.how-row .keys { display: flex; gap: .3em; flex: none; min-width: 9.6em; }
.how-row .keys .ic { width: 2.1em; height: 2.1em; }
.how-row .kb { font-size: .7em; background: #f3e1b0; color: var(--text-dark); border: .12em solid #c9993a; border-radius: .4em; padding: .1em .45em; align-self: center; box-shadow: 0 .12em 0 #b98a30; }

/* Fita dourada (títulos de tela e nome no diálogo) */
.s-title.panel, .d-name {
  border: 0; color: #4a2a10;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 46%, rgba(120, 70, 10, .0) 78%, rgba(120, 70, 10, .35) 100%),
    linear-gradient(180deg, #ffe59a, #f0b43c 60%, #c98a1e);
  clip-path: polygon(0 0, 100% 0, calc(100% - .7em) 50%, 100% 100%, 0 100%, .7em 50%);
  text-shadow: 0 .06em 0 rgba(255, 244, 200, .6);
  box-shadow: none;
}
.s-title.panel::before { display: none; }
.s-title.panel { padding: .1em 1.8em; }

/* ---------- Mapa ---------- */
#map { padding: 0; }
#mapScroll { position: absolute; inset: 0; overflow: hidden; }
#mapBoard { position: relative; width: 100%; height: 100%; }
#mapBg { position: absolute; inset: 0; background: #1664c0; }
#mapBg svg { width: 100%; height: 100%; }
#islands { position: absolute; inset: 0; }
.island {
  position: absolute; width: 17%;
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 1.5em;
}
.island .art { width: 100%; position: relative; }
.island .art svg { width: 100%; height: auto; }
.island .lock { position: absolute; left: 50%; top: 40%; width: 3.2em; height: 3.2em; transform: translate(-50%, -50%); }
.island .nm {
  margin-top: -.3em; position: relative;
  color: var(--cream); border: .14em solid transparent; border-radius: .8em;
  background: var(--glass-solid) padding-box, var(--gold-frame) border-box;
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .15), var(--shadow);
  padding: .1em .7em; font-size: 1.25em; white-space: nowrap; font-family: var(--display); letter-spacing: .04em; font-weight: 400;
}
.island .st { display: flex; gap: .1em; margin-top: .2em; }
.island .st svg { width: 1.7em; height: 1.7em; }
.island[aria-disabled="true"] { opacity: 1; }
.island.locked .art { opacity: .8; }
.island.locked .nm { background: linear-gradient(180deg, #3b4766, #28324d) padding-box, linear-gradient(145deg, #d8d2c0, #8a8574 60%, #c9c3b0) border-box; color: #dfe4f2; }
.island:focus { outline: none; transform: translate(-50%, -50%) scale(1.03); box-shadow: var(--focus); background: rgba(255, 240, 190, .16); }
.island:focus .nm { background: linear-gradient(180deg, #ffe59a, #f0b43c 60%, #c98a1e) padding-box, var(--gold-frame-dark) border-box; color: #4a2a10; transform: scale(1.1); }
.island:focus .art { animation: bob 1s ease-in-out infinite alternate; }
.island.locked:focus { box-shadow: 0 0 0 .2em #e6e2d2, 0 0 1.2em .2em rgba(230, 226, 210, .6); }
#ship { position: absolute; left: 0; top: 0; width: 10%; z-index: 2; pointer-events: none; transition: transform .7s ease-in-out; }
#ship svg { width: 100%; height: auto; animation: bob 1.6s ease-in-out infinite alternate; }

.m-hud { position: absolute; left: 1.6em; right: 1.6em; top: 1.2em; display: flex; justify-content: space-between; align-items: flex-start; z-index: 5; pointer-events: none; }
.m-coins { display: flex; align-items: center; gap: .5em; padding: .3em 1em .3em .5em; font-size: 2em; }
.m-coins b { font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 1.1em; color: var(--gold-1); }
.m-coins .ic { width: 1.5em; height: 1.5em; }
.m-crew { display: flex; gap: .5em; padding: .3em .6em; }
.m-crew .mem {
  width: 4em; height: 4em; border-radius: 50%; overflow: hidden;
  border: .18em solid transparent;
  background: radial-gradient(circle at 50% 35%, #4f8fd6, #1d4a85) padding-box, var(--gold-frame) border-box;
  box-shadow: 0 .2em .5em rgba(8, 14, 40, .5);
}
.m-crew .mem svg { width: 100%; height: 100%; }
.m-bar {
  position: absolute; left: 50%; bottom: 1.1em; transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.6em; padding: .45em 1.4em; z-index: 5; white-space: nowrap;
  font-size: 1.45em;
}
.m-bar .ic { width: 1.8em; height: 1.8em; }
.keyhint, .mbtn { display: inline-flex; align-items: center; gap: .4em; }
.mbtn { background: none; border: 0; padding: .1em .5em .1em .1em; color: var(--cream); cursor: pointer; border-radius: 1em; font-weight: 800; }
.mbtn:focus { background: rgba(255, 229, 154, .18); }

/* ---------- Diálogo ---------- */
#dialog { padding: 0; cursor: pointer; }
.d-fig { position: absolute; left: 5%; bottom: 10.5em; height: 60%; }
.d-fig.right { left: auto; right: 5%; }
.d-fig svg { height: 100%; width: auto; }
.d-box {
  position: absolute; left: 5em; right: 5em; bottom: 2.2em; min-height: 13em;
  color: var(--text-dark);
  border: .22em solid transparent; border-radius: 1.4em;
  background: var(--parch-fill) padding-box, var(--gold-frame) border-box;
  box-shadow: inset 0 0 1.6em rgba(150, 100, 30, .28), var(--shadow);
  padding: 1.7em 2.4em 1.7em; display: flex; flex-direction: column; justify-content: center; gap: .3em;
}
.d-name {
  position: absolute; top: -1.6em; left: 2em;
  padding: .05em 1.5em; font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 2.2em;
  line-height: 1.25;
}
.d-name:empty { display: none; }
.d-en { font-family: var(--display); font-weight: 400; letter-spacing: .04em; font-size: 3.1em; line-height: 1.05; color: #1d56b8; }
.d-pt { font-size: 1.55em; line-height: 1.25; }
.d-pt.big { font-size: 2.15em; }
.d-pt.narr { font-style: italic; }
.d-next { position: absolute; right: 1.4em; bottom: .6em; display: flex; align-items: center; gap: .4em; font-size: 1.15em; color: var(--text-soft); }
.d-next .ic { width: 1.8em; height: 1.8em; animation: nudge .7s ease-in-out infinite alternate; }
@keyframes nudge { from { transform: translateY(0); } to { transform: translateY(.3em); } }

/* ---------- Batalha ---------- */
#battle { padding: 1em 2.2em 1.1em; gap: .6em; }
.b-top { flex: none; display: grid; grid-template-columns: auto 1fr auto; gap: 1em; align-items: stretch; height: 4.6em; }
.b-top .panel { padding: .3em .9em; display: flex; align-items: center; gap: .6em; }
.b-hearts svg { display: inline-block; width: 2.7em; height: 2.7em; margin-right: .1em; }
.b-hearts #hearts { display: flex; }
.b-top .b-boss { flex-direction: column; align-items: stretch; justify-content: center; gap: .15em; }
.b-bossname { font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 1.5em; line-height: 1; color: var(--cream); text-shadow: 0 .06em 0 rgba(0, 0, 0, .5); }
.bar {
  height: 1.15em; border: .15em solid transparent; border-radius: 1em; overflow: hidden;
  background: linear-gradient(180deg, #120a1e, #2a1a36) padding-box, var(--gold-frame) border-box;
}
.bar i {
  display: block; height: 100%; width: 100%; border-radius: 1em;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0 46%, rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, #ff7a3c, #e5273c);
}
.b-side { gap: .9em !important; }
.b-coins { display: flex; align-items: center; gap: .3em; font-size: 2em; }
.b-coins .ic { width: 1.3em; height: 1.3em; }
.b-coins b { font-family: var(--display); font-weight: 400; letter-spacing: .05em; min-width: 1.5em; color: var(--gold-1); }
.timer {
  width: 7em; height: 1.4em; border: .15em solid transparent; border-radius: 1em; overflow: hidden;
  background: linear-gradient(180deg, #120a1e, #2a1a36) padding-box, var(--gold-frame) border-box;
}
.timer i {
  display: block; height: 100%; width: 100%; transform-origin: left center;
  background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0 46%, rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, #3ddc84, #1fa855);
}
.timer.low i { background: linear-gradient(180deg, rgba(255, 255, 255, .4) 0 46%, rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, #ff7a3c, #e5273c); }
.b-pause {
  width: 2.4em; height: 2.4em; border-radius: 50%; border: .13em solid transparent; color: var(--gold-1);
  background: var(--glass-solid) padding-box, var(--gold-frame) border-box;
  font-family: var(--display); font-size: 1.3em; cursor: pointer; letter-spacing: 0; padding: 0;
}
.b-pause:focus { outline: none; box-shadow: var(--focus); }

.arena { position: relative; flex: 1; min-height: 0; }
/* chão de tábuas */
.deck {
  position: absolute; left: -2.2em; right: -2.2em; bottom: -.4em; height: 20%;
  border-top: .25em solid #f0c25a; border-radius: 1em 1em 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(40, 18, 6, 0) 0 7em, rgba(40, 18, 6, .4) 7em 7.14em),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 1.3em, rgba(40, 18, 6, .22) 1.3em 1.4em),
    linear-gradient(180deg, #b9773d, #8a4b22 55%, #5e2f14);
  box-shadow: inset 0 .2em 0 rgba(255, 229, 154, .55), 0 -.2em .8em rgba(255, 215, 120, .3);
}
.fig { position: absolute; bottom: 5%; height: 96%; display: flex; align-items: flex-end; }
.fig::before { /* sombra elíptica no chão */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -.5em; height: 1.5em; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(10, 6, 24, .45), rgba(10, 6, 24, 0) 70%);
  pointer-events: none;
}
.fig svg, .fig img.sprite { position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; }
.fig img.sprite { object-fit: contain; object-position: bottom; display: block; transform-origin: 50% 100%; }
.fig.hero { left: 6%; }
.fig.foe { right: 6%; }
.fig.idle svg, .fig.idle img.sprite.pose-idle { animation: bob 1.4s ease-in-out infinite alternate; }
.fig.lunge { animation: lunge .5s ease-out; }
.fig.foe.lunge { animation: lungeL .5s ease-out; }
.fig.hurt { animation: shake .45s linear; }
/* poses de ilustração pintada reaproveitada */
.fig img.sprite.pose-hurt { transform: rotate(-8deg) translateX(-.5em); }
.fig.foe img.sprite.pose-hurt { transform: rotate(8deg) translateX(.5em); }
.fig img.sprite.pose-special { filter: drop-shadow(0 0 .8em rgba(255, 215, 90, .9)); }
.fig img.sprite.pose-defeated { transform: rotate(12deg); opacity: .75; filter: grayscale(.6); }
.fig.foe img.sprite.pose-defeated { transform: rotate(-12deg); }
@keyframes lunge { 0% { transform: translateX(0); } 40% { transform: translateX(14em); } 100% { transform: translateX(0); } }
@keyframes lungeL { 0% { transform: translateX(0); } 40% { transform: translateX(-14em); } 100% { transform: translateX(0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-1.2em); } 35% { transform: translateX(1.2em); } 55% { transform: translateX(-.8em); } 75% { transform: translateX(.8em); } }

/* cenário pintado da ilha: o chão está na pintura; some o céu/mar/chão desenhados por CSS */
#battle.has-bg, #ending.has-bg { background-size: cover; background-position: center bottom; background-repeat: no-repeat; }
#battle.has-bg .deck { display: none; }
#stage:has(#battle.has-bg:not([hidden])) #bg,
#stage:has(#ending.has-bg:not([hidden])) #bg { display: none; }

.fx { position: absolute; right: 8%; top: 4%; width: 34%; height: 80%; display: grid; place-items: center; opacity: 0; pointer-events: none; z-index: 2; }
.fx.left { right: auto; left: 4%; width: 30%; }
.fx svg { width: 100%; height: 100%; }
.fx.show { animation: fxpop .75s ease-out; }
@keyframes fxpop { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }

.pow { position: absolute; left: 0; right: 0; top: 5%; display: flex; justify-content: center; pointer-events: none; z-index: 4; }
.pow:empty { display: none; }
.pow .in {
  display: inline-flex; align-items: baseline; gap: .5em; color: #4a2a10;
  border: .18em solid transparent; border-radius: 1em; padding: .05em .7em .15em;
  background: linear-gradient(180deg, #fff0b0, #ffd45a 50%, #f0a92a) padding-box, var(--gold-frame-dark) border-box;
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .6), 0 .4em 1em rgba(8, 14, 40, .5);
  transform: rotate(-3deg);
}
.pow.show .in { animation: powin .9s ease-out forwards; }
.pow.foe .in { color: #fff3e6; background: linear-gradient(180deg, #ff6b6b, #e5273c 55%, #a8142a) padding-box, var(--gold-frame-dark) border-box; }
.pow.special .in { color: #fff; background: linear-gradient(180deg, #ffb347, #ff7a1a 55%, #d9540a) padding-box, var(--gold-frame) border-box; }
.pow b { font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 4.4em; line-height: 1; text-shadow: 0 .05em 0 rgba(255, 255, 255, .35); }
.pow.foe b, .pow.special b { text-shadow: 0 .05em 0 rgba(60, 10, 0, .55); }
.pow i { font-style: normal; font-size: 1.7em; font-weight: 800; }
.pow.special b { font-size: 5em; }
@keyframes powin { 0% { opacity: 0; transform: rotate(-3deg) scale(.3); } 20% { opacity: 1; transform: rotate(-3deg) scale(1.2); } 35% { transform: rotate(-3deg) scale(1); } 85% { opacity: 1; transform: rotate(-3deg) scale(1); } 100% { opacity: 0; transform: rotate(-3deg) scale(1.05); } }

.combo {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; align-items: center; gap: .6em;
  color: var(--cream); border: .13em solid transparent; border-radius: 1.4em; padding: .15em 1em; font-size: 1.15em; white-space: nowrap; z-index: 3;
  background: var(--glass-solid) padding-box, var(--gold-frame) border-box;
  box-shadow: var(--shadow);
}
.combo .pips { display: flex; gap: .3em; }
.combo .pips i { width: 1.1em; height: 1.1em; border-radius: 50%; border: .13em solid #7f93b8; background: rgba(255, 255, 255, .08); }
.combo .pips i.on { background: radial-gradient(circle at 32% 28%, #fff3b8, #f5b700 55%, #c98a1e); border-color: var(--gold-1); box-shadow: 0 0 .6em rgba(255, 200, 80, .8); }
.combo .ready { color: var(--gold-1); font-family: var(--display); font-weight: 400; letter-spacing: .06em; font-size: 1.25em; animation: pulse .5s ease-in-out infinite alternate; display: inline-block; }

.learn, .fix { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%); z-index: 5; padding: .35em 1.2em; font-size: 2.1em; text-align: center; white-space: nowrap; max-width: 96%; }
.learn { --ring: linear-gradient(145deg, #b8f5c8, #2fae3c 45%, #14702a 70%, #6fdc8c); box-shadow: inset 0 0 1.4em rgba(150, 100, 30, .25), 0 0 1.2em rgba(60, 220, 120, .45), var(--shadow); }
.fix { --ring: linear-gradient(145deg, #ffc2bd, #e5273c 45%, #8f1428 70%, #ff7a7a); background: var(--parch-fill); color: var(--text-dark); box-shadow: inset 0 0 1.4em rgba(150, 100, 30, .25), 0 0 1.2em rgba(229, 39, 60, .4), var(--shadow); }
.fix b { color: #c81f35; font-family: var(--display); font-weight: 400; letter-spacing: .04em; }
.learn b { color: #1f8a35; font-family: var(--display); font-weight: 400; letter-spacing: .04em; }

.b-bottom { flex: none; display: flex; flex-direction: column; align-items: center; gap: .55em; }
.prompt { width: 64em; height: 6em; padding: .3em 1.2em; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .05em; overflow: hidden; }
.prompt .ql { font-size: 1.05em; color: var(--text-soft); line-height: 1; }
.prompt .qm { font-family: var(--display); font-weight: 400; letter-spacing: .04em; font-size: 2.25em; line-height: 1.02; color: var(--text-dark); }
.prompt .qm.sm { font-size: 1.9em; }
.prompt .qm b { color: #1d56b8; font-weight: 400; }
.prompt .blank { display: inline-block; min-width: 2.2em; border-bottom: .1em solid #c81f35; color: #c81f35; text-align: center; line-height: .8; }
.prompt .qh { font-size: 1.1em; color: var(--text-soft); line-height: 1.1; }
.prompt .spk { width: 3.4em; height: 3.4em; padding: 0; border: 0; background: none; cursor: pointer; margin: -.2em 0; border-radius: 50%; }
.prompt .spk svg { width: 100%; height: 100%; }
.prompt .spk:focus { outline: none; box-shadow: var(--focus); }

/* ---------- Respostas: cartões de pergaminho com joia ---------- */
.opts {
  display: grid;
  grid-template-columns: repeat(3, 19.5em);
  grid-template-rows: repeat(3, 4.1em);
  gap: .5em;
  justify-content: center;
  grid-template-areas: "lb y rb" "x c b" ". a .";
}
.opt[data-i="0"] { grid-area: a; --c: var(--ja); }
.opt[data-i="1"] { grid-area: b; --c: var(--jb); }
.opt[data-i="2"] { grid-area: x; --c: var(--jx); }
.opt[data-i="3"] { grid-area: y; --c: var(--jy); }
.opt {
  display: flex; align-items: center; gap: .6em;
  padding: .15em .8em .15em .3em; min-width: 0;
  color: var(--text-dark);
  border: .2em solid transparent; border-radius: 1.4em;
  background: var(--parch-fill) padding-box, var(--gold-frame) border-box;
  box-shadow: inset 0 0 1em rgba(150, 100, 30, .22), 0 .35em .8em rgba(8, 14, 40, .45);
  cursor: pointer; text-align: left;
}
/* a joia: o círculo do botão vira pedra facetada com anel dourado */
.opt .ic {
  width: 2.9em; height: 2.9em; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #ffffff 0, var(--c) 42%, #000 230%);
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--c) 35%, #fff) 0, var(--c) 46%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  box-shadow: 0 0 0 .1em var(--gold-1), 0 0 0 .2em var(--gold-3), 0 .15em .35em .2em rgba(40, 20, 0, .4), inset 0 -.2em .4em rgba(0, 0, 0, .25);
}
.opt .ic svg ellipse { fill: transparent; stroke: none; }
.opt .t { font-size: 1.5em; font-weight: 900; line-height: 1.02; overflow-wrap: anywhere; flex: 1; min-width: 0; }
.opt .t.long { font-size: 1.25em; }
.opt .t.xlong { font-size: 1.05em; }
.opt.right {
  color: #06361b;
  background: linear-gradient(180deg, #a6f5c0, #4fd283 60%, #2eb866) padding-box, var(--gold-frame) border-box;
  box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .6), 0 0 1.3em .1em rgba(60, 230, 130, .75), 0 .35em .8em rgba(8, 14, 40, .45);
  animation: pop .4s ease-out;
}
.opt.wrong {
  color: #3d0710;
  background: linear-gradient(180deg, #ffa3a3, #ef5560 60%, #d7263d) padding-box, var(--gold-frame) border-box;
  box-shadow: inset 0 .12em 0 rgba(255, 255, 255, .45), 0 0 1.2em .1em rgba(229, 39, 60, .65), 0 .35em .8em rgba(8, 14, 40, .45);
  animation: shake .45s linear;
}
.opt.dim { opacity: .5; }
.opt[aria-disabled="true"] { opacity: .35; text-decoration: line-through; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
.opt:focus {
  outline: none; transform: translateY(-.15em) scale(1.03);
  background: radial-gradient(ellipse at 50% 38%, #ffffff 0%, #fff6d2 60%, #f7e4a8 100%) padding-box, var(--gold-frame) border-box;
  box-shadow: var(--focus);
}

.hintbtn {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  color: var(--cream); cursor: pointer;
  border: .15em solid transparent; border-radius: 1.2em; padding: .1em .6em; font-size: 1.2em; font-weight: 800;
  background: var(--glass-solid) padding-box, var(--gold-frame) border-box;
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .15), var(--shadow);
  min-width: 0;
}
.hintbtn .ic { width: 2.3em; height: 2.3em; }
.hintbtn.lb { grid-area: lb; } .hintbtn.rb { grid-area: rb; }
.hintbtn:focus { background: linear-gradient(180deg, #274b8a, #14305e) padding-box, var(--gold-frame) border-box; }
.cont { grid-area: c; font-size: 1.6em; padding: .1em .4em; min-height: 0; }

.overlay { position: absolute; inset: 0; background: rgba(5, 10, 30, .72); display: grid; place-items: center; z-index: 20; }
.q-card { display: flex; flex-direction: column; gap: .8em; padding: 1.4em 2.4em; min-width: 26em; align-items: stretch; text-align: center; }
.q-card h3 { font-family: var(--display); font-weight: 400; font-size: 3em; letter-spacing: .05em; color: #8a4b22; text-shadow: 0 .05em 0 rgba(255, 255, 255, .6); }

/* ---------- Vitória ---------- */
#win, #lose, #ending { align-items: center; justify-content: center; }
.w-card { display: flex; align-items: center; gap: 2em; padding: 1.6em 2.4em; width: 66em; }
.w-fig { flex: none; width: 17em; height: 21em; }
.w-fig svg { width: 100%; height: 100%; }
.w-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .5em; text-align: center; }
.w-main h2, .l-card h2, .e-card h2 {
  font-family: var(--display); font-weight: 400; letter-spacing: .05em; line-height: 1;
  -webkit-text-stroke: .04em #6b3a10; paint-order: stroke fill;
  text-shadow: 0 .07em 0 #6b3a10, 0 .18em .3em rgba(80, 40, 0, .35);
}
.w-main h2 { font-size: 4.6em; color: #ffc23a; }
.w-sub { font-size: 1.5em; color: var(--text-soft); }
.w-stars { display: flex; gap: .4em; }
.w-stars svg { width: 5.4em; height: 5.4em; }
.w-stars svg.on { animation: starpop .6s ease-out; }
@keyframes starpop { 0% { transform: scale(.2) rotate(-40deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }
.w-coins { display: flex; align-items: center; gap: .3em; font-size: 2em; }
.w-coins .ic { width: 1.4em; height: 1.4em; }
.w-coins b { font-family: var(--display); font-weight: 400; letter-spacing: .05em; color: #a8660c; }
.w-label { font-size: 1.2em; color: var(--text-soft); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35em; max-height: 8.6em; overflow: hidden; }
.chip { background: #fff7df; color: var(--text-dark); border: .12em solid #d9a73e; border-radius: .8em; padding: .05em .6em; font-size: 1.2em; white-space: nowrap; box-shadow: 0 .1em 0 rgba(154, 106, 31, .5); }
.w-main .btn { margin-top: .5em; }

.l-fig { position: absolute; left: 6%; bottom: 8%; height: 66%; }
.l-fig svg { height: 100%; width: auto; }
.l-card { margin-left: 22em; display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 1.6em 2.6em; width: 44em; text-align: center; position: relative; }
.l-card h2 { font-size: 4.8em; color: #ff5a5f; -webkit-text-stroke-color: #5a0f1c; text-shadow: 0 .07em 0 #5a0f1c, 0 .18em .3em rgba(80, 0, 10, .35); }
.l-pt { font-size: 2.2em; }
.l-sub { font-size: 1.4em; color: var(--text-soft); }
.l-btns { display: flex; gap: 1em; margin-top: .6em; flex-wrap: wrap; justify-content: center; }

/* ---------- Livro ---------- */
#book { gap: 1em; align-items: center; }
.bk-head { display: flex; align-items: center; gap: .8em; padding: .2em 1.4em .2em .8em; width: 100%; max-width: 70em; }
.bk-head h2 { font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 2.8em; flex: 1; color: var(--gold-1); text-shadow: 0 .06em 0 rgba(0, 0, 0, .45); }
.bk-head b { font-family: var(--display); font-weight: 400; font-size: 2.4em; letter-spacing: .05em; color: var(--cream); }
.bk-head .ic { width: 3em; height: 3em; }
.bk-body { width: 100%; max-width: 70em; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1em 1.4em 1.4em; scrollbar-width: thin; scrollbar-color: #c9993a rgba(150, 100, 30, .15); }
.bk-isl { font-family: var(--display); font-weight: 400; letter-spacing: .05em; font-size: 2em; color: #1d56b8; margin: .4em 0 .3em; }
.bk-isl:first-child { margin-top: 0; }
.bk-isl small { font-family: var(--body); font-size: .6em; color: var(--text-soft); margin-left: .6em; }
.bk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; padding: .35em .35em .5em; }
.bk-item {
  display: flex; align-items: center; gap: .5em; text-align: left; color: var(--text-dark);
  background: linear-gradient(180deg, #fffdf4, #f8ecc8) padding-box, linear-gradient(145deg, #f3cd6a, #c9993a 60%, #e8b445) border-box;
  border: .13em solid transparent; border-radius: .9em; padding: .25em .6em .25em .4em; cursor: pointer;
  box-shadow: 0 .18em .4em rgba(110, 70, 10, .3); min-width: 0;
}
.bk-item:focus { outline: none; box-shadow: var(--focus); transform: translateY(-.1em) scale(1.03); }
.bk-item .ic { width: 1.8em; height: 1.8em; }
.bk-item .tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.bk-item .en { font-size: 1.35em; overflow-wrap: anywhere; }
.bk-item .pt { font-size: 1.05em; color: var(--text-soft); overflow-wrap: anywhere; }
.bk-empty { font-size: 1.8em; text-align: center; padding: 3em 1em; color: var(--text-soft); }

/* ---------- Final ---------- */
.e-crew { display: flex; justify-content: center; gap: 1em; position: absolute; left: 0; right: 0; top: 2.5em; height: 15em; }
.e-crew svg { height: 100%; width: auto; }
.e-card { margin-top: 10em; display: flex; flex-direction: column; align-items: center; gap: .5em; padding: 1.4em 3em; width: 52em; text-align: center; }
.e-card h2 { color: #ffc23a; font-size: 4.2em; }
.e-sub { font-size: 1.5em; color: var(--text-soft); }
.e-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .4em 1.6em; font-size: 1.5em; width: 100%; }
.e-stats li { text-align: left; display: flex; align-items: center; gap: .4em; justify-content: flex-start; background: #fff7df; color: var(--text-dark); border: .12em solid #d9a73e; border-radius: .8em; padding: .1em .6em; box-shadow: 0 .1em 0 rgba(154, 106, 31, .5); }
.e-stats .ic { width: 1.5em; height: 1.5em; }

/* ---------- Aviso ---------- */
#toast {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 40;
  color: var(--cream); border: .15em solid transparent; border-radius: 1.2em;
  background: var(--glass-solid) padding-box, var(--gold-frame) border-box;
  padding: .4em 1.3em; font-size: 1.9em; text-align: center; max-width: 86%; box-shadow: var(--shadow);
}

/* ===================== Celular / retrato ===================== */
@media (max-width: 600px), (max-aspect-ratio: 3/4) {
  #stage { left: 0; top: 0; transform: none; width: 100vw; height: 100vh; height: 100dvh; font-size: clamp(12px, 4.2vw, 21px); }
  #bg { background: linear-gradient(180deg, #7fd3ff 0%, #c8f0ff 39.5%, #2a7fd6 40%, #0f3f8f 100%); }
  #bg::before { inset: 40% 0 0 0; }
  #bg::after { top: 40%; right: calc(9% - 1em); width: 6em; }
  #bg .waves { top: calc(40% - .2em); }
  #bg .sun { width: 6em; height: 6em; top: 3%; }
  .screen { padding: 1em 1em; }

  #title { flex-direction: column; padding: .8em 1em 1em; gap: .6em; }
  .t-art { flex: 0 0 22%; width: 100%; height: auto; min-height: 0; }
  .t-art::after { height: 2.2em; left: 20%; right: 20%; }
  .t-art svg { height: 92%; margin-bottom: .6em; animation: none; }
  .t-side { width: 100%; flex: 1; min-height: 0; gap: .6em; }
  .t-logo { padding: .5em .8em; }
  .t-logo h1 { font-size: 3.1em; }
  .t-sub { font-size: 1.5em; }
  .t-tag { font-size: 1em; }
  .press-a { font-size: 1.2em; }
  .btn { font-size: 1.6em; }
  .btn.small { font-size: 1.15em; }
  .menu { gap: .5em; }

  .how-body { padding: .8em; }
  .how-row { font-size: 1em; flex-wrap: wrap; gap: .4em .6em; }
  .how-row .keys { min-width: 0; }
  .how-row .keys .ic { width: 1.8em; height: 1.8em; }
  .s-title { font-size: 2.2em; }

  #map { padding: 0; }
  #mapScroll { top: 4.6em; bottom: 4.6em; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  #mapBoard { height: auto; aspect-ratio: 1 / 2.15; }
  .island { width: 38%; }
  .island .nm { font-size: 1.1em; }
  .m-hud { left: .8em; right: .8em; top: .6em; }
  .m-coins { font-size: 1.4em; }
  .m-crew .mem { width: 3em; height: 3em; }
  .m-bar { width: calc(100% - 1.2em); bottom: .6em; justify-content: space-between; gap: .2em; padding: .35em .5em; font-size: .88em; }
  .mbtn { padding: .1em .3em .1em .1em; gap: .3em; }
  .m-bar .keyhint { display: none; }
  .m-bar .ic { width: 1.8em; height: 1.8em; }
  #ship { width: 18%; }

  .d-fig { left: 50%; transform: translateX(-50%); bottom: 17em; height: 34%; }
  .d-fig.right { left: 50%; right: auto; }
  .d-box { left: .8em; right: .8em; bottom: 1em; min-height: 15em; padding: 1.5em 1.1em 2.2em; }
  .d-name { font-size: 1.6em; left: 1em; }
  .d-en { font-size: 2.1em; }
  .d-pt { font-size: 1.2em; }
  .d-pt.big { font-size: 1.5em; }

  #battle { padding: .6em .7em .7em; gap: .4em; }
  .b-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; height: auto; gap: .4em; }
  .b-top .panel { padding: .25em .6em; min-width: 0; }
  .b-hearts { grid-column: 1; }
  .b-side { grid-column: 2; grid-row: 1; }
  .b-boss { grid-column: 1 / -1; grid-row: 2; padding: .25em .8em !important; }
  .b-hearts svg { width: 1.7em; height: 1.7em; margin-right: 0; }
  .b-side { gap: .4em !important; }
  .b-pause { width: 2em; height: 2em; font-size: 1.1em; }
  .b-coins { font-size: 1.5em; }
  .timer { width: 3em; }
  .b-bossname { font-size: 1.15em; }
  .arena { min-height: 7em; }
  /* Celular em pé: cada lutador fica com metade da largura, lado a lado. */
  .fig { height: 100%; width: 46%; justify-content: center; }
  .fig svg, .fig img.sprite { width: 100%; height: auto; max-height: 100%; }
  .fig img.sprite { width: auto; max-width: 100%; }
  .fig.hero { left: 2%; } .fig.foe { right: 2%; }
  .deck { height: 14%; left: -.7em; right: -.7em; }
  .fx { width: 46%; right: 0; } .fx.left { width: 44%; left: 0; }
  .pow b, .pow.special b { font-size: 2.6em; }
  .pow i { font-size: 1.1em; }
  .combo { display: none; }
  .learn, .fix { font-size: 1.15em; bottom: 8%; white-space: normal; width: 94%; }
  .prompt { width: 100%; height: 5.2em; }
  .prompt .qm { font-size: 1.7em; } .prompt .qm.sm { font-size: 1.35em; }
  .prompt .spk { width: 2.6em; height: 2.6em; }
  .b-bottom { width: 100%; gap: .4em; }
  .opts { width: 100%; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 3.7em) auto auto; gap: .4em; grid-template-areas: "a b" "x y" "c c" "lb rb"; }
  .opt .ic { width: 2.3em; height: 2.3em; }
  .opt .t { font-size: 1.15em; }
  .opt .t.long { font-size: 1em; } .opt .t.xlong { font-size: .88em; }
  .hintbtn { font-size: 1em; min-height: 2.8em; }
  .hintbtn .ic { width: 1.9em; height: 1.9em; }
  .cont { font-size: 1.4em; min-height: 1.8em; }

  .w-card { flex-direction: column; width: 100%; padding: 1em; gap: .5em; }
  .w-fig { width: 9em; height: 9em; }
  .w-main h2 { font-size: 3em; }
  .w-stars svg { width: 3.6em; height: 3.6em; }
  .w-coins { font-size: 1.5em; }
  .chips { max-height: 5.4em; }
  .chip { font-size: 1em; }
  .l-fig { position: relative; left: auto; bottom: auto; height: 10em; }
  #lose { flex-direction: column; gap: .6em; }
  .l-card { margin-left: 0; width: 100%; padding: 1em; }
  .l-card h2, .e-card h2 { font-size: 3em; }
  .l-pt { font-size: 1.6em; }
  .e-crew { top: 1em; height: 9em; }
  .e-card { margin-top: 8em; width: 100%; padding: 1em; }
  .e-stats { grid-template-columns: 1fr; font-size: 1.2em; }

  .bk-grid { grid-template-columns: 1fr 1fr; }
  .bk-head h2 { font-size: 1.9em; }
  .bk-item .en { font-size: 1.15em; }
  #toast { font-size: 1.2em; bottom: 14%; }
}

/* Telas largas e baixas, ex.: celular deitado */
@media (max-height: 420px) and (min-width: 601px) {
  .t-logo h1 { font-size: 4em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .w-stars svg.on { animation: none; }
  .pow.show .in { animation: none; opacity: 1; }
  .fx.show { animation: none; opacity: 1; }
}

/* ---------- Imagens pintadas (src/img) ---------- */
/* Título: arte do navio em tela cheia; logo e menu numa faixa escura embaixo, sobre o casco e o mar. */
#title.has-art { padding: 0; display: block; }
#title.has-art .t-art { position: absolute; inset: 0; height: auto; }
#title.has-art .t-art::after { display: none; }
#title.has-art .t-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
#title.has-art .t-side {
  position: absolute; left: 0; right: 0; bottom: 0; width: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: end; gap: 1em 2.4em;
  padding: 4em 2.4em 1.6em;
  background: linear-gradient(to top, rgba(8, 18, 44, .94) 0 62%, rgba(8, 18, 44, 0));
}
#title.has-art .t-logo { grid-row: 1 / span 2; align-self: end; }
#title.has-art .press-a { justify-self: center; }
#title.has-art .menu { flex-direction: row; flex-wrap: wrap; gap: .8em; padding: 0; }
#title.has-art .menu > .btn { flex: 1 1 0; width: auto; }
#title.has-art .menu-row { flex-basis: 100%; }

/* Mapa pintado: a ilha já está na imagem; o botão é uma área clicável com nome, estrelas e, se trancada, névoa + cadeado. */
#mapBg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.island.painted { width: 13%; transform: translate(-50%, -40%); }
.island.painted .art { aspect-ratio: 4 / 3; border-radius: 50%; }
.island.painted.locked .art {
  opacity: 1;
  background: radial-gradient(closest-side, rgba(232, 228, 248, .95), rgba(205, 198, 235, .8) 55%, rgba(205, 198, 235, 0));
}
.island.painted:focus { background: transparent; box-shadow: none; transform: translate(-50%, -40%) scale(1.03); }
.island.painted:focus .art { box-shadow: var(--focus); animation: none; }

/* Retratos pintados da tripulação: nos diálogos (moldura dourada) e no HUD do mapa (círculo). */
.d-fig .portrait, .d-fig img {
  height: 82%; width: auto; align-self: flex-end; display: block;
  border: .3em solid transparent; border-radius: 1.4em;
  background: var(--parch-fill) padding-box, var(--gold-frame) border-box;
  box-shadow: var(--shadow);
}
.mem img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

@media (max-width: 600px), (max-aspect-ratio: 3/4) {
  #title.has-art { display: flex; flex-direction: column; padding: .8em 1em 1em; }
  #title.has-art .t-art { position: relative; inset: auto; flex: 0 0 auto; height: auto; }
  #title.has-art .t-art img { aspect-ratio: 16 / 9; height: auto; border: .2em solid transparent; border-radius: 1em; background: var(--glass-solid) padding-box, var(--gold-frame) border-box; box-shadow: var(--shadow); }
  #title.has-art .t-side { position: static; display: flex; flex-direction: column; background: none; padding: 0; gap: .6em; }
  #title.has-art .t-logo { grid-row: auto; }
  #title.has-art .menu { flex-direction: column; flex-wrap: nowrap; }
  #title.has-art .menu > .btn { flex: none; width: 100%; }
  .d-fig .portrait, .d-fig img { height: 100%; }
}

/* Tripulação ao lado das moedas, para não cobrir o Castelo da Névoa no canto superior direito. */
.m-hud { justify-content: flex-start; gap: 1em; }