* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: #2d231b;
background-image: radial-gradient(circle at 20% 30%, #4a3c2e 0%, #1e1611 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: ‘华文楷体’, ‘KaiTi’, ‘宋体’, ‘SimSun’, ‘Times New Roman’, serif;
padding: 16px;
}

.sacred-card {
max-width: 900px;
width: 100%;
background: #fcf3e4;
background: linear-gradient(145deg, #f9efdb 0%, #efe2cf 100%);
border-radius: 48px 48px 36px 36px;
box-shadow: 0 30px 40px rgba(0,0,0,0.6), 0 0 0 2px #b69e7c inset, 0 0 0 4px #eadbc5 inset;
padding: 2.4rem 2rem 2rem;
border: 1px solid #ab8f6f;
transition: all 0.3s;
}

.title-section {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 20px;
}

.trigram-decor {
font-size: 2.6rem;
opacity: 0.3;
color: #6b4f37;
letter-spacing: -8px;
}

h1 {
font-size: 2.8rem;
font-weight: 400;
color: #3e2c1b;
text-shadow: 2px 2px 0 #dac09a, 4px 4px 0 rgba(0,0,0,0.1);
letter-spacing: 10px;
margin: 0;
font-family: ‘华文楷体’, ‘KaiTi’, cursive;
}

.subhead {
text-align: center;
color: #6f523b;
font-size: 1.1rem;
letter-spacing: 4px;
margin-top: -10px;
margin-bottom: 24px;
font-style: italic;
border-top: 1px dashed #b19270;
padding-top: 12px;
}

.tube-area {
background: #4f3a27;
background: linear-gradient(165deg, #5e4632, #3f2f1f);
border-radius: 120px 120px 40px 40px;
padding: 30px 30px 20px 30px;
margin: 10px 0 20px 0;
border: 3px solid #ac8b62;
box-shadow: inset 0 -8px 0 #2b1f13, 0 12px 18px rgba(0,0,0,0.5);
position: relative;
}

.tube-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}

.sign-tube {
position: relative;
width: 200px;
height: 220px;
background: #8e6f4a;
background: linear-gradient(135deg, #b48b5a, #795d3a);
border-radius: 60px 60px 30px 30px;
border: 4px solid #e3c289;
box-shadow: 0 12px 0 #3f2c19, inset 0 -6px 8px #ffefc0;
margin-bottom: 12px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 15px 0;
cursor: pointer;
transition: box-shadow 0.2s;
}

.sign-tube.shake {
animation: tubeShake 0.3s infinite ease-in-out;
}

@keyframes tubeShake {
0% { transform: rotate(0deg); }
25% { transform: rotate(2deg); }
50% { transform: rotate(-2deg); }
75% { transform: rotate(1deg); }
100% { transform: rotate(0deg); }
}

.sign-stick {
width: 16px;
height: 130px;
background: #f5e7c8;
background: linear-gradient(135deg, #fff2d4, #e6c99b);
border-radius: 20px 20px 8px 8px;
border: 2px solid #ab7e4a;
box-shadow: 2px 6px 0 #4f3a22;
margin: 0 2px;
display: inline-block;
transform-origin: bottom center;
}

.sign-group {
display: flex;
gap: 4px;
justify-content: center;
margin-bottom: 8px;
}

.sign-stick:nth-child(odd) {
height: 145px;
background: #eedcba;
}
.sign-stick:nth-child(3) {
height: 120px;
}

.tube-mouth {
width: 80%;
height: 20px;
background: #be9d72;
border-radius: 30px 30px 0 0;
border-bottom: 4px solid #664b2e;
margin-bottom: 5px;
}

.instruction-tip {
color: #f0dbc0;
background: #2b1f13;
padding: 6px 20px;
border-radius: 40px;
font-size: 1rem;
letter-spacing: 2px;
display: inline-block;
box-shadow: inset 0 1px 4px #efdba8;
margin-top: 5px;
border: 1px solid #b3915b;
}

.ritual-btn {
background: #b4873a;
background: radial-gradient(circle at 30% 20%, #f0c27b, #9e6d31);
border: 3px solid #ffd89c;
color: #251e12;
font-size: 1.8rem;
font-weight: 500;
padding: 1rem 2.2rem;
border-radius: 60px;
box-shadow: 0 10px 0 #61471e, 0 10px 25px rgba(0,0,0,0.6);
cursor: pointer;
transition: 0.05s linear;
letter-spacing: 10px;
text-shadow: 1px 1px 0 #c9a467;
font-family: ‘华文楷体’, ‘KaiTi’, serif;
width: 100%;
max-width: 450px;
margin: 20px auto 10px;
}

.ritual-btn:active {
transform: translateY(8px);
box-shadow: 0 2px 0 #4a371a, 0 10px 20px rgba(0,0,0,0.5);
}

.rule-note {
display: flex;
flex-wrap: wrap;
gap: 10px;
background: #d2b694;
border-radius: 30px;
padding: 0.8rem 1.2rem;
font-size: 0.9rem;
color: #20170e;
justify-content: center;
border: 1px solid #ab7f54;
box-shadow: inset 0 0 8px #faeaca;
}

.rule-note span {
background: #f1e1cd;
padding: 0.2rem 1rem;
border-radius: 30px;
border: 1px solid #76583b;
font-weight: 500;
}

/* 新增事件输入区 – 古朴风格 */
.question-panel {
margin: 24px 0 20px;
background: #e3cfb5;
border-radius: 50px;
padding: 1.5rem 1.8rem;
border: 2px solid #a78157;
box-shadow: inset 0 0 0 2px #fef2dd, 0 6px 0 #6e523a;
}

.question-panel label {
display: block;
font-weight: 600;
color: #3b2a18;
font-size: 1.1rem;
letter-spacing: 1px;
margin-bottom: 6px;
margin-left: 10px;
}

.question-panel input, .question-panel textarea {
width: 100%;
padding: 12px 20px;
border-radius: 50px;
border: 2px solid #8d6b45;
background: #fff7eb;
font-size: 1.05rem;
font-family: ‘华文楷体’, ‘KaiTi’, serif;
box-shadow: inset 0 2px 6px #bb9e7a, 0 2px 0 #4f3a24;
transition: all 0.1s;
}

.question-panel input:focus, .question-panel textarea:focus {
outline: none;
border-color: #c99b5b;
background: #fffbf2;
}

.yao-list {
background: #e6d3bb;
border-radius: 40px;
padding: 1.2rem;
border: 2px solid #b49268;
box-shadow: inset 0 0 0 2px #fff7e3, 0 10px 16px rgba(0,0,0,0.2);
margin: 20px 0;
}

.line-item {
background: #f9efde;
border-radius: 40px;
padding: 0.4rem 1.2rem 0.4rem 1rem;
border: 1px solid #a77d55;
margin-bottom: 8px;
box-shadow: 0 3px 0 #846b48;
}

.line-order {
color: #603d1e;
font-weight: 600;
background: #cbb290;
padding: 2px 10px;
border-radius: 30px;
}

.gua-panel {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin: 2rem 0 1.5rem;
}

.gua-box {
flex: 1 1 200px;
background: #f2e0c9;
border-radius: 40px 40px 30px 30px;
padding: 1.2rem 0.5rem;
border: 3px solid #a78157;
box-shadow: inset 0 -5px 0 #866e4e, 0 8px 0 #4e3a24;
}

.gua-name {
font-size: 1.6rem;
background: #b38d62;
color: #23190e;
padding: 4px 0;
border-radius: 30px;
margin-bottom: 16px;
border: 1px solid #e6c594;
}

.gua-lines {
font-size: 2.2rem;
background: #dac09e;
border-radius: 40px;
padding: 0.4rem;
color: #1f3e1f;
}

.advice {
background: #be9d78;
border-left: 10px solid #513a24;
color: #22190f;
font-size: 1.15rem;
padding: 1.4rem 2rem;
border-radius: 60px 20px 20px 60px;
box-shadow: 0 6px 0 #5f442c;
margin: 1.8rem 0;
line-height: 1.7;
word-break: break-word;
}

.footer-note {
font-size: 0.9rem;
color: #4f3e2b;
text-align: center;
border-top: 2px solid #b5936b;
padding-top: 1rem;
margin-top: 1rem;
}

.chop {
font-family: ‘华文楷体’, serif;
color: #884d24;
background: #d1af83;
border-radius: 50%;
width: 45px;
height: 45px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #5f3f23;
font-size: 1.2rem;
}

.small-note {
font-size: 0.9rem;
opacity: 0.8;
}

/* ———- 新增全屏按钮样式 (古朴典雅) ———- */
.fullscreen-trigger {
display: inline-block;
background: #b4873a;
background: radial-gradient(circle at 30% 20%, #f0c27b, #9e6d31);
border: 2px solid #ffd89c;
color: #251e12;
font-size: 1.2rem;
padding: 0.6rem 1.8rem;
border-radius: 60px;
box-shadow: 0 5px 0 #61471e, 0 6px 12px rgba(0,0,0,0.4);
cursor: pointer;
transition: 0.05s linear;
letter-spacing: 4px;
text-shadow: 1px 1px 0 #c9a467;
font-family: ‘华文楷体’, ‘KaiTi’, serif;
line-height: 1.2;
user-select: none;
}

.fullscreen-trigger:active {
transform: translateY(4px);
box-shadow: 0 1px 0 #4a371a, 0 6px 10px rgba(0,0,0,0.5);
}