.stage { max-width: 680px; }
.lv { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.lv button { background: var(--panel2); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; cursor: pointer; font: inherit; font-size: .85rem; }
.lv button.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.score { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.score > div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
.score > div.me { border-color: var(--line2); }
.score b { font-family: var(--mono); font-weight: 400; color: var(--gold-l); }
.score .tot { font-size: 1.25rem; }
.btable { position: relative; padding: 14px 12px; display: grid; gap: 12px; }
.hand { display: flex; justify-content: center; gap: 8px; min-height: calc(var(--cw) * 1.4); }
.opp { --cw: 44px; }
.opp .pc { margin-inline: -8px; }
.mid { display: flex; align-items: center; gap: 14px; min-height: 190px; }
.deck { --cw: 50px; position: relative; flex: none; width: 50px; text-align: center; }
.deck span { display: block; font-family: var(--mono); font-size: .7rem; color: var(--faint); margin-top: 4px; }
.tbl { --cw: 60px; flex: 1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: center; direction: ltr; }
.tbl .empty { color: rgba(239,233,221,.35); font-size: .85rem; }
.tbl .taken { box-shadow: 0 0 0 3px var(--gold-l), 0 0 18px rgba(243,226,179,.6); transform: translateY(-4px); }
.tbl .played { box-shadow: 0 0 0 3px #fff6d5, 0 8px 18px rgba(0,0,0,.5); animation: drop .35s ease-out; }
.tbl .played.from-top { animation-name: dropT; }
@keyframes drop { from { transform: translateY(80px) scale(1.1); opacity: .3; } }
@keyframes dropT { from { transform: translateY(-80px) scale(1.1); opacity: .3; } }
.mine { --cw: 74px; }
.mine .pc.can { cursor: pointer; }
.mine .pc.can:hover { transform: translateY(-10px); box-shadow: 0 0 0 2px var(--gold), 0 10px 20px rgba(0,0,0,.5); }
.mine .pc:not(.can) { filter: brightness(.75); }
.msg { text-align: center; color: var(--gold-l); min-height: 1.6em; margin: 10px 0 0; }
.basra-flash { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; font-family: var(--display); font-size: clamp(2.4rem, 9vw, 3.6rem); font-weight: 700; color: var(--gold-l); text-shadow: 0 4px 24px rgba(0,0,0,.8), 0 0 30px rgba(201,168,106,.6); animation: bflash 1.4s ease-out forwards; }
@keyframes bflash { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(1); opacity: 0; } }
.overlay .sum { margin: 10px auto 18px; border-collapse: collapse; font-size: .9rem; min-width: 260px; }
.overlay .sum th, .overlay .sum td { padding: 6px 12px; border-bottom: 1px solid var(--line); }
.overlay .sum th { color: var(--gold); font-weight: 400; }
.overlay .sum td:first-child { text-align: start; color: var(--muted); }
@media (max-width: 640px) {
  .opp { --cw: 34px; } .deck { --cw: 38px; width: 38px; }
  .tbl { --cw: 44px; gap: 5px; } .mine { --cw: 60px; } .hand { gap: 6px; }
  .mid { min-height: 150px; gap: 8px; } .btable { padding: 10px 8px; }
  .score > div { font-size: .7rem; padding: 5px 8px; }
}