/* Hjem: hilsen, Kroken (det svarte apparatet), I dag, spill alene og
   Idle-Byen. Tett og rolig: grupper med hårstreker i stedet for kort i kort,
   én hovedhandling, og tall i Geist Mono. */

.hjem { display: flex; flex-direction: column; gap: 22px; }

/* hilsen */
.hj-head { display: flex; flex-direction: column; gap: 6px; }
.hj-date { font: 500 13px/1.2 var(--font-ui); color: var(--ink-3); }
.hj-date::first-letter { text-transform: uppercase; }
.hj-greet { font: var(--display-weight) clamp(28px, 2.4vw, 36px)/1.08 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }

/* rutenettet: Kroken og I dag øverst, spillene og byen under */
.hj-grid {
  display: grid; gap: 16px; align-items: stretch;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas: 'krok idag' 'spill kroker' 'spill byen';
}
.hj-krok { grid-area: krok; } .hj-idag { grid-area: idag; } .hj-spill { grid-area: spill; } .hj-byen { grid-area: byen; } .hj-kroker { grid-area: kroker; }
.hj-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.hj-h { font: var(--display-weight) 19px/1.1 var(--font-display); letter-spacing: -.025em; text-transform: lowercase; }
.hj-h-row small { font: 500 12.5px/1 var(--font-num); color: var(--ink-3); white-space: nowrap; }

/* ---------- Kroken ---------- */
.hj-krok { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px 22px 20px; border-radius: var(--r-xl); }
.kp-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kp-title { display: inline-flex; align-items: center; gap: 4px; min-width: 0; margin: -4px -6px; padding: 4px 6px; border-radius: 10px; text-align: left; }
.kp-title .ico { width: 20px; height: 20px; color: var(--app-ink-3); flex: none; transition: translate .2s var(--ease-out); }
.kp-title:hover .ico { translate: 3px 0; color: var(--app-ink-2); }
.kp-name { font: var(--display-weight) 26px/1 var(--font-display); letter-spacing: -.035em; text-transform: lowercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--font-ui); color: var(--app-ink-2); white-space: nowrap; }
.kp-live .dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px color-mix(in oklch, var(--good) 22%, transparent); }
.kp-ctl { display: contents; }

/* gulvet: samme prikkete flate som Kroken, i mørkt */
.kp-floor {
  border-radius: var(--r-m); padding: 14px 10px 10px;
  background: radial-gradient(oklch(100% 0 0 / .1) 1px, transparent 1.6px) 6px 6px / 18px 18px, var(--app-bg-2);
  box-shadow: inset 0 0 0 1px var(--app-line);
}
.kp-people { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.kp-people::-webkit-scrollbar { display: none; }
.kp-p { width: 70px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.kp-p.is-new { animation: popIn .45s var(--ease-pop) both; }
.kp-p .avatar { margin-bottom: 5px; }
.kp-p .avatar-disc { box-shadow: none; background: var(--app-bg-3); }
.kp-p b { max-width: 100%; font: 600 13px/1.15 var(--font-ui); color: var(--app-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-p small { font: 500 11.5px/1.15 var(--font-ui); color: var(--app-ink-3); white-space: nowrap; }
.kp-p.is-me b { color: var(--app-ink-2); }
.kp-p.is-busy:not(.is-ready) .avatar { opacity: .55; }
.kp-p.is-ready small { color: var(--good); }
.kp-p .avatar { filter: drop-shadow(0 6px 6px oklch(0% 0 0 / .32)); }
.kp-more-n { width: 52px; height: 52px; margin-bottom: 5px; border-radius: 50%; display: grid; place-items: center; background: oklch(100% 0 0 / .08); font: 600 15px/1 var(--font-num); color: var(--app-ink-2); }
/* den ledige plassen: inviter noen hit */
.kp-seat { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; color: var(--app-ink-2); }
.kp-seat-ring { width: 52px; height: 52px; margin-bottom: 5px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed oklch(100% 0 0 / .28); color: var(--app-ink-2); transition: border-color .2s, color .2s, background-color .2s; }
.kp-seat-ring .ico { width: 22px; height: 22px; }
.kp-seat:hover .kp-seat-ring { border-color: oklch(100% 0 0 / .55); color: var(--app-ink); background: oklch(100% 0 0 / .05); }
.kp-seat b { font: 600 13px/1.15 var(--font-ui); color: var(--app-ink); }
.kp-seat small { font: 500 11.5px/1.15 var(--font-ui); color: var(--app-ink-3); white-space: nowrap; }

.kp-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; padding-top: 16px; border-top: 1px solid var(--app-line); }
.kp-state { flex: 1 1 240px; font: 500 14px/1.45 var(--font-ui); color: var(--app-ink-2); text-wrap: pretty; }
.kp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-on-dark { background: oklch(100% 0 0 / .1); color: var(--app-ink); }

/* ---------- I dag ---------- */
.hj-idag { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 6px; }
.hj-idag .hj-h { margin-bottom: 6px; }
.id-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.hj-h + .id-row { border-top: 0; }
.id-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); }
.id-ico .ico { width: 20px; height: 20px; }
.id-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.id-text b { font: 600 14.5px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-text small { font: 500 12.5px/1.3 var(--font-ui); color: var(--ink-3); }
.id-flame { color: var(--line-2); }
.id-streak.is-lit .id-flame { background: color-mix(in oklab, var(--flame) 16%, var(--surface)); color: var(--flame-2); }
.id-streak.is-lit .id-flame .ico { fill: color-mix(in oklab, var(--flame) 70%, transparent); animation: flicker 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.id-week { display: flex; gap: 5px; flex: none; }
.id-day { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 13px; font: 500 10px/1 var(--font-num); color: var(--ink-3); }
.id-day i { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-3); }
.id-day.is-done i { background: var(--flame-2); }
.id-day.is-today i { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.id-lvl { border-radius: 50%; background: var(--ink); color: var(--bg); font: 650 16px/1 var(--font-num); }
.id-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.id-level .bar { height: 6px; margin-top: 5px; }
.id-xp { font: 500 12px/1.2 var(--font-num); color: var(--ink-3); white-space: nowrap; }

/* ---------- spill alene ---------- */
.hj-spill { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 14px; }
.hg-list { list-style: none; margin: 6px 0 0; padding: 0; }
.hg-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.hg-row:first-child { border-top: 0; }
.hg-art { width: 52px; height: 52px; padding: 6px; border-radius: 14px; background: var(--app-bg); }
.hg-art .art { width: 100%; height: 100%; overflow: visible; }
.hg-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hg-text b { font: 600 15.5px/1.2 var(--font-ui); }
.hg-text small { font: 500 13px/1.3 var(--font-ui); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-meta { display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--font-num); color: var(--ink-3); white-space: nowrap; }
.hg-meta i { font-style: normal; height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--bg-2); color: var(--ink-2); font: 600 11.5px/1 var(--font-ui); }
.hg-soon { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.hg-soon-h { flex: none; font: 500 12.5px/1 var(--font-ui); color: var(--ink-3); }
.hg-soon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
.hg-soon-list li { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--font-ui); color: var(--ink-3); white-space: nowrap; }
.hg-soon-art { width: 22px; height: 22px; padding: 2px; border-radius: 6px; background: var(--bg-2); }
.hg-soon-art .art { width: 100%; height: 100%; opacity: .5; filter: saturate(.4); }

/* ---------- andre kroker ---------- */
.hj-kroker { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 8px; }
.hk-list { list-style: none; margin: 6px 0 0; padding: 0; }
.hk-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.hk-row:first-child { border-top: 0; }
.hk-folk { display: flex; flex: none; width: 78px; padding-left: 8px; }
.hk-folk .avatar { margin-left: -8px; }
.hk-folk .avatar-disc { box-shadow: 0 0 0 2px var(--surface); }
.hk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hk-text b { display: inline-flex; align-items: center; gap: 5px; font: 600 14.5px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-text small { font: 500 12.5px/1.3 var(--font-ui); color: var(--ink-3); }
.hk-lock { width: 13px; height: 13px; color: var(--ink-3); }
.hk-empty { padding: 8px 0 12px; font: 500 13px/1.4 var(--font-ui); color: var(--ink-3); }

/* ---------- Idle-Byen ---------- */
.hj-byen { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px 16px; }
.hb-live { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--font-ui); color: var(--ink-3); white-space: nowrap; }
.hb-live .dot { width: 7px; height: 7px; }
.hb-live .dot.is-off { background: var(--line-2); }
.hb-art { flex: 1; min-height: 96px; display: flex; align-items: center; justify-content: center; }
.hb-art svg { width: 100%; max-width: 250px; height: auto; max-height: 120px; }
.hb-art .ca-ground { fill: var(--bg-3); }
.hb-art rect, .hb-art path { fill: var(--surface); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.hb-art .ca-roof.r1 { fill: var(--p0); } .hb-art .ca-roof.r2 { fill: var(--p3); } .hb-art .ca-roof.r3 { fill: var(--p5); } .hb-art .ca-roof.r4 { fill: var(--p1); }
.hb-art .ca-win rect { fill: var(--p7); stroke-width: 1.2; animation: winGlow 3s ease-in-out infinite; }
.hb-art .ca-win rect:nth-child(3n) { animation-delay: 1s; } .hb-art .ca-win rect:nth-child(3n+1) { animation-delay: 2s; }
@keyframes winGlow { 50% { fill: var(--surface); } }
.hb-art .ca-sun { fill: var(--gold); stroke: none; }
.hb-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.hb-stats { font: 500 13px/1.4 var(--font-ui); color: var(--ink-2); text-wrap: pretty; }
.hb-inne { display: flex; padding-left: 6px; }
.hb-inne:not(:empty) { margin-top: 8px; }
.hb-inne .avatar { margin-left: -6px; }
.hb-inne .avatar-disc { box-shadow: 0 0 0 2px var(--surface); }

/* ---------- mellomstore skjermer: Kroken over, I dag og byen side om side ---------- */
@media (max-width: 1100px) {
  .hj-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'krok krok' 'idag byen' 'kroker kroker' 'spill spill'; }
}

/* ---------- mobil: én kolonne, hovedhandlingen i full bredde ---------- */
@media (max-width: 720px) {
  .hjem { gap: 16px; }
  .hj-greet { font-size: 27px; }
  .hj-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'krok' 'kroker' 'idag' 'spill' 'byen'; gap: 12px; }
  .hj-krok { padding: 18px 16px 16px; gap: 14px; border-radius: var(--r-l); }
  .kp-name { font-size: 23px; }
  .kp-floor { padding: 12px 6px 8px; }
  .kp-p { width: 62px; }
  .kp-foot { padding-top: 14px; gap: 12px; }
  .kp-state { flex-basis: 100%; font-size: 13.5px; }
  .kp-acts { width: 100%; }
  .kp-acts .btn { flex: 1 1 0; padding: 0 12px; }
  .kp-acts .btn-accent { order: -1; flex-basis: 100%; }
  .hj-idag, .hj-spill, .hj-byen, .hj-kroker { padding: 16px 16px 6px; border-radius: var(--r-l); }
  .hj-spill { padding-bottom: 12px; }
  .hj-byen { padding-bottom: 14px; }
  .hg-row { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
  .hg-art { width: 48px; height: 48px; }
  .hg-meta { display: none; }
  .hg-soon { align-items: flex-start; flex-direction: column; gap: 10px; }
  .hg-soon-list { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .hg-soon-list::-webkit-scrollbar { display: none; }
  .hb-art { min-height: 80px; }
}
@media (max-width: 380px) {
  .id-week { gap: 3px; }
  .id-day { font-size: 0; gap: 0; }
}