/* AI Quest: real device viewport, reachable controls, readable menus. */
html{width:100%;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:0}
button,a,input,textarea{touch-action:manipulation}
button{min-height:44px}
input,textarea,select{font-size:16px!important}
#game{min-height:100svh;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));gap:10px}
#screen{box-shadow:4px 4px 0 var(--magenta)}
.hudbtns{flex-wrap:wrap}
.hudbox.obj{min-width:0}
.hb{min-height:44px;font-family:var(--sans);font-size:14px;font-weight:700;padding:8px 12px}
.choices{gap:6px}.ch{min-height:48px;padding:10px;border:1px solid var(--line);border-radius:6px;font-size:16px}
.btn.small,.ltab,.lc-chip{min-height:44px;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0}
#pad{margin-top:auto;padding-block:8px;flex-shrink:0}
.dpad button,.ab{border-radius:12px;box-shadow:0 4px 0 #071d2c}
.dpad button{font-size:19px}.ab{font-family:var(--sans);font-size:19px;font-weight:800}.ab.b{font-size:14px}
.dpad button.on,.dpad button:active,.ab:active{transform:translateY(2px);box-shadow:0 2px 0 #071d2c}
#lchat{border-radius:10px;border-top:2px solid var(--line);flex-shrink:0}
.lc-head{gap:6px}.lc-t{font:700 14px var(--sans)}.lc-hint{display:none}
.lc-mic{min-height:44px;font-size:14px;border-radius:6px}.lc-tog{min-width:44px;min-height:44px;margin-left:auto}
.lc-feed{max-height:100px}.lc-bar{flex-wrap:wrap}.lc-bar input{flex-basis:110px;min-height:44px}
.duel-invite{position:fixed;inset:0;z-index:110;background:rgba(2,8,22,.85);display:grid;place-items:center;padding:20px}
.duel-invite-card{width:min(100%,440px);background:var(--surface);border:2px solid var(--main);border-radius:18px;padding:24px;box-shadow:0 16px 80px #000;display:flex;flex-direction:column;gap:16px}
.duel-invite h2{font-size:24px;margin:0}.duel-invite p{font-size:17px;margin:0;line-height:1.5}
.duel-invite .row{display:grid;grid-template-columns:1fr 1fr}.duel-invite button{min-height:52px;font:700 16px var(--sans);border-radius:8px;letter-spacing:0}
.duel-mode .hpbar,.duel-mode .phbox,.duel-mode .itembar{display:none}
.duel-mode .vs{display:none}
.duel-mode .arena{height:180px}.duel-mode .mname{font-family:var(--sans);font-size:20px}
.duel-mode .bt-top{grid-template-columns:1fr}
.toast{font:600 14px/1.4 var(--sans);border-radius:8px;width:max-content;max-width:calc(100% - 24px)}
.coach-in{animation:questCoachIn .2s ease;max-height:calc(100dvh - 32px);overflow-y:auto}
@keyframes questCoachIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  #game{padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right));gap:9px}
  #hud{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;flex-shrink:0}
  .hudbox{min-width:0;padding:8px;gap:5px;border-radius:8px}
  .hudname{font-family:var(--sans);font-size:13px;font-weight:800;overflow-wrap:anywhere}
  .hearts i{width:14px}.xp{width:100%;max-width:160px}
  .obj{font-size:13px;line-height:1.35}.obj .hk{font-size:9px}#h-obj{font-size:13px}
  #hud>.hudbox:last-child{grid-column:1/-1;align-items:stretch!important;flex-direction:column;gap:6px}
  .row-s{display:flex;justify-content:space-between;align-items:center;gap:6px}
  .coin{font-size:15px}.lenc{font-size:12px}
  .hudbtns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .hb{font-size:12px;padding:6px 3px;line-height:1.2;min-width:0;border-radius:6px}
  #screen{border-width:2px}
  #dlg{position:static;margin-top:8px;padding:12px;max-height:230px;overflow-y:auto;border-radius:10px;gap:8px}
  #dlg .txt{font-size:16px;line-height:1.45}#dlg .who{font:800 13px var(--sans)}
  #d-por{width:40px;height:40px;flex-shrink:0}#dlg .dcol{min-width:0}
  #pad{gap:8px;padding-inline:3px}
  .dpad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px}
  .abs{gap:10px}.ab{width:68px;height:68px}.ab.b{width:52px;height:52px}
  .ov{padding-inline:12px}.ov-in{gap:12px}.field input{min-height:52px}
  .logo{font-size:36px}.title-ov .tag{font-size:21px}
  .hero-card{padding:12px 8px;min-height:120px}.hero-card .hj,.hero-card .hp{font-size:13px}
  .battle-ov .arena{height:132px}.battle-ov.duel-mode .arena{height:145px}
  .kpick,.opt,.seg{min-height:52px;font-size:16px}.battle-ov .bt-body{gap:10px!important}
}
@media (max-width:370px){.dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}.abs{gap:8px}.ab{width:60px;height:60px}.ab.b{width:46px;height:46px}.hudname{font-size:12px}}
@media (orientation:portrait) and (max-width:760px){
  #screen{aspect-ratio:4/3}
  #map{position:static;width:100%;height:auto;max-width:100%}
}
@media (orientation:portrait) and (max-height:740px) and (max-width:760px){
  #screen{aspect-ratio:4/3}
  #game{padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom));gap:6px}
  .hudbox{padding:5px;gap:3px}#hud>.hudbox:last-child{padding:4px;gap:0}
  .row-s{display:none}.hudname{font-size:12px}.hearts i{width:11px}.obj,#h-obj{font-size:12px;line-height:1.25}
  .obj .hk{display:none}.xp{height:4px}.lc-head{gap:4px}#lchat{padding:4px 6px}
  #pad{padding-block:4px}.dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}
}
@media (orientation:landscape) and (max-height:600px){
  #game{height:100dvh;min-height:0;max-width:none;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));gap:6px}
  #hud{display:grid;grid-template-columns:1fr 1.2fr 1.8fr;gap:6px;min-height:56px;height:56px;flex-shrink:0}
  #hud>.hudbox:last-child{grid-column:auto;flex-direction:row;align-items:center!important;padding:4px}
  .hudbox{padding:4px 8px;gap:3px;border-radius:6px}.hudname{font:700 11px var(--sans)}
  .obj,#h-obj{font-size:12px;line-height:1.25}.obj .hk{display:none}.xp{height:4px}.hearts i{width:10px}
  .row-s{display:none}.hudbtns{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .hb{min-height:44px;padding:4px 2px;font:700 11px var(--sans);border-radius:5px}
  #stage{width:min(calc(100vw - 240px),calc((100dvh - 80px)*4/3));margin:0 auto;min-height:0}
  #screen{border-width:2px;box-shadow:3px 3px 0 var(--magenta)}
  #dlg{position:absolute;left:0;right:0;bottom:0;margin:0;max-height:85%;padding:8px;gap:6px;background:rgba(7,11,20,.96)}
  #dlg .txt{font-size:14px;line-height:1.35;min-height:0}#dlg .who{font-size:11px}#d-por{width:28px;height:28px}
  #pad{display:flex;position:fixed;inset:76px max(10px,env(safe-area-inset-right)) 12px max(10px,env(safe-area-inset-left));margin:0;padding:0;pointer-events:none;align-items:center;z-index:8}
  .dpad,.abs{pointer-events:auto}.dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:3px}
  .abs{flex-direction:column-reverse;gap:14px}.ab{width:60px;height:60px}.ab.b{width:48px;height:48px}
  #lchat{position:fixed;right:8px;bottom:8px;width:88px;padding:3px;z-index:9;border:0;background:transparent}
  #lchat.min .lc-t{display:none}#lchat .lc-head{gap:3px;justify-content:flex-end}#lchat.min .lc-mic{font-size:11px;padding:4px;min-height:44px}
  #lchat:not(.min){width:min(420px,calc(100vw - 200px));background:var(--surface);border:2px solid var(--line);right:100px;bottom:8px}
  .lc-tog{min-width:30px;min-height:36px}.lc-feed{max-height:70px}
  .battle-ov .ov-in{max-width:820px}.battle-ov .arena{height:100px;position:static}.battle-ov.duel-mode .arena{height:100px}
  .battle-ov{padding-block:8px}.battle-ov .bt-body{padding-bottom:20px}.duel-mode .mname{font-size:16px}
}

/* lanskap pendek: battle tidak membesar, tetap di tengah */
@media (orientation:landscape) and (max-height:600px){
  .ov{align-items:flex-start}
  .ov-in{max-width:760px;margin:0 auto;gap:8px}
  .battle-ov .arena{height:112px}.battle-ov .arena.big{height:160px}
  .battle-ov .bt-top{gap:8px}.mname{font-size:10px}
  .brief .bt-task{font-size:14px}.log{font-size:13px;padding:5px 10px}
  .card{min-height:70px;padding:8px}.card .v{font-size:13px}.hand{gap:8px}
  .opt,.seg,.kpick{font-size:13px;min-height:40px}.qcard span:first-child{font-size:14px}
  .big{font-size:20px}.dmg{font-size:14px}.vs{font-size:16px}
  .item{min-height:36px;font-size:12px}.itembar{gap:4px}
  .slots{gap:6px}.slot{min-height:40px;padding:4px}.slot .v{font-size:11px}
  .coach-in{max-height:calc(100dvh - 24px)}
}