/* =======================================================
   MOBILE OVERRIDES — PORTRAIT
   ======================================================= */
@media (max-width: 768px) and (orientation: portrait) {

	body {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		height: 100dvh;
	}

    .bcaText {
        height: 44px;
        top: 6px;
        left: 6px;
    }

    #wave-buttons {
        top: 6px;
        right: 6px;
        gap: 4px;
    }

    .wave-button1,
    .wave-button2 {
        height: 26px;
    }

    #textbox-overlay {
        position: fixed;
        inset: 0;
        padding: 12px;
        padding-top: 70px;
        padding-bottom: 120px;
        align-items: center;
    }
	
    #textbox {
        width: 100%;
        max-width: 480px;
        padding: 14px;
        border-radius: 14px;
        max-height: 100%;
    }
	
    #textbox-text h2 {
        font-size: 0.8rem;
    }
	
    #textbox-text {
        font-size: 0.68rem;
        line-height: 1.3;
    }

    #textbox-buttons {
        flex-wrap: nowrap;
        gap: 8px;
    }

    #close-textbox,
    #complete-level,
    #skip-intro {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 6px;
        font-size: 13px;
        white-space: normal;
    }

    #footer-buttons {
        flex-direction: column;
        align-items: flex-end;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px) + 40px);
        right: 6px;
        gap: 4px;
    }

    
    #SecretCode-button,
    #footer-bottom-row > div {
        width: 64px;
        padding: 6px;
        font-size: 0.65rem;
    }
	
	#impressum-button,
    #Makers-button {
        width: 64px;
        padding: 6px;
        font-size: 0.65rem;
    }
	
	.map-point {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .map-point-travel {
        width: 20px;
        height: 16px;
    }

    .map-point-character {
		width: 13px;
		height: 13px;
	}

    #pipe-cursor,
    #backpipe-cursor {
        width: 16px;
        height: 16px;
    }
	
	/* Sound aktivieren Mobile*/
    #mobile-audio-unlock {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        padding: 14px 24px;
        background: white;
        color: black;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: bold;
    }

	#audio-choice-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.75);
		z-index: 9999;
		justify-content: center;
		align-items: center;
	}
	#audio-choice-overlay .audio-choice-box {
		background: #121212;
		border: 2px solid #444;
		border-radius: 24px;
		padding: 28px;
		color: white;
		text-align: center;
		max-width: 340px;
	}
	.audio-choice-buttons {
		display: flex;
		gap: 12px;
		justify-content: center;
		margin-top: 16px;
	}
	.audio-choice-buttons button {
		background: white;
		color: black;
		border: none;
		border-radius: 12px;
		padding: 12px 20px;
		font-weight: bold;
		cursor: pointer;
	}
	
	#level-number-badge {
        top: 3px;
        right: 14px;
        gap: 1px;
    }

    #level-number-badge .star {
        width: 0.7rem;
        height: 0.7rem;
        font-size: 0.7rem;
    }
}

/* =======================================================
   MOBILE OVERRIDES — LANDSCAPE
   ======================================================= */
@media (max-height: 500px) and (orientation: landscape) {

    .bcaText {
        height: 40px;
        top: 4px;
        left: 4px;
    }
	
	#map-container {
        width: min(96vw, 92dvh * 1535 / 1024);
        height: min(92dvh, 96vw * 1024 / 1535);
    }

    #wave-buttons {
        top: 4px;
        right: 4px;
        gap: 3px;
    }

    .wave-button1,
    .wave-button2 {
        height: 22px;
    }

    #textbox-overlay {
        padding: 6px;
        align-items: center;
    }

    #textbox {
        width: 100%;
        max-width: 600px;
        padding: 8px 14px;
        border-radius: 12px;
        max-height: 82%;
    }

    #textbox-text h2 {
        font-size: 0.9rem;
    }

    #textbox-text {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    #textbox-buttons {
        flex-wrap: wrap;
        gap: 6px;
    }

    #close-textbox,
    #complete-level,
    #skip-intro {
        width: auto;
        flex: 1 1 auto;
        min-width: 90px;
        padding: 6px 4px;
        font-size: 11px;
    }

    #footer-buttons {
        bottom: calc(4px + env(safe-area-inset-bottom, 0px) + 30px);
        right: 4px;
        gap: 3px;
    }

    #impressum-button,
    #SecretCode-button,
    #Makers-button {
        width: 56px;
        padding: 5px;
        font-size: 0.55rem;
    }
	
	.map-point {
        width: 16px;
        height: 16px;
        border-width: 2px;
    }

    .map-point-travel {
        width: 20px;
        height: 16px;
    }

    #pipe-cursor,
    #backpipe-cursor {
        width: 16px;
        height: 16px;
    }
	
	/* Sound aktivieren Mobile*/
    #mobile-audio-unlock {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        padding: 14px 24px;
        background: white;
        color: black;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: bold;
    }

	#audio-choice-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.75);
		z-index: 9999;
		justify-content: center;
		align-items: center;
	}
	#audio-choice-overlay .audio-choice-box {
		background: #121212;
		border: 2px solid #444;
		border-radius: 24px;
		padding: 28px;
		color: white;
		text-align: center;
		max-width: 340px;
	}
	.audio-choice-buttons {
		display: flex;
		gap: 12px;
		justify-content: center;
		margin-top: 16px;
	}
	.audio-choice-buttons button {
		background: white;
		color: black;
		border: none;
		border-radius: 12px;
		padding: 12px 20px;
		font-weight: bold;
		cursor: pointer;
	}
	
	#level-number-badge {
        top: 0px;
        right: 20px;
        gap: 1px;
    }

    #level-number-badge .star {
        width: 0.75rem;
        height: 0.75rem;
        font-size: 0.75rem;
    }
}