/* =========================================================
   EKIMAP GPT cover implementation
   - 高品質な生成画像は背景カンプとしてそのまま保持
   - 数字 / ボタン / ナビは本物のHTML UI
   - PCとスマホは別レイアウト
   ========================================================= */
#top.ek-top {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  background: #18a9ed;
  color: #172132;
  font-family: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  isolation: isolate;
}
#top[hidden] { display: none !important; }

.ek-top-art { position: absolute; inset: 0; z-index: -2; }
.ek-top-art img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 50%;
  user-select: none; pointer-events: none;
  transform: scale(1.002);
}

/* 少しだけ画面を一体化。背景の鮮やかさは落とし過ぎない。 */
.ek-top::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%, transparent 70%, rgba(0,80,130,.06));
}

/* ---- status card ---- */
.ek-status-card {
  position: absolute; top: 2.7%; right: 2.4%;
  min-width: 318px; height: 84px;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 22px 10px 12px;
  border: 1px solid rgba(145,113,50,.22);
  border-radius: 22px;
  background: #fffcf4;
  box-shadow: 0 5px 0 rgba(99,84,54,.18), 0 12px 28px rgba(0,76,125,.22);
  backdrop-filter: blur(8px);
}
.ek-avatar {
  width: 58px; height: 58px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 31px;
  background: linear-gradient(#dff6ff,#9edfff); border: 2px solid #fff;
  box-shadow: inset 0 -3px 0 rgba(0,95,160,.12), 0 2px 6px rgba(0,0,0,.12);
}
.ek-status-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:72px; line-height:1; }
.ek-status-label { font-size: 13px; font-weight: 900; letter-spacing: .04em; margin-bottom: 7px; white-space:nowrap; }
.ek-status-cell strong { font-size: 34px; color:#1671da; font-weight:900; font-variant-numeric:tabular-nums; }
.ek-status-cell.ek-stations strong { color:#f05268; }
.ek-status-cell strong small { font-size: 14px; color:#171717; margin-left:4px; }
.ek-status-sep { width:1px; height:50px; border-left:2px dashed #d9cdb9; }

/* ---- progress card ---- */
.ek-progress-card {
  position: absolute; right: 2.45%; bottom: 9.2%;
  width: 280px; padding: 18px 23px;
  border-radius: 24px; background: #fffbf1;
  border: 1px solid rgba(145,113,50,.18);
  box-shadow: 0 5px 0 rgba(87,76,56,.15), 0 16px 30px rgba(0,72,120,.22);
}
.ek-progress-title { text-align:center; font-size:16px; font-weight:900; }
.ek-progress-value { margin-top:4px; text-align:center; font-size:57px; font-weight:900; line-height:1.05; color:#ef4d64; font-variant-numeric:tabular-nums; }
.ek-progress-value small { font-size:26px; }
.ek-progress-track { height:14px; margin:12px 0 14px; border-radius:999px; background:#f1e8db; border:2px solid #d9c9b2; overflow:hidden; }
.ek-progress-track i { display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#ff8c9e,#ef4d64); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.ek-progress-sub { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; font-weight:800; }
.ek-progress-sub strong { color:#116fd3; font-size:25px; font-variant-numeric:tabular-nums; }
.ek-progress-sub small { font-size:12px; color:#4a4a4a; }

/* ---- real start button ---- */
.ek-start {
  position:absolute; left:50%; bottom:2.9%; transform:translateX(-50%);
  width:min(650px,45vw); min-height:92px;
  display:flex; align-items:center; justify-content:center; gap:16px;
  border:4px solid #fff8d9; border-radius:999px;
  background:linear-gradient(180deg,#ffd33f 0%,#ffb817 50%,#f5a400 100%);
  color:#fff; cursor:pointer; font:900 clamp(28px,2.35vw,44px)/1 "Hiragino Sans","Yu Gothic",sans-serif;
  text-shadow:0 3px 0 #bd6d00,0 5px 9px rgba(151,78,0,.25);
  box-shadow:inset 0 0 0 2px rgba(226,141,0,.45),0 7px 0 #c77b00,0 13px 24px rgba(79,55,0,.30);
  transition:transform .13s ease, filter .16s ease, box-shadow .13s ease;
}
.ek-start:hover { filter:brightness(1.05) saturate(1.05); }
.ek-start:active { transform:translate(-50%,5px) scale(.995); box-shadow:inset 0 0 0 2px rgba(226,141,0,.45),0 2px 0 #c77b00,0 8px 15px rgba(79,55,0,.24); }
.ek-start-icon { width:55px; height:55px; display:grid; place-items:center; border-radius:16px; background:#fff; text-shadow:none; font-size:34px; box-shadow:0 3px 0 rgba(148,92,0,.25); }
.ek-start-arrow { position:absolute; right:34px; font-size:58px; font-weight:500; line-height:.6; }

/* ---- navigation ---- */
.ek-home-nav {
  position:absolute; left:2.5%; bottom:2.6%;
  display:flex; gap:10px;
}
.ek-home-nav button {
  min-width:96px; min-height:78px; padding:8px 11px;
  border:2px solid rgba(229,214,183,.9); border-radius:18px;
  background:#fffcf4; color:#2e2b28; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 5px 0 rgba(101,83,53,.18),0 10px 18px rgba(0,74,120,.14);
  transition:transform .12s,background .15s;
}
.ek-home-nav button:hover { background:#fff; transform:translateY(-2px); }
.ek-home-nav button:active { transform:translateY(3px); }
.ek-home-nav button span { font-size:28px; line-height:1; }
.ek-home-nav button b { font-size:12px; white-space:nowrap; }
.ek-menu { display:none; }

/* 1366px程度でもスタートとカードが干渉しない */
@media (max-width: 1200px) and (min-width: 761px) {
  .ek-status-card { transform:scale(.88); transform-origin:top right; }
  .ek-progress-card { transform:scale(.88); transform-origin:bottom right; }
  .ek-start { width:48vw; min-height:78px; font-size:30px; }
  .ek-home-nav button { min-width:82px; }
}

/* ================= MOBILE ================= */
@media (max-width: 760px) {
  .ek-top-art img { object-position:center center; }

  /* モバイル画像上部の既存カードを実UIで完全に覆う */
  .ek-status-card {
    top: calc(env(safe-area-inset-top, 0px) + 18px); right: 3.2%;
    min-width: 0; width: 40%; height: 60px; padding: 7px 10px; gap:8px;
    border-radius:17px; box-shadow:0 4px 0 rgba(85,70,44,.15),0 8px 18px rgba(0,70,110,.16);
  }
  .ek-avatar { display:none; }
  .ek-status-cell { min-width:0; flex:1; }
  .ek-status-label { font-size:9px; margin-bottom:4px; }
  .ek-status-cell strong { font-size:25px; }
  .ek-status-cell strong small { font-size:9px; margin-left:2px; }
  .ek-status-sep { height:37px; }

  .ek-menu {
    display:grid; place-items:center; position:absolute;
    top:calc(env(safe-area-inset-top,0px) + 20px); left:4%;
    width:54px; height:54px; border:0; border-radius:17px;
    background:#fffcf4; color:#2b2926; font-size:28px; font-weight:900;
    box-shadow:0 4px 0 rgba(77,67,51,.18),0 8px 15px rgba(0,70,110,.16);
    cursor:pointer;
  }

  /* 元画像の踏破率カードの位置へぴったり重ねる */
  .ek-progress-card {
    right:4.2%; bottom:14.6%; width:41%;
    padding:12px 13px 13px; border-radius:18px;
    box-shadow:0 4px 0 rgba(87,76,56,.14),0 10px 20px rgba(0,72,120,.16);
  }
  .ek-progress-title { font-size:10px; }
  .ek-progress-value { font-size:38px; margin-top:2px; }
  .ek-progress-value small { font-size:18px; }
  .ek-progress-track { height:9px; margin:7px 0 7px; border-width:1px; }
  .ek-progress-sub { font-size:9px; display:block; text-align:left; }
  .ek-progress-sub strong { display:block; font-size:19px; margin-top:2px; }
  .ek-progress-sub small { font-size:9px; }

  /* モバイル画像の黄色ボタン上へ実ボタンを重ねる */
  .ek-start {
    left:50%; bottom:7.7%; width:78%; min-height:70px;
    border-width:3px; font-size:27px; gap:10px;
    box-shadow:inset 0 0 0 1px rgba(226,141,0,.45),0 5px 0 #c77b00,0 10px 18px rgba(79,55,0,.25);
  }
  .ek-start-icon { width:41px; height:41px; border-radius:12px; font-size:25px; }
  .ek-start-arrow { right:22px; font-size:43px; }

  /* 元画像の最下部ナビを完全に実UIで覆う */
  .ek-home-nav {
    left:7%; right:7%; bottom:calc(env(safe-area-inset-bottom,0px) + 1.1%);
    height:68px; display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    padding:5px 2px; border-radius:21px; background:rgba(255,252,247,.985);
    box-shadow:0 4px 0 rgba(77,67,51,.16),0 10px 22px rgba(0,72,120,.18);
    border:1px solid rgba(220,207,181,.8);
  }
  .ek-home-nav button {
    min-width:0; min-height:0; padding:4px 2px; border:0; border-radius:12px;
    background:transparent; box-shadow:none; gap:3px;
  }
  .ek-home-nav button:not(:last-child) { border-right:1px solid #ddd5c8; border-radius:0; }
  .ek-home-nav button span { font-size:24px; }
  .ek-home-nav button b { font-size:9px; }
}

@media (max-width: 390px) {
  .ek-start { width:82%; font-size:23px; min-height:62px; }
  .ek-progress-card { width:42%; right:3.3%; }
  .ek-status-card { width:47%; right:3%; }
}

/* 画面遷移 */
.ek-top.ek-leaving { animation:ekTopLeave .48s cubic-bezier(.45,0,.15,1) forwards; }
@keyframes ekTopLeave {
  0% { opacity:1; transform:scale(1); }
  55% { opacity:1; transform:scale(1.025); }
  100% { opacity:0; transform:scale(1.075); visibility:hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .ek-top.ek-leaving { animation:none; }
  .ek-progress-track i,.ek-start,.ek-home-nav button { transition:none; }
}