#opponent-zone{display:block;margin-bottom:12px}
#opponent-title{font-size:20px;color:#f5d693}
#opponent-hand{display:flex;gap:8px;overflow:auto}
#opponent-hand .card{width:100px;flex:0 0 100px;min-height:0;padding:5px}
#opponent-hand .card b{font-size:15px}
#opponent-hand .card-art{width:100%;height:auto;aspect-ratio:1;order:0}
.display-mode #opponent-zone{display:block;margin:0 0 4px 120px;max-width:1120px}
.display-mode #opponent-title{margin:0 0 5px!important;font-size:21px;line-height:28px;color:#f5d693}
.display-mode #opponent-hand{display:flex;gap:8px;min-height:122px;max-width:1100px;overflow:auto;pointer-events:auto}
.display-mode #opponent-hand .card{width:112px;flex:0 0 112px;min-height:0;padding:5px;position:relative}
.display-mode #opponent-hand .card-art{width:100%;height:100px;order:0}
.display-mode header,.display-mode main>p.muted,.display-mode #players,.display-mode #save-status{display:none!important}
.display-mode #market .card,.display-mode #hand .card{position:relative;padding:7px;gap:3px!important}
.display-mode #market .card-art{width:100%!important;height:auto!important;aspect-ratio:1;align-self:stretch!important;order:0}
.display-mode #market .card b,.display-mode #hand .card b,.display-mode #opponent-hand .card b{position:absolute;top:7px;left:7px;width:calc(100% - 14px);z-index:1;background:rgba(20,25,28,.82);color:#fff8de;padding:3px 2px;font-family:system-ui,sans-serif;font-size:20px;line-height:1.25;letter-spacing:0;text-shadow:0 1px 2px #000;border-radius:3px}
.display-mode #market .card em{display:none}
.display-mode #market .card span{font-size:13px;line-height:1.4}
.display-mode #hand .card-art{width:100%!important;height:auto!important;aspect-ratio:1;order:0}
.display-mode #hand .card b,.display-mode #opponent-hand .card b{font-size:15px}
.display-mode #opponent-hand .card b{top:5px;left:5px;width:calc(100% - 10px)}

.display-mode #match-record{display:block;width:100%;max-width:100%;margin-top:14px;padding:10px 12px;background:#192e40;border:1px solid #526b80;border-radius:9px}
.display-mode #match-record h2{font-size:18px!important;margin:0 0 8px!important;color:#f5d693}
.display-mode #log{height:auto;max-height:290px;overflow:hidden;font-size:17px;line-height:1.5;color:#e8eef2}
.display-mode #log>div{padding:6px 0;border-top:1px solid #ffffff24;overflow-wrap:anywhere}
.display-mode #log>div:first-child{border-top:0;color:#fff0bc;font-weight:700}
.display-mode #log>div{display:none}
.display-mode #log>div.log-recent{display:block}
html.display-mode .layout{grid-template-columns:minmax(0,1fr) 300px!important}
.display-mode .layout>section{min-width:0}
.display-mode #rules-guide{position:static;width:auto;margin:10px 0 0;padding:14px;font-size:19px;line-height:1.5}
.display-mode #rules-guide h2{font-size:23px!important;line-height:1.4}
.display-mode #rules-guide p{margin:12px 0}
.display-mode #hand-help{margin-left:120px;font-size:16px;line-height:1.3}
.display-mode #hand{max-width:none;max-height:none;overflow:visible;flex-wrap:wrap;pointer-events:auto}
.display-mode #hand .card{width:120px!important;min-width:120px!important;flex:0 0 120px}
#rules-guide{font-size:17px}
#rules-guide h2{font-size:21px}
html.display-mode main{max-width:1320px!important}
html.display-mode .layout{grid-template-columns:minmax(0,1fr) 280px!important}
.display-mode #rules-guide{padding:12px;font-size:18px;line-height:1.45}
.display-mode #rules-guide h2{font-size:22px!important}
.display-mode #rules-guide p{margin:9px 0}

html.display-mode #status{display:block!important;font-size:18px;line-height:1.45;margin:10px 0!important;padding:10px!important}
.display-mode .layout>section>h2{margin-left:120px!important}

#hand .card b,#opponent-hand .card b{display:flex;align-items:center;justify-content:space-between;gap:3px;letter-spacing:0}
#hand .card b .card-name,#opponent-hand .card b .card-name{font-size:14px;white-space:nowrap}
#hand .card b .card-cost,#opponent-hand .card b .card-cost{font-family:system-ui,sans-serif;font-size:11px;white-space:nowrap;font-weight:700;letter-spacing:0}


/* Both players' draw piles stay beside their own hands. */
.hand-row{display:flex;align-items:flex-start;gap:16px;min-width:0}
.hand-row>#hand,.hand-row>#opponent-hand{flex:1;min-width:0;margin-left:0!important}
.deck-pile{flex:0 0 82px;text-align:center;padding:7px 4px 0;color:#f5d693}
.deck-back{height:94px;width:66px;margin:0 auto 12px;position:relative;border:3px solid #dfc68e;border-radius:7px;background:repeating-linear-gradient(45deg,#27465e 0 5px,#20394e 5px 10px);box-shadow:3px 3px 0 #112737,4px 4px 0 #c9b989,7px 7px 0 #112737,8px 8px 0 #c9b989;display:grid;place-items:center}
.deck-back:before{content:"";position:absolute;inset:5px;border:1px solid #c9b989;border-radius:3px}
.deck-back span{font-size:32px;color:#f5d693;line-height:1}
.deck-count{display:block;white-space:nowrap;font-size:16px;font-weight:700}
.deck-pile.empty .deck-back{box-shadow:none;opacity:.3}
.display-mode #opponent-zone{margin-left:0}
.display-mode #opponent-title,.display-mode .layout>section>#hand-title{margin-left:98px!important}
.display-mode #hand-help{margin-left:98px}

.hidden-hand-card{flex:0 0 112px;width:112px;height:122px;border:4px solid #d9c697;border-radius:8px;background:repeating-linear-gradient(45deg,#27465e 0 6px,#20394e 6px 12px);display:grid;place-items:center;position:relative;color:#f5d693}
.hidden-hand-card:before{content:"";position:absolute;inset:6px;border:1px solid #c9b989;border-radius:3px}
.hidden-hand-card span{font-size:36px}
#hand .hidden-hand-card{width:120px;flex-basis:120px;height:160px}

#opponent-hand .played-label{flex:0 0 auto;align-self:center;font-size:14px;color:#f5d693;border-left:1px solid #7893a7;padding-left:10px;white-space:nowrap}

/* Market art fills the card width at 1:1; name row and effect keep their own lines. */
.display-mode #market .card b{position:static!important;background:none!important;color:#252723!important;padding:0!important;text-shadow:none!important;font-size:19px!important;line-height:1.3;justify-content:center;gap:6px}
.display-mode #market .card b .card-name{font-size:19px}
.display-mode #market .card b .card-cost{font-size:16px;color:#252723;opacity:.92;text-shadow:none}

/* Large market art with name and price/stock sharing one title row. */
html:not(.display-mode) #market .card b{display:flex;align-items:center;justify-content:space-between;gap:6px}
html:not(.display-mode) #market .card-art{width:100%;height:auto;aspect-ratio:1;align-self:stretch}
html:not(.display-mode) #market .card b .card-name{display:block;font-size:24px;line-height:1.3;letter-spacing:0;white-space:nowrap;flex-shrink:0}
html:not(.display-mode) #market .card b .card-cost{display:block;font-size:14px;line-height:1.4;letter-spacing:0;text-align:right}
/* Choosing an effect must not push the board or trigger scroll anchoring. */
html{overflow-anchor:none}