*{box-sizing:border-box}body{margin:0;background:#071310;color:#e9eadb;font:16px system-ui}header,main{max-width:1280px;margin:auto;padding:20px}header{display:flex;justify-content:space-between}a{color:#b0e5d1}h1,h2{font-family:Georgia}h1{font-size:clamp(28px,4vw,48px);margin:12px 0}p{line-height:1.6;color:#becfc5}.arena{border:1px solid #57755e;border-radius:10px;overflow:hidden;background:#10211b}canvas{display:block;width:100%;height:auto}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}.card,.choice{padding:12px;background:#10261e;border:1px solid #3b5b47;border-radius:8px}.card h2{font-size:19px;margin:0 0 8px}.card p{margin:5px 0;font-size:13px}.card.dead{opacity:.5}progress{width:100%;accent-color:#76d3b0}.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}button,select{padding:12px;background:#234536;color:#fff1d7;border:1px solid #779878;border-radius:5px;font:inherit}button:disabled,select:disabled{opacity:.5}.primary{background:#c7ac6a;color:#11231c;font-weight:700}label{display:inline-flex;gap:8px;align-items:center;margin:6px 10px 6px 0}.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 0}.controls input[type=range]{width:90px}#status{min-height:28px;color:#f6dfaa}#log{max-height:220px;overflow:auto;line-height:1.8}#result{padding:18px;border:1px solid #c7ac6a;background:#182b21}small{color:#a3b9ac}.legend{font-size:14px}.blue{color:#a9cfed}.red{color:#e4b18c}@media(max-width:650px){header,main{padding:12px}.cards{grid-template-columns:repeat(2,1fr)}.plans{grid-template-columns:1fr}.card h2{font-size:16px}button,select{max-width:100%}}
/* One active ally, explicit actions and accessible target alternatives. */
.plans{display:block}.ally-picker,.action-picker,.target-picker{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.ally-picker>button{flex:1;min-width:220px}.plans button[aria-pressed=true]{border-color:#f5d086;background:#385745;box-shadow:inset 0 0 0 1px #f5d086}.plans button:focus-visible{outline:3px solid #a6ffdf;outline-offset:3px}button:not(:disabled),canvas{cursor:pointer}.choice h2{margin-top:0}
 .feedback-panel{margin:28px 0;padding:20px;background:#10261e;border:1px solid #3b5b47;border-radius:8px}.feedback-panel>label:not(.consent){display:block}.feedback-panel>input,.feedback-panel textarea{display:block;width:100%;background:#071310;color:#e9eadb;border:1px solid #779878;border-radius:4px;padding:10px;font:inherit}.feedback-panel .consent{align-items:flex-start}.feedback-panel input[type=checkbox]{min-width:20px;min-height:20px}.battle-panel{position:relative}.arena{scroll-margin-top:8px}
 @media(max-width:760px) and (min-height:501px){.battle-panel .arena{position:sticky;top:0;z-index:5;box-shadow:0 5px 16px #071310}.ally-picker{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ally-picker>button{min-width:0;font-size:13px;padding:10px 6px}.action-picker{display:grid;grid-template-columns:1fr 1fr;gap:6px}.target-picker{display:grid;grid-template-columns:1fr 1fr;gap:6px}.choice{padding:10px}.choice h2{font-size:18px;margin-bottom:8px}.choice p{font-size:13px;margin:8px 0}.plans{margin:8px 0}#confirm{width:100%}#status{font-size:13px;margin:8px 0}.battle-panel button{min-height:44px}}
/* Unified battle HUD: fixed combat viewport, no scrolling between stage and actions. */
header{height:40px;padding:6px 16px;font-size:13px}main{padding:8px 16px}.page-title{font:26px Georgia;margin:0 0 12px}.page-title span{font:12px system-ui;color:#d9bb78;letter-spacing:3px;margin-left:10px}.battle-panel{position:relative;isolation:isolate;display:grid;grid-template-rows:38px 88px minmax(160px,1fr) 226px;height:min(850px,calc(100svh - 110px));min-height:530px;border:1px solid #7c7957;border-radius:12px;overflow:hidden;background:#0b201d url('/assets/demo-battle/black-lotus-arena.png') center/cover;box-shadow:0 14px 60px #0008}.battle-panel:before{content:'';position:absolute;inset:0;background:#03100db3;z-index:-1}.battle-toolbar{display:flex;align-items:center;justify-content:space-between;background:#081b17ed;padding:0 12px;z-index:12;font-size:12px}.toolbar-actions{display:flex;align-items:center;gap:12px}.battle-toolbar button{padding:5px 10px;font-size:12px;min-height:30px}.battle-toolbar summary{cursor:pointer;list-style:none;padding:8px 0}.popover{position:absolute;right:8px;top:38px;background:#0b211ff5;border:1px solid #d9bb78;padding:16px;border-radius:8px;width:min(350px,calc(100% - 16px));max-height:70%;overflow:auto;box-shadow:0 12px 35px #0009}.popover div{display:grid;gap:4px;padding:8px 0;border-bottom:1px solid #53665a}.popover span{font-size:12px;color:#a3e3d1}.controls.popover{margin:0;display:flex;flex-wrap:wrap;gap:12px}.battle-panel button,.battle-panel summary{touch-action:manipulation}.battle-panel button:focus-visible,.battle-panel summary:focus-visible{outline:3px solid #a3e3d1;outline-offset:2px}
.battle-panel .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px 12px;margin:0;background:linear-gradient(#071715e8,#071715a8);z-index:3}.battle-panel .card{min-width:0;text-align:left;display:grid;grid-template-columns:1fr auto;gap:3px 6px;padding:7px 10px;background:#081b18de;border-color:#507267;border-left:3px solid #77c9b0;font-size:11px;border-radius:5px}.card:nth-child(3){border-left-color:#85c8f4}.card:nth-child(4){border-left-color:#efad7c}.card.acting{border-color:#f5d18a;box-shadow:0 0 15px #d8b36545}.card[aria-pressed=true]{border-color:#d9bb78;background:#385347;box-shadow:inset 0 0 0 1px #d9bb78}.fighter-name{grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:750;font-size:13px}.fighter-name small{color:#b7b29c;font-weight:400}.card progress{grid-column:1/-1;width:100%;height:6px;border:0;border-radius:4px;accent-color:#7fdbbd}.card progress::-webkit-progress-bar{background:#492f30;border-radius:4px}.card progress::-webkit-progress-value{background:#7fdbbd;border-radius:4px}.fighter-state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a7d6c8}.hp-value{font-variant-numeric:tabular-nums}.card:disabled{opacity:1}.card.dead:disabled{opacity:.45}
.stage{position:relative;min-height:0}.battle-panel .arena{position:absolute;inset:0;border:0;border-radius:0;overflow:hidden;background:#081412;box-shadow:none}.arena canvas{display:block;width:100%;height:100%;object-fit:contain}.battle-dock{z-index:6;border-top:1px solid #8b805c;background:linear-gradient(110deg,#0b2421f5,#102d27f5);padding:10px 16px;display:grid;grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:24px 1fr;gap:6px 16px}.battle-dock #status{grid-column:1/-1;font-size:12px;color:#e1c790;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:24px;min-height:0}.battle-dock .plans{min-width:0;margin:0;display:block}.ally-picker,.action-picker,.target-picker{display:flex;gap:8px}.ally-picker{margin-bottom:8px}.ally-picker>button{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;padding:8px}.battle-dock .choice{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;padding:0;border:0;background:none}.choice h2{display:none}.action-picker{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin:0}.action-picker button{min-height:44px;padding:8px;font-weight:650}.choice .target-hint{font-size:11px;color:#b7cabf;margin:0}.target-picker{margin:0}.target-picker button{font-size:12px;padding:6px 12px;min-height:32px}.battle-dock .primary{align-self:center;min-height:52px;background:linear-gradient(#eed39a,#bb9957);color:#15251f}.resolution-note{color:#b5c8bb;font-size:13px;padding:15px 0}#result{position:absolute;z-index:6;top:40%;left:50%;transform:translate(-50%,-50%);width:85%;text-align:center;background:#091c17ef;color:#d9bb78;border:1px solid #d9bb78;border-radius:8px;padding:18px;font:24px Georgia;pointer-events:none}.battle-help,main>details{margin:18px 0;color:#b7c8bd;font-size:14px;line-height:1.6}
@media(max-width:760px){header{height:40px;font-size:12px;padding:6px 10px}main{padding:4px 6px 12px}.page-title{display:none}.battle-panel{height:calc(100svh - 50px);min-height:480px;grid-template-rows:36px 83px minmax(150px,1fr) 231px;border-radius:8px}.battle-toolbar{padding:0 8px}.toolbar-actions{gap:10px}.battle-panel .cards{gap:4px;padding:6px}.battle-panel .card{padding:6px 5px;font-size:10px;grid-template-columns:1fr}.fighter-name{font-size:11px}.fighter-state{font-size:9px}.hp-value{font-size:10px}.battle-dock{padding:6px 8px 8px;display:flex;flex-direction:column;gap:5px}.battle-dock #status{font-size:11px;line-height:18px;min-height:18px}.ally-picker{display:flex;gap:5px;margin-bottom:5px}.ally-picker>button{font-size:10px;padding:6px 4px;min-height:36px}.action-picker{grid-template-columns:repeat(4,1fr);gap:5px}.action-picker button{font-size:12px;padding:6px 2px;min-height:44px}.target-picker{display:flex;gap:5px}.target-picker button{min-height:36px;padding:5px 8px;font-size:11px}.battle-dock .choice{gap:5px}.choice .target-hint{font-size:10px}.battle-dock .primary{width:100%;min-height:40px;padding:8px;margin-top:auto}.resolution-note{min-height:80px;padding:12px 0}#result{font-size:18px;padding:12px}.popover{font-size:13px}}
@media(max-height:500px) and (orientation:landscape){header{height:32px}main{padding:2px 6px}.page-title{display:none}.battle-panel{height:calc(100svh - 38px);min-height:280px;grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:36px 80px minmax(0,1fr)}.battle-toolbar{grid-column:1;grid-row:1}.battle-panel .cards{grid-column:1;grid-row:2;padding:4px;gap:4px}.stage{grid-column:1;grid-row:3}.battle-dock{grid-column:2;grid-row:1/4;border-top:0;border-left:1px solid #8b805c;display:flex;flex-direction:column;padding:8px;gap:5px}.battle-dock #status{font-size:10px}.ally-picker{flex-direction:column;gap:4px;margin-bottom:6px}.ally-picker>button{padding:5px;font-size:11px;min-height:30px}.action-picker{grid-template-columns:1fr 1fr;gap:4px}.action-picker button{min-height:38px;font-size:12px}.battle-dock .choice{gap:5px}.target-picker button{padding:5px;font-size:10px}.battle-dock .primary{width:100%;min-height:36px;margin-top:auto}.battle-panel .card{padding:4px;font-size:9px;grid-template-columns:1fr}.fighter-name{font-size:10px}.fighter-state{font-size:9px}.popover{left:8px;right:auto;width:min(330px,calc(100% - 306px));max-height:80%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#team-heading{font:inherit;color:inherit;letter-spacing:normal;margin-left:0}
.team-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.team-option{display:flex;flex-direction:column;align-items:center;padding:16px;background:#102c25;border:1px solid #527267;border-radius:12px}.team-option img{width:100%;height:200px;object-fit:contain}.team-option span{font:26px Georgia;margin:12px}.team-option small{color:#9fdec8}.team-option[aria-pressed=true]{border:2px solid #e7c47f;background:#244236}.team-option:disabled{opacity:.5}#team-selector{padding:18px 0}#team-selector>p{color:#c1d2c9}#team-cancel{margin-left:12px}@media(max-width:600px){.team-options{gap:8px}.team-option{padding:6px}.team-option img{height:110px}.team-option span{font-size:17px;margin:8px 0}.team-option small{font-size:10px}.toolbar-actions{flex-wrap:wrap}#change-team{font-size:11px;padding:6px}}