/* Readable touch layout, without scaling the entire battle down into a miniature. */
html{scrollbar-gutter:stable}body{margin:0}button,a,input,select{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #6645d8;outline-offset:4px}.modal-backdrop{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}.modal.menu-dialog{width:min(620px,100%);max-height:calc(100dvh - 24px);box-sizing:border-box;overflow:auto}.modal.menu-dialog h2{font-size:clamp(25px,5vw,34px);padding-inline-end:20px}.modal.menu-dialog .close{min-width:44px;min-height:44px;right:7px;top:7px}.pack-entry{text-align:center}.pack-entry-art{height:145px;margin:-10px auto 0;max-width:240px;overflow:hidden}.pack-entry-art img{width:100%;height:100%;object-fit:contain}.pack-entry-tag{font:800 11px/1.5 Arial,sans-serif;letter-spacing:1px;color:#6745d8}.pack-entry p{font:400 16px/1.65 Arial,sans-serif!important}.pack-entry-actions{display:grid;gap:12px}.pack-entry-actions>*{display:block;box-sizing:border-box;width:100%;min-height:48px;padding:13px 16px;text-align:center;border-radius:12px;font:700 16px/1.4 Arial,sans-serif;text-decoration:none}.pack-entry-secondary{background:#eae2ff;border:2px solid #7651dc;color:#453174}.pack-entry-count{padding:12px;margin:16px 0;border-radius:12px;background:#dff5e7;font:700 15px/1.5 Arial,sans-serif}.pack-entry-count span{font-weight:400}.pack-entry .pack-entry-note{font-size:13px!important;margin-bottom:12px}.pack-entry-practice{font:600 13px/1.5 Arial,sans-serif;color:#5c4875}.pack-recommendation{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px;margin:20px 0;background:#fff2ba;border:2px solid #91672b;border-radius:16px}.pack-recommendation b{font:800 18px/1.4 Arial,sans-serif}.pack-recommendation p{font:400 14px/1.6 Arial,sans-serif;margin:6px 0 0}.pack-recommendation a,.pack-empty a{font:700 14px/1.5 Arial,sans-serif;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;padding:10px 14px;border-radius:10px;background:#7551cf;color:white;flex-shrink:0}.pack-empty{grid-column:1/-1;max-width:100%;box-sizing:border-box}.pack-empty h2{margin-top:22px}.lobby-small-options span{font-size:11px;line-height:1.4}.lobby-start small{font-size:10px;line-height:1.5}.lobby-caption{font-size:11px;line-height:1.5;max-width:90%;letter-spacing:.6px}.lobby-name{font-size:13px;line-height:1.4}.lobby-token-balance{max-width:calc(100vw - 24px)}.team-view{padding-bottom:160px}.team-bar{padding-bottom:calc(14px + env(safe-area-inset-bottom));box-sizing:border-box}.team-bar>div{min-width:0}.team-bar span{overflow-wrap:anywhere}header .header-right{flex-wrap:wrap}.battle-screen .card-dock .ability p{font-size:11px;line-height:1.3}.battle-screen .card-dock .ability h4{font-size:12px;line-height:1.3}.battle-screen .card-dock .ability small{font-size:10px}.battle-screen .card-dock .card-class{font-size:10px;height:auto;min-height:14px}
@media(max-width:680px){.lobby{padding-bottom:30px}.lobby-title{max-width:390px;box-sizing:border-box}.lobby-board{max-width:390px;width:96%}.lobby-title>span{font-size:10px;letter-spacing:.6px}.lobby-small-options span{font-size:10px!important}.lobby-small-options button{min-height:86px}.lobby-name{font-size:12px!important}.lobby-caption{font-size:11px!important;letter-spacing:0;margin:18px 14px;position:relative}.pack-recommendation{flex-direction:column;align-items:stretch;gap:12px}.pack-recommendation a{justify-content:center}.team-view h1{overflow-wrap:anywhere}.team-view .section-heading{flex-wrap:wrap}.team-view .section-heading p{font:400 15px/1.6 Arial,sans-serif}.team-bar{position:sticky;bottom:0;margin:0 -14px -20px}.team-bar span{font-size:13px}.team-bar .primary{min-height:48px}header{height:auto;min-height:80px;padding:12px;gap:12px;flex-wrap:wrap}header .header-right{gap:8px}header .small-button{min-height:40px;font-size:13px;padding:10px}.modal.menu-dialog{padding:24px 20px}.modal.menu-dialog h2{font-size:25px}.pack-entry-art{height:115px}.chapter-info p{font-size:14px;line-height:1.5}.chapter-info button{min-height:44px}.hero-tile{min-width:0}.hero-tile h3{font-size:20px}.hero-tile .tile-copy>span{font-size:12px}.roster{padding-bottom:20px}.lobby-token-balance{top:12px;right:10px}.lobby-title{margin-top:54px!important}}
@media(max-width:900px),(max-height:540px){body:has(.battle-screen){overflow-y:auto;overflow-x:clip}body .battle-screen.battle-view{position:relative;inset:auto;height:auto;min-height:100dvh;--dock-height:320px;--card-height:228px;--card-width:145px}.battle-screen .card-stage{height:auto;min-height:100dvh;position:relative;display:flex;flex-direction:column;overflow:visible}.battle-screen .battlefield{position:relative;inset:auto;height:390px;min-height:390px;flex:none;width:100%}.battle-screen .card-dock{position:relative;inset:auto;width:100%;height:340px;min-height:340px;flex:none;overflow:visible;box-sizing:border-box;background:#624135;border-top:4px solid #d0a263;padding-top:70px}.battle-screen .card-dock .hand{position:relative;inset:auto;left:auto;right:auto;bottom:auto;height:245px;width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;align-items:flex-start;gap:12px;padding:12px 18px 18px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}.battle-screen .card-dock .ability,.battle-screen .card-dock .hand[data-crowded='true'] .ability{position:relative;width:145px;flex:0 0 145px;height:218px;margin:0;transform:none;scroll-snap-align:start;align-self:flex-start}.battle-screen .card-dock .ability:hover,.battle-screen .card-dock .ability:focus-visible{transform:translateY(-3px)}.battle-screen .card-dock .ability h4{font-size:13px;min-height:32px;padding:5px 4px}.battle-screen .card-dock .ability p{font-size:11px;line-height:1.3;padding:4px 5px}.battle-screen .card-dock .ability small{font-size:10px;padding:3px}.battle-screen .card-dock .card-art{flex-basis:32%;height:60px}.battle-screen .card-dock .card-class{font-size:10px;min-height:14px;height:auto;padding:2px}.battle-screen .card-dock .card-values{padding:3px 5px;gap:5px}.battle-screen .card-dock .card-values span{font-size:12px;padding:2px}.battle-screen .card-dock .card-energy{width:27px;height:27px;top:-8px;left:-7px;font-size:15px}.battle-screen .card-dock .energy{left:14px;top:13px;width:47px;height:47px}.battle-screen .card-dock .energy b{font-size:16px}.battle-screen .card-dock .energy small{font-size:9px}.battle-screen .turn-controls{right:14px;top:9px;width:125px;display:flex;flex-direction:row;align-items:center;gap:12px}.battle-screen .commit{width:68px;height:50px;font-size:14px;border-radius:12px}.battle-screen .deck-counters{font-size:12px;gap:5px}.battle-screen .deck-counters b{font-size:12px}.battle-screen .card-dock .selection-notice{position:relative;inset:auto;bottom:auto;max-width:none;width:auto;transform:none;padding:10px 14px;margin:0 12px 12px;box-sizing:border-box}.battle-screen .selection-notice strong{font-size:12px;letter-spacing:0}.battle-screen .selection-notice #selection-detail{font-size:12px;max-width:none;line-height:1.5}.battle-screen .card-dock .hand-heading{display:none}.battle-screen .battle-toolbar button{font-size:11px;min-height:36px;padding:6px 9px}.battle-screen .battle-hud .arena-menu{min-width:36px;min-height:36px}.battle-screen .combatant-plate b{font-size:10px}.battle-screen .combatant-plate small{font-size:9px}.battle-screen .round-pill{font-size:12px}.battle-screen .unit-label{font-size:11px}.battle-screen .unit-label span{font-size:10px}.battle-screen .card-stage .status-line{font-size:9px;line-height:13px;min-height:13px}.battle-screen .arena-tip{font-size:11px;line-height:1.4}.battle-screen .card-stage .plan-wrap>b{font-size:9px}.battle-screen .card-stage .phase{font-size:11px}}
@media(max-width:360px){.lobby-start>span{font-size:32px}.lobby-board-content{padding-inline:11%}.lobby-wallet{font-size:14px}.lobby-team{height:160px}.lobby-creature .sprite{width:100%}.lobby-caption{max-width:90%}.pack-entry-count span{display:block}.battle-screen .combatant-plate small{display:none}.battle-screen .battlefield{height:360px;min-height:360px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:900px),(max-height:540px){.battle-screen.battle-view>.card-stage>.battlefield{position:relative;inset:auto;height:390px;min-height:390px;flex:0 0 390px}.battle-screen.battle-view>.card-stage>.card-dock{height:auto;min-height:390px;flex:0 0 auto}.battle-screen.battle-view>.card-stage>.card-dock .hand{margin:0}}
@media(max-width:360px){.battle-screen.battle-view>.card-stage>.battlefield{height:360px;min-height:360px;flex-basis:360px}}
body[data-practice28] .lobby-caption:before{content:'PRACTICE · VIRTUAL PROGRESS';display:block;width:fit-content;margin:0 auto 8px;padding:5px 10px;background:#192847;color:#fff7c9;border-radius:20px;letter-spacing:.4px;font:700 11px/1.5 Arial,sans-serif}body[data-practice28] .header-right:before{content:'Practice · virtual progress';font:700 12px/1.5 Arial,sans-serif;color:#694a75}body[data-practice28] .round-pill:after{content:'PRACTICE';display:block;font:700 8px/1.5 Arial,sans-serif;letter-spacing:.3px;color:#ffe6a1}
@media(max-width:900px),(max-height:540px){.battle-screen.battle-view>.card-stage>.battlefield .teams{top:140px;bottom:45px;left:2%;right:2%;height:auto;gap:12px}.battle-screen.battle-view>.card-stage>.battlefield .arena-tip{bottom:10px;left:4%;right:4%;font-size:11px;line-height:1.4}.battle-screen.battle-view>.card-stage>.battlefield .battle-hud{z-index:20}.battle-screen.battle-view .card-stage .battlefield .side .unit{min-height:75px}.battle-screen.battle-view .card-stage .battlefield .unit-label{font-size:10px;line-height:1.3}}