/* Online match and join lobby component styles. Changes here participate in the asset build version. */
@font-face{
  font-family:"Roboto Condensed";
  src:url("../../assets/fonts/RobotoCondensed-Variable.ttf") format("truetype");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

.online-lobby .lobby-hero{max-width:720px}
.online-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.online-preset-block{display:grid;gap:10px;max-width:380px;margin:18px 0 0;text-align:left}
.online-preset{display:grid;gap:7px;margin:0;text-align:left}
.online-preset span{color:var(--muted);font-weight:800;text-transform:uppercase;font-size:.78rem}
.online-preset select{border:1px solid rgba(80,200,255,.55);background:#071523;color:#eefaff;border-radius:4px;padding:9px 10px}
.online-builder-button{width:100%;min-height:42px}
.online-deck-edited{border:1px solid rgba(111,235,148,.45);background:rgba(20,80,45,.28);color:#c9ffd6;border-radius:4px;padding:8px 10px;font-weight:800;font-size:.82rem}
.online-builder-backdrop,.online-builder-sheet{text-align:left}
.online-status{border:1px solid rgba(80,200,255,.5);background:rgba(8,22,36,.86);color:#dff8ff;border-radius:6px;padding:9px 10px;margin-top:10px;overflow-wrap:anywhere}
.online-link-button{text-decoration:none}
.online-game .slot-button{cursor:pointer}
.online-game .slot-button:not(.is-legal){cursor:default}
.online-game .slot-button.seal-open-breach{
  border-color:#ff3b35;
  box-shadow:0 0 18px rgba(255,59,53,.68),inset 0 0 20px rgba(255,59,53,.22);
}
.online-game .turn-banner .turn-title,
.online-game .turn-banner .turn-subtitle{
  width:100%;
  max-width:100%;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.online-game .turn-banner.is-text-tight{
  padding-left:12px;
  padding-right:12px;
  padding-top:2px;
  padding-bottom:2px;
}
.online-game .turn-banner.is-text-tight .turn-title{
  max-height:none;
  overflow:visible;
  line-height:1.02;
  letter-spacing:-.02em;
}
.online-game .turn-banner.is-text-tight .turn-subtitle{
  margin-top:1px;
  line-height:1.04;
  letter-spacing:-.012em;
}
.online-game .engineering-cell.is-doomsday .engineering-cell-icon{
  position:absolute;
  left:0;
  right:0;
  top:16%;
  color:#e4b8ff;
  font-family:"Roboto Condensed",Roboto,Arial,sans-serif;
  font-size:clamp(8px,.86vw,11px);
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  text-align:center;
  opacity:1;
  transform:none;
  text-shadow:0 0 7px rgba(199,93,255,.8),0 1px 2px rgba(0,0,0,.9);
}
.online-game .engineering-cell.is-doomsday .engineering-cell-value{
  position:absolute;
  left:50%;
  bottom:10%;
  min-width:0;
  max-width:none;
  padding:1px 4px;
  color:#fff;
  font-family:"Roboto Condensed",Roboto,Arial,sans-serif;
  font-weight:900;
  transform:translateX(-50%);
  text-shadow:0 0 7px rgba(224,165,255,.78),0 1px 2px rgba(0,0,0,.92);
}
.online-game .card[disabled]{cursor:not-allowed}
.online-game .danger-button{border-color:rgba(255,122,116,.7);color:#ffd6d2}
.online-game .hand-dock{z-index:20}
.online-game .control-stack{display:grid;gap:10px}
.online-game .action-meter{border:1px solid rgba(80,200,255,.28);background:rgba(8,22,36,.72);color:#b9d1df;border-radius:4px;padding:10px;line-height:1.35;overflow-wrap:anywhere}
.online-game .log-detail{margin-top:5px;color:#9eddf2;font-size:.78rem;font-weight:800;line-height:1.28;overflow-wrap:anywhere}
.online-game .log-entry.bot .log-detail{color:#ffb4ac}
@media (max-width:900px){.online-game.game{overflow:auto;height:auto;min-height:100vh}.online-game .hand-dock{position:sticky;bottom:0}}

@media (max-width:900px) and (orientation:portrait),
       (max-width:1280px) and (max-height:620px) and (orientation:landscape){
  .online-game.game{height:100dvh;min-height:0;overflow:hidden}
  .online-game .hand-dock{position:relative;bottom:auto}
  .online-game .top-actions,
  .online-game .mobile-log-peek{display:none}
  .online-game .mobile-action-row{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px;align-items:stretch;height:100%;min-width:0}
  .online-game .primary-action-slot{display:grid;min-width:0}
  .online-game .primary-action-slot>.primary-button{width:100%;height:100%;min-width:0}
  .online-game .mobile-action-menu-shell{display:block;z-index:65;pointer-events:auto}
  .online-game .mobile-action-menu-toggle{height:100%;min-height:42px}
}

@media (max-width:620px) and (orientation:portrait){
  .online-game.game{grid-template-rows:60px minmax(0,1fr) 100px 48px}
  .online-game .right-rail{grid-template-columns:minmax(0,1fr)}
  .online-game .controls{grid-column:1}
  .online-game .hand-scroll{grid-auto-columns:74px;padding:6px 1px 4px}
  .online-game .hand-card-wrap,
  .online-game .card{height:90px}
  .online-game .card{grid-template-rows:minmax(0,1fr) 24px;padding:25px 5px 5px}
  .online-game .card-art{font-size:1.42rem}
  .online-game .card-name{min-height:24px;padding-top:3px;font-size:.56rem;line-height:1.04}
}

@media (max-width:1280px) and (max-height:620px) and (orientation:landscape){
  .online-game{--mobile-action-controls-width:clamp(196px,30vw,230px)}
  .online-game .controls{width:var(--mobile-action-controls-width)}
  .online-game .mobile-action-row{grid-template-columns:42px minmax(0,1fr);gap:6px}
  .online-game .mobile-action-menu-toggle{min-height:58px}
  .online-game .mobile-action-menu-panel{left:auto;right:0;transform-origin:right bottom}
  .online-game .hand-dock{padding-right:calc(var(--mobile-action-controls-width) + 16px)}
  .online-game .hand-arrow.right{right:calc(var(--mobile-action-controls-width) + 4px)}
  .online-game .hand-scroll{grid-auto-columns:76px;padding:6px 1px 4px}
  .online-game .hand-card-wrap,
  .online-game .card{height:86px}
  .online-game .card{grid-template-rows:minmax(0,1fr) 23px;padding:24px 5px 5px}
  .online-game .card-art{font-size:1.36rem}
  .online-game .card-name{min-height:23px;padding-top:3px;font-size:.54rem;line-height:1.04}
}

.online-game .battle-action-label{display:block}
.online-game .battle-action-subtitle{display:none}

@media (max-width:620px) and (orientation:portrait){
  .online-game .mobile-action-menu-shell{
    position:fixed;
    z-index:65;
    top:calc(50dvh - 81px);
    left:-57px;
    width:107px;
    height:77px;
    min-width:107px;
    display:block;
    overflow:visible;
    pointer-events:auto;
  }

  .online-game .mobile-action-menu-toggle{
    position:relative;
    width:107px;
    height:77px;
    min-width:107px;
    min-height:77px;
    padding:0 0 0 57px;
    box-sizing:border-box;
    display:grid;
    place-items:center;
    gap:0;
    border:0;
    background-color:transparent;
    background-image:
      url("../../assets/ui/battle-menu-inner.svg"),
      url("../../assets/ui/battle-menu-frame.svg");
    background-position:right center,right center;
    background-repeat:no-repeat,no-repeat;
    background-size:47px 69px,50px 77px;
    box-shadow:none;
    filter:drop-shadow(0 0 4px rgba(157,213,246,.34)) drop-shadow(0 5px 8px rgba(0,0,0,.64));
    clip-path:none;
  }

  .online-game .mobile-action-menu-toggle:hover{
    border-color:transparent;
    box-shadow:none;
    filter:drop-shadow(0 0 7px rgba(199,234,255,.58)) drop-shadow(0 5px 8px rgba(0,0,0,.64)) brightness(1.08);
  }

  .online-game .mobile-action-menu-toggle span{
    width:19px;
    height:14px;
    display:block;
    background:transparent url("../../assets/ui/battle-menu-icon.svg") center/19px 14px no-repeat;
    box-shadow:none;
    filter:drop-shadow(0 0 5px rgba(255,255,255,.34));
  }

  .online-game .mobile-action-menu-toggle::before,
  .online-game .mobile-action-menu-toggle::after{
    display:none;
  }

  .online-game .mobile-action-menu-panel{
    left:calc(100% + 8px);
    top:50%;
    bottom:auto;
    transform:translate(-8px,-50%) scale(.98);
    transform-origin:left center;
  }

  .online-game .mobile-action-menu-panel.is-open{
    transform:translate(0,-50%) scale(1);
  }

  .online-game .primary-action-slot:not(:has(>.battle-action-button)){
    grid-column:1 / -1;
  }

  .online-game .primary-action-slot:has(>.battle-action-button){
    position:fixed;
    z-index:45;
    top:calc(50dvh - 81px);
    right:16px;
    width:64px;
    height:77px;
    display:grid;
    pointer-events:auto;
  }

  .online-game .primary-action-slot>.battle-action-button{
    width:64px;
    height:77px;
    min-width:64px;
    min-height:77px;
    padding:8px 5px 7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:0;
    background-color:transparent;
    background-image:
      url("../../assets/ui/battle-action-button-inner.svg"),
      url("../../assets/ui/battle-action-button-frame.svg");
    background-position:center,center;
    background-repeat:no-repeat,no-repeat;
    background-size:60px 73px,64px 77px;
    color:#ff8249;
    box-shadow:none;
    filter:drop-shadow(0 0 5px rgba(227,137,41,.5)) drop-shadow(0 5px 8px rgba(0,0,0,.68));
    clip-path:polygon(15.77% 0,84.23% 0,100% 13.4%,100% 86.9%,84.23% 100%,15.77% 100%,0 86.9%,0 13.4%);
    text-align:center;
  }

  .online-game .primary-action-slot>.battle-action-button.is-attention{
    animation:battleActionPulse 1.6s ease-in-out infinite;
  }

  .online-game .primary-action-slot>.battle-action-button:hover{
    border-color:transparent;
    box-shadow:none;
    filter:drop-shadow(0 0 7px rgba(255,197,135,.72)) drop-shadow(0 5px 8px rgba(0,0,0,.68)) brightness(1.08);
  }

  .online-game .battle-action-button .battle-action-label{
    max-width:54px;
    color:#ff8249;
    font-size:10px;
    font-weight:1000;
    line-height:1.06;
    letter-spacing:-.02em;
    text-transform:uppercase;
    text-shadow:0 1px 2px rgba(0,0,0,.62);
  }

  .online-game .battle-action-button .battle-action-subtitle{
    display:block;
    max-width:54px;
    color:#ffd2bd;
    font-size:7px;
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.01em;
    text-transform:none;
    text-shadow:0 1px 2px rgba(0,0,0,.74);
  }

  .online-game .ship-engineering-bay{
    left:13px;
    width:34px;
    height:auto;
    max-width:none;
    display:grid;
    grid-template-columns:34px;
    grid-auto-rows:28.32px;
    grid-auto-flow:row;
    align-items:stretch;
    justify-content:start;
    align-content:start;
    gap:5.24px;
    transform:none;
    z-index:8;
  }

  .online-game .ship-zone.enemy-zone .ship-engineering-bay{
    position:fixed;
    left:16px;
    top:max(66px, calc(50dvh - 256.52px));
    bottom:auto;
  }

  .online-game .ship-zone.player-zone .ship-engineering-bay{
    top:38.2px;
    bottom:auto;
  }

  .online-game .engineering-cell{
    box-sizing:border-box;
    width:34px;
    height:28.32px;
    min-width:34px;
    aspect-ratio:auto;
    padding:0;
    border:0;
    background-color:transparent;
    background-image:url("../../assets/ui/engineering-cell-frame.svg");
    background-position:center;
    background-repeat:no-repeat;
    background-size:34px 28.32px;
    clip-path:none;
    box-shadow:none;
    overflow:visible;
  }

  .online-game .engineering-cell::before{
    display:none;
  }

  .online-game .engineering-cell.is-empty{
    opacity:1;
    filter:none;
    background-color:transparent;
    background-image:url("../../assets/ui/engineering-cell-frame.svg");
  }

  .online-game .engineering-cell.is-empty .engineering-cell-icon{
    width:9px;
    height:8px;
    display:block;
    font-size:0;
    opacity:1;
    transform:none;
    background:transparent url("../../assets/ui/engineering-cell-plus.svg") center/9px 8px no-repeat;
    filter:drop-shadow(0 0 4px rgba(255,255,255,.22));
  }

  .online-game .engineering-cell.is-empty .engineering-cell-value{
    display:none;
  }

  .online-game .engineering-reactor .engineering-cell-icon{
    position:absolute;
    top:.82px;
    left:7.75px;
    width:17.24px;
    height:17.24px;
    display:block;
    overflow:visible;
    font-size:0;
    opacity:1;
    transform:none;
    background:transparent url("../../assets/ui/engineering-reactor-icon.png") center/contain no-repeat;
    filter:drop-shadow(0 0 3px rgba(0,132,255,.48));
  }

  .online-game .engineering-reactor .engineering-cell-value{
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:1px;
    width:100%;
    min-width:0;
    max-width:none;
    padding:0;
    overflow:visible;
    color:#fff;
    background:transparent;
    clip-path:none;
    font-family:Roboto,Arial,sans-serif;
    font-size:8px;
    line-height:9px;
    font-weight:400;
    text-align:center;
    text-shadow:0 1px 2px rgba(0,0,0,.86);
  }

  .online-game .engineering-cell:not(.is-empty):not(.engineering-reactor) .engineering-cell-icon{
    font-size:10px;
    opacity:.7;
    transform:none;
  }

  .online-game .engineering-cell:not(.is-empty):not(.engineering-reactor) .engineering-cell-value{
    min-width:14px;
    max-width:28px;
    padding:1px 3px;
    font-size:7px;
  }

  .online-game .engineering-cell.is-doomsday .engineering-cell-icon{
    top:3px;
    left:0;
    right:0;
    width:auto;
    max-width:none;
    overflow:visible;
    color:#e4b8ff;
    font-size:7px;
    line-height:7px;
    letter-spacing:.04em;
    opacity:1;
    transform:none;
  }

  .online-game .engineering-cell.is-doomsday .engineering-cell-value{
    left:0;
    right:0;
    bottom:3px;
    width:100%;
    min-width:0;
    max-width:none;
    padding:0;
    overflow:visible;
    color:#fff;
    background:transparent;
    clip-path:none;
    font-size:8px;
    line-height:8px;
    text-align:center;
    transform:none;
  }
}

@keyframes battleActionPulse{
  0%,100%{
    transform:translateY(0);
    filter:drop-shadow(0 0 5px rgba(227,137,41,.5)) drop-shadow(0 5px 8px rgba(0,0,0,.68)) brightness(1);
  }
  50%{
    transform:translateY(-2px);
    filter:drop-shadow(0 0 8px rgba(255,197,135,.72)) drop-shadow(0 5px 8px rgba(0,0,0,.68)) brightness(1.1);
  }
}

.online-game .battle-round-hud{
  display:none;
}

.online-game .match-lifecycle-status{
  z-index:34;
  grid-row:1;
  align-self:center;
  justify-self:center;
  width:min(420px,calc(100% - 20px));
  min-width:0;
  padding:7px 16px;
  display:grid;
  gap:4px;
  border:1px solid rgba(70,193,229,.62);
  background:rgba(2,12,22,.9);
  color:#dff8ff;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  box-shadow:0 0 18px rgba(30,172,219,.16);
  pointer-events:none;
}

.online-game .match-turn-status,
.online-game .match-disconnect-status{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.online-game .match-turn-label,
.online-game .match-disconnect-status span{
  min-width:0;
  overflow-wrap:anywhere;
  font-size:.76rem;
  line-height:1.15;
  font-weight:800;
}

.online-game .server-countdown{
  flex:0 0 auto;
  color:#72e5ff;
  font-family:"Roboto Condensed",Roboto,Arial,sans-serif;
  font-size:1rem;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.online-game .match-lifecycle-status.is-warning{
  border-color:rgba(255,185,71,.9);
  box-shadow:0 0 20px rgba(255,139,42,.24);
}

.online-game .match-lifecycle-status.is-warning .match-turn-countdown,
.online-game .match-lifecycle-status.is-short-turn .match-turn-countdown{
  color:#ffd36a;
}

.online-game .match-lifecycle-status.is-short-turn{
  border-color:rgba(255,139,71,.82);
}

.online-game .match-disconnect-status{
  color:#ffb3ad;
}

.online-game .match-disconnect-status .server-countdown{
  color:#ff8c83;
}

@media (max-width:620px) and (orientation:portrait){
  .online-game .center-stage{
    grid-template-rows:32px minmax(0,1fr);
  }

  .online-game .match-lifecycle-status{
    width:calc(100% - 24px);
    max-width:336px;
    padding:3px 8px;
    gap:1px;
  }

  .online-game .match-turn-status,
  .online-game .match-disconnect-status{
    gap:6px;
  }

  .online-game .match-turn-label,
  .online-game .match-disconnect-status span{
    font-size:10px;
    line-height:1.05;
  }

  .online-game .server-countdown{
    font-size:13px;
  }

  .online-game.game{
    grid-template-rows:clamp(54px,calc(16.4634vw + .732px),72px) minmax(0,1fr) 100px 48px;
  }

  .online-game .left-rail{
    width:min(calc(100vw - 32px),398px);
    height:auto;
    min-height:0;
    aspect-ratio:328/54;
    justify-self:center;
    align-self:center;
    grid-template-columns:42.682927% 14.634146% 42.682927%;
    grid-template-rows:1fr;
    gap:0;
    align-content:stretch;
  }

  .online-game .left-rail>.hud-panel{
    position:relative;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    padding:0;
    border:0;
    overflow:hidden;
    clip-path:none;
    box-shadow:none;
    isolation:isolate;
  }

  .online-game .left-rail>.hud-panel::before,
  .online-game .left-rail>.hud-panel::after{
    display:none;
  }

  .online-game .left-rail>.hud-panel.enemy{
    grid-column:1;
    grid-row:1;
    background:transparent url("../../assets/ui/battle-hud-enemy-panel.svg") center/100% 100% no-repeat;
  }

  .online-game .left-rail>.hud-panel.player{
    grid-column:3;
    grid-row:1;
    background:transparent url("../../assets/ui/battle-hud-player-panel.svg") center/100% 100% no-repeat;
  }

  .online-game .left-rail .hud-title{
    position:absolute;
    inset:0;
    height:auto;
    display:block;
  }

  .online-game .left-rail .hud-avatar{
    position:absolute;
    top:0;
    width:37.142857%;
    height:100%;
    display:block;
    border:0;
    color:transparent;
    background-color:transparent;
    background:none;
    clip-path:none;
    box-shadow:none;
  }

  .online-game .left-rail .enemy .hud-avatar{
    left:0;
  }

  .online-game .left-rail .player .hud-avatar{
    right:0;
  }

  .online-game .left-rail .hud-avatar::before,
  .online-game .left-rail .hud-avatar::after{
    content:"";
    position:absolute;
    inset:0;
    display:block;
    pointer-events:none;
    border:0;
    border-radius:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:100% 100%;
    box-shadow:none;
  }

  .online-game .left-rail .hud-avatar::before{
    clip-path:polygon(18.08% 0,81.92% 0,100% 17.76%,100% 82.62%,81.92% 100%,18.08% 100%,0 82.62%,0 17.76%);
  }

  .online-game .left-rail .hud-avatar-profile{
    inset:0;
    border-radius:0;
    clip-path:polygon(18.08% 0,81.92% 0,100% 17.76%,100% 82.62%,81.92% 100%,18.08% 100%,0 82.62%,0 17.76%);
  }

  .online-game .left-rail .enemy .hud-avatar::before{
    background-image:url("../../assets/ui/battle-hud-enemy-avatar.svg");
  }

  .online-game .left-rail .enemy .hud-avatar::after{
    background-image:url("../../assets/ui/battle-hud-enemy-avatar-frame.svg");
  }

  .online-game .left-rail .player .hud-avatar::before{
    background-image:url("../../assets/ui/battle-hud-player-avatar.svg");
  }

  .online-game .left-rail .player .hud-avatar::after{
    background-image:url("../../assets/ui/battle-hud-player-avatar-frame.svg");
  }

  .online-game .left-rail .hud-avatar-core,
  .online-game .left-rail .faction-mark{
    display:none;
  }

  .online-game .left-rail .hud-identity{
    position:absolute;
    top:16.666667%;
    min-width:0;
  }

  .online-game .left-rail .enemy .hud-identity{
    left:43.571429%;
    right:5%;
  }

  .online-game .left-rail .player .hud-identity{
    left:7.142857%;
    right:43.571429%;
  }

  .online-game .left-rail .hud-name{
    font-family:"Roboto Condensed",Roboto,"Arial Narrow",Arial,sans-serif;
    font-size:11px;
    line-height:1.16;
    font-weight:700;
    letter-spacing:0;
    text-shadow:none;
  }

  .online-game .left-rail .enemy .hud-name{
    color:#fa3039;
  }

  .online-game .left-rail .player .hud-name{
    color:#168cf2;
  }

  .online-game .left-rail .stats{
    position:absolute;
    bottom:14.814815%;
    width:auto;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    margin:0;
  }

  .online-game .left-rail .enemy .stats{
    left:43.571429%;
    right:3.571429%;
  }

  .online-game .left-rail .player .stats{
    left:4%;
    right:37.5%;
  }

  .online-game .left-rail .stat{
    width:auto;
    min-width:0;
    min-height:0;
    height:clamp(8.8px,2.777778vw,11.5px);
    padding:0;
    border:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:2px;
    background:transparent;
    box-shadow:none;
    clip-path:none;
  }

  .online-game .left-rail .stat-label{
    width:auto;
    height:clamp(7px,2.222222vw,9px);
    display:block;
    font-size:0;
    line-height:0;
  }

  .online-game .left-rail .stat-icon{
    display:block;
    font-size:0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    filter:none;
  }

  .online-game .left-rail .hand-stat .stat-icon{
    width:clamp(7px,2.222222vw,9px);
    height:clamp(7px,2.222222vw,9px);
    background-image:url("../../assets/ui/battle-hud-hand.svg");
  }

  .online-game .left-rail .hull-stat .stat-icon{
    width:clamp(7.9px,2.5vw,10px);
    height:clamp(7px,2.222222vw,9px);
    background-image:url("../../assets/ui/battle-hud-heart.svg");
  }

  .online-game .left-rail .stat-value{
    min-width:0;
    margin:0;
    color:#fff;
    font-family:"Roboto Condensed",Roboto,"Arial Narrow",Arial,sans-serif;
    font-size:10px;
    line-height:1;
    font-weight:400;
    letter-spacing:0;
    text-shadow:0 1px 2px rgba(0,0,0,.75);
  }

  .online-game .left-rail .hand-stat{
    flex:0 0 auto;
  }

  .online-game .left-rail .hull-stat{
    flex:1 1 auto;
  }

  .online-game .battle-round-hud{
    grid-column:2;
    grid-row:1;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-family:Roboto,"Arial Narrow",Arial,sans-serif;
    text-align:center;
    text-transform:uppercase;
    pointer-events:none;
  }

  .online-game .battle-round-label{
    font-size:clamp(7px,2.222222vw,9px);
    line-height:1.12;
    font-weight:400;
  }

  .online-game .battle-round-value{
    margin-top:1.851852%;
    font-size:clamp(8.8px,2.777778vw,11.5px);
    line-height:1.1;
    font-weight:400;
    font-variant-numeric:tabular-nums;
  }

  .online-game .battle-round-vs{
    margin-top:3.703704%;
    color:#55adff;
    font-size:clamp(14px,4.444444vw,18.5px);
    line-height:1.06;
    font-weight:400;
    text-shadow:0 0 8px rgba(70,170,255,.32);
  }
}

@media (max-width:620px) and (orientation:portrait){
  .online-game{
    --battle-hand-card-width:clamp(85.333px,26.666667vw,106.133px);
    --battle-hand-card-height:clamp(113.778px,35.555556vw,141.511px);
    --battle-hand-card-gap:clamp(7.111px,2.222222vw,8.844px);
    --battle-hand-track-width:clamp(288px,90vw,358.2px);
  }

  .online-game.game{
    grid-template-rows:clamp(54px,calc(16.4634vw + .732px),72px) minmax(0,1fr) clamp(121px,37.777778vw,150px) 0;
  }

  .online-game .hand-dock{
    position:relative;
    width:min(100%,398px);
    height:100%;
    justify-self:center;
    padding:0;
    border:0;
    overflow:visible;
    background:transparent;
    box-shadow:none;
    clip-path:none;
  }

  .online-game .hand-scroll{
    position:absolute;
    left:50%;
    top:auto;
    bottom:0;
    width:var(--battle-hand-track-width);
    /* Headroom is inside the scrollport, without moving the resting cards. */
    height:calc(var(--battle-hand-card-height) + 24px);
    padding:24px 0 0;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:var(--battle-hand-card-width);
    gap:var(--battle-hand-card-gap);
    overflow-x:auto;
    overflow-y:hidden;
    transform:translateX(-50%);
    overscroll-behavior-x:contain;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    scrollbar-color:transparent transparent;
  }

  .online-game .hand-scroll::-webkit-scrollbar{
    display:none;
  }

  .online-game .hand-card-wrap{
    --card-frame-gradient:linear-gradient(135deg,#35e3fe 0%,#21425e 23%,#00bbff 49%,#010206 69%,#359ffe 92%);
    --card-surface:linear-gradient(180deg,rgba(14,58,88,.9),rgba(2,10,18,.97));
    position:relative;
    width:var(--battle-hand-card-width);
    height:var(--battle-hand-card-height);
    min-width:0;
    margin:0;
    overflow:visible;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    isolation:isolate;
  }

  .online-game .hand-card-wrap.attack{
    --card-frame-gradient:linear-gradient(135deg,#ff897d 0%,#6f241c 23%,#ff463c 49%,#090101 69%,#ff655b 92%);
    --card-surface:linear-gradient(180deg,rgba(104,27,22,.92),rgba(25,6,6,.97));
  }

  .online-game .hand-card-wrap.utility,
  .online-game .hand-card-wrap.reaction{
    --card-frame-gradient:linear-gradient(135deg,#9affaa 0%,#245e35 23%,#31df68 49%,#010603 69%,#48db72 92%);
    --card-surface:linear-gradient(180deg,rgba(35,102,43,.9),rgba(6,27,13,.97));
  }

  .online-game .hand-card-wrap.control,
  .online-game .hand-card-wrap.laser,
  .online-game .hand-card-wrap.military-card{
    --card-frame-gradient:linear-gradient(135deg,#d889ff 0%,#57217a 23%,#bd43ff 49%,#070109 69%,#9635fe 92%);
    --card-surface:linear-gradient(180deg,rgba(75,25,105,.92),rgba(17,6,27,.97));
  }

  .online-game .hand-card-wrap.rarity-common{
    --card-frame-gradient:linear-gradient(135deg,#35e3fe 0%,#21425e 23%,#00bbff 49%,#010206 69%,#359ffe 92%);
    --card-surface:linear-gradient(180deg,rgba(14,58,88,.9),rgba(2,10,18,.97));
  }

  .online-game .hand-card-wrap.rarity-rare{
    --card-frame-gradient:linear-gradient(135deg,#9affaa 0%,#245e35 23%,#31df68 49%,#010603 69%,#48db72 92%);
    --card-surface:linear-gradient(180deg,rgba(35,102,43,.9),rgba(6,27,13,.97));
  }

  .online-game .hand-card-wrap.rarity-epic{
    --card-frame-gradient:linear-gradient(135deg,#d889ff 0%,#57217a 23%,#bd43ff 49%,#070109 69%,#9635fe 92%);
    --card-surface:linear-gradient(180deg,rgba(75,25,105,.92),rgba(17,6,27,.97));
  }

  .online-game .hand-card-wrap.rarity-legendary{
    --card-frame-gradient:linear-gradient(135deg,#ffe087 0%,#704817 23%,#ffad21 49%,#080401 69%,#ffce55 92%);
    --card-surface:linear-gradient(180deg,rgba(106,64,11,.94),rgba(27,13,2,.98));
  }

  .online-game .hand-card-wrap.reactor-stabilize-skin{
    --card-frame-gradient:linear-gradient(135deg,#b2fff7 0%,#245f69 23%,#5cffe2 49%,#010606 69%,#4bd8e9 92%);
    --card-surface:linear-gradient(180deg,rgba(16,96,107,.9),rgba(3,24,31,.97));
  }

  .online-game .hand-card-wrap::before,
  .online-game .hand-card-wrap::after{
    content:none;
    position:absolute;
    z-index:5;
    display:none;
    pointer-events:none;
    background:var(--card-frame-gradient);
    -webkit-mask-position:center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;
    mask-position:center;
    mask-repeat:no-repeat;
    mask-size:100% 100%;
  }

  .online-game .hand-card-wrap::before{
    inset:0;
    -webkit-mask-image:url("../../assets/ui/battle-card-frame-outer.svg");
    mask-image:url("../../assets/ui/battle-card-frame-outer.svg");
  }

  .online-game .hand-card-wrap::after{
    inset:1.953125% 3.125%;
    -webkit-mask-image:url("../../assets/ui/battle-card-frame-inner.svg");
    mask-image:url("../../assets/ui/battle-card-frame-inner.svg");
  }

  .online-game .hand-card-wrap:has(.card.is-unplayable){
    opacity:.62;
  }

  .online-game .hand-card-wrap:has(.card.is-selected),
  .online-game .hand-card-wrap:has(.card.is-confirmable){
    filter:drop-shadow(0 0 7px rgba(124,215,255,.7));
  }

  .online-game .hand-card-wrap .card{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    min-width:0;
    padding:0;
    border:0;
    display:block;
    overflow:hidden;
    background:#02060d;
    clip-path:polygon(11.683% 0,87.542% 0,100% 9.088%,100% 91.106%,87.544% 100%,11.681% 100%,0 91.106%,0 9.088%);
    box-shadow:none;
  }

  .online-game .hand-card-wrap .card:hover,
  .online-game .hand-card-wrap .card.is-selected,
  .online-game .hand-card-wrap .card.is-mulligan-selected{
    transform:none;
  }

  .online-game .hand-card-wrap .card.is-unplayable{
    opacity:1;
  }

  .online-game .hand-card-wrap .card-art{
    position:absolute;
    z-index:1;
    inset:0;
    min-height:0;
    margin:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(1.9rem,8vw,3.1rem);
  }

  .online-game .hand-card-wrap .card-art-img{
    width:90%;
    height:90%;
    object-fit:cover;
    display:block;
    filter:none;
    opacity:1;
  }

  .online-game .hand-card-wrap .card-name{
    position:absolute;
    z-index:3;
    left:10%;
    right:10%;
    bottom:5%;
    width:auto;
    height:15.5%;
    min-height:0;
    max-height:none;
    margin:0;
    padding:0 2px;
    transform:none;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    white-space:normal;
    color:#fff;
    border-top:0;
    background:none;
    opacity:1;
    font-family:"Roboto Condensed",Roboto,"Arial Narrow",Arial,sans-serif;
    font-size:clamp(9px,9cqi,13px);
    line-height:.96;
    font-weight:700;
    text-align:center;
    text-transform:uppercase;
    text-shadow:0 1px 3px rgba(0,0,0,.95);
  }

  .online-game .hand-card-wrap .card-name.is-compact{
    width:auto;
  }

  .online-game .hand-card-wrap .card-reactor-badge{
    left:3px;
    top:2px;
    right:auto;
    bottom:auto;
    z-index:7;
    width:clamp(24.889px,7.777778vw,30.956px);
    height:clamp(24.889px,7.777778vw,30.956px);
    min-width:clamp(24.889px,7.777778vw,30.956px);
    filter:none;
  }

  .online-game .hand-card-wrap .card-reactor-battery,
  .online-game .hand-card-wrap .card-reactor-badge.is-locked .card-reactor-battery{
    position:relative;
    width:clamp(24.889px,7.777778vw,30.956px);
    height:clamp(24.889px,7.777778vw,30.956px);
    display:grid;
    place-items:center;
    border:0;
    border-radius:0;
    overflow:hidden;
    color:#fff;
    background:rgba(0,0,0,.84);
    clip-path:polygon(31.595% .156%,66.081% .156%,97.519% 32.565%,97.519% 65.814%,66.083% 97.519%,31.592% 97.519%,.156% 65.814%,.156% 32.565%);
    box-shadow:none;
    top:15%;
    left: 20%;
  }

  .online-game .hand-card-wrap .card-reactor-battery::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    background:var(--card-frame-gradient);
    clip-path:none;
    -webkit-mask:url("../../assets/ui/battle-card-cost-border.svg") center/100% 100% no-repeat;
    mask:url("../../assets/ui/battle-card-cost-border.svg") center/100% 100% no-repeat;
  }

  .online-game .hand-card-wrap .card-reactor-battery::after{
    display:none;
  }

  .online-game .hand-card-wrap .card-reactor-battery span{
    position:relative;
    z-index:2;
    width:clamp(19.556px,6.111111vw,24.322px);
    color:#fff;
    font-family:Roboto,"Arial Narrow",Arial,sans-serif;
    font-size:clamp(12.444px,3.888889vw,15.478px);
    line-height:1.1;
    font-weight:600;
    text-align:center;
    text-transform:uppercase;
    text-shadow:0 1px 3px rgba(0,0,0,.95);
  }

  .online-game .hand-card-wrap .card-info{
    position:absolute;
    z-index:8;
    top:3%;
    right:3%;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    border-radius:0;
    overflow:visible;
    background:transparent;
    color:transparent;
    font-size:0;
    text-shadow:none;
    clip-path:none;
    box-shadow:none;
  }

  .online-game .hand-card-wrap .card-info::before{
    display:none;
  }

  .online-game .hand-card-wrap .card-info::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    background:transparent url("../../assets/ui/battle-card-info.svg") center/clamp(11px,3.333333vw,13.2px) clamp(11px,3.333333vw,13.2px) no-repeat;
  }

  .online-game .hand-card-wrap .card-info:hover{
    border:0;
    background:transparent;
    box-shadow:none;
    filter:brightness(1.2) drop-shadow(0 0 4px rgba(255,255,255,.5));
  }

  .online-game .hand-arrow{
    position:absolute;
    z-index:30;
    top:auto;
    bottom:0;
    width:52px;
    height:var(--battle-hand-card-height);
    min-width:52px;
    min-height:96px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent url("../../assets/ui/battle-hand-arrow-active.svg") center/10px 18px no-repeat;
    color:transparent;
    font-size:0;
    text-shadow:none;
    box-shadow:none;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .online-game .hand-arrow.left{
    left:0;
    transform:rotate(180deg);
  }

  .online-game .hand-arrow.right{
    right:0;
    transform:none;
  }

  .online-game .hand-arrow:disabled{
    opacity:1;
    cursor:default;
    pointer-events:none;
    background-image:url("../../assets/ui/battle-hand-arrow-inactive.svg");
  }

  .online-game .hand-arrow.left:disabled{
    transform:none;
  }

  .online-game .hand-arrow.right:disabled{
    transform:rotate(180deg);
  }
}

/* The transparent scrollport headroom must not block the slot HUD below it. */
.online-game .hand-dock {
  clip-path: none;
  overflow: visible;
}

.online-game .hand-dock .hand-scroll {
  pointer-events: none;
}

.online-game .hand-dock .hand-card-wrap {
  pointer-events: auto;
}

@media (min-width: 621px) {
  .online-game .hand-dock .hand-scroll {
    padding-top: 24px;
    margin-top: -16px;
    height: calc(100% + 16px);
  }
}

@media (min-width: 1281px) and (min-height: 621px) {
  .online-game .hand-dock .hand-scroll {
    margin-top: -10px;
    height: auto;
  }
}