#board.oc{position:relative;width:min(760px,100%);background:radial-gradient(ellipse at 50% 40%,#2f8a57,#1d6a3f 80%);border-radius:18px;padding:14px;box-shadow:inset 0 0 40px rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.15);color:#fff;display:flex;flex-direction:column;gap:12px;box-sizing:border-box}
.oc-opps{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.oc-opp{background:rgba(0,0,0,.18);border:2px solid transparent;border-radius:12px;padding:8px 10px;min-width:130px;text-align:center;--cw:24px;transition:border-color .2s}
.oc-opp.on{border-color:#f4c430;background:rgba(244,196,48,.15)}
.oc-opp.out{opacity:.45}
.oc-oname{font-weight:700;font-size:14px;margin-bottom:4px}
.oc-fan{display:flex;justify-content:center;min-height:34px}
.oc-fan .pc{margin-left:-14px;border-width:1.5px}
.oc-fan .pc:first-child{margin-left:0}
.oc-cnt{font-size:13px;margin-top:4px}
.oc-one-call{color:#ffd54a;font-weight:800}
.oc-center{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;--cw:78px;padding:6px 0}
.oc-pile{position:relative;cursor:pointer}
.oc-pcount{position:absolute;right:-6px;bottom:-6px;background:#fff;color:#1d6a3f;font-weight:800;font-size:12px;border-radius:99px;padding:2px 7px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
#oc-disc .pc.drop{animation:ocdrop .32s ease-out}
@keyframes ocdrop{from{transform:translateY(-30px) rotate(-8deg) scale(1.08);opacity:.4}to{transform:none;opacity:1}}
.oc-info{display:flex;flex-direction:column;gap:6px;min-width:110px}
.oc-chip{background:rgba(0,0,0,.25);border-radius:99px;padding:4px 10px;font-size:13px;font-weight:700;text-align:center}
.oc-chip.suit{background:#fff;color:#1f1f1f;font-size:15px}
.oc-chip.suit.oc-red,.oc-red{color:#e2483d}
.oc-chip.att{background:#e04848;color:#fff;animation:ocpulse 1s infinite}
@keyframes ocpulse{50%{transform:scale(1.07)}}
.oc-msg{min-height:40px;background:rgba(0,0,0,.2);border-radius:10px;padding:8px 12px;font-size:14px;text-align:center;line-height:1.5}
.oc-msg.pop{animation:ocmsg .3s}
@keyframes ocmsg{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
.oc-actions{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
#oc-me{font-weight:700;font-size:14px;padding:4px 10px;border-radius:99px;border:2px solid transparent}
#oc-me.on{border-color:#f4c430;background:rgba(244,196,48,.15)}
.oc-warn{color:#ffd54a}
#oc-one{background:#e2724a;color:#fff;border-color:#e2724a;font-weight:800}
#oc-one.urgent{animation:ocpulse .6s infinite;box-shadow:0 0 0 4px rgba(255,213,74,.7)}
.oc-hand{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;--cw:64px;padding:12px 4px 4px;min-height:100px}
.oc-hand.crowd{gap:0}
.oc-hand.crowd .oc-c{margin-left:-14px}
.oc-c{transition:transform .15s;cursor:default}
.oc-c.can{cursor:pointer;transform:translateY(-10px)}
.oc-c.can .pc{box-shadow:0 0 0 3px #f4c430,0 4px 10px rgba(0,0,0,.35)}
.oc-c.can:hover{transform:translateY(-16px)}
.oc-c.dim .pc{filter:brightness(.72)}
.oc-c.nope{animation:solnope2 .3s}
@keyframes solnope2{25%{margin-left:-6px}75%{margin-left:6px}}
.oc-suits{position:absolute;inset:0;background:rgba(0,0,0,.55);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:5}
.oc-suits[hidden]{display:none}
.oc-suits p{margin:0;font-weight:700;font-size:16px}
.oc-suits div{display:flex;gap:10px}
.oc-suits button{font-size:34px;width:64px;height:64px;border-radius:14px;font-family:Georgia,serif;padding:0}
.oc-suits button.r{color:#cf2e2a}
@media(max-width:560px){
  .oc-center{--cw:60px;gap:12px}
  .oc-hand{--cw:48px;gap:4px}
  .oc-hand.crowd .oc-c{margin-left:-12px}
  .oc-opp{min-width:90px;padding:6px;--cw:18px}
  .oc-fan .pc{margin-left:-11px}
  #board.oc{padding:10px}
}