:root{
  --black:#020403;
  --green0:#07100a;
  --green1:#102818;
  --green2:#1d6537;
  --green3:#80d972;
  --cream:#f4f0dc;
  --muted:#aebca8;
  --gold:#d8b35f;
  --line:rgba(244,240,220,.15);
  --panel:rgba(244,240,220,.07);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Corbel,Arial,sans-serif;background:var(--black);color:var(--cream)}
body{overscroll-behavior:none}
button,input{font-family:Corbel,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
.start-screen{
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:34px 26px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(92,190,83,.22), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(35,140,73,.65), transparent 34%),
    linear-gradient(180deg,#000 0%,#030806 42%,#092012 72%,#14582f 100%);
}
.start-screen:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(244,240,220,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,240,220,.10) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%);
}
.start-screen:after{
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.78) 100%);
  pointer-events:none;
}
.start-text{
  position:relative;
  z-index:1;
  width:min(520px,100%);
  margin-top:-2svh;
}
.style4-splash{display:flex;flex-direction:column;align-items:center}
.splash-title{
  margin:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.02em;
  font-family:Impact,"Arial Black",Haettenschweiler,Corbel,sans-serif;
  font-weight:900;
  line-height:.82;
  letter-spacing:.015em;
  text-transform:uppercase;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.42));
}
.splash-title span{display:block}
.title-white{
  color:#f3f0e5;
  font-size:clamp(60px,20vw,128px);
  text-shadow:0 1px 0 rgba(255,255,255,.25),0 7px 20px rgba(0,0,0,.42);
}
.title-green{
  color:#56bb48;
  font-size:clamp(92px,31vw,190px);
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(202,255,188,.30),0 10px 28px rgba(0,0,0,.50),0 0 24px rgba(86,187,72,.15);
}
.splash-divider{
  width:min(330px,72vw);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
  margin:16px auto 18px;
  color:#cdeab8;
}
.splash-divider span{height:2px;background:linear-gradient(90deg,transparent,#7bdd64)}
.splash-divider span:last-child{background:linear-gradient(90deg,#7bdd64,transparent)}
.splash-divider strong{font-size:36px;font-weight:400;text-shadow:0 0 12px rgba(123,221,100,.38)}
.splash-subtitle{
  margin:0 0 22px;
  color:#f4f0dc;
  font-size:clamp(18px,4.8vw,26px);
  line-height:1.25;
  font-weight:400;
  text-shadow:0 3px 18px rgba(0,0,0,.65);
}
.splash-quote{
  max-width: min(620px, 86vw);
  margin: -4px auto 16px;
  color: rgba(244,240,220,.88);
  font-size: clamp(14px,3.45vw,18px);
  line-height:1.32;
  font-style: italic;
  text-shadow:0 3px 16px rgba(0,0,0,.70);
}
.splash-quote span{
  display:inline-block;
  margin-top:5px;
  color:#8ee27f;
  font-style:normal;
  font-weight:700;
}
.splash-author{
  margin:0 0 26px;
  color:#78dc68;
  font-size:clamp(18px,4.8vw,25px);
  line-height:1.2;
  font-weight:500;
  text-shadow:0 0 16px rgba(120,220,104,.24);
}
.primary-btn{
  border:1px solid rgba(209,255,195,.22);
  border-radius:999px;
  padding:17px 48px;
  min-width:238px;
  background:linear-gradient(135deg,#d9ffd0 0%,#8de47d 45%,#2f994f 100%);
  color:#061009;
  font-size:25px;
  font-weight:950;
  box-shadow:0 20px 48px rgba(0,0,0,.44),0 0 34px rgba(128,217,114,.20),inset 0 1px 0 rgba(255,255,255,.45);
}
@media(max-width:390px){
  .title-white{font-size:clamp(62px,22vw,96px)}
  .title-green{font-size:clamp(98px,35vw,155px)}
  .splash-divider{margin:18px auto 20px}
  .primary-btn{min-width:210px;font-size:23px;padding:16px 38px}
}
.app{min-height:100svh;background:radial-gradient(circle at 90% 0%,rgba(128,217,114,.14),transparent 30%),linear-gradient(180deg,#020403,#07100a 44%,#040705)}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:rgba(2,4,3,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.top-btn{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--cream);font-size:21px}
.top-copy{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.top-copy strong{font-size:17px}
.top-copy span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-view{padding:16px 14px 90px;max-width:760px;margin:0 auto;width:100%}
.continue-title,.recent-title{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#96dd85;font-weight:950;margin:22px 2px 10px}
.continue-card{border:1px solid rgba(216,179,95,.35);background:linear-gradient(135deg,rgba(216,179,95,.13),rgba(128,217,114,.06));border-radius:22px;overflow:hidden;margin-bottom:20px;box-shadow:0 18px 42px rgba(0,0,0,.28)}
.continue-inner{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px;align-items:center}
.continue-thumb{width:96px;height:126px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:#111}
.continue-copy h2{font-size:22px;line-height:1.05;margin:0 0 7px}
.continue-copy p{margin:0 0 11px;color:var(--muted);font-size:14px}
.recent-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:8px;scrollbar-width:none}
.recent-strip::-webkit-scrollbar{display:none}
.recent-item{flex:0 0 88px;border:1px solid var(--line);border-radius:16px;background:rgba(244,240,220,.06);padding:7px;color:var(--cream);text-align:left}
.recent-item img{width:100%;height:94px;object-fit:cover;border-radius:10px;display:block;margin-bottom:7px}
.recent-item span{display:block;font-size:12px;font-weight:900;line-height:1.05}
.search-wrap{position:sticky;top:66px;z-index:8;display:flex;align-items:center;gap:8px;margin:8px 0 18px;padding:10px 12px;border-radius:17px;background:rgba(2,4,3,.78);backdrop-filter:blur(14px);border:1px solid var(--line)}
.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:var(--cream);font-size:17px}
.search-wrap input::placeholder{color:rgba(174,188,168,.75)}
.progress-row{display:flex;align-items:center;gap:9px}
.progress-track{height:8px;background:rgba(244,240,220,.12);border-radius:999px;overflow:hidden;flex:1}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--green3),var(--gold));border-radius:999px}
.progress-text{font-size:12px;color:var(--muted);min-width:35px;text-align:right;font-weight:900}
.section-block{margin-top:24px}
.section-banner{position:relative;min-height:88px;border-radius:20px;overflow:hidden;border:1px solid var(--line);margin-bottom:11px;background:#111}
.section-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.1);opacity:.45}
.section-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.38))}
.section-banner-copy{position:relative;z-index:1;padding:16px}
.section-name{font-size:13px;text-transform:uppercase;letter-spacing:.13em;color:var(--cream);font-weight:950;margin-bottom:8px}
.section-count{color:var(--muted);font-size:12px;font-weight:900;margin-bottom:9px}
.section-progress{height:6px;background:rgba(244,240,220,.14);border-radius:999px;overflow:hidden}
.chapter-row{width:100%;display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:rgba(244,240,220,.06);color:var(--cream);border-radius:17px;padding:8px;margin:8px 0;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.chapter-thumb-mini{width:54px;height:72px;object-fit:cover;border-radius:9px;border:1px solid rgba(244,240,220,.18);background:#111}
.chapter-main{min-width:0}
.chapter-title{font-size:17px;font-weight:950;line-height:1.08;margin-bottom:5px}
.chapter-meta{font-size:12px;color:var(--muted);margin-bottom:7px}
.chapter-progress{height:5px;background:rgba(244,240,220,.12);border-radius:999px;overflow:hidden}
.chapter-status{font-size:20px;min-width:26px;text-align:center;color:rgba(244,240,220,.38);font-weight:950}
.chapter-status.progress{color:var(--green3)}
.chapter-status.done{color:var(--gold)}
.no-results{padding:32px 12px;color:var(--muted);text-align:center}
.reader-view{min-height:calc(100svh - 64px);display:flex;flex-direction:column}
.reader-head{padding:10px 12px 8px;background:rgba(2,4,3,.86);border-bottom:1px solid var(--line)}
.reader-link{border:0;background:transparent;color:#aeeaa1;font-weight:950;font-size:15px;padding:7px 0}
.reader-title{font-size:18px;font-weight:950;margin:3px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-progress-row{display:flex;align-items:center;gap:9px}
#readerProgressText{font-size:12px;color:var(--muted);font-weight:950;min-width:35px;text-align:right}
#pdfFrame{width:100%;height:calc(100svh - 236px);border:0;background:white;flex:1}
.reader-big-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;padding:9px 10px 0;background:rgba(2,4,3,.88);border-top:1px solid var(--line)}
.reader-big-btn{border:1px solid var(--line);border-radius:14px;padding:12px 8px;background:var(--panel);color:var(--cream);font-weight:950;font-size:14px}
.home-big{background:linear-gradient(135deg,#f0ffe6,#92e582,#2c8b4d);color:#061009;border:0;min-width:76px}
.reader-actions{padding:8px 10px calc(9px + env(safe-area-inset-bottom));background:rgba(2,4,3,.88)}
.reader-action-btn{width:100%;border:0;border-radius:14px;padding:12px;background:linear-gradient(135deg,#f2dd94,#d8b35f);color:#171004;font-weight:950}
.reader-big-btn:disabled{opacity:.35}
button:active,.chapter-row:active,.continue-card:active,.recent-item:active{transform:scale(.985)}
@media(min-width:800px){
  .toc-view{max-width:860px}
  .chapter-list-inner{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
  .chapter-row{margin:0}
}


/* Bishop spotlight splash animation */
.start-screen{
background: radial-gradient(circle at 50% 15%, rgba(80,180,60,.45), transparent 30%), #030503;
overflow:hidden;
}
.start-screen::before{
content:'';
position:absolute;inset:0;
background:linear-gradient(to bottom, rgba(180,255,120,.55), transparent 35%);
clip-path:polygon(45% 0,55% 0,70% 45%,30% 45%);
filter:blur(20px);
opacity:.8;
}
.splash-divider strong{
font-size:50px !important;
display:inline-block;
animation: bishopRise 1.2s ease-out forwards;
}
.splash-title,.splash-subtitle,.splash-quote,.splash-author,.primary-btn{
opacity:0;
animation: fadeUp .6s ease forwards;
}
.splash-title{animation-delay:1s}
.splash-subtitle{animation-delay:1.3s}
.splash-quote{animation-delay:1.45s}
.splash-author{animation-delay:1.65s}
.primary-btn{animation-delay:1.9s}
@keyframes bishopRise{
0%{transform:translateY(60px) scale(.7);opacity:0}
100%{transform:translateY(0) scale(1);opacity:1}
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:translateY(0)}
}


/* New sequence */
.magic-intro{
opacity:0;
font-size:clamp(28px,6vw,42px);
font-style:italic;
color:#f4f0dc;
margin:0 0 20px;
animation: fadeUp .9s ease forwards;
animation-delay:.2s;
}
.splash-title,.splash-divider{
opacity:0;
animation: fadeUp .9s ease forwards;
animation-delay:1.6s;
}
.splash-quote{
opacity:0;
animation: fadeUp .8s ease forwards;
animation-delay:3.0s !important;
}
.splash-author{
font-size:clamp(12px,3vw,16px) !important;
opacity:0;
animation: fadeUp .8s ease forwards;
animation-delay:4.2s !important;
}
.primary-btn{
opacity:0;
animation: fadeUp .8s ease forwards;
animation-delay:5.0s !important;
}
.splash-subtitle{display:none;}


/* ONLINE APP LICHESS 1 — Chessground lesson reader */
.reader-view{min-height:calc(100svh - 64px);display:flex;flex-direction:column;background:linear-gradient(180deg,#020403,#06110c)}
.reader-head{padding:7px 12px 6px;background:rgba(2,4,3,.9);border-bottom:1px solid var(--line)}
.reader-title{font-size:14px;font-weight:950;margin:2px 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cream)}
.reader-progress-row{display:none}
.lesson-wrap{width:min(100%,720px);margin:0 auto;padding:10px 10px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;align-items:center;flex:1}
.board-area,.cg-wrap{width:100%;}
.board{width:min(100%,calc(100svw - 20px));height:min(calc(100svw - 20px),520px);max-width:520px;max-height:520px;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.42);background:#b58863;touch-action:manipulation}
.annotation-box{width:100%;max-width:520px;min-height:76px;border:1px solid rgba(244,210,122,.18);border-radius:18px;background:rgba(8,22,15,.92);padding:14px 15px;color:var(--cream);font-size:17px;line-height:1.35;font-weight:750;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.annotation-box.empty{color:var(--muted);font-weight:750;font-style:italic}
.forward-arrow{width:100%;max-width:520px;border:0;border-radius:20px;padding:14px 0 17px;background:linear-gradient(135deg,#f0ffe6,#92e582,#2c8b4d);color:#061009;font-size:54px;line-height:.9;font-weight:950;box-shadow:0 14px 35px rgba(51,175,89,.28);touch-action:manipulation}
.forward-arrow:active{transform:scale(.985)}
.forward-arrow:disabled{opacity:.45;filter:grayscale(.4)}
@media(max-width:390px){.annotation-box{font-size:15.5px}.forward-arrow{font-size:48px}.reader-title{font-size:13px}.lesson-wrap{gap:8px}}

/* APP BOARD 1.1 — compact reader header + Back/Forward controls */
.compact-reader-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 12px 5px;
  min-height:34px;
}
.compact-reader-head .reader-link{
  flex:0 0 auto;
  font-size:14px;
  padding:4px 0;
  line-height:1;
}
.compact-reader-head .inline-reader-title{
  flex:1;
  margin:0;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.move-nav-row{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:82px 1fr;
  gap:10px;
  align-items:stretch;
}
.back-move-btn{
  border:1px solid rgba(244,240,220,.16);
  border-radius:18px;
  background:rgba(244,240,220,.08);
  color:var(--cream);
  font-size:30px;
  font-weight:950;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  touch-action:manipulation;
}
.back-move-btn:active,.forward-arrow:active{transform:scale(.985)}
.back-move-btn:disabled,.forward-arrow:disabled{opacity:.38;filter:grayscale(.4)}
.move-nav-row .forward-arrow{
  max-width:none;
  width:100%;
}
@media(max-width:390px){
  .compact-reader-head{padding-top:4px;padding-bottom:4px;gap:8px}
  .compact-reader-head .reader-link{font-size:13px}
  .compact-reader-head .inline-reader-title{font-size:13px}
  .move-nav-row{grid-template-columns:70px 1fr;gap:8px}
  .back-move-btn{font-size:26px;border-radius:16px}
}

/* APP BOARD 1.2 — warmer main board + light-blue variation mode */
#board cg-board square.light{background-color:#d7a14a !important;}
#board cg-board square.dark{background-color:#8b4f24 !important;}
#board.variation-board cg-board square.light{background-color:#cbe8f7 !important;}
#board.variation-board cg-board square.dark{background-color:#6aa7c8 !important;}
.variation-box{
  width:100%;
  max-width:520px;
  border:1px solid rgba(156,213,239,.26);
  border-radius:16px;
  background:rgba(12,38,54,.88);
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}
.variation-box.hidden{display:none;}
.variation-label{
  width:100%;
  color:#dff3ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.9;
}
.variation-btn{
  border:1px solid rgba(224,247,255,.28);
  border-radius:999px;
  background:linear-gradient(135deg,#eefaff,#9bd9f4,#4d98bd);
  color:#06141c;
  font-size:14px;
  font-weight:950;
  padding:9px 12px;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.variation-btn.return-main{
  background:linear-gradient(135deg,#fff7dc,#e1b85f,#8e5b1d);
  color:#160d04;
}
.variation-btn:active{transform:scale(.98);}


/* Trophy system restored */
.trophy-panel{
  border:1px solid rgba(216,179,95,.32);
  background:linear-gradient(135deg,rgba(216,179,95,.11),rgba(128,217,114,.055));
  border-radius:20px;
  padding:12px;
  margin:14px 0 18px;
  box-shadow:0 16px 38px rgba(0,0,0,.24);
}
.trophy-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.trophy-label{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#96dd85;font-weight:950;margin-bottom:3px}
.trophy-score{font-size:23px;font-weight:950;color:var(--cream);line-height:1}
.reset-progress-btn{
  border:1px solid rgba(244,240,220,.18);
  border-radius:999px;
  background:rgba(244,240,220,.07);
  color:var(--cream);
  padding:9px 12px;
  font-size:12px;
  font-weight:950;
}
.trophy-progress{margin:6px 0 10px}
.trophy-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.mini-trophy{
  aspect-ratio:1;
  border:1px solid rgba(244,240,220,.12);
  border-radius:9px;
  background:rgba(244,240,220,.045);
  color:rgba(244,240,220,.35);
  font-size:13px;
  font-weight:950;
  line-height:1;
}
.mini-trophy.earned{
  color:#ffd86d;
  background:rgba(216,179,95,.16);
  border-color:rgba(255,216,109,.34);
  box-shadow:0 0 14px rgba(255,216,109,.12);
}
.chapter-status.trophy-earned{font-size:19px;color:#ffd86d;text-shadow:0 0 12px rgba(255,216,109,.20)}
.trophy-toast{
  position:fixed;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  z-index:1000;
  max-width:min(92vw,520px);
  border:1px solid rgba(255,216,109,.40);
  border-radius:999px;
  background:linear-gradient(135deg,#fff4c7,#d8b35f,#7aaa52);
  color:#130d03;
  padding:12px 18px;
  font-size:15px;
  font-weight:950;
  box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 30px rgba(255,216,109,.22);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.trophy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:390px){.trophy-grid{grid-template-columns:repeat(7,1fr)}.trophy-score{font-size:21px}.reset-progress-btn{font-size:11px;padding:8px 10px}}

/* APP BOARD 3.1 — dark ochre board + sleek trophy case */
#board cg-board square.light{background-color:#d8c4a0 !important;}
#board cg-board square.dark{background-color:#a36b2c !important;}
#board.variation-board cg-board square.light{background-color:#dbe8f3 !important;}
#board.variation-board cg-board square.dark{background-color:#7fa6c7 !important;}

.trophy-panel{
  border:1px solid rgba(216,179,95,.20);
  background:rgba(244,240,220,.035);
  border-radius:14px;
  padding:8px 10px;
  margin:8px 0 12px;
  box-shadow:none;
}
.sleek-trophy-top,.trophy-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.trophy-score{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-size:13px;
  font-weight:950;
  color:var(--cream);
  line-height:1;
}
.trophy-word{
  color:var(--muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.trophy-score strong{
  color:#ffd86d;
  font-size:14px;
}
.reset-progress-btn{
  border:1px solid rgba(244,240,220,.14);
  border-radius:999px;
  background:rgba(244,240,220,.05);
  color:var(--muted);
  padding:5px 8px;
  font-size:10px;
  font-weight:900;
}
.trophy-dot-row{
  display:grid;
  grid-template-columns:repeat(19,1fr);
  gap:4px;
  align-items:center;
}
.mini-trophy-dot{
  width:8px;
  height:8px;
  min-width:8px;
  min-height:8px;
  border:1px solid rgba(244,240,220,.16);
  border-radius:999px;
  background:rgba(244,240,220,.08);
  padding:0;
  box-shadow:none;
}
.mini-trophy-dot.earned{
  border-color:rgba(255,216,109,.78);
  background:radial-gradient(circle at 32% 28%, #fff4b8 0 18%, #ffd86d 28%, #d8a928 70%, #8f5f10 100%);
  box-shadow:0 0 7px rgba(255,216,109,.34);
}
@media(max-width:430px){
  .trophy-panel{padding:7px 9px;margin:7px 0 10px;}
  .trophy-dot-row{grid-template-columns:repeat(19,1fr);gap:3px;}
  .mini-trophy-dot{width:7px;height:7px;min-width:7px;min-height:7px;}
}


/* APP BOARD 3.2 — missing navigation buttons restored */
.lesson-tools-row{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:1fr .72fr 1fr;
  gap:8px;
  margin-top:0;
}
.lesson-tool-btn,.flip-board-btn{
  border:1px solid rgba(244,240,220,.14);
  background:rgba(244,240,220,.07);
  color:var(--cream);
  border-radius:14px;
  padding:10px 8px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.01em;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  touch-action:manipulation;
}
.lesson-tool-btn.home-tool{
  color:#122014;
  background:linear-gradient(135deg,#dff0be,#8edb72);
  border-color:rgba(142,219,114,.45);
}
.lesson-tool-btn:disabled{opacity:.38;filter:grayscale(.55)}
.flip-board-btn{
  width:100%;
  max-width:520px;
  padding:8px 10px;
  font-size:12px;
  color:#f7e5b6;
  background:rgba(158,107,47,.22);
  border-color:rgba(247,196,98,.18);
}
@media(max-width:390px){
  .lesson-tools-row{gap:6px}
  .lesson-tool-btn{font-size:11px;padding:9px 6px;border-radius:12px}
  .flip-board-btn{font-size:11px;padding:7px 8px}
}


/* APP BOARD 3.3 — forced board colors + Merida pieces + visual PGN marks */
#board cg-board{
  background-color:#d8c4a0 !important;
  background-image:conic-gradient(#a36b2c 25%, #d8c4a0 0 50%, #a36b2c 0 75%, #d8c4a0 0) !important;
  background-size:25% 25% !important;
}
#board.variation-board cg-board{
  background-color:#dbe8f3 !important;
  background-image:conic-gradient(#7fa6c7 25%, #dbe8f3 0 50%, #7fa6c7 0 75%, #dbe8f3 0) !important;
  background-size:25% 25% !important;
}
#board svg.cg-shapes{
  opacity:.95;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.16));
}
.trophy-icon{font-size:13px;line-height:1;filter:drop-shadow(0 1px 3px rgba(255,216,109,.25));}

/* APP BOARD 3.4 FIX — keep working Chessground pieces, force board colors, restore button position */
#board.cg-wrap cg-board,
#board cg-board{
  background-color:#d8c4a0 !important;
  background-image:
    conic-gradient(#a36b2c 25%, #d8c4a0 0 50%, #a36b2c 0 75%, #d8c4a0 0) !important;
  background-size:25% 25% !important;
}
#board.variation-board.cg-wrap cg-board,
#board.variation-board cg-board{
  background-color:#dbe8f3 !important;
  background-image:
    conic-gradient(#7fa6c7 25%, #dbe8f3 0 50%, #7fa6c7 0 75%, #dbe8f3 0) !important;
  background-size:25% 25% !important;
}
.move-nav-row{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:82px 1fr;
  gap:10px;
  align-items:stretch;
  margin:0 auto;
}
.move-nav-row .forward-arrow{
  width:100%;
  max-width:none;
  margin:0;
}
.back-move-btn{margin:0;}
.annotation-box + .variation-box + .move-nav-row,
.variation-box + .move-nav-row{margin-top:0;}
@media(max-width:390px){
  .move-nav-row{grid-template-columns:70px 1fr;gap:8px;}
}
/* Trophy label requested: 🏆 Progress 12/38 */
.trophy-score{display:flex;align-items:center;gap:5px;}
.trophy-icon{font-size:13px;line-height:1;filter:drop-shadow(0 1px 3px rgba(255,216,109,.25));}


/* APP BOARD 3.5 — controls locked directly under board; game buttons stay inside chapter */
.lesson-wrap{gap:8px;}
.move-nav-row{order:2; margin:0 auto 0; flex:0 0 auto;}
.annotation-box{order:3;}
.variation-box{order:4;}
.lesson-tools-row{order:5;}
.flip-board-btn{order:6;}
#board.board{order:1; flex:0 0 auto;}
.move-nav-row .forward-arrow{padding:10px 0 13px; font-size:48px; border-radius:18px;}
.back-move-btn{min-height:64px;}
.annotation-box{margin-top:2px;}
@media(max-width:430px){
  .lesson-wrap{padding-top:8px; gap:7px;}
  .move-nav-row{grid-template-columns:68px 1fr; gap:8px;}
  .move-nav-row .forward-arrow{font-size:44px; padding:9px 0 12px;}
  .back-move-btn{min-height:58px; font-size:25px;}
}

/* In-app PDF chapter reader */
.pdf-wrap{
  width:100%;
  margin:0 auto;
  padding:0 0 18px;
}
.pdf-frame{
  width:100%;
  height:calc(100vh - 112px);
  min-height:640px;
  border:0;
  border-radius:18px;
  background:#111;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
@media (max-width: 700px){
  .pdf-frame{
    height:calc(100vh - 86px);
    min-height:560px;
    border-radius:12px;
  }
}


/* Image-based reader for Chapter 38. Keeps the page full-width on phones and avoids PDF iframe margins. */
.chapter-image-wrap{
  width:min(100%,760px);
  margin:0 auto;
  padding:8px 8px calc(22px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  overflow-x:hidden;
}
.chapter-page-image{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  box-shadow:0 16px 45px rgba(0,0,0,.28);
  background:#fff;
}
@media(max-width:700px){
  .chapter-image-wrap{width:100%; padding:6px 0 calc(16px + env(safe-area-inset-bottom)); gap:10px;}
  .chapter-page-image{width:100%; border-radius:0; box-shadow:none;}
}

/* WORKING APP 3 update: wider Reset Progress button */
.reset-progress-btn{min-width:112px;white-space:nowrap;padding-left:10px;padding-right:10px;}
@media(max-width:390px){.reset-progress-btn{min-width:106px;font-size:10px;padding-left:8px;padding-right:8px;}}


/* WORKING APP 3 bonus chapter restore: hidden treasure chest row */
.bonus-section-block{margin-top:8px;}
.bonus-list-inner{display:block;}
.bonus-chapter-row{
  border-color:rgba(255,216,109,.30) !important;
  background:linear-gradient(135deg,rgba(255,216,109,.10),rgba(128,217,114,.045)) !important;
}
.bonus-chapter-row.locked{opacity:.78;}
.bonus-chapter-row.unlocked{
  box-shadow:0 0 0 1px rgba(255,216,109,.10),0 18px 42px rgba(255,216,109,.08);
}
.bonus-chest-thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:radial-gradient(circle at 40% 30%,rgba(255,216,109,.28),rgba(40,60,32,.82));
  border:1px solid rgba(255,216,109,.28);
  border-radius:12px;
  object-fit:cover;
}


/* WORKING APP 4 golden king shortcut — three presses completes every chapter */
.golden-king-shortcut-row{
  display:flex;
  justify-content:flex-start;
  margin:8px 0 2px 4px;
}
.golden-king-shortcut{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,216,109,.55);
  background:radial-gradient(circle at 35% 25%,#fff0a8 0%,#d9a735 45%,#6c4a10 100%);
  color:#1c1202;
  font-size:20px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 18px rgba(255,216,109,.20);
  cursor:pointer;
  opacity:.88;
}
.golden-king-shortcut:active{transform:scale(.95);}

/* WORKING APP 4.1 — refined rewards/search home UI */
#continueCard{display:none!important;}
.trophy-progress-bar{
  height:3px;
  width:100%;
  margin-top:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.trophy-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#9b6a1f,#ffd86d,#fff0aa);
  box-shadow:0 0 12px rgba(255,216,109,.35);
  transition:width .35s ease;
}
.bonus-knight-thumb{
  position:relative;
  color:#2b1a05!important;
  font-size:28px!important;
  font-weight:900;
  background:
    radial-gradient(circle at 30% 22%, #fff4b5 0%, #ffd86d 28%, #c88a24 62%, #6f4308 100%)!important;
  border:1px solid rgba(255,230,130,.75)!important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -7px 13px rgba(88,45,0,.45),
    0 7px 18px rgba(255,184,62,.20),
    0 2px 0 rgba(55,28,0,.80);
  text-shadow:0 1px 0 rgba(255,246,184,.45), 0 2px 4px rgba(58,30,0,.35);
  transform:perspective(90px) rotateX(8deg);
}
.bonus-knight-thumb::after{
  content:'';
  position:absolute;
  left:16%; right:16%; bottom:6px;
  height:4px;
  border-radius:999px;
  background:rgba(65,34,0,.45);
  filter:blur(.1px);
}

/* Compact visual game navigation bar under Flip Board */
.game-nav-dots{
  width:100%;
  max-width:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:-3px;
  min-height:14px;
  padding:0 6px 2px;
}
.game-nav-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:rgba(244,240,220,.32);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.game-nav-dot.active{
  width:9px;
  height:9px;
  background:linear-gradient(135deg,#dff0be,#8edb72);
  box-shadow:0 0 0 2px rgba(142,219,114,.16),0 0 10px rgba(142,219,114,.36);
}
@media(max-width:390px){
  .game-nav-dots{gap:5px; min-height:12px;}
  .game-nav-dot{width:6px;height:6px;}
  .game-nav-dot.active{width:8px;height:8px;}
}

/* WORKING APP 5 reader navigation cleanup: remove duplicate top bar in reader mode */
.app.reader-mode .topbar{display:none;}
.app.reader-mode .reader-view{min-height:100svh;}
.reader-home-top-btn{
  margin-left:auto;
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(244,240,220,.16);
  background:rgba(255,255,255,.055);
  color:var(--cream);
  font-weight:950;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.reader-home-top-btn:active{transform:scale(.96);}
.compact-reader-head .inline-reader-title{min-width:0;}

/* FINISHED APP 1 splash update: dramatic magic sequence + subtitle */
#startScreen .style4-splash .magic-intro{
  order:0;
  opacity:0;
  font-size:clamp(28px,7vw,46px);
  font-style:italic;
  letter-spacing:.035em;
  color:#f7f1dc;
  margin:0 0 24px;
  text-shadow:0 0 18px rgba(247,241,220,.35), 0 0 36px rgba(123,221,100,.20);
  animation:magicReveal 1.25s cubic-bezier(.18,.9,.2,1) forwards;
  animation-delay:.12s;
}
#startScreen .style4-splash .splash-title{
  order:1;
  opacity:0;
  animation:fadeUp .9s ease forwards;
  animation-delay:1.65s !important;
}
#startScreen .style4-splash .splash-divider{
  order:2;
  opacity:0;
  animation:fadeUp .9s ease forwards;
  animation-delay:1.65s !important;
}
#startScreen .style4-splash .splash-divider strong{
  animation:none !important;
  opacity:1;
  transform:none;
}
#startScreen .style4-splash .splash-subtitle{
  order:3;
  display:block !important;
  opacity:0;
  margin:4px 0 22px;
  color:rgba(246,244,220,.88);
  font-size:clamp(14px,3.6vw,18px);
  letter-spacing:.08em;
  text-transform:none;
  animation:fadeUp .8s ease forwards;
  animation-delay:2.18s !important;
}
#startScreen .style4-splash .primary-btn{
  order:4;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:2.85s !important;
}
#startScreen .style4-splash .splash-quote,
#startScreen .style4-splash .splash-author{
  display:none !important;
}
@keyframes magicReveal{
  0%{opacity:0;transform:translateY(28px) scale(.94);filter:blur(10px);letter-spacing:.12em}
  55%{opacity:1;filter:blur(0);transform:translateY(0) scale(1.02)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);letter-spacing:.035em}
}


/* FINISHED APP 1 — keyboard controls modal shared by top menu and reader header button */
.controls-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(6px);
}
.controls-overlay.hidden{display:none;}
.controls-panel{
  width:min(420px, 94vw);
  border:1px solid rgba(244,240,220,.18);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(16,28,18,.98), rgba(4,8,5,.98));
  color:var(--cream);
  box-shadow:0 24px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  padding:18px 18px 16px;
  position:relative;
}
.controls-panel h2{
  margin:0 42px 14px 0;
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.controls-close{
  position:absolute;
  right:12px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(244,240,220,.16);
  background:rgba(255,255,255,.06);
  color:var(--cream);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.controls-list{display:grid;gap:9px;}
.controls-list div{
  display:grid;
  grid-template-columns:84px 1fr;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(244,240,220,.08);
}
.controls-list span{
  justify-self:start;
  min-width:52px;
  text-align:center;
  padding:4px 8px;
  border-radius:10px;
  background:rgba(174,234,161,.12);
  color:#b8ff9d;
  font-weight:950;
}
.controls-list strong{font-size:14px;}


/* FINISHED APP 8 quote generator button beside golden king */
.golden-king-shortcut-row{
  gap:8px;
  align-items:center;
}
.quote-shortcut{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(245,249,255,.72);
  background:radial-gradient(circle at 35% 25%,#ffffff 0%,#dfe7ef 38%,#7b8794 72%,#303844 100%);
  color:#ffffff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.28),0 0 18px rgba(220,235,255,.18),inset 0 0 8px rgba(255,255,255,.28);
  cursor:pointer;
  opacity:.9;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.quote-book-svg{
  width:24px;
  height:24px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.38));
}
.quote-book-svg .book-cover{
  fill:rgba(210,220,230,.24);
  stroke:#ffffff;
  stroke-width:3.2;
  stroke-linejoin:round;
}
.quote-book-svg .book-page{
  fill:rgba(255,255,255,.10);
  stroke:rgba(255,255,255,.92);
  stroke-width:2.6;
  stroke-linejoin:round;
}
.quote-book-svg .book-line{
  fill:none;
  stroke:rgba(255,255,255,.82);
  stroke-width:2.4;
  stroke-linecap:round;
}
.quote-shortcut:active{transform:scale(.95);}
.quote-modal.hidden{display:none!important;}
.quote-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:22px;
}
.quote-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(5px);
}
.quote-card{
  position:relative;
  width:min(92vw,430px);
  height:min(68vh,420px);
  min-height:310px;
  padding:34px 24px 24px;
  border:1px solid rgba(255,209,88,.68);
  border-radius:24px;
  background:radial-gradient(circle at top,rgba(255,205,73,.18),transparent 36%),linear-gradient(145deg,rgba(18,30,23,.98),rgba(2,8,5,.98));
  color:#fff4cf;
  box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 28px rgba(255,191,60,.22),inset 0 0 28px rgba(255,213,96,.08);
  text-align:center;
  font-family:Corbel,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  animation:quoteCardIn 180ms ease-out;
  display:flex;
  flex-direction:column;
}
@keyframes quoteCardIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.quote-card-kicker{display:none!important;}
.quote-text{
  font-size:clamp(1.15rem,3.8vw,1.62rem);
  line-height:1.22;
  font-weight:700;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:4px 4px 8px;
  scrollbar-width:thin;
}
.quote-author{flex:0 0 auto;margin-top:14px;color:#e0bd68;font-size:1rem;font-weight:700;}
.quote-next{flex:0 0 auto;margin-top:18px;padding:11px 18px;border:1px solid rgba(255,209,88,.7);border-radius:999px;background:linear-gradient(180deg,#e7bd52,#8f641c);color:#121007;font-family:inherit;font-weight:900;cursor:pointer;}
.quote-close{position:absolute;top:10px;right:12px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#f8df9c;font-size:1.4rem;line-height:1;cursor:pointer;}

@media (max-height:640px){
  .quote-card{height:min(76vh,390px);min-height:280px;padding-top:30px;}
  .quote-text{font-size:clamp(1rem,3.6vw,1.35rem);}
}

/* FINISHED APP 9 — optional landscape reader layout + layout toggle buttons */
.layout-toggle{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(244,240,220,.18);
  background:rgba(244,240,220,.07);
  color:#f4f0dc;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:18px;
  line-height:1;
  box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 0 16px rgba(255,255,255,.03);
  cursor:pointer;
  touch-action:manipulation;
}
.layout-toggle:active{transform:scale(.96)}
.splash-layout-toggle{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  right:14px;
  z-index:5;
  background:rgba(12,22,16,.62);
  backdrop-filter:blur(12px);
}
.reader-layout-toggle{
  flex:0 0 auto;
  margin-left:auto;
  width:30px;
  height:30px;
  border-radius:10px;
  font-size:16px;
}
.compact-reader-head .reader-home-top-btn{margin-left:4px;}
body.force-landscape .layout-toggle,
body.auto-landscape-active .layout-toggle{color:#b8f4a2;border-color:rgba(184,244,162,.36);box-shadow:0 0 16px rgba(115,219,101,.16), inset 0 0 16px rgba(255,255,255,.03);}

@media (min-width:900px) and (orientation:landscape){
  body:not(.force-portrait) .app.reader-mode .lesson-wrap{
    width:min(100%,980px);
    max-width:980px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(315px,420px) minmax(340px,500px);
    grid-template-areas:
      "dots dots"
      "board annot"
      "moves annot"
      "moves variation"
      "moves tools"
      "moves flip";
    align-items:start;
    justify-content:center;
    column-gap:24px;
    row-gap:8px;
    padding:12px 20px 22px;
  }
  body:not(.force-portrait) .app.reader-mode #board.board{grid-area:board;width:min(39vw,420px);height:min(39vw,420px);max-width:420px;max-height:420px;justify-self:end;}
  body:not(.force-portrait) .app.reader-mode .move-nav-row{grid-area:moves;width:min(39vw,420px);max-width:420px;justify-self:end;align-self:start;}
  body:not(.force-portrait) .app.reader-mode .annotation-box{grid-area:annot;width:100%;max-width:500px;min-height:132px;font-size:18px;align-self:start;margin-top:0;}
  body:not(.force-portrait) .app.reader-mode .variation-box{grid-area:variation;width:100%;max-width:500px;}
  body:not(.force-portrait) .app.reader-mode .lesson-tools-row{grid-area:tools;width:100%;max-width:500px;}
  body:not(.force-portrait) .app.reader-mode .flip-board-btn{grid-area:flip;width:100%;max-width:500px;}
  body:not(.force-portrait) .app.reader-mode .game-nav-dots{grid-area:dots;justify-self:center;width:auto;max-width:min(62vw,640px);margin:0 auto 8px;}
  body:not(.force-portrait) .app.reader-mode .reader-head{position:sticky;top:0;z-index:20;}
}

body.force-landscape .app.reader-mode .lesson-wrap{
  width:min(100%,980px);
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(315px,420px) minmax(340px,500px);
  grid-template-areas:
    "dots dots"
    "board annot"
    "moves annot"
    "moves variation"
    "moves tools"
    "moves flip";
  align-items:start;
  justify-content:center;
  column-gap:24px;
  row-gap:8px;
  padding:12px 20px 22px;
}
body.force-landscape .app.reader-mode #board.board{grid-area:board;width:min(39vw,420px);height:min(39vw,420px);max-width:420px;max-height:420px;justify-self:end;}
body.force-landscape .app.reader-mode .move-nav-row{grid-area:moves;width:min(39vw,420px);max-width:420px;justify-self:end;align-self:start;}
body.force-landscape .app.reader-mode .annotation-box{grid-area:annot;width:100%;max-width:500px;min-height:132px;font-size:18px;align-self:start;margin-top:0;}
body.force-landscape .app.reader-mode .variation-box{grid-area:variation;width:100%;max-width:500px;}
body.force-landscape .app.reader-mode .lesson-tools-row{grid-area:tools;width:100%;max-width:500px;}
body.force-landscape .app.reader-mode .flip-board-btn{grid-area:flip;width:100%;max-width:500px;}
body.force-landscape .app.reader-mode .game-nav-dots{grid-area:dots;justify-self:center;width:auto;max-width:min(62vw,640px);margin:0 auto 8px;}

@media (max-width:899px){
  body.force-landscape .app.reader-mode .lesson-wrap{
    grid-template-columns:1fr;
    grid-template-areas:"dots" "board" "moves" "annot" "variation" "tools" "flip";
    padding-left:10px;
    padding-right:10px;
    column-gap:0;
  }
  body.force-landscape .app.reader-mode #board.board,
  body.force-landscape .app.reader-mode .move-nav-row,
  body.force-landscape .app.reader-mode .annotation-box,
  body.force-landscape .app.reader-mode .variation-box,
  body.force-landscape .app.reader-mode .lesson-tools-row,
  body.force-landscape .app.reader-mode .flip-board-btn{width:100%;max-width:520px;justify-self:center;}
}

/* Landscape v2: no splash-screen layout toggle */
.splash-layout-toggle{display:none!important;}

/* FINISHED APP 9 — desktop-only landscape toggle */
.layout-toggle.mobile-disabled{
  opacity:.45;
  filter:grayscale(.45);
}
@media (max-width:899px){
  body.force-landscape .app.reader-mode .lesson-wrap,
  body.auto-landscape-active .app.reader-mode .lesson-wrap{
    display:block!important;
  }
}

/* FINISHED APP 10.1 — refined desktop landscape reader controls
   - Right-side text box has a fixed visual size.
   - Game buttons + Flip Board sit on the same horizontal line as the big move buttons.
   - Long annotation text is fitted smaller by JS so the box does not push controls/scroll. */
.landscape-side-controls{
  width:100%;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:8px;
  order:5;
}
.landscape-side-controls .lesson-tools-row,
.landscape-side-controls .flip-board-btn{
  width:100%;
  max-width:none;
}

@media (min-width:900px) and (orientation:landscape){
  body:not(.force-portrait) .app.reader-mode .lesson-wrap{
    width:min(100%,1020px);
    max-width:1020px;
    grid-template-columns:minmax(300px,410px) minmax(360px,520px);
    grid-template-areas:
      "dots dots"
      "board annot"
      "moves side";
    column-gap:24px;
    row-gap:10px;
    align-items:start;
    overflow:visible;
  }
  body:not(.force-portrait) .app.reader-mode #board.board{
    width:min(38vw,410px);
    height:min(38vw,410px);
    max-width:410px;
    max-height:410px;
    justify-self:end;
  }
  body:not(.force-portrait) .app.reader-mode .annotation-box{
    grid-area:annot;
    width:100%;
    max-width:520px;
    height:min(38vw,410px);
    min-height:0;
    max-height:410px;
    overflow:hidden;
    align-self:start;
    margin-top:0;
    display:flex;
    align-items:flex-start;
  }
  body:not(.force-portrait) .app.reader-mode .move-nav-row{
    grid-area:moves;
    width:min(38vw,410px);
    max-width:410px;
    justify-self:end;
    align-self:start;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls{
    grid-area:side;
    width:100%;
    max-width:520px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 150px;
    gap:10px;
    align-items:stretch;
    align-self:start;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .lesson-tools-row{
    grid-template-columns:1fr .72fr 1fr;
    gap:8px;
    margin:0;
    height:64px;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .lesson-tool-btn,
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .flip-board-btn{
    height:64px;
    min-height:64px;
    padding:8px 10px;
    align-self:stretch;
  }
  body:not(.force-portrait) .app.reader-mode .variation-box{
    grid-area:annot;
    align-self:end;
    justify-self:start;
    width:100%;
    max-width:520px;
    margin-top:0;
  }
}

body.force-landscape .app.reader-mode .lesson-wrap{
  width:min(100%,1020px);
  max-width:1020px;
  grid-template-columns:minmax(300px,410px) minmax(360px,520px);
  grid-template-areas:
    "dots dots"
    "board annot"
    "moves side";
  column-gap:24px;
  row-gap:10px;
  align-items:start;
  overflow:visible;
}
body.force-landscape .app.reader-mode #board.board{
  width:min(38vw,410px);
  height:min(38vw,410px);
  max-width:410px;
  max-height:410px;
  justify-self:end;
}
body.force-landscape .app.reader-mode .annotation-box{
  grid-area:annot;
  width:100%;
  max-width:520px;
  height:min(38vw,410px);
  min-height:0;
  max-height:410px;
  overflow:hidden;
  align-self:start;
  margin-top:0;
  display:flex;
  align-items:flex-start;
}
body.force-landscape .app.reader-mode .move-nav-row{
  grid-area:moves;
  width:min(38vw,410px);
  max-width:410px;
  justify-self:end;
  align-self:start;
}
body.force-landscape .app.reader-mode .landscape-side-controls{
  grid-area:side;
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:10px;
  align-items:stretch;
  align-self:start;
}
body.force-landscape .app.reader-mode .landscape-side-controls .lesson-tools-row{
  grid-template-columns:1fr .72fr 1fr;
  gap:8px;
  margin:0;
  height:64px;
}
body.force-landscape .app.reader-mode .landscape-side-controls .lesson-tool-btn,
body.force-landscape .app.reader-mode .landscape-side-controls .flip-board-btn{
  height:64px;
  min-height:64px;
  padding:8px 10px;
  align-self:stretch;
}
body.force-landscape .app.reader-mode .variation-box{
  grid-area:annot;
  align-self:end;
  justify-self:start;
  width:100%;
  max-width:520px;
  margin-top:0;
}

@media (max-width:899px){
  .landscape-side-controls{width:100%;max-width:520px;margin:0 auto;}
  body.force-landscape .app.reader-mode .landscape-side-controls{
    grid-area:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
    max-width:520px;
  }
}

/* FINISHED APP 10.2 — landscape controls normal spacing
   Keeps desktop landscape annotation fixed and lets the right-side game controls
   stack normally instead of being squeezed into one cramped row. */
@media (min-width:900px) and (orientation:landscape){
  body:not(.force-portrait) .app.reader-mode .lesson-wrap{
    grid-template-columns:minmax(300px,410px) minmax(390px,520px);
    grid-template-areas:
      "dots dots"
      "board annot"
      "moves side";
    row-gap:10px;
    align-items:start;
  }
  body:not(.force-portrait) .app.reader-mode .annotation-box{
    height:min(37vw,390px);
    max-height:390px;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-self:start;
    width:100%;
    max-width:520px;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .lesson-tools-row{
    display:grid;
    grid-template-columns:1fr .72fr 1fr;
    gap:8px;
    height:auto;
    margin:0;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .lesson-tool-btn{
    height:52px;
    min-height:52px;
    padding:10px 12px;
    white-space:nowrap;
  }
  body:not(.force-portrait) .app.reader-mode .landscape-side-controls .flip-board-btn{
    height:44px;
    min-height:44px;
    padding:9px 12px;
    width:100%;
  }
}
body.force-landscape .app.reader-mode .lesson-wrap{
  grid-template-columns:minmax(300px,410px) minmax(390px,520px);
  grid-template-areas:
    "dots dots"
    "board annot"
    "moves side";
  row-gap:10px;
  align-items:start;
}
body.force-landscape .app.reader-mode .annotation-box{
  height:min(37vw,390px);
  max-height:390px;
}
body.force-landscape .app.reader-mode .landscape-side-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-self:start;
  width:100%;
  max-width:520px;
}
body.force-landscape .app.reader-mode .landscape-side-controls .lesson-tools-row{
  display:grid;
  grid-template-columns:1fr .72fr 1fr;
  gap:8px;
  height:auto;
  margin:0;
}
body.force-landscape .app.reader-mode .landscape-side-controls .lesson-tool-btn{
  height:52px;
  min-height:52px;
  padding:10px 12px;
  white-space:nowrap;
}
body.force-landscape .app.reader-mode .landscape-side-controls .flip-board-btn{
  height:44px;
  min-height:44px;
  padding:9px 12px;
  width:100%;
}

/* FINISHED APP 19 — trophy toast at top of board in lesson reader */
.trophy-board-anchor{
  position:relative;
}
.trophy-toast.board-top-trophy-toast{
  position:absolute;
  left:50%;
  top:8px;
  bottom:auto;
  transform:translateX(-50%) translateY(-12px);
  z-index:80;
  max-width:min(88%,440px);
  text-align:center;
  pointer-events:none;
}
.trophy-toast.board-top-trophy-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* FINISHED APP 24.1 — splash page landscape/desktop fit only
   Keeps APP 24 behavior intact; adjusts only the start screen sizing when viewport is wide/short. */
@media (orientation: landscape){
  #startScreen.start-screen{
    min-height:100svh;
    padding:14px 26px;
    place-items:center;
  }

  #startScreen .start-text{
    width:min(700px,96vw);
    margin-top:0;
    transform:scale(.92);
    transform-origin:center center;
  }

  #startScreen .style4-splash .magic-intro{
    font-size:clamp(22px,3.4vw,34px);
    margin:0 0 10px;
  }

  #startScreen .style4-splash .splash-title{
    line-height:.78;
  }

  #startScreen .style4-splash .title-white{
    font-size:clamp(38px,7.8vw,76px);
  }

  #startScreen .style4-splash .title-green{
    font-size:clamp(58px,11.8vw,116px);
  }

  #startScreen .style4-splash .splash-divider{
    width:min(280px,38vw);
    gap:14px;
    margin:8px auto 10px;
  }

  #startScreen .style4-splash .splash-divider strong{
    font-size:clamp(24px,3.5vw,32px);
  }

  #startScreen .style4-splash .splash-subtitle{
    font-size:clamp(13px,2.1vw,17px);
    margin:0 0 14px;
    letter-spacing:.07em;
  }

  #startScreen .style4-splash .primary-btn{
    min-width:190px;
    padding:13px 34px;
    font-size:clamp(18px,2.8vw,22px);
  }
}

/* Extra protection for very short landscape screens, like laptop browser windows. */
@media (orientation: landscape) and (max-height:620px){
  #startScreen .start-text{
    transform:scale(.82);
  }

  #startScreen .style4-splash .magic-intro{
    margin-bottom:6px;
  }

  #startScreen .style4-splash .splash-divider{
    margin:4px auto 6px;
  }

  #startScreen .style4-splash .splash-subtitle{
    margin-bottom:10px;
  }
}


/* Local self-contained chessboard renderer */
.local-chessground{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:100%;height:100%;position:relative;user-select:none;touch-action:manipulation;overflow:hidden;border-radius:12px;background:#d9c7a5}
.local-chessground .lcg-square{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.local-chessground .light{background:#e8d8b8}
.local-chessground .dark{background:#7a8f5a}
.local-chessground .last{box-shadow:inset 0 0 0 999px rgba(255,230,80,.28)}
.local-chessground .mark::after{content:'';position:absolute;width:34%;height:34%;border-radius:50%;background:rgba(40,190,90,.38);z-index:1}
.local-chessground .mark-red::after{background:rgba(220,55,55,.38)}
.local-chessground .mark-yellow::after{background:rgba(240,200,50,.42)}
.local-chessground .mark-blue::after{background:rgba(60,120,230,.35)}
.local-chessground .lcg-piece{font-family:'Times New Roman','DejaVu Serif',serif;font-size:clamp(30px,8.2vmin,72px);line-height:1;z-index:2;filter:drop-shadow(0 2px 1px rgba(0,0,0,.28))}
.local-chessground .lcg-piece.white{color:#f7f0df;text-shadow:0 0 1px #111,0 1px 2px rgba(0,0,0,.55)}
.local-chessground .lcg-piece.black{color:#161616;text-shadow:0 1px 1px rgba(255,255,255,.24)}
.local-chessground small{position:absolute;font-size:10px;font-weight:700;opacity:.55;z-index:3;pointer-events:none}
.local-chessground .rank{left:3px;top:2px}
.local-chessground .file{right:4px;bottom:1px}

/* FINISHED APP ALL LOCAL — Merida/local-piece board test */
.local-chessground.meridia-darkgold-board,
.local-chessground.merida-darkgold-board{
  background:#2b2116;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(235,197,111,.18);
}
.local-chessground.meridia-darkgold-board .light,
.local-chessground.merida-darkgold-board .light{background:#d9c29a !important;}
.local-chessground.meridia-darkgold-board .dark,
.local-chessground.merida-darkgold-board .dark{background:#4b3422 !important;}
.local-chessground.meridia-darkgold-board .last,
.local-chessground.merida-darkgold-board .last{box-shadow:inset 0 0 0 999px rgba(245,199,74,.30) !important;}
.local-chessground .lcg-piece-svg{
  width:78%;
  height:78%;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.38));
}
.local-chessground .lcg-piece-svg.white{
  filter:invert(96%) sepia(13%) saturate(607%) hue-rotate(339deg) brightness(108%) contrast(98%) drop-shadow(0 2px 1px rgba(0,0,0,.55));
}
.local-chessground .lcg-piece-svg.black{
  filter:invert(5%) sepia(4%) saturate(1244%) hue-rotate(350deg) brightness(92%) contrast(93%) drop-shadow(0 2px 1px rgba(230,196,125,.18));
}
.local-chessground small{color:#f1d28a !important;text-shadow:0 1px 2px rgba(0,0,0,.55);opacity:.72 !important;}

/* Uploaded SVG piece-set fix — board grid, white/black color, and PGN arrows */
.local-chessground{position:relative;overflow:hidden;aspect-ratio:1/1;display:block;touch-action:manipulation;}
.local-chessground .lcg-board-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);z-index:1;}
.local-chessground .lcg-square{position:relative;display:flex;align-items:center;justify-content:center;}
.local-chessground .lcg-square.mark-green{box-shadow:inset 0 0 0 999px rgba(53,208,111,.15)}
.local-chessground .lcg-square.mark-red{box-shadow:inset 0 0 0 999px rgba(255,77,77,.15)}
.local-chessground .lcg-square.mark-blue{box-shadow:inset 0 0 0 999px rgba(66,165,255,.15)}
.local-chessground .lcg-square.mark-yellow{box-shadow:inset 0 0 0 999px rgba(255,216,77,.16)}
.local-chessground .lcg-shapes{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));}
.local-chessground .lcg-piece-svg{position:relative;z-index:4;}
.local-chessground small{position:absolute;z-index:5;font-size:10px;font-weight:800;pointer-events:none;}


/* Uploaded SVG recolor pass — use generated SVG colors, do not CSS-invert pieces */
.local-chessground .lcg-piece-svg.white,
.local-chessground .lcg-piece-svg.black{
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.45)) !important;
}

/* Piece style toggle — textless knight button next to layout toggle */
.piece-style-toggle{
  flex:0 0 auto;
  margin-left:4px;
  width:30px;
  height:30px;
  border-radius:10px;
  font-size:17px;
}
.piece-style-toggle.secondary-active{
  color:#f1d28a;
  border-color:rgba(241,210,138,.42);
  box-shadow:0 0 16px rgba(241,210,138,.16), inset 0 0 16px rgba(255,255,255,.03);
}


/* Recropped uploaded piece set default */
.local-chessground .lcg-piece-svg{
  width:86% !important;
  height:86% !important;
  object-fit:contain !important;
}
.local-chessground .lcg-piece-svg.white,
.local-chessground .lcg-piece-svg.black{
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.42)) !important;
}


/* Piece toggle fix — tiny click feedback */
.piece-style-toggle.piece-toggle-pulse{
  animation: pieceTogglePulse .22s ease-out;
}
@keyframes pieceTogglePulse{
  0%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.12) rotate(-8deg); }
  100%{ transform:scale(1) rotate(0deg); }
}

/* FINISHED APP ALL LOCAL THEMES 1 — piece + board theme controls */
.board-theme-toggle{
  flex:0 0 auto;
  margin-left:4px;
  width:30px;
  height:30px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.mini-board-icon{
  width:17px;
  height:17px;
  border-radius:3px;
  display:block;
  box-shadow:0 0 0 1px rgba(244,240,220,.28), 0 2px 6px rgba(0,0,0,.22);
  background:conic-gradient(#4b3422 25%, #d9c29a 0 50%, #4b3422 0 75%, #d9c29a 0);
}
.board-theme-toggle[data-theme="green"] .mini-board-icon{
  background:conic-gradient(#5f7f51 25%, #e4d8b8 0 50%, #5f7f51 0 75%, #e4d8b8 0);
}
.board-theme-toggle[data-theme="ocher"] .mini-board-icon{
  background:conic-gradient(#b8672b 25%, #f0d6a6 0 50%, #b8672b 0 75%, #f0d6a6 0);
}
.board-theme-toggle.board-toggle-pulse{animation:boardTogglePulse .22s ease-out;}
@keyframes boardTogglePulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.12) rotate(4deg)}
  100%{transform:scale(1)}
}
.local-chessground.darkgold-board,
.local-chessground.meridia-darkgold-board,
.local-chessground.merida-darkgold-board{
  background:#2b2116;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(235,197,111,.18);
}
.local-chessground.darkgold-board .light,
.local-chessground.meridia-darkgold-board .light,
.local-chessground.merida-darkgold-board .light{background:#d9c29a !important;}
.local-chessground.darkgold-board .dark,
.local-chessground.meridia-darkgold-board .dark,
.local-chessground.merida-darkgold-board .dark{background:#4b3422 !important;}
.local-chessground.darkgold-board .last,
.local-chessground.meridia-darkgold-board .last,
.local-chessground.merida-darkgold-board .last{box-shadow:inset 0 0 0 999px rgba(245,199,74,.30) !important;}
.local-chessground.green-board{
  background:#25351f;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(218,231,184,.16);
}
.local-chessground.green-board .light{background:#e4d8b8 !important;}
.local-chessground.green-board .dark{background:#5f7f51 !important;}
.local-chessground.green-board .last{box-shadow:inset 0 0 0 999px rgba(255,226,90,.24) !important;}
.local-chessground.ocher-board{
  background:#3b2414;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,199,105,.18);
}
.local-chessground.ocher-board .light{background:#f0d6a6 !important;}
.local-chessground.ocher-board .dark{background:#b8672b !important;}
.local-chessground.ocher-board .last{box-shadow:inset 0 0 0 999px rgba(255,238,112,.23) !important;}
.local-chessground.green-board small,
.local-chessground.ocher-board small,
.local-chessground.darkgold-board small{color:#f1d28a !important;text-shadow:0 1px 2px rgba(0,0,0,.58);opacity:.72 !important;}


/* VARIATION BOARD 1 — automatic light-blue board for optional PGN variations.
   This theme is not part of the normal board-color cycle; it only appears while inside a variation. */
.local-chessground.variationblue-board{
  background:#24455a;
  border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.48), inset 0 0 0 2px rgba(185,226,245,.20);
}
.local-chessground.variationblue-board .light{background:#d7edf8 !important;}
.local-chessground.variationblue-board .dark{background:#7fb8d4 !important;}
.local-chessground.variationblue-board .last{box-shadow:inset 0 0 0 999px rgba(255,236,105,.20) !important;}
.local-chessground.variationblue-board small{color:#f4fbff !important;text-shadow:0 1px 2px rgba(0,0,0,.55);opacity:.75 !important;}

/* FINISHED LOCAL APP 2 — 3D alternate pieces + keyboard panel polish */
.controls-list .customize-shortcut span{
  background:rgba(75, 190, 105, .22) !important;
  color:#7dff93 !important;
  border:1px solid rgba(125,255,147,.24);
  box-shadow:inset 0 0 10px rgba(125,255,147,.08), 0 0 10px rgba(64,180,92,.08);
}
@media (min-width:900px) and (orientation:landscape){
  body.force-landscape .controls-panel,
  body.auto-landscape-active .controls-panel{
    transform:scale(.8);
    transform-origin:center center;
  }
}

/* 3D alternate piece polish — thin black outline + taller royal/minor tall pieces */
.local-chessground .lcg-piece-svg.piece-style-secondary{
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(0,0,0,.85)) !important;
  width:86% !important;
  height:86% !important;
  object-fit:contain !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:102% !important;
  width:auto !important;
  max-width:96% !important;
  object-fit:contain !important;
  transform:translateY(-4%);
  transform-origin:center bottom;
}

/* FINISHED LOCAL APP NEW 3D 2 — alternate Soviet set size/clipping polish */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  align-self:flex-end !important;
  width:auto !important;
  height:86% !important;
  max-width:96% !important;
  object-fit:contain !important;
  transform:none !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:69% !important;
  max-width:78% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:95% !important;
  max-width:108% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:103% !important;
  max-width:112% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:86% !important;
  max-width:96% !important;
}

/* FINISHED LOCAL APP NEW 3D 3 — alignment and scale pass */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-square{
  align-items:center !important;
  justify-content:center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  align-self:flex-end !important;
  width:auto !important;
  height:86% !important;
  max-width:96% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:none !important;
  transform-origin:center bottom !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:69% !important;   /* pawns stay 20% smaller */
  max-width:78% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:95% !important;   /* bishops +10% */
  max-width:106% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:103% !important;  /* queens +20% */
  max-width:116% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:112% !important;  /* kings +30% */
  max-width:124% !important;
}

/* FINISHED LOCAL 3D 4.1 — optical canvas fit for alternate Soviet pieces
   Keep pieces centered in their squares; remove bottom anchoring that made the 3D set sit too low. */
.local-chessground .lcg-square{
  align-items:center !important;
  justify-content:center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  align-self:center !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  align-self:center !important;
  object-position:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  align-self:center !important;
  object-position:center center !important;
}

/* FINISHED LOCAL 3D 5 — knight-reference alignment + 10% smaller rooks
   Apply the knight's optical centering to back-rank alternate pieces; leave pawns as-is. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  align-self:center !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:77.4% !important; /* rooks 10% smaller than the 86% knight reference */
  max-width:86% !important;
  width:auto !important;
}


/* FINISHED LOCAL 3D 6 — bishop-baseline alignment fix
   Locked: pawns, knights, bishops.
   Adjust only rooks, queens, and kings so their bases align with the bishop baseline. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  transform:translateY(8.8%) !important;
  transform-origin:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  transform:translateY(-4%) !important;
  transform-origin:center center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:translateY(-8.5%) !important;
  transform-origin:center center !important;
}


/* FINISHED LOCAL 3D 6 — 3D alternate color + double-size test
   White 3D pieces: ivory cream.
   Black 3D pieces: dark charcoal grey with light grey details/outline.
   Display size: doubled from the current 3D alternate sizing. */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  height:172% !important;
  width:auto !important;
  max-width:192% !important;
  object-fit:contain !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:138% !important;
  max-width:156% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:154.8% !important;
  max-width:172% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:190% !important;
  max-width:212% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:206% !important;
  max-width:232% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:224% !important;
  max-width:248% !important;
}



/* Locked 3D size hierarchy from the approved realistic test */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:110% !important;
  max-width:125% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:124% !important;
  max-width:138% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N{
  height:138% !important;
  max-width:154% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:152% !important;
  max-width:170% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:165% !important;
  max-width:186% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:179% !important;
  max-width:198% !important;
}

/* Subtle move polish: safe CSS transition only.
   No mutation observer, no global blur. */
.local-chessground .lcg-piece-svg,
.local-chessground .lcg-piece{
  transition:transform 160ms cubic-bezier(.2,.8,.2,1), filter 120ms ease !important;
}


/* FINISHED LOCAL 3D 9 — true base-anchor fix
   Current 3D size is locked.
   The bad downward offset is overridden so the visible base sits just above the square edge. */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:translateY(-11%) !important;
  transform-origin:center bottom !important;
  transition:transform 160ms cubic-bezier(.2,.8,.2,1), filter 120ms ease !important;
}

/* Locked 3D size hierarchy from the approved realistic sizing */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:110% !important;
  max-width:125% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:124% !important;
  max-width:138% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N{
  height:138% !important;
  max-width:154% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:152% !important;
  max-width:170% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:165% !important;
  max-width:186% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:179% !important;
  max-width:198% !important;
}



/* Keep pawn exactly where it is */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  transform:translateY(0%) !important;
}

/* Move all other pieces onto the pawn floor line */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:translateY(7%) !important;
}



/* Locked 3D size hierarchy */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:110% !important;
  max-width:125% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:124% !important;
  max-width:138% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N{
  height:138% !important;
  max-width:154% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:152% !important;
  max-width:170% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:165% !important;
  max-width:186% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:179% !important;
  max-width:198% !important;
}

/* Remove piece movement animation/blur for now */
.local-chessground .lcg-piece,
.local-chessground .lcg-piece-svg{
  transition:none !important;
  animation:none !important;
  filter:inherit;
}
.local-chessground .lcg-piece-svg.piece-moving,
.local-chessground .lcg-piece.piece-moving{
  filter:inherit !important;
}


/* FINISHED LOCAL 3D 13 — simple brown alternate + exact 4px base gap
   Black pieces are generated from the white pieces with only the fill changed to light brown.
   All 3D piece bottoms sit 4px above the bottom of their square. */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-square{
  align-items:flex-end !important;
  justify-content:center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary{
  align-self:flex-end !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:translateY(-4px) !important;
  transform-origin:center bottom !important;
  transition:none !important;
  animation:none !important;
}

/* Locked 3D size hierarchy from the approved realistic sizing */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  height:110% !important;
  max-width:125% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R{
  height:124% !important;
  max-width:138% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N{
  height:138% !important;
  max-width:154% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B{
  height:152% !important;
  max-width:170% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  height:165% !important;
  max-width:186% !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:179% !important;
  max-width:198% !important;
}

/* No movement animation for now */
.local-chessground .lcg-piece,
.local-chessground .lcg-piece-svg{
  transition:none !important;
  animation:none !important;
}


/* FINISHED LOCAL 3D 14 - simple placement fix
   Keep design and sizes. Move pieces upward so bases sit fully inside squares. */
.local-chessground .lcg-piece-svg.piece-style-secondary{
  object-position:center bottom !important;
  transform:translateY(-14px) !important;
  transform-origin:center bottom !important;
}


/* FINISHED LOCAL 3D 15 — asset-canvas anchor fix
   Piece placement is now baked into the PNG canvases.
   No vertical CSS transform hacks. Every 3D piece image is a square canvas
   with the piece base sitting 4px above the canvas bottom. */
.local-chessground,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square{
  overflow:visible !important;
}
.local-chessground .lcg-square{
  align-items:center !important;
  justify-content:center !important;
}
.local-chessground .lcg-piece-svg.piece-style-secondary,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  transform-origin:center center !important;
  align-self:center !important;
  transition:none !important;
  animation:none !important;
}


/* FINISHED LOCAL 3D 16 — seamless tall-piece overflow
   Keep current 3D piece size and 4px bottom anchor.
   Allow tall pieces to extend above their square without clipping. */
.local-chessground,
.local-chessground *,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square,
.local-chessground .lcg-piece-layer,
.local-chessground .cg-board,
.local-chessground .cg-wrap,
.local-chessground square,
.local-chessground piece{
  overflow:visible !important;
}

.local-chessground .lcg-piece-svg.piece-style-secondary,
.local-chessground .lcg-piece.piece-style-secondary{
  z-index:30 !important;
  position:relative !important;
  pointer-events:none;
}

.local-chessground .lcg-square{
  isolation:isolate;
}


/* FINISHED LOCAL 3D 18 — king/queen overlap layer + pawn 3px lift
   Keep design, sizes, and placement system. Only fix overlap order and pawn height. */

/* Make sure tall pieces can draw outside their square/board cleanly. */
.local-chessground,
.local-chessground *,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square,
.local-chessground .lcg-piece-layer,
.local-chessground .cg-board,
.local-chessground .cg-wrap,
.local-chessground square,
.local-chessground piece{
  overflow:visible !important;
}

/* Do not isolate individual squares; king/queen overflow needs to layer over neighbors. */
.local-chessground .lcg-square{
  isolation:auto !important;
  position:relative !important;
}

/* Normal alternate pieces. */
.local-chessground .lcg-piece-svg.piece-style-secondary{
  position:relative !important;
  z-index:20 !important;
}

/* Pawns: move all alternate 3D pawns up exactly 3px. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  transform:translateY(-3px) !important;
  z-index:20 !important;
}

/* Kings and queens must sit above all other pieces when their crowns/tops overflow. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  position:relative !important;
  z-index:120 !important;
}

/* Raise the square itself when it contains a 3D king/queen so overflow beats neighboring squares. */
.local-chessground .lcg-square:has(.lcg-piece-svg.piece-style-secondary.piece-K),
.local-chessground .lcg-square:has(.lcg-piece-svg.piece-style-secondary.piece-Q){
  z-index:120 !important;
}


/* FINISHED LOCAL 3D 18 — royal front/no-crop fix + brown black detail lines
   White king/queen should always render in front and not be cropped by neighboring squares. */

.local-chessground,
.local-chessground *,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square,
.local-chessground .lcg-piece-layer,
.local-chessground .cg-board,
.local-chessground .cg-wrap,
.local-chessground square,
.local-chessground piece{
  overflow:visible !important;
}

.local-chessground .lcg-board-grid{
  position:relative !important;
  isolation:isolate !important;
  overflow:visible !important;
}

.local-chessground .lcg-square{
  position:relative !important;
  isolation:auto !important;
  overflow:visible !important;
}

/* White royals always in front. */
.local-chessground .lcg-piece-svg.piece-style-secondary.white.piece-K,
.local-chessground .lcg-piece-svg.piece-style-secondary.white.piece-Q{
  position:relative !important;
  z-index:999999 !important;
}

/* Raise the whole square containing a white royal, not only the image. */
.local-chessground .lcg-square.white-royal-front-square{
  z-index:999998 !important;
  overflow:visible !important;
  isolation:auto !important;
}

.local-chessground .lcg-square.white-royal-front-square .lcg-piece-svg.piece-style-secondary{
  z-index:999999 !important;
}


/* BOARD BAR BUG FIX
   Prevent the board from becoming taller than 8x8 when switching piece styles.
   The extra brown strip was caused by board/background layers extending below the square grid. */
.local-chessground{
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

.local-chessground .lcg-board-grid{
  display:grid !important;
  grid-template-columns:repeat(8, 1fr) !important;
  grid-template-rows:repeat(8, 1fr) !important;
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
}

.local-chessground .lcg-square{
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
}

/* Hide any accidental board/background filler that appears below the real 8x8 grid. */
.local-chessground::after,
.local-chessground .lcg-board-grid::after{
  display:none !important;
  content:none !important;
}

/* Keep piece images from changing board layout in either 2D or 3D mode. */
.local-chessground .lcg-piece-svg,
.local-chessground .lcg-piece{
  flex:0 0 auto !important;
}


/* REDONE 3D 2 — keyboard panel O shortcut visual fallback */
.shortcut-key{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.7em;
  padding:.25em .65em;
  border-radius:12px;
  background:rgba(147, 220, 124, .16);
  color:#b8ff9e;
  font-weight:800;
  margin-right:.75em;
}


/* REDONE 3D 3 — keyboard row fallback */
.keyboard-shortcut-row.shortcut-row{
  display:flex;
  align-items:center;
  gap:1rem;
}






/* Move panel higher, but keep original font/keycap sizing. */
.controls-panel{
  margin-top:-42px !important;
}

/* Portrait: higher position only. */
@media (orientation:portrait){
  .controls-panel{
    margin-top:-36px !important;
  }
}

/* Landscape: higher position only; keep prior scale from earlier builds if any. */
@media (min-width:900px) and (orientation:landscape){
  body.force-landscape .controls-panel,
  body.auto-landscape-active .controls-panel,
  .controls-panel{
    margin-top:-95px !important;
    transform-origin:top center !important;
  }
}



/* Keep it centered in portrait */
@media (orientation:portrait){
  .controls-panel,
  .keyboard-shortcuts-panel,
  .shortcuts-panel,
  #keyboardShortcutsPanel,
  #keyboardPanel{
    top:50% !important;
    left:50% !important;
    transform:translate(-50%, -50%) scale(.84) !important;
    max-width:92vw !important;
  }
}

/* Keep it centered in landscape and slightly smaller */
@media (orientation:landscape){
  .controls-panel,
  .keyboard-shortcuts-panel,
  .shortcuts-panel,
  #keyboardShortcutsPanel,
  #keyboardPanel{
    top:50% !important;
    left:50% !important;
    transform:translate(-50%, -50%) scale(.78) !important;
    max-width:min(86vw, 560px) !important;
    max-height:82vh !important;
  }
}



/* REDONE 3D 14 — ensure orientation icon button is clickable */
#readerLayoutToggle{
  pointer-events:auto !important;
  cursor:pointer !important;
}


/* REDONE 3D 15 — king asset correction
   Kings are rebuilt 20% larger and asset-aligned to rook baseline.
   No CSS king-offset hack. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:none !important;
}


/* REDONE 3D 16 — color/king/orientation patch */
.local-chessground,
.local-chessground *,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square,
.local-chessground .lcg-piece-layer{
  overflow:visible !important;
}

/* Let rebuilt kings rise above the square while keeping the whole image visible.
   The actual king image has a full crown and bottom anchor baked into the asset. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:118% !important;
  width:auto !important;
  max-width:132% !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  transform:none !important;
  z-index:200 !important;
}

/* Keep orientation button clickable. */
#readerLayoutToggle{
  pointer-events:auto !important;
  cursor:pointer !important;
}


/* REDONE 3D 17 — orientation icon active in all layouts */
#readerLayoutToggle{
  pointer-events:auto !important;
  cursor:pointer !important;
  opacity:1 !important;
}
#readerLayoutToggle.mobile-disabled{
  opacity:1 !important;
  pointer-events:auto !important;
}


/* REDONE 3D 19 — ensure orientation icon remains active */
#readerLayoutToggle,
#readerLayoutToggle.mobile-disabled{
  pointer-events:auto !important;
  cursor:pointer !important;
  opacity:1 !important;
}



/* Portrait: keep the existing design, fit inside phone margins. */
@media (orientation:portrait){
  .controls-overlay{
    padding:14px !important;
  }

  .controls-panel{
    width:min(92vw, 440px) !important;
    max-width:92vw !important;
    max-height:calc(100dvh - 28px) !important;
    transform:scale(.94) !important;
    transform-origin:center center !important;
  }
}

/* Landscape: same design, just smaller and truly centered. */
@media (orientation:landscape){
  .controls-overlay{
    padding:18px !important;
  }

  .controls-panel{
    width:min(430px, 72vw) !important;
    max-width:min(430px, 72vw) !important;
    max-height:calc(100dvh - 36px) !important;
    transform:scale(.82) !important;
    transform-origin:center center !important;
  }

  .controls-panel .shortcut-row,
  .controls-panel .keyboard-shortcut-row,
  .controls-panel li{
    margin-top:6px !important;
    margin-bottom:6px !important;
  }
}




   Same design, smaller and centered in landscape. Portrait kept phone-friendly. */
.controls-overlay{
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
}

.controls-panel{
  margin:0 auto !important;
  box-sizing:border-box !important;
}

/* Phone portrait: fit nicely inside screen margins. */
@media (orientation:portrait){
  .controls-overlay{
    padding:14px !important;
  }

  .controls-panel{
    width:min(92vw, 440px) !important;
    max-width:92vw !important;
    max-height:calc(100dvh - 28px) !important;
    overflow:auto !important;
    transform:none !important;
  }
}

/* Desktop/tablet landscape: keep design, but make modal smaller and centered. */
@media (orientation:landscape){
  .controls-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:18px !important;
  }

  .controls-panel{
    width:430px !important;
    max-width:min(430px, 74vw) !important;
    max-height:calc(100dvh - 36px) !important;
    overflow:auto !important;
    transform:scale(.84) !important;
    transform-origin:center center !important;
  }

  .controls-panel .control-row,
  .controls-panel .shortcut-row,
  .controls-panel .keyboard-shortcut-row,
  .controls-panel li{
    margin-top:5px !important;
    margin-bottom:5px !important;
  }
}




   Centers the existing shortcut/keyboard panel in both portrait and landscape.
   No behavior, PGN, piece, board, or asset changes. */
.controls-overlay{
  position:fixed !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

.controls-overlay.hidden{
  display:none !important;
}

.controls-panel{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  margin:0 auto !important;
  transform:none !important;
  transform-origin:center center !important;
  box-sizing:border-box !important;
  width:min(92vw, 460px) !important;
  max-width:92vw !important;
  max-height:calc(100dvh - 32px) !important;
  overflow:auto !important;
}

/* Portrait: centered and phone-safe. */
@media (orientation:portrait){
  .controls-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:14px !important;
  }

  .controls-panel{
    width:min(92vw, 440px) !important;
    max-width:92vw !important;
    max-height:calc(100dvh - 28px) !important;
  }
}

/* Landscape: same design, centered, smaller so it doesn't run all over the page. */
@media (orientation:landscape){
  .controls-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:18px !important;
  }

  .controls-panel{
    width:min(420px, 70vw) !important;
    max-width:min(420px, 70vw) !important;
    max-height:calc(100dvh - 36px) !important;
    transform:scale(.86) !important;
    transform-origin:center center !important;
  }
}


/* ALL LOCAL — mobile orientation button disabled */
@media (max-width:899px){
  #readerLayoutToggle,
  #readerLayoutToggle.mobile-disabled{
    opacity:.35 !important;
    pointer-events:none !important;
    cursor:not-allowed !important;
  }
}


/* ALL LOCAL AUTO ORIENTATION 1 — mobile 3D king baseline fix only
   Moves only the 3D kings slightly upward on mobile so their bases align with the rest of the piece set.
   No asset, PGN, arrow/circle, shortcut, panel, queen, or desktop changes. */
@media (max-width:899px){
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
    transform:translateY(-7px) !important;
  }
}


/* ALL LOCAL AUTO ORIENTATION 1 — landscape shortcut panel version
   Same shortcut design, but landscape uses a smaller centered modal that fits the screen.
   Portrait remains centered and phone-friendly. */
.controls-overlay{
  position:fixed !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  padding:14px !important;
  overflow:hidden !important;
}

.controls-overlay.hidden{
  display:none !important;
}

.controls-panel{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  transform:none !important;
  transform-origin:center center !important;
  overflow:auto !important;
}

/* Portrait: centered, normal stacked panel. */
@media (orientation:portrait){
  .controls-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:14px !important;
  }

  .controls-panel{
    width:min(92vw, 440px) !important;
    max-width:92vw !important;
    max-height:calc(100dvh - 28px) !important;
  }
}

/* Landscape: compact centered version, shorter rows, no giant off-screen panel. */
@media (orientation:landscape){
  .controls-overlay{
    align-items:center !important;
    justify-content:center !important;
    padding:18px !important;
  }

  .controls-panel{
    width:min(520px, 62vw) !important;
    max-width:min(520px, 62vw) !important;
    max-height:calc(100dvh - 36px) !important;
    transform:scale(.78) !important;
    transform-origin:center center !important;
  }

  .controls-panel h2,
  .controls-panel .panel-title,
  .controls-panel .shortcut-title{
    margin-top:0 !important;
    margin-bottom:10px !important;
    font-size:18px !important;
    line-height:1.15 !important;
  }

  .controls-panel .control-row,
  .controls-panel .shortcut-row,
  .controls-panel .keyboard-shortcut-row,
  .controls-panel li{
    min-height:38px !important;
    margin-top:4px !important;
    margin-bottom:4px !important;
    padding-top:6px !important;
    padding-bottom:6px !important;
  }

  .controls-panel kbd,
  .controls-panel .key,
  .controls-panel .shortcut-key{
    min-width:44px !important;
    height:30px !important;
    font-size:15px !important;
    line-height:30px !important;
  }
}

/* BASE BUILD JUNE 5 — mobile-only alternate 3D king base/center correction
   The 3D king PNG is already asset-aligned to the rook baseline and horizontally centered.
   Mobile had a leftover upward transform that lifted only kings; remove that on mobile only.
   Desktop portrait/landscape views are unchanged. */
@media (max-width:899px){
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
    transform:none !important;
    object-position:center bottom !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* BASE BUILD JUNE 5 — mobile-only 3D king visual alignment v2
   Keep desktop untouched. On mobile, the alternate king remains centered horizontally
   and is lifted by half of its 118% oversize so the base lands on the same floor line as rooks. */
@media (max-width:899px){
  .local-chessground .lcg-square:has(.lcg-piece-svg.piece-style-secondary.piece-K){
    align-items:center !important;
    justify-content:center !important;
  }
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
    height:118% !important;
    width:auto !important;
    max-width:132% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    align-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:translateY(-7.627%) !important;
    transform-origin:center center !important;
  }
}

/* BASELINE 2.1 — browser portrait 3D placement matches browser landscape
   Scope: desktop/tablet browser portrait only (900px+ wide, portrait orientation).
   Mobile 3D and browser landscape 3D remain locked/unchanged.
   Uses the approved landscape 3D anchoring: centered squares, centered canvases,
   pawn lift preserved, and king anchored exactly like the landscape reference. */
@media (min-width:900px) and (orientation:portrait){
  .local-chessground,
  .local-chessground *,
  .local-chessground .lcg-board-grid,
  .local-chessground .lcg-square,
  .local-chessground .lcg-piece-layer{
    overflow:visible !important;
  }

  .local-chessground .lcg-square{
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    isolation:auto !important;
  }

  .local-chessground .lcg-piece-svg.piece-style-secondary,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    align-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
    transform-origin:center center !important;
  }

  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    align-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:translateY(-3px) !important;
    transform-origin:center center !important;
  }

  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
    height:118% !important;
    width:auto !important;
    max-width:132% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    align-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
    transform-origin:center bottom !important;
    z-index:200 !important;
  }
}

/* BASELINE 3.1 — browser portrait 3D kings zoom-stable lift
   Scope: desktop/tablet browser portrait only. Replaces the fixed -3px king nudge
   with an equivalent square-relative transform, preserving the approved 100% look
   while scaling with board/piece size during browser zoom. Mobile 3D and landscape
   3D stay locked. No size, artwork, or other piece changes. */
@media (min-width:900px) and (orientation:portrait){
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
    transform:translateY(-3.9%) !important;
  }
}

/* BASELINE 3.2 — universal 3D piece placement reference
   User-approved browser portrait zoom-stable 3D placement is now the master reference.
   Apply the same square-relative centering/anchoring to landscape and mobile portrait too.
   Scope: alternate/3D pieces only. No UI, PGN, chapter, shortcut, or board-theme changes. */
.local-chessground,
.local-chessground *,
.local-chessground .lcg-board-grid,
.local-chessground .lcg-square,
.local-chessground .lcg-piece-layer{
  overflow:visible !important;
}

.local-chessground .lcg-square{
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  isolation:auto !important;
}

.local-chessground .lcg-piece-svg.piece-style-secondary,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  align-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
  transform-origin:center center !important;
}

.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  align-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:translateY(-3px) !important;
  transform-origin:center center !important;
}

.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  height:118% !important;
  width:auto !important;
  max-width:132% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  align-self:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:translateY(-3.9%) !important;
  transform-origin:center bottom !important;
  z-index:200 !important;
}

.local-chessground .lcg-square:has(.lcg-piece-svg.piece-style-secondary.piece-K),
.local-chessground .lcg-square:has(.lcg-piece-svg.piece-style-secondary.piece-Q){
  z-index:200 !important;
}

/* BASELINE 3.3 — 3D depth layering fix
   Placement stays untouched. Neutralize old royal-on-top classes so draw order is controlled
   by per-square visual depth from app.js. */
.local-chessground .lcg-square.white-royal-front-square{
  z-index:auto !important;
}
.local-chessground .lcg-square.white-royal-front-square .lcg-piece-svg.piece-style-secondary{
  z-index:30 !important;
}

/* BASELINE 3.4 — universal 3D kings inside-square base lift
   Keep the approved universal 3D alignment and depth layering.
   Move both black and white alternate 3D kings up enough that the base stays inside its square.
   Scope: king placement only. No size, artwork, other pieces, UI, or functionality changes. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:translateY(-8%) !important;
}

/* BASELINE 3.5 — universal 3D piece shadow-inside lift
   Move every alternate 3D piece upward on its square so the bottom outer shadow stays inside the square.
   Scope: alternate/3D piece vertical placement only. No size, artwork, depth layering, UI, PGN, chapter, or behavior changes. */
.local-chessground .lcg-piece-svg.piece-style-secondary,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-P,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q,
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:translateY(-8%) !important;
}

.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:translateY(-8%) !important;
}

/* BASELINE 3.6 — make kings follow the global shadow-inside lift
   The all-piece shadow-inside move lifted the regular pieces, but the king-specific
   transform was still resolving to the old king lift. Add the same upward lift to
   both black and white alternate 3D kings while preserving size, width, artwork,
   depth layering, UI, PGNs, chapters, and behavior. */
.local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
  transform:translateY(-16%) !important;
}

/* BASELINE 4.1 — mobile 3D proportional scale match
   Keep BASELINE 4 alignment/depth/shadow-inside behavior. On mobile only,
   scale the full alternate 3D piece set together so mobile portrait matches
   the approved browser/landscape visual weight instead of only changing kings.
   No artwork, UI, PGN, board theme, or behavior changes. */
@media (max-width:899px){
  .local-chessground .lcg-piece-svg.piece-style-secondary,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-P,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
    transform:translateY(-8%) scale(1.08) !important;
    transform-origin:center center !important;
  }

  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
    transform:translateY(-16%) scale(1.08) !important;
    transform-origin:center bottom !important;
  }
}


/* BASELINE 4.2 — mobile 3D overflow unclip, scale locked
   Keep the approved mobile 3D size/scale and alignment from BASELINE 4.1.
   Fix only clipping: allow alternate 3D pieces/shadows to render beyond square
   boundaries, while app.js keeps depth-based occupied-square layering. */
@media (max-width:899px){
  #board.board,
  .board-area,
  .cg-wrap,
  .local-chessground,
  .local-chessground *,
  .local-chessground .lcg-board-grid,
  .local-chessground .lcg-square,
  .local-chessground .lcg-piece-layer{
    overflow:visible !important;
  }

  .local-chessground .lcg-board-grid{
    position:relative !important;
    isolation:isolate !important;
  }

  .local-chessground .lcg-square{
    position:relative !important;
    isolation:auto !important;
  }

  .local-chessground .lcg-piece-svg.piece-style-secondary{
    position:relative !important;
    z-index:50 !important;
    pointer-events:none !important;
  }

  /* Lock the approved mobile scale/placement from the previous build. */
  .local-chessground .lcg-piece-svg.piece-style-secondary,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-P,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-R,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-N,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-B,
  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-Q{
    transform:translateY(-8%) scale(1.08) !important;
    transform-origin:center center !important;
  }

  .local-chessground .lcg-piece-svg.piece-style-secondary.piece-K{
    transform:translateY(-16%) scale(1.08) !important;
    transform-origin:center bottom !important;
  }
}

/* HIERARCHY DONE + overlay order fix — arrows/colors under pieces, pieces always on top.
   Board colors/marks stay on the square layer, PGN arrows/circles sit above squares,
   and pieces render in a separate transparent layer above all visual marks. */
.local-chessground .lcg-board-grid{
  z-index:1 !important;
}
.local-chessground .lcg-shapes{
  z-index:2 !important;
  pointer-events:none !important;
  overflow:visible !important;
}
.local-chessground .lcg-piece-layer{
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  grid-template-columns:repeat(8,1fr) !important;
  grid-template-rows:repeat(8,1fr) !important;
  z-index:3 !important;
  pointer-events:none !important;
  overflow:visible !important;
  isolation:isolate !important;
}
.local-chessground .lcg-piece-layer .lcg-piece-square{
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.local-chessground .lcg-piece-layer .lcg-piece-svg{
  position:relative !important;
  z-index:50 !important;
  pointer-events:none !important;
}

/* ARROWS COLORS DONE + O removed — landscape shortcut popup bookmark-bar clearance
   Landscape only: move keyboard shortcut panel down slightly so browser/bookmark bars do not cover it.
   No content, size, portrait, mobile, board, or shortcut behavior changes. */
@media (orientation:landscape){
  .controls-panel{
    transform:translateY(28px) scale(.78) !important;
    transform-origin:center center !important;
  }
}

/* ARROWSANDPANEL FIXED — landscape shortcut popup lower/closer to screen middle
   Landscape only: lower the existing Keyboard Shortcuts panel a bit more.
   No content, size, portrait, mobile, board, or 3D piece changes. */
@media (orientation:landscape){
  .controls-panel{
    transform:translateY(72px) scale(.78) !important;
    transform-origin:center center !important;
  }
}