/* Blue and gold covenant table. Geometry and materials are CSS, with no scene image. */
:root{--table-blue:#254c70;--table-navy:#1d3d5b;--table-gold:#b39459;--table-edge:#d4c093;--table-ivory:#fffaf0}
.topbar{background:#fffaf1;border-bottom:2px solid var(--table-gold);box-shadow:0 2px 8px #70583112}
.relic-strip{background:#f2ecdf;border-bottom:1px solid #cbb98e}
.brand{color:var(--table-navy)}.brand img{outline:1px solid #b3945970;outline-offset:3px;border-radius:7px}
.btn.primary{background:var(--table-blue);border:1px solid #b6975e;box-shadow:inset 0 1px 0 #fff3,inset 0 -3px 0 #102f4c50,0 3px 7px #1638551a;border-radius:5px}
.btn.primary:hover:not(:disabled){background:#315f89;border-color:#bc9c5e}
.icon-button{background:#fffaf0;border-color:#bba573;box-shadow:inset 0 0 0 2px #fffdf8}
.health{height:22px;border-radius:5px;border:1px solid #ab936d;background:#e6dece;box-shadow:inset 0 1px 3px #69574020}
.health-fill{background:linear-gradient(180deg,#cd7273,#a74e54)}
.health span{font-weight:700;text-shadow:0 1px 1px #843c4650}
.character-choice,.route-map,.summary-stats,.shop-object{border-color:#bda77a;box-shadow:inset 0 0 0 3px #f1e8d780,0 4px 15px #76634112}
.character-choice.chosen{background:#e5edf3!important;border-color:#456887!important;border-left:4px solid #456887}
.intro-label{color:#8c6c35}.intro-label span{padding:6px 0;border-bottom:1px solid #c9b47f}
.character-mechanics{border-color:#bba577;background:#faf4e5;padding:20px 16px;border-left:3px solid #bba577}
.map-node.reachable .node-medallion{border:2px solid #a8884e;background:#fff2ca;box-shadow:0 0 0 4px #d7bb7020}
.map-node.current .node-medallion{background:#cbdce8;border-color:#597898}
.modal,.selection-drawer,.tutorial{border:1px solid #b79b62;box-shadow:inset 0 0 0 4px #f2e9d4,0 12px 36px #233c5526;background:#fffcf5}
.card{border:2px solid #b79b62;border-radius:9px;padding:7px;background:#fffbef;box-shadow:inset 0 0 0 2px #f3e5c3,0 6px 12px #32405222}
.card:before{display:block;content:'';position:absolute;inset:3px;border:1px solid #decda8;border-radius:5px;background:none;pointer-events:none;z-index:1}
.card-cost{top:7px;left:7px;width:34px;height:36px;border:1px solid #bca367;border-radius:5px;background:#254c70;box-shadow:inset 0 0 0 2px #fff1;font:700 25px var(--serif);color:#fff9e9}
.card-name{font-family:var(--serif);font-size:19px;color:#254c70}
.card-art{border:1px solid #d4c093;border-radius:3px;filter:saturate(.9)}
.card-type{border-color:#bca367;background:#fcf3da;color:#795d2d;padding:0 12px;font-size:12px}
.card.rare{border-color:#947aad;box-shadow:inset 0 0 0 2px #eae0f0,0 6px 12px #32405222}
.card.upgraded{border-color:#ab853e;background:#fff4cf}
.card:hover:not(:disabled),.hand-scroll .card.selected{box-shadow:inset 0 0 0 2px #ecd397,0 10px 22px #32405230}
.card.selected{border-color:#3d759c}.card-footer{border-top:1px solid #ddcfac;margin:7px 9px 0;padding-top:4px}

/* The arena uses one responsive area above the foreground hand. */
.battle-screen{width:100%;max-width:2200px;padding:0 clamp(16px,3vw,72px) 14px}
.battle-meta{min-height:58px;border-bottom:1px solid #d8c59c;margin-bottom:12px}
.action-queue li{padding:5px 10px;background:#fff9e8;border-color:#c4ad7d;border-radius:5px}
.action-queue .current{background:#254c70;color:#fff5df;border-color:#b6975e;box-shadow:inset 0 1px 0 #fff3,0 2px 5px #28475a20}
.queue-avatar{border:1px solid #bd9b55;box-shadow:0 0 0 2px #fff2}
.battle-stage{border:1px solid #cfb981;border-radius:12px 12px 0 0;padding-bottom:12px;isolation:isolate;background:linear-gradient(180deg,#fffcf600 0 58%,#eee4ca70 100%)}
.battle-stage:before{content:'';position:absolute;inset:12px;border:1px solid #d8c59c66;border-bottom:0;border-radius:6px;z-index:-1;pointer-events:none}
.battle-stage:after{content:'';position:absolute;left:12%;right:10%;bottom:53px;height:66px;border:1px solid #bb9d5b44;border-radius:50%;z-index:-1;pointer-events:none}
.combatant.player:before,.enemy-party:before{content:'';position:absolute;left:2%;right:2%;bottom:44px;height:56px;border:1px solid #b99c5d75;border-radius:50%;box-shadow:inset 0 0 0 6px #dbbd7520;background:#e6d6af25;z-index:-1;pointer-events:none}
.enemy-party{position:relative}.enemy-party:before{left:0;right:0;bottom:44px}
.enemy-party{height:auto}
.enemy-party .combatant{height:auto;padding-top:12px}
.enemy-figure{position:relative;width:100%;flex-shrink:0;display:flex;flex-direction:column;align-items:center}
.enemy .enemy-figure .intent{position:relative;top:auto;bottom:auto;left:auto;transform:none;margin-bottom:12px;flex-shrink:0}
.enemy h3{padding:2px 12px;border:1px solid #cbb88c;background:#fff8e7;border-radius:4px}
.player-name h2{background:#fff8e7;padding:1px 12px;border:1px solid #cbb88c;border-radius:4px;font-size:23px}
.intent>span{border:1px solid #b99c65;padding:5px 16px;box-shadow:inset 0 0 0 2px #fff8,0 3px 8px #8b6e3720}
.intent.hit>span{background:#fff0e7;color:#a7474e}.intent small{border-radius:3px;background:#f2e8d3;color:#775f38;padding:1px 9px}
.battle-controls{background:#f8f0de;border:1px solid #bba06b;border-top:3px solid #bba06b;margin:0;padding:10px 20px;box-shadow:inset 0 0 0 3px #fff9;min-height:88px}
.energy-orb{color:#244c74}.energy-crystal{filter:drop-shadow(0 3px 5px #3e6d922d)}
.momentum-pips i{border:1px solid #b39964;background:#e7dac0;box-shadow:inset 0 1px 0 #fff7}.momentum-pips .filled{background:#3d7398;border-color:#2c5579}
.pile-button{border:1px solid #c6ae7d;border-radius:5px;background:#fff9e9;box-shadow:inset 0 0 0 2px #fff8}
.turn-indicator{min-height:56px;padding:8px 14px;border-left:1px solid #d5bf8d;border-right:1px solid #d5bf8d}
.turn-indicator strong{font:700 22px var(--serif);color:#254c70}.turn-indicator>span{color:#55708a;font-size:12px}
.turn-indicator.enemy-turn{background:#f5e4dc}.turn-indicator.enemy-turn strong{color:#9c4651}
.hand-region{border:1px solid #c6b17d;border-top:0;border-radius:0 0 12px 12px;background:#ece4d2;box-shadow:inset 0 0 0 5px #fffbef70}
.hand-caption{padding:9px 18px 3px;font-size:12px;color:#6b624c}
.hand-scroll{background:transparent;align-items:flex-end;min-height:326px;padding:19px 20px 22px;gap:16px}
.game-footer{background:#e9e1d0b0;border-top:1px solid #cfbb90;color:#736952}
.tutorial{top:72px}.status{background:#fff8e6;border-color:#c8b280}
@media(min-width:761px){
 body[data-screen=battle] #app{display:flex;flex-direction:column;min-height:100svh}
 .battle-screen{--stage-height:clamp(260px,calc(100svh - 790px),850px);margin:0 auto;flex:1;display:flex;flex-direction:column}
 .battle-meta,.battle-controls,.hand-region{flex-shrink:0}
 .battle-stage{flex:1;height:auto;min-height:var(--stage-height);padding-left:7%;padding-right:7%}
 .combatant{max-width:480px}.combatant.player{width:32%}
 .player-actor{width:min(100%,450px);height:min(clamp(250px,34svh,570px),var(--stage-height) - 65px)}
 .enemy-party{width:52%;gap:clamp(20px,2.5vw,64px)}.enemy-party .combatant{width:45%;max-width:420px}
 .enemy-actor{height:min(clamp(220px,30svh,490px),var(--stage-height) - 135px);width:100%}
 .enemy-actor.sprite{width:min(clamp(220px,30svh,490px),var(--stage-height) - 135px)}
 .enemy-party.many{width:59%;gap:20px}.enemy-party.many .combatant{width:31%}
 .enemy-party.many .actor{width:100%;height:min(clamp(190px,25svh,400px),var(--stage-height) - 135px)}
 .enemy-party.many .enemy-actor.sprite{width:min(clamp(190px,25svh,400px),var(--stage-height) - 135px);height:min(clamp(190px,25svh,400px),var(--stage-height) - 135px)}
 .enemy .intent{top:14px}.battle-screen .game-footer{margin-top:auto}
}
@media(min-width:1800px){
 .battle-screen{--stage-height:clamp(360px,calc(100svh - 840px),950px);padding-bottom:18px}
 .enemy-actor,.enemy-actor.sprite{height:max(170px,min(clamp(220px,30svh,490px),var(--stage-height) - 245px))}
 .enemy-actor.sprite{width:max(170px,min(clamp(220px,30svh,490px),var(--stage-height) - 245px))}
 .enemy-party.many .actor,.enemy-party.many .enemy-actor.sprite{height:max(150px,min(clamp(190px,25svh,400px),var(--stage-height) - 245px))}
 .enemy-party.many .enemy-actor.sprite{width:max(150px,min(clamp(190px,25svh,400px),var(--stage-height) - 245px))}
 .hand-scroll{min-height:392px;gap:22px;padding:22px 26px 28px}.hand-scroll .card{width:240px;min-height:340px}
 .hand-scroll .card-art{height:176px}.hand-scroll .card-text{font-size:14px;line-height:1.85;padding:12px 12px 4px}
 .hand-scroll .card-name{font-size:22px;height:40px;line-height:36px}.hand-scroll .card-footer{font-size:12px}
 .battle-controls{min-height:94px;padding:12px 28px;gap:22px}.turn-indicator strong{font-size:27px}.turn-indicator>span{font-size:14px}
 .pile-button{font-size:13px;padding:8px 15px}.hand-caption{font-size:14px}.action-queue li{font-size:14px}
 .battle-stage .health{width:190px;height:24px}.battle-stage .health span{font-size:14px}
 .enemy h3{font-size:21px}.player-name h2{font-size:27px}.intent>span{font-size:23px}.intent small{font-size:13px}
}
@media(max-width:1150px) and (min-width:761px){
 .battle-screen{padding:0 18px 14px}.battle-controls{padding:8px 12px;gap:8px}.turn-indicator{padding:6px 8px;min-width:150px}
 .battle-stage{padding-left:3%;padding-right:3%}.enemy-party{gap:12px}
}
@media(max-width:760px){
 .battle-screen{padding:0 12px 8px}.battle-meta{margin-bottom:8px;min-height:53px}
 .action-queue li{padding:3px 5px;gap:5px}.battle-stage{padding-bottom:7px;border-radius:8px 8px 0 0}
 .battle-stage:before{inset:7px}.battle-stage:after{left:7%;right:7%;bottom:53px;height:32px}
 .combatant.player:before,.enemy-party:before{height:30px;bottom:47px}
 .enemy h3{font-size:13px;padding:0 3px}.player-name h2{font-size:18px;padding:0 7px}
 .intent>span{font-size:14px;padding:3px 6px}.intent small{font-size:9px;padding:0 4px}
 .battle-controls{padding:8px 9px;gap:6px;min-height:122px}.turn-indicator{border:0;padding:4px 2px;min-height:44px}
 .turn-indicator strong{font-size:18px}.turn-indicator>span{font-size:10px}
 .pile-button{padding:2px 3px}.hand-region{border-radius:0 0 8px 8px}.hand-caption{padding:8px 7px 3px;font-size:10px}
 .hand-scroll{min-height:310px;gap:12px;padding:16px 7px 22px}.card-name{font-size:17px}
 .card-cost{width:29px;height:33px;font-size:23px}.card-type{font-size:11px;padding:0 9px}
 .health{height:18px}.tutorial{top:64px}.game-footer{margin-top:0}
}
@media(max-height:650px) and (min-width:761px){
 .battle-screen{--stage-height:260px}.battle-stage{min-height:260px}.player-actor{height:200px}
 .enemy-actor,.enemy-actor.sprite{width:145px;height:145px}.hand-scroll{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.btn,.card{transition:none}}