/* =========================================================
   タイピング練習（/typing/）— style.css の上に重ねる
   日本語ローマ字入力。配色はティール系で他事業と差別化。
   ========================================================= */

/* ---- ヒーロー ---- */
.tp-hero{
  background:radial-gradient(130% 130% at 80% 0%, #0f766e 0%, #115e59 50%, #082f2c 100%);
  color:#fff;padding:54px 0 46px;position:relative;overflow:hidden;
}
.tp-hero .container{position:relative;z-index:2;}
.tp-eyebrow{margin:0 0 12px;font-size:.78rem;letter-spacing:.3em;font-weight:700;color:#5eead4;}
.tp-hero h1{margin:0 0 12px;font-size:clamp(1.9rem,5.4vw,2.8rem);font-weight:800;line-height:1.24;}
.tp-hero h1 .accent{color:#5eead4;}
.tp-lead{margin:0;max-width:660px;color:#cdeeea;line-height:1.85;font-size:1.02rem;}
.tp-lead strong{color:#fff;}
.tp-hero-deco{position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-size:min(40vw,340px);line-height:1;opacity:.08;z-index:1;pointer-events:none;user-select:none;}

/* ---- スクリーン ---- */
.tp-screen{display:none;}
.tp-screen.is-active{display:block;animation:tp-fade .25s ease;}
@keyframes tp-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* ---- スタート ---- */
.tp-start{
  background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
  padding:28px 26px;margin-top:-26px;position:relative;z-index:3;
}
.tp-start h2{margin:0 0 6px;color:var(--navy);font-size:1.35rem;}
.tp-start p{margin:0 0 18px;color:var(--muted);line-height:1.8;font-size:.95rem;}

.tp-field{margin:0 0 18px;}
.tp-field-label{font-weight:700;color:var(--navy);font-size:.9rem;margin:0 0 8px;}
.tp-modes,.tp-opts{display:flex;flex-wrap:wrap;gap:10px;}
.tp-mode,.tp-opt{
  border:2px solid var(--border);background:#fff;color:var(--navy);border-radius:10px;
  padding:10px 18px;font-size:.95rem;font-weight:700;cursor:pointer;font-family:inherit;
  transition:border-color .12s ease,background .12s ease;
}
.tp-mode:hover,.tp-opt:hover{border-color:#2dd4bf;}
.tp-mode.is-on,.tp-opt.is-on{border-color:#0d9488;background:#e6fffb;color:#0f766e;}
.tp-mode small{display:block;font-weight:500;color:var(--muted);font-size:.74rem;margin-top:2px;}

.tp-start-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:100%;
  background:linear-gradient(135deg,#0d9488,#0f766e);color:#fff;border:0;border-radius:12px;
  padding:16px 24px;font-size:1.1rem;font-weight:800;cursor:pointer;margin-top:6px;
  box-shadow:0 10px 26px rgba(13,148,136,.32);transition:transform .1s ease,box-shadow .15s ease;
}
.tp-start-btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(13,148,136,.4);}
.tp-prev{margin:16px 0 0;text-align:center;color:var(--muted);font-size:.88rem;}
.tp-prev b{color:#0f766e;}
.tp-sound{background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:700;color:#0f766e;cursor:pointer;font-family:inherit;transition:background .15s ease,border-color .15s ease;}
.tp-sound:hover{border-color:#2dd4bf;background:#f0fdfa;}
.tp-sound.is-off{color:var(--muted);}

/* ---- プレイ ---- */
.tp-statbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin:0 0 12px;}
.tp-stat{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 14px;text-align:center;min-width:84px;box-shadow:var(--shadow);}
.tp-stat b{display:block;font-size:1.25rem;color:#0f766e;font-variant-numeric:tabular-nums;line-height:1.1;}
.tp-stat span{display:block;font-size:.72rem;color:var(--muted);margin-top:2px;}
.tp-stat--time b{color:var(--accent);}
.tp-bar{height:8px;background:#d7f2ee;border-radius:999px;overflow:hidden;margin:0 0 18px;}
.tp-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#0d9488,#2dd4bf);border-radius:999px;transition:width .25s ease;}

.tp-board{
  background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);
  padding:30px 26px;text-align:center;
}
.tp-emoji{font-size:clamp(3rem,11vw,4.6rem);line-height:1;margin:0 0 4px;filter:drop-shadow(0 4px 10px rgba(15,118,110,.18));}
.tp-meaning{margin:0 0 14px;color:var(--muted);font-size:.86rem;}
.tp-text{margin:0 0 14px;font-size:clamp(1.5rem,4.6vw,2.2rem);font-weight:800;color:var(--navy);line-height:1.5;letter-spacing:.02em;}
.tp-reading{margin:0 0 18px;font-size:1.1rem;color:#64748b;letter-spacing:.06em;word-break:break-all;}
.tp-reading .done{color:#0d9488;font-weight:700;}
.tp-romaji{
  font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:1.5rem;letter-spacing:.06em;
  word-break:break-all;line-height:1.7;background:#f6fdfc;border:1px solid #cdeeea;border-radius:12px;
  padding:16px 18px;color:#94a3b8;min-height:1.7em;
}
.tp-romaji .done{color:#0f766e;font-weight:700;}
.tp-romaji .cur{color:#0f172a;background:#a7f3d8;border-radius:3px;padding:0 1px;}
.tp-board.miss .tp-romaji .cur{background:#fecaca;color:#b91c1c;}
.tp-hint{margin:14px 0 0;color:var(--muted);font-size:.82rem;}
.tp-hint kbd{background:#fff;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-size:.8rem;font-family:inherit;color:var(--navy);}
.tp-quit{margin-top:14px;background:transparent;border:0;color:var(--muted);font-size:.86rem;cursor:pointer;text-decoration:underline;}

/* 開始前カウントダウン用オーバーレイ */
.tp-count{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(8,47,44,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.tp-count[hidden]{display:none;}
.tp-count span{font-size:clamp(5rem,24vw,12rem);font-weight:800;color:#fff;text-shadow:0 8px 36px rgba(45,212,191,.7);animation:tp-pop .45s ease;}
@keyframes tp-pop{0%{transform:scale(.55);}55%{transform:scale(1.12);}100%{transform:scale(1);}}

/* ---- 結果 ---- */
.tp-result-card{
  background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);
  padding:30px 26px;text-align:center;
}
.tp-result-eyebrow{margin:0 0 2px;color:var(--muted);font-size:.84rem;letter-spacing:.18em;font-weight:700;}
.tp-kpm{margin:6px 0 0;font-size:3.4rem;font-weight:800;color:#0d9488;line-height:1;font-variant-numeric:tabular-nums;}
.tp-kpm small{display:block;font-size:.82rem;color:var(--muted);letter-spacing:.1em;font-weight:700;margin-top:4px;}
.tp-rank{margin:14px 0 4px;font-size:1.5rem;font-weight:800;color:var(--navy);}
.tp-rank-badge{display:inline-block;background:linear-gradient(135deg,#0d9488,#2dd4bf);color:#fff;border-radius:999px;padding:6px 18px;font-size:.95rem;font-weight:800;box-shadow:0 8px 20px rgba(13,148,136,.3);}
.tp-result-stats{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:22px 0;}
.tp-rs{background:#f6fdfc;border:1px solid #cdeeea;border-radius:12px;padding:14px 20px;min-width:96px;}
.tp-rs b{display:block;font-size:1.4rem;color:#0f766e;font-variant-numeric:tabular-nums;}
.tp-rs span{display:block;font-size:.76rem;color:var(--muted);margin-top:3px;}
.tp-best-note{margin:0 0 18px;color:var(--grass);font-weight:700;font-size:.9rem;min-height:1.1em;}

.tp-share-label{margin:0 0 10px;font-size:.86rem;color:var(--muted);font-weight:700;}
.tp-share-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.tp-sbtn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:11px 18px;font-size:.92rem;font-weight:800;color:#fff;cursor:pointer;transition:transform .1s ease;}
.tp-sbtn:hover{transform:translateY(-2px);}
.tp-sbtn--x{background:#111;}
.tp-sbtn--line{background:#06c755;}
.tp-sbtn--copy{background:#5b6b7d;}
.tp-copied{margin:10px 0 0;color:var(--grass);font-weight:700;font-size:.9rem;min-height:1.2em;}
.tp-retry{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:#fff;color:#0f766e;border:2px solid #0d9488;border-radius:10px;padding:12px 26px;font-size:1rem;font-weight:800;cursor:pointer;transition:background .15s ease;}
.tp-retry:hover{background:#e6fffb;}

.tp-cross{margin-top:26px;}
.tp-cross h3{font-size:1.1rem;color:var(--navy);margin:0 0 14px;text-align:center;}

/* もしもアフィリエイト（楽天）カード — affiliate-box の中 */
.iq-aff{display:inline-flex;align-items:center;gap:14px;text-align:left;color:var(--ink);max-width:520px;padding:8px 10px;border-radius:10px;transition:background .15s ease;}
.iq-aff:hover{background:#f0fdfa;text-decoration:none;}
.iq-aff-ico{font-size:2rem;line-height:1;flex:0 0 auto;}
.iq-aff-txt{display:flex;flex-direction:column;gap:3px;}
.iq-aff-txt b{color:var(--navy);font-size:1rem;}
.iq-aff-txt small{color:var(--muted);font-size:.85rem;line-height:1.5;}

@media (max-width:560px){
  .tp-start{padding:24px 18px;}
  .tp-board{padding:22px 16px;}
  .tp-romaji{font-size:1.25rem;}
  .tp-stat{min-width:70px;padding:7px 10px;}
  .tp-kpm{font-size:2.9rem;}
}