*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;line-height:1.6;color:#333;background-color:#f9f9f9;padding:20px}button{cursor:pointer;font-family:inherit}button:focus{outline:none}#app{width:100%;max-width:1200px;margin:0 auto}@media (max-width: 768px){body{padding:10px}}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.health-bar-container{margin:10px 0;width:100%;max-width:300px}.health-bar-label{font-weight:700;margin-bottom:5px;text-align:center}.health-bar{height:20px;width:100%;background-color:#f0f0f0;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 5px #0003}.health-bar-fill{height:100%;background:linear-gradient(to right,red,#ff5e3a);transition:width .5s ease-in-out;border-radius:10px}.health-text{text-align:center;margin-top:5px;font-size:14px}.element-button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;border-radius:10px;border:2px solid #ccc;background-color:#f9f9f9;cursor:pointer;transition:all .2s ease;width:90px;height:90px}.element-button:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0000001a}.element-button.selected{border-color:#4a90e2;background-color:#e6f2ff;box-shadow:0 0 10px #4a90e280}.element-emoji{font-size:30px;margin-bottom:5px}.element-name{font-size:12px;font-weight:700;text-transform:uppercase}.result-display{margin:20px 0;padding:20px;border-radius:10px;box-shadow:0 5px 15px #0000001a;animation:fadeIn .5s ease-in-out;width:100%;max-width:500px}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.result-display.win{background-color:#4caf5033;border:1px solid #4caf50}.result-display.lose{background-color:#f4433633;border:1px solid #f44336}.result-display.draw{background-color:#ffc10733;border:1px solid #ffc107}.elements-used{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:10px}.player-element,.computer-element{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:8px;background-color:#ffffffb3}.player-element{margin-right:10px}.computer-element{margin-left:10px}.element-emoji{font-size:36px;margin-bottom:5px}.vs{font-weight:700;font-size:20px;color:#666;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#f0f0f0;box-shadow:0 2px 5px #0000001a}.result-text{text-align:center;font-size:24px;font-weight:700;padding:10px;border-radius:5px;margin-top:10px}.reason-text{text-align:center;font-style:italic;font-size:16px;margin-top:15px;padding:10px 15px;background-color:#ffffffb3;border-radius:5px;line-height:1.5;color:#444;border-left:3px solid rgba(0,0,0,.2)}.win .result-text{color:#4caf50;background-color:#4caf501a}.lose .result-text{color:#f44336;background-color:#f443361a}.draw .result-text{color:#ffc107;background-color:#ffc1071a}@media (max-width: 500px){.result-display{padding:15px}.element-emoji{font-size:28px}.result-text{font-size:20px}.reason-text{font-size:14px;padding:8px 12px}}.game-board{display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto}.elements-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px;width:100%}@media (max-width: 600px){.elements-grid{grid-template-columns:repeat(2,1fr)}}.play-button{padding:12px 25px;background-color:#4a90e2;color:#fff;border:none;border-radius:5px;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .3s ease;margin:20px 0}.play-button:hover{background-color:#357ab8}.play-button:disabled{background-color:#ccc;cursor:not-allowed}.game-container{max-width:800px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}h1{text-align:center;margin-bottom:30px;color:#333;font-size:36px}.health-bars{display:flex;justify-content:space-between;margin-bottom:30px;width:100%}.health-bars>div{flex:1;margin:0 10px}.game-over{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;border-radius:10px;background-color:#0000000d;margin:20px 0;animation:fadeIn .8s ease-in-out}.game-over h2{font-size:28px;margin-bottom:20px;text-align:center}.restart-button{padding:12px 25px;background-color:#4a90e2;color:#fff;border:none;border-radius:5px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .3s ease,background-color .3s ease}.restart-button:hover{background-color:#357ab8;transform:scale(1.05)}.rules-button{padding:12px 25px;background-color:#63486a;color:#fff;border:none;border-radius:5px;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .3s ease;margin:20px auto;display:block}.rules-container{max-width:800px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.6;color:#333;background-color:#f9f9f9;border-radius:8px;box-shadow:0 2px 10px #0000001a}.rules-container h1{text-align:center;font-size:2.5em;color:#2c3e50;margin-bottom:20px;border-bottom:2px solid #eaecef;padding-bottom:10px}.rules-section{margin-bottom:30px}.rules-section h2{font-size:1.8em;color:#2c3e50;border-bottom:1px solid #eaecef;padding-bottom:8px;margin-bottom:16px}.element-table-container{overflow-x:auto;margin:20px 0}.element-table{width:100%;border-collapse:collapse;border:1px solid #ddd}.element-table th,.element-table td{padding:12px;border:1px solid #ddd;text-align:left}.element-table th{background-color:#f0f4f8;font-weight:700}.element-table tr:nth-child(2n){background-color:#f8f9fa}.element-table tr:hover{background-color:#f0f0f0}.play-steps,.strategies{padding-left:20px}.play-steps li,.strategies li{margin-bottom:10px}.play-steps ul{margin-top:10px;padding-left:20px}@media (max-width: 768px){.rules-container{padding:15px}.element-table th,.element-table td{padding:8px;font-size:.9em}.rules-container h1{font-size:2em}.rules-section h2{font-size:1.5em}}