:root{
  --sky: #87CEEB;
  --sky-deep: #5BB8E0;
  --pink: #FFB6C6;
  --cream: #FFF8EE;
  --ink: #4A4038;
  --green: #6FCF97;
  --red: #F26B6B;
  --purple: #8B5CF6;
  --shadow: rgba(74,64,56,0.18);
  --radius: 22px;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0; padding:0; height:100%;
  overscroll-behavior: none;
  font-family: 'Zen Maru Gothic','M PLUS Rounded 1c', sans-serif;
  color: var(--ink);
  background: var(--sky);
}

button{
  font-family: inherit;
  border: none;
  cursor: pointer;
}

.screen{
  display:none;
  position:fixed;
  inset:0;
  overflow-y:auto;
  background: linear-gradient(180deg, #BEE7F5 0%, #DCF3E6 55%, #FFF3DC 100%);
}
.screen.active{ display:block; }

/* ============ タイトル ============ */
.title-scroll{
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.logo{
  margin: 10px 0 22px;
  text-align:center;
  width:100%;
}
.logo img{
  width:100%;
  max-width: 420px;
  display:block;
  margin: 0 auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.15));
}

.char-preview-btn{
  background: #fff;
  border-radius: 100px;
  padding: 8px 22px 8px 8px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: 0 6px 0 var(--shadow);
  margin-bottom: 26px;
}
.char-preview-btn img{
  width:56px; height:56px; object-fit:contain;
  background: var(--cream);
  border-radius: 50%;
  padding: 4px;
}
.char-preview-label{ font-weight:700; color:#7A5C3E; font-size:0.95rem; }

.section-title{
  font-size:1.05rem;
  font-weight:700;
  color:#5B6B57;
  margin: 4px 0 14px;
  align-self:flex-start;
}

.course-grid{
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-bottom: 26px;
}
.course-card{
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 6px 0 var(--shadow);
  display:flex;
  flex-direction:column;
  transition: transform .1s;
}
.course-card:active{ transform: translateY(3px); }
.course-card img{
  width:100%; aspect-ratio: 4/3; object-fit:cover; display:block;
}
.course-card .course-name{
  padding: 8px 6px;
  font-size:0.85rem;
  font-weight:700;
  text-align:center;
  color:#5B4636;
}
.course-card .course-best{
  padding-bottom: 8px;
  text-align:center;
  font-size: 0.7rem;
  color:#9A8A78;
}

.menu-wide-btn{
  width:100%;
  max-width: 420px;
  padding: 15px;
  border-radius: 100px;
  background: var(--purple);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  box-shadow: 0 5px 0 #5B3AA8;
}
.menu-wide-btn:active{ transform: translateY(3px); box-shadow: 0 2px 0 #5B3AA8; }
.menu-wide-btn.ghost-btn{
  background:#fff;
  color: var(--ink);
  box-shadow: 0 5px 0 var(--shadow);
  margin-top: 10px;
}
.treasurebox-btn{ background:#F5A94E; box-shadow: 0 5px 0 #C57B22; margin-bottom: 30px; }
.tb-icon{ margin-right:6px; }

.credit{
  text-align:center;
  font-size: 0.72rem;
  color:#7A8C88;
  line-height:1.6;
}

/* ============ サブヘッダー(きせかえ/たからばこ) ============ */
.sub-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 14px;
  max-width:480px; margin:0 auto;
}
.sub-header h2{ font-size:1.1rem; margin:0; }
.back-btn{
  background:#fff; border-radius:100px; padding:8px 14px;
  font-weight:700; font-size:0.85rem; color:#5B6B57;
  box-shadow: 0 4px 0 var(--shadow);
}
.header-spacer{ width: 60px; }

/* ============ きせかえ画面 ============ */
.char-select-stage{
  display:flex; justify-content:center; align-items:center;
  height: 220px;
}
.char-select-stage img{ height: 190px; object-fit:contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.15)); }

.char-grid{
  max-width:480px; margin:0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:14px; padding: 10px 20px 40px;
}
.char-cell{
  background:#fff;
  border-radius:18px;
  padding:10px;
  box-shadow: 0 5px 0 var(--shadow);
  border: 3px solid transparent;
}
.char-cell.selected{ border-color: var(--purple); background:#F1E9FF; }
.char-cell img{ width:100%; aspect-ratio:1; object-fit:contain; }

/* ============ たからばこ画面 ============ */
.tb-progress{ text-align:center; font-weight:700; color:#7A5C3E; margin: 0 0 14px; }
.treasure-grid{
  max-width:480px; margin:0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:12px; padding: 0 20px 40px;
}
.treasure-cell{
  background:#fff; border-radius:16px; padding:10px;
  box-shadow: 0 5px 0 var(--shadow);
  display:flex; flex-direction:column; align-items:center;
  min-height: 100px; justify-content:center;
}
.treasure-cell img{ width:56px; height:56px; object-fit:contain; }
.treasure-cell .tname{ font-size:0.65rem; margin-top:6px; text-align:center; color:#5B4636; font-weight:700; }
.treasure-cell.locked{ opacity:0.55; }
.treasure-cell.locked .lock-mark{ font-size:1.6rem; color:#B8AFA4; }

/* ============ ゲーム画面 ============ */
#screen-game{ background:#000; overflow:hidden; touch-action:none; }
.game-wrap{
  position:relative;
  width:100%; height:100%;
  max-width: 560px;
  margin:0 auto;
  overflow:hidden;
  background:#000;
  touch-action:none;
}
#game-canvas{ display:block; width:100%; height:100%; touch-action:none; }

.hud-top{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  z-index: 5;
}
.hud-btn{
  width:38px;height:38px;border-radius:50%;
  background: rgba(255,255,255,0.85);
  font-weight:800; color:#5B4636;
  flex-shrink:0;
}
.hp-bar-outer{
  flex:1;
  height:22px;
  background: rgba(255,255,255,0.55);
  border-radius:100px;
  position:relative;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,0.8);
}
.hp-bar-inner{
  height:100%;
  width:100%;
  background: linear-gradient(180deg,#7FE0A4,#54C97C);
  transition: width .25s ease, background .25s ease;
}
.hp-bar-inner.low{ background: linear-gradient(180deg,#FF9B9B,#EE5C5C); }
.hp-label{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-size:0.7rem; font-weight:800; color:#5B4636;
}
.distance-label{
  background: rgba(255,255,255,0.85);
  border-radius:100px;
  padding: 8px 14px;
  font-weight:800;
  font-size:0.95rem;
  color:#5B4636;
  flex-shrink:0;
}
.distance-label small{ font-size:0.65rem; margin-left:2px; }

.move-controls{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between;
  padding: 0 22px calc(20px + env(safe-area-inset-bottom));
  pointer-events:none;
  z-index:6;
}
.move-btn{
  pointer-events:auto;
  width:64px; height:64px;
  border-radius:50%;
  background: rgba(255,255,255,0.88);
  color:#5B4636;
  font-size:1.6rem;
  font-weight:800;
  box-shadow: 0 5px 0 rgba(74,64,56,0.25);
  display:flex; align-items:center; justify-content:center;
  user-select:none;
}
.move-btn:active{ transform: translateY(3px); box-shadow: 0 2px 0 rgba(74,64,56,0.25); }

#debug-hud{
  position:absolute; left:6px; bottom:92px;
  z-index:7;
  background: rgba(0,0,0,0.6);
  color:#0F0;
  font-family: monospace;
  font-size:11px;
  line-height:1.5;
  padding:6px 8px;
  border-radius:8px;
  white-space:pre;
  pointer-events:none;
}

.overlay{
  position:absolute; inset:0;
  background: rgba(30,26,22,0.55);
  display:flex; align-items:center; justify-content:center;
  z-index:10;
}
.overlay.hidden{ display:none; }
.overlay-card{
  background:#fff; border-radius:22px; padding: 28px 26px;
  width: 78%; max-width:320px; text-align:center;
}
.overlay-card h2{ margin:0 0 18px; }

.countdown-num{
  font-size:5rem; font-weight:900; color:#fff;
  text-shadow: 0 6px 0 rgba(0,0,0,0.25);
}

/* フローティングダメージ/回復テキストと道モ演出はcanvas内で描画 */

/* ============ リザルト画面 ============ */
#screen-result{
  display:none;
  align-items:center; justify-content:center;
}
#screen-result.active{ display:flex; }
.result-card{
  max-width: 420px;
  width:88%;
  background:#fff;
  border-radius: 26px;
  padding: 30px 24px;
  text-align:center;
  box-shadow: 0 10px 0 var(--shadow);
  margin: 30px auto;
}
.result-title{ margin:0 0 4px; font-size:1.3rem; color:#5B4636; }
.result-course{ color:#9A8A78; font-weight:700; margin-bottom:14px; font-size:0.85rem; }
.result-distance{
  font-size:3rem; font-weight:900; color: var(--purple);
  margin: 6px 0 4px;
}
.result-distance small{ font-size:1.1rem; margin-left:4px; }
.new-record{ color:#E08A2E; font-weight:800; margin: 0 0 10px; }
.hidden{ display:none !important; }

.result-treasure{
  background:#FFF6E5; border-radius:16px; padding:14px; margin: 10px 0 18px;
}
.result-treasure img{ width:64px; height:64px; object-fit:contain; }
.result-treasure p{ margin:4px 0 0; font-weight:700; color:#7A5C3E; font-size:0.85rem; }
.treasure-get-label{ color:#E08A2E !important; font-size:0.75rem !important; }

.ranking-title{ margin: 8px 0 8px; font-size:0.95rem; color:#5B6B57; }
.ranking-list{
  list-style:none; padding:0; margin:0 0 20px;
  text-align:left;
  background:#F7F5F0; border-radius:14px; overflow:hidden;
}
.ranking-list li{
  display:flex; align-items:center; gap:10px;
  padding: 9px 14px;
  font-size:0.9rem;
  border-bottom: 1px solid #EAE5DC;
}
.ranking-list li:last-child{ border-bottom:none; }
.ranking-list li.me{ background:#F1E9FF; font-weight:800; }
.rank-num{
  width:22px; height:22px; border-radius:50%;
  background:#DCD3C4; color:#fff; font-size:0.7rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rank-num.gold{ background:#F2C94C; }
.rank-num.silver{ background:#BFC7CF; }
.rank-num.bronze{ background:#D69A63; }
.rank-dist{ margin-left:auto; font-weight:800; color:#5B4636; }

.result-buttons{ display:flex; flex-direction:column; align-items:center; }

@media (max-width: 340px){
  .logo img{ max-width: 340px; }
}