:root { --felt: #35654d; --dim: rgba(255,255,255,0.62); --accent: #ffd166; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: var(--felt); color: #fff; font: 15px/1.4 system-ui, -apple-system, sans-serif; -webkit-text-size-adjust: 100%; }
.page { padding: 8px clamp(6px, 2vw, 14px) 24px; max-width: 620px; margin: 0 auto; }
.page__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; }
.page__head h1 { font-size: 17px; margin: 0; }
.k-controls { display: flex; gap: 6px; align-items: center; }
.k-controls button { font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; }
.k-controls button.primary { background: var(--accent); color: #1a1a1a; border-color: transparent; font-weight: 700; }
.k-controls .gear { font-size: 16px; padding: 4px 9px; line-height: 1; }

.ht-table { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* scoreboard */
.ht-scores { display: flex; gap: 6px; width: 100%; justify-content: center; margin-bottom: 2px; }
.ht-score { display: flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,0.18); font-size: 12px; }
.ht-score.ht-turn { background: var(--accent); color: #1a1a1a; font-weight: 700; }
.ht-score__name { opacity: 0.85; }
.ht-score__pts { font-weight: 700; font-size: 14px; }
.ht-score__hand { color: #ffb3b3; font-weight: 700; }
.ht-score.ht-turn .ht-score__hand { color: #a11; }

/* seats */
.ht-seat { display: flex; justify-content: center; align-items: center; }
.ht-mid { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; }
.ht-oppfan { display: flex; }
.ht-oppfan--top { flex-direction: row; }
.ht-oppfan--left, .ht-oppfan--right { flex-direction: column; }
.ht-left, .ht-right { flex: 0 0 auto; }
.ht-turn .card__face { box-shadow: 0 0 0 2px var(--accent); }

/* center trick with rotated plays */
.ht-trick { position: relative; flex: 1 1 auto; align-self: center; }
.ht-play { position: absolute; }
.ht-play--bottom { left: 50%; bottom: 4%; transform: translateX(-50%) rotate(0deg); }
.ht-play--top    { left: 50%; top: 4%;    transform: translateX(-50%) rotate(180deg); }
.ht-play--left   { left: 3%;  top: 50%;   transform: translateY(-50%) rotate(90deg); }
.ht-play--right  { right: 3%; top: 50%;   transform: translateY(-50%) rotate(-90deg); }
.ht-play--won .card__face { box-shadow: 0 0 0 3px var(--accent); }

/* your hand */
.ht-bottom { width: 100%; margin-top: 4px; }
.ht-hand { display: flex; justify-content: center; padding-top: 14px; }
.ht-selectable, .ht-playable { cursor: pointer; }
.ht-selected { transform: translateY(-14px); }
.ht-playable { filter: brightness(1.02); }
.ht-playable:hover { transform: translateY(-6px); }
.ht-dim { filter: brightness(0.62) saturate(0.9); }

/* controls */
.ht-controls { display: flex; align-items: center; gap: 10px; min-height: 34px; margin-top: 4px; }
.ht-prompt { font-size: 14px; color: var(--dim); }
.ht-btn { font: inherit; font-size: 14px; padding: 7px 16px; border-radius: 9px; cursor: pointer; border: none; }
.ht-btn.primary { background: var(--accent); color: #1a1a1a; font-weight: 700; }
.ht-btn.is-disabled { opacity: 0.4; cursor: default; }

/* overlays */
.ht-overlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); padding: 20px; }
.ht-card { width: 100%; max-width: 340px; background: #232a27; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,0.5); text-align: center; }
.ht-card h2 { margin: 0 0 12px; font-size: 19px; color: var(--accent); }
.ht-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; text-align: left; }
.ht-grid--final { grid-template-columns: 1fr auto; }
.ht-grid__h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); }
.ht-grid__r { color: #fff; }
@media (prefers-reduced-motion: reduce) { .ht-playable:hover, .ht-selected { transform: none; } }