/* The two play areas exchange their space as the turn changes. */
.play-table{min-width:0;--play-height:208px}
.play-zone{height:0;opacity:0;overflow:hidden;transition:height .65s cubic-bezier(.22,.8,.25,1),opacity .3s;margin:0;position:relative}
.play-zone.open{height:var(--play-height);opacity:1}
.play-surface{height:calc(var(--play-height) - 14px);margin:7px 0;padding:8px 16px;border:1px solid #bea87780;border-radius:18px;background:radial-gradient(ellipse at 50% 20%,#41656880,#1d363aa8 75%);box-shadow:inset 0 3px 20px #06141680;position:relative}
.played-cards{display:flex;align-items:flex-start;padding:0 4px 5px;min-width:0;overflow-x:auto;overflow-y:hidden;height:166px}
.played-cards .card,.flying-card.card,.purchase-flight.card{flex:0 0 116px;width:116px;min-width:116px;min-height:0;padding:5px;gap:3px;position:relative;pointer-events:auto}
.played-cards .card{margin-right:8px}
.played-cards .card b,.flying-card.card b{font:700 14px system-ui,sans-serif;letter-spacing:0;display:flex;justify-content:space-between;gap:2px;position:absolute;top:5px;left:5px;width:calc(100% - 10px);padding:3px 2px;border-radius:3px;background:#17252bea;color:#fff8de;text-shadow:none}
.played-cards .card-cost,.flying-card .card-cost{font-size:10px;white-space:nowrap}
.played-cards .card-art,.flying-card .card-art,.purchase-flight .card-art{width:104px;height:104px;aspect-ratio:1;order:0}
.played-effect{font-size:11px!important;line-height:1.25!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#opponent-zone #opponent-hand{max-height:122px;min-height:0;transition:max-height .65s cubic-bezier(.22,.8,.25,1),opacity .35s,transform .65s;overflow:hidden}
#opponent-zone.resting #opponent-hand{max-height:0;opacity:0;transform:translateY(-90px)}
#opponent-zone .deck-back{transition:height .65s,margin .65s}
#opponent-zone.resting .deck-back{height:22px;margin-bottom:5px;box-shadow:2px 2px 0 #c9b989}
#opponent-zone.resting .deck-back span{font-size:16px}
#opponent-zone.resting .deck-back:before{inset:2px}
#opponent-zone.resting .deck-pile{padding-top:0}
#opponent-zone.resting .hand-row{min-height:47px}
#player-zone{min-width:0}
#player-zone #hand-title{margin:8px 0 6px!important}
#player-zone #hand-help:empty{display:none}
#player-zone #piles{font-size:13px;margin-top:4px}
.display-mode #player-zone #hand-title{margin-left:98px!important;font-size:21px}
html.display-mode .play-table{--play-height:198px}
html.display-mode #market .card-art{width:100%!important;height:auto!important;aspect-ratio:1;align-self:stretch!important}
html.display-mode #market .card{min-height:0!important}
html.display-mode #market .card b{font-size:18px}
html.display-mode #market{gap:8px}
.display-mode #player-zone #hand .card{width:112px!important;min-width:112px!important;flex-basis:112px}
.display-mode #player-zone #hand .card-art{width:88px!important;height:88px!important;align-self:center!important}
.display-mode #opponent-zone{margin-bottom:4px}
.display-mode #player-zone .controls{display:none!important}
.display-mode #player-zone #hand{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
.display-mode .layout>aside{padding-top:170px}
@media(min-width:1000px){
 html:not(.display-mode) #market .card-art{width:100%;height:auto;aspect-ratio:1;align-self:stretch}
 html:not(.display-mode) #market .card{gap:3px;min-height:0}
 html:not(.display-mode) #market .card b{font-size:17px}
 html:not(.display-mode) #player-zone #hand .card-art{width:96px;height:96px;align-self:center}
 html:not(.display-mode) #player-zone #hand .card{width:112px}
}
@media(max-width:600px){.play-table{--play-height:200px}.play-surface{padding:8px}.played-cards .card{flex-basis:106px;width:106px;min-width:106px}.played-cards .card-art{width:94px;height:94px}}
@media(prefers-reduced-motion:reduce){.play-zone,#opponent-zone #opponent-hand,#opponent-zone .deck-back{transition:none}}

/* A separate title row leaves the entire illustration unobstructed. */
.play-table .card>b,.flying-card.card>b,.purchase-flight.card>b{position:static!important;order:-2;flex-shrink:0;width:100%!important;padding:0!important;line-height:1.25;background:transparent!important;color:#252723!important;text-shadow:none!important;border-radius:0;letter-spacing:0}
.display-mode #opponent-hand .card{gap:3px}
.display-mode #opponent-hand .card-art{width:80px;height:80px;align-self:center}
.discard-pile .deck-back{background:repeating-linear-gradient(45deg,#665743 0 5px,#514432 5px 10px)}
.discard-pile .deck-count{font-size:13px}
.purchase-flight b{display:flex;align-items:center;justify-content:space-between;font-size:14px!important}
.purchase-flight .card-name{font-size:13px}
.purchase-flight .card-cost{font-size:10px}

/* Keep spectators' face-up hands fully visible, including card titles. */
#opponent-zone:not(.resting) #opponent-hand:has(.card){max-height:none;overflow-x:auto}

/* Compact hand cards reserve one summary line; detailed rules stay in the market. */
#player-zone #hand,#opponent-zone #opponent-hand{align-items:flex-start}
#player-zone #hand .card{height:166px;min-height:166px;gap:3px!important}
#player-zone #hand .card>b{height:26px;min-height:26px;flex-shrink:0}
#player-zone #hand .pirate-counter{font-size:16px!important;min-width:23px;height:23px;padding:0 3px;margin-left:3px}
#player-zone #hand .card .card-art{width:96px!important;height:96px!important;aspect-ratio:1;align-self:center!important}
#player-zone #hand .hand-summary{font-size:12px!important;line-height:1.4!important;white-space:nowrap}
#opponent-zone #opponent-hand .card{height:160px;min-height:160px}
html.display-mode #opponent-zone #opponent-hand .card{width:112px!important;min-width:112px!important;flex:0 0 112px;height:166px;min-height:166px;padding:7px;gap:3px!important}
html.display-mode #opponent-zone #opponent-hand .card>b{height:26px;min-height:26px;flex-shrink:0}
html.display-mode #opponent-zone #opponent-hand .card .card-art{width:96px!important;height:96px!important;aspect-ratio:1;align-self:center!important}
html.display-mode #opponent-zone #opponent-hand .pirate-counter{font-size:16px!important;min-width:23px;height:23px;padding:0 3px;margin-left:3px}
html.display-mode #opponent-zone #opponent-hand .hand-summary{font-size:12px!important;line-height:1.4!important;white-space:nowrap}
html:not(.display-mode) #opponent-hand .hand-summary{display:none}

/* Market rows share their size and typography, including the pirate badge row. */
#market{grid-auto-rows:1fr}
#market .card>b{height:42px;min-height:42px;display:flex;align-items:center}
#market .card .market-effect{font-size:13px!important;line-height:1.4!important;letter-spacing:0;white-space:pre-line}

.storm-component{display:none!important}
.card.storm-card{background:linear-gradient(150deg,#c0eaff,#304b75);border-color:#96eaff;box-shadow:0 0 16px #65cfff80}
.card.storm-card .card-art{background-image:url("storm-20260923.png");background-size:cover;background-position:center;position:relative}
.card.storm-card .card-art::after{content:none}
#storm{background:#174f80;border:2px solid #8fe8ff;color:white;font-weight:bold}

.nakamura-component{display:none!important}
.card.nakamura-card{border-color:#e5bb65;box-shadow:0 0 15px #e5bb6560}
.card.nakamura-card .card-name{font-size:13px;letter-spacing:0}
.played-cards .card.nakamura-card>b{flex-direction:column;align-items:center;gap:0}
.played-cards .nakamura-card .card-name{white-space:nowrap;font-size:13px}
.played-cards .nakamura-card .card-cost{font-size:10px;line-height:1.1}
.played-cards .nakamura-card .card-art{height:88px}
.played-cards .nakamura-card .played-effect{white-space:normal;font-size:10px!important;line-height:1.1!important;text-overflow:clip}

/* 手元の画面の相手の手札：表向きのアレクサンドリアを伏せた札と同じ大きさにし、下を切る */
html:not(.display-mode) #opponent-zone #opponent-hand .card.revealed-alexandria{width:112px;min-width:112px;flex:0 0 112px;height:122px;min-height:0;overflow:hidden}