/* Voxel Tutorial — Shared Styles */
:root {
  --accent: #f0c030;
  --accent-r: 240; --accent-g: 192; --accent-b: 48;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Hiragino Sans', 'Noto Sans JP', 'Segoe UI', sans-serif;
  background: #0f0f1a; color: #e0e0e0; line-height: 1.8;
}
.container { max-width: 840px; margin: 0 auto; padding: 40px 24px 80px; }
h1 { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.meta { font-size: 14px; color: #888; margin-bottom: 12px; }
.difficulty {
  display: inline-block; background: var(--accent); color: #333;
  font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 12px;
  margin-bottom: 20px;
}
.colors { display: flex; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }

/* Hero / completion preview */
.hero-viewer {
  position: relative; background: #1a1a2e; border-radius: 16px;
  overflow: hidden; margin-bottom: 40px;
  border: 2px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.3);
}
.hero-canvas { width: 100%; aspect-ratio: 4/3; display: block; cursor: grab; }
.hero-canvas:active { cursor: grabbing; }
.hero-label {
  position: absolute; top: 12px; left: 12px;
  background: linear-gradient(135deg, var(--accent), #ff8040);
  color: #fff; font-size: 13px; font-weight: 700;
  padding: 4px 14px; border-radius: 8px; pointer-events: none;
}
.color-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.06); padding: 5px 12px; border-radius: 6px; font-size: 12px;
}
.color-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); }

/* Per-step viewer */
.viewer-container {
  position: relative; background: #1a1a2e; border-radius: 12px;
  overflow: hidden; margin: 16px 0 20px;
  border: 1px solid rgba(255,255,255,0.08);
}
.step-canvas { width: 100%; aspect-ratio: 4/3; display: block; cursor: grab; }
.step-canvas:active { cursor: grabbing; }
.viewer-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.65); color: #aaa; font-size: 11px;
  padding: 3px 10px; border-radius: 4px; pointer-events: none;
}
.viewer-badge strong { color: #fff; }

/* Steps */
.step { margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.step:last-child { border-bottom: none; }
.step h2 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.step-number {
  display: inline-block; background: var(--accent); color: #333;
  font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 12px;
  margin-right: 8px; vertical-align: middle;
}
.step p { font-size: 15px; color: #ccc; margin-bottom: 10px; }
.size-box {
  display: inline-block; background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.15);
  border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.3);
  padding: 4px 12px; border-radius: 6px; font-size: 14px; font-weight: 700;
  color: var(--accent); margin: 4px 0;
}
.tip {
  background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.1);
  border-left: 3px solid var(--accent);
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin-top: 12px;
  font-size: 13px; color: #e0b070;
}
.tip strong { color: var(--accent); }
.complete-badge {
  display: inline-block; background: linear-gradient(135deg, var(--accent), #ff8040);
  color: #fff; font-size: 14px; font-weight: 700; padding: 6px 20px; border-radius: 20px;
}

/* Arrangement */
.arrange-section { margin-top: 60px; border-top: 2px solid rgba(255,255,255,0.1); padding-top: 40px; }
.arrange-section h2 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.arrange-section .subtitle { font-size: 14px; color: #aaa; margin-bottom: 24px; }
.arrange-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.arrange-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; overflow: hidden; text-align: center;
}
.arrange-card canvas { width: 100%; aspect-ratio: 4/3; display: block; background: #1a1a2e; cursor: grab; }
.arrange-card canvas:active { cursor: grabbing; }
.arrange-card .arrange-info { padding: 10px; }
.arrange-card .arrange-info p { font-size: 14px; font-weight: 600; color: #ddd; margin: 0; }
.arrange-card .arrange-info .arrange-desc { font-size: 12px; color: #999; font-weight: 400; margin-top: 4px; }
.arrange-hint {
  background: rgba(96,165,250,0.1); border-left: 3px solid #60a5fa;
  padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: 13px; color: #93c5fd;
}
.arrange-hint strong { color: #60a5fa; }
footer { text-align: center; padding: 24px; color: #555; font-size: 12px; }

/* Toggle bar */
.toggle-bar { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.toggle-bar button {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #ccc; font-size: 13px; font-weight: 600; padding: 6px 16px;
  border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.toggle-bar button:hover { background: rgba(255,255,255,0.15); }
.toggle-bar button.active { background: var(--accent); color: #333; border-color: var(--accent); }

/* Loading */
.loading { text-align: center; padding: 80px 20px; color: #888; font-size: 16px; }

/* Light mode */
body.light { background: #f5f5f0; color: #333; }
body.light h1 { color: #1a1a2e; }
body.light .meta { color: #666; }
body.light .step h2 { color: #1a1a2e; }
body.light .step p { color: #555; }
body.light .step { border-bottom-color: rgba(0,0,0,0.1); }
body.light .color-chip { background: rgba(0,0,0,0.05); color: #444; }
body.light .color-swatch { border-color: rgba(0,0,0,0.15); }
body.light .viewer-container { background: #dddde8; border-color: rgba(0,0,0,0.1); }
body.light .hero-viewer { background: #dddde8; border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.4); }
body.light .viewer-badge { background: rgba(255,255,255,0.8); color: #666; }
body.light .viewer-badge strong { color: #222; }
body.light .tip { background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.08); color: #7a5520; }
body.light .tip strong { color: #8a6520; }
body.light .size-box { background: rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.1); color: #906020; }
body.light .arrange-section { border-top-color: rgba(0,0,0,0.1); }
body.light .arrange-section h2 { color: #1a1a2e; }
body.light .arrange-section .subtitle { color: #666; }
body.light .arrange-card { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); }
body.light .arrange-card canvas { background: #dddde8; }
body.light .arrange-card .arrange-info p { color: #444; }
body.light .arrange-hint { background: rgba(59,130,246,0.06); border-left-color: #3b82f6; color: #2563aa; }
body.light .arrange-hint strong { color: #2563eb; }
body.light .toggle-bar button { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: #555; }
body.light .toggle-bar button:hover { background: rgba(0,0,0,0.1); }
body.light .toggle-bar button.active { background: var(--accent); color: #333; border-color: var(--accent); }
body.light footer { color: #999; }
body.light .loading { color: #999; }

@media (max-width: 600px) { .container { padding: 20px 16px 60px; } }