/* Rommet mitt – rommet ovenfra og butikken. Resten av uttrykket ligger i
   /spill/_livsmotor/livsmotor.css. */

.lm-grid { grid-template-columns: minmax(0, 1fr) 300px; }

.hoved.bred { overflow: hidden; }
.rom-oppsett { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 28px; height: 100%; min-height: 0; }
.rom-panel { overflow-y: auto; min-height: 0; }
.butikk-liste h2, .rom-topp h2 { font-size: 30px; }
.butikk-liste { overflow-y: auto; min-height: 0; padding-right: 8px; }

.vare-rad { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 8px; border-bottom: 2px dashed #e4d8c8; border-radius: 12px; }
.vare-rad.treff { background: var(--cream); }
.vare-rad > .ikon { grid-row: span 2; align-self: start; border-radius: 12px; }
.vare-info { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vare-rad > .segmenter, .vare-rad > .kjopt-rad { grid-column: 2; }
.segmenter-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vare-rad .seg { padding: 5px 8px; font-size: 13px; border-width: 2.5px; border-radius: 10px; }
.vare-rad .seg small { font-size: 12px; }
.vare-rad .seg small.timer { font-weight: 600; opacity: .75; margin-top: 0; }
.treff-merke { font-size: 11px; font-weight: 800; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; padding: 0 7px; margin-left: 4px; white-space: nowrap; }
.kjopt-rad { display: flex; gap: 8px; align-items: center; }
.angre { border: 0; background: none; font-weight: 800; text-decoration: underline; cursor: pointer; font-size: 14px; }

.rom-topp { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }

.rommet { --rute: 57px; width: calc(var(--cols) * var(--rute) + 6px); }
.vegg {
  height: 44px;
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--fag-lys);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  position: relative;
}
.vegg-ting { display: inline-flex; }
.vegg-tom { font-size: 13px; font-weight: 800; color: var(--muted); }
.vindu { position: absolute; right: 18px; top: 8px; width: 70px; height: 22px; border: 3px solid var(--ink); border-radius: 6px; background: #bfe3ff; }
.gulv {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--rute));
  grid-template-rows: repeat(var(--rows), var(--rute));
  border: 3px solid var(--ink);
  border-radius: 0 0 16px 16px;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(43,33,24,.08) 25px 26px),
    #f3dcc0;
  box-shadow: 0 4px 0 var(--ink);
}
.rute { border: 1px dashed rgba(43,33,24,.12); }
.rute[data-cell] { cursor: pointer; }
.rute.dor { background: var(--cream); position: relative; }
.rute.dor::after { content: ""; position: absolute; left: -3px; top: 6px; bottom: 6px; width: 8px; border: 3px solid var(--ink); border-radius: 4px; background: var(--social, #fb923c); }

.mobel {
  position: absolute;
  left: calc(var(--x) * var(--rute) + 3px);
  top: calc(var(--y) * var(--rute) + 3px);
  width: calc(var(--w) * var(--rute) - 6px);
  height: calc(var(--h) * var(--rute) - 6px);
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 0 var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  overflow: hidden;
}
.mobel:hover { background: var(--yellow); }
.mobel .mobel-ikon { --s: min(calc(var(--w) * var(--rute) - 14px), calc(var(--h) * var(--rute) - 30px), 120px); }
.mobel.liten .mobel-ikon { --s: calc(var(--rute) - 14px); }
.mobel.liten .mobel-navn { display: none; }
.mobel-navn { font-size: 11px; font-weight: 800; }
.spokelse {
  position: absolute;
  left: calc(var(--x) * var(--rute) + 3px);
  top: calc(var(--y) * var(--rute) + 3px);
  width: calc(var(--w) * var(--rute) - 6px);
  height: calc(var(--h) * var(--rute) - 6px);
  border: 3px dashed var(--ink);
  border-radius: 12px;
  background: rgba(250, 204, 21, .45);
  pointer-events: none;
}
.spokelse.feil { background: rgba(250, 92, 102, .35); }

.brett { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; min-height: 40px; }
.brett-ting { display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; padding: 4px 12px 4px 4px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.brett-ting.valgt { background: var(--yellow); }

.sjekk-liten li { padding: 5px 12px; font-size: 14px; }
.merkelapper .dekket { background: var(--yellow); }
.status .knapp { width: 100%; }

/* Rapporten: rommet får fast bredde, resten tar plassen som er igjen */
.rapport-rom { grid-template-columns: auto minmax(0, 1fr); }
.rapport-rom .rommet { --rute: 48px; }