@font-face {font-family: 'Press Start 2P';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nYivN04w.woff2) format('woff2');unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face {font-family: 'Press Start 2P';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nRivN04w.woff2) format('woff2');unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face {font-family: 'Press Start 2P';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nWivN04w.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}@font-face {font-family: 'Press Start 2P';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nbivN04w.woff2) format('woff2');unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face {font-family: 'Press Start 2P';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}* {box-sizing: border-box;padding: 0;margin: 0;}.wrapper-container {width: 60%;}#rotateMessage {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: #000;color: #fff;font-size: 18px;font-family: 'Press Start 2P', monospace;z-index: 99999999;justify-content: center;align-items: center;text-align: center;padding: 20px;}body {margin: 0;background: #000;overflow: hidden;color: white;text-align: center;}.trap {position: relative;width: 300px;height: 150px;background: #222;border: 3px solid #00acc1;box-shadow: 0 0 0 3px #333;}.door {position: absolute;width: 140px;height: 130px;background: repeating-linear-gradient(45deg, #ffc107, #ffc107 10px, #000 10px, #000 20px);border: 2px solid #00acc1;top: 10px;transition: all 0.6s ease-in-out;display: flex;justify-content: center;align-items: center;}.left {left: 10px;}.right {right: 10px;}.circle {width: 14px;height: 14px;background: #007c91;border-radius: 50%;}.label {position: absolute;top: 10px;width: 100%;text-align: center;color: #00acc1;font-weight: bold;font-size: 18px;opacity: 0;transition: opacity 0.3s ease-in-out;}.trap.open .label {opacity: 1;}.game-2 {display: none;overflow: hidden;}.lights {position: absolute;top: 52%;left: 50%;transform: translate(-50%, -50%);display: flex;gap: 100px;}.light {width: 14px;height: 14px;background: #ff3d00;border-radius: 50%;animation: blink 1.6s infinite;}.pedal {position: absolute;bottom: -20px;width: 80px;height: 14px;background: #222;border: 2px solid #00acc1;left: 50%;transform: translateX(-50%);}.trap.open .left {transform: translateX(-120%) rotateY(45deg);}.trap.open .right {transform: translateX(120%) rotateY(-45deg);}.bottom-trap {text-align: center;margin: 0 auto;display: flex;align-items: center;justify-content: center;position: relative;}.status-panel {opacity: 0;pointer-events: none;transition: opacity 0.5s ease;position: relative;}.status-panel.visible {opacity: 1;pointer-events: auto;width: 80%;margin: 0 auto;}.status-flex {display: grid;grid-template-columns: repeat(6, 1fr);gap: 10px;justify-items: center;align-items: center;margin: 0 auto;}.trap.blocked {box-shadow: 0 0 20px red, 0 0 30px red;animation: flashBlock 0.3s alternate infinite;}.status-option {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 15px;border: 1px solid #444;border-radius: 8px;background-color: rgba(0, 0, 0, 0.5);transition: background-color 0.3s, transform 0.3s;width: 175px;height: 262px;position: relative;cursor: grab;}.status-option.ui-draggable-dragging {box-shadow: 0 0 20px #00acc1;transform: scale(1.1);opacity: 0.9;z-index: 10000;}.status-option:hover {background-color: rgba(0, 172, 193, 0.2);}.status-code-card {position: absolute;bottom: -10px;left: 0;width: 100%;padding: 10px 0;background-color: transparent;font-size: 11px;font-weight: bold;color: #fff;font-family: "Arial";cursor: pointer;z-index: 3;height: 100px;display: flex;justify-content: end;align-items: end;}.status-code-card span {background-color: #06d6a0;width: 100%;display: inline-block;padding: 5px;border-radius: 0 0 5px 5px;color: #000;}#about-301.status-code-card span, #about-302.status-code-card span {background-color: #ffbe0b;}#about-403.status-code-card span, #about-404.status-code-card span {background-color: #e63946;}#about-500.status-code-card span {background-color: #fb5607;}.status-desc {font-size: 14px;color: #aaa;}.status-option.empty {background-color: rgba(255, 255, 255, 0.2);border: 1px dashed #666;pointer-events: none;}.game-here {position: absolute;bottom: 12px;right: 0;left: 0;font-family: "Arial";font-size: 14px;}.card {background-size: 100%;width: 175px;height: 269px;background-repeat: no-repeat;}.card-200 {background-image: url(./../images/card-200.webp);}.card-301 {background-image: url(./../images/card-301.webp);}.card-302 {background-image: url(./../images/card-302.webp);}.card-403 {background-image: url(./../images/card-403.webp);}.card-404 {background-image: url(./../images/card-404.webp);}.card-500 {background-image: url(./../images/card-500.webp);}.trap-border {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 3;opacity: 0;transition: opacity 0.2s ease;}.trap-border.active {opacity: 1;}.trap-border rect {stroke-width: 3;stroke-dasharray: 20;filter: url(#glow);}.trap-border .line-1 {stroke-dashoffset: 0;animation: spark-1 0.5s linear infinite;}.trap-border .line-2 {stroke-dashoffset: 100;animation: spark-2 0.5s linear infinite;}.container {position: fixed;width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 9999999;}h2 {font-size: 25px;color: #ffe600;text-shadow: 2px 2px #000;margin-bottom: 10px;font-family: 'Press Start 2P', monospace;line-height: 30px;}h1 {font-size: 14px;margin-bottom: 20px;font-family: 'Press Start 2P', monospace;color: #00acc1;}p {font-size: 14px;line-height: 21px;margin-bottom: 16px;font-family: 'Arial';}button {font-family: 'Press Start 2P', monospace;font-size: 12px;background: #111;color: #fff;border: 3px solid #888;padding: 12px 24px;cursor: pointer;box-shadow: 3px 3px #444;}button:hover {background: #333;}.mask {background: url("../images/mask-1.webp");position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 0.2s ease;pointer-events: none;background-size: cover;}.status-option.glow {box-shadow: 0 0 8px #00faff, 0 0 16px #00faff, 0 0 24px #00faff, 0 0 32px #00faff;border-color: #00faff;animation: pulseGlow 0.6s infinite alternate;}#retroConsole {width: 570px;margin: 30px auto 0;background: #111;border: 2px solid #0f0;color: #0f0;font-family: 'Courier New', monospace;font-size: 14px;padding: 15px;text-align: left;height: 70px;overflow-y: auto;box-shadow: 0 0 10px #0f0;display: none;}#retroConsole::-webkit-scrollbar {width: 8px;}#retroConsole::-webkit-scrollbar-track {background: #000;border-left: 1px solid #0f0;}#retroConsole::-webkit-scrollbar-thumb {background-color: #0f0;border-radius: 4px;}#retroConsole {scrollbar-width: thin;scrollbar-color: #0f0 #000;}#audioControls {position: fixed;top: 10px;right: 10px;z-index: 999999;display: none;}#audioControls button {font-family: 'Press Start 2P', monospace;font-size: 12px;background: #111;color: #fff;border: 3px solid #888;padding: 0;cursor: pointer;box-shadow: 3px 3px #444;width: 50px;height: 50px;}.group-game {opacity: 0;display: none;transition: opacity 1s ease-in-out;height: 100dvh;justify-content: center;align-items: center;flex-direction: column;gap: 15px;}.group-game.fade-in {opacity: 1;display: flex;}#endMessage {display: none;position: fixed;top: 35%;left: 50%;transform: translate(-50%, -50%) scale(0.5);font-family: 'Press Start 2P', monospace;font-size: 20px;color: #fff;text-shadow: 2px 2px #000;z-index: 999999;animation: zoomIn 1s ease-out forwards;}.universe {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}.about-game {margin-top: 20px;font-family: "Arial";font-size: 12px;font-style: italic;cursor: pointer;}.star {position: absolute;background-color: #fff;border-radius: 50%;animation: twinkle var(--duration) infinite ease-in-out;}.shooting-star {position: absolute;width: 2px;height: 2px;background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));border-radius: 50%;animation: shooting var(--duration) linear infinite;opacity: 0;}.nebula {position: absolute;border-radius: 50%;filter: blur(30px);opacity: 0.2;animation: pulse 8s infinite alternate;}#dialogBox {display: none;position: absolute;top: -80px;background: rgba(0, 0, 0, 0.85);border: 2px solid #ffffff;color: #fff;font-family: 'Press Start 2P', monospace;font-size: 9px;padding: 12px 20px;z-index: 2222;box-shadow: 0 0 12px #ffffff;border-radius: 10px;text-align: center;line-height: 15px;margin: 0 auto;right: 0;left: 0;width: 400px;}#dialogBox:before {content: "";position: absolute;bottom: -43px;left: 50%;transform: translateX(-50%);border-width: 21px;border-style: solid;border-color: rgb(255 255 255 / 85%) transparent transparent transparent;}.restart-game {position: absolute;z-index: 99;top: -40px;display: none;font-family: "Arial";cursor: pointer;}.wrapperModal h2 {font-size: 21px;}.intro {font-family: "Arial";font-size: 13px;display: flex;text-align: center;flex-direction: column;width: 90%;gap: 5px;justify-content: center;align-items: center;margin: 0 auto 10px;}.content {position: relative;z-index: 1;text-align: center;max-width: 800px;padding: 20px;}#cardModal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);justify-content:center;align-items:center;z-index:100000;}#aboutModal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.85);z-index: 22222222;justify-content: center;align-items: center;text-align: center;padding: 20px;}.wrapperModal {position:relative;background:#111;border:3px solid #00acc1;padding:30px;max-width: 610px;color:#fff;font-family:'Press Start 2P';font-size:10px;line-height: 1.6;border-radius: 12px;box-shadow: 0 0 20px #00acc1;}.wrapperModal p {padding-bottom: 10px;margin: 0;}.buttonClose {margin-top:20px;background:#000;border:2px solid #00acc1;color:#00acc1;padding:10px 20px;cursor:pointer;}.buttonCloseCard {position:absolute;top:-20px;right:-20px;background:#000;border:2px solid #00acc1;color:#00acc1;font-family:'Press Start 2P';padding:5px 10px;cursor:pointer;}.imageCard {width:250px;height:auto;border:4px solid #00acc1;box-shadow:0 0 20px #00acc1;border-radius: 15px;}.trap-container {position:relative;width:100%;}@keyframes blink {0%, 100% {opacity: 1;}50% {opacity: 0.2;}}@keyframes flashBlock {from {border-color: red;}to {border-color: #ff3d00;}}@keyframes pulseGlow {from {box-shadow: 0 0 6px #00faff, 0 0 12px #00faff, 0 0 18px #00faff, 0 0 24px #00faff;}to {box-shadow: 0 0 12px #00faff, 0 0 24px #00faff, 0 0 36px #00faff, 0 0 48px #00faff;}}@keyframes shake {0% {transform: translateX(0);}20% {transform: translateX(-8px);}40% {transform: translateX(8px);}60% {transform: translateX(-6px);}80% {transform: translateX(6px);}100% {transform: translateX(0);}}@keyframes wobble {0% {transform: translate(0, 0) rotate(0deg);}10% {transform: translate(-2px, 2px) rotate(-5deg);}20% {transform: translate(2px, -2px) rotate(5deg);}30% {transform: translate(-3px, 3px) rotate(-8deg);}40% {transform: translate(3px, -3px) rotate(8deg);}50% {transform: translate(-4px, 2px) rotate(-6deg);}60% {transform: translate(4px, -2px) rotate(6deg);}70% {transform: translate(-2px, -4px) rotate(-4deg);}80% {transform: translate(2px, 4px) rotate(4deg);}90% {transform: translate(-1px, 1px) rotate(-2deg);}100% {transform: translate(0, 0) rotate(0deg);}}.bottom-trap.wobble, .wobble {animation: wobble 0.07s linear 65;}@keyframes zoomIn {0% {opacity: 0;transform: translate(-50%, -50%) scale(0.5);}100% {opacity: 1;transform: translate(-50%, -50%) scale(1);}}@keyframes spark-1 {to {stroke-dashoffset: -400;}}@keyframes spark-2 {to {stroke-dashoffset: -200;}}@keyframes twinkle {0%, 100% {opacity: 0.2;transform: scale(0.8);}50% {opacity: 1;transform: scale(1);}}@keyframes shooting {0% {transform: translateX(0) translateY(0);opacity: 1;}70% {opacity: 1;}100% {transform: translateX(var(--distance-x)) translateY(var(--distance-y));opacity: 0;}}@keyframes pulse {0% {opacity: 0.1;transform: scale(1);}100% {opacity: 0.3;transform: scale(1.1);}}.scroll-wrapper {display: flex;align-items: center;justify-content: center;}#play-game {width: 100%;height: 100%;display: inline-block;cursor: pointer;}.card-flip-wrapper {perspective: 1000px;position: relative;width: 242px;margin: auto;}.card-flip-inner {position: relative;width: 100%;transform-style: preserve-3d;transition: transform 0.8s;}.card-flip-inner.flipped {transform: rotateY(180deg);}.card-front, .card-back {backface-visibility: hidden;top: 0;left: 0;width: 100%;}.card-front {z-index: 2;}#cardBackText strong {font-family: 'Press Start 2P', monospace;font-size: 35px;color: #1d3557;}.card-back {transform: rotateY(180deg);background: #fff;color: #fff;font-family: 'Press Start 2P', monospace;font-size: 12px;text-align: center;padding: 16px;box-sizing: border-box;position: absolute;height: 100%;display: flex;align-items: center;justify-content: center;border-radius: 8px;}.card-back:after {content: "";bottom: 0;left: 0;width: 100%;height: 40px;background-color: red;position: absolute;border-radius: 0 0 8px 8px;}.card-back.card-200:after {background-color: #06d6a0;}.card-back.card-301:after, .card-back.card-302:after {background-color: #ffbe0b;}.card-back.card-403:after, .card-back.card-404:after {background-color: #e63946;}.card-back.card-500:after {background-color: #fb5607;}.flip-hint {font-family: "Arial";margin-top: 15px;display: inline-block;}.card-back span, .card-back strong, .card-back p {color: #333;}.card-back p {margin: 0;}@media (max-width: 610px) {.group-game {gap: 10px;overflow: hidden;}#dialogBox {top: -85px;width: 300px;}.intro {font-size: 12px;}.status-panel.visible {width: 100%;}#audioControls {top: inherit;bottom: 10px;}#audioControls button {width: 30px;height: 30px;}#startGame {margin-top: 10px;padding: 10px 15px;}.wrapper-container {width: 100%;height: 290px;overflow: auto;position: relative;padding-bottom: 40px;}.scroll-wrapper {position: relative;width: 95%;}.scroll-wrapper::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 80px;pointer-events: none;background: linear-gradient(to bottom, transparent, #000);}.wrapper-container::-webkit-scrollbar {width: 4px;}.wrapper-container::-webkit-scrollbar-track {background: #111;}.wrapper-container::-webkit-scrollbar-thumb {background-color: #00faff;border-radius: 4px;}#endMessage {top: 20%;}.status-flex {grid-template-columns: repeat(3, 1fr);align-items: center;margin: 0 auto;width: 330px;padding: 0;gap: 0;row-gap: 5px;}.card, .status-option.empty {width: 100px;height: 162px;}.door {width: 60px;height: 60px;}.trap.ui-droppable .door {width: 94px;}.trap.ui-droppable.open .door {width: 60px;}.open-mobile.door {width: 94px;}.trap {width: 210px;height: 85px;}#retroConsole {width: 90%;}}@media (max-width: 320px) {.wrapperModal {padding: 15px;}.status-flex {width: 290px;}.trap {width: 180px;}.card, .status-option.empty {width: 90px;height: 139px;}}