@font-face {
    font-family: "DefaultFont";
    /*src: url("assets/fonts/ComicNeue-Bold.woff2") format("woff2"),*/
	/*src: url("assets/fonts/PatrickHand-Regular.woff2") format("woff2"),*/
	/*src: url("assets/fonts/Itim-Regular.woff2") format("woff2"),*/
	/*src: url("assets/fonts/ShantellSans.woff2") format("woff2"),*/
	/*src: url("assets/fonts/ShantellSans-italic.woff2") format("woff2"),*/
	/*src: url("assets/fonts/UberhandTextProBold.woff2") format("woff2"),*/
  	src: url("assets/fonts/UberhandTextProRegular.woff2") format("woff2"),
	font-weight: normal;
    font-style: normal;
    font-display: swap;  /* sorgt für schnelleren Textaufbau */
}

:root
{
    --bg: rgba(14, 17, 23, 1);
    --panel: rgba(11, 15, 21, 1);
    --border: rgba(42, 50, 64, 1);
    /*--text: rgba(231, 236, 243, 1);*/
	--text: rgba(255, 255, 255, 1);
    --muted: rgba(170, 179, 192, 1);
    --accent-selected: rgba(68, 170, 255, 1);
	--font-default: "DefaultFont", sans-serif;
	--fontsize-default: 4.6vw;
	--fontsize-inventar-description: 3.5vw;
	/* --font-default: MV Boli, Segoe Print, Calibri, Tahoma, Arial, sans-serif, system-ui, Segoe UI, Roboto, Arial; */
}

/* Basis */
*
{
    box-sizing: border-box;
}

html
{
    font-size: var(--fontsize-default);
}

body
{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-default);
    line-height: 1.1;
}

body.freeze
{
    overflow: hidden;
}

button,
input,
textarea {
    font-family: var(--font-default);
}


.app [style*="font-size"]
{
    font-size: inherit !important;
}

/* App-Container */
.app

{
    max-width: 98vw;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh; /* NEU: Dynamische Viewport-Höhe */
    min-height: calc(var(--vh, 1vh) * 100); /* Zusatz für ältere Browser */
    display: flex;
    flex-direction: column;
    padding: 0 1vw;
}

/* Header */
.header
{
    padding: 1.2vw 1.6vw;
    border-bottom: 0.15vw solid var(--border);
    position: sticky;
    top: 0;
    background: var(--panel);
    display: flex;
    gap: 1vw;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fontsize-default);
}

/* Inhalt */
.content
{
    padding: 1.2vw 1.6vw;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    font-size: var(--fontsize-default);
}

/* Footer */
.footer
{
    margin-top: auto;
    padding: 1.2vw 1.6vw;
    border-top: 0.15vw solid var(--border);
    background: var(--panel);
    display: flex;
    gap: 1vw;
    font-size: var(--fontsize-default);
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}

/* Bilder */
.img
{
    width: 100%;
    /*aspect-ratio: 10 / 7;*/
    border: 0.15vw solid var(--border);
    border-radius: 2vw;
    object-fit: cover;
    background: rgba(26, 34, 48, 1);
    user-select: none;
}

/* Fließtext */
.text
{
    user-select: none;
    white-space: pre-wrap;
    line-height: 1.1;
    font-size: var(--fontsize-default);
}

/* Auswahl-Liste */
.choices
{
    display: flex;
    flex-direction: column;
    gap: 1vw;
    font-size: var(--fontsize-default);
}

/* Buttons – Basis-Stil für klickbare Elemente, die gleich aussehen sollen */
button,
.badge,
.overlay-close,
.btn-view,
.btn-use,
.btn-back,
.btn-combine
{
    border: 0.15vw solid var(--border);
    border-radius: 2vw;
    font-size: var(--fontsize-default);
    cursor: pointer;
    user-select: none;
}

/* Primärer Button-Stil (blau-dunkel) – für <button>, .badge, .overlay-close, .btn-back */
button,
.badge,
.overlay-close,
.btn-back
{
    background: rgba(17, 32, 52, 1);
    color: var(--text);
    padding: 1.7vw 2vw;
    text-align: left;
}

button:not(.btn-use):not(.btn-combine):not(.btn-view):not(.confirm-content button):hover
{
    background: rgba(18, 38, 64, 1);
}

/* Reihenlayout */
.row
{
    display: flex;
    gap: 1vw;
    align-items: center;
}

.row .inline-btn
{
    white-space: nowrap;
}

/* Eingaben */
.input
{
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.2vw 1.6vw;
    border-radius: 2vw;
    border: 0.15vw solid var(--border);
    background: rgba(11, 18, 28, 1);
    color: var(--text);
    font-size: var(--fontsize-default);
	user-select: none;
}

/* Badge (als klickbares Label) */
.badge
{
    padding: 1.2vw 2vw;
}

/* Variablen-Badge + klein */
.variable-badge
{
    color: var(--text);
    font-weight: 300;
    font-size: 1.4vw;
    user-select: none;
}

.small
{
    font-size: 1.1vw;
    color: rgba(159, 178, 199, 1);
}

/* Utility */
.hidden
{
    display: none;
}

/* ----------------------------- */
/* Overlay für externe Seiten */
/* ----------------------------- */
.overlay
{
    max-width: 98vw;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh; /* NEU */
    min-height: calc(var(--vh, 1vh) * 100); /* NEU */
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

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

.overlay-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2vw 1.6vw;
    border-bottom: 0.15vw solid var(--border);
    background: var(--panel);
}

.overlay-title
{
    font-weight: 300;
    font-size: 6vw;
    user-select: none;
}

.external-area
{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.external-area iframe
{
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bg);
}

/* ----------------------------- */
/* INVENTAR-OVERLAY */
/* ----------------------------- */
.inventory-content
{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.6vw;
    overflow-y: auto;
    user-select: none;
}

/* Inventar als Liste (schmale Zeilen) */
.inventory-grid
{
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
    flex: 1;
    margin-bottom: 2vw;
}

/* Inventar-Item (eine Zeile: Icon | Anzahl | Name | Beschreibung) */
.inventory-item
{
    background: var(--panel);
    border: 0.15vw solid var(--border);
    border-radius: 2vw;
    padding: 1vw 1.6vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1.2vw;
    font-size: var(--fontsize-default);
}

/* Ausgewähltes Item */
.inventory-item.selected
{
    border-color: var(--accent-selected);
    box-shadow: 0 0 1vw 0.2vw rgba(68, 170, 255, 0.5);
}




/* Icon (klein, links) */
.inventory-item-icon
{
    width: 8vw;
    height: 8vw;
    object-fit: cover;
    border-radius: 1vw;
    flex-shrink: 0;
    background: rgba(26, 34, 48, 1);
    user-select: none;
}

/* Anzahl */
.inventory-item-qty
{
    background: rgba(255, 204, 0, 1);
    color: rgba(0, 0, 0, 1);
    padding: 0.4vw 0.8vw;
    border-radius: 100vw;
    font-weight: 600;
    font-size: 4vw;
    min-width: 5vw;
    text-align: center;
    flex-shrink: 0;
    user-select: none;
}

/* Name */
.inventory-item-name
{
    font-size: var(--fontsize-default);
    color: var(--text);
    min-width: 20vw;
    flex-shrink: 0;
}

/* Beschreibung */
.inventory-item-description
{
    font-size: var(--fontsize-inventar-description);
    color: var(--text);
    flex: 1;
}

/* Leeres Inventar */
.inventory-empty
{
    text-align: center;
    font-size: var(--fontsize-default);
    color: var(--muted);
    padding: 5vw;
}

/* Inventar Controls */
.inventory-controls
{
    display: flex;
    gap: 1vw;
    justify-content: center;
    padding-top: 1.6vw;
    border-top: 0.15vw solid var(--border);
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
		
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--panel);
}

/* Benutzen / Zurück / Kombinieren */
.btn-use,
.btn-back
{
    padding: 1.2vw 2vw;
}

/* Anschauen (blau) */
.btn-view
{
    padding: 1.2vw 2vw;
    background: rgba(68, 136, 255, 1);
    color: rgba(255, 255, 255, 1);
}

.btn-view:disabled
{
    background: rgba(17, 32, 52, 1);
    color: rgba(85, 85, 85, 1);
    cursor: not-allowed;
}

/* Use (grün) */
.btn-use
{
    background: rgba(40, 167, 69, 1);
    color: rgba(255, 255, 255, 1);
}

.btn-use:disabled
{
    background: rgba(17, 32, 52, 1);
    color: rgba(85, 85, 85, 1);
    cursor: not-allowed;
}

/* Kombinieren (orange) */
.btn-combine
{
    background: rgba(255, 150, 0, 1);
    color: rgba(255, 255, 255, 1);
}

.btn-combine:disabled
{
    background: rgba(17, 32, 52, 1);
    color: rgba(85, 85, 85, 1);
    cursor: not-allowed;
}

#inventoryOverlay 
{
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#hintOverlay
{
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* Popup bei Inventargegenstand-Fehlversuchen */
.item-fail-content
{
    text-align: center;
}

#itemFailPopup
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    background: rgba(220, 50, 50, 0.97);
    border: 0.3vw solid rgba(138, 24, 24, 1);
    border-radius: 2vw;
    padding: 2vw 4vw;
	user-select: none;
    /* box-shadow: 0 0 2vw 0.5vw rgba(138, 24, 24, 1); */
    max-width: 85vw; /* Maximal 85% Bildschirmbreite */
    width: max-content; /* Passt sich dem Text an */
}

#itemFailText
{
    font-size: var(--fontsize-default);
    color: rgba(255, 255, 255, 1);
}

/* Confirm-Dialog (global) */

.confirm-dialog
{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);  /* Transparent! */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 99999;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.confirm-content
{
    background: rgba(35, 43, 54, 1);
    border: 0.2vw solid rgba(51, 119, 85, 1);
    border-radius: 2vw;
    padding: 3vw 4vw;
    box-shadow: 0 0 3vw 0.4vw rgba(0, 0, 0, 0.8);
}

.confirm-content strong
{
    font-size: var(--fontsize-default);
    font-weight: 100;
    color: rgba(255, 255, 255, 1);
}

.confirm-content em
{
    color: rgba(255, 255, 255, 1);
}

.confirm-content .button-row
{
    display: flex;
    gap: 1vw;
    justify-content: center;
    margin-top: 5vw;
}

.confirm-content button
{
    background: rgba(92, 184, 92, 1);
    color: rgba(255, 255, 255, 1);
    border-radius: 1vw;
    font-size: var(--fontsize-default);
    padding: 1vw 2vw;
    border: none;
    cursor: pointer;
}

.confirm-content button.danger,
.confirm-content button.very-danger
{
    background: rgba(217, 83, 79, 1);
}

/* Input-Blocker (für Modals/Overlays) bei Meldungs-Popup */
#inputBlocker
{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    pointer-events: all;
    background: rgba(0, 0, 0, 0.3) !important;
	
    backdrop-filter: blur(1.2px);
    -webkit-backdrop-filter: blur(1.2px);
    will-change: backdrop-filter;
	
}



/* Auswahl-Rahmenzustände im Inventar */
.inventory-item.selected-use
{
    background: rgba(40, 167, 69, 1);
    /* border-color: rgba(40, 167, 69, 1) !important; */
    /* box-shadow: 0 0 1vw 0.2vw rgba(40, 167, 69, 0.5); */
}

.inventory-item.selected-combine
{
    background: rgba(255, 150, 0, 1);
    /* border-color: rgba(255, 165, 0, 1) !important; */
    /* box-shadow: 0 0 1vw 0.2vw rgba(255, 165, 0, 1); */
}

/* Hinweis-Item (wenn ausgewählt zum Betrachten) */
.inventory-item.hint-selected
{
    background: rgba(68, 136, 255, 1);
}

/* Use-/Betrachten-Button für Hinweis-Items in blau */
.btn-use-hint
{
    background: rgba(68, 136, 255, 1);
    color: rgba(255, 255, 255, 1);
}

.btn-use-hint:disabled
{
    background: rgba(17, 32, 52, 1);
    color: rgba(128, 128, 128, 1);
    cursor: not-allowed;
}