/*
Theme Name: Quiz RPG Mobile
Theme URI: https://example.com/quiz-rpg-mobile
Author: denkenanima
Description: Edu Quiz RPG向けの軽量・スマートフォン特化WordPressテーマ。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: quiz-rpg-mobile
*/

:root {
	--qrm-bg: #080d19;
	--qrm-panel: #111a33;
	--qrm-text: #f8f4df;
	--qrm-muted: #aeb8cf;
	--qrm-accent: #f5c451;
	--qrm-width: 1080px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	background: var(--qrm-bg);
	-webkit-text-size-adjust: 100%;
}
body {
	width: 100%;
	max-width: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	overflow-x: hidden;
	background:
		radial-gradient(circle at 80% 0, rgba(52,78,136,.26), transparent 38rem),
		var(--qrm-bg);
	color: var(--qrm-text);
	font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
	line-height: 1.7;
}
img, video, canvas, iframe { max-width: 100%; }
a { color: var(--qrm-accent); }
.qrm-site-header {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid rgba(255,255,255,.12);
	background: rgba(8,13,25,.88);
	backdrop-filter: blur(12px);
}
.qrm-header-inner,
.qrm-main,
.qrm-footer-inner {
	width: min(var(--qrm-width), calc(100% - 32px));
	margin-inline: auto;
}
.qrm-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	gap: 20px;
}
.qrm-brand { color: var(--qrm-text); font-size: 18px; font-weight: 800; text-decoration: none; }
.qrm-nav ul { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.qrm-nav a { color: var(--qrm-muted); font-size: 14px; text-decoration: none; }
.qrm-main { min-height: calc(100dvh - 130px); padding-block: 30px; }
.qrm-article {
	padding: clamp(18px, 4vw, 38px);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	background: rgba(17,26,51,.76);
}
.qrm-article h1 { margin-top: 0; line-height: 1.3; }
.qrm-entry-content > * { max-width: 100%; }
.qrm-entry-content > .alignwide { width: 100%; }
.qrm-entry-content > .alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.qrm-site-footer { border-top: 1px solid rgba(255,255,255,.1); color: var(--qrm-muted); font-size: 12px; }
.qrm-footer-inner { padding-block: 18px; }

body.qrm-game-page {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: #080d19;
}
body.qrm-game-page #wpadminbar { display: none !important; }
html:has(body.qrm-game-page) { margin-top: 0 !important; }
.qrm-game-shell {
	position: fixed;
	z-index: 1000;
	inset: 0;
	width: auto;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	padding:
		env(safe-area-inset-top)
		env(safe-area-inset-right)
		env(safe-area-inset-bottom)
		env(safe-area-inset-left);
	background: var(--qrm-bg);
}
.qrm-game-shell > .eqrpg {
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
}
.qrm-game-back {
	position: fixed;
	z-index: 2147483600;
	top: max(8px, env(safe-area-inset-top));
	left: max(8px, env(safe-area-inset-left));
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 50%;
	background: rgba(8,13,25,.72);
	color: #fff;
	text-decoration: none;
}
@media (max-width: 640px) {
	.qrm-header-inner { min-height: 54px; }
	.qrm-nav { display: none; }
	.qrm-main { width: 100%; padding: 0; }
	.qrm-article { padding: 16px; border: 0; border-radius: 0; }
}