body.playing {
  min-height: 100vh;
  overflow-y: auto;
  font-size: 14.5px;
}

body.playing main {
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}

.play-head {
  position: sticky;
  top: 76px;
  z-index: 4;
  margin: 0 -8px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(82, 79, 74, .55);
  background: rgba(13, 14, 13, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.assistant-turn {
  scroll-margin-top: 168px;
}

.play {
  height: auto;
  min-height: 100vh;
}

.story-column {
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.messages {
  min-height: 48vh;
  max-height: none;
  flex: none;
  overflow: visible;
}

.composer {
  width: 100%;
  max-width: 920px;
  min-height: 86px;
  margin: 0 auto;
}

.below-action-hint {
  width: 100%;
  max-width: 920px;
  display: flex;
  justify-content: space-between;
  margin: 5px auto 0;
  padding: 8px 2px 4px;
  border-bottom: 1px solid #292826;
  color: #514e4a;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: .16em;
}

.game-dock {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
}

.status-strip .field-row {
  min-width: 0;
  min-height: 58px;
}

.status-strip .field-row.long-field {
  grid-column: 1 / -1;
}

.status-strip .field-row strong {
  white-space: normal;
  overflow-wrap: anywhere;
}

.inventory-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
}

.inventory-strip .item-row {
  min-width: 0;
  justify-content: space-between;
}

@media (max-width: 700px) {
  body.playing main {
    padding: 0 12px max(26px, env(safe-area-inset-bottom));
  }

  .play-head {
    display: grid;
    grid-template-areas:
      "back actions"
      "heading heading";
    grid-template-columns: auto 1fr;
    gap: 9px 10px;
    top: 76px;
    margin: 0 -12px;
    padding: 10px 12px 12px;
  }

  .assistant-turn {
    scroll-margin-top: 190px;
  }

  .play-head > #leave-play {
    grid-area: back;
    align-self: start;
  }

  .play-actions {
    grid-area: actions;
    justify-self: end;
  }

  .save-heading {
    grid-area: heading;
    min-width: 0;
    padding: 8px 2px 1px;
    text-align: left;
  }

  .save-heading h2 {
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(19px, 6.4vw, 27px);
    line-height: 1.42;
    letter-spacing: .045em;
  }

  .save-heading p {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.5;
  }

  .play-head .quiet,
  .play-actions button {
    min-height: 34px;
    padding: 6px 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .messages {
    min-height: 52vh;
    padding: 23px 0 32px;
  }

  .message {
    width: 100%;
    max-width: none;
    margin-bottom: 17px;
    padding: 14px 15px;
    font-size: 14.5px;
    line-height: 1.62;
    overflow-wrap: anywhere;
  }

  .message.user {
    width: min(92%, 680px);
  }

  .composer {
    min-height: 78px;
    padding: 8px;
  }

  .composer textarea {
    min-width: 0;
    padding: 7px;
    font-size: 15px;
    line-height: 1.5;
  }

  .composer button {
    align-self: stretch;
    padding: 8px 13px;
  }

  .game-dock {
    display: block;
  }

  .dock-panel + .dock-panel {
    margin-top: 7px;
  }

  .dock-panel {
    padding: 10px;
  }

  .status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-strip .field-row {
    min-height: 52px;
    padding: 7px 8px;
  }

  .status-strip .field-row strong {
    font-size: 13px;
    line-height: 1.35;
  }

  .inventory-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inventory-strip .item-row {
    display: flex;
    padding: 7px 8px;
    border-radius: 4px;
  }

  .inventory-strip .item-row > div {
    min-width: 0;
  }

  .inventory-strip .item-row > div > strong {
    display: block;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inventory-strip .item-row > strong {
    flex: 0 0 auto;
  }
}

@media (max-width: 390px) {
  .inventory-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dice-result {
  margin: 14px 20px 2px;
  padding: 12px 14px;
  border: 1px solid rgba(197, 184, 159, .24);
  border-left: 3px solid #718b78;
  background: rgba(38, 33, 29, .72);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: 8px;
  color: #d8d0c4;
}
.dice-result .dice-mark { flex: 0 0 auto; font: 700 12px/1 ui-monospace, monospace; letter-spacing: .08em; padding: 7px 6px; border: 1px solid currentColor; border-radius: 5px; color: #c9ad78; }
.dice-result strong, .dice-result small { display: block; }
.dice-result strong { font-size: 14px; }
.dice-result small { margin-top: 4px; color: #918a80; }
.dice-result p { margin: 6px 0 0; font-size: 13px; color: #b9b1a5; }
.dice-result.dice-fail { border-left-color: #9e6862; }
.dice-result.dice-fail .dice-mark { color: #b87a73; }