/* Hallmark · Hearts · rose cloth and a straight card rack.
 * Retain the renderer's >=46px handLayout and all real card/input nodes.
 * No private identity selectors, frame geometry, timers or viewport-height fit. */
@import url('./assets/depth-tokens.css');

body[data-pip-frame] .hz-depth-table {
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;
  gap:var(--hz-art-space-3);padding:var(--hz-art-space-4);border:2px solid var(--hz-art-plum-dark);
  border-radius:20px;background:var(--hz-art-plum) url('./assets/depth-table.svg') center / 100% 100%;
  color:var(--hz-art-light);box-shadow:0 var(--hz-art-space-2) 0 var(--hz-art-line);
}
body[data-pip-frame] .hz-depth-table .hz-seat.left { grid-column:1;grid-row:1; }
body[data-pip-frame] .hz-depth-table .hz-seat.top { grid-column:2;grid-row:1; }
body[data-pip-frame] .hz-depth-table .hz-seat.right { grid-column:3;grid-row:1; }
body[data-pip-frame] .hz-depth-table .hz-seat { align-self:stretch;min-width:0;line-height:1.4;padding:var(--hz-art-space-3) var(--hz-art-space-1);border-color:var(--hz-art-lace);background:var(--hz-art-plum-dark); }
body[data-pip-frame] .hz-seat .nm { font-size:.76rem; }
body[data-pip-frame] .hz-seat .meta { font-size:.7rem;opacity:1;line-height:1.5; }
body[data-pip-frame] .hz-depth-table .hz-seat.turn { border-color:var(--hz-art-gold);background:var(--hz-art-plum-dark); }
body[data-pip-frame] .hz-backs { height:26px;margin-block:var(--hz-art-space-2); }
body[data-pip-frame] .hz-backs i { width:16px;height:24px;margin-left:-12px;border:1px solid var(--hz-art-cream);background:var(--hz-art-plum) url('./assets/depth-card-back.svg') center / 100% 100%;box-shadow:none; }
body[data-pip-frame] .hz-backs i:first-child { margin-left:0; }
body[data-pip-frame] .hz-depth-table .hz-trick { grid-column:1/-1;grid-row:2;height:220px;min-width:0;border-radius:var(--hz-art-radius); }
body[data-pip-frame] .hz-trick.showing-last { background:var(--hz-art-plum-dark);box-shadow:inset 0 0 0 var(--hz-art-space-1) var(--hz-art-gold); }
body[data-pip-frame] .hz-slot { width:64px;height:90px; }
body[data-pip-frame] .hz-slot.s-top { top:var(--hz-art-space-2);left:50%;margin-left:-32px; }
body[data-pip-frame] .hz-slot.s-bottom { bottom:var(--hz-art-space-2);left:50%;margin-left:-32px; }
body[data-pip-frame] .hz-slot.s-left { top:50%;left:var(--hz-art-space-5);margin-top:-45px; }
body[data-pip-frame] .hz-slot.s-right { top:50%;right:var(--hz-art-space-5);margin-top:-45px; }
body[data-pip-frame] .hz-slot .hz-card { width:100%;height:100%; }
body[data-pip-frame] .hz-depth-table .hz-cap { grid-row:3;font-size:.8rem;line-height:1.5;min-height:1.5em;color:var(--hz-art-gold);margin:0;padding-bottom:var(--hz-art-space-2);overflow-wrap:anywhere; }
body[data-pip-frame] .hz-card {
  background:var(--hz-art-cream) url('./assets/depth-card-face.svg') center / 100% 100%;
  color:var(--hz-art-black);border:1px solid var(--hz-art-line);border-radius:var(--hz-art-card-radius);
  font-family:inherit;box-shadow:0 var(--hz-art-space-1) var(--hz-art-space-2) var(--hz-art-shadow);
}
body[data-pip-frame] .hz-card.red { color:var(--hz-art-red); }
body[data-pip-frame] .hz-card .ck { left:var(--hz-art-space-2);top:var(--hz-art-space-2);font-size:1.03rem;font-weight:800;line-height:1; }
body[data-pip-frame] .hz-card .cs { font-size:1.7rem;line-height:1;margin-top:var(--hz-art-space-4); }
body[data-pip-frame] .hz-slot .hz-card .ck { font-size:1.3rem; }
body[data-pip-frame] .hz-slot .hz-card .cs { font-size:2rem; }
body[data-pip-frame] .hz-card .hz-q { right:var(--hz-art-space-1);bottom:var(--hz-art-space-1);min-width:19px;padding:var(--hz-art-space-1) var(--hz-art-space-2);font-size:.7rem;line-height:1;background:var(--hz-art-plum-dark);color:var(--hz-art-white);border-radius:var(--hz-art-space-2); }
body[data-pip-frame] .hz-card.win { transform:none;box-shadow:0 0 0 3px var(--hz-art-gold),0 var(--hz-art-space-2) var(--hz-art-space-4) var(--hz-art-shadow); }
body[data-pip-frame] .hz-card.win::after { right:var(--hz-art-space-1);top:var(--hz-art-space-1);background:var(--hz-art-gold);color:var(--hz-art-ink); }
body[data-pip-frame] .hz-card.in { animation:none; }
body[data-pip-frame] .hz-depth-points-key { margin:var(--hz-art-space-4) 0;font-size:.82rem;line-height:1.5;font-weight:700;color:var(--hz-art-ink);text-align:center; }
body[data-pip-frame] .hz-depth-hand-guide { margin:var(--hz-art-space-5) 0 var(--hz-art-space-3);font-size:.76rem;line-height:1.5;color:var(--hz-art-muted);text-align:center; }
body[data-pip-frame] #hand.hz-depth-hand { align-items:center;gap:var(--hz-art-space-5);padding:var(--hz-art-space-5) 0;margin-top:0;border-block:1px solid var(--hz-art-line);background:var(--hz-art-paper);border-radius:var(--hz-art-radius);min-height:80px; }
body[data-pip-frame] .hz-row { gap:5px;max-width:100%; }
body[data-pip-frame] .hz-btn { min-width:var(--hz-art-touch);min-height:var(--hz-art-touch);transform:none;transition:box-shadow .12s ease,border-color .12s ease; }
body[data-pip-frame] .hz-btn.legal { transform:none;border:2px solid var(--hz-art-rose);box-shadow:0 0 0 var(--hz-art-space-1) var(--hz-art-rose); }
body[data-pip-frame] .hz-btn.dim { opacity:1;filter:none;border:1px dashed var(--hz-art-muted);background-color:var(--hz-art-disabled);box-shadow:none; }
body[data-pip-frame] .hz-btn.sel { transform:none;border:3px solid var(--hz-art-amber);box-shadow:0 0 0 var(--hz-art-space-1) var(--hz-art-gold); }
body[data-pip-frame] .hz-btn .hz-tick { top:var(--hz-art-space-1);right:var(--hz-art-space-1);width:18px;height:18px;line-height:18px;background:var(--hz-art-amber);color:var(--hz-art-white);font-size:.7rem; }
body[data-pip-frame] .hz-btn .hz-new { bottom:var(--hz-art-space-1);left:var(--hz-art-space-1);transform:none;font-size:.56rem;background:var(--hz-art-new);color:var(--hz-art-white); }
body[data-pip-frame] .hz-btn:active:not(.dim) { transform:none;box-shadow:inset 0 0 0 var(--hz-art-space-1) var(--hz-art-rose); }
body[data-pip-frame] .hz-btn:focus-visible { outline:3px solid var(--hz-art-focus);outline-offset:3px; }
body[data-pip-frame] .hz-score { gap:var(--hz-art-space-2); }
body[data-pip-frame] .hz-sc { padding:var(--hz-art-space-3) var(--hz-art-space-1);border-color:var(--hz-art-line);background:var(--hz-art-cream); }
body[data-pip-frame] .hz-sc .nm { font-size:.74rem;color:var(--hz-art-muted); }
body[data-pip-frame] .hz-sc b { font-size:1.2rem;color:var(--hz-art-ink); }
body[data-pip-frame] .hz-sc small { font-size:.67rem;line-height:1.5;min-height:3em;color:var(--hz-art-muted); }
body[data-pip-frame] .hz-sc .low { display:block; }
body[data-pip-frame] .hz-sc.me { background:var(--hz-art-paper);border-color:var(--hz-art-rose); }
body[data-pip-frame] .hz-sc.turn { border-color:var(--hz-art-rose);box-shadow:0 0 0 var(--hz-art-space-1) var(--hz-art-rose); }
body[data-pip-frame] .hz-bar { flex-wrap:wrap;gap:var(--hz-art-space-4); }
body[data-pip-frame] .hz-diff { flex:1;min-width:0; }
body[data-pip-frame] .hz-diff button { flex:1;min-width:var(--hz-art-touch);min-height:var(--hz-art-touch);padding-inline:var(--hz-art-space-3); }
body[data-pip-frame] .hz-diff button[aria-pressed="true"] { color:var(--hz-art-rose);background:var(--hz-art-cream); }
body[data-pip-frame] .game-wrap #new-btn { min-height:var(--hz-art-touch);padding-inline:var(--hz-art-space-5);font-size:.84rem;white-space:normal;line-height:1.3; }
body[data-pip-frame] .hz-actions { gap:var(--hz-art-space-4); }
body[data-pip-frame] .game-wrap .hz-actions .btn { flex:1;min-width:var(--hz-art-touch);min-height:52px;padding:var(--hz-art-space-5) var(--hz-art-space-4);font-size:.88rem;line-height:1.4;border:2px solid var(--hz-art-plum-dark);border-radius:var(--hz-art-radius);color:var(--hz-art-white);background:var(--hz-art-rose);box-shadow:0 3px 0 var(--hz-art-plum-dark);white-space:normal;overflow-wrap:anywhere; }
body[data-pip-frame] .game-wrap .hz-actions .btn.alt { color:var(--hz-art-ink);background:var(--hz-art-cream);box-shadow:0 3px 0 var(--hz-art-line); }
body[data-pip-frame] .hz-round,body[data-pip-frame] .hz-note,body[data-pip-frame] .hz-stats { font-size:.76rem;line-height:1.5;color:var(--hz-art-muted);overflow-wrap:anywhere; }
body[data-pip-frame] .hz-rules { background:var(--hz-art-cream);border-color:var(--hz-art-line); }
body[data-pip-frame] .hz-rules summary,body[data-pip-frame] .hz-rules label { min-height:var(--hz-art-touch); }
body[data-pip-frame] .hz-ledger-dialog { background:var(--hz-art-cream);border-color:var(--hz-art-rose);padding-bottom:max(var(--hz-art-space-6),env(safe-area-inset-bottom)); }
body[data-pip-frame] .game-wrap .hz-ledger-dialog .btn { min-height:var(--hz-art-touch);min-width:0;padding:var(--hz-art-space-4);line-height:1.4;white-space:normal; }
body[data-pip-frame] .hz-ledger-rank span { font-size:.7rem;line-height:1.5;overflow-wrap:anywhere; }
body[data-pip-frame] #overlay { padding:max(var(--hz-art-space-6),env(safe-area-inset-top)) max(var(--hz-art-space-6),env(safe-area-inset-right)) max(var(--hz-art-space-6),env(safe-area-inset-bottom)) max(var(--hz-art-space-6),env(safe-area-inset-left)); }
body[data-pip-frame] #overlay .panel { background:var(--hz-art-cream);max-height:100%;overflow-y:auto; }
body[data-pip-frame] #overlay .btn { min-height:52px;white-space:normal;line-height:1.4; }
body[data-pip-frame] .hz-sum :is(th,td) { padding:var(--hz-art-space-3) var(--hz-art-space-2);overflow-wrap:anywhere; }
body[data-pip-frame] :is(.hz-bar,.hz-actions,.hz-ledger-dialog,.hz-rules) :is(button,input,select,summary):focus-visible { outline:3px solid var(--hz-art-focus);outline-offset:3px; }
@media (max-width:360px) {
  body[data-pip-frame] .hz-slot { width:56px;height:80px; }
  body[data-pip-frame] .hz-slot:is(.s-top,.s-bottom) { margin-left:-28px; }
  body[data-pip-frame] .hz-slot:is(.s-left,.s-right) { margin-top:-40px; }
  body[data-pip-frame] .hz-depth-table .hz-trick { height:204px; }
  body[data-pip-frame] .hz-seat .nm { font-size:.72rem; }
  body[data-pip-frame] .hz-actions { flex-direction:column; }
  body[data-pip-frame] .hz-sc small { font-size:.64rem; }
  body[data-pip-frame] .hz-depth-hand-guide { font-size:.71rem; }
}
@media (prefers-reduced-motion:reduce) {
  body[data-pip-frame] :is(.hz-btn,.hz-card.in,.shake),body[data-pip-frame] .game-wrap .hz-actions .btn { animation:none!important;transition:none!important; }
  body[data-pip-frame] .game-wrap .hz-actions .btn:is(:hover,:active) { transform:none; }
}