/* Anotador de cartas — sistema de diseño de la familia (verde paño). */
:root{
  --ink:#14130F; --surface:#1C1B16; --hairline:rgba(242,239,230,.12);
  --text:#F2EFE6; --muted:#9A968B; --accent:#2BA15F; --accent-ink:#0B1A11;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  background:var(--ink); color:var(--text);
  font-family:"JetBrains Mono",monospace; line-height:1.5;
  background-image:
    linear-gradient(var(--hairline) 1px,transparent 1px),
    linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:28px 28px;
  min-height:100vh; padding:clamp(1rem,4vw,2.5rem);
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 50% 0%,transparent 55%,rgba(0,0,0,.45))}
.wrap{max-width:620px;margin:0 auto;position:relative;z-index:1}
h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(1.9rem,7vw,2.8rem);letter-spacing:-.02em;line-height:.95}
h1 .accent{color:var(--accent)}
.sub{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;margin:.35rem 0 0}
section{padding:1.3rem 0;border-top:1px solid var(--hairline);margin-top:1.3rem}
header{padding-bottom:.2rem}
header+section{border-top:none;margin-top:1.6rem}
.label{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:.7rem}

.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg button{padding:.6rem .9rem;border:1px solid var(--hairline);background:transparent;color:var(--muted);
  font-family:"JetBrains Mono";font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border-radius:2px;transition:.15s}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}

.add-row{display:flex;gap:.5rem}
.add-row input{flex:1;background:var(--surface);border:1px solid var(--hairline);color:var(--text);
  font-family:"JetBrains Mono";font-size:.95rem;padding:.7rem .9rem;border-radius:2px;outline:none}
.add-row input:focus{border-color:var(--accent)}
.add-row button{padding:.7rem 1rem;border:1px solid var(--hairline);background:transparent;color:var(--text);
  font-family:"JetBrains Mono";font-size:.82rem;cursor:pointer;border-radius:2px;white-space:nowrap}

.players{display:flex;flex-direction:column;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:2px;overflow:hidden;margin-top:1.3rem}
.player{background:var(--ink);padding:1rem 1.1rem}
.player.lead{box-shadow:inset 3px 0 0 var(--accent)}
.player-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.pname{font-size:1.05rem;outline:none;border-bottom:1px dashed transparent}
.pname:focus{border-bottom-color:var(--hairline)}
.player.lead .pname{color:var(--accent)}
.pscore{font-family:"Bricolage Grotesque";font-weight:800;font-size:2.3rem;font-variant-numeric:tabular-nums;line-height:1}
.pscore.sm{font-size:1.5rem}
.pscore i{font-style:normal;color:var(--muted);font-size:.55em;font-weight:500}
/* fósforos (truco) */
.fosforos{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:.75rem;min-height:38px}
.fos-sq .sq{width:34px;height:34px;display:block}
.fos-sq .sq path{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;fill:none}
.fos-div{width:1px;align-self:stretch;min-height:30px;background:var(--hairline);margin:0 .15rem}
.hist{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;color:var(--muted);font-size:.72rem}
.hist span{border:1px solid var(--hairline);padding:.05rem .4rem;border-radius:2px}
.addbtns{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem;align-items:center}
.addbtns .step{flex:none;min-width:2.8rem;height:2.4rem;border:1px solid var(--hairline);background:transparent;color:var(--text);
  font-family:"JetBrains Mono";font-weight:500;font-size:.9rem;cursor:pointer;border-radius:2px;transition:.12s}
.addbtns .step:active{transform:scale(.92);border-color:var(--accent);color:var(--accent)}
.addbtns .custom{width:3.6rem;height:2.4rem;background:var(--surface);border:1px solid var(--hairline);color:var(--text);
  font-family:"JetBrains Mono";text-align:center;border-radius:2px;outline:none}
.addbtns .custom:focus{border-color:var(--accent)}
.addbtns .rm{margin-left:auto;width:2.4rem;height:2.4rem;border:1px solid var(--hairline);background:transparent;color:var(--muted);cursor:pointer;border-radius:2px;font-size:1.1rem}

.bar{display:flex;gap:.6rem;margin-top:1.4rem;flex-wrap:wrap}
.bar button{flex:1;min-width:max-content;padding:.75rem 1rem;border:1px solid var(--hairline);background:transparent;color:var(--muted);
  font-family:"JetBrains Mono";font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border-radius:2px}
.bar button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}

.prose{font-size:.9rem;color:var(--muted)}
.prose h2{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.3rem;color:var(--text);margin-bottom:.8rem;letter-spacing:-.01em}
.prose h3{font-family:"JetBrains Mono";font-weight:700;font-size:.9rem;color:var(--text);margin:1.2rem 0 .3rem}
.prose p{margin-bottom:.5rem;line-height:1.6}
.prose b{color:var(--text)}
footer{margin-top:2.4rem;padding-top:1.3rem;border-top:1px solid var(--hairline);color:var(--muted);font-size:.7rem}
footer a{color:var(--muted)}