/* はこにわ観光諸島 — 画面の見た目（試作 v0.1 から引き継ぎ）。
   Layout: スマホ縦持ちの一画面アプリ。上に島の状態、中央に箱庭マップ（原作と同じ半マスずれの四角いマス）、下にタブ。
   PCでは中央に560px幅のカラム。見出しと数字はドット風のDotGothic16（箱庭のCGI時代への目くばせ）、本文は丸ゴシック。 */
:root {
  --bg: #e9f3f1;        /* 潮だまりの淡い青緑 */
  --surface: #ffffff;
  --surface-2: #dcebe8;
  --ink: #14313d;       /* 深い海のインク */
  --ink-2: #4d6871;
  --line: #c3d8d4;
  --accent: #d83f69;    /* ハイビスカス */
  --accent-ink: #ffffff;
  --gold: #b8860b;
  --good: #23855a; --warn: #b86e00; --bad: #c4372c;
  --t-sea: #3a8cc2; --t-shallow: #79c4d6; --t-waste: #cdb88e; --t-plains: #a9d17c; --t-sand: #f1dda2;
  --t-forest: #4e9849; --t-mountain: #8f8d81; --t-town: #ece4d1; --t-dmg: #5b4b46;
  --f-display: 'DotGothic16', 'Osaka-Mono', 'MS Gothic', monospace;
  --f-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  --r: 10px;
  --sil-filter: none;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0d1c22; --surface: #142830; --surface-2: #1b343d; --ink: #e2f0ee; --ink-2: #9db7bc; --line: #2b4750;
  --accent: #ff6d92; --accent-ink: #1a0b10; --gold: #e5b33e; --good: #4cc48a; --warn: #f0a640; --bad: #ff7468;
  --t-sea: #1f5b82; --t-shallow: #2d7b90; --t-waste: #806f50; --t-plains: #5e8a42; --t-sand: #a7935c;
  --t-forest: #2f6b33; --t-mountain: #5e5d56; --t-town: #77705f; --t-dmg: #3a2e2b; --sil-filter: invert(1); color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #0d1c22; --surface: #142830; --surface-2: #1b343d; --ink: #e2f0ee; --ink-2: #9db7bc; --line: #2b4750;
  --accent: #ff6d92; --accent-ink: #1a0b10; --gold: #e5b33e; --good: #4cc48a; --warn: #f0a640; --bad: #ff7468;
  --t-sea: #1f5b82; --t-shallow: #2d7b90; --t-waste: #806f50; --t-plains: #5e8a42; --t-sand: #a7935c;
  --t-forest: #2f6b33; --t-mountain: #5e5d56; --t-town: #77705f; --t-dmg: #3a2e2b; --sil-filter: invert(1); color-scheme: dark;
}
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14px; line-height: 1.55; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.app { max-width: 560px; margin: 0 auto; padding-inline: 16px; padding-block: 8px 84px; display: flex; flex-direction: column; gap: 10px; }
.num, .disp { font-family: var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* 上部：島の状態 */
.top { display: grid; gap: 8px; }
.title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.island-name { font-family: var(--f-display); font-size: 20px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rank { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--bg); white-space: nowrap; }
.wx { margin-left: auto; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.stamina { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.stamina .lbl { font-size: 12px; color: var(--ink-2); }
.bar { height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .3s; }
.stamina .val { font-size: 16px; }
.stamina small { font-size: 11px; color: var(--ink-2); font-family: var(--f-body); }
.res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.res div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; min-width: 0; }
.res dt { font-size: 11px; color: var(--ink-2); }
.res dd { margin: 0; font-family: var(--f-display); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* マップ */
.map-wrap { background: color-mix(in srgb, var(--t-sea) 82%, #000); border-radius: var(--r); padding: 8px 6px; position: relative; }
.map { display: grid; gap: 2px; container-type: inline-size; --tile: calc((100cqw - 23px) / 12.5); }
.row { display: flex; gap: 2px; }
.row.odd { padding-left: calc(var(--tile) / 2 + 1px); }
.tile { width: var(--tile); height: var(--tile); border-radius: 4px; border: 0; padding: 0; position: relative; display: grid; place-items: center; font-size: calc(var(--tile) * .6); line-height: 1; cursor: pointer; }
.tile .lv { position: absolute; right: 1px; bottom: 0; font-family: var(--f-display); font-size: 9px; color: var(--ink); background: color-mix(in srgb, var(--surface) 80%, transparent); border-radius: 3px; padding: 0 2px; }
.tile.sel { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 2; }
.t-sea { background: var(--t-sea); } .t-shallow { background: var(--t-shallow); } .t-waste { background: var(--t-waste); }
.t-plains { background: var(--t-plains); } .t-sand { background: var(--t-sand); } .t-forest { background: var(--t-forest); }
.t-mountain { background: var(--t-mountain); } .t-town { background: var(--t-town); }
.tile.dmg::after { content: ''; position: absolute; inset: 0; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--t-dmg) 0 3px, transparent 3px 7px); opacity: .75; }
/* 地図の絵（art/map/・32×32）。タイル・施設・効果を重ね、ドットはくっきり */
.tile > img.tl, .tile > img.fc, .tile > img.fx { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: crisp-edges; image-rendering: pixelated; pointer-events: none; border-radius: inherit; }
.tile > img.tl { z-index: 0; } .tile > img.fc { z-index: 1; } .tile > img.fx { z-index: 2; }
.tile .lv { z-index: 2; }
.tile.sel-art { outline: none; }
/* 絵のタイルがあるときは、すき間なく並べる（本家の箱庭のように）。角も丸めない */
.map-wrap.has-art[style] { background-repeat: repeat; background-size: calc((100% - 12px) / 12.5) auto; background-position: 6px 8px; image-rendering: crisp-edges; image-rendering: pixelated; }
.map-wrap.has-art .map, .map-wrap.has-art .row { gap: 0; }
.map-wrap.has-art .map { --tile: calc(100cqw / 12.5); }
.map-wrap.has-art .row.odd { padding-left: calc(var(--tile) / 2); }
.map-wrap.has-art .tile, .map-wrap.has-art .tile.dmg::after { border-radius: 0; }
.px-ic { width: 32px; height: 32px; display: block; margin: auto; image-rendering: crisp-edges; image-rendering: pixelated; }
.swatch.art img { width: 10px; height: 10px; display: block; border-radius: 2px; image-rendering: crisp-edges; image-rendering: pixelated; }
.tile .wild { position: absolute; inset: -6px; display: grid; place-items: center; z-index: 3; animation: bob 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes bob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tile .wild { animation: none; } .bar > i { transition: none; } }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--ink-2); }

/* 操作 */
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: center; font-weight: 700; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn small { display: block; font-weight: 400; font-size: 11px; opacity: .85; }
.alert { border-radius: var(--r); padding: 10px; display: grid; gap: 8px; background: var(--surface); border: 2px solid var(--accent); }
.alert-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.alert .approach + .sub { margin: 0; }
.alert h3 { margin: 0; font-size: 15px; }
.alert p { margin: 2px 0 8px; font-size: 12px; color: var(--ink-2); }
.hint { font-size: 13px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.hint b { color: var(--accent); }

/* 観光レポート */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; }
.panel h2 { font-family: var(--f-display); font-size: 15px; margin: 0; font-weight: 400; text-wrap: balance; }
.meters { display: grid; gap: 6px; }
.meter { display: grid; grid-template-columns: 4.5em 1fr 4.5em; gap: 8px; align-items: center; font-size: 12px; }
.meter .bar { height: 10px; }
.meter .bar > i { background: var(--ink-2); }
.meter.lim .bar > i { background: var(--accent); }
.meter.lim span:first-child { color: var(--accent); font-weight: 700; }
.meter span:last-child { text-align: right; font-family: var(--f-display); }
.kv { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.kv b { color: var(--ink); font-family: var(--f-display); font-weight: 400; }
.queue { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; background: var(--surface-2); border-radius: 999px; padding: 2px 4px 2px 10px; display: inline-flex; gap: 4px; align-items: center; }
.chip button { border: 0; background: transparent; cursor: pointer; padding: 0 6px; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; max-height: 220px; overflow-y: auto; }
.log li { display: grid; grid-template-columns: 3.6em 1fr; gap: 6px; }
.log .t { color: var(--ink-2); font-family: var(--f-display); }
.log .k-good { color: var(--good); } .log .k-bad { color: var(--bad); } .log .k-warn { color: var(--warn); } .log .k-chinju { color: var(--accent); font-weight: 700; } .log .k-act { font-weight: 500; }

/* 珍獣 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px; display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 0; }
.card.on { border-color: var(--accent); }
.card h3 { margin: 0; font-size: 14px; }
.card .meta { font-size: 11px; color: var(--ink-2); }
.card .row-btn { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.cards.mini { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.card.mini { padding: 6px 4px; gap: 2px; }
.card.mini h3 { font-size: 12px; }
.idle-panel { display: grid; gap: 4px; }
.idle-panel .lbl { font-size: 12px; color: var(--ink-2); }
.idle-panel .seg { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; }
.idle-panel .seg button { padding: 8px 4px; font-size: 12px; }
.idle-panel .sub { margin: 0; }
.trace { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 6px; font-size: 12px; }
.trace .bar > i { background: var(--gold); }
.letters { display: grid; }
.letter { border-top: 1px solid var(--line); padding-block: 8px; display: grid; gap: 6px; }
.letter:first-child { border-top: 0; padding-top: 2px; }
.letter p { margin: 0; font-size: 13px; }
.letter .row-btn { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.letter .row-btn button { font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: left; }
.letter .row-btn button small { display: block; font-size: 10px; color: var(--ink-2); }
.letter .row-btn button:disabled { opacity: .55; cursor: not-allowed; }
.alert .mood { margin: 4px 0; font-size: 13px; }
.approach { display: grid; gap: 6px; }
.approach .btn { display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; padding: 8px 10px; }
.approach .btn small { grid-column: 1 / -1; }
.approach .btn b { font-size: 16px; }
.approach .btn.fit { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sub-h { font-size: 13px; margin: 12px 0 6px; color: var(--ink-2); font-weight: 500; }
.projects { display: grid; gap: 0; }
.proj { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding-block: 8px; border-top: 1px solid var(--line); }
.proj > div { display: grid; gap: 2px; min-width: 0; }
.proj .sub, .proj .meta { font-size: 11px; margin: 0; color: var(--ink-2); }
.panel > .btn { width: 100%; }
.proj.done b { color: var(--good); }
.done-tag { font-size: 12px; color: var(--good); white-space: nowrap; }
.btn.small { padding: 6px 10px; font-size: 13px; min-height: 0; }
.card .row-btn button { font-size: 11px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.stars { color: var(--gold); letter-spacing: -1px; font-size: 12px; }
.shiny-tag { font-size: 10px; color: var(--accent-ink); background: var(--accent); border-radius: 4px; padding: 0 4px; }
.sil { color: var(--ink-2); opacity: .35; }
/* 珍獣のドット絵（art.js）。48 の整数倍のときはドットをくっきり、影は形だけの絵を色テーマに合わせる */
img.art { display: block; }
img.art.crisp { image-rendering: crisp-edges; image-rendering: pixelated; }
img.art.sil { filter: var(--sil-filter); opacity: .3; }
img.art.r4 { filter: drop-shadow(0 0 3px rgb(255 196 60 / .55)); }
img.art.r5 { filter: drop-shadow(0 0 5px rgb(255 196 60 / .8)); }
img.art.shiny { filter: hue-rotate(150deg) saturate(1.25); }
img.art.shiny.r4 { filter: hue-rotate(150deg) saturate(1.25) drop-shadow(0 0 3px rgb(255 196 60 / .55)); }
img.art.shiny.r5 { filter: hue-rotate(150deg) saturate(1.25) drop-shadow(0 0 5px rgb(255 196 60 / .8)); }
.art-shiny { position: relative; display: inline-block; flex: none; }
.art-shiny .sparkle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.dex .card { padding: 6px; }
.dex .no { font-family: var(--f-display); font-size: 11px; color: var(--ink-2); }
.dex .cond { font-size: 10px; color: var(--ink-2); line-height: 1.35; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; padding: 6px 12px; background: var(--surface); cursor: pointer; font-size: 12px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.badge { border: 1px dashed var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.badge.got { border-style: solid; border-color: var(--gold); }
table.ranks { width: 100%; border-collapse: collapse; font-size: 12px; }
table.ranks td, table.ranks th { border-bottom: 1px solid var(--line); padding: 4px; text-align: left; }
table.ranks .now { color: var(--accent); font-weight: 700; }

/* タブ */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); z-index: 20; }
.tabs nav { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.tabs button { border: 0; background: transparent; padding: 8px 0 10px; cursor: pointer; font-size: 11px; display: grid; justify-items: center; gap: 2px; color: var(--ink-2); }
.tabs button .ic { font-family: var(--f-display); font-size: 16px; }
.tabs button[aria-current="page"] { color: var(--accent); font-weight: 700; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* シートとモーダル */
.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 30; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--surface); border-radius: 16px 16px 0 0; max-height: 78vh; overflow-y: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px rgb(0 0 0 / .18); }
.sheet-inner { max-width: 560px; margin: 0 auto; display: grid; gap: 10px; }
.sheet header { display: flex; align-items: center; gap: 8px; }
.sheet header h2 { margin: 0; font-size: 16px; font-family: var(--f-display); font-weight: 400; }
.sheet header .x { margin-left: auto; border: 0; background: var(--surface-2); border-radius: 999px; width: 32px; height: 32px; cursor: pointer; }
.acts { display: grid; gap: 6px; }
.act { display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); cursor: pointer; }
.act .ic { font-size: 20px; text-align: center; }
.act .nm { font-weight: 700; }
.act .ef { display: block; font-size: 11px; color: var(--ink-2); font-weight: 400; }
.act .cost { font-family: var(--f-display); font-size: 13px; white-space: nowrap; }
.act:disabled { opacity: .5; cursor: not-allowed; }
.act .why { display: block; font-size: 11px; color: var(--bad); }
.sub { font-size: 12px; color: var(--ink-2); margin: 4px 0 0; }
.modal { position: fixed; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 380px); background: var(--surface); border-radius: 16px; padding: 18px; display: grid; gap: 10px; justify-items: center; text-align: center; box-shadow: 0 10px 40px rgb(0 0 0 / .3); }
.modal h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 20px; }
.modal dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; text-align: left; font-size: 12px; margin: 0; }
.modal dt { color: var(--ink-2); }
.modal dd { margin: 0; }
.toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-size: 13px; z-index: 50; max-width: 90vw; text-align: center; }
.proto { font-size: 11px; color: var(--ink-2); text-align: center; }
.beta { display: inline-block; font-family: var(--f-body, inherit); font-size: .55em; font-weight: 700; line-height: 1; padding: .3em .5em; border-radius: 999px; background: var(--accent); color: var(--accent-ink); vertical-align: .35em; letter-spacing: .04em; }
input[type="text"] { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }

/* ───────── 本番で足したもの ───────── */
/* 島テーマ（地図の色と、art/map/tiles/<テーマ>/ の地形の絵を変える。点数には関わらない）。テーマは決まった色の世界なので、明暗どちらの画面でも同じ色 */
.map-wrap.theme-wafu { background: #1d3a57; --t-sea: #264c73; --t-shallow: #4a7fa6; --t-waste: #c2a878; --t-plains: #9cb86a; --t-sand: #e8d7a8; --t-forest: #3d6b3a; --t-mountain: #7d7464; --t-town: #efe6d2; --t-dmg: #4a3b36; }
.map-wrap.theme-yakei { background: #071222; --t-sea: #0f2440; --t-shallow: #1e3d63; --t-waste: #4b4339; --t-plains: #34503a; --t-sand: #6d6247; --t-forest: #1f3a28; --t-mountain: #45434d; --t-town: #c9a54a; --t-dmg: #2a1f1d; }
.map-wrap.theme-yakei .t-town { box-shadow: 0 0 8px 1px rgb(255 214 120 / .55); }
.map-wrap.theme-retro { background: #1018a0; --t-sea: #2848e8; --t-shallow: #58a0f0; --t-waste: #c8b078; --t-plains: #78c850; --t-sand: #f8e8a8; --t-forest: #208020; --t-mountain: #a0a0a0; --t-town: #f0d8a0; --t-dmg: #503030; }
.map-wrap.theme-retro .tile, .map-wrap.theme-retro .tile.dmg::after { border-radius: 0; }
.map-wrap.theme-wafu .tile .lv, .map-wrap.theme-yakei .tile .lv, .map-wrap.theme-retro .tile .lv { color: #14313d; background: rgb(255 255 255 / .8); }
.tryon { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.tryon b { color: var(--accent); }
.tryon .grow { flex: 1 1 auto; min-width: 0; }

/* おためし中のお知らせ */
.guest-note { display: flex; gap: 8px; align-items: center; font-size: 12px; background: var(--surface); border: 1px dashed var(--accent); border-radius: 8px; padding: 6px 10px; }
.guest-note span { flex: 1 1 auto; min-width: 0; }
.guest-note button { flex: none; }

/* ショップ */
.products { display: grid; gap: 0; }
.prod { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding-block: 10px; border-top: 1px solid var(--line); }
.prod:first-child { border-top: 0; padding-top: 2px; }
.prod > div { display: grid; gap: 2px; min-width: 0; }
.prod .price { font-family: var(--f-display); font-size: 15px; }
.prod .acts-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.swatch { display: inline-grid; grid-template-columns: repeat(4, 10px); gap: 2px; vertical-align: middle; margin-right: 6px; }
.swatch i { width: 10px; height: 10px; border-radius: 2px; display: block; }
.owned { font-size: 12px; color: var(--good); white-space: nowrap; }
.stock { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); }
.stock b { color: var(--ink); font-family: var(--f-display); font-weight: 400; }
.note-test { font-size: 11px; color: var(--warn); }

/* フォーム */
.form { display: grid; gap: 8px; }
.form label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); }
input[type="password"] { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; box-sizing: border-box; }
.form .err { color: var(--bad); font-size: 12px; margin: 0; }
.choices { display: grid; gap: 6px; width: 100%; }
.linkish { border: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 4px; font-size: 13px; }
.welcome { max-width: 560px; margin: 0 auto; padding: 32px 16px; display: grid; gap: 14px; text-align: center; justify-items: center; }
.welcome h1 { font-family: var(--f-display); font-weight: 400; font-size: 26px; margin: 0; }
.welcome p { margin: 0; color: var(--ink-2); max-width: 30em; }
.welcome .btn { width: min(100%, 320px); }
.busy { opacity: .7; pointer-events: none; }

/* アカウントの細かい操作 */
details { border-top: 1px solid var(--line); padding-top: 8px; }
details > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
details[open] > summary { margin-bottom: 8px; }
details.danger > summary { color: var(--bad); }
.code-box { font-family: var(--f-display); font-size: 20px; letter-spacing: .08em; background: var(--surface-2); border-radius: 8px; padding: 10px 14px; margin: 0; user-select: all; word-break: break-all; }
.legal-links { font-size: 11px; color: var(--ink-2); text-align: center; margin: 8px 0 0; }
.legal-links a { color: inherit; }
.row-btn { display: flex; gap: 6px; flex-wrap: wrap; }

/* 公開ページ（利用規約など） */
.legal-page { max-width: 720px; margin: 0 auto; padding-inline: 16px; padding-block: 24px 48px; display: grid; gap: 14px; line-height: 1.75; }
.legal-page h1 { font-family: var(--f-display); font-weight: 400; font-size: 22px; margin: 0; text-wrap: balance; }
.legal-page h2 { font-size: 16px; margin: 12px 0 0; }
.legal-page p, .legal-page li { font-size: 14px; }
.legal-page ol, .legal-page ul { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
.legal-page .meta { font-size: 12px; color: var(--ink-2); }
.legal-page a { color: var(--accent); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; }
.legal-table th { width: 11em; color: var(--ink-2); font-weight: 500; }
@media (max-width: 560px) { .legal-table th, .legal-table td { display: block; width: auto; } .legal-table th { border-bottom: 0; padding-bottom: 0; } }