/* OPERA RATRÔNICOS — A COHAB NÃO VIU NADA
   Inspirado no layout de navegação de A Sombra da Ausência e nas formas neon de SP 2058.
   CSS totalmente independente, responsivo e sem fontes/remotos externos. */
:root {
  --bg: #080c13; --surface: #111923; --panel: #121b26; --line: #405362;
  --line-soft: #263847; --ink: #e6eef0; --muted: #a0b5c3;
  --acid: #e6f23f; --mint: #80e6bf; --red: #ff5b63; --blue: #75bbec;
  --corners: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 80% -10%, #213a44 0, transparent 40%), linear-gradient(#080d15ee,#080d15f7), url('../img/background.webp') repeat, #090e16; min-height: 100vh; font: 16px/1.65 'Segoe UI', 'Trebuchet MS', Arial, sans-serif; }
button { font: inherit; cursor: pointer; }
a { color: var(--acid); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
[hidden] { display: none !important; }
.grain { pointer-events: none; position: fixed; z-index: -1; inset: 0; opacity: .08; background-image: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 4px); }
.site-header { width: min(1360px, calc(100% - 48px)); margin: 0 auto; min-height: 106px; display: flex; gap: 20px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.identity { display: flex; gap: 18px; align-items: center; color: var(--ink); text-decoration: none; }
.logo { width: 172px; height: auto; object-fit: contain; filter: drop-shadow(0 3px 6px #0009); }
.identity-meta { display: flex; flex-direction: column; line-height: 1.35; padding-left: 15px; border-left: 2px solid var(--acid); letter-spacing: 2.1px; font-size: 10px; }
.identity-meta strong { font-size: 12px; } .identity-meta small { color: var(--muted); }
.header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nav-button { background: #15222d; border: 1px solid #415563; color: #e0e9ed; padding: 9px 14px; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 1px; }
.nav-button:hover { border-color: var(--acid); color: var(--acid); }
.nav-button-outline { background: transparent; border-color: var(--red); color: #ffafb1; }
.hero-banner { isolation: isolate; position: relative; overflow: hidden; width: min(1360px, calc(100% - 48px)); margin: 20px auto 24px; padding: 45px clamp(24px, 4.5vw, 76px) 38px; border: 1px solid #416070; background: linear-gradient(112deg, #081018 16%, #142c32 75%, #243537 100%); clip-path: var(--corners); }
.hero-banner::before { content: ''; position: absolute; inset: -10% -5% 0 auto; width: 38%; transform: skew(-22deg); background: repeating-linear-gradient(90deg, transparent 0 24px, #e6f23f0b 24px 28px, transparent 28px 40px); z-index:-1; }
.hero-banner::after { content: ''; position: absolute; right: 0; bottom: 0; width: 65%; height: 11px; background: linear-gradient(90deg, transparent, var(--acid)); }
.hero-overline, .eyebrow, .chapter-label, .panel-topline, .panel-bottomline { letter-spacing: 2.3px; font-size: 11px; text-transform: uppercase; font-weight: 800; }
.hero-overline { color: var(--mint); display:flex; align-items:center; gap:10px; }
.pulse-dot { width: 8px; height:8px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 12px var(--acid); }
.hero-banner h1 { margin: 17px 0 13px; font: 900 clamp(42px,6.6vw,95px)/.98 Impact, 'Arial Narrow', sans-serif; letter-spacing: .7px; max-width: 1020px; text-wrap: balance; text-shadow: 3px 3px 0 #03060b; }
.hero-banner h1 span { color: var(--acid); }
.hero-banner p { margin: 0; max-width: 780px; font-size: 17px; color: #c8d9db; }
.hero-metadata { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.hero-metadata span { border: 1px solid #43616d; padding: 4px 12px; color: #c7e0de; font-size: 11px; font-weight: 750; letter-spacing: 1px; }
.game-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 22px; align-items: start; width: min(1360px, calc(100% - 48px)); margin: 0 auto 40px; }
.sidebar { position: sticky; top: 20px; display: flex; flex-direction:column; gap: 18px; }
.character-card, .field-panel, .reading-panel { background: linear-gradient(165deg, #182531, #101721 75%); border: 1px solid #365164; box-shadow: 0 12px 40px #02040870; }
.character-card { padding: 15px; overflow: hidden; }
.character-art { background: #f0f0eb; height: 268px; overflow: hidden; position: relative; border: 1px solid #63727a; }
.character-art:after { content: 'BACKUP // CASCA-GROSSA'; position: absolute; left: 0; bottom: 0; width: 100%; padding: 8px 12px; text-align: left; font-size: 10px; letter-spacing: 1.6px; font-weight: 850; color: #131d22; background: #e6f23fe0; }
.character-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 5%; }
.character-summary { padding: 14px 4px 7px; }
.eyebrow { color: var(--mint); margin: 0 0 8px; }
.character-summary h2 { font: 900 32px/1 Impact, 'Arial Narrow', sans-serif; letter-spacing: 1px; margin: 3px 0 8px; }
.character-summary h2 small { display: block; font-size: .63em; color: var(--acid); margin-top: 5px; }
.character-summary p:not(.eyebrow) { color: var(--muted); font-size: 12px; margin: 3px 0 7px; }
.character-stats { border-top: 1px solid var(--line-soft); margin-top: 8px; padding-top: 15px; }
.character-stats > div:first-child { display:flex; align-items:center; justify-content: space-between; flex-wrap:wrap; gap:6px; }
.character-stats span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1.1px; }
.character-stats strong { font-family: 'Courier New', monospace; color: var(--acid); font-size: 22px; }
.meter { width: 100%; flex: 0 0 100%; height: 8px; background: #23343b; margin-top: 5px; }
.meter-fill { width:100%; height: 100%; background: linear-gradient(90deg, #80e6bf, #e6f23f); transition: width .25s; }
.stats-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 17px 0; }
.stats-grid>div { display:flex; flex-direction:column; background: #0b151b; border:1px solid var(--line-soft); padding:8px 10px; }
.stats-grid b { font: 700 18px/1.3 'Courier New', monospace; }
.status-line { color: #a7c9c3; font-size: 11px; margin: 10px 0; }
.field-panel { padding: 20px; }
.field-stats { margin: 0; }
.field-stats > div { display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid #263948; padding: 8px 0; font-size: 12px; }
.field-stats > div:last-child { border-bottom:0; }
.field-stats dt { color:var(--muted); } .field-stats dd { margin:0; color:var(--acid); font-weight:800; text-align:right; }
.reading-panel { min-height: 690px; padding: clamp(22px,3.8vw,52px); position: relative; border-top: 5px solid var(--acid); }
.panel-topline, .panel-bottomline { color: #85b1b0; display:flex; align-items:center; justify-content: space-between; gap:10px; }
.panel-topline { border-bottom:1px solid #385061; padding-bottom:14px; margin-bottom: 27px; }
.panel-bottomline { border-top: 1px solid #385061; margin-top: 28px; padding-top:14px; font-size: 10px; }
.chapter-label { color: var(--acid); margin:0 0 7px; }
#scene h2 { font: 900 clamp(32px, 3.5vw, 52px)/1.07 Impact, 'Arial Narrow', sans-serif; letter-spacing: .4px; margin: 0 0 21px; text-wrap: balance; }
#scene p { font-size: clamp(15px,1.3vw,18px); line-height:1.82; color: #d8e5e6; margin: 0 0 20px; }
#scene blockquote { margin: 22px 0; border-left:4px solid var(--acid); background:#182631; padding:12px 19px; color:#f4f6df; font-size:19px; font-style:italic; }
#scene .scene-alert { display:block; color: #ffbd9f; padding: 11px 14px; background: #3d1d20; border-left:3px solid var(--red); margin:10px 0 18px; font-size:14px; }
#scene .scene-good { display:block; color:#b9f9ce; padding: 11px 14px; background: #17342a; border-left:3px solid var(--mint); margin:10px 0 18px; font-size:14px; }
.choice-list { display:grid; gap:10px; margin-top:28px; }
/* Aviso exibido quando a investigação local já consumiu sua única tentativa. */
.test-exhausted {
  margin: 0 0 5px;
  padding: 13px 16px;
  background: #29251f;
  border-left: 3px solid #f5ae65;
  color: #ffe2b6;
  font-size: 13px;
  line-height: 1.55;
}

.action-button, .choice-button { position: relative; display:flex; gap:10px; align-items:center; justify-content:space-between; width:100%; padding:16px 19px; border:1px solid #66866c; background:linear-gradient(95deg,#192a29,#15201d); color: #f8fae7; font-size:15px; font-weight:750; text-align:left; letter-spacing:.2px; transition: .15s transform,.15s background,.15s border-color; clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); }
.action-button:hover, .choice-button:hover { transform: translateX(3px); border-color:var(--acid); background:#2b3f2c; color:#fff; }
.choice-button:after { content:'↗'; color:var(--acid); font-size:20px; flex-shrink:0; }
.choice-button:disabled { opacity:.45; cursor:not-allowed; }
.action-button.full { padding:11px 14px; font-size:11px; letter-spacing:1px; background:#25371e; border-color: var(--acid); }
.action-button.full:hover { transform: none; }
.choice-hint { display: block; margin-top:2px; color:var(--muted); font-size: 12px; font-weight:400; line-height:1.4; }
.roll-result { border-left:3px solid var(--blue); margin: 20px 0 10px; background: #132d37; padding:15px 20px; color:#d9f2ff; font-size:14px; }
.roll-result b { display:block; color:#fff; font:900 18px/1.4 'Courier New',monospace; }
.roll-result.success { border-color:var(--mint); background:#19332c; }
.roll-result.fail { border-color:var(--red); background:#3a2026; }
.combat-area { background:#0d1822; border:1px solid #536875; padding:18px; margin:22px 0; }
.combat-top { display:flex; gap:14px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.combat-top h3 { margin:0; font:900 25px/1.2 Impact, 'Arial Narrow', sans-serif; }
.combat-top small { color:var(--muted); }
.combat-bars { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.combat-bars>div { font-size:12px; letter-spacing:.4px; }
.combat-bars strong { float:right; font-family:monospace; color:#f4fff5; }
.bar { height: 9px; background:#36404b; margin-top:6px; }
.bar>div { height:100%; background:var(--mint); transition: width .15s; }
.bar.enemy>div { background: var(--red); }
.combat-info { font-size:13px; color:#c0d5de; border-top:1px solid #2d4251; padding-top:12px; }
.combat-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:17px 0; }
.combat-select { background:#182530; border:1px solid #4e6978; color:#fff; min-height:43px; font-size:13px; padding:7px 10px; }
.combat-controls label { display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--muted); }
.combat-controls button { grid-column:span 2; }
.combat-log { max-height:260px; overflow:auto; background:#060f16; border:1px solid #263d4d; padding:12px; font-size:12px; line-height:1.6; }
.combat-log p { margin:0 0 8px; border-bottom:1px solid #1b303b; padding-bottom:8px; }
.combat-warning { color:#ffd29c; font-size:12px; }
.floating-sheet { position:fixed; right:21px; bottom:19px; z-index:25; background:var(--acid); color:#11151c; border:3px solid #090b10; border-radius:30px; padding:11px 16px; font:900 12px 'Segoe UI',sans-serif; box-shadow:0 7px 25px #010405cc; letter-spacing:1.3px; }
.floating-sheet span { font-size:18px; margin-left:5px; }
.floating-sheet:hover { background:#fff; }
.site-footer { max-width:1360px; margin: 24px auto 55px; border-top:1px solid var(--line-soft); padding:20px 22px; font-size:12px; line-height:1.7; color:var(--muted); }
.site-footer p { margin:5px 0; }
.overlay { position:fixed; inset:0; z-index:90; overflow-y:auto; background:#010407ed; display:flex; align-items:flex-start; justify-content:center; padding: 5vh 20px; }
.modal { width:min(100%,1000px); background:#111b27; color:#e4f0f1; border:2px solid var(--acid); box-shadow:0 20px 80px #000b; }
.modal-head { background:#263a2e; border-bottom:1px solid #748158; display:flex; justify-content:space-between; align-items:center; padding:13px 20px; gap:20px; }
.modal-head h2 { margin:0; font:900 27px Impact,'Arial Narrow',sans-serif; }
.close-button { background:none; border:1px solid #99af91; color:#fff; padding:5px 14px; font-size:20px; }
.modal-body { max-height:80vh; overflow:auto; padding:20px; }
.modal-body p { line-height:1.7; }
.modal-body h3 { font-size:20px; margin:18px 0 8px; color:var(--acid); }
.sheet-image { width:100%; display:block; height:auto; margin: 20px auto; background:white; }
.stat-table { width:100%; border-collapse: collapse; font-size:13px; margin:14px 0; }
.stat-table th { text-align:left; background:#253c36; color:var(--acid); }
.stat-table td,.stat-table th { padding:8px; border:1px solid #3c5159; vertical-align:top; }
.stat-table tr:nth-child(even) { background:#1a2830; }
.pill { display:inline-block; border:1px solid var(--mint); color:var(--mint); margin:0 6px 6px 0; padding:3px 9px; font-size:11px; font-weight:700; }
.modal-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 15px; }
.modal-tabs button { border:1px solid #4f6f71; background:#20313e; color:white; padding:8px 12px; font-size:12px; }
.modal-tabs button[aria-selected="true"] { background:var(--acid); color:#161b21; border-color:var(--acid); }
.note-entry { border-bottom:1px solid #33434b; padding:10px 0; color:#d3e0e8; }
.no-script { max-width: 960px; margin:20px auto; color:var(--red); padding:12px; border:1px solid currentColor; }
@media (max-width:990px) { .game-layout { grid-template-columns:280px minmax(0,1fr); } .site-header { align-items:flex-start; padding:12px 0; } .identity-meta { display:none; } .hero-banner h1 { max-width:800px; } }
@media (max-width:760px) { .site-header { width:calc(100% - 28px); gap:6px; flex-direction:column; align-items:stretch; } .identity { justify-content:center; }.header-actions { justify-content:center; }.nav-button { flex:1 1 20%; padding:7px 8px; font-size:10px; } .hero-banner { width:calc(100% - 28px); padding:30px 23px; } .hero-banner h1 { font-size:clamp(36px,10vw,64px); } .hero-banner p { font-size:14px; } .game-layout { width:calc(100% - 28px); display:flex; flex-direction:column; } .sidebar { position:static; width:100%; flex-direction:row; align-items:stretch; } .character-card { flex:1 1 60%; } .field-panel { flex:1 1 40%; } .character-art { height:195px; } .reading-panel { width:100%; min-height:580px; padding:25px 22px; } .panel-topline,.panel-bottomline { font-size:9px; letter-spacing:.8px; } }
@media (max-width:520px) { .sidebar { flex-direction:column; } .character-card { display:grid; grid-template-columns:115px 1fr; gap:12px; } .character-art { height:185px; grid-row:span 2; } .character-summary { padding:0; } .character-summary h2 { font-size:23px; } .character-stats { grid-column:span 2; padding-top:8px; } .character-card>.action-button { grid-column:span 2; } .stats-grid { grid-template-columns:repeat(4,1fr); gap:5px; } .stats-grid>div { padding:5px; } .stats-grid span { font-size:8px; letter-spacing:0; } .stats-grid b { font-size:14px; } .combat-controls { grid-template-columns:1fr; } .combat-controls button { grid-column:span 1; } .modal-body { padding:12px; } .floating-sheet { right:12px; bottom:12px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { transition:none !important; scroll-behavior:auto !important; } }
/* Ajuste de colocação explícita no cartão compacto para não sobrar linha vazia. */
@media (max-width:520px) {
  .character-art { grid-column:1; grid-row:1; }
  .character-summary { grid-column:2; grid-row:1; }
  .character-stats { grid-column:1 / -1; grid-row:2; }
  .character-card>.action-button { grid-column:1 / -1; grid-row:3; }
}