/* Home and game registration */
.welcome { margin:0 0 26px; }
.welcome h1 { margin:12px 0; font-size:36px; line-height:1.2; }
.welcome h1 span { color:var(--gold); }
.welcome p { font-size:12px; color:var(--muted); }
.game-card { position:relative; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; }
.game-card-content { position:relative; padding:20px; z-index:1; }
.game-card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:16px; }
.game-card-top .eyebrow { font-size:8px; letter-spacing:1.4px; }
.game-title-link { display:block; }
.game-title-link h3 { font-size:28px; margin-bottom:13px; overflow-wrap:anywhere; }
.game-date { font-size:16px; font-weight:500; letter-spacing:.2px; }
.game-date i { font-style:normal; color:var(--gold); padding:0 6px; }
.place { display:flex; align-items:flex-start; gap:7px; font-size:12px; color:var(--muted); margin:12px 0 22px; }
.place .icon { width:16px; height:16px; margin-top:1px; }
.capacity-label { display:flex; justify-content:space-between; gap:7px; align-items:center; font-size:10px; color:var(--muted); }
.capacity-label>span:first-child { display:flex; align-items:center; gap:4px; }
.capacity-label b { color:var(--text); }
.capacity-label .icon { width:15px; height:15px; margin-right:3px; }
progress { display:block; appearance:none; border:0; height:3px; width:100%; border-radius:4px; overflow:hidden; background:#343332; margin:11px 0 19px; color:var(--gold); }
progress::-webkit-progress-bar { background:#343332; }
progress::-webkit-progress-value { background:var(--gold); border-radius:4px; transition:width .3s; }
progress::-moz-progress-bar { background:var(--gold); }
.featured { background:#1b1918; border-color:#615039; }
.featured .game-card-content { padding-top:22px; }
.featured .game-title-link h3 { max-width:68%; font-size:31px; margin:25px 0 14px; }
.featured .place { margin-bottom:27px; max-width:72%; }
.featured .game-card-top { position:relative; z-index:2; }
.featured .game-card-top .badge { background:#19191be8; }
.featured .capacity-label,.featured progress,.featured .button { position:relative; z-index:2; }
.game-art { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.game-art img { position:absolute; width:63%; max-width:none; top:0; right:-11%; opacity:.65; }
.game-art span { position:absolute; inset:0; background:linear-gradient(90deg,#1b1918 0%,#1b1918ad 42%,transparent 74%),linear-gradient(0deg,#1b1918 2%,#1b1918ed 25%,transparent 80%); }
.participation .status { margin-bottom:10px; }
.status { display:flex; gap:7px; align-items:center; font-size:12px; }
.status .icon { width:16px; height:16px; }
.intro-hero { border:1px solid #615039; border-radius:var(--radius); min-height:310px; overflow:hidden; position:relative; background:#1c1917; }
.intro-hero>div { position:relative; z-index:1; padding:26px 22px; background:linear-gradient(90deg,#1c1917 0%,#1c1917a6 53%,transparent 100%); }
.intro-character { position:absolute; width:250px; right:-48px; top:-2px; opacity:.8; }
.intro-hero h2 { font-size:33px; margin:26px 0 14px; }
.intro-hero p { font-size:12px; color:#c2b8a6; line-height:1.8; }
.intro-hero .button { margin-top:24px; width:max-content; max-width:100%; font-size:12px; }
.poster-carousel { display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-right:-22px; padding:0 22px 5px 0; }
.poster-carousel::-webkit-scrollbar { display:none; }
.poster { position:relative; flex:0 0 143px; border:1px solid #3b3832; border-radius:12px; padding:18px 16px 16px; background:#1b1b1b; scroll-snap-align:start; display:flex; flex-direction:column; }
.poster::before { content:""; width:4px; height:4px; transform:rotate(45deg); position:absolute; right:15px; top:20px; background:var(--gold); }
.poster-day { font:37px/1 Georgia,serif; color:var(--gold); }
.poster-month { font-size:11px; text-transform:lowercase; margin-top:4px; }
.poster-time { margin:14px 0 9px; font-size:17px; }
.poster-place { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.poster-count { color:var(--gold); margin-top:15px; font-size:10px; border-top:1px solid var(--border); padding-top:10px; }
.quick-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.quick-card { display:flex; flex-direction:column; align-items:flex-start; gap:17px; background:var(--surface); border:1px solid var(--border); padding:18px 12px 11px; border-radius:12px; }
.quick-card>.icon:first-child { color:var(--gold); width:26px; height:26px; }
.quick-card>span { font-size:11px; }
.quick-card>.small { align-self:flex-end; color:var(--muted); margin-top:-4px; }
.community { display:flex; border-top:1px solid var(--border); margin-top:28px; padding-top:16px; gap:15px; }
.community button { flex:1; border:0; background:none; color:var(--muted); min-height:44px; font-size:11px; text-align:left; display:flex; align-items:center; justify-content:space-between; }
.community .icon { width:15px; }
.list-toolbar { display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; color:var(--muted); font-size:11px; }
.detail-banner { display:flex; justify-content:center; position:relative; overflow:hidden; height:220px; border:1px solid #494236; border-radius:15px; background:#191817; margin-bottom:18px; }
.detail-banner img { width:52%; height:380px; object-fit:cover; object-position:top; opacity:.65; }
.detail-banner>span { position:absolute; bottom:0; left:0; right:0; padding:80px 15px 18px; text-align:center; font:25px Georgia,serif; letter-spacing:3px; background:linear-gradient(transparent,#171719); }
.detail-banner i { color:var(--gold); }
.date-pair { display:grid; grid-template-columns:1.4fr 1fr; gap:10px; }
.date-pair small { display:block; color:var(--muted); margin-bottom:7px; }
.date-pair strong { font-size:15px; }
.timezone { font-size:10px; color:var(--muted); margin-top:12px; }
.divider { border-top:1px solid var(--border); margin:20px 0; }
.detail-info h2 { font-size:22px; margin-bottom:12px; }
.description { white-space:pre-wrap; color:var(--muted); margin:16px 0 24px; font-size:13px; }
/* Encyclopedia */
.search-field { display:flex; gap:10px; align-items:center; background:#151618; border:1px solid var(--border); border-radius:10px; padding-left:13px; }
.search-field .icon { width:18px; }
.search-field input { border:0; background:none; }
.search-field input:focus { outline-offset:-2px; }
.category-label { display:flex; align-items:center; gap:12px; margin:13px 0 20px; font-size:11px; }
.category-label select { flex:1; min-height:44px; font-size:12px; padding:9px; }
.encyclopedia-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.entry-card { display:block; border:1px solid var(--border); border-radius:12px; background:var(--surface); overflow:hidden; }
.entry-art { position:relative; aspect-ratio:4/5; overflow:hidden; }
.entry-art img { width:100%; height:100%; object-fit:cover; }
.demo-tag { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:8px; letter-spacing:1.5px; color:var(--gold); background:#111d; border:1px solid #61553e; border-radius:3px; padding:4px 8px; }
.entry-copy { padding:14px 12px; }
.entry-copy>small { color:var(--gold); font-size:9px; }
.entry-copy h2 { font-size:21px; margin:7px 0 9px; overflow-wrap:anywhere; }
.entry-copy p { font-size:11px; color:var(--muted); line-height:1.6; }
.entry-detail-art { max-width:250px; margin:20px auto 27px; }
.entry-detail-art img { width:100%; border-radius:12px; }
.rule-fields { margin:0; }
.rule-fields>div { padding:13px 0; border-top:1px solid var(--border); }
.rule-fields dt { font-size:11px; color:var(--gold); }
.rule-fields dd { margin:6px 0 0; font-size:13px; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Profile and cosmetic characters */
.character-art { position:relative; overflow:hidden; isolation:isolate; }
.character-art img { position:relative; width:100%; height:100%; object-fit:contain; z-index:1; }
.character-halo { position:absolute; width:80%; aspect-ratio:1; top:10%; left:10%; border:1px solid #81765928; border-radius:50%; background:radial-gradient(ellipse,#a5905e0d,transparent 65%); }
.character-halo::before { content:""; position:absolute; inset:8%; border:1px solid #81765919; border-radius:50%; }
.character-art[data-style="dark"] .character-halo { border-color:#9b4f4f38; background:radial-gradient(ellipse,#9e374817,transparent 65%); }
.profile-showcase { position:relative; text-align:center; }
.profile-art { height:355px; margin:-15px -10px 0; }
.profile-art img { filter:drop-shadow(0 10px 20px #0007); }
.living img { animation:breathe 6s ease-in-out infinite; }
.profile-identity { position:relative; padding:22px 0 5px; background:linear-gradient(transparent,var(--bg) 20%); margin-top:-13px; z-index:2; }
.profile-identity h2 { margin:10px 0 6px; font-size:29px; overflow-wrap:anywhere; }
.profile-identity p { color:var(--muted); font-size:12px; }
.character-change { margin:21px 0; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #494237; border-radius:12px; padding:19px 4px; background:#1d1d1d; margin:20px 0 12px; }
.stats>div { min-width:0; text-align:center; border-right:1px solid #3f3d37; padding:0 5px; }
.stats>div:last-child { border:0; }
.stats strong { display:block; color:var(--gold); font:28px/1.2 Georgia,serif; }
.stats span { display:block; font-size:10px; color:var(--muted); margin-top:8px; }
.history-list { padding:0 17px; }
.history-list>a { display:flex; gap:12px; padding:18px 0; align-items:center; border-bottom:1px solid var(--border); }
.history-list>a:last-child { border:0; }
.history-icon { color:var(--gold); }
.history-list>a>div { flex:1; min-width:0; }
.history-list strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.history-list small { display:block; font-size:10px; color:var(--muted); margin-top:5px; overflow-wrap:anywhere; }
.history-list>a>.icon { width:15px; color:var(--muted); }
.profile-note { margin-top:28px; padding-top:20px; border-top:1px solid var(--border); color:var(--muted); font-size:11px; text-align:center; }
.filter-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:14px; }
.filter-chips button { border:1px solid var(--border); border-radius:7px; padding:10px 13px; background:var(--surface); color:var(--muted); white-space:nowrap; font-size:11px; min-height:44px; }
.filter-chips button.selected { border-color:#796440; background:#393125; color:var(--gold); }
.character-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.character-card { display:block; border:1px solid var(--border); background:#1b1b1d; border-radius:13px; overflow:hidden; }
.character-card.selected { border-color:var(--gold); }
.character-card .character-art { height:235px; padding-top:10px; }
.character-card-copy { display:flex; flex-direction:column; padding:15px; gap:6px; border-top:1px solid var(--border); }
.character-card-copy small { color:var(--gold); text-transform:uppercase; letter-spacing:1px; font-size:8px; }
.character-card-copy strong { font:22px Georgia,serif; }
.character-card-copy>span { color:var(--muted); font-size:10px; margin-top:4px; }
.detail-character { height:400px; }
.character-description { text-align:center; padding:20px 12px; }
.character-description>p { margin-top:15px; color:var(--muted); }
/* Rating */
.player-preview,.rating-list { padding:0 16px; }
.player-row { display:flex; align-items:center; gap:10px; padding:15px 0; border-bottom:1px solid var(--border); }
.player-row:last-child { border-bottom:0; }
.player-rank { color:var(--gold); font:18px Georgia,serif; width:17px; text-align:center; flex:none; }
.player-avatar { flex:none; width:39px; height:44px; border:1px solid #514634; background:#282724; border-radius:7px; overflow:hidden; }
.player-avatar img { width:100%; height:100%; object-fit:cover; object-position:top; transform:scale(1.35); transform-origin:top; }
.player-identity { flex:1; min-width:0; }
.player-identity strong { display:block; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-identity strong small { color:var(--gold); font-size:9px; }
.player-identity>span { display:block; color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.player-score { color:var(--gold); font-size:14px; white-space:nowrap; text-align:right; }
.player-score small { display:block; color:var(--muted); font-size:8px; font-weight:400; margin-top:3px; }
.player-row.is-me .player-rank { background:#413724; border-radius:4px; }
.podium { display:flex; align-items:flex-end; justify-content:center; gap:7px; margin:26px -3px 32px; padding:15px 0 0; }
.podium-player { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.podium-crown { color:#9e9b91; height:25px; }
.podium-0 .podium-crown { color:var(--gold); }
.podium-2 .podium-crown { color:#b69079; }
.podium-art { width:100%; max-width:110px; height:135px; overflow:hidden; }
.podium-art img { height:100%; width:100%; object-fit:cover; object-position:top; }
.podium-0 .podium-art { height:158px; }
.podium-name { font-size:11px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:10px 4px 0; }
.podium-score { color:var(--gold); font-size:15px; margin:5px 0 15px; }
.podium-base { width:100%; background:#222220; border:1px solid #4a4539; border-bottom:0; height:70px; border-radius:8px 8px 0 0; padding:12px 0; }
.podium-base b { font:29px Georgia,serif; color:#b7b6b0; }
.podium-base small { display:block; font-size:8px; color:var(--muted); letter-spacing:1px; margin-top:3px; }
.podium-0 .podium-base { height:94px; background:#29251d; border-color:#75613e; }
.podium-0 .podium-base b { color:var(--gold); }
.podium-2 .podium-base { height:57px; }
/* Management */
.admin-game-head { display:flex; justify-content:space-between; gap:15px; }
.admin-game-head>div { min-width:0; }
.admin-game h2 { margin:14px 0 10px; overflow-wrap:anywhere; }
.admin-game p { font-size:12px; margin-top:5px; }
.admin-count { color:var(--gold); font:27px Georgia,serif; padding-top:4px; flex:none; }
.admin-count small { font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--muted); display:block; text-align:right; margin-top:5px; }
.admin-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:20px; }
.admin-actions .button { font-size:11px; padding:11px 7px; }
.game-form>label,.form-grid label { margin:7px 0 8px; }
.game-form>input,.game-form>textarea { margin-bottom:15px; }
.game-form .button.primary { margin-top:9px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-grid>div { min-width:0; }
.form-grid input { max-width:100%; min-width:0; padding:12px 7px; }
.participants { padding:4px 15px; }
.participant { display:flex; align-items:center; gap:10px; padding:17px 0; border-bottom:1px solid var(--border); }
.participant:last-child { border:0; }
.participant>div { flex:1; min-width:0; }
.participant strong { display:block; font-size:12px; overflow-wrap:anywhere; }
.participant span,.participant small { display:block; font-size:10px; color:var(--muted); overflow-wrap:anywhere; margin-top:4px; }
.participant .participant-number { font:16px Georgia,serif; color:var(--gold); margin:0; }
.participant .icon-button { width:40px; height:44px; }
@media(min-width:500px) {
 .featured .game-title-link h3 { font-size:36px; }
 .game-art img { top:-35px; width:50%; right:-4%; }
 .intro-character { width:300px; right:5px; top:-16px; }
 .intro-hero h2 { font-size:40px; }
 .character-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .character-card .character-art { height:240px; }
 .encyclopedia-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:360px) {
 .poster-carousel { margin-right:-16px; padding-right:16px; }
 .game-card-content { padding:17px; }
 .game-card-top .badge { font-size:8px; padding:3px 5px; }
 .game-card-top .eyebrow { font-size:7px; letter-spacing:1px; }
 .featured .game-title-link h3 { font-size:27px; }
 .quick-card { padding:16px 10px 10px; } .quick-card>span { font-size:10px; }
 .character-card .character-art { height:210px; }
 .player-preview,.rating-list { padding:0 11px; }
 .player-row { gap:7px; } .player-identity strong { font-size:11px; }
 .form-grid { gap:8px; } .form-grid input { font-size:14px; }
}