:root{
  --appScale: 0.7; /* 70% */
  --ink:#ff4aa2;
  --line:#6b2a4a;
  --pink1:#fff3f8;
  --pink2:#ffd3e6;
  --pink3:#ff86bf;
  --white:#ffffff;
  --shadow: rgba(107,42,74,.18);
  --shadowPink: rgba(255,134,191,.22);
  --wobble: 0.35;
  
  
  /* ===RHYTHM THEME FONT FAMILY === */
  --rh-title-font: "DotGothic16", sans-serif;
  --rh-hud-font: "Yomogi", sans-serif;
  --rh-love-font: "DotGothic16", sans-serif;

  /* サイズも一緒に変えられるように */
  --rh-title-size: 16px;
  --rh-hud-size: 12px;
  --rh-love-size: 12px;

  --rh-title-weight: 1000;
  --rh-hud-weight: 1000;
  --rh-love-weight: 1000;

  --rh-title-ink: var(--ink);
  --rh-title-bg: #fff;
  --rh-title-border: var(--line);
  --rh-title-pad-y: 10px;
  --rh-title-pad-x: 12px;

  --rh-hud-ink: var(--ink);
  --rh-hud-bg: #fff;
  --rh-hud-border: var(--line);

  --rh-hud-pad-y: 10px;
  --rh-hud-pad-x: 12px;

  --rh-love-ink: var(--ink);
  --rh-love-bg: #fff;
  --rh-love-border: var(--line);
  --rh-love-pad-y: 10px;
  --rh-love-pad-x: 12px;

  --rh-lovebar-border: var(--line);
  --rh-lovebar-bg: rgba(255,211,230,.35);
  --rh-lovebar-h: 16px;
  --rh-lovebar-radius: 999px;


}


html,body{height:100%;}
*{box-sizing:border-box;}
body{
  margin:0;
  color:var(--ink);
  font-family: "DotGothic16","Yomogi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  cursor: url("cursor_heart.png") 6 6, auto;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.4) 2px, transparent 3px);
  background-size:120px 120px;
  animation: sparkleMove 20s linear infinite;
  opacity:.3;
}
@keyframes sparkleMove{
  from{ background-position:0 0,0 0; }
  to{ background-position:300px 200px, -200px 300px; }
}

.bg{
  position:fixed; inset:0;
  background:url("bg.png") center/cover no-repeat;
  z-index:-3;
}
.glitter{
  position:fixed; inset:0; pointer-events:none;
  z-index:-2;
  opacity:.26;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.85) 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.6) 1px, transparent 2px),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.7) 2px, transparent 3px);
  background-size:140px 140px, 170px 170px, 110px 110px, 210px 210px;
  animation: glitterMove 22s linear infinite;
}
@keyframes glitterMove{
  from{ background-position:0 0, 0 0, 0 0, 0 0; }
  to{ background-position:320px 260px, -280px 340px, 260px -240px, -360px -240px; }
}
#heartLayer{ position:fixed; inset:0; pointer-events:none; z-index:5; }

/* wobble */
.wobble{ animation: wobbleMain calc(6.6s / var(--wobble)) steps(2,end) infinite; }
.wobble-lite{ animation: wobbleLite calc(8.0s / var(--wobble)) steps(2,end) infinite; }
@keyframes wobbleMain{
  0%{ transform: translate(0,0) rotate(-0.10deg); }
  25%{ transform: translate(calc(1px * var(--wobble)), calc(-1px * var(--wobble))) rotate(0.12deg); }
  50%{ transform: translate(calc(-1px * var(--wobble)), calc(1px * var(--wobble))) rotate(-0.12deg); }
  75%{ transform: translate(calc(1px * var(--wobble)), calc(1px * var(--wobble))) rotate(0.08deg); }
  100%{ transform: translate(0,0) rotate(-0.10deg); }
}
@keyframes wobbleLite{
  0%{ transform: translate(0,0) rotate(0); }
  50%{ transform: translate(calc(1px * var(--wobble)), calc(1px * var(--wobble))) rotate(0.06deg); }
  100%{ transform: translate(0,0) rotate(0); }
}

/* app */
.app{
  width: 100%;
  max-width: 1200px;
  margin: 0;
  border:3px solid var(--line);
  border-radius:16px;
  overflow: visible;
  padding:14px;
  background: linear-gradient(180deg, var(--pink1), var(--white));
  box-shadow: 18px 18px 0 var(--shadowPink);
}

/* titlebar */
.titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  background: linear-gradient(180deg, var(--pink3), var(--pink1));
  border:3px solid var(--line);
  border-radius:14px;
  box-shadow:6px 6px 0 var(--shadow);
  margin-bottom:10px;
}
.title-left{ display:flex; align-items:center; gap:10px; }
.appicon{
  width:30px;height:30px; display:grid;place-items:center;
  border:2px solid var(--line); border-radius:10px; background:#fff;
  box-shadow:4px 4px 0 var(--shadow);
}
.title{ font-weight:1000; letter-spacing:.6px; }
.winbtns{ display:flex; gap:6px; }
.wbtn{ width:14px;height:14px;border:2px solid var(--line); background:#fff; border-radius:4px; }

/* top strip */
.top-strip{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 6px 0;
  margin-bottom:6px;
  border:none;
  background:transparent;
  box-shadow:none;
}
.menu-left{ display:flex; gap:8px; flex-wrap:wrap; }
.mitem{
  border:none;
  box-shadow:none;
  background: linear-gradient(180deg, #fff, rgba(255,211,230,.35));
  border-radius:12px;
  padding:7px 12px;
  font-weight:1000;
  color:var(--ink);
  filter: drop-shadow(0 2px 0 rgba(107,42,74,.10)) drop-shadow(0 0 10px rgba(255,134,191,.12));
}
.mitem[aria-expanded="true"], .mitem:active{
  background: linear-gradient(180deg, rgba(255,134,191,.35), rgba(255,243,248,.70));
}

.menu-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.counter{
  border:2px solid var(--line); border-radius:14px;
  padding:6px 10px; background:#fff;
  box-shadow:3px 3px 0 var(--shadow);
  font-weight:1000; font-size:12px; line-height:1.15; text-align:center;
}
.counter b{
  display:inline-block; margin-top:2px; padding:2px 6px;
  border:2px solid var(--line); border-radius:10px;
  background: rgba(255,211,230,.35); letter-spacing:2px;
}
.bgm-btn{
  border:2px solid var(--line); border-radius:10px;
  padding:8px 10px;
  background: linear-gradient(180deg, #fff, rgba(255,211,230,.28));
  box-shadow:3px 3px 0 var(--shadow);
  font-weight:1000;
  color:var(--ink);
}
.bgm-btn[aria-pressed="true"]{ background: rgba(255,134,191,.25); }

/* volume */
.volbox{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border:2px solid var(--line);
  border-radius:12px;
  background: linear-gradient(180deg, #fff, rgba(255,211,230,.28));
  box-shadow:3px 3px 0 var(--shadow);
}
.voltxt{ font-weight:1000; font-size:12px; letter-spacing:1px; opacity:.9; }
.volrange{ width:120px; accent-color: var(--ink); }
.volrange::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width:18px; height:18px;
  border:2px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:2px 2px 0 var(--shadow);
}
.volrange::-webkit-slider-runnable-track{
  height:10px;
  border:2px solid var(--line);
  border-radius:999px;
  background: rgba(255,211,230,.28);
}

/* dropdown (body直下 fixed) */
.menus-pop{
  position: fixed;
  z-index: 100000;
  pointer-events:none;
  left: 0;
  top: 0;
  transform: none !important;
  will-change: left, top;
}
.menus-pop.open{ pointer-events:auto; }
.popup{
  display:none;
  min-width: 260px;
  padding:6px;
  border:2px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:10px 10px 0 var(--shadowPink);
}
.popup.open{ display:block; }
.pitem{
  width:100%;
  display:grid;
  grid-template-columns: 24px 1fr auto;
  gap:10px;
  align-items:center;
  text-align:left;
  border:2px solid transparent;
  background:#fff;
  border-radius:8px;
  padding:8px 10px;
  font-weight:1000;
  color:var(--ink);
}
.pitem:hover{ border-color: var(--line); background: rgba(255,211,230,.35); }
.pitem:active{ transform: translate(1px,1px); }
.mark{ width:24px; text-align:center; }
.key{ font-weight:1000; font-size:12px; opacity:.65; }
.divider{ height:2px; background: rgba(107,42,74,.18); margin:6px 4px; }

/* toolbar */
.toolbar{
  display:flex; align-items:center; gap:8px;
  padding:6px 6px 10px;
  margin-bottom:12px;
  flex-wrap:wrap;
  border:none;
  background:transparent;
  box-shadow:none;
}
.tbtn{
  border:2px solid var(--line); border-radius:8px;
  padding:7px 10px;
  font-weight:1000;
  background:#fff;
  box-shadow:4px 4px 0 var(--shadow);
  color:var(--ink);
}
.tbtn-hot{ background: rgba(255,134,191,.18); }
.tbtn:active{ transform: translateY(1px); box-shadow:2px 2px 0 var(--shadow); }

.sep{ width:2px; height:22px; background: var(--line); opacity:.25; margin:0 6px; }
.minirow{
  display:flex; align-items:center; gap:8px;
  font-weight:1000;
  padding:6px 10px;
  border:2px solid var(--line);
  border-radius:10px;
  background: rgba(255,211,230,.22);
  box-shadow:3px 3px 0 var(--shadow);
  color:var(--ink);
}
.range{ width:130px; }
.select{
  border:2px solid var(--line); border-radius:10px;
  padding:6px 8px; font-weight:900; background:#fff;
  color:var(--ink);
}

/* layout：アプリ枠の中は2カラムだけ */
.body{
  display:grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap:12px;
  align-items:start;
  min-height: 760px;
}

/* toolbox */
.toolbox{
  padding:12px;
  border:3px solid var(--line);
  border-radius:16px;
  background: rgba(255,243,248,.92);
  box-shadow:8px 8px 0 var(--shadowPink);
}
.box-title{ font-weight:1000; margin-bottom:10px; letter-spacing:1px; }

.tools-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.tool{
  height:58px;
  border:2px solid var(--line);
  border-radius:14px;
  background: linear-gradient(180deg, #fff, rgba(255,211,230,.26));
  box-shadow:4px 4px 0 var(--shadow);
}
.tool.active{ outline: 3px dashed rgba(107,42,74,.25); outline-offset: 2px; }
.tool-pencil{ background:url("icons/pencil.png") center/26px no-repeat; }
.tool-pen{ background:url("icons/pen.png") center/26px no-repeat; }
.tool-brush{ background:url("icons/brush.png") center/26px no-repeat; }
.tool-spray{ background:url("icons/spray.png") center/26px no-repeat; }
.tool-eraser{ background:url("icons/eraser.png") center/26px no-repeat; }
.tool-bucket{ background:url("icons/bucket.png") center/26px no-repeat; }
.tool-tone{ background:url("icons/tone.png") center/26px no-repeat; }

.group{
  margin-top:10px;
  border:2px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:12px;
  box-shadow:6px 6px 0 var(--shadow);
}
.group-title{ font-weight:1000; margin-bottom:8px; letter-spacing:1px; }
.picker{ display:grid; justify-items:center; gap:8px; }
#svSquare, #hueBar{
  border:2px solid var(--line);
  border-radius:14px;
  box-shadow:4px 4px 0 var(--shadow);
  background:#fff;
}
#hueBar{ border-radius:999px; }
.picker-note{ font-weight:900; font-size:12px; opacity:.80; }

.fgbg{ display:flex; gap:12px; margin-top:10px; justify-content:center; }
.tiny{ font-size:12px; font-weight:1000; opacity:.75; margin-bottom:4px; }
.swatch{
  width:52px;height:28px;
  border:2px solid var(--line);
  border-radius:10px;
  box-shadow:2px 2px 0 var(--shadow);
  background:#fff;
}
.color-row{ display:flex; gap:8px; align-items:center; margin-top:10px; }
.color{
  width:100%;
  height:40px;
  border:2px solid var(--line);
  border-radius:12px;
  padding:0;
}
.mini{
  border:2px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  font-weight:1000;
  background:#fff;
  box-shadow:3px 3px 0 var(--shadow);
  color:var(--ink);
}
.microhint{ margin-top:8px; font-size:12px; font-weight:900; opacity:.78; }

/* canvas shell */
.paint-area{ min-width:0; }
.canvas-shell{
  border:3px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:10px 10px 0 var(--shadowPink);
}
.shell-title{
  padding:12px 12px;
  background: linear-gradient(180deg, rgba(255,134,191,.22), rgba(255,211,230,.14));
  border-bottom:2px solid var(--line);
  font-weight:1000;
  display:flex;
  gap:10px;
  align-items:center;
}
.handlabel{
  padding:4px 10px;
  border:2px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:3px 3px 0 var(--shadow);
}
.mini-badge{
  margin-left:auto;
  padding:4px 10px;
  border:2px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:3px 3px 0 var(--shadow);
}
.sparkle-dot{ animation: twinkle 1.1s steps(2,end) infinite; }
@keyframes twinkle{ 50%{ opacity:.25; transform: translateY(-1px); } }

.scroll-frame{
  height: 640px;
  overflow-y: auto;
  overflow-x: hidden;
  background:#fff6fb;
  scrollbar-color: #ff6fb4 #ffe3f1;
  scrollbar-width: auto;
}
.scroll-frame::-webkit-scrollbar{ width:14px; }
.scroll-frame::-webkit-scrollbar-track{
  background:#ffe3f1;
  border-left:2px solid var(--line);
}
.scroll-frame::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #ffb3d6, #ff6fb4);
  border:2px solid var(--line);
  border-radius:12px;
}

.workplane{ padding:24px 24px 44px; }

.canvas-wrap{
  border:3px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:6px 6px 0 var(--shadow);
  overflow:hidden;
  position:relative;
}

.canvas-header{
  position: sticky;
  top: 0;
  z-index: 6;
  border-bottom:2px solid var(--line);
  padding:18px 22px 12px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.45) 1px, transparent 2px),
    linear-gradient(180deg,#fff4fb,#ffffff);
  background-size: 120px 120px, 160px 160px, auto;
}
.header-inner{ max-width: 980px; margin:0 auto; }

/* girl + bubble */
.girl-wrap{ display:flex; justify-content:center; margin-bottom:8px; opacity:0; transform: translateY(14px); transition: opacity 900ms ease, transform 900ms ease; }
.girl-wrap.show{ opacity:1; transform: translateY(0); }

.girl-stage{ position:relative; display:inline-block; }

.girl-sprite{
  width:220px;
  height:220px;
  background:url("girl_sprites.png") no-repeat 0 0;
  background-size: auto 220px;
  transform: rotate(-0.4deg);
  background-position: 0 0 !important;
}


.girl-wrap.show .girl-bubble{
  opacity:1;
  transform: translateY(0);
  animation: bubbleFloat 1800ms ease-in-out infinite;
}
@keyframes bubbleFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.girl-bubble .bubble-inner{
  min-width: 140px;
  padding:10px 12px;
  border:2px solid var(--line);
  border-radius:16px;
  background: #fff;
  box-shadow:6px 6px 0 var(--shadowPink);
  font-weight:1000;
  text-align:center;
  line-height:1.05;
}
.girl-bubble .bubble-inner b{ font-size: 16px; }

/* links */
.links{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content:center;
  justify-items:center;
  gap:24px;
  margin-top:10px;
  margin-bottom:10px;
  max-width: 900px;
  margin-left:auto;
  margin-right:auto;
}
.link-btn{
  display:block;
  width: min(360px, 44vw);
  justify-self:center;
  transition: transform 180ms ease, filter 180ms ease;
}
.links .link-btn:nth-child(3){ grid-column: 1 / -1; }

.link-img{
  width:100%;
  height:auto;
  display:block;
  filter: drop-shadow(5px 5px 0 rgba(107,42,74,.14)) drop-shadow(0 0 12px rgba(255,134,191,.16));
  animation: imgJitter 1.05s steps(2,end) infinite;
  transform-origin: 50% 60%;
}
.links a:nth-child(1) .link-img{ animation-duration: 0.92s; }
.links a:nth-child(2) .link-img{ animation-duration: 1.13s; }
.links a:nth-child(3) .link-img{ animation-duration: 1.29s; }
@keyframes imgJitter{
  0%{ transform: translate(0,0) rotate(-1deg) scale(1); }
  20%{ transform: translate(1px,-1px) rotate(0.9deg) scale(1.01); }
  40%{ transform: translate(-1px,1px) rotate(-0.9deg) scale(1.02); }
  60%{ transform: translate(1px,1px) rotate(0.9deg) scale(1.01); }
  80%{ transform: translate(-1px,0px) rotate(-0.6deg) scale(1.01); }
  100%{ transform: translate(0,0) rotate(-1deg) scale(1); }
}

.drawnote{ display:flex; justify-content:center; padding:6px 0 14px; }
.drawnote img{
  width:min(520px, 92%);
  height:auto;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 rgba(107,42,74,.14));
  transform: rotate(-0.4deg);
}

/* stage stable */
.stage-fit{
  width: 100%;
  max-width: 980px;
  margin: 0 auto 16px;
  position: relative;
}
.stage-scale{ transform-origin: 0 0; }
.stage{
  position: relative;
  width: 1500px;
  height: 950px;
}
#pattern,#paint{
  position:absolute;
  left:0; top:0;
  width:1500px;
  height:950px;
  display:block;
}
#pattern{ z-index:0; }
#paint{ z-index:1; background: transparent; }

.statusbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-top:2px solid var(--line);
  background: rgba(255,243,248,.95);
  font-weight:1000;
  font-size:12px;
}
.hint{ margin:10px 0 0; font-size:12px; font-weight:900; opacity:.9; }

/* Save Loading / Modals（あなたのまま） */
.save-loading{
  position: fixed; inset: 0;
  display:none; place-items:center;
  background: rgba(255,243,248,.62);
  backdrop-filter: blur(2px);
  z-index: 99999;
}
.save-loading.open{ display:grid; }

.loading-panel{
  width: min(760px, 94vw);
  border: 3px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 16px 16px 0 var(--shadowPink);
  overflow:hidden;
  transform: rotate(-0.3deg);
}
.loading-head{
  padding:10px 14px;
  font-weight:1000;
  background: linear-gradient(180deg, rgba(255,134,191,.40), rgba(255,243,248,.65));
  border-bottom:2px solid var(--line);
}
.loading-body{
  padding:16px 14px 18px;
  display:grid; gap:10px;
  font-weight:1000;
  text-align:center;
}
.loading-text{ font-size: clamp(26px, 3.2vw, 44px); letter-spacing: 3px; }
.loading-dots::after{ content:""; display:inline-block; width:1.4em; animation:dots 1.4s steps(4,end) infinite; }
@keyframes dots{
  0%{ content:""; } 25%{ content:"."; } 50%{ content:".."; } 75%{ content:"..."; } 100%{ content:""; }
}
.loading-bar{
  height:18px;
  border:2px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,211,230,.30);
}
.loading-bar > i{
  display:block;
  height:100%;
  width:38%;
  background: linear-gradient(90deg, rgba(255,134,191,.15), rgba(255,134,191,.95));
  animation: bar 1.8s ease-in-out infinite;
}
@keyframes bar{ 0%{ transform: translateX(-30%); } 50%{ transform: translateX(160%); } 100%{ transform: translateX(-30%); } }
.loading-sub{ font-weight:900; opacity:.86; }
.loading-girlwrap{ display:flex; justify-content:center; margin: 4px 0 6px; }
.loading-girlimg{
  width: min(420px, 78vw);
  height: auto;
  display:block;
  filter: drop-shadow(8px 8px 0 rgba(107,42,74,.14));
  transform-origin: 50% 70%;
}
.saved-text{
  display:none;
  font-weight:1000;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: 4px;
  margin-top: 6px;
  text-shadow: 3px 3px 0 rgba(107,42,74,.18);
}
.saved-text.show{ display:block; animation: savedPop 680ms cubic-bezier(.2,.9,.2,1) 1; }
@keyframes savedPop{
  0%{ transform: translateY(10px) scale(.6); opacity:0; }
  55%{ transform: translateY(-6px) scale(1.08); opacity:1; }
  100%{ transform: translateY(0) scale(1); opacity:1; }
}

.modal{ position:fixed; inset:0; display:none; z-index:200; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(107,42,74,.25); }
.modal-panel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%) rotate(-0.3deg);
  width:min(520px, 92vw);
  border:3px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:14px 14px 0 var(--shadowPink);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  background: linear-gradient(180deg, rgba(255,134,191,.35), rgba(255,211,230,.22));
  border-bottom:2px solid var(--line);
  font-weight:1000;
}
.modal-x{
  width:34px; height:30px;
  border:2px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:3px 3px 0 var(--shadow);
  font-weight:1000;
  color:var(--ink);
}
.modal-body{ padding:12px; font-weight:900; }
.krow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 8px;
  border:2px dashed rgba(107,42,74,.18);
  border-radius:12px;
  margin-bottom:8px;
  background: rgba(255,211,230,.18);
}
.kbd{
  display:inline-block;
  padding:2px 8px;
  border:2px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:2px 2px 0 var(--shadow);
}
.aboutbox{
  border:2px solid rgba(107,42,74,.18);
  border-radius:14px;
  padding:12px;
  background: rgba(255,211,230,.16);
}
.abouttitle{ font-weight:1000; margin-bottom:8px; }
.abouttext{ font-weight:900; font-size:13px; line-height:1.55; opacity:.92; }

/* =========================
   ★音ゲー：枠外右へ（app-scale基準で absolute）
========================= */
/* ★ app と rhythm を横並びにして高さを揃える */
.app-scale{
  position: relative;
  margin: 18px auto;

  transform: scale(var(--appScale));
  transform-origin: top center;

  display: grid;
  grid-template-columns: 520px minmax(0, 1200px) 520px;
  gap: 18px;
  align-items: start;

  width: max-content;       /* ← ここ重要：中身の合計幅を素直に採用 */
  max-width: none;
}

/* 画面が狭い時に横スクロールできるように */
body{
  overflow-x: auto;
}
.left-spacer{
  /* “空のカラム” */
}


/* app は普通に */
.app{
  width:min(1200px, 96vw);
}

/* ★ absolute をやめる（重要） */
.rhythm{
  position: relative;
  width: 520px;

  border: none;
  background: transparent;
  box-shadow: none;

  padding: 12px;

  display: flex;            /* 追加 */
  flex-direction: column;   /* 追加 */
  gap: 10px;                /* 追加 */
  height: 100%;             /* 追加：左(app)と同じ高さを使う */
  min-height: 0;            /* 追加 */
}

/* 入れ替え：レーン（playfield）を上、女の子を下にしたい場合 */
.rhPlayfield{ order: 3; }
.rhGirlBox{ order: 4; }
.rhHint{ order: 9; } /* ヒントは下に固定したければ */


.rhTitle{
  font-family: var(--rh-title-font);
  font-size: var(--rh-title-size);
  font-weight: var(--rh-title-weight);

  color: var(--rh-title-ink);
  background: var(--rh-title-bg);
  border-color: var(--rh-title-border);

  padding: var(--rh-title-pad-y) var(--rh-title-pad-x);
}

.rhHud{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.rhHudBox{
  font-family: var(--rh-hud-font);
  font-size: var(--rh-hud-size);
  font-weight: var(--rh-hud-weight);

  color: var(--rh-hud-ink);
  background: var(--rh-hud-bg);
  border-color: var(--rh-hud-border);

  padding: var(--rh-hud-pad-y) var(--rh-hud-pad-x);
}
.rhRow{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-weight:1000;
  margin:4px 0;
}
.rhRow b{ font-size: 18px; letter-spacing:1px; }

.rhLoveTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:1000;
  margin-bottom:6px;
}
.rhMax{
  padding:2px 8px;
  border:2px solid var(--line);
  border-radius:999px;
  background: rgba(255,211,230,.35);
  opacity:.7;
}
.rhMax.on{ opacity:1; animation: maxPulse 700ms steps(2,end) infinite; }
@keyframes maxPulse{ 50%{ transform: translateY(-1px) scale(1.02);} }

.rhLove{
  font-family: var(--rh-love-font);
  font-size: var(--rh-love-size);
  font-weight: var(--rh-love-weight);

  color: var(--rh-love-ink);
  background: var(--rh-love-bg);
  border-color: var(--rh-love-border);

  padding: var(--rh-love-pad-y) var(--rh-love-pad-x);
}

.rhLoveBar{
  border-color: var(--rh-lovebar-border);
  background: var(--rh-lovebar-bg);
  height: var(--rh-lovebar-h);
  border-radius: var(--rh-lovebar-radius);
}

.rhLoveBar i{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(255,134,191,.35), rgba(255,74,162,.95));
}

/* girl window */
/* ✅ 女の子ウィンドウ：枠も背景も透明に */
.rhGirlBox{
  border:none;
  background: transparent;
  box-shadow:none;
  height: 230px;        /* 必要なら維持 */
  position:relative;
  overflow:hidden;
  margin-bottom:0;      /* rhythmのgapで管理 */
}

.rhGirlBg{
  position:absolute; inset:0;
  background: transparent;
  transition: filter 240ms ease, opacity 240ms ease;
}
.rhGirlSprite{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width:220px;
  height:220px;
  background: url("girl_sprites_song1.png") no-repeat 0 0;
  background-size: auto 220px;
}

/* FEVER */
body.fever .rhGirlBg{ filter: hue-rotate(18deg) saturate(1.35); opacity: 1; }

.rhCrowdBox{
  border:2px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:6px 6px 0 var(--shadow);
  height: 140px;
  position:relative;
  overflow:hidden;
  display:none;
  margin-bottom:10px;
}
body.fever .rhCrowdBox{ display:block; }

.crowd{
  position:absolute; inset:0;
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:center;
  padding:10px;
}
.crowd .crowdSprite{
  width:56px; height:56px;
  background: url("crowd_sprite.png") no-repeat 0 0;
  background-size: auto 56px;
  filter: drop-shadow(3px 3px 0 rgba(107,42,74,.14));
  animation: crowdFloat 1200ms ease-in-out infinite;
}
.crowd .crowdSprite:nth-child(2){ animation-duration: 1400ms; }
.crowd .crowdSprite:nth-child(3){ animation-duration: 1600ms; }
.crowd .crowdSprite:nth-child(4){ animation-duration: 1300ms; }
@keyframes crowdFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

/* プレイフィールドを“伸びる枠”にする */
.rhPlayfield{
  /* あなたの意図に合わせて：枠は消す、でも内部のレーン枠は残す ならこれ */
  border: none;
  background: transparent;
  box-shadow:none;

  padding: 6px 0;

  flex: 1;                 /* ✅ 余った高さはここが吸う */
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 0;
}

/* レーン2本を均等に */
 .rhLane{
  flex: 1;                 /* 2レーン同じ高さ */
  min-height: 84px;


  /* レーン枠は残したい→ここは“残す” */
  border:2px solid rgba(107,42,74,.25);
  border-radius:14px;
  background: rgba(255,211,230,.18);

  padding:10px 10px;
  position:relative;
  overflow:hidden;
}
.rhLane + .rhLane{ margin-top:0; } /* gapで管理 */

.rhLaneLabel{
  position:absolute;
  left:10px; top:8px;
  font-weight:1000;
  font-size:12px;
  opacity:.7;
}

.rhHitZone{
  position:absolute;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  pointer-events:auto;
}
.rhHeartBtn{
  width:62px; height:62px;
  border:2px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:4px 4px 0 var(--shadow);
  font-size:26px;
  font-weight:1000;
  color: var(--ink);
  cursor: pointer;
  transform-origin: 50% 60%;
}
.rhHeartBtn:active{
  transform: translate(1px,1px) scale(0.98);
  box-shadow:2px 2px 0 var(--shadow);
}
.rhHeartBtn.throb{ animation: heartThrob 220ms ease-in-out infinite; }
@keyframes heartThrob{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.12); }
  100%{ transform: scale(1); }
}

.rhFeverStamp{
  position:absolute;
  left:50%;
  top:12px;
  transform: translateX(-50%) scale(.6);
  opacity:0;
  font-weight:1000;
  letter-spacing:2px;
  padding:10px 18px;
  border:2px solid var(--line);
  border-radius:999px;
  background:#fff;
  box-shadow:8px 8px 0 var(--shadowPink);
}
.rhFeverStamp.show{
  opacity:1;
  transform: translateX(-50%) scale(1);
  animation: feverPop 680ms cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes feverPop{
  0%{ transform: translateX(-50%) translateY(10px) scale(.6); opacity:0;}
  60%{ transform: translateX(-50%) translateY(-6px) scale(1.1); opacity:1;}
  100%{ transform: translateX(-50%) translateY(0) scale(1); opacity:1;}
}

.rhHint{
  margin-top:10px;
  font-weight:900;
  font-size:12px;
  opacity:.9;
  text-align:center;
}
.rhHint .kbd{
  display:inline-block;
  padding:2px 8px;
  border:2px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:2px 2px 0 var(--shadow);
}

/* =========================
   レスポンシブ：狭い時は縦積み（縮小解除で見やすく）
========================= */
@media (max-width: 920px){
  .app-scale{
    width: auto;
    transform: none;
    grid-template-columns: 1fr; /* 縦積み */
  }
 
  .rhythm{
    width: 100%;
    border:3px solid var(--line);
    border-radius:16px;
    background: #fff; /* 必要なら */
    box-shadow:10px 10px 0 var(--shadowPink);
  }
}

/* rhythm内に吹き出しを置くためのホスト */
.rhBubbleHost{
  position: relative;
  order: 8;         /* rhythm内の下の方に */
  min-height: 0;
}

/* 吹き出しを“rhythmの下側”に出す例 */
.girl-bubble{
  position: relative;   /* absoluteをやめると flow で下に行く */
  right: auto;
  top: auto;
  margin: 6px auto 0;
  width: fit-content;
  opacity: 1;
  transform: none;
}

/* rhythm内に移した後は flow で置く */
.girl-bubble{
  position: relative;
  right: auto;
  top: auto;
  margin: 6px auto 0;
  width: fit-content;
  pointer-events:none;
  animation: bubbleFloat 1800ms ease-in-out infinite;
}

/* 外側のプレイフィールド枠を消す（背景も透明に） */
.rhPlayfield{
  border:none;
  background: transparent;
  box-shadow:none;
  padding: 6px 0;        /* 余白だけ残す */
}


/* 右カラムの外側（rhythm）は透明（上で指定済み） */

/* プレイフィールドの外枠は消してOK（レーン枠は残す） */
.rhPlayfield{
  border:none;
  background: transparent;
  box-shadow:none;
  padding: 6px 0;
}

/* ★ レーンは“元の定義を維持”（枠残す） */
.rhLane{
  border:2px solid rgba(107,42,74,.25);
  border-radius:14px;
  background: rgba(255,211,230,.18);
  padding:10px 10px;
  position:relative;
  overflow:hidden;
  height:84px;
}

/* ラベルは残す（薄めに） */
.rhLaneLabel{
  left: 6px;
  top: 6px;
  opacity: .55;
}

/* ボタンをさらに“浮かせる”なら影を少し強める（任意） */
.rhHeartBtn{
  box-shadow: 6px 6px 0 var(--shadow);
}