/* Win ceremony: open hands, horse draw, confirm buttons */
.ceremony{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:12px;background:#02100ad6;overflow:auto}
.ceremony[hidden]{display:none}
.cer-panel{background:linear-gradient(135deg,#1d3d2b,#0d2419);color:#dce3c9;border:1px solid #c1ac68;border-radius:16px;padding:18px 22px;max-width:min(760px,96vw);box-shadow:0 20px 100px #000a;text-align:center}
.cer-panel h2{margin:0 0 4px;font-size:22px;color:#ffe27e}
.cer-sub{margin:0 0 10px;font-size:13px;color:#c7cca9}
.cer-row{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:9px;margin:4px 0;text-align:left}
.cer-row.win{background:#4a3d12aa;outline:1px solid #d3b45a}
.cer-name{flex:0 0 112px;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cer-name i{margin-left:5px;font-style:normal;background:#c0392b;color:#fff;border-radius:4px;padding:0 4px;font-size:11px}
.cer-tiles{display:flex;flex-wrap:wrap;gap:1px;align-items:center}
.cer-meld{display:inline-flex;margin-right:8px}
#ceremony .cer-tiles .tile{--tw:25px}
.cer-panel .primary{margin-top:12px;min-width:150px;padding:11px 28px;font-size:16px}
.horse-row{display:flex;gap:12px;justify-content:center;margin:18px 0 8px}
.hcard{background:transparent;padding:0;perspective:700px;border-radius:6px}
.hcard:disabled{opacity:1;cursor:default}
.hcard:not(:disabled){cursor:pointer}
.hcard:not(:disabled):hover .hcard-in{transform:translateY(-8px)}
.hcard.chosen .hcard-in{outline:2px solid #ffe27e;border-radius:6px}
.hcard-in{display:block;position:relative;width:64px;height:calc(64px*1.28 + 6px);transform-style:preserve-3d;transition:transform .6s ease}
.hcard.flipped .hcard-in{transform:rotateY(180deg)}
.hface{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hface.back{transform:rotateY(180deg)}
#ceremony .hface .tile{--tw:62px}
.hcard.picked .hcard-in{box-shadow:0 0 22px #ffe27e;border-radius:6px}
.hcard.dim{opacity:.45}
.cer-msg{min-height:22px;margin:6px 0 0;font-size:15px;color:#ffe27e;font-weight:700}
@media(max-height:480px),(max-width:700px){
  .cer-panel{padding:10px 14px}.cer-panel h2{font-size:18px}.cer-sub{margin-bottom:4px;font-size:12px}
  .cer-row{padding:2px 6px;margin:2px 0}.cer-name{flex-basis:70px;font-size:12px}
  #ceremony .cer-tiles .tile{--tw:19px}.cer-meld{margin-right:5px}
  .cer-panel .primary{margin-top:6px;padding:8px 22px;font-size:14px}
  .horse-row{gap:7px;margin:8px 0 4px}.hcard-in{width:46px;height:calc(46px*1.28 + 6px)}#ceremony .hface .tile{--tw:44px}
}
@media(prefers-reduced-motion:reduce){.hcard-in{transition:none}}
/* Side melds stack upwards from just above the seat chip, so a third/fourth meld never hides under it */
.melds-left,.melds-right{top:auto!important;bottom:calc(50% + 34px)!important;flex-wrap:wrap-reverse;align-content:flex-end}
.melds-left{justify-content:flex-end}

.cer-label{margin:10px 0 0;font-size:12px;color:#c7cca9;letter-spacing:2px}
.horse-row{margin:6px 0 4px}
.hcard.open.match .hcard-in{box-shadow:0 0 20px #ffe27e;outline:2px solid #ffe27e;border-radius:6px}
@media(max-height:480px){.horse .hcard-in{width:36px;height:calc(36px*1.28 + 5px)}.horse #ceremony .hface .tile,#ceremony .horse .hface .tile{--tw:34px}.horse .cer-label{margin-top:2px}.horse .horse-row{margin:3px 0 2px;gap:6px}.horse .cer-sub{margin-bottom:0}.horse .cer-msg{min-height:18px;margin-top:2px}}

/* Big +/- money figures on every payment */
.score-float{font-size:clamp(26px,4.4vw,40px);font-weight:900;padding:6px 14px;border-radius:12px;border-width:2px;letter-spacing:1px;line-height:1.1;z-index:60}
.score-float.gain{font-size:clamp(44px,8vw,76px);padding:8px 18px;color:#fff0a0;text-shadow:0 0 14px #e0a800,0 2px 4px #000}
.score-float.loss{color:#ffb4a0;text-shadow:0 0 14px #c0392b,0 2px 4px #000}
@media(max-height:480px){.score-float{font-size:26px;padding:3px 10px}.score-float.gain{font-size:46px;padding:4px 12px}}

/* Pong / kong callout sits on the claiming player's seat, larger than before */
.seat-effect{position:fixed;inset:auto;width:250px;height:250px;transform:translate(-50%,-50%);z-index:55;pointer-events:none;display:grid;place-items:center}
.seat-effect .effect-glyph{width:62%}
.seat-effect .effect-sequence{width:100%}
@media(max-height:480px){.seat-effect{width:180px;height:180px}}

/* My hand is left-anchored; my melds fill from the bottom-right corner towards the left */
.tiles-row{position:relative;justify-content:flex-start!important}
.hand{justify-content:flex-start!important}
.self-melds{position:absolute!important;left:auto!important;bottom:0!important;margin:0 0 3px!important;flex-direction:row-reverse}

/* The tile I am being asked to claim, at 2x length and width */
.claim-tile{position:fixed;z-index:20;pointer-events:none;margin:0;max-width:none;max-height:none;filter:drop-shadow(0 0 12px #ffe27e) drop-shadow(0 4px 6px #0008);outline:2px solid #ffe27e;border-radius:4px}