/* ============================================================
   hearts.css — HARTENJAGEN-specifieke styling. Leunt op core.css.
   Volledig in vh → vult het scherm, groot & leesbaar, en omzeilt de
   transform-zoom (.wrap.vh-game; enter()/leave() zetten die class).
   Kaarten zijn vh, dus de verhoudingen blijven gelijk en de fly-/FLIP-
   animaties kloppen vanzelf (appScale=1 → de /appScale-correcties = no-op).
   Brede kaartgame (kaarten rondom de tafel) → géén zwevende hoek-kop:
   de gedeelde .game-head blijft een dunne rij, en door .wrap.vh-game
   (volle breedte) + de spacer staan ‹ Hub en Nieuw spel tot tegen de rand.
   ============================================================ */

  /* De kop ZWEEFT in de hoeken (‹ Hub + titel links, Nieuw spel rechts) zodat de score-balk
     (namen/scores) op die kop-lijn past i.p.v. een eigen rij → het rode veld wordt groter.
     De score-kaartjes zijn smal en gecentreerd en klaren de hoekknoppen aan de schermranden. */
  #hearts{ position:relative; }
  #hearts .game-head{ position:absolute; top:0; left:0; right:0; margin:0; z-index:61; pointer-events:none; }   /* boven de uitslag-overlay (z-index 60) zodat ‹ Hub op het score-/eindscherm bereikbaar blijft */
  #hearts .game-head .back, #hearts .game-head .btn{ pointer-events:auto; }
  #hearts .game-head .back{ font-size:2.7vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }
  #hearts .game-head h2{ font-size:3.4vh; }
  #hearts .game-head .newgame{ font-size:2.5vh; padding:1.7vh 3.2vh; border-radius:1.6vh; }

  .hearts-wrap{ width:100%; max-width:min(95vw,960px); margin:0 auto; }
  /* Score-balk = de "HUD" gecentreerd op de kop-lijn (klaart ‹ Hub + Nieuw spel), groter/leesbaarder */
  .scorebar{ display:flex; gap:1.8vh; justify-content:center; align-items:center; min-height:8vh; margin:0 0 1vh; flex-wrap:wrap; }
  .pscore{ background:var(--panel); border:1px solid var(--line); border-radius:1.4vh; padding:1vh 2.2vh; font-family:var(--mono); font-size:2.1vh; min-width:15vh; text-align:center; }
  .pscore.turn{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
  .pscore b{ display:block; font-size:2.3vh; color:var(--muted); font-weight:400; margin-bottom:.3vh; }
  .pscore .v{ font-size:3.2vh; font-weight:700; }
  .pscore .v small{ color:var(--accent); font-size:2.1vh; }

  /* mama's hand onderaan — grote, leesbare kaarten */
  .hand{ display:flex; justify-content:center; align-items:flex-end; min-height:17vh; padding:.5vh; }
  .hand .pcard{ width:11.4vh; height:16vh; margin-left:-3.7vh; cursor:pointer; transition:transform .1s, margin .1s; flex:0 0 auto; }
  .hand .pcard:first-child{ margin-left:0; }
  .hand .pcard .r{ font-size:3.4vh; } .hand .pcard .s2{ font-size:3.1vh; }
  .hand .pcard .mid{ font-size:4.4vh; }   /* middensymbool in vh (i.p.v. core's 1.7em) → schaalt mee bij in-/uitzoomen */
  .hand .pcard:hover{ transform:translateY(-1.8vh); }
  /* Geselecteerde doorgeefkaart = DUIDELIJK: tilt hoog op + dikke accent-gloed + vinkje boven de kaart,
     zodat mama in één oogopslag ziet welke 3 kaarten ze doorgeeft. De lift "knippert" niet meer omdat
     de hand-DOM blijft staan (sameHand-pad) en enkel de .pick-klasse wisselt → de transform animeert vloeiend. */
  /* GEEN z-index op de kaart zelf: anders schuift ze óver haar rechterbuur en is diens rang (hoek linksboven)
     niet meer leesbaar. De optil-beweging zorgt al voor genoeg afstand; de natuurlijke waaier-volgorde houdt
     de rechterbuur bovenop. Enkel het ✓-badge krijgt een hoge z-index zodat dat altijd zichtbaar blijft. */
  .hand .pcard.pick{ transform:translateY(-4.4vh);
    box-shadow:0 0 0 4px var(--accent), 0 0 22px rgba(56,214,224,.85), 0 12px 20px rgba(0,0,0,.55); }
  .hand .pcard.pick:hover{ transform:translateY(-5.2vh); }
  .hand .pcard.pick::after{ content:'✓'; position:absolute; top:-2vh; left:50%; transform:translateX(-50%);
    width:3.6vh; height:3.6vh; line-height:3.6vh; text-align:center; font-size:2.4vh; font-weight:900;
    color:#0c1020; background:var(--accent); border-radius:50%; box-shadow:0 2px 7px rgba(0,0,0,.55); z-index:6; }

  /* Hartenjagen — rode speeltafel */
  .hfelt{ position:relative; border-radius:2.6vh; padding:2vh; margin-bottom:1.4vh;
    background:radial-gradient(130% 100% at 50% 30%, #8d2236 0%, #6a1626 42%, #46101c 78%, #350b15 100%);
    border:1px solid #93283b; box-shadow:inset 0 0 70px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.3); }
  .hgrid{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto 1fr; grid-template-areas:"n n n" "w c e"; gap:1vh; align-items:center; min-height:57vh; }
  .seat{ text-align:center; } .seat-n{ grid-area:n; } .seat-w{ grid-area:w; } .seat-e{ grid-area:e; }
  .seatlab{ font-family:var(--mono); font-size:3vh; font-weight:700; color:#f2c9cf; margin-top:.7vh; }
  .seatlab.turn{ color:#fff; text-shadow:0 0 12px rgba(255,255,255,.55); }
  .seat-n .n-top{ display:flex; align-items:center; justify-content:center; gap:1.6vh; }   /* Noord: ruggen + behaalde-stapel naast elkaar (lage zetel) */
  .seat-n .n-top .wonpile{ margin:0; }
  .seat-n .backs{ display:flex; justify-content:center; min-height:7.6vh; min-width:15vh; }   /* vaste hoogte+breedte (max. 7 ruggen) → de behaalde-stapel ernaast verschuift niet */
  .seat-n .backs .pcard.down{ width:5.4vh; height:7.6vh; margin-left:-3.9vh; } .seat-n .backs .pcard.down:first-child{ margin-left:0; }
  .seat-w .backs,.seat-e .backs{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:15vh; }  /* max. 7 backs → label blijft staan */
  .seat-w .backs .pcard.down,.seat-e .backs .pcard.down{ width:7.6vh; height:5.4vh; margin-top:-3.9vh; }
  .seat-w .backs .pcard.down:first-child,.seat-e .backs .pcard.down:first-child{ margin-top:0; }
  .trickbox{ grid-area:c; position:relative; min-height:47vh; }
  .tslot{ position:absolute; } .ts-n{ top:0; left:50%; transform:translateX(-50%); } .ts-s{ bottom:0; left:50%; transform:translateX(-50%); }
  .ts-w{ left:.6vh; top:50%; transform:translateY(-50%); } .ts-e{ right:.6vh; top:50%; transform:translateY(-50%); }
  .trickbox .pcard{ width:10.4vh; height:14.5vh; } .trickbox .pcard .r{ font-size:3vh; } .trickbox .pcard .s2{ font-size:2.7vh; } .trickbox .pcard .mid{ font-size:4vh; }
  .trickbox .pcard.win{ box-shadow:0 0 0 3px #ffd27d, 0 0 20px rgba(255,210,125,.75); }
  #hmsg{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:23vh; text-align:center; font-family:var(--mono); font-size:2.8vh; color:#ffe1c4; pointer-events:none; }
  @keyframes inN{ from{opacity:0; transform:translateY(-36px);} to{opacity:1; transform:none;} }
  @keyframes inS{ from{opacity:0; transform:translateY(36px);} to{opacity:1; transform:none;} }
  @keyframes inW{ from{opacity:0; transform:translateX(-36px);} to{opacity:1; transform:none;} }
  @keyframes inE{ from{opacity:0; transform:translateX(36px);} to{opacity:1; transform:none;} }
  .trickbox .pcard.anim-n{ animation:inN .28s ease; } .trickbox .pcard.anim-s{ animation:inS .28s ease; }
  .trickbox .pcard.anim-w{ animation:inW .28s ease; } .trickbox .pcard.anim-e{ animation:inE .28s ease; }
  @keyframes dealIn{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;} }
  .hand .pcard.deal{ animation:dealIn .3s ease backwards; }
  @keyframes scorePulse{ 0%{transform:scale(1);} 40%{transform:scale(1.2);} 100%{transform:scale(1);} }
  .pscore.bump .v{ display:inline-block; animation:scorePulse .55s ease; }
  .pscore.turn{ border-color:#ffd27d; box-shadow:0 0 0 1px #ffd27d; }

  /* Net gekregen kaarten staan tijdens 'reveal' wat hoger zodat mama ziet wat ze kreeg; klik = laat ze zakken en start. */
  .hand .pcard.recv{ transform:translateY(-4.6vh); box-shadow:0 0 0 3px var(--good),0 10px 16px rgba(0,0,0,.5); animation:recvBob 1.3s ease-in-out infinite; }
  .hand .pcard.recv:hover{ transform:translateY(-5.2vh); }
  @keyframes recvBob{ 0%,100%{ transform:translateY(-4.6vh);} 50%{ transform:translateY(-5.6vh);} }

  /* Gepakte slagen: kleine, omgekeerde stapeltjes bij elke speler — elke slag 90° gedraaid op de vorige.
     Eigen stacking-context (z-index:0) zodat de hoge interne z-indexen niet over de uitslag-overlay (z-index 5) lekken. */
  .wonpile{ position:relative; z-index:0; width:6.2vh; height:8.6vh; margin:.7vh auto 0; }
  .wonpile.empty{ visibility:hidden; }
  .wonpile .pcard.down{ position:absolute; left:50%; top:50%; width:4.5vh; height:6.3vh; margin:0; box-shadow:0 1px 3px rgba(0,0,0,.45); }
  .wonpile .wcount{ position:absolute; left:50%; bottom:-3px; transform:translateX(-50%); z-index:60; font-family:var(--mono); font-size:1.5vh; font-weight:700; color:#fff; background:rgba(0,0,0,.5); border-radius:8px; padding:0 5px; line-height:1.45; }
  .won-s{ position:absolute; left:.8vh; bottom:.8vh; margin:0; z-index:2; }
  .pcard.fly-trick,.pcard.fly-pass{ position:fixed; margin:0; pointer-events:none; will-change:transform,opacity; }
  /* Doorgeven/Beginnen-knoppen liggen ÓP het veld (absoluut) zodat het scherm niet verspringt bij de overgang naar het spel. */
  .hfelt-actions{ position:absolute; left:50%; bottom:8vh; transform:translateX(-50%); display:flex; gap:1.6vh; justify-content:center; z-index:4; }
  .hfelt-actions:empty{ display:none; }
  #hearts .hfelt-actions .btn{ font-size:2.1vh; padding:1.5vh 2.6vh; border-radius:1.4vh; }

  /* uitslag-overlay (ronde/eindstand): groot & leesbaar */
  #hearts .overlay h3{ font-size:3.6vh; }
  #hearts .overlay .ov-actions{ width:34vh; gap:1.4vh; }
  #hearts .overlay .ov-actions .btn{ font-size:2.2vh; padding:1.6vh 2vh; }
  /* Ronde-overzicht in de uitslag-overlay: tabel met punten per ronde. */
  .ovtable{ overflow:auto; max-width:100%; }
  .htbl{ border-collapse:collapse; font-family:var(--mono); font-size:2.3vh; margin:0 auto; }
  .htbl th,.htbl td{ padding:.5vh 1.6vh; border:1px solid var(--line); text-align:center; }
  .htbl th{ color:var(--muted); font-weight:700; background:rgba(255,255,255,.03); }
  .htbl td.lab,.htbl th.lab{ color:var(--muted); }
  .htbl .me{ color:#ffd27d; }
  .htbl tr.last td{ background:rgba(255,210,125,.10); }
  .htbl tfoot td{ font-weight:700; color:var(--accent); border-top:2px solid var(--accent); }
  .htbl tfoot td.me{ color:#ffd27d; }

  @media (prefers-reduced-motion: reduce){
    .trickbox .pcard, .hand .pcard.deal, .hand .pcard.recv, .pscore.bump .v{ animation:none !important; }
  }