/* 星露の庭 — 画面の文字とボタン（絵は canvas、文字はここ。絵本の加工で字がにじまないように） */
:root{
  --ink:#3a3550; --accent:#c94a77; --paper:#fbf6ec; --plate:rgba(255,252,246,.86); --gold:#c9a24a;
  --bg:#c4e0f4;
  --tb:max(0px, calc(100% - 100svh)); /* iOS 26 の下端のツールバー分 */
  --ff-t:'Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --ff-ui:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
  --ff-en:'Cinzel','Times New Roman',serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;font-synthesis:none}
body{font:700 15px/1.6 var(--ff-ui);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}

#app{position:fixed;inset:0;bottom:var(--tb);overflow:hidden}
#stage{position:absolute;inset:0;touch-action:none}
#stage canvas{display:block;width:100%;height:100%}
/* 庭えらびの切り替えで重ねる板（main.js softDisplay）。ふだんは見えない */
#stage canvas.xfade{position:absolute;inset:0;pointer-events:none;opacity:0}
#budCounts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#budCounts span{position:absolute;left:0;top:0;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(255,252,239,.94);color:#443249;font:800 12px/1 var(--ff-ui);font-variant-numeric:tabular-nums;box-shadow:0 1px 3px #35263f40}
body:not([data-state="play"]) #budCounts{display:none}
#objectInfo{width:min(360px,calc(100% - 32px));max-height:calc(100% - 40px);padding:24px;border:1px solid var(--gold);border-radius:20px;background:#fbf6ec;color:#3a3550;text-align:left;box-shadow:0 16px 50px #20142f50;overscroll-behavior:contain}
#objectInfo::backdrop{background:#221b354f}
#objectInfo h2{margin:0 0 12px;font:900 23px/1.5 var(--ff-t)}
#objectInfo p{margin:0 0 16px;line-height:1.9;line-break:strict;overflow-wrap:anywhere}
#objectInfo .note{font-size:12px;color:#706475}
#objectInfo .btn{display:block;margin:4px auto 0}

.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px))}

/* ── 共通の部品 */
.btn{min-height:50px;padding:0 22px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font-size:17px;letter-spacing:.06em;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 55%,transparent),0 4px 0 color-mix(in srgb,var(--ink) 22%,transparent)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 4px 0 color-mix(in srgb,var(--accent) 60%,#000)}
.btn:active{transform:translateY(2px)}
.chip{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--plate);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 35%,transparent);font-size:13px}
.ib{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:var(--plate);display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 30%,transparent)}
.ib svg,.tb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ib .off{display:none}
.ib[aria-pressed="false"] .on{display:none}
.ib[aria-pressed="false"] .off{display:inline}
.bar{width:100%;max-width:640px;display:flex;align-items:center;gap:10px}
.bar h2{flex:1;margin:0;text-align:center;font:900 20px/1.3 var(--ff-t);letter-spacing:.2em}

/* ── タイトル */
#title{justify-content:space-between;pointer-events:none}
#title > *{pointer-events:auto}
.logo{margin-top:clamp(6px,3vh,40px);text-align:center;color:#fff;text-shadow:0 0 18px rgba(40,30,80,.55),0 2px 3px rgba(40,30,80,.4)}
.logo h1{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.logo .t{font:900 clamp(46px,13vw,84px)/1.1 var(--ff-t);letter-spacing:.14em;padding-left:.14em}
.logo .en{font:500 clamp(11px,2.9vw,15px)/1.2 var(--ff-en);letter-spacing:.32em;padding-left:.32em}
.logo .story{margin:4px 0 0;font:700 clamp(14px,3.8vw,17px)/1.9 var(--ff-t);letter-spacing:.1em}
.actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(340px,100%)}
.actions .btn.primary{width:100%;min-height:58px;font-size:20px;letter-spacing:.3em;padding-left:calc(22px + .3em)}
.tools{display:flex;gap:10px}
#credit{margin:2px 0 0;font-size:11.5px;line-height:1.9;text-align:center;padding:4px 12px;border-radius:12px;background:var(--plate)}
#credit .cg{white-space:nowrap}

/* ── 庭をえらぶ */
#select{gap:10px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.realms{width:100%;max-width:640px;display:flex;flex-direction:column;gap:10px}
.realm{background:var(--plate);border-radius:20px;padding:12px 14px 14px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rk,var(--ink)) 25%,transparent),0 6px 18px rgba(30,20,60,.12)}
.realm[data-dark]{color:#fff6ee}
.realm .hd{display:flex;align-items:baseline;gap:10px;margin:0 2px 8px}
.realm .nm{font:900 19px/1.3 var(--ff-t);letter-spacing:.12em;color:var(--rk)}
.realm .en{font:500 10px/1 var(--ff-en);letter-spacing:.18em;opacity:.7;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.realm .got{font-size:12px;opacity:.75}
.nodes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media (min-width:620px){.nodes{grid-template-columns:repeat(10,1fr)}}
.node{position:relative;aspect-ratio:1;min-height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;font:500 15px/1 var(--ff-en);color:var(--ink);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rk) 40%,transparent)}
.node[data-done]{background:color-mix(in srgb,var(--rk) 18%,#fff);box-shadow:inset 0 0 0 2px var(--rk)}
.node:disabled{opacity:.38;cursor:default}
.node .d{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);display:flex;gap:3px}
.node .d i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.14)}
.node .d i.on{background:var(--rk)}
.total{margin:4px 0 0;font-size:13px;padding:4px 14px;border-radius:999px;background:var(--plate)}

/* ── 遊んでいる間 */
#hud{position:absolute;inset:0;pointer-events:none;padding:calc(10px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px))}
#hud .bar{margin:0 auto;pointer-events:auto}
#hud .where{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.25;padding:5px 14px;border-radius:16px;background:var(--plate);min-width:0}
#hud .where b{font:900 15px/1.3 var(--ff-t);letter-spacing:.12em;white-space:nowrap}
#hud .where span{font:700 12px/1.45 var(--ff-ui);letter-spacing:.04em;opacity:.8;text-align:center}
.dew{margin:8px auto 0;width:max-content;max-width:100%;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 10px;border-radius:999px;background:var(--plate)}
.dew .beads{display:flex;gap:3px;flex-wrap:wrap;justify-content:center}
.dew .beads i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#bfe4ff 30%,#5a9ad8 78%,#3b6ea8);box-shadow:0 0 6px rgba(150,210,255,.9);transition:transform .25s}
.dew .beads i.empty{background:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 35%,transparent)}
.dew .beads i.pop{animation:pop .35s ease-out}
.dew b{font:500 20px/1 var(--ff-en);min-width:1.4em;text-align:center}
.dew.shake{animation:shake .32s}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.chain{position:absolute;left:0;right:0;top:calc(116px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;align-items:center;color:#fff;opacity:0;transition:opacity .5s .45s;text-shadow:0 0 3px var(--accent),0 0 3px var(--accent),0 0 3px var(--accent),0 0 12px var(--accent)}
.chain.on{opacity:1;transition:none}
.chain b{font:500 40px/1 var(--ff-en)}
.chain span{font:900 13px/1.4 var(--ff-ui);letter-spacing:.2em}
.chain.on b{animation:pop .26s ease-out}
.tip,.say{position:absolute;left:16px;right:16px;margin:0 auto;max-width:520px;text-align:left;bottom:calc(98px + env(safe-area-inset-bottom,0px));font-size:14px;line-height:1.7;white-space:pre-line;line-break:strict;overflow-wrap:anywhere}
.tip{padding:10px 16px;border-radius:16px;background:var(--plate);box-shadow:0 4px 14px rgba(30,20,60,.12)}
.say{padding:0 10px;color:var(--ink);text-shadow:0 0 6px var(--paper),0 0 6px var(--paper),0 0 6px var(--paper)}
.tools-bottom{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:clamp(14px,6vw,34px);pointer-events:auto}
.tb{width:76px;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:0;font-size:11.5px;letter-spacing:.04em}
.tb svg{width:50px;height:50px;padding:12px;border-radius:50%;background:var(--plate);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 30%,transparent),0 3px 0 rgba(30,20,60,.12)}
.tb > span:not(.ico){padding:0 6px;border-radius:8px;background:var(--plate)}
.tb:disabled{opacity:.38;cursor:default}
.tb.pulse svg{animation:pulse .5s 3}
@keyframes pulse{50%{transform:scale(1.18)}}
#pop{position:absolute;inset:0;pointer-events:none}
.chain em{font:900 18px/1.3 var(--ff-t);font-style:normal;letter-spacing:.3em;padding-left:.3em;min-height:0}
.chain em:empty{display:none}
.chain[data-tier="2"] b,.chain[data-tier="3"] b{text-shadow:0 0 3px var(--accent),0 0 3px var(--accent),0 0 16px #fff,0 0 30px var(--accent)}
.chain[data-tier="3"] em{animation:shine 1s ease-in-out infinite alternate}
@keyframes shine{to{text-shadow:0 0 3px var(--accent),0 0 18px #fff,0 0 34px #fff}}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at var(--x,50%) var(--y,50%),var(--c,#fff) 0,color-mix(in srgb,var(--c,#fff) 40%,transparent) 18%,transparent 55%)}
#flash.on{animation:flash .55s ease-out}
#flash.big.on{animation:flash 1.4s ease-out;background:radial-gradient(circle at var(--x,50%) var(--y,50%),#fff 0,var(--c,#fff) 25%,transparent 80%)}
@keyframes flash{0%{opacity:calc(var(--k,1) * .75)}100%{opacity:0}}
#pop .orb{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 20%,#bfe4ff 35%,#5a9ad8 80%);box-shadow:0 0 12px 4px rgba(170,220,255,.9);animation:orb .75s cubic-bezier(.5,0,.3,1) backwards}
@keyframes orb{0%{transform:translate(0,0) scale(0)}20%{transform:translate(calc(var(--dx) * .05),calc(var(--dy) * .05 - 30px)) scale(1.3)}100%{transform:translate(var(--dx),var(--dy)) scale(.8)}}
#pop .bonus{position:absolute;transform:translate(-50%,-50%);font:900 18px/1 var(--ff-t);color:#2a5f9e;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;white-space:nowrap;animation:rise 1.4s ease-out forwards}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-180%)}}

/* ── 結果など */
.modal{justify-content:center;background:rgba(30,24,60,.18)}
.card{width:min(340px,100%);padding:26px 22px 22px;border-radius:22px;text-align:center;color:#3a3348;background:linear-gradient(#fffdf6,color-mix(in srgb,var(--paper) 80%,#f0e6d2));box-shadow:inset 0 0 0 1.5px rgba(201,162,74,.65),inset 0 0 0 6px #fffdf6,inset 0 0 0 7.5px rgba(201,162,74,.45),0 14px 34px rgba(30,20,60,.28);animation:cardIn .34s cubic-bezier(.2,1.4,.4,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.94)}}
.card h2{margin:0 0 6px;font:900 22px/1.4 var(--ff-t);letter-spacing:.12em}
.card h2.big{font-size:40px;letter-spacing:.3em;padding-left:.3em;color:var(--accent)}
.card .sub{margin:0;font-size:13px;opacity:.75}
.card .meta{margin:10px 0 0;font-size:13px;opacity:.8}
.card .row{display:flex;gap:10px;margin-top:18px}
.card .row .btn{flex:1;padding:0 10px}
.card .row.col{flex-direction:column}
.stars{display:flex;justify-content:center;gap:14px;margin:14px 0 0}
.stars i{width:44px;height:44px;opacity:.18;filter:grayscale(1);background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23e8789c'%3E%3Cellipse cx='20' cy='9' rx='7' ry='9'/%3E%3Cellipse cx='20' cy='9' rx='7' ry='9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='9' rx='7' ry='9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='9' rx='7' ry='9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='9' rx='7' ry='9' transform='rotate(288 20 20)'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='5' fill='%23ffe08a'/%3E%3C/svg%3E")}
.stars i.on{opacity:1;filter:none;animation:starIn .45s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes starIn{from{transform:scale(0) rotate(-40deg)}}

@media (prefers-reduced-motion:reduce){.chain.on b,.card,.stars i.on,#flash.on,.chain em{animation:none}}

body[data-dark] .say{color:#fff6ee;text-shadow:0 0 6px #2a2450,0 0 6px #2a2450}
body[data-dark] #hud .where,body[data-dark] .dew,body[data-dark] .tb svg,body[data-dark] .tb > span:not(.ico),body[data-dark] .tip,body[data-dark] .ib{color:#fff6ee}

/* ── 石板の UI（image/ui の WebP。葉は揺れ、合図で花が咲く） */
.plate{position:relative;display:block;aspect-ratio:var(--ar);border:0;padding:0;background:none;box-shadow:none;border-radius:0;color:#f1f0f6;-webkit-tap-highlight-color:transparent}
.plate .pl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.plate .pl.stone{filter:drop-shadow(0 3px 4px rgba(20,16,40,.28))}
.plate .pl.sway{animation:leafSway 4.2s ease-in-out infinite alternate}
@keyframes leafSway{0%{transform:rotate(-1.6deg)}100%{transform:rotate(1.8deg)}}
.plate-body{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.2;text-shadow:0 2px 0 rgba(18,16,36,.6),0 0 10px rgba(18,16,36,.35)}
button.plate:active .plate-body,button.plate:active .pl.stone{transform:translateY(2px)}
button.plate:disabled{opacity:.45;cursor:default}
button.plate:focus-visible{outline:2px solid #fff;outline-offset:-10px}
.plate-flowers{position:absolute;inset:0;pointer-events:none}
.pf{position:absolute;width:calc(22px * var(--s,1));height:calc(22px * var(--s,1));margin:calc(-11px * var(--s,1)) 0 0 calc(-11px * var(--s,1));animation:pfIn .6s cubic-bezier(.2,1.6,.4,1) backwards;transform:rotate(var(--r,0deg))}
.pf svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.pf .pt ellipse{fill:var(--c1,#f2789f)}
.pf .pt2 ellipse{fill:var(--c2,#ffc4d6)}
.pf .ct{fill:#ffe08a}
.pf.fall{animation:pfOut .7s ease-in forwards}
@keyframes pfIn{0%{transform:rotate(calc(var(--r,0deg) - 90deg)) scale(0)}100%{transform:rotate(var(--r,0deg)) scale(1)}}
@keyframes pfOut{to{transform:rotate(calc(var(--r,0deg) + 80deg)) translateY(18px) scale(.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.plate .pl.sway,.pf{animation:none}}

/* 置き場所ごとの大きさ */
.logo h1.plate{width:min(460px,86vw);margin:0 auto}
.logo h1.plate .plate-body{gap:4px}
.logo h1.plate .t{font-size:clamp(32px,9.6vw,56px)}
#btnStart.plate{width:min(300px,78vw);min-height:0;font-size:clamp(18px,5vw,22px);letter-spacing:.3em;padding:0}
#btnStart.plate .plate-body{padding-left:.3em}
.ib.plate{width:46px;height:auto;border-radius:0;background:none;box-shadow:none;display:block}
.ib.plate .plate-body svg{width:44%;height:44%}
#hud .where.plate{flex:0 1 auto;width:min(280px,58vw);padding:0;border-radius:0;background:none;color:#f1f0f6}
#hud .where.plate b{font-size:clamp(13px,3.6vw,16px)}
#hud .bar{justify-content:space-between}
.tb .plate{width:64px}
.tb .plate .plate-body svg{width:46%;height:46%;padding:0;background:none;box-shadow:none;border-radius:0}
.tb > svg{display:none}
.node.plate{aspect-ratio:var(--ar);min-height:0;border-radius:0;background:none;box-shadow:none;font-size:clamp(12px,3.4vw,15px)}
.node.plate .d{bottom:-2px}
.node.plate .d i{background:rgba(255,255,255,.25)}
.node.plate .d i.on{background:#ffe08a}
.node.plate[data-done] .pl.stone{filter:drop-shadow(0 0 5px var(--rk)) drop-shadow(0 3px 4px rgba(20,16,40,.28))}
.card .head.plate{width:calc(100% + 40px);margin:-64px -20px 0}
.card .head.plate h2{margin:0;color:#f1f0f6}
.card .head.plate h2.big{color:#fff;font-size:clamp(30px,9vw,40px)}
.card{padding-top:20px}
.card .row .btn.plate{flex:1;min-height:0;padding:0;font-size:15px;letter-spacing:.04em}
.card .row.col .btn.plate{width:min(260px,100%);margin:0 auto}
.btn.plate,.btn.plate.primary{background:none;box-shadow:none;border-radius:0;color:#f1f0f6}
.btn.plate.primary .plate-body{color:#fff}

/* ── 絵本のページ */
#book{justify-content:center;background:rgba(40,30,60,.45);perspective:1600px;z-index:5}
#book .spread{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(920px,100%);max-height:100%;border-radius:10px;background:linear-gradient(90deg,#efe6d2 0,#fbf5e8 46%,#d9ccb2 50%,#fbf5e8 54%,#f3ead8 100%);box-shadow:0 0 0 5px #6b4e3a,0 0 0 8px #3e2c22,0 24px 50px rgba(20,10,30,.45);animation:bookIn .7s cubic-bezier(.2,1.2,.4,1);transform-style:preserve-3d}
@keyframes bookIn{from{opacity:0;transform:rotateX(18deg) translateY(30px) scale(.9)}}
#book .page{position:relative;padding:clamp(16px,3.5vw,34px);color:#3a2f2a;min-height:0}
#book .left{display:flex;align-items:center;justify-content:center}
#book .pic{width:100%;aspect-ratio:4/3.4;overflow:hidden;border-radius:6px 14px 8px 12px;box-shadow:inset 0 0 0 1px rgba(90,60,30,.2),0 2px 0 rgba(90,60,30,.15);transform:rotate(-1.2deg);background:#e8dcc4}
#book .pic img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}
#book .right{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px}
#book .right > *{flex-shrink:0}
#book .badge.plate{width:82px;margin-bottom:2px}
#book .badge .rn{font:500 26px/1 var(--ff-en);color:#fff}
#book .ch{margin:0;font:700 13px/1.6 var(--ff-t);letter-spacing:.3em;opacity:.7}
#book .nm{margin:0;font:900 clamp(22px,5vw,30px)/1.4 var(--ff-t);letter-spacing:.18em}
#book .en{margin:0 0 6px;font:500 11px/1.4 var(--ff-en);letter-spacing:.24em;opacity:.6}
#book .tx{width:100%;max-width:28em;margin:10px 0 18px;text-align:left;font:500 clamp(15px,3.8vw,17px)/1.95 var(--ff-t);letter-spacing:.035em;white-space:pre-line;line-break:strict;overflow-wrap:anywhere}
#book .spread{overflow-y:auto;overscroll-behavior:contain}
#book .more.plate{width:min(220px,70%);font-size:16px;letter-spacing:.2em}
#book .flip{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:0 50%;background:linear-gradient(90deg,#d9ccb2,#fbf5e8 20%,#f3ead8);border-radius:0 10px 10px 0;opacity:0;pointer-events:none;backface-visibility:hidden}
#book.closing .flip{animation:pageFlip .7s ease-in forwards}
#book.closing .spread{animation:bookOut .7s ease-in forwards}
@keyframes pageFlip{0%{opacity:1;transform:rotateY(0)}100%{opacity:1;transform:rotateY(-178deg)}}
@keyframes bookOut{0%,60%{opacity:1}100%{opacity:0;transform:translateY(-10px) scale(.98)}}
@media (max-width:640px),(orientation:portrait){
  #book .spread{grid-template-columns:1fr;grid-template-rows:max-content max-content;background:linear-gradient(#fbf5e8,#f3ead8);max-width:460px}
  #book .left{padding-bottom:0}
  #book .pic{aspect-ratio:4/3}
  #book .flip{left:0;width:100%;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){#book .spread,#book.closing .flip,#book.closing .spread{animation:none}}
.realm .story{flex:none;border:0;background:none;padding:2px;color:inherit;opacity:.7}
.realm .story svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.plate.stone-only .pl{inset:auto}
.ib.plate .plate-body svg{width:52%;height:52%}
.card .orn{margin:10px 0 0;padding:6px 12px;border-radius:999px;font-size:13px;background:color-mix(in srgb,var(--accent) 14%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent);animation:cardIn .5s .9s backwards}
.card .orn b{color:var(--accent)}

/* ── ローディングと「タップしてはじめる」（黄昏の空・金のロゴ・育つつぼみ） */
#loading{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff6e8;
  background:radial-gradient(ellipse 80% 50% at 50% 108%,#f0a98a 0,rgba(240,169,138,0) 60%),linear-gradient(#171c44 0,#2c2a62 42%,#5a3f7c 72%,#a86a8e 100%);transition:opacity .9s ease,visibility 0s .9s}
#loading.done{opacity:0;visibility:hidden;pointer-events:none}
#loading::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(10,8,30,.45) 100%)}
.ld-stars{position:absolute;inset:0;pointer-events:none}
.ld-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,240,210,.9);animation:twinkle var(--d,3s) ease-in-out infinite alternate;animation-delay:var(--t,0s);opacity:.2}
@keyframes twinkle{to{opacity:1;transform:scale(1.6)}}
.ld-main{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(560px,90vw);text-align:center}
.ld-logo{width:min(440px,84vw)}
.logo-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,214,150,.55)) drop-shadow(0 2px 2px rgba(40,20,60,.6))}
.logo-svg .ch{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:chIn 1.1s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:calc(.25s + var(--i) * .28s)}
@keyframes chIn{0%{opacity:0;transform:translateY(1.6px) scale(.92);filter:blur(1.2px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
.logo-svg .shine{animation:shine 3.6s ease-in-out 1.6s infinite}
@keyframes shine{0%{transform:translateX(0)}45%,100%{transform:translateX(70px)}}
.ld-en{margin:0;font:500 clamp(10px,2.8vw,13px)/1 var(--ff-en);letter-spacing:.42em;padding-left:.42em;opacity:0;animation:fadeIn 1.2s 1.4s forwards}
@keyframes fadeIn{to{opacity:.85}}
.ld-bud{position:relative;width:96px;height:112px;margin-top:22px}
.bud{width:100%;height:100%;overflow:visible}
.bud .stem{fill:none;stroke:#7cc25c;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .8s ease}
.bud .leaf{fill:#6cb456;transform-box:fill-box;transform-origin:100% 100%;transform:scale(0);transition:transform .7s cubic-bezier(.2,1.5,.4,1)}
.bud .l2{transform-origin:0 100%}
.bud .head{transform:translateY(-30px) scale(.0);transition:transform .7s cubic-bezier(.2,1.5,.4,1)}
.bud .pet{fill:#f2789f;transform:rotate(var(--a)) scale(.25,.35);transform-origin:0 0;transition:transform .9s cubic-bezier(.2,1.4,.4,1),fill .6s}
.bud .sepal{fill:#4f9a45;transition:transform .7s ease,opacity .7s;transform-origin:0 0}
.bud .core{fill:#ffe08a;opacity:0;transition:opacity .6s .3s}
#loading[data-stage="1"] .stem{stroke-dashoffset:20}
#loading[data-stage="1"] .l1{transform:scale(.8)}
#loading[data-stage="1"] .head{transform:translateY(-22px) scale(.5)}
#loading[data-stage="2"] .stem,#loading[data-stage="3"] .stem,#loading[data-stage="4"] .stem,#loading.ready .stem{stroke-dashoffset:0}
#loading[data-stage="2"] .l1,#loading[data-stage="3"] .l1,#loading[data-stage="4"] .l1,#loading.ready .l1,
#loading[data-stage="2"] .l2,#loading[data-stage="3"] .l2,#loading[data-stage="4"] .l2,#loading.ready .l2{transform:scale(1)}
#loading[data-stage="3"] .l3,#loading[data-stage="4"] .l3,#loading.ready .l3{transform:scale(1)}
#loading[data-stage="2"] .head{transform:translateY(-30px) scale(.75)}
#loading[data-stage="3"] .head{transform:translateY(-30px) scale(.9)}
#loading[data-stage="4"] .head{transform:translateY(-30px) scale(1)}
#loading[data-stage="3"] .pet{transform:rotate(var(--a)) scale(.32,.5)}
#loading[data-stage="4"] .pet{transform:rotate(var(--a)) scale(.38,.62)}
#loading.ready .head{transform:translateY(-30px) scale(1.15)}
#loading.ready .pet{transform:rotate(var(--a)) scale(1)}
#loading.ready .sepal{opacity:0;transform:scale(.6)}
#loading.ready .core{opacity:1}
#loading.ready .bud{animation:budSway 3.2s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes budSway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.ld-drop{position:absolute;left:50%;top:-40px;width:9px;height:12px;margin-left:-4.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,#bfe4ff 35%,#5a9ad8 90%);box-shadow:0 0 10px rgba(170,220,255,.9);opacity:0;animation:drop 1.8s cubic-bezier(.5,0,.9,.6) infinite}
@keyframes drop{0%{opacity:0;transform:translateY(-30px)}15%{opacity:1}70%{opacity:1;transform:translateY(52px) scale(1,1.2)}78%{opacity:0;transform:translateY(56px) scale(1.6,.4)}100%{opacity:0;transform:translateY(56px)}}
#loading.ready .ld-drop{display:none}
.ld-msg{margin:6px 0 0;font:700 14px/1.6 var(--ff-t);letter-spacing:.24em;opacity:.8;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
#loading.ready .ld-msg{display:none}
.ld-enter{margin-top:6px;border:0;background:none;color:#fff6e8;font:700 clamp(16px,4.4vw,19px)/1.6 var(--ff-t);letter-spacing:.3em;padding:10px 24px 10px calc(24px + .3em);text-shadow:0 0 12px rgba(255,214,150,.8);animation:enterPulse 1.8s ease-in-out infinite}
@keyframes enterPulse{50%{opacity:.45}}
.ld-sound{color:var(--ink)}
#loading.enter .ld-main{animation:enterOut .9s ease forwards}
#loading.enter .bud .pet{transform:rotate(var(--a)) translateY(-40px) scale(1.4);fill:#ffd0e0;opacity:0;transition:transform .8s ease-out,opacity .8s}
@keyframes enterOut{0%{transform:none}100%{transform:scale(1.08);opacity:0}}
@media (prefers-reduced-motion:reduce){.logo-svg .ch{animation:none;opacity:1}.logo-svg .shine,.ld-drop,.ld-stars i,.ld-msg,.ld-enter,#loading.ready .bud{animation:none}.ld-en{animation:none;opacity:.85}}

/* タイトルの石板のロゴ */
.logo h1.plate .t{display:block;width:84%}
.logo h1.plate .t .logo-svg .ch{animation-delay:calc(.15s + var(--i) * .16s)}
.logo h1.plate .t .logo-svg{filter:drop-shadow(0 2px 0 rgba(18,16,36,.55)) drop-shadow(0 0 8px rgba(255,220,160,.35))}

/* ── ステージ切り替えのワープ（CSS だけ・3Dの後処理は増やさない） */
#warp{position:absolute;inset:-20%;pointer-events:none;opacity:0;z-index:4;
  background:radial-gradient(circle at 50% 50%,rgba(255,250,235,.95) 0,rgba(255,250,235,.6) 12%,transparent 46%),
  repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.0) 0deg,rgba(255,255,255,.0) 4deg,rgba(255,246,220,.75) 4.6deg,rgba(255,255,255,0) 5.4deg,rgba(255,255,255,0) 9deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,#000 30%,transparent 72%);mask:radial-gradient(circle at 50% 50%,#000 0,#000 30%,transparent 72%)}
#warp.in{animation:warpIn .34s ease-in forwards}
#warp.out{animation:warpOut .55s ease-out forwards}
@keyframes warpIn{0%{opacity:0;transform:scale(1.8) rotate(0)}100%{opacity:1;transform:scale(1) rotate(8deg)}}
@keyframes warpOut{0%{opacity:1;transform:scale(1) rotate(8deg)}100%{opacity:0;transform:scale(.6) rotate(14deg)}}
@media (prefers-reduced-motion:reduce){#warp.in,#warp.out{animation-duration:.01s}}

/* ── タイトル：スマホで収まりきらないときはスクロール（入れ物に pointer-events:none を付けない） */
#title{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;justify-content:flex-start;pointer-events:auto}
#title .gap{flex:1 0 34vh;pointer-events:none}
#title .actions{margin-top:0;flex:none}
#btnDaily.plate{width:min(230px,62vw);font-size:clamp(15px,4.2vw,18px);letter-spacing:.2em;margin-top:-6px}
#btnDaily.plate .plate-body{padding-left:.2em}

/* ── 今日の庭のカード（庭えらび） */
.daily-card{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"t d k" "s s s";align-items:baseline;gap:2px 10px;width:100%;padding:12px 16px;border:0;border-radius:20px;text-align:left;color:#fff6e8;background:linear-gradient(120deg,#2c2a62,#5a3f7c 60%,#a86a8e);box-shadow:0 0 0 2px rgba(233,191,114,.7),0 6px 18px rgba(30,20,60,.2)}
.daily-card .dt{grid-area:t;font:900 19px/1.3 var(--ff-t);letter-spacing:.14em}
.daily-card .dd{grid-area:d;font-size:13px;opacity:.8}
.daily-card .dk{grid-area:k;font-size:12px;opacity:.85}
.daily-card .ds{grid-area:s;display:flex;flex-wrap:wrap;gap:6px;font-size:13px;opacity:.9;align-items:center}
.daily-card .ds i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.2)}
.daily-card .ds i.on{background:radial-gradient(circle,#ffe08a 0 30%,#f2789f 32%)}
.card .streak{margin:8px 0 0;font:700 14px/1.6 var(--ff-t);color:var(--accent)}
.card .share{margin-top:8px;color:#3a3348}
.card .streak{color:color-mix(in srgb,var(--accent) 55%,#3a3348)}
.card .share{background:#f3ead8;color:#3a3348;box-shadow:inset 0 0 0 1.5px rgba(201,162,74,.6)}

/* ── タイトルを詰める（2026-11-06 本人指摘：上下のゆとりが多い。よせぼんを参考に、題字は上・ボタンは横並びで下へ） */
#title{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.logo{margin-top:0}
.logo h1.plate{width:min(400px,80vw)}
.logo .story{margin:0;font-size:clamp(13px,3.5vw,16px);line-height:1.75}
#title .gap{flex:1 1 auto;min-height:24vh}
.actions{gap:8px;width:min(420px,100%)}
.actions .btns{display:flex;justify-content:center;align-items:center;gap:4px;width:100%}
#btnStart.plate{width:min(200px,50vw);font-size:clamp(17px,4.6vw,20px);letter-spacing:.24em}
#btnStart.plate .plate-body{padding-left:.24em}
#btnDaily.plate{width:min(180px,44vw);margin-top:0;font-size:clamp(14px,3.9vw,17px);letter-spacing:.14em}
#btnDaily.plate .plate-body{padding-left:.14em}
.tools .chip{min-height:34px;padding:0 14px;font-size:12px}
#credit{margin:0;font-size:11px;line-height:1.8;padding:2px 10px}
/* 視点を戻す（回したり寄ったりしたときだけ出す。main.js の盤の操作） */
#btnView{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(118px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px;pointer-events:auto;color:var(--ink)}
#btnView svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body[data-state="play"] #stage canvas{cursor:grab}
/* 庭飾りの出現（main.js revealOrnament）：札を出す前に名前を見せ、ほかの表示は少し引っこめる */
.orn-reveal{position:absolute;left:50%;top:calc(118px + env(safe-area-inset-top,0px));transform:translate(-50%,8px);margin:0;padding:12px 22px 14px;border-radius:18px;background:var(--plate);color:var(--ink);font:700 clamp(16px,4.4vw,19px)/1.5 var(--ff-t);letter-spacing:.08em;text-align:center;white-space:nowrap;box-shadow:inset 0 0 0 1.5px rgba(201,162,74,.6),0 8px 24px rgba(30,20,60,.22);opacity:0;transition:opacity .45s,transform .45s cubic-bezier(.2,1.2,.4,1);pointer-events:none}
.orn-reveal.on{opacity:1;transform:translate(-50%,0)}
.orn-reveal .orn-k{display:block;margin-bottom:2px;font:500 10.5px/1.2 var(--ff-en);letter-spacing:.32em;color:var(--accent)}
.orn-reveal b{color:var(--accent)}
body.revealing #hud .tools-bottom,body.revealing #hud .dew,body.revealing #hud .tip,body.revealing #hud .say,body.revealing #budCounts,body.revealing #btnView{opacity:0;transition:opacity .35s;pointer-events:none}