@charset "utf-8";
/* =====================================================================
   app/jing/jing.php（静思阁）—— 文艺清新复古风格
   背景：宣纸纹理 + 暗角；
   内容：行楷标题、朱红印章、旋转太极、竖排场景卡、今日静语、静坐计时。
   ===================================================================== */

/* ---------- 全局底色与字体 ---------- */
html, body{background:#f5f0e6}
body{
	margin:0; padding:0; text-align:center;
	/* 宣纸纹理：极淡的杂色 + 从中心到四周的微暗角 */
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
		radial-gradient(ellipse at center, rgba(255,252,244,0) 0%, rgba(205,192,168,0.22) 100%);
	background-color:#f5f0e6;
	font-family:"STKaiti","KaiTi","楷体","Microsoft YaHei",serif;
	color:#2a2620}

/* ---------- 主容器 ---------- */
.jing-wrap{
	width:960px; margin:0 auto; position:relative; padding-bottom:60px; overflow:hidden}

/* ---------- 顶部题字区 ---------- */
.jing-header{
	padding:38px 0 18px; text-align:center; position:relative}
h1.jtitle{
	font-family:"STXingkai","华文行楷","STKaiti","KaiTi","楷体",serif;
	font-size:32px; line-height:42px; font-weight:400; color:#2a3c31;
	letter-spacing:.24em; text-indent:.24em; margin:0;
	text-shadow:1px 1px 0 rgba(255,255,255,.45)}
.j-sub{
	margin:10px 0 0; font-size:14px; line-height:20px; color:#7a7063;
	letter-spacing:.35em; text-indent:.35em}

/* 朱红印章 */
.j-seal{
	position:absolute; right:160px; top:36px;
	width:44px; height:44px; line-height:42px; text-align:center;
	border:2px solid #b33; border-radius:6px; color:#b33; font-size:20px;
	font-family:"STKaiti","KaiTi","楷体",serif; font-weight:700;
	transform:rotate(-8deg); opacity:.85; letter-spacing:0;
	text-shadow:none; box-shadow:1px 1px 0 rgba(255,255,255,.35)}

/* ---------- 太极舞台 ---------- */
.jing-taiji-stage{
	margin:12px auto 22px; width:620px; position:relative; z-index:1}

/* 太极图 */
.taiji-wrap{
	width:160px; height:160px; margin:0 auto 18px; position:relative;
	display:flex; align-items:center; justify-content:center}
/* 太极：改用 SVG 绘制，阴阳鱼与两点鱼眼一次成形；
   旧版把鱼眼画在 background 层，被覆盖其上的两个伪元素鱼头遮住，故看不见点 */
.taiji{
	width:140px; height:140px; border-radius:50%; overflow:hidden;
	box-shadow:0 0 0 1px rgba(42,38,32,.12), 0 12px 34px rgba(0,0,0,.18);
	animation:taijiSpin 16s linear infinite;
	cursor:pointer; position:relative; line-height:0}
.taiji svg{width:100%; height:100%; display:block}
@keyframes taijiSpin{to{transform:rotate(360deg)}}
.taiji.paused{animation-play-state:paused}
.taiji.fast{animation-duration:1.5s}
.taiji-hint{
	position:absolute; bottom:-8px; width:100%; text-align:center;
	font-size:12px; color:#9a8f80; letter-spacing:.2em}

/* 今日静语 */
.motto-card{
	width:340px; margin:0 auto 16px; padding:14px 18px;
	background:rgba(255,255,255,.32); border:1px solid rgba(42,38,32,.08);
	border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.05)}
.motto-card p{
	margin:0 0 10px; font-size:17px; line-height:28px; color:#3d3530;
	letter-spacing:.08em; min-height:28px}
.motto-card p i{font-style:normal; color:#8a2626}

/* 按钮通用 */
.ink-btn{
	display:inline-block; padding:7px 22px;
	border:1px solid rgba(42,38,32,.28); background:rgba(255,255,255,.22);
	color:#4a433b; font-family:"STKaiti","KaiTi","楷体",serif; font-size:15px;
	letter-spacing:.15em; cursor:pointer; border-radius:22px;
	transition:all .25s ease; outline:none; text-decoration:none}
.ink-btn:hover{
	background:rgba(255,255,255,.55); border-color:rgba(42,38,32,.45);
	box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-1px)}
.ink-btn:active{transform:translateY(0)}

/* 静坐进度环 */
.timer-wrap{
	width:340px; margin:10px auto 0; padding:14px 0 4px;
	display:none; text-align:center}
.timer-wrap.active{display:block}
.timer-svg{width:90px; height:90px; margin:0 auto 8px; transform:rotate(-90deg)}
.timer-track{fill:none; stroke:rgba(42,38,32,.08); stroke-width:5}
.timer-bar{fill:none; stroke:#5d8a6e; stroke-width:5; stroke-linecap:round;
	stroke-dasharray:251.2; stroke-dashoffset:251.2;
	transition:stroke-dashoffset 1s linear}
.timer-hint{font-size:14px; color:#5d6e62; letter-spacing:.12em}

/* 问卦入口（独立一行，在静坐进度环下方） */
.dao-entry{width:340px; margin:16px auto 0; text-align:center}

/* ---------- 场景入口 ---------- */
.jing-grid{
	width:920px; margin:0 auto; display:grid;
	grid-template-columns:repeat(5,1fr);
	grid-auto-rows:196px; gap:16px 16px;
	padding:10px 0 30px}

.jing-card{
	position:relative; display:flex; flex-direction:column;
	align-items:center; justify-content:center;
	background:rgba(255,255,255,.28);
	border:1px solid rgba(42,38,32,.10);
	border-radius:10px; text-decoration:none; color:#3d3530;
	box-shadow:0 4px 14px rgba(0,0,0,.04);
	transition:all .28s ease; overflow:hidden}
.jing-card::after{
	content:''; position:absolute; left:50%; bottom:14px; width:0; height:2px;
	background:#8a2626; transform:translateX(-50%);
	transition:width .28s ease, opacity .28s ease; opacity:.7}
.jing-card:hover,.jing-card:focus{
	background:rgba(255,255,255,.62);
	border-color:rgba(42,38,32,.22);
	box-shadow:0 8px 28px rgba(0,0,0,.10);
	transform:translateY(-3px)}
.jing-card:hover::after,.jing-card:focus::after{width:42px; opacity:1}

.card-title{
	writing-mode:vertical-rl; text-orientation:upright; white-space:nowrap;
	font-family:"STXingkai","华文行楷","STKaiti","KaiTi","楷体",serif;
	font-size:22px; line-height:26px; letter-spacing:.16em;
	margin-bottom:12px; color:#2a3c31}
.card-note{
	font-size:12px; line-height:16px; color:#7a7063;
	letter-spacing:.18em; white-space:nowrap}

/* 特殊卡片跨列 */
.jing-card.wide{grid-column:span 2}

/* 装饰细线 */
.jing-rule{
	width:120px; height:1px; background:rgba(42,38,32,.12); margin:6px auto 20px}

/* ---------- 响应式小屏 ---------- */
@media (max-width:760px){
	.jing-wrap{width:94%}
	.jing-taiji-stage{width:auto}
	.dao-entry{width:auto; margin-top:14px}
	.jing-grid{width:auto; grid-template-columns:repeat(3,1fr); grid-auto-rows:176px; gap:12px}
	.j-seal{right:10px; top:22px; width:36px; height:36px; line-height:34px; font-size:16px}
	h1.jtitle{font-size:24px; letter-spacing:.12em}
}