/* Spelskal: helskärm, ingen sidscroll, dock + scen + dialogruta */
:root {
  --paper: #f6ecd6;
  --paper-2: #efe0bd;
  --ink: #3a2e22;
  --ink-soft: #5a4a37;
  --sea: #bfdad6;
  --land: #e9c98a;
  --land-edge: #b68a4a;
  --accent: #b23a22;
  --accent-2: #2a5f5a;
  --good: #2f6a2b;
  --bad: #a62f2f;
  --on-accent: #ffffff;   /* text på accent- och bad-bakgrund */
  --wood: #d9bf8a;
  --shadow: 0 3px 0 rgba(58, 46, 34, .3);
  --radius: 14px 18px 12px 16px / 16px 12px 18px 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #2a2118;
    --paper-2: #35291d;
    --ink: #f1e4c8;
    --ink-soft: #c2b08f;
    --sea: #22403f;
    --land: #7a5a31;
    --land-edge: #c9a05c;
    --accent: #ee6a4e;
    --accent-2: #62b3ab;
    --good: #82c27b;
    --bad: #e77a7a;
    --on-accent: #2a2118;
    --wood: #4a3a26;
    --shadow: 0 3px 0 rgba(0, 0, 0, .45);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.4 'Fraunces', Georgia, serif;
  user-select: none;
  -webkit-user-select: none;
}
h1, h2, h3, p { margin: 0; }
button {
  font: inherit; color: inherit;
  background: var(--paper-2);
  border: 2.5px solid var(--ink);
  border-radius: 12px 14px 11px 15px / 14px 11px 15px 12px;
  padding: .5rem .9rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform .08s, background .15s, filter .15s;
  touch-action: manipulation;
}
button:hover:not(:disabled) { background: var(--land); transform: translateY(-2px); }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 transparent; }
button:disabled { opacity: .6; cursor: not-allowed; border-style: dashed; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(128, 110, 80, .18) 6px 12px); }
button:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
button.primary { background: var(--accent); color: var(--on-accent); }
button:hover:not(:disabled) small { color: var(--ink); }
button.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); }
button.ghost { background: transparent; box-shadow: none; border-style: dashed; }
small { display: block; font-size: .78rem; color: var(--ink-soft); line-height: 1.2; }
button.primary small, button.primary:hover:not(:disabled) small { color: var(--on-accent); }

#app { height: 100vh; height: 100dvh; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-width: 1500px; margin: 0 auto; }

/* ---------- HUD ---------- */
.hud { display: flex; align-items: center; gap: .6rem; padding: calc(.5rem + env(safe-area-inset-top, 0px)) .8rem .5rem; background: var(--paper-2); border-bottom: 3px solid var(--ink); position: relative; z-index: 3; }
.hud .brand { font-family: 'Caveat', cursive; font-weight: 700; font-size: 2rem; line-height: 1; color: var(--accent); margin-right: auto; white-space: nowrap; }
.hud-btns { display: flex; gap: .4rem; order: 3; }
.hud-stats { display: flex; gap: .6rem; order: 2; }
.pill { display: flex; align-items: baseline; gap: .35rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 99px; padding: .15rem .8rem; box-shadow: var(--shadow); white-space: nowrap; position: relative; }
button.pill { font: inherit; color: inherit; cursor: pointer; }
.pill b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.pill small { display: inline; }
.pill small[hidden] { display: none; }
.pill.debt b { color: var(--bad); }
.pill.debt.danger { background: var(--bad); color: var(--on-accent); border-color: var(--ink); animation: pulse 1.6s infinite; }
.pill.debt.danger b, .pill.debt.danger small, .pill.debt.danger:hover:not(:disabled) small { color: var(--on-accent); font-weight: 700; }
.pill.debt.danger:hover:not(:disabled) { background: var(--bad); }
@keyframes pulse { 50% { transform: scale(1.06); } }
.pill.money b.up { color: var(--good); animation: pop .5s; }
.pill.money b.down { color: var(--bad); animation: pop .5s; }
.hud .icon { padding: .25rem .6rem; font-size: 1.15rem; min-width: 44px; min-height: 44px; }
@keyframes pop { 40% { transform: scale(1.25); } }
/* Smal skärm: två rader. Rad 1 märke och knappar, rad 2 fyra statuschips (skuld och mål ryms alltid). */
@media (max-width: 760px) {
  .hud { flex-wrap: wrap; gap: .05rem .35rem; padding: calc(.1rem + env(safe-area-inset-top, 0px)) .5rem .25rem; border-bottom-width: 2px; }
  .hud .brand { font-size: 1.6rem; }
  .hud-btns { gap: .25rem; }
  .hud .icon { padding: .1rem; }
  .hud-stats { order: 4; flex: 1 0 100%; display: grid; grid-template-columns: 1.35fr 1.2fr 1fr 1.1fr; gap: .3rem; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .pill { padding: .05rem .4rem; gap: .2rem; flex-wrap: wrap; justify-content: center; line-height: 1.1; border-radius: 14px; min-width: 0; }
  .pill > span { font-size: .66rem; color: var(--ink-soft); flex: 1 0 100%; text-align: center; }
  .pill.debt.danger > span { color: var(--on-accent); }
  .pill.debt small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pill.debt.danger > span::after { content: ' ⚠'; }
  #p-day > span { flex: 0 0 auto; }
  #p-day small { flex: 1 0 100%; text-align: center; }
  .pill b { font-size: .92rem; }
  .pill small { font-size: .62rem; }
  .pill.goal { font-size: .66rem; color: var(--ink-soft); }
  .pill.goal b { font-size: .92rem; color: var(--ink); }
  /* många pills (dag/datum, kod, uppdrag, rykten, följder): inget får spräcka pillen på smal skärm */
  .hud-stats .pill { overflow: hidden; }
  #p-day small { white-space: normal; text-wrap: balance; }
  .hud-stats .pill.code b { font-size: .66rem; letter-spacing: 0; }
}
/* Kort och bred skärm (telefon på sidan): allt på en rad, utan märke */
@media (orientation: landscape) and (max-height: 500px) {
  .hud { flex-wrap: nowrap; gap: .4rem; padding: calc(.15rem + env(safe-area-inset-top, 0px)) .5rem .15rem; border-bottom-width: 2px; }
  .hud .brand { font-size: 1.3rem; margin-right: 0; }
  .hud-stats { order: 2; flex: 1 1 auto; min-width: 0; display: flex; gap: .3rem; }
  .hud-stats .pill { flex: 1 1 0; min-width: 0; justify-content: center; }
  .hud-btns { order: 3; }
  .pill small[hidden] { display: none; }
}
@media (orientation: landscape) and (max-height: 500px) { .hud .brand { display: none; } .hud-stats .pill:first-child { flex-grow: 1.5; } }
@media (orientation: landscape) and (max-height: 500px) and (min-width: 700px) {
  .hud-stats .pill { flex-wrap: nowrap; align-items: baseline; }
  .pill > span { flex: 0 0 auto; }
  .pill small { font-size: .66rem; }
}

/* ---------- Scen: stadsvy ---------- */
.stage { position: relative; min-height: 0; overflow: hidden; }
.cityview { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.scene-wrap { position: relative; min-height: 0; overflow: hidden; background: var(--sea); border-bottom: 3px solid var(--ink); }
.scene-wrap .sc-scene { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; --sc-height: 100%; }
.scene-wrap .sc-scene > svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.scene-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Caveat', cursive; font-size: 3rem; color: var(--ink-soft); }
.plate { position: absolute; left: .8rem; top: .8rem; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); padding: .5rem .9rem; box-shadow: var(--shadow); max-width: min(70%, 420px); transform: rotate(-1deg); }
.plate h2 { font-family: 'Caveat', cursive; font-size: 2.1rem; line-height: 1; }
.plate .sub { font-size: .82rem; color: var(--ink-soft); }
.know { display: flex; gap: 3px; margin-top: .3rem; align-items: center; font-size: .78rem; color: var(--ink-soft); }
.know i { width: 13px; height: 13px; border: 2px solid var(--ink); border-radius: 3px; }
.know i.on { background: var(--accent-2); }
.clock { position: absolute; right: .8rem; top: .8rem; background: var(--paper); border: 3px solid var(--ink); border-radius: 99px; padding: .25rem .8rem; box-shadow: var(--shadow); display: flex; gap: .4rem; align-items: center; font-size: .9rem; }
.clock i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--ink); background: var(--accent); }
.clock i.used { background: transparent; opacity: .45; }

.dock { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; padding: .6rem .7rem; background: var(--wood); }
.dock button { display: grid; justify-items: center; gap: .1rem; text-align: center; padding: .5rem .3rem; }
.dock .ico { font-size: 1.7rem; line-height: 1; }
.dock .lbl { font-weight: 700; font-size: .95rem; }
.dock small { text-align: center; }
.dock kbd { font: inherit; font-size: .7rem; opacity: .55; }
@media (max-width: 760px) {
  .dock { grid-template-columns: repeat(3, 1fr); }
  .dock small { display: none; }
  .plate h2 { font-size: 1.6rem; }
}

.dock.streetdock { grid-template-columns: 2fr 1fr; }
.dock.streetdock button { text-align: center; }

/* Reservlösning när en modul saknas */
.fallback { position: absolute; inset: 0; overflow: auto; padding: 1rem; display: grid; align-content: start; justify-items: center; gap: .8rem; background: var(--sea); }
.fallback h2 { font-family: 'Caveat', cursive; font-size: 2.4rem; color: var(--accent); }
.fallback .opts { display: grid; gap: .5rem; width: min(560px, 100%); }
.fallback .opts button { text-align: left; }

/* ---------- Dialogruta ---------- */
.dialog { background: var(--paper-2); border-top: 3px solid var(--ink); padding: .6rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px)); min-height: 5.2rem; display: grid; align-content: center; cursor: pointer; position: relative; }
.dialog .line { font-size: 1.1rem; min-height: 1.6em; }
.dialog .line.good { color: var(--good); }
.dialog .line.bad { color: var(--bad); }
.dialog .prev { font-size: .85rem; color: var(--ink-soft); margin-bottom: .15rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dialog:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -6px; }
.dialog .more { position: absolute; right: .9rem; bottom: .4rem; animation: bob 1s infinite; color: var(--accent); }

/* ---------- Overlay och kort ---------- */
.overlay { position: fixed; inset: 0; background: rgba(35, 26, 16, .6); display: none; place-items: center; padding: 1rem; z-index: 20; backdrop-filter: blur(2px); }
.overlay.open { display: grid; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.card { background: var(--paper); border: 3px solid var(--ink); border-radius: 20px 14px 22px 14px / 14px 22px 14px 20px; padding: 1.2rem 1.3rem; max-width: 520px; width: 100%; max-height: 92dvh; overflow: auto; display: grid; gap: .8rem; box-shadow: 0 8px 0 rgba(0, 0, 0, .35); animation: cardin .22s cubic-bezier(.2, 1.3, .4, 1); user-select: text; }
@keyframes cardin { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.card h2 { font-family: 'Caveat', cursive; font-size: 2.5rem; line-height: 1; color: var(--accent); }
.card h3 { font-size: 1.15rem; }
.card .sub { color: var(--ink-soft); font-size: .92rem; }
.card .opts { display: grid; gap: .5rem; }
.card .opts button { text-align: left; }
.card .row { display: flex; gap: .5rem; flex-wrap: wrap; }
.card .result.good { color: var(--good); }
.card .result.bad { color: var(--bad); }
.card.wide { max-width: 640px; }
table { border-collapse: collapse; width: 100%; }
td, th { padding: .25rem .4rem; text-align: left; border-bottom: 1px dashed var(--ink-soft); }
.badge { display: inline-block; font-size: .78rem; padding: .05rem .55rem; border: 1.5px solid var(--accent-2); border-radius: 99px; color: var(--accent-2); margin: 0 .25rem .25rem 0; }
.logbook { max-height: 50dvh; overflow: auto; display: grid; gap: .35rem; }
.logbook p.good { color: var(--good); }
.logbook p.bad { color: var(--bad); }

/* ---------- Titelskärm ---------- */
.title-card { text-align: center; }
.title-card h2 { font-size: 4rem; }
.title-card p { text-align: left; }
.tip { font-size: .85rem; color: var(--ink-soft); font-style: italic; text-align: center; }

/* ---------- Flytande siffror och skakning ---------- */
.floats { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.floatnum { position: absolute; font-family: 'Caveat', cursive; font-weight: 700; font-size: 2rem; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); animation: floatup 1.3s ease-out forwards; }
.floatnum.good { color: var(--good); }
.floatnum.bad { color: var(--bad); }
@keyframes floatup { from { opacity: 1; transform: translateY(0) scale(.8); } 20% { transform: translateY(-10px) scale(1.2); } to { opacity: 0; transform: translateY(-70px) scale(1); } }
#app.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ====================================================================
   Tillägg: mobil, tillgänglighet, karta (issue #4, #5, #11, #25, #56)
   ==================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card :focus-visible, .overlay :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.card h2:focus, .card h3:focus { outline: none; }
.card h2:focus-visible, .card h3:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; border-radius: 6px; }

/* Statusbladet (status.js) */
.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.st-grid > div { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 10px; padding: .4rem .7rem; }
.st-k { display: block; font-size: .78rem; color: var(--ink-soft); }
.st-block { display: grid; gap: .3rem; }
.st-row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.st-bar { height: 14px; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--accent-2); border-radius: 99px; }
.st-bar:not(.goal) i { background: var(--bad); }
.st-bar.warn { border-width: 3px; }
.st-bar.warn i { background: repeating-linear-gradient(135deg, var(--bad) 0 8px, var(--paper-2) 8px 11px); }
.st-warn { color: var(--bad); }

/* Resekartan som kort (mapcard.js) */
.card.mapcard { max-width: 760px; width: 100%; height: min(92dvh, 760px); max-height: none; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.card.mapcard.mc-listmode { height: auto; max-height: 92dvh; overflow: auto; grid-template-rows: auto auto auto; }
.card.mapcard.mc-listmode { align-content: start; }
.mc-listmode #mc-in, .mc-listmode #mc-out, .mc-listmode #mc-reset { display: none; }
.mc-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; justify-content: space-between; }
.mc-head h3 { font-size: 1.3rem; }
.mc-tools { display: flex; gap: .4rem; flex-wrap: wrap; }
.mc-tools button { min-width: 44px; min-height: 44px; padding: .2rem .7rem; font-size: 1.2rem; }
.mc-tools button#mc-list { font-size: .9rem; }
.mc-tools button[aria-pressed="true"] { background: var(--accent-2); color: var(--paper); }
.mc-view { position: relative; min-height: 0; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; background: var(--sea); }
.mc-view[hidden] { display: none; }
.mc-view svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--sea); }
.mc-view svg:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -3px; }
.mc-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; counter-reset: stad; }
.card.mapcard:not(.mc-listmode) .mc-rows { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mc-rows li { display: flex; gap: .6rem; align-items: baseline; padding: .3rem .1rem; border-bottom: 1px dashed var(--ink-soft); counter-increment: stad; }
.mc-rows li::before { content: counter(stad) "."; color: var(--ink-soft); min-width: 1.8em; text-align: right; }
.mc-rows li span { color: var(--ink-soft); font-size: .9rem; }
.mc-rows li em { margin-left: auto; font-style: normal; color: var(--ink-soft); font-size: .9rem; }
.mc-rows li.here b { color: var(--accent); }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
/* kartpinnar: skalas med zoomen via --pxu (kartenheter per skärmpixel, satt av mapcard.js) */
.pin { cursor: pointer; }
.pin circle { fill: var(--paper); stroke: var(--ink); stroke-width: calc(var(--pxu, 1) * 2px); r: calc(var(--pxu, 1) * 5.5px); }
.pin.visited circle { fill: var(--accent-2); }
.pin.here circle { fill: var(--accent); r: calc(var(--pxu, 1) * 7px); }
.pin text { font-family: 'Caveat', cursive; font-size: clamp(14px, calc(var(--pxu, 1) * 14px), 44px); font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: calc(var(--pxu, 1) * 3.5px); stroke-linejoin: round; pointer-events: none; }
.pin:focus-visible { outline: none; }
.pin:focus-visible circle { stroke: var(--accent-2); stroke-width: calc(var(--pxu, 1) * 4px); }
.route { stroke: var(--accent); stroke-width: calc(var(--pxu, 1) * 2px); stroke-dasharray: calc(var(--pxu, 1) * 2px) calc(var(--pxu, 1) * 6px); stroke-linecap: round; fill: none; opacity: .9; }
@media (max-width: 600px), (max-height: 500px) {
  .overlay:has(.mapcard) { padding: 0; }
  .card.mapcard { height: 100dvh; max-width: none; border-radius: 0; border-width: 0; padding: .6rem calc(.7rem + env(safe-area-inset-right, 0px)) calc(.6rem + env(safe-area-inset-bottom, 0px)) calc(.7rem + env(safe-area-inset-left, 0px)); gap: .5rem; }
  .card.mapcard.mc-listmode { height: 100dvh; max-height: none; overflow: auto; }
}

/* Skärmar som är korta (telefon på sidan): kort och överlägg får plats */
@media (max-height: 500px) {
  .overlay { padding: .5rem; }
  .card { max-height: 98dvh; padding: .8rem 1rem; gap: .5rem; }
  .card h2 { font-size: 2rem; }
  .title-card h2 { font-size: 2.6rem; }
  .logbook { max-height: 40dvh; }
  .dock { padding: .3rem .5rem; gap: .35rem; }
  .dock .ico { font-size: 1.3rem; }
  .dock button { padding: .25rem .3rem; }
  .plate { padding: .25rem .6rem; }
  .plate h2 { font-size: 1.5rem; }
  .plate .sub, .know { display: none; }
  .clock { padding: .1rem .6rem; }
}
/* Dialogrutan krymper till en rad (tryck öppnar dagboken) */
@media (orientation: landscape) and (max-height: 500px) {
  .dialog { min-height: 0; padding: .25rem .8rem calc(.3rem + env(safe-area-inset-bottom, 0px)); }
  .dialog .prev, .dialog .more { display: none; }
  .dialog .line { font-size: .95rem; min-height: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
}

/* Rörelse: inga skak, pulser eller flytande siffror som försvinner direkt (JS-effekter läser samma inställning i a11y.js) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  #app.shake, .pill.debt.danger, .pill.money b.up, .pill.money b.down, .dialog .more { animation: none !important; }
  .floatnum { animation: floatfade 1.3s linear forwards !important; animation-duration: 1.3s !important; }
}
@keyframes floatfade { 0%, 70% { opacity: 1; } to { opacity: 0; } }

/* Mer kontrast: tjockare kanter, full opacitet, tydlig skillnad på avstängda knappar */
@media (prefers-contrast: more) {
  :root { --ink-soft: var(--ink); }
  button, .pill, .card, .st-grid > div, .st-bar { border-width: 3px; }
  button:disabled { opacity: 1; color: var(--ink-soft); border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(128, 110, 80, .3) 5px 10px); text-decoration: line-through; }
  button:focus-visible, .card :focus-visible { outline-width: 4px; }
  .dialog, .hud { border-width: 4px; }
}