.app[data-tutorial] #tutorial-panel {
  top: calc(var(--safe-top) + 57px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(470px, calc(100% - 2 * max(var(--safe-left), var(--safe-right)) - 22px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy options" "copy actions";
  align-items: start;
  gap: 3px 8px;
  padding: 6px 7px 6px 10px;
  border: 1px solid #78a7ad8c;
  border-top: 2px solid var(--tutorial-accent);
  border-radius: 7px;
  background: linear-gradient(112deg, #173344fa, #0b202cf7);
  box-shadow: 0 4px 12px #0613209c;
}

.app[data-tutorial] #tutorial-panel[data-cue="now"] {
  border-top-color: #b5ffeb;
}

.app[data-tutorial] #tutorial-panel .tutorial-heading { display: contents; }

.app[data-tutorial] #tutorial-panel .tutorial-heading-text {
  grid-area: copy;
  align-self: center;
  padding: 0;
}

.app[data-tutorial] #tutorial-panel .tutorial-heading-text > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;
}

.app[data-tutorial] #tutorial-panel #tutorial-progress {
  font-size: 10px;
  font-weight: 800;
}

.app[data-tutorial] #tutorial-panel #tutorial-title {
  margin: 0;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.2;
}

.app[data-tutorial] #tutorial-panel #tutorial-step {
  display: block;
  margin: 3px 0 0;
  color: #ffe2a0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.app[data-tutorial] #tutorial-panel[data-cue="now"] #tutorial-step {
  color: #b5ffeb;
}

.app[data-tutorial] #tutorial-panel[data-cue="prepare"] #tutorial-step {
  color: #c0e1e8;
}

.app[data-tutorial] #tutorial-panel #tutorial-hint,
.app[data-tutorial] #tutorial-panel #tutorial-feedback {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.app[data-tutorial] #tutorial-panel[data-cue="now"] #tutorial-hint {
  color: #e0fff4;
  font-weight: 850;
}

.app[data-tutorial] #tutorial-panel #tutorial-more {
  grid-area: options;
  grid-row: 1;
  justify-self: end;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 6px;
  border-color: #65838e;
  border-radius: 5px;
  color: #dce9e9;
  background: #183544;
}

.app[data-tutorial] #tutorial-panel #tutorial-more[aria-expanded="true"] {
  border-color: #ffe2a0;
  color: #fff7e6;
}

.app[data-tutorial] #tutorial-panel .tutorial-skips {
  display: none;
  position: absolute;
  z-index: 1;
  top: 51px;
  right: 7px;
  gap: 4px;
  padding: 5px;
  border: 1px solid #88aeb4;
  border-radius: 5px;
  background: #102937;
  box-shadow: 0 5px 18px #000a;
}

.app[data-tutorial] #tutorial-panel #tutorial-more[aria-expanded="true"] + .tutorial-skips { display: grid; }

.app[data-tutorial] #tutorial-panel .tutorial-actions {
  grid-area: actions;
  align-items: center;
  justify-content: end;
}

.app[data-tutorial] #tutorial-panel .tutorial-actions button {
  flex: none;
  min-width: 66px;
  min-height: 44px;
  margin: 0;
  padding-inline: 7px;
}

.app[data-tutorial] #tutorial-panel .tutorial-actions:not(:has(:is(button, #tutorial-countdown):not([hidden]))) {
  display: none;
}

.app[data-tutorial][data-replay] #tutorial-panel,
.app[data-tutorial] #tutorial-panel[data-state="following"],
.app[data-tutorial]:has(#tutorial-panel[data-state="following"]) #controls {
  visibility: hidden;
}

.app[data-tutorial] #tutorial-panel #tutorial-countdown:not([hidden]) {
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 32px;
  padding-inline: 6px;
  border: 1px solid #f6d37e80;
  border-radius: 5px;
  color: #ffe4a0;
  background: #32332d;
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

#tutorial-touch-retry { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
  .app[data-tutorial] #tutorial-panel[data-state="retry"] .tutorial-actions { display: none; }

  .app[data-tutorial] #tutorial-touch-retry:not([hidden]) {
    display: block;
    position: absolute;
    right: calc(var(--safe-right) + 18px);
    bottom: calc(var(--safe-bottom) + 27px);
    min-width: 104px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #ffc2b3;
    border-radius: 9px;
    color: #2d221e;
    background: #ffc2b3;
    font-weight: 800;
    pointer-events: auto;
    touch-action: manipulation;
  }
}

@media (orientation: landscape) {
  .app[data-tutorial] #tutorial-panel {
    top: calc(var(--safe-top) + 7px);
    width: min(500px, calc(100% - 2 * max(var(--safe-left), var(--safe-right)) - 116px));
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "copy actions options";
    align-items: center;
  }
}

/* Different shapes and a text badge distinguish preparation from the timing window. */
.app[data-tutorial] #controls .circle-actions button[data-tutorial-cue="wait"]:disabled {
  outline: 1px dashed #abc0c6;
  outline-offset: 2px;
  opacity: .9;
}

.app[data-tutorial] #controls .circle-actions button:is([data-tutorial-cue="next"], [data-tutorial-cue="now"]):not(:disabled),
.app[data-tutorial] #controls #joystick:is([data-tutorial-cue="next"], [data-tutorial-cue="now"]) {
  border-color: #ffe3a2;
  outline: 2px solid #ffda83;
  outline-offset: 2px;
  opacity: 1;
  box-shadow: 0 0 10px #ffd47980, inset 0 0 0 1px #fff5d3;
}

.app[data-tutorial] #controls .circle-actions button:is([data-tutorial-cue="next"], [data-tutorial-cue="now"]):not(:disabled) {
  position: relative;
  z-index: 1;
  background: #ffd575;
  color: #10222f;
  text-shadow: none;
}

.app[data-tutorial] #controls .circle-actions button[data-tutorial-cue="now"]:not(:disabled),
.app[data-tutorial] #controls #joystick[data-tutorial-cue="now"] {
  border-color: #e0fff4;
  outline-color: #a8ffec;
  box-shadow: 0 0 12px #a8ffecae, inset 0 0 0 1px #fff;
}

.app[data-tutorial] #controls .circle-actions button[data-tutorial-cue="now"]:not(:disabled) {
  background: #9af4e1;
}

.app[data-tutorial] #controls .circle-actions button[data-tutorial-cue="prepare"]:not(:disabled) {
  position: relative;
  z-index: 1;
  border-color: #91c4d2;
  outline: 1px dashed #9bc7d0;
  outline-offset: 2px;
  background: #24515e;
  color: #f0faff;
  box-shadow: inset 0 0 0 1px #8fb5c133;
  text-shadow: none;
}

.app[data-tutorial] #controls .circle-actions button:is([data-tutorial-cue="prepare"], [data-tutorial-cue="now"]):not(:disabled)::before {
  position: absolute;
  z-index: 1;
  top: -11px;
  right: -4px;
  padding: 2px 4px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1.1;
  pointer-events: none;
}

.app[data-tutorial] #controls .circle-actions button[data-tutorial-cue="prepare"]:not(:disabled)::before {
  content: "等時機" / "";
  border-color: #9bc7d0;
  background: #132f3e;
  color: #e0f2f7;
}

.app[data-tutorial] #controls .circle-actions button[data-tutorial-cue="now"]:not(:disabled)::before {
  content: "現在" / "";
  border-color: #a8ffec;
  background: #123c46;
  color: #f5fffa;
}

.app[data-tutorial] #controls .circle-actions button[data-tutorial-cue]:not(:disabled):focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
}

@media (prefers-reduced-motion: no-preference) {
  .app[data-tutorial] #controls .circle-actions button[data-tutorial-cue="now"]:not(:disabled)::after,
  .app[data-tutorial] #controls #joystick[data-tutorial-cue="now"]::after {
    position: absolute;
    inset: -6px;
    content: "";
    border: 2px solid #a8ffec;
    border-radius: 50%;
    pointer-events: none;
    animation: tutorial-cue-pulse 680ms ease-out infinite;
  }
}

@keyframes tutorial-cue-pulse {
  from { opacity: .95; transform: scale(1); }
  to { opacity: .2; transform: scale(1.08); }
}

#tutorial-swipe-demo { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
  .app[data-tutorial] #controls .circle-actions button[data-tutorial-touch-hint]:not(:disabled)::before {
    content: attr(data-tutorial-touch-hint) / "";
    position: absolute;
    z-index: 1;
    top: -19px;
    right: -4px;
    padding: 3px 5px;
    border: 1px solid #a3ccce;
    border-radius: 4px;
    background: #102f3a;
    color: #f0fffa;
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
    pointer-events: none;
  }

  .app[data-tutorial] #tutorial-swipe-demo:not([hidden]) {
    --swipe-width: min(64px, calc(var(--action-right) + var(--action-cell) * .2 - 6px));
    display: block;
    position: absolute;
    z-index: 2;
    right: calc(var(--action-cell) * .2 - var(--swipe-width));
    bottom: 0;
    width: var(--swipe-width);
    height: 42px;
    pointer-events: none;
  }

  #tutorial-swipe-demo .tutorial-swipe-track {
    position: absolute;
    top: 8px;
    right: 11px;
    left: 9px;
    height: 2px;
    background: repeating-linear-gradient(to right, #ffdf9a 0 5px, transparent 5px 8px);
    filter: drop-shadow(0 1px 1px #071820);
  }

  #tutorial-swipe-demo .tutorial-swipe-track::before,
  #tutorial-swipe-demo .tutorial-swipe-track::after {
    position: absolute;
    content: "";
  }

  #tutorial-swipe-demo .tutorial-swipe-track::before {
    top: -5px;
    left: -5px;
    width: 12px;
    height: 12px;
    border: 2px solid #ffdf9a;
    border-radius: 50%;
  }

  #tutorial-swipe-demo .tutorial-swipe-track::after {
    top: -4px;
    right: 0;
    width: 9px;
    height: 9px;
    border-top: 2px solid #ffdf9a;
    border-right: 2px solid #ffdf9a;
    transform: rotate(45deg);
  }

  #tutorial-swipe-demo .tutorial-swipe-hand {
    position: absolute;
    top: 3px;
    left: 0;
    width: 29px;
    height: 36px;
    filter: drop-shadow(0 2px 1px #071820aa);
  }
}

@media (orientation: portrait) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  #tutorial-swipe-demo .tutorial-swipe-hand { animation: tutorial-swipe-right 1.55s ease-in-out infinite; }
}

@keyframes tutorial-swipe-right {
  0%, 22% { opacity: 1; transform: translateX(0); }
  67%, 78% { opacity: 1; transform: translateX(calc(var(--swipe-width) - 31px)); }
  90% { opacity: 0; transform: translateX(calc(var(--swipe-width) - 31px)); }
  92%, 100% { opacity: 0; transform: translateX(0); }
}

@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  .app[data-tutorial] #controls .circle-actions button[data-tutorial-cue] {
    /* The button fill and label switch together when the timing window opens. */
    transition-property: opacity;
  }

  .app[data-tutorial] #tutorial-panel {
    border-right-color: #638491b3;
    border-bottom-color: #638491b3;
    border-left-color: #638491b3;
    background: linear-gradient(115deg, #152d3cfb, #0a1926fa 70%);
    box-shadow: 0 5px 12px #020b139c;
  }

  .app[data-tutorial] #tutorial-panel #tutorial-progress {
    color: color-mix(in srgb, var(--tutorial-accent) 78%, #cadbdf);
  }

  .app[data-tutorial] #tutorial-panel #tutorial-title { color: #fff5e2; }

  .app[data-tutorial] #tutorial-panel #tutorial-step {
    width: fit-content;
    max-width: 100%;
    padding: 1px 5px;
    border-left: 2px solid currentColor;
    border-radius: 2px;
    background: #19303d;
  }

  .app[data-tutorial] #tutorial-panel #tutorial-hint { color: #e0e8e9; }

  .app[data-tutorial] #tutorial-panel[data-state="ready"] #tutorial-hint { color: #fff1c8; }

  .app[data-tutorial] #tutorial-panel #tutorial-feedback:not(:empty) {
    padding-left: 7px;
    border-left: 2px solid var(--tutorial-accent);
  }

  .app[data-tutorial] #tutorial-panel #tutorial-more {
    border-color: #617f8d;
    background: #122836;
  }

  .app[data-tutorial] #tutorial-panel[data-state="passed"] {
    background: linear-gradient(110deg, #173d3cfb, #0a1926fa 70%);
  }

  .app[data-tutorial] #tutorial-panel[data-state="passed"] #tutorial-step {
    display: flex;
    align-items: center;
    gap: 4px;
    border-left: 0;
    color: #c9ffed;
    background: #1c4946;
  }

  .app[data-tutorial] #tutorial-panel[data-state="passed"] #tutorial-step::before {
    content: "✓" / "";
  }

  .app[data-tutorial] #tutorial-panel[data-state="passed"] #tutorial-feedback:not(:empty) {
    padding-left: 0;
    border-left: 0;
    color: #e0e8e9;
  }

  .app[data-tutorial] #tutorial-panel[data-state="complete"] {
    --tutorial-accent: var(--cov-gold);
    width: min(336px, calc(100% - 2 * max(var(--safe-left), var(--safe-right)) - 22px));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "actions";
    gap: 10px;
    padding: 10px 12px 12px;
    text-align: center;
  }

  .app[data-tutorial] #tutorial-panel[data-state="complete"] .tutorial-heading-text > div:first-child {
    display: grid;
    gap: 3px;
  }

  .app[data-tutorial] #tutorial-panel[data-state="complete"] #tutorial-title {
    font-size: clamp(19px, 5.2vw, 22px);
  }

  .app[data-tutorial] #tutorial-panel[data-state="complete"] .tutorial-actions {
    justify-content: stretch;
  }

  .app[data-tutorial] #tutorial-panel[data-state="complete"] #tutorial-next {
    width: 100%;
  }

  .app[data-tutorial] #controls #tutorial-touch-retry:not([hidden]) {
    box-shadow: inset 0 0 0 1px #fff1e64d, 0 3px 8px #020b139c;
  }
}