/* =========================================================
   ちび血球ちゃんの まちぼうけん
   ぜんぶ「ミルキーピンクのパステル」1本。
   暗い背景・グラフ・むずかしい単位は使わない
   ========================================================= */
:root{
  --milk:#fff8fb;
  --cream:#fff6e8;
  --mint:#e6fff5;
  --pink:#ff9ab5;
  --pink-l:#ffd3e0;
  --pink-d:#ff6f92;
  --yellow:#ffd76e;
  --green:#8ee6b8;
  --purple:#c3a9ff;
  --ink:#6b4655;          /* 文字色。黒ではなくピンク寄りのこげ茶 */
  --ink-l:#a98a97;
  --jp:"M PLUS Rounded 1c","Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --pop:"Mochiy Pop One","M PLUS Rounded 1c",sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;height:100vh;overflow:hidden;color:var(--ink);background:var(--milk);
  font-family:var(--jp);font-weight:800;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
#stage{position:fixed;top:0;right:0;bottom:0;left:0;display:block;touch-action:none;cursor:pointer}
/* 3D のまち（WebGL）。2D の キャンバスの 下に しいて、まちの 画面の ときだけ 見せる */
#bg3d{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:none}
body.town #bg3d.on{display:block}
.tool.on{background:linear-gradient(180deg,#ffb0c6,var(--pink-d));color:#fff;box-shadow:0 4px 0 #e4577c}
#shakeWrap{position:fixed;top:0;right:0;bottom:0;left:0}
/* 変身のときの光。白でふわっと */
#flash{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .55s ease-out}
#flash.on{opacity:.9;transition:none}
/* にじいろの粒がひろがるとき、画面もほんのり色づく */
#rainbow{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;z-index:1;transition:opacity .35s;mix-blend-mode:hue}
#rainbow.on{opacity:.55;animation:rb 1.1s linear infinite}
@keyframes rb{
  0%{background:#ff9ab5}25%{background:#ffd76e}
  50%{background:#8ee6b8}75%{background:#c3a9ff}100%{background:#ff9ab5}
}

.hud{position:fixed;left:0;right:0;pointer-events:none;z-index:5}
.hud.top{top:0;padding:10px 12px 0}
.hud.bot{bottom:0;padding:0 12px 10px}
.hud .panel{pointer-events:auto}
.hud > *{pointer-events:auto}            /* パネルの外にあるボタンも 押せるように */
/* とじているトレイは 見えないので、タップは 下のキャンバスに通す
   （.panel より 強く書かないと 打ち消せない） */
.hud .tray{pointer-events:none}
.hud .tray.open{pointer-events:auto}
.panel{
  background:rgba(255,255,255,.86);border:3px solid #fff;border-radius:26px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 0 rgba(255,154,181,.28), 0 14px 30px rgba(255,154,181,.22);
}

/* ---- 上：なまえ・パワー ---- */
.head{display:flex;align-items:center;gap:9px;padding:11px 12px 4px}
.head .name{font-family:var(--pop);font-size:clamp(14px,4.4vw,17px);line-height:1.2;flex:1}
.head .name small{display:block;font-family:var(--jp);font-size:10px;font-weight:400;color:var(--ink-l);margin-top:3px}
.head .cnt{font-size:9.5px;font-weight:400;color:var(--ink-l);text-align:center;line-height:1.2;flex:none}
.head .cnt b{display:block;font-family:var(--pop);font-size:16px;color:var(--pink-d)}
.head .cnt.road b{color:var(--green)}
.tool{
  width:34px;height:34px;border-radius:50%;border:3px solid #fff;background:#ffeef4;
  color:var(--pink-d);cursor:pointer;display:grid;place-items:center;padding:0;flex:none;
  box-shadow:0 4px 0 rgba(255,154,181,.35)
}
.tool:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(255,154,181,.3)}
.tool svg{width:17px;height:17px}

.powerwrap{padding:0 14px 12px}
.powerlab{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:400;color:var(--ink-l);margin-bottom:5px}
.powerlab b{font-family:var(--pop);font-size:12.5px;color:var(--pink-d);font-weight:400}
.power{height:24px;border-radius:999px;background:#ffeaf1;position:relative;overflow:hidden;
  box-shadow:inset 0 3px 6px rgba(255,154,181,.35)}
.power>i{
  display:block;height:100%;width:0;border-radius:999px;position:relative;
  background:linear-gradient(180deg,#ffd0dd,var(--pink),var(--pink-d));
  transition:width .45s cubic-bezier(.22,1.5,.36,1)
}
.power>i::after{content:"";position:absolute;left:8px;right:8px;top:4px;height:6px;border-radius:999px;background:rgba(255,255,255,.7)}
.power.full>i{background:linear-gradient(180deg,#fff3c4,var(--yellow),#ff9f1c);animation:fullGlow .7s ease-in-out infinite}
@keyframes fullGlow{50%{filter:brightness(1.18)}}
.power .heart{position:absolute;top:50%;right:9px;transform:translateY(-50%);font-size:13px;opacity:.8}
.hint{margin-top:6px;text-align:center;font-size:11px;font-weight:800;color:var(--pink-d);min-height:15px;line-height:1.3}
.hint:empty{min-height:0;margin-top:0}

/* ---- ミニちず ---- */
#minimap{
  position:fixed;right:12px;z-index:6;width:116px;height:82px;border-radius:16px;
  border:3px solid #fff;background:rgba(255,255,255,.85);cursor:pointer;padding:0;overflow:hidden;
  box-shadow:0 5px 0 rgba(255,154,181,.32)
}
#minimap canvas{width:100%;height:100%;display:block}
#minimap .cap{position:absolute;left:0;right:0;bottom:0;font-size:8.5px;font-weight:400;
  background:rgba(255,255,255,.88);color:var(--ink-l);text-align:center;padding:1px 0}

/* ---- 下：ごはんとちず ---- */
.tray{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px;margin-bottom:12px;
  /* ごはんが8つあるので、せまい画面でまちが見えなくならないように上限をつける */
  max-height:min(44vh,330px);overflow-y:auto;
  transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,1.6,.4,1),opacity .22s
}
.tray.open{transform:none;opacity:1;pointer-events:auto}
.food{
  display:flex;align-items:center;gap:9px;text-align:left;padding:10px;border-radius:20px;cursor:pointer;
  border:3px solid #fff;background:linear-gradient(180deg,#fff,#ffeef4);
  box-shadow:0 5px 0 rgba(255,154,181,.35);
  font-family:var(--jp);font-weight:800;color:var(--ink);font-size:13px;line-height:1.3
}
/* 2つずつ同じ栄養素なので、色もペアでそろえる */
.food:nth-child(3),.food:nth-child(4){background:linear-gradient(180deg,#fff,#eaf3ff);box-shadow:0 5px 0 rgba(158,200,255,.5)}
.food:nth-child(5),.food:nth-child(6){background:linear-gradient(180deg,#fff,#fff6e2);box-shadow:0 5px 0 rgba(255,215,110,.55)}
.food:nth-child(7),.food:nth-child(8){background:linear-gradient(180deg,#fff,#f6efe2);box-shadow:0 5px 0 rgba(185,141,78,.45)}
.food:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(255,154,181,.35)}
.food:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.food .em{font-size:25px;flex:none}
.food i{display:block;font-style:normal;font-weight:400;font-size:10px;color:var(--ink-l);margin-top:2px;word-break:keep-all;overflow-wrap:break-word}

.btnrow{display:grid;grid-template-columns:1fr auto;gap:9px}
.feed{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:17px 12px;border-radius:999px;border:4px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:clamp(15px,4.4vw,19px);color:#fff;
  background:linear-gradient(180deg,#ffb0c6,var(--pink-d));
  box-shadow:0 8px 0 #e4577c, 0 12px 26px rgba(255,111,146,.42);
  animation:bounceBtn 1.5s cubic-bezier(.4,0,.5,1) infinite;
}
.feed:active{transform:translateY(6px);box-shadow:0 2px 0 #e4577c}
.feed svg{width:25px;height:25px;flex:none}
@keyframes bounceBtn{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-4px) scale(1.02)}}
.feed.busy{filter:saturate(.6);animation:none;opacity:.75}
.mapbtn{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:17px 18px;
  border-radius:999px;border:4px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:clamp(14px,4vw,17px);color:#2f5a45;
  background:linear-gradient(180deg,#c4f2dd,#7ddab0);box-shadow:0 8px 0 #46a077;
}
.mapbtn:active{transform:translateY(6px);box-shadow:0 2px 0 #46a077}
.mapbtn svg{width:22px;height:22px;flex:none}
.legal{margin:8px 6px 0;font-size:9.5px;font-weight:400;line-height:1.5;color:#bda6b1;text-align:center}

/* ---- ふきだし・大文字 ---- */
#bubble{
  position:fixed;left:50%;transform:translateX(-50%) scale(.7);top:0;z-index:6;
  padding:9px 16px;border-radius:999px;border:3px solid #fff;background:#fff;
  box-shadow:0 5px 0 rgba(255,154,181,.3);font-size:13px;
  max-width:calc(100vw - 40px);text-align:center;line-height:1.5;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .35s cubic-bezier(.2,1.7,.4,1)
}
#bubble.on{opacity:1;transform:translateX(-50%) scale(1)}
#bubble::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-7px;
  border:7px solid transparent;border-top-color:#fff;border-bottom:0}
#bigwrap{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:8;overflow:hidden}
.big{position:absolute;left:50%;top:34%;font-family:var(--pop);
  font-size:clamp(26px,9vw,50px);white-space:nowrap;text-align:center;color:#fff;
  animation:bigIn 1.35s cubic-bezier(.2,1.6,.3,1) forwards}
@keyframes bigIn{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}
  28%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(3deg)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-64%) scale(1.1)}
}

/* ---- おおきいちず ---- */
#mapsheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:22;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(255,200,220,.55);backdrop-filter:blur(6px)}
#mapsheet.on{display:flex}
#mapsheet .box{width:100%;max-width:430px;padding:16px;
  background:#fff;border:4px solid var(--pink-l);border-radius:28px;box-shadow:0 12px 0 rgba(255,154,181,.3)}
#mapsheet h2{font-family:var(--pop);font-size:16px;color:var(--pink-d);margin:0 0 4px}
#mapsheet .note{font-size:11px;font-weight:400;color:var(--ink-l);margin:0 0 10px;line-height:1.5}
.mapfield{position:relative;width:100%;aspect-ratio:22/15;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#eafff5,#fff6fa);border:3px solid #ffe3ec}
.mapfield svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}
.mappin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  border:0;background:none;padding:0;cursor:pointer;font-family:var(--jp);font-weight:800}
.mappin .dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  border:3px solid #fff;box-shadow:0 3px 0 rgba(255,154,181,.4)}
.mappin .lb{font-size:9px;color:var(--ink);background:rgba(255,255,255,.92);border-radius:999px;padding:1px 6px;white-space:nowrap}
.mappin:active .dot{transform:translateY(2px)}
.mappin:focus-visible .dot{outline:3px solid var(--purple);outline-offset:2px}
.mapme{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#ffb6cb,#ff7d9f);border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(255,143,171,.35);animation:mePing 1.1s ease-in-out infinite}
@keyframes mePing{50%{box-shadow:0 0 0 9px rgba(255,143,171,.12)}}
#mapsheet .btn,.sheet .btn{
  width:100%;margin-top:12px;padding:13px;border-radius:999px;border:3px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:15px;color:#fff;
  background:linear-gradient(180deg,#ffb0c6,var(--pink-d));box-shadow:0 6px 0 #e4577c
}
#mapsheet .btn:active,.sheet .btn:active{transform:translateY(4px);box-shadow:0 2px 0 #e4577c}

/* ---- せつめい ---- */
.sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:23;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(255,200,220,.6);backdrop-filter:blur(6px)}
.sheet.on{display:flex}
.sheet .box{max-width:390px;width:100%;max-height:84vh;overflow:auto;padding:20px;
  background:#fff;border:4px solid var(--pink-l);border-radius:28px;box-shadow:0 12px 0 rgba(255,154,181,.3)}
.sheet h2{font-family:var(--pop);font-size:16px;color:var(--pink-d);margin:0 0 12px}
.sheet ul{margin:0;padding-left:20px;font-weight:400;font-size:12.5px;line-height:1.8}
.sheet li{margin-bottom:6px}
.sheet b{color:var(--pink-d)}


/* =========================================================
   まちの写真館
   ごはんの写真をえらんで、自分でかこうして、アルバムにしまう
   ========================================================= */
#studio{position:fixed;top:0;right:0;bottom:0;left:0;z-index:24;display:none;
  background:rgba(255,200,220,.6);backdrop-filter:blur(6px);
  align-items:flex-start;justify-content:center;padding:14px;overflow:auto}
#studio.on{display:flex}
#studio .box{
  width:100%;max-width:430px;padding:16px;margin:auto;
  background:#fff;border:4px solid var(--pink-l);border-radius:28px;
  box-shadow:0 12px 0 rgba(255,154,181,.3)
}
#studio h2{font-family:var(--pop);font-size:16px;color:var(--pink-d);margin:0 0 3px}
#studio .note{font-size:11px;font-weight:400;color:var(--ink-l);margin:0 0 12px;line-height:1.5}

.pshot{position:relative;width:100%;aspect-ratio:1;border-radius:20px;overflow:hidden;
  background:#ffeef4;border:3px solid #ffe3ec}
.pshot canvas{width:100%;height:100%;display:block;touch-action:manipulation;cursor:crosshair}
.pshot .empty{
  position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;
  font-size:12px;font-weight:400;color:var(--ink-l);line-height:1.7;padding:20px
}

.prow{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.plabel{font-size:10.5px;font-weight:800;color:var(--ink-l);margin:12px 0 5px;letter-spacing:.04em}
.chip{
  padding:8px 12px;border-radius:999px;border:3px solid #fff;cursor:pointer;
  background:#ffeef4;color:var(--ink);font-family:var(--jp);font-weight:800;font-size:12px;
  box-shadow:0 3px 0 rgba(255,154,181,.35)
}
.chip:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(255,154,181,.35)}
.chip.on{background:linear-gradient(180deg,#ffb0c6,var(--pink-d));color:#fff;box-shadow:0 3px 0 #e4577c}
.chip:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.chip.st{font-size:19px;padding:5px 9px;line-height:1}
.chip.mini{font-size:11px;padding:6px 10px;background:#f2ecff;box-shadow:0 3px 0 rgba(195,169,255,.5)}
.chip.mini.on{background:linear-gradient(180deg,#ffb0c6,var(--pink-d));color:#fff;box-shadow:0 3px 0 #e4577c}

#capIn{
  width:100%;margin-top:6px;padding:11px 14px;border-radius:999px;border:3px solid #ffe3ec;
  background:#fffafc;font-family:var(--jp);font-weight:800;font-size:13px;color:var(--ink)
}
#capIn:focus{outline:3px solid var(--pink-l);outline-offset:1px}

.pbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.pbtn{
  padding:13px;border-radius:999px;border:3px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:14px;color:#fff;
  background:linear-gradient(180deg,#ffb0c6,var(--pink-d));box-shadow:0 6px 0 #e4577c
}
.pbtn.g{background:linear-gradient(180deg,#c4f2dd,#7ddab0);color:#2f5a45;box-shadow:0 6px 0 #46a077}
.pbtn.w{background:linear-gradient(180deg,#fff,#ffeef4);color:var(--ink);box-shadow:0 6px 0 rgba(255,154,181,.45)}
.pbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #e4577c}
.pbtn.g:active{box-shadow:0 2px 0 #46a077}
.pbtn:disabled{opacity:.45;cursor:default}
.pbtn.wide{grid-column:1 / -1}

.album{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}
.album .slot{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;
  border:3px solid #fff;box-shadow:0 3px 0 rgba(255,154,181,.3);background:#ffeef4;cursor:pointer;padding:0}
.album .slot img{width:100%;height:100%;object-fit:cover;display:block}
.album .slot .del{
  position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  border:2px solid #fff;background:var(--pink-d);color:#fff;font-size:11px;line-height:1;
  cursor:pointer;padding:0;display:grid;place-items:center
}
.album .none{grid-column:1/-1;text-align:center;font-size:11px;font-weight:400;color:var(--ink-l);padding:14px 0}

/* =========================================================
   栄養抽出カットイン と 変身アクション
   ========================================================= */
#cutin{position:fixed;top:0;right:0;bottom:0;left:0;z-index:26;display:none;pointer-events:none;overflow:hidden}
#cutin.on{display:block}
.ci-band{
  position:absolute;left:-25%;right:-25%;top:33%;height:clamp(120px,26vw,170px);
  transform:skewY(-7deg) translateX(-130%);
  box-shadow:0 10px 0 rgba(255,255,255,.75), 0 -10px 0 rgba(255,255,255,.75);
  animation:ciBand 1.8s cubic-bezier(.2,1.5,.3,1) forwards
}
@keyframes ciBand{
  0%{transform:skewY(-7deg) translateX(-130%)}
  16%{transform:skewY(-7deg) translateX(0)}
  74%{transform:skewY(-7deg) translateX(0)}
  100%{transform:skewY(-7deg) translateX(130%)}
}
.ci-in{
  position:absolute;left:0;right:0;top:33%;height:clamp(120px,26vw,170px);
  display:flex;align-items:center;justify-content:center;gap:14px;
  animation:ciIn 1.8s cubic-bezier(.2,1.5,.3,1) forwards
}
@keyframes ciIn{
  0%{opacity:0;transform:scale(.5) rotate(-8deg)}
  18%{opacity:1;transform:scale(1.08) rotate(2deg)}
  30%{transform:scale(1) rotate(0)}
  74%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.25)}
}
.ci-em{font-size:clamp(44px,13vw,80px);animation:ciSpin 1.8s ease-out forwards}
@keyframes ciSpin{0%{transform:rotate(-40deg) scale(.4)}30%{transform:rotate(12deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
.ci-txt{font-family:var(--pop);font-size:clamp(20px,6.4vw,38px);color:#fff;
  text-shadow:0 4px 0 rgba(255,111,146,.55), 0 0 22px rgba(255,255,255,.9);line-height:1.2;text-align:left}
.ci-txt small{display:block;font-family:var(--jp);font-size:clamp(11px,3.4vw,15px);margin-top:4px;opacity:.95}
/* 集中線 */
.ci-rays{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;animation:ciRays 1.8s ease-out forwards}
@keyframes ciRays{0%{opacity:0;transform:scale(1.4)}20%{opacity:.85;transform:scale(1)}60%{opacity:.4}100%{opacity:0}}
/* キュイーン！の光 */
.ci-shine{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%) scale(0);box-shadow:0 0 60px 30px #fff;
  animation:ciShine 1.8s ease-out forwards;animation-delay:.75s}
@keyframes ciShine{0%{transform:translate(-50%,-50%) scale(0);opacity:1}
  55%{transform:translate(-50%,-50%) scale(34);opacity:.95}100%{transform:translate(-50%,-50%) scale(46);opacity:0}}

.actbtn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:9px;
  padding:15px 12px;border-radius:999px;border:4px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:clamp(14px,4.2vw,18px);color:#fff;
  background:linear-gradient(180deg,#ffd76e,#ff9f1c);box-shadow:0 7px 0 #c96b00;
  animation:actPulse .9s ease-in-out infinite
}
.actbtn:active{transform:translateY(5px);box-shadow:0 2px 0 #c96b00}
@keyframes actPulse{50%{transform:scale(1.03)}}
.actbtn.bone{background:linear-gradient(180deg,#dbeaff,#9ec8ff);color:#274a70;box-shadow:0 7px 0 #5c86b8}
.actbtn.macho{background:linear-gradient(180deg,#ffb0c6,#ff6f92);box-shadow:0 7px 0 #e4577c}
.actbtn.oil{background:linear-gradient(180deg,#e9d3a8,#b98d4e);box-shadow:0 7px 0 #7d5c2c}
/* のこり時間のバー */
.actbtn .tm{position:absolute;left:0;bottom:0;height:4px;background:rgba(255,255,255,.85);border-radius:2px}

/* =========================================================
   My血液ラボ
   健康アプリの硬さを出さないように、数字より先に
   まるい絵・顔・ひとことが目に入るようにしている
   ========================================================= */
/* =========================================================
   おうち（きせかえルーム）
   ========================================================= */
#closet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:24;display:none;
  background:rgba(255,200,220,.6);backdrop-filter:blur(6px);
  align-items:flex-start;justify-content:center;padding:14px;overflow:auto}
#closet.on{display:flex}
#closet .box{width:100%;max-width:430px;padding:16px;margin:auto;
  background:#fff;border:4px solid var(--pink-l);border-radius:28px;box-shadow:0 12px 0 rgba(255,154,181,.3)}
#closet h2{font-family:var(--pop);font-size:16px;color:var(--pink-d);margin:0 0 3px}
#closet h2 small{font-family:var(--jp);font-size:11px;font-weight:400;color:var(--ink-l);margin-left:4px}
#closet .note{font-size:11px;font-weight:400;color:var(--ink-l);margin:0 0 12px;line-height:1.5}
#closet .cl-how{margin:14px 0 0}
.cl-stage{border-radius:20px;overflow:hidden;border:3px solid #ffe3ec;background:#fff6fa}
.cl-stage canvas{width:100%;height:auto;display:block}
.cl-pt{margin-top:12px;padding:10px 12px;border-radius:18px;background:linear-gradient(180deg,#fff,#fff2f7);border:3px solid #ffe3ec}
.cl-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}
.cl-row span{font-family:var(--pop);font-size:20px;color:var(--pink-d)}
.cl-bar{height:12px;border-radius:999px;background:#ffeaf1;overflow:hidden;margin-top:6px;box-shadow:inset 0 2px 4px rgba(255,154,181,.3)}
.cl-bar>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ffd0dd,#ff6f92);transition:width .5s}
.cl-next{margin-top:6px;font-size:11px;font-weight:400;color:var(--ink-l)}
.cl-next b{color:var(--pink-d);font-weight:800}
.cl-tabs{display:flex;gap:6px;margin-top:12px}
.cl-tabs .chip{flex:1}
.cl-cat{margin-top:12px}
.cl-cat h3{font-size:11px;color:var(--ink-l);margin:0 0 6px;font-weight:800}
.cl-list{display:flex;flex-wrap:wrap;gap:7px}
.cl-item{display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;border:3px solid #fff;cursor:pointer;
  background:#ffeef4;font-family:var(--jp);font-weight:800;font-size:12px;color:var(--ink);box-shadow:0 3px 0 rgba(255,154,181,.35)}
.cl-item .sw{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(107,70,85,.15);flex:none}
.cl-item.on{background:linear-gradient(180deg,#ffb0c6,var(--pink-d));color:#fff;box-shadow:0 3px 0 #e4577c}
.cl-item.lock{background:#f4eff2;color:#bba8b1;box-shadow:none;cursor:default}
.cl-item.lock small{font-weight:400;font-size:10px}
.cl-item.new::after{content:"NEW";font-size:8.5px;background:#ffd76e;color:#6b4a00;border-radius:999px;padding:1px 5px}
.cl-item:focus-visible{outline:3px solid var(--purple);outline-offset:2px}

#lab{position:fixed;top:0;right:0;bottom:0;left:0;z-index:24;display:none;
  background:rgba(255,200,220,.6);backdrop-filter:blur(6px);
  align-items:flex-start;justify-content:center;padding:14px;overflow:auto}
#lab.on{display:flex}
#lab .box{width:100%;max-width:430px;padding:16px;margin:auto;
  background:#fff;border:4px solid var(--pink-l);border-radius:28px;
  box-shadow:0 12px 0 rgba(255,154,181,.3)}
#lab h2{font-family:var(--pop);font-size:16px;color:var(--pink-d);margin:0 0 3px}
#lab .note{font-size:11px;font-weight:400;color:var(--ink-l);margin:0 0 12px;line-height:1.5}
.labsec{margin-top:16px}
.labsec>h3{font-family:var(--pop);font-size:13px;color:var(--pink-d);margin:0 0 8px;
  display:flex;align-items:center;gap:6px}
.labsec>h3 span{font-family:var(--jp);font-size:10px;font-weight:400;color:var(--ink-l)}

/* ① 食事傾向 */
.donutrow{display:flex;gap:12px;align-items:center;
  background:linear-gradient(180deg,#fff6fa,#fff);border:3px solid #ffe3ec;border-radius:20px;padding:12px}
#labDonut{width:150px;height:150px;flex:none}
#labLegend{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.lgd{display:flex;align-items:center;gap:6px;font-size:11.5px}
.lgd .dot{width:11px;height:11px;border-radius:50%;flex:none;border:2px solid #fff;
  box-shadow:0 1px 0 rgba(255,154,181,.4)}
.lgd .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgd .pc{font-family:var(--pop);font-size:12px;color:var(--pink-d);flex:none}
.lgd.snack{font-weight:400;color:var(--ink-l);font-size:10.5px;margin-top:3px}
.lgd.snack b{color:var(--pink-d);font-family:var(--pop);font-size:12px}

/* ② 検査けっか */
#labBlood{display:flex;flex-direction:column;gap:11px}
.bl{background:#fffafc;border:3px solid #ffe3ec;border-radius:18px;padding:10px 12px}
.bl.ok{border-color:#bfeed6;background:#f6fffa}
.bl.soso{border-color:#ffe6b8;background:#fffcf4}
.bl.low{border-color:#ffc9d6;background:#fff6f8}
.bhead{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-bottom:7px}
.bhead span{font-size:12.5px;line-height:1.25}
.bhead i{display:block;font-style:normal;font-weight:400;font-size:9.5px;color:var(--ink-l);margin-top:1px}
.bhead b{font-family:var(--pop);font-size:17px;color:var(--ink);white-space:nowrap}
.bhead b small{font-family:var(--jp);font-size:9px;color:var(--ink-l);font-weight:400}
.bbar{position:relative;height:16px;border-radius:999px;background:#ffeef4;
  box-shadow:inset 0 2px 4px rgba(255,154,181,.3)}
.bbar>i{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.22,1.5,.36,1)}
.bface{position:absolute;top:-19px;transform:translateX(-50%);font-size:11px;color:var(--ink);
  background:#fff;border:2px solid #ffe3ec;border-radius:999px;padding:0 5px;white-space:nowrap}
.labnone{font-size:11.5px;font-weight:400;color:var(--ink-l);text-align:center;line-height:1.7;
  background:#fffafc;border:3px dashed #ffe3ec;border-radius:18px;padding:16px}

/* ヘモグロビンの うつりかわり */
.hist{display:flex;gap:6px;align-items:flex-end;height:76px;margin-top:10px;
  background:#fffafc;border:3px solid #ffe3ec;border-radius:16px;padding:8px}
.hcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px}
.hcol i{width:100%;border-radius:8px 8px 4px 4px;background:linear-gradient(180deg,#ffb6cb,#ff6f92);display:block}
.hcol span{font-size:8.5px;font-weight:400;color:var(--ink-l)}
.histlab{font-size:9.5px;font-weight:400;color:var(--ink-l);text-align:center;margin-top:4px}

/* ③ ひとこと */
#labSay{display:flex;align-items:center;gap:10px;margin-top:12px;
  background:linear-gradient(180deg,#fff,#fff2f7);border:3px solid #ffd3e0;border-radius:20px;padding:12px}
.labface{width:44px;height:42px;flex:none;border-radius:50%;
  background:linear-gradient(180deg,#fff2f6,#ff8fab);border:3px solid #fff;
  box-shadow:0 3px 0 rgba(255,154,181,.4);position:relative}
.labface::before,.labface::after{content:"";position:absolute;top:14px;width:5px;height:6px;
  border-radius:50%;background:#5b3a47}
.labface::before{left:10px}.labface::after{right:10px}
.labface.happy::before,.labface.happy::after{height:3px;border-radius:3px 3px 0 0;background:none;
  border-top:3px solid #5b3a47}
.labface.ouch::before,.labface.ouch::after{width:8px;height:3px;background:#5b3a47;border-radius:2px;transform:rotate(18deg)}
.labface.ouch::after{transform:rotate(-18deg)}
.labtxt{font-size:12px;font-weight:400;line-height:1.6}
.labtxt b{color:var(--pink-d);font-weight:800}

/* ④ クエスト */
#labQuest{display:flex;flex-direction:column;gap:8px}
.qst{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:18px;
  background:linear-gradient(180deg,#fff,#f4fff9);border:3px solid #c9f0dd;
  box-shadow:0 4px 0 rgba(142,230,184,.4)}
.qst.done{background:linear-gradient(180deg,#fff,#fff6e2);border-color:#ffe0a0;box-shadow:0 4px 0 rgba(255,215,110,.5)}
.qem{font-size:22px;flex:none}
.qbody{flex:1;min-width:0}
.qbody b{display:block;font-size:11.5px;line-height:1.35;margin-bottom:5px}
.qbar{display:block;height:9px;border-radius:999px;background:#e6f7ee;overflow:hidden}
.qbar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#a8ecc9,#4fbb8a);transition:width .4s}
.qst.done .qbar>i{background:linear-gradient(90deg,#ffe9a8,#ffb02e)}
.qn{font-family:var(--pop);font-size:12px;color:#4fbb8a;flex:none}
.qst.done .qn{color:#e09a00}

/* ⑤ おすすめ枠 */
#labShop{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.shopcard{flex:none;width:112px;padding:11px 9px;border-radius:18px;text-align:center;position:relative;
  background:linear-gradient(180deg,#fff,#f6f1ff);border:3px solid #e4d9ff;
  box-shadow:0 4px 0 rgba(195,169,255,.45)}
.shopcard .sem{font-size:26px;display:block;margin-bottom:4px}
.shopcard b{display:block;font-size:11px;line-height:1.3}
.shopcard i{display:block;font-style:normal;font-weight:400;font-size:9.5px;color:var(--ink-l);margin-top:3px}
.shopcard .tag{position:absolute;top:-9px;right:-4px;font-size:8.5px;font-weight:800;color:#7a5cc0;
  background:#efe7ff;border:2px solid #fff;border-radius:999px;padding:1px 6px}
.shopnote{font-size:9.5px;font-weight:400;color:var(--ink-l);line-height:1.6;margin-top:7px}

/* ボタン */
.labbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.labbtn{padding:13px;border-radius:999px;border:3px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:14px;color:#fff;
  background:linear-gradient(180deg,#ffb0c6,var(--pink-d));box-shadow:0 6px 0 #e4577c}
.labbtn.g{background:linear-gradient(180deg,#c4f2dd,#7ddab0);color:#2f5a45;box-shadow:0 6px 0 #46a077}
.labbtn.w{background:linear-gradient(180deg,#fff,#ffeef4);color:var(--ink);box-shadow:0 6px 0 rgba(255,154,181,.45)}
.labbtn.wide{grid-column:1/-1}
.labbtn:active{transform:translateY(4px);box-shadow:0 2px 0 #e4577c}
.labbtn.g:active{box-shadow:0 2px 0 #46a077}

/* 検査けっかを入れるフォーム */
#bloodForm{position:fixed;top:0;right:0;bottom:0;left:0;z-index:25;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(255,200,220,.7);backdrop-filter:blur(6px)}
#bloodForm.on{display:flex}
#bloodForm .box{width:100%;max-width:380px;padding:20px;background:#fff;
  border:4px solid var(--pink-l);border-radius:28px;box-shadow:0 12px 0 rgba(255,154,181,.3)}
#bloodForm h3{font-family:var(--pop);font-size:15px;color:var(--pink-d);margin:0 0 4px}
#bloodForm .note{font-size:10.5px;font-weight:400;color:var(--ink-l);margin:0 0 14px;line-height:1.5}
.brow{margin-bottom:12px}
.brow label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:5px}
.brow label b{font-family:var(--pop);font-size:14px;color:var(--pink-d);font-weight:400}
.brow input[type=range]{width:100%;accent-color:#ff6f92;height:26px}

/* =========================================================
   造血こうじょう（アーケード・アイドル）
   まちと同じパステル。運ぶ → 精錬 → 出荷 → 床をふんで拡張
   ========================================================= */
/* まち／工場／パズル／バトル の 出しわけ */
body:not(.town) .townui{display:none !important}
body:not(.idle) .idleui{display:none !important}
body:not(.merge) .mergeui{display:none !important}
body:not(.vs) .vsui{display:none !important}
body:not(.robo) .roboui{display:none !important}

/* 第四の壁やぶり：画面のガラス（UIの上にかぶせる。入力はふさがない） */
#crack{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none;display:none}
body.robo #crack{display:block}

/* 怪獣に なぐられたとき、ボタンが ぐらぐら傾く（押せるままにする） */
body.uishake .hud .panel,
body.uishake .hud > button,
body.uishake .hud .ibtnrow,
body.uishake .hud .btnrow,
body.uishake #minimap{animation:uiWobble .38s ease-in-out infinite}
@keyframes uiWobble{
  0%,100%{transform:rotate(-1.6deg) translate(-2px,1px)}
  50%{transform:rotate(1.9deg) translate(3px,-2px)}
}
body.uishake .hud .panel{filter:saturate(.85)}

.rhead{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:11px 12px;align-items:center}
.rhead .rt{font-family:var(--pop);font-size:clamp(13px,4vw,16px);color:var(--pink-d);line-height:1.25}
.rhead .rs{font-size:9.5px;font-weight:400;color:var(--ink-l);text-align:center;line-height:1.2}
.rhead .rs b{display:block;font-family:var(--pop);font-size:15px;color:var(--pink-d)}
.rstate{padding:0 14px 11px;font-size:11px;font-weight:800;color:var(--ink);line-height:1.4}
.robtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
.robtn{
  padding:15px 10px;border-radius:999px;border:4px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:clamp(13px,3.8vw,16px);color:#fff;
  background:linear-gradient(180deg,#ffb0c6,var(--pink-d));box-shadow:0 7px 0 #e4577c;
  animation:bounceBtn 1.4s cubic-bezier(.4,0,.5,1) infinite
}
.robtn.mon{background:linear-gradient(180deg,#e9d3a8,#b98d4e);box-shadow:0 7px 0 #7d5c2c;color:#4a3416;animation:none}
.robtn:active{transform:translateY(5px);box-shadow:0 2px 0 #e4577c}
.robtn.mon:active{box-shadow:0 2px 0 #7d5c2c}
.robtn:disabled{opacity:.45;animation:none;cursor:default}

/* ごうたいラボ と そうとうバトル の 計器 */
.ghead{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;padding:11px 12px;align-items:center}
.gstat i{display:block;font-style:normal;font-size:9px;letter-spacing:.06em;color:var(--ink-l);font-weight:400}
.gstat b{display:block;font-family:var(--pop);font-size:clamp(15px,4.6vw,19px);line-height:1.1}
.gstat.a b{color:var(--pink-d)} .gstat.b b{color:#e09a00} .gstat.c b{color:#4fbb8a}
.gstat.hp b{font-family:var(--jp);font-size:15px;letter-spacing:1px}
.ghint{padding:0 14px 11px;font-size:10.5px;font-weight:400;color:var(--ink-l);line-height:1.4}
.ghint b{color:var(--pink-d);font-weight:800}
.xpbar{height:10px;border-radius:999px;background:#e6f7ee;overflow:hidden;margin:0 14px 11px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
.xpbar>i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#a8ecc9,#4fbb8a);transition:width .25s}

/* 画面切りかえの まる広がり */
#wipe{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#fff,#ffd3e0 60%,#ff9ab5);
  clip-path:circle(0px at 50% 50%);
  transition:clip-path .46s cubic-bezier(.45,0,.25,1)
}
/* 幕は 見た目だけ。入力は ふさがない（残ったときに 何も押せなくなるため） */
#wipe .wmark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:54px;opacity:0;transition:opacity .2s
}
#wipe.on .wmark{opacity:1}

/* 上の計器 */
.ihead{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;padding:11px 12px;align-items:center}
.ihead.five{grid-template-columns:1fr 1fr 1fr .7fr auto;gap:6px}
.istat.help b{color:#7a8fb8}
.istat i{display:block;font-style:normal;font-size:9px;letter-spacing:.06em;color:var(--ink-l);font-weight:400}
.istat b{display:block;font-family:var(--pop);font-size:clamp(15px,4.6vw,19px);line-height:1.1;font-variant-numeric:tabular-nums}
.istat.coin b{color:#e09a00}
.istat.ship b{color:var(--pink-d)}
.istat.carry b{color:#4fbb8a}
.iflow{padding:0 14px 11px;font-size:10.5px;font-weight:400;color:var(--ink-l);line-height:1.4}
.iflow b{color:var(--pink-d);font-weight:800}

/* 下のボタン */
.ibtnrow{display:grid;grid-template-columns:1fr auto;gap:9px}
/* 突発イベントを 自分で よべるボタン */
.floodbtn{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:14px 12px;
  border-radius:999px;border:4px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:clamp(12px,3.6vw,15px);color:#6b4a1d;
  background:linear-gradient(180deg,#ffe9c2,#e8bf7a);box-shadow:0 7px 0 #b98d4e;
  animation:floodPulse 1.6s ease-in-out infinite
}
.floodbtn:active{transform:translateY(5px);box-shadow:0 2px 0 #b98d4e}
.floodbtn:disabled{opacity:.45;animation:none;cursor:default}
@keyframes floodPulse{50%{transform:scale(1.03)}}
.backbtn{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:14px 18px;
  border-radius:999px;border:4px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:clamp(13px,3.8vw,16px);color:#2f5a45;
  background:linear-gradient(180deg,#c4f2dd,#7ddab0);box-shadow:0 7px 0 #46a077
}
.backbtn:active{transform:translateY(5px);box-shadow:0 2px 0 #46a077}
.backbtn svg{width:20px;height:20px;flex:none}

/* まちの中の ゲームアイコン（ふわふわ光る） */
@keyframes gameGlow{50%{filter:drop-shadow(0 0 10px rgba(255,215,110,.9))}}

/* =========================================================
   最終形態デモ（まちの中に入れたぶん）
   ぜんぶ #pitch の中だけに効くように書く（まちのCSSと ぶつからないため）
   ========================================================= */
#pitch{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:28;display:none;overflow-y:auto;overflow-x:hidden;
  background:linear-gradient(170deg,#fff3f8 0%,#fffaf2 45%,#eefff7 100%);
  -webkit-overflow-scrolling:touch
}
#pitch.on{display:block}
#pitch.health{background:#eef4f9;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;font-weight:400;color:#16324a}
#pitch .pw{max-width:460px;margin:0 auto;padding:12px 12px 34px}

#pitch .p-brand{display:flex;align-items:center;gap:10px;padding:6px 4px 12px}
#pitch .p-logo{width:44px;height:44px;border-radius:50%;flex:none;position:relative;
  background:linear-gradient(180deg,#fff2f6,#ff7d9f);border:3px solid #fff;box-shadow:0 4px 0 rgba(255,154,181,.4)}
#pitch .p-logo::before,#pitch .p-logo::after{content:"";position:absolute;top:16px;width:5px;height:6px;border-radius:50%;background:#5b3a47}
#pitch .p-logo::before{left:11px}#pitch .p-logo::after{right:11px}
#pitch .p-brand h1{font-family:var(--pop);font-size:clamp(15px,4.6vw,19px);margin:0;line-height:1.25;color:var(--ink)}
#pitch .p-brand h1 small{display:block;font-family:var(--jp);font-size:10px;font-weight:400;color:var(--ink-l);margin-top:3px}
#pitch.health .p-logo{background:linear-gradient(180deg,#e8f2fa,#1668ad);box-shadow:none}
#pitch.health .p-brand h1{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:clamp(17px,5vw,21px);color:#16324a}
#pitch.health .p-brand h1 small{color:#4a6377;font-size:12px}

/* モード切りかえ＋まちへ */
#pitch .p-switch{display:flex;gap:6px;padding:5px;border-radius:999px;margin:0 4px 12px;
  background:rgba(255,255,255,.9);border:3px solid #fff;box-shadow:0 5px 0 rgba(255,154,181,.28)}
#pitch.health .p-switch{background:#fff;border-color:#d3e2ee;box-shadow:0 2px 6px rgba(22,50,74,.12)}
#pitch .p-switch button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 8px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--pop);font-size:13px;color:var(--ink-l);background:transparent}
#pitch .p-switch button svg{width:18px;height:18px}
#pitch .p-switch button.on{background:linear-gradient(180deg,#ffb0c6,var(--pink-d));color:#fff;box-shadow:0 3px 0 #e4577c}
#pitch.health .p-switch button{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:15px;color:#4a6377}
#pitch.health .p-switch button.on{background:#1668ad;color:#fff;box-shadow:none}

#pitch .p-card{background:rgba(255,255,255,.92);border:3px solid #fff;border-radius:26px;padding:14px;
  box-shadow:0 8px 0 rgba(255,154,181,.28), 0 14px 30px rgba(255,154,181,.18);margin-bottom:14px;position:relative}
#pitch .p-sec{display:flex;align-items:center;gap:8px;margin:0 0 10px}
#pitch .p-no{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--pop);font-size:12px;color:#fff;background:var(--pink-d);box-shadow:0 3px 0 #e4577c}
#pitch .p-sec h2{font-family:var(--pop);font-size:14px;margin:0;line-height:1.3;flex:1;color:var(--ink)}
#pitch .p-sec h2 small{display:block;font-family:var(--jp);font-size:9.5px;font-weight:400;color:var(--ink-l);margin-top:2px}

#pitch .p-stage{position:relative;width:100%;aspect-ratio:1/.86;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#fff6fa,#eefff7);border:3px solid #ffe3ec}
#pitch .p-stage canvas{width:100%;height:100%;display:block;touch-action:manipulation;cursor:pointer}
#pitch #pCrack{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
#pitch .p-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
#pitch .p-stat{text-align:center;background:#fff6fa;border:3px solid #fff;border-radius:16px;padding:7px 4px;
  box-shadow:0 3px 0 rgba(255,154,181,.3)}
#pitch .p-stat i{display:block;font-style:normal;font-size:9px;color:var(--ink-l);font-weight:400}
#pitch .p-stat b{display:block;font-family:var(--pop);font-size:16px;color:var(--pink-d);line-height:1.2}
#pitch .p-stat.buffed{background:#fff8e6;border-color:#ffe9a8}
#pitch .p-stat.buffed b{color:#e09a00}
#pitch .p-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
#pitch .p-btn{padding:14px 10px;border-radius:999px;border:4px solid #fff;cursor:pointer;
  font-family:var(--pop);font-size:clamp(13px,3.8vw,15px);color:#fff;
  background:linear-gradient(180deg,#ffb0c6,var(--pink-d));box-shadow:0 6px 0 #e4577c}
#pitch .p-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #e4577c}
#pitch .p-btn:disabled{opacity:.45;cursor:default}
#pitch .p-btn.y{background:linear-gradient(180deg,#ffe38f,#ffb02e);color:#5a3a00;box-shadow:0 6px 0 #c9820a}
#pitch .p-btn.g{background:linear-gradient(180deg,#c4f2dd,#7ddab0);color:#2f5a45;box-shadow:0 6px 0 #46a077}
#pitch .p-btn.b{background:linear-gradient(180deg,#d6e9ff,#9ec8ff);color:#274a70;box-shadow:0 6px 0 #5c86b8}
#pitch .p-btn.wide{grid-column:1/-1}
#pitch .p-hint{margin-top:9px;font-size:11px;font-weight:400;color:var(--ink-l);line-height:1.5;text-align:center}
#pitch .p-hint b{color:var(--pink-d);font-weight:800}

#pitch .p-sponsors{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x mandatory}
#pitch .p-sp{flex:none;width:138px;scroll-snap-align:start;cursor:pointer;text-align:left;position:relative;
  background:linear-gradient(180deg,#fff,#f7f1ff);border:3px solid #e8dcff;border-radius:20px;
  padding:11px 10px;box-shadow:0 5px 0 rgba(195,169,255,.45);font-family:var(--jp);font-weight:800;color:var(--ink)}
#pitch .p-sp:active{transform:translateY(3px)}
#pitch .p-sp.used{filter:grayscale(.35);opacity:.7}
#pitch .p-sp .em{font-size:28px;display:block;margin-bottom:5px}
#pitch .p-sp .co{font-size:9.5px;font-weight:400;color:var(--ink-l);display:block;margin-bottom:2px}
#pitch .p-sp .nm{font-size:12px;line-height:1.3;display:block}
#pitch .p-sp .bf{display:inline-block;margin-top:6px;font-size:9.5px;color:#7a5cc0;background:#efe7ff;border-radius:999px;padding:2px 7px}
#pitch .p-sp .tag{position:absolute;top:-9px;right:-4px;font-size:8.5px;background:#ffe9a8;color:#7a5a10;
  border:2px solid #fff;border-radius:999px;padding:1px 6px}
#pitch .p-note{margin-top:8px;font-size:9.5px;font-weight:400;color:var(--ink-l);line-height:1.6}
#pitch .p-note b{color:var(--pink-d)}

#pitch .p-gacha{position:relative;height:150px;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#fff6fa,#f3f0ff);border:3px solid #ffe3ec}
#pitch .p-gacha canvas{width:100%;height:100%;display:block}
#pitch .p-result{display:none}
#pitch .p-result.on{display:block}
#pitch .p-graphs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
#pitch .p-col{background:#fff6fa;border:3px solid #fff;border-radius:18px;padding:10px;box-shadow:0 4px 0 rgba(255,154,181,.28)}
#pitch .p-col h3{font-family:var(--pop);font-size:11px;margin:0 0 8px;color:var(--pink-d)}
#pitch .p-bar{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:10px;font-weight:400}
#pitch .p-bar .lb{width:46px;flex:none;color:var(--ink-l)}
#pitch .p-bar .tr{flex:1;height:12px;border-radius:999px;background:#ffeaf1;overflow:hidden;box-shadow:inset 0 2px 4px rgba(255,154,181,.3)}
#pitch .p-bar .tr>i{display:block;height:100%;border-radius:999px;width:0;transition:width .8s cubic-bezier(.22,1.5,.36,1)}
#pitch .p-bar .vv{width:34px;flex:none;text-align:right;font-family:var(--pop);font-size:11px;color:var(--ink)}
#pitch .p-link{text-align:center;margin:10px 0 2px;font-size:10.5px;font-weight:400;color:var(--ink-l)}
#pitch .p-link b{color:var(--pink-d);font-weight:800}
#pitch .p-trend{margin-top:10px;background:#fff6fa;border:3px solid #fff;border-radius:18px;padding:10px;box-shadow:0 4px 0 rgba(255,154,181,.28)}
#pitch .p-trend h3{font-family:var(--pop);font-size:11px;margin:0 0 6px;color:var(--pink-d)}
#pitch .p-trend canvas{width:100%;height:96px;display:block}
#pitch .p-shot{margin-top:10px;display:none}
#pitch .p-shot.on{display:block}
#pitch .p-shot img{width:100%;border-radius:20px;border:3px solid #fff;box-shadow:0 6px 0 rgba(255,154,181,.3);display:block}
#pitch .p-foot{font-size:9.5px;font-weight:400;color:#bda6b1;line-height:1.7;text-align:center;padding:4px 6px 0}
#pitch .p-foot b{color:#a58fc9}

/* まちへ すすむ */
#pitch .p-go{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:17px 12px;border-radius:999px;border:4px solid #fff;cursor:pointer;margin-top:4px;
  font-family:var(--pop);font-size:clamp(14px,4.2vw,17px);color:#2f5a45;
  background:linear-gradient(180deg,#c4f2dd,#7ddab0);box-shadow:0 7px 0 #46a077}
#pitch .p-go:active{transform:translateY(5px);box-shadow:0 2px 0 #46a077}
#pitch .p-go svg{width:22px;height:22px;flex:none}

/* ---- 健康管理モード（#pitch.health のときだけ） ---- */
#pitch .healthonly{display:none}
#pitch.health .healthonly{display:block}
#pitch.health .funonly{display:none !important}
#pitch .hcard{background:#fff;border:2px solid #d3e2ee;border-radius:14px;padding:18px 16px;margin-bottom:14px;
  box-shadow:0 2px 8px rgba(22,50,74,.07)}
#pitch .hsec{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid #d3e2ee}
#pitch .hsec .ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;background:#e8f2fa;color:#1668ad}
#pitch .hsec .ic svg{width:22px;height:22px}
#pitch .hsec h2{font-size:18px;font-weight:700;margin:0;line-height:1.35;color:#16324a;font-family:"Noto Sans JP",sans-serif}
#pitch .hsec h2 small{display:block;font-size:13px;font-weight:400;color:#4a6377;margin-top:3px}
#pitch .htotal{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;background:#e8f2fa;border:2px solid #c6ddf0;margin-bottom:14px}
#pitch .htotal .g{width:64px;height:64px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:34px;font-weight:700;color:#fff;background:#1668ad;line-height:1}
#pitch .htotal .tx b{display:block;font-size:17px;font-weight:700;line-height:1.4}
#pitch .htotal .tx span{display:block;font-size:13px;color:#4a6377;margin-top:3px;line-height:1.6}
#pitch .hmarks{display:flex;flex-direction:column;gap:10px}
#pitch .mk{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:13px 14px;border:2px solid #d3e2ee;border-radius:12px}
#pitch .mk .nm{font-size:16px;font-weight:700;line-height:1.35}
#pitch .mk .nm small{display:block;font-size:12px;font-weight:400;color:#4a6377;margin-top:2px}
#pitch .mk .vl{font-size:26px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#pitch .mk .vl u{font-size:13px;font-weight:400;color:#4a6377;text-decoration:none;margin-left:3px}
#pitch .mk .gd{width:42px;height:42px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:21px;font-weight:700;color:#fff;line-height:1}
#pitch .gd.a,#pitch .gd.b{background:#1a7f52}#pitch .gd.c{background:#b06a00}#pitch .gd.d,#pitch .gd.e{background:#b3261e}
#pitch .mk.a,#pitch .mk.b{border-color:#bfe0d0}#pitch .mk.c{border-color:#f0dcb8}#pitch .mk.d,#pitch .mk.e{border-color:#f2c9c6}
#pitch .hbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:17px 14px;border-radius:12px;
  border:2px solid #1668ad;cursor:pointer;font-family:"Noto Sans JP",sans-serif;font-size:17px;font-weight:700;color:#fff;
  background:#1668ad;margin-top:14px;min-height:56px}
#pitch .hbtn.sub{background:#fff;color:#1668ad}
#pitch .hbtn:active{transform:translateY(1px)}
#pitch .hbtn svg{width:22px;height:22px;flex:none}
#pitch .hnote{margin:10px 2px 0;font-size:12.5px;line-height:1.8;color:#4a6377}
#pitch .hnote b{color:#16324a;font-weight:700}
#pitch .hchart{border:2px solid #d3e2ee;border-radius:12px;padding:12px;margin-bottom:12px}
#pitch .hchart h3{font-size:15px;font-weight:700;margin:0 0 4px;color:#16324a}
#pitch .hchart p{font-size:12.5px;color:#4a6377;margin:0 0 8px;line-height:1.7}
#pitch .hchart canvas{width:100%;height:170px;display:block}
#pitch .hleg{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:13px}
#pitch .hleg span{display:flex;align-items:center;gap:6px}
#pitch .hleg i{width:16px;height:5px;border-radius:3px;display:block}
#pitch .hread{margin-top:12px;padding:13px 14px;border-radius:12px;background:#e8f2fa;border:2px solid #c6ddf0;font-size:14.5px;line-height:1.8}
#pitch .hadv{display:flex;gap:12px;align-items:flex-start}
#pitch .havatar{width:56px;height:56px;border-radius:14px;flex:none;background:#e8f2fa;border:2px solid #c6ddf0;position:relative}
#pitch .havatar::before,#pitch .havatar::after{content:"";position:absolute;top:21px;width:6px;height:8px;border-radius:3px;background:#0f4d82}
#pitch .havatar::before{left:15px}#pitch .havatar::after{right:15px}
#pitch .havatar i{position:absolute;left:19px;right:19px;bottom:14px;height:3px;border-radius:2px;background:#0f4d82;display:block}
#pitch .hwho{font-size:14px;font-weight:700;margin-bottom:8px}
#pitch .hwho small{display:block;font-size:12px;font-weight:400;color:#4a6377;margin-top:2px}
#pitch .htips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
#pitch .htips li{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:12px;border:2px solid #d3e2ee;font-size:15px;line-height:1.75}
#pitch .htips li.good{background:#f1faf5;border-color:#bfe0d0}
#pitch .htips li.act{background:#fffaf0;border-color:#f0dcb8}
#pitch .htips li .t{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:14px;font-weight:700;color:#fff}
#pitch .htips li.good .t{background:#1a7f52}#pitch .htips li.act .t{background:#b06a00}
#pitch .hrep{margin-top:14px;display:none}
#pitch .hrep.on{display:block}
#pitch .hrep img{width:100%;border:2px solid #d3e2ee;border-radius:12px;display:block}
#pitch.health .p-foot{color:#4a6377;font-size:12px;line-height:1.9}
#pitch.health .p-foot b{color:#16324a}
#pitch.health .p-go{font-family:"Noto Sans JP",sans-serif;font-weight:700;background:#1668ad;color:#fff;border-color:#1668ad;box-shadow:none;border-radius:12px}

/* 読み取り／スキャンの ポップアップ */
#pPop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:32;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(255,200,220,.6);backdrop-filter:blur(6px)}
#pPop.on{display:flex}
#pPop .box{width:100%;max-width:340px;padding:20px;text-align:center;background:#fff;
  border:4px solid var(--pink-l);border-radius:28px;box-shadow:0 12px 0 rgba(255,154,181,.3)}
#pPop h3{font-family:var(--pop);font-size:16px;margin:0 0 6px;color:var(--pink-d)}
#pPop p{font-size:12px;font-weight:400;line-height:1.7;margin:0 0 12px;color:var(--ink)}
#pPop .em{font-size:52px;display:block;margin-bottom:6px}
#pPop .sb{height:12px;border-radius:999px;background:#eee6ff;overflow:hidden;margin:10px 0 14px}
#pPop .sb>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#d6c7ff,#a98cff);transition:width .1s linear}
#pPop .p-btn{width:100%}
body.pitchhealth #pPop{background:rgba(22,50,74,.45)}
body.pitchhealth #pPop .box{border:2px solid #d3e2ee;border-radius:14px}
body.pitchhealth #pPop h3{font-family:"Noto Sans JP",sans-serif;color:#16324a;font-size:18px}
body.pitchhealth #pPop p{font-size:14px;color:#4a6377}
body.pitchhealth #pPop .p-btn{font-family:"Noto Sans JP",sans-serif;font-size:16px;font-weight:700;
  background:#1668ad;border-color:#1668ad;box-shadow:none;border-radius:12px;padding:15px}
body.pitchhealth #pPop .sb{background:#dbe8f2}
body.pitchhealth #pPop .sb>i{background:linear-gradient(90deg,#7fb4de,#1668ad)}

/* デモの画面が ゆれる（怪獣に なぐられたとき） */
#pitch.shaky .p-card,#pitch.shaky .hcard{animation:uiWobble .38s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .feed,.power.full>i,#rainbow.on,.mapme,.actbtn{animation:none}
}
/* ---- 人体実験の たんとうキャラ「ちび血球はかせ」 ---- */
.docbox{display:flex;align-items:center;gap:10px;margin:0 0 12px;
  background:linear-gradient(180deg,#fffdfe,#fff4f8);
  border:3px solid #ffe3ec;border-radius:22px;padding:10px 12px}
.docbox canvas{width:118px;height:107px;flex:0 0 118px}
.docsay{flex:1;min-width:0;position:relative;background:#fff;
  border:3px solid #ffe3ec;border-radius:18px;padding:9px 12px}
.docsay:before{content:'';position:absolute;left:-11px;top:24px;width:0;height:0;
  border:9px solid transparent;border-right-color:#ffe3ec}
.docsay:after{content:'';position:absolute;left:-6px;top:24px;width:0;height:0;
  border:9px solid transparent;border-right-color:#fff}
.docname{display:block;font-size:13px;color:#ff6f92;font-weight:800}
.docname small{display:inline-block;margin-left:6px;font-size:11px;color:#a98a97;font-weight:400}
.docsay p{margin:3px 0 0;font-size:13.5px;line-height:1.6;color:#7a5c68}
@media (max-width:420px){
  .docbox{flex-direction:column;text-align:center}
  .docsay:before,.docsay:after{display:none}
}

/* =========================================================
   いろいろな スマホの 大きさ・古い 機種に 合わせる
   ========================================================= */
/* iPhone の 切りかき（ノッチ）や 下の バーに ボタンが かくれないように */
.hud.top{padding-top:calc(10px + env(safe-area-inset-top, 0px))}
.hud.bot{padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
/* ボタンを すばやく 2回 おしても、画面が 拡大されないように */
button{touch-action:manipulation}
/* まちを 長おししても メニューが 出ないように（写真館の 写真は これまでどおり 長おしで 保存できる） */
#stage,#bg3d{-webkit-touch-callout:none}
/* タブレットなど 横に 広い 画面では、パネルと ボタンが のびすぎないように */
.hud.top > .panel, .hud.bot > *{max-width:640px;margin-left:auto;margin-right:auto}

/* スマホ（たて）と 小さい 画面：
   上と下の パネルを うすくして、まちが 見える ところを 広くする。
   はば 440px 以下も ふくめるのは、ふつうの 大きさの スマホでも 名前が 2行に 折れたため */
@media (max-height: 740px), (max-width: 440px){
  .hud.top{padding-left:8px;padding-right:8px}
  .hud.bot{padding-left:8px;padding-right:8px}
  .head{gap:6px;padding:8px 10px 2px}
  .head .name{font-size:clamp(12px,3.7vw,15px);white-space:nowrap;min-width:0;overflow:hidden}
  /* 変身の 名前は 長いもの（ギトギト巨大油スライム形態）が あるので、はみ出たら「…」に する */
  .head .name small{overflow:hidden;text-overflow:ellipsis}
  .head .cnt b{font-size:14px}
  .tool{width:30px;height:30px;border-width:2px}
  .tool svg{width:15px;height:15px}
  .powerwrap{padding:0 12px 9px}
  .power{height:16px}
  .powerlab{margin-bottom:3px}
  .feed{padding:12px 10px;font-size:15px}
  .feed svg{width:21px;height:21px}
  .mapbtn{padding:12px 14px;font-size:14px}
  .actbtn{padding:11px 10px;font-size:14px}
  .legal{margin-top:5px;font-size:8.5px;line-height:1.35}
  #minimap{width:92px;height:66px}
}
/* とても 低い 画面（スマホを 横に したとき） */
@media (max-height: 480px){
  .head .name small, .powerlab{display:none}
  .head{padding:6px 10px 2px}
  .powerwrap{padding:0 12px 7px}
  .power{height:12px}
  .feed, .mapbtn{padding:9px 12px;font-size:13px}
  .legal{margin-top:3px;font-size:8px}
  #minimap{width:80px;height:56px}
}
/* aspect-ratio が 使えない 古い ブラウザ（iOS 14 など）でも、四角の 形が つぶれないように */
@supports not (aspect-ratio: 1 / 1){
  .mapfield{height:0;padding-bottom:68.2%}
  .pshot{height:0;padding-bottom:100%}
  .pshot canvas{position:absolute;top:0;left:0}
  .album .slot{height:0;padding-bottom:100%}
  .album .slot img{position:absolute;top:0;left:0}
  #pitch .p-stage{height:0;padding-bottom:86%}
  #pitch .p-stage canvas{position:absolute;top:0;left:0}
}
/* =========================================================
   えいようキッチン（本格版）
   ここだけ 落ち着いた 色と 文字に している（子どもっぽさを 抑えるため。ユーザーの 指示）。
   アイボリー × 濃いグレー × テラコッタ。丸くない ゴシック体。ぷっくりした 影は 使わない
   ========================================================= */
#cook{
  --ck-bg:#f6f2ec; --ck-card:#ffffff; --ck-ink:#2d2926; --ck-sub:#7a716a; --ck-line:#e3dbd1;
  --ck-acc:#c4553b; --ck-acc-d:#a64530; --ck-ok:#3f7d64; --ck-gold:#b38728;
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:24;display:none;
  background:rgba(34,28,24,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding:14px;overflow:auto
}
#cook.on{display:flex}
#cook .box{width:100%;max-width:440px;padding:16px;margin:auto;background:var(--ck-bg);color:var(--ck-ink);
  border:1px solid var(--ck-line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18);
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;font-weight:400;
  -webkit-user-select:none;user-select:none}
#cook b{font-weight:700}
#cook .note{font-size:12px;color:var(--ck-sub);margin:0 0 12px;line-height:1.7}
#cook .note b{color:var(--ck-acc)}
#cook .ck-free{margin:12px 0 0;font-size:11px}

/* ボタン（ほかの 画面の ぷっくり ボタンを、ここでは 平らに する） */
#cook .pbtn{font-family:inherit;font-weight:700;font-size:13px;color:var(--ck-ink);background:var(--ck-card);
  border:1px solid var(--ck-line);border-radius:10px;box-shadow:none;padding:12px 10px}
#cook .pbtn:active{transform:translateY(1px);box-shadow:none}
#cook .pbtn.g{background:var(--ck-acc);border-color:var(--ck-acc);color:#fff}
#cook .pbtn.g:active{background:var(--ck-acc-d)}
#cook .pbtn:disabled{opacity:.4}
#cook .pbtns{margin-top:12px}
.ck-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}

/* 見出し */
.ck-rhead{margin:0 0 8px}
.ck-rhead .lb{display:block;font-size:10.5px;letter-spacing:.12em;color:var(--ck-sub)}
.ck-rhead b{display:block;font-size:19px;letter-spacing:.02em}

/* コイン（落ち着いた 金色） */
#cook .coin{display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:-2px;
  background:radial-gradient(circle at 35% 35%,#f1df9e,#c9a13d 60%,#9c7a24);box-shadow:none}
.ck-coin{font-size:12px;color:var(--ck-sub);margin:0 0 12px}
.ck-coin b{font-size:18px;color:var(--ck-ink);font-variant-numeric:tabular-nums}

/* ステージ一覧 */
.ck-stage{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px;
  border-radius:10px;border:1px solid var(--ck-line);background:var(--ck-card);cursor:pointer;
  font-family:inherit;color:var(--ck-ink)}
.ck-stage .no{font-size:13px;font-weight:700;color:var(--ck-sub);font-variant-numeric:tabular-nums}
.ck-stage .tx{flex:1;min-width:0}
.ck-stage b{display:block;font-size:14px}
.ck-stage small{display:block;font-size:11px;color:var(--ck-sub);margin-top:2px}
.ck-stage.lock{opacity:.5;cursor:default}
/* ランクの 文字 */
.rk{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 4px;border-radius:6px;font-weight:700;font-size:15px;
  border:1px solid var(--ck-line);color:var(--ck-sub);background:#faf7f3}
.rk-S{color:#fff;background:var(--ck-gold);border-color:var(--ck-gold)}
.rk-A{color:#fff;background:var(--ck-acc);border-color:var(--ck-acc)}
.rk-B{color:var(--ck-ok);border-color:#bcd6c8;background:#f1f7f3}
.rk-C{color:var(--ck-ink)}

.ck-rule{margin-top:12px;padding:10px 12px;border:1px solid var(--ck-line);border-radius:10px;background:var(--ck-card);font-size:12px;line-height:1.7}
.ck-rule summary{cursor:pointer;font-weight:700}
.ck-rule ol{margin:8px 0 6px;padding-left:20px}
.ck-rule p{margin:0;color:var(--ck-sub)}

/* 営業中の 上の バー */
.ck-hud{display:flex;align-items:center;gap:10px;font-size:12px;padding:0 0 8px;border-bottom:1px solid var(--ck-line)}
.ck-hud .st{font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-hud .tm{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ck-hud .mini{color:var(--ck-sub);white-space:nowrap}
.ck-hud .mini b{color:var(--ck-ink);font-variant-numeric:tabular-nums}
.ck-quit{font-family:inherit;font-size:11px;padding:5px 9px;border-radius:8px;border:1px solid var(--ck-line);background:var(--ck-card);color:var(--ck-sub);cursor:pointer}
.ck-sub{display:flex;justify-content:space-between;min-height:18px;margin:6px 0 4px;font-size:11px}
.ck-sub .cb{font-weight:700;color:var(--ck-acc);letter-spacing:.05em}
.ck-sub .ln{color:var(--ck-sub)}

/* 伝票（注文票） */
.ck-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ck-tk{position:relative;display:flex;flex-direction:column;gap:3px;text-align:left;padding:8px 8px 12px;min-height:84px;
  border-radius:8px;border:1px solid var(--ck-line);background:var(--ck-card);cursor:pointer;font-family:inherit;color:var(--ck-ink);overflow:hidden}
.ck-tk.on{border-color:var(--ck-acc);box-shadow:inset 0 0 0 1px var(--ck-acc)}
.ck-tk.empty{display:grid;place-items:center;font-size:11px;color:#b9b0a7;border-style:dashed;cursor:default}
.ck-tk .nm{font-size:12.5px;font-weight:700}
.ck-tk .nd{display:flex;flex-direction:column;gap:1px;font-size:10.5px;color:var(--ck-sub)}
.ck-tk .nd i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:4px;vertical-align:0}
.ck-tk .ng{font-size:10px;color:var(--ck-acc)}
.ck-tk .tb{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ede6dd}
.ck-tk .tb i{display:block;height:100%;width:100%;background:var(--ck-ok)}
.ck-tk .tb i.low{background:var(--ck-acc)}

/* カルテ（えらんだ 伝票の くわしい 中身） */
.ck-karte{margin-top:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--ck-line);background:var(--ck-card)}
.ck-empty{font-size:12px;color:var(--ck-sub);text-align:center;padding:8px 0}
.ck-who{font-size:12.5px}
.ck-say{font-size:11.5px;color:var(--ck-sub);line-height:1.55;margin:3px 0 7px}
.ck-needs{display:flex;flex-direction:column;gap:5px}
.ck-need{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:8px;font-size:11.5px}
.ck-need .lb{color:var(--ck-sub)}
.ck-need .seg{display:flex;gap:3px}
.ck-need .seg i{flex:1;height:8px;border-radius:2px;background:#ece5dc;max-width:34px}
.ck-need .v{font-variant-numeric:tabular-nums;font-weight:700}
.ck-need .v em{font-style:normal;color:var(--ck-sub);font-weight:400}
.ck-need.ng{grid-template-columns:72px 1fr;color:var(--ck-acc)}

/* 提供した ときの 結果 */
/* 結果は 画面の 上に うかぶ お知らせ（場所を とらないので、小さい スマホでも はみ出さない） */
.ck-toast{display:none;position:fixed;left:50%;top:8px;transform:translateX(-50%);width:min(420px,calc(100vw - 16px));z-index:31;
  border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.28);background:#2d2926;cursor:pointer}
.ck-toast.on{display:block;animation:ckIn .25s ease-out}
@keyframes ckIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.ck-toast .ck-tip{padding:0 12px 10px;margin:0;color:#d9d0c7}
.ck-ts{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:#2d2926;color:#f6f2ec}
.ck-ts .sc{display:flex;align-items:baseline;gap:6px;flex:none}
.ck-ts .sc b{font-size:28px;font-variant-numeric:tabular-nums;line-height:1}
.ck-ts .sc small{font-size:11px;opacity:.8}
.ck-ts .rk{min-width:26px;height:26px;font-size:13px;align-self:center}
.ck-ts .tx{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:11px}
.ck-ts .tx > b{font-size:12.5px}
.ck-ts .br{opacity:.85;font-variant-numeric:tabular-nums}
.ck-ts .tags{display:flex;flex-wrap:wrap;gap:4px}
.ck-ts .tags em{font-style:normal;font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.14)}
.ck-ts .tags em.ng{background:rgba(196,85,59,.5)}
.ck-ts .tags em.cb{background:var(--ck-gold);color:#2d2926;font-weight:700}
.ck-ts .coin-l{font-variant-numeric:tabular-nums}
.ck-ts.miss{display:block;color:#f2b8a8}
.ck-ts.miss small{display:block;color:#cfc6bd;margin-top:2px}
.ck-tip{margin-top:6px;font-size:11px;line-height:1.6;color:var(--ck-sub)}

/* 手順 */
.ck-steps{display:flex;gap:4px;margin:10px 0 2px}
.ck-steps span{flex:1;text-align:center;font-size:10.5px;padding:5px 2px;border-bottom:2px solid var(--ck-line);color:#b0a69d;white-space:nowrap}
.ck-steps span.now{color:var(--ck-ink);font-weight:700;border-color:var(--ck-acc)}
.ck-steps span.done{color:var(--ck-ok);border-color:#bcd6c8}

/* なべ（えらんだ 食材） */
.ck-pan{display:flex;justify-content:center;gap:8px;margin:10px 0}
.ck-slot{width:60px;height:56px;border-radius:8px;border:1px dashed #cfc5ba;background:#faf7f3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;line-height:1}
.ck-slot span{font-size:22px}
.ck-slot.on{border:1px solid var(--ck-line);background:var(--ck-card);cursor:pointer;font-family:inherit;color:var(--ck-ink)}
.ck-slot small{font-size:9.5px;margin-top:3px}

/* 食材 */
.ck-ings{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ck-ing{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 7px;border-radius:8px;border:1px solid var(--ck-line);
  background:var(--ck-card);cursor:pointer;font-family:inherit;color:var(--ck-ink)}
.ck-ing:active{background:#f3ede6}
.ck-ing .em{font-size:20px;line-height:1.1}
.ck-ing .nm{font-size:10.5px;white-space:nowrap}
.ck-ing .bars{display:flex;gap:2px;height:4px}
.ck-ing .bars span{display:block;height:4px;border-radius:1px}

/* まな板・なべの 絵 */
.ck-board{border-radius:10px;overflow:hidden;border:1px solid var(--ck-line);background:#efe9e1;margin-top:10px}
.ck-board canvas{width:100%;height:auto;display:block}
.ck-big-btn{width:100%;margin-top:10px;font-size:15px !important;padding:14px 10px !important;display:flex;align-items:center;justify-content:center;gap:8px}
.ck-big-btn small{font-size:11px;opacity:.85;font-variant-numeric:tabular-nums}
.ic{display:inline-flex;width:20px;height:20px}
.ic svg{width:100%;height:100%}

/* 調理法 */
.ck-m3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.ck-m{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:10px;border:1px solid var(--ck-line);
  background:var(--ck-card);cursor:pointer;font-family:inherit;color:var(--ck-ink)}
.ck-m .ic{width:24px;height:24px;color:var(--ck-acc)}
.ck-m b{font-size:13px}
.ck-m small{font-size:9.5px;color:var(--ck-sub);text-align:center;line-height:1.35}
.ck-m:disabled{opacity:.35;cursor:default}

/* 火加減 */
.ck-glab{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;color:var(--ck-sub);margin-top:10px}
.ck-glab b{font-size:12px;color:var(--ck-ink)}
.ck-gauge{position:relative;height:22px;border-radius:6px;margin-top:4px;overflow:hidden;
  background:linear-gradient(90deg,#dfe5e8,#efe1c9 45%,#e9b68f 72%,#c96a55)}
/* 緑＝良好、濃い緑＝完璧（cookStopHeat の 範囲と 同じ） */
.ck-gauge .ok{position:absolute;top:0;bottom:0;left:32%;width:38%;background:rgba(63,125,100,.28)}
.ck-gauge .best{position:absolute;top:0;bottom:0;left:44%;width:14%;background:rgba(63,125,100,.75)}
.ck-gauge span{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;border-radius:2px;background:#2d2926;box-shadow:0 0 0 2px #fff}

.ck-hint{margin:8px 0 0;font-size:11px;color:var(--ck-sub);text-align:center;line-height:1.5}
.ck-hint:empty{display:none}

/* 結果・ショップ */
.ck-rank{display:flex;align-items:center;gap:16px;margin:8px 0 12px}
.ck-rank .rk{min-width:64px;height:64px;font-size:34px;border-radius:12px}
.ck-rank .avg b{display:block;font-size:30px;font-variant-numeric:tabular-nums;line-height:1}
.ck-rank .avg small{font-size:11px;color:var(--ck-sub)}
.ck-stat{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:10px;background:var(--ck-card);border:1px solid var(--ck-line);border-radius:10px}
.ck-stat th,.ck-stat td{padding:8px 12px;border-bottom:1px solid var(--ck-line);text-align:left}
.ck-stat th{font-weight:400;color:var(--ck-sub)}
.ck-stat td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.ck-stat tr:last-child th,.ck-stat tr:last-child td{border-bottom:0}
.ck-item{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:8px;border-radius:10px;border:1px solid var(--ck-line);background:var(--ck-card)}
.ck-item .tx{flex:1;min-width:0}
.ck-item .tx b{display:block;font-size:13px}
.ck-item .tx small{display:block;font-size:11px;color:var(--ck-sub);margin-top:2px}
#cook .ck-item .pbtn{flex:none;padding:9px 12px}
.ck-have{flex:none;font-size:11px;color:var(--ck-ok)}

/* 手順の 間は せりふを かくして、小さい スマホでも 1画面に おさめる */
#ckPlay[data-step="cut"] .ck-say,#ckPlay[data-step="heat"] .ck-say{display:none}
/* 低い スマホ（iPhone SE など） */
@media (max-height: 760px){
  .ck-say{display:none}
  .ck-tk{min-height:70px}
  .ck-steps span{padding:3px 2px}
  .ck-hud{padding-bottom:6px}
  #cook{padding:6px}
  #cook .box{padding:10px 11px}
  .ck-tk{min-height:76px;padding:7px 7px 11px}
  .ck-karte{padding:8px 10px}
  .ck-say{margin:2px 0 5px}
  .ck-steps{margin:8px 0 0}
  .ck-pan{margin:7px 0}
  .ck-slot{height:50px;width:54px}
  .ck-ing{padding:5px 2px}
  .ck-ing .em{font-size:19px}
  .ck-row2{margin-top:8px}
  #cook .ck-row2 .pbtn{padding:10px 8px}
  .ck-board{margin-top:7px}
  .ck-big-btn{padding:12px 10px !important;margin-top:8px}
}