/* 幻想回廊 - アイソメトリック錯視パズル */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
	width:100%; height:100%;
	overflow:hidden;
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
	-webkit-user-select:none; user-select:none;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:transparent;
}
:root {
	--bg1:#ffe7cf;
	--bg2:#f9c9a8;
	--ui:#5a4632;
	--ui-inv:#fff;
	--accent:#3ac6b8;
}
#bg {
	position:fixed; inset:0;
	background:linear-gradient(to bottom, var(--bg1), var(--bg2));
	transition:background 1.2s;
	z-index:0;
}
#bg::after { /* うっすら太陽 */
	content:"";
	position:absolute; left:50%; top:14%;
	width:min(46vmin,300px); height:min(46vmin,300px);
	margin-left:calc(min(46vmin,300px) / -2);
	border-radius:50%;
	background:rgba(255,255,255,.28);
	filter:blur(2px);
}
#cv {
	position:fixed; inset:0;
	width:100%; height:100%;
	z-index:1;
	touch-action:none;
	display:block;
}
/* ボタンもタップの反応を最優先にする（ダブルタップの拡大・長押しメニューを止める） */
button { touch-action:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }

/* ---- HUD ---- */
#hud {
	position:fixed; z-index:10;
	top:calc(10px + env(safe-area-inset-top));
	left:14px; right:14px;
	display:flex; justify-content:space-between; align-items:flex-start;
	pointer-events:none;
}
#hud_level {
	color:var(--ui);
	font-size:15px; font-weight:bold;
	line-height:1.4;
	padding-top:6px;
	text-shadow:0 1px 3px rgba(255,255,255,.35);
}
#hud_btns { display:flex; gap:10px; pointer-events:auto; }
.hud-btn {
	width:42px; height:42px;
	border:none; border-radius:12px;
	background:rgba(255,255,255,.55);
	box-shadow:0 2px 6px rgba(0,0,0,.12);
	cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	transition:transform .1s;
}
.hud-btn:active { transform:scale(.92); }
.hud-btn svg { width:22px; height:22px; fill:var(--ui); }
.hud-btn svg .ln { fill:none; stroke:var(--ui); stroke-width:2; stroke-linecap:round; }
body.ui-light { --ui:#f2ecff; }
body.ui-light .hud-btn { background:rgba(255,255,255,.16); }
body.ui-light #hud_level { text-shadow:0 1px 4px rgba(0,0,0,.45); }

/* ---- 視点回転ボタン ---- */
#viewbtns {
	position:fixed; z-index:9;
	left:16px; right:16px;
	bottom:calc(16px + env(safe-area-inset-bottom));
	display:flex; justify-content:space-between;
	pointer-events:none;
}
.view-btn {
	width:56px; height:56px;
	border:none; border-radius:50%;
	background:rgba(255,255,255,.55);
	box-shadow:0 2px 8px rgba(0,0,0,.15);
	cursor:pointer;
	display:flex; align-items:center; justify-content:center;
	pointer-events:auto;
	transition:transform .1s;
}
.view-btn:active { transform:scale(.9); }
.view-btn svg { width:30px; height:30px; fill:var(--ui); }
.view-btn svg .ln { fill:none; stroke:var(--ui); stroke-width:2; stroke-linecap:round; }
body.ui-light .view-btn { background:rgba(255,255,255,.16); }

/* ---- ヒント ---- */
#hint {
	position:fixed; z-index:10;
	left:50%; bottom:calc(84px + env(safe-area-inset-bottom));
	transform:translateX(-50%);
	width:max-content;
	max-width:min(88vw, 460px);
	background:rgba(0,0,0,.45);
	color:#fff;
	font-size:14px;
	line-height:1.55;
	padding:10px 18px;
	border-radius:18px;
	text-align:center;
	white-space:normal;
	word-break:break-word;
	opacity:1;
	transition:opacity .8s;
	pointer-events:none;
}
#hint.fadeout { opacity:0; }

/* ---- オーバーレイ共通 ---- */
.overlay {
	position:fixed; inset:0; z-index:20;
	display:flex; align-items:center; justify-content:center;
	background:rgba(30,22,40,.45);
	backdrop-filter:blur(3px);
	-webkit-backdrop-filter:blur(3px);
	opacity:1;
	transition:opacity .4s;
}
.overlay.hidden, #hud.hidden, #hint.hidden, #viewbtns.hidden { display:none; }
/* 表示リセット(ズーム/移動をしたときだけ中央に出る) */
#btn_view_reset { width:48px; height:48px; align-self:center; }
#btn_view_reset.hidden { display:none; }
#btn_view_reset svg { width:26px; height:26px; }
.ov-inner {
	text-align:center;
	color:#fff;
	padding:30px 24px;
	max-width:92%;
}
#title { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
#title .ov-inner { color:var(--ui); }
#title_sub {
	font-size:14px; letter-spacing:.35em; margin-bottom:6px;
	opacity:.75;
}
#title_main {
	font-size:min(15vw,64px);
	letter-spacing:.12em;
	margin-bottom:18px;
	text-shadow:0 3px 0 rgba(255,255,255,.5), 0 8px 22px rgba(0,0,0,.18);
}
#title_desc { font-size:14px; line-height:1.9; margin-bottom:30px; opacity:.85; }
.big-btn {
	display:block;
	width:min(70vw,260px);
	margin:0 auto 14px;
	padding:15px 0;
	font-size:18px; font-weight:bold;
	color:#fff;
	background:linear-gradient(to bottom,#ff9d6f,#f0764a);
	border:none; border-radius:30px;
	box-shadow:0 4px 0 #c95c36, 0 8px 18px rgba(0,0,0,.2);
	cursor:pointer;
	transition:transform .1s;
}
.big-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #c95c36; }
.sub-btn {
	display:block;
	margin:0 auto;
	padding:10px 26px;
	font-size:14px;
	color:inherit;
	background:rgba(255,255,255,.25);
	border:1px solid rgba(255,255,255,.5);
	border-radius:22px;
	cursor:pointer;
}
#title .sub-btn { background:rgba(255,255,255,.45); border-color:rgba(90,70,50,.3); }

/* ---- 章選択 (100章以上をスクロールで一覧) ---- */
#select h2, #clear h2 { font-size:24px; margin-bottom:22px; }
#select .ov-inner { width:min(92vw, 640px); }
#select_grid {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(108px, 1fr));
	gap:10px;
	justify-content:center;
	margin-bottom:20px;
	max-height:58vh;
	overflow-y:auto;
	padding:4px 6px;
	-webkit-overflow-scrolling:touch;
}
.sel-card {
	background:rgba(255,255,255,.92);
	color:#5a4632;
	border:none; border-radius:12px;
	padding:10px 6px 9px;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(0,0,0,.22);
	transition:transform .1s;
	min-height:56px;
}
.sel-card:active { transform:scale(.95); }
.sel-card .no { font-size:11px; opacity:.6; }
.sel-card .nm { font-size:12px; font-weight:bold; margin-top:3px; line-height:1.3; }
.sel-card.locked {
	background:rgba(255,255,255,.25);
	color:rgba(255,255,255,.6);
	box-shadow:none;
	cursor:default;
}
.sel-card.cleared .no::after { content:" ★"; color:#f2b234; }

/* ---- クリア ---- */
#clear_label {
	font-size:15px; letter-spacing:.4em;
	color:#ffd66e;
	margin-bottom:8px;
}
#clear h2 { margin-bottom:30px; }