:root { --gold:#f3c45c; --cream:#fff0bd; --dark:#100905; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:#090604; font-family:Arial,sans-serif; color:#fff; }
button { font:inherit; }
#app,.table-screen { width:100%; height:100%; }
.table-screen {
  position:relative; overflow:hidden; isolation:isolate;
  background-image:linear-gradient(180deg,rgba(0,0,0,.4),rgba(20,8,1,.08) 42%,rgba(0,0,0,.58)),url("../assets/tables/mesa-desafio-05.webp");
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.table-screen::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center,transparent 20%,rgba(0,0,0,.52) 100%); }
.game-hud { position:absolute; z-index:20; inset:0 0 auto; height:72px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(243,196,92,.35); background:linear-gradient(180deg,rgba(8,5,2,.94),rgba(8,5,2,.58)); box-shadow:0 8px 22px rgba(0,0,0,.35); }
.back-button { position:absolute; left:16px; width:48px; height:48px; padding:0; border:0; background:transparent; cursor:pointer; filter:drop-shadow(0 5px 8px #000); }
.back-button img { width:100%; height:100%; object-fit:contain; }
.game-brand { display:grid; place-items:center; line-height:1; text-shadow:0 3px 6px #000; }
.game-brand small { color:#dcae4d; font-size:9px; letter-spacing:.28em; }
.game-brand strong { color:var(--cream); font-family:Georgia,serif; font-size:28px; letter-spacing:.16em; }
.battle-number { position:absolute; right:18px; min-width:52px; display:grid; place-items:center; color:var(--gold); }
.battle-number small { font-size:8px; letter-spacing:.18em; }
.battle-number strong { font-size:22px; }
.player-panel { position:absolute; z-index:15; left:50%; transform:translateX(-50%); width:min(390px,70vw); min-height:66px; display:grid; grid-template-columns:58px 1fr 62px; align-items:center; gap:10px; padding:6px 12px; border:1px solid rgba(243,196,92,.5); border-radius:14px; background:linear-gradient(90deg,rgba(12,7,3,.94),rgba(35,18,6,.78),rgba(12,7,3,.94)); box-shadow:0 8px 18px rgba(0,0,0,.48),inset 0 0 18px rgba(243,196,92,.05); }
.player-panel--rival { top:82px; }
.player-panel--human { bottom:68px; }
.player-avatar { width:52px; height:52px; overflow:hidden; border:2px solid var(--gold); border-radius:50%; background:#1b0d05; box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 15px rgba(243,196,92,.22); }
.player-avatar img { width:100%; height:100%; object-fit:cover; object-position:center 16%; transform:scale(1.2); }
.player-info { min-width:0; display:grid; }
.player-info small,.player-wars small { color:#cda64f; font-size:8px; letter-spacing:.18em; }
.player-info strong { overflow:hidden; color:var(--cream); font-family:Georgia,serif; font-size:16px; letter-spacing:.06em; text-overflow:ellipsis; white-space:nowrap; }
.player-info span { color:#fff; font-size:11px; font-weight:800; }
.player-wars { display:grid; place-items:center; padding-left:8px; border-left:1px solid rgba(243,196,92,.24); }
.player-wars b { color:var(--gold); font-size:21px; }
.battle-zone { position:absolute; inset:150px 0 140px; }
.deck,.battle-card { position:absolute; width:clamp(78px,8vw,112px); aspect-ratio:2/3; }
.deck { z-index:4; filter:drop-shadow(0 10px 9px rgba(0,0,0,.7)); }
.deck--ai { left:clamp(18px,10vw,150px); top:18%; }
.deck--player { right:clamp(18px,10vw,150px); bottom:18%; }
.deck img { position:absolute; inset:0; z-index:4; width:100%; height:100%; border:3px solid #e9dac0; border-radius:8px; object-fit:cover; }
.deck-shadow { position:absolute; inset:0; border-radius:8px; background:#efe3c9; border:1px solid #332117; }
.deck-shadow--1 { transform:translate(4px,4px); }.deck-shadow--2 { transform:translate(7px,7px); }.deck-shadow--3 { transform:translate(10px,10px); }
.deck b { position:absolute; z-index:8; left:50%; bottom:-16px; transform:translateX(-50%); min-width:34px; padding:3px 8px; border-radius:10px; color:var(--cream); background:#130a04; border:1px solid var(--gold); font-size:12px; text-align:center; }
.battle-card { z-index:8; left:50%; transform:translateX(-50%); perspective:1000px; }
.battle-card--ai { top:4%; }
.battle-card--player { bottom:4%; }
.card-slot { position:absolute; inset:0; border:2px dashed rgba(255,230,163,.24); border-radius:10px; background:rgba(0,0,0,.13); box-shadow:inset 0 0 24px rgba(0,0,0,.35); }
.flip-card,.flip-card-inner { width:100%; height:100%; }
.flip-card-inner { position:relative; transform-style:preserve-3d; transition:transform 520ms cubic-bezier(.16,.82,.22,1); }
.battle-card.is-revealed .flip-card-inner { transform:rotateY(180deg); }
.flip-card-face { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; backface-visibility:hidden; filter:drop-shadow(0 10px 9px rgba(0,0,0,.75)); }
.flip-card-front { transform:rotateY(180deg); }
.battle-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:12px; }
.battle-line { width:clamp(36px,7vw,120px); height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.battle-line:last-child { transform:scaleX(-1); }
.vs-badge { width:70px; height:70px; display:grid; place-items:center; border:2px solid var(--gold); border-radius:50%; background:radial-gradient(circle,#512911,#130904 68%); color:var(--gold); font-family:Georgia,serif; font-size:24px; font-weight:900; text-shadow:0 3px 5px #000; box-shadow:0 0 25px rgba(243,196,92,.32),inset 0 0 16px #000; }
.is-war .vs-badge { width:108px; border-radius:16px; color:#fff1b1; font-size:18px; animation:warPulse .65s ease infinite alternate; }
.battle-message { position:absolute; z-index:14; left:50%; bottom:143px; transform:translateX(-50%); width:min(440px,70vw); padding:7px 14px; color:var(--cream); background:rgba(10,5,2,.76); border-top:1px solid rgba(243,196,92,.35); border-bottom:1px solid rgba(243,196,92,.35); font-size:13px; font-weight:800; text-align:center; text-shadow:0 2px 4px #000; }
.game-actions { position:absolute; z-index:20; inset:auto 0 0; height:58px; display:grid; place-items:center; background:linear-gradient(0deg,rgba(5,3,1,.98),rgba(5,3,1,.55)); }
.battle-button,.result-overlay button { min-width:210px; height:42px; border:1px solid #f5d77c; border-radius:9px; color:#241300; background:linear-gradient(180deg,#f5d477,#b97a16); box-shadow:0 4px 0 #5b3007,0 0 18px rgba(243,196,92,.25); font-size:18px; font-weight:900; letter-spacing:.12em; cursor:pointer; }
.battle-button:disabled { filter:grayscale(.65); opacity:.62; cursor:default; }
.is-collecting .battle-card { z-index:30; pointer-events:none; }
.is-animating .battle-card.has-card { opacity:0; }
.flip-card::before,
.flip-card::after { content:""; position:absolute; z-index:8; left:50%; top:50%; pointer-events:none; opacity:0; }
.flip-card::before { width:150%; aspect-ratio:1; transform:translate(-50%,-50%) scale(.25); border-radius:50%; background:radial-gradient(circle,rgba(255,244,181,.95) 0,rgba(255,191,54,.38) 28%,transparent 70%); mix-blend-mode:screen; }
.flip-card::after { width:180%; height:4px; transform:translate(-50%,-50%) rotate(-8deg) scaleX(.15); background:linear-gradient(90deg,transparent,#fff4b5 30%,#ffbd35 50%,#fff4b5 70%,transparent); box-shadow:0 0 12px #ffc643; }
.battle-card.is-revealed .flip-card::before { animation:cardPowerBurst 620ms cubic-bezier(.16,.82,.22,1) both; }
.battle-card.is-revealed .flip-card::after { animation:cardPowerSlash 520ms 90ms ease-out both; }
.battle-card.is-revealed .flip-card-front { animation:cardFaceImpact 720ms ease-out both; }
.deck.is-winning-deck::before { content:""; position:absolute; z-index:20; left:50%; top:50%; width:190%; aspect-ratio:1; transform:translate(-50%,-50%) scale(.2); border-radius:50%; background:radial-gradient(circle,rgba(255,244,174,.95),rgba(255,181,36,.35) 32%,transparent 70%); opacity:0; pointer-events:none; animation:deckReceiveBurst 650ms 460ms ease-out both; }
.deck.is-winning-deck img { animation:winnerDeckGlow 680ms 430ms ease-out both; }
@keyframes cardPowerBurst { 0%{opacity:0;transform:translate(-50%,-50%) scale(.18)} 35%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) scale(1)} }
@keyframes cardPowerSlash { 0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scaleX(.1)} 35%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scaleX(1)} }
@keyframes cardFaceImpact { 0%{filter:brightness(1)} 24%{filter:brightness(1.9) drop-shadow(0 0 14px rgba(255,218,99,.95))} 100%{filter:brightness(1) drop-shadow(0 7px 7px rgba(0,0,0,.65))} }
@keyframes deckReceiveBurst { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)} }
@keyframes winnerDeckGlow { 0%{filter:brightness(1)} 35%{filter:brightness(1.65) drop-shadow(0 0 15px #ffd568)} 100%{filter:brightness(1) drop-shadow(0 5px 4px rgba(0,0,0,.48))} }
.result-overlay { position:absolute; z-index:50; inset:0; display:grid; place-items:center; background:rgba(5,2,0,.76); backdrop-filter:blur(5px); }
.result-overlay section { width:min(380px,88vw); padding:28px; border:1px solid var(--gold); border-radius:18px; background:linear-gradient(160deg,#311708,#0f0703); box-shadow:0 20px 60px #000; text-align:center; }
.result-overlay small { color:#d5a94c; letter-spacing:.22em; }.result-overlay h2 { margin:6px 0; color:var(--cream); font:900 38px Georgia,serif; }.result-overlay p { color:var(--gold); font-size:24px; font-weight:900; }
@keyframes warPulse { to { transform:scale(1.08); box-shadow:0 0 36px rgba(255,198,60,.68),inset 0 0 16px #000; } }
@media (max-width:700px) {
  .game-hud { height:58px; }.game-brand strong { font-size:21px; }.back-button { left:8px; width:42px; height:42px; }.battle-number { right:10px; }
  .player-panel { width:calc(100% - 24px); min-height:56px; grid-template-columns:46px 1fr 54px; padding:5px 9px; }.player-panel--rival { top:66px; }.player-panel--human { bottom:60px; }
  .player-avatar { width:43px; height:43px; }.player-info strong { font-size:14px; }.player-wars b { font-size:17px; }
  .battle-zone { inset:126px 0 118px; }.deck,.battle-card { width:clamp(65px,21vw,88px); }.deck--ai { left:12px; top:13%; }.deck--player { right:12px; bottom:13%; }
  .battle-card--ai { top:2%; }.battle-card--player { bottom:2%; }.vs-badge { width:54px; height:54px; font-size:18px; }.battle-line { width:25px; }
  .battle-message { bottom:119px; width:calc(100% - 24px); padding:5px 10px; font-size:11px; }.game-actions { height:52px; }.battle-button { min-width:180px; height:38px; font-size:16px; }
}
@media (max-height:680px) and (orientation:landscape) {
  .player-panel { width:240px; }.player-panel--rival { left:150px; top:68px; }.player-panel--human { left:auto; right:20px; bottom:64px; transform:none; }.battle-zone { inset:65px 0 56px; }
  .battle-card--ai,.battle-card--player { top:50%; bottom:auto; transform:translate(-50%,-50%); }.battle-card--ai { margin-left:-70px; }.battle-card--player { margin-left:70px; }.battle-center { top:50%; }.deck--ai { top:50%; transform:translateY(-50%); }.deck--player { bottom:auto; top:50%; transform:translateY(-50%); }.battle-message { bottom:58px; }
}
@media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
.reduce-game-motion .table-screen * { animation-duration:.01ms !important; transition-duration:.01ms !important; }

/* Intro compartida Pucará */
.intro-screen { position:relative; width:100%; height:100%; overflow:hidden; display:grid; place-items:center; background:#030201; cursor:pointer; }
.intro-bg { position:absolute; inset:0; background:radial-gradient(circle at 50% 45%,#38200e 0,rgba(24,12,4,.74) 28%,#020100 72%); }
.intro-bg::after { content:""; position:absolute; inset:0; opacity:.22; background:url("../assets/backgrounds/start.webp") center/cover; filter:sepia(1); }
.intro-stage { position:relative; width:min(1040px,98vw); height:460px; display:grid; place-items:center; }
.intro-logo { position:absolute; object-fit:contain; filter:drop-shadow(0 14px 22px #000); }
.intro-pucara { width:min(960px,98vw); max-height:430px; animation:pucaraHero 2.7s cubic-bezier(.16,.82,.22,1) forwards; }
.intro-screen>small { position:absolute; bottom:28px; color:rgba(255,232,170,.64); font-size:9px; letter-spacing:.25em; animation:softBlink 1.3s ease infinite alternate; }
.intro-exit { animation:introExit .52s ease forwards; }
@keyframes introOne { 0%{opacity:0;transform:scale(.72)} 25%,62%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.08)} }
@keyframes pucaraHero { 0%{opacity:0;transform:scale(.68)} 28%{opacity:1;transform:scale(1.03)} 45%,100%{opacity:1;transform:scale(1)} }
@keyframes introExit { to{opacity:0;transform:scale(1.03)} }
@keyframes softBlink { to{opacity:.25} }

/* Start de GUERRA */
.start-screen { position:relative; width:100%; height:100%; overflow:hidden; background:url("../assets/backgrounds/start.webp") center/cover no-repeat; }
.start-screen__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(12,5,1,.32) 48%,rgba(0,0,0,.7)),linear-gradient(0deg,rgba(0,0,0,.78),transparent 55%); }
.start-top { position:absolute; z-index:5; top:0; left:0; right:0; height:62px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(243,196,92,.28); background:rgba(5,3,1,.58); color:#dbb45e; font-size:10px; letter-spacing:.28em; }
.start-top button { position:absolute; left:14px; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
.start-top img { width:100%; height:100%; object-fit:contain; }
.start-content { position:relative; z-index:2; width:min(1080px,100%); height:100%; margin:auto; display:grid; grid-template-columns:1fr .9fr; align-items:center; padding:72px 6vw 55px; }
.start-title { align-self:center; text-align:center; text-shadow:0 6px 12px #000; }
.start-game-art { display:block; width:min(620px,53vw); max-height:48vh; margin:auto; object-fit:contain; border-radius:18px; filter:drop-shadow(0 16px 24px #000); }
.start-title p { margin:14px 0; color:#e4c77d; font:italic 18px Georgia,serif; }
.start-character { position:relative; justify-self:center; width:min(330px,34vw); height:min(470px,66vh); display:grid; place-items:center; }
.start-character::after { content:""; position:absolute; z-index:-1; inset:16% 8% 2%; border-radius:50%; background:radial-gradient(ellipse,rgba(243,196,92,.2),transparent 68%); }
.start-character img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 18px #000); }
.start-character button { position:absolute; z-index:3; top:48%; width:40px; height:58px; border:1px solid rgba(243,196,92,.55); border-radius:9px; color:#f6d77a; background:rgba(15,7,2,.72); font-size:34px; cursor:pointer; }
.start-character [data-prev] { left:-22px; }.start-character [data-next] { right:-22px; }
.start-character strong { position:absolute; bottom:3px; padding:5px 12px; color:#ffe9a5; border-radius:12px; background:rgba(0,0,0,.72); font-size:10px; letter-spacing:.18em; }
.start-menu { position:absolute; z-index:5; left:6vw; bottom:70px; width:min(440px,44vw); display:grid; gap:8px; }
.start-menu button { position:relative; overflow:hidden; height:58px; padding:0; border:1px solid rgba(245,215,124,.8); border-radius:10px; color:#fff0bd; background:linear-gradient(180deg,rgba(92,47,13,.96),rgba(32,14,4,.98)); box-shadow:0 5px 0 #130802,0 8px 20px rgba(0,0,0,.48); font-weight:900; letter-spacing:.1em; cursor:pointer; }
.start-menu button img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; }
.start-menu button span { position:relative; z-index:2; text-shadow:0 2px 4px #000; }
.start-menu .start-main { height:68px; color:#241300; background:linear-gradient(#f4d574,#ad6f12); font-size:24px; text-shadow:none; }
.start-menu .start-main img { opacity:.18; }
.start-menu>div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.start-menu>div button { font-size:10px; }
.start-footer { position:absolute; z-index:4; bottom:0; left:0; right:0; height:38px; display:grid; place-items:center; color:#a98a49; background:rgba(5,3,1,.82); border-top:1px solid rgba(243,196,92,.18); font-size:8px; letter-spacing:.25em; }
.settings-panel { position:absolute; z-index:50; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }.settings-panel[hidden]{display:none}.settings-panel section { position:relative; width:min(380px,88vw); padding:28px; border:1px solid #efc75d; border-radius:16px; background:linear-gradient(145deg,#321708,#0d0502); box-shadow:0 20px 50px #000; }.settings-panel h2 { margin:4px 0 20px; color:#ffe8a0; }.settings-panel>section>small { color:#c79d43; letter-spacing:.2em; }.settings-panel label { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(243,196,92,.18); }.settings-panel p { color:#bcae91; font-size:12px; }.settings-close { position:absolute; right:12px; top:10px; border:0; color:#ffe4a1; background:transparent; font-size:28px; cursor:pointer; }
@media(max-width:700px){
  .start-content { display:block; padding:62px 12px 50px; }.start-title { padding-top:8px; }.start-game-art { width:min(94vw,560px); max-height:28vh; border-radius:10px; }.start-title p { margin:4px; font-size:12px; }
  .start-character { width:220px; height:45vh; margin:auto; }.start-character button { width:34px; height:48px; }.start-character [data-prev]{left:-28px}.start-character [data-next]{right:-28px}
  .start-menu { left:12px; bottom:47px; width:calc(100% - 24px); }.start-menu .start-main { height:52px; font-size:19px; }.start-menu button { height:42px; }.start-footer { height:32px; }
}

/* Configuración completa de GUERRA */
.settings-overlay { position:absolute; z-index:100; inset:0; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.82); backdrop-filter:blur(7px); }
.settings-overlay[hidden],.legal-view[hidden],[data-settings-main][hidden] { display:none !important; }
.full-settings { width:min(760px,96vw); max-height:min(780px,94vh); overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr) auto; border:1px solid #e2b84f; border-radius:18px; background:linear-gradient(145deg,#321709,#0c0502 70%); box-shadow:0 24px 80px #000,inset 0 0 40px rgba(225,167,45,.06); }
.full-settings>header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(243,196,92,.28); background:rgba(0,0,0,.28); }
.full-settings>header small { color:#c69a3c; font-size:9px; letter-spacing:.25em; }.full-settings h2 { margin:2px 0 0; color:#ffeab0; font:900 24px Georgia,serif; }.full-settings>header button { width:40px; height:40px; border:1px solid rgba(243,196,92,.45); border-radius:50%; color:#ffe7a4; background:#1c0c04; font-size:27px; cursor:pointer; }
.settings-scroll { overflow:auto; padding:6px 20px 22px; scrollbar-color:#b78025 #160a04; }.settings-scroll h3 { margin:19px 0 8px; color:#d9aa45; font-size:10px; letter-spacing:.2em; }.setting-block { padding:12px; border:1px solid rgba(243,196,92,.16); border-radius:12px; background:rgba(0,0,0,.2); }.setting-block+ .setting-block { margin-top:9px; }.setting-block>b { display:block; margin-bottom:9px; color:#f7e2a3; font-size:12px; }
.settings-backs,.settings-tables { display:flex; flex-wrap:wrap; gap:9px; }.settings-backs button,.settings-tables button { position:relative; overflow:hidden; padding:3px; border:2px solid transparent; border-radius:8px; background:#140a05; cursor:pointer; }.settings-backs button { width:62px; height:86px; }.settings-tables button { width:105px; height:64px; }.settings-backs img,.settings-tables img { width:100%; height:100%; border-radius:5px; object-fit:cover; }.settings-backs span,.settings-tables span { position:absolute; right:4px; bottom:3px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; color:#fff0bd; background:rgba(0,0,0,.78); font-size:9px; }.settings-backs .is-selected,.settings-tables .is-selected { border-color:#ffd66c; box-shadow:0 0 14px rgba(255,205,76,.45); }
.settings-options { overflow:hidden; border:1px solid rgba(243,196,92,.16); border-radius:12px; background:rgba(0,0,0,.2); }.toggle-row,.volume-row { min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 13px; border-bottom:1px solid rgba(243,196,92,.11); color:#f5e1aa; font-size:13px; }.toggle-row:last-child { border-bottom:0; }.toggle-row button { width:72px; height:30px; display:flex; align-items:center; justify-content:space-between; padding:3px 7px 3px 4px; border:1px solid #72501e; border-radius:18px; color:#a89673; background:#21130c; cursor:pointer; }.toggle-row button i { width:22px; height:22px; border-radius:50%; background:#8d7d62; transition:.2s; }.toggle-row button b { font-size:9px; }.toggle-row button[aria-checked="true"] { color:#1c1003; background:#dca63d; border-color:#ffe18a; }.toggle-row button[aria-checked="true"] i { order:2; background:#fff3c7; box-shadow:0 0 8px #fff0a5; }.volume-row input { flex:1; accent-color:#dca63d; }.volume-row output { min-width:38px; color:#f0c75e; font-weight:800; text-align:right; }
.language-row,.legal-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.language-row button,.legal-row button { min-height:40px; border:1px solid rgba(243,196,92,.3); border-radius:8px; color:#e7cc88; background:rgba(0,0,0,.28); font-size:10px; font-weight:800; cursor:pointer; }.language-row button.is-selected { color:#241400; background:linear-gradient(#f2d375,#b67819); border-color:#ffe597; }
.full-settings>footer { padding:11px 20px; border-top:1px solid rgba(243,196,92,.22); text-align:right; }.full-settings>footer button { min-width:130px; height:38px; border:1px solid #f0cd6e; border-radius:8px; color:#211100; background:linear-gradient(#f3d578,#b97917); font-weight:900; cursor:pointer; }
.legal-view { min-height:420px; display:grid; grid-template-rows:auto 1fr; padding:12px 18px 18px; }.legal-view>button { justify-self:start; margin-bottom:9px; border:0; color:#f0c75e; background:transparent; font-weight:800; cursor:pointer; }.legal-view iframe { width:100%; height:100%; min-height:360px; border:1px solid rgba(243,196,92,.3); border-radius:8px; background:#f3ead8; }
@media(max-width:600px){.settings-overlay{padding:6px}.full-settings{width:100%;max-height:97vh;border-radius:12px}.full-settings>header{padding:11px 14px}.full-settings h2{font-size:19px}.settings-scroll{padding:4px 12px 18px}.settings-tables button{width:calc(33.33% - 7px);height:55px}.language-row,.legal-row{grid-template-columns:1fr}.toggle-row,.volume-row{min-height:46px}.volume-row{flex-wrap:wrap}.volume-row input{min-width:150px}.legal-view{min-height:65vh}}

/* Perspectiva y encuadre de la mesa */
.battle-zone {
  left: 50%;
  right: auto;
  width: min(920px, 100%);
  transform: translateX(-50%);
  perspective: 1050px;
  transform-style: preserve-3d;
}
.battle-zone::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(78vw, 720px);
  height: 82%;
  transform: translate(-50%, -50%) rotateX(56deg);
  border: 1px solid rgba(226, 177, 75, .2);
  border-radius: 50%;
  box-shadow: inset 0 0 55px rgba(0,0,0,.18), 0 0 28px rgba(0,0,0,.16);
  pointer-events: none;
}
.deck img,
.deck-shadow {
  transform-origin: center;
}
.deck--ai img { transform: perspective(700px) rotateX(48deg) rotateZ(-3deg) scale(.94); filter:drop-shadow(0 5px 4px rgba(0,0,0,.48)); }
.deck--player img { transform: perspective(700px) rotateX(48deg) rotateZ(3deg) scale(1); filter:drop-shadow(0 5px 4px rgba(0,0,0,.48)); }
.deck--ai .deck-shadow--1 { transform:translate(4px,4px) perspective(700px) rotateX(48deg) rotateZ(-3deg) scale(.94); }
.deck--ai .deck-shadow--2 { transform:translate(7px,7px) perspective(700px) rotateX(48deg) rotateZ(-3deg) scale(.94); }
.deck--ai .deck-shadow--3 { transform:translate(10px,10px) perspective(700px) rotateX(48deg) rotateZ(-3deg) scale(.94); }
.deck--player .deck-shadow--1 { transform:translate(4px,4px) perspective(700px) rotateX(48deg) rotateZ(3deg); }
.deck--player .deck-shadow--2 { transform:translate(7px,7px) perspective(700px) rotateX(48deg) rotateZ(3deg); }
.deck--player .deck-shadow--3 { transform:translate(10px,10px) perspective(700px) rotateX(48deg) rotateZ(3deg); }
.battle-card--ai .flip-card,
.battle-card--ai .card-slot { transform: perspective(800px) rotateX(46deg) rotateZ(-1deg) scale(.94); }
.battle-card--player .flip-card,
.battle-card--player .card-slot { transform: perspective(800px) rotateX(46deg) rotateZ(1deg) scale(1); }
@media (max-width: 700px) and (orientation: portrait) {
  .battle-zone { width: 100%; }
  .deck,
  .battle-card { width: clamp(58px, min(20vw, 12.5vh), 84px); }
  .deck--ai { left: 10px; top: 23%; }
  .deck--player { right: 10px; bottom: 23%; }
  .battle-card--ai { top: 18%; }
  .battle-card--player { bottom: 18%; }
  .battle-zone::before { width: 82vw; height: 78%; }
}

@media (max-height: 680px) and (orientation: landscape) {
  .battle-zone { width: min(720px, 72vw); }
  .deck,
  .battle-card { width: clamp(58px, 10vh, 76px); }
  .battle-zone::before { width: 74%; height: 130%; transform: translate(-50%,-50%) rotateX(68deg); }
}

/* El mazo rival debe apoyar en la tela, delante del respaldo de la mesa. */
@media (max-width: 700px) and (orientation: portrait) {
  .deck--ai { top: 32%; }
  .battle-card--ai { top: 27%; }
}