/*
 * CHESSVOLA puzzle signature
 * A tactile tactics notebook: timber board, ruled analysis paper and stamped controls.
 * Geometry stays in puzzles.css/landscape.css; this layer only supplies the visual voice.
 */
html.puzzles-page{
 --craft-page:#07131e;
 --craft-paper:#0d1d29;
 --craft-paper-2:#102433;
 --craft-ink:#f6e8c5;
 --craft-pencil:#a9bdc9;
 --craft-rule:#5670832e;
 --craft-margin:#b84e43a8;
 --craft-wood:#8b582f;
 --craft-wood-dark:#59341f;
 --craft-brass:#d3a84d;
 --craft-stamp:#d4a64a;
 --craft-stamp-soft:#d4a64a20;
 --craft-shadow:#0008;
 --craft-hole:#02070d;
 --light-square:#dec486;
 --dark-square:#87562f;
}

html.puzzles-page[data-theme="light"]{
 --craft-page:#e6eef3;
 --craft-paper:#fffdf5;
 --craft-paper-2:#f7f0df;
 --craft-ink:#26394b;
 --craft-pencil:#637482;
 --craft-rule:#55738a26;
 --craft-margin:#b9514770;
 --craft-wood:#9b6538;
 --craft-wood-dark:#6f4428;
 --craft-brass:#a87019;
 --craft-stamp:#8d5b12;
 --craft-stamp-soft:#aa75151a;
 --craft-shadow:#59402730;
 --craft-hole:#b8a98e;
 --light-square:#ead39b;
 --dark-square:#936038;
}

html.puzzles-page,
html.puzzles-page body{
 font-family:"Trebuchet MS","Segoe UI",sans-serif;
}

html.puzzles-page body{
 background-color:var(--craft-page);
 background-image:
  linear-gradient(90deg,transparent 49.8%,color-mix(in srgb,var(--craft-rule) 45%,transparent) 50%,transparent 50.2%),
  linear-gradient(0deg,transparent 49.8%,color-mix(in srgb,var(--craft-rule) 45%,transparent) 50%,transparent 50.2%),
  radial-gradient(circle at 14% 18%,color-mix(in srgb,var(--craft-brass) 9%,transparent),transparent 25rem);
 background-size:36px 36px,36px 36px,auto;
}

html.puzzles-page .app{
 position:relative;
 isolation:isolate;
}

html.puzzles-page .topbar{
 position:relative;
 z-index:3;
 padding-inline:3px;
}

html.puzzles-page .brand h1{
 position:relative;
 color:var(--craft-stamp);
 font-family:Georgia,"Times New Roman",serif;
 font-weight:900;
 text-shadow:1px 1px 0 color-mix(in srgb,var(--craft-paper) 80%,transparent);
}

html.puzzles-page .brand h1::before,
html.puzzles-page .brand h1::after{
 content:"";
 position:absolute;
 top:52%;
 width:28px;
 height:2px;
 background:var(--craft-stamp);
 box-shadow:0 4px 0 color-mix(in srgb,var(--craft-stamp) 35%,transparent);
 transform:rotate(-2deg);
}

html.puzzles-page .brand h1::before{right:calc(100% + 12px)}
html.puzzles-page .brand h1::after{left:calc(100% + 12px);transform:rotate(2deg)}

html.puzzles-page .brand p{
 color:var(--craft-pencil);
 font-family:"Segoe Print","Trebuchet MS",sans-serif;
 font-size:10px;
 letter-spacing:2.6px;
 transform:rotate(-.5deg);
}

html.puzzles-page .home-button,
html.puzzles-page .rating-button,
html.puzzles-page .profile-button,
html.puzzles-page .chessvola-global-settings-button{
 border:1px solid var(--craft-stamp)!important;
 border-radius:5px 9px 5px 7px!important;
 background:var(--craft-paper)!important;
 color:var(--craft-stamp)!important;
 box-shadow:3px 3px 0 color-mix(in srgb,var(--craft-wood-dark) 75%,transparent)!important;
}

html.puzzles-page .home-button{transform:rotate(-.35deg)}
html.puzzles-page .rating-button{transform:rotate(.3deg)}
html.puzzles-page .profile-button{transform:rotate(-.2deg)}

html.puzzles-page .home-button:hover,
html.puzzles-page .rating-button:hover,
html.puzzles-page .profile-button:hover,
html.puzzles-page .chessvola-global-settings-button:hover{
 transform:translate(1px,1px);
 box-shadow:1px 1px 0 color-mix(in srgb,var(--craft-wood-dark) 75%,transparent)!important;
}

html.puzzles-page .profile-avatar{
 border-radius:3px;
 background:var(--craft-paper-2);
}

/* Inlaid timber frame and four visible brass pins. */
html.puzzles-page .board-shell{
 overflow:visible;
 padding:11px;
 border:2px solid var(--craft-wood-dark);
 border-radius:7px 12px 6px 10px;
 background:
  repeating-linear-gradient(96deg,
   var(--craft-wood-dark) 0 8px,
   var(--craft-wood) 8px 17px,
   color-mix(in srgb,var(--craft-wood) 72%,#d7a65b) 17px 20px);
 box-shadow:
  0 0 0 3px var(--craft-paper),
  9px 11px 0 color-mix(in srgb,var(--craft-wood-dark) 62%,transparent),
  0 20px 42px var(--craft-shadow);
}

html.puzzles-page .board-shell::before{
 content:"";
 position:absolute;
 z-index:30;
 top:4px;
 left:4px;
 width:6px;
 height:6px;
 border:1px solid color-mix(in srgb,var(--craft-brass) 55%,#34230c);
 border-radius:50%;
 background:var(--craft-brass);
 box-shadow:
  calc(100% - 15px) 0 0 0 var(--craft-brass),
  0 calc(100% - 15px) 0 0 var(--craft-brass),
  calc(100% - 15px) calc(100% - 15px) 0 0 var(--craft-brass);
 pointer-events:none;
}

html.puzzles-page .board{
 border:1px solid #3c2617;
 border-radius:2px;
 box-shadow:inset 0 0 0 1px #f4daa044;
}

html.puzzles-page .square.light{
 background-color:var(--light-square);
 background-image:linear-gradient(115deg,#fff1 0,transparent 36%,#4d2c1210 100%);
}

html.puzzles-page .square.dark{
 background-color:var(--dark-square);
 background-image:linear-gradient(115deg,#fff1 0,transparent 38%,#2a130d20 100%);
}

html.puzzles-page .coord{
 font-family:Consolas,"Courier New",monospace;
 font-weight:900;
}

/* The task panel is a real analysis notebook, not another floating card. */
html.puzzles-page .puzzle-panel{
 position:relative;
 padding:22px 22px 22px 34px;
 border:1px solid color-mix(in srgb,var(--craft-stamp) 72%,var(--craft-paper));
 border-radius:4px 16px 5px 8px;
 background-color:var(--craft-paper);
 background-image:
  radial-gradient(circle at 10px 16px,var(--craft-hole) 0 3px,transparent 3.5px),
  linear-gradient(90deg,transparent 0 22px,var(--craft-margin) 22px 23px,transparent 23px),
  repeating-linear-gradient(180deg,transparent 0 27px,var(--craft-rule) 27px 28px);
 background-size:20px 32px,100% 100%,100% 28px;
 background-repeat:repeat-y,no-repeat,repeat;
 box-shadow:
  7px 8px 0 color-mix(in srgb,var(--craft-wood-dark) 24%,transparent),
  0 22px 45px var(--craft-shadow);
}

html.puzzles-page .puzzle-panel::before{
 content:"";
 position:absolute;
 z-index:2;
 top:-5px;
 right:24px;
 width:68px;
 height:12px;
 border:1px solid color-mix(in srgb,var(--craft-brass) 72%,#31200b);
 border-radius:2px 2px 6px 6px;
 background:var(--craft-brass);
 box-shadow:inset 0 -3px 0 #6d461f66,2px 2px 0 #0003;
 transform:rotate(.8deg);
 pointer-events:none;
}

html.puzzles-page .daily-training{
 position:relative;
 min-height:38px;
 margin-bottom:9px;
 padding:7px 10px 7px 38px;
 border:0;
 border-bottom:2px dashed color-mix(in srgb,var(--craft-stamp) 58%,transparent);
 border-radius:0;
 background:transparent;
 color:var(--craft-ink);
 font-family:"Segoe Print","Trebuchet MS",sans-serif;
 line-height:1.25;
 transform:rotate(-.15deg);
}

html.puzzles-page .daily-training::before{
 content:"♞";
 position:absolute;
 left:4px;
 top:50%;
 width:27px;
 height:27px;
 display:grid;
 place-items:center;
 border:1px solid var(--craft-stamp);
 border-radius:50% 46% 52% 44%;
 color:var(--craft-stamp);
 font:700 18px/1 Georgia,serif;
 transform:translateY(-50%) rotate(-8deg);
}

html.puzzles-page .puzzle-label{
 display:inline-block;
 color:var(--craft-stamp);
 font-family:Consolas,"Courier New",monospace;
 letter-spacing:1.2px;
 transform:rotate(-.45deg);
}

html.puzzles-page .puzzle-category-select{
 border:1px solid var(--craft-pencil);
 border-radius:3px;
 background:var(--craft-paper-2);
 color:var(--craft-ink);
 box-shadow:2px 2px 0 color-mix(in srgb,var(--craft-pencil) 25%,transparent);
}

html.puzzles-page .category-progress{
 border:1px dashed color-mix(in srgb,var(--craft-pencil) 70%,transparent);
 border-radius:3px;
 background:color-mix(in srgb,var(--craft-paper-2) 84%,transparent);
 transform:rotate(.12deg);
}

html.puzzles-page .category-progress-track{
 height:7px;
 border:1px solid color-mix(in srgb,var(--craft-pencil) 35%,transparent);
 border-radius:1px;
 background:
  repeating-linear-gradient(90deg,transparent 0 12px,color-mix(in srgb,var(--craft-pencil) 25%,transparent) 12px 13px);
}

html.puzzles-page .category-progress-fill{
 border-radius:0;
 background:var(--craft-stamp);
}

html.puzzles-page .puzzle-panel h2{
 position:relative;
 width:max-content;
 max-width:100%;
 margin:11px 0 10px;
 color:var(--craft-ink);
 font-family:Georgia,"Times New Roman",serif;
 line-height:1.05;
}

html.puzzles-page .puzzle-panel h2::after{
 content:"";
 position:absolute;
 left:-2px;
 right:-10px;
 bottom:-5px;
 height:4px;
 background:
  linear-gradient(176deg,transparent 0 24%,var(--craft-stamp) 26% 50%,transparent 53%),
  linear-gradient(183deg,transparent 0 55%,color-mix(in srgb,var(--craft-stamp) 55%,transparent) 57% 73%,transparent 75%);
 opacity:.7;
 pointer-events:none;
}

html.puzzles-page .puzzle-description,
html.puzzles-page .puzzle-source{
 color:var(--craft-pencil);
}

html.puzzles-page .puzzle-theme{
 border:2px solid var(--craft-stamp);
 border-radius:2px;
 background:var(--craft-stamp-soft);
 color:var(--craft-stamp);
 font-family:Consolas,"Courier New",monospace;
 letter-spacing:.5px;
 text-transform:uppercase;
 transform:rotate(-1deg);
}

html.puzzles-page .puzzle-meta{
 gap:2px;
 margin-top:15px;
}

html.puzzles-page .meta-row{
 min-height:38px;
 padding:8px 3px;
 border:0;
 border-bottom:1px dashed color-mix(in srgb,var(--craft-pencil) 52%,transparent);
 border-radius:0;
 background:transparent;
}

html.puzzles-page .meta-row span{color:var(--craft-pencil)}
html.puzzles-page .meta-row strong{
 align-self:center;
 padding:2px 7px;
 outline:1px solid color-mix(in srgb,var(--craft-stamp) 72%,transparent);
 color:var(--craft-stamp);
 font-family:Consolas,"Courier New",monospace;
 line-height:1.15;
 transform:rotate(-.6deg);
}

html.puzzles-page .puzzle-tool-button,
html.puzzles-page .puzzle-streak{
 border:1px solid var(--craft-pencil);
 border-radius:3px 6px 3px 5px;
 background:var(--craft-paper-2);
 color:var(--craft-ink);
 box-shadow:2px 2px 0 color-mix(in srgb,var(--craft-pencil) 28%,transparent);
}

html.puzzles-page .puzzle-tool-button:active{
 transform:translate(2px,2px);
 box-shadow:none;
}

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

html.puzzles-page .puzzle-streak strong{color:var(--craft-stamp)}

html.puzzles-page .puzzle-stat{
 position:relative;
 padding:7px 3px 6px;
 border:0;
 border-bottom:2px solid color-mix(in srgb,var(--craft-pencil) 45%,transparent);
 border-radius:0;
 background:color-mix(in srgb,var(--craft-paper-2) 70%,transparent);
}

html.puzzles-page .puzzle-stat:nth-child(odd){transform:rotate(-.35deg)}
html.puzzles-page .puzzle-stat:nth-child(even){transform:rotate(.3deg)}
html.puzzles-page .puzzle-stat span{color:var(--craft-pencil)}
html.puzzles-page .puzzle-stat strong{
 color:var(--craft-stamp);
 font-family:Consolas,"Courier New",monospace;
}

html.puzzles-page .step-status{
 margin-top:11px;
 padding:11px 12px;
 border:0;
 border-left:4px solid var(--craft-stamp);
 border-radius:0 3px 3px 0;
 background:var(--craft-stamp-soft);
 color:var(--craft-ink);
 font-family:"Segoe Print","Trebuchet MS",sans-serif;
 text-align:left;
 transform:rotate(-.12deg);
}

html.puzzles-page .puzzle-overall-progress{
 border:1px dashed color-mix(in srgb,var(--craft-pencil) 68%,transparent);
 border-radius:2px;
 background:color-mix(in srgb,var(--craft-paper-2) 76%,transparent);
}

html.puzzles-page .puzzle-overall-label{color:var(--craft-pencil)}
html.puzzles-page .puzzle-overall-solved{color:#238953}
html.puzzles-page[data-theme="light"] .puzzle-overall-solved{color:#176f3b}

/* Result cards look like clipped score slips from the same notebook. */
html.puzzles-page .puzzle-feedback{
 background:
  repeating-linear-gradient(135deg,#02070d75 0 7px,#02070d5f 7px 14px);
 backdrop-filter:none;
}

html.puzzles-page .feedback-card{
 border:2px solid var(--craft-stamp);
 border-radius:4px 13px 4px 7px;
 background:
  repeating-linear-gradient(180deg,transparent 0 29px,var(--craft-rule) 29px 30px),
  var(--craft-paper);
 box-shadow:8px 9px 0 #0005,0 18px 40px #0007;
 transform:rotate(-.25deg);
}

html.puzzles-page .feedback-icon{
 border:2px dashed #eaffef;
 border-radius:48% 53% 47% 52%;
 box-shadow:0 0 0 6px #21a9562b;
 transform:rotate(-5deg);
}

html.puzzles-page .feedback-message{color:var(--craft-ink)}
html.puzzles-page .feedback-progress{color:var(--craft-stamp)}
html.puzzles-page .feedback-detail{color:var(--craft-pencil)}

html.puzzles-page .feedback-button{
 border-radius:3px 7px 3px 6px;
 box-shadow:3px 3px 0 #0005;
}

html.puzzles-page .feedback-repeat{
 border-color:#377fc7;
 background:#1764b5;
}

html.puzzles-page .feedback-next{
 border-color:var(--craft-stamp);
 background:color-mix(in srgb,var(--craft-stamp) 78%,#5c390b);
}

.training-dialog{
 border:2px solid var(--craft-stamp,#b58931);
 border-radius:4px 15px 4px 8px;
 background:
  linear-gradient(90deg,transparent 0 22px,var(--craft-margin,#b95147) 22px 23px,transparent 23px),
  repeating-linear-gradient(180deg,transparent 0 29px,var(--craft-rule,#0001) 29px 30px),
  var(--craft-paper,#f6eedf);
 box-shadow:8px 9px 0 #0005;
}

.training-dialog button,
.training-profile-summary,
.training-daily-goal,
.training-week,
.training-goals,
.training-reward{
 border-radius:3px 8px 3px 6px;
}

@media(max-width:800px){
 html.puzzles-page body{
  background-size:28px 28px,28px 28px,auto;
 }

 html.puzzles-page .brand h1::before,
 html.puzzles-page .brand h1::after{
  display:none;
 }

 html.puzzles-page .home-button,
 html.puzzles-page .rating-button,
 html.puzzles-page .profile-button{
  transform:none;
  box-shadow:2px 2px 0 color-mix(in srgb,var(--craft-wood-dark) 62%,transparent)!important;
 }

 html.puzzles-page .board-shell{
  padding:6px;
  border-width:1px;
  border-radius:5px 8px 5px 7px;
  box-shadow:
   0 0 0 2px var(--craft-paper),
   5px 6px 0 color-mix(in srgb,var(--craft-wood-dark) 56%,transparent),
   0 12px 28px var(--craft-shadow);
 }

 html.puzzles-page .board-shell::before{
  top:2px;
  left:2px;
  width:4px;
  height:4px;
  box-shadow:
   calc(100% - 9px) 0 0 0 var(--craft-brass),
   0 calc(100% - 9px) 0 0 var(--craft-brass),
   calc(100% - 9px) calc(100% - 9px) 0 0 var(--craft-brass);
 }

 html.puzzles-page .puzzle-panel{
  padding:10px 10px 10px 24px;
  background-image:
   radial-gradient(circle at 7px 13px,var(--craft-hole) 0 2px,transparent 2.5px),
   linear-gradient(90deg,transparent 0 16px,var(--craft-margin) 16px 17px,transparent 17px),
   repeating-linear-gradient(180deg,transparent 0 23px,var(--craft-rule) 23px 24px);
  background-size:15px 26px,100% 100%,100% 24px;
  box-shadow:4px 5px 0 color-mix(in srgb,var(--craft-wood-dark) 22%,transparent);
 }

 html.puzzles-page .puzzle-panel::before{
  top:-3px;
  right:18px;
  width:48px;
  height:8px;
 }

 html.puzzles-page .daily-training{
  min-height:32px;
  margin-bottom:5px;
  padding:5px 6px 5px 28px;
  font-size:10px;
 }

 html.puzzles-page .daily-training::before{
  left:1px;
  width:22px;
  height:22px;
  font-size:15px;
 }

 html.puzzles-page .step-status{
  padding:7px 8px;
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
 }
}

/* Keep the proven compact Playgama/mobile-landscape geometry exactly intact. */
@media (orientation:landscape) and (max-height:600px) and (max-width:1366px){
 html.puzzles-page .board-shell{padding:4px}
 html.puzzles-page .puzzle-panel{padding:12px 12px 12px 24px}
 html.puzzles-page .brand p{display:none}
}

@media(prefers-reduced-motion:reduce){
 html.puzzles-page .home-button,
 html.puzzles-page .rating-button,
 html.puzzles-page .profile-button,
 html.puzzles-page .daily-training,
 html.puzzles-page .category-progress,
 html.puzzles-page .puzzle-theme,
 html.puzzles-page .meta-row strong,
 html.puzzles-page .puzzle-stat,
 html.puzzles-page .step-status,
 html.puzzles-page .feedback-card{
 transform:none;
 }
}

/*
 * Mobile readability pass.
 * The desktop composition above 800px is intentionally untouched.
 */
@media(max-width:800px){
 html.puzzles-page .app{
  padding-inline:5px;
 }

 html.puzzles-page .topbar{
  gap:6px;
 }

 html.puzzles-page .home-button,
 html.puzzles-page .rating-button,
 html.puzzles-page .profile-button{
  font-size:12px;
 }

 html.puzzles-page .brand h1{
  font-size:clamp(20px,5.6vw,23px);
 }

 html.puzzles-page .puzzle-layout{
  gap:5px;
  margin-top:5px;
 }

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

 html.puzzles-page .puzzle-panel{
  width:min(96vw,650px);
 }

 html.puzzles-page .daily-training{
  font-size:12px;
  line-height:1.3;
 }

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

 html.puzzles-page .puzzle-category-select{
  min-height:36px;
  font-size:13px;
 }

 html.puzzles-page .category-progress-head{
  font-size:11px;
 }

 html.puzzles-page .category-progress-head strong{
  font-size:12px;
 }

 html.puzzles-page .puzzle-panel h2{
  font-size:22px;
 }

 html.puzzles-page .puzzle-description{
  font-size:14px;
  line-height:1.45;
 }

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

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

 html.puzzles-page .meta-row{
  min-height:40px;
  font-size:13px;
 }

 html.puzzles-page .puzzle-tool-button,
 html.puzzles-page .puzzle-streak{
  min-height:38px;
  font-size:12px;
 }

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

 html.puzzles-page .puzzle-stat span{
  font-size:10.5px;
 }

 html.puzzles-page .puzzle-stat strong{
  font-size:16px;
 }

 html.puzzles-page .step-status{
  font-size:13px;
  line-height:1.35;
 }

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

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

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

 html.puzzles-page .feedback-message{
  font-size:22px;
 }

 html.puzzles-page .feedback-progress{
  font-size:14px;
 }

 html.puzzles-page .feedback-detail,
 html.puzzles-page .feedback-insight{
  font-size:13px;
 }

 html.puzzles-page .feedback-button{
  font-size:14px;
 }
}

@media(max-width:800px) and (orientation:portrait){
 html.puzzles-page .puzzle-layout{
  --puzzle-mobile-board:min(96vw,calc(100vh - 390px));
  --puzzle-mobile-board:min(96vw,calc(100dvh - 390px));
 }

 html.puzzles-page .board-shell{
  width:var(--puzzle-mobile-board);
  height:var(--puzzle-mobile-board);
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  align-self:start;
 }

 html.puzzles-page .board{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  aspect-ratio:auto;
 }

 html.puzzles-page .puzzle-panel{
  max-height:min(320px,42dvh);
 }
}

/* Short square Playgama frames give the board priority; notes remain internally scrollable. */
@media(max-width:800px) and (orientation:portrait) and (max-height:650px){
 html.puzzles-page .puzzle-layout{
  --puzzle-mobile-board:min(96vw,calc(100vh - 240px));
  --puzzle-mobile-board:min(96vw,calc(100dvh - 240px));
 }

 html.puzzles-page .puzzle-panel{
  max-height:min(170px,32dvh);
 }
}

@media (orientation:landscape) and (max-height:600px) and (max-width:1366px){
 html.puzzles-page .puzzle-layout{
  --puzzle-landscape-board:min(calc(100vh - 64px),calc(100vw - 246px),650px);
  --puzzle-landscape-board:min(calc(100dvh - 64px),calc(100vw - 246px),650px);
 }

 html.puzzles-page .board-shell{
  width:var(--puzzle-landscape-board);
  height:var(--puzzle-landscape-board);
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
 }

 html.puzzles-page .board{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  aspect-ratio:auto;
 }

 html.puzzles-page .daily-training,
 html.puzzles-page .puzzle-label{
  font-size:12px;
 }

 html.puzzles-page .puzzle-category-select,
 html.puzzles-page .puzzle-description,
 html.puzzles-page .meta-row,
 html.puzzles-page .step-status{
  font-size:13px;
 }

 html.puzzles-page .puzzle-panel h2{
  font-size:22px;
 }

 html.puzzles-page .puzzle-source,
 html.puzzles-page .puzzle-tool-button,
 html.puzzles-page .puzzle-streak{
  font-size:12px;
 }
}