#game .game-intro, #game .game-workspace { min-width: 0; }
#game .game-heading { margin: 0 0 24px; text-align: center; }
#game .game-label { display: block; box-sizing: border-box; width: 100%; margin: 0 0 12px; padding: 8px 16px; border-radius: 8px; background: #cce5f7; color: #405476; font: 700 clamp(28px, 2.6vw, 34px)/1.15 Arial, sans-serif; letter-spacing: .12em; }
#game .game-heading #game-title { margin: 0; padding: 0; font-size: clamp(25px, 2.2vw, 30px); line-height: 1.25; }
#game .game-field-viewport { width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; }
#field-board.game-tz-board {
  box-sizing: content-box;
  width: calc(100% - 2px);
  aspect-ratio: 1568 / 888;
  height: auto;
  min-height: 0;
  overflow: visible;
  margin-block: 14px;
  touch-action: pan-x pan-y pinch-zoom;
  background: linear-gradient(90deg, transparent calc(var(--axis-x) - .5px), #77808c50 calc(var(--axis-x) - .5px), #77808c50 calc(var(--axis-x) + .5px), transparent calc(var(--axis-x) + .5px)), linear-gradient(transparent calc(var(--ground-y) - .5px), #77808c50 calc(var(--ground-y) - .5px), #77808c50 calc(var(--ground-y) + .5px), transparent calc(var(--ground-y) + .5px)), #f8f8ff;
}
#field-board.game-tz-board .figure {
  width: var(--hit-width);
  height: var(--hit-height);
  min-width: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#field-board.game-tz-board .figure:is(:hover, :focus, :active) { background: transparent; border: 0; box-shadow: none; outline: none; }
#field-board.game-tz-board .figure:focus-visible .figure-disc { outline: 2px solid #405476; outline-offset: 3px; }
.game-tz-board .figure-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--disc-width);
  height: var(--disc-height);
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--figure-colour);
  box-shadow: 0 2px 5px #40547625;
  pointer-events: none;
}
.game-tz-board .figure.is-selected .figure-disc { outline: 2px solid #536c9b; outline-offset: 3px; }
.game-tz-board .figure.is-dragging .figure-disc { outline: 3px solid #536c9b; outline-offset: 3px; box-shadow: 0 2px 6px #40547630; }
.game-tz-board .figure.is-selected:not(.figure-self) .figure-label { color: #183b70; }
.game-tz-board .figure-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--disc-width) - 8px); font: 600 clamp(9px, calc(var(--disc-width) * .205), 12px)/1.1 Arial, sans-serif; color: #405476; white-space: nowrap; text-align: center; pointer-events: none; }
.game-tz-board .figure-self .figure-label { top: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 13px; }
.game-tz-board .figure-self { --figure-colour: #536c9b; }
.game-tz-board .figure-mother { --figure-colour: #d5cdea; }
.game-tz-board .figure-father { --figure-colour: #cce5f7; }
.game-tz-board .figure-friends { --figure-colour: #d8f0e4; }
.game-tz-board .figure-partner { --figure-colour: #f5d8eb; }
.game-tz-board .figure-work { --figure-colour: #f0e2ce; }
#game .game-controls { margin-top: 14px; }
#game #read-field { min-width: 160px; min-height: 48px; border: 1px solid #536c9b; }
#game #read-field:hover { background: #405780; }
#game #read-field:active { background: #354b73; }
#game-result { grid-column: 1 / -1; width: min(100%, 780px); min-width: 0; justify-self: center; margin-top: 8px; padding: 32px 36px; scroll-margin-top: 100px; }
#game-result #result-title { margin-top: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; line-height: 1.25; color: #405476; }
#game-result .game-author-text p { white-space: pre-wrap; margin-bottom: 18px; overflow-wrap: anywhere; }
#game-result .game-author-text { font-size: 16px; line-height: 1.75; }
#game-result .game-copy-heading { display: block; margin-top: 24px; margin-bottom: 8px; }
#game-result .game-copy-heading:first-child { margin-top: 0; }
.game-touch-help { display: none; }
#game-result .game-interpretation-note { font: 13px/1.6 Arial, sans-serif; color: #586b89; padding-bottom: 12px; border-bottom: 1px solid #d6e0ef; }
#game-result #result-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #d6e0ef; }
#game-result #result-links:empty { display: none; }
#game-result .game-links-heading { margin: 0 0 8px; font: 600 14px/1.5 Arial, sans-serif; color: #586b89; }
#game-result #result-links .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; text-decoration: none; }
#game-result #result-links .button { font-size: 14px; min-height: 48px; }
#game-result #result-links button:disabled { cursor: not-allowed; opacity: .75; }
@media (max-width: 640px) {
  #game .game-field-viewport { padding-top: 72px; overflow: visible; }
  #field-board.game-tz-board .figure.is-parked {
    left: calc((var(--tray-index) + .5) * 100% / 6);
    top: -42px;
    width: min(var(--hit-width), calc(100% / 6));
    min-width: 0;
    height: var(--hit-height);
    --disc-width: min(48px, calc((100vw - 48px) / 6));
    --disc-height: var(--disc-width);
  }
  #field-board.game-tz-board .figure.is-parked.is-dragging { left: var(--drag-left, calc((var(--tray-index) + .5) * 100% / 6)); top: var(--drag-top, -42px); z-index: 6; }
  #game #read-field:disabled { opacity: .5; cursor: default; }
  #game .game-field-viewport #field-board { min-width: 0; }
  #game .game-layout { width: calc(100% - 24px); gap: 16px; }
  #game .game-intro { padding-inline: 4px; }
  #game .game-intro .eyebrow { margin-bottom: 10px; }
  #game #game-title { font-size: 28px; line-height: 1.15; margin-bottom: 14px; }
  #game .game-instructions { font-size: 14px; line-height: 1.5; }
  #game .game-instructions li { margin-bottom: 6px; padding-left: .15em; }
  #game .game-instructions li:last-child { margin-bottom: 0; }
  #field-board.game-tz-board { margin-block: 10px; }
  #game .field-help { font-size: 12px; line-height: 1.5; margin: 10px 4px 12px; }
  #game .game-controls { margin-top: 12px; }
  #game #read-field { width: 100%; }
  .game-touch-help { display: inline; }
  .game-keyboard-help { display: none; }
  #game-result { padding: 20px 16px; scroll-margin-top: 88px; }
  #game-result #result-title { font-size: 24px; }
  #game-result #result-links .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .game-tz-board .figure, .game-tz-board .figure-disc { transition: none; }
}
@media (max-width: 640px) {
  .game-tz-board .figure.is-selected .figure-disc, .game-tz-board .figure.is-dragging .figure-disc { outline-offset: 1px; }
}