:root{
  --grass:#bfe3c9; --river:#6cc3cf; --river-d:#0d7a86; --pink:#e0527a; --pink-d:#a8355a;
  --sun:#f6b500; --violet:#8b7cf6; --violet-d:#5b4bc4; --violet-l:#e9e5ff;
  --ink:#24343a; --paper:#fffdf8;
  --round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--violet-l);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}
.fallback{display:inline-flex;align-items:center;justify-content:center;font-size:clamp(40px,10vmin,90px)}

/* ボタン */
.big-btn{font-size:clamp(20px,3.6vmin,30px);font-weight:800;color:#fff;background:var(--pink);border:0;border-radius:999px;padding:.55em 1.6em;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:disabled{opacity:.4}
.icon-btn{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#fff;font-size:24px;font-weight:800;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.icon-btn.off{opacity:.45}

/* タイトル */
#s-title{background:#cfc7ff url(img/bg_studio.jpg) center/cover}
#s-title::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.3)}
.title-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;text-align:center;padding:16px}
.title-sub{margin:0;font-weight:800;font-size:clamp(15px,2.8vmin,22px);background:#fff;padding:.35em 1.1em;border-radius:999px}
.title-logo{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .3em;font-size:clamp(44px,11vmin,104px);line-height:1.05;font-weight:800;color:#fff;-webkit-text-stroke:.12em var(--ink);paint-order:stroke fill}
.title-logo span:nth-child(1){color:var(--violet)}
.title-logo span:nth-child(2){color:var(--pink)}
.title-creator{height:min(34vh,300px);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}

.title-logo-img{width:min(34vmin,240px);border-radius:24px;padding:8px 14px;background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.12)}

/* オープニング */
#s-main.opening .topbar .jobs{visibility:hidden}
#s-main.opening::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55)}
.opening-box{display:flex;flex-direction:column;align-items:center;gap:3vmin}
.logo-card{background:#fff;border-radius:36px;padding:2vmin 4vmin;box-shadow:0 10px 0 rgba(0,0,0,.12),0 0 0 8px #fff8;animation:logoIn 1s cubic-bezier(.3,1.6,.5,1) both}
.logo-card img{display:block;width:min(64vmin,480px);height:auto}
@keyframes logoIn{0%{transform:scale(0) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6vmin}
.chip{background:var(--violet);color:#fff;font-weight:800;font-size:clamp(16px,3.4vmin,28px);border-radius:999px;padding:.3em 1em;box-shadow:0 5px 0 var(--violet-d);opacity:0;animation:chipIn .5s cubic-bezier(.3,1.6,.5,1) forwards}
.chip:nth-child(2){background:var(--river-d);box-shadow:0 5px 0 #075760}
.chip:nth-child(3){background:var(--pink);box-shadow:0 5px 0 var(--pink-d)}
@keyframes chipIn{from{opacity:0;transform:translateY(20px) scale(.6)}to{opacity:1;transform:none}}
.big-btn.go{opacity:0;pointer-events:none;transition:opacity .3s}
.big-btn.go.show{opacity:1;pointer-events:auto;animation:pop .6s}

/* 本編 */
#s-main{background:#cfc7ff url(img/bg_studio.jpg) center/cover}
.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}
.jobs{flex:1;display:flex;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.jobs li{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.75);border-radius:14px;padding:4px 6px;min-width:58px;font-size:12px;font-weight:800;opacity:.55;transition:.2s}
.jobs li img,.jobs li .fallback{width:34px;height:34px;object-fit:contain;font-size:26px}
.jobs li.now{opacity:1;background:#fff;transform:scale(1.12);box-shadow:0 3px 0 var(--violet)}
.jobs li.done{opacity:1}
.jobs li.done::after{content:"✓";position:absolute;margin:-6px 0 0 38px;background:var(--pink);color:#fff;border-radius:50%;width:20px;height:20px;font-size:13px;line-height:20px;text-align:center}
.jobs li{position:relative}

.panel{--gw:calc(min(30vh,220px) * .72);position:absolute;top:calc(env(safe-area-inset-top) + 76px);left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 84px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2vmin;padding-left:var(--gw)}
.panel.full{padding-left:0;bottom:calc(env(safe-area-inset-bottom) + min(18vh,120px) + 8px)}
.job-title{margin:0;font-size:clamp(20px,4.4vmin,38px);font-weight:800;background:#fff;border-radius:999px;padding:.2em 1em;box-shadow:0 4px 0 var(--violet);text-align:center}

.guide{--gh:min(30vh,220px);position:absolute;left:6px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 6px);z-index:6;pointer-events:none;display:flex;align-items:flex-end;gap:8px}
.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:6px;max-width:min(100%,760px);background:#fff;border:3px solid var(--ink);border-radius:22px;padding:.5em .9em;font-size:clamp(15px,2.8vmin,22px);font-weight:800;line-height:1.45;box-shadow:0 4px 0 rgba(0,0,0,.15);opacity:0;transform:scale(.9);transition:.15s;transform-origin:left bottom}
.bubble::before{content:"";position:absolute;left:-14px;bottom:18px;border:8px solid transparent;border-right:8px solid var(--ink)}
.bubble.show{opacity:1;transform:none}
.guide.small{--gh:min(18vh,120px)}
.guide.small .bubble{font-size:clamp(13px,2.4vmin,18px)}

/* 選択カード */
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4vmin}
.card{background:#fff;border:4px solid transparent;border-radius:24px;padding:1.4vmin;width:min(26vmin,210px);display:flex;flex-direction:column;align-items:center;gap:.8vmin;font-size:clamp(15px,2.8vmin,22px);font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.14);transition:transform .1s}
.card:active{transform:scale(.96)}
.card.sel{border-color:var(--pink);transform:scale(1.05)}
.card img{width:100%;aspect-ratio:1;object-fit:contain}
.card.wide{width:min(34vmin,280px)}
.card.wide img{aspect-ratio:3/2;object-fit:cover;border-radius:14px}

/* デザイン */
.design{display:flex;align-items:center;gap:4vmin;flex-wrap:wrap;justify-content:center}
.design-hero{width:min(42vmin,340px);aspect-ratio:1;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 rgba(0,0,0,.14)}
.design-hero img{width:80%;height:80%;object-fit:contain;transition:filter .3s}
.design-hero.pop img{animation:pop .4s}
@keyframes pop{40%{transform:scale(1.15) rotate(-4deg)}}
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:2vmin}
.swatch{width:min(13vmin,92px);height:min(13vmin,92px);border-radius:50%;border:5px solid #fff;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.swatch.sel{outline:5px solid var(--ink)}

/* プログラミング */
.prog{display:flex;flex-direction:column;align-items:center;gap:1.8vmin}
.grid{display:grid;gap:4px;background:#2e2a52;padding:6px;border-radius:18px;position:relative}
.cell{width:min(10vmin,13vh,84px);aspect-ratio:1;background:#bfe3c9;border-radius:10px;position:relative}
.cell:nth-child(odd){background:#b1dbbd}
.cell img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.grid .piece{position:absolute;left:0;top:0;transition:transform .32s ease-in-out;pointer-events:none}
.grid .piece img{width:100%;height:100%;object-fit:contain}
.grid .piece.bump{animation:shake .4s}
@keyframes shake{25%{translate:-6px}75%{translate:6px}}
.slots{display:flex;gap:6px;background:#fff;padding:8px;border-radius:16px;min-height:calc(min(7.5vmin,58px) + 16px)}
.slot{width:min(7.5vmin,58px);height:min(7.5vmin,58px);border-radius:12px;border:3px dashed #c8c2ef;display:flex;align-items:center;justify-content:center;font-size:min(6vmin,42px);font-weight:800;background:#faf9ff}
.slot.on{border:0;background:var(--violet);color:#fff;box-shadow:0 4px 0 var(--violet-d)}
.slot.run{background:var(--sun);box-shadow:0 4px 0 #b88600}
.arrows{display:flex;gap:1.6vmin;align-items:center}
.arrow{width:min(10.5vmin,76px);height:min(10.5vmin,76px);border-radius:18px;border:0;background:var(--violet);color:#fff;font-size:min(7vmin,46px);font-weight:800;box-shadow:0 6px 0 var(--violet-d)}
.arrow:active{transform:translateY(4px);box-shadow:0 2px 0 var(--violet-d)}
.arrow.del{background:#fff;color:var(--ink);box-shadow:0 6px 0 #bbb;font-size:min(5vmin,32px)}
.arrows .run{margin-left:1.5vmin;padding:.45em 1.1em}
.prog-count{font-weight:800;font-size:clamp(14px,2.6vmin,20px);background:#fff;border-radius:999px;padding:.15em .9em}

/* サウンド */
.music{display:flex;flex-direction:column;align-items:center;gap:.6vmin}
.music .note{font-size:min(12vmin,90px);line-height:1.2}
.music.playing .note{animation:pop .5s infinite}
.music .listen{font-size:clamp(13px,2.4vmin,18px);font-weight:800;background:var(--river);color:#fff;border-radius:999px;padding:.2em .9em}

/* テストプレイ（ランナー） */
.runner{position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;background:#9fd8ef center/auto 100% repeat-x;box-shadow:0 6px 0 rgba(0,0,0,.15);touch-action:manipulation}
.runner.glitch{animation:glitch .25s steps(2) infinite}
@keyframes glitch{0%{filter:hue-rotate(0) saturate(1)}50%{filter:hue-rotate(90deg) saturate(2.2) contrast(1.2)}}
.runner .ent{position:absolute;pointer-events:none}
.runner .ent img{width:100%;height:100%;object-fit:contain}
.runner .bug{pointer-events:auto;cursor:pointer;animation:wob .4s ease-in-out infinite alternate}
@keyframes wob{to{transform:rotate(10deg) scale(1.08)}}
.runner .hero.hit{animation:blink .15s 5}
@keyframes blink{50%{opacity:.25}}
.hud{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.hud span{background:#fff;border-radius:999px;padding:.2em .9em;font-weight:800;font-size:clamp(15px,3vmin,24px);box-shadow:0 3px 0 rgba(0,0,0,.15);display:flex;align-items:center;gap:6px}
.hud img{width:1.3em;height:1.3em}
.progress{position:absolute;left:20px;right:20px;bottom:10px;height:12px;background:rgba(255,255,255,.7);border-radius:999px;z-index:3}
.progress i{display:block;height:100%;width:0;background:var(--pink);border-radius:999px}
.tap-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2vmin;background:rgba(255,255,255,.5);z-index:4;font-size:clamp(20px,4.4vmin,36px);font-weight:800}
.sparkle{position:absolute;pointer-events:none;font-size:34px;animation:spark .6s forwards}
@keyframes spark{to{transform:translateY(-40px) scale(1.6);opacity:0}}

/* リリース */
.release{display:flex;flex-direction:column;align-items:center;gap:1.6vmin;text-align:center}
.fans{width:min(70vmin,560px)}
.counter{font-size:clamp(22px,5vmin,44px);font-weight:800;background:#fff;border-radius:22px;padding:.2em .9em;box-shadow:0 5px 0 var(--violet)}
.counter b{color:var(--pink)}
.stars{font-size:clamp(28px,6vmin,52px);color:var(--sun);-webkit-text-stroke:2px var(--ink);letter-spacing:.1em}
.cert{background:#fff;border:6px solid var(--sun);border-radius:28px;padding:2.4vmin 4vmin;display:flex;align-items:center;gap:3vmin;box-shadow:0 8px 0 rgba(0,0,0,.15)}
.cert .badge{width:min(26vmin,200px);animation:pop 1s}
.cert h3{margin:0 0 .3em;font-size:clamp(22px,4.8vmin,40px)}
.cert p{margin:.2em 0;font-weight:800;font-size:clamp(14px,2.6vmin,20px)}
.cert .mini{display:flex;align-items:center;gap:8px;justify-content:center}
.cert .mini img{width:min(12vmin,90px);height:min(12vmin,90px);object-fit:contain}
.cert .mini .stage-thumb{width:min(18vmin,140px);height:min(12vmin,90px);object-fit:cover;border-radius:10px}
.row{display:flex;gap:2vmin;flex-wrap:wrap;justify-content:center}

.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)}}

/* 縦向きのときは横向きの案内（ゲームは横向き専用） */
#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){
  .topbar{top:calc(env(safe-area-inset-top) + 4px)}
  .icon-btn{width:36px;height:36px;font-size:18px}
  .jobs li{min-width:46px;padding:2px 4px;font-size:10px;border-radius:10px}
  .jobs li img,.jobs li .fallback{width:22px;height:22px;font-size:18px}
  .jobs li.now{transform:scale(1.05)}
  .panel{--gw:calc(min(30vh,220px) * .72);top:calc(env(safe-area-inset-top) + 52px);bottom:calc(env(safe-area-inset-bottom) + 50px);gap:1.4vh}
  .job-title{font-size:16px;box-shadow:0 3px 0 var(--violet)}
  .bubble{font-size:13px;padding:.3em .7em;border-width:2px;margin-bottom:2px}
  .big-btn{font-size:16px;padding:.4em 1.2em;box-shadow:0 4px 0 var(--pink-d)}
  .card{width:min(22vh*1.2,150px);padding:6px;font-size:13px}
  .card.wide{width:min(34vh*1.2,190px)}
  .cell{width:min(9vh,70px)}
  .slot{width:min(7.5vh,40px);height:min(7.5vh,40px);font-size:20px}
  .slots{min-height:calc(min(7.5vh,40px) + 12px);padding:5px}
  .arrow{width:min(10vh,52px);height:min(10vh,52px);font-size:24px;box-shadow:0 4px 0 var(--violet-d)}
  .arrow.del{font-size:14px}
  .prog{gap:1vh}
  .design-hero{width:min(42vh,200px)}
  .swatch{width:min(13vh,56px);height:min(13vh,56px)}
  .fans{width:min(48vh,300px)}
  .counter{font-size:18px}
  .stars{font-size:24px}
  .cert{padding:8px 16px}
  .cert .badge{width:min(26vh,110px)}
  .cert h3{font-size:20px}
  .cert p{font-size:12px}
}