@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');
:root{color-scheme:dark;--ink:#f4efdb;--muted:#a0b1b3;--edge:#3b5860;--aqua:#99e1cb}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 50% 38%,#253e48 0,#101d26 56%,#0c141e 100%);font:15px/1.35 'DM Sans',sans-serif}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #9fe8cc;outline-offset:3px}
#shell{width:100%;min-height:calc(100vh - 46px)}
#notice:not([hidden]){position:fixed;z-index:999;left:50%;top:53px;transform:translateX(-50%);background:#4d272c;border:1px solid #ef9ca5;color:white;padding:10px 20px;box-shadow:0 9px 40px #0008;border-radius:5px}
#game{width:100%;min-width:980px}
.duel-table{height:calc(100vh - 52px);min-height:740px;display:grid;grid-template-rows:59px minmax(145px,1fr) minmax(130px,.8fr) minmax(145px,1fr) minmax(200px,1.25fr) 23px;overflow:hidden;max-width:1800px;margin:0 auto;padding:5px 24px 0;background:radial-gradient(ellipse at 50% 43%,#37566426,transparent 65%)}
.turn-banner{display:flex;align-items:center;justify-content:center;gap:20px;position:relative;text-align:center}
.turn-banner .eyebrow{font-size:11px;letter-spacing:.16em;color:#a5c0c2;font-weight:800}
.turn-banner h1{font-family:Outfit,sans-serif;font-weight:700;font-size:25px;margin:0;color:#fff9dd}
.audio-button{position:absolute;right:8px;top:11px;background:#142d37;color:#b5d4cf;border:1px solid #37535c;border-radius:5px;padding:8px 12px;font-size:12px}
.battle-side{display:flex;flex-direction:column;gap:10px;min-height:0}
.opponent-side{justify-content:flex-start}
.own-side{justify-content:flex-end}
.seat-header{display:flex;gap:20px;align-items:center;justify-content:center;background:linear-gradient(90deg,transparent,#111f2ad9 25%,#111f2ad9 75%,transparent);min-height:44px;border-bottom:1px solid #3b545b}
.seat-header.active{border-bottom-color:#94decc}
.seat-name{display:flex;align-items:baseline;gap:10px;min-width:270px}
.seat-name strong{font-family:Outfit;font-size:17px}
.seat-label{font-size:10px;font-weight:800;letter-spacing:.15em;color:#97c8bd}
.mini-counts{font-size:12px;color:#a3b9ba}
.counters{display:flex;align-items:center;gap:19px}
.life-icons{display:flex;gap:3px;color:#cbdee0;font-size:25px;line-height:1}
.life-icons .lit{color:#fc8895;text-shadow:0 0 13px #fb557866}
.life-icons .spent{opacity:.35}
.mindbug-icons{display:flex;gap:3px;align-items:center}
.mindbug-icons span{display:inline-grid;place-content:center;width:31px;height:31px;font-size:24px;color:#98e6db;border:1px solid #45847d;background:#1b4647;border-radius:50%}
.mindbug-icons .spent{color:#607575;border-color:#334d55;background:transparent}
.hidden-fan{display:flex;align-items:center;gap:0}
.hidden-fan i{display:inline-grid;width:23px;height:30px;margin-left:-8px;place-items:center;border-radius:3px;border:1px solid #8dcdbe;background:#2e7770;color:#bcf1d7;font:16px Outfit}
.hidden-fan .mini-counts{margin-left:10px}
.creature-row{display:flex;gap:12px;align-items:center;justify-content:center;min-height:0;flex:1;overflow-x:auto;overflow-y:hidden;padding:3px 8px;scrollbar-width:thin}
.empty-slot{font:13px Outfit;color:#6e939b;letter-spacing:.07em}
.rift{display:flex;justify-content:center;align-items:center;position:relative;min-height:0;border-top:1px solid #32515b;border-bottom:1px solid #32515b;background:radial-gradient(ellipse at 50% 50%,#256c6a36,transparent 69%)}
.rift-ring{font-size:26px;color:#6ed5bf69;flex:1;text-align:center}
.rift-content{min-width:300px;display:flex;justify-content:center;align-items:center;gap:12px;max-height:100%;position:relative}
.rift-caption{font-size:12px;font-weight:800;letter-spacing:.17em;color:#b5ded5}
.rift-symbol{font-size:55px;line-height:1;color:#84e2cd;text-shadow:0 0 37px #3cc5bb9e}
.waiting{font-size:14px;color:#bed5d3}
.choice-panel{display:flex;flex-direction:column;gap:12px;align-items:center;max-width:470px;text-align:center}
.choice-label{font-family:Outfit;font-size:17px}
.choice-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.choice-targets{display:flex;gap:8px;max-width:65vw;overflow:auto;align-items:center;padding:5px}
.duel-button{border:1px solid #71c8b9;border-radius:5px;background:#8adac4;color:#112b35;padding:9px 16px;font-weight:800;white-space:nowrap;min-height:38px}
.duel-button.primary{background:#a6ebcd}
.duel-button.secondary{background:#223f49;color:#def6e9;border-color:#668e92}
.duel-button.ghost{background:transparent;color:#afcdcb;border-color:transparent}
.duel-button:hover{filter:brightness(1.12)}
.battle-side .creature{height:170px;width:126px;flex:0 0 126px}
.creature{display:block;position:relative;flex:0 0 165px;width:165px;height:225px;padding:0;border:0;text-align:left;transition:transform .16s,filter .16s;--xg-card-width:100%;--xg-card-height:100%}
.creature.xg-card{--xg-card-width:100%;--xg-card-height:100%;font-family:Outfit,sans-serif}
.creature:has(.xg-effect__title-text){overflow:hidden}
.creature .xg-effect__header{font-size:12px;min-height:23px}
.creature .xg-effect__title-text{font-weight:800;line-height:1.12}
.creature .xg-effect__cost{background:#283846;color:#fef2d4;padding:2px 8px;border-radius:4px;font-size:19px}
.creature .xg-effect__art{min-height:0;flex:1}
.creature .xg-effect__image{object-fit:cover}
.creature .xg-effect__rules{font-size:11px;line-height:1.24;max-height:55px}
.creature .xg-effect__type{font-weight:800;font-size:10px;letter-spacing:.06em;color:#286e78}
.creature .xg-effect__footer{font-size:9px;color:#796e60}
.creature.compact .xg-effect__header{font-size:10px}
.creature.compact .xg-effect__cost{font-size:15px}
.creature.compact .xg-effect__rules{font-size:10px;max-height:40px}
.creature.compact .xg-effect__art{max-height:70px}
.creature.compact .xg-effect__type{font-size:9px}
button.creature:hover{transform:translateY(-7px);z-index:4;filter:brightness(1.06)}
.creature.selected{outline:3px solid #b5f5db;outline-offset:2px;transform:translateY(-7px)}
.creature.exhausted{filter:saturate(.6)}
.creature.attacked{box-shadow:inset 0 0 0 2px #7f7689}
.rift .creature{height:138px;width:104px;flex:0 0 104px}
.hand-area{display:flex;flex-direction:column;align-items:center;min-height:0;padding-top:4px;background:linear-gradient(180deg,transparent,#11212b55)}
.hand-label{display:flex;gap:18px;align-items:center;padding:3px 0 8px}
.hand-label strong{font:700 13px Outfit;letter-spacing:.1em}
.hand-cards{display:flex;justify-content:center;align-items:flex-start;gap:10px;min-width:0;overflow-x:auto;width:100%;height:100%;padding:3px 8px 8px}
.hand-cards .creature{height:205px;width:155px;flex:0 0 155px}
.game-footer{display:flex;justify-content:space-between;gap:22px;color:#92abb0;font-size:11px;letter-spacing:.04em;padding:0 10px}
.latest-log{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reveal{animation:rift-in .25s ease-out}
@keyframes rift-in{from{opacity:.5;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
dialog{border:1px solid #557980;border-radius:8px;background:#1b2c36;color:#f4edda;box-shadow:0 20px 80px #000a;padding:0;max-height:85vh}
dialog::backdrop{background:#030c13bc}
.rules-content{padding:24px 30px;width:min(660px,90vw);line-height:1.5}
.rules-content h3{font:700 19px Outfit;margin:23px 0 4px;color:#8fdec8}
.rules-content h2{font:800 25px Outfit;margin:0}
.rules-content p{margin:8px 0}
.dialog-heading{display:flex;justify-content:space-between;align-items:center}
.dialog-heading button,.inspect-content button{border:1px solid #70b5ad;background:#183d46;color:#eef4e7;border-radius:5px;padding:9px 14px}
.inspect-content{padding:22px;display:flex;flex-direction:column;align-items:center;gap:12px}
.inspect-card .creature{width:280px;height:390px}
.inspect-card .xg-effect__rules{font-size:15px;max-height:none}
@media(max-height:850px){
.duel-table{min-height:710px;grid-template-rows:54px 150px 120px 150px 205px 22px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}