/* ============================================================
   lp.css — ポートフォリオLP「ぽやんち」3案 共通スタイル
   8bitレトロゲーム × ミニマルおしゃれ / スマホ縦長
   mascots.css の変数（--cream/--paper/--ink/--sage/--sky/--butter/--blush）を継承
   ============================================================ */

:root {
  --line:    oklch(0.36 0.022 60 / 0.14);
  --line-2:  oklch(0.36 0.022 60 / 0.08);
  --paper-2: oklch(0.96 0.012 85);
  --sage-bg: oklch(0.95 0.022 150);
  --sky-bg:  oklch(0.95 0.022 235);
  --butter-bg: oklch(0.96 0.03 92);
  --peach-bg: oklch(0.95 0.032 55);
}

/* ---------- 画面（スマホ） ---------- */
.screen {
  width: 100%; height: 100%;
  background: var(--cream);
  color: var(--ink);
  font-family: "Zen Maru Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
}
.screen .dot, .dot { font-family: "DotGothic16", sans-serif; }

/* スマホのステータスバー（ミニ） */
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 20px 4px; font-size: 13.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--ink);
}
/* ゲーム風HUD（なかま図鑑） */
.statusbar.hud { padding: 5px 16px 4px; }
.hud-label { font-size: 11.5px; letter-spacing: .08em; color: var(--ink); white-space: nowrap; }
.hud-label b { font-size: 13.5px; }
.hud-label .hud-slash { opacity: .5; }
.hud-chars { display: flex; gap: 3px; align-items: center; }
.hud-char {
  width: 17px; height: 17px; position: relative; overflow: hidden;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink);
  background: var(--cream);
}
.hud-char.off { background: oklch(0.86 0.01 80); border-color: oklch(0.66 0.01 80); }
.hud-char.on { background: var(--paper); }
.hud-char-in {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center;
}
.hud-q { font-size: 11.5px; color: oklch(0.6 0.01 80); font-weight: 700; }
.screen.dark .hud-label { color: #f3efe6; }
.screen.dark .hud-char.on { background: #2c2820; }
.screen.dark .hud-char.off { background: #1c1913; border-color: #3a352b; }
.statusbar .sb-dots { display: flex; gap: 4px; align-items: center; }
.statusbar .sb-dots i { width: 5px; height: 5px; background: var(--ink); display: block; }
.statusbar .sb-dots i:last-child { width: 16px; }

/* 改装中バナー */
.cobanner {
  position: relative; margin: 28px 16px 6px; padding: 14px 8px 14px;
  min-height: 64px; overflow: hidden;
  background: var(--butter-bg);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.cobanner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(45deg, var(--ink) 0 9px, oklch(0.86 0.09 90) 9px 18px);
  opacity: .55;
}
/* 背景のドットビル（文字の背面まで立ち上げる） */
.cobanner-city {
  position: absolute; left: 0; right: 0; bottom: -28px; height: 72px;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  padding: 0 6px; opacity: .14; pointer-events: none; z-index: 1;
}
.cobanner-bldg { width: 13px; background: var(--ink); position: relative; }
.cobanner-bldg::after {
  content: ""; position: absolute; inset: 2px 2px 0;
  background-image: radial-gradient(var(--butter-bg) 0.6px, transparent 1.1px);
  background-size: 4px 5px; background-position: 0 1px;
}
/* 玄人（両端・ぴょこぴょこ） */
.cobanner-kuro {
  position: relative; z-index: 2; width: 46px; height: 44px; flex: 0 0 auto;
  animation: cohop 0.72s steps(1) infinite;
}
.cobanner-kuro.r { animation-delay: 0.36s; }
.cobanner-kuro-in {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.30); transform-origin: center;
}
@keyframes cohop {
  0%   { transform: translateY(2px); }
  25%  { transform: translateY(-4px); }
  50%  { transform: translateY(-9px); }
  75%  { transform: translateY(-4px); }
  100% { transform: translateY(2px); }
}
/* テキスト */
.cobanner-text { position: relative; z-index: 2; text-align: center; flex: 0 1 auto; }
.cobanner-text .cob-sub {
  display: block; font-size: 9px; color: var(--peach-d);
  letter-spacing: .2em; margin-bottom: 5px;
}
.cobanner-text .cob-main {
  font-family: "DotGothic16", sans-serif; font-weight: 700; font-size: 16px;
  line-height: 1.45; color: var(--ink); letter-spacing: .04em;
  text-shadow: 2px 2px 0 rgba(0,0,0,.10);
}
.cobanner-text .cob-main .em { color: var(--sage-d); }

/* サイトへのご意見・不具合報告 */
.fbbox { margin: 18px 16px 0; }
.fbbox-card { background: var(--paper); padding: 15px 15px 16px; }
.fbbox-head { display: flex; align-items: flex-start; gap: 11px; }
.fbbox-ico {
  flex: 0 0 auto; width: 34px; height: 34px; position: relative;
  background: oklch(0.95 0.04 150); border: 2px solid var(--ink);
  --n: 4px;
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
.fbbox-ico::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 18px; transform: translate(-50%, -50%);
  background: oklch(0.6 0.16 150);
}
.fbbox-ico::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 6px; transform: translate(-50%, -50%);
  background: oklch(0.6 0.16 150);
}
.fbbox-tx { font-size: 12.5px; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }
.fbbox-tx b { display: block; font-family: "DotGothic16", sans-serif; font-weight: 400; font-size: 14px; color: var(--ink); margin-bottom: 3px; }

.fbbox-open {
  margin-top: 12px; width: 100%; background: var(--ink); color: var(--paper);
  border: none; cursor: pointer; padding: 11px; font-family: "DotGothic16", sans-serif;
  font-size: 13.5px; letter-spacing: .04em;
  --n: 4px;
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}
.fbbox-open:active { transform: translate(1px, 1px); }

.fbbox-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.fbbox-in, .fbbox-text {
  font-family: "Zen Maru Gothic", sans-serif; font-size: 13.5px; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--line); padding: 9px 11px; width: 100%; box-sizing: border-box;
}
.fbbox-text { resize: vertical; line-height: 1.7; }
.fbbox-in:focus, .fbbox-text:focus { outline: none; border-color: var(--sky-d); }
.fbbox-row { display: flex; gap: 8px; }
.fbbox-cancel {
  flex: 0 0 auto; background: transparent; border: 1.5px solid var(--line); color: var(--ink-soft);
  cursor: pointer; padding: 9px 16px; font-size: 12.5px;
}
.fbbox-send {
  flex: 1; background: var(--ink); color: var(--paper); border: none; cursor: pointer;
  padding: 9px; font-family: "DotGothic16", sans-serif; font-size: 13.5px; letter-spacing: .03em;
}
.fbbox-send:disabled { background: var(--line); color: var(--ink-soft); cursor: default; }

.fbbox-thanks {
  margin-top: 12px; font-size: 12.5px; color: var(--sage-d); line-height: 1.7;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.fbbox-again {
  background: transparent; border: none; cursor: pointer;
  font-size: 11.5px; color: var(--ink-soft); text-decoration: underline; padding: 0;
}

/* 新着お知らせバッジ（右上の番号に代わって出すピクセル「!」） */
.gcard-new-badge {
  position: relative; display: inline-block;
  width: 7px; height: 18px; margin: 1px 3px 0 0;
  animation: gcardbang 0.7s ease-in-out infinite;
}
.gcard-new-badge::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 7px; height: 10px; background: oklch(0.74 0.13 18);
  box-shadow: 0 1px 0 oklch(0.66 0.13 18);
}
.gcard-new-badge::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 7px; height: 6px; background: oklch(0.74 0.13 18);
  box-shadow: 0 1px 0 oklch(0.66 0.13 18);
}
@keyframes gcardbang {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.08); }
}

/* ============================================================
   ピクセルUI部品
   ============================================================ */

/* 角を欠いた8bitボックス（ノッチコーナー） */
.pixbox {
  --n: 5px;                /* ノッチサイズ */
  position: relative;
  background: var(--paper);
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}
/* ピクセルボーダー（外枠インク + 内側ペーパー）。外側に置く */
.pixframe {
  --n: 5px;
  position: relative;
  background: var(--ink);
  padding: 4px;
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}
.pixframe > .pixframe-in {
  background: var(--paper);
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
}
/* ハードシャドウ付き枠：drop-shadow で確実に背面へ（clip-path形状に追従） */
.hardshadow { position: relative; filter: drop-shadow(5px 5px 0 var(--ink)); }

/* ---------- ピクセルボタン ---------- */
.pixbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: "DotGothic16", sans-serif;
  font-size: 18.5px; letter-spacing: .04em;
  color: var(--paper); background: var(--ink);
  padding: 16px 22px; cursor: pointer; user-select: none;
  --n: 5px;
  clip-path: polygon(
    0 var(--n), var(--n) var(--n), var(--n) 0,
    calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%,
    var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n))
  );
  transition: transform .07s steps(2);
}
.pixbtn .play { font-size: 13.5px; }
.pixbtn { white-space: nowrap; }
.pixbtn.full { width: 100%; }
.pixbtn.sage { background: var(--sage-d); color: var(--paper); }
.pixbtn.sky  { background: var(--sky-d); }
.pixbtn:active { transform: translate(3px, 3px); }
.pixbtn-wrap { position: relative; display: inline-block; }
.pixbtn-wrap.full { display: block; }
.pixbtn-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  transform: translate(5px, 6px);
  background: oklch(0.36 0.022 60 / .28);
  clip-path: polygon(
    0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px,
    100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%,
    5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px)
  );
}
.pixbtn-wrap .pixbtn { position: relative; z-index: 1; }

/* アウトラインボタン（ミニマル案） */
.linkbtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "DotGothic16", sans-serif; font-size: 17px;
  color: var(--ink); background: transparent;
  border: 2px solid var(--ink); padding: 13px 20px;
  cursor: pointer; transition: background .12s, color .12s;
}
.linkbtn:hover { background: var(--ink); color: var(--paper); }
.ghost { background: none; border: none; color: var(--ink-soft); font-family: "DotGothic16", sans-serif;
  font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   フェイスチップ（ダイアログ用の顔クロップ）
   ============================================================ */
.facechip { position: relative; overflow: hidden; flex: 0 0 auto; }
.facechip-inner { position: absolute; left: 50%; top: 50%; }
.facechip .bob { animation: none !important; }

/* ============================================================
   RPGダイアログボックス
   ============================================================ */
.rpgbox { position: relative; }
.rpgbox .rpgbox-in {
  background: var(--paper);
  padding: 16px 18px 18px;
  display: flex; gap: 13px; align-items: flex-start;
}
.rpgbox .speaker {
  font-family: "DotGothic16", sans-serif; font-size: 13.5px;
  color: var(--ink-soft); margin-bottom: 7px; letter-spacing: .04em;
}
.rpgbox .line {
  font-size: 17px; line-height: 1.75; color: var(--ink);
  min-height: 2.6em; text-wrap: pretty;
}
.caret {
  display: inline-block; width: 8px; height: 16px; vertical-align: -2px;
  background: var(--ink); margin-left: 2px;
  animation: caretblink 0.9s steps(1) infinite;
}
@keyframes caretblink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
.pico-line { transition: opacity .35s; }
.pico-line[data-phase="out"] { opacity: 0; }

/* 次へ ▼ */
.next-tri {
  position: absolute; right: 14px; bottom: 12px;
  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--ink);
  animation: tribounce 0.9s ease-in-out infinite;
}
@keyframes tribounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ============================================================
   特徴リスト
   ============================================================ */
.feat-row { display: flex; gap: 15px; align-items: flex-start; }
.feat-ico {
  flex: 0 0 auto; width: 54px; height: 54px;
  display: grid; place-items: center;
}
.feat-ico svg { display: block; }
.feat-title { font-family: "DotGothic16", sans-serif; font-size: 18px; margin: 2px 0 6px; letter-spacing: .02em; }
.feat-desc { font-size: 16px; line-height: 1.9; color: var(--ink-soft); text-wrap: balance; word-break: auto-phrase; }

/* セクション見出し（RPGメニュー風） */
.sec-label {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: "DotGothic16", sans-serif; font-size: 15px;
  color: var(--ink-soft); letter-spacing: .06em;
}
.sec-label .play { font-size: 11.5px; color: var(--sage-d); }

/* 大見出し（読みやすい丸ゴシック太字。ピクセル感はロゴ・ラベル・ボタンで担保） */
.headline {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700;
  letter-spacing: .005em; line-height: 1.5; color: var(--ink);
}

/* ============================================================
   案C : CRTスクリーン
   ============================================================ */
.crt {
  position: relative; overflow: hidden;
  background: var(--sage-bg);
}
.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.045) 0 2px, transparent 2px 4px
  );
  mix-blend-mode: multiply;
}
.crt-glow { position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 36px rgba(0,0,0,.06); }

/* PRESS START 点滅 */
.blink { animation: pressblink 1.05s steps(1) infinite; }
@keyframes pressblink { 0%,55% { opacity: 1; } 55.01%,100% { opacity: 0; } }

/* ゲームカード（案C） */
.gcard { position: relative; padding: 16px 14px 15px; }
.gcard .gcard-in { display: flex; flex-direction: column; gap: 9px; }
.gcard .gnum { font-family: "DotGothic16", sans-serif; font-size: 12.5px; color: var(--ink-soft); letter-spacing: .1em; }

/* アート調ロゴ「405 Just Found」 */
.logo405 { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logo405 .l405-tiles { display: flex; gap: 8px; }
.logo405 .l405-tile {
  width: 48px; height: 54px; display: grid; place-items: center;
  font-size: 30px; line-height: 1; color: var(--ink);
  animation: tilebob 0.5s steps(2, end) infinite;
}
/* 3枚それぞれ違うテンポで小刻みに（カクカク・レトロ） */
.logo405 .l405-tile:nth-child(1) { animation-duration: 0.46s; }
.logo405 .l405-tile:nth-child(2) { animation-duration: 0.62s; animation-delay: 0.1s; }
.logo405 .l405-tile:nth-child(3) { animation-duration: 0.38s; animation-delay: 0.05s; }
@keyframes tilebob {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo405 .l405-tile { animation: none; }
}
.logo405 .l405-jf {
  display: flex; align-items: center; gap: 11px; white-space: nowrap;
  font-size: 14px; letter-spacing: .34em; color: var(--ink); padding-left: .34em;
}
.logo405 .l405-jf::before, .logo405 .l405-jf::after {
  content: ""; width: 16px; height: 3px; background: var(--ink);
}

/* ============================================================
   案B : ミニマル
   ============================================================ */
.mini-num {
  font-family: "DotGothic16", sans-serif; font-size: 13.5px;
  color: var(--sage-d); letter-spacing: .1em;
}
.divider { height: 1px; background: var(--line); border: none; }
.minibubble {
  position: relative; display: inline-block;
  background: var(--paper); border: 2px solid var(--ink);
  padding: 11px 15px; font-size: 16px; line-height: 1.7; color: var(--ink);
  max-width: 250px; text-wrap: pretty;
}
.minibubble::after {
  content: ""; position: absolute; left: 26px; bottom: -9px;
  width: 12px; height: 12px; background: var(--paper);
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

/* マスコットの大きさ調整ラッパ */
.m-scale { display: grid; place-items: center; }

/* 細かいタグ */
.kbd {
  display: inline-block; font-family: "DotGothic16", sans-serif; font-size: 12.5px;
  color: var(--ink-soft); border: 1.5px solid var(--line); padding: 3px 7px;
}
.foot { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }

/* プロフィールカード（クリックで詳細へ） */
.profile-card { transition: transform .08s steps(2); }
a:hover > .profile-card { transform: translate(-1px, -2px); }
a:active > .profile-card { transform: translate(2px, 2px); }

/* ============================================================
   ダークテーマ（黒地・白文字ツートーン）
   ※ CRT画面はモニターとして明るいまま、キャラ/アイコンは元色維持
   ============================================================ */
.screen.dark .feat-title { color: #f3efe6; }
.screen.dark .feat-desc  { color: #cfc9ba; }
.screen.dark .sec-label  { color: #a8a294; }
.screen.dark .gnum       { color: #a8a294; }
.screen.dark .foot       { color: #8c8678; }
.screen.dark .l405-tile  { color: #f3efe6; }
.screen.dark .l405-jf    { color: #f3efe6; }
.screen.dark .l405-jf::before,
.screen.dark .l405-jf::after { background: #f3efe6; }
.screen.dark .sb-dots i  { background: #f3efe6; }
/* 黒地で持ち上がるハードシャドウ（地よりわずかに明るい段差） */
.screen.dark .hardshadow { filter: drop-shadow(4px 4px 0 #322d22); }

/* ---------- ひみつけっしゃ バナー（ダーク・ターミナル調で別物に） ---------- */
.secret-banner {
  display: block;
  background: #1c1a15;
  border: 1px solid #322f28; border-left: 3px solid #7ec99a; border-radius: 11px;
  padding: 15px 16px; position: relative; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: border-color .15s, transform .08s, box-shadow .15s;
}
.secret-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
.secret-banner:hover { border-color: #7ec99a; box-shadow: 0 10px 28px rgba(0,0,0,.26); }
.secret-banner:active { transform: translateY(1px); }
.secret-banner .sb-head { display: flex; align-items: center; gap: 13px; }
.secret-banner .sb-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px;
  background: #14241a; border: 1px solid rgba(126,201,154,.3);
  display: grid; place-items: center;
}
.secret-banner .sb-tx { flex: 1; min-width: 0; }
.secret-banner .sb-tag { font-size: 11.5px; letter-spacing: .14em; color: #e0b073; margin-bottom: 4px; }
.secret-banner .sb-title { font-size: 18.5px; font-weight: 700; color: #e9e4d6; letter-spacing: .04em; line-height: 1.2; }
.secret-banner .sb-desc { font-size: 13.5px; line-height: 1.65; color: #8d877a; margin-top: 11px; }
.secret-banner .sb-new-badge {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 7px; height: 18px;
  animation: gcardbang 0.7s ease-in-out infinite;
}
.secret-banner .sb-new-badge::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 7px; height: 10px; background: oklch(0.78 0.15 18);
  box-shadow: 0 1px 0 oklch(0.7 0.15 18);
}
.secret-banner .sb-new-badge::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 7px; height: 6px; background: oklch(0.78 0.15 18);
  box-shadow: 0 1px 0 oklch(0.7 0.15 18);
}
.secret-banner .sb-arr {
  flex: 0 0 auto; font-size: 13.5px; color: #7ec99a;
  animation: sbarr 1.3s ease-in-out infinite;
}
@keyframes sbarr { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* ============================================================
   PRESS START — シンプルポップアップ
   ============================================================ */
.intro-pop-veil {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: hidden;
  box-sizing: border-box;
}
.intro-pop {
  width: 100%; max-width: 320px;
  background: var(--paper); border: 3px solid var(--ink);
  padding: 20px 20px 18px;
  clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  box-shadow: 5px 5px 0 var(--ink);
  animation: ipoppop .22s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes ipoppop { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }

/* パンダアイコン */
.intro-pop-face {
  width: 104px; height: 104px; margin: 0 auto 14px;
  position: relative; overflow: hidden;
}
.intro-pop-panda-in {
  position: absolute; top: 50%; left: 50%;
  transform: translate(calc(-50% - 22px), -50%) scale(0.52);
  transform-origin: center center;
}

/* 吹き出しテキスト（3行固定・上から下へ） */
.intro-pop-bubble {
  font-family: "DotGothic16", sans-serif; font-size: 14px; line-height: 1.85;
  color: var(--ink); text-align: left;
  height: 6em; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  border-top: 1.5px dashed var(--line); border-bottom: 1.5px dashed var(--line);
  padding: 12px 16px;
}

/* フッター（ドット＋ボタン） */
.intro-pop-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; }
.intro-pop-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.intro-pop-dots i { width: 8px; height: 8px; background: var(--line); display: block; }
.intro-pop-dots i.on { background: var(--ink); }
.intro-pop-btns { display: flex; gap: 8px; align-items: center; }
.intro-pop-btns.ipop-hidden { opacity: 0; pointer-events: none; }
.ipop-placeholder { display: inline-block; width: 70px; height: 36px; }
.ipop-btn {
  background: var(--ink); color: var(--paper); border: none; cursor: pointer;
  padding: 8px 12px; font-size: 12.5px; letter-spacing: .04em;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  font-family: "DotGothic16", sans-serif;
}
.ipop-btn:hover { filter: brightness(1.2); }
.ipop-skip { background: transparent; border: none; cursor: pointer; font-size: 11.5px; color: var(--ink-soft); font-family: "DotGothic16", sans-serif; white-space: nowrap; }
.ipop-skip:hover { color: var(--ink); }
.ipop-back {
  background: transparent; color: var(--ink); border: 2px solid var(--line); cursor: pointer;
  padding: 8px 12px; font-size: 12.5px; letter-spacing: .03em;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  font-family: "DotGothic16", sans-serif;
}
.ipop-back:hover { border-color: var(--ink); }

/* カーソル点滅 */
.intro-cursor { display: inline-block; width: 10px; height: 14px; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: introblink 1s steps(1) infinite; }
@keyframes introblink { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }