@import "https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Playfair+Display:wght@400;700&display=swap";

@font-face {
    font-family: "TheGodfather";
    src: url("resourses/fonts/Bondrians.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Title";
    src: url("resourses/fonts/Faith\ Collapsing.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root { 
    --colorDead: #4B4B4B;
    --colorMafia: #5a1f1b;
    --colorNeutral: #4a4338;
    --colorTown: #2b3a3f;
    --colorMafiaAccent: #a34732;
    --colorNeutralAccent: #9a8f7a;
    --colorTownAccent: #6f8f9b;
    --colorAlt: #4CAF50;
    --colorCard: #f9f9f9;
    --colorNonSelectable: #000000ff;
    --colorDoused: #636819ff;
    --colorBewitched: #f1327bff;

    --bg-page: #1c1a17;        /* tamni sepia-ugljen */
    --text-main: #e3dccf;      /* stari papir */

    
    --input-bg: #2a2622;          /* tamni papir */
    --input-border: #4a4338;      /* sepia okvir */
    --input-text: #e3dccf;        /* stari papir */
    --input-placeholder: #9a8f7a;
    --input-focus-border: #a34732; /* mafija akcenat */
    --input-focus-bg: #2f2b27;

    /* BUTTON – neutral */
    --btn-bg: #3a342e;
    --btn-text: #e3dccf;
    --btn-border: #5a5246;
    --btn-hover-bg: #4a4338;
    --btn-active-bg: #2f2b27;

    /* BUTTON – primary (mafija vibe) */
    --btn-primary-bg: #5a1f1b;
    --btn-primary-hover: #6b2621;
    --btn-primary-border: #a34732;

    /* BUTTON – secondary (grad vibe) */
    --btn-secondary-bg: #2b3a3f;
    --btn-secondary-hover: #344a52;
    --btn-secondary-border: #6f8f9b;
}

body {
    max-width: 100vw;
    height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    font-family: "Libre Baskerville";
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    color: wheat;
}

.menu {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    background: linear-gradient(180deg, #1b1b1b, #222);
}

.player-display-menu{
    height: 100%;
    align-items: start;
    grid-template-rows: auto 1fr;
}

.ribbon {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    z-index: 10;
    background-color: black;
}

.player-menu-ribbon{
    height: 15vh;
}

button {
    cursor: pointer;
}

/* MAIN MENI */

#mainMenu {
    display: flex;
    background: black;
    overflow: hidden;
}

#blood{
    position: fixed;
    width: auto;
    aspect-ratio: 1-1;
    max-width: 60vw;
    top: 0%;
    right: 0%;
    pointer-events: none;
}

#input-name-divider {
    position: relative !important;
    display: flex;
    width: 40%;
    height: 100%;
    background-image: url("resourses/main_menu_sniper.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#title {
    position: absolute;
    left: 50%;
    top:-7%;
    transform: translateX(-50%);
    z-index: 100;
    font-size: 12vh;
    font-family: "Title";
    color: var(--input-focus-border);
}

#settings {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: 20%;
}

#next-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    aspect-ratio: 1;
    background-image: url(resourses/dalje.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    outline: none;
    border: none;
    color: white;
    font-size: 1.5em;
}


#button-add-player {
    position: absolute;
    right: -20%;
    top: 50%;
    transform: translate(0%, -50%);
    background-image: url("resourses/dodaj.png");
    height: 200%;
    aspect-ratio: 10/8;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    outline: none;
    border: none;
    color:white;
}

#input-name {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    width: 332px;
    height: 58px;
    text-align: center;
    text-justify:distribute;
    font-size: 150%;
    color: var(--input-text);
    display: block;
    text-align: justify;
}

#input-name::placeholder {
    color: var(--input-placeholder);
    text-align: justify;
}

#player-input-form{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5vh;
    align-items: center;
    justify-items: center;
}

#player-list-divider{
    display: flex;
    position: relative;
    width: 60%;
    height: 100%;
    align-content: center;
    justify-content: center;
    overflow: hidden;
}

#deskripcija {
    position: relative;
    align-self: center;
    width: 50%;
    color: wheat;
    text-align: center;
}

#wordpress {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: fit-content;
    background-color: #303d43;
    border: 2px solid var(--btn-bg);
    border-radius: 3px;
    color: var(--btn-text);
    z-index: 5;
}

#list-of-players { 
    position: relative; 
    padding: 20px; 
    box-sizing: border-box; 
    display: none; 
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: repeat(5, 1fr); 
    column-gap: 10px; 
    row-gap: 10px; 
    justify-self: center; 
    align-self: center; 
    font-size: 6vh; 
    width: 100%; 
    height: 100%; 
} 

#list-of-players li{ 
    display: flex; 
    position: relative; 
    align-items: center; 
    justify-content: center; 
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
    font-size: 4.5vh; 
    width: 100%; 
    height: 100%; 
    padding: 0.5vh; 
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.delete-button {
    position: absolute;
    right: 5%;
    top: 10%;
    background-image: url("resourses/pin.png");
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    background-size: contain;
    background-position: center;
    height: 40%;
    aspect-ratio: 1;
}

/* ROLE MENI */

.start {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 30vw;
    height: 100%;
}

#startButton {
    width: 100%;
    height: 100%;
    background-image: url(resourses/start.png);
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    color:var(--btn-text);
    background-size: contain;
    background-position: center;
    font-size: 150%;
}

.pulse{
    display: inline-block;
    animation: pulse 0.9s ease-in-out 5;
}

@keyframes pulse {
    0%   { transform: scale(1); color: var(--btn-text);}
    10%  { transform: scale(1.25); color: var(--colorMafiaAccent);}
    20%  { transform: scale(1.05); }
    30%  { transform: scale(1.3); }
    40%  { transform: scale(1); }
    100% { transform: scale(1); color: var(--btn-text);}
}

.role-note{
    position: absolute;
    top: 0;
    right: 0;
    aspect-ratio: 1;
    align-content: center;
    font-family: 'Black Ops One', cursive; /* A stamp-like font */
    text-transform: uppercase;
    border-radius: 50%;
    border: 3px solid black;
    margin: 5px;
    padding: 8px 8px;
    transform: rotate(15deg);
    mask-image: url("resourses/stamp-texture2.png");
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("resourses/stamp-texture2.png");
}


/* ============================================
   DARK NOVINSKI TEMA - GLOBALNI STILOVI
   ============================================ */

#back {
    position: absolute;
    right: 0;
    bottom: 0 !important;
    height: 12vh;
    aspect-ratio: 1;
    margin: 1vh;
    background-image: url(resourses/back.png);
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    background-size: contain;
    background-position: center;
}

.newspaper-theme {
  /* Tamna charcoal pozadina sa plavim tonovima */
    background: #1a1d23;
    background-image: 
        /* Noise tekstura */
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="300"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /%3E%3CfeColorMatrix type="saturate" values="0"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.08"/%3E%3C/svg%3E'),
        /* Tamni gradient sa plavim tonovima */
        linear-gradient(135deg, 
        #0d1117 0%,
        #1a1d23 25%,
        #151a24 50%,
        #1a1d23 75%,
        #0d1117 100%
        );
    
    font-family: 'Times New Roman', 'Georgia', serif;
    color: #d4d0c8;
    
    overflow-y: auto;
    position: relative;
}

/* Tamna papir tekstura efekat */
.newspaper-theme::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Vertikalne linije */
        repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.02) 2px,
        rgba(255,255,255,0.02) 4px
        );
    pointer-events: none;
    z-index: 1;
}

.newspaper-theme > * {
    position: relative;
    z-index: 2;
}

/* ============================================
   NOVINSKI HEADER - DARK
   ============================================ */

.newspaper-header {
    text-align: center;
    padding: 10px 20px 10px;
    border-bottom: 4px double #8b7355;
    margin-bottom: 30px;
    background: linear-gradient(to bottom, 
        rgba(13, 17, 23, 0.9), 
        rgba(26, 29, 35, 0.95)
    );
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

.newspaper-title {
    font-family: 'Playfair Display', 'Times New Roman', serif;
    font-size: 4em;
    font-weight: 900;
    letter-spacing: 8px;
    line-height: 1em;
    margin: 10px 0;
    background-clip: text;
    
    /* Sijanje */
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.6));
    
    text-shadow: 
        0 0 10px rgba(212, 175, 55, 0.5),
        0 0 20px rgba(212, 175, 55, 0.3);
}

.newspaper-subtitle {
    font-size: 1.1em;
    font-style: italic;
    letter-spacing: 3px;
    color: #a89880;
    border-top: 1px solid #8b7355;
    border-bottom: 1px solid #8b7355;
    padding: 8px 0;
    margin-top: 15px;
    text-shadow: 0 2px 10px rgba(168, 152, 128, 0.4);
}

/* ============================================
   GLAVNI SADRŽAJ - DARK
   ============================================ */

#role-selection-content, .newspaper-content {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 30px;
    align-items: start;
    justify-items: center;
}

/* ============================================
   IME IGRAČA - DARK NASLOV
   ============================================ */

.newspaper-article {
    justify-items: center;
    text-align: center;
    width: 100%;
}

#role-menu-title{
    width: 80%;
    text-align: center;
    border-bottom: 2px solid #5a5246;
    border-top: 2px solid #5a5246;
    padding: 10px 0px;
}

.article-headline {
    position: relative;
    font-family: "TheGodFather", 'Georgia', serif;
    font-size: 3.5em;
    font-weight: 700;
    color: #e8dcc8;
    margin: 20px 0;
    line-height: 1.2;
    letter-spacing: 2px;
    min-width: 40%;
    border-left: 2px solid #5a5246;
    border-right: 2px solid #5a5246;
  
  /* Zlatni outline efekat */
  text-shadow: 
    0 0 5px rgba(212, 175, 55, 0.3),
    0 0 10px rgba(212, 175, 55, 0.2),
    2px 2px 0px rgba(139, 115, 85, 0.3),
    -1px -1px 0px rgba(139, 115, 85, 0.2);
}

.article-headline::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;

    width: 100%;
    height: 24px;

    background-image: url("resourses/border-bottom.svg");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: auto 100%;

    pointer-events: none;
}

/* ============================================
   DIVIDER - DARK
   ============================================ */

.newspaper-divider {
  width: 80%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #8b7355 20%,
    #8b7355 80%,
    transparent
  );
  box-shadow: 0 0 10px rgba(139, 115, 85, 0.5);
}

/* ============================================
   ROLE INFO - DARK POVERLJIV ČLANAK
   ============================================ */

#role-holder{
    width: 100%;
    max-width: 700px;
    padding: 40px;
    
    /* Tamna pozadina sa gradientom */
    background: linear-gradient(135deg, 
        #1a1d23 0%,
        #0f1318 50%,
        #1a1d23 100%
    );
    
    /* Zlatni/bakarni border */
    border: 3px double #8b7355;
    
    box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.5),
        0 5px 20px rgba(0,0,0,0.7),
        0 0 40px rgba(139, 115, 85, 0.2);
    
    position: relative;
    display: none;
    text-align: center;
}

/* CONFIDENTIAL štambilj - crveni */
.role-stamp {
    position: absolute;
    top: 20px;
    right: 20px;
    
    font-family: 'Courier New', monospace;
    font-size: 1.2em;
    font-weight: bold;
    color: #ff4444;
    letter-spacing: 3px;
    
    border: 3px solid #ff4444;
    padding: 8px 16px;
    transform: rotate(15deg);
    opacity: 0.8;
    mask-image: url("resourses/stamp-texture.png");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-image: url("resourses/stamp-texture.png");
    
    /* Crveno sijanje */
    box-shadow: 
        0 0 10px rgba(255, 68, 68, 0.6),
        inset 0 0 10px rgba(255, 68, 68, 0.2);
    
    text-shadow: 0 0 5px rgba(255, 68, 68, 0.8);
}

.role-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5em;
    font-weight: 700;
    
    /* Zlatni tekst */
    background: linear-gradient(180deg, 
        #f4e4c1 0%,
        #d4af37 50%,
        #b8860b 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    margin-bottom: 15px;
    border-bottom: 2px solid #8b7355;
    padding-bottom: 10px;
    
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.role-alignment {
    font-size: 1.3em;
    font-style: italic;
    color: #a89880;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(168, 152, 128, 0.4);
}

.role-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: #d4d0c8;
    text-align: justify;
    padding: 0 20px;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.role-meta {
    font-size: 1em;
    font-weight: bold;
    color: #ff6b6b;
    margin-top: 20px;
    padding: 10px;
    border: 1px dashed #ff4444;
    background: rgba(255, 68, 68, 0.1);
    box-shadow: 
        0 0 10px rgba(255, 68, 68, 0.2),
        inset 0 0 20px rgba(255, 68, 68, 0.05);
    text-shadow: 0 0 5px rgba(255, 68, 68, 0.6);
}

/* ============================================
   HOLD BUTTON - DARK WAX SEAL
   ============================================ */

#hold-button-holder {
    position: relative;
    justify-items: center;
}

.button-instruction {
    font-family: 'Georgia', serif;
    font-size: 1.2em;
    font-style: italic;
    font-weight: bold;
    color: #a89880;
    margin-top: 25px;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(168, 152, 128, 0.4);
}

#hold-button{
    position: relative;
    height: 47vh;
    aspect-ratio: 2/3;

    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8));
}

#reveal-role {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Tamni pergament */
    background-image: url(resourses/hold-button-bg.png);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    border: none;
    outline: none;
    cursor: pointer;
    overflow: hidden;
    
    user-select: none;
    touch-action: none;
  
}

/* Handprint - tamni bazni */
#handprint {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    
    opacity: 0.7;
    filter: 
        brightness(0.4)
        sepia(0.3)
        saturate(0.5);
}

#progress-meter {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    
    pointer-events: none;
    overflow: hidden;
    transition: height 0.05s linear;
}

/* Crveni handprint - intenzivan sa sijajem */
#red-handprint {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
  
}

#reveal-role.holding {
    animation: dark-pulse 0.8s ease-in-out infinite;
    border-color: var(--colorMafia);
    filter: drop-shadow(0 0 30px rgba(139, 54, 54, 0.6));
}

@keyframes dark-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* ============================================
   BUTTONS - DARK STIL
   ============================================ */

#hide-role {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    height: 25%;
    aspect-ratio: 2 / 1;

    font-family: 'Georgia', serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #e8dcc8;

    background-image: url(resourses/hide-role-button.svg);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    outline: none;
    border: none;
    
    cursor: pointer;
    transition: all 0.2s ease;
    transform-origin: center;

    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

#hide-role:hover {
    scale: 1.03;
}

/* ============================================
   DODATNI DARK EFEKTI
   ============================================ */

.newspaper-theme::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(
        ellipse at 20% 30%,
        rgba(26, 29, 35, 0.6) 0%,
        transparent 50%
        ),
        radial-gradient(
        ellipse at 80% 70%,
        rgba(15, 19, 24, 0.6) 0%,
        transparent 50%
        ),
        radial-gradient(
        ellipse at 50% 50%,
        transparent 0%,
        rgba(0,0,0,0.2) 100%
        );
    pointer-events: none;
    z-index: 1;
}

/* Fade-in animacija za reveal - dark */
#role-holder.revealed {
    animation: darkFadeIn 0.8s ease-out;
}

@keyframes darkFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
        box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.5),
        0 5px 20px rgba(0,0,0,0.7),
        0 0 0px rgba(139, 115, 85, 0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.5),
        0 5px 20px rgba(0,0,0,0.7),
        0 0 40px rgba(139, 115, 85, 0.2);
    }
}

/* Ambient light particles (opciono) */
@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.6;
    }
}


.cardHolder {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 16px;
    padding: 20px;
    box-sizing: border-box;
}

/* ROLE MENI */

#settingsMenu {
    height: auto;
}

#subtitle {
    display: flex;
    justify-content: center;
    text-align: center;
    color: wheat;
    width: 100%;
}

.card {
    position: relative;
    border: 1px solid #302c2c;
    border-radius: 14px;
    padding: 12px;
    background: #f9f9f9;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("resourses/paper.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    border-radius: inherit;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.card h3 {
    font-size: 1.2em;
}

[data-alignment="Selo"]{
    background-color: var(--colorTown);
}

[data-alignment="Mafija"]{
    background-color: var(--colorMafia);
}

[data-alignment="Neutralna"]{
    background-color: var(--colorNeutral);
}

.infoCard {
    mask-image: url(resourses/cardBorder.png);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    

    font-size: 1em;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.role-name {
    font-family: 'Playfair Display', serif;
    color: var(--text-main);
    margin: 0 0 8px 0;
    font-weight: bold;
}

.role-alignment {
    font-style: italic;
}

.card[data-alignment="Selo"] .role-alignment{
    color: var(--colorTownAccent);
}

.card[data-alignment="Mafija"] .role-alignment{
    color: var(--colorMafiaAccent);
}

.card[data-alignment="Neutralno"] .role-alignment{
    color: var(--colorNeutralAccent);
}

.details-hide{
    display: none;
}

.details-show{
    display: block;
}

.role-expand{
    display: none;
    align-self: center;
}

.role-category {
    color: #817b7b;
}

.role-description {
    margin-top: 6px;
}

.number-div {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 16px;
    align-items: center;
    left: 50%;
    margin-top: auto;
}

.remove-role {
    background-image: url("resourses/ui/arrow.png");
    transform: scale(-1, -1);
    aspect-ratio: 1;
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    background-size: contain;
    background-position: center;
}

.add-role {
    background-image: url("resourses/ui/arrow.png");
    aspect-ratio: 1;
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    background-size: contain;
    background-position: center;
}

.counter {
    text-align:center;
    font-family: "TheGodfather";
    font-size: 150%;
}

.cancel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    aspect-ratio: 1;
    background-image: url(resourses/back.png);
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    color:white;
    background-size: contain;
    background-position: center;
    font-size: 90%;
}

/* GAME MENI*/
#popup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    width: 80%;
    height: 80%;
    z-index: 100;

    background: linear-gradient(135deg, 
        #1a1d23 0%,
        #0f1318 50%,
        #1a1d23 100%
    );
    
    /* Zlatni/bakarni border */
    border: 3px double #8b7355;
    
    box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.5),
        0 5px 20px rgba(0,0,0,0.7),
        0 0 40px rgba(139, 115, 85, 0.2);

    text-align: center;
}

#popup-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-main);
}

#popup-button{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#night-button {
    width: 100%;
    height: 100%;
    background-image: url(resourses/start.png);
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    color:white;
    background-size: contain;
    background-position: center;
    font-size: 150%;
}

.player-card-holder {
    position: relative;
    display: grid;
    padding-top: 5vh;
    width: 100%;
    height: fit-content;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.player-card{
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.player-icon{
    width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

.nametag{
    position: absolute;
    width: 80%;
    height: 20%;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    align-content: center;
    border-left: 2px solid #5a5246;
    border-right: 2px solid #5a5246;
    border-top: 2px solid #5a5246;
    background-color: #1a1d23;
    color: #d4af37;
    pointer-events: none;
}

.nametag::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;

    width: 100%;
    height: 24px;

    background-image: url("resourses/nametag-border.svg");
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: auto 100%;

    transform: translateY(50%);

    pointer-events: none;
}

#lynch{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    aspect-ratio: 1;
}

.skull{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url("resourses/skull.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 60%;
    aspect-ratio: 1;
    pointer-events: none;
}

.player-card[data-alive= false] {
    background-color: #ff0000;
}

.player-card[data-alive= "true"] {
    background-color: #ff0000;
}

/* INFO MENI */

#back-to-manager {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20vh;
    aspect-ratio: 1;
    margin: 1.5vw;
    background-image: url("resourses/back.png");
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    background-size: contain;
    background-position: center;
    font-size: 150%;
}

#info-holder{
    width: 100%;
    max-width: 700px;
    padding: 40px;
    
    /* Tamna pozadina sa gradientom */
    background: linear-gradient(135deg, 
        #1a1d23 0%,
        #0f1318 50%,
        #1a1d23 100%
    );
    
    /* Zlatni/bakarni border */
    border: 3px double #8b7355;
    
    box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.5),
        0 5px 20px rgba(0,0,0,0.7),
        0 0 40px rgba(139, 115, 85, 0.2);
    
    position: relative;
    display: block;
    text-align: center;
}



/* NIGHT MENI */

/*#wake-up-role {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    align-content: center;
    font-size: 2em;
    margin: 0;
    color: wheat;
}*/

#addToAmnesiac {
    display: none;
}

#button-holder{
    position: absolute;
    width: 50vh;
    height: 20vh;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); 
    gap: 10px;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 1.5vh;
}

.action-button{
    font-size: 1.5em;
    background-image: url(resourses/otkrij.png);
    color: wheat;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    outline: none;
    border: none;
    color:white;
}

#second-action{
    display: none;
}

/* LYNCH MENI */

.controls-div{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20%;
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 16px;
    align-items: center;
    margin-top: auto;
    border-left: 2px solid #5a5246;
    border-right: 2px solid #5a5246;
    border-bottom: 2px solid #5a5246;
    background-color: #1a1d23;
    color: #d4af37;
}

.controls-div::after{
    content: "";
    position: absolute;
    left: 0;
    top: -24px;

    width: 100%;
    height: 24px;

    background-image: url("resourses/nametag-border.svg");
    background-repeat: repeat-x;
    background-position: top;
    background-size: auto 100%;

    transform: scale(-1, -1);

    pointer-events: none;
}

#confirm-lynch{
    height: 100%;
    aspect-ratio: 1;
}

#votes-per-players{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-self: center;
    color: var(--text-main);
}

.votes {
    justify-self: center;
}

.remove-vote {
    background-image: url("resourses/ui/arrow.png");
    transform: scale(-1, -1);
    aspect-ratio: 1;
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    background-size: contain;
    background-position: center;
}

.add-vote {
    background-image: url("resourses/ui/arrow.png");
    aspect-ratio: 1;
    background-color: transparent;
    background-repeat: no-repeat;
    outline: none;
    border: none;
    background-size: contain;
    background-position: center;
}

/* NIGHT MENI */

.night-theme {
    background: linear-gradient(135deg, 
        #0d1117 0%,
        #1a1d23 25%,
        #151a24 50%,
        #1a1d23 75%,
        #0d1117 100%
    );
    background-attachment: fixed;
    overflow: hidden;
}

/* Animated stars background */
.night-theme::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent);
    background-size: 200% 200%;
    animation: stars 20s linear infinite;
    opacity: 0.3;
    pointer-events: none;
}

@keyframes stars {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.night-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 40px;
    box-sizing: border-box;
}

#status-stamp {
    position: absolute;
    top: 0;
    right: -15px;
    
    font-family: 'Courier New', monospace;
    font-size: 1.2em;
    font-weight: bold;
    color: #ff4444;
    letter-spacing: 3px;
    
    border: 3px solid #ff4444;
    padding: 8px 16px;
    transform: rotate(15deg);
    opacity: 0.8;
    mask-image: url("resourses/stamp-texture.png");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-image: url("resourses/stamp-texture.png");
    
    /* Crveno sijanje */
    box-shadow: 
        0 0 10px rgba(255, 68, 68, 0.6),
        inset 0 0 10px rgba(255, 68, 68, 0.2);
    
    text-shadow: 0 0 5px rgba(255, 68, 68, 0.8);
}


.night-header {
    text-align: center;
}

.night-progress {
    font-family: 'Courier New', monospace;
    font-size: 1.2em;
    color: #a89880;
    letter-spacing: 2px;
    margin: 0;
    padding: 10px 20px;
    border: 2px solid #8b7355;
    background: rgba(26, 29, 35, 0.8);
    border-radius: 5px;
}

.night-role-display {
    position: relative;
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, 
        #1a1d23 0%,
        #0f1318 50%,
        #1a1d23 100%
    );
    border: 3px double #8b7355;
    box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.5),
        0 5px 20px rgba(0,0,0,0.7),
        0 0 40px rgba(139, 115, 85, 0.2);
    min-width: 400px;
    max-width: 600px;
}

.night-role-title {
    font-family: 'Playfair Display', serif;
    font-size: 3em;
    font-weight: 700;
    background: #f4e4c1;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 20px 0;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.night-player-name {
    font-size: 1.5em;
    color: #a89880;
    font-style: italic;
    margin: 0;
    letter-spacing: 1px;
}

.night-button-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

/* Ažuriraj postojeće .action-button i .skip-button ako postoje */
#nightMenu .action-button,
#nightMenu .skip-button {
    font-family: 'Georgia', serif;
    font-size: 1.3em;
    font-weight: bold;
    padding: 15px 40px;
    border: 3px solid #8b7355;
    background: linear-gradient(135deg, #2b3a3f, #1a1d23);
    color: #e8dcc8;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 5px 15px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

#nightMenu .action-button {
    background: linear-gradient(135deg, #5a1f1b, #3a1412);
    border-color: #a34732;
}

#nightMenu .action-button:hover,
#nightMenu .skip-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 7px 20px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 20px rgba(139, 115, 85, 0.3);
    border-color: #d4af37;
}

#nightMenu .action-button:hover {
    background: linear-gradient(135deg, #6b2621, #4a1812);
    box-shadow: 
        0 7px 20px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 20px rgba(163, 71, 50, 0.5);
}

.process-night-button {
    font-family: 'Playfair Display', serif;
    font-size: 1.8em;
    font-weight: 900;
    padding: 20px 60px;
    margin-top: 40px;
    
    background: linear-gradient(135deg, 
        #d4af37 0%,
        #b8860b 50%,
        #d4af37 100%
    );
    background-size: 200% auto;
    
    color: #1a1d23;
    border: 4px solid #f4e4c1;
    border-radius: 5px;
    cursor: pointer;
    
    box-shadow: 
        0 10px 30px rgba(212, 175, 55, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
    
    transition: all 0.3s ease;
    animation: pulse-gold 2s ease-in-out infinite;
}

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 
            0 10px 30px rgba(212, 175, 55, 0.4),
            inset 0 1px 0 rgba(255,255,255,0.3);
    }
    50% {
        box-shadow: 
            0 10px 40px rgba(212, 175, 55, 0.7),
            inset 0 1px 0 rgba(255,255,255,0.5),
            0 0 30px rgba(212, 175, 55, 0.6);
    }
}

.process-night-button:hover {
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: 
        0 15px 40px rgba(212, 175, 55, 0.6),
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 0 40px rgba(212, 175, 55, 0.8);
}

.process-night-button:active {
    transform: translateY(0);
    box-shadow: 
        0 5px 20px rgba(212, 175, 55, 0.4),
        inset 0 2px 5px rgba(0,0,0,0.3);
}

/* ACTION MENI */

.action-theme {
    background: linear-gradient(135deg, 
        #1a1d23 0%,
        #0f1318 50%,
        #1a1d23 100%
    );
}

.action-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 20px;
    padding: 30px;
    box-sizing: border-box;
    overflow-y: auto;
}

.action-header {
    text-align: center;
    padding: 20px;
    background: rgba(26, 29, 35, 0.8);
    border: 2px solid #8b7355;
    border-radius: 5px;
}

.action-role-title {
    font-family: 'Playfair Display', serif;
    font-size: 2em;
    color: #d4af37;
    margin: 0 0 10px 0;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.action-description {
    font-size: 1.2em;
    color: #a89880;
    font-style: italic;
    margin: 0;
}

.acted{
    background-color: #0d1117;
}

.target-grid {
    display: grid;
    gap: 15px;
    padding: 20px;
    grid-template-columns: repeat(6, 1fr);
    color: var(--text-main);
    align-content: start;
    overflow-y: auto;
}

.target-card {
    position: relative;
    background: linear-gradient(135deg, #2b3a3f, #1a1d23);
    border: 2px solid #8b7355;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    
    box-shadow: 
        0 3px 10px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.target-card:hover {
    transform: translateY(-5px);
    border-color: #d4af37;
    box-shadow: 
        0 8px 20px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 15px rgba(212, 175, 55, 0.3);
}

.target-card.selected {
    border-color: #d4af37;
    border-width: 3px;
    background: linear-gradient(135deg, #3a4a52, #2a3a42);
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.6),
        inset 0 0 20px rgba(212, 175, 55, 0.2),
        0 0 30px rgba(212, 175, 55, 0.5);
}
.current-player-card.selected {
    border-color: #d4af37;
    border-width: 3px;
    background: linear-gradient(135deg, #3a4a52, #2a3a42);
    box-shadow: 
        0 8px 25px rgba(0,0,0,0.6),
        inset 0 0 20px rgba(212, 175, 55, 0.2),
        0 0 30px rgba(212, 175, 55, 0.5);
}

.target-card.dead-player {
    opacity: 0.6;
    background: linear-gradient(135deg, #2a2622, #1a1a1a);
    border-color: #4B4B4B;
}

.target-card.dead-player:hover {
    opacity: 0.8;
}

.target-icon {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}

.target-card.dead-player .target-icon {
    filter: grayscale(100%) brightness(0.5);
}

.target-name {
    font-size: 1em;
    color: #e8dcc8;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.target-card.dead-player .target-name {
    color: #8b8b8b;
}

.dead-label {
    color: #ff4444;
    font-size: 1.5em;
    margin-right: 5px;
}

.action-result {
    text-align: center;
    padding: 20px;
    background: rgba(90, 31, 27, 0.3);
    border: 2px solid #a34732;
    border-radius: 5px;
    color: #e8dcc8;
    font-size: 1.3em;
    font-weight: bold;
    
    animation: fadeIn 0.5s ease-in;
    box-shadow: 
        0 0 20px rgba(163, 71, 50, 0.3),
        inset 0 0 10px rgba(163, 71, 50, 0.1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.skip-action-btn,
.confirm-action-btn {
    font-family: 'Georgia', serif;
    font-size: 1.3em;
    font-weight: bold;
    padding: 15px 40px;
    border: 3px solid #8b7355;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 5px 15px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.skip-action-btn {
    background: linear-gradient(135deg, #2b3a3f, #1a1d23);
    color: #e8dcc8;
}

.confirm-action-btn {
    background: linear-gradient(135deg, #5a1f1b, #3a1412);
    color: #e8dcc8;
    border-color: #a34732;
}

.skip-action-btn:hover,
.confirm-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 7px 20px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 20px rgba(139, 115, 85, 0.3);
}

.confirm-action-btn:hover {
    box-shadow: 
        0 7px 20px rgba(0,0,0,0.7),
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 20px rgba(163, 71, 50, 0.5);
}

.skip-action-btn:active,
.confirm-action-btn:active {
    transform: translateY(0);
}

.confirm-action-btn:disabled,
.skip-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

#popup-button{
    margin: 10px;
    height: 50px;
    width: 100px;
}

/* ============================================
   PLAYER STATUS INDICATORS
   ============================================ */

.vampire-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 24px;
    filter: drop-shadow(0 0 5px rgba(139, 0, 0, 0.8));
    animation: float-vampire 3s ease-in-out infinite;
}

@keyframes float-vampire {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.bitten-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 20px;
    animation: pulse-bite 1s infinite;
    filter: drop-shadow(0 0 3px rgba(139, 0, 0, 0.6));
}

@keyframes pulse-bite {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.protected-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 20px;
    color: #4CAF50;
    filter: drop-shadow(0 0 5px rgba(76, 175, 80, 0.8));
}

.roleblocked-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    color: #ff4444;
    filter: drop-shadow(0 0 5px rgba(255, 68, 68, 0.8));
}

/* ============================================
   RESPONSIVE - TABLET AND MOBILE
   ============================================ */

@media (max-width: 1200px) {
    .target-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 900px) {
    #mainMenu{
        flex-direction: column;
    }

    #input-name-divider{
        width: 100%;
    }

    #player-list-divider{
        width: 100%;
    }

    #blood{
        display: none;
    }

    .target-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .night-role-display {
        min-width: 300px;
        padding: 30px 20px;
    }
    
    .night-role-title {
        font-size: 2.5em;
    }
}

@media (max-width: 768px) {
    #deskripcija{
        font-size: 1em;
        width: 80%;
    }
    #player-list-divider{
        overflow-y: scroll;
    }
    #list-of-players {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(10, 1fr);
        row-gap: 10px;
    }
    .delete-button{
        position: absolute;
        right: 12%;
        top: 5%;
        height: 50%;
    }

    .cardHolder {
        grid-template-columns: repeat(1, 1fr); 
    }
    .role-name{
        justify-content: center;
        text-align: center;
    }
    .role-expand{
        display: block;
    }
    .start {
        width: 50vw;
    }

    #roleSelection{
        flex-direction: column-reverse;
    }
    .newspaper-header{
        border-bottom: none;
        padding-bottom: 20%;
        background: transparent;
        box-shadow: none;
    }
    .newspaper-subtitle{
        display: none;
    }
    .newspaper-title{
        display: none;
    }
    #player {
        font-size: 2.5em;
    }
    #hold-button{
        height: 40vh;
        aspect-ratio: 2/3;

        filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8));
    }
    #hide-role {
        position: relative;
        height: 20vh;
    }
    #role-holder{
        padding: 0;
        width: 90%;
    }

    #managerMenu{
        height: auto;
    }

    .action-buttons {
        padding: 0px;
    }
    .action-header {
        padding: 0px;
    }

    .target-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .action-role-title {
        font-size: 1.5em;
    }
    
    .night-button-container {
        flex-direction: column;
        width: 100%;
    }
    
    #nightMenu .action-button,
    #nightMenu .skip-button {
        width: 100%;
    }
    
    .process-night-button {
        font-size: 1.5em;
        padding: 15px 40px;
    }
}

@media (max-width: 600px) {
    .target-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .night-role-title {
        font-size: 2em;
    }
    
    .night-player-name {
        font-size: 1.2em;
    }
}