/* ==========================================================
   Switch版マイクラ コマンド辞典
   見た目をまとめたCSSです。
   初心者があとから変更しやすいよう、色を最初にまとめています。
   ========================================================== */

:root {
  --green:#255c35;
  --green2:#347a49;
  --green-soft:#e9f4ec;
  --bg:#f4f7f3;
  --card:#ffffff;
  --text:#213026;
  --muted:#69746c;
  --line:#d9e2db;
  --dark:#18231c;
  --yellow:#fff6d7;
  --yellow-line:#e3cd77;
  --shadow:0 7px 20px rgba(30,62,39,.07);
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic",Meiryo,sans-serif;
  background:var(--bg);
  color:var(--text);
}

button, input, select { font:inherit; }

button { cursor:pointer; }

code {
  font-family:Consolas,Menlo,monospace;
}

.shell {
  max-width:1080px;
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
}

.site-header {
  background:linear-gradient(135deg,var(--green),#193d24);
  color:#fff;
  padding:24px 0 22px;
}

.eyebrow {
  margin:0 0 6px;
  font-size:12px;
  opacity:.8;
  letter-spacing:.03em;
}

h1 {
  margin:0;
  font-size:clamp(24px,5vw,36px);
}

.sub {
  margin:7px 0 0;
  opacity:.9;
  font-size:14px;
}

.main-tabs {
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.tab-scroll {
  display:flex;
  overflow-x:auto;
  gap:4px;
  padding-top:8px;
  padding-bottom:8px;
  scrollbar-width:none;
}

.main-tab {
  flex:none;
  border:0;
  background:#fff;
  color:var(--text);
  padding:10px 13px;
  border-radius:9px;
  font-weight:700;
}

.main-tab.active {
  background:var(--green);
  color:#fff;
}

.main-area {
  padding-top:18px;
  padding-bottom:48px;
}

.page { display:none; }
.page.active { display:block; }

.hero-card,
.builder,
.lesson-card,
.guide-card,
.mini-guide {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.hero-card {
  padding:16px;
}

.hero-card > label {
  display:block;
  font-weight:800;
  margin-bottom:8px;
}

.search {
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border:2px solid var(--line);
  border-radius:10px;
  background:#fff;
  outline:none;
}

.search:focus {
  border-color:var(--green2);
}

.chips {
  display:flex;
  gap:7px;
  margin-top:12px;
  overflow-x:auto;
  scrollbar-width:none;
}

.chip {
  flex:none;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:8px 11px;
  color:var(--text);
}

.chip.active {
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}

.notice {
  margin:14px 0;
  background:var(--yellow);
  border:1px solid var(--yellow-line);
  border-radius:11px;
  padding:12px 14px;
  line-height:1.65;
  font-size:13px;
}

.section-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:12px 2px;
  color:var(--muted);
  font-size:13px;
}

.secondary,
.primary {
  border:0;
  border-radius:9px;
  padding:9px 11px;
  font-weight:800;
}

.secondary {
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
}

.primary {
  background:var(--green);
  color:#fff;
}

.big {
  width:100%;
  padding:13px 15px;
  margin-top:14px;
}

.card-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.command-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  padding:14px;
  box-shadow:var(--shadow);
}

.card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.command-name {
  color:var(--green2);
  font-size:20px;
  font-weight:900;
  font-family:Consolas,Menlo,monospace;
}

.favorite {
  border:0;
  background:transparent;
  font-size:22px;
  color:#a8aea9;
}

.favorite.on { color:#e4a400; }

.command-desc {
  font-weight:800;
  margin:9px 0;
}

.tag {
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:var(--green-soft);
  color:#2d6b40;
  font-size:11px;
}

.label {
  color:var(--muted);
  font-size:11px;
  margin:11px 0 4px;
}

.example {
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--dark);
  border-radius:9px;
  color:#fff;
  padding:9px 10px;
  overflow:hidden;
}

.example code {
  flex:1;
  overflow:auto;
  white-space:nowrap;
  font-size:13px;
}

.copy-small {
  flex:none;
  border:0;
  border-radius:6px;
  padding:6px 8px;
  font-size:11px;
  font-weight:800;
}

.id-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.id-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px;
  box-shadow:var(--shadow);
}

.id-ja {
  font-weight:800;
  margin-bottom:6px;
}

.id-code {
  display:flex;
  gap:6px;
  align-items:center;
}

.id-code code {
  flex:1;
  min-width:0;
  overflow:auto;
  white-space:nowrap;
  color:var(--green2);
  font-size:13px;
}

.id-code button {
  border:0;
  border-radius:6px;
  padding:5px 7px;
}

.mini-guide {
  padding:12px;
  margin:13px 0;
}

.mini-guide p {
  margin:0 0 7px;
}

.mini-guide code {
  display:inline-block;
  margin:3px 5px 3px 0;
  background:var(--dark);
  color:#fff;
  border-radius:7px;
  padding:7px 9px;
}

.guide-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}

.guide-card {
  padding:15px;
}

.guide-card h3 {
  margin:0 0 8px;
  color:var(--green);
  font-size:25px;
}

.lesson-card {
  padding:16px;
  margin:12px 0;
  line-height:1.65;
}

.lesson-card h3 { margin-top:0; }

.lesson-card code {
  display:inline-block;
  background:var(--dark);
  color:#fff;
  padding:8px 10px;
  border-radius:7px;
}

.ascii-box {
  display:flex;
  flex-direction:column;
  font-family:Consolas,monospace;
  white-space:pre;
  overflow-x:auto;
  background:#f2f5f2;
  border-radius:9px;
  padding:13px;
}

.lead { color:var(--muted); }

.builder {
  padding:16px;
}

.coord-set {
  margin-bottom:16px;
}

.coord-set h3 {
  margin:0 0 8px;
}

.coord-inputs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.coord-inputs label {
  font-size:12px;
  color:var(--muted);
}

.coord-inputs input {
  width:100%;
  margin-top:4px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
}

.fill-options label {
  display:block;
}

.fill-options span {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}

.fill-options select {
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}

.result-box {
  margin-top:15px;
  background:var(--dark);
  color:#fff;
  border-radius:11px;
  padding:13px;
}

.result-title {
  font-size:12px;
  opacity:.75;
  margin-bottom:7px;
}

.result-box code {
  display:block;
  overflow:auto;
  white-space:nowrap;
  margin-bottom:10px;
}

.calc-info {
  margin-top:12px;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.empty {
  text-align:center;
  padding:40px 15px;
  color:var(--muted);
}

footer {
  border-top:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
  padding:22px 0 35px;
}

@media (max-width:760px) {
  .card-grid { grid-template-columns:1fr; }
  .id-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .guide-grid { grid-template-columns:1fr; }
}

@media (max-width:430px) {
  .id-grid { grid-template-columns:1fr; }
  .shell { padding-left:12px; padding-right:12px; }
}