:root{
  --bg:#EDF2F7; --surface:#FFFFFF; --ink:#1E2A38; --sub:#5B6B7E;
  --line:#DCE4EE; --teal:#0FB5AA; --teal-soft:#E2F6F4;
  --blue:#2F6FB0; --blue-deep:#24527F; --amber:#F5B301;
  --coral:#E8604C; --purple:#7B5CC4; --cp:#3AB7C2;
  --radius:16px; --shadow:0 2px 12px rgba(30,42,56,.08);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
  font-family:"Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;
}
button{ font-family:inherit; }

/* ---------- ヘッダー ---------- */
header{
  background:linear-gradient(120deg,var(--blue-deep),var(--blue));
  color:#fff; padding:9px 18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand{ font-weight:800; font-size:17px; color:#fff; text-decoration:none; }
/* 結果バー：失敗しても仮想空間を見ながらふりかえれるよう、モーダルではなく下に出す */
.result-bar{ position:absolute; left:50%; bottom:50px; transform:translate(-50%, 20px); z-index:4; display:flex; align-items:center; gap:8px;
  max-width:calc(100% - 24px); padding:7px 8px 7px 16px; border-radius:999px; background:rgba(30,42,56,.92); color:#fff;
  font-size:13.5px; font-weight:800; box-shadow:0 6px 20px rgba(20,30,50,.3); opacity:0; pointer-events:none; transition:all .25s; }
.result-bar.on{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.result-bar.ng{ background:rgba(178,58,38,.94); }
.result-bar.ok{ background:rgba(15,140,130,.94); }
.result-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.result-bar button{ flex:none; border:none; border-radius:999px; background:#fff; color:var(--ink); font-weight:800; font-size:12.5px; padding:6px 12px; cursor:pointer; }
.result-bar button.next{ background:var(--amber); }
.who{ margin-left:auto; font-size:13px; font-weight:700; display:flex; align-items:center; gap:10px; }
.who .badge{ background:rgba(255,255,255,.18); border-radius:999px; padding:5px 12px; }

/* ---------- ツールバー ---------- */
.toolbar{ display:flex; gap:8px; padding:8px 16px; flex-wrap:wrap; align-items:center; }
.toolbar button{
  padding:9px 16px; border:none; border-radius:12px; font-size:14px; font-weight:800; cursor:pointer;
}
.toolbar button:disabled{ opacity:.45; cursor:default; }
.btn-run{ background:var(--teal); color:#fff; box-shadow:0 3px 10px rgba(15,181,170,.35); }
.btn-stop{ background:var(--coral); color:#fff; }
.btn-quiet{ background:#E2E9F2; color:#3D4C5E; }
.btn-stage{ background:#fff; color:var(--ink); border:2px solid var(--line) !important; display:flex; align-items:center; gap:8px; }
.btn-stage .sid{ background:var(--blue); color:#fff; border-radius:8px; padding:1px 8px; font-size:12.5px; }
.btn-demo{ background:#FFF1D6; color:#9A5B00; }
.btn-answer{ background:#FFE9A8; color:#5A3D00; }
.toolbar .btn-key{ background:transparent; color:#8A99AB; padding:9px 11px; }
.toolbar .btn-key:hover{ background:#E2E9F2; }
.who .badge.teacher{ background:#FFD23F; color:#3A2A00; }
.toolbar .sep{ width:1px; height:26px; background:var(--line); margin:0 4px; }
.status{ font-size:13px; font-weight:800; color:var(--sub); margin-left:4px;
  flex:1 1 120px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }   /* 長いおしらせは「…」にして、ツールバーを1行に保つ */
.status.ok{ color:var(--teal); } .status.err{ color:var(--coral); }

/* ---------- レイアウト ---------- */
.wrap{ display:flex; gap:14px; padding:0 16px 12px; flex:1 1 auto; min-height:0; }
#blocklyArea{
  flex:1 1 400px; min-width:320px; position:relative;
  background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
#blocklyDiv{ position:absolute; inset:0; }
.zoombar{ position:absolute; right:12px; bottom:12px; z-index:5; display:flex; flex-direction:column; gap:6px; }
.zoombar button{ width:40px; height:40px; border:none; border-radius:10px; background:var(--blue);
  color:#fff; font-size:20px; font-weight:800; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); }
/* お手本の再生中は、プログラムの画面に「ないしょ」のふたをする */
.demo-cover{ position:absolute; inset:0; z-index:80; display:none; place-items:center; text-align:center;
  background:rgba(237,242,247,.86); backdrop-filter:blur(3px); font-weight:800; color:var(--sub); font-size:15px; line-height:1.8; }
.demo-cover.on{ display:grid; }
.demo-cover b{ display:block; font-size:22px; color:var(--ink); }

.side{ flex:0 1 54%; min-width:400px; max-width:900px; display:flex; flex-direction:column; gap:8px; min-height:0; overflow-y:auto; }
@media (max-width:900px){
  body{ height:auto; overflow:auto; }
  .wrap{ flex-direction:column; }
  #blocklyArea{ flex:none; height:70vh; }
  .side{ flex:none; min-width:0; max-width:none; overflow:visible; }
}
.card{ background:var(--surface); border-radius:var(--radius); padding:10px 12px; box-shadow:var(--shadow); }
.card h2{ margin:0 0 6px; font-size:12px; letter-spacing:.06em; color:var(--sub); font-weight:800;
  display:flex; justify-content:space-between; align-items:center; }

/* ---------- 仮想空間 ---------- */
.stagecard{ padding:8px; }
#stage{ position:relative; width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden; user-select:none; }
#stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; }
#stage canvas:active{ cursor:grabbing; }
.hud-top{ position:absolute; left:10px; right:10px; top:10px; display:flex; gap:8px; align-items:flex-start; pointer-events:none; z-index:3; }
.mission{ background:rgba(255,255,255,.9); backdrop-filter:blur(6px); border-radius:12px; padding:6px 12px;
  font-size:12.5px; font-weight:700; color:var(--ink); box-shadow:0 2px 10px rgba(30,42,56,.12); max-width:62%; line-height:1.45; }
.mission b{ display:block; font-size:11.5px; color:var(--blue); letter-spacing:.03em; }
.mission .stars{ color:var(--amber); margin-left:4px; }
.mission .rule{ display:block; margin-top:3px; font-size:11.5px; color:#9A5B00; }
.mission .rule:empty{ display:none; }
.mission .rule span{ display:inline-block; background:#FFF4D6; border-radius:6px; padding:0 6px; margin:2px 4px 0 0; }
.views{ margin-left:auto; display:flex; gap:4px; background:rgba(255,255,255,.88); backdrop-filter:blur(6px);
  border-radius:12px; padding:4px; pointer-events:auto; box-shadow:0 2px 10px rgba(30,42,56,.12); flex-wrap:wrap; justify-content:flex-end; }
.views button{ border:none; background:transparent; border-radius:9px; padding:6px 10px; font-size:12.5px; font-weight:800;
  color:var(--sub); cursor:pointer; white-space:nowrap; }
.views button.on{ background:var(--blue); color:#fff; }
.views button:disabled{ opacity:.35; cursor:default; }
.chip{ position:absolute; left:10px; bottom:10px; z-index:3; background:var(--ink); color:#fff; border-radius:999px;
  padding:5px 14px; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.chip:empty{ display:none; }
.hint{ position:absolute; right:12px; bottom:9px; z-index:3; font-size:11px; font-weight:700; color:rgba(30,42,56,.55); pointer-events:none; }
/* お手本の再生中ラベル */
.demo-label{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:4; display:none; align-items:center; gap:10px;
  background:rgba(30,42,56,.88); color:#fff; border-radius:999px; padding:7px 8px 7px 18px; font-size:14px; font-weight:800;
  box-shadow:0 6px 20px rgba(20,30,50,.3); white-space:nowrap; }
.demo-label.on{ display:flex; }
.demo-label .rec{ width:10px; height:10px; border-radius:50%; background:#FF5A4A; animation:rec 1s infinite; }
.demo-label button{ border:none; border-radius:999px; background:#fff; color:var(--ink); font-weight:800; font-size:12.5px; padding:6px 12px; cursor:pointer; }
@keyframes rec{ 50%{ opacity:.25; } }
.bubble3d{ position:absolute; z-index:2; transform:translate(-50%,-100%); pointer-events:none; white-space:nowrap;
  background:#fff; border:2px solid var(--line); border-radius:12px; padding:3px 11px; font-size:14px; font-weight:800;
  box-shadow:0 3px 10px rgba(30,42,56,.15); font-variant-numeric:tabular-nums; }
.bubble3d::after{ content:""; position:absolute; left:50%; bottom:-11px; margin-left:-6px; border:6px solid transparent; border-top-color:#fff; }
.bubble3d.ouch{ background:var(--coral); border-color:var(--coral); color:#fff; }
.bubble3d.ouch::after{ border-top-color:var(--coral); }
.tag3d{ position:absolute; z-index:2; transform:translate(-50%,-120%); pointer-events:none; white-space:nowrap;
  background:rgba(232,96,76,.92); color:#fff; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }
.tag3d.light{ background:rgba(30,42,56,.78); transform:translate(-50%,45%); }
.nogl{ position:absolute; inset:0; display:grid; place-items:center; font-weight:800; color:var(--sub); }
/* 大きく見る（Blockly のツールボックス z-index:70 より上に出す） */
.stagecard.big{ position:fixed; inset:12px; z-index:1000; display:flex; flex-direction:column; box-shadow:0 10px 60px rgba(20,30,50,.45); }
.stagecard.big #stage{ aspect-ratio:auto; flex:1 1 auto; }
.backdrop{ display:none; position:fixed; inset:0; z-index:999; background:rgba(20,30,50,.35); }
.backdrop.on{ display:block; }

.outs{ display:flex; gap:6px; margin-top:8px; }
.out{ flex:1; background:#F4F8FC; border:1px solid var(--line); border-radius:10px; padding:5px 4px;
  text-align:center; font-size:11px; font-weight:700; color:var(--sub); }
.out .v{ display:block; font-size:15px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.out.on{ background:#FFF6D6; border-color:#F0D27A; }

/* ---------- センサーパネル ---------- */
.sensor{ margin-bottom:6px; }
.sensor .head{ display:flex; justify-content:space-between; align-items:baseline; }
.sensor label{ font-size:13px; font-weight:800; }
.pill{ font-size:13px; font-weight:800; color:var(--teal); background:var(--teal-soft);
  border-radius:999px; padding:1px 10px; font-variant-numeric:tabular-nums; }
.sensor.auto input{ opacity:.35; pointer-events:none; }
.sensor .note{ font-size:11px; color:var(--sub); font-weight:700; }
.sensor .ticks{ position:relative; height:0; margin:0 8px; }
.sensor .ticks:not(:empty){ height:18px; margin-top:-3px; }
.sensor .ticks i{ font-style:normal; position:absolute; top:0; width:2px; height:6px; margin-left:-1px; background:var(--coral); border-radius:1px; }
.sensor .ticks b{ position:absolute; top:7px; line-height:1; left:1px; transform:translateX(-50%); font-size:10.5px; font-weight:800; color:var(--coral); white-space:nowrap; }
.sensor .mark{ font-size:11px; color:var(--sub); font-weight:700; line-height:1.45; }
.sensor .mark:empty{ display:none; }
input[type=range]{ width:100%; height:18px; accent-color:var(--teal); cursor:pointer; }
.btn-row{ display:flex; gap:6px; }
.touch-btn{ flex:1; padding:8px 4px; border:2px solid var(--teal); background:#fff; color:var(--teal);
  border-radius:12px; font-size:13px; font-weight:800; cursor:pointer; user-select:none; touch-action:none; }
.touch-btn.on{ background:var(--teal); color:#fff; }
.panel-locked input, .panel-locked .touch-btn{ pointer-events:none; opacity:.55; }
.lock-note{ font-size:11.5px; font-weight:800; color:var(--blue); margin:0 0 6px; display:none; }
.panel-locked .lock-note{ display:block; }

/* ---------- グラフ ---------- */
#graph{ width:100%; height:120px; display:block; }
.legend{ display:flex; gap:12px; font-size:12px; font-weight:800; }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px; }

/* ---------- モーダルウィンドウ（説明・お手本・クリア・失敗・ステージ一覧） ---------- */
.modal-back{ position:fixed; inset:0; z-index:3000; background:rgba(20,30,50,.5); display:grid; place-items:center; padding:16px;
  animation:fadeIn .18s ease-out; }
.modal{ background:#fff; border-radius:24px; width:min(680px,100%); max-height:calc(100vh - 32px); overflow:auto;
  box-shadow:0 20px 60px rgba(10,20,40,.35); padding:22px 24px 20px; animation:popIn .32s cubic-bezier(.34,1.56,.64,1); }
.modal.wide{ width:min(980px,100%); }
.modal h3{ margin:0 0 4px; font-size:22px; }
.modal .sub{ font-size:13px; font-weight:800; color:var(--blue); }
.modal p{ line-height:1.8; }
.talk{ display:flex; gap:16px; align-items:flex-end; min-height:200px; }
.talk .avatar{ width:170px; flex:none; }
.talk .avatar .cp{ display:block; width:100%; height:auto; overflow:visible; }
.say{ position:relative; flex:1; background:#F2FBFC; border:2px solid #BFE6EA; border-radius:20px; padding:16px 18px;
  font-size:18px; font-weight:700; line-height:1.9; color:var(--ink); margin-bottom:56px; min-height:110px; }
.say::after{ content:""; position:absolute; left:-12px; bottom:26px; width:20px; height:20px; background:#F2FBFC;
  border-left:2px solid #BFE6EA; border-bottom:2px solid #BFE6EA; transform:rotate(45deg); }
.say .pager{ position:absolute; right:14px; bottom:8px; font-size:11.5px; color:var(--sub); font-weight:800; }
.say.pop{ animation:sayPop .3s cubic-bezier(.34,1.56,.64,1); }
.mission-box{ background:#FFF7E0; border:2px solid #F4D27A; border-radius:14px; padding:10px 14px; font-weight:800; margin:6px 0 0; line-height:1.6; }
.mission-box small{ display:block; font-size:11.5px; color:#9A5B00; }
.rule-box{ background:#FFFBEF; border:2px solid #F4D27A; border-top:none; border-radius:0 0 14px 14px; padding:6px 14px 8px; margin:-8px 0 0; font-weight:700; font-size:13.5px; line-height:1.7; }
.rule-box small{ display:block; font-size:11.5px; color:#9A5B00; font-weight:800; }
.mission-box + .rule-box{ border-top:1px dashed #F4D27A; }
.hint-box{ background:#EEF5FF; border:2px dashed #A9C6EA; border-radius:14px; padding:10px 14px; font-weight:700; margin:10px 0 0; line-height:1.7; display:none; }
.hint-box.on{ display:block; }
.actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap; }
.dlg-input{ width:100%; margin-top:10px; padding:10px 12px; border:2px solid var(--line); border-radius:12px; font-size:16px; font-family:inherit; }
.key-msg{ color:var(--coral); font-weight:800; min-height:1.6em; margin-top:6px; }
.modal.shake{ animation:shake .4s; }
@keyframes shake{ 20%{ transform:translateX(-10px); } 40%{ transform:translateX(9px); } 60%{ transform:translateX(-6px); } 80%{ transform:translateX(4px); } }
/* 先生用：答え（例）を読むだけのブロック画面 */
.answer-ws{ position:relative; height:min(56vh,520px); min-height:280px; margin-top:10px; border:2px solid var(--line); border-radius:14px; overflow:hidden; background:#FBFDFF; }
.answer-note{ font-size:13px; color:var(--sub); font-weight:700; margin:8px 0 0; }
.btn{ border:none; border-radius:14px; padding:12px 20px; font-size:15px; font-weight:800; cursor:pointer; background:#E2E9F2; color:#3D4C5E; }
.btn.primary{ background:var(--teal); color:#fff; box-shadow:0 4px 12px rgba(15,181,170,.35); }
.btn.warm{ background:var(--amber); color:#3A2A00; box-shadow:0 4px 12px rgba(245,179,1,.35); }
.btn:hover{ filter:brightness(1.05); }
.result{ text-align:center; }
.result .avatar{ width:180px; margin:0 auto; }
.result h3{ font-size:30px; margin-top:4px; }
.result .big-stars{ font-size:30px; color:var(--amber); letter-spacing:4px; }
.result.fail h3{ color:var(--coral); }
.reason{ display:inline-block; background:#FFF0EC; color:#B23A26; border-radius:12px; padding:8px 14px; font-weight:800; margin-top:6px; line-height:1.6; }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes popIn{ from{ transform:scale(.88); opacity:0; } }
@keyframes sayPop{ from{ transform:scale(.96); opacity:.4; } }

/* ステージ一覧 */
.chapters{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.chapter h4{ margin:0 0 8px; font-size:15px; display:flex; align-items:baseline; gap:8px; }
.chapter h4 small{ font-size:12px; color:var(--sub); font-weight:800; }
.stage-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.stage-card{ text-align:left; border:2px solid var(--line); background:#fff; border-radius:14px; padding:10px 12px; cursor:pointer; position:relative; }
.stage-card:hover{ border-color:var(--blue); }
.stage-card.cur{ border-color:var(--teal); background:var(--teal-soft); }
.stage-card .sid{ font-size:12px; font-weight:800; color:var(--blue); }
.stage-card .ttl{ display:block; font-size:14.5px; font-weight:800; margin:2px 0; color:var(--ink); }
.stage-card .stars{ color:var(--amber); font-size:13px; }
.stage-card .done{ position:absolute; right:10px; top:8px; background:var(--teal); color:#fff; border-radius:999px; font-size:11px; font-weight:800; padding:2px 8px; }

/* ---------- 2D のチャッピー（compass の chappy.css と同じ動き） ---------- */
.cp{ display:block; width:100%; height:auto; overflow:visible; }
.cp .cp-all{ transform-origin:448px 966px; animation:cpBreath 3.6s ease-in-out infinite; }
.cp .cp-shadow{ transform-origin:448px 966px; animation:cpShadow 3.6s ease-in-out infinite; }
.cp .cp-tail{ transform-origin:600px 860px; animation:cpTail 3.4s ease-in-out infinite; }
.cp .cp-apple{ transform-origin:856px 330px; animation:cpApple 3.4s ease-in-out -.5s infinite; }
.cp .cp-head{ transform-origin:450px 632px; animation:cpTilt 7s ease-in-out infinite; }
.cp .cp-earL{ transform-origin:295px 215px; animation:cpEarL 6.4s ease-in-out infinite; }
.cp .cp-earR{ transform-origin:645px 210px; animation:cpEarR 6.4s ease-in-out 2.2s infinite; }
.cp .cp-eyes{ transform-origin:420px 413px; animation:cpBlink 4.8s infinite; }
.cp .cp-armR{ transform-origin:600px 652px; }
.cp .cp-patch{ opacity:0; }
.cp-happy .cp-eyes, .cp-sleep .cp-eyes, .cp-ouch .cp-eyes{ animation:none; }
.cp.wave .cp-armR{ animation:cpWave 1.6s ease-in-out infinite; }
.cp.wave .cp-patch{ opacity:1; }
.cp.jump .cp-all{ animation:cpJump .85s cubic-bezier(.3,.7,.3,1) infinite; }
.cp-ouch .cp-head{ animation:cpShake .5s ease-in-out infinite; }
@keyframes cpBreath{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes cpShadow{ 0%,100%{ transform:scaleX(1); opacity:1; } 50%{ transform:scaleX(.88); opacity:.75; } }
@keyframes cpTail{ 0%,100%{ transform:rotate(-2.5deg); } 50%{ transform:rotate(3.5deg); } }
@keyframes cpApple{ 0%,100%{ transform:rotate(5deg); } 50%{ transform:rotate(-6deg); } }
@keyframes cpTilt{ 0%,100%{ transform:rotate(-1.3deg); } 50%{ transform:rotate(1.4deg); } }
@keyframes cpEarL{ 0%,85%,100%{ transform:rotate(0) scaleY(1); } 88%{ transform:rotate(-5deg) scaleY(.92); } 91%{ transform:rotate(2deg) scaleY(1.02); } 94%{ transform:rotate(0) scaleY(1); } }
@keyframes cpEarR{ 0%,85%,100%{ transform:rotate(0) scaleY(1); } 88%{ transform:rotate(5deg) scaleY(.92); } 91%{ transform:rotate(-2deg) scaleY(1.02); } 94%{ transform:rotate(0) scaleY(1); } }
@keyframes cpBlink{ 0%,93%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(.06); } 97%{ transform:scaleY(1); } }
@keyframes cpWave{ 0%,100%{ transform:rotate(0); } 18%{ transform:rotate(-116deg); } 34%{ transform:rotate(-98deg); } 50%{ transform:rotate(-120deg); } 66%{ transform:rotate(-100deg); } 82%{ transform:rotate(-112deg); } }
@keyframes cpJump{ 0%{ transform:translateY(0); } 16%{ transform:translateY(8px) scale(1.05,.94); } 48%{ transform:translateY(-90px) scale(.96,1.05); } 76%{ transform:translateY(6px) scale(1.05,.95); } 100%{ transform:translateY(0); } }
@keyframes cpShake{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-5deg); } 75%{ transform:rotate(5deg); } }
@media (prefers-reduced-motion: reduce){ .cp *{ animation:none !important; } }