/* Pixel cards — sizes are whole multiples of the 48×68 art, so every texel stays square */
.pc-card,.pc-flip,.pc-pile{display:inline-block;position:relative;flex:none;vertical-align:top;user-select:none;-webkit-user-select:none}
.pc-card img,.pc-flip img,.pc-pile img{display:block;width:100%;height:100%;image-rendering:pixelated}
.pc-sm{width:48px;height:68px}
.pc-md{width:96px;height:136px}
.pc-lg{width:144px;height:204px}
.pc-card{filter:drop-shadow(2px 3px 0 rgba(0,0,0,.45))}
.pc-card.pc-deal{animation:pcDeal .32s cubic-bezier(.2,1.5,.5,1)}
.pc-pile img{position:absolute;left:0;top:0}
.pc-pile img:last-child{position:relative}
.pc-flip{perspective:600px}
.pc-flip-in{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:pcTurn .42s ease-out both}
.pc-flip-back,.pc-flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pc-flip-back{transform:rotateY(180deg)}
.pc-line{display:flex;justify-content:center;min-height:68px}
.pc-line>*+*{margin-left:var(--pc-overlap,4px)}
/* A chip you drag along a rail. --pc-thumb is the chip's image, --pc-fill how far along it is */
.pc-slider{-webkit-appearance:none;appearance:none;height:26px;margin:0;padding:0;background:none;border:0;box-shadow:none;cursor:pointer;touch-action:none}
.pc-slider:focus{outline:none;box-shadow:none}
.pc-slider:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pc-slider::-webkit-slider-runnable-track{height:12px;border:2px solid #000;box-shadow:inset 0 2px 0 rgba(0,0,0,.45);background:linear-gradient(90deg,var(--gold) var(--pc-fill,0%),#26264a var(--pc-fill,0%))}
.pc-slider::-moz-range-track{height:8px;border:2px solid #000;background:#26264a}
.pc-slider::-moz-range-progress{height:8px;background:var(--gold)}
.pc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border:0;border-radius:0;background:var(--pc-thumb) center/100% 100% no-repeat;image-rendering:pixelated}
.pc-slider::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:0;background:var(--pc-thumb) center/100% 100% no-repeat;image-rendering:pixelated}

/* The table every card game is laid out on: seats up top, the player's own panel below */
.pc-table{position:relative;padding:12px;border:3px solid #000;box-shadow:var(--pixel-shadow);background-size:cover;background-position:center bottom;image-rendering:pixelated;overflow:clip}
.pc-seats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.pc-seat,.pc-mine{background:rgba(13,14,43,.82);border:2px solid #000;box-shadow:inset 0 0 0 1px rgba(167,139,250,.28);padding:8px;transition:box-shadow .15s,opacity .2s}
.pc-seat.active,.pc-mine.active{box-shadow:inset 0 0 0 2px var(--gold),0 0 12px rgba(240,192,64,.45)}
.pc-seat.out{opacity:.55}
.pc-seat.bust,.pc-mine.bust{background:rgba(70,14,24,.86)}
.pc-seat.shake,.pc-mine.shake{animation:partyShake .3s}
.pc-who{display:flex;align-items:center;gap:8px;min-width:0;font-size:.9rem}
.pc-who img{width:36px;height:36px;image-rendering:pixelated;flex:none}
.pc-name{min-width:0;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pc-score{font-family:var(--font-pixel);font-size:.72rem;color:var(--gold);text-shadow:1px 1px 0 #000;white-space:nowrap}
.pc-tag{font-size:.8rem;color:var(--text2);white-space:nowrap}
.pc-race{height:5px;margin:6px 0;background:#000;overflow:hidden}
.pc-race div{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .5s}
.pc-time{height:6px;margin-top:8px;background:#000;overflow:hidden}
.pc-time div{height:100%;background:var(--gold)}
.pc-burst{position:absolute;inset:0;pointer-events:none;z-index:3}
.pc-flash{animation:pcFlash .5s ease-out both}
.pc-flash.bad{background:#ef4444}
.pc-flash.good{background:#fde68a}

@keyframes pcFlash{0%{opacity:.45}100%{opacity:0}}
.pc-burst span{position:absolute;top:-24px;width:10px;height:18px;background:var(--gold);clip-path:polygon(50% 0,100% 40%,70% 100%,30% 100%,0 40%);animation:pcFall 1.6s ease-in both}
@keyframes pcFall{to{transform:translateY(620px) rotate(320deg);opacity:.2}}
@keyframes pcDeal{0%{transform:translateY(-34px) rotate(-8deg) scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes pcTurn{0%{transform:rotateY(180deg) translateY(-12px)}100%{transform:rotateY(0)}}
@media (max-width:640px){.pc-mine.active{position:sticky;bottom:76px;z-index:2;background:#0d0e2b}}
@media (prefers-reduced-motion:reduce){.pc-card.pc-deal,.pc-flip-in,.pc-burst span,.pc-seat.shake,.pc-mine.shake{animation:none}}