@media (min-width: 851px) {
  .play-surface {
    grid-template-columns: minmax(220px, 22vw) minmax(0, 1fr) minmax(280px, 26vw);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px 22px;
    align-items: stretch;
    min-height: 100svh;
    overflow: hidden;
  }

  .play-header {
    display: contents;
  }

  .play-brand {
    grid-area: 1 / 1;
    position: relative;
    top: auto;
    left: auto;
    z-index: 6;
    align-self: start;
    justify-self: start;
  }

  .play-brand img {
    width: min(220px, 18vw);
  }

  .antique-clock {
    grid-area: 1 / 2;
    position: relative;
    top: auto;
    left: auto;
    z-index: 5;
    place-self: start center;
    transform: none;
  }

  .role-panel {
    grid-area: 2 / 1;
    position: relative;
    top: auto;
    left: auto;
    z-index: 5;
    width: min(250px, 20vw);
    align-self: start;
  }

  .game-timer {
    grid-area: 2 / 3;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: 5;
    transform: none;
    place-self: center end;
    width: min(290px, 22vw);
    padding: 16px 22px 20px;
  }

  .right-game-stack {
    grid-area: 1 / 2 / 4 / 4;
    position: static;
    right: auto;
    bottom: auto;
    z-index: 6;
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 26vw);
    grid-template-rows: auto minmax(0, 1fr) auto;
    pointer-events: none;
  }

  .right-game-stack .round-center {
    grid-area: 2 / 1 / 3 / 2;
    position: relative;
    top: auto;
    left: auto;
    z-index: 5;
    transform: none;
    width: auto;
    display: grid;
    place-items: center;
    justify-self: center;
    align-self: center;
    pointer-events: none;
  }

  .round-playing-card {
    width: clamp(290px, 24vw, 360px);
    min-height: clamp(400px, 32vw, 500px);
  }

  .round-playing-card > i {
    position: absolute;
    top: 38%;
    left: 50%;
    width: auto;
    display: block;
    text-align: center;
    transform: translate(-50%, -50%);
    font: 900 clamp(240px, 30vw, 360px) / 0.78 Georgia, serif;
  }

  .round-playing-card > i.is-ten {
    transform: translate(-50%, -50%) scaleX(0.72);
    transform-origin: center;
  }

  .round-playing-card > i.is-face-low {
    top: calc(38% + 1.7cm);
  }

  .round-playing-card > i.card-rank:not(.is-ten) {
    transform-origin: center;
  }

  .round-playing-card > i.card-rank:not(.is-ten):not(.is-face-low) {
    transform: translate(-50%, -50%) scaleX(0.9);
  }

  .round-end-button {
    grid-area: 3 / 2;
    width: min(300px, 24vw);
    margin: 0;
    justify-self: end;
    align-self: end;
    pointer-events: auto;
  }

  .live-ranking-area {
    grid-area: 3 / 1;
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 5;
    align-self: end;
    justify-self: start;
    pointer-events: auto;
  }

  .live-ranking {
    width: min(420px, 35vw);
    max-height: min(42svh, 460px);
    padding: 24px 24px 20px;
  }

  .live-ranking h2 {
    font-size: 36px;
  }

  .live-ranking li {
    min-height: 62px;
  }

  .live-ranking li > strong {
    font-size: 21px;
  }

  .live-ranking li > b {
    font-size: 27px;
  }

  .live-ranking li > span {
    width: 33px;
    height: 33px;
    font-size: 14px;
  }

  .round-clock-wrap {
    margin-top: 18px;
    display: grid;
    justify-items: center;
    gap: 8px;
  }

  .round-clock-face {
    width: 132px;
    height: 132px;
    box-shadow: inset 0 0 18px #40200080, 0 10px 24px #0000008c, 0 0 18px #d7a43424;
  }

  .round-clock-face > i {
    transform-origin: 50% 51px;
  }

  .round-clock-face .clock-hand.clock-hour {
    height: 30px;
  }

  .round-clock-face .clock-hand.clock-minute {
    height: 43px;
  }

  .round-clock-face .clock-hand.clock-second {
    height: 47px;
  }

  .round-clock-face .clock-numeral {
    font-size: 11px;
  }

  .round-clock-digital {
    color: #ffe294;
    text-shadow: 0 0 15px #f4b93647;
    font: 700 28px/1 "Courier New", monospace;
  }
}