/* ===================== 共通: スタイル ===================== */
:root{
  --ink:#1B1840; --navy:#1B1840;
  --pink:#FF4FA3; --cyan:#22D3EE; --yellow:#FFD43B; --green:#4ADE80; --orange:#FF8A3D; --purple:#A78BFA;
  --z:1; --lvw:1vw; --lvh:1vh; --lvmin:1vmin;
  --sat:calc(env(safe-area-inset-top,0px) / var(--z)); --sar:calc(env(safe-area-inset-right,0px) / var(--z));
  --sab:calc(env(safe-area-inset-bottom,0px) / var(--z)); --sal:calc(env(safe-area-inset-left,0px) / var(--z));
  --f-pop:"Mochiy Pop One","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  --outline:-3px -3px 0 var(--ink),3px -3px 0 var(--ink),-3px 3px 0 var(--ink),3px 3px 0 var(--ink),0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink),0 8px 0 var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0;
  touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--navy);color:#fff;font-family:var(--f-body);font-weight:700;
}
body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;}
button{font:inherit;color:inherit;}
/* 画面ぜんたい。スマホでは JS で縮める（View） */
#app{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;overflow:hidden;}
.screen{position:absolute;top:0;left:0;right:0;bottom:0;display:none;overflow:hidden;}
.screen.on{display:block;}

/* ボタン */
.btn{
  -webkit-appearance:none;appearance:none;border:4px solid var(--ink);border-radius:20px;background:var(--bc,#fff);color:var(--ink);
  font-family:var(--f-pop);font-size:24px;min-width:64px;min-height:64px;padding:8px 20px;box-shadow:0 6px 0 var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.15;cursor:pointer;
  transition:transform .06s,box-shadow .06s;position:relative;white-space:nowrap;
}
.btn.down{transform:translateY(5px);box-shadow:0 1px 0 var(--ink);}
.btn.big{min-height:88px;min-width:88px;font-size:30px;padding:12px 34px;border-radius:26px;}
.btn.locked{opacity:.45;}
.btn.sel{background:var(--yellow);}
.btn svg{pointer-events:none;}

/* オーバーレイ */
#fx{position:fixed;top:0;left:0;pointer-events:none;z-index:80;}
#banner{position:fixed;left:0;right:0;top:40%;text-align:center;pointer-events:none;z-index:70;font-family:var(--f-pop);
  font-size:clamp(48px,11vmin,120px);color:#FFE14D;opacity:0;text-shadow:var(--outline);transform-origin:50% 50%;}
#banner.go{animation:bannerPop 1.15s ease-out forwards;}
@keyframes bannerPop{0%{opacity:0;transform:scale(.4) rotate(-6deg)}15%{opacity:1;transform:scale(1.15) rotate(-3deg)}30%{transform:scale(1) rotate(-3deg)}78%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1.04) translateY(-24px) rotate(-3deg)}}
@keyframes bannerFade{0%{opacity:0}15%{opacity:1}78%{opacity:1}100%{opacity:0}}
#toast{position:absolute;z-index:40;left:50%;top:calc(var(--sat) + 100px);transform:translateX(-50%);background:#fff;color:var(--ink);
  border:4px solid var(--ink);border-radius:18px;padding:10px 22px;font-family:var(--f-pop);font-size:24px;white-space:nowrap;
  box-shadow:0 6px 0 var(--ink);pointer-events:none;opacity:0;transition:opacity .25s;}
#toast.on{opacity:1;}

/* ===================== ホーム: スタイル ===================== */
/* ホームは落ち着いた色: 生成り色の背景に、くすんだやさしい色のタイル */
#home{--hink:#2E2A4F;background:
  radial-gradient(rgba(46,42,79,.06) 1.5px,transparent 1.6px) 0 0/22px 22px,
  linear-gradient(170deg,#F7F3EC 0%,#EFEAE1 55%,#E6E4EE 100%);color:var(--hink);}
.home-inner{position:absolute;top:calc(var(--sat) + 10px);bottom:calc(var(--sab) + 10px);left:0;right:0;display:flex;flex-direction:column;align-items:stretch;}
.logo{font-family:var(--f-pop);font-size:clamp(26px,calc(var(--lvmin) * 4.6),46px);color:var(--hink);text-shadow:0 4px 0 rgba(46,42,79,.12);white-space:nowrap;letter-spacing:.02em;text-align:center;line-height:1.2;}
.logo span{display:inline-block;}
.logo .c1{color:#C9667E}.logo .c2{color:#3F8E99}
/* 横に並んだ4ページの帯（ここだけ横スクロールを許す） */
.strip{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;}
.strip::-webkit-scrollbar{display:none;}
.strip,.strip *{touch-action:pan-x;}
.hpage{flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;min-height:0;
  padding:4px calc(var(--sar) + 92px) 6px calc(var(--sal) + 92px);}
.hpage-name{font-family:var(--f-pop);font-size:clamp(20px,calc(var(--lvmin) * 3.2),32px);background:var(--pc,#fff);border:3px solid var(--hink);border-radius:999px;padding:2px 22px;margin:4px 0 10px;white-space:nowrap;}
.tiles{flex:1;min-height:0;width:100%;max-width:1100px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;}
.tile{-webkit-appearance:none;appearance:none;border:4px solid var(--hink);border-radius:26px;background:var(--c);box-shadow:0 6px 0 var(--hink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 12px;min-height:88px;min-width:88px;color:var(--hink);
  transition:transform .06s,box-shadow .06s;overflow:hidden;position:relative;cursor:pointer;}
.tile.down{transform:translateY(5px);box-shadow:0 1px 0 var(--hink);}
.tile .ic{flex:0 1 auto;min-height:0;height:52%;max-width:80%;filter:saturate(.8);display:flex;align-items:center;justify-content:center;}
.tile .ic svg{height:100%;width:auto;max-width:100%;display:block;}
.tile .tx{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;}
.tile .t{font-family:var(--f-pop);font-size:clamp(17px,calc(var(--lvw) * 3.1),34px);line-height:1.15;text-align:center;}
.tile .w{display:flex;gap:6px;}
.tile .w span{font-size:15px;background:rgba(255,255,255,.65);border:2px solid var(--hink);border-radius:999px;padding:1px 10px;}
.tile .b{font-size:15px;min-height:1.3em;}
@media (orientation:landscape){
  .tile{flex-direction:row;gap:16px;}
  .tile .ic{height:78%;max-width:46%;}
  .tile .tx{align-items:flex-start;flex:1;}
  .tile .t{text-align:left;font-size:clamp(17px,calc(var(--lvw) * 2.15),34px);}
}
.arrow{position:absolute;top:50%;margin-top:-40px;width:72px;height:80px;min-width:64px;padding:0;font-size:30px;z-index:6;border-radius:20px;
  background:#FBF9F5;color:var(--hink);border-color:var(--hink);box-shadow:0 5px 0 var(--hink);}
.arrow.hide{visibility:hidden;}
#arrow-prev{left:calc(var(--sal) + 10px);}
#arrow-next{right:calc(var(--sar) + 10px);}
.home-bottom{display:flex;align-items:center;justify-content:center;gap:22px;min-height:96px;position:relative;flex-wrap:wrap;padding:0 120px 0 16px;}
.dots{display:flex;gap:0;}
.dot{-webkit-appearance:none;appearance:none;border:0;background:transparent;width:64px;height:64px;padding:0;display:flex;align-items:center;justify-content:center;}
.dot i{display:block;width:18px;height:18px;border-radius:50%;border:3px solid var(--hink);background:#FBF9F5;transition:transform .2s;}
.dot.on i{background:var(--hink);transform:scale(1.25);}
.seg{display:flex;border:4px solid var(--hink);border-radius:26px;overflow:hidden;background:#FBF9F5;box-shadow:0 5px 0 var(--hink);}
.seg button{-webkit-appearance:none;appearance:none;border:0;background:#FBF9F5;color:var(--hink);font-family:var(--f-pop);font-size:23px;min-height:88px;min-width:122px;padding:0 16px;display:flex;align-items:center;justify-content:center;gap:6px;}
.seg button+button{border-left:4px solid var(--hink);}
.seg button.sel{background:var(--hink);color:#FBF9F5;}
.seg button svg{width:34px;height:34px;}
.gear-wrap{position:absolute;right:calc(var(--sar) + 14px);bottom:calc(var(--sab) + 12px);width:96px;height:96px;z-index:5;}
.gear{position:absolute;left:8px;top:8px;width:80px;height:80px;border-radius:50%;border:4px solid var(--hink);background:#FBF9F5;
  -webkit-appearance:none;appearance:none;padding:8px;display:flex;align-items:center;justify-content:center;}
.gear svg{width:100%;height:100%;}
.ring{position:absolute;left:0;top:0;width:96px;height:96px;transform:rotate(-90deg);pointer-events:none;}
.ring circle{fill:none;stroke-width:7;}
.ring .rg-bg{stroke:rgba(27,24,64,.0);}
.ring .rg-fg{stroke:#1B1840;stroke-linecap:round;}
/* せまい画面: ホームのボタンを少しつめる */
.low .hpage{padding-left:calc(var(--sal) + 84px);padding-right:calc(var(--sar) + 84px);}
.low .home-bottom{min-height:84px;}

/* ===================== ゲーム画面: 共通スタイル ===================== */
#game{background:var(--gbg,#1B1840);transition:background-color 1.2s;}
#stage{position:absolute;top:0;left:0;right:0;bottom:0;}
.icon-btn{position:absolute;z-index:20;width:76px;height:76px;padding:10px;border-radius:22px;}
#btn-back{top:calc(var(--sat) + 12px);left:calc(var(--sal) + 12px);}
#btn-mute{top:calc(var(--sat) + 12px);right:calc(var(--sar) + 12px);}
.icon-btn svg{width:100%;height:100%;}
#hud{position:absolute;z-index:10;top:calc(var(--sat) + 10px);left:100px;right:100px;text-align:center;pointer-events:none;font-family:var(--f-pop);text-shadow:var(--outline);}
#hud .h1{font-size:clamp(26px,calc(var(--lvmin) * 4.6),44px);color:#fff;}
#hud .h2{font-size:clamp(18px,calc(var(--lvmin) * 3),28px);color:#FFE14D;margin-top:6px;}
#interlude{position:absolute;top:0;left:0;right:0;bottom:0;z-index:30;background:rgba(15,12,40,.72);display:none;align-items:center;justify-content:center;}
#interlude.on{display:flex;}
.inter-card,.menu-card,.res-card,.set-card,.pop-card{background:#fff;color:var(--ink);border:5px solid var(--ink);border-radius:32px;box-shadow:0 10px 0 var(--ink);
  padding:24px 32px;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:calc(calc(var(--lvw) * 100) - 32px);}
.inter-text{font-family:var(--f-pop);font-size:clamp(34px,calc(var(--lvmin) * 7),64px);}
.menu{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 96px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);}
.menu-card{max-height:100%;overflow:hidden;}
/* 高さが足りない画面（横向きのスマホ）では、上の空きを減らして、左右で戻る・音ボタンをよける（ステージ選びはボタンを少し小さく） */
.low .menu:not(.wide){padding:calc(var(--sat) + 12px) calc(var(--sar) + 100px) calc(var(--sab) + 12px) calc(var(--sal) + 100px);}
.low .menu.wide{padding:calc(var(--sat) + 12px) calc(var(--sar) + 96px) calc(var(--sab) + 12px) calc(var(--sal) + 96px);}
.low .stage-grid{grid-template-columns:repeat(10,64px);gap:6px;}
.low .stage-btn{min-height:64px;font-size:22px;}
.low .menu-card{padding:18px 28px;gap:12px;}
.menu-title{font-family:var(--f-pop);font-size:clamp(28px,calc(var(--lvmin) * 5),46px);}
.menu-who{font-size:18px;background:#F1EEFF;border-radius:999px;padding:2px 14px;}
.menu-best{font-size:18px;color:#6B5FB0;min-height:1.2em;}
.menu-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.opt-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;}
.opt-label{font-family:var(--f-pop);font-size:20px;min-width:5em;text-align:right;}
.opt-seg{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.choice{font-size:22px;background:#EDEBFA;}
.choice.sel{background:var(--yellow);}
.stage-grid{display:grid;grid-template-columns:repeat(10,76px);gap:10px;}
@media (orientation:portrait){.stage-grid{grid-template-columns:repeat(6,76px);}}
@media (max-width:620px){.stage-grid{grid-template-columns:repeat(5,64px);}}
.stage-btn{flex-direction:column;gap:0;padding:4px;min-width:64px;min-height:76px;font-size:24px;border-radius:16px;background:#E6FBFF;}
.stage-btn .ss{font-size:13px;letter-spacing:-1px;color:#E09B00;font-family:var(--f-body);}
.stage-btn.cleared{background:#FFF3B0;}
.stage-btn.saved{outline:5px solid #4ADE80;outline-offset:2px;}
/* ゲームの中の小さな確認（「ほんとうにけす？」など） */
.pop{position:absolute;top:0;left:0;right:0;bottom:0;z-index:35;background:rgba(15,12,40,.6);display:flex;align-items:center;justify-content:center;}
.pop-title{font-family:var(--f-pop);font-size:clamp(26px,calc(var(--lvmin) * 5),40px);text-align:center;}
.pop-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
/* ゲームの横や下の操作パネル */
.gpanel{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;}
/* 上の表示の横の小さなボタン（もどす など）。せまい画面では右の下に */
.tool-btn{position:absolute;z-index:20;top:calc(var(--sat) + 18px);right:calc(var(--sar) + 100px);}
.tool-btn.l2{right:calc(var(--sar) + 196px);}
.low .tool-btn{top:calc(var(--sat) + 100px);right:calc(var(--sar) + 12px);}
.low .tool-btn.l2{top:calc(var(--sat) + 176px);right:calc(var(--sar) + 12px);}
.ginfo{font-family:var(--f-pop);font-size:22px;text-align:center;text-shadow:var(--outline);line-height:1.5;color:#fff;}
canvas.full{position:absolute;top:0;left:0;width:100%;height:100%;display:block;}

/* 結果画面 */
#result{background:radial-gradient(circle at 50% 35%,#3A2F86 0,#1B1840 70%);}
.res-wrap{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);}
.res-card{position:relative;min-width:min(520px,calc(calc(var(--lvw) * 100) - 32px));}
#res-title{font-family:var(--f-pop);font-size:clamp(30px,calc(var(--lvmin) * 6),54px);text-align:center;}
#res-big{font-family:var(--f-pop);font-size:clamp(60px,calc(var(--lvmin) * 15),130px);color:#FFD43B;text-shadow:var(--outline);line-height:1.05;text-align:center;}
#res-big small{font-size:.35em;color:#fff;}
#res-lines{font-size:clamp(18px,calc(var(--lvmin) * 3),24px);text-align:center;line-height:1.5;}
#res-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.badge{position:absolute;top:-22px;right:-14px;background:#FF4FA3;color:#fff;font-family:var(--f-pop);font-size:24px;padding:8px 16px;border:4px solid var(--ink);border-radius:18px;transform:rotate(8deg);display:none;}
.badge.on{display:block;animation:wob 1.6s ease-in-out infinite;}
@keyframes wob{0%,100%{transform:rotate(8deg) scale(1)}50%{transform:rotate(4deg) scale(1.08)}}

/* パッド（記憶・早押しで使う） */
.pad{-webkit-appearance:none;appearance:none;position:relative;width:var(--ps);height:var(--ps);border:6px solid var(--ink);border-radius:22%;background:var(--c);
  padding:0;margin:0;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 0 rgba(0,0,0,.45),inset 0 -10px 0 rgba(0,0,0,.18);filter:brightness(.68) saturate(.85);
  transition:filter .14s,transform .14s,box-shadow .14s;}
.pad svg{width:58%;height:58%;pointer-events:none;}
.pad.lit{filter:brightness(1.15) saturate(1.15);transform:scale(1.05);box-shadow:0 0 0 6px #fff,0 0 46px 12px var(--c);transition-duration:.04s;}
.pad.hit{transform:scale(.94);}
.pad.lit.hit{transform:scale(1);}
.pad .num{position:absolute;left:8%;top:5%;font-family:var(--f-pop);font-size:calc(var(--ps) * .2);color:#fff;text-shadow:var(--outline);pointer-events:none;}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-14px)}40%{transform:translateX(12px)}60%{transform:translateX(-8px)}80%{transform:translateX(5px)}}
.shake{animation:shake .45s;}

/* ===================== 設定・おしまい スタイル ===================== */
#settings{background:linear-gradient(160deg,#E9E4FF,#CDEBFF);}
.set-wrap{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px);}
.set-card{width:min(760px,calc(calc(var(--lvw) * 100) - 24px));gap:14px;padding:20px 28px;}
.low .set-card{gap:6px;padding:12px 24px;}
.set-title{font-family:var(--f-pop);font-size:30px;}
.set-row{width:100%;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.set-label{font-family:var(--f-pop);font-size:20px;width:10.5em;white-space:nowrap;}
.set-val{font-family:var(--f-pop);font-size:22px;min-width:3.5em;text-align:right;}
.set-note{font-size:15px;color:#555;line-height:1.5;text-align:left;width:100%;font-weight:500;}
.slider{position:relative;flex:1;min-width:220px;height:64px;}
.sl-track{position:absolute;left:24px;right:24px;top:24px;height:16px;border-radius:8px;background:#DDD8F5;border:3px solid var(--ink);overflow:hidden;}
.sl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--cyan);}
.sl-knob{position:absolute;top:6px;width:52px;height:52px;margin-left:-26px;border-radius:50%;background:#FFD43B;border:4px solid var(--ink);box-shadow:0 4px 0 var(--ink);}
#limits .choice{min-width:88px;}
#over{background:linear-gradient(180deg,#2B2A6B,#6D5BB5);}
.over-wrap{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);text-align:center;}
.over-wrap svg.moon{width:min(200px,calc(var(--lvmin) * 26));height:auto;}
.over-title{font-family:var(--f-pop);font-size:clamp(36px,calc(var(--lvmin) * 8),72px);color:#FFE9A8;text-shadow:var(--outline);}
.over-sub{font-size:clamp(20px,calc(var(--lvmin) * 3.4),28px);}
.lp-btn{overflow:hidden;min-width:320px;}
.lp-btn .lp-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(74,222,128,.55);pointer-events:none;}
.lp-btn .lp-t{position:relative;}
.over-note{font-size:16px;opacity:.85;font-weight:500;}

@media (prefers-reduced-motion:reduce){
  #banner.go{animation:bannerFade 1.15s forwards;}
  .badge.on{animation:none;}
  .shake{animation:none;}
  .pad,.pad.lit,.pad.hit{transform:none !important;}
  .dot i{transition:none;}
}