@charset "UTF-8";
.modal,body{display:flex;justify-content:center;align-items:center}body,select{font-size:clamp(1.4rem,1.5vw,1.6rem)}body{color:#fff;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;flex-direction:column}h1{font-size:clamp(4rem,5vw,6rem);text-shadow:0 0 .8rem #a6ff39}h2{margin-bottom:1rem;font-size:clamp(2rem,3vw,3rem)}select{margin-top:1rem;padding:2rem;cursor:pointer;text-align-last:center;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:background-color .3s ease}canvas,label{display:block}body,option,select{text-align:center}h2,label{font-weight:700}*,::after,::before{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%}html{font-size:62.5%}.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1;min-height:100vh;min-width:100vw;padding:1rem;box-sizing:border-box}#pantalla-juego,.modal-content{display:flex;flex-direction:column;align-items:center}.modal-content{max-width:60rem;width:90%;padding:2rem;box-shadow:0 1rem 3rem rgba(0,0,0,.3);text-align:center;font-weight:600;line-height:1.5;justify-content:center;gap:1rem}.modal-content h2{color:#111827}.modal-content ul li{list-style:none;font-size:clamp(1.2rem,1.4vw,1.6rem)}#pantalla-juego #juego .celda,.inicial{display:flex;justify-content:center;align-items:center}.inicial{flex-direction:column;width:100vw;height:100vh;position:absolute;top:0;left:0;gap:clamp(2rem,3vw,3rem);padding:clamp(1rem,2vw,2rem)}.inicial-btn{font-size:clamp(1.5rem,1.6vw,1.7rem);font-weight:700;cursor:pointer;box-shadow:0 .6rem 1rem rgba(22,163,74,.7);transition:all .3s ease-in-out}.inicial-btn:hover{background-color:#4ade80;text-shadow:0 0 5px rgba(22,163,74,.7);transform:scale(1.1)}#pantalla-juego{position:relative}#pantalla-juego #juego{display:grid;gap:clamp(.5rem,1.5vw,1rem);justify-content:center;align-content:center;width:100%;height:auto;padding:2rem;margin-bottom:7rem}#pantalla-juego #juego .celda{font-size:clamp(2rem,4vw,4rem);transition:background-color .3s ease,box-shadow .3s ease}.serpienteCabeza,.serpienteCuerpo{font-size:clamp(3rem,5vw,5rem)}.attribution a,.back-link{text-decoration:none;transition:color .3s ease}.back-link{color:#f9f9f9;font-weight:700;position:absolute;height:2rem;width:2rem;top:2rem;left:5rem;z-index:1}.back-link:hover{color:#76ff03}@media (min-width:768px){.back-link{width:3rem;height:3rem}}.rules-link{text-decoration:none;color:#f9f9f9;font-weight:700;font-size:clamp(1.4rem,1.5vw,1.6rem);box-shadow:0 .6rem 1rem rgba(22,163,74,.7);transition:all .3s ease-in-out}.rules-link:hover{background-color:#4ade80;text-shadow:0 0 5px rgba(22,163,74,.7);transform:scale(1.1)}.attribution{position:absolute;color:#b1aeae;bottom:3rem;right:5rem}.attribution a{color:#76ff03;text-shadow:0 0 .5rem #16a34a}.attribution a:hover{color:#1cd05e}#pantalla-inicial[hidden],.hidden,.sr-only{display:none!important}[data-tema=azul]{background:linear-gradient(135deg,#1e1e2f,#111)}[data-tema=azul] #juego{background:#222d44;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.6)}[data-tema=azul] #juego .celda{background:linear-gradient(145deg,#2c3e50,#1a2633);border-radius:10px;box-shadow:inset 2px 2px 5px #3d566e,inset -2px -2px 5px #162133;color:#a7c7e7;transition:background-color .3s ease,color .3s ease}[data-tema=azul] #juego .serpienteCabeza,[data-tema=azul] #juego .serpienteCuerpo{text-shadow:0 0 8px #6ee7b7}[data-tema=azul] .btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff;border:0;border-radius:8px;transition:all .3s ease-in-out;box-shadow:0 4px 8px rgba(26,163,74,.6)}[data-tema=azul] .btn:focus,[data-tema=azul] .btn:hover{background:linear-gradient(135deg,#16a34a,#4ade80);box-shadow:0 6px 14px rgba(26,163,74,.9);outline:0}[data-tema=azul] select{background-color:#1e293b;color:#d1d5db;border:1px solid #334155;border-radius:8px;box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}[data-tema=azul] select:focus,[data-tema=azul] select:hover{background-color:#374151;outline:0}[data-tema=azul] .modal-content{background:#f9fafb;color:#111827;border-radius:12px}[data-tema=azul] .modal-content ul{padding-left:0;margin:0 auto;text-align:left}[data-tema=azul] .modal-content ul li{margin-bottom:.8rem;position:relative;padding-left:1.8rem}[data-tema=azul] .modal-content ul li::before{content:"🟢";position:absolute;left:0;top:0;font-size:1.2rem}[data-tema=original],[data-tema=verde]{background-color:#111}[data-tema=verde] .rules-link:hover{background-color:#76ff03;text-shadow:0 0 10px #a6ff39}[data-tema=verde] #juego{gap:.6rem;filter:drop-shadow(0 0 4px #16a34a)}[data-tema=verde] #juego .celda{background:linear-gradient(145deg,#222,#181818);border-radius:clamp(.4rem,.6rem,1rem);border:1.5px solid #16a34a;box-shadow:inset 0 0 .6rem #76ff03;color:#76ff03}[data-tema=verde] #juego .celda:hover{background:linear-gradient(145deg,#2e7d32,#1b451b);box-shadow:0 0 .8rem #a6ff39;color:#a6ff39}[data-tema=verde] .modal-content h2,[data-tema=verde] .serpienteCabeza{text-shadow:0 0 .8rem #a6ff39}[data-tema=verde] .serpienteCuerpo{text-shadow:0 0 .6rem #76ff03}[data-tema=verde] select{background-color:#16a34a;color:#111827;border:1px solid #334155;border-radius:.5rem;box-shadow:inset 0 2px 4px rgba(0,0,0,.4);transition:background-color .3s ease,box-shadow .3s ease}[data-tema=verde] .btn{padding:1rem 2.2rem;border-radius:.8rem;border:0;font-weight:700;background:linear-gradient(45deg,#16a34a,#76ff03);color:#111;box-shadow:0 .6rem 1rem rgba(22,163,74,.7),inset 0 2px 6px rgba(118,255,3,.4);transition:all .3s ease-in-out}[data-tema=verde] .btn:focus,[data-tema=verde] .btn:hover,[data-tema=verde] select:focus,[data-tema=verde] select:hover{background:linear-gradient(45deg,#76ff03,#a6ff39);box-shadow:0 .8rem 1.5rem rgba(118,255,3,.9);transform:scale(1.05)}[data-tema=verde] .modal-content{background:#222;color:#a6ff39;padding:2.5rem 2rem;border-radius:1.2rem;box-shadow:0 0 2rem #76ff03}[data-tema=verde] .modal-content ul{padding-left:0;list-style:none;margin:1.5rem 0}[data-tema=verde] .modal-content ul li{margin:.7rem 0;position:relative;padding-left:1.6rem;text-align:left;color:#c6ff00}[data-tema=verde] .modal-content ul li::before{content:"🍏";position:absolute;left:-5px;top:0;font-size:1.3rem;line-height:1;transform:translateY(4px)}[data-tema=original] .modal-content{background:#fff;border-radius:6px;color:#000}[data-tema=original] .celda,[data-tema=original] select{background-color:#222;border:1px solid #444;border-radius:6px}[data-tema=original] .btn{padding:1rem 2rem;background-color:#16a34a;color:#fff;border:0;border-radius:6px;transition:all .3s ease-in-out;text-shadow:0 0 4px #000;box-shadow:0 4px 8px rgba(26,163,74,.6)}[data-tema=original] .btn:hover{background:linear-gradient(135deg,#16a34a,#4ade80);box-shadow:0 6px 14px rgba(26,163,74,.9);outline:0;transform:scale(1.05)}[data-tema=original] select{color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}