@font-face{
  font-family:'Yomogi';
  src:url('./assets/Yomogi-Regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:#eaf1fa;
  color:#29354a;
  font-family:'Yomogi','Klee One','Hiragino Maru Gothic ProN','Yu Gothic',Meiryo,sans-serif;
}

button{
  font:inherit;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible,#choices button:focus{
  outline:3px solid #ec9938;
  outline-offset:4px;
}

#game{
  max-width:510px;
  min-height:100svh;
  margin:auto;
  padding:18px 24px max(18px,env(safe-area-inset-bottom));
  background:#fffdfb;
  box-shadow:0 0 70px #506b8b12;
}

header,footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#6b7b8d;
  font-size:16px;
  line-height:1.25;
}

header button,footer button{
  padding:9px;
  border:0;
  background:none;
  color:#536b84;
  font-size:17px;
  line-height:1.2;
}

.heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:8px 0 5px;
}

h1{
  margin:0;
  font-size:46px;
  font-weight:900;
  line-height:1;
  letter-spacing:-2px;
  white-space:nowrap;
  transform:rotate(-2deg);
}

h1 span{color:#427db2}

.badge{
  align-self:flex-end;
  padding:4px 6px;
  border:1px solid #9bacc0;
  border-radius:4px;
  font-size:14px;
  line-height:1.2;
  letter-spacing:2px;
}

#progress{
  display:flex;
  justify-content:center;
  gap:5px;
  margin:13px 0;
}

.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#dce3ea;
  transition:background .25s,transform .25s;
}

.dot.active{
  background:#608daf;
  transform:scale(1.08);
}

.scene{
  position:relative;
  height:325px;
  overflow:hidden;
  border:1px solid #d8e3ed;
  border-radius:48% 44% 20px 20px;
  background:linear-gradient(#f8fbff,#eef5fb);
  transition:background .4s,border-color .4s;
}

.lesson-characters{
  position:absolute;
  z-index:2;
  top:3px;
  left:50%;
  width:124px;
  height:111px;
  overflow:hidden;
  mix-blend-mode:multiply;
  transform:translateX(-50%);
}

.lesson-characters img{
  display:block;
  width:auto;
  max-width:100%;
  height:100%;
  margin:auto;
  object-fit:contain;
  clip-path:inset(0 0 0 3px);
}

.experiment{
  position:absolute;
  z-index:1;
  top:105px;
  right:7px;
  left:7px;
  height:178px;
}

.experiment svg{
  display:block;
  width:100%;
  height:100%;
}

.beam path,.after-slits path{
  fill:none;
  stroke:#5d8eaf;
  stroke-width:3;
  stroke-linecap:round;
  opacity:.65;
}

.after-slits path{
  stroke-dasharray:4 7;
  opacity:.38;
}

.source{
  fill:#ef9a47;
  filter:url(#glow);
  animation:pulse 1.4s ease-in-out infinite;
}

.barrier rect{
  fill:#4f6981;
  stroke:#334a60;
  stroke-width:2;
}

.screen{
  fill:#d9e5ee;
  stroke:#718da3;
  stroke-width:2;
}

.interference,.two-bands,.detectors,.record-mark,.eraser-mark,.time-mark,.possibility-cloud,.single-experiment,.pathless-wave,.source-spread{
  opacity:0;
  transition:opacity .45s;
}

.interference ellipse{fill:#308dcc}
.two-bands ellipse{fill:#347fad;opacity:.78}

.detectors circle{
  fill:#fffdfb;
  stroke:#e58d46;
  stroke-width:4;
}

.detectors circle:nth-child(n+3){
  fill:#e58d46;
  stroke:none;
}

.record-mark path,.eraser-mark path,.time-mark path{
  fill:none;
  stroke:#c7657a;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.record-mark path{stroke-dasharray:7 8}
.record-mark circle{fill:#c7657a}
.eraser-mark path{opacity:.75}
.time-mark path{stroke:#7b6dac;stroke-dasharray:7 6}

.possibility-cloud .thought-line{
  fill:none;
  stroke:#a792b7;
  stroke-width:3;
  stroke-dasharray:5 7;
}

.possibility-cloud .thought-dot{fill:#a792b7}

.possibility-cloud .dish>ellipse{
  fill:#fffdfb;
  stroke:#7895aa;
  stroke-width:3;
}

.possibility-cloud .curry path{fill:#efb05b;stroke:#d98743;stroke-width:2}
.possibility-cloud .curry circle{fill:#fff3cf}
.possibility-cloud .rice path{fill:#fffdf4;stroke:#718ca1;stroke-width:3;stroke-linejoin:round}
.possibility-cloud .rice rect{fill:#526b67}
.possibility-cloud .bowl path:first-of-type{fill:#91c6dc;stroke:#608aa1;stroke-width:3}
.possibility-cloud .bowl path:last-of-type{fill:none;stroke:#e89c68;stroke-width:4;stroke-linecap:round}

.single-cover{fill:#4f6981;stroke:#334a60;stroke-width:2}

.single-path{
  fill:none;
  stroke:#5d8eaf;
  stroke-width:4;
  stroke-dasharray:5 7;
}

.single-band{fill:#347fad;opacity:.72;filter:url(#glow)}

.probability-cloud{
  fill:#6ea6cc;
  opacity:.26;
}

.broad-cloud{opacity:.18}
.cloud-source{fill:#ef9a47;filter:url(#glow)}

.absorbed-marks path{
  fill:none;
  stroke:#c7657a;
  stroke-width:4;
  stroke-linecap:round;
}

.scene[data-visual="possibility"] .beam,
.scene[data-visual="possibility"] .barrier,
.scene[data-visual="possibility"] .after-slits,
.scene[data-visual="possibility"] .screen,
.scene[data-visual="pathless"] .beam,
.scene[data-visual="pathless"] .after-slits,
.scene[data-visual="spread"] .beam,
.scene[data-visual="spread"] .after-slits{
  opacity:0;
}

.scene[data-visual="possibility"] .possibility-cloud,
.scene[data-visual="single"] .single-experiment,
.scene[data-visual="pathless"] .single-experiment,
.scene[data-visual="pathless"] .pathless-wave,
.scene[data-visual="spread"] .source-spread{
  opacity:1;
}

.scene[data-visual="pathless"] .single-path{opacity:0}

.scene[data-visual="single"] .beam path:last-of-type,
.scene[data-visual="single"] .after-slits{
  opacity:0;
}

.scene[data-visual="interference"] .interference,
.scene[data-visual="wave"] .interference,
.scene[data-visual="amplitude"] .interference,
.scene[data-visual="phase"] .interference,
.scene[data-visual="eraser"] .interference,
.scene[data-visual="time"] .interference,
.scene[data-visual="complete"] .interference,
.scene[data-visual="partial"] .interference,
.scene[data-visual="observed"] .two-bands,
.scene[data-visual="entangled"] .two-bands,
.scene[data-visual="recorded"] .two-bands,
.scene[data-visual="interaction"] .two-bands,
.scene[data-visual="density"] .two-bands,
.scene[data-visual="partial"] .two-bands,
.scene[data-visual="observed"] .detectors,
.scene[data-visual="entangled"] .detectors,
.scene[data-visual="recorded"] .detectors,
.scene[data-visual="interaction"] .detectors,
.scene[data-visual="partial"] .detectors,
.scene[data-visual="density"] .detectors,
.scene[data-visual="eraser"] .detectors,
.scene[data-visual="time"] .detectors,
.scene[data-visual="complete"] .detectors,
.scene[data-visual="recorded"] .record-mark,
.scene[data-visual="interaction"] .record-mark,
.scene[data-visual="density"] .record-mark,
.scene[data-visual="eraser"] .eraser-mark,
.scene[data-visual="time"] .eraser-mark,
.scene[data-visual="time"] .time-mark,
.scene[data-visual="complete"] .time-mark{
  opacity:1;
}

.scene[data-visual="partial"] .interference,
.scene[data-visual="partial"] .two-bands{
  opacity:.55;
}

.scene[data-visual="phase"] .after-slits path:nth-child(odd){stroke:#9b64ac}

.term-guide{
  position:absolute;
  z-index:2;
  top:114px;
  right:12px;
  left:12px;
  display:none;
}

.term-card{
  display:none;
  padding:10px 12px 4px;
  border:1px solid #c7d7e5;
  border-radius:18px;
  background:#fffdfbea;
  box-shadow:0 5px 16px #55728f18;
  text-align:center;
}

.term-card strong,
.term-card>span{
  display:block;
}

.term-card strong{
  color:#486e91;
  font-size:21px;
  line-height:1.15;
}

.term-card>span{
  margin-top:2px;
  color:#6c7690;
  font-size:16px;
  line-height:1.2;
}

.term-card svg{
  display:block;
  width:100%;
  height:90px;
}

.guide-arrow{
  fill:none;
  stroke:#4f86ae;
  stroke-width:5;
  stroke-linecap:round;
}

.guide-arrow.second-arrow{stroke:#b06c98}
.guide-arrow.strong-arrow{stroke-width:8}
.term-card marker path{fill:#4f86ae}
.term-card text{fill:#6c7690;font-family:'Yomogi',sans-serif;font-size:16px}
.term-card .guide-note{font-size:15px}
.term-card .guide-result{fill:#9c5d89;font-size:17px}

.phase-cycle-diagram{
  display:grid;
  grid-template-columns:repeat(9,auto);
  align-items:center;
  justify-content:center;
  gap:5px;
  margin:14px 0 8px;
}

.phase-cycle-diagram b{
  min-width:42px;
  padding:6px 5px;
  border-radius:999px;
  background:#e1eef7;
  color:#486f90;
  font-size:16px;
}

.phase-cycle-diagram b:nth-of-type(2){transform:translateY(-7px)}
.phase-cycle-diagram b:nth-of-type(4){transform:translateY(7px)}
.phase-cycle-diagram i{color:#a5648b;font-size:18px}

.complex-axis{
  fill:none;
  stroke:#a9b6c2;
  stroke-width:2;
}

.complex-guide{
  fill:none;
  stroke:#4f86ae;
  stroke-width:6;
  stroke-linecap:round;
}

.complex-card marker path{fill:#4f86ae}

.complex-components{
  fill:none;
  stroke:#c789a9;
  stroke-width:2;
  stroke-dasharray:5 4;
}

.term-card i,
.term-card em{
  font-style:normal;
}

.pair-lines{
  display:grid;
  gap:7px;
  margin:7px auto 4px;
  max-width:250px;
}

.pair-lines div{
  display:grid;
  grid-template-columns:1fr 28px 1fr;
  align-items:center;
  font-size:18px;
}

.pair-lines b,
.pair-lines em{
  padding:4px 8px;
  border-radius:999px;
  background:#e2eff8;
  color:#466f91;
}

.pair-lines em{
  background:#f5e3ee;
  color:#945b80;
}

.leak-diagram{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:15px 0 12px;
  font-size:18px;
}

.leak-diagram>b{
  padding:9px 12px;
  border-radius:50%;
  background:#e2eff8;
  color:#466f91;
}

.leak-diagram>i{color:#b06c98;font-size:28px}

.leak-diagram div{
  display:flex;
  gap:5px;
}

.leak-diagram em{
  padding:5px;
  border-radius:50%;
  background:#f4e4ee;
  color:#8e5e80;
  font-size:16px;
}

.tradeoff-diagram{
  display:grid;
  grid-template-columns:55px 1fr 55px;
  align-items:center;
  gap:7px;
  margin:14px auto 6px;
  max-width:260px;
  color:#4a7393;
  font-size:18px;
}

.tradeoff-diagram i{
  position:relative;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#5791b8,#cf7ba6);
  transform:rotate(-7deg);
}

.tradeoff-diagram i::after{
  content:'';
  position:absolute;
  top:6px;
  left:50%;
  width:4px;
  height:24px;
  border-radius:3px;
  background:#71899e;
}

.term-card small{
  display:block;
  color:#718095;
  font-size:15px;
}

.matrix-grid{
  display:grid;
  grid-template-columns:repeat(2,82px);
  justify-content:center;
  gap:5px;
  margin:6px 0 4px;
}

.matrix-grid b,
.matrix-grid em{
  padding:5px 4px;
  border-radius:8px;
  background:#dcecf7;
  color:#456d8e;
  font-size:16px;
}

.matrix-grid em{
  background:#f3e2ec;
  color:#945d80;
}

.eraser-diagram{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:10px 0 7px;
}

.eraser-diagram b{
  padding:8px 3px;
  border-radius:8px;
  color:#365f80;
  font-size:16px;
  background:repeating-linear-gradient(90deg,#d9eaf5 0 9px,#77a8c9 9px 15px);
}

.eraser-diagram .reverse-stripe{
  background:repeating-linear-gradient(90deg,#77a8c9 0 9px,#d9eaf5 9px 15px);
}

.eraser-diagram i{
  grid-column:1/-1;
  color:#7a7089;
  font-size:16px;
}

.time-diagram,
.observation-diagram{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:15px 0 12px;
  font-size:17px;
}

.time-diagram b,
.observation-diagram b{
  padding:7px 8px;
  border-radius:9px;
  background:#e1eef7;
  color:#466f91;
}

.time-diagram i,
.observation-diagram i{
  color:#a5648b;
  font-size:22px;
}

.time-diagram em{
  color:#8d5b7b;
  white-space:nowrap;
}

.measurement-diagram{
  display:grid;
  justify-items:center;
  gap:5px;
  margin:7px 0 3px;
  color:#6e7890;
  font-size:15px;
}

.measurement-diagram>div{
  display:flex;
  align-items:center;
  gap:8px;
}

.measurement-superposition b{
  padding:5px 9px;
  border-radius:999px;
  background:#e1eef7;
  color:#466f91;
  font-size:16px;
}

.measurement-superposition i,
.measurement-flow i{
  color:#a5648b;
  font-size:16px;
}

.measurement-flow em{
  color:#6e7890;
  font-size:15px;
}

.measurement-result{
  padding:4px 9px;
  border-radius:999px;
  background:#f4e3ed;
  color:#8d5c7c;
  font-size:15px;
}

.scene[data-visual="phase-cycle"] .experiment,
.scene[data-visual="complex"] .experiment,
.scene[data-visual="amplitude"] .experiment,
.scene[data-visual="phase"] .experiment,
.scene[data-visual="entanglement-guide"] .experiment,
.scene[data-visual="decoherence"] .experiment,
.scene[data-visual="partial"] .experiment,
.scene[data-visual="complementarity"] .experiment,
.scene[data-visual="matrix-intro"] .experiment,
.scene[data-visual="density"] .experiment,
.scene[data-visual="eraser-intro"] .experiment,
.scene[data-visual="eraser"] .experiment,
.scene[data-visual="time"] .experiment,
.scene[data-visual="correlation"] .experiment,
.scene[data-visual="observation"] .experiment,
.scene[data-visual="measurement-problem"] .experiment{
  opacity:.09;
}

.scene[data-visual="phase-cycle"] .term-guide,
.scene[data-visual="complex"] .term-guide,
.scene[data-visual="amplitude"] .term-guide,
.scene[data-visual="phase"] .term-guide,
.scene[data-visual="entanglement-guide"] .term-guide,
.scene[data-visual="decoherence"] .term-guide,
.scene[data-visual="partial"] .term-guide,
.scene[data-visual="complementarity"] .term-guide,
.scene[data-visual="matrix-intro"] .term-guide,
.scene[data-visual="density"] .term-guide,
.scene[data-visual="eraser-intro"] .term-guide,
.scene[data-visual="eraser"] .term-guide,
.scene[data-visual="time"] .term-guide,
.scene[data-visual="correlation"] .term-guide,
.scene[data-visual="observation"] .term-guide,
.scene[data-visual="measurement-problem"] .term-guide,
.scene[data-visual="phase-cycle"] .phase-cycle-card,
.scene[data-visual="complex"] .complex-card,
.scene[data-visual="amplitude"] .amplitude-card,
.scene[data-visual="phase"] .phase-card,
.scene[data-visual="entanglement-guide"] .entanglement-card,
.scene[data-visual="decoherence"] .decoherence-card,
.scene[data-visual="partial"] .tradeoff-card,
.scene[data-visual="complementarity"] .tradeoff-card,
.scene[data-visual="matrix-intro"] .matrix-card,
.scene[data-visual="density"] .matrix-card,
.scene[data-visual="eraser-intro"] .eraser-card,
.scene[data-visual="eraser"] .eraser-card,
.scene[data-visual="time"] .time-card,
.scene[data-visual="correlation"] .time-card,
.scene[data-visual="observation"] .observation-card,
.scene[data-visual="measurement-problem"] .measurement-card{
  display:block;
}

.scene.correct{
  border-color:#93bca8;
  background:linear-gradient(#f7fcf8,#edf8f1);
}

.scene.wrong{
  border-color:#d6a1aa;
  background:linear-gradient(#fffafa,#faeff1);
}

.level-reward-scene{
  border-color:#e2b858;
  background:
    radial-gradient(circle at 18% 22%,#fff4a8 0 4px,transparent 5px),
    radial-gradient(circle at 80% 28%,#fff4a8 0 6px,transparent 7px),
    radial-gradient(circle at 28% 72%,#ffffffa8 0 5px,transparent 6px),
    radial-gradient(circle at 74% 76%,#ffffffa8 0 4px,transparent 5px),
    linear-gradient(145deg,#fff8d8,#dff5ed 58%,#e7efff);
}

.level-reward-scene>.lesson-characters,
.level-reward-scene>.experiment,
.level-reward-scene>.term-guide{
  display:none;
}

.level-reward-scene:before{
  content:'★';
  position:absolute;
  top:34px;
  left:50%;
  width:142px;
  height:142px;
  border:5px solid #fff8dc;
  border-radius:50%;
  background:#f4c85a;
  box-shadow:0 10px 0 #dcae3d,0 16px 30px #9c7a2533;
  color:#fffdf0;
  font-family:Arial,sans-serif;
  font-size:92px;
  line-height:142px;
  text-align:center;
  text-shadow:0 4px 0 #d6a536;
  transform:translateX(-50%) rotate(-4deg);
  animation:rewardPop .55s cubic-bezier(.2,1.5,.5,1) both;
}

.level-reward-scene:after{
  content:'LEVEL ' attr(data-level);
  position:absolute;
  top:201px;
  left:50%;
  padding:7px 19px;
  border:2px solid #c89e3e;
  border-radius:999px;
  background:#fffdf0;
  color:#8a681e;
  font-family:Arial,sans-serif;
  font-size:21px;
  font-weight:800;
  letter-spacing:2px;
  transform:translateX(-50%) rotate(1deg);
}

.level-up .reward-title{
  color:#9a7224;
  text-align:center;
}

.scene-caption{
  position:absolute;
  z-index:3;
  right:12px;
  bottom:10px;
  left:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:17px;
  line-height:1.3;
  text-align:center;
}

#step-label{
  flex:none;
  padding:2px 6px;
  border:1px solid #9eb2c5;
  border-radius:999px;
  color:#58758f;
  font-size:14px;
}

#caption{min-width:0}

.dialogue{
  position:relative;
  min-height:150px;
  margin:15px 0 12px;
  padding:0 8px;
}

#line{
  margin:0;
  font-size:21px;
  line-height:1.65;
  white-space:pre-line;
}

#skip{
  position:absolute;
  right:0;
  bottom:-8px;
  padding:8px;
  border:0;
  background:none;
  color:#8a9fb4;
}

#choices{
  display:grid;
  gap:11px;
}

.choice{
  width:100%;
  padding:11px 14px;
  border:1.5px solid #94abc1;
  border-bottom-width:4px;
  border-radius:14px;
  background:white;
  color:#314e6b;
  font-size:20px;
  line-height:1.42;
  text-align:left;
  transition:transform .12s,background .12s;
}

.choice span{display:block}

.choice small{
  display:block;
  color:#657f98;
  font-size:18px;
}

.choice .choice-lead{
  margin-bottom:2px;
  color:#8b6882;
}

.choice:active{
  border-bottom-width:2px;
  background:#eaf2fa;
  transform:translateY(2px);
}

.choice.primary{
  border-color:#3e6789;
  background:#4c7da4;
  color:white;
  text-align:center;
}

.choice:disabled{
  opacity:.55;
  cursor:default;
}

.next-notice{
  padding:10px 12px;
  color:#68849b;
  font-size:18px;
  text-align:center;
}

.next-notice.ready{
  animation:nextPulse 1s ease-in-out infinite alternate;
}

footer{
  margin-top:10px;
  padding-top:6px;
  border-top:1px dashed #dce3ea;
}

.footer-actions{
  display:flex;
  align-items:center;
  gap:2px;
}

footer .footer-actions button{
  padding-inline:4px;
  font-size:16px;
  white-space:nowrap;
}

footer button:disabled{
  opacity:.35;
  cursor:default;
}

#collection{
  padding:4px;
  color:#6b7b8d;
  font-size:16px;
  white-space:nowrap;
}

#collection:disabled{
  opacity:1;
}

#collection:not(:disabled){
  color:#3e6789;
  text-decoration:underline;
  text-underline-offset:3px;
}

.ending-title{
  margin:0 0 9px;
  color:#476b89;
  font-size:30px;
  font-weight:900;
  line-height:1.2;
}

.ending .dialogue{min-height:0}

@keyframes pulse{
  50%{opacity:.45;transform:scale(.8);transform-origin:32px 105px}
}

@keyframes nextPulse{
  to{opacity:.45}
}

@keyframes rewardPop{
  from{opacity:0;transform:translateX(-50%) rotate(-18deg) scale(.35)}
}

@media(max-width:390px){
  #game{padding-right:16px;padding-left:16px}
  h1{font-size:40px}
  .badge{font-size:13px}
  .scene{height:300px}
  .lesson-characters{width:108px;height:97px}
  .experiment{top:91px;height:168px}
  #line{font-size:20px}
  .choice{font-size:19px}
  .choice small{font-size:17px}
}

@media(max-height:680px){
  #game{padding-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .heading{margin-top:3px}
  #progress{margin:7px 0}
  .scene{height:280px}
  .lesson-characters{width:96px;height:86px}
  .experiment{top:80px;height:158px}
  .term-guide{top:90px}
  .dialogue{margin-top:11px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}