/* Trial landing only. No styles target game frames or their presentation. */
.trial-device-note {
  display: none;
  --device-note-ink: #39564f;
  --device-note-bg: #f0f5f2;
  --device-note-line: #cfddd6;
}

/* Phone-sized touch viewports, including landscape; not tablet/desktop layouts. */
@media (max-width: 600px) and (pointer: coarse),
       (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  .trial-device-note {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--device-note-line);
    border-radius: 14px;
    color: var(--device-note-ink);
    background: var(--device-note-bg);
    text-align: start;
    font-size: 14px;
    line-height: 1.8;
  }

  .trial-device-note--dark {
    --device-note-ink: #d5e5df;
    --device-note-bg: #172e27;
    --device-note-line: #476056;
    margin-top: 14px;
  }

  .trial-device-note__icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 3px;
  }

  .trial-device-note__body { min-width: 0; flex: 1; }
  .trial-device-note__body p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
  .trial-device-note__body p span { display: block; }

  .trial-device-note__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    margin-top: 10px;
    padding: 7px 14px;
    border: 1px solid var(--device-note-line);
    border-radius: 10px;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .trial-device-note__copy:hover { background: rgba(100, 150, 130, .12); }
  .trial-device-note__copy:focus-visible,
  .trial-device-note__fallback input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .trial-device-note__copy:disabled { cursor: progress; opacity: .65; }
  .trial-device-note__status { display: block; color: inherit; font-size: 13px; line-height: 1.8; }
  .trial-device-note__status:not(:empty) { margin-top: 6px; }
  .trial-device-note__fallback { display: block; margin-top: 8px; font-size: 13px; }
  .trial-device-note__fallback[hidden] { display: none; }
  .trial-device-note__fallback input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid var(--device-note-line);
    border-radius: 8px;
    color: inherit;
    background: transparent;
    font: 13px/1.5 system-ui, sans-serif;
  }
}