* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #050505; color: white; font-family: 'Courier New', Courier, monospace; overflow-x: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.game-container { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; position: relative; padding: 20px; }
.crt-overlay { pointer-events: none; position: fixed; inset: 0; z-index: 50; opacity: 0.05; background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%), linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06)); background-size: 100% 4px, 3px 100%; }
.bg-glow { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(147, 51, 234, 0.15) 0%, transparent 70%); z-index: -1; }
.main-title { font-size: 3.5rem; text-align: center; background: linear-gradient(to bottom, #f472b6, #be185d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(236,72,153,0.5)); margin-bottom: 20px; }
.main-title.special { background: linear-gradient(to bottom, #fde047, #ca8a04); -webkit-background-clip: text; filter: drop-shadow(0 0 15px #facc15); }
.timer-section { width: 100%; max-width: 400px; margin-bottom: 20px; }
.timer-labels { display: flex; justify-content: space-between; font-size: 12px; color: #a78bfa; margin-bottom: 5px; }
.progress-bar-container { height: 8px; background: #111; border-radius: 4px; overflow: hidden; border: 1px solid #333; }
.progress-bar { height: 100%; background: linear-gradient(to right, #9333ea, #ec4899); width: 100%; transition: width 0.3s; }
.stats-row { display: flex; gap: 15px; margin-bottom: 20px; }
.stat-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(255,255,255,0.05); border-radius: 4px; font-size: 13px; }
.border-pink { border-left: 3px solid #ec4899; }
.border-yellow { border-left: 3px solid #eab308; }
.border-cyan { border-left: 3px solid #06b6d4; }
.game-main { display: flex; gap: 30px; align-items: center; justify-content: center; flex-wrap: wrap; }
.reference-box { width: 250px; height: 250px; border: 2px solid #333; background: #111; }
.reference-box img { width: 100%; height: 100%; object-fit: contain; }
.puzzle-board { display: grid; width: 400px; height: 400px; background: #111; border: 4px solid #222; gap: 2px; }
.tile { position: relative; background: #1a1a1a; cursor: pointer; border: 1px solid #333; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tile.empty { background: transparent !important; border: none; cursor: default; }
.tile-number { position: absolute; bottom: 2px; right: 2px; font-size: 9px; color: rgba(255,255,255,0.4); z-index: 5; }
.footer { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.button-group { display: flex; gap: 20px; }
.ui-button { background: transparent; border: none; color: #ec4899; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.icon-box { width: 45px; height: 45px; border: 2px solid #ec4899; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; }
.ui-button:active .icon-box { transform: scale(0.9); }
.btn-label { font-size: 10px; font-weight: bold; }
.terminal-text { font-size: 11px; color: #555; letter-spacing: 2px; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: #111; padding: 40px; border: 2px solid #9333ea; text-align: center; }
.action-btn { background: #9333ea; color: white; padding: 10px 20px; border: none; cursor: pointer; margin-top: 20px; }
.action-btn-red { background: #dc2626; color: white; padding: 10px 20px; border: none; cursor: pointer; margin-top: 20px; }
.hidden { display: none; }