/* style.css (jatek): Az ingatlanmágnás. Everything inside #frame is sized in em: main.js sets the frame's font-size
   to frame width / 390 × 16 px, so 1em = 16 logical px of a 390-wide phone. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2a2320; overflow: hidden; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #2a2320; }
#frame { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vw; height: 100vh; height: 100dvh;
  overflow: hidden; background: #f1e6cf; font-size: 16px; line-height: 1.25; }
#frame.paper { background-image: var(--paper); background-size: 24em auto; }
#scene, #overlay { position: absolute; inset: 0; }
#overlay:empty { display: none; }
#overlay { z-index: 20; }
.pad-safe { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
button:focus-visible { outline: 0.18em solid #2d6fd0; outline-offset: 0.1em; }
.btn { min-height: 2.9em; min-width: 2.9em; padding: 0.55em 1.1em; border-radius: 0.8em; font-weight: 800; font-size: 1.05em;
  background: #d23c2a; color: #fff8ec; box-shadow: 0 0.18em 0 #8f2316; border: 0.12em solid #2a2320; }
.btn:active { transform: translateY(0.12em); box-shadow: 0 0.06em 0 #8f2316; }
.btn.alt { background: #fff8ec; color: #2a2320; box-shadow: 0 0.18em 0 #b9a888; }
.btn.dark { background: #2a2320; color: #fff8ec; box-shadow: 0 0.18em 0 #000; }
.btn.small { min-height: 2.9em; padding: 0.35em 0.8em; font-size: 0.95em; }
.btn[disabled], .btn.off { opacity: 0.45; filter: grayscale(0.6); pointer-events: none; }
.btn.wide { width: 100%; }
.btn img.ico { height: 1.2em; vertical-align: -0.25em; margin-right: 0.3em; }

/* -------- top bar */
.hud { display: flex; align-items: center; gap: 0.4em; padding: 0.35em 0.5em; padding-top: calc(0.35em + env(safe-area-inset-top, 0px));
  background: #2a2320; color: #fff8ec; min-height: 3.3em; flex: none; }
.hud .mo { font-weight: 900; font-size: 1.05em; white-space: nowrap; }
.hud .mo small { font-weight: 600; opacity: 0.7; font-size: 0.75em; }
.hud .cash { flex: 1; text-align: center; font-weight: 900; font-size: 1.12em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hud .cash small { display: block; font-size: 0.62em; font-weight: 600; opacity: 0.75; }
.hud .cash.neg { color: #ff8f7a; }
.hud .stat { display: flex; flex-direction: column; align-items: center; font-size: 0.72em; line-height: 1.1; min-width: 3.2em; }
.hud .stat b { font-size: 1.45em; }
.hud .ib { min-width: 2.75em; min-height: 2.75em; border-radius: 0.6em; background: rgba(255,255,255,0.1); font-size: 1em; display: flex; align-items: center; justify-content: center; }
.repbar { width: 3.4em; height: 0.45em; border-radius: 0.3em; background: #554a42; overflow: hidden; margin-top: 0.15em; }
.repbar i { display: block; height: 100%; background: linear-gradient(90deg, #d23c2a, #e0a020 50%, #4caf50); background-size: 3.4em 100%; }

/* -------- month layout */
.month { position: absolute; inset: 0; display: flex; flex-direction: column; }
.news { flex: none; padding: 0.3em 0.7em; font-size: 0.82em; background: #fff3d6; border-bottom: 0.1em solid #d8c6a0; min-height: 2.4em;
  display: flex; align-items: center; gap: 0.5em; line-height: 1.2; }
.news b { background: #d23c2a; color: #fff; padding: 0.1em 0.4em; border-radius: 0.3em; font-size: 0.85em; flex: none; }
.mapbox { flex: 0 0 auto; position: relative; height: 22em; max-height: 41%; overflow: hidden; background: #cfe0d8; }
.map { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; }
.map > img.bg, .map > svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.pin .lbl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 11px; color: #2a2320;
  text-shadow: 0 0 2px #fff8ec, 0 0 2px #fff8ec, 0 0 3px #fff8ec; white-space: nowrap; }
.house { position: absolute; width: 15px; height: 15px; transform: translate(-50%, -60%); }
.house.svg { border-radius: 2px 2px 3px 3px; border: 1.5px solid #2a2320; }
.house.svg::before { content: ''; position: absolute; left: -3px; right: -3px; top: -7px; height: 7px; background: inherit; border: 1.5px solid #2a2320;
  border-bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.house.offer { outline: 2px dashed #d23c2a; outline-offset: 2px; border-radius: 3px; }
.house img { width: 100%; height: 100%; object-fit: contain; display: block; }
.house.gfx { width: 22px; height: 24px; transform: translate(-50%, -100%); }
.house.gfx.offer { outline: 0; }
.house.empty-house { filter: saturate(0.35) brightness(1.15); }
.house.new::after { content: ''; position: absolute; inset: -5px; border: 2px solid #fff8ec; border-radius: 50%; }

.panel { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.55em 0.6em 0.8em; touch-action: pan-y; }
.steps { display: flex; gap: 0.3em; margin-bottom: 0.45em; }
.steps span { flex: 1; text-align: center; font-size: 0.78em; font-weight: 800; padding: 0.3em 0; border-radius: 0.5em; background: #e6d7b8; color: #7a6a55; }
.steps span.on { background: #2a2320; color: #fff8ec; }
.steps span.done { background: #cbb994; color: #2a2320; }
.h2 { font-weight: 900; font-size: 1.15em; margin: 0.15em 0 0.4em; }
.hint { font-size: 0.85em; color: #6c5d4b; margin: 0 0 0.5em; }
.actionbar { flex: none; padding: 0.5em 0.6em; padding-bottom: calc(0.5em + env(safe-area-inset-bottom, 0px)); background: #e8dbbf;
  border-top: 0.1em solid #cbb994; display: flex; gap: 0.5em; align-items: center; }
.actionbar .btn { flex: 1; }

/* -------- offer cards */
.card { background: #fff8ec; border: 0.12em solid #2a2320; border-radius: 0.8em; padding: 0.5em; margin-bottom: 0.5em; display: flex; gap: 0.55em; align-items: center;
  box-shadow: 0 0.15em 0 #cbb994; }
.card.sold { opacity: 0.55; }
.thumb { width: 4.6em; height: 3.5em; border-radius: 0.5em; flex: none; overflow: hidden; background: #d8c6a0; position: relative; display: flex; align-items: center; justify-content: center;
  font-size: 0.7em; font-weight: 800; color: #6c5d4b; text-align: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .info { flex: 1; min-width: 0; }
.card .t1 { font-weight: 900; font-size: 0.98em; }
.card .t2 { font-size: 0.8em; color: #6c5d4b; }
.card .price { font-weight: 900; font-size: 1.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card .watch { display: inline-flex; align-items: center; gap: 0.25em; font-size: 0.74em; font-weight: 800; color: #fff; padding: 0.1em 0.45em 0.1em 0.1em; border-radius: 1em; margin-top: 0.2em; }
.card .watch .face { width: 2em; height: 2em; margin: -0.2em 0; }
.card .buy { flex: none; min-width: 5.4em; }
.stamp { display: inline-block; font-weight: 900; padding: 0.15em 0.5em; border: 0.15em solid currentColor; border-radius: 0.4em; transform: rotate(-6deg); font-size: 0.85em; }

.face { width: 2.4em; height: 2.4em; border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; border: 0.1em solid #2a2320; background: #8a7a66; font-size: 0.9em; }
.face img { width: 100%; height: 100%; object-fit: cover; }

/* -------- my flats */
.flat { background: #fff8ec; border: 0.12em solid #2a2320; border-radius: 0.8em; padding: 0.45em 0.5em; margin-bottom: 0.5em; }
.flat .row1 { display: flex; gap: 0.5em; align-items: center; }
.flat .ten { flex: 1; min-width: 0; font-size: 0.8em; color: #4a3f35; }
.flat .ten b { font-size: 1.1em; color: #2a2320; }
.flat .rent { font-weight: 900; text-align: right; font-size: 0.95em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.flat .rent small { display: block; font-weight: 600; font-size: 0.72em; color: #6c5d4b; }
.chips { display: flex; gap: 0.3em; margin-top: 0.4em; }
.chip { flex: 1; min-height: 3.4em; border-radius: 0.6em; font-weight: 800; font-size: 0.82em; background: #efe2c6; border: 0.12em solid #cbb994; color: #4a3f35; line-height: 1.05; }
.chip.on { color: #fff; border-color: #2a2320; }
.chip.korrekt.on { background: #4c8a46; } .chip.piaci.on { background: #2d6fd0; } .chip.pofatlan.on { background: #e07a20; } .chip.uzsora.on { background: #b2261a; }
.allrow { display: flex; gap: 0.4em; align-items: center; margin-bottom: 0.5em; font-size: 0.85em; font-weight: 800; }
.allrow .chips { flex: 1; margin-top: 0; }
.allrow .chip { font-size: 0.97em; }
.loanrow .btn { font-size: 1em; min-height: 3.45em; }
.loanrow { display: flex; gap: 0.4em; align-items: center; background: #efe2c6; border-radius: 0.8em; padding: 0.4em 0.5em; margin-bottom: 0.5em; font-size: 0.85em; }
.loanrow .txt { flex: 1; }
.loanrow .txt b { font-variant-numeric: tabular-nums; }

/* -------- overlays */
.dim { position: absolute; inset: 0; background: rgba(30, 22, 18, 0.62); display: flex; align-items: center; justify-content: center; padding: 1em; }
.sheet { background: #fff8ec; border: 0.15em solid #2a2320; border-radius: 1.1em; width: 100%; max-height: 100%; overflow-y: auto; padding: 0.9em; box-shadow: 0 0.4em 0 rgba(0,0,0,0.3); }
.sheet .art { width: 100%; aspect-ratio: 7 / 5; max-height: 4em; height: auto; border-radius: 0.7em; overflow: hidden; background: #e6d7b8; display: flex; align-items: center; justify-content: center; margin-bottom: 0.6em; font-size: 3em; }
.sheet .art img { width: 100%; height: 100%; object-fit: cover; }
.sheet h3 { margin: 0 0 0.3em; font-size: 1.3em; font-weight: 900; }
.sheet p { margin: 0 0 0.6em; font-size: 0.95em; }
.sheet .cost { font-weight: 900; font-size: 1.35em; color: #b2261a; margin-bottom: 0.5em; font-variant-numeric: tabular-nums; }
.sheet .cost.plus { color: #2e7d32; }
.sheet .opts { display: flex; flex-direction: column; gap: 0.45em; }
.sheet .opts .btn { text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 0.5em; }
.sheet .opts .btn small { font-weight: 700; font-size: 0.78em; opacity: 0.85; text-align: right; }
.sheet .where { font-size: 0.8em; color: #6c5d4b; margin-bottom: 0.3em; }
.sheet .more { font-size: 0.8em; color: #6c5d4b; text-align: center; margin-top: 0.4em; }

/* auction */
.auction .vs { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; margin: 0.4em 0 0.6em; }
.auction .side { flex: 1; text-align: center; font-weight: 800; font-size: 0.85em; }
.auction .side .face { width: 4.2em; height: 4.2em; font-size: 1.1em; }
.auction .side.lead .face { box-shadow: 0 0 0 0.25em #e0a020; }
.auction .now { text-align: center; font-size: 1.6em; font-weight: 900; font-variant-numeric: tabular-nums; }
.auction .who { text-align: center; font-size: 0.85em; font-weight: 700; min-height: 1.3em; color: #6c5d4b; }
.timer { height: 0.55em; border-radius: 0.3em; background: #e6d7b8; overflow: hidden; margin: 0.5em 0; }
.timer i { display: block; height: 100%; width: 100%; background: #d23c2a; transform-origin: 0 50%; }
.bubble { background: #2a2320; color: #fff8ec; border-radius: 0.8em; padding: 0.45em 0.7em; font-size: 0.85em; font-weight: 600; position: relative; margin: 0.3em 0 0.5em; }

/* summary */
.sumrow { display: flex; justify-content: space-between; font-size: 0.95em; padding: 0.2em 0; border-bottom: 0.06em dashed #cbb994; font-variant-numeric: tabular-nums; }
.sumrow b.plus { color: #2e7d32; } .sumrow b.minus { color: #b2261a; }
.sumrow.total { font-weight: 900; font-size: 1.05em; border-bottom: 0; }
.feed { margin: 0.5em 0; }
.feed .it { display: flex; gap: 0.5em; align-items: flex-start; font-size: 0.84em; margin-bottom: 0.4em; background: #fff8ec; border-radius: 0.6em; padding: 0.35em 0.45em; border: 0.08em solid #d8c6a0; }
.feed .it .face { width: 2.3em; height: 2.3em; font-size: 1em; }
.feed .it .ic { font-size: 1.4em; line-height: 1; width: 1.4em; text-align: center; flex: none; }
.feed .it.fb { background: #e8eefb; border-color: #b9c8ea; }
.feed .it.fb .grp { font-size: 0.85em; font-weight: 800; color: #2d4f99; }
.board { margin: 0.4em 0; }
.board .br { display: flex; align-items: center; gap: 0.45em; margin-bottom: 0.3em; font-size: 0.85em; font-weight: 800; }
.board .br .face { width: 2.2em; height: 2.2em; font-size: 1em; }
.board .bar { flex: 1; height: 1.25em; background: #e6d7b8; border-radius: 0.4em; overflow: hidden; position: relative; }
.board .bar i { display: block; height: 100%; }
.board .n { width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
.board .br.bust { opacity: 0.45; text-decoration: line-through; }
.warn { background: #b2261a; color: #fff; border-radius: 0.6em; padding: 0.45em 0.6em; font-weight: 800; font-size: 0.85em; margin: 0.4em 0; }

/* title */
.title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.2em 1.1em;
  padding-top: calc(1.2em + env(safe-area-inset-top, 0px)); padding-bottom: calc(1em + env(safe-area-inset-bottom, 0px)); text-align: center;
  background: radial-gradient(ellipse at 50% 35%, #fff3d6, #e8d4ab); }
.title .logo { width: 100%; max-width: 22em; cursor: pointer; }
.title .logo img { width: 100%; display: block; }
.title .logo-text { font-family: Georgia, "Times New Roman", serif; font-weight: 900; font-size: 2.15em; line-height: 0.95; color: #b2261a; letter-spacing: -0.02em;
  text-shadow: 0.04em 0.04em 0 #2a2320; transform: rotate(-3deg); }
.title .logo-text small { display: block; font-size: 0.42em; color: #2a2320; text-shadow: none; letter-spacing: 0.02em; margin-bottom: 0.1em; }
.title .tag { font-size: 1em; font-weight: 600; max-width: 20em; margin: 0.6em auto 0; color: #4a3f35; }
.title .cast { display: flex; justify-content: center; gap: 0.6em; margin: 0.6em 0; }
.title .cast .face { width: 4em; height: 4em; }
.title .cast .player .face { width: 5.4em; height: 5.4em; }
.title .cast div { display: flex; flex-direction: column; align-items: center; font-size: 0.72em; font-weight: 800; gap: 0.2em; max-width: 6.5em; }
.title .menu { display: flex; flex-direction: column; gap: 0.6em; width: 100%; max-width: 20em; }
.title .foot .btn { font-size: 1.3em; min-height: 3em; min-width: 3em; padding: 0.2em; }
.title .foot { font-size: 0.72em; color: #6c5d4b; display: flex; gap: 0.6em; justify-content: center; align-items: center; }

/* tutorial */
.tut { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.2em; padding-top: calc(1.2em + env(safe-area-inset-top, 0px));
  padding-bottom: calc(1em + env(safe-area-inset-bottom, 0px)); background: #fff3d6; }
.tut .pg { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tut h2 { font-size: 1.6em; margin: 0 0 0.4em; font-weight: 900; }
.tut p { font-size: 1.05em; line-height: 1.4; }
.tut .dots { text-align: center; margin: 0.5em 0; letter-spacing: 0.3em; color: #b9a888; }
.tut .dots b { color: #d23c2a; }
.tut .nav { display: flex; gap: 0.5em; }
.tut .nav .btn { flex: 1; }

/* ending */
.end { position: absolute; inset: 0; overflow-y: auto; padding: 1em; padding-top: calc(1em + env(safe-area-inset-top, 0px)); padding-bottom: calc(1em + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(ellipse at 50% 20%, #fff3d6, #e3cc9c); }
.end .rcard { background: #fff8ec; border: 0.15em solid #2a2320; border-radius: 1em; padding: 0.9em; box-shadow: 0 0.3em 0 #b9a888; }
.end .kicker { font-size: 0.8em; font-weight: 800; color: #6c5d4b; text-transform: uppercase; letter-spacing: 0.05em; }
.end h1 { margin: 0.1em 0 0.3em; font-size: 1.75em; line-height: 1.05; color: #b2261a; font-family: Georgia, serif; }
.end .lead { font-size: 0.92em; margin-bottom: 0.6em; }
.end .big { display: flex; gap: 0.5em; margin: 0.5em 0; }
.end .big div { flex: 1; background: #efe2c6; border-radius: 0.7em; padding: 0.4em; text-align: center; font-size: 0.75em; font-weight: 700; }
.end .big b { display: block; font-size: 1.9em; font-weight: 900; font-variant-numeric: tabular-nums; }
.end .stats { font-size: 0.85em; margin: 0.4em 0; }
.end .stats div { display: flex; justify-content: space-between; padding: 0.15em 0; border-bottom: 0.06em dashed #d8c6a0; }
.end .btns { display: flex; flex-direction: column; gap: 0.5em; margin-top: 0.8em; }
.end.csod { background: radial-gradient(ellipse at 50% 20%, #e9ddd0, #a8988a); }

#toast { position: absolute; left: 50%; top: calc(3.8em + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 40; pointer-events: none; }
#toast div { background: #2a2320; color: #fff8ec; padding: 0.45em 0.8em; border-radius: 0.7em; font-weight: 800; font-size: 0.88em; white-space: nowrap; box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.3); }
#toast div.bad { background: #b2261a; }
.fade-in { animation: fin 0.22s ease-out both; }
@keyframes fin { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }
.flat .review { font-size: 0.8em; color: #6c5d4b; margin-top: 0.4em; font-style: italic; line-height: 1.3; }
.title.has-bg, .end.has-bg { background-size: cover; background-position: center; }
.it b { font-weight: 700; }