/* Compact catalog, readable metadata and category accents. */
.hero{min-height:245px;padding:26px 30px}.hero h1{font-size:46px;margin:12px 0;line-height:1.08}.hero p{font-size:13px;line-height:1.5}.hero-buttons{margin-top:16px}.hero-art{top:15px;height:210px}.hero-art .game-artwork{height:180px}.hero-orbit{width:190px;height:190px}.hero-note,.hero-edition{display:none}.joinbar{margin:14px 0 24px}.welcome-line{margin-bottom:12px}
.filters{display:flex;flex-wrap:wrap;gap:8px;border:0;margin-bottom:20px;overflow:visible}.filter{display:inline-flex;align-items:center;gap:7px;min-height:40px;border:1px solid #5b3b50;border-radius:24px;padding:9px 13px;font-size:13px;color:#d7c6d3;background:#1d1620}.filter.active{background:#472232;border-color:#e66a88;color:#fff}.filter:before,.tile-tag:before{content:'';width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--category-color,#d0bdca)}
[data-tone=reflex]{--category-color:#ffb06b}[data-tone=logic]{--category-color:#b7a3ff}[data-tone=social]{--category-color:#f790b3}[data-tone=aim]{--category-color:#85d8cf}[data-tone=fortune]{--category-color:#e7cb81}
.tile-tag{display:inline-flex;align-items:center;gap:6px;background:#171019d9;color:#eedee8;border-color:#ffffff24;font-size:9px;letter-spacing:.6px;padding:6px 8px}.game-tile{display:flex;flex-direction:column;text-align:left}.tile-art{width:100%;flex-shrink:0}.tile-info{width:100%;box-sizing:border-box;display:flex;flex-direction:column;flex:1;padding:16px}.tile-info h3{font-size:17px}.tile-info p{font-size:13px;line-height:1.55;color:#d4c4d1;min-height:0;margin-bottom:16px;flex:1}.tile-meta{font-size:12px;color:#e0cedc;gap:10px;flex-wrap:wrap;letter-spacing:0}.tile-meta b{color:#b595a9}.play-arrow{display:inline-flex;width:auto;height:auto;min-height:34px;padding:5px 11px;gap:6px;border-radius:9px;font-size:12px;font-weight:600;color:#ffe8ef;background:#4b2334;border-color:#a04d6b}.play-arrow svg{width:13px;height:13px}
@media(max-width:600px){header{padding-top:16px;padding-bottom:16px}main{padding-top:16px}.hero{min-height:0;padding:20px}.hero-copy{width:100%}.hero h1{font-size:34px;max-width:100%;margin:10px 0}.hero p{max-width:100%;font-size:12px}.hero-art{width:100px;height:110px;top:27px;right:0;opacity:.32;pointer-events:none}.hero-art .game-artwork{height:100px;top:0}.hero-orbit{display:none}.hero-buttons{margin-top:14px;position:relative;z-index:1}.hero-buttons button{font-size:12px;min-height:42px}.joinbar{margin:12px 0 20px;padding:13px}.sectionbar{margin-bottom:16px}.sectionbar h2{font-size:25px}.filter{font-size:12px;padding:8px 11px}.tile-info{padding:12px}.tile-info h3{font-size:15px;line-height:1.3}.tile-info p{font-size:12px;line-height:1.5;margin-bottom:12px}.tile-meta{font-size:11px;gap:8px}.tile-meta>span:first-child{display:block;width:100%}.play-arrow{min-height:32px;font-size:12px}.tile-tag{font-size:8px}.catalog{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A focused, one-field QR welcome. */
body.joining{padding-bottom:0}
body.joining>header,body.joining>footer,body.joining .bottomnav{display:none!important}
body.joining #app{min-height:100svh;padding:0 20px;display:grid;align-content:start}
.join-screen{width:100%;max-width:420px;margin:0 auto;padding:clamp(32px,9svh,76px) 0 28px}
.join-venue{display:flex;align-items:center;gap:10px;font:600 15px/1.4 system-ui,sans-serif;color:#ebd9db}
.join-dot{width:8px;height:8px;border-radius:50%;background:#d6778e;box-shadow:0 0 0 5px #71283c30}
.join-screen h1{font-size:clamp(38px,10vw,54px);line-height:1.08;margin:18px 0 32px;color:#fff2ef}
.join-form{font-family:system-ui,sans-serif}
.join-form label{display:block;font-size:16px;color:#f1e7e8;font-weight:600;margin:0 0 10px}
.join-form input{box-sizing:border-box;width:100%;min-height:58px;font:500 18px/1.4 system-ui,sans-serif;color:#fff4f1;background:#1e171c;border:1px solid #72505b;border-radius:14px;padding:16px;margin:0 0 18px}
.join-form input::placeholder{color:#c4aeb6}
.join-form input:focus-visible{outline:2px solid #e39aac;outline-offset:3px}
.join-form .error:empty{display:none}
.join-form .error{font-size:15px;line-height:1.5;margin:0 0 14px;color:#ffb9c1}
.join-form .primary{display:flex;align-items:center;justify-content:space-between;min-height:58px;border-radius:14px;font:650 17px/1.3 system-ui,sans-serif;margin:0;background:#922d49;color:#fff5f4}
.join-form .primary:disabled{opacity:.65}
.join-avatar-picker{margin-top:26px;border-top:1px solid #ffffff14;padding-top:18px}
.join-avatar-picker summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer;color:#ebdde0;font-size:14px;min-height:48px}
.join-avatar-picker summary::-webkit-details-marker{display:none}
.join-avatar-picker summary>span:last-child{margin-left:auto}
.join-avatar-picker small{display:block;color:#bca9b0;font-size:12px;margin-top:3px}
.player-avatar{display:block;width:44px;height:44px;flex-shrink:0}
.join-avatar-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:16px}
.join-avatar-option{padding:4px;background:transparent;border:2px solid transparent;border-radius:17px;cursor:pointer;min-width:0}
.join-avatar-option .player-avatar{width:100%;height:auto}
.join-avatar-option[aria-pressed=true]{border-color:#f4acbe;background:#562334}
.join-avatar-option:focus-visible,.join-avatar-picker summary:focus-visible{outline:2px solid #f4acbe;outline-offset:3px}
.join-switch{display:block;margin:22px auto 0;padding:10px;border:0;background:transparent;color:#d2b9c1;font:500 14px system-ui,sans-serif}
.roster .face:has(.player-avatar){background:transparent;padding:0}
@media(max-height:600px){.join-screen{padding-top:24px}.join-screen h1{margin:12px 0 22px}.join-avatar-picker{margin-top:18px}}