@font-face {
    font-family: "GrenzeGotisch";
    src: url("fonts/GrenzeGotisch.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


/* =========================================================
   BODY / BROWSER GESTURES
   ========================================================= */

html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family: Arial, sans-serif;

    /*
       Förhindrar browserns back/forward-swipe
       så långt browsern tillåter.
    */
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
}


/* =========================================================
   SCREENS
   ========================================================= */

.screen {
    width: 100vw;
    height: 100vh;
}

.screen.hidden {
    display: none !important;
}


/* =========================================================
   START SCREEN
   ========================================================= */

#startScreen {
    display: flex;

    align-items: center;
    justify-content: center;

    background: #111;

    color: #ededed;
}


.start-content {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 60px;

    text-align: center;

    padding: 0 20px;
}


.start-title {
    margin: 0;

    font-family: "GrenzeGotisch", serif;
    font-weight: normal;

    font-size: clamp(40px, 7vw, 84px);
    line-height: 1.15;

    letter-spacing: 1px;
}


.start-menu {
    display: flex;
    flex-direction: column;

    gap: 22px;

    z-index: 10000;

    pointer-events: auto;
}


.menu-link {
    background: none;
    border: none;

    font-family: "GrenzeGotisch", serif;
    font-size: 24px;

    color: #ededed;

    cursor: pointer;

    padding: 4px 0;

    position: relative;

    z-index: 10000;

    pointer-events: auto;
}


.menu-link::after {
    content: "";

    display: block;

    width: 0%;
    height: 1px;

    margin: 6px auto 0;

    background: #2979ff;

    transition: width 0.2s ease;
}


.menu-link:hover::after {
    width: 100%;
}


/* =========================================================
   BUILD CONFIG
   ========================================================= */

#buildConfigScreen {
    display: flex;

    align-items: center;
    justify-content: center;

    background: #111;

    color: #ededed;
}


.config-content {
    width: 100%;
    max-width: 420px;

    padding: 0 24px;
}


.config-title {
    margin: 0 0 40px;

    font-family: "GrenzeGotisch", serif;
    font-weight: normal;

    font-size: 40px;

    text-align: center;
}


.config-field {
    margin-bottom: 26px;
}


.config-label {
    display: block;

    font-family: Arial, sans-serif;
    font-size: 12px;

    letter-spacing: 0.5px;

    color: #9a9a9a;

    margin-bottom: 10px;
}


.segmented {
    display: flex;

    border: 1px solid #444;

    border-radius: 4px;

    overflow: hidden;
}


.segmented-btn {
    flex: 1;

    background: transparent;
    border: none;

    color: #ededed;

    font-family: Arial, sans-serif;
    font-size: 14px;

    padding: 10px 0;

    cursor: pointer;

    border-right: 1px solid #444;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.segmented-btn:last-child {
    border-right: none;
}


.segmented-btn:hover {
    background: #1c1c1c;
}


.segmented-btn.active {
    background: #2979ff;

    color: #fff;
}


.config-dimensions {
    display: flex;

    align-items: flex-end;

    gap: 12px;
}


.dimension-input {
    flex: 1;

    display: flex;
    flex-direction: column;

    font-family: Arial, sans-serif;
    font-size: 12px;

    color: #9a9a9a;

    gap: 8px;
}


.dimension-input input {
    background: #1c1c1c;

    border: 1px solid #444;
    border-radius: 4px;

    color: #ededed;

    font-size: 15px;

    padding: 9px 10px;
}


.dimension-x {
    padding-bottom: 10px;

    color: #666;
}


.config-buttons {
    display: flex;

    justify-content: space-between;

    margin-top: 44px;
}


.ghost-btn,
.primary-btn {
    font-family: "GrenzeGotisch", serif;
    font-size: 18px;

    padding: 10px 22px;

    cursor: pointer;

    border-radius: 4px;
}


.ghost-btn {
    background: transparent;

    border: 1px solid #444;

    color: #ededed;
}


.ghost-btn:hover {
    border-color: #777;
}


.primary-btn {
    background: #2979ff;

    border: 1px solid #2979ff;

    color: #fff;
}


.primary-btn:hover {
    background: #1e5fd1;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

#workspaceScreen {
    display: block;
}


/* =========================================================
   SIDE MENU
   ========================================================= */

#sideMenu {
    position: fixed;

    top: 0;
    left: 0;

    width: 240px;
    height: 100vh;

    background: #1a1a1a;

    color: #ededed;

    z-index: 1000;

    overflow-y: auto;

    padding: 24px 18px;

    box-sizing: border-box;

    border-right: 1px solid #333;
}


.side-menu-section {
    margin-bottom: 38px;
}


.side-menu-title {
    font-family: "GrenzeGotisch", serif;
    font-weight: normal;

    font-size: 20px;

    letter-spacing: 0.5px;

    margin: 0 0 16px;

    padding-bottom: 10px;

    border-bottom: 1px solid #333;
}


.side-btn {
    display: block;

    width: 100%;

    box-sizing: border-box;

    font-family: "GrenzeGotisch", serif;
    font-size: 17px;

    padding: 10px 12px;

    margin-bottom: 10px;

    background: transparent;

    border: 1px solid #444;
    border-radius: 4px;

    color: #ededed;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.side-btn:hover {
    background: #2979ff;

    border-color: #2979ff;

    color: #fff;
}


.side-btn.ghost {
    font-family: Arial, sans-serif;
    font-size: 12px;

    opacity: 0.75;

    margin-top: 4px;
}


.side-btn.ghost:hover {
    background: #333;

    border-color: #666;
}


/* =========================================================
   EFFECTS
   ========================================================= */

.effect-row {
    margin-bottom: 22px;
}


.effect-row-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    font-family: Arial, sans-serif;
    font-size: 13px;

    margin-bottom: 8px;
}


.effect-name {
    color: #ededed;
}


.apply-all {
    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 11px;

    color: #9a9a9a;

    cursor: pointer;
}


.effect-slider {
    width: 100%;

    accent-color: #2979ff;
}


.color-row {
    display: flex;

    align-items: center;

    gap: 12px;
}


#colorPicker {
    width: 42px;
    height: 28px;

    padding: 0;

    background: none;

    border: 1px solid #444;
    border-radius: 4px;

    cursor: pointer;
}


#colorEnabledToggle {
    accent-color: #2979ff;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

#viewport {
    position: absolute;

    top: 0;
    left: 240px;

    width: calc(100vw - 240px);
    height: 100vh;

    overflow: hidden;

    background: #ccc;

    z-index: 1;

    overscroll-behavior: none;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;

    /*
       Gör att browsern inte försöker använda
       touch-scroll som sidnavigation.
    */
    touch-action: none;
}


/* =========================================================
   CANVAS / ARTBOARD
   ========================================================= */

#canvas {
    position: relative;

    width: 3000px;
    height: 3000px;

    background: white;

    transform-origin: 0 0;

    z-index: 1;

    overscroll-behavior: none;
}


/* =========================================================
   IMAGES
   ========================================================= */

.image-wrapper {
    position: absolute;

    user-select: none;

    cursor: move;

    /*
        MASTE vara auto. Med pointer-events: none nadde
        aldrig pointerdown fram till wrappern, sa varken
        markering eller drag fungerade — klicken gick rakt
        igenom till #viewport.
    */

    pointer-events: auto;

    touch-action: none;
}


.image-wrapper img {
    display: block;

    width: 100%;
    height: auto;

    user-select: none;

    -webkit-user-drag: none;

    /*
        Bilden slapper igenom till wrappern, som ager
        all interaktion.
    */

    pointer-events: none;
}


/*
    Pixelate / Stamp / Posterize renderas har ovanpa img
    nar minst en av dem ar aktiv (se applyEffects i JS).
    Maste vara pointer-events:none av samma anledning som
    img ovan - annars slutar drag/markering fungera igen.
*/

.effect-canvas {
    display: none;

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    user-select: none;

    pointer-events: none;
}


/* =========================================================
   SELECTION
   ========================================================= */

.image-wrapper.selected {
    outline: 1px dashed #2979ff;
}


.image-wrapper .resize-handle,
.image-wrapper .rotate-handle,
.image-wrapper .layer-menu {
    display: none !important;

    pointer-events: none !important;
}


/* =========================================================
   SELECTION HANDLES
   ========================================================= */

#selectionHandles {
    position: absolute;

    display: none;

    box-sizing: border-box;

    outline: 1px dashed #2979ff;

    transform-origin: center center;

    pointer-events: none;

    z-index: 999999;
}


#selectionHandles.visible {
    display: block;
}


#selectionResizeHandle {
    position: absolute;

    width: 14px;
    height: 14px;

    right: -7px;
    bottom: -7px;

    background: #2979ff;

    cursor: nwse-resize;

    pointer-events: auto;
}


#selectionRotateHandle {
    position: absolute;

    width: 14px;
    height: 14px;

    right: -7px;
    top: -28px;

    background: red;

    border-radius: 50%;

    cursor: grab;

    pointer-events: auto;
}


/* =========================================================
   MARQUEE SELECTION
   ========================================================= */

#selectionBox {
    position: absolute;

    border: 1px dashed #2979ff;

    background: rgba(41, 121, 255, 0.08);

    pointer-events: none;

    z-index: 99999;

    box-sizing: border-box;
}


/* =========================================================
   LAYER CONTROLS
   ========================================================= */

#layerControlsSection {
    margin-bottom: 38px;
}


.layer-controls-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;
}


.layer-control-btn {
    width: 100%;

    box-sizing: border-box;

    background: transparent;

    border: 1px solid #444;
    border-radius: 4px;

    color: #ededed;

    font-family: Arial, sans-serif;
    font-size: 11px;

    padding: 8px 6px;

    cursor: pointer;
}


.layer-control-btn:hover:not(:disabled) {
    background: #2979ff;

    border-color: #2979ff;
}


.layer-control-btn:disabled {
    opacity: 0.3;

    cursor: default;
}


#layerDeleteBtn {
    grid-column: 1 / -1;

    margin-top: 3px;
}


#layerDeleteBtn:hover:not(:disabled) {
    background: #8d1b1b;

    border-color: #8d1b1b;
}


/* =========================================================
   EXPORT MODAL
   ========================================================= */

.modal {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.5);

    z-index: 999999;

    pointer-events: auto;
}


.modal.hidden {
    display: none;
}


.modal-content {
    position: relative;

    z-index: 1000000;

    background: white;

    padding: 25px;

    min-width: 320px;

    border-radius: 10px;

    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, 0.4);

    font-family: Arial, sans-serif;
}


.modal-content h2 {
    margin-top: 0;

    font-family: "GrenzeGotisch", serif;

    font-size: 30px;
}


.modal-content label {
    display: block;

    margin-bottom: 15px;
}


.modal-content input[type="text"],
.modal-content select {
    display: block;

    width: 100%;

    box-sizing: border-box;

    margin-top: 5px;

    padding: 8px;
}


.modal-buttons {
    margin-top: 20px;
}


.modal-buttons button {
    padding: 8px 14px;

    margin-right: 8px;

    cursor: pointer;
}


#backgroundLabel {
    display: block;
}


/* =========================================================
   ADVANCED EXPORT
   ========================================================= */

#exportModal .modal-content {
    width: min(520px, calc(100vw - 40px));

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    box-sizing: border-box;
}


#exportAdvancedPanel {
    margin-top: 6px;

    padding-top: 4px;
}


.export-field {
    margin-bottom: 14px;
}


.export-field > label {
    display: block;

    margin-bottom: 6px;

    font-size: 12px;

    color: #444;
}


.export-field select,
.export-field input[type="number"] {
    width: 100%;

    box-sizing: border-box;

    padding: 8px 9px;

    border: 1px solid #bbb;
    border-radius: 4px;

    background: #fff;

    font-family: Arial, sans-serif;
    font-size: 13px;
}


.export-inline {
    display: flex;

    align-items: center;

    gap: 8px;
}


.export-inline input {
    flex: 1;
}


.export-hidden {
    display: none !important;
}


.export-check-row,
.export-radio {
    display: flex !important;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    cursor: pointer;
}


.export-check-row {
    margin: 4px 0 14px !important;
}


.export-background-options {
    display: flex;

    gap: 18px;
}


#exportJpgQuality {
    width: 100%;
}


#exportInfoBox {
    margin-top: 18px;

    padding: 12px;

    border: 1px solid #d3d3d3;
    border-radius: 5px;

    background: #f7f7f7;

    font-family: Arial, sans-serif;
}


.export-info-label {
    margin-bottom: 5px;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #777;
}


#exportPixelSize {
    font-size: 18px;

    font-weight: 600;
}


#exportMegapixels,
#exportPhysicalSize {
    margin-top: 3px;

    font-size: 11px;

    color: #666;
}


#exportWarning {
    margin-top: 9px;

    font-size: 11px;

    line-height: 1.35;

    color: #666;
}


#exportWarning.is-warning {
    color: #9a4f00;

    font-weight: 600;
}


#confirmExportBtn:disabled {
    opacity: 0.5;

    cursor: default;
}
/* =========================================================
   2026 MEDIEVAL UI + CROP
   ========================================================= */
:root {
    --ink: #17130e;
    --iron: #211b14;
    --iron-2: #2d251b;
    --parchment: #e6d8b5;
    --parchment-dark: #b9a57d;
    --gold: #b38a45;
    --blood: #7d2d25;
}
#startScreen, #buildConfigScreen { background: radial-gradient(circle at center, #2b241b 0%, #15110d 70%); color: var(--parchment); }
.start-content, .config-content { position: relative; }
.start-content::before, .config-content::before { content:""; position:absolute; inset:-34px; border:1px solid rgba(179,138,69,.45); pointer-events:none; box-shadow: inset 0 0 0 4px rgba(0,0,0,.18); }
.start-title, .config-title, .side-menu-title { color: var(--parchment); text-shadow: 0 1px 0 #000; }
.menu-link::after { background: var(--gold); }
#sideMenu { background: linear-gradient(180deg,#211b14,#15110d); color:var(--parchment); border-right:1px solid #5d4a2d; }
.side-menu-section { padding-bottom:22px; border-bottom:1px solid rgba(179,138,69,.22); }
.side-menu-title { border-bottom:1px solid rgba(179,138,69,.35); }
.side-btn, .layer-control-btn { border-color:#655337; color:var(--parchment); background:rgba(0,0,0,.12); border-radius:0; }
.side-btn:hover, .layer-control-btn:hover:not(:disabled) { background:var(--gold); border-color:var(--parchment-dark); color:#17130e; }
.side-btn.ghost:hover { background:#3b3023; border-color:#806b49; }
.effect-slider { accent-color:var(--gold); }
#viewport { background:#6f695e; }
#canvas { box-shadow:0 14px 45px rgba(0,0,0,.42); }
#selectionHandles { outline-color:var(--gold); }
#selectionResizeHandle { background:var(--gold); }
#selectionRotateHandle { background:var(--blood); border:1px solid var(--parchment); }
.side-help { margin:8px 0 0; font:11px/1.45 Arial,sans-serif; color:#9f927b; }
.crop-action:disabled { opacity:.35; cursor:default; }

/*
    Denna CSS matchade tidigare INTE det JS faktiskt skapar.
    JS bygger elementen med klasser (.crop-overlay, .crop-frame,
    .crop-handle + hornklass) och dataset.corner — inte id:na
    #cropOverlay/#cropMoveArea eller attributet data-edge som
    denna fil letade efter. Resultatet: overlayen fick aldrig
    position/storlek/z-index, sa croprutan syntes aldrig eller
    gick inte att dra. Reglerna nedan matchar de riktiga
    klasserna/attributen.

    Overlayen ligger i document.body och positioneras med
    getBoundingClientRect-varden, dvs viewport-relativa — darfor
    position:fixed, inte absolute.
*/

.crop-overlay {
    position: fixed;

    overflow: hidden;

    pointer-events: none;

    z-index: 1000002;
}

.crop-frame {
    position: absolute;

    box-sizing: border-box;

    border: 1px solid var(--gold);

    /*
        9999px spridning morklagger allt utanfor ramen; overlayens
        overflow:hidden klipper morklaggningen till exakt bildens
        yta, inte hela sidan.
    */

    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);

    cursor: move;

    pointer-events: auto;

    touch-action: none;
}

.crop-handle {
    position: absolute;

    width: 12px;
    height: 12px;

    background: var(--parchment);

    border: 1px solid var(--ink);

    box-sizing: border-box;

    z-index: 2;

    pointer-events: auto;

    touch-action: none;
}

.crop-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.crop-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.crop-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.crop-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }


/* =========================================================
   PROJECT MODAL / SYNCHRONIZED CONTROLS
   ========================================================= */
.project-modal-content { width:min(680px, calc(100vw - 40px)); max-height:calc(100vh - 40px); overflow:auto; }
.project-modal-list { display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.project-list-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px; border:1px solid #c9b88e; background:#f3ead2; }
.project-list-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.project-list-info span { font-size:11px; color:#6d6250; }
.project-list-actions { display:flex; gap:6px; flex-wrap:wrap; }
.project-list-actions button, .export-inline button { cursor:pointer; border:1px solid #8c744b; background:#eee0bd; padding:7px 9px; }
.project-list-actions button:hover, .export-inline button:hover { background:#b38a45; color:#17130e; }
.project-list-empty { color:#6d6250; font-size:13px; }
#exportInfo { white-space:normal; font-size:12px; line-height:1.45; }


/* =========================================================
   MARQUEE MULTISELECT
   Saknades helt — rutan skapades i JS men hade ingen regel,
   sa den var osynlig och opositionerad.
   ========================================================= */

.selection-marquee {
    position: absolute;

    box-sizing: border-box;

    border: 1px dashed var(--gold);

    background: rgba(179, 138, 69, .12);

    pointer-events: none;

    z-index: 1000000;
}


/* =========================================================
   PROJECT LIST CONTAINER
   JS skapar <div id="projectList" class="project-list">,
   men bara .project-modal-list fanns i CSS.
   ========================================================= */

.project-list {
    display: flex;

    flex-direction: column;

    gap: 10px;

    margin: 18px 0;
}
/* =========================================================
   COLOR OVERLAY (BORTTAGEN)

   Färg (color tint) ritas numera in i .effect-canvas
   tillsammans med Pixelate/Stamp/Posterize (se applyEffects
   i JS), i samma ordning som exporten använder. Den separata
   CSS-mask-overlayen togs bort eftersom den inte visste
   något om Stamp: i redigeraren råkade de två lagren synas
   ovanpå varandra så det såg kombinerat ut, men vid export
   fanns bara en bild att rita och Stamp skrev över färgen
   helt. Se scriptUD.js för den nya, enhetliga renderingen.
   ========================================================= */
#startScreen {
    background-image: url("images/Background-menu.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* =========================================================
   MAIN MENU – BACKGROUND + LARGE RED TEXT
   ========================================================= */

#startScreen,
#buildConfigScreen {
    background-image: url("images/Background-menu.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Ta bort rutan runt innehållet */

#startScreen .start-content::before {
    display: none;
}


/* Huvudtiteln */

#startScreen .start-title {
    color: #ff0000;

    font-size: clamp(
        70px,
        10vw,
        150px
    );

    line-height: 0.95;

    text-shadow: none;
}


/* BUILD / LOAD / ABOUT */

#startScreen .menu-link {
    color: #ff0000;

    font-size: 38px;

    background: transparent;
    border: none;

    text-shadow: none;

    padding: 3px 0;
}


/* Avstånd mellan menyalternativen */

#startScreen .start-menu {
    gap: 18px;
}


/* Hover-linje */

#startScreen .menu-link::after {
    background: #ff0000;
}
/* =========================================================
   BUILD CONFIG – RED TEXT, NO FRAME
   ========================================================= */

/* Ta bort rutan runt innehållet */
#buildConfigScreen .config-content::before {
    display: none;
}


/* All vanlig text */
#buildConfigScreen {
    color: #ff0000;
}


/* Rubriken */
#buildConfigScreen .config-title {
    color: #ff0000;
    text-shadow: none;
}


/* Etiketterna */
#buildConfigScreen .config-label,
#buildConfigScreen .dimension-input,
#buildConfigScreen .dimension-x {
    color: #ff0000;
}


/* Knapparna för t.ex. PX / CM / MM och orientation */
#buildConfigScreen .segmented-btn {
    color: #ff0000;
}


/* Den valda knappen */
#buildConfigScreen .segmented-btn.active {
    color: #ff0000;
}


/* Siffrorna i width / height-fälten */
#buildConfigScreen .dimension-input input {
    color: #ff0000;
}


/* Back / Continue */
#buildConfigScreen .ghost-btn,
#buildConfigScreen .primary-btn {
    color: #ff0000;
}


/* Ingen textskugga någonstans på denna sida */
#buildConfigScreen * {
    text-shadow: none;
}