/* 月夜の人狼 — 見た目 * * ── 骨格の規則（ルート AGENTS.md）───────────────────────────── * ・**全画面固定にしない。** 普通にスクロールするページの中の箱 * ・箱は max-width 1200。重なる UI は箱の中に position:absolute。**fixed は使わない** * ・`hidden` で出し入れする要素に display を書かない * * ── 絵づくり ────────────────────────────────────────────────── * 夜の村。月明かりの象牙色を文字に、くすんだ金を細い罫に、深い紅を «押す場所» にだけ使う。 * 見出しは明朝（Shippori Mincho）と Cinzel。本文はシステムのゴシックのまま */ /* **これを先頭に置く。** 下で .foo { display:flex } を書いた瞬間に hidden が効かなくなる */ [hidden] { display: none !important; } /* 言語。要らないほうを最初から伏せる（ の先読みが を先に立てる）。 出す側の display は各要素の指定のまま（伏せる側だけ !important で消す） */ html[lang="ja"] [lang="en"], html[lang="en"] [lang="ja"] { display: none !important; } :root { --night: #0b0c16; --night2: #11121f; --panel: rgba(19, 19, 34, .86); --panel2: #161628; --ink: #efe6cf; --dim: #9a95a8; --faint: #6c6880; --hair: rgba(201, 169, 110, .22); --hair2: rgba(201, 169, 110, .45); --gold: #c9a96e; --gold2: #e6cf9a; --crimson: #8e2536; --crimson2: #c23b4f; --white: #9fd0e8; --black: #e98585; --serif: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; --latin: "Cinzel", "Shippori Mincho", serif; --r: 14px; } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(900px 480px at 78% -8%, rgba(243, 233, 207, .07) 0%, transparent 60%), radial-gradient(1200px 700px at 50% 120%, rgba(142, 37, 54, .12) 0%, transparent 60%), var(--night); color: var(--ink); font: 14px/1.75 system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; -webkit-text-size-adjust: 100%; } #app { max-width: 1240px; margin: 0 auto; padding: 0 16px 56px; } button { font: inherit; color: inherit; } ::selection { background: rgba(194, 59, 79, .45); } /* ── ヘッダ ───────────────────────────────────────────────── */ #site-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--hair); } .apps-link { color: var(--dim); text-decoration: none; font-weight: 600; font-size: 13px; padding: 3px 10px; border: 1px solid var(--hair); border-radius: 999px; } .apps-link:hover { color: var(--ink); border-color: var(--hair2); } .header-logo { margin: 0; font: 700 18px/1.2 var(--serif); letter-spacing: .14em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .header-logo > a { color: inherit; text-decoration: none; } .header-logo > a > span { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .header-logo > a:hover { color: var(--gold2); } .header-sub { font: 500 12px var(--serif); letter-spacing: .2em; color: var(--dim); } /* 英語は字間を詰める。日本語の明朝向けに広げた字間（.1〜.5em）だと間延びし、名簿の名前も切れた。 個別に合わせるより一律のほうが揃う。題字の上の «月夜の人狼» は飾りなので広いまま */ html[lang="en"] body * { letter-spacing: .02em !important; } html[lang="en"] .eyebrow, html[lang="en"] .eyebrow * { letter-spacing: .5em !important; } html[lang="en"] .primary { text-indent: 0; } html[lang="en"] .logo { font-size: clamp(34px, 5.6vw, 72px); } /* 言語の切り替え */ .langbar { display: inline-flex; gap: 4px; margin-left: auto; } .langbar button { padding: 3px 10px; font-size: 12px; border-radius: 999px; color: var(--dim); background: transparent; border: 1px solid var(--hair); cursor: pointer; } .langbar button:hover { color: var(--ink); border-color: var(--hair2); } .langbar button[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); } /* 音あり・なし。言語の切り替えの左に並べる */ .soundbtn { margin-left: auto; padding: 3px 12px; font-size: 12px; border-radius: 999px; cursor: pointer; color: var(--dim); background: transparent; border: 1px solid var(--hair); } .soundbtn:hover { color: var(--ink); border-color: var(--hair2); } .soundbtn[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); } .soundbtn + .langbar { margin-left: 0; } /* ── 入口 ─────────────────────────────────────────────────── */ #setup { max-width: 1200px; margin: 20px auto 0; } #hero { position: relative; overflow: hidden; aspect-ratio: 1200 / 460; max-height: 60svh; width: 100%; border-radius: 20px; border: 1px solid var(--hair); background: #070812; } #hero .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .clouds { animation: drift 60s ease-in-out infinite alternate; } @keyframes drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } } .twinkle { animation: twinkle 4s ease-in-out infinite alternate; } @keyframes twinkle { from { opacity: .25; } to { opacity: .9; } } @media (prefers-reduced-motion: reduce) { .clouds, .twinkle { animation: none; } } .hero-text { position: absolute; left: 7%; top: 16%; max-width: 60%; } .eyebrow { margin: 0 0 6px; font: 500 13px var(--latin); letter-spacing: .55em; color: var(--gold); } .logo { margin: 0; font: 800 clamp(40px, 7.2vw, 88px)/1.1 var(--serif); letter-spacing: .12em; color: var(--ink); text-shadow: 0 0 28px rgba(243, 233, 207, .22), 0 2px 0 rgba(0, 0, 0, .5); } .lead { margin: 16px 0 0; font: 500 clamp(14px, 1.6vw, 18px)/1.9 var(--serif); letter-spacing: .12em; color: #d9cfb6; } .entry { position: relative; z-index: 1; max-width: 680px; margin: -56px auto 0; background: var(--panel); backdrop-filter: blur(8px); border: 1px solid var(--hair); border-radius: 20px; padding: 24px 24px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); } .entry-label, .field-label { font: 700 13px var(--serif); letter-spacing: .3em; color: var(--gold); text-align: center; margin-bottom: 12px; } .field-label { text-align: left; margin-bottom: 8px; } .presets { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; } .presets button { min-width: 72px; padding: 8px 14px 6px; font: 700 24px/1 var(--serif); letter-spacing: .04em; background: transparent; border: 1px solid var(--hair); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; } .presets button small { font-size: 12px; margin-left: 2px; color: var(--dim); } .presets button:hover { border-color: var(--hair2); } .presets button.on { background: linear-gradient(180deg, #a3303f, var(--crimson)); border-color: var(--gold); } .presets button.on small { color: var(--ink); } .num-line { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); } .comp-summary { text-align: center; color: var(--dim); font: 500 13px var(--serif); letter-spacing: .08em; margin: 14px 0 0; } .levels { display: flex; flex-wrap: wrap; gap: 8px; } .levels button, .small, .act-btn, .chip { background: transparent; border: 1px solid var(--hair); border-radius: 10px; padding: 6px 14px; cursor: pointer; transition: border-color .15s, background .15s; } .levels button:hover, .small:hover, .act-btn:hover, .chip:hover { border-color: var(--hair2); background: rgba(201, 169, 110, .06); } .levels button.on, .small.on { background: rgba(142, 37, 54, .55); border-color: var(--gold); } input[type="number"], select { background: var(--night); color: var(--ink); border: 1px solid var(--hair); border-radius: 8px; padding: 6px 8px; font: inherit; } input[type="number"] { width: 64px; text-align: center; } input[type="checkbox"] { accent-color: var(--crimson2); } .primary { display: block; width: 100%; margin: 18px 0 4px; font: 800 20px/1 var(--serif); letter-spacing: .5em; text-indent: .5em; color: var(--ink); background: linear-gradient(180deg, #b0344a 0%, var(--crimson) 100%); border: 1px solid var(--gold); border-radius: 14px; padding: 16px; box-shadow: inset 0 0 0 3px rgba(11, 12, 22, .55), 0 10px 30px rgba(142, 37, 54, .35); cursor: pointer; transition: filter .15s, transform .15s; } .primary:hover { filter: brightness(1.12); } .primary:active { transform: translateY(1px); } .primary:disabled { opacity: .35; cursor: default; filter: none; } /* 今日の村。入口では «村に入る» より控えめに */ .daily { display: flex; align-items: baseline; justify-content: center; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 9px; cursor: pointer; font: 700 15px var(--serif); letter-spacing: .3em; color: var(--gold2); background: transparent; border: 1px solid var(--hair2); border-radius: 12px; transition: background .15s, border-color .15s; } .daily:hover { background: rgba(201, 169, 110, .08); border-color: var(--gold); } .daily small { font: 500 12px var(--serif); letter-spacing: .06em; color: var(--dim); } #advanced { margin-top: 10px; border-top: 1px solid var(--hair); } #advanced summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 2px 4px; font: 700 14px var(--serif); letter-spacing: .2em; color: var(--dim); } #advanced summary::-webkit-details-marker { display: none; } #advanced summary::before { content: "▸"; color: var(--gold); transition: transform .15s; } #advanced[open] summary::before { transform: rotate(90deg); } #advanced summary:hover { color: var(--ink); } .adv-now { margin-left: auto; font: 500 12px var(--serif); letter-spacing: .05em; color: var(--faint); } .field { padding: 14px 0; border-top: 1px solid rgba(201, 169, 110, .1); } #advanced .field:first-of-type { border-top: 0; } .roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .role-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--hair); border-radius: 10px; padding: 6px 10px; } .role-row .rname { flex: 1; font: 700 14px var(--serif); } .role-row .rname small { display: block; color: var(--dim); font: 400 11px/1.3 system-ui, sans-serif; } .step { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 1px solid var(--hair); cursor: pointer; } .step:hover { border-color: var(--hair2); } .role-row input { width: 46px; } .villagers { margin: 10px 0 0; color: var(--dim); } .villagers b { color: var(--ink); } .hint { color: var(--dim); margin: 8px 0 0; font-size: 13px; } .check { display: block; margin: 5px 0; } .me-row { display: grid; grid-template-columns: 5em auto 1fr; gap: 10px; align-items: center; padding: 2px 0; } .me-row b { font: 700 14px var(--serif); letter-spacing: .06em; } .me-row small { color: var(--dim); font-size: 12px; } .me-stars { display: inline-flex; } .me-stars button { background: none; border: 0; padding: 2px 3px; cursor: pointer; font-size: 20px; line-height: 1; color: rgba(201, 169, 110, .25); transition: color .12s; } .me-stars button.on { color: var(--gold2); } .me-stars button:hover { color: var(--gold); } .error { color: var(--black); margin: 12px 0 0; text-align: center; } /* ── 村 ───────────────────────────────────────────────────── */ #game { margin-top: 20px; } #stage { position: relative; max-width: 1200px; margin: 0 auto; background: radial-gradient(600px 260px at 100% 0%, rgba(243, 233, 207, .05), transparent 70%), var(--panel2); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; transition: background .6s; } #stage.night { background: radial-gradient(600px 300px at 100% 0%, rgba(243, 233, 207, .10), transparent 70%), #0c0d1c; } #topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--hair); background: rgba(0, 0, 0, .18); } #day-label { font: 800 18px var(--serif); letter-spacing: .12em; } #day-label::before { content: "☾"; color: var(--gold); margin-right: 8px; font-weight: 400; } #phase-label { font: 500 13px var(--serif); letter-spacing: .2em; color: var(--dim); } /* 吊り縄。最後の 1 本は金で示す（紅は押す場所にだけ使う） */ #rope-label { font: 500 12px var(--serif); letter-spacing: .12em; color: var(--dim); padding: 2px 10px; border: 1px solid var(--hair); border-radius: 999px; cursor: help; } #rope-label.last { color: var(--gold); border-color: var(--gold); } #role-badge { margin-left: auto; font: 500 13px var(--serif); color: var(--dim); letter-spacing: .1em; } #role-badge .rb { margin-left: 4px; padding: 3px 14px; border-radius: 999px; color: var(--ink); font: 700 14px var(--serif); letter-spacing: .15em; background: rgba(142, 37, 54, .6); border: 1px solid var(--gold); } .small { padding: 4px 12px; font-size: 12px; } #board { display: grid; grid-template-columns: 300px 1fr; min-height: 0; } #roster { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; padding: 12px; border-right: 1px solid var(--hair); max-height: 640px; overflow-y: auto; } .card { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: center; background: rgba(255, 255, 255, .02); border: 1px solid rgba(201, 169, 110, .14); border-radius: 12px; padding: 6px; text-align: left; cursor: default; min-width: 0; transition: border-color .2s, box-shadow .2s; } .card .face { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 1px var(--hair); } .card .face svg, .msg .face svg, .chip .face svg { width: 100%; height: 100%; display: block; border-radius: 50%; } .card .nm { font: 700 14px/1.25 var(--serif); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 22px; } .card .sub { font-size: 11px; color: var(--dim); line-height: 1.35; min-height: 15px; } .nowrap { white-space: nowrap; } .card.dead { opacity: .45; } .card.dead .nm { text-decoration: line-through; text-decoration-color: var(--crimson2); } .card.speaking { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 18px rgba(201, 169, 110, .18); } .card.me { background: linear-gradient(180deg, rgba(201, 169, 110, .10), rgba(201, 169, 110, .03)); } .badge { display: inline-block; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; box-sizing: border-box; padding: 0 6px; margin-right: 3px; border-radius: 5px; font: 700 10px/16px var(--serif); background: #2d2c46; color: var(--ink); } .badge.seer { background: #2e4270; } .badge.medium { background: #4f3574; } .badge.knight { background: #2f6150; } .badge.mason { background: #6b5a2e; } .badge.wolf { background: var(--crimson); } /* 名乗り（自称）は枠だけ、正体は塗り。同じ «占» の字で意味が 2 つあって取り違えられた（2026-09-27） */ .badge.claim { background: transparent; border: 1px solid #6f8fd0; color: #b9cdf5; line-height: 14px; } .badge.claim.medium { border-color: #9a78c8; color: #d6c3f0; } .badge.claim.knight { border-color: #5fa58c; color: #bfe6d6; } .badge.claim.mason { border-color: #b59a55; color: #eadbb0; } /* あなたの占い・霊能の結果 */ .res { display: inline; margin-right: 3px; font: 700 10px/15px var(--serif); word-break: keep-all; } .memo { position: absolute; top: 4px; right: 4px; width: 22px; height: 20px; border-radius: 6px; border: 1px dashed rgba(201, 169, 110, .25); background: transparent; font: 700 11px/18px var(--serif); padding: 0; cursor: pointer; color: var(--dim); } .memo.m0 { font-size: 8px; letter-spacing: 0; color: var(--faint); } .memo.m1 { border-style: solid; color: var(--white); border-color: var(--white); } .memo.m2 { border-style: solid; color: var(--black); border-color: var(--black); } .memo.m3 { border-style: solid; color: var(--gold2); border-color: var(--gold2); } #talk { display: flex; flex-direction: column; min-width: 0; } #feed { height: clamp(320px, 58svh, 540px); overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; scrollbar-color: rgba(201, 169, 110, .3) transparent; } .msg { display: flex; gap: 10px; align-items: flex-start; animation: rise .25s ease-out; } @keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .msg .face { width: 38px; height: 38px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--hair); } .msg .who { font: 700 12px/1.3 var(--serif); color: var(--dim); letter-spacing: .08em; margin-bottom: 3px; } .msg .bubble { background: rgba(255, 255, 255, .035); border: 1px solid rgba(201, 169, 110, .14); border-left: 2px solid rgba(201, 169, 110, .35); border-radius: 3px 12px 12px 12px; padding: 7px 12px; max-width: 640px; } .msg.act-suspect .bubble, .msg.act-counter .bubble, .msg.act-agree .bubble, .msg.act-objectDefend .bubble, .msg.act-voteCall .bubble, .msg.act-answer .bubble, .msg.act-evidence .bubble { border-left-color: var(--crimson2); } .msg.act-defend .bubble, .msg.act-object .bubble, .msg.act-agreeDefend .bubble, .msg.act-spare .bubble, .msg.act-pactYes .bubble, .msg.act-proof .bubble { border-left-color: #5b9bbd; } .msg.act-ask .bubble, .msg.act-pact .bubble, .msg.act-designate .bubble, .msg.act-coCall .bubble { border-left-color: var(--gold2); } .msg.act-co .bubble, .msg.act-report .bubble { border-color: rgba(201, 169, 110, .45); border-left-color: var(--gold2); background: linear-gradient(90deg, rgba(201, 169, 110, .10), rgba(201, 169, 110, .02)); } .msg.mine .bubble { background: rgba(201, 169, 110, .08); } .sys { align-self: center; color: var(--dim); font: 500 13px var(--serif); letter-spacing: .06em; text-align: center; } .sys.phase { display: flex; align-items: center; gap: 12px; align-self: stretch; justify-content: center; color: var(--gold2); font: 700 14px var(--serif); letter-spacing: .3em; margin: 10px 0 2px; } .sys.phase::before, .sys.phase::after { content: ""; flex: 1; max-width: 160px; height: 1px; background: linear-gradient(90deg, transparent, var(--hair2), transparent); } .secret { align-self: stretch; border: 1px solid rgba(201, 169, 110, .5); color: var(--gold2); border-radius: 10px; padding: 8px 12px; font: 500 13px var(--serif); letter-spacing: .05em; background: rgba(201, 169, 110, .07); } .votes-msg { align-self: stretch; font-size: 12px; color: var(--dim); border: 1px solid rgba(201, 169, 110, .14); border-radius: 10px; padding: 7px 12px; } .votes-msg b { color: var(--ink); font-family: var(--serif); } #actions { border-top: 1px solid var(--hair); background: rgba(0, 0, 0, .22); padding: 14px 18px; min-height: 96px; } .act-title { font: 700 15px var(--serif); letter-spacing: .08em; margin-bottom: 10px; } .act-title small { color: var(--dim); font: 400 12px system-ui, sans-serif; letter-spacing: 0; margin-left: 8px; } .act-row { display: flex; flex-wrap: wrap; gap: 8px; } .act-btn { font: 700 14px var(--serif); letter-spacing: .08em; padding: 8px 18px; } .act-btn.main { background: linear-gradient(180deg, #a3303f, var(--crimson)); border-color: var(--gold); } .act-btn.more { color: var(--dim); } .act-btn.more.on { color: var(--ink); border-color: var(--hair2); } .more-row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(201, 169, 110, .18); } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 999px; font: 700 13px var(--serif); } .chip .face { width: 28px; height: 28px; border-radius: 50%; } .chip .hintmark { color: var(--gold2); font-size: 11px; } /* 選ぶ顔に添える判断材料（名乗り・あなたの結果・仲間） */ .chip .ctag { font: 500 10px system-ui, sans-serif; color: var(--dim); margin-left: -2px; } .chip .ctag.tb { color: var(--black); } .chip .ctag.tw { color: var(--white); } /* 選ぶ画面の添え書き（占い済みの人・続けて守れない人） */ .act-note { color: var(--dim); font-size: 12px; margin: -4px 0 8px; } /* 行動の説明。押す前に開ける */ .act-help { margin-top: 10px; font-size: 12px; color: var(--dim); } .act-help summary { cursor: pointer; color: var(--gold2); font-family: var(--serif); letter-spacing: .08em; width: fit-content; } .act-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 6px 0 0; } .act-help dt { color: var(--ink); font-family: var(--serif); font-weight: 700; } .act-help dd { margin: 0; } .waiting { color: var(--faint); font-family: var(--serif); letter-spacing: .4em; } /* 証拠・作戦の一覧。1 行に 1 つ */ .ev-list { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .act-btn.ev, .act-btn.plan { font: 500 13px/1.5 var(--serif); letter-spacing: .04em; text-align: left; padding: 6px 14px; } .act-btn.plan { border-color: var(--hair2); } /* 夜の相談 */ .meet { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .meet .face { width: 44px; height: 44px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--crimson2); } .meet .face svg { width: 100%; height: 100%; display: block; border-radius: 50%; } .meet .act-title { margin-bottom: 2px; } .meet-say { font: 500 14px var(--serif); color: #d9cfb6; } /* 名乗りと結果・投票 */ #notes { max-width: 1200px; margin: 14px auto 0; background: var(--panel2); border: 1px solid var(--hair); border-radius: 14px; padding: 10px 16px; } #notes summary { cursor: pointer; font: 700 14px var(--serif); letter-spacing: .2em; color: var(--gold); } #notes table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 13px; } #notes th, #notes td { border-bottom: 1px solid rgba(201, 169, 110, .12); padding: 5px 6px; text-align: left; vertical-align: top; } #notes th { color: var(--dim); font: 600 12px var(--serif); letter-spacing: .1em; } .tw { color: var(--white); } .tb { color: var(--black); font-weight: 700; } .empty-note { color: var(--dim); font-size: 13px; } /* 決着 */ .end-box { text-align: center; padding: 6px 0; } .end-box h3 { margin: 0 0 8px; font: 800 28px var(--serif); letter-spacing: .3em; } .end-box.win h3 { color: var(--gold2); text-shadow: 0 0 20px rgba(230, 207, 154, .3); } .end-box.lose h3 { color: var(--black); } .end-box > div:nth-child(2) { font-family: var(--serif); letter-spacing: .08em; } .end-roles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0 14px; } .end-roles span { border: 1px solid rgba(201, 169, 110, .18); border-radius: 999px; padding: 2px 10px; font: 500 12px var(--serif); } .end-roles .w { border-color: var(--crimson2); color: #f0b7bf; } .end-sum { font: 500 13px var(--serif); color: var(--dim); letter-spacing: .06em; margin: -4px 0 12px; } .share-box { margin: 16px auto 4px; padding: 14px 12px 12px; max-width: 560px; border-top: 1px solid var(--hair); } .share-title { font: 700 13px var(--serif); letter-spacing: .3em; color: var(--gold); margin-bottom: 10px; } .share-card { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto 12px; border-radius: 10px; border: 1px solid var(--hair2); box-shadow: 0 8px 28px rgba(0, 0, 0, .45); } .share-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; } .share-btn { font: 600 13px var(--serif); letter-spacing: .04em; color: var(--ink); cursor: pointer; background: rgba(255, 255, 255, .03); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 13px; } .share-btn:hover { border-color: var(--gold); color: var(--gold2); } .share-btn[data-share="x"] { font-weight: 800; min-width: 44px; } .share-note { margin-top: 6px; font: 500 12px/1.6 var(--serif); color: var(--dim); } /* 答え合わせ。#feed.review のときだけ «本当の役職» と «嘘» の印を見せ、人狼側の発言を紅く縁取る */ .msg .truth, .msg .lie { display: none; } #feed.review .msg .truth, #feed.review .msg .lie { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 5px; font: 700 10px/17px var(--serif); letter-spacing: .06em; } #feed.review .msg .truth { background: #2d2c46; color: var(--ink); } #feed.review .msg .truth.w { background: var(--crimson); } #feed.review .msg .lie { background: transparent; border: 1px solid var(--crimson2); color: #f0b7bf; } /* 答え合わせの夜の行動。会話欄の «夜» の区切りの下に出る */ .night-note { display: none; } #feed.review .night-note { display: block; align-self: stretch; border: 1px solid rgba(194, 59, 79, .45); border-radius: 10px; padding: 7px 12px; font: 500 13px/1.8 var(--serif); letter-spacing: .04em; color: #f0d9c4; background: rgba(142, 37, 54, .12); } #feed.review .msg.by-wolf .bubble { border-color: rgba(194, 59, 79, .45); background: rgba(142, 37, 54, .12); } /* ── 発言の札・関係図 ─────────────────────────────────────── */ .msg .who .to { margin-left: 8px; font: 500 11px system-ui, sans-serif; letter-spacing: 0; padding: 1px 7px; border-radius: 6px; white-space: nowrap; } .msg .who .to.sus { color: var(--black); background: rgba(194, 59, 79, .16); } .msg .who .to.def { color: var(--white); background: rgba(91, 155, 189, .16); } .msg .who .to.ask { color: var(--gold2); background: rgba(201, 169, 110, .12); } /* 人物の札。#stage の中に重ねる */ .card { cursor: pointer; } .card:hover { border-color: var(--hair2); } .msg .face { cursor: pointer; } #profile { position: absolute; z-index: 6; top: 58px; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 24px)); max-height: calc(100% - 72px); overflow-y: auto; background: #0e0f1d; border: 1px solid var(--gold); border-radius: 16px; padding: 16px 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); } #profile-close { position: absolute; top: 12px; right: 12px; } .pf-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; } .pf-head .face { width: 72px; height: 72px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--hair2); } .pf-head .face svg { width: 100%; height: 100%; display: block; border-radius: 50%; } .pf-name { font: 800 20px var(--serif); letter-spacing: .12em; } .pf-sub { font-size: 12px; color: var(--dim); } .pf-stats { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } .pf-stats > div { display: grid; grid-template-columns: 4.5em auto 1fr; gap: 10px; align-items: baseline; } .pf-stats b { font: 700 14px var(--serif); letter-spacing: .08em; } .pf-stats small { color: var(--faint); font-size: 11px; } .stars { color: var(--gold2); letter-spacing: .05em; white-space: nowrap; } .stars i { font-style: normal; color: rgba(201, 169, 110, .22); } .pf-rec { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 13px; } .pf-rec th { width: 5.5em; text-align: left; vertical-align: top; white-space: nowrap; color: var(--dim); font: 600 12px var(--serif); padding: 5px 10px 5px 0; } .pf-rec td { padding: 5px 0; border-bottom: 1px solid rgba(201, 169, 110, .1); } #graph { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #0c0d1a; } .graph-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--hair); } .graph-title { font: 800 16px var(--serif); letter-spacing: .2em; } .graph-modes { display: inline-flex; gap: 6px; flex-wrap: wrap; } #graph-close { margin-left: auto; } .graph-legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 6px 16px; font-size: 12px; color: var(--dim); } .lg-sus { color: #ff7a7a; } .lg-def { color: #8fd3ff; } .lg-vote { color: #e8c25a; } #graph-svg { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 4px; } #graph-svg svg { height: 100%; max-width: 100%; } /* ── 遊び方・関連・足 ─────────────────────────────────────── */ #guide-section { max-width: 1200px; margin: 48px auto 0; } .guide-title, .related-apps-title { font: 800 18px var(--serif); letter-spacing: .25em; color: var(--gold2); } .tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); } .tabs [role="tab"] { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 16px; cursor: pointer; color: var(--dim); font: 700 14px var(--serif); letter-spacing: .12em; } .tabs [role="tab"]:hover { color: var(--ink); } .tabs [role="tab"][aria-selected="true"] { color: var(--gold2); border-bottom-color: var(--gold); } .tab-panel { border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 14px 14px; padding: 16px 22px 18px; background: rgba(255, 255, 255, .015); line-height: 1.9; } .tab-panel > p { margin: 0 0 10px; color: #d6cdb8; } .tab-panel dl { margin: 0; } .tab-panel dt { font: 700 15px var(--serif); letter-spacing: .08em; margin-top: 12px; color: var(--ink); } .tab-panel dt:first-child { margin-top: 0; } .tab-panel dd { margin: 2px 0 0; color: var(--dim); } .tab-panel .note { font-size: 12px; color: var(--faint); } .comp-table { border-collapse: collapse; width: 100%; margin: 6px 0 10px; font-size: 13px; } .comp-table th, .comp-table td { border-bottom: 1px solid rgba(201, 169, 110, .14); padding: 7px 8px; text-align: left; } .comp-table th { color: var(--dim); font: 600 12px var(--serif); letter-spacing: .1em; white-space: nowrap; } .comp-table td:first-child { font: 700 14px var(--serif); white-space: nowrap; } .comp-table td:last-child { white-space: nowrap; color: var(--gold2); } .related-apps { max-width: 1200px; margin: 36px auto 0; } .related-apps-title { font-size: 16px; } .related-apps-grid { display: flex; flex-wrap: wrap; gap: 8px; } .related-app-link { color: var(--ink); text-decoration: none; border: 1px solid var(--hair); border-radius: 999px; padding: 7px 16px; } .related-app-link:hover { border-color: var(--hair2); } #ad-section { max-width: 1200px; margin: 32px auto 0; } #site-footer { max-width: 1200px; margin: 44px auto 0; padding-top: 16px; border-top: 1px solid var(--hair); color: var(--dim); } .footer-links { display: flex; gap: 16px; flex-wrap: wrap; } .footer-links a { color: var(--dim); text-decoration: none; } .footer-links a:hover { color: var(--ink); } .footer-copy { font-size: 12px; } /* ── スマホ ───────────────────────────────────────────────── */ @media (max-width: 760px) { .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs [role="tab"] { flex: none; padding: 8px 10px; font-size: 13px; letter-spacing: .05em; } .tab-panel { padding: 14px 14px 16px; } #hero { aspect-ratio: 16 / 10; border-radius: 16px; } .hero-text { left: 6%; top: 12%; max-width: 88%; } .eyebrow { font-size: 10px; letter-spacing: .45em; } .lead { margin-top: 8px; } .entry { margin-top: -24px; padding: 18px 16px 12px; border-radius: 16px; } .presets button { min-width: 60px; font-size: 21px; } .primary { font-size: 18px; padding: 14px; } .adv-now { display: none; } #board { grid-template-columns: 1fr; } #roster { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); border-right: 0; border-bottom: 1px solid var(--hair); max-height: 214px; } .card { grid-template-columns: 30px minmax(0, 1fr); padding: 4px; gap: 6px; } .card .face { width: 30px; height: 30px; } .card .nm { font-size: 12px; } .card .badge { font-size: 9px; padding: 0 3px; letter-spacing: 0; } #feed { height: clamp(280px, 50svh, 460px); padding: 10px 12px; } #actions { padding: 12px; } /* 英語は名前と札が長いので、名簿を 2 列にする（下の html[lang="en"] #board より強くするため同じ形で書く） */ html[lang="en"] #board { grid-template-columns: 1fr; } html[lang="en"] #roster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* 英語は名前（Nanami など）と札（Claims Seer など）が長く、300px の名簿では切れた。列を広げる */ @media (min-width: 761px) { html[lang="en"] #board { grid-template-columns: 340px 1fr; } }