/* =====================================================================
   交流（第4弾）：さそいの札・なかまのシート（パーティー・フレンド・ギルド・ワールドボス）・人のカード・
   交換の窓・ワールドボスのごほうび・会話のタブ・冒険の受付・設定の戦いの速さ
   ・スマホは下から出るシート、広い画面は右の帯。札は画面の上に小さく（ふさがない）
   ・重なり：シート 47 ＜ 交換 49 ＜ モーダル 50 ＜ 会話のシート 55 ＜ 札 58（札は、窓やシートが開いているあいだは出さない）
   色は app.css の言葉に合わせる。ギルドは青むらさき、交換は若草、助けを呼ぶ声は朱
   ===================================================================== */
:root { --guild: #9fb4ff; --trade: #a9e27c; --sos: #ff9a6e; --wb: #ff8a9a; }

/* ---------------------------------------------------------------------
   さそいの札（画面の上。広い画面は右上）
   --------------------------------------------------------------------- */
.soc-notes {
  position: fixed; z-index: 58; top: calc(var(--tb-h) + 8px + env(safe-area-inset-top, 0px)); right: 12px;
  width: min(360px, calc(100vw - 24px)); display: grid; gap: 6px; pointer-events: none;
}
html.soc-open .soc-notes { right: 404px; }
@media (max-width: 899px) {
  .soc-notes { left: 8px; right: 8px; width: auto; } html.soc-open .soc-notes { right: 8px; }
  /* お店などのページを見ているときは、札を下に出す（ページの見出しと「もどる」をかくさない） */
  html.on-page:not(.soc-battle) .soc-notes { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.soc-notes > * { pointer-events: auto; }
/* 第8弾：窓・シート・交換の窓・戦いの一覧・会話シーンが開いているあいだは出さない（ボタンや ✕ をふさがない。ui/social.js の notesUnder） */
html.soc-under .soc-notes { display: none; }
.snote {
  --nc: var(--brass);
  position: relative; overflow: hidden; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ic text x" "ic acts acts";
  align-items: center; gap: 4px 8px; padding: 8px 8px 10px 10px; border-radius: 14px;
  background: rgba(16, 28, 23, .97); border: 1.5px solid color-mix(in srgb, var(--nc) 70%, transparent);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .3); animation: snIn .28s cubic-bezier(.2, .9, .3, 1.25);
}
.snote.k-party { --nc: var(--hp); }
.snote.k-guild { --nc: var(--guild); }
.snote.k-trade { --nc: var(--trade); }
.snote.k-friend { --nc: var(--rose); }
.snote.k-sos { --nc: var(--sos); background: linear-gradient(100deg, rgba(90, 30, 14, .97), rgba(20, 24, 20, .97) 70%); }
.snote.k-wboss { --nc: var(--wb); background: linear-gradient(100deg, rgba(80, 14, 30, .97), rgba(20, 22, 20, .97) 72%); }
.snote.k-wdown { --nc: var(--brass); grid-template-areas: "ic text x"; }
.sn-ic { grid-area: ic; align-self: start; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: calc(16px * var(--fs-k)); line-height: 1; background: color-mix(in srgb, var(--nc) 22%, rgba(0, 0, 0, .4)); }
.sn-text { grid-area: text; margin: 0; min-width: 0; font-size: var(--fs-min); line-height: 1.45; overflow-wrap: anywhere; }
.sn-text b { color: color-mix(in srgb, var(--nc) 55%, #fff); }
.sn-text small { display: block; font-size: var(--fs-min); color: var(--muted); }
.sn-acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 6px; }
.sn-acts .btn { min-height: 38px; padding: 0 14px; }
.sn-x { grid-area: x; align-self: start; position: relative; width: 30px; height: 30px; margin: -2px -2px 0 0; border-radius: 50%; border: 0; background: transparent; color: var(--faint); font-size: var(--fs-min); line-height: 1; display: grid; place-items: center; }
.sn-x::after { content: ''; position: absolute; inset: -7px; }
.sn-x:hover { background: rgba(226, 238, 228, .1); color: var(--text); }
.sn-time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0, 0, 0, .35); }
.sn-time > i { position: absolute; inset: 0; transform-origin: left center; background: color-mix(in srgb, var(--nc) 85%, #fff); animation-name: snTime; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes snTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes snIn { from { transform: translateY(-10px) scale(.96); opacity: 0; } }
.sn-row { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
/* 戦いの最中：1行の小さな札（戦いの見出しと「助けを呼ぶ」をかくさない） */
html.soc-battle .snote { grid-template-columns: 26px minmax(0, 1fr) auto auto; grid-template-areas: "ic text acts x"; padding: 5px 6px 7px 8px; gap: 6px; }
html.soc-battle .sn-ic { width: 26px; height: 26px; font-size: calc(14px * var(--fs-k)); align-self: center; }
html.soc-battle .sn-text { font-size: var(--fs-min); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.soc-battle .sn-text small { display: none; }
html.soc-battle .sn-acts { flex-wrap: nowrap; gap: 4px; }
html.soc-battle .sn-acts .btn { min-height: 34px; padding: 0 10px; font-size: var(--fs-min); }
html.soc-battle .sn-x { align-self: center; margin: 0; }
@media (max-width: 899px) { html.soc-battle .soc-notes { top: calc(var(--tb-h) + 64px + env(safe-area-inset-top, 0px)); } }
.sn-more, .sn-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: rgba(16, 28, 23, .96); color: var(--text); font-size: var(--fs-min); font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.sn-chip.k-wboss { border-color: var(--wb); color: #ffe3e7; }
.sn-chip b { font-family: var(--font-dot); font-weight: 400; font-size: calc(14px * var(--fs-k)); }
.sn-chip small { font-weight: 400; color: #ffd0d4; }

/* ---------------------------------------------------------------------
   なかまのシート：スマホは下から、広い画面は右の帯（地図は見えたまま）
   --------------------------------------------------------------------- */
.soc-layer { position: fixed; inset: 0; z-index: 47; pointer-events: none; }
.soc-back { position: absolute; inset: 0; background: rgba(4, 9, 7, .55); pointer-events: auto; animation: fadeIn .15s; }
.soc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: min(82vh, 720px); max-height: min(82dvh, 720px);
  display: flex; flex-direction: column; pointer-events: auto;
  background: var(--panel); border: 1.5px solid var(--line-2); border-bottom: 0; border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); animation: sheetUp .22s ease-out;
}
@media (min-width: 900px) {
  .soc-back { display: none; }
  .soc-sheet { left: auto; top: var(--tb-h); width: 392px; max-height: none; border-radius: 0; border-bottom: 1.5px solid var(--line-2); border-right: 0; box-shadow: -14px 0 40px rgba(0, 0, 0, .45); animation: socSide .22s ease-out; }
}
@keyframes socSide { from { transform: translateX(30px); opacity: .5; } }
.soc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.soc-head h2 { flex: 1; margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: calc(20px * var(--fs-k)); }
.soc-x { width: 44px; height: 44px; }
.soc-tabs { display: flex; gap: 2px; padding: 0 8px 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.soc-tabs::-webkit-scrollbar { display: none; }
/* 4つのタブが1行に入るように（スマホの幅・PC の右のシート 392px・文字が大きいとき）。入らなければ「ワールド／ボス」は2行に */
.soc-tabs [role="tab"] {
  position: relative; flex: 1 1 auto; min-height: 44px; padding: 0 7px; border-radius: 10px; border: 1.5px solid transparent;
  background: transparent; color: var(--muted); font-weight: 700; font-size: var(--fs-min); white-space: normal; word-break: keep-all; line-height: 1.2;
}
.soc-tabs [role="tab"][aria-selected="true"] { border-color: var(--brass); background: rgba(227, 179, 65, .14); color: var(--brass-hi); }
.soc-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; padding: 0 5px; border-radius: 11px; line-height: 1; background: var(--hp); color: #04241a; font-size: var(--fs-min); line-height: 1; vertical-align: 1px; }
.soc-badge.hot { background: var(--wb); color: #2a0610; }
.soc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px calc(16px + var(--safe-b)); display: grid; align-content: start; gap: 10px; }
.soc-sec { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(5, 12, 9, .32); border: 1px solid var(--line); min-width: 0; }
.soc-sec h3 { margin: 0; font-size: calc(15px * var(--fs-k)); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.soc-sec h3 small { font-weight: 400; font-size: var(--fs-min); color: var(--muted); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.soc-empty .se-lead { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: calc(14.5px * var(--fs-k)); }
.soc-empty .se-lead span { font-size: calc(20px * var(--fs-k)); }
.soc-inv { border-color: rgba(92, 200, 168, .45); background: rgba(92, 200, 168, .07); }
.soc-loading { margin: 0; padding: 20px 8px; text-align: center; color: var(--muted); font-size: var(--fs-min); }
.soc-points { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--fs-min); color: var(--muted); line-height: 1.6; }
.soc-foot { display: flex; justify-content: flex-end; }
.soc-form { display: flex; gap: 6px; align-items: center; }
.soc-form input { min-height: 40px; flex: 1; min-width: 0; font-size: calc(16px * var(--fs-k)); }
.soc-form.col { display: grid; gap: 8px; }
.soc-form textarea { min-height: 64px; resize: vertical; }
.soc-form .btn { flex: none; }

/* 人の列（パーティー・フレンド・ギルド） */
.sm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sm-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who acts" "state state" "hp hp";
  align-items: center; gap: 2px 8px; padding: 7px 8px 7px 6px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line);
}
.sm-row.off { opacity: .66; }
.sm-row.me { border-color: rgba(227, 179, 65, .4); }
.sm-row.inv { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ic who acts"; }
.sm-row.req { grid-template-areas: "who acts"; }
.sm-row.inv > .sn-ic { grid-area: ic; --nc: var(--hp); }
.sm-row.inv > .sm-id { grid-area: who; }
.sm-who { grid-area: who; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px; border: 0; background: none; color: inherit; text-align: left; border-radius: 10px; position: relative; }
.sm-who:hover .sm-id b { text-decoration: underline; text-underline-offset: 3px; }
.sm-id { display: grid; min-width: 0; line-height: 1.3; }
.sm-id b { display: flex; align-items: center; gap: 4px; font-size: calc(14px * var(--fs-k)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-id small { font-size: var(--fs-min); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crown { font-size: var(--fs-min); line-height: 1; }
.dot { position: absolute; left: 24px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: #5d6b62; box-shadow: 0 0 0 2px var(--panel-2); }
.dot.on { background: #5ce08a; }
.sm-state { grid-area: state; min-width: 0; padding-left: 40px; font-size: var(--fs-min); line-height: 1.4; }
.sm-state .st { color: var(--muted); overflow-wrap: anywhere; }
.sm-state .st.fight { color: #ffb398; font-weight: 700; }
.sm-state .st.zone { color: #cfe3d8; }
.sm-state .st.on { color: var(--hp); }
.sm-hp { grid-area: hp; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-left: 40px; }
.sm-hp .bar { height: 5px; }
.sm-hp small { font-size: var(--fs-min); color: var(--faint); }
.sm-acts, .sm-kick { grid-area: acts; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sm-rm { color: var(--faint); }

/* 旅の仲間（1人のとき） */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.comp-opt {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 1px; min-height: 92px; padding: 8px 4px 7px; border-radius: 12px; text-align: center;
  border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .35); color: var(--text); transition: border-color .15s, background .15s, transform .1s;
}
.comp-opt:hover { border-color: rgba(227, 179, 65, .55); }
.comp-opt:active { transform: translateY(1px); }
.comp-opt.on { border-color: var(--brass); background: rgba(227, 179, 65, .15); box-shadow: 0 0 0 3px rgba(227, 179, 65, .22); }
.comp-opt.on::after { content: '✓'; position: absolute; top: 4px; left: 7px; font-size: var(--fs-min); font-weight: 700; color: var(--brass-hi); }
.co-face { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--raise), var(--panel-2)); box-shadow: inset 0 0 0 2px rgba(227, 179, 65, .4); line-height: 0; overflow: hidden; margin-bottom: 2px; }
.co-face .em-fb { font-size: calc(22px * var(--fs-k)); line-height: 1; }
.comp-opt.solo .co-face { background: none; box-shadow: none; }
.co-name { font-size: var(--fs-min); line-height: 1.3; }
.co-role { font-size: var(--fs-min); color: var(--muted); line-height: 1.3; }
.co-bond { position: absolute; top: 4px; right: 6px; display: inline-flex; align-items: center; gap: 1px; font-size: var(--fs-min); font-weight: 700; color: var(--rose); line-height: 1; }

/* ギルド */
.g-head { display: flex; align-items: center; gap: 10px; }
.g-emblem { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; font-size: calc(26px * var(--fs-k)); background: radial-gradient(circle at 40% 30%, rgba(159, 180, 255, .35), rgba(5, 12, 9, .5)); box-shadow: inset 0 0 0 2px rgba(159, 180, 255, .5); }
.g-id { min-width: 0; display: grid; }
.g-id h3 { font-family: var(--font-dot); font-weight: 400; font-size: calc(19px * var(--fs-k)); color: #dbe3ff; }
.g-id small { font-size: var(--fs-min); color: var(--muted); }
.g-notice { padding: 8px 12px; border-radius: 10px; background: rgba(159, 180, 255, .08); border-left: 3px solid var(--guild); }
.g-notice b { font-size: var(--fs-min); color: var(--guild); }
.g-notice p { margin: 2px 0 0; font-size: var(--fs-min); overflow-wrap: anywhere; white-space: pre-wrap; }

/* ワールドボスの札（シート・冒険の受付） */
.wb-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--panel); }
.wb-card.up { border-color: rgba(255, 138, 154, .7); background: radial-gradient(120% 90% at 0% 0%, rgba(255, 77, 94, .2), transparent 60%), var(--panel); }
.wbc-art { width: 72px; height: 72px; display: grid; place-items: center; line-height: 0; border-radius: 12px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.wb-card.big .wbc-art { width: 104px; height: 104px; }
.wbc-art.empty { font-size: 30px; line-height: 1; color: var(--faint); }
.wbc-art .em-fb { font-size: 36px; line-height: 1; }
.wbc-body { min-width: 0; display: grid; gap: 4px; }
.wbc-kicker { margin: 0; font-size: var(--fs-min); font-weight: 700; letter-spacing: .14em; color: var(--wb); }
.wb-card.none .wbc-kicker, .wb-card.down .wbc-kicker { color: var(--faint); }
.wbc-name { margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: calc(20px * var(--fs-k)); line-height: 1.3; overflow-wrap: anywhere; }
.wbc-desc { margin: 0; font-size: var(--fs-min); color: var(--muted); line-height: 1.6; }
.wbc-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; margin: 2px 0; font-size: var(--fs-min); }
.wbc-meta dt { color: var(--faint); }
.wbc-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wbc-hp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.wbc-hp .bar { height: 7px; }
.wbc-hp .bar > i { background: linear-gradient(90deg, #d6264a, #ff8c99); }
.wbc-hp small { font-size: var(--fs-min); color: #ffd0d4; }
.wbc-go { margin-top: 4px; justify-self: start; }
.wbc-next { margin: 0; font-size: var(--fs-min); color: var(--muted); }
.wbc-next b { font-family: var(--font-dot); font-weight: 400; font-size: calc(17px * var(--fs-k)); color: var(--text); }
@media (max-width: 420px) { .wb-card.big { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* ---------------------------------------------------------------------
   人のカード
   --------------------------------------------------------------------- */
body:has(> .chat-sheet) .modal-back { z-index: 56; } /* 会話のシートの上に出す（名前をタップしたとき） */
.modal.pcard { width: min(460px, 100%); }
.pcard-head { display: flex; gap: 14px; align-items: center; }
.pc-id { min-width: 0; display: grid; gap: 1px; }
.pc-id h2 { margin: 0; font-size: calc(20px * var(--fs-k)); overflow-wrap: anywhere; }
.pc-id .ttl-line { margin: 0; font-size: var(--fs-min); color: var(--brass-hi); }
.pc-sub { margin: 0; font-size: var(--fs-min); color: var(--muted); }
.pc-tags { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pc-tags:empty { display: none; }
.chip.pc-guild { background: rgba(159, 180, 255, .16); color: #dbe3ff; }
.pcard-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.pca {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px; border-radius: 12px; text-align: left;
  border: 1.5px solid var(--line-2); background: var(--panel-2); color: var(--text); font-weight: 700; font-size: var(--fs-min); line-height: 1.3;
}
.pca:hover:not([disabled]) { border-color: var(--brass); background: var(--raise); }
.pca[disabled] { opacity: .5; cursor: not-allowed; }
.pca.hot { border-color: var(--rose); background: rgba(255, 134, 179, .12); }
.pca-ic { font-size: calc(19px * var(--fs-k)); line-height: 1; flex: none; }
.pca small { display: block; font-size: var(--fs-min); font-weight: 400; color: var(--muted); }
@media (max-width: 360px) { .pcard-acts { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------
   交換の窓
   --------------------------------------------------------------------- */
.trade-layer { position: fixed; inset: 0; z-index: 49; display: grid; place-items: end center; }
.tw-back { position: absolute; inset: 0; background: rgba(4, 9, 7, .62); animation: fadeIn .15s; }
.trade-win {
  position: relative; width: min(720px, 100%); max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border: 1.5px solid rgba(169, 226, 124, .55); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); animation: sheetUp .22s ease-out;
}
@media (min-width: 700px) { .trade-layer { place-items: center; padding: 16px; } .trade-win { border-radius: 18px; } }
.tw-inner { display: grid; gap: 10px; padding: 14px 14px calc(14px + var(--safe-b)); }
.tw-head { display: flex; align-items: center; gap: 10px; }
.tw-head h2 { flex: 1; margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: calc(18px * var(--fs-k)); }
.tw-head h2 small { font-size: var(--fs-min); color: var(--muted); font-weight: 400; }
.tw-note { margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(226, 238, 228, .06); font-size: var(--fs-min); color: var(--muted); }
.tw-note.warn { background: rgba(240, 116, 74, .14); color: #ffd2c2; font-weight: 700; animation: snIn .3s ease-out; }
.tw-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@media (max-width: 520px) { .tw-cols { grid-template-columns: minmax(0, 1fr); } }
.tw-col { display: grid; align-content: start; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(5, 12, 9, .35); border: 1.5px solid var(--line); min-width: 0; transition: border-color .2s, box-shadow .2s; }
.tw-col.locked { border-color: var(--hp); box-shadow: 0 0 0 2px rgba(92, 200, 168, .25); }
.tw-col h3 { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: calc(14px * var(--fs-k)); }
.tw-lock { padding: 1px 9px; border-radius: 999px; font-size: var(--fs-min); font-weight: 700; background: rgba(226, 238, 228, .08); color: var(--faint); }
.tw-lock.on { background: var(--hp); color: #04241a; }
.tw-lock.ok { background: var(--brass); color: var(--brass-ink); }
.tw-empty { margin: 0; padding: 10px 4px; text-align: center; font-size: var(--fs-min); color: var(--faint); }
.tw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tw-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px; border-radius: 10px; background: var(--panel-2); }
.ti-ic { width: 30px; height: 30px; display: grid; place-items: center; line-height: 0; font-size: calc(17px * var(--fs-k)); }
.ti-ic .em-fb { line-height: 1; }
.ti-name { display: grid; min-width: 0; line-height: 1.3; }
.ti-name b { font-size: var(--fs-min); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ti-name small { font-size: var(--fs-min); color: var(--muted); }
.ti-n { font-family: var(--font-dot); font-size: calc(15px * var(--fs-k)); }
.tw-item.gold b { font-family: var(--font-dot); font-weight: 400; font-size: calc(16px * var(--fs-k)); color: var(--brass-hi); }
.ti-x { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .35); color: var(--muted); font-size: var(--fs-min); display: grid; place-items: center; }
.ti-x::after { content: ''; position: absolute; inset: -6px; }
.ti-x:hover { color: #ffc0a8; }
.tw-gold { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-min); color: var(--muted); }
.tw-gold input { width: 8.5em; min-height: 40px; text-align: right; font-size: calc(16px * var(--fs-k)); }
.tw-gold small { flex-basis: 100%; font-size: var(--fs-min); color: var(--faint); }
.tw-add { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-add .btn small { font-weight: 400; color: var(--muted); }
.tw-add .btn.on { border-color: var(--trade); color: #e4f7d2; }
.tw-pick { border-radius: 12px; border: 1px dashed rgba(169, 226, 124, .45); padding: 6px; background: rgba(169, 226, 124, .05); }
.tw-pick ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.tp-row { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 42px; padding: 3px 8px; border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.tp-row input { width: 20px; height: 20px; accent-color: var(--hp); }
.tp-row.on { box-shadow: inset 0 0 0 1.5px var(--hp); }
.tp-row.off { opacity: .45; cursor: not-allowed; }
.tp-mat { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; background: var(--panel-2); }
.tp-mat.on { box-shadow: inset 0 0 0 1.5px var(--hp); }
.tp-mat.off { opacity: .5; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper b { min-width: 2em; text-align: center; font-family: var(--font-dot); font-weight: 400; font-size: calc(16px * var(--fs-k)); }
.st-b { width: 36px; height: 36px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--panel); color: var(--text); font-size: calc(18px * var(--fs-k)); line-height: 1; display: grid; place-items: center; }
.st-b[disabled], .st-all[disabled] { opacity: .35; cursor: not-allowed; }
.st-all { min-height: 36px; padding: 0 8px; border-radius: 10px; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted); font-size: var(--fs-min); font-weight: 700; }
.tw-pick-empty { margin: 0; }
.tw-foot { display: grid; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.tw-state { margin: 6px 0 0; font-size: var(--fs-min); color: var(--text); text-align: center; }
.tw-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tw-btns .btn { flex: 1 1 140px; min-height: 48px; }
.tw-btns .btn.on { border-color: var(--hp); background: rgba(92, 200, 168, .16); color: var(--hp); }
.tw-why { margin: 0; padding: 12px; border-radius: 12px; background: rgba(240, 116, 74, .12); color: #ffd2c2; font-weight: 700; }
.trade-done .td-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.trade-done .td-cols h3 { margin: 0 0 6px; font-size: var(--fs-min); color: var(--muted); }
@media (max-width: 420px) { .trade-done .td-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------
   ワールドボスのごほうび
   --------------------------------------------------------------------- */
.modal.wbr-modal { border-color: rgba(255, 138, 154, .7); background: radial-gradient(120% 60% at 50% 0%, rgba(255, 77, 94, .2), transparent 60%), var(--panel); }
.wbr { display: grid; justify-items: center; text-align: center; gap: 4px; }
.wbr-kicker { margin: 0; font-size: var(--fs-min); font-weight: 700; letter-spacing: .2em; color: var(--wb); }
.wbr-name { margin: 0 !important; font-family: var(--font-dot); font-weight: 400; font-size: calc(26px * var(--fs-k)) !important; }
.wbr-rank { margin: 4px 0; display: flex; align-items: baseline; gap: 4px; color: var(--muted); }
.wbr-rank b { font-family: var(--font-dot); font-weight: 400; font-size: 46px; line-height: 1; color: var(--brass-hi); text-shadow: 0 0 18px rgba(241, 204, 108, .55); animation: readyPop .5s cubic-bezier(.2, .9, .3, 1.4); }
.wbr-list { display: grid; grid-template-columns: auto auto; gap: 3px 16px; margin: 6px 0; font-size: calc(14px * var(--fs-k)); text-align: left; }
.wbr-list dt { color: var(--faint); }
.wbr-list dd { margin: 0; text-align: right; }
.wbr-list dd.gain { color: var(--brass-hi); font-weight: 700; }
.wbr-mats { margin: 4px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; font-size: var(--fs-min); }
.wbr-mats b { margin-right: 4px; color: var(--muted); font-size: var(--fs-min); }
.wbr-legend { margin: 6px 0 0; padding: 8px 14px; border-radius: 12px; background: linear-gradient(100deg, rgba(227, 179, 65, .28), rgba(227, 179, 65, .06)); border: 1.5px solid var(--brass); color: #ffe9a8; }
.wbr .actions { justify-content: center !important; width: 100%; }

/* ---------------------------------------------------------------------
   会話のタブとチャンネルの印・なかまのボタン
   --------------------------------------------------------------------- */
.chat-soc-box { display: inline-flex; flex: none; }
.chat-soc { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--panel-2); color: var(--text); font-size: var(--fs-min); font-weight: 700; white-space: nowrap; }
.chat-soc:hover { border-color: rgba(92, 200, 168, .7); }
.chat-tabs { display: flex; gap: 3px; padding: 4px 10px 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.chat-tabs::-webkit-scrollbar { display: none; }
.ct { position: relative; flex: 1 0 auto; min-height: 44px; padding: 0 10px; border-radius: 9px; border: 1.5px solid transparent; background: transparent; color: var(--muted); font-size: var(--fs-min); font-weight: 700; white-space: nowrap; }
.ct[aria-selected="true"] { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.ct-zone[aria-selected="true"] { border-color: rgba(127, 224, 238, .6); color: #c8f3f9; }
.ct-party[aria-selected="true"] { border-color: rgba(92, 200, 168, .7); color: var(--hp); }
.ct-guild[aria-selected="true"] { border-color: rgba(159, 180, 255, .7); color: #dbe3ff; }
.ct-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; padding: 0 5px; border-radius: 11px; line-height: 1; background: var(--ember); color: #2a0d03; font-size: var(--fs-min); line-height: 1; vertical-align: 1px; }
.chb { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 5px; font-style: normal; font-size: var(--fs-min); font-weight: 700; line-height: 1.6; vertical-align: 1px; background: rgba(226, 238, 228, .1); color: var(--faint); white-space: nowrap; }
.chb.ch-zone { background: rgba(127, 224, 238, .14); color: #a8eef6; }
.chb.ch-party { background: rgba(92, 200, 168, .16); color: var(--hp); }
.chb.ch-guild { background: rgba(159, 180, 255, .16); color: #c3d0ff; }
.chb.ch-whisper { background: rgba(255, 134, 179, .16); color: var(--rose); }
.msg.ch-party.sys, .msg.ch-guild.sys { color: var(--muted); }
.msg.whisper .who::after { content: '：'; font-size: inherit; color: var(--faint); } /* 「ささやき」は前の印で出す */
.person .pz { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-min); color: var(--faint); margin-left: 2px; }
.person.in-battle .pz { color: #ffb398; }

/* ---------------------------------------------------------------------
   冒険の受付（冒険のしかた・いまの戦い・試練の塔）
   --------------------------------------------------------------------- */
.adv-guide { display: grid; gap: 10px; }
.adv-guide .card-title { display: flex; align-items: center; gap: 8px; font-size: calc(16px * var(--fs-k)); }
.ag-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: ag; }
.ag-steps li { position: relative; display: grid; gap: 1px; padding: 2px 0 2px 38px; counter-increment: ag; }
.ag-steps li::before { content: counter(ag); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-dot); font-size: calc(15px * var(--fs-k)); color: var(--brass-ink); background: var(--brass); box-shadow: 0 2px 0 var(--brass-deep); }
.ag-steps b { font-size: calc(14.5px * var(--fs-k)); line-height: 1.45; }
.ag-steps small { font-size: var(--fs-min); color: var(--muted); line-height: 1.55; }
.battle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bt-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ic main end" "ic avs end"; align-items: center; gap: 2px 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1.5px solid var(--line); }
.bt-row.mine { border-color: rgba(227, 179, 65, .5); }
.bt-ic { grid-area: ic; font-size: calc(20px * var(--fs-k)); text-align: center; }
.bt-main { grid-area: main; display: grid; min-width: 0; line-height: 1.35; }
.bt-main b { font-size: calc(14.5px * var(--fs-k)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-main small { font-size: var(--fs-min); color: var(--muted); overflow-wrap: anywhere; }
.bt-avs { grid-area: avs; display: flex; gap: 3px; }
.bt-avs .avatar.sm { width: 24px; height: 24px; }
.bt-end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tower-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.tower-card.locked { opacity: .85; }
.tc-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; font-size: 30px; background: radial-gradient(circle at 40% 30%, rgba(199, 173, 255, .3), rgba(5, 12, 9, .5)); box-shadow: inset 0 0 0 2px rgba(199, 173, 255, .45); }
.tc-body { min-width: 0; display: grid; gap: 4px; }
.tc-body p { margin: 0; }
.tc-how { font-size: calc(14px * var(--fs-k)); }
.tc-how b { color: #e2d0ff; }
.tc-intro { font-size: var(--fs-min); color: var(--muted); line-height: 1.6; }
.tc-best { font-size: var(--fs-min); color: var(--muted); }
.tc-best b { font-family: var(--font-dot); font-weight: 400; font-size: calc(18px * var(--fs-k)); color: var(--brass-hi); }

/* 「視差効果を減らす」設定（動きは app.css の全体の決まりで止まる） */
@media (prefers-reduced-motion: reduce) {
  .sn-time { display: none; } /* 止まった線はまぎらわしいので出さない（期限が来たら札は消える） */
}