html, body {
    font-family: 'Nunito', 'Roboto', Arial, sans-serif;
}

/* ============================
   Design parity with Server UI
   ============================ */

/* Handy layout helper (same as server) */
.home-card-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.home-card-stack > * {
    flex: 1 1 260px;
}

/* WortSchatz Buttons – spielerisch & kräftig */
.mud-button-filled, .mud-button-outlined {
    font-weight: 700;
    border-radius: 999px;
    padding: 12px 24px;
    text-transform: none;
}

.mud-button-filled-size-small, .mud-button-outlined-size-small {
    padding: 4px 10px;
    font-size: .8125rem;
}

@media (max-width: 600px) {
    .mud-button-filled, .mud-button-outlined {
        padding: 8px 14px;
    }

    .mud-button-filled-size-small, .mud-button-outlined-size-small {
        padding: 3px 8px;
        font-size: .78rem;
    }
}

/* Effekte für den Game Modus */
.anim-pop {
    animation: pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.anim-shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.anim-flash-red {
    animation: flash-red 0.4s ease-in-out;
}

.highscore-glow {
    animation: glow 1.5s ease-in-out infinite alternate;
    color: #ffb74d;
    text-shadow: 0 0 10px #ffb74d;
}

@keyframes pop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes glow {
    from { text-shadow: 0 0 5px #fff, 0 0 10px #ffb74d; }
    to { text-shadow: 0 0 10px #fff, 0 0 20px #ffb74d; }
}

@keyframes flash-red {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 0, 0, 0); }
    50% { box-shadow: inset 0 0 50px 20px rgba(255, 0, 0, 0.5); }
}

.correct-answer {
    color: #2e7d32;
    font-weight: bold;
    animation: pop 0.5s ease-out;
}

.error-answer,
.wrong-answer {
    color: #c62828;
    font-weight: bold;
    animation: shake 0.4s ease-in-out;
}

/* Simple rolling/scrolling animations (used by hunter UI) */
.rolling-boulder { animation: roll 2s linear infinite; }

@keyframes roll {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes scroll-background {
    from { background-position-x: 0px; }
    to { background-position-x: -15240px; }
}

.scrolling-track {
    animation: scroll-background 200s linear infinite;
}

/* Prevent image dragging globally (matches server behavior) */
img {
    -webkit-user-drag: none;
    user-select: none;
}

/* Fonts used by inputs */
@font-face {
    font-family: 'Andika';
    src: url('../fonts/Andika-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Grundschrift';
    src: url('../fonts/grundschrift-beta.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bienchen A';
    src: url('../fonts/Bienchen a.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bienchen B';
    src: url('../fonts/Bienchen b.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff');
    font-weight: normal;
}

/* Schulheft-Look für Textfelder */
.school-notebook-input .mud-input-root {
    /* Papier-Hintergrund erzwingen (auch im Dark Mode) */
     border-radius: 14px;
     background-color: antiquewhite !important;
}

/* Fallback, falls .mud-theme-dark doch irgendwo gesetzt wird (z.B. auf mud-layout) */
.mud-theme-dark .school-notebook-input .mud-input-root {
    background-color: #bcaaa4 !important; 
}

/* Wir nutzen das Input-Element selbst für den Hintergrund, das ist am sichersten gegen MudBlazor-Overlays */
.school-notebook-input .mud-input-slot {
    font-family: 'Kalam', 'Comic Sans MS' !important;
    font-size: 2.7rem !important;
    line-height: 1.2 !important;
    color: #1a237e !important; /* Füller-Blau */
    /* SVG-Hintergrund: Häuschen + 4 Linien */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='190' viewBox='0 0 2000 190'%3E%3Cline x1='0' y1='40' x2='2000' y2='40' stroke='%23000' stroke-width='1'/%3E%3Cline x1='0' y1='110' x2='2000' y2='110' stroke='%23000' stroke-width='1'/%3E%3Cline x1='0' y1='180' x2='2000' y2='180' stroke='%23000' stroke-width='1'/%3E%3Cline x1='30' y1='0' x2='30' y2='190' stroke='%23c62828' stroke-width='1'/%3E%3C/svg%3E") !important;
    height: 100% !important;
    background-repeat: no-repeat !important;
    background-size: auto 100% !important; /* Fix aspect ratio based on height */
    background-position: left center !important; /* Fix to left edge */
    /* WICHTIG: Padding, damit der Text nicht über dem Häuschen steht und auf der Linie sitzt */
    padding-left: 30px !important;
    padding-top: 17px !important;
}

.druckbuchstaben.school-notebook-input .mud-input-slot {
    font-family: 'Grundschrift', 'Andika', 'Kalam', 'Comic Sans MS' !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='190' viewBox='0 0 2000 190'%3E%3Crect x='20' y='120' width='60' height='30' fill='none' stroke='%23000' stroke-width='3'/%3E%3Crect x='20' y='80' width='60' height='40' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cpolygon points='20,80 50,45 80,80' fill='none' stroke='%23000' stroke-width='3'/%3E%3Crect x='42' y='95' width='16' height='25' fill='none' stroke='%23000' stroke-width='3'/%3E%3Cline x1='30' y1='120' x2='50' y2='150' stroke='%23000' stroke-width='5'/%3E%3Crect x='83' y='80' width='1917' height='40' fill='%23d4cac7'/%3E%3Cline x1='80' y1='150' x2='2000' y2='150' stroke='%23000' stroke-width='2'/%3E%3Cline x1='80' y1='120' x2='2000' y2='120' stroke='%23000' stroke-width='3'/%3E%3Cline x1='80' y1='80' x2='2000' y2='80' stroke='%23000' stroke-width='2'/%3E%3Cline x1='50' y1='45' x2='2000' y2='45' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") !important;
    padding-left: 50px !important;
}

.schreibschift.school-notebook-input .mud-input-slot {
    font-family: 'Bienchen A','Grundschrift', 'Andika', 'Kalam', 'Comic Sans MS', cursive !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='190' viewBox='0 0 2000 190'%3E%3Crect x='0' y='80' width='2000' height='40' fill='%23d4cac7'/%3E%3Cline x1='0' y1='150' x2='2000' y2='150' stroke='%23000' stroke-width='2'/%3E%3Cline x1='0' y1='120' x2='2000' y2='120' stroke='%23000' stroke-width='3'/%3E%3Cline x1='0' y1='80' x2='2000' y2='80' stroke='%23000' stroke-width='2'/%3E%3Cline x1='0' y1='50' x2='2000' y2='50' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") !important;
    font-size: 3.5rem !important;
}

/* Cursor etwas dicker machen für bessere Sichtbarkeit */
.school-notebook-input input {
    caret-color: #ff5722;
}

/* Handwriting Canvas (für Lernwörter) */
.ws-handwriting-canvas {
    width: 100%;
    height: 100% !important; /* height should fit parent exactly */
    display: block;
    /* Ensure border & background match server or are transparent if overlay */
    background: transparent !important; 
    border: none !important;
}

/* Answer-area wrapper for canvas overlay */
.ws-answer-area {
    position: relative;
    height: auto; /* Let text field determine height */
}

/* Make MudTextField fill the wrapper (so canvas can match it exactly) */
.ws-answer-area .mud-input-root {
    /* Height is determined by content/padding/font-size */
}

.ws-answer-area .mud-input-slot {
    /* Ensure consistent height for canvas matching */
}

/* Overlay canvas: always exactly parent size */
.ws-handwriting-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10;

    background: transparent;
    border: none;

    touch-action: none;

    /* No fixed top offset. The overlay must align exactly with the input. */
    top: 0;
    left: 0;
}

/* Clear button floats above the input area */
.ws-handwriting-clear {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 11;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(2px);
}

/* Case marker button inside answer input (right aligned) */
.ws-answer-area {
    position: relative;
}

.ws-case-marker--inline {
    position: absolute;
    left: 0px;
    top: -35px;
    z-index: 12;
    min-width: 54px;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 900;
    line-height: 1;
}

.flying-diamond {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 100;
    animation: fly-to-counter 0.8s ease-in-out forwards;
}

@keyframes fly-to-counter {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(40px, -180px) scale(0.5);
        opacity: 0;
    }
}

@keyframes fly-to-counter-high {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(40px, -600px) scale(0.5);
        opacity: 0;
    }
}

/* --- Mobile FAB: frosted backdrop behind floating action buttons ---
   Usage: add class "ws-fab-frost" to a MudFab and keep position:fixed.
   We use a pseudo element so the blur appears BEHIND the button.
*/
.ws-fab-frost {
    position: fixed; /* ensure pseudo element is anchored correctly */
}

.ws-fab-frost::before {
    content: "";
    position: absolute;
    inset: 0px; /* padding around the button */
    border-radius: 999px;

    /* Stronger, less transparent glass (closer to server) */
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);

    /* slightly stronger outline so it reads as a pill behind the FAB */
    border: 1px solid rgba(0, 0, 0, 0.12);

    /* clearer shadow like server */
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);

    z-index: -1; /* behind the button */
    pointer-events: none;
}

/* Dark mode tuning (if .mud-theme-dark exists in DOM) */
.mud-theme-dark .ws-fab-frost::before {
    background: rgba(10, 10, 10, 0.45);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}

/* Safari iOS fallback: if backdrop-filter unsupported, keep a stronger solid backdrop */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ws-fab-frost::before {
        background: rgba(255, 255, 255, 0.80);
        border: 1px solid rgba(0, 0, 0, 0.14);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20);
    }

    .mud-theme-dark .ws-fab-frost::before {
        background: rgba(10, 10, 10, 0.78);
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.60);
    }
}

/* ============================
   App background (parity with Server UI)
   ============================ */

/* Light mode: soft, warm background like the server UI */
body {
    background: linear-gradient(180deg, #f7f6f3 0%, #ffffff 60%, #f7f6f3 100%);
}

/* Dark mode background */
.mud-theme-dark body,
body.mud-theme-dark {
    background: #121212;
}

/* Ensure MudBlazor layout doesn't render a different background */
.mud-layout {
    background: transparent;
}

.ws-mp-player-chip {
    border-radius: 999px;
}

.ws-mp-player-chip--correct {
    border-color: var(--mud-palette-success) !important;
    background-color: rgba(46, 125, 50, 0.12);
}

.ws-mp-player-chip--wrong-blink {
    animation: ws-mp-wrong-blink 0.35s ease-in-out 0s 2;
    border-color: var(--mud-palette-error) !important;
    background-color: rgba(211, 47, 47, 0.12) !important;
}

@keyframes ws-mp-wrong-blink {
    0% { background-color: rgba(211, 47, 47, 0.0); }
    50% { background-color: rgba(211, 47, 47, 0.35); }
    100% { background-color: rgba(211, 47, 47, 0.0); }
}

/* --- Fix: keep per-card borders like server UI --- */
.ws-mp-winner-card { border: 1px solid rgba(46,125,50,0.75); }
.ws-mp-start-card { border: 1px solid rgba(33,150,243,0.75); }
.ws-mp-loser-card, .ws-mp-timeout-card { border: 1px solid rgba(96,125,139,0.75); }

/* Multiplayer overlay cards: more 'card-like' spacing (closer to Standard game UI) */
.ws-mp-winner-card,
.ws-mp-start-card,
.ws-mp-loser-card,
.ws-mp-timeout-card {
    padding: 22px 22px;
    border-radius: 26px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.50);
}

@media (max-width: 600px) {
    .ws-mp-winner-card,
    .ws-mp-start-card,
    .ws-mp-loser-card,
    .ws-mp-timeout-card {
        padding: 18px 16px;
        border-radius: 22px;
    }
}

/* PWA Multiplayer overlays: enforce absolute overlay layer (avoid later CSS overrides) */
.ws-mp-winner-overlay,
.ws-mp-loser-overlay,
.ws-mp-timeout-overlay,
.ws-mp-start-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
}

/* =============================
   Multiplayer overlays (PWA)
   ============================= */

/* Ensure overlays are centered relative to the round card itself */
.ws-mp-round {
    position: relative;
}

/* Shared overlay base: perfect centering + stronger blur */
.ws-mp-winner-overlay,
.ws-mp-loser-overlay,
.ws-mp-timeout-overlay,
.ws-mp-start-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;

    display: grid;
    place-items: center;

    padding: 16px;

    /* darker + blurrier like the other modes */
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    animation: ws-mp-overlay-fade-in 220ms ease-out both;
    pointer-events: none;
}

/* Make cards stay centered even on very small screens */
.ws-mp-winner-card,
.ws-mp-loser-card,
.ws-mp-timeout-card,
.ws-mp-start-card {
    width: min(92%, 420px);
    margin: 0;
}

/* --- Trace Preview Canvas (TestResultDetailDialogPwa) ---
   Displays a small preview of handwriting traces.
   Must have transparent background (not default black of canvas).
*/
.ws-trace-preview-container {
    position: relative;
    width: 180px;
    height: 56px;
    background: linear-gradient(180deg, #fffbf5 0%, #f5efe8 100%);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    overflow: hidden;
}

.ws-trace-preview-container--mobile {
    width: 100%;
    height: 64px;
}

.ws-trace-preview-canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}

.ws-trace-preview-play {
    position: absolute;
    right: 2px;
    bottom: 2px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(2px);
}


/* --- Trace Overlay Canvas (HandwritingTraceDialogPwa) ---
   Full-size canvas for playback of handwriting traces in dialog.
*/
.ws-trace-overlay-canvas {
    display: block;
    width: 100%;
    height: 280px;
    background: linear-gradient(180deg, #fffbf5 0%, #f5efe8 100%);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
}

/* ============================
   Landing Page (Unauthenticated Users)
   ============================ */

/* Feature cards on landing page - ensure equal heights */
.landing-feature-card {
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.landing-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Hero section text shadow for better readability */
.landing-hero-text {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments for landing page buttons */
@media (max-width: 600px) {
    .landing-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .landing-cta-buttons .mud-button {
        width: 100%;
    }
}

/* ============================
   Active Navigation Highlighting
   ============================ */

/* Mobile Drawer: Aktiver MudNavLink mit Underline */
.mud-nav-link.active,
.mud-navlink.active,
.mud-nav-link[aria-current="page"],
.mud-navlink[aria-current="page"] {
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 3px !important;
    font-weight: 700 !important;
}

/* Desktop AppBar: Aktiver Button mit Underline */
.ws-nav-active {
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 3px !important;
    font-weight: 700 !important;
}

/* ============================
   Game Setup Wizard (Multi-step game selection)
   ============================ */

/* Mode selection cards - hover effects */
.game-mode-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.game-mode-card:hover:not([style*="not-allowed"]) {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Step transition animations */
@keyframes wizard-slide-in {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wizard-step-content {
    animation: wizard-slide-in 0.3s ease-out;
}

/* Progress indicator pulse for active step */
@keyframes step-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.wizard-step-active {
    animation: step-pulse 2s ease-in-out infinite;
}

/* Content type cards gradient hover */
.content-type-card:hover {
    filter: brightness(1.1);
}

/* Class/Category selection grid */
.class-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

@media (max-width: 600px) {
    .class-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Start button animation */
@keyframes start-button-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(124, 77, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(124, 77, 255, 0.6);
    }
}

.wizard-start-button:not(:disabled) {
    animation: start-button-glow 2s ease-in-out infinite;
}

/* Back button hover effect */
.wizard-back-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

/* =============================
   Multiplayer Handicap Effects ("Schatzflüche")
   ============================= */

/* 🔦 Flashlight: dark overlay with a radial transparent hole following cursor/finger */
.ws-mp-flashlight-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        circle var(--fl-radius, 80px) at var(--fl-x, 150px) var(--fl-y, 150px),
        transparent 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.94) 100%
    );
    transition: none; /* immediate tracking */
}

/* 🧹 Fog overlay that fades as user swipes */
.ws-mp-fog-overlay {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: auto;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        rgba(100, 110, 140, 0.96) 0%,
        rgba(80, 90, 120, 0.92) 25%,
        rgba(130, 120, 150, 0.90) 50%,
        rgba(90, 100, 130, 0.94) 75%,
        rgba(110, 100, 140, 0.96) 100%
    );
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: calc(1 - var(--fog-progress, 0) / 100);
    transition: opacity 0.12s ease-out;
}

.ws-mp-fog-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.3px;
    animation: ws-fog-hint-bob 1.5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes ws-fog-hint-bob {
    from { transform: translateY(-4px); }
    to   { transform: translateY(4px); }
}

/* 🪞 Mirror text: flip question text horizontally */
.ws-mp-mirror-text .mud-typography-h5,
.ws-mp-mirror-text .mud-typography-h3 {
    transform: scaleX(-1);
    display: inline-block;
}

.ws-mp-mirror-text .mud-typography-subtitle2 {
    transform: scaleX(-1);
    display: inline-block;
}

/* Handicap badge indicator (shown in top-left corner of round card) */
.ws-mp-handicap-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    animation: ws-handicap-badge-pop 400ms cubic-bezier(.2,.9,.2,1) both;
    white-space: nowrap;
}

.ws-mp-handicap-badge--leader {
    background: rgba(211, 47, 47, 0.15);
    border: 1px solid rgba(211, 47, 47, 0.4);
    color: #e53935;
}

.ws-mp-handicap-badge--boost {
    background: rgba(46, 125, 50, 0.15);
    border: 1px solid rgba(46, 125, 50, 0.4);
    color: #43a047;
}

/* Dark mode adjustments */
.mud-theme-dark .ws-mp-handicap-badge--leader {
    color: #ef5350;
}

.mud-theme-dark .ws-mp-handicap-badge--boost {
    color: #66bb6a;
}

@keyframes ws-handicap-badge-pop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}