/* Fontit ladataan omalta palvelimelta (ei Google Fonts -kutsuja). Jos tiedostoja ei ole, käytetään järjestelmäfontteja. */
@font-face { font-family: 'Plex'; src: url('/fonts/plex-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Plex'; src: url('/fonts/plex-sans-600.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Barlow SC'; src: url('/fonts/barlow-sc-700.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/plex-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --bg: #0E1116;
  --surface: #171B22;
  --surface-2: #1E232C;
  --line: #262C36;
  --line-soft: #1F242D;
  --text: #E6E8EC;
  --text-2: #B8BFCC;
  --muted: #9AA3B2;
  --accent: #C6F432;
  --warn: #FBBF24;
  --ok: #34D399;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --font: 'Plex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Barlow SC', 'Arial Narrow', var(--font);
  --mono: 'Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Runko: puhelimessa alanavigaatio, koneella sivupalkki */
.app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s4) var(--s4) calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s3); }

.top { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line-soft); padding: calc(var(--s4) + env(safe-area-inset-top)) var(--s4) var(--s3); }
.top-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: var(--s3); }
.top h1 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: 0; line-height: 1.1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.top .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.top .titles { flex: 1; min-width: 0; }

.icon-btn { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 0; }

.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #12161C; border-top: 1px solid var(--line-soft); padding: 6px var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); }
.nav button { min-height: 52px; background: none; border: 0; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1); font-size: 11px; font-weight: 600; border-radius: var(--r); }
.nav button[aria-current="page"] { color: var(--accent); }
.nav .brand { display: none; }
.nav .brand .tagline { display: block; font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }

@media (min-width: 900px) {
  .app { flex-direction: row; }
  .nav { position: sticky; top: 0; height: 100vh; width: 232px; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--s1); border-top: 0; border-right: 1px solid var(--line-soft); padding: var(--s5) var(--s3); }
  .nav .brand { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) var(--s5); font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); }
  .nav button { flex-direction: row; justify-content: flex-start; gap: var(--s3); padding: 0 var(--s3); font-size: 15px; min-height: 44px; }
  .nav button[aria-current="page"] { background: var(--surface); }
  .content { flex: 1; min-width: 0; }
  .main { padding-bottom: var(--s6); }
}

/* Suodatinpainikkeet */
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.chip .n { opacity: .75; font-weight: 500; margin-left: 2px; }
.chip.zero:not([aria-pressed="true"]) { color: var(--muted); }

/* Kortit */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.card.highlight { border-color: var(--accent); }
.card-head { display: flex; align-items: center; gap: var(--s3); }
.card-head .who { flex: 1; min-width: 0; }
.card-head .name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-head .time { font-size: 12px; color: var(--muted); }
.card h2 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.card h2 a { color: var(--text); text-decoration: none; }
.card h2 a:hover { text-decoration: underline; }
.card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; }
.card-foot { display: flex; justify-content: space-between; gap: var(--s2); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.card-foot .warn { color: var(--warn); font-weight: 600; }

.avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; border: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--bg); overflow: hidden; background: var(--surface-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.fit img { object-fit: contain; padding: 3px; box-sizing: border-box; }
.avatar.lg { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; }
.avatar.md { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }

.badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; color: var(--bg); white-space: nowrap; }
.t-code { background: #C6F432; } .t-drop { background: #C4B5FD; } .t-free, .t-giveaway { background: #34D399; }
.t-update { background: #60A5FA; } .t-event { background: #FB923C; } .t-news { background: #2A303B; color: var(--text); }

.codebox { display: flex; align-items: center; gap: var(--s2); background: #0B0D11; border-radius: var(--r); padding: var(--s2) var(--s2) var(--s2) var(--s4); }
.codebox code { flex: 1; font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--accent); letter-spacing: .04em; overflow-wrap: anywhere; }

.btn { min-height: 40px; padding: 0 var(--s4); border-radius: 10px; border: 1px solid var(--accent); background: var(--accent); color: var(--bg); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-decoration: none; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.quiet { background: transparent; border-color: var(--line); color: var(--text); }
.btn.danger { background: transparent; border-color: #F87171; color: #FCA5A5; }
.btn:disabled { opacity: .5; cursor: default; }

/* Pelit */
.label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--s2); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; color: var(--muted); }
.field input { height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); padding: 0 14px; font-size: 15px; }
.field input::placeholder { color: #8A93A3; }
.row { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.row .who { flex: 1; min-width: 0; }
.row .title { font-size: 15px; font-weight: 600; }
.row .meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row > div:last-child:not(.who) { flex-shrink: 0; }
.game-btn { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--s3); }
.game-btn .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.count { min-width: 26px; height: 26px; padding: 0 var(--s2); border-radius: 13px; background: var(--accent); color: var(--bg); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.count.zero { background: var(--surface-2); color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }

.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.toggle { min-height: 36px; padding: 0 var(--s3); border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; }
.toggle[aria-pressed="true"] { background: #232A35; border-color: #4B5565; color: var(--text); }
.toggle[aria-pressed="true"]::before { content: '✓ '; }

/* Ilmaiset */
.free-art { height: 120px; margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface-2); overflow: hidden; }
.free-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.notice { font-size: 13px; line-height: 1.5; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); }
.notice strong { color: var(--text); }
.empty { text-align: center; color: var(--muted); font-size: 14px; padding: 40px var(--s3); line-height: 1.6; }
.footer-links { font-size: 13px; color: var(--muted); display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: 14px; font-weight: 600; padding: 10px var(--s4); border-radius: var(--r); z-index: 20; }
@media (min-width: 900px) { .toast { bottom: var(--s6); } }

/* Koodien äänestys ja ilmoituslomake */
.votes { display: flex; flex-direction: column; gap: var(--s2); }
.vote-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.status { font-size: 13px; font-weight: 600; }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.status.muted { color: var(--muted); }
.toggle.flag[aria-pressed="true"] { border-color: #F87171; color: #FCA5A5; }
.field select { height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 0 12px; font-size: 15px; }
.field input[type="date"] { color-scheme: dark; }
.report .field input, .report .field select { background: var(--bg); }

/* Profiili */
.provider-btns { display: flex; flex-direction: column; gap: var(--s2); }
.btn.provider { justify-content: flex-start; min-height: 48px; font-size: 15px; }
.pt-list .row { border-bottom: 1px solid var(--line-soft); }
.pt-img { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.pt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card h2 { font-size: 20px; }
.card .row svg { flex-shrink: 0; }
.avatar.thumb { width: 56px; border-radius: 8px; }

.auth-form { display: flex; flex-direction: column; gap: var(--s3); }
.auth-form .field input { background: var(--bg); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex-shrink: 0; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Arvostelut */
.segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.segment.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segment .toggle { padding: 0 6px; font-size: 13px; }
.segment .toggle { min-height: 40px; font-weight: 600; }
.segment .toggle[aria-pressed="true"]::before { content: none; }
.score { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.score small { font-size: 14px; color: var(--muted); margin-left: 2px; }
.score.big { font-size: 44px; }
.verified { font-size: 13px; color: var(--ok); font-weight: 600; margin: 0; }
.aspects { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.aspects strong { color: var(--text); }
.proscons p { margin: 0 0 4px; }
.proscons strong { color: var(--accent); display: inline-block; width: 14px; }
.review-body { white-space: pre-line; }
.rating { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.rating .toggle { padding: 0; min-height: 40px; }
.rating .toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.rating .toggle[aria-pressed="true"]::before { content: none; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.checks li > span:first-child { font-weight: 700; width: 16px; flex-shrink: 0; }
.checks li.ok > span:first-child { color: var(--ok); }
.checks li.no > span:first-child { color: #FCA5A5; }
.checks small { color: var(--muted); }
textarea { width: 100%; box-sizing: border-box; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 12px 14px; font: inherit; font-size: 15px; resize: vertical; }
.total { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Foorumi */
.thread-list { display: flex; flex-direction: column; gap: 8px; }
.thread-row { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--text); }
.thread-row:hover { border-color: #3A4250; }
.t-title { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.25; }
.t-meta { font-size: 13px; color: var(--muted); }
.thread-title { font-family: var(--display); font-size: 26px; margin: 4px 0 0; line-height: 1.2; overflow-wrap: anywhere; }
.post.first { border-color: #3A4250; }

/* Foorumin alueet */
.board-group { display: flex; flex-direction: column; gap: 8px; }
.board-row { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--text); }
.board-row:hover { border-color: #3A4250; }
.board-group.pinned .board-row { border-left: 0; background: #1A2010; border-color: #2E3A16; }
.b-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.b-name { font-family: var(--display); font-size: 19px; font-weight: 700; }
.b-desc { font-size: 13px; color: var(--muted); }
.b-stats { font-size: 12px; color: var(--muted); text-align: right; flex-shrink: 0; line-height: 1.5; }
.board-desc { margin: 0; color: var(--text-2); font-size: 14px; }
.pin { font-family: var(--font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--accent); color: var(--bg); padding: 2px 6px; border-radius: 5px; vertical-align: middle; }
.article h3 { font-family: var(--display); font-size: 19px; margin: 8px 0 0; color: var(--text); }
.article p { margin: 0; }
.article details { border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
.article details:last-child { border-bottom: 0; }
.article summary { cursor: pointer; font-weight: 600; color: var(--text); min-height: 28px; }
.article details p { margin-top: 8px; }
@media (max-width: 420px) { .nav button { font-size: 10px; } }

.forum-top { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.forum-top .btn { min-height: 44px; }
.t-board { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.field select optgroup { color: var(--muted); }

/* Selaus */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; color: var(--text); min-height: 72px; }
.tile:hover { border-color: #3A4250; }
.tile-name { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.2; }
.tile-meta { font-size: 12px; color: var(--muted); }
.row-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; }
.row-open .who { display: flex; flex-direction: column; gap: 2px; }
.row-open:disabled { cursor: default; }
.company-card { background: #1A2010; border-color: #2E3A16; }

/* Pelivalitsin */
.gp { position: relative; }
.gp label { font-size: 13px; color: var(--muted); }
.gp input { height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); padding: 0 14px; font-size: 15px; }
.gp-list { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); max-height: 340px; overflow-y: auto; }
.gp-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line-soft); padding: 10px 12px; color: var(--text); min-height: 52px; }
.gp-item:last-child { border-bottom: 0; }
.gp-item:hover, .gp-item:focus-visible { background: #262C36; }
.gp-item .who, .picked .who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gp-item .title, .picked .title { font-weight: 600; font-size: 15px; }
.gp-item .meta, .picked .meta { font-size: 12px; color: var(--muted); }
.gp-more { font-size: 12px; color: var(--muted); padding: 8px 12px; margin: 0; }
.picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--bg); }

.btn.following .off { display: none; }
.btn.following:hover .on, .btn.following:focus-visible .on { display: none; }
.btn.following:hover .off, .btn.following:focus-visible .off { display: inline; }
.btn.following:hover { background: transparent; color: #FCA5A5; border-color: #F87171; }
.game-tile { position: relative; }
.game-tile .game-btn { padding-right: 48px; }
.unfollow { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; }
.unfollow:hover { color: #FCA5A5; border-color: #F87171; }
.game-tile .count { margin-right: 4px; }
.tile.company .logo { height: 36px; display: flex; align-items: center; margin-bottom: 4px; }
.logo img { max-height: 100%; max-width: 120px; object-fit: contain; display: block; background: #E6E8EC; border-radius: 6px; padding: 4px; }
.logo.big { height: 56px; }
.logo.big img { max-width: 180px; padding: 6px; }
.company-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.admin-row { display: flex; justify-content: flex-end; }
.btn.small { min-height: 30px; padding: 4px 10px; font-size: 12px; }

/* ---------- Syöte: pääjono + "käynnissä nyt" -paneelit ---------- */
:root { --new: #86EFAC; }
.new-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--new); margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(134, 239, 172, .15); }
.nav button { position: relative; }
.nav button.has-new::after { content: ''; position: absolute; top: 8px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--new); box-shadow: 0 0 0 3px #12161C; }
.count.unseen { background: var(--new); color: var(--bg); }
.count:not(.zero):not(.unseen) { background: var(--surface-2); color: var(--text); }

.feed-layout { display: flex; flex-direction: column; gap: var(--s4); }
.stream { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.stream .card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.day { margin: var(--s3) 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.day:first-of-type { margin-top: 0; }
.stream-head { display: flex; align-items: center; gap: var(--s3); }
.stream-head h2 { margin: 0; font-family: var(--display); font-size: 22px; flex: 1; }
.stream-head .n, .rail-head .n { font-size: 13px; font-weight: 700; color: var(--muted); }
.btn.more { align-self: center; }

/* Paneelit: puhelimessa vaakarivi tiivistelmäruutuja, koneella oikea sivupalkki. */
.rail { order: -1; display: flex; align-items: flex-start; gap: var(--s2); overflow-x: auto; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4) 2px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-card { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.rail-card.quiet { opacity: .6; }
.rail-card h3 { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; }
.rail-head { display: flex; align-items: center; gap: var(--s2); background: none; border: 0; padding: 0; text-align: left; }
.rail-head h3 { flex: 1; }
.rail-head:disabled { cursor: default; }
.new-pill { font-size: 11px; font-weight: 700; color: var(--bg); background: var(--new); border-radius: 10px; padding: 2px 7px; white-space: nowrap; }
.rail .hint, .rail-row, .see-all { display: none; }
.rail-row { align-items: center; gap: var(--s2); background: none; border: 0; padding: 4px 0; text-align: left; border-radius: var(--r-sm); min-width: 0; }
.rail-row:hover .t { color: var(--accent); }
.rail-row .who { display: flex; flex-direction: column; min-width: 0; }
.rail-row .t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-row .m { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.see-all { background: none; border: 0; padding: 2px 0; color: var(--accent); font-size: 13px; font-weight: 600; text-align: left; }

@media (min-width: 1100px) {
  body.wide .main, body.wide .top-inner { max-width: 1120px; }
  .feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start; }
  .rail { order: 0; flex-direction: column; align-items: stretch; overflow: visible; margin: 0; padding: 0; position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; }
  .rail-card { flex: none; padding: var(--s4); }
  .rail .hint { display: block; font-size: 13px; color: var(--muted); margin: 0; }
  .rail-row, .see-all { display: flex; }
  .rail-card h3 { font-size: 15px; }
}

/* Aloitus: kaksi askelta, ei infotulvaa */
.setup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.setup h2 { margin: 0; font-family: var(--display); font-size: 24px; }
.setup p { margin: 0; color: var(--text-2); font-size: 14px; }
.steps { display: grid; gap: var(--s2); }
@media (min-width: 700px) { .steps { grid-template-columns: 1fr 1fr; } }
.step { display: flex; align-items: center; gap: var(--s3); text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); }
.step b { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.step span { display: flex; flex-direction: column; gap: 2px; }
.step small { color: var(--muted); font-size: 12px; }
.step.done { opacity: .65; }
.step.done b { background: var(--new); }
.step.done b::before { content: '✓'; }
.step.done b { font-size: 0; }
.step.done b::before { font-size: 14px; }

.free-setup { gap: var(--s3); }
.free-setup p { margin: 0; }
.free-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: 14px; color: var(--text-2); }

/* Koodin jakaminen: some-tyylinen kirjoituslaatikko */
.composer { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
.composer .avatar { background: var(--surface-2); color: var(--text); }
.composer .ph { flex: 1; min-width: 0; color: var(--muted); font-size: 15px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 999px; padding: 10px var(--s4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer:hover .ph { border-color: var(--line); color: var(--text-2); }
@media (max-width: 520px) { .composer .btn { display: none; } }

/* Profiili oikeassa yläkulmassa, asetukset sivupalkin alalaidassa */
.me-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-family: var(--display); font-weight: 700; font-size: 14px; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.me-btn img { width: 100%; height: 100%; object-fit: cover; }
.me-btn:hover, .me-btn.on { border-color: var(--accent); }
@media (min-width: 900px) { .nav .nav-settings { margin-top: auto; } }
.card.set { gap: var(--s2); }
.card.set h2 { font-size: 18px; }
.card.set p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }

/* Asennusohje */
.card.install { position: relative; border-color: rgba(198, 244, 50, .35); }
.how { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.ios-share { display: inline-block; width: 14px; height: 16px; vertical-align: -2px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; position: relative; margin: 0 2px; }
.ios-share::before { content: ''; position: absolute; left: 50%; top: -7px; width: 2px; height: 11px; background: currentColor; transform: translateX(-50%); }
.icon-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; border-radius: 8px; }

.mission { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--accent) !important; margin: 0; }

/* Foorumin sivupalkki */
.forum-rail .rail-row .snip { font-style: italic; }
.rail-row .rank { width: 22px; flex-shrink: 0; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--accent); text-align: center; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); text-align: center; }
.stats3 b { display: block; font-family: var(--display); font-size: 22px; }
.stats3 span { font-size: 12px; color: var(--muted); }
@media (max-width: 1099px) { .forum-rail { order: 1; flex-direction: column; align-items: stretch; overflow: visible; margin: 0; padding: 0; }
  .forum-rail .rail-row, .forum-rail .hint { display: flex; } .forum-rail .hint { display: block; font-size: 13px; color: var(--muted); margin: 0; } }

/* Omat pelit -osio Games-sivun alalaidassa */
.my-games { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.my-games.open { padding-bottom: var(--s4); }
.my-games-head { display: flex; align-items: center; gap: var(--s3); width: 100%; background: none; border: 0; padding: var(--s2) var(--s1); text-align: left; }
.my-games-head .who { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.my-games-head .title { font-family: var(--display); font-size: 20px; font-weight: 700; }
.my-games-head .meta { font-size: 13px; color: var(--muted); }
.my-games-head .chev { font-size: 18px; color: var(--muted); }
.my-filter { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px var(--s3); color: var(--text); }

/* Suositukset ja suosituimmat */
.discover { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }
.disc-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.disc-head h2 { margin: 0; font-family: var(--display); font-size: 22px; }
.discover .hint { font-size: 13px; color: var(--muted); margin: 0; }
.sug-row { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: var(--s3); overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.sug-card { scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.sug-cover { aspect-ratio: 3 / 4; background: var(--surface-2); overflow: hidden; }
.sug-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.sug-card:hover .sug-cover img { transform: scale(1.04); }
.sug-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 36px; color: var(--bg); }
.sug-body { padding: var(--s3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sug-body h3 { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug-reason { margin: 0; font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.sug-tags span { font-size: 11px; color: var(--text-2); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; }
.sug-follow { margin-top: auto; width: 100%; }
.pop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .pop-list { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.pop-row { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.pop-row .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pop-row .title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-row .meta { font-size: 13px; color: var(--muted); }
.pop-rank { width: 24px; flex-shrink: 0; text-align: center; font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--accent); }

/* Ylläpito */
.stats3.six { grid-template-columns: repeat(3, 1fr); row-gap: var(--s3); }
@media (min-width: 700px) { .stats3.six { grid-template-columns: repeat(6, 1fr); } }
.adm-row { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.adm-row .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-row .title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-row .meta { font-size: 12px; color: var(--muted); }
.adm-row .snip { white-space: normal; }
.adm-row.removed { opacity: .5; }
.adm-num { display: flex; flex-direction: column; align-items: center; min-width: 52px; font-family: var(--display); font-size: 18px; font-weight: 700; }
.adm-num small { font-family: var(--font); font-size: 10px; font-weight: 500; color: var(--muted); }
.adm-num.bad { color: #FCA5A5; } .adm-num.dim { color: var(--muted); }
.adm-votes { font-size: 12px; color: var(--text-2); white-space: nowrap; }
@media (max-width: 640px) { .adm-row { flex-wrap: wrap; } .adm-row .who { flex-basis: calc(100% - 60px); } }

/* Reaktiot koodeille ja dropeille */
.react-row { display: flex; flex-wrap: wrap; gap: 6px; }
.react { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; transition: transform .12s ease, background .12s ease; }
.react span { font-size: 15px; line-height: 1; }
.react b { font-weight: 700; color: var(--muted); }
.react:active { transform: scale(.95); }
.react[aria-pressed="true"] { color: var(--text); }
.react.fire[aria-pressed="true"] { background: rgba(251, 146, 60, .18); border-color: rgba(251, 146, 60, .6); }
.react.works[aria-pressed="true"] { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .6); }
.react.expired[aria-pressed="true"] { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .55); }
.react.spam[aria-pressed="true"] { background: rgba(167, 139, 250, .16); border-color: rgba(167, 139, 250, .6); }
.react[aria-pressed="true"] b { color: var(--text); }

.feel-row { display: flex; gap: 6px; flex-wrap: wrap; }
.feel { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; min-width: 44px; justify-content: center; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 700; transition: transform .12s ease; }
.feel span { font-size: 17px; line-height: 1; }
.feel:active { transform: scale(.9); }
.feel[aria-pressed="true"] { background: rgba(198, 244, 50, .14); border-color: rgba(198, 244, 50, .55); }
@media (max-width: 420px) { .react { padding: 0 9px; gap: 4px; font-size: 12px; } .react span { font-size: 14px; } }

/* Kalenteri */
.cal-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.cal-nav { display: flex; align-items: center; gap: var(--s2); }
.cal-nav h2 { margin: 0 var(--s2); font-family: var(--display); font-size: 24px; min-width: 170px; text-align: center; }
.cal-nav .icon-btn { width: 40px; height: 40px; font-size: 22px; }
.cal-controls { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.cal-controls select { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); min-height: 36px; padding: 0 var(--s3); max-width: 240px; }
.cal-filters { overflow-x: auto; flex-wrap: nowrap; }
.cal-wrap { display: flex; flex-direction: column; gap: var(--s4); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-grid.head span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-day { min-height: 56px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 3px; text-align: left; overflow: hidden; color: var(--text); }
.cal-day.out { opacity: .4; }
.cal-day.today { border-color: var(--accent); }
.cal-day.today .dn { background: var(--accent); color: var(--bg); }
.cal-day.sel { background: var(--surface-2); box-shadow: inset 0 0 0 2px rgba(198, 244, 50, .45); }
.cal-day .dn { font-size: 12px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-day .chips { display: none; flex-direction: column; gap: 2px; min-width: 0; }
.cal-day .dots { display: flex; gap: 3px; flex-wrap: wrap; padding-left: 3px; }
.cal-day .dots i { width: 7px; height: 7px; border-radius: 50%; }
.cal-chip { display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1.3; background: color-mix(in srgb, var(--c) 18%, transparent); border-left: 3px solid var(--c); border-radius: 4px; padding: 1px 4px; min-width: 0; }
.cal-chip .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip b { font-weight: 700; color: var(--c); }
.cal-day .more { font-size: 10px; color: var(--muted); padding-left: 4px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: var(--s3); font-size: 11px; color: var(--muted); }
.cal-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.cal-side { display: flex; flex-direction: column; gap: var(--s2); }
.cal-side-h { margin: var(--s2) 0 0; font-family: var(--display); font-size: 18px; }
.cal-item { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--r); padding: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.cal-item-head { display: flex; align-items: center; gap: var(--s2); }
.cal-item-head .who { flex: 1; min-width: 0; }
.cal-item-head .name { font-size: 13px; font-weight: 700; }
.cal-item-head .time { font-size: 12px; color: var(--muted); }
.cal-kind { font-size: 11px; font-weight: 700; color: var(--c); white-space: nowrap; }
.cal-item h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.cal-item h3 a { color: var(--text); }
.cal-src { font-size: 12px; color: var(--muted); }
@media (min-width: 700px) {
  .cal-day { min-height: 92px; }
  .cal-day .chips { display: flex; }
  .cal-day .dots { display: none; }
}
@media (min-width: 1100px) {
  .cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .cal-side { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; }
  .cal-day { min-height: 104px; }
}
@media (max-width: 420px) { .nav button { font-size: 9.5px; } .cal-nav h2 { font-size: 20px; min-width: 130px; } }

/* Viralliset tilit */
.vcheck { display: inline-block; vertical-align: -2px; margin-left: 3px; flex-shrink: 0; }
.vbadge { font-size: 11px; font-weight: 600; color: #93C5FD; margin-left: 4px; }
.card.is-official { border-color: rgba(59, 130, 246, .45); box-shadow: inset 3px 0 0 #3B82F6; }
a.official { color: #93C5FD; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.official-composer { border-color: rgba(59, 130, 246, .45); }
.official-composer .avatar { background: rgba(59, 130, 246, .15); }
.official-composer .btn { background: #3B82F6; border-color: #3B82F6; color: #fff; }
.verify-opt { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.verify-opt h3 { margin: 0; font-size: 14px; }
.verify-opt p { margin: 0; }
.studio-intro h2 { display: flex; align-items: center; gap: 6px; }
textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px var(--s3); resize: vertical; }

/* Studion moderointi */
.studio-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px dashed rgba(59, 130, 246, .35); font-size: 12px; color: #93C5FD; font-weight: 600; }
.official-answer { border-color: rgba(59, 130, 246, .55); box-shadow: inset 3px 0 0 #3B82F6; }
.oa-label { font-size: 12px; font-weight: 700; color: #93C5FD; display: flex; align-items: center; gap: 4px; }
.hidden-post { opacity: .75; border-style: dashed; }

/* Kalenterin monipäiväiset palkit: jatkuvat päivien yli (solujen väli 4 px katetaan negatiivisella marginaalilla) */
.cal-day { overflow: visible; position: relative; }
.cal-day .lanes { display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; }
.cal-bar { display: block; height: 6px; background: var(--c); position: relative; z-index: 1; }
.cal-bar.lane-gap { background: transparent; }
.cal-bar.lbl { z-index: 3; }
.cal-bar.s { margin-left: 6px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.cal-bar.e { margin-right: 6px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.cal-bar .bl { display: none; }
.cal-day.out .cal-bar:not(.lane-gap) { background: color-mix(in srgb, var(--c) 40%, var(--bg)); }
@media (min-width: 700px) {
  .cal-bar { height: 18px; background: color-mix(in srgb, var(--c) 30%, var(--surface)); border-top: 1px solid color-mix(in srgb, var(--c) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c) 70%, transparent); }
  .cal-bar.s { border-left: 3px solid var(--c); }
  .cal-bar.e { border-right: 1px solid color-mix(in srgb, var(--c) 70%, transparent); }
  .cal-bar .bl { display: block; position: absolute; left: 4px; top: 0; line-height: 16px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--text); z-index: 2; max-width: calc(var(--span, 1) * 100% + (var(--span, 1) - 1) * 6px - 10px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  .cal-bar.lane-gap { border: 0; background: transparent; }
  .cal-day.out .cal-bar:not(.lane-gap) { background: color-mix(in srgb, var(--c) 15%, var(--bg)); }
}

/* Juhlapäivät kalenterissa: hillitty taustasävy ja emoji */
.cal-day.holi { background: linear-gradient(180deg, color-mix(in srgb, var(--hc, #F59E0B) 16%, var(--surface)), var(--surface) 70%); }
.holi-halloween { --hc: #F97316; } .holi-xmas { --hc: #22C55E; } .holi-newyear { --hc: #EAB308; } .holi-lunar { --hc: #EF4444; }
.holi-valentine { --hc: #EC4899; } .holi-easter { --hc: #A3E635; } .holi-midsummer { --hc: #FACC15; } .holi-thanksgiving { --hc: #D97706; } .holi-blackfriday { --hc: #6366F1; }
.cal-day .dn-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.holi-tag { font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.holi-name { display: none; }
@media (min-width: 1100px) { .holi-name { display: inline; } }
.holi-line { margin: 0; font-size: 14px; color: var(--text-2); }

/* Kausiteema: vain emoji logon vieressä ja ohut värijuova sivun yläreunassa */
body[data-season]:not([data-season=""])::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; background: var(--season-line); }
body[data-season="halloween"] { --season-line: linear-gradient(90deg, #F97316, #7C3AED, #F97316); }
body[data-season="xmas"] { --season-line: linear-gradient(90deg, #22C55E, #EF4444, #22C55E); }
body[data-season="newyear"] { --season-line: linear-gradient(90deg, #EAB308, #F8FAFC, #EAB308); }
body[data-season="lunar"] { --season-line: linear-gradient(90deg, #EF4444, #EAB308, #EF4444); }
body[data-season="valentine"] { --season-line: linear-gradient(90deg, #EC4899, #F43F5E); }
body[data-season="easter"] { --season-line: linear-gradient(90deg, #A3E635, #FDE047, #C4B5FD); }
body[data-season="midsummer"] { --season-line: linear-gradient(90deg, #FACC15, #38BDF8); }
body[data-season="thanksgiving"], body[data-season="blackfriday"] { --season-line: linear-gradient(90deg, #D97706, #6366F1); }
.season-emoji { font-size: 18px; }

/* Juhlakausi: hyvin vaalea sävy koko kauden ajan, juhlapäivänä vahvempi */
.cal-day.fest:not(.holi) { background: color-mix(in srgb, var(--hc, #F59E0B) 7%, var(--surface)); }

.game-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); }
.gs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3); display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); }
.gs b { font-family: var(--display); font-size: 22px; }
.gs span { font-size: 12px; color: var(--muted); }
a.gs:hover { border-color: var(--accent); }

/* Säännöt: tilin luonti ja hyväksyntä */
.rules-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0; }
.rules-sum > div { background: var(--surface-2, rgba(255,255,255,.04)); border-radius: 12px; padding: 12px 14px; }
.rules-sum h3 { margin: 0 0 6px; font-size: 14px; color: var(--text); }
.rules-sum ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.rules-peek summary { cursor: pointer; font-size: 14px; color: var(--text-2); }
.terms-gate { max-width: 640px; margin: 24px auto; }
.tg-links { font-size: 14px; }
.form-note { font-size: 13px; color: var(--muted); margin: 4px 0; }
:focus-visible { outline: 2px solid var(--accent, #7DD3FC); outline-offset: 2px; }

/* Halloween: hämähäkinseitti otsikon kulmassa ja pieni kummitus + kurpitsat valikossa */
body[data-season="halloween"] .top { border-bottom-color: rgba(249, 115, 22, .35); }
body[data-season="halloween"] .top::after { content: ''; position: absolute; right: 0; top: 0; width: 120px; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23C9CED8' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M100 0L40 60M100 0L62 82M100 0L82 100M100 0L18 38M100 0L0 22'/%3E%3Cpath d='M86 14q-5 -4 -8 -10M86 14q4 5 10 8M72 28q-9 -6 -14 -18M72 28q6 9 18 14M58 42q-13 -8 -20 -26M58 42q9 13 26 20M44 56q-17 -11 -26 -32M44 56q12 17 33 26'/%3E%3C/svg%3E") no-repeat right top / 120px 120px; opacity: var(--web, 1); pointer-events: none; transition: opacity .25s; }
body[data-season="halloween"].web-gone .top::after { display: none; }
.web-fall { position: fixed; width: 120px; height: 72px; z-index: 60; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23C9CED8' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M100 0L40 60M100 0L62 82M100 0L82 100M100 0L18 38M100 0L0 22'/%3E%3Cpath d='M86 14q-5 -4 -8 -10M86 14q4 5 10 8M72 28q-9 -6 -14 -18M72 28q6 9 18 14M58 42q-13 -8 -20 -26M58 42q9 13 26 20M44 56q-17 -11 -26 -32M44 56q12 17 33 26'/%3E%3C/svg%3E") no-repeat right top / 120px 120px; animation: web-fall 1s ease-in forwards; }
@keyframes web-fall { 30% { transform: rotate(-8deg) translate(-6px, 10px); opacity: .9; } to { transform: rotate(-30deg) translate(-40px, 260px) scale(.6); opacity: 0; } }
/* Kummitus lentää puhdistettuun kulmaan ja pyytää leikkimään */
.ghost-fly { position: fixed; left: 0; top: 0; z-index: 61; width: 48px; height: 58px; pointer-events: none; filter: drop-shadow(0 0 10px rgba(238, 240, 244, .45)); will-change: transform; }
.ghost-fly svg { width: 100%; height: 100%; display: block; }
.ghost-ask { position: fixed; z-index: 62; width: 230px; padding: 12px 14px; border-radius: 14px 4px 14px 14px; background: #fff; color: #1B1F27; box-shadow: 0 12px 40px rgba(0,0,0,.45); animation: gp-in .2s ease-out; }
.ghost-ask p { margin: 0 0 10px; font-weight: 700; font-size: 15px; line-height: 1.3; }
.ghost-ask div { display: flex; gap: 8px; }
.ghost-ask button { flex: 1; min-height: 36px; border-radius: 10px; border: 0; font: 700 13px var(--font); cursor: pointer; }
.ghost-ask .ga-yes { background: var(--accent); color: #0E1116; }
.ghost-ask .ga-no { background: #E9ECF1; color: #1B1F27; }
.ghost-ask button:focus-visible { outline: 2px solid #5865F2; outline-offset: 2px; }
.season-deco { position: absolute; right: 14px; top: -34px; height: 40px; display: flex; align-items: flex-end; gap: 2px; pointer-events: none; }
.season-deco svg { display: block; }
.season-deco .ghost { width: 30px; height: 36px; animation: ghost-bob 2.8s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(238, 240, 244, .35)); }
.season-deco .pumpkin { width: 30px; height: 26px; margin-bottom: -4px; }
.season-deco .pumpkin.p1 { display: none; }
@keyframes ghost-bob { from { transform: translateY(2px) rotate(-3deg); } to { transform: translateY(-6px) rotate(3deg); } }
@media (min-width: 900px) {
  .season-deco { position: static; margin-top: auto; height: auto; justify-content: center; align-items: flex-end; gap: 10px; padding: var(--s4) 0 var(--s2); }
  .season-deco + .nav-settings { margin-top: 0; }
  .season-deco .pumpkin, .season-deco .pumpkin.p1 { display: block; width: 40px; height: 35px; margin-bottom: 0; }
  .season-deco .ghost { width: 40px; height: 48px; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .season-deco .ghost { animation: none; } }

/* K-18-pelin portti */
.age-gate { text-align: center; align-items: center; max-width: 520px; margin: 24px auto; }
.age-gate .age-badge { width: 64px; height: 64px; border-radius: 12px; background: #DC2626; color: #fff; font: 800 30px/64px var(--display); margin: 0 auto 8px; }
.age-gate > div:not(.age-badge) { justify-content: center; }

/* Kävijät ja roolit (ylläpito) */
.vbars { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin: 12px 0 4px; }
.vbar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.ctry { display: grid; grid-template-columns: 28px minmax(0, 9em) 1fr 3.5em; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; }
.ctry .flag { font-size: 20px; } .ctry .cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctry .cbar { height: 8px; background: var(--surface-2, #232833); border-radius: 4px; overflow: hidden; } .ctry .cbar span { display: block; height: 100%; background: var(--accent); }
.ctry .cnum { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.role-chip { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; background: #1E3A8A; color: #BFDBFE; }
.role-chip.r-owner { background: #713F12; color: #FDE68A; } .role-chip.r-moderator { background: #14532D; color: #BBF7D0; }
.role-select { background: var(--surface); color: var(--text); border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }

/* Ylläpito: koodi- ja drop-osion pakotus */
.cap-admin summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text-2); }
.cap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.cap-row > span { min-width: 90px; font-size: 14px; font-weight: 600; }

/* Tittelit: yksi postauksen oikeassa kulmassa, kaikki profiilissa */
.card-head .utitle { margin-left: auto; align-self: flex-start; }
.utitle { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; max-width: 14em; overflow: hidden; text-overflow: ellipsis; background: #2A303A; color: var(--text); }
.utitle.t-owner { background: #713F12; color: #FDE68A; }
.utitle.t-admin { background: #7F1D1D; color: #FECACA; }
.utitle.t-mod { background: #14532D; color: #BBF7D0; }
.utitle.t-vip { background: #581C87; color: #E9D5FF; }
.utitle.t-studio { background: #1E3A8A; color: #BFDBFE; }
.utitle.t-hero { background: #3F4A12; color: #E7F9A5; }
.utitle svg { width: 12px; height: 12px; }
.title-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.title-list .utitle { font-size: 12px; padding: 4px 10px; }
.review .card-head .utitle + .score { margin-left: 10px; }

/* Pisteet: keskiarvo isona renkaana, lähteet pieninä */
.scores .sc-main { display: flex; align-items: center; gap: var(--s4); }
.scores .sc-main h2 { margin: 0 0 4px; font-size: 20px; }
.scores .sc-main .hint { margin: 0; }
.ring text { font-family: var(--display); }
.sc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.sc-item { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; color: var(--text); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
a.sc-item:hover, button.sc-item:hover { border-color: var(--accent); }
.sc-txt { display: flex; flex-direction: column; min-width: 0; }
.sc-txt b { font-size: 14px; }
.sc-txt span { font-size: 12px; color: var(--muted); }
@media (max-width: 420px) { .sc-item { padding: 6px 8px; gap: 8px; } .sc-item .ring { width: 44px; height: 44px; } .sc-txt b { font-size: 13px; } }

/* "Onko tämä sama?" */
.dup-box { border: 1px solid #FACC15; background: rgba(250, 204, 21, .08); border-radius: var(--r); padding: 12px 14px; }
.dup-box p { margin: 0 0 10px; font-size: 14px; }
.dup-box code { color: var(--accent); font-weight: 700; }
.adm-row.appealed { border-left: 3px solid #A855F7; padding-left: 8px; }

/* Hinnat kaupoittain */
.prices h2 { margin: 0 0 6px; font-size: 20px; }
.price-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); color: var(--text); text-decoration: none; border: 1px solid transparent; }
.price-row + .price-row { border-top-color: var(--line-soft); border-radius: 0; }
.price-row .shop { flex: 1; font-weight: 600; }
.price-row b { font-variant-numeric: tabular-nums; }
.price-row s { color: var(--muted); font-size: 13px; }
.price-row .cut { background: #14532D; color: #BBF7D0; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.price-row.best { background: rgba(198, 244, 50, .08); border: 1px solid rgba(198, 244, 50, .4); border-radius: var(--r); }
.price-row.best b { color: var(--accent); }
.price-row:hover { border-color: var(--accent); }
.key-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: #3B2F0B; color: #FCD34D; border: 1px solid #854D0E; vertical-align: 2px; margin-left: 4px; }

/* Kuvakaappauksen luku */
.scan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.scan-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.scan-btn.busy { opacity: .7; cursor: progress; }
.scan-row .hint { font-size: 12px; margin: 0; }

/* Studioiden Insights */
.stats3 span em { font-style: normal; font-weight: 700; } .stats3 em.up { color: #4ADE80; } .stats3 em.down { color: #F87171; }
.linkish { background: none; border: 0; padding: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); }
.collab { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.collab-card { background: var(--bg); border: 1px solid var(--accent); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.collab-card span { font-size: 13px; color: var(--muted); }

/* Sivupalkin alaosa: kirjautuminen tai oma profiili (vain työpöydällä; puhelimella oikea yläkulma). */
.nav-me { display: none; }
@media (min-width: 900px) {
  .top-me { display: none; }
  .nav-me { display: flex; flex-direction: column; gap: 6px; padding: var(--s3) 0 0; margin-top: var(--s2); border-top: 1px solid var(--line-soft); }
  .nav .nav-signin { justify-content: center; min-height: 46px; font-size: 15px; font-weight: 700; background: var(--accent); color: #0E1116; border: 0; border-radius: 12px; padding: 0 var(--s3); }
  .nav .nav-signin:hover { filter: brightness(1.08); }
  .nav-me-hint { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
  .nav .nav-user { min-height: 56px; gap: var(--s3); padding: 0 var(--s2); color: var(--text); }
  .nav .nav-user .me-btn { width: 36px; height: 36px; font-size: 13px; }
  .nav .nav-user:hover .me-btn, .nav .nav-user.on .me-btn { border-color: var(--accent); }
  .nu-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
  .nu-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nu-txt small { font-size: 12px; color: var(--muted); font-weight: 500; }
}

/* Leveämpi asettelu isolla näytöllä: vähemmän tyhjää tilaa reunoilla. */
@media (min-width: 1100px) {
  body.wide .main, body.wide .top-inner { max-width: 1320px; }
  .games-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .games-side { display: flex; flex-direction: column; gap: var(--s3); padding-right: var(--s5); border-right: 1px solid var(--line-soft); }
  .games-side .tiles { grid-template-columns: 1fr 1fr; }
}
.games-layout, .games-main { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
@media (min-width: 1100px) { .games-layout { display: grid; } }
.games-side, .browse-box { display: flex; flex-direction: column; gap: var(--s3); }
@media (max-width: 1099px) { .browse-box.busy { display: none; } }
.tile[aria-pressed="true"] { border-color: var(--accent); }

/* Selausruudut tietokoneella: yksi per rivi, nimi vasemmalla ja määrä oikealla. */
@media (min-width: 1100px) {
  .games-side .tiles { grid-template-columns: 1fr; gap: 6px; }
  .games-side .tile { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 12px; }
  .games-side .tile .tile-name { font-size: 15px; }
  .games-side .tile .tile-meta { text-align: right; white-space: nowrap; }
  .games-side .tile.company { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .games-side .tile.company:has(.logo) { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-items: center; justify-content: stretch; }
  .games-side .tile.company .logo { grid-row: 1 / 3; height: 30px; width: 56px; margin: 0; display: flex; align-items: center; justify-content: center; }
  .games-side .tile.company .logo img { max-height: 30px; max-width: 56px; padding: 3px; }
  .games-side .tile.company .tile-meta { text-align: left; white-space: normal; }
  .games-side .tile:hover { border-color: #3A4250; }
}

/* ---------- Ensikävijän aloitus ---------- */
body.intro-open { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background:
  radial-gradient(60% 45% at 50% 0%, rgba(198, 244, 50, .13), transparent 70%),
  radial-gradient(45% 40% at 85% 30%, rgba(139, 92, 246, .16), transparent 70%),
  radial-gradient(40% 35% at 10% 60%, rgba(56, 189, 248, .08), transparent 70%), var(--bg); }
.intro::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent); }
.intro-in { position: relative; max-width: 1080px; margin: 0 auto; padding: 16px 20px 56px; }
.intro-top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.intro-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 24px; font-weight: 700; }
.intro-brand img { border-radius: 8px; }
.intro-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(32px, 8vh, 88px); }
.intro-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); border: 1px solid #2E3542; background: rgba(23, 27, 34, .7); border-radius: 999px; padding: 6px 14px; }
.intro-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: intro-pulse 2s ease-in-out infinite; }
@keyframes intro-pulse { 50% { opacity: .35; } }
.intro h1 { font-family: var(--display); font-size: clamp(44px, 9vw, 92px); line-height: .98; letter-spacing: -.01em; margin: 22px 0 0; max-width: 11ch; }
.intro h1 span { background: linear-gradient(92deg, #C6F432 10%, #7FE3A0 55%, #A78BFA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-sub { font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--text-2); max-width: 600px; margin: 20px auto 0; }
.intro-sub b { color: var(--text); font-weight: 600; }
.intro-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.intro .intro-go { min-height: 54px; padding: 0 30px; font-size: 17px; font-weight: 700; border-radius: 14px; box-shadow: 0 10px 40px -10px rgba(198, 244, 50, .55); }
.intro .intro-guest { min-height: 54px; padding: 0 26px; font-size: 16px; border-radius: 14px; background: rgba(23, 27, 34, .8); border: 1px solid #2E3542; }
.intro-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.intro-stats { display: flex; gap: clamp(24px, 6vw, 64px); justify-content: center; margin-top: 48px; }
.intro-stats div { display: flex; flex-direction: column; gap: 4px; }
.intro-stats b { font-family: var(--display); font-size: clamp(28px, 4vw, 38px); color: var(--accent); line-height: 1; }
.intro-stats span { font-size: 13px; color: var(--muted); }
.intro-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; width: 100%; margin-top: 56px; text-align: left; }
.intro-feats div { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: rgba(23, 27, 34, .72); border: 1px solid #252B35; backdrop-filter: blur(6px); }
.intro-feats i { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(198, 244, 50, .12); color: var(--accent); margin-bottom: 6px; }
.intro-feats i svg { width: 21px; height: 21px; }
.intro-feats b { font-size: 16px; }
.intro-feats span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.intro-free { width: 100%; margin-top: 40px; text-align: left; }
.intro-free > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.if-card { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--surface); border: 1px solid #252B35; }
.if-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.if-card b { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: 14px; background: linear-gradient(transparent, rgba(8, 10, 14, .92)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro-step { max-width: 860px; margin: 0 auto; padding-top: clamp(16px, 5vh, 48px); display: flex; flex-direction: column; }
.intro-step h2 { font-family: var(--display); font-size: clamp(34px, 6vw, 54px); margin: 6px 0 0; line-height: 1.02; }
.intro-step .intro-sub { margin: 12px 0 0; }
.intro-count { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
#intro-q { margin-top: 22px; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 0 16px; font-size: 16px; }
.intro-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 16px; padding-bottom: 96px; }
.ig { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; transition: transform .12s, border-color .12s; }
.ig:hover { border-color: #3A4250; transform: translateY(-1px); }
.ig .avatar.lg { width: 64px; height: 64px; border-radius: 16px; }
.ig span:last-child { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ig.on { border-color: var(--accent); background: rgba(198, 244, 50, .08); box-shadow: 0 0 0 1px var(--accent) inset; }
.ig.on::after { content: '✓'; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #0E1116; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.intro-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px max(20px, calc((100vw - 860px) / 2)) calc(14px + env(safe-area-inset-bottom)); background: rgba(14, 17, 22, .92); backdrop-filter: blur(10px); border-top: 1px solid var(--line-soft); font-weight: 600; color: var(--text-2); }
.intro-done { text-align: center; align-items: center; padding-top: clamp(48px, 14vh, 140px); }
.intro-done .intro-sub { margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) { .intro-pill i { animation: none; } .ig { transition: none; } }

/* Profiilikuvan valinta */
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.av-opt { position: relative; aspect-ratio: 1; border-radius: 14px; border: 2px solid transparent; background: var(--surface-2); padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.av-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-opt:hover { border-color: #3A4250; }
.av-opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(198, 244, 50, .25); }
.av-ini { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--text); }
.av-tag { position: absolute; left: 0; right: 0; bottom: 0; font-style: normal; font-size: 10px; font-weight: 700; text-align: center; padding: 2px 0; background: rgba(8, 10, 14, .75); color: #fff; }
.av-up { flex-direction: column; gap: 2px; color: var(--text-2); font-size: 11px; font-weight: 600; border: 2px dashed #3A4250; background: none; }
.av-up.busy { opacity: .6; pointer-events: none; }

/* Klikattavat suositukset */
.sug-open { border: 0; padding: 0; cursor: pointer; display: block; width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.link-btn:hover { color: var(--accent); }
.pop-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.pop-open:hover .title { color: var(--accent); }

/* Aloitussivu: leveämpi, iso kirjautumisnappi, esikatselu isolla näytöllä */
.intro-in { max-width: 1320px; padding: 20px clamp(20px, 4vw, 56px) 56px; }
.intro-top { min-height: 64px; }
.intro .intro-signin { min-height: 46px; padding: 0 24px; font-size: 16px; font-weight: 700; border-radius: 12px; background: rgba(23, 27, 34, .85); border: 1px solid #3A4250; color: var(--text); }
.intro .intro-signin:hover { border-color: var(--accent); }
.intro-copy { display: flex; flex-direction: column; align-items: center; }
.intro-preview { display: none; }
@media (min-width: 1100px) {
  .intro-hero.has-prev { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .9fr); column-gap: 64px; align-items: center; text-align: left; padding-top: clamp(40px, 9vh, 110px); }
  .intro-hero.has-prev .intro-copy { align-items: flex-start; }
  .intro-hero.has-prev h1 { max-width: none; font-size: clamp(64px, 6.4vw, 112px); }
  .intro-hero.has-prev .intro-sub { margin-left: 0; font-size: 20px; }
  .intro-hero.has-prev .intro-cta { justify-content: flex-start; }
  .intro-hero.has-prev .intro-stats, .intro-hero.has-prev .intro-feats, .intro-hero.has-prev .intro-free { grid-column: 1 / -1; }
  .intro-hero.has-prev .intro-stats { justify-content: flex-start; margin-top: 56px; }
  .intro-preview { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: rgba(23, 27, 34, .78); border: 1px solid #2A313C; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(198, 244, 50, .05); backdrop-filter: blur(8px); transform: rotate(1.2deg); }
  .intro-preview .label { margin: 0 0 4px; }
  .ip-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
  .ip-row .avatar { width: 40px; height: 40px; border-radius: 11px; }
  .ip-row span { display: flex; flex-direction: column; min-width: 0; }
  .ip-row b { font-size: 15px;
  }
  .ip-row b.mono { font-family: var(--mono); letter-spacing: .03em; }
  .ip-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ip-row small { font-size: 12px; color: var(--muted); text-transform: capitalize; }
  .intro-feats div { padding: 22px; }
}

/* Aloitus ilman seurattuja pelejä */
.hero-setup { display: grid; grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5) var(--s5); background:
  radial-gradient(60% 120% at 0% 0%, rgba(198, 244, 50, .10), transparent 60%), radial-gradient(50% 120% at 100% 100%, rgba(139, 92, 246, .12), transparent 60%), var(--surface); }
.hero-setup h2 { font-size: 30px; margin-top: 2px; }
.hero-setup .mission { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.hero-setup p:last-child { max-width: 560px; }
.hero-setup .step:first-child { border-color: var(--accent); }
@media (min-width: 1100px) { .hero-setup { grid-template-columns: 1fr minmax(340px, 420px); align-items: center; } .hero-setup .steps { grid-template-columns: 1fr; } }
.setup.slim { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); flex-wrap: wrap; }
.setup.slim span { color: var(--text-2); font-size: 14px; }
.qp { display: flex; flex-direction: column; gap: var(--s3); }
.qp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.qp-head h2 { margin: 0; font-family: var(--display); font-size: 24px; }
.qp-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.qp-grid { margin-top: 0; padding-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
/* Sivupalkin kirjautumisnappi ei kosketa reunaa */
@media (min-width: 900px) { .nav-me { margin-left: 0; margin-right: 0; } .nav .nav-signin { width: 100%; } .nav { overflow-x: hidden; } }

/* Steam-pelien kuvat: leveä kansikuva, varalla nimikirjaimet */
.pt-list .pt-img { width: 72px; height: 34px; border-radius: 6px; position: relative; background: var(--c, var(--surface-2)); }
.pt-img.no-img::after { content: attr(data-ini); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 14px; color: #fff; }
/* Profiilin alaosa: linkit vasemmalle, napit oikealle */
.profile-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-foot .fl-links { display: flex; gap: 16px; flex-wrap: wrap; }
.profile-foot .fl-btns { display: flex; gap: 8px; margin-left: auto; }
.pt-list .pt-img.cover { width: 34px; height: 46px; margin: 0 19px; }
.si-list .row { gap: 12px; }
.si-list .btn.busy { opacity: .6; pointer-events: none; }

/* Profiilin seuratut pelit */
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.fg { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); text-align: left; min-width: 0; }
.fg:hover { border-color: #3A4250; }
.fg span:last-child { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kalenterin pelisivunappi */
.cal-gamebtn { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.cal-gamebtn .avatar { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }

/* Trendihistoria */
.tr-chart { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 8px; }
.tr-chart svg { width: 100%; height: auto; overflow: visible; }
.tr-tabs { display: flex; gap: 6px; }
.tr-grid { stroke: var(--line-soft); stroke-width: 1; }
.tr-ax { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.tr-line path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.tr-line:hover path { stroke-width: 4; opacity: 1; }
.tr-lbl { font-size: 12px; font-weight: 700; font-family: var(--font); }
.disc-head { flex-wrap: wrap; }

/* ---------- Yhtenäinen asettelu (design pass) ----------
   Kaikilla sivuilla sama leveys ja otsikon paikka. Lukusivut (asetukset, profiili, peli…) ovat kapeampia,
   mutta alkavat samasta vasemmasta reunasta, joten otsikko ei hypi sivua vaihtaessa. */
@media (min-width: 1100px) {
  body.wide .main, body.wide .top-inner { max-width: 1320px; }
  body.narrow .main > * { max-width: 900px; width: 100%; }
  body[data-page="free"] .grid-2 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
/* Yksi korttityyli: korostus ohuella lime-viivalla, ei omalla taustavärillä. */
.board-group.pinned .board-row { background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); }
/* Kaksi otsikkotasoa: pienet kapiteelit (TODAY, PINNED) ja Barlow-osio-otsikot. */
.label, .day { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.discover .disc-head h2, .qp-head h2, .card > h2, .card-head h2, .setup h2 { font-family: var(--display); }
.card > h2 { font-size: 20px; }
.foot-r { display: inline-flex; align-items: center; gap: 12px; }
.mini-danger { background: none; border: 0; padding: 0; font-size: 12px; font-weight: 600; color: #FCA5A5; opacity: .7; cursor: pointer; }
.mini-danger:hover { opacity: 1; text-decoration: underline; }
.cal-note { align-self: center; margin-left: 6px; font-size: 12px; }
@media (min-width: 1100px) { .terms-gate { margin: 8px 0; max-width: 900px; } }

/* Kalenteritapahtuman lisätiedot */
.cal-item { position: relative; }
.cal-item-hit { position: absolute; inset: 0; background: none; border: 0; border-radius: inherit; cursor: pointer; z-index: 0; }
.cal-item > *:not(.cal-item-hit) { position: relative; z-index: 1; pointer-events: none; }
.cal-item a, .cal-item .cal-detail, .cal-item .votes, .cal-item .react-row { pointer-events: auto; }
.cal-item:hover { border-color: #3A4250; border-left-color: var(--c); }
.cal-src { display: flex; justify-content: space-between; gap: 8px; }
.cal-more { color: var(--accent); font-weight: 600; font-size: 12px; white-space: nowrap; }
.cal-sum { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.cal-detail { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 2px; cursor: default; }
.cal-body { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.cal-ai { background: linear-gradient(135deg, rgba(198, 244, 50, .08), rgba(139, 92, 246, .10)); border: 1px solid #2E3542; border-radius: 10px; padding: 10px 12px; }
.cal-ai-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--accent); text-transform: uppercase; }
.cal-ai p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.cal-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-notes li { font-size: 14px; line-height: 1.45; }
.cn-who { display: block; font-size: 12px; color: var(--muted); }
.cal-note-form { display: flex; gap: 8px; }
.cal-note-form input { flex: 1; min-width: 0; min-height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); padding: 0 12px; font-size: 14px; }
.err-line { color: #FCA5A5; font-size: 13px; margin: 0; }

/* Toimintorivi: yksi rivi, vähemmän nappeja */
.action-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-left { display: flex; gap: 6px; }
.ab-vote { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--text-2); }
.ab-vote b { font-weight: 700; color: var(--muted); }
.ab-vote:hover { border-color: #3A4250; color: var(--text); }
.ab-vote.works[aria-pressed="true"] { border-color: #34D399; background: rgba(52, 211, 153, .12); color: #A7F3D0; }
.ab-vote.expired[aria-pressed="true"] { border-color: #F87171; background: rgba(248, 113, 113, .12); color: #FECACA; }
.ab-status { font-size: 12px; color: var(--muted); }
.ab-status.ok { color: #6EE7B7; } .ab-status.bad { color: #FCA5A5; } .ab-status.warn { color: var(--warn); }
.ab-right { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ab-feel, .ab-add { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 9px; border-radius: 999px; border: 1px solid transparent; background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.ab-feel b { font-size: 12px; }
.ab-feel[aria-pressed="true"] { border-color: var(--accent); background: rgba(198, 244, 50, .1); }
.ab-add { color: var(--muted); font-weight: 700; }
.ab-add:hover, .ab-feel:hover { border-color: #3A4250; }
.ab-more-wrap { position: relative; }
.ab-menu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 14px; background: #1B2029; border: 1px solid #323A47; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); white-space: nowrap; }
.ab-pick { font-size: 20px; width: 38px; height: 38px; border-radius: 10px; border: 0; background: none; }
.ab-pick:hover, .ab-pick[aria-pressed="true"] { background: var(--surface-2); }
.ab-sep { width: 1px; height: 24px; background: #323A47; margin: 0 4px; }
.ab-troll { border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 0 8px; height: 38px; border-radius: 10px; }
.ab-troll:hover, .ab-troll[aria-pressed="true"] { background: rgba(248, 113, 113, .12); color: #FECACA; }

/* Osioitu sivu (profiili, asetukset) */
.sec-page { display: flex; flex-direction: column; gap: var(--s5); }
.sec-nav { display: none; }
.sec-body { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.sec-group { display: flex; flex-direction: column; gap: var(--s3); scroll-margin-top: 90px; }
.sec-h { margin: 0; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sec-hint { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
@media (min-width: 1100px) {
  .sec-page { display: grid; grid-template-columns: 200px minmax(0, 820px); gap: 48px; align-items: start; }
  .sec-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; }
  .sec-link { text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-size: 14px; font-weight: 600; }
  .sec-link:hover { background: var(--surface); color: var(--text); }
}
.fg-cos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toast-btn { margin-left: 10px; background: none; border: 0; color: #3F6212; text-decoration: underline; font-weight: 700; font-size: inherit; cursor: pointer; padding: 0; }

/* Läpikäynnin korjaukset */
/* Puhelimella sesonkikoriste peitti nappeja (esim. Claim): näytetään vain yläpalkissa ja työpöydän sivupalkissa. */
@media (max-width: 899px) { .season-deco { display: none; } }
.cal-filters .chip { flex: none; }
/* Toimintorivi puhelimella: tila omalle rivilleen pienenä, reaktiot samalle riville äänien kanssa. */
@media (max-width: 520px) {
  .action-bar { row-gap: 4px; }
  .ab-status { order: 3; flex-basis: 100%; }
  .ab-right { margin-left: auto; }
}
.sc-empty { margin: 0; }

/* Puhelin: Settings yläpalkin rattaasta, alapalkissa 5 kohtaa */
.top-gear { display: none; }
@media (max-width: 899px) {
  .nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav .nav-settings { display: none; }
  .top-gear { display: inline-flex; color: var(--text-2); }
  .top-gear.on { color: var(--accent); }
}
/* Don't miss -kaista */
.dont-miss { display: flex; flex-direction: column; gap: 8px; }
.dont-miss h2 { margin: 0; font-family: var(--display); font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.dont-miss h2 span { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--warn); }
.dm-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.dm-card { flex: none; display: flex; align-items: center; gap: 10px; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid rgba(251, 191, 36, .35); color: var(--text); text-align: left; }
.dm-card:hover { border-color: var(--warn); }
.dm-card .who { display: flex; flex-direction: column; min-width: 0; }
.dm-card .t { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-card .m { font-size: 12px; color: var(--warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pelisivun ilmoitusasetukset kokoon taitettuna */
.notify-box summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); list-style: none; }
.notify-box summary::-webkit-details-marker { display: none; }
.notify-box summary::after { content: ' ▾'; color: var(--muted); }
.notify-box[open] summary::after { content: ' ▴'; }
/* Kummitus ja kurpitsat puhelimen yläpalkissa */
.top-deco { display: none; }
@media (max-width: 899px) {
  .top-deco { display: flex; align-items: flex-end; gap: 1px; flex-shrink: 0; height: 34px; pointer-events: none; }
  .top-deco .pumpkin { width: 22px; height: 19px; display: block; }
  .top-deco .pumpkin.p1 { display: none; }
  .top-deco .ghost { width: 22px; height: 27px; margin-bottom: 6px; animation: ghost-bob 2.8s ease-in-out infinite alternate; filter: drop-shadow(0 0 5px rgba(238, 240, 244, .35)); }
  .top-inner .titles { min-width: 0; }
  .top-inner .titles h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .top-deco .ghost { animation: none; } }

/* Kalenteri: yksi peli kerrallaan, viikko/kuukausi */
.cal-games { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cal-gtab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; }
.cal-gtab .avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.cal-gtab b { font-size: 11px; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; }
.cal-gtab:hover { border-color: #3A4250; }
.cal-gtab[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: rgba(198, 244, 50, .08); }
.seg-mini { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); margin-left: 6px; }
.seg-mini button { border: 0; border-radius: 7px; padding: 5px 11px; background: none; color: var(--text-2); font-size: 12px; font-weight: 700; }
.seg-mini button[aria-pressed="true"] { background: var(--accent); color: #0E1116; }
.cal-week { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 900px) { .cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .cw-day { min-height: 360px; } }
.cw-day { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.cw-day.today { border-color: rgba(198, 244, 50, .5); }
.cw-day.sel { box-shadow: inset 0 0 0 1px var(--accent); }
.cw-head { display: flex; align-items: baseline; gap: 6px; background: none; border: 0; padding: 0; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cw-head b { font-family: var(--display); font-size: 20px; color: var(--text); letter-spacing: 0; }
.cw-day.today .cw-head b { color: var(--accent); }
.cw-list { display: flex; flex-direction: column; gap: 4px; }
.cw-ev { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 6px 8px; border-radius: 8px; border: 0; border-left: 3px solid var(--c); background: var(--surface-2); color: var(--text); min-width: 0; }
.cw-ev:hover { background: #262C36; }
.cw-t { font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cw-m { font-size: 11px; color: var(--muted); }
.cw-none { font-size: 12px; color: #4B5361; }
@media (max-width: 899px) { .cw-day { flex-direction: row; align-items: flex-start; } .cw-head { flex-direction: column; align-items: center; min-width: 40px; } .cw-list { flex: 1; } }
.cw-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.cw-all-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.cw-all .cw-ev { flex-direction: row; align-items: baseline; gap: 8px; }
.cal-gtab > span:not(.avatar) { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-gtab.empty { opacity: .55; }
.cal-gtab.empty:hover, .cal-gtab.empty[aria-pressed="true"] { opacity: 1; }
.cal-controls select { max-width: 220px; }
/* Kalenterin pelivalinta */
.cal-pick #cp-q, #dh-q { width: 100%; box-sizing: border-box; color: inherit; font-family: inherit; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); padding: 0 12px; font-size: 14px; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 360px; overflow-y: auto; }
.cp-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; text-align: left; min-width: 0; opacity: .6; }
.cp-item span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-item[aria-pressed="true"] { opacity: 1; border-color: var(--accent); color: var(--text); background: rgba(198, 244, 50, .08); }
.cal-in { margin-bottom: 8px; }
/* Kummitus väistää osoitinta */
.season-deco .ghost, .top-deco .ghost { will-change: translate, rotate; }
/* Kalenterin yläosa pysyy paikallaan pelin vaihtuessa */
.cal-controls select { width: 220px; }
.cal-gamebar { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.cal-gamebar .avatar { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.cal-gamebar b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-gamebar .btn:first-of-type { margin-left: auto; }
.cal-games { scroll-padding: 0 40px; }

/* Zombikummitus-kursori (Halloween): hiiri liian lähellä kummitusta */
body.zombie-cursor, body.zombie-cursor *:not(a):not(button):not(input):not(select):not(label) { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2240%22%20viewBox%3D%220%200%2036%2040%22%3E%3Cpath%20d%3D%22M3%2017C3%208%209%202%2017%202s14%206%2014%2015v20l-4-3-4%204-5-4-5%204-4-4-4%203z%22%20fill%3D%22%237FC56B%22%20stroke%3D%22%231B3A12%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M8%2013l5%205M13%2013l-5%205%22%20stroke%3D%22%231B1F27%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22/%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%2215.5%22%20r%3D%223.4%22%20fill%3D%22%23F3F4EE%22%20stroke%3D%22%231B1F27%22%20stroke-width%3D%221.6%22/%3E%3Ccircle%20cx%3D%2223.6%22%20cy%3D%2216%22%20r%3D%221.4%22%20fill%3D%22%23B91C1C%22/%3E%3Cpath%20d%3D%22M11%2025q6%204%2012%200%22%20fill%3D%22none%22%20stroke%3D%22%231B1F27%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M14%2024.5v2.4M18%2025.6v2.4%22%20stroke%3D%22%23F3F4EE%22%20stroke-width%3D%221.6%22/%3E%3Cpath%20d%3D%22M20%206l3%202-2%202%203%202%22%20fill%3D%22none%22%20stroke%3D%22%231B3A12%22%20stroke-width%3D%221.4%22/%3E%3C/svg%3E") 6 4, auto !important; }
.ghost .eye, .ghost .mouth { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.ghost.scared .eye { transform: scale(1.25, 1.35); }
.ghost.scared .mouth { transform: scale(1.5, 1.9); }
/* Discord-liitokset */
.dh { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.dh-head { display: flex; align-items: center; gap: 10px; }
.dh-head .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dh-head small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-ico { width: 32px; height: 32px; border-radius: 9px; background: #5865F2; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dh-body { display: flex; flex-direction: column; gap: 10px; }

/* Spook the spook: leikki avautuu, kun hämähäkinseitti pyyhitään yläkulmasta (ghostplay.js) */
.gp-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(5, 7, 10, .72); display: grid; place-items: center; padding: 16px; animation: gp-in .18s ease-out; }
.gp-overlay.closing { opacity: 0; transition: opacity .15s; }
@keyframes gp-in { from { opacity: 0; } }
.gp { width: min(680px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.gp-head { display: flex; align-items: flex-start; gap: 12px; }
.gp-head > div { flex: 1; }
.gp-head h2 { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.1; }
.gp-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.gp-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 14px; }
.gp-stage { position: relative; height: 380px; border-radius: 14px; overflow: hidden; touch-action: none; user-select: none;
  background: radial-gradient(120% 80% at 50% 0%, #2A2350 0%, #161A33 45%, #0C0F1C 100%); }
.gp-stage[data-tool="tickle"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Ctext%20x%3D%272%27%20y%3D%2726%27%20font-size%3D%2724%27%3E%F0%9F%AA%B6%3C/text%3E%3C/svg%3E") 4 26, auto; }
.gp-stage[data-tool="boo"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Ctext%20x%3D%272%27%20y%3D%2726%27%20font-size%3D%2724%27%3E%F0%9F%93%A2%3C/text%3E%3C/svg%3E") 4 16, auto; }
.gp-stage[data-tool="candy"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Ctext%20x%3D%272%27%20y%3D%2726%27%20font-size%3D%2724%27%3E%F0%9F%8D%AC%3C/text%3E%3C/svg%3E") 14 14, auto; }
.gp-stage[data-tool="pet"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Ctext%20x%3D%272%27%20y%3D%2726%27%20font-size%3D%2724%27%3E%E2%9C%8B%3C/text%3E%3C/svg%3E") 14 14, auto; }
.gp-moon { position: absolute; right: 48px; top: 30px; width: 54px; height: 54px; border-radius: 50%; background: #FDF6D8; box-shadow: 0 0 40px 8px rgba(253, 246, 216, .25); }
.gp-moon::after { content: ''; position: absolute; left: 12px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.08); box-shadow: 18px 10px 0 -2px rgba(0,0,0,.07), 8px 22px 0 -3px rgba(0,0,0,.06); }
.gp-stars { position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 28% 8%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 44% 22%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 62% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 72% 30%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 20% 36%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 52% 40%, #fff 50%, transparent 52%), radial-gradient(1.3px 1.3px at 90% 44%, #fff 50%, transparent 52%); opacity: .7; }
.gp-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(to top, rgba(14, 17, 22, .95), rgba(14, 17, 22, 0)); pointer-events: none; }
.gp-pumpkin { position: absolute; bottom: 8px; width: 74px; z-index: 2; pointer-events: none; }
.gp-pumpkin.left { left: 14px; } .gp-pumpkin.right { right: 14px; }
.gp-pumpkin svg { display: block; width: 100%; filter: drop-shadow(0 0 14px rgba(249, 115, 22, .35)); }
.gp-ghost { position: absolute; left: 0; top: 0; width: 80px; height: 96px; z-index: 1; transform-origin: 50% 60%; pointer-events: none; will-change: transform; filter: drop-shadow(0 0 12px rgba(238, 240, 244, .4)); }
.gp-ghost svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gp-body { fill: #EEF0F4; transition: fill .3s; }
.gp-ghost[data-mood="angry"] .gp-body { fill: #FBD0D0; }
.gp-ghost[data-mood="happy"] .gp-body { fill: #FFF4F8; }
.gp-ghost.rush { animation: gp-rainbow .6s linear infinite; }
@keyframes gp-rainbow { to { filter: hue-rotate(360deg) drop-shadow(0 0 16px #F472B6); } }
.gp-ghost.rush .gp-body { fill: #FDE68A; }
.gp-cheek { opacity: var(--cheek, .55); transition: opacity .3s; }
.gp-blink { transform-box: fill-box; transform-origin: center; animation: gp-blink 4.2s infinite; }
@keyframes gp-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.gp-chomp { transform-box: fill-box; transform-origin: center; animation: gp-chomp .18s ease-in-out infinite alternate; }
@keyframes gp-chomp { to { transform: scaleY(.2); } }
.gp-bubble { position: absolute; z-index: 3; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: #fff; color: #1B1F27; font-weight: 700; font-size: 13px; pointer-events: none; white-space: nowrap; animation: gp-float 1.3s ease-out forwards; }
.gp-bubble.big { font-size: 16px; }
.gp-bubble.huge { font-size: 24px; font-family: var(--display); background: #F97316; color: #1B1F27; }
.gp-bubble.heart { background: none; color: #F472B6; font-size: 20px; padding: 0; text-shadow: 0 0 8px rgba(244, 114, 182, .6); }
@keyframes gp-float { from { opacity: 0; margin-top: 8px; } 15% { opacity: 1; } to { opacity: 0; margin-top: -36px; } }
.gp-candy { position: absolute; left: 0; top: 0; z-index: 1; font-size: 22px; pointer-events: none; }
.gp-tip { position: absolute; left: 12px; top: 10px; margin: 0; max-width: 60%; font-size: 12px; color: rgba(230, 232, 236, .75); pointer-events: none; }
.gp-shake { animation: gp-shake .4s; }
@keyframes gp-shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 3px); } 80% { transform: translate(3px, -1px); } }
.gp-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gp-tool { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font: 600 14px var(--font); cursor: pointer; }
.gp-tool span { font-size: 18px; }
.gp-tool[aria-pressed="true"] { background: var(--accent); color: #0E1116; border-color: var(--accent); }
.gp-tool:focus-visible, .gp-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gp-stats { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .gp-ghost.rush { animation: none; } .gp-blink { animation: none; } }

/* Sivupalkin Discord-kortti (vain työpöydällä) */
.nav-promo { display: none; }
@media (min-width: 900px) {
  .nav-promo { display: flex; align-items: stretch; margin: auto 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
  .season-deco + .nav-promo { margin-top: 4px; }
  .nav-promo + .nav-settings { margin-top: 8px; }
  .np-main { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; min-width: 0; }
  .np-main:hover { background: var(--surface-2); }
  .np-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #5865F2; color: #fff; }
  .np-txt { display: flex; flex-direction: column; min-width: 0; }
  .np-txt b { font-size: 13px; }
  .np-txt small { font-size: 11px; color: var(--muted); line-height: 1.3; }
  .np-x { flex: none; width: 28px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; }
  .np-x:hover { color: var(--text); background: var(--surface-2); }
  .np-main:focus-visible, .np-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}

/* Kaikki dropit -sivu */
.dl-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dl-bar .hint { margin: 0; }
.dl-list { padding: 0; overflow: hidden; }
.dl-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.dl-row:first-child { border-top: 0; }
.dl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-game { font-size: 12px; color: var(--muted); font-weight: 600; }
.dl-title { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.dl-title:hover { color: var(--accent); }
.dl-meta { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-on { font-size: 12px; color: var(--muted); }
.see-all.quiet-link { color: var(--muted); }

body[data-season="halloween"] .top.web-regrow::after { animation: web-regrow 3s ease-out; transform-origin: top right; }
@keyframes web-regrow { from { opacity: 0; transform: scale(.2) rotate(20deg); } 60% { opacity: .7; } to { opacity: 1; transform: none; } }

.blocked-list { display: flex; flex-direction: column; gap: 6px; }
.bl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.bl-row a { color: var(--text); font-weight: 600; text-decoration: none; }

/* Turnstile-bottitarkistus näkyy vain, jos Cloudflare pyytää varmistusta */
#ts-box { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; }
#ts-box:empty { display: none; }

/* I'm bored (työpöydän sivupalkki) */
/* Kelluva noppa (vain työpöydällä): avautuu nimeksi hiiren alla */
.dice-fab { display: none; }
@media (min-width: 900px) {
  .dice-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 0; height: 52px; padding: 0 13px; border-radius: 26px;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--accent); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.45);
    font: 700 14px var(--font); transition: gap .2s, padding .2s, background .2s, opacity .2s; opacity: .9; }
  .dice-fab svg { width: 26px; height: 26px; flex: none; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
  .dice-fab span { max-width: 0; overflow: hidden; white-space: nowrap; color: var(--text); transition: max-width .25s; }
  .dice-fab:hover, .dice-fab:focus-visible { opacity: 1; gap: 8px; padding-right: 18px; background: var(--surface); }
  .dice-fab:hover span, .dice-fab:focus-visible span { max-width: 120px; }
  .dice-fab:hover svg { transform: rotate(-18deg); }
  .dice-fab.roll svg { animation: dice-roll .5s ease-out; }
  .dice-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  body.intro-open .dice-fab { display: none; }
}
@keyframes dice-roll { 0% { transform: rotate(0); } 60% { transform: rotate(400deg) scale(1.15); } 100% { transform: rotate(360deg); } }
.bored-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(5, 7, 10, .66); display: grid; place-items: center; padding: 16px; animation: gp-in .15s ease-out; }
.bored { width: min(460px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.bored .bd-head { display: flex; align-items: center; justify-content: space-between; }
.bored .bd-head h2 { margin: 0; font-family: var(--display); font-size: 22px; }
.bored h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.bored p { margin: 0; color: var(--text-2); }
.bored .bd-meta { font-size: 13px; color: var(--muted); }
.bored .bd-art { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 7; background: var(--surface-2); }
.bored .bd-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bored .badge { align-self: flex-start; }
.bored .bd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.badge.t-maker { background: rgba(198, 244, 50, .14); color: var(--accent); }

/* Tutka-animaatio (intro ja About) */
.intro-radar { width: 132px; height: 132px; margin: 0 0 6px -10px; cursor: pointer; }
.about-radar { width: 96px; height: 96px; float: right; margin: -6px -6px 6px 12px; cursor: pointer; }
@media (min-width: 900px) { .intro-radar { width: 168px; height: 168px; } }
.bored .bd-more { font-size: 13px; color: var(--muted); text-decoration: none; }
.bored .bd-more:hover { color: var(--accent); }
@media (min-width: 900px) { #main { padding-bottom: 90px; } }

.bored .bd-wish { display: flex; gap: 8px; }
.bored .bd-wish input { flex: 1; min-height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); padding: 0 12px; font: inherit; }
.bored .bd-wish .btn { min-width: 48px; font-size: 18px; }
.bored .bd-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.bored .bd-ideas .chip { cursor: pointer; border: 1px solid var(--line); background: none; color: var(--text-2); border-radius: 999px; padding: 4px 10px; font: 600 12px var(--font); }
.bored .bd-ideas .chip:hover { border-color: var(--accent); color: var(--text); }
.bored .bd-understood { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bored .bd-understood span { border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--text-2); }
.bored .bd-body { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.bored .bd-why { font-size: 13px; color: var(--accent); }
.bored .bd-game { display: flex; align-items: center; gap: 12px; }
.bored .bd-game h3 { margin: 0; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.team .codebox code { font-size: 13px; word-break: break-all; }
.team .who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.team .avatar.sm { color: var(--text); background: var(--surface-2); overflow: hidden; }

/* ---------- Tarinat ---------- */
.stories { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 6px; margin-bottom: var(--s3); scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: 0 0 auto; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--text); }
.story .ring { padding: 3px; border-radius: 20px; background: var(--line); transition: transform .15s; }
.story.fresh .ring { background: conic-gradient(from 210deg, var(--accent), #4ADE80, #22D3EE, var(--accent)); }
.story .ring .avatar { width: 60px; height: 60px; border-radius: 17px; border: 3px solid var(--bg); font-size: 18px; }
.story:hover .ring { transform: scale(1.05); }
.story .sname { font-size: 12px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.story.fresh .sname { color: var(--text); font-weight: 600; }
.story.add .avatar { background: var(--surface-2); color: var(--accent); font-size: 26px; font-weight: 400; display: grid; place-items: center; }
.story.add .ring { background: transparent; border: 2px dashed var(--line); padding: 1px; }

.no-scroll { overflow: hidden; }
.story-overlay { position: fixed; inset: 0; z-index: 220; background: rgba(3, 5, 8, .92); display: grid; place-items: center; animation: gp-in .15s ease-out; }
.story-view { position: relative; width: min(420px, 100vw); height: min(760px, 100dvh); background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 45%, #0b0e13), #0b0e13 70%); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
@media (max-width: 480px) { .story-view { border-radius: 0; } }
.sv-bg { position: absolute; inset: 0; opacity: .28; filter: blur(28px) saturate(1.3); transform: scale(1.2); }
.sv-bg img { width: 100%; height: 100%; object-fit: cover; }
.sv-bars { position: relative; z-index: 2; display: flex; gap: 4px; padding: 12px 12px 0; }
.sv-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; }
.sv-bars span.done i { width: 100%; }
.sv-bars i { display: block; height: 100%; width: 0; background: #fff; }
.sv-bars span.now i { animation: sv-fill linear forwards; }
@keyframes sv-fill { to { width: 100%; } }
.sv-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px; }
.sv-head .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sv-head b { font-size: 15px; }
.sv-head small { font-size: 12px; color: rgba(255,255,255,.7); }
.sv-x { background: none; border: 0; color: #fff; font-size: 20px; padding: 6px 8px; }
.sv-tap { position: absolute; top: 70px; bottom: 120px; z-index: 1; width: 35%; background: none; border: 0; padding: 0; cursor: pointer; }
.sv-tap.prev { left: 0; } .sv-tap.next { right: 0; width: 65%; }
.sv-body { position: relative; z-index: 2; margin-top: auto; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.sv-body > * { pointer-events: auto; }
.sv-body .badge { align-self: flex-start; }
.sv-body h2 { margin: 0; font-family: var(--display); font-size: 26px; line-height: 1.15; }
.sv-body p { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.45; }
.sv-body .media { border-radius: 14px; }
.sv-meta { font-size: 13px !important; color: #FBBF24 !important; font-weight: 600; }
.sv-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Kortit: tekijä, valikko, iso kuva ja video ---------- */
.card-head .name.linky { background: none; border: 0; padding: 0; color: var(--text); text-align: left; max-width: 100%; cursor: pointer; }
.card-head .name.linky:hover { text-decoration: underline; }
.card-head .time .official { color: #60A5FA; text-decoration: none; font-weight: 600; }
.ch-follow { background: none; border: 0; color: var(--accent); font-weight: 700; font-size: 13px; padding: 4px 6px; white-space: nowrap; }
.ch-follow:hover { text-decoration: underline; }
.card-menu-wrap { position: relative; }
.ch-more { background: none; border: 0; color: var(--muted); font-size: 14px; letter-spacing: 1px; padding: 4px 6px; border-radius: 8px; line-height: 1; }
.ch-more:hover, .ch-more[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.card-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.card-menu button { background: none; border: 0; color: var(--text); text-align: left; padding: 9px 10px; border-radius: 8px; font-size: 14px; }
.card-menu button:hover { background: var(--surface); }
.card .media { display: block; margin: 0 calc(-1 * var(--s4)); background: #000; overflow: hidden; max-height: 380px; }
.card .media img { display: block; width: 100%; max-height: 380px; object-fit: cover; }
.media.video { position: relative; aspect-ratio: 16 / 9; border: 0; padding: 0; width: auto; cursor: pointer; }
.sv-body .media.video, .story-view .media { margin: 0; }
.media.video img, .media.video .vph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-height: none; }
.media.video .vph { background: linear-gradient(135deg, #3b0764, #111827); }
.media.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media.video .play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 68px; height: 48px; border-radius: 14px; background: rgba(15, 17, 22, .82); color: #fff; display: grid; place-items: center; transition: background .15s, scale .15s; }
.media.video .play svg { width: 28px; height: 28px; }
.media.video:hover .play { background: #DC2626; scale: 1.06; }
.media.video .vsrc { position: absolute; left: 10px; bottom: 10px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.7); color: #fff; padding: 3px 7px; border-radius: 6px; }

/* "Olet nähnyt kaiken uuden" */
.caught-up { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: var(--s4) var(--s3); margin: var(--s2) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.caught-up span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.caught-up b { font-size: 16px; }
.caught-up small { font-size: 13px; color: var(--muted); }

/* Sponsoroitu */
.card.sponsored .time { font-weight: 600; }
.spon-cta { display: flex; align-items: center; gap: var(--s3); margin: 0 calc(-1 * var(--s4)) calc(-1 * var(--s4)); padding: 10px var(--s4); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.spon-cta span { flex: 1; font-size: 13px; color: var(--muted); }
.card.sponsored .media { margin-bottom: calc(-1 * var(--s3)); }

/* Sivupalkki: koneella "Ending soon" ja studiot, puhelimessa "Don't miss" -rivi */
.rail-card.desk-only { display: none; }
.studio-row .avatar { text-decoration: none; color: #111; font-weight: 700; }
.studio-row .t { color: var(--text); text-decoration: none; }
.studio-row .t:hover { color: var(--accent); }
@media (min-width: 1100px) {
  .rail-card.desk-only { display: flex; }
  .dont-miss { display: none; }
  .rail-card.ending { border-color: color-mix(in srgb, #FBBF24 40%, var(--line)); }
}

/* ---------- Studiosivu ---------- */
.org-page { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.org-cover { height: 140px; color: rgba(255,255,255,.18); background: radial-gradient(circle at 82% 50%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%), linear-gradient(120deg, color-mix(in srgb, var(--oc) 70%, #0b0e13), #0b0e13); }
.org-cover svg { width: 100%; height: 100%; display: block; }
.org-id { position: relative; padding: 0 var(--s4) var(--s3); display: flex; flex-direction: column; gap: 4px; }
.avatar.xl { width: 96px; height: 96px; border-radius: 24px; font-size: 32px; margin-top: -48px; border: 4px solid var(--surface); color: #111; font-weight: 800; }
.org-actions { position: absolute; right: var(--s4); top: var(--s3); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.org-id h1 { margin: 6px 0 0; font-family: var(--display); font-size: 26px; display: flex; align-items: center; gap: 6px; }
.org-sub { margin: 0; color: var(--muted); font-size: 14px; }
.org-about { margin: 6px 0 0; font-size: 15px; }
.org-stats { margin: 6px 0 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.org-stats b { color: var(--text); }
.org-stats .dot { opacity: .6; }
.org-tabs { display: flex; gap: 4px; padding: 0 var(--s3); border-top: 1px solid var(--line); }
.org-tabs button { background: none; border: 0; color: var(--muted); font-weight: 700; padding: 12px 14px; border-bottom: 3px solid transparent; }
.org-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.og-games { gap: 0; padding: var(--s2) var(--s4); }
.og-game { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.og-game:last-child { border-bottom: 0; }
.og-game .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.og-game .t { font-weight: 700; font-size: 15px; background: none; border: 0; padding: 0; color: var(--text); text-align: left; }
.og-game .m { font-size: 13px; color: var(--muted); }
.linky { cursor: pointer; }
@media (max-width: 560px) { .org-actions { position: static; justify-content: flex-start; margin-top: 8px; order: 5; } }
.sv-hero { position: absolute; inset: 90px 0 auto; height: 45%; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.sv-hero .avatar { width: 132px; height: 132px; border-radius: 34px; font-size: 44px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }

/* Kuvat omassa koossaan, reunoilla sumennettu tausta; klikkaus suurentaa */
.media.pic { position: relative; display: flex; justify-content: center; align-items: center; border: 0; padding: 0; width: auto; cursor: zoom-in; background: #05070a; max-height: 340px; }
.media.pic .pic-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(26px) brightness(.45) saturate(1.2); }
.card .media.pic img, .media.pic img { position: relative; width: auto; max-width: 100%; max-height: 340px; height: auto; object-fit: contain; }
.sv-body .media.pic { border-radius: 14px; overflow: hidden; max-height: 300px; }
.zoom-overlay { position: fixed; inset: 0; z-index: 240; background: rgba(3, 5, 8, .92); display: grid; place-items: center; padding: 20px; cursor: zoom-out; animation: gp-in .15s ease-out; }
.zoom { position: relative; margin: 0; max-width: min(1100px, 96vw); display: flex; flex-direction: column; gap: 10px; cursor: default; }
.zoom img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.zoom figcaption { color: #fff; font-weight: 600; text-align: center; }
.zoom .sv-x { position: absolute; top: -8px; right: -8px; background: rgba(0,0,0,.7); border-radius: 50%; width: 36px; height: 36px; }
.avatar.store-mark { background: #fff; padding: 6px; }
.avatar.store-mark img { width: 100%; height: 100%; object-fit: contain; }
.greep-optin { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; color: var(--text); }
.greep-optin img { border-radius: 10px; flex: none; }
.greep-optin span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.greep-optin small { color: var(--muted); font-size: 13px; }
.greep-optin i { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); display: grid; place-items: center; font-style: normal; font-weight: 800; color: var(--bg); flex: none; }
.greep-optin[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.greep-optin[aria-pressed="true"] i { background: var(--accent); border-color: var(--accent); }
.intro-done .greep-optin { max-width: 520px; margin: 4px auto 0; }

/* Kapeat sivut (profiili, peli, studio…) keskelle, myös otsikko */
@media (min-width: 1100px) {
  body.narrow .main, body.narrow .top-inner { max-width: 932px; }
}

/* ---------- Profiili ---------- */
.prof-cover { background: radial-gradient(circle at 82% 50%, color-mix(in srgb, var(--b2) 45%, transparent), transparent 55%), linear-gradient(120deg, var(--b1), #0b0e13); color: rgba(255,255,255,.2); }
.avatar.prof-av { background: var(--surface-2); color: var(--text); overflow: hidden; }
.prof-av img { width: 100%; height: 100%; object-fit: cover; }
.prof-page .title-list { margin-top: 4px; }
.prof-linked { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.prof-linked .chip { min-height: 28px; font-size: 12px; }
.prof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; border-top: 1px solid var(--line); }
.prof-stats div { display: flex; flex-direction: column; align-items: center; padding: 14px 6px; gap: 2px; }
.prof-stats div + div { border-left: 1px solid var(--line); }
.prof-stats b { font-family: var(--display); font-size: 22px; }
.prof-stats span { font-size: 12px; color: var(--muted); text-align: center; }
.prof-fav { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.pf-game { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 8px; color: var(--text); font-size: 13px; font-weight: 600; text-align: center; }
.pf-game:hover { border-color: var(--accent); }
.pf-game .avatar.lg { width: 64px; height: 64px; border-radius: 16px; }
.pf-acts { display: flex; flex-direction: column; }
.pf-act { display: flex; align-items: center; gap: 12px; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 0; text-align: left; color: var(--text); }
.pf-act:last-child { border-bottom: 0; }
.pf-act .who { display: flex; flex-direction: column; min-width: 0; }
.pf-act .t { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-act .m { font-size: 12px; color: var(--muted); }
.pf-act:hover .t b { color: var(--accent); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 44px; height: 30px; border-radius: 8px; border: 2px solid transparent; background: linear-gradient(120deg, var(--b1), var(--b2)); padding: 0; }
.swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--bg); }
@media (max-width: 560px) { .prof-stats { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; } .prof-stats div:nth-child(odd) { border-left: 0; } .prof-stats div:nth-child(n+3) { border-top: 1px solid var(--line); } .prof-stats div:first-child:nth-last-child(odd) { grid-column: 1 / -1; } .prof-stats div:first-child:nth-last-child(odd) ~ div:nth-child(even) { border-left: 0; } .prof-stats div:first-child:nth-last-child(odd) ~ div:nth-child(odd) { border-left: 1px solid var(--line); } }
.prof-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.plink { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--text); text-decoration: none; font-size: 13px; }
.plink b { font-weight: 700; }
.plink span { color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plink:hover { border-color: var(--accent); }
.pe-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 12px; margin-top: 6px; }
.pe-link { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.pe-link input { min-width: 0; }
/* Suosikkipelien valinta */
.pe-sel { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pe-chosen { display: inline-flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 12px; padding: 5px 10px 5px 5px; color: var(--text); font-size: 13px; font-weight: 600; }
.pe-chosen .avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
.pe-chosen i { font-style: normal; color: var(--muted); }
.pe-chosen:hover i { color: #FCA5A5; }
#pe-q { margin-bottom: 8px; }
.pe-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-bottom: 8px; }
.pe-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px; color: var(--text); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.pe-tile:hover:not(:disabled) { border-color: var(--accent); }
.pe-tile:disabled { opacity: .4; }
.pe-tile .avatar.lg { width: 56px; height: 56px; border-radius: 14px; }
.pe-tile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Seuratut pelit profiilissa */
.prof-follows { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
.pf-follow { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--text); font-size: 12px; text-align: center; }
.pf-follow .avatar.lg { width: 64px; height: 64px; border-radius: 16px; transition: transform .15s; }
.pf-follow:hover .avatar { transform: scale(1.06); }
.pf-follow span { max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* WoW-hahmo */
.wow-card { border-top: 3px solid var(--cc); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 12%, var(--surface)), var(--surface) 55%); }
.wow-top { display: flex; align-items: center; gap: 14px; }
.wow-pic { width: 96px; height: 96px; border-radius: 16px; overflow: hidden; flex: none; border: 2px solid var(--cc); background: #000; }
.wow-pic img { width: 100%; height: 100%; object-fit: cover; }
.wow-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wow-name { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--cc); }
.wow-sub { font-size: 14px; color: var(--muted); }
.wow-guild { font-size: 14px; font-weight: 600; color: #4ADE80; }
.wow-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wow-stats div { background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; }
.wow-stats b { font-family: var(--display); font-size: 22px; }
.wow-stats span { font-size: 12px; color: var(--muted); }
.wow-links { display: flex; gap: 8px; flex-wrap: wrap; }
.wow-links a { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.wow-links a:hover { border-color: var(--cc); }

/* ---------- Yhdellä silmäyksellä ---------- */
.glance { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; padding: 5px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: -4px; }
.glance b { font-weight: 700; }
.glance .g-end { color: var(--muted); font-weight: 600; }
.glance .g-end::before { content: '·'; margin-right: 8px; color: var(--muted); }
.glance .g-end.soon { color: #FBBF24; }
.glance.g-free { background: color-mix(in srgb, #34D399 14%, var(--surface-2)); border-color: color-mix(in srgb, #34D399 35%, var(--line)); }
.glance.g-code { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.glance.g-drop { background: color-mix(in srgb, #A78BFA 14%, var(--surface-2)); border-color: color-mix(in srgb, #A78BFA 35%, var(--line)); }
.glance.g-event { background: color-mix(in srgb, #FB923C 14%, var(--surface-2)); border-color: color-mix(in srgb, #FB923C 35%, var(--line)); }
.glance.mini { padding: 3px 8px; font-size: 12px; white-space: nowrap; margin: 0; }
.glance.mini .g-ico { display: none; }
.card-body.clamp { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.more-link { align-self: flex-start; background: none; border: 0; padding: 0; margin-top: -8px; color: var(--accent); font-weight: 600; font-size: 13px; }

/* ---------- Syötteen asettelu ---------- */
.stream-bar { display: flex; justify-content: flex-end; }
.layout-switch { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.ls-btn { width: 34px; height: 28px; display: grid; place-items: center; background: none; border: 0; border-radius: 7px; color: var(--muted); padding: 0; }
.ls-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ls-btn[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); }
.stream.lay-list { gap: 0; }
.stream.lay-list .row-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-top-width: 0; cursor: pointer; }
.stream.lay-list .day + .row-item, .stream.lay-list .stream-bar + .day + .row-item { border-top-width: 1px; border-radius: 12px 12px 0 0; }
.stream.lay-list .row-item:hover { background: var(--surface-2); }
.stream.lay-list .day { margin: 14px 0 6px; }
.row-item .ri-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-item .ri-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-item .ri-meta { font-size: 12px; color: var(--muted); }
.row-item .avatar { flex: none; }
.t-code { display: inline-flex; align-items: center; gap: 6px; }
.t-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--accent); background: #0b0e13; padding: 4px 8px; border-radius: 8px; }
.stream.lay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.stream.lay-grid .span-all, .stream.lay-grid .tile-open { grid-column: 1 / -1; }
.stream.lay-grid .day { margin: 8px 0 -4px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-2px); }
.tile-media { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #0b0e13; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-media .avatar.lg { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.tile-media .tile-ini { font-family: var(--display); font-size: 34px; font-weight: 800; color: #111; }
.tile-media .badge { position: absolute; top: 8px; left: 8px; }
.tile-media .play.sm { position: absolute; width: 44px; height: 32px; border-radius: 10px; background: rgba(15,17,22,.82); color: #fff; display: grid; place-items: center; }
.tile-media .play.sm svg { width: 20px; height: 20px; }
.tile-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.tile-body .glance { font-size: 12px; padding: 3px 8px; margin: 0; }
.tile-body h3 { margin: 0; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-open { display: flex; flex-direction: column; gap: 6px; }
.tile-close { align-self: center; }
@media (max-width: 560px) { .stream.lay-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .row-item .glance.mini { display: none; } }
/* Alalaita */
.site-foot { margin-top: var(--s6); padding: var(--s5) 0 var(--s3); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s4); color: var(--muted); font-size: 13px; }
.sf-brand { display: flex; align-items: center; gap: 10px; }
.sf-brand img { border-radius: 8px; }
.sf-brand span { display: flex; flex-direction: column; }
.sf-brand b { color: var(--text); font-size: 15px; }
.sf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
.sf-cols div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sf-cols b { color: var(--text); font-size: 13px; margin-bottom: 2px; }
.sf-cols a, .sf-cols .link-btn { color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; text-align: left; }
.sf-cols a:hover, .sf-cols .link-btn:hover { color: var(--accent); }
.sf-small { margin: 0; font-size: 12px; opacity: .8; }
.pl-list { display: flex; flex-direction: column; gap: 6px; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.pl-row.on { cursor: pointer; }
.pl-name { font-weight: 700; min-width: 86px; }
.pl-user { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pl-ok { font-size: 12px; font-weight: 700; color: #4ADE80; }
.pl-tick { font-style: normal; color: var(--muted, #8b93a1); font-weight: 600; font-size: 12px; }
#pe-wow { width: 100%; }
.gp-stats { display: flex; flex-direction: column; gap: 3px; }
.gp-world { color: var(--text); font-weight: 600; }
/* Upotettu video: keskellä, koko leveydeltä (enintään 760 px), aina 16:9, pyöristetyt kulmat. Ei rajata korkeutta. */
.card .media.video { display: block; position: relative; width: 100%; max-width: 760px; max-height: none; margin: 4px auto 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 10px 30px rgba(0,0,0,.35); border: 1px solid var(--line); }
.card .media.video img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.card .media.video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); pointer-events: none; }
.card .media.video .play, .card .media.video .vsrc { z-index: 1; }
.card .media.video .play { width: 76px; height: 54px; border-radius: 16px; }
.card .media.video:hover img { filter: brightness(1.08); }
.gp-foot { display: flex; align-items: center; gap: 10px; }
.gp-foot .gp-stats { flex: 1; }
.gp-sound { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,12,18,.6); color: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.gp-sound:hover { background: rgba(10,12,18,.85); }
.gp-sound[aria-pressed="false"] { opacity: .75; }
/* Foorumiviestin toiminnot: reaktiot vasemmalla, poisto oikeassa reunassa */
.post-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pa-like, .pa-react, .pa-add { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; }
.pa-like[aria-pressed="true"], .pa-react[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.pa-like b, .pa-react b { font-weight: 700; }
.pa-count { font-size: 13px; color: var(--muted); padding: 0 6px; }
.pa-add { color: var(--muted); }
.pa-pick-wrap { position: relative; }
.pa-pick { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; display: flex; gap: 2px; padding: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.pa-pick button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 20px; transition: transform .1s; }
.pa-pick button:hover { transform: scale(1.25); }
.pa-pick button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.pa-text { background: none; border: 0; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 8px; }
.pa-text:hover { color: var(--text); background: var(--surface-2); }
.pa-text.flag[aria-pressed="true"] { color: #FBBF24; }
.pa-text.danger { color: #F87171; }
.pa-right { margin-left: auto; display: inline-flex; gap: 4px; }

/* ---------- Community ---------- */
.comm-switch { display: flex; gap: 6px; }
.comm-hero { flex-direction: row; align-items: center; gap: var(--s4); background: radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 50%), var(--surface); }
.comm-hero > div { flex: 1; }
.comm-hero h2 { margin: 0 0 4px; font-family: var(--display); font-size: 22px; }
.comm-hero p { margin: 0; color: var(--muted); }
.g-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.g-filters input { flex: 1; min-width: 180px; }
.g-kchips { margin-top: -4px; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.g-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; padding-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.g-card:hover { border-color: color-mix(in srgb, var(--b2) 60%, var(--line)); transform: translateY(-2px); }
.g-strip { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--b1), var(--b2)); }
.g-top { display: flex; align-items: center; gap: 12px; }
.g-who { display: flex; flex-direction: column; min-width: 0; }
.g-who b { font-size: 16px; display: flex; align-items: center; gap: 4px; }
.g-who small { color: var(--muted); font-size: 12px; }
.g-crest { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg, var(--b1), var(--b2)); text-shadow: 0 1px 3px rgba(0,0,0,.4); letter-spacing: .02em; }
.g-crest.xl { width: 96px; height: 96px; border-radius: 26px; font-size: 30px; margin-top: -48px; border: 4px solid var(--surface); }
.g-facts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.g-rec { align-self: flex-start; font-size: 12px; font-weight: 700; color: #4ADE80; background: color-mix(in srgb, #4ADE80 12%, transparent); border: 1px solid color-mix(in srgb, #4ADE80 35%, transparent); padding: 3px 10px; border-radius: 999px; }
.g-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.g-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-align: left; }
.g-kind:hover { border-color: var(--accent); }
.g-kind-ic { font-size: 28px; }
.g-kind b { font-size: 16px; }
.g-kind small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.g-time { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.g-time input { width: 130px; }
.g-page .org-actions .btn { white-space: nowrap; }
.g-ver { color: #60A5FA; font-weight: 600; }
.g-pending { font-weight: 700; color: #4ADE80; padding: 10px 4px; }
.g-stats b.ok { color: #4ADE80; }
.g-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.g-main, .g-side { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
@media (min-width: 1000px) { .g-cols { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } }
.g-about { white-space: pre-wrap; margin: 0; }
.g-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.g-days span { text-align: center; padding: 14px 0; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13px; border: 1px solid var(--line); }
.g-days span.on { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.g-event { position: relative; display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.g-event:last-child { border-bottom: 0; }
.g-date { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.g-date b { font-family: var(--display); font-size: 24px; line-height: 1; }
.g-date small { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.g-ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.g-ev-main h3 { margin: 0; font-size: 16px; }
.g-ev-main p { margin: 0; font-size: 13px; }
.g-ev-time, .g-ev-count { color: var(--muted); }
.g-ev-body { white-space: pre-wrap; }
.g-ev-who { display: flex; gap: 6px; flex-wrap: wrap; }
.g-ev-who span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #4ADE80 14%, var(--surface-2)); }
.g-ev-who span.maybe { background: color-mix(in srgb, #FBBF24 14%, var(--surface-2)); }
.g-rsvps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.g-rsvp { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; }
.g-rsvp[aria-pressed="true"].yes { background: color-mix(in srgb, #4ADE80 20%, var(--surface-2)); border-color: #4ADE80; }
.g-rsvp[aria-pressed="true"].maybe { background: color-mix(in srgb, #FBBF24 20%, var(--surface-2)); border-color: #FBBF24; }
.g-rsvp[aria-pressed="true"].no { background: color-mix(in srgb, #F87171 18%, var(--surface-2)); border-color: #F87171; }
.g-event .ch-more { position: absolute; top: 10px; right: 0; }
.g-news { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.g-news:last-child { border-bottom: 0; }
.g-news p { margin: 4px 0 0; white-space: pre-wrap; }
.g-news .mini-danger { align-self: flex-start; margin-top: 4px; }
.g-rank-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-rank-row div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: var(--surface-2); }
.g-rank-row b { font-family: var(--display); font-size: 18px; }
.g-rank-row span { font-size: 11px; color: var(--muted); }
.g-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.g-tags span { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #4ADE80 12%, var(--surface-2)); color: #86EFAC; }
.g-recruit p { margin: 0; white-space: pre-wrap; }
.g-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.g-roles div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: var(--surface-2); gap: 2px; }
.g-roles span { font-size: 12px; color: var(--muted); }
.g-roles b { font-family: var(--display); font-size: 22px; }
.g-roster { display: flex; flex-direction: column; }
.g-mem { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.g-mem:last-child { border-bottom: 0; }
.g-mem .who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.g-mem .t { font-weight: 700; color: var(--text); text-decoration: none; }
.g-mem .m { font-size: 12px; }
.g-mem .avatar { flex: none; text-decoration: none; overflow: hidden; }
.g-mem .avatar img { width: 100%; height: 100%; object-fit: cover; }
.g-app { padding: 8px 0; border-bottom: 1px solid var(--line); }
.g-app-msg { margin: 6px 0 0 58px; white-space: pre-wrap; font-size: 14px; }
@media (max-width: 560px) { .comm-hero { flex-direction: column; align-items: flex-start; } .g-days span { padding: 10px 0; font-size: 11px; } }
.g-filters input, .g-filters select, #pe-wow, .g-time input { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px var(--s3); color: var(--text); font: inherit; min-height: 42px; }
.g-filters input:focus, .g-filters select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.rail-row .g-crest { width: 36px; height: 36px; border-radius: 10px; font-size: 11px; }
/* Puhelimessa alapalkkiin mahtuu viisi: Forum löytyy Communityn kautta (ja toisin päin). */
@media (max-width: 899px) { .nav button[data-tab="forum"] { display: none; } }
@media (min-width: 900px) { .comm-switch { display: none; } }
.org-tabs { overflow-x: auto; scrollbar-width: none; } .org-tabs::-webkit-scrollbar { display: none; } .org-tabs button { white-space: nowrap; }
/* Steam-tilastot profiilissa */
.steam-top { display: flex; align-items: center; gap: 16px; }
.steam-lvl { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 24px; font-weight: 800; border: 3px solid #66C0F4; color: #fff; background: radial-gradient(circle, #1B2838, #0E141B); box-shadow: 0 0 20px rgba(102,192,244,.25); }
.steam-nums { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.steam-nums div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: var(--surface-2); }
.steam-nums b { font-family: var(--display); font-size: 20px; }
.steam-nums span { font-size: 12px; color: var(--muted); }
.steam-ach { display: flex; flex-direction: column; gap: 8px; }
.sa-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 64px; align-items: center; gap: 10px; font-size: 13px; }
.sa-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sa-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.sa-bar i { display: block; height: 100%; background: linear-gradient(90deg, #66C0F4, var(--accent)); }
.sa-n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .sa-row { grid-template-columns: minmax(0, 1fr) 70px 56px; } }
.g-form .field.gp { padding: 0; border: 0; background: none; box-shadow: none; }
/* Tietorivi: ilmaa reunoille */
.glance { padding: 6px 14px 6px 10px; gap: 8px; }
.glance.mini { padding: 3px 10px 3px 8px; }
/* Video upotettuna "syvennykseen": tumma painunut alusta, josta näkee, että sisältö tulee toisesta palvelusta */
.card .video-well { margin: 4px calc(-1 * var(--s4)) 0; padding: 10px var(--s4) var(--s4); background: #07090D; border-top: 1px solid #000; border-bottom: 1px solid rgba(255,255,255,.04); box-shadow: inset 0 10px 18px -8px rgba(0,0,0,.9), inset 0 -10px 18px -10px rgba(0,0,0,.8); display: flex; flex-direction: column; gap: 8px; }
.vw-src { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B7280; }
.card .video-well .media.video { margin: 0 auto; box-shadow: 0 6px 24px rgba(0,0,0,.6); border-color: #1A1F28; }
.sv-body .video-well { background: rgba(0,0,0,.45); padding: 8px; border-radius: 14px; }
.sv-body .video-well .media.video { margin: 0; }
/* Killan logo ja kansikuva */
.g-crest.has-img { background: #000; padding: 0; overflow: hidden; }
.g-crest.has-img img { width: 100%; height: 100%; object-fit: cover; }
.g-crest.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 20px; }
.org-cover.has-img { background-size: cover; background-position: center; }
.org-cover.has-img svg { display: none; }
.g-imgs { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.g-img-pick { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 10px; border: 1px dashed var(--line); border-radius: 14px; font-size: 12px; font-weight: 700; color: var(--muted); }
.g-img-pick:hover { border-color: var(--accent); color: var(--text); }
.g-img-pick.cover { flex: 1; min-width: 220px; min-height: 90px; background: var(--surface-2) center/cover; }
.g-img-pick.cover span { background: rgba(0,0,0,.6); padding: 4px 10px; border-radius: 999px; color: #fff; }
/* Rooliasetelma neljällä */
.g-roles.four { grid-template-columns: repeat(2, 1fr); }
/* Pelin rosteri */
.g-ig { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 16px; }
.g-ig-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; }
.g-ig-row span:nth-of-type(2) { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ig-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.g-ig-rank { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* Guild Hall */
.g-hall-hero { background: radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--b2) 35%, transparent), transparent 60%), linear-gradient(120deg, color-mix(in srgb, var(--b1) 55%, #0b0e13), #0b0e13); border-color: color-mix(in srgb, var(--b2) 35%, var(--line)); }
.gh-plaque { display: flex; align-items: center; gap: 16px; }
.gh-plaque h2 { margin: 0; font-family: var(--display); font-size: 26px; }
.gh-plaque p { margin: 2px 0 0; color: rgba(255,255,255,.75); font-size: 14px; }
.g-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.g-trophy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 16px 10px 12px; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, #FBBF24 12%, var(--surface-2)), var(--surface-2)); border: 1px solid color-mix(in srgb, #FBBF24 30%, var(--line)); }
.gt-ic { font-size: 34px; filter: drop-shadow(0 4px 10px rgba(251,191,36,.35)); }
.g-trophy b { font-size: 14px; }
.g-trophy small { font-size: 12px; color: var(--muted); }
.gt-at { font-size: 11px; color: #FBBF24; font-weight: 700; }
.gt-x { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--muted); font-size: 12px; }
.g-tro-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.g-tro-row { display: flex; gap: 8px; }
.g-tro-form input { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; color: var(--text); font: inherit; }
.g-tro-row input:first-child { width: 64px; text-align: center; font-size: 20px; }
.g-tro-row input:last-child { flex: 1; }
.g-raids { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.g-raid { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid #9CA3AF; }
.g-raid.h { border-left-color: #A855F7; } .g-raid.m { border-left-color: #F97316; }
.g-raid b { font-family: var(--display); font-size: 18px; }
.g-raid span { font-size: 12px; color: var(--muted); }
.gh-pos { width: 28px; text-align: center; font-size: 18px; }
/* Jäsenten keskustelu */
.gc-list { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; padding-right: 4px; }
.gc-msg { display: flex; gap: 10px; }
.gc-msg .avatar { flex: none; overflow: hidden; }
.gc-msg .avatar img { width: 100%; height: 100%; object-fit: cover; }
.gc-b { min-width: 0; }
.gc-h { font-size: 13px; }
.gc-h small { color: var(--muted); }
.gc-b p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gc-x { background: none; border: 0; color: var(--muted); font-size: 11px; }
.gc-form { display: flex; gap: 8px; align-items: flex-end; }
.gc-form textarea { flex: 1; resize: vertical; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; color: var(--text); font: inherit; }

.stat-link { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.stat-link:hover b { color: var(--accent, #C6F432); }
.stat-link:focus-visible { outline: 2px solid var(--accent, #C6F432); outline-offset: 4px; border-radius: 8px; }

/* Profiilin tilastolistat (kuten seuraajat somessa) */
.stat-link:disabled { cursor: default; }
.stat-link:disabled:hover b { color: inherit; }
.pl-back { all: unset; position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,.55); z-index: 80; backdrop-filter: blur(2px); }
.pl-sheet { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 64px)); display: flex; flex-direction: column; background: var(--card, #161a21); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; animation: plIn .16s ease-out; }
@keyframes plIn { from { opacity: 0; transform: translate(-50%, -48%); } }
.pl-head { display: flex; align-items: center; justify-content: center; position: relative; padding: 14px 48px; border-bottom: 1px solid var(--line); font-size: 16px; }
.pl-x { all: unset; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--muted); }
.pl-x:hover { background: rgba(255,255,255,.06); color: var(--text, #fff); }
.pl-note { margin: 10px 16px 0; font-size: 12px; }
.pl-note .linkish { all: unset; color: var(--accent, #C6F432); cursor: pointer; font-weight: 600; }
.pl-search { padding: 10px 16px; }
.pl-search input { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 10px var(--s3); color: var(--text); font: inherit; min-height: 42px; }
.pl-search input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.pl-list { overflow-y: auto; padding: 0 8px 10px; }
.pl-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 8px; border-radius: 12px; cursor: pointer; }
.pl-item:hover, .pl-item:focus-visible { background: rgba(255,255,255,.05); }
.pl-item .who { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.pl-item .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-item .m { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-item .m.snip { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-go { color: var(--muted); font-size: 20px; }
.pl-badge { font-size: 12px; color: #4ADE80; white-space: nowrap; }
@media (max-width: 560px) { .pl-sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; animation: plUp .18s ease-out; } @keyframes plUp { from { transform: translateY(30px); opacity: 0; } } }

.adm-manage { padding: 10px 12px 12px; margin: -2px 0 6px; background: rgba(255,255,255,.03); border: 1px solid var(--line-soft, var(--line)); border-radius: 12px; }
.adm-manage p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.adm-manage p b { color: var(--text); }
.adm-manage-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-manage-row input { flex: 1; min-width: 180px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; color: var(--text); font: inherit; }

/* Somemainen kortti: linkin esikatselu ja yhtenäinen alapalkki */
.link-prev { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); color: inherit; text-decoration: none; }
.link-prev:hover { background: rgba(255,255,255,.05); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.lp-ic { width: 32px; height: 32px; border-radius: 8px; background: #fff; display: grid; place-items: center; flex: none; overflow: hidden; }
.lp-ic img { width: 20px; height: 20px; }
.lp-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lp-txt b { font-size: 14px; }
.lp-txt small { color: var(--muted); font-size: 12px; }
.lp-go { color: var(--muted); }
.ab-meta { font-size: 12px; color: var(--muted); margin-right: 6px; white-space: nowrap; }
.ab-meta.warn { color: #FBBF24; }
.card-menu .danger { color: #FCA5A5; }
/* Julkaisun teksti saa olla oman pituisensa (vain .clamp lyhentää pitkät 7 riviin) */
.stream .card p.card-body { display: block; -webkit-line-clamp: unset; overflow: visible; }
.stream .card p.card-body.clamp { display: -webkit-box; -webkit-line-clamp: 7; overflow: hidden; }
/* Live now -nauha syötteen yläosassa */
.live-strip { margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #F43F5E 45%, var(--line)); border-radius: 16px; background: linear-gradient(180deg, rgba(244,63,94,.10), rgba(244,63,94,.03)); }
.ls-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #FDA4AF; margin-bottom: 10px; }
.ls-dot { width: 9px; height: 9px; border-radius: 50%; background: #F43F5E; box-shadow: 0 0 0 0 rgba(244,63,94,.7); animation: lsPulse 1.6s infinite; }
@keyframes lsPulse { 70% { box-shadow: 0 0 0 8px rgba(244,63,94,0); } 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); } }
@media (prefers-reduced-motion: reduce) { .ls-dot { animation: none; } }
.ls-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.ls-card { display: flex; align-items: center; gap: 10px; min-width: 260px; flex: 0 0 auto; padding: 10px 12px; border-radius: 12px; background: var(--card, #161a21); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.ls-card:hover { border-color: #F43F5E; }
.ls-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ls-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-txt small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ls-watch { font-size: 12px; font-weight: 700; color: #FDA4AF; white-space: nowrap; }

/* Julkaisun teksti kappaleina kuten alkuperäisessä */
.card-body { font-size: 14.5px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; }
.card-body p { margin: 0 0 .7em; }
.card-body p:last-child { margin-bottom: 0; }
.card-body .cb-h { margin: .9em 0 .35em; font-size: 15px; font-weight: 700; color: var(--text); }
.card-body .cb-h:first-child { margin-top: 0; }
.card-body b { color: var(--text); }
.stream .card .card-body p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.card-body.clamp { max-height: 15.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.link-prev.has-thumb { padding: 0; overflow: hidden; gap: 0; align-items: stretch; }
.lp-thumb { width: 184px; aspect-ratio: 460 / 215; object-fit: cover; flex: none; background: #0b0e12; }
.link-prev.has-thumb .lp-txt { padding: 10px 14px; justify-content: center; gap: 2px; }
.link-prev.has-thumb .lp-txt small:first-child { font-size: 11px; letter-spacing: .04em; }
.link-prev.has-thumb .lp-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .lp-thumb { width: 120px; } }

.shared-wrap { margin: 0 0 16px; }
.shared-wrap > .label { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
a.if-card { color: inherit; text-decoration: none; cursor: pointer; }
a.if-card:hover b { color: var(--accent); }