/* ============================================================
   咕咕蛋小酒馆 · 玩家自建壳 UI
   陪伴类剧本游戏：竖屏手机优先，桌面端居中呈现
   ============================================================ */
:root {
    /* 暖暗色基底：夜间阅读不刺眼，陪伴氛围 */
    --bg: #14110d;
    --bg-deep: #0e0c09;
    --panel: #1f1a14;
    --panel2: #2a231b;
    --panel3: #342b20;
    --line: #3a3128;
    --text: #f2ead9;
    --dim: #a99b84;
    --faint: #7d7260;
    --accent: #e0b46a;         /* 金色主强调 */
    --accent-ink: #241a08;     /* 金色底上的深字 */
    --accent2: #d8a24a;        /* 题材主题色（默认=年代金） */
    --danger: #e06c6c;
    --ok: #7bc98a;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 6px 24px rgba(0,0,0,.35);
    --font-ui: -apple-system, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
    --font-story: "Kaiti SC", "KaiTi", "STKaiti", "楷体", "Source Han Serif SC", "Noto Serif CJK SC", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    background: var(--bg-deep);
    color: var(--text);
    font: 15px/1.6 var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* 桌面端：应用收敛为一台「手机」居中，两侧铺氛围光 */
#app {
    max-width: 480px;
    margin: 0 auto;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}
@media (min-width: 720px) {
    body {
        background:
            radial-gradient(1200px 600px at 20% -10%, rgba(224,180,106,.10), transparent 60%),
            radial-gradient(1000px 700px at 85% 110%, rgba(122,162,247,.07), transparent 60%),
            var(--bg-deep);
    }
    #app { box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.55); }
}

button {
    font: inherit; color: inherit; background: var(--panel2);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 8px 12px; cursor: pointer;
    transition: transform .12s ease, border-color .15s ease, opacity .15s ease;
}
button:hover { border-color: var(--accent); }
button:active { transform: scale(.97); }
button.primary { background: linear-gradient(180deg, #ecc27f, var(--accent)); color: var(--accent-ink); border: none; font-weight: 700; }
button.primary:hover { opacity: .92; }
button.ghost { background: transparent; border-color: transparent; color: var(--dim); }
button.ghost:hover { color: var(--text); }
button:disabled { opacity: .45; cursor: not-allowed; }
input, textarea, select {
    font: inherit; color: var(--text); background: var(--panel2);
    border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--faint); }

/* 滚动条：细条半透明，不抢戏（轨道透明，拇指暗金） */
* { scrollbar-width: thin; scrollbar-color: rgba(169,155,132,.28) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(169,155,132,.28); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(224,180,106,.45); }
::-webkit-scrollbar-corner { background: transparent; }

/* ============ 登录页 ============ */
.login-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px;
    background:
        radial-gradient(700px 380px at 50% 18%, rgba(224,180,106,.13), transparent 65%),
        radial-gradient(500px 500px at 80% 90%, rgba(224,180,106,.06), transparent 60%);
}
.login-card { width: 100%; max-width: 340px; text-align: center; }
.login-card .brand-mark {
    width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ecc27f, var(--accent) 55%, #8a6527);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; color: var(--accent-ink); font-weight: 800; font-family: var(--font-story);
    box-shadow: 0 10px 30px rgba(224,180,106,.25);
}
.login-card h1 { font-size: 24px; letter-spacing: 2px; font-family: var(--font-story); }
.login-card .sub { color: var(--dim); font-size: 13px; margin: 8px 0 30px; letter-spacing: 1px; }
.login-card label { display: block; text-align: left; font-size: 12px; color: var(--dim); margin: 14px 0 6px; }
.login-card input { background: var(--panel); border-radius: var(--radius-md); padding: 13px 14px; }
.login-card .err { color: var(--danger); font-size: 13px; min-height: 20px; margin-top: 12px; }
.login-card .primary { width: 100%; margin-top: 8px; padding: 13px; border-radius: 999px; font-size: 15px; }


/* ============ 底部弹层（共享） ============ */
.sheet-mask {
    position: fixed; inset: 0; background: rgba(8,6,4,.6); z-index: 30;
    display: flex; align-items: flex-end; justify-content: center;
    animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.sheet {
    width: 100%; max-width: 480px; background: var(--panel);
    border: 1px solid var(--line); border-bottom: none;
    border-radius: 20px 20px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 72dvh; overflow-y: auto;
    animation: sheetUp .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheetUp { from { transform: translateY(40px); opacity: .5; } }
.sheet .grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 12px; }
.sheet h3 { font-size: 15px; margin-bottom: 12px; font-family: var(--font-story); letter-spacing: .5px; }
.sheet label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 5px; }
.sheet .btns { display: flex; gap: 10px; margin-top: 16px; }
.sheet .btns button { flex: 1; padding: 12px; border-radius: 999px; }


/* Toast 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(8,6,4,.6); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 24px; animation: fadeIn .18s ease; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; width: 100%; max-width: 340px; box-shadow: var(--shadow-card); }
.modal h3 { font-size: 16px; margin-bottom: 12px; font-family: var(--font-story); }
.modal label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 5px; }
.modal .btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }


/* 宽屏桌面：应用全宽（手机竖屏在上方 #app 限宽 480） */
@media (min-width: 900px) {
    #app { max-width: none; box-shadow: none; }
}

/* 新游戏角色设定面板 */
#newGameMask .np-label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 5px; }
#newGameMask .np-row { display: flex; gap: 10px; }
#newGameMask .np-col { flex: 1; }
#newGameMask input, #newGameMask select, #newGameMask textarea {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 9px;
    border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--text);
    font-size: 13.5px; font-family: inherit; resize: vertical;
}
#newGameMask input:focus, #newGameMask select:focus, #newGameMask textarea:focus { outline: none; border-color: rgba(212,160,74,.5); }