/* ぽけろぐ Web版 共通スタイル（Flask版 templates/base.html のレトロテーマを移植）。
全ページで と js/chrome.js を読み込む。
テーマはレトロ固定（chrome.js が に theme-retro を付与する）。 */
:root {
--bg: #f6f7fb;
--panel: #ffffff;
--line: #d9deea;
--text: #1f2937;
--muted: #667085;
--accent: #4f6bed;
--accent-weak: #e9edff;
--danger: #b42318;
--ok: #087443;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
color: var(--text);
background: var(--bg);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.5;
}
/* ===== ナビ（紺のメニューバー） ===== */
nav.site-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
padding: 0.6rem 1.1rem;
background: #182033;
border-bottom: 1px solid #111827;
flex: 0 0 auto;
}
.nav-brand {
display: flex;
align-items: center;
gap: 0.55rem;
color: #fff;
text-decoration: none;
margin-right: 1rem;
padding: 0.15rem 0.2rem;
}
.nav-brand .brand-logo { width: 26px; height: 26px; color: #fff; flex: 0 0 auto; }
.nav-brand .brand-name { font-size: 1.08rem; font-weight: 800; letter-spacing: 0.06em; }
nav.site-nav a.nav-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: #cdd8f4;
text-decoration: none;
padding: 0.42rem 0.7rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 700;
white-space: nowrap;
transition: background-color 150ms ease, color 150ms ease;
}
nav.site-nav a.nav-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
nav.site-nav a.nav-item:hover { background: rgba(255,255,255,0.13); color: #fff; }
nav.site-nav a.nav-item.active { background: var(--accent); color: #fff; }
/* ===== メイン領域 ===== */
main.site-main {
width: min(1180px, calc(100vw - 2rem));
margin: 1rem auto 2rem;
flex: 0 0 auto;
}
main.site-main.fullscreen-main {
width: 100%;
margin: 0;
flex: 1 1 auto;
min-height: 0;
}
/* ===== 共通フッター ===== */
footer.site-foot {
flex: 0 0 auto;
margin-top: auto;
border-top: 3px solid var(--line2, #d9deea);
background: var(--panel2, #eef0f5);
padding: 0.85rem 1.2rem 1rem;
}
.fullscreen-page footer.site-foot { display: none; }
.sf-in { max-width: 1180px; margin: 0 auto; font-size: 0.76rem; color: var(--muted); }
.sf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.2rem; }
.sf-links a { color: var(--accent); font-weight: 700; text-decoration: none; }
.theme-retro .sf-links a { color: var(--line); }
.sf-links a:hover { text-decoration: underline; }
.sf-c { margin-left: auto; }
.sf-small { margin-top: 0.45rem; font-size: 0.7rem; opacity: 0.9; line-height: 1.7; }
.sf-small a { color: inherit; }
/* ===== 共通の見出し・部品 ===== */
h1 { margin: 0 0 1rem; font-size: 1.6rem; }
h2 { margin: 1.2rem 0 0.7rem; font-size: 1.1rem; }
a { color: var(--accent); }
button, .button-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 2.35rem;
padding: 0.45rem 0.8rem;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--panel);
color: var(--text);
font: inherit;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease,
box-shadow 150ms ease, transform 80ms ease;
}
button:hover, .button-link:hover {
border-color: var(--accent);
box-shadow: 0 2px 8px rgba(79, 107, 237, 0.12);
}
button:active, .button-link:active { transform: scale(0.98); }
button.primary, .button-link.primary {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
button.primary:hover, .button-link.primary:hover {
background: #3f59d6;
box-shadow: 0 2px 10px rgba(79, 107, 237, 0.28);
}
button.danger { color: var(--danger); }
button.danger:hover { box-shadow: 0 2px 8px rgba(180, 35, 24, 0.14); }
button:focus-visible, .button-link:focus-visible,
input:focus-visible, select:focus-visible, a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
input, select {
min-height: 2.25rem;
border: 1px solid var(--line);
border-radius: 6px;
padding: 0.35rem 0.5rem;
background: #fff;
font: inherit;
font-variant-numeric: tabular-nums;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
input:hover, select:hover { border-color: #b7c0d8; }
fieldset {
border: 1px solid var(--line);
border-radius: 8px;
padding: 1rem;
margin: 0 0 1rem;
background: var(--panel);
}
legend { padding: 0 0.35rem; font-weight: 700; }
table { width: 100%; border-collapse: collapse; background: var(--panel); font-variant-numeric: tabular-nums; }
table td, table th { border-bottom: 1px solid var(--line); padding: 0.55rem 0.7rem; text-align: left; }
table th { color: var(--muted); font-size: 0.86rem; font-weight: 700; background: #f9fafc; }
table tbody tr { transition: background-color 120ms ease; }
table tbody tr:hover { background: #f9fafc; }
.error { color: var(--danger); font-weight: 700; }
.result-box {
border: 1px solid var(--line);
border-radius: 8px;
padding: 1em;
margin-top: 1em;
background: var(--panel);
font-variant-numeric: tabular-nums;
}
/* =====================================================================
レトロテーマ（.theme-retro）：クリーム紙＋紺フレーム＋赤アクセント。
ドット絵は pixelated でくっきり。見出し類にPKMNフォント。
===================================================================== */
@font-face {
font-family: "PKMN";
src: url("../fonts/pkmn.ttf") format("truetype");
font-display: swap;
}
.theme-retro {
--bg: #efe7cf; /* クリーム色の紙 */
--panel: #fffdf5; /* テキストボックスの白 */
--panel2: #f3ecd6; /* 一段沈んだクリーム */
--line: #28407a; /* 紺のフレーム */
--line2: #7d9bd6; /* 薄い紺（内側の飾り枠） */
--text: #20263a;
--muted: #5d647d;
--accent: #c93a3a; /* 赤（ボール・強調） */
--accent-weak: #f7e2df;
--danger: #c0392b;
--ok: #2f7d31;
--hard-shadow: 3px 3px 0 rgba(40, 64, 122, 0.18);
}
.theme-retro body {
background-color: var(--bg);
background-image: repeating-linear-gradient(45deg,
rgba(40, 64, 122, 0.03) 0 9px, transparent 9px 18px);
}
.theme-retro img:not(.no-pixel):not(#live-video) { image-rendering: pixelated; }
.theme-retro #live-video, .theme-retro img.no-pixel { image-rendering: auto; }
.theme-retro .pk { font-family: "PKMN", "Yu Gothic UI", monospace; }
.theme-retro nav.site-nav { background: var(--line); border-bottom: 4px solid #1a2b56; }
.theme-retro nav.site-nav a { border-radius: 4px; }
.theme-retro nav.site-nav a.active { background: var(--accent); color: #fff; box-shadow: 2px 2px 0 #1a2b56; }
.theme-retro button, .theme-retro .button-link {
border: 2px solid var(--line);
border-radius: 7px; /* デザイン案04採用：角丸を全ページで統一 */
background: var(--panel);
color: var(--text);
box-shadow: var(--hard-shadow);
transition: none;
}
.theme-retro button:hover, .theme-retro .button-link:hover {
border-color: var(--accent);
box-shadow: 3px 3px 0 rgba(201, 58, 58, 0.45);
transform: none;
}
.theme-retro button:active, .theme-retro .button-link:active {
transform: translate(3px, 3px);
box-shadow: none;
}
.theme-retro button.primary, .theme-retro .button-link.primary {
background: var(--accent); color: #fff; border-color: var(--line);
box-shadow: 2px 2px 0 rgba(26, 43, 86, 0.35); /* デザイン案04採用：主ボタンは濃紺の締まった影 */
}
.theme-retro input, .theme-retro select {
border: 2px solid var(--line);
border-radius: 3px;
background: #fff;
}
.theme-retro input:hover, .theme-retro select:hover { border-color: var(--accent); }
.theme-retro fieldset, .theme-retro .result-box {
border: 3px solid var(--line);
border-radius: 8px;
box-shadow: inset 0 0 0 2px var(--panel), inset 0 0 0 4px var(--line2), var(--hard-shadow);
background: var(--panel);
}
.theme-retro table th { background: var(--panel2); color: var(--text); }