@property --switch-elapsed {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@font-face { font-family: 'Sora'; src: url('../../assets/fonts/Sora/Sora-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../../assets/fonts/Sora/Sora-Light.ttf') format('truetype'); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../../assets/fonts/Sora/Sora-Medium.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../../assets/fonts/Sora/Sora-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../../assets/fonts/Sora/Sora-ExtraBold.ttf') format('truetype'); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: 'Mamokai Inter'; src: url('../../assets/fonts/Inter/Inter_18pt-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mamokai Inter'; src: url('../../assets/fonts/Inter/Inter_24pt-Medium.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Mamokai Inter'; src: url('../../assets/fonts/Inter/Inter_28pt-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --font-primary: 'Sora', sans-serif;
  --font-secondary: 'Mamokai Inter', sans-serif;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #08111f;
  color: #edf4ff;
  --space-1: .4rem;
  --space-2: .7rem;
  --space-3: 1rem;
  --line: #2b4561;
  --blue: #16a9df;
  --gold: #f4d62f;
  --purple: #69158c;
  --purple-dark: #081653;
  --board-player2-debug: rgb(220 35 55 / 48%);
  --board-player1-debug: rgb(25 135 245 / 48%);
  --board-seam-debug: #8427b2;
  --board-divider-debug: #f7df35;
  --player-ui-reserved-space: 160px;
  --motion-fast: .18s ease;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 50% 48%, #172b43, #08111f 72%); }
body.main-menu-open { overflow: hidden; }
.menu-background-video { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; filter: blur(0) scale(1); transition: opacity .35s ease, filter .35s ease, visibility .35s; pointer-events: none; }
body.auth-screen-open .menu-background-video, body.main-menu-open .menu-background-video { opacity: .82; visibility: visible; }
body.auth-screen-open .menu-background-video { filter: blur(10px) scale(1.08); }
.auth-screen { position: fixed; z-index: 13000; inset: 0; display: grid; place-items: stretch; padding: 0; overflow: auto; isolation: isolate; background: transparent; color: #fff; }
.auth-screen::before { position: absolute; z-index: 1; inset: 0; content: ''; background: rgb(2 7 18 / 12%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; }
.auth-screen[hidden] { display: none; }
.auth-card { position: relative; z-index: 2; width: 100%; min-height: 100%; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 0; padding: clamp(1.5rem, 5vh, 3.5rem) 1rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.auth-screen__brand { width: clamp(20.8rem, 54.6vw, 728px); max-width: calc(100vw - 2rem); display: grid; justify-items: center; gap: .65rem; margin: clamp(1.5rem, 6vh, 5rem) auto 0; transform: translateY(100px); }
.auth-screen__logo { display: block; width: 100%; height: auto; object-fit: contain; }
.auth-screen__logo, .main-menu__logo { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.auth-screen__tagline { width: 100%; margin: 0; color: #b8cedd; font-family: var(--font-primary); font-size: .78rem; font-weight: 300; white-space: nowrap; }
.auth-screen__tagline-accessible { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.auth-screen__tagline-tracking { width: 100%; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0; }
.auth-screen__tagline-space { flex: 0 0 .8em; }
.auth-content { width: min(100%, 360px); align-self: center; display: grid; gap: .75rem; transform: translateY(120px); }
.auth-card h1 { margin: 0; font-size: clamp(1.9rem, 7vw, 2.8rem); }
.auth-intro, .auth-message { margin: 0; color: #b8cedd; }
.auth-form { display: grid; gap: .65rem; }
.auth-form[hidden] { display: none; }
.auth-form label { display: grid; gap: .35rem; color: #c9dce8; font-size: .8rem; font-weight: 800; }
.auth-form input { width: 100%; padding: .7rem .8rem; border: 1px solid #3b6d88; border-radius: .55rem; background: #030c16; color: #fff; font: inherit; }
.auth-form input:focus { outline: 2px solid #55d6ff; outline-offset: 1px; }
.auth-form button, #logout-button { padding: .7rem .85rem; border: 1px solid #55d6ff; border-radius: .55rem; background: #0b5477; color: #fff; font-weight: 900; cursor: pointer; }
#login-form > button[type="submit"] { border-color: #f5d17a; background: linear-gradient(135deg, #9d5d12, #e7ad37 48%, #b87318); color: #1b1004; box-shadow: inset 0 1px rgb(255 243 196 / 48%), 0 0 18px rgb(224 160 44 / 20%); }
#login-form > button[type="submit"]:hover:not(:disabled) { background: linear-gradient(135deg, #b87318, #f4c85a 48%, #ce8a24); }
#login-form > button[type="submit"] { margin-top: 20px; }
#login-form > small { display: block; margin-top: .25rem; text-align: center; text-wrap: balance; }
.auth-form button:disabled { opacity: .55; cursor: wait; }
.auth-form .auth-link { padding: .3rem; border: 0; background: transparent; color: #7fe4ff; }
.auth-form small { color: #829eb1; line-height: 1.4; }
.auth-message { min-height: 1.4em; color: #ffd27a; font-size: .85rem; }
.login-transition { position: fixed; z-index: 14000; inset: 0; display: grid; place-items: center; background: rgb(2 7 18 / 14%); backdrop-filter: blur(10px); opacity: 1; transition: opacity .42s ease, backdrop-filter .42s ease; }
.login-transition[hidden] { display: none; }
.login-transition.is-leaving { opacity: 0; backdrop-filter: blur(0); }
.login-transition__content { display: grid; justify-items: center; gap: .9rem; }
.login-transition__emblem { position: relative; width: clamp(10rem, 24vw, 14rem); aspect-ratio: 1; display: grid; place-items: center; }
.login-transition__logo, .login-transition__spinner { position: absolute; inset: 0; width: 100%; height: 100%; margin: auto; object-fit: contain; }
.login-transition__logo { width: 72%; height: 72%; filter: drop-shadow(0 0 18px rgb(226 168 55 / 42%)); }
.login-transition__spinner { inset: 10%; width: 80%; height: 80%; background: transparent; mix-blend-mode: screen; animation: login-transition-spin 1.15s linear infinite; }
.login-transition__label { color: #f4fbff; font-family: var(--font-primary); font-size: .9rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 2px 12px #000; }
@keyframes login-transition-spin { to { transform: rotate(360deg); } }
.main-menu { position: fixed; z-index: 12000; inset: 0; display: grid; place-items: stretch; padding: 0; overflow: hidden; background: transparent; color: #fff; user-select: none; }
.main-menu { transition: filter .42s ease; }
.main-menu.is-login-blurred { filter: blur(9px); }
.main-menu.is-login-pending .main-menu__panel { animation: none; opacity: 0; transform: translateY(24px) scale(.94); filter: blur(5px); }
.main-menu::before { position: absolute; inset: -20%; content: ''; background: repeating-linear-gradient(125deg, transparent 0 34px, rgb(75 205 255 / 3%) 35px 36px), radial-gradient(circle at 50% 45%, rgb(34 211 238 / 12%), transparent 38%); animation: main-menu-ambient 12s ease-in-out infinite alternate; pointer-events: none; }
.main-menu::after { position: absolute; inset: 0; content: ''; border: 1px solid rgb(105 222 255 / 16%); box-shadow: inset 0 0 120px #000b; pointer-events: none; }
.main-menu__panel { position: relative; z-index: 1; width: 100%; height: 100%; max-height: none; display: grid; align-content: center; justify-items: center; gap: .8rem; padding: clamp(1.5rem, 5vh, 4rem) clamp(1rem, 5vw, 5rem); overflow: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: main-menu-panel-in .55s cubic-bezier(.2,.8,.25,1) both; }
.main-menu__eyebrow { margin: 0; color: #65dcff; font-size: .72rem; font-weight: 950; letter-spacing: .3em; }
.main-menu h1 { margin: -.15rem 0 0; color: #fff; font-size: clamp(2.8rem, 8vw, 5.2rem); font-style: italic; font-weight: 1000; letter-spacing: -.06em; line-height: .95; text-shadow: 0 4px 0 #020914, 0 0 24px rgb(54 211 255 / 32%); }
.main-menu h1 span { color: #ffc928; text-shadow: 0 4px 0 #493000, 0 0 22px rgb(255 201 40 / 30%); }
.main-menu__subtitle { margin: 0 0 .8rem; color: #b8cedd; font-size: .92rem; }
.main-menu__options { width: min(100%, 530px); display: grid; gap: .8rem; }
.main-menu-option { width: 100%; min-height: 88px; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid #3d7796; border-radius: .9rem; background: linear-gradient(115deg, #102d45, #081522); color: #fff; text-align: left; box-shadow: 0 12px 28px #0008, inset 0 0 22px rgb(80 211 255 / 4%); transition: transform .22s ease, border-color .22s ease, filter .22s ease, box-shadow .22s ease; }
.main-menu-option--solo { cursor: pointer; }
.main-menu-option--solo:hover { border-color: #8de8ff; transform: translateY(-3px) scale(1.015); box-shadow: 0 16px 34px #000a, 0 0 20px rgb(57 210 255 / 24%); }
.main-menu-option--solo:active { transform: translateY(0) scale(.995); }
.main-menu-option__icon { width: 50px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #78ddf8; border-radius: 50%; background: #082338; color: #73e4ff; font-size: 1.45rem; box-shadow: inset 0 0 15px #38cfff24, 0 0 12px #38cfff22; }
.main-menu-option__copy { min-width: 0; display: grid; gap: .25rem; }
.main-menu-option__copy strong { font-size: 1.12rem; font-weight: 950; text-transform: uppercase; letter-spacing: .04em; }
.main-menu-option__copy small { color: #a9c0d0; font-size: .76rem; line-height: 1.35; }
.main-menu-option__arrow { color: #73e4ff; font-size: 2.2rem; line-height: 1; }
.main-menu-option--local { border-color: #66518c; cursor: pointer; }
.main-menu-option--local:hover { border-color: #c0a2fa; transform: translateY(-3px) scale(1.015); box-shadow: 0 16px 34px #000a, 0 0 20px rgb(192 132 252 / 20%); }
.main-menu-option--local .main-menu-option__icon { border-color: #a88bdd; color: #d0b8ff; box-shadow: 0 0 12px #a855f733; }
.main-menu-option--library { border-color: #397a65; cursor: pointer; text-decoration: none; }
.main-menu-option--library:hover { border-color: #6ee7b7; transform: translateY(-3px) scale(1.015); box-shadow: 0 16px 34px #000a, 0 0 20px rgb(110 231 183 / 20%); }
.main-menu-option--library .main-menu-option__icon { border-color: #63d6af; color: #8cf0cd; box-shadow: 0 0 12px #34d39933; }
.main-menu-option__status { padding: .35rem .55rem; border: 1px solid #806aa7; border-radius: 999px; color: #cbb7ed; font-size: .58rem; font-weight: 950; letter-spacing: .08em; }
.main-menu__build { margin: .8rem 0 0; color: #57758a; font-size: .58rem; font-weight: 850; letter-spacing: .18em; }
.account-toggle { border: 0; background: transparent; color: #8fe7ff; font-weight: 800; cursor: pointer; }
.account-toggle { width: min(92vw, 530px); min-height: 94px; display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: .85rem; padding: .7rem 1rem; border: 1px solid #3d7796; border-radius: .9rem; background: linear-gradient(115deg, #102d45, #081522); text-align: left; box-shadow: 0 10px 26px #0007, inset 0 0 22px #38bdf80a; }
.account-toggle:hover, .account-toggle:focus-visible { border-color: #8de8ff; box-shadow: 0 0 20px #38bdf833; outline: none; }
.account-toggle canvas { width: 60px; height: 72px; object-fit: contain; }
.account-toggle__identity { display: grid; gap: .25rem; }
.account-toggle__identity strong { color: #fff; font-size: 1rem; }
.account-toggle__identity small, .account-toggle__hint { color: #9db9ca; font-size: .72rem; }
.profile-actions { position: fixed; z-index: 12002; inset: 0; display: grid; place-items: center; padding: 1.25rem; background: #020712b8; backdrop-filter: blur(7px); }
.profile-actions[hidden] { display: none; }
.profile-actions__panel { position: relative; width: min(100%, 380px); display: grid; gap: .75rem; padding: 2rem; border: 1px solid #4b8cac; border-radius: 1rem; background: linear-gradient(145deg, #0b2033, #040b15); box-shadow: 0 24px 70px #000c; }
.profile-actions__panel h2 { margin: 0 0 .25rem; text-align: center; }
.profile-actions__panel > button:not(.account-panel__close) { min-height: 46px; border: 1px solid #55d6ff; border-radius: .55rem; background: #0b5477; color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.profile-actions__panel > #profile-actions-logout { border-color: #885666; background: #391927; }
.account-panel { position: fixed; z-index: 12001; inset: 0; width: 100vw; height: 100dvh; max-height: none; display: grid; align-content: center; justify-items: center; gap: .65rem; padding: clamp(2rem, 6vh, 5rem) max(1.5rem, calc((100vw - 760px) / 2)); overflow: auto; border: 0; border-radius: 0; background: linear-gradient(145deg, rgb(7 20 37 / 88%), rgb(2 7 18 / 92%)); box-shadow: none; transform: none; text-align: center; }
.account-panel > label { width: min(100%, 650px); display: grid; gap: .35rem; margin: .35rem 0; color: #b8cedd; font-size: .78rem; text-align: left; }
.account-panel input, .account-panel select, #profile-save, #profile-edit-hacedor { width: min(100%, 650px); padding: .65rem; border: 1px solid #3b6d88; border-radius: .5rem; background: #030c16; color: #fff; font: inherit; }
#profile-save, #profile-edit-hacedor { margin: .25rem 0; background: #0b5477; cursor: pointer; }
.profile-identity-preview { width: min(100%, 650px); display: grid; justify-items: center; gap: .25rem; margin: .35rem 0; padding: .65rem; border: 1px solid #35556b; border-radius: .7rem; background: #040d18; }
.profile-identity-preview p, .profile-identity-preview h3 { margin: 0; }
.profile-identity-preview canvas { width: 92px; height: 110px; object-fit: contain; }
.account-panel[hidden] { display: none; }
.account-panel h2 { margin: 0 0 .7rem; }
.account-panel__close { position: absolute; top: .45rem; right: .65rem; border: 0; background: transparent; color: #b8cedd; font-size: 1.5rem; cursor: pointer; }
.lan-lobby, .preflight-panel { position: relative; width: min(100%, 530px); display: grid; justify-items: center; gap: .8rem; padding: 1.2rem; border: 1px solid #7256a4; border-radius: 1rem; background: #070f1ddd; box-shadow: inset 0 0 28px #8b5cf611; }
.lan-lobby__back { position: absolute; top: .7rem; left: .8rem; padding: .3rem; border: 0; background: transparent; color: #9fc5da; cursor: pointer; }
.lan-lobby h2, .preflight-panel h2 { margin: .25rem 0 0; color: #fff; font-size: 1.35rem; text-transform: uppercase; }
.lan-lobby > p, .preflight-panel > p { margin: 0; color: #aec4d3; font-size: .8rem; text-align: center; }
.lan-lobby__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: .65rem; }
.lan-lobby__actions button { min-height: 42px; border: 1px solid #73dfff; border-radius: .55rem; background: linear-gradient(#139bc1, #086486); color: #fff; font-weight: 900; cursor: pointer; }
.lan-lobby__actions > span { align-self: center; color: #607b8d; }
.lan-lobby__actions label { display: grid; gap: .3rem; color: #8faabc; font-size: .65rem; font-weight: 800; }
.lan-lobby__actions input { width: 110px; padding: .65rem .7rem; border: 1px solid #526c80; border-radius: .5rem; background: #040b15; color: #fff; font: 900 1rem/1 monospace; letter-spacing: .16em; text-transform: uppercase; outline: none; }
.lan-lobby__actions input:focus { border-color: #68dcff; box-shadow: 0 0 12px #38bdf844; }
.lan-room-created { width: 100%; display: grid; justify-items: center; gap: .45rem; }
.lan-room-created > span { color: #829daf; font-size: .65rem; font-weight: 900; letter-spacing: .16em; }
.lan-room-created > strong { color: #ffd45a; font: 1000 2.8rem/1 monospace; letter-spacing: .18em; text-shadow: 0 0 18px #ffc92866; }
.lan-room-created p, .lan-room-created small { margin: 0; color: #9bb4c5; font-size: .72rem; }
.lan-room-created a { max-width: 100%; overflow: hidden; color: #6fddff; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.lan-room-created button, .preflight-actions button, .lan-available-rooms button { min-height: 38px; padding: .55rem .8rem; border: 1px solid #73dfff; border-radius: .55rem; background: #0b6887; color: #fff; font-weight: 850; cursor: pointer; }
.preflight-players { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.preflight-player, .lan-player-card { display: grid; gap: .45rem; padding: .85rem; border: 1px solid #35556b; border-radius: .7rem; background: #061522; }
.preflight-player h3, .lan-player-card h3 { margin: 0; color: #8ee9ff; text-transform: uppercase; }
.preflight-player label, .lan-deck-picker { display: grid; gap: .35rem; color: #8faabc; font-size: .7rem; font-weight: 800; }
.preflight-player select, .lan-deck-picker select { width: 100%; padding: .65rem; border: 1px solid #526c80; border-radius: .5rem; background: #040b15; color: #fff; }
.deck-selection-status { min-height: 2.6em; margin: 0; color: #9fb8c8; font-size: .7rem; line-height: 1.4; }
.deck-selection-status.is-valid { color: #73efbd; }
.deck-selection-status.is-invalid { color: #ff9ba8; }
.preflight-actions { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .6rem; }
.preflight-actions a { margin-right: auto; color: #6fddff; font-size: .75rem; }
.preflight-actions button:disabled, .lan-lobby button:disabled { opacity: .48; cursor: not-allowed; }
.lan-available-rooms { grid-column: 1 / -1; width: 100%; display: grid; gap: .45rem; }
.lan-available-rooms button { display: flex; justify-content: space-between; }
.lan-waiting-room { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.lan-player-card p { margin: 0; color: #9fb8c8; font-size: .72rem; }
.lan-player-card__avatar { width: 56px; height: 68px; justify-self: center; object-fit: contain; }
.lan-player-card .is-ready { color: #73efbd; font-weight: 900; }
.lan-player-card .is-offline { color: #ff9ba8; }
.lan-deck-picker, .lan-waiting-room .preflight-actions { grid-column: 1 / -1; }
.lan-lobby__error { min-height: 1.2em; color: #ff8492 !important; }
@media (max-width: 650px) { .lan-lobby__actions, .preflight-players, .lan-waiting-room { grid-template-columns: 1fr; } .lan-lobby__actions > span { display: none; } .lan-lobby__actions input { width: 100%; } .lan-deck-picker, .lan-waiting-room .preflight-actions { grid-column: 1; } }
.main-menu.is-closing { animation: main-menu-fade-out .42s ease-in both; pointer-events: none; }
.main-menu.is-closing .main-menu__panel { animation: main-menu-panel-out .42s cubic-bezier(.5,0,.85,.3) both; }
.lan-connection-status { position: fixed; z-index: 10050; top: .55rem; left: 50%; padding: .35rem .75rem; border: 1px solid #42d59a88; border-radius: 999px; background: #061a18e8; color: #73efbd; font-size: .62rem; font-weight: 900; letter-spacing: .06em; box-shadow: 0 4px 14px #0008; transform: translateX(-50%); pointer-events: none; }
.lan-connection-status.is-offline { border-color: #ff647a88; background: #260910e8; color: #ff8c9d; }
.lan-victory-overlay { position: fixed; z-index: 13000; inset: 0; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at center, rgb(15 47 67 / 88%), rgb(2 7 15 / 97%) 70%); backdrop-filter: blur(12px); animation: lan-victory-backdrop-in .35s ease-out both; }
.lan-victory-panel { width: min(92vw, 510px); display: grid; justify-items: center; gap: .7rem; padding: 2.5rem 2rem; border: 1px solid #73e4ff99; border-radius: 1.35rem; background: linear-gradient(145deg, #0d2c42f5, #06101df9); box-shadow: 0 30px 90px #000e, inset 0 0 45px #38d8ff12, 0 0 30px #38d8ff22; color: #fff; text-align: center; animation: lan-victory-panel-in .5s cubic-bezier(.18,.8,.25,1) both; }
.lan-victory-panel__symbol { width: 82px; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid #ffe38a; border-radius: 50%; background: radial-gradient(circle, #ffda43, #c77d00); color: #172234; font-size: 2.8rem; box-shadow: 0 0 25px #ffc92866; }
.lan-victory-panel p { margin: .35rem 0 0; color: #69dcff; font-size: .68rem; font-weight: 950; letter-spacing: .22em; }
.lan-victory-panel h2 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.8rem); text-transform: uppercase; text-shadow: 0 3px 0 #000; }
.lan-victory-panel > strong { color: #ffd75a; font-size: 1.35rem; text-shadow: 0 0 14px #ffc92855; }
.lan-victory-panel small { color: #b8cedb; }
.lan-victory-panel button { margin-top: .7rem; padding: .8rem 1.35rem; border: 1px solid #8cecff; border-radius: .65rem; background: linear-gradient(#16b8dd, #087596); color: #fff; font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: 0 7px 18px #0008; }
@keyframes lan-victory-backdrop-in { from { opacity: 0; } }
@keyframes lan-victory-panel-in { from { opacity: 0; transform: translateY(22px) scale(.9); } to { opacity: 1; transform: none; } }
.match-result-overlay { position: fixed; z-index: 13100; inset: 0; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at 50% 42%, rgb(11 49 69 / 90%), rgb(1 5 12 / 98%) 72%); backdrop-filter: blur(14px); animation: lan-victory-backdrop-in .4s ease-out both; }
.pause-overlay { position: fixed; z-index: 12900; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 50% 44%, rgb(12 43 65 / 68%), rgb(1 6 14 / 88%) 76%); backdrop-filter: blur(10px); animation: pause-backdrop-in .2s ease-out both; user-select: none; }
.pause-panel { position: relative; width: min(92vw, 480px); min-height: 460px; display: grid; place-items: center; padding: clamp(2rem, 5vw, 3rem); overflow: hidden; border: 1px solid rgb(102 218 255 / 50%); border-radius: 1.25rem; background: linear-gradient(155deg, rgb(10 32 51 / 97%), rgb(3 11 23 / 99%)); box-shadow: 0 32px 90px #000d, inset 0 0 48px rgb(52 204 255 / 7%), 0 0 26px rgb(41 192 255 / 12%); animation: pause-panel-in .26s cubic-bezier(.2,.8,.25,1) both; }
.pause-panel::before { position: absolute; inset: 0; content: ''; background: linear-gradient(120deg, transparent 20%, rgb(94 219 255 / 5%) 50%, transparent 80%); pointer-events: none; }
.pause-panel__view { position: relative; z-index: 1; width: min(100%, 350px); display: grid; justify-items: center; gap: .8rem; }
.pause-panel__eyebrow { margin: 0; color: #66dfff; font-size: .64rem; font-weight: 950; letter-spacing: .3em; }
.pause-panel h2 { margin: -.1rem 0 .25rem; color: #fff; font-size: clamp(2.5rem, 8vw, 4rem); font-style: italic; font-weight: 1000; letter-spacing: -.045em; line-height: 1; text-transform: uppercase; text-shadow: 0 4px 0 #020914, 0 0 22px rgb(78 216 255 / 30%); }
.pause-panel__notice { display: flex; align-items: center; gap: .45rem; margin: 0 0 .45rem; color: #9eb8ca; font-size: .72rem; }
.pause-panel__notice span { color: #6df5a8; font-size: .5rem; text-shadow: 0 0 9px #43f98d; }
.pause-panel__actions { width: 100%; display: grid; gap: .65rem; }
.pause-action { min-height: 52px; border: 1px solid #315a75; border-radius: .65rem; background: linear-gradient(110deg, #102a40, #081725); color: #dcecf5; font-family: inherit; font-size: .88rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease; }
.pause-action:hover { border-color: #7ee5ff; box-shadow: 0 0 18px rgb(72 211 255 / 18%); filter: brightness(1.14); transform: translateY(-2px); }
.pause-action--primary { border-color: #36bfea; background: linear-gradient(110deg, #087da3, #07516f); color: #fff; box-shadow: inset 0 0 18px #8deaff1e, 0 0 16px #17bfe92b; }
.pause-action--danger { margin-top: .2rem; border-color: #843849; background: linear-gradient(110deg, #4b1724, #260c15); color: #ffbdc8; }
.pause-action--danger:hover { border-color: #ff7088; box-shadow: 0 0 18px rgb(255 68 101 / 20%); }
.pause-panel__view > small { color: #607d91; font-size: .64rem; }
.pause-back { justify-self: start; padding: .4rem .1rem; border: 0; background: transparent; color: #a8c7d9; font-family: inherit; font-size: .75rem; font-weight: 750; cursor: pointer; }
.pause-back:hover { color: #fff; }
.pause-audio-settings { width: 100%; display: grid; gap: 1rem; margin-top: .45rem; }
.pause-audio-settings label { display: grid; gap: .6rem; padding: .8rem .9rem; border: 1px solid #1f455e; border-radius: .65rem; background: rgb(8 25 39 / 72%); }
.pause-audio-settings label > span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: #d9e9f2; font-size: .76rem; }
.pause-audio-settings output { color: #65ddff; font: 850 .72rem ui-monospace, monospace; }
.pause-audio-settings input[type="range"] { width: 100%; accent-color: #35c9f5; cursor: pointer; }
@keyframes pause-backdrop-in { from { opacity: 0; } }
@keyframes pause-panel-in { from { opacity: 0; transform: translateY(16px) scale(.95); filter: blur(4px); } }
.match-result-panel { width: min(92vw, 620px); display: grid; justify-items: center; gap: .75rem; padding: 2.4rem; border: 1px solid #78e7ff88; border-radius: 1.4rem; background: linear-gradient(145deg, #0c2a40f8, #050d18fc); box-shadow: 0 32px 100px #000f, inset 0 0 55px #43dcff12, 0 0 35px #3edcff26; color: #fff; text-align: center; animation: lan-victory-panel-in .55s cubic-bezier(.18,.8,.25,1) both; }
.match-result-panel.is-defeat { border-color: #ff5e6677; background: linear-gradient(145deg, #351018f8, #10060afc); box-shadow: 0 32px 100px #000f, inset 0 0 55px #ff394614, 0 0 35px #ff394626; }
.match-result-panel__symbol { width: 88px; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid #ffe38a; border-radius: 50%; background: radial-gradient(circle, #ffdd4d, #c77d00); color: #162235; font-size: 2.9rem; box-shadow: 0 0 30px #ffd43d66; }
.match-result-panel.is-defeat .match-result-panel__symbol { border-color: #ff9b9f; background: radial-gradient(circle, #ff5962, #86101a); color: #fff; box-shadow: 0 0 30px #ff364866; }
.match-result-panel > p { margin: .2rem 0 0; color: #74e4ff; font-size: .7rem; font-weight: 950; letter-spacing: .24em; }
.match-result-panel h2 { margin: 0; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: .95; text-transform: uppercase; font-style: italic; text-shadow: 0 4px 0 #000, 0 0 25px #4de4ff55; }
.match-result-panel.is-defeat h2 { color: #ff7279; text-shadow: 0 4px 0 #000, 0 0 25px #ff394655; }
.match-result-panel > strong { color: #ffd75a; font-size: 1.15rem; }
.match-result-stats { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .7rem; }
.match-result-stats article { display: grid; gap: .25rem; padding: 1rem .8rem; border: 1px solid #6bdff53d; border-radius: .8rem; background: #051321b8; }
.match-result-stats span { color: #afcbd8; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.match-result-stats strong { color: #fff; font-size: 1.9rem; text-shadow: 0 0 14px #51ddff77; }
.match-result-panel button { margin-top: .65rem; padding: .85rem 1.5rem; border: 1px solid #8cecff; border-radius: .7rem; background: linear-gradient(#16b8dd, #087596); color: #fff; font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: 0 7px 18px #0008; }
@media (max-width: 560px) { .match-result-stats { grid-template-columns: 1fr; } .match-result-panel { padding: 1.6rem 1.1rem; } }
@keyframes main-menu-panel-in { from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes main-menu-panel-out { to { opacity: 0; transform: translateY(-18px) scale(.92); filter: blur(5px); } }
@keyframes main-menu-fade-out { to { opacity: 0; } }
@keyframes main-menu-ambient { from { transform: translate3d(-1%, -1%, 0) scale(1); } to { transform: translate3d(1%, 1%, 0) scale(1.04); } }
body::after { position: fixed; z-index: 55; inset: 0; content: ''; background: rgb(3 10 20 / 0%); opacity: 0; backdrop-filter: blur(0); pointer-events: none; transition: opacity .48s ease, background .48s ease, backdrop-filter .48s ease; }
body.round-transition-active::after { background: rgb(2 7 15 / 52%); opacity: 1; backdrop-filter: blur(7px); }
button, select { font: inherit; }
button { cursor: pointer; color: inherit; border: 1px solid #416284; background: #142a43; border-radius: .55rem; padding: .6rem .8rem; }
button:hover:not(:disabled) { border-color: #6ac7ff; }
button:disabled { opacity: .45; cursor: default; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; font-size: 1.35rem; }
h2 { margin: 0; font-size: .8rem; }
.topbar { position: relative; z-index: 2; min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: .6rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); background: #08111fe8; }
.topbar { display: none !important; }
.topbar > div:first-child { display: flex; align-items: center; gap: .7rem; }
.eyebrow { margin: 0; color: #6ac7ff; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.controls, .summary { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.controls label { color: #b7c8da; font-size: .8rem; }
select { margin-left: .25rem; padding: .45rem; border-radius: .45rem; background: #0e2035; color: white; border: 1px solid #416284; }
.controls button { padding: .45rem .7rem; font-size: .78rem; }
.game-shell { position: relative; width: min(1680px, 100%); height: calc(100dvh - 62px); min-height: 620px; margin: 0 auto; padding: .25rem clamp(.6rem, 2vw, 2rem) .65rem; display: grid; grid-template-rows: 25px minmax(120px, .35fr) minmax(300px, 1fr) minmax(185px, .45fr); gap: .25rem; }
.game-shell, .round-phase-indicator { user-select: none; -webkit-user-select: none; }
.game-background { position: fixed; z-index: 0; inset: 0; background-color: #000; background-image: linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 20%)), var(--game-background-image, none); background-size: auto, cover; background-position: center center; background-repeat: no-repeat; pointer-events: none; }
.game-background::before, .game-background::after { position: absolute; z-index: 1; right: 0; left: 0; height: clamp(150px, 23vh, 260px); content: ''; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); pointer-events: none; }
.game-background::before { top: 0; right: 0; left: auto; width: clamp(280px, 28vw, 520px); height: clamp(230px, 28vh, 320px); background: linear-gradient(180deg, rgb(4 10 20 / 20%), transparent); mask-image: radial-gradient(ellipse at top right, #000 15%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse at top right, #000 15%, transparent 100%); }
.game-background::after { bottom: 0; background: linear-gradient(0deg, rgb(4 10 20 / 24%), transparent); mask-image: linear-gradient(0deg, #000 0%, transparent 100%); -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 100%); }
.game-shell > :not(.board-panel) { position: relative; z-index: 1; }
.game-shell > .game-background { position: fixed; z-index: 0; }
.game-shell > .summary { position: fixed; z-index: 34; top: 48px; left: 48px; width: max-content; min-height: 0; display: grid; align-items: start; justify-items: start; gap: 3px; padding: 0; color: #f5f8ff; pointer-events: none; }
.game-shell > .summary.is-round-transitioning { z-index: 60; }
.match-round { color: #fff !important; font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.025em; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; white-space: nowrap; }
.match-round b { color: inherit; font: inherit; }
.match-round.is-changing { animation: match-round-glow .85s cubic-bezier(.2,.75,.25,1) both; }
.match-duration { color: #f2f6fb; font-size: clamp(.72rem, .9vw, .86rem); font-weight: 650; font-style: italic; text-shadow: 0 2px 4px #000; white-space: nowrap; }
.match-duration b { color: #ffb51b; font-size: 1rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000, 0 0 7px #ff8a0038; }
.phase-timer { margin-left: auto; padding: .15rem .55rem; border: 1px solid #35536f; border-radius: 999px; background: #0b1c2d; color: #b9cee1; font-variant-numeric: tabular-nums; }
.phase-timer b { display: inline-block; min-width: 1.4em; color: #7ddcff; text-align: center; }
.phase-timer--urgent { border-color: #ff5c70; background: #3a0b16; color: #ffc1c9; animation: phase-timer-pulse .75s ease-in-out infinite alternate; }
.phase-timer--urgent b { color: #ff6175; }
.round-phase-indicator { position: fixed; z-index: 26; top: 50%; left: 43px; width: 150px; height: 530px; color: #dbe8f6; transform: translateY(-50%); pointer-events: none; }
.round-phase-indicator::before { position: absolute; z-index: -1; top: calc(265px - 50vh); bottom: calc(265px - 50vh); left: -43px; width: clamp(160px, 12vw, 250px); content: ''; background: linear-gradient(90deg, rgb(0 0 0 / 76%), rgb(0 0 0 / 42%) 48%, transparent); pointer-events: none; }
.round-phase-line { position: absolute; top: 9px; bottom: 9px; left: 10px; width: 2px; border-radius: 999px; background: linear-gradient(#59636c, #d7e0e6 50%, #59636c); box-shadow: 0 0 5px #ffffff44; }
.round-phase-node { position: absolute; left: 0; display: flex; align-items: center; gap: 11px; transform: translateY(-50%); }
.round-phase-node--placement { top: 0; transform: none; }
.round-phase-node--combat { top: 50%; }
.round-phase-node--action { top: 100%; transform: translateY(-100%); }
.round-phase-node i { box-sizing: border-box; position: relative; z-index: 2; width: 15px; height: 15px; flex: 0 0 15px; margin-left: 3px; border: 2px solid #718495; border-radius: 50%; background: #142332; box-shadow: 0 0 0 transparent; transition: border-color .28s ease, background .28s ease, box-shadow .28s ease, transform .28s ease; }
.round-phase-node b { opacity: 0; color: #fff; font-size: calc(.9rem - 2px); font-weight: 850; text-shadow: 0 2px 5px #000; white-space: nowrap; transform: translateX(-5px); transition: opacity .38s ease, color .28s ease, text-shadow .28s ease, transform .38s ease; }
.round-phase-node.is-complete i { border-color: #eaf7ff; background: #bac8d1; box-shadow: 0 0 6px #ffffff99; transform: scale(.72); }
.round-phase-node.is-complete b { color: #fff; }
.round-phase-node.is-active i { border-color: #fff; background: #fff; box-shadow: 0 0 7px #fff, 0 0 17px #ffffffdd, 0 0 29px #dcefffaa; transform: scale(1.45); }
.round-phase-node.is-active b { opacity: 1; color: #fff; text-shadow: 0 0 7px #fff, 0 2px 5px #000; transform: translateX(3px); }
.round-phase-node--combat.is-active i { border-color: #fff5cc; background: #ffb20d; box-shadow: 0 0 8px #fff, 0 0 20px #ffb000, 0 0 38px #ff7a00dd; transform: scale(1.6); }
.round-phase-node--combat.is-active b { text-shadow: 0 0 8px #ffb000, 0 2px 5px #000; }
.round-phase-converge { position: absolute; z-index: 3; left: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff, 0 0 14px #ffffffdd, 0 0 24px #e5f2ffaa; opacity: 0; }
.round-phase-converge--top { top: 5px; }
.round-phase-converge--bottom { bottom: 5px; }
.round-phase-indicator.is-entering-combat .round-phase-converge--top { animation: round-phase-converge-top .62s cubic-bezier(.2,.75,.25,1) both; }
.round-phase-indicator.is-entering-combat .round-phase-converge--bottom { animation: round-phase-converge-bottom .62s cubic-bezier(.2,.75,.25,1) both; }
.round-phase-indicator.is-entering-combat .round-phase-node--placement i { animation: round-phase-source-flash .58s ease-out both; }
.round-phase-indicator.is-entering-combat .round-phase-node--action i { animation: round-phase-action-collapse .58s ease-out both; }
.round-phase-indicator.is-entering-combat .round-phase-node--combat i { animation: round-phase-combat-focus .72s .28s cubic-bezier(.2,.8,.25,1) both; }
.game-shell > .player-zone { position: relative; z-index: auto; display: grid; min-height: 0; justify-items: center; }
.player2-zone { grid-template-rows: minmax(0, 1fr) auto; }
.player1-zone { grid-template-rows: auto minmax(0, 1fr); }
.player2-zone { grid-row: 2; }
.player1-zone { grid-row: 4; }
.hand-panel { position: relative; z-index: 20; width: min(760px, 78%); height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 .8rem; border: 0; background: transparent; transition: opacity var(--motion-fast); }
.player1-hand-panel { --team-color: #06b6ef; --team-dark: #075a95; }
.player2-hand-panel { --team-color: #e11d35; --team-dark: #760a22; }
.opponent-overtime { position: fixed; z-index: 9001; top: 76px; left: 50%; min-width: 112px; display: grid; justify-items: center; gap: .08rem; padding: .45rem .8rem .55rem; border: 1px solid #ffdc6f; border-radius: .75rem; background: radial-gradient(circle at 50% 30%, #4c2532f2, #130711f7 74%); color: #fff; box-shadow: 0 9px 24px #000b, 0 0 20px #ffb80055, inset 0 0 18px #ffdc6f16; transform: translateX(-50%); pointer-events: none; }
.opponent-overtime small { color: #ffd86a; font-size: .52rem; font-weight: 950; letter-spacing: .12em; white-space: nowrap; }
.opponent-overtime strong { font-size: 2.35rem; line-height: 1; text-shadow: 0 0 7px #fff, 0 0 18px #ffb800, 0 3px 3px #000; }
.opponent-overtime strong.is-ticking { animation: turn-switch-countdown-tick .42s ease-out; }
body.controlled-player2-view .player1-hand-panel { --team-color: #e11d35; --team-dark: #760a22; }
body.controlled-player2-view .player2-hand-panel { --team-color: #06b6ef; --team-dark: #075a95; }
.player2-hand-panel .hand-card { --fan-perspective: 450px; flex-basis: clamp(82px, calc(6.5vw + 10px), 110px); width: clamp(82px, calc(6.5vw + 10px), 110px); margin-inline: -15px; pointer-events: none; cursor: default; }
.hand-panel.active-hand { outline: 1px solid transparent; }
.section-heading { display: none; }
.hand { flex: 1 1 auto; min-height: 0; display: flex; visibility: visible; align-items: center; justify-content: center; overflow: visible; padding: .2rem 1rem .5rem; perspective: 1200px; transform-style: preserve-3d; }
.player2-zone .hand { isolation: isolate; perspective: none; transform: translateY(-5px); transform-style: flat; }
.player1-zone .hand { transform: translateY(28px); }
.hand-card { position: relative; z-index: calc(var(--hand-order, 0) + 1); flex: 0 1 clamp(82px, 7.5vw, 112px); width: clamp(82px, 7.5vw, 112px); height: auto; aspect-ratio: 750 / 1050; min-height: 0; margin-inline: var(--hand-card-margin, clamp(-20px, -1.3vw, -10px)); display: flex; flex-direction: column; justify-content: center; gap: .35rem; padding: .55rem; border-radius: .65rem; text-align: left; box-shadow: 0 8px 20px #0008; translate: 0 0; transform: perspective(var(--fan-perspective, 1600px)) rotateY(var(--fan-yaw, 0deg)) rotate(var(--fan-angle, 0deg)) skewX(var(--fan-skew, 0deg)) translateY(var(--fan-y, 0)); transition: translate var(--motion-fast) var(--hover-shift-delay, 0ms), transform var(--motion-fast), filter var(--motion-fast); }
.hand-card:hover:not(:disabled) { z-index: 1000; transform: translateY(-10px) scale(1.04); }
.hand-card:disabled { opacity: 1; cursor: default; }
.hand-card.phase-unavailable:not(.dragging) { filter: grayscale(1) brightness(.62); transform: rotateY(var(--fan-yaw, 0deg)) rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 34px)); }
.hand-card.movement-unavailable:not(.phase-unavailable):not(.dragging) { filter: grayscale(1) brightness(.62); }
.hand-card:nth-child(1) { --fan-angle: -16deg; --fan-y: 9px; }
.hand-card:nth-child(2) { --fan-angle: -9deg; --fan-y: 4px; }
.hand-card:nth-child(3) { --fan-angle: -3deg; --fan-y: 0; }
.hand-card:nth-child(4) { --fan-angle: 5deg; --fan-y: 0; }
.hand-card:nth-child(5) { --fan-angle: 11deg; --fan-y: 4px; }
.hand-card:nth-child(6) { --fan-angle: 16deg; --fan-y: 9px; }
.hand-card:nth-child(1) { --fan-yaw: -4deg; }
.hand-card:nth-child(2) { --fan-yaw: -2deg; }
.hand-card:nth-child(3) { --fan-yaw: -1deg; }
.hand-card:nth-child(4) { --fan-yaw: 1deg; }
.hand-card:nth-child(5) { --fan-yaw: 2deg; }
.hand-card:nth-child(6) { --fan-yaw: 4deg; }
.hand-card { cursor: grab; touch-action: none; user-select: none; }
.hand-card:active { cursor: grabbing; }
.hand-card.dragging { position: absolute; z-index: 1000; opacity: 1; transform: rotateY(var(--fan-yaw, 0deg)) rotate(var(--fan-angle, 0deg)) translateY(var(--fan-y, 0px)) scale(1.2); }
.hand-card.dragging.drag-home-placeholder { position: relative; }
.hand-card.selected { z-index: 1000; outline: 2px solid #6ac7ff; box-shadow: 0 0 0 4px #6ac7ff30, 0 12px 28px #000b; transform: translateY(-12px) scale(1.04); }
.hand-card span { color: #c1d0df; font-size: clamp(.58rem, .7vw, .72rem); line-height: 1.25; }
.hand-card small { color: #6ac7ff; font-size: .58rem; font-weight: 800; letter-spacing: .1em; }
.hand-card strong { font-size: clamp(.7rem, .85vw, .85rem); line-height: 1.15; }
.hand-card.weapon { border-color: #a97835; background: linear-gradient(145deg, #39291a, #142a43); }
.hand-card.weapon small, .equipped-weapon { color: #ffc66d; }
.hand-card.spell { border-color: #7868c7; background: linear-gradient(145deg, #282044, #142a43); }
.hand-card.spell small { color: #c4b5fd; }
.hand-panel .hand-card:not(.hidden-hand-card) { border-color: var(--team-color); box-shadow: inset 0 0 0 1px var(--team-color), 0 8px 20px #0008; }
.hand-card.character { display: block; overflow: visible; padding: 0; border: 2px solid #08090b; border-radius: .55rem; background: #08090b; color: #fff; isolation: isolate; }
.hand-card img { pointer-events: none; user-select: none; -webkit-user-drag: none; }
.hand-panel .hand-card.character { border-color: #08090b; }
.hand-character__artwork { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; background: linear-gradient(145deg, #183b46, #091620); }
.hand-character__artwork::after { position: absolute; inset: 48% 0 0; content: ''; background: linear-gradient(to top, #020611f2, #020611a8 44%, transparent); }
.hand-character__artwork img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hand-card.character > .rarity-badge { top: 0; right: auto; bottom: auto; left: 0; width: 28%; height: 20%; display: grid; place-items: start; padding: .16rem 0 0 .28rem; border: 0; border-radius: .48rem 0 0; background: linear-gradient(135deg, #0088c9 0 49%, #08090b 50%); clip-path: polygon(0 0, 100% 0, 0 100%); color: #fff !important; font-size: .72rem !important; box-shadow: none; }
.hand-card.character > .rarity-badge.rarity-common { background: linear-gradient(135deg, #64748b 0 49%, #08090b 50%); }
.hand-card.character > .rarity-badge.rarity-singular { background: linear-gradient(135deg, #16a34a 0 49%, #08090b 50%); }
.hand-card.character > .rarity-badge.rarity-rare { background: linear-gradient(135deg, #0088c9 0 49%, #08090b 50%); }
.hand-card.character > .rarity-badge.rarity-epic { background: linear-gradient(135deg, #9333ea 0 49%, #08090b 50%); }
.hand-card.character > .rarity-badge.rarity-guardian { background: linear-gradient(135deg, #ea580c 0 49%, #08090b 50%); }
.hand-card.character > .rarity-badge.rarity-deity { background: linear-gradient(135deg, #ca8a04 0 49%, #08090b 50%); }
.hand-character__name { position: absolute; right: .12rem; bottom: .25rem; left: .12rem; z-index: 2; overflow: hidden; color: #fff !important; font-size: .58rem !important; font-weight: 850; text-align: center; text-overflow: ellipsis; text-shadow: 0 1px 3px #000, 0 0 5px #000; white-space: nowrap; }
.hand-character__cost { position: absolute; z-index: 4; top: -.55rem; left: 50%; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border: 1px solid #111; border-radius: 50%; background: #b800e8; color: #fff; box-shadow: 0 2px 7px #000a; font-size: .76rem !important; font-weight: 900; line-height: 1; transform: translateX(-50%); }
.hidden-hand-card { align-items: center; border: 1px solid var(--team-color); background: linear-gradient(145deg, var(--team-color), var(--team-dark)); color: white; box-shadow: inset 0 0 0 4px #0003, 0 8px 20px #0008; user-select: none; }
.hidden-hand-card .hidden-card-emblem { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid #ffb1b7; border-radius: 50%; color: #fff; font-size: 1.15rem; font-weight: 950; }
.hidden-hand-card strong { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.rarity-badge { position: absolute; z-index: 5; top: .35rem; right: .35rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid currentColor; border-radius: 50%; background: #07101dd9; font-size: .68rem !important; font-weight: 950 !important; line-height: 1; box-shadow: 0 0 10px currentColor; }
.rarity-common { color: #cbd5e1 !important; }
.rarity-singular { color: #4ade80 !important; }
.rarity-rare { color: #60a5fa !important; }
.rarity-epic { color: #c084fc !important; }
.rarity-guardian { color: #fb923c !important; }
.rarity-deity { color: #facc15 !important; }
.hand-card.draw-enter { animation: draw-card-enter .72s cubic-bezier(.2, .8, .2, 1) both; }
.hand-card.initial-deal-enter { animation: initial-card-deal .62s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--deal-index) * 90ms); }
.hand-card.phase-unavailable.draw-enter { animation-name: draw-card-enter-unavailable; animation-duration: .9s; animation-timing-function: cubic-bezier(.22,.61,.3,1); }
.hand-card.phase-unavailable.initial-deal-enter { animation-name: initial-card-deal-unavailable; animation-duration: .95s; animation-timing-function: cubic-bezier(.22,.61,.3,1); }
.hand-card.movement-unavailable:not(.phase-unavailable).draw-enter { animation-name: draw-card-enter-muted; }
.hand-card.movement-unavailable:not(.phase-unavailable).initial-deal-enter { animation-name: initial-card-deal-muted; }
.player1-zone { --hud-edge: #67d9ff; --hud-start: #009cdb; --hud-center: #09afe9; --hud-text: #062e4b; --hud-shadow: #009cdb35; }
.player2-zone { --hud-edge: #ff6175; --hud-start: #b20f2e; --hud-center: #e11d35; --hud-text: #3b0711; --hud-shadow: #e11d353d; }
body.controlled-player2-view .player1-zone { --hud-edge: #ff6175; --hud-start: #b20f2e; --hud-center: #e11d35; --hud-text: #3b0711; --hud-shadow: #e11d353d; }
body.controlled-player2-view .player2-zone { --hud-edge: #67d9ff; --hud-start: #009cdb; --hud-center: #09afe9; --hud-text: #062e4b; --hud-shadow: #009cdb35; }
.player-info { z-index: 2; position: relative; width: min(680px, 68%); min-height: 38px; display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 1.5vw, 1.4rem); padding: .4rem 1rem; border: 1px solid var(--hud-edge); border-radius: .12rem; background: linear-gradient(90deg, var(--hud-start), var(--hud-center) 48%, var(--hud-start)); color: var(--hud-text); font-size: clamp(.68rem, .9vw, .86rem); font-weight: 700; box-shadow: 0 4px 18px var(--hud-shadow); }
.player-info strong { color: #fff; font-size: .95rem; text-shadow: 0 1px 3px #005577; }
.hacedor-shield { display: inline-flex; align-items: center; gap: .15rem; padding: .12rem .35rem; border: 1px solid #bcecff88; border-radius: 999px; background: #dff7ff22; color: #e8faff; font-variant-numeric: tabular-nums; }
.hacedor-shield > b { font-size: .8rem; }
.hacedor-shield .hacedor-shield-charge { color: #fff; font-size: inherit; text-shadow: 0 0 6px #6ee7ff; }
.hacedor-shield .hacedor-shield-uses { color: #fff; font-size: inherit; }
.hacedor-shield--disabled { border-color: #80909a66; background: #27323a55; color: #9aa8b1; filter: grayscale(1); opacity: .7; }
.player-info.hacedor-hit:not(.hacedor-hud) { animation: hacedor-panel-hit .8s ease-out; }
.player-info.hacedor-hud.hacedor-hit { animation: player1-hud-damage-shake .55s ease-out; }
.player-info.hacedor-shield-block { animation: hacedor-shield-block .8s ease-out; }
.hacedor-damage-zone { position: absolute; z-index: 16; top: -1.3rem; left: 50%; min-width: 10rem; padding: .24rem .9rem; border: 1px solid #ff5a5a; border-radius: 999px; background: #dc3030; color: white !important; font-size: .78rem; font-weight: 900; text-align: center; pointer-events: none; animation: hacedor-damage-zone .8s ease-out both; }
.hacedor-shield-block-zone { border-color: #83e9ff; background: #087da8; box-shadow: 0 0 18px #53dcff99; }
.player-info.hacedor-hud { position: fixed; z-index: 40; width: 250px; min-height: 0; display: grid; justify-items: start; gap: 5px; padding: 0; border: 0; background: transparent; color: white; box-shadow: none; pointer-events: none; }
.player-info.hacedor-hud.player1-hud { isolation: isolate; }
.game-shell > .hacedor-hud-avatar { position: fixed; z-index: 35; width: 232px; height: 279px; object-fit: contain; opacity: .92; filter: drop-shadow(0 0 16px #00a9ff55); pointer-events: none; mask-image: url('../../assets/hacedores/mask_avatar2.png'); mask-mode: luminance; mask-size: 100% 100%; mask-repeat: no-repeat; }
.game-shell > .hacedor-hud-avatar--player1 { left: -62px; bottom: -16px; }
.game-shell > .hacedor-hud-avatar--player2 { top: -46px; right: -62px; scale: -1 1; }
body.controlled-player2-view .game-shell > .hacedor-hud-avatar--player1 { top: -46px; right: -62px; bottom: auto; left: auto; scale: -1 1; }
body.controlled-player2-view .game-shell > .hacedor-hud-avatar--player2 { top: auto; right: auto; bottom: -16px; left: -62px; scale: 1 1; }
.game-shell > .hacedor-hud-avatar:not(.is-entering) { animation: hacedor-avatar-float 5.2s ease-in-out infinite; }
.game-shell > .hacedor-hud-avatar.is-entering { animation: hacedor-avatar-rise .9s cubic-bezier(.2,.75,.25,1) both; }
.game-shell > .hacedor-hud-avatar.is-taking-damage { animation: hacedor-avatar-damage-stagger .68s cubic-bezier(.25,.75,.3,1) both; }
body.game-interface-awaiting :is(.game-shell > .hacedor-hud-avatar, .player-info.hacedor-hud, .round-phase-indicator, .active-hand-controls, .game-shell > .summary) { visibility: hidden; opacity: 0; }
body.game-interface-entering .game-shell > .hacedor-hud-avatar { visibility: visible; animation: game-hacedor-from-left .78s cubic-bezier(.16,.82,.24,1) both; }
body.game-interface-entering .game-shell > .hacedor-hud-avatar--player2 { animation-name: game-hacedor-from-right; }
body.controlled-player2-view.game-interface-entering .game-shell > .hacedor-hud-avatar--player1 { animation-name: game-hacedor-from-right; }
body.controlled-player2-view.game-interface-entering .game-shell > .hacedor-hud-avatar--player2 { animation-name: game-hacedor-from-left; }
body.game-interface-entering .player-info.hacedor-hud { visibility: visible; animation: game-hud-from-bottom .72s .38s cubic-bezier(.18,.78,.25,1) both; }
body.game-interface-entering .player-info.player2-hud { animation-name: game-hud-from-top; }
body.game-interface-entering .player-info.hacedor-hud .player1-hud__hp-fill { transform-origin: left center; animation: game-health-charge .75s 1.05s cubic-bezier(.16,.82,.24,1) both; }
body.game-interface-entering .player-info.player2-hud .player1-hud__hp-fill { transform-origin: right center; }
body.game-interface-entering .player-info.hacedor-hud .hacedor-shield-token { animation: game-shield-token-zoom .48s cubic-bezier(.16,.84,.24,1) both; }
body.game-interface-entering .player-info.player1-hud .hacedor-shield-token:nth-child(1),
body.game-interface-entering .player-info.player2-hud .hacedor-shield-token:nth-child(3) { animation-delay: 1.05s; }
body.game-interface-entering .player-info.player1-hud .hacedor-shield-token:nth-child(2),
body.game-interface-entering .player-info.player2-hud .hacedor-shield-token:nth-child(2) { animation-delay: 1.18s; }
body.game-interface-entering .player-info.player1-hud .hacedor-shield-token:nth-child(3),
body.game-interface-entering .player-info.player2-hud .hacedor-shield-token:nth-child(1) { animation-delay: 1.31s; }
body.game-interface-entering .round-phase-indicator { visibility: visible; animation: game-phase-indicator-from-left .7s .72s cubic-bezier(.18,.78,.25,1) both; }
body.game-interface-entering .active-hand-controls { visibility: visible; animation: game-controls-from-right .7s .72s cubic-bezier(.18,.78,.25,1) both; }
body.game-interface-entering .game-shell > .summary { visibility: visible; animation: game-summary-from-left .7s .72s cubic-bezier(.18,.78,.25,1) both; }
body.initial-cards-concealed .hand { visibility: hidden; }
@keyframes hacedor-avatar-rise { from { clip-path: inset(100% 0 0); opacity: 0; transform: translateY(22px); } to { clip-path: inset(0); opacity: .92; transform: translateY(0); } }
@keyframes hacedor-avatar-float { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3px) rotate(.2deg); } 50% { transform: translateY(-5px) rotate(0); } 75% { transform: translateY(-2px) rotate(-.2deg); } }
@keyframes hacedor-avatar-damage-stagger { 0%, 100% { transform: translateY(0); } 15% { transform: translateY(-13px); } 31% { transform: translateY(11px); } 47% { transform: translateY(-9px); } 63% { transform: translateY(7px); } 79% { transform: translateY(-4px); } 91% { transform: translateY(2px); } }
@keyframes game-hacedor-from-left { from { opacity: 0; transform: translateX(-180px); } to { opacity: .92; transform: translateX(0); } }
@keyframes game-hacedor-from-right { from { opacity: 0; transform: translateX(-180px); } to { opacity: .92; transform: translateX(0); } }
@keyframes game-hud-from-bottom { from { opacity: 0; transform: translateY(95px); } to { opacity: 1; transform: translateY(0); } }
@keyframes game-hud-from-top { from { opacity: 0; transform: translateY(-95px); } to { opacity: 1; transform: translateY(0); } }
@keyframes game-health-charge { from { transform: scaleX(0); filter: brightness(1.5); } to { transform: scaleX(1); filter: brightness(1); } }
@keyframes game-shield-token-zoom { from { opacity: 0; scale: .15; filter: brightness(1.9); } 68% { opacity: 1; scale: 1.24; } to { opacity: 1; scale: 1; filter: brightness(1); } }
@keyframes game-phase-indicator-from-left { from { opacity: 0; transform: translate(-130px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes game-controls-from-right { from { opacity: 0; translate: 150px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes game-summary-from-left { from { opacity: 0; translate: -150px 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .game-shell > .hacedor-hud-avatar.is-entering { animation: none; } }
.player-info.player1-hud { left: 132px; bottom: 28px; }
.player-info.player2-hud { top: 72px; right: 134px; justify-items: end; text-align: right; }
.player1-hud__name { color: #f5f8ff !important; font-size: 1rem !important; font-weight: 500 !important; text-shadow: 0 2px 5px #000 !important; }
.player2-hud .player1-hud__name { width: 232px; text-align: right; }
.player1-hud__hp { position: relative; z-index: 2; isolation: isolate; width: 232px; height: 47px; display: flex; align-items: center; overflow: hidden; border: 4px solid #263743; background: #25070ca8; box-shadow: 0 5px 14px #0009; transform: skewX(-12deg); transform-origin: center; }
.player-info.hacedor-hud.hacedor-hit .player1-hud__hp { animation: hacedor-hp-bar-glow .8s ease-out both; }
.player1-hud__hp-fill { position: absolute; z-index: 0; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffd400, #ff8a00); box-shadow: inset 0 0 8px #fff0a088, 0 0 7px #ffad0066; transition: width .35s ease, background .35s ease, box-shadow .35s ease; }
.player1-hud__hp-fill.is-damaged { background: linear-gradient(90deg, #ff8a00, #ed1c24); box-shadow: inset 0 0 8px #ffc07888, 0 0 7px #ff4d0066; }
.player1-hud__hp-fill.is-low-health { background: linear-gradient(90deg, #b80010, #ff182a); box-shadow: inset 0 0 8px #ff8e9888, 0 0 8px #ff101077; }
.player2-hud .player1-hud__hp-fill { inset: 0 0 0 auto; }
.player1-hud__hp-loss { position: absolute; z-index: 1; inset-block: 0; background: linear-gradient(90deg, #fff, #eefcff); box-shadow: inset 0 0 7px #bcefff, 0 0 5px #fff8; pointer-events: none; }
.player1-hud__hp-loss.is-collapsing { transition: width 1s ease-in-out, left 1s ease-in-out; }
.player1-hud__hp .hacedor-current-hp { position: relative; z-index: 2; padding-left: 10px; color: white; font-size: 2.05rem; line-height: 1; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; }
.player2-hud .player1-hud__hp { justify-content: flex-end; }
.player2-hud .player1-hud__hp .hacedor-current-hp { padding-right: 10px; padding-left: 0; }
.player1-hud__shield-charge { position: relative; z-index: 2; width: 232px; height: 9px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; transform: translateX(-5px) skewX(-12deg); transform-origin: center; }
.player2-hud .player1-hud__shield-charge { direction: rtl; transform: translateX(-5px) skewX(-12deg); }
.player1-hud__shield-charge.is-disabling { pointer-events: none; animation: hacedor-shield-charge-fade .55s ease-out both; }
.player1-hud__shield-charge.is-disabled { visibility: hidden; opacity: 0; pointer-events: none; }
.player1-hud__shield-charge > .hacedor-shield-charge { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hacedor-shield-cell { border: 1px solid #18758a; background: #082f3d; }
.hacedor-shield-cell.is-charged { border-color: #b8f7ff; background: #00d9ff; box-shadow: 0 0 5px #00d9ff, 0 0 10px #00aee6; }
.player1-hud__shield-tokens { min-height: 24px; display: flex; align-items: center; gap: 7px; }
.player1-hud .player1-hud__shield-tokens { transform: translateX(-5px); }
.player2-hud .player1-hud__shield-tokens { width: 232px; justify-content: flex-end; transform: translateX(-10px); }
.hacedor-shield-token { width: 24px; height: 26px; display: block; background: url("../../assets/ui/hacedor-shield.webp") center / 312% 312% no-repeat; filter: drop-shadow(0 0 5px #00bfe8); pointer-events: none; }
.hacedor-shield-token.is-vfx-hidden { visibility: hidden; }
.player1-hud__resources { display: none; }
.hacedor-hud > .hacedor-shield-uses { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hacedor-hud-delta { position: absolute; z-index: 30; font-size: 1.45rem; font-weight: 900; line-height: 1; white-space: nowrap; transform: translateY(-50%); pointer-events: none; animation: hacedor-hud-delta-pop .8s ease-out both; }
.player2-hud .hacedor-hud-delta { animation-name: hacedor-hud-delta-pop-reversed; }
.hacedor-hud-delta--damage { color: #ff252f; font-size: 1.8rem; text-shadow: 0 0 5px #ff1515, 0 0 11px #ff151599; }
.hacedor-hud-delta--shield { color: #67ecff; font-size: 1.15rem; text-shadow: 0 0 5px #00d9ff, 0 0 11px #00aee6aa; }
.board-panel { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; min-height: 0; overflow: visible; pointer-events: none; }
.board { position: relative; top: 60px; isolation: isolate; width: 1674px; min-width: 1674px; max-width: 1674px; height: 626px; min-height: 626px; max-height: 626px; display: block; flex: 0 0 1674px; padding: 0; background: transparent; color: #312813; pointer-events: auto; }
.board-geometry { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.board-combat-indicators { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.combat-lane-indicator { fill: transparent; stroke: transparent; stroke-width: 3; vector-effect: non-scaling-stroke; }
.combat-lane-indicator--active { fill: url(#combat-lane-center-fade); stroke: #ffe75bcc; filter: drop-shadow(0 0 2px #fff3a055) drop-shadow(0 0 5px #ffd90066); animation: combat-lane-indicator-enter .18s ease-out both; }
.board-zone { stroke: none; }
.board-zone-player2,
.board-zone-player1 { fill: transparent; }
.board.controlled-player2-view { --board-player2-debug: rgb(25 135 245 / 48%); --board-player1-debug: rgb(220 35 55 / 48%); }
.board-slot-margin { fill: transparent; }
.board-slot-preview { opacity: 0; fill: none; stroke: #b7e8f4; stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; transition: opacity .28s ease, filter .28s ease; }
body.card-drag-active .board-slot-preview[data-zone-index="5"],
body.card-drag-active .board-slot-preview[data-zone-index="6"],
body.card-drag-active .board-slot-preview[data-zone-index="7"],
body.card-drag-active .board-slot-preview[data-zone-index="8"],
body.card-drag-active .board-slot-preview[data-zone-index="9"] { opacity: .75; filter: drop-shadow(0 0 2px #d9f8ff99); }
body.card-click-targets-visible .board-slot-preview.is-click-target { opacity: .75; filter: drop-shadow(0 0 2px #d9f8ff99); }
.board-slot-preview.is-click-target-exit { animation: click-target-slot-fade-out .32s ease-out both; }
body.card-drag-active .board-slot-preview.is-drag-target { opacity: 1; stroke: #fff; stroke-width: 2; stroke-dasharray: none; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #8cecff); }
.board-slot-label { display: none; }
.vfx-surface { position: fixed; z-index: 40; inset: 0 auto auto 0; display: block; overflow: hidden; pointer-events: none; contain: strict; }
.card-healing-feedback { position: absolute; z-index: 12; inset: 0; overflow: visible; pointer-events: none; }
.card-healing-under-glow { position: absolute; z-index: 0; inset: -4%; border-radius: 38px; background: radial-gradient(ellipse at center, #f0fff4 0%, #baffc8 16%, #55ff7d 42%, #18e64f99 62%, transparent 82%); filter: blur(19px); opacity: 0; pointer-events: none; animation: card-healing-under-glow 1s ease-out both; }
.card-healing-overlay { position: absolute; z-index: 5; inset: 0; overflow: hidden; border-radius: inherit; clip-path: inset(0 round 34px); background: #20ff45; mix-blend-mode: overlay; pointer-events: none; animation: card-healing-overlay 1s ease-out both; }
.card-healing-particle { position: absolute; left: var(--heal-x); top: var(--heal-y); color: #77ff91; font-size: var(--heal-size); font-weight: 900; line-height: 1; text-shadow: 0 0 4px #baffc8, 0 0 10px #29ff5e, 0 0 18px #00d83d; transform: translate(-50%, 8px) scale(.65); pointer-events: none; animation: card-healing-particle-rise 1s ease-out var(--heal-delay) both; }
.hacedor-hit-flash { position: fixed; z-index: 15; bottom: 0; left: 0; display: block; width: 100vw; height: auto; max-width: none; pointer-events: none; user-select: none; clip-path: inset(100% 0 0); mix-blend-mode: screen; opacity: .92; animation: hacedor-hit-flash-rise .4s linear both; }
.hacedor-hit-flash--damage { filter: brightness(0) saturate(100%) invert(17%) sepia(95%) saturate(6800%) hue-rotate(350deg) brightness(105%) contrast(115%) drop-shadow(0 0 18px #ff1b32cc); }
.hacedor-hit-flash--shield { filter: brightness(0) saturate(100%) invert(72%) sepia(68%) saturate(1500%) hue-rotate(158deg) brightness(108%) contrast(105%) drop-shadow(0 0 18px #22cfffcc); }
.hacedor-hit-flash--upper { top: 0; bottom: auto; transform: scaleY(-1); }
@keyframes hacedor-hit-flash-rise { 0% { clip-path: inset(100% 0 0); opacity: 0; } 40% { clip-path: inset(0); opacity: .92; } 50%, 60% { clip-path: inset(0); opacity: .92; } 100% { clip-path: inset(100% 0 0); opacity: 0; } }

@keyframes click-target-slot-fade-out {
  from { opacity: .75; filter: drop-shadow(0 0 2px #d9f8ff99); }
  to { opacity: 0; filter: drop-shadow(0 0 0 transparent); }
}
.board-outline, .board-lane-divider, .board-center-line { fill: none; vector-effect: non-scaling-stroke; }
.board-outline { stroke: transparent; stroke-width: 0; }
.board-lane-divider { stroke: transparent; stroke-width: 0; }
.board-center-line { stroke: transparent; stroke-width: 0; }
.lane { display: contents; }
.lane-label { display: none; }
.slot { --card-border-color: #fff0b0; position: absolute; z-index: 2; isolation: isolate; left: var(--slot-left); top: var(--slot-top); width: var(--slot-width); height: var(--slot-height); min-width: 0; min-height: 0; display: block; padding: 0; border: 0; border-radius: 0; clip-path: var(--slot-shape); text-align: left; color: #fff8e8; background: var(--card-border-color); cursor: default; }
.slot[data-lane-index="0"] { --lane-tilt: -1.2deg; }
.slot[data-lane-index="1"] { --lane-tilt: -.4deg; }
.slot[data-lane-index="2"] { --lane-tilt: .4deg; }
.slot[data-lane-index="3"] { --lane-tilt: 1.2deg; }
.slot:not(:has(.empty)) { transition: filter var(--motion-fast), box-shadow var(--motion-fast), transform .28s cubic-bezier(.2,.8,.25,1); }
.slot:has(.empty) { opacity: 0 !important; border: 0; background: transparent; box-shadow: none; pointer-events: auto; }
.slot.is-double-click-inspectable:hover { z-index: 7; filter: brightness(1.025) drop-shadow(0 0 2px #ffffffcc) drop-shadow(0 0 7px #ffffff66) drop-shadow(0 0 13px #ffffff2e); }
.slot.opponent.is-double-click-inspectable:hover { filter: brightness(1.025) drop-shadow(0 0 2px #ffffffcc) drop-shadow(0 0 7px #ffffff66) drop-shadow(0 0 13px #ffffff2e); }
.board[data-phase="action"] .slot.own.has-available-ability:hover { z-index: 9; filter: brightness(1.06) drop-shadow(0 0 4px var(--attack-glow)) drop-shadow(0 0 12px var(--attack-glow)) drop-shadow(0 0 22px var(--attack-glow)); transform: translateY(-18px); }
.card-drop-light { position: fixed; z-index: 24; inset: 0; display: block; overflow: visible; mix-blend-mode: screen; pointer-events: none; animation: card-drop-light-life 1.4s cubic-bezier(.2,.65,.3,1) both; }
.card-drop-light__beam { position: absolute; left: 0; top: 0; width: 256px; height: 256px; display: block; overflow: hidden; transform-origin: 0 0; backface-visibility: hidden; background-image: linear-gradient(var(--drop-rarity-color, #fff), var(--drop-rarity-color, #fff)), url('../../assets/effects/drop_light.png'); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; background-blend-mode: multiply; mix-blend-mode: screen; }
.card-drop-light__beam--top { clip-path: inset(0 2px); }
.card-drop-particle { position: absolute; width: var(--particle-size); height: var(--particle-size); display: block; border-radius: 50%; background: var(--drop-rarity-color, #fff); box-shadow: 0 0 4px var(--drop-rarity-color, #fff), 0 0 9px var(--drop-rarity-color, #fff); opacity: 0; transform: translate(-50%, -50%) scale(.35); animation: card-drop-particle-burst var(--particle-duration) var(--particle-delay) cubic-bezier(.15,.7,.25,1) both; }
.card-content.card-drop-glow { animation: card-drop-card-glow 1.4s cubic-bezier(.2,.65,.3,1) both; }
.card-content.card-placement-glow { animation: card-placement-white-glow .9s cubic-bezier(.2,.65,.3,1) both; }
.card-content { --safe-inline: 76px; --safe-block: 70px; position: absolute; left: 0; top: 0; z-index: 1; isolation: isolate; width: 750px; height: 1050px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: var(--safe-block) var(--safe-inline); overflow: hidden; background: linear-gradient(145deg, #f16c1b, #c84b0e); box-shadow: inset 0 0 0 4px #78401455; transform: var(--card-content-transform, none); transform-origin: 0 0; backface-visibility: hidden; }
.card-content--back { align-items: center; gap: 28px; padding: 74px; border-radius: 34px; background: radial-gradient(ellipse at 50% 42%, #174a70, #0b1b32 72%); box-shadow: inset 0 0 0 18px #d4ae5b, inset 0 0 0 30px #102a47, inset 0 0 48px #000b; }
.card-back__frame { position: absolute; inset: 58px; border: 5px solid #d4ae5b; outline: 2px solid #f4dfa0; outline-offset: 10px; background: repeating-linear-gradient(45deg, transparent 0 34px, #b7d8ef0b 35px 38px); }
.card-back__sigil { position: relative; z-index: 1; width: 250px; aspect-ratio: 1; display: grid; place-items: center; border: 8px solid #e5c46f; border-radius: 50%; background: radial-gradient(circle, #1c5277, #0b2038 68%); box-shadow: 0 0 0 16px #e5c46f22, 0 0 36px #53caff65; color: #f3d783; font-size: 168px; line-height: 1; }
.card-back__title { position: relative; z-index: 1; color: #f3d783; font-size: 54px !important; letter-spacing: .24em; text-shadow: 0 3px 10px #000b; }
.slot .card-content--back .card-back__sigil { font-size: 168px !important; }
.pointer-drag-back-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; overflow: hidden; border: 2px solid #d4ae5b; border-radius: .6rem; background: radial-gradient(ellipse at 50% 42%, #174a70, #0b1b32 72%); box-shadow: inset 0 0 0 5px #d4ae5b, inset 0 0 0 9px #102a47, inset 0 0 20px #000b, 0 14px 24px #0009; color: #f3d783; backface-visibility: hidden; transform: rotateY(180deg); }
.pointer-drag-back-face::before { position: absolute; inset: 8%; content: ''; border: 1px solid #e5c46f; outline: 1px solid #e5c46f66; outline-offset: 3px; background: repeating-linear-gradient(45deg, transparent 0 9px, #b7d8ef0b 10px 11px); }
.pointer-drag-back-face__sigil { position: relative; z-index: 1; width: 34%; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #e5c46f; border-radius: 50%; background: radial-gradient(circle, #1c5277, #0b2038 68%); box-shadow: 0 0 0 4px #e5c46f22, 0 0 12px #53caff65; font-size: 1.7rem; line-height: 1; }
.pointer-drag-back-face__title { position: relative; z-index: 1; font-size: .4rem; font-weight: 900; letter-spacing: .2em; text-shadow: 0 2px 5px #000b; }
.card-content > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.slot strong { font-size: 38px; }
.slot .card-content > span:not(.rarity-badge) { font-size: 30px; line-height: 1.2; }
.card-current-hp, .hacedor-current-hp { font: inherit; font-weight: 900; color: inherit; }
.card-current-hp.is-damaged { color: #ff2636; text-shadow: 0 2px 3px #000, 0 0 5px #ff1828aa; }
.slot .rarity-badge { top: 42px; right: 42px; width: 64px; height: 64px; border-width: 4px; font-size: 32px !important; }
.slot .card-ability, .slot .weapon-affix, .slot .status-effect { font-size: 30px !important; }
.slot .equipped-weapon { font-size: 28px; }
.slot .empty { align-self: center; color: #b7e8f4; font-size: .7rem; }
.slot .card-back { align-self: center; color: #ffdfdc; font-size: 32px !important; font-weight: 800; }
.slot .card-content--character { display: block; padding: 0; overflow: visible; border-radius: 34px; background: #08090b; box-shadow: none; color: #f8fafc; container-type: inline-size; }
.character-card, .card-content--character { --character-name-size: clamp(1.2rem, 6.9cqw, 2.15rem); --character-ability-size: clamp(.8rem, 4.8cqw, 2.25rem); --character-ability-height: clamp(1.8rem, 7.5cqw, 3.5rem); --character-equipment-left: calc(81.4% + .67cqw); --character-equipment-top: 12%; --character-equipment-size: calc(21% - 1.33cqw); --character-runes-left: 92%; --character-runes-top: calc(34% - 6.67cqw); }
.slot:has(.card-content--character) { clip-path: none; background: transparent; }
.slot:has(.card-content--back) { clip-path: none; background: transparent; }
.slot .card-content--character > .character-card-game__artwork { overflow: hidden; border-radius: 26px; }
.slot .card-content--character > span { font-size: initial !important; line-height: normal; }
.character-card-game__artwork { position: absolute; z-index: 0; inset: 9px; overflow: hidden; border-radius: 26px; background: linear-gradient(145deg, #183b46, #091620); }
.character-card-game__artwork::after { content: ''; position: absolute; z-index: 1; inset: 43% 0 0; background: linear-gradient(to top, rgb(0 0 0 / 88%) 0%, rgb(0 0 0 / 64%) 32%, rgb(0 0 0 / 28%) 68%, transparent 100%); pointer-events: none; }
.character-card-game__art-image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slot .card-content--character > .character-card-game__rarity { position: absolute; z-index: 3; top: 0; left: 0; width: 20%; height: 17%; display: block; padding: 18px 0 0 24px; clip-path: polygon(0 0, 100% 0, 0 100%); font-size: 52px !important; line-height: 1; }
.character-card-game__rarity--common { background: linear-gradient(135deg, #64748b 0 49%, #08090b 50%); }
.character-card-game__rarity--singular { background: linear-gradient(135deg, #16a34a 0 49%, #08090b 50%); }
.character-card-game__rarity--rare { background: linear-gradient(135deg, #0088c9 0 49%, #08090b 50%); }
.character-card-game__rarity--epic { background: linear-gradient(135deg, #9333ea 0 49%, #08090b 50%); }
.character-card-game__rarity--guardian { background: linear-gradient(135deg, #ea580c 0 49%, #08090b 50%); }
.character-card-game__rarity--deity { background: linear-gradient(135deg, #ca8a04 0 49%, #08090b 50%); }
.character-card-game__specials { position: absolute; z-index: 3; left: 76px; right: 76px; bottom: 26%; display: grid; gap: 8px; }
.character-card-game__name { display: block; overflow: hidden; color: #f8fafc; font-size: var(--character-name-size) !important; font-weight: 800; line-height: 1.2; text-align: center; text-overflow: ellipsis; text-shadow: 0 2px 3px #000, 0 0 8px #000; white-space: nowrap; }
.character-card-game__abilities { display: grid; gap: 5px; }
.character-card-game__ability { min-height: var(--character-ability-height); display: flex; align-items: center; overflow: hidden; color: #f8fafc; font-size: var(--character-ability-size); line-height: 1.2; text-shadow: 0 2px 4px #000; white-space: nowrap; }
.character-card-game__ability--healing { color: #62ffdc; text-shadow: 0 0 7px #36f5c5, 0 0 14px #20d9ba, 0 2px 4px #000; }
.character-card-game__statuses { position: absolute; z-index: 3; top: 79%; left: 76px; right: 76px; height: 47px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.character-card-game__statuses:empty { display: none; }
.character-card-game__status { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; font-size: 28px; line-height: 1; }
.character-card-game__equipment { position: absolute; z-index: 4; top: calc(var(--character-equipment-top) - 40px); left: calc(var(--character-equipment-left) + 25px); width: calc(var(--character-equipment-size) * 1.44); aspect-ratio: 1; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #111; filter: drop-shadow(0 4px 6px #0009); }
.character-card-game__equipment::before { position: absolute; inset: 8.64px; content: ''; clip-path: inherit; background: #f4f4f4; }
.character-card-game__equipment > span { position: relative; z-index: 1; max-width: 82%; overflow: hidden; color: #444; font-size: 31.68px; line-height: 1.1; text-align: center; text-overflow: ellipsis; }
.character-card-game__runes { position: absolute; z-index: 4; top: var(--character-runes-top); left: calc(96.2324% + 25px); display: grid; gap: calc(12px * 1.44); transform: translateX(-50%); }
.character-card-game__rune { width: calc(76px * 1.44); height: calc(76px * 1.44); display: grid; place-items: center; border: 2px solid #111; border-radius: 50%; background: #fafafa; color: #7c3aed; box-shadow: 0 4px 8px #0009; font-size: 60.48px; line-height: 1; }
.character-card-game__stats { position: absolute; z-index: 4; right: 17.625%; bottom: -5%; left: 17.625%; display: flex; justify-content: space-around; transform: scale(1.2); transform-origin: center bottom; }
.character-card-game__stat-slot { position: relative; flex: 0 0 22%; aspect-ratio: 1; }
.character-card-game__stat { position: absolute; bottom: 0; left: 50%; width: 76px; height: 76px; display: grid; place-items: center; border: 2px solid #111; border-radius: 50%; color: white; box-shadow: 0 5px 10px #0009; transform: translateX(-50%); }
.character-card-game__stat--hp { width: 106px; height: 106px; background: #00dc21; }
.character-card-game__stat--attack { background: #ed1119; }
.character-card-game__stat--speed { background: #f4df00; color: white; }
.character-card-game__stat--attack { transform: translateX(calc(-50% + 30px)); }
.character-card-game__stat--speed { transform: translateX(calc(-50% - 30px)); }
.character-card-game__stat--attack, .character-card-game__stat--speed { bottom: 15px; }
.character-card-game__stat-icon { position: absolute; top: -31px; left: 50%; width: max-content; font-size: 34px; line-height: 1; text-shadow: 0 2px 4px #000; transform: translateX(-50%); }
.character-card-game__stat--hp .character-card-game__stat-icon { top: -39px; font-size: 44px; }
.character-card-game__stat--speed .character-card-game__stat-icon { font-size: 42px; }
.character-card-game__stat-value { font-size: 40px; line-height: 1; text-shadow: 0 2px 3px #0005; }
.slot.own { --card-border-color: #b7ffe0; }
.slot.opponent { opacity: .94; }
.slot[data-rarity="common"] { --attack-glow: #cbd5e1; }
.slot[data-rarity="singular"] { --attack-glow: #4ade80; }
.slot[data-rarity="rare"] { --attack-glow: #60a5fa; }
.slot[data-rarity="epic"] { --attack-glow: #c084fc; }
.slot[data-rarity="guardian"] { --attack-glow: #fb923c; }
.slot[data-rarity="deity"] { --attack-glow: #facc15; }
body.card-geometry-debug .board-slot-preview { stroke: #22d3ee; }
body.card-geometry-debug .slot:not(:has(.empty)) { filter: drop-shadow(0 0 2px #ffdf66); }
body.card-geometry-debug .card-content::after { content: ''; position: absolute; inset: var(--safe-block) var(--safe-inline); border: 1px dashed #39ff6a; pointer-events: none; }
body.card-geometry-debug .card-content::before { content: ''; position: absolute; z-index: 8; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; transform: translate(-50%, -50%); pointer-events: none; }
.board.player1-controlled .ability-actions, .board.player2-controlled .ability-actions { position: absolute; z-index: 7; width: max-content; max-width: 22%; transform: translateX(-50%); }
.board.player1-controlled .ability-actions { bottom: 0; }
.board.player2-controlled .ability-actions { top: 22px; }
.ability-actions { display: grid; gap: .3rem; }
.ability-action { padding: .32rem .45rem; border-color: #3c8d70; background: #12382d; color: #9ff0ce; font-size: .65rem; }
.ability-action--healing { border-color: #42f3cb; color: #62ffdc; text-shadow: 0 0 5px #36f5c5, 0 0 11px #20d9ba; box-shadow: 0 0 8px #28e9c266, inset 0 0 7px #28e9c222; }
.card-ability { color: #8ce6bd !important; font-size: .72rem; font-weight: 700; }
.card-ability--healing { color: #62ffdc !important; text-shadow: 0 0 5px #36f5c5, 0 0 11px #20d9ba; }
.weapon-affix, .status-effect { color: #ffaaaa !important; font-size: .68rem; font-weight: 700; }
.equipped-weapon { margin-top: .1rem; padding-top: .25rem; border-top: 1px solid #76552e; font-size: .68rem; font-weight: 700; cursor: help; text-decoration: underline dotted #ffc66d99; text-underline-offset: .18rem; }
.board[data-phase="action"] .slot.own .equipped-weapon { cursor: pointer; }
.board[data-phase="action"] .slot.own .equipped-weapon:hover { color: #ffe0a8; filter: drop-shadow(0 0 6px #ffc66d99); }
.weapon-tooltip { position: fixed; z-index: 100; width: min(270px, calc(100vw - 24px)); padding: 1rem; border: 1px solid #c78a3e; border-radius: .75rem; background: linear-gradient(145deg, #302419f5, #101f31fa); color: #eef5ff; box-shadow: 0 16px 42px #000b, 0 0 25px #d9903633; pointer-events: none; animation: weapon-tooltip-in .16s ease-out both; }
.weapon-tooltip small { color: #ffc66d; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.weapon-tooltip h3 { margin: .25rem 0 .2rem; font-size: 1.1rem; }
.weapon-tooltip p { margin: .35rem 0; }
.weapon-tooltip .tooltip-archetype { color: #9fb4c9; font-size: .78rem; text-transform: capitalize; }
.weapon-tooltip ul { display: grid; gap: .3rem; margin: .8rem 0; padding: 0; list-style: none; }
.weapon-tooltip li { display: flex; justify-content: space-between; padding: .3rem .45rem; border-radius: .35rem; background: #ffffff0a; color: #bfd0e0; font-size: .8rem; }
.weapon-tooltip li strong { color: #fff; }
.character-hand-tooltip { width: min(320px, calc(100vw - 24px)); max-height: min(80vh, 620px); overflow: auto; border-color: #32d9c1; background: linear-gradient(145deg, #102d36f7, #101827fa); box-shadow: 0 16px 42px #000b, 0 0 25px #20d9ba33; }
.character-hand-tooltip small { color: #62ffdc; }
.character-hand-tooltip h3 { max-width: calc(100% - 2rem); }
.character-hand-tooltip > p { color: #bfd0e0; font-size: .82rem; }
.character-hand-tooltip > p strong { color: #fff; }
.character-hand-tooltip .rarity-badge { top: .8rem; right: .8rem; }
.tooltip-character-section { display: grid; gap: .25rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px solid #62ffdc33; }
.tooltip-character-section > strong { color: #62ffdc; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.tooltip-character-section p { display: grid; gap: .15rem; margin: 0; padding: .35rem .45rem; border-radius: .4rem; background: #ffffff0a; color: #d8e5ef; font-size: .78rem; }
.tooltip-character-section p span { color: #aebfce; }
.tooltip-character-section .tooltip-healing b { color: #62ffdc; text-shadow: 0 0 6px #20d9ba; }
.tooltip-affixes { padding-top: .65rem; border-top: 1px solid #76552e; font-size: .78rem; }
.tooltip-affixes > strong { color: #ffc66d; }
.tooltip-affixes p { display: grid; gap: .2rem; }
.tooltip-affixes b { color: #ff7777; }
.tooltip-affixes span { color: #b7c8da; }
.tooltip-restriction { color: #ffbd8a; font-size: .75rem; }
.tooltip-remove { margin-top: .75rem !important; padding: .55rem .65rem; border: 1px solid #ffc66d66; border-radius: .4rem; background: #ffc66d12; color: #ffe0a8; font-size: .76rem; font-weight: 800; text-align: center; }
.log-panel { position: absolute; z-index: 15; top: .65rem; right: clamp(.6rem, 2vw, 2rem); width: min(260px, 23%); border: 1px solid #8333a4; background: var(--purple-dark); box-shadow: 0 10px 28px #0007; pointer-events: auto; }
.log-toggle { width: 100%; min-height: 34px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .35rem .55rem; border: 0; border-radius: 0; background: var(--purple); color: white; text-align: left; font-size: .74rem; font-weight: 800; }
.log-toggle:hover:not(:disabled) { border: 0; background: #7e22a5; }
.game-log-latest { overflow: hidden; color: #ded0f1; font-size: .63rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.log-chevron { transition: transform var(--motion-fast); }
.log-toggle[aria-expanded="true"] .log-chevron { transform: rotate(180deg); }
.log-drawer { max-height: min(34vh, 280px); overflow: auto; padding: .25rem .65rem; }
.log-drawer ol { margin: 0; padding-left: 1.3rem; color: #d1dcf7; font-size: .69rem; line-height: 1.45; }
.log-drawer li { padding: .12rem 0; }
.active-hand-controls { --switch-elapsed: 0deg; position: fixed; z-index: 27; top: 50%; right: 34px; bottom: auto; width: 146px; display: grid; justify-items: center; align-content: center; gap: 0; padding: 0; border: 0; background: transparent; box-shadow: none; transform: translateY(-50%); }
.hand-actions { position: relative; isolation: isolate; z-index: 2; display: flex; }
.hand-actions::before { position: absolute; z-index: -1; top: 50%; left: 50%; width: 126px; height: 126px; content: ''; border-radius: 50%; background: conic-gradient(transparent 0deg, transparent var(--switch-elapsed), #ff7600 var(--switch-elapsed), #ff7600 360deg); opacity: 0; transform: translate(-50%, -50%); transition: --switch-elapsed 1s linear; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); pointer-events: none; }
.active-hand-controls #confirm { position: relative; z-index: 1; isolation: isolate; width: 126px; height: 126px; display: grid; place-items: center; overflow: hidden; padding: 0; border: 5px solid white; border-radius: 50%; background: linear-gradient(145deg, #ffd51f, #ffae00); color: #181000; font-size: .96rem; font-weight: 900; text-transform: uppercase; box-shadow: 0 7px 20px #0009, inset 0 0 10px #fff36b88; transition: transform .42s cubic-bezier(.2,.8,.25,1), background var(--motion-fast), border-color var(--motion-fast), opacity var(--motion-fast); }
.active-hand-controls #confirm::before { position: absolute; z-index: -1; inset: 0; content: ''; border-radius: inherit; opacity: 0; transform: translateY(-100%); pointer-events: none; }
.active-hand-controls.is-waiting-opponent.waiting-player1 #confirm::before { background: linear-gradient(180deg, #008bdae0 0%, #006aa5b8 42%, transparent 78%); }
.active-hand-controls.is-waiting-opponent.waiting-player2 #confirm::before { background: linear-gradient(180deg, #ee071ce0 0%, #8f0715b8 42%, transparent 78%); }
.active-hand-controls.is-waiting-opponent #confirm::before { animation: confirmed-gradient-enter .58s cubic-bezier(.2,.8,.25,1) .08s both; }
.active-hand-controls #confirm:hover:not(:disabled) { border-color: white; background: linear-gradient(145deg, #ffe14a, #ffb800); transform: scale(1.04); }
.active-hand-controls #confirm:disabled { border-color: #bac2c8; background: linear-gradient(145deg, #9a8d4a, #6f5f22); color: #ddd7bb; opacity: 1; }
.active-hand-controls.is-switch-countdown .hand-actions::before { opacity: 1; transform: translate(-50%, -50%); }
.active-hand-controls.is-switch-countdown #confirm { transform: scale(.84); }
.active-hand-controls.is-switch-countdown #confirm:hover:not(:disabled) { transform: scale(.87); }
.active-hand-controls.is-switch-countdown-finishing .hand-actions::before { animation: switch-ring-fade .45s ease-out both; }
.active-hand-controls.is-switch-countdown-finishing #confirm { transform: scale(1); }
.active-hand-controls.is-switch-countdown-finishing #confirm:disabled { border-color: white; background: linear-gradient(145deg, #ffd51f, #ffae00); color: #181000; opacity: 1; }
#confirm-label { position: relative; z-index: 1; display: inline-block; transition: font-size .18s ease, color .18s ease, text-shadow .18s ease; }
.active-hand-controls.is-switch-countdown #confirm-label { color: #191000; font-size: 3.25rem; line-height: 1; text-shadow: 0 1px 2px #fff8; }
.active-hand-controls.is-switch-countdown #confirm:hover #confirm-label { font-size: .96rem; text-transform: uppercase; }
.active-hand-controls.is-switch-countdown #confirm-label.is-ticking { animation: turn-switch-countdown-tick .42s ease-out; }
.active-hand-controls.is-switch-countdown-finishing #confirm-label { animation: turn-switch-countdown-fade .45s ease-out both; }
.turn-movement { position: relative; z-index: 1; width: 112px; height: 104px; display: grid; place-items: center; font-size: 2.65rem; line-height: 1; }
.turn-resources { position: relative; left: -4px; display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; width: 100%; gap: 8px; transform: scale(.8); transform-origin: center; }
.turn-resource { display: flex; align-items: center; justify-content: center; min-width: 0; height: 68px; }
.turn-resource b { display: block; font-size: inherit; line-height: 1; transform-origin: center; }
.turn-resource--movement { transform: translateX(5px); }
.turn-resource--movement b { color: #fff; font-size: 3.25rem; text-shadow: 0 3px 3px #000, 0 0 4px #000, 0 0 9px #ffffff88; }
.turn-resource--energy { transform: translate(-11px, 4px); }
.turn-resource--energy b { color: #ff3bc8; font-size: 2.05rem; text-shadow: 0 3px 3px #000, 0 0 4px #000, 0 0 9px #ff00b899; }
.turn-resource-divider { width: 2px; height: 68px; border-radius: 999px; background: #effcff; box-shadow: 0 0 4px #fff, 0 0 10px #71e7ff, 0 0 18px #71e7ffaa; }
.turn-movement--opponent .turn-resources { top: -18px; }
.turn-movement--current .turn-resources { top: 18px; }
.turn-movement b.is-increasing { animation: movement-value-increase .65s cubic-bezier(.2,.8,.25,1) both; }
.turn-resource--movement b.is-increasing { animation: movement-recharge-enter .8s cubic-bezier(.2,.8,.25,1) both; }
.turn-resource--energy b.is-increasing { animation: energy-recharge-grow .75s cubic-bezier(.2,.8,.25,1) both; }
.movement-spent { position: absolute; left: 24%; bottom: 3px; color: #ff2938; font-size: .95rem; font-weight: 900; line-height: 1; text-shadow: 0 0 4px #ff1b2d, 0 0 10px #ff1b2dcc; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.movement-spent.is-visible { animation: movement-spent-pop .75s ease-out both; }
.turn-movement--opponent { margin-bottom: -24px; background: linear-gradient(180deg, transparent 0%, #5d000b80 28%, #ee071c80 62%, #ee071c80 100%); }
.turn-movement--current { margin-top: -24px; background: linear-gradient(180deg, #008bda80 0%, #008bda80 38%, #003c6880 72%, transparent 100%); }
.turn-movement--opponent { --confirmed-movement-shift: 76px; }
.turn-movement--current { --confirmed-movement-shift: -76px; }
.turn-movement.is-confirmed-waiting { z-index: 0; animation: confirmed-movement-enter .58s cubic-bezier(.2,.8,.25,1) both; pointer-events: none; }
.turn-movement.is-confirmed-returning { z-index: 0; animation: confirmed-movement-return .58s cubic-bezier(.2,.8,.25,1) both; pointer-events: none; }
body.controlled-player2-view .turn-movement--current { order: 1; margin-top: 0; margin-bottom: -24px; background: linear-gradient(180deg, transparent 0%, #003c6880 28%, #008bda80 62%, #008bda80 100%); }
body.controlled-player2-view .active-hand-controls .hand-actions { order: 2; }
body.controlled-player2-view .turn-movement--opponent { order: 3; margin-top: -24px; margin-bottom: 0; background: linear-gradient(180deg, #ee071c80 0%, #ee071c80 38%, #5d000b80 72%, transparent 100%); }
body.controlled-player2-view .turn-movement--current .turn-resources { top: -18px; }
body.controlled-player2-view .turn-movement--opponent .turn-resources { top: 18px; }
body.controlled-player2-view .turn-movement--current { --confirmed-movement-shift: 76px; }
body.controlled-player2-view .turn-movement--opponent { --confirmed-movement-shift: -76px; }
.active-hand-controls .muted, .active-hand-controls .result { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: #8da5bd; font-size: .69rem; }
.result { min-height: 1.2em; color: #76e6ae; font-size: .7rem; }
.result[data-success="false"] { color: #ff938d; }
.combat-countdown { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: .25rem; background: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #dbeafe; text-transform: uppercase; letter-spacing: .14em; pointer-events: auto; }
.combat-countdown strong { color: #ffcf70; font-size: clamp(4.5rem, 13vw, 8rem); line-height: 1; text-shadow: 0 0 35px #f59e0b80; }
.countdown-pop { animation: countdown-pop .68s ease-out; }
.combat-countdown-active .hand-panel { pointer-events: none; opacity: .72; }
body.combat-controls-hidden .active-hand-controls .turn-movement { visibility: hidden; opacity: 0; }
body.card-drag-active, body.card-drag-active * { cursor: grabbing !important; }
.slot.taking-damage { animation: card-damage-shake .48s ease-out; }
.slot.taking-damage .card-content { filter: drop-shadow(0 0 10px #ff3b30) drop-shadow(0 0 24px #ff202099); }
.card-damage-overlay { position: absolute; z-index: 2; inset: 0; background: #ff3328; mix-blend-mode: overlay; pointer-events: none; animation: card-damage-overlay .48s ease-out both; }
.slot.attacking { z-index: 12; animation: card-lunge .46s cubic-bezier(.2, .75, .25, 1); }
.slot.card-reveal-flip-out, .slot.card-reveal-flip-in { z-index: 13; }
.slot.card-reveal-flip-out .card-content, .slot.card-reveal-flip-in .card-content { transform-origin: 0 0; }
.slot.card-reveal-flip-out .card-content { animation: card-reveal-compress .14s cubic-bezier(.4,0,.2,1) both; }
.slot.card-reveal-flip-in .card-content { animation: card-reveal-expand .14s cubic-bezier(.4,0,.2,1) both; }
.slot.attacking .card-content { filter: drop-shadow(0 0 10px var(--attack-glow, #facc15)) drop-shadow(0 0 24px var(--attack-glow, #facc15)); }
.slot.dying { z-index: 11; pointer-events: none; transform-origin: center; animation: card-death-collapse .62s cubic-bezier(.55, 0, .9, .45) forwards; }
.damage-number { position: absolute; z-index: 30; right: -.7rem; top: 30%; color: #ff5a52 !important; font-size: 1.4rem !important; font-weight: 900; text-shadow: 0 2px 5px #000; pointer-events: none; animation: damage-number-float .5s ease-out both; }
.damage-number.bleed-damage { right: -1rem; color: #ff3545 !important; font-size: 1.15rem !important; white-space: nowrap; }
.weapon-style-number { position: absolute; z-index: 31; left: 50%; top: 24%; font-size: 1.15rem; font-weight: 900; white-space: nowrap; pointer-events: none; text-shadow: 0 2px 5px #000, 0 0 12px currentColor; animation: weapon-style-number-float .46s ease-out both; }
.weapon-style-number--attack { color: #ffba4a; }
.weapon-style-number--heal { color: #62ffdc; }
.weapon-style-number--speed { color: #b59cff; }
.slot.weapon-style-stat-change .card-content { filter: drop-shadow(0 0 12px #ff9f2fcc); }
.slot.weapon-style-heal .card-content { filter: drop-shadow(0 0 12px #42f3cbaa); }
.slot.weapon-style-speed-change .card-content { filter: drop-shadow(0 0 12px #9b7cffcc); }
.debug-panel { position: fixed !important; z-index: 40 !important; right: .75rem; bottom: .75rem; width: min(360px, 32vw); max-height: 32vh; overflow: auto; padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: #0c1a2bea; box-shadow: 0 12px 32px #0009; }
.debug-panel h2 { margin-bottom: .45rem; }
.debug-panel__header { position: sticky; z-index: 1; top: -.8rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: -.8rem -.8rem .55rem; padding: .7rem .8rem; background: #0c1a2bf5; }
.debug-panel__header h2 { margin: 0; }
.debug-panel__header button { padding: .35rem .55rem; border-color: #59d8ff77; background: #123752; color: #dff8ff; font-size: .65rem; }
pre { white-space: pre-wrap; color: #9fe3c0; font-size: .72rem; }
[hidden] { display: none !important; }

.mulligan-overlay { position: fixed; z-index: 11100; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: transparent; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.mulligan-phase-active .hand { visibility: hidden; }
.mulligan-panel { width: min(96vw, 1240px); display: grid; justify-items: center; gap: .65rem; padding: 1.7rem 1.5rem 1.4rem; border: 1px solid #65d9ff66; border-radius: 1.4rem; background: linear-gradient(145deg, #0c2135f5, #06101df8); box-shadow: 0 28px 80px #000e, inset 0 0 55px #39c8ff12; text-align: center; animation: mulligan-panel-enter .52s cubic-bezier(.16,.84,.24,1) both; transform-origin: center; }
.mulligan-overlay.is-closing { animation: mulligan-overlay-away .46s ease-in both; pointer-events: none; }
.mulligan-overlay.is-closing .mulligan-panel { animation: mulligan-panel-away .46s cubic-bezier(.55,0,.85,.35) both; }
.mulligan-eyebrow { margin: 0; color: #68ddff; font-size: .72rem; font-weight: 900; letter-spacing: .22em; }
.mulligan-panel h2 { margin: 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2.25rem); text-transform: uppercase; text-shadow: 0 3px 0 #000, 0 0 18px #4ed7ff44; }
.mulligan-player { margin: 0; color: #ffd55f; font-size: 1rem; font-weight: 900; }
.mulligan-instruction { margin: 0 0 .45rem; color: #c4d9e8; }
.mulligan-cards { width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; gap: clamp(.35rem, 1vw, .8rem); perspective: 1200px; }
.mulligan-card { --mulligan-rarity: #94a3b8; position: relative; width: clamp(100px, 10.5vw, 142px); aspect-ratio: 750 / 1050; flex: 0 1 142px; overflow: hidden; padding: 0; border: 2px solid var(--mulligan-rarity); border-radius: .75rem; background: linear-gradient(150deg, #193247, #07111e); box-shadow: 0 12px 25px #000a, 0 0 0 transparent; color: #fff; transform: translateY(0) scale(1); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease; }
.mulligan-card[data-rarity="singular"] { --mulligan-rarity: #4ade80; }
.mulligan-card[data-rarity="rare"] { --mulligan-rarity: #38bdf8; }
.mulligan-card[data-rarity="epic"] { --mulligan-rarity: #c084fc; }
.mulligan-card[data-rarity="guardian"] { --mulligan-rarity: #fb923c; }
.mulligan-card[data-rarity="deity"] { --mulligan-rarity: #facc15; }
.mulligan-card:hover:not(:disabled) { z-index: 4; border-color: #fff; transform: translateY(-12px) scale(1.06); box-shadow: 0 18px 34px #000c, 0 0 18px var(--mulligan-rarity); }
.mulligan-card__art { position: absolute; inset: 0; background: linear-gradient(145deg, #1a4050, #071520); }
.mulligan-card__art::after { position: absolute; inset: 46% 0 0; content: ''; background: linear-gradient(to top, #020611f2, transparent); }
.mulligan-card__art img { width: 100%; height: 100%; object-fit: cover; }
.mulligan-card__rarity { position: absolute; z-index: 3; top: 0; left: 0; padding: .35rem .55rem; background: var(--mulligan-rarity); color: #07111e; font-weight: 1000; }
.mulligan-card__type { position: absolute; z-index: 3; top: .45rem; right: .45rem; color: #fff; font-size: .62rem; font-weight: 900; text-shadow: 0 2px 4px #000; }
.mulligan-card__name { position: absolute; z-index: 3; right: .35rem; bottom: .7rem; left: .35rem; overflow: hidden; color: #fff; font-size: clamp(.64rem, .9vw, .82rem); font-weight: 900; text-overflow: ellipsis; text-shadow: 0 2px 5px #000; white-space: nowrap; }
.mulligan-card__cost { position: absolute; z-index: 4; top: .25rem; left: 50%; width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border-radius: 50%; background: #b800e8; color: #fff; font-weight: 950; box-shadow: 0 3px 8px #000a; transform: translateX(-50%); }
.mulligan-footer { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .55rem; }
.mulligan-count { color: #d8e7f2; font-weight: 800; }
.mulligan-count.is-full { color: #ffcf5b; }
.mulligan-accept { min-width: 170px; border-color: #8cecff; background: linear-gradient(180deg, #18bfe8, #08769e); color: #fff; font-weight: 900; text-transform: uppercase; box-shadow: 0 6px 18px #0008, 0 0 13px #35d6ff44; }
.mulligan-result { min-height: 1.3em; margin: 0; color: #ff9cab; font-weight: 750; }
.mulligan-card.is-returning { animation: mulligan-to-deck .55s cubic-bezier(.4,0,.75,.2) both; }
.mulligan-card.is-new { animation: mulligan-replacement-in .48s cubic-bezier(.18,.78,.25,1) both; }
@keyframes mulligan-overlay-away { to { opacity: 0; background-color: transparent; backdrop-filter: blur(0); } }
@keyframes mulligan-panel-enter { from { opacity: 0; transform: perspective(900px) translateZ(-360px) scale(.68); filter: blur(5px); } to { opacity: 1; transform: perspective(900px) translateZ(0) scale(1); filter: blur(0); } }
@keyframes mulligan-panel-away { from { opacity: 1; transform: perspective(900px) translateZ(0) scale(1); filter: blur(0); } to { opacity: 0; transform: perspective(900px) translateZ(-420px) scale(.62); filter: blur(5px); } }
@keyframes mulligan-to-deck { to { opacity: 0; transform: translate(34vw, -20vh) rotate(28deg) scale(.42); filter: blur(3px); } }
@keyframes mulligan-replacement-in { from { opacity: 0; transform: translate(-18vw, -12vh) rotate(-16deg) scale(.5); filter: blur(4px); } to { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); filter: blur(0); } }
@media (max-width: 850px) { .mulligan-cards { flex-wrap: wrap; min-height: 0; } .mulligan-card { width: 86px; flex-basis: 86px; } }

/* Presentación previa al combate: consume los perfiles públicos disponibles y comparte el render del Hacedor. */
.match-intro { position: fixed; z-index: 11200; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; overflow: hidden; isolation: isolate; color: #f7f0df; background: radial-gradient(ellipse at 50% 48%, #18253a 0, #0a1425 48%, #030711 100%); }
.match-intro[hidden] { display: none; }
.match-intro__backdrop { position: absolute; z-index: -1; inset: 0; opacity: .52; background: radial-gradient(ellipse at 24% 46%, #225a7c66 0, transparent 34%), radial-gradient(ellipse at 78% 43%, #8c632b55 0, transparent 35%), radial-gradient(circle at 50% 50%, #d5af6338 0, transparent 22%); }
.match-intro__backdrop::before { position: absolute; inset: 0; content: ''; opacity: .42; background-image: radial-gradient(1px 1px at 14% 23%, #fff 98%, transparent), radial-gradient(1px 1px at 35% 72%, #e5ce9d 98%, transparent), radial-gradient(1px 1px at 67% 18%, #fff 98%, transparent), radial-gradient(1px 1px at 84% 66%, #fff 98%, transparent), radial-gradient(1px 1px at 55% 87%, #fff 98%, transparent); background-size: 230px 190px; }
.match-intro__player { position: relative; align-self: stretch; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.match-intro__player::before { position: absolute; top: 12%; bottom: 20%; width: 72%; content: ''; border-radius: 50%; background: radial-gradient(ellipse, #55b8e422, transparent 68%); filter: blur(18px); }
.match-intro__player--right::before { background: radial-gradient(ellipse, #d9a74b22, transparent 68%); }
.match-intro__player canvas { position: relative; display: block; width: min(43vw, 72vh, 620px); height: min(62vh, 744px); scale: 1.19; transform-origin: center 46%; object-fit: contain; filter: drop-shadow(0 16px 30px #000b); mask-image: url('../../assets/hacedores/mask_avatar2.png'); -webkit-mask-image: url('../../assets/hacedores/mask_avatar2.png'); mask-mode: luminance; mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.match-intro__player--left canvas { animation: match-intro-left-in .9s cubic-bezier(.18,.72,.22,1) both; }
.match-intro__player--right canvas { animation: match-intro-right-in .9s .12s cubic-bezier(.18,.72,.22,1) both; }
.match-intro__identity { position: relative; z-index: 1; display: grid; justify-items: center; gap: .3rem; width: min(100%, 30rem); padding: .7rem 1rem; text-align: center; text-shadow: 0 2px 16px #000; animation: match-intro-identity-in .55s .55s both; }
.match-intro__identity > span { color: #d9bd7b; font: 500 .66rem var(--font-primary); letter-spacing: .26em; }
.match-intro__identity strong { display: block; max-width: 100%; overflow: hidden; color: #fff8e8; font: 700 clamp(1.15rem, 2.4vw, 2rem) var(--font-primary); text-overflow: ellipsis; white-space: nowrap; }
.match-intro__identity small { color: #c9c3b7; font: 400 .88rem var(--font-secondary); }
.match-intro__identity small[hidden] { display: none; }
.match-intro__versus { position: relative; z-index: 2; width: clamp(7.5rem, 16vw, 13rem); aspect-ratio: 1; display: grid; place-items: center; align-self: center; padding: 0; isolation: isolate; color: #fff0bf; background: linear-gradient(180deg, #fff8d8 0%, #f7d78e 28%, #b87925 58%, #ffe8a7 76%, #a9681e 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 800 clamp(3.2rem, 7.8vw, 7.2rem)/1 var(--font-primary); letter-spacing: -.09em; filter: drop-shadow(0 0 9px #ffd76d) drop-shadow(0 0 28px #dfa83cbb) drop-shadow(0 8px 22px #000); animation: match-intro-versus-in .82s .3s cubic-bezier(.16,.84,.22,1) both; }
.match-intro__versus::before { position: absolute; z-index: -2; inset: 3%; content: ''; border: 1px solid transparent; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 11%, #ffe8aa 13%, transparent 17% 45%, #d09a3c 48%, transparent 52% 78%, #fff1c4 81%, transparent 85%) border-box; mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); opacity: 0; animation: match-intro-ring-reveal .5s .7s ease-out forwards, match-intro-ring-turn 8s 1.2s linear infinite; }
.match-intro__versus::after { position: absolute; z-index: -1; inset: 15%; content: ''; background: conic-gradient(from 0deg, transparent 0 7%, #ffe8a855 9%, transparent 12% 25%, #f5cb6c66 27%, transparent 30% 48%, #fff3cd88 50%, transparent 53% 72%, #edbe5e55 75%, transparent 78%); clip-path: polygon(50% 0, 55% 42%, 100% 50%, 55% 58%, 50% 100%, 45% 58%, 0 50%, 45% 42%); opacity: 0; filter: blur(2px); animation: match-intro-flare-reveal .48s .62s ease-out forwards, match-intro-flare-pulse 2.2s 1.2s ease-in-out infinite alternate; }
.match-intro__loader { position: absolute; right: 0; bottom: max(1.3rem, env(safe-area-inset-bottom)); left: 0; display: grid; justify-items: center; animation: match-intro-identity-in .45s .75s both; }
.match-intro__loader-emblem { position: relative; width: clamp(5.4rem, 12vw, 7.5rem); aspect-ratio: 1; display: grid; place-items: center; }
.match-intro__loader-logo, .match-intro__loader-spinner { position: absolute; inset: 0; width: 100%; height: 100%; margin: auto; object-fit: contain; }
.match-intro__loader-logo { width: 72%; height: 72%; filter: drop-shadow(0 0 12px rgb(226 168 55 / 42%)); }
.match-intro__loader-spinner { inset: 10%; width: 80%; height: 80%; background: transparent; mix-blend-mode: screen; animation: login-transition-spin 1.15s linear infinite; }
.match-intro__status-accessible { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
#match-intro:not([hidden]) { animation: match-intro-depart .55s ease-in 4.45s both; pointer-events: none; }
@keyframes match-intro-left-in { from { opacity: 0; transform: translateX(-7vw) scale(.96); filter: blur(7px) drop-shadow(0 16px 30px #000b); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes match-intro-right-in { from { opacity: 0; transform: translateX(7vw) scale(.96) scaleX(-1); filter: blur(7px) drop-shadow(0 16px 30px #000b); } to { opacity: 1; transform: translateX(0) scale(1) scaleX(-1); } }
@keyframes match-intro-identity-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes match-intro-versus-in { 0% { opacity: 0; transform: scale(.55); } 58% { opacity: 1; transform: scale(1.12); } 78% { transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes match-intro-ring-reveal { to { opacity: .82; } }
@keyframes match-intro-ring-turn { to { transform: rotate(360deg); } }
@keyframes match-intro-flare-reveal { to { opacity: .85; } }
@keyframes match-intro-flare-pulse { from { transform: scale(.72); opacity: .38; } to { transform: scale(1.12); opacity: .82; } }
@keyframes match-intro-depart { to { opacity: 0; visibility: hidden; } }
@media (max-width: 700px) { .match-intro { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .match-intro__player canvas { width: min(43vw, 40vh); height: min(48vh, 576px); scale: 1.19; } .match-intro__versus { font-size: clamp(2.8rem, 13vw, 5rem); } .match-intro__identity { padding-inline: .3rem; } .match-intro__identity strong { font-size: clamp(.85rem, 3.4vw, 1.35rem); } .match-intro__identity > span { font-size: .52rem; letter-spacing: .15em; } .match-intro__identity small { font-size: .72rem; } }
@media (prefers-reduced-motion: reduce) { .match-intro__player canvas, .match-intro__identity, .match-intro__versus, .match-intro__loader, .match-intro__loader-spinner, .match-intro__versus::before, .match-intro__versus::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; } #match-intro:not([hidden]) { animation-duration: .01ms !important; animation-delay: 4.99s !important; } }

.coin-toss-overlay { position: fixed; z-index: 11000; inset: 0; display: grid; place-items: center; padding: 2rem; background: radial-gradient(circle at center, rgb(10 34 54 / 82%), rgb(2 7 15 / 96%) 68%); backdrop-filter: blur(10px); }
.coin-toss-panel { width: min(92vw, 540px); display: grid; justify-items: center; gap: .8rem; padding: 2.2rem 2rem 1.8rem; border: 1px solid #f4cb6799; border-radius: 1.4rem; background: linear-gradient(145deg, #0d2237f2, #07111ff7); box-shadow: 0 24px 70px #000d, inset 0 0 40px #4bc7ff14, 0 0 28px #f2c65c24; color: #fff; text-align: center; transform-origin: center; animation: coin-toss-panel-enter .5s cubic-bezier(.16,.84,.24,1) both; }
.coin-toss-overlay.is-closing { animation: coin-toss-overlay-away .46s ease-in both; pointer-events: none; }
.coin-toss-overlay.is-closing .coin-toss-panel { animation: coin-toss-panel-away .46s cubic-bezier(.55,0,.85,.35) both; }
.coin-toss-eyebrow { margin: 0; color: #ffc94d; font-size: .72rem; font-weight: 900; letter-spacing: .2em; }
.coin-toss-panel h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.35rem); text-transform: uppercase; text-shadow: 0 3px 0 #000, 0 0 20px #ffcb5544; }
.coin-toss-player { margin: 0 0 .35rem; color: #bcecff; font-weight: 800; }
.coin-toss-button { display: grid; justify-items: center; gap: 1rem; padding: .5rem 2rem 1rem; border: 0; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.coin-toss-button > strong { padding: .7rem 1.3rem; border: 1px solid #ffe28d; border-radius: 999px; background: linear-gradient(180deg, #ffc928, #d88700); color: #10131a; box-shadow: 0 6px 18px #0008, 0 0 16px #ffc92855; text-transform: uppercase; }
.coin-toss-button:disabled { cursor: default; }
.coin-toss-button:disabled > strong { opacity: .55; filter: grayscale(.65); }
.initiative-coin { position: relative; width: 150px; aspect-ratio: 1; display: block; transform-style: preserve-3d; filter: drop-shadow(0 18px 14px #0009) drop-shadow(0 0 13px #ffd65d77); }
.initiative-coin__face { position: absolute; inset: 0; display: grid; place-items: center; border: 7px solid #ffe29a; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff3a7, #e4a91d 46%, #865000 100%); color: #122235; font-size: 4.7rem; font-weight: 1000; text-shadow: 0 2px 0 #fff6; box-shadow: inset 0 0 0 6px #9d690e, inset 0 0 22px #fff5; backface-visibility: hidden; }
.initiative-coin__face--tails { color: #fff0b1; background: radial-gradient(circle at 34% 28%, #4bc7ff, #16618f 48%, #08253d 100%); transform: rotateY(180deg); }
.initiative-coin.is-heads { transform: rotateY(0deg); }
.initiative-coin.is-tails { transform: rotateY(180deg); }
.initiative-coin.is-flipping.is-heads { animation: coin-flip-heads 1.35s cubic-bezier(.2,.68,.25,1) both; }
.initiative-coin.is-flipping.is-tails { animation: coin-flip-tails 1.35s cubic-bezier(.2,.68,.25,1) both; }
.coin-toss-result { min-height: 2.5em; margin: .25rem 0 0; color: #d9ecf5; font-weight: 700; }
.coin-toss-result.is-decided { color: #ffd55f; font-size: 1.05rem; text-shadow: 0 0 12px #ffbf3688; }
.action-turn-banner { position: fixed; z-index: 9000; top: 78px; left: 50%; display: flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border: 1px solid #ffd55f99; border-radius: 999px; background: #071322e8; color: #fff; box-shadow: 0 8px 22px #000a, 0 0 16px #ffc92838; transform: translateX(-50%); pointer-events: none; }
.action-turn-banner span { color: #ffd55f; text-shadow: 0 0 9px #ffc928; }
@keyframes coin-flip-heads { 0% { transform: translateY(0) rotateY(0); } 46% { transform: translateY(-90px) rotateY(900deg) scale(1.14); } 100% { transform: translateY(0) rotateY(1800deg); } }
@keyframes coin-flip-tails { 0% { transform: translateY(0) rotateY(0); } 46% { transform: translateY(-90px) rotateY(990deg) scale(1.14); } 100% { transform: translateY(0) rotateY(1980deg); } }
@keyframes coin-toss-panel-enter { from { opacity: 0; transform: perspective(900px) translateZ(-360px) scale(.68); filter: blur(5px); } to { opacity: 1; transform: perspective(900px) translateZ(0) scale(1); filter: blur(0); } }
@keyframes coin-toss-overlay-away { to { opacity: 0; backdrop-filter: blur(0); } }
@keyframes coin-toss-panel-away { from { opacity: 1; transform: perspective(900px) translateZ(0) scale(1); filter: blur(0); } to { opacity: 0; transform: perspective(900px) translateZ(-420px) scale(.62); filter: blur(5px); } }

.character-card-modal { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: 4vh 4vw; background: rgb(2 7 15 / 78%); backdrop-filter: blur(8px); animation: character-preview-backdrop-in .2s ease-out both; }
.character-card-modal__root { width: min(86vw, 63vh, 500px); max-height: 90vh; display: grid; place-items: center; animation: character-preview-card-in .28s cubic-bezier(.2,.8,.25,1) both; }
.character-card-modal.is-special-preview { align-items: center; justify-items: start; padding-left: clamp(88px, calc(2.5vw + 70px), 118px); background: linear-gradient(90deg, rgb(2 7 15 / 84%) 0%, rgb(2 7 15 / 58%) 46%, rgb(2 7 15 / 24%) 100%); backdrop-filter: none; }
.character-card-modal.is-special-preview::before { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); mask-image: linear-gradient(90deg, #000 0%, #000 20%, rgb(0 0 0 / 68%) 48%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 20%, rgb(0 0 0 / 68%) 48%, transparent 100%); }
.character-card-modal.is-special-preview .character-card-modal__root { position: relative; z-index: 1; animation: none; }
.character-card-modal.is-closing { pointer-events: none; }
.special-preview-source-hidden { visibility: hidden !important; }
:is(.character-card-modal__root, #character-card-preview-root, #special-card-preview-root) .character-card { --preview-tilt-x: 0deg; --preview-tilt-y: 0deg; --preview-inspect-scale: 1; filter: drop-shadow(0 20px 34px #000c) drop-shadow(0 0 18px #65d9ff44); transform: perspective(1100px) rotateX(var(--preview-tilt-x)) rotateY(var(--preview-tilt-y)) scale(var(--preview-inspect-scale)); transform-style: preserve-3d; transition: transform .32s cubic-bezier(.2,.8,.25,1), filter .2s ease; cursor: grab; touch-action: none; user-select: none; will-change: transform; }
.character-card-modal__root .character-card { width: min(86vw, 63vh, 500px); }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card { transform: perspective(1050px) rotateY(10deg); cursor: default; touch-action: auto; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) :is(.character-card__cost, .character-card__equipment, .character-card__runes) { display: none; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__specials { bottom: 12%; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__name--special-top { position: absolute; z-index: 8; top: 7%; left: 50%; width: 78%; color: #fff; text-align: center; text-shadow: 0 2px 4px #000, 0 0 12px #000; transform: translateX(-50%); }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__body { overflow: visible; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card[data-rarity="common"] { --special-rarity-dark: #475569; --special-rarity-color: #94a3b8; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card[data-rarity="singular"] { --special-rarity-dark: #087c34; --special-rarity-color: #4ade80; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card[data-rarity="rare"] { --special-rarity-dark: #00679b; --special-rarity-color: #38bdf8; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card[data-rarity="epic"] { --special-rarity-dark: #6b21a8; --special-rarity-color: #c084fc; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card[data-rarity="guardian"] { --special-rarity-dark: #b83f08; --special-rarity-color: #fb923c; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card[data-rarity="deity"] { --special-rarity-dark: #9a6900; --special-rarity-color: #facc15; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability-wrap { position: relative; z-index: 10; display: block; overflow: visible; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability-wrap:hover { z-index: 50; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability { position: relative; z-index: 10; width: 100%; padding: .45rem 1rem; border: 1px solid var(--special-rarity-color, #fff); border-radius: .65rem; background: linear-gradient(90deg, var(--special-rarity-dark, #64748b), var(--special-rarity-color, #e8edf4)); color: #fff; box-shadow: inset 0 0 10px #ffffff55, 0 6px 16px #0008, 0 0 8px color-mix(in srgb, var(--special-rarity-color, #fff) 45%, transparent); text-shadow: 0 1px 3px #000b; text-align: left; cursor: pointer; transform-origin: left center; transition: transform .24s cubic-bezier(.2,.8,.25,1), background .2s ease, box-shadow .2s ease, filter .2s ease; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability:hover { z-index: 30; box-shadow: inset 0 0 12px #ffffff99, 0 10px 24px #000a, 0 0 18px var(--special-rarity-color, #fff); filter: brightness(1.18); transform: translateX(24px) scale(1.1); }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability:disabled { cursor: default; opacity: .72; filter: grayscale(.65) brightness(.72); }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability:disabled:hover { z-index: 10; box-shadow: inset 0 0 10px #ffffff55, 0 6px 16px #0008, 0 0 8px color-mix(in srgb, var(--special-rarity-color, #fff) 45%, transparent); filter: grayscale(.65) brightness(.72); transform: none; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability-cost { flex: 0 0 auto; min-width: 2rem; height: 2rem; margin-left: auto; display: grid; place-items: center; border: 2px solid #ff8bdc; border-radius: 50%; background: #b50078; color: #fff; font-size: 1rem; line-height: 1; text-shadow: 0 1px 3px #000; box-shadow: 0 0 8px #ff3bc899; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .special-ability-tooltip { position: absolute; z-index: 80; top: 50%; left: calc(100% + 72px); width: min(310px, 34vw); display: grid; gap: .65rem; padding: .9rem 1rem; border: 1px solid #dcecff88; border-radius: .75rem; background: linear-gradient(145deg, rgb(10 27 43 / 97%), rgb(4 10 20 / 98%)); color: #edf7ff; box-shadow: 0 14px 34px #000c, 0 0 18px color-mix(in srgb, var(--special-rarity-color, #fff) 32%, transparent); opacity: 0; font-size: .82rem; line-height: 1.45; text-align: left; text-shadow: none; translate: 8px -50%; transition: opacity .18s ease, translate .2s cubic-bezier(.2,.8,.25,1); pointer-events: none; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability-wrap:has(.character-card__ability:disabled) .special-ability-tooltip { left: calc(100% + 24px); }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .character-card__ability-wrap:hover .special-ability-tooltip { opacity: 1; translate: 0 -50%; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .special-ability-tooltip em { color: #aebfd0; font-size: .74rem; line-height: 1.35; }
:is(#special-card-preview-root, .character-card-modal__root.is-special-mode) .special-ability-tooltip__value--hp { color: #35e66b; text-shadow: 0 0 7px #19d95288; }
:is(.character-card-modal__root, #character-card-preview-root, #special-card-preview-root) .character-card.is-inspecting { --preview-inspect-scale: 1.025; filter: drop-shadow(0 24px 38px #000d) drop-shadow(0 0 24px #65d9ff66); transition: transform .06s linear, filter .16s ease; cursor: grabbing; }
:is(.character-card-modal__root, #character-card-preview-root, #special-card-preview-root) .character-card__equipment { transform-origin: center; transition: transform .2s cubic-bezier(.2,.8,.25,1), filter .2s ease; cursor: default; }
:is(.character-card-modal__root, #character-card-preview-root, #special-card-preview-root) .character-card__equipment:hover { z-index: 20; filter: drop-shadow(0 5px 9px #000b) drop-shadow(0 0 10px #65e6ff); transform: scale(1.3); }
:is(.character-card-modal__root, #character-card-preview-root, #special-card-preview-root) .character-card__rune { transform-origin: center; transition: transform .2s cubic-bezier(.2,.8,.25,1), box-shadow .2s ease; cursor: default; }
:is(.character-card-modal__root, #character-card-preview-root, #special-card-preview-root) .character-card__rune:hover { z-index: 20; box-shadow: 0 5px 10px #000a, 0 0 8px #fff, 0 0 16px #9d5cff; transform: scale(1.38); }
.character-card-modal__close { position: fixed; z-index: 1; top: 24px; right: 28px; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 1px solid #ffffff88; border-radius: 50%; background: #071322dd; color: #fff; font-size: 2rem; line-height: 1; box-shadow: 0 0 14px #65d9ff55; }
.character-card-modal__close:hover { border-color: #fff; background: #12304b; }
body.character-card-preview-open { overflow: hidden; }
body.character-card-preview-open #weapon-tooltip { z-index: 10020; }
@keyframes character-preview-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes character-preview-card-in { from { opacity: 0; transform: scale(.78) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Isolated frontal character card structure preview. */
.character-card-preview { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 1rem; padding: clamp(1rem, 3vw, 2.5rem); overflow: auto; color: #f4f0e8; background: #111827; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.character-card-preview__heading { width: min(100%, 32rem); text-align: center; }
.character-card-preview__heading h1 { margin: .25rem 0 0; font-size: clamp(1.1rem, 2vw, 1.5rem); }
:is(#character-card-preview-root, #special-card-preview-root) { width: min(100%, 36rem); display: grid; place-items: center; padding: 1rem 1.5rem 2rem; }
.character-card { --card-ink: #f8fafc; --card-unit: 100%; --card-radius: clamp(16px, 4.5cqw, 30px); position: relative; width: min(100%, 31.25rem); aspect-ratio: 5 / 6.82; container-type: inline-size; isolation: isolate; color: var(--card-ink); }
.character-card__body { --card-ability-gap: calc(clamp(.25rem, .7vw, .4rem) + .67cqw); position: absolute; z-index: 1; left: 7.625%; top: 6.5%; width: 84.75%; height: 87%; overflow: hidden; border: clamp(5px, 1.2vw, 9px) solid #08090b; border-radius: var(--card-radius); background: #333; box-shadow: inset 0 0 0 2px #5c5c5c, 0 12px 30px #0008; }
.character-card__artwork { position: absolute; inset: 0; overflow: hidden; border-radius: max(0px, calc(var(--card-radius) - clamp(5px, 1.2vw, 9px))); background: #373737; }
.character-card__artwork::after { content: ''; position: absolute; z-index: 1; inset: 43% 0 0; background: linear-gradient(to top, rgb(0 0 0 / 88%) 0%, rgb(0 0 0 / 64%) 32%, rgb(0 0 0 / 28%) 68%, transparent 100%); pointer-events: none; }
.character-card__artwork img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.character-card__frame { position: absolute; z-index: 6; inset: 2.67%; border: 0; pointer-events: none; }
.character-card__rarity { position: absolute; z-index: 8; left: 0; top: 0; width: 20%; height: 17%; display: grid; place-items: start; padding: 3% 0 0 4%; background: linear-gradient(135deg, #0088c9 0 49%, #08090b 50%); clip-path: polygon(0 0, 100% 0, 0 100%); font-size: clamp(1rem, 4vw, 2rem); line-height: 1; }
.character-card__specials { position: absolute; z-index: 7; left: 2.67%; right: 2.67%; bottom: 22%; display: grid; gap: clamp(.25rem, .8cqw, .5rem); }
.character-card__name { width: 100%; margin: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: var(--character-name-size); font-weight: 800; line-height: 1.25; text-shadow: 0 2px 3px #000, 0 0 6px #000; }
.character-card__cost { position: absolute; z-index: 10; top: 0; left: 50%; width: calc(15.2% + 2.67cqw); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #121212; border-radius: 50%; background: #b800e8; color: white; box-shadow: 0 4px 12px #0007; transform: translate(-50%, calc(-12% + 3.33cqw)); }
.character-card__cost-value { font-size: calc(clamp(1rem, 3.5vw, 1.5rem) + 2.67cqw); font-weight: 800; line-height: 1; }
.character-card__equipment { position: absolute; z-index: 9; left: var(--character-equipment-left); top: var(--character-equipment-top); width: var(--character-equipment-size); aspect-ratio: 1; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #111; filter: drop-shadow(0 3px 4px #0008); }
.character-card__equipment::before { position: absolute; inset: 2px; content: ''; clip-path: inherit; background: #f4f4f4; }
.character-card__equipment span { position: relative; z-index: 1; color: #444; font-size: clamp(.48rem, 1.4vw, .72rem); }
.character-card__runes { position: absolute; z-index: 9; left: var(--character-runes-left); top: var(--character-runes-top); display: grid; gap: clamp(.4rem, 1.5vw, .75rem); transform: translateX(-50%); }
.character-card__rune { width: calc(clamp(1.55rem, 7vw, 2.7rem) + 1.33cqw); aspect-ratio: 1; border: 1px solid #111; border-radius: 50%; background: #fafafa; box-shadow: 0 3px 7px #0007; }
.character-card__abilities { display: grid; gap: var(--card-ability-gap); }
.character-card__ability { min-height: var(--character-ability-height); display: flex; align-items: center; padding-inline: 4%; overflow: hidden; background: transparent; color: var(--card-ink); font-size: var(--character-ability-size); white-space: nowrap; }
.character-card__ability--healing { color: #62ffdc; text-shadow: 0 0 5px #36f5c5, 0 0 11px #20d9ba; }
.character-card__statuses { position: absolute; z-index: 7; left: 2.67%; right: 2.67%; top: calc(78% + var(--card-ability-gap)); height: var(--card-ability-height); display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0; overflow: hidden; background: transparent; }
.character-card__statuses:empty { display: none; }
.character-card__status-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; font-size: 24px; line-height: 1; }
.character-card__stats { position: absolute; z-index: 9; left: 17.625%; right: 17.625%; bottom: 0; display: flex; justify-content: space-around; transform: translateY(calc(-10% - 3.33cqw)); }
.character-card__stat-slot { position: relative; flex: 0 0 22%; aspect-ratio: 1; }
.character-card__stat { position: absolute; left: 50%; bottom: 0; width: calc(60% + 2cqw); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #111; border-radius: 50%; color: white; box-shadow: 0 4px 8px #0008; transform: translateX(-50%); }
.character-card__stat--hp { width: calc(60% + 5.33cqw); background: #00dc21; }
.character-card__stat--attack { background: #ed1119; }
.character-card__stat--speed { background: #f4df00; color: white; }
.character-card__stat--attack, .character-card__stat--speed { bottom: 1.67cqw; }
.character-card__stat-icon { position: absolute; z-index: 2; top: calc(-22% - .67cqw); left: 0; width: 100%; height: 42%; display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; font-size: clamp(.85rem, 2.2vw, 1.2rem); line-height: 1; }
.character-card__stat--hp .character-card__stat-icon { font-size: calc(clamp(.85rem, 2.2vw, 1.2rem) + 1.33cqw); }
.character-card__stat--speed .character-card__stat-icon { font-size: clamp(1.1rem, 3vw, 1.6rem); }
.character-card__stat-value { font-size: clamp(.8rem, 3.4vw, 1.35rem); line-height: 1; }
.character-card__stat-value--increased { color: #62ff8d; text-shadow: 0 0 7px #18d95b, 0 2px 3px #002d12; }
.character-card__stat-value--decreased { color: #ff3449; text-shadow: 0 0 7px #ff182f, 0 2px 3px #300008; }
@media (max-width: 480px) { :is(#character-card-preview-root, #special-card-preview-root) { width: 100%; padding-inline: 0; } .character-card { width: min(100%, 26rem); } }
@keyframes draw-card-enter { 0% { opacity: 0; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 70px)) scale(1.08); filter: blur(2px); } 55% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 8px)) scale(1.02); filter: blur(0); } 78% { transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 3px)) scale(1.01); } 100% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(var(--fan-y, 0px)) scale(1); } }
@keyframes initial-card-deal { 0% { opacity: 0; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 55px)) scale(.92); filter: blur(2px); } 70% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 5px)) scale(1.015); filter: blur(0); } 100% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(var(--fan-y, 0px)) scale(1); } }
@keyframes draw-card-enter-unavailable { 0% { opacity: 0; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 70px)) scale(1.06); filter: grayscale(0) brightness(1) blur(2px); } 22% { opacity: 1; } 55% { transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 4px)) scale(1.015); filter: grayscale(.55) brightness(.8) blur(0); } 100% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 34px)) scale(1); filter: grayscale(1) brightness(.62); } }
@keyframes initial-card-deal-unavailable { 0% { opacity: 0; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 180px)) scale(.88); filter: grayscale(0) brightness(1) blur(3px); } 20% { opacity: 1; } 72% { transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 42px)) scale(1.015); filter: grayscale(.58) brightness(.78) blur(0); } 100% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 34px)) scale(1); filter: grayscale(1) brightness(.62); } }
@keyframes draw-card-enter-muted { 0% { opacity: 0; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 70px)) scale(1.08); filter: grayscale(0) brightness(1) blur(2px); } 55% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 8px)) scale(1.02); filter: grayscale(.55) brightness(.8) blur(0); } 78% { transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 3px)) scale(1.01); filter: grayscale(.82) brightness(.69); } 100% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(var(--fan-y, 0px)) scale(1); filter: grayscale(1) brightness(.62); } }
@keyframes initial-card-deal-muted { 0% { opacity: 0; transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 55px)) scale(.92); filter: grayscale(0) brightness(1) blur(2px); } 38% { opacity: 1; filter: grayscale(.38) brightness(.88) blur(1px); } 70% { transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 5px)) scale(1.015); filter: grayscale(.78) brightness(.7) blur(0); } 100% { opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(var(--fan-y, 0px)) scale(1); filter: grayscale(1) brightness(.62); } }
@keyframes countdown-pop { 0% { opacity: 0; transform: scale(1.7); } 35% { opacity: 1; transform: scale(.9); } 100% { opacity: .9; transform: scale(1); } }
@keyframes phase-timer-pulse { from { box-shadow: 0 0 0 #ff405000; } to { box-shadow: 0 0 14px #ff405088; } }
@keyframes turn-switch-countdown-tick { 0% { opacity: .45; transform: scale(.82); } 55% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes turn-switch-countdown-fade { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.72); } }
@keyframes switch-ring-fade { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes confirmed-movement-enter { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(var(--confirmed-movement-shift)) scale(.82); } }
@keyframes confirmed-movement-return { 0% { opacity: 1; transform: translateY(var(--confirmed-movement-shift)) scale(.82); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes confirmed-gradient-enter { 0% { opacity: 0; transform: translateY(-100%) scale(.7); } 65% { opacity: .82; } 100% { opacity: .72; transform: translateY(0) scale(1); } }
@keyframes round-phase-converge-top { 0% { top: 5px; opacity: 1; transform: scale(1.25); } 75% { opacity: 1; } 100% { top: calc(50% - 6px); opacity: 0; transform: scale(.45); } }
@keyframes round-phase-converge-bottom { 0% { bottom: 5px; opacity: 1; transform: scale(1.25); } 75% { opacity: 1; } 100% { bottom: calc(50% - 6px); opacity: 0; transform: scale(.45); } }
@keyframes round-phase-source-flash { 0% { transform: scale(.72); box-shadow: 0 0 5px #ffffff99; } 24% { transform: scale(1.08); background: #fff; box-shadow: 0 0 8px #fff, 0 0 22px #ffffffdd, 0 0 34px #e5f2ffaa; } 100% { transform: scale(.72); box-shadow: 0 0 5px #ffffff99; } }
@keyframes round-phase-action-collapse { 0% { transform: scale(1.45); box-shadow: 0 0 7px #fff, 0 0 16px #ffffffdd, 0 0 30px #e5f2ffaa; } 24% { transform: scale(1.55); background: #fff; box-shadow: 0 0 8px #fff, 0 0 22px #ffffffdd, 0 0 34px #e5f2ffaa; } 100% { transform: scale(.72); box-shadow: 0 0 5px #ffffff99; } }
@keyframes round-phase-combat-focus { 0% { transform: scale(.85); filter: brightness(.8); } 42% { transform: scale(1.82); filter: brightness(1.8); } 100% { transform: scale(1.6); filter: brightness(1); } }
@keyframes card-drop-light-life { 0% { opacity: 0; filter: brightness(1.65); } 10% { opacity: 1; filter: brightness(1.35); } 38% { opacity: .94; filter: brightness(1.18); } 62% { opacity: .68; filter: brightness(1.08); } 82% { opacity: .28; filter: brightness(1); } 100% { opacity: 0; filter: brightness(.95); } }
@keyframes card-drop-particle-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 48% { opacity: .82; } 72% { opacity: .42; } 88% { opacity: .14; } 100% { opacity: 0; transform: translate(calc(-50% + var(--particle-x)), calc(-50% + var(--particle-y))) scale(.15); } }
@keyframes card-drop-card-glow { 0% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 12% { filter: brightness(1.1) drop-shadow(0 0 6px var(--drop-rarity-color, #fff)) drop-shadow(0 0 22px var(--drop-rarity-color, #fff)) drop-shadow(0 0 38px var(--drop-rarity-color, #fff)); } 40% { filter: brightness(1.07) drop-shadow(0 0 5px var(--drop-rarity-color, #fff)) drop-shadow(0 0 18px var(--drop-rarity-color, #fff)); } 65% { filter: brightness(1.04) drop-shadow(0 0 3px var(--drop-rarity-color, #fff)) drop-shadow(0 0 10px var(--drop-rarity-color, #fff)); } 84% { filter: brightness(1.015) drop-shadow(0 0 2px var(--drop-rarity-color, #fff)); } 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } }
@keyframes card-placement-white-glow { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 18% { filter: brightness(1.12) drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px #ffffffbb) drop-shadow(0 0 32px #ffffff66); } 58% { filter: brightness(1.07) drop-shadow(0 0 5px #ffffffe0) drop-shadow(0 0 13px #ffffff88) drop-shadow(0 0 22px #ffffff44); } }
@keyframes match-round-glow { 0% { opacity: .55; transform: scale(.94); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; } 36% { opacity: 1; transform: scale(1.06); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 0 0 7px #fff, 0 0 18px #ffd76a, 0 0 34px #ffae00bb; } 100% { opacity: 1; transform: scale(1); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; } }
@keyframes combat-lane-indicator-enter { from { opacity: .15; stroke-width: 1; } to { opacity: .82; stroke-width: 3; } }
@keyframes card-damage-shake { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-10px) rotate(-1deg); } 36% { transform: translateX(9px) rotate(1deg); } 54% { transform: translateX(-7px); } 72% { transform: translateX(5px); } 88% { transform: translateX(-2px); } }
@keyframes card-damage-overlay { 0%, 100% { opacity: 0; } 18% { opacity: .9; } 58% { opacity: .68; } }
@keyframes card-lunge { 0%, 100% { transform: translateY(0) scale(1); } 42%, 58% { transform: translateY(var(--lunge-y)) scale(1.06); } }
@keyframes card-reveal-compress { from { transform: var(--card-content-transform, none) translateX(375px) scaleX(1) translateX(-375px); } to { transform: var(--card-content-transform, none) translateX(375px) scaleX(0) translateX(-375px); } }
@keyframes card-reveal-expand { from { transform: var(--card-content-transform, none) translateX(375px) scaleX(0) translateX(-375px); } to { transform: var(--card-content-transform, none) translateX(375px) scaleX(1) translateX(-375px); } }
@keyframes card-death-collapse { 0% { opacity: 1; transform: scale(1); filter: brightness(1); } 30% { opacity: 1; transform: scale(1.06); filter: brightness(1.5); } 100% { opacity: 0; transform: scale(0); filter: brightness(.4) blur(3px); } }
@keyframes hacedor-panel-hit { 0%, 100% { background: transparent; box-shadow: none; } 20% { background: #a916163d; box-shadow: inset 0 0 28px #ff33335c; } }
@keyframes player1-hud-damage-shake { 0%, 100% { transform: translateX(0); } 16% { transform: translateX(var(--hacedor-shake-negative, -4px)); } 32% { transform: translateX(var(--hacedor-shake-positive, 4px)); } 48% { transform: translateX(var(--hacedor-shake-negative-medium, -3px)); } 64% { transform: translateX(var(--hacedor-shake-positive-medium, 2px)); } 80% { transform: translateX(var(--hacedor-shake-negative-soft, -1px)); } }
@keyframes hacedor-hp-bar-glow { 0%, 100% { box-shadow: 0 5px 14px #0009; } 20% { box-shadow: 0 5px 14px #0009, 0 0 10px #ff2020, 0 0 24px #ff2020cc; } 55% { box-shadow: 0 5px 14px #0009, 0 0 6px #ff2020aa, 0 0 15px #ff202066; } }
@keyframes hacedor-shield-charge-fade { 0% { opacity: 1; filter: brightness(1); visibility: visible; } 45% { opacity: .72; filter: brightness(1.55); } 99% { opacity: 0; filter: brightness(.7); visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes hacedor-shield-block { 0%, 100% { filter: none; } 20% { filter: brightness(1.45) drop-shadow(0 0 14px #5ce5ff); } 50% { filter: brightness(1.1) drop-shadow(0 0 7px #5ce5ffaa); } }
@keyframes hacedor-damage-zone { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.82); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.05); box-shadow: 0 0 22px #ff303099; } 55% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px) scale(.96); box-shadow: 0 0 4px transparent; } }
@keyframes hacedor-hud-delta-pop { 0% { opacity: 0; transform: translateY(-50%) translateX(-7px) scale(.75); } 22%, 62% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } 100% { opacity: 0; transform: translateY(-50%) translateX(7px) scale(.92); } }
@keyframes hacedor-hud-delta-pop-reversed { 0% { opacity: 0; transform: translateY(-50%) translateX(7px) scale(.75); } 22%, 62% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); } 100% { opacity: 0; transform: translateY(-50%) translateX(-7px) scale(.92); } }
@keyframes movement-value-increase { 0%, 100% { transform: scale(1); filter: brightness(1); text-shadow: 0 3px 3px #000, 0 0 5px #000; } 38% { transform: scale(1.42); filter: brightness(1.65); text-shadow: 0 0 4px #fff, 0 0 12px #fff, 0 0 22px #fff; } 68% { transform: scale(1.18); filter: brightness(1.2); text-shadow: 0 0 3px #fff, 0 0 9px #ffffffaa, 0 2px 3px #000; } }
@keyframes movement-recharge-enter { 0% { opacity: 1; transform: translateX(-120px) scale(.5); filter: brightness(.7); text-shadow: 0 0 2px #fff4; } 40% { opacity: 1; transform: translateX(-36px) scale(1.3); filter: brightness(1.8); text-shadow: 0 0 5px #fff, 0 0 14px #fff, 0 0 28px #ffffffcc; } 72% { transform: translateX(3px) scale(1.1); filter: brightness(1.25); text-shadow: 0 0 4px #fff, 0 0 10px #ffffffaa, 0 2px 3px #000; } 100% { opacity: 1; transform: translateX(0) scale(1); filter: brightness(1); text-shadow: 0 3px 3px #000, 0 0 4px #000, 0 0 9px #ffffff88; } }
@keyframes energy-recharge-grow { 0% { opacity: .35; transform: scale(.55); filter: brightness(.8); } 45% { opacity: 1; transform: scale(1.65); filter: brightness(1.75); text-shadow: 0 0 5px #fff, 0 0 13px #ff3bc8, 0 0 24px #ff00b8cc; } 72% { transform: scale(1.18); filter: brightness(1.25); } 100% { opacity: 1; transform: scale(1); filter: brightness(1); text-shadow: 0 3px 3px #000, 0 0 4px #000, 0 0 9px #ff00b899; } }
@keyframes movement-spent-pop { 0% { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(.72); } 24%, 62% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.16); } 100% { opacity: 0; transform: translateX(-50%) translateY(7px) scale(.92); } }
@keyframes weapon-tooltip-in { from { opacity: 0; transform: translateY(5px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes damage-number-float { 0% { opacity: 0; transform: translate(0, 12px) scale(.7); } 25% { opacity: 1; transform: translate(12px, 0) scale(1.15); } 100% { opacity: 0; transform: translate(24px, -24px) scale(1); } }
@keyframes weapon-style-number-float { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.72); } 25%, 60% { opacity: 1; transform: translate(-50%, 0) scale(1.12); } 100% { opacity: 0; transform: translate(-50%, -22px) scale(.96); } }
@keyframes card-healing-overlay { 0%, 100% { opacity: 0; } 18% { opacity: .86; } 58% { opacity: .62; } }
@keyframes card-healing-under-glow { 0%, 100% { opacity: 0; transform: scale(.94); } 18% { opacity: .95; transform: scale(1.02); } 58% { opacity: .62; transform: scale(1.08); } }
@keyframes card-healing-particle-rise { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.65); } 18% { opacity: .96; transform: translate(-50%, 0) scale(1); } 68% { opacity: .72; } 100% { opacity: 0; transform: translate(calc(-50% + var(--heal-drift)), -42px) scale(.82); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 900px) {
  .topbar { align-items: flex-start; }
  .game-shell { height: auto; min-height: calc(100dvh - 62px); grid-template-rows: 25px 158px minmax(300px, 45vh) 195px; }
  .hand-panel { width: 92%; }
  .board { padding: 0; }
  .log-panel { width: min(230px, 30%); }
  .player-info { width: min(680px, 86%); }
}
@media (max-width: 600px) {
  .topbar { flex-direction: column; gap: .4rem; }
  .topbar > div:first-child { flex-wrap: wrap; }
  .controls { gap: .35rem; }
  .game-shell { grid-template-rows: 28px 136px minmax(310px, 48vh) 184px; padding-inline: .3rem; }
  .hand-panel { width: 100%; padding-inline: .2rem; }
  .hand { justify-content: flex-start; overflow-x: auto; }
  .player2-zone .hand { transform: translateY(-34px); }
  .player1-zone .hand { transform: translateY(20px); }
  .hand-card { flex: 0 0 82px; width: 82px; height: auto; margin-inline: var(--hand-card-margin, -8px); }
  .player-info { width: 96%; min-height: 34px; gap: .45rem; padding: .3rem; font-size: .62rem; }
  .player-info strong { font-size: .75rem; }
  .board { min-height: 626px; padding: 0; }
  .lane { gap: .2rem; }
  .slot { padding: .25rem; border-width: 1px; }
  .log-panel { top: .35rem; right: .35rem; width: 42%; }
  .log-toggle { grid-template-columns: auto auto; }
  .game-log-latest { display: none; }
  .log-drawer { max-height: 30vh; }
  .active-hand-controls { position: relative; top: auto; right: auto; left: auto; bottom: auto; width: 100%; justify-content: space-around; gap: .2rem; padding: .3rem .4rem; border: 0; border-top: 1px solid #28445f; border-radius: 0; background: transparent; box-shadow: none; }
  .active-hand-controls { transform: none; }
  .active-hand-controls .muted { max-width: 65%; }
}

/* Temporary isolated view for board geometry work. Remove the body class to restore the full interface. */
body.board-design-mode { min-height: 100dvh; overflow: hidden; }
body.board-design-mode .topbar,
body.board-design-mode .game-shell > :not(.board-panel),
body.board-design-mode .board-panel > :not(#board),
body.board-design-mode #weapon-tooltip { display: none !important; }
body.board-design-mode .game-shell { width: 100vw; height: 100dvh; min-height: 0; margin: 0; padding: var(--player-ui-reserved-space) 0; grid-template-rows: minmax(0, 1fr); gap: 0; }
body.board-design-mode .board-panel { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
body.board-design-mode .board { width: 1674px; min-width: 1674px; max-width: 1674px; height: 626px; min-height: 626px; max-height: 626px; aspect-ratio: auto; display: block; padding: 0; }
body.board-design-mode .board .lane { position: absolute; z-index: 2; top: 0; left: calc(8% + var(--lane-index) * 21%); width: 21%; height: 100%; display: grid !important; grid-template-rows: 0 48fr 52fr; gap: 0; padding: 0; pointer-events: none; }
body.board-design-mode .board .lane-label { display: none; }
body.board-design-mode .board .slot:has(.empty) { opacity: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; pointer-events: auto; }
body.board-design-mode .board .slot:not(:has(.empty)) { width: 100%; max-width: 100%; height: 100%; aspect-ratio: auto; justify-self: stretch; padding: clamp(.35rem, 1vw, .8rem); border-radius: 0; transform: none; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); pointer-events: auto; }
body.board-card-review-mode .game-shell > .player-zone { display: contents !important; }
body.board-card-review-mode .player-info,
body.board-card-review-mode .active-hand-controls { display: none !important; }
body.board-card-review-mode .hand-panel { position: fixed; z-index: 30; left: 50%; width: min(88vw, 1000px); height: 140px; padding: 0 .8rem; transform: translateX(-50%); }
body.board-card-review-mode .player2-hand-panel { top: 0; }
body.board-card-review-mode .player1-hand-panel { top: auto; bottom: 0; }
body.board-card-review-mode .player-zone .hand { transform: none; }
body.board-card-review-mode .hand-card { height: 112px; }
body.player1-hand-preview .player1-hand-panel { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; width: 100%; height: 0; padding: 0; overflow: visible; }
body.player1-hand-preview #hand-player1 { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 0; min-height: 0; flex: none; align-items: center; justify-content: center; overflow: visible; padding: 0 1rem; perspective: none; transform: translateY(-40px) scale(1.2); transform-origin: center bottom; transform-style: flat; }
body.player1-hand-preview #hand-player1 .hand-card { flex: 0 0 clamp(88px, 11vw, 150px); width: clamp(88px, 11vw, 150px); height: auto; aspect-ratio: 750 / 1050; margin-inline: var(--hand-card-margin, clamp(-14px, -1vw, -7px)); }
body.player1-hand-preview #hand-player1 .hand-card { transform: rotate(var(--fan-angle, 0deg)) translateY(var(--fan-y, 0px)); }
body.player1-hand-preview #hand-player1 :is(.hand-card:hover:not(:disabled), .hand-card.selected, .hand-card.cursor-over) { z-index: calc(var(--hand-order, 0) + 1); transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) - 34px)) scale(1.2); }
body.player1-hand-preview #hand-player1 :is(.hand-card:hover:not(:disabled), .hand-card.selected, .hand-card.cursor-over) ~ .hand-card { translate: var(--hover-shift-distance, 0px) 0; }
body.player1-hand-preview #hand-player1 .hand-card:has(~ :is(.hand-card:hover:not(:disabled), .hand-card.selected, .hand-card.cursor-over)) { translate: calc(-1 * var(--hover-shift-distance, 0px)) 0; }
body.player1-hand-preview #hand-player1 .hand-card.selected { outline: 2px solid #6ac7ff; }
body.player1-hand-preview #hand-player1 .hand-card.dragging { z-index: 1000; opacity: 1; transform: rotate(var(--fan-angle, 0deg)) translateY(var(--fan-y, 0px)) scale(1.2); }
body.player1-hand-preview #hand-player1 .hand-card.phase-unavailable:not(.dragging) { transform: rotate(var(--fan-angle, 0deg)) translateY(calc(var(--fan-y, 0px) + 34px)); filter: grayscale(1) brightness(.62); }

/* Editor aislado para la vista previa del Hacedor. */
.hacedor-modal { position: fixed; z-index: 12500; inset: 0; display: grid; place-items: center; overflow: auto; padding: 2vh 2vw; background: #02060bdc; backdrop-filter: blur(8px); }
#hacedor-modal[hidden] { display: none; }
.hacedor-modal[data-mode="profile"] .hacedor-customizer { width: min(1500px, 96vw); min-height: 0; max-height: 96vh; overflow: auto; padding: 1rem clamp(.8rem, 2vw, 2rem); border: 1px solid #d8ae6340; box-shadow: 0 28px 100px #000c; }
.hacedor-modal[data-mode="profile"] .hacedor-customizer__topbar { margin-bottom: .75rem; }
.hacedor-modal[data-mode="profile"] .hacedor-customizer__layout { min-height: min(760px, calc(90vh - 90px)); }
.hacedor-modal[data-mode="profile"] .hacedor-stage { min-height: 0; }
.hacedor-modal[data-mode="profile"] .hacedor-stage__portrait { width: min(78%, 430px); }
.hacedor-modal-open { overflow: hidden; }
.hacedor-customizer { --maker-accent: #d8ae63; min-height: 100dvh; padding: 1.4rem clamp(1rem, 4vw, 4.5rem) 2.5rem; color: #f3efe6; background: radial-gradient(ellipse at 20% 42%, #17202b 0, #0d121a 39%, #090c12 80%); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.hacedor-customizer__topbar { width: min(100%, 1380px); margin: 0 auto 1.4rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hacedor-customizer__topbar > div { text-align: center; }
.hacedor-customizer__topbar .eyebrow, .hacedor-controls__heading .eyebrow { margin: 0 0 .25rem; color: #a39375; font-size: .62rem; font-weight: 800; letter-spacing: .22em; }
.hacedor-customizer__topbar h1 { margin: 0; color: #f4ead5; font-family: Georgia, serif; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 500; letter-spacing: .07em; }
.hacedor-customizer__back, .hacedor-customizer__reset { width: fit-content; border: 1px solid #ffffff20; border-radius: 3px; background: #ffffff08; color: #d4d0c8; padding: .65rem .9rem; font: inherit; font-size: .74rem; text-decoration: none; cursor: pointer; transition: .2s; }
.hacedor-customizer__back:hover, .hacedor-customizer__reset:hover { border-color: #d8ae6380; color: #ffe3a8; }
.hacedor-customizer__reset { justify-self: end; }
.hacedor-customizer__layout { width: min(100%, 1380px); min-height: min(780px, calc(100dvh - 100px)); margin: auto; display: grid; grid-template-columns: minmax(340px, 1.08fr) minmax(390px, .92fr); border: 1px solid #ffffff16; background: linear-gradient(115deg, #111821aa, #10141b); box-shadow: 0 24px 80px #0008; }
.hacedor-stage { min-height: 640px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-right: 1px solid #ffffff13; background: radial-gradient(ellipse at 51% 46%, #253142 0, #17202b 33%, #101720 68%, #0d1218 100%); }
.hacedor-stage::before { position: absolute; inset: 8% 12%; content: ''; border: 1px solid #e3c17d19; clip-path: polygon(0 7%, 7% 0, 93% 0, 100% 7%, 100% 93%, 93% 100%, 7% 100%, 0 93%); pointer-events: none; }
.hacedor-stage__caption { position: absolute; z-index: 1; top: 1.5rem; left: 1.6rem; right: 1.6rem; display: flex; align-items: center; gap: .55rem; color: #dac99f; font-size: .58rem; font-weight: 850; letter-spacing: .19em; }
.hacedor-stage__caption span:last-child { margin-left: auto; color: #78818b; font-size: .54rem; }
.hacedor-stage__dot, .hacedor-status i { width: 6px; height: 6px; border-radius: 50%; background: #65e2bb; box-shadow: 0 0 9px #65e2bb; }
.hacedor-stage__portrait { position: relative; width: min(80%, 490px); margin-top: 1.2rem; aspect-ratio: 5 / 6; display: grid; place-items: center; }
.hacedor-stage__portrait::after { position: absolute; z-index: 0; right: 8%; bottom: 2%; left: 8%; height: 8%; content: ''; border-radius: 50%; background: #06090d; filter: blur(18px); }
#hacedor-canvas { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 25px #0009); }
.hacedor-stage__hint { position: absolute; bottom: 1.3rem; margin: 0; color: #747e8a; font-size: .67rem; letter-spacing: .03em; }
.hacedor-controls { padding: clamp(1.4rem, 3vw, 2.7rem) clamp(1.3rem, 3.2vw, 3rem) 1.2rem; }
.hacedor-controls__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1.35rem; border-bottom: 1px solid #ffffff18; }
.hacedor-controls__heading h2 { margin: 0; color: #f0e8da; font-family: Georgia, serif; font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 500; }
.hacedor-status { display: flex; align-items: center; gap: .45rem; padding-bottom: .3rem; color: #94a49d; font-size: .5rem; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.hacedor-status i { width: 5px; height: 5px; }
.customizer-group { padding: 1.35rem 0; border-bottom: 1px solid #ffffff18; }
.customizer-group__title, .customizer-group__title > div { display: flex; align-items: center; }
.customizer-group__title { justify-content: space-between; margin-bottom: .95rem; }
.customizer-group__title > div { gap: .65rem; }
.customizer-step { color: #cfaa69; font-family: Georgia, serif; font-size: .8rem; }
.customizer-group__title h3 { margin: 0; color: #f1eadf; font-family: Georgia, serif; font-size: 1.04rem; font-weight: 500; }
.customizer-group__note { color: #707986; font-size: .49rem; font-weight: 800; letter-spacing: .13em; }
.horn-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.horn-choice { min-width: 0; position: relative; height: 99px; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: .15rem .4rem .55rem; overflow: hidden; border: 1px solid #ffffff1c; border-radius: 2px; background: linear-gradient(145deg, #202833, #151b24); color: #8e98a3; cursor: pointer; transition: .2s; }
.horn-choice:hover { border-color: #cfaa6966; color: #ddc28e; }
.horn-choice.is-selected { border-color: #d3ac68; background: linear-gradient(145deg, #30291e, #1b1d20); color: #f0d49c; box-shadow: inset 0 0 18px #d3ac6810, 0 0 0 1px #d3ac6819; }
.horn-choice b { font-size: .54rem; letter-spacing: .15em; }
.horn-choice small { position: absolute; top: .42rem; right: .48rem; color: #727c87; font-size: .49rem; }
.horn-choice.is-selected small { color: #d3ac68; }
.horn-choice__art { width: 100%; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: 130px 156px; filter: brightness(1.55) sepia(.18); }
.horn-choice__art--none { display: grid; place-items: center; color: #8a929b; font: 300 1.8rem Georgia, serif; filter: none; }
.horn-choice__art--none::before { content: '—'; }
.galaxy-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.galaxy-choice { min-width: 0; display: grid; grid-template-rows: 70px auto; gap: .45rem; padding: .35rem; border: 1px solid #ffffff1c; border-radius: 2px; background: linear-gradient(145deg, #202833, #151b24); color: #8e98a3; cursor: pointer; transition: .2s; }
.galaxy-choice:hover { border-color: #cfaa6966; color: #ddc28e; }
.galaxy-choice.is-selected { border-color: #d3ac68; background: linear-gradient(145deg, #30291e, #1b1d20); color: #f0d49c; box-shadow: inset 0 0 18px #d3ac6810, 0 0 0 1px #d3ac6819; }
.galaxy-choice__swatch { display: block; background-position: center; background-size: cover; }
.galaxy-choice__swatch--one { background-image: url('../../assets/hacedores/galaxy_1.png'); }
.galaxy-choice__swatch--two { background-image: url('../../assets/hacedores/galaxy_2.png'); }
.galaxy-choice b { font-size: .53rem; letter-spacing: .14em; }
.toggle-row, .color-control { min-height: 51px; display: flex; align-items: center; gap: .7rem; }
.toggle-row { position: relative; padding: .35rem .65rem; border: 1px solid #ffffff16; background: #ffffff06; cursor: pointer; }
.toggle-row__icon, .color-control__symbol { width: 29px; height: 29px; display: grid; flex: 0 0 29px; place-items: center; border: 1px solid #bd936f47; color: #d6b58d; font-size: 1rem; }
.toggle-row > span:nth-of-type(2), .color-control > span:nth-child(2) { display: grid; gap: .15rem; }
.toggle-row b, .color-control b { color: #e6dfd4; font-size: .72rem; font-weight: 650; }
.toggle-row small, .color-control small { color: #7f8993; font-size: .57rem; }
.toggle-row input { position: absolute; right: 3.3rem; width: 1px; height: 1px; opacity: 0; }
.toggle-switch { width: 31px; height: 17px; margin-left: auto; border: 1px solid #69737c; border-radius: 99px; background: #262c33; transition: .2s; }
.toggle-switch::after { width: 11px; height: 11px; display: block; margin: 2px; border-radius: 50%; content: ''; background: #929da5; transition: .2s; }
.toggle-row input:checked + .toggle-switch { border-color: #d2ad70; background: #846839; }
.toggle-row input:checked + .toggle-switch::after { transform: translateX(13px); background: #fff0c6; }
.toggle-row input:focus-visible + .toggle-switch { outline: 2px solid white; outline-offset: 3px; }
.color-control { min-height: 47px; border-bottom: 1px solid #ffffff0b; }
.color-control__symbol { border: 0; color: #c0a773; }
.color-control > span:nth-child(2) { flex: 1; }
.color-control input[type="color"] { width: 30px; height: 26px; padding: 2px; border: 1px solid #ffffff35; border-radius: 2px; background: #171c23; cursor: pointer; }
.color-control input[type="range"] { width: clamp(70px, 10vw, 120px); accent-color: #d3ac68; cursor: pointer; }
.color-value { width: 57px; color: #a2a8ae; font: 600 .57rem ui-monospace, monospace; text-align: right; }
.customizer-footer { display: flex; justify-content: center; gap: .75rem; padding-top: 1.1rem; color: #85795f; font-size: .49rem; font-weight: 800; letter-spacing: .2em; }
.customizer-footer span { color: #d3ac68; }
@media (max-width: 850px) { .hacedor-customizer__layout { grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); } .hacedor-stage { min-height: 610px; } }
@media (max-width: 650px) { .hacedor-customizer { padding: .8rem .65rem 1.5rem; } .hacedor-customizer__topbar { grid-template-columns: 1fr auto; margin-bottom: .8rem; } .hacedor-customizer__topbar > div { grid-column: 1 / -1; grid-row: 1; margin-bottom: .7rem; } .hacedor-customizer__back { grid-column: 1; grid-row: 2; } .hacedor-customizer__reset { grid-column: 2; grid-row: 2; } .hacedor-customizer__layout { display: flex; flex-direction: column; } .hacedor-stage { min-height: 0; height: min(95vw, 500px); border-right: 0; border-bottom: 1px solid #ffffff13; } .hacedor-stage__caption { top: 1rem; left: 1rem; right: 1rem; } .hacedor-stage__portrait { width: min(70%, 330px); height: calc(100% - 75px); margin-top: .7rem; } .hacedor-stage__hint { bottom: .6rem; font-size: .58rem; } .hacedor-controls { padding: 1.2rem 1rem; } }
body.player1-hand-preview #active-hand-controls { bottom: auto; }

/* Menú principal: accesos de juego a la izquierda y cuenta en las esquinas inferiores. */
.main-menu__panel { display: block; padding: clamp(1.5rem, 5vh, 4rem) clamp(1rem, 4.2vw, 4rem); }
.main-menu__panel > .main-menu__eyebrow { position: absolute; left: clamp(1rem, 4.2vw, 4rem); }
.main-menu__panel > .main-menu__eyebrow { top: clamp(1.5rem, 7vh, 4rem); }
.main-menu__brand { position: absolute; top: clamp(2.4rem, 11vh, 6rem); left: clamp(1rem, 4.2vw, 4rem); width: clamp(16rem, 42vw, 560px); max-width: calc(100vw - 2rem); display: grid; justify-items: center; gap: .65rem; }
.main-menu__brand h1 { position: static; top: auto; left: auto; width: 100%; margin: 0; }
.main-menu__options { position: absolute; left: clamp(1rem, 4.2vw, 4rem); bottom: clamp(6.6rem, 15vh, 9rem); width: min(38vw, 530px); min-width: 330px; grid-template-columns: 1fr 1fr; }
.main-menu .preflight-panel, .main-menu .lan-lobby { position: absolute; top: 50%; left: 50%; width: min(92vw, 530px); max-height: 86vh; overflow: auto; transform: translate(-50%, -50%); }
.main-menu-option--library { grid-column: 1 / -1; }
.main-menu__build { position: absolute; top: 1rem; right: 1rem; margin: 0; }
.main-menu h1 .main-menu__logo { display: block; width: 100%; height: auto; object-fit: contain; }
.account-toggle { position: absolute; right: clamp(1rem, 3.5vw, 3rem); bottom: clamp(1rem, 4vh, 2.5rem); width: min(28vw, 315px); min-height: 82px; grid-template-columns: 54px 1fr; gap: .65rem; padding: .6rem .85rem; }
.account-toggle canvas { width: 50px; height: 62px; }
.account-toggle__hint { display: none; }
.profile-actions { display: none; }
.account-panel__actions { width: min(100%, 650px); display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
#account-close { width: min(100%, 650px); margin: .25rem 0; padding: .65rem; border: 1px solid #3b6d88; border-radius: .5rem; background: #24384b; color: #fff; font: inherit; cursor: pointer; }
#logout-button { position: absolute; z-index: 2; left: clamp(1rem, 4.2vw, 4rem); bottom: clamp(1rem, 4vh, 2.5rem); min-width: 150px; padding: .65rem 1rem; border: 1px solid #885666; border-radius: .5rem; background: #391927; color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
.main-menu-settings-button { position: absolute; z-index: 3; top: clamp(2.8rem, 7vh, 4rem); right: clamp(1rem, 3.5vw, 3rem); padding: .7rem 1rem; border: 1px solid #b78b43; border-radius: .55rem; background: rgb(32 25 16 / 72%); color: #f7d98e; font: 500 .82rem var(--font-primary); cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.main-menu-settings-button:hover { border-color: #f4d17c; background: rgb(77 54 22 / 86%); transform: translateY(-2px); }
.main-menu-settings { position: absolute; z-index: 10; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: clamp(2rem, 7vh, 5rem); padding: clamp(1.5rem, 5vh, 4rem) clamp(1rem, 6vw, 6rem); overflow: auto; background: linear-gradient(145deg, rgb(4 15 29 / 96%), rgb(5 23 38 / 92%)); backdrop-filter: blur(16px); animation: main-menu-panel-in .35s ease both; }
.main-menu-settings[hidden] { display: none; }
.main-menu-settings__header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.main-menu-settings__header .pause-back { justify-self: start; }
.main-menu-settings__header .pause-panel__eyebrow { grid-column: 2; grid-row: 1; }
.main-menu-settings__header h2 { grid-column: 1 / -1; grid-row: 2; margin: 0; color: #fff; font: 700 clamp(2.4rem, 6vw, 4.5rem) var(--font-primary); letter-spacing: -.04em; text-align: center; text-shadow: 0 0 28px rgb(75 209 255 / 26%); }
.main-menu-settings__controls { width: min(100%, 1100px); align-self: center; justify-self: center; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin: 0; }
.main-menu-settings__controls label { min-height: 150px; align-content: center; gap: 1.5rem; padding: clamp(1.2rem, 3vw, 2.2rem); border-color: #39708c; background: linear-gradient(145deg, rgb(13 43 63 / 82%), rgb(5 17 30 / 88%)); box-shadow: inset 0 0 32px rgb(52 204 255 / 5%), 0 18px 44px #0005; }
.main-menu-settings__controls label > span { font-size: clamp(.9rem, 1.5vw, 1.08rem); }
.main-menu-settings__controls output { font-size: .92rem; }
.main-menu-settings__controls input[type="range"] { accent-color: #45d7fa; }
@media (max-width: 650px) {
  .main-menu__options { width: calc(100% - 2rem); min-width: 0; bottom: 8.5rem; }
  .main-menu-option { min-height: 70px; padding: .7rem; grid-template-columns: 38px minmax(0, 1fr) auto; gap: .45rem; }
  .main-menu-option__icon { width: 36px; }
  .main-menu-option__copy small { display: none; }
  .account-toggle { right: 1rem; bottom: 1rem; width: 47%; min-height: 56px; grid-template-columns: 34px 1fr; font-size: .8rem; }
  .account-toggle canvas { width: 32px; height: 42px; }
  #logout-button { left: 1rem; bottom: 1rem; min-width: 0; width: 43%; padding: .6rem .4rem; font-size: .8rem; }
  .main-menu-settings-button { top: 3.3rem; right: 1rem; }
  .main-menu-settings { gap: 1.5rem; padding: 1.2rem; }
  .main-menu-settings__header { grid-template-columns: 1fr auto; }
  .main-menu-settings__header .pause-panel__eyebrow { grid-column: 2; }
  .main-menu-settings__header h2 { grid-column: 1 / -1; grid-row: 2; }
  .main-menu-settings__controls { grid-template-columns: 1fr; gap: .7rem; }
  .main-menu-settings__controls label { min-height: 0; gap: .9rem; padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .menu-background-video { display: none; } }
@media (prefers-reduced-motion: reduce) { .login-transition, .login-transition__spinner { transition-duration: .01ms; animation-duration: .01ms; animation-iteration-count: 1; } }
/* Deja visible el fondo animado bajo los controles principales y el perfil. */
.main-menu-option { background: linear-gradient(115deg, rgb(16 45 69 / 76%), rgb(8 21 34 / 76%)); }
.account-toggle { background: linear-gradient(115deg, rgb(16 45 69 / 74%), rgb(8 21 34 / 74%)); }
#logout-button { background: rgb(57 25 39 / 78%); }
.account-panel { background: linear-gradient(145deg, rgb(7 20 37 / 70%), rgb(2 7 18 / 78%)); }
.profile-identity-preview { background: rgb(4 13 24 / 78%); }
#profile-save, #profile-edit-hacedor { background: rgb(11 84 119 / 78%); }
#account-close { background: rgb(36 56 75 / 78%); }
.preflight-actions button, .lan-room-created button, .lan-available-rooms button,
.lan-lobby__actions button { background: linear-gradient(rgb(19 155 193 / 78%), rgb(8 100 134 / 78%)); }
.account-toggle { overflow: visible; grid-template-columns: 1fr; padding-right: 124px; padding-left: .85rem; }
.account-toggle canvas { position: absolute; z-index: 1; right: 5px; bottom: 1px; left: auto; width: 118px; height: 142px; object-fit: contain; transform: scaleX(-1); pointer-events: none; }
.account-toggle__identity { position: relative; z-index: 0; justify-self: start; text-align: left; }
@media (max-width: 650px) {
  .account-toggle { min-height: 62px; padding-right: 91px; padding-left: .65rem; }
  .account-toggle canvas { right: 6px; bottom: 1px; left: auto; width: 88px; height: 106px; }
}

/* Tipografía oficial para autenticación y menús generales; el wordmark y el juego conservan su estilo. */
.auth-screen { font-family: var(--font-secondary); }
.auth-card h1 { font-family: var(--font-primary); font-weight: 700; }
.auth-intro, .auth-message, .auth-form small { font-family: var(--font-secondary); font-weight: 400; }
.auth-form label { font-family: var(--font-secondary); font-weight: 500; }
.auth-form button, #logout-button, .main-menu-option, .profile-actions__panel > button,
#profile-save, #profile-edit-hacedor, #account-close, .preflight-actions button,
.lan-lobby__actions button, .lan-room-created button, .lan-available-rooms button {
  font-family: var(--font-primary);
  font-weight: 500;
}
.main-menu__eyebrow { font-family: var(--font-secondary); font-weight: 500; }
.main-menu__subtitle { font-family: var(--font-primary); font-size: .78rem; font-weight: 300; letter-spacing: .28em; white-space: nowrap; }
.main-menu__subtitle { position: static; width: 100%; margin: 0; text-align: center; font-size: .78rem; font-weight: 300; letter-spacing: .22em; white-space: nowrap; }
.main-menu__subtitle-accessible { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.main-menu__subtitle-tracking { width: 100%; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0; }
.main-menu__subtitle-space { flex: 0 0 .8em; }
.main-menu-option__copy strong { font-family: var(--font-primary); font-weight: 500; }
.main-menu-option__copy small { font-family: var(--font-secondary); font-weight: 400; }
.account-toggle__identity strong { font-family: var(--font-secondary); font-weight: 600; }
.account-toggle__identity small, .account-toggle__hint { font-family: var(--font-secondary); font-weight: 400; }
.account-panel h2, .profile-actions__panel h2, .pause-panel h2 { font-family: var(--font-primary); font-weight: 700; }
.lan-lobby h2, .preflight-panel h2 { font-family: var(--font-primary); font-weight: 600; }
.account-panel > label, .account-panel > p, .profile-identity-preview,
.lan-lobby > p, .preflight-panel > p, .lan-lobby__actions label,
.preflight-player label, .lan-deck-picker, .pause-panel__notice,
.pause-panel__view > small, .pause-audio-settings label { font-family: var(--font-secondary); }
.pause-action, .pause-back { font-family: var(--font-primary); font-weight: 500; }
.pause-audio-settings label > span { font-weight: 500; }
.menu-subview {
  position: fixed;
  inset: 0;
  z-index: 14000;
  background: transparent;
}

.menu-subview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}