/* Idle-Byen: lys grunn med presise rutelinjer og linjal, hvite bygg med farget
   tak og myke skygger, og byggebaren som det svarte apparatet nederst. */

.byen {
  position: absolute; inset: 0; margin: 0 auto; max-width: var(--page-w); overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: 14px;
  padding: calc(var(--top-h) + 14px) var(--gutter) calc(var(--nav-h) + 14px);
  --by-gold: oklch(80% .15 85);
  --by-gold-ink: oklch(52% .11 75);
}

/* ---------- toppen: tittel, kassa, hvem som er her ---------- */
.by-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; min-height: 52px; min-width: 0; }
.by-title { justify-self: start; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.by-title .t-title { font-size: 24px; }
.by-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.by-kasse { position: relative; justify-self: center; display: flex; align-items: center; gap: 12px; }
.by-kasse-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in oklch, var(--by-gold) 26%, var(--surface)); color: var(--by-gold-ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--by-gold) 60%, transparent); }
.by-kasse-ico .ico { width: 22px; height: 22px; stroke-width: 2; }
.by-kasse-num { font: 600 clamp(32px, 3.6vw, 48px)/1 var(--font-num); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.by-rate { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--good-soft); color: oklch(42% .12 150); font: 600 12.5px/1 var(--font-num); white-space: nowrap; }
.by-kasse.by-mangel .by-kasse-num { animation: byMangel .42s var(--ease-snap); }
@keyframes byMangel { 25% { translate: -5px 0; color: var(--bad); } 55% { translate: 4px 0; color: var(--bad); } 80% { translate: -2px 0; } }
.by-kasse-float {
  position: absolute; right: 0; top: -4px; font: 600 15px/1 var(--font-num); color: var(--bad); pointer-events: none;
  animation: byKasseFloat .9s var(--ease-out) forwards;
}
@keyframes byKasseFloat { from { opacity: 0; translate: 0 6px; } 20% { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -22px; } }
.by-inne { justify-self: end; display: flex; align-items: center; gap: 10px; min-width: 0; }
.by-inne-stack { display: flex; align-items: center; }
.by-inne-stack .avatar { margin-left: -8px; box-shadow: 0 0 0 2.5px var(--bg); border-radius: 50%; }
.by-inne-stack .avatar:first-child { margin-left: 0; }
.by-inne-stack .avatar.by-ny { animation: popIn .5s var(--ease-pop) both; }
.by-flere { margin-left: 4px; font: 600 12px/1 var(--font-num); color: var(--ink-3); }
.by-inne-tekst { font: 500 13px/1.2 var(--font-ui); color: var(--ink-3); white-space: nowrap; }

/* ---------- scenen og brettet ---------- */
.by-stage { position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; }
.by-board {
  --tile: 48px; --cols: 12; --rows: 8;
  position: relative; width: calc(var(--cols) * var(--tile)); height: calc(var(--rows) * var(--tile));
  touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none;
}
.by-board.over-radhus { cursor: pointer; }
.by-ground {
  position: absolute; inset: 0; border-radius: 16px;
  background-color: oklch(96.6% .016 128);
  background-image:
    linear-gradient(oklch(30% .03 140 / .085) 1px, transparent 1px),
    linear-gradient(90deg, oklch(30% .03 140 / .085) 1px, transparent 1px);
  background-size: var(--tile) var(--tile);
  background-position: -.5px -.5px;
  box-shadow: inset 0 0 0 1px oklch(30% .03 140 / .1), 0 1px 2px oklch(19% .01 262 / .06), 0 22px 50px -26px oklch(19% .01 262 / .3);
}
.by-torg {
  position: absolute; left: 0; top: 0; border-radius: 14px; pointer-events: none;
  background: oklch(93.4% .012 85);
  box-shadow: inset 0 0 0 1px oklch(30% .03 80 / .1);
  background-image: radial-gradient(oklch(30% .03 80 / .14) 1px, transparent 1.4px);
  background-size: 9px 9px;
}

/* linjalen: ruter som på et instrument (bare på brede skjermer) */
.by-ruler { position: absolute; display: flex; pointer-events: none; font: 500 10px/1 var(--font-num); color: var(--ink-3); letter-spacing: .02em; }
.by-ruler-x { left: 0; right: 0; bottom: calc(100% + 6px); height: 14px; }
.by-ruler-x span { flex: 0 0 var(--tile); display: grid; place-items: end center; position: relative; }
.by-ruler-x span::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 1px; height: 4px; background: var(--line-2); }
.by-ruler-y { top: 0; bottom: 0; right: calc(100% + 8px); width: 14px; flex-direction: column; }
.by-ruler-y span { flex: 0 0 var(--tile); display: grid; place-items: center end; position: relative; }
.by-ruler-y span::after { content: ''; position: absolute; top: 0; right: -8px; width: 4px; height: 1px; background: var(--line-2); }
@media (max-width: 719px) { .by-ruler { display: none; } }

.by-hover {
  position: absolute; left: 0; top: 0; width: var(--tile); height: var(--tile); border-radius: 10px; pointer-events: none;
  background: oklch(19% .01 262 / .045); box-shadow: inset 0 0 0 1.5px oklch(19% .01 262 / .14);
  opacity: 0; transition: opacity .12s;
}
.by-hover.is-on { opacity: 1; }

/* valgt rute: en gradeskive i aksentfargen som går rolig rundt */
.by-sel {
  position: absolute; left: 0; top: 0; z-index: 4; width: var(--tile); height: var(--tile); pointer-events: none;
  opacity: 0; scale: .5;
  transition: opacity .16s, scale var(--dur-pop) var(--ease-pop), transform .34s var(--ease-out);
}
.by-sel.is-on { opacity: 1; scale: 1; }
.by-sel::before { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: color-mix(in oklch, var(--accent) 16%, transparent); }
.by-sel::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--accent); }
.by-sel i {
  position: absolute; inset: -4%; border-radius: 50%;
  background: repeating-conic-gradient(var(--accent) 0 2.2deg, transparent 2.2deg 10deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: bySpin 12s linear infinite;
}
@keyframes bySpin { to { transform: rotate(1turn); } }

.by-layer { position: absolute; inset: 0; pointer-events: none; }
.by-floats { position: absolute; inset: 0; pointer-events: none; z-index: 60; }

/* ---------- bygningene ---------- */
.by-b { position: absolute; left: 0; top: 0; pointer-events: none; }
.by-b-in { position: absolute; inset: 0; transform-origin: 50% 88%; }
.by-b.pop .by-b-in { animation: byDrop .62s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes byDrop {
  0% { transform: translateY(-48%) scale(.72, 1.24); opacity: 0; }
  24% { opacity: 1; }
  40% { transform: translateY(0) scale(1.17, .8); }
  62% { transform: translateY(-2%) scale(.95, 1.06); }
  80% { transform: translateY(0) scale(1.02, .985); }
  100% { transform: none; }
}
.by-b.ut .by-b-in { animation: byUt .3s var(--ease-snap) forwards; }
@keyframes byUt { 30% { transform: scale(1.06, .92); } to { transform: scale(.3, .3); opacity: 0; } }
.by-b.bump .by-b-in { animation: byBump .26s var(--ease-pop); }
@keyframes byBump { 35% { transform: scale(1.06, .9); } 70% { transform: scale(.98, 1.04); } }
.by-stov {
  position: absolute; left: 50%; bottom: 8%; width: 86%; height: 26%; translate: -50% 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px oklch(30% .03 140 / .22);
  opacity: 0; animation: byStov .7s var(--ease-out) forwards; animation-delay: calc(var(--d, 0ms) + 230ms);
}
@keyframes byStov { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } }

.by-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.by-art .sk { fill: oklch(28% .03 150 / .14); }
.by-art .vegg { fill: oklch(99.4% .003 90); stroke: oklch(80% .008 262); stroke-width: 1.3; }
.by-art .tak { fill: var(--tak); stroke: var(--tak); stroke-width: 2.5; stroke-linejoin: round; }
.by-art .tak2 { fill: var(--tak-2, oklch(40% .02 40)); }
.by-art .vindu { fill: oklch(85% .05 225); stroke: oklch(72% .04 230); stroke-width: 1; }
.by-art .kryss { fill: none; stroke: oklch(99% 0 0); stroke-width: 1.4; }
.by-art .dor { fill: var(--pc, oklch(38% .03 262)); }
.by-art .handtak { fill: oklch(88% .1 85); }
.by-art .mk { fill: var(--pc, oklch(68% .16 55)); }
.by-art .mk2 { fill: oklch(97% .015 85); }
.by-art .bolle { fill: oklch(72% .11 65); }
.by-art .port { fill: oklch(46% .03 250); }
.by-art .portlinje { fill: none; stroke: oklch(62% .03 250); stroke-width: 1.2; }
.by-art .gress { fill: oklch(86% .1 140); stroke: oklch(76% .1 140); stroke-width: 1; }
.by-art .sti { fill: none; stroke: oklch(94% .03 90); stroke-width: 6; stroke-linecap: round; }
.by-art .tre { fill: oklch(62% .15 150); }
.by-art .tre-lys { fill: oklch(74% .14 145); }
.by-art .busk { fill: oklch(68% .15 145); }
.by-art .stamme { fill: oklch(48% .06 55); }
.by-art .benk { fill: var(--pc, oklch(55% .1 40)); }
.by-art .blomst { fill: oklch(84% .15 90); }
.by-art .blomst.b2 { fill: oklch(70% .18 10); }
.by-art .stein { fill: oklch(94% .006 262); stroke: oklch(80% .008 262); stroke-width: 1.3; }
.by-art .vann { fill: oklch(76% .11 230); }
.by-art .spray { fill: none; stroke: oklch(82% .09 225); stroke-width: 2.2; stroke-linecap: round; }
.by-art .drape { fill: oklch(82% .09 225); }
.by-art .ur { fill: oklch(99% 0 0); stroke: var(--ink); stroke-width: 1.6; }
.by-art .viser { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.by-art .soyle { fill: oklch(95% .005 262); stroke: oklch(82% .008 262); stroke-width: 1; }
.by-art .trapp { fill: oklch(90% .006 262); stroke: oklch(82% .008 262); stroke-width: 1; }
.by-art .trapp.t2 { fill: oklch(87% .006 262); }
.by-art .stang { fill: oklch(40% .01 262); }
.by-art .flagg { fill: var(--accent); transform-box: fill-box; transform-origin: left center; animation: byFlagg 2.6s ease-in-out infinite; }
@keyframes byFlagg { 0%, 100% { transform: scaleX(1) skewY(0deg); } 50% { transform: scaleX(.84) skewY(-6deg); } }
.by-art-hus { --tak: oklch(62% .15 32); --tak-2: oklch(44% .05 32); }
.by-art-bakeri { --tak: oklch(42% .04 45); --tak-2: oklch(40% .03 45); }
.by-art-verksted { --tak: oklch(56% .05 250); --tak-2: oklch(40% .03 250); }
.by-art-radhus { --tak: oklch(27% .015 262); }

/* små ting som lever */
.by-rok {
  position: absolute; width: 11%; aspect-ratio: 1; margin-left: -5.5%; border-radius: 50%; pointer-events: none;
  background: oklch(92% .005 262); opacity: 0; animation: byRok 2.8s ease-out infinite;
}
.by-rok.r2 { animation-delay: 1.4s; }
@keyframes byRok { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: .75; } 100% { opacity: 0; transform: translateY(-120%) scale(1.5); } }
.by-tannhjul { position: absolute; left: 19%; top: 69%; width: 15%; aspect-ratio: 1; pointer-events: none; animation: bySpin 6s linear infinite; }
.by-tannhjul svg { width: 100%; height: 100%; display: block; }
.by-tannhjul .tenner { fill: oklch(66% .03 250); }
.by-tannhjul .hull { fill: oklch(99% 0 0); }
.by-glimt {
  position: absolute; left: 30%; top: 54%; width: 40%; height: 14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, oklch(100% 0 0 / .8), transparent); opacity: .2; animation: byGlimt 2.2s ease-in-out infinite;
}
@keyframes byGlimt { 50% { opacity: .75; transform: scaleX(1.12); } }

/* spøkelse: valgt bygning følger musa over brettet */
.by-ghost { position: absolute; left: 0; top: 0; width: var(--tile); height: var(--tile); pointer-events: none; z-index: 50; opacity: 0; transition: opacity .12s; }
.by-ghost.is-on { opacity: .55; }
.by-ghost.is-nei { opacity: .35; filter: grayscale(1); }
.by-ghost.is-nei::after { content: ''; position: absolute; inset: 8%; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--bad); }

/* trykk-puls på en rute */
.by-puls { position: absolute; left: 0; top: 0; width: var(--tile); height: var(--tile); pointer-events: none; }
.by-puls::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent); animation: byPuls .5s var(--ease-out) forwards; }
@keyframes byPuls { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(1.25); } }

/* mynter og navn som flyter opp */
.by-float {
  position: absolute; translate: -50% -50%; font: 700 17px/1 var(--font-num); color: var(--pc); white-space: nowrap;
  text-shadow: 0 1px 0 oklch(100% 0 0), 0 0 6px oklch(100% 0 0 / .9); pointer-events: none;
  animation: byFloat .9s var(--ease-out) forwards;
}
.by-float.liten { font-size: 13px; }
@keyframes byFloat { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 18% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-44px) scale(1); } }
.by-hvem { position: absolute; left: 0; top: 0; translate: -50% -100%; pointer-events: none; animation: byHvem 2s var(--ease-out) forwards; }
.by-hvem .avatar { box-shadow: 0 0 0 2.5px var(--pc), 0 6px 14px -6px oklch(19% .01 262 / .5); border-radius: 50%; }
@keyframes byHvem { 0% { opacity: 0; scale: .4; } 12% { opacity: 1; scale: 1.08; } 20% { scale: 1; } 78% { opacity: 1; translate: -50% -110%; } 100% { opacity: 0; translate: -50% -150%; } }

/* "trykk her" over rådhuset første gang */
.by-tapphint {
  position: absolute; left: 0; top: 0; z-index: 55; display: none; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: var(--by-gold); color: oklch(30% .06 75); box-shadow: 0 0 0 3px var(--surface), var(--shadow-1); pointer-events: none;
}
.by-tapphint.is-on { display: grid; animation: byHint 1.6s ease-in-out infinite; }
.by-tapphint .ico { width: 17px; height: 17px; stroke-width: 2.2; }
@keyframes byHint { 0%, 100% { scale: 1; } 50% { scale: 1.16; } }

/* ---------- feed, borte-kort, info ---------- */
.by-feed { position: absolute; left: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; max-width: min(380px, 100%); }
.by-feed-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; max-width: 100%;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-1); font: 500 13px/1.25 var(--font-ui);
  animation: riseIn .4s var(--ease-pop) both; transition: opacity .3s, translate .3s;
}
.by-feed-item.ut { opacity: 0; translate: 0 6px; }
.by-feed-item .ico { width: 16px; height: 16px; color: var(--ink-3); }
.by-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); flex: none; display: inline-block; }

.by-borte {
  position: absolute; top: 4px; left: 50%; z-index: 80; translate: -50% 0; width: min(380px, calc(100% - 8px));
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--r-l);
  background: var(--surface); box-shadow: var(--shadow-2); cursor: pointer;
  opacity: 0; scale: .92; pointer-events: none; transition: opacity .22s, scale var(--dur-pop) var(--ease-pop);
}
.by-borte.is-on { opacity: 1; scale: 1; pointer-events: auto; }
.by-borte-sum { display: flex; align-items: center; gap: 10px; }
.by-borte-sum .ico { width: 26px; height: 26px; color: var(--by-gold-ink); stroke-width: 2; }
.by-borte-num { font: 600 34px/1 var(--font-num); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.by-borte-sum span { font: 500 14px/1 var(--font-ui); color: var(--ink-3); }
.by-borte ul { margin: 0; padding: 10px 0 0; list-style: none; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); }
.by-borte li { display: flex; align-items: center; gap: 9px; font: 500 14px/1.25 var(--font-ui); color: var(--ink-2); }
.by-borte li.by-borte-flere { color: var(--ink-3); padding-left: 18px; }

.by-info {
  position: absolute; left: 0; top: 0; z-index: 90; translate: -50% calc(-100% - 10px);
  display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: var(--r-m);
  background: var(--app-bg); color: var(--app-ink); box-shadow: var(--shadow-2); white-space: nowrap;
  opacity: 0; scale: .85; transform-origin: 50% 100%; pointer-events: none; transition: opacity .16s, scale var(--dur-pop) var(--ease-pop);
}
.by-info.is-on { opacity: 1; scale: 1; }
.by-info::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; rotate: 45deg; background: var(--app-bg); border-radius: 2px; }
.by-info-text { display: flex; flex-direction: column; gap: 3px; }
.by-info-text b { font: 600 14px/1.15 var(--font-ui); }
.by-info-text small { font: 500 12px/1.2 var(--font-ui); color: var(--app-ink-2); }
.by-info-text small.t-num { font-family: var(--font-num); color: oklch(80% .12 150); }

.by-laster { position: absolute; inset: 0; z-index: 85; display: none; place-content: center; justify-items: center; gap: 12px; color: var(--ink-3); font: 500 14px/1 var(--font-ui); pointer-events: none; }
.by-laster.is-on { display: grid; }
.by-laster-ring {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ring-dial);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: bySpin 2.4s linear infinite;
}

/* ---------- byggebaren (apparatet) ---------- */
.by-dock { justify-self: center; width: min(940px, 100%); min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.by-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 0 6px; min-height: 30px; }
.by-dock-tekst { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.by-dock-title { font: 600 15px/1.2 var(--font-ui); white-space: nowrap; }
.by-dock-sub { font: 500 12.5px/1.2 var(--font-ui); color: var(--app-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.by-dock-x { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--app-ink-2); background: oklch(100% 0 0 / .08); opacity: 0; scale: .7; pointer-events: none; transition: opacity .18s, scale var(--dur-pop) var(--ease-pop), background-color .2s; }
.by-dock.har-valg .by-dock-x { opacity: 1; scale: 1; pointer-events: auto; }
.by-dock-x .ico { width: 16px; height: 16px; }
.by-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.by-card {
  position: relative; display: grid; grid-template: 'art navn' auto 'art eff' auto 'pris pris' auto / 42px minmax(0, 1fr);
  align-items: center; column-gap: 10px; row-gap: 5px; min-width: 0;
  padding: 9px 10px 10px 9px; border-radius: var(--r-m); text-align: left; background: var(--app-bg-2); color: var(--app-ink);
  transition: scale var(--dur-press) var(--ease-press), background-color .2s, box-shadow .2s, opacity .2s;
}
.by-card:hover { background: var(--app-bg-3); }
.by-card.is-armed { background: var(--app-bg-3); box-shadow: inset 0 0 0 2px var(--app-ink); }
.by-dock.har-valg .by-card:not(.is-armed):not(.is-dyr) { box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .16); }
.by-card.is-dyr .by-card-art, .by-card.is-dyr .by-card-navn, .by-card.is-dyr .by-card-eff { opacity: .5; }
.by-card:disabled { opacity: .3; }
.by-card-art { grid-area: art; position: relative; width: 42px; height: 42px; }
.by-card-n { position: absolute; left: -4px; top: -4px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 5px; background: var(--app-bg); color: var(--app-ink-3); font: 600 9.5px/1 var(--font-num); }
.by-card-navn { grid-area: navn; align-self: end; min-width: 0; font: 600 14.5px/1.1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.by-card-eff { grid-area: eff; align-self: start; font: 500 11.5px/1 var(--font-num); color: oklch(78% .12 150); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* prisen: når du ikke har råd fylles en tynn strek etter hvert som kassa vokser */
.by-pris { grid-area: pris; position: relative; overflow: hidden; display: flex; align-items: center; gap: 5px; margin-top: 3px; padding: 5px 8px 6px 7px; border-radius: 8px; background: oklch(100% 0 0 / .07); }
.by-pris::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; transform-origin: left; transform: scaleX(var(--p, 1)); background: var(--by-gold); opacity: 0; transition: transform .25s var(--ease-out), opacity .2s; }
.by-card.is-dyr .by-pris::after { opacity: .9; }
.by-pris .ico { width: 14px; height: 14px; color: var(--by-gold); stroke-width: 2.1; }
.by-pris-num { font: 600 13px/1 var(--font-num); font-variant-numeric: tabular-nums; }
.by-card.is-dyr .by-pris-num { color: oklch(76% .1 30); }
.by-feed-item.is-nei { background: var(--ink); color: var(--bg); }
.by-feed-item.is-nei .ico { color: oklch(72% .17 25); }
.fly-spark .ico-coin { color: oklch(68% .14 80); stroke-width: 2.2; }

/* ---------- smal skjerm ---------- */
/* lave eller smale skjermer: kortene i en vannrett stripe, to rader per kort */
@media (max-width: 899px), (max-height: 780px) {
  .by-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; scroll-padding: 0 12px; }
  .by-cards::-webkit-scrollbar { display: none; }
  .by-card { flex: 0 0 206px; scroll-snap-align: start; grid-template: 'art navn pris' auto 'art eff eff' auto / 36px minmax(0, 1fr) auto; row-gap: 4px; padding: 8px 9px 8px 8px; }
  .by-card-art { width: 36px; height: 36px; }
  .by-pris { margin-top: 0; padding: 4px 7px 5px 6px; }
}
@media (max-width: 719px) {
  .byen { gap: 10px; padding: calc(var(--top-h) + 10px) 12px calc(var(--nav-h) + 10px); }
  .by-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'title inne' 'kasse kasse'; row-gap: 8px; min-height: 0; }
  .by-title { grid-area: title; }
  .by-title .t-title { font-size: 20px; }
  .by-inne { grid-area: inne; }
  .by-inne-tekst { display: none; }
  .by-kasse { grid-area: kasse; justify-self: center; gap: 10px; }
  .by-kasse-ico { width: 34px; height: 34px; }
  .by-kasse-num { font-size: 32px; }
  .by-dock { padding: 10px; gap: 8px; border-radius: var(--r-m); }
  .by-dock-sub { display: none; }
  .by-cards { margin: 0 -10px; padding: 0 10px; }
  .by-card { flex-basis: 198px; }
  .by-card-navn { font-size: 13.5px; }
  .by-feed { max-width: calc(100% - 8px); }
  .by-feed-item { font-size: 12.5px; padding: 7px 11px; }
}
/* liggende mobil: brettet til venstre, byggebaren som en kolonne til høyre */
@media (max-height: 540px) and (min-aspect-ratio: 4/3) {
  .byen {
    grid-template: 'head dock' auto 'stage dock' minmax(0, 1fr) / minmax(0, 1fr) minmax(200px, 250px);
    gap: 8px 12px; padding: calc(var(--top-h) + 8px) 12px calc(var(--nav-h) + 8px);
  }
  .by-head { grid-area: head; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: none; min-height: 0; gap: 12px; }
  .by-title { grid-area: auto; flex-direction: row; align-items: baseline; gap: 10px; }
  .by-title .t-title { font-size: 18px; }
  .by-sub { display: none; }
  .by-kasse { grid-area: auto; justify-self: start; gap: 8px; }
  .by-kasse-ico { width: 28px; height: 28px; }
  .by-kasse-ico .ico { width: 16px; height: 16px; }
  .by-kasse-num { font-size: 24px; }
  .by-rate { height: 22px; font-size: 11.5px; }
  .by-inne { grid-area: auto; }
  .by-inne-tekst { display: none; }
  .by-stage { grid-area: stage; }
  .by-dock { grid-area: dock; width: 100%; height: 100%; min-height: 0; padding: 10px; border-radius: var(--r-m); }
  .by-dock-sub { display: none; }
  .by-cards { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 0; scroll-snap-type: y proximity; min-height: 0; }
  .by-card { flex: 0 0 auto; padding: 7px 9px 7px 7px; grid-template-columns: 34px minmax(0, 1fr) auto; }
  .by-card-art { width: 34px; height: 34px; }
  .by-feed { max-width: calc(100% - 8px); }
  .by-ruler { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .by-sel i, .by-rok, .by-tannhjul, .by-glimt, .by-art .flagg, .by-laster-ring, .by-tapphint.is-on { animation: none; }
  .by-b.pop .by-b-in { animation: fadeIn .2s both; }
  .by-rok { display: none; }
}