/* Native sound player, replacing musicplayer.swf.
 *
 * Matches what the Flash button looked like: a round button on a transparent
 * background — not white — with no drop shadow. Sized from --wt-player-size,
 * which the helper sets from the dimensions each call site passed to the Flash
 * object (12px for the tone lists, 36px for the v3 variant).
 *
 * Four states, the same four the movie had: idle, loading, playing, error.
 */

.wt-player {
  --wt-player-size: 12px;
  --wt-player-bg: #4685c4;
  --wt-player-fg: #ffffff;

  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

.wt-player audio {
  display: none;
}

.wt-play-button {
  display: block;
  width: var(--wt-player-size);
  height: var(--wt-player-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--wt-player-bg);
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  /* Transparent surround, and deliberately no box-shadow. */
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.wt-play-button:focus-visible {
  outline: 2px solid var(--wt-player-fg);
  outline-offset: 1px;
}

/* Idle: a play triangle, drawn rather than imaged so it scales with the
 * button. Nudged right by a hair because a triangle's optical centre sits
 * left of its bounding box. */
.wt-idle .wt-play-button,
.wt-error .wt-play-button {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.4 3.1 L9 6 L4.4 8.9 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 62% 62%;
}

/* Playing: a stop square. */
.wt-playing .wt-play-button {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='4' y='4' width='4' height='4' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 62% 62%;
}

/* Loading: the eight-spoke throbber the movie used, spun with a step timing
 * function so the spokes tick round rather than sweep. */
.wt-loading .wt-play-button {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23ffffff'%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='1'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.85' transform='rotate(45 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.7' transform='rotate(90 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.55' transform='rotate(135 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.4' transform='rotate(180 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.3' transform='rotate(225 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.2' transform='rotate(270 8 8)'/%3E%3Crect x='7.2' y='1' width='1.6' height='4' rx='.8' opacity='.12' transform='rotate(315 8 8)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88% 88%;
  animation: wt-player-spin 800ms steps(8) infinite;
}

@keyframes wt-player-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wt-loading .wt-play-button { animation-duration: 2400ms; }
}

/* Error: the same play triangle, dimmed, so a failed sound still looks like
 * something you can retry rather than a dead control. */
.wt-error .wt-play-button {
  opacity: 0.45;
}

/* Phone widget, replacing fone_mini_site.swf.
 *
 * Sizes and colours are taken from the movie's own shape records, not from
 * looking at a rendering. Ruffle draws through WebGL without
 * preserveDrawingBuffer, so its canvas reads back blank and cannot be sampled;
 * the DefineShape tags carry RGBA fills and bounds in twips, which give exact
 * numbers:
 *
 *   panel        180 x 261   #242424
 *   status bar   174 x 35    #000099, text #0099FF
 *   Call/Hangup   90 x 22    face #CCCCCC, edge #999999
 *   select bars  174 x 14.5  #999999 on #666666
 *   keypad cell   58 x 35    grid #666666
 *
 * 35 + 22 + 15 + (4 x 35) + 11 + 15 + 14 comes to 262, which is the movie's
 * stage height, so the bands are laid out at their true heights rather than
 * flexed to fit.
 *
 * One deliberate departure, at the owner's request: the selectors use a small
 * inline caret on the same grey as the field, rather than the movie's large
 * square dropdown button.
 */

.wt-phone {
  width: 180px;
  height: 262px;
  box-sizing: border-box;
  padding: 3px;
  background: #242424;
  color: #cccccc;
  font-size: 10px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wt-phone-panel {
  flex: none;
  height: 35px;
  box-sizing: border-box;
  background: #000099;
  border: 1px solid #999999;
  padding: 1px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.wt-phone-status {
  color: #0099ff;
  font-size: 10px;
  line-height: 1.15;
  max-height: 22px;
  overflow: hidden;
}
/* The editable line inside the blue panel, not a box hanging off the bottom. */
.wt-phone-number {
  width: 100%;
  box-sizing: border-box;
  height: 14px;
  font: inherit;
  font-size: 10px;
  color: #0099ff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #3a3ac0;
  padding: 0;
  outline: none;
}
.wt-phone-number::placeholder { color: #3a6fd0; }
.wt-phone-status-connected { color: #00ff00; }
.wt-phone-status-error     { color: #ffcc00; }
.wt-phone-status-busy      { opacity: .85; }

.wt-phone-actions { display: flex; gap: 2px; flex: none; }
.wt-phone-call,
.wt-phone-hangup {
  flex: 1;
  height: 22px;
  box-sizing: border-box;
  font: inherit;
  font-weight: bold;
  font-size: 11px;
  color: #000000;
  background: #cccccc;
  border: 1px solid #999999;
  cursor: pointer;
}
.wt-phone-call:hover:not(:disabled),
.wt-phone-hangup:hover:not(:disabled) { background: #ffffff; }
.wt-phone-call:disabled,
.wt-phone-hangup:disabled { color: #666666; background: #999999; cursor: default; }
.wt-ico {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.wt-ico-call {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 2.2 6 2l1.2 3-1.5 1.2a9 9 0 0 0 4.1 4.1L11 8.8l3 1.2-.2 1.8c-.1.7-.8 1.2-1.5 1.1A11.5 11.5 0 0 1 3.1 3.7c-.1-.7.4-1.4 1.1-1.5z' fill='%23000000'/%3E%3C/svg%3E");
}
.wt-ico-hangup {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='rotate(135 8 8)'%3E%3Cpath d='M4.2 2.2 6 2l1.2 3-1.5 1.2a9 9 0 0 0 4.1 4.1L11 8.8l3 1.2-.2 1.8c-.1.7-.8 1.2-1.5 1.1A11.5 11.5 0 0 1 3.1 3.7c-.1-.7.4-1.4 1.1-1.5z' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E");
}

.wt-phone-bar { display: flex; gap: 2px; align-items: stretch; flex: none; height: 15px; }
.wt-phone-bar select {
  flex: 1;
  min-width: 0;
  height: 15px;
  box-sizing: border-box;
  font: inherit;
  font-size: 10px;
  color: #000000;
  background-color: #999999;
  border: 1px solid #666666;
  padding: 0 13px 0 3px;
  -webkit-appearance: none;
  appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 7px 5px;
}

.wt-phone-mute {
  width: 15px;
  height: 15px;
  flex: none;
  padding: 0;
  border: 1px solid #666666;
  border-radius: 50%;
  background: #cccccc
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3.5v11L5 10H2z' fill='%23000000'/%3E%3Cpath d='M11 5.5a4 4 0 0 1 0 5M12.8 3.6a6.5 6.5 0 0 1 0 8.8' stroke='%23000000' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    center / 11px 11px no-repeat;
  cursor: pointer;
}
/* Muted: the same speaker with a cross, the conventional pairing. */
.wt-phone-mute.wt-phone-muted {
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6h3l4-3.5v11L5 10H2z' fill='%23000000'/%3E%3Cpath d='M11 5.5l4 5M15 5.5l-4 5' stroke='%23000000' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Four rows of 35px cells, 58px wide, separated by #666666 lines. */
.wt-phone-keys {
  flex: none;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 35px);
  background: #666666;
  gap: 1px;
  border: 1px solid #666666;
  box-sizing: border-box;
}
.wt-phone-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1px 3px;
  border: 0;
  background: #242424;
  color: #999999;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  text-align: left;
}
.wt-phone-key:hover:not(:disabled) { background: #333333; }
.wt-phone-key:active:not(:disabled) { background: #494949; }
.wt-phone-key:disabled { cursor: default; color: #666666; }

.wt-phone-digit {
  font-family: "Courier New", monospace;
  font-size: 11px;
  line-height: 1.1;
  color: #999999;
}
.wt-phone-tone {
  text-align: center;
  font-size: 8px;
  line-height: 1.1;
  color: #cccccc;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.wt-phone-by {
  flex: none;
  height: 11px;
  box-sizing: border-box;
  background: #999999;
  color: #ffffff;
  text-align: right;
  padding: 0 4px;
  font-size: 9px;
  line-height: 11px;
}

.wt-phone-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-size: 9px;
}
.wt-phone-cid { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.wt-phone-cid-box { width: 9px; height: 9px; margin: 0; }
.wt-phone-help { color: #999999; text-decoration: underline; }


/* ---------------------------------------------------------------------------
   Full-screen phone, used by the iphone interface.

   The v3 widget is a fixed 180x262 box because the Flash movie it replaces was
   that size. On a phone the widget is the whole page, so this variant scales to
   the viewport instead: the keypad takes the space left over once the panel,
   buttons and selectors have had theirs, and the keys grow with it.
   --------------------------------------------------------------------------- */
.wt-phone-full {
  width: 100%;
  max-width: 100%;
  height: auto;
  /* The viewport minus the page's own chrome. 100svh on its own made the
     widget exactly one screen tall while it starts below the nav bar, so the
     scene selector sat just under the fold. Measured: 38px nav, 51px footer. */
  min-height: calc(100svh - 92px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Both numbers on screen at once, labelled as the iphone page labelled them. */
.wt-phone-panel-both { height: auto; padding: 6px 8px; gap: 4px; }
.wt-phone-panel-both .wt-phone-status { max-height: none; font-size: 13px; }
.wt-phone-row { display: flex; align-items: center; gap: 6px; }
.wt-phone-row label {
  flex: none;
  min-width: 74px;
  text-align: right;
  color: #0099ff;
  font-size: 13px;
}
.wt-phone-row .wt-phone-number {
  flex: 1;
  min-width: 0;
  height: 22px;
  font-size: 15px;   /* 16px or above stops iOS zooming the page on focus */
  border-bottom: 1px solid #3a3ac0;
}

.wt-phone-full .wt-phone-actions { flex: none; }
.wt-phone-full .wt-phone-call,
.wt-phone-full .wt-phone-hangup { height: 40px; font-size: 15px; }
.wt-phone-full .wt-phone-padselect,
.wt-phone-full .wt-phone-sceneselect { height: 30px; font-size: 14px; }
.wt-phone-full .wt-phone-bar { height: auto; }

/* The keypad takes whatever vertical space is left. The base rule pins the
   rows to the movie's 35px cell, and grid-auto-rows does not override an
   explicit template, so the rows have to be restated to share the height. */
.wt-phone-full .wt-phone-keys {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.wt-phone-full .wt-phone-key { height: auto; padding: 4px 6px; }
.wt-phone-full .wt-phone-digit { font-size: 16px; }
.wt-phone-full .wt-phone-tone { font-size: 12px; -webkit-line-clamp: 3; }
.wt-phone-full .wt-phone-by { font-size: 12px; height: auto; }
.wt-phone-full .wt-phone-foot { font-size: 13px; }
.wt-phone-full .wt-phone-mute { width: 30px; height: 30px; }