/* =========================================================
   Iceberg Corporation — Estilo Visual Cartoon Pop & Limpo (v4)
   - Iceberg Ilustrado Vivo com Pinguins e Construções
   - Árvore Tecnológica Modular
   - Paleta HQ Polar com contornos escuros e sombras sólidas
   ========================================================= */

:root {
  --ink: #14283b;            /* Contorno cartoon estilo quadrinhos */
  --ink-shadow: #0c1a26;
  --sky-top: #5fc4f3;        /* Céu polar claro */
  --sky-bot: #288bc9;
  --ice-white: #ffffff;
  --ice-blue: #eef8ff;
  --ice-card: #f8fcff;
  --sun-gold: #ffcf33;       /* Destaque dourado */
  --gold-shadow: #c99c09;
  --coral-red: #ff5468;
  --mint-green: #25d488;
  --royal-blue: #3a86ff;
  --purple-pop: #9b5de5;

  /* Cores de Raridade dos Peixes */
  --tier-comum: #8aa4b8;
  --tier-incomum: #20bf6b;
  --tier-raro: #2d98da;
  --tier-epico: #9b5de5;
  --tier-lendario: #f7b731;

  --cartoon-border: 3px solid var(--ink);
  --box-shadow-pop: 0 6px 0 var(--ink-shadow);
  --btn-shadow: 0 4px 0 var(--ink-shadow);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

[hidden], [hidden="true"] {
  display: none !important;
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: 'Fredoka', 'Nunito', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.45) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(255, 207, 51, 0.25) 0%, transparent 40%),
    linear-gradient(180deg, var(--sky-top) 0%, #3ca2db 50%, var(--sky-bot) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  padding-bottom: 30px;
}

h1, h2, h3, h4 {
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  margin: 0;
  line-height: 1.15;
}

/* ---------- Neve Cartoon ---------- */
.snow-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.snow-dot {
  position: absolute;
  top: -12px;
  background: white;
  border-radius: 50%;
  opacity: 0.75;
  border: 1px solid rgba(20, 40, 59, 0.15);
  animation: fallCartoon linear infinite;
}
.snow-layer.sakura-event .snow-dot {
  background: #f9a8d4;
  border-color: rgba(190, 24, 93, 0.28);
  border-radius: 70% 15% 70% 50%;
  opacity: 0.9;
}
.snow-layer.beach-event { display: none !important; }
/* Efeito de Tempestade: Neve vira Chuva rápida, céu escuro e raios no fundo */
.snow-layer.storm-event {
  background: radial-gradient(circle at 50% 20%, rgba(15, 23, 42, 0.45) 0%, rgba(2, 6, 23, 0.72) 100%);
}
.snow-layer.storm-event .snow-dot {
  width: 2.2px !important;
  height: 24px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(56, 189, 248, 0.85) 60%, rgba(186, 230, 253, 0.95) 100%) !important;
  border-radius: 2px !important;
  border: none !important;
  opacity: 0.88 !important;
  transform: rotate(15deg) !important;
  animation-duration: 0.5s !important;
}
.snow-layer.storm-event::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(224, 242, 254, 0.65);
  opacity: 0;
  animation: stormLightning 4.8s infinite;
  z-index: 2;
}
/* Nevasca: flocos maiores e mais rápidos, com névoa clara por cima */
.snow-layer.snow-event {
  background: radial-gradient(circle at 50% 0%, rgba(226, 238, 248, 0.28) 0%, rgba(203, 223, 240, 0.42) 100%);
}
.snow-layer.snow-event .snow-dot {
  opacity: 0.95;
  border-color: rgba(125, 170, 205, 0.5);
  animation-duration: 3.2s !important;
  transform: scale(1.35);
}
@keyframes stormLightning {
  0%, 86%, 90%, 94%, 100% { opacity: 0; }
  87% { opacity: 0.75; }
  88% { opacity: 0.1; }
  89% { opacity: 0.95; }
  92% { opacity: 0.6; }
}

/* Quando qualquer modal estiver aberto (Upgrades, Receitas, Manual, Reiniciar, etc.), congela animações de fundo */
body.modal-frozen .snow-dot,
body.modal-frozen .snow-layer::before,
body:has(.cartoon-modal:not([hidden])) .snow-dot,
body:has(.cartoon-modal:not([hidden])) .snow-layer::before,
body:has(#merchantMailModal:not([hidden])) .snow-dot,
body:has(#merchantMailModal:not([hidden])) .snow-layer::before {
  animation-play-state: paused !important;
}
@keyframes fallCartoon {
  to { transform: translateY(110vh); }
}

/* ---------- Topbar Limpa ---------- */
.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  background: #ffffff;
  border-bottom: var(--cartoon-border);
  box-shadow: 0 4px 0 rgba(12, 26, 38, 0.2);
  flex-wrap: wrap;
}

.brand-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-badge {
  font-size: 32px;
  background: var(--ice-blue);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  box-shadow: 0 3px 0 var(--ink);
}

.comic-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--royal-blue);
  text-shadow: 1.5px 1.5px 0 var(--sun-gold);
}
.comic-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: #607d8b;
  display: block;
}

/* Trilha das 5 Semanas */
.week-track {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.week-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ice-blue);
  border: 2.5px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 2.5px 0 var(--ink-shadow);
  cursor: default;
  transition: background-color 0.15s, border-color 0.15s;
}
.week-pill .ico { font-size: 16px; }
.week-pill.current {
  background: var(--sun-gold);
  border-color: var(--ink);
  box-shadow: 0 3.5px 0 var(--ink-shadow);
  transform: none;
  font-weight: 800;
}
.week-pill.done {
  background: #dceaf2;
  opacity: 0.6;
  text-decoration: line-through;
  box-shadow: none;
}

/* Botões Cartoon */
.top-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  border: var(--cartoon-border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  opacity: 0.90;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  opacity: 1;
}
.btn:active:not(:disabled) {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--ink-shadow) !important;
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
}

.cartoon-btn-gold {
  background: var(--sun-gold);
  color: #443000;
  box-shadow: var(--btn-shadow);
}
.cartoon-btn-blue {
  background: var(--ice-blue);
  color: var(--ink);
  box-shadow: var(--btn-shadow);
}
.cartoon-btn-red {
  background: #ffecf0;
  color: var(--coral-red);
  box-shadow: var(--btn-shadow);
}
.cartoon-action-big {
  background: linear-gradient(180deg, #ffdc42 0%, var(--sun-gold) 100%);
  color: #3b2800;
  font-size: 18px;
  font-weight: 800;
  padding: 13px 24px;
  border-radius: var(--radius-md);
  box-shadow: 0 5px 0 var(--gold-shadow), 0 8px 0 var(--ink-shadow);
  width: 100%;
  margin-top: 14px;
  justify-content: center;
}

/* ---------- Layout em 3 Colunas Limpas ---------- */
.main-stage {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 300px minmax(500px, 1fr) 300px;
  gap: 18px;
  padding: 18px 24px 30px;
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1180px) {
  .main-stage { grid-template-columns: 1fr 1fr; }
  .arena-center { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 760px) {
  .main-stage { grid-template-columns: 1fr; padding: 12px; }
  .topbar { padding: 10px 14px; }
}

/* Caixas e Painéis Estilo Cartoon */
.comic-box, .side-panel {
  background: #ffffff;
  border: var(--cartoon-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--box-shadow-pop);
}

.box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--ice-blue);
  border-bottom: var(--cartoon-border);
  border-top-left-radius: calc(var(--radius-lg) - 3px);
  border-top-right-radius: calc(var(--radius-lg) - 3px);
  flex-wrap: wrap;
}
.header-icon { font-size: 22px; }
.box-title { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }

/* ---------- Painéis Laterais (Sua Empresa & Bot) ---------- */
.side-panel {
  padding: 14px;
  position: sticky;
  top: 14px;
}
.player-panel { border-color: #1d72b8; background: #fbfeff; }
.bot-panel { border-color: #e66025; background: #fffdfb; }

.character-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #cbdfe9;
  margin-bottom: 10px;
}
.char-avatar {
  font-size: 30px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--ice-blue);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 0 var(--ink);
}
.char-name { font-size: 17px; font-weight: 800; }
.char-role { font-size: 11px; font-weight: 700; color: #5f7a8b; }

/* Pílulas de Estatísticas Rápidas */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.stat-pill {
  background: #f1f8fc;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  box-shadow: 0 2.5px 0 var(--ink-shadow);
}
.stat-lbl {
  font-size: 10px;
  font-weight: 800;
  color: #648194;
  text-transform: uppercase;
}
.stat-val {
  font-family: 'Baloo 2', sans-serif;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
.stat-val.gold { color: #d68f00; }
.stat-val.score { color: var(--purple-pop); }

/* Cartão de Equipe & Contratação no Painel */
.workforce-card {
  background: #f7fcff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 10px;
  box-shadow: 0 2.5px 0 var(--ink-shadow);
}
.wf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
}
.wf-count { font-size: 14px; color: var(--royal-blue); }
.wf-hire-btn {
  font-size: 11px;
  padding: 4px 8px;
  margin-top: 6px;
  width: 100%;
  justify-content: center;
}

/* Cartão de Melhorias Ativas no Painel */
.tech-card-compact {
  background: #fffdf5;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 10px;
  box-shadow: 0 2.5px 0 var(--ink-shadow);
}
.tech-hdr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}
.tech-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 1.5px 0 var(--ink-shadow);
}

/* Estoque Limpo */
.stock-section {
  background: #ffffff;
}
.stock-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}
.stock-scroller {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 3px;
}
.stock-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--ice-blue);
  border: 1.5px solid var(--ink);
  font-size: 11.5px;
  font-weight: 700;
}
.stock-row.can-row {
  background: #fff8e8;
  border-color: #d68f00;
}
.stock-row.spoiling {
  border-color: var(--coral-red);
  background: #ffebee;
}
.stock-row .fish-ico { font-size: 15px; }
.stock-row .fish-name { flex: 1; }
.stock-row .fish-tag {
  font-size: 9px;
  font-weight: 800;
  background: var(--coral-red);
  color: white;
  border-radius: 4px;
  padding: 1px 4px;
}
.stock-row .fish-val { font-weight: 800; color: #b57a00; }
.stock-row .fish-qt { font-size: 12px; font-weight: 800; }
.stock-empty {
  font-size: 11.5px;
  font-weight: 700;
  color: #8da4b3;
  text-align: center;
  padding: 10px;
  background: #f2f7fa;
  border: 1.5px dashed #b9d2e0;
  border-radius: 8px;
}

/* ---------- Centro: Arena do Jogo ---------- */
.arena-center {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Banner de Clima Conciso & Elegante */
.event-banner-clean {
  background: #ffffff;
  border: var(--cartoon-border);
  border-radius: var(--radius-md);
  box-shadow: var(--box-shadow-pop);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  align-items: center;
}
@media (max-width: 600px) {
  .event-banner-clean { grid-template-columns: 1fr; }
}

.eb-current {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eb-ico {
  font-size: 38px;
  background: var(--ice-blue);
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.eb-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.eb-desc {
  font-size: 11.5px;
  font-weight: 600;
  color: #4b687c;
  line-height: 1.25;
}
.eb-badge {
  display: inline-block;
  background: var(--coral-red);
  color: white;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  margin-top: 2px;
}

.eb-forecast {
  background: #fffcf2;
  border: 1.5px solid #d9c898;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.eb-fore-ico { font-size: 26px; flex-shrink: 0; }
.eb-fore-tag { font-size: 10px; font-weight: 900; color: #b58004; text-transform: uppercase; letter-spacing: 0.4px; }
.eb-fore-title { font-size: 14px; font-weight: 900; color: #0f172a; margin-top: 1px; }
.eb-fore-desc { font-size: 12.5px; font-weight: 600; color: #334155; line-height: 1.35; margin-top: 3px; }

/* =========================================================
   CENÁRIO DO ICEBERG VIVO (Ilustração Cartoon Interativa)
   ========================================================= */
.iceberg-stage-box {
  overflow: hidden;
}
.iceberg-status-tag {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  background: #ffffff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--royal-blue);
  box-shadow: 0 2px 0 var(--ink-shadow);
}

.iceberg-canvas-wrap {
  position: relative;
  width: 100%;
  height: 330px;
  background: linear-gradient(180deg, #6fd2fc 0%, #a4e4fd 40%, #c4eeff 60%, #3ca2db 85%, #1d72b8 100%);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
  user-select: none;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.iceberg-canvas-wrap.night-mode {
  background: linear-gradient(180deg, #030712 0%, #070e1f 40%, #0d1a33 65%, #07192f 85%, #030e1c 100%);
  box-shadow: inset 0 0 35px rgba(30, 58, 138, 0.35);
}

/* Caixa do Iceberg com Brilho Noturno Suave */
.iceberg-stage-box.night-mode {
  border-color: #2563eb;
  background: #090e1a;
  box-shadow: 0 4px 0 #1e3a8a, 0 0 15px rgba(59, 130, 246, 0.2);
}
.iceberg-stage-box.night-mode .box-title {
  color: #93c5fd;
}

/* Elementos do SVG do Iceberg */
.iceberg-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================================
   ANIMAÇÕES CARTOON ORGANIZADAS (COM TRANSFORM-BOX LOCAL)
   ========================================================= */

/* 1. Ondas Suaves do Mar */
@keyframes waveSway1 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-12px); }
}
@keyframes waveSway2 {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}
.wave-anim-1 { animation: waveSway1 6s ease-in-out infinite; }
.wave-anim-2 { animation: waveSway2 4.5s ease-in-out infinite; }

/* 2. Pinguins: Respiração e Pulo Sutil Ancorado */
@keyframes penguinBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.2px); }
}
.penguin-bob {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: penguinBob 2.5s ease-in-out infinite;
}

/* 3. Barco Trawler: Balanço na Maré */
@keyframes boatRock {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(-1.5deg); }
}
.boat-anim {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: boatRock 3.5s ease-in-out infinite;
}

/* 4. Engrenagens da Esteira: Rotação no Próprio Eixo */
@keyframes gearSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.gear-anim {
  transform-box: fill-box;
  transform-origin: center;
  animation: gearSpin 3.5s linear infinite;
}

/* 5. Martelo dos Construtores: Batida Rítmica */
@keyframes hammerTap {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(-24deg); }
  65% { transform: rotate(6deg); }
}
.hammer-anim {
  transform-box: fill-box;
  transform-origin: bottom right;
  animation: hammerTap 1.4s ease-in-out infinite;
}

/* 6. Vara de Pesca: Linha com Leve Balanço */
@keyframes rodTug {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-2.5deg); }
}
.rod-anim {
  transform-box: fill-box;
  transform-origin: bottom left;
  animation: rodTug 3.2s ease-in-out infinite;
}

/* 7. Fumaça e Vapor da Cozinha */
@keyframes steamRise {
  0% { transform: translateY(0) scale(0.7); opacity: 0.85; }
  100% { transform: translateY(-15px) scale(1.2); opacity: 0; }
}
.steam-bubble {
  transform-box: fill-box;
  transform-origin: center;
  animation: steamRise 2.2s ease-out infinite;
}

/* 8. Foca Curiosa: Espiada Fofa */
@keyframes sealNod {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}
.seal-anim {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: sealNod 2.8s ease-in-out infinite;
}

/* 9. Badges e Placas Integradas das Estações */
.iceberg-zone-badge-light {
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 9.5px;
  fill: #ffffff;
}

.iceberg-zone-badge {
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 10px;
  fill: var(--ink);
}

/* ---------- Alocação Limpa dos Pinguins ---------- */
.alloc-box {
  padding-bottom: 16px;
}
.penguin-roster {
  font-size: 13px;
  font-weight: 800;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.penguin-avatar-pin {
  font-size: 20px;
  transition: transform 0.15s, opacity 0.15s;
}
.penguin-avatar-pin.used {
  opacity: 0.25;
  transform: scale(0.85);
}

/* 4 Funções em Grade Limpa 2x2 */
.roles-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 16px 0;
}
@media (max-width: 580px) {
  .roles-clean-grid { grid-template-columns: 1fr; }
}

.role-clean-card {
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: 0 3px 0 var(--ink-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, background-color 0.15s;
  cursor: pointer;
}
.role-clean-card.active {
  background: #f4faff;
  border-color: var(--royal-blue);
}

.role-clean-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-clean-ico {
  font-size: 24px;
  background: var(--ice-blue);
  border: 2px solid var(--ink);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}
.role-clean-name { font-size: 15px; font-weight: 800; }
.role-clean-desc { font-size: 11px; font-weight: 600; color: #5f7a8b; line-height: 1.2; }

/* Stepper Cartoon */
.stepper-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.stepper-btn {
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--ice-blue);
  font-size: 18px;
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
}
.stepper-btn:hover:not(:disabled) { transform: translateY(-1px); }
.stepper-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.stepper-btn:disabled { opacity: 0.3; cursor: not-allowed; box-shadow: none; }
.stepper-count {
  font-family: 'Baloo 2', sans-serif;
  font-size: 22px;
  font-weight: 800;
  min-width: 24px;
  text-align: center;
}
.stepper-penguins {
  font-size: 16px;
  letter-spacing: -2px;
  margin-left: auto;
}

/* Contratação de Trabalhadores */
.hire-strip-container {
  padding: 12px 16px 0;
}
.hire-strip-card {
  background: #fffdf5;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: 0 2.5px 0 var(--ink-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hire-strip-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hire-strip-ico {
  font-size: 26px;
  background: var(--ice-blue);
  border: 2px solid var(--ink);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}
.hire-strip-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.hire-strip-desc {
  font-size: 11px;
  font-weight: 600;
  color: #5a7384;
}

/* HUB INTERATIVO DE MELHORIAS (Árvore de Tecnologia Visível) */
.upgrades-interactive-hub {
  padding: 14px 16px 0;
}
.tech-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
}
.tech-hub-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--royal-blue);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tech-hub-cp-badge {
  font-size: 11px;
  font-weight: 800;
  background: var(--ice-blue);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--ink);
}

.tech-interactive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.tech-interactive-card {
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: 0 3px 0 var(--ink-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
  user-select: none;
}
.tech-interactive-card:hover {
  transform: translateY(-2px);
}
.tech-interactive-card.selected {
  background: #fffdf0;
  border-color: #f59e0b;
  box-shadow: 0 4px 0 #b45309, 0 0 10px rgba(245, 158, 11, 0.4);
}
.tech-interactive-card.owned {
  background: #f0fdf4;
  border-color: var(--mint-green);
  opacity: 0.9;
  cursor: default;
}
.tech-interactive-card.owned:hover {
  transform: none;
}
.tech-interactive-card.locked {
  background: #f8fafc;
  opacity: 0.8;
}

.tech-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tech-card-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tech-card-ico {
  font-size: 24px;
  background: var(--ice-blue);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}
.tech-card-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
}
.tech-card-pts {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--purple-pop);
  background: #f3e8ff;
  border: 1px solid var(--purple-pop);
  border-radius: 999px;
  padding: 1px 6px;
}

.upg-impact-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  display: inline-block;
  width: fit-content;
}
.impact-cold { background: #e0f2fe; color: #0369a1; }
.impact-boat { background: #fee2e2; color: #b91c1c; }
.impact-rod  { background: #ede9fe; color: #6d28d9; }
.impact-stall{ background: #fef3c7; color: #b45309; }
.impact-belt { background: #e0e7ff; color: #3730a3; }
.impact-lure { background: #fef08a; color: #854d0e; }
.impact-sonar{ background: #cffafe; color: #0e7490; }
.impact-deal { background: #ecfdf5; color: #047857; }
.impact-smokehouse{ background: #ffedd5; color: #c2410c; }
.impact-dive { background: #dbeafe; color: #1d4ed8; }
.impact-net { background: #e0f2fe; color: #0369a1; }
.impact-bank { background: #fef3c7; color: #b45309; }
.impact-canning { background: #ffe4e6; color: #be123c; }

/* Layout da Árvore de 3 Trilhas Estratégicas */
.skill-tracks-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .skill-tracks-container {
    grid-template-columns: 1fr;
  }
}
.track-column {
  background: #f8fafc;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.track-column-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  margin-bottom: 2px;
}
.track-hdr-marine { background: linear-gradient(135deg, #0284c7, #0369a1); color: white; }
.track-hdr-trade { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.track-hdr-industry { background: linear-gradient(135deg, #10b981, #059669); color: white; }

.track-upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Badges de Semanas Raras */
.badge-rare-crab { background: #ef4444; color: #ffffff; border-color: #991b1b; }
.badge-rare-flood { background: #0284c7; color: #ffffff; border-color: #075985; }
.badge-rare-sushi { background: #f97316; color: #ffffff; border-color: #c2410c; }

.tech-card-desc {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  line-height: 1.25;
  margin: 2px 0 4px;
}

.tech-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 6px;
}
.tech-cost-chips {
  display: flex;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
}
.tech-cost-chip {
  background: var(--ice-blue);
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  padding: 1px 5px;
}

.tech-btn-action {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  border: 2px solid var(--ink);
  cursor: pointer;
  background: var(--ice-blue);
  box-shadow: 0 1.5px 0 var(--ink-shadow);
  user-select: none;
}
.tech-btn-action.btn-selected {
  background: var(--sun-gold);
  color: #451a03;
}
.tech-btn-action.btn-owned {
  background: #dcfce7;
  color: #15803d;
  cursor: default;
}
.tech-btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Chips de Prévia Limpos */
.preview-chips-clean {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 16px 0;
}
.p-chip {
  font-size: 11.5px;
  font-weight: 800;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 8px;
  background: #ffffff;
}
.p-chip.green { background: #e0f9ed; color: #076239; }
.p-chip.warn { background: #ffebee; color: #a31424; }
.p-chip.gold { background: #fff8d6; color: #704f02; }

.cartoon-bubble-tip {
  margin: 10px 16px 0;
  padding: 8px 12px;
  background: #fff8d6;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  color: #4a3a08;
}

/* ---------- Relatório Direto da Rodada ---------- */
.report-box {
  padding: 16px;
}
.report-phase-clean {
  background: #f7fcff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.phase-clean-hdr {
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.phase-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.phase-col-clean {
  background: #ffffff;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 700;
}
.phase-col-clean h5 {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--royal-blue);
}

.fish-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.fish-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  background: #ffffff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 1px 6px;
}
.fish-pill.lost { opacity: 0.4; text-decoration: line-through; }
.fish-pill.rerolled { background: #fff8d6; border-color: #d68f00; }

/* ---------- Modais Limpos ---------- */
.cartoon-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(14, 30, 48, 0.75);
  backdrop-filter: blur(4px);
}
.cartoon-modal[hidden] { display: none; }

/* O menu inicial usa um wallpaper próprio, para não depender do frame 3D pausado. */
#startModal {
  isolation: isolate;
  background: #07182c;
  backdrop-filter: none;
}
.start-screen-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.start-screen-wallpaper,
.start-screen-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.start-screen-wallpaper {
  object-fit: cover;
  object-position: center 58%;
  filter: blur(2px);
  transform: scale(1.02);
}
.start-screen-shade {
  background: linear-gradient(180deg, rgba(4, 15, 34, 0.08), rgba(4, 15, 34, 0.14) 55%, rgba(4, 15, 34, 0.42));
}
.start-modal-frame {
  position: relative;
  z-index: 1;
}

/* Mantém os diálogos um pouco abaixo do centro, sem deslocar o menu inicial. */
.cartoon-modal:not(#startModal) {
  padding-top: 28px;
  padding-bottom: 16px;
}

/* O trato precisa estar acessível no palco durante o planejamento do polvo. */
#weatherBanner.eb-theme-octopus:not([hidden]) {
  left: var(--octopus-banner-x, 50vw) !important;
  top: var(--octopus-banner-y, 55vh) !important;
  bottom: auto !important;
  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 46;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, calc(-100% - 12px));
}
#weatherBanner.eb-theme-halloween:not([hidden]) {
  left: var(--halloween-banner-left, 12px) !important;
  top: var(--halloween-banner-y, 55vh) !important;
  bottom: auto !important;
  width: min(310px, calc(100vw - 24px)) !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 46 !important;
  display: block;
  padding: 8px 10px;
  background: #faf5ff;
  border-color: #7e22ce;
  transform: translate(0, 16px) !important;
}
#weatherBanner.eb-theme-flood:not([hidden]) {
  left: 16px !important;
  top: auto !important;
  bottom: 114px;
  width: min(390px, calc(100vw - 32px)) !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 46;
  display: block;
  padding: 10px 12px;
  background: #eff6ff;
  border-color: #0284c7;
}
#weatherBanner.eb-theme-octopus:not([hidden])::after { display: none !important; }
#weatherBanner.eb-theme-halloween:not([hidden])::after {
  content: "";
  position: absolute;
  left: calc(var(--halloween-banner-arrow-x, 50%) - 9px);
  top: -18px;
  border: 9px solid transparent;
  border-bottom-color: #7c3aed;
}
#weatherBanner.eb-theme-octopus .eb-forecast,
#weatherBanner.eb-theme-octopus .eb-desc,
#weatherBanner.eb-theme-octopus .eb-badge,
#weatherBanner.eb-theme-octopus .eb-rare-sticker { display: none; }
#weatherBanner.eb-theme-flood .eb-forecast,
#weatherBanner.eb-theme-flood .eb-badge,
#weatherBanner.eb-theme-flood .eb-rare-sticker { display: none; }
#weatherBanner.eb-theme-octopus .eb-current { align-items: center; }
#weatherBanner.eb-theme-halloween .eb-forecast,
#weatherBanner.eb-theme-halloween .eb-desc,
#weatherBanner.eb-theme-halloween .eb-badge,
#weatherBanner.eb-theme-halloween .eb-rare-sticker { display: none; }
#weatherBanner.eb-theme-halloween .eb-current { align-items: center; }
#weatherBanner.eb-theme-halloween .eb-title { display: block !important; font-size: 16px; }
#weatherBanner.eb-theme-halloween .eb-ico { display: none; }
#weatherBanner.eb-theme-halloween .halloween-menu { margin-top: 5px; }
.halloween-offer-copy { color: #4c1d95; font-size: 12px; font-weight: 700; line-height: 1.3; }
.halloween-choice-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6px; margin-top: 7px; }
.halloween-choice {
  min-height: 32px; padding: 5px 7px; border: 2px solid #4c1d95; border-radius: 8px;
  box-shadow: 0 2px 0 #4c1d95; color: #fff; cursor: pointer; font: 800 11px 'Fredoka', sans-serif;
}
.halloween-choice.accept { background: #7c3aed; }
.halloween-choice.decline { background: #475569; border-color: #334155; box-shadow: 0 2px 0 #334155; }
.halloween-choice:disabled { opacity: .6; cursor: default; }
.halloween-choice:not(:disabled):active { transform: translateY(2px); box-shadow: none; }
.btn-event-interactive:disabled { opacity: 0.65; cursor: default; }
.octopus-balance, .octopus-target { font-size: 15px; line-height: 1.45; }
.octopus-balance {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 11px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #475569;
  font-weight: 700;
}
.octopus-balance b { color: #92400e; white-space: nowrap; }
.octopus-target {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: #f5f3ff;
  color: #4c1d95;
  font-weight: 700;
}
.octopus-target .game-svg-ico { vertical-align: middle; }
.octopus-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.octopus-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 154px;
  padding: 14px;
  text-align: left;
  font: 600 15px/1.38 'Nunito', sans-serif;
  color: #334155;
  background: #fff;
  border: 2px solid #94a3b8;
  border-bottom-width: 5px;
  border-radius: 14px;
  cursor: pointer;
}
.octopus-action strong {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3px 8px;
  color: #6b21a8;
  font: 900 16px/1.2 'Fredoka', sans-serif;
}
.octopus-action .octopus-action-cost {
  padding: 2px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 14px;
  white-space: nowrap;
}
.octopus-action .octopus-action-desc { font-size: 15px; line-height: 1.4; }
.octopus-action > b { margin-top: auto; font-size: 13px; color: #475569; }
.octopus-action:hover:not(:disabled), .octopus-action.is-selected {
  border-color: #9333ea;
  background: #f3e8ff;
}
.octopus-action.is-selected { box-shadow: 0 2px 0 #7e22ce; }
.octopus-action:disabled { opacity: 0.55; cursor: not-allowed; }
.octopus-action:focus-visible, #btnInteractOctopus:focus-visible {
  outline: 3px solid #0284c7;
  outline-offset: 3px;
}
.octopus-cost-note {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
#octopusModal .modal-card {
  width: min(720px, 94vw) !important;
  max-width: 720px !important;
  max-height: min(680px, 88vh) !important;
}
#halloweenModal .modal-card {
  width: min(520px, 94vw) !important;
  max-width: 520px !important;
}
.halloween-modal-copy { padding: 8px 2px 14px; }
#halloweenModal .halloween-offer-copy { color: #334155; font-size: 15px; line-height: 1.5; }
#halloweenModal .halloween-choice-row { gap: 10px; margin-top: 16px; }
#halloweenModal .halloween-choice { min-height: 48px; padding: 10px 14px; font-size: 14px; }
@media (max-width: 600px) {
  .octopus-actions { grid-template-columns: 1fr; }
  .octopus-action { min-height: 0; }
  #weatherBanner.eb-theme-flood:not([hidden]) { bottom: max(82px, calc(72px + env(safe-area-inset-bottom))); }
}

.modal-card {
  position: relative;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border: 3.5px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 0 var(--ink-shadow);
  padding: 22px;
}
.modal-card.wide-card {
  width: min(840px, 100%);
}

.modal-header-deco {
  text-align: center;
  margin-bottom: 6px;
}
.hero-sticker { font-size: 40px; }
.modal-title {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--royal-blue);
}
.modal-intro {
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #4b6678;
  margin: 6px 0 16px;
  line-height: 1.35;
}

.close-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: #ffecf0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--coral-red);
  cursor: pointer;
}

.day-one-pamphlet-card {
  width: min(500px, calc(100vw - 32px));
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 38px 38px;
  border: 4px solid #a16207;
  border-bottom: 8px solid #854d0e;
  border-radius: 8px;
  background: linear-gradient(145deg, #fff9df 0%, #f5e8b8 100%);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.4);
}

.day-one-pamphlet-text {
  margin: 0;
  color: #263238;
  font: 700 clamp(22px, 3vw, 30px)/1.45 'Fredoka', sans-serif;
  text-align: center;
}

@media (max-width: 520px) {
  .day-one-pamphlet-card {
    min-height: 176px;
    padding: 54px 24px 30px;
  }
}

.field-group { margin-bottom: 12px; }
.field-label { display: block; font-size: 12px; font-weight: 800; margin-bottom: 5px; }
.cartoon-input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 12px;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ice-blue);
  outline: none;
}

.seg-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.seg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ice-blue);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.modal-bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.big-start { font-size: 15px; padding: 10px 20px; }

/* Grid de Melhorias Modulares no Modal */
.upgrades-grid-modal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 620px) {
  .upgrades-grid-modal { grid-template-columns: 1fr; }
}

.upgrade-card-item {
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 12px;
  box-shadow: 0 3px 0 var(--ink-shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-card-item.owned {
  background: #f0fff6;
  border-color: var(--mint-green);
}
.upg-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.upg-ico {
  font-size: 26px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--ice-blue);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.upg-name { font-size: 15px; font-weight: 800; }
.upg-pts { font-size: 11px; font-weight: 800; color: var(--purple-pop); }
.upg-desc { font-size: 11.5px; font-weight: 600; color: #476274; line-height: 1.25; }
.upg-cost-bar {
  display: flex;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  margin-top: auto;
}
.upg-cost-chip {
  background: var(--ice-blue);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 2px 6px;
}

/* Tabela de Regras & Fim de Jogo */
.rules-scrollable { font-size: 12.5px; line-height: 1.45; }
.rules-scrollable h3 { font-size: 15px; color: var(--royal-blue); margin: 12px 0 4px; }
.cartoon-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
  font-size: 11.5px;
}
.cartoon-table th, .cartoon-table td {
  padding: 5px 8px;
  border: 1.5px solid var(--ink);
  text-align: left;
}
.cartoon-table th { background: var(--ice-blue); font-weight: 800; }
.cartoon-table td.num { text-align: right; }

#classicAllocGroup[hidden],
.roles-clean-grid[hidden],
.hire-strip-container[hidden] {
  display: none !important;
}

/* =========================================================
   BANNERS DE EVENTOS INTERATIVOS & SEMANAS RARAS
   ========================================================= */
.event-banner-clean {
  transition: all 0.25s ease;
  position: relative;
}

.eb-banner-rare {
  border-width: 3px !important;
  animation: bannerPulseGold 3s infinite ease-in-out;
}
.eb-theme-seal {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 60%, #fecdd3 100%) !important;
  border-color: #e11d48 !important;
  animation: bannerPulseGold 3s infinite ease-in-out;
}
.eb-theme-gulls {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 60%, #fed7aa 100%) !important;
  border-color: #ea580c !important;
  animation: bannerPulseGold 3s infinite ease-in-out;
}
.eb-theme-crab {
  background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 60%, #fecaca 100%) !important;
  border-color: #ef4444 !important;
}
.eb-theme-flood {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 60%, #bae6fd 100%) !important;
  border-color: #0284c7 !important;
  animation: bannerPulseBlue 3s infinite ease-in-out;
}
.eb-theme-sushi {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 60%, #fed7aa 100%) !important;
  border-color: #f97316 !important;
}
.eb-theme-beach {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #fde68a 100%) !important;
  border-color: #f59e0b !important;
}
.eb-theme-festival {
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 60%, #f5d0fe 100%) !important;
  border-color: #c026d3 !important;
}
.eb-theme-halloween {
  background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 58%, #ddd6fe 100%) !important;
  border-color: #7c3aed !important;
  animation: bannerPulsePurple 3s infinite ease-in-out;
}
.eb-theme-judgment {
  background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 60%, #a7f3d0 100%) !important;
  border-color: #166534 !important;
  animation: bannerPulseGreen 3s infinite ease-in-out;
}

@keyframes bannerPulseGold {
  0%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 rgba(245, 158, 11, 0); }
  50% { box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(245, 158, 11, 0.45); }
}
@keyframes bannerPulseBlue {
  0%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 rgba(2, 132, 199, 0); }
  50% { box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(2, 132, 199, 0.45); }
}
@keyframes bannerPulseGreen {
  0%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 rgba(22, 101, 52, 0); }
  50% { box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(22, 101, 52, 0.45); }
}
@keyframes bannerPulsePurple {
  0%, 100% { box-shadow: 0 4px 0 var(--ink), 0 0 0 rgba(124, 58, 237, 0); }
  50% { box-shadow: 0 4px 0 var(--ink), 0 0 16px rgba(124, 58, 237, 0.45); }
}

.eb-rare-sticker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  box-shadow: 0 1.5px 0 var(--ink);
  text-transform: uppercase;
  margin-bottom: 4px;
  animation: badgeWiggle 2s infinite ease-in-out;
}
@keyframes badgeWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

.eb-interactive-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-event-interactive {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  cursor: pointer;
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 2.5px 0 var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.15s;
}
.btn-event-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--ink);
  background: #fffbeb;
}
.btn-event-interactive:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--ink);
}
#weatherBanner.eb-theme-octopus #btnInteractOctopus,
#weatherBanner.eb-theme-halloween #btnInteractHalloween {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 14px;
}

.sparkle-anim {
  display: inline-block;
  animation: sparkleTwinkle 1.2s infinite ease-in-out;
}
@keyframes sparkleTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.35) rotate(15deg); opacity: 1; }
}

.event-interactive-toast {
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink-shadow);
  margin-top: 8px;
  animation: toastBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 8px;
}
@keyframes toastBounce {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Notificações e Alertas Visuais do Jogo (Substitui alert nativo) */
.game-toast-layer {
  position: fixed;
  top: 108px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: min(480px, calc(100vw - 20px));
}

.game-day-intro {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: #e0f2fe;
  background: linear-gradient(180deg, #17324b, #0b1524);
  border: 2px solid #38bdf8;
  border-bottom: 4px solid #0369a1;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  animation: toastSlideDown 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.game-day-intro.is-leaving {
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
}
.game-day-intro-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(125, 211, 252, 0.55);
  border-radius: 10px;
}
.game-day-intro-copy { min-width: 0; }
.game-day-intro-title {
  color: #7dd3fc;
  font: 800 13px/1.2 'Baloo 2', 'Fredoka', sans-serif;
}
.game-day-intro-desc {
  margin: 3px 0 0;
  color: #e2e8f0;
  font: 600 12px/1.3 'Fredoka', sans-serif;
}

.game-alert-toast {
  pointer-events: auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #162438 0%, #0b1524 100%);
  border: 3px solid #ef4444;
  border-bottom: 6px solid #991b1b;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(239, 68, 68, 0.35);
  color: #f8fafc;
  animation: toastSlideDown 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.25s ease, transform 0.25s ease;
  user-select: none;
  cursor: pointer;
}

.game-alert-toast.is-leaving {
  opacity: 0;
  transform: translateY(-16px) scale(0.92);
}

.game-alert-toast.type-warn {
  border-color: #f59e0b;
  border-bottom-color: #b45309;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(245, 158, 11, 0.35);
}

.game-alert-toast.type-info {
  border-color: #38bdf8;
  border-bottom-color: #0284c7;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85), 0 0 20px rgba(56, 189, 248, 0.35);
}

.game-alert-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.2);
  border: 2px solid #ef4444;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}
.game-alert-toast.type-warn .game-alert-icon-box {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
}
.game-alert-toast.type-info .game-alert-icon-box {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}

.game-alert-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.game-alert-title {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #fecaca;
  letter-spacing: 0.5px;
  line-height: 1.2;
}
.game-alert-toast.type-warn .game-alert-title {
  color: #fef08a;
}
.game-alert-toast.type-info .game-alert-title {
  color: #7dd3fc;
}

.game-alert-msg {
  font-family: 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.35;
}

.game-alert-sub {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  margin-top: 2px;
}

.game-alert-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  align-self: flex-start;
  margin-left: 4px;
}
.game-alert-close-btn:hover {
  background: rgba(239, 68, 68, 0.85);
  border-color: #ef4444;
}

@keyframes toastSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.9);
  }
  70% {
    transform: translateY(4px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Tremor de Erro para Elementos Visuais */
.shake-deny {
  animation: shakeDenyAnim 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

@keyframes shakeDenyAnim {
  10%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

.comic-click-pop {
  position: absolute;
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: #14283b;
  background: #ffffff;
  border: 2px solid #14283b;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 2.5px 0 #14283b;
  z-index: 50;
  transform: translate(-50%, -50%);
  animation: comicPopFloat 0.75s forwards ease-out;
}
@keyframes comicPopFloat {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(-5deg); opacity: 1; }
  50% { transform: translate(-50%, -80%) scale(1.15) rotate(3deg); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(1) rotate(0deg); opacity: 0; }
}

/* =========================================================
   ANIMAÇÕES DE EVENTOS E CLIMA POLAR (ORGANIZADAS)
   ========================================================= */

/* Estrelas Cintilantes na Noite Polar */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.2); }
}
.star-twinkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: starTwinkle 2.6s ease-in-out infinite;
}

/* Cortinas Ondulantes da Aurora Boreal */
@keyframes auroraWave1 {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.7; }
  50% { transform: translateY(-7px) scaleY(1.14); opacity: 0.95; }
}
@keyframes auroraWave2 {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.65; }
  50% { transform: translateY(6px) scaleY(0.9); opacity: 0.85; }
}
@keyframes auroraWave3 {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(-5px); opacity: 0.8; }
}
.aurora-wave-1 { animation: auroraWave1 6s ease-in-out infinite; }
.aurora-wave-2 { animation: auroraWave2 4.8s ease-in-out infinite; }
.aurora-wave-3 { animation: auroraWave3 5.4s ease-in-out infinite; }

/* Lâmpadas Coloridas do Festival */
@keyframes bulbPulse {
  0%, 100% { opacity: 0.75; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 5px currentColor); }
}
.festive-bulb {
  transform-box: fill-box;
  transform-origin: center top;
  animation: bulbPulse 2s ease-in-out infinite;
}

/* Fogos de Artifício Deslumbrantes no Festival Noturno */
@keyframes fireworkBurst {
  0% { transform: scale(0.2); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: scale(1.12); opacity: 0.95; }
  100% { transform: scale(1.25); opacity: 0; }
}
.firework-burst-1 {
  transform-box: fill-box;
  transform-origin: center;
  animation: fireworkBurst 2.5s ease-out infinite;
}
.firework-burst-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: fireworkBurst 2.9s ease-out infinite 0.9s;
}
.firework-burst-3 {
  transform-box: fill-box;
  transform-origin: center;
  animation: fireworkBurst 3.3s ease-out infinite 1.7s;
}

/* Caranguejos e Garras */
@keyframes clawPinch {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-18deg); }
}
@keyframes clawPinchRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(18deg); }
}
.claw-left {
  transform-box: fill-box;
  transform-origin: bottom right;
  animation: clawPinch 1.2s infinite ease-in-out;
}
.claw-right {
  transform-box: fill-box;
  transform-origin: bottom left;
  animation: clawPinchRight 1.2s infinite ease-in-out;
}

@keyframes crabWalk {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
.crab-anim-walk {
  transform-box: fill-box;
  animation: crabWalk 2.4s infinite ease-in-out;
}

/* Brilho do Pedestal de Cristal e Baú Submerso */
@keyframes goldPedestalGlow {
  0%, 100% { filter: drop-shadow(0 0 3px #f59e0b); }
  50% { filter: drop-shadow(0 0 10px #fbbf24); }
}
.gold-crab-glow {
  transform-box: fill-box;
  animation: goldPedestalGlow 2.4s infinite ease-in-out;
  cursor: pointer;
}

@keyframes chestGleam {
  0%, 100% { filter: drop-shadow(0 0 2px #f59e0b); }
  50% { filter: drop-shadow(0 0 8px #fbbf24); }
}
.chest-anim {
  transform-box: fill-box;
  animation: chestGleam 2.2s infinite ease-in-out;
  cursor: pointer;
}

/* Bolhas de Mergulho Subaquáticas */
@keyframes bubbleStream {
  0% { transform: translateY(0); opacity: 0.85; }
  100% { transform: translateY(-38px); opacity: 0; }
}
.bubble-stream {
  transform-box: fill-box;
  animation: bubbleStream 2s infinite linear;
}

/* Lanternas Japonesas do Sushi Bar */
@keyframes lanternSwing {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.lantern-anim {
  transform-box: fill-box;
  transform-origin: top center;
  animation: lanternSwing 3s infinite ease-in-out;
}

/* =========================================================
   MENU DE UPGRADES EXPANSÍVEL (ENCOLHER & AUMENTAR)
   ========================================================= */
.upgrades-interactive-hub {
  padding: 12px 16px 0;
}

/* Modo Barra Compacta (Encolhido) */
.tech-hub-compact-bar {
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: 0 3px 0 var(--ink-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  transition: all 0.2s ease;
}
.tech-hub-compact-bar:hover {
  background: #fdfdfe;
  border-color: var(--royal-blue);
}

.tech-hub-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tech-hub-ico-badge {
  font-size: 26px;
  background: var(--ice-blue);
  border: 2px solid var(--ink);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.tech-hub-title-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.tech-hub-subtext {
  font-size: 11px;
  font-weight: 600;
  color: #5a7384;
}

.tech-hub-stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tech-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fffbeb;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: #b45309;
  box-shadow: 0 2px 0 #d97706;
}

.btn-tech-toggle {
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Modo Painel Expandido */
.tech-hub-expanded-panel {
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 4px 0 var(--ink-shadow);
  animation: panelSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes panelSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tech-expanded-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px dashed #e2e8f0;
  padding-bottom: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

/* Abas de Navegação / Filtro de Trilhas */
.tech-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tech-tab-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
  transition: all 0.15s ease;
}
.tech-tab-btn:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}
.tech-tab-btn.active {
  background: var(--royal-blue);
  color: #ffffff;
  border-color: var(--ink);
  box-shadow: 0 2.5px 0 var(--ink-shadow);
  transform: translateY(-1px);
}

/* Barra de Progresso da Árvore */
.tech-progress-bar-wrap {
  background: #f1f5f9;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
}
.tech-progress-fill {
  background: linear-gradient(90deg, #10b981, #06b6d4, #6366f1);
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Rodapé do Painel Expandido */
.tech-expanded-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px dashed #e2e8f0;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Grid de Trilhas e Cards de Melhorias Ilustrados ---------- */
.skill-tracks-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .skill-tracks-container {
    grid-template-columns: 1fr;
  }
}

.track-column {
  background: #f8fafc;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 3px 0 var(--ink-shadow);
}

.track-column-hdr {
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--ink);
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 0 var(--ink);
}

.track-hdr-marine   { background: linear-gradient(135deg, #0284c7, #0369a1); }
.track-hdr-trade    { background: linear-gradient(135deg, #d97706, #b45309); }
.track-hdr-industry { background: linear-gradient(135deg, #059669, #047857); }

.track-upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card Interativo de Melhoria (Estilo Trading Card Ilustrado) */
.tech-interactive-card {
  background: #ffffff;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2.5px 0 var(--ink-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
}

.tech-interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4.5px 0 var(--ink-shadow);
}

.tech-interactive-card.owned {
  background: #f0fdf4;
  border-color: #16a34a;
}

.tech-interactive-card.selected {
  background: #fffbeb;
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px #f59e0b, 0 3px 0 var(--ink-shadow);
}

/* Banner de Arte Ilustrada SVG da Carta */
.tech-card-art-banner {
  width: 100%;
  height: 66px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  margin-bottom: 2px;
  background: #e0f2fe;
  display: block;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.upg-card-art-svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.tech-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tech-card-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.tech-card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tech-card-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tech-card-pts {
  font-size: 11px;
  font-weight: 800;
  color: #b45309;
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  border-radius: 999px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.upg-impact-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start;
  border: 1px solid;
}

.impact-lure  { background: #e0f2fe; color: #0284c7; border-color: #0284c7; }
.impact-boat  { background: #fee2e2; color: #dc2626; border-color: #dc2626; }
.impact-deal  { background: #fef3c7; color: #b45309; border-color: #b45309; }
.impact-belt  { background: #f1f5f9; color: #334155; border-color: #475569; }
.impact-cold  { background: #e0f2fe; color: #0369a1; border-color: #0284c7; }
.impact-smoke { background: #fef3c7; color: #d97706; border-color: #d97706; }

.tech-card-benefit {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  line-height: 1.35;
  min-height: 28px;
}

.tech-card-cost-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: auto;
}

.tech-cost-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.tech-card-actions {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
}

.tech-card-actions .btn {
  width: 100%;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 800;
  justify-content: center;
}

.btn-owned {
  background: #dcfce7 !important;
  color: #15803d !important;
  border: 1.5px solid #16a34a !important;
  cursor: default;
}

.btn-selected {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1.5px solid #f59e0b !important;
}

/* =========================================================
   GAME UI/UX & GAMIFICAÇÃO: ESTILOS TÁTEIS E HUD PREDITIVO
   ========================================================= */

/* 1. Zonas Interativas no Iceberg Vivo (Manipulação Direta) */
.iceberg-interactive-zone {
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s ease;
  transform-origin: center;
}
.iceberg-interactive-zone:hover {
  filter: drop-shadow(0 2px 8px rgba(2, 132, 199, 0.35));
}
.iceberg-interactive-zone:hover .zone-badge-bg {
  fill: #0284c7 !important;
  stroke: #fef08a !important;
  stroke-width: 2.5 !important;
}
.iceberg-interactive-zone:hover .zone-hitbox {
  fill: #38bdf8 !important;
  fill-opacity: 0.12 !important;
  stroke: #0284c7 !important;
  stroke-dasharray: 6 3 !important;
  stroke-width: 2.4 !important;
}
.iceberg-interactive-zone:active {
  transform: scale(0.975);
}
.zone-badge-bg {
  transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease;
}
.zone-hitbox {
  transition: fill 0.2s ease, fill-opacity 0.2s ease, stroke 0.2s ease;
}
.zone-badge-group {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.iceberg-interactive-zone:hover .zone-badge-group {
  transform: translate(0, -2px) scale(1.04);
}

/* Animação de Salto Polar ao Alocar */
@keyframes zoneClickPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.zone-bounce-anim {
  animation: zoneClickPulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Barra de Disputa Polar (Tug-of-War / Cabo de Guerra) */
.market-battle-hub {
  margin-bottom: 12px;
}
.battle-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border: 2.5px solid #14283b;
  border-radius: 14px;
  padding: 8px 14px;
  box-shadow: 0 4px 0 #14283b;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.battle-hdr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
}
.battle-team {
  display: flex;
  align-items: center;
  gap: 6px;
}
.battle-team.player {
  color: #0369a1;
}
.battle-team.bot {
  color: #b45309;
}
.battle-meter-wrap {
  position: relative;
  height: 20px;
  background: #e2e8f0;
  border: 2px solid #14283b;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
}
.battle-fill-player {
  height: 100%;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.battle-fill-bot {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
  flex: 1;
}
.battle-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border: 1.5px solid #14283b;
  border-radius: 50%;
  background: #fde047;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.battle-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.battle-vs-mark {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fef08a;
  background: rgba(15, 23, 42, 0.8);
  border: 1.5px solid var(--sun-gold);
  border-radius: 6px;
  box-shadow: 0 2px 0 #020617;
  font: 900 10px/1 'Baloo 2', 'Fredoka', sans-serif;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 0 #14283b;
  transform: translateX(4px) rotate(-8deg);
}

/* 3. Turn Forecast HUD (Previsão de Turno em Tempo Real) */
.turn-forecast-hub {
  margin: 10px 0;
}
.forecast-box {
  background: #ffffff;
  border: 2.5px solid #14283b;
  border-radius: 14px;
  box-shadow: 0 4px 0 #14283b;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forecast-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  font-weight: 900;
  color: #14283b;
}
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}
.forecast-card {
  border: 2px solid #14283b;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 0 #14283b;
}
.forecast-card.income-card {
  background: #fefce8;
  border-color: #ca8a04;
}
.forecast-card.spoil-card {
  background: #f0fdf4;
  border-color: #16a34a;
}
.forecast-card.spoil-card.danger {
  background: #fef2f2;
  border-color: #dc2626;
  animation: pulseSpoilBox 1.6s infinite ease-in-out;
}
@keyframes pulseSpoilBox {
  0%, 100% { box-shadow: 0 2px 0 #14283b, 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 2px 0 #14283b, 0 0 0 5px rgba(220, 38, 38, 0.2); }
}
.forecast-card.synergy-card {
  background: #f0f9ff;
  border-color: #0284c7;
}
.forecast-card-title {
  font-size: 11.5px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.forecast-card-body {
  font-size: 12px;
  color: #1e293b;
  font-weight: 700;
  line-height: 1.35;
}
.forecast-card-detail {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}

/* 4. Frescor do Estoque & Tags de Risco */
.freshness-pill {
  font-size: 10px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #14283b;
  margin-left: auto;
  margin-right: 6px;
}
.freshness-pill.fresh {
  background: #dcfce7;
  color: #15803d;
  border-color: #16a34a;
}
.freshness-pill.mature {
  background: #fef3c7;
  color: #b45309;
  border-color: #f59e0b;
}
.freshness-pill.spoiling {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #ef4444;
  animation: pulseSpoilBadge 1.2s infinite alternate;
}
@keyframes pulseSpoilBadge {
  from { transform: scale(0.96); }
  to { transform: scale(1.04); }
}
.freshness-pill.cold {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #0284c7;
}
.freshness-pill.canned {
  background: #ffedd5;
  color: #c2410c;
  border-color: #ea580c;
}
.freshness-pill.stable {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #38bdf8;
}

/* =========================================================
   GUIA & LIVRO DE RECEITAS DO CHEF (EXPLÍCITO & CARTOON)
   ========================================================= */
.recipe-book-hub {
  margin: 6px 0 0 0;
  width: 100%;
}
.role-clean-card .recipe-book-hub {
  margin: 8px 0 0 0;
  width: 100%;
}
.recipe-book-card {
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 0 var(--ink-shadow);
}
.cook-mini-box {
  background: #fffdf9;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 2px 0 var(--ink-shadow);
  transition: all 0.2s ease;
}
.cook-mini-box:hover {
  border-color: #0284c7;
}
.cook-recipe-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
  text-align: left;
}
.cook-recipe-toggle-btn:hover {
  opacity: 0.9;
}
.recipe-toggle-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.recipe-toggle-left .recipe-book-ico {
  font-size: 16px;
  line-height: 1;
}
.recipe-toggle-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.recipe-toggle-arrow {
  font-size: 11px;
  font-weight: 800;
  color: #0369a1;
  background: #e0f2fe;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--ink-shadow);
  transition: transform 0.15s ease, background 0.15s ease;
}
.cook-recipe-toggle-btn:hover .recipe-toggle-arrow {
  background: #bae6fd;
}
.cook-recipe-drawer {
  transition: max-height 0.25s ease, opacity 0.2s ease;
  overflow: hidden;
}
.cook-recipe-drawer.is-collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
}
.cook-recipe-drawer.is-open {
  max-height: 360px;
  opacity: 1;
  margin-top: 8px;
  overflow-y: auto;
  border-top: 1.5px dashed #cbd5e1;
  padding-top: 8px;
}
.cook-recipe-drawer::-webkit-scrollbar {
  width: 5px;
}
.cook-recipe-drawer::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}
.recipe-cards-grid.compact-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.compact-grid .recipe-item-card {
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 1.5px 0 var(--ink);
}
.compact-grid .recipe-dish-name {
  font-size: 12px;
}
.compact-grid .recipe-ingredients-row {
  font-size: 10.5px;
  margin-bottom: 4px;
}
.compact-grid .recipe-stock-status {
  font-size: 10px;
  padding: 2px 5px;
}
.recipe-book-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.recipe-book-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.recipe-book-ico {
  font-size: 24px;
}
.recipe-book-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--ink);
}
.recipe-book-sub {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}
.recipe-event-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.recipe-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.recipe-item-card {
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform 0.15s ease;
}
.recipe-item-card:hover {
  transform: translateY(-2px);
}
.recipe-item-card.recipe-ready {
  background: #f0fdf4;
  border-color: #16a34a;
}
.recipe-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.recipe-dish-emoji {
  font-size: 20px;
}
.recipe-dish-info {
  flex: 1;
}
.recipe-dish-name {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.recipe-dish-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #d97706;
  text-transform: uppercase;
}
.recipe-price-tag {
  font-size: 13px;
  font-weight: 900;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1.5px solid #d97706;
}
.recipe-ingredients-row {
  font-size: 11px;
  color: #475569;
  margin-bottom: 6px;
  line-height: 1.35;
}
.recipe-ing-label {
  font-weight: 700;
}
.recipe-ing-val {
  font-weight: 600;
}
.recipe-stock-status {
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 6px;
  padding: 3px 6px;
}
.recipe-stock-status.status-ok {
  background: #dcfce7;
  color: #15803d;
}
.recipe-stock-status.status-waiting {
  background: #fef2f2;
  color: #b91c1c;
}

/* =========================================================
   NOTIFICAÇÃO DE CHEGADA DO NOVO PINGUIM
   ========================================================= */
.penguin-arrival-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border: 2px solid #f59e0b;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 6px 0 10px 0;
  box-shadow: 0 3px 0 #b45309;
}
.arrival-ico {
  font-size: 24px;
}
.arrival-title {
  font-size: 13px;
  font-weight: 900;
  color: #92400e;
}
.arrival-sub {
  font-size: 11px;
  font-weight: 600;
  color: #78350f;
}

/* =========================================================
   ANIMAÇÃO HERO DE PESCA RARA & LENDÁRIA
   ========================================================= */
.rare-fish-celebration-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fef08a 0%, #fde047 30%, #f59e0b 100%);
  border: 3px solid #14283b;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  text-align: center;
  box-shadow: 0 5px 0 #14283b, 0 0 24px rgba(245, 158, 11, 0.45);
  animation: heroGoldGlow 2.5s infinite alternate ease-in-out;
}
@keyframes heroGoldGlow {
  0% { box-shadow: 0 5px 0 #14283b, 0 0 12px rgba(245, 158, 11, 0.3); }
  100% { box-shadow: 0 5px 0 #14283b, 0 0 28px rgba(245, 158, 11, 0.7); }
}
.rare-fish-content {
  position: relative;
  z-index: 2;
}
.rare-sparkles {
  font-size: 18px;
  letter-spacing: 4px;
  animation: sparkleTwinkle 1.5s infinite alternate;
}
@keyframes sparkleTwinkle {
  from { transform: scale(0.9); opacity: 0.8; }
  to { transform: scale(1.1); opacity: 1; }
}
.rare-fish-big-icon {
  font-size: 46px;
  margin: 4px 0;
  animation: fishTrophyBounce 1s infinite alternate cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes fishTrophyBounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.1); }
}
.rare-celebration-title {
  margin: 0 0 4px 0;
  font-size: 17px;
  font-weight: 900;
  color: #78350f;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}
.rare-celebration-desc {
  margin: 0 0 8px 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #14283b;
}
.rare-celebration-badge {
  display: inline-block;
  background: #14283b;
  color: #fef08a;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.fish-pill.rare-glow-pill {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
  font-weight: 800 !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6) !important;
  animation: pillGlow 1.5s infinite alternate;
}
@keyframes pillGlow {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* =========================================================
   EXPERIÊNCIA 3D DIEGÉTICA & MINIMALISTA ESTILO PS1 (V2)
   ========================================================= */
body {
  overflow: hidden;
  padding-bottom: 0;
  height: 100vh;
}

/* 1. O Palco 3D ocupa 100% da tela limpa ao fundo (Câmera Fixa Ideal) */
#icebergStageBox {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 1 !important;
  background: #0f172a;
  pointer-events: auto !important;
}

#icebergStageBox > .box-header {
  display: none !important;
}

#icebergCanvas {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
}

.iceberg-3d-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: #f8fafc;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(30, 64, 175, 0.32), rgba(2, 6, 23, 0.88));
  pointer-events: none;
}

.iceberg-3d-error strong {
  font-size: clamp(20px, 3vw, 30px);
}

.iceberg-3d-error span {
  max-width: 440px;
  color: #dbeafe;
  font-size: 14px;
}

.webgl-iceberg-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: default;
}

/* Ícones Vetoriais de Jogo (.game-svg-ico) */
.game-svg-ico {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 1.5px 0 rgba(2, 6, 23, 0.55));
}

/* 2. HUD Superior em 3 Ilhas Flutuantes de Jogo */
.topbar.ps1-hud-topbar {
  position: fixed;
  top: 10px;
  left: 14px;
  right: 14px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

.hud-island {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.88) 0%, rgba(9, 14, 28, 0.92) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 2px solid rgba(56, 189, 248, 0.55);
  border-bottom: 4px solid #020617;
  border-radius: 14px;
  padding: 5px 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* Ilha Esquerda: Trilha Vertical de Dias da Partida (Maior & Mais Translúcida) */
.hud-col-days.hud-island-left {
  position: fixed;
  top: 10px;
  left: 14px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px 7px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(9, 14, 28, 0.55) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(56, 189, 248, 0.30);
  border-bottom: 3.5px solid rgba(2, 6, 23, 0.6);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Ilha Central: Barra de Vantagem / Disputa Polar (Tug-of-War) Centralizada & Mais Ampla */
.hud-col-battle.hud-island-center {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  width: auto;
  min-width: 390px;
  max-width: 480px;
  padding: 5px 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.50) 0%, rgba(9, 14, 28, 0.60) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(148, 163, 184, 0.35);
  border-bottom: 3.5px solid rgba(2, 6, 23, 0.6);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.topbar #marketBattleHub {
  width: 100%;
  min-width: 370px;
}
.topbar #marketBattleHub .battle-card {
  padding: 2px 4px !important;
  margin: 0 !important;
  gap: 3px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.topbar #marketBattleHub .battle-hdr-row {
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  margin-bottom: 3px !important;
  color: #f8fafc !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topbar #marketBattleHub .battle-team {
  color: #f8fafc !important;
  font-size: 13px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topbar #marketBattleHub .battle-meter-wrap {
  height: 11px !important;
  margin: 0 !important;
  border-radius: 999px !important;
}

/* Ilha de Status (Moedas, Obras, Estoque & Ações) ao lado da Trilha de Dias */
.hud-col-right.hud-island-status {
  position: fixed;
  top: 10px;
  left: 164px;
  z-index: 42;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(9, 14, 28, 0.55) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(148, 163, 184, 0.28);
  border-bottom: 3.5px solid rgba(2, 6, 23, 0.6);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.ps1-hud-resources {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Pílulas de Recursos Polares Compactas com Ícones Diretos */
.ps1-res-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9px;
  background: rgba(30, 41, 59, 0.50);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  user-select: none;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
}

.ps1-res-pill .res-svg-slot {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.ps1-res-pill.gold {
  border-color: rgba(251, 191, 36, 0.45);
}
.ps1-res-pill.gold .res-num {
  color: #fef08a;
}

.ps1-res-pill.cyan {
  border-color: rgba(56, 189, 248, 0.45);
}
.ps1-res-pill.cyan .res-num {
  color: #a7f3d0;
}

.ps1-res-pill.blue {
  border-color: rgba(56, 189, 248, 0.45);
}
.ps1-res-pill.blue .res-num {
  color: #bae6fd;
}
.res-num {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.3px;
  text-shadow: 0 1.5px 0 rgba(2, 6, 23, 0.85);
}

/* Botões Arcade de Ação Estilizados em Ícones (.hud-icon-btn) */
.hud-icon-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  flex-shrink: 0;
}

.stock-pill-wrapper {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ps1-hud-resources > .stock-pill-wrapper .ps1-stock-popover {
  position: absolute;
  top: calc(100% + 12px);
  left: var(--stock-popover-left, 0px);
  right: auto;
  transform: none;
  width: min(280px, 90vw);
  max-height: min(420px, 70vh);
  background: #f8fafc;
  border: 2px solid #0284c7;
  border-bottom: 4px solid #0f172a;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 80;
  pointer-events: auto;
}

.stock-help-btn {
  width: 23px;
  height: 23px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid #7dd3fc;
  border-radius: 50%;
  background: #075985;
  color: #ffffff;
  font: 800 13px/1 'Baloo 2', 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 0 #020617;
}

.stock-help-btn[hidden],
.ps1-stock-popover[hidden] {
  display: none !important;
}

.stock-help-btn:hover {
  background: #0284c7;
}

.stock-help-btn:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 2px;
}

.stock-spyglass-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}

.stock-popover-close {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-left: 8px;
  font-size: 20px;
}

.topbar.ps1-hud-topbar.stock-popover-open,
.topbar.ps1-hud-topbar.stock-report-available {
  z-index: 90;
}

.hud-col-right.hud-island-status:has(#btnRivalStock:not([hidden])) {
  z-index: 46;
}

/* Divisor sutil no HUD e Botões Arcade */
.hud-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  border-left: 1.5px solid rgba(148, 163, 184, 0.3);
}

.hud-arcade-btn,
.game-arcade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 2px solid #020617 !important;
  border-bottom: 4px solid #020617 !important;
  border-radius: 10px !important;
  text-shadow: 0 1.5px 0 rgba(2, 6, 23, 0.65);
  opacity: 0.88 !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transition: transform 0.08s ease, filter 0.12s ease, opacity 0.12s ease !important;
}

.hud-arcade-btn[hidden],
.game-arcade-btn[hidden],
#btnStart[hidden],
[hidden] {
  display: none !important;
}
.hud-arcade-btn:hover:not(:disabled),
.game-arcade-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
  opacity: 1 !important;
}
.hud-arcade-btn:active:not(:disabled),
.game-arcade-btn:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 2px !important;
}
.game-arcade-btn.gold {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.88), rgba(217, 119, 6, 0.88)) !important;
  color: #020617 !important;
}
.game-arcade-btn.blue {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.88), rgba(2, 132, 199, 0.88)) !important;
  color: #ffffff !important;
}
.game-arcade-btn.red {
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.88), rgba(220, 38, 38, 0.88)) !important;
  color: #ffffff !important;
}
.game-arcade-btn.green {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.92), rgba(21, 128, 61, 0.92)) !important;
  color: #ffffff !important;
}
.game-arcade-btn.cyan {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.92), rgba(8, 145, 178, 0.92)) !important;
  color: #020617 !important;
}
/* 3. Placas 3D Chanfradas de Jogo nas Estações do Iceberg (.ps1-zone-tag) */
.iceberg-3d-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.ps1-zone-tag {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.80) 0%, rgba(15, 23, 42, 0.84) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.90;
  color: #ffffff;
  border: 2.5px solid var(--zone-accent, #38bdf8);
  border-bottom: 5px solid #020617;
  border-radius: 12px;
  padding: 5px 10px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}
.ps1-zone-tag:hover {
  transform: translate(-50%, -104%) scale(1.03);
  opacity: 1;
}
.ps1-zone-tag.zone-active {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.84) 0%, rgba(15, 23, 42, 0.88) 100%);
  border-color: #fef08a;
  box-shadow: 0 5px 0 #020617, 0 0 16px rgba(254, 240, 138, 0.55);
}

.ps1-zone-main-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ps1-zone-tag[data-zone-role="dive"],
.ps1-zone-tag[data-zone-role="patrol"] {
  width: auto;
  z-index: 20;
}

.ps1-zone-tag[data-zone-role="dive"].has-loot-open,
.ps1-zone-tag[data-zone-role="dive"].has-dive-info-open,
.ps1-zone-tag[data-zone-role="build"].has-usina-info-open {
  z-index: 60;
}

.dive-loot-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  transform: translateY(8px);
  z-index: 70;
  display: grid;
  gap: 7px;
  width: min(250px, 78vw);
  box-sizing: border-box;
  padding: 9px;
  border: 1.5px solid rgba(56, 189, 248, 0.8);
  border-radius: 11px;
  background: rgba(7, 20, 39, 0.97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48);
  color: #f8fafc;
  cursor: default;
  text-align: left;
  white-space: normal;
}

.dive-loot-popover[hidden] {
  display: none;
}

.dive-loot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #bae6fd;
  font-size: 10px;
  letter-spacing: 0.4px;
}

.dive-loot-close {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(186, 230, 253, 0.55);
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.9);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.dive-loot-items {
  display: grid;
  gap: 4px;
}

.dive-loot-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(2, 132, 199, 0.22);
  line-height: 1.2;
}

.dive-loot-item b {
  color: #fde68a;
  font-size: 10px;
}

.dive-loot-item span {
  color: #f8fafc;
  font-size: 10px;
  font-weight: 800;
  white-space: normal;
}

.usina-info-copy {
  margin: 0;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

#diveLootPopover .usina-info-copy {
  font-size: 12px;
  line-height: 1.4;
}

.usina-info-copy strong {
  color: #fde68a;
}

.ps1-step-info-btn {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border-color: #0c4a6e;
  background: linear-gradient(180deg, #bae6fd, #38bdf8);
  color: #082f49;
  font-size: 13px;
  text-shadow: none;
}

.ps1-step-info-btn.dive-info-trigger {
  border: 1.5px solid #7dd3fc !important;
  border-radius: 50% !important;
  background: #075985 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 0 #020617 !important;
  text-shadow: none !important;
}

.ps1-step-info-btn.dive-info-trigger:hover {
  background: #0284c7 !important;
  transform: translateY(-50%) !important;
}

.ps1-zone-tag .dive-info-trigger,
.ps1-zone-tag-build .usina-info-trigger {
  position: absolute;
  right: -31px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
}

.ps1-step-btn:disabled {
  cursor: not-allowed;
  filter: saturate(0.45);
  opacity: 0.45;
}

.ps1-zone-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ps1-zone-label {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: #f8fafc;
  letter-spacing: 0.4px;
  text-shadow: 0 2px 0 #020617;
}

.ps1-step-btn {
  width: 28px;
  height: 28px;
  border: 2px solid #020617;
  border-bottom: 4px solid #020617;
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(71, 85, 105, 0.85), rgba(30, 41, 59, 0.86));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  text-shadow: 0 1.5px 0 #020617;
  opacity: 0.90;
  transition: transform 0.08s ease, filter 0.12s ease, opacity 0.12s ease;
}
.ps1-step-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  opacity: 1;
}
.ps1-step-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.ps1-zone-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 7px;
  background: rgba(254, 240, 138, 0.16);
  border: 1.5px solid rgba(254, 240, 138, 0.55);
  border-radius: 6px;
  color: #fef08a;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  min-width: 40px;
  text-align: center;
  text-shadow: 0 1.5px 0 #020617;
}

/* Botões Arcade 3D Acoplados às Estações */
.ps1-tag-action-btn {
  background: linear-gradient(180deg, rgba(253, 224, 71, 0.88), rgba(245, 158, 11, 0.88));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0.90;
  color: #0f172a;
  border: 2px solid #020617;
  border-bottom: 4px solid #020617;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.12s ease, opacity 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ps1-tag-action-btn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
  opacity: 1;
}
.ps1-tag-action-btn:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 2px;
}
.ps1-tag-action-btn.btn-recipes,
.ps1-tag-action-btn.recipe-btn {
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.88), rgba(225, 29, 72, 0.88));
  color: #ffffff;
  border-color: #020617;
  text-shadow: 0 1.5px 0 #020617;
}
.ps1-tag-action-btn.btn-upgrades,
.ps1-tag-action-btn.upgrade-btn {
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.88), rgba(5, 150, 105, 0.88));
  color: #022c22;
  border-color: #020617;
}
.ps1-tag-action-btn.btn-upgrades.is-queued {
  background: linear-gradient(180deg, rgba(253, 224, 71, 0.88), rgba(217, 119, 6, 0.88));
  color: #0f172a;
}
.ps1-tag-action-btn.btn-hire,
.ps1-tag-action-btn.hire-btn {
  background: linear-gradient(180deg, rgba(253, 224, 71, 0.88), rgba(234, 179, 8, 0.88));
  color: #0f172a;
  padding: 6px 12px;
  font-size: 12px;
}
.ps1-tag-action-btn.btn-hire.is-hired {
  background: linear-gradient(180deg, rgba(134, 239, 172, 0.88), rgba(22, 163, 74, 0.88));
  color: #052e16;
}
.ps1-tag-action-btn.btn-hire.is-confirming {
  background: linear-gradient(180deg, #4ade80, #15803d);
  color: #052e16;
  border-color: #020617;
  opacity: 1 !important;
  animation: hire-confirm-pulse 1.15s ease-in-out infinite;
}
@keyframes hire-confirm-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.65);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
    filter: brightness(1.08);
  }
}
.ps1-tag-action-btn:disabled,
.ps1-tag-action-btn.hire-btn.disabled {
  background: rgba(51, 65, 85, 0.75);
  color: #94a3b8;
  border-color: #020617;
  cursor: not-allowed;
  opacity: 0.75;
}

/* 4. Bandeja Horizontal de Peixes no Estoque (#bottomStockTray) no Canto Inferior Esquerdo */
.ps1-stock-tray {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 36;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(50vw - 170px);
  min-width: 220px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(9, 14, 28, 0.97));
  border: 2.5px solid #38bdf8;
  border-bottom: 5px solid #020617;
  border-radius: 12px;
  padding: 6px 12px;
  box-shadow: 0 6px 16px rgba(2, 6, 23, 0.55);
  pointer-events: auto;
  overflow-x: auto;
}

.stock-tray-hdr {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #bae6fd;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stock-tray-items {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.stock-tray-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1e293b;
  border: 1.5px solid #475569;
  border-radius: 8px;
  padding: 3px 8px;
  color: #f8fafc;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.stock-tray-empty {
  font-size: 11.5px;
  font-weight: 700;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 5. Painéis Antigos Ocultos no DOM para Compatibilidade 100% com Testes */
.main-stage {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  display: block;
  padding: 0;
  margin: 0;
  max-width: none;
}

.arena-center {
  pointer-events: none;
  display: block;
}

.ps1-hidden-dom-store,
#companyPlayer,
#companyBot,
#weatherBanner {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* O container #allocPanel fica invisível, deixando apenas #btnConfirm e #recipeBookHub ativos */
#allocPanel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

#allocPanel > .box-header,
#allocPanel > #techHubContainer,
#allocPanel > #allocPreview,
#allocPanel > #allocTip {
  display: none !important;
}

#classicAllocGroup {
  pointer-events: none;
}
#rolesGrid .role-clean-card > .role-clean-top,
#rolesGrid .role-clean-card > .stepper-row {
  display: none !important;
}
#rolesGrid,
#rolesGrid .role-clean-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* 6. Modal Centralizado do Cardápio de Receitas da Cozinha (#recipeBookHub) */
#recipeBookHub {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.74);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  padding: 28px 16px 16px;
}

body.show-recipes-modal #recipeBookHub {
  opacity: 1;
  pointer-events: auto;
}

#recipeBookHub .cook-mini-box.recipe-modal-card {
  width: min(740px, 95vw);
  max-height: 86vh;
  overflow-y: auto;
  background: #ffffff;
  border: 3.5px solid #0284c7;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 10px 0 #020617, 0 20px 50px rgba(0, 0, 0, 0.65);
  transform: scale(0.95);
  transition: transform 0.18s ease;
}

body.show-recipes-modal #recipeBookHub .cook-mini-box.recipe-modal-card {
  transform: scale(1);
}

#recipeBookHub .cook-recipe-toggle-btn {
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

#recipeBookHub .cook-recipe-drawer.is-collapsed,
#recipeBookHub .cook-recipe-drawer.is-open {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding-top: 4px !important;
}

.recipe-modal-close-btn {
  background: #fee2e2;
  color: #991b1b;
  border: 2px solid #020617;
  border-radius: 9px;
  padding: 6px 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 0 #020617;
  white-space: nowrap;
}
.recipe-modal-close-btn:hover {
  background: #fecaca;
}

/* Barra de Resumo do Estoque para a Cozinha */
.recipe-stock-summary-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #f0f9ff;
  border: 2px solid #bae6fd;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.stock-sum-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0369a1;
}

.stock-sum-pill {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
}

/* Lista Horizontal de Receitas da Semana (.clean-recipe-row) */
.clean-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.clean-recipe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #f8fafc;
  border: 2.5px solid #cbd5e1;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.08);
}

.clean-recipe-row.recipe-ready {
  background: #f0fdf4;
  border-color: #22c55e;
}

.clean-recipe-eq {
  font-family: 'Fredoka', sans-serif;
  font-size: 19px;
  font-weight: 900;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 11px;
  padding: 8px 12px;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.08);
}

.clean-recipe-main {
  flex: 1;
  min-width: 180px;
}

.clean-recipe-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.clean-recipe-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}

.clean-recipe-badge {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.3px;
}

.clean-recipe-ing {
  font-size: 13px;
  color: #334155;
}

.clean-recipe-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.clean-recipe-price {
  font-family: 'Fredoka', sans-serif;
  font-size: 18px;
  font-weight: 900;
  background: #fef3c7;
  color: #b45309;
  border: 2px solid #f59e0b;
  border-radius: 9px;
  padding: 3px 10px;
}

.clean-recipe-status {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}
.clean-recipe-status.ok {
  background: #dcfce7;
  color: #166534;
}
.clean-recipe-status.wait {
  background: #fef3c7;
  color: #92400e;
}

/* 6b. Modal Temático Polar de Upgrades, Cardápio & Regras (.ps1-clean-modal-card) */
.ps1-clean-modal-card {
  width: min(880px, 95vw) !important;
  max-width: 880px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  padding: 22px 24px !important;
  border-radius: 20px !important;
  border: 3.5px solid #0284c7 !important;
  border-bottom: 6px solid #0369a1 !important;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 16px 45px rgba(2, 132, 199, 0.35) !important;
}

.ps1-clean-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-right: 36px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid rgba(2, 132, 199, 0.2);
}

.ps1-clean-modal-title {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #0369a1;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 1px 0 #ffffff;
}

.ps1-modal-res-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ps1-modal-pill {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  border: 2px solid rgba(148, 163, 184, 0.4);
  background: #ffffff;
  color: #334155;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
.ps1-modal-pill.cyan { background: #e0f2fe; border-color: #0284c7; color: #0369a1; }
.ps1-modal-pill.gold { background: #fef3c7; border-color: #d97706; color: #b45309; }
.ps1-modal-pill.green { background: #dcfce7; border-color: #16a34a; color: #15803d; }
.ps1-modal-pill.red { background: #fee2e2; border-color: #dc2626; color: #b91c1c; }
.ps1-modal-pill.blue { background: #dbeafe; border-color: #2563eb; color: #1d4ed8; }

/* Grade Limpa de Upgrades (.clean-upg-grid) */
.clean-upg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.upg-instructions {
  margin: -4px 0 14px;
  color: #334155;
  font: 600 14px/1.45 'Fredoka', sans-serif;
}

.clean-upg-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  background: #ffffff;
  border: 2.5px solid #cbd5e1;
  border-bottom: 4.5px solid #94a3b8;
  border-radius: 16px;
  padding: 15px;
  color: #1e293b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.clean-upg-card:hover {
  transform: translateY(-2px);
  border-color: #0284c7;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.18);
}

.clean-upg-card.is-owned {
  background: #f0fdf4;
  border-color: #22c55e;
  border-bottom-color: #16a34a;
}

.clean-upg-card.is-queued {
  background: #fffbeb;
  border-color: #f59e0b;
  border-bottom-color: #d97706;
}

.upg-card-name {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 2px;
}

.upg-card-desc {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
  margin: 0;
}

.upg-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upg-card-ico {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1.5px solid;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.upg-card-title-col {
  flex: 1;
  min-width: 0;
}

.upg-card-name {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 2px;
}

.upg-card-track {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid currentColor;
}

.upg-card-pts {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  background: #fef3c7;
  color: #b45309;
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
}

.upg-card-desc {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #334155;
  margin: 0;
}

.upg-card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1.5px dashed #cbd5e1;
}

.upg-costs-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.upg-cost-item {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 8px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 800;
  border: 1.5px solid;
}
.cost-label {
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}
.cost-val {
  font-size: 13px;
  font-weight: 900;
}
.upg-cost-item.cost-ok {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}
.upg-cost-item.cost-miss {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}
.cost-badge-ok {
  color: #15803d;
  font-weight: 900;
}
.cost-badge-miss {
  color: #b91c1c;
  font-weight: 800;
  font-size: 10px;
  white-space: nowrap;
}

.upg-action-row {
  width: 100%;
}

.upg-action-btn {
  width: 100%;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.upg-action-btn.btn-build {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
  color: #020617 !important;
  border: 1.5px solid #020617 !important;
  border-bottom: 3.5px solid #020617 !important;
}
.upg-action-btn.btn-cancel {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #020617 !important;
  border-bottom: 3.5px solid #020617 !important;
}
.upg-action-btn.btn-disabled {
  background: #e2e8f0 !important;
  color: #334155 !important;
  border: 1.5px solid #94a3b8 !important;
  cursor: not-allowed;
}

.upg-action-btn.btn-disabled span {
  line-height: 1.25;
}

.stock-floor-help-btn {
  position: absolute;
  z-index: 12;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

@media (max-width: 680px) {
  .clean-upg-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .upg-cost-item {
    gap: 3px;
    padding: 5px 6px;
    font-size: 11px;
  }
}

.upg-status-pill.is-installed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.2);
  border: 1.5px solid #22c55e;
  color: #166534;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 900;
}

/* =========================================================
   PANFLETO DE RESTAURANTE: CARDÁPIO DO CHEF (.restaurant-pamphlet)
   ========================================================= */
.restaurant-pamphlet {
  background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
  border: 3px solid #d97706;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 10px 28px rgba(217, 119, 6, 0.15);
  color: #1e293b;
}

.pamphlet-header {
  text-align: center;
  margin-bottom: 16px;
}

.pamphlet-badge-ribbon {
  display: inline-block;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #b45309;
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  border-radius: 999px;
  padding: 3px 14px;
  margin-bottom: 4px;
}

.pamphlet-title {
  font-family: 'Baloo 2', 'Fredoka', serif, sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #92400e;
  letter-spacing: 0.5px;
  margin: 0 0 2px 0;
  text-shadow: 0 1px 0 #ffffff;
}

.pamphlet-sub {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: #78350f;
  margin-bottom: 6px;
}

.pamphlet-ornament {
  color: #d97706;
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.85;
  margin-bottom: 12px;
}

.pamphlet-stock-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pamphlet-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pamphlet-dish-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.pamphlet-dish-card:hover {
  transform: translateX(2px);
  border-color: #f59e0b;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18);
}

.pamphlet-dish-card.is-ready {
  border-color: #22c55e;
  background: #f0fdf4;
}

.pamphlet-dish-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 12px;
}

.pamphlet-dish-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}

.pamphlet-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid;
  text-transform: uppercase;
}
.pamphlet-tag.gold {
  background: #fef3c7;
  color: #92400e;
  border-color: #d97706;
}
.pamphlet-tag.cyan {
  background: #e0f2fe;
  color: #075985;
  border-color: #0284c7;
}
.pamphlet-tag.green {
  background: #dcfce7;
  color: #166534;
  border-color: #16a34a;
}
.pamphlet-tag.blue {
  background: #dbeafe;
  color: #1e40af;
  border-color: #2563eb;
}

.pamphlet-leader {
  flex: 1;
  border-bottom: 1.5px dotted rgba(148, 163, 184, 0.35);
  margin: 0 4px;
  height: 1px;
}

.pamphlet-price {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 900;
  color: #d97706;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pamphlet-dish-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pamphlet-ingredients {
  display: flex;
  flex: 1 1 230px;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.pamphlet-ing-label {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pamphlet-ing-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #334155;
}

.pamphlet-formula {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #334155;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

.pamphlet-formula-alt {
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
}

.pamphlet-dish-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pamphlet-status-stamp {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  border: 1.5px solid;
}
.pamphlet-status-stamp.ok {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}
.pamphlet-status-stamp.miss {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}

.pamphlet-footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px dashed rgba(217, 119, 6, 0.35);
}

.pamphlet-chef-seal {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffbeb;
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12.5px;
  color: #78350f;
  line-height: 1.4;
}

/* =========================================================
   PANFLETO DA OFICINA DE UPGRADES (.tech-pamphlet)
   ========================================================= */
.tech-pamphlet {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
  border: 3px solid #0284c7;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(2, 132, 199, 0.15);
  color: #1e293b;
}

.tech-pamphlet .tech-ribbon {
  color: #0369a1;
  background: #e0f2fe;
  border-color: #0284c7;
}

.tech-pamphlet .tech-title {
  color: #0c4a6e;
}

.tech-pamphlet .tech-ornament {
  color: #0284c7;
}

.pamphlet-tag.pink {
  background: #ffe4e6;
  color: #9f1239;
  border-color: #fb7185;
}

.tech-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tech-dish-card {
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.tech-dish-card:hover {
  transform: translateX(2px);
  border-color: #0284c7;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.16);
}

.tech-dish-card.is-installed {
  background: #f0fdf4;
  border-color: #22c55e;
}

.tech-dish-card.is-queued {
  background: #fffbeb;
  border-color: #f59e0b;
}

.tech-card-title {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
}

.tech-card-pts {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 900;
  color: #b45309;
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  border-radius: 8px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tech-card-desc {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: #334155;
  margin: 2px 0 6px;
}

.tech-card-costs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.tech-cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.tech-cost-chip.cost-ok {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  color: #166534;
}

.tech-cost-chip.cost-miss {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #991b1b;
}

.tech-cost-chip .cost-tick {
  color: #16a34a;
  font-weight: 900;
  margin-left: 2px;
}

.tech-cost-chip .cost-gap {
  color: #dc2626;
  font-weight: 700;
  margin-left: 2px;
}

.tech-queue-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.tech-queue-btn:active {
  transform: translateY(1px);
}

.tech-queue-btn.btn-pick {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  border: 2px solid #0369a1;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25);
}

.tech-queue-btn.btn-pick:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #0284c7 100%);
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.tech-queue-btn.btn-queued {
  background: linear-gradient(180deg, #fef08a 0%, #eab308 100%);
  border: 2px solid #ca8a04;
  color: #713f12;
  box-shadow: 0 2px 8px rgba(202, 138, 4, 0.2);
}

.tech-queue-btn.btn-queued:hover {
  background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%);
}

.tech-queue-btn.btn-disabled {
  background: #f1f5f9;
  border: 2px dashed #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.9;
}

.is-installed-stamp {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #dcfce7;
  border: 2px solid #22c55e;
  color: #15803d;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
}

.tech-seal {
  background: #f0fdf4;
  border-color: #38bdf8;
  color: #0f172a;
}

.tech-installed-shelf {
  margin-top: 12px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tech-installed-shelf.empty {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.7);
}

.tech-shelf-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13px;
  color: #0f172a;
}

.tech-shelf-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tech-shelf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: 3px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #166534;
}

.tech-shelf-chip .chip-dot {
  color: #22c55e;
  font-size: 10px;
}

.tech-shelf-chip .chip-pts {
  color: #15803d;
  font-weight: 800;
  background: #dcfce7;
  padding: 1px 5px;
  border-radius: 4px;
}

.tech-shelf-empty-txt {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

/* 7. Botão Flutuante Direto CONFIRMAR SEMANA (#btnConfirm) no centro inferior — Verde Esmeralda Glacial */
#btnConfirm {
  position: fixed !important;
  bottom: 38px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  min-width: 290px !important;
  max-width: 90vw !important;
  margin: 0 !important;
  padding: 15px 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 18.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 0 #022c22 !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.90) 0%, rgba(5, 150, 105, 0.90) 100%) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  opacity: 0.90 !important;
  border-radius: 999px !important;
  border: 3.5px solid #064e3b !important;
  border-bottom: 6px solid #022c22 !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4), 0 4px 0 #064e3b !important;
  z-index: 38 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease, opacity 0.12s ease !important;
}
#btnConfirm:hover:not(:disabled) {
  transform: translateX(-50%) translateY(-2px) !important;
  filter: brightness(1.1) !important;
  opacity: 1 !important;
  box-shadow: 0 12px 28px rgba(16, 185, 129, 0.6), 0 5px 0 #064e3b !important;
}
#btnConfirm:active:not(:disabled) {
  transform: translateX(-50%) translateY(2px) !important;
  border-bottom-width: 3.5px !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
#btnConfirm:disabled {
  background: rgba(30, 41, 59, 0.82) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
  border-bottom: 5px solid #0f172a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  opacity: 0.9 !important;
  cursor: not-allowed !important;
}

/* 8. Relatório de Fim de Turno Flutuante Centralizado (#reportPanel) */
#reportPanel {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, calc(-50% + 8px)) !important;
  width: min(740px, 94vw);
  max-width: 740px;
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 55;
  pointer-events: auto;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 3.5px solid #0284c7 !important;
  border-bottom: 6px solid #0369a1 !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 50px rgba(2, 132, 199, 0.4), 0 0 0 9999px rgba(15, 23, 42, 0.55) !important;
  color: #0f172a !important;
}

/* 9. Leitor de Regras em Markdown (.md-rules-reader) */
.md-rules-reader {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.md-rules-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.md-tab-btn {
  flex: 1;
  min-width: 130px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 2px solid #cbd5e1;
  border-bottom: 4px solid #94a3b8;
  background: #f8fafc;
  color: #334155;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.md-tab-btn:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
  color: #0369a1;
}

.md-tab-btn.active {
  background: #0284c7;
  border-color: #020617;
  color: #ffffff;
  box-shadow: 0 3px 0 #020617;
}

.md-rules-body {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px 24px;
  color: #1e293b;
  line-height: 1.68;
  font-size: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

.md-h1 {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 3px solid #38bdf8;
}

.md-h2 {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 17.5px;
  font-weight: 800;
  color: #0369a1;
  margin: 16px 0 8px 0;
}

.md-h3 {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #0c4a6e;
  margin: 19px 0 5px 0;
  padding: 7px 10px;
  background: #f0f9ff;
  border-left: 3px solid #38bdf8;
  border-radius: 5px;
}

.md-p {
  margin: 0 0 10px 0;
  color: #334155;
}

.md-callout {
  background: #f0f9ff;
  border-left: 4px solid #0284c7;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 14px 0;
  color: #0c4a6e;
  font-weight: 600;
  line-height: 1.6;
}

.md-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 1px 6px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
}

.md-list {
  margin: 8px 0 16px 20px;
  padding: 0;
}

.md-list li {
  margin-bottom: 7px;
  color: #1e293b;
  padding-left: 3px;
  line-height: 1.55;
}

.md-table-wrap {
  overflow-x: auto;
  margin: 12px 0;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #cbd5e1;
}

.md-table th {
  background: #0f172a;
  color: #f8fafc;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-weight: 800;
  text-align: left;
  padding: 9px 12px;
}

.md-table td {
  padding: 8px 12px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #1e293b;
}

.md-table tr:nth-child(even) td {
  background: #f1f5f9;
}

.md-hr {
  border: none;
  border-top: 2px dashed #cbd5e1;
  margin: 14px 0;
}

/* 10. Start Modal — Design Arcade Polar (Logo pinguINC + 3 Blocos de Dificuldade + 1v1 Online) */
.start-modal-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(620px, 96vw);
  margin: auto;
  gap: 12px;
}

/* LOGO DO JOGO ACIMA DA CAIXA: pinguINC */
.pingu-game-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75));
  user-select: none;
  animation: logoFloat 4s ease-in-out infinite alternate;
  line-height: 1;
  margin-bottom: 2px;
}

@keyframes logoFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

.logo-pingu {
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  font-size: clamp(42px, 7.5vw, 56px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-shadow: 
    -2px -2px 0 #071526,
     2px -2px 0 #071526,
    -2px  2px 0 #071526,
     2px  2px 0 #071526,
     0 4px 0 #0284c7,
     0 7px 0 #034f75,
     0 10px 18px rgba(0, 0, 0, 0.85);
}

.logo-inc-badge {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: clamp(22px, 3.8vw, 28px);
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border: 2.5px solid #ffffff;
  border-bottom: 4px solid #92400e;
  border-radius: 10px;
  padding: 3px 12px;
  letter-spacing: 1.5px;
  transform: rotate(-5deg) translateY(-2px);
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.6);
  text-shadow: 0 2px 0 #78350f;
}

/* Modal Card Estilizada no Tema Polar (Sem Fundo Branco) */
.ps1-start-modal-card {
  width: min(620px, 95vw) !important;
  max-width: 620px !important;
  background: linear-gradient(180deg, #091e36 0%, #051322 100%) !important;
  border: 3.5px solid #38bdf8 !important;
  border-bottom: 7px solid #0369a1 !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

.ps1-start-modal-card .field-label {
  color: #7dd3fc;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  font-weight: 800;
}

.ps1-start-modal-card .cartoon-input {
  background: #04101d !important;
  color: #ffffff !important;
  border: 2px solid #1e3a5f !important;
  border-bottom: 4px solid #020617 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
}
.ps1-start-modal-card .cartoon-input:focus {
  border-color: #38bdf8 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3);
}

/* Modo de Disputa (Solo vs 1v1 Online) */
.mode-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .mode-cards-grid { grid-template-columns: 1fr; }
}

.mode-card-item {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
}
.mode-card-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mode-card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(9, 29, 48, 0.85);
  border: 2.5px solid #1e3a5f;
  border-bottom: 5px solid #061320;
  transition: all 0.16s ease;
}
.mode-card-item:hover .mode-card-content {
  border-color: #38bdf8;
  transform: translateY(-2px);
}
.mode-card-item input[type="radio"]:checked + .mode-card-content {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.3) 0%, rgba(9, 29, 48, 0.95) 100%);
  border-color: #38bdf8;
  border-bottom-color: #0284c7;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.mode-card-badge {
  font-size: 9.5px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.mode-card-badge.online {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.16);
  border-color: rgba(74, 222, 128, 0.4);
}

.mode-card-avatar {
  font-size: 30px;
  line-height: 1;
  margin: 2px 0 6px;
}
.mode-card-title {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.2;
  margin-bottom: 4px;
}
.mode-card-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
}

/* 3 Blocos Temáticos de Dificuldade (Calouro, Capitão, Magnata) - ZERO Fundo Branco! */
.diff-3-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.diff-block-opt {
  position: relative;
  display: block;
  cursor: pointer;
  user-select: none;
}
.diff-block-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.diff-block-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border-radius: 14px;
  background: rgba(9, 29, 48, 0.95);
  border: 2px solid #1e3a5f;
  border-bottom: 5px solid #061320;
  transition: all 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
  gap: 2px;
}
.diff-block-opt:hover .diff-block-card {
  transform: translateY(-2px);
  border-color: #38bdf8;
}

.diff-card-ico {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
}
.diff-card-name {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.diff-card-tier {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.6px;
}

/* Estado Selecionado: Calouro (Verde Esmeralda) */
.diff-calouro input[type="radio"]:checked + .diff-block-card {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.28) 0%, rgba(6, 40, 28, 0.95) 100%);
  border-color: #22c55e;
  border-bottom-color: #15803d;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.45);
}
.diff-calouro input[type="radio"]:checked + .diff-block-card .diff-card-tier {
  color: #4ade80;
}

/* Estado Selecionado: Capitão (Azul Oceânico Ciano) */
.diff-capitao input[type="radio"]:checked + .diff-block-card {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.28) 0%, rgba(8, 47, 73, 0.95) 100%);
  border-color: #38bdf8;
  border-bottom-color: #0284c7;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.45);
}
.diff-capitao input[type="radio"]:checked + .diff-block-card .diff-card-tier {
  color: #7dd3fc;
}

/* Estado Selecionado: Magnata (Dourado Real) */
.diff-magnata input[type="radio"]:checked + .diff-block-card {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.28) 0%, rgba(69, 36, 8, 0.95) 100%);
  border-color: #f59e0b;
  border-bottom-color: #b45309;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}
.diff-magnata input[type="radio"]:checked + .diff-block-card .diff-card-tier {
  color: #fbbf24;
}

/* Grupo Multiplayer Pinguim vs Pinguim */
.mp-lobby-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-flow-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mp-choice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.mp-flow-view {
  background: rgba(4, 16, 29, 0.85);
  border: 2px solid #1e3a5f;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeIn 0.2s ease;
}

.mp-hosting-panel {
  border-color: #f59e0b;
  border-style: dashed;
  text-align: center;
  align-items: center;
}

.mp-room-badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mp-room-lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #94a3b8;
}

.mp-room-code-num {
  font-family: 'Baloo 2', 'Fredoka', monospace;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #facc15;
  text-shadow: 0 2px 10px rgba(250, 204, 21, 0.5);
  line-height: 1.1;
  padding: 2px 10px;
}

.mp-copy-link-btn {
  font-size: 12px !important;
  padding: 8px 16px !important;
}

.mp-waiting-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(15, 23, 42, 0.75);
  border-radius: 20px;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.mp-radar-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
  animation: radarPulse 1.6s infinite;
}

@keyframes radarPulse {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

.mp-waiting-msg {
  font-size: 12px;
  font-weight: 700;
  color: #7dd3fc;
}

.mp-joining-panel {
  border-color: #38bdf8;
}

.mp-join-input-row {
  display: flex;
  gap: 10px;
}

.mp-code-field {
  flex: 1;
  font-family: 'Baloo 2', 'Fredoka', monospace !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 4px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  padding: 9px 12px !important;
  background: #04101d !important;
  border: 2px solid #38bdf8 !important;
}

.mp-confirm-btn {
  padding: 9px 20px !important;
  font-size: 14px !important;
}

.mp-cancel-flow-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.45) !important;
  border-bottom: 2px solid rgba(239, 68, 68, 0.7) !important;
  color: #fca5a5 !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  width: auto !important;
  max-width: fit-content !important;
  margin: 6px auto 0 auto !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  transition: all 0.15s ease !important;
}
.mp-cancel-flow-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.mp-status-pill {
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.85);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

/* =========================================================
   10b. TELA DE TRANSIÇÃO SIMPLIFICADA (.rep-simple-card) — TEMA POLAR HARMONIZADO
   ========================================================= */
.rep-simple-card {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  color: #0f172a;
}

.rep-simple-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(2, 132, 199, 0.2);
}

.rep-simple-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rep-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.rep-view-toggle {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 5px 9px;
  color: #475569;
  background: rgba(255, 255, 255, 0.75);
  font: 700 10px/1.2 'Fredoka', sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.rep-view-toggle:hover {
  background: #ffffff;
  border-color: #94a3b8;
}
.rep-view-toggle:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

.rep-view-toggle.is-rival {
  padding: 3px 6px;
  border: 2px solid #dc2626;
  color: #991b1b;
  background: #fff1f2;
}
.rep-view-toggle.is-rival:hover {
  border-color: #b91c1c;
  background: #ffe4e6;
}
.rep-rival-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1.5px solid #dc2626;
  border-radius: 999px;
  color: #991b1b;
  background: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.35px;
}
.rep-rival-label .game-svg-ico {
  width: 14px;
  height: 14px;
}
.rep-view-toggle.is-back {
  min-width: 84px;
  color: #334155;
}

.rep-rival-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.rep-rival-detail-panel {
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid #fecaca;
  border-radius: 12px;
  background: #fffafa;
}
.rep-rival-detail-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: #7f1d1d;
  font: 800 12px/1.2 'Baloo 2', 'Fredoka', sans-serif;
}
.rep-rival-detail-title .game-svg-ico {
  flex: 0 0 auto;
}
.rep-rival-catch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rep-rival-catch-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid #fecaca;
  border-radius: 999px;
  color: #7f1d1d;
  background: #ffffff;
  font: 700 11px/1.2 'Fredoka', sans-serif;
}
.rep-rival-evolution-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding-left: 17px;
  color: #334155;
  font: 600 11px/1.35 'Fredoka', sans-serif;
}
.rep-rival-empty {
  margin: 0;
  color: #64748b;
  font: 600 11px/1.35 'Fredoka', sans-serif;
}

.rep-simple-w-ico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid #0284c7;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.2);
}

.rep-simple-kicker {
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #0284c7 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.2;
}

.rep-simple-title {
  margin: 0;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #0369a1 !important;
  line-height: 1.15;
  text-shadow: 0 1px 0 #ffffff;
}

.rep-score-pill-vs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  color: #1e293b;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.rep-score-pill-vs .you b { color: #0284c7; }
.rep-score-pill-vs .vs { color: #d97706; font-weight: 900; font-size: 11px; }
.rep-score-pill-vs .rival b { color: #dc2626; }

.rep-stats-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.rep-day-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.rep-day-flow-panel {
  min-width: 0;
  padding: 10px 11px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
}
.rep-day-flow-panel h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  color: #0f172a;
  font: 900 13px/1.2 'Baloo 2', 'Fredoka', sans-serif;
}
.rep-day-flow-panel ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rep-day-flow-panel li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font: 600 10.5px/1.25 'Fredoka', sans-serif;
}
.rep-day-flow-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.rep-day-flow-item .game-svg-ico { flex: 0 0 auto; }
.rep-day-flow-item b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-weight: 800;
  white-space: normal;
}
.rep-day-flow-note {
  flex: 0 0 100%;
  margin-left: 20px;
  color: #64748b;
  font-size: 9px;
  line-height: 1.2;
}
.rep-day-flow-qty {
  flex: 0 0 auto;
  color: #475569;
  text-align: right;
  white-space: nowrap;
}
.rep-day-flow-panel > p {
  margin: 0;
  color: #64748b;
  font: 600 11px/1.3 'Fredoka', sans-serif;
}
.rep-day-flow-panel > .rep-day-flow-hint {
  margin: -3px 0 7px;
  color: #64748b;
  font-size: 9.5px;
}
@media (max-width: 900px) {
  .rep-day-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rep-stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .rep-day-flow { grid-template-columns: 1fr; }
  .rep-simple-hdr { align-items: flex-start; }
  .rep-header-actions { width: 100%; justify-content: space-between; }
  .rep-score-pill-vs { gap: 6px; padding: 5px 9px; font-size: 11.5px; }
  .rep-rival-details { grid-template-columns: 1fr; }
  .recipe-stock-overlay { padding: 10px; }
}

.rep-stat-tile {
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-bottom: 4px solid #94a3b8;
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.12s ease;
}
.rep-stat-tile:hover {
  transform: translateY(-2px);
}
.rep-stat-tile.cyan { border-color: #0284c7; border-bottom-color: #0369a1; }
.rep-stat-tile.gold { border-color: #f59e0b; border-bottom-color: #d97706; }
.rep-stat-tile.rose { border-color: #f43f5e; border-bottom-color: #e11d48; }
.rep-stat-tile.green { border-color: #10b981; border-bottom-color: #059669; }
.rep-stat-tile.is-rare {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
  border-color: #f59e0b;
}

.rep-stat-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
.rep-stat-val {
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1;
}
.rep-stat-lbl {
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  letter-spacing: 0.6px;
}
.rep-stat-sub {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rep-stat-tile.rose .rep-stat-sub {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
}

.rep-special-catches {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border: 1.5px solid #bae6fd;
  border-radius: 14px;
  background: linear-gradient(110deg, #effaff, #ffffff 72%);
}
.rep-special-catches-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: #0369a1;
  font: 800 10px/1.2 'Baloo 2', 'Fredoka', sans-serif;
  letter-spacing: 0.45px;
}
.rep-special-catches-head span {
  color: #64748b;
  font: 600 10px/1.2 'Fredoka', sans-serif;
  letter-spacing: 0;
}
.rep-special-catch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}
.rep-special-catch-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px 10px;
  border: 1.5px solid #7dd3fc;
  border-bottom: 4px solid #0284c7;
  border-radius: 11px;
  color: #0c4a6e;
  background: #ffffff;
  animation: repCatchAppear 0.42s ease-out both;
}
.rep-special-catch-card::before,
.rep-special-catch-card::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.rep-special-catch-icon,
.rep-special-catch-copy {
  position: relative;
  z-index: 1;
}
.rep-special-catch-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}
.rep-special-catch-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.rep-special-catch-copy strong {
  overflow: hidden;
  color: inherit;
  font: 800 11px/1.2 'Fredoka', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rep-special-catch-copy span {
  color: #475569;
  font: 600 10px/1.2 'Fredoka', sans-serif;
}
.rep-special-catch-swordfish {
  border-color: #38bdf8;
  border-bottom-color: #0369a1;
  background: linear-gradient(110deg, #e0f7ff, #ffffff 75%);
}
.rep-special-catch-swordfish::before {
  content: '';
  top: 12px;
  left: -40%;
  width: 48%;
  height: 2px;
  background: #38bdf8;
  box-shadow: 0 0 8px #0284c7;
  transform: rotate(-18deg);
  animation: repSwordSlash 0.65s ease-out both;
}
.rep-special-catch-swordfish .rep-special-catch-icon .game-svg-ico {
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.55));
  animation: repSwordDash 0.65s ease-out both;
}
.rep-special-catch-leviathan {
  border-color: #38bdf8;
  border-bottom-color: #1e3a8a;
  color: #f0f9ff;
  background: linear-gradient(115deg, #0c4a6e, #1e3a8a);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.22);
}
.rep-special-catch-leviathan::before {
  content: '';
  top: 50%;
  left: 18px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  animation: repLeviathanWave 1.1s ease-out both;
}
.rep-special-catch-leviathan .rep-special-catch-copy span {
  color: #bae6fd;
}
.rep-special-catch-leviathan .rep-special-catch-icon .game-svg-ico {
  filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.9));
  animation: repLeviathanRise 1s ease-out both;
}
.rep-special-catch-gold-crab {
  border-color: #fbbf24;
  border-bottom-color: #b45309;
  color: #78350f;
  background: linear-gradient(115deg, #fff7cc, #ffffff 78%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.22);
}
.rep-special-catch-gold-crab::after {
  content: '✦';
  top: 1px;
  right: 9px;
  color: #f59e0b;
  font-size: 22px;
  line-height: 1;
  animation: repCrabSparkle 0.9s ease-out both;
}
.rep-special-catch-gold-crab .rep-special-catch-icon .game-svg-ico {
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.65));
  animation: repGoldenCrabHop 0.8s ease-out both;
}
@keyframes repCatchAppear {
  from { opacity: 0; transform: translateY(7px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes repSwordSlash {
  from { left: -40%; opacity: 0; }
  35% { opacity: 1; }
  to { left: 105%; opacity: 0; }
}
@keyframes repSwordDash {
  0% { transform: translateX(-5px) rotate(-8deg); }
  55% { transform: translateX(5px) rotate(5deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes repLeviathanWave {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
@keyframes repLeviathanRise {
  0% { transform: translateY(5px) scale(0.85); }
  60% { transform: translateY(-3px) scale(1.12); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes repCrabSparkle {
  0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  45% { opacity: 1; transform: scale(1.2) rotate(18deg); }
  100% { opacity: 0.65; transform: scale(1) rotate(0); }
}
@keyframes repGoldenCrabHop {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-6px) rotate(-7deg); }
  70% { transform: translateY(1px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rep-special-catch-card,
  .rep-special-catch-card::before,
  .rep-special-catch-card::after,
  .rep-special-catch-icon .game-svg-ico {
    animation: none !important;
  }
}

.rep-dive-results {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid #7dd3fc;
  border-left: 4px solid #0284c7;
  border-radius: 14px;
  background: linear-gradient(110deg, #effaff 0%, #ffffff 72%);
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.08);
}
.rep-dive-results-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rep-dive-results-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  background: #ffffff;
  font-size: 21px;
}
.rep-dive-results-head h3 {
  margin: 0;
  color: #075985;
  font: 900 14px/1.15 'Baloo 2', 'Fredoka', sans-serif;
}
.rep-dive-results-head p {
  margin: 3px 0 0;
  color: #64748b;
  font: 700 10.5px/1.2 'Fredoka', sans-serif;
}
.rep-dive-results-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.rep-dive-result {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
}
.rep-dive-result-icon {
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1;
}
.rep-dive-result-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: #334155;
  font: 600 11px/1.25 'Fredoka', sans-serif;
}
.rep-dive-result-copy strong {
  color: #0f172a;
  font-weight: 800;
}
.rep-dive-result-copy > span {
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .rep-dive-results { grid-template-columns: 1fr; }
}

.rep-alert-strip {
  display: grid;
  gap: 7px;
}
.rep-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: 9px;
  font: 600 11.5px/1.35 'Fredoka', sans-serif;
}
.rep-alert-item.is-good {
  color: #166534;
  background: rgba(220, 252, 231, 0.78);
  border-color: #bbf7d0;
  border-left-color: #22c55e;
}
.rep-alert-item.is-bad {
  color: #9f1239;
  background: rgba(255, 228, 230, 0.82);
  border-color: #fecdd3;
  border-left-color: #fb7185;
}
.rep-alert-item.is-neutral {
  color: #854d0e;
  background: rgba(254, 243, 199, 0.82);
  border-color: #fde68a;
  border-left-color: #f59e0b;
}
.rep-alert-item.merchant-herald-alert {
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.rep-alert-item.merchant-herald-alert.is-expiring {
  opacity: 0;
  transform: translateY(-4px);
}
.rep-alert-bullet {
  flex: 0 0 auto;
  color: currentColor;
  font-weight: 900;
}

.rep-next-btn {
  margin-top: 4px;
  padding: 12px 24px !important;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%) !important;
  color: #020617 !important;
  border: 2px solid #020617 !important;
  border-bottom: 4px solid #020617 !important;
  border-radius: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.rep-next-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.rep-next-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px !important;
}

/* =========================================================
   10c. RESULTADO FINAL — HIERARQUIA CLARA E PALETA POLAR
   ========================================================= */
#endModal .ps1-clean-modal-card {
  width: min(820px, 95vw) !important;
  max-width: 820px !important;
  max-height: min(90dvh, 820px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: 18px 20px !important;
  background: linear-gradient(180deg, #f8fcff 0%, #e7f4fb 100%) !important;
  border-color: #38bdf8 !important;
  border-bottom-color: #0369a1 !important;
  box-shadow: 0 16px 45px rgba(2, 132, 199, 0.28) !important;
}

#endModal .modal-bottom-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #cbd5e1;
}

.end-showcase {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #0f172a;
}

.end-hero-banner {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 15px;
  background: linear-gradient(110deg, #e0f2fe 0%, #f8fafc 100%);
  border: 2px solid #7dd3fc;
}
.is-victory .end-hero-banner {
  background: linear-gradient(110deg, #fef9c3 0%, #fffbeb 100%);
  border-color: #facc15;
}
.is-defeat .end-hero-banner {
  background: linear-gradient(110deg, #ffe4e6 0%, #fff7f7 100%);
  border-color: #fda4af;
}
.is-tie .end-hero-banner {
  background: linear-gradient(110deg, #e0f2fe 0%, #f0f9ff 100%);
  border-color: #7dd3fc;
}

.end-hero-emblem {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  line-height: 1;
}
.end-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.end-hero-kicker {
  color: #0369a1;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.is-victory .end-hero-kicker { color: #a16207; }
.is-defeat .end-hero-kicker { color: #be123c; }
.end-hero-title {
  margin: 0;
  color: #0f172a;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: clamp(22px, 3.2vw, 27px);
  font-weight: 900;
  line-height: 1.1;
}
.end-hero-sub {
  margin: 1px 0 0;
  color: #475569;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.end-versus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 580px) {
  .end-versus-grid { grid-template-columns: 1fr; }
}

.end-podium-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #bfdbfe;
  border-bottom: 4px solid #94a3b8;
  border-radius: 14px;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.08);
}
.end-podium-card.winner-card {
  background: linear-gradient(180deg, #fffef7 0%, #ffffff 100%);
  border-color: #facc15;
  border-bottom-color: #d97706;
}
.end-podium-card.tied-card {
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  border-color: #7dd3fc;
  border-bottom-color: #0284c7;
}

.end-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.end-card-team {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.end-team-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
}
.winner-card .end-team-avatar { background: #fef9c3; border-color: #facc15; }
.tied-card .end-team-avatar { background: #e0f2fe; border-color: #7dd3fc; }
.end-team-role {
  color: #64748b;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.35px;
}
.end-team-name {
  color: #0f172a;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.end-rank-tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
.end-rank-tag.is-winner { color: #854d0e; background: #fef3c7; border-color: #facc15; }
.end-rank-tag.is-tied { color: #075985; background: #e0f2fe; border-color: #7dd3fc; }

.end-total-score-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  color: #0f172a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}
.winner-card .end-total-score-box { background: #fffbeb; border-color: #fde68a; }
.tied-card .end-total-score-box { background: #f0f9ff; border-color: #bae6fd; }
.end-score-lbl {
  color: #64748b;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
}
.end-score-num {
  color: #0369a1;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 29px;
  font-weight: 900;
  line-height: 1;
}
.winner-card .end-score-num { color: #a16207; }
.tied-card .end-score-num { color: #075985; }

.end-score-breakdown { display: flex; flex-direction: column; gap: 2px; }
.end-section-title {
  color: #64748b;
  font-family: 'Baloo 2', 'Fredoka', sans-serif !important;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.65px;
}
.end-breakdown-list {
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
}
.end-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 2px;
  color: #334155;
  font-family: 'Fredoka', sans-serif !important;
  border-bottom: 1px solid #e2e8f0;
}
.end-stat-row:last-child { border-bottom: 0; }
.end-stat-row span,
.end-performance-row span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.end-stat-row span .game-svg-ico,
.end-performance-row span .game-svg-ico { flex: 0 0 auto; }
.end-stat-row b,
.end-performance-row b { flex: 0 0 auto; color: #0f172a; font-weight: 900; }

.end-performance {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
}
.end-performance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #475569;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 12px;
}

@media (max-width: 580px) {
  #endModal .ps1-clean-modal-card { padding: 12px !important; }
  .end-hero-banner { grid-template-columns: 44px minmax(0, 1fr); gap: 9px; padding: 11px; }
  .end-hero-emblem { width: 44px; height: 44px; }
  .end-hero-emblem svg { width: 40px; height: 40px; }
  .end-podium-card { padding: 11px; gap: 8px; }
  #endModal .modal-bottom-actions { flex-wrap: wrap; justify-content: stretch; gap: 7px; }
  #endModal .modal-bottom-actions .game-arcade-btn { flex: 1 1 145px; }
}

/* =========================================================
   11. OTIMIZAÇÃO DE PERFORMANCE & JOGABILIDADE MOBILE (TOUCH UX)
   ========================================================= */
button,
.btn,
.ps1-zone-tag,
.ps1-step-btn,
.ps1-tag-action-btn,
.webgl-iceberg-canvas,
.seg-item,
.md-tab-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.ps1-zone-tag {
  contain: layout style;
  will-change: left, top;
}

@media (max-width: 960px) {
  .hud-col-right.hud-island-status {
    left: 146px;
  }

  .topbar.ps1-hud-topbar {
    top: 6px;
    left: 6px;
    right: 6px;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .hud-island {
    padding: 4px 8px;
    border-radius: 10px;
    gap: 6px;
  }

  .hud-week-dots,
  .ps1-weather-sub,
  .topbar #marketBattleHub {
    display: none !important;
  }

  .ps1-weather-ico {
    width: 26px;
    height: 26px;
  }

  .ps1-weather-title {
    font-size: 11.5px;
  }

  .ps1-res-pill.hud-res-card {
    padding: 3px 7px;
    gap: 4px;
    border-radius: 8px;
  }

  .hud-res-num {
    font-size: 14px;
  }

  .ps1-res-pill .res-label {
    font-size: 7.5px;
  }

  .hud-arcade-btn {
    padding: 5px 8px !important;
    font-size: 10.5px !important;
  }

  /* Evita colisão entre Bandeja de Estoque e Botão Confirmar Semana no Celular */
  .ps1-stock-tray {
    bottom: 62px;
    left: 8px;
    right: 8px;
    max-width: none;
    min-width: 0;
    padding: 4px 8px;
    border-radius: 10px;
  }

  #btnConfirm {
    bottom: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: 440px !important;
    min-width: 0 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  /* Placas 3D mais compactas e ergonômicas para toque */
  .ps1-zone-tag {
    padding: 4px 7px;
    gap: 4px;
    border-radius: 10px;
    font-size: 11px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 46vw;
  }

  .ps1-zone-label {
    font-size: 10.5px;
  }

  .ps1-zone-ico svg {
    width: 18px !important;
    height: 18px !important;
  }

  .ps1-step-btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .ps1-zone-count {
    font-size: 12px;
    min-width: 32px;
    padding: 2px 5px;
  }

  .ps1-tag-action-btn {
    padding: 4px 7px;
    font-size: 10px;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .hud-island-center {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }

  .ps1-hud-resources {
    width: 100%;
    justify-content: space-between;
    gap: 4px;
  }

  .ps1-res-pill.hud-res-card {
    flex: 1;
    justify-content: center;
    padding: 3px 4px;
  }

  /* Modais e Relatório adaptados para telas verticais de celular */
  .modal-card,
  .ps1-clean-modal-card,
  #reportPanel,
  body.show-recipes-modal #recipeBookHub .recipe-book-card {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 86dvh !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }

  #reportPanel {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .clean-recipe-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  .clean-recipe-right {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .diff-grid-3 {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   OVERHAUL VISUAL MINIMALISTA & ESTILIZADO (TOPBAR & 3D HUD)
   ========================================================= */

/* 1. Topbar Unificada Minimalista */
.ps1-hud-topbar {
  position: fixed;
  top: 10px;
  left: 14px;
  right: 14px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94) 0%, rgba(9, 14, 28, 0.97) 100%) !important;
  border: 2.5px solid #0284c7 !important;
  border-bottom: 5px solid #020617 !important;
  border-radius: 16px !important;
  padding: 8px 14px !important;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  pointer-events: auto !important;
}

.hud-col-days {
  flex: 0 0 auto;
}

.hud-col-resources {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.hud-col-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 2. Trilha Vertical de Dias da Partida com Tooltip Lateral */
.hud-week-blocks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

.week-block {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 98px;
  height: 28px;
  padding: 3px 9px;
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-bottom: 2.5px solid rgba(2, 6, 23, 0.6);
  border-radius: 8px;
  cursor: default;
  user-select: none;
  pointer-events: auto;
}

.week-block:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(30, 41, 59, 0.65);
}

.week-block.current {
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.85) 0%, rgba(14, 165, 233, 0.80) 100%);
  border-color: #facc15;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.35);
}

.week-block.done {
  background: rgba(15, 23, 42, 0.35);
  border-color: transparent;
}

.week-block.done .week-block-day,
.week-block.done .week-block-ico {
  opacity: 0.55;
}

.week-block-day {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  color: #e2e8f0;
  white-space: nowrap;
}

.week-block.current .week-block-day {
  color: #fef08a;
  font-weight: 900;
}

.week-block-ico {
  display: grid;
  place-items: center;
  line-height: 1;
  flex-shrink: 0;
}

/* Tooltip Suspenso no Hover de cada Dia: projeta-se à direita */
.day-block-tooltip {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%) translateX(4px);
  width: min(320px, calc(100vw - 96px));
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.96);
  border: 2px solid #38bdf8;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 100;
  backdrop-filter: blur(4px);
}

.week-block:hover .day-block-tooltip,
.week-block:focus .day-block-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.dbt-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: #fef08a;
  margin-bottom: 5px;
  letter-spacing: 0.3px;
}

.dbt-body {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #f8fafc;
  letter-spacing: 0.2px;
}

.dbt-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 900;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.2);
  padding: 2.5px 8px;
  border-radius: 6px;
  border: 1px solid #f59e0b;
  letter-spacing: 0.4px;
}

/* 3. Botão Interativo de Estoque & Popover Flutuante */
.interactive-pill {
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}
.interactive-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.ps1-stock-popover {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 90vw);
  max-height: min(420px, 70vh);
  background: #f8fafc;
  border: 2px solid #0284c7;
  border-bottom: 4px solid #0f172a;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 55;
  pointer-events: auto;
}

.stock-popover-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #e0f2fe;
  border-bottom: 1px solid #bae6fd;
}

.stock-pop-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #075985;
  text-transform: uppercase;
}

.stock-popover-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: min(350px, 58vh);
}

.stock-inventory-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 10px;
}

.stock-inventory-metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stock-inventory-label {
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.stock-inventory-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0f172a;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.stock-inventory-value .game-svg-ico {
  width: 13px;
  height: 13px;
}

.stock-inventory-empty {
  padding: 18px 12px;
  color: #475569;
  background: #ffffff;
  border: 1px dashed #94a3b8;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.stock-pop-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.stock-pop-item.spoiling {
  border-color: #ef4444;
  background: #fff1f2;
}
.stock-pop-item.stable {
  border-color: #bae6fd;
  background: #f0f9ff;
}

.stock-pop-item.octopus-target {
  border: 2px solid #a16207;
  background: #fef3c7;
}

.stock-pop-target-label {
  color: #854d0e;
  font-size: 10px;
  font-weight: 900;
}

.stock-pop-item > .st-ico {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.st-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.st-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.stock-pop-item-head,
.stock-pop-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.stock-pop-item-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
}

.stock-pop-item-head .st-name {
  overflow-wrap: anywhere;
}

.stock-pop-quantity {
  flex: 0 0 auto;
  padding: 2px 8px;
  color: #0c4a6e;
  background: #e0f2fe;
  border: 1.5px solid #7dd3fc;
  border-radius: 999px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 14.5px;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.15);
}

.stock-pop-tier {
  font-size: 10px;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 5px;
  line-height: 1.25;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.stock-pop-tier.tier-comum {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #7dd3fc;
}

.stock-pop-tier.tier-raro {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #d8b4fe;
}

.stock-pop-tier.tier-lendario {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.stock-pop-item-meta .freshness-pill {
  margin: 0;
  padding: 1.5px 5px;
  font-size: 9px;
  white-space: nowrap;
}

.stock-pop-value {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #075985;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.st-qt {
  font-size: 11px;
  color: #475569;
}

.st-val {
  font-family: 'Baloo 2', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #075985;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 4. Contador de Pinguins ao Lado do Nome da Estação (.ps1-zone-side-count) */
.ps1-zone-side-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: #020617;
  border: 1.5px solid rgba(148, 163, 184, 0.5);
  border-radius: 7px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: #94a3b8;
  line-height: 1;
  user-select: none;
}

.ps1-zone-side-count.has-workers {
  background: linear-gradient(180deg, #fef08a, #f59e0b);
  border-color: #020617;
  color: #020617;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
  text-shadow: none;
}

.ps1-zone-side-count.is-plaza {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
}

/* Botões de Ação Acoplados Renovados */
.ps1-tag-action-btn.btn-recipes {
  background: linear-gradient(180deg, #f43f5e, #be123c) !important;
  color: #ffffff !important;
  border: 2px solid #020617 !important;
  border-bottom: 3.5px solid #020617 !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  font-size: 11px !important;
}

.ps1-tag-action-btn.btn-upgrades {
  background: linear-gradient(180deg, #10b981, #047857) !important;
  color: #ffffff !important;
  border: 2px solid #020617 !important;
  border-bottom: 3.5px solid #020617 !important;
  border-radius: 999px !important;
  padding: 4px 11px !important;
  font-size: 11px !important;
}

.ps1-tag-action-btn.btn-upgrades.is-queued {
  background: linear-gradient(180deg, #f59e0b, #b45309) !important;
}

/* =========================================================
   SISTEMA DE RESPONSIVIDADE MOBILE ROBUSTO (TOUCH-FIRST)
   ========================================================= */

/* 1. Touch & Prevenção de Deslizes Indesejados em Dispositivos Móveis */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: transparent;
  }
  .btn,
  .ps1-step-btn,
  .ps1-tag-action-btn,
  .interactive-pill,
  .game-arcade-btn {
    touch-action: manipulation;
  }
}

/* Viewport e formulários acompanham o dispositivo, inclusive tablets largos. */
body:is(.device-mobile, .device-tablet),
body:is(.device-mobile, .device-tablet) #icebergStageBox,
body:is(.device-mobile, .device-tablet) #icebergCanvas {
  height: 100vh !important;
  height: 100dvh !important;
}

body:is(.device-mobile, .device-tablet) #icebergCanvas {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
}

body:is(.device-mobile, .device-tablet) :is(input, select, textarea),
body:is(.device-mobile, .device-tablet) #startModal .ps1-start-modal-card .cartoon-input {
  font-size: 16px !important;
}

/* 2. Breakpoint Mobile Principal (<= 768px) */
@media (max-width: 768px) {
  html:not(.device-desktop),
  body:not(.device-desktop) {
    overflow-x: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    user-select: none;
    -webkit-user-select: none;
  }

  html.device-desktop,
  body.device-desktop {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-height: 100%;
  }

  /* Topbar Mobile em Duas Linhas Perfeitas */
  .topbar.ps1-hud-topbar {
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Linha 1: Dias (Esquerda) + Ações (Direita) */
  .hud-col-days.hud-island {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 8px;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hud-col-days.hud-island::-webkit-scrollbar {
    display: none;
  }

  .hud-col-actions.hud-island {
    order: 2;
    flex: 0 0 auto;
    padding: 4px 6px;
    gap: 4px;
    margin-left: auto;
  }

  .hud-col-actions .game-arcade-btn {
    padding: 5px 8px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
  }

  /* Linha 2: Barra de Recursos (Full Width) */
  .hud-col-resources.hud-island {
    order: 3;
    width: 100%;
    padding: 4px 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }

  .ps1-hud-resources {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
  }

  .ps1-res-pill {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 6px !important;
    gap: 4px !important;
    border-radius: 8px !important;
    justify-content: center;
  }

  .ps1-res-pill .res-num {
    font-size: 13.5px !important;
  }

  .ps1-res-pill .res-lbl {
    font-size: 8px !important;
    letter-spacing: 0.2px !important;
  }

  .ps1-res-pill .res-svg-slot svg {
    width: 16px !important;
    height: 16px !important;
  }

  .week-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
  }

  .week-pill {
    padding: 3px 6px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Placas 3D mais acessíveis ao toque */
  .ps1-zone-tag {
    padding: 4px 7px;
    gap: 4px;
    border-radius: 10px;
    max-width: 48vw;
    font-size: 11px;
    box-shadow: 0 4px 0 #020617, 0 4px 12px rgba(0, 0, 0, 0.45);
  }

  .ps1-step-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    border-radius: 7px !important;
  }

  .ps1-zone-side-count {
    min-width: 22px;
    height: 22px;
    font-size: 11.5px;
    padding: 0 4px;
  }

  .ps1-tag-action-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
    width: 100%;
    justify-content: center;
  }

  /* Botão Confirmar Turno / Dia Sticky no Rodapé */
  #btnConfirm {
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 20px) !important;
    max-width: 420px !important;
    min-height: 48px !important;
    padding: 10px 16px !important;
    font-size: 14.5px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 0 #020617, 0 8px 20px rgba(0, 0, 0, 0.6) !important;
    z-index: 45 !important;
  }

  /* Popover de Estoque Adaptado */
  .ps1-hud-resources > .stock-pill-wrapper .ps1-stock-popover {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: var(--stock-popover-left, 0px) !important;
    right: auto !important;
    transform: none !important;
    width: min(280px, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 165px) !important;
    z-index: 60 !important;
  }

  /* Modais e Relatórios Responsivos */
  .modal-card,
  .ps1-clean-modal-card,
  #reportPanel,
  .recipe-modal-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 30px) !important;
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .mode-cards-grid,
  .diff-3-grid,
  .upgrades-grid-modal {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .rep-stats-grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .clean-recipe-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
  }

  .clean-recipe-right {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/* 3. Telas Pequenas (<= 420px, ex: iPhone SE, modelos compactos) */
@media (max-width: 420px) {
  .topbar.ps1-hud-topbar {
    gap: 4px;
  }

  .hud-col-actions .game-arcade-btn {
    padding: 4px 6px !important;
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }

  .week-pill {
    padding: 2.5px 5px !important;
    font-size: 9.5px !important;
  }

  .ps1-res-pill .res-num {
    font-size: 12.5px !important;
  }

  .ps1-res-pill .res-lbl {
    font-size: 7px !important;
  }

  .ps1-res-pill .res-svg-slot svg {
    width: 14px !important;
    height: 14px !important;
  }

  #btnConfirm {
    font-size: 13.5px !important;
    min-height: 44px !important;
  }
}

/* Ajustes Mobile para o Start Modal, Logo pinguINC e Dificuldades */
@media (max-width: 540px) {
  .start-modal-frame {
    gap: 8px;
    width: 100%;
  }

  .logo-pingu {
    font-size: 34px;
  }
  .logo-inc-badge {
    font-size: 17px;
    padding: 2px 8px;
  }

  .diff-3-blocks {
    gap: 6px;
  }
  .diff-block-card {
    padding: 8px 4px;
  }
  .diff-card-ico {
    font-size: 20px;
    margin-bottom: 2px;
  }
  .diff-card-name {
    font-size: 11.5px;
  }
  .diff-card-tier {
    font-size: 8.5px;
  }
  .mp-choice-btn {
    padding: 10px 6px !important;
    font-size: 12px !important;
  }
}

/* =========================================================
   USINA POLAR — BARRINHA DE EVOLUÇÃO (0 A 7 ENGRENAGENS)
   ========================================================= */
.ps1-usina-bar-wrap {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width: 116px;
  pointer-events: none;
  opacity: 0.92;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid rgba(56, 189, 248, 0.48);
  border-radius: 8px;
  padding: 6px 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.ps1-usina-bar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.ps1-usina-bar-track {
  width: 100%;
  height: 7px;
  background: #1e293b;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ps1-usina-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 3px;
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 6px #38bdf8;
}

.ps1-usina-bar-fill.is-active {
  background: linear-gradient(90deg, #059669, #10b981, #06b6d4);
  box-shadow: 0 0 8px #10b981;
}

@media (max-width: 768px) {
  .ps1-usina-bar-wrap {
    width: 108px;
    opacity: 0.9;
  }

  .ps1-usina-bar-header {
    font-size: 10px;
  }
}

@media (max-width: 520px) {
  .md-rules-body {
    padding: 15px 14px;
    font-size: 15px;
    line-height: 1.65;
  }

  .md-h3 {
    font-size: 16px;
  }

  .md-table {
    font-size: 12.5px;
  }

  .md-table th,
  .md-table td {
    padding: 7px 8px;
  }

  .pamphlet-ing-text {
    font-size: 13.5px;
  }
}

/* Barrinha no Card 2D (Modo Clássico) */
.role-clean-evo-bar {
  margin: 7px 0 5px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
}

.role-clean-evo-bar.is-usina {
  background: #ecfdf5;
  border-color: #10b981;
}

.role-clean-evo-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
  color: #0284c7;
  margin-bottom: 3px;
}

.role-clean-evo-bar.is-usina .role-clean-evo-header {
  color: #047857;
}

.role-clean-evo-track {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.role-clean-evo-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.role-clean-evo-fill.is-active {
  background: linear-gradient(90deg, #059669, #10b981, #06b6d4);
}

/* Modal de Confirmação In-Game (Substitui confirm de navegador) */
.game-confirm-modal-card {
  width: min(420px, 92vw) !important;
  max-width: 420px !important;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 3.5px solid #0284c7 !important;
  border-bottom: 6px solid #0369a1 !important;
  border-radius: 22px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  box-shadow: 0 16px 40px rgba(2, 132, 199, 0.35) !important;
}

.game-confirm-icon-box {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  background: #ffffff;
  border: 2.5px solid #0284c7;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.2);
}

.game-confirm-icon {
  font-size: 28px;
  line-height: 1;
}

.game-confirm-title {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 21px;
  font-weight: 900;
  color: #0369a1;
  margin: 0 0 6px 0;
  text-shadow: 0 1px 0 #ffffff;
}

.game-confirm-msg {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #334155;
  margin: 0 0 20px 0;
}

.game-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.game-confirm-btn {
  flex: 1;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
}

/* HUD e painéis do jogo em celulares; regras de desktop permanecem intactas. */
@media (max-width: 768px) {
  .topbar.ps1-hud-topbar {
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    display: block;
  }

  .hud-col-days.hud-island-left {
    top: max(6px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    right: auto;
    bottom: auto;
    width: min(280px, calc(100vw - 166px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: 42px;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    padding: 3px 5px;
    overflow: hidden;
    z-index: 75;
  }

  .week-track {
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .week-track::-webkit-scrollbar { display: none; }

  #hudStatusIsland {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
    z-index: 76;
  }

  .hud-top-actions {
    position: fixed;
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    gap: 4px;
    padding: 3px 4px;
    border: 1.5px solid rgba(56, 189, 248, 0.55);
    border-bottom: 4px solid #020617;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(9, 14, 28, 0.96));
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
  }

  .hud-top-actions .hud-icon-btn {
    box-sizing: border-box;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;
    border-radius: 9px !important;
  }

  #ps1HudResources {
    position: fixed;
    top: calc(max(6px, env(safe-area-inset-top)) + 56px);
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    width: auto;
    box-sizing: border-box;
    padding: 5px;
    border: 1.5px solid rgba(56, 189, 248, 0.45);
    border-bottom: 4px solid #020617;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(9, 14, 28, 0.94));
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
  }

  #hudCoinPill,
  #hudCpPill,
  #hudFishPill {
    min-width: 0;
    min-height: 36px;
    box-sizing: border-box;
    justify-content: center;
    gap: 4px;
    padding: 5px 4px !important;
    border-radius: 8px !important;
  }

  #ps1HudResources .stock-pill-wrapper {
    min-width: 0;
    width: 100%;
    justify-content: center;
    gap: 4px;
  }

  #ps1HudResources .res-svg-slot,
  #ps1HudResources .res-svg-slot svg {
    width: 18px;
    height: 18px;
  }

  #ps1HudResources .res-num { font-size: 14px; }

  .ps1-hud-resources > .stock-pill-wrapper .ps1-stock-popover {
    top: calc(100% + 10px) !important;
    left: var(--stock-popover-left, 0px) !important;
    right: auto !important;
    width: min(280px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px)) !important;
    max-height: calc(100dvh - 150px) !important;
    z-index: 10 !important;
  }

  .ps1-zone-tag {
    max-width: min(54vw, 260px);
    gap: 5px;
    padding: 5px 7px;
    font-size: 11px;
    white-space: normal;
  }

  .ps1-zone-label { font-size: 10.5px; }

  .ps1-step-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px;
    min-height: 34px;
  }

  .ps1-tag-action-btn {
    min-height: 34px;
    justify-content: center;
  }

  #btnConfirm {
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px) !important;
    max-width: 420px !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    z-index: 50 !important;
  }

  .cartoon-modal {
    box-sizing: border-box;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }

  .modal-card,
  .ps1-clean-modal-card,
  #reportPanel,
  #recipeBookHub .cook-mini-box.recipe-modal-card {
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom))) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #reportPanel { z-index: 80; }

  #recipeBookHub {
    box-sizing: border-box;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  #startModal .start-modal-frame {
    width: 100%;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .game-toast-layer {
    top: calc(max(6px, env(safe-area-inset-top)) + 122px);
    width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 20px);
  }
}

@media (max-width: 420px) {
  .hud-col-days.hud-island-left {
    width: calc(100vw - 160px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .hud-top-actions .hud-icon-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    min-height: 38px;
  }

  #ps1HudResources { gap: 4px; }

  #hudCoinPill,
  #hudCpPill,
  #hudFishPill { gap: 3px; }

  #ps1HudResources .res-svg-slot,
  #ps1HudResources .res-svg-slot svg {
    width: 16px;
    height: 16px;
  }

  #ps1HudResources .res-num { font-size: 13px; }
}



/* Cardápio do Chef: hierarquia mais clara para ingredientes, preparo e valor. */
.restaurant-pamphlet {
  padding: 24px 26px;
  border-color: #c87516;
  background: linear-gradient(145deg, #fffefa 0%, #fff8e7 100%);
  box-shadow: 0 12px 30px rgba(146, 64, 14, 0.16);
}

.pamphlet-header { margin-bottom: 18px; }

.pamphlet-badge-ribbon {
  font-size: 12px;
  letter-spacing: 1px;
  padding: 4px 14px;
}

.pamphlet-title {
  font-size: clamp(30px, 3vw, 34px);
  line-height: 1.12;
}

.pamphlet-sub {
  margin-top: 4px;
  font-size: 14px;
  color: #713f12;
}

.pamphlet-stock-bar {
  gap: 7px;
  margin: 12px 0 0;
}

.pamphlet-stock-bar .ps1-modal-pill {
  padding: 5px 10px;
  font-size: 12px;
}

.recipe-stock-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(14, 30, 48, 0.52);
  backdrop-filter: blur(3px);
}
.recipe-stock-overlay[hidden] {
  display: none;
}
.recipe-stock-dialog {
  display: flex;
  flex-direction: column;
  width: min(290px, 92vw);
  max-height: min(78vh, 620px);
  overflow: hidden;
  border: 2px solid #0284c7;
  border-bottom: 5px solid #0f172a;
  border-radius: 14px;
  background: #f8fafc;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
}
.recipe-stock-dialog .stock-popover-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overscroll-behavior: contain;
}

.pamphlet-items-list { gap: 11px; }

.pamphlet-dish-card {
  gap: 9px;
  padding: 15px 18px;
  border: 2px solid #dbe4ed;
  border-left: 5px solid #f59e0b;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
}

.pamphlet-dish-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.pamphlet-dish-card.is-ready {
  border-color: #86efac;
  border-left-color: #16a34a;
  background: linear-gradient(100deg, #f0fdf4 0%, #ffffff 60%);
}

.pamphlet-dish-card.is-missing {
  border-color: #fecaca;
  border-left-color: #ef4444;
  background: linear-gradient(100deg, #fff7f7 0%, #ffffff 60%);
}

.pamphlet-dish-name {
  grid-column: 1;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 18px;
  line-height: 1.2;
}

.pamphlet-leader { display: none; }

.pamphlet-tag {
  padding: 3px 8px;
  font-size: 11px;
  letter-spacing: 0.03em;
}

.pamphlet-price {
  grid-column: 2;
  grid-row: 1;
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1.5px solid #f4c66a;
  border-radius: 999px;
  background: #fffbeb;
  color: #854d0e;
  font-size: 18px;
}

.pamphlet-price svg { width: 18px; height: 18px; }

.pamphlet-dish-mid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.pamphlet-ingredients { min-width: 0; }

.pamphlet-ing-label {
  font-size: 11px;
  color: #475569;
}

.pamphlet-ing-text {
  font-size: 15px;
  line-height: 1.45;
  color: #1e293b;
}

.pamphlet-formula {
  max-width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px 10px;
  border: 1.5px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1e3a5f;
  font-size: 14px;
}

.pamphlet-formula svg { width: 19px; height: 19px; flex: 0 0 auto; }

.pamphlet-formula-alt {
  color: #334155;
  font-size: 12px;
  white-space: normal;
}

.pamphlet-dish-bottom { justify-content: flex-start; }

.pamphlet-status-stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 13px;
  line-height: 1.25;
}

.pamphlet-footer { margin-top: 18px; }

.pamphlet-chef-seal {
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .restaurant-pamphlet { padding: 16px 14px; border-radius: 16px; }
  .pamphlet-header { margin-bottom: 13px; }
  .pamphlet-badge-ribbon { font-size: 10.5px; padding: 4px 10px; }
  .pamphlet-title { font-size: clamp(25px, 7vw, 30px); }
  .pamphlet-sub { font-size: 13px; line-height: 1.35; }
  .pamphlet-ornament { display: none; }
  .pamphlet-stock-bar { justify-content: flex-start; gap: 5px; }
  .pamphlet-stock-bar .ps1-modal-pill { padding: 4px 8px; font-size: 11.5px; }
  .pamphlet-dish-card { padding: 12px 12px; gap: 8px; }
  .pamphlet-dish-top { align-items: flex-start; gap: 8px; }
  .pamphlet-dish-name { font-size: 16.5px; }
  .pamphlet-tag { font-size: 10px; }
  .pamphlet-leader { display: none; }
  .pamphlet-price { gap: 3px; padding: 4px 8px; font-size: 16px; }
  .pamphlet-price svg { width: 16px; height: 16px; }
  .pamphlet-dish-mid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pamphlet-ing-text { font-size: 14.5px; }
  .pamphlet-formula { justify-content: flex-start; width: 100%; gap: 6px; }
  .pamphlet-status-stamp { width: 100%; box-sizing: border-box; font-size: 12px; }
  .pamphlet-chef-seal { align-items: flex-start; padding: 9px 10px; font-size: 12px; }
}

@media (min-width: 961px) {
  #recipesModal .modal-card { transform: translateY(12px); }
  .hud-col-battle.hud-island-center { top: 20px; }
}

/* Deslocamento discreto dos pop-ups também respeita os recortes do mobile. */
@media (max-width: 700px) {
  .cartoon-modal:not(#startModal) {
    padding: calc(max(10px, env(safe-area-inset-top)) + 12px) 10px max(10px, env(safe-area-inset-bottom));
  }

  #recipeBookHub {
    padding: calc(max(10px, env(safe-area-inset-top)) + 12px) 10px max(10px, env(safe-area-inset-bottom));
  }

  #reportPanel {
    transform: translate(-50%, calc(-50% + 8px)) !important;
  }
}


/* =========================================================
   ESTILOS DA CAIXA DE CORREIO & MISSÃO DO MERCADOR (RESPONSIVO)
   ========================================================= */
.hud-merchant-mission-bar {
  position: fixed;
  top: 112px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  margin: 0;
}
.hud-merchant-mission-bar[hidden] {
  display: none !important;
}

.ps1-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  background: rgba(14, 30, 48, 0.75);
  backdrop-filter: blur(4px);
}
.ps1-modal-backdrop[hidden] {
  display: none !important;
}

.mission-pill-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.88);
  border: 2px solid #f59e0b;
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease;
}

.mission-pill-inner:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: #fbbf24;
}

.mission-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
}
.mission-icon-slot .game-svg-ico {
  display: block;
  width: 22px;
  height: 22px;
}

.mission-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mission-header-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mission-name {
  font-family: 'Baloo 2', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #fef08a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mission-time-badge {
  font-size: 9px;
  font-weight: 700;
  background: #334155;
  color: #94a3b8;
  padding: 1px 5px;
  border-radius: 8px;
}

.mission-progress-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mission-progress-track {
  width: 50px;
  height: 6px;
  background: #1e293b;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #475569;
}

.mission-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.mission-progress-num {
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
}

.mission-reward-tag {
  font-size: 10px;
  font-weight: 800;
  color: #4ade80;
}

/* Pop-up da carta: posicionado mais abaixo, levemente translúcido */
#merchantMailModal.is-herald {
  align-items: center;
  padding: 16px 12px;
  background: rgba(14, 30, 48, 0.25);
  backdrop-filter: none;
}

/* Modal da Carta */
#merchantMailModal.is-herald .merchant-letter-card {
  background: rgba(254, 252, 232, 0.85) !important;
}
.merchant-letter-card {
  max-width: 460px;
  background: #fefce8 !important;
  border: 3px solid #78350f !important;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 0 20px rgba(217, 119, 6, 0.1);
  position: relative;
  padding: 26px 22px 20px !important;
  color: #451a03 !important;
  text-align: center;
}

.letter-wax-seal {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  background: #dc2626;
  border: 2px solid #991b1b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.letter-title {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #78350f !important;
  margin: 8px 0 4px;
  letter-spacing: 0.5px;
}

.letter-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: #92400e !important;
  margin-bottom: 14px;
  line-height: 1.35;
}

.letter-content-box {
  background: #fffbeb !important;
  border: 2px dashed #b45309 !important;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
  color: #451a03 !important;
  text-align: left;
}

.letter-intro-text {
  font-size: 13px;
  font-weight: 600;
  color: #451a03 !important;
  line-height: 1.45;
  margin-bottom: 10px;
}

.letter-contract-card {
  background: #fef08a !important;
  border: 1.5px solid #d97706 !important;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(180, 83, 9, 0.12);
}

.letter-contract-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #78350f !important;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.letter-contract-card-desc {
  font-size: 14px;
  font-weight: 600;
  color: #713f12 !important;
  line-height: 1.4;
}

.letter-tip-box {
  background: #e0f2fe !important;
  border-left: 4px solid #0284c7 !important;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #0369a1 !important;
  line-height: 1.4;
}

.mission-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #78350f;
  color: #fef08a;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.mission-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}
.mission-badge-icon .game-svg-ico {
  display: block;
  width: 14px;
  height: 14px;
}

.mission-objective-desc {
  font-size: 13.5px;
  font-weight: 700;
  color: #451a03 !important;
  margin-bottom: 10px;
  line-height: 1.45;
}

.mission-reward-box {
  font-size: 13px;
  font-weight: 800;
  color: #15803d !important;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid #16a34a;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.mission-status-box {
  font-size: 12px;
  font-weight: 700;
  color: #78350f !important;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 10px;
  line-height: 1.35;
  text-align: center;
}

/* Contratos Competitivos na Carta da Caixa de Correio */
.contract-interactive-area {
  margin-top: 10px;
  text-align: left;
}

.contract-picker-label {
  font-size: 14px;
  font-weight: 800;
  color: #78350f !important;
  margin-bottom: 8px;
}

.contract-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid #d97706;
  border-radius: 8px;
}

.contract-fish-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fef3c7;
  border: 2px solid #b45309;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #78350f !important;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  user-select: none;
}

.contract-empty-stock {
  padding: 8px;
  color: #92400e;
  font-size: 13px;
  text-align: center;
}

.contract-fish-chip:hover {
  background: #fde68a;
}

.contract-fish-chip.is-selected {
  background: #22c55e !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
}

.contract-counter {
  font-size: 14px;
  font-weight: 800;
  color: #15803d !important;
  margin-top: 8px;
}

.contract-warning-box {
  font-size: 13px;
  color: #991b1b !important;
  font-weight: 700;
  background: #fee2e2;
  border: 1.5px solid #f87171;
  border-radius: 8px;
  padding: 6px 8px;
  margin-top: 8px;
  line-height: 1.35;
}

.coin-stepper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 8px;
}

.stepper-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f59e0b;
  border: 2px solid #b45309;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  touch-action: manipulation;
  transition: transform 0.1s ease;
}

.stepper-btn:active {
  transform: scale(0.92);
}

.stepper-value {
  font-size: 22px;
  font-weight: 900;
  color: #78350f !important;
  min-width: 65px;
  text-align: center;
}

.contract-balance-note {
  font-size: 14px;
  font-weight: 700;
  color: #92400e !important;
  text-align: center;
}
}

/* Responsividade Mobile */
@media (max-width: 768px) {
  .hud-merchant-mission-bar {
    position: fixed;
    top: max(76px, env(safe-area-inset-top) + 68px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    z-index: 95;
  }
  .mission-pill-inner {
    padding: 3px 8px;
    gap: 5px;
  }
  .mission-progress-track {
    width: 32px;
  }
}

/* Marca d'água discreta de versão no cantinho da tela */
.game-version-watermark {
  position: fixed;
  bottom: max(6px, env(safe-area-inset-bottom));
  right: max(8px, env(safe-area-inset-right));
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #ffffff;
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* =========================================================
   ORIENTAÇÃO OBRIGATÓRIA MOBILE: SHIELD DE TELA HORIZONTAL
   Ativa em celulares e tablets touch em pé (portrait).
   Em desktop/PC, notebooks ou telas horizontais, permanece 100% oculto!
   ========================================================= */
.orientation-shield {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(circle at center, rgba(14, 30, 48, 0.98) 0%, rgba(5, 12, 22, 0.99) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 24px 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f8fafc;
  pointer-events: auto;
}

/* DESKTOP / PC: O escudo de orientação é estritamente ocultado sob qualquer hipótese */
html.device-desktop .orientation-shield,
body.device-desktop .orientation-shield,
html.device-desktop #orientationShield,
body.device-desktop #orientationShield,
.orientation-shield.is-dismissed,
.orientation-shield[hidden] {
  display: none !important;
}

/* A detecção existente exclui desktops, mesmo com telas de toque. */
@media screen and (orientation: portrait) {
  body:is(.device-mobile, .device-tablet).has-touch .orientation-shield:not(.is-dismissed):not([hidden]) {
    display: flex !important;
  }
}

.orientation-shield-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 320px;
  padding: 26px 20px 22px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%);
  border: 2px solid #38bdf8;
  border-bottom: 5px solid #020617;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.orientation-icon-wrap {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  background: rgba(56, 189, 248, 0.12);
  border: 2px solid rgba(56, 189, 248, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.25);
}

.orientation-phone-svg .phone-body {
  transform-origin: 24px 24px;
  animation: orientationPhoneFlip 2.4s ease-in-out infinite;
}

@keyframes orientationPhoneFlip {
  0%, 15% {
    transform: rotate(0deg);
  }
  45%, 70% {
    transform: rotate(-90deg);
  }
  90%, 100% {
    transform: rotate(0deg);
  }
}

.orientation-phone-svg .rotate-arrow {
  animation: orientationArrowPulse 2.4s ease-in-out infinite;
}

@keyframes orientationArrowPulse {
  0%, 15% {
    opacity: 0.3;
  }
  45%, 70% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0.3;
  }
}

.orientation-title {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fde047;
  letter-spacing: 0.8px;
  margin: 0;
  text-shadow: 0 2px 0 #020617;
}

.orientation-desc {
  font-family: 'Fredoka', sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: #e2e8f0;
  margin: 0;
}

.orientation-desc b {
  color: #38bdf8;
}

.orientation-force-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #020617;
  background: linear-gradient(180deg, #fde047, #f59e0b);
  border: 2px solid #020617;
  border-bottom: 4px solid #78350f;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  transition: transform 0.1s ease, filter 0.15s ease;
  touch-action: manipulation;
}

.orientation-force-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.orientation-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.3px;
}

.orientation-dismiss-btn {
  display: inline-block;
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  color: #94a3b8;
  font-family: 'Fredoka', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.15s ease;
  touch-action: manipulation;
}

.orientation-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.65);
}

.orientation-dismiss-btn:active {
  transform: translateY(1px);
}


/* =========================================================
   11. CONQUISTAS POLARES & CATÁLOGO DE ESPÉCIES (ESTILO CONSOLE)
   ========================================================= */

/* Botão de Troféu no Menu Inicial (Pequeno, Elegante e Arcade) */
.start-trophy-btn {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  background: linear-gradient(180deg, #132a48 0%, #071526 100%);
  border: 2px solid #facc15;
  border-bottom: 4px solid #ca8a04;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.65), 0 0 14px rgba(250, 204, 21, 0.3);
  color: #fef08a;
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.16s ease, border-color 0.16s ease;
}

.start-trophy-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 22px rgba(250, 204, 21, 0.55);
  border-color: #fef08a;
}

.start-trophy-btn:active {
  transform: translateY(2px) scale(0.98);
  border-bottom-width: 2px;
}

.start-trophy-ico-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  animation: trophyMedalBounce 3s ease-in-out infinite alternate;
}

@keyframes trophyMedalBounce {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

.start-trophy-badge {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(250, 204, 21, 0.4);
  padding: 1px 7px;
  border-radius: 12px;
  color: #ffffff;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Modal de Conquistas (Aparência de Console Next-Gen / PS1 Arcade) */
.console-trophy-modal-card {
  width: min(880px, 94vw) !important;
  max-width: 880px !important;
  max-height: 88vh !important;
  background: linear-gradient(180deg, #0c1a2e 0%, #06101d 100%) !important;
  border: 3.5px solid #38bdf8 !important;
  border-bottom: 7px solid #0284c7 !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #f8fafc !important;
}

/* Cabeçalho do Console */
.console-trophy-hdr {
  padding: 20px 22px 14px 22px;
  background: linear-gradient(180deg, rgba(14, 34, 61, 0.85) 0%, rgba(7, 18, 33, 0.95) 100%);
  border-bottom: 2px solid #1e3a5f;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.console-trophy-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trophy-hero-medal {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: radial-gradient(circle at 35% 35%, #2a4365 0%, #0f1f33 100%);
  border: 2.5px solid #facc15;
  border-bottom: 4.5px solid #ca8a04;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(250, 204, 21, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trophy-medal-sparkle {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 16px;
  animation: sparkleTwinkle 2s ease-in-out infinite alternate;
}

@keyframes sparkleTwinkle {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0.6; }
  100% { transform: scale(1.2) rotate(20deg); opacity: 1; }
}

.trophy-hero-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #38bdf8;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.console-trophy-title {
  margin: 0;
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  font-size: clamp(20px, 3.8vw, 26px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  line-height: 1.1;
}

.console-trophy-subtitle {
  margin: 4px 0 0 0;
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.4;
}

/* Barra de Progresso do Console */
.console-progress-box {
  background: rgba(3, 10, 20, 0.65);
  border: 1.5px solid #162f4e;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.console-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 800;
}

.console-progress-rank {
  color: #facc15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.console-progress-percent {
  color: #38bdf8;
  font-size: 14px;
}

.console-progress-count {
  color: #94a3b8;
  font-weight: 600;
  font-size: 12px;
}

.console-progress-track {
  width: 100%;
  height: 12px;
  background: #020710;
  border: 1.5px solid #1e3a5f;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}

.console-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 35%, #facc15 75%, #f59e0b 100%);
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}

/* Abas de Filtros */
.console-filter-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 22px;
  background: rgba(3, 10, 20, 0.8);
  border-bottom: 1.5px solid #162f4e;
  overflow-x: auto;
  scrollbar-width: none;
}

.console-filter-tabs::-webkit-scrollbar {
  display: none;
}

.console-tab-btn {
  padding: 6px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid transparent;
  color: #94a3b8;
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.console-tab-btn:hover {
  background: rgba(56, 189, 248, 0.12);
  color: #e0f2fe;
}

.console-tab-btn.is-active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.45);
}

/* Corpo / Grade de Espécies */
.console-trophy-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  max-height: 50vh;
  scrollbar-width: thin;
  scrollbar-color: #1e3a5f #040e1c;
}

.console-trophy-body::-webkit-scrollbar {
  width: 7px;
}
.console-trophy-body::-webkit-scrollbar-track {
  background: #040e1c;
}
.console-trophy-body::-webkit-scrollbar-thumb {
  background: #1e3a5f;
  border-radius: 4px;
}

.console-fish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 12px;
}

.console-empty-filter {
  grid-column: 1 / -1;
  padding: 36px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 700;
  background: rgba(4, 15, 29, 0.5);
  border-radius: 14px;
  border: 1.5px dashed #1e3a5f;
}

/* Card Individual de Espécie (Estilo Conquista Console) */
.console-fish-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #091a2c 0%, #05101c 100%);
  border: 2px solid #1e3a5f;
  border-bottom: 3.5px solid #0f2238;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  user-select: none;
}

.console-fish-card:hover,
.console-fish-card:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

/* Estados: Desbloqueado */
.console-fish-card.is-unlocked {
  background: linear-gradient(180deg, #0c233c 0%, #061423 100%);
  border-color: #2563eb;
  border-bottom-color: #1d4ed8;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.console-fish-card.is-unlocked:hover {
  border-color: #38bdf8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(56, 189, 248, 0.25);
}

/* Tiers em Destaque */
.console-fish-card.is-unlocked.tier-comum {
  border-color: #0284c7;
  border-bottom-color: #0369a1;
}

.console-fish-card.is-unlocked.tier-incomum {
  border-color: #059669;
  border-bottom-color: #047857;
}

.console-fish-card.is-unlocked.tier-raro {
  border-color: #7c3aed;
  border-bottom-color: #6d28d9;
}

.console-fish-card.is-unlocked.tier-epico {
  border-color: #c026d3;
  border-bottom-color: #a21caf;
  box-shadow: 0 4px 14px rgba(192, 38, 211, 0.25);
}

.console-fish-card.is-unlocked.tier-lendario {
  border-color: #f59e0b;
  border-bottom-color: #d97706;
  background: linear-gradient(180deg, #1b2618 0%, #08151f 100%);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.3);
}

.console-fish-card.is-unlocked.tier-especial {
  border-color: #ea580c;
  border-bottom-color: #c2410c;
}

/* Estados: Bloqueado (Silhueta escura console) */
.console-fish-card.is-locked {
  background: linear-gradient(180deg, #07121f 0%, #030811 100%);
  border-color: #132438;
  border-bottom-color: #0a1420;
  opacity: 0.82;
}

.console-fish-card.is-locked:hover {
  opacity: 1;
  border-color: #1e3a5f;
  transform: translateY(-1px);
}

/* Coluna Visual (Ícone & Badge de Raridade) */
.fish-card-visual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.fish-card-icon-frame {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(2, 6, 12, 0.7);
  border: 1.5px solid #1e3a5f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.console-fish-card.is-unlocked .fish-card-icon-frame {
  background: radial-gradient(circle at 40% 40%, rgba(56, 189, 248, 0.2) 0%, rgba(2, 6, 12, 0.85) 100%);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.2);
}

.console-fish-card.is-unlocked.tier-lendario .fish-card-icon-frame {
  border-color: rgba(250, 204, 21, 0.6);
  background: radial-gradient(circle at 40% 40%, rgba(250, 204, 21, 0.25) 0%, rgba(2, 6, 12, 0.9) 100%);
  box-shadow: inset 0 0 12px rgba(250, 204, 21, 0.3);
}

.fish-card-glyph {
  font-size: 26px;
  line-height: 1;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.fish-card-svg-spot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  opacity: 0.35;
  pointer-events: none;
}

.fish-card-locked-icon {
  font-size: 20px;
  color: #64748b;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

.fish-card-silhouette {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1) brightness(0.2) contrast(1.5);
  opacity: 0.25;
}

/* Pílula de Raridade */
.fish-tier-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 1.5px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  background: #1e293b;
  color: #cbd5e1;
}

.fish-tier-pill.tier-comum { background: #0369a1; color: #bae6fd; }
.fish-tier-pill.tier-incomum { background: #047857; color: #a7f3d0; }
.fish-tier-pill.tier-raro { background: #6d28d9; color: #ddd6fe; }
.fish-tier-pill.tier-epico { background: #a21caf; color: #f5d0fe; }
.fish-tier-pill.tier-lendario { background: #b45309; color: #fef08a; }
.fish-tier-pill.tier-especial { background: #c2410c; color: #fed7aa; }

/* Coluna de Informações */
.fish-card-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.fish-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fish-card-title {
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  overflow-wrap: anywhere;
  white-space: normal;
}

.console-fish-card.is-locked .fish-card-title {
  color: #94a3b8;
}

.fish-card-price-tag {
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #fbbf24;
  white-space: nowrap;
}

.console-fish-card.is-locked .fish-card-price-tag {
  color: #64748b;
}

.fish-card-origin-tag {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
}

.console-fish-card.is-locked .fish-card-origin-tag {
  color: #475569;
}

.fish-card-lore-text {
  margin: 2px 0 0 0;
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.locked-hint {
  color: #facc15;
}
.locked-hint b {
  color: #fef08a;
}

/* Coluna de Status */
.fish-card-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.status-stamp {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.status-stamp.unlocked {
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid #22c55e;
  color: #4ade80;
}

.status-stamp.locked {
  background: rgba(100, 116, 139, 0.15);
  border: 1px solid #334155;
  color: #64748b;
}

.catch-counter-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
}

.catch-counter-badge.not-caught {
  color: #475569;
}

/* Rodapé do Modal */
.console-trophy-footer {
  padding: 12px 20px;
  background: rgba(3, 10, 20, 0.9);
  border-top: 1.5px solid #162f4e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.console-footer-tip {
  color: #94a3b8;
  font-size: 11.5px;
}

.console-reset-btn {
  background: transparent;
  border: 1px solid #475569;
  color: #94a3b8;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.console-reset-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #fca5a5;
}

/* Notificação Toast Estilo Console (Achievement Unlocked) - Oculto/Desativado conforme preferência do usuário */
.console-achievement-toast {
  display: none !important;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #091e36 0%, #030c17 100%);
  border: 2.5px solid #facc15;
  border-bottom: 4px solid #ca8a04;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 0 24px rgba(250, 204, 21, 0.45);
  color: #ffffff;
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  pointer-events: none;
}

.console-achievement-toast.is-leaving {
  animation: toastSlideOut 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes toastSlideIn {
  from { transform: translateX(110%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(110%); opacity: 0; }
}

.toast-medal-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: radial-gradient(circle at 35% 35%, #2a4365 0%, #0f1f33 100%);
  border: 2px solid #facc15;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.5);
  animation: toastMedalSpin 0.6s ease-out;
}

@keyframes toastMedalSpin {
  from { transform: scale(0.4) rotate(-30deg); }
  to { transform: scale(1) rotate(0deg); }
}

.toast-content-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toast-eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #facc15;
  text-transform: uppercase;
}

.toast-fish-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.toast-fish-desc {
  font-size: 11.5px;
  color: #94a3b8;
  font-family: sans-serif;
}

/* Responsividade Mobile para Conquistas */
@media (max-width: 600px) {
  .start-trophy-btn {
    top: 12px;
    right: 12px;
    padding: 5px 10px;
    font-size: 12px;
    gap: 6px;
  }
  .console-trophy-modal-card {
    width: 96vw !important;
    max-height: 94vh !important;
  }
  .console-trophy-hdr {
    padding: 14px 14px 10px 14px;
    gap: 10px;
  }
  .trophy-hero-medal {
    width: 48px;
    height: 48px;
  }
  .console-fish-grid {
    grid-template-columns: 1fr;
  }
  .console-fish-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .console-achievement-toast {
    top: 12px;
    right: 12px;
    left: 12px;
    padding: 10px 14px;
  }
}

/* =========================================================
   4. MODO CELULAR PAISAGEM / HORIZONTAL (Landscape <= 500px)
   Aplica EXCLUSIVAMENTE para celulares no modo horizontal.
   Monitores de Desktop (altura >= 600px) ficam 100% intactos!
   Posicionado no final do arquivo para prioridade máxima de cascata.
   ========================================================= */
@media (max-height: 500px) and (orientation: landscape) {

  /* --- 4.1 START MODAL (MENU INICIAL) COMPACTO EM 2 COLUNAS --- */
  #startModal .start-modal-frame {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(680px, 92vw) !important;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
    margin: auto !important;
    gap: 3px !important;
    padding: max(3px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
  }

  #startModal #pinguGameLogo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 0 1px 0 !important;
    transform: none !important;
  }
  #startModal .logo-pingu {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  #startModal .logo-inc-badge {
    font-size: 11px !important;
    padding: 1px 5px !important;
  }

  #startModal .ps1-start-modal-card {
    width: 100% !important;
    max-width: 680px !important;
    padding: 6px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.1fr !important;
    gap: 4px 12px !important;
    border-radius: 10px !important;
    border-width: 2px !important;
    border-bottom-width: 3px !important;
    box-sizing: border-box !important;
  }

  #startModal .ps1-start-modal-card > .field-group:first-of-type {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
  }
  #startModal .ps1-start-modal-card .field-label {
    font-size: 10px !important;
    margin-bottom: 1px !important;
  }
  #startModal .ps1-start-modal-card .cartoon-input {
    font-size: 11.5px !important;
    padding: 4px 7px !important;
  }

  #startModal .modal-bottom-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 3px !important;
    margin-top: auto !important;
    padding-top: 2px !important;
  }
  #startModal .modal-bottom-actions .btn {
    width: 100% !important;
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 11.5px !important;
  }
  #startModal .modal-bottom-actions .big-start {
    min-height: 36px !important;
    font-size: 12.5px !important;
  }

  #startModal .ps1-start-modal-card > .field-group:nth-of-type(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }
  #startModal .mode-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  #startModal .mode-card-content {
    padding: 4px 4px !important;
    border-radius: 6px !important;
    border-width: 1.5px !important;
    border-bottom-width: 2px !important;
  }
  #startModal .mode-card-badge {
    font-size: 7px !important;
    padding: 1px 3px !important;
    margin-bottom: 1px !important;
  }
  #startModal .mode-card-avatar {
    margin: 1px 0 !important;
  }
  #startModal .mode-card-avatar svg {
    width: 16px !important;
    height: 16px !important;
  }
  #startModal .mode-card-title {
    font-size: 10px !important;
    margin-bottom: 0 !important;
  }
  #startModal .mode-card-desc {
    display: none !important;
  }

  #startModal #soloDiffGroup {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 1px 0 0 0 !important;
  }
  #startModal .diff-3-blocks {
    gap: 3px !important;
  }
  #startModal .diff-block-card {
    padding: 3px 2px !important;
    border-radius: 6px !important;
    border-width: 1.5px !important;
    border-bottom-width: 2px !important;
    gap: 1px !important;
  }
  #startModal .diff-card-ico svg {
    width: 13px !important;
    height: 13px !important;
  }
  #startModal .diff-card-name {
    font-size: 9.5px !important;
  }
  #startModal .diff-card-tier {
    font-size: 7px !important;
  }

  #startModal #onlineLobbyGroup {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    gap: 3px !important;
  }

  .start-trophy-btn {
    top: 5px !important;
    right: 6px !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    gap: 3px !important;
  }
  .start-trophy-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* --- 4.2 HUD TOPBAR IN-GAME (FLEXBOX ANTI-COLISÃO PERFEITO) --- */
  .topbar.ps1-hud-topbar {
    position: fixed !important;
    top: max(4px, env(safe-area-inset-top)) !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 5px !important;
    z-index: 75 !important;
    pointer-events: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Trilha dos 7 Dias da Partida (Esquerda) */
  .hud-col-days.hud-island-left {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 80 !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 78px !important;
    max-width: 78px !important;
    height: auto !important;
    padding: 2px 3px !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(9, 14, 28, 0.94)) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
    border-bottom: 2.5px solid #020617 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  .hud-col-days.hud-island-left::-webkit-scrollbar { display: none !important; }
  .hud-col-days .hud-week-blocks {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5px !important;
    width: 100% !important;
  }
  .hud-col-days .week-block {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 20px !important;
    padding: 1px 3px !important;
    gap: 2px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-bottom: 1.5px solid rgba(2, 6, 23, 0.6) !important;
  }
  .hud-col-days .week-block-day {
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  .hud-col-days .week-block-ico svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Barra de Disputa Polar / Pontuação Tug-of-War (Centro) */
  .hud-col-battle.hud-island-center {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 80 !important;
    order: 2 !important;
    flex: 0 1 220px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 160px !important;
    max-width: 230px !important;
    height: 28px !important;
    padding: 1px 6px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(9, 14, 28, 0.94)) !important;
    border: 1.5px solid rgba(148, 163, 184, 0.35) !important;
    border-bottom: 2.5px solid #020617 !important;
    border-radius: 7px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  }
  .topbar #marketBattleHub {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .topbar #marketBattleHub .battle-card {
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .topbar #marketBattleHub .battle-hdr-row {
    font-size: 9px !important;
    margin-bottom: 1.5px !important;
    gap: 3px !important;
    color: #f8fafc !important;
  }
  .topbar #marketBattleHub .battle-team {
    font-size: 8.5px !important;
    gap: 2.5px !important;
  }
  .topbar #marketBattleHub .battle-team svg {
    width: 10px !important;
    height: 10px !important;
  }
  .topbar #marketBattleHub .battle-meter-wrap {
    height: 4px !important;
    border-radius: 999px !important;
    margin: 0 !important;
  }
  .topbar #marketBattleHub .battle-pin {
    width: 7px !important;
    height: 7px !important;
    top: 50% !important;
  }

  /* Recursos e Ações Arcade (Direita) */
  #hudStatusIsland {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 80 !important;
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    height: 28px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2.5px !important;
    padding: 1.5px 4.5px !important;
    margin: 0 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(9, 14, 28, 0.94)) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
    border-bottom: 2.5px solid #020617 !important;
    border-radius: 7px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    pointer-events: auto !important;
  }

  #ps1HudResources {
    position: static !important;
    width: auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  #hudCoinPill,
  #hudCpPill,
  #hudFishPill {
    min-height: 20px !important;
    height: 20px !important;
    padding: 1px 4px !important;
    gap: 1.5px !important;
    font-size: 9.5px !important;
    border-radius: 4px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
  #ps1HudResources .res-svg-slot svg {
    width: 10px !important;
    height: 10px !important;
  }
  #ps1HudResources .res-num {
    font-size: 10px !important;
  }

  .stock-help-btn.stock-spyglass-btn {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border-radius: 4px !important;
  }
  .stock-help-btn.stock-spyglass-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  .hud-top-actions {
    position: static !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.5px !important;
    padding: 0 !important;
    margin: 0 0 0 1px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .hud-top-actions .hud-icon-btn {
    box-sizing: border-box !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    position: relative !important;
    touch-action: manipulation !important;
  }
  .hud-top-actions .hud-icon-btn::after {
    content: '';
    position: absolute;
    inset: -6px;
  }
  .hud-top-actions .hud-icon-btn svg {
    width: 11px !important;
    height: 11px !important;
  }

  /* Camada de Notificações / Day Intro compacta */
  .game-toast-layer {
    top: 34px !important;
    width: min(280px, 68vw) !important;
  }
  .game-day-intro {
    padding: 3px 6px !important;
    gap: 4px !important;
    border-radius: 6px !important;
  }
  .game-day-intro-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }
  .game-day-intro-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
  .game-day-intro-title {
    font-size: 10px !important;
  }
  .game-day-intro-desc {
    font-size: 9px !important;
    margin: 0 !important;
  }

  /* --- 4.3 PLACAS 3D CHANFRADAS & BOTÕES PROPORCIONAIS --- */
  .ps1-zone-tag {
    transform: translate(-50%, -90%) scale(0.78) !important;
    gap: 2.5px !important;
    padding: 2px 4px !important;
    max-width: 150px !important;
    border-radius: 7px !important;
    border-width: 1.5px !important;
    border-bottom-width: 2.5px !important;
    touch-action: manipulation;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
  }

  .ps1-step-btn {
    min-width: 28px !important;
    min-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    position: relative !important;
    touch-action: manipulation !important;
  }
  .ps1-step-btn::after {
    content: '';
    position: absolute;
    inset: -7px;
    z-index: 2;
  }

  .ps1-step-info-btn {
    min-width: 19px !important;
    min-height: 19px !important;
    width: 19px !important;
    height: 19px !important;
    font-size: 9.5px !important;
  }

  .ps1-tag-action-btn {
    min-height: 23px !important;
    height: 23px !important;
    padding: 1px 5px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    border-radius: 5px !important;
    position: relative !important;
    touch-action: manipulation !important;
  }
  .ps1-tag-action-btn::after {
    content: '';
    position: absolute;
    inset: -6px;
  }

  .ps1-zone-main-row {
    gap: 3px !important;
  }
  .ps1-zone-label {
    font-size: 9.5px !important;
    letter-spacing: 0.2px !important;
  }
  .ps1-zone-ico svg {
    width: 11px !important;
    height: 11px !important;
  }

  .ps1-zone-side-count {
    min-width: 17px !important;
    height: 17px !important;
    font-size: 10px !important;
    line-height: 17px !important;
    border-radius: 4px !important;
  }

  /* --- 4.4 BOTÃO DE CONFIRMAR / AVANÇAR DIA --- */
  #btnConfirm {
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    min-height: 32px !important;
    max-height: 34px !important;
    padding: 2px 14px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    width: auto !important;
    max-width: min(340px, 85vw) !important;
    white-space: nowrap !important;
    z-index: 60 !important;
    letter-spacing: 0.2px !important;
    touch-action: manipulation;
  }

  /* =========================================================
     --- 4.5 POP-UPS & MODAIS COMPACTOS E ERGONÔMICOS (NÃO INVASIVOS) ---
     Dimensões controladas (~78% altura) para manter visual de diálogo!
     ========================================================= */

  /* Estrutura Base dos Modais */
  .cartoon-modal {
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px) !important;
    background: rgba(3, 8, 18, 0.72) !important;
  }

  .cartoon-modal[hidden] {
    display: none !important;
  }

  .modal-card,
  .ps1-clean-modal-card {
    width: min(480px, 84vw) !important;
    max-width: 480px !important;
    max-height: min(295px, 82dvh) !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    border-width: 2px !important;
    border-bottom-width: 3.5px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75) !important;
  }

  .modal-card.wide-card {
    width: min(510px, 86vw) !important;
    max-width: 510px !important;
  }

  /* Botão Fechar Padronizado, Compacto com Touch Target */
  .close-badge {
    top: 3px !important;
    right: 3px !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    font-size: 14px !important;
    line-height: 20px !important;
    border-radius: 5px !important;
    border-width: 1.5px !important;
    border-bottom-width: 2px !important;
    touch-action: manipulation !important;
    z-index: 40 !important;
  }
  .close-badge::after {
    content: '';
    position: absolute;
    inset: -7px;
  }

  /* Cabeçalhos dos Modais */
  .ps1-clean-modal-hdr {
    padding: 0 0 2px 0 !important;
    margin-bottom: 3px !important;
    border-bottom-width: 1.5px !important;
  }
  .ps1-clean-modal-title {
    font-size: 12.5px !important;
  }

  /* Panfleto / Cardápio & Oficina Polar */
  .restaurant-pamphlet {
    padding: 4px 6px !important;
    border-width: 1.5px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .pamphlet-header {
    margin-bottom: 3px !important;
    gap: 1.5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  /* Oculta fitas/subtítulos gigantes desnecessários para economizar 60px */
  .pamphlet-badge-ribbon {
    display: none !important;
  }
  .pamphlet-title {
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }
  .pamphlet-sub {
    display: none !important;
  }
  .pamphlet-ornament {
    display: none !important;
  }
  .pamphlet-stock-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2.5px !important;
    margin: 1.5px 0 2.5px 0 !important;
    padding: 0 !important;
  }
  .pamphlet-stock-bar .ps1-modal-pill {
    font-size: 8px !important;
    padding: 1px 4px !important;
    min-height: 17px !important;
    height: 17px !important;
    gap: 1.5px !important;
    border-radius: 3.5px !important;
  }
  .pamphlet-stock-bar .ps1-modal-pill svg {
    width: 9px !important;
    height: 9px !important;
  }
  [data-open-recipe-stock] {
    font-size: 8px !important;
    padding: 1px 5px !important;
    min-height: 18px !important;
    height: 18px !important;
    margin: 1px 0 !important;
    border-radius: 4px !important;
  }

  /* Lista de Receitas (Cozinha) */
  .pamphlet-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 3.5px !important;
  }
  .pamphlet-dish-card {
    padding: 3.5px 5.5px !important;
    border-radius: 5px !important;
    border-width: 1.5px !important;
    border-left-width: 3.5px !important;
    gap: 1.5px !important;
    margin-bottom: 0 !important;
  }
  .pamphlet-dish-top {
    align-items: center !important;
    gap: 3px !important;
    margin-bottom: 1px !important;
  }
  .pamphlet-dish-name {
    font-size: 10.5px !important;
    gap: 3px !important;
  }
  .pamphlet-tag {
    font-size: 7px !important;
    padding: 0.5px 3px !important;
    border-radius: 3px !important;
  }
  .pamphlet-price {
    font-size: 10px !important;
    padding: 1px 3px !important;
    gap: 1.5px !important;
  }
  .pamphlet-price svg {
    width: 10px !important;
    height: 10px !important;
  }
  .pamphlet-dish-mid {
    margin: 0 !important;
    gap: 3px !important;
  }
  .pamphlet-ingredients {
    font-size: 8px !important;
  }
  .pamphlet-formula {
    font-size: 7.5px !important;
    padding: 1px 3px !important;
  }
  .pamphlet-status-stamp {
    font-size: 7.5px !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
  }
  /* Oculta selo gigante do chef no mobile */
  .pamphlet-chef-seal {
    display: none !important;
  }
  .pamphlet-footer {
    display: none !important;
  }

  /* Lista de Upgrades (Fábrica) */
  .tech-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  .tech-card,
  .pamphlet-dish-card.tech-card {
    padding: 3px 5px !important;
    margin-bottom: 2.5px !important;
    border-radius: 5px !important;
    border-width: 1.5px !important;
    gap: 1.5px !important;
  }
  .tech-card .pamphlet-dish-name,
  .pamphlet-dish-name {
    font-size: 10.5px !important;
    gap: 3px !important;
  }
  .tech-card-title {
    font-size: 10.5px !important;
  }
  .tech-card-pts {
    font-size: 9px !important;
  }
  .tech-card-pts svg {
    width: 9px !important;
    height: 9px !important;
  }
  .tech-card-desc {
    font-size: 8px !important;
    line-height: 1.15 !important;
    margin: 1px 0 !important;
  }
  .tech-card-costs {
    gap: 2.5px !important;
    margin: 1px 0 !important;
  }
  .tech-cost-chip {
    font-size: 7.5px !important;
    padding: 0.5px 3px !important;
    border-radius: 3px !important;
  }
  .tech-cost-chip svg {
    width: 9px !important;
    height: 9px !important;
  }
  .tech-queue-btn,
  .tech-btn,
  .tech-card-bottom .btn {
    min-height: 19px !important;
    height: 19px !important;
    font-size: 8px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    letter-spacing: 0.2px !important;
  }
  .tech-queue-btn svg {
    width: 10px !important;
    height: 10px !important;
  }
  .pamphlet-dish-bottom.tech-card-bottom {
    margin-top: 1px !important;
  }
  .pamphlet-footer.tech-footer {
    display: block !important;
    margin-top: 2px !important;
    padding-top: 1px !important;
  }
  .pamphlet-chef-seal.tech-seal {
    display: none !important;
  }
  .tech-installed-shelf {
    padding: 2px 4px !important;
    margin-top: 2px !important;
    border-radius: 4px !important;
  }
  .tech-shelf-label {
    font-size: 8px !important;
  }
  .tech-shelf-chip {
    font-size: 7.5px !important;
    padding: 0.5px 2.5px !important;
    border-radius: 2.5px !important;
  }

  /* Popover de Estoque & Estoque na Cozinha */
  .ps1-hud-resources > .stock-pill-wrapper .ps1-stock-popover {
    top: calc(100% + 4px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(240px, 75vw) !important;
    max-width: 240px !important;
    max-height: min(220px, 68dvh) !important;
  }
  .ps1-stock-popover,
  .recipe-stock-dialog {
    width: min(240px, 75vw) !important;
    max-width: 240px !important;
    max-height: min(220px, 68dvh) !important;
    padding: 3px 5px !important;
    border-radius: 7px !important;
    border-width: 2px !important;
    border-bottom-width: 3px !important;
  }
  .stock-popover-hdr {
    padding: 2px 3px !important;
    margin-bottom: 2px !important;
  }
  .stock-pop-title {
    font-size: 9.5px !important;
  }
  .stock-help-btn.stock-popover-close,
  .stock-popover-close {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    font-size: 12px !important;
    line-height: 15px !important;
    box-shadow: none !important;
    border-width: 1.5px !important;
    margin-left: 4px !important;
  }
  .stock-popover-body {
    gap: 1.5px !important;
    max-height: min(170px, 55dvh) !important;
  }
  .stock-item-row {
    padding: 1.5px 4px !important;
    font-size: 9px !important;
    border-radius: 4px !important;
  }
  .stock-item-left {
    gap: 3px !important;
  }
  .stock-item-ico {
    font-size: 11px !important;
  }
  .stock-item-name {
    font-size: 9px !important;
  }
  .stock-item-age-pill,
  .stock-item-val-pill {
    font-size: 7.5px !important;
    padding: 0.5px 2.5px !important;
  }
  .stock-empty-hint {
    padding: 10px 4px !important;
    font-size: 9.5px !important;
  }

  /* Manual de Regras */
  #rulesModal .modal-card {
    width: min(480px, 82vw) !important;
    max-width: 480px !important;
    max-height: min(290px, 82dvh) !important;
    padding: 5px 8px !important;
  }
  #rulesModal .ps1-clean-modal-title {
    font-size: 12px !important;
  }
  .md-rules-tabs {
    gap: 3px !important;
    padding-bottom: 3px !important;
    border-bottom: 1.5px solid #cbd5e1 !important;
  }
  .md-tab-btn {
    padding: 2.5px 6px !important;
    min-width: 0 !important;
    font-size: 9.5px !important;
    border-radius: 5px !important;
    border-width: 1.5px !important;
  }
  .md-tab-btn svg {
    width: 11px !important;
    height: 11px !important;
  }
  .rules-scrollable,
  .md-rules-body {
    max-height: min(220px, 62dvh) !important;
    font-size: 9.5px !important;
    line-height: 1.3 !important;
  }
  .md-rules-callout {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
    margin: 3px 0 !important;
    border-radius: 5px !important;
  }
  .rules-scrollable h2, .md-rules-body h2 {
    font-size: 11px !important;
    margin: 4px 0 1px 0 !important;
  }
  .rules-scrollable h3, .md-rules-body h3 {
    font-size: 10px !important;
    margin: 2px 0 1px 0 !important;
  }
  .rules-scrollable p, .rules-scrollable li, .md-rules-body p, .md-rules-body li {
    font-size: 9px !important;
    margin-bottom: 2px !important;
  }

  /* Carta do Mercador (Caixa de Correio 3D) */
  .merchant-letter-card {
    width: min(340px, 88vw) !important;
    max-width: 340px !important;
    max-height: min(440px, 85dvh) !important;
    overflow-y: auto !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    border-width: 2px !important;
  }
  .letter-wax-seal {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
    margin: 0 auto 1px !important;
  }
  .letter-title {
    font-size: 14px !important;
    margin: 0 !important;
  }
  .letter-subtitle {
    display: none !important;
  }
  .letter-content-box {
    padding: 3px 5px !important;
    gap: 1.5px !important;
    border-radius: 5px !important;
  }
  .mission-badge-chip {
    font-size: 7.5px !important;
    padding: 0.5px 3px !important;
  }
  .mission-badge-icon .game-svg-ico {
    width: 10px;
    height: 10px;
  }
  .mission-objective-desc {
    font-size: 9.5px !important;
    margin: 1px 0 !important;
  }
  .mission-reward-box {
    font-size: 8.5px !important;
  }
  .mission-reward-val {
    font-size: 10.5px !important;
  }
  .letter-actions .btn {
    min-height: 24px !important;
    font-size: 9.5px !important;
    padding: 1px 6px !important;
  }

  /* Bilhete do Dia 1 (Juízo Final) */
  .day-one-pamphlet-card {
    width: min(320px, 80vw) !important;
    max-width: 320px !important;
    padding: 12px 10px 8px !important;
    min-height: auto !important;
    border-radius: 8px !important;
  }
  .day-one-pamphlet-text {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  .day-one-pamphlet-signature {
    font-size: 9.5px !important;
    margin-top: 3px !important;
  }

  /* Modal de Confirmação In-Game */
  .game-confirm-modal-card {
    width: min(300px, 80vw) !important;
    max-width: 300px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }
  .game-confirm-title {
    font-size: 11.5px !important;
  }
  .game-confirm-desc {
    font-size: 9.5px !important;
  }
  .game-confirm-actions .btn {
    min-height: 24px !important;
    font-size: 9.5px !important;
  }

  /* Modal do Polvo Contrabandista */
  #octopusModal .modal-card {
    width: min(520px, 92vw) !important;
    max-width: 520px !important;
    max-height: min(420px, 88dvh) !important;
    padding: 10px 14px !important;
  }
  #octopusModal .ps1-clean-modal-title {
    font-size: 13px !important;
  }
  #octopusModal .octopus-balance,
  #octopusModal .octopus-target {
    font-size: 12.5px !important;
  }
  #octopusModal .octopus-actions {
    gap: 7px !important;
    margin: 9px 0 !important;
  }
  #octopusModal .octopus-action {
    min-height: 124px !important;
    padding: 10px !important;
    gap: 6px !important;
    font-size: 13.5px !important;
    border-radius: 9px !important;
  }
  #octopusModal .octopus-action strong { font-size: 14.5px !important; }
  #octopusModal .octopus-action .octopus-action-desc { font-size: 13.5px !important; }
  #octopusModal .octopus-action > b { font-size: 12px !important; }
  #octopusModal .octopus-cost-note { font-size: 11.5px !important; }
  #weatherBanner.eb-theme-octopus:not([hidden]) {
    position: fixed !important;
    top: var(--octopus-banner-y, 55vh) !important;
    left: var(--octopus-banner-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    transform: translate(-50%, calc(-100% - 12px)) !important;
  }

  /* Modal de Relatório do Dia */
  #reportPanel {
    max-width: min(480px, 85vw) !important;
    max-height: min(280px, 80dvh) !important;
    padding: 5px 8px !important;
    border-radius: 8px !important;
    overflow-y: auto !important;
  }
  .rep-summary-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  .rep-simple-card {
    padding: 4px 5px !important;
    gap: 2px !important;
    border-radius: 5px !important;
  }
  .rep-card-title {
    font-size: 9.5px !important;
  }
  .rep-card-item {
    font-size: 8.5px !important;
  }

  /* Modal de Fim de Jogo */
  #endModal .ps1-clean-modal-card {
    width: min(520px, 92vw) !important;
    max-width: 520px !important;
    max-height: min(480px, 92dvh) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
  .end-hero-banner {
    padding: 3px 5px !important;
    gap: 5px !important;
    border-radius: 5px !important;
  }
  .end-hero-emblem {
    width: 24px !important;
    height: 24px !important;
  }
  .end-hero-title {
    font-size: 14px !important;
  }
  .end-podium-card {
    padding: 3px 5px !important;
    border-radius: 5px !important;
  }
  .end-score-big {
    font-size: 13.5px !important;
  }
  #endModal .modal-bottom-actions {
    margin-top: 4px !important;
    padding-top: 4px !important;
    gap: 4px !important;
  }
  #endModal .modal-bottom-actions .btn {
    min-height: 25px !important;
    font-size: 9.5px !important;
  }

  /* Modal de Conquistas & Catálogo (Estilo Console Compacto) */
  #fishCatalogModal .console-trophy-modal-card {
    width: min(520px, 92vw) !important;
    max-width: 520px !important;
    max-height: min(420px, 92dvh) !important;
    border-radius: 10px !important;
    border-width: 2px !important;
    border-bottom-width: 3.5px !important;
  }
  .console-trophy-hdr {
    padding: 4px 8px 3px 8px !important;
    gap: 3px !important;
  }
  .console-trophy-hero {
    gap: 6px !important;
  }
  .trophy-hero-medal {
    width: 26px !important;
    height: 26px !important;
    border-radius: 5px !important;
    border-width: 1.5px !important;
    border-bottom-width: 2px !important;
  }
  .trophy-hero-medal svg {
    width: 15px !important;
    height: 15px !important;
  }
  .trophy-hero-tag {
    font-size: 8px !important;
  }
  .console-trophy-title {
    font-size: 12px !important;
  }
  .console-trophy-subtitle {
    display: none !important;
  }
  .console-progress-box {
    padding: 2px 5px !important;
    gap: 1.5px !important;
    border-radius: 5px !important;
  }
  .console-progress-row {
    font-size: 8.5px !important;
  }
  .console-progress-track {
    height: 4px !important;
  }
  .console-filter-tabs {
    padding: 2px 6px !important;
    gap: 2.5px !important;
  }
  .console-tab-btn {
    padding: 1.5px 5px !important;
    font-size: 8.5px !important;
    border-radius: 4px !important;
  }
  .console-trophy-body {
    padding: 3px 6px !important;
    max-height: min(240px, 60dvh) !important;
  }
  .console-fish-grid {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }
  .console-fish-card {
    padding: 3px 4px !important;
    gap: 4px !important;
    border-radius: 5px !important;
    border-width: 1px !important;
    border-bottom-width: 1.5px !important;
    align-items: flex-start !important;
  }
  .fish-card-icon-frame {
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
  }
  .fish-card-glyph {
    font-size: 11px !important;
  }
  .fish-card-title {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }
  .fish-card-price-tag {
    font-size: 8.5px !important;
  }
  .fish-card-origin-tag {
    font-size: 7.5px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .fish-card-lore-text {
    display: block !important;
    overflow: visible !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
  }
  .status-stamp {
    font-size: 7px !important;
    padding: 0.5px 2.5px !important;
  }
  .catch-counter-badge {
    font-size: 7.5px !important;
  }
  .console-trophy-footer {
    padding: 2px 6px !important;
    font-size: 8px !important;
  }
  .console-footer-tip {
    font-size: 7.5px !important;
  }
  .console-reset-btn {
    padding: 1px 4px !important;
    font-size: 7.5px !important;
  }

  /* Conquistas Toasts: 100% Desativado / Oculto na tela */
  .console-achievement-toast {
    display: none !important;
  }
}

/* =========================================================
   12. MODO TUTORIAL RÁPIDO (Aprenda em 1 Minuto)
   ========================================================= */
.tutorial-modal-card {
  width: min(704px, 92vw) !important;
  max-width: 704px !important;
  background: linear-gradient(180deg, #f8fcff 0%, #e0f2fe 100%) !important;
  border-color: #0284c7 !important;
  border-bottom: 5px solid #0369a1 !important;
  display: flex;
  flex-direction: column;
}
.tutorial-top-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 2px solid #bae6fd;
  padding-bottom: 8px;
  padding-right: 36px;
}
.tutorial-progress-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 36px !important;
}
.tut-step-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tut-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 1.5px solid #64748b;
  transition: all 0.2s ease;
  cursor: pointer;
}
.tut-dot.is-active {
  background: #f59e0b;
  border-color: #b45309;
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.tut-step-count {
  font-size: 11px;
  font-weight: 800;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1.5px solid #7dd3fc;
}
.tutorial-body-scrollable {
  flex: 1;
  min-height: 190px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px 6px;
}
.tut-slide-card {
  animation: tutFadeSlide 0.25s ease-out;
}
@keyframes tutFadeSlide {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.tut-badge-chip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.tut-badge-blue { background: #dbeafe; color: #1e40af; border: 1.5px solid #93c5fd; }
.tut-badge-gold { background: #fef3c7; color: #92400e; border: 1.5px solid #fcd34d; }
.tut-badge-green { background: #dcfce7; color: #166534; border: 1.5px solid #86efac; }
.tut-badge-purple { background: #f3e8ff; color: #6b21a8; border: 1.5px solid #d8b4fe; }
.tut-slide-title {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tut-slide-desc {
  font-size: 13.5px;
  line-height: 1.45;
  color: #334155;
  margin: 0 0 12px 0;
}
.tut-diagram-box {
  background: #ffffff;
  border: 2px solid #38bdf8;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
}
.tut-flow-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  flex-wrap: wrap;
}
.tut-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 70px;
}
.tut-flow-ico {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 4px;
}
.tut-flow-label {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
}
.tut-flow-sub {
  font-size: 9.5px;
  color: #64748b;
}
.tut-flow-arrow {
  font-size: 16px;
  font-weight: 900;
  color: #0284c7;
}
.tut-tip-box {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: #166534;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}
.tut-tip-ico {
  font-size: 16px;
  flex-shrink: 0;
}
.tutorial-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 2px solid #bae6fd;
  padding-top: 10px;
  margin-top: 6px;
}
.tut-nav-btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
}

@media (max-width: 900px) and (orientation: landscape) {
  .tutorial-modal-card {
    width: min(528px, 90vw) !important;
    max-width: 528px !important;
    max-height: min(295px, 84dvh) !important;
    padding: 6px 10px !important;
  }
  .tutorial-top-hdr {
    margin-bottom: 4px !important;
    padding-bottom: 4px !important;
  }
  .tutorial-progress-wrap {
    margin-right: 28px !important;
  }
  .tutorial-modal-card .ps1-clean-modal-title {
    font-size: 12px !important;
  }
  .tut-slide-title {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  .tut-slide-desc {
    font-size: 10px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }
  .tut-diagram-box {
    padding: 4px 6px !important;
    margin-bottom: 6px !important;
  }
  .tut-flow-ico {
    font-size: 16px !important;
  }
  .tut-flow-label {
    font-size: 9.5px !important;
  }
  .tut-flow-sub {
    font-size: 8px !important;
  }
  .tut-tip-box {
    padding: 4px 6px !important;
    font-size: 9.5px !important;
    gap: 4px !important;
  }
  .tutorial-bottom-nav {
    padding-top: 5px !important;
    margin-top: 4px !important;
  }
  .tut-nav-btn {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
  }
}

/* Tutorial de pesca: leitura maior e acesso direto à tabela de capturas. */
.tutorial-modal-card .tut-slide-desc {
  font-size: 15.5px;
  line-height: 1.5;
}
.tutorial-modal-card .tut-flow-label { font-size: 12px; }
.tutorial-modal-card .tut-flow-sub { font-size: 11px; }
.tutorial-modal-card .tut-tip-box { font-size: 13px; line-height: 1.45; }
.tut-fish-catalog-button {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 12px;
  color: #12304a;
  text-align: left;
  font: inherit;
  background: #f0f9ff;
  border: 1.5px solid #7dd3fc;
  border-bottom: 3px solid #0284c7;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.tut-fish-catalog-button:hover { background: #e0f2fe; }
.tut-fish-catalog-button:active { transform: translateY(2px); }
.tut-fish-catalog-button svg,
.tutorial-fish-book-mark svg {
  width: 22px;
  height: 22px;
  fill: #bae6fd;
  stroke: #12304a;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tut-fish-catalog-button span { font-size: 13px; font-weight: 900; }
.tut-fish-catalog-button small {
  grid-column: 2 / 4;
  color: #52677a;
  font-size: 11px;
}

.tutorial-fish-catalog-card {
  width: min(620px, 92vw) !important;
  max-width: 620px !important;
  max-height: min(660px, 88vh) !important;
  padding: 18px !important;
  background: linear-gradient(180deg, #f8fcff 0%, #e0f2fe 100%) !important;
  border: 2.5px solid #0284c7 !important;
  border-bottom: 6px solid #0369a1 !important;
  border-radius: 18px !important;
  color: #0f172a;
}
.tutorial-fish-catalog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px 12px 0;
  border-bottom: 1.5px solid #bae6fd;
}
.tutorial-fish-book-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: #dbeafe;
  border: 1.5px solid #7dd3fc;
  border-bottom-width: 3px;
  border-radius: 11px;
}
.tutorial-fish-book-mark svg { width: 28px; height: 28px; }
.tutorial-fish-catalog-kicker {
  color: #0369a1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.8px;
}
.tutorial-fish-catalog-header h2 {
  margin: 1px 0 0;
  font-family: 'Baloo 2', 'Fredoka', cursive, sans-serif;
  font-size: 22px;
  line-height: 1.1;
}
.tutorial-fish-catalog-header p {
  margin: 3px 0 0;
  color: #475569;
  font-size: 12px;
}
.tutorial-fish-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: min(54vh, 470px);
  padding-top: 12px;
  overflow: auto;
  overscroll-behavior: contain;
}
.tutorial-fish-entry {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-left: 3px solid #64748b;
  border-radius: 9px;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.08);
}
.tutorial-fish-entry.rarity-common { border-left-color: #0284c7; }
.tutorial-fish-entry.rarity-rare { border-left-color: #7c3aed; }
.tutorial-fish-entry.rarity-legendary { border-left-color: #d97706; }
.tutorial-fish-entry-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 21px;
  background: #f1f5f9;
  border-radius: 7px;
}
.tutorial-fish-entry-name {
  overflow: hidden;
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tutorial-fish-entry-rarity {
  justify-self: start;
  padding: 1px 6px;
  color: #334155;
  font-size: 10px;
  font-weight: 800;
  background: #e2e8f0;
  border-radius: 999px;
}
.rarity-common .tutorial-fish-entry-rarity { color: #075985; background: #e0f2fe; }
.rarity-rare .tutorial-fish-entry-rarity { color: #5b21b6; background: #ede9fe; }
.rarity-legendary .tutorial-fish-entry-rarity { color: #92400e; background: #fef3c7; }
.tutorial-fish-entry-value {
  grid-column: 3;
  grid-row: 1 / 3;
  color: #92400e;
  font-size: 12px;
  white-space: nowrap;
}
.tutorial-fish-entry-value span { font-size: 11px; }

@media (max-width: 900px) and (orientation: landscape) {
  .tutorial-modal-card .tut-slide-desc { font-size: 13px !important; line-height: 1.4 !important; }
  .tutorial-modal-card .tut-flow-label { font-size: 11.5px !important; }
  .tutorial-modal-card .tut-flow-sub { font-size: 10.5px !important; }
  .tutorial-modal-card .tut-tip-box { font-size: 12px !important; }
  .tut-fish-catalog-button { margin-bottom: 5px; padding: 4px 8px; }
  .tut-fish-catalog-button span { font-size: 11px; }
  .tut-fish-catalog-button small { font-size: 9.5px; }
  .tutorial-fish-catalog-card {
    width: min(570px, 92vw) !important;
    max-width: 570px !important;
    max-height: min(360px, 88dvh) !important;
    padding: 10px !important;
  }
  .tutorial-fish-catalog-header { gap: 8px; padding-bottom: 7px; }
  .tutorial-fish-book-mark { width: 32px; height: 32px; flex-basis: 32px; }
  .tutorial-fish-book-mark svg { width: 21px; height: 21px; }
  .tutorial-fish-catalog-header h2 { font-size: 17px; }
  .tutorial-fish-catalog-header p { font-size: 10px; }
  .tutorial-fish-catalog-grid { gap: 4px; max-height: min(240px, 60dvh); padding-top: 7px; }
  .tutorial-fish-entry { padding: 4px 6px; column-gap: 5px; }
  .tutorial-fish-entry-icon { width: 24px; height: 24px; font-size: 17px; }
  .tutorial-fish-entry-name { font-size: 11px; }
  .tutorial-fish-entry-rarity { font-size: 9px; }
  .tutorial-fish-entry-value { font-size: 11px; }
}

@media (max-width: 520px) {
  .tutorial-fish-catalog-grid { grid-template-columns: 1fr; }
  .tutorial-fish-catalog-card { padding: 14px !important; }
}

/* Responsive station controls: real hit boxes stay aligned with measured labels. */
.ps1-zone-tag,
.ps1-zone-tag:hover {
  transform: translate(-50%, -100%) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  max-width: none !important;
}
.ps1-step-btn,
.hud-top-actions .hud-icon-btn,
.stock-help-btn,
.stock-help-btn.stock-spyglass-btn,
.stock-help-btn.stock-popover-close,
.dive-loot-close {
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0;
  touch-action: manipulation;
}
.ps1-tag-action-btn {
  box-sizing: border-box !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: auto !important;
  touch-action: manipulation;
}
.ps1-step-btn::after,
.ps1-tag-action-btn::after,
.hud-top-actions .hud-icon-btn::after { content: none !important; }
.ps1-zone-tag .ps1-step-info-btn {
  position: static !important;
  transform: none !important;
}
#btnConfirm { min-height: 44px !important; max-height: none !important; }
:where(button, [href], input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sun-gold, #facc15) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #082f49 !important;
}
.stock-help-btn.stock-floor-help-btn {
  transform: translate(-50%, -50%);
  border: 0 !important;
  background: radial-gradient(circle, rgba(7, 89, 133, 0.56) 0 12px, rgba(125, 211, 252, 0.52) 12px 14px, transparent 15px) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px !important;
  box-shadow: none !important;
}
.stock-help-btn.stock-floor-help-btn:hover {
  background: radial-gradient(circle, rgba(2, 132, 199, 0.68) 0 12px, rgba(125, 211, 252, 0.64) 12px 14px, transparent 15px) !important;
}

@media (min-width: 1101px) and (min-height: 501px) {
  .hud-col-right.hud-island-status {
    left: auto;
    right: max(14px, env(safe-area-inset-right));
  }
  .hud-col-battle.hud-island-center { min-width: 390px; max-width: 390px; }
  .topbar #marketBattleHub { min-width: 0; }
}

@media (max-width: 1100px), (max-height: 500px) and (orientation: landscape) {
  .topbar.ps1-hud-topbar {
    position: fixed !important;
    top: max(6px, env(safe-area-inset-top)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto;
    align-items: start !important;
    gap: 4px 10px !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
  .hud-col-days.hud-island-left {
    position: static !important;
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
    max-width: 250px !important;
    padding: 3px !important;
    overflow: visible !important;
  }
  .hud-col-days .hud-week-blocks { flex-direction: row !important; gap: 2px !important; }
  .hud-col-days .week-block {
    flex: 1 1 0;
    min-width: 0 !important;
    width: auto !important;
    height: 23px !important;
    padding: 2px !important;
    flex-direction: row !important;
  }
  .hud-col-days .week-block-day { font-size: 10px !important; }
  .hud-col-days .week-block-ico svg { width: 12px !important; height: 12px !important; }
  .hud-col-battle.hud-island-center {
    position: static !important;
    grid-column: 1;
    grid-row: 2;
    transform: none !important;
    width: 250px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 3px 6px !important;
  }
  .topbar #marketBattleHub { min-width: 0 !important; }
  #hudStatusIsland {
    position: static !important;
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex !important;
    flex-direction: row !important;
    height: auto !important;
    width: auto !important;
    gap: 6px !important;
    padding: 3px 5px !important;
  }
  #ps1HudResources {
    position: static !important;
    display: flex !important;
    width: auto !important;
    gap: 3px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
  #hudCoinPill, #hudCpPill, #hudFishPill { height: 30px !important; font-size: 12px !important; }
  #ps1HudResources .res-num { font-size: 12px !important; }
  #ps1HudResources .res-svg-slot svg { width: 16px !important; height: 16px !important; }
  .hud-top-actions { position: static !important; gap: 4px !important; margin: 0 !important; }
  .hud-top-actions .hud-icon-btn svg { width: 18px !important; height: 18px !important; }
  .game-toast-layer {
    top: calc(max(6px, env(safe-area-inset-top)) + 80px) !important;
    width: min(300px, calc(100vw - 24px)) !important;
    gap: 4px;
  }
  .game-day-intro { box-sizing: border-box; padding: 4px 7px !important; }
  .game-day-intro-title { font-size: 11px !important; }
  .game-day-intro-desc { font-size: 10px !important; line-height: 1.2; }
  .ps1-zone-tag {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 3px 5px !important;
    border-width: 1.5px !important;
    border-bottom-width: 3px !important;
    border-radius: 8px !important;
  }
  .ps1-zone-main-row { gap: 4px !important; }
  .ps1-zone-label { font-size: 10.5px !important; }
  .ps1-zone-ico svg { width: 14px !important; height: 14px !important; }
  .ps1-zone-side-count { min-width: 18px !important; height: 20px !important; line-height: 20px !important; font-size: 11px !important; }
  .ps1-tag-action-btn { width: 100%; padding: 3px 6px !important; font-size: 10px !important; }
  .ps1-usina-bar-wrap { margin: 0 !important; }
  #btnConfirm {
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    padding: 5px 20px !important;
    font-size: 13px !important;
    min-width: 250px !important;
    max-width: calc(100vw - 24px) !important;
  }
  #weatherBanner.event-banner-clean:not([hidden]) {
    position: fixed !important;
    top: calc(max(6px, env(safe-area-inset-top)) + 80px) !important;
    left: auto !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    transform: none !important;
    box-sizing: border-box;
    width: min(255px, 38vw) !important;
    max-height: calc(100dvh - 138px);
    overflow-y: auto !important;
    padding: 5px 7px !important;
    transition: none;
  }
  #weatherBanner.event-banner-clean:not([hidden])::after { display: none; }
  #weatherBanner .eb-forecast, #weatherBanner .eb-rare-sticker { display: none; }
  #weatherBanner .eb-title { font-size: 12px !important; }
  #weatherBanner .eb-desc { font-size: 10px !important; }
  #weatherBanner button { min-height: 44px; }
  #weatherBanner.event-banner-clean.eb-theme-octopus:not([hidden]) {
    top: var(--octopus-banner-y, 55vh) !important;
    left: var(--octopus-banner-x, 50vw) !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    transform: translate(-50%, calc(-100% - 12px)) !important;
  }
  .game-toast-layer:has(.game-day-intro) { left: 8px; transform: none; width: min(300px, 46vw) !important; }
  .ps1-hud-resources > .stock-pill-wrapper .ps1-stock-popover {
    max-width: min(300px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 100px) !important;
  }
}

/* Peças de tabuleiro e HUD usam uma escala fluida entre FHD e 2K. */
:root {
  --game-ui-unit: clamp(10px, 0.6vw, 15px);
}

.hud-island {
  font-size: var(--game-ui-unit) !important;
  gap: calc(var(--game-ui-unit) * 0.55) !important;
  padding: calc(var(--game-ui-unit) * 0.35) calc(var(--game-ui-unit) * 0.65) !important;
}

.hud-col-days.hud-island-left {
  font-size: var(--game-ui-unit) !important;
}

.topbar.ps1-hud-topbar {
  gap: calc(var(--game-ui-unit) * 0.75) !important;
}

.week-block {
  gap: calc(var(--game-ui-unit) * 0.3) !important;
  padding: calc(var(--game-ui-unit) * 0.35) !important;
}

.week-block-day {
  font-size: calc(var(--game-ui-unit) * 0.82) !important;
}

.ps1-res-pill {
  gap: calc(var(--game-ui-unit) * 0.35) !important;
  font-size: calc(var(--game-ui-unit) * 0.92) !important;
}

#ps1HudResources .res-num {
  font-size: calc(var(--game-ui-unit) * 1.05) !important;
}

#ps1HudResources .res-svg-slot svg,
.hud-top-actions .hud-icon-btn svg {
  width: calc(var(--game-ui-unit) * 1.25) !important;
  height: calc(var(--game-ui-unit) * 1.25) !important;
}

.ps1-zone-tag {
  gap: calc(var(--game-ui-unit) * 0.45) !important;
  padding: calc(var(--game-ui-unit) * 0.35) calc(var(--game-ui-unit) * 0.55) !important;
  font-size: var(--game-ui-unit) !important;
}

.ps1-zone-main-row {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  gap: calc(var(--game-ui-unit) * 0.4) !important;
  text-align: left;
  cursor: inherit;
}

.ps1-zone-label {
  font-size: calc(var(--game-ui-unit) * 0.95) !important;
}

.ps1-zone-ico svg {
  width: calc(var(--game-ui-unit) * 1.4) !important;
  height: calc(var(--game-ui-unit) * 1.4) !important;
}

.ps1-zone-side-count {
  min-width: calc(var(--game-ui-unit) * 1.9) !important;
  height: calc(var(--game-ui-unit) * 1.9) !important;
  font-size: calc(var(--game-ui-unit) * 0.95) !important;
  line-height: 1 !important;
}

#weatherBanner .eb-title {
  font-size: calc(var(--game-ui-unit) * 1.05) !important;
}

#weatherBanner .eb-desc {
  font-size: calc(var(--game-ui-unit) * 0.85) !important;
}

.ps1-zone-tag.drop-ready {
  border-color: #7dd3fc !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.45), 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.ps1-zone-tag.selected-source {
  border-color: #fef08a !important;
  background: linear-gradient(180deg, rgba(161, 98, 7, 0.94), rgba(120, 53, 15, 0.96)) !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.65), 0 0 20px rgba(250, 204, 21, 0.5) !important;
}

.ps1-zone-main-row:focus-visible {
  outline: 3px solid #facc15 !important;
  outline-offset: 3px;
  border-radius: 5px !important;
}

.worker-dragging .ps1-zone-tag:not(.ps1-plaza-tag) {
  border-color: #7dd3fc !important;
}

.camera-dragging,
.camera-dragging * {
  cursor: grabbing !important;
}

.webgl-iceberg-canvas {
  touch-action: none;
}

#btnConfirm {
  padding: calc(var(--game-ui-unit) * 0.55) calc(var(--game-ui-unit) * 1.3) !important;
  font-size: calc(var(--game-ui-unit) * 1.12) !important;
}

@media (min-width: 1101px) and (min-height: 501px) {
  .ps1-zone-tag .ps1-tag-action-btn {
    font-size: calc(var(--game-ui-unit) * 0.78) !important;
  }
}

/* Placas de estação mais compactas, com ênfase visual semelhante à barra da fábrica. */
.ps1-zone-tag {
  gap: calc(var(--game-ui-unit) * 0.3) !important;
  padding: 2px calc(var(--game-ui-unit) * 0.45) !important;
  border-width: 1px !important;
  border-bottom-width: 2px !important;
  opacity: 0.9 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.ps1-zone-tag.zone-active {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.84), rgba(15, 23, 42, 0.88)) !important;
  box-shadow: 0 2px 0 rgba(2, 6, 23, 0.82), 0 0 10px rgba(254, 240, 138, 0.32) !important;
}

.ps1-zone-tag:hover { opacity: 0.94 !important; }
.ps1-zone-tag.selected-source { opacity: 0.98 !important; }

.ps1-zone-main-row {
  min-height: clamp(28px, calc(var(--game-ui-unit) * 2.2), 34px) !important;
  line-height: 1.05 !important;
}

.ps1-zone-side-count {
  min-width: clamp(16px, calc(var(--game-ui-unit) * 1.65), 22px) !important;
  height: clamp(16px, calc(var(--game-ui-unit) * 1.45), 21px) !important;
  padding: 0 3px !important;
  font-size: clamp(8px, calc(var(--game-ui-unit) * 0.78), 11px) !important;
}

.ps1-tag-action-btn.btn-recipes,
.ps1-tag-action-btn.btn-upgrades,
.ps1-tag-action-btn.btn-hire {
  min-width: 44px !important;
  min-height: clamp(26px, calc(var(--game-ui-unit) * 1.9), 30px) !important;
  padding: 1px 7px !important;
  border-width: 1px !important;
  border-bottom-width: 2px !important;
  border-radius: 999px !important;
  font-size: clamp(8.5px, calc(var(--game-ui-unit) * 0.72), 10.5px) !important;
  line-height: 1 !important;
  opacity: 0.9 !important;
}

.ps1-tag-action-btn.btn-recipes {
  background: linear-gradient(180deg, #f43f5e, #be123c) !important;
}

.ps1-tag-action-btn.btn-upgrades {
  background: linear-gradient(180deg, #10b981, #047857) !important;
}

.ps1-tag-action-btn.btn-hire {
  height: auto !important;
}

.ps1-tag-action-btn.btn-recipes:hover,
.ps1-tag-action-btn.btn-upgrades:hover,
.ps1-tag-action-btn.btn-hire:hover { opacity: 0.96 !important; }

.ps1-tag-action-btn.btn-recipes svg,
.ps1-tag-action-btn.btn-upgrades svg {
  width: clamp(11px, calc(var(--game-ui-unit) * 0.82), 13px) !important;
  height: clamp(11px, calc(var(--game-ui-unit) * 0.82), 13px) !important;
}

.ps1-usina-bar-wrap {
  width: 116px !important;
  gap: 1px !important;
  padding: 2px 9px !important;
  background: rgba(15, 23, 42, 0.68) !important;
  border-color: rgba(56, 189, 248, 0.48) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
  opacity: 0.92 !important;
}

.ps1-usina-bar-header {
  font-size: 11px !important;
  line-height: 1 !important;
}

.ps1-usina-bar-track { height: 3px !important; }

/* Oficina: três rotas claras e o reroll global */
.upgrade-reroll-row {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 10px;
}

.upgrade-reroll-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.upgrade-reroll-button,
.upgrade-reroll-help {
  min-height: 34px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--ink-shadow);
  font: 800 12px 'Fredoka', sans-serif;
  cursor: pointer;
}

.upgrade-reroll-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  color: #6b3b00;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
}

.upgrade-reroll-button.is-pending {
  color: #075985;
  background: linear-gradient(180deg, #bae6fd, #7dd3fc);
}

.upgrade-reroll-button:disabled {
  cursor: not-allowed;
  opacity: .62;
  box-shadow: none;
}

.upgrade-reroll-help {
  width: 34px;
  padding: 0;
  color: #ffffff;
  background: var(--royal-blue);
  font-size: 17px;
}

.upgrade-modal-tracks .upgrade-modal-route {
  min-width: 0;
  padding: 8px;
}

.upgrade-modal-tracks .track-column-hdr {
  margin: 0 0 2px;
  font-size: 12px;
}

.upgrade-modal-tracks .track-upgrades-list {
  min-width: 0;
  gap: 8px;
}

.upgrade-modal-tracks .tech-dish-card {
  min-width: 0;
  padding: 8px;
}

.upgrade-modal-tracks .tech-card-mid {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.upgrade-modal-tracks .tech-card-desc,
.upgrade-modal-tracks .tech-card-costs {
  min-width: 0;
}

.upgrade-modal-tracks .tech-card-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1.15;
}

.upgrade-modal-card-icon {
  flex: 0 0 auto;
  font-size: 19px;
}

.upgrade-modal-tracks .tech-card-desc {
  font-size: 11px;
  line-height: 1.3;
}

.upgrade-modal-tracks .tech-card-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.upgrade-modal-tracks .tech-cost-chip {
  min-width: 0;
  padding: 3px 5px;
  font-size: 10px;
}

.upgrade-modal-tracks .tech-queue-btn {
  min-height: 30px;
  padding: 5px 6px;
  font-size: 10px;
}

.upgrade-reroll-info-card {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  padding: 24px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 6px 0 var(--ink-shadow);
}

.upgrade-reroll-info-card h2 {
  margin: 0 34px 12px 0;
  color: var(--royal-blue);
  font: 800 20px 'Baloo 2', sans-serif;
}

.upgrade-reroll-info-card p {
  margin: 0;
  color: #263f54;
  font: 600 15px/1.45 'Fredoka', sans-serif;
}

@media (max-width: 760px) {
  .upgrade-modal-tracks {
    grid-template-columns: 1fr;
    max-height: min(58vh, 620px);
    overflow-y: auto;
    padding: 2px 4px 8px;
  }

  .upgrade-modal-tracks .track-column {
    padding: 8px;
  }

  .upgrade-modal-tracks .track-upgrades-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .upgrade-reroll-row {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .ps1-usina-bar-wrap { width: 108px !important; }
}

.ps1-zone-tag[data-role-hint]::after {
  content: attr(data-role-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 1000;
  box-sizing: border-box;
  width: max-content;
  max-width: min(250px, 74vw);
  padding: 7px 10px;
  border: 1px solid rgba(125, 211, 252, 0.65);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.96);
  color: #f8fafc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font: 600 12px/1.3 'Fredoka', sans-serif;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 3px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.ps1-zone-tag[data-role-hint]:hover,
.ps1-zone-tag[data-role-hint]:focus-within { z-index: 200; }

.ps1-zone-tag[data-role-hint]:hover::after,
.ps1-zone-tag[data-role-hint]:focus-within::after,
.ps1-zone-tag[data-role-hint].selected-source::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Tipografia mais legível para os projetos da oficina. */
.upgrade-modal-tracks .track-column-hdr {
  margin-bottom: 7px;
  font: 800 15px/1.15 'Baloo 2', 'Fredoka', sans-serif;
  letter-spacing: .035em;
}

.upgrade-modal-tracks .tech-dish-card {
  gap: 10px;
  padding: 11px;
  border-width: 2px;
  border-radius: 13px;
}

.upgrade-modal-tracks .pamphlet-dish-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.upgrade-modal-tracks .tech-card-pts {
  align-self: flex-start;
  margin: 0;
}

.upgrade-modal-tracks .tech-card-title {
  align-items: flex-start;
  gap: 7px;
  color: #102b40;
  font: 800 17px/1.18 'Baloo 2', 'Fredoka', sans-serif;
}

.upgrade-modal-card-icon {
  font-size: 22px;
  line-height: 1;
}

.upgrade-modal-tracks .tech-card-pts { font-size: 14px; }

.upgrade-modal-tracks .tech-card-desc {
  color: #243f54;
  font: 600 14px/1.4 'Fredoka', sans-serif;
}

.upgrade-modal-tracks .tech-card-costs { gap: 6px; }

.upgrade-modal-tracks .tech-cost-chip {
  padding: 5px 7px;
  font: 700 12px/1.2 'Fredoka', sans-serif;
}

.upgrade-modal-tracks .tech-queue-btn {
  min-height: 38px;
  padding: 7px 8px;
  font: 800 12px/1.2 'Fredoka', sans-serif;
  white-space: normal;
}

.upgrade-modal-tracks .tech-queue-btn svg { flex: 0 0 auto; }

.upgrade-modal-tracks .is-installed-stamp {
  min-height: 34px;
  padding: 6px 8px;
  font: 800 11px/1.25 'Fredoka', sans-serif;
}

@media (max-width: 760px) {
  .upgrade-modal-tracks .track-column-hdr { font-size: 16px; }
  .upgrade-modal-tracks .tech-card-title { font-size: 18px; }
  .upgrade-modal-tracks .tech-card-desc { font-size: 14.5px; }
  .upgrade-modal-tracks .tech-cost-chip { font-size: 12.5px; }
  .upgrade-modal-tracks .tech-queue-btn { min-height: 42px; font-size: 13px; }
}

.recipe-book-card .pamphlet-header { margin-bottom: 12px; }
.recipe-book-card .pamphlet-ornament { margin-bottom: 6px; }

@media (max-width: 700px) {
  #recipesModal .modal-card.wide-card {
    width: min(680px, 95vw) !important;
    max-width: 680px !important;
    max-height: min(86dvh, 820px) !important;
    padding: 10px 12px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  body * {
    cursor: url("./cursor-toon.svg") 3 2, auto !important;
  }

  button:not(:disabled),
  button:not(:disabled) *,
  a[href],
  a[href] *,
  label[for],
  label[for] *,
  select:not(:disabled),
  select:not(:disabled) *,
  input[type="button"]:not(:disabled),
  input[type="submit"]:not(:disabled),
  input[type="reset"]:not(:disabled),
  input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled),
  input[type="range"]:not(:disabled),
  input[type="color"]:not(:disabled),
  input[type="file"]:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  [role="button"]:not([aria-disabled="true"]) *,
  [onclick],
  [onclick] *,
  summary,
  summary *,
  [data-board-target] {
    cursor: url("./cursor-pointer.svg") 13 3, pointer !important;
  }

  input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea,
  [contenteditable="true"] {
    cursor: text !important;
  }

  :disabled,
  :disabled *,
  [aria-disabled="true"],
  [aria-disabled="true"] * {
    cursor: not-allowed !important;
  }

  .webgl-iceberg-canvas[data-cursor-state="grab"] {
    cursor: url("./cursor-hand.svg") 13 3, grab !important;
  }

  .webgl-iceberg-canvas[data-cursor-state="grabbing"] {
    cursor: url("./cursor-hand.svg") 13 3, grabbing !important;
  }

  .camera-dragging .webgl-iceberg-canvas {
    cursor: url("./cursor-hand.svg") 13 3, grabbing !important;
  }

  .webgl-iceberg-canvas[data-cursor-state="pointer"] {
    cursor: url("./cursor-pointer.svg") 13 3, pointer !important;
  }
}

.eb-theme-alien {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 58%, #bbf7d0 100%) !important;
  border-color: #16a34a !important;
  animation: bannerPulseGreen 3s infinite ease-in-out;
}
#weatherBanner.eb-theme-alien .eb-ico {
  display: grid;
  place-items: center;
  color: #bbf7d0;
  background: linear-gradient(155deg, #052e16, #14532d);
  border-color: #052e16;
}
#weatherBanner.eb-theme-alien .eb-title { color: #14532d; }
#weatherBanner.eb-theme-alien .eb-desc { color: #166534; }
.alien-event-sticker {
  background: #166534;
  color: #ecfccb;
}
.alien-event-prompt {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #86efac;
  border-radius: 8px;
  background: rgba(240, 253, 244, 0.88);
  color: #14532d;
  font: 700 11px/1.3 'Fredoka', sans-serif;
}

.snow-layer.alien-event {
  background: radial-gradient(ellipse at 70% 8%, rgba(74, 222, 128, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(8, 20, 32, 0.22), transparent 45%);
}
.snow-layer.alien-event .snow-dot {
  background: #e2f5ea;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 0 5px rgba(134, 239, 172, 0.3);
}
.iceberg-canvas-wrap.night-mode.alien-event {
  background: linear-gradient(180deg, #0a141c 0%, #0f2230 50%, #0b1a2a 80%, #06182a 100%);
  box-shadow: inset 0 0 30px rgba(74, 222, 128, 0.1);
}
.iceberg-stage-box.alien-event {
  border-color: #14283b;
  box-shadow: 0 4px 0 #14283b, 0 0 10px rgba(74, 222, 128, 0.12);
}
.alien-roster-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 7px;
  border: 1px solid #86efac;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font: 700 10px/1.25 'Fredoka', sans-serif;
}
.alien-roster-status.is-back { background: #dcfce7; }
.penguin-avatar-pin {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.penguin-avatar-pin.is-alien-away .game-svg-ico { opacity: 0.34; filter: grayscale(0.8); }
.penguin-avatar-pin.is-alien { border-radius: 50%; background: rgba(34, 197, 94, 0.16); }
.alien-away-mark {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 9px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px white);
}
.role-clean-card.is-alien-abduction-card { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.16); }
.alien-field-tag,
.alien-role-badge {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 5px;
  border: 1px solid #16a34a;
  border-radius: 5px;
  background: #dcfce7;
  color: #14532d;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
}
.alien-role-badge { white-space: normal; }
.p-chip.alien {
  border-color: #86efac;
  background: #f0fdf4;
  color: #14532d;
}

@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  #weatherBanner.eb-theme-alien .eb-ico { padding: 3px; }
  .alien-event-prompt { font-size: 10px; }
  .alien-role-badge { font-size: 9px; }
  .alien-roster-status { max-width: 100%; flex-wrap: wrap; }
}


/* Placar superior: duelo Você × Rival mais legível (desktop) */
@media (min-width: 901px) {
  .topbar #marketBattleHub .battle-hdr-row { gap: 10px !important; margin-bottom: 3px !important; }
  .topbar #marketBattleHub .battle-team {
    padding: 1px 10px 1px 4px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: rgba(15, 23, 42, 0.38);
    transition: background .25s, border-color .25s, box-shadow .25s;
  }
  .topbar #marketBattleHub .battle-team.bot { padding: 1px 4px 1px 10px; }
  .topbar #marketBattleHub .battle-avatar {
    display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.12);
  }
  .topbar #marketBattleHub .battle-name {
    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11px; font-weight: 700; opacity: .85;
  }
  .topbar #marketBattleHub .battle-score {
    font: 800 20px/1 'Baloo 2', 'Fredoka', sans-serif; min-width: 24px; text-align: center;
    text-shadow: 0 2px 0 rgba(2, 6, 23, 0.6);
  }
  .topbar #marketBattleHub .battle-team.player .battle-score { color: #7dd3fc; }
  .topbar #marketBattleHub .battle-team.bot .battle-score { color: #fdba74; }
  .topbar #marketBattleHub .battle-team.player.is-leading { background: rgba(2, 132, 199, 0.35); border-color: #38bdf8; box-shadow: 0 0 10px rgba(56, 189, 248, 0.4); }
  .topbar #marketBattleHub .battle-team.bot.is-leading { background: rgba(217, 119, 6, 0.35); border-color: #fb923c; box-shadow: 0 0 10px rgba(251, 146, 60, 0.4); }
  .topbar #marketBattleHub .battle-meter-wrap {
    height: 9px !important;
    background: rgba(15, 23, 42, 0.7);
    border-color: #0b1220;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
  }
  .topbar #marketBattleHub .battle-meter-wrap::after {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    background: rgba(255, 255, 255, 0.45); pointer-events: none;
  }
  .topbar #marketBattleHub .battle-pin {
    width: 10px; height: 10px; top: 50%;
  }
}

.stock-help-btn.stock-owner-button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  flex: 0 0 32px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
}
.stock-owner-button svg { width: 19px !important; height: 19px !important; flex: 0 0 auto; }
.stock-owner-self { background: #075985 !important; border-color: #7dd3fc !important; }
.stock-owner-rival { background: #7f1d1d !important; border-color: #fca5a5 !important; }
.stock-owner-self:hover { background: #0369a1 !important; transform: translateY(-1px); }
.stock-owner-rival:hover { background: #b91c1c !important; transform: translateY(-1px); }
.stock-owner-button[aria-expanded="true"] { outline: 2px solid #facc15; outline-offset: 1px; }

@media (max-width: 700px) {
  .stock-help-btn.stock-owner-button {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    flex-basis: 30px !important;
  }
  .stock-owner-button svg { width: 18px !important; height: 18px !important; }
}

/* Evita que a legenda do primeiro dia fique cortada no topo da tela. */
@media (min-width: 769px) {
  .hud-col-days.hud-island-left {
    padding: calc(var(--game-ui-unit) * 0.35 + 1px) calc(var(--game-ui-unit) * 0.65 + 1px) !important;
  }

  .hud-col-days .week-block:first-child .day-block-tooltip {
    top: calc(100% + 2px);
    transform: translateY(4px) translateX(4px);
  }

  .hud-col-days .week-block:first-child:hover .day-block-tooltip,
  .hud-col-days .week-block:first-child:focus .day-block-tooltip {
    transform: translateY(0) translateX(0);
  }
}

#ps1HudResources .stock-pill-wrapper {
  gap: 7px !important;
}

.stock-help-btn.stock-owner-button.stock-owner-self {
  background: #38bdf8 !important;
  border-color: #14283b !important;
}

.stock-help-btn.stock-owner-button.stock-owner-rival {
  background: #ef4444 !important;
  border-color: #14283b !important;
}

.stock-help-btn.stock-owner-button.stock-owner-self:hover {
  background: #0ea5e9 !important;
}

.stock-help-btn.stock-owner-button.stock-owner-rival:hover {
  background: #dc2626 !important;
}

@media (max-height: 500px) and (orientation: landscape) {
  .topbar #marketBattleHub .battle-vs-mark {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .hud-col-days.hud-island-left {
    width: 235px !important;
    max-width: 235px !important;
  }
  .hud-col-days .week-block {
    height: 25px !important;
    gap: 1px !important;
    padding: 1px !important;
  }
  .hud-col-days .week-block-day { font-size: 10.5px !important; }
  .hud-col-days .week-block-ico svg {
    width: 13px !important;
    height: 13px !important;
  }
}

@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .stock-help-btn.stock-owner-button.stock-owner-self {
    background: #4f8da6 !important;
  }
  .stock-help-btn.stock-owner-button.stock-owner-rival {
    background: #b86b6b !important;
  }
  .stock-owner-button svg { filter: saturate(0.8); }
  .stock-help-btn.stock-owner-button.stock-owner-self:hover {
    background: #3e758c !important;
  }
  .stock-help-btn.stock-owner-button.stock-owner-rival:hover {
    background: #a45a5a !important;
  }
}

#ps1HudResources .info-pill[data-tooltip] {
  position: relative;
  cursor: help;
}

#ps1HudResources .info-pill[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 120;
  padding: 4px 9px;
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.97);
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.4);
  color: #f8fafc;
  font: 700 11px/1.2 'Fredoka', sans-serif;
  letter-spacing: 0.2px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -3px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

#ps1HudResources .info-pill[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

@media (max-width: 768px) {
  #ps1HudResources .stock-pill-wrapper {
    gap: 6px !important;
  }
}

/* Ajuda compacta nas estações; o alvo de toque fica maior que o círculo visível. */
.ps1-zone-tag .ps1-step-info-btn {
  display: inline-flex !important;
  flex: 0 0 44px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: none !important;
}

.ps1-zone-tag .ps1-step-info-btn > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #7dd3fc;
  border-radius: 50%;
  background: #075985;
  box-shadow: 0 2px 0 #020617;
  color: #fff;
  font: 800 12px/1 'Fredoka', sans-serif;
  transition: background 0.12s ease, transform 0.12s ease;
}

.ps1-zone-tag .ps1-step-info-btn:hover > span,
.ps1-zone-tag .ps1-step-info-btn:focus-visible > span {
  background: #0284c7;
  transform: scale(1.08);
}

.station-info-card {
  width: min(580px, calc(100vw - 32px)) !important;
  max-width: 580px !important;
  max-height: min(84dvh, 640px) !important;
  padding: 24px 26px 20px !important;
}

.station-info-card .ps1-clean-modal-hdr {
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.station-info-card .ps1-clean-modal-title {
  font-size: 26px;
}

.station-info-body {
  display: grid;
  gap: 10px;
  font-family: 'Fredoka', sans-serif;
}

.station-info-intro {
  margin: 0;
  color: #334155;
  font-size: 16px;
  line-height: 1.5;
}

.station-info-list {
  display: grid;
  gap: 8px;
}

.station-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid rgba(2, 132, 199, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.station-info-row > svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.station-info-icon {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  font-size: 24px;
}

.station-info-row-copy {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.3;
}

.station-info-row-copy small {
  color: #475569;
  font-size: 13px;
  font-weight: 600;
}

.station-info-odds {
  padding: 4px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #075985;
  font-size: 13px;
  font-weight: 800;
}

.station-info-card .modal-bottom-actions {
  margin-top: 12px;
}

.ps1-plaza-tag {
  gap: calc(var(--game-ui-unit) * 0.26) !important;
  padding: 1px calc(var(--game-ui-unit) * 0.38) !important;
}

.ps1-plaza-tag .ps1-zone-main-row {
  min-height: clamp(27px, calc(var(--game-ui-unit) * 2.12), 32px) !important;
  gap: calc(var(--game-ui-unit) * 0.34) !important;
}

.ps1-plaza-tag .ps1-zone-label {
  font-size: calc(var(--game-ui-unit) * 0.9) !important;
}

.ps1-plaza-tag .ps1-zone-ico svg {
  width: calc(var(--game-ui-unit) * 1.32) !important;
  height: calc(var(--game-ui-unit) * 1.32) !important;
}

.ps1-plaza-tag .ps1-zone-side-count {
  min-width: clamp(15px, calc(var(--game-ui-unit) * 1.55), 20px) !important;
  height: clamp(15px, calc(var(--game-ui-unit) * 1.38), 19px) !important;
}

.ps1-plaza-tag .btn-hire,
.ps1-zone-tag .btn-recipes {
  min-height: 26px !important;
}

.ps1-plaza-tag .btn-hire {
  padding-right: 6px !important;
  padding-left: 6px !important;
  font-size: clamp(8px, calc(var(--game-ui-unit) * 0.68), 10px) !important;
}

/* Veredito legível do turno: resultado e variações aparecem antes dos detalhes. */
.rep-round-outcome {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 9px;
  min-height: 46px;
  padding: 5px 9px;
  border: 2px solid #0284c7;
  border-radius: 15px;
  color: #0f172a;
  background: linear-gradient(115deg, #e0f2fe 0%, #f8fafc 72%);
  box-shadow: 0 4px 0 rgba(2, 132, 199, 0.2);
}
.rep-round-outcome.is-ahead {
  border-color: #16a34a;
  background: linear-gradient(115deg, #dcfce7 0%, #f8fafc 72%);
  box-shadow: 0 4px 0 rgba(22, 163, 74, 0.18);
}
.rep-round-outcome.is-behind {
  border-color: #e11d48;
  background: linear-gradient(115deg, #ffe4e6 0%, #fffafa 72%);
  box-shadow: 0 4px 0 rgba(225, 29, 72, 0.16);
}
.rep-round-outcome.is-even {
  border-color: #d97706;
  background: linear-gradient(115deg, #fef3c7 0%, #fffbeb 72%);
  box-shadow: 0 4px 0 rgba(217, 119, 6, 0.17);
}
.rep-round-outcome.is-entering {
  animation: roundOutcomeArrive 0.42s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
@keyframes roundOutcomeArrive {
  from { opacity: 0; transform: translateY(9px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.rep-round-outcome-main {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rep-round-outcome-icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 9px;
  color: #0369a1;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.12);
}
.rep-round-outcome.is-ahead .rep-round-outcome-icon { color: #15803d; }
.rep-round-outcome.is-behind .rep-round-outcome-icon { color: #be123c; }
.rep-round-outcome.is-even .rep-round-outcome-icon { color: #a16207; }
.rep-round-outcome-copy { min-width: 0; }
.rep-round-outcome-copy h3 {
  margin: 0;
  color: #0f172a;
  font: 900 14px/1.15 'Baloo 2', 'Fredoka', sans-serif;
}
.rep-round-difference {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a;
  font: 900 11px/1 'Baloo 2', 'Fredoka', sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rep-round-outcome.is-ahead .rep-round-difference { color: #15803d; }
.rep-round-outcome.is-behind .rep-round-difference { color: #be123c; }
.rep-round-outcome.is-even .rep-round-difference { color: #a16207; }

.turn-cinematic-skip {
  position: absolute;
  z-index: 12;
  bottom: max(18px, env(safe-area-inset-bottom));
  right: max(14px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  min-height: 44px;
  padding: 8px 13px;
  border: 2px solid #0f172a;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.42);
  font: 900 12px/1 'Fredoka', sans-serif;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.turn-cinematic-skip:hover {
  transform: translateY(-1px);
  background: #fef3c7;
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.42);
}
.turn-cinematic-skip:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.42);
}
.turn-cinematic-skip:focus-visible {
  outline: 3px solid #0284c7;
  outline-offset: 3px;
}
.turn-cinematic-skip[hidden] { display: none !important; }

@media (max-width: 620px) {
  .rep-round-outcome {
    gap: 4px 7px;
    padding: 4px 7px;
  }
  .rep-round-outcome-main { flex-basis: auto; }
  .rep-round-outcome-icon { flex-basis: 24px; width: 24px; height: 24px; }
  .rep-round-difference { padding: 4px 7px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rep-round-outcome.is-entering { animation: none; }
  .turn-cinematic-skip { transition: none; }
  .ps1-tag-action-btn.btn-hire.is-confirming { animation: none; }
}

@media (hover: hover) and (pointer: fine) {
  .ps1-zone-tag[data-zone-role="cook"],
  .ps1-zone-tag[data-zone-role="build"] {
    gap: calc(var(--game-ui-unit) * 0.26) !important;
    padding: 1px calc(var(--game-ui-unit) * 0.4) !important;
    font-size: calc(var(--game-ui-unit) * 0.96) !important;
  }
  .ps1-zone-tag[data-zone-role="cook"] .ps1-zone-main-row,
  .ps1-zone-tag[data-zone-role="build"] .ps1-zone-main-row {
    min-height: clamp(26px, calc(var(--game-ui-unit) * 2.05), 32px) !important;
  }
  .ps1-zone-tag[data-zone-role="cook"] .ps1-tag-action-btn,
  .ps1-zone-tag[data-zone-role="build"] .ps1-tag-action-btn {
    min-height: clamp(24px, calc(var(--game-ui-unit) * 1.75), 28px) !important;
    padding: 0 6px !important;
  }
}

.week-block.halloween-preview {
  background: rgba(88, 28, 135, 0.38);
  border: 1px dashed rgba(216, 180, 254, 0.78);
  border-bottom: 2.5px dashed rgba(192, 132, 252, 0.9);
}

.week-block.halloween-preview .week-block-day {
  color: #f3e8ff;
}

.week-block-event-badge {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid #f3e8ff;
  border-radius: 999px;
  color: #fff;
  background: #7e22ce;
  box-shadow: 0 2px 0 rgba(46, 16, 101, 0.55);
  font: 900 10px/1 'Fredoka', sans-serif;
  pointer-events: none;
}

.week-block-event-badge.is-new {
  min-width: 0;
  height: 14px;
  background: #6b21a8;
  font-size: 7px;
}

.dbt-badge.halloween-forecast-label {
  color: #f3e8ff;
  background: rgba(126, 34, 206, 0.22);
  border-color: #c084fc;
}

.rep-alert-item.halloween-swap-alert {
  color: #581c87;
  background: rgba(243, 232, 255, 0.96);
  border-color: rgba(192, 132, 252, 0.85);
  border-left-color: #9333ea;
  font-weight: 800;
}

/* Celular: faixa compacta, com calendário e ações secundárias sob demanda. */
.mobile-calendar-trigger,
.mobile-menu-toggle {
  display: none !important;
}
.mobile-hud-menu { display: flex; align-items: center; gap: 3px; }
.mobile-menu-label,
.mobile-calendar-event-name { display: none; }

@media (orientation: landscape) {
  body.device-mobile {
    --game-ui-unit: clamp(8.5px, 2.3vh, 9.5px);
  }

  body.device-mobile .topbar.ps1-hud-topbar {
    top: max(4px, env(safe-area-inset-top)) !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    display: grid !important;
    grid-template-columns: minmax(68px, auto) minmax(0, 1fr) auto !important;
    grid-template-rows: 46px !important;
    align-items: center !important;
    gap: 4px !important;
    pointer-events: none !important;
  }

  body.device-mobile .hud-col-days.hud-island-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 92px !important;
    min-width: 68px !important;
    height: 44px !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  body.device-mobile .hud-col-days .hud-week-blocks { display: none !important; }
  body.device-mobile #btnOpenMobileCalendar:not([hidden]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 68px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border: 1px solid rgba(125, 211, 252, 0.6) !important;
    border-radius: 8px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    box-shadow: 0 2px 0 #020617 !important;
    color: #f8fafc !important;
    font: 800 9px/1 'Fredoka', sans-serif !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
  }
  body.device-mobile #btnOpenMobileCalendar svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }

  body.device-mobile .hud-col-battle.hud-island-center {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    padding: 3px 6px !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }
  body.device-mobile .topbar #marketBattleHub,
  body.device-mobile .topbar #marketBattleHub .battle-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-hdr-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    margin: 0 !important;
    color: #f8fafc !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-team {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-avatar,
  body.device-mobile .topbar #marketBattleHub .battle-meter-wrap { display: none !important; }
  body.device-mobile .topbar #marketBattleHub .battle-name {
    max-width: clamp(34px, 12vw, 74px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 9px !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-score {
    min-width: 15px !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-vs-mark {
    display: inline-grid !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
  }

  body.device-mobile #hudStatusIsland {
    grid-column: 3 !important;
    grid-row: 1 !important;
    position: relative !important;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    gap: 4px !important;
    padding: 2px 4px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  body.device-mobile #ps1HudResources {
    gap: 2px !important;
    padding: 0 !important;
  }
  body.device-mobile #hudCoinPill,
  body.device-mobile #hudCpPill,
  body.device-mobile #hudFishPill {
    min-height: 28px !important;
    height: 28px !important;
    gap: 2px !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
  }
  body.device-mobile #ps1HudResources .res-svg-slot svg {
    width: 12px !important;
    height: 12px !important;
  }
  body.device-mobile #ps1HudResources .res-num { font-size: 10px !important; }
  body.device-mobile #ps1HudResources .stock-pill-wrapper { gap: 2px !important; }

  body.device-mobile .hud-top-actions {
    position: relative !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  body.device-mobile .mobile-menu-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 2px !important;
  }
  body.device-mobile .mobile-menu-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }
  body.device-mobile .mobile-menu-toggle span { font-size: 8px; line-height: 1; }
  body.device-mobile .mobile-menu-toggle:focus-visible,
  body.device-mobile #btnOpenMobileCalendar:focus-visible,
  body.device-mobile .mobile-hud-menu .hud-icon-btn:focus-visible {
    outline: 2px solid #facc15 !important;
    outline-offset: 2px;
  }
  body.device-mobile .mobile-hud-menu {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    z-index: 120 !important;
    width: min(230px, calc(100vw - 16px)) !important;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)) !important;
    gap: 4px !important;
    padding: 6px !important;
    border: 1.5px solid rgba(125, 211, 252, 0.72) !important;
    border-radius: 10px !important;
    background: rgba(9, 20, 38, 0.98) !important;
    box-shadow: 0 5px 16px rgba(2, 6, 23, 0.6) !important;
  }
  body.device-mobile.mobile-hud-menu-open .mobile-hud-menu { display: grid !important; }
  body.device-mobile .mobile-hud-menu .hud-icon-btn {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 52px !important;
    height: 48px !important;
    min-height: 44px !important;
    padding: 3px !important;
    border-radius: 7px !important;
  }
  body.device-mobile .mobile-hud-menu .hud-icon-btn svg {
    width: 16px !important;
    height: 16px !important;
  }
  body.device-mobile .mobile-menu-label {
    display: block !important;
    font: 700 8px/1 'Fredoka', sans-serif !important;
    white-space: nowrap !important;
  }

  body.device-mobile .ps1-zone-tag {
    gap: 3px !important;
    padding: 1px 4px !important;
    border-width: 1px !important;
    border-bottom-width: 2px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
  }
  body.device-mobile .ps1-zone-label {
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }
  body.device-mobile .ps1-zone-main-row {
    min-height: 28px !important;
    gap: 3px !important;
  }
  body.device-mobile .ps1-zone-ico svg {
    width: 12px !important;
    height: 12px !important;
  }
  body.device-mobile .ps1-zone-side-count {
    min-width: 15px !important;
    height: 15px !important;
    font-size: 8px !important;
  }
  body.device-mobile .ps1-tag-action-btn {
    min-height: 26px !important;
    padding: 2px 5px !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }
  body.device-mobile .role-clean-name { font-size: 12px !important; }
  body.device-mobile .role-clean-desc { font-size: 9px !important; }
  body.device-mobile #weatherBanner .eb-title { font-size: 10px !important; }
  body.device-mobile #weatherBanner .eb-desc { font-size: 9px !important; line-height: 1.2 !important; }
  body.device-mobile .game-day-intro-title { font-size: 10px !important; }
  body.device-mobile .game-day-intro-desc { font-size: 9px !important; }

  body.device-mobile #btnConfirm {
    min-height: 44px !important;
    padding: 5px 16px !important;
    font-size: 12px !important;
  }
}

body.device-mobile .mobile-calendar-modal { z-index: 150 !important; }
body.device-mobile .mobile-calendar-card {
  display: flex;
  flex-direction: column;
  width: min(560px, 96vw);
  max-height: min(420px, calc(100dvh - 24px));
  overflow: hidden;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #f7fcff;
  box-shadow: 0 5px 0 #020617, 0 12px 32px rgba(0, 0, 0, 0.45);
}
body.device-mobile .mobile-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 8px;
}
body.device-mobile .mobile-calendar-header h2 {
  margin: 0;
  color: #10283a;
  font: 800 16px/1.15 'Baloo 2', 'Fredoka', sans-serif;
}
body.device-mobile .mobile-calendar-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: #fee2e2;
  color: #7f1d1d;
  font: 800 26px/1 'Fredoka', sans-serif;
}
body.device-mobile .mobile-calendar-close:focus-visible {
  outline: 3px solid #0284c7;
  outline-offset: 2px;
}
body.device-mobile .mobile-calendar-days {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  overflow-y: auto;
  padding: 2px;
}
body.device-mobile .mobile-calendar-days .week-block {
  display: grid;
  grid-template-columns: auto 18px minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  gap: 5px;
  width: auto;
  min-width: 0;
  min-height: 44px;
  height: auto;
  padding: 5px 7px;
  border-radius: 7px;
}
body.device-mobile .mobile-calendar-days .week-block-day { font-size: 10px; }
body.device-mobile .mobile-calendar-days .week-block-ico svg { width: 16px; height: 16px; }
body.device-mobile .mobile-calendar-days .mobile-calendar-event-name {
  display: block;
  overflow: hidden;
  color: #f8fafc;
  font: 700 10px/1.15 'Fredoka', sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.device-mobile .mobile-calendar-days .day-block-tooltip { display: none !important; }
body.device-mobile .mobile-calendar-days .week-block:focus-visible {
  outline: 3px solid #facc15;
  outline-offset: 1px;
}

/* Ajustes mobile: trilha de dias, placar e menu superior mais compactos. */
@media (orientation: landscape) {
  body.device-mobile .hud-col-days.hud-island-left {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: auto !important;
    max-height: calc(100dvh - 60px) !important;
    align-self: start !important;
    padding: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.device-mobile #btnOpenMobileCalendar:not([hidden]) {
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }
  body.device-mobile #btnOpenMobileCalendar svg {
    width: 14px !important;
    height: 14px !important;
  }
  body.device-mobile #btnOpenMobileCalendar span { display: none !important; }
  body.device-mobile .hud-col-days .hud-week-blocks {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
  }
  body.device-mobile .hud-col-days .week-block {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: 6px !important;
  }
  body.device-mobile .hud-col-days .week-block-day,
  body.device-mobile .hud-col-days .mobile-calendar-event-name,
  body.device-mobile .hud-col-days .week-block-event-badge { display: none !important; }
  body.device-mobile .hud-col-days .week-block-ico svg {
    width: 16px !important;
    height: 16px !important;
  }

  body.device-mobile .hud-col-battle.hud-island-center {
    justify-self: center !important;
    width: min(176px, 100%) !important;
    min-width: 0 !important;
    max-width: 176px !important;
    height: 32px !important;
    padding: 1px 5px !important;
    border-radius: 8px !important;
    border-bottom-width: 2px !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-hdr-row {
    justify-content: center !important;
    gap: 5px !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-team {
    flex: 0 1 auto !important;
    gap: 2px !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-name {
    max-width: clamp(24px, 5vw, 42px) !important;
    font-size: 8px !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-score {
    min-width: 14px !important;
    font-size: 11px !important;
  }
  body.device-mobile .topbar #marketBattleHub .battle-vs-mark {
    flex-basis: 14px !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 7px !important;
  }

  body.device-mobile .mobile-hud-menu {
    flex-direction: column !important;
    align-items: stretch !important;
    width: min(154px, calc(100vw - 16px)) !important;
    gap: 4px !important;
    padding: 6px !important;
  }
  body.device-mobile.mobile-hud-menu-open .mobile-hud-menu { display: flex !important; }
  body.device-mobile .mobile-hud-menu .hud-icon-btn {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    text-align: left !important;
  }
  body.device-mobile .mobile-hud-menu .hud-icon-btn svg {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
  }
  body.device-mobile .mobile-hud-menu .mobile-menu-label {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  body.device-mobile .ps1-zone-tag[data-zone-role="cook"],
  body.device-mobile .ps1-zone-tag[data-zone-role="build"] {
    gap: 2px !important;
    padding: 1px 4px !important;
    border-width: 1px !important;
    border-bottom-width: 2px !important;
    border-radius: 7px !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  body.device-mobile .ps1-zone-tag[data-zone-role="cook"]:not(.zone-active),
  body.device-mobile .ps1-zone-tag[data-zone-role="build"]:not(.zone-active) {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.56), rgba(15, 23, 42, 0.66)) !important;
    border-color: rgba(148, 163, 184, 0.58) !important;
  }
  body.device-mobile .ps1-zone-tag[data-zone-role="cook"] .ps1-zone-label,
  body.device-mobile .ps1-zone-tag[data-zone-role="build"] .ps1-zone-label {
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 8px !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 1px rgba(2, 6, 23, 0.9) !important;
  }
}


/* ==========================================================================
   CAMADA DE HARMONIZAÇÃO DE UI (final do arquivo, vence as regras acima)
   Objetivo: legibilidade mínima, alvos de toque, escala tipográfica única e
   estados consistentes — sem alterar a identidade arcade/cartoon do pinguINC.
   Escala tipográfica: 11 (rótulo mínimo) · 12 · 14 · 16 · 20+
   ========================================================================== */
:root {
  --fs-min: 11px;          /* nada visível abaixo disso */
  --fs-label: 12px;        /* rótulos de HUD e placas */
  --fs-value: 14px;        /* números de recursos */
  --radius-xs: 6px;
  --radius-pill: 999px;
  --touch-min: 44px;
  --focus-ring: #fde047;
}

/* Fontes: se a Google Fonts falhar, cair em sans-serif (nunca em "cursive") */
body, button, input, select, textarea {
  font-family: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Escala do HUD maior em telas grandes (antes: 10px no FHD). */
@media (min-width: 1101px) and (min-height: 501px) {
  :root { --game-ui-unit: clamp(12px, 0.78vw, 16px); }
}

/* --- Trilha de dias --------------------------------------------------- */
.week-block-day {
  font-size: max(var(--fs-min), calc(var(--game-ui-unit) * 0.9)) !important;
  letter-spacing: 0.01em;
}

/* --- Recursos e placar do HUD ----------------------------------------- */
#ps1HudResources .res-num {
  font-size: max(var(--fs-value), calc(var(--game-ui-unit) * 1.1)) !important;
  font-variant-numeric: tabular-nums;
}
.battle-vs-mark { font-size: max(var(--fs-min), 11px) !important; }
.battle-name { font-size: max(var(--fs-min), calc(var(--game-ui-unit) * 0.95)) !important; }

/* --- Placas das estações (rótulo 3D projetado) ------------------------ */
.ps1-zone-tag { opacity: 1 !important; }
.ps1-zone-label {
  font-size: max(var(--fs-label), calc(var(--game-ui-unit) * 1.05)) !important;
  letter-spacing: 0.02em !important;
}
.ps1-zone-side-count {
  font-size: max(var(--fs-min), calc(var(--game-ui-unit) * 0.9)) !important;
  min-width: 20px !important;
  height: 20px !important;
}
.ps1-tag-action-btn.btn-recipes,
.ps1-tag-action-btn.btn-upgrades,
.ps1-tag-action-btn.btn-hire {
  font-size: max(var(--fs-min), calc(var(--game-ui-unit) * 0.9)) !important;
  min-height: 28px !important;
  padding: 2px 10px !important;
  opacity: 1 !important;
  position: relative;
}
/* Área de clique ampliada sem mudar o visual da pílula */
.ps1-tag-action-btn.btn-recipes::before,
.ps1-tag-action-btn.btn-upgrades::before,
.ps1-tag-action-btn.btn-hire::before,
.stock-help-btn::before {
  content: '';
  position: absolute;
  inset: -8px -6px;
}
.stock-help-btn,
.ps1-zone-main-row { position: relative; }
.ps1-zone-main-row::before { content: ''; position: absolute; inset: -6px -4px; }

/* --- Cartões de receita / etiquetas pequenas nos modais --------------- */
.recipe-card-badge,
.recipe-card-ingredients b,
.recipe-ing-label,
.recipe-availability-icon { font-size: max(var(--fs-min), 11px) !important; }

/* --- Foco visível, igual em todo o jogo -------------------------------- */
:where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 3px !important;
}

/* --- Toque: alvos mínimos de 44px ------------------------------------- */
@media (pointer: coarse) {
  .stock-help-btn { min-width: 40px; min-height: 40px; }
  .ps1-tag-action-btn.btn-recipes,
  .ps1-tag-action-btn.btn-upgrades,
  .ps1-tag-action-btn.btn-hire { min-height: 32px !important; }
  .ps1-tag-action-btn.btn-recipes::before,
  .ps1-tag-action-btn.btn-upgrades::before,
  .ps1-tag-action-btn.btn-hire::before { inset: -10px -8px; }
}

/* --- Celular em paisagem: HUD legível dentro de 390px de altura ------- */
@media (orientation: landscape) and (max-height: 520px) {
  body:is(.device-mobile, .device-desktop) { --game-ui-unit: clamp(10px, 2.7vh, 11px); }
  body:is(.device-mobile, .device-desktop) .week-block-day { font-size: var(--fs-min) !important; }
  body:is(.device-mobile, .device-desktop) .topbar #marketBattleHub .battle-name,
  body:is(.device-mobile, .device-desktop) .topbar #marketBattleHub .battle-score { font-size: var(--fs-min) !important; }
  body:is(.device-mobile, .device-desktop) .hud-col-days .week-block-day,
  body:is(.device-mobile, .device-desktop) .hud-col-days.hud-island-left .week-block-day { font-size: var(--fs-min) !important; }
  body:is(.device-mobile, .device-desktop) .game-day-intro-desc { font-size: var(--fs-min) !important; }
  body:is(.device-mobile, .device-desktop) .ps1-plaza-tag .ps1-zone-label,
  body:is(.device-mobile, .device-desktop) .ps1-zone-tag .ps1-zone-label { font-size: var(--fs-min) !important; }
  body:is(.device-mobile, .device-desktop) #ps1HudResources .res-num { font-size: var(--fs-label) !important; }
  body:is(.device-mobile, .device-desktop) .ps1-zone-label,
  body:is(.device-mobile, .device-desktop) .ps1-zone-tag[data-zone-role="cook"] .ps1-zone-label,
  body:is(.device-mobile, .device-desktop) .ps1-zone-tag[data-zone-role="build"] .ps1-zone-label {
    font-size: var(--fs-min) !important;
    color: #f1f5f9 !important;
  }
  body:is(.device-mobile, .device-desktop) .ps1-zone-side-count { font-size: var(--fs-min) !important; }
  body.device-mobile .topbar #marketBattleHub .battle-name { max-width: 78px !important; }
  body.device-mobile .hud-col-battle.hud-island-center {
    width: min(236px, 100%) !important;
    max-width: 236px !important;
    height: 34px !important;
  }
  body:is(.device-mobile, .device-desktop) .battle-vs-mark,
  body:is(.device-mobile, .device-desktop) .topbar #marketBattleHub .battle-vs-mark { font-size: var(--fs-min) !important; }
  body:is(.device-mobile, .device-desktop) .game-day-intro-title { font-size: var(--fs-label) !important; }
  body:is(.device-mobile, .device-desktop) .mobile-menu-toggle span,
  body:is(.device-mobile, .device-desktop) .mobile-menu-toggle .mobile-menu-label { font-size: var(--fs-min) !important; }
  body:is(.device-mobile, .device-desktop) .mobile-calendar-trigger {
    min-width: 36px; min-height: 36px; position: relative;
  }
  body:is(.device-mobile, .device-desktop) .mobile-calendar-trigger::before,
  body:is(.device-mobile, .device-desktop) .mobile-menu-toggle::before {
    content: ''; position: absolute; inset: -6px;
  }

  body:is(.device-mobile, .device-desktop) .ps1-tag-action-btn.btn-recipes,
  body:is(.device-mobile, .device-desktop) .ps1-tag-action-btn.btn-upgrades,
  body:is(.device-mobile, .device-desktop) .ps1-tag-action-btn.btn-hire { font-size: var(--fs-min) !important; }
}

/* --- Botões arcade: contraste AA e sem translucidez -------------------- */
.game-arcade-btn { opacity: 1 !important; }
.game-arcade-btn.blue {
  background: linear-gradient(180deg, #0ea5e9, #0369a1) !important;
  color: #ffffff !important;
}
.game-arcade-btn.red {
  background: linear-gradient(180deg, #ef4444, #b91c1c) !important;
  color: #ffffff !important;
}
.game-arcade-btn.green {
  background: linear-gradient(180deg, #16a34a, #166534) !important;
  color: #ffffff !important;
}
.game-arcade-btn.gold {
  background: linear-gradient(180deg, #fcd34d, #f59e0b) !important;
  color: #1c1202 !important;
}
.game-arcade-btn.cyan {
  background: linear-gradient(180deg, #67e8f9, #06b6d4) !important;
  color: #04202b !important;
}
/* Texto escuro sobre fundo claro: relevo claro em vez de sombra escura */
.game-arcade-btn.gold,
.game-arcade-btn.cyan { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important; }
.game-arcade-btn.blue,
.game-arcade-btn.red,
.game-arcade-btn.green { text-shadow: 0 1.5px 0 rgba(2, 6, 23, 0.55) !important; }

/* --- Menu inicial: ação principal domina, tutorial é secundário -------- */
@media (min-width: 701px) and (min-height: 561px) {
  #startModal .modal-bottom-actions { align-items: center; gap: 12px; }
  #startModal .modal-bottom-actions .big-start {
    font-size: 18px !important;
    padding: 12px 28px !important;
    min-height: 48px;
  }
  #startModal #btnStartTutorial { font-size: 13px !important; }
}

/* --- Modais em celular paisagem: nenhum texto abaixo de 11px ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .cartoon-modal .ps1-modal-pill,
  .cartoon-modal .ps1-modal-pill b,
  .cartoon-modal .ps1-modal-pill small,
  .cartoon-modal .tech-card-desc,
  .cartoon-modal .tech-card-desc *,
  .cartoon-modal .cost-gap,
  .cartoon-modal .cost-tick,
  .cartoon-modal .tech-card small,
  .cartoon-modal .recipe-card small,
  .cartoon-modal .field-label,
  .cartoon-modal .mode-card-badge,
  .cartoon-modal .diff-card-tier,
  .cartoon-modal .diff-card-name,
  .cartoon-modal .tut-badge-chip,
  .cartoon-modal .tut-flow-sub { font-size: var(--fs-min) !important; }
  .cartoon-modal .tech-card-title,
  .cartoon-modal .mode-card-title { font-size: var(--fs-label) !important; }
  .cartoon-modal .tut-nav-btn { font-size: var(--fs-label) !important; }
  .cartoon-modal .tech-card-desc { line-height: 1.3 !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  #startModal .field-label,
  #startModal .mode-card-title,
  #startModal .diff-card-name { font-size: var(--fs-min) !important; }
  #startModal .mode-card-badge,
  #startModal .diff-card-tier { font-size: 10px !important; padding: 1px 6px !important; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cartoon-modal .tech-card-pts,
  .cartoon-modal .tech-cost-chip,
  .cartoon-modal .tech-cost-chip span,
  .cartoon-modal .tech-cost-chip b,
  .cartoon-modal .tech-cost-chip .cost-miss,
  .cartoon-modal .tech-cost-chip.cost-miss span,
  .cartoon-modal .tech-queue-btn span,
  .cartoon-modal .recipe-stock-button span { font-size: var(--fs-min) !important; }
}

/* --- Movimento reduzido ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   DOCUMENTOS (manual, tutorial, cardápio, oficina, bilhete): leitura e consistência
   ========================================================================== */

/* Fredoka não tem itálico: o navegador "inclina" o desenho e borra. Subtítulos usam peso e cor. */
.pamphlet-sub,
.tech-shelf-empty-txt,
.ps1-clean-modal-card em,
.rules-scrollable em { font-style: normal !important; }
.pamphlet-sub { letter-spacing: 0.01em; opacity: 0.92; }

/* Quebra de linha equilibrada em títulos e no bilhete (evita "6…" sozinho na última linha) */
.cartoon-modal :is(h1, h2, h3, .ps1-clean-modal-title, .pamphlet-sub, .game-confirm-title),
#dayOnePamphletModal :is(p, div, span) { text-wrap: balance; }

/* Manual: lista de verdade (antes aparecia "*" literal) e medida de leitura confortável */
.md-rules-body .md-list {
  list-style: none;
  margin: 6px 0 14px;
  padding: 0;
}
.md-rules-body .md-list li {
  position: relative;
  margin-bottom: 7px;
  padding-left: 22px;
  line-height: 1.5;
}
.md-rules-body .md-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #38bdf8;
  border: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.md-rules-body :is(.md-p, .md-list li) { max-width: 78ch; }
.md-rules-body .md-h2 { margin-top: 20px; }

#rulesModal { z-index: 110; }

/* Tutorial: botões sempre nos mesmos lugares (Anterior · Próximo · Jogar) */
.tutorial-bottom-nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.tutorial-bottom-nav #btnTutPrev { grid-column: 1; justify-self: start; }
.tutorial-bottom-nav #btnTutNext { grid-column: 2; justify-self: center; }
.tutorial-bottom-nav #btnTutPlayNow { grid-column: 3; justify-self: end; }

/* Avisos do jogo não cobrem o título de um documento aberto: descem para a base da tela */
body:has(.cartoon-modal:not([hidden])) .game-toast-layer {
  top: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

/* Celular em paisagem: documentos aproveitam a altura de 390px */
@media (orientation: landscape) and (max-height: 520px) {
  #rulesModal .modal-card { padding: 8px 14px 10px !important; }
  #rulesModal .ps1-clean-modal-hdr { margin: 0 0 4px !important; padding: 0 36px 4px 0 !important; border-bottom-width: 1px !important; }
  #rulesModal .ps1-clean-modal-title { font-size: 13px !important; }
  #rulesModal .md-rules-tabs { gap: 6px !important; margin-bottom: 6px !important; }
  #rulesModal .md-tab-btn { font-size: var(--fs-min) !important; min-height: 30px !important; padding: 3px 8px !important; }
  #rulesModal .modal-card { max-height: 94dvh !important; }
  #rulesModal #rulesContent {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  #rulesModal .md-rules-body {
    max-height: calc(94dvh - 96px) !important;
    overflow-y: auto !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  #rulesModal .md-rules-body > :first-child { margin-top: 0 !important; padding: 6px 10px !important; }
  #rulesModal .md-rules-body :is(.md-p, .md-list li, .md-callout) { font-size: 12px !important; margin-bottom: 4px !important; }
  #rulesModal .md-rules-body .md-h2 { font-size: 14px !important; margin: 10px 0 3px !important; }
  #rulesModal .md-rules-body .md-h3 { font-size: 12.5px !important; margin: 8px 0 2px !important; }
  #rulesModal .md-rules-body table { font-size: 11.5px !important; }
}

/* Oficina em celular largo (paisagem): as três trilhas lado a lado, como no desktop */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 700px) {
  #upgradesModal .upgrade-reroll-row {
    position: absolute;
    top: 2px;
    left: 12px;
    margin: 0 !important;
    z-index: 2;
  }
  #upgradesModal .upgrade-reroll-row { display: flex !important; gap: 6px; width: max-content; }
  #upgradesModal .upgrade-reroll-row > * { white-space: nowrap !important; flex: none !important; }
  #upgradesModal .upgrade-reroll-row > * { min-height: 24px !important; height: 24px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 11px !important; }
  #upgradesModal .upgrade-reroll-row > :not(.upgrade-reroll-button) { width: 26px !important; min-width: 26px !important; padding-left: 0 !important; padding-right: 0 !important; }
  .upgrade-modal-tracks {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-height: calc(100dvh - 176px) !important;
    overflow-y: auto !important;
  }
  .upgrade-modal-tracks .track-column { padding: 6px !important; }
  .upgrade-modal-tracks .track-column-hdr { font-size: 12px !important; padding: 4px 8px !important; }
  .upgrade-modal-tracks .track-upgrades-list { display: grid !important; grid-template-columns: 1fr !important; }
  .upgrade-modal-tracks .tech-card-title { font-size: 12.5px !important; }
  .upgrade-modal-tracks .tech-card-desc { font-size: 11px !important; }
}

/* Piso de 11px também nos modais de desktop */
.mode-card-badge,
.diff-card-tier,
.tut-badge-chip,
.upgrade-modal-tracks .cost-gap,
.upgrade-modal-tracks small,
.ps1-modal-pill small { font-size: max(var(--fs-min), 1em) !important; }

/* --- Tutorial: textos maiores (legendas, descrições, dicas, botões) ---- */
.tutorial-modal-card .tut-step-count { font-size: 14px; }
.tutorial-modal-card .tut-badge-chip { font-size: 13px; }
.tutorial-modal-card .tut-slide-title { font-size: 23px; }
.tutorial-modal-card .tut-slide-desc { font-size: 18px; line-height: 1.5; }
.tutorial-modal-card .tut-flow-ico { font-size: 28px; }
.tutorial-modal-card .tut-flow-label { font-size: 15px; }
.tutorial-modal-card .tut-flow-sub { font-size: 13.5px; line-height: 1.3; }
.tutorial-modal-card .tut-flow-arrow { font-size: 19px; }
.tutorial-modal-card .tut-tip-box { font-size: 16px; line-height: 1.5; }
.tutorial-modal-card .tut-tip-ico { font-size: 20px; }
.tutorial-modal-card .tut-nav-btn { font-size: 15px !important; }
.tutorial-modal-card .tut-fish-catalog-button span { font-size: 15px; }
.tutorial-modal-card .tut-fish-catalog-button small { font-size: 13px; }
.tutorial-fish-catalog-kicker { font-size: 12px; }
.tutorial-fish-catalog-header p { font-size: 14px; }
.tutorial-fish-entry-name { font-size: 14px; }
.tutorial-fish-entry-rarity { font-size: 12px; }
.tutorial-fish-entry-value { font-size: 14px; }
.tutorial-fish-entry-value span { font-size: 13px; }

@media (max-width: 900px) and (orientation: landscape) {
  .tutorial-modal-card .tut-step-count { font-size: 12px !important; }
  .tutorial-modal-card .tut-slide-title { font-size: 16px !important; }
  .tutorial-modal-card .tut-slide-desc { font-size: 14px !important; }
  .tutorial-modal-card .tut-flow-ico { font-size: 19px !important; }
  .tutorial-modal-card .tut-flow-label { font-size: 12.5px !important; }
  .tutorial-modal-card .tut-flow-sub,
  .cartoon-modal .tut-flow-sub { font-size: 12px !important; }
  .tutorial-modal-card .tut-tip-box { font-size: 13.5px !important; }
  .tutorial-modal-card .tut-badge-chip,
  .cartoon-modal .tut-badge-chip { font-size: 12px !important; }
  .tutorial-modal-card .tut-nav-btn,
  .cartoon-modal .tut-nav-btn { font-size: 13px !important; }
  .tutorial-modal-card .tut-fish-catalog-button span { font-size: 12.5px; }
  .tutorial-modal-card .tut-fish-catalog-button small { font-size: 11.5px; }
  .tutorial-fish-catalog-header p { font-size: 12px; }
  .tutorial-fish-entry-name { font-size: 12.5px; }
  .tutorial-fish-entry-rarity { font-size: 11px; }
  .tutorial-fish-entry-value { font-size: 12.5px; }
}

/* ==========================================================================
   RESULTADO (relatório da rodada + fim de partida) — legibilidade no celular
   ========================================================================== */
body.device-mobile #endModal .end-hero-kicker,
body.device-mobile #endModal .end-team-role,
body.device-mobile #endModal .end-score-lbl,
body.device-mobile #endModal .end-rank-tag { font-size: 12px !important; letter-spacing: 0.04em; }
body.device-mobile #endModal .end-section-title { font-size: 12px !important; letter-spacing: 0.05em; }
body.device-mobile #endModal .end-hero-sub { font-size: 14px !important; }
body.device-mobile #endModal .end-stat-row,
body.device-mobile #endModal .end-performance-row { font-size: 14px !important; }
body.device-mobile #endModal .end-breakdown-list li,
body.device-mobile #endModal .end-breakdown-list > * { font-size: 14px !important; }
body.device-mobile #endModal .end-team-name { font-size: 16px !important; }
body.device-mobile #endModal .end-score-num { font-size: 30px !important; }
body.device-mobile #endModal .btn.game-arcade-btn { font-size: 13px !important; min-height: 38px; }
body.device-mobile #reportPanel .rep-stat-lbl { font-size: 12px !important; }
body.device-mobile #reportPanel .rep-stat-sub { font-size: 12px !important; }
body.device-mobile #reportPanel .rep-simple-kicker,
body.device-mobile #reportPanel .rep-round-difference { font-size: 12px !important; }
body.device-mobile #reportPanel .rep-day-flow-qty,
body.device-mobile #reportPanel .rep-day-flow-qty b { font-size: 12.5px !important; }
body.device-mobile #reportPanel .rep-alert-bullet { font-size: 12.5px !important; }
body.device-mobile #reportPanel b,
body.device-mobile #reportPanel p,
body.device-mobile #reportPanel .vs { font-size: max(12px, 1em) !important; }

/* ==========================================================================
   LOGO pinguINC — maior e animação suave (sem filtro animado)
   ========================================================================== */
#startModal #pinguGameLogo {
  filter: none !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
  animation: logoFloatSoft 4.2s ease-in-out infinite !important;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
#startModal .logo-pingu {
  font-size: clamp(54px, 9vw, 74px) !important;
  text-shadow:
    -2px -2px 0 #071526, 2px -2px 0 #071526, -2px 2px 0 #071526, 2px 2px 0 #071526,
    0 4px 0 #0284c7, 0 7px 0 #034f75, 0 12px 14px rgba(0, 0, 0, 0.55) !important;
}
#startModal .logo-inc-badge {
  font-size: clamp(28px, 4.8vw, 38px) !important;
  padding: 3px 14px !important;
  border-radius: 12px !important;
  transform: rotate(-5deg) translateY(-2px);
  animation: logoIncWobble 4.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes logoFloatSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}
@keyframes logoIncWobble {
  0%, 100% { transform: rotate(-5deg) translateY(-2px); }
  50% { transform: rotate(-3deg) translateY(-2px); }
}
@media (max-width: 540px) {
  #startModal .logo-pingu { font-size: 46px !important; }
  #startModal .logo-inc-badge { font-size: 22px !important; padding: 2px 10px !important; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #startModal #pinguGameLogo { gap: 6px !important; margin-bottom: 1px !important; }
  #startModal .logo-pingu { font-size: 32px !important; }
  #startModal .logo-inc-badge { font-size: 16px !important; padding: 1px 7px !important; border-width: 2px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #startModal #pinguGameLogo, #startModal .logo-inc-badge { animation: none !important; }
}

/* Trilhas das melhorias: títulos centralizados */
.track-column-hdr,
.upgrade-modal-tracks .track-column-hdr,
.upgrade-modal-route .track-column-hdr {
  text-align: center !important;
  justify-content: center !important;
}

/* Responsividade: pisos de fonte em telas pequenas + menu aberto limpa avisos */
body.mobile-hud-menu-open #gameToastLayer { display: none !important; }
@media (max-width: 1100px), (max-height: 520px) {
  #startModal .field-label,
  #startModal .mode-card-badge,
  #startModal .diff-card-tier { font-size: 11px !important; }
  .game-day-intro-desc { font-size: 11px !important; }
  .week-block-day { font-size: 11px !important; }
  .battle-name { font-size: 10px !important; }
  .battle-vs-mark { font-size: 9px !important; }
  .res-num { font-size: 11px !important; }
}

/* Carta do estagiário Puffin: ilustração */
.letter-puffin-art { display: flex; justify-content: center; margin: 2px 0 6px; }
.letter-puffin-svg { filter: drop-shadow(0 3px 0 rgba(20, 40, 59, 0.18)); }
@media (orientation: landscape) and (max-height: 520px) {
  .letter-puffin-svg { width: 72px; height: 76px; }
  .letter-puffin-art { margin: 0 0 2px; }
}
.mission-status-box:has(#merchantStatusText:empty) { display: none !important; }

/* Tutorial ~10% mais largo: vence a regra genérica .modal-card.wide-card no celular */
.modal-card.tutorial-modal-card {
  width: min(704px, 95vw) !important;
  max-width: 704px !important;
}
@media (max-width: 900px) and (orientation: landscape) {
  .modal-card.tutorial-modal-card {
    width: min(561px, 92vw) !important;
    max-width: 561px !important;
  }
}

/* Celular em pé: os 3 botões do tutorial dividem a largura e não vazam do cartão */
@media (max-width: 560px) and (orientation: portrait) {
  .tutorial-bottom-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .tutorial-bottom-nav .tut-nav-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 12.5px !important;
    white-space: normal !important;
    justify-self: stretch !important;
  }
  .tutorial-bottom-nav #btnTutPrev,
  .tutorial-bottom-nav #btnTutNext,
  .tutorial-bottom-nav #btnTutPlayNow { grid-column: auto; justify-self: stretch !important; }
}

/* ==========================================================================
   CARDÁPIO DO CHEF (#recipesModal): mesma família da Oficina
   Cabeçalho = .pamphlet-* + .ps1-modal-pill + .game-arcade-btn (como a Oficina).
   Cartões = borda/raio/sombra de .pamphlet-dish-card; título = .tech-card-title;
   descrição = .tech-card-desc; preço = .tech-card-pts; estado = .tech-cost-chip.
   Fontes: apenas Baloo 2 (800/900) e Fredoka (400/600/700), nada abaixo de 11px.
   ========================================================================== */
:is(#recipesModal, #recipeBookHub) .recipe-menu .pamphlet-stock-bar { align-items: center; flex-wrap: wrap; gap: 8px; }
:is(#recipesModal, #recipeBookHub) .recipe-menu .recipe-stock-button { min-height: 32px; }

:is(#recipesModal, #recipeBookHub) .recipe-card-grid {
  --rc-gap: 14px;
  --rc-w: calc((100% - 2 * var(--rc-gap)) / 3);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rc-gap);
  margin-top: 4px;
}
:is(#recipesModal, #recipeBookHub) .recipe-card-grid[data-count="1"] { --rc-w: min(100%, 380px); }
:is(#recipesModal, #recipeBookHub) .recipe-card-grid[data-count="2"],
:is(#recipesModal, #recipeBookHub) .recipe-card-grid[data-count="4"] { --rc-w: calc((100% - var(--rc-gap)) / 2); }
@media (min-width: 701px) and (max-width: 899px) {
  :is(#recipesModal, #recipeBookHub) .recipe-card-grid[data-count]:not([data-count="1"]) { --rc-w: calc((100% - var(--rc-gap)) / 2); }
}
@media (max-width: 700px) {
  :is(#recipesModal, #recipeBookHub) .recipe-card-grid { --rc-gap: 10px; }
  :is(#recipesModal, #recipeBookHub) .recipe-card-grid[data-count] { --rc-w: 100%; }
}

:is(#recipesModal, #recipeBookHub) .recipe-dish-card {
  --rc-accent: #0369a1;
  flex: 0 0 var(--rc-w);
  width: var(--rc-w);
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px 14px;
  border: 2px solid #dbe4ed;
  border-left: 5px solid #f59e0b;
  border-radius: 15px;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
:is(#recipesModal, #recipeBookHub) .recipe-dish-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1); }
:is(#recipesModal, #recipeBookHub) .recipe-dish-card.is-ready {
  border-color: #86efac;
  border-left-color: #16a34a;
  background: linear-gradient(100deg, #f0fdf4 0%, #ffffff 60%);
}
:is(#recipesModal, #recipeBookHub) .recipe-kind-sushi { --rc-accent: #0f766e; }
:is(#recipesModal, #recipeBookHub) .recipe-kind-soup { --rc-accent: #b45309; }
:is(#recipesModal, #recipeBookHub) .recipe-kind-icecream { --rc-accent: #a21caf; }
:is(#recipesModal, #recipeBookHub) .recipe-kind-can { --rc-accent: #854d0e; }

:is(#recipesModal, #recipeBookHub) .rc-top { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
:is(#recipesModal, #recipeBookHub) .rc-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #dbe4ed;
  border-radius: 10px;
  background: #f8fafc;
}
:is(#recipesModal, #recipeBookHub) .rc-heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
:is(#recipesModal, #recipeBookHub) .rc-badge {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--rc-accent);
}
:is(#recipesModal, #recipeBookHub) .rc-name {
  margin: 0;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: #102b40;
  overflow-wrap: anywhere;
}
:is(#recipesModal, #recipeBookHub) .rc-price {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid #f4c66a;
  border-radius: 999px;
  background: #fffbeb;
  color: #854d0e;
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
:is(#recipesModal, #recipeBookHub) .rc-price b { font: inherit; }
:is(#recipesModal, #recipeBookHub) .rc-desc {
  margin: 0;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #243f54;
}
:is(#recipesModal, #recipeBookHub) .rc-ingredients {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px dashed #cbd5e1;
}
:is(#recipesModal, #recipeBookHub) .rc-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
:is(#recipesModal, #recipeBookHub) .rc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
:is(#recipesModal, #recipeBookHub) .rc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
:is(#recipesModal, #recipeBookHub) .rc-chip svg { flex: 0 0 auto; }
:is(#recipesModal, #recipeBookHub) .rc-plus {
  font-family: 'Baloo 2', 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #64748b;
}
:is(#recipesModal, #recipeBookHub) .rc-ing-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #475569;
}
:is(#recipesModal, #recipeBookHub) .rc-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
}
:is(#recipesModal, #recipeBookHub) .rc-status {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1.5px solid #fca5a5;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
:is(#recipesModal, #recipeBookHub) .rc-status.is-ready { border-color: #86efac; background: #f0fdf4; color: #166534; }
:is(#recipesModal, #recipeBookHub) .rc-status-icon { font-weight: 900; }

:is(#recipesModal, #recipeBookHub) .recipe-empty-state {
  margin: 0;
  padding: 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #243f54;
  text-align: center;
}
:is(#recipesModal, #recipeBookHub) .pamphlet-menu-note {
  margin-top: 14px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: #713f12;
}

/* Pílula de missão simples (Estagiário Puffin): só nome, estado e recompensa */
.mission-pill-inner.mission-simple .mission-progress-track { display: none !important; }
.mission-pill-inner.mission-simple .mission-progress-num:empty { display: none !important; }