:root {
  --ink: #16263a;
  --ink-2: #2d3e57;
  --paper: #fff6e3;
  --sand: #efd9a2;
  --wood: #8b5a2b;
  --wood-hi: #c08a52;
  --wood-lo: #5e3a1b;
  --sun: #ffd35c;
  --coral: #e8632a;
  --sea: #1f9fcf;
  --sea-deep: #0f4f9a;
  --good: #7fe08a;
  --px: 4px;
  --ui: 'Pixelify Sans', ui-monospace, monospace;
  --logo: 'Press Start 2P', ui-monospace, monospace;
  /* entalhe e barra de gestos do celular (zero no computador e no navegador com barras) */
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #7fd0f2; font-family: var(--ui); color: var(--ink); -webkit-font-smoothing: none; }
button, input { font: inherit; }

/* ---------- céu do login ---------- */
#sky { position: fixed; inset: 0; background: linear-gradient(#56b7ec 0%, #8fd6f5 55%, #ffe8b8 100%); overflow: hidden; }
#sky i {
  position: absolute; width: 120px; height: 28px; background: #fff; opacity: .9;
  box-shadow: 24px -16px 0 0 #fff, 56px -24px 0 4px #fff, 88px -8px 0 0 #fff;
  image-rendering: pixelated; animation: drift linear infinite;
}
#sky i:nth-child(1) { top: 12%; animation-duration: 70s; animation-delay: -10s; }
#sky i:nth-child(2) { top: 26%; animation-duration: 95s; animation-delay: -60s; transform: scale(1.6); }
#sky i:nth-child(3) { top: 58%; animation-duration: 80s; animation-delay: -30s; }
#sky i:nth-child(4) { top: 40%; animation-duration: 120s; animation-delay: -90s; transform: scale(.8); }
#sky i:nth-child(5) { top: 72%; animation-duration: 110s; animation-delay: -5s; transform: scale(1.3); }
@keyframes drift { from { left: -240px; } to { left: 110%; } }
body:not([data-screen="login"]) #sky { display: none; }

#world { position: fixed; inset: 0; }
#world canvas { width: 100% !important; height: 100% !important; display: block; image-rendering: pixelated; }

/* ---------- login ---------- */
#login-ui { position: fixed; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4vh 16px 3vh; }
#login-ui > * { pointer-events: auto; }
#login-ui[hidden] { display: none; }   /* o display:flex acima venceria o atributo hidden */
.logo { margin: 0; text-align: center; font-family: var(--logo); font-weight: 400; line-height: 1.15; }
.logo .row { display: block; }
.logo b {
  display: inline-block; font-size: clamp(20px, 3.6vw, 40px); color: var(--paper);
  text-shadow: 0 var(--px) 0 var(--ink), var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink), var(--px) calc(var(--px) * 2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink);
  opacity: 0; transform: translateY(-60px);
}
.logo .big b { font-size: clamp(26px, 5.4vw, 64px); color: var(--sun); }
#login-ui.shown .logo b { animation: drop .6s cubic-bezier(.3, 1.6, .5, 1) forwards, bob 2.6s ease-in-out infinite; }
.logo b:nth-child(1) { animation-delay: .30s, 1.2s !important; } .logo b:nth-child(2) { animation-delay: .36s, 1.35s !important; }
.logo b:nth-child(3) { animation-delay: .42s, 1.5s !important; }  .logo b:nth-child(4) { animation-delay: .48s, 1.65s !important; }
.logo b:nth-child(5) { animation-delay: .54s, 1.8s !important; }  .logo b:nth-child(6) { animation-delay: .60s, 1.95s !important; }
.logo b:nth-child(7) { animation-delay: .66s, 2.1s !important; }  .logo b:nth-child(8) { animation-delay: .72s, 2.25s !important; }
@keyframes drop { to { opacity: 1; transform: translateY(0); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.tagline { margin: 12px 0 0; font-size: clamp(16px, 1.9vw, 22px); font-weight: 600; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); opacity: 0; transition: opacity .6s 1s; letter-spacing: .06em; }
#login-ui.shown .tagline { opacity: 1; }

#login-form {
  display: grid; gap: 8px; width: min(340px, 100%); padding: 16px 18px 18px; margin-top: auto;
  background: var(--paper); border: var(--px) solid var(--ink);
  box-shadow: 0 var(--px) 0 var(--ink), inset 0 calc(var(--px) * -1) 0 #e6d6b3, 8px 12px 0 rgba(22, 38, 58, .25);
  opacity: 0; transform: translateY(40px); transition: opacity .5s 1.1s, transform .5s 1.1s cubic-bezier(.3, 1.5, .5, 1);
}
#login-ui.shown #login-form { opacity: 1; transform: none; }
#login-form label { font-weight: 700; font-size: 15px; color: var(--ink-2); }
#login-form input {
  padding: 10px 12px; font-size: 20px; border: 3px solid var(--ink); background: #fff; color: var(--ink); outline: none;
  box-shadow: inset 3px 3px 0 #d9e4ee;
}
#login-form input:focus { border-color: var(--sea); box-shadow: inset 3px 3px 0 #d9e4ee, 0 0 0 3px var(--sun); }
#login-error { margin: 0; min-height: 1.1em; font-size: 14px; color: #c2331e; }
#login-form.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

/* botão START: placa de madeira de jangada */
.start {
  position: relative; cursor: pointer; border: var(--px) solid var(--ink); padding: 0; color: var(--paper);
  background: var(--wood); box-shadow: 0 6px 0 var(--ink), inset 0 var(--px) 0 var(--wood-hi), inset 0 calc(var(--px) * -2) 0 var(--wood-lo);
  font-family: var(--logo); font-size: 22px; letter-spacing: .08em; text-shadow: 3px 3px 0 var(--wood-lo);
  transition: transform .08s, box-shadow .08s;
}
.start span { display: block; padding: 16px 10px 14px; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .12) 46px 50px); }
.start::before, .start::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--sun); box-shadow: 0 0 0 3px var(--ink); }
.start::before { left: 10px; } .start::after { right: 10px; }
.start:hover { background: #9c6734; }
.start:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.start:active, #login-ui.leaving .start { transform: translateY(6px); box-shadow: 0 0 0 var(--ink), inset 0 var(--px) 0 var(--wood-hi), inset 0 calc(var(--px) * -2) 0 var(--wood-lo); }
#login-form .start { animation: pulse 1.6s ease-in-out 2s infinite; }
@keyframes pulse { 50% { filter: brightness(1.15); } }
.hint { margin: 12px 0 0; font-size: 14px; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); opacity: .9; }
#login-ui.leaving { transition: opacity .6s .2s; opacity: 0; }

/* ---------- mapa ---------- */
#map-labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
body:not([data-screen="map"]) #map-labels { display: none; }
.place { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 13px; font-weight: 600; color: #fff; text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink), 2px 2px 0 var(--ink); }
.place.big { font-size: 18px; font-weight: 700; color: var(--sun); }
.place.mark { color: #ffe9c4; font-style: italic; font-size: 12px; }
.spot-label {
  position: absolute; left: 0; top: 0; display: flex; gap: 4px; align-items: center; pointer-events: auto; cursor: pointer; white-space: nowrap;
  padding: 2px 8px 2px 4px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 13px; font-weight: 700;
}
.spot-label.near { background: var(--sun); animation: bob 1s ease-in-out infinite; }
.spot-label.market { color: var(--paper); background: var(--coral); }
.spot-label.market.near { color: var(--ink); background: var(--sun); }

#map-hud { position: fixed; inset: 0; pointer-events: none; transition: opacity .6s; }
#map-hud.intro { opacity: 0; }
#map-hud .card, .hud .card { position: absolute; pointer-events: auto; background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(22, 38, 58, .45); }
.who { top: 12px; left: 12px; display: flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; background: var(--sea); border: 3px solid var(--ink); }
.who .name { font-weight: 700; font-size: 18px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
/* som: liga e desliga (M) */
.snd {
  flex: none; width: 28px; height: 28px; padding: 0; cursor: pointer; font-size: 15px; line-height: 1;
  background: #fff; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink);
}
.snd:hover { background: #fff8e6; }
.snd:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.snd[aria-pressed="false"] { background: #e9e1cf; }
.trip .snd { align-self: flex-start; margin-left: 4px; }
.who .stats { display: flex; gap: 12px; font-size: 15px; }
.nav { top: 12px; right: 12px; padding: 6px; width: 212px; }
#minimap { display: block; width: 194px; height: auto; aspect-ratio: 320 / 230; image-rendering: pixelated; border: 2px solid var(--ink); cursor: crosshair; }
.navrow { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 2px 0; }
.north { font-weight: 700; color: var(--coral); }
/* biruta: mostrador do vento e o que o rumo da jangada rende */
.wind { display: flex; gap: 8px; align-items: center; padding: 6px 2px 0; cursor: help; }
#wind-dial { flex: none; width: 78px; height: 78px; }
.wd-sea { fill: #1f5fa8; stroke: var(--ink); stroke-width: 3; }
.wd-hole { fill: #2a78c4; }
.wd-nogo { fill: #d6452f; } .wd-reach { fill: #3fae4f; } .wd-run { fill: #e0a800; }
.wd-letter { font: 700 10px/1 var(--ui); fill: #fff6e3; text-anchor: middle; dominant-baseline: central; }
.wd-letter.n { fill: var(--sun); }
.wd-boat { fill: #fff6e3; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.wd-sock { stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.wd-sock.red { fill: #e8452f; } .wd-sock.white { fill: #fff6e3; }
.wd-pole { fill: #fff6e3; stroke: var(--ink); stroke-width: 1.6; }
.wind-info { display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.15; }
.wind-info b { font-size: 14px; white-space: nowrap; }
#wind-point { font-weight: 700; }
#wind-point.nogo { color: #b0391f; } #wind-point.reach { color: #1f6e3a; } #wind-point.run { color: #7a4f00; }
.wind-info small { font-size: 12px; color: var(--ink-2); }
.help { left: 12px; bottom: 12px; padding: 8px 12px; font-size: 13px; line-height: 1.5; }
.hud-min { display: none; }   /* recolher cartões: só no celular (regras no fim, até 700px) */

#sonar-btn {
  --cool: 0; position: absolute; right: 18px; bottom: 18px; width: 84px; height: 84px; border-radius: 50%; pointer-events: auto; cursor: pointer;
  border: var(--px) solid var(--ink); color: var(--ink); font-weight: 700; font-size: 14px; letter-spacing: .05em;
  background: conic-gradient(rgba(22, 38, 58, .55) calc(var(--cool) * 360deg), transparent 0), radial-gradient(circle, #bff7ff 0 30%, #5fd4e8 31% 60%, #2aa7c9 61%);
  box-shadow: 0 5px 0 var(--ink);
}
#sonar-btn:not(.cooling)::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid #bff7ff; animation: ping 1.8s ease-out infinite; }
@keyframes ping { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
#sonar-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
#sonar-btn span, #sonar-btn small { display: block; }
#sonar-btn small { font-size: 13px; line-height: 1; margin-top: 2px; }
#sonar-btn small:empty { display: none; }
#sonar-btn.locked { filter: grayscale(1) brightness(.92); }
#sonar-btn.locked::after { display: none; }
#sonar-btn:focus-visible, #journal-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

/* encomendas: botão do diário, selos (! nova · ? pronta) e o diário */
#journal-btn { right: 18px; bottom: 116px; display: flex; gap: 6px; align-items: center; padding: 6px 10px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink); }
#journal-btn:hover { background: #fff8e6; }
.qb {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; font: 400 10px/1 var(--logo); color: var(--ink);
  background: var(--sun); border: 2px solid var(--ink); animation: bob 1s ease-in-out infinite;
}
.qb[hidden] { display: none; }
.spot-label .qb { margin-left: 2px; }
.spot-label .qb:not(:empty) { font-size: 10px; }
.spot-label.rare { background: #fff3c4; border-color: #7a4f00; box-shadow: 2px 2px 0 #7a4f00; }
.spot-label.rare.near { background: var(--sun); }
#map-hud.modal::before { content: ''; position: absolute; inset: 0; background: rgba(15, 40, 70, .35); pointer-events: auto; }
#journal { z-index: 2; }
#journal-count { font-size: 15px; color: var(--ink-2); }
#journal .tabs { display: flex; gap: 6px; margin: 10px 0 4px; }
#journal [role="tab"] {
  padding: 5px 10px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink);
  background: #e9e1cf; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
#journal [role="tab"][aria-selected="true"] { background: var(--sun); }
#journal [role="tab"]:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
/* coleção de espécies */
.dex-sum { margin: 8px 0; font-size: 13px; color: var(--ink-2); }
.dex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dex li { display: grid; justify-items: start; gap: 2px; padding: 6px 8px 8px; background: #fff; border: 3px solid var(--ink); }
.dex img { height: 26px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.dex li.unknown img { filter: brightness(0) opacity(.3); }
.dex li.unknown { background: #f4efe2; }
.dex b { font-size: 14px; }
.dex small { font-size: 12px; line-height: 1.2; color: var(--ink-2); }
.dex small.tags { color: #7a4f00; }
.dex-junk { display: flex; gap: 6px; align-items: center; margin: 12px 0 0; font-size: 14px; font-weight: 700; color: #1f6e3a; }
.dex-junk img { height: 20px; image-rendering: pixelated; }
#journal h3 { margin: 14px 0 6px; font-family: var(--logo); font-size: 10px; font-weight: 400; letter-spacing: .04em; }
#journal .empty { margin: 0; font-size: 14px; font-style: italic; color: var(--ink-2); }
.jq { position: relative; display: grid; gap: 4px; padding: 8px 10px 10px; margin-bottom: 8px; background: #fff; border: 3px solid var(--ink); }
.jq.tracked { background: #fff8e0; box-shadow: inset 4px 0 0 var(--sun); }
.jq-head { display: grid; }
.jq-head b { font-size: 16px; }
.jq-head small, .jq-note { font-size: 13px; color: var(--ink-2); }
.jq-note { margin: 0; }
.jq-note.ready { font-weight: 700; color: #1f6e3a; }
.jq-tag { justify-self: start; font-size: 12px; font-weight: 700; color: #7a4f00; }
.jnew { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.jnew li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; font-size: 15px; }
.jnew small { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.jnew .qb { grid-row: span 2; animation: none; }
.jdone { margin: 0; font-size: 13px; color: #3f6b4a; }
.quest-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.quest-goals li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; font-size: 14px; line-height: 1.2; }
.quest-goals li::before { content: '▢'; flex: none; font: 700 13px/1 system-ui, sans-serif; }
.quest-goals li span { flex: 1; }
.quest-goals li b { flex: none; font-size: 13px; white-space: nowrap; }
.quest-goals li.done { color: #3f6b4a; }
.quest-goals li.done::before { content: '✓'; color: #1f6e3a; }
.quest-goals li.done span { text-decoration: line-through; text-decoration-thickness: 2px; }
#spot-quest { margin: -2px 0 10px; padding: 4px 8px; font-size: 14px; font-weight: 700; white-space: pre-line; background: #fff3c4; border: 2px dashed #b58a1a; }
.spot-label .traps { font-size: 11px; font-weight: 700; }
.spot-label .traps[hidden] { display: none; }
#spot-quest[hidden] { display: none; }
.chip.rare { background: #fff3c4; border-color: #7a4f00; }
.chip.likes { background: #ffe0c9; }
#spot-panel { left: 50%; bottom: 14px; width: min(420px, calc(100vw - 32px)); padding: 12px 14px 14px; transform: translate(-50%, calc(100% + 130px)); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
#spot-panel.open { transform: translate(-50%, 0); }
.spot-head { display: flex; gap: 10px; align-items: center; }
.spot-head .pin { font-size: 26px; }
#spot-title { margin: 0; font-size: 20px; }
#spot-depth { margin: 0; font-size: 13px; color: var(--ink-2); }
#spot-desc { margin: 8px 0; font-size: 15px; }
#spot-fish { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { padding: 2px 8px; font-size: 13px; font-weight: 600; background: #d8f3f8; border: 2px solid var(--ink); }
.chip.soon { opacity: .5; }
.start.small { width: 100%; font-size: 14px; }
.start.small span { padding: 12px 10px 10px; }

#toast {
  position: fixed; top: 76px; left: 50%; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; z-index: 20; max-width: calc(100vw - 32px);
  padding: 8px 14px; background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 600; border: 3px solid var(--paper); box-shadow: 0 0 0 3px var(--ink);
  transition: opacity .25s, transform .25s; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.good { background: #1f6e3a; }

/* ---------- encomenda acompanhada (todas as telas menos o login) ---------- */
#quest-track {
  position: fixed; left: 12px; top: 88px; z-index: 5; width: 262px; padding: 6px 10px 8px; pointer-events: auto;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(22, 38, 58, .45);
}
#quest-track[hidden], body[data-screen="login"] #quest-track, body.intro #quest-track, body.treating #quest-track { display: none; }
body[data-screen="boat"] #quest-track, body[data-screen="map"] #quest-track { top: 108px; }
body:has(.hud.modal) #quest-track, body:has(#map-hud.modal) #quest-track { opacity: .35; pointer-events: none; }
.qt-head { display: flex; gap: 6px; align-items: center; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); }
.qt-head b { flex: 1; font-size: 15px; }
.qt-head::after { content: '▾'; font-size: 13px; }
.qt-head:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
#quest-track.min .qt-head::after { content: '▸'; }
#quest-track.min .qt-body { display: none; }
#qt-who { margin: 0 0 4px; font-size: 12px; color: var(--ink-2); }
#qt-who[hidden] { display: none; }
#qt-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
#qt-goals:empty { display: none; }
#qt-goals li { display: flex; gap: 6px; align-items: baseline; font-size: 13px; line-height: 1.15; }
#qt-goals li::before { content: '▢'; flex: none; font: 700 12px/1 system-ui, sans-serif; }
#qt-goals li span { flex: 1; }
#qt-goals li b { flex: none; }
#qt-goals li.done { color: #3f6b4a; }
#qt-goals li.done::before { content: '✓'; color: #1f6e3a; }
#qt-note { margin: 5px 0 0; font-size: 12px; color: var(--ink-2); }
#quest-track.ready { background: #eaf8e4; border-color: #1f6e3a; }
#quest-track.ready #qt-note { font-weight: 700; color: #1f6e3a; }
#quest-track.flash { animation: flash .6s ease-out; }
@keyframes flash { 30% { background: var(--sun); } }
#quest-pop {
  position: fixed; left: 50%; top: 146px; z-index: 19; max-width: min(460px, calc(100vw - 32px)); padding: 6px 12px; pointer-events: none; text-align: center;
  font-size: 15px; font-weight: 700; background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  opacity: 0; transform: translate(-50%, -12px); transition: opacity .25s, transform .25s;
}
#quest-pop.show { opacity: 1; transform: translate(-50%, 0); }
#quest-pop.good { color: var(--paper); background: #1f6e3a; }
body[data-screen="login"] #quest-pop, body.treating #quest-pop { display: none; }

/* ---------- barco (preparo da pesca) ---------- */
/* ---------- barco e mercado: cenas de convés ---------- */
.hud { position: fixed; inset: 0; pointer-events: none; }
.hud.modal::before { content: ''; position: absolute; inset: 0; background: rgba(15, 40, 70, .35); pointer-events: auto; }
body:not([data-screen="boat"]):not([data-screen="market"]) #deck-ui { display: none; }
#deck-ui.dim { opacity: .35; }
#deck-ui.dim * { pointer-events: none !important; }
.trip { top: 12px; left: 12px; display: flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; max-width: calc(100vw - 300px); }
.back {
  flex: none; width: 40px; height: 40px; cursor: pointer; font-size: 22px; font-weight: 700; color: var(--paper);
  background: var(--wood); border: 3px solid var(--ink); box-shadow: inset 0 -3px 0 var(--wood-lo);
}
.back:hover { background: #9c6734; }
.back:focus-visible, .link:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
#boat-spot, #market-name { margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#boat-sub, #market-sub { margin: 0; font-size: 13px; color: var(--ink-2); }
#boat-stock { margin: 2px 0 0; font-size: 13px; font-weight: 600; }

.checklist { top: 12px; right: 12px; width: 262px; padding: 10px 12px 12px; }
.check-head { display: grid; gap: 2px; }
#boat-count, #market-cap, #catch-cap { float: right; color: var(--ink-2); }
.checklist h3 { margin: 0; font-family: var(--logo); font-size: 10px; font-weight: 400; letter-spacing: .04em; }
.link { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sea-deep); text-decoration: underline; text-underline-offset: 3px; }
#boat-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
#boat-steps li { display: flex; gap: 8px; align-items: center; font-size: 15px; line-height: 1.15; }
#boat-steps li::before {
  content: ''; flex: none; display: grid; place-items: center; width: 18px; height: 18px;
  font: 700 13px/1 system-ui, sans-serif; color: var(--ink); background: #fff; border: 3px solid var(--ink);
}
#boat-steps li.done { color: #3f6b4a; text-decoration: line-through; text-decoration-thickness: 2px; }
#boat-steps li.done::before { content: '✓'; background: var(--good); }
#boat-steps li.just::before { animation: pop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pop { from { transform: scale(.2); } }
#boat-next { margin: 8px 0 0; font-size: 14px; font-weight: 700; color: #1f6e3a; }
#boat-next:empty { display: none; }

#deck-prompt {
  position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; white-space: nowrap;
  font-size: 14px; font-weight: 700; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
#deck-prompt.show { display: flex; }
#deck-prompt .key { display: grid; place-items: center; min-width: 20px; height: 20px; font-family: var(--logo); font-size: 9px; font-weight: 400; color: var(--paper); background: var(--ink); }
#deck-prompt.blocked { padding-left: 8px; font-weight: 600; color: var(--ink-2); background: #e9e1cf; }
#deck-prompt.blocked .key { display: none; }
#deck-prompt .bar { position: absolute; left: -2px; right: -2px; top: 100%; display: none; height: 10px; margin-top: 4px; background: var(--ink); border: 2px solid var(--ink); }
#deck-prompt.working .bar { display: block; }
#deck-prompt .bar i { display: block; width: 0; height: 100%; background: var(--good); }
#deck-prompt.nope { animation: shake .35s; }

#deck-act {
  position: absolute; right: 18px; bottom: 18px; width: 84px; height: 84px; border-radius: 50%; pointer-events: auto; cursor: pointer;
  touch-action: none; -webkit-user-select: none; user-select: none;
  border: var(--px) solid var(--ink); color: var(--paper); font-family: var(--logo); font-size: 11px; text-shadow: 2px 2px 0 var(--wood-lo);
  background: radial-gradient(circle at 50% 40%, var(--wood-hi) 0 34%, var(--wood) 35%); box-shadow: 0 5px 0 var(--ink);
}
#deck-act.off { filter: grayscale(.8) brightness(.85); }
#deck-act.down { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }

.sheet { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 16px 18px 18px; }
.sheet h2 { margin: 0; font-family: var(--logo); font-size: 16px; font-weight: 400; line-height: 1.4; }
.sheet > p { margin: 6px 0 14px; font-size: 15px; color: var(--ink-2); }
#gear-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.gear-opt {
  display: grid; gap: 6px; align-content: start; padding: 10px 12px 12px; text-align: left; cursor: pointer; color: var(--ink);
  background: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform .08s, box-shadow .08s;
}
.gear-opt:hover { background: #fff8e6; }
.gear-opt:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.gear-opt:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.gear-opt:disabled { cursor: not-allowed; opacity: .5; box-shadow: 0 2px 0 var(--ink); }
.gear-opt.current { background: #fff3c4; }
.gname { font-size: 18px; font-weight: 700; }
.gdesc { font-size: 14px; color: var(--ink-2); }
.gfish { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.gfish .chip { display: inline-flex; align-items: center; gap: 4px; }
.gfish img { height: 14px; image-rendering: pixelated; }
.gnone { font-size: 13px; font-style: italic; }
#gear-soon { margin: 14px 0 0; font-size: 13px; }
#gear-soon:empty { display: none; }
@media (hover: none) { #deck-prompt .key { display: none; } #deck-prompt { padding-left: 8px; } }
#deck-prompt.alert { color: var(--paper); background: #c2331e; font-size: 16px; animation: pulse-alert .5s ease-in-out infinite alternate; }
#deck-prompt.alert .key { color: #c2331e; background: var(--paper); }
@keyframes pulse-alert { to { scale: 1.08; } }

/* pescaria: tensão da linha na briga e peixes da caixa com a cor do frescor */
#fish-gauge {
  position: absolute; left: 0; top: 0; display: grid; grid-template-columns: auto 90px; gap: 3px 6px; align-items: center; padding: 5px 7px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
#fish-gauge[hidden] { display: none; }
#fish-gauge .meter { display: block; height: 9px; background: #d9d0bb; border: 2px solid var(--ink); }
#fish-gauge .meter i { display: block; width: 0; height: 100%; background: var(--good); }
#fish-gauge .tension i.warn { background: var(--sun); }
#fish-gauge .tension i.danger { background: #c2331e; }
#fish-gauge .line i { background: var(--sea); }
.fish-chip { border-width: 3px; }
#catch-ice.warn { color: #c2331e; font-weight: 700; }
.gneed { font-size: 13px; font-weight: 700; color: #b0391f; }

/* mercado: caixa térmica e dinheiro */
.purse { top: 12px; right: 12px; width: 262px; padding: 10px 12px 12px; }
.purse h3 { margin: 0; font-family: var(--logo); font-size: 10px; font-weight: 400; letter-spacing: .04em; }
.cooler-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cooler-list .chip { display: inline-flex; align-items: center; gap: 4px; }
.cooler-list img { height: 14px; image-rendering: pixelated; }
.cooler-list .empty { font-size: 14px; font-style: italic; color: var(--ink-2); }
.purse-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 10px 0 0; padding-top: 8px; border-top: 2px dashed #d9c9a3; font-size: 15px; }
#market-money { font-size: 19px; }
/* conversa com quem encomenda */
.giver { display: flex; gap: 12px; align-items: center; }
.giver-face { flex: none; display: grid; place-items: center; width: 52px; height: 52px; font-size: 32px; background: var(--sea); border: 3px solid var(--ink); }
#quest-who { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
#quest-sheet .story { margin: 12px 0; padding: 8px 10px; font-size: 16px; line-height: 1.35; color: var(--ink); background: #fff; border: 2px solid var(--ink); }
#quest-goals .quest-goals li { font-size: 15px; }
.quest-reward { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: #7a4f00; }
.quest-reward:empty { display: none; }
.quest-actions { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.quest-actions .buy[hidden] { display: none; }
#quest-sheet .link[data-close] { margin-top: 0; }
.price-list li.rare { background: #fff8e0; }
.ptrend { margin-left: 6px; font-size: 12px; font-weight: 700; }
.ptrend.up { color: #1f6e3a; }
.ptrend.down { color: #b0391f; }
.plike { margin-left: 6px; padding: 0 4px; font-size: 12px; font-weight: 700; color: #7a4f00; background: #ffe0c9; border: 2px solid var(--ink); }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sheet-head b { font-size: 18px; white-space: nowrap; }
.sheet .link[data-close] { margin-top: 14px; }
.shop-list, .price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.shop-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; background: #fff; border: 3px solid var(--ink); }
.sicon { font-size: 24px; text-align: center; }
.shop-item b { display: block; font-size: 16px; }
.shop-item small { display: block; font-size: 13px; color: var(--ink-2); }
.shop-item small.have { margin-top: 2px; font-weight: 700; color: #1f6e3a; }
.buy {
  min-width: 96px; padding: 8px 10px; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--paper); white-space: nowrap;
  background: var(--wood); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 -3px 0 var(--wood-lo);
}
.buy:hover { background: #9c6734; }
.buy:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink), inset 0 -3px 0 var(--wood-lo); }
.buy:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.buy:disabled { cursor: not-allowed; color: var(--ink-2); background: #e9e1cf; box-shadow: 0 2px 0 var(--ink); transform: none; }
.price-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 5px 8px; font-size: 15px; background: #fff; border: 2px solid var(--ink); }
.pname { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pname img { height: 16px; image-rendering: pixelated; }
.pgear { font-size: 13px; color: var(--ink-2); }
.money-pop {
  position: absolute; transform: translate(-50%, -100%); font-family: var(--logo); font-size: 16px; color: var(--sun); pointer-events: none;
  text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 3px 3px 0 var(--ink); animation: pop-up 1.3s ease-out forwards;
}
@keyframes pop-up { from { opacity: 1; translate: 0 0; } 70% { opacity: 1; } to { opacity: 0; translate: 0 -60px; } }

/* ---------- bancada: tratar o peixe de perto ---------- */
#treat { position: fixed; inset: 0; z-index: 15; pointer-events: none; }   /* a tábua 3D é o canvas do jogo, por baixo */
#treat[hidden] { display: none; }
body.treating #world canvas { cursor: none; touch-action: none; }   /* a peixeira (ou a mão) é o cursor */
body.treating #deck-ui, body.treating #boat-hud { display: none; }
#treat .card { position: absolute; pointer-events: auto; background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(22, 38, 58, .45); }
.treat-info { top: 12px; left: 12px; width: min(340px, calc(100vw - 24px)); padding: 8px 12px 10px 8px; }
.treat-head { display: flex; gap: 10px; align-items: center; }
#treat-name { margin: 0; font-size: 18px; }
#treat-meta { margin: 0; font-size: 12px; color: var(--ink-2); }
#treat-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
#treat-steps li { padding: 2px 6px; font-size: 12px; font-weight: 700; background: #fff; border: 2px solid var(--ink); opacity: .55; }
#treat-steps li.now { opacity: 1; background: var(--sun); }
#treat-steps li.done { opacity: 1; background: var(--good); text-decoration: line-through; }
.treat-q, .treat-p { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 700; }
#treat .bar { display: block; flex: 1; height: 12px; background: #d9d0bb; border: 2px solid var(--ink); }
#treat .bar i { display: block; width: 0; height: 100%; background: var(--good); transition: width .15s; }
#treat-q.mid { background: var(--sun); }
#treat-q.bad { background: #c2331e; }
.treat-q .bar.hurt { animation: shake .3s; }
#treat-p { background: var(--sea); }
.treat-how { left: 50%; bottom: 12px; transform: translateX(-50%); width: min(580px, calc(100vw - 24px)); padding: 8px 12px 10px; font-size: 14px; }
.treat-how p { margin: 0; }
.treat-how b { font-family: var(--logo); font-size: 10px; font-weight: 400; }
/* a nota fica por cima da tábua: nunca pega o mouse (senão a faca some quando passa por baixo dela) */
#treat #treat-banner {
  left: 50%; top: 20%; display: grid; gap: 2px; padding: 10px 18px; text-align: center; pointer-events: none; visibility: hidden;
  opacity: 0; transform: translate(-50%, -20px); transition: opacity .25s, transform .25s, visibility 0s .25s;
}
#treat-banner.show { visibility: visible; opacity: 1; transform: translate(-50%, 0); color: var(--paper); background: #1f6e3a; transition: opacity .25s, transform .25s; }
#treat-banner b { font-size: 20px; }
#treat-banner span { font-size: 14px; }

/* ---------- fama, troféus e surpresas ---------- */
.fame { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: 12px; }
.fame b { color: #7a4f00; white-space: nowrap; }
.fame-bar { flex: 1; min-width: 60px; height: 8px; background: #d9d0bb; border: 2px solid var(--ink); }
.fame-bar i { display: block; width: 0; height: 100%; background: var(--sun); transition: width .4s; }
.fame.up { animation: flash .8s ease-out; }
.navrow.event { font-weight: 700; color: #7a4f00; cursor: help; }
.navrow.event[hidden] { display: none; }
#catch-streak { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: #b0391f; }
#catch-streak[hidden] { display: none; }
#catch-streak.pop { animation: pop .45s cubic-bezier(.3, 1.8, .5, 1); }
.fish-chip.rare { background: #fff3c4; }

/* cartão do troféu: o peixe erguido, o peso contando e os carimbos */
#trophy {
  position: fixed; left: 50%; top: 112px; z-index: 21; width: min(380px, calc(100vw - 32px)); padding: 10px 14px 12px; cursor: pointer; visibility: hidden;
  background: var(--paper); border: var(--px) solid var(--ink); box-shadow: 0 var(--px) 0 var(--ink), 8px 12px 0 rgba(22, 38, 58, .3);
  opacity: 0; transform: translate(-50%, -30px) scale(.8); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1), visibility 0s .35s;
}
#trophy.show { visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.tr-stamps { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tr-stamps:not(:empty) { margin-bottom: 6px; }
.stamp { padding: 4px 6px 3px; font: 400 11px/1 var(--logo); color: #b3261e; background: #fff; border: 3px solid #b3261e; opacity: 0; transform: rotate(-6deg); }
.stamp.gold { color: #7a4f00; background: #fff3c4; border-color: #7a4f00; }
#trophy.landed .stamp { animation: slam .32s cubic-bezier(.3, 1.6, .5, 1) forwards; }
#trophy.landed .stamp:nth-child(2) { animation-delay: .26s; }
#trophy.landed .stamp:nth-child(3) { animation-delay: .52s; }
#trophy.landed .stamp:nth-child(4) { animation-delay: .78s; }
@keyframes slam { from { opacity: 0; transform: rotate(-6deg) scale(2.8); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.tr-body { display: flex; gap: 12px; align-items: center; }
.tr-img { flex: none; width: 110px; height: 66px; object-fit: contain; image-rendering: pixelated; animation: bob 1.4s ease-in-out infinite; }
.tr-text { flex: 1; min-width: 0; }
.tr-kind { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.tr-name { margin: 0; font-size: 20px; line-height: 1.1; }
.tr-kg { margin: 2px 0 0; font-size: 15px; }
.tr-kg b { font: 400 18px/1 var(--logo); }
.tr-medal { display: inline-block; opacity: 0; }
#trophy.landed .tr-medal { opacity: 1; animation: pop .45s cubic-bezier(.3, 1.8, .5, 1); }
.tr-stars i { font-style: normal; font-size: 17px; color: #d9d0bb; }
#trophy.landed .tr-stars i.on { color: var(--sun); text-shadow: 1px 1px 0 var(--ink); }
.tr-sub { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: #1f6e3a; }
#trophy.shiny { background: linear-gradient(110deg, var(--paper) 38%, #fff3b8 50%, var(--paper) 62%) 0 0 / 250% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -250% 0; } }
#trophy.legend { width: min(440px, calc(100vw - 32px)); color: var(--paper); background: var(--ink); border-color: var(--sun); box-shadow: 0 0 0 var(--px) var(--ink), 8px 12px 0 rgba(22, 38, 58, .35); }
#trophy.legend .tr-kind, #trophy.legend .tr-sub { color: var(--sun); }
#trophy.legend .tr-img { width: 150px; height: 90px; filter: drop-shadow(0 0 6px #ffd35c); }

/* faixa: título novo, evento do mês, bênção */
#banner {
  position: fixed; left: 50%; bottom: 28%; z-index: 22; display: grid; justify-items: center; gap: 4px; max-width: calc(100vw - 32px); padding: 12px 22px 14px; pointer-events: none; text-align: center;
  color: var(--paper); background: var(--ink); border: var(--px) solid var(--sun); box-shadow: 0 0 0 var(--px) var(--ink), 8px 12px 0 rgba(22, 38, 58, .35);
  opacity: 0; transform: translate(-50%, -20px) scale(.9); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
#banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#banner.event { background: #1f5fa8; }
.bn-icon { font-size: 30px; line-height: 1; }
#banner b { font: 400 15px/1.4 var(--logo); color: var(--sun); }
#banner small { max-width: 440px; font-size: 15px; font-weight: 600; }

/* janela: boato, garrafa, baú, volta ao jogo */
#popup { position: fixed; inset: 0; z-index: 30; background: rgba(15, 40, 70, .45); }
#popup[hidden] { display: none; }
.pop-sheet {
  position: absolute; left: 50%; top: 50%; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 16px 18px 18px;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(22, 38, 58, .45); transform: translate(-50%, -50%); animation: pop .35s cubic-bezier(.3, 1.5, .5, 1);
}
.pop-sheet h2 { margin: 0; font: 400 14px/1.4 var(--logo); }
.pop-who { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pop-who:empty { display: none; }
.pop-body { display: grid; gap: 8px; margin-top: 12px; }
.pop-body p { margin: 0; font-size: 15px; line-height: 1.35; }
.pop-body .story { padding: 8px 10px; font-size: 16px; background: #fff; border: 2px solid var(--ink); }
.pop-body .hint { font-weight: 700; color: #7a4f00; }
.pop-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pop-lines li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; font-size: 15px; line-height: 1.3; }
.chart { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.bottle-note { font-style: italic; }
.bottle-count { font-weight: 700; color: #7a4f00; }
.chest-coins { font: 400 22px/1 var(--logo); color: #7a4f00; text-align: center; }

/* texto que sobe (combo, PERFEITO!, fama) */
#float-layer { position: fixed; inset: 0; z-index: 23; overflow: hidden; pointer-events: none; }
.float-text {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font: 400 14px/1 var(--logo); color: var(--paper);
  text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 3px 3px 0 var(--ink); animation: pop-up 1.2s ease-out forwards;
}
.float-text.gold { font-size: 18px; color: var(--sun); }
.float-text.combo { font-size: 12px; color: #bff7ff; }
.float-text.bad { color: #ff9a8a; }

/* bancada: a nota do trabalho */
#treat-banner .grade { font: 400 40px/1 var(--logo); color: var(--sun); text-shadow: 3px 3px 0 var(--ink); }
#treat-banner .grade.S { color: #ffe07a; animation: pop .5s cubic-bezier(.3, 1.8, .5, 1); }
#treat-banner .grade-stars { font-size: 18px; letter-spacing: 2px; color: var(--sun); }

/* diário e mural: coleção com medalhas, troféus, lendas e tesouros */
.dex .medals { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.dex .var { padding: 0 3px; font-size: 11px; font-weight: 700; color: #b89b62; border: 2px dashed #b89b62; }
.dex .var.got { color: #7a4f00; background: #fff3c4; border-style: solid; border-color: #7a4f00; }
.tro h3 { margin: 14px 0 6px; font: 400 10px/1.4 var(--logo); letter-spacing: .04em; }
.tro-fame { display: grid; gap: 4px; padding: 8px 10px; background: #fff; border: 3px solid var(--ink); }
.tro-fame b { font-size: 18px; }
.tro-fame small { font-size: 13px; color: var(--ink-2); }
.tro-fame .fame-bar { height: 12px; }
.tro-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tro-grid li { display: grid; gap: 2px; align-content: start; padding: 6px 8px 8px; background: #fff; border: 3px solid var(--ink); }
.tro-grid li.got { color: var(--paper); background: var(--ink); border-color: var(--sun); }
.tro-grid li.got small { color: #ffe9b0; }
.tro-grid li.unknown { background: #f4efe2; }
.tro-grid img { height: 26px; max-width: 100%; object-fit: contain; justify-self: start; image-rendering: pixelated; }
.tro-grid li.unknown img, .tro-grid li.heard img { filter: brightness(0) opacity(.35); }
.tro-grid b { font-size: 14px; }
.tro-grid small { font-size: 12px; line-height: 1.25; color: var(--ink-2); }
.tro-line { margin: 0; font-size: 14px; }

/* loja: enfeites da jangada */
.shop-sub { margin: 14px 0 6px; font: 400 10px/1.4 var(--logo); letter-spacing: .04em; }
.swatch { display: block; width: 30px; height: 30px; margin: 0 auto; border: 3px solid var(--ink); }
.shop-item .boat-name { display: flex; gap: 6px; margin-top: 4px; }
.shop-item .boat-name input { width: 130px; padding: 3px 6px; font-size: 14px; border: 2px solid var(--ink); }
.shop-item .boat-name button { padding: 2px 8px; cursor: pointer; font-weight: 700; background: var(--sun); border: 2px solid var(--ink); }

/* ---------- sem barras (tela cheia ou app instalado): o HUD foge do entalhe ---------- */
#login-ui { padding: calc(4vh + var(--safe-t)) calc(16px + var(--safe-r)) calc(3vh + var(--safe-b)) calc(16px + var(--safe-l)); }
#map-hud, .hud, #treat { inset: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
#map-hud.modal::before, .hud.modal::before { inset: calc(-1 * var(--safe-t)) calc(-1 * var(--safe-r)) calc(-1 * var(--safe-b)) calc(-1 * var(--safe-l)); }
#deck-prompt, #fish-gauge, .money-pop { margin: calc(-1 * var(--safe-t)) 0 0 calc(-1 * var(--safe-l)); }   /* presos a um ponto da cena 3D */
#quest-track { margin: var(--safe-t) 0 0 var(--safe-l); }
#toast, #quest-pop, #trophy { margin-top: var(--safe-t); }

/* ---------- tela cheia: cartão de papel com os quatro cantos desenhados ---------- */
.fs-btn {
  position: fixed; z-index: 25; top: 12px; right: 12px; margin: var(--safe-t) var(--safe-r) 0 0; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; cursor: pointer; background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(22, 38, 58, .45);
}
.fs-btn[hidden], body:not([data-screen="login"]):not([data-screen="map"]) .fs-btn, body.intro .fs-btn, body:has(#map-hud.modal) .fs-btn { display: none; }
.fs-btn:hover { background: #fff8e6; }
.fs-btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 rgba(22, 38, 58, .45); }
.fs-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
/* cantos para fora: abrir a tela cheia */
.fs-ico {
  --c: var(--ink); width: 18px; height: 18px;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / 7px 3px, linear-gradient(var(--c) 0 0) 0 0 / 3px 7px,
    linear-gradient(var(--c) 0 0) 100% 0 / 7px 3px, linear-gradient(var(--c) 0 0) 100% 0 / 3px 7px,
    linear-gradient(var(--c) 0 0) 0 100% / 7px 3px, linear-gradient(var(--c) 0 0) 0 100% / 3px 7px,
    linear-gradient(var(--c) 0 0) 100% 100% / 7px 3px, linear-gradient(var(--c) 0 0) 100% 100% / 3px 7px;
  background-repeat: no-repeat;
}
/* cantos para dentro: sair */
.fs-btn.on .fs-ico {
  background-position: 0 4px, 4px 0, 100% 4px, calc(100% - 4px) 0, 0 calc(100% - 4px), 4px 100%, 100% calc(100% - 4px), calc(100% - 4px) 100%;
}
body[data-screen="map"] .fs-btn { right: 236px; }   /* ao lado do cartão de navegação */
.fs-tip {
  position: fixed; z-index: 26; top: 64px; right: 12px; margin: var(--safe-t) var(--safe-r) 0 0; width: min(300px, calc(100vw - 24px)); padding: 10px 14px 6px;
  font-size: 15px; line-height: 1.35; background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(22, 38, 58, .45);
}
.fs-tip[hidden], body:not([data-screen="login"]):not([data-screen="map"]) .fs-tip { display: none; }
.fs-tip p { margin: 0; }
.fs-tip .link { min-height: 44px; font-size: 15px; }

/* ---------- cortina de nuvens ---------- */
#wipe { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
#wipe i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 60%, #e3f1fb 61%); transform: translateX(-140vw) scale(.6);
}
#wipe:not(.cover):not(.uncover):not(.hold) i { visibility: hidden; }   /* em retrato, -140vw não tira as nuvens grandes da tela */
#wipe.cover, #wipe.hold { pointer-events: auto; }
#wipe.hold i { transform: none; }   /* chegou da landing com as nuvens fechadas */
#wipe.cover i { animation: cloud-in .7s cubic-bezier(.5, 0, .3, 1) var(--d) forwards; }
#wipe.uncover i { transform: none; animation: cloud-out .8s cubic-bezier(.6, 0, .6, 1) var(--d) forwards; }
@keyframes cloud-in { from { transform: translateX(-140vw) scale(.6); } to { transform: none; } }
@keyframes cloud-out { from { transform: none; } to { transform: translateX(140vw) scale(.6); } }

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .help { display: none; }
  #journal-btn { right: auto; left: 12px; bottom: 18px; }
  #quest-track { top: 80px; width: min(262px, calc(100vw - 186px)); padding: 4px 8px 6px; }
  body[data-screen="boat"] #quest-track, body[data-screen="market"] #quest-track { top: 92px; width: min(262px, calc(100vw - 24px)); }
  #qt-who { display: none; }
  .nav { width: 150px; } #minimap { width: 132px; }
  .wind { gap: 5px; } #wind-dial { width: 54px; height: 54px; } .wind-info { font-size: 11px; } .wind-info b { font-size: 12px; } .wind-info small { font-size: 10px; }
  .nav .navrow:first-of-type { display: none; }   /* coordenadas: sem espaço no celular */
  .who { max-width: calc(100vw - 186px); padding-right: 8px; }
  .who .stats { flex-wrap: wrap; gap: 2px 8px; font-size: 13px; }
  .who .name { max-width: 100px; }
  #sonar-btn { width: 70px; height: 70px; }
  #spot-panel { bottom: 100px; }
  .trip { max-width: calc(100vw - 24px); padding: 6px 10px 6px 6px; }
  .back { width: 44px; height: 44px; }
  #boat-spot, #market-name { font-size: 16px; }
  .purse { top: auto; bottom: 12px; left: 12px; right: 106px; width: auto; padding: 8px 10px 10px; }
  .shop-item { grid-template-columns: 28px 1fr; }
  .shop-item .buy { grid-column: 1 / -1; }
  .checklist { top: auto; bottom: 12px; left: 12px; right: 106px; width: auto; padding: 8px 10px 10px; }
  #boat-steps { gap: 4px; margin-top: 6px; }
  #boat-steps li { font-size: 13px; }
  #boat-steps li.done, #boat-steps li:not(.done) ~ li { display: none; }   /* só o próximo passo */
  #deck-act { width: 76px; height: 76px; right: 14px; bottom: 14px; }

  /* ---- cartões que recolhem (hudmin.js). Aberto: uma aba presa na borda recolhe o cartão.
     Recolhido: o cartão inteiro é o botão, e a seta mostra para onde ele abre. */
  .hud-min {
    display: block; position: absolute; right: 10px; bottom: -25px; width: 44px; height: 22px; padding: 0; cursor: pointer;
    background: var(--paper); border: 3px solid var(--ink); border-top: 0; box-shadow: 3px 3px 0 rgba(22, 38, 58, .45);
  }
  .hud-min::before { content: ''; position: absolute; inset: -12px -3px -10px; }   /* alvo de toque de 44px */
  .hud-min::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -4px 0 0 -6px;
    border: 6px solid transparent; border-top: 0; border-bottom: 7px solid var(--ink);   /* ▲ recolhe para cima */
  }
  .hud-min:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
  [data-min-edge="top"] > .hud-min { bottom: auto; top: -25px; border-top: 3px solid var(--ink); border-bottom: 0; box-shadow: 3px -3px 0 rgba(22, 38, 58, .45); }
  [data-min-edge="top"] > .hud-min::after { rotate: 180deg; }   /* ▼ recolhe para baixo */
  .min > .hud-min { inset: 0; width: auto; height: auto; background: none; border: 0; box-shadow: none; }
  .min > .hud-min::before { inset: 0; }
  .min > .hud-min::after { left: auto; right: 9px; rotate: 180deg; }   /* ▼ abre para baixo */
  [data-min-edge="top"].min > .hud-min::after { rotate: 0deg; }       /* ▲ abre para cima */

  /* navegação: só a biruta, redonda, e se a vela rende */
  #map-hud .nav.min { width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
  .nav.min #minimap, .nav.min .navrow, .nav.min .wind-info > b, .nav.min .wind-info > small { display: none; }
  .nav.min .wind { flex-direction: column; align-items: flex-end; gap: 3px; padding: 0; }
  .nav.min #wind-dial { width: 64px; height: 64px; filter: drop-shadow(3px 3px 0 rgba(22, 38, 58, .45)); }
  .nav.min #wind-point { padding: 3px 24px 2px 7px; font-size: 13px; white-space: nowrap; background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(22, 38, 58, .45); }
  /* só a biruta e a etiqueta recebem toque: o canto vazio deixa passar para o cartão do jangadeiro */
  #map-hud .nav.min { pointer-events: none; }
  .nav.min #wind-dial, .nav.min .wind-info { pointer-events: auto; cursor: pointer; }
  .nav.min > .hud-min { inset: 0 0 auto auto; width: 64px; height: 64px; border-radius: 50%; pointer-events: auto; }
  .nav.min > .hud-min::after { display: none; }
  .nav.min #wind-point { position: relative; }
  .nav.min #wind-point::after {
    content: ''; position: absolute; right: 7px; top: 50%; width: 0; height: 0; margin-top: -3px;
    border: 6px solid transparent; border-bottom: 0; border-top: 7px solid var(--ink);
  }
  /* jangadeiro: uma linha com dinheiro, caixa e gelo */
  #map-hud .who.min { max-width: calc(100vw - 104px); padding: 7px 30px 7px 10px; }
  .who.min .avatar, .who.min .name-row, .who.min .fame { display: none; }
  .who.min .stats { flex-wrap: nowrap; gap: 10px; font-size: 14px; white-space: nowrap; }
  #map-hud:has(.nav:not(.min)) .who.min { max-width: calc(100vw - 186px); }   /* mapa aberto ao lado: quebra a linha */
  #map-hud:has(.nav:not(.min)) .who.min .stats { flex-wrap: wrap; gap: 2px 10px; }
  body[data-screen="map"]:has(#map-hud .who.min) #quest-track { top: 62px; }
  body[data-screen="map"]:has(#map-hud .who:not(.min)) #quest-track { top: 152px; }
  body[data-screen="map"]:has(#map-hud .who.min):has(#map-hud .nav:not(.min)) #quest-track { top: 82px; }   /* a linha quebrou em duas */
  /* convés: faixa com a volta e o nome do pesqueiro; a seta não cobre o botão de voltar */
  #boat-hud .trip.min { right: auto; padding: 5px 34px 5px 5px; }
  .trip.min #boat-sub, .trip.min #boat-stock, .trip.min .snd { display: none; }
  .trip.min > .hud-min { left: 52px; }
  body[data-screen="boat"]:has(#boat-hud .trip.min) #quest-track { top: 76px; }
  body[data-screen="boat"]:has(#boat-hud .trip:not(.min)) #quest-track { top: 150px; }
  /* antes de pescar: só o próximo passo */
  #boat-hud .checklist.min { padding: 8px 30px 8px 10px; }
  .checklist.min .check-head { display: none; }
  .checklist.min #boat-steps, .checklist.min #boat-next { margin: 0; }
  /* caixa térmica: quantos peixes, gelo e isca numa linha */
  #boat-hud .purse.min:not([hidden]) { display: flex; align-items: center; gap: 12px; padding: 8px 30px 8px 10px; }
  .purse.min .check-head .link, .purse.min #catch-list, .purse.min #catch-streak { display: none; }
  .purse.min .check-head h3 { font-size: 0; white-space: nowrap; }
  .purse.min #catch-cap { float: none; font: 700 15px/1 var(--ui); color: var(--ink); }
  .purse.min #catch-cap::before { content: '🐟 '; }
  .purse.min .purse-row { flex: 1; gap: 10px; margin: 0; padding: 0; border: 0; font-size: 14px; white-space: nowrap; }

  /* brigando com o peixe, a tensão sobre a cabeça do jangadeiro vale mais que a encomenda */
  body:has(#fish-gauge:not([hidden])) #quest-track { visibility: hidden; }
  /* tela cheia: ao lado do sonar, onde o polegar alcança */
  body[data-screen="map"] .fs-btn { top: auto; right: 98px; bottom: 31px; margin: 0 var(--safe-r) var(--safe-b) 0; }
  body[data-screen="map"] .fs-tip { top: auto; bottom: 88px; margin: 0 var(--safe-r) var(--safe-b) 0; }
}
/* celular deitado: os cartões ficam nos cantos e o meio do mar e do convés fica livre */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .purse, .checklist { right: auto; width: min(300px, calc(100vw - 130px)); }
  #boat-hud .checklist.min, #boat-hud .purse.min { width: auto; max-width: min(340px, calc(100vw - 130px)); }
  /* pesqueiro: na coluna da esquerda, sobre o Diário; a jangada fica no meio da tela */
  #spot-panel { left: 12px; bottom: 12px; width: min(300px, calc(50vw - 60px)); transform: translate(0, calc(100% + 130px)); }
  #spot-panel.open { transform: none; }
  #spot-desc { display: none; }
  /* mapa aberto: minimapa à esquerda e o vento à direita, baixo o bastante para não chegar ao sonar */
  #map-hud .nav:not(.min) { display: grid; grid-template-columns: 132px 150px; column-gap: 10px; align-items: start; width: auto; }
  .nav:not(.min) #minimap { grid-row: 1 / span 5; }
  .nav:not(.min) .navrow { padding-top: 0; }
  #map-hud:has(.nav:not(.min)) .who.min { max-width: calc(100vw - 340px); }
  #map-hud:has(.nav:not(.min)) .who.min .stats { flex-wrap: nowrap; }
  body[data-screen="map"]:has(#map-hud .who.min):has(#map-hud .nav:not(.min)) #quest-track { top: 62px; }
  /* login: logo à esquerda (o diorama fica embaixo dele, ver login.js) e o formulário à direita */
  #login-ui { display: grid; grid-template-columns: 1fr min(320px, 42vw); grid-template-rows: auto auto 1fr auto; column-gap: 24px; align-items: start; }
  #login-ui .logo { grid-column: 1; justify-self: center; }
  #login-ui .tagline { grid-column: 1; justify-self: center; margin-top: 6px; font-size: 15px; }
  #login-form { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 100%; margin: 48px 0 0; }
  #login-ui .hint { grid-column: 2; grid-row: 4; justify-self: center; margin-top: 8px; }
}
@media (max-width: 380px) {
  .purse.min #catch-bait { display: none; }   /* sem espaço: a isca aparece ao abrir */
}
@media (prefers-reduced-motion: reduce) {
  .logo b, #login-form .start, .spot-label.near, #sonar-btn::after, #boat-steps li.just::before, .qb, #quest-track.flash { animation: none !important; opacity: 1; transform: none; }
  #deck-prompt.nope, #deck-prompt.alert, .money-pop { animation: none; }
}

/* ---------- mancha de lixo no mapa ---------- */
.spot-label.polluted { background: #dcd6c2; border-color: #3a3a26; box-shadow: 2px 2px 0 #3a3a26; }
.spot-label.polluted.near { background: var(--sun); }
.spot-label.polluted .left { min-width: 18px; padding: 0 3px; font: 400 9px/16px var(--logo); text-align: center; color: var(--paper); background: #4a4a32; }
.chip.junk { background: #e4dfcf; border-color: #3a3a26; }

/* ---------- jornal: o botão (acima do diário) e a Gazeta da Maré ---------- */
#news-btn { right: 18px; bottom: 162px; display: flex; gap: 6px; align-items: center; padding: 6px 10px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink); }
#news-btn:hover { background: #fff8e6; }
#news-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.np-ico { display: block; flex: none; }
#news { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(15, 40, 70, .5); }
#news[hidden] { display: none; }
.np {
  --pad-x: 20px; --pad-b: 18px;
  width: min(580px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 12px var(--pad-x) var(--pad-b); color: var(--ink);
  background: #f2e8d0 radial-gradient(rgba(22, 38, 58, .08) 1px, transparent 1.2px) 0 0 / 4px 4px;   /* retícula do papel de jornal */
  border: 3px solid var(--ink); box-shadow: 6px 8px 0 rgba(22, 38, 58, .45); rotate: -1deg;
}
.np.spin { animation: np-spin .6s cubic-bezier(.2, .9, .3, 1.12) both; }   /* chega rodando, como nos filmes */
.np.turn { animation: np-turn .25s ease-out; }
@keyframes np-spin { from { transform: scale(.08) rotate(-900deg); opacity: 0; } 25% { opacity: 1; } }
@keyframes np-turn { from { transform: translateX(12px); opacity: .3; } }
.np-mast { text-align: center; border-bottom: 1px solid var(--ink); }
.np-name { margin: 0; padding: 6px 0 4px; font: 400 clamp(18px, 4.6vw, 26px)/1.2 var(--logo); letter-spacing: .04em; border-bottom: 5px double var(--ink); }
.np-motto { margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--ink-2); }
.np-ed { margin: 4px 0 0; padding: 3px 0; font-size: 12px; font-weight: 700; letter-spacing: .03em; border-top: 1px solid var(--ink); }
.np-kicker { display: inline-block; margin: 12px 0 6px; padding: 3px 6px; font: 400 10px/1.3 var(--logo); color: var(--paper); background: #c2331e; }
.np[data-kind="clean"] .np-kicker { background: #1f6e3a; }
.np[data-kind="aid"] .np-kicker { background: var(--sea-deep); }
.np-head { margin: 0; font: 400 clamp(14px, 3.4vw, 18px)/1.45 var(--logo); }
.np-lead { margin: 8px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.np-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 12px; }
.np-body:has(.np-fig[hidden]) { grid-template-columns: 1fr; }
.np-fig { margin: 0; padding: 4px; background: #fff; border: 2px solid var(--ink); rotate: 1.2deg; }
.np-fig[hidden] { display: none; }
.np-fig figcaption { margin-top: 4px; font-size: 12px; font-weight: 700; line-height: 1.25; }
.np-text p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
.np-text p:first-child::first-letter { float: left; margin: 3px 6px 0 0; font: 400 26px/1 var(--logo); }   /* capitular */
.np-more { display: grid; gap: 2px; margin-top: 12px; padding-top: 8px; border-top: 3px double var(--ink); }
.np-more[hidden] { display: none; }
.np-more > b { font: 400 9px/1.4 var(--logo); letter-spacing: .04em; }
.np-item { display: grid; gap: 1px; padding: 6px 4px; text-align: left; cursor: pointer; color: var(--ink); background: none; border: 0; border-bottom: 1px dashed #b8a67e; }
.np-item:hover { background: #fff8e6; }
.np-item:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }
.np-item small { font: 400 8px/1.4 var(--logo); color: #b0391f; }
.np-item span { font-size: 15px; font-weight: 700; }
.np-item.new span::after { content: ' • nova'; font-size: 12px; color: #b0391f; }
#np-close[hidden] { display: none; }
.np > .quest-actions {   /* botões presos embaixo: à vista mesmo com a notícia comprida */
  position: sticky; bottom: calc(-1 * var(--pad-b)); margin: 14px calc(-1 * var(--pad-x)) calc(-1 * var(--pad-b)); padding: 10px var(--pad-x) var(--pad-b);
  background: #f2e8d0; border-top: 1px solid var(--ink);
}

/* ---------- totem do auxílio: a câmera chega perto e a tela ocupa o monitor ---------- */
body.at-totem #market-hud, body.at-totem #deck-ui, body.at-totem #quest-track { visibility: hidden; }
#totem {
  position: fixed; inset: 0; z-index: 28; display: grid; place-items: center;
  padding: max(12px, var(--safe-t)) max(12px, var(--safe-r)) max(12px, var(--safe-b)) max(12px, var(--safe-l));
  background: radial-gradient(ellipse at center, rgba(8, 20, 34, .3), rgba(8, 20, 34, .8));
}
#totem[hidden] { display: none; }
#totem.on { animation: tm-fade .3s ease-out both; }
#totem.off { animation: tm-fade-out .28s ease-in both; }
#totem.on .tm-bezel { animation: tm-in .38s cubic-bezier(.2, .9, .3, 1.1) both; }
#totem.off .tm-bezel { animation: tm-out .28s ease-in both; }
#totem.on .tm-screen { animation: tm-power .45s .22s steps(9) both; }
@keyframes tm-fade { from { opacity: 0; } }
@keyframes tm-fade-out { to { opacity: 0; } }
@keyframes tm-in { from { transform: translateY(18%) scale(.3); opacity: 0; } }
@keyframes tm-out { to { transform: translateY(18%) scale(.3); opacity: 0; } }
@keyframes tm-power { from { clip-path: inset(50% 0); filter: brightness(3); } 45% { clip-path: inset(49% 0); } to { clip-path: inset(0); filter: none; } }   /* tela de tubo ligando: uma linha que abre */
.tm-bezel {
  position: relative; display: flex; flex-direction: column; width: min(720px, 100%); height: min(560px, 100%); padding: 8px 14px 24px;
  background: linear-gradient(#3a4d69, #2d3e57); border: 4px solid var(--ink);
  box-shadow: inset 0 3px 0 #5a7090, inset 0 -5px 0 #1d2a3d, 8px 12px 0 rgba(0, 0, 0, .35);
}
.tm-top { display: flex; align-items: center; justify-content: center; gap: 10px; height: 16px; margin-bottom: 6px; font: 400 8px/1 var(--logo); letter-spacing: .12em; color: #9fb3cc; }
.tm-cam { width: 8px; height: 8px; background: #0a1420; box-shadow: 0 0 0 2px #1d2a3d; }
.tm-led { width: 8px; height: 8px; background: #7fe08a; box-shadow: 0 0 6px #7fe08a; animation: tm-blink 1.4s steps(2) infinite; }
@keyframes tm-blink { 50% { opacity: .25; } }
.tm-grille { position: absolute; left: 50%; bottom: 8px; width: 96px; height: 8px; transform: translateX(-50%); background: repeating-linear-gradient(90deg, #1d2a3d 0 4px, transparent 4px 7px); }
.tm-screen {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  color: #eaf6ff; background: #0b3b74; border: 4px solid #0a1420; box-shadow: inset 0 0 0 2px #1f5fa8;
}
.tm-screen::after {   /* linhas da tela e cantos escuros */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .16) 2px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .35));
}
.tm-bar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--sun); }
.tm-bar b { font: 400 11px/1 var(--logo); }
.tm-bar span:last-child { margin-left: auto; white-space: nowrap; }
.tm-page { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 18px; }
.tm-page.flip { animation: tm-flip .24s steps(4); }
@keyframes tm-flip { from { opacity: .2; transform: translateY(6px); } }
.tm-foot { padding: 5px 12px; font-size: 12px; color: #bff7ff; background: #082a55; border-top: 2px solid #1f5fa8; }
.tm-foot .touch { display: none; }
@media (hover: none) { .tm-foot .keys { display: none; } .tm-foot .touch { display: inline; } }
.tm-h { margin: 0 0 8px; font: 400 15px/1.45 var(--logo); color: var(--sun); }
.tm-page p { margin: 0 0 10px; font-size: 16px; line-height: 1.35; }
.tm-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 6px 10px; font-weight: 700; background: #082a55; border: 2px solid #1f5fa8; }
.tm-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.tm-opt {
  display: flex; gap: 10px; align-items: center; min-height: 58px; padding: 8px 12px; text-align: left; cursor: pointer;
  color: var(--ink); background: #bff7ff; border: 3px solid #0a1420; box-shadow: 0 4px 0 #0a1420;
}
.tm-opt.main { grid-column: 1 / -1; background: var(--sun); }
.tm-opt:hover, .tm-opt:focus { background: var(--paper); outline: 3px solid #fff; outline-offset: 2px; }
.tm-opt:active { transform: translateY(3px); box-shadow: 0 1px 0 #0a1420; }
.tm-ico { flex: none; width: 30px; font-size: 24px; text-align: center; }
.tm-txt { display: grid; gap: 2px; }
.tm-txt b { font-size: 17px; }
.tm-txt small { font-size: 13px; color: var(--ink-2); }
.tm-stamp { display: inline-block; margin: 4px 0 12px !important; padding: 6px 12px; font: 400 18px/1 var(--logo) !important; color: #7fe08a; border: 4px solid currentColor; rotate: -4deg; animation: tm-stamp .35s cubic-bezier(.3, 1.8, .5, 1) both; }
.tm-stamp.gold { color: var(--sun); }
@keyframes tm-stamp { from { transform: scale(2.2); opacity: 0; } }
.tm-big { font: 400 26px/1.2 var(--logo) !important; color: var(--sun); }
.tm-tip { padding: 6px 10px; font-weight: 700; color: var(--ink); background: #bff7ff; border-left: 6px solid var(--sun); }
.tm-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.tm-dots i { width: 26px; height: 26px; border: 3px solid #bff7ff; }
.tm-dots i.on { background: #7fe08a; border-color: #7fe08a; box-shadow: inset 0 0 0 3px #0b3b74; }
.tm-map { margin: 0 0 10px; }
.tm-map canvas { border: 3px solid #bff7ff; }
.tm-map figcaption { margin-top: 4px; font-size: 12px; color: #bff7ff; }
.tm-rules { display: grid; gap: 6px; margin: 0 0 6px; padding-left: 20px; font-size: 16px; line-height: 1.35; }

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  #news-btn { right: auto; left: 12px; bottom: 62px; }
  .np { --pad-x: 14px; --pad-b: 14px; padding-top: 10px; rotate: 0deg; }
  .np-body { grid-template-columns: 1fr; }
  .tm-bezel { height: min(680px, 100%); padding: 6px 8px 20px; }
  .tm-page { padding: 12px; }
  .tm-menu { grid-template-columns: 1fr; }
  .tm-opt { min-height: 50px; }
  .tm-bar span:nth-child(2) { display: none; }   /* sem espaço: fica o relógio */
}
@media (prefers-reduced-motion: reduce) {
  .np.spin, .np.turn, #totem.on, #totem.off, #totem .tm-bezel, #totem .tm-screen, .tm-page.flip, .tm-stamp, .tm-led { animation: none !important; }
}