/* 足元を掘ったら地球の裏はどこ？ 固有スタイル（色は CSS 変数のみ） */
:root {
  --cu-sea: #2f6fd6;
  --cu-sea-soft: #dbe8fb;
  --cu-land: #8cc084;
  --cu-night1: #0b1d3a;
  --cu-night2: #1f4e8c;
  --cu-gold: #c98a12;
  --cu-pin: #e4572e;
  --cu-star: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cu-sea: #6b9cf0; --cu-sea-soft: #1c2840; --cu-land: #4f7d4a; --cu-gold: #ffd166; }
}
:root[data-theme="dark"] { --cu-sea: #6b9cf0; --cu-sea-soft: #1c2840; --cu-land: #4f7d4a; --cu-gold: #ffd166; }

.cu-title h1 em { font-style: normal; color: var(--cu-sea); }
.cu-h2 { font-size: 17px; margin-bottom: 10px; }

/* ヒーロー */
.cu-hero { position: relative; height: 250px; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 55%, var(--cu-night2), var(--cu-night1) 70%); border: 1px solid var(--line); }
.cu-hero-photo { height: auto; display: block; background: var(--surface-2); }
.cu-title-img { width: 100%; height: auto; display: block; }
.cu-stars { position: absolute; inset: 0; opacity: .7;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, var(--cu-star), transparent), radial-gradient(1px 1px at 70% 20%, var(--cu-star), transparent), radial-gradient(1.5px 1.5px at 85% 70%, var(--cu-star), transparent), radial-gradient(1px 1px at 12% 80%, var(--cu-star), transparent), radial-gradient(1px 1px at 40% 12%, var(--cu-star), transparent), radial-gradient(1.2px 1.2px at 60% 88%, var(--cu-star), transparent);
  animation: cu-twinkle 4s ease-in-out infinite alternate; }
@keyframes cu-twinkle { from { opacity: .4; } to { opacity: .9; } }
.cu-earth { width: 220px; height: auto; position: relative; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.cu-earth.is-hero { animation: cu-float 6s ease-in-out infinite; }
.cu-earth.is-small { width: 120px; }
.cu-tunnel-glow { animation: cu-flow 1.2s linear infinite; }
@keyframes cu-flow { to { stroke-dashoffset: -22; } }
@keyframes cu-float { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.cu-earth.is-hero .cu-drill { animation: cu-drill 3.2s ease-in-out infinite; }
@keyframes cu-drill { 0%, 100% { transform: translate(120px, 20px); } 50% { transform: translate(120px, 40px); } }

/* 地点えらび */
.cu-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.cu-tab { min-height: 44px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px 4px; }
.cu-tab.is-on { border-color: var(--cu-sea); background: var(--cu-sea-soft); color: var(--text); }
.cu-select { font-size: 16px; }
.cu-sel { min-height: 1.6em; margin: 10px 0; }
.cu-map-wrap { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.cu-map { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }
.cu-map-sea { fill: var(--cu-sea-soft); }
.cu-map-grid { stroke: var(--line); stroke-width: .6; }
.cu-map-land { fill: var(--cu-land); stroke: var(--text-sub); stroke-width: .6; }
.cu-map-dot { fill: var(--text); opacity: .55; }
.cu-map-pin { color: var(--cu-pin); }
.cu-islands { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.cu-island { min-height: 44px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 14px; padding: 6px; }
.cu-island.is-on { border-color: var(--cu-sea); background: var(--cu-sea-soft); }
.cu-daily-place { margin: 10px 0; }
.cu-emoji { font-size: 18px; letter-spacing: 1px; }
.cu-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.cu-two .btn { padding: 10px 8px; font-size: 14px; min-width: 0; }
.cu-disclaimer { font-size: 12px; color: var(--text-sub); margin-top: 12px; }

/* 予想・掘る */
.cu-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cu-guess-art, .cu-dig-art { display: flex; justify-content: center; margin: 4px 0 8px; padding: 10px 0; border-radius: var(--radius); background: radial-gradient(circle at 50% 50%, var(--cu-night2), var(--cu-night1) 72%); }
.cu-guess-art .cu-earth { width: 170px; }
.cu-dig-art .cu-earth { width: 240px; }
.cu-q { font-size: 20px; margin: 4px 0 12px; }
.cu-dig-card { text-align: center; }
.cu-depth { font-size: clamp(34px, 10vw, 48px); font-weight: 900; font-variant-numeric: tabular-nums; color: var(--cu-sea); line-height: 1.15; }
.cu-layer { font-size: 20px; font-weight: 800; }

/* 結果 */
.cu-main { display: flex; gap: 14px; align-items: center; }
.cu-main.is-rare { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.cu-res-art { flex: none; width: 124px; display: flex; justify-content: center; align-items: center; border-radius: 14px; background: radial-gradient(circle, var(--cu-night2), var(--cu-night1) 75%); padding: 6px; }
.cu-res-img { width: 124px; height: 124px; border-radius: 14px; object-fit: cover; display: block; }
.cu-res-art:has(img) { padding: 0; background: none; }
.cu-main-body { min-width: 0; }
.cu-main-body .tag { margin: 2px 4px 2px 0; }
.cu-oneline { font-size: 15px; line-height: 1.45; }
.cu-oneline b { font-size: 19px; }
.cu-big { font-size: clamp(22px, 6.6vw, 32px); font-weight: 900; color: var(--cu-sea); white-space: nowrap; }
.cu-type { font-size: 18px; font-weight: 900; margin-top: 4px; }
.cu-guessres { border-left: 5px solid var(--bad); }
.cu-guessres.is-ok { border-left-color: var(--good); }
.cu-typeline { margin: 4px 2px 14px; font-size: 15px; }
.cu-rmap { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); margin-top: 6px; border: 1px solid var(--line); }
.cu-share { margin-top: 4px; }
.cu-crow { display: grid; grid-template-columns: minmax(0, 12em) 1fr 3em; gap: 8px; align-items: center; font-size: 13px; margin-top: 6px; }
.cu-crow.is-me { font-weight: 800; }
.cu-cbar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.cu-cbar > span { display: block; height: 100%; background: var(--cu-sea); }
.cu-crow:not(.is-me) .cu-cbar > span { background: var(--text-sub); opacity: .5; }
.cu-friend { border-left: 4px solid var(--cu-sea); }
.cu-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cu-badge { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 2px; opacity: .6; }
.cu-badge.on { opacity: 1; background: var(--cu-sea-soft); border-color: var(--cu-sea); }
.cu-badge-emoji { font-size: 24px; }

@media (max-width: 380px) {
  .cu-res-art { width: 96px; } .cu-earth.is-small { width: 90px; } .cu-res-img { width: 96px; height: 96px; }
  .cu-tab { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cu-drill { transition: none; } }
.ai-note { margin: 4px 0 8px; text-align: right; }
.ai-note-c { text-align: center; margin: 4px 0 0; font-size: 10px; }
.cu-res-art:has(img) { flex-direction: column; }