:root {
  color-scheme: light;
  --ink: #293a34;
  --leaf: #52745d;
  --gold: #d4ad67;
  --cream: #fffaf0;
  --line: #d9ddcf;
  --muted: #758078;
  --shadow: 0 22px 70px #14251f45;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; font-family: Arial, "Noto Sans TC", "Microsoft JhengHei", sans-serif; color: var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: #456d55; text-underline-offset: 3px; }

.login-page { min-height: 100vh; position: relative; background: #9ec3f5 url('/assets/login-bg.webp?v=3') 50% 50% / cover fixed no-repeat; }
.login-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(180deg, #1c3a6a30, transparent 38%); }
.login-layout { position: relative; z-index: 1; min-height: 100vh; max-width: 1440px; margin: auto; padding: 74px clamp(18px, 5vw, 80px) 30px; display: grid; grid-template-columns: minmax(320px, 1fr) 300px; align-items: center; gap: clamp(30px, 7vw, 112px); }
.login-main { width: min(100%, 520px); justify-self: center; }
/* B23 login_10: title in the sky, card left-of-centre, news top-right; Sprout and slimes (bottom right) stay clear */
#login-layout { grid-template-columns: minmax(320px, 470px) 1fr 300px; grid-template-rows: auto auto auto; column-gap: clamp(20px, 4vw, 60px); row-gap: 0; align-items: start; align-content: start; padding-top: 34px; }
#login-layout > .login-main { display: contents; }
#login-layout .brand-mark { grid-column: 1 / -1; grid-row: 1; margin: 0 auto clamp(40px, 12vh, 150px); text-shadow: 0 2px 4px #2a4f8a, 0 3px 22px #2a4f8acc; }
#login-layout .brand-kicker { color: #fff3cf; }
#login-layout .auth-card { grid-column: 1; grid-row: 2; }
#login-layout .login-footer { grid-column: 1; grid-row: 3; }
#login-layout .login-footer a { color: #2f4a78; font-weight: 600; text-shadow: 0 0 6px #fff, 0 0 3px #fff; }
#login-layout .news-card { grid-column: 3; grid-row: 2; align-self: start; transform: none; }
.brand-mark { position: relative; margin: 0 auto 22px; color: #fffaf0; text-align: center; text-shadow: 0 2px 18px #111a17; }
.brand-kicker { margin: 0 0 8px; color: #e8d4a6; font-size: 10px; letter-spacing: .34em; }
.brand-mark h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 5vw, 52px); font-weight: 600; letter-spacing: .035em; }
.brand-cn { margin: 8px 0 0; font-size: 21px; letter-spacing: .27em; }
.brand-leaf { position: absolute; top: 2px; right: 19%; color: #edcf88; font-size: 20px; }
.auth-card { padding: 20px clamp(18px, 4vw, 34px) 28px; border: 1px solid #f4e8ca; border-radius: 18px; background: #fffaf0f2; box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.auth-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 -4px 16px; border-bottom: 1px solid var(--line); }
.auth-tab { padding: 12px 8px 14px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #798078; font-weight: 600; cursor: pointer; }
.auth-tab.active { border-bottom-color: var(--gold); color: var(--leaf); }
.auth-form { display: grid; gap: 13px; }
.auth-form[hidden] { display: none; }
.auth-form > label:not(.consent-row) { display: grid; gap: 6px; color: #4c5b52; font-size: 13px; font-weight: 600; }
.auth-form input:not([type=checkbox]) { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #cdd4c7; border-radius: 9px; outline: none; background: #fffefa; color: var(--ink); }
.auth-form input:focus { border-color: #739272; box-shadow: 0 0 0 3px #78947728; }
.consent-row { display: flex; align-items: flex-start; gap: 9px; color: #57645a; font-size: 12px; line-height: 1.7; }
.consent-row input { margin-top: 4px; accent-color: var(--leaf); }
.consent-row a { margin: 0 3px; }
.primary-button { height: 46px; margin-top: 3px; border: 1px solid #48654e; border-radius: 10px; background: linear-gradient(#779675, #58765c); box-shadow: 0 5px 12px #334c3426; color: #fffdf4; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.primary-button:hover { filter: brightness(1.06); }
.primary-button:disabled { opacity: .6; cursor: wait; }
.secondary-button { min-height: 42px; border: 1px solid #b6c4ae; border-radius: 9px; background: #f3f4ea; color: #4c6951; font-weight: 700; cursor: pointer; }
.secondary-button:hover { background: #e8eee2; }
.character-create-layout .login-main { grid-column: 1 / -1; }
.character-create-layout .auth-card { max-width: 520px; margin: auto; }
.form-help { margin: 0; color: #68736a; font-size: 13px; line-height: 1.7; }
.gender-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.gender-choice legend { margin-bottom: 7px; color: #4c5b52; font-size: 13px; font-weight: 600; }
.gender-choice label { position: relative; cursor: pointer; }
.gender-choice input { position: absolute; opacity: 0; }
.gender-choice span { display: grid; place-items: center; gap: 4px; min-height: 42px; padding: 8px 4px 6px; border: 1px solid #cdd4c7; border-radius: 12px; background: #fffefa; color: #4c5b52; font-weight: 700; }
.gender-choice span img { width: auto; height: 150px; object-fit: contain; filter: saturate(.92); transition: transform .18s ease; }
.gender-choice input:checked + span img { transform: translateY(-3px) scale(1.04); filter: none; }
.gender-choice span b { font-size: 14px; }
.job-path { margin: 2px 0 0; }
.job-path-title { margin: 0 0 6px; color: #4c5b52; font-size: 13px; font-weight: 600; }
.job-path ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.job-path li { display: grid; justify-items: center; gap: 1px; padding: 6px 2px 5px; border: 1px solid #e0dccb; border-radius: 10px; background: #fffdf6; }
.job-path li img { height: 56px; width: auto; }
.job-path li span { color: #4a3426; font-size: 13px; font-weight: 700; }
.job-path li small { color: #8a7a63; font-size: 11px; }
.job-path li.soon img { opacity: .55; filter: grayscale(.4); }
@media (max-width: 520px) { .gender-choice span img { height: 118px; } .job-path li img { height: 44px; } }
.gender-choice input:checked + span { border-color: #739272; background: #e9efe4; color: #36563d; box-shadow: 0 0 0 2px #78947728; }
.gender-choice input:focus-visible + span { outline: 2px solid #739272; outline-offset: 2px; }
.notice, .mail-warning { display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #e7efe4; color: #3c6148; font-size: 13px; line-height: 1.65; }
.notice:not(:empty), .mail-warning:not([hidden]) { display: block; }
.notice.error { background: #f5e5dc; color: #8a4f3e; }
.mail-warning { background: #f5edda; color: #795d28; }
.news-card { align-self: center; padding: 20px 22px; border: 1px solid #f6edcf; border-radius: 15px; background: #f8f6e8e8; box-shadow: 0 18px 50px #14251f30; backdrop-filter: blur(8px); transform: translateY(40px); }
.news-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #d8dbc9; }
.news-leaf { color: #b4924d; font-size: 28px; }
.news-heading p { margin: 0 0 3px; color: #8a8e76; font-size: 9px; letter-spacing: .2em; }
.news-heading h2 { margin: 0; color: #475b49; font-size: 18px; }
.news-list { margin: 0; padding: 3px 0 0; list-style: none; }
.news-list li { position: relative; padding: 14px 0 12px 16px; border-bottom: 1px solid #e1e0d3; font-size: 14px; line-height: 1.6; }
.news-list li::before { position: absolute; top: 21px; left: 1px; width: 6px; height: 6px; border-radius: 50%; background: #bd9a55; content: ""; }
.news-date { display: block; margin-bottom: 5px; color: #919282; font-size: 10px; letter-spacing: .06em; }
.news-footnote { margin: 14px 0 0; color: #828779; font-size: 11px; line-height: 1.6; }
.login-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 18px 0 0; }
.login-footer a { color: #f5f1e4; font-size: 11px; text-decoration: none; text-shadow: 0 1px 5px #1b2a27; }
.login-footer a:hover { text-decoration: underline; }
.music-toggle { position: absolute; z-index: 3; top: 18px; right: 22px; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #f0e2c5aa; border-radius: 999px; background: #1c302ac9; color: #fff8e8; font-size: 12px; cursor: pointer; }
.music-toggle[aria-pressed=true] { background: #5e795fcf; }
.game-shell { position: fixed; inset: 0; background: #15221d; }
.game-shell[hidden] { display: none; }
.game-shell iframe { display: block; width: 100%; height: 100%; border: 0; }
.game-account-bar { position: absolute; z-index: 5; top: 8px; right: 180px; display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 11px; border: 1px solid #7cc4ecd9; border-radius: 16px; background: #fff9eee6; color: #4a3426; font-size: 12px; box-shadow: 0 2px 8px #2a4f8a22; } /* 1104：改成奶油＋天藍小膠囊，放在小地圖左邊 */
.game-account-bar button { padding: 3px 9px; border: 1px solid #7cc4ec; border-radius: 12px; background: #eaf6ff; color: #2f6f9e; font-size: 12px; cursor: pointer; }
@media (max-width: 767px), (pointer: coarse) and (max-device-width: 900px) { .game-account-bar { top: 8px; right: 8px; padding: 2px 3px 2px 8px; font-size: 11px; } .game-account-bar #signed-in-as { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-account-bar button { padding: 2px 7px; font-size: 11px; } }

.legal-page { min-height: 100vh; background: #eef0e7; }
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px clamp(18px, 6vw, 90px); background: #263b35; color: #fff9e9; }
.legal-brand { color: #fff9e9; font-family: Georgia, serif; font-size: 18px; font-weight: bold; text-decoration: none; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.legal-nav a { color: #f0e7d2; font-size: 12px; text-decoration: none; }
.legal-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; max-width: 980px; margin: 32px auto; padding: 0 18px 50px; }
.legal-toc, .legal-content { border: 1px solid #dce0d2; border-radius: 14px; background: #fffdf6; box-shadow: 0 10px 35px #263b3510; }
.legal-toc { position: sticky; top: 18px; height: max-content; padding: 20px; }
.legal-toc h2 { margin: 0 0 12px; font-size: 14px; }
.legal-toc a { display: block; padding: 7px 0; color: #637362; font-size: 12px; text-decoration: none; }
.legal-toc a:hover { color: #b18842; }
.legal-content { padding: clamp(22px, 5vw, 52px); }
.legal-content h1 { margin: 0 0 8px; color: #3f5e46; font-size: 30px; }
.legal-lead { margin: 0 0 28px; color: #7c8379; font-size: 14px; line-height: 1.8; }
.legal-content h2 { margin: 28px 0 10px; padding-top: 7px; border-top: 1px solid #e6e7dc; color: #4d694f; font-size: 18px; }
.legal-content p, .legal-content li { color: #4f5b52; font-size: 14px; line-height: 1.95; }
.legal-content ul { padding-left: 22px; }
.legal-date { margin-top: 34px; padding-top: 16px; border-top: 1px solid #e1e4d8; color: #7d8478; font-size: 12px; }
.legal-bottom { padding: 22px; color: #7e877a; font-size: 11px; text-align: center; }
.legal-bottom a { margin: 0 8px; color: #627660; text-decoration: none; }

@media (max-width: 850px) {
  .login-layout { grid-template-columns: minmax(300px, 520px); justify-content: center; gap: 20px; padding-top: 82px; align-items: start; }
  #login-layout { grid-template-columns: minmax(0, 520px); padding-top: 82px; }
  #login-layout .brand-mark { margin-bottom: 18px; }
  #login-layout .auth-card, #login-layout .login-footer, #login-layout .news-card { grid-column: 1; }
  #login-layout .login-footer { grid-row: 3; }
  #login-layout .news-card { grid-row: 4; width: min(100%, 520px); justify-self: center; }
  .login-page { background-attachment: scroll; background-position: 69% 100%; }
  .brand-mark { margin-bottom: 18px; }
  .legal-wrap { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .legal-top { align-items: flex-start; flex-direction: column; }
  .legal-nav { gap: 10px 18px; }
}

@media (max-width: 520px) {
  .login-layout, #login-layout { padding: 78px 15px 24px; }
  .brand-mark h1 { font-size: 31px; }
  .brand-cn { font-size: 17px; }
  .brand-leaf { right: 11%; font-size: 16px; }
  .auth-card { padding: 16px 17px 22px; }
  .auth-tabs { grid-template-columns: repeat(2, 1fr); margin-bottom: 13px; }
  .auth-tab { padding: 10px 4px 12px; font-size: 13px; }
  .music-toggle { top: 12px; right: 12px; }
  .news-card { padding: 16px 18px; }
  .login-footer { gap: 9px 14px; }
  .login-footer a { font-size: 10px; }
  .legal-content { padding: 24px 20px; }
  .legal-content h1 { font-size: 25px; }
  .legal-wrap { margin-top: 18px; padding-bottom: 30px; }
  .legal-nav a { font-size: 11px; }
}
@media (orientation: portrait) and (max-width: 900px) { .login-page { background-image: url('/assets/cg/spring_picnic.webp?v=1'); background-position: 50% 100%; background-size: cover; background-attachment: scroll; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand-logo { display: block; width: clamp(240px, 34vw, 460px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 18px #2a4f8a66); }
@media (orientation: portrait) and (max-width: 900px) { .brand-logo { width: min(78vw, 360px); } }

/* 1105 總組裝：手機只留一顆小小的「登出」在上方正中間，不擋遊戲畫面上方；帳號名稱放在設定頁 */
/* 1105 第 2 輪：手機的「登出」會壓到左上狀態框，改到遊戲內「設定 → 登出」，這裡整條藏起來 */
@media (max-width: 767px), (pointer: coarse) and (max-device-width: 900px), (max-height: 480px) { .game-account-bar { display: none !important; } }

/* 1108 多角色：選角畫面（6 格）、刪除確認、回到選角 */
.character-create-layout .char-select-card { max-width: 900px; width: 100%; }
.char-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.char-slot { position: relative; min-width: 0; }
.char-card, .char-empty { width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 12px 10px 12px; border: 2px solid #ead9a8; border-radius: 20px; background: linear-gradient(#fffdf5, #f7efd6); color: var(--ink); text-align: center; cursor: pointer; box-shadow: 0 5px 0 #e3cf96, 0 10px 18px #3a2f1426; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.char-card:hover, .char-empty:hover { transform: translateY(-3px); border-color: #e7b84f; box-shadow: 0 8px 0 #e3cf96, 0 14px 22px #3a2f1430; }
.char-card:active, .char-empty:active { transform: translateY(1px); box-shadow: 0 2px 0 #e3cf96; }
.char-card:focus-visible, .char-empty:focus-visible { outline: 3px solid #739272; outline-offset: 2px; }
.char-slot-no { position: absolute; top: 8px; left: 12px; z-index: 1; padding: 1px 9px; border-radius: 999px; background: #fff3c9; color: #8a6a1f; font-size: 11px; font-weight: 700; pointer-events: none; }
.char-avatar { display: grid; place-items: end center; width: 100%; height: 118px; margin-top: 8px; border-radius: 14px; background: radial-gradient(circle at 50% 78%, #d8ecff 0, #eaf5ff 55%, transparent 56%); }
.char-avatar img { height: 112px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 4px 3px #2a3a2c33); }
.char-name { max-width: 100%; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 800; color: #4a3426; }
.char-job { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2f6f9e; font-size: 13px; font-weight: 700; }
.char-level { color: #58765c; font-size: 12px; font-weight: 700; }
.char-map { color: #8a7a63; font-size: 12px; }
.char-online { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #dff3d9; color: #3c7a3c; font-size: 10px; font-weight: 700; vertical-align: middle; }
.char-delete { position: absolute; top: 6px; right: 8px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff3f0cc; color: #b0584a; font-size: 15px; line-height: 1; cursor: pointer; opacity: .8; }
.char-delete:hover { background: #ffe1da; opacity: 1; }
.char-empty { align-content: center; min-height: 236px; border-style: dashed; background: #fffdf6aa; color: #8a7a63; box-shadow: none; }
.char-empty .plus { display: grid; place-items: center; width: 62px; height: 62px; border: 2px dashed #d9c98f; border-radius: 50%; font-size: 34px; font-weight: 300; color: #c4a24a; }
.char-empty b { margin-top: 6px; font-size: 15px; color: #6c5a38; }
.char-empty small { font-size: 12px; }
.char-select-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.char-select-account { color: #4c5b52; font-size: 13px; font-weight: 700; }
.char-select-hint { flex: 1 1 200px; color: #8a8f84; font-size: 12px; }
.char-select-foot .secondary-button { padding: 0 18px; }
.character-back { width: 100%; margin-bottom: 12px; }
.danger-button { min-height: 42px; padding: 0 18px; border: 1px solid #a8503f; border-radius: 9px; background: linear-gradient(#d4806e, #b85c4b); color: #fff; font-weight: 700; cursor: pointer; }
.danger-button:disabled { opacity: .6; cursor: wait; }
.char-dialog { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: #14251f99; }
.char-dialog-card { display: grid; gap: 12px; width: min(100%, 420px); padding: 22px; border: 1px solid #f4e8ca; border-radius: 18px; background: #fffaf0; box-shadow: var(--shadow); }
.char-dialog-card h2 { margin: 0; font-size: 19px; color: #7c3d30; }
.char-dialog-card input { height: 42px; padding: 0 12px; border: 1px solid #cdd4c7; border-radius: 9px; background: #fffefa; }
.char-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 640px) {
  .char-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .char-avatar { height: 98px; }
  .char-avatar img { height: 94px; }
  .char-name { font-size: 15px; }
  .char-empty { min-height: 214px; }
  .character-create-layout .char-select-card { padding: 16px 12px 18px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .character-create-layout { padding-top: 14px; padding-bottom: 12px; min-height: 0; }
  .character-create-layout .brand-mark { margin-bottom: 8px; }
  .character-create-layout .brand-mark h1 { font-size: 24px; }
  .character-create-layout .brand-kicker, .character-create-layout .brand-cn { display: none; }
  .char-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .char-card, .char-empty { padding: 8px 6px; }
  .char-avatar { height: 72px; margin-top: 4px; }
  .char-avatar img { height: 68px; }
  .char-map { display: none; }
  .char-empty { min-height: 140px; }
  .char-empty .plus { width: 42px; height: 42px; font-size: 24px; }
  .char-select-hint { display: none; }
  .char-select-foot { margin-top: 8px; padding-top: 8px; }
}

#character-select { padding-top: 34px; }
#character-select .brand-mark { margin-bottom: 12px; }
#character-select .brand-kicker { display: none; }
#character-select .brand-mark h1 { font-size: clamp(28px, 4vw, 38px); }
#character-select .brand-cn { margin-top: 4px; font-size: 16px; letter-spacing: .2em; }
.char-level { display: grid; gap: 0; line-height: 1.35; }
.char-level span { display: block; }
.char-card { min-height: 224px; }
@media (max-width: 640px) { #character-select { padding-top: 62px; } .char-card { min-height: 208px; } }