.kc { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 84px; border-radius: 9px; background: #fffaf2; border: 1px solid #d9c7ad; font: 700 1.15rem/1 var(--font-display); box-shadow: 0 6px 14px -8px rgba(0,0,0,0.8); padding: 0; flex: none; font-style: normal; }
.kc.red { color: #c9302c; } .kc.blk { color: #1b1410; }
.kc .ks { font-size: 1.5rem; margin-top: 4px; }
button.kc { cursor: pointer; transition: transform 0.15s; }
button.kc:hover:not(.dim) { transform: translateY(-8px); }
button.kc.dim { opacity: 0.4; cursor: default; }
button.kc:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.k-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--s5); max-width: 560px; }
.k-choices { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s3) var(--s5); }
.k-choices .btn[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-2); }
.k-rules { padding-left: 1.1em; display: grid; gap: var(--s2); margin-top: var(--s3); color: var(--muted); font-size: var(--t1); }
.k-opps { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; margin-bottom: var(--s5); }
.k-opp { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: var(--s3) var(--s4); min-width: 130px; display: grid; gap: 4px; justify-items: center; }
.k-opp.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,194,74,0.25); }
.k-opp span { color: var(--muted); font-size: var(--t0); }
.k-fan { display: flex; margin-top: 4px; }
.k-fan i, .k-deck i { display: block; width: 22px; height: 32px; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--brand-deep) 0 4px, var(--brand) 4px 8px); border: 1px solid #fffaf2; margin-left: -10px; }
.k-fan i:first-child { margin-left: 0; }
.k-centre { display: flex; align-items: center; justify-content: center; gap: var(--s6); margin-block: var(--s4); }
.k-deck { display: grid; justify-items: center; gap: 6px; font-size: var(--t0); color: var(--muted); }
.k-deck i { width: 58px; height: 84px; margin: 0; border-radius: 9px; }
.k-info { display: grid; gap: 2px; min-width: 110px; }
.k-info span { color: var(--muted); font-size: var(--t0); }
.k-info strong { font-size: var(--t3); } .k-info strong.red { color: #ff6f5a; }
.k-info em { color: var(--accent); font-style: normal; font-size: var(--t0); }
.k-log { text-align: center; min-height: 3em; color: var(--ink); }
.k-turn { text-align: center; color: var(--accent); font-weight: 600; min-height: 1.5em; }
.k-hand { display: flex; gap: 6px; overflow-x: auto; padding: 14px 4px 10px; justify-content: safe center; }
.k-actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s3); }
.k-actions .btn[aria-pressed="true"] { background: var(--ok); color: #0b1f06; }
.k-modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.7); display: grid; place-items: center; padding: var(--s4); }
.k-modal[hidden] { display: none; }
.k-modal > div { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: var(--s5); display: grid; gap: var(--s3); text-align: center; min-width: min(320px, 100%); }
.game-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s4); }
.game-card { display: grid; gap: var(--s2); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--s5); text-decoration: none; color: var(--ink); height: 100%; }
a.game-card:hover { border-color: var(--brand); }
.game-card.soon { opacity: 0.6; border-style: dashed; }
.game-card span { color: var(--muted); font-size: var(--t1); } .game-card .go { color: var(--accent); font-weight: 600; }
.game-art { display: flex; gap: 6px; min-height: 60px; }
.game-art .kc { width: 42px; height: 60px; font-size: 0.95rem; } .game-art .ks { font-size: 1.1rem; }
@media (max-width: 760px) {
  #kadi { padding-top: 0; }
  .page-head .lede { display: none; }
  .page-head { padding-block: var(--s4) var(--s2); }
  .k-opps { margin-bottom: var(--s3); } .k-centre { margin-block: var(--s2); gap: var(--s4); }
  .k-log { min-height: 2.6em; font-size: var(--t1); } .k-turn { min-height: 1.2em; }
  .k-hand { padding-top: 6px; }
}
.k-modes { display: flex; gap: var(--s2); margin-bottom: var(--s5); flex-wrap: wrap; }
.k-modes .btn[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-2); }
.o-input { min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: inherit; width: 100%; max-width: 360px; margin-block: var(--s2) var(--s4); }
#o-joinform .o-input { margin: 0; text-transform: uppercase; letter-spacing: 0.2em; }
.o-code { font: 700 clamp(2.4rem, 12vw, 3.6rem)/1 var(--font-display); letter-spacing: 0.18em; color: var(--accent); margin: var(--s3) 0 var(--s4); }
.o-players { list-style: none; padding: 0; display: grid; gap: 6px; margin-block: var(--s4); }
.o-players li { background: var(--surface-2); border-radius: 8px; padding: 10px 14px; }
.k-opp.away { opacity: 0.55; }
.kadi-title { display: flex; align-items: center; gap: var(--s4); }
.kadi-title h1 { margin: 0; }
.kadi-badge { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; border: 2px solid var(--accent); box-shadow: 0 8px 24px -10px rgba(0,0,0,0.8); flex: none; }
.game-badge { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-strong); }
#kadi .k-modes { margin-top: var(--s4); }