*{box-sizing:border-box}body{margin:0;background:#100f0c;color:#e8dcc1;font:15px Georgia,serif}button,a{touch-action:manipulation}button{font:inherit;color:inherit;background:#302618;border:1px solid #886a3b;border-radius:5px;padding:8px;cursor:pointer}button:disabled{cursor:default;opacity:.8}a{color:#e1bd79}header{height:54px;display:flex;justify-content:space-between;align-items:center;padding:8px 20px;border-bottom:1px solid #6a522e}main{height:calc(100dvh - 54px);display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;padding:12px}.table{min-height:0;display:grid;grid-template-rows:1fr 24px 1fr 100px;gap:6px}.field{min-height:0;background:#282017;border:1px solid #695333;border-radius:8px;padding:6px;overflow:auto}.field-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.field-title button{padding:4px}.zones{display:grid;grid-template-columns:.8fr .8fr 2fr 1.5fr;gap:5px}.zone{min-width:0;border:1px solid #55452f;padding:4px}.zone b{font-size:11px;display:block}.cards{display:flex;gap:4px;align-items:center;overflow-x:auto;min-height:54px}.card{flex:none;width:42px;padding:0;border:1px solid #9b7941;overflow:hidden}.card img{display:block;width:100%;height:auto}.pile{width:64px;height:53px;padding:2px;display:flex;align-items:center;gap:2px}.pile img{width:25px}.pile span{font-size:9px}.castle{background:#711e27}.supplies{background:#e7e1d5;color:#221d15}.vault{background:#245638}.empty{font-size:11px;color:#9d917c}.neutral{text-align:center;font-size:12px;padding:4px}.hand{display:flex;gap:8px;align-items:center;overflow:auto;background:#201b13;padding:6px}.hand .card{width:57px}.hand>b{font-size:12px;max-width:60px}.ready{outline:2px solid #f5c86b;box-shadow:0 0 10px #dda83955}.selected{outline:3px solid #83d8a7}.tapped{display:block;transform:rotate(90deg);margin:10px}aside{overflow:auto;padding:16px;background:#211c14;border:1px solid #705531;border-radius:8px}h1{font-size:24px;line-height:1.25}aside p{line-height:1.5}.choices{display:flex;flex-wrap:wrap;gap:10px}.choices .card{width:70px}.demo{font-size:12px;color:#baad96}#progress{color:#d5aa61;font-size:12px}#actions{margin:20px 0}#feedback{color:#ffd18c}dialog{background:#211a12;color:#eee0c5;max-width:550px;max-height:90dvh;border:1px solid #bd934a}dialog img{max-height:55dvh;max-width:100%;display:block;margin:auto}dialog::backdrop{background:#000b}button:focus-visible,a:focus-visible{outline:3px solid white}@media(max-width:850px){header strong{display:none}main{grid-template-columns:1fr;grid-template-rows:minmax(320px,1fr) 200px;padding:5px;gap:5px}aside{padding:10px}aside h1{font-size:18px;margin:8px 0}.table{grid-template-rows:1fr 18px 1fr 65px}.hand .card{width:36px}.card{width:27px}.cards{min-height:38px}.pile{height:36px;width:45px}.pile img{width:17px}.pile span{font-size:8px}.field-title{font-size:11px}.field-title button{font-size:10px}.zone b{font-size:9px}.choices .card{width:45px}.neutral{font-size:10px}.zones{gap:2px}.field{padding:3px}.demo{font-size:11px}}
/* Board positions match the physical playmat. */
.zones{grid-template-columns:minmax(45px,.8fr) minmax(50px,.9fr) minmax(100px,2fr) minmax(70px,1.4fr);grid-template-rows:repeat(3,minmax(0,1fr))}
.zone[data-zone="Cementerio"]{grid-column:1;grid-row:2}
.zone[data-zone="Estructuras"]{grid-column:2;grid-row:1}
.zone[data-zone="Vanguardia"]{grid-column:3;grid-row:1}
.zone[data-zone="Pagados"]{grid-column:4;grid-row:1}
.zone[data-zone="Castillo"]{grid-column:2;grid-row:2}
.zone[data-zone="Retaguardia"]{grid-column:3;grid-row:2}
.zone[data-zone="Mazo de Suministros"]{grid-column:4;grid-row:2}
.zone[data-zone="Bóveda"]{grid-column:2;grid-row:3}
.zone[data-zone="Desarrollo"]{grid-column:3;grid-row:3}
.zone[data-zone="Pasivos · disponibles"]{grid-column:4;grid-row:3}
.field{display:flex;flex-direction:column;overflow:hidden}.zones{flex:1;min-height:0}.zone{overflow:hidden}.cards{height:calc(100% - 14px);min-height:0}.cards .card{width:auto;height:100%;max-height:64px;aspect-ratio:816/1110}.cards .card img{height:100%;width:100%;object-fit:contain}.cards .pile{height:100%;max-height:53px;min-height:20px}.tapped{height:70%;margin:4px}.selected{height:100%;display:block}.field-title{flex:none;margin-bottom:4px}
@media(max-width:850px){.zones{grid-template-columns:minmax(32px,.7fr) minmax(42px,.9fr) minmax(78px,2fr) minmax(58px,1.4fr)}.zone b{font-size:8px;line-height:10px}.cards{height:calc(100% - 10px)}.pile img{max-height:100%;object-fit:contain}.pile span{font-size:7px}}
.economic-preview{position:fixed;z-index:100;right:330px;top:65px;max-height:calc(100dvh - 80px);width:min(540px,calc(100vw - 345px));padding:14px;background:#211a12;border:1px solid #e1bb74;border-radius:10px;box-shadow:0 12px 50px #000c;display:flex;gap:16px;align-items:flex-start;overflow:auto;pointer-events:none}.economic-preview[hidden]{display:none}.economic-preview>img{width:57%;max-height:calc(100dvh - 115px);object-fit:contain}.economic-preview>div{flex:1;min-width:0}.economic-preview h2{font-size:22px;margin:8px 0}.economic-preview p{font-size:17px;line-height:1.5}.economic-confirm{display:block;width:100%;padding:14px;margin-top:20px;background:#496136;border-color:#b3d180;font-weight:bold}.choice-help{font-size:13px;color:#d8c5a2}#detail-body p{line-height:1.6;font-size:18px}#detail-body .economic-confirm:focus-visible{outline:3px solid white}@media(max-width:850px){.economic-preview{display:none}#detail{width:95vw}#detail-body>img{max-height:50dvh}#detail-body h2{font-size:22px}}
.full-card{position:relative;display:inline-flex;height:100%;flex:none}.full-card .card{height:100%;width:auto;aspect-ratio:816/1110}.hand .full-card{height:85px}.choices .full-card{height:110px}.damage{position:absolute;bottom:0;left:0;background:#7d1d17;color:#fff;font:bold 10px sans-serif;padding:2px;pointer-events:none}.stack-count{font-size:9px;color:#e4bc72}.tutorial-navigation{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.tutorial-navigation select{max-width:100%;background:#312719;color:#eddfc5;padding:5px}.cards>span{height:100%;flex:none}.tapped .full-card{max-height:100%}@media(max-width:850px){.hand .full-card{height:52px}.choices .full-card{height:85px}.tutorial-navigation{flex-direction:row;font-size:11px}.tutorial-navigation button{font-size:11px}.full-card .damage{font-size:8px}}
/* Rival viewed from the opposite side; labels and card art stay upright. */
#opponent .zones{grid-template-columns:minmax(70px,1.4fr) minmax(100px,2fr) minmax(50px,.9fr) minmax(45px,.8fr)}
#opponent .zone[data-zone="Cementerio"]{grid-column:4;grid-row:2}
#opponent .zone[data-zone="Estructuras"]{grid-column:3;grid-row:3}
#opponent .zone[data-zone="Vanguardia"]{grid-column:2;grid-row:3}
#opponent .zone[data-zone="Pagados"]{grid-column:1;grid-row:3}
#opponent .zone[data-zone="Castillo"]{grid-column:3;grid-row:2}
#opponent .zone[data-zone="Retaguardia"]{grid-column:2;grid-row:2}
#opponent .zone[data-zone="Mazo de Suministros"]{grid-column:1;grid-row:2}
#opponent .zone[data-zone="Bóveda"]{grid-column:3;grid-row:1}
#opponent .zone[data-zone="Desarrollo"]{grid-column:2;grid-row:1}
#opponent .zone[data-zone="Pasivos · disponibles"]{grid-column:1;grid-row:1}
.next-click{animation:guide-pulse 1.8s ease-in-out infinite;outline:3px solid #ffe19b!important;outline-offset:1px}
.click-guide{position:fixed;z-index:90;pointer-events:none;padding:5px 9px;background:#ffe19b;color:#251909;border-radius:5px;font:bold 12px system-ui;box-shadow:0 2px 12px #0009;white-space:nowrap}
.click-guide[hidden]{display:none}
@keyframes guide-pulse{50%{box-shadow:0 0 0 5px #ffd26766,0 0 20px #ffd267aa}}
@media(prefers-reduced-motion:reduce){.next-click{animation:none}}
#instruction{font-family:system-ui,sans-serif;font-size:15px;line-height:1.6}#actions>button{width:100%;padding:12px}#feedback:empty{display:none}
@media(max-width:850px){#opponent .zones{grid-template-columns:minmax(58px,1.4fr) minmax(78px,2fr) minmax(42px,.9fr) minmax(32px,.7fr)}#instruction{font-size:13px}.click-guide{font-size:11px}}
/* Carved wood, aged brass and heraldic card backs. */
body{background:radial-gradient(ellipse at top,#352719 0,#14110d 65%);color:#eee0c6}
header{background:linear-gradient(#322619,#19140e);border-bottom:2px solid #987345;box-shadow:0 3px 18px #0008}header strong{letter-spacing:.16em;color:#edca89;font-size:14px}
.field{background:radial-gradient(ellipse at center,#342d21,#211c15);border:1px solid #a08048;border-radius:3px;box-shadow:inset 0 0 0 3px #17130d,inset 0 0 30px #0005,0 3px 8px #0007;padding:8px}
#opponent{background:radial-gradient(ellipse at center,#352c22,#231913)}#player{background:radial-gradient(ellipse at center,#2a302c,#161e1c)}
.field-title{color:#efd398;letter-spacing:.035em;padding:2px 3px 6px}.field-title button{background:#1e1811;border-color:#957747;color:#f0d19a}
.zone{border:1px solid #92734755;background:linear-gradient(135deg,#ffffff03,#00000022);border-radius:3px;padding:5px}.zone>b{color:#ceb98d;font-weight:normal;letter-spacing:.025em}.empty{color:#a4937466;font-style:italic}
.neutral{color:#bc9760;letter-spacing:.08em;background:linear-gradient(90deg,transparent,#58402155,transparent)}
aside{background:linear-gradient(135deg,#372a1c,#221a12);border:1px solid #b18a4f;border-radius:3px;box-shadow:inset 0 0 0 4px #17120e,0 4px 20px #0006}aside h1{color:#f4d69d;text-shadow:0 2px 2px #0008}#progress{border-bottom:1px solid #a9844844;display:block;padding-bottom:10px;letter-spacing:.03em}
button{background:linear-gradient(#4c3923,#2a1f14);border-color:#a0814d;box-shadow:inset 0 1px #e8c88322;transition:filter .2s}button:hover:not(:disabled){filter:brightness(1.18)}
.hand{border:1px solid #735a36;border-radius:3px;background:linear-gradient(#292117,#17130e);box-shadow:inset 0 4px 14px #0005}.hand>b{color:#d7b87e}.card{border-radius:4px}
.cards .pile{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:none;width:auto;aspect-ratio:816/1110;height:calc(100% - 6px);max-height:90px;min-height:0;padding:3px;margin:2px 5px 4px 2px;border:2px solid #bc9858;border-radius:5px;box-shadow:2px 2px 0 #332818,3px 3px 0 #b49a65,5px 5px 0 #312517;overflow:hidden;opacity:1}
.cards .pile::before{content:'';position:absolute;inset:3px;border:1px solid #d7b87688;border-radius:2px;pointer-events:none}.cards .pile.castle{background:repeating-linear-gradient(45deg,#0000 0 5px,#0001 5px 6px),radial-gradient(#963e37,#41181d);color:#ffe5b7}.cards .pile.supplies{background:repeating-linear-gradient(45deg,#0000 0 5px,#70522b0b 5px 6px),radial-gradient(#f8f0dc,#c2af89);color:#453019}.cards .pile.vault{background:repeating-linear-gradient(45deg,#0000 0 5px,#0001 5px 6px),radial-gradient(#466e52,#152f24);color:#f3dcad}
.cards .pile img{width:58%;height:48%;object-fit:contain;z-index:1}.cards .pile .deck-name{font-size:8px;line-height:1.1;text-align:center;z-index:1}.cards .pile .deck-count{font-size:10px;font-weight:bold;z-index:1}.cards .pile .deck-ornament{font-size:7px;line-height:1;color:#cfad6e}
.rival-status{color:#efc989;font-size:16px;margin-bottom:12px}.rival-controls{display:flex;gap:16px;align-items:center}.rival-controls label{font-size:12px}.rival-controls select{background:#282016;color:#ead5b0;border:1px solid #967345;padding:6px}.rival-help{font-size:12px;color:#c3b393}.rival-moving{border-color:#e8ac58;background:radial-gradient(ellipse,#aa703433,#0001);box-shadow:inset 0 0 18px #d5973922}.rival-turn #opponent .field-title{color:#ffd289}
@media(max-width:850px){.field{padding:4px}.field-title{padding-bottom:2px}.zone{padding:3px}.cards .pile{border-width:1px;padding:2px;max-height:65px}.cards .pile .deck-name{font-size:6px}.cards .pile .deck-count{font-size:8px}.cards .pile .deck-ornament{display:none}.rival-status{font-size:13px}.rival-help{font-size:11px}}