.bodycontentholder, .headercontentholder {
    width: 1000px;
}
h1 {    font-size:25px; font-weight:700;}
h2 {    font-size:25px; font-weight:700;}

.puzzlebutton { font-family: 'Inter',sans-serif; cursor: pointer; color:white; text-transform: uppercase; font-weight: 700; font-size: 14px; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-sizing: border-box; text-align: center;}
.puzzlebutton:link, .puzzlebutton:visited { color:white; background-color: #8A67C8;}

.puzzletitlecirclegrid {    display: grid;    grid-template-columns: repeat(auto-fit, 100px);    gap: 1.5rem;    justify-content: left;}

.puzzletitlegrid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-start;}
.puzzletileholder { border-radius: 12px; overflow: hidden; background-color: #FAF7F2; color: #333; padding: 20px; box-sizing: border-box; width: calc((100% - 2 * 1.5rem) / 3); opacity: 1; transform: translateY(0); transition: transform 0.25s ease, opacity 0.25s ease; display: block;}
.puzzletileholder.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; display: none;}
.puzzledetailholder { display: inline-block; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; color: #333; width: 100%; box-sizing: border-box; border-top: 1px #D2CBCB solid; padding:20px 0px 0px 0px;}

.puzzletileholderplus { width:120px; height:150px; margin-right:10px; text-decoration: none; text-align:center;}
.puzzletile-container {    display: flex;    justify-content: center;}
.puzzletile { width: 80px; height: 80px; flex: 0 0 80px; border-radius: 8px;}
.puzzletileinfo{ flex: 1; }
.puzzletilecontent {    display: block;    text-align: center;     margin-top: 8px;}
.puzzletileplus { width: 100px; height: 100px; border-radius: 50%; position: relative; padding: 4px; background: linear-gradient(90deg, #A267E7, #F197FF); margin-left:3px;}
.puzzletileplusmore { width: 30px; height: 30px; border-radius: 50%; position: relative; margin-left: calc(40% - 15px); margin-top:37px; border: 2px solid #413C74; line-height: 26px; font-size: 24px; font-weight:600; color: #D6A7F9;}
.puzzletileimg { width: 100%; height: 100%; object-fit: cover;}
.puzzletileplusimg { width: calc(100% - 10px); height: calc(100% - 10px); object-fit: cover; display: block; border-radius: 50%; border: 5px #202d3c solid;}
.puzzleheaderbanner { background-color: #8A67C8; width:100%; height:41px; text-align:center; font-size:15px; color:white; line-height:45px; position:fixed; z-index:99;}
.plusstreakbox{background-color:#3D3D47; color:#D1D1D6; position:relative; top:4px; font-size:13px; font-weight:500; height:32px; line-height:32px; border-radius:20px; padding:0px 15px; width:auto; margin-right:20px; float:right;}

.headercontentholder{ box-sizing:border-box; padding: 14px 0px 0 0px; height: 66px;}
.header {    height: 66px; border-top:4px solid #8A67C8;}
.cartholder {  width: 400px;}
.plusflame-img{height:13px;}
.pluscomplete{background-color:#3D3D49; width:25px; height:25px; border:1px solid #44546E; border-radius:50%; position:absolute; bottom:0px; right:5px; padding:3px; box-sizing:border-box;}
.pluscheck-icon{width:100%;}

.puzzletoptxtlink { background-color: transparent; border: none; color: white; font-family: 'Inter',arial,sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;}
.puzzletopbtn { width: 100px; border-radius: 5px; border: 3px #8A67C8 solid; height: 32px; line-height: 32px; color: white; background-color: #8A67C8; text-align: center; text-decoration: none; font-size: 15px; font-weight: 700; float: right; margin-left: 15px; font-family: 'Inter',arial,sans-serif; cursor: pointer;}
.puzzletopbtnasp {    height:38px;    width:200px;    text-transform:uppercase;}
.puzzletopbtnhref {    height:32px;    width:200px;    text-transform:uppercase;}
.puzzletopbtnwhite {    color: #8A67C8;    background-color: white;}
.puzsettings { float: right; margin-left: 15px; margin-top: 6px;}
.puzexit { float: right; margin-left: 15px; margin-top: 6px;}

.puzzleplaybtn { width: 100%; border-radius: 16px; border: 1px #CCCCCC solid; height: 32px; line-height: 32px; color: black; background-color: white; text-align: center; text-decoration: none; font-size: 15px; font-weight: 500; float: right; margin-left: 15px;}
.calplaybtn { display: block; width: 100%; border-radius: 10px; border: none; height: 46px; line-height: 46px; color: white; text-align: center; text-decoration: none; background-color: #8A67C8; font-size: 17px; font-weight: 700; position: relative; overflow: hidden; cursor: pointer; z-index: 0; font-family:Inter, Arial;}
.calplaybtn.shimmerplaybtn::after { content: ""; position: absolute; top: 0; left: -50%; width: 90%; height: 100%; background: linear-gradient( 120deg, #8A67C8 0%, #B491E5 50%, #8A67C8 100% ); animation: shimmerplay 0.6s 1 forwards; pointer-events: none; z-index: -1; }
.calplaybtn.shimmerviewbtn::after { content: ""; position: absolute; top: 0; left: -50%; width: 90%; height: 100%; background: linear-gradient( 120deg, #ffffff 0%, #e5d6ff 50%, #ffffff 100% ); animation: shimmerplay 0.6s 1 forwards; pointer-events: none; z-index: -1; }
.calplaybtn.shimmerresumebtn::after { content: ""; position: absolute; top: 0; left: -50%; width: 90%; height: 100%; background: linear-gradient( 120deg, #ffffff 0%, #dde7ff 50%, #ffffff 100% ); animation: shimmerplay 0.6s 1 forwards; pointer-events: none; z-index: -1; }

.popup-button{cursor:pointer;}
.btnresume { border: 1px #4F82F8 solid; color: #4F82F8; background-color: white;}
.btncompleted { border: 1px #8A67C8 solid; color: #8A67C8; background-color: white;}
.btnfailed {
    border: 1px #8A67C8 solid;
    color: red;
    background-color: white;
}

@keyframes shimmerplay {
    0% {        left: -50%;    }
    100% {        left: 100%;    }
}

.caltrophy {    width: 20px;    position: absolute;}
.failedimg{height:20px; margin-right:-20px; float:left;}
.headerspacing{margin-bottom:30px;}
.puzzlestats { display: grid; grid-template-columns: auto 90px 30px; align-items: center; gap: 15px; font-size: 14px;}
.puzzlestats > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

.podiumimg { width: 100%; height: auto; display: block; margin-bottom:4px;}
.pstatdate { font-size: 21px; font-weight: 700; color: #454444;}
.pstattime { font-size: 17px; font-weight: 400; color: #454444; text-align:right; line-height:20px; width:90px;}

.pstattime > .has-check { background-color: #8A67C8; box-shadow: 0 0 0 0px #8A67C8; border-radius: 50%; color: #8A67C8; width: 16px; height: 16px; margin-right: 10px; vertical-align: middle; display: inline-block; line-height: 15px; position: relative; bottom: 1px; text-align:center;}
.pstattime > .has-check > .check-icon { width: 10px; height: 10px;}
.pstatimg { cursor:pointer;}
.statstxt{ font-size:19px; font-weight:700; margin-top:60px;}
.mystats { display: grid; grid-template-columns: 30px 90px auto; align-items: center;  gap: 8px;  padding: 15px 15px;}
.staticon { width: 30px; text-align: left;}
.stattext { width: 220px; text-align: left; font-size: 17px; color: #736D6D; font-weight: 400;}
.statinfo { text-align: right; font-size: 17px; color: #736D6D; font-weight: 600;}

#tab3 .main-container{width:400px;}

.calplaybtnpad { padding-top: 15px; padding-bottom: 10px;}

.ptlb_word, .ptlb_number, .ptlb_quick, .ptlb_logic{border-radius:5px; padding:5px 8px; font-size:10px; text-decoration:none; text-transform:uppercase;}
.ptlb_word{background-color:#D6E5FF; color:#1E3A8A;}
.ptlb_number{background-color:#E1F4D8; color:#065F46;}
.ptlb_quick{background-color:#FFF6D5; color:#92400E;}
.ptlb_logic{background-color:#FFE0E9; color:#991B1B;}

.leftcontentholder { display: none;}
.maincontentholder { width: 100%; float: right; border-left: none; padding-left: 0px; min-height: 925px;}

.pluspuzzlelink{font-size:13px; margin-top:10px;}
.puzzletypename {    font-size: 20px;    font-weight: 700;    padding: 20px 0px; display:inline-block;}
.puzzletypedesc {    font-size: 13px;    font-weight: 400;    padding: 0rem 1rem 0rem 1rem;    height: 40px; display:inline-block;}
.puzzlecontainerplus{width:100%; height:calc(100vh - 120px); position:relative; margin-top:30px;}
.puzzleholderplus{width:100%; height:100%; }
.puzzlesavailable {    font-weight: 500;}

.puzzlestatsplus{position:absolute; bottom:0px; left:0px; width:100%; padding:10px; box-sizing:border-box;}
.streakboxflame { width: 18px; height: 22px; padding: 16px 3px 0px 3px; color: white; font-weight: 500; font-size: 13px; background-image: url(https://mcgraphics.blob.core.windows.net/pmimages/puzzles/puzzleflame.png); background-repeat: no-repeat; background-size: 24px; text-align:center;}
.streakboxplus { width: 24px; height: 22px; padding: 35px 10px 10px 10px; float: right; color: white; font-weight: 600; font-size: 18px; background-image: url(https://mcgraphics.blob.core.windows.net/pmimages/puzzles/puzzleflame.png); background-repeat:no-repeat; background-size: 44px; margin-bottom: -20px; margin-right: 15px; text-align:center;}
.puzzlebesttimeplus{padding:5px 10px; background-color:white; border-radius:5px; float:right; color:#8A67C8;}

.streak-box { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;}
.streak-box-pill { position: relative; top:3px; background-color:#F2F2F2; padding:5px 12px; box-sizing:border-box; height: 32px; border-radius:16px; display: flex; align-items: center; justify-content: center;}

.flame-img { width: 100%; height: 100%; object-fit: contain;}
.flame-img-pill { height: 100%; }

.streak-number { position: absolute; font-size: 13px; color: white; top: 27px; transform: translateY(-50%); width: 24px; text-align: center; padding-left: 2px;}
.streak-number-pill { font-size: 13px; font-weight:500; color: white; text-align: left; padding-left: 5px; color:#71625F;}

.streak-box-h1 { position: relative; width: 28px; height: 28px; float: left; margin-left: 10px;}
.streak-number-h1 { position: absolute; font-size: 11px; color: white; top: 18px; transform: translateY(-50%); width: 24px; text-align: center; padding-left: 1px;}

.dropdown2 { border: 1px solid #D1C5C5; height: 42px; line-height: 42px; border-radius: 10px; padding: 0px 15px; font-family: Inter; font-size: 16px;}
.dropdown-content2{top:42px;}
a.golink:link, a.golink:visited {    color: #070707;}
.tab-container { width: 100%; margin-bottom:40px;}
.tab-nav { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0; list-style: none; gap: 5px;}
.tab-nav li {    margin: 0;}
.tab-button, .tab-buttontype { display: block; padding: 12px 20px; background-color: #F2F2F2; border: 1px solid #D6D6D6; border-radius: 10px; cursor: pointer; text-decoration: none; color: #070707; font-weight: 700; transition: all 0.3s ease; position: relative; margin-right: 5px; font-family: Inter; font-size: 16px;}
.tab-buttontype {    min-width:100px;}
.tab-button:hover { background-color: #e9ecef; color: #007bff; cursor: pointer;}
.tab-button.active { background-color: black; color: white; z-index: 1; border: 1px solid black;}
.tab-button-deact { opacity: 0.3; cursor:default; border-radius:4px;}
.tab-button-deact:hover { background-color: #F2F2F2; color: #070707;}
.tab-content-container { min-height: 200px;}
.tab-content { display: none; padding: 40px 0px; animation: fadeIn 0.3s ease-in-out;}
.tab-content.active { display: block;}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-section { width:100%;}
.content-section h2 { margin-top: 0;}
.leaderboard-table { width: 100%; border-collapse: collapse; margin-top: 10px;}

.leaderboard-table th { padding: 10px 12px; border-bottom: 1px solid #ddd;}
.leaderboard-table td { padding: 15px 12px; border-bottom: 1px solid #ddd;}
.leaderboard-table th { font-weight: 700; font-size:17px;}

.lbiconimg{ width:25px;}

.calendar { width: 100%; height: auto; display: flex; flex-direction: column; padding: 10px; background: #fff; border-radius: 4px; box-shadow: 0 0 8px rgba(0,0,0,0.1); box-sizing: border-box;}
.calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 10px;}
.cal-month-dropdown, .cal-year-dropdown { font-family:'Inter'; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; background: white; font-size: 18px; font-weight:600; cursor: pointer; min-width: 200px;}
.cal-month-dropdown:focus, .cal-year-dropdown:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);}
.calheadclear { box-shadow: none; padding: 0px;}
.calendar-header button { display: flex; justify-content: center; align-items: unset; border: none; border-radius: 50%; background: #fff; cursor: pointer; width: 40px; height: 40px; box-shadow: 0 0 4px rgba(0,0,0,0.2); font-size:30px; font-weight:400; text-align:center;}

.days { display: grid; grid-template-columns: repeat(7,1fr);}
.day { text-align: center; padding: 5px; color: #999FA6; font-weight: 500;}
.dates { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;}
.date { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5px; margin: auto; cursor: pointer; font-weight: 600; border-radius: 50%; width: 30px; height: 30px; transition: 0.2s; color: black;}
.date i { position: absolute; font-size: 0.8rem; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;}
.date:hover { background-color: #8A67C8; border-radius: 50%; color: #8A67C8; width: 30px; height: 30px; color:white;}
.date.active { background-color: #8A67C8; box-shadow: 0 0 0 3px black; border-radius: 50%; color: #8A67C8; border: 4px white solid; width: 22px; height: 22px; color: white;}
.date.inactive { color: #d2d2d2;}
.date.inactive:hover { color: #fff;}

.trophy-icon { color: white; font-size: 1.6rem !important;}
.check-icon { color: white; font-size: 1.6rem !important;}
.started-icon { color: orange; font-size: 1.6rem !important;}
.date.has-trophy { background-color: #F5C72F; box-shadow: 0 0 0 3px #F5C72F; border-radius: 50%; color: #F5C72F; border: 4px white solid; width: 22px; height: 22px;}
.date.has-check { background-color: #8A67C8; box-shadow: 0 0 0 3px #8A67C8; border-radius: 50%; color: #8A67C8; border: 4px white solid; width: 22px; height: 22px;}
.date.unavailable { color: #d2d2d2; width: 0px; height: 0px; background-color: #d2d2d2; font-size: 1px; margin: 20px; box-shadow: none; border: none;}


/** ADAM STYLING **/


/* Register animatable variable */
@property --progress { syntax: '<percentage>'; inherits: false; initial-value: 40%;}
.date.has-started.active { background: black;}
.date.has-started { --progress: 40%; position: relative; width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(#4F82F8 0% var(--progress), #ECECEC var(--progress) 100%); color: #000; display: flex; align-items: center; justify-content: center; font-weight: bold; z-index: 1; cursor: pointer; transition: --progress 0.4s ease; box-shadow: none; border: none;}

.date.has-started::before { content: ""; position: absolute; inset: 3px; background: white; border-radius: 50%; z-index: -1;}
.date.has-started:hover { --progress: 100%;}
.date.has-trophy.active, .date.has-check.active {    box-shadow: 0 0 0 3px black;}
.date.has-trophy:hover, .date.has-check:hover {    box-shadow: 0 0 0 3px black;}
#puzzleleaderboard {    max-height: 0;    opacity: 0;    transition: max-height 0.4s ease, opacity 0.4s ease;}
#puzzleleaderboard.show { max-height: 800px; opacity: 1;}
.sectionheader{font-size:17px; font-weight:600; color:black;}



.puzsellheaderholder { width: 100%; display: flex; overflow:hidden; justify-content: center; background: linear-gradient(to right, #fff 0%, #fff 50%, #8A67C8 50%, #A57AF3 100%); top: -20px; position: relative; border-bottom: 1px solid #BDBDBD;}

.puzsellheadercontainer { display: flex; max-width: 1000px; width: 100%; min-height: 550px;}
.puzsellheaderleft { flex: 1; padding: 40px 0px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: normal; position: relative;}
.puzsellheaderright { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; position:relative; overflow:hidden;}
.trybtn {  margin-top: 60px;  margin-bottom: 10px;  width: auto;  padding: 0px 70px;}


.puzsellheader{font-size:32px; line-height:45px; font-weight:700; color:#000000;}
.puzsellheader2{font-size:28px; line-height:40px; font-weight:700; color:#000000;}
.puzsellheaderinfo{font-size:15px; line-height:30px; font-weight:400; color:#121C32;}
.puzsellheaderinfo2{font-size:14px; line-height:40px; font-weight:400; color:#808080;}
.puzheaderfoottxt{font-size:10px; line-height:14px; font-weight:400; color:#808080; position:absolute; bottom:0px; padding:0px 40px 15px 0px;}

.crossword-stats { width: 450px; background: #fff; padding: 20px; margin-top: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); font-family: sans-serif;}
.crossword-stats h2 {    font-size: 18px;    margin-bottom: 15px;    font-weight: 600;}
.stats-list { list-style: none; padding: 0; margin: 0;}
.stats-list li { display: flex; align-items: center; padding: 8px 0; font-size: 15px; font-weight: 500; color: #333;}

.stats-list li i { margin-right: 10px; width: 20px; text-align: center;}
.stats-list li span { margin-left: auto; font-weight: 600; color: #555;}

.profile-settings { max-width: 100%; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; font-family: Arial, sans-serif;}
.profile-settings .form-group { margin-bottom: 1rem;}
.profile-settings .form-label { display: block; font-weight: 600; margin-bottom: 0.5rem; color: #333;}
.profile-settings .form-control { width: 100%; padding: 0.5rem; font-size: 1rem; border: 1px solid #ccc; border-radius: 5px;}
.profile-settings .checkbox-group { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem;}
.profile-settings .form-message { display: block; margin-top: 0.5rem; font-weight: bold;}

.main-container { display: flex; align-items: flex-start; gap: 30px; width: 850px;}
.right-section { flex: 1; display: flex; flex-direction: column; gap: 20px;}

.phbackholder{width:60px; height:40px; float:right; display:inline-block; text-align:center; border-right:1px #D2D2D2 solid; font-size:9px; font-weight:500; text-decoration:none; color: #515151;}
.phbackicon{width:24px; height:24px;}
.phbuttonheader{width:60px; height:40px; font-size:9px; font-weight:500; text-decoration:none; color: #515151; background-color:transparent; border:none; cursor:pointer;}
.phicontxt{margin-top:3px;}
.phpuzzleinfo{width:100%;}

@media (max-width: 900px) {
    .main-container { flex-direction: column;    }
    .calendar-section, .right-section { flex: none; width: 100%; }
}






.info-circle { width: 16px; height: 16px; border-radius: 50%; background-color: transparent; color: white; text-align: center; line-height: 16px; font-weight: 600; display: inline-block; text-transform: lowercase; border: 1px #fd510f solid; font-size: 15px; color: #fd510f; margin-left: 10px;}
.puzzlebesttime { font-style: italic;}
.optiondots { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 24px; height: 24px; cursor: pointer; gap: 3px;}
.optiondots::before, .optiondots::after, .optiondots span { content: ""; width: 4px; height: 4px; background-color: #878787; border-radius: 50%; display: block;}
.puzzle-ticker { width: 100%; overflow: hidden; font-size: 0.95rem; color: #333; padding: 0.5rem 0; position: relative; white-space: nowrap;}
.puzzle-ticker-content { display: inline-block; padding-left: 100%; animation: tickerScroll 50s linear infinite;}
.puzzle-ticker-content span { display: inline-block; margin-right: 3rem; font-weight: 500;}

@keyframes tickerScroll {
    from { transform: translateX(0%); }
    to { transform: translateX(-100%); }
}

.puzzle-header-animated { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; background-color: transparent; animation: fadeIn 0.8s ease both;}
.puzzle-thumb-animated { width: 100%; max-width: 180px; height: auto; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); animation: fadeInUp 0.8s ease forwards;}
.puzzle-header-content { max-width: 800px; text-align: center; animation: fadeInUp 1s ease 0.2s forwards; opacity: 0;}
.puzzle-header-title { font-size: 25px; margin-bottom: 20px; font-weight: 700; color: black;}
.puzzle-header-description { font-size: 1.05rem; line-height: 1.6; color: #555;}

.leaderboard { max-width: 500px; margin: 30px auto; border: 1px solid #ccc; border-radius: 10px; font-family: sans-serif; overflow: hidden;}
.leaderboard-title { position: relative; background: #4a90e2; color: white; text-align: center; padding: 20px 15px; font-size: 1.25rem; font-weight: bold; text-transform: uppercase; background-image: url('https://mcgraphics.blob.core.windows.net/pmimages/puzzles/crosswords.jpg'); background-size: cover; background-position: center; z-index: 1;}
.leaderboard-title::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: -1;}
.leaderboard-header, .leaderboard-row {    grid-template-columns: 1fr 2fr 1fr;    padding: 10px 15px;    border-bottom: 1px solid #eee;    align-items: center;    text-align: left;}
.leaderboard-header {    background-color: #f8f8f8;    font-weight: bold;    text-transform: uppercase;}
.leaderboard-row:nth-child(even) {    background-color: #fafafa;}
.leaderboard-row:last-child {    border-bottom: none;}

.rank {    font-weight: bold;    text-align: center;}

.gradient-border { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(45deg, #A267E7, #F197FF); display: flex; align-items: center; justify-content: center; margin-left:calc(50% - 44px); position:relative;}
.gradient-border-complete {    background: linear-gradient(45deg, #B0B0B0, #E0E0E0);}
.gradient-border-started {    background: linear-gradient(45deg, #ffffff 0%, #ffffff 50%, #4A90E2 50%, #4A90E2 100%);}
.inner-circle { width: 72px; height: 72px; border-radius: 50%; background-size: cover; background-position: center; border: 4px solid white;}
.inner-circle-complete {    filter: grayscale(100%);}

.puzzlecircleholder{text-align:center; text-decoration:none; color:black;}
.circlename{font-size:12px; margin-top:10px; font-weight:500;}
.yournametxt{font-weight:800;}


/** PUZZLE HAMBURGER **/

/* Hide the checkbox */
.site-nav__toggle {    display: none;}

/* Hamburger button */
.site-nav__hamburger { cursor: pointer; user-select: none; position: relative; width: 28px; height: 40px; display:inline-block;}

/* Keep the icon size */
.site-nav__icon { display: block; width: 28px; height: 2px; background: #333; border-radius: 2px; position: relative; transition: background 0.3s;}
.site-nav__icon::before, .site-nav__icon::after { content: ''; position: absolute; width: 28px; height: 2px; background: #333; border-radius: 2px; left: 0; transition: transform 0.3s, top 0.3s;}
.site-nav__icon::before {    top: 16px;}
.site-nav__icon::after {    top: 8px;}

/* Position label text nicely next to icon */
.site-nav__label { font-weight: 500; font-size: 11px; user-select: none; position: absolute; top: 25px;}

/* Slide-out menu panel (hidden off screen to left) */
.site-nav__panel { position: fixed; top: 0; left: -300px; width: 280px; height: 100vh; background: #fff; box-shadow: 2px 0 8px rgba(0,0,0,0.15); transition: left 0.3s ease; z-index: 999; padding: 20px; box-sizing: border-box;}

/* Close button inside menu */
.site-nav__close { display: inline-block; float: right; font-size: 24px; cursor: pointer; margin-bottom: 20px; user-select: none;}

/* Links container */
.site-nav__links {    display: flex;    flex-direction: column;    gap: 10px;}

/* Individual links */
.site-nav__link { text-decoration: none; color: #333; font-size: 16px; user-select: none;}
.site-nav__link:hover {    color: #A267E7;}

/* When checkbox is checked: show menu panel */
.site-nav__toggle:checked ~ .site-nav__panel {    left: 0;}

/* Animate hamburger icon to X when open */
.site-nav__toggle:checked + .site-nav__hamburger  {    background: transparent;    display:none;}

/** DARK MODE **/

body.dark-theme .modeslider { background-color: #2f2f2f;}
body.dark-theme .site-nav__icon { background: white; }
body.dark-theme .site-nav__icon::before, body.dark-theme .site-nav__icon::after { background: white; }
body.dark-theme .site-nav__panel { background: #202020; color:white; }
body.dark-theme .site-nav__link { color: white; }
body.dark-theme .puzzletileholder { background-color: #202020; color: white; }
body.dark-theme .puzzletopbtnwhite { color: white; background-color: #202020;}
body.dark-theme .gradient-border-started { background: linear-gradient(45deg, black 0%, black 50%, #4A90E2 50%, #4A90E2 100%); }
body.dark-theme .inner-circle { border: 4px solid black; }
body.dark-theme .tab-button.active { background-color: white; color: black; border: 1px solid white; }
body.dark-theme .tab-button, body.dark-theme .tab-buttontype { background-color: #404040; border: 1px solid #404040; color: white; }
body.dark-theme a.golink:link, body.dark-theme a.golink:visited { color: white; }
body.dark-theme .nottxtcol { color: white; }
body.dark-theme .puzsellheader, body.dark-theme .puzsellheaderinfo, body.dark-theme .puzsellfeath1, body.dark-theme .circlename,
body.dark-theme .puzsellfeattxt, body.dark-theme .puzsellheader2, body.dark-theme .sectionheader {    color: white;}
body.dark-theme .puzzleplaybtn { border: 1px #4c4c4c solid; color: white; background-color: #4C4C4C; }
body.dark-theme .puzzle-header-title { color: white; }
body.dark-theme .calendar { background: #202020; }
body.dark-theme .calendar-header { background-color: #121212; }
body.dark-theme .date { color: white; }
body.dark-theme .date.unavailable { background-color: #393939; color:#393939; }
body.dark-theme .date.has-started::before { background: black; }
body.dark-theme .date.has-trophy { border: 4px #202020 solid; color:#F5C72F; }
body.dark-theme .caltrophy { filter:invert(1); }
body.dark-theme .date.has-trophy.active, body.dark-theme .date.has-check.active { box-shadow: 0 0 0 3px #202020; color:#8A67C8; }
body.dark-theme .date.has-trophy:hover, body.dark-theme .date.has-check:hover { box-shadow: 0 0 0 3px #202020; }
body.dark-theme .btnresume { border: 1px white solid; color: black; background-color: white; }
body.dark-theme .calplaybtn { color: black; background-color: white; }
body.dark-theme .calplaybtn.shimmerplaybtn::after { color: black; }
body.dark-theme .calplaybtn.shimmerviewbtn::after { color: black; }
body.dark-theme .calplaybtn.shimmerresumebtn::after { color: black; }
body.dark-theme .pstatdate, body.dark-theme .pstattime { color: white; }
body.dark-theme .pml-sdk .pml-puzzle-root .guesswork-cell.selected { background-color: #4c4c4c;}
body.dark-theme .pml-sdk .pml-puzzle-root .guesswork-cell { border: 2px solid white; color:white;}
body.dark-theme .pml-sdk .popup-background { background-color: #202020; }
body.dark-theme .pml-sdk .puzzle-grid tbody { border: 4px solid white;}
body.dark-theme .pml-sdk .cell { color: #cacaca; }
body.dark-theme .word-list { background-color: #202020; }
body.dark-theme .pml-sdk .puzzle-cc .cell-label { color: #202020; }
body.dark-theme .pml-sdk .letter-view-number { color: #202020; }
body.dark-theme .pml-sdk .puzzle-cc .cell.highlighted { background-color: #6599d5; color: white; }
body.dark-theme .pml-sdk .letter-view-element.selected { background-color: #6599d5; color: white; }
body.dark-theme .pml-sdk .puzzle-cc .cell-content { color: #202020;}
body.dark-theme .pml-sdk .letter-view-value { color: #202020; }
body.dark-theme .pml-sdk .cell-label { color: #848484;}
body.dark-theme .pml-sdk .puzzle-grid.offset-cell-contents .cell-content {color: black;}
body.dark-theme .pml-sdk .puzzle-grid.battleships-grid table.results .cell .cell-content {color: black;}
body.dark-theme .btncompleted { border: 1px #8A67C8 solid; color: white; background-color: #8A67C8;}
body.dark-theme .leaderboard-table { color:#cacaca;}
body.dark-theme .phicontxt{color:#cacaca;}
body.dark-theme .puzzle-subheader {color:#cacaca;}
body.dark-theme .phbackicon {filter: brightness(2);}
body.dark-theme .swiper-pagination-bullet{background-color:white;}
body.dark-theme .tab-button-deact:hover { background-color: #404040;  color: #5F5F5F;  opacity: 1;  padding: 0px;  height: 50px;  top: -4px;  position: relative;}
body.dark-theme .profile-settings { background: #4c4c4c; border: 1px solid black; color:#cacaca;}
body.dark-theme .profile-settings .form-label {  color: #cacaca;}
body.dark-theme .pm-modal { background-color: #202020; color: white;}
body.dark-theme .pm-modal-close { color: white; }
body.dark-theme .pm-modal .profile-settings-logout { border: 1px solid white;color: white;}
body.dark-theme .date.has-check { color:#8A67C8; }



/* Desktop layout */
@media (min-width: 768px) {
    .puzzle-header-animated {
        flex-direction: row;
        text-align: left;
    }

    .puzzle-header-content {
        text-align: left;
        opacity: 0;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (min-width: 1090px) and (max-width: 1470px) {

.puzzletileholder {    width: calc((100% - 2 * 1.5rem) / 3);}
.bodycontentholder, .headercontentholder {    width: 1000px;    margin-left: auto;    margin-right: auto;}
.headercontentholder {    padding: 16px 0px 0 0px;}
.dropdown-content2 {    left: unset;    width: 250px;}

}

@media screen and (min-width: 750px) and (max-width: 1089px) {

.bodycontentholder, .headercontentholder {    width: calc(100% - 40px);    margin-left: 20px;    margin-right: 20px;}
.headercontentholder {    padding: 16px 0px 0 0px;}
.puzzletileholder {    width: calc((100% - 2 * 1.5rem) / 3);}
.puzzletileholderplus { width:120px;}
.puzzletileplus{height: 80px; width:80px;}
.pluscomplete{width:21px; height:21px;}
.cartholder{margin-right: 0px;}

.puzsellheaderleft {padding: 20px;}


.puzsellheader{font-size:24px; line-height:32px;}
.puzsellheader2{font-size:28px; line-height:34px;}
.puzsellheaderinfo{font-size:13px; line-height:20px; font-weight:400; color:#121C32;}
.puzsellheaderinfo2{font-size:13px; line-height:40px; font-weight:400; color:#808080;}
.puzheaderfoottxt{font-size:10px; line-height:14px; font-weight:400; color:#808080; position:absolute; bottom:0px; padding:0px 40px 15px 0px;}

}

@media screen and (max-width: 749px) {

.bodycontentholder {    width: calc(100% - 40px);    margin-left: 20px;    margin-right: 20px;}
.headercontentholder {    width: 100%;    padding: 16px 20px 0 20px;}
.puzzletileholder {    width: calc((100% - 1 * 1.5rem) / 2);}
.main-container {    gap: 20px;    width: 100%;}
.calendar {    width: 100%;}
.breadcrumbhome {    display: block;}
.pluscomplete{width:21px; height:21px;}

.puzzletileholderplus { width:90px; height:130px;}
.puzzletileplus{height: 80px; width:80px; margin-left:1px;}
.pluspuzzlelink {  font-size: 12px;  margin-top: 10px;}
#faq {background-color: white ;color:black; }
.trypuzzlebutton{color: white; background-color: #8A67C8;}
.cartholder{margin-right: 0px;}
.puzzletopbtn { width: 80px; border: 2px #8A67C8 solid; height: 32px; line-height: 32px; font-size: 15px; font-weight: 600; margin-right:15px;}
.puzzleheaderbanner {    font-size: 13px;}



    .puzsellheadercontainer {
        flex-direction: column-reverse; /* Right on top, left below */
        max-width: 100%;
        min-height: 750px;
    }

    .puzsellheaderholder {
        background: #fff; /* remove gradient on mobile */
    }
    .puzsellheaderleft {
        padding: 20px;
    }
.puzsellheaderright {    width: 100%;    float: unset;    height: 300px; background: linear-gradient(to right, #8A67C8 0%, #A57AF3 100%);}
.puzsellheader{font-size:28px; line-height:36px; margin-bottom:10px;}
.puzsellheader2{font-size:24px; line-height:32px;}
.puzsellheaderinfo {  font-size: 15px;  line-height: 24px;}
.mobnomargin{margin-right:0px;}
.pmhm{left: calc(50% - 75px);  width: 150px;}
.trybtn {  margin-top: 40px; }

}

@media screen and (max-width: 549px) {

#tab3 .main-container { width: 100%;}
.tab-button { padding: 10px 8px; font-size: 12px; margin-bottom: 5px; font-weight: 600; }
.pmhr {  width: 120px;}
.pmhm {    left: 60px;    width: 150px;    position: absolute;}
.cartholder {  width: 70px;  margin-right: 0px;}
.bodycontentholder { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px;}
.headercontentholder { width: 100%; padding: 16px 20px 0 20px;}
.puzsellheaderright {    width: calc(100% + 40px);    margin-left: -20px; min-height:330px; }
.breadcrumbhome { display: block;}
.pluscomplete{width:21px; height:21px;}
.puzzletitlegrid {    gap: 10px; width:calc(100% + 10px);}
.puzzletile {    width: 60px;    height: 60px;    flex: 0 0 60px;    border-radius: 8px;}
.puzzletileimg {    margin-top:30px;}
.puzzletypename {    font-size: 16px;    margin-top:20px;}
.puzzleplaybtn {    font-size: 14px;}
.puzzletilecontent{    padding:0px 10px}
.puzzletileholder {    width: calc((100% - 1 * 1.5rem) / 2);    padding: 5px 5px 15px 5px;}
.ptlb_word, .ptlb_number, .ptlb_quick, .ptlb_logic {    padding: 5px 8px;    font-size: 8px;}
.dropdown2.fr{float:left; margin-bottom:10px; margin-top:30px;}
.dropdown2 { font-size: 13px; height: 32px; line-height: 32px; border-radius: 10px; padding: 0px; font-family: Inter; position: relative; top: -7px; border: none;}
.tab-nav{width:100%;}
.dropdown-content2 {    position: absolute;    display: none;    width: 100px;    margin-top: -5px;    left: 0px;}
.puzzle-header-title {    font-size: 21px;}
.cartholder{margin-right: 0px; width:120px;}
.sectionheader {    font-size: 17px;}
.dropdown-content2.show {        display: block;    }
.circlename { font-size: 13px;}
.headerspacing {    margin-bottom: 15px;}
.headerspacingmob{    margin-bottom:-20px;}
.puzzletitlecirclegrid {    grid-template-columns: repeat(3, 1fr);}
.calplaybuttonholder { display: inline-block; width: 100%; position: fixed; bottom: 0px; background-color: white; z-index: 9999; left: 0px; padding: 15px 20px 20px 20px; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.05); box-sizing: border-box;}

body.dark-theme .calplaybuttonholder { background-color: #202020;}
.streak-number-pill { font-size: 11px; line-height:12px;}
.streak-box-pill { width:80px;}
.trybtn {  margin-top: 30px; }
.puz_profile {margin-top: 0px;}

}

#tab3 .calendar {    position: relative;}
#no-stats-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: 8px;}
.no-stats-content {    text-align: center;    padding: 40px 20px;    max-width: 300px;}
.no-stats-icon {    font-size: 48px;    margin-bottom: 16px;    opacity: 0.6;}
.no-stats-message {    font-size: 18px;    font-weight: 600;    color: #333;    margin-bottom: 8px;}
.no-stats-submessage {    font-size: 14px;    color: #666;    line-height: 1.4;}


@media screen and (max-width:400px) {

    .pmhm {
        left: 60px;
        width: 150px;
        position: absolute;
    }
    .swiper {
        width: calc(100% + 20px);
    }
    .mobnomargin {
        width: 60px;
        font-size: 12px;
    }
}