/* 2026-09-25 menu1: 右上 = メニュー + カート。元の 3 ボタンは仕組みごと残し、見えなくするだけ (?menu=0 で旧) */
html[data-menu] #p3-stargaze-toggle,
html[data-menu] #myspace-launcher,
html[data-menu] #p3-sound-toggle { visibility: hidden !important; pointer-events: none !important; }

#p3-menu-toggle {
  position: fixed; z-index: 10050; display: grid; place-items: center; padding: 0;
  border-radius: 999px; border: 1px solid rgba(200,228,245,.22);
  background: rgba(8,11,16,.52); color: rgba(236,244,250,.9); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .25s ease;
}
#p3-menu-toggle svg { width: 20px; height: 20px; }
#p3-menu-toggle:hover, #p3-menu-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,.08); border-color: rgba(150,225,255,.45); box-shadow: 0 0 18px rgba(120,210,255,.16);
}
#p3-menu-toggle:focus-visible { outline: 2px solid rgba(160,228,255,.9); outline-offset: 2px; }

#p3-menu-panel {
  position: fixed; z-index: 10060; width: 288px; padding: 8px;
  border-radius: 20px; border: 1px solid rgba(190,220,240,.12);
  background:
    linear-gradient(90deg, rgba(255,70,110,0) 6%, rgba(255,70,110,.5) 20%, rgba(255,230,90,.45) 36%, rgba(70,240,140,.45) 50%, rgba(60,220,255,.5) 64%, rgba(110,120,255,.45) 80%, rgba(240,90,230,0) 94%) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(10,13,18,.985), rgba(5,7,10,.99));
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
  color: #eef4f8; font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  animation: p3MenuIn .22s cubic-bezier(.2,.7,.2,1);
}
#p3-menu-panel[hidden] { display: none; }
@keyframes p3MenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
#p3-menu-panel .p3m-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 14px;
  border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
#p3-menu-panel button.p3m-item:hover { background: rgba(255,255,255,.05); }
#p3-menu-panel button:focus-visible { outline: 2px solid rgba(160,228,255,.9); outline-offset: 1px; }
#p3-menu-panel .p3m-item + .p3m-item { border-top: 1px solid rgba(255,255,255,.05); border-radius: 0 0 14px 14px; }
#p3-menu-panel .p3m-label { flex: 1 1 auto; letter-spacing: .04em; }
#p3-menu-panel .p3m-note { flex: 0 1 auto; font-size: 11px; color: rgba(200,215,225,.6); }
#p3-menu-panel .p3m-arrow { color: rgba(200,225,240,.55); }
#p3-menu-panel .p3m-state {
  font-size: 12px; letter-spacing: .1em; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(200,228,245,.18); color: rgba(220,232,240,.7);
}
#p3-menu-panel .p3m-state.is-on { color: #0c1d27; background: #d4e8f3; border-color: #d4e8f3; }
#p3-menu-panel .p3m-lang { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
#p3-menu-panel .p3m-seg { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
#p3-menu-panel .p3m-seg button {
  min-height: 36px; min-width: 44px; padding: 0 11px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(220,232,240,.7); font: inherit; font-size: 12.5px; cursor: pointer;
}
#p3-menu-panel .p3m-seg button[aria-pressed="true"] { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(170,225,250,.25); }

/* スマホ: 画面の下からせり上がるシート (指が届く) */
@media (max-width: 600px) {
  #p3-menu-panel {
    top: auto !important; right: 12px !important; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; border-radius: 24px; padding: 10px;
    animation: p3MenuUp .28s cubic-bezier(.2,.75,.2,1);
  }
  #p3-menu-panel .p3m-lang { flex-direction: column; align-items: stretch; gap: 10px; }
  #p3-menu-panel .p3m-seg button { flex: 1 1 0; min-height: 42px; }
}
@keyframes p3MenuUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #p3-menu-panel { animation: none !important; } #p3-menu-toggle { transition: none; } }
