/* Estilos base comunes a todos los juegos de Cartos */
:root{--bg:#fafafa;--fg:#1c1c1e;--muted:#6b6b70;--card:#fff;--line:rgba(127,127,127,.18);--primary:#5E35B1;--ok:#43A047;--bad:#E53935}
@media (prefers-color-scheme:dark){:root{--bg:#000;--fg:#f2f2f7;--muted:#98989f;--card:#1c1c1e;--primary:#B39DDB}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:-apple-system,system-ui,sans-serif;overscroll-behavior:none}
button,input{font-family:inherit;font-size:inherit}
input{-webkit-user-select:text;user-select:text}
button{cursor:pointer}
.screen{position:fixed;inset:0;display:none;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 12px);overflow-y:auto}
.screen.on{display:flex;flex-direction:column}
h1{margin:0;font-size:32px;font-weight:900;color:var(--primary)}
h2{margin:16px 0 8px;font-size:20px}
.sub{color:var(--muted);font-size:14px;margin:4px 0 10px}
.home{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:15px;font-weight:600;margin-bottom:6px}
.btn{height:56px;border:0;border-radius:18px;background:var(--primary);color:#fff;font-size:18px;font-weight:800;padding:0 20px;width:100%}
.btn.sec{background:var(--line);color:var(--fg)}
.btn:disabled{opacity:.4}
.btn:active{transform:scale(.97)}
.dock{position:sticky;bottom:0;margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(transparent,var(--bg) 30%)}
.field{width:100%;height:50px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--fg);padding:0 14px;font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:12px;padding:8px 12px;font-size:15px}
.chip.sel{background:var(--primary);border-color:var(--primary);color:#fff}
.card{background:var(--card);border-radius:18px;padding:14px;border:1px solid var(--line)}
.code{font-size:44px;font-weight:900;letter-spacing:8px;text-align:center;color:var(--primary)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 90px);transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:12px;font-size:15px;z-index:99;pointer-events:none;opacity:0;transition:opacity .2s}
.toast.on{opacity:1}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.pop{animation:pop .3s}