[hidden]{display:none!important}
.title-actions,.dialog-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0}
.title-actions button,.title-actions a,dialog button,#ranking-entry,#pause-button{padding:10px 16px;min-height:44px;background:#fff8df;color:#11192e;border:2px solid #11192e;border-radius:12px;font-weight:800;text-decoration:none}
.title-actions a{font-size:.85rem;display:grid;place-items:center}
#debug-result-exit{display:block;width:100%;margin-top:10px}
#ranking-entry{width:100%;margin:0 0 10px;background:#dfd6ff}
#pause-button{position:absolute;z-index:9;right:122px;top:8px;min-height:38px;background:#11192eb8;color:white;border-color:#ffffff88;padding:5px 10px;font-size:.72rem;opacity:.72}
#pause-button:active{opacity:1}
dialog{width:min(620px,94vw);max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:#fff8df;color:#11192e;border:4px solid #30264d;border-radius:22px;padding:22px;box-shadow:0 15px 70px #0009;user-select:text;font-size:16px;line-height:1.65}
dialog::backdrop{background:#090e21cc;backdrop-filter:blur(4px)}
dialog h2{margin:0 0 12px;font-size:1.45rem;line-height:1.4}
dialog strong{color:#693bbd}dialog p{margin:12px 0}dialog button:disabled{opacity:.5}dialog .primary-button{background:#ffcf45;font-size:1rem;min-height:44px;box-shadow:none}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}#help-step{text-align:center;color:#675577}#help-copy{min-height:150px}
#pause-dialog{text-align:center}#pause-home{display:block;margin:16px auto 0}
#ranking-list{list-style:none;padding:0}#ranking-list li{display:grid;grid-template-columns:40px 1fr;gap:4px 12px;padding:12px 6px;border-bottom:1px solid #cbbde0}#ranking-list li span:last-child{grid-column:2;font-size:.85rem;color:#614976}
#ranking-self{padding:10px;background:#eadffd;border-radius:10px}#ranking-form{border-top:2px solid #d0c0dd;padding-top:12px}#ranking-form input{display:block;width:100%;font:inherit;padding:10px;border:2px solid #8b729f;border-radius:10px;background:white;user-select:text}#ranking-form small{display:block;margin:8px 0}#ranking-submit{width:100%}[aria-pressed=true]{background:#6b48ff!important;color:white!important}
.result-card{touch-action:pan-y;overscroll-behavior:contain}.title-copy{max-height:96dvh;overflow:auto;touch-action:pan-y}
@media (max-height:520px){.title-copy{top:50%;padding:8px 0}.title-copy h1{font-size:2rem}.title-actions{margin:8px 0}.keys{font-size:.7rem}dialog{padding:16px}#pause-button{top:8px}}
@media (orientation:portrait) and (max-width:700px){#rotate-notice{inset:auto 0 0;height:auto;padding:8px;display:flex;flex-direction:row;gap:8px;font-size:.75rem;pointer-events:none}#rotate-notice b{font-size:1.3rem}.title-copy{left:5%;right:5%;width:90%;top:46%;transform:translateY(-50%)}.title-copy h1{font-size:2.2rem}.title-art{opacity:.45}.game-hud{left:4px;right:4px;gap:3px}.bars label{grid-template-columns:22px 62px 26px;gap:3px}.bars{padding:6px}.stage-chip{padding:6px}.special-chip{max-width:100px;padding:6px}.special-chip b{font-size:.75rem}.controls{bottom:54px;gap:5px}.controls button{width:48px;height:48px;font-size:1.1rem}.controls .special{width:53px;height:53px}.left-controls{left:6px}.right-controls{right:6px}.picked-list{grid-template-columns:repeat(3,45px)}.picked-chip{width:45px;height:45px}.demon-note{padding:8px;font-size:.7rem}.demon-note b{font-size:1rem}.stat-cards{grid-template-columns:repeat(2,minmax(130px,1fr));right:3%;bottom:8%}.stat-cards span{font-size:.7rem;padding:5px;min-height:32px}.launch-note{bottom:3%;font-size:.8rem}.shop-header{grid-template-columns:1fr 1fr;padding:6px}.shop-header>div:nth-child(2){display:none}.shop-message{font-size:.75rem}.shop-products{grid-template-columns:repeat(2,1fr);bottom:7%}.product-card{grid-template-columns:42px 1fr}.product-card .shop-icon{width:42px;height:42px}.product-card strong{font-size:.8rem}}
.research-paper{background:repeating-linear-gradient(#fffef8 0 31px,#e5e2d8 31px 32px);border:1px solid #ccc8ba;border-radius:3px;box-shadow:5px 7px 0 #dbd7cb,0 16px 45px #0007;padding:24px 30px;max-height:94dvh}
.research-paper #result-title{font-size:1.7rem;letter-spacing:.12em;border-bottom:2px solid #263342;padding-bottom:12px;line-height:1.4}.research-paper .eyebrow{color:#53606a;font-size:.7rem}.paper-school{font-size:.8rem;letter-spacing:.14em;color:#53606a}
#grade-sheet{margin:12px 0 22px;padding-bottom:14px;border-bottom:2px solid #263342}#grade-sheet h3{font-size:1.2rem;margin:8px 0}.grade-mark{display:flex;align-items:baseline;justify-content:center;color:#c92e36;transform:rotate(-5deg);margin:12px auto;width:max-content;max-width:100%;border:4px solid #c92e36;border-radius:50%;padding:4px 24px 8px;line-height:1.1}.grade-mark strong{font-size:clamp(3.5rem,9vw,5rem);font-family:'Comic Sans MS',cursive}.grade-mark span{font-size:1rem;margin-left:8px}.teacher-comment{color:#be2835;font-weight:800;line-height:1.6;text-align:center}.grade-breakdown{border:1px solid #909ba2;padding:8px 12px;background:#fffefb}.grade-breakdown p{margin:5px 0;font-size:.85rem;line-height:1.6}#grade-points{border-top:1px dashed #aaa;padding-top:8px;color:#ba2632}#grade-sheet details{font-size:.76rem;line-height:1.7;margin-top:10px}#grade-sheet summary{cursor:pointer;padding:8px 0}.paper-best{text-align:right;font-size:.8rem;font-weight:800}.research-paper .result-grid>div{background:#fffefb;border:1px solid #909ba2;border-radius:0;color:#273643}.research-paper .result-grid b{color:#273643}.research-paper .result-grid span{color:#53606a}
.coach-overlay{position:absolute;z-index:90;inset:0;pointer-events:auto}.coach-spotlight{position:absolute;border:4px solid #ffdc52;border-radius:18px;box-shadow:0 0 0 200vmax #080d18bd,0 0 24px #ffdc52;transition:.25s;pointer-events:none}.coach-card{position:absolute;z-index:2;left:50%;bottom:18px;transform:translateX(-50%);width:min(650px,92vw);padding:16px 20px;background:#fff8df;border:4px solid #11192e;border-radius:20px;box-shadow:0 8px 0 #11192e;color:#11192e}.coach-card.coach-top{top:16px;bottom:auto}.coach-card h2{margin:5px 0;font-size:1.3rem}.coach-card p{margin:6px 0 12px;line-height:1.55}.coach-card>span{color:#6b48ff;font-size:.72rem;font-weight:900;letter-spacing:.08em}.coach-actions{display:flex;justify-content:flex-end;gap:9px}.coach-actions button{min-height:42px;padding:8px 15px;border:2px solid #11192e;border-radius:11px;background:#fff;font-weight:900}.coach-actions #coach-next{background:#ffcf45}
@media (orientation:landscape){.research-paper{width:min(1080px,96vw);height:min(510px,95vh);max-height:none;display:grid;grid-template-columns:minmax(360px,1.15fr) minmax(300px,.85fr);grid-template-rows:auto auto repeat(8,min-content);column-gap:24px;align-content:start;overflow:auto;padding:14px 24px}.research-paper>#result-eyebrow,.research-paper>#result-title{grid-column:1/-1}.research-paper>#result-eyebrow{margin:0}.research-paper>#result-title{margin:0 0 8px;padding-bottom:6px}.research-paper>#grade-sheet{grid-column:1;grid-row:3/12;margin:0;padding:0 20px 0 0;border-right:2px solid #263342;border-bottom:0}.research-paper>:not(#result-eyebrow):not(#result-title):not(#grade-sheet){grid-column:2}.research-paper .grade-mark{margin:5px auto;padding:0 20px 4px}.research-paper .grade-mark strong{font-size:3.4rem}.research-paper .teacher-comment{margin:5px 0;font-size:.88rem}.research-paper .grade-breakdown{padding:4px 8px}.research-paper .grade-breakdown p{margin:2px 0;font-size:.72rem}.research-paper #grade-sheet details{margin-top:4px}.research-paper .result-grid{margin-bottom:5px}.research-paper .death-cause,.research-paper .result-materials,.research-paper .record-row,.research-paper .shop-buttons{margin-top:3px;margin-bottom:5px}.research-paper .gold-earned{margin-bottom:5px}.research-paper .primary-button{min-height:2.65rem}.research-paper #ranking-entry,.research-paper #debug-result-exit{margin-top:4px;margin-bottom:4px;min-height:38px;padding:5px}}
@media (orientation:landscape) and (max-height:520px){.coach-card{padding:9px 16px}.coach-card h2{font-size:1.05rem}.coach-card p{font-size:.82rem;margin:3px 0 7px}.research-paper{height:96vh}}

/* スマホ縦向きでは表示領域を90度回し、横画面ゲームとして使う */
@media (orientation:portrait) and (max-width:700px){
  html,body{width:100%;height:100%;overflow:hidden}
  #app{
    position:fixed;left:50%;top:50%;
    width:100vh;height:100vw;
    width:100dvh;height:100dvw;
    transform:translate(-50%,-50%) rotate(90deg);
    transform-origin:center;
  }
  #rotate-notice{display:none!important}
  #app .topbar{height:58px;padding:6px 14px}
  #app .topbar strong{font-size:1.15rem}
  #app .mini-label{font-size:.6rem}
  #app .mix-count b{font-size:1.45rem}
  #app .mix-count i{height:24px;margin:0 7px}
  #app .lab{inset:58px 0 0}
  #app .conveyor-wrap{top:3%;height:34%}
  #app .conveyor-wrap>p{margin-bottom:5px;font-size:.72rem}
  #app .conveyor{height:100px}
  #app .conveyor:after{top:39px}
  #app .material{width:74px;height:74px;top:2px;border-radius:16px}
  #app .material:after{font-size:.58rem;padding:1px 5px}
  #app .drop-gate{bottom:-17px;min-width:82px;padding:5px 10px;font-size:.68rem}
  #app .drop-gate:before{width:88px;height:90px}
  #app .beaker-zone{top:50%;bottom:3%}
  #app .beaker{width:132px;height:144px;border-width:7px;border-radius:8px 8px 40px 40px}
  #app .beaker.size-medium{width:145px;height:152px}
  #app .beaker.size-large{width:158px;height:160px}
  #app .shine{left:14px;top:22px;width:9px;height:70px}
  /* 選んだ素材はビーカーの真上へ集め、回転後も横へ飛ばさない */
  #app .picked-list{left:50%;top:0;bottom:auto;transform:translateX(-50%);grid-template-columns:repeat(5,55px);gap:5px}
  #app .picked-chip{width:55px;height:55px;border-width:3px;border-radius:12px}
  #app .demon-note{right:1%;bottom:12%;padding:8px 11px;border-width:3px;font-size:.68rem}
  #app .demon-note b{font-size:1rem}
  #app .controls{--control-size:70px;--control-track:78px;bottom:max(var(--control-bottom),env(safe-area-inset-bottom));gap:4px}
  #app .controls button{width:var(--control-size);height:var(--control-size)}
  #app .controls .special{width:calc(var(--control-size) + 8px);height:calc(var(--control-size) + 8px)}
  #app .left-controls{left:max(var(--control-inset),env(safe-area-inset-left))}
  #app .right-controls{right:max(var(--control-inset),env(safe-area-inset-right))}

  /* 端末は縦判定のままなので、回転したゲーム内では横長の採点表を明示する */
  #app .research-paper{
    width:96%;height:96%;max-height:none;
    display:grid;grid-template-columns:minmax(330px,1.12fr) minmax(270px,.88fr);
    grid-template-rows:auto auto repeat(8,min-content);column-gap:16px;
    align-content:start;overflow:auto;padding:10px 16px;
    scrollbar-width:none;
  }
  #app .research-paper::-webkit-scrollbar{display:none}
  #app .research-paper>#result-eyebrow,#app .research-paper>#result-title{grid-column:1/-1}
  #app .research-paper>#result-eyebrow{margin:0}
  #app .research-paper>#result-title{margin:0 0 5px;padding-bottom:4px;font-size:1.35rem}
  #app .research-paper>#grade-sheet{grid-column:1;grid-row:3/12;margin:0;padding:0 14px 0 0;border-right:2px solid #263342;border-bottom:0}
  #app .research-paper>:not(#result-eyebrow):not(#result-title):not(#grade-sheet){grid-column:2}
  #app .research-paper .paper-school{margin:0;font-size:.68rem}
  #app .research-paper #grade-sheet h3{margin:2px 0;font-size:.95rem}
  #app .research-paper .grade-mark{margin:2px auto;padding:0 14px 3px;border-width:3px}
  #app .research-paper .grade-mark strong{font-size:2.65rem}
  #app .research-paper .grade-mark span{font-size:.78rem}
  #app .research-paper .teacher-comment{margin:3px 0;font-size:.76rem;line-height:1.35}
  #app .research-paper .grade-breakdown{padding:3px 7px}
  #app .research-paper .grade-breakdown p{margin:1px 0;font-size:.64rem;line-height:1.35}
  #app .research-paper #grade-sheet details{margin-top:2px;font-size:.65rem;line-height:1.4}
  #app .research-paper #grade-sheet summary{padding:3px 0}
  #app .research-paper .paper-best{margin:2px 0;font-size:.68rem}
  #app .research-paper .result-grid{margin-bottom:3px;gap:5px}
  #app .research-paper .result-grid>div{padding:4px 8px}
  #app .research-paper .result-grid b{font-size:1.1rem}
  #app .research-paper .death-cause,#app .research-paper .result-materials,#app .research-paper .record-row,#app .research-paper .shop-buttons{margin-top:2px;margin-bottom:3px}
  #app .research-paper .death-cause{font-size:.72rem;line-height:1.2}
  #app .research-paper .gold-earned{min-height:34px;margin-bottom:2px;padding:2px 8px}
  #app .research-paper .gold-earned b{font-size:1.1rem}
  #app .research-paper .result-materials .sprite-icon{width:34px;height:34px;border-width:3px;border-radius:9px}
  #app .research-paper .result-label{font-size:.62rem;line-height:1}
  #app .research-paper .record-row{padding:4px 8px;font-size:.68rem}
  #app .research-paper .shop-buttons{gap:5px}
  #app .research-paper .shop-buttons button{padding:6px;font-size:.72rem;box-shadow:0 2px 0 var(--ink)}
  #app .research-paper .primary-button{height:32px;min-height:32px;margin:1px 0!important;padding:2px!important;font-size:.74rem}
  #app .research-paper #ranking-entry,#app .research-paper #debug-result-exit{height:30px;min-height:30px;margin:1px 0!important;padding:2px;font-size:.7rem}

  #app .coach-card{width:min(650px,92%);padding:9px 14px;bottom:9px}
  #app .coach-card.coach-top{top:9px}
  #app .coach-card h2{font-size:1rem;margin:3px 0}
  #app .coach-card p{font-size:.76rem;line-height:1.35;margin:3px 0 6px}
  #app .coach-actions button{min-height:34px;padding:5px 11px;font-size:.72rem}

  /* dialogはappの外にあるので、それぞれを同じ向きへ回す */
  dialog{
    position:fixed;left:50%;top:50%;margin:0;
    width:min(620px,92dvh);max-height:92dvw;
    transform:translate(-50%,-50%) rotate(90deg);
    padding:14px;font-size:13px;line-height:1.45;
  }
  dialog h2{font-size:1.15rem;margin-bottom:6px}
  dialog p{margin:7px 0}
  #help-copy{min-height:90px}
  #pause-dialog[open]{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;width:min(560px,88dvh);text-align:center}
  #pause-dialog h2,#pause-dialog p{grid-column:1/-1;margin:2px 0}
  #pause-dialog .control-position-settings{grid-column:1/-1}
  #pause-dialog #pause-home{display:block;margin:0}
  #pause-dialog button{width:100%;margin:0;min-height:42px;padding:6px 10px}
  #ranking-form input{font-size:16px}
}

.control-position-settings{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;padding:9px;border:2px solid #8b729f;border-radius:12px;background:#eee5fa;text-align:left}
.control-position-settings>strong,.control-position-settings>button{grid-column:1/-1}
.control-position-settings label{display:grid;grid-template-columns:auto 1fr 2.4em;align-items:center;gap:6px;font-size:.78rem;font-weight:900}
.control-position-settings input{width:100%;touch-action:pan-x;user-select:auto}
.control-position-settings output{text-align:right;color:#693bbd}
.control-position-settings button{min-height:34px!important;padding:4px 8px!important;background:#fff!important;font-size:.72rem}