/* pause: a stand-alone console panel over the arena */
#pause{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,7,5,.5);font-family:var(--f-ui);color:var(--g-txt);overflow:auto}
.cpanel{width:min(580px,100%);border-radius:10px;padding:0 12px 12px;border:2px solid #0d0f10;background:var(--steelbar),var(--brushed);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 20px 40px rgba(0,0,0,.7)}
.cpTop{position:relative;height:40px;display:flex;align-items:center;justify-content:center;font:900 16px var(--f-tab);letter-spacing:8px;color:#3dff3d;text-shadow:0 0 7px rgba(61,255,61,.8),0 1px 1px #000}
.cpBody{border:2px solid #0b0d0e;box-shadow:inset 0 0 18px rgba(0,0,0,.85);padding:14px 16px 16px}
.cpBody .help{font-size:12px;line-height:1.85;text-align:center;text-shadow:0 1px 2px #000,0 0 6px #000}
.cpBody .help b{color:#6dff5a;font:13px var(--f-lcd)}
.opt{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:12px;cursor:pointer;text-shadow:0 1px 2px #000}
.opt input{width:16px;height:16px;accent-color:#3cf03c;cursor:pointer}
.opt b{color:#6dff5a;font:13px var(--f-lcd)}
#hud.nofps #hFps{display:none}

@media (max-width:860px){
  #selDeck{padding:0 12px 10px 26px}
  .pipeLink{display:none}
  #selInfo{position:relative;right:auto;bottom:auto;width:auto;height:auto;margin:0 12px 12px}
  .infScr{flex:none}
  .infGrille{display:none}
  .mrow{grid-template-columns:150px minmax(0,1fr)}
  .mimg{height:110px}
  .mbuy{grid-column:1/-1;border-left:0;border-top:2px solid rgba(255,255,255,.25);padding:8px 0 0}
  .arWrap{flex-direction:column;gap:10px}
  .arSide{order:-1;width:100%;padding:0;display:flex;gap:6px;overflow-x:auto;touch-action:pan-x}
  .arSide::before,.arSide::after,.arFoot,.pbtn::after,.pbtn .clamp,.pbtn.on::before{display:none}
  .pbtn{margin:0;width:auto;flex:none;padding:6px 10px}
  .pbtn.on{box-shadow:0 0 0 2px var(--g-hi)}
}
@media (max-width:700px){
  #decoTop{height:12px}#topLcd{top:calc(env(safe-area-inset-top,0px));height:12px;font-size:10px;padding:0 6px}
  #rail{height:42px;margin:0 3px;padding:0 26px}
  #rail::before,#rail::after{width:12px;height:12px;margin-top:-6px}#rail::before{left:7px}#rail::after{right:7px}
  .tab{min-width:86px;font-size:10px;letter-spacing:1px}
  #cMid{padding:0 3px}.cSide{width:6px}
  #cBot{height:calc(50px + env(safe-area-inset-bottom,0px))}#decoBot{height:50px}#cBot .foot{top:37px;font-size:9px}
  .wgrid,.two,.prof{grid-template-columns:1fr}
  .wcard{grid-template-columns:92px minmax(0,1fr);gap:10px}.wimg{width:92px;height:69px}
  .pin{padding:12px 10px 20px}
  .hgBot{grid-template-columns:1fr}
  #hBuy{position:static;width:auto;max-height:none;margin:0 12px 12px}
  #hView{min-height:34vh}
  #selView{min-height:36vh}
  #selDeck{padding:0 10px 10px 22px}
  .crtIn{height:96px}
  .lgRow{flex-wrap:wrap}.lgBig{flex:1 1 100%}.lgT{flex:1 1 40%}.lgT.on{flex:1 1 100%}
  .lgGo{justify-content:center}.lgGo span{display:none}
  .mrow{grid-template-columns:110px minmax(0,1fr)}.mimg{height:84px}
  .tbl{font-size:11px}.tbl th,.tbl td{padding:5px 4px}
  .tbl.hs th:nth-child(5),.tbl.hs td:nth-child(5){display:none}
  #cBot .foot{display:none}
}
/* login / register on the title screen */
#auth{display:flex;flex-direction:column;gap:8px;width:min(340px,86vw);padding:14px 18px 12px;margin-top:14px;text-align:left;font-size:12px}
#auth label{display:flex;flex-direction:column;gap:3px;color:#9fd79a;font:700 10px var(--f-tab);letter-spacing:1px}
#auth input{font:15px var(--f-lcd);padding:6px 8px;background:#0b170b;color:var(--lcd);border:2px solid #2b3133;border-radius:3px;box-shadow:inset 0 0 8px #000;outline:none;user-select:text;-webkit-user-select:text}
#auth input:focus{border-color:var(--g-hi)}
.authT{font:900 13px var(--f-tab);letter-spacing:4px;color:var(--g-hi);text-align:center}
.authMsg{min-height:1.3em;color:#ffb39c;font-size:11px;text-align:center}
#auth .lnk{font-size:11px;text-align:center}
#toast{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:50;padding:8px 16px;border-radius:4px;background:rgba(9,24,9,.95);border:1px solid #2f8f2f;color:#cfe8c9;font:12px var(--f-ui);box-shadow:0 4px 12px rgba(0,0,0,.6);max-width:90vw;text-align:center;pointer-events:none}
#toast.bad{border-color:#e2482d;color:#ffd2c4}