* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.entry-page { min-height: 100dvh; color: #3b261e; background: #f8f2e6; }
.entry-page::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .36; background-image: radial-gradient(#9d5b3718 .7px, transparent .7px); background-size: 5px 5px; }
.entry-page button, .entry-page input { font: inherit; }
.entry-page button { cursor: pointer; }
.entry-page a { color: inherit; text-decoration: none; }
.lobby-shell { position: relative; width: min(1060px, calc(100% - 40px)); margin: auto; padding: 28px 0 40px; }
.lobby-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.entry-brand { display: inline-flex; align-items: center; gap: 11px; color: #8a230e; font-size: 18px; font-weight: 750; letter-spacing: 1px; }
.entry-brand small { display: block; margin-top: 1px; color: #a37554; font-size: 10px; font-weight: 400; letter-spacing: 3px; }
.entry-paw { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px 13px 13px 5px; background: #dca93f; color: #fff7d7; font-size: 24px; transform: rotate(-8deg); }
.lobby-user { display: flex; align-items: center; gap: 12px; color: #8d725d; font-size: 12px; }
.lobby-user button { padding: 7px 13px; border: 1px solid #d9c2a5; border-radius: 8px; color: #865c42; background: #fffaf0; font-size: 11px; }
.lobby-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; margin: 56px 0 38px; }
.entry-kicker { margin: 0 0 14px; color: #bd7540; font-size: 12px; letter-spacing: 4px; }
.lobby-hero h1 { margin: 0; color: #4a261b; font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(35px, 6vw, 62px); font-weight: 600; line-height: 1.18; letter-spacing: -2px; }
.lobby-hero h1 em { color: #a52d13; font-style: normal; }
.lobby-hero > div > p:not(.entry-kicker):not(.lobby-wallet) { margin-top: 18px; color: #977762; font-size: 13px; line-height: 1.9; }
.lobby-hero > div > p.entry-kicker { color: #bd7540; }
.lobby-wallet { display: inline-flex; align-items: center; gap: 16px; margin: 18px 0 0; padding: 11px 17px; border: 1px solid #e5d4b9; border-radius: 9px; color: #a2805b; background: #fff8ec; font-size: 11px; }
.lobby-wallet strong { color: #8f3d20; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lobby-runners { position: relative; display: flex; align-items: flex-end; justify-content: center; align-self: stretch; min-height: 290px; padding: 30px 0; border-bottom: 2px solid #cfb27c; }
.lobby-runners::before { content: ''; position: absolute; width: 260px; height: 260px; top: 0; left: 50%; transform: translateX(-50%); border-radius: 50%; background: #eed29d65; }
.lobby-runners img { position: relative; width: 44%; max-height: 220px; object-fit: contain; filter: drop-shadow(0 12px 3px #813b1314); }
.lobby-runners img:last-of-type { margin-left: -22px; transform: translateY(14px); }
.runner-number { position: absolute; right: 0; top: 8px; color: #b89968; font-size: 10px; letter-spacing: 2px; }
.runner-caption { position: absolute; right: 0; bottom: -24px; color: #ae8c5d; font-size: 10px; letter-spacing: 2px; }
.room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.room-card { position: relative; min-height: 286px; overflow: hidden; padding: 28px 30px 23px; border-radius: 16px; color: #fff8df; box-shadow: 0 13px 28px #63220b16; transition: transform .16s, box-shadow .16s; }
.entry-page .room-card { color: #fff8df; }
.room-card::after { content: ''; position: absolute; inset: auto 0 66px; height: 1px; background: #fff4d425; }
.room-card > :not(.room-dog) { position: relative; z-index: 1; }
.room-card > .room-card-footer { position: absolute; }
.room-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px #63220b26; }
.low-room { background: linear-gradient(135deg, #2a7761, #1f5749 66%, #174236); }
.high-room { background: linear-gradient(135deg, #ae3b1c, #7d2113 68%, #541a12); }
.room-chip { display: inline-block; padding: 4px 9px; border: 1px solid #fff5d766; border-radius: 5px; color: #fbe5ad; font-size: 10px; letter-spacing: 1px; }
.room-card h2 { margin: 17px 0 5px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 31px; font-weight: 600; letter-spacing: 1px; }
.room-card p { margin: 0; color: #f8dfb7b8; font-size: 12px; }
.room-stakes { display: flex; gap: 8px; margin-top: 29px; }
.room-stakes span { padding: 6px 9px; border: 1px solid #fff4d930; border-radius: 6px; background: #ffffff12; color: #fff6d6; font-size: 11px; }
.room-card-footer { position: absolute; right: 27px; bottom: 23px; left: 30px; display: flex; align-items: center; justify-content: space-between; color: #f7dfbb9c; font-size: 10px; }
.room-card-footer strong { color: #ffe9ac; font-size: 12px; font-weight: 500; }
.room-card-footer strong b { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 5px; border: 1px solid #fff0be66; border-radius: 50%; font-size: 16px; font-weight: 400; }
.room-dog { position: absolute; width: 38%; height: 170px; right: -6px; top: 24px; opacity: .26; object-fit: contain; filter: sepia(.3); transform: rotate(-7deg); }
.room-card-footer > span > b { color: #ffe4a3; font-weight: 500; }
.lobby-error { color: #b44230; text-align: center; font-size: 12px; }
.lobby-note { margin: 20px 0 0; color: #ad927b; text-align: center; font-size: 11px; }
.auth-page { display: grid; place-items: center; padding: 28px 20px; background: #f8f2e6; }
.auth-shell { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(320px, 1fr); width: min(920px, 100%); overflow: hidden; border: 1px solid #eadbc6; border-radius: 24px; background: #fffaf3; box-shadow: 0 20px 70px #6e351218; }
.auth-art { position: relative; min-height: 600px; overflow: hidden; padding: 40px; color: #fff6db; background: #8c210d; }
.auth-art .entry-brand { color: #fff0c1; }
.auth-art .entry-brand small { color: #e6b886; }
.auth-art::before { content: ''; position: absolute; width: 290px; height: 290px; right: -100px; bottom: -100px; border: 46px solid #eec45d29; border-radius: 50%; box-shadow: 0 0 0 38px #eec45d14, 0 0 0 76px #eec45d0b; }
.auth-art h1 { position: relative; margin: 44px 0 9px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 38px; font-weight: 600; letter-spacing: 2px; }
.auth-art p { position: relative; color: #f6d8aa; font-size: 12px; letter-spacing: 3px; }
.auth-art .entry-paw { background: #d9a73c; }
.entry-paw svg { width: 27px; height: 27px; fill: #81431e; }
.auth-dogs { position: absolute; display: flex; align-items: flex-end; left: 22px; right: -26px; bottom: 85px; height: 210px; }
.auth-dogs img { position: relative; width: 59%; max-height: 215px; object-fit: contain; filter: drop-shadow(0 12px 3px #31090035); }
.auth-dogs img:last-child { width: 57%; margin-left: -55px; margin-bottom: -15px; }
.auth-art-note { position: absolute; right: 42px; bottom: 36px; left: 42px; color: #efcda2a8; font-size: 11px; line-height: 1.8; }
.auth-form-panel { align-self: center; padding: 54px clamp(30px, 6vw, 70px); }
.auth-form-panel h2 { margin: 0 0 8px; color: #4b2b20; font-family: "Noto Serif SC", "Songti SC", serif; font-size: 26px; font-weight: 600; }
.auth-form-panel > p { margin: 0 0 30px; color: #aa8c73; font-size: 12px; }
.auth-form-panel label { display: block; margin-top: 17px; color: #806c5c; font-size: 12px; }
.auth-form-panel input { display: block; width: 100%; margin-top: 8px; padding: 13px; border: 1px solid #e3d4c2; border-radius: 9px; outline: none; color: #4a2e22; background: #fffdf9; }
.auth-form-panel input:focus { border-color: #c58050; box-shadow: 0 0 0 3px #c5805017; }
.auth-actions { display: grid; margin-top: 24px; }
.auth-actions button { padding: 13px 8px; border: 1px solid #d1935d; border-radius: 9px; color: #fff8e1; background: #a52e14; font-weight: 600; }
.auth-switch { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 0; color: #ac907a; font-size: 12px; }
.auth-switch button { padding: 3px; border: 0; border-bottom: 1px solid #c99c77; color: #9f3e21; background: transparent; font-size: 12px; }
.entry-page button:disabled { cursor: wait; opacity: .55; }
.entry-page a:focus-visible, .entry-page button:focus-visible { outline: 3px solid #d2a955; outline-offset: 4px; }
.lobby-user > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-error { min-height: 20px; margin: 12px 0 0; color: #b34835; font-size: 12px; }
.auth-home { display: block; margin-top: 24px; color: #ae8d72; text-align: center; font-size: 11px; }
@media (max-width: 680px) {
    .lobby-shell { width: calc(100% - 32px); padding-top: 20px; }
    .lobby-hero { position: relative; grid-template-columns: 1fr; margin: 36px 0 27px; gap: 0; }
    .lobby-hero h1 br { display: none; }
    .lobby-hero h1 { font-size: 31px; letter-spacing: -1px; }
    .lobby-runners { position: absolute; min-height: 0; width: 132px; height: 90px; right: -6px; bottom: 3px; padding: 0; border: 0; opacity: .8; }
    .lobby-runners::before { width: 85px; height: 85px; top: -4px; }
    .lobby-runners img { max-height: 92px; width: 66%; }
    .lobby-runners img:last-of-type { margin-left: -36px; transform: translateY(6px); }
    .runner-number, .runner-caption { display: none; }
    .room-grid { grid-template-columns: 1fr; }
    .room-card { min-height: 242px; padding: 23px; }
    .room-card h2 { margin-top: 14px; font-size: 28px; }
    .room-stakes { margin-top: 22px; }
    .room-card-footer { right: 23px; bottom: 20px; left: 23px; }
    .auth-page { padding: 0; }
    .auth-shell { display: block; min-height: 100dvh; border: 0; border-radius: 0; }
    .auth-art { min-height: 265px; padding: 28px 27px; }
    .auth-art h1 { margin: 28px 0 7px; font-size: 32px; }
    .auth-art-note { right: 27px; bottom: 22px; left: 27px; }
    .auth-dogs { height: 125px; width: 190px; left: auto; right: -10px; bottom: 25px; opacity: .58; }
    .auth-dogs img { max-height: 135px; }
    .auth-art > p { width: 70%; line-height: 1.8; font-size: 11px; letter-spacing: 0; }
    .auth-form-panel { padding: 32px 27px; }
}
@media (prefers-reduced-motion: reduce) { .room-card { transition: none; } }