.background-container{position:relative;background-image:url('../themes/xwm-loldleth/assets/images/bg.jpeg');background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:fixed;z-index:1;padding:15px;min-height:100vh}
.background-overlay{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8);z-index:2}
#layout-header,
#layout-content,
#layout-footer{position:relative;z-index:3;margin-top:10px}
.container{margin-bottom:30px}
@media (max-width:575px){.container{padding:0}}
button{background:transparent;border:0;width:fit-content;margin:0;padding:0 10px}
.d-none{display:none}
a{background-color:transparent}
#game-header{display:flex;justify-content:center;align-items:center;margin-bottom:5px;align-items:flex-center}
#game-header #logo{display:block;margin-right:-30px}
#game-header #language{padding:0;margin:0;opacity:0.6;margin-right:-30px}
#game-header #language:hover{opacity:1}
@media (max-width:768px){#game-header{flex-direction:column}#game-header #logo{margin-right:0;margin-bottom:5px}#game-header #language{margin-right:0}}
@media (max-width:480px){#game-header{margin-bottom:10px}#game-header #logo{margin-bottom:5px}#game-header #language{width:80%;margin-bottom:10px}}
#buttons{display:flex;justify-content:center;align-items:center;margin-top:10px}
#clues{display:flex;justify-content:center;align-items:start}
#buttons button{opacity:0.6}
#buttons button:hover{opacity:1}
#buttons #streakBtn{cursor:default;opacity:1;position:relative;margin:0 5px 0 0}
#buttons #streakBtn #streak{position:absolute;top:56%;left:55%;transform:translate(-45%,-44%);color:#000;font-size:1.1rem;font-weight:600}
#clues .locked{cursor:not-allowed}
#clues .unlocked{cursor:pointer}
#clues .unlocked .clue-text{color:#fff;cursor:pointer}
#clues .clue-text{font-size:.6rem;color:#a7a7a7;cursor:default;margin-top:5px}
#clues .clue-text span{display:block}
#info span{font-weight:600;color:#fff}
#info,
#winner,
#color-indicators,
#past-champion{display:flex;flex-direction:column;row-gap:1rem;border:2px solid #ceb95d;border-radius:8px;background:#110704;font-size:1rem;padding:0.8rem 0.5rem;vertical-align:center;align-content:center;justify-self:center;align-items:center;text-align:center;justify-content:center;width:fit-content;max-width:425px;margin:20px auto 0;min-width:425px}
@media (max-width:575px){#info,#winner,#color-indicators,#past-champion{min-width:100%}}
#info h1,
#winner h1,
#color-indicators h1,
#past-champion h1{font-size:1rem;margin:0}
#info p,
#winner p,
#color-indicators p,
#past-champion p{margin:0;font-size:0.9rem;line-height:1.4rem}
#past-champion{gap:5px}
#color-indicators .indicators{display:flex;justify-content:center;align-items:center;gap:30px}
#color-indicators .indicators .green,
#color-indicators .indicators .red,
#color-indicators .indicators .yellow{text-align:center}
#color-indicators .indicators .green__box,
#color-indicators .indicators .red__box,
#color-indicators .indicators .yellow__box{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin:0 auto}
#color-indicators .indicators .green__box{background:#21C12E}
#color-indicators .indicators .red__box{background:#BF120F}
#color-indicators .indicators .yellow__box{background:#FC970F}
#color-indicators .indicators span{font-size:16px}
#winner{background:linear-gradient(#0d4d27,#110704);border:2px solid #69ffa5;box-shadow:inset 0 0 6px #000;padding:1rem 3rem}
#winner h3,
#winner p{color:#fff;margin:0}
#winner h3{font-size:28px}
#winner__header{display:flex;justify-content:center;align-items:center;gap:15px}
#winner__header img{max-width:70px;border:2px solid #fff;border-radius:5px;overflow:hidden}
#winner__header p{text-align:center;font-size:16px;margin:0}
#winner__header span{display:block;font-size:28px}
#guess{margin-top:15px;position:relative}
#guess form{margin-bottom:5px}
.guess-input{display:flex;justify-content:center;align-items:center;gap:5px;max-width:425px;margin:0 auto}
.guess-input #guess-input{margin-bottom:0;border:2px solid #978a46;background:#110704;color:#ceb95d}
.guess-input #guess-input::-webkit-input-placeholder{color:#ceb95d}
.guess-input #guess-button{border:2px solid #ceb95d;border-radius:8px;background:#110704;padding:15px 10px}
.custom_dropdown{display:none;background-color:#1D2328;margin:0 auto;border-radius:4px;max-height:400px;overflow-y:scroll;position:absolute;width:100%;max-width:425px;z-index:9998;top:105%;left:0;right:0;z-index:9999;position:relative}
@media (max-width:575px){.custom_dropdown{min-width:100%}}
.custom_dropdown ul{padding:10px 5px;margin-bottom:0;z-index:9999}
.custom_dropdown ul li{list-style:none;width:100%;text-align:left;cursor:pointer}
.custom_dropdown ul li:hover{background-color:#111518}
.custom_dropdown ul li img{max-height:40px;margin-right:10px}
.custom_dropdown ul li:last-child{margin-bottom:0}
.custom_dropdown .no-result{margin-left:10px}
#results-container{overflow-x:auto;overflow-y:hidden;margin:0 auto;width:fit-content}
@media (max-width:991px){#results-container{width:100%;display:flex;flex-direction:column;align-items:center}}
@media (max-width:755px){#results-container{align-items:start}}
#results-header{margin-top:20px}
.guess{display:flex;gap:6px;text-align:center;margin-bottom:10px}
.guess .box .fields{color:#fff;font-style:normal;font-size:13px;border-bottom:0;line-height:16px;display:block;font-weight:600;width:85px}
.guess .box .hr{border-top:3px solid #fff;margin-top:24px;margin-bottom:0}
.guess .box .img,
.guess .box .color{border:1px solid rgba(255,255,255,0.59);border-radius:0;width:85px;height:85px}
.guess .box button{cursor:default;padding:0}
.guess .box button:hover,
.guess .box button:focus,
.guess .box button:active{border:0;box-shadow:none;outline:0}
.guess .box .color{padding:5px;font-size:14px;color:#fff;font-weight:600;text-shadow:0 0 3px #000;box-shadow:inset 0 0 6px #000;display:flex;justify-content:center;align-items:center;word-break:break-word}
.guess .box .color:hover{filter:brightness(1.18)}
.guess .box .color.red{background-image:url('../themes/xwm-loldleth/assets/images/red-pattern.png');background-size:100% 100%}
.guess .box .color.green{background-image:url('../themes/xwm-loldleth/assets/images/green-pattern.png');background-size:100% 100%}
.guess .box .color.yellow{background-image:url('../themes/xwm-loldleth/assets/images/yellow-pattern.png');background-size:100% 100%}
.guess .box .color.arrow{display:flex;justify-content:center;align-items:center;flex-direction:column}
.guess .box .color.arrow span{white-space:nowrap}
.guess .box .color.arrow img{max-height:30px}
.guess .box:last-child .hr,
.guess .box:nth-child(6) .hr{margin-top:8px}
.info-modal{background-color:#110704;border:2px solid #ceb95d;border-radius:8px;padding:1rem 1.5rem;max-width:800px;margin:30px auto 0}
.info-modal .text-red{color:red}
.info-modal .text-orange{color:orange}
.info-modal .text-green{color:green}
.info-modal .text-mint{color:orange}
.info-modal h4,
.info-modal .h4{color:#ceb95d}
.info-modal h3,
.info-modal h4,
.info-modal p{margin-bottom:10px}
[data-tooltip]::before,
[data-tooltip]::after{z-index:9998}
#stats-modal article{width:100%;max-width:800px}
#stats-modal article header h2{margin:0}
#stats-modal article section{display:flex;justify-content:space-around;text-align:center;margin-top:30px}
#stats-modal article section h3{font-size:16px;margin:0}
#stats-modal article section span{font-size:42px}
#loldle-debug{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:9999}
#loldle-debug .buttons{display:flex;gap:5px;align-items:center;margin-top:5px}
#loldle-debug .buttons button{background:transparent;border:1px solid yellow;padding:2px 6px;cursor:pointer;color:yellow}
#loldle-debug .buttons button:hover{background:yellow;color:#110704}
#loldle-debug table{border:1px solid #fff;border-collapse:collapse;margin:0}
#loldle-debug td:first-child{border-right:1px solid #fff}
#loldle-debug tr{border:0;border:1px solid #fff}
#loldle-debug td{margin:0;font-size:0.8rem;font-weight:600;color:#fff;border:0}
#loldle-debug p{margin:0;font-size:0.8rem;font-weight:600;color:yellow}
.home{max-width:425px;margin:0 auto;text-align:center}
.home h5{font-size:1.5rem;font-weight:700;color:#d4af37;text-shadow:0 0 10px rgba(0,0,0,0.7);margin-bottom:0}
.home .gameModeBtnsGroup{margin-bottom:50px;background:linear-gradient(135deg,rgba(28,28,28,0.8) 0%,rgba(39,39,39,0.8) 100%);border:1px solid #d4af37;border-radius:10px;padding:20px;box-shadow:0 0 10px rgba(0,0,0,0.5);position:relative}
.home .gameModeBtns{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px}
.home .gameModeBtn{padding:15px 25px;font-size:16px;font-weight:700;color:#fff;text-decoration:none;position:relative;opacity:1 !important;margin:0 5px;background-color:#110704;border:2px solid #d4af37;border-radius:10px;display:block;max-width:250px;text-align:center;margin:0 auto;transition:all 0.3s ease;box-shadow:0 0 10px rgba(0,0,0,0.5)}
.home .gameModeBtn:hover{background-color:#d4af37;color:#110704;transform:scale(1.05);box-shadow:0 0 15px rgba(0,0,0,0.7)}
.newTag{position:absolute;top:-7px;right:-7px;background-color:#BF120F;border-radius:50%;width:35px;height:35px;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:600;color:#fff}
.newTag__inline{position:relative;top:0;right:0;width:22px;height:22px}
.inGameModeBtn{background-color:#110704;border:2px solid #ceb95d;border-radius:8px;padding:8px 12px;font-size:16px;font-weight:600;color:#fff;text-decoration:none;position:relative;text-align:center;width:min-content}
.dropdown{margin-bottom:0}
.dropdown summary{background-color:#110704 !important;border:2px solid #ceb95d !important;border-radius:8px !important;padding:8px 12px !important;font-size:16px !important;font-weight:600 !important;color:#fff !important;text-decoration:none !important;position:relative !important;text-align:center !important;width:min-content !important;display:flex !important;align-items:center !important;height:100% !important}
.dropdown summary::after{height:1rem !important}
.dropdown ul{background-color:#110704 !important;border:2px solid #ceb95d !important;border-radius:8px !important;font-size:16px !important}
.dropdown ul li{width:100% !important;padding:0 !important}
.dropdown ul li a{width:100% !important;display:flex !important;gap:10px !important;overflow:initial !important;margin:0 !important}
.dropdown ul li a:hover,
.dropdown ul li a.active{background-color:#ceb95d !important;color:#110704 !important}
.footer{text-align:center;font-size:16px;color:#fff;font-weight:600}
.game-footer{margin-top:100px}
#resetBtn{background-color:#110704;border:2px solid #ceb95d;border-radius:8px;padding:8px 12px;font-size:16px;font-weight:600;color:#fff;text-decoration:none;position:relative;opacity:1 !important}
#resetBtn:hover{background-color:#ceb95d;color:#110704}
#statsBtn{padding:0}
#statsBtn img{width:30px;height:30px;min-width:20px;min-height:20px}
@media (max-width:600px){#statsBtn img{width:25px;height:25px}}
@media (max-width:400px){#statsBtn img{width:20px;height:20px}}
.example{overflow-x:auto;overflow-y:hidden}
.last-language-text{margin-top:60px !important}
.main-container{display:flex;justify-content:center}
@media only screen and (max-width:1550px){.main-container{flex-direction:column}.main-container .ad-container{width:100%}}
.main-container .game-container{min-width:820px}
@media only screen and (max-width:1550px){.main-container .game-container{width:100%;min-width:auto;margin:0 auto}}
.gameGameModesGroup{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px;width:100%;flex-wrap:wrap;white-space:nowrap}
#info h3{margin-bottom:10px}
#info h4{margin:0;font-weight:500}
#info hr{margin:0;margin-top:5px;width:100%;border-top:1px solid #ceb95d}
#info .toggles{display:flex;align-items:center;justify-content:space-between;width:100%}
#info #abilityClue img{border:1px solid #ceb95d;border-radius:4px;width:80px}
#results{width:100%;margin-top:10px}
#results-container{width:100%}
.guess{border:1px solid #ceb95d;width:100% !important;max-width:425px !important;margin:0 auto;border-radius:8px;margin-bottom:10px;padding:10px}
.guess.red{background-color:#e63946}
.guess.green{background-color:#2a9d60}
.guess .box.box-img{margin:0 auto}
.guess .box .img{max-width:60px;height:auto;margin:0 auto 5px}
.guess .box__name{font-size:1rem;font-weight:bold;margin:0;color:#fff}
.grey-filter{filter:grayscale(100%)}
.random-rotation-0{transform:rotate(0deg)}
.random-rotation-90{transform:rotate(90deg)}
.random-rotation-180{transform:rotate(180deg)}
.random-rotation-270{transform:rotate(270deg)}
.random-rotation{transform:rotate(45deg)}