@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
/* Equity page, card faces and the card picker. Load after styles.css; colours follow the site theme. */
:root{
  /* card faces: saturated four-colour fills, after GTO Wizard's picker */
  --tile-s:#505055;--tile-h:#c8140c;--tile-d:#2a3ed6;--tile-c:#0aa52b;
  /* one colour per player, in seat order */
  --eq-p1:#6ed68a;--eq-p2:#5b9dff;--eq-p3:#e0a53c;--eq-p4:#b48ef0;--eq-p5:#f07167;--eq-p6:#3cc6c0;
  --card-font:'Inter',Arial,'Helvetica Neue',sans-serif;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --tile-s:#46464c;--tile-h:#cc1810;--tile-d:#2a3ed6;--tile-c:#0a9e2a;
  --eq-p1:#1f8f4e;--eq-p2:#1b5fd1;--eq-p3:#b7791f;--eq-p4:#7a4ac6;--eq-p5:#c2412d;--eq-p6:#13827d}}
:root[data-theme="light"]{
  --tile-s:#46464c;--tile-h:#cc1810;--tile-d:#2a3ed6;--tile-c:#0a9e2a;
  --eq-p1:#1f8f4e;--eq-p2:#1b5fd1;--eq-p3:#b7791f;--eq-p4:#7a4ac6;--eq-p5:#c2412d;--eq-p6:#13827d}

/* ---------- card face: suit fill, heavy white rank sized from the width (--w), suit watermark ---------- */
.face{--w:52px;position:relative;overflow:hidden;display:grid;place-items:center;border-radius:calc(var(--w) * .1);color:#fff;
  font:700 calc(var(--w) * .92)/1 var(--card-font);letter-spacing:-.04em;text-shadow:0 1px 2px rgba(0,0,0,.3)}
/* Watermark: a drawn suit 95% of the card's height; its left gap equals the top and bottom gaps; clipped on the right. */
.face::before{content:'';position:absolute;left:4%;top:2.5%;height:95%;width:300%;background:rgba(0,0,0,.28);
  -webkit-mask:var(--suit-shape) left center/contain no-repeat;mask:var(--suit-shape) left center/contain no-repeat}
.face>b{position:relative;font-weight:700;transform:translate(-5%,6%)}
.face.s{background:var(--tile-s);--suit-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 1C11 8 2 13 2 20c0 4.5 3.5 7.5 7.5 7.5 2.5 0 4.5-1 5.5-2.5-.4 2.5-1.5 4.5-4 6h10c-2.5-1.5-3.6-3.5-4-6 1 1.5 3 2.5 5.5 2.5 4 0 7.5-3 7.5-7.5C30 13 21 8 16 1z'/%3E%3C/svg%3E")}
.face.h{background:var(--tile-h);--suit-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 30C6 22 1 16 1 9.5 1 5 4.5 1.5 9 1.5c3 0 5.5 1.7 7 4.2 1.5-2.5 4-4.2 7-4.2 4.5 0 8 3.5 8 8C31 16 26 22 16 30z'/%3E%3C/svg%3E")}
.face.d{background:var(--tile-d);--suit-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 .5 28.5 16 16 31.5 3.5 16z'/%3E%3C/svg%3E")}
.face.c{background:var(--tile-c);--suit-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='8.5' r='7'/%3E%3Ccircle cx='8' cy='18.5' r='7'/%3E%3Ccircle cx='24' cy='18.5' r='7'/%3E%3Cpath d='M15 14c0 9-1.5 13.5-4 17h10c-2.5-3.5-4-8-4-17z'/%3E%3C/svg%3E")}

/* ---------- slots on the page ---------- */
.eq-slots{display:flex;gap:4px;align-items:center;padding:0;border-radius:8px}
.eq-slots:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eq-slot{--w:52px;width:var(--w);height:calc(var(--w) * 1.5);flex-shrink:0}
.eq-slot.empty{border:1.5px dashed var(--line);border-radius:7px;background:var(--surface-2);display:grid;place-items:center}
.eq-slot.empty::after{content:'+';color:var(--faint);font-size:18px}
.eq-slots:hover .eq-slot.empty{border-color:var(--muted)}
.eq-gap{width:8px;flex-shrink:0}

/* ---------- layout ---------- */
.eqx{display:grid;gap:14px}
.eq-bar-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.eq-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.eq-seg button{padding:6px 14px;font-size:13px;color:var(--muted)}
.eq-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.eq-size{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.eq-size select,.eq-pos{font:600 13px var(--sans);color:var(--fg);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.eq-panel{display:grid;gap:14px}
.eq-players{display:grid;gap:8px}
.eq-player{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;background:var(--surface-2);border-left:3px solid var(--pc)}
.eq-kind{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:12px}
.eq-kind button{padding:3px 9px;color:var(--muted)}
.eq-kind button[aria-pressed="true"]{background:var(--surface);color:var(--fg)}
.eq-input{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.eq-range{flex:1 1 160px;min-width:0;font:500 14px var(--mono);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.eq-range:focus{outline:none;border-color:var(--accent)}
.eq-combos{font-size:11px;color:var(--faint);white-space:nowrap}
.eq-remove{color:var(--faint);font-size:18px;width:28px;height:28px;border-radius:6px}
.eq-remove:hover{background:var(--surface);color:var(--fg)}
.eq-add{justify-self:start;font-size:13px;color:var(--accent);padding:2px 4px}
.eq-add:disabled{color:var(--faint);cursor:default}
.eq-cards{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.eq-cards>div{max-width:100%;min-width:0}
.eq-slots[data-pick="dead"]{flex-wrap:wrap;max-width:100%}
.eq-label{margin:0 0 6px;font-size:12px;color:var(--faint)}
.eq-examples{margin:0}
.eq-examples .chip{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--muted)}
.eq-examples .chip:hover{color:var(--fg);border-color:var(--muted)}

/* ---------- table view: seats on the rail, Hero at the bottom ---------- */
.eq-tablewrap{container-type:inline-size}
.eq-felt-area{--rx:42%;--cy:176px;--ry:132px;position:relative;height:360px}
.eq-felt{position:absolute;inset:44px 8% 52px;border-radius:999px;background:color-mix(in srgb,var(--act-call) 7%,var(--bg));border:2px solid color-mix(in srgb,var(--act-call) 22%,var(--line))}
.eq-center{position:absolute;left:50%;top:var(--cy);transform:translate(-50%,-50%)}
.eq-center .eq-slot{--w:46px}
.eq-seat{position:absolute;left:calc(50% + var(--rx) * var(--cos));top:calc(var(--cy) + var(--ry) * var(--sin));transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:1}
.eq-seat .eq-slot{--w:42px}
.eq-disc{min-width:64px;padding:3px 10px;border-radius:999px;background:var(--surface);border:2px solid var(--pc);text-align:center;line-height:1.25}
.eq-disc b{display:block;font-size:12px}
.eq-eqv{font:500 13px var(--mono);color:var(--pc)}
.eq-rtag{font:11px var(--mono);color:var(--muted);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.eq-free button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--faint)}
.eq-free button:disabled{opacity:.5;cursor:default}
.eq-dot{width:22px;height:22px;border-radius:50%;border:1px dashed var(--faint);display:grid;place-items:center;font-size:14px}
@container (max-width:520px){
  .eq-felt-area{--rx:40%;--cy:170px;--ry:130px;height:350px}.eq-felt{inset:40px 6% 50px}
  .eq-center .eq-slot{--w:30px}.eq-center .eq-gap{width:2px}.eq-center .eq-slots{gap:3px}
  .eq-seat .eq-slot{--w:32px}.eq-disc{min-width:54px;padding:2px 8px}.eq-rtag{display:none}
}

/* ---------- result ---------- */
.eq-result .eq-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-2);margin:2px 0 12px}
.eq-result .eq-bar span{display:block;height:100%;transition:width .25s}
.eq-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:8px 0;border-top:1px solid var(--line)}
.eq-row:first-child{border-top:0}
.eq-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.eq-sw{width:10px;height:10px;border-radius:3px;background:var(--pc);flex-shrink:0}
.eq-what{font:12px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-val{font:600 22px var(--mono);color:var(--pc);text-align:right}
.eq-val i{font-style:normal;font-size:13px;color:var(--faint);margin-left:2px}
.eq-split{grid-column:1/-1;font-size:12px;color:var(--faint)}
.eq-result .stale{opacity:.5}
@media (max-width:560px){.eq-player{grid-template-columns:auto minmax(0,1fr) auto}.eq-kind{grid-column:2;grid-row:1}.eq-remove{grid-column:3;grid-row:1}.eq-input{grid-column:1/-1}}

/* ---------- card picker ---------- */
.cp-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:50;padding:16px}
.cp{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;width:min(100%,960px);max-height:100%;overflow:auto;container-type:inline-size}
.cp-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:26px;line-height:1;color:var(--muted)}
.cp-close:hover{color:var(--fg);background:var(--surface-2)}
.cp-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-right:40px}
.cp-dead .cp-head>div:first-child{min-width:0}
.cp-title{font-size:13px;color:var(--muted);margin:0 0 8px}
.cp-slots{display:flex;gap:4px;align-items:flex-end}
.cp-dead .cp-slots{flex-wrap:wrap}
.cp-slot{--w:72px;width:var(--w);height:calc(var(--w) * 1.5);border-radius:8px}
.cp-dead .cp-slot{flex-shrink:0}
.cp-slot.empty{background:var(--surface-2);border:1px solid var(--line)}
.cp-slot.on{box-shadow:0 8px 0 -5px var(--accent)}
.cp-gap{width:8px}
.cp-tools{display:flex;flex-direction:column;gap:6px;margin-top:26px}
.cp-tool{width:44px;height:40px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;color:var(--muted)}
.cp-tool:hover{color:var(--fg)}
.cp-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;container-type:inline-size;--tw:calc((100cqi - 36px) / 13)}
.cp-card{--w:var(--tw);aspect-ratio:.62;width:auto;height:auto}
.cp-card:hover{filter:brightness(1.15)}
.cp-card.used{opacity:.18;cursor:not-allowed;filter:none}
.cp-card.mine{outline:2px solid var(--fg);outline-offset:-2px}
.cp-card:focus-visible,.cp-slot:focus-visible,.cp-tool:focus-visible,.cp-ok:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.cp-hint{font-size:12px;color:var(--faint)}
.cp-hint kbd{font:11px var(--mono);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.cp-ok{background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14px;padding:8px 20px;border-radius:8px}
@container (max-width:520px){.cp-slot{--w:46px}.cp-tools{margin-top:22px}.cp-tool{width:38px;height:34px}.cp-grid{gap:2px;--tw:calc((100cqi - 24px) / 13)}}
@media (max-width:560px){.cp-bg{padding:6px}.cp{padding:14px 10px}.cp-close{top:6px;right:6px}}
@media (prefers-reduced-motion:reduce){.eq-result .eq-bar span{transition:none}}