:root {
  --bg1: #eaf2ff; --bg2: #fdf7ee; --panel: #ffffff; --panel2: #f1f5fb; --line: #d9e2f0; --text: #1d2535; --sub: #6b7a93;
  --accent: #2f7df6; --accent2: #15b8a6; --ok: #22c55e; --warn: #f97316; --gold: #f5a524; --pink: #f43f7f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif; font-size: 14px; color: var(--text);
  background: linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #eafff6); background-attachment: fixed; }
header { display: flex; align-items: center; gap: 14px; padding: 9px 18px; position: sticky; top: 0; z-index: 20;
  background: linear-gradient(90deg, #2f7df6, #15b8a6); color: #fff; box-shadow: 0 3px 14px #2f7df63a; }
h1 { font-size: 17px; margin: 0; letter-spacing: .12em; text-shadow: 0 2px 0 #0003; }
h1::before { content: "🤖"; margin-right: 8px; }
h2 { font-size: 18px; margin: 0 0 8px; }
h3 { font-size: 13px; margin: 15px 0 7px; color: var(--sub); letter-spacing: .06em; }
nav { display: flex; gap: 6px; }
.tab { border: 0; background: #ffffff33; color: #fff; padding: 7px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: bold; }
.tab:hover { background: #ffffff55; }
.tab.on { background: #fff; color: var(--accent); box-shadow: 0 2px 8px #0002; }
#msg { margin-left: auto; font-weight: bold; color: #fff8c6; }
#msg.ok { color: #d6ffe4; }
#who { color: #fff; font-weight: bold; }
#logout { background: #ffffff2e; color: #fff; border: 0; }
.page { padding: 16px 20px; }
.hidden { display: none !important; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 8px 0; }
.note { color: var(--sub); font-size: 12px; }
.sum { font-weight: bold; font-size: 15px; }
.sep { width: 18px; }
input, select { font: inherit; padding: 6px 9px; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); }
input:focus { outline: none; border-color: var(--accent); }
input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
button { font: inherit; padding: 7px 14px; border: 2px solid var(--line); border-radius: 10px; background: #fff; color: var(--text);
  cursor: pointer; font-weight: bold; transition: transform .06s; }
button:hover { background: #eef5ff; border-color: #b9cdea; }
button:active { transform: translateY(1px); }
button.primary { background: linear-gradient(180deg, #4b93ff, #2f7df6); border-color: #2f7df6; color: #fff; box-shadow: 0 3px 0 #1f5fc0; }
button.primary:hover { filter: brightness(1.06); }
button.primary:active { box-shadow: 0 1px 0 #1f5fc0; }
button.primary:disabled { background: #cbd7e8; border-color: #cbd7e8; box-shadow: none; color: #8fa0b8; cursor: default; }
button.big { padding: 12px 24px; font-size: 15px; border-radius: 12px; }
button.ghost { background: transparent; border-color: transparent; color: var(--sub); box-shadow: none; }
.k { font-size: 11px; opacity: .75; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 6px; }
table { border-collapse: collapse; background: var(--panel); width: 100%; max-width: 960px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px #1d25350d; }
th, td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: right; }
th { background: #eef4fd; color: var(--sub); font-weight: normal; }
td:first-child, th:first-child { text-align: left; }
.card { background: var(--panel); border: 2px solid var(--line); border-radius: 16px; padding: 16px 20px; margin-bottom: 14px; box-shadow: 0 4px 16px #1d253510; }
.login { max-width: 420px; margin: 52px auto; }
.err { background: #fff1f1; border: 2px solid #ffc9c9; color: #c92a2a; border-radius: 10px; padding: 10px 12px; margin-top: 10px; }

/* ---- ステージ一覧 ---- */
.next-card { display: flex; align-items: center; gap: 16px; border-color: #bcd8ff; background: linear-gradient(120deg, #fff, #eef5ff); }
.next-title { font-size: 20px; font-weight: bold; display: flex; align-items: center; gap: 10px; }
.next-card .big { margin-left: auto; }
.next-card .big + .big { margin-left: 0; }
.base { display: inline-flex; align-items: center; justify-content: center; background: #f3f7fd; border: 2px solid var(--line); border-radius: 8px; flex: none; }
.base-in { background: #b9d4ff; border: 1px solid #7aa8ee; border-radius: 3px; }
.chapter { margin: 20px 0; }
.ch-head { display: flex; align-items: baseline; gap: 10px; padding: 6px 2px; border-bottom: 3px solid #dbe6f6; }
.chapter.tutorial .ch-head { border-bottom-color: var(--gold); }
.ch-head b { font-size: 16px; }
.ch-prog { margin-left: auto; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.pbar { display: inline-block; width: 90px; height: 8px; background: #e4ebf6; border-radius: 4px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #15b8a6); }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; margin-top: 10px; }
.item { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: var(--panel);
  border: 2px solid var(--line); border-radius: 14px; padding: 9px 13px; cursor: pointer; box-shadow: 0 2px 8px #1d25350d; }
.item:hover { transform: translateY(-2px); border-color: #a9c7f3; box-shadow: 0 6px 16px #2f7df626; }
.item.next { border-color: var(--accent); background: linear-gradient(120deg, #fff, #eaf3ff); box-shadow: 0 0 0 3px #2f7df630; }
.item.cleared { background: #f7faf8; }
.item.tut { border-color: #f6d79a; }

/* 自分が 1 位のステージは光る (どこを守っていて、どこを取りに行くかがひと目でわかる) */
.item.gold { position: relative; border-color: var(--gold);
  background: linear-gradient(120deg, #fffdf2, #fff6d9 60%, #ffeeb8);
  box-shadow: 0 0 0 2px #f3c33955, 0 6px 18px #e8b22a33; animation: shine 2.6s ease-in-out infinite; }
.item.gold:hover { border-color: #e2a700; }
.item.gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, #ffffffcc 48%, transparent 62%);
  background-size: 260% 100%; animation: sweep 3.4s ease-in-out infinite; }
.item .crown { position: absolute; top: -9px; left: -7px; font-size: 19px; z-index: 2;
  filter: drop-shadow(0 2px 2px #0002); animation: bob 2.4s ease-in-out infinite; }
.item.takeable:hover { border-color: var(--gold); box-shadow: 0 6px 16px #e8b22a33; }
.ch-crown { margin-left: 10px; color: #a9791a; background: #fff3cf; border: 1px solid #f0d793;
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: bold; }
.crown-sum { margin-left: 14px; color: #a9791a; }
@keyframes shine { 0%, 100% { box-shadow: 0 0 0 2px #f3c33955, 0 6px 18px #e8b22a33 }
  50% { box-shadow: 0 0 0 4px #f3c33988, 0 8px 22px #e8b22a55 } }
@keyframes sweep { 0% { background-position: 150% 0 } 55%, 100% { background-position: -60% 0 } }
.it-no { font-weight: bold; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.it-num { color: var(--sub); font-size: 12px; margin-top: 2px; }
.it-right { text-align: right; }
.it-best { font-weight: bold; }
.tag { font-size: 11px; background: #eaf0fa; border-radius: 999px; padding: 2px 8px; color: var(--sub); font-weight: bold; }
.tag small { opacity: .85; margin-left: 3px; font-weight: normal; }
.tag.ok { background: #dcfce7; color: #15803d; }
.tag.done { background: #e8eefb; color: #4b5c76; }
.tag.warn { background: #ffedd5; color: #c2410c; }
.tag.tut { background: #fef3c7; color: #a16207; }
.tag.d-hi { background: #ffe4ec; color: #be123c; }
.tag.d-mid { background: #fff0d4; color: #b45309; }
.tag.d-lo { background: #ddf7e7; color: #15803d; }
.pts b { color: var(--warn); font-size: 17px; }

/* ---- 詳細の小窓 ---- */
#modal { position: fixed; inset: 0; background: #1d253577; display: flex; align-items: center; justify-content: center; z-index: 50; }
.sheet { background: var(--panel); border-radius: 18px; width: min(740px, 94vw); max-height: 88vh; overflow: auto;
  padding: 20px 22px; box-shadow: 0 24px 60px #1d253555; animation: pop .14s ease-out; }
@keyframes pop { from { transform: scale(.94); opacity: .4 } to { transform: scale(1); opacity: 1 } }
.md-head { display: flex; gap: 14px; align-items: center; }
.md-no { font-size: 20px; font-weight: bold; display: flex; align-items: center; gap: 8px; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.md-grid > div { background: var(--panel2); border-radius: 12px; padding: 8px 12px; }
.md-grid b { display: block; font-size: 15px; }
.md-warn { background: #ffedd5; color: #c2410c; border-radius: 10px; padding: 8px 12px; font-weight: bold; }
.mks { display: flex; flex-wrap: wrap; gap: 10px; }
.mk { display: flex; align-items: center; gap: 8px; background: var(--panel2); border-radius: 12px; padding: 6px 12px 6px 6px; }
.mk-top { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; }
.mk-rect { border-radius: 3px; box-shadow: 0 1px 3px #0003; }
.md-top tr.me { background: #eaf3ff; }
.md-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* ---- 積む ---- */
body.playing .page { padding: 0; }
#hud { display: flex; align-items: center; gap: 16px; padding: 9px 18px; background: var(--panel); border-bottom: 2px solid var(--line); }
.hud-stage #hud-no { font-size: 18px; font-weight: bold; }
.hud-score .lab, .hud-best .lab, .hud-left .lab { font-size: 10px; letter-spacing: .16em; color: var(--sub); }
.hud-score { position: relative; }
.hud-score .val { font-size: 32px; font-weight: 900; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.hud-best { min-width: 190px; }
.hud-best .val { font-size: 17px; font-weight: bold; color: var(--gold); }
#hud-best-by { font-size: 11px; color: var(--sub); margin-left: 4px; }
.hud-best .bar { height: 9px; background: #e7eefa; border-radius: 5px; overflow: hidden; margin-top: 3px; }
.hud-best .bar div { height: 100%; background: linear-gradient(90deg, #4b93ff, #15b8a6); transition: width .3s; }
.hud-best .bar div.over { background: linear-gradient(90deg, #f5a524, #f43f7f); }
#hud-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.chip2 { background: var(--panel2); border-radius: 10px; padding: 5px 11px; text-align: center; min-width: 66px; }
.chip2 span { display: block; font-size: 10px; color: var(--sub); }
.chip2 b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hud-left .val { font-size: 21px; font-weight: bold; font-variant-numeric: tabular-nums; }
#pack { display: flex; gap: 12px; height: calc(100vh - 112px); padding: 12px 14px; }
#view-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#view { flex: 1; background: #dceaf8; border: 2px solid var(--line); border-radius: 14px; overflow: hidden; min-height: 200px; box-shadow: inset 0 2px 10px #1d253514; }

/* ロボット相棒 */
#coach { position: absolute; left: 12px; bottom: 12px; max-width: 330px; display: flex; gap: 10px; align-items: flex-end; }
#coach .av-btn { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 50%; }
#coach .av-btn:hover { background: #ffffff66; }
#coach .av { width: 56px; height: 56px; flex: none; animation: bob 2.4s ease-in-out infinite; }
#coach.collapsed .bubble { display: none; }
#coach.collapsed .av { width: 46px; height: 46px; opacity: .85; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
#coach .bubble { background: #fffdf5f2; border: 2px solid var(--gold); border-radius: 14px; padding: 9px 12px;
  box-shadow: 0 6px 18px #1d253522; position: relative; animation: fadein .18s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
#coach .bubble::before { content: ""; position: absolute; left: -9px; bottom: 16px; width: 14px; height: 14px; background: #fffdf5;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.co-head { font-size: 11px; letter-spacing: .1em; color: #a16207; font-weight: bold; }
.co-t { font-weight: bold; margin: 2px 0; }
.co-b { font-size: 12px; color: #4b5c76; }
.co-dots { display: flex; gap: 5px; margin-top: 7px; }
.co-dots i { width: 18px; height: 5px; border-radius: 3px; background: #e6ddc4; }
.co-dots i.on { background: var(--gold); }

/* 演出 */
#toast { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); pointer-events: none; z-index: 5; }
.pop-msg { font-size: 30px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 #0003, 0 0 22px #fff8;
  padding: 8px 22px; border-radius: 999px; animation: popup 1.1s ease-out forwards; }
.pop-msg.rec { background: linear-gradient(90deg, #f5a524, #f43f7f); }
.pop-msg.lock { background: linear-gradient(90deg, #15b8a6, #2f7df6); }
.pop-msg.clear { background: linear-gradient(90deg, #22c55e, #15b8a6); }
@keyframes popup { 0% { transform: scale(.6); opacity: 0 } 20% { transform: scale(1.12); opacity: 1 }
  70% { transform: scale(1); opacity: 1 } 100% { transform: scale(1) translateY(-26px); opacity: 0 } }
.gain { position: absolute; font-weight: 900; color: var(--ok); animation: gain 1s ease-out forwards; pointer-events: none; }
@keyframes gain { from { transform: translateY(0); opacity: 1 } to { transform: translateY(-34px); opacity: 0 } }

#queue-wrap { margin-top: 10px; }
.q-head { font-size: 11px; letter-spacing: .14em; color: var(--sub); margin-bottom: 5px; font-weight: bold; }
#queue { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 5px; }
.q { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 2px solid var(--line); border-radius: 14px;
  padding: 7px 12px 7px 7px; cursor: pointer; flex: none; box-shadow: 0 2px 8px #1d25350d; }
.q:hover { transform: translateY(-2px); border-color: #a9c7f3; }
.q.on { border-color: var(--accent); background: #eaf3ff; box-shadow: 0 0 0 3px #2f7df630; }
.q.noplace { opacity: .45; cursor: default; }
.q-top { display: flex; align-items: center; justify-content: center; background: #f4f8fe; border-radius: 8px; }
.q-rect { border-radius: 3px; box-shadow: 0 2px 5px #0002; }
.q-side { width: 11px; height: 48px; display: flex; align-items: flex-end; }
.q-hbar { width: 11px; border-radius: 3px; opacity: .9; }
.q-info { display: flex; flex-direction: column; line-height: 1.25; }
.q-info b { font-size: 17px; }
.q-n { font-size: 11px; color: var(--ok); font-weight: bold; }
.q-n.zero { color: #ef4444; }
.q-empty { color: var(--ok); font-weight: bold; padding: 18px 6px; }
#view-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 0 0; }
aside { width: 360px; overflow-y: auto; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; }
#cands { max-height: 44vh; overflow-y: auto; border: 2px solid var(--line); border-radius: 10px; }
#cands .c { display: grid; grid-template-columns: 3em 1fr 5.5em; gap: 4px; padding: 5px 9px; cursor: pointer; font-size: 12px;
  border-bottom: 1px solid #eef2f8; font-variant-numeric: tabular-nums; }
#cands .c:hover { background: #fff7e8; }
#cands .c.on { background: #ffe9b8; font-weight: bold; }
#cands .c .new { color: var(--warn); font-weight: bold; }
#place-bar { margin: 10px 0; }
#place-bar .primary { width: 100%; }
#saved { white-space: pre-wrap; word-break: break-all; }
.now { font-size: 11px; font-weight: bold; color: var(--pink); }
.now.me { color: var(--accent); }

/* ---- なぜやるのか ---- */
.about { max-width: 1100px; }
.ab-hero { display: flex; gap: 18px; align-items: center; background: linear-gradient(120deg, #fff, #eaf3ff); border-color: #bcd8ff; }
.ab-hero h2 { font-size: 20px; }
.ab-hero p { margin: 6px 0 0; line-height: 1.7; }
#ab-robot { flex: none; }
#ab-robot .av { width: 92px; height: 92px; animation: bob 2.4s ease-in-out infinite; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.ab-grid .card { margin: 0; }
.ab-grid h3 { color: var(--accent); font-size: 15px; margin-top: 0; }
.ab-grid p { line-height: 1.7; margin: 6px 0; }
.ab-grid ul, .ab-grid ol { margin: 6px 0; padding-left: 1.3em; line-height: 1.8; }
.ab-grid code { background: var(--panel2); border-radius: 4px; padding: 1px 5px; }
.ab-cta { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.ab-cta .big { margin-left: auto; }
.it-sub { margin-top: 3px; }
.rank { font-weight: bold; font-size: 13px; color: var(--sub); }
.rank.r1 { color: var(--gold); } .rank.r2 { color: #64748b; } .rank.r3 { color: #b45309; }
.holder { font-weight: bold; font-size: 13px; }
.holder.me { color: var(--gold); }
.holder.none { color: var(--sub); font-weight: normal; font-size: 12px; }
#replay-bar { display: flex; align-items: center; gap: 10px; padding: 9px 0 0; }
#rp-slider { flex: 1; accent-color: var(--accent); }
button.see { padding: 3px 10px; font-size: 12px; border-radius: 8px; }
body.watching #pack aside { display: none; }

/* ---- スマホ・タブレット ---- */
@media (max-width: 820px) {
  body { font-size: 15px; }
  header { gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  h1 { font-size: 15px; }
  nav { order: 3; width: 100%; }
  .tab { flex: 1; padding: 9px 6px; font-size: 13px; }
  #msg { order: 2; font-size: 12px; }
  .page { padding: 10px; }
  .card { padding: 12px 14px; border-radius: 12px; }
  .next-card { flex-wrap: wrap; }
  .next-card .big, .next-card .big + .big { margin-left: 0; width: 100%; }
  .next-title { font-size: 17px; }
  .items { grid-template-columns: 1fr; }
  .item { padding: 11px 12px; }
  .ch-prog .pbar { width: 60px; }

  /* 積む画面: 縦に積む */
  #pack { flex-direction: column; height: auto; padding: 8px; gap: 8px; }
  #view-wrap { min-height: 52vh; }
  #view { min-height: 46vh; }
  aside { width: 100%; max-height: none; }
  #cands { max-height: 30vh; }
  #hud { flex-wrap: wrap; gap: 8px 12px; padding: 8px 10px; }
  .hud-score .val { font-size: 26px; }
  .hud-best { min-width: 140px; flex: 1; }
  #hud-chips { margin-left: 0; width: 100%; justify-content: space-between; }
  .chip2 { min-width: 0; flex: 1; padding: 4px 6px; }
  .chip2 b { font-size: 13px; }
  #coach { position: static; width: auto; margin-top: 8px; }
  #coach .av { width: 52px; height: 52px; }
  #view-bar, #replay-bar { gap: 6px; }
  #view-bar button, #replay-bar button { padding: 9px 12px; }
  #view-bar label { font-size: 13px; }
  .q { padding: 8px 12px 8px 8px; }
  #place-bar .primary { padding: 14px; font-size: 16px; }
  .sheet { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; padding: 14px; }
  .md-foot { position: sticky; bottom: 0; background: var(--panel); padding-top: 10px; }
  table { font-size: 13px; }
  th, td { padding: 6px 7px; }
  .login { margin: 18px auto; }
}
@media (max-width: 820px) and (orientation: landscape) {
  #pack { flex-direction: row; height: calc(100vh - 150px); }
  aside { width: 46%; }
  #view-wrap { min-height: 0; }
}

/* コツの図 */
.fig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.fig figure { margin: 0; }
.fig svg { width: 100%; height: auto; background: #fbfdff; border: 1px solid var(--line); border-radius: 10px; display: block; }
.fig figcaption { font-size: 12px; font-weight: bold; margin-top: 4px; text-align: center; }
.fig .ng { color: #be123c; }
.fig .ok2 { color: #15803d; }

.md-scroll { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.md-scroll .md-top { margin: 0; }
.md-scroll tr.me td { background: #eef5ff; }

.md-formula { margin: 8px 2px 0; }