.app-utilities{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:10px 0 0}.app-utilities button,.app-update button,.share-dialog button{min-height:44px;border:1px solid #6d9e94;background:#214a4b;color:#e3f5e9;padding:8px 14px;border-radius:7px;font-size:11px;font-weight:700}.app-utilities button:hover{background:#316061}.app-utilities small{margin-right:auto;color:#91b7af;font-size:10px}.app-utilities [aria-pressed=true]{background:#d3eeb5;color:#234438}.finish-info{max-width:1124px;margin:30px auto 55px;padding:28px;border:1px solid #527d7288;border-radius:12px;background:#183b3e;color:#d9eee5;display:grid;grid-template-columns:1fr 1fr;gap:35px}.finish-info h2{font-size:19px;color:#f4e2ac;margin:0 0 14px}.finish-info h3{font-size:12px;margin:15px 0 8px}.finish-info p,.finish-info li{font-size:11px;line-height:1.9;color:#b8d2c7}.finish-info p+p{margin-top:12px}.finish-info ul{padding-left:18px;margin:0 0 15px}.finish-info details{border-top:1px solid #527d7288;padding-top:12px}.finish-info summary{cursor:pointer;min-height:44px;font-size:11px;display:flex;align-items:center;gap:8px}.finish-info summary:before{content:'＋'}.finish-info details[open] summary:before{content:'−'}.footer{flex-wrap:wrap;gap:8px 18px}.footer .class-credit{font-size:11px;color:#c5e4d5;font-weight:700}.app-update{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:15px;padding:12px 18px;border:1px solid #9bc3a5;border-radius:10px;background:#183e3ff5;color:#e6f5de;max-width:calc(100% - 24px);width:max-content;font-size:12px;box-shadow:0 8px 32px #0008}.share-dialog input{display:block;width:100%;font:500 14px Paperlogy,sans-serif;padding:14px;margin:18px 0;color:#1c3938;background:#f2f6e8;border:2px solid #99baac;border-radius:6px}.finish-dialog p,.finish-dialog li{font-size:13px;line-height:1.9;color:#d1dfd1}.finish-dialog ol{padding-left:20px}.finish-dialog{max-width:560px}.finish-dialog h2{font-size:23px}a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #b9eed0;outline-offset:4px}.in-battle .app-utilities #share-app,.in-battle .app-utilities #install-app,.in-battle .app-utilities small,.in-battle .finish-info{display:none}.in-battle .app-utilities{padding-top:4px}.in-battle .app-utilities button{min-height:36px;padding:5px 10px}
@media(max-width:600px){.app-utilities{gap:6px;justify-content:center}.app-utilities button{flex:1;font-size:10px;padding:8px 4px}.app-utilities small{display:none}.finish-info{margin:25px 12px 35px;padding:23px 20px;grid-template-columns:1fr;gap:28px}.finish-info h2{font-size:18px}.finish-info p,.finish-info li{font-size:12px}.footer{justify-content:center;text-align:center;padding-bottom:24px}.footer .class-credit{flex-basis:100%;font-size:12px}.app-update{font-size:11px;padding:10px 12px;gap:8px}.app-update button{font-size:10px;padding:6px 9px}.in-battle .app-utilities button{flex:none;margin-left:auto}.finish-dialog{padding:22px 20px}}

/* Active battles use the available window, including browser fullscreen. */
body.in-battle{height:100vh;height:100dvh;overflow:hidden}
.in-battle .shell{width:100%;max-width:none;height:100%;padding:0;display:flex;flex-direction:column}
.in-battle .topbar{height:48px;min-height:48px;flex-shrink:0;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
.in-battle .brand{font-size:19px}.in-battle .brandmark{width:32px;height:32px}.in-battle .brand small{font-size:7px}
.in-battle .app-utilities,.in-battle .footer{display:none}
.in-battle #battle{display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:env(safe-area-inset-bottom)}
.in-battle .battle-heading{flex-shrink:0;height:44px;min-height:44px;padding:0 10px}
.battle-buttons #fullscreen-app{min-height:36px;padding:5px 10px;border:1px solid #6d9e94;background:#214a4b;color:#e3f5e9;border-radius:7px;font-size:11px;font-weight:700}
.in-battle .battle-reward-track{flex-shrink:0;margin:0;border-radius:0;padding:7px 12px;min-height:32px}
.in-battle .battle-grid{flex:1;min-height:0;grid-template-rows:minmax(0,1fr) 145px;margin:0;border-width:2px;border-radius:0;box-shadow:none}
.in-battle .arena-wrap{height:100%;min-height:0;width:100%;aspect-ratio:auto}
.in-battle .arena-wrap canvas{position:absolute;inset:0;object-fit:fill}
@media(max-width:720px){.in-battle .battle-grid{grid-template-rows:minmax(0,1fr) 33px 118px}.in-battle .battle-heading{padding:0 5px;gap:4px}.in-battle .battle-heading .eyebrow{font-size:8px}.in-battle .battle-buttons{gap:4px}.battle-buttons #fullscreen-app{font-size:9px;padding:5px 6px}.in-battle .battle-buttons .quiet{padding:4px;font-size:9px}}
@media(max-height:500px) and (min-width:721px){.in-battle .topbar{height:40px;min-height:40px}.in-battle .battle-heading{height:38px;min-height:38px}.in-battle .battle-reward-track{min-height:26px;padding:4px 10px}.in-battle .battle-grid{grid-template-rows:minmax(0,1fr) 125px}.in-battle .upgrades{height:125px;min-height:125px;grid-auto-rows:55px}.in-battle .study-panel{height:125px;padding:5px 12px;grid-template-rows:18px 5px 38px 12px 17px;gap:3px 10px}.in-battle .upgrade-heading{bottom:125px}.in-battle .study-panel #quiz-open{min-height:36px}}

/* Readable Korean cards keep labels, values and costs in separate rows. */
.in-battle .upgrade{display:flex;flex-direction:column;justify-content:space-between;gap:3px;min-width:0;min-height:58px;padding:5px 6px;overflow:hidden}
.upgrade-title,.upgrade-purchase{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;width:100%}
.upgrade-title{min-height:18px}.upgrade-title strong{font:800 12px/1.3 var(--game-font);min-width:0;flex:1;color:#f3fbf7;overflow-wrap:anywhere}
.in-battle .upgrade .upgrade-icon{position:static;flex:0 0 19px;width:19px;height:19px;border:0;background:none;clip-path:none;line-height:1}
.in-battle .upgrade .lv{position:static;flex-shrink:0;font:700 9px/1.3 Paperlogy,sans-serif;color:#b4d3ce;white-space:nowrap}
.in-battle .upgrade .value{position:static;min-width:0;flex-shrink:0;font:800 14px/1.2 var(--game-font);color:#f2fbf5}
.in-battle .upgrade .cost{position:static;flex-shrink:0;min-width:54px;height:25px;padding:2px 4px;font:800 12px/1 var(--game-font);gap:3px}
.in-battle .battle-reward-track{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:12px;min-height:46px;padding:5px 12px}
.in-battle #loot-caption{grid-column:1;grid-row:1;min-width:0;line-height:1.4;padding-right:100px}
.in-battle #loot-dots{grid-column:1;grid-row:1;justify-self:end}
.in-battle .battle-reward-track .wave-block{grid-column:2;grid-row:1;position:static;transform:none;filter:none;width:165px}
.in-battle .battle-reward-track .wave-block b{font-size:13px;white-space:nowrap}.in-battle .wave-dots{justify-content:center}
.in-battle #loot-total{grid-column:3;grid-row:1;justify-self:end;margin:0;white-space:nowrap}
@media(max-width:1000px){.upgrade-title strong{font-size:11px}.in-battle .upgrade{padding:4px}.in-battle .upgrade .lv{font-size:8px}}
@media(max-width:720px){.in-battle .battle-grid{grid-template-rows:minmax(0,1fr) 33px 132px}.in-battle .upgrades{height:132px;min-height:132px;grid-auto-rows:58px}.in-battle .study-panel{min-height:165px}.upgrade-title{gap:2px}.upgrade-title strong{font-size:10px}.in-battle .upgrade .upgrade-icon{flex-basis:16px;width:16px;height:16px}.in-battle .upgrade .value{font-size:12px}.in-battle .upgrade .cost{min-width:48px;font-size:11px}.in-battle #loot-dots{display:none}.in-battle #loot-caption{padding:0;font-size:9px}.in-battle .battle-reward-track{column-gap:8px;padding:4px 8px;min-height:44px}.in-battle .battle-reward-track .wave-block{width:140px}.in-battle .battle-reward-track .wave-block b{font-size:11px}}
@media(max-height:500px) and (min-width:721px){.in-battle .battle-grid{grid-template-columns:52% minmax(0,1fr);grid-template-rows:minmax(0,1fr) 96px}.in-battle .upgrade-heading{bottom:96px}.in-battle .upgrades{height:96px;min-height:96px;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:82px}.in-battle .study-panel{height:96px;min-height:96px;padding:4px 8px;grid-template-columns:minmax(0,1fr) 110px;grid-template-rows:18px 5px 34px 14px;gap:2px 8px}.in-battle .study-panel #quiz-open{font-size:11px;min-height:32px}.in-battle .study-panel #quests{display:none}.in-battle .upgrade-title{flex-wrap:wrap;justify-content:flex-start;gap:2px}.in-battle .upgrade-title strong{font-size:10px}.in-battle .upgrade .lv{width:100%;text-align:right}.in-battle .upgrade .cost{min-width:42px;font-size:10px}.in-battle .upgrade .value{font-size:11px}}

.in-battle .upgrade-title .upgrade-icon .game-icon{width:100%;height:100%}
.in-battle .study-panel #spell{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;text-align:left;gap:4px;padding:6px}
.in-battle #spell>span:first-child{grid-column:1;grid-row:1/3;width:32px;height:32px;display:grid;place-items:center;font-size:0}
.in-battle #spell>span:first-child .game-icon{width:32px;height:32px}
.in-battle #spell>span:nth-child(2){grid-column:2;grid-row:1;min-width:0;align-self:end}
.in-battle #spell b{display:block;font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.in-battle #spell small{font-size:8px;line-height:1.3;margin-top:3px}
.in-battle #spell .spell-cost{grid-column:2;grid-row:2;display:flex;align-items:center;gap:3px;margin:0;font-size:10px;line-height:1}
@media(max-width:720px){.in-battle .study-panel #spell{grid-template-columns:22px minmax(0,1fr) auto;grid-template-rows:1fr;gap:3px;padding:4px}.in-battle #spell>span:first-child{grid-column:1;grid-row:1;width:22px;height:22px}.in-battle #spell>span:first-child .game-icon{width:22px;height:22px}.in-battle #spell>span:nth-child(2){grid-column:2;grid-row:1;align-self:center}.in-battle #spell b{font-size:9px}.in-battle #spell small{display:none}.in-battle #spell .spell-cost{grid-column:3;grid-row:1;font-size:9px;gap:1px}.in-battle #spell .spell-cost .game-icon{width:12px;height:12px}}
@media(max-width:360px){.in-battle .battle-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 33px 132px 86px}.in-battle .upgrade-heading{grid-column:1;grid-row:2}.in-battle .upgrades{grid-column:1;grid-row:3}.in-battle .study-panel{grid-column:1;grid-row:4;min-height:86px;height:86px;grid-template-columns:minmax(0,1fr) 128px;grid-template-rows:16px 5px 34px 12px;padding:4px 8px;gap:2px 8px}.in-battle .study-panel #quiz-open{grid-column:1;grid-row:3;min-height:32px}.in-battle .study-panel #spell{grid-column:2;grid-row:1/4;grid-template-columns:22px minmax(0,1fr);grid-template-rows:1fr auto}.in-battle #spell>span:first-child{grid-row:1/3}.in-battle #spell .spell-cost{grid-column:2;grid-row:2}.in-battle .combo-strip{grid-row:4}}