/* Hallmark · Spades · partner compass + real wrapping card rack.
 * Load last. Card width/height and faces remain the renderer's. No state reads.
 * Override only absolute placement/box height, not the shared stage geometry. */
@import url('./assets/depth-tokens.css');

body[data-pip-frame] #sp-table.sp-depth-table { grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto;gap:var(--sp-art-space-3);padding:var(--sp-art-space-4);border:2px solid var(--sp-art-night);border-radius:20px;background:var(--sp-art-navy) url('./assets/depth-table.svg') center / 100% 100%;color:var(--sp-art-white);box-shadow:0 var(--sp-art-space-2) 0 var(--sp-art-line); }
body[data-pip-frame] .sp-depth-table #seat-1 { grid-column:1;grid-row:1; }
body[data-pip-frame] .sp-depth-table #seat-2 { grid-column:2;grid-row:1;justify-self:stretch;min-width:0; }
body[data-pip-frame] .sp-depth-table #seat-3 { grid-column:3;grid-row:1; }
body[data-pip-frame] .sp-depth-table #seat-0 { grid-column:1/-1;grid-row:3;justify-self:stretch;min-width:0; }
body[data-pip-frame] .sp-depth-table .sp-seat { align-self:stretch;min-width:0;border:1px dashed var(--sp-art-seam);background:var(--sp-art-night);padding:var(--sp-art-space-3) var(--sp-art-space-1);line-height:1.45; }
body[data-pip-frame] .sp-depth-table :is(#seat-0,#seat-2) { border-style:solid;border-color:var(--sp-art-silver); }
body[data-pip-frame] .sp-depth-table .sp-seat.turn { border:2px solid var(--sp-art-gold);background:var(--sp-art-night); }
body[data-pip-frame] .sp-seat .sp-name { font-size:.82rem;overflow-wrap:anywhere; }
body[data-pip-frame] .sp-seat .sp-role { opacity:1;font-size:.61rem;letter-spacing:0; }
body[data-pip-frame] .sp-seat .sp-st,body[data-pip-frame] .sp-seat .sp-left { opacity:1;font-size:.71rem;line-height:1.5;overflow-wrap:anywhere; }
body[data-pip-frame] .sp-arrow { color:var(--sp-art-gold); }
body[data-pip-frame] .sp-depth-table .sp-mid { grid-column:1/-1;grid-row:2;height:220px;min-width:0; }
body[data-pip-frame] #sp-trick-note { font-size:.72rem;line-height:1.5;opacity:1;color:var(--sp-art-white); }
body[data-pip-frame] :is(#sp-table,#sp-hand,#sp-overlay) .card { background:var(--sp-art-ivory) url('./assets/depth-card-face.svg') center / 100% 100%;color:var(--sp-art-black);border:1px solid var(--sp-art-line);border-radius:var(--sp-art-card-radius);box-shadow:0 var(--sp-art-space-1) var(--sp-art-space-2) var(--sp-art-shadow);font-family:inherit; }
body[data-pip-frame] :is(#sp-table,#sp-hand,#sp-overlay) .card.red { color:var(--sp-art-red); }
body[data-pip-frame] :is(#sp-table,#sp-hand,#sp-overlay) .card .ck { left:var(--sp-art-space-2);top:var(--sp-art-space-2);font-size:.95rem;line-height:1.05; }
body[data-pip-frame] :is(#sp-table,#sp-hand,#sp-overlay) .card .cs { position:absolute;left:0;bottom:8%;width:100%;font-size:1.8rem;line-height:1;text-align:center;margin:0; }
body[data-pip-frame] .slot { width:60px;height:84px; }
body[data-pip-frame] .slot .ck { font-size:1rem; }
body[data-pip-frame] .slot .cs { font-size:2rem; }
body[data-pip-frame] .slot.s2 { top:var(--sp-art-space-2);left:50%;margin-left:-30px; }
body[data-pip-frame] .slot.s0 { bottom:var(--sp-art-space-2);left:50%;margin-left:-30px; }
body[data-pip-frame] .slot.s1 { left:var(--sp-art-space-5);top:50%;margin-top:-42px; }
body[data-pip-frame] .slot.s3 { right:var(--sp-art-space-5);top:50%;margin-top:-42px; }
body[data-pip-frame] .slot.win { box-shadow:0 0 0 3px var(--sp-art-gold); }
body[data-pip-frame] .sp-wtag { font-size:.65rem;line-height:1.2;bottom:var(--sp-art-space-1);padding:var(--sp-art-space-1) var(--sp-art-space-2);background:var(--sp-art-gold);color:var(--sp-art-ink); }
body[data-pip-frame] .slot.anim { animation:none; }
body[data-pip-frame] .game-wrap #sp-last { grid-column:1/-1;grid-row:4;justify-self:stretch;min-width:var(--sp-art-touch);min-height:44px;padding:var(--sp-art-space-4);border:1px solid var(--sp-art-silver);border-radius:var(--sp-art-radius);font-size:.77rem;line-height:1.2;background:var(--sp-art-paper);color:var(--sp-art-ink);box-shadow:none; }
body[data-pip-frame] .sp-depth-partner-key { font-size:.79rem;font-weight:700;line-height:1.5;text-align:center;color:var(--sp-art-ink);margin:var(--sp-art-space-4) 0; }
body[data-pip-frame] .sp-depth-hand-guide { font-size:.74rem;line-height:1.5;text-align:center;color:var(--sp-art-muted);margin:var(--sp-art-space-5) 0 var(--sp-art-space-3); }
body[data-pip-frame] #sp-hand.sp-depth-hand { display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:var(--sp-art-space-5) var(--sp-art-space-3);height:auto!important;min-height:120px;padding:var(--sp-art-space-5) 0;margin-top:0;border-block:1px solid var(--sp-art-line);background:var(--sp-art-paper);border-radius:var(--sp-art-radius); }
body[data-pip-frame] #sp-hand.sp-depth-hand .card { position:relative!important;inset:auto!important;transform:none;transform-origin:center;flex:0 0 auto;min-width:var(--sp-art-touch);min-height:var(--sp-art-touch);transition:box-shadow .12s ease,border-color .12s ease; }
body[data-pip-frame] #sp-hand.sp-depth-hand .card .ck { font-size:.95rem; }
body[data-pip-frame] #sp-hand.sp-depth-hand .card .cs { margin:0;font-size:1.8rem; }
body[data-pip-frame] #sp-hand.sp-depth-hand .card.legal { transform:none;border:2px solid var(--sp-art-green);box-shadow:0 0 0 var(--sp-art-space-1) var(--sp-art-green); }
body[data-pip-frame] #sp-hand.sp-depth-hand .card.illegal { opacity:1;background:var(--sp-art-ivory) url('./assets/depth-card-face.svg') center / 100% 100%;border:1px dashed var(--sp-art-muted);box-shadow:none; }
body[data-pip-frame] #sp-hand.sp-depth-hand .card.back { background:var(--sp-art-navy) url('./assets/depth-card-back.svg') center / 100% 100%;border:1px solid var(--sp-art-ivory); }
body[data-pip-frame] #sp-hand.sp-depth-hand .card:focus-visible { outline:3px solid var(--sp-art-focus);outline-offset:3px; }
body[data-pip-frame] .sp-team { min-width:0;background:var(--sp-art-ivory);border-color:var(--sp-art-line);padding:var(--sp-art-space-4);gap:var(--sp-art-space-2); }
body[data-pip-frame] .sp-team.t0 { border-left-color:var(--sp-art-green); }
body[data-pip-frame] .sp-team.t1 { border-left-color:var(--sp-art-muted); }
body[data-pip-frame] .sp-tn { min-width:0;font-size:.84rem;line-height:1.3; }
body[data-pip-frame] .sp-tn small { color:var(--sp-art-muted);font-size:.71rem;line-height:1.45;overflow-wrap:anywhere; }
body[data-pip-frame] .sp-pts { color:var(--sp-art-ink);font-size:1.2rem; }
body[data-pip-frame] .sp-tl { color:var(--sp-art-ink);font-size:.74rem;line-height:1.5;overflow-wrap:anywhere; }
body[data-pip-frame] .sp-meta,body[data-pip-frame] .sp-stats { color:var(--sp-art-muted);font-size:.75rem;line-height:1.5;overflow-wrap:anywhere; }
body[data-pip-frame] .sp-bar { flex-wrap:wrap;gap:var(--sp-art-space-4); }
body[data-pip-frame] .sp-bar .sp-seg { flex:1;min-width:0; }
body[data-pip-frame] .sp-seg button { min-height:var(--sp-art-touch);min-width:var(--sp-art-touch);padding-inline:var(--sp-art-space-3);flex:1; }
body[data-pip-frame] .game-wrap #sp-new { min-height:var(--sp-art-touch);font-size:.83rem;padding-inline:var(--sp-art-space-5); }
body[data-pip-frame] #sp-bid,body[data-pip-frame] #sp-blind { min-width:0;padding:var(--sp-art-space-5) var(--sp-art-space-4);background:var(--sp-art-ivory);border-color:var(--sp-art-line);border-radius:var(--sp-art-radius); }
body[data-pip-frame] #sp-bid-grid { grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:var(--sp-art-space-3); }
body[data-pip-frame] .sp-b { min-height:48px;min-width:var(--sp-art-touch);border-color:var(--sp-art-line);color:var(--sp-art-ink);background:var(--sp-art-paper); }
body[data-pip-frame] .sp-b[aria-checked="true"] { background:var(--sp-art-green);border-color:var(--sp-art-green);color:var(--sp-art-white);box-shadow:0 0 0 var(--sp-art-space-1) var(--sp-art-silver); }
body[data-pip-frame] .game-wrap :is(#sp-bid-go,#sp-blind-yes) { min-height:52px;padding:var(--sp-art-space-5);background:var(--sp-art-green);color:var(--sp-art-white);box-shadow:0 3px 0 var(--sp-art-green-dark);font-size:.95rem;line-height:1.4;white-space:normal; }
body[data-pip-frame] .game-wrap #sp-blind-no { min-height:52px;padding:var(--sp-art-space-5);white-space:normal;font-size:.9rem;line-height:1.4;background:var(--sp-art-paper);color:var(--sp-art-ink); }
body[data-pip-frame] .sp-bid-hint { color:var(--sp-art-muted);font-size:.8rem;line-height:1.5; }
body[data-pip-frame] #sp-status { font-size:.9rem;line-height:1.5;min-height:3em;color:var(--sp-art-ink);padding:var(--sp-art-space-3) 0; }
body[data-pip-frame] .sp-opts,body[data-pip-frame] .sp-rules { background:var(--sp-art-ivory);border-color:var(--sp-art-line); }
body[data-pip-frame] .sp-opts .row { flex-wrap:wrap; }
body[data-pip-frame] #sp-track-panel { background:var(--sp-art-ivory);border-color:var(--sp-art-line); }
body[data-pip-frame] .sp-track-card span { font-size:.7rem;line-height:1.45;overflow-wrap:anywhere; }
body[data-pip-frame] .sp-track-card strong { font-size:.95rem; }
body[data-pip-frame] #sp-overlay { padding:max(var(--sp-art-space-6),env(safe-area-inset-top)) max(var(--sp-art-space-6),env(safe-area-inset-right)) max(var(--sp-art-space-6),env(safe-area-inset-bottom)) max(var(--sp-art-space-6),env(safe-area-inset-left)); }
body[data-pip-frame] #sp-overlay .panel { background:var(--sp-art-ivory); }
body[data-pip-frame] .sp-sum { font-size:.8rem;line-height:1.45;table-layout:fixed; }
body[data-pip-frame] .sp-sum :is(th,td) { padding:var(--sp-art-space-3) var(--sp-art-space-2);white-space:normal;overflow-wrap:anywhere; }
body[data-pip-frame] .sp-lt { gap:var(--sp-art-space-3);flex-wrap:wrap; }
body[data-pip-frame] .game-wrap #sp-overlay .btn { min-height:52px;white-space:normal;line-height:1.4; }
body[data-pip-frame] :is(.sp-bar,.sp-opts,.sp-rules,#sp-bid,#sp-blind,#sp-tracker) :is(button,input,summary):focus-visible { outline:3px solid var(--sp-art-focus);outline-offset:3px; }
@media (max-width:360px) {
  body[data-pip-frame] .slot { width:54px;height:76px; }
  body[data-pip-frame] .slot:is(.s0,.s2) { margin-left:-27px; }
  body[data-pip-frame] .slot:is(.s1,.s3) { margin-top:-38px; }
  body[data-pip-frame] .sp-depth-table .sp-mid { height:200px; }
  body[data-pip-frame] .sp-seat .sp-name { font-size:.75rem; }
  body[data-pip-frame] .sp-seat .sp-st { font-size:.67rem; }
  body[data-pip-frame] .sp-depth-partner-key { font-size:.73rem; }
  body[data-pip-frame] .sp-depth-hand-guide { font-size:.67rem; }
  body[data-pip-frame] .game-wrap :is(#sp-blind-yes,#sp-blind-no) { display:flex;width:100%;margin:var(--sp-art-space-3) 0; }
}
@media (prefers-reduced-motion:reduce) {
  body[data-pip-frame] :is(.slot.anim,.slot.sweep,#sp-hand .card,#sp-hand .card.shake) { animation:none!important;transition:none!important; }
  body[data-pip-frame] .slot.sweep { transform:none; }
}