/* puzzles.html */
html.puzzles-page,html.puzzles-page *{box-sizing:border-box}

html.puzzles-page{
 --page:#07131e;
 --page-deep:#02070d;
 --panel:#0b1925;
 --panel-soft:#07131e;
 --border:#a87322;
 --border-soft:#294255;
 --gold:#f4cd73;
 --gold-dark:#8f5e0d;
 --text:#f7e8c1;
 --muted:#aebdca;
 --light-square:#efd18f;
 --dark-square:#936036;
 --shadow:#0009;
}

html.puzzles-page[data-theme="light"]{
 --page:#edf3f8;
 --page-deep:#dfe9f1;
 --panel:#fffdf8;
 --panel-soft:#fffaf2;
 --border:#b7812d;
 --border-soft:#c8b89f;
 --gold:#8f5e0d;
 --gold-dark:#72490a;
 --text:#26394b;
 --muted:#627687;
 --shadow:#72522a2b;
}

html.puzzles-page,html.puzzles-page body{
 margin:0;
 min-height:100%;
 font-family:Arial,sans-serif;
 background:var(--page-deep);
 color:var(--text);
}

html.puzzles-page body{
 min-height:100dvh;
 background:
  radial-gradient(
   circle at 50% 24%,
   var(--page) 0,
   var(--page-deep) 72%
  );
}

html.puzzles-page button,html.puzzles-page a{font:inherit}

html.puzzles-page .auth-screen{
 position:fixed;
 inset:0;
 z-index:100;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:20px;
 background:var(--page-deep);
}

/* AUTH CHECK: compact neutral loading state */
html.puzzles-page .auth-card{
 width:min(430px,94vw);
 padding:14px 18px;
 text-align:center;
}

html.puzzles-page .auth-spinner{
 width:24px;
 height:24px;
 margin:0 auto 10px;
 border:3px solid var(--border-soft);
 border-top-color:var(--gold);
 border-radius:50%;
 animation:auth-spin .8s linear infinite;
}

@keyframes auth-spin{
 to{transform:rotate(360deg)}
}

html.puzzles-page .auth-card p{
 margin:0;
 color:var(--muted);
 font-size:14px;
 line-height:1.5;
}

html.puzzles-page .auth-actions{
 display:flex;
 justify-content:center;
 gap:10px;
 margin-top:18px;
}

html.puzzles-page .auth-actions[hidden]{display:none}

html.puzzles-page .auth-button{
 min-height:42px;
 padding:9px 16px;
 border:1px solid var(--border);
 border-radius:9px;
 background:var(--panel-soft);
 color:var(--gold);
 cursor:pointer;
 text-decoration:none;
 font-weight:800;
}

html.puzzles-page body.auth-ready .auth-screen{display:none}
html.puzzles-page body:not(.auth-ready) .app{
 visibility:hidden;
 pointer-events:none;
}

html.puzzles-page .app{
 width:min(1180px,100%);
 min-height:100dvh;
 margin:auto;
 padding:
  max(12px,env(safe-area-inset-top))
  14px
  max(14px,env(safe-area-inset-bottom));
}

html.puzzles-page .topbar{
 display:grid;
 grid-template-columns:1fr auto 1fr;
 align-items:center;
 gap:14px;
 min-height:58px;
}

html.puzzles-page .home-button,html.puzzles-page .rating-button,html.puzzles-page .profile-button{
 min-height:40px;
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:8px 12px;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--panel);
 color:var(--gold);
 text-decoration:none;
 font-weight:800;
 box-shadow:0 5px 18px var(--shadow);
}

html.puzzles-page .home-button{
 justify-self:start;
}

html.puzzles-page .topbar-actions{
 justify-self:end;
 display:flex;
 align-items:center;
 gap:7px;
 min-width:0;
}

html.puzzles-page .rating-button{
 flex:0 0 auto;
}

html.puzzles-page .profile-button{
 max-width:260px;
}

html.puzzles-page .profile-avatar{
 width:28px;
 height:28px;
 flex:0 0 28px;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--panel-soft);
 color:var(--gold);
 font-weight:900;
}

html.puzzles-page .profile-avatar img{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover;
}

html.puzzles-page .profile-name{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.puzzles-page .brand{
 text-align:center;
}

html.puzzles-page .brand h1{
 margin:0;
 color:var(--gold);
 font-family:Georgia,serif;
 font-size:clamp(28px,4vw,44px);
 letter-spacing:4px;
}

html.puzzles-page .brand p{
 margin:3px 0 0;
 color:var(--muted);
 font-size:12px;
 font-weight:800;
 letter-spacing:2px;
 text-transform:uppercase;
}

html.puzzles-page .puzzle-layout{
 display:grid;
 grid-template-columns:minmax(0,650px) minmax(260px,340px);
 justify-content:center;
 align-items:center;
 gap:24px;
 margin-top:18px;
}

html.puzzles-page .board-shell{
 position:relative;
 width:min(650px,calc(100dvh - 115px),100%);
 padding:7px;
 border:1px solid var(--border);
 border-radius:18px;
 background:var(--panel);
 box-shadow:0 18px 55px var(--shadow);
}

html.puzzles-page .board{
 width:100%;
 aspect-ratio:1;
 display:grid;
 grid-template-columns:repeat(8,1fr);
 grid-template-rows:repeat(8,1fr);
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:7px;
}

/* PUZZLES STEP 5 — wrong-move board dialog */
html.puzzles-page .puzzle-feedback{
 position:absolute;
 inset:7px;
 z-index:20;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:18px;
 background:#02070d38;
 border-radius:11px;
 backdrop-filter:blur(2px);
}

html.puzzles-page .puzzle-feedback[hidden]{
 display:none!important;
}

html.puzzles-page .feedback-card{
 width:min(390px,90%);
 padding:22px 18px 18px;
 border:1px solid #d4a447;
 border-radius:16px;
 background:#07131ee8;
 box-shadow:0 18px 50px #000b;
 text-align:center;
}

/* PUZZLES STEP 6 — successful solution dialog */
html.puzzles-page .feedback-icon{
 width:58px;
 height:58px;
 margin:0 auto 13px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 background:#21a956;
 color:#fff;
 font-size:38px;
 font-weight:900;
 line-height:1;
 box-shadow:0 0 24px #21a95688;
}

html.puzzles-page .feedback-icon[hidden]{
 display:none!important;
}

html.puzzles-page .feedback-card.success{
 border-color:#3bc974;
}

html.puzzles-page .feedback-message{
 margin:0;
 color:#f7e8c1;
 font-size:20px;
 font-weight:900;
 line-height:1.35;
}

html.puzzles-page .feedback-actions{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:9px;
 margin-top:18px;
}

html.puzzles-page .feedback-button{
 min-height:44px;
 padding:8px 10px;
 border:1px solid;
 border-radius:9px;
 color:#fff;
 cursor:pointer;
 font-size:13px;
 font-weight:900;
}

html.puzzles-page .feedback-repeat{
 border-color:#2b86ff;
 background:linear-gradient(#1467d8,#0750b4);
}

html.puzzles-page .feedback-next{
 border-color:#d4a447;
 background:linear-gradient(#9b7220,#6c4d10);
}

html.puzzles-page[data-theme="light"] .puzzle-feedback{
 background:#3e332a32;
}

html.puzzles-page[data-theme="light"] .feedback-card{
 border-color:#b7812d;
 background:#fffaf2e8;
 box-shadow:0 18px 50px #5a402c55;
}

html.puzzles-page[data-theme="light"] .feedback-message{
 color:#26394b;
}

html.puzzles-page .square{
 position:relative;
 display:flex;
 align-items:center;
 justify-content:center;
 min-width:0;
 min-height:0;
 cursor:pointer;
}

html.puzzles-page .square.selected{
 z-index:1;
 box-shadow:
  inset 0 0 0 4px #25b94f,
  inset 0 0 22px #25b94f55;
}

html.puzzles-page .square.legal:after{
 content:"";
 position:absolute;
 z-index:3;
 width:18%;
 height:18%;
 border-radius:50%;
 background:#20a947b8;
 box-shadow:0 0 0 3px #ffffff55;
 pointer-events:none;
}

/* PUZZLES STEP 8 — hint, skip and streak controls */
html.puzzles-page .square.hint-source{
 z-index:2;
 box-shadow:
  inset 0 0 0 5px #ffb31a,
  inset 0 0 26px #ffb31a99;
 animation:hint-pulse 1s ease-in-out infinite alternate;
}

@keyframes hint-pulse{
 from{filter:brightness(1)}
 to{filter:brightness(1.18)}
}

html.puzzles-page .square.light{background:var(--light-square)}
html.puzzles-page .square.dark{background:var(--dark-square)}

html.puzzles-page .piece{
 width:92%;
 height:92%;
 display:block;
 object-fit:contain;
 filter:drop-shadow(0 3px 3px #0007);
 pointer-events:none;
}

html.puzzles-page .coord{
 position:absolute;
 z-index:2;
 font-size:11px;
 font-weight:800;
 line-height:1;
 pointer-events:none;
}

html.puzzles-page .file{
 right:3px;
 bottom:3px;
}

html.puzzles-page .rank{
 left:3px;
 top:3px;
}

html.puzzles-page .square.light .coord{color:#70481f}
html.puzzles-page .square.dark .coord{color:#f3dca5}

html.puzzles-page .puzzle-panel{
 width:100%;
 padding:22px;
 border:1px solid var(--border);
 border-radius:18px;
 background:var(--panel);
 box-shadow:0 18px 55px var(--shadow);
}

html.puzzles-page .puzzle-category-row{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
}

html.puzzles-page .puzzle-label{
 color:var(--gold);
 font-size:12px;
 font-weight:900;
 letter-spacing:1.5px;
 text-transform:uppercase;
}

html.puzzles-page .puzzle-category-select{
 min-height:32px;
 max-width:170px;
 padding:5px 28px 5px 9px;
 border:1px solid var(--border-soft);
 border-radius:8px;
 background:var(--panel-soft);
 color:var(--text);
 cursor:pointer;
 font-size:12px;
 font-weight:800;
}

html.puzzles-page .puzzle-panel h2{
 margin:9px 0 8px;
 color:var(--text);
 font-family:Georgia,serif;
 font-size:28px;
}

html.puzzles-page .puzzle-description{
 margin:0;
 color:var(--muted);
 font-size:15px;
 line-height:1.5;
}

html.puzzles-page .puzzle-source{
 min-height:16px;
 margin-top:4px;
 color:var(--muted);
 font-size:11px;
 line-height:1.35;
}

html.puzzles-page .puzzle-source a{
 color:var(--gold);
 font-weight:800;
 text-decoration:none;
}

html.puzzles-page .puzzle-source a:hover{
 text-decoration:underline;
}

html.puzzles-page .puzzle-meta{
 display:grid;
 gap:8px;
 margin-top:18px;
}

html.puzzles-page .meta-row{
 display:flex;
 justify-content:space-between;
 gap:14px;
 padding:10px 12px;
 border:1px solid var(--border-soft);
 border-radius:10px;
 background:var(--panel-soft);
}

html.puzzles-page .meta-row span{color:var(--muted)}
html.puzzles-page .meta-row strong{color:var(--gold)}

html.puzzles-page .puzzle-tools{
 display:grid;
 grid-template-columns:1fr 1fr auto;
 gap:7px;
 margin-top:12px;
}

html.puzzles-page .puzzle-tool-button,html.puzzles-page .puzzle-streak{
 min-height:40px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid var(--border-soft);
 border-radius:9px;
 background:var(--panel-soft);
 color:var(--text);
 font-size:12px;
 font-weight:900;
}

html.puzzles-page .puzzle-tool-button{
 cursor:pointer;
}

html.puzzles-page .puzzle-tool-button:hover{
 border-color:var(--border);
 color:var(--gold);
}

html.puzzles-page .puzzle-streak{
 min-width:84px;
 gap:6px;
 padding:6px 10px;
 color:var(--muted);
}

html.puzzles-page .puzzle-streak strong{
 color:var(--gold);
 font-size:18px;
}

html.puzzles-page .puzzle-stats{
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:5px;
 margin-top:8px;
}

html.puzzles-page .puzzle-stat{
 min-width:0;
 padding:6px 3px;
 border:1px solid var(--border-soft);
 border-radius:8px;
 background:var(--panel-soft);
 text-align:center;
}

html.puzzles-page .puzzle-stat span{
 display:block;
 overflow:hidden;
 color:var(--muted);
 font-size:9px;
 font-weight:800;
 text-overflow:ellipsis;
 white-space:nowrap;
}

html.puzzles-page .puzzle-stat strong{
 display:block;
 margin-top:2px;
 color:var(--gold);
 font-size:15px;
}

html.puzzles-page .puzzle-overall-progress{
 min-height:40px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
 margin-top:8px;
 padding:7px 12px;
 border:1px solid var(--border-soft);
 border-radius:10px;
 background:var(--panel-soft);
}

html.puzzles-page .puzzle-overall-label{
 color:var(--muted);
 font-size:12px;
 font-weight:900;
 letter-spacing:.5px;
 text-transform:uppercase;
}

html.puzzles-page .puzzle-overall-count{
 display:flex;
 align-items:baseline;
 gap:5px;
 white-space:nowrap;
}

html.puzzles-page .puzzle-overall-solved{
 color:#21a956;
 font-size:20px;
 font-weight:900;
}

html.puzzles-page[data-theme="light"] .puzzle-overall-solved{
 color:#17743a;
}

html.puzzles-page .puzzle-overall-separator,html.puzzles-page .puzzle-overall-total{
 color:var(--text);
 font-size:16px;
 font-weight:900;
}

html.puzzles-page .step-status{
 margin-top:10px;
 padding:12px;
 border:1px solid var(--border-soft);
 border-radius:10px;
 background:var(--panel-soft);
 color:var(--text);
 text-align:center;
 font-weight:800;
 line-height:1.4;
}

@media(max-width:800px){
 html.puzzles-page .app{
  padding:
   max(8px,env(safe-area-inset-top))
   8px
   max(10px,env(safe-area-inset-bottom));
 }

 html.puzzles-page .topbar{
  grid-template-columns:auto 1fr auto;
  gap:7px;
  min-height:48px;
 }

 html.puzzles-page .home-button{
  min-height:34px;
  padding:6px 8px;
  font-size:12px;
 }

 html.puzzles-page .rating-button,html.puzzles-page .profile-button{
  min-height:34px;
  padding:4px 6px;
  font-size:11px;
 }

 html.puzzles-page .profile-button{
  max-width:110px;
 }

 html.puzzles-page .rating-label{display:none}

 html.puzzles-page .topbar-actions{gap:4px}

 html.puzzles-page .profile-avatar{
  width:25px;
  height:25px;
  flex-basis:25px;
 }

 html.puzzles-page .brand h1{
  font-size:22px;
  letter-spacing:2px;
 }

 html.puzzles-page .brand p{display:none}

 html.puzzles-page .puzzle-layout{
  grid-template-columns:1fr;
  gap:8px;
  margin-top:7px;
 }

 html.puzzles-page .board-shell{
  width:min(92vw,calc(100dvh - 250px));
  min-width:280px;
  margin:auto;
  padding:4px;
  border-radius:12px;
 }

 html.puzzles-page .puzzle-panel{
  width:min(92vw,650px);
  margin:auto;
  padding:10px 12px;
  border-radius:12px;
 }

 html.puzzles-page .puzzle-panel h2{
  margin:4px 0;
  font-size:19px;
 }

 html.puzzles-page .puzzle-description{
  font-size:12px;
 }

 html.puzzles-page .puzzle-meta{
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:8px;
 }

 html.puzzles-page .meta-row{
  padding:6px 8px;
  font-size:11px;
 }

 html.puzzles-page .puzzle-tools{
  gap:4px;
  margin-top:7px;
 }

 html.puzzles-page .puzzle-tool-button,html.puzzles-page .puzzle-streak{
  min-height:34px;
  padding:4px 6px;
  font-size:10px;
 }

 html.puzzles-page .puzzle-streak{
  min-width:70px;
 }

 html.puzzles-page .puzzle-streak strong{
  font-size:15px;
 }

 html.puzzles-page .step-status{
  margin-top:6px;
  padding:7px 8px;
  font-size:11px;
 }

 html.puzzles-page .puzzle-overall-progress{
  min-height:34px;
  margin-top:6px;
  padding:5px 8px;
 }

 html.puzzles-page .puzzle-overall-label{
  font-size:9px;
 }

 html.puzzles-page .puzzle-overall-solved{
  font-size:17px;
 }

 html.puzzles-page .puzzle-overall-separator,html.puzzles-page .puzzle-overall-total{
  font-size:14px;
 }

 html.puzzles-page .coord{font-size:8px}
}

@media(max-width:380px){
 html.puzzles-page .home-button{
  width:35px;
  padding:4px;
  justify-content:center;
  font-size:0;
 }

 html.puzzles-page .home-button::after{
  content:"←";
  font-size:18px;
 }

 html.puzzles-page .profile-name{display:none}

 html.puzzles-page .profile-button{
  width:35px;
  padding:4px;
  justify-content:center;
 }

 html.puzzles-page .board-shell{
  min-width:0;
  width:min(94vw,calc(100dvh - 245px));
 }
}