:root{--primary:#6c5ce7;--bg:#f5f6fa;--dark:#2d3436;} body{font-family:'Segoe UI',sans-serif;background:var(--bg);margin:0;padding:10px;color:var(--dark);touch-action:manipulation;} .container{max-width:1200px;margin:0 auto;} .navbar{background:#fff;padding:15px 20px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 10px rgba(0,0,0,0.05);margin-bottom:15px;flex-wrap:wrap;gap:10px;} .card{background:#fff;border-radius:12px;padding:15px;box-shadow:0 4px 10px rgba(0,0,0,0.05);margin-bottom:15px;} .btn{padding:10px 15px;border-radius:8px;border:none;cursor:pointer;color:#fff;text-decoration:none;display:inline-block;font-weight:bold;transition:0.2s;margin:2px;font-size:16px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;} .btn-sm{padding:6px 12px;font-size:14px;} .btn:active{transform:scale(0.95);} .btn-primary{background:linear-gradient(135deg,#6c5ce7,#a29bfe);} .btn-danger{background:linear-gradient(135deg,#e17055,#fab1a0);} .btn-success{background:linear-gradient(135deg,#00b894,#55efc4);} .btn-dark{background:#636e72;} .btn-warning{background:linear-gradient(135deg,#f39c12,#f1c40f);color:#333;} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px;} .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;} .exp-bar-container{width:100%;background-color:#dfe6e9;border-radius:10px;overflow:hidden;height:15px;margin-top:5px;} .exp-bar-fill{height:100%;background:linear-gradient(90deg,#f1c40f,#f39c12);width:0%;transition:width 0.5s;} .media-container{width:100%;max-width:250px;aspect-ratio:1/1;margin:0 auto;position:relative;border-radius:20px;overflow:hidden;border:4px solid #dfe6e9;background:#000;cursor:pointer;transition:transform 0.4s;box-shadow:0 10px 20px rgba(0,0,0,0.1);} .media-container:active{transform:scale(1.05);border-color:gold;} .media-container img,.media-container video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;pointer-events:none;} table{width:100%;border-collapse:collapse;font-size:14px;} td,th{padding:10px;border-bottom:1px solid #eee;text-align:left;} input,select,textarea{padding:10px;border:1px solid #ddd;border-radius:8px;box-sizing:border-box;font-size:16px!important;touch-action:manipulation;outline:none;} input:focus,select:focus,textarea:focus{border-color:#6c5ce7;} .battle-flex{display:flex;justify-content:space-around;align-items:flex-end;padding:20px 0;} @media(max-width:500px){.battle-flex{flex-direction:column;align-items:center;gap:15px;}.battle-flex>div{width:100%!important;}#vs-icon{transform:rotate(90deg);margin:5px 0;}} #game-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:999;justify-content:center;align-items:center;flex-direction:column;color:#fff;} .game-box{background:rgba(255,255,255,0.1);border-radius:20px;padding:20px;border:2px solid rgba(255,255,255,0.3);width:90%;max-width:400px;min-height:350px;position:relative;overflow:hidden;text-align:center;touch-action:manipulation;} #timer-display{font-size:30px;font-weight:bold;color:#ff7675;margin-bottom:10px;} #attack-video{width:90%;max-width:400px;border-radius:15px;border:5px solid gold;display:none;margin-top:20px;} .floating-dmg{position:absolute;font-size:30px;font-weight:900;text-shadow:2px 2px 0 #fff,-2px -2px 0 #fff;animation:floatUp 1.2s forwards;z-index:50;pointer-events:none;white-space:nowrap;} @keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-60px) scale(1.5);}} .shake-anim{animation:shake 0.4s;border-color:red!important;} @keyframes shake{0%,100%{transform:translateX(0);}25%,75%{transform:translateX(-10px);}50%{transform:translateX(10px);}} .dash-right{animation:dR 0.4s;border-color:gold!important;} .dash-left{animation:dL 0.4s;border-color:gold!important;} @keyframes dR{0%,100%{transform:translateX(0);}50%{transform:translateX(60px) scale(1.1);}} @keyframes dL{0%,100%{transform:translateX(0);}50%{transform:translateX(-60px) scale(1.1);}} #result-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:1000;justify-content:center;align-items:center;flex-direction:column;} .overlay-text{font-size:80px;font-weight:900;text-shadow:0 0 40px rgba(255,255,255,0.8);animation:zoomIn 0.8s forwards;text-align:center;} @keyframes zoomIn{0%{transform:scale(0.1);opacity:0;}100%{transform:scale(1);opacity:1;}}