/* Universal Fullscreen Game UI */
.universal-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg);
    z-index: 9999;
    padding: 20px 20% 0 20%;
    /* Minimal top padding (20px), Side 20% */
    /* 5% horizontal padding */
    display: none;
    /* Hidden by default */
    justify-content: center;
    /* Center vertically */
    flex-direction: column;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.universal-game-overlay.active {
    display: flex;
}

/* Header: Timer & Stats moved to Right Column */
/* Header: Timer & Stats moved to Top Right Column */
.ug-header {
    position: absolute;
    right: 2%;
    /* Right gutter */
    top: 70px;
    /* Align below Close button (20px + 40px + gap) */
    transform: none;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    /* Stack vertically */
    gap: 10px;
    /* Reduced gap */
    z-index: 100;
    align-items: flex-end;
    /* Align to right */
}

.ug-header-left {
    display: contents;
}

.ug-timer {
    background: #000;
    color: #fff;
    padding: 8px 16px;
    /* Reduced padding */
    border-radius: 8px;
    /* Smaller radius */
    font-weight: 700;
    font-size: 1rem;
    /* Reduced font size */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
}

.ug-stats {
    background: #0f172a;
    color: #fff;
    padding: 8px 16px;
    /* Reduced padding */
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    /* Reduced font size */
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Close Button - Outside Top Right */
.ug-close-btn {
    position: fixed !important;
    top: 20px !important;
    right: 30px !important;
    color: #ef4444 !important;
    background: #fff !important;
    /* White circle background */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer;
    z-index: 99999;
    transition: all 0.2s;
}

.ug-close-btn:hover {
    transform: scale(1.1);
    background: #fee2e2 !important;
}

/* Main Content Grid */
.ug-content {
    flex: 1;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
    /* Bottom padding */
    position: relative;
    overflow: hidden;
}

/* Split Layout (Interview Mode) */
.ug-layout-split {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    /* True 50/50 split regardless of content */
    gap: 20px;
    height: 100%;
}

/* Single Layout (Standard Mode) */
.ug-layout-single {
    display: block;
    height: 100%;
    position: relative;
}

/* Text Container Box (with Vertical Label) */
.ug-box {
    border: 2px solid #0ea5e9;
    /* Sky Blue Border */
    border-radius: 4px;
    /* Slight radius or sharp as image */
    position: relative;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* Allow grid to constrain box height below content intrinsic size */
}

.ug-label {
    background: linear-gradient(135deg, #fe3f96 0%, #ff7eb6 100%);
    /* Pink Theme Gradient */
    color: white;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* Text bottom-to-top */
    padding: 10px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 1px;
    font-size: 0.9rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
}

.ug-text-area {
    flex: 1;
    padding: 20px;
    font-size: 17px;
    line-height: 1.6;
    background: var(--card-bg);
    color: #000000;
    /* Force Black Text */
    /* Deep Purple Text from variables */
    overflow-y: auto;
    font-family: inherit;
    text-align: left;
    /* Ensure text alignment */
}

/* Input Area Styling */
.ug-input-box {
    border: 1px solid #e2e8f0;
    /* Neutral gray border instead of pink */
    /* Pink Border */
    border-radius: 4px;
    padding: 20px;
    font-size: 17px;
    resize: none;
    flex: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    outline: none;
    font-family: inherit;
    background: var(--input-bg);
    color: var(--text);
}

.ug-input-box:focus {
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
    /* Neutral gray shadow */
    border-color: #94a3b8;
}

/* Standard Mode Overrides for Transparency/Overlay */
.ug-layout-single .ug-box {
    height: 100%;
    border-color: #cbd5e1;
    /* Grayer border for standard? or keep blue? User said "böyle olacak". Keep style. */
}

/* Standard Mode Input (Hidden/Overlay) */
.ug-input-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 20;
    cursor: text;
}

/* Standard Text Highlighting */
.ug-text-area .word {
    margin-right: 5px;
    display: inline-block;
}

.ug-text-area .char {
    position: relative;
    border-radius: 2px;
}

.ug-text-area .char.correct {
    color: #22c55e;
    /* Success Green */
}

.ug-text-area .char.incorrect {
    color: #e11d4f;
    /* Danger Red */
    background: #fee2e2;
}

.ug-text-area .char.current {
    background-color: rgba(254, 63, 150, 0.2);
    /* Pink Primary Tint */
    border-bottom: 2px solid #fe3f96;
}

/* Stats Overlay (Optional - e.g. WPM floating?) */
/* User image didn't show stats, only Timer. Maybe stats are shown at end? Or small? */
/* I will add a small status bar next to timer if needed. */

/* --- Line Tracking Mode Styles --- */
.ug-text-area.mode-line .word {
    transition: opacity 0.3s, text-shadow 0.3s, background 0.2s;
    opacity: 0.3;
    /* Default dimmed */
    filter: blur(0.5px);
}

/* Current line text is clear and NO background */
.ug-text-area.mode-line .word.line-current {
    opacity: 1 !important;
    filter: none !important;
    background: none !important;
    /* Strip provides background */
    color: #000000 !important;
    /* Force Black */
}

/* Force black on actual characters */
.ug-text-area.mode-line .word.line-current .char {
    color: #000000 !important;
    background: transparent !important;
    border-bottom: none !important;
    /* Remove Standard Mode red bar */
}

/* Ensure no individual word/char highlight leaks through */
.ug-text-area.mode-line .char.current {
    background: transparent !important;
    border-bottom: none !important;
}

.ug-text-area.mode-line .word.line-next {
    opacity: 0.7;
    filter: none;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

/* The Strip */
.line-highlight-strip {
    position: absolute;
    left: 0;
    width: 100%;
    background: rgba(254, 63, 150, 0.1);
    /* Pink tint */
    border-radius: 8px;
    z-index: 1;
    /* Below text, above background */
    /* transition: top 0.2s ease, height 0.2s ease; REMOVED for instant response */
    pointer-events: none;
}

/* Ensure text is above strip */
.ug-text-area.mode-line {
    position: relative;
    z-index: 0;
}

.ug-text-area.mode-line .word {
    position: relative;
    z-index: 2;
}

/* Line Mode Input Box matches Blind input */