/* The physical playmat layout, rendered with live playable cards. */
body .board{max-width:960px;margin:20px auto;padding:28px 5% 24px;border:3px solid #b39b58;border-radius:26px;background:linear-gradient(color-mix(in srgb,var(--skin-bg) 28%,transparent),color-mix(in srgb,var(--skin-bg) 28%,transparent)),url('assets/playmat-forest.webp') center/100% 100%;box-shadow:inset 0 0 0 3px #102d24,inset 0 0 0 4px #b39b5877,0 20px 60px #0005;color:#f5e9c7;isolation:isolate}
.board .matcross{position:absolute;color:#d7bd79;font:22px Georgia;line-height:1;pointer-events:none;z-index:2}.matcross.tl{top:10px;left:12px}.matcross.tr{top:10px;right:12px}.matcross.bl{bottom:10px;left:12px}.matcross.br{bottom:10px;right:12px}
.playhalf{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:8px 14px;position:relative}.playhalf.rivalhalf{transform:rotate(180deg)}
.board #enemyfield,.board .opponentbase{transform:none}.playhalf .field{grid-column:1;grid-row:1;gap:10px;margin:0}.board .slot{min-width:0;gap:5px}.board .wolf{border:1px solid #c8b16d99;border-radius:6%/4.3%;background:#041e1d66;color:#d2c7a7;aspect-ratio:5/7;height:auto;min-height:0;padding:0}.board .wolf>img{width:100%;height:100%;object-fit:contain}.board .wolf.selected{border-color:#7affd0}
.board .gemrow{position:relative;height:42px;min-height:0;border:1px solid #c8b16d88;border-radius:6px;background:#041e1d77;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0}.board .gemrow:before,.board .gemrow:after{display:none}.emptygemlabel{font-size:9px;letter-spacing:.1em;color:#d6c8a2}.emptygemlabel small{font-size:9px}.gemcardstack{position:absolute;inset:0}.gemcardstack img{position:absolute;top:calc(var(--gem-index)*9px);left:0;width:100%;height:auto;aspect-ratio:5/7;border-radius:6%/4.3%;box-shadow:0 -1px 4px #0009}.gemcardcount{position:absolute;right:3px;bottom:2px;background:#021b19e8;border-radius:5px;padding:2px 5px;color:#fff5ce;font-size:10px}
.reserverail{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:12px;min-width:0;padding-bottom:3px}.discarddock{text-align:center;width:100%;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#e0c987}.discardpile{position:relative;width:44px;aspect-ratio:5/7;border:1px solid #c8b16d77;border-radius:5px;background:#031a1955;margin:5px auto 0;display:grid;place-items:center}.discardpile img{width:100%;height:100%;object-fit:contain;border-radius:5px}.discardpile>span{position:absolute;bottom:3px;right:3px;font-size:12px;background:#071b19dd;border-radius:4px;padding:1px 4px;color:#ffedbf}.board .deckdisplay{width:100%;grid-template-columns:22px 44px;justify-content:center;column-gap:4px}.board .deckdisplay .deckstack{width:44px;height:auto;aspect-ratio:5/7;margin:0}.board .decktitle{font-size:10px;color:#e0c987;text-align:center}.board .decknumber{font-size:19px;color:#fff2d3}.board #dealstatus{font-size:9px;color:#e0c987}
.playhalf .playerbase{display:contents}.playhalf .handdeckrow{grid-column:1;grid-row:2;display:block;min-width:0}.board .handtoggle{width:100%;border:1px solid #c8b16d77;background:#041e1d55;border-radius:9px;padding:5px 8px;color:#e6d9b6;text-align:center}.board .handtoggle>span:first-child,.board .rivalhand>span{font-size:10px;color:#e6d9b6}.board #handfan,.board .rivalhandfan{justify-content:center;height:55px}.board .rivalhand{text-align:center;padding:5px 8px;border:1px solid #c8b16d77;border-radius:9px;background:#041e1d55}.board .handtray{bottom:100%;left:0;right:0;z-index:40}.board .playerscore{grid-row:3;grid-column:1 / -1;margin:0;padding:5px 0 0;border:0;color:#e6d9b6}.board .playerscore>span,.board .playerscore>small{color:#d1c6ac;font-size:9px}.board .playerscore strong{font-size:27px;color:#ffedbd}.board .playerscore strong small{font-size:12px;color:#e5c476}.board .playerlife{height:8px}.board .handselection{grid-row:4;grid-column:1/-1;color:#fff2d3;font-size:11px;margin:0}
.board .matcenter{margin:10px 0;padding:7px 0;grid-template-columns:1fr 78px 1fr;border-color:#bda25d77}.board .matcrest text{fill:#e3cf93}.board .turn #round{background:#041e1d99;border-color:#c8b16d88;color:#f5e9c7}.board .turn #whose{color:#8ff7d6}.board .matend #endturn{font-size:15px;padding:12px 9px}.board .boardlabel{margin:5px 0 8px;min-height:0}.board .boardlabel small{color:#d2c7a7;font-size:10px}.board .fieldbanner{color:#e3cf93;background:#041e1d88;border-color:#bda25d77}.board .rivalheading{margin-bottom:12px}.board .targetvault{min-height:0;padding:10px;font-size:18px}.board #vaulthint{font-size:11px;color:#d2c7a7;margin:6px 0 0}
@media(max-width:700px){body .board{padding:24px 15px 20px;border-radius:20px}.playhalf{grid-template-columns:minmax(0,1fr) 55px;gap:6px 7px}.playhalf .field{gap:5px}.board .gemrow{height:32px}.board .gemcardcount{font-size:8px}.board .emptygemlabel{font-size:7px;letter-spacing:0}.board .matcenter{grid-template-columns:1fr 58px 1fr;margin:7px 0;padding:5px 0}.board .matend #endturn{font-size:12px;padding:10px 5px}.board #round{font-size:9px;padding:7px 2px}.board #whose{font-size:13px}.board .deckdisplay{grid-template-columns:15px 32px;column-gap:2px}.board .deckdisplay .deckstack{width:32px}.board .decknumber{font-size:15px}.board .decktitle,.discarddock{font-size:8px}.discardpile{width:32px}.reserverail{gap:8px}.board #handfan,.board .rivalhandfan{height:42px}.board #handfan img,.board .rivalhandfan img{width:30px;height:42px}.board .handtoggle>span:first-child,.board .rivalhand>span{font-size:8px}.board .playerscore strong{font-size:23px}.board .playerscore>span,.board .playerscore>small{font-size:8px}.board .hp{font-size:8px}.board .taphint{font-size:7px}.board .wolf>span:not(.hp):not(.taphint){font-size:10px}}
.board .deckdisplay{display:grid;padding:0 7px 0 0;align-items:center}.board #dealstatus{display:none}.board .gemrow{box-shadow:none;margin-top:0}.board .matcross{font-size:0;width:12px;height:18px}.board .matcross:before,.board .matcross:after{content:'';position:absolute;background:#d7bd79;border-radius:1px}.board .matcross:before{width:3px;height:18px;left:5px}.board .matcross:after{width:12px;height:3px;top:5px;left:0}
.board .handtray{bottom:100px}.board .handtoggle{min-height:0}.board .rivalhandfan{margin-inline:auto}
@media(max-width:700px){.board .handtray{bottom:82px}.board .handtoggle{padding:5px 4px}}
/* Symmetric reserve row: discard / hand / draw deck, for each player. */
.board .playhalf{grid-template-columns:minmax(0,1fr);gap:10px}
.board .playhalf .field{grid-column:1/-1}
.board .playhalf .handdeckrow{display:grid;grid-template-columns:80px minmax(0,1fr) 80px;align-items:center;gap:12px;grid-column:1/-1;padding:8px 0 3px;border-top:1px solid #bda25d44}
.board .handdock,.board .rivalhand{min-width:0}
.board .discarddock{align-self:center;display:grid;grid-template-rows:auto 62px;gap:5px;font-size:10px;line-height:1.4}
.board .discardpile{height:62px;width:44px;margin:0 auto}
body .board .deckdisplay{display:grid;grid-template-columns:23px 44px;grid-template-rows:14px 62px;gap:5px 4px;padding:0 5px 0 0;align-self:center;justify-content:center}
body .board .deckdisplay .decktitle{grid-column:1/-1;grid-row:1;font-size:10px;color:#e0c987}
body .board .deckdisplay .decknumber{grid-column:1;grid-row:2;font-size:19px;text-align:center;line-height:1;color:#fff2d3}
body .board .deckdisplay .deckstack{width:44px;height:62px;grid-column:2;grid-row:2}
.board .handtoggle,.board .rivalhand{min-height:81px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px 8px}
.board #rivalhandlabel,.board .handtoggle>span:first-child{font-size:11px;color:#e6d9b6;line-height:1.4;margin:0 0 4px}
.board #handfan,.board .rivalhandfan{width:100%;max-width:100%;overflow:hidden;padding:0 8px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}
.board .handtray{bottom:105px}
@media(max-width:700px){
 .board .playhalf{gap:7px}
 .board .playhalf .handdeckrow{grid-template-columns:58px minmax(0,1fr) 58px;gap:5px;padding-top:7px}
 .board .discarddock{font-size:9px;grid-template-rows:13px 45px;gap:4px}
 .board .discardpile{width:32px;height:45px}
 body .board .deckdisplay{grid-template-columns:17px 32px;grid-template-rows:13px 45px;gap:4px 3px;padding-right:4px}
 body .board .deckdisplay .deckstack{width:32px;height:45px}
 body .board .deckdisplay .decktitle{font-size:9px}
 body .board .deckdisplay .decknumber{font-size:15px}
 .board .handtoggle,.board .rivalhand{min-height:62px;padding:4px 3px}
 .board #rivalhandlabel,.board .handtoggle>span:first-child{font-size:9px;margin-bottom:3px}
 .board #handfan,.board .rivalhandfan{padding:0 3px;height:39px}
 .board #handfan img,.board .rivalhandfan img{width:28px;height:39px;margin-right:-10px;flex-shrink:0}
 .board .handtray{bottom:85px}
}
/* Keep eligibility feedback inside the card silhouette. */
.board .wolf{position:relative;overflow:hidden;isolation:isolate}
.board .dropready .wolf{outline:2px dashed #85ecc4;outline-offset:-3px;box-shadow:none}
.board .dropover .wolf{outline:3px solid #fff2ac;outline-offset:-3px;box-shadow:inset 0 0 12px #7ce5b070}
.board .dropblocked .wolf{outline:0;box-shadow:none}
/* Shading exists only during a gem drag, clipped to an incompatible card. */
body.dragging .board .dropblocked .wolf:after{content:'';position:absolute;inset:0;border-radius:inherit;background:#0008;pointer-events:none;z-index:4;transition:none;animation:none}
.dragghost{box-shadow:none;filter:none}
.board .matcross{width:8px;height:12px}.board .matcross:before{width:2px;height:12px;left:3px}.board .matcross:after{width:8px;height:2px;top:4px}
/* A taller hand window, while retaining equal discard/deck columns. */
.board .handtoggle,.board .rivalhand{min-height:108px}
.board #handfan,.board .rivalhandfan{height:80px}
.board #handfan img,.board .rivalhandfan img{height:76px;width:54px;margin-right:-16px;flex-shrink:0}
.board .handtray{bottom:135px}
@media(max-width:700px){.board .handtoggle,.board .rivalhand{min-height:90px}.board #handfan,.board .rivalhandfan{height:65px}.board #handfan img,.board .rivalhandfan img{height:60px;width:43px;margin-right:-20px}.board .handtray{bottom:112px}}
/* The artwork changes palette independently of cards, bars, and text. */
body .board{background:#041915;--mat-filter:none}
/* Separate artwork halves so rival wolves face the player across the mat. */
body .board:before,body .board:after{content:'';position:absolute;left:0;right:0;width:auto;height:50%;z-index:-2;background-image:linear-gradient(180deg,#0002,transparent 45%,#0002),url('assets/playmat-forest.webp');background-size:100% 200%;filter:var(--mat-filter);box-shadow:none;pointer-events:none}
body .board:before{top:50%;bottom:0;background-position:center bottom;border-radius:0 0 23px 23px}
body .board:after{top:0;bottom:auto;background-position:center top;transform:rotate(180deg);border-radius:0 0 23px 23px}
html[data-swap-theme=cream] .board{--mat-filter:sepia(.85) saturate(.7) brightness(1.6)}
html[data-swap-theme=red] .board{--mat-filter:hue-rotate(175deg) saturate(1.45)}
html[data-swap-theme=blue] .board{--mat-filter:hue-rotate(45deg) saturate(1.2)}
html[data-swap-theme=emerald] .board{--mat-filter:hue-rotate(-14deg) saturate(1.5)}
html[data-swap-theme=flare] .board{--mat-filter:hue-rotate(210deg) saturate(1.65) brightness(1.1)}
html[data-swap-theme=diamond] .board{--mat-filter:saturate(.25) hue-rotate(45deg) brightness(1.65)}
html[data-swap-theme=silver] .board{--mat-filter:grayscale(1) brightness(1.3)}
html[data-swap-theme=gold] .board{--mat-filter:sepia(1) saturate(1.7) brightness(1.2)}
html[data-swap-theme=obsidian] .board{--mat-filter:hue-rotate(105deg) saturate(1.1)}
/* Compact mat: only the player's visible hand gets extra height. */
.board .rivalhand{min-height:81px}.board .rivalhandfan{height:55px}.board .rivalhandfan img{height:50px;width:36px;margin-right:-11px}
.board .handtoggle{min-height:94px}.board #handfan{height:66px}.board #handfan img{height:64px;width:46px;margin-right:-13px}
@media(max-width:700px){
 body .board{padding:15px 12px 12px;margin:10px auto}
 .board .playhalf{gap:4px}
 .board .gemrow{height:25px}
 .board .playhalf .handdeckrow{padding:4px 0 1px}
 .board .rivalhand{min-height:60px;padding:3px}
 .board .rivalhandfan{height:39px}
 .board .rivalhandfan img{height:39px;width:28px;margin-right:-10px}
 .board .handtoggle{min-height:74px;padding:3px}
 .board #handfan{height:53px}
 .board #handfan img{height:50px;width:36px;margin-right:-15px}
 .board .matcenter{grid-template-columns:1fr 48px 1fr;margin:4px 0;padding:0;gap:5px}
 .board .matcenter .turn b{margin:3px 0;font-size:12px}
 .board .boardlabel{margin:3px 0 5px;min-height:0}
 .board .rivalheading{margin-bottom:5px}
 .board #vaultzone{padding:0;width:100%}
 body .board #direct.targetvault{min-height:34px;padding:7px;font-size:14px}
 .board #vaultzone small{font-size:8px;line-height:1.25;margin:3px 0 0}
 body .board .playerbase .playerscore{margin:0;padding:0}
 body .board .playerbase .playerscore>strong{font-size:22px;line-height:1.1;margin:0}
 body .board .playerbase .playerscore .playerlife{height:6px;margin-top:4px}
 body .board .playerbase .playerscore>small{margin-top:2px;font-size:7px;line-height:1.2}
 .board .handtray{bottom:95px}
}