/* © 2026 神ゲーカンパニー All rights reserved. */
html,body{margin:0;height:100%;overflow:hidden;background:#05070d;font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.panel{position:fixed;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));width:min(340px,calc(100vw - 16px));background:rgba(8,14,24,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px 10px;z-index:5}
.row1{display:flex;gap:10px;align-items:center;font-size:12px}.row1 b{flex:1}.row1 span{opacity:.8;font-variant-numeric:tabular-nums}
.mini{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:6px;padding:2px 8px}
.body{margin-top:6px}.panel.min .body{display:none}
input[type=range]{width:100%;margin:4px 0}
.btns{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0}
.btns button{flex:1;min-width:64px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;border-radius:8px;padding:6px 4px;font-size:12px}
.btns button:active{background:rgba(255,255,255,.3)}
.help{margin:4px 0 0;font-size:10px;opacity:.7}
#stick{display:none;position:fixed;width:100px;height:100px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);z-index:4;pointer-events:none}
#knob{position:absolute;left:30px;top:30px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ---- ゲーム画面 */
#game{display:none}#game.on{display:block}
.clk{position:fixed;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));padding:6px 12px;border-radius:10px;background:rgba(8,14,24,.5);font-weight:800;font-size:15px;letter-spacing:.04em;z-index:6;backdrop-filter:blur(4px)}
.warn{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);font-weight:800;font-size:14px;text-shadow:0 1px 4px #000;z-index:6;color:#ffd0a0;white-space:nowrap}
.bars{position:fixed;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));display:grid;gap:4px;z-index:6;padding:8px 10px;border-radius:12px;background:rgba(8,14,24,.45);backdrop-filter:blur(4px)}
.bar{display:grid;grid-template-columns:20px 120px;align-items:center;gap:6px;font-size:13px}
.bar>div{position:relative;height:9px;border-radius:5px;background:rgba(0,0,0,.45);overflow:hidden}.bar i{display:block;height:100%;width:50%;border-radius:5px;transition:width .25s}
.bar.low>div{animation:bl .7s infinite}@keyframes bl{50%{box-shadow:0 0 0 2px #ff6a5a inset}}
.bar u{position:absolute;top:0;width:2px;height:100%;background:#fff;opacity:.7}
.c-hp{background:#ff5a5a}.c-water{background:#4fb4ff}.c-food{background:#ffa13a}.c-mood{background:#ffd84a}.c-stam{background:#6ee07a}.c-warm{background:linear-gradient(90deg,#6ab0ff,#ff8a3a)}
.hotbar{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;z-index:6}
.hotbar button{position:relative;width:52px;height:52px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(8,14,24,.55);font-size:24px;color:#fff;padding:0}
.hotbar button.sel{border-color:#ffd84a;box-shadow:0 0 12px #ffd84a88}.hotbar i{position:absolute;left:4px;top:1px;font-size:10px;font-style:normal;opacity:.7}.hotbar small{position:absolute;right:4px;bottom:1px;font-size:10px}
.prompt{position:fixed;left:50%;top:62%;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:rgba(8,14,24,.6);font-weight:800;font-size:15px;z-index:6;opacity:0;pointer-events:none;transition:opacity .15s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}.prompt.show{opacity:1}
.prog{position:fixed;left:50%;top:62%;transform:translateX(-50%);width:min(280px,70vw);text-align:center;font-weight:800;font-size:13px;z-index:6;opacity:0;pointer-events:none}.prog.show{opacity:1}
.prog div{margin-top:4px;height:10px;border-radius:5px;background:rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,255,255,.4)}.prog i{display:block;height:100%;width:0;background:#ffd84a}
.fishbar{position:fixed;left:50%;top:70%;transform:translateX(-50%);width:min(320px,76vw);z-index:7;opacity:0;pointer-events:none;text-align:center;font-size:12px;font-weight:800}.fishbar.show{opacity:1}
.fishbar .track{position:relative;height:22px;border-radius:11px;background:rgba(0,0,0,.55);border:2px solid #fff;overflow:hidden;margin-bottom:4px}
.fishbar #fishZone{position:absolute;left:50%;top:0;height:100%;width:30%;transform:translateX(-50%);background:rgba(90,230,120,.75)}
.fishbar #fishMark{position:absolute;top:-2px;width:6px;height:26px;background:#fff;border-radius:3px;transform:translateX(-50%)}
.resthint{position:fixed;left:50%;top:40%;transform:translateX(-50%);padding:10px 18px;border-radius:12px;background:rgba(8,14,24,.6);font-weight:800;z-index:6;opacity:0;pointer-events:none}.resthint.show{opacity:1}
.toast{position:fixed;left:50%;top:64px;transform:translate(-50%,-8px);padding:9px 16px;border-radius:12px;background:rgba(8,14,24,.78);font-weight:800;font-size:14px;z-index:9;opacity:0;pointer-events:none;transition:all .25s;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
.tbtns{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(2,auto);gap:8px;z-index:6;align-items:end}
.tbtns button{padding:10px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(8,14,24,.55);color:#fff;font-weight:800;font-size:13px}
.tbtns .act{grid-column:1 / 3;height:62px;font-size:22px;background:rgba(255,140,40,.55);border-color:#ffb060;opacity:.5}.tbtns .act.on{opacity:1}
@media (hover:hover) and (pointer:fine){.tbtns{opacity:.85}.tbtns #bSprint{display:none}}
.menu{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,94vw);max-height:80vh;overflow:auto;padding:14px;border-radius:16px;background:rgba(10,18,30,.92);border:1px solid rgba(255,255,255,.25);z-index:12;display:none;backdrop-filter:blur(8px)}.menu.show{display:block}
.menu h3{margin:0 0 8px;font-size:17px}.menu h3 small{font-size:11px;opacity:.7;font-weight:600;margin-left:6px}
.menu .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.menu .it{padding:8px;border:1px solid rgba(255,255,255,.2);border-radius:10px;display:grid;gap:2px;font-size:12px}.menu .it.sel{border-color:#ffd84a}.menu .it .ic{font-size:26px}.menu .it small{opacity:.65;font-size:10px;line-height:1.4}
.menu .rc{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px;border:1px solid rgba(255,255,255,.15);border-radius:10px;margin-bottom:6px;font-size:13px}.menu .rc.no{opacity:.55}.menu .rc small{display:block;opacity:.7;font-size:11px;margin-top:2px}
.menu .sec{font-weight:800;font-size:12px;opacity:.7;margin:10px 0 4px}
.mb{border:0;border-radius:8px;background:#2e7bd8;color:#fff;font-weight:800;padding:7px 12px;font-size:12px}.mb:disabled{opacity:.35}.mb.close{width:100%;margin-top:10px;background:rgba(255,255,255,.15);padding:10px}
.hint{opacity:.7;font-size:12px}
.title{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;text-align:center;background:linear-gradient(rgba(5,10,20,.35),rgba(5,10,20,.65));overflow:auto}.title.show{display:flex}
.tin{max-width:520px;padding:24px 18px}.title .sub{margin:0;letter-spacing:.3em;font-weight:800;color:#ffd0a0;font-size:13px}.title h1{margin:8px 0;font-size:min(14vw,68px);line-height:1.1;text-shadow:0 4px 18px #000}
.title .lead{line-height:1.9;font-weight:600;text-shadow:0 2px 8px #000}.go{border:0;border-radius:14px;background:#ff8a2a;color:#fff;font-weight:900;font-size:20px;padding:14px 34px;box-shadow:0 6px 20px #0008}.q2{margin-left:10px;border:1px solid rgba(255,255,255,.4);background:rgba(8,14,24,.5);color:#fff;border-radius:10px;padding:10px 14px;font-weight:700}
.how{list-style:none;text-align:left;padding:12px 14px;background:rgba(8,14,24,.55);border-radius:12px;font-size:12px;line-height:1.8;margin:16px 0 10px}.how b{color:#ffd84a}.foot{font-size:10px;opacity:.7}
.gameover{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;text-align:center;background:rgba(0,0,0,.72)}.gameover.show{display:flex}
.gin{padding:24px;max-width:460px}.gin h2{font-size:34px;margin:6px 0}.gin h2 b{color:#ffd84a;font-size:56px}.gin .st{font-size:13px;opacity:.85;line-height:1.8}.gin .bestl{font-weight:800;color:#ffd0a0}

.pickhd{margin:14px 0 6px;font-weight:800;color:#ffd0a0;font-size:13px}
.picks{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 14px}
.picks button{display:grid;gap:1px;justify-items:center;padding:8px 2px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(8,14,24,.55);color:#fff}
.picks button i{font-style:normal;font-size:24px}.picks button b{font-size:12px}.picks button small{font-size:9px;opacity:.7}
.picks button.on{border-color:#ffd84a;background:rgba(255,200,60,.2);box-shadow:0 0 12px #ffd84a66}
.fishbar .track.t2{height:12px}.fishbar #dBar{display:block;height:100%;width:0;background:#4fb4ff;border-radius:6px}.fishbar #fishZone{left:25%;width:50%;transform:none}
.quest{position:fixed;right:max(10px,env(safe-area-inset-right));top:58px;width:min(260px,52vw);padding:8px 10px;border-radius:12px;background:rgba(8,14,24,.5);backdrop-filter:blur(4px);font-size:12px;z-index:6;line-height:1.5}.quest b{color:#ffd84a}.quest span{opacity:.7;margin-left:6px}.quest p{margin:3px 0 4px;font-weight:700}.quest button{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:6px;font-size:10px;padding:2px 6px}
.q2{margin-left:10px;border:2px solid #ffd84a;background:rgba(8,14,24,.55);color:#ffd84a;border-radius:14px;padding:12px 18px;font-weight:900;font-size:15px}.q2:disabled{opacity:.5}
.goimg{width:100%;max-width:420px;border-radius:10px;margin:8px 0;display:block;margin-left:auto;margin-right:auto}#achPanel{z-index:25}
.compass{position:fixed;left:50%;top:max(34px,calc(env(safe-area-inset-top) + 28px));transform:translateX(-50%);width:min(240px,46vw);height:24px;overflow:hidden;border-radius:12px;background:rgba(8,14,24,.45);z-index:6;backdrop-filter:blur(4px)}.compass #compStrip{position:absolute;top:0;left:0;white-space:nowrap;font-size:12px;font-weight:800;line-height:24px}.compass #compStrip span{display:inline-block;width:56px;text-align:center}.compass i{position:absolute;left:50%;top:0;width:2px;height:100%;background:#ffd84a;transform:translateX(-1px)}
@media (max-width:560px){
  .bar{grid-template-columns:18px 84px;font-size:11px}.bars{padding:6px 8px;gap:3px}
  .clk{font-size:12px;padding:5px 8px}
  .compass{left:auto;right:max(10px,env(safe-area-inset-right));top:max(44px,calc(env(safe-area-inset-top) + 36px));transform:none;width:150px}
  .quest{top:max(74px,calc(env(safe-area-inset-top) + 66px));width:150px;font-size:10.5px;padding:6px 8px}
  .quest button{display:none}
  .toast{top:36%;max-width:86vw;font-size:13px}
  .warn{top:auto;bottom:calc(env(safe-area-inset-bottom) + 84px);left:10px;transform:none;font-size:12px;text-align:left;white-space:normal;max-width:60vw}
}
.mp{margin:10px 0;padding:10px;border-radius:12px;background:rgba(8,14,24,.5);font-size:13px}.mp b{display:block;margin-bottom:6px;color:#ffd0a0}.mp input{width:92px;padding:11px 8px;border-radius:10px;border:2px solid rgba(255,255,255,.35);background:rgba(8,14,24,.6);color:#fff;font-weight:900;font-size:16px;text-align:center;letter-spacing:.2em;text-transform:uppercase}.mp .q2{margin-left:0;padding:10px 14px;font-size:13px}.mp p{margin:6px 0 0;min-height:18px;color:#ffd84a;font-weight:700}
.roomchip{position:fixed;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));transform:translateY(34px);padding:3px 10px;border-radius:999px;background:rgba(46,123,216,.7);font-size:11px;font-weight:800;z-index:6}
.title h1.ttl{font-size:min(9.4vw,46px);line-height:1.25;letter-spacing:.02em}
.sexes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px}.sexes button{display:grid;gap:1px;justify-items:center;padding:8px 4px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(8,14,24,.55);color:#fff}.sexes i{font-style:normal;font-size:26px}.sexes b{font-size:14px}.sexes small{font-size:10px;opacity:.75}.sexes button.on{border-color:#ffd84a;background:rgba(255,200,60,.2);box-shadow:0 0 12px #ffd84a66}

.bar b{display:grid;place-items:center;color:#fff;opacity:.95}
.bar[data-k=hp] b{color:#ff7a7a}.bar[data-k=water] b{color:#6cc4ff}.bar[data-k=food] b{color:#ffb35a}.bar[data-k=mood] b{color:#ffe066}.bar[data-k=stam] b{color:#8be86a}.bar[data-k=warm] b{color:#ff9a6a}
.bar{cursor:help;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.tip{position:fixed;left:max(10px,env(safe-area-inset-left));top:200px;z-index:30;max-width:min(300px,calc(100vw - 24px));padding:10px 12px;border-radius:12px;background:rgba(8,14,24,.92);color:#fff;font-size:13px;line-height:1.55;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.tip.show{display:block}.tip b{display:block;font-size:14px;margin-bottom:2px}.tip em{display:block;margin-top:4px;color:#ffb0a0;font-style:normal}

.mhead{position:sticky;top:-14px;z-index:2;height:0;text-align:right}.mb.xclose{position:relative;top:-2px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);font-size:20px;line-height:1;padding:0}
.menu{max-height:86vh}

.picks{grid-template-columns:1fr;gap:6px}.picks button{grid-template-columns:44px 1fr;align-items:center;justify-items:start;text-align:left;gap:10px;padding:8px 12px}
.picks button i,.sexes button i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);color:#ffd84a}
.picks button span{display:grid;gap:2px}.picks button b{font-size:14px}.picks button small{font-size:11px;opacity:.82;line-height:1.45}
.sexes i{width:40px;height:40px;font-size:0}.picks button.on i,.sexes button.on i{background:rgba(255,216,74,.28)}

.toast.think{font-weight:600;font-style:italic;background:rgba(20,26,40,.62);border:1px solid rgba(255,255,255,.18);letter-spacing:.02em}
/* 横画面(高さがせまい)でも、タイトルの上が切れないように */
.title{align-items:flex-start;-webkit-overflow-scrolling:touch}.tin{margin:auto;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
@media (max-height:520px){.tin{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:16px}.title h1.ttl{font-size:min(7.4vh,34px);line-height:1.2;margin:4px 0}.title .sub{font-size:11px}.title .lead{line-height:1.6;font-size:12px}}

.namein{width:min(260px,80%);padding:10px 12px;border-radius:12px;border:2px solid rgba(255,255,255,.35);background:rgba(8,14,24,.6);color:#fff;font-size:16px;text-align:center;margin:0 0 8px}

/* スマホ: 拡大・ダブルタップで画面が動かなくなるのをふせぐ */
html,body{overscroll-behavior:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}
body{touch-action:manipulation}canvas,#game,.tbtns,#stick{touch-action:none}.menu,.title,#cookUI .panel,.guide{touch-action:pan-y}
button,.menu,.title{-webkit-user-select:none;user-select:none}
.tbtns #bCancel,.tbtns #bShout{display:none}.tbtns #bCancel.show{display:block;background:rgba(200,60,50,.6)}.tbtns #bShout.show{display:block;grid-column:1 / 3;height:54px;font-size:20px;background:rgba(230,70,40,.7);border-color:#ffb0a0;animation:shpulse .8s infinite}@keyframes shpulse{50%{box-shadow:0 0 0 6px rgba(255,120,90,.45)}}
.tbtns #bHelp{display:none}body.touch .tbtns #bHelp{display:block}body.touch .tbtns #bSprint{display:none}
.questshow{position:fixed;left:max(10px,env(safe-area-inset-left));top:210px;z-index:6;display:none;padding:6px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(8,14,24,.55);color:#fff;font-weight:800;font-size:12px}.questshow.show{display:block}
.guide{position:fixed;inset:0;z-index:35;background:rgba(5,10,20,.82);display:none;align-items:flex-start;justify-content:center;overflow:auto}.guide.show{display:flex}.gin2{margin:auto;max-width:560px;padding:20px 18px;text-align:left}.gin2 h3{margin:0 0 10px;font-size:20px;text-align:center}.gin2 ul{padding-left:18px;line-height:1.75;font-size:14px}.gin2 .go{display:block;margin:12px auto 0}
body.touch .tbtns .act{height:78px;font-size:24px}body.touch .tbtns button{padding:12px 16px;font-size:14px}
.stick.dash #knob,#stick.dash #knob{background:#ff8a2a;box-shadow:0 0 14px #ff8a2a}
/* 10/24 バッグ・つくるのUIを作り直し(押しやすさ・見やすさ) */
.menu{width:min(640px,96vw);max-height:86vh;padding:16px 16px 12px;border-radius:20px;background:linear-gradient(180deg,rgba(18,30,46,.96),rgba(10,18,30,.96));border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 60px rgba(0,0,0,.55);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;animation:mIn .16s ease-out}
@keyframes mIn{from{opacity:0;transform:translate(-50%,-47%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%)}}
.menu h3{font-size:19px;letter-spacing:.04em}
.mb{min-height:40px;padding:9px 16px;font-size:14px;border-radius:12px;background:linear-gradient(180deg,#3d8ff0,#2a6fcc);box-shadow:0 2px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;touch-action:manipulation;transition:transform .06s,filter .1s}
.mb:active{transform:translateY(1px) scale(.97);filter:brightness(1.15)}
.mb.off{background:rgba(255,255,255,.12);color:rgba(255,255,255,.55);box-shadow:none}
.mb.big{min-height:46px;font-size:15px;padding:10px 18px}
.mb.warn{background:linear-gradient(180deg,#d8853a,#b8642a)}
.mb.sub{background:rgba(255,255,255,.12);margin-top:10px}
.mb.shake{animation:shake .32s}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.menu .cap{height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin:-2px 0 10px}.menu .cap i{display:block;height:100%;border-radius:6px}
.menu .tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;scrollbar-width:none}.menu .tabs::-webkit-scrollbar{display:none}
.menu .tab{flex:0 0 auto;min-height:38px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font-weight:800;font-size:13px;cursor:pointer;touch-action:manipulation}
.menu .tab span{margin-left:6px;opacity:.6;font-size:11px}.menu .tab.on{background:#ffd84a;color:#2a2010;border-color:#ffd84a}
.menu .bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.menu .bit{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 9px;border-radius:14px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;touch-action:manipulation;transition:border-color .1s,background .1s}
.menu .bit:hover{background:rgba(255,255,255,.1)}.menu .bit.pick{border-color:#ffd84a;background:rgba(255,216,74,.12)}.menu .bit.held{box-shadow:inset 0 0 0 2px rgba(90,209,138,.7)}
.menu .bic img{width:52px!important;height:52px!important}.menu .bic{font-size:30px;line-height:52px;min-height:52px}
.menu .bn{font-size:12px;font-weight:800;text-align:center;line-height:1.25}.menu .bc{position:absolute;top:6px;right:8px;font-size:12px;font-weight:900;color:#ffd84a}
.menu .bit .bar{width:80%;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}.menu .bit .bar i{display:block;height:100%}
.menu .bit em{font-style:normal;font-size:10px;color:#7fe0a4}
.menu .bdet{position:sticky;bottom:-12px;margin:12px -16px -12px;padding:12px 16px 14px;background:rgba(14,24,38,.98);border-top:1px solid rgba(255,255,255,.15)}
.menu .bdh{display:flex;gap:12px;align-items:center}.menu .bdh p{margin:2px 0;font-size:12px;opacity:.85;line-height:1.5}.menu .bdh small{font-size:11px;opacity:.7}
.menu .bacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.menu .bacts .mb{flex:1 1 140px}
.menu .rcard{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);margin-bottom:8px}
.menu .rcard.can{border-color:rgba(90,209,138,.55);background:rgba(90,209,138,.08)}
.menu .rcard .rt{display:flex;gap:10px;align-items:center;grid-column:1/2}.menu .rcard .rt small{display:block;font-size:11px;opacity:.7;line-height:1.4;margin-top:2px}
.menu .rcard .mb{grid-column:2/3;grid-row:1/3}
.menu .chips{display:flex;flex-wrap:wrap;gap:5px;grid-column:1/2}
.menu .chip{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08)}.menu .chip b{margin-left:3px}
.menu .chip.ok{background:rgba(90,209,138,.18);color:#bff0cf}.menu .chip.ng{background:rgba(255,107,90,.18);color:#ffc4bb}
@media (max-width:560px){.menu{top:auto;bottom:0;transform:translateX(-50%);width:100vw;max-height:78vh;border-radius:20px 20px 0 0;padding-bottom:max(12px,env(safe-area-inset-bottom))}@keyframes mIn{from{opacity:0;transform:translate(-50%,8%)}to{opacity:1;transform:translate(-50%,0)}}.menu .rcard{grid-template-columns:1fr}.menu .rcard .mb{grid-column:1;grid-row:auto}}
.mb.xclose{min-height:0;width:40px;height:40px;box-shadow:none;background:rgba(255,255,255,.18)}.mb.close{background:rgba(255,255,255,.14);box-shadow:none}
/* 10/24 マス目のバッグ(アタッシュケース風) */
.menu.bagmode{width:min(760px,97vw)}
.menu .bcase{background:linear-gradient(180deg,#5a412b,#3b2a1c);border-radius:16px;padding:10px;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.4);overflow-x:auto}
.menu .bgridx{position:relative;margin:0 auto;background:#24332c;border-radius:8px;touch-action:none}
.menu .bgridx.opening{animation:bOpen .5s cubic-bezier(.2,1.2,.4,1)}@keyframes bOpen{0%{transform:perspective(800px) rotateX(50deg) translateY(24px);opacity:0}100%{transform:none;opacity:1}}
.menu .bcell{position:absolute;border:1px solid #3a4d43;background:#2c3d34;border-radius:3px}
.menu .bit2{position:absolute;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:2px solid rgba(255,255,255,.22);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:box-shadow .12s,border-color .12s}
.menu .bgridx.opening .bit2{animation:bDrop .45s cubic-bezier(.25,1.6,.5,1) backwards}
.menu .bit2.fresh{animation:bDrop .5s cubic-bezier(.25,1.6,.5,1)}@keyframes bDrop{0%{transform:translateY(-30px) scale(.7);opacity:0}60%{opacity:1}100%{transform:none}}
.menu .bit2.slide{transition:left .25s cubic-bezier(.3,1.3,.5,1),top .25s cubic-bezier(.3,1.3,.5,1)}
.menu .bit2:hover{border-color:rgba(255,255,255,.45)}.menu .bit2.pick{border-color:#ffd84a;box-shadow:0 0 0 3px rgba(255,216,74,.3)}.menu .bit2.held{box-shadow:inset 0 0 0 2px rgba(90,209,138,.8)}
.menu .bit2.drag{z-index:5;cursor:grabbing;opacity:.92;box-shadow:0 10px 24px rgba(0,0,0,.5)}.menu .bit2.target{border-color:#e8a84a;box-shadow:0 0 0 4px rgba(232,168,74,.55)}
.menu .bimg{position:absolute;left:50%;top:50%;max-width:none;transform:translate(-50%,-50%) rotate(var(--r,0deg));filter:drop-shadow(0 3px 3px rgba(0,0,0,.55));pointer-events:none;transition:transform .15s}
.menu .bit2:hover .bimg{transform:translate(-50%,-55%) rotate(var(--r,0deg)) scale(1.05)}
.menu .bemo{position:absolute;inset:0;display:grid;place-items:center;font-size:26px}
.menu .bnm{position:absolute;left:5px;top:2px;font-size:10px;opacity:.8;pointer-events:none;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;max-width:calc(100% - 8px)}
.menu .bct{position:absolute;right:4px;bottom:1px;font-weight:900;font-size:12px;color:#ffe9a8;text-shadow:0 1px 2px #000;pointer-events:none}
.menu .bfr{position:absolute;left:4px;bottom:3px;height:3px;border-radius:3px;background:#7fd87a;max-width:calc(100% - 8px);pointer-events:none}
.menu .bghost{position:absolute;border-radius:8px;pointer-events:none;z-index:4}.menu .bghost.ok{background:rgba(90,209,138,.3);border:2px dashed #7fe0a4}.menu .bghost.ng{background:rgba(255,107,90,.3);border:2px dashed #ff9a87}
.menu .btools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}.mb.sub2{background:rgba(255,255,255,.14);box-shadow:none}.mb.sub2.warn{background:rgba(216,133,58,.35)}
.menu .bover{border:2px solid #e8a84a;border-radius:12px;padding:8px 10px;margin-bottom:8px;background:rgba(232,168,74,.1)}.menu .bovl{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0}.menu .bovi{display:flex;align-items:center;gap:4px;font-size:12px}.menu .bovi img{width:34px!important;height:34px!important}.menu .bover small{opacity:.75;font-size:11px}
.menu .bcombo{border:2px solid #e8a84a;border-radius:12px;padding:10px;margin:8px 0;background:rgba(232,168,74,.08)}.menu .bcombo p{margin:0 0 6px}
.menu .bhint{margin:6px 0}
@media (prefers-reduced-motion:reduce){.menu .bit2,.menu .bgridx{animation:none!important;transition:none!important}}
.mb.danger{background:linear-gradient(180deg,#d8853a,#b8642a)}.mb.sub2.danger{background:rgba(216,133,58,.35)}
.menu.bagmode .bdet{position:static;margin:10px 0 0;border:1px solid rgba(255,255,255,.12);border-radius:12px}
.menu .crow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid rgba(255,255,255,.08)}.menu .crow .bic img{width:40px!important;height:40px!important}
#hotbar img,.menu img,#cookUI img{object-fit:contain}
/* 10/24 弓の照準: 引くほど外の輪がしぼられる。引ききると金色 */
#xhair{position:fixed;left:50%;top:50%;width:0;height:0;z-index:5;pointer-events:none;--p:0}
#xhair i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 3px rgba(0,0,0,.6)}
#xhair b{position:absolute;left:calc(-30px + var(--p) * 18px);top:calc(-30px + var(--p) * 18px);width:calc(60px - var(--p) * 36px);height:calc(60px - var(--p) * 36px);border-radius:50%;border:2px solid rgba(255,255,255,calc(.25 + var(--p) * .5));box-shadow:0 0 4px rgba(0,0,0,.4)}
#xhair.full b{border-color:#ffd84a;box-shadow:0 0 10px rgba(255,216,74,.7)}
/* 10/24 フォント(合意: A=Zen Antique、C=Yuji Syuku)。タイトルと特別な場面は墨と筆、見出しとボタンは古い活字。本文は読みやすいゴシックのまま */
:root{--f-brush:'Yuji Syuku','Hiragino Mincho ProN','Yu Mincho',serif;--f-antique:'Zen Antique','Hiragino Mincho ProN','Yu Mincho',serif}
.title h1,.title h1.ttl{font-family:var(--f-brush);font-weight:400;letter-spacing:.06em;text-shadow:0 3px 18px rgba(0,0,0,.55)}
.title .sub{font-family:var(--f-antique);font-weight:400;letter-spacing:.35em}
.menu h3,.menu .sec,.menu .tab,.mb.big,.mb.close,.quest b,#clk,.tbtns button,.title button,.prog span,#achPanel h3,#mapPanel h3{font-family:var(--f-antique);font-weight:400;letter-spacing:.04em}
.menu h3{font-size:21px}
#toast.think{font-family:var(--f-brush);font-weight:400;font-size:1.08em;letter-spacing:.03em}
.icoS{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:2px}.menu .rc b .icoS{width:24px;height:24px;vertical-align:-6px}
/* 10/25 設定画面(音・音量・画質・草の量) */
.setbox{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(6,10,14,.55);backdrop-filter:blur(3px)}
.setbox.show{display:flex}
.setin{width:min(360px,92vw);background:rgba(18,24,28,.94);border:1px solid rgba(255,220,160,.25);border-radius:16px;padding:18px 18px 14px;color:#f3ead8;display:flex;flex-direction:column;gap:8px;}
.setin h3{margin:0 0 4px;font-size:22px;letter-spacing:.12em;font-family:var(--f-brush);font-weight:400}
.setin label{font-size:13px;opacity:.85;display:flex;justify-content:space-between}
.setin .seg{display:flex;gap:6px}
.setin .seg button{flex:1;padding:10px 4px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:inherit;font-size:14px}
.setin .seg button.on{background:rgba(255,160,60,.55);border-color:#ffb060}
.setin input[type=range]{width:100%;accent-color:#ffa040}
.setin small{opacity:.6;font-size:11px;line-height:1.5}
.setin .setx{margin-top:6px;padding:12px;border-radius:10px;border:1px solid #ffb060;background:rgba(255,140,40,.35);color:inherit;font-size:15px}
/* 10/25 倒れる演出(赤くにじんで暗転) */
#faintFx{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(60,0,0,.15) 0%,rgba(40,0,0,.75) 60%,#000 100%)}
#faintFx.show{animation:faintIn 5s ease forwards}
#faintFx p{color:#e8d8c8;font-family:var(--f-brush);font-size:clamp(18px,4.6vw,28px);letter-spacing:.12em;text-shadow:0 2px 12px #000;opacity:0;animation:faintTx 5s ease forwards}
@keyframes faintIn{0%{opacity:0}35%{opacity:.85}55%{opacity:1;background-color:#000}88%{opacity:1}100%{opacity:0}}
@keyframes faintTx{0%,20%{opacity:0}40%,80%{opacity:1}100%{opacity:0}}
/* 10/25 すぐ使う欄(食べ物・水・手当て)は緑のふちどり */
#hotbar button.q{border-color:rgba(140,210,120,.55);background:rgba(40,70,40,.45)}
#hotbar button.q.sel{border-color:#b8f0a0;box-shadow:0 0 0 2px rgba(160,240,130,.5)}
/* 10/25 スマホ: 道具欄(すぐ使う欄)は左はしに縦にならべる(スティック・行動ボタンと重ならない) */
body.touch .hotbar{left:max(8px,env(safe-area-inset-left));top:34%;bottom:auto;transform:none;flex-direction:column;flex-wrap:wrap;max-height:44vh;gap:6px}
body.touch .hotbar button{width:50px;height:50px}
body.touch .prompt{top:44%}
/* 10/25 水の中(青いもやと、ゆらぐ光) */
#uwFx{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at 50% 0%,rgba(140,220,235,.25),rgba(10,60,80,.35) 55%,rgba(2,20,35,.7) 100%);mix-blend-mode:normal}
#uwFx.show{animation:uwWob 4s ease-in-out infinite}
#uwFx::after{content:'';position:absolute;inset:-10%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 18px,rgba(255,255,255,0) 18px 60px);animation:uwRay 7s linear infinite}
@keyframes uwRay{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
@keyframes uwWob{0%,100%{filter:blur(0)}50%{filter:blur(.4px)}}
#breath{position:fixed;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 70px);transform:translateX(-50%);z-index:7;display:none;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(6,20,30,.6);color:#d8f4ff;font-size:13px}
#breath.show{display:flex}#breath i{display:block;width:160px;height:8px;border-radius:9px;background:rgba(255,255,255,.15);overflow:hidden}#breath b{display:block;height:100%;background:linear-gradient(90deg,#7fe0ff,#e8fbff);border-radius:9px}
#breath.low b{background:linear-gradient(90deg,#ff6a5a,#ffb0a0)}
/* 10/25 祭りの踊り: 太鼓に合わせて縮む輪 */
#dance{position:fixed;left:50%;top:44%;width:0;height:0;z-index:60;pointer-events:none;display:none}
#dance.show{display:block}
#dance .ring{position:absolute;left:0;top:0;width:110px;height:110px;border-radius:50%;border:4px solid #ffb34a;box-shadow:0 0 24px #ff8a2a}
#dance .core{position:absolute;left:0;top:0;width:110px;height:110px;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed rgba(255,255,255,.7)}
#dance.hit .core{background:rgba(255,200,90,.35)}#dance.hit.miss .core{background:rgba(255,80,60,.3)}
#dance p{position:absolute;left:0;top:78px;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-brush);font-size:22px;color:#ffe8c0;text-shadow:0 2px 10px #000}
/* 10/25 チャット */
#bChat{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 70px);z-index:8;padding:10px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(8,14,24,.6);color:#fff;font-size:14px;font-weight:700}
body.touch #bChat{top:calc(34% - 58px);bottom:auto;left:max(8px,env(safe-area-inset-left));padding:10px 12px;font-size:13px}
#chatLog{position:fixed;left:max(12px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 150px);z-index:7;display:flex;flex-direction:column;gap:4px;max-width:min(360px,62vw);pointer-events:none}
#chatLog .cm{background:rgba(6,12,20,.68);color:#f2efe6;padding:6px 10px;border-radius:10px;font-size:13px;line-height:1.4;transition:opacity 1s;word-break:break-all}
#chatLog .cm b{color:#ffcf7a;margin-right:8px}#chatLog .cm.me b{color:#9fe0ff}#chatLog .cm.fade{opacity:0}
#chatBox{position:fixed;inset:0;z-index:85;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.35)}
#chatBox.show{display:flex}
#chatBox .cin{width:min(520px,100%);background:rgba(16,22,28,.96);border-top:1px solid rgba(255,220,160,.25);border-radius:16px 16px 0 0;padding:12px max(12px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
#chatBox .quick{display:flex;flex-wrap:wrap;gap:6px}
#chatBox .quick button{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#f3ead8;font-size:13px}
#chatBox form{display:flex;gap:8px}#chatBox input{flex:1;min-width:0;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;font-size:16px}
#chatBox form button{padding:0 18px;border-radius:10px;border:1px solid #ffb060;background:rgba(255,140,40,.5);color:#fff;font-weight:700}
#chatBox .cx{padding:9px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#ddd}
/* 10/25 エモーション */
#emoteBox{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:calc(max(14px,env(safe-area-inset-bottom)) + 300px);z-index:9;display:none;grid-template-columns:repeat(2,auto);gap:6px;padding:10px;border-radius:14px;background:rgba(10,16,24,.82);border:1px solid rgba(255,220,160,.25)}
#emoteBox.show{display:grid}
#emoteBox button{position:relative;padding:10px 14px 10px 22px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#f3ead8;font-size:14px;font-weight:700;white-space:nowrap}
#emoteBox button i{position:absolute;left:7px;top:4px;font-size:10px;font-style:normal;opacity:.6}
body.touch #emoteBox{bottom:auto;top:28%}
/* 10/25 セーブ枠 */
.title .slots{display:flex;gap:6px;justify-content:center;margin:4px 0 10px;flex-basis:100%;width:100%}
.title .slots button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1 1 0;min-width:0;max-width:150px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(10,16,24,.55);color:#f3ead8;text-align:left}
.title .slots button b{font-size:14px;letter-spacing:.06em}.title .slots button small{font-size:11px;opacity:.75}
.title .slots button.on{border-color:#ffb060;background:rgba(255,140,40,.32);box-shadow:0 0 0 2px rgba(255,176,96,.25)}
/* 10/25 キャラクターづくり */
.title .lookbtn{display:block;margin:10px auto 4px;padding:12px 18px;font-size:15px}
#charMaker{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(6,10,16,.78);backdrop-filter:blur(4px);padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
#charMaker .cmin{width:min(980px,100%);height:min(640px,100%);display:flex;gap:12px;background:rgba(18,24,30,.96);border:1px solid rgba(255,220,160,.25);border-radius:18px;overflow:hidden}
#charMaker .cmview{position:relative;flex:1 1 45%;min-width:0;background:radial-gradient(ellipse at 50% 35%,#3b4d60,#151c24 75%)}
#charMaker canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#charMaker .cmwait{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#d8e8f0;font-size:13px;margin:0}
#charMaker .cmside{flex:1 1 55%;min-width:0;display:flex;flex-direction:column;padding:16px 16px 12px;color:#f3ead8}
#charMaker h3{margin:0 0 8px;font-family:var(--f-brush);font-weight:400;font-size:24px;letter-spacing:.12em}
#charMaker .cmopts{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px}
#charMaker label{font-size:12px;opacity:.8;margin-top:6px;display:flex;justify-content:space-between}#charMaker small{font-size:11px;opacity:.55}
#charMaker .cmrow{display:flex;flex-wrap:wrap;gap:6px}
#charMaker .cmrow button{padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:inherit;font-size:13px}
#charMaker .cmrow button.on{background:rgba(255,160,60,.55);border-color:#ffb060}
#charMaker .cmrow.sw button,#charMaker .cmpick{width:30px;height:30px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.25);position:relative;overflow:hidden;display:inline-block;cursor:pointer}
#charMaker .cmrow.sw button.on{border-color:#ffd27a;box-shadow:0 0 0 2px #ffb060}
#charMaker .cmpick input{position:absolute;inset:-6px;opacity:0;cursor:pointer}#charMaker .cmpick::after{content:'＋';position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#fff;text-shadow:0 1px 3px #000}
#charMaker input[type=range]{width:100%;accent-color:#ffa040}
#charMaker .cmbtns{display:flex;gap:8px;margin-top:10px}#charMaker .cmbtns button{flex:1;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font-size:15px;font-weight:700}
#charMaker .cmok{background:rgba(255,140,40,.6)!important;border-color:#ffb060!important}
@media (max-width:700px){#charMaker .cmin{flex-direction:column;height:100%}#charMaker .cmview{flex:0 0 38%}#charMaker .cmside{flex:1;min-height:0}}
/* 10/25 ボタンを減らす: 右上に地図・メニューの小さなアイコン。下は 行動・跳ぶ・バッグ・つくる だけ */
#topIcons{position:fixed;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:9;display:flex;gap:6px}
#topIcons button{width:38px;height:38px;padding:7px;border-radius:10px;border:1px solid rgba(255,255,255,.28);background:rgba(8,14,24,.55);color:#f3ead8;display:grid;place-items:center}
#topIcons button svg{width:22px;height:22px}
.clk{right:calc(max(10px,env(safe-area-inset-right)) + 92px)!important}
.tbtns #bSky,.tbtns #bRest,.tbtns #bHelp,.tbtns #bView,.tbtns #bEmote{display:none!important}
body.touch .tbtns #bHelp{display:none!important}
.setin h4{margin:10px 0 0;font-size:13px;opacity:.7;font-weight:700}
.setacts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.setacts button{padding:12px 6px;border-radius:10px;border:1px solid rgba(255,220,160,.3);background:rgba(255,160,60,.18);color:inherit;font-size:14px;font-weight:700}
.setin{max-height:calc(100vh - 40px);overflow-y:auto}
/* 10/25 スクショ */
body.shooting .hud,body.shooting #topIcons,body.shooting .tbtns,body.shooting #hotbar,body.shooting .quest,body.shooting .clk,body.shooting .prompt,body.shooting #toast,body.shooting #stick,body.shooting #chatLog,body.shooting #bChat,body.shooting #breath,body.shooting #thinkBox{visibility:hidden!important}
.shotFlash{position:fixed;inset:0;z-index:95;background:#fff;pointer-events:none;animation:shF .45s ease-out forwards}@keyframes shF{from{opacity:.85}to{opacity:0}}
#shotBox{position:fixed;inset:0;z-index:92;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:16px}
#shotBox.show{display:flex}
#shotBox .shin{width:min(720px,100%);display:flex;flex-direction:column;gap:10px;background:rgba(16,22,28,.96);border:1px solid rgba(255,220,160,.25);border-radius:16px;padding:12px;color:#f3ead8}
#shotBox img{width:100%;border-radius:10px;display:block}
#shotBox .shb{display:flex;gap:8px}#shotBox .shb>*{flex:1;text-align:center;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font-size:15px;font-weight:700;text-decoration:none}
#shotBox .shsave{background:rgba(255,140,40,.55)!important;border-color:#ffb060!important}#shotBox small{opacity:.6;font-size:11px;text-align:center}
.clk{right:calc(max(10px,env(safe-area-inset-right)) + 136px)!important}
.tbtns #bJump.dive{background:rgba(40,120,200,.6);border-color:#7fc8ff}
/* 10/25 アルバム */
#albumBox{position:fixed;inset:0;z-index:91;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);padding:14px}
#albumBox.show{display:flex}
#albumBox .alin{width:min(860px,100%);max-height:100%;display:flex;flex-direction:column;gap:10px;background:rgba(16,22,28,.96);border:1px solid rgba(255,220,160,.25);border-radius:16px;padding:14px;color:#f3ead8}
#albumBox h3{margin:0;font-family:var(--f-brush);font-weight:400;font-size:22px;letter-spacing:.1em}#albumBox h3 small{font-family:inherit;font-size:12px;opacity:.6}
#albumBox .algrid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
#albumBox figure{margin:0;cursor:pointer}#albumBox figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block}#albumBox figcaption{font-size:11px;opacity:.7;margin-top:3px}
#albumBox .alnone{opacity:.7;font-size:13px}
#albumBox .alx,#albumBox .alvb>*{padding:11px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;font-size:14px;font-weight:700;text-align:center;text-decoration:none}
#albumBox .alview{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.9);padding:16px}#albumBox .alview.show{display:flex}
#albumBox .alview img{max-width:100%;max-height:78vh;border-radius:10px}#albumBox .alvb{display:flex;gap:8px;width:min(520px,100%)}#albumBox .alvb>*{flex:1}
/* 10/25 スマホ: 時計はアイコンの下、目標はその下へ */
@media (max-width:700px){.clk{right:max(10px,env(safe-area-inset-right))!important;top:calc(max(10px,env(safe-area-inset-top)) + 46px)!important}.quest{top:calc(max(10px,env(safe-area-inset-top)) + 82px)!important}}
.dimPick{opacity:.55}
/* 10/25 ケイの日記 */
#diaryBox{position:fixed;inset:0;z-index:93;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:16px}
#diaryBox.show{display:flex}
#diaryBox .dyin{width:min(520px,100%);display:flex;flex-direction:column;gap:12px;padding:20px 18px 14px;border-radius:14px;background:linear-gradient(#efe2c4,#e2cfa6);color:#3a2a18;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#diaryBox h3{margin:0;font-family:var(--f-brush);font-weight:400;font-size:24px;letter-spacing:.1em}#diaryBox h3 small{font-size:12px;opacity:.6;font-family:inherit}
#diaryBox .dypage small{font-size:11px;opacity:.6}#diaryBox .dypage p{margin:6px 0 0;font-family:var(--f-antique);font-size:16px;line-height:1.9}
#diaryBox .dyb{display:flex;gap:8px}#diaryBox .dyb button{flex:1;padding:11px;border-radius:10px;border:1px solid rgba(80,50,20,.35);background:rgba(255,255,255,.35);color:#3a2a18;font-weight:700}#diaryBox .dyb button:disabled{opacity:.35}
/* 10/25 ゲージの右に%表示 */
.bars .bar{grid-template-columns:20px minmax(56px,120px) 32px!important}
.bar .pct{font-size:10.5px;font-weight:800;color:#f3ead8;text-align:right;font-variant-numeric:tabular-nums;opacity:.9}
.bar.low+.pct,.bar .low~.pct{color:#ff9a8a}
/* 10/25 結末 */
#endBox{position:fixed;inset:0;z-index:96;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(30,70,110,.75),rgba(0,6,14,.94));padding:18px}
#endBox.show{display:flex}
#endBox .enin{width:min(560px,100%);display:flex;flex-direction:column;gap:10px;color:#eef4f8;text-align:center}
#endBox h2{margin:0 0 6px;font-family:var(--f-brush);font-weight:400;font-size:clamp(30px,8vw,44px);letter-spacing:.14em;text-shadow:0 0 24px rgba(120,200,255,.6)}
#endBox p{margin:0;font-family:var(--f-antique);line-height:1.9;font-size:15px}#endBox .enq{margin-top:8px;opacity:.8;font-size:13px}
#endBox button{display:flex;flex-direction:column;gap:2px;padding:13px 16px;border-radius:12px;border:1px solid rgba(160,210,255,.4);background:rgba(20,50,80,.55);color:#fff;text-align:left}
#endBox button b{font-size:16px}#endBox button small{font-size:12px;opacity:.75}#endBox button:disabled{opacity:.4}
/* 10/25 難易度・図鑑タブ・腕前バー */
.title .diffs{width:100%;margin:2px 0 8px}.title .diffs p{margin:0 0 4px;font-size:12px;opacity:.75;text-align:center}
.title .diffs>div{display:flex;gap:6px;justify-content:center}
.title .diffs button{flex:1 1 0;max-width:170px;display:flex;flex-direction:column;gap:2px;padding:8px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(10,16,24,.55);color:#f3ead8;text-align:left}
.title .diffs button b{font-size:13px}.title .diffs button small{font-size:10px;opacity:.7;line-height:1.35}.title .diffs button.on{border-color:#ffb060;background:rgba(255,140,40,.32)}
.dextabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}.dextabs button{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:inherit;font-size:13px}.dextabs button.on{background:rgba(255,160,60,.5);border-color:#ffb060}
.skbar{height:6px;border-radius:4px;background:rgba(255,255,255,.12);margin-top:5px;overflow:hidden}.skbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb060,#ffe08a)}
/* 10/25 ボタンの反応を良く: 押した瞬間の手ごたえ・当たり判定を広く */
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button.pressed{transform:scale(.93);filter:brightness(1.35);transition:transform .06s}
body.touch .tbtns button{min-height:54px;min-width:76px}body.touch .tbtns .act{min-height:84px}
body.touch #topIcons button{width:44px;height:44px}
body.touch #hotbar button{width:54px;height:54px}
.tbtns button,#topIcons button,#hotbar button{position:relative}
.tbtns button::after,#topIcons button::after,#hotbar button::after{content:'';position:absolute;inset:-6px}
.title .diffs.locked p{font-size:13px;opacity:.9}

/* 10/25 ボトルメール */
.bmail{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(5,10,16,.55);padding:16px}
.bmcard{width:min(440px,100%);background:#141c26;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;color:#eef;display:flex;flex-direction:column;gap:10px}
.bmcard h3{margin:0;font-size:18px}
.bmcard input,.bmcard textarea{width:100%;box-sizing:border-box;background:#0c121a;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px;font:inherit;font-size:16px;resize:none}
.bmbtns{display:flex;gap:8px;justify-content:flex-end}
.bmcard.letter{background:#efe4c8;color:#3a2a18;border-color:#c8b28a;font-family:serif}
.bmcard.letter .bmbody{font-size:16px;line-height:1.8;white-space:pre-wrap;margin:4px 0}
.bmcard.letter .bmsign{text-align:right;font-size:14px;opacity:.8;margin:0}
/* 10/25 写真図鑑 */
.dexph{width:72px;height:48px;border-radius:8px;object-fit:cover;flex:none;margin-right:10px;background:rgba(255,255,255,.06);display:inline-flex;align-items:center;justify-content:center;font-size:18px;opacity:.9}
.dexph.none{opacity:.35}
.dexrow{display:flex;align-items:center;gap:0;min-width:0;flex:1;text-align:left}

/* 10/26 攻撃ボタン・パリィ */
.tbtns #bAtk{background:rgba(170,50,40,.55);border-color:rgba(255,170,150,.6)}
#bParry{position:fixed;left:50%;top:58%;transform:translate(-50%,-50%) scale(.6);z-index:30;padding:18px 34px;border-radius:999px;border:3px solid #ffe08a;background:radial-gradient(circle,#ffcf4a,#e06a1a);color:#2a1200;font-size:26px;font-weight:900;letter-spacing:.06em;box-shadow:0 0 0 6px rgba(255,210,90,.25),0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .08s,transform .08s;font-family:var(--f-antique)}
#bParry.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);animation:pryPulse .3s ease-in-out infinite alternate}
@keyframes pryPulse{to{box-shadow:0 0 0 14px rgba(255,210,90,.05),0 10px 30px rgba(0,0,0,.5)}}

/* 10/26 家づくり */
#buildBar{position:fixed;left:50%;bottom:max(96px,calc(env(safe-area-inset-bottom) + 96px));transform:translateX(-50%);z-index:7;display:none;gap:6px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 200px)}
#buildBar.show{display:flex}
#buildBar button{padding:9px 13px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:rgba(8,14,24,.65);color:#fff;font-weight:800;font-size:13px;font-family:var(--f-antique)}
#buildBar button.on{background:rgba(60,130,230,.75);border-color:#9ac8ff}
body.touch #buildBar button{padding:12px 14px;font-size:14px}
.menu .matrow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.menu .matrow .mat{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:13px}
.menu .matrow .mat.on{background:#e8b84a;color:#2a1a00;border-color:#ffe08a;font-weight:800}
.menu .mtag{font-size:11px;padding:1px 7px;border-radius:999px;background:rgba(232,184,74,.25);margin-left:4px}
.menu .tabs.hsub{margin-top:6px}
.menu .phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.menu .phpick{padding:0;border:2px solid rgba(255,255,255,.2);border-radius:10px;overflow:hidden;background:none;aspect-ratio:3/2}
.menu .phpick img{width:100%;height:100%;object-fit:cover;display:block}
/* 10/26 つくる: 種類のタブ */
.menu .tabs.ctabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
.menu .tabs.ctabs::-webkit-scrollbar{display:none}
.menu .tabs.ctabs .tab{flex:none;white-space:nowrap}
.menu .cbadge{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:#3fbf6a;color:#fff;font-style:normal;font-size:11px;line-height:18px;margin-left:3px}
.menu .sec.sec2{color:#7fe0a0}.menu .sec.sec1{color:#f0c060}.menu .sec.sec0{color:rgba(255,255,255,.5)}
/* 10/26 つくる: 種類のタブ */
.menu .tabs.ctabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
.menu .tabs.ctabs::-webkit-scrollbar{display:none}
.menu .tabs.ctabs .tab{flex:none;white-space:nowrap}
.menu .cbadge{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:#3fbf6a;color:#fff;font-style:normal;font-size:11px;line-height:18px;margin-left:3px}
.menu .sec.sec2{color:#7fe0a0}.menu .sec.sec1{color:#f0c060}.menu .sec.sec0{color:rgba(255,255,255,.5)}
/* 10/26 段階的なヒント */
#tipCard{position:fixed;left:max(12px,env(safe-area-inset-left));top:168px;z-index:9;max-width:min(330px,calc(100vw - 24px));padding:12px 34px 12px 14px;border-radius:14px;background:rgba(14,26,22,.88);border:1px solid rgba(140,230,170,.45);color:#eaf6ee;box-shadow:0 8px 24px rgba(0,0,0,.35);transform:translateX(-120%);transition:transform .35s ease;pointer-events:auto}
#tipCard.show{transform:none}
#tipCard b{font-size:13px;color:#9fe8b8;font-family:var(--f-antique);font-weight:400}
#tipCard p{margin:4px 0 0;font-size:13px;line-height:1.6}
#tipCard button{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:14px}
/* 10/26 嵐の海の波しぶき */
#spray { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 4; mix-blend-mode: screen; }
/* 10/26 作業をやめるボタン */
.prog.show{pointer-events:auto}.prog .progx{margin-top:8px;pointer-events:auto;font:inherit;font-size:12px;padding:6px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.55);background:rgba(20,24,30,.62);color:#fff;cursor:pointer}.prog .progx:active{transform:scale(.96)}
/* 10/26 つくる: 次はこれがおすすめ */
.menu .sec.rec{color:#ffd84a}.menu .rcard.rec{border-color:rgba(255,216,74,.55);background:rgba(255,216,74,.08)}.menu .rcard .lack{display:block;margin-top:4px;font-size:11px;color:#ffcf8a;opacity:.95}.menu .rcard .lack.ok{color:#8fe3b0}