/* arcade.css — 置き場サイト共通スタイル（タスク A-1）。 全ゲーム共通のヘッダ/フッタと配色トークンを提供する。 各ゲームは にこの1行を足すだけで配色・共通部品のスタイルが揃う: ヘッダ/フッタの中身は arcade-chrome.js が挿入する（そちらも1行足す）。 配色（オーナー確定 2026-07-18）: 背景ベージュ / カードはオフホワイト / 文字は黄緑（オリーブ）。 */ :root { --arcade-bg: #e9e0cd; /* 背景ベージュ（明るめ。ヘッダ・本文） */ --arcade-bg-alt: #e2d9c4; /* 背景ベージュ（濃いめ。フッタ・プレースホルダ枠） */ --arcade-card: #faf7ef; /* カード（オフホワイト） */ --arcade-thumb: #f2eee2; /* サムネイル枠の下地 */ --arcade-pill: #e4e6cd; /* 「遊ぶ」等のピル背景 */ --arcade-ink: #5a6b1f; /* 文字・リンク・ロゴ（黄緑=オリーブ） */ --arcade-ink-soft: #7a8a3c; /* アイコン等の少し明るい黄緑 */ --arcade-muted: #8a8256; /* 補足テキスト（プライバシー表記など） */ --arcade-border: rgba(0, 0, 0, 0.08); --arcade-border-strong: rgba(0, 0, 0, 0.16); --arcade-radius: 14px; --arcade-maxw: 720px; --arcade-font: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; --arcade-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } * { box-sizing: border-box; } html, body { margin: 0; } body { min-height: 100vh; display: flex; flex-direction: column; background: var(--arcade-bg); color: var(--arcade-ink); font-family: var(--arcade-font); line-height: 1.7; } a { color: var(--arcade-ink); } /* ---- 共通ヘッダ ---------------------------------------------------------- */ .arcade-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--arcade-bg); border-bottom: 1px solid var(--arcade-border); } /* トップページではロゴを中央寄せ（← トップに戻る は出さない）。 */ .arcade-header--home { justify-content: center; } .arcade-header__brand { font-size: 17px; font-weight: 500; letter-spacing: 0.04em; color: var(--arcade-ink); text-decoration: none; } .arcade-header__back { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--arcade-muted); text-decoration: none; } .arcade-header__back:hover { color: var(--arcade-ink); } /* ---- 本文コンテナ（各ページで使い回す） --------------------------------- */ .arcade-main { flex: 1 0 auto; width: 100%; max-width: var(--arcade-maxw); margin: 0 auto; padding: 24px 18px 40px; } .arcade-section-title { margin: 0 0 14px; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--arcade-ink); } /* ---- ゲーム一覧カード（トップページ用。タスク A-2 で内容を流し込む） ---- */ .arcade-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .arcade-game-card { display: block; background: var(--arcade-card); border: 0.5px solid var(--arcade-border); border-radius: var(--arcade-radius); overflow: hidden; text-decoration: none; color: var(--arcade-ink); } .arcade-game-card__thumb { height: 96px; background: var(--arcade-thumb); display: flex; align-items: center; justify-content: center; } .arcade-game-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .arcade-game-card__body { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; } .arcade-game-card__name { font-size: 13px; font-weight: 500; } .arcade-game-card__play { font-size: 11px; color: var(--arcade-ink); background: var(--arcade-pill); padding: 2px 10px; border-radius: 999px; } .arcade-game-card--soon { display: flex; align-items: center; justify-content: center; min-height: 138px; background: var(--arcade-bg-alt); border: 1px dashed var(--arcade-border-strong); color: var(--arcade-muted); font-family: var(--arcade-mono); font-size: 12px; } /* ---- ランキング表示（arcade-ranking.js が描画。タスク C） --------------- */ .arcade-lb { background: var(--arcade-card); border: 0.5px solid var(--arcade-border); border-radius: var(--arcade-radius); padding: 16px 18px; } .arcade-lb__title { margin: 0 0 12px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--arcade-ink); } .arcade-lb__status { margin: 6px 0; font-size: 12px; color: var(--arcade-muted); font-family: var(--arcade-mono); } .arcade-lb__list { list-style: none; margin: 0; padding: 0; } .arcade-lb__row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 0.5px solid var(--arcade-border); font-size: 14px; } .arcade-lb__row:first-child { border-top: 0; } .arcade-lb__rank { flex: 0 0 auto; min-width: 2.4em; color: var(--arcade-muted); font-family: var(--arcade-mono); font-size: 13px; } .arcade-lb__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .arcade-lb__score { flex: 0 0 auto; font-family: var(--arcade-mono); color: var(--arcade-ink-soft); } .arcade-lb__empty { padding: 8px 0; font-size: 13px; color: var(--arcade-muted); } /* 複数ゲームのハイライト（トップページ）。ゲームが増えたらグリッドで折り返す。 */ .arcade-hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .arcade-hl-card { background: var(--arcade-card); border: 0.5px solid var(--arcade-border); border-radius: var(--arcade-radius); padding: 14px 16px; } .arcade-hl-card__title { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--arcade-ink); text-decoration: none; } .arcade-hl-card__title:hover { color: var(--arcade-ink-soft); } .arcade-lb__list--compact .arcade-lb__row { padding: 5px 0; font-size: 13px; } /* ---- 名前入力モーダル（arcade-ranking.js。タスク C） -------------------- */ .arcade-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(40, 36, 24, 0.45); } .arcade-modal { width: 100%; max-width: 360px; background: var(--arcade-card); border: 0.5px solid var(--arcade-border-strong); border-radius: var(--arcade-radius); padding: 22px 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); } .arcade-modal__title { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: var(--arcade-ink); } .arcade-modal__score { margin: 0 0 12px; font-family: var(--arcade-mono); font-size: 18px; color: var(--arcade-ink-soft); } .arcade-modal__score-label { font-size: 11px; color: var(--arcade-muted); } .arcade-modal__hint { margin: 0 0 8px; font-size: 12px; color: var(--arcade-muted); } .arcade-modal__notice { margin: 0 0 10px; padding: 8px 10px; font-size: 12px; line-height: 1.5; color: var(--arcade-ink); background: var(--arcade-bg-alt); border-left: 3px solid var(--arcade-ink-soft); border-radius: 6px; } .arcade-modal__input { width: 100%; padding: 10px 12px; font-size: 15px; font-family: var(--arcade-mono); color: var(--arcade-ink); background: #fff; border: 1px solid var(--arcade-border-strong); border-radius: 10px; } .arcade-modal__input:focus { outline: 2px solid var(--arcade-ink-soft); outline-offset: 1px; } .arcade-modal__error { margin: 8px 0 0; font-size: 12px; color: #a3402a; } .arcade-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; } .arcade-btn { font: inherit; font-size: 13px; padding: 8px 16px; border-radius: 999px; border: 0.5px solid var(--arcade-border-strong); background: var(--arcade-ink); color: var(--arcade-card); cursor: pointer; } .arcade-btn:disabled { opacity: 0.6; cursor: default; } .arcade-btn--ghost { background: var(--arcade-pill); color: var(--arcade-ink); } /* ---- 共通フッタ ---------------------------------------------------------- */ .arcade-footer { flex-shrink: 0; background: var(--arcade-bg-alt); border-top: 1px solid var(--arcade-border); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .arcade-footer__links { display: flex; align-items: center; gap: 18px; } .arcade-social { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--arcade-ink); text-decoration: none; } .arcade-social:hover { color: var(--arcade-ink-soft); } .arcade-social svg { width: 15px; height: 15px; fill: currentColor; } .arcade-footer__author { margin-left: auto; font-size: 12px; color: var(--arcade-muted); } .arcade-footer__note { margin: 0; font-size: 12px; color: var(--arcade-muted); border-top: 0.5px solid var(--arcade-border); padding-top: 10px; } .arcade-footer__note a { color: inherit; text-decoration: underline; } .arcade-footer__note a:hover { color: var(--arcade-ink-soft); }