/* El Juego de los Reinos — estética medieval oscura (arte 100% original) */
@font-face{font-family:"Cinzel";src:url(fonts/Cinzel.woff) format("woff");font-weight:400 900;font-display:swap}
@font-face{font-family:"Cinzel Decorative";src:url(fonts/CinzelDecorative-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Alegreya";src:url(fonts/Alegreya.woff) format("woff");font-weight:400 900;font-display:swap}
@font-face{font-family:"Alegreya";src:url(fonts/Alegreya-Italic.woff) format("woff");font-weight:400 900;font-style:italic;font-display:swap}
:root{
  --gold:#d9a845;--gold2:#f3d98e;--gold3:#8a6318;--iron:#3b3c42;--iron2:#1d1e22;--stone:#24211f;--parch:#ead7ae;--ink:#2a1a0c;--fire:#e0611e;--ember:#ff8a3d;--blood:#7d1212;--frost:#bcd6e6;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stonetex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .03' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .12 0 0 0 0 .11 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  --parchtex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --metal:linear-gradient(180deg,#fff0b8 0%,#e6b650 22%,#b07a22 55%,#e3b552 78%,#7a5212 100%);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#0c0b0a;color:#eadfc8;font-family:"Alegreya",Georgia,serif;font-size:17px}
body{background:radial-gradient(ellipse 120% 70% at 50% -10%,#3a2216 0%,transparent 60%),radial-gradient(ellipse at 50% 120%,#1a0e08 0%,transparent 60%),var(--stonetex),#100e0c;background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;background:var(--noise);opacity:.35;pointer-events:none;z-index:0}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;box-shadow:inset 0 0 120px 40px #000}
#app{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 10px 60px;display:flex;flex-direction:column;gap:12px}
h1,h2,h3{font-family:"Cinzel",Georgia,serif;letter-spacing:.06em;margin:0;font-weight:700}
h2{color:var(--gold2)}h3{color:var(--gold2);font-size:1rem;text-transform:uppercase;letter-spacing:.14em}
.goldtxt{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px #e0611e55)}
h1{font-family:"Cinzel Decorative","Cinzel",serif;font-size:2rem;text-align:center;line-height:1.05}
.sub{text-align:center;opacity:.85;margin:4px 0 6px;font-style:italic;color:#d9c7a3}
.ico{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
.crest{width:1.5em;height:1.8em;vertical-align:middle;flex:none;filter:drop-shadow(0 2px 2px #000a)}
/* paneles de piedra con remaches */
.panel{position:relative;background:linear-gradient(#2b2622f2,#1a1714f5),var(--stonetex);border:1px solid #000;border-radius:6px;padding:14px;box-shadow:inset 0 0 0 2px #4a3f33,inset 0 0 0 3px #000,inset 0 1px 18px #0009,0 8px 22px #000c}
.panel:before{content:"";position:absolute;inset:6px;pointer-events:none;background:
 radial-gradient(circle at 0 0,#c9a45a 0 2.5px,#5a4320 3px,transparent 4px) 0 0/12px 12px no-repeat,
 radial-gradient(circle at 100% 0,#c9a45a 0 2.5px,#5a4320 3px,transparent 4px) 100% 0/12px 12px no-repeat,
 radial-gradient(circle at 0 100%,#c9a45a 0 2.5px,#5a4320 3px,transparent 4px) 0 100%/12px 12px no-repeat,
 radial-gradient(circle at 100% 100%,#c9a45a 0 2.5px,#5a4320 3px,transparent 4px) 100% 100%/12px 12px no-repeat}
.parch{position:relative;background:var(--parchtex),radial-gradient(ellipse at center,#f2e3bf 30%,#dcc18b 85%,#b8955a 100%);color:var(--ink);border-radius:4px;box-shadow:inset 0 0 0 1px #8a6a3a,inset 0 0 28px #8a5a2299,0 6px 18px #000a}
.divider{height:14px;margin:6px auto;width:80%;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold2) 50%,var(--gold) 80%,transparent) center/100% 1.5px no-repeat;position:relative}
.divider:after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 8px var(--fire)}
label{display:block;font-family:"Cinzel",serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#c9b48a;margin:8px 0 4px}
input,select{width:100%;font:inherit;font-size:1.15rem;padding:12px;border-radius:4px;border:1px solid #000;background:var(--parchtex),#e9d6aa;color:var(--ink);outline:none;box-shadow:inset 0 2px 6px #6b4a2299,0 0 0 2px #5a4630}
input:focus{box-shadow:inset 0 2px 6px #6b4a2299,0 0 0 2px var(--gold),0 0 14px #e0611e66}
input.code{text-transform:uppercase;text-align:center;letter-spacing:12px;font-family:"Cinzel",serif;font-weight:900;font-size:1.7rem}
button{font-family:"Cinzel",Georgia,serif;font-weight:700;letter-spacing:.05em;font-size:1rem;border:1px solid #000;border-radius:5px;padding:14px 12px;cursor:pointer;color:#2a1a08;background:var(--metal);box-shadow:inset 0 1px 0 #fff8,inset 0 -2px 0 #0005,0 3px 0 #3a2508,0 6px 14px #000a;width:100%;transition:transform .08s,filter .2s;text-shadow:0 1px 0 #fff6;display:flex;align-items:center;justify-content:center;gap:.45em}
button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff8,0 1px 0 #3a2508}
button:disabled{filter:grayscale(.85) brightness(.6);cursor:default}
button.fire{color:#fff6e8;text-shadow:0 1px 2px #000;background:linear-gradient(180deg,#ffb066 0%,#e0611e 35%,#9c2a08 75%,#5a1404 100%);box-shadow:inset 0 1px 0 #ffd2a0,inset 0 -2px 0 #0006,0 3px 0 #2a0a02,0 0 22px #e0611e55,0 6px 14px #000a;animation:emberglow 2.8s ease-in-out infinite}
@keyframes emberglow{50%{box-shadow:inset 0 1px 0 #ffd2a0,inset 0 -2px 0 #0006,0 3px 0 #2a0a02,0 0 32px #ff8a3d88,0 6px 14px #000a}}
button.stone{color:#eadfc8;text-shadow:0 1px 1px #000;background:linear-gradient(#55504a,#36322d 55%,#26231f),var(--stonetex);box-shadow:inset 0 1px 0 #ffffff22,inset 0 0 0 1px #00000088,0 3px 0 #0b0a09,0 6px 12px #0009}
button.blood{color:#fbe7d8;text-shadow:0 1px 2px #000;background:linear-gradient(#b3322a,#7d1212 60%,#4a0808);box-shadow:inset 0 1px 0 #ff9a8a55,0 3px 0 #200303,0 6px 12px #000a}
button.sm{padding:8px 10px;font-size:.85rem;width:auto;border-radius:4px}
button.ib{padding:8px 10px;width:auto}
button.ib .ico{width:1.3em;height:1.3em}
.row{display:flex;gap:8px}.row>*{flex:1}
.wrap{display:flex;flex-wrap:wrap;gap:8px}
.tokens{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tok{flex-direction:column;padding:10px 4px 8px;background:linear-gradient(#2e2924,#1c1916);color:#d9c7a3;font-family:"Alegreya",serif;font-weight:700;font-size:.78rem;letter-spacing:0;line-height:1.1;text-shadow:none;box-shadow:inset 0 0 0 1px #4a3f33,0 3px 8px #0008;gap:4px}
.tok .crest{width:44px;height:52px}
.tok.on{background:linear-gradient(#4a3418,#2a1d0c);box-shadow:inset 0 0 0 2px var(--gold),0 0 16px #e0a04a77;color:var(--gold2)}
.tok.on .crest{animation:crestpulse 1.6s ease-in-out infinite}
@keyframes crestpulse{50%{transform:scale(1.08);filter:drop-shadow(0 0 8px #ffcf6a)}}
.tok.taken{opacity:.3}
.banner{display:inline-flex;align-items:center;justify-content:center}
.banner .crest{width:28px;height:34px}
.bigcode{font-family:"Cinzel",serif;font-size:3rem;font-weight:900;letter-spacing:14px;text-align:center;margin:4px 0 8px;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 12px #e0611e66)}
.plist{display:flex;flex-direction:column;gap:6px}
.pl{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:4px;background:linear-gradient(90deg,#00000055,#00000022);border-left:3px solid var(--pc,#5a4630);transition:background .3s}
.pl.turn{background:linear-gradient(90deg,#6b4a1a88,#2a1d0c44);box-shadow:inset 0 0 0 1px #d9a84588,0 0 14px #d9a84533}
.pl.turn .n:after{content:" ⟵";color:var(--gold)}
.pl.dead{opacity:.4;text-decoration:line-through}
.pl .n{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gold{color:var(--gold2);font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.gold .ico{color:var(--gold)}
.muted{opacity:.72;font-size:.92rem}
.center{text-align:center}
.hidden{display:none!important}
.homeemb{width:120px;margin:0 auto -4px;display:block;filter:drop-shadow(0 0 24px #e0611e66) drop-shadow(0 6px 6px #000)}
/* ---------- intro cinemática ---------- */
#intro{position:fixed;inset:0;z-index:50;overflow:hidden;background:linear-gradient(#05060c 0%,#141524 38%,#2a1a22 62%,#4a2010 82%,#1a0a04 100%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;transition:opacity 1s,transform 1.2s cubic-bezier(.6,0,.3,1)}
#intro.out{opacity:0;transform:scale(1.15);pointer-events:none}
#intro .stars{position:absolute;inset:0 0 50% 0;background-image:radial-gradient(1px 1px at 20% 30%,#fff9,transparent),radial-gradient(1px 1px at 70% 12%,#fffc,transparent),radial-gradient(1.5px 1.5px at 40% 8%,#fff,transparent),radial-gradient(1px 1px at 85% 40%,#fff8,transparent),radial-gradient(1px 1px at 10% 15%,#fffa,transparent),radial-gradient(1px 1px at 55% 35%,#fff7,transparent),radial-gradient(1px 1px at 92% 22%,#fff9,transparent);animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.45}}
#intro .moon{position:absolute;top:9%;right:14%;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fffbe8,#e9dcb8 55%,#b8a37a);box-shadow:0 0 40px 12px #f6e7b855,0 0 120px 40px #f6e7b822;animation:rise 3s ease-out both}
@keyframes rise{from{transform:translateY(40px);opacity:0}}
#intro .vista{position:absolute;left:0;right:0;bottom:0;width:100%;height:56%;animation:rise 2.4s ease-out both}
#intro .fog{position:absolute;left:-50%;width:200%;height:30%;bottom:4%;background:radial-gradient(ellipse 30% 50% at 25% 60%,#c9b8a033,transparent 70%),radial-gradient(ellipse 25% 40% at 70% 50%,#c9b8a028,transparent 70%);animation:drift 22s linear infinite;filter:blur(6px)}
#intro .fog.f2{bottom:-6%;animation-duration:34s;animation-direction:reverse;opacity:.8}
@keyframes drift{to{transform:translateX(25%)}}
#intro .glow{position:absolute;left:0;right:0;bottom:0;height:35%;background:radial-gradient(ellipse 80% 60% at 50% 100%,#e0611e55,transparent 70%);animation:flick 3s ease-in-out infinite alternate}
@keyframes flick{50%{opacity:.6}}
#intro .ttl{position:relative;margin-top:16vh;text-align:center;padding:0 18px}
#intro .ttl .emblem{width:110px;display:block;margin:0 auto 10px;filter:drop-shadow(0 0 22px #e0611e88) drop-shadow(0 6px 6px #000);animation:embin 1.8s cubic-bezier(.2,1.4,.4,1) .2s both}
@keyframes embin{from{transform:scale(.3) translateY(-30px);opacity:0;filter:blur(8px)}}
#intro .ttl .a{font-family:"Cinzel",serif;letter-spacing:.5em;color:#cdb58a;font-size:.95rem;animation:letters 2.2s ease-out .6s both}
#intro .ttl .b{font-family:"Cinzel Decorative",serif;font-size:2.7rem;line-height:1;margin:6px 0;animation:titlein 2.4s ease-out .9s both}
#intro .ttl .c{font-style:italic;color:#d9c7a3;letter-spacing:.12em;animation:letters 2s ease-out 2s both}
@keyframes letters{from{letter-spacing:1.2em;opacity:0;filter:blur(6px)}}
@keyframes titlein{from{opacity:0;transform:scale(1.4);filter:blur(10px)}}
#intro .tap{position:absolute;bottom:max(8vh,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-family:"Cinzel",serif;letter-spacing:.3em;color:var(--gold2);font-size:.9rem;text-shadow:0 0 10px #e0611e;animation:tapin 1s ease 3s both,pulse 1.8s ease-in-out 4s infinite}
@keyframes tapin{from{opacity:0}}
@keyframes pulse{50%{opacity:.35}}
/* ---------- tablero ---------- */
.topbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:linear-gradient(#1d1a17,#121010);border:1px solid #000;border-radius:5px;box-shadow:inset 0 0 0 1px #4a3f33,0 4px 12px #000a}
.topbar .t{flex:1;font-family:"Cinzel",serif;font-weight:700;color:var(--gold2);font-size:.92rem;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.boardwrap{position:relative;overflow:auto;border-radius:6px;padding:7px;background:linear-gradient(135deg,#5a5b62,#2a2b30 30%,#4a4b52 50%,#1d1e22 75%,#3b3c42);box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #8a8b92,inset 0 0 0 7px #2a2b30,inset 0 0 0 8px #000,0 0 0 1px #000,0 14px 34px #000d;max-height:80vh;touch-action:pan-x pan-y}
.boardwrap:before{content:"";position:absolute;inset:2px;pointer-events:none;z-index:6;background:radial-gradient(circle,#c7c8cf 0 1.6px,#222 2.2px,transparent 2.6px) 0 0/calc(100% / 11) 7px repeat-x,radial-gradient(circle,#c7c8cf 0 1.6px,#222 2.2px,transparent 2.6px) 0 100%/calc(100% / 11) 7px repeat-x}
.board{position:relative;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);width:var(--bw,100%);aspect-ratio:1;background:#1a1410;gap:1px}
.cell{position:relative;background:var(--parchtex),linear-gradient(160deg,#efdfb8,#d6bb83);color:var(--ink);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(var(--cw) * .165);line-height:1.02;text-align:center;cursor:pointer;box-shadow:inset 0 0 calc(var(--cw)*.18) #7a5a2a88}
.cell .ic{color:#4a2e12;line-height:0;margin:1px 0}
.cell .ic .ico{width:calc(var(--cw)*.36);height:calc(var(--cw)*.36);filter:drop-shadow(0 1px 0 #fff6)}
.cell .nm{font-family:"Cinzel",serif;font-weight:700;padding:0 1px;max-height:2.15em;overflow:hidden;letter-spacing:-.01em}
.cell .pr{font-size:.92em;font-weight:700;color:#5a3a12}
.cell.corner{background:radial-gradient(circle at 50% 40%,#4a2a14,#1b0f08 75%),var(--stonetex);color:var(--gold2);box-shadow:inset 0 0 0 1px #d9a84566,inset 0 0 calc(var(--cw)*.4) #000}
.cell.corner .ic{color:var(--gold)}
.cell.corner .ic .ico{width:calc(var(--cw)*.6);height:calc(var(--cw)*.6);filter:drop-shadow(0 0 6px #e0611e)}
.cell.corner .nm{font-size:1.05em;text-shadow:0 1px 0 #000}
.cell.spec{background:var(--parchtex),linear-gradient(160deg,#d9c398,#b39360)}
.cell.spec .ic{color:#6b1d0c}
.strip{position:absolute;background:linear-gradient(var(--gdir,180deg),#ffffff45,#ffffff00 50%,#00000055),var(--gc);box-shadow:0 0 0 1px #0008}
.side-b .strip{left:0;right:0;top:0;height:21%}.side-t .strip{left:0;right:0;bottom:0;height:21%;--gdir:0deg}
.side-l .strip{top:0;bottom:0;right:0;width:21%;--gdir:270deg}.side-r .strip{top:0;bottom:0;left:0;width:21%;--gdir:90deg}
.own{position:absolute;inset:0;border:calc(var(--cw)*.075) solid var(--oc);pointer-events:none;box-shadow:inset 0 0 calc(var(--cw)*.2) var(--oc)}
.bld{position:absolute;z-index:2;display:flex;gap:0;line-height:0;color:#f3d98e;filter:drop-shadow(0 1px 1px #000)}
.bld .ico{width:calc(var(--cw)*.2);height:calc(var(--cw)*.2)}
.bld .keep{color:#ff6a3a;width:calc(var(--cw)*.3);height:calc(var(--cw)*.3)}
.side-b .bld{top:1px;left:50%;transform:translateX(-50%)}.side-t .bld{bottom:1px;left:50%;transform:translateX(-50%)}.side-l .bld{right:1px;top:50%;transform:translateY(-50%);flex-direction:column}.side-r .bld{left:1px;top:50%;transform:translateY(-50%);flex-direction:column}
.mort{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#1a0f0866 0 3px,transparent 3px 8px);pointer-events:none}
.cell.hl{animation:hl 1s infinite alternate;z-index:3}
@keyframes hl{to{box-shadow:inset 0 0 0 3px var(--ember),0 0 16px var(--fire)}}
.cell.land{animation:land .9s ease-out}
@keyframes land{30%{filter:brightness(1.4) saturate(1.3);box-shadow:inset 0 0 0 3px var(--gold2),0 0 18px #ffd27a}}
.mid{grid-row:2/11;grid-column:2/11;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;background:radial-gradient(ellipse at 50% 45%,#3a2614 0%,#1a110a 60%,#0d0906 100%),var(--stonetex);text-align:center;overflow:hidden;box-shadow:inset 0 0 0 1px #d9a84555,inset 0 0 calc(var(--cw)*1.2) #000}
.mid:before{content:"";position:absolute;inset:6%;border:1px solid #d9a84533;border-radius:50%;background:repeating-conic-gradient(from 0deg,#d9a8450f 0 5deg,transparent 5deg 22.5deg);pointer-events:none;animation:spin 120s linear infinite}
.mid:after{content:"";position:absolute;inset:14%;border:1px dashed #d9a84522;border-radius:50%;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.mid>*{position:relative;z-index:1}
.mid .emblem{width:calc(var(--cw)*1.5);filter:drop-shadow(0 0 10px #e0611e88)}
.mid .logo{font-family:"Cinzel Decorative",serif;font-size:calc(var(--cw)*.38);line-height:1.05;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #000)}
.dice{display:flex;gap:calc(var(--cw)*.35);margin:3px 0;perspective:400px}
.die{width:calc(var(--cw)*1.0);height:calc(var(--cw)*1.0);background:radial-gradient(circle at 30% 25%,#fffaf0,#e9dcc0 55%,#b8a47c);border-radius:20%;box-shadow:inset 0 -3px 6px #7a654088,inset 0 2px 3px #fff,0 4px 0 #3a2c18,0 6px 12px #000c;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%}
.die i{width:72%;height:72%;margin:auto;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c22a1a,#5a0a04);box-shadow:inset 0 1px 1px #0008;visibility:hidden}
.die.roll{animation:tumble .28s linear infinite}
@keyframes tumble{0%{transform:rotateX(0) rotateZ(0) translateY(0)}25%{transform:rotateX(90deg) rotateZ(20deg) translateY(-14%)}50%{transform:rotateX(180deg) rotateZ(-15deg) translateY(-22%)}75%{transform:rotateX(270deg) rotateZ(10deg) translateY(-10%)}100%{transform:rotateX(360deg) rotateZ(0)}}
.die.landed{animation:dieland .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes dieland{from{transform:scale(1.3)}}
.cinfo{font-size:calc(var(--cw)*.25);max-width:94%;color:#eadfc8;display:flex;flex-direction:column;align-items:center;gap:2px}
.cinfo b{color:var(--gold2);display:inline-flex;align-items:center;gap:3px}
.cinfo .crest{width:calc(var(--cw)*.32);height:calc(var(--cw)*.38)}
.cinfo .ev{color:#ffcf98;font-style:italic;margin-top:2px;text-shadow:0 0 8px #e0611e88}
.ttimer{color:var(--gold2);font-weight:700;font-family:"Cinzel",serif}
.tk{position:absolute;width:calc(100%/11);height:calc(100%/11);display:flex;align-items:center;justify-content:center;transition:left .17s cubic-bezier(.4,0,.6,1),top .17s cubic-bezier(.4,0,.6,1);z-index:5;pointer-events:none}
.tk span{display:block;line-height:0;transform:translate(var(--ox),var(--oy));filter:drop-shadow(0 3px 2px #000c)}
.tk .crest{width:calc(var(--cw)*.5);height:calc(var(--cw)*.6)}
.tk.me span:after{content:"";position:absolute;left:50%;bottom:-14%;width:70%;height:12%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(#ffd27a,transparent 70%);animation:pulse 1.4s infinite}
.tk.hop span{animation:hop .17s}
@keyframes hop{50%{transform:translate(var(--ox),calc(var(--oy) - 35%)) scale(1.18)}}
/* ---------- acciones ---------- */
.act{display:flex;flex-direction:column;gap:10px}
.act .msg{font-size:1.05rem;text-align:center}
.propcard{padding:12px;text-align:center}
.propcard .hd{position:relative;padding:10px 8px;color:#fff;font-family:"Cinzel",serif;font-weight:700;text-shadow:0 1px 2px #000;margin:-4px -4px 8px;border-radius:2px;box-shadow:inset 0 0 0 1px #0006,inset 0 -10px 18px #0005;clip-path:polygon(0 0,100% 0,100% 82%,52% 100%,48% 100%,0 82%);padding-bottom:16px;display:flex;flex-direction:column;align-items:center;gap:2px}
.propcard .hd small{font-family:"Alegreya",serif;font-style:italic;font-weight:400;opacity:.9}
.propcard .hd .ico{width:1.5em;height:1.5em}
.rents{width:100%;font-size:.92rem;border-collapse:collapse;margin-top:6px}.rents td{padding:3px 6px;border-bottom:1px dotted #8a6a3a88}.rents td:last-child{text-align:right;font-weight:700}
.propcard .crest{width:1.2em;height:1.45em}
.myprops .g{margin-top:10px}
.prow{display:flex;align-items:center;gap:6px;padding:6px;border-radius:3px;background:linear-gradient(90deg,#00000055,#00000018);margin-top:4px}
.prow .dot{width:10px;height:30px;flex:none;clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);box-shadow:inset 0 0 0 1px #0006}
.prow .n{flex:1;font-size:.95rem;display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.prow .n .ico{width:.95em;height:.95em;color:var(--gold)}
.prow.m{opacity:.55}
.feed{display:flex;flex-direction:column;gap:3px;max-height:230px;overflow:auto;font-size:.92rem}
.feed div{padding:5px 8px;border-left:3px solid #5a4630;background:linear-gradient(90deg,#00000044,transparent)}
.feed .big,.feed .event{border-color:var(--fire);color:#ffd2a0}.feed .buy{border-color:var(--gold)}.feed .rent{border-color:#b02a2a}.feed .card{border-color:#8a5ac8}.feed .bad{border-color:#7d1212}.feed .good{border-color:#3d8b4a}
.feed div:first-child{animation:slidein .5s ease-out}
@keyframes slidein{from{opacity:0;transform:translateX(-12px)}}
/* ---------- modal ---------- */
#modal{position:fixed;inset:0;background:radial-gradient(ellipse at center,#000a,#000e);z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadein .25s}
@keyframes fadein{from{opacity:0}}
#modal .box{width:100%;max-width:420px;max-height:88vh;overflow:auto;animation:unfurl .4s cubic-bezier(.2,1.2,.4,1)}
@keyframes unfurl{from{transform:scaleY(.2) scaleX(.9);opacity:0}}
.flip{perspective:900px}
.card{position:relative;padding:26px 20px 64px;text-align:center;font-size:1.15rem;line-height:1.38;border-radius:4px;transform-style:preserve-3d;animation:cardflip .9s cubic-bezier(.3,1.3,.5,1) both}
@keyframes cardflip{0%{transform:rotateY(-180deg) scale(.6);filter:brightness(.3)}60%{filter:brightness(1.2)}100%{transform:rotateY(0) scale(1)}}
.card .ct{font-family:"Cinzel",serif;font-weight:900;font-size:1.35rem;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px}
.card .ct .ico{width:1.3em;height:1.3em}
.card.prof,.card.intr{background:var(--parchtex),radial-gradient(ellipse at center,#f4e6c2 25%,#dcc08a 80%,#a8824a 100%);color:var(--ink);box-shadow:inset 0 0 0 2px #6b4a22,inset 0 0 0 6px #e9d6aa,inset 0 0 0 7px #8a6a3a,inset 0 0 40px #8a5a2299,0 0 40px #000,0 0 60px var(--cglow)}
.card.prof{--cglow:#7048b099;--seal:#4a2a7a}.card.prof .ct{color:#3a1f5f}
.card.intr{--cglow:#b02a2a99;--seal:#7d1212}.card.intr .ct{color:#6b1010}
.card .seal{position:absolute;left:50%;bottom:12px;width:46px;height:46px;transform:translateX(-50%) rotate(-8deg);border-radius:50% 46% 52% 48%;background:radial-gradient(circle at 35% 30%,#ffffff66,#ffffff00 45%,#00000066),var(--seal);box-shadow:0 2px 4px #0008,inset 0 0 0 4px #0002;display:flex;align-items:center;justify-content:center;color:#0005;animation:stamp .5s ease-out .7s both}
.card .seal .ico{width:24px;height:24px;color:#ffffff55}
@keyframes stamp{from{transform:translateX(-50%) scale(2.2) rotate(-30deg);opacity:0}}
#toasts{position:fixed;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;width:min(92vw,460px)}
.toast{position:relative;background:linear-gradient(#2a221a,#16110c);border:1px solid #000;box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 3px #16110c,inset 0 0 0 4px #d9a84555,0 8px 22px #000;border-radius:3px;padding:11px 16px;font-weight:700;text-align:center;animation:toastin .45s cubic-bezier(.2,1.4,.4,1);color:var(--gold2)}
@keyframes toastin{from{transform:translateY(-30px) scaleX(.6);opacity:0}}
.toast.event{background:linear-gradient(#5a2408,#2a0f04),var(--stonetex);box-shadow:inset 0 0 0 1px var(--ember),inset 0 0 20px #e0611e55,0 0 30px #e0611e66;font-size:1.05rem;color:#ffe2c2}
#fx{position:fixed;inset:0;pointer-events:none;z-index:40}
#embers{position:fixed;inset:0;pointer-events:none;z-index:0}
/* banner de turno cinematográfico */
#turnban{position:fixed;left:0;right:0;top:38%;z-index:45;pointer-events:none;text-align:center;padding:16px 0;background:linear-gradient(90deg,transparent,#000d 18%,#000d 82%,transparent);animation:ban 2s ease-in-out both}
#turnban:before,#turnban:after{content:"";position:absolute;left:10%;right:10%;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold2),transparent)}
#turnban:before{top:4px}#turnban:after{bottom:4px}
#turnban .t1{font-family:"Cinzel Decorative",serif;font-size:2rem;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px #e0611e)}
#turnban .t2{font-family:"Cinzel",serif;letter-spacing:.3em;color:#d9c7a3;font-size:.8rem}
@keyframes ban{0%{opacity:0;transform:scaleY(0)}15%{opacity:1;transform:scaleY(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
.podium .r{display:flex;gap:8px;align-items:center;padding:8px;border-radius:3px;background:#00000055;margin-top:5px;font-weight:700}
.podium .r:first-child{background:var(--metal);color:var(--ink);font-size:1.15rem;box-shadow:0 0 20px #d9a84588}
.opt{display:flex;gap:6px}.opt button{padding:10px 6px;font-size:.9rem}
.opt button.on{background:linear-gradient(180deg,#ffb066 0%,#e0611e 40%,#9c2a08);color:#fff;text-shadow:0 1px 2px #000;box-shadow:inset 0 0 0 1px #ffd2a0,0 0 12px #e0611e88}
.srvlink{background:none;border:0;box-shadow:none;color:#a8957a;font-family:"Alegreya",serif;font-size:.85rem;text-decoration:underline;padding:4px;width:auto;margin:0 auto;text-shadow:none}
.legal{text-align:center;font-size:.8rem;opacity:.6}
.legal a{color:#c9b48a}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}
.ico.coin{color:#e2b04a;filter:drop-shadow(0 1px 0 #0008)}

/* ======================= v1.1 · Avatares, progresión y tienda (arte original) ======================= */
.avatar{width:2.2em;height:2.2em;flex:none;vertical-align:middle;filter:drop-shadow(0 2px 3px #000a)}
.avatar.big{width:120px;height:120px}
.pl .av{position:relative;line-height:0;flex:none}
.pl .av .avatar{width:40px;height:40px}
.pl .banner .crest{width:22px;height:27px}
.lvl{display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;height:1.7em;padding:0 .3em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#d9a43a 55%,#7a5212);color:#2a1a08;font-family:"Cinzel",serif;font-weight:900;font-size:.8rem;box-shadow:0 0 0 1.5px #2a1a08,0 2px 4px #000a;line-height:1}
.lvl.sm{position:absolute;right:-4px;bottom:-3px;font-size:.62rem;min-width:1.55em;height:1.55em}
small.ttl{display:block;font-weight:400;font-style:italic;font-size:.75rem;color:#cdb58a;line-height:1}
.podium .r:first-child small.ttl{color:#5a3a12}
.podium .av .avatar{width:34px;height:34px}
.avatar.winav{width:110px;height:110px;filter:drop-shadow(0 0 18px #e0a04a)}
.tk .avatar.tkav{width:calc(var(--cw)*.62);height:calc(var(--cw)*.62);filter:drop-shadow(0 3px 2px #000c)}
.feed .hasav{display:flex;align-items:center;gap:6px}
.feed .fav{line-height:0;flex:none}.feed .fav .avatar{width:24px;height:24px}
.tok.locked{opacity:.65}.tok em{font-style:normal;font-size:.68rem;color:var(--gold2);display:flex;gap:2px;align-items:center}
.small{font-size:.8rem}
/* marcos con brillo */
.fr-gold{filter:drop-shadow(0 0 4px #ffd54a) drop-shadow(0 2px 2px #000a)}
.fr-ember{animation:emberglow 1.6s ease-in-out infinite alternate}
.fr-frost{filter:drop-shadow(0 0 5px #9fd8ff) drop-shadow(0 2px 2px #000a)}
.fr-noble{filter:drop-shadow(0 0 6px #c48cff) drop-shadow(0 2px 2px #000a)}
.fr-dragon{animation:emberglow 1.1s ease-in-out infinite alternate}
.fr-silver{filter:drop-shadow(0 0 3px #e8eef4) drop-shadow(0 2px 2px #000a)}
.fr-laurel{filter:drop-shadow(0 0 3px #b8e070) drop-shadow(0 2px 2px #000a)}
@keyframes emberglow{from{filter:drop-shadow(0 0 3px #ff6a1a) drop-shadow(0 2px 2px #000a)}to{filter:drop-shadow(0 0 9px #ffb020) drop-shadow(0 0 2px #ff3a00)}}
/* barra de XP */
.xpbar{position:relative;height:16px;border-radius:9px;background:#0008;box-shadow:inset 0 1px 3px #000,0 0 0 1px #8a6a3a;overflow:hidden;margin:5px 0}
.xpbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(180deg,#9fe0ff,#2f8fd8 55%,#1a4f8a);box-shadow:0 0 10px #4ab0ff;transition:width 1.6s cubic-bezier(.3,.9,.3,1)}
.xpbar span{position:relative;display:block;text-align:center;font-size:.68rem;font-weight:700;line-height:16px;color:#fff;text-shadow:0 1px 2px #000;font-family:"Cinzel",serif}
.crn{color:var(--gold)}.crn-big{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--gold2);white-space:nowrap}
/* tarjeta del noble en el inicio */
.homeprof{display:flex;gap:12px;align-items:center}
.homeprof>.avatar{width:84px;height:84px;cursor:pointer}
.homeprof .hp{flex:1;min-width:0}
.ptitle{font-family:"Cinzel",serif;font-weight:700;color:var(--gold2);display:flex;align-items:center;gap:6px;cursor:pointer}
.hpb{align-items:center;margin-top:4px}.hpb>button{flex:none}.hpb .crn-big{justify-content:flex-end}
/* tienda */
.shop{display:flex;flex-direction:column;gap:10px}
.shophead{display:flex;align-items:center;justify-content:space-between;gap:8px}.shophead h2{font-size:1.25rem}.shophead .ib{flex:none}
.shop>.shophead,.shop>.wallet,.shop>.tabs,.shop>.testbanner{background:linear-gradient(#2b2622f2,#1a1714f5);padding:10px;border-radius:6px;box-shadow:inset 0 0 0 1px #4a3f33}
.wallet{display:flex;align-items:center;justify-content:space-between;gap:8px}.wallet button{flex:none}
.testbanner{text-align:center;font-size:.82rem;color:#ffe2a8;border:1px dashed #d9a845aa}
.tabs{display:flex;gap:5px;overflow-x:auto}.tabs button{flex:1;white-space:nowrap}
.sitems{display:flex;flex-direction:column;gap:10px}
.sitem{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:6px;background:linear-gradient(#2e2924,#16130f),var(--stonetex);box-shadow:inset 0 0 0 1px #6a5434,inset 0 0 0 3px #000,0 6px 16px #000a}
.sitem.have{box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 4px #000,0 0 16px #d9a84544}
.sitem.k-pass{background:radial-gradient(ellipse at 50% 0,#4a2a6a,#1a1020 70%),var(--stonetex);box-shadow:inset 0 0 0 2px #c48cff,inset 0 0 0 4px #000,0 0 22px #c48cff44}
.sinfo h3{color:var(--gold2);font-size:1rem}.sinfo p{margin:4px 0 8px;font-size:.92rem;color:#d9c7a3}
.owned{text-align:center;color:var(--gold2);font-weight:700;padding:8px}
.pprev{display:flex;justify-content:center;align-items:flex-end;gap:10px}.pprev .emblem{width:90px}.pprev .crest{width:50px;height:60px}
.fprev{display:flex;justify-content:center;gap:16px}.fprev .crest{width:60px;height:72px}
.aprev{display:flex;justify-content:center}.aprev .avatar{width:120px;height:120px}
.dprev{display:flex;justify-content:center;gap:18px;--cw:56px;padding:6px}
.dprev .die{width:56px;height:56px;padding:7px}.dprev .die.three i:nth-child(1),.dprev .die.three i:nth-child(5),.dprev .die.three i:nth-child(9){visibility:visible}
.bprev{--cw:58px;display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px) 40px;gap:1px;justify-content:center;background:transparent}
.bprev .cell{font-size:10px;border-radius:2px}.bprev .strip{left:0;right:0;top:0;height:22%}
.bprev .bmid{grid-column:1/4;border-radius:3px;background:radial-gradient(ellipse at 50% 45%,#3a2614 0%,#1a110a 60%,#0d0906 100%)}
.testnote{padding:10px;font-size:.92rem}
.adsim .emblem{width:90px;margin:8px auto}.adbar{height:10px;border-radius:5px;background:#0008;overflow:hidden;margin:10px 0}.adbar i{display:block;height:100%;width:0;background:var(--metal);transition:width 1s linear}
#adt{font-family:"Cinzel",serif;font-size:2rem;color:var(--gold2);margin-bottom:8px}
/* perfil */
.profile .phero,.editor .eprev{display:flex;gap:12px;align-items:center;margin:10px 0}
.pname{font-family:"Cinzel",serif;font-weight:700;font-size:1.15rem}
.phero>div,.eprev>div{flex:1;min-width:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.stats .st{background:#0006;border-radius:4px;padding:6px 4px;text-align:center;box-shadow:inset 0 0 0 1px #4a3f33}
.stats b{display:block;color:var(--gold2);font-family:"Cinzel",serif;font-size:1.05rem}.stats span{font-size:.72rem;opacity:.8}
.medals{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:6px}
.medal{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:6px;border-radius:4px;background:#0006;opacity:.45;filter:grayscale(1)}
.medal .mi{grid-row:1/3;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#fff3c4,#d9a43a 55%,#7a5212);color:#3a2208;box-shadow:0 0 0 2px #2a1a08}
.medal b{font-size:.78rem;line-height:1.05}.medal span{font-size:.66rem;opacity:.8;line-height:1.05}
.medal.got{opacity:1;filter:none;box-shadow:inset 0 0 0 1px #d9a84588}
.medal.mini{display:inline-flex;gap:4px;padding:3px 7px;font-size:.78rem;font-weight:700;color:#3a2208;background:var(--metal);border-radius:12px}
.road{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:6px}
.road .rt{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.66rem;text-align:center;opacity:.4}.road .rt.on{opacity:1;color:var(--gold2)}
/* editor de avatar */
.editor .eparts{max-height:42vh;overflow:auto;padding-right:2px}
.elabel{font-family:"Cinzel",serif;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);margin:8px 0 4px}
.eopts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.eopts.colors{grid-template-columns:repeat(8,1fr)}
.eo{position:relative;flex-direction:column;gap:2px;padding:5px 2px;background:linear-gradient(#2e2924,#1c1916);color:#d9c7a3;font-family:"Alegreya",serif;font-size:.68rem;letter-spacing:0;text-shadow:none;box-shadow:inset 0 0 0 1px #4a3f33}
.eo .avatar{width:52px;height:52px}
.eo.on{box-shadow:inset 0 0 0 2px var(--gold),0 0 12px #e0a04a66;color:var(--gold2)}
.eo.lk .avatar{filter:grayscale(.8) brightness(.55)}
.eo em{position:absolute;top:28%;left:0;right:0;font-style:normal;font-weight:700;color:#ffe2a8;text-shadow:0 1px 2px #000;display:flex;justify-content:center;gap:2px;font-size:.7rem}
.sw{aspect-ratio:1;padding:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px #0008,0 2px 4px #000a;color:#fff}
.sw.on{box-shadow:0 0 0 3px var(--gold),0 0 10px var(--gold)}.sw.lk{opacity:.5}
/* reporte de XP al final + subida de nivel */
.xpreport{margin-top:10px;padding:10px 12px;text-align:left}
.xph{font-family:"Cinzel",serif;font-weight:900;font-size:1.1rem;color:#1a4f8a;display:flex;align-items:center;gap:4px;margin-bottom:4px}
.xl{display:flex;justify-content:space-between;font-size:.88rem;border-bottom:1px dotted #8a6a3a66;padding:2px 0}.xl b{color:#1a4f8a}
.xpl{margin-top:6px;font-family:"Cinzel",serif;font-weight:700;display:flex;align-items:center;gap:6px}
.newmedals{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
#lvlup{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#2a1a08ee,#000f 70%);animation:fadein .4s;cursor:pointer;overflow:hidden}
#lvlup.out{opacity:0;transition:opacity .5s}
#lvlup .rays{position:absolute;width:200vmax;height:200vmax;background:repeating-conic-gradient(from 0deg,#ffd27a22 0 8deg,transparent 8deg 22deg);animation:spin 18s linear infinite}
#lvlup .lu{position:relative;text-align:center;animation:lvlin .9s cubic-bezier(.2,1.6,.4,1) both}
#lvlup .avatar{width:130px;height:130px;filter:drop-shadow(0 0 26px #ffb020)}
#lvlup .lt2{font-family:"Cinzel",serif;letter-spacing:.25em;color:#ffe2a8;font-size:.85rem;margin-top:8px}
#lvlup .lnum{font-family:"Cinzel Decorative",serif;font-size:5.2rem;line-height:1;animation:lvlnum 1.2s ease-out .3s both}
#lvlup .lt1{font-family:"Cinzel",serif;font-weight:900;font-size:1.5rem;color:var(--gold2);text-shadow:0 0 14px #e0611e}
#lvlup .lrew{margin-top:10px;color:#eadfc8;font-weight:700;padding:0 20px}
#lvlup .tap{margin-top:22px;font-family:"Cinzel",serif;letter-spacing:.3em;font-size:.75rem;color:var(--gold2);animation:pulse 1.4s infinite}
@keyframes lvlin{from{transform:scale(.2) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes lvlnum{0%{transform:scale(3);opacity:0;filter:blur(8px)}60%{transform:scale(.9);opacity:1;filter:none}100%{transform:scale(1)}}

/* ---------- tableros temáticos ---------- */
.th-ice .board{background:#0b1a26}
.bprev.th-ice .board{background:#0b1a26}
.th-ice .cell{background:radial-gradient(circle at 20% 15%,#ffffffaa,transparent 40%),linear-gradient(160deg,#eef7fc,#b9d6e8);color:#14304a}
.bprev.th-ice .cell{background:radial-gradient(circle at 20% 15%,#ffffffaa,transparent 40%),linear-gradient(160deg,#eef7fc,#b9d6e8);color:#14304a}
.th-ice .cell.spec{background:linear-gradient(160deg,#cfe5f2,#93b9d2)}
.bprev.th-ice .cell.spec{background:linear-gradient(160deg,#cfe5f2,#93b9d2)}
.th-ice .cell .ic,.th-ice .cell .pr{color:#1d4a70}
.bprev.th-ice .cell .ic,.bprev.th-ice .cell .pr{color:#1d4a70}
.th-ice .cell.corner{background:radial-gradient(circle at 50% 40%,#2a5a80,#0a1a2a 75%);color:#e6f6ff}
.bprev.th-ice .cell.corner{background:radial-gradient(circle at 50% 40%,#2a5a80,#0a1a2a 75%);color:#e6f6ff}
.th-ice .mid{background:radial-gradient(ellipse at 50% 40%,#3a6a90 0%,#122a40 60%,#060f18 100%)}
.bprev.th-ice .mid,.bprev.th-ice .bmid{background:radial-gradient(ellipse at 50% 40%,#3a6a90 0%,#122a40 60%,#060f18 100%)}
.th-ice .boardwrap{background:linear-gradient(135deg,#c8e4f4,#5a88a8 30%,#a8cce0 50%,#2a4a62 75%,#7aa8c4)}
.bprev.th-ice .boardwrap{background:linear-gradient(135deg,#c8e4f4,#5a88a8 30%,#a8cce0 50%,#2a4a62 75%,#7aa8c4)}
.th-ice .mid:before{border-color:#bfe6ff44;background:repeating-conic-gradient(from 0deg,#bfe6ff12 0 5deg,transparent 5deg 22.5deg)}
.bprev.th-ice .mid:before{border-color:#bfe6ff44;background:repeating-conic-gradient(from 0deg,#bfe6ff12 0 5deg,transparent 5deg 22.5deg)}
.th-desert .board{background:#3a2208}
.bprev.th-desert .board{background:#3a2208}
.th-desert .cell{background:var(--parchtex),linear-gradient(160deg,#f6dc9c,#d9a85a);color:#4a2808}
.bprev.th-desert .cell{background:var(--parchtex),linear-gradient(160deg,#f6dc9c,#d9a85a);color:#4a2808}
.th-desert .cell.spec{background:linear-gradient(160deg,#e8b878,#c0844a)}
.bprev.th-desert .cell.spec{background:linear-gradient(160deg,#e8b878,#c0844a)}
.th-desert .cell .ic,.th-desert .cell .pr{color:#8a3a10}
.bprev.th-desert .cell .ic,.bprev.th-desert .cell .pr{color:#8a3a10}
.th-desert .cell.corner{background:radial-gradient(circle at 50% 40%,#c0542a,#4a1a08 75%);color:#ffe8b0}
.bprev.th-desert .cell.corner{background:radial-gradient(circle at 50% 40%,#c0542a,#4a1a08 75%);color:#ffe8b0}
.th-desert .mid{background:radial-gradient(circle at 50% 30%,#ff8a3a 0 9%,transparent 10%),linear-gradient(180deg,#5a1a10 0%,#a8441a 40%,#d98a3a 62%,#8a4a1a 63%,#c07a3a 75%,#6a3010 100%)}
.bprev.th-desert .mid,.bprev.th-desert .bmid{background:radial-gradient(circle at 50% 30%,#ff8a3a 0 9%,transparent 10%),linear-gradient(180deg,#5a1a10 0%,#a8441a 40%,#d98a3a 62%,#8a4a1a 63%,#c07a3a 75%,#6a3010 100%)}
.th-desert .boardwrap{background:linear-gradient(135deg,#e0b070,#8a5a20 30%,#d0a060 50%,#5a3410 75%,#b08040)}
.bprev.th-desert .boardwrap{background:linear-gradient(135deg,#e0b070,#8a5a20 30%,#d0a060 50%,#5a3410 75%,#b08040)}
.th-volcano .board{background:#ff5a1a}
.bprev.th-volcano .board{background:#ff5a1a}
.th-volcano .cell{background:radial-gradient(ellipse at 70% 110%,#ff5a1a55,transparent 50%),linear-gradient(160deg,#3a3634,#1c1a19);color:#f4dcc0}
.bprev.th-volcano .cell{background:radial-gradient(ellipse at 70% 110%,#ff5a1a55,transparent 50%),linear-gradient(160deg,#3a3634,#1c1a19);color:#f4dcc0}
.th-volcano .cell.spec{background:radial-gradient(ellipse at 30% 110%,#ff8a1a66,transparent 55%),linear-gradient(160deg,#2c2826,#151312)}
.bprev.th-volcano .cell.spec{background:radial-gradient(ellipse at 30% 110%,#ff8a1a66,transparent 55%),linear-gradient(160deg,#2c2826,#151312)}
.th-volcano .cell .ic,.th-volcano .cell .pr{color:#ff9a4a}
.bprev.th-volcano .cell .ic,.bprev.th-volcano .cell .pr{color:#ff9a4a}
.th-volcano .cell .ic .ico{filter:drop-shadow(0 0 4px #ff5a1a)}
.bprev.th-volcano .cell .ic .ico{filter:drop-shadow(0 0 4px #ff5a1a)}
.th-volcano .cell.corner{background:radial-gradient(circle at 50% 60%,#ff7a1a,#6a1404 55%,#120604 90%);color:#ffe0a0}
.bprev.th-volcano .cell.corner{background:radial-gradient(circle at 50% 60%,#ff7a1a,#6a1404 55%,#120604 90%);color:#ffe0a0}
.th-volcano .mid{background:radial-gradient(ellipse at 50% 100%,#ff8a1a 0%,#a8240a 30%,#3a0a04 60%,#0a0302 100%)}
.bprev.th-volcano .mid,.bprev.th-volcano .bmid{background:radial-gradient(ellipse at 50% 100%,#ff8a1a 0%,#a8240a 30%,#3a0a04 60%,#0a0302 100%)}
.th-volcano .boardwrap{background:linear-gradient(135deg,#4a4442,#1a1716 30%,#3a3432 50%,#0a0908 75%,#2a2422);box-shadow:inset 0 0 0 1px #000,0 0 30px #ff5a1a66}
.bprev.th-volcano .boardwrap{background:linear-gradient(135deg,#4a4442,#1a1716 30%,#3a3432 50%,#0a0908 75%,#2a2422);box-shadow:inset 0 0 0 1px #000,0 0 30px #ff5a1a66}
.th-volcano .board{animation:lavapulse 3s ease-in-out infinite alternate}
.bprev.th-volcano .board{animation:lavapulse 3s ease-in-out infinite alternate}
@keyframes lavapulse{from{background:#c43a0a}to{background:#ff8a2a}}
/* ---------- dados especiales ---------- */
.dk-gold .die{background:radial-gradient(circle at 30% 25%,#fff8d0,#f0c450 40%,#b07a22 80%,#7a5212);box-shadow:inset 0 -3px 6px #5a3a0a,inset 0 2px 3px #fff8,0 4px 0 #4a2a08,0 6px 14px #000c,0 0 14px #ffd54a66}
.dprev.dk-gold .die{background:radial-gradient(circle at 30% 25%,#fff8d0,#f0c450 40%,#b07a22 80%,#7a5212);box-shadow:inset 0 -3px 6px #5a3a0a,inset 0 2px 3px #fff8,0 4px 0 #4a2a08,0 6px 14px #000c,0 0 14px #ffd54a66}
.dk-gold .die i{background:radial-gradient(circle at 35% 35%,#c0304a,#4a0414)}
.dprev.dk-gold .die i{background:radial-gradient(circle at 35% 35%,#c0304a,#4a0414)}
.dk-obsidian .die{background:radial-gradient(circle at 30% 22%,#6a6a78,#1a1a22 45%,#050508);box-shadow:inset 0 -3px 6px #000,inset 0 2px 3px #ffffff44,0 4px 0 #000,0 6px 14px #000c,0 0 10px #8a5aff44}
.dprev.dk-obsidian .die{background:radial-gradient(circle at 30% 22%,#6a6a78,#1a1a22 45%,#050508);box-shadow:inset 0 -3px 6px #000,inset 0 2px 3px #ffffff44,0 4px 0 #000,0 6px 14px #000c,0 0 10px #8a5aff44}
.dk-obsidian .die i{background:radial-gradient(circle at 35% 35%,#fff3c4,#d9a43a 60%,#7a5212)}
.dprev.dk-obsidian .die i{background:radial-gradient(circle at 35% 35%,#fff3c4,#d9a43a 60%,#7a5212)}
.dk-bone .die{background:radial-gradient(circle at 30% 25%,#f4ecd8,#cfc1a0 55%,#9a8a68);box-shadow:inset 0 -3px 6px #6a5a3888,inset 0 2px 3px #fff,0 4px 0 #3a2c18,0 6px 12px #000c}
.dprev.dk-bone .die{background:radial-gradient(circle at 30% 25%,#f4ecd8,#cfc1a0 55%,#9a8a68);box-shadow:inset 0 -3px 6px #6a5a3888,inset 0 2px 3px #fff,0 4px 0 #3a2c18,0 6px 12px #000c}
.dk-bone .die i{background:radial-gradient(circle at 35% 35%,#3a2a1a,#0a0604)}
.dprev.dk-bone .die i{background:radial-gradient(circle at 35% 35%,#3a2a1a,#0a0604)}

/* ================= v1.2 — chat ================= */
.chatfab{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:24;width:54px;height:54px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#8a2a12,#3a0e06);border:1px solid #000;box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 4px #3a0e06,0 6px 18px #000c;color:var(--gold2)}
.chatfab .ico{width:28px;height:28px}
.badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#c0392b;color:#fff;font:700 12px/20px sans-serif;box-shadow:0 0 0 2px #16110c;text-align:center}
.badge.hidden{display:none}
.cbubble{position:fixed;z-index:26;transform:translate(-50%,-100%);max-width:min(64vw,240px);padding:7px 11px;border-radius:12px;background:linear-gradient(#fff8e6,#ead7ae);color:var(--ink);font-weight:700;font-size:.92rem;line-height:1.2;box-shadow:0 0 0 1px #5a3a12,0 6px 14px #000a;pointer-events:none;animation:bubin .3s cubic-bezier(.2,1.5,.4,1);word-break:break-word}
.cbubble:after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#ead7ae}
.cbubble.out{opacity:0;transition:opacity .45s}
@keyframes bubin{from{transform:translate(-50%,-80%) scale(.5);opacity:0}}
.chatbox,.friends{width:min(94vw,480px);max-height:86vh;display:flex;flex-direction:column;gap:8px;overflow:auto}
.tabs{display:flex;gap:6px}
.cmsgs{flex:1;min-height:150px;max-height:38vh;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:4px;background:#0006;box-shadow:inset 0 0 0 1px #d9a84533}
.cm{display:flex;gap:7px;align-items:flex-end;max-width:88%}
.cm>div{background:linear-gradient(#2e251c,#1d1711);padding:6px 10px;border-radius:10px 10px 10px 2px;box-shadow:inset 0 0 0 1px #d9a84544}
.cm b{display:block;font-size:.75rem;color:var(--gold)}
.cm span{word-break:break-word}
.cm.me{align-self:flex-end;flex-direction:row-reverse}
.cm.me>div{background:linear-gradient(#6b2a10,#3a1406);border-radius:10px 10px 2px 10px}
.cm.k-emoji span{font-size:1.7rem;line-height:1}
.cm.k-quick span{font-family:"Cinzel",serif;font-weight:700;color:#ffe2c2}
.cav .avatar,.cpeople .av .avatar{width:30px;height:30px}
.cquick{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}
.chip{flex:none;padding:6px 10px;border-radius:16px;font-size:.82rem;background:linear-gradient(#ead7ae,#c9a86a);color:var(--ink);border:1px solid #5a3a12;box-shadow:0 2px 0 #3a2410;white-space:nowrap;min-height:0}
.cemo{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.emo{width:40px;height:40px;padding:0;font-size:1.35rem;background:#0005;border:1px solid #d9a84533;border-radius:8px;min-height:0}
.cinput{display:flex;gap:6px}
.cinput input{flex:1;min-width:0}
.cpeople{display:flex;flex-direction:column;gap:6px}
.toast.chat{text-align:left;font-weight:400;color:#f1e3c4;background:linear-gradient(#24303a,#121a20);box-shadow:inset 0 0 0 1px #8fb4cc,0 8px 22px #000}
.toast.chat b{color:var(--gold2)}
/* ================= amigos / invitaciones ================= */
.mycode{text-align:center;padding:10px;color:var(--ink)}
.fcode{font-family:"Cinzel Decorative",serif;font-size:2rem;letter-spacing:.18em;color:#6b1d0c;margin:2px 0 6px}
.pl.fr .av{position:relative;line-height:0}
.pl.fr .av .avatar{width:40px;height:40px}
.pl.fr .n small{display:block;font-weight:400;font-size:.74rem;color:#cdb98e;white-space:normal}
.pl.fr .dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#6b6b6b;box-shadow:0 0 0 2px #16110c}
.pl.fr.on .dot{background:#3fd16a;box-shadow:0 0 0 2px #16110c,0 0 8px #3fd16a}
.invite .avatar.big{width:110px;height:110px}
.openapp{display:block;margin:8px auto;text-align:center;padding:10px;border-radius:6px;background:linear-gradient(#2c6b3a,#123a1c);color:#e9ffe9;font-weight:700;text-decoration:none;box-shadow:inset 0 0 0 1px #8fe0a0}
.vtog{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.vtog button{flex:1 1 auto}

/* ================= v1.2 — tablero 3D ================= */
.dice3d{display:none}
.v3d .boardwrap{overflow:hidden;perspective:1100px;perspective-origin:50% 0%;padding:6px 4px 26px;max-height:none;background:radial-gradient(ellipse at 50% 40%,#3a2a1a,#0d0906 75%);box-shadow:inset 0 0 0 1px #000,inset 0 0 40px #000}
.v3d .boardwrap:before{display:none}
.v3d .board{margin:-7% auto -7%;transform-style:preserve-3d;transform-origin:50% 50%;transform:rotateX(46deg) scale(var(--cs,1)) translate(var(--cx,0px),var(--cy,0px));transition:transform .6s cubic-bezier(.3,.1,.3,1);box-shadow:0 0 0 2px #000,0 calc(var(--cw)*.18) 0 #3a2410,0 calc(var(--cw)*.2) 0 #000,0 calc(var(--cw)*.6) 40px #000e;border-radius:3px}
.v3d .cell{overflow:visible;transform-style:preserve-3d;transform:translateZ(2px);box-shadow:inset 0 0 calc(var(--cw)*.18) #7a5a2a88,0 2px 0 #5a3a18,0 3px 2px #0008}
.v3d .cell.corner{transform:translateZ(4px);box-shadow:inset 0 0 0 1px #d9a84566,inset 0 0 calc(var(--cw)*.4) #000,0 3px 0 #2a1a0c,0 4px 3px #000a}
.v3d .cell .nm{overflow:hidden}
.v3d .mid{transform:translateZ(0)}
.v3d .bld{filter:none;transform-style:preserve-3d;z-index:4}
.v3d .bld .ico{transform-origin:50% 100%;transform:rotateX(-70deg) translateY(-10%) scale(1.5);filter:drop-shadow(0 2px 1px #000)}
.v3d .bld .keep{transform:rotateX(-70deg) translateY(-12%) scale(1.6)}
.v3d #tks{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.v3d .tk{transform-style:preserve-3d;transform:translateZ(3px)}
.v3d .tk span{transform-origin:50% 100%;transform:translate(var(--ox),var(--oy)) rotateX(-46deg) translateY(-38%) scale(1.45);filter:drop-shadow(0 4px 3px #000)}
.v3d .tk:before{content:"";position:absolute;left:50%;top:58%;width:62%;height:30%;transform:translate(calc(-50% + var(--ox,0%)),var(--oy,0%));border-radius:50%;background:radial-gradient(#000c,transparent 70%)}
.v3d .tk.hop span{animation:hop3d .17s}
@keyframes hop3d{50%{transform:translate(var(--ox),var(--oy)) rotateX(-46deg) translateY(-80%) scale(1.55)}}
.v3d .tk.me span:after{display:none}
.v3d .mid .dice{opacity:0}
.v3d .dice3d{display:flex;position:absolute;left:50%;top:66%;transform:translateX(-50%);gap:24px;z-index:8;pointer-events:none;perspective:600px}
.dwrap{position:relative;width:40px;height:40px}
.cube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(25deg)}
.cube .face{position:absolute;inset:0;width:40px;height:40px;padding:7px;border-radius:18%;backface-visibility:hidden}
.cube .f1{transform:translateZ(20px)}.cube .f6{transform:rotateY(180deg) translateZ(20px)}
.cube .f2{transform:rotateX(90deg) translateZ(20px)}.cube .f5{transform:rotateX(-90deg) translateZ(20px)}
.cube .f3{transform:rotateY(90deg) translateZ(20px)}.cube .f4{transform:rotateY(-90deg) translateZ(20px)}
.cube .face{box-shadow:inset 0 0 0 1px #0003,inset 0 -3px 6px #7a654066}
.dsh{position:absolute;left:8%;right:8%;bottom:-12px;height:12px;border-radius:50%;background:radial-gradient(#000d,transparent 70%);opacity:.55}
/* modo rendimiento: menos efectos para móviles lentos */
.perf .mid:before,.perf .mid:after{animation:none;display:none}
.perf .board,.perf .tk,.perf .tk span,.perf .cell,.perf .bld .ico{filter:none!important}
.perf .tk span,.perf .tk .avatar{filter:none!important}
.perf .cell{box-shadow:none}
.perf.v3d .board{transition:transform .25s linear}
.perf .cell.hl{animation:none;box-shadow:inset 0 0 0 3px var(--ember)}
.perf *{text-shadow:none}
.perf .toast,.perf .panel{animation:none}

/* ================= v1.2 — heraldo de pagos ================= */
#herald{position:fixed;left:50%;top:max(64px,calc(env(safe-area-inset-top) + 56px));transform:translateX(-50%);z-index:40;width:min(94vw,440px);pointer-events:none;animation:herin .5s cubic-bezier(.2,1.4,.4,1)}
#herald.out{opacity:0;transform:translate(-50%,-30px);transition:all .35s}
@keyframes herin{from{transform:translate(-50%,-60px) scale(.8);opacity:0}}
#herald .hb{position:relative;padding:12px 14px 20px;text-align:center;color:#ffe9c4;background:linear-gradient(#8a1a10,#4a0a06 70%),var(--stonetex);border:1px solid #000;box-shadow:inset 0 0 0 2px var(--gold),inset 0 0 0 4px #4a0a06,inset 0 0 0 5px #d9a84588,0 14px 30px #000d;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%)}
#herald .hb:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff06 0 10px,transparent 10px 20px);pointer-events:none}
.htop{font-family:"Cinzel",serif;font-size:.72rem;letter-spacing:.2em;color:var(--gold2)}
.hparties{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 2px}
.hp{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;flex:1}
.hp b{font-size:.85rem;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hav{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(#3a2614,#120a05);box-shadow:0 0 0 2px var(--gold),0 0 14px #ffd27a66}
.hav .avatar{width:52px;height:52px}
.hav.bank svg,.hav.pot .ico{width:38px;height:38px;color:var(--gold)}
.harrow{display:flex;flex-direction:column;align-items:center;color:var(--gold2);font-size:1.4rem;line-height:1}
.harrow .ico{width:24px;height:24px;color:var(--gold);animation:hcoin .8s infinite alternate}
@keyframes hcoin{to{transform:translateX(8px)}}
.hamt{font-family:"Cinzel Decorative",serif;font-size:1.9rem;line-height:1.1;display:flex;align-items:center;justify-content:center;gap:4px}
.hamt .coin{width:26px;height:26px}
.htext{font-size:.9rem;font-weight:700;line-height:1.25}
.flycoin{position:fixed;left:-12px;top:-12px;z-index:41;width:24px;height:24px;pointer-events:none;color:#f0c450;filter:drop-shadow(0 2px 2px #000a)}
.flycoin .ico{width:24px;height:24px}
.cashdelta{position:fixed;z-index:42;transform:translate(-50%,-50%);font:800 1.25rem "Cinzel",serif;pointer-events:none;animation:cdelta 1.7s ease-out forwards;text-shadow:0 2px 0 #000,0 0 8px #000}
.cashdelta.up{color:#5dff8a}.cashdelta.down{color:#ff6a5a}
@keyframes cdelta{0%{opacity:0;margin-top:6px}15%{opacity:1}100%{opacity:0;margin-top:-46px}}
.flash-up{animation:flup 1.2s}.flash-down{animation:fldn 1.2s}
@keyframes flup{0%,60%{color:#5dff8a;text-shadow:0 0 10px #5dff8a}}
@keyframes fldn{0%,60%{color:#ff6a5a;text-shadow:0 0 10px #ff6a5a}}
.chip,.cpeople button,.pl.fr button,.tabs button{width:auto;flex:none}
.tabs button{flex:1}
.cpeople .pl .n{min-width:0}
.hpb{flex-wrap:wrap;row-gap:6px}.hpb>button{padding:8px 9px;font-size:.78rem}
.hpb .badge{position:absolute;top:-6px;right:-6px}
.cpeople button{padding:6px 8px;font-size:.7rem}

/* ================= v1.2.1 — dados en el centro, ambientación y giro de cámara ================= */
@property --rz{syntax:'<angle>';inherits:true;initial-value:0deg}
.v3d .board{transform:rotateX(46deg) scale(var(--cs,1)) rotateZ(var(--rz,0deg)) translate(var(--cx,0px),var(--cy,0px));transition:transform .7s cubic-bezier(.3,.1,.3,1),--rz 1.5s cubic-bezier(.45,.05,.3,1)}
.v3d .tk span{transform:translate(var(--ox),var(--oy)) rotateZ(calc(var(--rz,0deg) * -1)) rotateX(-46deg) translateY(-38%) scale(1.45)}
@keyframes hop3d{50%{transform:translate(var(--ox),var(--oy)) rotateZ(calc(var(--rz,0deg) * -1)) rotateX(-46deg) translateY(-80%) scale(1.55)}}
.v3d .bld .ico{transform:rotateZ(calc(var(--rz,0deg) * -1)) rotateX(-70deg) translateY(-10%) scale(1.5)}
.v3d .bld .keep{transform:rotateZ(calc(var(--rz,0deg) * -1)) rotateX(-70deg) translateY(-12%) scale(1.6)}
/* dados: viven dentro del cuadro central del tablero (no tapan casillas) */
.v3d .dice3d{display:block;position:absolute;left:50%;top:50%;width:0;height:0;gap:0;perspective:none;transform:translateZ(4px);transform-style:preserve-3d;z-index:8;pointer-events:none}
.v3d .dice3d .dwrap{position:absolute;top:-36px;width:36px;height:36px;transform-style:preserve-3d;transform-origin:50% 100%;transform:translate(var(--tx,0px),var(--ty,0px)) rotateZ(calc(var(--rz,0deg) * -1)) rotateX(-46deg)}
.v3d .dice3d .dwrap:first-child{left:-44px}.v3d .dice3d .dwrap:last-child{left:8px}
.v3d .dice3d .cube .face{width:36px;height:36px;padding:6px}
.v3d .dice3d .cube .f1{transform:translateZ(18px)}.v3d .dice3d .cube .f6{transform:rotateY(180deg) translateZ(18px)}.v3d .dice3d .cube .f2{transform:rotateX(90deg) translateZ(18px)}.v3d .dice3d .cube .f5{transform:rotateX(-90deg) translateZ(18px)}.v3d .dice3d .cube .f3{transform:rotateY(90deg) translateZ(18px)}.v3d .dice3d .cube .f4{transform:rotateY(-90deg) translateZ(18px)}
.v3d .dice3d .dsh{bottom:-6px}
/* escenario vivo en el centro */
.mid .scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.mid .scene svg{width:100%;height:100%;display:block}
.mid .scene:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 58% 46% at 50% 52%,#000a,#0004 60%,transparent 85%),linear-gradient(#0000 70%,#0005)}
.mid:has(.scene):before{display:none}
.mid .logo,.mid .cinfo{text-shadow:0 2px 3px #000,0 0 10px #000}
.board{--sk1:#79aee0;--sk2:#f2dfb0;--sun:#ffe9a0}
.board.amb-dusk{--sk1:#3b3a6b;--sk2:#e8875a;--sun:#ff9a4a}
.board.amb-night{--sk1:#060d22;--sk2:#2a2350;--sun:#e8eef8}
.board.wx-tormenta{--sk1:#2a2f38;--sk2:#596270;--sun:#9aa3ad}
.board.wx-dragon{--sk1:#3a0a06;--sk2:#d9541c;--sun:#ff6a2a}
.board.wx-invierno{--sk1:#a9bccb;--sk2:#e8eef3;--sun:#ffffff}
.board.wx-calor{--sk1:#e8a05a;--sk2:#ffe2a0;--sun:#fff2b0}
.scene .sk1{stop-color:var(--sk1)}.scene .sk2{stop-color:var(--sk2)}.scene .sun{fill:var(--sun);filter:drop-shadow(0 0 8px var(--sun))}
.scene .stars{fill:#fff;opacity:0;transition:opacity 2s}.amb-night .scene .stars{opacity:1}
.scene .win{opacity:.2;transition:opacity 2s}.amb-night .scene .win,.amb-dusk .scene .win{opacity:1}
.wx-invierno .scene svg{filter:saturate(.45) brightness(1.18)}
.wx-dragon .scene svg,.wx-calor .scene svg{filter:saturate(1.2) sepia(.25)}
.scene .flag{transform-box:fill-box;transform-origin:0 50%;animation:flag 1.4s ease-in-out infinite alternate}
@keyframes flag{to{transform:skewY(7deg) scaleX(.86)}}
.scene .boat{animation:boat 16s ease-in-out infinite alternate}.scene .boat.b2{animation-duration:21s;animation-direction:alternate-reverse}
@keyframes boat{0%{transform:translate(-30px,0) rotate(-3deg)}25%{transform:translate(-10px,-2px) rotate(3deg)}50%{transform:translate(10px,0) rotate(-3deg)}75%{transform:translate(25px,-2px) rotate(3deg)}100%{transform:translate(40px,0) rotate(-2deg)}}
.scene .shine{animation:river 2.4s linear infinite}@keyframes river{to{stroke-dashoffset:-40}}
.scene .waves{animation:waves 3s linear infinite}@keyframes waves{to{transform:translateX(-40px)}}
.scene .fog{position:absolute;left:-40%;width:180%;height:20%;top:36%;background:radial-gradient(ellipse at center,#fff4,transparent 70%);animation:fog 26s ease-in-out infinite alternate}
.scene .fog.f2{top:60%;height:16%;animation-duration:34s;animation-direction:alternate-reverse;opacity:.7}
@keyframes fog{to{transform:translateX(22%)}}
.wx-tormenta .scene .fog,.wx-bandidos .scene .fog,.wx-invierno .scene .fog{background:radial-gradient(ellipse at center,#fff8,transparent 70%)}
.wx-tormenta .scene:before{content:'';position:absolute;inset:0;z-index:2;background:#fff;opacity:0;animation:lightning 7s infinite}
@keyframes lightning{0%,92%,96%,100%{opacity:0}93%{opacity:.5}95%{opacity:.25}}
/* partículas según el clima: polen de día, luciérnagas de noche, nieve, lluvia, brasas, confeti, hojas doradas */
.scene .wx{position:absolute;inset:0;z-index:1}
.scene .wx i{position:absolute;left:var(--x);top:-4%;width:calc(3px * var(--s));height:calc(3px * var(--s));border-radius:50%;background:#ffe9a0;opacity:0;animation:pfall calc(9s / var(--s)) linear var(--d) infinite}
@keyframes pfall{0%{transform:translate(0,0);opacity:0}10%{opacity:.7}50%{transform:translate(14px,calc(var(--cw) * 4.6))}100%{transform:translate(-6px,calc(var(--cw) * 9.4));opacity:0}}
@keyframes prise{0%{transform:translate(0,calc(var(--cw) * 9.4));opacity:0}15%{opacity:.9}100%{transform:translate(12px,0);opacity:0}}
@keyframes pfly{0%,100%{transform:translate(0,calc(var(--cw) * 6.5));opacity:0}30%{opacity:1}50%{transform:translate(18px,calc(var(--cw) * 5.6));opacity:.3}70%{opacity:1}}
.amb-day.wx-none .scene .wx i,.wx-paz .scene .wx i{opacity:0;background:#fff6c8;width:calc(2px * var(--s));height:calc(2px * var(--s))}
.amb-night .scene .wx i{background:#d8ff6a;box-shadow:0 0 6px #d8ff6a;animation-name:pfly;animation-duration:calc(6s / var(--s))}
.wx-invierno .scene .wx i{background:#fff;box-shadow:0 0 3px #fff;animation-name:pfall;animation-duration:calc(7s / var(--s))}
.wx-tormenta .scene .wx i{background:#bfe3ff;border-radius:1px;width:1.4px;height:calc(10px * var(--s));animation-name:pfall;animation-duration:calc(1.3s / var(--s))}
.wx-dragon .scene .wx i,.wx-calor .scene .wx i{background:#ff8a3d;box-shadow:0 0 6px #ff6a1a;animation-name:prise;animation-duration:calc(5s / var(--s))}
.wx-festival .scene .wx i{border-radius:1px;animation-name:pfall;animation-duration:calc(5s / var(--s))}
.wx-festival .scene .wx i:nth-child(3n){background:#e8541c}.wx-festival .scene .wx i:nth-child(3n+1){background:#3fd16a}.wx-festival .scene .wx i:nth-child(3n+2){background:#5aa0ff}
.wx-cosecha .scene .wx i{background:#d9a845;border-radius:0 60% 0 60%;width:calc(5px * var(--s));animation-name:pfall;animation-duration:calc(8s / var(--s))}
/* entorno alrededor del tablero 3D: campos, bosques y mar */
.v3d .board:before{content:'';position:absolute;inset:-42%;transform:translateZ(-6px);pointer-events:none;border-radius:50%;background:linear-gradient(#1e4d6e 0,#2b6a8c 13%,#3f6230 19%,transparent 24%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg%3E%3Cpath d='M14 4L6 20h16Z' fill='%23234a26'/%3E%3Cpath d='M14 0L8 12h12Z' fill='%23306b35'/%3E%3Crect x='13' y='20' width='2' height='4' fill='%234a2e12'/%3E%3C/g%3E%3Cg transform='translate(44 34)'%3E%3Cpath d='M8 2L2 14h12Z' fill='%23234a26'/%3E%3Crect x='7' y='14' width='2' height='3' fill='%234a2e12'/%3E%3C/g%3E%3Ccircle cx='40' cy='12' r='5' fill='%232c5226'/%3E%3Ccircle cx='12' cy='46' r='4' fill='%232c5226'/%3E%3C/svg%3E") 0 0/64px 64px,radial-gradient(ellipse at center,#4a6e35 0%,#33542a 38%,#1d3517 58%,#0d0906 74%)}
.v3d.perf .board:before{background:radial-gradient(ellipse at center,#3a5a2c 0%,#1d3517 55%,#0d0906 74%)}
/* decoración temática de cada reino en sus casillas */
.cell[class*=' g-']:after{content:'';position:absolute;right:4%;bottom:4%;width:40%;height:40%;background:var(--deco) center/contain no-repeat;opacity:.3;pointer-events:none;z-index:0}
.cell.g-sur{--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%234a5a22' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M10 38V14M18 38V8M26 38V16M33 38V20'/%3E%3C/g%3E%3Cg fill='%235a3a12'%3E%3Cellipse cx='10' cy='12' rx='2.4' ry='5'/%3E%3Cellipse cx='18' cy='6' rx='2.4' ry='5'/%3E%3Cellipse cx='26' cy='14' rx='2.4' ry='5'/%3E%3C/g%3E%3C/svg%3E")}
.cell.g-norte{--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%233a6f8c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M20 4v32M6 12l28 16M6 28l28-16'/%3E%3Cpath d='M15 6l5 4 5-4M15 34l5-4 5 4M5 17l6 1-1-6M35 23l-6-1 1 6M5 23l6-1-1 6M35 17l-6 1 1-6' fill='none'/%3E%3C/g%3E%3C/svg%3E")}
.cell.g-islas{--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 28q5-5 9 0t9 0 9 0 9 0M2 36q5-5 9 0t9 0 9 0 9 0' fill='none' stroke='%232b5f86' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M22 22q-2-10 2-16M24 6q-8 0-10 6M24 6q8-1 10 5M24 6q-4 4-3 10' fill='none' stroke='%232e6b3e' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.cell.g-desierto{--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='29' cy='11' r='6' fill='%23d9822b'/%3E%3Cpath d='M0 34q10-12 20-4t20-2V40H0Z' fill='%23c9873e'/%3E%3Cpath d='M0 38q12-8 24-2t16 0' fill='none' stroke='%238a5a22' stroke-width='1.6'/%3E%3C/svg%3E")}
.cell.g-rio{--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='18' r='13' fill='none' stroke='%235a3a12' stroke-width='2.4'/%3E%3Cpath d='M20 5v26M7 18h26M11 9l18 18M29 9L11 27' stroke='%235a3a12' stroke-width='1.8'/%3E%3Cpath d='M2 36q5-4 9 0t9 0 9 0 9 0' fill='none' stroke='%232b6f9c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.cell.g-valle{--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%238a6a12' stroke-width='2' fill='%23c9a227' stroke-linecap='round'%3E%3Cpath d='M20 39V8' fill='none'/%3E%3Cellipse cx='16' cy='12' rx='3' ry='5' transform='rotate(-25 16 12)'/%3E%3Cellipse cx='24' cy='12' rx='3' ry='5' transform='rotate(25 24 12)'/%3E%3Cellipse cx='16' cy='21' rx='3' ry='5' transform='rotate(-25 16 21)'/%3E%3Cellipse cx='24' cy='21' rx='3' ry='5' transform='rotate(25 24 21)'/%3E%3Cellipse cx='20' cy='5' rx='2.6' ry='4.4'/%3E%3C/g%3E%3C/svg%3E")}
.cell.g-montana{--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M1 37L14 12l7 11 6-8 12 22Z' fill='%234c5a4e'/%3E%3Cpath d='M14 12l-5 9 5-2 4 3ZM27 15l-3 5 3-1 3 3Z' fill='%23f1f5fa'/%3E%3C/svg%3E")}
.cell.g-capital{--deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 38V18h6v-5h3v5h4V10h6v8h4v-5h3v5h6v20Z' fill='%232a3a8c'/%3E%3Cpath d='M17 10l3-7 3 7Z' fill='%23c9a227'/%3E%3Crect x='18' y='28' width='4' height='10' rx='2' fill='%23ead7ae'/%3E%3C/svg%3E")}
.cell.g-norte{background-image:linear-gradient(160deg,#ffffff55,transparent 45%),var(--parchtex),linear-gradient(160deg,#efdfb8,#d6bb83)}
/* modo rendimiento: escenario quieto, sin partículas ni niebla */
.perf .scene *,.perf .scene:before{animation:none!important}.perf .scene .fog,.perf .scene .wx{display:none}.perf .scene svg{filter:none!important}.perf .scene .sun{filter:none}
@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}.v3d .board{transition:transform .3s,--rz .4s}}
.vtog button{flex:1 1 45%}

/* v1.2.1: el centro (escenario, emblema, textos) y los dados se mantienen derechos aunque el tablero gire */
.v3d .mid{transform:rotateZ(calc(var(--rz,0deg) * -1))}
.v3d .dice3d{display:block;left:0;top:0;width:100%;height:100%;transform:translateZ(4px) rotateZ(calc(var(--rz,0deg) * -1));transform-style:preserve-3d}
.v3d .dice3d .dslot{position:absolute;width:0;height:0;transform-style:preserve-3d}
.v3d .dice3d .dwrap{transform:translate(var(--tx,0px),var(--ty,0px)) rotateX(-46deg)}

/* ================= v1.2.1 — bancarrota: triste (quien cae) y graciosa (los demás) ================= */
#fall{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;text-align:center;cursor:pointer;animation:fin .4s ease-out;overflow:hidden}
#fall.out{opacity:0;transition:opacity .35s}
@keyframes fin{from{opacity:0}}
#fall.sad{background:radial-gradient(ellipse at 50% 40%,#2a3240,#0b0e14 75%);color:#cfd8e6}
#fall.funny{background:radial-gradient(ellipse at 50% 35%,#f6e7b8,#c9a86a 60%,#6b4a22);color:#3a1a08}
.ftitle{font-family:"Cinzel Decorative",serif;font-size:1.7rem;margin:6px 0 0;line-height:1.15}
#fall.sad .ftitle{color:#e6eef8;text-shadow:0 2px 8px #000}
#fall.funny .ftitle{color:#6b1d0c;text-shadow:0 2px 0 #fff8}
.fsub{max-width:340px;font-weight:700;margin:0}
.fskip{font-size:.75rem;opacity:.6;margin-top:6px}
.fstage{position:relative;width:min(80vw,320px);height:min(80vw,300px)}
/* triste: castillo que se derrumba, estandarte que cae, lluvia */
.fcastle{position:absolute;left:10%;right:10%;bottom:18%;width:80%}
.fcastle g{transform-box:fill-box;transform-origin:50% 100%}
.fcastle .fc-l{animation:crumbL 2.4s .5s ease-in forwards}.fcastle .fc-m{animation:crumbM 2.6s .9s ease-in forwards}.fcastle .fc-r{animation:crumbR 2.4s .7s ease-in forwards}
@keyframes crumbL{30%{transform:rotate(-4deg)}100%{transform:translate(-14px,60px) rotate(-38deg);opacity:.25}}
@keyframes crumbM{20%{transform:translateX(2px)}25%{transform:translateX(-2px)}100%{transform:translateY(80px) scaleY(.4);opacity:.25}}
@keyframes crumbR{30%{transform:rotate(4deg)}100%{transform:translate(14px,60px) rotate(40deg);opacity:.25}}
.fbanner{position:absolute;left:50%;top:2%;transform:translateX(-50%);animation:bfall 3s .4s cubic-bezier(.5,0,.7,1) forwards}
.fbanner .crest{width:56px;height:68px;filter:drop-shadow(0 4px 6px #000)}
@keyframes bfall{30%{transform:translateX(-50%) rotate(12deg)}100%{transform:translate(-30%,170px) rotate(-70deg);opacity:.3}}
.fav-wrap{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);animation:sadin 1.2s ease-out}
.fav-wrap .avatar{width:120px;height:120px;filter:grayscale(.45) drop-shadow(0 6px 10px #000)}
.fav-wrap .tear{animation:tear 1.4s ease-in infinite}
@keyframes tear{0%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes sadin{from{transform:translate(-50%,30px);opacity:0}}
.rain{position:absolute;inset:0;pointer-events:none}
.rain i{position:absolute;top:-12%;width:1.5px;height:60px;background:linear-gradient(transparent,#9fc6ff);opacity:.6;animation:rain .9s linear infinite}
@keyframes rain{to{transform:translate(-30px,115vh)}}
/* graciosa: huye en calzones perseguido por el ganso real */
.fstage.field{height:200px;width:100%;max-width:440px;border-bottom:4px solid #6b8a3a}
.runner{position:absolute;bottom:0;left:0;width:90px;animation:run 4.4s linear forwards}
.runner .rhead .avatar{width:74px;height:74px;display:block;margin:0 auto -8px;animation:bob .22s ease-in-out infinite alternate}
.runner .rbody{display:block;width:56px;margin:0 auto}
.runner .lg1{animation:legA .22s infinite alternate}.runner .lg2{animation:legB .22s infinite alternate}
.runner .rlegs path,.runner .rarms path{transform-box:fill-box;transform-origin:50% 0}
.runner .ar1{animation:legA .22s infinite alternate}.runner .ar2{animation:legB .22s infinite alternate}
@keyframes legA{from{transform:rotate(28deg)}to{transform:rotate(-28deg)}}
@keyframes legB{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
@keyframes bob{to{transform:translateY(-5px) rotate(-4deg)}}
.sweat{position:absolute;top:2px;left:-6px;font-size:18px;animation:bob .3s infinite alternate}
.goose{position:absolute;bottom:0;left:0;width:84px;animation:chase 4.4s linear forwards}
.goose .beak{transform-box:fill-box;transform-origin:0 50%;animation:honk .35s infinite alternate}
.goose .glegs path{transform-box:fill-box;transform-origin:50% 0;animation:legA .18s infinite alternate}
@keyframes honk{to{transform:scaleY(1.8) rotate(-8deg)}}
@keyframes run{0%{transform:translateX(-100px)}100%{transform:translateX(min(110vw,520px))}}
@keyframes chase{0%{transform:translateX(-260px)}100%{transform:translateX(min(90vw,420px))}}
.dust{position:absolute;bottom:0;left:0;right:0;height:10px;background:radial-gradient(circle at 20% 100%,#a0855a88,transparent 30%),radial-gradient(circle at 60% 100%,#a0855a66,transparent 25%)}
/* modo rendimiento: misma escena, sin lluvia ni animaciones finas */
#fall.lite .rain{display:none}#fall.lite .runner .rlegs path,#fall.lite .runner .rarms path,#fall.lite .goose .beak,#fall.lite .goose .glegs path,#fall.lite .fav-wrap .tear,#fall.lite .runner .rhead .avatar,#fall.lite .sweat{animation:none}
#fall.lite .fav-wrap .avatar,#fall.lite .fbanner .crest{filter:none}
/* v1.2.2 — indicador discreto de reconexión */
#netpill{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#16110ce6;border:1px solid #d9a84588;color:var(--gold2,#f3d98a);font-size:.82rem;font-weight:700;box-shadow:0 6px 18px #000a;pointer-events:none;animation:toastin .35s ease-out;white-space:nowrap}
#netpill small{opacity:.7;font-weight:400}
#netpill.ok{border-color:#6fbf6f99;color:#cfeccf}
#netpill .spin{width:12px;height:12px;border-radius:50%;border:2px solid #d9a84544;border-top-color:#d9a845;animation:netspin .9s linear infinite}
@keyframes netspin{to{transform:rotate(360deg)}}
.bootwait h2{font-size:1.15rem}