﻿/* 字体与基础设置 */
:root {
--bg-start: #ffe5d3;
--bg-end: #ffd1a8;
--card-bg: rgba(255, 255, 255, 0.7);
--text: #5a3a2c;
--accent: #ff7f50; /* 珊瑚橙 */
--accent-2: #ffb199;
--shadow: rgba(139, 69, 19, 0.15);
}

* { box-sizing: border-box; }

html, body {
height: 100%;
margin: 0;
}

body {
font-family: 'Noto Serif SC', serif;
color: var(--text);
background: radial-gradient(1200px 800px at 50% 20%, var(--bg-start), var(--bg-end));
display: grid;
place-items: center;
}

.container {
width: min(720px, 92vw);
background: var(--card-bg);
backdrop-filter: blur(6px);
border-radius: 16px;
padding: 32px 24px;
box-shadow: 0 10px 30px var(--shadow);
text-align: center;
}

.headline {
margin-top: 8px;
margin-bottom: 20px;
font-size: 40px;
letter-spacing: 2px;
}

.primary-button {
appearance: none;
border: none;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: white;
padding: 12px 22px;
border-radius: 999px;
font-size: 18px;
cursor: pointer;
box-shadow: 0 8px 16px var(--shadow);
transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.primary-button:hover { filter: brightness(1.03); }
.primary-button:active { transform: translateY(1px) scale(0.99); }

.wish-section {
margin-top: 20px;
text-align: left;
}

.wish-label {
display: block;
margin-bottom: 8px;
font-weight: 700;
}

.wish-text {
width: 100%;
border: 1px solid #f2b89a;
border-radius: 12px;
padding: 12px 14px;
font-size: 16px;
resize: vertical;
min-height: 120px;
outline: none;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

.submit-button {
margin-top: 12px;
appearance: none;
border: none;
background: #ff9b6a;
color: #fff;
padding: 10px 18px;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 6px 12px var(--shadow);
transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.submit-button:hover { filter: brightness(1.04); }
.submit-button:active { transform: translateY(1px) scale(0.99); }

.final-message {
margin-top: 24px;
font-size: 28px;
font-weight: 700;
color: #c65f35;
}

@media (max-width: 420px) {
.headline { font-size: 32px; }
}
