/* UI chrome leaves the board and its original card actions untouched. */
.game-side-tab{top:46%;z-index:146;min-height:96px;width:30px;padding:10px 6px;writing-mode:vertical-rl;letter-spacing:.03em;font-size:.72rem;background:#322047f5;border-color:#ad91cd99;box-shadow:0 4px 18px #0006;touch-action:manipulation}
.game-side-tab[aria-expanded="true"]{background:#654185;color:#fff;border-color:#e8c881}
.game-workspace>main{padding-left:max(36px,3vw);padding-right:max(36px,3vw)}
.playcard-cell{position:relative;min-width:44px;min-height:44px;width:100%;height:100%;border-radius:8px}
.playcard-cell>.playcard{width:100%;height:100%;min-width:0;min-height:0}
.card-magnify{position:absolute;right:0;bottom:0;min-height:32px;min-width:32px;padding:3px;border-radius:8px 0 8px 0;background:#170f28ed;border:1px solid #eddaffaa;color:#fff;font-size:1rem;line-height:1;z-index:1;touch-action:manipulation}
.card-magnify:hover{background:#51366e}.card-magnify:focus-visible{outline-offset:-3px}
.card-magnifier{border:1px solid #ad91cd99;border-radius:18px;padding:0;background:#171024;color:#fff;width:min(94vw,1024px);height:min(92dvh,980px);max-width:none;max-height:none;overflow:hidden;box-shadow:0 20px 80px #000b}
.card-magnifier::backdrop{background:#090512c9;backdrop-filter:blur(3px)}
.card-magnifier>section{height:100%;display:flex;flex-direction:column;min-height:0}
.card-magnifier header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#251c35;flex:none}
.card-magnifier h2{font-size:1rem;margin:0;overflow-wrap:anywhere}.card-magnifier header button{min-height:44px;font-size:.85rem;padding:8px 12px}
.card-magnifier-image{flex:1;min-height:0;display:grid;place-items:center;padding:12px;overflow:auto;overscroll-behavior:contain}
.card-magnifier-image img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
@media(max-width:1399px){.game-side-tab{width:28px;min-height:100px;font-size:.7rem}}
@media(max-height:500px){.game-side-tab{top:36%;min-height:88px}.card-magnifier{height:96dvh}.card-magnifier header{padding:4px 10px}.card-magnifier-image{padding:4px}}

/* Four duel metrics get their own row on phones so the deck title stays readable. */
@media(max-width:640px){.hud:has(.metrics>.metric:nth-child(4)){flex-wrap:wrap;gap:8px}.hud:has(.metrics>.metric:nth-child(4))>div:first-child{flex-basis:100%}.hud:has(.metrics>.metric:nth-child(4))>.metrics{width:100%;justify-content:space-between;gap:12px}}

/* Active seat uses the shared HUD; no second turn owner. */
.local-turn-note{margin:.45rem 0 0;font-size:.9rem;color:var(--gold,#f2d68f);font-weight:600}

/* Account display names may contain long words; keep all four shared HUD values visible. */
.hud>div,.hud .metrics,.hud .metric{min-width:0}
.hud .metric span{display:block;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
.result h1,.result .score+p,.online-room p{overflow-wrap:anywhere}
#online-room-list button{max-width:100%;overflow-wrap:anywhere}