/* Tapes。本体は初代 TPS-L2 の青と銀を手本にした。名前とロゴは借りない */

:root {
  --bg: #f4f2ec;
  --ink: #23262b;
  --quiet: #6d7078;
  --line: #d9d5cb;
  --silver-1: #f1f2f3;
  --silver-2: #c4c8cd;
  --silver-3: #9ba1a8;
  --blue-1: #4f78b8;
  --blue-2: #2c4f8c;
  --blue-3: #1d3766;
  --orange: #f08a24;
  --orange-hi: #ffb15c;
  --window: #1a1c20;
  --tape: #6e4b33;
  --digit-bg: #15171a;
  --digit: #f2efe6;
  --field: #fffdf8;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15171b;
    --ink: #e9e7e1;
    --quiet: #9a9da5;
    --line: #34373d;
    --field: #1f2227;
  }
}
:root[data-theme="dark"] {
  --bg: #15171b;
  --ink: #e9e7e1;
  --quiet: #9a9da5;
  --line: #34373d;
  --field: #1f2227;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Jost", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* 入口 */
.door { max-width: 30em; margin: 18vh auto 0; padding: 0 16px; }
.door h1 { font-weight: 500; letter-spacing: 0.06em; margin: 0 0 0.6em; }
.door .what { display: inline-block; margin-top: 1em; color: var(--blue-2); }
.quiet { color: var(--quiet); }

/* 舞台 */
.stage {
  max-width: 480px;
  margin: 0 auto;
  padding: max(28px, 6vh) 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 本体 */
.deck { position: relative; margin: 0 auto; width: 100%; max-width: 440px; }

/* 上の縁のボタン */
.keys {
  display: flex;
  gap: 3px;
  padding: 0 14px;
  position: relative;
  z-index: 0;
}
.key {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--silver-1), var(--silver-2) 70%, var(--silver-3));
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,0.12), 0 -1px 0 rgba(0,0,0,0.15);
  color: #2b2f36;
  font-size: 11px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 80ms ease, height 80ms ease;
  touch-action: manipulation;
}
.key span { font-size: 10px; letter-spacing: -0.12em; }
.key b { font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.key:active, .key.down { transform: translateY(5px); }
.key.play { background: linear-gradient(180deg, #fafafa, #d7dade 70%, #aab0b7); }
.key.play span { font-size: 15px; letter-spacing: 0; }
.key:focus-visible, .hotline:focus-visible, .small:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.body {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--blue-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 18px 40px -18px rgba(10,20,40,0.55), 0 2px 6px rgba(10,20,40,0.25);
}

/* 上の銀の帯：HOTLINE と差し口 */
.brow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 10px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.0) 0 2px, rgba(255,255,255,0.18) 2px 3px),
    linear-gradient(180deg, #eef0f2, #c9cdd2);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  color: #3a3f47;
}
.brow small { font-size: 9px; letter-spacing: 0.14em; font-weight: 600; }
.hot-wrap, .jacks { display: flex; align-items: center; gap: 9px; }
.hot-text { display: flex; flex-direction: column; line-height: 1.25; }
.hot-label { font-size: 12px; font-weight: 500; color: #b4560a; font-variant-numeric: tabular-nums; }
.hotline {
  width: 54px;
  height: 30px;
  border-radius: 7px;
  border: 0;
  background: linear-gradient(180deg, var(--orange-hi), var(--orange) 60%, #c8640d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 0 #a24f08, 0 3px 6px rgba(0,0,0,0.25);
  color: #fff;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
  touch-action: manipulation;
}
.hotline .dot { font-size: 13px; text-shadow: 0 1px 0 rgba(0,0,0,0.25); }
.hotline:active, .hotline.live { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 0 0 #a24f08, 0 1px 2px rgba(0,0,0,0.25); }
.hotline.live .dot { color: #d0141e; animation: breathe 1.1s ease-in-out infinite; }
.hotline:disabled { cursor: default; }
@keyframes breathe { 50% { opacity: 0.35; } }

.jack {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #050505 0 3.5px, #6f747b 4px 5.5px, #d6d9dd 6px 7px, #8d9299 7.5px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

/* 青い面と窓 */
.face {
  padding: 18px 18px 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,0.04) 2px 3px),
    linear-gradient(180deg, var(--blue-1), var(--blue-2) 55%, var(--blue-3));
}
.window {
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%), var(--window);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.25);
}
.cassette { display: block; width: 100%; height: auto; }
.cassette .shell { fill: #2a2d33; stroke: #43474f; stroke-width: 1; }
.cassette .label { fill: #e7e2d4; }
.cassette .label-text { fill: #50525a; font: 600 8.5px "Jost", sans-serif; letter-spacing: 0.18em; text-anchor: middle; }
.cassette .pack { fill: var(--tape); }
.cassette .inside { fill: #15171a; }
.cassette .hub { fill: #f2f2ef; }
.cassette .tooth { fill: #2a2d33; }
.cassette .axle { fill: #2a2d33; }
.cassette .gap { fill: rgba(200,215,230,0.06); stroke: rgba(255,255,255,0.22); stroke-width: 1; }
.cassette .foot { fill: #23262b; }
.cassette .reel { transform-box: fill-box; transform-origin: center; }

/* テープカウンター */
.counter {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.counter .cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--digit-bg);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.2);
}
.counter small { color: #9ea3ab; font-size: 10px; letter-spacing: 0.1em; }
.digits {
  color: var(--digit);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.foot-strip {
  display: flex;
  justify-content: space-between;
  padding: 7px 18px 9px;
  background: linear-gradient(180deg, #c9cdd2, #aeb3b9);
  color: #464b53;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

/* 本体の下 */
.status { margin: 22px 0 0; text-align: center; min-height: 1.7em; }
.status.loud { color: #c8640d; font-weight: 500; font-size: 17px; }
.today, .note { margin: 2px 0 0; text-align: center; color: var(--quiet); font-size: 13px; }
.note:empty { display: none; }
/* 本番のログイン。録る人だけが使う */
.account, .account form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 10px auto 0; font-size: 13px; color: var(--quiet); }
.account input { width: min(240px, 60vw); height: 26px; padding: 0 10px; border: 1px solid rgba(59, 63, 70, 0.35); border-radius: 13px; background: transparent; color: inherit; font: inherit; }
.small-print { margin-top: 28px; text-align: center; font-size: 12px; }
.small-print.credit { margin-top: 4px; font-size: 11px; }
.small-print a { color: inherit; }

/* 自分の声の位置。本人の画面にだけ出る。罫線のあるメモの紙に書く */
.memo {
  --paper: #fffbea;
  --rule: #c9d8e8;
  --margin: #e6a3a3;
  --pencil: #3b3f46;
  position: relative;
  margin: 30px auto 0;
  width: 100%;
  max-width: 400px;
  padding: 18px 18px 22px 46px;
  background:
    linear-gradient(90deg, transparent 33px, var(--margin) 33px 34px, transparent 34px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper);
  background-position: 0 0, 0 18px, 0 0;
  color: var(--pencil);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 10px 22px -12px rgba(40,30,10,0.35);
  transform: rotate(-0.6deg);
  line-height: 32px;
}
.memo::before {
  /* 留めたテープ */
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  width: 84px; height: 20px;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(236, 226, 196, 0.75);
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.memo h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.08em; line-height: 32px; }
.memo-note { margin: 0; font-size: 12px; color: #7a7d84; line-height: 32px; }
.memo-list { list-style: none; margin: 0; padding: 0; }
.memo-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  border-radius: 3px;
}
.memo-list .pos { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; letter-spacing: 0.03em; }
.memo-list .when { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #8a8d93; font-variant-numeric: tabular-nums; }
.memo-list li.fresh { animation: ink 2.4s ease-out; }
.memo-list li.here .pos { color: #c8640d; }
.memo-list li.here .pos::after { content: " ♪"; font-weight: 400; }
@keyframes ink { 0% { background: rgba(240, 138, 36, 0.28); } 100% { background: transparent; } }
.pen {
  flex: none;
  padding: 0 9px;
  height: 24px;
  border: 1px solid rgba(59, 63, 70, 0.35);
  border-radius: 12px;
  background: transparent;
  color: var(--pencil);
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
}
.pen:hover { background: rgba(59, 63, 70, 0.06); }
.pen:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .memo { --paper: #ede6cf; }
}

@media (max-width: 380px) {
  .keys { padding: 0 8px; gap: 2px; }
  .key b { font-size: 11px; }
  .face { padding: 14px 12px 12px; }
  .digits { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hotline.live .dot { animation: none; }
}

/* 鳴っているあいだの波形。状態の文と同じ場所に出す */
.wave { display: block; width: min(280px, 80vw); height: 1.7em; margin: 22px auto 0; color: #c8640d; }
.wave[hidden] { display: none; }
.status.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* 確かめの窓。画面の真ん中に、メモの紙と同じ色で出す */
dialog.ask {
  --pencil: #3b3f46;
  margin: auto;
  width: min(340px, calc(100vw - 32px));
  padding: 22px 22px 18px;
  border: none;
  border-radius: var(--r);
  background: #fffbea;
  color: var(--pencil);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
dialog.ask::backdrop { background: rgba(20, 22, 26, 0.45); }
.ask-title { margin: 0; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ask-body { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #5b5f66; }
.ask-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ask-row .pen { height: 30px; padding: 0 16px; font-size: 13px; line-height: 28px; border-radius: 15px; }
.ask-row .ask-yes { border-color: #c0392b; background: #c0392b; color: #fff; }
.ask-row .ask-yes:hover { background: #a93226; }
.small-print.presented { margin-top: 18px; font-size: 11px; letter-spacing: 0.04em; }