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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Estil base pel cos del document */
body {
    background: rgb(32, 32, 32);
    font-family: 'Roboto', sans-serif;
}

/* Contenidor principal amb efecte de desenfocament */
.wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    height: auto;
    height: 98vh;
    background-image: linear-gradient(90deg, #FAFAFC, #D5D8E7 90%);
    filter: blur(2px);
}

/* Estructura principal de la Nintendo DS Lite */
.ds-lite {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) scale(1.15); /* Augmentat de 1.0 a 1.15 */
    perspective: 1000px;
    max-width: 750px;
    margin: 20px 0;
}

/* Part superior de la consola */
.top {
    position: relative;
    top: -3px;
    width: 729px;
    height: 354px;
    border: 3px solid rgba(169, 172, 177, 0.50);
    border-radius: 20px 20px 22px 22px / 20px 20px 10px 10px;
    background-image: linear-gradient(-90deg, #DBDEDF, #D0D3D6);
    box-shadow: inset 0 -3px 1px rgba(191, 194, 197, 0.66), 
    inset 0 4px 2px #E7EAED, 
    inset 4px 0 2px #E4E7EA, 
    inset -4px 0 2px #E7EAEB, 
    inset -17px 0 32px #FFFFFF, 
    inset 20px 0 35px #B2B5B8, 
    inset 0 20px 45px #ADB0B5;
    transform: rotateX(0deg); /* Pantalla completament oberta */
}

/* Marca Nintendo DS a la part superior */
.ds-brand {
    position: absolute;
    top: 8px;
    right: 25px;
    color: #8c8c8c;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Contenidor de la pantalla superior */
.display-wrap {
    position: absolute;
    top: 37px;
    left: 174px;
    padding: 18px;
    width: 348px;
    height: 256px;
    border-radius: 5px;
    box-shadow: inset 2px 0 2px #AAADB0,   
    inset 0 -1px 1px #C7C9CC,   
    inset -1px 0 2px #B6B8BB, 
    inset 0 1px 1px rgba(0, 0, 0, 0.42),  
    inset 0 2px 5px rgba(135, 138, 141, 0.34),
    0 1px 1px rgba(255, 255, 255, 0.71),
    1px 0px 1px rgba(255, 255, 255, 0.71);
    overflow: hidden;
}

/* Pantalla superior */
.display {
    width: 100%;
    height: 100%;
    border: 1px solid #202020;
    border-radius: 4px;
    background: white;
    padding: 10px;
    overflow: auto;
}

/* Altaveus de la consola */
.speaker-1, .speaker-2 {
    position: absolute;
    top: 160px;
    width: 100px;
    height: 50px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Posició de l'altaveu esquerre */
.speaker-1 {
    left: 43px;
}

/* Posició de l'altaveu dret */
.speaker-2 {
    left: 603px;
}

/* Orificis dels altaveus */
.speaker-1 li, .speaker-2 li {
    float: left;
    margin: 10px;
    width: 6px;
    height: 6px;
    border-radius: 5px;
    background: black;
    box-shadow: 1px 1px 1px white;
}

/* Cantonades reforçades de la consola */
.square-1, .square-2, .square-3, .square-4 {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background-image: linear-gradient(90deg, #C7CACE, #D9DBDE);
    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0), 
    inset 0 2px 2px rgba(162, 162, 162, 0.74),
    inset 1px 0 1px rgba(0, 0, 0, 0.12),   
    inset 2px 0 1px rgba(174, 177, 180, 0.01);
}

/* Cantonada superior esquerra */
.square-1 {
    top: 28px;
    left: 79px;
}

/* Cantonada superior dreta */
.square-2 {
    top: 28px;
    left: 614px;
    opacity: 0.8;
}

/* Cantonada inferior esquerra */
.square-3 {
    top: 322px;
    left: 84px;
}

/* Cantonada inferior dreta */
.square-4 {
    top: 322px;
    left: 616px;
}

/* Botons laterals L/R */
.pipka-1, .pipka-2 {
    position: absolute;
    top: 28px;
    display: block;
    height: 49px;
}

/* Botó lateral esquerre (L) */
.pipka-1 {
    width: 10px;
    left: 0;
    border-radius: 2px 5px 2px 5px;
    background-image: linear-gradient(-90deg, rgba(160, 165, 169, 0.91), #E4E7EA);  
    box-shadow: 1px 0 1px rgba(255, 255, 255, 0.18),
    inset -1px 0 2px rgba(144, 144, 145, 0.94),   
    0 1px 0 #979CA0, 0 -1px 0 #979CA0,   
    inset 0 2px 1px rgba(255, 255, 255, 0.53),   
    inset 1px 0 1px #EDF0F3,   
    inset 0 -2px 2px #A7ACB0;
}

/* Botó lateral dret (R) */
.pipka-2 {
    left: 721px;
    width: 8px;
    border-radius: 5px 2px 2px 3px;
    background-image: linear-gradient(-90deg, #D0D2D3, #FFFFFF);
    box-shadow: inset 0 -2px 0px #BFC2C3,
    0 -1px 0px #B5B9BA,
    -1px 0 0 #B5B9BA,
    inset 2px 0 2px white,
    inset 0 1px 1px white;
}

/* Línies de tancament de la consola */
.l-1, .l-2 {
    position: absolute;
    bottom: 0px;
    height: 5px;
    border: none;
    background: #DADCDD;
}

/* Línia diagonal dreta */
.l-1 {
    left: 539px;
    width: 100px;
    box-shadow: 2px 0 0px rgb(226, 226, 226);
    transform: skew(-45deg);
}

/* Línia diagonal esquerra */
.l-2 {
    left: 85px;
    width: 500px;
    box-shadow: -2px 0 0px rgb(226, 226, 226);
    transform: skew(39deg);
}

/* Indicadors LED */
.diod-1, .diod-2 {
    position: absolute;
    top: 0px;
    width: 5px;
    height: 20px;
    border-radius: 0 0 3px 3px;
}

/* LED d'energia */
.diod-1 {
    left: 36px;
    background: #c9780f;
}

/* LED de càrrega amb animació */
.diod-2 {
    left: 50px;
    background: #95CA3C;
    animation: light linear 1s infinite;
}

/* Animació pel LED de càrrega */
@keyframes light {
    0%, 100% { background: #5B6064; }
    50% { background: #b5ca3c; }
}

/* Bisagra central - ajustada per millor encaix */
.middle {
    position: absolute;
    bottom: -52px;
    left: 76px; 
    z-index: 3;
    display: block;
    width: 580px; 
    height: 52px; 
    border-radius: 30px 30px 30px 30px / 140px 140px 140px 140px;
    background-image: linear-gradient(#FFFFFF 30%, rgba(183, 186, 191, 0.93) 93%, rgba(31, 32, 34, 0.36) 104%);
    box-shadow: 0 -1px 1px white,    
    1px 0 0px #A3A6A7,    
    -1px 0 0px #A3A6A7,    
    inset 1px 0 0px rgba(255, 255, 255, 0.61),    
    inset -1px 0 0px rgba(255, 255, 255, 0.61),    
    inset 0 -1px 0 rgba(0, 0, 0, 0),    
    inset 0 -15px 14px -15px rgba(0, 0, 0, 0.95), 
    0 7px 11px -10px black;
}

/* Ombra de la frontissa */
.middle::after {
    position: absolute;
    bottom: -2px;
    left: 4px;
    width: 562px; 
    height: 2px;
    background-image: linear-gradient(rgb(114, 114, 114), rgb(173, 173, 173));
    content: "";
}

/* Micròfon de la consola */
.mic {
    position: absolute;
    top: 15px;
    left: 286px;
    display: block;
    width: 5px;
    height: 18px;
    border-radius: 5px;
    background: #16181B;
    box-shadow: 1px 1px 1px white;
}

/* Text indicador del micròfon */
.mic-2 {
    position: absolute;
    top: 16px;
    left: 303px;
    display: block;
    color: rgba(188, 191, 192, 0.56);
    text-transform: uppercase;
    text-shadow: 1px 1px 1px white;
    font-size: 15px;
    font-family: 'arial';
    cursor: default;
}

/* Línia diagonal decorativa */
.shape-1 {
    position: absolute;
    bottom: -65px;
    left: 159px; 
    z-index: 5;
    width: 413px; 
    height: 8px;
    border: none;
    background: rgb(245, 245, 245);
    box-shadow: -11px -5px 8px -2px rgb(138, 138, 138);
    transform: skew(-66deg);
}

/* Extrems de la frontissa */
.left, .right {
    position: absolute;
    bottom: -59px;
    height: 56px;
}

/* Extrem esquerre de la frontissa */
.left {
    left: -12px;
    width: 95px;
    border-radius: 29px 0px 0 25px / 25px 0 0 11px;
    background-image: linear-gradient(#FFFFFF 30%, rgba(183, 186, 191, 0.93) 93%);
    box-shadow: -2px 0 0 rgba(190, 191, 192, 0.37), 
    inset 10px 0 17px rgba(250, 251, 253, 0.72), 
    inset 0 -2px 0px rgb(131, 131, 131),
    inset 0 -3px 2px rgba(153, 153, 153, 0.54), 
    inset 24px 0 7px -18px #C9CCD1;
}

/* Extrem dret de la frontissa */
.right {
    right: -14px;
    width: 95px;
    border-bottom: 1px solid rgb(70, 70, 70);
    border-radius: 0 29px 20px 0 / 0 28px 11px 0;
    background-image: linear-gradient(#FFFFFF 30%, rgba(183, 186, 191, 0.93) 93%);
    box-shadow: inset -1px 0 1px #A1A4A7, 
    inset -82px 0 28px -68px rgba(164, 167, 172, 0.6);
}

/* Contingut de l'extrem dret */
.right ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Part inferior de la consola */
.bottom {
    position: absolute;
    bottom: -246px;
    left: -25px;
    z-index: 2;
    width: 787px;
    height: 199px;
    border-radius: 0 0 28px 28px / 0 0 13px 13px;
    background-image: linear-gradient(#FBFBFB, #FFFFFF);
    box-shadow: 3px 0 1px #A3A6AB,   
    inset -2px 0 0px #BFC2C5,   
    -3px 0 1px #B0B2B5,   
    inset 2px 0 1px #D4D6D9,   
    inset 3px 0 1px #D8DBDC,   
    inset 0 -4px 1px rgba(195, 198, 199, 0.82),   
    0 1px 0px rgba(142, 148, 153, 0.83),   
    0 3px 2px #D6D9DE,
    inset 0 5px 6px -6px rgba(0, 0, 0, 0.72);
    transform: rotateX(38deg);
}

/* Contenidor de la pantalla inferior */
.b-display-wrap {
    position: absolute;
    top: 5px;
    left: 187px;
    overflow: hidden;
    padding: 12px 20px 9px 18px;
    width: 390px;
    height: 144px;
    border-radius: 4px;
    box-shadow: inset 2px 0 0px rgba(170, 173, 176, 0.36), 
    inset 0 -4px 5px rgba(0, 0, 0, 0.11),
    0 2px 2px white, 
    inset 0 1px 0px rgba(129, 138, 141, 0.55), 
    inset -3px 0px 8px rgba(0, 0, 0, 0.09),  
    15px 0 20px rgba(220, 223, 224, 0.58),   
    18px 15px 15px rgba(227, 230, 231, 0.73),
    -8px 13px 14px rgba(238, 238, 238, 0.72);
}

/* Pantalla inferior amb correcció d'scrolling horitzontal */
.b-display {
    width: 100%;
    height: 98%;
    border: 1px solid #202020;
    border-top: 2px solid black;
    border-radius: 4px;
    background: white;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

/* Botons d'acció ABXY */
.buttons {
    position: absolute;
    top: 20px;
    right: 15px;
    width: 145px;
    height: 80px;
    list-style-type: none;
    padding: 0;
    margin: 0;
} 

/* Format comú pels botons d'acció */
.buttons li {
    position: absolute;
    float: left;
    margin: 5px;
    width: 43px;
    height: 27px;
    border-radius: 120px 120px 120px 120px / 72px 72px 72px 72px;
    background: #fff;
    box-shadow: 0px 3px 2px rgba(255, 255, 255, 1), 
    2px 1px 0px rgba(41, 42, 43, 0.42), 
    inset -5px 1px 6px -4px rgba(151, 154, 157, 0.25), 
    inset -4px -7px 10px -5px rgba(190, 190, 190, 0.85), 
    -1px 3px 0 rgba(0, 0, 0, 0.33), 
    1px 3px 0px rgba(0, 0, 0, 0.2), 
    6px 5px 6px rgba(196, 199, 204, 0.6);
}

/* Posició del botó X */
.x {
    top: 0px;
    left: 45px;
}

/* Posició del botó Y */
.y {
    top: 20px;
    left: 0px;
}

/* Posició del botó B */
.b {
    bottom: 0px;
    left: 45px;
}

/* Posició del botó A */
.a {
    top: 20px;
    right: 0px;
}

/* Lletres dels botons */
.buttons li span {
    position: relative;
    top: 0px;
    left: 16px;
    display: block;
    color: #CACAC9;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    font-family: 'arial';
    transform: rotateX(43deg);
}

/* Botons START/SELECT */
.buttons-2 {
    position: absolute;
    right: 124px;
    bottom: 20px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.buttons-2 li {
    margin: 12px;
    width: 18px;
    height: 10px;
    border-radius: 120px 120px 120px 120px / 72px 72px 72px 72px;
    background: #fff;
    box-shadow: 0px 3px 2px rgba(255, 255, 255, 1),    
    2px 1px 0px rgba(41, 42, 43, 0.42),    
    inset -5px 1px 6px -4px rgba(151, 154, 157, 0.25),   
    inset -4px -7px 10px -5px rgba(190, 190, 190, 0.24),    
    -1px 3px 0 rgba(0, 0, 0, 0.33),    
    1px 3px 0px rgba(0, 0, 0, 0.2),    
    3px 4px 6px rgba(196, 199, 204, 0.6);
}

.buttons-2 span {
    position: relative;
    top: -5px;
    left: 25px;
    display: inline-block;    
    color: #CACAC9;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 8px;
    font-family: 'arial';
}

/* Millora de l'aspecte del botó START per indicar que és interactiu */
.buttons-2 li span.start {
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

/* Creueta direccional (D-pad) */
.buttons-3 {
    position: absolute;
    top: 32px;
    left: 30px;
    width: 118px;
    height: 64px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.frwd, .bkwrd, .left-2, .right-2, .center {
    position: absolute;
    background: white;
}

/* Botó superior */
.frwd {
    left: 50px;
    width: 31px;
    height: 19px;
    border-radius: 2px 2px 0 0;
    box-shadow: -6px 0 1px -3px #EAEAEA, 4px 0 0 -2px #EAEAEA, 10px 2px 5px -4px #B8B8B8;
}

/* Botó dret */
.left-2 {
    top: 17px;
    right: 1px;
    width: 34px;
    height: 26px;
    border-radius: 0 2px 2px 0;
    box-shadow: inset -2px 3px 1px -2px rgb(243, 243, 243), inset 0px -11px 4px -2px rgba(223, 223, 223, 1), 2px 0px 0px white, 7px 4px 1px -3px #919191, 0 2px 1px -1px #525252;
}

/* Botó inferior */
.bkwrd {
    top: 41px;
    left: 48px;
    z-index: 2;
    width: 36px;
    height: 25px;
    border-radius: 0 0 2px 2px;
    box-shadow: inset 0 -2px 1px #818080, inset 0px -12px 15px -7px #A2A6AA, inset 2px 0 1px white, inset 0px -15px 2px 0px #EBE8E7, 3px 0px 1px -1px #AFAFAF, -3px 1px 1px -1px rgba(218, 218, 218, 0.67);
}

/* Botó esquerre */
.right-2 {
    top: 18px;
    left: 15px;
    width: 34px;
    height: 25px;
    border-radius: 2px 0 0 2px;
    box-shadow: inset 1px 0 1px white, -6px 6px 1px -4px rgba(204, 204, 204, 1), 0px 3px 0px rgba(209, 209, 209, 1), inset 0px -11px 2px -1px #E6E6E6, inset 0 -1px 0 #A9ACAF, inset 0 -19px 13px -13px #BFC2C7;
}

/* Centre de la creueta */
.center {
    top: 16px;
    left: 50px;
    width: 33px;
    height: 29px;
}

/* Marques dels botons direccionals */
.frwd span, .bkwrd span, .left-2 span, .right-2 span {
    position: absolute;
    background: #DFDFDF;
    border-radius: 2px;
}

/* Marca del botó superior */
.frwd span {
    top: 5px;
    left: 15px;
    width: 4px;
    height: 10px;
}

/* Marca del botó inferior */
.bkwrd span {
    top: -5px;
    left: 15px;
    width: 4px;
    height: 10px;
}

/* Marca del botó esquerre */
.left-2 span {
    top: 6px;
    left: 5px;
    width: 20px;
    height: 3px;
}

/* Marca del botó dret */
.right-2 span {
    top: 6px;
    left: 8px;
    width: 20px;
    height: 3px;
}

/* Base */
.bottom-2 {
    position: absolute;
    bottom: -321px;
    left: -45px;
    z-index: 1;
    width: 825px;
    height: 88px;
    border-left: 2px solid #C1C1C3;
    border-radius: 0 0 25px 25px;
    background: #CCCED1;
    box-shadow: inset 9px 0px 0px #D8DBDE,
    inset 12px 0 15px #E9ECED;
    transform: rotateX(-18deg);
}

/* Control de volum */
.vol {
    position: absolute;
    top: 18px;
    left: 80px;
    width: 130px;
    height: 60px;
    text-transform: uppercase;
}

/* Indicador de volum */
.vol span {
    position: relative;
    left: 5px;
    display: inline-block;
    padding: 10px 0;
    color: #A7A69F;
    text-shadow: 1px -2px 1px rgba(172, 175, 172, 0.85);
    font-weight: bold;
    font-size: 12px;
    font-family: "arial";
    cursor: default;
}

/* Símbols de volum + i - */
.vol span::after {
    margin-left: 15px;
    content: "+";
}

.vol span::before {
    margin-right: 20px;
    content: "-";
}

/* Contenidor del control lliscant de volum */
.vol div {
    width: 76px;
    height: 18px;
    border-top: 1px solid #D1D1D1;
    border-right: 3px solid #B6B6B6;
    border-bottom: 3px solid #C7C2C2;
    border-radius: 5px;
    background-image: linear-gradient(#BDBEBE, #858585);
    box-shadow: inset 0 -1px 0 #8D8F91, inset 0 -3px 0 rgba(164, 169, 173, 0.97), 0 -1px 2px rgba(240, 240, 240, 1), inset 0 2px 0 rgba(177, 177, 177, 0.82), inset 0 3px 0 rgba(219, 219, 219, 0.93), 0 2px 1px rgba(255, 255, 255, 0.72), 0 4px 2px #BABDC0;
}

/* Botons del control de volum */
.vol ul {
    position: relative;
    top: 1px;
    left: 3px;
    padding: 5px 0 0 4px;
    width: 33px;
    height: 17px;
    border-top: 3px solid rgb(172, 172, 172);
    border-radius: 4px;
    background: #BABDC2;
    box-shadow: inset 0px 2px 1px 2px #D5D8DB, 0 -3px 8px -2px rgb(20, 20, 20);
    cursor: pointer;
    list-style-type: none;
}

/* Estil per als elements del control de volum */
.vol ul li {
    float: left;
    margin: 1px;
    border-radius: 2px;
    box-shadow: inset 2px 3px 2px #D5D8DB, 2px -1px 3px #96999C;
}

/* Primer element del control de volum */
.vol ul li:first-child {
    position: relative;
    top: 7px;
    width: 7px;
    height: 7px;
}

/* Control lliscant de volum */
.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 76px;
    height: 16px;
    border-radius: 5px;
    background: linear-gradient(to right, #BABDC2, #8D8F91);
    outline: none;
    box-shadow: inset 0 -1px 0 #8D8F91, 
                inset 0 -3px 0 rgba(164, 169, 173, 0.97), 
                0 -1px 2px rgba(240, 240, 240, 1), 
                inset 0 2px 0 rgba(177, 177, 177, 0.82), 
                inset 0 3px 0 rgba(219, 219, 219, 0.93), 
                0 2px 1px rgba(255, 255, 255, 0.72), 
                0 4px 2px #BABDC0;
    cursor: pointer;
}

/* Estil del botó lliscant per a Chrome */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 18px;
    background: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 2px solid #BABDC2;
}

/* Estil del botó lliscant per a Firefox */
.volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 2px solid #BABDC2;
}

/* Estat actiu del control de volum per a Chrome */
.vol.playing .volume-slider::-webkit-slider-thumb {
    background: linear-gradient(to bottom, #c7c7c7 0%, #4c504d 100%);
}

/* Estat actiu del control de volum per a Firefox */
.vol.playing .volume-slider::-moz-range-thumb {
    background: linear-gradient(to bottom, #9cff9c 0%, #44c767 100%);
}
/* Contingut de l'extrem dret */
.right ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Part inferior de la consola */
.bottom {
    position: absolute;
    bottom: -246px;
    left: -25px;
    z-index: 2;
    width: 787px;
    height: 199px;
    border-radius: 0 0 28px 28px / 0 0 13px 13px;
    background-image: linear-gradient(#FBFBFB, #FFFFFF);
    box-shadow: 3px 0 1px #A3A6AB,   
    inset -2px 0 0px #BFC2C5,   
    -3px 0 1px #B0B2B5,   
    inset 2px 0 1px #D4D6D9,   
    inset 3px 0 1px #D8DBDC,   
    inset 0 -4px 1px rgba(195, 198, 199, 0.82),   
    0 1px 0px rgba(142, 148, 153, 0.83),   
    0 3px 2px #D6D9DE,
    inset 0 5px 6px -6px rgba(0, 0, 0, 0.72);
    transform: rotateX(38deg);
}

/* Contenidor de la pantalla inferior */
.b-display-wrap {
    position: absolute;
    top: 5px;
    left: 187px;
    overflow: hidden;
    padding: 12px 20px 9px 18px;
    width: 390px;
    height: 144px;
    border-radius: 4px;
    box-shadow: inset 2px 0 0px rgba(170, 173, 176, 0.36), 
    inset 0 -4px 5px rgba(0, 0, 0, 0.11),
    0 2px 2px white, 
    inset 0 1px 0px rgba(129, 138, 141, 0.55), 
    inset -3px 0px 8px rgba(0, 0, 0, 0.09),  
    15px 0 20px rgba(220, 223, 224, 0.58),   
    18px 15px 15px rgba(227, 230, 231, 0.73),
    -8px 13px 14px rgba(238, 238, 238, 0.72);
}

/* Pantalla inferior amb correcció d'scrolling horitzontal */
.b-display {
    width: 100%;
    height: 98%;
    border: 1px solid #202020;
    border-top: 2px solid black;
    border-radius: 4px;
    background: white;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

/* Botons d'acció ABXY */
.buttons {
    position: absolute;
    top: 20px;
    right: 15px;
    width: 145px;
    height: 80px;
    list-style-type: none;
    padding: 0;
    margin: 0;
} 

/* Format comú pels botons d'acció */
.buttons li {
    position: absolute;
    float: left;
    margin: 5px;
    width: 43px;
    height: 27px;
    border-radius: 120px 120px 120px 120px / 72px 72px 72px 72px;
    background: #fff;
    box-shadow: 0px 3px 2px rgba(255, 255, 255, 1), 
    2px 1px 0px rgba(41, 42, 43, 0.42), 
    inset -5px 1px 6px -4px rgba(151, 154, 157, 0.25), 
    inset -4px -7px 10px -5px rgba(190, 190, 190, 0.85), 
    -1px 3px 0 rgba(0, 0, 0, 0.33), 
    1px 3px 0px rgba(0, 0, 0, 0.2), 
    6px 5px 6px rgba(196, 199, 204, 0.6);
}

/* Posició del botó X */
.x {
    top: 0px;
    left: 45px;
}

/* Posició del botó Y */
.y {
    top: 20px;
    left: 0px;
}

/* Posició del botó B */
.b {
    bottom: 0px;
    left: 45px;
}

/* Posició del botó A */
.a {
    top: 20px;
    right: 0px;
}

/* Lletres dels botons */
.buttons li span {
    position: relative;
    top: 0px;
    left: 16px;
    display: block;
    color: #CACAC9;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    font-family: 'arial';
    transform: rotateX(43deg);
}

/* Botons START/SELECT */
.buttons-2 {
    position: absolute;
    right: 124px;
    bottom: 20px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.buttons-2 li {
    margin: 12px;
    width: 18px;
    height: 10px;
    border-radius: 120px 120px 120px 120px / 72px 72px 72px 72px;
    background: #fff;
    box-shadow: 0px 3px 2px rgba(255, 255, 255, 1),    
    2px 1px 0px rgba(41, 42, 43, 0.42),    
    inset -5px 1px 6px -4px rgba(151, 154, 157, 0.25),   
    inset -4px -7px 10px -5px rgba(190, 190, 190, 0.24),    
    -1px 3px 0 rgba(0, 0, 0, 0.33),    
    1px 3px 0px rgba(0, 0, 0, 0.2),    
    3px 4px 6px rgba(196, 199, 204, 0.6);
}

.buttons-2 span {
    position: relative;
    top: -5px;
    left: 25px;
    display: inline-block;    
    color: #CACAC9;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 8px;
    font-family: 'arial';
}

/* Aspecte del botó START per indicar que és interactiu */
.buttons-2 li span.start {
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

/* D-pad */
.buttons-3 {
    position: absolute;
    top: 32px;
    left: 30px;
    width: 118px;
    height: 64px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.frwd, .bkwrd, .left-2, .right-2, .center {
    position: absolute;
    background: white;
}

.frwd {
    left: 50px;
    width: 31px;
    height: 19px;
    border-radius: 2px 2px 0 0;
    box-shadow: -6px 0 1px -3px #EAEAEA, 4px 0 0 -2px #EAEAEA, 10px 2px 5px -4px #B8B8B8;
}

.left-2 {
    top: 17px;
    right: 1px;
    width: 34px;
    height: 26px;
    border-radius: 0 2px 2px 0;
    box-shadow: inset -2px 3px 1px -2px rgb(243, 243, 243), inset 0px -11px 4px -2px rgba(223, 223, 223, 1), 2px 0px 0px white, 7px 4px 1px -3px #919191, 0 2px 1px -1px #525252;
}

.bkwrd {
    top: 41px;
    left: 48px;
    z-index: 2;
    width: 36px;
    height: 25px;
    border-radius: 0 0 2px 2px;
    box-shadow: inset 0 -2px 1px #818080, inset 0px -12px 15px -7px #A2A6AA, inset 2px 0 1px white, inset 0px -15px 2px 0px #EBE8E7, 3px 0px 1px -1px #AFAFAF, -3px 1px 1px -1px rgba(218, 218, 218, 0.67);
}

.right-2 {
    top: 18px;
    left: 15px;
    width: 34px;
    height: 25px;
    border-radius: 2px 0 0 2px;
    box-shadow: inset 1px 0 1px white, -6px 6px 1px -4px rgba(204, 204, 204, 1), 0px 3px 0px rgba(209, 209, 209, 1), inset 0px -11px 2px -1px #E6E6E6, inset 0 -1px 0 #A9ACAF, inset 0 -19px 13px -13px #BFC2C7;
}

.center {
    top: 16px;
    left: 50px;
    width: 33px;
    height: 29px;
}

.frwd span, .bkwrd span, .left-2 span, .right-2 span {
    position: absolute;
    background: #DFDFDF;
    border-radius: 2px;
}

.frwd span {
    top: 5px;
    left: 15px;
    width: 4px;
    height: 10px;
}

.bkwrd span {
    top: -5px;
    left: 15px;
    width: 4px;
    height: 10px;
}

.left-2 span {
    top: 6px;
    left: 5px;
    width: 20px;
    height: 3px;
}

.right-2 span {
    top: 6px;
    left: 8px;
    width: 20px;
    height: 3px;
}

/* Base */
.bottom-2 {
    position: absolute;
    bottom: -321px;
    left: -45px;
    z-index: 1;
    width: 825px;
    height: 88px;
    border-left: 2px solid #C1C1C3;
    border-radius: 0 0 25px 25px;
    background: #CCCED1;
    box-shadow: inset 9px 0px 0px #D8DBDE,
    inset 12px 0 15px #E9ECED;
    transform: rotateX(-18deg);
}

/* Control de volum */
.vol {
    position: absolute;
    top: 18px;
    left: 80px;
    width: 130px;
    height: 60px;
    text-transform: uppercase;
}

.vol span {
    position: relative;
    left: 5px;
    display: inline-block;
    padding: 10px 0;
    color: #A7A69F;
    text-shadow: 1px -2px 1px rgba(172, 175, 172, 0.85);
    font-weight: bold;
    font-size: 12px;
    font-family: "arial";
    cursor: default;
}

.vol span::after {
    margin-left: 15px;
    content: "+";
}

.vol span::before {
    margin-right: 20px;
    content: "-";
}

.vol div {
    width: 76px;
    height: 18px;
    border-top: 1px solid #D1D1D1;
    border-right: 3px solid #B6B6B6;
    border-bottom: 3px solid #C7C2C2;
    border-radius: 5px;
    background-image: linear-gradient(#BDBEBE, #858585);
    box-shadow: inset 0 -1px 0 #8D8F91, inset 0 -3px 0 rgba(164, 169, 173, 0.97), 0 -1px 2px rgba(240, 240, 240, 1), inset 0 2px 0 rgba(177, 177, 177, 0.82), inset 0 3px 0 rgba(219, 219, 219, 0.93), 0 2px 1px rgba(255, 255, 255, 0.72), 0 4px 2px #BABDC0;
}

.vol ul {
    position: relative;
    top: 1px;
    left: 3px;
    padding: 5px 0 0 4px;
    width: 33px;
    height: 17px;
    border-top: 3px solid rgb(172, 172, 172);
    border-radius: 4px;
    background: #BABDC2;
    box-shadow: inset 0px 2px 1px 2px #D5D8DB, 0 -3px 8px -2px rgb(20, 20, 20);
    cursor: pointer;
    list-style-type: none;
}

.vol ul li {
    float: left;
    margin: 1px;
    border-radius: 2px;
    box-shadow: inset 2px 3px 2px #D5D8DB, 2px -1px 3px #96999C;
}

.vol ul li:first-child {
    position: relative;
    top: 7px;
    width: 7px;
    height: 7px;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 76px;
    height: 16px;
    border-radius: 5px;
    background: linear-gradient(to right, #BABDC2, #8D8F91);
    outline: none;
    box-shadow: inset 0 -1px 0 #8D8F91, 
                inset 0 -3px 0 rgba(164, 169, 173, 0.97), 
                0 -1px 2px rgba(240, 240, 240, 1), 
                inset 0 2px 0 rgba(177, 177, 177, 0.82), 
                inset 0 3px 0 rgba(219, 219, 219, 0.93), 
                0 2px 1px rgba(255, 255, 255, 0.72), 
                0 4px 2px #BABDC0;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 18px;
  
    background: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 2px solid #BABDC2;
}

.volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
   
    background: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 2px solid #BABDC2;
}

.vol.playing .volume-slider::-webkit-slider-thumb {
    background: linear-gradient(to bottom, #c7c7c7 0%, #4c504d 100%);
}

.vol.playing .volume-slider::-moz-range-thumb {
    background: linear-gradient(to bottom, #9cff9c 0%, #44c767 100%);
}

.vol.playing::after {
    content: "♫";
    position: absolute;
    top: -15px;
    right: -5px;
    font-size: 14px;
    color: #44c767;
    animation: float 2s infinite ease-in-out;
}



/* Contingut de la  Pokedex */
h1 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
    text-align: center;
    color: #333;
}

h2, h3 {
    font-size: 12px !important;
    margin-bottom: 5px !important;
    color: #333;
}

#pokemonInfo, #pokemonDetails {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.pokemon-image {
    max-height: 100px; 
    max-width: 100px; 
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
    animation: sway 3s ease-in-out infinite;
    transform-origin: bottom center;
    transition: all 0.3s;
}

.pokemon-image:hover {
    animation: float 0.8s ease-in-out infinite;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
    transform: scale(1.05);
}

#pokemonName {
    text-transform: uppercase;
    font-size: 18px !important; 
    margin-bottom: 3px !important;
    color: #333;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

#pokemonNumber {
    color: #666 !important;
    font-size: 14px; 
    margin-bottom: 5px !important;
}

#pokemonTypes {
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
}

.pokemon-type {
    font-size: 10px; 
    padding: 3px 8px; 
    border-radius: 10px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}

/* Colors per tipus de Pokémon */
.type-normal { background-color: #A8A77A; }
.type-fire { background-color: #EE8130; }
.type-water { background-color: #6390F0; }
.type-electric { background-color: #F7D02C; }
.type-grass { background-color: #7AC74C; }
.type-ice { background-color: #96D9D6; }
.type-fighting { background-color: #C22E28; }
.type-poison { background-color: #A33EA1; }
.type-ground { background-color: #E2BF65; }
.type-flying { background-color: #A98FF3; }
.type-psychic { background-color: #F95587; }
.type-bug { background-color: #A6B91A; }
.type-rock { background-color: #B6A136; }
.type-ghost { background-color: #735797; }
.type-dragon { background-color: #6F35FC; }
.type-dark { background-color: #705746; }
.type-steel { background-color: #B7B7CE; }
.type-fairy { background-color: #D685AD; }

/* Estadístiques del Pokémon */
.stats-container {
    font-size: 10px;
    margin-top: 8px;
}

.stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}

.stat-name {
    width: 35%;
    text-align: right;
    padding-right: 5px;
    font-size: 10px; 
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
    white-space: nowrap;
}

.stat-bar {
    width: 65%;
    height: 6px; 
    background-color: #eee;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.stat-value {
    height: 100%;
    background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
    border-radius: 3px;
}

/* Navegació entre Pokémon */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.nav-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 10px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 3px 5px;
}

.nav-btn:hover {
    background-color: #f0f0f0;
    border-radius: 3px;
}

.nav-btn-prev:before {
    content: "◀";
    margin-right: 3px;
}

.nav-btn-next:after {
    content: "▶";
    margin-left: 3px;
}

/* Movimients del Pokémon */
.moves-container {
    margin-top: 10px;
    font-size: 9px;
}

.move-item {
    padding: 3px 5px;
    margin-bottom: 3px;
    background-color: #f5f5f5;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
}

.move-name {
    font-weight: bold;
    color: #333;
}

.move-type {
    padding: 1px 3px;
    border-radius: 2px;
    color: white;
    font-size: 7px;
    text-transform: uppercase;
}

/* Informació adicional */
.pokemon-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    margin-bottom: 5px;
}

.info-label {
    color: #666;
    font-weight: bold;
}

.info-value {
    color: #333;
}

/* Pantalla de carga */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
}

.loading:after {
    content: "Cargando...";
    color: #3f51b5;
    font-size: 12px;
    font-weight: bold;
    animation: blink 1.2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}



@media (max-width: 665px) {
    .project-container {
        display: flex;
        justify-content: center;
        background-color: rgb(32, 32, 32) !important;      
    }  
    .ds-lite {
        transform: translateX(-50%) scale(0.45); /* Més reduït per dispositius mòbils */
        background-color: rgb(32, 32, 32) !important;
    }
    .ds-section {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(32, 32, 32) !important;
    }
    .explanation-section {    

        transition: transform 0.5s;
        width: 100% !important;
        height: 100% !important;       
    }
}

/* Millores per a tauletes */
@media (min-width: 481px) and (max-width: 1024px) {
    .ds-lite {
        transform: translateX(-50%) scale(0.50); /* Escala adequada per a tauletes */
        margin-top: -120px;
    }
    
    .explanation-section {
        width: 45%;
    }
    
    .ds-section {
        width: 55%;
    }
}


/* Millores per a mòbils petits */
@media (max-width: 380px) {
    .ds-lite {
        transform: translateX(-50%) scale(0.35); /* Encara més petit per a mòbils molt petits */
    }
    
    .explanation-section {
        padding: 15px;
    }
}

/* Missatge d'error */
.error-message {
    color: #d32f2f;
    text-align: center;
    font-size: 10px;
    padding: 10px;
}

/* Millorar l'estil del formulari */
#pokemonForm {
    margin-bottom: 8px;
}

#pokemonForm .form-label {
    font-size: 12px; 
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}

#pokemonForm .form-select {
    font-size: 11px; 
    padding: 6px 10px; 
    border-radius: 5px;
    border: 2px solid #ccc;
    width: 100%;
    background-color: #f8f8f8;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 16px;
}

/* Estil per al contenidor del select */
.select-container {
    position: relative;
    width: 100%;
}

/* Estil per al dropdown personalitzat */
.custom-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 90px; /* Alçada per mostrar 3 opcions */
    overflow-y: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.custom-select-dropdown.show {
    display: block;
}

/* Estil per a les opcions */
.select-option {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: 11px;
}

.select-option:hover {
    background-color: #f0f0f0;
}

.select-option.selected {
    background-color: #e0e0e0;
    font-weight: bold;
}

/* Estil per al scrollbar del dropdown */
.custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Millorar l'estil de la informació del Pokémon */
#pokemonDetails {
    background-color: #f8f9fa !important;
    border-radius: 5px;
    padding: 6px !important;
    font-size: 11px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Informació d'alçada i pes */
#pokemonDetails .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dotted #ddd;
}

#pokemonDetails .col-6 {
    width: 48%;
    font-weight: bold;
    color: #444;
}

#pokemonHeight, #pokemonWeight {
    font-weight: normal;
    color: #666;
    float: right;
}

/* Títols de secció */
#pokemonDetails h3 {
    font-size: 12px !important; 
    color: #1a237e;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 3px;
}

/* Habilitats */
#pokemonAbilities {
    padding-left: 12px;
    margin-top: 3px;
}

#pokemonAbilities li {
    margin-bottom: 2px;
    position: relative;
    padding-left: 8px;
    font-size: 9px;
}

#pokemonAbilities li:before {
    content: "•";
    position: absolute;
    left: -2px;
    color: #7986cb;
}

#pokemonAbilities li small {
    font-size: 8px;
    color: #999;
    font-style: italic;
}

/* Disseny de la informació del Pokémon a la pantalla superior */
.pokemon-top {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    padding: 5px;
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pokemon-image-container {
    width: 40%;
    display: flex;
    justify-content: center;
    padding: 5px;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
    border-radius: 50%;
    margin-right: 10px;
    overflow: visible;
    position: relative;
}

.pokemon-image {
    max-height: 100px; 
    max-width: 100px; 
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
    animation: sway 3s ease-in-out infinite;
    transform-origin: bottom center;
    transition: all 0.3s;
}

.pokemon-image:hover {
    animation: float 0.8s ease-in-out infinite;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
    transform: scale(1.05);
}

.pokemon-info-container {
    width: 60%;
    padding-left: 5px;
}

#pokemonName {
    text-transform: uppercase;
    font-size: 18px !important; 
    margin-bottom: 3px !important;
    color: #333;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

#pokemonNumber {
    color: #666 !important;
    font-size: 14px; 
    margin-bottom: 5px !important;
}

#pokemonTypes {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.pokemon-type {
    font-size: 10px; 
    padding: 3px 8px; 
    border-radius: 10px;
}

/* Secció de descripció */
.pokemon-description {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px;
    margin-top: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
    max-height: 80px;
    overflow-y: auto;
}

.description-text {
    font-size: 11px !important; /* Aumentado de 10px a 11px */
    line-height: 1.4;
    color: #555;
    margin: 0;
    font-style: italic;
}

/* Animacions per a la imatge del Pokémon */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Animació de balanceig */
@keyframes sway {
    0%, 100% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-3px) rotate(1deg);
    }
}

/* Efecte visual durant la reproducció del so */
@keyframes sound-playing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Classe aplicada a la imatge quan es reprodueix so */
.pokemon-image.playing-sound {
    animation: sound-playing 0.3s infinite;
}

/* Botó per reproduir so */
.sound-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Efectes hover i active pel botó de so */
.sound-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.1);
}

.sound-button:active {
    transform: scale(0.95);
}

/* Icona SVG del botó de so */
.sound-button svg {
    width: 14px;
    height: 14px;
    fill: #333;
}

.default-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: #000;
    border-radius: 4px;
    overflow: hidden;
}

.loading-gif {
    width: 100%;
    height: 100%;
    object-fit: fill; 
    object-position: center; 
}

/* Estil per al select deshabilitat */
.disabled-select {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Animació del botó START quan es prem */
.active-button {
    transform: scale(0.95);
    background: linear-gradient(to bottom, #d4d4d4, #ababab) !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3) !important;
}


.bottom-default-screen {
    background-color: #111;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 3px;
    position: relative;
    padding: 0; 
}

/* Assegurar que el contenidor del GIF ocupi tot l'espai */
#startScreen {
    width: 100%;
    padding: 0;
    margin: 0;
}

@keyframes blink-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Estil per al botó personalitzat de select */
.custom-select-button {
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 5px;
    border: 2px solid #ccc;
    width: 100%;
    background-color: #f8f8f8;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    color: #333;
    background-size: 16px;
}

.custom-select-button:focus {
    outline: none;
    border-color: #aaa;
}

/* Assegurar que les opcions del dropdown siguin visibles per sobre de la resta */
.custom-select-dropdown {
    z-index: 20;
}

/* Estils per el dropdown personalitzat */
.project-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    position: relative;
}

/* Sección de la Nintendo DS */
.ds-section {
    width: 60%;
    background-color: #111;
    min-height: 100vh;
    position: relative;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sección de explicación */
.explanation-section {
    width: 40%;
    background-color: #f8f9fa;
    padding: 20px;
    border-left: 1px solid #ddd;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Botón para mostrar/ocultar explicación */
.toggle-explanation {
    position: absolute;
    margin: 20px;
    z-index: 1001;
    background: #333;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    width: 45px;
    height: 45px;
    display: block;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}



.toggle-explanation:hover {
    background: #444;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.toggle-explanation.active:hover {
    background: #555;
}

/* Estado oculto con animaciones mejoradas */
.explanation-hidden .explanation-section {
    transform: translateX(100%);
}

.explanation-hidden .toggle-explanation {
    right: 20px;
}

.explanation-hidden .ds-section {
    width: 100%;
}

/* Estils per els blocs de codi */
.code-block {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 0;
    margin: 15px 0;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.code-block::before {
    content: "JavaScript";
    display: block;
    padding: 5px 10px;
    background-color: #2d2d2d;
    color: #e0e0e0;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    border-bottom: 1px solid #444;
    text-align: right;
}

.code-block pre {
    margin: 0;
    padding: 15px;
    background-color: transparent;
}

.code-block code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    color: #d4d4d4;
    line-height: 1.5;
    tab-size: 4;
    display: block;
}


.code-block::-webkit-scrollbar {
    height: 8px;
}

.code-block::-webkit-scrollbar-track {
    background: #2d2d2d;
}

.code-block::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb:hover {
    background: #777;
}

h3{
    font-size: 22px;
    font-weight: bold;
    font-family: 'arial';
    color: #333;
    text-align: center;
    margin-bottom: 10px;
}

.credits-container{
 background-color: #3b3b3b;
 color: #fff;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin-top: 20px;

}