/* scratch-group-dev Web UI — 子ども向け画面（PC 専用） */
:root{
  --bg:#f3f6f8; --paper:#ffffff; --ink:#1d2733; --muted:#5f6b78; --line:#d9e0e6;
  --go:#1c6e8c;        /* 起動・主操作 */
  --done:#2b7a4b;      /* 反映しました */
  --stop:#a8323f;      /* 止めました */
  --wait:#b9781a;      /* 未送信・いまの課題 */
  --mine:#e8f2f7;
  --r:10px;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55}
body{min-height:100vh}
h1,h2,h3{margin:0 0 .4em;font-weight:700;line-height:1.3}
h1{font-size:1.5rem}h2{font-size:1.15rem}h3{font-size:1rem}
p{margin:.3em 0}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  border-radius:var(--r);padding:.5em 1em}
button:hover{border-color:var(--ink)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--go);outline-offset:2px}
.primary{background:var(--go);color:#fff;border-color:var(--go);font-size:1.15rem;padding:.8em 1.6em;font-weight:700}
.primary:hover{background:#155a73}
.danger{color:var(--stop);border-color:var(--stop)}
.quiet{color:var(--muted)}
input,select{font:inherit;padding:.5em .7em;border:1px solid var(--line);border-radius:8px;background:#fff}
.hidden{display:none!important}

.topbar{display:flex;align-items:center;gap:1rem;padding:.7rem 1.5rem;background:var(--paper);border-bottom:1px solid var(--line)}
.topbar .grow{flex:1}
.topbar .who{color:var(--muted)}
main{max-width:1100px;margin:0 auto;padding:1.5rem}
.screen{display:none}.screen.active{display:block}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;margin-bottom:1.2rem}
.row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.cols{display:grid;grid-template-columns:2fr 1fr;gap:1.2rem}
@media (max-width:900px){.cols{grid-template-columns:1fr}}

/* お知らせ帯 */
.notice{padding:.8rem 1.1rem;border-radius:var(--r);margin-bottom:1rem;border-left:6px solid var(--wait);background:#fff8ea}
.notice.stop{border-left-color:var(--stop);background:#fdf0f1}
.notice.info{border-left-color:var(--go);background:#eef6f9}
.notice .row{margin-top:.5rem}

/* ログイン */
.names{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0 1rem}
.names button{font-size:1.1rem;padding:.7em 1.2em}
.names button.picked{background:var(--go);color:#fff;border-color:var(--go)}
.pin{font-size:1.6rem;letter-spacing:.5em;width:8em;text-align:center}

/* スプライト一覧 */
.sprites{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.sprite{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:.6rem;text-align:center;position:relative}
.sprite.mine{background:var(--mine);border-color:var(--go);cursor:pointer}
.sprite.mine:hover{box-shadow:0 0 0 2px var(--go)}
.sprite .img{height:90px;display:flex;align-items:center;justify-content:center;background:
  repeating-conic-gradient(#f2f2f2 0 25%,#fff 0 50%) 0 0/16px 16px;border-radius:6px;overflow:hidden}
.sprite img{max-width:100%;max-height:100%}
.sprite .name{font-weight:700;margin-top:.4rem;word-break:break-all}
.sprite .owner{font-size:.85rem;color:var(--muted)}
.sprite.mine .owner{color:var(--go);font-weight:700}
.sprite .owner.none{color:var(--wait)}
.sprite.locked{opacity:.7;background:#f4f4f4;border-style:dashed}
.sprite.locked .owner{color:var(--muted)}

/* 課題 */
.issues{list-style:none;margin:0;padding:0}
.issues li{padding:.55rem .8rem;border-left:5px solid var(--wait);background:#fffbf2;border-radius:6px;margin-bottom:.5rem}
.issues li.red{border-left-color:var(--stop);background:#fdf3f4}
.issues li.done{border-left-color:var(--done);background:#f1f8f3;color:#3c5a48}
.issues .detail{display:block;font-size:.9rem;color:var(--muted);margin-top:.2rem}
.issues .code{font-size:.75rem;color:var(--muted);margin-right:.4em}
.issues li.faded{opacity:.65}
details summary{cursor:pointer;color:var(--muted);padding:.3rem 0}
.empty{color:var(--muted);padding:.6rem;text-align:center}

/* 編集中の状態 */
.status{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-radius:var(--r);font-size:1.15rem;font-weight:700;
  background:#eef6f9;color:var(--go);border:1px solid #cfe3ea}
.status.unsent{background:#fff3dc;color:#7a4e0c;border-color:#efd39a}
.status.lost{background:#fdf0f1;color:var(--stop);border-color:#f0c4c9}
.status .dot{width:14px;height:14px;border-radius:50%;background:currentColor;flex:none}
.status.unsent .dot{animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.status.unsent .dot{animation:none}}
.status small{font-weight:400;font-size:.85rem;color:var(--muted)}

/* 終了結果 */
.result{border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1rem;border:1px solid var(--line);background:var(--paper)}
.result.done{border-color:var(--done)}.result.done h2{color:var(--done)}
.result.stop{border-color:var(--stop)}.result.stop h2{color:var(--stop)}
.result.quiet h2{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.chip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.15em .8em;font-size:.95rem}

/* 履歴 */
.commits{list-style:none;padding:0;margin:0}
.commits li{display:flex;gap:1rem;align-items:center;padding:.6rem .4rem;border-bottom:1px solid var(--line)}
.commits li:first-child{background:var(--mine);border-radius:6px}
.commits .when{color:var(--muted);font-size:.9rem;min-width:11em}
.commits .msg{flex:1}
.commits .tag{font-size:.8rem;color:var(--go)}

/* 管理画面 */
.admin main{max-width:1000px}
.admin table{width:100%;border-collapse:collapse}
.admin td,.admin th{padding:.4rem .5rem;border-bottom:1px solid var(--line);text-align:left;font-size:.95rem}
.admin .snap.point{font-weight:700}
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7em 1.2em;border-radius:999px;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}