:root {
  --yellow: #ffd400;
  --red: #e60012;
  --ink: #111;
  --paper: #fffdf3;
  --skin: #ffd9b8;
  --blue: #1f6bff;
  --display: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", sans-serif;
  --body: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --stroke: 3px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(circle at 1px 1px, rgb(0 0 0 / .12) 1.5px, transparent 0) 0 0 / 14px 14px,
    var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px env(safe-area-inset-bottom);
  overflow-x: hidden;
}

/* ---------- 見出し ---------- */
.masthead { text-align: center; padding: 18px 0 10px; }
.kicker {
  display: inline-block;
  margin: 0 0 6px;
  padding: 4px 14px;
  background: var(--ink);
  color: var(--yellow);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1em;
  transform: rotate(-2deg);
}
.title { margin: 0; line-height: 1; font-family: var(--display); font-weight: 400; }
.title span { display: block; }
.t-uchu {
  font-size: clamp(44px, 12vw, 84px);
  color: #fff;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--red);
  letter-spacing: .02em;
}
.t-sub {
  font-size: clamp(20px, 5vw, 30px);
  margin-top: 4px;
  color: var(--red);
  -webkit-text-stroke: 4px #fff;
  paint-order: stroke fill;
}

/* ---------- ステージ ---------- */
.stage {
  width: 100%;
  max-width: 960px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .stage { grid-template-columns: 1fr 280px; align-items: start; }
}

.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 5px solid var(--ink);
  border-radius: 18px;
  background: #1a1a1a;
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--ink);
}
@media (max-width: 600px) { .screen { aspect-ratio: 3 / 4; } }

.screen video, .screen canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.screen.mirror video, .screen.mirror canvas { transform: scaleX(-1); }
.screen.shake { animation: shake .45s cubic-bezier(.36,.07,.19,.97); }

/* 開始前 */
.intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px;
  background:
    repeating-conic-gradient(from 0deg at 50% 45%, #ff3b3b 0 7.5deg, var(--red) 7.5deg 15deg);
  color: #fff;
  text-align: center;
}
.howto {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "lead lead" "img desc";
  align-items: center;
  gap: 6px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 14px;
  padding: 10px 16px 12px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.howto-lead {
  grid-area: lead;
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
}
.howto-hand {
  grid-area: img;
  width: 92px;
  height: auto;
  border: 3px solid var(--ink);
  border-radius: 10px;
}
.howto-desc { grid-area: desc; margin: 0; font-weight: 800; font-size: 15px; line-height: 1.6; text-align: left; }
.privacy { margin: 0; font-size: 12px; font-weight: 800; line-height: 1.6; text-shadow: 0 1px 0 rgb(0 0 0 / .4); }

/* 読み込み */
.loading {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: rgb(0 0 0 / .78);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}
.loading p { margin: 0; }
.mic {
  width: 22px; height: 70px;
  border-radius: 11px 11px 4px 4px;
  background: linear-gradient(#ddd 0 34%, #444 34%);
  position: relative;
  animation: bob 1s ease-in-out infinite;
}
.mic::before {
  content: ""; position: absolute; top: -18px; left: -9px;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #999 60%, #555);
}

/* 字幕テロップ */
.caption {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  max-width: calc(100% - 24px);
  padding: 6px 18px;
  background: rgb(255 255 255 / .94);
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(14px, 3.6vw, 19px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .2s;
}
.caption.hot { background: var(--yellow); }

/* ---------- ツッコミ ---------- */
.tsukkomi {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 5;
}
.burst {
  position: absolute; inset: -40%;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 212 0 / .0) 0 18%, transparent 19%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / .92) 0 3deg, transparent 3deg 9deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 22%, #000 46%);
          mask: radial-gradient(circle at 50% 50%, transparent 0 22%, #000 46%);
  animation: spin 2.4s linear infinite, fadeIn .15s ease-out;
}
.tsukkomi::before {
  content: "";
  position: absolute; inset: 0;
  background: rgb(230 0 18 / .35);
  animation: flash .5s ease-out;
}
.sfx {
  position: absolute;
  top: 10%; right: 6%;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 7vw, 52px);
  color: var(--yellow);
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  transform: rotate(14deg);
  animation: pop .35s cubic-bezier(.2,1.8,.4,1) both;
}
.telop {
  position: relative;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  line-height: 1.08;
  transform: rotate(-6deg);
  animation: slam .5s cubic-bezier(.2,1.6,.35,1) both;
}
.telop span { display: block; paint-order: stroke fill; }
.telop span:nth-child(1) {
  font-size: clamp(30px, 8vw, 58px);
  color: #fff;
  -webkit-text-stroke: 7px var(--ink);
}
.telop span:nth-child(2) {
  font-size: clamp(54px, 15vw, 116px);
  color: var(--yellow);
  -webkit-text-stroke: 9px var(--red);
  filter: drop-shadow(0 0 0 #fff) drop-shadow(5px 6px 0 var(--ink));
}
.telop span:nth-child(3) {
  font-size: clamp(36px, 10vw, 76px);
  color: #fff;
  -webkit-text-stroke: 8px var(--red);
  filter: drop-shadow(4px 5px 0 var(--ink));
  transform: translateX(8%);
}

/* ---------- パネル ---------- */
.panel {
  display: grid;
  gap: 12px;
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 8px 8px 0 var(--ink);
}
.meter-head, .count {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 800;
}
.meter-head strong { font-family: var(--display); font-weight: 400; font-size: 22px; }
.meter-bar {
  position: relative;
  margin-top: 6px;
  height: 22px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #eee;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(-45deg, var(--red) 0 10px, #ff4d4d 10px 20px);
  transition: width .12s linear;
}
.meter-line {
  position: absolute; top: 0; bottom: 0; left: 62%;
  border-left: 3px dashed var(--ink);
}
.count {
  padding: 8px 12px;
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
}
.count strong { font-weight: 800; }
.count b { font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--yellow); margin-right: 2px; }
.count.bump b { display: inline-block; animation: boing .4s cubic-bezier(.2,1.8,.4,1); }

.controls { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.controls .btn-toggle { grid-column: 1 / -1; }

/* ---------- ボタン ---------- */
.btn {
  appearance: none;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 14px;
  padding: 10px 14px;
  background: #fff;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  transition: transform .06s, box-shadow .06s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }

.btn-start {
  display: grid;
  gap: 2px;
  padding: 12px 40px;
  background: var(--yellow);
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  box-shadow: 0 7px 0 var(--ink);
  animation: bob 1.6s ease-in-out infinite;
}
.btn-start small { font-family: var(--body); font-weight: 800; font-size: 14px; }

.btn-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 17px;
  background: #e8e8e8;
}
.btn-toggle .ico { font-size: 22px; }
.btn-toggle[aria-pressed="true"] { background: var(--red); color: #fff; }

.btn-sub { font-size: 14px; padding: 8px 10px; }
.btn-install { grid-column: 1 / -1; font-size: 15px; padding: 8px 10px; background: var(--blue); color: #fff; }
.btn-sub[aria-pressed="false"] { background: #e8e8e8; color: #555; }

.foot { padding: 22px 0 18px; font-size: 12px; font-weight: 800; text-align: center; opacity: .75; }
.foot p { margin: 0; }

/* ---------- アニメーション ---------- */
@keyframes slam {
  0% { transform: rotate(-6deg) scale(3.2); opacity: 0; }
  60% { transform: rotate(-6deg) scale(.92); opacity: 1; }
  100% { transform: rotate(-6deg) scale(1); }
}
@keyframes pop { 0% { transform: rotate(14deg) scale(0); } 100% { transform: rotate(14deg) scale(1); } }
@keyframes boing { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes shake {
  10%, 90% { transform: translate(-3px, 2px) rotate(-.5deg); }
  20%, 80% { transform: translate(6px, -3px) rotate(.8deg); }
  30%, 50%, 70% { transform: translate(-10px, 4px) rotate(-1deg); }
  40%, 60% { transform: translate(10px, -4px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .burst, .btn-start, .mic { animation: none; }
  .screen.shake { animation: none; }
}