*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Press Start 2P",cursive;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;padding:20px;display:flex;flex-direction:column;align-items:center}.start-screen{justify-content:center;gap:24px}.welcome-card{width:min(100%,760px);display:flex;flex-direction:column;gap:16px;background:rgba(10,17,35,.68);border:2px solid rgba(255,255,255,.2);border-radius:16px;padding:20px;box-shadow:0 12px 30px #0000004d}.welcome-message{color:#d1d5db;font-size:.62rem;line-height:1.6;text-align:center}.welcome-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.start-title{color:gold;font-size:clamp(2rem,7vw,4rem);text-align:center;text-shadow:0 0 10px #ffd700,0 0 20px #ffd700,0 0 30px #ff6b00,0 0 40px #ff6b00;animation:glow 2s ease-in-out infinite alternate}.start-button{padding:14px 30px;font-family:"Press Start 2P",cursive;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#1a1a2e;background:linear-gradient(145deg,#ffd700,#ffaa00);border:none;border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 8px 20px #ffaa0059}.start-button:hover{transform:translateY(-2px);box-shadow:0 12px 26px #ffaa0073}.start-button:active{transform:translateY(0)}.start-button:disabled,.secondary-button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.secondary-button{padding:12px 20px;font-family:"Press Start 2P",cursive;font-size:.6rem;text-transform:uppercase;color:#e5e7eb;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:10px;cursor:pointer;transition:transform .2s ease,background .2s ease}.secondary-button:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)}.ranking-panel{margin-top:8px;display:flex;flex-direction:column;gap:10px}.ranking-title{color:#facc15;font-size:.85rem;text-align:center}.ranking-status{color:#d1d5db;font-size:.58rem;text-align:center;line-height:1.5}.ranking-list{display:flex;flex-direction:column;gap:8px}.ranking-list.scrollable{max-height:300px;overflow-y:auto;padding-right:4px}.ranking-item{display:grid;grid-template-columns:56px minmax(0,1fr) 70px 90px;gap:8px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:10px 12px}.ranking-rank,.ranking-round,.ranking-points{color:#f3f4f6;font-size:.52rem}.ranking-name{color:#22d3ee;font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-title{color:gold;font-size:2rem;text-align:center;margin-bottom:20px;text-shadow:0 0 10px #ffd700,0 0 20px #ffd700,0 0 30px #ff6b00,0 0 40px #ff6b00;animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{text-shadow:0 0 10px #ffd700,0 0 20px #ffd700,0 0 30px #ff6b00}to{text-shadow:0 0 20px #ffd700,0 0 30px #ffd700,0 0 40px #ff6b00,0 0 50px #ff6b00}}.game-info{display:flex;gap:40px;margin-bottom:30px}.timer-row{width:min(100%,360px);margin-top:-10px;margin-bottom:20px;display:flex;justify-content:center}.timer-item{width:100%;display:flex;align-items:center;justify-content:space-between;background:rgba(56,189,248,.12);border-color:#38bdf873;isolation:isolate}.timer-item .timer-label{color:#9ca3af;font-size:.7rem;margin-right:10px}.timer-item .timer-value{color:#38bdf8;font-size:1.2rem;line-height:1;text-shadow:none;transition:color .2s ease}.timer-item.danger .timer-value{color:#ef4444;animation:pulse .5s ease-in-out infinite}.info-item{background:rgba(255,255,255,.1);padding:15px 25px;border-radius:10px;border:2px solid rgba(255,255,255,.2);box-shadow:0 8px 20px #0003;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.info-item .label{color:#aaa;font-size:.7rem;margin-right:10px}.info-item .value{color:#4ade80;font-size:1.2rem;transition:color .3s}.info-item .value.danger{color:#ef4444;animation:pulse .5s ease-in-out infinite}.info-item .value.penalty{color:#f59e0b}.info-item .value.penalty.hard{color:#ef4444;font-weight:700}.info-item .value.penalty.extreme{color:#9333ea;font-weight:700;text-shadow:0 0 10px #9333ea}.info-item.hard-badge{background:linear-gradient(145deg,#dc2626,#b91c1c);border-color:#ef4444;animation:pulse 1s ease-in-out infinite}.info-item.hard-badge .value{color:#fff;font-size:.6rem}.info-item.extreme-badge{background:linear-gradient(145deg,#7c3aed,#5b21b6);border-color:#9333ea;animation:extremePulse .5s ease-in-out infinite}.info-item.extreme-badge .value{color:#fff;font-size:.55rem;text-shadow:0 0 10px #fff}@keyframes extremePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.game-board{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;max-width:900px;perspective:1000px}.card{width:150px;height:180px;cursor:pointer;perspective:1000px;border-radius:15px}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s}.card.flipped .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center}.card-front{background:linear-gradient(145deg,#e63946,#d62839);border:3px solid #fff;box-shadow:0 10px 30px #0000004d,inset 0 -5px 20px #0003}.card-back{background:linear-gradient(145deg,#ffffff,#f0f0f0);border:3px solid #ffd700;transform:rotateY(180deg);padding:10px;box-shadow:0 10px 30px #0000004d,0 0 15px #ffd7004d}.card-back img{width:100px;height:100px;object-fit:contain}.pokemon-name{font-size:.5rem;color:#333;text-transform:capitalize;margin-top:5px;text-align:center}.card.matched{animation:matchedPulse .5s ease-out}@keyframes matchedPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.pokeball{width:80px;height:80px;position:relative}.pokeball-top{width:100%;height:50%;background:#e63946;border-radius:50% 50% 0 0;border:3px solid #333;border-bottom:none}.pokeball-bottom{width:100%;height:50%;background:#fff;border-radius:0 0 50% 50%;border:3px solid #333;border-top:none}.pokeball-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:8px;background:#333;display:flex;align-items:center;justify-content:center}.pokeball-button{width:20px;height:20px;background:#fff;border:3px solid #333;border-radius:50%;z-index:1}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:#fff;font-size:.8rem}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:#ef4444;font-size:.8rem;text-align:center}.error-container button{margin-top:20px;padding:15px 30px;font-family:"Press Start 2P",cursive;font-size:.7rem;background:linear-gradient(145deg,#ffd700,#ffaa00);border:none;border-radius:10px;cursor:pointer;color:#1a1a2e}.pokeball-loader{width:60px;height:60px;background:linear-gradient(to bottom,#e63946 50%,#fff 50%);border-radius:50%;border:3px solid #333;position:relative;animation:spin 1s linear infinite;margin-bottom:20px}.pokeball-loader:before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;background:#333;transform:translateY(-50%)}.pokeball-loader:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:15px;height:15px;background:#fff;border:3px solid #333;border-radius:50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:linear-gradient(145deg,#1a1a2e,#16213e);padding:40px 60px;border-radius:20px;text-align:center;border:3px solid;animation:scaleIn .3s ease-out}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.modal.game-over{border-color:#ef4444}.modal.game-over h2{color:#ef4444;text-shadow:0 0 20px #ef4444}.modal.win{border-color:#4ade80}.modal.win h2{color:#4ade80;text-shadow:0 0 20px #4ade80}.modal h2{font-size:1.5rem;margin-bottom:20px}.modal p{color:#aaa;font-size:.7rem;margin-bottom:10px}.modal button{margin-top:20px;padding:15px 30px;font-family:"Press Start 2P",cursive;font-size:.7rem;background:linear-gradient(145deg,#ffd700,#ffaa00);border:none;border-radius:10px;cursor:pointer;color:#1a1a2e;transition:all .3s;box-shadow:0 5px 15px #ffd7004d}.modal button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #ffd70080}.modal button:active{transform:translateY(0)}.modal .warning{color:#f59e0b;font-size:.6rem;margin-top:10px;animation:pulse 1s ease-in-out infinite}.modal .hard-mode-text{color:#ef4444;font-size:.6rem;margin-top:10px;text-shadow:0 0 10px #ef4444}.modal .extreme-mode-text{color:#9333ea;font-size:.6rem;margin-top:10px;text-shadow:0 0 15px #9333ea;animation:extremePulse .5s ease-in-out infinite}.game-board.hard-mode{grid-template-columns:repeat(6,1fr);gap:8px;max-width:750px}.game-board.hard-mode .card{width:110px;height:140px}.game-board.hard-mode .card-back img{width:70px;height:70px}.game-board.hard-mode .pokeball{width:55px;height:55px}.game-board.hard-mode .pokemon-name{font-size:.35rem}.game-board.extreme-mode{grid-template-columns:repeat(8,1fr);gap:6px;max-width:850px}.game-board.extreme-mode .card{width:95px;height:120px}.game-board.extreme-mode .card-back img{width:60px;height:60px}.game-board.extreme-mode .pokeball{width:45px;height:45px}.game-board.extreme-mode .pokemon-name{font-size:.3rem}@media (max-width: 900px){.app{padding:16px 12px}.welcome-card{width:min(100%,640px);padding:16px}.game-info{flex-wrap:wrap;justify-content:center;gap:12px;width:min(100%,520px);margin-bottom:14px}.timer-row{width:min(100%,520px);margin-top:0;margin-bottom:16px}.info-item{flex:1 1 140px;display:flex;align-items:center;justify-content:space-between;min-width:0;padding:12px 14px}.info-item .label{margin-right:8px}.game-board{grid-template-columns:repeat(5,1fr);gap:10px}.card{width:100px;height:130px}.card-back img{width:70px;height:70px}.pokeball{width:50px;height:50px}.game-title{font-size:1.2rem}}@media (max-width: 600px){.app{padding:12px 8px}.welcome-card{width:min(100%,380px);gap:12px;padding:14px}.welcome-message{font-size:.52rem}.start-button{width:100%;font-size:.58rem;padding:12px 10px}.secondary-button{width:100%;font-size:.52rem;padding:10px 8px}.welcome-actions{flex-direction:column;gap:8px}.ranking-title{font-size:.72rem}.ranking-item{grid-template-columns:42px minmax(0,1fr) 52px 66px;gap:6px;padding:8px}.ranking-rank,.ranking-round,.ranking-points{font-size:.45rem}.ranking-name{font-size:.48rem}.ranking-list.scrollable{max-height:220px}.game-title{font-size:.95rem;margin-bottom:14px;line-height:1.3}.game-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,360px);gap:8px;margin-bottom:10px}.timer-row{width:min(100%,360px);margin-top:0;margin-bottom:12px}.timer-item{min-height:54px;padding:10px}.timer-item .timer-label{font-size:.5rem}.timer-item .timer-value{font-size:.8rem}.info-item{flex:unset;min-height:54px;padding:8px 6px;flex-direction:column;align-items:center;justify-content:center;gap:4px}.info-item .label{margin-right:0;font-size:.5rem}.info-item .value{font-size:.8rem;line-height:1}.info-item.hard-badge,.info-item.extreme-badge{grid-column:1 / -1;min-height:44px}.info-item.hard-badge .value,.info-item.extreme-badge .value{font-size:.5rem}.game-board{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,360px);gap:8px}.game-board.hard-mode,.game-board.extreme-mode{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,360px);max-width:360px;gap:8px}.game-board.hard-mode{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.info-item{padding:8px 6px}.card,.game-board.hard-mode .card,.game-board.extreme-mode .card{width:100%;height:auto;aspect-ratio:5 / 6;border-radius:12px}.game-board.hard-mode .card{aspect-ratio:4 / 5}.card-front,.card-back{border-radius:12px}.card-back img,.game-board.hard-mode .card-back img,.game-board.extreme-mode .card-back img{width:58px;height:58px}.game-board.hard-mode .card-back img{width:44px;height:44px}.pokeball,.game-board.hard-mode .pokeball,.game-board.extreme-mode .pokeball{width:40px;height:40px}.game-board.hard-mode .pokeball{width:34px;height:34px}.pokemon-name,.game-board.hard-mode .pokemon-name,.game-board.extreme-mode .pokemon-name{font-size:.32rem}.game-board.hard-mode .pokemon-name{font-size:.28rem}}
