/* パイン、のせんといて！ — スマホ版（claude.ai）から 2026-11-09 に持ちこみ。中身はスマホ版のまま */
/* Layout: 縦長の筐体ひとつ ( 横720 x 縦1040〜1400 の論理座標 ) を赤いギンガムのテーブルクロスの上に置く。1rem = 論理100px */
:root {
  --ink: #2a1810;
  --kraft: #d6ae74;
  --tomato: #d63a23;
  --basil: #2f7d3b;
  --pine: #ffc928;
  --cream: #fff5e1;
  --cloth: rgb(199 54 43 / .5);
  --cloth-bg: #f3e8d6;
  --f-disp: "Dela Gothic One", "Hiragino Kaku Gothic StdN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  color-scheme: light;
}
[hidden] { display: none !important; }  /* display を指定した要素でも hidden で必ず消す（スマホ版の殻にあったもの） */
html { height: 100%; box-sizing: border-box; -webkit-text-size-adjust: 100%; }
body {
  height: 100%; margin: 0; overflow: hidden;
  background-color: var(--cloth-bg);
  background-image: linear-gradient(90deg, var(--cloth) 50%, transparent 50%), linear-gradient(var(--cloth) 50%, transparent 50%);
  background-size: 64px 64px;
  color: var(--ink); font-family: var(--f-body);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#wrap {
  height: 100%; height: min(100%, 100svh); /* iOS 26 の Safari で下端がツールバーに隠れないよう、見えている高さに収める */
  box-sizing: border-box; display: grid; place-items: center;
  padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
#box {
  position: relative; width: 360px; height: 540px; overflow: hidden; isolation: isolate;
  border-radius: .22rem; background: var(--ink); container-type: size; /* ロゴの大きさを筐体の高さで決める（cqh） */
  box-shadow: 0 0 0 .06rem var(--ink), .12rem .16rem 0 rgb(42 24 16 / .35);
  touch-action: none;
}
#stage { position: absolute; inset: 0; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage canvas.px { image-rendering: crisp-edges; image-rendering: pixelated; }
#hit { position: absolute; inset: 0; z-index: 2; touch-action: none; }
#fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: .18rem; padding: .22rem .26rem 0; pointer-events: none; }
#bPause {
  pointer-events: auto; width: .78rem; height: .78rem; padding: 0; cursor: pointer;
  border: .05rem solid var(--ink); border-radius: .16rem; background: var(--cream); box-shadow: 0 .05rem 0 var(--ink);
  display: grid; grid-auto-flow: column; place-content: center; gap: .1rem;
}
#bPause i { display: block; width: .1rem; height: .3rem; border-radius: .03rem; background: var(--ink); }
#hScore { font-family: var(--f-disp); font-size: .56rem; line-height: 1; color: var(--cream); --o: .06rem; font-variant-numeric: tabular-nums; }
#hScore small { font-family: var(--f-body); font-weight: 700; font-size: .32rem; margin-left: .06rem; --o: .04rem; }  /* Dela の小さい字は縁取りでつぶれるので単位は丸ゴシック */
#hLives { margin-left: auto; display: flex; gap: .04rem; }
#hLives svg { width: .6rem; height: .6rem; filter: drop-shadow(0 .03rem 0 rgb(42 24 16 / .5)); }

/* ---------- タイマー ( ピザカッター ) ---------- */
#timer { position: absolute; left: .62rem; right: .62rem; bottom: .36rem; height: .6rem; z-index: 4; pointer-events: none; }
#timer .track { position: absolute; left: 0; right: 0; top: 50%; height: .12rem; transform: translateY(-50%); background: var(--cream); border: .04rem solid var(--ink); border-radius: .08rem; }
#timer .cutline { position: absolute; left: 0; top: 50%; height: .04rem; width: 0; transform: translateY(-50%); background: repeating-linear-gradient(90deg, var(--ink) 0 .12rem, transparent .12rem .22rem); }
#timer .cutter { position: absolute; top: 50%; left: 0; width: .76rem; height: .76rem; margin: -.42rem 0 0 -.38rem; overflow: visible; }
#timer.hurry .cutter { animation: shiver .1s infinite; }
#timer.hurry .track { background: #ffd2c4; }

/* ---------- 指示 ---------- */
#verb { position: absolute; left: 0; right: 0; top: 40%; z-index: 5; display: grid; justify-items: center; gap: .28rem; pointer-events: none; transform: translateY(-50%); }
#verb .vt {
  font-family: var(--f-disp); font-size: 1.3rem; line-height: 1; white-space: nowrap; letter-spacing: .02em;
  color: var(--cream); --o: .1rem; filter: drop-shadow(.1rem .12rem 0 var(--tomato));
}
#verb.in .vt { animation: verbIn .42s cubic-bezier(.2, 1.6, .4, 1) both; }
#verb.in .hint { animation: hintIn .3s .18s both; }
#verb.out { animation: verbOut .26s ease-in forwards; }
#verb .hint {
  display: flex; align-items: center; gap: .18rem; padding: .14rem .28rem .14rem .18rem;
  background: var(--cream); border: .05rem solid var(--ink); border-radius: .16rem; box-shadow: 0 .06rem 0 var(--ink);
  font-weight: 900; font-size: .3rem; line-height: 1.3; max-width: 6rem;
}
.hintfx { position: relative; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: #f1e2c4; }
.hintfx i { position: absolute; left: 50%; top: 50%; width: .24rem; height: .24rem; margin: -.12rem; border-radius: 50%; background: var(--tomato); border: .04rem solid var(--ink); box-sizing: border-box; }
.hintfx[data-k="tap"] i { animation: hTap .7s infinite; }
.hintfx[data-k="timing"] i { animation: hTap 1s infinite; }
.hintfx[data-k="mash"] i { animation: hTap .16s infinite; }
.hintfx[data-k="swipe"] i { animation: hSwipe .8s infinite; }
.hintfx[data-k="drag"] i { animation: hDrag 1.1s linear infinite; }
.hintfx[data-k="hold"] i { animation: hHold 1.3s infinite; }

/* ---------- 書き文字 ---------- */
.pop {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--f-disp); font-size: .62rem; line-height: 1; color: var(--cream);
  --o: .065rem;
  transform: translate(-50%, -50%); animation: pop .9s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.pop.y { color: var(--pine); }
.pop.g { color: #8ee07a; }
.pop.big { font-size: .96rem; --o: .085rem; }
.pop.small { font-size: .36rem; --o: .045rem; }
.rip { position: absolute; width: .9rem; height: .9rem; margin: -.45rem; border-radius: 50%; border: .06rem solid var(--cream); box-shadow: 0 0 0 .03rem var(--ink); animation: rip .38s ease-out forwards; }

/* 文字の縁取り（場面の上に重なる文字だけ。ボタンには付けない）。-webkit-text-stroke は角がトゲ状に飛び出すので、太さ --o の円周上に影を並べて角を丸くする
   （外周32方向＋内周16方向。下に落とす赤い影は filter: drop-shadow で別に掛ける）。値は scratchpad の Python で書き出した */
#hScore, #hScore small, #verb .vt, .pop, .scr h2, .num b, .num b span, .speedup, .oh {
  --oc: var(--ink);
  text-shadow:
    calc(var(--o) * 1.0) calc(var(--o) * 0.0) 0 var(--oc),
    calc(var(--o) * 0.981) calc(var(--o) * 0.195) 0 var(--oc),
    calc(var(--o) * 0.924) calc(var(--o) * 0.383) 0 var(--oc),
    calc(var(--o) * 0.831) calc(var(--o) * 0.556) 0 var(--oc),
    calc(var(--o) * 0.707) calc(var(--o) * 0.707) 0 var(--oc),
    calc(var(--o) * 0.556) calc(var(--o) * 0.831) 0 var(--oc),
    calc(var(--o) * 0.383) calc(var(--o) * 0.924) 0 var(--oc),
    calc(var(--o) * 0.195) calc(var(--o) * 0.981) 0 var(--oc),
    calc(var(--o) * 0.0) calc(var(--o) * 1.0) 0 var(--oc),
    calc(var(--o) * -0.195) calc(var(--o) * 0.981) 0 var(--oc),
    calc(var(--o) * -0.383) calc(var(--o) * 0.924) 0 var(--oc),
    calc(var(--o) * -0.556) calc(var(--o) * 0.831) 0 var(--oc),
    calc(var(--o) * -0.707) calc(var(--o) * 0.707) 0 var(--oc),
    calc(var(--o) * -0.831) calc(var(--o) * 0.556) 0 var(--oc),
    calc(var(--o) * -0.924) calc(var(--o) * 0.383) 0 var(--oc),
    calc(var(--o) * -0.981) calc(var(--o) * 0.195) 0 var(--oc),
    calc(var(--o) * -1.0) calc(var(--o) * 0.0) 0 var(--oc),
    calc(var(--o) * -0.981) calc(var(--o) * -0.195) 0 var(--oc),
    calc(var(--o) * -0.924) calc(var(--o) * -0.383) 0 var(--oc),
    calc(var(--o) * -0.831) calc(var(--o) * -0.556) 0 var(--oc),
    calc(var(--o) * -0.707) calc(var(--o) * -0.707) 0 var(--oc),
    calc(var(--o) * -0.556) calc(var(--o) * -0.831) 0 var(--oc),
    calc(var(--o) * -0.383) calc(var(--o) * -0.924) 0 var(--oc),
    calc(var(--o) * -0.195) calc(var(--o) * -0.981) 0 var(--oc),
    calc(var(--o) * -0.0) calc(var(--o) * -1.0) 0 var(--oc),
    calc(var(--o) * 0.195) calc(var(--o) * -0.981) 0 var(--oc),
    calc(var(--o) * 0.383) calc(var(--o) * -0.924) 0 var(--oc),
    calc(var(--o) * 0.556) calc(var(--o) * -0.831) 0 var(--oc),
    calc(var(--o) * 0.707) calc(var(--o) * -0.707) 0 var(--oc),
    calc(var(--o) * 0.831) calc(var(--o) * -0.556) 0 var(--oc),
    calc(var(--o) * 0.924) calc(var(--o) * -0.383) 0 var(--oc),
    calc(var(--o) * 0.981) calc(var(--o) * -0.195) 0 var(--oc),
    calc(var(--o) * 0.55) calc(var(--o) * 0.0) 0 var(--oc),
    calc(var(--o) * 0.508) calc(var(--o) * 0.21) 0 var(--oc),
    calc(var(--o) * 0.389) calc(var(--o) * 0.389) 0 var(--oc),
    calc(var(--o) * 0.21) calc(var(--o) * 0.508) 0 var(--oc),
    calc(var(--o) * 0.0) calc(var(--o) * 0.55) 0 var(--oc),
    calc(var(--o) * -0.21) calc(var(--o) * 0.508) 0 var(--oc),
    calc(var(--o) * -0.389) calc(var(--o) * 0.389) 0 var(--oc),
    calc(var(--o) * -0.508) calc(var(--o) * 0.21) 0 var(--oc),
    calc(var(--o) * -0.55) calc(var(--o) * 0.0) 0 var(--oc),
    calc(var(--o) * -0.508) calc(var(--o) * -0.21) 0 var(--oc),
    calc(var(--o) * -0.389) calc(var(--o) * -0.389) 0 var(--oc),
    calc(var(--o) * -0.21) calc(var(--o) * -0.508) 0 var(--oc),
    calc(var(--o) * -0.0) calc(var(--o) * -0.55) 0 var(--oc),
    calc(var(--o) * 0.21) calc(var(--o) * -0.508) 0 var(--oc),
    calc(var(--o) * 0.389) calc(var(--o) * -0.389) 0 var(--oc),
    calc(var(--o) * 0.508) calc(var(--o) * -0.21) 0 var(--oc);
}

/* ---------- 画面 ---------- */
.scr { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
.panel {
  background-color: var(--kraft);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .18 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 38%, rgb(255 240 210 / .35), transparent 62%);
}
.btn {
  appearance: none; cursor: pointer; min-width: 4.6rem; padding: .24rem .5rem;
  font-family: var(--f-disp); font-size: .52rem; line-height: 1; letter-spacing: .06em;
  color: var(--cream); background: var(--tomato); text-shadow: 0 .04rem 0 rgb(42 24 16 / .55); /* Dela は縁取りで太らせるとつぶれるので、ボタンは影だけ */
  border: .06rem solid var(--ink); border-radius: .16rem; box-shadow: 0 .1rem 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(.07rem); box-shadow: 0 .03rem 0 var(--ink); }
.btn.sub { background: var(--cream); color: var(--ink); text-shadow: none; font-size: .36rem; padding: .2rem .4rem; }
.btn:focus-visible, .card:focus-visible, #snd:focus-visible, #bPause:focus-visible { outline: .06rem solid var(--pine); outline-offset: .06rem; }

/* タイトル */
#title { justify-content: space-between; padding-block: .9rem .44rem; background: linear-gradient(rgb(36 20 12 / .7), transparent 30%, transparent 64%, rgb(36 20 12 / .85)); }
.logo { width: min(6.3rem, 46cqh); transform: rotate(-4deg); }  /* 背の低い画面（PC）ではピザにかぶらないよう縮める */
.logo h1 { margin: 0; line-height: 0; }
.logo .lg { display: block; width: 100%; height: auto; overflow: visible; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ロゴの登場：1文字ずつ弾んで出る（影・縁・色の3層とも同じ --i で同時に動く）→ リボン → 輪切りパインが回って「パ」に着地 */
#title:not([hidden]) .lg .ch { transform-box: fill-box; transform-origin: 50% 100%; animation: lgPop .46s calc(var(--i) * .065s + .12s) cubic-bezier(.3, 1.7, .5, 1) both; }
#title:not([hidden]) .lg .rib { transform-box: fill-box; transform-origin: 50% 50%; animation: lgRib .42s calc(var(--i) * .065s + .2s) cubic-bezier(.3, 1.6, .5, 1) both; }
#title:not([hidden]) .lg .slice { transform-box: fill-box; transform-origin: 50% 50%; animation: lgSlice .62s .1s cubic-bezier(.25, 1.35, .5, 1) both, lgWobble 5.5s 1.6s ease-in-out infinite; }  /* 2026-11-10 本人「パインが乗る前のパが欠けている感」：文字の後に遅れて来ると、その間「ハ」に見えた。パの文字と同時に着地させる */
@keyframes lgPop { 0% { transform: translateY(-40%) scale(.2); opacity: 0; } 60% { opacity: 1; } }
@keyframes lgRib { 0% { transform: scaleX(.1); opacity: 0; } }
@keyframes lgSlice { 0% { transform: translate(34px, -26px) rotate(-720deg) scale(2.2); opacity: 0; } 30% { opacity: 1; } 78% { transform: translate(0, 0) rotate(0) scale(.86, 1.12); } }
@keyframes lgWobble { 0%, 78%, 100% { transform: rotate(0); } 84% { transform: rotate(32deg) scale(1.08); } 90% { transform: rotate(-14deg); } 95% { transform: rotate(5deg); } }
.menu { display: grid; gap: .26rem; justify-items: center; }
#bestT { min-height: .4rem; font-weight: 900; font-size: .28rem; color: var(--cream); }
.credit { margin: 0; max-width: 4.8rem;  /* 右下の音のボタンに重ならないよう、2つのまとまりで2行に折り返す */ text-align: center; font-weight: 500; font-size: clamp(10.5px, .2rem, 12px); line-height: 1.7;  /* 2026-11-10 本人「フッターのリンクが大きい」：PC で 19px ほどになっていたので 12px で止める */ letter-spacing: .04em; color: rgb(255 245 225 / .6); }
.credit .cr-group { display: inline-block; white-space: nowrap; }  /* 区切りの途中で折り返さない */
.credit a { color: rgb(255 245 225 / .85); text-decoration: none; padding: .06rem .03rem; }
.credit a:hover, .credit a:focus-visible { color: var(--pine); text-decoration: underline; }
#snd {
  position: absolute; right: .26rem; bottom: .26rem; z-index: 12; width: .84rem; height: .84rem; padding: 0; cursor: pointer;
  border: .05rem solid var(--ink); border-radius: 50%; background: var(--cream); box-shadow: 0 .05rem 0 var(--ink);
  display: grid; place-items: center;
}
#snd svg { width: .5rem; height: .5rem; }
#snd .x { display: none; }
#snd.off .w { display: none; }
#snd.off .x { display: inline; }

/* えらぶ */
#select { padding-block: .6rem .44rem; gap: .3rem; }
.scr h2 { margin: 0; font-family: var(--f-disp); font-weight: 400; font-size: .6rem; color: var(--cream); --o: .06rem; filter: drop-shadow(.05rem .07rem 0 var(--tomato)); }
.grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 2.24rem;  /* ピルの下にも余白がとれる高さ（前は 2.08rem でピルが下辺に詰まり、2行の名前だと切れた） */ gap: .2rem; width: 6.5rem; flex: 1 1 auto; min-height: 0; align-content: start;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: .06rem .1rem .3rem; box-sizing: border-box;
  -webkit-mask-image: linear-gradient(#000 calc(100% - .5rem), transparent); mask-image: linear-gradient(#000 calc(100% - .5rem), transparent);
  scrollbar-width: none;
}
.grid::-webkit-scrollbar { display: none; }
.card {
  appearance: none; cursor: pointer; position: relative; text-align: left; color: var(--ink); font-family: var(--f-body);
  display: grid; grid-template-rows: auto 1fr auto; gap: .05rem; padding: .2rem .22rem .24rem; min-height: 0; overflow: hidden;
  background: var(--cream); border: .05rem solid var(--ink); border-radius: .18rem; box-shadow: 0 .08rem 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.card:active { transform: translateY(.06rem); box-shadow: 0 .02rem 0 var(--ink); }
.card .pic { position: absolute; right: .14rem; top: .14rem; width: .58rem; height: .58rem; }
.card .cv { font-family: var(--f-disp); font-size: .4rem; line-height: 1.15; white-space: nowrap; margin-top: .3rem; }
.card .cd { font-size: .21rem; font-weight: 700; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.card .tags { display: flex; align-items: center; gap: .05rem; flex-wrap: wrap; }
.card .tag { font-size: .155rem; font-weight: 900; padding: .02rem .06rem;  /* 長い絵柄名（ワイヤーフレーム等）でも1行に収める */ border: .03rem solid var(--ink); border-radius: .06rem; line-height: 1.4; white-space: nowrap; }
.card .tag.e { background: var(--ink); color: var(--cream); }
.card .tag.a { background: var(--pine); }
.card .tag.b { background: var(--tomato); color: var(--cream); }
.card.boss { background: #ffe1d8; box-shadow: 0 .08rem 0 var(--ink), inset 0 0 0 .04rem var(--tomato); }
.card.boss .cv { color: var(--tomato); }
.card .rec { margin-left: auto; font-size: .2rem; font-weight: 900; color: var(--tomato); }

/* 合間 */
#bumper { justify-content: center; gap: .44rem; overflow: hidden; }
#bumper .num, #bumper .stamp, #bumper .lives, #over > :not(.rays):not(.guy) { position: relative; z-index: 1; }
.rays { position: absolute; left: 50%; top: 42%; width: 15rem; height: 15rem; margin: -7.5rem; z-index: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgb(255 244 220 / .3) 0 7.5deg, transparent 7.5deg 15deg); animation: rot 30s linear infinite; }
#bumper.lose .rays, #over .rays { background: repeating-conic-gradient(rgb(214 58 35 / .14) 0 7.5deg, transparent 7.5deg 15deg); }
.num small i { font-style: normal; margin-left: .14rem; padding: .02rem .12rem; border-radius: .08rem; background: var(--ink); color: var(--pine); font-size: .24rem; font-family: var(--f-disp); font-weight: 400; vertical-align: .02rem; }
.guy { position: absolute; z-index: 1; left: .2rem; bottom: -.5rem; width: 2.2rem; height: 2.9rem; transform-origin: 50% 100%; pointer-events: none; }
.guy svg { width: 100%; height: 100%; overflow: visible; }
#bumper.win .guy { animation: sulk .9s ease-in-out both; }
#bumper.lose .guy, #over .guy { animation: gloat .45s ease-in-out infinite alternate; }
#over .guy { left: auto; right: .1rem; bottom: -.7rem; width: 2rem; }
#bumper.win .m-lose, #bumper.lose .m-win, #over .m-win { display: none; }
@keyframes sulk { 0% { transform: translateY(1.2rem); } 40% { transform: translateY(0) rotate(4deg); } 100% { transform: translateY(.15rem) rotate(-6deg) scale(.96); } }
@keyframes gloat { from { transform: translateY(.1rem) rotate(-5deg); } to { transform: translateY(-.12rem) rotate(5deg); } }
.num { display: grid; justify-items: center; gap: .02rem; }
.num small { font-weight: 900; font-size: .3rem; }
.num b { font-family: var(--f-disp); font-weight: 400; font-size: 1.8rem; line-height: 1; color: var(--cream); --o: .085rem; filter: drop-shadow(.08rem .1rem 0 var(--tomato)); font-variant-numeric: tabular-nums; }
.num b span { font-size: .4rem; margin-left: .06rem; --o: .045rem; }
#bumper.go.win .num b { animation: bump .4s .2s cubic-bezier(.3, 1.8, .5, 1) both; }
.stamp { font-family: var(--f-disp); font-size: .84rem; line-height: 1.1; color: var(--basil); border: .1rem solid currentColor; border-radius: .22rem; padding: .04rem .3rem .1rem; transform: rotate(-8deg); background: rgb(255 245 225 / .55); }
#bumper.lose .stamp { color: var(--tomato); }
#bumper.go .stamp { animation: stamp .34s cubic-bezier(.3, 1.6, .5, 1) both; }
.lives { display: flex; gap: .16rem; }
.lives svg { width: 1.2rem; height: 1.2rem; overflow: visible; }
.lives .fresh .chunks { animation: drop .42s .3s cubic-bezier(.3, 1.5, .5, 1) both; }
.lives .fresh { animation: hurt .5s .35s both; }
.speedup {
  /* z-index が無いとライフのピザ（.lives）とパイン兄さん（.guy・z-index 1）の下に潜る。
     背の高い画面は元の 16%、低い画面（PC の横長など）ではピザに重ならない所まで下げる */
  position: absolute; z-index: 3; left: -.4rem; right: -.4rem; bottom: clamp(.5rem, calc(50% - 4.2rem), 16%); padding: .12rem 0; text-align: center; transform: rotate(-6deg);
  background: var(--pine); border-block: .08rem solid var(--ink);
  font-family: var(--f-disp); font-size: .78rem; color: var(--cream); --o: .06rem;
  animation: slideIn .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.speedup.boss { background: var(--tomato); }
.speedup.heal { background: #6cc75a; }

/* 結果 */
#over { justify-content: center; gap: .34rem; text-align: center; }
.oh { font-family: var(--f-disp); font-size: .56rem; line-height: 1.3; color: var(--cream); --o: .06rem; white-space: pre-line; padding-inline: .5rem; }
.orank { font-family: var(--f-disp); font-size: .42rem; background: var(--ink); color: var(--pine); padding: .1rem .3rem .12rem; border-radius: .1rem; transform: rotate(-3deg); }
.obest { font-weight: 900; font-size: .28rem; min-height: .36rem; }
#over .menu { margin-top: .2rem; }
.share { font-weight: 900; font-size: .28rem; color: var(--ink); text-underline-offset: .06rem; padding: .1rem; }

/* ひとやすみ */
#pause { justify-content: center; gap: .34rem; background: rgb(42 24 16 / .8); }
#pause h2 { margin-bottom: .2rem; }

/* 読み込み */
/* 読み込み → タップして はじめる */
#loading { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: .3rem; background: radial-gradient(circle at 50% 40%, #4a2a18, var(--ink) 70%); color: var(--cream); font-weight: 700; font-size: .3rem; cursor: default; }
#loading.ready { cursor: pointer; }
.ld-stage { position: relative; width: 4.4rem; height: 4.4rem; }
.ld-pz { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .1rem 0 rgb(0 0 0 / .35)); }
.ld-spin { transform-origin: 0 0; animation: rot 9s linear infinite; }
.ld-pz .tp { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
#loading[data-st="1"] .t1, #loading[data-st="2"] .t1, #loading[data-st="3"] .t1, #loading[data-st="4"] .t1,
#loading[data-st="2"] .t2, #loading[data-st="3"] .t2, #loading[data-st="4"] .t2,
#loading[data-st="3"] .t3, #loading[data-st="4"] .t3,
#loading[data-st="4"] .t4 { opacity: 1; animation: tpIn .38s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes tpIn { from { transform: scale(.4); opacity: 0; } }
/* 焼き上がると、上からパインが落ちてきて、はじかれて飛んでいく */
.ld-chunk { opacity: 0; }
#loading.ready .ld-chunk { animation: ldChunk 1s .15s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes ldChunk { 0% { opacity: 1; transform: translate(-6px, -120px) rotate(-30deg); } 42% { opacity: 1; transform: translate(0, -18px) rotate(10deg); } 100% { opacity: 0; transform: translate(150px, -170px) rotate(540deg); } }
.ld-pop { position: absolute; left: 58%; top: -2%; margin: 0; font-family: var(--f-disp); font-size: .44rem; line-height: 1; color: var(--pine); opacity: 0; transform: rotate(12deg); }
#loading.ready .ld-pop { animation: ldPop .8s .55s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes ldPop { 0% { opacity: 0; transform: rotate(12deg) scale(.3); } 30% { opacity: 1; transform: rotate(12deg) scale(1.1); } 75% { opacity: 1; transform: rotate(12deg) scale(1); } 100% { opacity: 0; transform: translateY(-.3rem) rotate(12deg); } }
.ld-msg { margin: 0; min-height: 1.6em; letter-spacing: .06em; }
#loading.ready .ld-msg { display: none; }
.ld-ready { display: none; justify-items: center; gap: .22rem; margin-top: .1rem; }
#loading.ready .ld-ready { display: grid; animation: hintIn .35s .5s both; }
.ld-go {
  appearance: none; cursor: pointer; padding: .18rem .4rem; border: .05rem solid var(--ink); border-radius: .18rem;  /* 2026-11-10 本人「ちょっと大きい」で .46→.36rem */
  background: var(--tomato); color: var(--cream); font-family: var(--f-disp); font-size: .36rem; line-height: 1.1; letter-spacing: .04em;
  box-shadow: 0 0 0 .05rem var(--cream), 0 .12rem 0 .05rem #000; /* クリームの枠を上にして四辺そろえ、黒い影はその外へ（前は影が下辺の枠を隠してずれて見えた） */ animation: ldBreath 1.6s 1s ease-in-out infinite; touch-action: manipulation;
}
@keyframes ldBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.ld-snd {
  appearance: none; cursor: pointer; min-width: 1.9rem; padding: .12rem .26rem; border: .035rem solid rgb(255 245 225 / .6); border-radius: 999px;
  background: transparent; color: var(--cream); font: 700 .22rem/1.4 var(--f-body); letter-spacing: .06em; touch-action: manipulation;
}
.ld-snd[aria-pressed="false"] { opacity: .7; }
.ld-go:focus-visible, .ld-snd:focus-visible { outline: .06rem solid var(--pine); outline-offset: .06rem; }

@keyframes verbIn { 0% { transform: scale(2.4) rotate(-10deg); opacity: 0; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }
@keyframes verbOut { to { transform: translateY(-50%) scale(.7); opacity: 0; } }
@keyframes hintIn { from { transform: translateY(.2rem); opacity: 0; } }
@keyframes hTap { 0%, 100% { transform: scale(1); } 40% { transform: scale(.6); box-shadow: 0 0 0 .1rem rgb(214 58 35 / .35); } }
@keyframes hSwipe { 0% { transform: translate(-.2rem, .14rem); opacity: 0; } 20% { opacity: 1; } 80% { transform: translate(.2rem, -.14rem); opacity: 1; } 100% { opacity: 0; } }
@keyframes hHold { 0%, 12% { transform: scale(1); } 22%, 78% { transform: scale(.62); box-shadow: 0 0 0 .1rem rgb(214 58 35 / .35); } 90%, 100% { transform: scale(1); } }
@keyframes hDrag { from { transform: rotate(0) translateX(.17rem); } to { transform: rotate(360deg) translateX(.17rem); } }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(.3) rotate(var(--r)); opacity: 0; } 14% { transform: translate(-50%, -62%) scale(1.15) rotate(var(--r)); opacity: 1; } 70% { transform: translate(-50%, -70%) scale(1) rotate(var(--r)); opacity: 1; } 100% { transform: translate(-50%, -100%) scale(.95) rotate(var(--r)); opacity: 0; } }
@keyframes rip { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
@keyframes shiver { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(.02rem, -.03rem); } }
@keyframes stamp { from { transform: scale(2.2) rotate(-14deg); opacity: 0; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes drop { from { transform: translateY(-1rem); opacity: 0; } }
@keyframes hurt { 0%, 100% { transform: none; } 30% { transform: translateX(-.06rem) rotate(-6deg); } 60% { transform: translateX(.06rem) rotate(5deg); } }
@keyframes slideIn { from { transform: translateX(-110%) rotate(-6deg); } }
@keyframes rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hintfx i, #timer.hurry .cutter, .lg .ch, .lg .rib, .lg .slice, .ld-spin, .ld-go, .ld-pz .tp { animation: none !important; }
  .pop { animation-duration: 1.2s; }
}

/* ---------- PC の左右の演出（js/side.js） ----------
   片側の空きが 240px 以上のときだけ出す。大きく角に寄せ、光らせない */
#pzSide { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; font-family: var(--f-body); }
#pzSide .sd-l, #pzSide .sd-r { position: absolute; top: 0; bottom: 0; width: var(--side, 0px); }
#pzSide .sd-l { left: 0; }
/* 読み込み中（.pre）は隠し、タイトルに入ったら外側からスッと出す */
#pzSide .sd-l, #pzSide .sd-r { transition: opacity .6s ease-out, transform .7s cubic-bezier(.2, .9, .3, 1); }
#pzSide.pre .sd-l, #pzSide.pre .sd-r { opacity: 0; transition: none; }
#pzSide.pre .sd-l { transform: translateX(-40px); }
#pzSide.pre .sd-r { transform: translateX(40px); }
@media (prefers-reduced-motion: reduce) { #pzSide.pre .sd-l, #pzSide.pre .sd-r { transform: none; } }
#pzSide .sd-r { right: 0; }
/* 構図：左右とも外側の端に寄せ、筐体のまわりは空ける。上は「黒板 ↔ 禁止の札」、下は「トマト箱と箱の塔 ↔ パイン兄さん」で重さをそろえる */
#pzSide .sd-l { --cw: min(calc(var(--side) * .9), 400px); --cb: -1.5vh; }
/* 黒板（釘と紐で左上に吊るす。紐は釘から板の両角へ下りる Λ。グラデーションの線は指定した向きと直交する対角線に出る） */
#pzSide .board {
  position: absolute; left: 7%; top: 9vh; width: min(calc(var(--side) * .74), 330px); container-type: inline-size;
  transform: rotate(-4deg); transform-origin: 50% -7vh; border: 14px solid #9a6438; border-radius: 10px; background: #8a5a32;
  box-shadow: 0 0 0 4px var(--ink), inset 0 0 0 3px var(--ink), 10px 12px 0 rgb(42 24 16 / .3);
}
#pzSide .board::before {
  content: ''; position: absolute; left: 50%; bottom: calc(100% + 14px); width: 64%; height: 7vh; transform: translateX(-50%);
  background: linear-gradient(to top left, transparent calc(50% - 2px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 2px)) left / 50% 100% no-repeat,
              linear-gradient(to top right, transparent calc(50% - 2px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 2px)) right / 50% 100% no-repeat;
}
#pzSide .board::after { content: ''; position: absolute; left: 50%; bottom: calc(100% + 14px + 7vh - 9px); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #c9ccd0; box-shadow: 0 0 0 4px var(--ink); }
#pzSide .bd-in { background: radial-gradient(circle at 40% 30%, #34463c, #23312a 70%); padding: 6cqw 6cqw 7cqw; color: #f4efe2; text-align: center; }
#pzSide .board p { margin: 0; }
#pzSide .bl { font-weight: 700; font-size: 6.6cqw; letter-spacing: .12em; opacity: .85; }
#pzSide .bn { line-height: 1.05; margin-top: 2cqw !important; }
#pzSide .bn b { font-family: var(--f-disp); font-weight: 400; font-size: 30cqw; color: #fff8e6; font-variant-numeric: tabular-nums; }
#pzSide .bn span { font-weight: 700; font-size: 9cqw; margin-left: 2cqw; }
#pzSide .board.word .bn { margin-top: 5cqw !important; line-height: 1; }
#pzSide .board.word .bn b { display: block; font-size: 12.5cqw; line-height: 1.1; }  /* 単語は1行のかたまりにして、上下の間をそろえる（前は下に寄っていた） */
#pzSide .board.word .bn span:empty { display: none; }
#pzSide .board.word .bs { margin-top: 4cqw !important; }
#pzSide .bs { font-weight: 700; font-size: 6cqw; margin-top: 2.5cqw !important; opacity: .8; }
#pzSide .bv { font-family: var(--f-disp); font-size: 10cqw; line-height: 1.25; color: var(--pine); margin-top: 4cqw !important; padding-top: 4cqw; border-top: 3px dashed rgb(244 239 226 / .35); white-space: pre-line; word-break: keep-all; }
/* トマトの木箱（左下の角からはみ出す） */
#pzSide .crate { position: absolute; left: -6%; bottom: var(--cb); width: var(--cw); filter: drop-shadow(10px 10px 0 rgb(42 24 16 / .28)); }
#pzSide .crate svg { display: block; width: 100%; height: auto; }
/* 箱の塔（木箱のふたの上に積む） */
#pzSide .tower { position: absolute; width: calc(var(--cw) * .72); left: calc(var(--side) * -.06 + var(--cw) * .09); bottom: calc(var(--cw) * .58 + var(--cb)); height: max(18vh, calc(100vh - var(--cw) * .58 - 50vh)); }
#pzSide .stack { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; flex-direction: column-reverse; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
#pzSide .pbox { margin-top: -5%; transform: translateX(var(--x)); }
#pzSide .pbox svg { display: block; width: 100%; height: auto; transform: rotate(var(--t)); filter: drop-shadow(4px 5px 0 rgb(42 24 16 / .25)); }
#pzSide .pbox.drop { animation: pbDrop .55s cubic-bezier(.4, 0, .7, 1.4) both; }
#pzSide .pbox.fall { animation: pbFall 1.1s var(--fd) cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes pbDrop { 0% { transform: translate(var(--x), -100vh); } 82% { transform: translate(var(--x), 3%) scaleY(.88); } 100% { transform: translate(var(--x), 0); } }
@keyframes pbFall { to { transform: translate(calc(var(--x) + var(--fx)), 80vh) rotate(var(--fr)); } }
/* パイン禁止の札（右上の角からはみ出す） */
#pzSide .sign { position: absolute; right: -7%; top: -6vh; width: min(calc(var(--side) * .72), 310px); transform: rotate(14deg); filter: drop-shadow(10px 12px 0 rgb(42 24 16 / .3)); }
#pzSide .sign svg { display: block; width: 100%; height: auto; }
/* 覗くパイン兄さん（右下の角） */
#pzSide .peek { position: absolute; right: -3%; bottom: -14vh; width: min(calc(var(--side) * .8), 44vh); aspect-ratio: 220 / 300; transform-origin: 60% 100%; animation: pkIdle 2.6s ease-in-out infinite alternate; }
#pzSide .peek svg { width: 100%; height: 100%; overflow: visible; }
#pzSide .peek.win .m-lose, #pzSide .peek.lose .m-win { display: none; }
#pzSide .peek.watch { animation: pkWatch 1.6s ease-in-out infinite alternate; }
#pzSide .peek.win.go { animation: pkSulk 1s ease-in-out both; }
#pzSide .peek.laugh { animation: pkLaugh .42s ease-in-out infinite alternate; }
@keyframes pkIdle { from { transform: translateY(2%) rotate(-2deg); } to { transform: translateY(-1%) rotate(2deg); } }
@keyframes pkWatch { from { transform: translateX(-4%) rotate(-9deg); } to { transform: translateX(-6%) translateY(-2%) rotate(-12deg); } }
@keyframes pkSulk { 0% { transform: translateX(-5%) rotate(-10deg); } 45% { transform: translateY(14%) rotate(6deg); } 100% { transform: translateY(18%) rotate(-4deg) scale(.97); } }
@keyframes pkLaugh { from { transform: translateY(-2%) rotate(-7deg); } to { transform: translateY(-7%) rotate(5deg); } }
#pzSide.over .board { transform: rotate(-6.5deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
@media (prefers-reduced-motion: reduce) { #pzSide * { animation: none !important; transition: none !important; } }