@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');

/* --- PASUL 2: DEFINIREA FONTURILOR ALEATORII --- */

/* Font 1 */
@font-face {
  font-family: 'HandwrittenFont1';
  src: url('./assets/google-fonts/font-1.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-1 { font-family: 'HandwrittenFont1', cursive; --font-scale-factor: 1.2; --vertical-offset: 2px; }

/* Font 2 */
@font-face {
  font-family: 'HandwrittenFont2';
  src: url('./assets/google-fonts/font-2.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-2 { font-family: 'HandwrittenFont2', cursive; --font-scale-factor: 1.2; --vertical-offset: 2px; }

/* Font 3 */
@font-face {
  font-family: 'HandwrittenFont3';
  src: url('./assets/google-fonts/font-3.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-3 { font-family: 'HandwrittenFont3', cursive; --font-scale-factor: 1.26; --vertical-offset: 2px; }

/* Font 4 */
@font-face {
  font-family: 'HandwrittenFont4';
  src: url('./assets/google-fonts/font-4.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-4 { font-family: 'HandwrittenFont4', cursive; --font-scale-factor: 1.08; --vertical-offset: 2px; }

/* Font 5 */
@font-face {
  font-family: 'HandwrittenFont5';
  src: url('./assets/google-fonts/font-5.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-5 { font-family: 'HandwrittenFont5', cursive; --font-scale-factor: 1.68; --vertical-offset: 2px; }

/* Font 6 */
@font-face {
  font-family: 'HandwrittenFont6';
  src: url('./assets/google-fonts/font-6.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-6 { font-family: 'HandwrittenFont6', cursive; --font-scale-factor: 1.2; --vertical-offset: 2px; }

/* Font 7 */
@font-face {
  font-family: 'HandwrittenFont7';
  src: url('./assets/google-fonts/font-7.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-7 { font-family: 'HandwrittenFont7', cursive; --font-scale-factor: 1.56; --vertical-offset: 2px; }

/* Font 8 */
@font-face {
  font-family: 'HandwrittenFont8';
  src: url('./assets/google-fonts/font-8.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-8 { font-family: 'HandwrittenFont8', cursive; --font-scale-factor: 1.2; --vertical-offset: 2px; }

/* Font 9 */
@font-face {
  font-family: 'HandwrittenFont9';
  src: url('./assets/google-fonts/font-9.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-9 { font-family: 'HandwrittenFont9', cursive; --font-scale-factor: 1.2; --vertical-offset: 2px; }

/* Font 10 */
@font-face {
  font-family: 'HandwrittenFont10';
  src: url('./assets/google-fonts/font-10.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-10 { font-family: 'HandwrittenFont10', cursive; --font-scale-factor: 1.08; --vertical-offset: 2px; }

/* Font 11 */
@font-face {
  font-family: 'HandwrittenFont11';
  src: url('./assets/google-fonts/font-11.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-11 { font-family: 'HandwrittenFont11', cursive; --font-scale-factor: 1.08; --vertical-offset: 2px; }

/* Font 12 */
@font-face {
  font-family: 'HandwrittenFont12';
  src: url('./assets/google-fonts/font-12.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-12 { font-family: 'HandwrittenFont12', cursive; --font-scale-factor: 1.32; --vertical-offset: 2px; }

/* Font 13 */
@font-face {
  font-family: 'HandwrittenFont13';
  src: url('./assets/google-fonts/font-13.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-13 { font-family: 'HandwrittenFont13', cursive; --font-scale-factor: 1.2; --vertical-offset: 2px; }

/* Font 14 */
@font-face {
  font-family: 'HandwrittenFont14';
  src: url('./assets/google-fonts/font-14.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-14 { font-family: 'HandwrittenFont14', cursive; --font-scale-factor: 1.2; --vertical-offset: 2px; }

/* Font 15 */
@font-face {
  font-family: 'HandwrittenFont15';
  src: url('./assets/google-fonts/font-15.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-15 { font-family: 'HandwrittenFont15', cursive; --font-scale-factor: 1.08; --vertical-offset: 2px; }

/* Font 16 */
@font-face {
  font-family: 'HandwrittenFont16';
  src: url('./assets/google-fonts/font-16.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-16 { font-family: 'HandwrittenFont16', cursive; --font-scale-factor: 1.2; --vertical-offset: 2px; }

/* Font 17 */
@font-face {
  font-family: 'HandwrittenFont17';
  src: url('./assets/google-fonts/font-17.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-17 { font-family: 'HandwrittenFont17', cursive; --font-scale-factor: 0.84; --vertical-offset: 2px; }

/* Font 18 */
@font-face {
  font-family: 'HandwrittenFont18';
  src: url('./assets/google-fonts/font-18.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-18 { font-family: 'HandwrittenFont18', cursive; --font-scale-factor: 0.84; --vertical-offset: 2px; }

/* Font 19 */
@font-face {
  font-family: 'HandwrittenFont19';
  src: url('./assets/google-fonts/font-19.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-19 { font-family: 'HandwrittenFont19', cursive; --font-scale-factor: 0.84; --vertical-offset: 2px; }

/* Font 20 */
@font-face {
  font-family: 'HandwrittenFont20';
  src: url('./assets/google-fonts/font-20.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.font-20 { font-family: 'HandwrittenFont20', cursive; --font-scale-factor: 0.84; --vertical-offset: 2px; }


/* Font Fredoka One (About Overlay) */
@font-face {
  font-family: 'FredokaOne';
  src: url('./assets/google-fonts/fredokaoneregular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Resetări de bază și stil pentru fundal */
html {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  width: 100vw;  
  height: 100%; /* Fix pentru mobil */
  zoom: 0.8; /* Zoom 80% pentru Chrome, Edge, Safari */
}

/* Stilul pentru scena principală (biroul) */
#scena-birou {
  position: absolute;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1080;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/birou fundal.webp');
  background-size: cover;
  background-position: center;
  transition: filter 0.5s;
  filter: blur(0px);
  z-index: 1;
    /* Fără blur la început */

  isolation: isolate;
  
}

/* Asigură acoperirea ecranului și pe dispozitive înalte (Portrait/Pătrat) */
@media (max-aspect-ratio: 1920/1080) {
  #scena-birou {
    width: auto;
    height: 100%;
  }
}

/* AICI CREEZI FILTRUL DE CULOARE */
#scena-birou::before {
  content: '';
  /* Obligatoriu pentru ca pseudo-elementul să apară */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Culoarea și opacitatea pe care le-ai definit în Figma */
  background-color: #9CD6FF;
  opacity: 0.19;
  /* 19% opacitate */

  /* Ne asigurăm că stă între fundal și conținut */
  z-index: 10;

  pointer-events: none;
}


/* Stilul general pentru toate obiectele interactive de pe masă */
.obiect {
  position: absolute;
  cursor: pointer;
  transition: transform 0.2s ease-in-out filter 0.2s ease-in-out;
}

.obiect:hover {
  transform: scale(1.05); /* Mărește ușor obiectul la hover */
  filter: drop-shadow(0 0 15px rgba(255, 255, 220, 0.5));
}

/* Asigură-te că imaginile din interiorul obiectelor umplu containerul */
.obiect img {
  width: 100%;
  height: auto;
}

/* Poziționarea și dimensionarea specifică fiecărui obiect */
/* === ÎNLOCUIEȘTE ACESTE VALORI CU CELE DIN FIGMA === */

#tastaturaMouse-container {
  width: 43.7%;
  height: auto;
  top: -2.7%;
  left: 28%;
  aspect-ratio: 829/811;
  z-index: 1;
}

#monitor-container {
  left: 26.7%;
  width: 44.1%;
  height: auto;
  aspect-ratio: 846/463;
  z-index: 2;
}

#oracol-trigger {
  position: absolute;
  /* Asigură-te că are position, altfel top/left nu merg */
  top: 45.3%;
  left: 72.7%;
  width: 25.3%;
  aspect-ratio: 486.50 / 586.00;
  transition: opacity 0.5s;
  opacity: 1;
  /* Vizibil by default */
  cursor: pointer;
  z-index: 5;
  /* Un z-index pentru a fi sigur că e deasupra fundalului */
}

#casetofon-container {
  width: 23.2%;
  height: auto;
  top: 56%;
  left: 0%;
  aspect-ratio: 444 / 437;
  z-index: 5;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

/* --- STILURI CASETOFON INTERACTIV --- */

.casetofon-state {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.casetofon-state.active {
  display: block;
}

.casetofon-state img {
  /* width: 100%;  <-- SCOS: Aceasta forța toate imaginile (inclusiv rotițele) să fie cât tot containerul */
  height: auto;
  display: block;
  pointer-events: none; /* Imaginile nu fură click-ul */
}

/* Layering pentru starea Loaded */
#state-loaded {
  position: relative;
  width: 100%;
  height: 100%;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 100%;  <-- SCOATEM ASTA pentru a permite poziționarea manuală */
  /* height: 100%; */
  /* object-fit: contain; */
}

/* 1. ELEMENTELE FULL-SIZE (Doar imaginile de fundal și baza) */
#state-closed img,
#state-open img,
.layer-base {
    width: 100%;
    height: 100%;
    object-fit: fill; /* STRATEGIE: Forțăm imaginea să umple containerul pentru a elimina spațiile goale variabile */
} 

/* Ordinea Z-Index */
.layer-base { z-index: 1; }
.layer-tape { z-index: 3; } /* Caseta stă PESTE rotițe */
.layer-wheel { z-index: 2; } /* Rotițele stau SUB casetă */
.layer-btn-pressed { 
  z-index: 4; 
  opacity: 0; /* Ascunse implicit */
  transition: opacity 0.05s; /* Tranziție rapidă pentru efect de click */
  /* MODIFICARE: Resetăm dimensiunile pentru a permite poziționarea manuală a butoanelor mici */
  width: auto !important;
  height: auto !important;
  /* Le vom poziționa individual mai jos folosind ID-urile lor */
}
.layer-btn-pressed.active { opacity: 1; }

/* Butonul Eject rămâne apăsat vizual cât timp ușița e deschisă */
#casetofon-container:has(#state-open.active) #visual-btn-eject {
  opacity: 1;
}

.layer-door { z-index: 4; opacity: 0.49; pointer-events: none; }
.layer-sticker { z-index: 5; opacity: 0.85; } /* Stickerul sub ușiță */

/* Animație Rotițe */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.wheel-left, .wheel-right {
  transform-origin: center; /* Asigură-te că centrul de rotație e corect în imagine */
}

/* --- POZIȚIONARE MANUALĂ (DATE DIN FIGMA) --- */
/* Aici introduci valorile calculate pentru elementele mici (crop-uite) */

/* ROTIȚA STÂNGA */
.wheel-left {
    top: 49%;      /* Ajustează: Mai mic = Mai SUS */
    left: 25.5%;   /* Ajustează: Mai mic = Mai STÂNGA */
    width: 7.8% !important; /* Ajustează: Mai mic = Mai MICĂ */
}

/* ROTIȚA DREAPTA */
.wheel-right {
    top: 38.5%;
    left: 40.7%;
    width: 6.5% !important;
}

/* CASETA (Când e înăuntru) */
#loaded-tape-img {
    top: 23.8%;    /* (6.5 / 27.3125) * 100 */
    left: 11.71%;  /* (3.25 / 27.75) * 100 */
    width: 51.46% !important; /* (14.28125 / 27.75) * 100 */
    aspect-ratio: 228.50/214.00;
}

/* UȘIȚA */
.layer-door {
    top: 15.5%;
    left: 5.4%;
    width: 73.9% !important;
    height: auto;
}

/* STICKER */
.layer-sticker {
    top: 7.5%;
    left: 26.8%;
    width: 49.2% !important;
    height: auto;
}

.rotating {
  animation: spin 2s linear infinite;
}

/* Zone de Interacțiune (Hitboxes) */
.interaction-zone {
  position: absolute;
  cursor: pointer;
  z-index: 20;
  background-color: transparent; /* DEBUG: Activ pentru aliniere */
}

/* Poziționare Butoane (Trebuie ajustate fin cu valorile din Figma) */
.deck-toggle-btn { top: 50%; left: 80%; width: 15%; height: 15%; }

/* --- WRAPPER PENTRU ROTAȚIA BUTOANELOR --- */
#controls-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Permite click-urile să treacă prin zonele goale */
  z-index: 30;
  
  /* AICI MODIFICI ROTAȚIA PENTRU TOATE BUTOANELE DEODATĂ */
  transform-origin: left 80%; /* Punctul de rotație (aproximativ zona butoanelor) */
  transform: rotate(-36.9deg); /* Modifică valoarea (ex: -2deg sau 2deg) pentru a înclina linia */
}

/* Reactivăm click-urile pentru butoanele din interiorul wrapper-ului */
#controls-wrapper .interaction-zone {
  pointer-events: auto;
}

/* --- POZIȚIONARE VIZUALĂ BUTOANE APĂSATE --- */
/* 1. CONFIGURARE VERTICALĂ (TOP) - COMUNĂ */
/* Setăm aceeași poziție de bază, iar ajustarea fină o facem din margini mai jos */
.control-btn, .layer-btn-pressed {
  top: 99%;
} 

/* 2. CONFIGURARE VIZUALĂ (Doar imaginile): Aici ajustezi mărimea și rotația */
.layer-btn-pressed {
  width: 6%; /* Poți schimba dimensiunea imaginii independent de zona de click */
  transform: rotate(36deg) scale(.52); /* Ajustează rotația și scara aici */
  transform-origin: center;
  
  /* AICI AJUSTEZI DECALAJUL GLOBAL FAȚĂ DE ZONA DE CLICK */
  margin-top: -4%;  /* Mută imaginile mai sus/jos față de hitbox (ex: -4% le ridică) */
  margin-left: -4.8%;  /* Mută imaginile stânga/dreapta față de hitbox */
}

/* 3. POZIȚIONARE ORIZONTALĂ (LEFT) - GRUPATĂ */
/* Modificând o valoare aici, muți simultan și zona de click și imaginea */
#hit-btn-play, #visual-btn-play     { left: 26.5%; }
#hit-btn-pause, #visual-btn-pause   { left: 35%; }
#hit-btn-rew, #visual-btn-rew       { left: 43.5%; }
#hit-btn-fwd, #visual-btn-fwd       { left: 52%; }
#hit-btn-eject, #visual-btn-eject   { left: 60%; }
#hit-btn-rec, #visual-btn-rec       { left: 68%; }

/* Butoane Control (Play, Stop etc.) */
.control-btn {
  width: 6%; /* Lățimea zonei de click (trebuie să rămână fixă pentru interacțiune) */
  /* Înălțimea trebuie definită explicit pentru div-urile de click (hitboxes) */
  height: 7%; 
}

/* --- TEXT UMBRĂ (STATUS) --- */
#shadow-status-text {
  position: absolute;
  top: 18%; /* Începe de sus */
  left: 62%; /* Poziționat pe latura din dreapta */
  
  /* Text Vertical */
  writing-mode: vertical-lr;
  text-orientation: upright; /* Literele sunt drepte, una sub alta */
  letter-spacing: 0.3rem; /* Spațiere între litere */
  
  /* Stilul de "Umbră" */
  font-family: 'Arial Black', sans-serif; 
  font-size: 1.5rem; 
  color: rgba(0, 0, 0, 0.85); 
  text-shadow: none; 
  filter: blur(0.5px); 
  mix-blend-mode: multiply; 
  
  transform-origin: left top; 
  transform: rotate(-32deg) scaleX(1.3); /* Păstrăm lățirea fontului */
  
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10; 
  opacity: 0; 
  white-space: nowrap; 
}

/* --- POZIȚII INDIVIDUALE PENTRU TEXTE --- */
#shadow-status-text.status-play   { top: 20%; }
#shadow-status-text.status-pause  { top: 18%; }
#shadow-status-text.status-rew    { top: 21%; }
#shadow-status-text.status-fwd    { top: 21%; }
#shadow-status-text.status-eject  { top: 18%; }
#shadow-status-text.status-rec    { top: 21%; }

/* --- ANIMATIE UMBRĂ (NOISE & FLOW) --- */
@keyframes shadow-flow {
  0% {
    opacity: 0.75;
    filter: blur(1px);
    transform: rotate(-32deg) scaleX(1.3);
    text-shadow: 1px 0 2px rgba(0,0,0,0.1);
  }
  25% {
    opacity: 0.6;
    filter: blur(2px);
    transform: rotate(-32deg) scaleX(1.5); /* Distorsiune pe X (întindere) */
    text-shadow: 4px 0 5px rgba(0,0,0,0.15);
  }
  50% {
    opacity: 0.8;
    filter: blur(1.2px);
    transform: rotate(-32deg) scaleX(1.2); /* Distorsiune pe X (compresie) */
    text-shadow: -2px 0 2px rgba(0,0,0,0.1);
  }
  75% {
    opacity: 0.7;
    filter: blur(1.5px);
    transform: rotate(-32deg) scaleX(1.4);
    text-shadow: 2px 0 4px rgba(0,0,0,0.15);
  }
  100% {
    opacity: 0.75;
    filter: blur(1px);
    transform: rotate(-32deg) scaleX(1.3);
    text-shadow: 1px 0 2px rgba(0,0,0,0.1);
  }
}

#shadow-status-text.shadow-active {
  animation: shadow-flow 7s infinite ease-in-out; /* Mult mai lent */
}

/* LOGICĂ VIZIBILITATE: Textul apare doar la hover pe butoane, nu și când rămân active */
#casetofon-container:not(:has(.control-btn:hover)) #shadow-status-text {
  opacity: 0 !important;
  animation: none !important;
}

/* ACESTA DEVINE NOUL TĂU OVERLAY PRINCIPAL */
#oracol-overlay {
  position: fixed;
  /* Fixat pe ecran */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Fundalul este invizibil, dar PRINDE CLICK-URILE */
  /* background-color: rgba(0,0,0,0.1); */
  /* Poți adăuga o culoare de test la început */

  /* Centrarea caietului în interior */
  display: flex;
  justify-content: center;
  align-items: center;

  z-index: 200;
  /* Stă deasupra a tot */
  transition: opacity 0.5s;
}

/* CAIETUL NU MAI ARE NEVOIE DE POZIȚIONARE ABSOLUTĂ */
#oracol-focus-container {
  position: relative;
  /* Sau lasă-l static, e ok */

  /* Dimensiunile rămân la fel */
  width: 41.2rem;
  height: auto;
  aspect-ratio: 44.4375 / 61.3125;
  max-width: 98%;
  max-height: 98%;

  /* z-index-ul nu mai este necesar aici, pentru că este controlat de părinte */
}

/* STRATUL 1: COPERTA ROZ */
#oracol-coperta {
  position: absolute;
  top: -0.3rem;
  left: 0.5rem;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s;

  /* Stilurile copiate din Figma */
  background-color: #D978FC;
  /* Culoarea ta roz */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

  /* Îi spunem să stea în spate */
  z-index: 1;
}

/* STRATUL 2: PAGINA CU LINII */
#oracol-pagina {
  position: absolute;

  /* Centrarea paginii în interiorul copertei */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Dimensiunile paginii, mai mici decât ale copertei */
  width: 98%;
  height: 98%;

  /* Aici construiești pagina (fundal alb, etc., cum am discutat) */
  background-color: #FFFBEA;
  border-radius: 12px;
  padding: 5px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    /* O bordură roșie pe copil */

  /* Îi spunem să stea DEASUPRA copertei */
  z-index: 2;
}

/* Conținutul paginii (hârtia crem) umple containerul #oracol-pagina */
.pagina-content {
  width: 100%;
  height: 100%;
  background-color: #FFFBEA;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.pagina-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Desenăm liniile albastre pe toată suprafața */
  background-image: repeating-linear-gradient(transparent 0,
      transparent 27px,
      #D8E2EC 27px,
      #D8E2EC 28px);
  background-size: 100% 28px;

  z-index: 1;
  /* Stă la bază */
}

/* STRATUL 2 (deasupra): Linia Roșie Verticală */
/* O vom crea tot cu un pseudo-element pentru control total */
.pagina-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100px;
  /* Poziția liniei roșii */
  width: 2px;
  height: 100%;

  background-color: #F55B5B;
  /* Culoarea roșie */
  z-index: 3;
  /* Stă deasupra a tot, cu excepția textului */
}

.header-mask {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 30px;
  /* Înălțimea header-ului */

  /* Culoarea hârtiei, pentru a acoperi liniile albastre */
  background-color:#FFFBEA;

  z-index: 2;
  /* CRUCIAL: Stă deasupra liniilor albastre (z-index: 1) */
  /* dar SUB linia roșie (z-index: 3) */
}
/* ======================================================= */

.text-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px 30px 0px 2px;
  /* Sus, Dreapta, Jos, Stânga (ajustează) */
  box-sizing: border-box;
  /* Esențial! */

  display: flex;
  flex-direction: column;
  z-index: 10;
  /* Aranjează elementele pe verticală */
}

/* CONTAINERUL STABIL (Fundația) */
#intrebare-container {
  /* Definește un spațiu fix și predictibil în layout */
  height: 50px;
  /* Sau orice înălțime dorești */
  width: 100%;

  /* Centrarea elementului din interior (imaginea) */
  display: flex;
  /* Îl facem și pe el un container flex */

  /* ACUM, alinierea vine de aici, nu din variabile CSS */
  justify-content: center;
  /* Aliniere orizontală implicită: centru */

  /* IMPORTANT: FĂRĂ MARGINI care se schimbă! */
  margin-bottom:0px;

  /* FĂRĂ TRANSFORMĂRI AICI! */
}

/* Aplicăm clase de aliniere pe container, NU pe imagine */
#intrebare-container.align-left {
  justify-content: flex-start;
}

#intrebare-container.align-center {
  justify-content: center;
}

#intrebare-container.align-right {
  justify-content: flex-end;
}

/* ELEMENTUL ANIMAT (Actorul) */
#intrebare-imagine {
  /* Își ia dimensiunea de la conținut, dar nu depășește părintele */
  max-height: 100%;
  max-width: 100%;

  /* Tranziția se aplică doar pe transformare */
  transition: transform 0.3s ease-in-out;

  /* Aici aplicăm variabilele CSS pentru animație */
  transform: scale(var(--scale, 1)) translate(var(--translateX, 0), var(--translateY, 0));
}

#coloana-raspunsuri-altii {
  /* Acest container va crește în funcție de conținut */
  margin-top: 28px; /* Spațiu de un rând sub imaginea întrebării */
  overflow-y: visible;
  /* Adaugă scroll dacă lista e prea lungă */
  padding: 0;
  margin-bottom: 0;
}

/* Container pentru fiecare răspuns din BD (div.raspuns-item) */
.raspuns-item {
  display: flex;
  align-items: flex-start;
  padding-left: 105px; /* Aliniere cu linia roșie */
  line-height: 28px; /* Potrivire cu liniile paginii */
}

/* Stil pentru numărul din fața răspunsului din BD */
.numar-raspuns {
  font-family: cursive;
  color: rgb(35, 115, 211);
  font-size: 1.4rem;
  padding-right: 5px;
  /* Ajustare pentru aliniere verticală */
  position: relative;
  transform: translateY(8px);
}

/* Stil pentru textul răspunsului din BD */
.text-raspuns {
  font-size: calc(var(--font-scale-factor, 1) * 1.4rem);
  position: relative;
  top: calc(5px + var(--vertical-offset, 0px));
}

/* Container pentru zona de input a utilizatorului */
#raspuns-input-container {
  display: flex;
  align-items: flex-start; /* Aliniază elementele la începutul liniei */
  padding-left: 105px; /* Aliniere identică cu cele de sus */
  line-height: 28px; /* Asigură aceeași înălțime de rând */
}

/* Stil pentru numărul din fața inputului utilizatorului */
#raspuns-numar {
  font-family: cursive;
  color: rgb(35, 115, 211);
  padding-right: 5px; /* Spațiu identic */
}

/* Stil pentru câmpul de text al utilizatorului */
#raspuns-input {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.01); /* Truc: Nu transparent complet, pentru a prinde click-ul */
  border: none;
  outline: none;
  resize: none;
  width: 100%; /* Ocupă spațiul rămas */
  box-sizing: border-box;
  flex-grow: 1;
  cursor: text;
  
  /* FORȚĂM INTERACȚIUNEA */
  pointer-events: auto !important;
  z-index: 1000; /* Ne asigurăm că e deasupra oricărui element din container */

  /* Fonturi și culori identice cu cele de sus */
  font-size: calc(var(--font-scale-factor, 1) * 1.4rem);
  line-height: 28px;

  /* Micul ajustaj vertical pentru alinierea pe linie */
  position: relative;
  top: calc(2px + var(--vertical-offset, 0px));
  padding-left: 0; /* Padding-ul este deja pe container */

  /* Asigură selectarea pe iOS */
  -webkit-user-select: text;
  user-select: text;
}

/* Stil comun pentru ambele zone de click */
.page-nav-trigger {
  position: absolute;
  top: 0;
  width: 100px;
  /* Dimensiunea zonei "fierbinți" */
  height: 100px;
  /* Poți ajusta aceste valori */
  cursor: pointer;
  z-index: 25; /* Mărit pentru a fi DEASUPRA textului (z-index 10) */
  /* Asigură-te că sunt deasupra liniilor și a măștii */

  /* Previne selectarea textului la dublu-click rapid */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Poziționarea specifică fiecărei zone */
#prev-page-trigger {
  left: 0;
}

#next-page-trigger {
  right: 0;
}

/* Stilul pentru pseudo-elementul care va fi triunghiul */
.page-nav-trigger::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;

  /* Culoarea "glow"-ului */
  background-color: rgba(0, 0, 0, 0.08);
  /* Un gri foarte subtil */

  /* Inițial, este complet invizibil */
  opacity: 0;

  /* Animația de apariție/dispariție */
  transition: opacity 0.3s ease-in-out;
}

/* AICI DESENĂM TRIUNGHIURILE folosind clip-path */
#prev-page-trigger::before {
  top: 0;
  left: 0;
  /* Creează un poligon triunghiular în colțul stânga-sus */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#next-page-trigger::before {
  top: 0;
  right: 0;
  /* Creează un poligon triunghiular în colțul dreapta-sus */
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* Animația la HOVER */
.page-nav-trigger:hover::before {
  opacity: 1;
  /* Facem triunghiul vizibil */
} 

/* Stilul comun pentru indicii - rămâne similar */
.onboarding-hint {
  position: absolute;
  /* Ancorat de #oracol-overlay */
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in-out;
  z-index: 201;
  /* Deasupra overlay-ului, dar poate sub caiet dacă vrei */
}

.onboarding-hint.vizibil {
  opacity: 1;
}

.onboarding-hint img {
  width: 200px;
  /* Setează aici lățimea dorită pentru indiciu */
  height: auto;
  /* Înălțimea se va ajusta automat */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  /* Adaugă umbră pentru lizibilitate */
}

/* Poziționarea - AICI ESTE MAGIA */
#hint-prev,
#hint-next {
  top: 28%;
  /* Le aducem la jumătatea ecranului pe verticală */
}

#hint-prev {
  /* Îl mutăm la 50% din lățimea ecranului (centru) */
  left: 45%;
  /* Apoi îl tragem înapoi cu jumătate din lățimea caietului + un pic */
  transform: translate(calc(-20rem - 150px), -15rem);
  /* Ajustează valorile */
}

#hint-next {
  /* La fel, îl mutăm la 50% */
  right: 40%;
  /* Apoi îl tragem înapoi spre dreapta */
  transform: translate(calc(20rem + 150px), -15rem);
  /* Ajustează valorile */
}

/* Ajustări pentru ecrane mici (mobil) pentru a aduce indiciile pe ecran */
@media (max-width: 900px) {
  body {
    zoom: 1; /* Dezactivăm zoom-ul pe mobil pentru a preveni micșorarea fontului sub 16px */
  }

  #hint-prev, #hint-next {
    /* CALCUL INTELIGENT: */
    /* Poziționăm la mijloc (50%) și scădem jumătate din înălțimea caietului (aprox 60vw) */
    /* Astfel, săgețile vor sta mereu exact la colțurile de sus ale caietului */
    top: calc(50% - 60vw);
    width: 100px; /* Reducem dimensiunea imaginilor */
  }

  #hint-prev {
    left: 10px;
    transform: none; /* Resetăm poziționarea calculată pentru desktop */
  }

  #hint-next {
    right: 10px;
    transform: none; /* Resetăm poziționarea calculată pentru desktop */
  }

  .onboarding-hint img {
    width: 100%;
  }

  #raspuns-input {
    font-size: 16px !important; /* Asigurăm dimensiunea minimă pentru a preveni zoom-ul pe iOS */
  }

  /* --- MOBILE FIXES (Walkman, Clippy, About) --- */
  
  /* 1. Butoane Walkman (Hitboxes & Visuals) */
  /* Resetăm poziționarea pentru a folosi logica de desktop (care este corectă și pe tabletă) */
  .control-btn {
    touch-action: manipulation; /* Păstrăm doar optimizarea de touch */
  }

  /* 2. Clippy Helper (Ajustare dimensiune și poziție) */
  #clippy-container {
    width: 40% !important; /* Mai mare relativ la walkman-ul mic */
    top: -25% !important; /* Îl mutăm mai sus */
    right: -15% !important;
  }
  
  .clippy-bubble {
    width: 180% !important; /* Balon mai compact */
    left: -40% !important;
    font-size: 11px !important;
  }

  /* 3. About Overlay (Optimizare pentru ecrane mici) */
  #about-card-container {
    width: 85vw !important;
    max-width: 400px !important;
  }

  .about-title { font-size: 22px !important; }
  .about-body { font-size: 13px !important; }
  .about-content-scroll { top: 12% !important; height: 65% !important; overflow-y: auto !important; padding-right: 5px !important; }
  .logo-camin { height: 40px !important; margin-bottom: 0 !important; }
  .logo-dialogo { height: 60px !important; margin-top: 0 !important; }
  .logo-ftf { height: 25px !important; top: 0 !important; }
}

/* Ajustări specifice pentru Landscape pe mobil (când apare tastatura) */
@media (max-width: 900px) and (orientation: landscape) {
  #oracol-overlay {
    align-items: flex-start; /* Aliniem caietul sus, nu la centru */
    overflow-y: auto; /* Permitem scroll vertical pentru a vedea tot caietul */
  }

  #oracol-focus-container {
    max-height: none; /* Lăsăm caietul să fie înalt, nu îl turtim */
    margin-top: 20px; /* Puțin spațiu sus */
    margin-bottom: 50vh; /* Spațiu tampon jos generos pentru a putea da scroll peste tastatură */
  }

  /* În landscape, calculul cu vw nu e bun (ecranul e lat), așa că le punem fix sus */
  #hint-prev, #hint-next {
    top: 40px;
  }
}

/* --- STAREA FOCUS (CÂND BODY ARE CLASA NOUĂ) --- */

body.oracol-focus-active #scena-birou {
  filter: blur(8px);
  /* Aplicăm blur pe TOATĂ scena biroului */
}

body.oracol-focus-active #oracol-trigger {
  opacity: 0;
  /* Facem oracolul mic invizibil */
  pointer-events: none;
  /* Îl facem non-interactiv */
}

/* Stilul general pentru scenele ascunse */
.scena {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: none;
  /* Adaugă aici un fundal sau alte stiluri generale */
}

/* Clasa helper pentru a ascunde/arăta scene */
.ascuns {
  display: none !important;
}

/* Stil pentru containerul mesajului de final */
.final-message {
    padding-top: 28px; /* 28px * 2, pentru aliniere pe grilă */
    padding-left: 105px; /* Aliniere la dreapta de linia roșie */
    text-align: center; /* Aliniere text la stânga în container */
    font-family: 'Comic Sans MS', 'Chalkduster', 'cursive';
    color: #2c3e50;
    height: 100%;
}

.final-message h2 {
    font-size: 1.5rem; /* Redus pentru a încăpea pe o linie de 28px */
    line-height: 28px; /* Aliniere pe grilă */
    margin: 0 0 84px 0; /* Spațiu de DOUĂ linii sub titlu */
}

.final-message p {
    font-size: 1.2rem;
    line-height: 28px; /* Aliniere pe grilă */
    margin: 0 0 28px 0; /* Spațiu de o linie sub fiecare paragraf */
    text-indent: 0.5em; /* Adaugă indentația la începutul paragrafului */
}

.final-message strong {
    color: #003399; /* Un albastru închis, ca de pix */
    font-weight: bold;
}

/* --- STILURI CASETE INDIVIDUALE --- */
.caseta {
  width: 5.95%;
  height: auto;
  aspect-ratio: 136.00/211.91;
  z-index: 6; /* Peste casetofon (5) pentru a fi vizibile la drag */
  cursor: grab;
  transition: transform 0.2s, opacity 0.2s;
  
  /* Stil Carcasă Transparentă */
  box-sizing: border-box; /* Include padding-ul în dimensiunea totală */
  padding: 0; /* Fără spațiu extra, chenarul vine fix pe imagine */
  background: rgba(255, 255, 255, 0.15); /* Tentă de plastic semi-transparent */
  border: 1px solid rgba(255, 255, 255, 0.4); /* Reflexie pe margine */
  border-radius: 2px; /* Colțuri ușor rotunjite */
  overflow: hidden; /* Asigură că imaginea respectă colțurile rotunjite */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35), inset 0 0 4px rgba(255, 255, 255, 0.2);
  touch-action: none; /* CRUCIAL: Previne scroll/zoom pe mobil când tragi caseta */
}

/* Stil alternativ: Caseta cu colțuri rotunjite (Design Oracol) */
.caseta-rounded {
  border-radius: 13px; /* Rază mai mare pentru a se mula pe colțurile imaginii */
  background: rgba(255, 255, 255, 0.12); /* Ușor mai transparent */
  border: 1px solid rgba(255, 255, 255, 0.35); /* Bordură mai fină */
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 0 6px rgba(255, 255, 255, 0.2);
}

/* STARE DRAGGING (Când ții click pe casetă) */
.caseta.dragging {
  position: fixed !important; /* Iese din fluxul biroului */
  z-index: 9999 !important; /* Deasupra a tot */
  width: 18.7rem !important; /* MĂRIME MARE (aprox 3x) - redus cu 15% */
  height: auto !important;
  transform: rotate(0deg) !important; /* O îndreptăm să se vadă bine */
  pointer-events: none; /* CRUCIAL: Permite mouse-ului să "vadă" prin casetă pentru a detecta casetofonul */
  cursor: grabbing;
  transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s ease; /* Animație de "pop" */
}

/* Păstrăm filtrul albastru peste casetă chiar și când e scoasă din scenă (drag) */
.caseta.dragging::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #9CD6FF;
  opacity: 0.19;
  pointer-events: none;
  z-index: 10;
}

.caseta:active {
  cursor: grabbing;
}

/* Fix pentru Drag & Drop: Imaginea nu trebuie să fure evenimentul */
.caseta img {
  pointer-events: none;
  display: block; /* Elimină spațiul gol de sub imagine (baseline) */
  width: 100%;
  height: 100%;
}

/* Pentru Casa Loco, facem crop la imagine ca să nu fie distorsionată */
#caseta-casaloco img {
  object-fit: cover;
}

/* Poziționare pe birou */
#caseta-animalx {
  top: 33.8%;
  left: 22.1%;
  transform: rotate(21.876deg);
}

#caseta-casaloco {
  top: 8.94%;
  left: 10.1%;
  transform: rotate(25deg);
}

#caseta-simplu {
  top: 18%;
  left: 70%;
  transform: rotate(-12deg);
}

#caseta-andra-noapte {
  top: 35%;
  left: 5%;
  transform: rotate(-20deg);
}

#caseta-ilegal {
  top: 46%;
  left: 5%;
  transform: rotate(-35deg);
}

#caseta-tuttifrutti {
  top: 43%;
  left: 38.4%;
  transform: rotate(-60deg);
}

#caseta-hiq {
  top: 10%;
  left: 20%;
  transform: rotate(70deg);
}

#caseta-niciodatadragostea {
  top: 55%;
  left: 20%;
  transform: rotate(-15deg);
}

#caseta-lunamiazambit {
  top: 42%;
  left: 34%;
  transform: rotate(20deg);
}

#caseta-pentruea {
  top: 33%;
  left: 85%;
  transform: rotate(-56deg);
}

/* --- REVISTA LEVEL --- */
#revista-level {
  width: 20%;
  top: 1%;
  left: -18%;
  transform: rotate(90deg);
  z-index: 2; /* Sub casete, peste birou */
  box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}

/* --- CLIPPY STYLES --- */
#clippy-container {
  position: absolute;
  top: 20%;
  right: 0%;
  width: 25%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#clippy-container img {
  width: 100%;
  height: auto;
}

@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#clippy-container.ascuns {
  display: none;
}

.clippy-bubble {
  background: #FFFFCC;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 10px;
  font-family: 'Tahoma', sans-serif;
  font-size: 0.75rem;
  color: #000;
  margin-bottom: 12px;
  position: relative;
  width: 300%;
  text-align: left;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
  transform: translateX(40%);
}

.clippy-bubble::after, .clippy-bubble::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 10%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 10px 8px 0;
  display: block;
  width: 0;
}

.clippy-bubble::before {
  bottom: -11px;
  border-color: #000 transparent transparent transparent;
}

.clippy-bubble::after {
  border-color: #FFFFCC transparent transparent transparent;
}

.clippy-bubble ul {
  margin: 4px 0 4px 16px;
  padding: 0;
  list-style-type: square; /* Stil specific listelor vechi */
}

/* --- WINDOWS XP SIMULATION STYLES --- */

/* Containerul principal al scenei XP (Camera) */
#xp-scene-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500; /* Peste birou */
    overflow: hidden;
}

/* LAYER 1: Fundal Cameră */
#xp-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    cursor: pointer;
}

/* Container Monitor Assembly */
#monitor-assembly {
    position: relative;
    width: auto;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* LAYER 2: Monitor Cadru */
#monitor-frame-layer {
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    max-width: none;
}

/* LAYER 3: Overlay Negru 12% */
#scene-dark-overlay {
    position: fixed; /* Acoperă tot ecranul */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.12); /* 12% Opacitate */
    pointer-events: none;
    z-index: 3; /* Peste fundal și cadru */
}

/* LAYER 4: Ancora Ecranului (Zona unde se randează desktopul) */
#xp-screen-anchor {
    position: absolute;
    top: 7%;
    left: 13%;
    width: 74%;
    height: 88%;
    z-index: 4; /* Peste overlay-ul negru, pentru a fi luminos */
    overflow: hidden;
    border-radius: 2px; /* Ușoară rotunjire la colțurile ecranului */
    background: #000;
}

/* Efecte CRT */
.crt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2147483647; /* Maxim posibil pentru a sta peste orice fereastră */
}

.scanlines {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.1) 50%,
        rgba(0,0,0,0.1)
    );
    background-size: 100% 4px;
}

.glow {
    box-shadow: inset 0 0 40px rgba(0,0,0,0.6);
}

/* --- XP BOOT SEQUENCE --- */
#xp-boot-sequence {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 2000; /* Peste desktop */
    font-family: 'Courier New', monospace;
    color: #ccc;
    overflow: hidden;
}

/* FIX: Poziționare absolută pentru a suprapune ecranele de boot */
#xp-boot-sequence > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#boot-black-screen {
    background: #000;
    z-index: 1;
}

#boot-bios-screen {
    padding: 20px;
    font-size: 14px;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #000;
    z-index: 2;
}

.bios-bottom {
    border-top: 1px solid #666;
    padding-top: 5px;
}

#boot-loading-screen {
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    z-index: 3;
}

.xp-logo-wrapper img {
    max-width: 450px;
    height: auto;
    margin-bottom: 20px;
}

/* XP Loading Bar (Adapted from CodePen) */
.xp-loading-container {
    width: 180px;
    height: 14px;
    border: 2px solid #b2b2b2;
    border-radius: 5px;
    padding: 2px;
    box-sizing: content-box;
}

.xp-loading-box {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.xp-load-block {
    width: 13px;
    height: 100%;
    background: linear-gradient(to bottom, #2838c7 0%,#5979ef 17%,#869ef3 32%,#869ef3 45%,#5979ef 59%,#2838c7 100%);
    border-radius: 2px;
    position: absolute;
    left: -20px;
}

.block-1 { animation: xpMove 2s infinite linear; }
.block-2 { animation: xpMove 2s infinite linear; animation-delay: 0.2s; }
.block-3 { animation: xpMove 2s infinite linear; animation-delay: 0.4s; }

@keyframes xpMove {
    0% { left: -20px; }
    100% { left: 100%; }
}

.boot-footer {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
}

.boot-copyright {
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
}

.boot-ms-logo {
    position: relative;
    bottom: -25px; /* Valori negative (-10px) îl coboară, pozitive (10px) îl urcă */
}

.boot-ms-logo img {
    height: 120px; /* Echilibrat vizual cu textul din stânga */
    width: auto;
    filter: invert(1); /* Face logo-ul alb */
}

.blinking-cursor {
    animation: blink 0.5s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

#boot-welcome-screen {
    background-color: #003399; /* Fallback blue */
    z-index: 4;
}

#boot-welcome-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Desktop XP */
#xp-desktop {
    width: 100%;
    height: 100%;
    background: url('assets/desktop-xp/bliss-desktop.webp') no-repeat center center;
    background-size: cover;
    position: relative;
    font-family: 'Tahoma', sans-serif;
}

/* Iconițe */
.desktop-icons-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 90%;
    padding: 10px;
    gap: 15px;
    align-content: flex-start;
}

.xp-icon {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px black;
    cursor: pointer;
    padding: 5px;
    border: 1px solid transparent;
}

.xp-icon:hover {
    background-color: rgba(0, 0, 255, 0.2);
    border: 1px solid rgba(0, 0, 255, 0.4);
    border-radius: 3px;
}

.xp-icon img {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}

.xp-icon span {
    font-size: 11px;
    line-height: 1.2;
}

/* Taskbar */
#taskbar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(180deg, #3168D5 2.8%, #4993E6 6.99%, #286ADD 14.1%, #2359D6 19.93%, #2157D7 36.28%, #245DDB 57.21%, #2662DF 75.35%, #2663E0 90.7%, #1E50C4 94.89%, #3155B0 100%);
    border-top: 1px solid #0831d9;
    display: flex;
    align-items: center;
    z-index: 1000;
}

#start-button {
    width: 99px;
    height: 30px;
    background-image: url('assets/desktop-xp/state=idle.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    margin-right: 10px;
}

#start-button:hover {
    background-image: url('assets/desktop-xp/state=hover.png');
}

/* Starea pressed (activă sau când meniul e deschis) */
#start-button:active,
#start-button.pressed {
    background-image: url('assets/desktop-xp/state=pressed.png');
}

#taskbar-items {
    flex-grow: 1;
    display: flex;
    padding-left: 5px;
    gap: 2px;
}

.taskbar-item {
    width: 150px;
    height: 24px;
    background: #3C81F3;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    color: white;
    font-size: 11px;
    cursor: pointer;
    box-shadow: inset 0 0 2px rgba(255,255,255,0.3);
}

.taskbar-item:hover {
    background: #5FA3F7;
}

.taskbar-item.active {
    background: #1E52B7;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
}

#system-tray {
    background: #0b96d6;
    height: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 11px;
    border-left: 1px solid #1042af;
    box-shadow: inset 1px 0 2px rgba(0,0,0,0.2);
}

/* --- WINAMP CONTAINER FIX --- */
#webamp-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100; /* Va fi manipulat de JS pentru a veni în față */
    display: block;
    pointer-events: none; /* Permite click-urile să treacă prin zonele goale */
    
    /* Previne selectarea textului și cursorul I-beam */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default; 
}

/* Asigurăm că Webamp nu are fundal și ferestrele sunt interactive */
#webamp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none !important;
}

/* Reactivăm click-ul DOAR pe elementele vizibile din Winamp */
#webamp .window, #webamp .webamp-window {
    pointer-events: auto !important;
}

/* Start Menu */
#start-menu {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 380px;
    height: 480px;
    background: white;
    border-radius: 8px 8px 0 0;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    font-family: 'Tahoma', sans-serif;
    border: 1px solid #003399;
    overflow: hidden;
}

#start-menu.ascuns { display: none; }

.start-header {
    height: 60px;
    background: linear-gradient(to bottom, #1c5eb8 0%, #3c95e8 100%);
    border-top: 2px solid #E59700; /* Linia portocalie de sus */
    padding: 0 10px;
    display: flex;
    align-items: center;
    box-shadow: inset 0 10px 10px -10px rgba(255,255,255,0.5);
}

.user-account {
    display: flex;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.user-avatar { 
    width: 40px; 
    height: 40px; 
    border: 2px solid white; 
    border-radius: 3px; 
    margin-right: 10px; 
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.start-body { 
    flex-grow: 1; 
    display: flex; 
    border-top: 1px solid #3E80F2;
}

.start-col-left {
    width: 50%;
    background: white;
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.start-col-right {
    width: 50%;
    background: #D3E5FA;
    border-left: 1px solid #95BDEB;
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.start-item { 
    padding: 4px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    margin-bottom: 2px;
    height: 36px;
}
.start-item:hover { background-color: #316AC5; color: white; }
.start-item img { width: 32px; height: 32px; margin-right: 8px; }
.start-item .item-info { display: flex; flex-direction: column; justify-content: center; }
.start-item .item-title { font-weight: bold; font-size: 11px; }
.start-item .item-desc { font-size: 10px; color: #666; }
.start-item:hover .item-desc { color: #ddd; }

.start-item-right {
    padding: 3px 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #00136B;
    font-size: 11px;
    height: 28px;
}
.start-item-right:hover { background-color: #316AC5; color: white; }
.start-item-right img { width: 20px; height: 20px; margin-right: 8px; }

.separator { height: 1px; background: linear-gradient(to right, transparent, #ccc, transparent); margin: 5px 0; }
.start-col-right .separator { background: #A0C3EE; }

.spacer { flex-grow: 1; }

.all-programs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-weight: bold;
    font-size: 11px;
    color: #333;
    cursor: pointer;
}
.all-programs:hover { background-color: #316AC5; color: white; }
.all-programs .arrow { margin-left: 5px; font-size: 8px; }

.start-footer { 
    height: 40px;
    background: linear-gradient(to bottom, #3c95e8 0%, #1c5eb8 100%);
    padding: 0 10px; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center;
    border-top: 1px solid #3E80F2;
    gap: 10px;
}

.footer-action { 
    color: white; 
    font-size: 11px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    padding: 5px;
}
.footer-action:hover { background-color: rgba(255,255,255,0.1); border-radius: 3px; }
.footer-action img { width: 20px; height: 20px; margin-right: 5px; }

/* Ferestre XP */
.xp-window {
    position: absolute;
    background: #ECE9D8;
    border: 1px solid #0055EA;
    border-radius: 5px 5px 0 0;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    min-width: 200px;
    min-height: 100px;
}

.window-titlebar {
    background: linear-gradient(to bottom, #0058EE, #0055EA 3%, #0055EA 15%, #2989D8 100%);
    padding: 5px 8px;
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 1px 1px 1px black;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default; /* Va fi draggable */
}

.window-controls { display: flex; gap: 2px; }
.win-btn { width: 18px; height: 18px; border: 1px solid white; border-radius: 3px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 10px; font-family: sans-serif; background: #D54728; }
.win-btn.minimize { background: #2989D8; }

.window-content {
    padding: 10px;
    flex-grow: 1;
    background: white;
    font-size: 12px;
    color: black;
    overflow: auto;
}

/* Stiluri pentru conținutul ferestrelor (Grid de fișiere) */
.folder-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
    align-content: flex-start;
}

.folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    cursor: pointer;
    text-align: center;
    padding: 5px;
    border: 1px solid transparent;
}

.folder-item:hover {
    background-color: rgba(0, 100, 255, 0.1);
    border: 1px solid rgba(0, 100, 255, 0.3);
    border-radius: 3px;
}

/* --- REVISTA OVERLAY --- */
#revista-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    transition: opacity 0.5s;
}

#revista-focus-container {
    position: relative;
    height: 85%;
    aspect-ratio: 210/297; /* Format A4 */
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    transition: transform 0.2s;
}

#revista-focus-container:hover {
    transform: scale(1.02);
}

#revista-focus-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 2px;
}

body.revista-focus-active #scena-birou { filter: blur(8px); }
body.revista-focus-active #revista-level { opacity: 0; pointer-events: none; }

/* --- ARHIVA 2000 (CULT CARDS) --- */

/* Stil Fullscreen Custom */
#cult2000-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 2000; /* Peste taskbar (1000) și ferestre (100+) */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cult-content-wrapper {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.cult-close-zone {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    z-index: 2001;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cult-close-zone:hover {
    opacity: 1;
}

.cult-close-x {
    font-family: 'Arial', sans-serif;
    font-size: 40px;
    color: #888;
    font-weight: bold;
    user-select: none;
}

.cult-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: flex-start;
    perspective: 2000px; /* Perspectivă mai adâncă pentru realism */
    width: 100%;
    box-sizing: border-box;
}

.cult-card {
    /* Calcul pentru 5 cartonașe pe rând: (100% - 4 gap-uri de 20px) / 5 */
    width: calc((100% - 80px) / 5);
    aspect-ratio: 0.714; /* Raportul standard de card (2.5 / 3.5) */
    height: auto;
    position: relative;
    border-radius: 4.5% / 3.5%; /* Rază specifică cardurilor de joc */
    cursor: pointer;
    perspective: 1000px; /* Necesar pentru efectul 3D */
    z-index: 1;
}

/* Containerul interior care se rotește */
.cult-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); /* Revenire lină */
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    border-radius: inherit;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* STAREA ACTIVĂ (Zoom + Flip) */
.cult-card.active {
    z-index: 3000; /* Peste tot */
}

.cult-card.active .cult-card-inner {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 480px; /* Dimensiune mărită pentru text mult */
    height: 650px;
    /* !important pentru a suprascrie stilul inline pus de JS la tilt */
    transform: translate(-50%, 0) rotateY(180deg) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    z-index: 3001;
    transition: transform 0.6s ease-in-out; /* Flip lent */
}

/* Tranziție rapidă doar la hover pentru efectul de tilt */
.cult-card:hover .cult-card-inner {
    transition: transform 0.1s linear;
}

/* Fețele cardului */
.card-face, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid #444;
}

/* FAȚA */
.card-face {
    background-color: #000;
}

.card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-face.desaturated img {
    filter: grayscale(100%);
}

.card-number {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #FF9900;
    color: black;
    padding: 2px 5px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
    z-index: 10;
}

    /* SPATELE */
    .card-back {
        background-color: #ECE9D8; /* Stil Windows XP */
        color: #000;
        transform: rotateY(180deg);
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border: 2px solid #003399;
    overflow-y: auto; /* Permite scroll pentru text mai lung */
}

/* Scrollbar specific pentru interiorul cartonașelor */
.card-back::-webkit-scrollbar {
    width: 6px;
}
.card-back::-webkit-scrollbar-track {
    background: #ECE9D8;
    border-radius: 4px;
}
.card-back::-webkit-scrollbar-thumb {
    background: #A0A0A0;
    border-radius: 4px;
}

.card-back h3 {
    margin-top: 0;
    color: #003399;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    width: 100%;
}

.card-back p {
    font-size: 13px;
    line-height: 1.4;
    text-align: justify;
}

/* CARTONAȘE GOALE (OUTLINE) */
.cult-card.empty {
    cursor: default;
}

.cult-card.empty .cult-card-inner {
    box-shadow: none;
    background: transparent;
    border: 2px dashed #444;
}

.empty-face {
    background: transparent;
    color: #444;
    font-size: 24px;
    font-weight: bold;
    border: none;
}

.folder-item img {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}

.folder-item span {
    font-size: 11px;
    word-wrap: break-word;
    line-height: 1.2;
}

/* --- INTERFAȚĂ CD REVISTĂ IT (ANII 2000) --- */
/* Overlay pentru interfața "Autorun" */
#cd-autorun-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3000; /* Peste desktop */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Verdana', 'Tahoma', sans-serif;
    backdrop-filter: blur(2px);
    
    /* Ascuns implicit, activat prin JS (clasa .active) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#cd-autorun-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Fereastra Principală */
#cd-interface {
    width: 960px;
    height: 640px;
    background: #E4E4E4; /* Gri standard Windows */
    border: 1px solid #FFF;
    border-right-color: #444;
    border-bottom-color: #444;
    box-shadow: 0 15px 50px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 2px;
}

/* Bara de Titlu / Header */
.cd-header {
    height: 50px;
    background: linear-gradient(90deg, #003399 0%, #3366CC 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 3px solid #FF9900; /* Accent portocaliu specific Level/Chip */
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.cd-app-title {
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
    text-shadow: 2px 2px 0px #000;
    letter-spacing: 1px;
}

.cd-close-btn {
    width: 24px;
    height: 24px;
    background: #CC0000;
    border: 1px solid #FFF;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.5);
    color: white;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: bold;
    border-radius: 2px;
}

.cd-close-btn:active {
    border-style: inset;
    background: #990000;
}

/* Bara de Navigare (Categorii) */
.cd-nav-bar {
    height: 45px;
    background: #D4D0C8;
    border-bottom: 1px solid #808080;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
    box-shadow: inset 0 1px 0 white;
}

.cd-nav-btn {
    padding: 6px 15px;
    background: linear-gradient(to bottom, #FFF 0%, #E0E0E0 100%);
    border: 1px solid #808080;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
}

.cd-nav-btn:hover {
    background: #FFF;
    color: #003399;
}

.cd-nav-btn.active {
    background: #FF9900;
    color: white;
    border-color: #CC6600;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Zona de Conținut */
.cd-content-wrapper {
    flex-grow: 1;
    display: flex;
    padding: 15px;
    gap: 15px;
    background-color: #F0F0F0;
    overflow: hidden;
}

/* Coloana Stânga: Lista Video */
.cd-list-panel {
    width: 25%;
    background: white;
    border: 1px solid #7F9DB9;
    display: flex;
    flex-direction: column;
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.1);
}

.cd-list-header {
    background: #E0E0E0;
    padding: 8px;
    font-size: 11px;
    font-weight: bold;
    border-bottom: 1px solid #999;
    color: #333;
}

.cd-scroll-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2px;
}

.cd-list-item {
    padding: 6px 8px;
    font-size: 11px;
    cursor: pointer;
    border-bottom: 1px dotted #DDD;
    display: flex;
    align-items: center;
    color: #333;
}

.cd-list-item:hover {
    background-color: #E6F2FF;
    border-color: #B3D9FF;
}

.cd-list-item.selected {
    background-color: #003399;
    color: white;
}

/* Panou Central: Descriere */
.cd-details-panel {
    width: 35%;
    background: white;
    border: 1px solid #7F9DB9;
    padding: 20px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.5;
    color: #333;
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.1);
}

.cd-details-title {
    font-size: 18px;
    font-weight: bold;
    color: #003399;
    margin-bottom: 15px;
    border-bottom: 2px solid #FF9900;
    padding-bottom: 5px;
}

.cd-details-desc {
    margin-bottom: 20px;
    text-align: justify;
}

/* Panou Dreapta: Player */
.cd-player-panel {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-video-frame {
    width: 100%;
    aspect-ratio: 4/3;
    background: #000;
    border: 3px solid #333;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

.cd-video-frame video, .cd-video-frame iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- WINDOWS MEDIA PLAYER 9 SKIN (CUSTOM VIDEO PLAYER) --- */
.wmp-skin {
    width: 100%;
    height: 100%;
    background: #000 url('assets/desktop-xp/skin-mediaplayer9/main.bmp') no-repeat center center;
    background-size: 100% 100%;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    font-family: 'Tahoma', sans-serif;
    overflow: hidden;
    padding: 3px; /* Ajustare pentru marginile skin-ului */
    box-sizing: border-box;
}

.wmp-skin.xp-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.wmp-screen {
    flex-grow: 1;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: none;
    margin: 0 2px;
}

.wmp-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wmp-controls-holder {
    height: 55px;
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    position: relative;
    justify-content: flex-end;
    box-shadow: none;
}

.wmp-seek-bar {
    width: calc(100% - 16px);
    height: 10px;
    -webkit-appearance: none;
    background: transparent;
    margin: 0;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 0; 
    right: 0;
    margin: 0 auto;
    padding: 0;
    z-index: 10;
}

.wmp-seek-bar::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.3);
    border: none;
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}

.wmp-seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px;
    width: 11px;
    background: url('assets/desktop-xp/skin-mediaplayer9/seek.bmp') no-repeat center;
    background-size: contain;
    border: none;
    margin-top: -5px;
    border-radius: 0;
    box-shadow: none;
    clip-path: none;
}

.wmp-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 8px 10px;
    height: 40px;
}

.wmp-btn-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wmp-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: none;
    padding: 0;
    transition: none;
}

.wmp-btn:hover {
    filter: brightness(1.2);
    box-shadow: none;
}

.wmp-btn:active {
    background: transparent;
    box-shadow: none;
    transform: translateY(1px);
}

.wmp-btn.big {
    width: 42px;
    height: 42px;
    background: transparent;
    border: none;
}

/* Iconițe CSS */
.wmp-icon-prev,
.wmp-icon-play,
.wmp-icon-pause,
.wmp-icon-stop,
.wmp-icon-next {
    width: 100%; height: 100%;
    background-image: url('assets/desktop-xp/skin-mediaplayer9/transports.bmp');
    background-repeat: no-repeat;
    background-size: auto; /* CRUCIAL: Nu 'contain', pentru a nu micșora tot sprite-ul */
    border: none;
    margin: 0;
    filter: none;
    /* Centrarea orizontală a sprite-ului în interiorul butonului */
    background-position-x: center;
}

.wmp-icon-prev {
    background-position-y: 0;
}

.wmp-icon-play {
    background-position-y: -30px; /* Presupunem că butonul Play începe la 30px de sus */
}

.wmp-icon-pause {
    background-position-y: -60px; /* Și tot așa... */
}

.wmp-icon-stop {
    background-position-y: -90px;
}

.wmp-icon-next {
    background-position-y: -120px;
}

/* Display Area (LCD Style) */
.wmp-display-area {
    flex-grow: 1;
    margin: 0 10px;
    height: 24px;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    position: relative;
}

/* Efect de sticlă peste display */
.wmp-display-area::after {
    content: none;
}

.wmp-status-text {
    font-size: 10px;
    color: #33ff00;
    font-family: 'Tahoma', sans-serif;
    text-shadow: 0 0 4px rgba(51, 255, 0, 0.6);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wmp-time-text {
    font-size: 11px;
    color: #33ff00;
    font-family: 'Tahoma', sans-serif;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(51, 255, 0, 0.6);
    pointer-events: none;
}

/* Volume Control */
.wmp-volume-wrapper {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wmp-volume-slider {
    width: 50px;
    height: 4px;
    -webkit-appearance: none;
    background: #222;
    border: 1px solid #666;
    border-radius: 1px;
    box-shadow: inset 0 1px 2px #000;
}

.wmp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px; height: 10px;
    background: url('assets/desktop-xp/skin-mediaplayer9/vol.bmp') no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
    box-shadow: none;
    margin-top: -3px; /* Centrare verticală pe track */
}

/* --- STICKER HOLOGRAFIC BIROU --- */
#desk-holo-sticker {
    position: absolute;
    top: 10%;
    right: 4%;
    width: 10%;
    height: auto;
    z-index: 4; /* Sub casete (z-index 6) dar peste birou */
    transform: rotate(0deg);
    cursor: pointer;
    /* Variabile pentru efectul holografic */
    --bg-x: 20%;
    --bg-y: 20%;
    --opacity: 0;
}

#desk-holo-sticker img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(2px 4px 5px rgba(0,0,0,0.4));
}

.sticker-shine, .sticker-glare {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    opacity: var(--opacity);
    transition: opacity 0.3s ease;
    
    /* Mascare pe forma imaginii pentru a nu ieși din contur */
    -webkit-mask-image: url('./assets/logos/sticker holografic.png');
    mask-image: url('./assets/logos/sticker holografic.png');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.sticker-shine {
    background: linear-gradient(115deg, transparent 20%, rgba(255, 0, 0, 0.5) 30%, rgba(255, 255, 0, 0.5) 40%, rgba(0, 255, 0, 0.5) 50%, rgba(0, 255, 255, 0.5) 60%, rgba(0, 0, 255, 0.5) 70%, rgba(255, 0, 255, 0.5) 80%, transparent 90%);
    background-size: 200% 200%;
    background-position: var(--bg-x) var(--bg-y);
    mix-blend-mode: color-dodge;
    filter: brightness(1.2) contrast(1.2);
    z-index: 2;
}

.sticker-glare {
    background: radial-gradient(farthest-corner circle at var(--bg-x) var(--bg-y), rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.4) 30%, transparent 60%);
    mix-blend-mode: overlay;
    z-index: 3;
}

/* --- GREEN SCREEN MODE (PENTRU CAPTURĂ VIDEO) --- */
body.green-screen-mode {
    background-color: #00FF00 !important; /* Verde pur pentru Chroma Key */
    overflow: hidden;
}

body.green-screen-mode #scena-birou {
    background-image: none !important;
    background-color: #00FF00 !important;
    filter: none !important;
}

/* Ascunde filtrul albastru și alte elemente */
body.green-screen-mode #scena-birou::before,
body.green-screen-mode #xp-scene-wrapper,
body.green-screen-mode #oracol-overlay,
body.green-screen-mode #revista-overlay,
body.green-screen-mode #cd-autorun-overlay,
body.green-screen-mode #clippy-container,
body.green-screen-mode .caseta {
    display: none !important;
}

/* Ascunde toate elementele de pe birou cu excepția stickerului */
body.green-screen-mode #scena-birou > *:not(#desk-holo-sticker) {
    display: none !important;
}

/* Centrează și mărește stickerul pentru o rezoluție mai bună la crop */
body.green-screen-mode #desk-holo-sticker {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) scale(3) rotate(0deg) !important; /* Reset rotation, scale up */
    z-index: 9999 !important;
    cursor: none !important; /* Ascunde cursorul dacă e deasupra */
}

/* --- YAHOO MESSENGER SIMULATION (AUTHENTIC STYLE) --- */

.ym-app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #E0E0E0; /* Classic YM Gray */
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    border: 1px solid #808080;
    box-sizing: border-box;
}

.ym-menubar {
    height: 20px;
    background: #ECE9D8;
    display: flex;
    align-items: center;
    padding: 0 5px;
    border-bottom: 1px solid #ACA899;
}

.ym-menubar span {
    padding: 2px 6px;
    cursor: default;
}
.ym-menubar span:hover {
    background-color: #316AC5;
    color: white;
}

.ym-toolbar {
    height: 36px;
    background: linear-gradient(to bottom, #F7F6F3, #D8D4C8);
    border-bottom: 1px solid #808080;
    display: flex;
    align-items: center;
    padding: 0 5px;
    gap: 2px;
}

.ym-btn-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border: 1px solid transparent;
    cursor: pointer;
    color: #000;
    font-size: 10px;
}

.ym-btn-tool:hover {
    border-color: #ACA899;
    background-color: #FDFCF9;
    border-radius: 2px;
}

.ym-btn-tool .icon {
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 1px;
    color: #555;
}

.ym-body-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 2px;
    gap: 2px;
    background-color: #ECE9D8;
}

.ym-conversation-area {
    flex-grow: 1;
    background-color: #FFFFFF;
    border: 1px solid #7F9DB9; /* Windows XP Input Border */
    padding: 10px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}

.ym-msg-group {
    margin-bottom: 4px;
}

.ym-sender {
    font-weight: bold;
    margin-bottom: 0px;
    font-size: 12px;
}

.ym-sender.me { color: #000000; } 
.ym-sender.them { color: #000000; }

.ym-timestamp {
    font-weight: normal;
    font-size: 10px;
    color: #888;
    margin-left: 5px;
}

.ym-text {
    margin-left: 15px;
    color: #000;
}

.ym-input-area {
    height: 100px;
    display: flex;
    flex-direction: column;
    background-color: #ECE9D8;
    border: 1px solid #7F9DB9;
    padding: 1px;
}

.ym-formatting-bar {
    height: 24px;
    background: #ECE9D8;
    display: flex;
    align-items: center;
    padding: 0 2px;
    border-bottom: 1px solid #ACA899;
    gap: 2px;
}

.fmt-btn {
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 1px 4px;
    font-size: 11px;
    font-family: 'Tahoma', sans-serif;
    min-width: 20px;
}

.fmt-btn:hover {
    border-color: #0A246A;
    background-color: #B6BDD2;
}

.fmt-sep {
    width: 1px;
    height: 16px;
    background-color: #ACA899;
    margin: 0 2px;
}

.ym-textarea-wrapper {
    flex-grow: 1;
    display: flex;
    background-color: #FFF;
}

#ym-input {
    flex-grow: 1;
    resize: none;
    border: none;
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    padding: 5px;
    outline: none;
}

.ym-actions {
    display: flex;
    flex-direction: column;
    width: 70px;
    padding: 4px;
    background-color: #ECE9D8;
    border-left: 1px solid #ACA899;
    gap: 4px;
    justify-content: flex-start;
}

.ym-btn-action {
    height: 24px;
    background: linear-gradient(to bottom, #FFF, #ECE9D8);
    border: 1px solid #003C74;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    font-size: 11px;
    color: #000;
}

.ym-btn-action:hover {
    background: linear-gradient(to bottom, #FFF, #F5F2E6);
    box-shadow: 0 0 2px #FFCC00;
}

.ym-btn-action.send {
    font-weight: bold;
    border: 1px solid #333;
    background: #EAEAEA;
}

.ym-btn-action.buzz {
    font-style: italic;
    font-family: 'Georgia', serif;
}

/* BUZZ ANIMATION */
@keyframes buzz-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-5px, -5px) rotate(-1deg); }
    20% { transform: translate(5px, 5px) rotate(1deg); }
    30% { transform: translate(-5px, 5px) rotate(-1deg); }
    40% { transform: translate(5px, -5px) rotate(1deg); }
    50% { transform: translate(-5px, -5px) rotate(-1deg); }
    60% { transform: translate(5px, 5px) rotate(1deg); }
    70% { transform: translate(-5px, 5px) rotate(-1deg); }
    80% { transform: translate(5px, -5px) rotate(1deg); }
    90% { transform: translate(-2px, 2px) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.buzz-active {
    animation: buzz-shake 0.4s ease-in-out;
}

/* --- XP SETUP SCREEN (TEASER MODE) --- */
#xp-setup-overlay {
    position: absolute; /* Modificat din fixed pentru a sta în monitor */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0000A8; /* XP Setup Blue */
    color: white;
    font-family: 'Courier New', monospace;
    z-index: 1000; /* Peste desktop, dar sub efectele CRT */
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
}

.setup-header {
    background-color: #C0C0C0;
    color: black;
    padding: 5px 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.setup-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-size: 14px;
}

.setup-loader-container {
    width: 80%;
    height: 20px;
    border: 2px solid white;
    margin: 10px 0;
    position: relative;
    padding: 2px;
}

.setup-loader-bar {
    width: 0%;
    height: 100%;
    background-color: #FFFF00;
    transition: width 3s ease-in-out;
}

.setup-footer {
    background-color: #C0C0C0;
    color: black;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 12px;
}

.setup-status-bar {
    display: flex;
    justify-content: space-between;
}

/* --- ABOUT OVERLAY (TIMBRU HOLOGRAFIC MARE) --- */
#about-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fundal semi-transparent */
    z-index: 300; /* Peste oracol (200) */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

#about-card-container {
    position: relative;
    width: 575px; /* Dimensiune fixă sau procentuală */
    max-width: 90%;
    aspect-ratio: 1 / 1; /* Pătrat, ca un timbru mare sau copertă */
    perspective: 1000px;
    cursor: pointer;
}

.about-card-face {
    width: 100%;
    height: 100%;
    background-image: url('assets/fundaaboutholograma.webp');
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg));
    transition: transform 0.1s ease-out;
    
    /* Variabile pentru efectul holo */
    --bg-x: 50%;
    --bg-y: 50%;

    /* MASKING: Forțează decuparea după forma imaginii (colțuri rotunjite/transparență) */
    -webkit-mask-image: url('assets/fundaaboutholograma.webp');
    mask-image: url('assets/fundaaboutholograma.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Efectele Holografice (Reutilizate și adaptate) */
.about-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255,0,0,0.4) 30%, rgba(255,255,0,0.4) 40%, rgba(0,255,0,0.4) 50%, rgba(0,255,255,0.4) 60%, rgba(0,0,255,0.4) 70%, rgba(255,0,255,0.4) 80%, transparent 90%);
    background-size: 200% 200%;
    background-position: var(--bg-x) var(--bg-y);
    mix-blend-mode: color-dodge;
    opacity: 0.6;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
}

.about-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(farthest-corner circle at var(--bg-x) var(--bg-y), rgba(255,255,255,0.6) 0%, transparent 60%);
    mix-blend-mode: overlay;
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
    border-radius: inherit;
}

/* Conținutul Text */
.about-content-scroll {
    position: absolute;
    top: 8%;
    left: 10%;
    width: 80%;
    height: 76%;
    overflow: hidden;
    color: #000; /* Sau alb, în funcție de imagine */
    font-family: 'FredokaOne', 'Verdana', sans-serif;
    font-size: 14px;
    z-index: 10;
    padding-right: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Stiluri specifice pentru textul din About */
.about-paragraph {
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.3;
}

.about-title {
    font-family: 'FredokaOne', cursive;
    color: #25BFDE; /* Culoarea cerută */
    font-size: 32px; /* Redus pentru a încapea */
    vertical-align: baseline;
}

.about-body {
    font-family: 'Fredoka', sans-serif;
    color: #25BFDE;
    font-size: 17.5px; /* Redus pentru a încapea */
}

.about-list {
    padding-left: 10px;
    margin: 0 0 10px 0;
}

.about-list li {
    margin-bottom: 3px;
}

/* --- ABOUT FOOTER LOGOS --- */
.about-footer-logos {
    position: absolute;
    bottom: 3%;
    left: 10%;
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}

.about-footer-logos img {
    width: auto;
    object-fit: contain;
}

.about-footer-logos .inverted {
    filter: brightness(0) invert(1);
}

/* --- AJUSTĂRI INDIVIDUALE LOGO-URI --- */
.logo-camin {
    height: 65px; /* Ajustează mărimea aici */
    margin-bottom: 0px; /* Ajustează poziția verticală */
}

.logo-dialogo {
    height: 100px; /* Ajustează mărimea aici */
    margin-top: 0px;
}

.logo-ftf {
    height: 40px; /* Ajustează mărimea aici */
    position: relative;
    top: 0px; /* Ajustează poziția fin (sus/jos) */
    /* transform: scale(1.1); - Alternativă pentru scalare */
}

/* --- GREEN SCREEN MODE (ABOUT) --- */
body.green-screen-about-mode {
    background-color: #00FF00 !important;
    overflow: hidden;
}

body.green-screen-about-mode #scena-birou,
body.green-screen-about-mode #xp-scene-wrapper,
body.green-screen-about-mode #revista-overlay,
body.green-screen-about-mode #cd-autorun-overlay,
body.green-screen-about-mode #oracol-overlay {
    display: none !important;
}

body.green-screen-about-mode #about-overlay {
    background-color: transparent !important;
    backdrop-filter: none !important;
}

/* --- MOBILE OPTIMIZATIONS (FINAL TWEAKS) --- */

/* 1. General Mobile Adjustments */
@media (max-width: 900px) {
    /* XP Setup Screen Text Size */
    .setup-header { font-size: 10px !important; padding: 2px 5px !important; }
    .setup-body { font-size: 11px !important; padding: 10px !important; }
    .setup-footer { font-size: 9px !important; padding: 2px 5px !important; }
    .setup-loader-container { height: 12px !important; margin: 5px 0 !important; }

    /* CD Interface Responsive */
    #cd-interface {
        width: 95% !important;
        height: 90% !important;
        max-width: none !important;
        max-height: none !important;
    }
    .cd-content-wrapper {
        flex-direction: column !important;
        padding: 5px !important;
        gap: 5px !important;
    }
    .cd-list-panel {
        width: 100% !important;
        height: 120px !important;
        flex-shrink: 0 !important;
    }
    .cd-player-panel {
        width: 100% !important;
        height: auto !important;
        order: -1 !important; /* Player sus */
    }
    .cd-details-panel { display: none !important; }
    .cd-nav-bar { height: auto !important; flex-wrap: wrap !important; }
    .cd-nav-btn { flex-grow: 1 !important; text-align: center !important; font-size: 10px !important; padding: 6px 5px !important; }

    /* Cult Cards Grid (2 columns) */
    .cult-card { width: 46% !important; }
    
    /* Start Menu Mobile Simplification */
    #start-menu { width: 280px !important; height: 400px !important; }
    .start-col-right { display: none !important; }
    .start-col-left { width: 100% !important; }

    /* Ajustări cartonaș activ pe mobil pentru a nu depăși ecranul */
    .cult-card.active .cult-card-inner {
        width: 90vw !important;
        height: 85vh !important;
        max-height: 650px !important;
    }

    /* --- ORACOL MOBILE FIXES (Font & Layout) --- */
    /* 1. Layout Caiet (Mai mult spațiu pentru text) */
    .pagina-content::after {
        left: 35px !important; /* Mutăm linia roșie mai la stânga (era 100px) */
    }
    .raspuns-item, #raspuns-input-container {
        padding-left: 45px !important; /* Reducem indentarea textului (era 105px) */
    }

    /* 2. Fonturi Scalate (Mai mici pe mobil) */
    .text-raspuns {
        font-size: calc(var(--font-scale-factor, 1) * 1.1rem) !important; /* Reducem fontul */
    }
    #raspuns-input {
        font-size: calc(var(--font-scale-factor, 1) * 1.1rem) !important;
        line-height: 28px !important;
        height: 28px !important; /* Forțăm înălțimea unui rând */
        padding: 0 !important;
        margin: 0 !important;
        top: 4px !important; /* Aliniere fină pe linie */
        transform: none !important;
    }
    
    #raspuns-input-container {
        margin-top: 0 !important; /* Eliminăm spațiul extra de sus */
    }
    #coloana-raspunsuri-altii {
        margin-top: 0 !important; /* Eliminăm spațiul de un rând dintre întrebare și răspunsuri */
        margin-bottom: 0 !important; /* Eliminăm spațiul de jos al listei */
        padding-bottom: 0 !important;
    }
    .numar-raspuns, #raspuns-numar {
        font-size: 1.1rem !important;
    }

    /* Ajustare padding container text pentru a maximiza spațiul */
    .text-container {
        padding-right: 10px !important;
    }

    /* 3. Imagine Întrebare (Să nu iasă din ecran) */
    #intrebare-imagine {
        max-width: 100% !important;
        height: 100% !important; /* Forțăm înălțimea containerului fix */
        object-fit: contain;
        transform: none !important; /* CRUCIAL: Dezactivăm scalarea/translatarea din JS care scoate imaginea din ecran */
    }

    /* Containerul întrebării să se adapteze la înălțimea imaginii */
    #intrebare-container {
        /* 28px = 1 rând. Reducem la minim pentru a urca inputul cu un rând */
        height: 28px !important; 
        margin-bottom: 0 !important;
        padding-left: 45px !important; /* Aliniem cu textul răspunsurilor (45px) */
        justify-content: flex-start !important; /* Aliniem la stânga, nu la centru */
        box-sizing: border-box !important;
    }
}

/* 2. Portrait Specific Fixes (Monitor & Revista) */
@media (max-width: 900px) and (orientation: portrait) {
    /* FIX: Navigare Mobile Portrait (Acces la tot biroul) */
    body {
        overflow: auto !important; /* Activăm scroll-ul */
    }

    #scena-birou {
        /* Eliminăm centrarea pentru a permite scroll la stânga */
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        height: 100% !important; /* Umplem înălțimea, lățimea curge */
        width: auto !important;
    }

    #monitor-assembly {
        width: 100% !important;
        height: auto !important;
    }
    #monitor-frame-layer {
        width: 100% !important;
        height: auto !important;
    }
    #revista-focus-container {
        width: 90% !important;
        height: auto !important;
    }
}

/* --- ORACOL EXPANDABLE FIX (MOBILE PORTRAIT & LANDSCAPE) --- */
/* Permite caietului să se extindă pe verticală dacă textul este lung */
@media (max-width: 900px) {
    #oracol-overlay {
        align-items: flex-start !important; /* Aliniem caietul sus */
        overflow-y: auto !important; /* Scroll pe tot ecranul */
        -webkit-overflow-scrolling: touch;
    }

    #oracol-focus-container {
        height: auto !important;
        aspect-ratio: unset !important;
        min-height: 125vw !important; /* Păstrăm aspect ratio-ul inițial (lung) chiar dacă e gol */
        width: 90% !important;
        margin-top: 40px !important;
        margin-bottom: 100px !important; /* Spațiu jos pentru scroll */
        display: block !important;
        padding: 2.5vw 0 !important; /* Padding vertical pentru a centra pagina în copertă */
    }

    /* Facem elementele interne relative pentru a împinge containerul */
    #oracol-pagina {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 96% !important; /* Lăsăm margine laterală pentru copertă */
        margin: 0 auto !important; /* Centrare orizontală */
        height: auto !important;
        min-height: 120vw !important; /* Sincronizăm cu containerul (125vw - padding) */
        display: flex !important; /* FIX: Flex container pentru a forța copiii să umple înălțimea */
        flex-direction: column !important;
    }

    #oracol-coperta {
        height: 100% !important; /* Coperta se întinde cât pagina */
    }

    .pagina-content {
        height: auto !important; /* Permitem extinderea */
        min-height: 100% !important;
        flex-grow: 1 !important; /* FIX: Umple tot spațiul disponibil în pagină (inclusiv zona goală) */
        overflow: visible !important; /* FIX: Liniile se văd până jos chiar dacă textul depășește */
    }
    .pagina-content::before, .pagina-content::after {
        height: 100% !important;
        min-height: 100% !important;
        bottom: 0 !important;
    }

    .text-container { height: auto !important; padding-bottom: 20px !important; }
}

/* --- IPAD & TABLET FIXES (LANDING PAGE) --- */
/* Rezolvă problema de crop pe ecrane 4:3 (iPad) forțând încadrarea pe lățime */
@media only screen and (min-width: 600px) and (max-width: 1366px) {
    body {
        zoom: 1; /* Reset zoom pentru consistență */
        overflow: auto; /* Permite scroll dacă e necesar */
        height: auto;
        min-height: 100%;
        -webkit-overflow-scrolling: touch;
    }

    #scena-birou {
        width: 100% !important;
        height: auto !important;
        
        /* Menținem centrarea verticală */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* FIX: About Overlay Scroll pe Tabletă */
    .about-content-scroll {
        overflow-y: auto !important;
        padding-right: 10px !important; /* Spațiu pentru scrollbar */
    }

    /* FIX: XP Scene Exit Margins (pentru a putea da click pe fundal) */
    #monitor-assembly {
        width: 100% !important;
        height: 100% !important;
        max-width: 85% !important; /* Asigură margine laterală */
        max-height: 85% !important; /* Asigură margine verticală */
    }

    /* FIX: Oracol Tablet Layout (Fonturi intermediare) */
    .pagina-content::after {
        left: 60px !important;
    }
    .raspuns-item, #raspuns-input-container {
        padding-left: 70px !important;
    }
    .text-raspuns, #raspuns-input {
        font-size: calc(var(--font-scale-factor, 1) * 1.25rem) !important;
    }
    #intrebare-imagine {
        max-width: 100% !important;
        height: 100% !important; /* Forțăm înălțimea containerului fix */
        object-fit: contain;
        transform: none !important; /* Dezactivăm scalarea/translatarea din JS */
    }

    /* Containerul întrebării pe tabletă */
    #intrebare-container {
        height: 106px !important; /* Spațiu vertical identic cu mobilul */
        margin-bottom: 0 !important;
        padding-left: 70px !important; /* Evităm linia roșie de la 60px */
        box-sizing: border-box !important;
    }
}

/* --- WALKMAN CONTROLS SIMPLIFICATION (MOBILE & TABLET) --- */
/* Ascunde grafica butoanelor apăsate și folosește iluminare pe zonele de trigger */
@media (max-width: 1366px) {
    .layer-btn-pressed {
        display: none !important;
    }

    /* Iluminare Hitzone când butonul este activ (Play, Pause, etc.) */
    #casetofon-container:has(#visual-btn-play.active) #hit-btn-play,
    #casetofon-container:has(#visual-btn-pause.active) #hit-btn-pause,
    #casetofon-container:has(#visual-btn-rew.active) #hit-btn-rew,
    #casetofon-container:has(#visual-btn-fwd.active) #hit-btn-fwd,
    #casetofon-container:has(#visual-btn-rec.active) #hit-btn-rec,
    #casetofon-container:has(#visual-btn-eject.active) #hit-btn-eject {
        background-color: rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        border-radius: 3px;
    }

    /* Feedback instant la apăsare */
    .control-btn:active {
        background-color: rgba(255, 255, 255, 0.5) !important;
    }
}