/* Tema: Yu-Gi-Oh! antiguo — noche en el desierto, pirámides, oro y lapislázuli (aire Forbidden Memories) */
:root{
  --bg:#080a1c; --panel:rgba(22,18,46,.88); --panel2:#241c4a; --linea:#6b5321; --txt:#f3ead2; --dim:#b3a37c;
  --oro:#e6b73e; --oro2:#a97a1b; --oro3:#f6dc8a; --lapis:#1e3a8a; --turq:#2bb3a6;
  --m:#d98324; --s:#2aa58a; --t:#b8408a; --ok:#6fd49a; --mal:#e06060;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;color:var(--txt);font:16px/1.35 Georgia,"Times New Roman",serif;background:var(--bg)}
body{
  min-height:100vh;min-height:100dvh;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 160' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%23140f2b' d='M0 160V128L70 70l70 58 40-30 95 62 60-64 70 66 40-34 75 68V160z'/%3E%3Cpath fill='%2310102a' d='M300 160L412 40l112 120z'/%3E%3C/svg%3E") bottom center/100% auto no-repeat fixed,
    radial-gradient(2px 2px at 12% 10%,#fff8 50%,transparent),radial-gradient(1.5px 1.5px at 38% 22%,#fff7 50%,transparent),
    radial-gradient(2px 2px at 67% 8%,#fff9 50%,transparent),radial-gradient(1.5px 1.5px at 86% 26%,#fff6 50%,transparent),
    radial-gradient(1.5px 1.5px at 25% 40%,#fff6 50%,transparent),radial-gradient(2px 2px at 92% 48%,#fff7 50%,transparent),
    linear-gradient(#070817 0%,#120e30 38%,#2a1b3d 66%,#6a4620 100%) fixed;
}
#app{max-width:560px;margin:0 auto;padding:0 14px calc(24px + env(safe-area-inset-bottom));min-height:100dvh}
h1,h2,h3{margin:0;font-weight:700}
.cargando{padding:40px 0;text-align:center;color:var(--dim)}
.greca{height:10px;margin:14px 0;opacity:.85;background:linear-gradient(135deg,var(--oro2) 25%,transparent 25%) -5px 0/10px 10px,linear-gradient(225deg,var(--oro2) 25%,transparent 25%) -5px 0/10px 10px,linear-gradient(315deg,var(--oro2) 25%,transparent 25%) 0 0/10px 10px,linear-gradient(45deg,var(--oro2) 25%,transparent 25%) 0 0/10px 10px}
.ojo{display:block;margin:30px auto 6px;width:92px;height:auto;filter:drop-shadow(0 0 12px rgba(230,183,62,.55))}
.titulo{font-size:30px;font-weight:800;letter-spacing:5px;text-align:center;margin:6px 0 4px;color:var(--oro);text-transform:uppercase;text-shadow:0 2px 0 #5a3d06,0 0 18px rgba(230,183,62,.45)}
.titulo.chico{font-size:22px;letter-spacing:3px;margin-top:22px}
.sub{text-align:center;color:var(--dim);margin:0 0 18px;font-style:italic}
.card{position:relative;background:var(--panel);border:1px solid var(--linea);border-radius:6px;padding:16px;margin:0 0 14px;box-shadow:inset 0 0 0 3px rgba(18,13,36,.9),inset 0 0 0 4px rgba(169,122,27,.55),0 6px 20px rgba(0,0,0,.4)}
label{display:block;font-size:12px;color:var(--oro);margin:0 0 6px;letter-spacing:2px;text-transform:uppercase}
input[type=text]{width:100%;padding:13px;border-radius:4px;border:1px solid var(--linea);background:#0c0a22;color:var(--txt);font:inherit;font-size:19px}
input[type=text]:focus{outline:2px solid var(--oro);outline-offset:1px}
.btn{display:block;width:100%;padding:15px 16px;border:1px solid #6e4d0c;border-radius:5px;font:inherit;font-size:18px;font-weight:800;letter-spacing:1px;color:#2a1b02;background:linear-gradient(#f6dc8a,var(--oro) 45%,var(--oro2));box-shadow:inset 0 1px 0 #fff8,0 3px 0 #5a3d06,0 6px 14px rgba(0,0,0,.45);cursor:pointer;margin:0 0 12px;text-align:center}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff8,0 1px 0 #5a3d06}
.btn.sec{background:linear-gradient(#2c2358,#1c1640);color:var(--txt);border-color:var(--linea);box-shadow:inset 0 1px 0 #fff2,0 3px 0 #0a0820}
.btn[disabled]{opacity:.5;filter:grayscale(.6)}
.linkbtn{background:none;border:0;color:var(--dim);text-decoration:underline;font:inherit;font-size:14px;padding:8px;cursor:pointer;display:block;margin:0 auto}
.stepper{display:flex;align-items:center;justify-content:space-between;background:#0c0a22;border:1px solid var(--linea);border-radius:5px;padding:6px}
.stepper button{width:54px;height:48px;border-radius:5px;border:1px solid var(--linea);background:linear-gradient(#2c2358,#1c1640);color:var(--oro);font-size:26px}
.stepper b{font-size:22px;color:var(--oro3)}
.msg{padding:10px 12px;border-radius:5px;margin:0 0 12px;font-size:14px}
.msg.err{background:#3a1424;border:1px solid #8a2c44;color:#ffc0cb}
.msg.info{background:#13244a;border:1px solid #2c4a8e;color:#c3d8ff}

/* sala */
.codigo{font-size:46px;font-weight:800;letter-spacing:10px;text-align:center;color:var(--oro3);margin:6px 0 4px;text-shadow:0 0 16px rgba(230,183,62,.5);padding-left:10px}
.enlace{font-size:12px;color:var(--dim);word-break:break-all;text-align:center;margin:0 0 12px}
.slots{list-style:none;margin:0;padding:0}
.slots li{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:4px;background:#0c0a22;border:1px solid var(--linea);margin:0 0 8px}
.slots li.vacio{color:var(--dim);border-style:dashed;background:transparent}
.slots .pto{width:10px;height:10px;transform:rotate(45deg);background:var(--oro)}
.slots .vacio .pto{background:var(--linea)}
.tag{font-size:11px;padding:2px 8px;border-radius:3px;background:var(--panel2);color:var(--dim);margin-left:auto;letter-spacing:1px}

/* barra de draft (compacta) */
.top{position:sticky;top:0;z-index:5;background:linear-gradient(rgba(8,10,28,.97) 82%,rgba(8,10,28,0));padding:10px 14px 6px;margin:0 -14px}
.top .l1{display:flex;align-items:center;gap:10px}
.top .ronda{font-weight:800;color:var(--oro);letter-spacing:2px;text-transform:uppercase;font-size:15px;flex:1}
.mazobtn{border:1px solid var(--linea);background:linear-gradient(#2c2358,#1c1640);color:var(--oro3);border-radius:5px;padding:8px 12px;font:inherit;font-size:14px;font-weight:700}
.mazobtn.on{border-color:var(--oro);box-shadow:0 0 10px rgba(230,183,62,.4)}
.barra{height:6px;border-radius:2px;background:#0c0a22;border:1px solid var(--linea);margin:8px 0 6px;overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--oro2),var(--oro3));width:0;transition:width .3s}
.jug{display:flex;gap:6px;overflow-x:auto;padding:2px 0;scrollbar-width:none}
.jug::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;font-size:12px;padding:3px 9px;border-radius:3px;background:var(--panel2);border:1px solid var(--linea);color:var(--dim);white-space:nowrap}
.chip.yo{border-color:var(--oro);color:var(--oro3)}
.chip.espera{color:var(--txt);border-color:#6b7bd0}
.chip.hecho{color:var(--ok)}
.pasa{font-size:13px;color:var(--dim);margin:6px 0 8px;font-style:italic}
.pasa b{color:var(--oro3);font-style:normal}

/* cartas: el sobre entero de un vistazo (3 columnas) */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rejilla.peq{grid-template-columns:repeat(4,1fr);gap:6px}
.carta{position:relative;overflow:hidden;background:#0c0a22;border:2px solid var(--linea);border-radius:5px;cursor:pointer;padding:0;color:var(--txt);text-align:left;display:block;width:100%;font:inherit;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.carta.m{border-color:var(--m)} .carta.s{border-color:var(--s)} .carta.t{border-color:var(--t)}
.carta:active{transform:scale(.97)}
.carta .im{display:block;width:100%;aspect-ratio:1/1;background:#06061a;object-fit:cover}
.carta .nom{display:block;padding:4px 5px 5px;font-size:11px;font-weight:700;line-height:1.15;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;background:linear-gradient(#1a1438,#110d2a)}
.carta .ins{position:absolute;top:0;left:0;width:0;height:0;border-style:solid;border-width:22px 22px 0 0;border-color:transparent}
.carta.m .ins{border-top-color:var(--m)} .carta.s .ins{border-top-color:var(--s)} .carta.t .ins{border-top-color:var(--t)}
.peq .carta{border-width:1.5px;border-radius:4px}
.peq .carta .nom{display:none}
.cnt{display:flex;gap:6px;margin:0 0 10px}
.cnt div{flex:1;text-align:center;padding:6px 2px;border-radius:4px;background:var(--panel);border:1px solid var(--linea);font-size:11px;color:var(--dim);letter-spacing:1px;text-transform:uppercase}
.cnt b{display:block;font-size:20px;color:var(--txt);letter-spacing:0}
.cnt .m b{color:var(--m)} .cnt .s b{color:var(--s)} .cnt .t b{color:var(--t)}
.grupo{font-size:12px;color:var(--oro);margin:14px 0 6px;text-transform:uppercase;letter-spacing:3px}
.espera-box{text-align:center;padding:34px 10px}
.espera-box .anillo{width:46px;height:46px;transform:rotate(45deg);border:4px solid var(--panel2);border-top-color:var(--oro);margin:0 auto 18px;animation:gira 1.1s linear infinite}
@keyframes gira{to{transform:rotate(405deg)}}

/* detalle de carta (ampliar + efecto) */
.vel{position:fixed;inset:0;background:rgba(2,3,12,.82);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.hoja{position:relative;width:100%;max-width:560px;max-height:93dvh;overflow:auto;background:linear-gradient(#1e1741,#120d2b);border-radius:14px 14px 0 0;border:1px solid var(--oro2);border-bottom:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));animation:sube .18s ease-out;box-shadow:0 -10px 40px rgba(0,0,0,.6)}
@keyframes sube{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.cerrar{position:absolute;top:10px;right:12px;width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);background:#0c0a22;color:var(--oro3);font-size:20px;line-height:1;z-index:2}
.hoja .grande{width:min(70vw,290px);aspect-ratio:1/1;object-fit:cover;border-radius:5px;display:block;margin:0 auto 10px;border:3px solid var(--linea);box-shadow:0 0 22px rgba(230,183,62,.25)}
.hoja.m .grande{border-color:var(--m)} .hoja.s .grande{border-color:var(--s)} .hoja.t .grande{border-color:var(--t)}
.hoja h3{text-align:center;font-size:20px;margin:0 36px 2px;color:var(--oro3)}
.hoja .meta{text-align:center;color:var(--dim);font-size:13px;margin-bottom:10px;letter-spacing:1px}
.hoja .ef{background:#0c0a22;border:1px solid var(--linea);border-radius:5px;padding:12px;font-size:16px;line-height:1.45;max-height:32dvh;overflow:auto;white-space:pre-wrap;margin-bottom:14px}

/* exportar */
.codebox{width:100%;min-height:92px;background:#06061a;color:var(--oro3);border:1px solid var(--linea);border-radius:5px;padding:10px;font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;word-break:break-all;resize:none}
ol.pasos{padding-left:20px;margin:6px 0 0;color:var(--dim);font-size:15px}
ol.pasos li{margin:0 0 6px}
ol.pasos b{color:var(--oro3)}
.lista-txt{font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;background:#06061a;border:1px solid var(--linea);border-radius:5px;padding:10px;max-height:45dvh;overflow:auto}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#2a2050;border:1px solid var(--oro);color:var(--txt);padding:10px 16px;border-radius:4px;z-index:40;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.6)}

/* ---- imágenes oficiales (v2) ---- */
.ojo{width:74px}
.hero{margin:0 -14px;position:relative}
.hero img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 68%,transparent);mask-image:linear-gradient(#000 68%,transparent)}
.banner{margin:0 -14px 4px;position:relative}
.banner img{display:block;width:100%;height:150px;object-fit:cover;object-position:center 42%;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.dorso-gira{width:84px;height:auto;border-radius:6px;display:block;margin:0 auto 16px;animation:gira3d 1.8s ease-in-out infinite;box-shadow:0 0 18px rgba(230,183,62,.4)}
@keyframes gira3d{0%{transform:perspective(500px) rotateY(0)}100%{transform:perspective(500px) rotateY(360deg)}}
.carta .im{background:url(../assets/ui/dorso.jpg) center/cover}
.hoja{padding-top:44px}
.hoja .grande{width:min(70vw,290px);height:auto;aspect-ratio:420/612;object-fit:cover;border:0;border-radius:6px;box-shadow:0 6px 28px rgba(0,0,0,.7),0 0 22px rgba(230,183,62,.25);margin:0 auto 12px}
.hoja .grande.arte{aspect-ratio:1/1}
.hoja .ef{max-height:24dvh;margin-bottom:10px}
.hoja .elegir{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));padding:10px 0 2px;background:linear-gradient(rgba(18,13,43,0),#120d2b 28%)}