/* なつかしあそび横丁 共通スタイル */
:root {
  --paper: #fbf3e4;
  --paper-dark: #f1e2c6;
  --ink: #3b2a1e;
  --ink-soft: #7a6352;
  --red: #d9534f;
  --red-dark: #b23b37;
  --green: #4f9d69;
  --blue: #3f7cac;
  --yellow: #f4c542;
  --shadow: 0 4px 0 rgba(59, 42, 30, 0.25);
  --radius: 16px;
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(122, 99, 82, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  line-height: 1.6;
}

a { color: var(--blue); }

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

.btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 10px 24px;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:hover:not(:disabled) { background: var(--red-dark); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(59, 42, 30, 0.25); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--ink); }
.btn.secondary:hover:not(:disabled) { background: var(--paper-dark); }

.panel {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.back-link {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-soft);
}
.back-link:hover { color: var(--ink); }

[hidden] { display: none !important; }

/* イラスト（assets/js/art.js） */
.art { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; line-height: 0; }
.art-svg { display: block; width: 100%; height: 100%; overflow: visible; }