/* 果物屋の店先: 深い葉っぱ色の地に、パインの金とリンゴの赤。日よけのストライプを見出しに使う */
:root{
  --leaf:#0e2a1f; --leaf-2:#17402f; --leaf-3:#22573f;
  --gold:#ffcd3c; --gold-deep:#f29a16; --apple:#ff3b4d; --cream:#fff6e3; --ink:#2a1306; --mint:#8af5c4; --steel:#b9c2d0;
  --f-display:"Dela Gothic One","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  --f-body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  --u:9.6px;
  --sw:calc(var(--u)*4.2);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--leaf);color:var(--cream);font-family:var(--f-body);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
/* 指で切る開発用モード（?nocam）だけは、スワイプがページの操作にならないようにする */
html.ptr,html.ptr body{touch-action:none}
button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none;cursor:pointer}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
body.hidecursor{cursor:none}

#stage{position:fixed;inset:0;overflow:hidden;transform-origin:50% 50%}
#stage>.layer{position:absolute;inset:0;width:100%;height:100%;display:block}
#bg{background:radial-gradient(120% 90% at 50% 42%,var(--leaf-3) 0%,var(--leaf-2) 48%,var(--leaf) 100%)}
#bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,246,227,.07) 1.3px,transparent 1.8px);background-size:22px 22px}
#cam{object-fit:cover;transform:scaleX(-1);filter:brightness(.7) saturate(.85) contrast(1.06);opacity:0;transition:opacity .8s ease,filter .5s ease}
#cam.on{opacity:1}
#bgc{opacity:0;transition:opacity .5s}
body.bgmode #bgc{opacity:1}
body.bgmode #cam{opacity:0}
body.fever #vignette{background:radial-gradient(ellipse 78% 72% at 50% 50%,rgba(255,150,40,.1) 40%,rgba(120,30,10,.5) 100%)}
#vignette{pointer-events:none;background:radial-gradient(ellipse 78% 72% at 50% 50%,transparent 52%,rgba(6,16,10,.55) 100%)}
/* 光の筋は js で一度だけ描いた画像を使う（conic-gradient＋mask は毎回の描画が重かった） */
#rays{position:absolute;left:0;top:0;width:calc(var(--u)*96);height:calc(var(--u)*96);margin:calc(var(--u)*-48) 0 0 calc(var(--u)*-48);
  background:center/100% 100% no-repeat;opacity:0;pointer-events:none;will-change:transform,opacity}
#rays.on{animation:rays 1.7s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes rays{0%{opacity:0;transform:scale(.25) rotate(0)}10%{opacity:1;transform:scale(1) rotate(8deg)}70%{opacity:.85}100%{opacity:0;transform:scale(1.18) rotate(70deg)}}
#flash{background:#fff;opacity:0;pointer-events:none}
#flash.on{animation:flash .32s ease-out}
#flash.red{background:#ff5a4a}
#flash.red.on{animation:flashRed .4s ease-out}
@keyframes flashRed{0%{opacity:.38}100%{opacity:0}}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
#pops{pointer-events:none;overflow:hidden}

/* ---------- pops */
.pop{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-family:var(--f-display);white-space:nowrap;pointer-events:none;line-height:1;
  paint-order:stroke fill;-webkit-text-stroke:.16em var(--ink);will-change:transform,opacity}
.p-score{font-size:calc(var(--u)*3);color:var(--gold);animation:floatUp .75s ease-out forwards}
.p-score.x2{color:#fff}
.p-chain{font-size:min(calc(var(--u)*6),12vw);color:#fff;animation:chain .85s cubic-bezier(.2,.9,.3,1.2) forwards}
.p-chain small{font-size:.5em;color:var(--gold)}
.p-uhn{font-size:min(calc(var(--u)*10),13.5vw);color:var(--apple);-webkit-text-stroke:.13em var(--ink);text-shadow:0 .07em 0 var(--gold),0 .13em 0 var(--ink);animation:slam 1.55s cubic-bezier(.2,.9,.25,1) forwards;isolation:isolate}
.p-uhn::before,.p-uhn::after,.p-demo::before,.p-demo::after{content:"";position:absolute;left:50%;top:50%;z-index:-1;clip-path:polygon(98.6% 50.0%,88.1% 58.1%,93.6% 69.4%,81.6% 72.9%,83.6% 87.3%,69.5% 83.8%,64.6% 95.0%,54.1% 88.8%,44.8% 99.4%,37.9% 87.1%,25.6% 92.3%,23.9% 79.0%,11.7% 77.8%,14.4% 65.9%,1.5% 60.3%,11.0% 50.0%,3.8% 40.2%,14.4% 34.1%,10.2% 21.1%,23.9% 21.0%,26.3% 9.0%,37.9% 12.9%,45.0% 2.8%,54.1% 11.2%,65.2% 3.3%,69.5% 16.2%,84.2% 12.0%,81.6% 27.1%,93.5% 30.6%,88.1% 41.9%);-webkit-clip-path:polygon(98.6% 50.0%,88.1% 58.1%,93.6% 69.4%,81.6% 72.9%,83.6% 87.3%,69.5% 83.8%,64.6% 95.0%,54.1% 88.8%,44.8% 99.4%,37.9% 87.1%,25.6% 92.3%,23.9% 79.0%,11.7% 77.8%,14.4% 65.9%,1.5% 60.3%,11.0% 50.0%,3.8% 40.2%,14.4% 34.1%,10.2% 21.1%,23.9% 21.0%,26.3% 9.0%,37.9% 12.9%,45.0% 2.8%,54.1% 11.2%,65.2% 3.3%,69.5% 16.2%,84.2% 12.0%,81.6% 27.1%,93.5% 30.6%,88.1% 41.9%)}
.p-uhn::before,.p-demo::before{width:152%;height:268%;transform:translate(-50%,-53%);background:var(--ink)}
.p-uhn::after,.p-demo::after{width:143%;height:246%;transform:translate(-50%,-53%);background:var(--cream)}
.p-onoma{font-size:min(calc(var(--u)*3.4),8vw);color:var(--cream);animation:onoma .75s cubic-bezier(.2,.9,.3,1.3) forwards}
@keyframes onoma{0%{transform:translate(-50%,-50%) scale(.3) rotate(-14deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.18) rotate(-8deg);opacity:1}40%{transform:translate(-50%,-50%) scale(1) rotate(-8deg)}75%{opacity:1}100%{transform:translate(-50%,-80%) rotate(-8deg);opacity:0}}
.p-rate{font-size:min(calc(var(--u)*5.4),11vw);animation:rate 1.5s cubic-bezier(.2,.9,.3,1.3) forwards;letter-spacing:.04em}
.p-rate.PERFECT{color:var(--gold);text-shadow:0 0 .4em rgba(255,205,60,.8)}
.p-rate.GREAT{color:var(--mint)}
.p-rate.GOOD{color:var(--cream)}
.p-gain{font-size:calc(var(--u)*4.2);color:#fff;animation:gain 1.6s ease-out forwards}
.p-time{font-size:calc(var(--u)*3.6);color:var(--mint);animation:gain 1.4s ease-out forwards}
.p-time.minus{color:var(--apple)}
.p-big{font-size:min(calc(var(--u)*10),15vw);color:var(--gold);animation:banner 1.3s cubic-bezier(.2,.9,.3,1) forwards}
.p-big.white{color:#fff}
.p-small{font-size:calc(var(--u)*2.6);color:var(--cream);animation:floatUp 1s ease-out forwards}
.p-stage{font-family:var(--f-body);font-weight:800;font-size:calc(var(--u)*2.6);animation:floatUp 1.1s ease-out forwards}
.p-bad{font-size:min(calc(var(--u)*7),14vw);color:var(--steel);animation:clang .9s ease-out forwards}
.p-demo{font-size:min(calc(var(--u)*4),7.6vw);color:var(--apple);text-shadow:0 .07em 0 var(--gold);isolation:isolate;animation:demo 1s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes floatUp{0%{transform:translate(-50%,-30%) scale(.6);opacity:0}15%{transform:translate(-50%,-60%) scale(1.15);opacity:1}100%{transform:translate(-50%,-180%) scale(1);opacity:0}}
@keyframes chain{0%{transform:translate(-50%,-50%) scale(2.2) rotate(-10deg);opacity:0}18%{transform:translate(-50%,-50%) scale(.95) rotate(-6deg);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-90%) scale(1) rotate(-6deg);opacity:0}}
@keyframes slam{0%{transform:translate(-50%,-50%) scale(2.8) rotate(-9deg);opacity:0}7%{transform:translate(-50%,-50%) scale(.9) rotate(-5deg);opacity:1}13%{transform:translate(-50%,-50%) scale(1.07) rotate(-5deg)}19%{transform:translate(-50%,-50%) scale(1) rotate(-5deg)}78%{opacity:1;transform:translate(-50%,-52%) scale(1.02) rotate(-5deg)}100%{opacity:0;transform:translate(-50%,-62%) scale(1.06) rotate(-5deg)}}
@keyframes rate{0%,14%{transform:translate(-50%,-50%) scale(0);opacity:0}24%{transform:translate(-50%,-50%) scale(1.25);opacity:1}32%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-70%);opacity:0}}
@keyframes gain{0%,22%{transform:translate(-50%,-50%) scale(.4);opacity:0}32%{transform:translate(-50%,-50%) scale(1.1);opacity:1}82%{opacity:1}100%{transform:translate(-50%,-120%) scale(1);opacity:0}}
@keyframes banner{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}16%{transform:translate(-50%,-50%) scale(1.12);opacity:1}26%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
@keyframes clang{0%{transform:translate(-50%,-50%) scale(1.8);opacity:0}10%{transform:translate(-46%,-50%) scale(1);opacity:1}18%{transform:translate(-54%,-50%)}26%{transform:translate(-48%,-50%)}34%{transform:translate(-50%,-50%)}80%{opacity:1}100%{transform:translate(-50%,-80%);opacity:0}}
@keyframes demo{0%{transform:translate(-50%,-50%) scale(1.8) rotate(-8deg);opacity:0}15%{transform:translate(-50%,-50%) scale(.95) rotate(-6deg);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-80%) scale(1) rotate(-6deg);opacity:0}}

/* ---------- HUD */
#hud{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;z-index:5}
body.playing #hud{opacity:1}
.outline{paint-order:stroke fill;-webkit-text-stroke:.16em var(--ink)}
#scoreBox{position:absolute;left:max(18px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top))}
.lbl{font-weight:800;font-size:12px;letter-spacing:.22em;color:var(--gold);text-shadow:0 1px 0 var(--ink)}
#scoreNum{font-family:var(--f-display);font-size:clamp(28px,calc(var(--u)*5),64px);line-height:1.05;font-variant-numeric:tabular-nums;paint-order:stroke fill;-webkit-text-stroke:.14em var(--ink)}
#comboBox{display:flex;align-items:baseline;gap:.35em;margin-top:.3em;opacity:0;transition:opacity .2s;font-family:var(--f-display);paint-order:stroke fill;-webkit-text-stroke:.14em var(--ink)}
#comboBox.on{opacity:1}
#comboNum{font-size:clamp(22px,calc(var(--u)*3.6),44px);color:#fff;display:inline-block}
#comboBox .cw{font-family:var(--f-body);font-weight:800;font-size:12px;letter-spacing:.18em;-webkit-text-stroke:0;color:var(--cream);text-shadow:0 1px 0 var(--ink)}
#multNum{font-size:clamp(18px,calc(var(--u)*2.8),34px);color:var(--gold);display:inline-block}
.bump{animation:bump .22s ease-out}
@keyframes bump{0%{transform:scale(1.45)}100%{transform:scale(1)}}
#timerBox{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
#timeNum{font-family:var(--f-display);font-size:clamp(34px,calc(var(--u)*6.2),80px);line-height:1;font-variant-numeric:tabular-nums;paint-order:stroke fill;-webkit-text-stroke:.14em var(--ink)}
#timeNum.low{color:var(--apple);animation:pulse 1s ease-in-out infinite}
#timeNum.gain{animation:tGain .9s ease-out}
#timeNum.loss{animation:tLoss .6s ease-out}
#scoreNum{display:inline-block;transform-origin:left center}
@keyframes tGain{0%{transform:scale(1.5);color:var(--mint)}60%{color:var(--mint)}100%{transform:scale(1)}}
@keyframes tLoss{0%{transform:scale(1.3) translateX(-4px);color:var(--apple)}20%{transform:scale(1.2) translateX(4px)}40%{transform:translateX(-3px)}100%{transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}}
#timeBar{width:clamp(90px,calc(var(--u)*16),200px);height:5px;background:rgba(255,246,227,.22);border-radius:3px;overflow:hidden}
#timeBar i{display:block;height:100%;background:var(--gold);transform-origin:left center}
#feverTag{font-family:var(--f-display);font-size:clamp(14px,calc(var(--u)*2.2),26px);color:var(--apple);paint-order:stroke fill;-webkit-text-stroke:.16em var(--ink);opacity:0;letter-spacing:.06em}
body.fever #feverTag{opacity:1;animation:feverTag .5s steps(2) infinite}
@keyframes feverTag{50%{color:var(--gold)}}
#hint{position:fixed;z-index:6;pointer-events:none;left:50%;bottom:max(5vh,calc(env(safe-area-inset-bottom) + 20px));transform:translate(-50%,8px);font-weight:800;font-size:clamp(15px,calc(var(--u)*2.2),26px);
  paint-order:stroke fill;-webkit-text-stroke:.2em var(--ink);white-space:nowrap;opacity:0;transition:opacity .25s,transform .25s;letter-spacing:.04em}
#hint.show{opacity:1;transform:translate(-50%,0)}
#hint em{font-style:normal;color:var(--gold)}
#feverFrame{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s}
#feverFrame::before,#feverFrame::after{content:"";position:absolute;inset:0;will-change:opacity}
#feverFrame::before{box-shadow:inset 0 0 0 6px var(--gold),inset 0 0 60px 10px rgba(255,90,60,.5)}
#feverFrame::after{box-shadow:inset 0 0 0 6px var(--apple),inset 0 0 90px 18px rgba(255,205,60,.5);opacity:0}
body.fever #feverFrame{opacity:1}
body.fever #feverFrame::after{animation:feverBlink .6s ease-in-out infinite alternate}
@keyframes feverBlink{to{opacity:1}}

#tools{position:fixed;right:max(14px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;gap:8px;z-index:30}
.iconbtn{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,246,227,.55);background:rgba(14,42,31,.5);display:grid;place-items:center;padding:0}
.iconbtn svg{width:20px;height:20px;fill:none;stroke:var(--cream);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{background:rgba(14,42,31,.8)}
#btnPause{display:none}
body.playing #btnPause{display:grid}

/* ---------- screens */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.screen>*{pointer-events:auto}
.screen[hidden]{display:none!important}
.awning{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*4.4 + env(safe-area-inset-top));pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--apple) 0 var(--sw),var(--cream) var(--sw) calc(var(--sw)*2));box-shadow:0 10px 24px rgba(0,0,0,.25)}
.awning::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--sw)/2);
  background:
    radial-gradient(circle at 50% 0,var(--apple) calc(var(--sw)/2 - 1px),transparent calc(var(--sw)/2)) calc(var(--sw)/-2) 0/calc(var(--sw)*2) 100% repeat-x,
    radial-gradient(circle at 50% 0,var(--cream) calc(var(--sw)/2 - 1px),transparent calc(var(--sw)/2)) calc(var(--sw)/2) 0/calc(var(--sw)*2) 100% repeat-x}

#title{padding:calc(var(--u)*7.5 + env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));justify-content:space-between;gap:10px}
.logo{text-align:center;pointer-events:none;margin-top:calc(var(--u)*1.2)}
.logo-main{font-family:var(--f-display);font-size:clamp(44px,min(calc(var(--u)*9.6),17vw),126px);line-height:1.02;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;max-width:100%;
  paint-order:stroke fill;-webkit-text-stroke:.12em var(--ink);transform:rotate(-3deg);animation:logoBob 2.4s ease-in-out infinite}
.logo-main .nb{white-space:nowrap}
.lp{color:var(--gold);text-shadow:0 .07em 0 var(--apple),0 .13em 0 var(--ink)}
.lx{display:inline-block;color:var(--cream);font-size:.6em;margin:0 .1em;transform:translateY(-.14em) rotate(12deg);text-shadow:0 .1em 0 var(--ink)}
.la{color:var(--apple);text-shadow:0 .07em 0 var(--gold),0 .13em 0 var(--ink)}
.logo-tag{font-family:var(--f-display);font-size:clamp(16px,calc(var(--u)*2.4),28px);color:var(--cream);margin-top:.5em;paint-order:stroke fill;-webkit-text-stroke:.16em var(--ink);letter-spacing:.04em}
.logo-tag em{font-style:normal;color:var(--gold)}
.logo-en{font-weight:800;font-size:11px;letter-spacing:.42em;color:var(--mint);margin-top:.7em}
@keyframes logoBob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-4px)}}
#demoSpot{flex:1 1 auto;width:100%;min-height:120px;pointer-events:none}
.rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:min(900px,100%);pointer-events:none}
.rules li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.rules img{width:clamp(48px,calc(var(--u)*6.6),76px);height:clamp(48px,calc(var(--u)*6.6),76px);object-fit:contain;margin-bottom:2px}
.rules b{word-break:keep-all;font-weight:800;font-size:clamp(13px,calc(var(--u)*1.7),17px);line-height:1.35;color:var(--cream);text-wrap:balance}
.rules span{font-size:12px;line-height:1.45;color:rgba(255,246,227,.72);text-wrap:balance}
.cta{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(560px,100%)}
.btn-main{font-family:var(--f-display);font-size:clamp(20px,calc(var(--u)*3),30px);letter-spacing:.06em;color:var(--ink);background:var(--gold);border:0;border-radius:16px;
  padding:.62em 1.6em .68em;box-shadow:0 6px 0 var(--gold-deep),0 12px 24px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s;width:auto;min-width:min(360px,100%);max-width:100%;white-space:nowrap}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--gold-deep),0 14px 28px rgba(0,0,0,.35)}
.btn-main:active{transform:translateY(5px);box-shadow:0 1px 0 var(--gold-deep),0 6px 14px rgba(0,0,0,.35)}
.btn-sub{background:transparent;border:0;font-weight:800;font-size:14px;color:var(--cream);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,246,227,.4);padding:6px 10px}
.note{margin:0;font-size:12px;color:rgba(255,246,227,.62);text-align:center}
.best{margin:0;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--gold)}
.best span{font-family:var(--f-display);font-size:16px;letter-spacing:.02em;margin-left:.4em;color:var(--cream)}

@media (max-width:720px){
  #title{padding-top:calc(max(60px,var(--u)*7.5) + env(safe-area-inset-top))}
  .rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px}
  .rules li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left}
  .rules img{grid-row:1/3;width:46px;height:46px;margin:0}
  .rules li{align-content:center;row-gap:2px}
  .rules b,.rules span{text-wrap:wrap}
}

@media (max-height:520px){
  .rules{display:none}
}

#pauseScr{justify-content:center;background:rgba(10,26,18,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);gap:18px;padding:24px 16px;text-align:center}
.screen.soft{background:radial-gradient(ellipse 90% 80% at 50% 45%,rgba(10,26,18,.18),rgba(10,26,18,.62));text-align:center}
#guide{padding:calc(var(--u)*6.6 + env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));gap:12px;justify-content:space-between}
#loading{justify-content:center;gap:14px;padding:24px 16px}
#errorScr{justify-content:center;gap:14px;padding:24px 16px}
.scr-title{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(26px,calc(var(--u)*4.4),52px);color:var(--gold);paint-order:stroke fill;-webkit-text-stroke:.14em var(--ink);text-shadow:0 .08em 0 var(--apple),0 .14em 0 var(--ink);transform:rotate(-2deg)}
.spot{flex:0 1 auto;width:100%;height:clamp(130px,26vh,260px);pointer-events:none}
#guide .spot{flex:1 1 auto;height:auto;min-height:120px;max-height:30vh}
.bubble{position:relative;background:var(--cream);color:var(--ink);font-weight:800;font-size:clamp(15px,calc(var(--u)*2.1),22px);line-height:1.5;padding:.6em 1.2em;border-radius:22px;
  border:3px solid var(--ink);box-shadow:0 5px 0 rgba(42,19,6,.35);max-width:min(560px,92vw);text-wrap:balance;pointer-events:none;--tail:50%}
.bubble::after{content:"";position:absolute;bottom:-12px;left:var(--tail);width:20px;height:20px;background:var(--cream);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
.bubble.l{--tail:32%}
.bubble.r{--tail:68%}
.bubble.bpop{animation:bubblePop .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes bubblePop{0%{transform:scale(.85)}100%{transform:scale(1)}}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:min(980px,100%);pointer-events:none}
.steps li.safe{border-color:var(--gold);background:rgba(60,44,10,.6)}
.ln.dash{stroke:var(--gold);stroke-dasharray:3 5}
.steps li{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;background:rgba(14,42,31,.55);border:2px solid rgba(255,246,227,.22);border-radius:18px;padding:12px 10px 14px}
.steps svg{width:clamp(44px,calc(var(--u)*6),64px);height:auto;margin-bottom:2px}
.steps b{font-weight:800;font-size:clamp(14px,calc(var(--u)*1.8),18px);color:var(--cream)}
.steps span{font-size:12px;line-height:1.5;color:rgba(255,246,227,.75);text-wrap:balance}
.f-gold{fill:var(--gold);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.f-cream{fill:var(--cream);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.f-mint{fill:var(--mint);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.f-ink{fill:var(--ink)}
.ln{fill:none;stroke:var(--cream);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ln.thin{stroke:var(--ink);stroke-width:2.4}
.cam-ic{width:1.15em;height:1.15em;vertical-align:-.18em;margin-right:.35em;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.btn-main.sm{font-size:clamp(17px,calc(var(--u)*2.3),22px);width:auto;min-width:0;padding:.5em 1.4em .56em}
.juice{width:min(420px,78vw);height:22px;border-radius:12px;background:rgba(255,246,227,.14);border:3px solid var(--ink);box-shadow:0 0 0 2px rgba(255,246,227,.55);overflow:hidden;position:relative}
.juice i{display:block;height:100%;width:0;border-radius:8px;transition:width .25s ease-out;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 8px,rgba(255,255,255,0) 8px 16px),linear-gradient(90deg,var(--gold),#ff8a3c 60%,var(--apple));background-size:23px 100%,100% 100%;animation:juiceFlow .6s linear infinite}
@keyframes juiceFlow{to{background-position:23px 0,0 0}}
.load-pct{font-family:var(--f-display);font-size:clamp(22px,calc(var(--u)*3.4),36px);font-variant-numeric:tabular-nums;color:var(--cream);paint-order:stroke fill;-webkit-text-stroke:.14em var(--ink);line-height:1}
.tip{font-size:13px;font-weight:800;color:var(--mint);min-height:1.5em;max-width:92vw;text-shadow:0 1px 0 var(--ink);transition:opacity .3s}
.tip.fade{opacity:0}
#loading .sub,#errorScr .msg{text-shadow:0 1px 2px rgba(0,0,0,.6)}
#errorScr .msg{font-size:clamp(14px,calc(var(--u)*1.9),18px);max-width:min(32em,92vw)}
#tut{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top) + max(56px,7vh));z-index:6;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 16px;pointer-events:none}
#tut[hidden]{display:none}
.tsteps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px}
.tstep{position:relative;display:flex;align-items:center;gap:7px;font-weight:800;font-size:13px;color:rgba(255,246,227,.5);text-shadow:0 1px 2px rgba(0,0,0,.6);transition:color .2s}
.tstep+.tstep::before{content:"";position:absolute;left:-18px;top:50%;width:14px;border-top:2px dotted rgba(255,246,227,.5)}
.tstep i{font-style:normal;font-family:var(--f-display);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--ink);background:rgba(255,246,227,.45);border:2px solid var(--ink)}
.tstep.on{color:var(--cream)}
.tstep.on i{background:var(--gold);animation:bump .35s ease-out}
.tstep.done i{background:var(--mint)}
@media (max-width:720px){
  .steps{grid-template-columns:1fr;gap:8px}
  .steps li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;text-align:left;padding:8px 12px;align-content:center}
  .steps svg{grid-row:1/3;width:44px;margin:0}
}
@media (max-height:640px){.steps span{display:none}}
.dots{display:flex;gap:10px}
.dots i{width:16px;height:16px;border-radius:50%;background:var(--apple);animation:dot 0.9s ease-in-out infinite}
.dots i:nth-child(2){background:var(--gold);animation-delay:.15s}
.dots i:nth-child(3){background:var(--mint);animation-delay:.3s}
@keyframes dot{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
.msg{font-weight:800;font-size:clamp(16px,calc(var(--u)*2.2),22px);line-height:1.6;max-width:30em}
.sub{font-size:13px;line-height:1.6;color:rgba(255,246,227,.7);max-width:34em}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-plain{font-weight:800;font-size:16px;padding:.7em 1.4em;border-radius:14px;border:2px solid rgba(255,246,227,.6);background:rgba(14,42,31,.6)}
.btn-plain:hover{background:rgba(14,42,31,.9)}
.h-big{font-family:var(--f-display);font-size:clamp(30px,calc(var(--u)*5.5),60px);paint-order:stroke fill;-webkit-text-stroke:.14em var(--ink);color:var(--gold)}

/* ---------- result */
#result{padding:calc(var(--u)*6 + env(safe-area-inset-top)) 16px 16px;background:linear-gradient(180deg,rgba(10,26,18,.66) 0%,rgba(10,26,18,.4) 55%,rgba(10,26,18,0) 80%)}
.res-panel{pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:calc(var(--u)*1.5)}
.res-head{display:flex;align-items:center;gap:calc(var(--u)*2.4)}
.res-score-wrap{display:flex;flex-direction:column;align-items:center}
#resScore{font-family:var(--f-display);font-size:clamp(40px,min(calc(var(--u)*9),12vw),110px);line-height:1;font-variant-numeric:tabular-nums;paint-order:stroke fill;-webkit-text-stroke:.12em var(--ink);color:#fff}
.rank{font-family:var(--f-display);font-size:clamp(56px,calc(var(--u)*11),130px);line-height:1;width:1.25em;height:1.25em;display:grid;place-items:center;border-radius:50%;
  color:var(--ink);background:var(--gold);box-shadow:0 0 0 .06em var(--ink),0 0 0 .1em var(--gold),0 10px 30px rgba(0,0,0,.4);transform:rotate(-10deg) scale(0);opacity:0}
.rank.show{animation:stamp .5s cubic-bezier(.2,1.4,.4,1) forwards}
.rank.r-SS{background:linear-gradient(135deg,#fff3a8,#ffcd3c 40%,#ff8a3c);}
.rank.r-A{background:var(--apple);color:#fff}
.rank.r-B{background:var(--mint)}
.rank.r-C{background:var(--cream)}
@keyframes stamp{0%{transform:rotate(-30deg) scale(2.6);opacity:0}60%{transform:rotate(-8deg) scale(.92);opacity:1}100%{transform:rotate(-10deg) scale(1);opacity:1}}
#resTitle{font-weight:800;font-size:clamp(15px,calc(var(--u)*2.2),24px);margin-top:.5em;color:var(--gold);min-height:1.4em;letter-spacing:.06em}
#resBest{font-weight:800;font-size:13px;color:var(--mint);min-height:1.4em;letter-spacing:.08em}
.res-body{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*3.4);margin-top:calc(var(--u)*1.4)}
.stats{display:grid;grid-template-columns:repeat(4,auto);gap:4px calc(var(--u)*3);margin:0}
body.has-shot .stats{grid-template-columns:repeat(2,auto);gap:calc(var(--u)*1.2) calc(var(--u)*2.6)}
#shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto}
#shot[hidden]{display:none}
#shotImg{display:block;width:min(22vw,230px,26vh);height:auto;transform:rotate(3deg);box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 0 1px rgba(42,19,6,.2);border-radius:3px}
#shot figcaption{display:flex;gap:8px}
.btn-plain.sm{font-size:13px;padding:.5em 1em;border-radius:10px}
.stats div{display:flex;flex-direction:column;align-items:center}
.stats dt{font-size:12px;font-weight:800;color:rgba(255,246,227,.72);letter-spacing:.1em}
.stats dd{margin:0;font-family:var(--f-display);font-size:clamp(20px,calc(var(--u)*3.2),36px);font-variant-numeric:tabular-nums;paint-order:stroke fill;-webkit-text-stroke:.12em var(--ink)}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,auto)}.res-body{gap:16px}#shotImg{width:min(38vw,150px,22vh)}#result{padding-top:calc(66px + env(safe-area-inset-top))}}
.menu-label{position:fixed;left:0;top:0;transform:translate(-50%,0);z-index:12;font-family:var(--f-display);font-size:clamp(17px,calc(var(--u)*2.5),26px);color:var(--cream);
  background:rgba(14,42,31,.62);border:2px solid rgba(255,246,227,.7);border-radius:14px;padding:.38em .9em .45em;letter-spacing:.06em;white-space:nowrap;
  paint-order:stroke fill;-webkit-text-stroke:.1em var(--ink)}
.menu-label:hover{border-color:var(--gold);color:var(--gold)}
.menu-label[hidden]{display:none}
.res-hint{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));font-size:12px;font-weight:800;color:rgba(255,246,227,.7);pointer-events:none;white-space:nowrap}
@media (max-width:560px){
  .res-head{gap:10px}
  .rank{font-size:clamp(38px,10vw,60px)}
  .iconbtn{width:38px;height:38px}
  body.playing #btnFull{display:none!important}
  /* スマホ幅：のこり時間は 右上の ボタンの 下へ（中央だと スコアの けたが ふえると かさなった。2026-10-15 本人） */
  #timerBox{left:auto;right:max(14px,env(safe-area-inset-right));top:calc(max(12px,env(safe-area-inset-top)) + 46px);transform:none;align-items:flex-end;gap:5px}
  #timeBar{width:96px}
}
@media (prefers-reduced-motion:reduce){
  .logo-main{animation:none}
}

/* ---------- タイトル前の読みこみ（AMIX GAMES KIDS のロゴ・パインとリンゴが近づいてミックス） */
#boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;text-align:center;overflow-y:auto;
  background:radial-gradient(120% 90% at 50% 40%,#fffaf0 0%,var(--cream) 55%,#f6e6c4 100%);color:var(--ink);transition:opacity .45s ease,visibility .45s;touch-action:manipulation}
#boot::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(242,154,22,.14) 1.4px,transparent 1.9px);background-size:22px 22px;pointer-events:none}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
#boot .awning{position:fixed}
.bt-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:calc(var(--u)*5 + 24px + env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));margin:auto;width:min(560px,100%)}
.brand{--bh:26px;display:block;line-height:0}
.kl-logo{display:block;height:var(--bh);width:calc(var(--bh)*6.918);overflow:visible}
.kl-k{transform-box:fill-box;transform-origin:50% 100%;animation:klHop 2.6s ease-in-out infinite}
.kl-k2{animation-delay:.12s}.kl-k3{animation-delay:.24s}.kl-k4{animation-delay:.36s}
@keyframes klHop{0%,70%,100%{transform:translateY(0) rotate(0)}78%{transform:translateY(-8px) rotate(-6deg)}86%{transform:translateY(0) rotate(4deg)}}
#boot .brand{--bh:30px}
.bt-name{font-family:var(--f-display);font-size:clamp(34px,min(10vw,calc(var(--u)*7)),72px);line-height:1.1;white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:.12em var(--ink);transform:rotate(-3deg);margin-top:4px}
.bt-name .lx{color:var(--cream)}
.bt-mix{position:relative;width:min(420px,84vw);height:152px;margin-top:0}
.bt-lane{position:absolute;left:0;right:0;bottom:6px;height:14px;border-radius:9px;background:rgba(42,19,6,.1);border:3px solid var(--ink);overflow:hidden}
.bt-fill{position:absolute;inset:0;display:block;--l:0%;-webkit-mask:linear-gradient(90deg,#000 0 var(--l),transparent var(--l) calc(100% - var(--l)),#000 calc(100% - var(--l)));mask:linear-gradient(90deg,#000 0 var(--l),transparent var(--l) calc(100% - var(--l)),#000 calc(100% - var(--l)));
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.28) 0 7px,rgba(255,255,255,0) 7px 14px),linear-gradient(90deg,var(--gold),#ff8a3c 50%,var(--apple));background-size:20px 100%,100% 100%;animation:juiceFlow .6s linear infinite}
.bt-fr{position:absolute;bottom:20px;width:72px;height:94px;overflow:visible;--x:0px;transition:transform .2s ease-out}
.bt-pine{left:0;transform:translateX(var(--x))}
.bt-apple{right:0;transform:translateX(calc(var(--x)*-1))}
.bt-fr .body,.bt-fr .crown path,.bt-fr .leaf{stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.bt-pine .body{fill:#f2b234}.bt-pine .crown path{fill:#4fa64a}
.bt-pine .hatch{fill:none;stroke:rgba(122,66,8,.55);stroke-width:2.4;stroke-linecap:round}
.bt-apple .body{fill:var(--apple)}.bt-apple .leaf{fill:#4fa64a}
.bt-apple .stem{fill:none;stroke:#5b3d1c;stroke-width:4;stroke-linecap:round}
.bt-apple .shine{fill:none;stroke:rgba(255,255,255,.65);stroke-width:4;stroke-linecap:round}
.bt-fr .face circle{fill:var(--ink)}.bt-fr .face path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.bt-fr .blush{fill:rgba(255,96,128,.5)}
.bt-fr svg,.bt-fr g{transform-box:fill-box}
#boot:not(.hit) .bt-fr{animation:btBob 1.1s ease-in-out infinite}
#boot:not(.hit) .bt-apple{animation-delay:-.55s}
@keyframes btBob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.bt-boom{position:absolute;left:50%;top:0;font-family:var(--f-display);font-weight:400;font-size:30px;color:var(--apple);white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:.14em var(--ink);text-shadow:0 .07em 0 var(--gold);
  transform:translate(-50%,0) scale(0) rotate(-6deg);opacity:0;pointer-events:none}
#boot.hit .bt-boom{animation:btBoom .9s cubic-bezier(.2,1.5,.4,1) forwards}
#boot.hit .bt-pine{animation:btSquashL .45s ease-out}
#boot.hit .bt-apple{animation:btSquashR .45s ease-out}
@keyframes btBoom{0%{transform:translate(-50%,10px) scale(.2) rotate(-12deg);opacity:0}45%{transform:translate(-50%,-6px) scale(1.15) rotate(-6deg);opacity:1}100%{transform:translate(-50%,-4px) scale(1) rotate(-6deg);opacity:1}}
@keyframes btSquashL{30%{scale:.8 1.12}100%{scale:1 1}}
@keyframes btSquashR{30%{scale:.8 1.12}100%{scale:1 1}}
.bt-pct{font-family:var(--f-display);font-size:26px;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.bt-pct b{font-weight:400}
.bt-msg{margin:0;font-weight:800;font-size:14px;color:#7a5a3a;min-height:1.5em}
.bt-gate{display:none;flex-direction:column;align-items:center;gap:10px;margin-top:4px}
#boot.ready .bt-gate{display:flex;animation:bubblePop .4s cubic-bezier(.2,1.5,.4,1)}
#boot.ready .bt-pct,#boot.ready .bt-msg{display:none}
#btnGate{min-width:min(280px,80vw)}
.bt-snd{display:inline-flex;align-items:center;gap:6px;background:transparent;border:2px solid rgba(42,19,6,.35);border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px;color:var(--ink)}
.bt-snd svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bt-snd[aria-pressed="true"] .x,.bt-snd[aria-pressed="false"] .w{display:none}
.bt-err{margin:0;font-size:14px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:8px}
.bt-err[hidden]{display:none}
.bt-err .btn-plain{color:var(--cream)}
@media (max-height:520px){.bt-in{gap:8px;padding-top:calc(var(--u)*4.4 + 12px)}#boot .brand{--bh:22px}.bt-mix{height:128px}.bt-fr{width:58px;height:76px}}
@media (prefers-reduced-motion:reduce){.kl-k,#boot .bt-fr{animation:none!important}}

/* タイトルの AMIX GAMES KIDS（暗い地なので文字は白） */
#title .brand{--bh:20px;margin:0 auto 4px;width:max-content}
#title .kl-logo>g{fill:#fff6e3}
.t-foot{margin:0;font-size:12px;font-weight:500;color:rgba(255,246,227,.66);display:flex;gap:6px 8px;flex-wrap:wrap;justify-content:center}
.t-foot>*+*::before{content:"/";display:inline-block;opacity:.55;text-decoration:none;margin-right:8px}
.t-foot a{color:inherit;text-underline-offset:3px;text-decoration-color:rgba(255,246,227,.35)}
.t-foot a:hover{color:var(--gold)}
ruby rt{font-size:.5em;font-weight:800;letter-spacing:0}
.steps span,.steps b,.rules span,.rules b,.note,.bubble,.tip,.sub,.msg,.bt-msg{word-break:keep-all;overflow-wrap:anywhere}

/* ---------- 写真の保存（タッチ端末は確認を出す：IMAGE_SAVE_UX.md） */
[hidden]{display:none!important}
.save-ov{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;background:rgba(10,26,18,.78);
  padding:max(24px,calc(env(safe-area-inset-top) + 16px)) 16px max(24px,calc(env(safe-area-inset-bottom) + 16px));opacity:0;transition:opacity .2s;touch-action:pan-y pinch-zoom}
.save-ov.on{opacity:1}
.save-card{position:relative;margin:0 auto;width:min(420px,100%);background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-radius:24px;box-shadow:0 8px 0 var(--ink);
  padding:22px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(12px);transition:transform .25s cubic-bezier(.2,1.4,.4,1);outline:none;-webkit-user-select:auto;user-select:auto}
.save-ov.on .save-card{transform:none}
.save-card h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:22px}
.save-card img{display:block;width:100%;max-width:340px;height:auto;border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.25);-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.save-tip{margin:0;font-size:13px;font-weight:800;color:#7a5a3a;text-align:center}
.save-btns{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.save-btns .btn-main{min-width:0;width:100%;white-space:normal}
.save-btns .btn-plain{color:var(--ink);background:transparent;border-color:rgba(42,19,6,.4)}
.save-x{position:absolute;right:10px;top:8px;width:40px;height:40px;border-radius:50%;border:0;background:transparent;font-size:26px;line-height:1;color:var(--ink)}
#shotImg{-webkit-touch-callout:default}
@media (prefers-reduced-motion:reduce){.save-ov,.save-card{transition:none}}
/* 画質の切りかえ（タイトル） */
.qual{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:rgba(255,246,227,.72)}
.qual button{font-size:12px;font-weight:800;padding:3px 12px;border-radius:999px;border:2px solid rgba(255,246,227,.35);background:transparent;color:rgba(255,246,227,.8)}
.qual button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* むずかしさ（タイトル） */
.lvl{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(14,42,31,.6);border:2px solid rgba(255,246,227,.25)}
.lvl button{font-weight:800;font-size:clamp(13px,calc(var(--u)*1.6),16px);padding:.42em 1.05em;border-radius:999px;border:0;background:transparent;color:rgba(255,246,227,.82);white-space:nowrap}
.lvl button[aria-pressed="true"]{background:var(--cream);color:var(--ink);box-shadow:0 2px 0 rgba(42,19,6,.35)}
.lvl button:hover:not([aria-pressed="true"]){color:var(--gold)}
/* ハイスコアと画質は1行に */
.t-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 18px}
/* タイトルは詰めこまず、入りきらない画面では縦にスクロールする（余白とバランスを優先） */
#title{pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
#title>*{flex-shrink:0}
#title #demoSpot{min-height:clamp(190px,32vh,400px);margin-top:calc(-1 * clamp(24px,6vh,64px))}   /* 縦長はタイトルの下に少し重ねて上へ */
/* 横長の画面：パインとリンゴはロゴとボタンの左右（緑の余白）に大きく置き、遊び方とボタンは下にまとめる */
@media (min-aspect-ratio:6/5) and (min-height:521px){
  #title{justify-content:flex-start}
  #title #demoSpot{position:absolute;left:0;right:0;top:15%;height:44%;min-height:0;flex:none}   /* タイトルに少しかかってよい（本人） */
  #title .rules{margin-top:auto}
}
.lvl{margin-bottom:4px}
/* 「なかよし！」の吹き出し（ロゴの左上。タイトルの位置と大きさはそのまま） */
.logo-main,.bt-name{position:relative}
.nk{position:absolute;left:-.18em;top:-.42em;z-index:2;font-family:var(--f-display);font-size:.3em;line-height:1;white-space:nowrap;color:var(--apple);
  background:var(--cream);border:.1em solid var(--ink);border-radius:999px;padding:.3em .3em .34em .62em;box-shadow:0 .12em 0 var(--ink);
  -webkit-text-stroke:0;text-shadow:none;transform:rotate(-9deg);paint-order:normal}
/* しっぽ：ふちの三角（濃い色）に、中の三角（クリーム色）を重ねる。中の三角は吹き出しのふちの上まで入れて、つなぎ目の線を消す */
.nk::before{content:"";position:absolute;right:18%;bottom:-.66em;width:1em;height:.78em;background:var(--ink);clip-path:polygon(0 0,100% 0,80% 100%,74% 100%)}
.nk::after{content:"";position:absolute;right:calc(18% + .16em);bottom:-.4em;width:.62em;height:.54em;background:var(--cream);clip-path:polygon(0 0,100% 0,72% 100%,66% 100%)}
.bt-name .nk{font-size:.34em;top:-.5em;left:-.3em}
/* ロゴが1行のときは「パ」の左上の空いた所へ（文字を隠さない）。画面の左端12pxより外へは出さず、右へ寄った分だけ上へ逃がす。2行に折り返したとき（.wrap・js が付ける）は少し右の「パ」の左へ */
.logo-main .nk{--nx:max(-2.6em,calc(12px - (100vw - 25em) / 2));left:var(--nx);top:calc(-1.55em - (var(--nx) + 2.6em) * .8)}
.logo-main.wrap .nk{left:.8em;top:-.42em}
.bt-name .nk{top:-1.5em;left:-1.6em}
/* きねん写真 ( 任意・初期は とらない。ページを 開くたびに とらない に もどる ) */
.photo-note,.shot-note{word-break:keep-all;overflow-wrap:anywhere}
.photo-note{margin:2px auto 0;max-width:30em;font-size:11.5px;font-weight:700;line-height:1.6;color:rgba(255,246,227,.82);text-align:center}
#shot figcaption{display:flex;flex-direction:column;align-items:center;gap:4px}
.shot-note{font-size:11px;font-weight:700;line-height:1.5;color:#7a5a3a;text-align:center;max-width:22em}
.save-warn{color:#b4321f;font-weight:800}
body.bk-on #hint{bottom:calc(var(--bk-clear,120px) + 6px)}
/* FEVER：背景に 回る 光の 帯 ( カメラ映像が なくなったので 背景で 盛り上げる ) */
#bg::before{content:"";position:absolute;left:50%;top:50%;width:200vmax;height:200vmax;margin:-100vmax 0 0 -100vmax;background:repeating-conic-gradient(from 0deg,rgba(255,205,60,0) 0 9deg,rgba(255,205,60,.13) 9deg 18deg);opacity:0;transition:opacity .5s;pointer-events:none}
body.fever #bg::before{opacity:1;animation:feverSpin 10s linear infinite}
@keyframes feverSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){body.fever #bg::before{animation:none}}