/* Global Styles for Hallucinate UI */
/* osu!lazer-inspired — refined for Bitcount fonts */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* Fonts - Using SDF assets for crisp rendering */
    --font-heading: resource("Fonts/BitcountGridDouble-VariableFont_CRSV,ELSH,ELXP,slnt,wght SDF");
    --font-body:    resource("Fonts/BitcountSingleInk-VariableFont_CRSV,ELSH,ELXP,SZP1,SZP2,XPN1,XPN2,YPN1,YPN2,slnt,wght SDF");

    /* Colors */
    --primary-color: #ffffff;
    --accent-color: #00ffcc;
    --background-blur: rgba(0, 0, 0, 0.7);
    
    /* Spacing system */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* Surface & Borders */
    --color-surface:        rgba(10, 10, 10, 0.85);
    --color-surface-light:  rgba(255, 255, 255, 0.08);
    --color-border:         rgba(255, 255, 255, 0.15);
    --color-border-hover:   rgba(0, 255, 204, 0.5);

    /* Palette — osu! inspired colors */
    --color-btn-settings:   #7B6EE8;   /* purple */
    --color-btn-join:       #4DC8A0;   /* teal */
    --color-btn-create:     #E8834D;   /* orange */
    --color-btn-profile:    #E84D8A;   /* pink */
    --color-btn-exit:       #666666;   /* gray */
    --color-btn-cancel:     #FF4444;   /* red */

    /* Text */
    --color-text-primary:   rgba(255, 255, 255, 0.95);
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-text-accent:    #00ffcc;

    /* Border radius */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-pill: 999px;
}

/* ============================================================
   BASE RESET
   ============================================================ */
.screen-root {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: transparent;
    -unity-font-definition: var(--font-body);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.text-heading {
    font-size: 32px;
    -unity-font-style: bold;
    color: var(--color-text-primary);
    -unity-font-definition: var(--font-heading);
    margin-bottom: var(--space-4);
    letter-spacing: 2px;
}

.text-subheading {
    font-size: 24px;
    -unity-font-style: bold;
    color: var(--color-text-accent);
    -unity-font-definition: var(--font-heading);
    margin-bottom: var(--space-3);
}

.text-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    -unity-font-definition: var(--font-body);
    -unity-font-style: bold;
    text-transform: uppercase;
}

.text-body {
    font-size: 16px;
    color: var(--color-text-primary);
    -unity-font-definition: var(--font-body);
}

.text-accent {
    color: var(--color-text-accent);
}

/* ============================================================
   BUTTON — SPRING
   ============================================================ */
.button-spring {
    height: 48px;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    border-radius: var(--radius-md);
    border-width: 0;
    -unity-font-definition: var(--font-body);
    -unity-font-style: bold;
    font-size: 16px;
    color: white;
    background-color: var(--color-surface-light);
    transition-property: scale, background-color, border-color;
    transition-duration: 0.1s;
    transition-timing-function: ease-out-back;
    cursor: link;
    align-items: center;
    justify-content: center;
}

.button-spring:hover {
    scale: 1.05;
    background-color: rgba(255, 255, 255, 0.15);
    border-width: 1px;
    border-color: var(--color-border-hover);
}

.button-spring:active {
    scale: 0.95;
}

/* Per-button accent colors */
.btn-settings { background-color: var(--color-btn-settings); }
.btn-join     { background-color: var(--color-btn-join); }
.btn-create   { background-color: var(--color-btn-create); }
.btn-profile  { background-color: var(--color-btn-profile); }
.btn-exit     { background-color: var(--color-btn-exit); }
.btn-cancel   { background-color: var(--color-btn-cancel); }

/* ============================================================
   RIBBON — dải băng main menu
   ============================================================ */
.ribbon {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    border-width: 2px;
    border-color: var(--color-border);
}

.ribbon .button-spring {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
    min-width: 110px;
    height: 54px;
}

/* ============================================================
   LOGO
   ============================================================ */
.logo-pulse {
    width: 200px;
    height: 200px;
    align-self: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    border-width: 4px;
    border-color: var(--color-border-hover);
    background-color: white;
    overflow: hidden;
}

.logo-text {
    -unity-font-definition: var(--font-heading);
    font-size: 40px;
    color: black;
    -unity-font-style: bold;
}

/* ============================================================
   SURFACE / PANEL
   ============================================================ */
.panel-glass {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    border-width: 2px;
    border-color: var(--color-border);
    padding: var(--space-8);
}

.panel-glass--right {
    width: 40%;
    height: 100%;
    border-radius: 0;
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
    border-left-width: 3px;
    border-left-color: var(--color-text-accent);
}

/* ============================================================
   INPUT FIELD
   ============================================================ */
.input-field {
    height: 48px;
    border-radius: var(--radius-md);
    border-width: 1px;
    border-color: var(--color-border);
    background-color: var(--color-surface-light);
    color: var(--color-text-primary);
    -unity-font-definition: var(--font-body);
    font-size: 16px;
    padding-left: var(--space-4);
    margin-bottom: var(--space-4);
}

.input-field:focus {
    border-color: var(--color-text-accent);
    background-color: rgba(255, 255, 255, 0.12);
}

.unity-base-text-field__input {
    background-color: transparent;
    border-width: 0;
}

/* ============================================================
   SIDEBAR (Settings)
   ============================================================ */
.sidebar-tab {
    height: 52px;
    padding-left: var(--space-6);
    border-radius: var(--radius-sm);
    background-color: transparent;
    border-width: 0;
    color: var(--color-text-secondary);
    font-size: 16px;
    -unity-text-align: middle-left;
    margin-bottom: var(--space-2);
    -unity-font-definition: var(--font-body);
}

.sidebar-tab:hover {
    background-color: var(--color-surface-light);
    color: var(--color-text-primary);
}

.sidebar-tab.active-tab {
    background-color: rgba(123, 110, 232, 0.2);
    color: var(--color-text-accent);
    border-left-color: var(--color-text-accent);
    border-left-width: 4px;
    border-radius: 0;
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

/* ============================================================
   HUD
   ============================================================ */
.hud-bar {
    height: 24px;
    border-radius: var(--radius-pill);
    border-width: 2px;
    border-color: var(--color-border);
    background-color: rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.unity-progress-bar__container {
    height: 100%;
    min-height: 100%;
}

.unity-progress-bar__background {
    background-color: transparent;
    border-width: 0;
}

.unity-progress-bar__progress {
    border-radius: var(--radius-pill);
}

#HealthBar .unity-progress-bar__progress { background-color: #ff4444; }
#StaminaBar .unity-progress-bar__progress { background-color: #44ff44; }

.hud-slot {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    border-width: 2px;
    border-color: var(--color-border);
    background-color: var(--color-surface);
    margin-right: var(--space-2);
}

.hud-slot--active {
    width: 80px;
    height: 80px;
    border-color: var(--color-text-accent);
    border-width: 3px;
}

/* ============================================================
   ROOM ITEM
   ============================================================ */
.room-item {
    height: 80px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-light);
    border-width: 1px;
    border-color: var(--color-border);
    padding: 0 var(--space-4);
    flex-direction: row;
    align-items: center;
}

.room-item:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--color-text-accent);
}