@charset "UTF-8";

/* 隠された数字（hit）用スタイル
 *
 * 土台（枠・表・ボタン）は scot と同じ組み方にしてある。共通の 1 枚に
 * まとめていないのは、コンテンツごとに色と見出しの調子を変えたいため。
 *
 * **このゲームは JavaScript を 1 行も使っていない。** 見た目の変化は
 * すべて CSS の状態（:focus / クラス）だけで済ませている。
 */

:root {
	--ink: #eae6f5;
	--ink-dim: #a49fbd;
	--bg: #16131f;
	--panel: #221d30;
	--line: #3a3350;
	/*
	 * ヒットとブローは意味がまったく違うので、色を近づけないこと。
	 * 緑＝位置まで合っている、橙＝数字はあるが位置が違う。
	 */
	--hit: #38d9a9;
	--blow: #ff9f1c;
	--absent: #6b6480;
	--accent: #a78bfa;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	line-height: 1.8;
	/*
	 * 横向きにしたときに、ブラウザが勝手に文字を大きくするのを止める。
	 * 止めないと、幅に合わせて組んだ升や表が横向きだけ崩れる。
	 */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem;
}

/* ---- 見出し・枠 ---- */

.site-header {
	padding: 0.9rem 1rem;
	margin: 0 0 1rem;
	background: linear-gradient(135deg, #35284f, #1b1626);
	border: 1px solid var(--line);
	border-radius: 10px;
	text-align: center;
}

.site-header h1 {
	margin: 0;
	font-size: 1.4rem;
	letter-spacing: 0.18em;
}

.site-header h1 a {
	color: var(--ink);
	text-decoration: none;
}

.site-header__sub {
	margin: 0.2rem 0 0;
	font-size: 0.8rem;
	color: var(--ink-dim);
}

.site-header__user {
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	color: var(--ink-dim);
}

.site-footer {
	padding: 0.5rem 0 2rem;
	font-size: 0.85rem;
	text-align: center;
}

.site-footer__note {
	margin: 0 0 0.5rem;
	color: var(--ink-dim);
	text-align: left;
}

.site-footer a {
	color: var(--accent);
}

/*
	ホーム画面に追加して開いたとき（PWA）は「おさページ トップ」を出さない。
	アプリとして開いている以上、おさページはその外にある——押すと
	「アプリの外です」の帯付きで開くことになるので、導線ごと畳む。

	**サーバー側からは見分けが付かないので、ここでしか消せない。**
	ブラウザは standalone で開いても User-Agent を変えないため、
	App\AppShell（WebView ラッパーの印を見る）はこの場合 false になる。
	template/footer.php の頭に同じ話が書いてある。

	区切りの「｜」も span の中にあるので、一緒に消える。
*/
@media (display-mode: standalone) {
	.site-footer__home {
		display: none;
	}
}

h6 {
	margin: 0;
	padding: 0 0 1.5rem;
	color: var(--ink-dim);
	font-size: 0.7rem;
	font-weight: normal;
	text-align: center;
}

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 0.9rem 1.1rem;
	margin: 0 0 1rem;
}

.panel h2 {
	margin: 0 0 0.6rem;
	padding-bottom: 0.3rem;
	font-size: 1.05rem;
	border-bottom: 1px solid var(--line);
}

.panel h3 {
	margin: 1.2rem 0 0.3rem;
	padding-left: 0.5rem;
	font-size: 0.95rem;
	border-left: 3px solid var(--accent);
}

/* 続きから遊べる対局の枠。最初に目に入ってほしいので縁だけ強くする */
.panel--resume {
	border-color: var(--accent);
}

.lead {
	margin: 0 0 0.5rem;
}

.note {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
	color: var(--ink-dim);
}

code {
	padding: 0 0.25rem;
	background: #120f1a;
	border-radius: 3px;
	font-size: 0.9em;
}

a {
	color: var(--accent);
}

.alert {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.8rem;
	border-radius: 8px;
	font-size: 0.9rem;
}

.alert--error {
	background: #4a1f2e;
	border: 1px solid #7d3048;
}

.alert--notice {
	background: #23324a;
	border: 1px solid #35557f;
}

/* ---- 状況 ---- */

.panel--status {
	padding-bottom: 0.7rem;
}

.status {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
}

.status p {
	margin: 0;
	font-size: 0.9rem;
}

.status__try strong {
	font-size: 1.3rem;
	color: var(--accent);
}

.status__level .note {
	margin: 0 0 0 0.4rem;
}

.turn {
	padding: 0.1rem 0.5rem;
	background: #2f2842;
	border-radius: 999px;
	font-size: 0.85rem;
}

.turn--you {
	background: #1f4a3a;
	color: #7ee2b8;
}

.result {
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	font-weight: bold;
}

.result--win {
	background: #1f4a3a;
	color: #7ee2b8;
}

.result--lose {
	background: #4a1f28;
	color: #ff9db0;
}

/* ---- 数字の升 ----
 *
 * 予想も答えも同じ形の升に 1 桁ずつ並べる。桁を目で数えられるようにする
 * ためで、詰めて書くと 4 桁と 5 桁の区別が付きにくい。
 */

.cells,
.digits,
.answer {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	vertical-align: middle;
}

.cell {
	display: grid;
	place-items: center;
	min-width: 1.7rem;
	padding: 0.05rem 0.3rem;
	background: #2f2842;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-size: 1rem;
	font-weight: bold;
	font-variant-numeric: tabular-nums;
}

.cell--answer {
	background: #1f4a3a;
	border-color: #2f9a74;
	color: #a8f0d2;
}

/* もう使われていないと分かった数字。沈めて「終わったもの」に見せる */
.cell--absent {
	background: #241f31;
	border-color: var(--absent);
	color: var(--absent);
	text-decoration: line-through;
}

/* ---- ヒットとブロー ---- */

.mark {
	display: inline-block;
	min-width: 1.8rem;
	padding: 0 0.4rem;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}

.mark--hit {
	background: var(--hit);
	color: #06281d;
}

.mark--blow {
	background: var(--blow);
	color: #3a2200;
}

.belief {
	font-size: 1.2rem;
	color: var(--accent);
}

/* ---- 予想の入力 ---- */

.guess-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}

.guess-form__label {
	font-size: 0.85rem;
	color: var(--ink-dim);
}

.guess-form__input {
	width: 9rem;
	padding: 0.35rem 0.6rem;
	background: #120f1a;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 6px;
	font-family: inherit;
	font-size: 1.3rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.35em;
}

.guess-form__input:focus {
	border-color: var(--accent);
	outline: none;
}

/* ---- メモ ---- */

.memo {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.5rem 0.6rem;
	background: #120f1a;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.9rem;
	line-height: 1.6;
	/* 縦だけ伸ばせるようにする。横に広げられると盤より外へはみ出す */
	resize: vertical;
}

.memo:focus {
	border-color: var(--accent);
	outline: none;
}

/* 終局後の読むだけのメモ。改行をそのまま見せる（nl2br を使わずに済む） */
.memo-read {
	margin: 0.5rem 0 0;
	padding: 0.5rem 0.6rem;
	background: #120f1a;
	border: 1px solid var(--line);
	border-radius: 6px;
	font-size: 0.9rem;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/* ---- 選択肢 ---- */

.choices {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.choice {
	display: block;
	padding: 0.4rem 0.7rem;
	background: #2a2439;
	border: 1px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
}

/* 選ばれている遊び方がひと目で分かるようにする（:has が無い環境では枠のまま） */
.choice:has(input:checked) {
	background: #38305180;
	border-color: var(--accent);
}

.choice--inline {
	display: inline-block;
}

.choice__name {
	font-weight: bold;
}

.choice__detail {
	display: block;
	margin-left: 1.4rem;
	font-size: 0.78rem;
	color: var(--ink-dim);
}

.choice-line {
	margin: 0;
}

/* ---- ボタン ---- */

.btn {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	background: #352d4c;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.85rem;
	text-decoration: none;
	cursor: pointer;
}

.btn:hover {
	background: #453a63;
}

.btn--primary {
	background: #1f6f52;
	border-color: #2f9a74;
	font-weight: bold;
}

.btn--primary:hover {
	background: #2a8f6a;
}

.btn--danger {
	background: #4a1f28;
	border-color: #7d3040;
}

.btn--small {
	padding: 0.15rem 0.6rem;
	font-size: 0.8rem;
}

.inline-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0.6rem 0 0;
}

.inline-form .note {
	margin: 0;
}

/* ---- 表 ---- */

.table-scroll {
	overflow-x: auto;
}

.grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.grid th,
.grid td {
	padding: 0.3rem 0.5rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: middle;
}

.grid thead th {
	background: #2b2440;
	color: var(--ink-dim);
	font-size: 0.75rem;
	white-space: nowrap;
}

.grid .num {
	white-space: nowrap;
}

.grid .note {
	margin: 0;
}

.grid form {
	margin: 0;
}

/* かすりもしなかった予想。次に見るとき飛ばせるよう沈める */
.grid--guess tbody tr.is-blank {
	color: var(--ink-dim);
}

.grid--guess tbody tr.is-blank .cell {
	border-style: dashed;
	color: var(--absent);
}

.grid--ranking .rank {
	width: 3rem;
	text-align: center;
	color: var(--ink-dim);
}

.grid--ranking thead th.group {
	text-align: center;
	border-left: 1px solid var(--line);
}

.grid--ranking .group-start {
	border-left: 1px solid var(--line);
}

.grid--ranking td.record {
	white-space: nowrap;
	color: var(--ink-dim);
}

.grid--ranking tbody tr.is-you {
	background: #342c4e;
}

.grid--ranking tbody tr.is-you th,
.grid--ranking tbody tr.is-you td {
	color: var(--ink);
	font-weight: bold;
}

/* ---- スマホ幅 ----
 *
 * 指で遊べる大きさに揃えるための 1 ブロック。WebView ラッパー（Android
 * アプリ）で開くのを見越して足したが、ブラウザでスマホから開いたときも
 * 同じように効く。
 *
 * **土台の値は書き換えていない。** このブロックを消せば元の見た目に戻る、
 * という形にしてある（PC の画面は今までどおり）。守っている目安は 2 つだけ。
 *
 *   1. 押すものは 44px 以上（指の腹で狙える最小の大きさ）
 *   2. 入力欄の文字は 16px 以上——下回ると、欄をタップしたときに
 *      ブラウザが画面を勝手に拡大する。いま作るのは Android だけだが、
 *      この CSS をそのまま使うので先に揃えておく
 *
 * 表は .table-scroll（overflow-x: auto）が既に面倒を見ているので、
 * ここでは何もしない。
 */
@media (max-width: 600px) {
	.wrap {
		padding: 0.75rem;
	}

	.site-header {
		padding: 0.7rem 0.6rem;
	}

	/* 「隠された数字」が字間で折り返さない幅まで詰める */
	.site-header h1 {
		font-size: 1.15rem;
		letter-spacing: 0.08em;
	}

	.panel {
		padding: 0.8rem 0.75rem;
	}

	.status {
		gap: 0.35rem 1rem;
	}

	/* ---- 押すもの ---- */

	/*
	 * 高さを 44px 確保する。inline-block のままでは padding を足しても
	 * 文字が上に寄るので、中身を中央へ置くために inline-flex にする。
	 */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 2.75rem;
		padding: 0.5rem 1rem;
		font-size: 0.95rem;
	}

	/* 表の中に並ぶ小さいボタンは、行の高さを壊さない範囲で大きくする */
	.btn--small {
		min-height: 2.25rem;
		padding: 0.25rem 0.7rem;
	}

	/*
	 * ボタンは縦積みにして端まで伸ばす。横に並べたままだと、
	 * 「投了する」と断り書きが 1 行に収まらず妙な位置で折れる。
	 */
	.inline-form {
		flex-direction: column;
		align-items: stretch;
	}

	/* ---- 予想の入力 ---- */

	.guess-form {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * 数字を大きく、真ん中に。字間を空けているぶん右に寄って見えるので、
	 * 同じ幅だけ text-indent で押し戻す（最後の桁の後ろにも字間が付く）。
	 */
	.guess-form__input {
		width: 100%;
		padding: 0.5rem;
		font-size: 1.75rem;
		letter-spacing: 0.3em;
		text-align: center;
		text-indent: 0.3em;
	}

	/* 16px を下回らせない（タップで画面が拡大するのを防ぐ） */
	.memo {
		font-size: 1rem;
	}

	/* ---- 升 ---- */

	.cell {
		min-width: 2.1rem;
		padding: 0.15rem 0.35rem;
		font-size: 1.1rem;
	}

	/* ---- 遊び方の選択 ---- */

	/*
	 * 1 つずつ縦に並べて端まで伸ばす。横並びのままだと、名前と要約が
	 * 半端な幅で折り返して読みにくい。
	 *
	 * .choice は radio と文字を含む label なので、display: block のまま
	 * padding だけ足す（flex にすると radio と名前が別の行に落ちる）。
	 */
	.choices {
		flex-direction: column;
	}

	.choice {
		padding: 0.6rem 0.8rem;
	}

	/* ---- 表 ---- */

	.grid {
		font-size: 0.8rem;
	}

	.grid th,
	.grid td {
		padding: 0.3rem 0.35rem;
	}
}