/* =====================================================================
   PHONE DUEL LAYOUT (<= 760px): one screen, no scrolling, Master Duel mobile feel
   ===================================================================== */
.phoneonly{display:none}
@media (max-width:760px){
  .phoneonly{display:inline-block}
  body.duelpage{overscroll-behavior:none}
  .dhdr{height:44px;padding:0 10px;gap:8px}
  .dhdr .logo{font-size:20px}.dhdr .logo .shard{width:18px;height:22px}
  .dhdr .chip,.dhdr a.btn{display:none}
  .dhdr .room{font-size:11px;padding:4px 7px}

  #duel{--cw:min(46px,calc((100vw - 26px) / 9.25),calc((100dvh - 330px) / 7.4));
    grid-template-columns:minmax(0,1fr)!important;height:calc(100dvh - 44px);padding:4px;overflow:hidden}
  #duel .table{height:100%;padding:4px;border-radius:14px;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:visible}

  /* log + card reader become a pull-down sheet */
  .dside{display:none;position:fixed;left:6px;right:6px;top:48px;height:58dvh;z-index:330;padding:8px;border-radius:16px;background:rgba(10,12,20,.97);border:1px solid #2a3350;box-shadow:0 20px 60px rgba(0,0,0,.8)}
  #duel.showlog .dside{display:flex}
  .dside .prev{max-height:38%;min-height:0}
  .dside .logbox{height:auto;flex:1}

  /* opponent strip */
  .topbar{gap:8px;padding:2px 4px;flex-wrap:nowrap}
  .topbar .hand.opp{min-height:0;justify-content:flex-end;padding-right:6px}
  .topbar .hand.opp .dc{width:22px;height:32px;margin:0 -6px}
  .lpcard{min-width:0;padding:4px 10px 4px 4px;gap:7px;border-radius:12px}
  .lpcard .av{width:34px;height:34px;font-size:19px}
  .lpcard .av i{width:8px;height:8px;right:1px;bottom:1px}
  .lpcard .nm{font-size:10px}.lpcard .nm span{display:none}
  .lpcard .lp{font-size:24px;letter-spacing:1px}
  .lpbar{width:80px;height:4px;margin-top:2px}
  .lpcard .cnts{display:none}

  /* field */
  .arena{perspective:800px;perspective-origin:50% 0%}
  .mat{transform:rotateX(18deg);padding:6px 6px 8px;border-radius:14px;transform-origin:50% 50%}
  .holo3d{transform:translateX(-50%) rotateX(-18deg);width:calc(var(--cw) * 1.3);height:calc(var(--cw) * 1.3)}
  .mat .board{gap:calc(var(--cw) * .1)}
  .midrow{gap:calc(var(--cw) * .1)}
  .zone .lab{font-size:6px;letter-spacing:.5px}
  .zone .cnt{font-size:8px;top:-6px;right:-4px;padding:0 4px}
  .midinfo{font-size:7px;letter-spacing:.5px}
  .midinfo b{font-size:15px!important}
  .dc .stats{font-size:7px;padding:1px 0}
  .dc .mats{font-size:6px}

  /* my hand + bar */
  .botbar{flex-wrap:wrap;gap:4px;padding:0 2px}
  .botbar .hand.mine{order:1;flex-basis:100%;min-height:calc(var(--cw) * 1.62 * 1.458 * .8);padding:0}
  .botbar .hand.mine .dc{width:calc(var(--cw) * 1.62);height:calc(var(--cw) * 1.62 * 1.458);margin:0 calc(var(--cw) * -.3)}
  .botbar .hand.mine .dc:hover{transform:translateY(var(--y,0)) rotate(var(--r,0deg))}
  .botbar .hand.mine .dc:active{transform:translateY(-24%) scale(1.25) rotate(0deg);z-index:20}
  .botbar .lpcard{order:2;flex:1}

  /* actions row: phases + END TURN + more */
  .acts{position:static!important;transform:none!important;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;padding:4px 2px 2px}
  .acts .phases{flex-direction:row;width:auto;gap:3px}
  .acts .phases button{width:34px;padding:7px 0;font-size:12px;letter-spacing:.5px;border-radius:7px}
  .endturn{width:58px;height:58px;font-size:13px;letter-spacing:1px;border-width:2px}
  .acts .tools{display:none;order:9;flex-basis:100%;grid-template-columns:repeat(7,1fr);gap:4px}
  .acts.open .tools{display:grid}
  .acts .tool{height:36px;font-size:16px}
  .acts .tool.phoneonly{width:38px;height:38px}

  /* menus as bottom sheets with full card text */
  .cmenu{left:6px!important;right:6px!important;top:auto!important;bottom:8px;max-width:none;max-height:72dvh;overflow:auto;border-radius:16px;padding:8px}
  .cmenu .mh img{width:46px}
  .cmenu .mtx{font-size:12px;line-height:1.45;color:#d6cfe0;background:#0d0b11;border:1px solid #2a2431;border-radius:10px;padding:8px 10px;margin:2px 0 6px;max-height:150px;overflow:auto;white-space:pre-wrap}
  .cmenu button{padding:11px 12px;font-size:14px}
  .banner{min-width:0;width:92%;top:40%;padding:12px}
  .banner h4{font-size:22px}
  .modehint{top:auto;bottom:calc(var(--cw) * 4);font-size:11px}

  /* cinematic sizing */
  .cutin .cicard{width:56vw}
  .cutin .cilabel{top:calc(50% + 32vw);font-size:30px;letter-spacing:4px}
  .tb-band{padding:14px 0}.tb-band b{font-size:38px;letter-spacing:5px}
  .ds-word{font-size:110px}
  .dmg{font-size:38px}
  .over .res{font-size:64px}
}