/*
* 色は役割の名前で持つ。
*
* 暗い方が既定。 が付くと明るい方に入れ替わる。
* 直書きの色を足さないこと ── 片方だけ直って、もう片方が壊れる。
*/
:root {
--radius: 10px;
--mono: ui-monospace, "Consolas", "SF Mono", "Menlo", monospace;
/* 面 */
--bg: #0d0f12;
--bg2: #14181d;
--panel: #191e25;
--panel2: #1f252d;
--well: #0a0c0f; /* コード・ダイス欄。一番深いところ */
/* 線 */
--line: #2b333d;
--line2: #3a444f;
/* 字 */
--ink: #d9dde3;
--ink2: #a4adba; /* 本文の次に強い字 */
--dim: #8b95a3;
--faint: #7e8895; /* 一番おとなしい字。ここより薄くすると読めない */
/* 緑。成功、いまここ */
--accent: #7fc4a8;
--accent-line: #2c4a3e;
--accent-bg: #0d1b14;
--accent-deep: #3d6b46;
--accent-soft: #9fd8a8;
--on-accent: #0d1a15; /* 緑の上に載る字 */
/* 金。銘、遺物、注意 */
--accent2: #c9a86a;
--gold-line: #4a3f2c;
--gold-bg: #1a1710;
--gold-deep: #6b5f3d;
--gold-soft: #e8d3a4;
/* 赤。失敗、危険 */
--danger: #d4736b;
--danger-line: #4a2f2c;
--danger-bg: #1b0f0d;
--danger-deep: #6b3d3d;
--danger-soft: #f0b0aa;
/* 青。効き目の札 */
--info: #9fd0ff;
--info-line: #2c3d4a;
--crit: #8fd6a5;
--fumble: #e0736b;
--pl-bg: #1c2530; /* PLの発言 */
/* 品の等級。白の上では薄くなるので、明るい方で取り直している */
--r-quest: #d4a06b;
--r-uncommon: #7fc4a8;
--r-rare: #6ba8d4;
--r-epic: #b48fd6;
--r-legendary: #d6b45a;
--r-quest-line: #6b4f33;
--r-rare-line: #2b415a;
--r-epic-line: #43325a;
--r-legendary-line: #5a4a1e;
--food: #8fb96a;
--food-line: #3a4a2c;
/* 神話に触れたもの */
--mythos: #d08fc0;
--mythos-bg: #2a1f33;
--mythos-line: #574070;
--mythos-soft: #d8c2ff;
--overlay: #000000c4; /* 小窓の後ろ */
--stripe: #ffffff05; /* 表の縞 */
--shadow: 0 8px 30px #0009;
}
/*
* 明るい方。
*
* 真っ白にすると眩しいので、古い紙のような温かい白にしている。
* 緑と金は、白の上だと薄く見えるぶん、暗く取り直してある。
*/
:root[data-theme="light"] {
--bg: #f4f2ed;
--bg2: #eae7e0;
--panel: #fffefb;
--panel2: #f4f1ea;
--well: #ece8e0;
--line: #dcd7cc;
--line2: #bdb6a8;
--ink: #23262b;
--ink2: #4c525b;
--dim: #6c727c;
--faint: #6f767f;
--accent: #2c7a5c;
--accent-line: #a8cfbc;
--accent-bg: #e6f2ec;
--accent-deep: #2c7a5c;
--accent-soft: #1f5c44;
--on-accent: #ffffff;
--accent2: #8a6a24;
--gold-line: #ddcfa8;
--gold-bg: #f7f0dd;
--gold-deep: #8a6a24;
--gold-soft: #6b5218;
--danger: #b4423a;
--danger-line: #e6bdb8;
--danger-bg: #fbeceb;
--danger-deep: #b4423a;
--danger-soft: #8f2f28;
--info: #245e8f;
--info-line: #bcd4e6;
--crit: #1f7a4d;
--fumble: #b4423a;
--pl-bg: #eef2f6;
--r-quest: #9a6a2c;
--r-uncommon: #2c7a5c;
--r-rare: #245e8f;
--r-epic: #6a3f96;
--r-legendary: #8a6a24;
--r-quest-line: #d9c3a0;
--r-rare-line: #b5c9dd;
--r-epic-line: #cdbde0;
--r-legendary-line: #ddcda0;
--food: #4a7526;
--food-line: #cadcb4;
--mythos: #8a3f77;
--mythos-bg: #f3ecf7;
--mythos-line: #cfbcdd;
--mythos-soft: #5c2f74;
--overlay: #2b2721b0;
--stripe: #00000006;
--shadow: 0 6px 24px #4a423218;
}
* { box-sizing: border-box; }
/* display:flex 等が [hidden] に勝ってしまうのを防ぐ */
[hidden] { display: none !important; }
/*
* 横のはみ出しは html だけで止める。
*
* body にも overflow-x を付けると body 自身がスクロールの箱になり、
* その中の position:sticky が「箱の上端」に貼りついてしまう。
* 箱ごと流れていくので、上の帯が画面から消える。
*/
html { max-width: 100%; overflow-x: hidden; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
background: var(--bg);
color: var(--ink);
font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
font-size: 15px;
line-height: 1.75;
-webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
/* 銀の鍵。看板と、立ち絵のない枠に置く */
.key-mark { display: inline-block; vertical-align: middle; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
/* ===== トップバー ===== */
.topbar {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 18px;
background: linear-gradient(180deg, var(--bg2), var(--bg));
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 50;
}
.brand {
display: flex; align-items: center; gap: 9px;
background: none; border: 0; color: var(--ink); padding: 4px; letter-spacing: .04em;
}
.brand em { font-style: normal; color: var(--accent2); }
.sigil { color: var(--accent2); font-size: 20px; }
.topnav { display: flex; gap: 4px; align-items: center; }
.topnav > button, .usermenu > button {
background: transparent; border: 1px solid transparent; color: var(--dim);
padding: 6px 12px; border-radius: var(--radius); white-space: nowrap;
}
.topnav > button:hover, .usermenu > button:hover { color: var(--ink); border-color: var(--line); background: var(--panel); }
.topnav > button[aria-current="page"] { color: var(--accent); border-color: var(--line); }
.usermenu { position: relative; }
.usermenu-pop {
position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 60;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
padding: 6px; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.usermenu-pop button {
background: none; border: 0; color: var(--ink); text-align: left; padding: 8px 12px; border-radius: 6px;
}
.usermenu-pop button:hover { background: var(--panel2); }
.danger-text { color: var(--danger) !important; }
@media (max-width: 900px) {
/* 横に並びきらないナビは、押せなくなるのではなく横に流す。
ユーザーメニューだけは流さず、右端に留めておく（ログアウトに辿り着けなくなるため） */
.brand-text { display: none; }
.topbar { padding: 8px 10px; gap: 8px; }
.topnav {
flex: 1 1 auto; min-width: 0;
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav > button { padding: 8px 10px; font-size: 14px; flex: 0 0 auto; }
.usermenu { position: static; flex: 0 0 auto; }
.usermenu-pop { right: 10px; }
}
@media (max-width: 640px) {
.app { padding: 18px 12px 90px; }
/* iOSは16px未満の入力に近づくと画面を勝手に拡大する。それを止める */
input, select, textarea { font-size: 16px; }
/* 指で押せる大きさを確保する */
button { min-height: 40px; }
button.mini { min-height: 34px; padding: 6px 10px; }
.row > * { flex: 1 1 100%; }
.row > .fixed { flex: 1 1 auto; }
h1 { font-size: 20px; }
.modal { padding: 16px 14px; }
.item-chip { grid-template-columns: 48px 1fr; }
.skill-row, .skill-head { font-size: 13px; }
}
/* ===== レイアウト ===== */
.app { max-width: 1180px; margin: 0 auto; padding: 22px 18px 80px; }
.app.narrow { max-width: 460px; padding-top: 8vh; }
h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: .04em; }
h2 { font-size: 17px; margin: 26px 0 10px; letter-spacing: .03em; border-left: 3px solid var(--accent2); padding-left: 10px; }
h3 { font-size: 15px; margin: 16px 0 6px; color: var(--accent); }
.sub { color: var(--dim); font-size: 13px; margin: 0 0 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.card.flush { padding: 12px 16px; }
.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 150px; }
.row > .fixed { flex: 0 0 auto; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
button.primary { background: var(--accent); color: var(--on-accent); border: none; padding: 9px 18px; border-radius: var(--radius); font-weight: 700; }
button.primary:hover:not(:disabled) { filter: brightness(1.1); }
button.primary:disabled, button.ghost:disabled { opacity: .4; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); padding: 8px 16px; border-radius: var(--radius); }
button.ghost:hover:not(:disabled) { color: var(--ink); background: var(--panel2); }
button.danger { background: transparent; color: var(--danger); border: 1px solid var(--danger-line); padding: 6px 12px; border-radius: var(--radius); }
button.small { padding: 4px 10px; font-size: 13px; }
button.block { width: 100%; }
label { display: block; color: var(--dim); font-size: 13px; margin-bottom: 10px; }
input[type=text], input[type=number], input[type=password], input[type=email], select, textarea {
width: 100%; margin-top: 4px;
background: var(--bg2); color: var(--ink);
border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px #7fc4a833; }
textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
small { display: block; color: var(--faint); font-size: 12px; margin-top: 4px; line-height: 1.5; }
code { font-family: var(--mono); background: var(--well); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.checkline { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.checkline input { width: auto; margin: 0; }
.empty { color: var(--dim); text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
.hint { color: var(--faint); font-size: 12px; }
.err-banner { border-color: var(--danger); color: var(--danger-soft); background: var(--danger-bg); }
/* ===== バッジ・バー ===== */
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); vertical-align: middle; }
.badge + .badge, .pc-name .badge { margin-left: 6px; }
.badge.ok { color: var(--accent); border-color: var(--accent-line); }
.badge.lost { color: var(--danger); border-color: var(--danger-line); }
.badge.tag { color: var(--accent2); border-color: var(--gold-line); margin: 0 4px 4px 0; }
.badge.live { color: var(--accent); border-color: var(--accent-line); }
.badge.busy { color: var(--accent2); border-color: var(--gold-line); }
/* 卓を探す（募集の掲示） */
.sec-head { font-size: 15px; color: var(--dim); border: 0; padding: 0; margin: 22px 0 10px; }
.board-title { font-weight: 600; font-size: 15px; }
.board-notice { margin-top: 8px; font-size: 13px; color: var(--ink2); white-space: pre-wrap; }
/* 賽を振る札。振る人にはボタンが、他の人には様子だけが見える */
.throw-wrap {
position: fixed; inset: 0; z-index: 90;
display: flex; align-items: center; justify-content: center;
background: var(--overlay); backdrop-filter: blur(2px);
animation: throw-in .18s ease-out;
}
@keyframes throw-in { from { opacity: 0 } to { opacity: 1 } }
.throw-card {
background: var(--panel); border: 1px solid var(--line2); border-radius: 14px;
padding: 26px 30px; text-align: center; min-width: 280px; box-shadow: var(--shadow);
}
.throw-ask { font-size: 17px; font-weight: 600; letter-spacing: .02em; }
.throw-who { color: var(--dim); font-size: 12px; margin-top: 4px; }
.die {
width: 108px; height: 108px; margin: 20px auto 18px;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--line2); border-radius: 16px; background: var(--bg2);
font-family: var(--mono); font-size: 42px; color: var(--ink);
transition: border-color .2s, color .2s, transform .2s;
}
.die.tumbling { animation: die-roll .16s linear infinite; color: var(--faint); }
@keyframes die-roll {
0% { transform: rotate(-6deg) translateY(0) }
50% { transform: rotate(6deg) translateY(-5px) }
100% { transform: rotate(-6deg) translateY(0) }
}
.die.ok { border-color: var(--accent-line); color: var(--accent); }
.die.ng { border-color: var(--danger-line); color: var(--danger); }
.die.crit { border-color: var(--crit); color: var(--crit); box-shadow: 0 0 26px #8fd6a555; }
.die.fum { border-color: var(--fumble); color: var(--fumble); box-shadow: 0 0 26px #e0736b55; }
.throw-foot { min-height: 42px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.throw-foot button { width: 100%; padding: 11px; font-size: 15px; }
.throw-wait { color: var(--dim); font-size: 13px; }
.throw-result { font-size: 16px; font-weight: 600; }
.throw-result.ok { color: var(--accent); }
.throw-result.ng { color: var(--danger); }
.throw-detail { color: var(--faint); font-size: 12px; font-family: var(--mono); }
/* 卓のあと、一緒に遊んだ人へ */
.mate-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mate-row:last-child { border-bottom: 0; }
.mate-kudos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mate-done { margin-top: 6px; font-size: 12px; color: var(--accent); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--faint); margin-right: 6px; }
.dot.on { background: var(--accent); box-shadow: 0 0 6px #7fc4a8aa; }
.bar { height: 6px; background: var(--well); border-radius: 99px; overflow: hidden; margin-top: 3px; }
.bar > i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.bar.hp > i { background: #c96a63; }
.bar.mp > i { background: #6a8fc9; }
.bar.san > i { background: #b58fd0; }
/* ===== 探索者 ===== */
.pc-card { position: relative; cursor: pointer; transition: border-color .15s; }
.pc-card:hover { border-color: var(--accent); }
.pc-card.lost { opacity: .55; }
.pc-name { font-size: 17px; font-weight: 700; }
.pc-occ { color: var(--dim); font-size: 13px; margin-bottom: 8px; }
.pc-stats { display: flex; gap: 14px; font-family: var(--mono); font-size: 13px; flex-wrap: wrap; }
.pc-stats > div { flex: 1 1 80px; }
.param-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.param { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; text-align: center; }
.param b { display: block; color: var(--accent2); font-size: 12px; letter-spacing: .1em; }
.param .v { font-size: 26px; font-family: var(--mono); line-height: 1.2; }
.param .r { color: var(--faint); font-size: 11px; font-family: var(--mono); }
.derived { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.derived b { color: var(--ink); }
/* ===== 技能割り振り ===== */
.pt-bar {
position: sticky; top: 58px; z-index: 20;
background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius);
padding: 10px 14px; margin-bottom: 12px;
display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-family: var(--mono); font-size: 14px;
}
.pt-bar .neg { color: var(--danger); }
.skill-row, .skill-head { display: grid; grid-template-columns: 1fr 46px 62px 62px 52px; gap: 8px; align-items: center; }
.skill-row { padding: 3px 6px; border-radius: 6px; }
.skill-row:nth-child(odd) { background: var(--stripe); }
.skill-row.rec { background: #7fc4a812; }
.skill-row .nm { font-size: 13px; }
.skill-row .nm .star { color: var(--accent2); }
.skill-row .base, .skill-row .tot { font-family: var(--mono); font-size: 13px; text-align: right; color: var(--dim); }
.skill-row .tot { color: var(--ink); font-weight: 700; }
.skill-row input { margin: 0; padding: 3px 6px; text-align: right; font-family: var(--mono); }
.skill-head { font-size: 11px; color: var(--faint); padding: 0 6px 4px; }
/* ===== シナリオ ===== */
.sc-card { cursor: pointer; transition: border-color .15s; display: flex; flex-direction: column; }
.sc-card:hover { border-color: var(--accent2); }
.sc-card.dim { opacity: .45; }
.sc-title { font-weight: 700; font-size: 15px; line-height: 1.5; }
.sc-meta { color: var(--dim); font-size: 12px; font-family: var(--mono); margin: 6px 0; }
.sc-sum { color: var(--ink2); font-size: 13px; max-height: 6.4em; overflow: hidden; white-space: pre-wrap; line-height: 1.6; }
.sc-tags { margin-top: 8px; }
/* 一覧の表紙。文字を読む前に、どんな話か伝わる */
.sc-card.has-cover { padding-top: 0; overflow: hidden; }
.sc-cover { margin: 0 -16px 12px; height: 132px; overflow: hidden; background: var(--bg2); }
.sc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; }
.sc-card.has-cover:hover .sc-cover img { opacity: 1; }
/* 誰の持ち込みか。作者名が分からないと、人のシナリオは選びづらい */
.sc-by { font-size: 12px; color: var(--dim); margin: 2px 0 4px; }
.sc-lock { color: var(--accent2); }
.lock-box { margin: 12px 0; border-color: var(--accent2); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters > * { flex: 0 1 auto; }
.filters label { margin: 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--dim); padding: 8px 15px; white-space: nowrap; }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
/* ===== 部屋・プレイ ===== */
.play { display: grid; grid-template-columns: 1fr 310px; gap: 16px; align-items: start; }
@media (max-width: 940px) {
.play { grid-template-columns: 1fr; }
.side { position: static !important; }
/*
* 縦に積むと、書き込む欄が画面の外へ出てしまう。
* 一番よく使う操作に手が届かないのは致命的なので、
* 卓の枠ごと画面の高さに収めて、**流れる文章だけ**を中でスクロールさせる。
* dvh を使うのは、スマホのアドレスバーが伸び縮みするため。
*/
.chat { min-height: 0; height: calc(100dvh - 132px); }
.chat-scroll { max-height: none; }
}
.chat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-height: 62vh; display: flex; flex-direction: column; }
.chat-scroll { flex: 1 1 auto; min-height: 0; max-height: 68vh; overflow-y: auto; padding: 14px 16px; scroll-behavior: smooth; }
.msg { margin-bottom: 18px; }
.msg .who { font-size: 11px; letter-spacing: .12em; color: var(--dim); margin-bottom: 4px; }
.msg.kp .who { color: var(--accent2); }
.msg .body { white-space: pre-wrap; word-break: break-word; }
.msg.pl .body { background: var(--pl-bg); border-left: 2px solid var(--accent); padding: 8px 12px; border-radius: 0 8px 8px 0; }
.msg.pl.mine .body { border-left-color: var(--accent2); background: var(--gold-bg); }
.msg.pl .who b { color: var(--ink); }
.msg.ooc .body { border-left-style: dashed; opacity: .8; font-size: 14px; }
.msg.sys { color: var(--dim); font-size: 13px; text-align: center; border-top: 1px dashed var(--line); padding-top: 10px; }
.diceline { font-family: var(--mono); font-size: 13px; background: var(--well); border: 1px solid var(--line); border-left: 3px solid var(--dim); border-radius: 6px; padding: 7px 11px; margin: 8px 0; }
.diceline .lb { color: var(--accent2); }
.diceline .rs { font-weight: 700; margin-left: 8px; }
.diceline .why { color: var(--faint); font-size: 12px; }
.diceline.ok { border-left-color: var(--accent); }
.diceline.ng { border-left-color: var(--danger); }
.diceline.crit { border-left-color: var(--crit); background: var(--accent-bg); }
.diceline.fum { border-left-color: var(--fumble); background: var(--danger-bg); }
.diceline .rs.ok { color: var(--accent); }
.diceline .rs.ng { color: var(--danger); }
.errline { color: var(--danger-soft); background: var(--danger-bg); border: 1px solid var(--danger); border-radius: 8px; font-size: 13px; padding: 8px 12px; margin: 8px 0; }
.warnline { color: var(--gold-soft); background: var(--gold-bg); border: 1px solid var(--accent2); border-radius: 8px; font-size: 13px; padding: 8px 12px; margin: 8px 0; }
.scene-img { margin: 14px 0; padding: 0; }
.scene-img img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.scene-img figcaption { color: var(--dim); font-size: 12.5px; margin-top: 6px; max-width: 640px; }
.img-skeleton {
width: 100%; max-width: 640px; aspect-ratio: 3/2;
border: 1px dashed var(--line); border-radius: 8px;
background: linear-gradient(100deg, var(--bg2) 30%, var(--panel2) 50%, var(--bg2) 70%);
background-size: 300% 100%; animation: shimmer 1.8s linear infinite;
display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 13px;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.composer { border-top: 1px solid var(--line); padding: 10px 12px; background: var(--panel2); border-radius: 0 0 var(--radius) var(--radius); }
.composer textarea { min-height: 64px; }
.composer-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.composer-actions .spacer { flex: 1; }
.statusline { padding: 4px 14px; min-height: 26px; }
.thinking { color: var(--accent2); font-size: 13px; }
.thinking::after { content: '…'; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.side { position: sticky; top: 74px; display: flex; flex-direction: column; gap: 12px; }
.sheet-line { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 13px; margin-top: 6px; }
.sheet-skills { max-height: 230px; overflow-y: auto; font-family: var(--mono); font-size: 12px; line-height: 1.9; }
.sheet-skills span { display: inline-block; min-width: 46%; color: var(--dim); }
.sheet-skills span b { color: var(--ink); }
.sheet-skills span.grown { color: var(--accent); }
.party-row { border-top: 1px solid var(--line); padding: 8px 0; }
.party-row:first-of-type { border-top: 0; }
.party-row.me { background: #7fc4a80d; margin: 0 -8px; padding: 8px; border-radius: 6px; }
.party-row.lost { opacity: .5; }
.party-name { font-weight: 700; font-size: 14px; }
.party-pl { color: var(--faint); font-size: 12px; }
.mini-bars { display: flex; gap: 8px; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.mini-bars > div { flex: 1; }
.code-box {
font-family: var(--mono); font-size: 30px; letter-spacing: .32em; text-align: center;
background: var(--well); border: 1px dashed var(--accent2); border-radius: 10px;
padding: 16px 10px 16px 22px; color: var(--accent2); user-select: all;
}
/* 成長判定 */
.growth-row { display: grid; grid-template-columns: 1fr 90px 70px 100px; gap: 10px; align-items: center; font-family: var(--mono); font-size: 13px; padding: 6px 8px; border-radius: 6px; }
.growth-row:nth-child(odd) { background: var(--stripe); }
.growth-row.up { background: #7fc4a815; }
.growth-row .up-v { color: var(--accent); font-weight: 700; }
.growth-row .no-v { color: var(--dim); }
/* ===== モーダル ===== */
.modal { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal-box.narrow { max-width: 400px; }
.modal-box.wide { max-width: 880px; }
.modal-box h2 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.dice-quick { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.dice-quick button { background: var(--bg2); border: 1px solid var(--line); color: var(--dim); padding: 4px 12px; border-radius: 99px; font-size: 13px; }
.dice-out { font-family: var(--mono); background: var(--well); border-radius: 8px; padding: 12px; min-height: 46px; margin: 0; color: var(--accent); white-space: pre-wrap; }
.scenario-body { font-family: var(--mono); font-size: 12.5px; line-height: 1.8; background: var(--well); border: 1px solid var(--line); border-radius: 8px; padding: 14px; max-height: 50vh; overflow-y: auto; white-space: pre-wrap; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); color: var(--ink); padding: 10px 20px; border-radius: 99px; z-index: 200; font-size: 14px; box-shadow: var(--shadow); max-width: 90vw; }
.toast[hidden] { display: none; }
.toast.err { border-color: var(--danger); color: var(--danger-soft); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line2); border-top-color: var(--accent); border-radius: 99px; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--well); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--line2); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
.chat-scroll { scroll-behavior: auto; }
}
/* ================= 所持品・ショップ・フリマ ================= */
button.mini {
font-size: 12px; padding: 4px 10px; border-radius: 7px;
background: transparent; border: 1px solid var(--line); color: var(--dim);
}
button.mini:hover:not(:disabled) { color: var(--ink); border-color: var(--line2); }
button.mini.primary { background: var(--accent); color: var(--on-accent); border: none; font-weight: 700; }
button.mini.danger { color: var(--danger); border-color: var(--danger-line); }
button.mini:disabled { opacity: .4; cursor: not-allowed; }
.inv-money { font-size: 15px; color: var(--dim); margin-bottom: 12px; }
.inv-money b { color: var(--accent2); font-size: 18px; }
.inv-section + .inv-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.inv-section h3 { margin: 0 0 10px; font-size: 14px; }
.item-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.item-chip {
display: flex; align-items: center; gap: 10px;
background: var(--panel2); border: 1px solid var(--line);
border-radius: var(--radius); padding: 8px 10px; min-width: 0;
}
.item-chip.selectable { cursor: pointer; }
.item-chip.selectable:hover { border-color: var(--line2); }
.item-icon {
flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
background: var(--well); border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
}
.item-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-fallback { color: var(--faint); font-size: 18px; font-weight: 700; }
.item-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.item-body b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-tags i { font-style: normal; font-size: 10px; color: var(--accent2); margin-right: 6px; }
.item-desc {
font-size: 11px; color: var(--faint); line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-actions { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; align-items: flex-end; }
.shop-grid { display: grid; gap: 0; }
.shop-row {
display: flex; justify-content: space-between; align-items: center; gap: 14px;
padding: 10px 0; border-bottom: 1px solid var(--line);
}
.shop-row:last-child { border-bottom: 0; }
.shop-buy { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.price { color: var(--accent2); font-variant-numeric: tabular-nums; font-size: 13px; }
.price.short { color: var(--faint); }
.market-card + .market-card { margin-top: 12px; }
.friend-row {
display: flex; align-items: center; gap: 12px; justify-content: space-between;
padding: 10px 0; border-bottom: 1px solid var(--line);
}
.friend-row:last-child { border-bottom: 0; }
/* ================= 立ち絵 ================= */
.grid.portrait-grid { grid-template-columns: 220px repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 720px) { .grid.portrait-grid { grid-template-columns: 1fr; } }
.portrait-card { display: flex; flex-direction: column; }
.portrait { display: flex; flex-direction: column; gap: 8px; }
.portrait img {
width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
border-radius: var(--radius); border: 1px solid var(--line); background: var(--well);
}
.portrait-empty {
/* まだ絵が無いときに画面を占領させない。狭い画面では2:3のままだと900px近くになる */
width: 100%; aspect-ratio: 2 / 3; max-height: 260px; border-radius: var(--radius);
border: 1px dashed var(--line); background: var(--well);
display: flex; align-items: center; justify-content: center;
color: var(--faint); font-size: 44px;
}
.portrait-tools { display: flex; flex-wrap: wrap; gap: 6px; }
/* ================= セッション中の手持ち ================= */
.carry-strip { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.carry-item {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; padding: 3px 8px; border-radius: 99px;
border: 1px solid var(--line); color: var(--dim);
}
.carry-item img { width: 14px; height: 14px; border-radius: 3px; object-fit: cover; }
.diceline.gain { border-left-color: var(--accent2); }
.diceline.gain .lb { color: var(--accent2); }
/* ================= 加齢 ================= */
.aging-box {
margin-top: 14px; padding: 12px 14px; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--panel2);
}
.aging-line { font-size: 13px; color: var(--dim); margin-top: 4px; }
.aging-line.aging { color: var(--accent2); }
.aging-line.retired { color: var(--danger); }
/* 消耗の表示 */
.item-tags u { text-decoration: none; font-size: 10px; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; }
.carry-item.usable { cursor: pointer; border-color: var(--line2); }
.carry-item.usable:hover { color: var(--ink); border-color: var(--accent); }
.carry-item em { font-style: normal; font-size: 10px; color: var(--faint); margin-left: 2px; }
/* レアリティ */
.rarity {
font-size: 10px; margin-left: 6px; padding: 1px 6px; border-radius: 99px;
border: 1px solid currentColor; vertical-align: middle; white-space: nowrap;
}
.rarity.r-quest { color: var(--r-quest); }
.rarity.r-common { color: var(--faint); }
.rarity.r-uncommon { color: var(--r-uncommon); }
.rarity.r-rare { color: var(--r-rare); }
.rarity.r-epic { color: var(--r-epic); }
.rarity.r-legendary { color: var(--r-legendary); }
.item-chip.r-quest { border-color: var(--r-quest-line); background: linear-gradient(180deg, var(--gold-bg), var(--panel2)); }
.item-chip.r-uncommon { border-color: var(--accent-line); }
.item-chip.r-rare { border-color: var(--r-rare-line); }
.item-chip.r-epic { border-color: var(--r-epic-line); }
.item-chip.r-legendary { border-color: var(--r-legendary-line); box-shadow: inset 0 0 22px #d6b45a12; }
/* ================= 装備 ================= */
.item-tags u.gear { color: var(--accent2); border-color: var(--gold-line); }
.item-tags u.gear.broken { color: var(--danger); border-color: var(--danger-line); }
/* ================= ガチャ ================= */
.gacha-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.gacha-actions button { flex: 1 1 200px; padding: 14px 18px; }
.gacha-actions small { display: block; font-size: 11px; opacity: .7; font-weight: 400; }
.gacha-pity {
display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px;
padding-top: 12px; border-top: 1px solid var(--line);
font-size: 12px; color: var(--dim);
}
.gacha-pity b { color: var(--accent2); }
.gacha-result { border-color: var(--line2); }
.rate-list { display: grid; gap: 8px; }
.rate-row { display: grid; grid-template-columns: 110px 1fr 48px 44px; align-items: center; gap: 10px; font-size: 12px; }
.rate-row b { text-align: right; font-variant-numeric: tabular-nums; }
.rate-bar { height: 6px; border-radius: 99px; background: var(--panel2); overflow: hidden; }
.rate-bar i { display: block; height: 100%; background: var(--accent); }
@media (max-width: 560px) {
.rate-row { grid-template-columns: 100px 1fr 44px; }
.rate-row .hint { display: none; }
}
/* ================= 効能 ================= */
.boon-box {
margin-top: 14px; padding: 12px 14px; border-radius: var(--radius);
border: 1px solid var(--gold-line); background: linear-gradient(180deg, var(--gold-bg), var(--panel2));
}
.boon-box b { color: var(--accent2); }
.boon-line { font-size: 13px; color: var(--dim); margin-top: 4px; }
/* 空腹・疲労 */
.party-row .cond { font-size: 11px; color: var(--accent2); margin-top: 2px; }
.item-tags u.food { color: var(--food); border-color: var(--food-line); }
.item-tags u.effect { color: var(--info); border-color: var(--info-line); }
.carry-item em.eff { color: var(--info); font-style: normal; }
/* ===== 禁忌収蔵庫 ===== */
.relic-summary { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.relic-summary div { display: flex; flex-direction: column; }
.relic-summary span { font-size: 11px; color: var(--dim); }
.relic-summary b { font-size: 20px; }
.relic-summary b.sealed { color: var(--danger); }
.relic-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.card.relic { border-color: var(--gold-line); background: linear-gradient(180deg, var(--gold-bg), var(--panel)); }
.card.relic.sealed { border-color: var(--danger-line); }
.card.relic.unknown .relic-name { color: var(--dim); }
.relic-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.relic-no { color: var(--dim); font-family: var(--mono); letter-spacing: .1em; }
.relic-stars { color: var(--accent2); letter-spacing: .1em; }
.relic-name { font-size: 17px; font-weight: 700; margin: 6px 0 4px; }
.relic-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--dim); margin-bottom: 8px; }
.relic-meta i { font-style: normal; }
.relic-meta i.d-high { color: var(--danger); }
.relic-meta i.d-mid { color: var(--accent2); }
.relic-meta i.d-low { color: var(--accent); }
.relic-story { font-size: 12px; color: var(--dim); margin: 0 0 8px; line-height: 1.7; }
.relic-look { font-size: 13px; margin: 0 0 6px; color: var(--ink2); }
.relic-desc { font-size: 13.5px; line-height: 1.75; margin: 0 0 10px; }
.relic-detail { display: grid; grid-template-columns: 74px 1fr; gap: 2px 10px; font-size: 12px; margin: 0 0 10px; }
.relic-detail dt { color: var(--dim); }
.relic-detail dd { margin: 0; }
.relic-actions { margin: 0; }
.inv-money .vault { color: var(--accent2); margin-left: 16px; }
.vault-row { margin: 0 0 14px; max-width: 460px; }
.vault-row input { margin: 0; }
.growth-extra {
margin-top: 14px; padding: 10px 12px; border-radius: var(--radius);
border: 1px solid var(--line); background: var(--panel2); font-size: 13px; line-height: 1.7;
}
.growth-extra b { display: block; margin-bottom: 4px; }
.growth-extra.ok { border-color: var(--accent-deep); }
.growth-extra.ok b { color: var(--accent); }
.growth-extra.mythos { border-color: var(--mythos-line); }
.growth-extra.mythos b { color: var(--mythos); }
.growth-extra.title { border-color: var(--gold-line); }
.growth-extra.title b { color: var(--accent2); }
.sc-rank { font-size: 12px; color: var(--accent2); margin: 2px 0 6px; letter-spacing: .1em; }
.sc-rank b { color: var(--accent2); }
.sc-rank.big {
letter-spacing: normal; margin: 8px 0; padding: 8px 10px; border-radius: 6px;
background: rgba(224, 163, 62, .07); border: 1px solid var(--gold-line);
}
.sc-rank.big small { color: var(--dim); }
.pc-grade { font-size: 12px; color: var(--accent2); margin-top: 2px; letter-spacing: .08em; }
.pc-titles { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.sc-boon {
margin: 6px 0 8px; padding: 6px 9px; border-radius: 6px; font-size: 12px;
color: var(--accent2); background: rgba(224, 163, 62, .08); border: 1px solid var(--gold-line);
}
/* スマホでは、あらすじを3行で切って一覧を見渡しやすくする */
@media (max-width: 640px) {
.sc-sum { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
.diceline.cond { border-left-color: var(--accent2); }
/* 探索者の切り替え（ショップ・フリマ・ガチャの右上） */
label.inline { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--dim); }
label.inline select { margin: 0; min-width: 190px; }
/* 生成待ちのイラスト枠 */
.scene-img.pending { opacity: .75; }
/* ガチャの在庫 */
.gacha-stock {
display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px;
font-size: 12px; color: var(--dim);
}
.gacha-stock b { color: var(--accent); }
.rate-row .hint.out { color: var(--danger); }
/* フリマや倉庫で、一点物の遺物だと分かる目印 */
.rarity.relic-mark {
background: var(--mythos-bg);
color: var(--mythos-soft);
border: 1px solid var(--mythos-line);
margin-left: 4px;
}
/* 遺物の絵。無いときは何も出さない */
.relic-art {
margin: 8px 0 10px;
border-radius: 8px;
overflow: hidden;
background: var(--well);
border: 1px solid var(--line);
}
.relic-art img {
display: block;
width: 100%;
max-height: 220px;
object-fit: cover;
}
/* まだ絵が焼き上がっていない間の場所取り。ゆっくり明滅させる */
.item-drawing, .relic-art.drawing {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(100deg, var(--panel2) 30%, var(--line) 50%, var(--panel2) 70%);
background-size: 220% 100%;
animation: drawing 2.4s ease-in-out infinite;
}
.relic-art.drawing {
height: 160px;
display: grid;
place-items: center;
color: var(--dim);
font-size: 12px;
}
@keyframes drawing {
0% { background-position: 120% 0; }
100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
.item-drawing, .relic-art.drawing { animation: none; }
}
/*
* シリーズシナリオ。
* 1つのタブにまとめて、フォルダのように畳む。
* 先の話は出さないので、開いても「まだ遊べない話」は並ばない。
*/
.campaign {
background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
}
.campaign[open] { border-color: var(--line2); }
.campaign-head {
padding: 16px; cursor: pointer; list-style: none;
transition: background .12s;
}
.campaign-head::-webkit-details-marker { display: none; }
.campaign-head:hover { background: var(--panel2); }
.campaign-name { font-size: 17px; }
.campaign-name + .hint { margin-left: 8px; font-weight: 400; }
.campaign-body { padding: 0 16px 16px; }
.sc-catch { color: var(--accent2); font-size: 13px; margin: 4px 0 8px; }
.campaign-bar { height: 6px; background: var(--panel2); border-radius: 99px; overflow: hidden; margin-top: 12px; }
.campaign-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.sc-card.ep.next { border-color: var(--accent); }
.ep-no { font-size: 12px; color: var(--dim); white-space: nowrap; margin-left: 8px; }
.ep-done, .ep-next { display: inline-block; font-size: 12px; margin-top: 8px; }
.ep-done { color: var(--accent2); }
.ep-next { color: var(--accent); font-weight: 600; }
/* 立ち絵の選び方の案内 */
.portrait-hint { margin: 8px 0 0; line-height: 1.5; }
/* 中断中の卓。開いたときに、まずここが目に入るように */
.paused-banner { border-color: var(--accent2); }
.badge.paused { background: var(--gold-bg); color: var(--gold-soft); border-color: var(--gold-deep); }
.recap-fold summary { cursor: pointer; font-size: 13px; color: var(--dim); padding: 4px 0; }
.paused-banner .recap { max-height: 42vh; }
.recap {
white-space: pre-wrap;
line-height: 1.7;
font-size: 13px;
color: var(--ink);
background: var(--panel2);
border-radius: 8px;
padding: 12px 14px;
margin-top: 10px;
overflow-y: auto;
}
/* はじめて開いた人への案内 */
.welcome { border-color: var(--accent); }
.welcome h2 { font-size: 20px; }
.steps { margin: 14px 0 18px; padding-left: 22px; }
.steps li { margin-bottom: 10px; line-height: 1.6; }
.steps li span { display: block; font-size: 12px; color: var(--dim); }
/* KPの応答への評価。普段は目立たせず、指を置いたときだけ濃くする */
.kp-rate { float: right; opacity: .25; transition: opacity .15s; }
.msg.kp:hover .kp-rate { opacity: .8; }
.kp-rate .rate {
background: none; border: 0; cursor: pointer; padding: 0 4px;
font-size: 13px; line-height: 1; color: inherit;
}
.kp-rate .rate.on { opacity: 1; transform: scale(1.25); }
@media (max-width: 720px) { .kp-rate { opacity: .55; } }
/* 終了後の手順。いま自分がどこにいるかが分かるように、済・いま・待ちで色を変える */
.end-step { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.end-step:first-of-type { border-top: 0; }
.end-step-n {
flex: 0 0 22px; height: 22px; border-radius: 50%; text-align: center;
font-size: 12px; line-height: 22px; font-weight: 700;
background: var(--line); color: var(--fg);
}
.end-step-t { font-weight: 600; }
.end-step.done .end-step-n { background: var(--accent); color: var(--on-accent); }
.end-step.done .end-step-t { opacity: .65; }
.end-step.now .end-step-n { background: var(--accent); color: var(--on-accent); }
.end-step.now .end-step-t { color: var(--accent); }
.end-step.wait .end-step-n { opacity: .6; }
/* ================= 盤面（次にできること・地図・敵・組） ================= */
/* 次にできること。入力欄のすぐ上に置く。
ここが無かったせいで、PLは毎ターン「どうしますか」だけを受け取っていた */
.acts { border-top: 1px solid var(--line); padding: 10px 12px 4px; }
.acts.choice { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.acts-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.acts-title { font-size: 12px; color: var(--muted, var(--dim)); font-weight: 600; }
.acts-head .mini { margin-left: auto; }
.acts-list { display: flex; flex-wrap: wrap; gap: 8px; }
.act {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
background: var(--card, var(--panel2)); color: inherit; cursor: pointer; text-align: left;
max-width: 100%; transition: border-color .15s, transform .05s;
}
.act:hover { border-color: var(--accent); }
.act:active { transform: translateY(1px); }
.act b { font-weight: 600; font-size: 13px; }
.act i { font-style: normal; font-size: 11px; color: var(--muted, var(--dim)); }
.acts.choice .act { border-color: var(--accent); }
.acts-note { margin: 8px 0 4px; }
/* 地図。座標は百分率なので、枠の大きさが変わっても崩れない */
.map-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.map-tabs button {
padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
background: none; color: inherit; cursor: pointer; font-size: 12px;
}
.map-tabs button.on { border-color: var(--accent); color: var(--accent); }
.map-note { font-size: 12px; color: var(--muted, var(--dim)); margin-bottom: 8px; }
.map-canvas {
position: relative; aspect-ratio: 3 / 2;
/* 小窓に収める。縦に長いと、地図を見るのにスクロールが要る */
width: min(100%, calc(52vh * 3 / 2)); margin-inline: auto;
border: 1px solid var(--line); border-radius: 12px;
background: repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--line) 40%, transparent) 23px 24px),
repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--line) 40%, transparent) 23px 24px);
overflow: hidden;
}
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines line { stroke: var(--line); stroke-width: .5; vector-effect: non-scaling-stroke; }
/* 場所。触れると、そこで見たものが出る */
.map-place {
position: absolute; transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 3px;
font-size: 11px; white-space: nowrap;
background: none; border: 0; padding: 4px; color: inherit;
cursor: pointer; font-family: inherit;
}
.map-place:hover .map-name, .map-place:focus-visible .map-name {
border-color: var(--accent2); color: var(--ink);
}
.map-place:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; border-radius: 8px; }
/* 一度でも行った場所は、名札に印が付く */
.map-place.seen .map-name::after { content: " ◦"; color: var(--accent2); }
.map-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--dim); border: 1px solid var(--line);
}
.map-place.here .map-dot { width: 12px; height: 12px; background: var(--accent); border-color: var(--accent); }
.map-name {
background: color-mix(in srgb, var(--bg) 82%, transparent);
border: 1px solid transparent;
padding: 1px 6px; border-radius: 6px; transition: border-color .12s, color .12s;
}
.map-place.here .map-name { color: var(--accent); font-weight: 600; }
/* 探索者のピン。組ではなく、ひとりずつ立てる */
.map-pins { display: flex; gap: 3px; margin-top: 1px; }
.map-pin {
display: inline-block; padding: 1px 6px; border-radius: 999px;
background: var(--accent); color: var(--on-accent);
font-size: 10px; font-weight: 700; line-height: 1.6;
/* 名前は途中で切らずに出す。同名がいると姓まで付いて長くなる */
max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 人数が多いと横に伸びるので、二段まで折り返す */
.map-pins { flex-wrap: wrap; justify-content: center; max-width: 12em; }
.map-pin.lost { background: var(--dim); color: var(--bg); text-decoration: line-through; }
/* 上の階へ通じている場所 */
.map-stair { font-size: 10px; color: var(--accent2); }
.map-tab-here { color: var(--accent); font-size: 9px; vertical-align: middle; }
/*
* 建物の間取り。
* 升目のとおりに置いてあるので、丸ではなく部屋の形（四角）で出す。
* 丸のままだと、位置が正しいことが伝わらない。
*/
.map-canvas.plan { aspect-ratio: 4 / 3; width: min(100%, calc(52vh * 4 / 3)); }
.map-canvas.plan .map-dot { display: none; }
.map-canvas.plan .map-name {
border: 1px solid var(--line2); border-radius: 4px;
background: var(--panel2); padding: 7px 12px; min-width: 5.5em; text-align: center;
}
.map-canvas.plan .map-place.here .map-name {
border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel2));
}
.map-canvas.plan .map-lines line { stroke: var(--line2); stroke-width: 2; }
/*
* 場所に触れたときの札。
* そこで実際に描かれた絵を1枚と、ひとこと。
* 行っていない場所には絵が無い ── 見ていないものは見せない。
*/
.place-pop {
position: fixed; z-index: 120; width: 260px;
pointer-events: none; animation: place-in .12s ease-out;
}
@keyframes place-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1 } }
.place-card {
background: var(--panel); border: 1px solid var(--line2); border-radius: 10px;
overflow: hidden; box-shadow: var(--shadow);
}
.place-card.here { border-color: var(--accent); }
.place-shot { height: 132px; background: var(--bg2); }
.place-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.place-shot.none {
display: flex; align-items: center; justify-content: center; height: 62px;
color: var(--faint); font-size: 12px;
}
.place-body { padding: 10px 12px; }
.place-name { font-weight: 600; font-size: 13px; }
.place-note { color: var(--dim); font-size: 12px; margin-top: 4px; white-space: normal; line-height: 1.6; }
/* 対峙している相手。耐久が見えないと殴った手応えがない */
.enemies .enemy { padding: 8px 0; border-top: 1px solid var(--line); }
.enemies .enemy:first-of-type { border-top: 0; }
.enemies .bar { margin: 5px 0 3px; }
/* 誰と一緒にいるか */
.groups .who-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.groups.split { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* スマホ。候補は横に流し、地図は画面いっぱいに使う */
@media (max-width: 720px) {
.acts { padding: 8px 10px 2px; }
.acts-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.acts-list::-webkit-scrollbar { display: none; }
.act { flex: 0 0 auto; max-width: 76vw; }
.acts-note { display: none; }
/* 狭い画面では正方形に。地図は縦にも使いたい */
.map-canvas, .map-canvas.plan { aspect-ratio: 1 / 1; width: min(100%, 60vh); }
.map-pin { font-size: 10px; }
}
/* ================= 手番 ================= */
/* いま誰の番か。待ち時間が「誰か書いてくれるのを待つ」で埋まらないように */
.turnbar { border-top: 1px solid var(--line); padding: 8px 12px; font-size: 12px; }
.turnbar.mine { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.turn-head { display: flex; align-items: center; gap: 8px; }
.turn-title { color: var(--muted, var(--dim)); }
.turn-title b { color: inherit; }
.turn-you { color: var(--accent); }
.turn-order { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.turn-who {
padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px;
color: var(--muted, var(--dim));
}
.turn-who.now { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.turn-who.done { opacity: .5; }
@media (max-width: 720px) {
.turnbar { padding: 7px 10px; }
.turn-order { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.turn-order::-webkit-scrollbar { display: none; }
.turn-who { flex: 0 0 auto; }
}
/* 候補を畳んでいるとき。取っ手だけを控えめに残す */
.acts.folded { padding: 6px 12px; border-top: 1px solid var(--line); }
.acts.folded .mini { opacity: .7; }
.acts.folded .mini:hover { opacity: 1; }
/* ================= 遊んだあとの採点とランキング ================= */
/* 5問×5点。押した所までが灯る */
.survey .q { padding: 9px 0; border-top: 1px solid var(--line); }
.survey .q:first-of-type { border-top: 0; }
.q-label { font-size: 13px; margin-bottom: 6px; }
.q-scale { display: flex; align-items: center; gap: 6px; }
.q-end { font-size: 11px; color: var(--dim); flex: 0 0 auto; }
.q-end:first-child { text-align: right; min-width: 68px; }
.q-dot {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--line); background: none; color: var(--dim);
cursor: pointer; font-size: 12px; transition: background .12s, color .12s, border-color .12s;
}
.q-dot:hover { border-color: var(--accent); }
.q-dot.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
/* ランキング */
.rank-list { display: flex; flex-direction: column; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.rank-row:first-child { border-top: 0; }
.rank-no {
flex: 0 0 30px; height: 30px; line-height: 30px; text-align: center;
border-radius: 50%; background: var(--line); font-size: 13px; font-weight: 700;
}
.rank-no.top { background: var(--accent); color: var(--on-accent); }
.rank-body { flex: 1 1 auto; min-width: 0; }
.rank-body b { display: block; font-size: 14px; }
.rank-body .hint { font-size: 11px; }
.rank-score { flex: 0 0 auto; font-size: 20px; font-weight: 700; color: var(--accent); }
.sc-score { color: var(--accent); }
@media (max-width: 720px) {
.q-end { display: none; }
.q-scale { justify-content: space-between; }
.q-dot { width: 40px; height: 40px; }
}
/* ランキングの題名は押せる */
.rank-title { cursor: pointer; }
.rank-title:hover { color: var(--accent); text-decoration: underline; }
/* ================= 遊び方の小窓 ================= */
/* 物語と説明を分ける。読んで閉じてもらう */
.tip-modal { text-align: left; }
.tip-head {
display: inline-block; padding: 2px 10px; border-radius: 999px;
background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700;
}
.tip-text { margin: 0; line-height: 1.85; white-space: pre-wrap; }
/* 記録に畳んで残るぶん。あとから読み返せる */
.tip-log {
margin: 8px 0; border: 1px dashed var(--line); border-radius: 10px;
padding: 7px 12px; font-size: 12px;
}
.tip-log > summary { cursor: pointer; color: var(--accent); list-style: none; }
.tip-log > summary::before { content: '？ '; }
.tip-log > summary::-webkit-details-marker { display: none; }
.tip-body { margin-top: 7px; color: var(--dim); line-height: 1.8; white-space: pre-wrap; }
/* ================= ショップの買い物かご ================= */
/* 個数を決めてから、まとめて買う。1個ずつ買うと画面が上へ戻ってしまう */
.qty { display: inline-flex; align-items: center; gap: 2px; }
.qty-btn {
width: 26px; height: 26px; border-radius: 7px;
border: 1px solid var(--line); background: none; color: inherit;
cursor: pointer; font-size: 14px; line-height: 1;
}
.qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.qty-n { min-width: 22px; text-align: center; font-size: 13px; }
.qty-n:not(:empty) { color: inherit; }
/* 会計の帯。下に貼り付いて、合計をいつでも見せる */
/* 画面の下に貼り付ける。
ページの途中に置くと、上のほうで個数を足したときに合計が見えない */
.cart-bar {
position: fixed; left: 50%; transform: translateX(-50%);
bottom: 14px; z-index: 40; width: min(760px, calc(100% - 28px));
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 16px;
border: 1px solid var(--accent); border-radius: var(--radius);
background: color-mix(in srgb, var(--card, var(--panel2)) 94%, var(--accent));
box-shadow: 0 8px 32px rgb(0 0 0 / 55%);
}
.cart-bar[hidden] { display: none; }
.cart-sum { font-size: 14px; }
.cart-sum b { font-size: 16px; }
.cart-bar .hint { flex: 1 1 auto; }
@media (max-width: 720px) {
.cart-bar { gap: 8px; padding: 10px 12px; bottom: 10px; width: calc(100% - 20px); }
.cart-bar .hint { flex-basis: 100%; order: 3; }
.qty-btn { width: 32px; height: 32px; }
}
/* ================= ガチャの演出 ================= */
/* 一拍おいて1点ずつ開く。押しただけで結果が差し替わると、引いた実感がない */
.pull-stage { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pull-card { position: relative; opacity: 0; transform: translateY(10px) scale(.98); }
.pull-card.in { animation: pull-in .34s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes pull-in {
from { opacity: 0; transform: translateY(10px) scale(.98); }
to { opacity: 1; transform: none; }
}
/* 格が高いほど強く光らせる */
.pull-flash {
position: absolute; inset: -2px; border-radius: 12px;
pointer-events: none; opacity: 0;
}
.pull-card.in .pull-flash { animation: pull-flash .8s ease-out forwards; }
@keyframes pull-flash {
0% { opacity: .9; box-shadow: 0 0 0 0 currentColor; }
100% { opacity: 0; box-shadow: 0 0 26px 8px currentColor; }
}
.pull-card.r-common .pull-flash { color: transparent; }
.pull-card.r-uncommon .pull-flash { color: #6fb2a0; }
.pull-card.r-rare .pull-flash { color: #6aa6e8; }
.pull-card.r-epic .pull-flash { color: #b98ae0; }
.pull-card.r-legendary .pull-flash { color: #e0b25a; }
/* レア以上が混じっている回は、場ごと少し灯す */
.pull-stage.big {
border-radius: 12px;
animation: stage-glow 1.1s ease-out;
}
@keyframes stage-glow {
0% { background: color-mix(in srgb, var(--accent) 16%, transparent); }
100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.pull-card, .pull-card.in { animation: none; opacity: 1; transform: none; }
.pull-flash, .pull-stage.big { animation: none; }
}
/* ================= よく遊ばれているシナリオ ================= */
/* 選ぶ場所のすぐ上に3本だけ。ランキングはタブの奥にあると誰も見ない */
.top-rank-list { display: flex; flex-direction: column; margin-top: 10px; }
.top-rank-row {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 9px 4px; border: 0; border-top: 1px solid var(--line);
background: none; color: inherit; cursor: pointer; text-align: left;
}
.top-rank-row:first-child { border-top: 0; }
.top-rank-row:hover .top-rank-name { color: var(--accent); text-decoration: underline; }
.top-rank-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-rank-score { flex: 0 0 auto; font-size: 17px; font-weight: 700; color: var(--accent); }
.top-rank-score small { font-size: 11px; font-weight: 400; color: var(--dim); }
/* 候補が閉じている時の案内と、持ち物の帯を指すときの点滅 */
.acts.folded.locked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acts.folded.locked .hint { margin: 0; }
#my-carry.pointed .carry-strip {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 6px;
transition: outline-color .3s;
}
@media (prefers-reduced-motion: no-preference) {
#my-carry.pointed .carry-strip { animation: carry-pulse 1.6s ease-out; }
@keyframes carry-pulse {
0%, 100% { outline-color: transparent; }
20%, 60% { outline-color: var(--accent); }
}
}
/* 品に宿った銘 */
.sigil {
display: inline-block; margin: 3px 0 0; padding: 1px 8px;
border-radius: 999px; font-size: 11px; letter-spacing: .04em;
border: 1px solid var(--line); color: var(--dim);
}
.sigil.unknown { border-style: dashed; }
.sigil.blessing { color: var(--accent-soft); border-color: var(--accent-deep); }
.sigil.curse { color: var(--danger-soft); border-color: var(--danger-deep); }
.sigil.twin { color: var(--gold-soft); border-color: var(--gold-deep); }
.sigil.on { box-shadow: 0 0 0 1px currentColor inset; font-weight: 600; }
.sigil-name { margin: 4px 0 8px; display: flex; align-items: baseline; gap: 10px; }
.sigil-name span { font-size: 12px; font-weight: 400; color: var(--dim); }
.sigil-name.blessing { color: var(--accent-soft); }
.sigil-name.curse { color: var(--danger-soft); }
.sigil-name.twin { color: var(--gold-soft); }
.sigil-lines { margin: 8px 0; padding-left: 1.2em; }
.sigil-lines li { margin: 3px 0; }
/* 書き込み欄の「＋」。たまにしか使わない操作をここへ寄せた */
.more-wrap { position: relative; display: inline-block; }
#more-acts { min-width: 34px; font-size: 16px; line-height: 1; padding: 5px 9px; }
.more-menu {
position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40;
min-width: 15rem; padding: 6px;
background: var(--panel, var(--panel)); border: 1px solid var(--line);
border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.45);
display: flex; flex-direction: column; gap: 2px;
}
.more-menu button { text-align: left; width: 100%; }
.more-menu .checkline { margin: 4px 2px 2px; padding-top: 6px; border-top: 1px solid var(--line); }
/* 品ひとつの詳しい画面 */
.item-actions .more { min-width: 30px; padding: 3px 7px; letter-spacing: .1em; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.sheet-actions button { flex: 1 1 auto; min-width: 8rem; }
.sheet-sigil { margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.sheet-sigil b { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.sheet-sigil b span { font-size: 11px; font-weight: 400; color: var(--dim); }
.sheet-sigil p { margin: 6px 0 0; }
.sheet-sigil ul { margin: 8px 0 0; padding-left: 1.2em; }
.sheet-sigil .on { color: var(--accent); font-weight: 600; }
.sheet-sigil.unknown { border-style: dashed; }
.sheet-sigil.blessing { border-color: var(--accent-deep); }
.sheet-sigil.curse { border-color: var(--danger-deep); }
.sheet-sigil.twin { border-color: var(--gold-deep); }
.room-tools { display: flex; align-items: center; gap: 6px; }
.more-menu.right { left: auto; right: 0; bottom: auto; top: calc(100% + 6px); }
.more-menu button.danger { color: var(--danger, var(--danger)); }
/* ショップ：選んでいない品は「入れる」だけ出す */
.qty.none .qty-btn.minus,
.qty.none .qty-n,
.qty.none .qty-btn.plus { display: none; }
.qty:not(.none) .qty-btn.add { display: none; }
/* .qty-btn は 26px 四方の固定なので、文字を入れると潰れる */
.qty-btn.add { width: auto; height: auto; padding: 5px 14px; white-space: nowrap; font-size: 13px; }
/* 後日談と振り返り */
.debrief .epilogue { white-space: pre-wrap; line-height: 1.9; margin: 0; }
.debrief.pending { border-style: dashed; }
.branch { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.branch:first-of-type { border-top: 0; padding-top: 0; }
.branch-when {
flex: 0 0 8.5rem; font-weight: 600; color: var(--accent2, var(--gold-soft));
line-height: 1.7; word-break: break-word;
}
.branch-body { flex: 1 1 auto; line-height: 1.8; }
.branch-body b { color: var(--dim); font-weight: 400; font-size: 12px; margin-right: 4px; }
.branch-alt { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--ink2); }
.missed { margin: 0; padding-left: 1.3em; line-height: 1.9; }
@media (max-width: 640px) {
.branch { flex-direction: column; gap: 4px; }
.branch-when { flex: none; }
}
/* 遊び方 */
.rules-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.rules-nav a {
padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
font-size: 13px; color: var(--dim); text-decoration: none;
}
.rules-nav a:hover { border-color: var(--accent); color: var(--accent); }
.rules-sec { margin-bottom: 14px; }
.rules-sec h2 { margin-top: 0; }
.rules-sec h4 { margin: 18px 0 6px; font-size: 14px; color: var(--accent2, var(--gold-soft)); }
.rules-sec p { line-height: 1.9; margin: 8px 0; }
.rules-sec ul, .rules-sec ol { line-height: 1.9; padding-left: 1.4em; margin: 8px 0; }
.rules-lead { color: var(--dim); border-left: 2px solid var(--line); padding-left: 12px; }
.rules-note { color: var(--dim); font-size: 13px; border-top: 1px solid var(--line); padding-top: 10px; }
.rules-steps li { margin: 6px 0; }
.rules-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.rules-table th, .rules-table td {
text-align: left; vertical-align: top; padding: 7px 10px;
border-top: 1px solid var(--line); line-height: 1.8; font-weight: 400;
}
.rules-table th { white-space: nowrap; color: var(--accent2, var(--gold-soft)); width: 1%; }
@media (max-width: 560px) {
.rules-table th, .rules-table td { display: block; border-top: 0; padding: 2px 0; }
.rules-table tr { display: block; border-top: 1px solid var(--line); padding: 8px 0; }
}