/* Shared card-game styling for Game-Game patiens pages (Harpan + Spindelharpan).
   Mobile-first. Uses the sitewide theme tokens from gg-shell.css. */

.pat{--felt:#0d1730;--felt-bd:#1e2a42;--slot:rgba(255,255,255,.05);--slot-bd:rgba(255,255,255,.16);
  max-width:920px;margin:0 auto;-webkit-user-select:none;user-select:none;font-family:'Nunito',system-ui,sans-serif}

/* Toolbar */
.pat-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.pat-btn{background:linear-gradient(135deg,var(--blue2,#0085D1),var(--blue,#006AA7));color:#fff;border:none;
  min-height:44px;padding:0 16px;border-radius:12px;cursor:pointer;font:800 14px 'Nunito',sans-serif;
  box-shadow:0 3px 0 #00375c;transition:filter .15s,transform .1s;display:inline-flex;align-items:center;gap:7px}
.pat-btn:hover{filter:brightness(1.1)}
.pat-btn:active{transform:translateY(2px);box-shadow:none}
.pat-btn.prim{background:linear-gradient(135deg,#FFD84D,#FECC00);color:#0a0e1a;box-shadow:0 3px 0 #b38f00}
.pat-btn.ghost{background:var(--card,#141d30);color:var(--tx2,#aebbd2);border:1px solid var(--bd,#1e2a42);box-shadow:none}
.pat-btn.ghost:hover{color:var(--yellow,#FECC00);border-color:var(--yellow,#FECC00);filter:none}
.pat-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.pat-sel{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--tx2,#aebbd2);font:800 13px 'Nunito',sans-serif}
.pat-sel select{min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--bd,#1e2a42);
  background:var(--card,#141d30);color:var(--tx,#fff);font:800 14px 'Nunito',sans-serif;cursor:pointer}

/* Stats */
.pat-stats{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.pat-stat{flex:1;min-width:70px;background:var(--card,#141d30);border:1px solid var(--bd,#1e2a42);border-radius:12px;padding:8px 10px;text-align:center}
.pat-stat .k{font:800 10px 'Nunito',sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--idle,#7f8cab);margin-bottom:2px}
.pat-stat .v{font:900 19px 'Nunito',sans-serif;color:var(--yellow,#FECC00)}

/* Board */
.pat-board{background:var(--felt);border:1px solid var(--felt-bd);border-radius:16px;padding:8px;touch-action:none}
.pat-top{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:12px}
.pat-tableau{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.pat-cell{position:relative}
.pat-col{position:relative;min-height:64px}

/* Slots (empty targets) */
.pat-slot{width:100%;aspect-ratio:5/7;border-radius:8px;border:2px dashed var(--slot-bd);background:var(--slot);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.28);font:900 18px 'Nunito',sans-serif}

/* Cards */
.pat-card{position:absolute;left:0;width:100%;aspect-ratio:5/7;border-radius:8px;box-sizing:border-box;
  cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.45);touch-action:none}
.pat-card.top{position:relative}
.pat-card.face{background:#fdfdfb;border:1px solid #d5d9e0;color:#101828;padding:4px 5px;
  display:flex;flex-direction:column;justify-content:flex-start;line-height:1;font-weight:900}
.pat-card.face.red{color:#d11a2a}
.pat-card.back{background:
  repeating-linear-gradient(45deg,#0085D1,#0085D1 6px,#006AA7 6px,#006AA7 12px);
  border:1px solid #00375c}
.pat-card.back::after{content:'';position:absolute;inset:5px;border-radius:5px;border:1.5px solid rgba(255,255,255,.35)}
.pat-crn{display:flex;flex-direction:column;align-items:center;font-size:clamp(.62rem,2.7vw,1.05rem)}
.pat-crn .r{font-weight:900}
.pat-pip{margin-left:auto;font-size:clamp(.7rem,3vw,1.25rem);line-height:1}
.pat-card.sel{outline:3px solid var(--yellow,#FECC00);outline-offset:-1px;z-index:9}
.pat-card.hint{outline:3px solid #4ade80;outline-offset:-1px}
.pat-card.ghost{opacity:.5}
.pat-card.ok{box-shadow:0 0 0 3px #4ade80}

/* Win overlay */
.pat-win{margin-top:14px;text-align:center;background:var(--card,#141d30);border:1px solid var(--bd,#1e2a42);
  border-radius:16px;padding:22px 18px}
.pat-win h3{font:900 22px 'Nunito',sans-serif;color:var(--yellow,#FECC00);margin-bottom:8px}
.pat-win p{color:var(--tx2,#aebbd2);font:700 15px 'Nunito',sans-serif;margin-bottom:14px}
.pat-hidden{display:none!important}
.pat-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#101828;color:#fff;
  border:1px solid var(--bd,#1e2a42);padding:10px 18px;border-radius:30px;font:800 14px 'Nunito',sans-serif;
  z-index:200;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.pat-toast.show{opacity:1}

/* Spider board: 10 columns */
.pat-spider .pat-board{padding:6px}
.pat-spider-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.pat-spider .pat-col{min-height:58px}

/* Light theme: keep felt readable */
html[data-theme=light] .pat{--felt:#dfe6f2;--felt-bd:#c7d0e0;--slot:rgba(0,0,0,.05);--slot-bd:rgba(0,0,0,.18)}
html[data-theme=light] .pat-slot{color:rgba(0,0,0,.3)}
html[data-theme=light] .pat-btn.ghost{background:#fff}

@media(max-width:600px){
  .pat-top,.pat-tableau{gap:4px}
  .pat-spider-grid{gap:2px}
  .pat-card.face{padding:2px 3px}
  .pat-stat .v{font-size:17px}
}
@media(max-width:380px){
  .pat-board{padding:5px}
  .pat-top,.pat-tableau{gap:3px}
}