/* Phone layout and safe areas, separate from the desktop art skin. */
#menu-toggle{display:none}#card-preview{padding:0;overflow:auto;max-height:90dvh}#preview-art{display:block;width:100%;max-height:38dvh;object-fit:cover;object-position:50% 35%}.preview-copy{padding:16px 20px}.preview-copy h2{margin:6px 0;font-size:25px}.preview-copy p{margin:8px 0}.preview-actions{display:flex;gap:8px;justify-content:space-between}.preview-actions button{margin:0;min-height:46px;flex:1}
@media(max-width:760px),(max-width:1000px) and (max-height:500px){
  html{scroll-padding-bottom:110px}body{background-attachment:scroll; -webkit-text-size-adjust:100%}
  .shell{padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));width:100%;min-width:0}
  button,a,select{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #f5d599;outline-offset:2px}
  header{position:relative;padding:0 0 8px;min-height:50px;align-items:center;gap:6px;z-index:70}.brand{font-size:17px;white-space:nowrap}.brand small{font-size:8px;letter-spacing:2px}
  #menu-toggle{display:block;min-height:44px;min-width:62px;padding:8px 14px}.tools{display:none}.tools.is-open{display:flex;position:absolute;right:0;top:100%;width:min(340px,100%);max-width:none;padding:12px;background:#142530fa;box-shadow:0 10px 25px #0009;border:1px solid #aa905c;border-radius:10px;gap:8px;justify-content:flex-start}.tools button,.tools select{min-height:44px;font-size:13px}.playback-setting{min-height:44px;font-size:13px}.playback-setting input{width:22px;height:22px}.tools button{flex:1 0 42%}
  #camp{padding-top:20px}#camp h1{font-size:clamp(29px,8vw,42px);margin:16px 0}.intro{font-size:14px}.decks{gap:8px;margin:24px 0 18px}.deck{min-height:204px}.deck-copy{padding:100px 8px 12px}.deck-copy h2{font-size:clamp(15px,4.5vw,22px)}.deck-copy p{font-size:11px}.deck-copy>span:not(.symbol){letter-spacing:0;font-size:10px}.deck .symbol{display:none}.journey{gap:6px}.stage{padding:9px 6px;flex-direction:column;align-items:flex-start;font-size:11px}.stage small{font-size:10px}.stage-portrait{width:36px;height:36px}.launch{flex-wrap:wrap}.launch button{min-height:48px}.launch span{flex-basis:100%}
  .in-battle .battle-top{margin:4px 2px 7px;min-height:36px;gap:8px}.battle-top h2{font-size:16px}.battle-top .eyebrow{font-size:9px;letter-spacing:1px;margin:0 0 3px}.battle-top #round{font-size:10px}#turn{font-size:12px;margin-top:2px}
  .arena{padding:5px;border-radius:12px;box-shadow:inset 0 0 25px #0007}.hero{display:grid;grid-template-columns:32px auto auto auto;gap:3px 7px;width:100%;padding:4px 8px;min-height:46px;justify-content:start}.hero-portrait{width:30px;height:30px;grid-row:1/3}.hero strong{font-size:11px}.hero b{font-size:15px}.hero>span{font-size:11px}.hero small{grid-column:2/5;font-size:9px;white-space:nowrap}.zone-note{margin:3px;font-size:10px}
  .board{display:flex;gap:5px;min-height:94px;margin:5px 0;align-items:stretch}.unit{flex:0 1 calc((100% - 20px)/5);width:calc((100% - 20px)/5);max-width:95px;min-width:0;min-height:90px;padding:4px 2px;border-radius:18px 18px 6px 6px}.unit-art,.unit:after{border-radius:16px 16px 4px 4px}.unit strong{font-size:10px;line-height:1.2;margin-top:32px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.unit .stats{font-size:12px;margin-top:4px;width:100%;gap:2px}.unit small{font-size:8px;line-height:1.2;margin-top:3px;max-width:100%;overflow:hidden;white-space:nowrap}.unit.is-guard:before,.unit.is-frozen:before{font-size:17px}.board:empty:after{font-size:10px;letter-spacing:2px;margin:auto}.unit.targetable{outline-width:2px;outline-offset:1px}
  #feedback{font-size:11px;line-height:1.4;min-height:28px;padding:5px 4px}.hand-label{margin:8px 2px 0;font-size:12px}.hand-label small{display:block;font-size:9px;margin:2px 0;color:#b7c5c7}#mana{font-size:13px;white-space:nowrap}
  .hand{gap:8px;min-height:158px;padding:8px 3px 10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#8b7857 #162630;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
  .card{flex:0 0 112px;min-height:144px;padding:0 7px 6px;scroll-snap-align:start;border-radius:9px;box-shadow:0 3px 8px #0005}.card-art{width:calc(100% + 14px);margin-left:-7px;height:69px;margin-bottom:5px}.card .cost{top:4px;left:4px;width:25px;height:25px;font-size:13px}.card strong{font-size:11px;line-height:1.25}.card p{font-size:9px;line-height:1.35;min-height:24px;margin:4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card .stats{font-size:12px;margin-top:3px}.card:hover:not(:disabled){transform:none}.card.playable:not(:disabled){box-shadow:0 0 6px #edbd6333}
  .controls{position:sticky;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr auto;gap:6px;margin:0 -1px;padding:6px 6px max(6px,env(safe-area-inset-bottom));background:#0b1925f7;border:1px solid #a68e5b55;box-shadow:0 -5px 16px #0006;border-radius:10px 10px 0 0}.controls #hint{grid-column:1/-1;font-size:10px;min-width:0;min-height:14px;line-height:1.35}.controls button{min-height:44px;padding:8px;font-size:12px;white-space:nowrap}.controls #end{grid-column:3;margin-left:0}.controls #cancel{grid-column:2}.controls #coin{grid-column:1;grid-row:2}.in-battle footer{display:none}#battle>details{padding:10px 4px}summary{min-height:44px;padding:10px 0}
  dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;width:calc(100% - 20px);padding:20px}dialog button{min-height:44px}#gallery{max-height:90dvh;padding:12px}.gallery-heading{position:sticky;top:-12px;background:#1c2a34;z-index:2;padding:8px 0}.gallery-heading h2{font-size:22px}.gallery-heading .eyebrow{font-size:9px}#gallery-close{font-size:12px}#gallery-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.collection-card h3{font-size:14px}.collection-card p{font-size:12px}.fx-banner{font-size:22px;max-width:95vw;padding:12px 25px}.fx-flying-card{width:90px;height:120px}.fx-striker strong{font-size:10px}.fx-striker .stats{gap:4px;font-size:12px}.fx-number{font-size:19px;max-width:94vw}.fx-time-vortex{width:150px;height:150px}.fx-firestorm{width:230px;height:120px}
}
@media(max-width:360px){.unit strong{font-size:9px}.hero{gap:2px 5px}.card{flex-basis:104px}.deck-copy p{font-size:10px}.deck-copy h2{font-size:15px}.controls button{font-size:11px}.board{gap:4px}.unit{flex-basis:calc((100% - 16px)/5);width:calc((100% - 16px)/5)}}
@media(orientation:landscape) and (max-height:500px){#card-preview{display:grid;grid-template-columns:38% 1fr;max-width:640px}#card-preview:not([open]){display:none}#preview-art{height:100%;max-height:85dvh}.preview-copy{padding:12px}.preview-copy h2{font-size:20px}.preview-copy p{font-size:12px}#gallery-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.controls{bottom:0}}
@media(max-width:760px) and (max-height:700px){.board{min-height:72px;margin:4px 0}.unit{min-height:76px}.unit strong{margin-top:22px}.hero{min-height:40px;padding-block:3px}.hero-portrait{width:28px;height:28px}.in-battle .battle-top{min-height:30px}.hand{min-height:146px}.card{min-height:132px}.card-art{height:57px}#feedback{min-height:24px;padding-block:3px}}
@media(min-width:650px) and (max-width:1000px) and (max-height:500px){
 #battle{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:6px 10px}.battle-top{grid-column:1/-1}.arena{grid-column:1;grid-row:2/5;align-self:start}.hand-label{grid-column:2;grid-row:2;margin:0}.hand{grid-column:2;grid-row:3;min-height:145px;padding-block:4px}.controls{grid-column:2;grid-row:4;position:static;align-self:end;gap:4px;padding:4px}.controls #hint{font-size:9px}.controls button{font-size:10px;padding:5px}.controls #coin{font-size:9px}#battle>details{grid-column:1/-1}.board{min-height:64px;margin:3px 0}.unit{min-height:64px;max-width:84px}.unit strong{margin-top:14px}.hero{min-height:38px}.hero-portrait{width:26px;height:26px}#feedback{min-height:22px;padding-block:3px;font-size:10px}.card{min-height:132px;flex-basis:108px}.card-art{height:58px}header{min-height:44px;padding-bottom:3px}#menu-toggle{min-height:40px}.in-battle .battle-top{min-height:30px;margin:0}
}