@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Roboto+Slab:wght@400;600;700;800&family=Source+Sans+3:wght@400;600;700;800&display=swap');

/* ==========================================================================
   Tokens — tema claro (pergaminho) e escuro (diário de bordo à noite)
   ========================================================================== */
:root{
  --bg1:#f1e5c6;--bg2:#e0cfa3;--glow:#d9e8e6;
  --surface:#fcf6e6;--surface2:#fffbf0;--surface3:#f2e6c8;
  --text:#2b2218;--muted:#6a5c48;--border:#cfba8a;--border-strong:#a98c4e;
  --heading:#12324a;--accent:#b8382c;--accent-shadow:#6f1f18;--accent-text:#fff;
  --navy:#1b4965;--navy-shadow:#081e2e;--navy-text:#fff8e6;
  --gold:#e0ab3d;--sea:#1f7a8c;--sea-text:#17606f;--good:#2f6b4a;--bad:#a3281d;
  --input:#fffdf6;--danger-bg:#fdebe2;--danger-text:#8a2420;--danger-border:#d49a84;
  --ok-bg:#e1f1e5;--ok-fg:#245735;--ok-bd:#9bc9a6;--err-bg:#fdebe4;--err-fg:#8a2822;--err-bd:#e3a797;
  --mestre-bg:#fff2cc;--mestre-bd:#d4a33b;
  --shadow:0 12px 30px rgba(70,45,10,.18);--radius:12px;
  --font-body:'Source Sans 3',system-ui,Arial,sans-serif;
  --font-head:'Roboto Slab',Georgia,serif;
  --font-pirate:'Pirata One',Georgia,serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg1:#0a1620;--bg2:#10283a;--glow:#173a50;
  --surface:#13283a;--surface2:#183248;--surface3:#1e3d56;
  --text:#f2e8d0;--muted:#a9b8c2;--border:#2f4d66;--border-strong:#e0ab3d;
  --heading:#f0cf86;--accent:#c8402f;--accent-shadow:#5c1812;--sea-text:#58b3c4;
  --navy:#24607f;--navy-shadow:#04121c;--navy-text:#fdf2d4;
  --gold:#e8b84d;--sea:#58b3c4;--good:#7ccfa2;--bad:#ff8f7e;
  --input:#0e2131;--danger-bg:#3f1f1c;--danger-text:#ffb4a6;--danger-border:#8a3a30;
  --ok-bg:#16382a;--ok-fg:#a9e4c3;--ok-bd:#2f6b4a;--err-bg:#43201d;--err-fg:#ffb9ac;--err-bd:#8a3a30;
  --mestre-bg:#3a3118;--mestre-bd:#a8841f;
  --shadow:0 12px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font:16px/1.5 var(--font-body);min-height:100vh;
  background:radial-gradient(ellipse at 10% 0,var(--glow) 0,transparent 42%),linear-gradient(160deg,var(--bg1),var(--bg2));background-attachment:fixed}
[hidden],.hidden{display:none!important}
h1,h2,h3{margin:0}
.small{font-size:.85rem;color:var(--muted)}
.no-print{}

/* Botões */
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:800 .88rem var(--font-body);letter-spacing:.02em;
  border:2px solid var(--gold);background:var(--accent);color:var(--accent-text);padding:10px 15px;border-radius:9px;cursor:pointer;text-decoration:none;
  box-shadow:0 3px 0 var(--accent-shadow);transition:transform .15s,filter .15s,box-shadow .15s}
button:hover,.button:hover{filter:brightness(1.1);transform:translateY(-1px)}
button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--accent-shadow)}
button:focus-visible,.button:focus-visible,a:focus-visible,.tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
button.secondary,.button.secondary{background:var(--navy);color:var(--navy-text);box-shadow:0 3px 0 var(--navy-shadow)}
button.danger{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-border);box-shadow:0 3px 0 var(--danger-border)}
button.ghost{background:transparent;color:var(--heading);border-color:var(--border);box-shadow:none}
button.small-btn{padding:6px 10px;font-size:.78rem}
button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5);box-shadow:none;transform:none}
.icon-btn{width:42px;padding:8px 0;background:var(--navy);color:var(--navy-text);box-shadow:0 3px 0 var(--navy-shadow);font-size:1.1rem}

/* Campos */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.progression-tool>label{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800}
input,select,textarea{width:100%;font:1rem var(--font-body);color:var(--text);background:var(--input);border:1px solid var(--border);border-radius:8px;padding:9px 10px;min-width:0}
textarea{min-height:90px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--gold) 55%,transparent);border-color:var(--border-strong)}
input:disabled{opacity:1;cursor:not-allowed}
input[readonly]{background:var(--surface3)}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
.inline-control{display:flex;gap:6px}
.inline-control button{white-space:nowrap}
.combat-notes textarea{min-height:130px}
.story-notes{margin-top:12px}
.checkline{display:flex;align-items:center;gap:8px;font-size:.87rem;font-weight:600;color:var(--muted);margin-top:10px}

/* ==========================================================================
   Estrutura: barra superior, cabeçalho da ficha, cartões de seção
   ========================================================================== */
.topbar{background:linear-gradient(105deg,#09202f,#123c58 60%,#09202f);color:#fff7df;padding:14px 20px 22px;box-shadow:0 5px 20px rgba(6,23,38,.35);position:relative;z-index:30}
.topbar:before{content:'';position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Cpath d='M0 6Q12 0 24 6T48 6V12H0z' fill='%23e0ab3d'/%3E%3C/svg%3E") repeat-x bottom/48px 12px}
.topbar:after{content:'\2620\FE0E';font-family:'Segoe UI Symbol','Noto Sans Symbols 2','DejaVu Sans',sans-serif;position:absolute;right:6%;top:-24px;font-size:120px;line-height:1;color:rgba(255,255,255,.05);pointer-events:none}
.topinner{position:relative;z-index:1;max-width:1100px;margin:auto;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand{font-family:var(--font-pirate);font-size:1.9rem;line-height:1.05;letter-spacing:.04em;color:var(--gold);text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.brand small{display:block;margin-top:4px;font:600 .72rem var(--font-body);color:#e5edf0;letter-spacing:.12em;text-transform:uppercase}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
main{max-width:1100px;margin:20px auto 0;padding:0 16px 120px}
.footer{text-align:center;color:var(--muted);font-size:.82rem;padding:24px 0 0}

.sheet-head{position:relative;text-align:center;padding:12px 0 16px;margin-bottom:12px;border-bottom:4px double var(--accent)}
.sheet-head:before{content:'';position:absolute;right:0;top:-6px;width:92px;height:92px;opacity:.5;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23b99a55' stroke-width='1.4'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3Ccircle cx='50' cy='50' r='34' stroke-dasharray='2 3'/%3E%3Cpath d='M50 4 L58 50 L50 96 L42 50 Z' fill='%23b99a55' fill-opacity='.35'/%3E%3Cpath d='M4 50 L50 42 L96 50 L50 58 Z' fill='%23b99a55' fill-opacity='.22'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--sea-text);font:800 .72rem var(--font-body)}
.sheet-head h1{font:clamp(2rem,5vw,3rem)/1.1 var(--font-pirate);margin:6px 0;color:var(--heading)}
.sheet-head p{margin:0;color:var(--muted);font-weight:600;font-style:italic}

.sheet{display:grid;gap:14px;margin-top:14px}
.section{background:var(--surface);border:1px solid var(--border);border-top:4px solid var(--navy);border-radius:var(--radius);padding:16px;box-shadow:0 4px 14px rgba(60,40,10,.07)}
:root[data-theme="dark"] .section{border-top-color:var(--gold)}
.section h2{font:700 1.08rem var(--font-head);letter-spacing:.055em;text-transform:uppercase;color:var(--heading);margin:0 0 14px;padding-bottom:12px;position:relative}
.section h2:after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:3px;opacity:.55;
  background:repeating-linear-gradient(135deg,var(--border-strong) 0 4px,transparent 4px 8px)}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.rowhead h2{margin:0;padding:0}
.rowhead h2:after{display:none}
.subhead{font:700 .92rem var(--font-head);color:var(--heading);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.05em}
.pill{display:inline-block;border-radius:999px;background:var(--surface3);border:1px solid var(--border);padding:3px 10px;font:800 .74rem var(--font-body);color:var(--heading)}
.pill.over,.pill-warn{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-bd)}

/* Criação guiada */
.wizard{margin-top:6px}
.stepper{list-style:none;margin:0;padding:0;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.stepper li{flex:1 1 auto}
button.step{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);color:var(--muted);border:1px solid var(--border);box-shadow:none;padding:8px 10px;border-radius:999px}
.step-n{display:grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:var(--surface3);color:var(--heading);font-size:.8rem}
button.step.done{color:var(--heading)}
button.step.done .step-n{background:var(--good);color:#fff}
button.step.current{background:var(--navy);color:var(--navy-text);border-color:var(--gold)}
button.step.current .step-n{background:var(--gold);color:#2b1b05}
.step-t{white-space:nowrap}
.step-hint{margin:10px 2px 0;color:var(--muted);font-weight:600}
.wizard-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.wizard-nav button{min-width:140px}

/* Painel fixo do personagem + abas */
.dock{position:sticky;top:0;z-index:15;margin-top:6px;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 14px 14px;padding:10px 12px 0;box-shadow:var(--shadow)}
.dock-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dock-id{display:flex;align-items:center;gap:8px;min-width:0}
.dock-id strong{font:700 1.05rem var(--font-head);color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.dock-tools{display:flex;align-items:center;gap:8px}
.dock-amount{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dock-amount input{width:62px;padding:5px 8px;text-align:center}
.vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.vital{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label btns" "bar btns";gap:4px 10px;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:7px 10px}
.vital-label{grid-area:label;display:flex;justify-content:space-between;gap:8px;font:800 .75rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.vital-label strong{font:800 1rem var(--font-head);color:var(--text);letter-spacing:0}
.bar{grid-area:bar;height:10px;border-radius:99px;background:var(--surface3);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.bar i{display:block;height:100%;width:0;border-radius:inherit;transition:width .4s ease}
.vital-hp .bar i{background:linear-gradient(90deg,#b8382c,#e8743f)}
.vital-pe .bar i{background:linear-gradient(90deg,#1f7a8c,#4fc0cf)}
.vital-int .bar i{background:linear-gradient(90deg,#9a7b2f,#e8c35d)}
.vital-surv .bar i{background:linear-gradient(90deg,#6d4aa3,#a98be0)}
.vital.low .bar i{animation:pulse 1.2s ease-in-out infinite}
.vital-btns{grid-area:btns;display:flex;gap:6px}
.vital-btns button{width:38px;height:38px;padding:0;font-size:1.25rem;line-height:1;border-radius:50%}
.vital-btns button[data-dir="1"]{background:var(--good);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.dock-stats{margin:8px 0 4px;font-size:.88rem;color:var(--muted);font-weight:600}
.dock-stats b{color:var(--heading);font-family:var(--font-head)}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin;margin:6px -4px 0;padding:0 4px}
button.tab{flex:0 0 auto;background:transparent;color:var(--muted);border:0;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;box-shadow:none;padding:9px 13px;transform:none}
button.tab:hover{filter:none;color:var(--heading)}
button.tab.active{color:var(--heading);border-bottom-color:var(--gold);background:var(--surface2)}

/* Atributos */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.attr{display:flex;flex-direction:column;border:1px solid var(--border);border-top:3px solid var(--gold);border-radius:10px;background:var(--surface2);padding:9px;text-align:center;min-width:0}
.attr-top{display:flex;justify-content:space-between;align-items:center}
.attr-short{font:800 .8rem var(--font-body);color:var(--heading);letter-spacing:.08em}
.attr-full{display:block;min-height:2.1em;font:700 .72rem/1.15 var(--font-body);color:var(--muted);margin-top:3px}
.attr-total{font:800 2rem/1.1 var(--font-head);color:var(--heading);margin-top:4px}
.attr .attr-base{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:6px;font:700 .72rem var(--font-body);color:var(--muted);letter-spacing:0}
.attr input{width:3.4em;text-align:center;font:800 .95rem var(--font-body);color:var(--heading);border:1px solid var(--border);border-radius:6px;background:transparent;padding:2px 0}
.attr small{margin-top:4px;font-size:.78rem;color:var(--accent);font-weight:800}
:root[data-theme="dark"] .attr small{color:var(--gold)}
.racial-mod{min-height:1em;font-size:.68rem;color:var(--good);margin-top:3px}
button.roll-btn{padding:2px 8px;font-size:.7rem;background:transparent;color:var(--heading);border:1px solid var(--gold);box-shadow:none;border-radius:999px}
button.roll-btn:hover{background:var(--gold);color:#2b1b05;filter:none}
.metric{border:1px solid var(--border);border-radius:10px;background:var(--surface2);padding:11px;text-align:center}
.metric span{display:block;font:800 .7rem var(--font-body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.metric strong{display:block;font:800 1.6rem var(--font-head);color:var(--accent);margin:3px 0}
:root[data-theme="dark"] .metric strong{color:var(--gold)}
.metric small{display:block;font-size:.74rem;color:var(--muted)}
.derived-grid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}

/* Progressão */
.progression-counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}
.progression-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.progression-tool{display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--surface2)}
.progression-tool button{width:100%;min-height:42px}
.reset-tools{border-color:var(--danger-border);background:var(--danger-bg)}
.reset-tools>label{color:var(--danger-text)}
.mestre-tool{border-color:var(--mestre-bd);background:var(--mestre-bg)}
.mestre-log{margin:0;padding-left:18px;font-size:.84rem;color:var(--muted)}
.mestre-log:empty{display:none}
button.link-btn{display:inline;padding:0;margin-left:4px;background:none;border:0;box-shadow:none;color:var(--accent);font:inherit;text-decoration:underline;min-height:0}
.level-reset{margin-top:10px;max-width:220px}
.xp-summary.warn{color:var(--err-fg);font-weight:700}
#xpRemaining{font-weight:800;color:var(--heading)}
#xpRemaining.over{background:var(--err-bg);color:var(--err-fg)}
.suggested-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:14px 0 10px}
.suggested-actions button{width:100%;white-space:normal;line-height:1.25}

/* Listas, cartões repetidos, traços */
.repeat-list{display:grid;gap:10px}
.repeat-card{border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface2);padding:12px}
.repeat-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;font-weight:800;color:var(--heading)}
.repeat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.repeat-grid .wide{grid-column:1/-1}
.knowledge-card{display:grid;gap:6px}
.k-head{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--heading)}
.k-head strong{flex:1}
.k-bonus{font:800 1.3rem var(--font-head);color:var(--accent)}
:root[data-theme="dark"] .k-bonus{color:var(--gold)}
.trait-list{display:grid;gap:8px}
.trait{background:var(--surface3);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:10px 12px}
.trait strong{display:block;color:var(--heading);margin-bottom:3px;font-family:var(--font-head)}
.trait button{margin-top:8px}
.saved-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.saved-row strong{flex:1 1 180px}
.race-summary{margin:12px 0 8px}

/* Escolha de raça (inline na criação) */
.race-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:12px 0}
button.race-choice{display:block;text-align:left;background:var(--surface2);color:var(--text);border:1px solid var(--border);box-shadow:none;padding:12px;border-radius:10px;font-weight:400}
button.race-choice strong{display:block;color:var(--heading);margin-bottom:4px;font-family:var(--font-head);font-size:.95rem}
button.race-choice span{font-weight:600;font-size:.82rem;display:block;color:var(--muted)}
button.race-choice.selected{outline:3px solid var(--gold);background:var(--surface3)}
button.race-choice.applied:after{content:'✓ aplicada';display:inline-block;margin-top:6px;font-size:.72rem;font-weight:800;color:var(--good)}
.race-options{background:var(--surface3);border:1px solid var(--border);border-radius:10px;padding:12px;margin:12px 0;display:grid;gap:8px}
.race-options>strong{color:var(--heading);font-family:var(--font-head)}
.option-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.88rem;font-weight:700}
.option-row select{width:auto;padding:7px}
.tribe-trait{max-width:520px}
.apply-race{justify-self:start}
#customKnowledgeName,#mestreReason{padding:8px 10px}

/* ==========================================================================
   Modais, toast, dados
   ========================================================================== */
.modal{position:fixed;inset:0;background:rgba(5,18,30,.82);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50;overflow:auto;backdrop-filter:blur(5px)}
.modal-card{background:var(--surface);border:3px solid var(--gold);border-radius:14px;box-shadow:var(--shadow);padding:22px;width:min(640px,100%);max-height:92vh;overflow:auto;display:grid;gap:12px}
#combatStyleDescription{line-height:1.55;font-weight:600}
.level-up-card{position:relative;text-align:center;max-width:520px;background:linear-gradient(160deg,var(--surface),var(--surface3));animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.levelup-kicker{margin:0;font:800 .8rem var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--sea-text)}
.levelup-number{font:5rem/1 var(--font-pirate);color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 24px rgba(224,171,61,.55);animation:glow 1.6s ease-in-out infinite alternate}
.level-rewards{padding-left:24px;display:grid;gap:8px;margin:4px 0 8px;text-align:left;font-weight:700}
.level-rewards li::marker{color:var(--accent)}
.burst{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.burst span{position:absolute;bottom:-10px;font-size:1.5rem;color:var(--gold);opacity:0;animation:rise 1.6s ease-out .1s forwards}
.burst span:nth-child(1){left:8%}.burst span:nth-child(2){left:24%;animation-delay:.25s}.burst span:nth-child(3){left:42%;animation-delay:.05s}
.burst span:nth-child(4){left:60%;animation-delay:.35s}.burst span:nth-child(5){left:76%;animation-delay:.15s}.burst span:nth-child(6){left:90%;animation-delay:.3s}

.status{position:fixed;left:50%;bottom:84px;z-index:60;width:max-content;max-width:min(640px,calc(100vw - 32px));padding:11px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-weight:700;box-shadow:var(--shadow);
  opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .25s,transform .25s;cursor:pointer}
.status.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.status.ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-bd)}
.status.err{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-bd)}

.dice-fab{position:fixed;right:16px;bottom:16px;z-index:40;width:56px;height:56px;padding:0;border-radius:50%;font:800 1rem var(--font-head);background:var(--navy);color:var(--gold);box-shadow:0 4px 0 var(--navy-shadow),var(--shadow)}
.dice-panel{position:fixed;right:16px;bottom:84px;z-index:40;width:min(340px,calc(100vw - 32px));max-height:min(72vh,calc(100dvh - 104px));overflow:auto;background:var(--surface);border:2px solid var(--gold);border-radius:14px;box-shadow:var(--shadow);padding:12px;display:grid;gap:10px}
.dice-head{display:flex;justify-content:space-between;align-items:center;font:700 1rem var(--font-head);color:var(--heading)}
.dice-mode,.dice-quick{display:flex;gap:6px;flex-wrap:wrap}
button.chip{padding:6px 12px;font-size:.8rem;background:var(--surface2);color:var(--heading);border:1px solid var(--border);box-shadow:none;border-radius:999px}
button.chip.active{background:var(--navy);color:var(--navy-text);border-color:var(--gold)}
.dice-result{min-height:96px;display:grid;place-items:center;text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px}
.dice-hint{color:var(--muted);font-size:.88rem}
.dice-roll{display:grid;gap:2px;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.dice-roll.rolling{animation:none}
.dice-roll.rolling .dice-total{animation:tumble .28s linear infinite;color:var(--muted)}
.dice-roll.rolling .dice-detail,.dice-roll.rolling .dice-flag,.dice-roll.rolling:has(.dice-stage) .dice-total{visibility:hidden}
.dice-roll:not(.rolling) .dice-total{animation:land .45s cubic-bezier(.2,1.6,.4,1)}
.dice-roll.crit:not(.rolling) .dice-total{text-shadow:0 0 14px var(--good)}
@keyframes tumble{0%{transform:rotate(-14deg) scale(.9)}25%{transform:rotate(10deg) scale(1.12) translateY(-4px)}50%{transform:rotate(-8deg) scale(.95)}75%{transform:rotate(14deg) scale(1.1) translateY(-3px)}100%{transform:rotate(-14deg) scale(.9)}}
@keyframes land{0%{transform:scale(1.6) rotate(8deg);opacity:.4}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dice-roll .dice-total{animation:none!important}}
.full-rolls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.trait .full-rolls{justify-content:flex-start}
.dice-label{font:800 .78rem var(--font-body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.dice-total{font:800 3rem/1 var(--font-head);color:var(--heading)}
.dice-detail{font-size:.88rem;color:var(--muted)}
.dice-flag{font:800 .8rem var(--font-body);text-transform:uppercase;letter-spacing:.08em}
.dice-roll.crit:not(.rolling) .dice-total,.dice-roll.crit:not(.rolling) .dice-flag{color:var(--good)}
.dice-roll.fumble:not(.rolling) .dice-total,.dice-roll.fumble:not(.rolling) .dice-flag{color:var(--bad)}

/* Dado 3D rolando: o mesmo conjunto de faces gira (die-spin) enquanto quica (die-hop) e pousa na face sorteada */
.dice-stage{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;perspective:700px;min-height:130px;--edge:var(--gold)}
.dice-stage.crit{--edge:var(--good)}
.dice-stage.fumble{--edge:var(--bad)}
.die-hop{position:relative;display:grid;place-items:center;animation:die-hop 1.3s cubic-bezier(.3,.7,.4,1) both;transform-style:preserve-3d}
.die-spin{position:relative;width:0;height:0;transform-style:preserve-3d;animation:die-spin var(--dur,1.2s) cubic-bezier(.12,.6,.2,1) both}
.die-body{position:absolute;left:0;top:0;transform-style:preserve-3d}
.die-face{position:absolute;left:0;top:0;display:grid;place-items:center;backface-visibility:hidden;background:var(--edge);color:#f6ead0;font-family:var(--font-head);font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.6);transition:background .3s}
.die-face{clip-path:var(--poly)}
.die-face::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#1b5a85,#0b2b40);clip-path:var(--inner)}
.die-face span{position:relative}
.die-hop.dropped{opacity:.45;transition:opacity .4s}
@keyframes die-spin{from{transform:rotate3d(var(--ax),var(--ay),var(--az),var(--turns))}to{transform:rotate3d(var(--ax),var(--ay),var(--az),0deg)}}
@keyframes die-hop{0%{transform:translate(var(--from,-80px),-46px) scale(.6)}30%{transform:translate(calc(var(--from,-80px) * .3),10px) scale(1)}48%{transform:translate(0,-30px)}66%{transform:translateY(8px)}80%{transform:translateY(-10px)}92%{transform:translateY(3px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.die-hop,.die-spin{animation:none}}
.dice-formula{display:flex;gap:6px}
.dice-formula button{padding:8px 14px}
.dice-log{margin:0;padding-left:20px;display:grid;gap:3px;font-size:.84rem;color:var(--muted)}
.dice-log:empty{display:none}
.dice-log b{color:var(--heading)}

/* ==========================================================================
   Ícones, bandeira pirata, condições, Morrendo, backup
   ========================================================================== */
.tab-icon{width:16px;height:16px;margin-right:6px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.flag-badge{position:absolute;left:0;top:-2px;width:66px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));transform-origin:top left;animation:wave 4s ease-in-out infinite}
.flag-badge svg,.flag-preview svg,.poster-flag svg,.levelup-flag svg{display:block;width:100%;height:auto}
.flag-pick{display:flex;gap:10px;align-items:center}
.flag-preview{flex:0 0 52px;width:52px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.flag-selects{display:grid;gap:6px;flex:1;min-width:0}
.poster-flag{position:absolute;left:8px;top:8px;width:44px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.poster-frame{position:relative}
.levelup-flag{width:64px;margin:0 auto -4px;animation:flag-rise .9s cubic-bezier(.2,1.2,.4,1) both;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button.chip.active{background:var(--accent);color:var(--accent-text);border-color:var(--gold)}
.cond-active{margin-top:12px}
.turns-edit{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:.84rem;font-weight:700;color:var(--muted)}
.turns-edit input{width:72px;padding:4px 8px}
.will-card{border:1px solid var(--mestre-bd);background:var(--mestre-bg);border-radius:10px;padding:12px}
.will-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.will-head strong{font-family:var(--font-head);color:var(--heading)}
.will-head .small-btn{margin-left:auto}
.will-uses{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.weapon-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.weapon-add select{width:auto;min-width:170px}
.repeat-title{flex-wrap:wrap}
.weapon-rolls{display:flex;gap:6px;margin-left:auto;margin-right:6px}
.weapon-rolls .roll-btn{padding:6px 14px;font-size:.8rem;background:var(--navy);color:var(--navy-text);border:1px solid var(--gold)}
.weapon-rolls .roll-btn:hover{background:var(--accent);color:var(--accent-text)}
.backup-bar{display:flex;flex-wrap:wrap;gap:8px}
.file-btn{cursor:pointer}

.dying{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 4px;padding:8px 10px;border:1px solid var(--err-bd);background:var(--err-bg);color:var(--err-fg);border-radius:10px}
.dying-text strong{font:800 .95rem var(--font-head);text-transform:uppercase;letter-spacing:.05em}
.dying-text span{font-weight:700;font-size:.88rem}
.dying-actions{display:flex;flex-wrap:wrap;gap:6px}
.dying-actions button{padding:6px 10px;font-size:.76rem}
.cond-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 4px}
.cond-badges{display:flex;flex-wrap:wrap;gap:5px}
button.cond-badge{padding:3px 9px;font-size:.72rem;background:var(--accent);color:var(--accent-text);border:1px solid var(--gold);box-shadow:none;border-radius:999px}

/* ==========================================================================
   Menu principal, página inicial e navio
   ========================================================================== */
.topinner{flex-wrap:wrap}
.mainnav{display:flex;gap:4px;align-items:center;flex:1;justify-content:center;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
button.nav-link{background:transparent;color:#e5edf0;border:1px solid transparent;box-shadow:none;border-radius:999px;padding:8px 16px;font-size:.9rem;white-space:nowrap}
button.nav-link:hover{background:rgba(255,255,255,.1);filter:none;transform:none}
button.nav-link.active{background:var(--gold);color:#2b1b05;border-color:#fff3c9}
.ficha-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}

.view-head{position:relative;text-align:center;padding:12px 0 16px;margin-bottom:12px;border-bottom:4px double var(--accent)}
.view-head h1{font:clamp(2rem,5vw,3rem)/1.1 var(--font-pirate);margin:6px 0;color:var(--heading)}
.view-head p{margin:0;color:var(--muted);font-weight:600;font-style:italic}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}
.hub-card{display:flex;flex-direction:column;gap:10px}
.hub-card .repeat-list{flex:1;align-content:start}
.hub-actions{display:flex;flex-wrap:wrap;gap:8px}
.hub-soon{border-top-style:dashed}
.soon-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.soon-list li{display:grid;padding:8px 10px;border:1px dashed var(--border-strong);border-radius:8px;background:var(--surface2);opacity:.85}
.soon-list strong{color:var(--heading);font-family:var(--font-head);font-size:.92rem}
.soon-list span{font-size:.82rem;color:var(--muted)}

/* ---------- Campanha ---------- */
.camp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.camp-bar h2{flex:1;margin:0;font:700 1.3rem var(--font-head);color:var(--heading);min-width:0;overflow-wrap:anywhere}
.list-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.list-search{flex:1 1 180px;min-width:0}
.list-filter{width:auto;flex:0 1 190px}
details.entry{border:1px solid var(--border);border-left:5px solid var(--border-strong);border-radius:10px;background:var(--surface2);overflow:hidden}
details.entry[open]{box-shadow:0 4px 14px rgba(60,40,10,.12)}
details.entry>summary{cursor:pointer;display:grid;gap:2px;padding:10px 14px;list-style:none}
details.entry>summary::-webkit-details-marker{display:none}
details.entry>summary:before{content:'▸';position:absolute;margin-left:-12px;color:var(--muted)}
details.entry[open]>summary:before{content:'▾'}
details.entry>summary{position:relative;padding-left:26px}
details.entry>summary:before{left:12px;top:12px;margin:0}
.entry-title{font:700 1rem var(--font-head);color:var(--heading)}
.entry-sub{min-height:1.2em}
details.entry>.repeat-grid{padding:4px 14px 8px;grid-template-columns:repeat(3,minmax(0,1fr))}
details.entry>.entry-actions,.entry-actions{padding:0 14px 12px;display:flex;justify-content:flex-end}
details.entry.st-atual{border-left-color:var(--gold)}
details.entry.st-visitada,details.entry.st-concluida,details.entry.st-aliado{border-left-color:var(--good)}
details.entry.st-rumor,details.entry.st-planejada,details.entry.st-adiada{border-left-color:var(--sea)}
details.entry.st-falhou,details.entry.st-morto{border-left-color:var(--bad)}
details.entry.st-andamento{border-left-color:var(--gold)}
.route{border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface2);padding:10px 14px;margin-bottom:12px}
.route-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.route-list li{display:flex;align-items:center;font-weight:700;color:var(--heading)}
.route-list li:not(:last-child):after{content:'➜';margin:0 8px;color:var(--gold)}
.route-list li.now{color:var(--accent)}
:root[data-theme="dark"] .route-list li.now{color:var(--gold)}
.route-list small{font-weight:400;color:var(--muted)}
.camp-day{display:flex;align-items:center;gap:10px;margin:12px 0}
.camp-day label{font:800 .74rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.camp-day input{width:90px}
.ship-link{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ship-link select{width:auto;min-width:200px}
.crew-row{display:grid;gap:8px}
.crew-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.crew-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crew-meta .small{flex:1}
.wide-field{margin-top:12px}
.treasury-balance{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);padding:12px 16px;margin-bottom:12px}
.treasury-balance span{font:800 .78rem var(--font-body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.treasury-balance strong{font:800 1.8rem var(--font-head);color:var(--heading)}
.treasury-form{display:grid;grid-template-columns:150px 1fr auto auto;gap:8px;margin-bottom:12px}
strong.neg,.neg{color:var(--bad)}
strong.pos{color:var(--good)}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
button.map-thumb{display:grid;gap:4px;text-align:left;background:var(--surface2);color:var(--text);border:1px solid var(--border);box-shadow:none;padding:8px;border-radius:10px;font-weight:700}
button.map-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
button.map-thumb small{font-weight:400;color:var(--muted)}
.map-card{width:min(980px,100%)}
.map-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.zoom-label{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--muted)}
.zoom-label input{width:140px;padding:0}
.map-scroll{overflow:auto;max-height:58vh;border:2px solid var(--border-strong);border-radius:10px;background:var(--surface3)}
.map-stage{position:relative;line-height:0}
.map-stage img{width:100%;display:block;user-select:none}
.map-stage.pinning{cursor:crosshair;outline:3px solid var(--gold);outline-offset:-3px}
.pin{position:absolute;transform:translate(-50%,-100%);display:grid;justify-items:center;pointer-events:none}
.pin i{width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.pin b{font:700 .72rem/1.2 var(--font-body);background:rgba(20,24,29,.85);color:#fff;border-radius:4px;padding:1px 6px;white-space:nowrap;margin-top:2px}
.pin-list{margin:0;padding-left:20px;display:grid;gap:2px;font-size:.88rem}
.combat-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px}
.round{display:grid;text-align:center;border:2px solid var(--gold);border-radius:10px;padding:6px 18px;background:var(--surface2)}
.round span{font:800 .7rem var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.round strong{font:800 1.8rem var(--font-head);color:var(--heading)}
.combat-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.amount-input{width:70px;padding:6px 8px}
.combat-add{border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface2);margin-bottom:12px}
.combat-add>summary{cursor:pointer;padding:10px 14px;font-weight:800;color:var(--heading)}
.combat-form{display:grid;grid-template-columns:1.4fr 1fr .6fr .6fr .8fr auto;gap:8px;padding:0 14px 14px}
.combat-row{display:grid;gap:8px;border:1px solid var(--border);border-left:6px solid var(--border-strong);border-radius:10px;background:var(--surface2);padding:10px 12px}
.combat-row.kind-jogador{border-left-color:var(--sea)}
.combat-row.kind-aliado{border-left-color:var(--good)}
.combat-row.kind-inimigo{border-left-color:var(--accent)}
.combat-row.turn{outline:3px solid var(--gold);background:var(--surface3)}
.combat-row.down{opacity:.55}
.combat-row.down strong{text-decoration:line-through}
.combat-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.init-input{width:64px;padding:5px 8px;text-align:center;font-weight:800}
.combat-hp{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center}
.combat-hp .bar{height:12px}
.combat-hp .bar i{background:linear-gradient(90deg,#b8382c,#e8743f)}
.kind-jogador .combat-hp .bar i{background:linear-gradient(90deg,#1f7a8c,#4fc0cf)}
.kind-aliado .combat-hp .bar i{background:linear-gradient(90deg,#2f6b4a,#5fc08a)}
.combat-hp button{min-width:38px}
.combat-hp span{font:800 .9rem var(--font-head);min-width:70px;text-align:right}
.combat-actions{display:flex;gap:8px;align-items:center}
.combat-note{flex:1;min-width:0;padding:6px 8px}
.k-rolls{display:flex;flex-wrap:wrap;gap:6px}
.k-attr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.84rem;color:var(--muted)}
.k-attr>span{font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
.k-attr b{color:var(--heading)}
.k-attr select{width:auto;padding:4px 8px}
.k-attr small{flex-basis:100%;font-size:.76rem}
.account-btn{padding:8px 14px;font-size:.84rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-form{display:grid;gap:10px;margin-top:10px}
.auth-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.auth-msg{min-height:1.4em;font-weight:700}
.auth-msg.err{color:var(--err-fg)}
.auth-msg.ok{color:var(--ok-fg)}
.account-who{margin:0;font:700 1rem var(--font-head);color:var(--heading);overflow-wrap:anywhere}

.subtabs{margin:0 0 4px;border-bottom:1px solid var(--border)}
.navio-panels{display:grid;gap:14px;margin-top:14px}
.fleet-row.current{outline:2px solid var(--gold)}
.ship-vital{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 10px}
.ship-hp{flex:1 1 280px}
.wear-box{border:1px solid var(--border);background:var(--surface2);border-radius:10px;padding:12px}
.wear-name{font:700 1.05rem var(--font-head);color:var(--heading)}
.wear-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.wear-list{margin:10px 0 0;padding-left:20px;display:grid;gap:4px;font-size:.84rem;color:var(--muted)}
.wear-list li.on{color:var(--err-fg);font-weight:700}
.sink-bonus{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;width:100%}
.sink-bonus input{width:80px;padding:4px 8px}
.sink-bonus select{width:auto;max-width:100%;padding:4px 8px}
.travel-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0}
.inline-input{display:flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--muted)}
.inline-input input{width:96px;padding:6px 8px}
.inline-input input[type=checkbox],.inline-input input[type=radio]{width:auto;padding:0;flex:0 0 auto}
.checkline.no-margin{margin-top:26px}
.travel-card{margin:10px 0 4px;padding:14px;border:1px solid var(--border);border-left:5px solid var(--sea);background:var(--surface2);border-radius:10px}
.travel-card.calm{border-left-color:var(--good)}
.travel-card.rough{border-left-color:var(--accent);background:var(--err-bg)}
.travel-big{font:800 1.5rem var(--font-head);color:var(--heading)}
.travel-card.rough .travel-big{color:var(--err-fg)}

/* ==========================================================================
   Cartaz de Procurado
   ========================================================================== */
.poster-actions{display:flex;gap:8px;flex-wrap:wrap}
.poster{width:min(420px,100%);margin:6px auto 0;padding:12px;background:#e8d3a0 repeating-linear-gradient(0deg,rgba(120,80,20,.05) 0 2px,transparent 2px 5px);border:2px solid #5b3d1a;border-radius:4px;box-shadow:var(--shadow);color:#3a2812;break-inside:avoid}
.poster-frame{border:4px double #5b3d1a;padding:16px 14px 12px;text-align:center}
.poster-wanted{font:clamp(2.4rem,9vw,3.4rem)/1 var(--font-pirate);letter-spacing:.14em;margin-left:.14em}
.poster-photo{aspect-ratio:4/5;width:76%;margin:12px auto 10px;border:5px solid #3a2812;background:#d6bd82;display:grid;place-items:center;overflow:hidden}
.poster-photo img{width:100%;height:100%;object-fit:cover;filter:sepia(.35) contrast(1.05)}
.poster-initials{font:5rem var(--font-pirate);color:#3a2812;opacity:.55}
.poster-dead{font:700 .95rem var(--font-head);letter-spacing:.32em;text-transform:uppercase}
.poster-name{font:clamp(1.7rem,6vw,2.2rem)/1.1 var(--font-pirate);text-transform:uppercase;margin:6px 0 0;overflow-wrap:anywhere}
.poster-alias{margin:2px 0 6px;font-style:italic;font-weight:600;min-height:1.4em}
.poster-bounty{display:flex;justify-content:center;align-items:baseline;gap:8px;border-top:2px solid #5b3d1a;border-bottom:2px solid #5b3d1a;padding:6px 0;margin:6px 0}
.poster-bounty .berry{font:700 1.5rem var(--font-head)}
.poster-bounty strong{font:800 clamp(1.5rem,6vw,2rem) var(--font-head);overflow-wrap:anywhere}
.poster-bounty strong[data-long]{font-size:1rem;line-height:1.2}
.version{opacity:.6;white-space:nowrap}
.poster-meta{margin:6px 0;font-weight:700}
.poster-stats{list-style:none;margin:8px 0 4px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.poster-stats li{display:grid;border:1px solid #5b3d1a;padding:3px 0;font-size:.7rem;font-weight:800}
.poster-stats li b{font:800 1.1rem var(--font-head)}
.poster-vitals{margin:6px 0 0;font-weight:800;letter-spacing:.04em}
.poster-foot{margin:10px 0 0;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.print-poster-wrap{display:none}

/* ==========================================================================
   Modo da página: criação x ficha pronta
   ========================================================================== */
body[data-mode="create"] .play-only{display:none!important}
body[data-mode="play"] .create-only{display:none!important}

/* ==========================================================================
   Animações
   ========================================================================== */
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes glow{from{text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 12px rgba(224,171,61,.35)}to{text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 30px rgba(224,171,61,.85)}}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(-320px) rotate(40deg);opacity:0}}
@keyframes pulse{50%{opacity:.55}}
@keyframes wave{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes flag-rise{from{transform:translateY(34px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media(max-width:1180px){
  .wizard-nav{padding-right:70px}
}
@media(max-height:640px){
  .dock{position:static}
}
@media(max-width:900px){
  .brand{flex:1}
  #themeBtn{order:2}
  .mainnav{order:3;flex:1 1 100%;justify-content:stretch;flex-wrap:nowrap}
  button.nav-link{flex:1;padding:8px 6px;font-size:.84rem}
}
@media(max-width:960px){
  .step-t{display:none}
  button.step.current .step-t{display:inline}
  .stepper li{flex:0 0 auto}
  .stepper li:has(.current){flex:1 1 auto}
}
@media(max-width:850px){
  details.entry>.repeat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .combat-form{grid-template-columns:1fr 1fr 1fr}
  .treasury-form{grid-template-columns:1fr 1fr}
  .grid,.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .repeat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand{font-size:1.6rem}
}
@media(max-width:620px){
  main{margin-top:12px;padding:0 10px 110px}
  .topbar{padding:12px}
  .brand{font-size:1.45rem;flex:1}
  .brand small{font-size:.62rem;letter-spacing:.08em}
  .topinner{gap:8px}
  #themeBtn{order:2;flex:0 0 40px;padding:7px 0;font-size:1rem}
  .account-btn{order:2;max-width:42vw;padding:7px 10px}
  button.nav-link{padding:8px 4px;font-size:.78rem;line-height:1.15}
  .ficha-toolbar button{flex:1 1 calc(50% - 8px);padding:8px 6px;font-size:.78rem}
  .hub-grid{grid-template-columns:1fr}
  button.tab{flex:0 0 auto}
  details.entry>.repeat-grid,.crew-fields{grid-template-columns:1fr}
  .treasury-form{grid-template-columns:1fr}
  .combat-form{grid-template-columns:1fr 1fr}
  .combat-form>:first-child,.combat-form>button{grid-column:1/-1}
  .combat-controls button{flex:1 1 auto}
  .combat-hp{grid-template-columns:1fr auto auto}
  .combat-hp .bar{grid-column:1/-1}
  .combat-hp span{text-align:left}
  .combat-actions{flex-wrap:wrap}
  .camp-bar h2{flex-basis:100%;order:3}
  .list-filter{flex:1 1 100%}
  .sheet-head h1{font-size:1.9rem}
  .sheet-head:before{width:64px;height:64px}
  .flag-badge{position:static;width:44px;margin:0 auto 6px;animation:none}
  .dying{padding:6px 8px}
  .dying-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .dying-actions button{padding:6px 4px;font-size:.72rem}
  .cond-bar{flex-wrap:nowrap;align-items:flex-start}
  .cond-bar .small-btn{flex:0 0 auto}
  .weapon-add{width:100%}.weapon-add select{flex:1}
  .grid,.grid.two,.grid.three,.progression-tools{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .repeat-grid{grid-template-columns:1fr}
  .inline-control{flex-direction:column}
  .section{padding:12px}
  button.step{padding:8px 6px}
  .wizard-nav button{flex:1;min-width:0}
  .dock-top{flex-wrap:nowrap}
  .dock-id{flex:1;min-width:0}
  .dock-id strong{max-width:30vw}
  .dock-id .pill{white-space:nowrap;flex:0 0 auto}
  .amount-text{font-size:0}
  .amount-text:before{content:'±';font-size:1.15rem;color:var(--heading)}
  .dock-amount input{width:54px}
  .vitals{grid-template-columns:1fr 1fr}
  .vital-int,.vital-surv{grid-column:1/-1}
  .vital{grid-template-columns:1fr auto;grid-template-areas:"label btns" "bar bar";gap:6px 8px;padding:6px 8px}
  .vital-btns button{width:32px;height:32px;font-size:1.1rem}
  .vital-label{flex-direction:column;gap:0}
  .dock{padding:8px 10px 0}
  .dock-top{margin-bottom:6px}
  .dock-stats{margin:6px 0 2px;font-size:.8rem}
  button.tab{padding:8px 11px;font-size:.82rem}
  .poster-stats{grid-template-columns:repeat(3,1fr)}
  .levelup-number{font-size:4rem}
}

/* ==========================================================================
   Impressão: a ficha inteira em ordem, sem controles; cartaz em folha própria
   ========================================================================== */
@media print{
  @page{size:auto;margin:10mm}
  :root,:root[data-theme="dark"]{--bg1:#fff;--bg2:#fff;--glow:#fff;--surface:#fff;--surface2:#fff;--surface3:#f4f0e6;--text:#111;--muted:#444;--border:#aaa;--heading:#111;--input:#fff;--accent:#8a1f17;--gold:#8a6a1f;color-scheme:light}
  body{background:#fff;font-size:10pt}
  .topbar,.no-print,.footer,.dock,.wizard,.wizard-nav,.dice-fab,.dice-panel,.modal,.status,button,.create-only,.sheet-head:before{display:none!important}
  main{max-width:none;margin:0;padding:0}
  .sheet{display:block;margin:0}
  [data-panel]{display:block!important}
  [data-panel="poster"],[data-panel="progress"],[data-panel="conditions"]{display:none!important}
  details.entry{break-inside:avoid}
  details.entry>.repeat-grid{display:grid}
  .flag-badge{animation:none;width:48px}
  [data-panel="progress"],[data-npanel="viagem"] .travel-actions{display:none!important}
  .section{break-inside:avoid;margin:7px 0;padding:9px;box-shadow:none;border-top-width:3px}
  .section h2{font-size:9pt}
  input,textarea,select{border:0;border-bottom:1px solid #999;border-radius:0;background:#fff;padding:3px 1px;font-size:10pt}
  textarea{min-height:34px}
  .grid,.repeat-grid{gap:6px}
  .repeat-card,.attr,.metric,.trait{break-inside:avoid;box-shadow:none}
  body.print-poster > *:not(.print-poster-wrap){display:none!important}
  body.print-poster .print-poster-wrap{display:block;padding-top:10mm}
  body.print-poster .poster{width:150mm;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.full-sheet{display:grid;gap:6px}
.full-head{text-align:center;padding-bottom:8px;border-bottom:2px solid var(--border)}
.full-name{margin:0;font:800 1.7rem var(--font-head);color:var(--heading)}
.full-alias{margin:2px 0;font-style:italic;color:var(--muted)}
.full-bounty{margin:6px 0 0;font-weight:800;color:var(--accent)}
:root[data-theme="dark"] .full-bounty{color:var(--gold)}
.full-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.full-sub{margin:14px 0 8px;font:700 .85rem var(--font-body);color:var(--muted)}
.full-text{margin:0;white-space:pre-wrap}
.full-sec .trait span{white-space:pre-line}
.dock-rd{display:flex;align-items:center;gap:5px;font:700 .74rem var(--font-body);color:var(--muted);white-space:nowrap}
.dock-rd input{width:auto;margin:0}
.crew-code{font:800 1.05rem/1 var(--font-body);letter-spacing:.14em;padding:5px 10px;border:2px dashed var(--border-strong);border-radius:8px;color:var(--heading);background:var(--surface2);user-select:all}
.crew-invite{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.crew-mesa{display:grid;gap:8px}
.crew-mesa .rowhead{flex-wrap:wrap;gap:8px}

/* ---------- Painel do Mestre, combate e rolagens da mesa ---------- */
.master-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border:2px solid var(--gold);border-radius:12px;background:var(--surface3);font-weight:700;color:var(--heading)}
.master-bar-btns{display:flex;gap:8px;flex-wrap:wrap}
.master-card{display:grid;gap:8px;border-left:6px solid var(--border-strong)}
.master-card.kind-jogador{border-left-color:var(--sea)}
.master-card.kind-inimigo{border-left-color:var(--accent)}
.master-card.down{opacity:.7}
.master-actions{display:flex;gap:6px;flex-wrap:wrap}
.mini-vitals{display:grid;gap:5px}
.mini-vital{display:grid;grid-template-columns:72px 1fr auto;gap:8px;align-items:center;font-size:.82rem}
.mini-vital span{font:800 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mini-vital .bar{grid-area:auto;height:10px}
.mini-hp .bar i{background:linear-gradient(90deg,#b8382c,#e8743f)}
.mini-pe .bar i{background:linear-gradient(90deg,#1f7a8c,#4fc0cf)}
.mini-surv .bar i{background:linear-gradient(90deg,#6d4aa3,#a98be0)}
.combat-row.is-hidden{border-style:dashed;opacity:.8}
.master-add{display:grid;grid-template-columns:1.6fr auto auto;gap:8px;padding:0 14px 14px}
.turn-now{margin:8px 0;padding:8px 14px;border-radius:10px;background:var(--gold);color:#2b1b05;font:800 1rem var(--font-head)}
.dice-secret{display:flex;align-items:center;gap:6px;font:700 .8rem var(--font-body);color:var(--muted)}
.dice-secret input{width:auto;margin:0}
.roll-feed{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.roll-feed-item{border:1px solid var(--border);border-left:5px solid var(--sea);border-radius:10px;background:var(--surface2);padding:7px 10px}
.roll-feed-item.secret{border-left-color:var(--gold);border-style:dashed}
.roll-feed-item.crit{border-left-color:var(--good)}
.roll-feed-item.fumble{border-left-color:var(--bad)}
.roll-feed-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.roll-feed-item strong{font:800 1.15rem var(--font-head);color:var(--accent)}
:root[data-theme="dark"] .roll-feed-item strong{color:var(--gold)}
/* tela de combate (celular) */
.cb-banner{display:grid;gap:2px;text-align:center;padding:14px;margin-bottom:12px;border-radius:14px;background:var(--surface3);border:2px solid var(--border-strong)}
.cb-banner strong{font:800 1.5rem var(--font-head);color:var(--heading)}
.cb-banner.mine{background:var(--gold);border-color:#fff3c9;animation:pulse 1.4s ease-in-out infinite}
.cb-banner.mine strong,.cb-banner.mine .small{color:#2b1b05}
.cb-banner.idle{opacity:.85}
.cb-order{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cb-turn{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-left:6px solid var(--border-strong);border-radius:10px;background:var(--surface2)}
.cb-turn.kind-jogador{border-left-color:var(--sea)}
.cb-turn.kind-inimigo{border-left-color:var(--accent)}
.cb-turn.kind-aliado{border-left-color:var(--good)}
.cb-turn.now{outline:3px solid var(--gold);background:var(--surface3)}
.cb-turn.me .cb-name{text-decoration:underline}
.cb-init{min-width:34px;text-align:center;font:800 1.1rem var(--font-head);color:var(--accent)}
.cb-name{flex:1;font-weight:700;min-width:0;overflow-wrap:anywhere}
.cb-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.cb-amount{width:84px;padding:10px;font:800 1.1rem var(--font-head);text-align:center}
.cb-vital{display:grid;gap:6px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
.cb-vital-top{display:flex;justify-content:space-between;align-items:baseline;font:800 .8rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cb-vital-top strong{font:800 1.5rem var(--font-head);color:var(--text);letter-spacing:0}
.cb-vital .bar{height:14px}
.cb-vital.vital-hp .bar i{background:linear-gradient(90deg,#b8382c,#e8743f)}
.cb-vital.vital-pe .bar i{background:linear-gradient(90deg,#1f7a8c,#4fc0cf)}
.cb-vital.vital-surv .bar i{background:linear-gradient(90deg,#6d4aa3,#a98be0)}
.cb-vital.vital-int .bar i{background:linear-gradient(90deg,#9a7b2f,#e8c35d)}
.cb-vital-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
button.cb-btn{min-height:54px;font:800 1.7rem var(--font-head);border-radius:12px}
button.cb-btn.plus{background:var(--good)}
button.cb-btn.minus{background:var(--bad)}
.cb-rolls{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
button.cb-roll{min-height:48px;font-size:.92rem}
button.cb-roll.alt{background:var(--accent)}
.cb-conds{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
@media(max-width:620px){
  .master-add{grid-template-columns:1fr 1fr}
  .master-add>:first-child{grid-column:1/-1}
  .mini-vital{grid-template-columns:62px 1fr auto}
  .combate-view .section{padding:12px}
}
/* ---------- Navegação agrupada: Início · Personagem · Aventura ▾ · Mesa ▾ ---------- */
.mainnav{overflow:visible;gap:6px;flex-wrap:nowrap}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico .dot{fill:currentColor;stroke:none}
.caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.mainnav button.nav-link{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;font-weight:700;transition:background .2s,color .2s,border-color .2s,transform .15s}
.mainnav button.nav-link:hover{transform:translateY(-1px)}
.nav-trigger[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-group{position:relative}
.nav-group.has-active>.nav-trigger{background:rgba(224,171,61,.2);color:var(--gold);border-color:rgba(224,171,61,.65)}
.nav-menu{display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:300px;padding:8px;gap:4px;background:var(--surface);border:2px solid var(--gold);border-radius:16px;box-shadow:var(--shadow);z-index:5}
.nav-menu:before{content:'';position:absolute;top:-8px;left:50%;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:var(--surface);border-left:2px solid var(--gold);border-top:2px solid var(--gold);border-radius:3px 0 0 0}
.nav-group.open .nav-menu{display:grid;animation:navpop .16s ease-out}
@keyframes navpop{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%)}}
button.nav-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 12px;border-radius:12px;background:transparent;color:var(--text);border:1px solid transparent;box-shadow:none;font-weight:400}
button.nav-item:hover,button.nav-item:focus-visible{background:var(--surface3);filter:none;transform:none}
button.nav-item .ico{width:20px;height:20px;padding:8px;box-sizing:content-box;border-radius:11px;background:var(--navy);color:var(--gold)}
button.nav-item span{display:grid;gap:1px}
button.nav-item b{font:700 .98rem var(--font-head);color:var(--heading)}
button.nav-item small{font-size:.78rem;color:var(--muted)}
button.nav-item.active{background:var(--surface3);border-color:var(--gold)}
button.nav-item.active .ico{background:var(--gold);color:#2b1b05}
.nav-backdrop{display:none}

/* página inicial em seções */
.hub-section{margin-top:26px}
.hub-title{display:flex;align-items:center;gap:10px;margin:0;font:700 1.1rem var(--font-head);color:var(--heading);text-transform:uppercase;letter-spacing:.09em}
.hub-title .ico{width:24px;height:24px;color:var(--accent)}
.hub-title:after{content:'';flex:1;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.hub-card{transition:transform .18s,box-shadow .18s}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

@media(max-width:900px){
  .topinner{z-index:auto}
  .mainnav{position:fixed;left:0;right:0;bottom:0;order:0;flex:none;z-index:35;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#123c58,#09202f);border-top:3px solid var(--gold);box-shadow:0 -6px 22px rgba(6,23,38,.4)}
  .mainnav button.nav-link{flex-direction:column;justify-content:center;gap:3px;width:100%;padding:7px 2px 6px;border-radius:12px;font-size:.7rem;line-height:1.1}
  .mainnav .ico{width:23px;height:23px}
  .mainnav .caret{display:none}
  .nav-group{display:contents}
  .nav-menu{position:fixed;left:10px;right:10px;top:auto;bottom:calc(78px + env(safe-area-inset-bottom));transform:none;min-width:0;max-width:520px;margin:0 auto;z-index:36}
  .nav-menu:before{top:auto;bottom:-8px;left:var(--arrow,50%);transform:rotate(225deg)}
  .nav-group[data-group="aventura"] .nav-menu{--arrow:62%}
  .nav-group[data-group="mesa"] .nav-menu{--arrow:87%}
  .nav-group.open .nav-menu{animation:navsheet .2s ease-out}
  @keyframes navsheet{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:34;background:rgba(6,16,26,.45)}
  .dice-fab{bottom:86px}
  .dice-panel{bottom:154px;max-height:min(72vh,calc(100dvh - 174px))}
  .status{bottom:152px}
  main{padding-bottom:150px}
}button.nav-item{justify-content:flex-start}
body:has(.nav-group.open) .dice-fab{opacity:0;pointer-events:none}
/* ---------- Atalhos da página inicial, aviso de turno e painel compacto ---------- */
.home-quick{display:grid;gap:12px;margin-top:6px}
.quick-card{display:grid;gap:12px;padding:16px;border:2px solid var(--gold);border-radius:16px;background:linear-gradient(135deg,var(--surface),var(--surface3));box-shadow:var(--shadow)}
.quick-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.quick-top>div{display:grid;gap:2px;min-width:0}
.quick-kicker{font:800 .7rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.quick-name{font:700 1.5rem var(--font-head);color:var(--heading);overflow-wrap:anywhere}
button.quick-open{font-size:1rem;padding:11px 22px}
.quick-links{display:flex;gap:8px;flex-wrap:wrap}
.quick-links button{flex:1 1 130px}
button.turn-alert{display:grid;gap:2px;width:100%;padding:14px;border-radius:16px;text-align:center;background:var(--gold);color:#2b1b05;border:2px solid #fff3c9;animation:pulse 1.4s ease-in-out infinite}
button.turn-alert strong{font:800 1.25rem var(--font-head)}
.nav-group.turn>.nav-trigger,.nav-group.news>.nav-trigger{position:relative}
.nav-group.turn>.nav-trigger:after,.nav-group.news>.nav-trigger:after{content:'';position:absolute;top:4px;right:calc(50% - 22px);width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #09202f;animation:pulse 1.2s ease-in-out infinite}
@media(min-width:901px){.nav-group.turn>.nav-trigger:after,.nav-group.news>.nav-trigger:after{top:6px;right:8px}}
@media(max-width:620px){
  .dock.compact .dock-stats{display:none}
  .dock.compact .vital{padding:4px 8px}
  .dock.compact .vital-btns button{width:30px;height:30px}
}
/* ---------- Primeiros passos ---------- */
.guide-card{display:grid;gap:10px;padding:14px 16px;border:2px dashed var(--border-strong);border-radius:16px;background:var(--surface2)}
.guide-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.guide-steps li{display:flex;align-items:center;gap:12px}
.guide-steps li>div{flex:1;display:grid;min-width:0}
.guide-steps small{color:var(--muted)}
.guide-check{flex:0 0 26px;height:26px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;font-weight:800;color:#fff}
.guide-steps li.done .guide-check{background:var(--good);border-color:var(--good)}
.guide-steps li.done b{text-decoration:line-through;opacity:.7}

/* Diário da tripulação e aviso de criação de campanha */
.note-form{display:grid;gap:8px;margin:10px 0 14px}
.note-card{display:grid;gap:8px}
.note-body{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}

/* Celular deitado: o painel de dados fica ao lado do botão d20, sem passar do topo */
@media (max-height:500px) and (orientation:landscape){
  .dice-panel{bottom:76px;right:84px;max-height:calc(100dvh - 88px)}
  .dice-stage{min-height:100px}
}

/* Inventário e Berries */
.berries-box{display:grid;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:6px}
.berries-total{display:flex;align-items:center;gap:12px;font:800 1.05rem var(--font-head);color:var(--heading)}
.berries-total input{max-width:200px;font:800 1.4rem var(--font-head);color:var(--gold);text-align:right}
.berries-move{display:flex;gap:8px;flex-wrap:wrap}
.berries-move input{flex:1 1 120px;min-width:0}
.berries-history{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:.86rem;color:var(--muted)}
.berries-history:empty{display:none}
.berries-history .pos{color:var(--good)}
.berries-history .neg{color:var(--bad)}

/* Encerrar o próprio turno */
.cb-banner{position:relative}
.cb-end{margin-top:8px;width:100%;padding:12px;font:800 1.05rem var(--font-head)}

/* Monitores grandes (1440p, ultrawide, 4K): coluna mais larga, letra um pouco maior e início em duas colunas */
@media (min-width:1500px) and (min-height:600px){
  main,.topinner{max-width:1360px}
}
@media (min-width:1900px){
  html{font-size:112.5%}
  main,.topinner{max-width:1600px}
}
@media (min-width:2400px){
  html{font-size:125%}
  main,.topinner{max-width:1900px}
}
.poster-dream{margin:4px 0 0;font-size:.86rem;font-style:italic;overflow-wrap:anywhere}

/* Backup e dano crítico */
.backup-lines{margin:0;padding-left:18px;display:grid;gap:3px;color:var(--muted)}
.backup-nag{display:grid;gap:8px}
.dice-crit-btn{margin-top:8px;padding:10px 14px;font-weight:800}

.grid.npc-new{grid-template-columns:1.3fr 1.3fr .6fr 1.2fr;align-items:end}
@media(max-width:900px){.grid.npc-new{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid.npc-new{grid-template-columns:1fr}}

/* Diagnóstico */
.diag-card{width:min(680px,100%)}
.diag-summary{margin:0;padding:10px 14px;border-radius:10px;font:800 1rem var(--font-head)}
.diag-summary.ok{background:rgba(124,207,162,.16);color:var(--good)}
.diag-summary.warn{background:rgba(224,171,61,.18);color:var(--gold)}
.diag-summary.bad{background:rgba(214,92,92,.18);color:var(--bad)}
.diag-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.diag-row{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.diag-row small{display:block;color:var(--muted);overflow-wrap:anywhere}
.diag-icon{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 .8rem var(--font-body);background:var(--surface3);color:var(--heading)}
.diag-row.ok .diag-icon{background:var(--good);color:#06210f}
.diag-row.warn .diag-icon{background:var(--gold);color:#2b1b05}
.diag-row.bad .diag-icon{background:var(--bad);color:#fff}
.diag-row.bad b{color:var(--bad)}
.invite-banner{border-color:var(--gold);background:var(--surface3);display:grid;gap:8px}

/* Cofre da tripulação e premiação do Mestre */
.crew-purse .berries-total{margin:6px 0}
.purse-balance{font:800 1.6rem var(--font-head);color:var(--gold)}
.crew-purse .berries-move{margin:8px 0}
.award-card{border-style:dashed;margin:10px 0}
.award-list{display:grid;gap:6px;margin:10px 0}
.award-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:6px 10px}
.award-row span{font-weight:700;overflow-wrap:anywhere}
.award-row input{max-width:120px}

/* ==========================================================================
   Painel do Mestre reformulado e campanha da mesa
   ========================================================================== */
.master-tabs .tab.live::after{content:'';display:inline-block;width:8px;height:8px;margin-left:7px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 0 rgba(200,64,47,.6);animation:livepulse 1.6s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(200,64,47,.55)}70%{box-shadow:0 0 0 7px rgba(200,64,47,0)}100%{box-shadow:0 0 0 0 rgba(200,64,47,0)}}
.master-stats{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.pill-live{background:var(--accent);color:var(--accent-text);border-color:var(--gold)}
.tab-hint{margin:10px 0 12px;padding:8px 12px;border-left:4px solid var(--gold);background:var(--surface2);border-radius:0 8px 8px 0}
button.code-btn{cursor:pointer;user-select:all}
button.code-btn:hover{border-color:var(--gold)}

.amount-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:sticky;top:6px;z-index:5;margin:0 0 12px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.amount-label{display:flex;align-items:center;gap:8px;font:800 .8rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.amount-bar .amount-input{width:84px;font-size:1.1rem;font-weight:800;text-align:center}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.amount-bar>.small{flex:1 1 220px}

.party-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;margin-bottom:14px}
.party-grid>.repeat-card{margin:0}
.crew-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 8px}
.crew-head .subhead{margin:0}
.crew-head .small{flex:1 1 140px}
.cond-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
button.cond-chip{padding:3px 10px;font-size:.74rem}
select.cond-add{width:auto;max-width:170px;padding:4px 8px;font-size:.78rem}
.master-card .master-actions button.small-btn{flex:0 0 auto}

.setup-card{border-style:dashed}
.setup-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.setup-steps li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
.setup-steps li.done{opacity:.6}
.setup-steps li.done b{text-decoration:line-through}
.setup-steps li>div{display:grid;gap:2px}
.setup-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--border-strong);font-weight:800;color:var(--heading)}
.setup-steps li.done .setup-mark{background:var(--good);border-color:var(--good);color:#fff}

details.quick-edit{border:1px dashed var(--border-strong);border-radius:10px;padding:6px 10px;background:var(--surface2)}
details.quick-edit>summary{cursor:pointer;font:700 .8rem var(--font-body);color:var(--heading)}
.qe-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:8px;margin:8px 0}
.qe-field{display:grid;gap:3px;font:700 .72rem var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.qe-field input{padding:5px 8px}
details.quick-edit textarea{width:100%}

.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:6px 0 12px}
button.tpl-card{display:grid;gap:3px;text-align:left;padding:10px 12px;border:2px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--text);box-shadow:none;font-weight:400}
button.tpl-card b{font:700 .95rem var(--font-head);color:var(--heading)}
button.tpl-card small{color:var(--muted);font-size:.78rem}
button.tpl-card:hover{border-color:var(--gold);filter:none}
button.tpl-card.active{border-color:var(--accent);background:var(--surface3);box-shadow:0 0 0 2px var(--gold)}
.npc-new{display:grid;grid-template-columns:2fr 110px auto;gap:10px;align-items:end;margin-bottom:10px}
.npc-new .field{margin:0}
.npc-tocombat{padding-bottom:8px}
.npc-list{display:grid;gap:12px}
details.npc-group{border:1px solid var(--border);border-left:6px solid var(--accent);border-radius:12px;background:var(--surface);padding:8px 12px}
details.npc-group>summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:2px 0}
details.npc-group>.master-actions{margin:8px 0}
details.npc-group>.party-grid{margin-top:8px}

.combat-hero{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:14px 16px;margin:10px 0 12px;border:2px solid var(--border-strong);border-radius:14px;background:var(--surface2)}
.combat-hero.live{border-color:var(--gold);background:var(--surface3)}
.combat-hero.live.kind-inimigo{border-left:8px solid var(--accent)}
.combat-hero.live.kind-jogador{border-left:8px solid var(--sea)}
.hero-main{display:grid;gap:4px;flex:1 1 260px;min-width:0}
.hero-main strong{font:700 1.45rem var(--font-head);color:var(--heading);overflow-wrap:anywhere}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
button.hero-go{padding:14px 26px;font-size:1.05rem;font-weight:800}
.hero-quick{display:flex;gap:6px;flex-wrap:wrap}
.combat-list{margin-bottom:10px}
.combat-row .combat-hp{max-width:420px}
.combat-row .cond-row{margin:0}
.combat-controls .ctrl-label{font:800 .75rem var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.combat-add .master-add{grid-template-columns:1.6fr auto auto auto}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:6px 14px 10px}
.pick-head{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.pick-head b{flex:1 1 100%}
.pick-list{display:grid;gap:4px;max-height:260px;overflow:auto}
.pick-item{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer}
.pick-item span{font-weight:700;overflow-wrap:anywhere}
.pick-item small{margin-left:auto;color:var(--muted)}
.combat-add>.hub-actions{padding:0 14px 10px;align-items:center}

.cofre-row{display:grid;gap:8px}
.cofre-form{display:grid;grid-template-columns:120px 1fr auto auto;gap:8px}

.camp-note{margin:4px 0 8px;padding:8px 12px;border-left:4px solid var(--sea);background:var(--surface2);border-radius:0 8px 8px 0}
.camp-readonly .edit-only{display:none!important}
details.entry.entry-private{border-left-style:dashed}
.check-field label{display:flex;align-items:center;gap:8px;font-weight:700}
.camp-legacy{margin-top:14px}
.camp-legacy>summary{cursor:pointer;font:700 .85rem var(--font-body);color:var(--muted)}

@media (max-width:900px){
  .qe-grid{grid-template-columns:repeat(2,1fr)}
  .qe-grid>:first-child{grid-column:1/-1}
  .npc-new{grid-template-columns:1fr 100px}
  .npc-new .npc-tocombat{grid-column:1/-1}
  .cofre-form{grid-template-columns:1fr 1fr}
  .cofre-form input:nth-child(2){grid-column:1/-1;order:3}
}
@media (max-width:600px){
  .party-grid{grid-template-columns:1fr}
  .amount-bar{top:0;border-radius:0 0 12px 12px;margin-left:-4px;margin-right:-4px}
  .setup-steps li{grid-template-columns:28px 1fr}
  .setup-steps li>button{grid-column:2}
  button.hero-go{flex:1 1 100%}
  .hero-actions{width:100%}
  .combat-add .master-add{grid-template-columns:1fr 1fr 1fr}
  .combat-add .master-add>:first-child,.combat-add .master-add>button{grid-column:1/-1}
  .hero-main strong{font-size:1.2rem}
}
@media (min-width:1500px){
  .party-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
}
@media print{.amount-bar,.combat-hero .hero-actions{display:none}}

/* ==========================================================================
   Interface reorganizada: guias, Início, ficha, navio, tripulação e combate
   ========================================================================== */
.ico-wrap{display:inline-grid;place-items:center}
.ico-wrap svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.guide-open{overflow:hidden}

/* ---------- Guias de primeiro acesso ---------- */
.guide-modal-card{width:min(520px,100%);text-align:center;justify-items:center;gap:10px;background:linear-gradient(160deg,var(--surface),var(--surface3));animation:guidein .28s ease-out}
@keyframes guidein{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.guide-top{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px}
.guide-kicker{font:800 .72rem var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sea-text);text-align:left}
.guide-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--navy);color:var(--gold);border:3px solid var(--gold);box-shadow:0 4px 0 var(--navy-shadow)}
.guide-icon svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.guide-modal-card h2{font:700 1.45rem var(--font-head);color:var(--heading);text-transform:none;letter-spacing:0;margin:0;padding:0}
.guide-modal-card h2:after{display:none}
.guide-text{margin:0;font-size:1.02rem;line-height:1.5}
.guide-bullets{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px;width:100%;text-align:left}
.guide-bullets li{position:relative;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-size:.93rem;line-height:1.4}
.guide-bullets li:before{content:'✦';position:absolute;left:12px;top:8px;color:var(--gold)}
.guide-dots{display:flex;gap:7px;justify-content:center;margin:2px 0}
.guide-dot{width:9px;height:9px;border-radius:50%;background:var(--border);transition:background .2s,transform .2s}
.guide-dot.past{background:var(--border-strong)}
.guide-dot.on{background:var(--accent);transform:scale(1.35)}
.guide-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:100%}
.guide-actions button{flex:1 1 130px;min-width:0;padding:12px 16px;font-size:.95rem}
button.guide-off{background:transparent;border:0;box-shadow:none;color:var(--muted);font:600 .78rem var(--font-body);text-decoration:underline;padding:4px 8px}
button.guide-off:hover{color:var(--heading);transform:none;filter:none}
.help-btn{position:absolute;right:0;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 5px;border-radius:999px;background:var(--surface2);color:var(--heading);border:2px solid var(--border-strong);box-shadow:none;font:800 .76rem var(--font-body)}
.help-btn:hover{border-color:var(--gold)}
.help-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:800}
@media (max-width:520px){.help-text{display:none}.help-btn{padding:4px}}

/* ---------- Início ---------- */
.home-alerts{display:grid;gap:12px}
.home-alerts:empty{display:none}
.home-grid{display:grid;gap:16px;margin-top:8px}
.home-col{display:grid;gap:14px;min-width:0;align-content:start}
.home-quick{margin-top:0}
@media (min-width:960px){.home-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}
.home-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.home-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
button.home-tile{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;padding:12px;min-height:70px;border:2px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 3px 0 var(--border);font-weight:400;letter-spacing:0}
button.home-tile:hover{border-color:var(--gold);transform:translateY(-2px);filter:none}
button.home-tile.has-badge{border-color:var(--gold)}
.tile-ico{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--navy);color:var(--gold)}
.tile-txt{display:grid;gap:2px;min-width:0}
.tile-txt b{font:700 .98rem var(--font-head);color:var(--heading)}
.tile-txt small{color:var(--muted);font-size:.78rem;line-height:1.25;overflow-wrap:anywhere}
.tile-badge{position:absolute;top:-9px;right:-3px;padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--accent-text);font:800 .72rem var(--font-body);box-shadow:0 2px 0 var(--accent-shadow);animation:pulse 1.6s ease-in-out infinite}
.home-table,.home-sheets{display:grid;gap:10px;align-content:start}
.home-table h2,.home-sheets h2{margin:0}
.table-row{display:grid;gap:7px;padding:12px;border:1px dashed var(--border-strong);border-left:5px solid var(--sea);border-radius:12px;background:var(--surface2)}
.table-row.kind-master{border-left-color:var(--gold)}
.table-row .rowhead{margin:0}
.table-row p{margin:0}
.table-row .live{color:var(--bad);font-weight:700}
.home-sheet{display:grid;gap:8px}
.home-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.home-sheet-head>div{display:grid;min-width:0}
details.home-more{margin-top:16px}
details.home-more>summary{cursor:pointer;font:700 1.02rem var(--font-head);color:var(--heading)}
.home-more-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:12px}
.home-more-block{display:grid;gap:8px;align-content:start}
.home-more-block .subhead{margin:0}
.home-more-block p{margin:0}

/* ---------- Ficha: salvar, ajuda e textos recolhidos ---------- */
details.howto{margin:0 0 10px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface2);padding:6px 12px}
details.howto>summary{cursor:pointer;font:700 .8rem var(--font-body);color:var(--sea-text)}
details.howto[open]>summary{margin-bottom:6px}
details.howto p{margin:0}
.save-state{align-self:center;min-height:1.2em;font:700 .82rem var(--font-body);color:var(--good)}
.save-state.dirty{color:var(--bad)}
button.needs-save{animation:pulse 1.6s ease-in-out infinite}
button.dock-save{background:var(--gold);color:#2b1b05;border-color:#fff3c9;box-shadow:0 3px 0 #8a6a1f;animation:pulse 1.6s ease-in-out infinite;white-space:nowrap}
@media (max-width:620px){.save-state{flex:1 1 100%;order:9}}

/* ---------- Navio: resumo sempre à vista ---------- */
.ship-summary{margin:0 0 12px}
.ship-summary:empty{display:none}
.sum-card{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 14px;border:2px solid var(--gold);border-radius:14px;background:linear-gradient(135deg,var(--surface),var(--surface3))}
.sum-id{display:grid;gap:1px;min-width:0}
.sum-name{font:700 1.15rem var(--font-head);color:var(--heading);overflow-wrap:anywhere}
.sum-card .mini-vitals{flex:1 1 220px;min-width:170px}
.sum-card.empty{border-style:dashed}

/* ---------- Tripulação ---------- */
.crew-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:8px}
.crew-card,.member-card{display:grid;gap:8px;align-content:start;margin:0}
.crew-card .rowhead,.member-card .rowhead{margin:0}
.crew-card p,.member-card p{margin:0}
.crew-names{overflow-wrap:anywhere}
.member-card.me{border-style:solid;border-color:var(--sea)}
.member-card.down{opacity:.78}
.crew-summary{margin:10px 0}
.crew-quick{margin:8px 0}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:8px 0 12px}
button.choice-card{display:grid;gap:3px;justify-items:start;text-align:left;padding:12px 14px;border:2px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--text);box-shadow:none;font-weight:400;letter-spacing:0}
button.choice-card b{font:700 .98rem var(--font-head);color:var(--heading)}
button.choice-card small{color:var(--muted);font-size:.8rem}
button.choice-card:hover{border-color:var(--gold);filter:none}
button.choice-card.active{border-color:var(--accent);background:var(--surface3);box-shadow:0 0 0 2px var(--gold)}
.crew-form{display:grid;gap:10px}
.crew-form p{margin:0}
details.more-options>summary{cursor:pointer;font:700 .85rem var(--font-body);color:var(--muted);padding:4px 0}
details.more-options[open]>summary{margin-bottom:6px}
details.crew-start>summary{cursor:pointer;font:700 1rem var(--font-head);color:var(--heading)}
details.crew-start[open]>summary{margin-bottom:10px}
.crew-mesa{display:grid;gap:10px;margin-top:10px}
.crew-mesa .rowhead{margin:0}

/* ---------- Combate (jogador): a sua ficha vem primeiro no celular ---------- */
#combateRoot{display:flex;flex-direction:column;gap:14px}
#combateRoot>*{margin:0}
@media (max-width:999px){
  #combateRoot>.cb-banner{order:-3}
  #combateRoot>.cb-me{order:-2}
}
@media (min-width:1000px){
  #combateRoot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}
  #combateRoot>.cb-banner{grid-column:1/-1}
  #combateRoot>section:not(.cb-me){grid-column:1}
  #combateRoot>.cb-me{grid-column:2;grid-row:2 / span 3}
}
@media print{.help-btn,.guide-modal-card{display:none!important}}

.backup-nag{padding:10px 14px;gap:6px}
.backup-nag .hub-actions{gap:6px}
.backup-nag .hub-actions button{padding:7px 12px;font-size:.8rem}
.help-btn.inline{position:static;align-self:center;margin-left:auto}
@media (max-width:620px){.help-btn.inline{flex:1 1 100%;order:10;justify-content:center;margin:0}.help-btn.inline .help-text{display:inline}}

/* Avisos que chamam atenção sem apagar o texto (antes o bloco inteiro ficava transparente a cada pulso) */
@keyframes ring{0%,100%{box-shadow:0 0 0 0 rgba(224,171,61,.0)}50%{box-shadow:0 0 0 7px rgba(224,171,61,.4)}}
.cb-banner.mine,button.turn-alert,.tile-badge,button.needs-save,button.dock-save{animation:ring 1.6s ease-in-out infinite}
/* Acessibilidade: atalho para pular o menu e foco do conteúdo */
.skip-link{position:absolute;left:8px;top:-64px;z-index:100;padding:10px 16px;border-radius:0 0 10px 10px;background:var(--gold);color:#2b1b05;font-weight:800;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
main:focus{outline:none}
/* botões em grade: o conteúdo ocupa a largura toda e fica alinhado à esquerda */
button.choice-card,button.tpl-card{justify-content:stretch;align-content:start;justify-items:start;text-align:left}

@media (max-width:620px){.save-state{flex:1 1 0;order:9;align-self:center}.help-btn.inline{flex:0 0 auto;order:10;margin:0 0 0 auto;justify-content:center}}