/* Choice is a paused opening phase, so it never adds controls to the mid-hand layout. */
.player-exchange{position:fixed;inset:0;margin:0;border:0;border-radius:0;width:100vw;height:var(--view-height,100dvh);max-width:none;max-height:none;padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));overflow:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 70%,#243e4c80,transparent 65%),#090f1c;color:#f4eddf}
.player-exchange::backdrop{background:#090f1c}
.exchange-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#c9b58e}
.exchange-topline>button{border-bottom:1px solid #d3b67b55;min-height:36px;font-size:12px}
.exchange-content{width:min(100%,940px);margin:clamp(12px,6vh,64px) auto 0;text-align:center}
.exchange-content>.section-kicker{justify-content:center;font-size:12px;letter-spacing:.13em}
.exchange-content>h2{font-size:clamp(36px,7vw,68px);color:#ffe1a0;font-weight:700;letter-spacing:.15em;margin:12px 0}
.exchange-content>p{font-size:14px;line-height:1.75;color:#c6d3df}
.exchange-content>p>span{color:#ffe1a0}
.exchange-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#a1b7c8;margin:20px 0 14px}
.exchange-heading>strong{font-size:13px;font-weight:500;color:#ffe1a0}
.exchange-hand{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:8px;align-items:center;padding:8px 3px}
.exchange-hand .exchange-tile{position:relative;width:100%;height:clamp(58px,8vw,88px);padding:3px 2px;min-width:0;max-width:none;transition:transform .15s,box-shadow .15s}
.exchange-hand .exchange-tile.is-chosen{transform:translateY(-7px);outline:2px solid #ffe1a0;outline-offset:2px;box-shadow:0 0 20px #e4b96675,0 4px #665939}
.exchange-check{position:absolute;top:-10px;right:-4px;border-radius:50%;font-family:var(--sans);font-size:12px;line-height:20px;width:20px;height:20px;background:#f3ce84;color:#1a1523;font-weight:800}
.exchange-check:empty{display:none}
.exchange-hand .exchange-tile:disabled{opacity:.6}
.exchange-hand .tile-number,.exchange-hand .tile-suit{font-size:clamp(19px,3vw,30px)}
.exchange-hand .honor{font-size:clamp(28px,4vw,42px)}
.exchange-content>.exchange-tip{margin:14px 0 20px;font-size:12px;color:#99aabd}
.exchange-actions{display:flex;justify-content:center;gap:12px}
.exchange-actions>button{min-width:0;min-height:44px;padding:12px 20px;font-size:14px;letter-spacing:0}
.exchange-content>.exchange-footnote{font-size:11px;color:#8fa2b7;margin:16px 0 0}

/* The player's tiles fill the cut-in, with the actual selected and received faces. */
.player-special-cutin{--special-color:#f6cc78;background:#080e19}
.player-special-glow{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 57%,#c58a343f,transparent 60%),repeating-conic-gradient(from -20deg at 50% 55%,#e4b9640d 0deg 1deg,transparent 1deg 20deg);animation:player-special-bloom 1s ease-out both}
.player-special-content{position:relative;height:100%;max-width:1100px;margin:auto;padding:max(80px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;overflow:auto;text-align:center}
.player-special-title>.section-kicker{justify-content:center;color:#f8cf83;font-size:12px;margin:0 0 8px}
.player-special-title>h2{margin:0;font-size:clamp(45px,8vw,90px);font-weight:800;letter-spacing:.12em;color:#fff0cf;text-shadow:2px 4px #6e492b,0 0 35px #e6b76a80;animation:special-copy-in .6s ease-out both}
.player-special-title>blockquote{font-size:16px;font-family:var(--serif);margin:12px 0 0;color:#dacfc1}
.player-special-exchange{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.exchange-result-row>span{display:block;font-size:11px;color:#aab9c9;margin-bottom:12px;letter-spacing:.1em}
.exchange-result-row>div{display:flex;justify-content:center;gap:10px}
.exchange-result-row .tile{width:clamp(36px,7vw,58px);height:clamp(50px,9.7vw,80px)}
.exchange-result-row .tile-number,.exchange-result-row .tile-suit{font-size:clamp(19px,3.7vw,27px)}
.exchange-result-row .honor{font-size:clamp(26px,4.5vw,38px)}
.exchange-result-row:not(.exchange-received) .tile{filter:saturate(.5) brightness(.75)}
.exchange-direction{color:#edc16f;font-size:24px;line-height:1}
.exchange-received>span{color:#f4d794}
.exchange-received .tile{box-shadow:0 4px #817044,0 0 25px #e8c37b66;animation:player-tile-reveal .55s .30s backwards}
.exchange-received .redraw-1{animation-delay:.42s}.exchange-received .redraw-2{animation-delay:.54s}.exchange-received .redraw-3{animation-delay:.66s}.exchange-received .redraw-4{animation-delay:.78s}
.player-special-effect{font-size:14px;line-height:1.75;margin:0;color:#e4d5ba}
.player-special-content>.special-continue{flex:none;min-height:44px;max-width:440px}
@keyframes player-tile-reveal{from{opacity:0;transform:translateY(20px) rotateY(80deg)}to{opacity:1;transform:translateY(0) rotateY(0)}}
@keyframes player-special-bloom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media(max-width:620px) and (orientation:portrait){
  .player-exchange{padding-left:18px;padding-right:18px}
  .exchange-hand{grid-template-columns:repeat(7,minmax(0,1fr));gap:18px 6px}
  .exchange-hand .exchange-tile{height:clamp(55px,13vw,74px)}
  .exchange-hand .tile-number,.exchange-hand .tile-suit{font-size:22px}
  .exchange-hand .honor{font-size:30px}
  .exchange-actions{flex-direction:column-reverse;gap:8px}
  .exchange-content{margin-top:18px}
  .exchange-content>.exchange-footnote{margin-top:12px}
  .player-special-content{gap:18px}
}
@media(max-height:620px) and (orientation:landscape){
  .player-exchange{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .exchange-topline{height:28px;font-size:11px}.exchange-topline>button{min-height:28px}
  .exchange-content{margin-top:3px;max-width:900px}
  .exchange-content>.section-kicker{font-size:10px}.exchange-content>h2{font-size:30px;margin:5px 0}
  .exchange-content>p{font-size:12px;line-height:1.5;margin-bottom:6px}
  .exchange-content>p br{display:none}
  .exchange-heading{margin:9px 0 7px;font-size:11px}
  .exchange-hand{gap:7px;padding:5px 3px}.exchange-hand .exchange-tile{height:52px;max-width:54px;justify-self:center}
  .exchange-hand .tile-number,.exchange-hand .tile-suit{font-size:20px}.exchange-hand .honor{font-size:28px}
  .exchange-content>.exchange-tip{font-size:10px;margin:7px 0}
  .exchange-actions>button{padding:8px 18px;font-size:12px;min-height:40px}
  .exchange-content>.exchange-footnote{margin-top:5px;font-size:10px}
  .player-special-content{padding-top:45px;padding-bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:12px 24px;align-items:center;justify-items:center}
  .player-special-title>h2{font-size:clamp(38px,8vw,76px)}.player-special-title>blockquote{font-size:14px;margin-top:10px}
  .player-special-exchange{gap:4px}.exchange-result-row>span{margin-bottom:6px;font-size:10px}
  .exchange-result-row .tile{width:clamp(32px,4.8vw,45px);height:clamp(45px,6.5vw,60px)}
  .exchange-result-row .tile-number,.exchange-result-row .tile-suit{font-size:21px}.exchange-result-row .honor{font-size:29px}
  .exchange-result-row>div{gap:7px}.exchange-direction{font-size:18px}
  .player-special-effect{font-size:12px;line-height:1.5}.player-special-content>.special-continue{font-size:12px;min-height:42px;padding:10px 14px;width:100%;gap:14px}
}
@media(max-height:360px) and (orientation:landscape){
  .player-exchange{padding-top:max(5px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}
  .exchange-content>h2{font-size:26px;margin:3px 0}.exchange-heading{margin:7px 0 5px}
  .exchange-content>.exchange-tip{margin:5px 0}.exchange-content>.exchange-footnote{display:none}
  .exchange-hand .exchange-tile{height:48px}
}
@media(prefers-reduced-motion:reduce){.player-special-glow,.player-special-title>h2,.exchange-received .tile{animation:none}.exchange-hand .exchange-tile{transition:none}}