/* らくがき軍団バトル 共通スタイル。世界観＝方眼ノートに鉛筆 */
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');

:root {
  --paper: #fbf8ef;
  --grid: rgba(90, 140, 220, .22);
  --ink: #2b2b2b;
  --pencil: #6b6b6b;
  --red: #e5473b;
  --blue: #3b6fd6;
  --yellow: #f4c531;
  --green: #4caf6d;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "Yusei Magic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  -webkit-tap-highlight-color: transparent;
}
header {
  width: 100%; padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  border-bottom: 3px solid var(--ink);
  background: rgba(255,255,255,.55);
}
header h1 { font-size: 22px; letter-spacing: 1px; }
header h1 a { color: inherit; text-decoration: none; }
header nav { margin-left: auto; display: flex; gap: 10px; align-items: center; }
header nav a { color: var(--blue); text-decoration: none; font-size: 15px; }
main { width: 100%; max-width: 980px; padding: 16px 10px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* 手描きっぽい枠 */
.sketch {
  border: 3px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: #fff;
}
.btn {
  font-family: inherit; font-size: 17px; color: var(--ink); cursor: pointer;
  padding: 10px 20px; background: #fff; border: 3px solid var(--ink);
  border-radius: 12px 255px 15px 225px / 225px 15px 255px 15px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .05s;
}
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.btn.primary { background: var(--yellow); font-size: 22px; padding: 14px 34px; }
.btn.danger { background: var(--red); color: #fff; }
.btn.active { background: #ffe8a3; }
.hint { color: var(--pencil); font-size: 14px; text-align: center; line-height: 1.6; }
.msg { min-height: 22px; color: var(--red); font-weight: bold; text-align: center; }
.step { font-size: 19px; font-weight: bold; }
.step .num {
  display: inline-block; width: 30px; height: 30px; line-height: 26px; text-align: center;
  border: 3px solid var(--ink); border-radius: 50%; margin-right: 6px; background: var(--yellow);
}
input[type=text] {
  font-family: inherit; font-size: 16px; padding: 9px 12px; border: 3px solid var(--ink);
  border-radius: 8px; background: #fff; width: 220px;
}
.chip {
  display: inline-block; font-size: 12px; padding: 1px 8px; border: 2px solid var(--ink);
  border-radius: 10px; background: #fff;
}
.chip.ganbari { background: #ffd9d6; }
.chip.nonbiri { background: #d6e4ff; }
.chip.okorinbo { background: #ffe6b8; }

/* インラインSVGアイコン。font-size で大きさが決まる */
.icon { width: 1em; height: 1em; vertical-align: -0.18em; display: inline-block; }
header h1 .icon { width: 1.15em; height: 1.15em; margin-right: 2px; }
.chip .icon { width: 1.25em; height: 1.25em; vertical-align: -0.3em; margin-right: 2px; }

/* カードの角に出すレベル */
.lv-badge {
  position: absolute; top: -8px; left: -8px; z-index: 2;
  font-size: 13px; font-weight: bold; line-height: 1; padding: 5px 8px;
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 12px;
  transform: rotate(-8deg);
}
.locked-note { font-size: 13px; color: var(--pencil); text-align: center; line-height: 1.5; }

/* スマホ幅ではタイトルが折り返すので小さく */
@media (max-width: 480px) {
  header { padding: 8px 10px; gap: 8px; }
  header h1 { font-size: 17px; letter-spacing: 0; }
  header nav a { font-size: 13px; white-space: nowrap; }
}
.chip.kowagari { background: #dff3e8; }
.chip.osekkai { background: #e9ddf5; }
.chip.hero { background: #ffd6a3; }