/* Each lesson adds only its unlocked zones. Other modes keep game.css. */
.arena.prologue-battle{--arena-top:66px;--arena-bottom:140px;--row-gap:8px;--card:max(44px,min(22cqw,calc((min(100dvh,1040px) - var(--safe-top) - var(--safe-bottom) - var(--arena-top) - var(--arena-bottom) - 80px) / 6.9),104px));--battle-card:calc(var(--card) * 1.3);left:22px;right:22px;gap:var(--row-gap)}
.prologue-battle .rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 4px}
.prologue-battle .rail-cell{min-width:44px;min-height:44px}
.prologue-battle .rail>.pile{grid-column:1;grid-row:1}
.prologue-battle .rail>.leader-cell{grid-column:2;grid-row:1}
.prologue-battle .rail>.grave-zone-cell{grid-column:3;grid-row:1}
.prologue-battle[data-equipment=true] .rail{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:0}
.prologue-battle[data-equipment=true] .rail>.leader-cell{grid-column:3}
.prologue-battle[data-equipment=true] .rail>.equipment-cell[data-hand=left]{grid-column:2;grid-row:1}
.prologue-battle[data-equipment=true] .rail>.equipment-cell[data-hand=right]{grid-column:4;grid-row:1}
.prologue-battle[data-equipment=true] .rail>.grave-zone-cell{grid-column:5}
.arena.prologue-battle[data-equipment=true]{--card:max(44px,min(17cqw,calc((min(100dvh,1040px) - var(--safe-top) - var(--safe-bottom) - var(--arena-top) - var(--arena-bottom) - 80px) / 6.9),80px))}
.arena.prologue-battle[data-base=true]{--row-gap:5px;--card:max(32px,min(15cqw,calc((min(100dvh,1040px) - var(--safe-top) - var(--safe-bottom) - var(--arena-top) - var(--arena-bottom) - 78px) / 9.5),68px));--battle-card:calc(var(--card) * 1.3)}
.prologue-battle .field-row{gap:5px;min-height:calc(var(--card) * 1.23)}
.prologue-battle .equipment-cell[hidden],.prologue-battle .field-row[hidden]{display:none}
.prologue-battle .active-row{grid-template-columns:36px minmax(0,1fr) 36px;gap:8px}
.prologue-battle .active-row>.power-readout{grid-column:1;grid-row:1}
.prologue-battle .active-row>.active-slot{grid-column:2;grid-row:1}
.prologue-battle .active-slot{height:calc(var(--battle-card) * 1.5 + 26px)}
.prologue-battle .battlefield-unit{top:13px}
.prologue-battle .active-slot .active-empty{top:13px;height:calc(var(--battle-card) * 1.5)}
.prologue-battle .active-slot .empty-crown{top:-1px}
.prologue-battle .power-readout b{font-size:clamp(25px,7.8cqw,33px)}
#game-stage .prologue-battle .pile-count{min-width:23px;height:23px;line-height:21px;font-size:13px;right:-3px;bottom:-3px;background:#191816;border-color:#c7aa7188;color:#f4e6c4}
.prologue-battle .grave-back{background:#17161480;color:#cbbb98;border-color:#c7aa714f;box-shadow:inset 0 0 18px #08080799}
.prologue-battle-topbar .draw-counter{font-size:14px;font-weight:650;letter-spacing:.025em;white-space:nowrap;color:#e4d5b4}
/* White ink, black enamel and gold edges continue the prologue dialogue theme. */
.prologue-battle-topbar .icon-button,.game-shell:has(.prologue-battle) .battle-dock :is(.auto-button,.speed-button){border:1px solid #c7aa7199;border-image:none;background:linear-gradient(#302d27,#141412);color:#f4e6c4;box-shadow:inset 0 1px #fff2cf20,inset 0 0 0 3px #08080766,0 3px 0 #080807;text-shadow:0 1px #080807}
.game-shell:has(.prologue-battle) .battle-dock .primary-action{color:#1b1915;text-shadow:0 1px #fff8}
body:has(.prologue-battle) #settings-dialog{--kit-panel:#191816;--kit-ink:#f5f1e7;--kit-rule:#c7aa7144;border:1px solid #c7aa7188;border-image:none;background:linear-gradient(145deg,#282622,#121211);color:#f5f1e7;box-shadow:inset 0 0 0 3px #08080888,0 18px 48px #000b}
body:has(.prologue-battle) #settings-body>.sheet-title{background:#191816;color:#f5f1e7}
body:has(.prologue-battle) #settings-body>.sheet-title:before{border-image:none;background:none}
body:has(.prologue-battle) #settings-dialog .dialog-close{border:1px solid #c7aa7166;border-image:none;background:#24221e;color:#f4e6c4;box-shadow:none;text-shadow:none}
body:has(.prologue-battle) #settings-dialog .menu-row{color:#f5f1e7;border-bottom-color:#c7aa712e}
.tutorial-cost-exercise .tutorial-main{gap:12px;padding-top:12px;padding-bottom:12px}
.tutorial-cost-meter{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;padding:8px 15px;border:1px solid #c7aa7170;border-radius:9px;background:linear-gradient(#292724,#121211);box-shadow:inset 0 1px #fff2cf20;color:#f5f2eb;font-size:15px}
.tutorial-cost-meter strong{font:700 26px/1.25 var(--font-stats);color:#f4e6c4}.tutorial-cost-meter[data-over=true] strong{color:#ef9b91}.tutorial-cost-meter[data-ready=true] strong{color:#b8d49e}
.tutorial-cost-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:min(100%,330px);margin:0 auto}
.tutorial-cost-choice{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;font-size:13px;text-align:center;color:#f5f2eb}
.tutorial-cost-choice>.game-card{width:min(29cqw,calc((100dvh - 355px) / 1.5),122px);min-width:72px}
.tutorial-cost-choice>button{min-height:44px;width:100%;padding:8px 10px;font-size:14px}
.game-shell .tutorial-cost-choice>.secondary-action{border:1px solid #c7aa7199;border-image:none;background:linear-gradient(#302d27,#141412);color:#f4e6c4;box-shadow:inset 0 1px #fff2cf20,inset 0 0 0 3px #08080766,0 3px 0 #080807;text-shadow:0 1px #080807}
.tutorial-cost-choice>button:disabled{opacity:.45}
.tutorial-cost-exercise .tutorial-footer>button:disabled{opacity:.38}
@media(max-width:350px){.arena.prologue-battle{left:17px;right:17px}.prologue-battle .rail{gap:10px;padding:0}.prologue-battle .active-row{grid-template-columns:30px minmax(0,1fr) 30px;gap:6px}.prologue-battle-topbar .draw-counter{font-size:13px}}
@media(max-height:720px){.arena.prologue-battle{--arena-top:54px;--arena-bottom:122px;--row-gap:6px}.prologue-battle .pile-count{font-size:12px;min-width:21px;height:21px;line-height:19px}}
@media(orientation:landscape) and (max-height:500px){.arena.prologue-battle{--arena-top:48px;--arena-bottom:80px;--card:44px;--battle-card:58px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:16px;row-gap:7px;align-content:center;align-items:center}.prologue-battle .rail[data-player="1"]{grid-column:2;grid-row:1}.prologue-battle .rail[data-player="0"]{grid-column:1;grid-row:2}.prologue-battle .active-row[data-player="1"]{grid-column:2;grid-row:2}.prologue-battle .active-row[data-player="0"]{grid-column:1;grid-row:1}.prologue-battle .rail{gap:4px}.prologue-battle .active-row{grid-template-columns:24px minmax(0,1fr) 24px;gap:3px}}
@media(orientation:landscape) and (max-height:500px){.arena.prologue-battle[data-equipment=true]{--card:40px;--battle-card:52px}.arena.prologue-battle[data-base=true]{--card:34px;--battle-card:44px;grid-template-rows:repeat(3,1fr)}.prologue-battle[data-base=true] .rail[data-player="0"]{grid-row:3}.prologue-battle[data-base=true] .active-row[data-player="1"]{grid-row:3}.prologue-battle[data-base=true] .field-row{grid-row:2}.prologue-battle[data-base=true] .field-row[aria-label="내 기지"]{grid-column:1}.prologue-battle[data-base=true] .field-row[aria-label="상대 기지"]{grid-column:2}}