.game-view{display:grid;grid-template-rows:auto auto 1fr auto auto;gap:var(--space-lg)}.network-pill{display:flex;align-items:center;gap:var(--space-sm);font-size:.8rem;color:var(--color-muted)}#network-dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--color-danger)}#network-dot.is-online{background:var(--color-success)}.opponents{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:var(--space-sm)}.opponent{min-width:0;padding:.7rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}.opponent--current{border-color:var(--color-primary)}.opponent--offline{opacity:.55}.opponent__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}.opponent__meta{font-size:.75rem;color:var(--color-muted)}.table-area{display:grid;place-items:center;align-content:center;gap:var(--space-md);min-height:20rem;padding:var(--space-xl);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--surface-shadow)}.turn-banner{min-height:1.5rem;font-weight:850}.piles{display:flex;align-items:center;gap:var(--space-lg)}.pile,.pile-slot{width:var(--card-width);height:var(--card-height);border-radius:var(--radius-md)}.pile{display:grid;place-items:center;align-content:center;border:.25rem solid var(--color-card-light);color:var(--color-card-light);background:var(--color-wild);box-shadow:0 .65rem 1.2rem var(--color-shadow);font-size:1rem;font-weight:950;transform:rotate(-3deg)}.pile small{font-size:.65rem}.pile-slot{display:grid;place-items:center}.game-meta,.game-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-md);color:var(--color-muted)}.hand-area{min-width:0}.hand{display:flex;gap:calc(var(--space-sm) * -1);overflow-x:auto;overflow-y:hidden;padding:var(--space-lg) var(--space-sm);scrollbar-color:var(--color-border) transparent}.card{position:relative;flex:0 0 var(--card-width);width:var(--card-width);height:var(--card-height);border:.25rem solid var(--color-card-light);border-radius:var(--radius-md);padding:.35rem;color:var(--color-card-ink);box-shadow:0 .5rem 1rem var(--color-shadow);transition:transform var(--transition-normal),filter var(--transition-fast)}button.card{min-height:var(--card-height)}.card--red{background:var(--color-red)}.card--yellow{background:var(--color-yellow)}.card--green{background:var(--color-green)}.card--blue{background:var(--color-blue)}.card--wild{background:var(--color-wild)}.card__corner{position:absolute;top:.35rem;left:.45rem;font-weight:950;font-size:.8rem}.card__corner--bottom{inset:auto .45rem .35rem auto;transform:rotate(180deg)}.card__face{position:absolute;inset:18% 12%;display:grid;place-items:center;border-radius:50%;background:var(--color-card-light);color:var(--color-text);font-size:clamp(1rem,3vw,1.7rem);font-weight:950;transform:skew(-10deg)}.card--playable{cursor:pointer}.card--playable:hover,.card--playable:focus-visible{z-index:2;transform:translateY(-.65rem) rotate(-1deg)}.card--disabled{filter:saturate(.5) brightness(.7)}.activity{color:var(--color-muted)}.activity ol{display:grid;gap:.25rem;margin:.5rem 0 0 1.4rem;font-size:.85rem}
