/* Character silhouettes are the pieces. Labels are UI, never card bodies. */
:root{--bg:#151f2d;--panel:#1c2b3b;--gold:#ecd09a;--muted:#abbac7}
.game-table{background:radial-gradient(ellipse at 50% 45%,#365158 0,#263e49 55%,#203540 100%);border-color:#72938d66;outline-color:#789d9520;box-shadow:0 20px 55px #070f214d,inset 0 0 80px #14223255}
.game-table::before{border-color:#b3d6cf16}.score-box{background:#1b2c38}.player-score{background:linear-gradient(130deg,#34443e,#223444)}.goal-card{background:linear-gradient(120deg,#36433f,#273b42)}
.card.character{width:83px;height:112px;aspect-ratio:auto;background:transparent;border:0;border-radius:0;box-shadow:none;isolation:isolate;overflow:visible;color:#edf1df}
.character-art{display:block;position:absolute;inset:0 0 17px;background-image:var(--sprite-image);background-position:var(--sprite-x) var(--sprite-y);background-size:var(--sprite-size);background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 3px 2px #05151c44);transform-origin:50% 90%}
.character-label{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px;font-size:11px;line-height:17px;text-shadow:0 1px 3px #0a1925}
.family-tag{color:#162c30;background:var(--character-color);min-width:17px;height:17px;border-radius:50%;display:grid;place-items:center;text-shadow:none;font-size:10px;font-weight:800}
.character-name{font-size:11px;color:#eff2df}.kind-tag{font-size:9px;color:var(--character-color);font-weight:700;line-height:14px}
.card.character::after{content:'';position:absolute;z-index:-1;left:15%;right:15%;bottom:14px;height:12px;border-radius:50%;background:#0a20244d;filter:blur(2px)}
.card.character.matched{border:0;box-shadow:none;background:transparent}.card.character.matched::before{content:'';position:absolute;left:13%;right:13%;width:auto;height:14px;top:auto;bottom:14px;background:#f4d48745;border:1px solid #ffe6a3a1;border-radius:50%;box-shadow:0 0 14px #f2d7996b;z-index:-1}
.card.character.selectable{animation:none}.card.character.selectable .character-art{filter:drop-shadow(0 0 5px #ffe0a3);animation:character-breathe 1.2s ease-in-out infinite alternate}
.card.character.recent{animation:character-appear .32s ease-out}.floor .card.character:nth-child(n){transform:none}
.hand{gap:2px;min-height:118px;align-items:end}.hand .card.character{width:auto;flex:1;max-width:96px;min-width:0;height:118px;aspect-ratio:auto}
.hand .card.character:not(:disabled):hover{background:none;border:0;transform:translateY(-6px);box-shadow:none;z-index:2}.hand .card.character:not(:disabled):hover .character-art{filter:drop-shadow(0 0 7px #f5d9a373);transform:scale(1.1)}
.hand .card.character:disabled{opacity:.8}.hand .card.character:focus-visible{outline:2px solid #ffe2aa;border-radius:40px;outline-offset:2px}
.floor{gap:8px 2px;padding-right:0;justify-content:flex-start}.floor-zone{min-height:270px;gap:12px}.deck-area{width:64px}.summon-gate{width:57px;height:57px;border:1px solid #b2d3d174;outline:4px solid #90c4c514;border-radius:50%;background:radial-gradient(circle,#91b9bc26,#152d3d33);box-shadow:0 0 28px #a1cfce14;display:grid;place-items:center}.summon-gate span{font-size:30px;color:#d0e2d0}.deck-area>span{font-size:11px;white-space:nowrap}
.enemy-hands{padding:0;gap:6px}.hidden-character{width:23px;height:23px;display:grid;place-items:center;border:1px solid #a2bcc23b;border-radius:50%;background:#bedde609;color:#b6c9d0;font-size:12px;box-shadow:0 0 9px #b7d3c708}.enemy-zone{height:42px}.small-label{font-size:12px}
.capture-tray{min-height:87px;gap:10px}.capture-cards{height:57px;position:relative;padding:0;background:#102b3429;border:0;border-bottom:1px solid #abc7c51a;border-radius:0;overflow:hidden;align-items:end}
.mini-character{position:relative;display:block;height:54px;width:43px;flex-shrink:0;margin-right:-16px}.mini-character .character-art{inset:0}.capture-group>span{margin-bottom:3px;font-size:12px}
.revealed-character{position:relative;display:block;width:33px;height:40px}.revealed-character .character-art{inset:0}.exposed-cards>div{gap:2px}
.choice-cards .card.character{width:112px;height:140px}.choice-cards{gap:12px}.choice-cards .character-name{font-size:14px}.choice-cards .family-tag{font-size:12px;width:20px;height:20px}.choice-cards .kind-tag{font-size:12px}
.turn-notice{background:#112c3866}.hand-label i{box-shadow:0 0 9px #ffe2a7}.table-seal{color:#b5d6ce2e;border-color:#b5d6ce22}
@keyframes character-appear{from{opacity:0;transform:translateY(7px) scale(.9)}to{opacity:1;transform:none}}
@keyframes character-breathe{to{transform:translateY(-3px)}}
@media(min-width:1550px){.card.character{width:92px;height:119px}.floor-zone{min-height:290px}.hand .card.character{height:130px;max-width:104px}}
@media(max-width:1190px){.card.character{width:76px;height:103px}.hand .card.character{height:108px}.character-name{font-size:10px}.character-label{gap:2px}.kind-tag{font-size:9px}}
@media(max-width:760px){.game-table{padding-left:12px;padding-right:12px}.floor-zone{gap:5px;min-height:280px}.deck-area{width:42px;gap:11px}.summon-gate{width:36px;height:36px}.summon-gate span{font-size:24px}.deck-area>span{font-size:9px}.floor{gap:8px 0}.floor .card.character{width:calc(100% / 4);height:95px;min-width:0;border:0}.character-art{inset:0 0 16px}.character-label{gap:2px}.character-name{font-size:10px}.family-tag{min-width:14px;width:14px;height:14px;font-size:9px}.kind-tag{font-size:8px}.hand,.hand:has(.card:nth-child(9)){grid-template-columns:repeat(5,minmax(0,1fr));gap:13px 1px;min-height:100px}.hand .card.character,.hand:has(.card:nth-child(9)) .card.character{width:100%;max-width:90px;height:108px;aspect-ratio:auto;border:0}.hand .character-name{font-size:11px}.hand .kind-tag{font-size:9px}.hand .family-tag{min-width:16px;width:16px;height:16px;font-size:10px}.enemy-hands{gap:4px}.hidden-character{height:18px;width:18px;font-size:10px}.enemy-zone{gap:10px}.capture-tray{gap:5px;min-height:71px}.capture-cards{height:43px}.mini-character{height:42px;width:31px;margin-right:-15px}.capture-group>span{font-size:11px}.turn-notice{margin-left:-12px;margin-right:-12px}.choice-cards .card.character{width:90px;height:124px}.choice-cards{gap:8px}}
@media(prefers-reduced-motion:reduce){.character-art,.card.character{animation:none!important;transition:none!important}}
/* Keep each square atlas cell at its original proportions. */
.character .character-art{inset:auto auto 17px 0;width:100%;height:auto;aspect-ratio:1}
.mini-character .character-art,.revealed-character .character-art{inset:auto auto 0 0;width:100%;height:auto;aspect-ratio:1}
dialog.codex-modal{max-width:760px}.codex-key{font-size:14px;line-height:2;color:#d9d3b8}.codex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 12px;margin-top:25px}.codex-grid article{text-align:center;border-bottom:1px solid #ffffff13;padding-bottom:16px}.codex-portrait{position:relative;aspect-ratio:1}.codex-portrait .character-art{inset:0;width:100%;height:100%;aspect-ratio:1}.codex-grid h3{font-size:16px;margin:8px 0 3px;color:#e7e8d9}.codex-grid h3 small{font-size:12px;color:var(--character-color);margin-left:3px}.codex-grid p{margin:0;font-size:12px;color:var(--character-color)}.codex-grid article>span{font-size:11px;color:#a8bfb5}@media(max-width:560px){.codex-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.codex-grid article>span{font-size:12px}}
/* The moon halo needs a slightly taller atlas window, without image distortion. */
.character .character-art,.mini-character .character-art,.revealed-character .character-art{aspect-ratio:var(--sprite-aspect,1)}
.codex-portrait .character-art{inset:auto auto 0 0;height:auto;aspect-ratio:var(--sprite-aspect,1)}
.character-label,.character-name,.kind-tag,.family-tag{font-size:12px}.family-tag{min-width:17px;width:17px;height:17px}.character-label{gap:3px}.codex-grid article>span{font-size:12px}
@media(max-width:1390px){.hand .character-name{display:none}}
@media(max-width:760px){.character-name{display:none}.character-label{gap:5px}.hand .kind-tag,.hand .family-tag{font-size:12px}.choice-cards .character-name{display:inline}}