/* Duelo de Éter: estilos. Base de botones, hojas y pantallas de Héroes de Éter; mesa propia (franjas, formación, cartas
   con insignias de coste y efecto, reverso neutro) y animaciones (giro, vuelo, daño en torres, runas, partículas). */
:root {
  --bg: #17112e; --panel: #231a47; --panel2: #30245f; --line: rgba(255,215,106,.22); --text: #f5f1ff; --muted: #bdb3e6;
  --gold: #ffd76a; --accent: #ffd76a; --accent-text: #3a2600; --mint: #47d96b; --mint2: #22a84a; --sky: #4cb8ff; --sky2: #2a7fd0; --danger: #ff5a5a;
  --font: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --display: 'Cinzel', Georgia, serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --glass: rgba(22,16,52,.86); --hud-glass: rgba(20,14,46,.72); --hud-line: rgba(255,215,106,.2);
  --zw: 300px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overflow: hidden; }
#app { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation;
  background: radial-gradient(ellipse at 50% 40%, rgba(70,50,140,.55), rgba(18,15,38,.2) 60%), linear-gradient(rgba(14,10,32,.78), rgba(14,10,32,.86)), var(--bg); }
body.at-title #app { background: linear-gradient(180deg, rgba(14,10,32,.35), rgba(14,10,32,.55) 45%, rgba(14,10,32,.92)), var(--bg); }
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; padding: 0; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
a { color: var(--gold); }
input, select { font-family: inherit; }
.good { color: #8ff0a4; } .bad { color: #ff9a9a; }

/* ---------- botones ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: .45em 1.2em; border-radius: 17px; font-size: 1.08rem; font-weight: 700; letter-spacing: .01em; color: var(--accent-text); text-decoration: none;
  background: linear-gradient(180deg, #fff1b0, var(--gold) 55%, #e6a92a); box-shadow: 0 5px 0 #9a6a10, 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.6); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #9a6a10, inset 0 2px 0 rgba(255,255,255,.6); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
.btn small { font-size: .62em; font-weight: 600; opacity: .85; letter-spacing: 0; margin-top: .15em; }
.btn.mint { color: #06301a; background: linear-gradient(180deg, #b9ffc9, var(--mint) 55%, var(--mint2)); box-shadow: 0 5px 0 #157233, 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.mint:active { box-shadow: 0 1px 0 #157233, inset 0 2px 0 rgba(255,255,255,.6); }
.btn.sky { color: #04263d; background: linear-gradient(180deg, #c8f0ff, var(--sky) 55%, var(--sky2)); box-shadow: 0 5px 0 #1d5a93, 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.sky:active { box-shadow: 0 1px 0 #1d5a93, inset 0 2px 0 rgba(255,255,255,.6); }
.btn.red { color: #fff; background: linear-gradient(180deg, #ff9a7a, #f0503c 55%, #c22a1e); box-shadow: 0 5px 0 #7a160e, 0 10px 22px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.45); text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.btn.red:active { box-shadow: 0 1px 0 #7a160e, inset 0 2px 0 rgba(255,255,255,.45); }
.btn.ghost { color: var(--text); background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:active { transform: translateY(2px); }
.btn.big { min-height: 58px; font-size: 1.25rem; padding: .4em 1.3em; border-radius: 20px; }
.btn.small { min-height: 44px; font-size: .92rem; padding: .3em .85em; border-radius: 13px; box-shadow: 0 3px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5); }
.btn.small.ghost { box-shadow: inset 0 0 0 2px var(--line); }
.btn[disabled], .btn.dim { filter: grayscale(.75) brightness(.75); }
.btn[disabled] { pointer-events: none; }
.icon-btn { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: var(--text); background: var(--glass); box-shadow: inset 0 0 0 2px var(--hud-line), 0 4px 12px rgba(0,0,0,.25); flex: none; }
.icon-btn svg { width: 25px; height: 25px; }
.icon-btn:active { transform: scale(.94); }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.row.two > .btn { flex: 1 1 0; min-width: 0; padding: .4em .7em; }
/* el final: «Menú» y «Compartir» a media anchura; en 360 px «Compartilhar» (pt) no cabía con el relleno normal */
.end-p .row.two > .btn { padding-left: .4em; padding-right: .4em; gap: .35em; font-size: clamp(.92rem, 4.4vw, 1.08rem); }
.col { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.x { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: rgba(255,255,255,.08); flex: none; }
.x svg { width: 18px; height: 18px; }
.spin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--gold); animation: spin .8s linear infinite; vertical-align: -2px; margin-right: .4em; }
@keyframes spin { to { transform: rotate(360deg); } }
.pn { color: var(--pc); filter: brightness(1.2); }
.pn.me { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.cn { color: #fff2c4; }
.tag, .need { font-style: normal; font-size: .82em; font-weight: 600; padding: .05em .5em; border-radius: 99px; background: rgba(255,215,106,.18); color: var(--gold); white-space: nowrap; }

/* ---------- efectos ---------- */
#fx { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.flyer { position: fixed; z-index: 36; pointer-events: none; }
.flyer > .cd { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: spark .8s ease-out both; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 37; pointer-events: none; white-space: nowrap; animation: banner 1.5s cubic-bezier(.2,.9,.3,1) both; }
.banner span { display: block; padding: .25em .9em; border-radius: 18px; font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 7vw, 2.8rem); color: #fff; background: rgba(20,14,46,.88); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.3); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.banner.gold span { color: #3a2600; background: linear-gradient(180deg, #fff1b0, var(--gold) 60%, #e6a92a); }
.banner.red span { background: linear-gradient(180deg, #ff8a6a, #d93a28); }
@keyframes banner { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -60%) scale(1); opacity: 0; } }
.conf { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: conf 3s linear both; }
@keyframes conf { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }

/* ---------- avisos, red y registro ---------- */
#toasts { position: absolute; z-index: 60; left: 50%; top: calc(64px + var(--safe-t)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(92vw, 440px); pointer-events: none; }
.toast { padding: 9px 16px; border-radius: 14px; background: rgba(20,14,46,.95); box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1.5px var(--hud-line); font-size: .95rem; text-align: center; animation: in .25s ease-out both; }
.toast.red { box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 2px #ff5a5a; }
.toast.gold { box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 2px var(--gold); }
.toast.dim { opacity: .9; }
.toast.out { animation: out .3s ease-in both; }
/* ---------- pantallas ---------- */
#screens { position: absolute; inset: 0; pointer-events: none; z-index: 55; }
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; animation: in .25s ease-out both; padding: calc(14px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l)); }
.screen.out { animation: out .2s ease-in both; pointer-events: none; }
@keyframes in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes out { to { opacity: 0; transform: scale(.98); } }
@keyframes fade { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.overlay { justify-content: center; background: rgba(8,5,22,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.card { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 20px 18px; border-radius: 26px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 0 0 2px var(--line), 0 20px 50px rgba(0,0,0,.5); text-align: center; display: flex; flex-direction: column; gap: 12px; }
.card h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 1.8rem; line-height: 1.1; color: var(--gold); text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.sub { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.3; }
.sub.small { font-size: .85rem; }
.sub.big { font-size: 1.12rem; color: var(--text); }
.card.scroll { max-height: min(90vh, 760px); }

/* portada */
.title-screen { justify-content: space-between; gap: 8px; }
.logo { text-align: center; margin-top: calc(2vh + 44px); flex: none; }
.logo .lg { display: inline-block; text-wrap: balance; font-family: var(--display); font-weight: 900; font-size: clamp(2.6rem, 12.5vw, 5.4rem); line-height: .95; color: #ffe08a; -webkit-text-stroke: 2px #5a2f00; paint-order: stroke fill; text-shadow: 0 4px 0 #5a2f00, 0 0 30px rgba(255,190,80,.55), 0 12px 24px rgba(0,0,0,.5); letter-spacing: .01em; }
.logo p { margin: .55em auto 0; display: inline-block; padding: .3em .95em; border-radius: 99px; background: rgba(20,14,46,.82); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 600; font-size: 1rem; }
.title-fan { position: relative; flex: 1 1 auto; min-height: 0; width: min(560px, 100%); display: flex; justify-content: center; align-items: center; pointer-events: none; }
.title-fan .cd { --w: clamp(70px, min(22vw, 16vh), 150px); position: absolute; transform-origin: 50% 130%; animation: tfan 1s cubic-bezier(.2,.9,.3,1) both; }
.tf0 { transform: translateX(-62%) rotate(-24deg); animation-delay: .05s !important; } .tf1 { transform: translateX(-32%) rotate(-12deg); animation-delay: .12s !important; }
.tf2 { transform: translateY(-6%) rotate(0deg); z-index: 3; animation-delay: .19s !important; } .tf3 { transform: translateX(32%) rotate(12deg); animation-delay: .26s !important; } .tf4 { transform: translateX(62%) rotate(24deg); animation-delay: .33s !important; }
@keyframes tfan { from { opacity: 0; transform: translateY(40%) rotate(0deg) scale(.7); } }
.title-bottom { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: min(390px, 100%); flex: none; }
.title-bottom .btn.big { justify-content: flex-start; }
.portal-link { position: absolute; z-index: 2; left: calc(10px + var(--safe-l)); top: calc(8px + var(--safe-t)); display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 99px; background: var(--glass); color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.portal-link svg { width: 28px; height: 28px; }

/* hojas inferiores */
.sheet-wrap { position: fixed; inset: 0; z-index: 58; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.sheet-wrap.modal { pointer-events: auto; background: rgba(8,5,22,.5); animation: fade .2s both; }
.sheet-wrap.out, .sheet-wrap.out .sheet, .zoom-wrap.out, .zoom-wrap.out * { animation: fadeout .2s both; pointer-events: none; }
.sheet { pointer-events: auto; width: min(500px, 100%); max-height: min(90%, calc(100% - var(--safe-t) - 8px)); overflow: auto; border-radius: 24px 24px 0 0; padding: 14px 16px max(calc(16px + var(--safe-b)), calc(var(--cookie-b, 0px) + 8px)); background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 -10px 40px rgba(0,0,0,.45), inset 0 0 0 2px var(--line); animation: up .25s cubic-bezier(.2,.9,.3,1.05) both; }
.sheet header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sheet header h3 { flex: 1; margin: 0; font-size: 1.3rem; min-width: 0; }
.sheet-body { display: flex; flex-direction: column; gap: 12px; }
.sheet-body > .btn { align-self: stretch; }
.confirm-sheet .sheet-body { text-align: center; padding-top: 6px; }
.opts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px 12px; align-items: center; text-align: left; }
.opts label { font-weight: 600; color: var(--muted); font-size: .95rem; max-width: 34vw; line-height: 1.15; }
.opts.compact { gap: 8px 10px; }
.seg { display: flex; gap: 3px; padding: 3px; border-radius: 14px; background: rgba(0,0,0,.28); }
.seg button { flex: 1; min-width: 0; white-space: normal; line-height: 1.05; min-height: 44px; border-radius: 10px; font-weight: 700; font-size: clamp(.78rem, 3.6vw, .95rem); color: var(--muted); padding: 0 4px; }   /* «Apprendista» (it) cabe en 360 px */
.seg button.on { background: var(--gold); color: var(--accent-text); box-shadow: 0 2px 0 #9a6a10; }
.seg.ro button.on { background: rgba(255,255,255,.2); color: #fff; box-shadow: none; }
.nick-form { display: flex; gap: 8px; }
.nick-form .nick, .setting input, .opts .nick { flex: 1; min-width: 0; height: 48px; border-radius: 13px; border: 0; padding: 0 14px; font-size: 1.1rem; font-weight: 600; color: var(--text); background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--line); }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.settings { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.setting { display: flex; align-items: center; gap: 10px; justify-content: space-between; font-weight: 600; }
.setting > span { min-width: 0; }
.tog { display: inline-flex; align-items: center; gap: 8px; min-width: 92px; min-height: 44px; padding: 0 12px 0 6px; border-radius: 99px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--line); font-weight: 700; color: var(--muted); }
.tog i { width: 30px; height: 30px; border-radius: 50%; background: #5a5080; transition: transform .2s, background .2s; }
.tog.on { color: #06301a; background: var(--mint); }
.tog.on i { background: #fff; transform: translateX(2px); }
.setting select { min-height: 44px; border-radius: 12px; border: 0; padding: 0 10px; font-size: 1rem; font-weight: 600; color: var(--text); background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--line); max-width: 55%; }
.row.links .btn { flex: 1 1 auto; }
/* pausa, final */
.menu-p .col .btn { justify-content: flex-start; }
.end-p .why { color: #fff; font-weight: 600; }
.end-p.win h2 { animation: bump .6s cubic-bezier(.2,1.6,.4,1); }
/* cómo se juega */
.howto-body { text-align: left; font-size: .98rem; line-height: 1.45; }
.howto-body .t1 { font-family: var(--display); font-weight: 900; color: var(--gold); font-size: 1.45rem; line-height: 1.15; margin: 0 0 .5em; }
.howto-body h2 { font-size: 1.12rem; color: var(--gold); margin: 1em 0 .3em; }
.howto-body ul { padding-left: 1.2em; margin: .3em 0; }
.howto-body p { margin: .4em 0; }
/* anuncio simulado (dev) */
.dev-ad { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.85); }
.dev-ad-box { width: min(320px, 86vw); padding: 18px; border-radius: 20px; background: #fff; color: #222; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.dev-ad-art { height: 140px; border-radius: 12px; display: grid; place-items: center; font-size: 3rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #6a5fd0, #ff7ab8); }
.dev-ad-close { color: #222 !important; }
/* cargador y texto rastreable */
#loader { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); transition: opacity .4s; }
#loader.out { opacity: 0; pointer-events: none; }
.loader-gem { width: 46px; height: 46px; transform: rotate(45deg); border-radius: 10px; background: radial-gradient(circle at 35% 30%, #fff, var(--gold) 55%, #b77812); animation: spin 1.4s ease-in-out infinite; }
.howto-src { display: none; }
.noscript { padding: 20px; text-align: center; }


/* ================= Duelo de Éter ================= */
/* fondo: cielo de éter con estrellas y los resplandores de las dos casas (Alba abajo, oro y azul; Ocaso arriba, púrpura y carmesí) */
#app { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='30' r='1'/%3E%3Ccircle cx='80' cy='12' r='.7'/%3E%3Ccircle cx='150' cy='44' r='1.1'/%3E%3Ccircle cx='200' cy='110' r='.8'/%3E%3Ccircle cx='40' cy='120' r='.6'/%3E%3Ccircle cx='110' cy='96' r='1'/%3E%3Ccircle cx='170' cy='170' r='.7'/%3E%3Ccircle cx='60' cy='190' r='1'/%3E%3Ccircle cx='130' cy='206' r='.6'/%3E%3Ccircle cx='20' cy='80' r='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px,
  radial-gradient(ellipse 90% 55% at 15% 105%, rgba(255,196,80,.22), transparent 70%),
  radial-gradient(ellipse 80% 50% at 50% 115%, rgba(70,140,255,.2), transparent 70%),
  radial-gradient(ellipse 90% 55% at 85% -5%, rgba(220,60,120,.22), transparent 70%),
  radial-gradient(ellipse 80% 50% at 40% -12%, rgba(140,70,230,.25), transparent 70%),
  radial-gradient(ellipse at 50% 50%, #251a4f, #120c26 75%); }
body.at-title #app { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='30' r='1'/%3E%3Ccircle cx='80' cy='12' r='.7'/%3E%3Ccircle cx='150' cy='44' r='1.1'/%3E%3Ccircle cx='200' cy='110' r='.8'/%3E%3Ccircle cx='40' cy='120' r='.6'/%3E%3Ccircle cx='110' cy='96' r='1'/%3E%3Ccircle cx='170' cy='170' r='.7'/%3E%3Ccircle cx='60' cy='190' r='1'/%3E%3Ccircle cx='130' cy='206' r='.6'/%3E%3Ccircle cx='20' cy='80' r='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 220px 220px,
  radial-gradient(ellipse 70% 60% at 0% 55%, rgba(255,190,70,.34), transparent 70%),
  radial-gradient(ellipse 70% 60% at 100% 45%, rgba(210,50,120,.34), transparent 70%),
  radial-gradient(ellipse 60% 40% at 50% 0%, rgba(120,90,255,.35), transparent 70%),
  radial-gradient(ellipse at 50% 60%, #2a1d58, #110b24 78%); }
.howto-src { display: none; }
.gl { width: 1em; height: 1em; }
.coin, .star, .gem, .shd { width: 1em; height: 1em; flex: none; display: block; }

/* ---------- cartas ---------- */
.cd { --w: 70px; --tc: #888; container-type: inline-size; position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.4); border-radius: calc(var(--w) * .085); overflow: hidden; color: #fff;
  background: #1a1430; border: max(2px, calc(var(--w) * .03)) solid color-mix(in srgb, var(--tc) 80%, #000);
  box-shadow: 0 calc(var(--w) * .04) calc(var(--w) * .1) rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.25); transform-origin: 50% 50%; }
.cd-art { position: absolute; inset: 0; background: center 30% / cover no-repeat; }
.cd-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, transparent) 0%, transparent 34%, transparent 62%, rgba(0,0,0,.72) 100%); }
.cd-cost { position: absolute; left: 4%; top: 3.5%; right: 4%; display: flex; flex-wrap: wrap; gap: calc(var(--w) * .02); z-index: 1; }
.ch { position: relative; display: grid; place-items: center; width: calc(var(--w) * .22); height: calc(var(--w) * .22); border-radius: 50%; background: rgba(12,8,28,.82); box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.3); font-style: normal; }
.ch svg { width: 74%; height: 74%; }
.ch b { position: absolute; right: -8%; bottom: -10%; min-width: 58%; height: 58%; border-radius: 99px; display: grid; place-items: center; font: 700 calc(var(--w) * .1)/1 var(--font); color: #1a1030; background: #fff; }
.ch.cg { width: calc(var(--w) * .26); } .ch.cg b { position: static; background: none; color: #fff; font-size: calc(var(--w) * .13); width: auto; min-width: 0; height: auto; margin-left: -10%; text-shadow: 0 1px 2px #000; }
.ch.cg { grid-auto-flow: column; display: inline-grid; } .ch.cg svg { width: 58%; }
.ch.c0 { font: 700 calc(var(--w) * .13)/1 var(--font); color: #fff; }
.ch.cf { background: rgba(60,40,0,.85); opacity: .75; } .ch.cf.on { opacity: 1; box-shadow: 0 0 0 1.5px #ffd45a, 0 0 8px #ffd45a; }
.ch .seal { width: 86%; height: 86%; }
.cd-fxw { position: absolute; left: 4%; top: 24%; z-index: 1; }
.fx { display: inline-flex; align-items: center; gap: calc(var(--w) * .02); height: calc(var(--w) * .3); padding: 0 calc(var(--w) * .06); border-radius: 99px; font-style: normal; font: 700 calc(var(--w) * .17)/1 var(--font); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 85%, #fff), var(--tc) 60%, color-mix(in srgb, var(--tc) 60%, #000)); box-shadow: 0 2px 5px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.4); }
.fx svg { width: calc(var(--w) * .2); height: calc(var(--w) * .2); }
.fx-runa .gl { width: calc(var(--w) * .22); height: calc(var(--w) * .22); color: #fff; filter: drop-shadow(0 0 3px #e2c9ff); }
.fx .pt { font-size: .75em; color: #cfe9ff; }
.fx-dominio .seal { width: calc(var(--w) * .2); height: calc(var(--w) * .2); }
.fx-dominio .fx-vs { display: inline-grid; place-items: center; margin-left: calc(var(--w) * .01); opacity: .9; } .fx-dominio .fx-vs svg { width: calc(var(--w) * .16); height: calc(var(--w) * .16); }
.cd-eco { position: absolute; right: 5%; top: 26%; z-index: 1; font-style: normal; font-size: calc(var(--w) * .2); line-height: 1; color: #fff3b0; text-shadow: 0 0 6px #ffcf4a, 0 1px 2px #000; }
.cd-seal { position: absolute; right: 4%; top: 45%; z-index: 1; width: calc(var(--w) * .22); height: calc(var(--w) * .22); }
.cd-seal .seal { width: 100%; height: 100%; }
.cd-nm { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 5% 4%; text-align: center; font-family: var(--display); font-weight: 700; font-size: calc(var(--w) * .095); line-height: 1.1; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.cd-nm span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 84px) { .cd-nm { display: none; } }
.seal { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; color: #2a1800; font-style: normal;
  background: radial-gradient(circle at 35% 30%, #fff5c8, var(--sc) 55%, color-mix(in srgb, var(--sc) 55%, #000)); box-shadow: 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.5); }
.seal .gl { width: 66%; height: 66%; }
/* precio para quien mira (solo en las cartas libres) */
.price { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 2px; padding: 1px calc(var(--w) * .07) 1px calc(var(--w) * .04); border-radius: 99px; font-style: normal;
  font: 700 calc(var(--w) * .16)/1.25 var(--font); color: #fff; background: rgba(12,8,28,.9); box-shadow: 0 0 0 1.5px #ffd76a, 0 2px 6px rgba(0,0,0,.6); white-space: nowrap; }
.price .coin { width: calc(var(--w) * .17); height: calc(var(--w) * .17); }
.price.no { box-shadow: 0 0 0 1.5px #ff5a4a, 0 2px 6px rgba(0,0,0,.6); color: #ff9a8a; }
.price.zero, .price.free { box-shadow: 0 0 0 1.5px #5be07a, 0 2px 6px rgba(0,0,0,.6); color: #b9ffc9; padding: 1px calc(var(--w) * .07); }
.price.free .seal { width: calc(var(--w) * .18); height: calc(var(--w) * .18); }
.cd.free:not(.mine) .price { opacity: .85; }
/* reverso neutro */
.cd.back { border-color: #8a6a2a; background: radial-gradient(circle at 50% 40%, #4a3594, #241650 60%, #160d33); }
.cd.back .bk { position: absolute; inset: 7%; border-radius: calc(var(--w) * .05); display: grid; place-items: center; box-shadow: inset 0 0 0 max(1px, calc(var(--w) * .015)) rgba(255,215,106,.55);
  background: repeating-linear-gradient(45deg, rgba(255,215,106,.08) 0 2px, transparent 2px calc(var(--w) * .09)), repeating-linear-gradient(-45deg, rgba(255,215,106,.08) 0 2px, transparent 2px calc(var(--w) * .09)); }
.cd.back .bk-gem { position: absolute; width: 38%; aspect-ratio: 1; transform: rotate(45deg); border-radius: 18%; background: radial-gradient(circle at 35% 30%, #fff, #c9a8ff 40%, #6b3fd0 80%); box-shadow: 0 0 calc(var(--w) * .15) rgba(190,150,255,.8), inset 0 0 0 2px rgba(255,255,255,.4); }
.cd.back b { position: relative; font: 900 calc(var(--w) * .16)/1 var(--display); color: #2a1460; }
/* el reverso cambia de color con el acto: I violeta, II granate con gema de fuego, III eclipse (disco negro con anillo de luz) */
.cd.back.act2 { background: radial-gradient(circle at 50% 40%, #6b2a78, #3a1250 60%, #1c0a2c); }
.cd.back.act3 { border-color: #c9962e; background: radial-gradient(circle at 50% 40%, #2a2348, #120d26 60%, #07050f); }
.cd.back.act3 .bk-gem { transform: none; width: 46%; border-radius: 50%; background: radial-gradient(circle, #05030c 56%, #fff6cf 60%, #ffc35a 67%, rgba(255,160,60,.35) 72%, transparent 75%); box-shadow: 0 0 calc(var(--w) * .2) rgba(255,196,100,.75); }
.cd.back.act3 b { color: #ffe7a6; text-shadow: 0 0 4px #000; }
.cd.back.act2 .bk-gem { background: radial-gradient(circle at 35% 30%, #fff, #ffd6a0 40%, #d0703f 80%); box-shadow: 0 0 calc(var(--w) * .15) rgba(255,190,120,.8), inset 0 0 0 2px rgba(255,255,255,.4); }

/* ---------- mesa ---------- */
#hud { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: calc(6px + var(--safe-t)) calc(6px + var(--safe-r)) calc(6px + max(var(--safe-b), var(--cookie-b, 0px))) calc(6px + var(--safe-l)); }
.b-pause { position: absolute; z-index: 20; top: calc(8px + var(--safe-t)); right: calc(8px + var(--safe-r)); width: 44px; height: 44px; }
.board-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.act-tag { flex: none; font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .06em; color: #e9dcff; opacity: .8; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.board { position: relative; flex: none; perspective: 900px; }
.board .cd { --w: var(--cw, 70px); position: absolute; left: calc(var(--x) * var(--hx)); top: calc(var(--r) * var(--ry)); cursor: pointer; transition: transform .15s, box-shadow .2s, filter .2s; }
.board .cd.covered { filter: brightness(.86) saturate(.9); }
.board .cd.free { box-shadow: 0 0 0 2px #ffd76a, 0 0 14px rgba(255,215,106,.55), 0 4px 10px rgba(0,0,0,.6); }
.board .cd.free.mine { animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 2px #fff0a8, 0 0 22px rgba(255,215,106,.85), 0 4px 10px rgba(0,0,0,.6); } }
.board .cd.free:hover { transform: translateY(-3px); }
.board .cd.chosen { transform: translateY(-10%) scale(1.08); z-index: 99 !important; box-shadow: 0 0 0 3px #fff, 0 0 28px rgba(255,255,255,.9) !important; animation: none; }
.logline { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-height: 44px; padding: 4px 12px; border-radius: 99px; background: rgba(20,14,46,.72); box-shadow: inset 0 0 0 1.5px var(--hud-line); font-size: .84rem; font-weight: 600; color: #efe8ff; }
.logline svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.logline span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logline.bad { box-shadow: inset 0 0 0 1.5px #ff6a5a; color: #ffd0c8; }

/* ---------- franjas ---------- */
.strip { --sc: #ffd45a; position: relative; flex: none; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(180deg, rgba(34,24,72,.9), rgba(20,14,46,.9)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 35%, transparent), 0 6px 18px rgba(0,0,0,.35); transition: box-shadow .3s; }
.strip.side-ocaso { --sc: #ff6a8a; } .strip.side-alba { --sc: #ffd45a; }
.strip.active { box-shadow: inset 0 0 0 2px var(--sc), 0 0 20px color-mix(in srgb, var(--sc) 45%, transparent), 0 6px 18px rgba(0,0,0,.35); }
.strip.winner { animation: win-glow 1.2s ease-in-out infinite; }
@keyframes win-glow { 50% { box-shadow: inset 0 0 0 3px #ffd76a, 0 0 36px rgba(255,215,106,.8); } }
.strip.shake { animation: shake .35s; }
.s-top .st-head { padding-right: 46px; }
#hud.face .s-top { transform: rotate(180deg); }
/* cara a cara la franja de arriba va girada: su pie y sus torres quedan arriba a la derecha, bajo la pausa → se apartan */
#hud.face .s-top .st-head { padding-right: 0; }
#hud.face .s-top .st-body, #hud.face .s-top .st-foot { padding-left: 46px; }
.st-head { display: flex; align-items: center; gap: 7px; min-height: 44px; }
.emb-w { flex: none; display: grid; } .emb-w .emb, .emb { width: 34px; height: 34px; display: block; }
.nmw { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.nm { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turnpill { font-size: .74rem; font-weight: 700; color: var(--sc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip.active .turnpill::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 6px var(--sc); animation: blink 1.2s infinite; vertical-align: 1px; }
@keyframes blink { 50% { opacity: .3; } }
.stat { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 1.08rem; padding: 3px 9px 3px 5px; border-radius: 99px; background: rgba(0,0,0,.3); }
.stat svg { width: 20px; height: 20px; }
.warn { flex: none; display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 7px; border-radius: 99px; background: #c4281e; color: #fff; animation: pulse 1s ease-in-out infinite; white-space: nowrap; }
.warn svg { width: 12px; height: 12px; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.b-realm { flex: none; }
.st-body { display: flex; align-items: center; gap: 8px; }
.towers { flex: none; display: flex; align-items: flex-end; gap: 2px; }
.twr { display: grid; } .twr .tw { width: 26px; height: 32px; display: block; }
.twr.hit { animation: hit .45s; } @keyframes hit { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-3px) rotate(-6deg); filter: brightness(1.8) sepia(1) hue-rotate(-30deg) saturate(4); } 50% { transform: translateX(3px) rotate(5deg); } }
.twr.heal { animation: heal .6s; } @keyframes heal { 50% { filter: brightness(1.6) drop-shadow(0 0 6px #5be07a); transform: scale(1.12); } }
.shield-on { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; align-self: center; } .shield-on .shd { width: 24px; height: 24px; filter: drop-shadow(0 0 4px #7fd0ff); }
.shield-on b { position: absolute; right: -4px; bottom: -4px; font-size: .7rem; }
.prod { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.pc { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px 2px 4px; border-radius: 99px; background: rgba(0,0,0,.32); font-style: normal; font-weight: 700; font-size: .92rem; }
.pc .gem { width: 16px; height: 16px; }
.pc.zero { opacity: .34; } .pc.fix { box-shadow: inset 0 0 0 1.5px #ffd76a; }
.pop { animation: pop .5s; } @keyframes pop { 40% { transform: scale(1.35); filter: brightness(1.6); } }
.cst { flex: none; display: grid; grid-template-columns: repeat(3, 16px); gap: 2px; padding: 3px; border-radius: 9px; background: rgba(0,0,0,.35); }
.rn { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: rgba(220,200,255,.28); background: rgba(255,255,255,.05); font-style: normal; }
.rn .gl { width: 70%; height: 70%; }
.rn.on { color: #fff; background: radial-gradient(circle at 35% 30%, #e6d2ff, #a05cff 60%, #5a24b0); box-shadow: 0 0 6px rgba(180,120,255,.85); }
.rn.lit { animation: lit 1s ease-out; } @keyframes lit { 0% { transform: scale(.4); filter: brightness(3); } 50% { transform: scale(1.5); filter: brightness(2); box-shadow: 0 0 18px #d6b8ff; } 100% { transform: none; } }
.st-foot { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.tcs { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 2px 7px; }
.tc { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--tc) 70%, #fff); }
.tc .ti { width: 13px; height: 13px; color: var(--tc); }
.tc.zero { opacity: .3; }
.seals { flex: none; display: flex; gap: 3px; font-size: 17px; }
/* vertical bajo (390×664): más compacto */
body.lowp .st-head { min-height: 44px; } body.lowp .strip { gap: 3px; padding: 4px 8px; }
body.lowp .twr .tw { width: 22px; height: 28px; } body.lowp .emb-w .emb { width: 30px; height: 30px; }

/* ---------- horizontal y escritorio: rival a la izquierda, formación en el centro, la tuya a la derecha ---------- */
body.land #hud { --sw: clamp(160px, 21vw, 300px); display: grid; grid-template-columns: var(--sw) minmax(0, 1fr) var(--sw); gap: 8px; }
body.land .s-top { grid-column: 1; grid-row: 1; padding-top: 56px; justify-content: flex-start; overflow: hidden; }
body.land .board-wrap { grid-column: 2; grid-row: 1; }
body.land .s-bot { grid-column: 3; grid-row: 1; padding-bottom: 58px; justify-content: flex-start; overflow: hidden; }
body.land .b-pause { top: calc(10px + var(--safe-t)); left: calc(12px + var(--safe-l)); right: auto; }
body.land .act-tag { position: absolute; z-index: 6; top: calc(12px + var(--safe-t)); left: calc(64px + var(--safe-l)); width: calc(var(--sw) - 62px); white-space: normal; line-height: 1.15; text-align: left; font-size: .74rem; pointer-events: none; }
body.land #hud > .board-wrap .act-tag { position: fixed; }
body.land .logline { position: fixed; z-index: 6; right: calc(10px + var(--safe-r)); bottom: calc(10px + max(var(--safe-b), var(--cookie-b, 0px))); width: calc(var(--sw) - 8px); justify-content: flex-start; font-size: .76rem; }
body.land .s-top .st-head { padding-right: 0; }
body.land .st-head { flex-wrap: wrap; min-height: 0; row-gap: 5px; }
body.land .nmw { flex: 1 1 calc(100% - 50px); }
body.land .st-head .stat { flex: 1 1 0; justify-content: center; }
body.land .b-realm { flex: 1 1 100%; }
body.land .st-body { flex-direction: column; align-items: stretch; gap: 6px; }
body.land .towers { justify-content: center; }
body.land .prod { display: grid; grid-template-columns: 1fr 1fr; }
body.land .pc { justify-content: center; }
body.land .cst { align-self: center; grid-template-columns: repeat(3, 20px); } body.land .rn { width: 20px; height: 20px; }
body.land .st-foot { flex-direction: column; align-items: stretch; }
body.land .tcs { justify-content: center; }
body.land .seals { justify-content: center; }
body.land.short .strip { gap: 4px; padding: 6px; }
body.land.short .s-top { padding-top: 54px; } body.land.short .s-bot { padding-bottom: 56px; }
body.land.short .twr .tw { width: 22px; height: 27px; }
body.land.short .cst { grid-template-columns: repeat(3, 17px); } body.land.short .rn { width: 17px; height: 17px; }
body.land.short .tc { font-size: .74rem; }
body.desk .strip { padding: 12px; gap: 10px; }
body.desk .nm { font-size: 1.2rem; } body.desk .stat { font-size: 1.25rem; } body.desk .stat svg { width: 24px; height: 24px; }
body.desk .twr .tw { width: 38px; height: 48px; }
body.desk .cst { grid-template-columns: repeat(3, 30px); gap: 4px; padding: 5px; } body.desk .rn { width: 30px; height: 30px; }
body.desk .pc { font-size: 1.05rem; padding: 4px 9px 4px 5px; } body.desk .pc .gem { width: 20px; height: 20px; }
body.desk .tc { font-size: .95rem; } body.desk .tc .ti { width: 16px; height: 16px; }
body.desk .act-tag { font-size: .95rem; } body.desk .logline { font-size: .9rem; }
body.desk .seals { font-size: 22px; }

/* ---------- hojas de la partida ---------- */
.sheet header h3 { display: flex; align-items: center; gap: 8px; } .sheet header h3 .emb, .sheet header h3 .gl { width: 30px; height: 30px; flex: none; color: #d6b8ff; }
.sheet header h3 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sheet .sheet-body { gap: 10px; }
.cs-top { display: flex; gap: 14px; align-items: flex-start; text-align: left; }
.cs-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cs-type { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: color-mix(in srgb, var(--tc) 65%, #fff); }
.cs-type .ti { width: 18px; height: 18px; color: var(--tc); }
.cs-fx { margin: 0; padding-left: 1.1em; font-size: .98rem; line-height: 1.3; }
.cs-fx li { margin: 2px 0; }
.cs-fx li.now { list-style: none; margin-left: -1.1em; display: flex; align-items: center; gap: 4px; font-weight: 700; color: #bfe3ff; } .cs-fx li.now .star { width: 16px; height: 16px; flex: none; }
.cs-cost { text-align: left; padding: 8px 12px; border-radius: 14px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1.5px var(--line); font-size: .92rem; line-height: 1.35; }
.cs-cost p { margin: 0; } .cs-cost .tot { margin-top: 4px; font-weight: 700; color: var(--gold); display: flex; align-items: center; gap: 6px; } .cs-cost .tot .coin { width: 18px; height: 18px; }
.cs-cost.no { box-shadow: inset 0 0 0 1.5px #ff6a5a; } .cs-cost.no p:last-of-type { color: #ffb0a4; }
.cs-note { text-align: left; }
.cs-acts .btn { min-height: 56px; }
.cs-acts .btn small { font-size: .7em; }
.b-ad { align-self: center; }
.realm-sheet .sheet-body { text-align: left; gap: 10px; }
.rl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rl-tw { display: flex; align-items: flex-end; gap: 4px; } .rl-tw .tw { width: 38px; height: 48px; }
/* en «Mi reino» la constelación va grande en cualquier pantalla (las reglas body.lowp/land de la franja no la encogen) */
body .rl-cst .cst.big { grid-template-columns: repeat(3, 30px); gap: 4px; padding: 5px; } body .rl-cst .cst.big .rn { width: 30px; height: 30px; }
.rl-cst { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: 46%; text-align: center; }
.rl-cst small { color: var(--muted); font-size: .74rem; line-height: 1.2; }
.rl-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rl-line .seals { font-size: 22px; }
.rl-pres ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; font-size: .9rem; }
.rl-pres li { display: flex; justify-content: space-between; gap: 6px; } .rl-pres li.tot { grid-column: 1 / -1; font-weight: 700; color: var(--gold); border-top: 1px solid var(--line); padding-top: 3px; }
.rl-pres li.tot span { display: inline-flex; align-items: center; gap: 4px; } .rl-pres .star { width: 16px; height: 16px; }
.realm-sheet h4 { margin: 6px 0 2px; display: flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--tc) 65%, #fff); font-size: .98rem; }
.realm-sheet h4 .ti { width: 16px; height: 16px; color: var(--tc); } .realm-sheet h4 small { color: var(--muted); }
.rl-cards { display: flex; flex-wrap: wrap; gap: 6px; } .rl-cards .cd { cursor: pointer; }
@media (max-width: 440px) { .rl-pres ul { grid-template-columns: 1fr; } }
.log-list { list-style: none; margin: 0; padding: 0; text-align: left; font-size: .92rem; line-height: 1.3; }
.log-list li { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .log-list li.bad { color: #ffc0b6; } .log-list li.sep { color: var(--gold); font-weight: 700; text-align: center; }
.bless .btn { justify-content: flex-start; } .bless .btn svg { width: 1.4em; height: 1.4em; }
.zoom-wrap { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b)); background: rgba(8,5,22,.78); animation: fade .15s both; }
.zoom-wrap .cs-fx { max-width: 340px; color: #fff; text-align: left; background: rgba(20,14,46,.9); border-radius: 14px; padding: 10px 14px 10px 30px; }
.zoom-wrap.out { animation: fadeout .18s both; }

/* ---------- efectos ---------- */
.float { position: fixed; z-index: 40; transform: translate(-50%, -50%); pointer-events: none; font: 900 1.5rem/1 var(--font); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 10px rgba(0,0,0,.6); animation: floatup 1.2s cubic-bezier(.2,.8,.3,1) both; display: flex; align-items: center; gap: 4px; }
.float svg { width: 28px; height: 28px; }
.float.dmg { color: #ff6a5a; font-size: 1.9rem; } .float.gold { color: #ffd76a; } .float.heal, .float.prod { color: #8ff0a4; } .float.pres { color: #9fd4ff; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
.banner.alba span { color: #2a1800; background: linear-gradient(180deg, #fff1b0, #ffd45a 60%, #e6a92a); }
.banner.ocaso span { color: #fff; background: linear-gradient(180deg, #ff8ab0, #c2286a 60%, #7a1450); }

/* ---------- moneda, actos y final ---------- */
.coin-3d { perspective: 600px; height: 130px; display: grid; place-items: center; }
.coin-in { position: relative; width: 110px; height: 110px; transform-style: preserve-3d; animation: coinflip 1.3s cubic-bezier(.3,.6,.3,1) both; }
.coin-in.ocaso { animation-name: coinflip2; }
.coin-in .cf { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 50%; box-shadow: 0 0 30px rgba(255,215,106,.5); }
.coin-in .cf .emb { width: 100%; height: 100%; }
.coin-in .backf { transform: rotateY(180deg); }
@keyframes coinflip { from { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-30px) rotateY(1080deg); } to { transform: translateY(0) rotateY(2160deg); } }
@keyframes coinflip2 { from { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-30px) rotateY(1170deg); } to { transform: translateY(0) rotateY(2340deg); } }
.er-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.er-col { --sc: #ffd45a; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 16px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 40%, transparent); }
.er-col.side-ocaso { --sc: #ff6a8a; }
.er-nm { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; } .er-nm .emb { width: 28px; height: 28px; }
.er-tw { display: flex; gap: 2px; } .er-tw .tw { width: 26px; height: 32px; }
.er-pr { margin: 0; display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 1.15rem; } .er-pr .star { width: 20px; height: 20px; }
.act-p h2 { animation: bump .7s cubic-bezier(.2,1.6,.4,1) both; }
/* el acto en la moneda y en las transiciones: su nombre y su papel en una línea */
.act-kick { margin: 0; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .05em; color: #c9b4ff; }
.act-role { margin: 2px 0 6px; font-size: .92rem; line-height: 1.25; color: #e8defc; opacity: .92; text-wrap: balance; }
.act-p.act2 h2 { color: #ffc79a; } .act-p.act3 h2 { color: #ffe08a; text-shadow: 0 0 14px rgba(255,190,90,.55), 0 2px 0 #000; }
.act-p.act3 .card { box-shadow: 0 0 0 2px rgba(255,200,110,.45), 0 0 40px rgba(255,180,80,.25), 0 18px 40px rgba(0,0,0,.6); }
/* horizontal bajo (844×390, 844×340): la transición en filas (nombre, torres, constelación y prestigio en una línea) y la
   moneda más baja, para que quepan enteras con su botón */
body.short .act-p .card, body.short .coin-p .card { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
body.short .act-p .er-col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 6px 10px; }
body.short .act-role { margin: 0; }
body.short .coin-3d { height: 96px; } body.short .coin-in { width: 84px; height: 84px; }
/* el final en horizontal bajo: el desglose a la izquierda y los botones a la derecha (con Hazañas y Dominios, en una
   columna no cabía) */
body.short .end-p .card { width: min(800px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto auto 1fr; column-gap: 18px; row-gap: 6px; align-items: start; padding-top: 12px; padding-bottom: 12px; }
body.short .end-p .card > h2, body.short .end-p .card > .why, body.short .end-p .card > .brk { grid-column: 1; }
body.short .end-p .card > .col { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
body.short .end-p .card > .col .row.two { flex-direction: column; } body.short .end-p .card > .col .row.two > .btn { flex: none; }
body.short .end-p .brk { font-size: .88rem; } body.short .end-p .brk th, body.short .end-p .brk td { padding: 1px 6px; }
body.short .end-p .card > h2 { font-size: 1.45rem; } body.short .end-p .brk th .emb { width: 22px; height: 22px; }
@keyframes bump { from { transform: scale(.5); opacity: 0; } }
.brk { width: 100%; border-collapse: collapse; font-size: .95rem; }
.brk th, .brk td { padding: 4px 6px; text-align: center; }
.brk th { font-weight: 700; } .brk th .emb { width: 26px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.brk th span { vertical-align: middle; } .brk th.win span { color: var(--gold); }
.brk td:first-child { text-align: left; color: var(--muted); }
.brk tbody tr { border-top: 1px solid rgba(255,255,255,.07); }
.brk tr.tot td { font-weight: 700; color: var(--gold); font-size: 1.08rem; } .brk tr.tot td:first-child { color: var(--gold); display: flex; align-items: center; gap: 4px; } .brk .star { width: 18px; height: 18px; }
.end-p .why { color: #fff; font-weight: 600; }
.end-p.win h2 { animation: bump .6s cubic-bezier(.2,1.6,.4,1); }

/* ---------- portada ---------- */
.title-fan { position: relative; flex: 1 1 auto; min-height: 0; width: min(560px, 100%); display: flex; justify-content: center; align-items: center; pointer-events: none; }
.title-fan .cd { --w: clamp(64px, min(19vw, 15vh), 132px); position: absolute; transform-origin: 50% 130%; animation: tfan 1s cubic-bezier(.2,.9,.3,1) both; }
.tf0 { transform: translateX(-62%) rotate(-24deg); animation-delay: .05s !important; } .tf1 { transform: translateX(-32%) rotate(-12deg); animation-delay: .12s !important; }
.tf2 { transform: translateY(-6%) rotate(0deg); z-index: 3; animation-delay: .19s !important; } .tf3 { transform: translateX(32%) rotate(12deg); animation-delay: .26s !important; } .tf4 { transform: translateX(62%) rotate(24deg); animation-delay: .33s !important; }
@keyframes tfan { from { opacity: 0; transform: translateY(40%) rotate(0deg) scale(.7); } }
.tf-emb { position: absolute; z-index: 4; top: 50%; width: clamp(54px, min(15vw, 11vh), 96px); animation: embin 1.1s .4s cubic-bezier(.2,1.4,.4,1) both; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.tf-emb .emb { width: 100%; height: auto; }
.tf-emb.a { left: 2%; } .tf-emb.o { right: 2%; }
@keyframes embin { from { opacity: 0; transform: scale(.3); } }
.logo .lg { letter-spacing: .02em; }
.title-bottom .btn.big { justify-content: flex-start; }
.title-bottom .btn.big svg { width: 1.5em; height: 1.5em; }
.opts .seg button .emb { width: 22px; height: 22px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.opts .lvd { grid-column: 1 / -1; text-align: left; margin-top: -4px; min-height: 1.2em; }
.opts > .sub.small { grid-column: 1 / -1; text-align: left; }
@media (orientation: landscape) and (max-height: 500px) {
  .title-screen { display: grid; grid-template-columns: 1fr minmax(280px, 390px); grid-template-rows: auto 1fr; column-gap: 18px; align-items: center; }
  .title-screen .logo { grid-column: 1; grid-row: 1; margin-top: 46px; } .title-screen .logo .lg { font-size: clamp(2rem, 8vh, 3.6rem); }
  .title-screen .title-fan { grid-column: 1; grid-row: 2; height: 100%; } .title-fan .cd { --w: clamp(54px, 17vh, 96px); }
  .title-screen .title-bottom { grid-column: 2; grid-row: 1 / 3; gap: 8px; } .title-bottom .btn.big { min-height: 52px; font-size: 1.1rem; }
}
/* horizontal muy bajo (844×340) con «Continuar», sobre todo en Telegram a pantalla completa: botones algo más bajos para que
   no se metan bajo la fila de botones de Telegram */
@media (orientation: landscape) and (max-height: 360px) { .title-screen .title-bottom { gap: 6px; } .title-bottom .btn.big { min-height: 46px; } }
.tg-play { align-self: center; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 16px; min-height: 44px; border-radius: 99px; background: #229ed9; color: #fff; font-weight: 700; font-size: .92rem; text-decoration: none; box-shadow: 0 3px 0 #16729e, 0 6px 14px rgba(0,0,0,.25); }
body.tg .tg-play { display: none; }
/* Telegram a pantalla completa (como Snake Odyssey): arriba quedan la barra del sistema y la fila de botones de Telegram
   («Cerrar»/«Atrás» y «…»). --safe-t las suma (js/tg.js, syncFull) y todo lo que mira --safe-t (franjas, pausa, pantallas,
   avisos) queda por debajo. */
body.tg-full { --safe-t: calc(max(env(safe-area-inset-top, 0px), var(--tg-sys-top, 0px)) + var(--tg-bar-top, 48px)); }
body.tg .portal-link { display: none; }
.strip > * { flex-shrink: 0; }
body.land.short .strip { gap: 4px; }
body.land.short .st-head { row-gap: 4px; } body.land.short .emb-w .emb { width: 28px; height: 28px; }
body.land.short .stat { font-size: .95rem; padding: 2px 7px 2px 4px; } body.land.short .stat svg { width: 17px; height: 17px; }
body.land.short .prod { grid-template-columns: repeat(4, 1fr); gap: 2px; } body.land.short .pc { padding: 2px 2px; font-size: .78rem; gap: 1px; } body.land.short .pc .gem { width: 13px; height: 13px; }
body.land.short .cst { grid-template-columns: repeat(3, 15px); padding: 2px; } body.land.short .rn { width: 15px; height: 15px; }
body.land.short .st-foot { gap: 2px; } body.land.short .tcs { gap: 1px 5px; }
/* vertical bajo: constelación más pequeña para que la formación llene el ancho */
body.lowp .cst { grid-template-columns: repeat(3, 12px); gap: 2px; padding: 2px; } body.lowp .rn { width: 12px; height: 12px; }
body.lowp .st-body { gap: 6px; } body.lowp .pc { padding: 1px 6px 1px 3px; }
/* vertical muy justo: sin la fila de contadores por tipo (están en el reino) ni el rótulo del acto (el reverso de las
   cartas ya dice I, II o III), para que la formación siga llenando el ancho */
body.tight .st-foot, body.tight .act-tag { display: none; } body.tight .strip { gap: 2px; padding: 3px 8px; }
body.tight #hud { gap: 4px; }
/* horizontal muy bajo: sin la píldora de turno (la franja brilla) y todo un poco más junto */
body.land.short .turnpill { display: none; }
body.land.short .strip { gap: 3px; padding: 5px 6px; }
/* (el relleno de arriba de la franja del rival deja sitio a la pausa y al rótulo del acto; el de abajo de la mía, al registro) */
body.land.short .strip.s-top { padding-top: 54px; } body.land.short .strip.s-bot { padding-bottom: 56px; }
body.land.short .tcs { display: none; }   /* los contadores por tipo, en el reino: así caben las franjas enteras */
body.land.short .st-body { gap: 4px; }
body.land.short .twr .tw { width: 20px; height: 25px; }
body.land.short .cst { grid-template-columns: repeat(3, 14px); } body.land.short .rn { width: 14px; height: 14px; }
body.desk .s-top { padding-top: 64px; } body.desk .s-bot { padding-bottom: 64px; }
body.desk .act-tag { top: calc(18px + var(--safe-t)); }
/* avisos (a 1 runa / a 1 torre): encima de la franja, sin quitar sitio a la fila */
.warns { position: absolute; z-index: 4; top: -9px; left: 46px; display: flex; gap: 4px; pointer-events: none; }
.s-top .warns { top: auto; bottom: -9px; } #hud.face .s-top .warns { top: -9px; bottom: auto; }
body.land .warns { top: -8px; left: 50%; transform: translateX(-50%); }
body.land .s-top .warns { top: 50px; bottom: auto; }
body.land .s-bot .warns { top: 3px; }
@media (max-height: 400px) and (orientation: landscape) { .title-screen .tg-play { position: absolute; z-index: 2; top: calc(8px + var(--safe-t)); left: var(--tg-left, calc(10px + var(--safe-l))); margin: 0; } }   /* muy bajo: a la derecha de «Más juegos» */

/* ---------- online: hoja «Online», apodo, sala de espera, reloj y estado de la red ---------- */
.online-sheet .sheet-body { gap: 12px; }
.online { display: flex; flex-direction: column; gap: 12px; }
.online .btn.big { justify-content: flex-start; }
.online .btn.big svg { width: 1.45em; height: 1.45em; }
.sheet header h3 svg { width: 26px; height: 26px; flex: none; color: var(--gold); }
.nick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nick-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 70%; padding: 0 14px; border-radius: 99px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 2px var(--line); font-weight: 700; font-size: 1.02rem; }
.nick-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nick-chip svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.join-row { display: flex; gap: 8px; }
.join-row .code { flex: 1 1 auto; min-width: 0; height: 50px; border-radius: 14px; border: 0; padding: 0 14px; font-size: 1.3rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; text-align: center; color: var(--text); background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 2px var(--line); }
.join-row .code::placeholder { letter-spacing: .12em; font-size: 1rem; color: rgba(220,210,255,.45); }
.join-row .btn { flex: none; }
.nick-sheet .sheet-body { gap: 10px; }
.lobby { justify-content: center; }
.lobby .card { gap: 12px; }
.code-big { display: flex; justify-content: center; gap: 6px; }
.code-big b { display: grid; place-items: center; width: clamp(44px, 13vw, 58px); height: clamp(54px, 16vw, 70px); border-radius: 14px; font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 9vw, 2.6rem); color: #3a2600; background: linear-gradient(180deg, #fff1b0, var(--gold) 60%, #e6a92a); box-shadow: 0 4px 0 #9a6a10, 0 8px 18px rgba(0,0,0,.35); }
.lobby .row.two > .btn { min-height: 50px; }
.seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.seat { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 2px 6px 2px 14px; border-radius: 14px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1.5px var(--line); }
.seat.me { box-shadow: inset 0 0 0 2px var(--gold); }
.seat .nm { flex: 1 1 auto; min-width: 0; font-size: 1.02rem; }
.seat .nm small { color: var(--muted); font-weight: 600; }
.seat .sdot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); flex: none; }
.seat.empty { color: var(--muted); } .seat.empty .spin { margin: 0; flex: none; }
.lobby .opts.compact { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.lobby .searching { display: flex; align-items: center; justify-content: center; gap: 4px; }
.connecting .card { gap: 14px; }
.turnpill .clk { display: inline-block; margin-right: 5px; padding: 0 6px; border-radius: 99px; background: rgba(0,0,0,.35); color: #fff; font-variant-numeric: tabular-nums; }
.turnpill .clk:empty { display: none; }
.turnpill .clk.low { background: #c4281e; animation: pulse 1s ease-in-out infinite; }
.strip.away { opacity: .72; filter: saturate(.6); }
.board .cd.sending { transform: translateY(-6%) scale(1.04); box-shadow: 0 0 0 3px #fff, 0 0 20px rgba(255,255,255,.8) !important; animation: none; z-index: 98 !important; }
.logline.net { color: #fff; box-shadow: inset 0 0 0 1.5px var(--sky); }
.logline.net .spin { flex: none; width: 15px; height: 15px; margin: 0; border-width: 2.5px; }
.logline.k-ask { box-shadow: inset 0 0 0 2px var(--gold); color: #fff2c4; animation: pulse 1.4s ease-in-out infinite; }
.logline .aw { flex: none; font-variant-numeric: tabular-nums; color: var(--gold); }
.ask-sheet .sheet-body { text-align: center; }
.ask-sheet .btn.big { justify-content: flex-start; }
.end-p .b-again small { white-space: normal; }

/* fichas.py: ficha del juego bajo la pantalla de juego (visible al desplazarse; al jugar la página vuelve arriba y no se mueve) */
html, body { height: auto !important; min-height: 100%; }
html { overflow-x: hidden !important; overflow-y: auto !important; } body { overflow: visible !important; }   /* el body no debe ser una caja de desplazamiento: con su overscroll-behavior: none bloqueaba la rueda del ratón */
html:has(body.playing), body.playing { overflow: hidden !important; }
body:not(.playing) { touch-action: pan-y; }
body:not(.playing) #wrap, body:not(.playing) #app, body:not(.playing) #app canvas, body:not(.playing) #app .screen { touch-action: pan-y !important; }   /* fuera de la partida se puede bajar a la ficha deslizando sobre el juego */
#wrap, #app { position: relative !important; inset: auto !important; width: 100% !important; height: 100vh !important; height: 100dvh !important; }
.game-info { max-width: 860px; margin: 0 auto; padding: 26px 18px 40px; font-family: Fredoka, ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #f4f0ff; line-height: 1.55; user-select: text; -webkit-user-select: text; }
.game-info .crumbs { font-size: .92rem; color: #b9b0d8; margin-bottom: 10px; } .game-info .crumbs a { color: #b9b0d8; } .game-info .crumbs span { margin: 0 6px; opacity: .6; }
.game-info .howto-src { display: block; } .game-info .howto { background: none; color: inherit; padding: 0; border-radius: 0; box-shadow: none; border: 0; }
.game-info h1 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.15; margin: 0 0 10px; color: #fff; }
.game-info h2 { font-size: 1.3rem; margin: 26px 0 8px; color: #ffd23f; }
.game-info p, .game-info li { color: #e8e2fa; } .game-info ul { padding-left: 1.2em; } .game-info a { color: #ffd23f; }
.game-info details { margin: 8px 0; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(190,160,255,.22); }
.game-info summary { cursor: pointer; font-weight: 600; } .game-info details p { margin: 6px 0 0; }
.game-info .more { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 0; list-style: none; }
.game-info .more a { display: block; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1.5px rgba(190,160,255,.22); text-decoration: none; color: #fff; }
.game-info .more img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; } .game-info .more b { display: block; padding: 8px 10px 0; } .game-info .more span { display: block; padding: 0 10px 10px; font-size: .88rem; color: #c9c0e6; }
.game-info .foot { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(190,160,255,.22); font-size: .92rem; } .game-info .foot a { color: #b9b0d8; }
.howto .t1 { font-size: 1.25rem; font-weight: 700; margin: .67em 0; }
.game-info .tg-also { margin: 22px 0 0; } .game-info .tg-also a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(42,171,238,.14); box-shadow: inset 0 0 0 1.5px rgba(42,171,238,.5); color: #8fd6ff; font-weight: 600; text-decoration: none; } .game-info .tg-also svg { width: 18px; height: 18px; } body.tg .game-info .tg-also { display: none; }