/* NodeClash v6.3.9 — additive universal responsive layer.
   Keeps existing engine/UI intact and improves phone, tablet, desktop and wide-screen fit. */
html{scroll-behavior:smooth}
body{min-width:0;width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;max-width:100%}
button,a,.nav-chip,.nc-market-option,.nc-market-btn,.btn{touch-action:manipulation}
button,.nav-chip,.nc-market-option,.nc-market-btn,.btn{min-height:44px}

/* Safe-area support for notched phones and edge-to-edge browsers. */
.site-wrap,.play-stage-shell{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
.play-stage-shell{padding-bottom:max(10px,env(safe-area-inset-bottom))}

/* Prevent long labels and odds from forcing horizontal overflow. */
.play-stage-shell *, .site-wrap *{min-width:0;overflow-wrap:anywhere}
.field-input{width:100%;min-height:44px}

/* Desktop: use the available width without making the board microscopic. */
@media (min-width:1181px){
  .play-stage-shell{width:min(1800px,calc(100% - 24px));margin:0 auto}
  .play-stage-main{grid-template-columns:minmax(250px,300px) minmax(520px,1fr) minmax(280px,340px)}
  .board-focus-wrap{min-width:0}
}

/* Laptop / tablet landscape. */
@media (max-width:1180px){
  .play-stage-shell{width:min(100% - 16px,1200px);margin:8px auto 18px}
  .play-topbar{gap:12px}
  .play-topbar .nav-chips{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px;scrollbar-width:thin}
  .play-topbar .nav-chip{flex:0 0 auto;white-space:nowrap}
  .play-stage-main{grid-template-columns:minmax(0,1fr)}
  .play-stage-main>.play-panel{order:2}
  .play-stage-main>.board-focus-wrap{order:1}
  .board-focus-wrap{width:100%;min-width:0}
  .board-stage-center{width:100%;overflow:visible}
  .board{max-width:min(92vw,620px)}
  .nc-market-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Tablets and large phones. */
@media (max-width:900px){
  .play-stage-shell{width:calc(100% - 12px);margin:6px auto 14px}
  .play-topbar{padding:12px}
  .play-brand-mini h1{font-size:clamp(1.15rem,4vw,1.6rem)}
  .play-brand-mini p{font-size:.74rem;line-height:1.35}
  .board-focus-wrap{padding:14px}
  .board-command-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .board-battle-hud{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .board-slide-banner{align-items:flex-start;flex-wrap:wrap}
  .board-slide-banner>div{min-width:0}
  .board-stage-center{padding:clamp(8px,2vw,18px)}
  .board{width:min(92vw,560px);max-width:100%;}
  .nc-market-grid{grid-template-columns:1fr}
  .nc-market-lower{grid-template-columns:1fr 1fr}
  .nc-rm-shell{grid-template-columns:1fr}
}

/* Phones: stack controls, make odds/betslip touch-friendly, preserve board visibility. */
@media (max-width:640px){
  :root{--board-size:min(92vw,520px);--cell-gap:clamp(6px,1.8vw,9px)}
  html,body{overflow-x:hidden}
  .play-stage-shell{width:100%;margin:0 auto;padding-top:max(4px,env(safe-area-inset-top));padding-left:max(5px,env(safe-area-inset-left));padding-right:max(5px,env(safe-area-inset-right))}
  .play-topbar,.play-panel,.board-focus-wrap{border-radius:18px;padding:11px}
  .play-topbar{display:block}
  .play-topbar-left{width:100%;margin-bottom:8px}
  .play-topbar .nav-chips{gap:6px;margin:0 -2px;width:calc(100% + 4px)}
  .play-topbar .nav-chip{padding:9px 12px;font-size:.78rem;min-height:42px}
  .board-focus-head{gap:8px;margin-bottom:9px}
  .board-focus-title{font-size:clamp(1.35rem,7vw,2rem)}
  .board-focus-note{font-size:.78rem;line-height:1.4}
  .board-command-row{grid-template-columns:1fr 1fr;gap:7px}
  .board-command-row .btn{padding:10px 8px;font-size:.78rem;min-height:46px}
  .board-battle-hud{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px}
  .hud-chip{padding:8px 9px;min-height:48px}
  .hud-chip span{font-size:.62rem}
  .hud-chip strong{font-size:.9rem}
  .board-slide-banner{padding:9px 10px;gap:8px}
  .board-slide-banner strong{font-size:.92rem}
  .board-slide-banner span{font-size:.68rem;line-height:1.35}
  .board-stage-center{padding:5px;min-height:0}
  .board{width:min(94vw,520px);max-width:100%;margin:0 auto}
  .board-cell{min-width:0;min-height:0}
  .nc-market-wrap{padding:10px!important;border-radius:18px!important}
  .nc-market-head{flex-direction:column;align-items:flex-start;gap:8px}
  .nc-market-head-meta{width:100%;display:flex;flex-wrap:wrap;gap:6px}
  .nc-market-stake-row{display:grid;grid-template-columns:1fr;align-items:stretch}
  .nc-market-stake-row label,.nc-market-stake-row input{width:100%}
  .nc-market-stake-row input{min-height:46px}
  .nc-market-actions{display:grid;grid-template-columns:1fr 1fr}
  .nc-market-btn{width:100%;min-height:46px}
  .nc-rm-summary{grid-template-columns:1fr}
  .nc-rm-leg{grid-template-columns:minmax(0,1fr) auto;}
  .nc-rm-leg .nc-rm-odds{grid-column:1}
  .nc-rm-leg .nc-rm-remove{grid-column:2;grid-row:1 / span 2}
  .nc-ai-prematch-countdown{width:min(92vw,360px)!important;max-width:calc(100% - 16px)!important}
  .nc-ai-prematch-countdown strong{font-size:clamp(2rem,12vw,3.2rem)!important}
}

/* Small phones. */
@media (max-width:420px){
  .play-stage-shell{padding-left:4px;padding-right:4px}
  .play-panel,.board-focus-wrap{padding:9px;border-radius:16px}
  .board-command-row{grid-template-columns:1fr;}
  .board-battle-hud{grid-template-columns:1fr 1fr}
  .board-focus-title{font-size:1.3rem}
  .board-focus-note{font-size:.72rem}
  .ppt-chip{font-size:.64rem;padding:7px 9px}
  .nc-market-actions{grid-template-columns:1fr}
  .nc-market-card-head{font-size:.68rem}
  .nc-market-option{padding:10px;min-height:48px}
}

/* Landscape phones: use horizontal room efficiently while keeping touch controls. */
@media (max-width:900px) and (orientation:landscape){
  .play-topbar{padding:8px 10px}
  .play-topbar-left{margin-bottom:5px}
  .board-focus-wrap{padding:9px}
  .board-focus-head{margin-bottom:6px}
  .board-focus-note{display:none}
  .board-battle-hud{grid-template-columns:repeat(5,minmax(0,1fr));}
  .board-command-row{grid-template-columns:repeat(5,minmax(0,1fr));}
  .board-stage-center{padding:4px}
  .board{width:min(62vw,72vh,560px)}
}

/* Very wide monitors / TVs. */
@media (min-width:1800px){
  .play-stage-shell{width:min(1900px,calc(100% - 40px))}
  .play-stage-main{grid-template-columns:320px minmax(650px,1fr) 340px;gap:18px}
}

/* Accessibility / reduced motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}