html,body{margin:0;padding:0;height:100%}.board-container{background-image:url(bgmap1.jpeg);background-size:cover;background-position:center;height:100vh;width:100vw}.opponent-joining{background-image:url(bgmap1.jpeg);background-size:cover;background-position:center;height:100vh;width:100vw}.arena-container{background-image:url(lobby.jpeg);background-size:cover;background-repeat:no-repeat;background-position:center;height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;margin:0}.htp-container{display:flex;flex-direction:column;align-items:center;height:100vh;width:100vw;overflow:hidden;padding:20px;box-sizing:border-box}.htp-title{font-size:2.5rem;margin-bottom:20px}.htp-sections{flex:1;width:90%;max-width:800px;display:flex;flex-direction:column;gap:40px}.htp-section{display:flex;flex-direction:column;gap:10px}.htp-section-title{font-size:1.5rem;font-weight:700}.htp-troops-list{padding-left:20px;line-height:1.6}.htp-button{margin-top:20px;padding:10px 20px;font-size:1rem;cursor:pointer;border:none;background-color:#4caf50;color:#fff;border-radius:5px}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000}.overlay-text-waiting{color:#fff;font-size:4rem;margin:10px 0;text-align:center}.overlay-text-win{color:#fff;font-size:4rem;margin:10px 0;text-align:center;text-shadow:.5px .5px 0px #ffffff,-.5px -.5px 0px #ffffff}.room-code{font-weight:700;color:orange}.overlay-text{color:#fff;font-size:24px;margin-bottom:20px}.overlay-button{padding:10px 20px;font-size:16px;background-color:red;color:#fff;border:none;border-radius:5px;cursor:pointer}.overlay-button:hover{background-color:#c00}.overlay-message{color:#fff;margin-top:10px;font-size:18px}.container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0%}.board{position:relative;width:480px;height:480px}.circle{width:40px;height:40px;border-radius:50%;background-color:#ddd;border:2px solid #333;position:absolute;cursor:pointer;transition:background-color .3s}.circle.clicked{background-color:#3498db}.line{position:absolute;background-color:#333;height:2px;transform-origin:top left}.medievalsharp-regular{font-family:MedievalSharp,cursive;font-weight:400;font-style:normal}.medievalsharp-bold{font-family:MedievalSharp,cursive;font-weight:600;font-style:normal}.merienda-regular{font-family:Merienda,serif;font-optical-sizing:auto;font-weight:400;font-style:normal}.board-container{display:flex;flex-direction:row;height:100vh}.board-left-panel{width:40vw;display:flex;flex-direction:column;justify-content:center;align-items:center}.board-left-panel-margin{margin-bottom:40px}.board-main-content{display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:100%;width:100%;gap:2%}.board-player-row{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px}.board-piece-container{cursor:pointer;position:relative;margin-bottom:20px}.board-heal-button{position:absolute;top:-25px;left:50%;transform:translate(-50%);background-color:green;color:#fff;border:none;border-radius:4px;padding:4px 8px;cursor:pointer}.board-piece-row{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:10px;margin-bottom:10px}.board-right-container{width:60vw;display:flex;justify-content:center;align-items:center}.points-point-container{position:absolute;display:flex;justify-content:center;align-items:center;z-index:2;cursor:pointer}.glowing{animation:pulseGlow .1s}@keyframes pulseGlow{0%{box-shadow:0 0 10px 5px}50%{box-shadow:0 0 25px 15px}to{box-shadow:0 0 10px 5px}}.points-point-outer-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.points-point-inner-circle{position:absolute;width:100%;height:100%;opacity:.5;border-radius:50%}.points-piece-image{width:80%;height:80%;z-index:1;border-radius:50%}.point-container{transition:box-shadow .3s ease-in-out;border-radius:50%;display:flex;justify-content:center;align-items:center;position:absolute}.piececard-container{width:180px;height:350px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;border-radius:10px;padding:10px;box-sizing:border-box;color:#fff}.piececard-image-container{width:100%;height:100%;margin-bottom:5px;display:flex;justify-content:center;align-items:center;border-radius:5px;overflow:hidden}.piececard-image{width:100%;height:100%;object-fit:cover}.piececard-stats-container{background-color:#dcdcdc;width:100%;padding:5px;border-radius:5px;color:#000;text-align:center}.player-turn,.winner-is{font-family:MedievalSharp,cursive;font-weight:600;font-style:normal;font-size:4rem;text-align:center;margin:0;padding:20px;text-shadow:1px 1px 0px black,-1px -1px 0px black,1px -1px 0px black,-1px 1px 0px black}.arena-container{text-align:center;color:#000}.arena-title{font-size:10rem;font-weight:700;margin-bottom:30px;color:#ffd000;text-shadow:5px 5px 0px #8b4513,-5px -5px 0px #8b4513}.arena-button{padding:10px 20px;margin-top:20px;font-size:1.2rem;color:#fff;background-color:#0c9400;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.arena-button:hover{background-color:#4682b4}.room-input-container{margin-top:20px}.room-input{padding:10px;font-size:1rem;border:2px solid #000000;border-radius:5px;outline:none;width:200px;transition:border-color .3s ease}.room-input:focus{border-color:#000}.error-text{color:red;margin-top:15px;font-weight:700;font-size:1.5rem;background-color:#b5b5ff}.howtoplay-container{width:100%;height:100vh;background-image:url(./lobby.jpeg);background-size:cover;background-position:center;display:flex;justify-content:center;align-items:center}.howtoplay-overlay{width:80%;max-height:90vh;overflow-y:auto;background-color:#000c;border-radius:10px;padding:20px;box-shadow:0 4px 10px #0000004d;color:#fff;font-family:Merienda,sans-serif}.howtoplay-title{text-align:center;font-size:2rem;margin-bottom:20px;font-family:MedievalSharp,sans-serif}.howtoplay-content{margin-bottom:20px}.howtoplay-section{display:flex;align-items:center;gap:20px;margin-bottom:20px}.howtoplay-section.howtoplay-reverse{flex-direction:row-reverse}.howtoplay-text{flex:1}.howtoplay-image{flex:1;max-width:300px;border-radius:10px;box-shadow:0 4px 8px #00000080}.howtoplay-button{display:block;margin:20px auto;padding:10px 20px;font-size:1rem;cursor:pointer;border-radius:5px;background-color:#555;color:#fff;border:none;font-family:Merienda,sans-serif}.forfeit-button{background-color:red;color:#fff;font-size:2rem;display:flex;justify-content:center;align-items:center;padding:10px 20px;border:none;border-radius:5px;margin-top:20px;align-self:center}.forfeit-button:hover{background-color:#700000;cursor:pointer}