.canvas-preparation-shell,
.duel-screen.canvas-gameplay-shell {
  position: absolute;
  inset: var(--canvas-safe-top) var(--canvas-safe-right) var(--canvas-safe-bottom) var(--canvas-safe-left);
  inline-size: auto;
  max-inline-size: none;
  block-size: auto;
  margin: 0;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0 var(--canvas-spacing-sm);
  overflow: hidden;
}

.canvas-preparation-shell {
  place-items: stretch;
  text-align: center;
}

.canvas-preparation-shell .duel-preparation-kicker {
  display: block;
  align-self: center;
  padding: var(--canvas-spacing-md) var(--canvas-spacing-xs) var(--canvas-spacing-sm);
  font-size: var(--canvas-typography-auxiliary);
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal;
}

.canvas-preparation-scroll {
  position: relative;
  inline-size: min(100%, var(--canvas-panel-wide));
  justify-self: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: var(--canvas-spacing-sm);
  padding: var(--canvas-spacing-sm) var(--canvas-spacing-xs);
  transform: none;
}

.canvas-preparation-scroll .preparation-avatar {
  inline-size: clamp(64px, var(--canvas-artwork-avatar), 112px);
  block-size: clamp(64px, var(--canvas-artwork-avatar), 112px);
}

.canvas-preparation-scroll article > strong {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: visible;
  font-size: var(--canvas-typography-title);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.canvas-preparation-scroll article > :is(span, small),
.canvas-preparation-scroll li {
  min-inline-size: 0;
  font-size: var(--canvas-typography-auxiliary);
  overflow-wrap: anywhere;
  white-space: normal;
}

.canvas-preparation-scroll .wager-badge {
  max-inline-size: min(90%, var(--canvas-panel-compact));
  white-space: normal;
  overflow-wrap: anywhere;
}

.canvas-preparation-shell .duel-preparation-footer {
  position: relative;
  inset: auto;
  display: grid;
  justify-items: center;
  gap: var(--canvas-spacing-xs);
  padding: var(--canvas-spacing-sm) var(--canvas-spacing-xs) var(--canvas-spacing-md);
  transform: translateY(clamp(-120px, -12vh, -72px));
}

.canvas-preparation-shell .duel-preparation-ready {
  min-block-size: 24px;
}

.canvas-preparation-shell .duel-preparation-countdown {
  box-sizing: border-box;
  inline-size: min(100%, 360px);
  block-size: 112px;
  min-block-size: 112px;
  max-block-size: 112px;
  margin: 0;
  display: grid;
  place-items: center;
  contain: layout paint;
  font-size: clamp(64px, 18vw, 96px);
  line-height: 1;
}

.canvas-preparation-shell .duel-preparation-countdown.is-starting {
  min-block-size: 112px;
  font-size: clamp(28px, 4.5vw, 34px) !important;
  line-height: 1.1;
  letter-spacing: .06em;
}

.canvas-preparation-shell .duel-preparation-footer :is(strong, p, output, button) {
  max-inline-size: min(100%, var(--canvas-panel-standard));
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.canvas-preparation-shell .duel-preparation-ready,
.canvas-preparation-shell .duel-preparation-error-detail,
.canvas-preparation-shell .duel-preparation-footer button {
  font-size: var(--canvas-typography-main);
}

.canvas-preparation-shell .duel-preparation-footer .text-button {
  position: static;
  inset: auto;
  min-block-size: 44px;
  transform: none;
}

.duel-screen.canvas-gameplay-shell {
  --gameplay-artwork-size: min(100%, clamp(340px, 92vw, 520px));
  grid-template-rows: auto minmax(0, 1fr);
}

.duel-screen.canvas-gameplay-shell .duel-toolbar {
  min-block-size: var(--canvas-control-standard);
  padding: var(--canvas-spacing-xs) var(--canvas-spacing-sm);
}

.duel-screen.canvas-gameplay-shell .duel-toolbar :is(button, .coin-balance) {
  min-block-size: 44px;
}

.duel-screen.canvas-gameplay-shell .round-label :is(span, strong),
.duel-screen.canvas-gameplay-shell .competitor :is(strong, span, output),
.duel-screen.canvas-gameplay-shell .hint-button :is(strong, small) {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.duel-screen.canvas-gameplay-shell .competitor-identity strong {
  font-size: var(--canvas-typography-main);
}

.duel-screen.canvas-gameplay-shell .competitor-identity span,
.duel-screen.canvas-gameplay-shell .word-count,
.duel-screen.canvas-gameplay-shell .competitor-rating,
.duel-screen.canvas-gameplay-shell .hint-button small {
  font-size: var(--canvas-typography-auxiliary);
}

.canvas-gameplay-scroll {
  display: grid;
  grid-template-rows: auto auto minmax(min-content, 1fr);
  align-content: start;
  gap: var(--canvas-spacing-sm);
  padding: var(--canvas-spacing-xs) 0 var(--canvas-spacing-md);
  scroll-padding-block: var(--canvas-spacing-sm) calc(var(--canvas-control-standard) + var(--keyboard-inset));
}

.canvas-gameplay-scroll > .scoreboard {
  margin-inline: var(--canvas-spacing-sm);
}

.canvas-gameplay-scroll > .playfield {
  min-block-size: clamp(360px, 55vh, 560px);
  margin-block-start: 0;
  padding: var(--canvas-spacing-xs) var(--canvas-spacing-sm) var(--canvas-spacing-md);
  overflow: visible;
}

.canvas-gameplay-scroll .word-zone {
  inline-size: var(--gameplay-artwork-size);
  block-size: clamp(360px, 55vh, 560px);
  min-block-size: 360px;
  justify-self: center;
  align-self: start;
}

.canvas-gameplay-scroll .word-zone > letter-circle-prefab {
  --module-offset-y: clamp(-120px, -10vh, -78px);
}

.duel-screen.canvas-gameplay-shell .play-actions {
  justify-content: flex-end;
  padding: 0 var(--canvas-spacing-sm);
}

.duel-screen.canvas-gameplay-shell .hint-button,
.duel-screen.canvas-gameplay-shell .result-panel :is(button, [role="button"]),
.duel-screen.canvas-gameplay-shell .dictionary-back {
  min-block-size: 44px;
}

.duel-screen.canvas-gameplay-shell .result-panel {
  block-size: auto;
  min-block-size: 100%;
  padding: var(--canvas-spacing-lg) var(--canvas-spacing-md);
  overflow: visible;
}

.duel-screen.canvas-gameplay-shell .result-panel :is(h2, p, small, strong, span, em, button) {
  max-inline-size: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.duel-screen.canvas-gameplay-shell .result-panel h2 {
  font-size: var(--canvas-typography-display);
}

.duel-screen.canvas-gameplay-shell .result-panel p,
.duel-screen.canvas-gameplay-shell .result-panel button,
.duel-screen.canvas-gameplay-shell .result-panel strong {
  font-size: max(var(--canvas-typography-main), 15px);
}

.duel-screen.canvas-gameplay-shell .result-panel small,
.duel-screen.canvas-gameplay-shell .result-panel em,
.duel-screen.canvas-gameplay-shell .result-panel .result-kicker {
  font-size: max(var(--canvas-typography-auxiliary), 10px);
}

.duel-screen.canvas-gameplay-shell .dictionary-view {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.duel-screen.canvas-gameplay-shell .dictionary-view[hidden] { display: none; }

.duel-screen.canvas-gameplay-shell .result-panel.is-dictionary-open {
  block-size: 100%;
  min-block-size: 0;
  display: flex;
  place-items: initial;
  overflow: hidden;
}

.duel-screen.canvas-gameplay-shell .dictionary-header {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  min-block-size: var(--canvas-control-standard);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--canvas-spacing-sm);
  padding: 0 var(--canvas-spacing-xs) var(--canvas-spacing-sm);
  border-block-end: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
}

.duel-screen.canvas-gameplay-shell .dictionary-header > div {
  min-inline-size: 0;
  display: grid;
  justify-items: start;
  gap: 3px;
  text-align: start;
}

.duel-screen.canvas-gameplay-shell .dictionary-header .dictionary-back {
  position: static;
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  font-size: 24px;
}

.duel-screen.canvas-gameplay-shell .dictionary-header span {
  font-size: var(--canvas-typography-main);
  overflow-wrap: anywhere;
  white-space: normal;
}

.duel-screen.canvas-gameplay-shell .dictionary-header strong,
.duel-screen.canvas-gameplay-shell .dictionary-entry :is(small, span) {
  font-size: var(--canvas-typography-auxiliary);
}

.duel-screen.canvas-gameplay-shell .dictionary-list {
  flex: 1 1 auto;
  min-block-size: 0;
  max-block-size: none;
  margin-block-start: var(--canvas-spacing-sm);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.duel-screen.canvas-gameplay-shell .dictionary-entry :is(strong, p) {
  font-size: var(--canvas-typography-main);
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.duel-screen.canvas-gameplay-shell.is-result-recap .duel-toolbar,
.duel-screen.canvas-gameplay-shell.is-result-recap .scoreboard,
.duel-screen.canvas-gameplay-shell.is-result-recap .play-actions {
  display: none;
}

.duel-screen.canvas-gameplay-shell.is-result-recap .canvas-gameplay-scroll {
  grid-row: 1 / -1;
}

.duel-screen.canvas-gameplay-shell.is-golden-set .golden-set-track {
  inline-size: min(100%, var(--canvas-panel-wide));
  margin-inline: auto;
}

@media (max-width: 420px) {
  .canvas-preparation-scroll { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .canvas-preparation-scroll .preparation-versus { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; }
  .canvas-preparation-scroll .wager-badge { grid-column: 1 / -1; position: static; transform: none; justify-self: center; }
  .duel-screen.canvas-gameplay-shell { padding-inline: var(--canvas-spacing-xs); }
  .duel-screen.canvas-gameplay-shell .result-panel { padding-inline: var(--canvas-spacing-sm); }
}