:root{
  --pink:#e0527a; --pink-d:#a8355a; --sun:#f6b500; --sun-d:#b88600; --violet:#8b7cf6; --violet-d:#5b4bc4; --violet-l:#e9e5ff;
  --river:#6cc3cf; --river-d:#0d7a86; --navy:#2e2a52; --ink:#24343a; --paper:#fffdf8; --green:#3fae6b;
  --round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  --gh:min(19vh,140px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--navy);color:var(--ink);font-family:var(--round);overscroll-behavior:none}
body{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{font-family:inherit;cursor:pointer;color:var(--ink)}
button:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
img{-webkit-user-drag:none}
#app{position:fixed;inset:0;overflow:hidden}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}
[hidden]{display:none!important}

.big-btn{font-size:clamp(18px,3.2vmin,28px);font-weight:800;color:#fff;background:var(--pink);border:0;border-radius:999px;padding:.5em 1.5em;box-shadow:0 6px 0 var(--pink-d);transition:transform .08s}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--pink-d)}
.big-btn.sub{background:var(--river-d);box-shadow:0 6px 0 #075760}
.big-btn.gray{background:#fff;color:var(--ink);box-shadow:0 6px 0 #b9b5d6}
.big-btn:disabled{opacity:.4;pointer-events:none}
.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:#fff;font-size:22px;font-weight:800;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.icon-btn.off{opacity:.45}

/* タイトル */
#s-title{background:var(--navy) url(img/bg_studio.jpg) center/cover}
#s-title::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(46,42,82,.35),rgba(46,42,82,.75))}
.title-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6vh;text-align:center;padding:16px}
.title-logo-img{width:min(26vmin,190px);border-radius:20px;padding:6px 12px;background:#fff}
.title-sub{margin:0;font-weight:800;font-size:clamp(13px,2.4vmin,19px);color:#fff;background:rgba(255,255,255,.18);padding:.3em 1em;border-radius:999px}
.title-logo{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .3em;font-size:clamp(40px,10vmin,96px);line-height:1.05;font-weight:800;color:var(--sun);-webkit-text-stroke:.1em var(--navy);paint-order:stroke fill}
.title-logo span:nth-child(2){color:#fff}
.title-lead{margin:0;color:#fff;font-weight:800;font-size:clamp(14px,2.6vmin,21px);line-height:1.6}
.title-lead b{color:var(--sun);font-size:1.25em}
.title-chars{display:flex;align-items:flex-end;gap:2vmin}
.title-chars img{height:min(24vh,190px)}

/* 本編 */
#s-main{background:#d9d3ff url(img/bg_studio.jpg) center/cover}
#s-main::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.45)}
.topbar{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:10px;right:10px;display:flex;align-items:center;gap:8px;z-index:5}
.top-logo{height:36px;border-radius:10px;background:#fff;padding:3px 6px}
.jobs{flex:1;display:flex;justify-content:center;gap:4px;margin:0;padding:0;list-style:none;min-width:0}
.jobs li{background:rgba(255,255,255,.7);border-radius:999px;padding:.3em .8em;font-size:clamp(11px,1.9vmin,15px);font-weight:800;opacity:.6;white-space:nowrap}
.jobs li.now{opacity:1;background:var(--navy);color:#fff}
.jobs li.done{opacity:1;background:#fff}
.jobs li.done::before{content:"✓ ";color:var(--green)}
.timer{flex:none;background:var(--navy);color:#fff;font-weight:800;font-size:clamp(15px,2.6vmin,22px);border-radius:999px;padding:.25em .8em;font-variant-numeric:tabular-nums}
.timer.warn{background:var(--pink);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}

.panel{position:absolute;z-index:2;top:calc(env(safe-area-inset-top) + 62px);left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + var(--gh) + 10px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6vmin}
.h2{margin:0;font-size:clamp(18px,3.6vmin,30px);font-weight:800;background:#fff;border-radius:999px;padding:.2em 1em;box-shadow:0 4px 0 var(--violet);text-align:center}
.note{margin:0;font-weight:800;font-size:clamp(13px,2.3vmin,18px);text-align:center}

.guide{position:absolute;left:8px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 4px);z-index:6;pointer-events:none;display:flex;align-items:flex-end;gap:10px}
.guide-img{height:var(--gh);flex:none;filter:drop-shadow(0 4px 0 rgba(0,0,0,.12))}
.guide.talk .guide-img{animation:talk .35s ease-in-out infinite alternate}
@keyframes talk{to{transform:translateY(-4px) rotate(1deg)}}
.bubble{position:relative;margin-bottom:8px;max-width:min(100%,820px);background:#fff;border:3px solid var(--ink);border-radius:20px;padding:.45em .9em;font-size:clamp(14px,2.5vmin,20px);font-weight:800;line-height:1.45;box-shadow:0 4px 0 rgba(0,0,0,.15);opacity:0;transition:.15s}
.bubble.show{opacity:1}
.bubble b{display:block;font-size:.72em;color:var(--violet-d)}
.bubble b:empty{display:none}

/* 企画 */
.plan{display:grid;grid-template-columns:1fr 1fr;gap:1.4vmin 2vmin;width:min(100%,980px)}
.q{background:rgba(255,255,255,.92);border-radius:18px;padding:1vmin 1.4vmin;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.q h3{margin:0 0 .6vmin;font-size:clamp(14px,2.4vmin,19px)}
.opts{display:flex;gap:1vmin}
.opt{flex:1;border:3px solid transparent;border-radius:14px;background:var(--violet-l);padding:.6vmin;font-weight:800;font-size:clamp(12px,2.1vmin,16px);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.opt img{width:100%;height:min(8vh,64px);object-fit:contain}
.opt img.wide{object-fit:cover;border-radius:8px}
.opt small{font-weight:500;font-size:.8em;opacity:.8}
.opt.sel{border-color:var(--pink);background:#fff;transform:scale(1.04)}
.doc{background:#fff;border-radius:18px;padding:1.6vmin 2.4vmin;box-shadow:0 8px 0 rgba(0,0,0,.12);width:min(92%,620px);position:relative;animation:pop .5s}
.doc h3{margin:0 0 .4em;font-size:clamp(20px,4vmin,34px);color:var(--violet-d)}
.doc p{margin:.25em 0;font-weight:800;font-size:clamp(13px,2.4vmin,19px)}
.doc .stamp{position:absolute;right:16px;top:12px;border:5px solid var(--pink);color:var(--pink);border-radius:50%;width:84px;height:84px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;transform:rotate(-14deg);animation:stamp .4s .3s both}
@keyframes stamp{from{transform:scale(2.4) rotate(-14deg);opacity:0}}
@keyframes pop{40%{transform:scale(1.05)}}

/* エディタ・プレイ共通 */
.work{display:flex;gap:1.4vmin;width:100%;height:100%;min-height:0}
.stagebox{flex:1;min-width:0;display:flex;flex-direction:column;gap:1vmin}
.stagebox{justify-content:center}
.stagebox canvas.edit{flex:none;aspect-ratio:24/9;height:auto;max-height:100%}
.stagebox canvas{flex:1;min-height:0;width:100%;border-radius:16px;background:#9fd8ef;box-shadow:0 5px 0 rgba(0,0,0,.15);touch-action:none}
.side{width:min(25vw,230px);flex:none;display:flex;flex-direction:column;gap:1vmin;min-height:0;overflow:auto}
.card{background:rgba(255,255,255,.94);border-radius:16px;padding:1vmin 1.2vmin;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.card h4{margin:0 0 .5vmin;font-size:clamp(13px,2.2vmin,17px)}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:.8vmin}
.tool{border:3px solid transparent;border-radius:12px;background:var(--violet-l);padding:2px;font-size:clamp(10px,1.7vmin,13px);font-weight:800;display:flex;flex-direction:column;align-items:center}
.tool img,.tool .ico{width:min(6vmin,40px);height:min(6vmin,40px);object-fit:contain;font-size:min(5vmin,32px);line-height:min(6vmin,40px)}
.tool.sel{border-color:var(--pink);background:#fff}
.tool.lock{opacity:.3;pointer-events:none}
.tool.new{animation:pulse .8s infinite;border-color:var(--sun)}
.mission li{font-weight:800;font-size:clamp(12px,2vmin,16px);list-style:none;margin:.2em 0}
.mission ul{margin:0;padding:0}
.mission li::before{content:"☐ "}
.mission li.ok{color:var(--green)}
.mission li.ok::before{content:"☑ "}
.row{display:flex;gap:1.2vmin;flex-wrap:wrap;justify-content:center;align-items:center}

/* プログラム */
.prog{display:grid;grid-template-columns:1fr 1.25fr;gap:1.6vmin;width:min(100%,1000px)}
.rule{background:#fff;border-radius:16px;padding:1.2vmin 1.4vmin;box-shadow:0 4px 0 rgba(0,0,0,.1);margin-bottom:1.2vmin}
.when{display:inline-block;background:var(--sun);color:#fff;font-weight:800;border-radius:10px 10px 10px 2px;padding:.2em .7em;font-size:clamp(13px,2.2vmin,17px);box-shadow:0 3px 0 var(--sun-d)}
.choices{display:flex;flex-wrap:wrap;gap:.8vmin;margin-top:.8vmin;padding-left:1.2em;border-left:6px solid var(--sun)}
.choice{border:0;border-radius:10px;background:var(--violet-l);font-weight:800;font-size:clamp(12px,2.1vmin,16px);padding:.35em .8em}
.choice.sel{background:var(--violet);color:#fff;box-shadow:0 3px 0 var(--violet-d)}
.code-slots{display:flex;flex-wrap:wrap;gap:6px;background:var(--violet-l);border-radius:12px;padding:8px;min-height:62px;margin:.8vmin 0;border-left:6px solid var(--river-d)}
.cmd{border:0;border-radius:10px;background:var(--river-d);color:#fff;font-weight:800;font-size:clamp(12px,2.1vmin,16px);padding:.4em .7em;box-shadow:0 3px 0 #075760}
.cmd.run{background:var(--sun);box-shadow:0 3px 0 var(--sun-d)}
.slot-empty{color:#8a85b0;font-weight:800;font-size:13px;align-self:center}
.loop{display:flex;align-items:center;gap:8px;font-weight:800;font-size:clamp(13px,2.2vmin,17px)}
.loop input{width:24px;height:24px}
.preview{width:100%;height:min(15vh,110px);border-radius:12px;background:#bfe3c9;display:block}

/* プレイ */
.hud{display:flex;gap:1vmin;align-items:center;flex-wrap:wrap}
.hud span{background:#fff;border-radius:999px;padding:.15em .8em;font-weight:800;font-size:clamp(14px,2.4vmin,19px);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.hud .clear-badge{background:var(--green);color:#fff}
.pad{display:flex;justify-content:space-between;gap:1vmin}
.pad button{width:min(15vmin,96px);height:min(11vmin,70px);border-radius:16px;border:0;background:rgba(46,42,82,.85);color:#fff;font-size:min(6vmin,36px);font-weight:800;touch-action:none}
.pad .jump{width:min(24vmin,160px);background:var(--pink)}
.seg{display:flex;gap:4px}
.seg button{flex:1;border:0;border-radius:10px;background:var(--violet-l);font-weight:800;font-size:clamp(11px,1.9vmin,15px);padding:.4em .2em}
.seg button.sel{background:var(--violet);color:#fff}

/* デバッグ */
.dbg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:2vmin;width:min(100%,960px);align-items:start}
.report{background:#fff;border-radius:16px;padding:1.4vmin 1.8vmin;box-shadow:0 4px 0 rgba(0,0,0,.1);display:flex;gap:1.2vmin;align-items:center}
.report img{width:min(12vmin,80px)}
.report p{margin:0;font-weight:800;font-size:clamp(14px,2.5vmin,20px);line-height:1.5}
.report small{display:block;color:var(--pink);font-size:.75em}
.code{background:#1f1c3a;border-radius:16px;padding:1.2vmin;display:flex;flex-direction:column;gap:6px;box-shadow:0 5px 0 rgba(0,0,0,.2)}
.line{border:0;text-align:left;border-radius:10px;background:#2f2b55;color:#fff;font-weight:800;font-size:clamp(13px,2.4vmin,19px);padding:.45em .7em;display:flex;gap:.6em}
.line i{font-style:normal;color:#8a85b0;width:1.2em;flex:none}
.line.ind1{margin-left:1.4em}.line.ind2{margin-left:2.8em}
.line.ng{animation:shake .4s;background:#55304a}
.line.fixed{background:var(--green)}
.line.bad{background:var(--pink)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fixopts{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.fixopts .note{color:var(--sun);text-align:left}
.fixopts .line{background:#3d3870;border:2px dashed #8a85b0}

/* テスター */
.testers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vmin;width:min(100%,900px)}
.tester{background:#fff;border-radius:20px;padding:1.2vmin;text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.12);transition:.2s;opacity:.55}
.tester.done{opacity:1}
.tester.on{opacity:1;transform:translateY(-6px);box-shadow:0 9px 0 var(--violet)}
.tester img{height:min(16vh,120px)}
.tester h4{margin:.2em 0;font-size:clamp(13px,2.3vmin,18px)}
.tester .stars{color:var(--sun);font-size:clamp(20px,4vmin,32px);-webkit-text-stroke:1px var(--ink);min-height:1.3em;letter-spacing:.05em}
.tester .say{font-weight:800;font-size:clamp(12px,2.1vmin,16px);min-height:2.6em}
.bar{height:12px;border-radius:999px;background:#eee;overflow:hidden}
.bar i{display:block;height:100%;background:var(--sun);width:0;transition:width 1.4s}

/* 発売 */
.result{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.2vmin;text-align:center}
.board{position:relative;width:min(80vmin,620px)}
.board img{width:100%}
.board .inner{position:absolute;inset:18% 12% 10%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rank{font-size:clamp(70px,18vmin,150px);font-weight:800;line-height:1;color:var(--sun);-webkit-text-stroke:.06em var(--navy);paint-order:stroke fill;animation:stamp .5s}
.rank-sub{font-weight:800;font-size:clamp(14px,2.6vmin,22px);background:#fff;border-radius:999px;padding:.15em .9em}
.sales{font-size:clamp(18px,3.6vmin,30px);font-weight:800;background:#fff;border-radius:16px;padding:.2em .9em;box-shadow:0 4px 0 var(--violet)}
.sales b{color:var(--pink)}
.titlebadge{background:var(--navy);color:#fff;font-weight:800;border-radius:999px;padding:.3em 1.1em;font-size:clamp(15px,2.8vmin,22px)}
.breakdown{display:flex;gap:1vmin;flex-wrap:wrap;justify-content:center}
.breakdown span{background:#fff;border-radius:10px;padding:.15em .7em;font-weight:800;font-size:clamp(11px,2vmin,15px)}

.confetti{position:fixed;top:-20px;width:12px;height:18px;z-index:20;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.flash-msg{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);z-index:30;background:var(--navy);color:#fff;font-weight:800;font-size:clamp(24px,6vmin,52px);padding:.4em 1.2em;border-radius:24px;animation:pop .5s;pointer-events:none}

/* 縦向きのときは横向きの案内（ゲームは横向き専用） */
#rotate{display:none}
@media (orientation:portrait) and (max-width:1024px){
  #rotate{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#2e2a52;color:#fff;text-align:center;padding:24px;font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif}
  #rotate p{margin:0;font-size:30px;font-weight:800}
  #rotate small{font-size:16px;opacity:.85}
  .rot-phone{font-size:90px;animation:rot 2s ease-in-out infinite}
  #app{visibility:hidden}
}
@keyframes rot{0%,25%{transform:rotate(0)}50%,75%{transform:rotate(-90deg)}100%{transform:rotate(0)}}

/* スマホ横向きなど背の低い画面 */
@media (orientation:landscape) and (max-height:520px){
  :root{--gh:min(23vh,88px)}
  .topbar{top:calc(env(safe-area-inset-top) + 4px);gap:6px}
  .top-logo{height:26px;padding:2px 4px}
  .jobs{gap:3px}
  .jobs li{font-size:10px;padding:.2em .5em}
  .timer{font-size:13px;padding:.2em .6em}
  .icon-btn{width:32px;height:32px;font-size:16px}
  .panel{top:calc(env(safe-area-inset-top) + 40px);gap:5px;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}
  .h2{font-size:15px;padding:.15em .8em;box-shadow:0 3px 0 var(--violet)}
  .note{font-size:11px}
  .bubble{font-size:12.5px;padding:.3em .7em;margin-bottom:3px;border-width:2px;line-height:1.35}
  .bubble b{font-size:10px}
  .big-btn{font-size:15px;padding:.4em 1.1em;box-shadow:0 4px 0 var(--pink-d)}
  .big-btn.gray{box-shadow:0 4px 0 #b9b5d6}
  /* 企画 */
  .plan{gap:5px 8px}
  .q{padding:4px 8px;border-radius:12px}
  .q h3{font-size:12px;margin-bottom:2px}
  .opt{font-size:11px;padding:2px;border-width:2px}
  .opt img{height:26px}
  .opt small{display:none}
  .doc{padding:8px 14px}
  .doc h3{font-size:18px}
  .doc p{font-size:12px}
  .doc .stamp{width:56px;height:56px;font-size:16px;border-width:3px}
  /* ステージ・プレイ */
  .work{gap:6px}
  .side{width:min(30vw,220px);gap:4px}
  .card{padding:4px 7px;border-radius:12px}
  .card h4{font-size:11px;margin-bottom:2px}
  .tools{gap:3px}
  .tool{font-size:9px;border-width:2px;padding:1px}
  .tool img,.tool .ico{width:22px;height:22px;font-size:18px;line-height:22px}
  .mission li{font-size:10.5px;margin:0}
  .stagebox{gap:4px}
  .stagebox > .note{display:none}
  .hud{gap:4px}
  .hud span{font-size:11px;padding:.1em .6em}
  .stagebox{position:relative}
  .pad{position:absolute;left:6px;right:6px;bottom:6px;pointer-events:none}
  .pad button{pointer-events:auto;opacity:.8;width:56px;height:44px;font-size:22px;border-radius:12px}
  .pad .jump{width:110px;font-size:18px}
  .seg button{font-size:10.5px;padding:.3em .1em}
  .side .big-btn{font-size:13px}
  /* プログラム */
  .prog{gap:6px}
  .rule{padding:5px 8px;margin-bottom:5px;border-radius:12px}
  .when{font-size:12px}
  .choices{gap:4px;margin-top:4px}
  .choice,.cmd{font-size:11px;padding:.3em .6em}
  .code-slots{min-height:38px;padding:5px;margin:4px 0}
  .loop{font-size:12px}
  .preview{height:52px}
  /* デバッグ */
  .dbg{gap:8px}
  .report{padding:6px 10px}
  .report img{width:46px}
  .report p{font-size:13px}
  .code{padding:6px;gap:4px}
  .line{font-size:12.5px;padding:.3em .6em}
  /* テスター・発売 */
  .tester{padding:5px}
  .tester img{height:min(14vh,56px)}
  .tester h4{font-size:12px}
  .tester .stars{font-size:18px}
  .tester .say{font-size:11px;min-height:2.4em}
  .board{width:min(46vh,300px)}
  .rank{font-size:56px}
  .rank-sub{font-size:12px}
  .sales{font-size:16px}
  .titlebadge{font-size:13px}
  .breakdown span{font-size:10px}
  .result{gap:4px}
}