/* Clean layer: fewer outlines, calmer surfaces. Loaded last, so it only overrides. */
:root { --surface: #201a23; --surface-2: #27202b; --surface-hover: #2c2530; }

/* Navigation and top bar: no boxes, the active item is a soft fill. */
.side { border-right: 0; }
.nav { gap: 2px; }
.nav-item { background: transparent; border-color: transparent; box-shadow: none; }
.nav-item:hover { background: var(--surface); }
.nav-item.active { background: #2f2833; border-color: transparent; box-shadow: inset 3px 0 #ff9e57; }
.small-profile { border-color: transparent; background: var(--surface); }
.search, .icon-btn, .top-language, .top-gems, .top-create, .mobile-search { border-color: transparent; }
.search, .top-language, .icon-btn { background: var(--surface); }
.top-create { background: var(--surface-2); }
.top-create:hover { border-color: transparent; background: #342d38; }

/* Cards: surfaces without outlines; depth comes from fill, not lines. */
.right-card, .right-card.highlight, .pin-card, .person-card, .profile-card, .message-panel,
.studio-preview, .studio-controls, .empty, .tab, .kind-tabs, .choice, .vibe-panel { border-color: transparent; }
.right-card { background: var(--surface); }
.right-card.highlight { background: linear-gradient(160deg, #332c37, #28212b); }
.pin-card { border-top: 0; background: var(--surface); box-shadow: none; }
.pin-card:hover { border-color: transparent; background: var(--surface-hover); box-shadow: none; }
.pin-footer, .mini-gather { border-color: #ffffff0d; }
.pin-icon, .pin-expiry, .chip, .vibe-tag, .showcase-effect, .detail-banner-label { border-color: transparent; }
.person-card { background: var(--surface); }
.person-card:hover, .small-profile:hover, .icon-btn:hover { border-color: transparent; background: var(--surface-hover); }
.person-card-art, .profile-banner, .studio-banner { border-bottom: 0; }
.mini-studio { border: 0; }
.tab { background: var(--surface); }
.tab.active { border-color: transparent; }
.empty { background: var(--surface); border-style: solid; }
.btn.secondary, .btn.hero-secondary { border-color: transparent; background: #342d38; }
.btn.secondary:hover, .btn.hero-secondary:hover { border-color: transparent; background: #3f3843; }

/* Hero: short copy above an endless strip of live profile cards. */
.hero.hero-live { display: block; min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; margin-bottom: 34px; }
.hero.hero-live:after { content: none; }
.hero-live .hero-copy { width: auto; padding: 8px 0 22px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px 24px; }
.hero-live .eyebrow { grid-column: 1 / -1; }
.hero-live h1 { margin: 6px 0 4px; font-size: clamp(30px, 3vw, 44px); }
.hero-live p { margin: 0; max-width: 460px; }
.hero-live .hero-actions { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
.live-dot.is-idle { background: #91848f; box-shadow: none; }

.hero-marquee {
  position: relative; overflow: hidden; margin: 0 -8px; padding: 8px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000000 6%, #000000 94%, transparent);
}
.hero-track { display: flex; width: max-content; animation: hero-slide var(--hero-duration, 40s) linear infinite; }
.hero-lane { display: flex; gap: 14px; padding-right: 14px; }
.hero-marquee:hover .hero-track, .hero-marquee:focus-within .hero-track { animation-play-state: paused; }
/* Left to right: the second lane starts off to the left and slides into the first lane's place. */
@keyframes hero-slide { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Presence colours live on the profile page; the cards need them too. */
.hero-card { --presence-online:#5fd99a; --presence-ingame:#63e5ff; --presence-away:#ffc24a; --presence-dnd:#ff5e6c; }
.hero-card {
  position: relative; isolation: isolate; overflow: hidden; flex: none; width: 236px; padding: 0 0 14px;
  display: flex; flex-direction: column; text-align: left; color: var(--ink);
  background: var(--surface); border: 0; border-radius: 14px; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.hero-card:hover { transform: translateY(-3px); background: var(--surface-hover); }
.hero-card > .fx-background { z-index: 0; }
.hero-card:has(.fx-background[data-fx="arcane"]) { background: linear-gradient(180deg, #211b24, #18131b); }
.hero-card:has(.fx-background[data-fx="shadow"]) { background: linear-gradient(180deg, #120d14, #0b080d); }
.hero-card:has(.fx-background[data-fx="stardust"]) { background: linear-gradient(180deg, #1f1922, #161119); }
.hero-card:has(.fx-background[data-fx="mist"]) { background: linear-gradient(180deg, #251f29, #1b151d); }
.hero-card:has(.fx-background[data-fx="pixel-night"]) { background: linear-gradient(180deg, #1f1922, #2d2631); }
.hero-card-banner { position: relative; z-index: 1; display: block; height: 92px; overflow: hidden; background: var(--profile-bg); }
.hero-card-banner:not(:has(canvas, img))::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, #ffffff30, transparent 55%); }
.hero-card-avatar { position: relative; z-index: 2; margin: -36px 0 0 16px; display: block; width: 72px; height: 72px; }
.hero-card-avatar .avatar { box-shadow: 0 0 0 4px var(--surface); }
.hero-card-body { position: relative; z-index: 2; display: grid; gap: 4px; padding: 10px 16px 0; min-width: 0; }
.hero-card-body strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-card-body strong em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #17121a; background: #ff9e57; border-radius: 4px; padding: 1px 5px; vertical-align: 2px; }
.hero-card-body small { color: var(--muted); font-size: 12px; min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-card-body .presence { font-size: 12px; margin-top: 4px; }
.presence-offline i, .presence-sample i { background: #70728b; box-shadow: none; }
.hero-card-game { font-size: 12px; color: #ff9e57; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .hero-track { animation: none; }
  .hero-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .hero-lane[aria-hidden="true"] { display: none; }
}
@media (max-width: 730px) {
  .hero-live .hero-copy { grid-template-columns: 1fr; }
  .hero-live .hero-actions { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .hero-marquee { margin: 0 -16px; }
  .hero-card { width: 208px; }
}
.pin-list > .empty { grid-column: 1 / -1; }

/* Profile page: one calm surface; modules and games separate by fill instead of outlines. Inputs keep theirs. */
.pp { border-color: transparent; }
.pp-banner, .detail-banner { border-bottom: 0; }
.pp-module, .pp-game, .game-draft, .game-result, .todo-item, .pp-badge, .pp-game-chip, .pp-platforms i { border-color: transparent; }
.todo-group { border-top-color: #ffffff0d; }

/* Shop, games and settings: large containers lose their outlines; inputs and game boards keep theirs. */
.shop-hero, .games-hero, .shop-daily, .shop-earn, .shop-plans, .shop-history, .game-leaderboard, .game-faq,
.shop-item, .plan-cards article, .game-tile, .game-room, .rank-game, .games-initial, .studio-unlock, .gem-balance,
.games-hero-steps span, .game-guest, .game-ready, .settings-panel, .settings-tabs button, .account-gate,
.discord-connected, .visibility-option, .kind-tabs, .pin-language-badge, .top-gems { border-color: transparent; }
.game-rank-empty { border-color: #ffffff14; }
/* Beta footer: feedback button and legal links on every page */
.legal-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:28px 0 8px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.legal-foot a{color:var(--muted);text-decoration:none}.legal-foot a:hover{color:var(--ink);text-decoration:underline}
.beta-tag{border:1px solid var(--violet);color:var(--violet);border-radius:999px;padding:1px 8px;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.feedback-link{border:0;background:none;color:var(--coral);font-weight:800;font-size:12px;padding:6px 0}
.feedback-kinds{border:0;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px}.feedback-kinds legend{font-size:11px;font-weight:800;margin-bottom:6px;padding:0}
.login-consent{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}.login-consent a{color:inherit;text-decoration:underline}
@media (max-width:860px){.legal-foot{margin-bottom:84px}}
/* Hero card: the profile text instead of the current game, two lines at most (2026-11-11). */
.hero-card-bio { font-size: 12px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }