/* ===== てのひら系譜の画面（Ver0.747 で作り直し。2026-11-04 ユーザー「UIデザインについて、０から作り直して」→ サンプルを見て「とても良い！反映して」）=====
   ドット絵の場面を主役に、操作は親指の届く下半分へ。昼は白い札、夜は藍の札（ゲームの時計で ui.js が html に night を付ける）。
   次にやることは金色で一つだけ。朱（--seal）は継承と夢の成就だけ、.warn は戦いと作業の予告の帯だけに使う。
   書体：本文と数は M PLUS Rounded 1c、大きな見出しも同じ書体の太字、絵の上に飛ぶ数は DotGothic16 */
:root{
  --bg:#EDF0FA; --card:#FFFFFF; --ink:#1B2150; --sub:#555B85; --line:#D9DEF0; --soft:#F3F5FC; --lip:#C9D0E8;
  --glass:rgba(255,255,255,.93); --navon:#1B2150; --navonk:#FFFFFF; --acc:#A8650A; --sel:#FFF3CF; --selk:#3A2600; --selk2:#5E4A1E;
  --gold:#FFC53D; --goldk:#3A2600; --goldlip:#D18F0C; --hp:#23A866; --mp:#2F7BF0; --en:#F08A12; --red:#E5484D; --redk:#C2410C;
  --seal:#C8372D; --seal2:#7E1F18; --night:#0E1233;
  --eq:#FFF3CF; --eql:#F0DDA0; --eqk:#3A2600; --eqk2:#5E4A1E;   /* 装備中の項目。昼も夜も同じ */
  --green:var(--hp); --blue:var(--mp); --amber:var(--en); --pink:#E0457E; --gold2:#E8A400; --muted:var(--sub);
  --f-body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;
  --f-disp:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  --f-px:"DotGothic16",ui-monospace,monospace;
  --H:100dvh; --W:100vw;   /* 画面の縦と横。スマホを横にしてページを回すとき（html.rot）は入れ替える */
  color-scheme:light;
}
html.night,.nightui,.title,.sheet.end,.sheet.grow,.sheet.pick{
  --bg:#0E1233; --card:#1B2157; --ink:#F3F4FF; --sub:#B3B9E0; --line:#2F3778; --soft:#151A47; --lip:#0A0D28;
  --glass:rgba(20,25,70,.9); --navon:#FFC53D; --navonk:#3A2600; --acc:#FFD27A; --sel:#3A3560; --selk:#FFF3CF; --selk2:#E8D8A8;
  --hp:#3FD08A; --mp:#6FA8FF; --en:#FFB347; --red:#FF6B6E; --redk:#FFB347; --gold2:#FFD27A;
}
html.night{color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:500;overscroll-behavior:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app{position:relative;height:var(--H);display:flex;flex-direction:column;max-width:520px;margin:0 auto;overflow:hidden;background:var(--bg);color:var(--ink)}

/* 場面：ドット絵を画面いっぱいに。canvas の大きさと位置は ui.js の fitScene が決める（object-fit は使わない） */
.stage{position:relative;flex:1 1 0;min-height:0;overflow:hidden;background:#20264F}
#scene{position:absolute;left:0;top:0;display:block;width:100%;}
.app.pg .stage{flex:none;height:108px}
.hud{position:absolute;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:flex-start;gap:8px;z-index:3}
.who{display:flex;align-items:center;gap:9px;padding:4px 14px 4px 4px;border-radius:32px;background:var(--glass);box-shadow:0 2px 8px rgba(20,25,70,.2);min-width:0;text-align:left;color:var(--ink)}
.ava{--p:100%;width:56px;height:56px;border-radius:50%;padding:4px;flex:none;background:conic-gradient(var(--gold) 0 var(--p),var(--line) 0)}
.ava.low{background:conic-gradient(var(--red) 0 var(--p),var(--line) 0)}
.avi{position:relative;display:block;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--card);border:2px solid var(--card)}
.avi img,.fc img{position:absolute;max-width:none}
.avi canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.whot{min-width:0}
.whot b{display:block;font-size:17px;font-weight:700;line-height:1.15;white-space:nowrap}
.whot small{display:block;font-size:11px;font-weight:500;color:var(--sub);white-space:nowrap}
.lamp{display:flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--redk);white-space:nowrap}
.lamp.out{color:var(--sub)}
.app.pg .who{padding:3px 12px 3px 3px;gap:7px}
.app.pg .ava{width:44px;height:44px;padding:3px}
.app.pg .avi{width:38px;height:38px;border-width:1px}
.app.pg .whot b{font-size:14px}
.app.pg .lamp{display:none}
.who.nofa{padding-left:13px!important}
.who.nofa .ava{display:none}
.chip{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px 0 8px;border-radius:17px;background:var(--glass);font-weight:700;font-size:15px;box-shadow:0 2px 8px rgba(20,25,70,.2);white-space:nowrap;flex:none}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--gold);border:2px solid var(--goldlip);flex:none}
.rail{position:absolute;right:10px;top:calc(58px + env(safe-area-inset-top,0px));display:grid;gap:8px;z-index:3}
.app.pg .rail{display:none}
.rb{position:relative;width:50px;height:50px;border-radius:16px;background:var(--glass);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:700;box-shadow:0 2px 8px rgba(20,25,70,.2);color:var(--ink)}
.rb svg{font-size:21px}
.rb.off{color:var(--sub)}
.rb:active{transform:scale(.95)}
.bubble{position:absolute;left:50%;bottom:calc(50% + 30px);transform:translateX(-50%);max-width:74%;width:max-content;background:var(--card);color:var(--ink);font-size:13px;font-weight:500;line-height:1.45;padding:8px 12px;border-radius:14px;box-shadow:0 3px 10px rgba(20,25,70,.25);text-align:center;animation:pop .25s ease;z-index:2}
.bubble::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-7px;width:14px;height:14px;background:var(--card);transform:rotate(45deg);border-radius:2px}
@keyframes pop{from{opacity:0;transform:translate(-50%,6px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
.app.pg .bubble{display:none}
.dot-n{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--card);line-height:1}

/* ようす：下から重なる札 */
.dock{position:relative;flex:none;margin-top:-22px;border-radius:22px 22px 0 0;background:var(--bg);padding:12px 12px 10px;display:grid;gap:9px;z-index:4}
.app.pg .dock{display:none}
.needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 4px}
.nl{display:flex;justify-content:space-between;align-items:baseline;gap:4px;font-size:11px;font-weight:700;color:var(--sub)}
.nl b{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.bar{display:block;height:9px;border-radius:5px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;transition:width .6s}
.needs .bar{margin-top:2px}
.now{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:left;color:var(--ink)}
.ico{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:23px;flex:none;color:#fff;background:var(--c,#3F5BE8)}
.now .tx{flex:1;min-width:0}
.now .tx b{display:block;font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now .tx small{display:block;font-size:11.5px;font-weight:500;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link{font-size:12px;font-weight:700;color:var(--sub);display:flex;align-items:center;gap:1px;white-space:nowrap}
.cta{position:relative;display:flex;align-items:center;gap:6px;min-height:54px;padding:0 6px 0 0;border-radius:16px;background:var(--gold);color:var(--goldk);box-shadow:0 4px 0 var(--goldlip);margin-bottom:3px}
.cta-m{flex:1;min-width:0;display:flex;align-items:center;gap:6px;min-height:54px;padding:5px 6px 5px 12px;text-align:left;color:inherit;font-weight:700}
.cta-m span{flex:1;min-width:0}
.cta-m small{display:block;font-size:10.5px;font-weight:700;opacity:.85}
.cta-m b{font-size:14.5px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cta-m svg{font-size:20px}
.cta-n{flex:none;font-size:12px;font-weight:700;background:rgba(58,38,0,.14);border-radius:10px;padding:4px 8px;white-space:nowrap;color:inherit}
.cta:active{transform:translateY(2px);box-shadow:0 2px 0 var(--goldlip)}
.calm{display:flex;align-items:center;gap:8px;min-height:54px;padding:6px 12px;border-radius:16px;background:var(--soft);border:1px dashed var(--line);font-size:13px;font-weight:500;color:var(--sub);margin-bottom:3px}
.calm svg{font-size:20px;color:var(--acc)}
.care{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cb{position:relative;height:72px;border-radius:15px;background:var(--card);box-shadow:0 3px 0 var(--lip);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:700;color:var(--ink)}
.cb .ico{width:38px;height:38px;border-radius:12px;font-size:22px}
.cb:active{transform:translateY(2px);box-shadow:0 1px 0 var(--lip)}
.cb[disabled]{opacity:.45}
.cb.dot::after{content:"";position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:var(--red);border:2px solid var(--card)}

/* 頁のタブ：いちばん下に */
.tabs{flex:none;position:relative;z-index:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line)}
.tabs button{position:relative;height:50px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sub)}
.tabs button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-selected="true"]{background:var(--navon);color:var(--navonk)}
.tabs button.dot::before{content:"";position:absolute;top:3px;right:calc(50% - 21px);width:13px;height:13px;border-radius:50%;background:var(--red);border:2px solid var(--card)}

/* 頁の中身 */
.panel{position:relative;z-index:4;flex:1 1 0;min-height:0;margin-top:-18px;border-radius:20px 20px 0 0;background:var(--bg);padding:12px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.app:not(.pg) .panel{display:none}
.segbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;padding:3px;border-radius:13px;background:var(--line);margin:0 0 9px}
.segbar button{position:relative;height:34px;border-radius:10px;font-size:12.5px;font-weight:700;color:var(--sub);white-space:nowrap}
.segbar button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(20,25,70,.2)}
.segbar button.dot::after{content:"";position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.panel>.segbar{position:sticky;top:-12px;z-index:3}
.ttl{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 9px}
.ttl h1,.ttl h2{margin:0;font-family:var(--f-disp);font-weight:700;font-size:20px;line-height:1.2}
.ttl small,.lab{font-size:11.5px;font-weight:700;color:var(--sub)}
.sub{font-size:11.5px;font-weight:700;color:var(--sub);margin:12px 0 6px}
.sub:first-child{margin-top:2px}
.note{font-size:12px;font-weight:500;color:var(--sub);line-height:1.6;margin:6px 0 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.card+.card{margin-top:8px}
.gap{height:8px}
.ver{margin:14px 0 2px;text-align:center;font-size:11px;font-weight:500;color:var(--sub)}

/* 出来事 */
.ev{margin-bottom:8px;border:2px solid var(--gold)}
.ev .q{font-size:14.5px;font-weight:500;line-height:1.6;margin:0 0 8px}
.ev .lim{font-size:11.5px;color:var(--sub);margin:-4px 0 8px}
.opt{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--soft);margin-top:6px;color:var(--ink)}
.opt .on{font-weight:700;font-size:14px}
.opt .ln{display:flex;gap:6px;font-size:12px;margin-top:3px;line-height:1.5}
.opt .ln b{flex:none;font-weight:700;font-size:10.5px;padding:0 5px;border-radius:4px;height:17px;line-height:17px;margin-top:1px}
.opt .gain b{background:color-mix(in srgb,var(--hp) 22%,transparent);color:var(--ink)}
.opt .loss b{background:color-mix(in srgb,var(--red) 22%,transparent);color:var(--ink)}
.opt .odds b{background:color-mix(in srgb,var(--mp) 22%,transparent);color:var(--ink)}

/* 年代記 */
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;line-height:1.55}
.log li{padding:7px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.log li .tm{font-size:10.5px;font-weight:500;color:var(--sub);margin-right:6px}
.log li.dream,.log li.ev{border-color:var(--gold)}
.log li.ok{border-color:var(--hp)}
.log li.ng{border-color:var(--red)}
.log li.up{border-color:var(--pink)}
.log li.per{border-color:var(--mp)}
.log li.sub{color:var(--sub);margin:0;font-size:13px;font-weight:500}

/* 日課 */
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:7px}
.slot{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:0;text-align:left;color:var(--ink)}
.slot .tx{min-width:0}
.slot b{display:block;font-size:13.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot small{display:block;font-size:11px;font-weight:500;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot[aria-pressed="true"]{background:var(--sel);border:2px solid var(--gold);padding:6px 7px;color:var(--selk)}
.slot[aria-pressed="true"] small{color:var(--selk2)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 6px}
.tile{position:relative;height:74px;border-radius:15px;background:var(--card);box-shadow:0 3px 0 var(--lip);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12.5px;font-weight:700;text-align:center;color:var(--ink)}
.tile .ico{width:32px;height:32px;border-radius:11px;font-size:19px}
.tile small{font-size:10px;font-weight:500;color:var(--sub);line-height:1.1}
.tile[aria-pressed="true"]{background:var(--sel);outline:3px solid var(--gold);outline-offset:-3px;box-shadow:0 3px 0 var(--goldlip);color:var(--selk)}
.tile[aria-pressed="true"] small{color:var(--selk2)}
.tile:active{transform:translateY(2px)}
.gain{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:3px;min-height:24px;padding:1px 9px;border-radius:12px;background:var(--soft);border:1px solid var(--line);font-size:12px;font-weight:700;line-height:1.3}
.pill em{font-style:normal;color:var(--hp);letter-spacing:-1px}
.pdesc{margin:6px 0 0;font-size:12px;font-weight:500;color:var(--sub);line-height:1.5}
.dream{display:flex;align-items:center;gap:10px;margin-top:8px}
.dream .bar{height:11px;border-radius:6px;margin-top:2px}
.dream .tx{flex:1;min-width:0}
.dream>b{font-size:13px;font-weight:700;white-space:nowrap}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.picks.one{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.picks.one::-webkit-scrollbar{display:none}
.picks.one .pk{flex:none}
.pk{font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.pk[aria-pressed="true"]{background:var(--sel);border-color:var(--gold);color:var(--selk)}
.pk small{color:var(--sub);margin-left:4px;font-weight:500}

/* 持ち物：品質の縁 */
.q0{--q:#8A8FA8}.q1{--q:#6F7DA8}.q2{--q:#23A866}.q3{--q:#2F7BF0}.q4{--q:#E8A400}
.it{width:44px;height:44px;flex:none;border-radius:12px;border:3px solid var(--q,#9AA1BC);background:color-mix(in srgb,var(--q,#9AA1BC) 14%,var(--card));display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--ink)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:500;text-align:center;line-height:1.15;color:var(--ink);min-width:0}
.cell .it{width:66px;height:66px;font-size:32px;border-radius:14px}
.cell.q4 .it{box-shadow:0 0 0 2px #FFE9A8,0 3px 10px rgba(232,164,0,.5)}
.cell .nm{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell small{font-size:10px;font-weight:700;color:var(--sub)}
.tag{position:absolute;top:-3px;left:2px;height:17px;padding:0 5px;border-radius:6px;background:var(--navon);color:var(--navonk);font-size:10px;font-weight:700;display:flex;align-items:center;z-index:1}
.cnt{position:absolute;top:44px;right:6px;min-width:18px;height:17px;padding:0 4px;border-radius:6px;background:var(--navon);color:var(--navonk);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.legend{display:flex;justify-content:space-between;gap:4px;margin-top:8px;font-size:10.5px;font-weight:700;color:var(--sub)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--q);margin-right:2px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;font-size:12px;font-weight:500;color:var(--sub)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.list li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:700}
.list li .nm{flex:1;min-width:0}
.list li .nm small{display:block;color:var(--sub);font-size:11px;font-weight:500;margin-top:1px;line-height:1.4}
.list li .ct{color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap}
.list li.dim{opacity:.6}
.list.tight{gap:4px}
.list.tight li{padding:5px 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:700;padding:8px 14px;border-radius:12px;background:var(--gold);color:var(--goldk);box-shadow:0 3px 0 var(--goldlip);white-space:nowrap}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--goldlip)}
.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:10px}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--lip);border:1px solid var(--line)}
.btn[disabled]{opacity:.45;box-shadow:none}
.stock{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stock div{font-size:12.5px;font-weight:500;padding:6px 9px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:flex;justify-content:space-between;gap:4px}
.stock div em{font-style:normal;font-weight:700;color:var(--acc)}
.usel{display:flex;flex-wrap:wrap;gap:6px}
.usel .btn small{font-size:11px;margin-left:3px}
.usel .btn em{font-style:normal;font-size:11px;margin-left:4px}

/* 能力 */
.lvrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.lvrow b{font-size:20px;font-weight:700}
.lvrow span{font-size:12px;font-weight:500;color:var(--sub);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:8px;text-align:center}
.dv span{font-size:10.5px;font-weight:500;color:var(--sub);line-height:1.2}
.dv b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.pts{font-size:15px;font-weight:700;color:var(--redk)}
.statw{display:grid;grid-template-columns:172px minmax(0,1fr);gap:6px;align-items:center}
.statw svg text{fill:var(--ink);font-family:var(--f-body);font-size:13px;font-weight:700;text-anchor:middle}
.srow{display:flex;align-items:center;gap:6px;height:29px;font-weight:700;min-width:0}
.srow span{width:17px;font-size:13px}
.srow b{width:32px;font-size:16px;font-weight:700}
.srow small{flex:1;min-width:0;font-size:10px;font-weight:500;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plus{width:29px;height:27px;flex:none;border-radius:9px;background:var(--gold);box-shadow:0 2px 0 var(--goldlip);color:var(--goldk);font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.plus:active{transform:translateY(2px);box-shadow:none}
.plus.minus{background:var(--soft);box-shadow:0 2px 0 var(--line);color:var(--ink)}
.plus[disabled]{opacity:.35;box-shadow:none}
.ptsr{display:flex;align-items:center;gap:8px}
.srow b.up{color:var(--acc)}
.statw.edit{grid-template-columns:132px minmax(0,1fr)}
.statw.edit svg{width:132px;height:132px}
.statw.edit .srow small{white-space:normal;line-height:1.1}
.row2{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;align-items:center}
.sk{display:grid;grid-template-columns:4.4em minmax(0,1fr) 26px;gap:7px;align-items:center;min-height:23px;font-size:12.5px;font-weight:700}
.sk .v,.sk>span:last-child{text-align:right}
.sk .tl{font-size:10px;color:var(--acc);margin-left:2px}
.dreambox .dh{font-size:17px;font-weight:700;margin:0}
.dreambox .why{font-size:12px;color:var(--sub);margin:3px 0 7px}
.denc{display:flex;align-items:center;gap:10px}
.denc .ico{--c:#1B2150;color:#FFD966}
.denc .tx{flex:1;min-width:0}
.denc b{display:block;font-size:15px;font-weight:700}
.denc small{display:block;font-size:11.5px;font-weight:500;color:var(--sub);line-height:1.4}
.reps{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}
.reps div{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline;font-size:12.5px;font-weight:700}
.reps span{text-align:right;font-size:11px;color:var(--sub)}
.reps .bar{grid-column:1/3}

/* 系譜帳 */
.tree{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tree::before{content:"";position:absolute;left:37px;top:20px;bottom:20px;width:3px;border-radius:2px;background:var(--line)}
.gen{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.fc{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden;border:3px solid var(--line);background:var(--soft);font-family:var(--f-disp);font-size:18px;color:var(--sub)}
.gen.cur{border:2px solid var(--gold);background:var(--sel);color:var(--selk)}
.gen.cur .fc{border-color:var(--gold)}
.gen.cur small{color:var(--selk2)}
.gen .tx{flex:1;min-width:0}
.gen b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.gen small{display:block;font-size:11px;font-weight:500;color:var(--sub);line-height:1.35}
.gen p{margin:3px 0 0;font-size:12px;font-weight:500;line-height:1.5}
.seal{flex:none;width:42px;height:42px;border-radius:9px;border:2px solid var(--seal);color:var(--seal);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1;transform:rotate(-7deg)}
.nightui .seal,html.night .seal,.sheet.end .seal{color:#FF8A7E;border-color:#FF8A7E}
.hsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center;margin-top:4px}
.hsum b{font-size:20px;font-weight:700}
.hsum b small{font-size:12px}
.hsum div div{font-size:11px;font-weight:700;color:var(--sub)}
.heir{margin-top:8px;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:3px}
.heir .hh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.heir .hh b{font-size:15px;font-weight:700}
.heir .hh span{font-size:12.5px;font-weight:700;color:var(--acc)}
.heir .hp{font-size:12px;font-weight:500;color:var(--sub)}
.heir p{margin:0;font-size:12.5px;line-height:1.55}
.segbar+.heir{margin-top:0}
.jobs5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.jobs5 div{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:700}
.jobs5 span{display:flex;gap:3px}
.jobs5 i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.jobs5 i.on{background:var(--gold2)}
details.more{margin-top:10px;border-top:1px solid var(--line);padding-top:2px}
details.more>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:44px;font-size:13.5px;font-weight:700}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"›";color:var(--sub);transition:transform .2s}
details.more[open]>summary::after{transform:rotate(90deg)}
.bk{margin-top:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px 12px}
.bkh{font-size:13px;font-weight:700;color:var(--acc);margin-bottom:4px}
.bki{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:3px 0;border-top:1px dashed var(--line)}
.bki:first-of-type{border-top:0}
.bki b{font-weight:500}
.bki span{color:var(--sub);font-size:11px;text-align:right}
.bki.un b{color:var(--sub)}
.bki.boss b{color:var(--redk)}
.bki .wks{display:flex;flex-wrap:wrap;gap:2px 8px;justify-content:flex-end}
.bki .wks .un{color:var(--sub);opacity:.7}
.bki .wks .boss{color:var(--redk)}
textarea{width:100%;min-height:80px;font:12px/1.4 monospace;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px}
.restart{margin:14px 0 2px;text-align:center}
.restart .btn{min-width:180px}
.vol{flex:1;min-width:0;accent-color:var(--gold2)}

/* 板 */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(9,12,38,.55);display:flex;align-items:flex-end;justify-content:center;color:var(--ink)}
.sheet-in{width:100%;max-width:520px;max-height:calc(var(--H) * .88);overflow-y:auto;background:var(--bg);color:var(--ink);border-radius:22px 22px 0 0;padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px));animation:up .25s ease;scrollbar-width:none}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet h2{font-family:var(--f-disp);font-weight:700;font-size:20px;margin:0 0 8px;line-height:1.25}
.sheet .row{display:flex;gap:8px;margin-top:12px}
.sheet .row .btn{flex:1;min-height:48px;font-size:15px;border-radius:14px}
.sheet.full{background:var(--bg)}
.sheet.full .sheet-in{height:var(--H);max-height:none;border-radius:0;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;animation:fade .2s ease}
.sheet.bt0 .sheet-in{padding:0;overflow:hidden}

/* 探索：景色の札 */
.exh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.exh .link{padding:4px 8px 4px 0;font-size:13px}
.acs{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:none}
.ac{position:relative;flex:1 1 112px;min-height:104px;max-height:190px;border-radius:17px;overflow:hidden;background:#20264F;box-shadow:0 3px 0 var(--lip);color:#fff}
.ac canvas{position:absolute;left:0;bottom:-16%;display:block;width:100%;aspect-ratio:3/2;image-rendering:pixelated;image-rendering:crisp-edges}
.ac.now2{outline:3px solid var(--gold);outline-offset:-3px}
.ac.lock canvas{filter:grayscale(1) brightness(.5)}
.ac .sh{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 8px;background:linear-gradient(transparent,rgba(9,12,38,.88) 52%);display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.ac .sh .tx{min-width:0}
.ac b{display:block;font-weight:700;font-size:18px;line-height:1.2}
.ac small{display:block;font-size:11.5px;font-weight:500;line-height:1.35}
.pips{display:flex;gap:3px;margin-top:3px}
.pips i{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.35)}
.pips i.d{background:#FFC53D}
.acb{flex:none;display:flex;flex-direction:column;gap:5px;align-items:stretch}
.go{height:34px;padding:0 13px;border-radius:12px;background:#FFC53D;color:#3A2600;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 #D18F0C;white-space:nowrap}
.go.sub2{height:26px;font-size:11px;background:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.go[disabled]{opacity:.5}
.lk{font-size:11.5px;font-weight:700;text-align:right;max-width:170px}

/* 戦いと作業：上に場面、下に親指の届く指図 */
.bt{flex:1;display:flex;flex-direction:column;min-height:0;height:100%}
.bsc{position:relative;flex:1 1 0;min-height:0;overflow:hidden;background:#1D1A2B}
.bwrap{position:absolute;left:50%;bottom:8px;width:124%;aspect-ratio:3/2;transform:translateX(-50%)}
.bwrap.wk{aspect-ratio:2/1;transform:none;bottom:14px}
#bcv,#wcv{display:block;width:100%;height:100%;}
.top{position:absolute;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top,0px));z-index:2}
.foe{padding:7px 10px;border-radius:14px;background:rgba(10,13,40,.84);color:#fff}
.foe>div{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-weight:700;font-size:13px}
.foe>div>span:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foe b{font-size:15px;font-weight:700}
.foe .boss{font-size:10.5px;padding:1px 6px;border-radius:6px;background:#E5484D;margin-right:5px;font-weight:700}
.foe .bar{height:11px;background:rgba(255,255,255,.2);margin-top:2px}
.warn{margin-top:6px;padding:6px 10px;border-radius:12px;background:#FFC53D;color:#3A2600;font-weight:700;font-size:12.5px;line-height:1.35;text-align:center;box-shadow:0 2px 0 #D18F0C;animation:pulse 1.4s ease-in-out infinite}
.warn b{font-weight:700;text-decoration:underline}
@keyframes pulse{50%{background:#FFD976}}
#pops{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,0);font-family:var(--f-px);font-size:30px;color:#FFF;-webkit-text-stroke:1px #1B2150;paint-order:stroke;text-shadow:0 3px 0 #1B2150;animation:popup .95s ease-out forwards;white-space:nowrap}
.pop.crit{color:#FFC53D;font-size:36px}
.pop.big{color:#FF8A6A;font-size:34px}
.pop.dmg{color:#FFB0A0}
.pop.heal{color:#9AF0B0}
.pop.miss{color:#D8D8E8;font-size:16px;font-family:var(--f-body);font-weight:700}
.pop.tell{color:#FFC53D;font-size:15px;font-family:var(--f-body);font-weight:700}
.pop .cl{display:block;font-family:var(--f-body);font-size:11px;text-align:center}
@keyframes popup{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1;transform:translate(-50%,-4px)}100%{opacity:0;transform:translate(-50%,-22px)}}
.back{display:inline-flex;align-items:center;gap:2px;height:34px;padding:0 12px;border-radius:17px;background:rgba(10,13,40,.84);color:#fff;font-weight:700;font-size:12px;white-space:nowrap}
.back svg{font-size:18px;margin-left:-4px}
.btp{display:flex;justify-content:space-between;align-items:center;gap:8px}
.btp .back:last-child{min-width:0;display:block;line-height:34px;overflow:hidden;text-overflow:ellipsis}
.bpanel{position:relative;flex:none;margin-top:-18px;border-radius:20px 20px 0 0;background:var(--bg);padding:11px 12px calc(12px + env(safe-area-inset-bottom,0px));display:grid;gap:7px;max-height:66%;overflow-y:auto;scrollbar-width:none;z-index:2}
.flo{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--sub)}
.segs{display:flex;gap:3px}
.segs i{width:16px;height:5px;border-radius:3px;background:var(--line)}
.segs i.on{background:var(--gold2)}
.segs i.boss{background:var(--red)}
.bme{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:12px}
.blog{list-style:none;margin:0;padding:0 3px;font-size:12.5px;font-weight:500;line-height:1.4;min-height:2.8em;display:flex;flex-direction:column;justify-content:flex-end;color:var(--sub)}
.blog li:last-child{color:var(--ink)}
.cmds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cmd{position:relative;height:60px;border-radius:15px;background:var(--card);box-shadow:0 3px 0 var(--lip);display:flex;align-items:center;gap:8px;padding:0 10px;text-align:left;min-width:0;color:var(--ink)}
.cmd .ico{width:38px;height:38px;border-radius:12px;font-size:22px}
.cmd .tx{min-width:0}
.cmd b{display:block;font-size:15px;font-weight:700;line-height:1.15;white-space:nowrap}
.cmd small{display:block;font-size:10.5px;font-weight:500;color:var(--sub);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd.main{background:var(--gold);color:var(--goldk);box-shadow:0 4px 0 var(--goldlip)}
.cmd.main small{color:#5E4A1E}
.cmd.hot{outline:3px solid var(--red);outline-offset:-3px}
.cmd.cden{grid-column:1/-1;height:46px;background:#1B2150;color:#FFE9A8;box-shadow:0 3px 0 #0A0D28}
.cmd.cden small{color:#FFE9A8}
.cmd.cden .ico{width:32px;height:32px;font-size:18px;--c:#FFC53D;color:#3A2600}
.cmd.fin{grid-column:1/-1;height:50px;justify-content:center}
.cmd.fin b{font-size:15px}
.cmd.wide{grid-column:1/-1;height:34px;justify-content:center;background:none;box-shadow:none;color:var(--sub)}
.cmd.wide b{font-size:12.5px}
.cmd[disabled],.cmd2[disabled]{opacity:.45}
.cmd.wide[disabled]{opacity:.7}
.cmd:active{transform:translateY(2px)}
.cmdl{display:flex;flex-direction:column;gap:6px}
.cmd2{display:grid;grid-template-columns:1fr auto;gap:1px 8px;text-align:left;padding:9px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);width:100%}
.cmd2 b{font-size:14px;font-weight:700}
.cmd2 span{grid-row:2;font-size:11.5px;font-weight:500;color:var(--sub);line-height:1.35}
.cmd2 em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:12px;font-weight:700;color:var(--acc)}
.cmd2.dencmd,.examb{border:2px solid var(--gold);background:var(--sel);color:var(--selk)}
.cmd2.dencmd span,.examb span{color:var(--selk2)}
.res{text-align:center;font-family:var(--f-disp);font-weight:700;font-size:22px;color:var(--ink)}
.res.win{color:var(--acc)}
.res.lose{color:var(--redk)}
.got{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;font-size:12px;font-weight:700}
.got li{padding:2px 9px;border-radius:12px;background:var(--soft);border:1px solid var(--line);line-height:1.4}
.bpanel .row{display:flex;gap:8px}
.bpanel .row .btn{flex:1;min-height:48px;font-size:15px;border-radius:14px}

/* 作業の目盛り */
.wbars{display:grid;gap:7px}
.wr3{display:grid;grid-template-columns:52px minmax(0,1fr) 84px;gap:6px;align-items:center;font-size:12px;font-weight:700}
.wr3>:last-child{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal}
.wr3 .bar{height:11px;border-radius:6px}
.qbar{position:relative;overflow:visible}
.qbar .tk{position:absolute;top:0;bottom:0;width:2px;background:var(--sub);opacity:.7}
.qbar .need{position:absolute;top:-3px;bottom:-3px;width:3px;margin-left:-1px;border-radius:1px;background:var(--red)}
.qlab{display:grid;font-size:9.5px;font-weight:700;color:var(--sub);margin:1px 90px 0 58px}
.qlab span{white-space:nowrap;overflow:hidden;text-align:center}
.qlab span.on{color:var(--ink)}
.hbar{position:relative;height:11px;border-radius:6px;background:linear-gradient(90deg,#6FA8FF,#FFC53D 45%,#E5484D)}
.hbar .win{position:absolute;top:-2px;bottom:-2px;border:2px solid var(--ink);border-radius:5px}
.hbar .cur{position:absolute;top:-4px;width:6px;height:19px;margin-left:-3px;border-radius:3px;background:var(--ink);border:1px solid var(--card);transition:left .3s}
.ordc{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:12.5px;font-weight:700;min-width:0}
.ordc b{flex:1;min-width:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ordc span{flex:none;font-size:11.5px;color:var(--sub)}
.ordc em{flex:none;font-style:normal;font-size:12px;color:var(--redk)}
.wlast{margin:0;font-size:12.5px;font-weight:500;color:var(--sub);line-height:1.4;min-height:1.4em}
/* 作業の結果 */
.rsv{position:absolute;inset:0;z-index:6;background:radial-gradient(circle at 50% 34%,rgba(255,197,61,.5),rgba(255,197,61,0) 58%),rgba(9,12,38,.9);display:flex;flex-direction:column;align-items:center;padding:calc(36px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));color:#fff;text-align:center;animation:fade .3s ease;overflow-y:auto}
.rsv.bad{background:rgba(9,12,38,.9)}
.rsv h1{margin:0;font-family:var(--f-disp);font-weight:700;font-size:44px;line-height:1.15;color:#FFD966;text-shadow:0 3px 0 #8A5A00;animation:stampin .4s ease both}
.rsv.bad h1{color:#fff;text-shadow:none;font-size:30px}
@keyframes stampin{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:none}}
.rsv .stars{color:#FFC53D;font-size:22px;letter-spacing:3px;margin:2px 0 0}
.rsv .it{width:120px;height:120px;border-radius:26px;font-size:66px;margin:14px 0 8px;color:#fff;background:color-mix(in srgb,var(--q) 24%,transparent);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 0 30px color-mix(in srgb,var(--q) 70%,transparent)}
.rsv .nm{font-size:19px;font-weight:700}
.rsv .sb{font-size:13px;font-weight:700;margin-top:2px}
.resc{width:100%;margin-top:auto;padding:12px;border-radius:18px;background:var(--card);color:var(--ink);text-align:left;display:grid;gap:8px}
.resc .gain{margin:0}
.resc .bar{height:12px;border-radius:6px}
.resc .row{display:flex;gap:8px}
.resc .row .btn{flex:1;min-height:48px;font-size:15px;border-radius:14px}
.rkup{color:var(--redk)}

/* 一枚絵を画面いっぱいに：ながめる・話す */
.pic{position:absolute;inset:0;z-index:12;background:var(--night);overflow:hidden}
#picBg{position:absolute;left:-20px;top:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(16px) brightness(.5)}
#picImg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pic-night{position:absolute;inset:0;background:#141A48;mix-blend-mode:multiply;opacity:0;pointer-events:none;transition:opacity 1s}
.pic-back{position:absolute;inset:0;background:none;border:0;padding:0}
.pic .hud{align-items:center}
.tksay,.pictalk{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:3}
.tksay{display:block;padding:10px 14px 12px;border-radius:18px;background:var(--glass);color:var(--ink);text-align:left;font-size:15px;font-weight:500;line-height:1.5;animation:up .25s ease}
.tk-name{display:block;font-size:12px;font-weight:700;color:var(--sub)}
.tk-line{display:block}
.tksay small{display:block;margin-top:3px;font-size:11.5px;font-weight:500;color:var(--sub)}
.pictalk{left:auto;right:12px;width:auto;height:48px;padding:0 22px;border-radius:15px;background:var(--gold);color:var(--goldk);box-shadow:0 4px 0 var(--goldlip);font-size:15px;font-weight:700}

/* 一生の終わり */
.sheet.end{background:var(--bg)}
.sheet.end .sheet-in{padding-left:16px;padding-right:16px;position:relative}
.endbg{position:absolute;left:0;right:0;top:0;width:100%;aspect-ratio:3/2;opacity:.45;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.endv{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.endv .cap{margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--sub)}
.endv .por{margin-top:10px;position:relative;width:116px;height:116px;border-radius:50%;overflow:hidden;border:3px solid var(--gold);background:var(--soft)}
.endv .por canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.endv .por img{position:absolute;max-width:none}
.endv .nmt{margin-top:8px;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.endv .nmt>span:first-child{font-size:15px;font-weight:700}
.endv .ti{margin:0;font-family:var(--f-disp);font-weight:700;font-size:clamp(26px,8vw,34px);color:#FFD966;line-height:1.25}
.endv .seal{position:absolute;right:6px;top:0;width:46px;height:46px;font-size:13px;animation:stamp .5s .4s ease both}
@keyframes stamp{from{opacity:0;transform:rotate(-12deg) scale(1.6)}to{opacity:.95;transform:rotate(-12deg) scale(1)}}
.endv .tx{margin:10px 4px 0;font-size:14px;line-height:1.7}
.endv .dr{margin:5px 0 0;font-size:12.5px;font-weight:500;color:var(--sub)}
.endv .dr.done{color:#FFD966}
.endv dl{margin:12px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
.endv dl div{display:flex;flex-direction:column-reverse;gap:1px}
.endv dt{font-size:10.5px;font-weight:500;color:var(--sub)}
.endv dd{margin:0;font-size:17px;font-weight:700}
.memo{position:relative;margin-top:14px;display:flex;flex-direction:column;gap:6px}
.memo>span{font-size:11.5px;font-weight:700;color:var(--sub)}
.memo button{text-align:left;padding:9px 12px;border-radius:14px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.memo button b{font-size:14px;font-weight:700;display:flex;justify-content:space-between;width:100%}
.memo button b em{font-style:normal;font-size:12px;color:#FFD966}
.memo button span{font-size:11.5px;font-weight:500;color:var(--sub)}
.memo button[aria-pressed="true"]{border:2px solid var(--gold);padding:8px 11px}
.endfoot{position:relative;margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:8px}
.endfoot p{margin:0;text-align:center;font-size:12px;font-weight:500;color:var(--sub);line-height:1.6}
.inherit{height:56px;border-radius:15px;background:var(--seal);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 0 var(--seal2)}
.inherit i{font-style:normal;width:28px;height:28px;border:2px solid #fff;border-radius:5px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.inherit b{font-size:17px;font-weight:700}
.inherit:active{transform:translateY(2px);box-shadow:0 2px 0 var(--seal2)}

/* 稽古（ミニゲーム） */
.track{position:relative;height:52px;border-radius:14px;background:var(--card);border:1px solid var(--line);overflow:hidden;margin:14px 0 8px;touch-action:manipulation}
.zone{position:absolute;top:0;bottom:0;background:rgba(255,197,61,.35);border-left:2px solid var(--gold2);border-right:2px solid var(--gold2)}
.zone i{position:absolute;top:0;bottom:0;left:33.3%;width:33.4%;background:rgba(255,197,61,.6)}
.gcur{position:absolute;top:5px;bottom:5px;width:5px;margin-left:-2px;background:var(--ink);border-radius:3px}
.gmsg{text-align:center;font-family:var(--f-disp);font-weight:700;font-size:20px;min-height:1.6em;color:var(--acc);margin:4px 0}
.btn.big{flex:1;padding:16px;font-size:18px}
.pond{position:relative;height:130px;border-radius:14px;background:linear-gradient(#3D78B8,#24508A);overflow:hidden;margin-top:12px;touch-action:manipulation}
.pond::before{content:"";position:absolute;left:0;right:0;top:62px;height:2px;background:rgba(255,255,255,.25)}
.float{position:absolute;left:50%;top:48px;width:14px;height:24px;margin-left:-7px;border-radius:7px 7px 4px 4px;background:linear-gradient(#E05050 50%,#F2EEE0 50%);animation:bob 1.6s ease-in-out infinite}
.float.bite{animation:dip .22s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
@keyframes dip{50%{transform:translateY(14px)}}
.stars{text-align:center;font-size:24px;color:var(--gold2);letter-spacing:.2em;margin:6px 0}
.plays{display:grid;gap:8px;margin-top:8px}
.act{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:14px;background:var(--card);box-shadow:0 3px 0 var(--lip);color:var(--ink)}
.act b{display:block;font-size:14.5px;font-weight:700}
.act b small{color:var(--acc)!important;font-weight:700!important}
.act span{display:block;font-size:11.5px;font-weight:500;color:var(--sub);margin-top:2px;line-height:1.4}
.act[disabled]{opacity:.45}
.toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;background:#1B2150;color:#fff;font-size:13px;font-weight:500;padding:8px 14px;border-radius:14px;box-shadow:0 4px 14px rgba(9,12,38,.4);max-width:88%;text-align:center}

/* タイトル（いつも夜の村） */
.title{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center;overflow-y:auto;background:var(--bg);color:var(--ink);animation:fade .5s ease}
.title>*{width:100%;max-width:520px}
.t-art{position:relative;flex:none}
.t-art canvas{display:block;width:100%;aspect-ratio:3/2;}
.t-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,var(--bg) 8%,rgba(14,18,51,0))}
.title.naming .t-art{height:calc(var(--H) * .26);overflow:hidden}
.title.naming .t-art canvas{position:absolute;left:0;top:calc((var(--H) * .26 - min(var(--W),520px) * 2 / 3) * .7)}
.t-body{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px calc(16px + env(safe-area-inset-bottom,0px));margin-top:-26px}
.title.naming .t-body{margin-top:-20px}
.t-logo{position:relative;display:flex;flex-direction:column;align-items:center}
.t-tag{margin:0 0 8px;font-size:12px;font-weight:500;color:var(--sub)}
.t-name{margin:0;font-family:var(--f-disp);font-weight:700;font-size:min(46px,calc((var(--W) - 56px) / 6.6));line-height:1.15;white-space:nowrap;color:#FFD966;text-shadow:0 3px 0 #8A5A00}
.t-seal{position:absolute;right:-26px;top:-2px;width:30px;height:30px;border:2px solid var(--seal);border-radius:6px;color:#FF8A7E;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);animation:tstamp .5s .7s ease both}
@keyframes tstamp{from{opacity:0;transform:rotate(-8deg) scale(1.6)}to{opacity:1;transform:rotate(-8deg)}}
.t-rule{display:flex;align-items:center;gap:10px;margin:12px 0 0;color:var(--gold)}
.t-rule i{width:70px;height:2px;border-radius:1px;background:var(--line)}
.t-rule svg{animation:flick 2.4s ease-in-out infinite}
@keyframes flick{50%{opacity:.6;transform:scale(.92)}}
.t-lead{margin:18px 0 0;font-size:14px;font-weight:500;line-height:1.9}
.title:not(.naming) .t-lead,.t-card{margin-top:auto!important}
.t-card{width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);display:flex;flex-direction:column;align-items:center;gap:2px}
.t-house{font-size:12px;font-weight:700;color:var(--sub)}
.t-card b{font-size:22px;font-weight:700}
.t-meta{font-size:12px;font-weight:500;color:var(--sub)}
.t-acts{margin-top:auto;padding-top:20px;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.t-go{width:100%;min-height:58px;border-radius:16px;background:var(--gold);color:var(--goldk);box-shadow:0 4px 0 var(--goldlip);font-weight:700;font-size:18px}
.t-go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--goldlip)}
.t-go[disabled]{opacity:.4;box-shadow:none}
.t-back{font-size:13px;font-weight:500;color:var(--sub);padding:8px 14px}
.t-ver{margin:10px 0 0;font-size:11px;font-weight:500;color:var(--sub)}
.t-h{margin:0;font-family:var(--f-disp);font-weight:700;font-size:24px;color:#FFD966}
.t-input{margin:18px 0 0;width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.t-input input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font-family:var(--f-body);font-weight:700;font-size:24px;text-align:center;padding:0 0 0 38px}
.t-input input::placeholder{color:var(--sub);opacity:.6}
.t-input .num{flex:none;width:38px;text-align:right;font-size:12px;font-weight:500;color:var(--sub)}
.t-input .num.over{color:var(--red)}
.t-snd{position:absolute;z-index:1;right:12px;top:calc(12px + env(safe-area-inset-top,0px));font-size:12px;font-weight:700;color:#fff;padding:6px 11px;border-radius:14px;background:rgba(10,13,40,.7)}
.t-dice{margin-top:12px;font-size:13px;font-weight:700;color:var(--ink);padding:7px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
/* 名づけ：家の名と初代の名の二つの欄（375×667 でも収まるよう、間を詰める） */
.title.naming .t-lead{margin-top:6px;line-height:1.6}
.t-cap{margin:14px 0 0;font-size:12px;font-weight:700;color:var(--sub)}
.t-cap+.t-input,.t-cap+.t-sex,.t-sex+.t-input{margin-top:6px}
.t-input.hs input{padding-left:62px}
.t-input .suf{flex:none;font-size:18px;font-weight:700;color:var(--sub);margin-left:-6px}
.t-dices{display:flex;gap:8px;justify-content:center}
.title.naming .t-acts{padding-top:12px}
.t-sex{display:flex;gap:8px;margin:14px auto 0;justify-content:center}
.t-sex button{min-width:104px;padding:9px 16px;border-radius:13px;border:1px solid var(--line);background:var(--card);color:var(--sub);font-weight:700;font-size:15px}
.t-sex button[aria-checked="true"]{border:2px solid var(--gold);padding:8px 15px;color:var(--ink)}

/* 始まりのロゴ（Legendcog）。index.html にはじめから置き、ui.js の splashOff が絵の読めた時から1秒で薄れさせて外す */
.splash{position:fixed;inset:0;z-index:60;background:#14110E;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease}
.splash img{width:min(78%,360px);height:auto;animation:fade .25s ease both}
.splash.out{opacity:0;pointer-events:none}

/* 縦向きに固める：端末で固められないブラウザで、スマホが横になったら（ui.js が html に rot と rl / rr を付ける）
   ページ全体を逆に回して、縦のまま見せる。rl は端末を左に倒したとき（上が左）、rr は右に倒したとき */
html.rot{--H:100dvw;--W:100dvh}
html.rot body{position:fixed;left:0;top:0;width:100dvh;height:100dvw;overflow:hidden;transform-origin:0 0}
html.rot.rl body{top:100dvh;transform:rotate(-90deg)}
html.rot.rr body{left:100dvw;transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* 開発用（?dev=1 か #dev のときだけ出る） */
.dev{position:fixed;left:50%;top:0;transform:translateX(-50%);z-index:40;display:flex;gap:2px}
.dev button{font-size:10px;padding:1px 5px;border-radius:6px;background:#3A2F5A;border:1px solid #6A5AA0;color:#fff}

/* ホーム画面への追加の手順 */
.steps{margin:12px 0 0;padding:0 0 0 1.6em;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.55}
.steps li::marker{color:var(--acc);font-weight:700}

/* 作業の板・依頼 */
.areas{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.area{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px}
.area.lock{opacity:.6}
.area .ah{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.area .ah b{font-weight:700;font-size:15px}
.area .ah span{font-size:11.5px;font-weight:500;color:var(--sub)}
.area .cmdl{margin-top:6px}
.area .cmd2{background:var(--soft)}
.area .examb{background:var(--sel);margin-top:6px}
.jobs{margin:4px 0 8px}
.rank{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 8px;margin:6px 0 4px}
.rank b{font-size:30px;font-weight:700;line-height:1}
.rank>span{font-size:12px;font-weight:500;color:var(--sub);margin-right:6px}
.rank .bar{margin-top:3px}
.quests li{align-items:flex-start}
.quests li .bar{margin:5px 0 2px}
.quests li.ready{border:2px solid var(--gold)}
.ords{margin:8px 0 2px;padding:9px 12px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.ordh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}
.ordh b{font-weight:700}
.ordh span{font-size:11.5px;font-weight:500;color:var(--sub)}
.ord{display:grid;grid-template-columns:1fr auto;gap:1px 8px;align-items:center;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.ord p{margin:0;font-size:12.5px;font-weight:500;line-height:1.45}
.ord p b{font-weight:500;font-size:11px;color:var(--sub);margin-right:6px}
.ord span{grid-row:2;font-size:11px;font-weight:700;color:var(--acc)}
.ord .btn{grid-row:1/3;grid-column:2;min-width:0;padding:4px 10px}
.ordw{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)}

/* 年ごろの節目・姿を選ぶ（一枚絵の上に字。いつも藍） */
.sheet.grow .sheet-in,.sheet.pick .sheet-in{position:relative;padding:0;overflow:hidden;justify-content:flex-end}
.gr-pic{position:absolute;inset:0;overflow:hidden;background:var(--bg);animation:grow-in 1.4s ease both}
.gr-pic img{position:absolute;max-width:none}
.gr-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,18,51,.5) 0,transparent 16%,transparent 52%,rgba(14,18,51,.88) 78%,var(--bg) 100%);pointer-events:none}
@keyframes grow-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.gr-txt{position:relative;padding:0 18px calc(16px + env(safe-area-inset-bottom,0px));text-align:center;animation:up .6s ease .7s both;pointer-events:none}
.gr-txt .row{pointer-events:auto}
.gr-who{font-size:12px;font-weight:700;color:var(--acc)}
.gr-txt h2{font-size:28px;margin:4px 0 8px;color:#FFD966}
.gr-txt p{margin:0;font-size:14px;font-weight:500;line-height:1.6}
.gr-txt .gr-sub{margin-top:5px;font-size:12px;color:var(--sub)}
.pk-pic{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.pk-pic img{position:absolute;left:50%;top:0;height:calc(100% - var(--pkh,330px) + 70px);width:auto;max-width:none;transform:translateX(-50%)}
.pk-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,18,51,.35) 0,transparent 12%,transparent calc(100% - var(--pkh,330px) - 10px),var(--bg) calc(100% - var(--pkh,330px) + 70px));pointer-events:none}
.pk-txt{position:relative;padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));text-align:center}
.pk-txt h2{font-size:21px;margin:2px 0}
.pk-sel{margin:0 0 6px;font-size:15px;font-weight:700;min-height:22px}
.pk-sel em{font-style:normal;font-size:11px;color:var(--acc);margin-left:8px}
.pk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 auto 6px;max-width:360px}
.pk-i{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 0 3px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.pk-i canvas{width:44px;height:44px;image-rendering:pixelated}
.pk-i small{font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap}
.pk-i.rec{border-color:var(--gold2)}
.pk-i.on{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.pk-txt .gr-sub{margin:2px 0 6px;font-size:12px;color:var(--sub)}
.pk-txt .row{justify-content:center;margin-top:6px}

/* 伝承の技・縁談・養子・幼いころの板 */
.den,.wed,.adopt,.young{display:flex;flex-direction:column;gap:8px;text-align:center}
.den h2,.wed h2,.adopt h2,.young h2{font-size:20px;margin:2px 0 4px}
.den .note,.wed .note,.adopt .note,.young .note{text-align:left;margin:2px 0 0}
.den .row,.wed .row,.adopt .row,.young .row{justify-content:center;margin-top:4px}
.dn,.ad{display:flex;flex-direction:column;gap:2px;text-align:left;padding:11px 13px;border-radius:15px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.dn b{font-size:16px;font-weight:700}
.dn b small{font-size:11px;color:var(--sub);margin-left:8px;font-weight:500}
.dn span{font-size:12.5px;font-weight:500;line-height:1.5}
.dn .dn-k{font-size:11px;font-weight:700;color:var(--sub)}
.dn.on,.ad.on{border:2px solid var(--gold);padding:10px 12px;background:var(--sel);color:var(--selk)}
.dn[disabled]{opacity:.45}
.wed .q{font-size:14.5px;font-weight:500;line-height:1.6;margin:0 0 2px}
.wed .opt{margin-top:0}
.ad .ad-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ad .ad-h b{font-size:16px;font-weight:700}
.ad .ad-h small{font-size:11.5px;font-weight:500;color:var(--sub)}
.ad .ad-d{font-size:13px;font-weight:700;color:var(--acc)}
.sheet.adoptsh .sheet-in{justify-content:center}

/* 一枚絵のまばたき（閉じた目の小さな絵を重ねる）と、モザイクからほどける出かた（ui.js の blinkNow・mosaicIn）。
   ほかの img の決まりが当たらないよう、強めに打ち消す */
img.blk.blk{position:absolute;inset:auto;max-width:none;transform:none;object-fit:fill;animation:none;pointer-events:none;display:none;filter:none}
img.blk.blk.on{display:block}
canvas.mosaic{position:absolute;pointer-events:none;image-rendering:pixelated}
.bt{position:relative}
.cmd.main .ico{color:#FFC53D}
.sheet.den,.sheet.young{flex-direction:row;gap:0;align-items:flex-end}
@media (max-height:700px){ .tile{height:70px} .tile .ico{width:30px;height:30px;font-size:18px} }

/* 家系図（古い代を上に、一本の幹。右に連れ合い） */
.ft{list-style:none;margin:0;padding:0 0 4px}
.ft-n{position:relative}
.ft-n:not(:last-child)::before{content:"";position:absolute;left:25px;top:30px;bottom:-30px;border-left:3px solid var(--gold2)}
.ft-n.adp::before{border-left-style:dashed}
.ft-r{position:relative;display:flex;align-items:center;gap:6px;padding:3px 0}
.ft .fc{z-index:1}
.ft .fc img.bust,.fam .fc img.bust{inset:0;width:100%;height:100%;image-rendering:pixelated}
.ft-m,.ft-s{display:flex;align-items:center;gap:8px;text-align:left;min-width:0;background:none;color:inherit}
.ft-m{flex:1}
.ft-m .tx,.ft-s .tx,.ft-r>.tx{min-width:0}
.ft b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.ft small{display:block;font-size:11px;font-weight:500;color:var(--sub);line-height:1.3}
.ft small.t em{margin-left:5px;padding:0 3px;border:1px solid var(--seal);border-radius:3px;font-size:10px;font-style:normal;color:var(--seal)}
.ft small.n{color:var(--red);font-weight:700}
.ft-s{flex:none;max-width:42%;gap:5px}
.ft-s i{font-style:normal;font-size:13px;font-weight:700;color:var(--gold2)}
.ft-s b{font-size:13px}
.fc.sm{width:36px;height:36px;border-width:2px;font-size:12px}
.ft-n.cur .ft-m .fc{border-color:var(--gold)}
.ft-n.cur .ft-m b{color:var(--acc)}
.ft-l{margin:0 0 0 60px;padding:0 0 5px;font-size:11px;font-weight:700;color:var(--gold2)}
.ft-n.nx .fc{border-style:dashed;color:var(--sub)}
.fam{display:flex;flex-direction:column;gap:8px}
.fam-h{display:flex;align-items:center;gap:12px}
.fam-h .fc{width:80px;height:80px;font-size:24px}
.fam-h .tx{flex:1;min-width:0}
.fam-h h2{margin:2px 0;font-size:22px}
.fam-h b{font-size:14px;font-weight:700;color:var(--acc)}
.fam-t{margin:0;font-size:13.5px;font-weight:500;line-height:1.6}
.fam dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px}
.fam dl>div{display:contents}
.fam dt{color:var(--sub);font-weight:700}
.fam dd{margin:0;font-weight:500}
.fam .row{justify-content:center;margin-top:4px}
/* 村の普請 */
.tw{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.twc{display:flex;flex-direction:column;gap:2px;padding:7px 9px;border-radius:13px;background:var(--card);border:1px solid var(--line);min-width:0}
.twc b{font-size:14px;font-weight:700}
.twc small{font-size:11px;font-weight:500;color:var(--sub);line-height:1.3}
.twc small.c{color:var(--ink)}
.twc em{margin-top:auto;font-size:10.5px;font-style:normal;font-weight:700;color:var(--gold2)}
.twc.on{border-color:var(--gold)}
.twc .btn{margin-top:auto;min-width:0;width:100%;padding:3px 6px;font-size:11.5px}
/* 帰ってきたときの報告 */
.aw .aw-say{margin:4px 0 6px;font-size:19px;font-weight:700;color:#FFD966;line-height:1.4}
.aw-got{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.aw-got li{padding:2px 9px;border-radius:99px;background:rgba(255,255,255,.12);font-size:11.5px;font-weight:500}
.aw-gift{display:inline-flex;align-items:baseline;gap:8px;margin-top:8px;padding:5px 13px;border-radius:12px;background:rgba(255,197,61,.16);border:1px solid rgba(255,197,61,.5)}
.aw-gift small{font-size:11px;font-weight:500;color:var(--sub)}
.aw-gift b{font-size:14px;font-weight:700;color:#FFD966}
/* 宿敵 */
.nemc{display:flex;align-items:center;gap:8px;margin:0 0 7px;padding:7px 10px;border-radius:13px;background:var(--card);border:2px solid var(--red)}
.nemc .tx{flex:1;min-width:0}
.nemc b{display:block;font-size:15px;font-weight:700}
.nemc small{display:block;font-size:11px;font-weight:500;color:var(--sub);line-height:1.35}
.nemc small.k{font-weight:700;color:var(--red)}
.nemc small.r{font-weight:700;color:var(--gold2)}
.nemc .go{flex:none}
.gr-txt .nem-seal{position:relative;display:flex;margin:0 auto 6px;width:50px;height:50px;font-size:12px;animation:stamp .5s .9s ease both}
/* 花嫁姿に舞う花びら */
.petal{position:absolute;top:-12px;width:8px;height:8px;border-radius:70% 10% 70% 10%;background:#FFD6E4;opacity:.85;z-index:1;animation:petal 6s linear infinite}
@keyframes petal{from{transform:translate(0,0) rotate(0)}to{transform:translate(-40px,calc(var(--H,100vh) + 20px)) rotate(420deg)}}
@media (prefers-reduced-motion:reduce){.petal{display:none}}
.sheet.wedp .gr-pic::after{background:linear-gradient(to bottom,transparent 66%,rgba(14,18,51,.82) 82%,var(--bg) 100%)}
.sheet.wedp .gr-txt h2{font-size:24px;margin:2px 0 4px}

/* ===== Ver0.758：アルバム・手紙・縁談の三人・人々・暦 ===== */
#panel[data-tab="house"] .segbar{grid-auto-columns:auto}
#panel[data-tab="house"] .segbar button{font-size:12px;padding:0 2px}
.pk-i.nw::after{content:"未";position:absolute;top:2px;left:2px;min-width:16px;height:16px;line-height:16px;border-radius:8px;background:var(--gold2);color:#3A2A08;font-size:10px;font-weight:700;text-align:center}
.pk-i{position:relative}
.ab-top{padding:8px 12px}
.ab-top .lvrow b small{font-size:12px;color:var(--sub);margin-left:2px}
.ab-sex{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.ab-sex .pk{height:32px;font-size:13px;font-weight:700}
.ab-h{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0;border-radius:9px}
.ab-h.on{background:var(--sel)}
.ab-h small{font-size:9.5px;color:var(--sub);font-weight:700}
.ab-hs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 2px}
.ab-h .fc{width:40px;height:40px}
.ab-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.ab-p{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.ab-p img,.ab-p i{display:block;width:100%;aspect-ratio:864/1512;border-radius:7px;object-fit:cover;background:var(--line)}
.ab-p i{display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--sub);font-weight:700}
.ab-p small{font-size:9.5px;color:var(--sub);font-weight:700;white-space:nowrap}
.sheet.lettersh{justify-content:center}
.letter{display:flex;flex-direction:column;gap:10px}
.lt-h{display:flex;align-items:center;gap:10px}
.lt-h .fc{width:60px;height:60px;flex:none}
.lt-h .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.lt-h small{font-size:11.5px;color:var(--sub);font-weight:700}
.lt-h b{font-size:16px}
.lt-b{padding:12px 14px;border-radius:14px;background:#F7EFDC;color:#3E3020;border:1px solid #D8C8A4}
.lt-b p{margin:0 0 7px;font-size:14px;font-weight:500;line-height:1.75}
.lt-b p:last-child{margin-bottom:0}
.letter .row{justify-content:center}
.letter .aw-gift{margin:0}
.wm{display:flex;align-items:center;gap:10px;text-align:left;padding:7px 10px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.wm.on{border:2px solid var(--gold);padding:6px 9px;background:var(--sel);color:var(--selk)}
.wm .fc{width:50px;height:50px;flex:none}
.wm .tx{display:flex;flex-direction:column;min-width:0}
.wm b{font-size:15px}
.wm b em{margin-left:6px;font-style:normal;font-size:10.5px;padding:1px 6px;border-radius:8px;background:var(--pink);color:#fff}
.wm small{font-size:11.5px;font-weight:500;line-height:1.35}
.wed .opt{cursor:default}
.flk{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;margin-bottom:6px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.flk .fc{width:58px;height:58px;flex:none}
.flk .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.flk b{font-size:15px}
.flk small{font-size:11.5px;font-weight:500;color:var(--sub)}
.flk em{flex:none;font-style:normal;font-size:11px;font-weight:700;color:var(--acc)}
.blh>div{display:flex;justify-content:space-between;gap:8px;padding:2px 0;font-size:12.5px}
.blh b{font-weight:700}
.blh span{color:var(--sub);font-size:11.5px;text-align:right}
.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-bottom:6px}
.cal>div{display:flex;flex-direction:column;align-items:center;padding:4px 1px;border-radius:9px;background:var(--line);min-width:0}
.cal>div.on{background:var(--card)}
.cal>div.now{outline:2px solid var(--gold)}
.cal small{font-size:9.5px;color:var(--sub);font-weight:700}
.cal b{font-size:11px;white-space:nowrap}
.festc{display:flex;align-items:center;gap:8px;padding:7px 10px;margin-bottom:6px;border-radius:13px;background:var(--card);border:1px solid var(--gold)}
.festc .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.festc b{font-size:14px}
.festc small{font-size:11.5px;color:var(--sub);font-weight:500}
.heir .hf{margin:2px 0 0;font-size:11.5px;opacity:.85}

/* ===== Ver0.759：HP を大きく・満腹を出す ===== */
.needs{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.needs .nl b{font-size:12.5px}
.bme .nl b{font-size:19px;line-height:1.1}
.bme .nl span{font-size:12px}
.body2{display:grid;grid-template-columns:1.25fr 1fr;gap:6px}
.body2>div{padding:7px 11px 9px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:0}
.body2 span{display:block;font-size:12px;font-weight:700;color:var(--sub)}
.body2 b{display:block;font-size:30px;font-weight:800;line-height:1.1;color:var(--ink);white-space:nowrap}
.body2 b small{font-size:14px;font-weight:700;color:var(--sub);margin-left:2px}
.body2 .bar{margin-top:4px}

/* ===== Ver0.760：武具屋の上に装備と攻撃力・防御力 ===== */
.body2.eq2{grid-template-columns:repeat(2,minmax(0,1fr));position:sticky;top:28px;z-index:2;margin:0 -12px;padding:0 12px 6px;background:var(--bg)}
.body2 .eqv{display:block;width:100%;padding:7px 11px 8px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:0;text-align:left;color:var(--ink);box-shadow:0 2px 6px rgba(20,25,70,.18)}
.eq2 .eqv small{display:block;font-size:11px;font-weight:500;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Ver0.761：装備中の枠の色 ===== */
.body2>.eqh{grid-column:1/-1;font-size:11.5px;font-weight:700;color:var(--sub);padding:2px 0 0;background:none;border:0;border-radius:0}
/* Ver0.762：金の枠をやめ、項目そのものを薄い黄色に。昼も夜も同じ色なので、字の色も札の中で決める */
.body2 button.eqv,.list li.eqon{background:var(--eq);border-color:var(--eql);color:var(--eqk)}
.body2 button.eqv b,.list li.eqon .ct{color:var(--eqk)}
.body2 button.eqv span,.body2 button.eqv small,.list li.eqon .nm small{color:var(--eqk2)}
.list li.eqon .nm em{margin-left:6px;padding:1px 7px;border-radius:9px;background:var(--gold);color:#3A2A08;font-style:normal;font-size:10.5px;font-weight:700;vertical-align:1px}

/* ===== Ver0.763：探索・依頼の「戻る」と作業の「やめる」を上に、はっきり ===== */
/* 板の上の余白（ふつうの板16px・全面の板14px）まで覆う。上の余白の分だけ top を負にしないと、すき間に中身が見える */
.exh{position:sticky;top:-16px;z-index:6;flex:none;margin:-16px -14px 6px;padding:16px 14px 8px;background:var(--bg)}
.sheet.full .exh{top:-14px;margin-top:-14px;padding-top:14px}
.exh .backb{flex:none;min-height:40px;padding:6px 14px 6px 8px;font-size:14px}
.exh .lab{font-size:12px}
.exh h2{flex:1;min-width:0;margin:0}

/* ===== Ver0.765：武器と防具のタブ・地の切り替え ===== */
.segbar.gt{margin:0 0 8px}
.segbar.gt button{height:30px}
.list li .nm small+small{margin-top:0}

/* ===== Ver0.765：家の店・分家・村の危機 ===== */
.shp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.shp .tx{display:block;min-width:0}
.shp .lab{display:block}
.shp b{display:block;font-size:26px;font-weight:800;line-height:1.1;color:var(--ink)}
.shp b small{font-size:13px;font-weight:700;color:var(--sub);margin-left:2px}
.shtr{margin:6px 0 0}
.shtr b{color:var(--acc)}
.list li .nm .shn{margin-left:6px;font-style:normal;font-size:12px;color:var(--sub)}
.list li.shpe{justify-content:center;background:none;border-style:dashed}
.list li.shpe .btn{width:100%}
.shl{list-style:none;margin:0;padding:0;font-size:11.5px;font-weight:500;color:var(--sub);line-height:1.5}
.shl span{margin-right:6px;font-weight:700}
.shq{display:flex;flex-direction:column;gap:8px}
.shq>b{font-size:16px;font-weight:700}
.shq-n{display:flex;align-items:center;gap:8px}
.shq-n span{min-width:62px;text-align:center;font-size:18px;font-weight:800}
.shq-n small{font-size:12px;color:var(--sub)}
.flk.brn{align-items:center}
.flk.brn .btn{flex:none}
.ad .ad-b{font-size:11.5px;font-weight:500;color:var(--sub)}
.crb{display:block;width:100%;margin:0 0 8px;padding:8px 12px;border-radius:13px;text-align:left;background:var(--red);color:#fff}
.crb b{display:block;font-size:14px;font-weight:700}
.crb small{font-size:11.5px;font-weight:500}
.twc.hurt{border-color:var(--red)}

/* ===== Ver0.766：銘は品の名のあとに ===== */
small.mei{color:var(--acc)!important;font-weight:700!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.body2 button.eqv small.mei{color:var(--eqk)!important}
.meih{display:block;margin-top:2px;font-size:13px;font-weight:700;color:var(--acc)}

/* ===== Ver0.767：祖霊の試練 ===== */
.cmd.cden.half{grid-column:auto;padding-left:6px;padding-right:6px}
.cmd.cden.half b{font-size:13px}
.trb{display:block;width:100%;margin:0 0 8px}
.trc{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px;border-radius:15px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.trc .tx{flex:1;min-width:0}
.trc .tx b{display:block;font-size:15px;font-weight:700}
.trc .tx small{display:block;font-size:11px;font-weight:500;color:var(--sub);line-height:1.4}
.trc .tg{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.trc .tg small{font-size:10.5px;color:var(--sub);white-space:nowrap}
.trc em{flex:none;font-style:normal;font-size:12px;font-weight:700;color:var(--acc)}
.den .fc{align-self:center}

/* ===== Ver0.768：隠居・村の大会・子の旅 ===== */
.keepc{display:block;width:100%;aspect-ratio:3/2;border-radius:14px;object-fit:fill}
.keepb .fam-t{text-align:center}
.shr{display:flex;align-items:center;gap:10px;text-align:left;padding:7px 11px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13px}
.shr b{flex:none;width:32px}
.shr span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shr em{flex:none;font-style:normal;font-weight:700}
.shr.me{background:var(--eq);border-color:var(--eql);color:var(--eqk)}
.dng{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.dng .dn{padding:8px 10px}
.dng .dn b{font-size:13px;line-height:1.3}
.dng .dn span{font-size:11px}
.trl{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}

/* ===== Ver0.771：村の暦の札（ようすの場面の左上） ===== */
.festb{position:absolute;left:10px;top:calc(82px + env(safe-area-inset-top,0px));z-index:3;display:flex;align-items:center;gap:6px;max-width:220px;padding:5px 12px 5px 8px;border-radius:14px;background:var(--glass);color:var(--ink);text-align:left;box-shadow:0 2px 8px rgba(20,25,70,.2);border:2px solid transparent}
.festb .i{flex:none;width:18px;height:18px;color:var(--gold2)}
.festb .tx{min-width:0}
.festb b{display:block;font-size:13px;font-weight:700;line-height:1.25}
.festb small{display:block;font-size:10.5px;font-weight:500;color:var(--sub);line-height:1.25}
.festb.on{border-color:var(--gold)}
.app.pg .festb{display:none}
.shr span small{display:block;font-size:11px;color:var(--sub);white-space:normal}
.shr.me span small{color:var(--eqk2)}
.young .shr b{width:44px}
.calw{display:flex;flex-direction:column;gap:3px}
.calw .shr{padding:3px 10px}

/* ===== Ver0.777：作業の一覧の「やめる」は画面の下に固定 ===== */
.exf{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));z-index:6;margin:10px -14px calc(-18px - env(safe-area-inset-bottom,0px));padding:8px 14px calc(18px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
.exf .btn{width:100%;min-height:48px;font-size:15px;border-radius:14px}

/* 子のおねだり・家の格（Ver0.782） */
.ask .askf{width:64px;height:64px;margin:0 auto 6px}
.ask h2{font-size:18px;line-height:1.5}
.hrk{display:flex;gap:8px;margin:0 0 8px}
.hrk-b{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:7px 12px;border-radius:14px;border:1px solid var(--gold);background:var(--card);color:var(--ink);text-align:left}
.hrk-b b{font-size:16px;font-weight:700;line-height:1.25}
.hrk-b small{font-size:11px;font-weight:500;color:var(--sub)}
.hrk-c{flex:none;width:86px;padding:6px 8px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:12px;font-weight:700;line-height:1.35}
.hrk-d{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin:6px 0 8px}
.hrk-d div{display:flex;justify-content:space-between;font-size:13px;border-bottom:1px dashed var(--line);padding:2px 0}
.hrk-d dt{color:var(--sub)}.hrk-d dd{margin:0;font-weight:700}
.hrk-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hrk-l li{padding:4px 10px;border-radius:10px;border:1px solid var(--line);opacity:.6;text-align:left;line-height:1.4}
.hrk-l li.on{opacity:1;border-color:var(--gold)}
.hrk-l b{display:inline;font-size:14px;margin-right:6px}.hrk-l small{font-size:11px;color:var(--sub);line-height:1.4}
.hrk-up{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 6px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font-weight:800;font-size:20px;animation:stampin .5s .2s ease both}
/* 一代の絵（Ver0.782） */
.cardv .cardp{display:block;width:100%;max-height:calc(var(--H) * .58);object-fit:contain;margin:6px 0 8px;border-radius:8px;min-height:120px}
.cardend{display:block;margin:10px auto 0;padding:7px 16px;border-radius:12px;border:1px solid rgba(226,184,92,.6);color:#F2D06A;font-size:13px;font-weight:700;background:rgba(10,13,40,.5)}
/* 縁談の板を一画面に（名家の相手が加わると四人。Ver0.782） */
.wed .wm{padding:4px 10px;gap:8px}
.wed .wm .fc{width:42px;height:42px}
.wed .wm small{font-size:11px;line-height:1.3}
.wed .opt .ln{font-size:12px;line-height:1.45}
.wed .row:last-child .btn{min-height:36px;padding-top:4px;padding-bottom:4px}
.wed .note{margin:4px 0;font-size:11.5px}
.wed.four .wm .fc{width:36px;height:36px}
.wed.four .wm{padding:3px 10px}
.wed.four .wm b{font-size:14px}

/* ===== Ver0.783：稀なる結末（見送りの板・最後の場面） ===== */
.endg{margin:6px 0 2px;padding:8px 12px 9px;border-radius:14px;background:var(--soft);border:1px solid var(--gold2);text-align:center}
.endg small{display:block;font-size:11px;color:var(--sub);line-height:1.4}
.endg small em{font-style:normal;font-weight:700;color:var(--acc)}
.endg b{display:block;font-size:16px;font-weight:800;color:var(--acc);margin:1px 0 3px}
.endg p{margin:0;font-size:12.5px;line-height:1.6;text-align:left}
.keepe .keepc{width:80%;margin:0 auto}

/* ===== Ver0.784：子の日記 ===== */
.dial{list-style:none;margin:2px 0 0;padding:0;text-align:left}
.dial li{padding:5px 2px 6px;border-bottom:1px dashed var(--line);font-size:13px;line-height:1.55}
.dial small{display:block;font-size:11px;color:var(--sub);line-height:1.35}
.diab{margin-top:8px;width:100%;padding:7px 13px;flex-direction:row;align-items:center;gap:10px}
.diab b{font-size:14px;flex:none}
.diab span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sub)}

/* 預け入れと引継ぎ（Ver0.786。ui.js の cloudBox・cloudCmd） */
.cbtn{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cwhy{color:var(--redk);font-size:13px;line-height:1.5}
.xcode{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline;margin:12px 0;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.xcode span{font-size:12px;color:var(--sub)}
.xcode b{font:400 26px/1.2 var(--f-px);letter-spacing:.12em;user-select:all;-webkit-user-select:all}
.cin-l{display:block;font-size:12px;color:var(--sub);margin-top:8px}
.cin{display:block;width:100%;margin:4px 0 2px;padding:10px 12px;font:400 22px/1.2 var(--f-px);letter-spacing:.12em;text-align:center;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;text-transform:uppercase}
.cin::placeholder{color:var(--sub);opacity:.5;letter-spacing:.04em}
.cio{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px}
.cio .note{flex:1;margin:0}