/* ずっしりトイ：画面（HTML）の決まり。docs/playbooks/design-language.md
   使い方：<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&display=swap">
          <link rel="stylesheet" href="paguon-toy.css"> */
:root {
  --pg-bg: #f5f5f2;     /* 生成り（paguon.com と同じ） */
  --pg-panel: #ffffff;
  --pg-ink: #242827;    /* インク */
  --pg-shu: #ff4f1a;    /* 朱：押す所・見るべき所だけ */
  --pg-line: #d9dcd6;
  --pg-sub: #5b605d;    /* 補足の文字。薄くしすぎない */
  --pg-depth: 4px;      /* ボタンの厚み */
  --pg-font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
}

/* タイトル文字：太く、字間をつめる。最後に朱の■（paguon の印） */
.pg-title { font-family: var(--pg-font); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; color: var(--pg-ink); margin: 0; }
.pg-mark { display: inline-block; width: 0.32em; height: 0.32em; background: var(--pg-shu); margin-left: 0.12em; vertical-align: baseline; }
.pg-sign { font-family: var(--pg-font); font-weight: 800; font-size: 11px; letter-spacing: 0.08em; color: var(--pg-ink); }
.pg-sign::after { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--pg-shu); margin-left: 4px; }

/* ボタン：押せる物は下に厚みがある。押すと沈む。押せない物はぺたんこ */
.pg-btn {
  font-family: var(--pg-font); font-weight: 800; font-size: 17px; color: var(--pg-ink);
  background: var(--pg-panel); border: 2.5px solid var(--pg-ink); border-radius: 14px;
  padding: 11px 18px; box-shadow: 0 var(--pg-depth) 0 var(--pg-ink); margin-bottom: var(--pg-depth);
  cursor: pointer; transition: transform 0.05s, box-shadow 0.05s; -webkit-tap-highlight-color: transparent;
}
.pg-btn:active { transform: translateY(var(--pg-depth)); box-shadow: 0 0 0 var(--pg-ink); }
.pg-btn.shu { background: var(--pg-shu); color: #fff; }
.pg-btn:disabled, .pg-btn.flat { box-shadow: none; transform: translateY(var(--pg-depth)); border-style: dashed; color: var(--pg-sub); cursor: default; }

/* 区切り：薄い文字ではなく「｜」で意味を分ける */
.pg-sep::before { content: '｜'; margin: 0 0.3em; color: var(--pg-ink); }

/* 景色が変わったときの帯：太字で、上からドスンと落ちてきて、少しつぶれて止まり、消える */
.pg-zone {
  position: absolute; left: 0; right: 0; top: 36%; text-align: center; pointer-events: none; z-index: 3;
  font-family: var(--pg-font); font-weight: 800; font-size: 30px; color: var(--pg-ink); opacity: 0;
  text-shadow: 0 3px 0 var(--pg-panel), 0 -3px 0 var(--pg-panel), 3px 0 0 var(--pg-panel), -3px 0 0 var(--pg-panel);
}
.pg-zone.show { animation: pg-zone 1.6s ease-in both; }
@keyframes pg-zone {
  0% { opacity: 1; transform: translateY(-60px); }
  16% { opacity: 1; transform: translateY(0) scale(1.08, 0.88); }
  26% { transform: scale(0.97, 1.04); }
  34%, 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ---- 始まり方（paguon-start.js）：1秒イントロ＋操作カード → 3・2・1 → スタート！ ---- */
/* 重ねる板。スタートまではタップを受け止める（イントロ中のタップ＝飛ばす） */
.pg-start { position: absolute; inset: 0; z-index: 20; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pg-start.go { pointer-events: none; }
/* 操作カード：中央より少し下（上から58%）。Android の X で隠れる最下部64pxには掛からない */
.pg-intro-card {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px;
  background: var(--pg-panel); border: 2.5px solid var(--pg-ink); border-radius: 18px; box-shadow: 0 4px 0 var(--pg-ink);
  font-family: var(--pg-font); font-weight: 800; font-size: 19px; color: var(--pg-ink); white-space: nowrap;
  animation: pg-card-in 0.18s ease-out both;
}
.pg-intro-card.out { animation: pg-card-out 0.14s ease-in both; }
@keyframes pg-card-in { from { transform: translate(-50%, -30%) scale(0.85); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes pg-card-out { to { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } }
.pg-gesture { width: 54px; height: 54px; overflow: visible; transform: rotate(var(--rot, 0deg)); flex: none; }
.pg-gesture .hand { transform-box: view-box; }
.g-drag .hand { animation: pg-g-drag 0.9s ease-in-out both; }
.g-flick .hand { animation: pg-g-flick 0.9s cubic-bezier(.5, 0, .2, 1) both; }
.g-swipe .hand { animation: pg-g-swipe 0.9s ease-in-out both; }
.g-tap .hand, .g-hold .hand { animation: pg-g-tap 0.9s ease-in-out both; }
.g-tap .ring { transform-box: fill-box; transform-origin: center; animation: pg-g-ring 0.9s ease-out both; }
.g-hold .ring { animation: pg-g-hold 0.9s linear both; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.g-tilt .phone { transform-box: fill-box; transform-origin: 50% 90%; animation: pg-g-tilt 0.9s ease-in-out both; }
@keyframes pg-g-drag { 0% { transform: translateY(22px); } 20% { transform: translateY(22px) scale(0.94); } 85%, 100% { transform: translateY(-16px) scale(0.94); } }
@keyframes pg-g-flick { 0%, 35% { transform: translateY(18px); } 55%, 100% { transform: translateY(-20px); } }
@keyframes pg-g-swipe { 0% { transform: translateX(-20px) translateY(16px); } 85%, 100% { transform: translateX(20px) translateY(16px); } }
@keyframes pg-g-tap { 0%, 30% { transform: translateY(6px); } 45% { transform: translateY(14px) scale(0.92); } 60%, 100% { transform: translateY(6px); } }
@keyframes pg-g-ring { 0%, 42% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pg-g-hold { from { stroke-dashoffset: 76; } to { stroke-dashoffset: 0; } }
@keyframes pg-g-tilt { 0% { transform: rotate(0); } 30% { transform: rotate(-22deg); } 70% { transform: rotate(22deg); } 100% { transform: rotate(0); } }

/* 3・2・1：上からドスンと落ち、つぶれて戻る。スタート！は朱 */
.pg-count {
  position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); text-align: center; pointer-events: none;
  font-family: var(--pg-font); font-weight: 800; font-size: 96px; line-height: 1; color: var(--pg-ink); opacity: 0;
  text-shadow: 0 4px 0 var(--pg-panel), 0 -4px 0 var(--pg-panel), 4px 0 0 var(--pg-panel), -4px 0 0 var(--pg-panel), 0 9px 0 rgba(74,58,48,.25);
}
.pg-count.show { animation: pg-count 0.4s linear both; }
.pg-count.go { color: var(--pg-shu); font-size: 54px; }
.pg-count.go.show { animation: pg-go 0.4s linear both; }
@keyframes pg-count {
  0% { opacity: 1; transform: translateY(-50%) translateY(-70px); }
  22% { opacity: 1; transform: translateY(-50%) scale(1.18, 0.8); }
  36% { transform: translateY(-50%) scale(0.95, 1.06); }
  48%, 82% { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(-50%) scale(0.9); }
}
@keyframes pg-go {
  0% { opacity: 1; transform: translateY(-50%) scale(0.4); }
  25% { opacity: 1; transform: translateY(-50%) scale(1.2, 0.86); }
  40%, 75% { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(-50%) scale(1.15); }
}

/* 手のガイド：本物の主役の上に、本物らしい半透明の手を出して、どう動かすかを見せる（guide: true）
   中は半透明のグレー、ふちは半透明の白。押している間は指先に半透明の丸（タッチの印）が出る */
.pg-guide {
  position: absolute; left: 0; top: 0; width: 84px; height: 118px; margin: -8px 0 0 -42.5px; /* 指先＝(x, y) */
  pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 2;
}
.pg-guide.on { opacity: 1; }
.pg-guide svg { width: 100%; height: 100%; overflow: visible; }
.pg-guide .sil { transition: transform 0.08s; transform-origin: 50.6px 10px; }
.pg-guide.press .sil { transform: scale(0.94); }
.pg-guide .touch { opacity: 0; transform-origin: 50.6px 10px; transform: scale(0.6); transition: opacity 0.08s, transform 0.12s; }
.pg-guide.press .touch { opacity: 1; transform: scale(1); }
.pg-intro-card.text-only { padding: 10px 20px; }

/* ---- 配信者モードのスイッチ（paguon-streamer.js）：タイトルに置く。オンの間は、ほかの人の名前が仮の名前になる ----
   朱は使わない（朱は1画面に1つの意味だけ。タイトルでは「あそぶ」に使っている）。オンはインクで塗る */
.pg-stream {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; cursor: pointer;
  font-family: var(--pg-font); font-weight: 800; font-size: 13px; color: var(--pg-ink); white-space: nowrap;
  background: var(--pg-panel); border: 2.5px solid var(--pg-ink); border-radius: 999px; -webkit-tap-highlight-color: transparent;
}
.pg-stream-knob { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--pg-line); transition: background 0.15s; flex: none; }
.pg-stream-knob::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--pg-panel); border: 2px solid var(--pg-ink); box-sizing: border-box; transition: transform 0.15s; }
.pg-stream.on .pg-stream-knob { background: var(--pg-ink); }
.pg-stream.on .pg-stream-knob::after { transform: translateX(12px); }
.pg-stream.on .pg-stream-text::after { content: '｜オン'; }

/* ---- 目的（paguon-start.js の goal）：イントロのあと1秒、「めざせ」の札が上からドスンと落ちる（依頼者の決定、2026-11-11）----
   3・2・1 と同じ高さ（上から40%）。カウントが始まると消える */
.pg-goal {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 32px); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 20px 14px; text-align: center; pointer-events: none;
  background: var(--pg-panel); border: 2.5px solid var(--pg-ink); border-radius: 20px; box-shadow: 0 5px 0 var(--pg-ink);
  font-family: var(--pg-font); color: var(--pg-ink); opacity: 0;
}
.pg-goal.show { animation: pg-goal-in 0.36s linear both; }
.pg-goal.out { animation: pg-goal-out 0.14s ease-in both; }
.pg-goal-label { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: #fff; background: var(--pg-shu); border-radius: 999px; padding: 2px 12px; }
.pg-goal-text { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.pg-goal-sub { font-size: 14px; font-weight: 800; color: var(--pg-sub); line-height: 1.35; }
@media (max-width: 360px) { .pg-goal { padding: 10px 14px 12px; } .pg-goal-text { font-size: 22px; } .pg-goal-sub { font-size: 13px; } }
@keyframes pg-goal-in {
  0% { opacity: 1; transform: translate(-50%, -50%) translateY(-70px); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.08, 0.88); }
  50% { transform: translate(-50%, -50%) scale(0.97, 1.04); }
  70%, 100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes pg-goal-out { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } }
.pg-goal-word { display: inline-block; }