* {
  box-sizing:border-box
}

html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#162d3b;
  color:#fff6df;
  font-family:system-ui,sans-serif
}

body {
  display:grid;
  place-items:center
}

#game-frame {
  width:100vw;
  height:100dvh;
  border:0
}

#rotate {
  display:none
}

@media(orientation:portrait) {
  body {
    background:radial-gradient(ellipse at 50% 15%,#275169,#162d3b 70%)
  }

  #game-frame {
    height:56.34vw;
    align-self:start;
    margin-top:12vh;
    border-block:2px solid #ffc848;
    box-shadow:0 5px #0f1f28
  }

  #rotate {
    display:block;
    position:absolute;
    top:calc(12vh + 56.34vw + 24px);
    left:20px;
    right:20px;
    text-align:center;
    font-weight:900;
    color:#1c303c;
    font-size:20px;
    padding:22px 18px;
    border:4px solid #34637f;
    border-radius:24px;
    background:linear-gradient(#fffbe9,#f7edce);
    box-shadow:inset 0 2px white,0 0 0 1px #f4c85a,0 5px #10222c
  }

  #rotate small {
    display:block;
    color:#3d4b54;
    font-weight:600;
    font-size:14px;
    line-height:1.5;
    margin-top:10px
  }

}

/* Arena Night surround and portrait handoff card. */
html,body{background:#091827;color:#fff3d6}
@media(orientation:portrait){body{background:radial-gradient(ellipse at 50% 15%,#234c61,#091827 70%)}#game-frame{border-color:#c49a50;box-shadow:0 5px #05111e}#rotate{background:linear-gradient(#24485e,#112a40);color:#fff3d6;border-color:#587f95;box-shadow:inset 0 2px #a4c7d544,0 0 0 1px #c49a50,0 5px #05111e}#rotate small{color:#bbd1de}}