/* SG-FE1-V3: mapa 2D, miniaturas WebGL y controles DOM. */
:root{color-scheme:dark;--ink:#121e2b;--panel:#1b2b3b;--gold:#d9b66f;--paper:#eadcb8;--text:#e7e9e7;--muted:#c3cdd2;font-family:'Segoe UI',Arial,sans-serif;background:#101923;color:var(--text);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#263b4a,#101923 65%);min-width:280px;line-height:1.5}h1,h2,h3,h4,p{margin:0 0 .7rem}h1,h2,h3,h4{font-family:Georgia,serif;line-height:1.2}h1{font-size:2rem}h2{font-size:1.45rem}h3{font-size:1.2rem}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{min-height:44px;padding:9px 13px;border:1px solid #a69068;border-radius:5px;background:#263c4c;color:#f7edda;cursor:pointer;font-weight:600;line-height:1.35}button:hover:enabled{background:#39536a}button:disabled{opacity:.58;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #ffe09b;outline-offset:3px}a{color:#f4d795;text-underline-offset:3px}input,select{min-height:44px;max-width:100%;border:1px solid #9a8b6f;border-radius:4px;background:#111e2b;color:#f8eedb;padding:8px}input[type=checkbox]{min-height:22px;width:22px;accent-color:#e2b25b}input[type=range]{min-height:28px;width:105px;padding:0;accent-color:#ddb674}[hidden]{display:none!important}.gold-button{color:#2b2418;background:linear-gradient(#f4d78e,#c8a45e);border-color:#eed09a}.gold-button:hover:enabled{background:#ffe3a1}.text-button{background:transparent;text-align:left;color:#f0d394;padding:5px 1px;border:0;font-size:.85rem;display:block;width:100%}.eyebrow{font-size:.68rem;letter-spacing:.13em;color:#dec48b}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:15px;top:-90px;z-index:99;background:#172839;padding:12px}.skip-link:focus{top:12px}
.card :is(button,a,input,select,[tabindex]):focus-visible{outline-color:#152331}
.masthead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px max(16px,env(safe-area-inset-left));border-bottom:1px solid #8e754a;background:#111d29}.wordmark{display:flex;gap:10px;align-items:center;color:#edd6a6;text-decoration:none;font-family:Georgia,serif;font-size:1.15rem;letter-spacing:.12em}.wordmark b{display:block;font-size:.8rem;letter-spacing:.35em}.brand-compass{font-size:2.1rem}.edition{font-size:.65rem;color:#c6c9be;letter-spacing:.08em}.header-nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}.music-controls,.animation-controls{padding:6px max(16px,env(safe-area-inset-left));display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;background:#172431;border-bottom:1px solid #665c49;font-size:.78rem}.music-controls button,.animation-controls button{font-size:.75rem;padding:6px 10px}.music-controls label,.animation-controls label{display:flex;align-items:center;gap:8px}.music-controls>span:last-child,.animation-controls>span{color:var(--muted)}.animation-controls{background:#101d2a}.page-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px max(16px,env(safe-area-inset-left));border-top:1px solid #6a5b43;color:#b8c5cb;font-size:.7rem}.loading-state,.fatal{max-width:760px;margin:40px auto;padding:25px}.notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);max-width:640px;width:calc(100% - 30px);padding:15px;z-index:100;background:#533321;border:1px solid #f0bf83;box-shadow:0 8px 30px #0009}
.setup{max-width:1320px;margin:auto;display:grid;grid-template-columns:1.05fr 1fr;gap:38px;padding:35px 24px}.setup-intro h1{font-size:3.7rem;font-weight:400;line-height:1.08;margin:12px 0 20px}.setup-intro h1 em{color:#e6c785}.lead{font-size:1.1rem;color:#d1d9da;max-width:540px}.release-note{color:#e2c98e;font-size:.85rem}.setup-painting{position:relative;margin-top:24px;border:1px solid #bb9759;overflow:hidden}.setup-painting>img{width:100%;height:auto;display:block}.painting-caption{position:absolute;bottom:0;padding:18px;display:flex;justify-content:space-between;width:100%;gap:10px;background:linear-gradient(transparent,#07121cf2 25%)}.painting-caption strong,.painting-caption span{display:block}.painting-caption strong{font:1.3rem Georgia,serif;color:#ffe5ac}.painting-caption span{font-size:.75rem}.setup-seals{display:flex}.art{display:block;width:100%;height:100%}.crest{width:44px;height:32px;flex:none}.crest-large{width:110px;height:75px}.setup-seals .crest{width:32px;height:24px}.setup-panel,.framed-panel{border:1px solid #a78b59;background:linear-gradient(135deg,#233546,#152331);box-shadow:0 8px 24px #0003}.setup-panel{padding:24px}.panel-heading,.dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:15px}.roman-number{font:3rem Georgia,serif;color:#977a4c}.presets{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 18px}.presets button{flex:1;font-size:.75rem}.setup-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:grid;gap:5px;font-size:.85rem}.slots{display:grid;gap:10px;margin:15px 0}.slot{min-width:0;border:1px solid #687d85;padding:9px 12px}.slot legend{color:#dfc88f;font-size:.8rem}.slot-content{display:grid;grid-template-columns:44px minmax(0,1fr) 92px;gap:8px;align-items:center}.slot-content select{width:100%;font-size:.85rem}.slot-description{font-size:.8rem;color:#ced8db;margin:7px 0 0}.setup-note{font-size:.8rem;color:#c5cfd1}.setup-submit{width:100%;margin:12px 0}.setup-library{display:flex;gap:15px}.field-error{color:#ffd19e;font-size:.85rem}.setup-library .text-button{width:auto}
.campaign{max-width:1820px;margin:auto;padding:16px 20px 30px}.turn-bar{padding:12px 16px;border:1px solid #8f7953;background:#1a2b3b;margin-bottom:12px}.turn-identity{display:flex;gap:18px;align-items:center}.turn-identity h1{font-size:1.55rem;margin:3px 0}.round-medal{font-size:.65rem;text-align:center;padding-right:17px;border-right:1px solid #877148;color:#cccfca}.round-medal b{display:block;font:1.9rem Georgia,serif;color:#f2d598}.turn-subtitle{font-size:.78rem;color:#cbd4d6;margin:0}.mode-status{padding:10px 14px;margin-bottom:12px;border-left:3px solid #e2bd70;background:#273a47;font-size:.85rem}.mode-status p{margin:0}.table-layout{display:grid;grid-template-columns:200px minmax(330px,1fr) 280px;gap:16px;align-items:start}.civilizations-panel{padding:9px}.player-card{padding:12px 9px;border:1px solid #61717c;border-left:3px solid var(--civ);margin-bottom:9px;background:#122332}.player-card:last-child{margin-bottom:0}.player-card.is-active{background:#304350;box-shadow:inset 0 0 0 1px var(--civ)}.player-card.is-eliminated{border-style:dashed}.civ-label{display:flex;align-items:center;gap:6px}.civ-label b{font:1.05rem Georgia,serif;display:block;color:#f3dfb4}.civ-label small{font-size:.6rem;display:block;letter-spacing:.04em;color:#d1d9db}.player-points{display:flex;align-items:center;gap:7px;margin:9px 0 5px;font-size:.75rem;color:#f4da99}.player-points strong{font:1.6rem Georgia,serif}.points-track{flex:1;height:5px;background:#050d16;border:1px solid #706445}.points-track i{display:block;background:#e5bd68;width:var(--progress);height:100%}.battalion-count,.wealth-count{font-size:.8rem;margin:4px 0}.board-column{min-width:0}.board-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 12px;background:#1d3040;border:1px solid #a88a54}.board-heading h2{font-size:1.2rem;margin:0}.board-heading span{font-size:.65rem;color:#cbd4d6}.visual-area{position:relative;isolation:isolate;border:1px solid #9a7c49;border-top:0;background:#102b3a}.visual-area canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.board-stage{height:clamp(400px,34vw,520px);min-width:0;position:relative;overflow:hidden;background:linear-gradient(#1a3041,#102433)}.map-painting{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;opacity:.87}.army-bay{position:absolute;width:clamp(86px,19%,126px);text-align:center;z-index:3;transform:translate(-50%,-50%);font-size:.68rem;line-height:1.3;color:#fff2d4}.bay-title{display:flex;flex-direction:column;align-items:center;background:#102331e8;border:1px solid var(--civ,#a1a293);padding:3px 2px 4px;border-radius:4px}.bay-title b{font: .91rem Georgia,serif}.bay-title .crest{width:30px;height:20px}.army-bay p{background:#102331eb;border:1px solid #81919988;margin:2px 0 0;padding:3px 1px}.army-bay.is-eliminated p{color:#d4cccc}.home-oso{left:50%;top:13%}.home-aguila{left:13.5%;top:50%}.home-dragon{left:86.5%;top:50%}.home-ciervo{left:50%;top:87%}.at-center{left:50%;top:50%;width:clamp(90px,20%,130px)}.at-center .bay-title{border-color:#f6cf75;background:#3a3927ee}.center-halo{position:absolute;width:110px;height:110px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #eac777;border-radius:50%;box-shadow:0 0 0 6px #d9b66f30;background:#c5ab5040}.troop-zone{display:grid;grid-template-columns:repeat(4,18px);grid-template-rows:repeat(2,15px);gap:2px;justify-content:center;align-content:center;min-height:36px}.troop-slot{display:block;width:18px;height:15px;position:relative}.troop-slot:before{content:'';position:absolute;inset:4px 1px 2px;background:var(--civ);border:1px solid #101c22;border-radius:3px;box-shadow:1px 2px #061018}.troop-slot:after{content:'';position:absolute;top:4px;right:0;width:10px;height:3px;background:var(--civ);border:1px solid #1d2525}.has-3d .troop-slot:before,.has-3d .troop-slot:after{display:none}.away-label{min-height:36px;display:grid;place-items:center}.dice-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 9px;border-top:1px solid #927a4e;background:linear-gradient(90deg,#25353f,#101d28)}.die-box{display:flex;align-items:center;flex-direction:column;font-size:.75rem;position:relative}.die-model{width:66px;height:66px;display:grid;place-items:center}.die-fallback{display:grid;place-items:center;width:46px;height:46px;background:#f0dcb0;border:2px solid #baa06a;color:#30271b;border-radius:7px;font:1.7rem Georgia,serif}.has-3d .die-fallback{visibility:hidden}.die-value{color:#ffe1a1;font-size:.9rem}.graphics-status{font-size:.7rem;padding:6px 2px;color:#c2d1d7;margin:0}.supremacy-info{padding:11px 13px;background:#142532;border:1px solid #657272;font-size:.8rem;color:#d2dadd}.supremacy-info p:last-child{margin:0}.command-panel{padding:15px}.command-title h2{font-size:1.7rem;margin:5px 0}.command-context,.decision-note,.ai-status{font-size:.84rem;color:#d0d9dc}.command-section{border-top:1px solid #6f6d5b;margin-top:13px;padding-top:12px}.command-section h3{font:600 .75rem 'Segoe UI',sans-serif;letter-spacing:.07em;color:#f1d295;text-transform:uppercase}.action-wrap{margin-bottom:8px}.action-button{display:block;width:100%;text-align:left}.action-label{display:flex;justify-content:space-between;align-items:center;gap:7px}.action-cost{font-size:.72rem;font-weight:500}.action-description{display:block;font-size:.79rem;font-weight:400;margin-top:5px}.action-reason,.card-warning,.preview-values{font-size:.78rem;line-height:1.45;margin:5px 0;color:#f4caaa}.preview-values{color:#dae4e2}.choice-options{display:grid;gap:6px}.end-section{background:#1e3342;padding:12px 5px 4px}.handoff{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px;border:2px solid #e4be71;background:#2b3c49;margin-bottom:16px}.handoff h2{font-size:1.6rem;margin:5px 0}.handoff p{font-size:.85rem;margin:0}.handoff button{max-width:100%}.outcome{padding:25px;border:2px solid #e4be71;margin-bottom:18px;background:#283e48;display:flex;justify-content:space-between;gap:20px}.outcome-actions{display:flex;flex-direction:column;gap:8px;justify-content:center}.roll-result{padding:18px;background:#182937;border:1px solid #75817b;margin-top:16px;font-size:.87rem}.roll-result h2{font-size:1.25rem}.roll-result p:last-child{margin:0}.roll-values{color:#ffe5ad}.attack-targets{padding-left:21px;margin-bottom:0}.opening-note{border-left:3px solid #dfb56e;padding-left:10px}.market-section{margin-top:24px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:12px}.section-heading h2{margin:4px 0 0}.section-heading p{margin:0;font-size:.78rem;color:#c4d1d6}.market{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{min-width:0;border:3px double #a88546;border-radius:7px;background:linear-gradient(135deg,#f1e3bf,#dbc99e);color:#302c22;padding:12px;box-shadow:0 5px 18px #0004;display:flex;flex-direction:column}.market-card-heading{display:flex;justify-content:space-between;align-items:start;gap:10px;margin-bottom:10px}.market-card-heading h3{font-size:1.22rem;margin:4px 0 0;overflow-wrap:anywhere}.card-type{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:#5c4d34}.card-cost{min-width:32px;height:32px;display:grid;place-items:center;font:1.25rem Georgia,serif;border:2px solid #a67e36;background:#f5d58f;border-radius:50%;flex:none}.card-art{aspect-ratio:384/180;width:100%;border:1px solid #9b7c4b;margin-bottom:12px;overflow:hidden}.card-effect{font-size:.87rem;line-height:1.55;font-weight:600;margin-bottom:13px}.card-limits{font-size:.88rem;line-height:1.65;padding-top:12px;border-top:1px solid #a18b5e}.card-controls{display:grid;gap:8px;margin-top:auto}.card-controls button{width:100%;font-size:.8rem}.card-controls .inspect-card{color:#3b3222;background:#e9d9b6;border-color:#a68b56;font-weight:500}.card-controls .action-wrap{margin:0}.card-controls .action-reason,.card-controls .card-warning,.card-controls .preview-values{color:#624022}.card-hidden,.card-empty,.review-cards{justify-content:center;align-items:center;text-align:center;min-height:300px}.card-hidden>span,.review-symbol{font:3rem Georgia,serif;color:#8b6b35;margin-bottom:20px}.review-cards p{font-size:.9rem}.review-cards button{width:100%;margin-top:9px}.log-section{padding:18px;border:1px solid #6c756f;background:#142431;margin-top:22px}.log-section h2{font-size:1.2rem}.log-list{padding-left:24px;max-height:300px;overflow:auto;font-size:.82rem;color:#d4dddd}.log-list li{padding:4px}.log-list li:nth-child(odd){background:#ffffff04}
dialog{border:1px solid #c6a363;border-radius:8px;background:#152635;color:#edf0e8;max-width:min(1120px,calc(100% - 28px));width:calc(100% - 28px);max-height:calc(100dvh - 28px);padding:25px;box-shadow:0 20px 90px #000b;overflow:auto}dialog::backdrop{background:#030b13ca;backdrop-filter:blur(3px)}.close-button{font-size:1.6rem;width:44px;min-width:44px;height:44px;padding:0}.dialog-heading{margin-bottom:18px}.dialog-heading h1{font-size:1.8rem;margin:3px 0}.dialog-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap;margin-top:22px;font-size:.75rem}.library-nav,.purchase-nav{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:15px;margin-bottom:18px;border-bottom:1px solid #796b50}.library-nav button[aria-current],.purchase-nav button[aria-current]{background:#c3a362;color:#20252a}.manual-rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.rule-section{background:#203747;padding:18px;border:1px solid #73827b;font-size:.9rem}.rule-section h2{font-size:1.25rem;color:#eed395}.manual-table-wrap{overflow-x:auto}.manual-table-wrap table{border-collapse:collapse;font-size:.8rem}.manual-table-wrap th,.manual-table-wrap td{padding:8px;border:1px solid #7c8c92;text-align:left}.manual-intro{display:flex;align-items:start;gap:20px;font-size:.9rem}.manual-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}.card-dialog{max-width:620px}.card-dialog .card-art{aspect-ratio:384/210}.card-dialog .card-effect{font-size:1rem}.inspector-preview{padding:15px;border:1px solid #b4945e;margin:18px 0}.inspector-preview p{font-size:.9rem}.full-width{width:100%}.purchase-owner{padding:16px 0;border-bottom:1px solid #79877c}.purchased-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}.purchased-card{padding:15px;background:#203b4c;border:1px solid #9b8b62;font-size:.85rem}.purchased-card h4{font-size:1.15rem;color:#f4d995}.purchased-card button{font-size:.8rem;width:100%}.video-frame{aspect-ratio:16/9;background:#03080c}.video-frame video{display:block;width:100%;height:100%}.video-caption-note,#video-status{font-size:.85rem;color:#d2dcd9}.video-chapters{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}.video-chapters button{font-size:.8rem}.video-transcript article{padding:14px 0;border-top:1px solid #718177;font-size:.9rem}.video-transcript h2{font-size:1.2rem}.confirm-dialog{max-width:540px}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
@media(max-width:1199px){.table-layout{grid-template-columns:minmax(0,1fr) 280px}.civilizations-panel{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.player-card{margin:0}.market{grid-template-columns:repeat(2,minmax(0,1fr))}.manual-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.board-stage{height:430px}.setup{gap:24px;padding:25px 18px}.setup-intro h1{font-size:3.1rem}.civ-label{flex-wrap:wrap}}
@media(max-width:799px){.masthead{padding:10px 12px;gap:12px}.edition{display:none}.header-nav{margin-left:0;flex:1;justify-content:flex-end}.wordmark{font-size:.9rem}.music-controls,.animation-controls{padding:6px 12px}.music-controls .eyebrow{display:none}.setup{grid-template-columns:1fr;max-width:650px;padding:22px 16px}.setup-intro h1{font-size:2.8rem}.setup-painting{max-height:280px}.setup-painting>img{height:280px;object-fit:cover}.setup-panel{padding:20px}.campaign{padding:12px}.table-layout{grid-template-columns:1fr;gap:12px}.civilizations-panel{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr))}.command-panel{grid-row:2}.board-column{grid-row:3}.civ-label{flex-wrap:nowrap}.board-stage{height:400px}.board-heading h2{font-size:1.15rem}.board-heading span{font-size:.63rem}.outcome{display:block;padding:20px}.outcome-actions{margin-top:18px}.handoff{display:block;padding:16px}.handoff button{width:100%;margin-top:15px}.manual-rule-grid{grid-template-columns:1fr}.purchased-grid{grid-template-columns:1fr 1fr}.section-heading{display:block}.section-heading p{margin-top:8px}.dialog-heading h1{font-size:1.6rem}.manual-intro{gap:12px}.crest-large{width:70px;height:50px}.player-card{padding:10px 7px}.civ-label b{font-size:1rem}.civ-label small{font-size:.58rem}.player-card .crest{width:38px;height:28px}}
@media(max-width:639px){.market{grid-template-columns:1fr}.market-card .card-art{aspect-ratio:384/170}.market-card .card-controls{grid-template-columns:1fr 1fr;align-items:start}.market-card .card-controls button{height:100%;min-height:48px}.market-card-heading h3{font-size:1.4rem}.market-card .card-effect{font-size:.94rem}.card-empty,.review-cards{min-height:235px}.card-hidden{min-height:190px}.manual-gallery,.purchased-grid{grid-template-columns:1fr}.manual-gallery .card-art{aspect-ratio:384/170}.header-nav{gap:6px}.header-nav button{padding:8px;font-size:.75rem}.wordmark b{font-size:.65rem;letter-spacing:.2em}.brand-compass{font-size:1.7rem}.music-controls>span:last-child{width:100%}.animation-controls>span{font-size:.72rem}.turn-identity h1{font-size:1.2rem}.round-medal{padding-right:10px}.turn-identity{gap:10px}.turn-bar{padding:10px}.turn-subtitle{font-size:.74rem}.board-heading{display:block}.board-heading span{display:block;margin-top:3px}.board-stage{height:400px}.dice-models{gap:4px}.die-box{font-size:.68rem}.die-model{width:64px;height:64px}.slot-content{grid-template-columns:38px minmax(0,1fr) 88px;gap:6px}.slot-content .crest{width:36px;height:26px}.setup-fields{grid-template-columns:1fr}.setup-panel{padding:18px 13px}.setup-intro h1{font-size:2.5rem}.painting-caption{padding:14px}.painting-caption strong{font-size:1rem}.painting-caption span{font-size:.63rem}.painting-caption .setup-seals{display:none}.presets button{flex-basis:40%}.setup-library{flex-wrap:wrap;gap:4px}.slot{padding:8px}.card-dialog .card-controls{display:none}dialog{padding:18px;max-width:calc(100% - 18px);width:calc(100% - 18px);max-height:calc(100dvh - 18px)}.dialog-actions{display:grid;grid-template-columns:1fr}.manual-intro{display:block}.manual-intro .crest-large{margin-bottom:15px}.page-footer span:nth-child(2){display:none}.animation-controls{column-gap:8px}.animation-controls button{font-size:.72rem}.animation-controls label{font-size:.74rem}.player-card .text-button{font-size:.77rem}.battalion-count,.wealth-count{font-size:.76rem}.civ-label .crest{width:30px;height:24px}.civ-label{gap:4px}.civ-label b{font-size:.95rem}.civ-label small{font-size:.53rem}.player-points{gap:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@supports(padding:max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}}
/* Mesa E04. Las posiciones de las piezas corresponden a las islas del SVG. */
:root {
  --sea-dark: #163943;
  --sea-panel: #204955;
  --sand: #ffe4a8;
  --edge: #729392;
}

body { background: radial-gradient(ellipse at top, #2d5d65, #152e39 72%); }
button { border-color: #719a98; border-radius: 9px; background: #255260; }
button:hover:enabled { background: #316774; }
button:focus-visible, summary:focus-visible { outline: 3px solid #ffdb83; outline-offset: 2px; }
.gold-button { background: #f4cb76; color: #292517; }
.gold-button:hover:enabled { background: #ffe4a8; }
.masthead {
  position: relative;
  z-index: 10;
  padding-block: 5px;
  gap: 10px;
  background: var(--sea-dark);
  border-color: var(--edge);
}
.wordmark { color: #fff0c8; }
.brand-compass { color: #ffd477; }
.header-nav { flex: 0 1 auto; }
.settings summary, .supremacy-info summary {
  cursor: pointer;
  touch-action: manipulation;
}
.settings summary {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #719a98;
  border-radius: 9px;
  color: #f8efd8;
  background: #255260;
  font-weight: 600;
}
.settings-content {
  position: absolute;
  z-index: 2;
  inset-inline-end: max(8px, env(safe-area-inset-right));
  width: min(500px, calc(100vw - 16px));
  max-height: min(330px, 65dvh);
  overflow: auto;
  margin-top: 5px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--sea-dark);
  box-shadow: 0 12px 34px #06191dbb;
}
.settings-content section {
  padding: 9px 12px;
  background: var(--sea-dark);
  border-color: #4e7477;
}
.settings-content .eyebrow { width: 100%; }
.setup-panel, .framed-panel, .turn-bar, .board-column {
  border: 1px solid var(--edge);
  border-radius: 13px;
  background: var(--sea-dark);
}
.setup-painting { border-radius: 14px; border-color: var(--edge); }
.setup-intro h1 { color: #fff3d6; }
.setup-intro h1 em { color: var(--sand); }
.campaign {
  padding: 10px max(12px, env(safe-area-inset-left)) 20px;
  padding-inline-end: max(12px, env(safe-area-inset-right));
}
.turn-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 7px 12px;
}
.turn-identity { gap: 12px; }
.turn-identity h1 { font-size: clamp(1.2rem, 2.5vw, 1.55rem); }
.round-medal { border-color: #729392; color: #dcece8; }
.round-medal b { color: var(--sand); }
.mode-status {
  margin: 0;
  max-width: 39%;
  padding: 6px 9px;
  border-radius: 6px;
  border-left: 2px solid #edc77b;
  background: #2b5158;
  color: #fff4dc;
  font-size: .77rem;
}
.rotation-hint { display: none; }
.table-layout {
  position: relative;
  grid-template-columns: minmax(146px, .66fr) minmax(320px, 3.25fr) minmax(250px, 1.12fr);
  gap: 10px;
}
.board-column { grid-column: 2; grid-row: 1; }
.command-panel { grid-column: 3; grid-row: 1; }
.civilizations-panel { padding: 7px; }
.player-card {
  padding: 5px 8px;
  margin-bottom: 6px;
  border-radius: 8px;
  border-top-color: #4d6d76;
  border-right-color: #4d6d76;
  border-bottom-color: #4d6d76;
  background: #19333f;
}
.player-card.is-active { background: #28545a; }
.player-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.player-card .text-button { min-height: 31px; padding: 2px 1px; font-size: .74rem; overflow-wrap: anywhere; }
.player-points { margin: 2px 0 1px; }
.player-card .civ-label .crest { width: 32px; height: 24px; }
.player-card .civ-label small { font-size: .56rem; }
.player-card .battalion-count, .player-card .wealth-count { margin: 0; }
.civ-label b { color: #ffedc4; }
.points-track { background: #112a34; border-color: #74948d; }
.board-heading {
  min-height: 34px;
  padding: 5px 10px;
  border: 0;
  border-radius: 13px 13px 0 0;
  background: var(--sea-panel);
}
.board-heading h2 { font-size: 1.08rem; }
.board-heading span { color: #daeae9; }
.visual-area {
  border: 0;
  background: #245765;
}
.board-stage { height: clamp(300px, 31vw, 465px); background: #245765; }
.map-painting { object-fit: fill; opacity: 1; }
.center-halo {
  width: clamp(59px, 14%, 120px);
  height: auto;
  aspect-ratio: 1;
  border: 2px solid #ffedb4;
  background: #f6d07731;
  box-shadow: 0 0 0 5px #ffc96636;
}
.army-bay { color: #fff4db; }
.home-oso { top: 17%; }
.home-ciervo { top: 84%; }
.home-aguila { left: 15%; }
.home-dragon { left: 85%; }
.bay-title {
  flex-direction: row;
  justify-content: center;
  gap: 5px;
  padding: 3px 4px;
  border-radius: 20px;
  background: #153640;
}
.bay-title b { font-family: inherit; font-weight: 700; }
.bay-title .crest { border-radius: 50%; }
.at-center .bay-title { background: #664b27; border-color: #ffde91; }
.army-bay p { border-radius: 8px; background: #16343e; }
.away-label { min-height: 0; }
.dice-models {
  padding: 4px 8px;
  gap: 6px;
  border-color: #729392;
  background: var(--sea-panel);
}
.die-box {
  display: grid;
  grid-template-columns: minmax(42px, 58px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 5px;
  align-content: center;
  font-size: .78rem;
}
.die-model { grid-row: 1 / 3; width: 100%; height: 54px; }
.die-box > span { align-self: end; }
.die-value { align-self: start; }
.graphics-status { padding: 3px 9px; }
.supremacy-info {
  border: 0;
  border-top: 1px solid #5a8485;
  border-radius: 0 0 13px 13px;
  padding: 5px 10px;
  background: var(--sea-dark);
}
.supremacy-info summary { padding: 3px 0; font-weight: 600; }
.supremacy-info p:first-of-type { margin-top: 8px; }
.command-panel { min-width: 0; padding: 9px; }
.command-title h2 { margin: 2px 0 5px; font-size: 1.4rem; }
.command-section { margin-top: 6px; padding: 6px 0 0; border-color: #527476; }
.command-section > p { font-size: .85rem; }
.command-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.command-more { color: #d9ebe9; font-size: .78rem; }
.command-more summary { padding: 7px 3px; cursor: pointer; }
.action-wrap { margin-bottom: 5px; }
.action-button { padding: 7px 9px; }
.action-button[data-command="ROLL"] .action-cost { display: none; }
.action-description { margin-top: 2px; }
.end-section { background: transparent; }
.table-tools, .playback-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.table-tools {
  padding-top: 7px;
  margin-top: 6px;
  border-top: 1px solid #527476;
}
.table-tools button, .playback-actions button { padding: 5px; font-size: .77rem; }
.table-tools button[aria-expanded="true"] { background: #f4cb76; color: #292517; }
.table-tools button span { padding-inline-start: .25em; }
.table-tools .public-purchases { grid-column: 1 / -1; }
#toggle-mandos, #drawer-mandos .drawer-close { display: none; }
.table-drawer {
  position: absolute;
  z-index: 6;
  inset: 0 0 auto auto;
  width: min(900px, 100%);
  max-height: min(660px, calc(100dvh - 124px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid #8db4ac;
  border-radius: 13px;
  background: #153640;
  box-shadow: 0 18px 46px #051719cf;
}
.table-drawer > :is(.roll-result, .log-section, .market-section) { margin-top: 7px; }
.drawer-close { display: block; margin-inline-start: auto; }
.card-empty, .card-hidden, .review-cards { min-height: 160px; }
.card { border-radius: 12px; border-style: solid; border-width: 1px; }
.market { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.review-cards { grid-column: 1 / -1; min-height: 0; }
.review-cards .review-symbol { display: none; }
.review-cards button { width: auto; }
.handoff, .outcome { border-radius: 12px; padding: 10px 14px; }
.purchased-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.purchased-grid:has(> .purchased-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.purchase-owner { padding: 8px 0; }
.purchase-owner h2 { font-size: 1.18rem; }
.purchase-intro { font-size: .82rem; }
.purchased-card {
  display: grid;
  grid-template-columns: clamp(72px, 24%, 132px) minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border-color: #6d9894;
  border-radius: 10px;
  background: #214752;
}
.purchase-thumb {
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: #2e6066;
}
.purchase-thumb .art-missing { display: grid; place-items: center; height: 100%; }
.purchased-card h4 { margin: 4px 0; color: #ffebbd; overflow-wrap: anywhere; }
.purchased-card p { margin-bottom: 4px; font-size: .79rem; }
.purchased-card button { width: auto; padding: 5px 8px; }
.purchase-meta { color: #d2e1e2; }
.purchase-state {
  display: inline-block;
  border-radius: 20px;
  padding: 2px 7px;
  color: #25241a;
  background: #f4d18b;
  font-size: .68rem;
  font-weight: 700;
}
.purchased-card[data-purchase-status="active"] .purchase-state { background: #b8e5a4; }
.purchased-card[data-purchase-status="used"] .purchase-state { background: #c0dce7; }
.flight-feedback {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transform: translate(-50%, -100%);
  padding: 2px 7px;
  border: 1px solid #ffda97;
  border-radius: 20px;
  background: #684223;
  color: #fff5ce;
  font-weight: 800;
  font-size: .8rem;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .table-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr); }
  .board-column { grid-column: 1; grid-row: 1; }
  .command-panel { grid-column: 2; grid-row: 1; }
  #toggle-mandos, #drawer-mandos .drawer-close { display: block; }
  .table-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table-tools .public-purchases { grid-column: span 2; }
  #drawer-mandos {
    position: absolute;
    z-index: 6;
    inset: 0 0 auto auto;
    width: min(660px, 100%);
    max-height: min(460px, calc(100dvh - 115px));
    overflow: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    box-shadow: 0 18px 46px #051719cf;
  }
  #drawer-mandos:not(.drawer-visible) { display: none; }
  #drawer-mandos .drawer-close { grid-column: 1 / -1; }
  #drawer-mandos .text-button { min-height: 44px; }
}

@media (max-width: 920px) and (orientation: landscape) {
  .in-campaign .page-footer { display: none; }
  .masthead { gap: 7px; padding-block: 2px; }
  .masthead .edition { display: none; }
  .masthead .header-nav { margin-left: auto; }
  .masthead .wordmark { font-size: 1rem; line-height: 1.18; gap: 7px; }
  .masthead .brand-compass { font-size: 1.8rem; }
  .masthead .nav-button { padding-inline: 10px; font-size: .83rem; }
  .campaign { padding-block: 5px 2px; }
  .turn-bar { padding: 4px 8px; margin-bottom: 6px; min-height: 49px; }
  .turn-identity { gap: 7px; }
  .turn-identity h1 { font-size: 1.14rem; }
  .round-medal { padding-inline-end: 7px; font-size: .6rem; }
  .round-medal b { font-size: 1.35rem; }
  .turn-subtitle { font-size: .72rem; }
  .mode-status { font-size: .72rem; }
  .table-layout { gap: 7px; grid-template-columns: minmax(0, 1fr) minmax(220px, 31%); }
  .board-column { grid-column: 1; grid-row: 1; }
  .board-heading { min-height: 28px; display: flex; padding: 4px 8px; }
  .board-heading h2 { font-size: .96rem; }
  .board-heading span { margin: 0; }
  .board-stage { height: clamp(164px, calc(100dvh - 198px), 285px); }
  .army-bay { width: clamp(70px, 20%, 100px); font-size: .66rem; line-height: 1.15; }
  .home-oso { top: 16%; }
  .home-ciervo { top: 85%; }
  .bay-title { padding: 1px 4px; }
  .bay-title b { font-size: .75rem; }
  .bay-title .crest { width: 21px; height: 15px; }
  .army-bay p { margin-top: 1px; padding: 1px; }
  .troop-zone { grid-template-columns: repeat(4, 13px); grid-template-rows: repeat(2, 10px); gap: 1px; min-height: 21px; }
  .troop-slot { width: 13px; height: 10px; }
  .troop-slot::before { inset: 3px 1px 1px; }
  .troop-slot::after { top: 2px; width: 7px; height: 3px; }
  .dice-models { padding: 2px 24px; }
  .die-box { grid-template-columns: 42px minmax(0, 1fr); font-size: .69rem; }
  .die-model { height: 40px; }
  .die-fallback { width: 29px; height: 29px; font-size: 1.15rem; }
  .graphics-status, .supremacy-info { font-size: .69rem; padding-block: 1px; }
  .visual-area.has-3d + .graphics-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .supremacy-info { display: none; }
  .supremacy-info summary { padding-block: 2px; }
  .command-panel {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: clamp(224px, calc(100dvh - 124px), 375px);
    padding: 6px;
  }
  .command-title h2 { font-size: 1.16rem; }
  .command-title .eyebrow { font-size: .58rem; }
  #decision-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 3px; }
  .command-section > p, .command-context, .decision-note { font-size: .76rem; }
  .table-tools { gap: 3px; padding-top: 4px; margin-top: 3px; }
  .table-tools button { padding: 2px; font-size: .72rem; }
  .action-description, .action-reason, .card-warning, .preview-values { font-size: .75rem; }
  .handoff { padding: 6px 8px; margin-bottom: 5px; }
  .handoff h2 { margin: 0; font-size: 1.12rem; }
  .handoff p { font-size: .74rem; }
  .handoff button { width: auto; margin: 0; }
  .table-drawer { max-height: calc(100dvh - 108px); }
  dialog { padding: 12px; max-height: calc(100dvh - 16px); }
  .dialog-heading { margin-bottom: 9px; }
  .dialog-heading h1 { font-size: 1.32rem; }
  .purchase-nav { margin-bottom: 7px; padding-bottom: 6px; }
}

@media (max-width: 690px) and (orientation: portrait) {
  .rotation-hint { display: block; margin: 4px 0 8px; color: #ffe2a1; font-size: .78rem; }
  .masthead .header-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; }
  .masthead .settings { margin-left: auto; }
  .turn-bar { align-items: start; flex-direction: column; gap: 5px; }
  .mode-status { max-width: 100%; }
  .table-layout { grid-template-columns: minmax(0, 1fr); }
  .command-panel { grid-column: 1; grid-row: 1; }
  .board-column { grid-column: 1; grid-row: 2; }
  .board-stage { height: clamp(240px, 72vw, 360px); }
  .army-bay { width: clamp(74px, 23%, 105px); }
  .troop-zone { grid-template-columns: repeat(4, 13px); grid-template-rows: repeat(2, 11px); gap: 1px; min-height: 23px; }
  .troop-slot { width: 13px; height: 11px; }
  .dice-models { gap: 2px; padding-inline: 4px; }
  .die-box { grid-template-columns: 33px minmax(0, 1fr); gap: 3px; font-size: .65rem; }
  .die-model { height: 39px; }
  .die-fallback { width: 28px; height: 28px; font-size: 1.1rem; }
  .market, .purchased-grid { grid-template-columns: minmax(0, 1fr); }
}
/* E05. La cabecera y el turno pertenecen a la mesa, a la izquierda. */
:root {
  --sky: #739eb2;
  --sky-soft: #a5c5d3;
  --sea-dark: #174354;
  --sea-panel: #245d70;
  --edge: #83b1bd;
  background: var(--sky);
}

body { min-height: 100dvh; background: radial-gradient(ellipse at 44% 0, var(--sky-soft), var(--sky) 75%); color: #123745; }
.eyebrow { color: #ffe4ae; }
.masthead {
  color: #f9f5eb;
  background: #214e61;
  border-color: #81aab7;
  padding: 4px max(10px, env(safe-area-inset-left));
}
.wordmark { line-height: 1.2; }
.wordmark b { font-size: .67rem; }
.brand-compass { font-size: 1.8rem; }
.site-menu { margin-inline-start: auto; }
.site-menu > summary, .settings summary {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #95b9bc;
  border-radius: 8px;
  background: #2d6574;
  color: #fff2cf;
  cursor: pointer;
  touch-action: manipulation;
  font-weight: 650;
}
.menu-panel {
  position: absolute;
  z-index: 9;
  inset-inline-end: 7px;
  width: min(370px, calc(100vw - 22px));
  max-height: min(470px, 70dvh);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: #194454;
  box-shadow: 0 12px 32px #142f49b0;
}
.menu-panel .header-nav { margin: 0 0 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.menu-panel .nav-button { width: 100%; }
.menu-panel .settings-content {
  position: static;
  width: 100%;
  max-height: none;
  margin-top: 5px;
  box-shadow: none;
}
.menu-panel .settings-content section { color: #f0f5f3; }
.menu-panel .settings-content .music-controls > span:last-child { width: 100%; }
.in-campaign #principal {
  --layout-gap: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(278px, 25%);
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: start;
  gap: var(--layout-gap);
  min-height: calc(100dvh - 3px);
  width: min(100%, 1820px);
  margin: auto;
  padding: 7px max(8px, env(safe-area-inset-left)) 7px max(8px, env(safe-area-inset-right));
}
.in-campaign #screen, .in-campaign .campaign { display: contents; }
.in-campaign .masthead {
  grid-column: 1;
  grid-row: 1;
  padding-inline: 10px;
  border: 1px solid #86aebe;
  border-radius: 10px;
  background: #235165;
}
.in-campaign .site-menu > summary { border-color: #a6c7cd; background: #315e70; }
.in-campaign .turn-bar {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 5px 9px;
  border-color: #93bbca;
  border-radius: 10px;
  background: #356b7e;
  color: #fff6e4;
}
.in-campaign .turn-subtitle, .in-campaign .round-medal { color: #fff4e2; }
.in-campaign .round-medal { border-color: #a6c8d1; }
.map-zone {
  position: relative;
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(177px, 17%) minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-width: 0;
}
.map-zone .civilizations-panel { grid-column: 1; grid-row: 1; }
.map-zone .board-column { grid-column: 2; grid-row: 1; }
.map-zone .board-stage { height: clamp(260px, min(34vw, calc(100dvh - 245px)), 500px); }
.map-zone .board-heading, .map-zone .graphics-status, .map-zone .supremacy-info, .map-zone .die-box { color: #f5f4e8; }
.map-zone .dice-models { padding-inline: 26px; }
.map-zone .player-card { color: #f5f4e8; line-height: 1.28; }
.player-stock { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.player-stock :is(.battalion-count,.wealth-count) { font-size: .73rem; white-space: nowrap; }
.player-purchases { color: #ffe9b3; }
.in-campaign .command-panel {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: stretch;
  height: auto;
  min-height: min(520px, calc(100dvh - 14px));
  max-height: calc(100dvh - 14px);
  overflow: hidden;
  padding: 9px;
  border-color: #7da9b5;
  background: #19475b;
  color: #f4f8ee;
}
.command-panel > .mode-status {
  max-width: none;
  padding: 5px 7px;
  margin: 0 0 7px;
  background: #2d6072;
  border-color: #b8dce0;
}
.command-panel > :is(.mode-status, .command-title, .table-tools) { flex: 0 0 auto; }
.command-panel #decision-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.command-panel .command-title h2 { font-size: 1.43rem; }
.command-panel .command-more { font-size: .84rem; }
.command-panel .command-more summary { min-height: 44px; padding: 10px 3px; }
.command-panel .table-tools { margin-top: auto; border-color: #7aa8a0; }
.command-panel .handoff, .command-panel .outcome {
  display: block;
  margin: 0 0 8px;
  padding: 8px;
  font-size: .83rem;
}
.command-panel .handoff h2, .command-panel .outcome h2 { font-size: 1.2rem; }
.command-panel .handoff button { margin-top: 5px; width: 100%; }
.command-panel .outcome-actions { margin-top: 6px; }
.table-drawer { color: #e9f4f3; }
.in-campaign .page-footer { display: none; }
.page-footer { color: #214957; border-color: #89aab5; }
.setup {
  width: min(1200px, 100%);
  grid-template-columns: minmax(190px, .7fr) minmax(550px, 1.3fr);
  gap: 18px;
  padding: 16px max(12px, env(safe-area-inset-left));
  align-items: start;
}
.setup-intro { min-width: 0; align-self: center; }
.setup-intro h1 { margin: 5px 0 12px; color: #19495f; font-size: clamp(2rem, 4vw, 3.3rem); }
.setup-intro h1 em { color: #214f62; }
.setup-intro > .eyebrow { color: #25546a; }
.setup-painting { margin-top: 10px; }
.setup-panel { min-width: 0; padding: 12px; color: #f0f8f8; box-shadow: 0 8px 18px #32627733; }
.setup-panel h2 { font-size: 1.55rem; margin: 0 0 7px; }
.setup-fields { display: grid; grid-template-columns: 70px minmax(125px, .9fr) minmax(0, 1.5fr); gap: 6px; align-items: end; }
.seed-tools { display: grid; grid-template-columns: minmax(80px,1fr) auto auto; gap: 4px; align-items: end; }
.seed-tools button { padding: 5px 7px; font-size: .79rem; }
.setup .field { gap: 1px; font-size: .8rem; }
.setup input, .setup select { min-width: 0; width: 100%; }
.setup input { font-variant-numeric: tabular-nums; }
.setup .slots { margin: 6px 0; gap: 3px; }
.setup .slot { border-radius: 7px; padding: 0 4px; background: #235569; }
.setup .slot-content {
  grid-template-columns: 22px 30px minmax(0, 1fr) 92px auto;
  gap: 4px;
}
.setup .slot .crest { width: 30px; height: 24px; }
.seat-index { font-size: .88rem; font-weight: 700; text-align: center; color: #ffe2a5; }
.seat-moves { display: flex; gap: 2px; }
.seat-moves button { min-width: 44px; padding: 4px; font-size: .95rem; }
.order-tools { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.order-tools p { margin: 0; font-size: .83rem; color: #fff2cf; }
.order-tools button { flex: 0 0 auto; padding: 5px 8px; font-size: .82rem; }
.setup-submit { margin: 5px 0 0; }
.seed-status { margin: 2px 0 0; font-size: .8rem; }
.setup-panel :is(.seed-status, .field-error):empty { display: none; }
.map-weather {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .9;
}
.map-weather .cloud { animation: cloud-drift 11s ease-in-out infinite alternate; }
.map-weather .cloud:nth-child(2) { animation-duration: 14s; animation-direction: alternate-reverse; }
.map-weather .wave { animation: wave-drift 3s ease-in-out infinite alternate; }
@keyframes cloud-drift { to { transform: translateX(19px); } }
@keyframes wave-drift { to { transform: translateX(6px); opacity: .53; } }
.card-art .card-glyph, .purchase-thumb .card-glyph { transform-box: fill-box; transform-origin: center; }
.market-card:is(:hover,:focus-within) .card-glyph,
.purchased-card:is(:hover,:focus-within) .card-glyph { animation: card-bob .55s ease-out both; }
@keyframes card-bob { 45% { transform: translateY(-4px) rotate(-2deg); } }
.motion-reduced :is(.map-weather .cloud, .map-weather .wave, .card-glyph) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.map-weather .cloud, .map-weather .wave, .card-glyph) { animation: none !important; }
}

@media (min-width: 1101px) and (max-height: 690px) {
  .map-zone .player-card { padding: 4px 6px; margin-bottom: 4px; }
  .map-zone .player-points strong { font-size: 1.28rem; }
  .map-zone .player-card .text-button { min-height: 28px; }
}
@media (max-width: 1100px) {
  .in-campaign #principal { grid-template-columns: minmax(0, 1fr) minmax(250px, 33%); }
  .map-zone { grid-template-columns: minmax(0, 1fr); }
  .map-zone .board-column { grid-column: 1; }
  .setup { grid-template-columns: minmax(170px, .45fr) minmax(0,1.55fr); }
}
@media (max-width: 920px) and (orientation: landscape) {
  .page-footer { display: none; }
  .in-campaign #principal { --layout-gap: 4px; grid-template-columns: minmax(0, 1fr) minmax(214px, 32%); padding-block: 5px; }
  .in-campaign .masthead { padding: 2px 7px; }
  .in-campaign .turn-bar { min-height: 0; padding: 3px 7px; }
  .in-campaign .turn-subtitle { font-size: .67rem; }
  .map-zone .board-stage { height: clamp(167px, calc(100dvh - 195px), 330px); }
  .map-zone .dice-models { padding-inline: 15px; }
  .in-campaign .command-panel { padding: 6px; min-height: calc(100dvh - 10px); max-height: calc(100dvh - 10px); }
  .command-panel .command-title h2 { font-size: 1.17rem; }
  .command-panel > .mode-status { font-size: .73rem; margin-bottom: 4px; }
  .command-panel .command-more, .command-panel .command-section > p, .command-panel .command-context { font-size: .8rem; }
  .command-panel .table-tools button { font-size: .75rem; }
  .setup { display: block; padding-block: 6px; }
  .setup-intro { display: none; }
  .setup-panel { padding: 7px; }
  .setup-panel h2 { font-size: 1.22rem; margin-bottom: 4px; }
  .setup .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .setup .slot-content { grid-template-columns: 17px 25px minmax(0,1fr) 83px auto; gap: 3px; }
  .setup .slot .crest { width: 25px; height: 21px; }
  .setup .slot select { padding-inline: 4px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .in-campaign #principal { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5,auto); }
  .in-campaign .rotation-hint { display: block; grid-column: 1; grid-row: 3; color: #214957; margin: 0; }
  .in-campaign .command-panel { grid-column: 1; grid-row: 4; min-height: 0; max-height: none; }
  .map-zone { grid-row: 5; }
  .map-zone .board-stage { height: clamp(238px, 72vw, 390px); }
  .setup { display: block; padding-block: 8px; }
  .setup-intro { display: none; }
  .setup-fields { grid-template-columns: 75px minmax(0,1fr); }
  .seed-tools { grid-column: 1 / -1; }
}
@media (max-width: 720px) and (orientation: landscape) {
  .setup .slot .crest { display: none; }
  .setup .slot-content { grid-template-columns: 17px minmax(0, 1fr) 83px auto; }
}

/* Mesa E07. El tablero comparte el lado izquierdo con mandos y consultas. */
body { height: 100dvh; min-height: 0; overflow: hidden; }
#principal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body:not(.in-campaign) #screen { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.page-footer { display: none; }
.in-campaign #principal {
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.map-zone {
  grid-template-columns: minmax(184px, 17%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: stretch;
  align-items: stretch;
  min-height: 0;
}
.map-zone #drawer-mandos {
  display: block;
  position: static;
  inset: auto;
  width: auto;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.map-zone .board-column {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}
.map-zone .visual-area {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}
.map-zone .board-stage {
  min-height: 0;
  height: auto;
  background: #39849f url("../recursos/arte/mapa-mesa.svg") center / 100% 100% no-repeat;
}
.setup-painting {
  aspect-ratio: 2 / 1;
  background: #39849f url("../recursos/arte/mapa-mesa.svg") center / 100% 100% no-repeat;
}
.setup-painting img { height: 100%; object-fit: cover; }

.setup-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.setup-heading button { padding: 4px 9px; font-size: .8rem; }
.guide-steps { display: grid; gap: .55rem; padding-inline-start: 1.4rem; line-height: 1.4; }
.guide-steps strong, .boost-ready { color: #f4d892; }
#guide-dialog { max-width: min(740px, calc(100% - 18px)); }
#save-status, #load-status { min-height: 1.25em; }
.map-weather { opacity: .4; }
.map-zone .table-tools {
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border: 0;
}
.map-zone .table-tools button { font-size: .85rem; background: #225567; }
.map-zone .table-tools button[aria-expanded="true"] { background: #f4cb76; color: #292517; }
.map-zone .table-drawer { max-height: 100%; }
.in-campaign .command-panel {
  display: block;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}
.command-panel #decision-body { overflow: visible; padding-inline: 0; }
.command-panel > .mode-status.sr-only { margin: -1px; padding: 0; border: 0; }
.stock-symbol { display: none; }
.controller-short { display: none; }
.public-cards {
  display: flex;
  gap: 4px;
  margin: 2px 0 0;
  padding: 3px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.public-card-thumb {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  min-height: 44px;
  padding: 3px;
  text-align: left;
  scroll-snap-align: start;
}
.public-card-thumb > span:last-child { min-width: 0; }
.public-card-thumb b { display: block; font-size: .68rem; line-height: 1.12; overflow-wrap: anywhere; }
.public-card-thumb small { display: block; margin-top: 2px; color: #ffdc9d; font-size: .63rem; line-height: 1.12; }
.public-card-thumb[data-purchase-status="active"] small { color: #d9f4ab; }
.public-card-thumb[data-purchase-status="used"] small { color: #d0e9ef; }
.public-card-thumb .card-painting { height: 30px; border-radius: 4px; }
.card-painting {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.card-painting .painted-card { position: absolute; inset: 0; overflow: hidden; transition: transform .45s ease-out; }
.market-card:is(:hover,:focus-within) .painted-card,
.public-card-thumb:is(:hover,:focus-visible) .painted-card { transform: scale(1.035); }
.motion-reduced .painted-card { transition: none; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .painted-card { transition: none !important; transform: none !important; }
}
.purchase-context { color: #f1d59d; font-size: .85rem; margin-bottom: 8px; }

@media (min-width: 1101px) and (max-height: 690px) {
  .map-zone #drawer-mandos { padding: 5px; }
  .map-zone .player-card { padding: 3px 6px; }
  .map-zone .player-points { margin: 1px 0; }
  .map-zone .player-points strong { font-size: 1.18rem; }
}
@media (max-width: 1100px) {
  .map-zone { grid-template-columns: minmax(108px, 22%) minmax(0, 1fr); gap: 5px; }
  .map-zone #drawer-mandos { padding: 4px; box-shadow: none; }
  .map-zone .player-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 3px;
    padding: 3px;
    margin-bottom: 3px;
    line-height: 1.12;
  }
  .map-zone .civ-label { grid-column: 1 / -1; gap: 3px; flex-wrap: nowrap; }
  .map-zone .civ-label > span { min-width: 0; }
  .map-zone .civ-label b { font-size: .83rem; }
  .map-zone .civ-label small { font-size: .52rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-zone .player-card .civ-label .crest { width: 19px; height: 14px; }
  .map-zone .player-points { gap: 2px; margin: 2px 0 0; font-size: .59rem; white-space: nowrap; }
  .map-zone .player-points strong { font-size: .85rem; }
  .map-zone .points-track { display: none; }
  .map-zone .player-stock { gap: 0 3px; margin-top: 2px; align-items: center; }
  .map-zone .player-stock p { font-size: .59rem; }
  .map-zone .stock-symbol { display: inline; }
  .map-zone .stock-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .map-zone .public-card-thumb { grid-template-columns: 24px minmax(0, 1fr); gap: 2px; }
  .map-zone .public-cards { grid-column: 1 / -1; }
  .map-zone .public-card-thumb .card-painting { height: 25px; }
  .map-zone .public-card-thumb b { font-size: .59rem; }
  .map-zone .public-card-thumb small { font-size: .56rem; }
}
@media (max-width: 920px) and (orientation: landscape) {
  .map-zone .board-heading span { display: none; }
  .map-zone .board-heading { min-height: 25px; }
  .map-zone .dice-models { padding: 1px 14px; }
  .map-zone .die-model { height: 36px; }
  .map-zone .die-box { grid-template-columns: 31px minmax(0, 1fr); column-gap: 2px; }
  .map-zone .army-bay { width: clamp(63px, 20%, 98px); font-size: .63rem; line-height: 1.08; }
  .map-zone .home-oso { top: 16.5%; }
  .map-zone .home-ciervo { top: 83.5%; }
  .map-zone .bay-title { padding: 0 3px; gap: 3px; }
  .map-zone .bay-title .crest { height: 13px; width: 18px; }
  .map-zone .bay-title b { font-size: .7rem; }
  .map-zone .army-bay p { margin: 0; padding: 0 1px; font-size: .6rem; }
  .map-zone .troop-zone { grid-template-columns: repeat(4, 11px); grid-template-rows: repeat(2, 7px); min-height: 15px; }
  .map-zone .troop-slot { width: 11px; height: 7px; }
  .map-zone .table-tools button { padding: 3px; font-size: .78rem; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .in-campaign #principal { grid-template-rows: auto auto auto minmax(122px, 26%) minmax(0, 1fr); }
  .in-campaign .command-panel { grid-row: 4; grid-column: 1; }
  .map-zone { grid-row: 5; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .map-zone #drawer-mandos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    height: auto;
    max-height: 112px;
  }
  .map-zone .player-card { margin: 0; }
  .map-zone .board-column { grid-row: 2; grid-column: 1; }
  .map-zone .table-tools { grid-row: 3; }
}
@media (max-width: 720px) and (orientation: landscape) {
  .map-zone { grid-template-columns: minmax(112px, 23%) minmax(0, 1fr); }
  .map-zone .player-card { grid-template-columns: minmax(0, 1fr); padding-block: 2px; }
  .map-zone .civ-label > span { display: flex; align-items: baseline; gap: 3px; }
  .map-zone .civ-label b { line-height: 1.1; }
  .controller-full { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  .controller-short { display: inline; }
  .map-zone .player-stock { flex-wrap: nowrap; gap: 0 5px; margin-top: 0; }
  .map-zone .player-stock p { font-size: .63rem; line-height: 1.04; }
  .map-zone .player-points { font-size: .61rem; margin: 0; }
  .map-zone .player-points strong { font-size: .8rem; }
  .map-zone .dice-models { gap: 3px; padding-inline: 8px; }
  .map-zone .die-box { grid-template-columns: 27px minmax(0, 1fr); font-size: .65rem; }
  .map-zone .die-box > span { white-space: nowrap; }
  .map-zone .die-model { height: 34px; }
}
@media (max-height: 339px), (max-width: 339px) {
  .in-campaign #principal { overflow: auto; grid-template-rows: auto auto auto minmax(140px, auto) minmax(258px, auto); }
  .in-campaign .map-zone { min-height: 258px; }
}
@media (max-width: 339px) {
  .setup .slot .crest { display: none; }
  .setup .slot-content { grid-template-columns: 18px minmax(0, 1fr) 82px; }
  .setup .seat-moves { grid-column: 2 / -1; justify-self: end; }
}

/* En horizontal, las fichas base conservan su altura cuando llegan compras. */
@media (min-height: 340px) and (max-width: 920px) and (orientation: landscape) {
  .map-zone { grid-template-columns: minmax(124px, 22%) minmax(0, 1fr); }
  .map-zone #drawer-mandos {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 3px 4px;
    overflow: hidden;
  }
  .map-zone .player-card {
    flex: 0 0 auto;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px;
    padding: 2px 3px;
    margin: 0;
  }
  .map-zone .player-card:has(.public-cards) {
    flex-shrink: 1;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 35px;
  }
  .map-zone .civ-label > span { display: flex; align-items: baseline; gap: 4px; }
  .map-zone .civ-label b { line-height: 1.1; }
  .controller-full {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .controller-short { display: inline; }
  .map-zone .player-points {
    margin: 0;
    font-size: .58rem;
    line-height: 1;
  }
  .map-zone .player-points strong { font-size: .78rem; line-height: 1; }
  .map-zone .player-stock {
    flex-wrap: nowrap;
    gap: 0 3px;
    margin: 0;
  }
  .map-zone .player-stock p { font-size: .58rem; line-height: 1; }
  .map-zone .public-cards {
    min-height: 0;
    margin: 0;
    padding: 2px;
    align-items: flex-start;
  }
}

/* Las tres ofertas usan el espacio de la ventana y se leen de una vez. */
.map-zone #drawer-ofertas {
  position: fixed;
  inset: 8px;
  z-index: 10;
  width: min(1000px, calc(100% - 16px));
  height: fit-content;
  max-height: none;
  margin: auto;
  padding: clamp(6px, 1.5vw, 14px);
  overflow: visible;
}
.offers-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.offers-heading h2, #card-detail-title { margin: 0; font-size: clamp(1.08rem, 2.8vw, 1.5rem); }
.offers-heading .drawer-close { flex: none; padding: 3px 9px; font-size: .78rem; }
.offers-drawer .market { gap: 6px; }
.offers-drawer .market-card { padding: clamp(5px, 1.25vw, 12px); gap: 6px; }
.offers-drawer .market-card-heading { display: block; margin: 0; }
.offers-drawer .market-card-heading h3 { margin: 0; font-size: clamp(.9rem, 2vw, 1.24rem); line-height: 1.12; }
.offers-drawer .card-art { height: clamp(50px, 23dvh, 165px); aspect-ratio: auto; margin: 0; }
.offers-drawer .card-effect { margin: 0; font-size: clamp(.75rem, 1.6vw, .92rem); line-height: 1.3; }
.offers-drawer .card-controls { display: block; }
.offers-drawer .offer-buy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 4px 7px;
  font-size: clamp(.68rem, 1.5vw, .84rem);
}
.offers-drawer .card-empty { min-height: clamp(70px, 30dvh, 160px); }
.offers-drawer .card-empty h3 { margin: 0; font-size: 1rem; }

#card-dialog {
  width: min(420px, calc(100% - 16px));
  max-height: none;
  padding: clamp(8px, 2vw, 14px);
  overflow: visible;
}
#card-dialog .dialog-heading { align-items: center; margin-bottom: 6px; }
#card-dialog .card-art { height: clamp(56px, 27dvh, 172px); aspect-ratio: auto; margin: 0 0 6px; }
#card-dialog :is(.card-effect, .purchase-context) { margin: 4px 0; font-size: .86rem; line-height: 1.35; }
#card-dialog .inspector-preview { margin: 4px 0 0; padding: 6px; }
#card-dialog .inspector-preview button { margin-top: 4px; width: 100%; }

/* Las compras se pasan con un botón; su estado sigue junto al mando. */
.map-zone #drawer-mandos { overflow: clip; }
.map-zone .public-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  overflow: visible;
}
.map-zone .public-cards:has(.purchase-next) { grid-template-columns: minmax(0, 1fr) auto; }
.map-zone .public-card-thumb { min-width: 0; }
.map-zone .purchase-next { align-self: stretch; min-width: 0; min-height: 0; padding: 1px 3px; font-size: .65rem; white-space: nowrap; }
@media (max-height: 690px) {
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .player-card { padding-block: 2px; margin-bottom: 3px; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .player-stock p { margin-block: 1px; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .public-card-thumb { min-height: 20px; padding: 1px 2px; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .public-card-thumb .card-painting { height: 16px; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .public-card-thumb > span:last-child { display: flex; gap: 3px; align-items: center; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .public-card-thumb b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .public-card-thumb small { margin: 0; }
}
@media (max-width: 920px) and (orientation: landscape) {
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .player-card { padding-block: 1px; margin-bottom: 0; row-gap: 1px; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .civ-label .crest { height: 12px; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .civ-label b { font-size: .75rem; line-height: 1; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .player-stock p { margin-block: 0; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .public-card-thumb { min-height: 18px; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .public-card-thumb .card-painting { height: 14px; }
  #drawer-mandos:has(.has-purchases ~ .has-purchases) .public-card-thumb b { display: none; }
  .map-zone .player-card:has(.public-cards) { flex-shrink: 0; grid-template-rows: auto auto auto; }
}
@media (max-width: 520px) and (orientation: portrait) {
  .offers-drawer .market { grid-template-columns: 1fr; }
  .offers-drawer .market-card {
    display: grid;
    grid-template-columns: minmax(65px, 27%) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 3px 8px;
  }
  .offers-drawer .card-art { grid-column: 1; grid-row: 1 / 4; height: 100%; min-height: 0; }
  .offers-drawer :is(.market-card-heading, .card-effect, .card-controls) { grid-column: 2; }
  .offers-drawer .offer-buy { min-height: 38px; }
  .map-zone .public-cards { gap: 2px; }
  .map-zone .public-card-thumb { grid-template-columns: minmax(13px, 24px) minmax(0, 1fr); padding: 1px; gap: 2px; }
  .map-zone .public-cards:has(.purchase-next) .public-card-thumb b { display: none; }
}
@media (max-height: 350px) and (orientation: landscape) {
  .offers-drawer .card-art { height: 18dvh; }
  .offers-drawer :is(.offer-buy, .drawer-close) { min-height: 38px; }
}