/* V3 — approved showcase is the layout reference, not just a palette. */
:root { --ink:#fffdf9; --ink-2:#fffdfa; --card:#fffefb; --card-2:#faf4e9; --brand:#a30913; --red:#a30913; --red-deep:#80090f; --heading:#48130f; --paper:#2e211c; --mute:#8a7b6e; --gold:#b18a55; --metal:#d5af74; --line:#ead8c0; --line-strong:#d3af78; --shadow:0 3px 5px #70441e0e; }
body { background:var(--ink); }
.page { padding:calc(16px + var(--safe-t)) 10px calc(90px + var(--safe-b)); }
.page-heading { margin:0 -10px 0; padding:0 18px 16px; border:0; }
.page-heading h1 { color:var(--heading); font-size:23px; font-weight:750; }
.section-title { margin:20px 12px 12px; }
.section-title h2 { color:#2d1711; font-size:21px; }
.section-title small,.section-title .link-btn { font-size:14px; color:var(--mute); }
.panel { border-radius:10px; border-color:#e6c99e; padding:16px; box-shadow:var(--shadow); }
.btn { border-radius:999px; }
.btn-gold,.btn-red,.room-enter { background:linear-gradient(140deg,#bd111a,#8f0009); border:1px solid #b7975e; color:#fffaf2; box-shadow:inset 0 0 0 2px #c62828,inset 0 0 0 3px #f0c57590,0 3px 5px #51281228; }
.btn-ghost { color:var(--brand); background:#fffefa; border-color:#c9aa7e; }
.btn:disabled { color:#9a8a76; background:linear-gradient(#fffcf7,#f8f0e5); border-color:#e8d8c0; box-shadow:inset 0 0 0 2px #fffaf3,0 2px 3px #75421512; }
.brand-bar { padding:0 10px; margin-bottom:12px; }
.brand-bar h1 { font-size:29px; gap:3px; letter-spacing:.025em; }
.brand-bar h1>span:not(.brand-emblem) { font-size:29px; font-weight:700; letter-spacing:.04em; }
.brand-emblem { display:inline-flex; margin-right:5px; color:#c49a56; }
.brand-emblem .ui-icon { width:31px; height:34px; }
.brand-bar .bell { color:#241813; }
.lobby-top { margin:0 10px 12px; gap:12px; }
.lobby-top .avatar { width:55px; height:55px; }
.mascot-avatar { background:#1c1c1c; border:1px solid #242424; }
.lobby-top .who { justify-content:flex-start; gap:14px; }
.lobby-top .who b { font-size:20px; }
.lobby-top .invite-action { border-left:1px solid var(--line); border-radius:0; padding:0 0 0 14px; color:#967144; font-size:15px; }
.hero { border:1px solid #c69a51; border-radius:16px; box-shadow:0 2px 0 #9e7838,0 4px 8px #76502913; }
.hero::before { inset:3px; border-color:#f6d797; border-radius:13px; }
.hero.has-art::after { background:linear-gradient(90deg,#fffaf050 0%,#fffaf020 38%,transparent 63%); }
.hero .title { color:#4a130e; font-weight:800; text-wrap:initial; letter-spacing:.01em; }
.lobby-hero { height:264px; min-height:264px; padding:22px 22px 14px; background-position:60% center; background-size:auto 100%; }
.hero .tag { padding:3px 10px; border-radius:6px; font-size:15px; line-height:1.4; box-shadow:inset 0 0 0 2px #f2bc7845; background:linear-gradient(#bc121c,#960812); }
.lobby-hero .title { margin-top:14px; font-size:40px; line-height:1.2; max-width:52%; }
.lobby-hero .hero-sub { margin:8px 0 0; max-width:48%; font-size:16px; font-weight:650; color:var(--heading); letter-spacing:.13em; }
.signature { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.signature::before,.signature::after { content:''; display:block; width:16px; height:1px; background:#c69a55; flex:none; }
.lobby-hero .btn-row { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-top:15px; width:48%; }
.lobby-hero .btn-row .btn { flex:none; width:100%; min-height:43px; font-size:20px; letter-spacing:.06em; padding:8px 10px; }
.hero-rules { min-height:32px; padding:3px 10px; font-size:15px; color:var(--heading); letter-spacing:.05em; }
.balance-card { margin-top:14px; border-radius:10px; padding:12px 20px 0; border-color:#e6c99e; }
.balance-card .label { font-size:16px; color:#251c18; }
.balance-card .amount { margin:0 0 12px; }
.balance-card .amount .num { font-size:46px; font-weight:700; color:#a20008; }
.balance-card .amount .cur { font-size:16px; font-weight:400; }
.wallet-actions { padding:10px 0; }
.wallet-actions button { padding:4px 0; min-height:61px; gap:1px; font-size:17px; }
.wallet-actions button .ico { color:inherit; }
.wallet-actions button .ui-icon { width:29px; height:29px; stroke-width:1.8; }
.wallet-actions small { font-size:13px; }
.nav { border-top:1px solid #cda66a; padding:5px 12px calc(5px + var(--safe-b)); background:#fffdfaee; box-shadow:none; }
.nav-btn { min-height:61px; border-radius:0; font-size:14px; color:#8e7963; gap:1px; }
.nav-btn .ico { width:36px; height:31px; }
.nav-btn .ui-icon { width:27px; height:27px; stroke-width:1.6; }
.nav-btn.is-active .ico { background:none; color:#ad1114; }
.nav-btn.is-active .ui-icon { fill:#bb1a1640; stroke:#ac100d; }
.nav-btn.is-active::after { display:block; position:static; width:14px; height:3px; margin-top:3px; background:linear-gradient(90deg,#f0d494,#c49651); }
.hero.event-hero,.hero.rooms-hero { margin:0 -10px; width:calc(100% + 20px); border:0; border-radius:0; box-shadow:none; min-height:208px; background-size:auto 100%; background-position:center; }
.hero.event-hero::before,.hero.rooms-hero::before { display:none; }
.hero.event-hero::after,.hero.rooms-hero::after { background:linear-gradient(0deg,var(--ink),transparent 13%); }
.hero.event-hero .title { font-size:32px; white-space:nowrap; max-width:none; margin-top:30px; }
.hero.event-hero .hero-sub { font-size:14px; max-width:52%; margin:12px 0 0; color:var(--heading); }
.checkin-panel { position:relative; margin-top:-9px; padding:18px 18px 16px; }
.checkin-panel h2,.event-stats-panel h2 { font-size:18px; margin:0 0 8px; }
.checkin-days { display:flex; align-items:baseline; gap:12px; color:#6e5341; font-size:18px; }
.checkin-days b { font-size:31px; line-height:1.2; color:var(--brand); }
.checkin { margin:8px 0 12px; gap:12px; }
.checkin .track { height:12px; border:1px solid #e5d2b8; background:#f8f0e3; border-radius:20px; }
.checkin-gift { width:34px; height:34px; border:0; background:none; color:var(--brand); }
.checkin-gift .ui-icon { width:33px; height:33px; fill:#bb111b; stroke:#dcb877; }
.checkin-caption { border-top:1px solid var(--line); padding-top:12px; margin:0 0 12px; align-items:baseline; color:var(--heading); font-size:15px; }
.checkin-caption b { color:var(--brand); font-size:22px; }
.checkin-caption small { font-size:12px; color:var(--mute); }
.checkin-panel>.btn { width:90%; margin:0 5%; min-height:40px; font-size:17px; }
.event-stats-panel { padding:16px 14px; }
.event-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.event-stat { display:grid; grid-template-columns:23px minmax(0,1fr); align-items:center; gap:6px; padding:13px 6px; border-bottom:1px solid var(--line); font-size:13px; color:#78614f; }
.event-stat:nth-child(n+4) { border-bottom:0; }
.event-stat:not(:nth-child(3n)) { border-right:1px solid var(--line); }
.event-stat .ui-icon { width:22px; height:22px; }
.event-stat>div { grid-column:1/-1; text-align:center; }
.event-stat b { font-size:20px; color:var(--brand); font-weight:600; }
.event-ranking { padding:12px 16px; min-height:46px; }
.event-details { margin:12px 0; }
.event-details>summary { color:var(--gold); padding:10px 12px; font-size:14px; cursor:pointer; }
.event-details>.panel:first-of-type { margin-top:12px; }
.hero.rooms-hero { min-height:220px; padding:30px 22px; }
.rooms-hero .title { display:flex; align-items:center; gap:7px; margin-top:38px; max-width:none!important; font-size:30px!important; white-space:nowrap; }
.rooms-hero .title .ui-icon { width:32px; height:32px; color:#c49a56; }
.rooms-hero .hero-sub { max-width:60%!important; color:var(--heading); font-size:14px; }
.room-grid { gap:16px; }
.room-card { min-height:126px; padding:16px 14px; border-color:#d9af77; border-radius:15px; gap:12px; display:grid; grid-template-columns:83px minmax(0,1fr) auto; }
.room-card .room-medallion { width:83px; height:83px; border-radius:50%; background:linear-gradient(145deg,#fffdf7,#f4e9d5); border:1px solid #c99c58; box-shadow:inset 0 0 0 3px #fffaf0,inset 0 0 0 4px #dabb89,0 3px 5px #9d723423; display:grid; place-items:center; position:relative; }
.room-medallion>.ui-icon { width:49px; height:49px; fill:#d1a45b; stroke:#b5853f; stroke-width:1; }
.room-medallion.fast>.ui-icon { fill:#a3151c; stroke:#781013; }
.fast-bolt { position:absolute; left:34px; top:25px; color:#f9dd9b; font-size:29px; font-weight:800; text-shadow:0 1px #691c11; }
.room-card .name { font-size:20px; font-weight:750; line-height:1.4; }
.room-card .count { font-size:15px; color:#8e7d70; gap:2px; margin:4px 0 6px; }
.room-card .count::before { content:''; width:7px; height:7px; border-radius:50%; background:#50a766; margin-right:4px; }
.room-card .count span { font-size:13px; }
.room-card .room-info>.hint { display:inline-flex; padding:2px 10px; border:1px solid #e7cda7; border-radius:999px; color:#a57c48; font-size:14px; }
.room-enter { border-radius:999px; padding:8px 11px; font-size:16px; min-height:36px; border-left:1px solid #b7975e; white-space:nowrap; }
.hero.chat-hero { min-height:220px; padding:32px 22px; background-size:auto 100%; background-position:61% center; }
.hero.chat-hero .title { font-size:35px; max-width:none; margin-top:8px; }
.hero.chat-hero .hero-sub { max-width:58%; font-size:15px; color:#785028; }
.chat-hero .support-cta { width:43%; font-size:20px; min-height:43px; margin-top:24px; }
.faq-list .panel { margin-bottom:0; padding:0 17px; }
.faq-list summary { font-size:17px; padding:14px 0; min-height:46px; font-weight:500; }
.chat-enter { border:1px solid #b84f4e; border-radius:999px; padding:6px 10px; font-size:14px; color:var(--brand); white-space:nowrap; }
.safety-note { justify-content:center; font-size:13px; padding:0 14px; }
.profile-card { border-radius:16px; border-color:#d7b482; margin-top:0; }
.profile-cover { height:184px; background-position:64% 28%; background-size:auto 140%; position:relative; }
.profile-identity { position:absolute; inset:0 auto 0 15px; width:54%; margin:0; padding:0; display:grid; align-content:center; grid-template-columns:68px minmax(0,1fr); gap:5px 10px; }
.profile-identity .avatar { width:68px; height:68px; border:1px solid #cfa361; outline:3px solid #fff5d9; grid-column:1; grid-row:1 / 3; }
.profile-identity .who { padding-top:0; }
.profile-identity .who b { font-size:21px; line-height:1.5; }
.profile-identity .who small { font-size:12px; line-height:1.4; display:block; }
.copy-uid { min-width:22px; min-height:24px; vertical-align:middle; }
.copy-uid .ui-icon { width:15px; height:15px; }
.me-top.profile-identity .since { grid-column:2; margin:0; text-align:left; font-size:12px; color:#967248; }
.profile-content { position:relative; margin-top:-5px; border-radius:10px 10px 0 0; padding:18px 12px 0; background:var(--card); border-top:1px solid var(--line); }
.profile-stats { display:grid; grid-template-columns:1.45fr repeat(3,1fr); border-radius:9px; padding:17px 0; }
.profile-stats .stat { display:flex; flex-direction:column; gap:5px; padding:0 7px; min-width:0; }
.profile-stats .stat:not(.profile-balance) { flex-direction:column-reverse; }
.profile-stats .stat b { margin:0; font-size:22px; font-weight:650; color:var(--heading); }
.profile-stats .stat small { font-size:13px; }
.profile-stats .profile-balance { border:0; margin:0; text-align:left; align-items:flex-start; }
.profile-stats .profile-balance b { font-size:28px; color:var(--brand); }
.profile-content .section-title { margin:19px 0 12px; }
.me-grid { border-radius:9px; padding:8px 0; gap:4px 0; box-shadow:none; }
.me-grid button { padding:14px 3px; font-size:15px; gap:10px; }
.me-grid .ico { width:40px; height:38px; background:none; }
.me-grid .ui-icon { width:33px; height:33px; color:#bb904f; stroke-width:1.7; }
.foot { font-size:13px; letter-spacing:.08em; margin:22px 0; }
@media(min-width:450px) { .lobby-hero{height:310px;min-height:310px;padding:26px;} .lobby-hero .title{font-size:48px;} .lobby-hero .btn-row{margin-top:18px;} .hero.event-hero,.hero.rooms-hero{min-height:250px;} .hero.chat-hero{min-height:260px;} .profile-cover{height:225px;} .profile-identity{width:54%;grid-template-columns:78px minmax(0,1fr);} .profile-identity .avatar{width:78px;height:78px;} .profile-identity .who b{font-size:24px;} }
@media(max-width:359px) { .page{padding-left:8px;padding-right:8px;} .page-heading{margin-left:-8px;margin-right:-8px;} .lobby-top .who{flex-direction:row;align-items:center;gap:8px;} .lobby-top .who b{font-size:17px;} .lobby-top .invite-action{font-size:13px;padding-left:8px;} .lobby-hero{height:249px;min-height:249px;padding:19px 17px;} .lobby-hero .title{font-size:35px;} .lobby-hero .hero-sub{font-size:14px;} .lobby-hero .btn-row .btn{font-size:17px;} .balance-card .amount .num{font-size:40px;} .event-stat{grid-template-columns:19px minmax(0,1fr);padding:11px 4px;font-size:12px;} .event-stat .ui-icon{width:19px;height:19px;} .hero.event-hero .title{font-size:27px;} .room-card{grid-template-columns:65px minmax(0,1fr) auto;gap:8px;padding:13px 10px;} .room-card .room-medallion{width:65px;height:65px;} .room-medallion>.ui-icon{width:41px;height:41px;} .fast-bolt{left:26px;top:15px;} .room-card .name{font-size:17px;} .room-enter{font-size:14px;padding:7px 8px;} .profile-identity{width:54%;left:12px;grid-template-columns:50px minmax(0,1fr);gap:5px 7px;} .profile-identity .avatar{width:50px;height:50px;} .profile-identity .who b{font-size:18px;} .profile-stats .profile-balance b{font-size:23px;} .profile-stats .stat small{font-size:12px;} .chat-enter{font-size:12px;padding:5px 7px;} }