:root{
  --bg: #f4f1ea;
  --panel: #ffffff;
  --ink: #2b2b33;
  --ink-soft: #6b6b78;
  --accent: #ff8a5c;
  --accent-deep: #e8703f;
  --accent2: #4fb0a5;
  --accent2-deep: #35897f;
  --line: #e5e0d4;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 10px 26px rgba(43,43,51,.12);
  --font: 'Hiragino Maru Gothic Pro', 'Yu Gothic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing: border-box; margin:0; padding:0; -webkit-tap-highlight-color: transparent; user-select:none; -webkit-user-select:none; }

html, body{
  width:100%; height:100%; overflow:hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  touch-action: manipulation;
}

body{ display:flex; flex-direction:column; height:100vh; height:100dvh; }

#app{ position:relative; width:100%; flex:1 1 auto; min-height:0; overflow:hidden; }

.hidden{ display:none !important; }

.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 24px 18px;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------- ボタン共通 ---------------- */
.btn{
  appearance:none; border:none; cursor:pointer;
  font-family: var(--font);
  font-weight:700;
  font-size: 16px;
  padding: 14px 22px;
  border-radius: 100px;
  width: min(88vw, 320px);
  margin: 7px 0;
  transition: transform .1s ease, box-shadow .1s ease, opacity .15s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.btn:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.12); }

.btn-primary{ background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); color:#fff; }
.btn-secondary{ background:#fff; color: var(--ink); border: 2px solid var(--line); box-shadow:none; }
.btn-secondary:active{ transform: scale(.97); }
.btn-ghost{ background: transparent; color: var(--ink-soft); text-decoration: underline; box-shadow:none; font-size:14px; }
.btn-lg{ font-size:19px; padding:17px 22px; }

.icon-btn{
  width:40px; height:40px; border-radius:50%;
  border:none; background: rgba(0,0,0,.06); color: var(--ink);
  font-size:18px; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn:active{ transform: scale(.9); }

/* ---------------- タイトル画面 ---------------- */
#screen-title{ background: radial-gradient(circle at 50% 0%, #fff 0%, var(--bg) 65%); }
.title-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; width:100%; }
.logo{ font-size: clamp(28px, 8vw, 40px); font-weight:900; margin-bottom:2px; }
.tagline{ color: var(--ink-soft); font-size:14px; margin-bottom:22px; }

.best-times-box{
  margin-top: 24px;
  width: min(88vw, 320px);
  background: var(--panel);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 14px 18px;
}
.best-times-title{ font-size:12px; letter-spacing:.1em; color: var(--ink-soft); font-weight:700; margin-bottom:8px; text-align:center; }
.best-times-list{ display:flex; flex-direction:column; gap:6px; }
.best-time-row{ display:flex; justify-content:space-between; font-size:14px; }
.best-time-row .lvl{ font-weight:700; color: var(--accent-deep); }
.best-time-row .val{ font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------------- 共通パネル ---------------- */
.panel{
  width: min(92vw, 420px);
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  box-shadow: var(--shadow);
  text-align:center;
}
.panel-wide{ width: min(94vw, 640px); }
.panel-title{ font-size:20px; font-weight:900; margin-bottom:18px; }

/* ---------------- レベル選択画面 ---------------- */
.level-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
  margin-bottom: 20px;
}
.level-btn{
  appearance:none; cursor:pointer; border-radius: var(--radius-md);
  padding: 16px 8px; border: 3px solid var(--line);
  background:#fff; font-weight:800; font-family: var(--font);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.level-btn .lvl-name{ font-size:16px; }
.level-btn .lvl-pieces{ font-size:11px; color: var(--ink-soft); font-weight:600; }
.level-btn.active{
  border-color: var(--accent2);
  background: rgba(79,176,165,0.1);
  color: var(--accent2-deep);
}
.level-btn.active .lvl-pieces{ color: var(--accent2-deep); }

.mode-buttons{ display:flex; flex-direction:column; align-items:center; margin-bottom: 8px; }

/* ---------------- 画像選択・アップロード一覧 ---------------- */
.image-grid, .uploaded-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
  margin-bottom: 16px;
  max-height: 55vh;
  overflow-y:auto;
  padding: 2px;
}
.image-thumb{
  position:relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow:hidden;
  border: 3px solid var(--line);
  cursor:pointer;
  background:#eee;
}
.image-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.image-thumb:active{ transform: scale(.96); }
.image-thumb .thumb-label{
  position:absolute; left:0; right:0; bottom:0;
  background: rgba(0,0,0,.45); color:#fff; font-size:10px;
  padding:3px 4px; text-align:center;
}
.image-thumb .thumb-delete{
  position:absolute; top:4px; right:4px;
  width:24px; height:24px; border-radius:50%;
  background: rgba(220,60,60,.9); color:#fff; border:none;
  font-size:13px; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.uploaded-empty{ color: var(--ink-soft); font-size:14px; padding: 24px 0; }

/* ---------------- ゲーム画面 ---------------- */
.screen-game{ padding:0; background:#eee7d8; align-items: stretch; }

#game-topbar{
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 16px;
  background:#fff;
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
#game-level-tag{
  font-weight:800; font-size:13px; letter-spacing:.05em;
  background: rgba(79,176,165,0.15); color: var(--accent2-deep);
  padding: 5px 12px; border-radius: 100px;
}
#game-timer{
  font-variant-numeric: tabular-nums;
  font-weight:800; font-size:18px;
}

#game-stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  width:100%;
  display:flex;
}
#game-canvas{
  flex:1 1 auto;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:block;
  touch-action:none;
}

/* ---------------- クリア画面 ---------------- */
.clear-title{ font-size:24px; }
.clear-time{
  font-size:40px; font-weight:900; color: var(--accent-deep);
  margin: 8px 0 4px; font-variant-numeric: tabular-nums;
}
.clear-best{ font-size:13px; color: var(--accent2-deep); font-weight:700; margin-bottom: 18px; min-height: 18px; }

/* ---------------- モーダル共通 ---------------- */
.modal{
  position:absolute; inset:0; z-index: 50;
  background: rgba(20,18,14,.55);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.modal-card{
  width: min(90vw, 360px);
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  text-align:center;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.modal-card-wide{ width: min(94vw, 640px); }
.modal-title{ font-size:19px; font-weight:900; margin-bottom:16px; }

/* ---------------- 設定・完成図 ---------------- */
.settings-card{max-height:90vh;overflow-y:auto;}
.settings-section{margin:18px 0 22px;text-align:left;}
.settings-label{font-size:12px;color:var(--ink-soft);font-weight:800;margin-bottom:8px;}
.setting-toggle{width:100%;border:2px solid var(--line);background:#fff;border-radius:14px;padding:13px 14px;margin:5px 0;display:flex;align-items:center;justify-content:space-between;font-family:var(--font);font-weight:700;color:var(--ink);cursor:pointer;}
.setting-toggle strong{min-width:44px;text-align:center;padding:4px 8px;border-radius:999px;background:#dfe9e7;color:var(--accent2-deep);font-size:12px;}
.setting-toggle.off strong{background:#eee;color:var(--ink-soft);}
#game-stage{position:relative;}
.guide-thumbnail{position:absolute;z-index:10;top:10px;right:10px;width:76px;height:58px;padding:3px;border:2px solid rgba(255,255,255,.95);border-radius:10px;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,0,0,.18);cursor:pointer;}
.guide-thumbnail img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px;}
.guide-thumbnail:active{transform:scale(.96);}
.guide-preview-card{width:min(92vw,720px);max-height:88vh;background:#fff;border-radius:var(--radius-lg);padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;gap:12px;}
.guide-preview-card img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto;object-fit:contain;border-radius:10px;}
.guide-preview-card .btn{margin:0;}