* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    background-color: #2f3f4c;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Stående: spelytan överst och verktygen i en list längst ner.
   Liggande: verktygen i en list till höger (se media-frågan). */
#app {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
}

#scen {
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

#duk {
    display: block;
    touch-action: none;
}

#info {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: 56px;                /* plats för menyknappen */
    color: #2f3f4c;
    font-size: 15px;
    line-height: 22px;
    pointer-events: none;
}

/* Stående: banan (‹ › och namnet) och kostnaden på varsin rad.
   Liggande: allt på en rad. */
#info .rad {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#info .rad:first-child {
    line-height: 32px;
    margin-bottom: 2px;
}

/* Under provkörningen: bygget och utnyttjandet på en rad under kostnaden,
   utanför infotextens höjd (så att banan står still). */
#info .rad.under {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

@media (orientation: landscape) {
    #info {
        height: 34px;
        overflow: hidden;
        overflow-x: clip;       /* klipp raden i sidled, men låt raden under synas */
        overflow-y: visible;
        white-space: nowrap;
    }

    #info .rad {
        display: inline-block;
        margin-right: 14px;
        vertical-align: middle;
    }

    #info .rad.under {
        display: block;
        margin-right: 0;
    }
}

#info button {
    pointer-events: auto;
    min-width: 36px;
    height: 32px;
    margin: 0 6px 0 0;
    border: none;
    border-radius: 8px;
    background-color: rgba(47, 63, 76, 0.75);
    color: #fff;
    font: inherit;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
}

/* Banans namn: ett tryck visar alla banor. */
#info button.namn {
    padding: 0 4px;
    background: none;
    color: #2f3f4c;
    font-size: 15px;
    font-weight: 700;
}

#info button:disabled {
    opacity: 0.25;
    cursor: default;
}

#info button.namn:disabled {
    opacity: 1;
}

/* Välj flera och Klar, efter den valda balkens längd. */
#info button.flera {
    height: 26px;
    margin: 0 0 0 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
}

#info button.flera.vald {
    background-color: #e8b062;
    color: #2f3f4c;
}

#info .over {
    color: #c0392b;
    font-weight: bold;
}

/* Styrningen under spelytan (stående): panelen (Material, Typ, Profil)
   överst och Ångra, Riv och Kör under (samma rutnät), med luft nedtill för telefonens
   navigeringsstreck. Liggande: två kolumner till höger. */
#styrning {
    flex: none;
    display: grid;
    grid-template-rows: 50px 50px;
    gap: 6px;
    padding: 8px 8px max(22px, calc(env(safe-area-inset-bottom) + 8px));
    background-color: #2f3f4c;
}

#valjare,
#verktyg {
    display: grid;
    gap: 6px;
    min-width: 0;
}

#valjare {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#verktyg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#styrning button {
    min-width: 0;
    padding: 2px 4px;
    border: none;
    border-radius: 10px;
    background-color: #4a5d6c;
    color: #f2f4f5;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* Medan menyn är öppen går det inte att bygga: knapparna under är avstängda
   (ett tryck på dem stänger menyn, se app.js). */
body.menyoppen #styrning > *,
body.menyoppen #ruta > * {
    opacity: 0.4;
}

#styrning button:disabled {
    opacity: 0.4;
    cursor: default;
}

#styrning button.vald {
    background-color: #e8b062;
    color: #2f3f4c;
}

#verktyg button.riv {
    background-color: #b5523f;
}

/* Riv utan något valt: grå, men går att hålla inne för Riv allt. */
#verktyg button.riv.av {
    background-color: #5a4f4f;
    color: rgba(242, 244, 245, 0.55);
}

#verktyg button.kor {
    background-color: #5cb260;
    color: #fff;
}

#verktyg button.kor.stopp {
    background-color: #6c8796;
}

/* Panelen: liten rubrik överst och valet under. Under provkörningen syns
   den inte men har kvar sin plats. */
#valjare.vilar > * {
    visibility: hidden;
}

#valjare button small,
#valjare .etikett small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    line-height: 13px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#valjare button b,
#valjare .etikett b {
    display: block;
    font-size: 15px;
    line-height: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Knappen som den öppna rutan hör till (tryck igen för att stänga). */
#valjare button.oppen,
#valjare.redigerar button.oppen,
#verktyg button.oppen {
    box-shadow: inset 0 0 0 3px #e8b062;
}

#valjare button.oppen {
    background-color: #6c8597;
}

#info button.namn.oppen {
    background-color: rgba(232, 176, 98, 0.3);
    box-shadow: inset 0 0 0 2px #e8b062;
}

/* En vald balk, knutpunkt eller pelare: panelen gäller den. */
#valjare.redigerar button:not(:disabled) {
    box-shadow: inset 0 0 0 2px #6aa8ff;
}

#valjare .etikett {
    align-self: center;
    padding-left: 6px;
    color: #f2f4f5;
    min-width: 0;
}

/* Pelaren: höjd och pris över hela bredden. */
#valjare .etikett:only-child {
    grid-column: 1 / -1;
}

@media (orientation: landscape) {
    #app {
        flex-direction: row;
    }

    #styrning {
        grid-template-rows: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 200px;
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px 8px;
    }

    #valjare {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(3, minmax(0, 72px));
    }

    #verktyg {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: repeat(3, minmax(0, 72px));
    }

    #valjare .etikett {
        padding: 0;
        text-align: center;
    }

    #valjare .etikett b {
        white-space: normal;
        font-size: 13px;
    }
}

/* Rutan med val (material, typ, profil, Riv allt, banorna) vid sin knapp. */
#popup {
    position: fixed;
    z-index: 20;
    max-width: calc(100vw - 16px);
    padding: 8px;
    border-radius: 12px;
    background-color: #3b4d5b;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    color: #f2f4f5;
    font-size: 14px;
}

#popup.dold {
    display: none;
}

#popup.popup-profil {
    width: min(calc(100vw - 16px), 420px);
}

#popup .val {
    display: flex;
    gap: 6px;
}

#popup .rubrik {
    padding: 2px 4px 4px;
    font-size: 13px;
}

#popup .rad {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

#popup .rad + .rad {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(242, 244, 245, 0.2);
}

#popup .rad > span {
    font-size: 12px;
    opacity: 0.8;
}

#popup .rad > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
}

#popup .lista {
    display: grid;
    gap: 4px;
    min-width: 230px;
}

#popup button {
    min-width: 70px;
    min-height: 42px;
    padding: 2px 10px;
    border: none;
    border-radius: 10px;
    background-color: #4a5d6c;
    color: #f2f4f5;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#popup .rad button {
    min-width: 0;
    min-height: 36px;
    padding: 2px;
    font-size: 13px;
}

/* Banorna: numret, namnet med spannet och bästa priset i tre kolumner. */
#popup .lista button {
    display: grid;
    grid-template-columns: 1.4em minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    text-align: left;
}

#popup .lista .nr {
    text-align: right;
}

/* Den skarpa versionen: "Fler banor kommer snart" efter den sista banan */
#popup .lista .kommer {
    display: grid;
    grid-template-columns: 1.4em minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 34px;
    margin: 0;
    padding: 2px 10px;
    border: 2px dashed rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

#popup .lista small {
    font-weight: 500;
    opacity: 0.8;
}

#popup button.vald {
    background-color: #e8b062;
    color: #2f3f4c;
}

#popup button.riv {
    background-color: #b5523f;
}

#popup button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Menyknappen uppe till höger, och versionen litet nere till vänster */
#menyknapp {
    position: absolute;
    top: max(8px, env(safe-area-inset-top));
    right: 10px;
    width: 40px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background-color: rgba(47, 63, 76, 0.75);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* Guiden: ? under menyknappen, och ! under den (dela konstruktionen, testsidan) */
#guideknapp,
#helskarmknapp,
#delaknapp {
    position: absolute;
    top: calc(max(8px, env(safe-area-inset-top)) + 40px);
    right: 10px;
    width: 40px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background-color: rgba(47, 63, 76, 0.75);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

#delaknapp {
    top: calc(max(8px, env(safe-area-inset-top)) + 80px);
}

/* Helskärm, bredvid "?": hörn utåt, i helskärm (.pa) hörn inåt */
#helskarmknapp {
    right: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#helskarmknapp[hidden] {
    display: none;
}

#helskarmknapp svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#helskarmknapp .ut,
#helskarmknapp.pa .in {
    display: none;
}

#helskarmknapp.pa .ut {
    display: block;
}

#delaknapp[hidden] {
    display: none;
}

/* Rutan med konstruktionen som text (!); ett tryck utanför stänger */
#dela {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 28, 36, 0.55);
}

#dela.dold {
    display: none;
}

#dela .panel {
    width: min(calc(100% - 20px), 400px);
    padding: 12px 14px;
    border-radius: 14px;
    background-color: rgba(250, 252, 248, 0.97);
    color: #2f3f4c;
    font-size: 14px;
}

#dela p {
    margin: 0 0 6px;
    font-weight: 600;
}

#dela textarea {
    box-sizing: border-box;
    width: 100%;
    height: 140px;
    font: 11px/1.3 ui-monospace, monospace;
}

/* Guiden: allt mörkt utom det som lyser (hal), och en bubbla med texten */
#guide {
    position: fixed;
    inset: 0;
    z-index: 50;
}

#guide.dold {
    display: none;
}

#guide .hal {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 200vmax rgba(20, 30, 40, 0.6);
    outline: 3px solid #ffd54a;
    animation: lys 1.2s ease-in-out infinite alternate;
    pointer-events: none;
}

#guide .hal.ingen {
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    outline: none;
    animation: none;
}

@keyframes lys {
    from { outline-color: rgba(255, 213, 74, 0.5); }
    to { outline-color: rgba(255, 213, 74, 1); }
}

/* keIWs (professorn) till vänster, pratbubblan med en pil mot honom */
#guide .bubbla {
    position: fixed;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    width: min(calc(100vw - 20px), 380px);
    color: #2f3f4c;
    font-size: 15px;
    line-height: 1.45;
}

#guide .professor {
    flex: none;
    width: 80px;
    height: 82px;
}

#guide .prat {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 12px 14px 10px;
    border-radius: 14px;
    background-color: rgba(250, 252, 248, 0.98);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

#guide .prat::before {
    content: '';
    position: absolute;
    left: -12px;
    bottom: 22px;
    border-width: 9px 13px 9px 0;
    border-style: solid;
    border-color: transparent rgba(250, 252, 248, 0.98) transparent transparent;
}

#guide .bubbla p {
    margin: 0 26px 10px 0;
}

#guide .knappar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#guide .nr {
    font-size: 12px;
    opacity: 0.6;
}

#guide button {
    min-height: 34px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background-color: #dfe5e9;
    color: #2f3f4c;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#guide button.fram {
    background-color: #5cb560;
    color: #fff;
}

#guide button:disabled {
    opacity: 0.35;
    cursor: default;
}

#guide button.stang {
    position: absolute;
    top: 6px;
    right: 6px;
    min-height: 28px;
    width: 28px;
    padding: 0;
    background: none;
    font-size: 16px;
}

#version {
    position: absolute;
    left: max(8px, env(safe-area-inset-left));
    bottom: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    pointer-events: none;
}

/* Menyn: en panel över spelet, ett tryck utanför stänger */
#meny {
    position: absolute;
    inset: 0;
    background-color: rgba(47, 63, 76, 0.35);
}

#meny.dold {
    display: none;
}

/* Lika marginaler i sidled stående och liggande; på stora skärmar högst 720 px.
   pan-y: ett svep i sidled går till appen (tillbaka till listan). */
#meny .panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: pan-y;
    top: max(8px, env(safe-area-inset-top));
    right: 10px;
    width: min(calc(100% - 20px), 720px);
    max-height: calc(100% - 16px);
    border-radius: 14px;
    background-color: rgba(250, 252, 248, 0.97);
    box-shadow: 0 6px 20px rgba(47, 63, 76, 0.3);
    color: #2f3f4c;
    font-size: 14px;
    line-height: 1.45;
}

#meny h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

#meny .facit .varning {
    padding: 2px 12px;
    border-radius: 10px;
    background-color: #fdf1d6;
    border: 1px solid #e8c674;
}

#meny .facit .varning.dold {
    display: none;
}

#meny .over {
    color: #c0392b;
    font-weight: bold;
}

#meny h3 {
    margin: 12px 0 4px;
    font-size: 15px;
}

#meny p {
    margin: 0 0 8px;
}

#meny h4 {
    margin: 10px 0 2px;
    font-size: 14px;
}

#meny ul {
    margin: 0 0 4px;
    padding-left: 20px;
}

#meny li {
    margin: 2px 0;
}

#meny .tabell {
    border-collapse: collapse;
    font-size: 13px;
    margin: 2px 0 6px;
}

#meny .tabell th,
#meny .tabell td {
    padding: 2px 6px;
    border-bottom: 1px solid rgba(47, 63, 76, 0.12);
    vertical-align: top;
}

#meny .tabell th {
    text-align: left;
    font-weight: 600;
}

#meny .tabell td {
    text-align: right;
    white-space: nowrap;
}

/* Förklaringarna får bryta rad: menyn ska aldrig rulla i sidled */
#meny .tabell td.v {
    white-space: normal;
}

#meny .tabell .v {
    text-align: left;
}

#meny .tabell small {
    font-weight: 400;
    opacity: 0.7;
}

/* Ett svep åt höger ska gå tillbaka även på en tabell: tabellerna får
   inte ta hand om sidledes drag (de är aldrig bredare än menyn) */
#meny .rulla {
    overflow-x: auto;
    touch-action: pan-y;
}

#meny .kommer {
    opacity: 0.45;
}

#meny summary {
    cursor: pointer;
    font-weight: 600;
    margin: 0;
    padding: 8px 0;
}

/* Menyns lista: en rad per sida, med › till höger och ett streck mellan */
#meny .sida.dold {
    display: none;
}

#meny .lista {
    margin-top: 38px;      /* under krysset */
}

#meny .lista button.rad {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 2px;
    border-bottom: 1px solid rgba(47, 63, 76, 0.15);
    border-radius: 0;
    background: none;
    color: #2f3f4c;
    font-size: 15px;
    text-align: left;
}

#meny .lista button.rad::after {
    content: '›';
    font-size: 24px;
    line-height: 1;
    opacity: 0.5;
}

/* Undersidorna: ‹ Meny överst till vänster (✕ till höger), rubriken under */
#meny button.tillbaka {
    min-height: 32px;
    padding: 0 10px 0 0;
    background: none;
    color: #2f3f4c;
    font-size: 15px;
}


/* Möjliga lösningar är indragna med ett streck, så att det syns att de hör till banan */
#meny details.facit {
    margin: 4px 0 8px 10px;
    padding: 0 10px;
    border-left: 3px solid rgba(47, 63, 76, 0.2);
}

#meny details.facit > summary {
    padding: 6px 0;
}

/* Inställningarna: texten i första kolumnen, Ja/Nej i den andra */
#meny .installningar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 4px;
}

#meny .installningar button {
    min-width: 64px;
}

#meny button {
    min-height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background-color: #4a5d6c;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#meny button:disabled {
    opacity: 0.4;
    cursor: default;
}

#meny button[data-v=nollstall].saker {
    background-color: #c0533f;
}

/* Det som rullar; krysset ligger ovanpå, utanför (står kvar) */
#meny .rull {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    padding: 14px 16px;
}

#meny .stang {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 16px;
    min-height: 32px;
    padding: 0 10px;
}

/* Undersidans huvud (‹ Meny och rubriken) står kvar överst när man rullar */
#meny .huvud {
    position: sticky;
    z-index: 1;
    top: -14px;
    margin: -14px -16px 8px;
    padding: 14px 16px 6px;
    background-color: #f9fbf7;
    border-bottom: 1px solid rgba(47, 63, 76, 0.12);
}

#meny .huvud h2 {
    margin: 4px 0 0;
}

#meny .liten {
    margin-top: 12px;
    font-size: 11px;
    opacity: 0.6;
}

/* Resultatrutan efter en provkörning */
#ruta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(86%, 360px);
    padding: 16px 18px;
    border-radius: 14px;
    background-color: rgba(250, 252, 248, 0.95);
    box-shadow: 0 6px 20px rgba(47, 63, 76, 0.3);
    color: #2f3f4c;
    text-align: center;
}

#ruta.dold {
    display: none;
}

/* Förloppet ligger över panelen (placeraForlopp i app.js), så att bron syns:
   stående över hela bredden nedtill, och växer uppåt om texten behöver fler
   rader; liggande över hela panelen till höger. Hel bakgrund, så att
   knapparna under inte lyser igenom. Texten överst, ‹ › och Klar nederst. */
#ruta.forlopp {
    top: auto;
    z-index: 20;
    box-sizing: border-box;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    background-color: #f4f7f2;
    padding: 10px 12px max(22px, calc(env(safe-area-inset-bottom) + 8px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr auto;
    gap: 6px;
    max-height: 60vh;
    overflow: auto;
}

#ruta.forlopp h1,
#ruta.forlopp p {
    grid-column: 1 / -1;
    margin: 0;
}

#ruta.forlopp h1 {
    font-size: 16px;
}

#ruta.forlopp p {
    font-size: 13px;
}

#ruta.forlopp button {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

@media (orientation: landscape) {
    #ruta.forlopp {
        padding: 12px 10px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto 1fr auto auto;
        gap: 8px;
        max-height: none;
    }

    #ruta.forlopp [data-v="forlopp-klar"] {
        grid-column: 1 / -1;
    }
}

#ruta button:disabled {
    opacity: 0.35;
    cursor: default;
}

#ruta h1 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
}

#ruta .over {
    color: #d0503c;
    font-weight: 600;
}

#ruta p {
    margin: 0 0 14px;
    line-height: 1.4;
}

#ruta button {
    min-height: 44px;
    padding: 0 18px;
    margin: 0 4px;
    border: none;
    border-radius: 10px;
    background-color: #4a5d6c;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#ruta button[data-v="kor"] {
    background-color: #5cb260;
}

/* Myntet (spelets pengar): guld med en liten keIWs på (myntSvg i app.js) */
.mynt {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
    background: var(--mynt) center / contain no-repeat;  /* sätts i app.js (myntSvg) */
}

/* Mynten i budgeten: ett tryck visar ett stort mynt (lite större träffyta). */
#info .mynt {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
}

#info .mynt::after {
    content: '';
    position: absolute;
    inset: -8px;
}

#stortMynt {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 28, 36, 0.55);
    cursor: pointer;
}

#stortMynt.dold {
    display: none;
}

#stortMynt .mynt {
    font-size: min(70vw, 60vh);
    vertical-align: 0;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
    background: none;
}

#stortMynt .mynt svg {
    display: block;
}