/* Caudex Days — 絵柄「ふと線」に合わせる：太い焦げ茶の輪郭・丸い角・つや消しの色面 */
:root{
  --bg:#f4f1ea; --card:#fffdf8; --ink:#2e2a26; --sub:#857c72; --ln:#3a2e2b; --soft:#ece6da;
  --green:#86c56f; --deep:#4d9160; --coin:#f4d35e; --warn:#f0a58c; --red:#c8553d; --water:#cfe4ee;
  --steel:#55565b; --lit1:#fffbe9; --lit2:#efe6d3;
  --bw:3px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",-apple-system,sans-serif;
  font-size:15px;line-height:1.4;font-weight:600}
body.has-sheet{overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
svg{display:block}
.ic{width:1.35em;height:1.35em;flex:none}
.gld{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;vertical-align:-.22em}
.gld .ic{width:1.15em;height:1.15em}
b{font-weight:800}

.app{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:calc(8px + var(--safe-t)) 10px 0}

/* ── 上の帯 ── */
.top{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 2px 10px}
/* 名前は、横に入りきらないときだけ自動で隠れる（折り返して枠の外へ出る） */
.brand{display:flex;flex-wrap:wrap;align-items:center;column-gap:5px;flex:1 1 0;min-width:26px;height:30px;overflow:hidden}   /* 2026-10-06：高さ 26→30px。「Caudex Days」の y の下が切れていた（のぶさん）。はみ出した名前を隠す作り（overflow:hidden）は変えない */
.brand .name{line-height:26px}
.brand .logo{width:26px;height:26px;flex:none;margin:2px 0}   /* 上下 2px：1行目の高さを枠（30px）にそろえる。そろえないと、幅の狭い画面で2行目へ落ちた名前の頭が、枠の下に 4px のぞく（2026-10-06・320px の画面で見つけた） */
.brand .logo svg{width:100%;height:100%;overflow:visible}
.brand .name{font-weight:800;font-size:15px;letter-spacing:.01em;white-space:nowrap}
.chips{display:flex;gap:5px;align-items:center;flex:none}
/* ロゴと人の印：押すと登録の紙（登録したアドレス・お知らせの入り切り・規約などへの入口） */
/* 人の印はロゴの右下に小さく重ねる（幅を取らない。390px の画面で名前が隠れないように）。登録済みは緑 */
button.brand{text-align:left;min-width:34px;box-sizing:content-box;padding:8px 0 0 6px;margin:-8px 0 0 -6px}
.brand .logo{position:relative}
.brand .me{position:absolute;right:-4px;bottom:-1px;width:16px;height:16px;border-radius:50%;background:var(--card);border:2px solid var(--ln);display:grid;place-items:center}
.brand .me .ic{width:10px;height:10px}
.brand .me.in{background:var(--green)}
button.brand:active{transform:translateY(1px)}
.chip{display:inline-flex;align-items:center;gap:3px;height:30px;padding:0 9px;border-radius:15px;background:var(--card);
  border:var(--bw) solid var(--ln);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip .ic{width:17px;height:17px}
.chip.day{background:var(--soft)}
.chip.full{background:var(--warn)}
.chip.money b{min-width:2.2em;text-align:right}
.chip.bump{animation:bump .7s ease}
/* レベルの札の目盛り（次のレベルまでの進み。2026-10-09） */
.chip.lv .lvbar{display:block;width:36px;height:10px;margin-left:4px;border-radius:5px;background:var(--soft);border:2px solid var(--ln);overflow:hidden;flex:none}
.chip.lv .lvbar b{display:block;height:100%;background:var(--green)}
@keyframes bump{30%{transform:scale(1.22);background:var(--coin)}}

/* ── 棚（スチールラック。1棚＝3段） ── */
.main{flex:1;display:flex;flex-direction:column;gap:12px;padding-bottom:104px}
.shelf{position:relative;padding:0 12px;margin-top:2px}
.shelf .post{position:absolute;top:-4px;bottom:-12px;width:13px;background:var(--steel);border:var(--bw) solid var(--ln);border-radius:6px;z-index:3}
.shelf .post.l{left:0}.shelf .post.r{right:0}
.tier{position:relative}
/* 段の高さ：画面の高さに合わせる（のぶさん 2026-10-06「下もだいぶ空いてるから配置のバランス調整したい」。前はどの画面でも 136px で、背の高い画面は下が大きく空いた）。
   使える高さ＝画面 −（上の帯 58 ＋ 棚板と隙間 42 ＋ 下の帯のぶん 104 ＋ 余白 10 ＋ 端末の上下の安全な余白）を3段で割る。136〜200px のあいだ。低い画面は下の @media が今までどおり上書きする */
.tier .slots{display:flex;align-items:flex-end;height:136px;height:clamp(136px,calc((100dvh - 214px - var(--safe-t) - var(--safe-b)) / 3),200px);padding:0 3px}
/* 始める画面（下の帯に規約の入口の1行がある）・「登録済みなら続きから」が出ているあいだは、下の帯が高いぶん、段を低くする */
.has-legal .tier .slots{height:clamp(120px,calc((100dvh - 238px - var(--safe-t) - var(--safe-b)) / 3),200px)}
.has-door .tier .slots{height:clamp(110px,calc((100dvh - 280px - var(--safe-t) - var(--safe-b)) / 3),200px)}
/* 後ろの壁の光（のぶさん 2026-10-12・本物の棚の写真に寄せる）：白い壁に、パネルの幅より広い白い光が上から当たり、左右の端と下へゆるく落ちる。
   パネルより上（天板の影）は少し暗い。黄色い玉はやめて、色は白に近く。前は、上から下へのクリーム色の2色だけ */
.tier.lit .slots{background:
  radial-gradient(ellipse 78% 82% at 50% 20%,rgba(255,255,252,.96),rgba(255,255,250,.6) 45%,rgba(255,255,250,0) 78%),
  linear-gradient(#ddd6c6 0,#ebe5d8 11%,#f1ece0 30%,#ebe5d7 72%,#e0d9c9 100%)}
/* 育成ライト：四角い薄いパネルを吊るした形（art.js の lampSVG。spec 22節・2026-10-03）。下の面が光り、下へ光がにじむ。3段目は消えたパネル */
.tier .lamp{position:absolute;left:12%;right:12%;top:-1px;z-index:2;pointer-events:none}
.tier .lamp>svg{width:100%;height:auto}
/* 光（のぶさん 2026-10-07「1枚の扇でいい。単純に、光が当たってない所を暗くするほうがわかりやすい」）：
   段の左右の上の角（パネルの光が届かない三角）を暗くして、明るい所が扇の形に見えるようにする。パネルのすぐ下は、今までどおり小さくにじむ。
   同じ日に試した「黄色い扇＋細い筋を重ねる」形と、その前の「右にキラン」はやめた */
.tier .lamp::after,.lampglow::after{content:"";position:absolute;left:2%;right:2%;top:70%;height:58px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 52% 100% at 50% 0,rgba(255,254,244,.9),rgba(255,254,246,.35) 36%,rgba(255,254,246,0) 80%)}
/* 段の角を暗くする影は、やめた（のぶさん 2026-10-07「やっぱ最初の影ないやつでいいかも」。同じ日に 0.1.124〜0.1.126 で試した）。光は、パネルのすぐ下の小さいにじみだけ。右のキランは外したまま */
.tier .lamp.off::after{display:none}
.tier .board{height:12px;background:var(--steel);border:var(--bw) solid var(--ln);border-radius:3px;margin:0 -2px;position:relative;z-index:2}
.board.top{height:12px;background:var(--steel);border:var(--bw) solid var(--ln);border-radius:3px;margin:0 -2px;position:relative;z-index:2}   /* 天板（最上段の上） */
.tier.dark .slots{background:linear-gradient(#5d5650,#4a443f);align-items:flex-end;justify-content:center;padding-bottom:20px}
/* 休眠の段（2026-10-08）：ライトが消えていて、株と鉢が残っている。株は色を少し落とす。「育成ライトを追加」は、段の上に小さく重ねる */
.tier.dark.dorm .slots{justify-content:flex-start;padding:0 3px;position:relative}
.tier.dark.dorm .slot>svg{filter:saturate(.45) brightness(.72)}
.tier.dark.dorm .lightbtn{position:absolute;left:50%;top:8px;transform:translateX(-50%);z-index:4;padding:3px 12px 3px 8px;white-space:nowrap}
.tier.dark.dorm .lightbtn small{display:none}
.tier.dark.dorm .lightbtn:active{transform:translate(-50%,1px)}
/* 暗い段の「育成ライトを追加」は、段の真ん中に置く（のぶさん 2026-10-07。前は下寄せ） */
.tier.dark:not(.dorm) .slots{align-items:center;padding-bottom:0}
.slot.blank{pointer-events:none}.slot.blank>svg{opacity:.35}
/* 「移す」の途中：移す株・鉢が浮く */
.slot.moving>svg{animation:ping 1s ease-in-out infinite;filter:drop-shadow(0 0 6px #fff3a8)}
/* 2台の棚：横に送って切り替える。下に丸い印 */
.shelf.two{padding:0}
.racks{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 0 14px;margin:-6px 0 -14px}
.racks::-webkit-scrollbar{display:none}
.rack{position:relative;flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding:0 12px;box-sizing:border-box}
.rdots{position:relative;display:flex;justify-content:center;padding-top:10px;min-height:44px}
/* 棚のシェア：印だけだと何のボタンか分かりにくいので、字を添える（のぶさん 2026-10-12「棚をシェアってボタンに文字入れられる？」）。狭い画面（丸い印とぶつかる）は、印だけに戻す */
.shelfshare{position:absolute;left:4px;top:6px;height:42px;padding:0 12px 0 10px;border-radius:999px;border:var(--bw) solid var(--ln);background:var(--card);display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;box-shadow:0 3px 0 var(--ln)}
@media (max-width:350px){.shelfshare{width:42px;padding:0;justify-content:center}.shelfshare span{display:none}}
.shelfshare .ic{width:22px;height:22px}.shelfshare:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ln)}
.rdot{width:40px;height:34px;padding:0;border:0;background:none;display:grid;place-items:center}   /* 押せる広さは指の大きさ。見える丸は小さく */
.rdot::before{content:"";width:12px;height:12px;border-radius:50%;border:var(--bw) solid var(--ln);background:var(--card)}
.rdot.on::before{background:var(--ln)}
/* 3段目のボタンは、消えたパネルの下に置く（パネルと重ねない） */

.slot{position:relative;flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.slot>svg{width:144%;flex:none;height:auto;margin-bottom:-4px;pointer-events:none}
.slot.empty{color:#cfc5b0}
.slot.empty>svg{opacity:.75}
.slot:active>svg{transform:translateY(1px) scale(.98)}
.slot.pop>svg{animation:pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:translateY(8px) scale(.82)}100%{transform:none}}
.slot.alert>svg{animation:shake 2.4s ease-in-out infinite}
@keyframes shake{0%,86%,100%{transform:none}90%{transform:rotate(-2.5deg)}94%{transform:rotate(2.5deg)}}
/* 株・鉢の印：下から測って置く（株のすぐ上）。前は上から 20px で、段を画面の高さに合わせて高くしたら（2026-10-06）、印だけ上に取り残されてライトに重なった（のぶさん「上すぎない？もっと株の近くじゃないと」）。
   90px＝段が 136px だった頃と同じ高さ（136 − 20 − 印 26）。段の高さが変わっても、株との間は変わらない */
/* 2026-10-07：棚の印は、株のてっぺんのすぐ上（.pin＝絵と同じ大きさの透明な枠。--top＝絵のてっぺんが、枠の下から何割か）。下の 90px・99px は、pin を使わない所（チュートリアルの棚）の置き方 */
.slot>.pin{position:absolute;left:50%;bottom:-4px;width:144%;aspect-ratio:184/230;transform:translateX(-50%);pointer-events:none;z-index:2}
.pin .badges{bottom:calc(var(--top) + 3px);right:auto;left:50%;transform:translateX(-50%)}
.pin .ndot{bottom:calc(var(--top) + 5px);left:50%;margin-left:-8px}
.badges{position:absolute;bottom:90px;right:-2px;display:flex;flex-direction:column-reverse;gap:2px;z-index:2;pointer-events:none}
/* 未読の印（2026-10-06）：お知らせのある株・鉢の左上に赤い丸。押すと、その紙の頭でお知らせを読める */
.ndot{position:absolute;left:6px;bottom:99px;width:15px;height:15px;border-radius:50%;background:#d9482f;border:var(--bw) solid var(--ln);z-index:3;pointer-events:none;animation:pop .5s cubic-bezier(.3,1.6,.5,1) backwards}
a.btn{text-decoration:none;color:inherit}
.newsline{justify-content:center;margin-bottom:6px}
.newsline .chip{background:#fff3a8}
.newsline .chip svg{width:18px;height:18px}
.badge{width:26px;height:26px;border-radius:50%;background:var(--card);border:var(--bw) solid var(--ln);display:grid;place-items:center}
.badge .ic{width:16px;height:16px}
.badge.b-sprout,.badge.b-round,.badge.b-up{background:#dff0cf;animation:ping 1.6s ease-in-out infinite}
.badge.b-star{background:#fff3a8;animation:ping 1.6s ease-in-out infinite}
.badge.b-wrinkle{background:var(--warn);animation:ping 1s ease-in-out infinite}
.badge.b-drop{background:var(--water)}
.badge.b-dead{background:#ddd6cb}
.badge.b-rot{background:#e3cfb4}
.badge.b-caution{background:#fff3a8}   /* 根腐れの注意の印：動かさない（急かす物ではない） */
.badge.b-tag{background:#fff3a8}
.badge.b-choose{background:var(--card)}
@keyframes ping{50%{transform:scale(1.14)}}
/* 前回開いたときからの変化（app.js の sinceOf）：前の姿を白い点線の輪郭で重ねる＋鉢の正面に小さな印。何かを押すまで出す */
.slot .ghost *{fill:none!important;stroke-linecap:round;stroke-linejoin:round}
.slot .ghost .gu *{stroke:rgba(58,46,43,.45)!important;stroke-width:4.6px!important}
.slot .ghost .go *{stroke:#fffdf8!important;stroke-width:2.4px!important;stroke-dasharray:4 3.4}
.slot .ghost{animation:fade 1.2s ease-out}
.since{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:2;pointer-events:none;display:flex;align-items:center;gap:1px;
  padding:2px 6px 2px 2px;border-radius:14px;background:#dff0cf;border:var(--bw) solid var(--ln);font-size:13px;line-height:1;white-space:nowrap;animation:since .7s cubic-bezier(.3,1.6,.5,1)}
.since .ic{width:18px;height:18px}
.since:not(:has(b)){padding-right:2px}
.slot[data-act="pot"] .since{bottom:0}      /* 種を蒔いた鉢：芽と苗は背が低いので、印は鉢の胴へ下げる */
/* 狭い画面（5つの株の幅が 55px ほど）：印を小さく。Lv の印は文字だけ（隣の株の印とつながらないように） */
@media (max-width:360px){.since{font-size:12px;padding:1px 5px;border-width:2px}.since .ic{width:15px;height:15px}.since:has(b) .ic{display:none}.slot[data-act="pot"] .since{bottom:-3px}}
@keyframes since{0%{transform:translate(-50%,8px) scale(.6);opacity:0}100%{transform:translateX(-50%)}}

.lightbtn{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 12px;border-radius:999px;background:#6f6862;border:var(--bw) solid var(--ln);color:#fff8e1;text-align:left}
.lightbtn .ic{width:26px;height:26px}
.lightbtn b{display:block;font-size:15px;line-height:1.2}
.lightbtn small{display:block;font-size:12px;font-weight:600;color:#d9d0c2;line-height:1.3}
.lightbtn.soon{background:var(--coin);color:var(--ink)}
.lightbtn.soon small{color:var(--ink)}
.lightbtn:active{transform:translateY(1px)}

/* ── 起きたこと（絵と印）：画面の真ん中の紙（2026-10-06。元は棚の上に横1列＝札があるあいだ棚が下へずれた）。株の紙（.scrim 20・.sheet 21）よりは下 ── */
.news{position:fixed;inset:0;z-index:19;display:grid;place-items:center;padding:20px;background:rgba(46,42,38,.45)}
.newsCard{position:relative;width:100%;max-width:390px;background:var(--card);border:var(--bw) solid var(--ln);border-radius:18px;padding:12px 4px}
/* 札が1枚だけのときは、紙を札に合わせて小さくする（横いっぱいの白い紙に小さい札が1つ、にならないように。2026-10-12） */
.newsCard:has(.tiles > .tile:only-child){width:max-content;max-width:100%;padding:16px 22px}
/* iPhone の Safari では、折り返す並び（flex-wrap）の入れ物が横いっぱいに広がって、紙が小さくならなかった（のぶさんの実機・ver 0.1.179）。1枚のときは折り返しをやめ、札の幅を決め打ちにする */
.newsCard:has(.tiles > .tile:only-child) .tiles{display:block;width:150px;padding:0;overflow:visible}
.newsCard:has(.tiles > .tile:only-child) .tile{display:flex;width:150px;flex-basis:150px}
.newsCard:has(.tiles > .tile:only-child) .tile .pic{height:112px}
.news[hidden]{display:none}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-height:64dvh;overflow-x:hidden;overflow-y:auto;padding:0 8px;border-radius:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tiles::-webkit-scrollbar{display:none}
/* 札の幅は固定：いちばん長い言葉（7文字＋印）が切れない幅 */
.tile{position:relative;flex:0 0 112px;display:flex;flex-direction:column;align-items:center;min-width:0;border-radius:14px;background:linear-gradient(var(--lit1),var(--lit2));
  border:var(--bw) solid var(--ln);overflow:hidden}
.news.fresh .tile{animation:pop .5s cubic-bezier(.3,1.6,.5,1) backwards}
.tile:nth-child(2){animation-delay:.07s}.tile:nth-child(3){animation-delay:.14s}.tile:nth-child(4){animation-delay:.21s}.tile:nth-child(5){animation-delay:.28s}.tile:nth-child(n+6){animation-delay:.35s}
.tile .pic{position:relative;width:100%;height:84px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.tile .cnt{position:absolute;left:5px;top:5px;min-width:26px;height:22px;padding:0 6px;border-radius:11px;background:var(--card);border:2px solid var(--ln);
  font-style:normal;font-size:12px;font-weight:800;line-height:1;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.tile .when{display:block;width:100%;padding:0 0 4px;background:var(--card);font-size:12px;font-weight:600;line-height:1.2;color:var(--sub);text-align:center}
/* 見返しの紙の中：折り返して全部並べる */
.tiles.log{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));overflow:visible;padding:0;border-radius:0}
.tiles.log .tile{flex:none}

/* ── 保存できないときの短い表示 ── */
.notice{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 2px 8px;padding:5px 10px;border-radius:14px;background:var(--warn);border:var(--bw) solid var(--ln);font-size:13px}
.notice[hidden]{display:none}
.notice .ic{width:18px;height:18px}
.notice.soft{background:var(--soft)}      /* 通信待ち：遊べるので、強い色にしない */
.notice.act{background:#fff3a8}           /* ほかの端末で進んでいる：読み直すボタンつき */
/* 紙が開いているあいだも、［読み直す］の帯は紙の後ろの幕（.scrim 20・.sheet 21）より手前で受ける。
   前は幕が帯にかぶさり、帯のボタンを押しても幕が受けて紙が閉じるだけだった（テスト係 2026-10-09 の 3-4：3回めでやっと効いた） */
.has-sheet .notice.act{position:relative;z-index:22}
.nbtn{margin-left:4px;height:28px;padding:0 12px;border-radius:14px;background:var(--green);border:var(--bw) solid var(--ln);font-size:13px;font-weight:800;white-space:nowrap}

/* ── 保存が読めなかったときの画面 ── */
.problem{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:48px 16px 24px}
.problem[hidden]{display:none}
.problem .bigic .ic{width:72px;height:72px}
.problem h1{margin:6px 0 0;font-size:20px;font-weight:800}
.problem p{margin:0;font-size:13px;color:var(--sub)}
.problem .col{display:flex;flex-direction:column;gap:14px;width:100%;max-width:280px;margin-top:14px}
.has-problem .shelf,.has-problem .news,.has-problem .bottom,.has-problem .notice{display:none}

/* 「N日目」の札：押すと最近の出来事。まだ見ていない札があるときは赤い点 */
button.chip{position:relative;cursor:pointer}
button.chip:active{transform:translateY(1px)}
.chip.dot::after{content:"";position:absolute;right:-6px;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--ln)}
.tile .pic svg{width:100%;height:auto;max-height:100%}
.tile .pic .bigic{height:100%;display:grid;place-items:center}
.tile .pic .bigic .ic{width:50px;height:50px}
.tile .cap{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;padding:4px 2px 5px;background:var(--card);border-top:var(--bw) solid var(--ln);font-size:12px;white-space:nowrap}
.tile .cap .ic{width:16px;height:16px}
.tile.k-sold .cap{background:#fff3a8;font-size:13px}
.tile.k-dh .cap,.tile.k-superRound .cap{background:#fff3a8}
.tile.k-wrinkle .cap{background:var(--warn)}
.tile.k-died .cap{background:#ddd6cb}
.tile.k-rotted .cap{background:#e3cfb4}
.tile.k-died .pic,.tile.k-rotted .pic,.tile.k-wrinkle .pic{background:var(--soft)}
.x{position:absolute;right:-8px;top:-10px;width:34px;height:34px;border-radius:50%;background:var(--card);border:var(--bw) solid var(--ln);display:grid;place-items:center;z-index:5}
.x .ic{width:16px;height:16px}

/* ── 下の帯 ── */
.bottom{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:430px;bottom:0;z-index:10;display:flex;justify-content:center;gap:10px;pointer-events:none;
  padding:10px 12px calc(12px + var(--safe-b));background:linear-gradient(transparent,var(--bg) 34%)}
.bottom>*{pointer-events:auto}
/* 始める画面の入口の1行（規約・プライバシー・送る情報）。蒔く前だけ、下のボタンの下に小さく */
.bottom{flex-direction:column;align-items:center;gap:6px}
.legal{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 4px;font-size:12px;line-height:1.5;font-weight:600;color:var(--sub);text-align:center}
.legal a{color:var(--sub);text-decoration:underline;text-underline-offset:2px;padding:2px 0}
.legal i{font-style:normal}
@media (max-width:350px){.legal i{display:none}}   /* 狭い画面：「利用規約」を「規約」にして1行に収める */
.has-legal .main{padding-bottom:128px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 16px;border-radius:999px;
  background:var(--card);border:var(--bw) solid var(--ln);box-shadow:0 4px 0 var(--ln);font-size:15px;font-weight:800;white-space:nowrap}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ln)}
.btn.primary{background:var(--green)}
.btn.sell{background:var(--coin)}
.btn.danger{background:var(--warn)}
.btn.ghost{box-shadow:none;border-color:transparent;background:none;color:var(--sub);font-weight:700;font-size:13px;min-height:38px;padding:0 10px}
.btn.ghost .ic{opacity:.8}
.btn.ghost:disabled{box-shadow:none}
.btn.small{min-height:40px;padding:0 10px;font-size:13px;gap:4px;width:100%}
.btn.big{min-height:56px;padding:0 30px;font-size:17px;max-width:406px}
.btn.big .ic{width:28px;height:28px}
.btn:disabled{opacity:.42;box-shadow:0 4px 0 #9b938a}
.btn b{font-variant-numeric:tabular-nums}
.btn .count{position:absolute;right:-6px;top:-9px;min-width:26px;height:26px;border-radius:13px;background:var(--coin);border:var(--bw) solid var(--ln);
  font-style:normal;font-size:13px;display:grid;place-items:center;padding:0 5px}
.btn.pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:translateY(-3px)}}

/* ── 下から出る紙 ── */
.scrim{position:fixed;inset:0;background:rgba(46,42,38,.45);z-index:20}
.scrim.enter{animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:430px;max-height:92dvh;z-index:21;display:flex;flex-direction:column;
  background:var(--card);border:var(--bw) solid var(--ln);border-bottom:0;border-radius:24px 24px 0 0}
.sheet.enter{animation:rise .28s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{transform:translate(-50%,40%);opacity:.4}}
.sheet>.x{right:10px;top:10px}
.sheet-body{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:14px 14px calc(18px + var(--safe-b));display:flex;flex-direction:column;gap:10px}
.stage{position:relative;border-radius:18px;background:
  radial-gradient(ellipse 78% 82% at 50% 20%,rgba(255,255,252,.96),rgba(255,255,250,.6) 45%,rgba(255,255,250,0) 78%),
  linear-gradient(#ddd6c6 0,#ebe5d8 11%,#f1ece0 30%,#ebe5d7 72%,#e0d9c9 100%);border:var(--bw) solid var(--ln);overflow:hidden;display:flex;justify-content:center;align-items:flex-end;height:250px}
/* 紙の中の絵の上のライト：棚と同じパネル（上の端から吊るしてある。ワイヤーは枠で切れる） */
.stage .lampglow{position:absolute;left:16%;right:16%;top:-2px;z-index:1;pointer-events:none}
.lampglow>svg{width:100%;height:auto}
.stage{min-height:120px}   /* 低い画面でも、株の絵をこれより小さくしない（紙の中を送って見る） */
.stage>svg{height:100%;width:auto;position:relative}
.stage.zoom>svg{height:92%}
.stage.pot{height:190px;flex-shrink:0}   /* 2026-10-06：鉢の絵の枠は縮めない。株が3つ以上で紙が長くなると、枠だけ縮んで鉢の上が切れ、ライトと重なっていた（縮むのは下の株の一覧＝中を送って見る） */
.stage.pot>svg{height:auto;width:86%;max-height:100%}
.facts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.facts.top{padding-right:40px}
.meter{display:flex;align-items:center;gap:8px}
.meter .lab{font-size:13px;color:var(--sub);flex:none}
.meter .bar{flex:1;height:16px;border-radius:8px;background:var(--soft);border:var(--bw) solid var(--ln);overflow:hidden;min-width:0}
.meter .bar i{display:block;height:100%;background:var(--green);border-right:var(--bw) solid var(--ln);border-radius:0 6px 6px 0}
.meter b{font-size:22px;min-width:1.6em;text-align:right;font-variant-numeric:tabular-nums;line-height:1}
.sts{display:flex;gap:6px;flex-wrap:wrap}
.st{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px 0 6px;border-radius:14px;border:var(--bw) solid var(--ln);font-size:13px;background:var(--soft);white-space:nowrap}
.st .ic{width:16px;height:16px}
.st.star,.st.tag{background:#fff3a8}.st.warn{background:var(--warn)}.st.water{background:var(--water)}.st.etio{background:#e6d9a8}.st.dead{background:#ddd6cb}
.st.dead.rot{background:#e3cfb4}.st.caution{background:#fff3a8}
/* 水の残りの絵（しずく＋水位）・次の水やりまで・「水をやる」。腰水の株には出ない */
.tank{display:flex;align-items:center;gap:8px}
.tank>.ic{width:24px;height:24px}
.tank .gauge{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tank .bar{height:16px;border-radius:8px;background:var(--soft);border:var(--bw) solid var(--ln);overflow:hidden}
.tank .bar i{display:block;height:100%;background:#9fd0e6;border-right:var(--bw) solid var(--ln);border-radius:0 6px 6px 0}
.tank.low .bar i{background:var(--warn)}   /* 赤い帯＝残りが少なくて、次の水やりまでもたない。満タンのときは赤くしない */
.tank.empty .bar{background:#f6d9cf}
.tank.pop .bar i{animation:fill .5s ease-out}
@keyframes fill{from{width:0}}
/* 自動の水やりの枠（2026-10-10）：頻度の5つのボタンを見出しつきでくくる。「あと◯日」は見出しの右。上の帯と［今すぐやる］（手でやる水やり）と分ける */
.auto{display:flex;flex-direction:column;gap:8px;padding:10px 10px 9px;border-radius:18px;background:var(--soft)}
.autoh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px;font-size:14px;line-height:1.2}
.autoh b{font-weight:800}
.auto .next{font-size:13px;color:var(--sub);white-space:nowrap}
.auto.soon .next,.auto.empty .next{color:var(--red)}
.auto .hint{margin:0}
.tank .btn.pour{flex:none;min-height:42px;padding:0 12px;font-size:14px;gap:4px;background:var(--water)}
.tank .btn.pour .ic{width:20px;height:20px}
.water{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.wl .wrisk{position:absolute;right:-6px;top:-9px;width:22px;height:22px;pointer-events:none}   /* 成株の腰水・多め：根腐れの注意の印 */
.wl .wrisk .ic{width:22px;height:22px}
.wl{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 5px;border-radius:14px;border:var(--bw) solid var(--ln);background:var(--card);font-size:12px;min-width:0}
.wl small{font-size:12px;font-weight:600;color:var(--sub);line-height:1.15}
.wl.on small{color:var(--ink)}
.wl .wi{display:flex;height:22px;align-items:center}
.wl .wi .ic{width:17px;height:17px;margin:0 -3px}
.wl.on{background:var(--water);box-shadow:inset 0 -4px 0 #9fd0e6;transform:translateY(-2px)}
.hint{margin:-4px 0 0;font-size:13px;color:var(--sub);text-align:center}
.hint.warn{color:var(--red);margin:0}
.hint.wait{margin:0;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);font-size:14px}   /* 芽が出る前の鉢：いつごろ芽が出るか */
.hint.wait .ic{width:20px;height:20px;flex:none}
/* 種も買うお金も無いとき：何が要るかを値札の絵と短い言葉で（苗を売ると買える） */
.hint.need{margin:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;border-radius:14px;background:#fff8d6;border:var(--bw) dashed var(--ln);color:var(--ink);font-size:14px}
.hint.need .ic{width:22px;height:22px;flex:none}
/* 下の「種を蒔く」：蒔ける種が無く買うお金も無いあいだは色を落とす（押せば種の紙が開く） */
.btn.primary.idle{background:#dfe6d3;color:var(--sub)}
.btn.primary.idle .ic{opacity:.55}
.market{margin:0;font-size:13px;color:var(--sub);text-align:center}
.market b{color:var(--ink)}
.cell .market{white-space:nowrap}
/* 出品中の株は止まっている：ライトを消した絵にする */
.stage.held{background:#e9e4da}
.stage.held .lampglow::after{display:none}
.cell.listed .cpic{background:#e9e4da}
.row{display:flex;gap:10px;justify-content:center}
.row>.btn{flex:1 1 0;min-width:0}
.row.wrap{flex-wrap:wrap}
.row.wrap>.btn{flex:1 1 40%}
.row.minor{justify-content:space-between;margin-top:-2px}
.row.minor>.btn{flex:none}
.confirm{border-radius:16px;border:var(--bw) solid var(--ln);background:var(--soft);padding:10px 12px 14px}
.confirm p{margin:0 0 8px;text-align:center}
.confirm.buyask{margin-top:8px;display:flex;flex-direction:column;align-items:center}.confirm.buyask .spic{width:72px;height:72px;display:flex;align-items:flex-end;justify-content:center;margin:2px 0 6px}.confirm.buyask .spic svg{width:100%;height:100%}.confirm.buyask .row{width:100%}.confirm.buyask .btn{position:relative;overflow:visible}

.cells{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cell{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:16px;border:var(--bw) solid var(--ln);background:var(--bg);min-width:0}
.cell.listed{background:#fff8d6}
.cell .cpic{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(var(--lit1),var(--lit2));border:var(--bw) solid var(--ln)}
.cell .cpic svg{width:100%;height:auto}
.cell .cpic .badge{position:absolute;right:4px;top:4px}
.cell .meter b{font-size:18px}
.cell .st{align-self:flex-start}

.seeds{display:flex;flex-direction:column;gap:8px}
.seed{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;border:var(--bw) solid var(--ln);background:var(--bg)}
.seed.have{background:#fff8d6}
/* 月額の最終確認の紙（2026-10-07）：条文の求める事項を、1画面に収める */
.paybox{border:var(--bw) solid var(--ln);border-radius:16px;background:var(--bg);padding:12px 14px;margin:8px 0 12px;text-align:left}
.paybox>b{display:block;font-size:17px;margin-bottom:4px}.paybox p{margin:4px 0;font-size:15px}.paybox p.fine{font-size:12px;color:var(--sub);font-weight:600;line-height:1.5}
.seed .spic{flex:none;width:44px;height:44px;display:flex;align-items:flex-end;justify-content:center}.seed .spic svg{width:100%;height:100%}
.seed>.ic{width:40px;height:40px}
.seed .what{flex:1;min-width:0}
.seed .what b{display:block;font-size:16px}
.seed .what small{display:block;font-size:12px;color:var(--sub);font-weight:600}
.seed .btn{flex:none;flex-direction:column;gap:0;min-width:92px;min-height:50px;line-height:1.15;padding:4px 14px}
.seed .btn b{font-size:13px}
.seed .price{flex:none;font-size:16px;font-weight:800;white-space:nowrap}   /* 種の値段：ボタンの外（左）に出す */
.seed .btn{min-width:72px}
.seed .buycol{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.seed .buycol .btn{min-height:40px}
.seed .what b{white-space:nowrap}
/* ショップ：苗／種の切り替え（spec 14-2） */
/* ショップ（苗／種の切り替えがあるとき）：紙の高さを固定する。切り替えても広さが変わらない（のぶさん 2026-10-12） */
.sheet.s-seeds:has(.tabs){height:84dvh}
.tabs{display:flex;gap:6px;margin:0 0 10px;padding:4px;border-radius:999px;background:var(--soft);border:var(--bw) solid var(--ln)}
.tab{flex:1;min-height:38px;border:0;border-radius:999px;background:transparent;font:inherit;font-weight:800;font-size:16px;color:var(--sub)}
.tab.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 var(--bw) var(--ln)}
.seed.mk .spic{width:64px;height:72px;align-items:center}.seed.mk .spic svg{width:100%;height:100%}
.seed.mk .what small.star{display:flex;align-items:center;gap:2px;color:var(--ink)}.seed.mk .what small.star .ic{width:14px;height:14px}
.seed.mk .st{font-size:12px;white-space:nowrap}
.confirm.buyask.mk .spic{width:120px;height:130px}
.mkempty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 12px;text-align:center;color:var(--sub)}
.mkempty>.ic{width:40px;height:40px;opacity:.6}.mkempty b{font-size:16px;color:var(--ink)}.mkempty small{font-size:13px;font-weight:600}

/* ── 登録の紙（蒔いた直後）・登録したあとの入口 ── */
/* キーボードが出ているあいだは、紙をキーボードの上に置く（--kb・--vvh は app.js が visualViewport から入れる） */
.sheet.s-reg{bottom:var(--kb,0px);max-height:calc(var(--vvh,100dvh) * .94)}
.reg{display:flex;flex-direction:column;gap:10px}
.regh{margin:0;padding-right:40px;display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;line-height:1.35}
.regh .ic{width:26px;height:26px}
@media (max-width:350px){.regh{font-size:15px}.regh .ic{width:22px;height:22px}}   /* 狭い画面：見出しを1行に収める */
.inp{width:100%;height:50px;padding:0 14px;border-radius:14px;border:var(--bw) solid var(--ln);background:#fff;font:inherit;font-size:16px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.inp:focus{box-shadow:0 0 0 3px #bfe0aa}
.inp::placeholder{color:#b3aa9e;font-weight:600}
.inp.code{text-align:center;font-size:24px;letter-spacing:.3em;font-weight:800;font-variant-numeric:tabular-nums}
.inp.code::placeholder{font-size:15px;letter-spacing:0}
/* 2026-10-03 昼：同意のチェック（.chk）・渡す先の箱（.abroad・.readbtn）・押せない理由（.why）は紙から外したので消した */
.fine{margin:0;font-size:12px;line-height:1.6;font-weight:600;color:var(--sub)}
.fine.c{text-align:center}
.fine.from{color:var(--ink);margin-top:-4px}  /* どこからメールが届くか：うすい字にしない・欄のすぐ下 */
.fine.rule{font-size:11px;font-weight:500}      /* 規約の1行（いちばん下・小さく） */
.reg .ph{display:inline-block}                  /* 句の切れ目でだけ折り返す（app.js の ph・phrases） */
.reg .fine a{padding:6px 0;margin:-6px 0}       /* 指で押せる高さ（行の間は広げない） */
.reg a,.fine a,.links a{color:var(--deep);font-weight:700;text-underline-offset:3px}
.row.minor.c{justify-content:center}
.amail{margin:0;display:flex;align-items:center;gap:8px;font-size:15px;word-break:break-all}
.amail .ic{width:22px;height:22px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;border-radius:14px;border:var(--bw) solid var(--ln);background:var(--bg)}
.sw{display:inline-flex;align-items:center;gap:6px;height:36px;min-width:72px;padding:0 12px 0 6px;border-radius:18px;border:var(--bw) solid var(--ln);background:var(--soft);font-size:13px}
.sw i{width:20px;height:20px;border-radius:50%;background:#b9b0a3;border:2px solid var(--ln)}
.sw.on{flex-direction:row-reverse;padding:0 6px 0 12px;background:#dff0cf}
.sw.on i{background:var(--green)}
.links{margin:6px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:13px}
.links a{padding:4px 0}

/* ── まっさらな始まりの画面の「登録済みなら続きから」（蒔く前だけ・下のボタンの下に小さく） ── */
.door{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 14px;border-radius:18px;border:2px solid var(--ln);background:var(--card);font-size:13px;font-weight:800;white-space:nowrap}
.door .ic{width:16px;height:16px}
.door:active{transform:translateY(1px)}
.has-door .main{padding-bottom:170px}
/* ── ホーム画面に追加する案内（手順を絵と短い言葉で） ── */
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.steps li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;border:var(--bw) solid var(--ln);background:var(--bg);font-size:15px;min-width:0}
.steps .num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--coin);border:2px solid var(--ln);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;line-height:1}
.steps .sic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--card);border:2px solid var(--ln);display:grid;place-items:center}
.steps .sic .ic{width:26px;height:26px}
.hint.need.after{text-align:left;font-size:13px;line-height:1.45;justify-content:flex-start;padding:9px 12px}

/* ── はじめの見本（spec 6-0。tutorial.js）：本番の棚の上で一周する（2026-10-03 昼の作り直し）。
   上の帯は「見本 ▶▶」・本番と違う色／日付が回る／棚の光が昼と夜を巡る／押す所だけ明るく、ほかは薄暗く／縁のタイマー／指 ── */
.chip.day .ic{width:13px;height:13px;margin:0 1px 0 -3px}          /* 本番の帯の ▶（本番の時間） */
.top{transition:background-color .6s,color .6s}
.top.is-mihon{background:var(--ln);color:#fff8e1;margin:calc(-8px - var(--safe-t)) -10px 4px;padding:calc(8px + var(--safe-t)) 12px 10px;border-radius:0 0 18px 18px}
.top[data-mihon="start"]{margin:calc(-8px - var(--safe-t)) -10px 4px;padding:calc(8px + var(--safe-t)) 12px 10px;background:var(--bg);border-radius:0 0 18px 18px}
.top.is-mihon .chip{color:var(--ink);border-color:#fff8e1}
.mtag{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 8px;border-radius:15px;background:#fff8e1;color:var(--ink);border:var(--bw) solid var(--coin);font-size:14px;white-space:nowrap}
.mtag .ff{display:flex}
.mtag .ff .ic{width:22px;height:22px;animation:ff 1s linear infinite}
@keyframes ff{50%{transform:translateX(3px)}}
.chip.day.roll{animation:roll .18s ease-out}
@keyframes roll{from{transform:translateY(-7px);opacity:.3}}
.has-mihon .news{display:none}
.has-mihon .main{padding-bottom:96px;gap:8px}
.has-mihon .top{position:relative;z-index:31}                     /* 帯と言葉のカードは薄暗くしない */
.mihon{display:flex;flex-direction:column;gap:10px}
.mihon[hidden]{display:none}
.has-mihon .mihon{order:-1;position:relative;z-index:31}
/* 言葉のカード：場面の名前・なぜの1行（左）／飛ばす・次へ（右） */
.mcoach{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;min-height:80px;padding:8px 9px 9px 13px;
  border-radius:18px;background:var(--card);border:var(--bw) solid var(--ln);box-shadow:0 4px 0 var(--ln)}
.mcap{grid-column:1;grid-row:1;margin:0;display:flex;align-items:center;gap:6px;font-size:18px;font-weight:800;line-height:1.3;min-width:0}
.mcap .ic{width:24px;height:24px}
.mwhy{grid-column:1;grid-row:2;margin:0;font-size:14px;font-weight:700;line-height:1.45;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.mskip{grid-column:2;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:3px;min-height:32px;padding:0 8px 0 12px;border-radius:16px;background:var(--card);border:2px solid var(--ln);font-size:13px;font-weight:800;color:var(--sub);white-space:nowrap}
.mskip .ic{width:16px;height:16px}
.mskip:active{transform:translateY(1px)}
.mnext{grid-column:2;grid-row:2;justify-self:end;min-height:42px;padding:0 14px 0 10px;font-size:15px;gap:4px}
.mnext .ic{width:20px;height:20px}
.mcoach .door{grid-column:1 / -1;justify-self:start;margin-top:4px}
/* 本番に入るときの言葉 */
.mcoach.mstart{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px 16px;text-align:center}
.mbig .ic{width:52px;height:52px}
.mlines{margin:0;font-size:17px;font-weight:800;line-height:1.6}
.mlines span{display:block;word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:350px){.mlines{font-size:15px}.mcap{font-size:16px}.mwhy{font-size:13px}}
/* 明るくする所（ほかは薄暗く）・縁のタイマー・指 */
.mspot{position:fixed;left:0;top:0;width:0;height:0;border-radius:16px;box-shadow:0 0 0 200vmax rgba(34,28,24,.55);z-index:30;pointer-events:none;opacity:0;transition:opacity .25s}
.mspot.on{opacity:1}
.mring{position:fixed;z-index:32;pointer-events:none;display:none}
.mring.on{display:block}
.mring svg{display:block;width:100%;height:100%;overflow:visible}
.mring rect{fill:none;stroke:var(--coin);stroke-width:5;stroke-linecap:round}
.mring.full rect{stroke:var(--green)}
.mfinger{position:fixed;left:0;top:0;z-index:33;width:40px;height:47px;pointer-events:none;display:none;animation:tap 1.1s ease-in-out infinite;filter:drop-shadow(0 2px 0 rgba(58,46,43,.35))}
.mfinger.on{display:block}
.mfinger svg{width:100%;height:100%}
@keyframes tap{0%,100%{transform:translate(5px,7px)}50%{transform:none}}
.mpause .mspot,.mpause .mring,.mpause .mfinger{display:none}
/* 縁が一周するまで：押す所は色を落とす（一周したら押せる色に変わる） */
.mwait{filter:grayscale(.9) brightness(.95)}
.btn.mwait{box-shadow:0 4px 0 #9b938a}
/* 棚の昼と夜（見本のあいだだけ早く巡る。動きを減らす設定では巡らない） */
.tier.lit .slots{position:relative}
.mcycle .tier.lit .slots::before{content:"";position:absolute;inset:0;background:linear-gradient(#26304f,#3d3852);opacity:0;pointer-events:none;z-index:1;animation:night 4.8s ease-in-out infinite}
.mcycle .tier.lit .lamp::after{animation:glow 4.8s ease-in-out infinite}
.mcycle .tier.lit .lpu{animation:under 4.8s ease-in-out infinite}
@keyframes night{0%,38%{opacity:0}52%,84%{opacity:.5}100%{opacity:0}}
@keyframes glow{0%,38%{opacity:1}52%,84%{opacity:0}100%{opacity:1}}
@keyframes under{0%,38%{fill:#fffbe3}52%,84%{fill:#8d8578}100%{fill:#fffbe3}}
/* 売れた：棚の空いた枠に「+2,000G」 */
.slot .msold{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:4px;padding:4px 10px 4px 6px;border-radius:999px;background:#fff3a8;
  border:var(--bw) solid var(--ln);box-shadow:0 3px 0 var(--ln);font-size:16px;white-space:nowrap;animation:popc .6s cubic-bezier(.3,1.6,.5,1)}
.slot .msold .ic{width:22px;height:22px}
.slot .msold b{color:var(--ink)}
@keyframes popc{0%{transform:translate(-50%,8px) scale(.7)}100%{transform:translateX(-50%)}}
/* 見本の紙：本番の紙と同じ形。言葉のカードの下まで（重ねない）。暗くするのは .mspot がやる */
.mroot .scrim{background:transparent}
.mroot .sheet{max-height:calc(100vh - var(--mtop,0px) - 8px);max-height:calc(100dvh - var(--mtop,0px) - 8px)}
.mroot .stage{height:150px}
.mroot .stage.pot{height:112px}
.mroot .cells{grid-template-columns:repeat(3,1fr);gap:6px}
.mroot .cells:has(> .cell:only-child){grid-template-columns:minmax(0,160px);justify-content:center}   /* 見本は芽が1つだけ（2026-10-03 夜） */
.mroot .cell{padding:6px;gap:5px}
.mroot .cell .cpic{display:block}
.mroot .cell .meter{gap:4px}
.mroot .cell .meter .lab{display:none}
.mroot .cell .meter b{font-size:16px}
.mroot .cell .btn.small{padding:0 2px;font-size:13px}
.mroot .cell .btn.small .ic{display:none}
.mroot .cell.best{background:#fff8d6}
.mroot .wl:disabled{opacity:.38}
/* 種の店の、見本のあとの最初の1回だけの案内 */
.hint.need.guide{background:#dff0cf;border-style:solid}
.seed.guide{background:#fff8d6}

.cardpv{border-radius:18px;overflow:hidden;align-self:center;width:62%;box-shadow:0 4px 0 var(--ln)}
.cardpv svg{width:100%;height:auto}
.cardpv.shelf{width:86%}

/* ── 小さな知らせ ── */
.toasts{position:fixed;left:0;right:0;top:calc(56px + var(--safe-t));z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 9px;border-radius:999px;background:var(--card);border:var(--bw) solid var(--ln);box-shadow:0 4px 0 var(--ln);
  font-size:14px;animation:pop .4s cubic-bezier(.3,1.6,.5,1);transition:opacity .4s,transform .4s}
.toast .ic{width:22px;height:22px}
.has-notice .toasts{top:calc(98px + var(--safe-t))}   /* 上の短い表示（未保存・読み直す）に重ねない */
.toast.t-sold,.toast.t-dh,.toast.t-superRound{background:#fff3a8}
.toast.t-wrinkle,.toast.t-warn{background:var(--warn)}
.toast.out{opacity:0;transform:translateY(-8px)}

.nojs{text-align:center;padding:40px}
#err-box{position:fixed;left:4px;right:4px;top:4px;z-index:99;margin:0;padding:6px;background:#b3261e;color:#fff;font:11px/1.3 ui-monospace,monospace;white-space:pre-wrap;max-height:30vh;overflow:auto;border-radius:8px}

/* ── 試し遊びの操作盤（?debug=1 のときだけ） ── */
.dbg-toggle{position:fixed;right:10px;bottom:calc(84px + var(--safe-b));z-index:15;width:44px;height:44px;border-radius:50%;background:#dff0cf;border:var(--bw) solid var(--ln);display:grid;place-items:center;box-shadow:0 3px 0 var(--ln)}
.dbg{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--safe-b));z-index:31;width:calc(100% - 20px);max-width:410px;max-height:70dvh;overflow:auto;
  background:#fffdf8;border:var(--bw) solid var(--ln);border-radius:16px;padding:10px;font-size:12px;box-shadow:0 4px 0 var(--ln)}
.dbg h4{margin:0 0 6px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.dbg .g{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.dbg button{min-height:34px;padding:0 10px;border-radius:10px;border:2px solid var(--ln);background:var(--soft);font-size:12px;font-weight:700}
.dbg button.on{background:var(--green)}
.dbg pre{margin:0;max-height:220px;overflow:auto;background:#2e2a26;color:#e9e3d6;padding:8px;border-radius:8px;font:10px/1.35 ui-monospace,monospace;white-space:pre-wrap;word-break:break-all}
.dbg .info{color:var(--sub);margin:0 0 6px;font-weight:600}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.still *{animation:none!important;transition:none!important}
@media (min-width:431px){body{background:#e9e4d8}.app{background:var(--bg);box-shadow:0 0 0 var(--bw) var(--ln)}}
/* 低い画面：札の列が出ていても、3段目の「ライトを追加」が下の「種を蒔く」に隠れないよう、札と3段目（ボタン1つの段）を低くする */
@media (max-height:700px){.tile .pic{height:64px}.tier.dark .slots{height:106px;padding-bottom:4px}}
@media (max-height:640px){.hint.tip{display:none}   /* 低い画面：頻度の添え書きは省く（頻度の印と間隔は出ている） */
  .tier .slots{height:116px}.slot>svg{width:128%}.slot>.pin{width:128%}
  .tile .pic{height:50px}.tier.dark .slots{height:76px;align-items:flex-end;padding-bottom:4px}.lightbtn{padding:5px 14px 5px 10px}
  .tier.dark .lamp{left:22%;right:22%}   /* 低い段：消えたパネルを少し小さく（ボタンと重ねない） */
  .btn.big{min-height:48px}.bottom{padding-bottom:calc(8px + var(--safe-b))}
  /* 始める画面（まだ何も蒔いていない＝棚は空）：入口の1行のぶん、空の段を低くする */
  .has-legal .tier.lit .slots{height:102px}}
/* まっさらな始まりの画面に「登録済みなら続きから」が出ているあいだ（下の帯が42px 高い）：そのぶん、空の段を低くする
   （3段目の「ライトを追加」が「種を蒔く」に隠れないように。蒔くと入口が消えて、元の高さに戻る） */
@media (max-height:760px){.has-door .tier.lit .slots{height:115px}.has-door .slot>svg{width:134%}.has-door .slot>.pin{width:134%}}
@media (max-height:640px){.has-door .tier.lit .slots{height:80px}.has-door .slot>svg{width:100%}.has-door .slot>.pin{width:100%}}

/* 正式名称「スマホで塊根植物 Caudex Days」：看板の名前の上に説明の部分を小さく（2026-10-03） */
.brand .name{display:flex;flex-direction:column;justify-content:center;height:30px;line-height:1.2}
.brand .name small.sub{display:block;font-size:8.5px;line-height:1;margin-bottom:2px;letter-spacing:.04em;opacity:.72;font-weight:600;white-space:nowrap}
/* 2026-10-03：説明の行を足したら、高さ26pxの看板から Caudex Days がはみ出して下が切れた。2行を26pxに収める */

/* ロゴの紙のいちばん下：記録を消す（小さく・赤い字）と版の番号（押せない文字）。2026-10-03 */
.wipe-row{margin-top:14px}
.btn.ghost.wipe{color:var(--red);font-size:12px;min-height:36px}
.ver.by{margin-top:10px;font-weight:700;opacity:1}
.ver{margin:2px 0 0;text-align:center;font-size:11px;font-weight:500;color:var(--sub);opacity:.75;letter-spacing:.02em}
/* 記録を消す：確かめの紙 */
.reg.wipe .wipe-note{margin:0 0 14px;text-align:center;font-size:14px;font-weight:700;line-height:1.6}
.reg.wipe .row{gap:10px}
.reg.wipe .btn.danger{background:var(--red);color:#fff;border-color:var(--ln)}

/* いちばん最初の画面（2026-10-04）：何のゲームか・何を目指すか・ボタンを押してから早送りの練習へ */
.intro{position:fixed;inset:0;z-index:98;background:var(--bg);display:grid;place-items:center;padding:16px;padding-bottom:calc(16px + var(--safe-b,0px));overflow:auto}
.intro .ibox{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:340px;text-align:center}
.intro .iname{margin:0;font-size:26px;font-weight:800;line-height:1.15;letter-spacing:.01em}
.intro .iname small{display:block;font-size:12px;font-weight:600;color:var(--sub);letter-spacing:.06em;margin-bottom:2px}
.intro .ipic{width:min(56vw,200px);border:var(--bw) solid var(--ln);border-radius:22px;background:linear-gradient(#fffbe9,#efe6d3);overflow:hidden}
.intro .ipic svg{display:block;width:100%;height:auto}
.intro .igoal{margin:6px 0 0;font-size:22px;font-weight:800}
.intro .iway{margin:0;font-size:14px;line-height:1.6;color:var(--sub);font-weight:600}
.intro .btn.big{margin-top:10px;width:100%}
.intro .inote{margin:0;font-size:12px;color:var(--sub)}
@media (max-height:560px){.intro .ipic{width:min(40vw,140px)}}
.intro .iskip{margin-top:14px;padding:10px 18px;border:0;background:none;font:inherit;font-size:12px;color:var(--sub);opacity:.8;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 右上のメニュー（2026-10-04）と、メニューの中の「自分の記録」 */
.chip.menu{width:34px;padding:0;justify-content:center;cursor:pointer}
.chip.menu .ic{width:18px;height:18px}
.recs{margin:10px 0 14px}
.recs h3{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--sub)}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rc{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:14px;border:var(--bw) solid var(--ln);background:var(--bg)}
.rc span{font-size:11px;color:var(--sub);font-weight:600}
.rc b{font-size:20px;font-weight:800;line-height:1.2}

/* 早送りの札はボタンに見せない（のぶさん 2026-10-04「ボタンのように見えて、押したくなって押せない」）：枠と地を外して、状態を言う文字だけにする */
.mtag{height:30px;padding:0 0 0 2px;border:0;border-radius:0;background:none;color:#fff8e1;font-size:13px;gap:4px;letter-spacing:.04em}
.mtag b{font-weight:700}
.mtag .ff .ic{width:20px;height:20px}
/* 「早送り中」は日付のタイマーが回っているあいだだけ、日付のすぐ左に（のぶさん 2026-10-04） */
.top .mtag{display:none;margin-right:3px}
.top.is-rolling .mtag{display:inline-flex}
/* 本番の種の店：最初の1袋の「蒔く」を指さす（チュートリアルの指と同じ絵・同じ動き。2026-10-04） */
.seed.guide .btn{position:relative;overflow:visible}
.gfinger{position:absolute;right:-4px;bottom:-26px;width:38px;height:45px;pointer-events:none;animation:tap 1.1s ease-in-out infinite;filter:drop-shadow(0 2px 0 rgba(58,46,43,.35));z-index:3}
.gfinger svg{width:100%;height:100%}
/* 始まりの言葉（最初の種を蒔いた直後。2026-10-04）：棚が後ろに透けて見える紙 */
.intro.welcome{background:rgba(58,46,43,.55);z-index:60}
.intro.welcome .ibox{background:var(--card);border:var(--bw) solid var(--ln);border-radius:22px;padding:22px 16px 18px;max-width:320px;gap:12px}
.intro.welcome .wplay .ic{width:44px;height:44px}
.intro.welcome .mlines{font-size:16px}
/* 下の「種を蒔く」を外した（2026-10-04）：下の余白を詰める・最初の空の鉢を光らせる */
.no-bottom .main{padding-bottom:28px}
/* ふだんの画面（下の帯が無い）：低い画面でも、段の高さは画面に合わせる（2026-10-06）。
   上の @media (max-height:640px・700px) の「段を低くする」指定は、下に「種を蒔く」の帯があった頃の物（帯は 2026-10-04 に外した）。
   そのままだと、小さいスマホで棚が画面の6割で終わり、下が大きく空く。始める画面（has-legal・has-door）は、下の帯があるので今までの指定のまま */
.no-bottom .tier .slots,.no-bottom .tier.dark .slots{height:124px;height:clamp(124px,calc((100dvh - 214px - var(--safe-t) - var(--safe-b)) / 3),200px)}
.no-bottom .tier.dark .slots{padding-bottom:20px}
.no-bottom .slot>svg{width:144%}.no-bottom .slot>.pin{width:144%}
.slot.empty.hint{position:relative;animation:shint 1.6s ease-in-out infinite}
.slot.empty .shint{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;background:var(--green);border:var(--bw) solid var(--ln);display:grid;place-items:center;pointer-events:none}
.slot.empty .shint .ic{width:15px;height:15px}
@keyframes shint{50%{transform:translateY(-3px)}}
/* メニューの「ホーム画面に追加」の［おすすめ］の札（2026-10-04） */
.btn .reco{font-style:normal;font-size:11px;font-weight:800;line-height:1;padding:4px 7px;border-radius:9px;background:var(--coin);border:2px solid var(--ln);margin-left:2px}
/* 登録済み（ログイン中）の印：メニューのボタンの右上に緑の点（2026-10-04） */
.chip.menu{position:relative}

/* 上の帯の名前は、ロゴと同じ書体の形（art.js の wordSVG）。高さ 16px＝幅 約98px（前の文字の幅とほぼ同じ）。大文字の真ん中をアイコンの真ん中に合わせるため、少し下げる（2026-10-06） */
.brand .name svg{display:block;height:16px;width:auto;flex:none;margin-top:3px}

/* ご意見・ご要望の紙（2026-10-06）。登録の紙と同じ並び。文の欄は高さのある入力欄 */
.sheet.s-voice{bottom:var(--kb,0px);max-height:calc(var(--vvh,100dvh) * .94)}
.inp.area{height:auto;min-height:124px;padding:12px 14px;line-height:1.6;resize:none;display:block}
/* カードの紙のボタン：送り先のサービスの色（のぶさん 2026-10-12）。X＝黒に白い字／LINE＝LINE の緑（#06C755）に白い字。ロゴの印は入れていない（使い方の決まりを読み切れていないため。字と色だけ） */
.btn.sx{background:#333;color:#fff}   /* まっ黒より少し灰色寄り（のぶさん 2026-10-12） */
.btn.sline{background:#06c755;color:#fff}
.voice .lead{margin:0;font-size:14px;font-weight:700}
.voice .pick{cursor:pointer}
.voice .shot{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:var(--bw) dashed var(--ln);background:#fff}
.voice .shot img{width:44px;height:44px;object-fit:cover;border-radius:8px;border:2px solid var(--ln);flex:none}
.voice .shot span{flex:1;font-size:14px;font-weight:700}
.voice .shot .btn{width:auto;padding:0 12px;min-height:36px}

/* 始まりの画面の名前も、ロゴと同じ書体の形（art.js の wordSVG・2026-10-06）。高さ 28px＝幅 約171px（前の文字の幅とほぼ同じ） */
.intro .iname svg{display:block;height:28px;width:auto;margin:4px auto 0}

/* ── LP（トップ。初めての人に出す・2026-10-10）。出し分けは index.html の head（<html> に top-lp か game の印）。印が付かなかったとき（script が動かない）は LP ── */
html.game #lp{display:none}
html:not(.game) #app,html:not(.game) #sheet-root,html:not(.game) #toast-root,html:not(.game) #debug-root{display:none}
/* 書体はメインビジュアルと同じ M PLUS Rounded 1c（のぶさん 2026-10-12。前は端末の書体＝iPhone はヒラギノ丸ゴ・Android と Windows は角ゴシックで、絵と合っていなかった）。
   LP で使う字だけを切り出した物（tools/lp-font.py が作る。LP の文を変えたら作り直す。字の一覧＝lp-chars.txt・test/lp.test.mjs が突き合わせる）。SIL Open Font License 1.1 */
@font-face{font-family:"CD Rounded";src:url(lp-500.woff2) format("woff2");font-weight:100 600;font-display:swap}
@font-face{font-family:"CD Rounded";src:url(lp-800.woff2) format("woff2");font-weight:700 900;font-display:swap}
.lp{max-width:960px;margin:0 auto;padding:0 16px 56px;font-family:"CD Rounded","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",-apple-system,sans-serif;font-weight:500;line-height:1.6}
.lp img{display:block;max-width:100%;height:auto}
/* 上の帯（ロゴと［遊ぶ］）は、送っても上に付いてくる（のぶさん 2026-10-12）。地の色を画面の左右いっぱいに敷く */
.lp-top{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + var(--safe-t)) 0 10px;position:sticky;top:0;z-index:5}
/* 帯の地：少し透かして、後ろをぼかす（のぶさん 2026-10-12「少し透過させた方がオシャレ」）。画面の左右いっぱいに敷く（はみ出しは #lp が切る） */
.lp-top::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;z-index:-1;background:rgba(244,241,234,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lp-top img{height:34px;width:auto}
.lp-btn{display:inline-block;background:var(--deep);color:#fff;font-weight:800;text-decoration:none;border:var(--bw) solid var(--ln);border-radius:999px;padding:12px 34px;font-size:18px;box-shadow:0 4px 0 var(--ln)}
.lp-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ln)}
.lp-btn.s{padding:6px 18px;font-size:14px;box-shadow:0 3px 0 var(--ln)}
/* いちばん上：左に文字・右に絵（狭い画面では上に文字・下に絵）。絵の地は無く、丸（::before）と床（::after）をページの地の上に置く。
   床は画面の左右いっぱい（200vw を絵の真ん中から。はみ出しは #lp が切る）。位置の％は、og-20261006.html の 1200×630 の中の並びから（絵の枠＝x 530〜1210・y 60〜650） */
#lp{overflow-x:hidden;overflow-x:clip}   /* clip＝はみ出しは切るが、送りの入れ物にはしない（hidden だと、上の帯が付いてこない） */
.lp-hero{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:8px;margin-top:10px}
.lp-hero-txt{position:relative;z-index:2}
.lp-hero-txt p{margin:0;font-size:15px;letter-spacing:.14em;color:var(--deep);font-weight:700}
.lp-hero-txt h1{margin:10px 0 28px;font-size:clamp(30px,5.3vw,52px);line-height:1.25;font-weight:800;white-space:nowrap}
.lp-art{position:relative}
.lp-art::before{content:"";position:absolute;left:20.6%;top:-11.9%;width:97.06%;aspect-ratio:1;border-radius:50%;background:#fbf8ee}
.lp-art::after{content:"";position:absolute;left:50%;margin-left:-100vw;width:200vw;top:77.97%;bottom:0;background:#e9dfca}
.lp-art img{position:relative;z-index:1;width:100%}
.lp h2{font-size:22px;font-weight:800;text-align:center;margin:52px 0 18px}
.lp-sp{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lp-sp figure{margin:0;background:var(--card);border:var(--bw) solid var(--ln);border-radius:20px;padding:12px 8px;text-align:center}
.lp-sp img{width:92%;margin:0 auto}
.lp-sp figcaption{font-weight:800;font-size:14px;margin-top:6px;line-height:1.35}
.lp-note{text-align:center;font-size:15px;font-weight:700;margin:14px 0 0}
.lp-how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:n;padding:0;margin:0;list-style:none}
.lp-how li{counter-increment:n;background:var(--card);border-radius:20px;padding:18px 14px;text-align:center}
.lp-how li::before{content:counter(n);display:grid;place-items:center;box-sizing:border-box;width:38px;height:38px;line-height:1;margin:0 auto 8px;border:var(--bw) solid var(--ln);border-radius:50%;background:#fffbe9;font-weight:800}
.lp-how b{display:block;font-size:17px}
.lp-how span{font-size:13px;color:var(--sub)}
.lp-auto{background:var(--card);border-radius:20px;padding:16px 14px;text-align:center;margin-top:12px}
.lp-auto b{display:block;font-size:17px}
.lp-auto p{margin:2px 0 0;font-size:13px;color:var(--sub)}
.lp-auto p span{display:inline-block}
.lp-why{background:var(--card);border-radius:20px;padding:20px 18px 16px;max-width:560px;margin:0 auto;font-size:15px;line-height:1.8}
.lp-why p{margin:0 0 10px}
.lp-why p span{display:inline-block}
.lp-why small{display:block;text-align:right;font-size:13px;color:var(--sub);font-weight:700;line-height:1.7}
.lp-why small a{color:var(--deep)}
.lp-free{background:var(--card);border:var(--bw) solid var(--ln);border-radius:24px;padding:26px 16px 22px;text-align:center}
.lp-free b{display:block;font-size:44px;line-height:1.2;color:var(--deep)}
.lp-free p{margin:8px 0 10px;font-size:17px;font-weight:700}
.lp-free p span{display:inline-block}
.lp-free small{font-size:13px;color:var(--sub);font-weight:700}
.lp-go{text-align:center;margin-top:52px}
.lp-foot{text-align:center;font-size:13px;color:var(--sub);margin-top:48px}
.lp-foot a{color:var(--sub);margin:0 8px}
@media (max-width:640px){
  .lp-hero{grid-template-columns:1fr;gap:22px;margin-top:14px}
  .lp-hero-txt h1{font-size:clamp(30px,9.6vw,44px);margin-bottom:22px}
  .lp-sp{grid-template-columns:repeat(2,1fr)}
  .lp-how{grid-template-columns:1fr}
  .lp h2{font-size:20px;margin-top:44px}
}