:root{--stage-w:1920;--stage-h:1080;--ink:#5a2b18;--gold:#f1b568;--green:#26b34a}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#24140d}body{font-family:"Arial Black","Helvetica Neue",Arial,sans-serif;-webkit-user-select:none;user-select:none;touch-action:manipulation}button{border:0;background:transparent;padding:0;margin:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}img{display:block;pointer-events:none}
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#24140d}.stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:center center;overflow:hidden;background:#e6b96f}.stage-bg,.game-bg{position:absolute;inset:0;width:1920px;height:1080px;object-fit:fill}.oak-bg{z-index:0;transition:filter .85s ease,opacity .85s ease}.view{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;visibility:hidden}.view.active{opacity:1;visibility:visible;pointer-events:auto}.oak-chrome{position:absolute;inset:0;z-index:4;pointer-events:none;transition:opacity .65s ease,transform .8s cubic-bezier(.16,.78,.2,1)}.oak-logo{position:absolute;left:533px;top:86px;width:855px;height:304px}.oak-footer{position:absolute;left:119px;top:972px;width:1237px;height:52px}.phase-setup .oak-chrome,.phase-game .oak-chrome{opacity:0;transform:scale(.98)}
.fx-layer{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;transition:opacity .8s ease,filter .8s ease}.fall-piece{position:absolute;top:-300px;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(85,41,15,.24));will-change:transform;animation:pieceFall linear infinite}.fall-piece.left-lane{left:var(--x)}.fall-piece.right-lane{left:var(--x)}@keyframes pieceFall{0%{transform:translate3d(0,-360px,0) rotate(var(--r0));opacity:.15}6%{opacity:1}92%{opacity:1}100%{transform:translate3d(var(--drift),1440px,0) rotate(var(--r1));opacity:.2}}
.phase-game .fx-layer{opacity:.18;filter:blur(2px)}
.home-view{transition:opacity .7s ease}.home-button{position:absolute;width:846px;height:134px;opacity:0;transform:translateY(34px) scale(.985);transition:opacity .7s ease,transform .8s cubic-bezier(.18,.8,.2,1),filter .2s}.home-button>.home-button-bg{position:absolute;inset:0;width:100%;height:100%}.home-button span,.setup-start span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:900;letter-spacing:-3px;text-shadow:0 2px 1px rgba(56,22,7,.45)}.home-button span{font-size:58px}.home-button-1{left:538px;top:443px;height:133px}.home-button-2{left:538px;top:590px;height:134px}.phase-home .home-button{opacity:1;transform:none}.phase-home .home-button-1{transition-delay:.08s}.phase-home .home-button-2{transition-delay:.18s}.home-button:active,.setup-start:active,.wood-choice:active,.time-choice:active,.game-action:active{filter:brightness(.9);transform:scale(.985)}
.setup-view{transition:opacity .55s ease}.setup-view.active{animation:setupReveal .82s cubic-bezier(.16,.8,.18,1) both}@keyframes setupReveal{0%{opacity:0;clip-path:inset(46% 46% 46% 46% round 80px);transform:scale(.985)}100%{opacity:1;clip-path:inset(0 0 0 0 round 0);transform:none}}.setup-window{position:absolute;left:193px;top:70px;width:1534px;height:940px}.setup-title{position:absolute;color:var(--gold);font-weight:900;text-align:center;line-height:1;letter-spacing:-7px;text-shadow:0 2px 1px rgba(54,21,8,.35)}.two-title{left:430px;top:130px;width:1060px;font-size:102px}.computer-title{left:390px;top:132px;width:1140px;font-size:95px}
.wood-choice{position:absolute;width:278px;height:263px}.wood-choice .wood-base{position:absolute;inset:0;width:278px;height:263px}.wood-choice::after,.time-choice::after{content:"";position:absolute;inset:4px;border:5px solid transparent;border-radius:27px;pointer-events:none}.wood-choice.selected::after,.time-choice.selected::after{border-color:var(--green);box-shadow:0 0 0 1px rgba(18,77,28,.5)}.choice-piece{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);object-fit:contain}.white-pawn{width:174px}.black-pawn{width:174px}.random-piece{width:174px}.two-side-row .wood-choice:nth-child(1){left:521px;top:280px}.two-side-row .wood-choice:nth-child(2){left:821px;top:280px}.two-side-row .wood-choice:nth-child(3){left:1121px;top:280px}.computer-side-row .wood-choice{width:181px;height:171.17px}.computer-side-row .wood-choice .wood-base{width:181px;height:171.17px}.computer-side-row .wood-choice:nth-child(1){left:672px;top:290px}.computer-side-row .wood-choice:nth-child(2){left:870px;top:290px}.computer-side-row .wood-choice:nth-child(3){left:1068px;top:290px}.computer-side-row .choice-piece{width:112px;height:124px;object-fit:contain}.computer-side-row .wood-choice::after{border-width:4px;border-radius:20px}
.time-choice{position:absolute;width:207px;height:196.5px;color:var(--gold);font-weight:900}.time-choice img{position:absolute;inset:0;width:100%;height:100%}.time-choice span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:58px;letter-spacing:-3px;text-shadow:0 2px 1px rgba(56,22,7,.4)}.two-time-row .time-choice:nth-child(1){left:390px;top:574px}.two-time-row .time-choice:nth-child(2){left:620px;top:574px}.two-time-row .time-choice:nth-child(3){left:850px;top:574px}.two-time-row .time-choice:nth-child(4){left:1080px;top:574px}.two-time-row .time-choice:nth-child(5){left:1310px;top:574px}.computer-time-row .time-choice{width:152px;height:144.29px}.computer-time-row .time-choice span{font-size:43px}.computer-time-row .time-choice:nth-child(1){left:544px;top:493px}.computer-time-row .time-choice:nth-child(2){left:711px;top:493px}.computer-time-row .time-choice:nth-child(3){left:878px;top:493px}.computer-time-row .time-choice:nth-child(4){left:1045px;top:493px}.computer-time-row .time-choice:nth-child(5){left:1212px;top:493px}.computer-time-row .time-choice::after{border-width:4px;border-radius:18px}
.difficulty-art{position:absolute;left:538px;top:632px;width:852px;height:177px}.difficulty-art>img:first-child{position:absolute;inset:0;width:852px;height:177px}.difficulty-knob{position:absolute;top:21px;width:61px;height:63px;left:279px;transition:left .18s ease}.difficulty-art input{position:absolute;left:24px;top:20px;width:805px;height:70px;opacity:.001;cursor:pointer}.setup-start{position:absolute;left:538px;top:824px;width:846px;height:133px}.setup-start img{position:absolute;inset:0;width:846px;height:133px}.setup-start span{font-size:48px;letter-spacing:-2px}.computer-start{top:824px}
.game-view{z-index:7;transition:opacity .4s ease}.game-view.entering{animation:gameReveal 1.05s cubic-bezier(.16,.78,.12,1) both}@keyframes gameReveal{0%{opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(1.035)}100%{opacity:1;clip-path:circle(1150px at 50% 50%);transform:none}}.game-bg{z-index:0}.game-copyright{position:absolute;left:22px;top:435px;width:30px;height:214px;z-index:3}.board{position:absolute;left:420px;top:0;width:1080px;height:1080px;display:grid;grid-template-columns:repeat(8,135px);grid-template-rows:repeat(8,135px);background:url('assets/grid.png') center -1px/1080px 1082px no-repeat;overflow:hidden;z-index:4}.sq{position:relative;width:135px;height:135px;display:flex;align-items:center;justify-content:center}.sq::before{content:"";position:absolute;left:50%;top:50%;width:102px;height:102px;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.35);transform-origin:50% 50%;transition:opacity .13s ease,transform .15s ease}.sq.legal::before{opacity:.92;background:rgba(39,183,70,.86);transform:translate(-50%,-50%) scale(1)}.sq.capture::before{opacity:.95;background:transparent;border:7px solid var(--green);transform:translate(-50%,-50%) scale(1)}.sq.last-from::before{opacity:.92;background:rgba(39,183,70,.86);transform:translate(-50%,-50%) scale(1)}.sq.last-to::before{opacity:.9;background:rgba(39,183,70,.32);border:7px solid var(--green);transform:translate(-50%,-50%) scale(1)}.sq.selected::before{opacity:1;background:rgba(39,183,70,.18);border:7px solid var(--green);transform:translate(-50%,-50%) scale(1)}.sq.check{box-shadow:inset 0 0 0 7px rgba(184,30,24,.62)}.piece{position:absolute;left:50%;top:50%;z-index:2;width:91%;height:91%;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(30,10,4,.18));transform:translate(-50%,-50%);transform-origin:50% 50%;pointer-events:none}.piece.face-right{transform:translate(-50%,-50%) rotate(45deg)}.piece.face-left{transform:translate(-50%,-50%) rotate(-45deg)}.captured{position:absolute;left:40px;width:275px;z-index:4;display:grid;grid-template-columns:128px 128px;grid-auto-rows:118px;align-content:start}.captured-white{top:22px}.captured-black{bottom:24px;align-content:end}.captured img{width:126px;height:116px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(0,0,0,.17))}.captured img.face-right{transform:rotate(45deg)}.captured img.face-left{transform:rotate(-45deg)}.eval-bar{position:absolute;left:359px;top:25px;width:40px;height:1030px;background:#351407;z-index:4;overflow:hidden}.eval-white{position:absolute;left:0;bottom:0;width:100%;height:50%;background:#f1b96b;transition:height .38s cubic-bezier(.2,.8,.2,1)}.eval-mid{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(75,36,15,.18)}.move-layer{position:absolute;left:420px;top:0;width:1080px;height:1080px;z-index:9;pointer-events:none}.move-ghost{position:absolute;width:123px;height:123px;object-fit:contain;transition:transform .235s cubic-bezier(.2,.74,.16,1);filter:drop-shadow(0 7px 6px rgba(0,0,0,.22))}.clock-art{position:absolute;left:1539px;top:16px;width:206px;height:1050px;z-index:3}.digital-clock{position:absolute;left:1567px;width:150px;height:320px;z-index:5;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:62px;font-weight:900;letter-spacing:-4px;color:#8a663e;text-shadow:0 1px 0 rgba(0,0,0,.3);pointer-events:none}.digital-clock-top{top:204px}.digital-clock-bottom{top:558px}.digital-clock.active{color:#f2b568}.clock-touch{position:absolute;left:1565px;width:154px;height:142px;z-index:6}.clock-touch-top{top:36px}.clock-touch-bottom{top:909px}.game-logo{position:absolute;left:1777px;top:383px;width:114px;height:319px;object-fit:contain;z-index:4}.game-action{position:absolute;width:126px;height:125px;z-index:6}.game-action img{width:126px;height:125px}.top-draw{left:1770px;top:16px}.top-resign{left:1770px;top:171px}.bottom-resign{left:1770px;top:786px}.bottom-draw{left:1770px;top:941px}.game-action.disabled{opacity:1;pointer-events:none}
.cinematic-shade{position:absolute;inset:0;z-index:20;pointer-events:none;background:radial-gradient(circle at center,rgba(50,20,7,0) 0 28%,rgba(45,18,7,.38) 100%);opacity:0;transition:opacity .5s ease}.cinematic-shade.flash{animation:shadePulse .9s ease both}@keyframes shadePulse{0%{opacity:0}45%{opacity:.62}100%{opacity:0}}.toast{position:absolute;left:960px;top:540px;z-index:30;width:276px;height:261px;display:none;align-items:center;justify-content:center;text-align:center;color:var(--gold);font-size:42px;line-height:.94;font-weight:900;letter-spacing:-2px;background:url('assets/button3.png') center/276px 261px no-repeat;padding:30px;transform:translate(-50%,-50%)}.toast.show{display:flex;animation:toastIn .42s cubic-bezier(.18,.8,.18,1) both}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.modal{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;background:rgba(42,19,8,.12)}.modal.show{display:flex;animation:modalFade .38s ease both}@keyframes modalFade{from{opacity:0}to{opacity:1}}.modal-content{position:absolute;inset:0}.modal-card{position:absolute;background:url('assets/button7.png?v=316') center/100% 100% no-repeat;color:var(--gold);text-align:center;filter:drop-shadow(0 18px 18px rgba(0,0,0,.25));animation:cardIn .62s cubic-bezier(.14,.86,.16,1) both}@keyframes cardIn{0%{opacity:0;transform:translateY(24px) scale(.82)}100%{opacity:1;transform:none}}.promotion-card{left:618.5px;top:215px;width:683px;height:650px;padding:78px 165px 54px}.promotion-card h2{font-size:52px;line-height:.95;margin:0 0 28px}.promotion-card p{font-size:27px;margin:0 0 30px;white-space:nowrap}.promotion-grid{display:grid;grid-template-columns:150px 150px;gap:10px 18px;justify-content:center}.promotion-grid button{position:relative;width:150px;height:150px}.promotion-grid button::after{content:"";position:absolute;inset:4px;border:5px solid transparent;border-radius:24px}.promotion-grid button:hover::after,.promotion-grid button:focus::after{border-color:var(--green)}.promotion-grid img{width:142px;height:142px;object-fit:contain;margin:auto}.screen-modal{position:absolute;inset:0;width:1920px;height:1080px;object-fit:fill}.modal-hotspot{position:absolute;z-index:5;cursor:pointer}.modal-hotspot:active{transform:scale(.99)}
@media (prefers-reduced-motion:reduce){.fall-piece{animation-duration:12s!important}.setup-view.active,.game-view.entering{animation-duration:.2s}.home-button{transition-duration:.2s}}
.result-main{left:618.5px;top:62px;width:683px;height:650px;padding:76px 50px 45px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.result-main h2{margin:0;color:var(--gold);font-size:58px;line-height:.94;letter-spacing:-3px}.result-main img{width:210px;height:210px;object-fit:contain}.result-back{position:absolute;left:681.5px;top:760px;width:557px;height:270px;z-index:6;background:url('assets/button6.png') center/557px 270px no-repeat;color:var(--gold);font-size:52px;line-height:.95;font-weight:900;letter-spacing:-3px;text-shadow:0 2px 1px rgba(56,22,7,.45);animation:cardIn .62s cubic-bezier(.14,.86,.16,1) both}

.result-bg{position:absolute;inset:0;width:1920px;height:1080px;object-fit:fill}

/* v2.3 precision / physical-board UI corrections */
.oak-footer{left:341.5px;top:972px}
.difficulty-knob{top:58px}
.difficulty-art input{top:50px;height:82px}

/* Subtle rollover on every visible button without changing layout geometry. */
button{transition:scale .18s cubic-bezier(.2,.8,.2,1),filter .18s ease}
@media (hover:hover) and (pointer:fine){button:not(.disabled):hover{scale:1.035}}
button:active{scale:.985}
.home-button:active,.setup-start:active,.wood-choice:active,.time-choice:active,.game-action:active{filter:brightness(.92);transform:none}

/* New clock artwork + opposite-facing physical clock readouts. */
.clock-touch{pointer-events:none}
.digital-clock{writing-mode:horizontal-tb;transform:none;letter-spacing:-4px}
.digital-clock-top{top:204px;transform:rotate(90deg)}
.digital-clock-bottom{top:558px;transform:rotate(-90deg)}

/* Resign lives on the wooden end caps of the clock. Draw takes the old resign slot. */
.top-resign{left:1579px;top:43px;transform:rotate(180deg)!important}
.bottom-resign{left:1579px;top:898px}
.top-draw{left:1770px;top:171px;transform:rotate(180deg)!important}
.bottom-draw{left:1770px;top:786px}
.game-action.disabled{opacity:0;visibility:hidden;pointer-events:none}

/* Knight alignment is based on its round wooden base, not its protruding nose. */
.piece.piece-n.face-right{left:calc(50% - 3px);top:calc(50% + 3px)}
.piece.piece-n.face-left{left:calc(50% + 3px);top:calc(50% + 3px)}
.move-ghost.piece-n.face-right{margin-left:-3px;margin-top:3px}
.move-ghost.piece-n.face-left{margin-left:3px;margin-top:3px}

/* Modal rule: keep the designed wooden cards only; the live game remains visible and blurs behind them. */
.game-view{transition:opacity .4s ease,filter .34s ease}
.game-view.modal-blur{filter:blur(7px) brightness(.76)}
.modal{background:transparent}
.modal-facing-top{transform:rotate(180deg)}

/* Result cards are centered exactly on the 1080x1080 board (whose center is stage 960,540). */
.end-screen{position:absolute;left:960px;top:540px;width:683px;height:968px;transform:translate(-50%,-50%);transform-origin:center}
.end-screen.modal-facing-top{transform:translate(-50%,-50%) rotate(180deg)}
.end-screen .result-main{left:0;top:0;width:683px;height:650px}
.end-screen .result-back{left:63px;top:698px;width:557px;height:270px}
.end-screen .result-main h2:empty{visibility:hidden}

/* Draw offer: same proportions as windows-06, but transparent around the wooden controls. */
.draw-offer-screen{position:absolute;left:960px;top:540px;width:1080px;height:620px;transform:translate(-50%,-50%);transform-origin:center}
.draw-offer-screen.modal-facing-top{transform:translate(-50%,-50%) rotate(180deg)}
.draw-offer-main{position:absolute;left:30px;top:54px;width:500px;height:500px;box-sizing:border-box;background:url('assets/button7.png?v=341') center/100% 100% no-repeat;color:var(--gold);text-align:center;padding:62px 54px 54px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;filter:drop-shadow(0 18px 18px rgba(0,0,0,.25));animation:cardIn .62s cubic-bezier(.14,.86,.16,1) both}
.draw-offer-main h2{width:100%;max-height:214px;overflow:hidden;overflow-wrap:anywhere;word-break:normal;font-size:44px;line-height:1;letter-spacing:-1.25px;margin:0 0 20px;font-weight:900}.draw-offer-main p{width:100%;max-height:112px;overflow:hidden;overflow-wrap:anywhere;word-break:normal;font-size:38px;line-height:1.02;letter-spacing:-1px;margin:0;font-weight:900}
.draw-offer-choice{position:absolute;left:570px;width:455px;height:220px;box-sizing:border-box;padding:0 44px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;overflow-wrap:anywhere;word-break:normal;background:url('assets/button6.png') center/100% 100% no-repeat;color:var(--gold);font-size:64px;line-height:1;font-weight:900;letter-spacing:-2px;text-shadow:0 2px 1px rgba(56,22,7,.45);filter:drop-shadow(0 16px 14px rgba(0,0,0,.22));animation:cardIn .62s cubic-bezier(.14,.86,.16,1) both}
.draw-accept{top:55px}.draw-decline{top:330px}

.notice-modal-card{position:absolute;left:960px;top:540px;width:276px;height:261px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--gold);font-size:42px;line-height:.94;font-weight:900;letter-spacing:-2px;background:url('assets/button3.png') center/276px 261px no-repeat;padding:30px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.24));animation:toastIn .42s cubic-bezier(.18,.8,.18,1) both}

/* Castling chooser from windows-05, shown only when the player actually initiates a castle. */
.castling-screen{position:absolute;left:960px;top:540px;width:1040px;height:500px;transform:translate(-50%,-50%);display:flex;gap:40px;justify-content:center;align-items:center;transform-origin:center}
.castling-screen.modal-facing-top{transform:translate(-50%,-50%) rotate(180deg)}
.castle-option{position:relative;width:480px;height:460px;background:url('assets/button7.png?v=316') center/100% 100% no-repeat;color:var(--gold);font-weight:900;font-size:39px;line-height:.93;letter-spacing:-2px;padding:42px 40px 24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;filter:drop-shadow(0 18px 18px rgba(0,0,0,.22));animation:cardIn .62s cubic-bezier(.14,.86,.16,1) both}
.castle-option.preferred{outline:5px solid var(--green);outline-offset:-18px;border-radius:64px}
.castle-option.unavailable{opacity:.28;pointer-events:none}
.castle-arrows{width:112px;height:112px;object-fit:contain;margin:15px 0 3px}
.castle-pieces{display:flex;align-items:center;justify-content:center;gap:12px}.castle-pieces img{width:112px;height:112px;object-fit:contain}


/* v2.4 gameplay polish */
/* Both clock readouts face inward toward the board. */
.digital-clock-top,.digital-clock-bottom{transform:rotate(90deg)}

/* Base-disc optical centering: compensate for the knight's protruding head/trunk and tiny bishop optical offset. */
.piece.piece-n{top:calc(50% - 2.5px);transform-origin:50% calc(50% + 2.5px)}
.piece.piece-n.face-right{left:50%;transform:translate(-50%,-50%) rotate(45deg)}
.piece.piece-n.face-left{left:50%;transform:translate(-50%,-50%) rotate(-45deg)}
.piece.piece-b{top:calc(50% - .75px);transform-origin:50% calc(50% + .75px)}
.piece.piece-b.face-right{left:50%;transform:translate(-50%,-50%) rotate(45deg)}
.piece.piece-b.face-left{left:50%;transform:translate(-50%,-50%) rotate(-45deg)}
/* Remove the old bounding-box nudges. */
.piece.piece-n.face-right,.piece.piece-n.face-left{margin:0}

/* Smooth piece glide uses a centered wrapper so the visual base stays aligned to square centers. */
.move-ghost-wrap,.capture-ghost-wrap{position:absolute;left:0;top:0;width:0;height:0;will-change:transform,opacity;pointer-events:none}
.move-ghost,.capture-ghost{position:absolute;left:0;top:0;width:123px;height:123px;object-fit:contain;transform:translate(-50%,-50%);transform-origin:center;filter:drop-shadow(0 7px 6px rgba(0,0,0,.20));pointer-events:none}
.move-ghost.face-right,.capture-ghost.face-right{transform:translate(-50%,-50%) rotate(45deg)}
.move-ghost.face-left,.capture-ghost.face-left{transform:translate(-50%,-50%) rotate(-45deg)}
.move-ghost.piece-n,.capture-ghost.piece-n{transform-origin:50% calc(50% + 2.5px);margin-top:-2.5px}
.move-ghost.piece-b,.capture-ghost.piece-b{transform-origin:50% calc(50% + .75px);margin-top:-.75px}
.capture-ghost{filter:drop-shadow(0 8px 7px rgba(0,0,0,.18))}
.captured img.captured-arrival{animation:capturedArrive .34s cubic-bezier(.18,.86,.2,1) both}
@keyframes capturedArrive{0%{opacity:.35;scale:.82}100%{opacity:1;scale:1}}

/* Never reveal the oak background for a frame between setup and game. */
.game-view.entering{animation:gameRevealSmooth .9s cubic-bezier(.16,.78,.12,1) both}
@keyframes gameRevealSmooth{0%{opacity:0;clip-path:circle(0 at 50% 50%);transform:scale(1.018);filter:blur(2px)}22%{opacity:1}100%{opacity:1;clip-path:circle(1150px at 50% 50%);transform:none;filter:none}}

/* Match the authored result-window spacing instead of distributing content to the card edges. */
.result-main{display:block;padding:0;position:absolute}
.result-main .result-title{position:absolute;left:35px;right:35px;top:92px;margin:0;text-align:center}
.result-main .result-piece{position:absolute;left:50%;top:210px;width:210px;height:210px;transform:translateX(-50%);object-fit:contain}
.result-main .result-sub{position:absolute;left:35px;right:35px;top:474px;margin:0;text-align:center}

/* Castling is a single informational notice, never a second decision UI. */
.toast{max-width:340px}


/* Piece artwork is now anchored by the circular wooden base, not by PNG bounds. */
.piece-anchor{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;pointer-events:none}
.piece-anchor .piece{left:-61.5px;top:-61.5px;width:123px;height:123px;transform:none;transform-origin:61.5px 61.5px;object-fit:contain}
.piece-anchor .piece.face-right{transform:rotate(45deg)}
.piece-anchor .piece.face-left{transform:rotate(-45deg)}
.piece-anchor .piece.piece-n{left:-61.5px;top:-64px;transform-origin:61.5px 64px}
.piece-anchor .piece.piece-n.piece-w{left:-61px;transform-origin:61px 64px}
.piece-anchor .piece.piece-b{left:-61.5px;top:-62px;transform-origin:61.5px 62px}

/* v2.5 precision: deterministic setup transition + true wooden-disc centering */
/* Setup must never inherit the home-screen cinematic shade pulse. */
.phase-setup .cinematic-shade{opacity:0!important;animation:none!important}

/* The green move/last-move marker is the square center. Each piece is positioned so
   the center of its circular wooden base — not the PNG rectangle — lands on that point. */
.piece-anchor .piece{left:-61.5px;top:-61.5px;width:123px;height:123px;transform-origin:61.5px 61.5px}
.piece-anchor .piece.piece-n.color-w{left:-61px;top:-64.1px;transform-origin:61px 64.1px}
.piece-anchor .piece.piece-n.color-b{left:-61.6px;top:-65.2px;transform-origin:61.6px 65.2px}
.piece-anchor .piece.piece-b.color-w{left:-61.25px;top:-61.5px;transform-origin:61.25px 61.5px}
.piece-anchor .piece.piece-b.color-b{left:-61.5px;top:-61.5px;transform-origin:61.5px 61.5px}

/* Moving/captured ghosts use the identical base-center calibration, so pieces do not
   jump a few pixels when an animation starts or ends. */
.move-ghost,.capture-ghost{left:-61.5px;top:-61.5px;width:123px;height:123px;transform:none;transform-origin:61.5px 61.5px;margin:0}
.move-ghost.face-right,.capture-ghost.face-right{transform:rotate(45deg)}
.move-ghost.face-left,.capture-ghost.face-left{transform:rotate(-45deg)}
.move-ghost.piece-n.color-w,.capture-ghost.piece-n.color-w{left:-61px;top:-64.1px;transform-origin:61px 64.1px;margin:0}
.move-ghost.piece-n.color-b,.capture-ghost.piece-n.color-b{left:-61.6px;top:-65.2px;transform-origin:61.6px 65.2px;margin:0}
.move-ghost.piece-b.color-w,.capture-ghost.piece-b.color-w{left:-61.25px;top:-61.5px;transform-origin:61.25px 61.5px;margin:0}
.move-ghost.piece-b.color-b,.capture-ghost.piece-b.color-b{left:-61.5px;top:-61.5px;transform-origin:61.5px 61.5px;margin:0}


/* v2.6 direct-manipulation chess + landscape-only mobile */
html,body,#viewport{width:100%;height:100%;min-height:100dvh;overscroll-behavior:none;-webkit-touch-callout:none}
.board,.board *{touch-action:none}
.board{cursor:default}
.board.dragging{cursor:grabbing}
.board.dragging .sq{cursor:grabbing}
.sq.drag-over::before{opacity:1!important;transform:translate(-50%,-50%) scale(1.08)!important;filter:drop-shadow(0 0 8px rgba(38,179,74,.35))}

.drag-ghost-wrap{position:absolute;left:0;top:0;width:0;height:0;z-index:18;pointer-events:none;will-change:transform}
.drag-ghost{position:absolute;left:-61.5px;top:-61.5px;width:123px;height:123px;object-fit:contain;transform:none;transform-origin:61.5px 61.5px;filter:drop-shadow(0 12px 10px rgba(0,0,0,.26));pointer-events:none;will-change:transform}
.drag-ghost.face-right{transform:rotate(45deg)}
.drag-ghost.face-left{transform:rotate(-45deg)}
.drag-ghost.piece-n.color-w{left:-61px;top:-64.1px;transform-origin:61px 64.1px}
.drag-ghost.piece-n.color-b{left:-61.6px;top:-65.2px;transform-origin:61.6px 65.2px}
.drag-ghost.piece-b.color-w{left:-61.25px;top:-61.5px;transform-origin:61.25px 61.5px}
.drag-ghost.piece-b.color-b{left:-61.5px;top:-61.5px;transform-origin:61.5px 61.5px}

.rotate-device{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:#e3b66d url('assets/back-white.png') center/cover no-repeat;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));text-align:center;color:var(--gold)}
.rotate-card{position:relative;width:min(82vw,520px);aspect-ratio:1.05;background:url('assets/button7.png?v=316') center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;filter:drop-shadow(0 16px 20px rgba(61,25,8,.28));padding:10%}
.rotate-phone{position:relative;width:88px;height:142px;border:9px solid #23140d;border-radius:22px;margin-bottom:30px;transform:rotate(-90deg);animation:rotateHint 1.8s cubic-bezier(.2,.8,.2,1) infinite alternate}
.rotate-phone::before{content:"";position:absolute;left:50%;top:8px;width:34px;height:5px;border-radius:5px;background:#23140d;transform:translateX(-50%)}
.rotate-phone span{position:absolute;inset:15px 8px 10px;border-radius:10px;background:rgba(28,22,18,.82)}
.rotate-title{font-size:clamp(26px,8vw,48px);line-height:.92;font-weight:900;letter-spacing:-2px;text-shadow:0 2px 1px rgba(56,22,7,.4)}
.rotate-copy{margin-top:15px;font-size:clamp(12px,3.8vw,22px);font-weight:900;letter-spacing:-.5px;opacity:.86}
@keyframes rotateHint{from{transform:rotate(-90deg) scale(.96)}to{transform:rotate(0deg) scale(1)}}
@media (orientation:portrait) and (pointer:coarse){#viewport{visibility:hidden}.rotate-device{display:flex}}
@media (orientation:portrait) and (hover:none){#viewport{visibility:hidden}.rotate-device{display:flex}}
@media (orientation:landscape){.rotate-device{display:none!important}}

/* ============================================================
   CESS! v3.0 — PLAYABILITY / REVIEW / ZEN / STUDY
   The authored 1920x1080 composition remains untouched.
   ============================================================ */
.time-rail-arrow{position:absolute;z-index:12;width:62px;height:96px;color:var(--gold);font-size:76px;line-height:1;font-weight:900;text-shadow:0 2px 1px rgba(56,22,7,.45);opacity:.88;display:flex;align-items:center;justify-content:center}
.time-rail-arrow.disabled{opacity:.2;pointer-events:none}.two-time-prev{left:314px;top:620px}.two-time-next{left:1544px;top:620px}.computer-time-prev{left:470px;top:517px}.computer-time-next{left:1386px;top:517px}
.two-time-row .time-choice span{font-size:46px}.computer-time-row .time-choice span{font-size:34px}.difficulty-label{position:absolute;left:90px;right:90px;top:139px;height:30px;text-align:center;color:var(--gold);font-size:20px;line-height:30px;letter-spacing:.3px;font-weight:900;text-shadow:0 2px 1px rgba(56,22,7,.42);white-space:nowrap}

/* Small hidden utility dock; the board composition stays clean until requested. */
.game-tools-button{position:absolute;left:1770px;top:710px;width:126px;height:62px;z-index:14;background:url('assets/button3.png') center/100% 100% no-repeat;color:var(--gold);font-size:34px;font-weight:900;letter-spacing:5px;text-shadow:0 2px 1px rgba(56,22,7,.45);opacity:.68}
.game-tools-button:hover{opacity:1}.game-tools-panel{position:absolute;left:1590px;top:486px;width:300px;min-height:486px;z-index:18;display:none;grid-template-columns:1fr 1fr;gap:10px;padding:38px 26px 28px;background:url('assets/button7.png?v=316') center/100% 100% no-repeat;filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));animation:cardIn .36s cubic-bezier(.14,.86,.16,1) both}
.game-tools-panel.show{display:grid}.game-tools-panel button{height:62px;border-radius:16px;background:rgba(37,20,12,.42);box-shadow:inset 0 0 0 2px rgba(241,181,104,.18);color:var(--gold);font-size:18px;font-weight:900;letter-spacing:-.3px}.game-tools-panel button.active{box-shadow:inset 0 0 0 4px var(--green)}.game-tools-panel button.disabled{opacity:.27;pointer-events:none}.move-list-compact{grid-column:1/-1;min-height:88px;max-height:116px;overflow:hidden;color:rgba(241,181,104,.82);font:900 15px/1.45 "Helvetica Neue",Arial,sans-serif;letter-spacing:.1px;padding:10px 8px;text-align:left}

/* Premove and Study hint stay subtle and never fight the green legal-move language. */
.sq.premove-from::before{opacity:.94!important;background:rgba(241,181,104,.18)!important;border:6px dashed rgba(241,181,104,.94)!important;transform:translate(-50%,-50%) scale(.94)!important}.sq.premove-to::before{opacity:.96!important;background:rgba(241,181,104,.28)!important;border:7px solid rgba(241,181,104,.96)!important;transform:translate(-50%,-50%) scale(.82)!important}
.sq.hint-from::before{opacity:.92!important;background:rgba(241,181,104,.18)!important;border:6px solid rgba(241,181,104,.72)!important;transform:translate(-50%,-50%) scale(.9)!important}.sq.hint-to::before{opacity:.98!important;background:rgba(241,181,104,.30)!important;border:7px solid rgba(241,181,104,.96)!important;transform:translate(-50%,-50%) scale(.78)!important}
.sq.check::after{content:"";position:absolute;inset:10px;border-radius:24px;pointer-events:none;box-shadow:inset 0 0 0 5px rgba(173,35,27,.48),0 0 0 rgba(173,35,27,0);animation:checkBreath .72s ease-out both}@keyframes checkBreath{0%{box-shadow:inset 0 0 0 8px rgba(173,35,27,.82),0 0 26px rgba(173,35,27,.42)}100%{box-shadow:inset 0 0 0 4px rgba(173,35,27,.42),0 0 0 rgba(173,35,27,0)}}
.eval-white{transition:height .46s cubic-bezier(.18,.82,.18,1)}.eval-bar.mate-eval .eval-white{transition-duration:.62s}

/* Zen: only the physical set remains. The tiny tools handle stays available to exit. */
.play-zen .captured,.play-zen .eval-bar,.play-zen .clock-art,.play-zen .digital-clock,.play-zen .game-logo,.play-zen .game-action,.play-zen .game-copyright{opacity:0!important;pointer-events:none!important;transition:opacity .3s ease}.play-zen .sq::before,.play-zen .sq::after{display:none!important}.play-zen .game-tools-button{opacity:.22}.play-zen .game-tools-button:hover{opacity:.86}

/* Result choreography: three compact actions replace the oversized single back button. */
.result-actions{position:absolute;left:-125px;top:700px;width:933px;height:210px;display:flex;gap:18px;justify-content:center;align-items:center}
.result-actions button{width:298px;height:176px;background:url('assets/button6.png') center/100% 100% no-repeat;color:var(--gold);font-size:33px;font-weight:900;letter-spacing:-1.5px;text-shadow:0 2px 1px rgba(56,22,7,.45);filter:drop-shadow(0 12px 12px rgba(0,0,0,.18));animation:cardIn .52s cubic-bezier(.14,.86,.16,1) both}

/* Promotion appears close to the promotion square, not as a giant central interruption. */
.promotion-card-compact{width:560px!important;height:310px!important;padding:48px 38px 32px!important;transform-origin:center}.promotion-card-compact h2{font-size:38px!important;line-height:1!important;margin:0 0 28px!important;white-space:nowrap}.promotion-card-compact .promotion-grid{display:grid!important;grid-template-columns:repeat(4,112px)!important;gap:8px!important;justify-content:center!important}.promotion-card-compact .promotion-grid button{width:112px!important;height:112px!important}.promotion-card-compact .promotion-grid img{width:108px!important;height:108px!important}.promotion-card-compact.modal-facing-top{transform:rotate(180deg)}

/* Review lives in the left information well, leaving every board square visible. */
.review-panel{position:absolute;left:36px;top:318px;width:300px;height:446px;z-index:16;display:none;grid-template-columns:1fr 1fr;gap:10px;padding:42px 26px 28px;background:url('assets/button7.png?v=316') center/100% 100% no-repeat;color:var(--gold);filter:drop-shadow(0 18px 18px rgba(0,0,0,.24));text-align:center}.review-mode .review-panel{display:grid;animation:cardIn .46s cubic-bezier(.14,.86,.16,1) both}.review-grade{grid-column:1/-1;font-size:34px;font-weight:900;letter-spacing:-1px;align-self:end}.review-move{grid-column:1/-1;min-height:50px;font-size:18px;font-weight:900;line-height:1.2}.review-nav{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.review-nav button,.review-panel>button{height:58px;border-radius:15px;background:rgba(37,20,12,.44);box-shadow:inset 0 0 0 2px rgba(241,181,104,.18);color:var(--gold);font-size:17px;font-weight:900}.review-nav button{font-size:42px}.review-panel button.disabled{opacity:.24;pointer-events:none}.review-mode .game-action,.review-mode .game-tools-button{display:none!important}

/* PGN loader uses the same wood-card language, no opaque full-screen panel. */
.pgn-loader{left:610px;top:145px;width:700px;height:790px;padding:64px 64px 48px}.pgn-loader h2{margin:0 0 28px;font-size:52px}.pgn-loader textarea{width:100%;height:470px;resize:none;border:0;outline:0;border-radius:22px;padding:24px;background:rgba(24,18,14,.86);color:#f0c27e;font:700 18px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 0 0 4px rgba(0,0,0,.34)}.pgn-loader input[type=file]{width:100%;margin:16px 0;color:var(--gold);font-weight:900}.pgn-loader-actions{display:flex;gap:18px}.pgn-loader-actions button{flex:1;height:74px;border-radius:18px;background:rgba(37,20,12,.5);color:var(--gold);font-size:24px;font-weight:900;box-shadow:inset 0 0 0 2px rgba(241,181,104,.2)}

/* Smooth physical pickup without enlarging the authored artwork itself. */
.drag-ghost{filter:drop-shadow(0 14px 11px rgba(0,0,0,.28));will-change:transform,filter}.board.dragging .sq:not(.drag-over){transition:filter .1s ease}.captured img{transition:transform .22s cubic-bezier(.18,.82,.18,1),opacity .2s ease}
.piece.promotion-morph{animation:promotionMorph .22s cubic-bezier(.18,.86,.18,1) both}@keyframes promotionMorph{0%{opacity:.18;scale:.78;filter:blur(2px) drop-shadow(0 4px 3px rgba(30,10,4,.1))}100%{opacity:1;scale:1;filter:blur(0) drop-shadow(0 4px 3px rgba(30,10,4,.18))}}


/* v3.1 polish: softer setup reveal avoids intermittent blink/flicker on setup entry. */
.setup-view.active{animation:setupRevealSoft .46s cubic-bezier(.18,.82,.18,1) both!important}
@keyframes setupRevealSoft{0%{opacity:0;transform:translateY(12px) scale(.992)}100%{opacity:1;transform:none}}

/* Clearer move language: legal moves remain green, last move becomes warm amber. */
.sq.last-from::before{opacity:.96;background:rgba(241,181,104,.78)!important;transform:translate(-50%,-50%) scale(.88)!important}
.sq.last-to::before{opacity:.94;background:rgba(241,181,104,.15)!important;border:7px solid rgba(241,181,104,.92)!important;transform:translate(-50%,-50%) scale(.92)!important}
.sq.selected::before{opacity:1;background:rgba(255,226,163,.12)!important;border:7px solid rgba(255,220,133,.98)!important;transform:translate(-50%,-50%) scale(1)!important}
.sq.legal::before{background:rgba(39,183,70,.88)!important}
.sq.capture::before{border-color:rgba(39,183,70,.98)!important}

/* Difficulty label split into two lines so the level and its name never collide. */
.difficulty-label{left:82px;right:82px;top:120px;height:46px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;text-align:center}
.difficulty-label .difficulty-main{display:block;font-size:20px;line-height:1;font-weight:900;letter-spacing:.4px}
.difficulty-label .difficulty-sub{display:block;font-size:15px;line-height:1.05;font-weight:900;letter-spacing:.15px;opacity:.96;white-space:nowrap}

/* Wooden micro-buttons for all newly added controls. */
.game-tools-button{left:1762px;top:707px;width:132px;height:68px;background:url('assets/button3.png') center/100% 100% no-repeat;color:var(--gold);font-size:34px;letter-spacing:3px;opacity:.78;transition:opacity .2s ease,transform .2s ease}
.game-tools-button.open{opacity:1;transform:scale(.98)}
.game-tools-panel{left:1568px;top:444px;width:332px;min-height:564px;display:none;grid-template-columns:repeat(2,1fr);gap:12px;padding:38px 24px 28px;background:url('assets/button7.png?v=316') center/100% 100% no-repeat;filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));animation:cardIn .36s cubic-bezier(.14,.86,.16,1) both}
.game-tools-panel.show{display:grid}
.tools-panel-title{grid-column:1/-1;align-self:end;text-align:center;color:var(--gold);font-size:28px;font-weight:900;letter-spacing:-1px;text-shadow:0 2px 1px rgba(56,22,7,.45)}
.wood-ui-btn{position:relative;height:102px;background:transparent;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12));transition:transform .16s ease,filter .16s ease}
.wood-ui-btn:active{transform:scale(.98)}
.wood-ui-btn .wood-ui-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.wood-ui-btn span{position:relative;z-index:1;padding:0 14px;color:var(--gold);font-size:21px;font-weight:900;letter-spacing:-.8px;line-height:1;text-align:center;text-shadow:0 2px 1px rgba(56,22,7,.42)}
.wood-ui-btn.active{filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))}
.wood-ui-btn.active::after{content:'';position:absolute;inset:7px;border:4px solid var(--green);border-radius:20px}
.wood-ui-btn.disabled{opacity:.3;pointer-events:none}
.wood-ui-btn-wide{grid-column:1/-1;height:108px}
.wood-ui-btn-wide span{font-size:24px;letter-spacing:-1px}
.move-list-compact{grid-column:1/-1;min-height:96px;max-height:118px;overflow:hidden;color:rgba(241,181,104,.84);font:900 15px/1.45 "Helvetica Neue",Arial,sans-serif;letter-spacing:.1px;padding:10px 8px 2px;text-align:left}
.tools-close{margin-top:-4px}

.review-panel{height:490px;grid-template-columns:1fr 1fr;gap:12px;padding:40px 22px 26px}
.review-grade{font-size:33px}
.review-move{font-size:17px;min-height:42px}
.review-nav{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.review-nav .wood-ui-btn{height:88px}
.review-nav .wood-ui-btn span{font-size:44px;line-height:.8}
.review-panel>.wood-ui-btn-wide{height:92px}
.review-panel>.wood-ui-btn-wide span{font-size:22px}

/* PGN loader matches the game's oak language, including custom file chooser. */
.pgn-loader{left:590px;top:132px;width:740px;height:816px;padding:62px 58px 46px}
.pgn-loader h2{margin:0 0 12px;font-size:50px;text-align:center;letter-spacing:-2px}
.pgn-loader-copy{margin:0 0 20px;text-align:center;color:rgba(241,181,104,.88);font-size:19px;font-weight:900;letter-spacing:.2px}
.pgn-loader textarea{width:100%;height:430px;resize:none;border:0;outline:0;border-radius:24px;padding:24px 24px 22px;background:linear-gradient(180deg,rgba(31,22,17,.92),rgba(20,15,11,.92));color:#f0c27e;font:700 18px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 0 0 4px rgba(106,67,34,.52),inset 0 0 0 7px rgba(0,0,0,.34)}
.pgn-loader textarea::placeholder{color:rgba(240,194,126,.56)}
.pgn-file-row{display:grid;grid-template-columns:1fr;gap:10px;margin:16px 0 0}
.pgn-hidden-input{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.wood-file-button{height:98px;display:flex}
.wood-file-button span{font-size:22px}
.pgn-file-name{min-height:44px;border-radius:18px;padding:10px 16px;background:rgba(28,20,14,.8);box-shadow:inset 0 0 0 3px rgba(93,61,35,.48);color:rgba(241,181,104,.92);font-size:17px;font-weight:900;letter-spacing:.15px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgn-loader-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.pgn-loader-actions .wood-ui-btn{height:106px}
.pgn-loader-actions .wood-ui-btn span{font-size:26px}


/* ============================================================
   CESS! v3.1.1 — WOOD UI POLISH
   Uses only supplied wooden artwork for newly-added controls.
   ============================================================ */
:root{--cess-last:#d58b45;--cess-legal:#27b746;--cess-selected:#f5d28d}

/* Three distinct board languages: last move = amber, legal = green, selected = cream. */
.sq.last-from::before{width:94px;height:94px;opacity:.9!important;background:rgba(213,139,69,.72)!important;border:0!important;transform:translate(-50%,-50%) scale(1)!important}
.sq.last-to::before{width:98px;height:98px;opacity:.96!important;background:rgba(213,139,69,.12)!important;border:7px solid rgba(213,139,69,.96)!important;transform:translate(-50%,-50%) scale(1)!important}
.sq.selected::before{width:104px;height:104px;opacity:1!important;background:rgba(245,210,141,.08)!important;border:6px solid rgba(245,210,141,.98)!important;transform:translate(-50%,-50%) scale(1)!important}
.sq.legal::before{width:90px;height:90px;background:rgba(39,183,70,.88)!important;border:0!important;transform:translate(-50%,-50%) scale(1)!important}
.sq.capture::before{width:98px;height:98px;background:rgba(39,183,70,.08)!important;border:7px solid rgba(39,183,70,.98)!important}

/* Time rail arrows now use the supplied square walnut button artwork. */
.time-rail-arrow{width:72px;height:68px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:.96;filter:drop-shadow(0 7px 8px rgba(0,0,0,.12));transition:scale .18s ease,opacity .18s ease}
.time-rail-arrow img{position:absolute;inset:0;width:72px;height:68px;object-fit:contain}
.time-rail-arrow span{position:relative;z-index:1;margin-top:-7px;color:var(--gold);font-size:58px;font-weight:900;text-shadow:0 2px 1px rgba(56,22,7,.48)}
.time-rail-arrow.disabled{opacity:.22;pointer-events:none}
.two-time-prev{left:308px;top:635px}.two-time-next{left:1540px;top:635px}.computer-time-prev{left:462px;top:532px}.computer-time-next{left:1384px;top:532px}

/* Difficulty name is a separate wooden object to the right of the authored 1–10 rail. */
.difficulty-label{left:875px;right:auto;top:20px;width:286px;height:138px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:19px 30px 17px;background:url('assets/button6.png') center/100% 100% no-repeat;filter:drop-shadow(0 8px 9px rgba(0,0,0,.13));pointer-events:none;text-align:center;z-index:4}
.difficulty-label .difficulty-main{font-size:25px;line-height:1;font-weight:900;letter-spacing:-.4px}
.difficulty-label .difficulty-sub{font-size:16px;line-height:1.22;font-weight:900;letter-spacing:.05px;white-space:normal}

/* Tools can always close from the same •••/× handle; panel never traps it underneath. */
.game-tools-button{z-index:23!important;opacity:.86;filter:drop-shadow(0 7px 8px rgba(0,0,0,.15))}
.game-tools-button.open{opacity:1;scale:.98}
.game-tools-panel{z-index:21;left:1560px;top:450px;width:340px;min-height:550px;grid-template-columns:repeat(2,136px);grid-auto-rows:min-content;justify-content:center;align-content:start;gap:10px 12px;padding:31px 28px 25px;background:url('assets/button7.png?v=316') center/100% 100% no-repeat}
.tools-panel-title{font-size:27px;line-height:1;margin-bottom:4px}

/* Existing horizontal wooden button6 is scaled proportionally for text controls. */
.wood-ui-btn{width:136px;height:66px;justify-self:center;background:transparent;filter:drop-shadow(0 6px 7px rgba(0,0,0,.12));transition:scale .16s ease,filter .16s ease}
.wood-ui-btn .wood-ui-bg{width:100%;height:100%;object-fit:contain}
.wood-ui-btn span{padding:0 8px;font-size:16px;letter-spacing:-.45px;line-height:.95}
.wood-ui-btn.active::after{inset:5px;border-width:3px;border-radius:15px}
.wood-ui-btn-wide{grid-column:1/-1;width:222px;height:108px}
.wood-ui-btn-wide span{font-size:20px;letter-spacing:-.6px}
.move-list-compact{grid-column:1/-1;min-height:76px;max-height:82px;padding:7px 6px 0;font-size:13px;line-height:1.35}
.tools-close{margin-top:-2px}

/* Review uses the same authored wood controls; square button5 for navigation. */
.review-panel{height:500px;grid-template-columns:1fr 1fr;gap:10px;padding:38px 22px 24px}
.review-nav{gap:18px;justify-items:center}
.review-nav .wood-ui-btn{width:88px;height:84px}
.review-nav .wood-ui-btn span{font-size:46px;margin-top:-6px}
.review-panel>.wood-ui-btn-wide{width:220px;height:107px}
.review-panel>.wood-ui-btn-wide span{font-size:19px}

/* End-of-game additions also preserve button6's original horizontal proportions. */
.result-actions{top:716px;height:176px;gap:20px}
.result-actions button{width:270px;height:131px;background-size:270px 131px;font-size:29px;letter-spacing:-1px}

/* PGN: no native browser widgets are visible. The text well echoes the clock's inset black face,
   while every action uses the supplied walnut buttons. */
.pgn-loader{left:600px;top:142px;width:720px;height:796px;padding:48px 56px 40px}
.pgn-loader h2{margin:0 0 8px;font-size:48px;line-height:1}
.pgn-loader-copy{margin:0 0 15px;font-size:17px}
.pgn-text-well{width:100%;height:310px;padding:10px;border-radius:28px;background:rgba(79,43,22,.72);box-shadow:inset 0 0 0 3px rgba(241,181,104,.15),inset 0 0 16px rgba(0,0,0,.34)}
.pgn-loader textarea{width:100%;height:100%;margin:0;resize:none;border:0;outline:0;border-radius:19px;padding:20px;background:linear-gradient(180deg,rgba(25,24,21,.96),rgba(17,17,15,.98));color:#efbd78;font:700 17px/1.42 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 0 0 3px rgba(0,0,0,.52);caret-color:#f1b568}
.pgn-loader textarea:focus{box-shadow:inset 0 0 0 3px rgba(0,0,0,.52),0 0 0 4px rgba(241,181,104,.18)}
.pgn-file-row{gap:7px;margin:12px 0 0;justify-items:center}
.wood-file-button{width:250px;height:121px}
.wood-file-button span{font-size:19px}
.pgn-file-name{width:390px;min-height:36px;padding:8px 14px;border-radius:16px;background:rgba(24,22,18,.9);box-shadow:inset 0 0 0 3px rgba(93,61,35,.48);font-size:14px}
.pgn-loader-actions{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:13px;justify-items:center}
.pgn-loader-actions .wood-ui-btn{width:210px;height:102px}
.pgn-loader-actions .wood-ui-btn span{font-size:22px}

/* Gentle rollover: no layout shift and no oversized web-button feel. */
@media (hover:hover) and (pointer:fine){.wood-ui-btn:not(.disabled):hover,.time-rail-arrow:not(.disabled):hover,.game-tools-button:hover{scale:1.025;filter:brightness(1.035) drop-shadow(0 8px 9px rgba(0,0,0,.14))}}
/* When a current legal target happens to be part of the previous move, keep both signals readable. */
.sq.last-to.legal::before,.sq.last-from.legal::before{background:rgba(39,183,70,.9)!important;border:0!important;box-shadow:0 0 0 7px rgba(213,139,69,.9)!important;width:86px;height:86px}
.sq.last-to.capture::before,.sq.last-from.capture::before{background:rgba(39,183,70,.07)!important;border:7px solid rgba(39,183,70,.98)!important;box-shadow:0 0 0 6px rgba(213,139,69,.82)!important;width:92px;height:92px}

/* v3.1.1 refinement: keep original asset proportions instead of stretching wood artwork. */
.game-tools-button{left:1820px;top:707px;width:72px;height:68px;background-size:72px 68px;font-size:28px;letter-spacing:1px}
.game-tools-panel{left:1560px;top:455px;width:332px;min-height:0;background:none!important;filter:none!important;padding:0;grid-template-columns:repeat(2,136px);gap:10px 12px;justify-content:end}
.tools-panel-title{grid-column:1/-1;width:222px;height:54px;justify-self:end;display:flex;align-items:center;justify-content:center;background:url('assets/button6.png') center/222px 108px no-repeat;background-position:center;color:var(--gold);font-size:20px;margin:0 0 -1px;filter:drop-shadow(0 6px 7px rgba(0,0,0,.12))}
.move-list-compact{width:284px;justify-self:end;border-radius:16px;padding:9px 12px;background:rgba(23,18,14,.72);box-shadow:inset 0 0 0 2px rgba(241,181,104,.14);text-align:right}
.wood-ui-btn-wide{width:222px;height:108px;justify-self:end}

.review-panel{height:500px;background:none!important;filter:none!important;padding:20px 16px 20px;align-content:start}
.review-grade,.review-move{width:268px;justify-self:center;border-radius:15px;background:rgba(23,18,14,.62);box-shadow:inset 0 0 0 2px rgba(241,181,104,.12)}
.review-grade{padding:10px 8px 8px;font-size:29px}
.review-move{padding:8px 8px;min-height:34px;font-size:15px}
.review-nav .wood-ui-btn{width:72px;height:68px}
.review-nav .wood-ui-btn span{font-size:39px;margin-top:-5px}
.review-panel>.wood-ui-btn-wide{width:178px;height:86px;justify-self:center}
.review-panel>.wood-ui-btn-wide span{font-size:16px}

/* button7 itself is kept near its native aspect ratio in the PGN card. */
.pgn-loader{left:600px;top:197px;width:720px;height:686px;padding:40px 54px 34px}
.pgn-loader h2{margin:0 0 7px;font-size:46px}
.pgn-loader-copy{margin:0 0 12px;font-size:16px}
.pgn-text-well{height:230px;padding:9px;border-radius:26px}
.pgn-loader textarea{font-size:16px;padding:18px}
.pgn-file-row{gap:6px;margin:10px 0 0}
.wood-file-button{width:206px;height:100px}
.wood-file-button span{font-size:17px}
.pgn-file-name{width:360px;min-height:32px;padding:7px 12px;font-size:13px}
.pgn-loader-actions{gap:18px;margin-top:10px}
.pgn-loader-actions .wood-ui-btn{width:186px;height:90px}
.pgn-loader-actions .wood-ui-btn span{font-size:19px}

/* v3.1.2 — UI placement/polish. Keep the 1920x1080 artboard intact, but remove visible side gutters. */
#viewport{
  --ambient-bg:url('assets/back-white.png');
  background:#e6ad69;
  isolation:isolate;
}
#viewport::before{
  content:"";
  position:absolute;
  inset:-28px;
  z-index:0;
  pointer-events:none;
  background-image:var(--ambient-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(8px);
  transform:scale(1.025);
}
.stage{z-index:1}

/* Keep the system/tools control in the player's lower control column: draw -> small gap -> tools. */
.bottom-resign{top:734px}
.bottom-draw{top:859px}
.game-tools-button{
  left:1797px;
  top:1000px;
  width:72px;
  height:54px;
  background:url('assets/button3.png') center/72px 54px no-repeat;
  font-size:26px;
  letter-spacing:1px;
  opacity:.9;
}

/* Tools are a flat rounded window. Wood artwork belongs to real buttons only. */
.game-tools-panel{
  left:1536px;
  top:420px;
  width:356px;
  min-height:0;
  padding:24px 24px 22px;
  grid-template-columns:repeat(2,136px);
  justify-content:center;
  gap:10px 12px;
  border-radius:30px;
  border:2px solid rgba(241,181,104,.22);
  background:linear-gradient(180deg,rgba(50,31,21,.97),rgba(27,19,14,.98))!important;
  box-shadow:0 18px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,225,175,.08),inset 0 0 0 1px rgba(43,21,10,.7);
  filter:none!important;
}
.tools-panel-title{
  grid-column:1/-1;
  width:auto;
  height:auto;
  min-height:38px;
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 6px 7px;
  margin:0 0 2px;
  color:var(--gold);
  background:none!important;
  border:0;
  border-bottom:1px solid rgba(241,181,104,.17);
  border-radius:0;
  filter:none!important;
  text-align:left;
  font-size:21px;
  letter-spacing:-.4px;
}
.move-list-compact{
  width:284px;
  justify-self:center;
  text-align:left;
  background:rgba(18,16,13,.64);
  border:1px solid rgba(241,181,104,.13);
  box-shadow:inset 0 0 12px rgba(0,0,0,.24);
}
.game-tools-panel .wood-ui-btn-wide{justify-self:center}

/* Informational labels are flat — never a button image behind headings/copy. */
.difficulty-label{
  background:rgba(49,29,19,.72)!important;
  border:2px solid rgba(241,181,104,.18);
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 7px 12px rgba(0,0,0,.10);
  filter:none!important;
}

/* Review keeps the compact structure; its informational areas stay flat. */
.review-grade,.review-move{
  background:rgba(25,20,16,.68)!important;
  border:1px solid rgba(241,181,104,.15);
  box-shadow:inset 0 0 10px rgba(0,0,0,.22)!important;
}

/* PGN is a real rounded window, not a stretched wood button. Action controls still use the original wood assets. */
.pgn-loader.modal-card{
  background:linear-gradient(180deg,rgba(54,34,23,.98),rgba(27,19,14,.99))!important;
  border:2px solid rgba(241,181,104,.2);
  border-radius:34px;
  box-shadow:0 24px 42px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,225,175,.08),inset 0 0 0 1px rgba(31,17,10,.72);
  filter:none!important;
}
.pgn-loader h2,.pgn-loader-copy{background:none!important;filter:none!important}
.pgn-file-name{background:rgba(18,17,15,.78);border:1px solid rgba(241,181,104,.13);box-shadow:inset 0 0 10px rgba(0,0,0,.22)}

@media (hover:hover) and (pointer:fine){
  .game-tools-button:hover{opacity:1;scale:1.035}
}
/* Keep a quiet physical gap between the lower resign and draw controls. */
.bottom-resign{top:718px}

/* ============================================================
   CESS! v3.1.3 — precision UI + Opening Academy
   No new artwork: all interactive wood controls reuse supplied assets.
   ============================================================ */

/* Home gains one more authored wooden action without changing the stage proportions. */
.home-button-3{left:538px;top:737px;height:133px}
.phase-home .home-button-3{transition-delay:.28s}
.home-button-3 span{font-size:50px;letter-spacing:-2.5px}

/* VS COMPUTER: keep the difficulty description aligned with the physical rail, close to it,
   but comfortably inside the authored window edge. */
.difficulty-label{
  left:866px!important;
  right:auto!important;
  top:20px!important;
  width:232px!important;
  height:137px!important;
  padding:18px 18px 15px!important;
  border-radius:19px!important;
}
.difficulty-label .difficulty-main{font-size:23px!important;line-height:1!important}
.difficulty-label .difficulty-sub{font-size:14px!important;line-height:1.18!important}

/* Time rail glyphs are optically centered inside the existing square walnut artwork. */
.time-rail-arrow{display:flex!important;align-items:center!important;justify-content:center!important}
.time-rail-arrow span{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  font-size:51px!important;
  transform:translateY(-1px)!important;
}

/* Resign controls return to the centers of the clock's real wooden end caps.
   They never intrude into either black clock face. */
.top-resign{left:1579px!important;top:46px!important;transform:rotate(180deg)!important}
.bottom-resign{left:1579px!important;top:912px!important;transform:none!important}

/* The tools window closes only from its persistent ••• / × handle; no redundant CLOSE action. */
.game-tools-panel{top:438px!important;padding-bottom:24px!important}

/* Board language:
   - selected piece = large green physical disc
   - legal destination = smaller green target
   - previous move = warm amber, both origin and destination
   The previous move uses ::after so it remains legible even when a new selection overlaps it. */
.sq::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%) scale(.9);
  transform-origin:center;
  transition:opacity .13s ease,transform .15s ease;
}
.sq.selected::before{
  width:118px!important;height:118px!important;
  opacity:1!important;
  background:rgba(39,183,70,.52)!important;
  border:7px solid rgba(39,183,70,.98)!important;
  box-shadow:0 0 0 2px rgba(19,89,32,.18),0 7px 15px rgba(15,67,26,.12)!important;
  transform:translate(-50%,-50%) scale(1)!important;
}
.sq.legal::before{
  width:70px!important;height:70px!important;
  opacity:.9!important;
  background:rgba(39,183,70,.88)!important;
  border:0!important;
  box-shadow:none!important;
}
.sq.capture::before{
  width:102px!important;height:102px!important;
  opacity:.98!important;
  background:rgba(39,183,70,.08)!important;
  border:7px solid rgba(39,183,70,.98)!important;
  box-shadow:none!important;
}
.sq.last-from::before,.sq.last-to::before{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.sq.last-from::after{
  width:92px;height:92px;
  opacity:.9;
  background:rgba(213,139,69,.24);
  border:5px solid rgba(213,139,69,.68);
  transform:translate(-50%,-50%) scale(1);
}
.sq.last-to::after{
  width:106px;height:106px;
  opacity:.98;
  background:rgba(213,139,69,.13);
  border:7px solid rgba(213,139,69,.98);
  box-shadow:0 0 0 2px rgba(95,52,20,.10);
  transform:translate(-50%,-50%) scale(1);
}
.sq.last-from.selected::after,.sq.last-to.selected::after,
.sq.last-from.legal::after,.sq.last-to.legal::after,
.sq.last-from.capture::after,.sq.last-to.capture::after{opacity:1}
/* Check still wins over the amber ring when the king itself is in check. */
.sq.check::after{inset:10px;width:auto;height:auto;left:10px;top:10px;transform:none;border-radius:24px;background:transparent;border:0;opacity:1}

/* Knights and bishops are displayed exactly as supplied — no rotational styling anywhere. */
.piece.face-right,.piece.face-left,
.piece-anchor .piece.face-right,.piece-anchor .piece.face-left,
.move-ghost.face-right,.move-ghost.face-left,
.capture-ghost.face-right,.capture-ghost.face-left,
.drag-ghost.face-right,.drag-ghost.face-left,
.captured img.face-right,.captured img.face-left{transform:none!important}

/* ---------- OPENING ACADEMY ---------- */
.opening-view{z-index:8;color:var(--gold)}
.opening-view.active{animation:academyReveal .52s cubic-bezier(.18,.82,.18,1) both}
@keyframes academyReveal{0%{opacity:0;transform:translateY(10px) scale(.995)}100%{opacity:1;transform:none}}
.academy-heading{position:absolute;left:520px;top:33px;width:880px;text-align:center;z-index:5;pointer-events:none}
.academy-kicker{font:900 18px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:5px;color:rgba(89,42,21,.62);margin-bottom:7px}
.academy-title{font-size:58px;line-height:1;font-weight:900;letter-spacing:-3px;color:#6d351d;text-shadow:0 1px 0 rgba(255,225,170,.25)}
.academy-wood-btn{position:absolute;border:0;background:transparent;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 7px 8px rgba(76,37,15,.14));transition:scale .17s ease,filter .17s ease;z-index:8}
.academy-wood-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.academy-wood-btn span{position:relative;z-index:1;color:var(--gold);font-weight:900;text-shadow:0 2px 1px rgba(56,22,7,.44);line-height:1}
.academy-wood-btn.disabled{opacity:.28;pointer-events:none}
.academy-back{left:64px;top:40px;width:82px;height:78px}
.academy-back span{font-size:58px;transform:translateY(-3px)}

.academy-board{position:absolute;left:115px;top:145px;width:810px;height:810px;display:grid;grid-template-columns:repeat(8,101.25px);grid-template-rows:repeat(8,101.25px);background:url('assets/grid.png') center -1px/810px 812px no-repeat;overflow:hidden;z-index:4;box-shadow:0 18px 34px rgba(84,38,13,.18)}
.academy-sq{position:relative;width:101.25px;height:101.25px;display:flex;align-items:center;justify-content:center}
.academy-sq::before,.academy-sq::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0}
.academy-sq.academy-last-from::before{width:68px;height:68px;opacity:.76;background:rgba(213,139,69,.34);border:4px solid rgba(213,139,69,.65)}
.academy-sq.academy-last-to::before{width:78px;height:78px;opacity:.96;background:rgba(213,139,69,.16);border:5px solid rgba(213,139,69,.96)}
.academy-piece{position:absolute;left:50%;top:50%;width:92px;height:92px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(30,10,4,.17));z-index:2}
.academy-piece.piece-n.color-w{transform:translate(-49.6%,-52.1%)}
.academy-piece.piece-n.color-b{transform:translate(-50.1%,-53%)}
.academy-piece.piece-b.color-w{transform:translate(-49.8%,-50%)}

.academy-board-controls{position:absolute;left:115px;top:970px;width:810px;height:80px;display:flex;align-items:center;justify-content:center;gap:18px;z-index:8}
.academy-board-controls .academy-wood-btn{position:relative;left:auto;top:auto}
.academy-nav{width:72px;height:68px}.academy-nav span{font-size:50px;transform:translateY(-2px)}
.academy-play{width:184px;height:89px}.academy-play span{font-size:19px;letter-spacing:-.5px}
.academy-flip{width:132px;height:64px}.academy-flip span{font-size:18px}

.academy-panel{position:absolute;left:975px;top:118px;width:835px;height:885px;padding:24px;border-radius:34px;border:2px solid rgba(92,46,24,.22);background:linear-gradient(180deg,rgba(70,39,23,.94),rgba(38,25,17,.97));box-shadow:0 22px 38px rgba(77,35,14,.20),inset 0 1px 0 rgba(255,226,176,.08),inset 0 0 0 1px rgba(39,20,11,.52);z-index:6}
.academy-family-tabs{height:54px;display:flex;align-items:center;gap:8px;padding-bottom:13px;border-bottom:1px solid rgba(241,181,104,.15)}
.academy-family-tab{height:36px;min-width:98px;padding:0 16px;border-radius:13px;background:rgba(18,16,13,.38);border:1px solid rgba(241,181,104,.13);color:rgba(241,181,104,.76);font:900 14px/36px "Helvetica Neue",Arial,sans-serif;letter-spacing:.4px;text-align:center;transition:background .16s ease,border-color .16s ease,color .16s ease}
.academy-family-tab.active{background:rgba(39,183,70,.18);border-color:rgba(39,183,70,.56);color:#f5c986}
.academy-content{height:782px;display:grid;grid-template-columns:260px 1fr;gap:22px;padding-top:18px}
.academy-list{height:100%;overflow-y:auto;padding:0 8px 0 0;scrollbar-width:thin;scrollbar-color:rgba(241,181,104,.26) transparent}
.academy-list::-webkit-scrollbar{width:6px}.academy-list::-webkit-scrollbar-track{background:transparent}.academy-list::-webkit-scrollbar-thumb{background:rgba(241,181,104,.22);border-radius:10px}
.academy-list-item{width:100%;min-height:58px;padding:10px 12px;margin:0 0 7px;border-radius:15px;background:rgba(19,16,13,.42);border:1px solid rgba(241,181,104,.10);color:rgba(241,181,104,.76);text-align:left;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.academy-list-item strong{display:block;font:900 15px/1.08 "Helvetica Neue",Arial,sans-serif;color:#efbb76;letter-spacing:-.2px}.academy-list-item small{display:block;margin-top:5px;font:800 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.8px;opacity:.6}
.academy-list-item.active{background:rgba(39,183,70,.13);border-color:rgba(39,183,70,.48);transform:translateX(3px)}
.academy-theory{min-width:0;padding:4px 4px 0 2px;color:#efbd79}
.academy-eco{font:900 13px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.4px;color:rgba(241,181,104,.5);margin-bottom:8px}
.academy-theory h2{margin:0 0 13px;color:#f2bd78;font-size:37px;line-height:.96;letter-spacing:-1.8px}
.academy-summary{font:700 17px/1.42 "Helvetica Neue",Arial,sans-serif;color:rgba(241,190,122,.87);min-height:76px;max-width:500px}
.academy-section-label{margin:19px 0 9px;padding-top:11px;border-top:1px solid rgba(241,181,104,.13);font:900 12px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2px;color:rgba(241,181,104,.52)}
.academy-ideas{display:grid;gap:7px}
.academy-idea{position:relative;padding-left:18px;font:750 15px/1.32 "Helvetica Neue",Arial,sans-serif;color:rgba(241,190,122,.84)}
.academy-idea::before{content:"";position:absolute;left:1px;top:7px;width:7px;height:7px;border-radius:50%;background:rgba(39,183,70,.82)}
.academy-current-move{font-size:26px;font-weight:900;letter-spacing:-1px;color:#f4c785}
.academy-note{margin-top:7px;min-height:54px;font:700 15px/1.4 "Helvetica Neue",Arial,sans-serif;color:rgba(241,190,122,.78)}
.academy-line{margin-top:16px;padding:13px 14px;border-radius:14px;background:rgba(17,15,12,.48);border:1px solid rgba(241,181,104,.10);font:800 13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(241,190,122,.68);max-height:86px;overflow:hidden}

@media (hover:hover) and (pointer:fine){
  .academy-wood-btn:not(.disabled):hover{scale:1.025;filter:brightness(1.035) drop-shadow(0 8px 9px rgba(76,37,15,.16))}
  .academy-family-tab:hover,.academy-list-item:hover{border-color:rgba(241,181,104,.28);color:#f1c080}
}
.academy-line .current{color:#ffd292;text-decoration:underline;text-decoration-color:rgba(39,183,70,.8);text-decoration-thickness:3px;text-underline-offset:4px}
.sq.last-from.legal::before,.sq.last-to.legal::before{width:70px!important;height:70px!important;background:rgba(39,183,70,.88)!important;border:0!important;box-shadow:none!important}
.sq.last-from.capture::before,.sq.last-to.capture::before{width:102px!important;height:102px!important;background:rgba(39,183,70,.08)!important;border:7px solid rgba(39,183,70,.98)!important;box-shadow:none!important}
.sq.last-from.selected::before,.sq.last-to.selected::before{width:118px!important;height:118px!important;background:rgba(39,183,70,.52)!important;border:7px solid rgba(39,183,70,.98)!important;box-shadow:0 0 0 2px rgba(19,89,32,.18),0 7px 15px rgba(15,67,26,.12)!important}
/* Preserve button3's native square-ish proportion under Draw. */
.game-tools-button{left:1797px!important;top:996px!important;width:72px!important;height:68px!important;background-size:72px 68px!important}

/* ============================================================
   CESS! v3.1.4 — full-bleed home + cinematic academy + board-facing knights
   ============================================================ */

/* Loading/Home/Academy use the oak artwork as a true full-viewport cover.
   The authored 1920x1080 UI remains untouched and scales independently. */
.stage{--visible-w:1920px;--visible-h:1080px}
.stage.phase-loading,.stage.phase-home,.stage.phase-opening{overflow:visible;background:transparent}
.stage.phase-setup,.stage.phase-game{overflow:hidden}
#viewport.vp-phase-loading::before,
#viewport.vp-phase-home::before,
#viewport.vp-phase-opening::before{
  inset:0;
  filter:none;
  transform:none;
  background-position:center center;
  background-size:cover;
}
.phase-loading .oak-bg,.phase-home .oak-bg,.phase-opening .oak-bg{opacity:0}
.phase-opening .oak-chrome{opacity:0;transform:scale(.985)}

/* The same live falling field spans the real viewport width. Percent lanes keep pieces
   clear of the crop edges on ultrawide desktop and landscape mobile. */
.phase-loading .fx-layer,.phase-home .fx-layer,.phase-opening .fx-layer{
  inset:auto;
  left:50%;top:50%;
  width:var(--visible-w);
  height:var(--visible-h);
  transform:translate(-50%,-50%);
  overflow:hidden;
}
.phase-opening .fx-layer{opacity:.43;filter:saturate(.96) brightness(.98)}
.phase-opening .fall-piece{animation-play-state:paused!important}
@keyframes pieceFall{
  0%{transform:translate3d(0,-360px,0) rotate(var(--r0));opacity:.15}
  6%{opacity:1}
  92%{opacity:1}
  100%{transform:translate3d(var(--drift),calc(var(--visible-h) + 360px),0) rotate(var(--r1));opacity:.2}
}

/* Opening Academy enters as a continuation of the same oak world: the background and
   random pieces stay in place while the study surface reveals from the board center. */
.opening-view.active{animation:none}
.opening-view.entering{animation:academyCinematicReveal 1.02s cubic-bezier(.16,.82,.14,1) both}
@keyframes academyCinematicReveal{
  0%{opacity:0;clip-path:circle(0 at 50% 51%);transform:scale(1.022);filter:blur(3px)}
  42%{opacity:1;filter:blur(0)}
  100%{opacity:1;clip-path:circle(1320px at 50% 51%);transform:none;filter:none}
}
.academy-kicker{letter-spacing:3.4px;font-size:15px}

/* Knights always face INTO the physical board, independent of piece color.
   The calibrated transform-origin remains the center of the circular wooden base. */
.piece-anchor .piece.piece-n.knight-up{transform:none!important}
.piece-anchor .piece.piece-n.knight-down{transform:rotate(180deg)!important}
.move-ghost.piece-n.knight-up,.capture-ghost.piece-n.knight-up,.drag-ghost.piece-n.knight-up{transform:none!important}
.move-ghost.piece-n.knight-down,.capture-ghost.piece-n.knight-down,.drag-ghost.piece-n.knight-down{transform:rotate(180deg)!important}
.captured img.piece-n.knight-up{transform:none!important}
.captured img.piece-n.knight-down{transform:rotate(180deg)!important}

/* Academy uses the same rule and rotates around each artwork's measured wooden-disc center,
   so flipping the study board never moves the knight off-square. */
.academy-piece.piece-n.color-w.knight-up{transform:translate(-49.6%,-52.1%)!important;transform-origin:49.6% 52.1%}
.academy-piece.piece-n.color-w.knight-down{transform:translate(-49.6%,-52.1%) rotate(180deg)!important;transform-origin:49.6% 52.1%}
.academy-piece.piece-n.color-b.knight-up{transform:translate(-50.1%,-53%)!important;transform-origin:50.1% 53%}
.academy-piece.piece-n.color-b.knight-down{transform:translate(-50.1%,-53%) rotate(180deg)!important;transform-origin:50.1% 53%}

/* ============================================================
   CESS! v3.1.5 — quieter home, ambient audio & 1000-puzzle trainer
   ============================================================ */

/* Home/loading breathe more: the same supplied logo and wood buttons, slightly smaller. */
.oak-logo{left:600px;top:64px;width:720px;height:256px}
.home-button{left:600px!important;width:720px;height:113px!important}
.home-button span{font-size:48px;letter-spacing:-2.4px}
.home-button-1{top:365px!important}
.home-button-2{top:495px!important}
.home-button-3{top:625px!important}
.home-button-3 span{font-size:42px;letter-spacing:-1.8px}
.home-button-4{top:755px!important}
.home-button-4 span{font-size:48px;letter-spacing:-2.2px}
.phase-home .home-button-1{transition-delay:.06s}.phase-home .home-button-2{transition-delay:.14s}.phase-home .home-button-3{transition-delay:.22s}.phase-home .home-button-4{transition-delay:.30s}

/* Footer remains visually identical, but is now a real link. */
.oak-footer-link{position:absolute;left:341.5px;top:972px;width:1237px;height:52px;display:block;pointer-events:auto;z-index:10;transition:transform .18s ease,filter .18s ease}
.oak-footer-link .oak-footer{position:static;left:auto;top:auto;width:100%;height:100%;object-fit:contain}
@media (hover:hover) and (pointer:fine){.oak-footer-link:hover{transform:scale(1.012);filter:brightness(1.04)}}

/* Puzzle mode is the same oak world as Home/Academy; the falling pieces simply pause. */
.stage.phase-puzzle{overflow:visible;background:transparent}
#viewport.vp-phase-puzzle::before{inset:0;filter:none;transform:none;background-position:center center;background-size:cover}
.phase-puzzle .oak-bg{opacity:0}
.phase-puzzle .oak-chrome{opacity:0;transform:scale(.985)}
.phase-puzzle .fx-layer{inset:auto;left:50%;top:50%;width:var(--visible-w);height:var(--visible-h);transform:translate(-50%,-50%);overflow:hidden;opacity:.38;filter:saturate(.94) brightness(.97)}
.phase-puzzle .fall-piece{animation-play-state:paused!important}

/* Sparse falling pieces should feel like atmosphere, not confetti. */
.phase-loading .fall-piece,.phase-home .fall-piece{filter:drop-shadow(0 8px 7px rgba(85,41,15,.20));opacity:.92}

/* ---------- PUZZLES ---------- */
.puzzle-view{z-index:8;color:var(--gold)}
.puzzle-view.active{animation:none}
.puzzle-view.entering{animation:puzzleCinematicReveal 1.02s cubic-bezier(.16,.82,.14,1) both}
@keyframes puzzleCinematicReveal{0%{opacity:0;clip-path:circle(0 at 50% 51%);transform:scale(1.022);filter:blur(3px)}42%{opacity:1;filter:blur(0)}100%{opacity:1;clip-path:circle(1320px at 50% 51%);transform:none;filter:none}}
.puzzle-heading{position:absolute;left:520px;top:32px;width:880px;text-align:center;z-index:7;pointer-events:none}
.puzzle-kicker{font:900 15px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:3.6px;color:rgba(89,42,21,.62);margin-bottom:7px}
.puzzle-title{font-size:58px;line-height:1;font-weight:900;letter-spacing:-3px;color:#6d351d;text-shadow:0 1px 0 rgba(255,225,170,.25)}
.puzzle-back{left:64px;top:40px;width:82px;height:78px}.puzzle-back span{font-size:58px;transform:translateY(-3px)}
.puzzle-board{position:absolute;left:115px;top:145px;width:810px;height:810px;display:grid;grid-template-columns:repeat(8,101.25px);grid-template-rows:repeat(8,101.25px);background:url('assets/grid.png') center -1px/810px 812px no-repeat;overflow:hidden;z-index:4;box-shadow:0 18px 34px rgba(84,38,13,.18);touch-action:none}
.puzzle-sq{position:relative;width:101.25px;height:101.25px;display:flex;align-items:center;justify-content:center}
.puzzle-sq::before,.puzzle-sq::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.88);transition:opacity .12s ease,transform .15s ease}
.puzzle-sq.puzzle-last-from::after{width:70px;height:70px;opacity:.75;background:rgba(213,139,69,.22);border:4px solid rgba(213,139,69,.60);transform:translate(-50%,-50%) scale(1)}
.puzzle-sq.puzzle-last-to::after{width:82px;height:82px;opacity:.92;background:rgba(213,139,69,.10);border:5px solid rgba(213,139,69,.90);transform:translate(-50%,-50%) scale(1)}
.puzzle-sq.puzzle-selected::before{width:90px;height:90px;opacity:1;background:rgba(39,183,70,.40);border:5px solid rgba(39,183,70,.95);transform:translate(-50%,-50%) scale(1)}
.puzzle-sq.puzzle-legal::before{width:50px;height:50px;opacity:.92;background:rgba(39,183,70,.88);transform:translate(-50%,-50%) scale(1)}
.puzzle-sq.puzzle-capture::before{width:82px;height:82px;opacity:.96;background:rgba(39,183,70,.08);border:6px solid rgba(39,183,70,.96);transform:translate(-50%,-50%) scale(1)}
.puzzle-sq.puzzle-hint-from::before{width:92px;height:92px;opacity:1;background:rgba(245,199,133,.20);border:6px solid rgba(245,199,133,.94);transform:translate(-50%,-50%) scale(1)}
.puzzle-sq.puzzle-hint-to::before{width:76px;height:76px;opacity:1;background:rgba(39,183,70,.30);border:6px solid rgba(39,183,70,.98);transform:translate(-50%,-50%) scale(1)}
.puzzle-piece{position:absolute;left:50%;top:50%;width:92px;height:92px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(30,10,4,.17));z-index:2;pointer-events:none;transition:opacity .1s ease}
.puzzle-piece.piece-n.color-w.knight-up{transform:translate(-49.6%,-52.1%)!important;transform-origin:49.6% 52.1%}
.puzzle-piece.piece-n.color-w.knight-down{transform:translate(-49.6%,-52.1%) rotate(180deg)!important;transform-origin:49.6% 52.1%}
.puzzle-piece.piece-n.color-b.knight-up{transform:translate(-50.1%,-53%)!important;transform-origin:50.1% 53%}
.puzzle-piece.piece-n.color-b.knight-down{transform:translate(-50.1%,-53%) rotate(180deg)!important;transform-origin:50.1% 53%}
.puzzle-move-ghost,.puzzle-drag-ghost{position:absolute;width:92px;height:92px;object-fit:contain;z-index:20;pointer-events:none;filter:drop-shadow(0 7px 6px rgba(30,10,4,.22))}
.puzzle-move-ghost{transition:left .235s cubic-bezier(.2,.74,.16,1),top .235s cubic-bezier(.2,.74,.16,1)}
.puzzle-move-ghost.piece-n.color-w.knight-up,.puzzle-drag-ghost.piece-n.color-w.knight-up{transform:none;transform-origin:49.6% 52.1%}
.puzzle-move-ghost.piece-n.color-w.knight-down,.puzzle-drag-ghost.piece-n.color-w.knight-down{transform:rotate(180deg);transform-origin:49.6% 52.1%}
.puzzle-move-ghost.piece-n.color-b.knight-up,.puzzle-drag-ghost.piece-n.color-b.knight-up{transform:none;transform-origin:50.1% 53%}
.puzzle-move-ghost.piece-n.color-b.knight-down,.puzzle-drag-ghost.piece-n.color-b.knight-down{transform:rotate(180deg);transform-origin:50.1% 53%}
.puzzle-board.puzzle-wrong{animation:none;transform:none}@keyframes puzzleWrong{0%,100%{transform:none}}

.puzzle-panel{position:absolute;left:975px;top:125px;width:835px;height:845px;padding:30px 34px 25px;border-radius:34px;border:2px solid rgba(92,46,24,.22);background:linear-gradient(180deg,rgba(70,39,23,.94),rgba(38,25,17,.97));box-shadow:0 22px 38px rgba(77,35,14,.20),inset 0 1px 0 rgba(255,226,176,.08),inset 0 0 0 1px rgba(39,20,11,.52);z-index:6;color:#efbd79}
.puzzle-topline{height:45px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid rgba(241,181,104,.16);font:900 14px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.2px;color:rgba(241,181,104,.58)}
#puzzleProgress{color:#f4c785;font-size:17px;letter-spacing:.7px}
.puzzle-meta-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:18px}
.puzzle-meta{height:82px;padding:14px 17px;border-radius:17px;background:rgba(18,16,13,.42);border:1px solid rgba(241,181,104,.11)}
.puzzle-meta small{display:block;font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.8px;color:rgba(241,181,104,.46);margin-bottom:9px}.puzzle-meta strong{display:block;font:900 23px/1 "Helvetica Neue",Arial,sans-serif;color:#f2c181;letter-spacing:-.6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.puzzle-themes{min-height:65px;padding:15px 0 9px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px}
.puzzle-themes span{height:26px;padding:0 10px;border-radius:10px;background:rgba(39,183,70,.12);border:1px solid rgba(39,183,70,.28);font:850 11px/24px "Helvetica Neue",Arial,sans-serif;color:rgba(245,201,141,.78);letter-spacing:.3px}
.puzzle-status-block{min-height:188px;margin-top:5px;padding:25px 24px 20px;border-radius:23px;background:rgba(18,16,13,.48);border:1px solid rgba(241,181,104,.11);box-shadow:inset 0 0 18px rgba(0,0,0,.10)}
.puzzle-status-kicker{font:900 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.6px;color:rgba(241,181,104,.44);margin-bottom:13px}
.puzzle-status{font:900 38px/.98 "Helvetica Neue",Arial,sans-serif;letter-spacing:-1.7px;color:#f4c785}
.puzzle-detail{margin-top:13px;max-width:650px;font:700 16px/1.4 "Helvetica Neue",Arial,sans-serif;color:rgba(241,190,122,.74)}
.puzzle-actions{display:grid;grid-template-columns:repeat(2,220px);grid-auto-rows:106px;gap:8px 18px;justify-content:center;margin-top:20px}
.puzzle-actions .academy-wood-btn{position:relative;left:auto;top:auto;width:220px;height:106px}
.puzzle-action span{font-size:20px;letter-spacing:-.5px}.puzzle-next span{font-size:23px}
.puzzle-action.disabled{opacity:.28;pointer-events:none}
.puzzle-help{margin:17px 8px 0;display:grid;gap:5px;font:700 12px/1.35 "Helvetica Neue",Arial,sans-serif;color:rgba(241,190,122,.55)}
.puzzle-help b{color:rgba(241,190,122,.82);letter-spacing:.7px}
.puzzle-source{position:absolute;left:34px;right:34px;bottom:22px;padding-top:13px;border-top:1px solid rgba(241,181,104,.11);font:850 9px/1.2 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.45px;color:rgba(241,181,104,.34);text-align:center}
@media (hover:hover) and (pointer:fine){.puzzle-sq:has(.puzzle-piece){cursor:grab}.puzzle-actions .academy-wood-btn:not(.disabled):hover,.puzzle-back:hover{scale:1.025;filter:brightness(1.04) drop-shadow(0 8px 9px rgba(76,37,15,.16))}}

/* ============================================================
   CESS! v3.1.6 — precision layout pass
   User-supplied button7 artwork + clear puzzle turn + study alignment
   ============================================================ */

/* The game backdrop must fill the real viewport, not leave dark/brown letterbox gutters. */
#viewport.vp-phase-game{
  background:#1b0e09;
}
#viewport.vp-phase-game::before{
  inset:0!important;
  background-image:url('assets/back-black.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  filter:none!important;
  transform:none!important;
  opacity:1!important;
}

/* Setup time arrows: center the glyph by its own box on the exact image center.
   No baseline/inset inheritance is allowed to shift it. */
.time-rail-arrow span{
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  width:44px!important;
  height:56px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  text-align:center!important;
  font-size:51px!important;
  transform:translate(-50%,-52%)!important;
  transform-origin:center!important;
}

/* Academy / Puzzle composition follows the game screen discipline:
   back control and board share a left edge, theory/trainer panel moves left,
   and the existing vertical CESS logo owns the far-right column. */
.academy-back,.puzzle-back{left:64px!important;top:40px!important;width:82px!important;height:78px!important}
.academy-back span,.puzzle-back span{
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  width:50px!important;
  height:60px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  text-align:center!important;
  font-size:55px!important;
  transform:translate(-50%,-53%)!important;
}
.academy-board,.puzzle-board{left:64px!important;top:145px!important}
.academy-board-controls{left:64px!important}
.academy-panel{left:910px!important;top:118px!important;width:790px!important}
.puzzle-panel{left:910px!important;top:118px!important;width:790px!important;height:885px!important;padding:26px 30px 24px!important}
.study-logo{
  position:absolute;
  left:1777px;
  top:383px;
  width:114px;
  height:319px;
  object-fit:contain;
  z-index:7;
  pointer-events:none;
  filter:drop-shadow(0 7px 9px rgba(85,40,15,.10));
}

/* Review is a real, opaque CESS window. Captured pieces remain beneath it physically,
   but can no longer visually collide with the controls. */
.review-panel{
  left:22px!important;
  top:250px!important;
  width:322px!important;
  height:580px!important;
  padding:28px 25px 24px!important;
  border-radius:30px!important;
  border:2px solid rgba(241,181,104,.20)!important;
  background:linear-gradient(180deg,rgba(49,30,20,.985),rgba(25,18,13,.99))!important;
  box-shadow:0 20px 34px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,226,176,.07),inset 0 0 0 1px rgba(43,21,10,.72)!important;
  filter:none!important;
  align-content:start!important;
  overflow:hidden;
}
.review-grade,.review-move{width:270px!important}
.review-mode .captured{opacity:.24;transition:opacity .25s ease}

/* Puzzle turn is deliberately impossible to miss: side, player color and live state
   are separated from the tactical instruction text. */
.puzzle-turn{
  height:88px;
  margin:14px 0 12px;
  padding:8px 18px 8px 10px;
  display:flex;
  align-items:center;
  gap:15px;
  border-radius:20px;
  background:rgba(18,16,13,.58);
  border:2px solid rgba(241,181,104,.14);
  box-shadow:inset 0 0 16px rgba(0,0,0,.18);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.puzzle-turn.white-turn{border-color:rgba(241,196,133,.42);box-shadow:inset 0 0 16px rgba(0,0,0,.18),0 0 0 1px rgba(241,196,133,.08)}
.puzzle-turn.black-turn{border-color:rgba(117,78,53,.72);background:rgba(13,12,11,.68)}
.puzzle-turn.opponent-turn{opacity:.82}
.puzzle-turn img{width:70px;height:70px;object-fit:contain;flex:0 0 70px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.18))}
.puzzle-turn-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.puzzle-turn-copy small{font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2px;color:rgba(241,181,104,.48)}
.puzzle-turn-copy strong{font:900 30px/.95 "Helvetica Neue",Arial,sans-serif;letter-spacing:-1.1px;color:#f5c986;white-space:nowrap}
.puzzle-turn-copy span{font:850 11px/1.1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.75px;color:rgba(241,190,122,.63);white-space:nowrap}

/* Rebalance puzzle content after adding the explicit turn display. */
.puzzle-meta-row{margin-top:0!important}
.puzzle-meta{height:70px!important;padding:11px 15px!important}
.puzzle-themes{min-height:50px!important;padding:11px 0 6px!important}
.puzzle-status-block{min-height:150px!important;margin-top:2px!important;padding:20px 22px 17px!important}
.puzzle-status{font-size:34px!important}
.puzzle-actions{grid-auto-rows:96px!important;margin-top:14px!important;gap:6px 16px!important}
.puzzle-actions .academy-wood-btn{height:96px!important}
.puzzle-help{margin-top:12px!important;gap:4px!important}
.puzzle-source{bottom:17px!important}
/* Academy move-navigation chevrons use the same true-center rule as every other arrow control. */
.academy-nav span{
  position:absolute!important;
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  width:44px!important;
  height:54px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  text-align:center!important;
  font-size:48px!important;
  transform:translate(-50%,-52%)!important;
}


/* ============================================================
   CESS! v3.1.7 — cinematic home return + optical arrow/atmosphere polish
   ============================================================ */
.cinematic-shade{display:none!important;opacity:0!important;animation:none!important;transition:none!important}
.oak-chrome{z-index:9}
.oak-footer-link{pointer-events:auto!important;cursor:pointer;z-index:12}
.time-rail-arrow span{transform:translate(-50%,-59%)!important}
.academy-back span,.puzzle-back span{transform:translate(-50%,-60%)!important}
.academy-nav span{transform:translate(-50%,-59%)!important}
.opening-view.leaving-home,.puzzle-view.leaving-home{pointer-events:none!important;animation:studyCinematicOut .52s cubic-bezier(.42,0,.2,1) both!important}
@keyframes studyCinematicOut{0%{opacity:1;transform:none;filter:none}58%{opacity:.42;transform:scale(.994);filter:blur(.7px)}100%{opacity:0;transform:scale(.988);filter:blur(2px)}}
.home-view.cinematic-return{opacity:1;visibility:visible;pointer-events:auto}
.home-view.cinematic-return .home-button{opacity:0;transform:translateY(24px) scale(.99)}
.phase-home .home-view.cinematic-return .home-button{opacity:1;transform:none}
.study-logo{left:1803px!important;top:326px!important;width:114px!important;height:319px!important}
.study-footer-link{position:absolute;left:1860px;top:850px;width:340px;height:20px;z-index:8;display:block;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center center;pointer-events:auto;cursor:pointer;opacity:.82;filter:drop-shadow(0 5px 6px rgba(75,34,13,.10));transition:opacity .18s ease,filter .18s ease,transform .18s ease}
.study-footer-link img{display:block;width:340px;height:auto;object-fit:contain}
@media (hover:hover) and (pointer:fine){.study-footer-link:hover{opacity:1;filter:brightness(1.04) drop-shadow(0 6px 7px rgba(75,34,13,.12));transform:translate(-50%,-50%) rotate(-90deg) scale(1.012)}}

/* ============================================================
   CESS! v3.1.8 — true fullscreen transitions + precise study branding
   ============================================================ */

/* The hidden Home footer must never steal clicks from Academy, Puzzles, setup or the game. */
.phase-opening .oak-footer-link,
.phase-puzzle .oak-footer-link,
.phase-setup .oak-footer-link,
.phase-game .oak-footer-link{
  display:none!important;
  pointer-events:none!important;
  visibility:hidden!important;
}
.phase-loading .oak-footer-link,
.phase-home .oak-footer-link{
  display:block!important;
  pointer-events:auto!important;
  visibility:visible!important;
}

/* Full-viewport transition surface. It lives OUTSIDE the 1920x1080 artboard. */
.screen-fade{
  position:fixed;
  inset:0;
  z-index:200;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:opacity .36s cubic-bezier(.22,.7,.18,1),visibility 0s linear .36s;
}
.screen-fade.show{
  opacity:1;
  visibility:visible;
  transition:opacity .36s cubic-bezier(.22,.7,.18,1),visibility 0s;
}
.screen-fade.oak{background-image:url('assets/back-white.png')}
.screen-fade.dark{background-image:url('assets/back-black.png')}

/* Never reveal a 1920x1080 clip/circle/iris edge during navigation. */
.setup-view.active,
.game-view.entering,
.opening-view.entering,
.puzzle-view.entering{
  clip-path:none!important;
}
.setup-view.active{animation:cleanViewIn .34s ease both!important}
.game-view.entering{animation:cleanViewIn .38s ease both!important}
.opening-view.entering,.puzzle-view.entering{animation:studyCleanIn .55s cubic-bezier(.18,.78,.18,1) both!important}
@keyframes cleanViewIn{from{opacity:0}to{opacity:1}}
@keyframes studyCleanIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Academy/Puzzle -> Home remains cinematic, but only the content fades; no artboard-shaped mask. */
.opening-view.leaving-home,.puzzle-view.leaving-home{
  animation:studyCleanOut .46s cubic-bezier(.42,0,.2,1) both!important;
  clip-path:none!important;
}
@keyframes studyCleanOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(7px)}}
.home-view.cinematic-return{clip-path:none!important}

/* Right study column: actual logo asset at its native 116x327 size, centered over a vertical footer. */
.study-brand-column{
  position:absolute;
  left:1726px;
  top:230px;
  width:170px;
  height:790px;
  z-index:9;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}
.study-brand-column .study-logo{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:116px!important;
  height:327px!important;
  object-fit:contain!important;
  flex:0 0 auto;
  filter:drop-shadow(0 7px 9px rgba(85,40,15,.10));
}
.study-brand-column .study-footer-link{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:42px!important;
  height:390px!important;
  margin-top:28px!important;
  z-index:10!important;
  display:block!important;
  transform:none!important;
  transform-origin:center!important;
  pointer-events:auto!important;
  cursor:pointer;
  opacity:.88;
  filter:none;
  overflow:visible;
}
.study-brand-column .study-footer-link img{
  position:absolute;
  left:50%;
  top:50%;
  width:1237px!important;
  height:52px!important;
  max-width:none!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%) rotate(-90deg) scale(.315);
  transform-origin:center center;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .study-brand-column .study-footer-link:hover{opacity:1!important;filter:brightness(1.04)!important;transform:none!important}
}

/* Academy: make the NEXT moving piece obvious before it changes squares. */
.academy-sq.academy-selected::after{
  width:92px;
  height:92px;
  opacity:1;
  background:rgba(39,183,70,.34);
  border:6px solid rgba(39,183,70,.96);
  box-shadow:0 0 0 2px rgba(20,92,34,.15),0 7px 15px rgba(16,72,28,.12);
  transform:translate(-50%,-50%) scale(1);
}

/* Slightly stronger selection feedback in Puzzles, especially for touch. */
.puzzle-sq.puzzle-selected::before,
.puzzle-sq.puzzle-pressed::before{
  width:94px!important;
  height:94px!important;
  opacity:1!important;
  background:rgba(39,183,70,.48)!important;
  border:6px solid rgba(39,183,70,1)!important;
  box-shadow:0 0 0 2px rgba(20,92,34,.16),0 7px 15px rgba(16,72,28,.12)!important;
}

/* No 1920x1080 background rectangle may ever participate in a transition.
   The viewport owns every background; the artboard only owns positioned UI. */
.stage.phase-setup,.stage.phase-game{background:transparent!important}
.phase-setup .oak-bg,.phase-game .oak-bg,.phase-game .game-bg{opacity:0!important}
#viewport.vp-phase-setup::before{inset:0!important;filter:none!important;transform:none!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important}

/* ============================================================
   CESS! v3.1.9 — Learn Chess + game-entry/performance polish
   ============================================================ */

/* Home/loading: same authored assets, a little smaller so five actions breathe. */
.oak-logo{left:635px!important;top:42px!important;width:650px!important;height:231px!important}
.home-button{left:635px!important;width:650px!important;height:102px!important}
.home-button span{font-size:42px!important;letter-spacing:-2px!important}
.home-button-1{top:330px!important}
.home-button-2{top:443px!important}
.home-button-3{top:556px!important}
.home-button-4{top:669px!important}
.home-button-5{top:782px!important}
.home-button-3 span,.home-button-5 span{font-size:37px!important;letter-spacing:-1.5px!important}
.phase-home .home-button-1{transition-delay:.04s!important}
.phase-home .home-button-2{transition-delay:.10s!important}
.phase-home .home-button-3{transition-delay:.16s!important}
.phase-home .home-button-4{transition-delay:.22s!important}
.phase-home .home-button-5{transition-delay:.28s!important}

/* Requested 5px optical drop: the LEVEL window now aligns with the difficulty artwork. */
.difficulty-label{top:25px!important}

/* Setup -> game is full-viewport only. Falling pieces and setup disappear under the dark cover,
   so the player never sees the setup panel linger behind the board. */
.stage.game-transitioning .fx-layer{opacity:0!important;transition:opacity .24s ease!important}
.setup-view.leaving-to-game{pointer-events:none!important;animation:setupToGameOut .28s ease both!important}
@keyframes setupToGameOut{from{opacity:1}to{opacity:0}}
.phase-game .fx-layer{opacity:0!important;visibility:hidden!important;filter:none!important;transition:none!important}
.phase-game .fall-piece{animation-play-state:paused!important}
.phase-game .oak-bg,.phase-game .game-bg{display:none!important}
.game-view.entering{animation:gameFullViewIn .34s cubic-bezier(.18,.78,.18,1) both!important;clip-path:none!important}
@keyframes gameFullViewIn{from{opacity:0}to{opacity:1}}

/* Keep the rendering pipeline lean: each complex board is its own paint/layout island. */
.board,.academy-board,.puzzle-board,.learn-board{contain:layout paint style;backface-visibility:hidden;transform:translateZ(0)}
.view{contain:layout paint style}
.move-layer,.modal,.screen-fade{backface-visibility:hidden}
.phase-opening .fx-layer,.phase-puzzle .fx-layer,.phase-learn .fx-layer{filter:none!important}

/* Study-brand composition: footer is VERTICAL, immediately LEFT of the vertical CESS logo,
   both centered on the same vertical axis. Native artwork proportions are preserved. */
.study-brand-column{
  left:1707px!important;
  top:376px!important;
  width:190px!important;
  height:327px!important;
  display:block!important;
  pointer-events:none!important;
}
.study-brand-column .study-logo{
  position:absolute!important;
  right:0!important;
  left:auto!important;
  top:0!important;
  width:116px!important;
  height:327px!important;
  object-fit:contain!important;
}
.study-brand-column .study-footer-link{
  position:absolute!important;
  left:8px!important;
  top:0!important;
  width:38px!important;
  height:327px!important;
  margin:0!important;
  padding:0!important;
  pointer-events:auto!important;
  overflow:hidden!important;
  transform:none!important;
  opacity:.9!important;
}
.study-brand-column .study-footer-link img{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:327px!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%) rotate(-90deg)!important;
  transform-origin:center center!important;
  pointer-events:none!important;
}
@media (hover:hover) and (pointer:fine){.study-brand-column .study-footer-link:hover{opacity:1!important;filter:brightness(1.04)!important;transform:none!important}}

/* LEARN CHESS lives in the same oak world as Academy/Puzzles. */
.stage.phase-learn{overflow:visible;background:transparent}
#viewport.vp-phase-learn::before{inset:0!important;filter:none!important;transform:none!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important}
.phase-learn .oak-bg{opacity:0!important}
.phase-learn .oak-chrome{opacity:0!important;transform:scale(.985)}
.phase-learn .fx-layer{inset:auto;left:50%;top:50%;width:var(--visible-w);height:var(--visible-h);transform:translate(-50%,-50%);overflow:hidden;opacity:.38;filter:none}
.phase-learn .fall-piece{animation-play-state:paused!important}
.phase-learn .oak-footer-link{display:none!important;pointer-events:none!important;visibility:hidden!important}
.learn-view{z-index:8;color:var(--gold)}
.learn-view.entering{animation:learnCleanIn .52s cubic-bezier(.18,.78,.18,1) both!important}
.learn-view.leaving-home{animation:studyCleanOut .46s cubic-bezier(.42,0,.2,1) both!important}
@keyframes learnCleanIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.learn-heading{position:absolute;left:520px;top:32px;width:880px;text-align:center;z-index:7;pointer-events:none}
.learn-kicker{font:900 15px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:3.6px;color:rgba(89,42,21,.62);margin-bottom:7px}
.learn-title{font-size:58px;line-height:1;font-weight:900;letter-spacing:-3px;color:#6d351d;text-shadow:0 1px 0 rgba(255,225,170,.25)}
.learn-back{left:64px;top:40px;width:82px;height:78px}
.learn-back span{font-size:58px;position:absolute!important;left:50%!important;top:50%!important;width:44px!important;height:54px!important;display:grid!important;place-items:center!important;line-height:1!important;transform:translate(-50%,-60%)!important}
.learn-board{position:absolute;left:64px;top:145px;width:810px;height:810px;display:grid;grid-template-columns:repeat(8,101.25px);grid-template-rows:repeat(8,101.25px);background:url('assets/grid.png') center -1px/810px 812px no-repeat;overflow:hidden;z-index:4;box-shadow:0 18px 34px rgba(84,38,13,.18);touch-action:none}
.learn-sq{position:relative;width:101.25px;height:101.25px;display:flex;align-items:center;justify-content:center}
.learn-sq::before,.learn-sq::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity .12s ease,transform .15s ease}
.learn-sq.learn-selected::before,.learn-sq.learn-pressed::before{width:94px;height:94px;opacity:1;background:rgba(39,183,70,.44);border:6px solid rgba(39,183,70,.98)}
.learn-sq.learn-legal::before{width:50px;height:50px;opacity:.92;background:rgba(39,183,70,.88)}
.learn-sq.learn-capture::before{width:82px;height:82px;opacity:.96;background:rgba(39,183,70,.08);border:6px solid rgba(39,183,70,.96)}
.learn-sq.learn-last-from::after{width:68px;height:68px;opacity:.72;background:rgba(213,139,69,.23);border:4px solid rgba(213,139,69,.62)}
.learn-sq.learn-last-to::after{width:80px;height:80px;opacity:.94;background:rgba(213,139,69,.12);border:5px solid rgba(213,139,69,.93)}
.learn-sq.learn-teach::after{width:82px;height:82px;opacity:.92;background:rgba(245,199,133,.13);border:5px solid rgba(183,103,49,.74)}
.learn-sq.learn-preview-from::before{width:94px;height:94px;opacity:1;background:rgba(39,183,70,.37);border:6px solid rgba(39,183,70,.98)}
.learn-sq.learn-preview-to::after{width:76px;height:76px;opacity:1;background:rgba(39,183,70,.17);border:5px solid rgba(39,183,70,.88)}
.learn-piece{position:absolute;left:50%;top:50%;width:92px;height:92px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(30,10,4,.17));z-index:2;pointer-events:none;transition:opacity .1s ease}
.learn-piece.piece-n.color-w.knight-up{transform:translate(-49.6%,-52.1%)!important;transform-origin:49.6% 52.1%}
.learn-piece.piece-n.color-w.knight-down{transform:translate(-49.6%,-52.1%) rotate(180deg)!important;transform-origin:49.6% 52.1%}
.learn-piece.piece-n.color-b.knight-up{transform:translate(-50.1%,-53%)!important;transform-origin:50.1% 53%}
.learn-piece.piece-n.color-b.knight-down{transform:translate(-50.1%,-53%) rotate(180deg)!important;transform-origin:50.1% 53%}
.learn-move-ghost,.learn-drag-ghost{position:absolute;width:92px;height:92px;object-fit:contain;z-index:20;pointer-events:none;filter:drop-shadow(0 7px 6px rgba(30,10,4,.22))}
.learn-move-ghost{transition:left .235s cubic-bezier(.2,.74,.16,1),top .235s cubic-bezier(.2,.74,.16,1)}
.learn-move-ghost.piece-n.color-w.knight-down,.learn-drag-ghost.piece-n.color-w.knight-down{transform:rotate(180deg);transform-origin:49.6% 52.1%}
.learn-move-ghost.piece-n.color-b.knight-down,.learn-drag-ghost.piece-n.color-b.knight-down{transform:rotate(180deg);transform-origin:50.1% 53%}
.learn-board-controls{position:absolute;left:64px;top:970px;width:810px;height:80px;display:flex;align-items:center;justify-content:center;gap:16px;z-index:8}
.learn-board-controls .academy-wood-btn{position:relative;left:auto;top:auto}
.learn-nav{width:72px;height:68px}.learn-nav span{font-size:48px;position:absolute!important;left:50%!important;top:50%!important;width:44px!important;height:54px!important;display:grid!important;place-items:center!important;line-height:1!important;transform:translate(-50%,-59%)!important}
.learn-reset,.learn-demo{width:170px;height:82px}.learn-reset span,.learn-demo span{font-size:18px}
.learn-panel{position:absolute;left:910px;top:118px;width:790px;height:885px;padding:24px;border-radius:34px;border:2px solid rgba(92,46,24,.22);background:linear-gradient(180deg,rgba(70,39,23,.94),rgba(38,25,17,.97));box-shadow:0 22px 38px rgba(77,35,14,.20),inset 0 1px 0 rgba(255,226,176,.08),inset 0 0 0 1px rgba(39,20,11,.52);z-index:6;color:#efbd79}
.learn-topline{height:42px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid rgba(241,181,104,.16);font:900 12px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2px;color:rgba(241,181,104,.54)}
.learn-topline strong{color:#f4c785;font-size:16px;letter-spacing:.5px}
.learn-category-tabs{height:58px;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(241,181,104,.13);overflow:hidden}
.learn-category-tab{height:32px;padding:0 9px;border-radius:11px;background:rgba(18,16,13,.38);border:1px solid rgba(241,181,104,.12);color:rgba(241,181,104,.72);font:900 10px/30px "Helvetica Neue",Arial,sans-serif;letter-spacing:.45px;white-space:nowrap}
.learn-category-tab.active{background:rgba(39,183,70,.16);border-color:rgba(39,183,70,.5);color:#f5c986}
.learn-content{height:737px;display:grid;grid-template-columns:225px 1fr;gap:20px;padding-top:16px}
.learn-list{height:100%;overflow-y:auto;padding-right:7px;scrollbar-width:thin;scrollbar-color:rgba(241,181,104,.24) transparent}
.learn-list::-webkit-scrollbar{width:5px}.learn-list::-webkit-scrollbar-thumb{background:rgba(241,181,104,.22);border-radius:10px}
.learn-list-item{width:100%;min-height:50px;padding:8px 10px;margin-bottom:6px;border-radius:14px;background:rgba(19,16,13,.4);border:1px solid rgba(241,181,104,.09);color:rgba(241,181,104,.74);text-align:left;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.learn-list-item strong{display:block;font:900 12px/1.12 "Helvetica Neue",Arial,sans-serif;color:#efbb76}.learn-list-item small{display:block;margin-top:4px;font:800 9px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.8px;opacity:.5}
.learn-list-item.active{background:rgba(39,183,70,.13);border-color:rgba(39,183,70,.46);transform:translateX(2px)}
.learn-lesson{min-width:0;padding:2px 2px 0;color:#efbd79}
.learn-lesson-kicker{font:900 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.2px;color:rgba(241,181,104,.48);margin-bottom:8px}
.learn-lesson h2{margin:0 0 11px;color:#f2bd78;font-size:34px;line-height:.96;letter-spacing:-1.6px}
.learn-summary{font:700 15px/1.42 "Helvetica Neue",Arial,sans-serif;color:rgba(241,190,122,.85);min-height:82px}
.learn-section-label{margin:16px 0 8px;padding-top:10px;border-top:1px solid rgba(241,181,104,.12);font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2px;color:rgba(241,181,104,.48)}
.learn-rules{display:grid;gap:6px}
.learn-rule{position:relative;padding-left:16px;font:750 13px/1.34 "Helvetica Neue",Arial,sans-serif;color:rgba(241,190,122,.82)}
.learn-rule::before{content:"";position:absolute;left:1px;top:6px;width:6px;height:6px;border-radius:50%;background:rgba(39,183,70,.84)}
.learn-objective{padding:12px 14px;border-radius:15px;background:rgba(17,15,12,.44);border:1px solid rgba(241,181,104,.10);font:800 14px/1.4 "Helvetica Neue",Arial,sans-serif;color:#f4c785}
.learn-status{margin-top:12px;min-height:48px;padding:11px 14px;border-radius:14px;background:rgba(39,183,70,.09);border:1px solid rgba(39,183,70,.22);font:900 11px/1.35 "Helvetica Neue",Arial,sans-serif;letter-spacing:.55px;color:rgba(245,201,141,.84)}
@media (hover:hover) and (pointer:fine){.learn-category-tab:hover,.learn-list-item:hover{border-color:rgba(241,181,104,.26);color:#f1c080}.learn-sq:has(.learn-piece){cursor:pointer}}
/* Render the footer from its native 1237x52 source size, then scale the whole asset uniformly. */
.study-brand-column .study-footer-link img{
  width:1237px!important;
  height:52px!important;
  transform:translate(-50%,-50%) rotate(-90deg) scale(.26435)!important;
}
/* Settings stay calm and cheap to render; only Loading/Home actually animate the falling field. */
.phase-setup .fall-piece{animation-play-state:paused!important}
.phase-setup .fx-layer{filter:none!important}

/* ============================================================
   CESS! v3.2.0 — cinematic language gate + knight loading ritual
   ============================================================ */
.stage.phase-language{overflow:visible;background:transparent!important}
#viewport.vp-phase-language::before{content:"";position:absolute;inset:0;background:var(--ambient-bg) center/cover no-repeat;z-index:0;pointer-events:none}
.phase-language .oak-bg{opacity:0!important}
.phase-language .oak-chrome{opacity:1!important;transform:none!important}
.phase-language .fx-layer{inset:auto;left:50%;top:50%;width:var(--visible-w);height:var(--visible-h);transform:translate(-50%,-50%);overflow:hidden;opacity:.72;filter:none!important}
.phase-language .fall-piece{animation-play-state:running!important}



.language-view{z-index:8;color:#6d351d;transition:opacity .55s ease,transform .7s cubic-bezier(.18,.8,.2,1),filter .55s ease}
.language-view.active{opacity:1;visibility:visible;pointer-events:auto}
.language-view.cinematic-in{animation:languageViewIn .82s cubic-bezier(.18,.8,.2,1) both}
.language-view.leaving{pointer-events:none;animation:languageViewOut .52s cubic-bezier(.42,0,.2,1) both}
@keyframes languageViewIn{from{opacity:0;transform:translateY(18px) scale(.988);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes languageViewOut{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translateY(-14px) scale(.992);filter:blur(4px)}}
.language-heading{position:absolute;left:50%;top:292px;width:980px;transform:translateX(-50%);text-align:center;z-index:3;pointer-events:none}
.language-kicker{font:900 13px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:4.2px;color:rgba(90,42,20,.57);margin-bottom:8px}
.language-title{font:900 48px/.94 "Helvetica Neue",Arial,sans-serif;letter-spacing:-2.6px;color:#6d351d;text-shadow:0 1px 0 rgba(255,225,171,.34)}
.language-subtitle{margin-top:10px;font:800 12px/1.25 "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:1.1px;color:rgba(91,43,21,.64)}
.language-grid{position:absolute;left:50%;top:380px;width:756px;height:557px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,360px);grid-auto-rows:174.5px;gap:16px 36px;z-index:4}
.language-choice{position:relative;width:360px;height:174.5px;border:0;background:none;padding:0;color:#efbd79;cursor:pointer;transform:translateZ(0);transition:transform .2s ease,filter .2s ease,opacity .25s ease}
.language-choice img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.language-choice span{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);text-align:center;font:900 27px/1 "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:-.7px;text-shadow:0 2px 1px rgba(48,20,8,.46);white-space:nowrap;overflow:hidden;text-overflow:clip}
.language-choice small{display:none!important}
.language-choice.selected::after{content:"";position:absolute;left:50%;bottom:25px;width:42px;height:4px;border-radius:4px;background:rgba(245,196,129,.72);transform:translateX(-50%);box-shadow:0 0 10px rgba(245,196,129,.22)}
.language-choice.chosen{animation:languageChosen .52s cubic-bezier(.2,.8,.2,1) both}
@keyframes languageChosen{0%{transform:scale(1)}45%{transform:scale(1.055);filter:brightness(1.08)}100%{transform:scale(1.015)}}
@media (hover:hover) and (pointer:fine){.language-choice:hover{transform:scale(1.025);filter:brightness(1.05)}}

.home-view.language-arrival .home-button{animation:homeFromLanguage .72s cubic-bezier(.18,.82,.2,1) both}
.home-view.language-arrival .home-button-1{animation-delay:.02s}.home-view.language-arrival .home-button-2{animation-delay:.09s}.home-view.language-arrival .home-button-3{animation-delay:.16s}.home-view.language-arrival .home-button-4{animation-delay:.23s}.home-view.language-arrival .home-button-5{animation-delay:.30s}
@keyframes homeFromLanguage{from{opacity:0;transform:translateY(20px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* Japanese copy needs breathing room but never changes the authored button geometry. */
html[data-lang="ja"] .home-button span{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif!important;letter-spacing:-1px!important;font-size:37px!important}
html[data-lang="ja"] .academy-title,html[data-lang="ja"] .puzzle-title,html[data-lang="ja"] .learn-title{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif!important;letter-spacing:-1.4px!important}
@media (prefers-reduced-motion:reduce){.language-view.cinematic-in,.language-view.leaving,.home-view.language-arrival .home-button{animation-duration:.2s!important}}


/* ============================================================
   CESS! v3.2.1 — fail-safe single-knight loading ritual
   ============================================================ */
.loading-knight-spinner{
 position:absolute;left:50%;top:57%;width:217px;height:248px;
 transform:translate(-50%,-50%);z-index:7;pointer-events:none;
 opacity:0;visibility:hidden;perspective:900px;
 transition:opacity .32s ease,visibility .32s ease;
}
.phase-loading .loading-knight-spinner{opacity:1;visibility:visible}
.loading-knight-single{
 position:absolute;left:0;top:0;width:217px;height:248px;object-fit:contain;
 transform-origin:50.1% 53%;
 filter:drop-shadow(0 13px 10px rgba(63,29,12,.22));
 will-change:transform;backface-visibility:visible;
 animation:cessKnightLoadingSpin 1.48s cubic-bezier(.42,0,.58,1) infinite;
}
@keyframes cessKnightLoadingSpin{
 0%{transform:rotateY(0deg) scale(1)}
 25%{transform:rotateY(90deg) scale(.985)}
 50%{transform:rotateY(180deg) scale(1)}
 75%{transform:rotateY(270deg) scale(.985)}
 100%{transform:rotateY(360deg) scale(1)}
}
.phase-language .loading-knight-spinner,.phase-home .loading-knight-spinner,.phase-setup .loading-knight-spinner,.phase-opening .loading-knight-spinner,.phase-puzzle .loading-knight-spinner,.phase-learn .loading-knight-spinner,.phase-game .loading-knight-spinner{opacity:0!important;visibility:hidden!important}
@media (prefers-reduced-motion:reduce){.loading-knight-single{animation-duration:2.4s!important}}


/* ============================================================
   CESS! v3.2.2 — reliability pass: compact language gate + true clockwise loader
   ============================================================ */
.loading-knight-spinner{width:217px!important;height:248px!important;perspective:none!important}
.loading-knight-single{
  left:0!important;top:0!important;width:217px!important;height:248px!important;
  transform-origin:50% 50%!important;backface-visibility:visible!important;
  animation:cessKnightClockwise 1.65s linear infinite!important;
}
@keyframes cessKnightClockwise{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.language-heading{top:294px!important;width:900px!important}
.language-title{font-size:43px!important;letter-spacing:-2.2px!important}
.language-subtitle{margin-top:8px!important;font-size:11px!important}
.language-grid{
  top:390px!important;width:646px!important;height:470px!important;
  grid-template-columns:repeat(2,310px)!important;
  grid-auto-rows:150.27px!important;
  gap:10px 26px!important;
}
.language-choice{width:310px!important;height:150.27px!important}
.language-choice span{left:22px!important;right:22px!important;top:50%!important;transform:translateY(-50%)!important;font-size:24px!important;letter-spacing:-.55px!important}
.language-choice small{display:none!important}
.language-choice.selected::after{bottom:20px!important;width:36px!important;height:3px!important}
/* When language leaves, it can never intercept the newly active Home UI. */
.language-view.leaving{pointer-events:none!important}
.phase-home .language-view{pointer-events:none!important}

/* ============================================================
   CESS! v3.2.3 — stability pass: one motion language everywhere
   ============================================================ */
/* Fixed geometry first: buttons never animate their layout or arrive out of order. */
.home-button{
  opacity:1!important;
  transform:none!important;
  transition:filter .15s ease,opacity .18s ease!important;
  transition-delay:0s!important;
  will-change:auto!important;
}
.phase-home .home-button-1,.phase-home .home-button-2,.phase-home .home-button-3,.phase-home .home-button-4,.phase-home .home-button-5{transition-delay:0s!important}
.home-view.language-arrival .home-button,.home-view.cinematic-return .home-button{animation:none!important}

/* One cheap, full-view crossfade for oak-world navigation. No blur, clip-path, scale or child stagger. */
.view.stable-in{animation:cessStableViewIn .40s cubic-bezier(.22,.72,.18,1) both!important;visibility:visible!important}
.view.stable-out{animation:cessStableViewOut .30s cubic-bezier(.4,0,.25,1) both!important;pointer-events:none!important;visibility:visible!important}
@keyframes cessStableViewIn{from{opacity:0}to{opacity:1}}
@keyframes cessStableViewOut{from{opacity:1}to{opacity:0}}
.setup-view.active{animation:none!important;clip-path:none!important;transform:none!important}
.opening-view.entering,.puzzle-view.entering,.learn-view.entering,.language-view.cinematic-in,.language-view.leaving,.opening-view.leaving-home,.puzzle-view.leaving-home,.learn-view.leaving-home{animation:none!important;clip-path:none!important;filter:none!important;transform:none!important}
.language-view{transition:none!important;filter:none!important;transform:none!important}
.language-choice.chosen{animation:cessLanguageConfirm .28s ease-out both!important}
@keyframes cessLanguageConfirm{0%{transform:scale(1)}55%{transform:scale(1.025);filter:brightness(1.045)}100%{transform:scale(1)}}

/* Full-screen cover is the only transition used when the background changes between oak and game. */
.screen-fade{transition:opacity .28s cubic-bezier(.22,.7,.18,1),visibility 0s linear .28s!important;will-change:opacity}
.screen-fade.show{transition:opacity .28s cubic-bezier(.22,.7,.18,1),visibility 0s!important}
.game-view{transition:none!important}
.game-view.entering{animation:none!important;clip-path:none!important;transform:none!important}

/* Prevent compositing flashes on Safari/Chromium while the 1920x1080 artboard is uniformly scaled. */
.stage,.view,.oak-chrome,.fx-layer,.setup-window,.board,.academy-board,.puzzle-board,.learn-board{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.stage{will-change:transform}
#viewport::before{will-change:auto}
.oak-bg,.game-bg{transition:none!important}

/* Text swaps never move the button geometry. */
.home-button span,.setup-start span,.academy-wood-btn span,.wood-ui-btn span{white-space:nowrap}
/* Synchronize the persistent chrome with the same view cadence. */
.oak-chrome{transition:opacity .36s cubic-bezier(.22,.72,.18,1)!important,transform .36s cubic-bezier(.22,.72,.18,1)!important}
.phase-setup .oak-chrome,.phase-game .oak-chrome,.phase-opening .oak-chrome,.phase-puzzle .oak-chrome,.phase-learn .oak-chrome{transform:none!important}
.fx-layer{transition:opacity .36s cubic-bezier(.22,.72,.18,1)!important,filter .36s ease!important}
/* Full-bleed backdrop needs no blur layer; removing it avoids GPU re-raster flashes and saves work. */
#viewport::before{inset:0!important;filter:none!important;transform:none!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}

/* ============================================================
   CESS! v3.2.4 — no-flicker home + compact localized controls
   ============================================================ */
/* The footer on study screens keeps its native 1237x52 artwork dimensions,
   is rotated as one piece, and faces inward toward the chessboard. */
.study-brand-column .study-footer-link{
  left:-10px!important;
  top:50%!important;
  width:52px!important;
  height:390px!important;
  margin:0!important;
  overflow:visible!important;
  transform:translateY(-50%)!important;
}
.study-brand-column .study-footer-link img{
  left:50%!important;
  top:50%!important;
  width:1237px!important;
  height:52px!important;
  max-width:none!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%) rotate(90deg) scale(.315)!important;
  transform-origin:center center!important;
}
@media (hover:hover) and (pointer:fine){
  .study-brand-column .study-footer-link:hover{transform:translateY(-50%)!important}
}

/* Home is composed while hidden underneath a true full-viewport oak cover.
   There are no staggered menu animations, layout transforms or 1920x1080 masks. */
.screen-fade{
  transition:opacity .43s cubic-bezier(.22,.72,.18,1),visibility 0s linear .43s!important;
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.screen-fade.show{
  transition:opacity .43s cubic-bezier(.22,.72,.18,1),visibility 0s!important;
}
.home-view,.home-view.active,.home-view.stable-in,.home-view.stable-out{
  transform:none!important;
  filter:none!important;
  clip-path:none!important;
}
.home-view .home-button{
  animation:none!important;
  transition:filter .15s ease,scale .18s cubic-bezier(.2,.8,.2,1)!important;
  transition-delay:0s!important;
  transform:none!important;
  opacity:1!important;
}
.phase-home .oak-chrome{transform:none!important}

/* Compact button typography is deliberately one-line in every locale. */
.academy-play span,.academy-flip span,.puzzle-action span,.learn-reset span,.learn-demo span,
.wood-ui-btn span,.result-actions button,.setup-start span{white-space:nowrap!important}
html[data-lang="tr"] .academy-play span,html[data-lang="tr"] .academy-flip span{font-size:20px!important;letter-spacing:-.25px!important}
html[data-lang="es"] .academy-play span,html[data-lang="fr"] .academy-play span,html[data-lang="it"] .academy-play span{font-size:18px!important}
html[data-lang="ja"] .academy-play span,html[data-lang="ja"] .academy-flip span{font-size:18px!important;letter-spacing:0!important}
html[data-lang="fr"] .home-button span,html[data-lang="it"] .home-button span,html[data-lang="es"] .home-button span{font-size:38px!important;letter-spacing:-1.2px!important}
html[data-lang="fr"] .home-button-3 span,html[data-lang="it"] .home-button-3 span,html[data-lang="es"] .home-button-3 span{font-size:40px!important}

/* ============================================================
   CESS! v3.2.5 — single-wood controls + right-facing bishops + fluid UI
   ============================================================ */

/* Move the ••• tools window 80px lower while preserving the supplied button artwork and proportions. */
.game-tools-button{
  line-height:1!important;
  transform:none!important;
  transition:opacity .14s ease,filter .14s ease!important;
}
.game-tools-button.open{transform:none!important;scale:1!important}
.game-tools-panel{top:518px!important}

/* Every generated walnut control is exactly one wooden artwork.
   Older generic button rules used to paint a second rounded button underneath it. */
.game-tools-panel .wood-ui-btn,
.review-panel .wood-ui-btn,
.pgn-loader .wood-ui-btn,
.pgn-loader-actions .wood-ui-btn,
.pgn-file-row .wood-ui-btn{
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.game-tools-panel .wood-ui-btn.active,
.review-panel .wood-ui-btn.active,
.pgn-loader .wood-ui-btn.active{
  box-shadow:none!important;
}
/* One and only one selection line: the green highlight over the real wood asset. */
.wood-ui-btn.active::after{
  content:""!important;
  position:absolute!important;
  inset:5px!important;
  border:3px solid var(--green)!important;
  border-radius:15px!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

/* Square-authored chess artwork stays neutral. Player-facing rotation is applied
   only by the live two-player policy at the end of this stylesheet. */
.piece-anchor .piece.piece-b,
.move-ghost.piece-b,
.capture-ghost.piece-b,
.drag-ghost.piece-b,
.captured img.piece-b{
  transform:none!important;
}
.academy-piece.piece-b.color-w,
.academy-piece.piece-b.color-b,
.puzzle-piece.piece-b,
.learn-piece.piece-b{transform:translate(-50%,-50%)!important}
.puzzle-move-ghost.piece-b,
.puzzle-drag-ghost.piece-b,
.learn-move-ghost.piece-b,
.learn-drag-ghost.piece-b{transform:none!important}

/* Cheap compositing path: no full-game blur and no filter animation during navigation. */
.game-view.modal-blur{filter:none!important}
.modal{background:rgba(31,15,9,.26)}
.oak-chrome{transition:opacity .30s cubic-bezier(.22,.72,.18,1)!important}
.fx-layer{transition:opacity .30s cubic-bezier(.22,.72,.18,1)!important}

/* Tools/PGN open with a short opacity/translate motion only; no scale/blur re-raster flashes. */
.game-tools-panel.show{animation:cessToolsIn .22s cubic-bezier(.2,.76,.2,1) both!important}
.pgn-loader.modal-card{animation:cessModalIn .24s cubic-bezier(.2,.76,.2,1) both!important}
@keyframes cessToolsIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes cessModalIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* ======================================================================
   CESS! v3.3.0 - ONLINE TWO-PLAYER LOBBY / LIVE GAME / CHAT
   ====================================================================== */
.two-mode-switch{position:absolute;left:710px;top:238px;width:500px;height:40px;display:flex;gap:10px;z-index:8}
.two-mode-tab{position:relative;flex:1;border:0;border-radius:18px;background:rgba(43,25,15,.72);box-shadow:inset 0 0 0 2px rgba(241,181,104,.16);color:rgba(241,181,104,.68);font-size:16px;font-weight:900;letter-spacing:.2px;transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease}
.two-mode-tab::after{content:"";position:absolute;left:20px;right:20px;bottom:5px;height:3px;border-radius:4px;background:transparent;transition:background .16s ease,box-shadow .16s ease}
.two-mode-tab.selected{background:rgba(45,26,15,.9);color:var(--gold);box-shadow:inset 0 0 0 2px rgba(241,181,104,.23)}
.two-mode-tab.selected::after{background:var(--green);box-shadow:0 0 8px rgba(25,115,42,.34)}
.two-mode-tab:active{transform:translateY(1px)}
.two-local-panel,.two-online-panel{position:absolute;inset:0;z-index:5}
.two-online-panel{display:none}
#setupTwo.online-mode .two-local-panel{display:none}
#setupTwo.online-mode .two-online-panel{display:block}
#setupTwo.online-mode #twoTimePrev,#setupTwo.online-mode #twoTimeNext{display:none!important}
#setupTwo:not(.online-mode) .two-online-panel{display:none!important}

.online-entry,.online-lobby{position:absolute;inset:0}
.online-lobby{display:none}
.two-online-panel.lobby-mode .online-entry{display:none}
.two-online-panel.lobby-mode .online-lobby{display:block}
.online-field{position:absolute;display:block;color:rgba(241,181,104,.8);font-size:14px;font-weight:900;letter-spacing:1.4px;text-align:left}
.online-field span{display:block;margin:0 0 8px 10px}
.online-field input{width:100%;height:64px;border:0;outline:0;border-radius:18px;padding:0 20px;background:rgba(20,17,14,.88);box-shadow:inset 0 0 0 3px rgba(93,61,35,.55),0 6px 12px rgba(0,0,0,.08);color:var(--gold);font-size:25px;font-weight:900;letter-spacing:.5px;text-transform:none;transition:box-shadow .16s ease}
.online-field input:focus{box-shadow:inset 0 0 0 3px rgba(35,112,48,.8),0 0 0 3px rgba(35,112,48,.12)}
.online-field input::placeholder{color:rgba(241,181,104,.32)}
.online-name-field{left:650px;top:307px;width:620px}
.online-create-title,.online-or{position:absolute;color:var(--gold);font-weight:900;text-align:center;letter-spacing:-1px}
.online-create-title{left:407px;top:424px;width:500px;font-size:26px}
.online-or{left:1010px;top:424px;width:450px;font-size:26px}
.online-side-row{position:absolute;left:444px;top:468px;width:428px;height:132px;display:flex;gap:16px;align-items:center;justify-content:center}
.online-choice{position:relative;width:132px;height:125px;border:0;background:transparent;padding:0}
.online-choice .wood-base{position:absolute;inset:0;width:100%;height:100%}
.online-choice .choice-piece{position:absolute;left:50%;top:50%;width:78px;height:86px;object-fit:contain;transform:translate(-50%,-50%)}
.online-choice::after{content:"";position:absolute;inset:5px;border:4px solid transparent;border-radius:19px;pointer-events:none}
.online-choice.selected::after{border-color:var(--green);box-shadow:0 0 0 1px rgba(18,77,28,.5)}
.online-time-row{position:absolute;left:417px;top:621px;width:482px;height:91px;display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.online-time-choice{position:relative;height:91px;border:0;background:transparent;color:var(--gold);font-weight:900}
.online-time-choice img{position:absolute;inset:0;width:100%;height:100%}
.online-time-choice span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;text-shadow:0 2px 1px rgba(56,22,7,.4)}
.online-time-choice::after{content:"";position:absolute;inset:4px;border:3px solid transparent;border-radius:14px}
.online-time-choice.selected::after{border-color:var(--green)}
.online-wood-button{position:absolute;width:350px;height:92px;border:0;background:transparent;color:var(--gold);font-weight:900}
.online-wood-button img{position:absolute;inset:0;width:100%;height:100%}
.online-wood-button span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900;color:var(--gold);text-shadow:0 2px 1px rgba(56,22,7,.42)}
#onlineCreate{left:484px;top:748px}
.online-code-field{left:1020px;top:503px;width:430px}
.online-code-field input{text-transform:uppercase;letter-spacing:8px;text-align:center;font-size:31px;padding-left:28px}
.online-join-button{left:1060px;top:625px}
.online-entry-status{position:absolute;left:985px;top:743px;width:500px;min-height:60px;color:rgba(241,181,104,.88);font-size:17px;font-weight:900;text-align:center;line-height:1.35}
.online-entry.busy{pointer-events:none;opacity:.72}
.online-entry-status.error{color:#dca778}

.online-lobby-kicker{position:absolute;left:610px;top:317px;width:700px;text-align:center;color:rgba(241,181,104,.72);font-size:18px;font-weight:900;letter-spacing:4px}
.online-lobby-code{position:absolute;left:510px;top:344px;width:900px;text-align:center;color:var(--gold);font-size:94px;line-height:1;font-weight:900;letter-spacing:15px;text-shadow:0 3px 2px rgba(42,21,10,.42)}
.online-lobby-copy{position:absolute;left:510px;top:448px;width:900px;text-align:center;color:rgba(241,181,104,.76);font-size:16px;font-weight:900;letter-spacing:.8px}
.online-lobby-actions{position:absolute;left:650px;top:485px;width:620px;height:80px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.online-mini-wood{position:relative;border:0;background:transparent;height:80px;color:var(--gold)}
.online-mini-wood img{position:absolute;inset:0;width:100%;height:100%}
.online-mini-wood span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;color:var(--gold);text-shadow:0 2px 1px rgba(56,22,7,.42)}
.online-player-cards{position:absolute;left:475px;top:588px;width:970px;height:130px;display:grid;grid-template-columns:1fr 80px 1fr;gap:18px;align-items:center}
.online-player-card{height:118px;border-radius:25px;background:rgba(29,19,13,.52);box-shadow:inset 0 0 0 2px rgba(241,181,104,.11);display:flex;align-items:center;padding:10px 22px;color:var(--gold)}
.online-player-card img{width:86px;height:96px;object-fit:contain;margin-right:14px}
.online-player-card small{display:block;font-size:13px;letter-spacing:2px;color:rgba(241,181,104,.6);margin-bottom:7px}
.online-player-card strong{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:25px}
.online-vs{text-align:center;color:rgba(241,181,104,.54);font-size:20px;font-weight:900}
.online-lobby-status{position:absolute;left:500px;top:740px;width:920px;text-align:center;color:var(--gold);font-size:24px;font-weight:900;letter-spacing:.6px}
.online-lobby-status::before{content:"";display:inline-block;width:10px;height:10px;margin:0 12px 2px 0;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(41,145,57,.65);animation:onlinePulse 1.4s ease-in-out infinite}
.online-cancel-room{position:absolute;left:785px;top:800px;width:350px;height:78px}
@keyframes onlinePulse{50%{opacity:.35;transform:scale(.8)}}

.online-game-name,.online-net-status,.online-chat{display:none}
.online-game .online-game-name,.online-game .online-net-status,.online-game .online-chat{display:block}
.online-game .eval-bar{opacity:0!important;pointer-events:none!important}
.online-game #toolUndo,.online-game #toolHint,.online-game #toolReview,.online-game #toolLoadPgn,.online-game [data-play-mode="study"]{display:none!important}
.online-game-name{position:absolute;left:1514px;width:232px;height:26px;box-sizing:border-box;padding:0 12px;border-radius:13px;background:rgba(18,15,12,.54);color:var(--gold);font-size:14px;font-weight:900;line-height:26px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;z-index:13;text-shadow:0 2px 2px rgba(0,0,0,.35)}
.online-game-name::before{content:"";display:inline-block;width:7px;height:7px;margin:0 8px 1px 0;border-radius:50%;background:var(--green)}
.online-game-name-top{top:10px}
.online-game-name-bottom{top:1042px}
.online-net-status{position:absolute;left:1562px;top:527px;width:166px;height:30px;border-radius:15px;background:rgba(18,15,12,.62);color:rgba(241,181,104,.78);font-size:10px;font-weight:900;letter-spacing:1px;line-height:30px;text-align:center;z-index:14}
.online-net-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(38,145,55,.58)}
.online-net-status.reconnecting .online-net-dot,.online-net-status.opponent-away .online-net-dot{background:#b77a38;box-shadow:none;animation:onlinePulse 1.2s infinite}
.online-net-status.offline .online-net-dot{background:#8f4b3d;box-shadow:none}
.online-chat{position:absolute;left:1552px;top:330px;width:336px;height:300px;box-sizing:border-box;border-radius:25px;padding:13px;background:linear-gradient(180deg,rgba(40,27,18,.97),rgba(24,19,15,.98));box-shadow:inset 0 0 0 2px rgba(241,181,104,.12),0 13px 26px rgba(0,0,0,.19);z-index:18;overflow:hidden;transition:width .18s ease,height .18s ease,left .18s ease,top .18s ease,opacity .18s ease}
.online-chat-head{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 5px 0 10px;color:var(--gold);font-size:14px;letter-spacing:1.2px}
.online-chat-head button{width:30px;height:28px;border:0;border-radius:10px;background:rgba(241,181,104,.09);color:var(--gold);font-size:17px;font-weight:900}
.online-chat-messages{height:188px;overflow-y:auto;padding:5px 8px 7px;scrollbar-width:thin;scrollbar-color:rgba(241,181,104,.18) transparent}
.online-chat-line{margin:0 0 8px;color:rgba(245,218,177,.88);font-size:13px;line-height:1.25;word-break:break-word}
.online-chat-line strong{color:var(--gold);font-size:12px;margin-right:5px}
.online-chat-line.you{text-align:right}
.online-chat-line.system{opacity:.58;text-align:center;font-style:italic}
.online-chat-compose{height:47px;display:grid;grid-template-columns:1fr 72px;gap:7px}
.online-chat-compose input{min-width:0;border:0;outline:0;border-radius:13px;padding:0 12px;background:rgba(10,10,9,.52);box-shadow:inset 0 0 0 1px rgba(241,181,104,.1);color:var(--gold);font-size:13px;font-weight:800}
.online-chat-compose input::placeholder{color:rgba(241,181,104,.32)}
.online-chat-compose button{border:0;border-radius:13px;background:rgba(105,61,31,.74);box-shadow:inset 0 0 0 1px rgba(241,181,104,.13);color:var(--gold);font-size:11px;font-weight:900}
.online-chat.collapsed{left:1760px;top:325px;width:130px;height:48px;padding:7px 9px;border-radius:16px;opacity:.92}
.online-chat.collapsed .online-chat-messages,.online-chat.collapsed .online-chat-compose{display:none}.online-chat.collapsed .online-chat-head{height:34px;padding:0 2px 0 7px}.online-chat.collapsed .online-chat-head button{height:30px}
.online-game .game-logo{top:433px!important}

@media (max-aspect-ratio:1.45/1){.online-chat{opacity:.92}}

/* ======================================================================
   CESS! v3.3.1 - ONLINE POLISH
   Preserve authored wood proportions, safe multilingual labels,
   unmistakable guest-name entry and incoming-chat reveal.
   ====================================================================== */
.online-create-title{top:300px}
.online-or{top:300px}
.online-create-name-field{left:430px;top:344px;width:440px}
.online-join-name-field{left:1020px;top:344px;width:430px}
.online-invite-hint{display:none;position:absolute;left:1000px;top:324px;width:470px;text-align:center;color:var(--green);font-size:12px;font-weight:900;letter-spacing:.9px;line-height:1;z-index:3}
.online-side-row{top:450px}
.online-time-row{top:592px}
.online-code-field{left:1020px;top:476px;width:430px}

/* Never stretch the supplied wooden artwork. The CSS box follows the PNG ratio. */
.online-wood-button{width:400px;height:63px}
#onlineCreate{left:459px;top:715px}
.online-join-button{left:1035px;top:600px}
.online-wood-button img,.online-mini-wood img{object-fit:contain}
.online-wood-button span,.online-mini-wood span{box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:1;padding-left:12%;padding-right:12%}
.online-wood-button span{font-size:23px}
.online-entry-status{left:710px;top:795px;width:500px}

/* button6.png is 557x270. Keep that exact 2.063:1 silhouette everywhere. */
.online-lobby-actions{left:710px;top:485px;width:500px;height:112px;grid-template-columns:230px 230px;gap:40px}
.online-mini-wood{width:230px;height:112px}
.online-mini-wood span{font-size:18px;padding-left:14%;padding-right:14%}
.online-player-cards{top:620px}
.online-lobby-status{top:765px}
.online-cancel-room{left:840px;top:825px;width:240px;height:116px}

/* Invitation links guide the guest straight to their own name field. */
#setupTwo.invite-mode .online-invite-hint{display:block}
#setupTwo.invite-mode .online-join-name-field input{box-shadow:inset 0 0 0 3px rgba(35,112,48,.96),0 0 0 4px rgba(35,112,48,.16),0 8px 18px rgba(0,0,0,.09);animation:onlineInviteField 1.35s ease-in-out 2}
#setupTwo.invite-mode .online-create-title,
#setupTwo.invite-mode .online-create-name-field,
#setupTwo.invite-mode .online-side-row,
#setupTwo.invite-mode .online-time-row,
#setupTwo.invite-mode #onlineCreate{opacity:.24;pointer-events:none;filter:saturate(.5)}
#setupTwo.invite-mode .online-or{color:var(--gold)}
@keyframes onlineInviteField{50%{box-shadow:inset 0 0 0 3px rgba(35,112,48,1),0 0 0 8px rgba(35,112,48,.14),0 8px 18px rgba(0,0,0,.09)}}

/* Incoming opponent chat opens without stealing keyboard focus. */
.online-chat.message-arrived{animation:onlineChatArrive .36s cubic-bezier(.2,.78,.2,1)}
@keyframes onlineChatArrive{0%{transform:translateX(10px);opacity:.65}100%{transform:none;opacity:1}}


/* ======================================================================
   CESS! v3.3.2 - TWO PLAYER PRIORITY + KING LOADER
   Keep the authored wood silhouettes; make the mode decision the visual
   priority and slightly reduce the local color-choice row beneath it.
   ====================================================================== */
#setupTwo .two-mode-switch{
  left:660px;
  top:245px;
  width:600px;
  height:54px;
  gap:14px;
}
#setupTwo .two-mode-tab{
  border-radius:22px;
  font-size:20px;
  letter-spacing:.25px;
}
#setupTwo .two-mode-tab::after{
  left:24px;
  right:24px;
  bottom:6px;
  height:4px;
}

/* First local choice row is intentionally a touch quieter than the
   SAME DEVICE / ONLINE decision above it. Centers remain unchanged. */
#setupTwo .two-side-row .wood-choice{
  width:250px;
  height:236.5px;
}
#setupTwo .two-side-row .wood-choice .wood-base{
  width:250px;
  height:236.5px;
}
#setupTwo .two-side-row .wood-choice:nth-child(1){left:535px;top:312px}
#setupTwo .two-side-row .wood-choice:nth-child(2){left:835px;top:312px}
#setupTwo .two-side-row .wood-choice:nth-child(3){left:1135px;top:312px}
#setupTwo .two-side-row .choice-piece{
  width:156px;
  max-height:174px;
}
#setupTwo .two-side-row .wood-choice::after{
  border-width:4px;
  border-radius:24px;
}


/* ======================================================================
   CESS! v3.3.4 - RELEASE HISTORY + ONLINE SETUP HIERARCHY
   ====================================================================== */
/* Main menu typography is one disciplined size in every language. */
.home-button span,
html[data-lang="en"] .home-button span,
html[data-lang="tr"] .home-button span,
html[data-lang="es"] .home-button span,
html[data-lang="ja"] .home-button span,
html[data-lang="it"] .home-button span,
html[data-lang="fr"] .home-button span{
  box-sizing:border-box!important;
  padding:0 62px!important;
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-1px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
html[data-lang="ja"] .home-button span{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif!important;letter-spacing:-.5px!important}

/* Quiet version signature beneath the complete Home menu. */
.home-release-meta{position:absolute;left:710px;top:898px;width:500px;height:58px;text-align:center;color:rgba(92,49,25,.78);z-index:9;opacity:1}
.home-version{height:24px;font-size:15px;line-height:24px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase}
.home-release-button{height:28px;max-width:440px;padding:0 18px;border:0;background:transparent;color:rgba(77,39,20,.72);font-size:12px;line-height:28px;font-weight:900;letter-spacing:1.7px;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease,opacity .15s ease}
.home-release-button:hover,.home-release-button:focus-visible{color:rgba(35,91,44,.96);outline:0}

/* Flat, scrollable release-history window. No wooden title surface. */
.release-notes-backdrop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:72px 0;background:rgba(29,14,8,.24);box-sizing:border-box}
.release-notes-window{width:1100px;height:850px;box-sizing:border-box;border:2px solid rgba(241,181,104,.17);border-radius:34px;background:linear-gradient(180deg,rgba(48,31,21,.985),rgba(25,19,15,.992));box-shadow:0 26px 70px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,222,177,.035);color:var(--gold);overflow:hidden;animation:cessModalIn .24s cubic-bezier(.2,.76,.2,1) both}
.release-notes-header{height:220px;box-sizing:border-box;padding:38px 56px 26px;display:grid;grid-template-columns:1fr 54px;gap:28px;border-bottom:1px solid rgba(241,181,104,.12)}
.release-notes-version{font-size:12px;font-weight:900;letter-spacing:3px;color:rgba(241,181,104,.58);margin-bottom:8px}
.release-notes-header h2{margin:0 0 12px;font-size:39px;line-height:1;font-weight:900;letter-spacing:-1.5px;color:var(--gold)}
.release-notes-header p{max-width:880px;margin:0;color:rgba(244,214,173,.72);font-size:15px;line-height:1.52;font-weight:700;letter-spacing:.05px}
.release-notes-close{width:46px;height:46px;border:1px solid rgba(241,181,104,.16);border-radius:15px;background:rgba(241,181,104,.055);color:var(--gold);font-size:30px;line-height:42px;font-weight:500;cursor:pointer}
.release-notes-close:hover,.release-notes-close:focus-visible{background:rgba(241,181,104,.10);outline:0}
.release-notes-scroll{height:570px;overflow-y:auto;padding:10px 56px 28px;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(241,181,104,.28) transparent;overscroll-behavior:contain}
.release-notes-scroll::-webkit-scrollbar{width:8px}.release-notes-scroll::-webkit-scrollbar-track{background:transparent}.release-notes-scroll::-webkit-scrollbar-thumb{background:rgba(241,181,104,.24);border-radius:8px}
.release-note-entry{display:grid;grid-template-columns:185px 1fr;gap:34px;padding:28px 0 30px;border-bottom:1px solid rgba(241,181,104,.10)}
.release-note-entry:last-child{border-bottom:0}
.release-note-meta{padding-top:2px}.release-note-meta strong{display:block;font-size:23px;line-height:1;font-weight:900;letter-spacing:-.4px;color:var(--gold)}.release-note-meta time{display:block;margin-top:9px;color:rgba(241,181,104,.48);font-size:11px;font-weight:900;letter-spacing:1.7px}
.release-note-copy h3{margin:0 0 9px;font-size:19px;line-height:1.18;font-weight:900;letter-spacing:.2px;color:rgba(248,196,123,.96)}
.release-note-copy p{margin:0;color:rgba(246,222,190,.76);font-size:14px;line-height:1.56;font-weight:650}
.release-notes-footer{height:60px;box-sizing:border-box;border-top:1px solid rgba(241,181,104,.10);display:flex;align-items:center;justify-content:center;color:rgba(241,181,104,.42);font-size:10px;font-weight:900;letter-spacing:2.6px;text-transform:uppercase}

/* Online setup: two clearly separate jobs, placed lower and centered in window. */
#setupTwo.online-mode .two-online-panel{transform:none!important}
.online-entry{overflow:hidden}
.online-section-card{position:absolute;top:340px;width:545px;height:520px;box-sizing:border-box;border-radius:30px;background:linear-gradient(180deg,rgba(37,24,16,.53),rgba(25,18,13,.44));box-shadow:inset 0 0 0 2px rgba(241,181,104,.09),0 12px 26px rgba(0,0,0,.06);z-index:0}
.online-section-card-create{left:370px}.online-section-card-join{left:1005px}
.online-section-divider{position:absolute;left:945px;top:368px;width:30px;height:464px;z-index:1;display:flex;align-items:center;justify-content:center;color:rgba(241,181,104,.50);font-size:11px;font-weight:900;letter-spacing:1px}
.online-section-divider::before,.online-section-divider::after{content:"";position:absolute;left:14px;width:1px;height:185px;background:linear-gradient(transparent,rgba(241,181,104,.16),transparent)}
.online-section-divider::before{top:0}.online-section-divider::after{bottom:0}
.online-section-divider span{position:relative;z-index:2;width:30px;min-height:30px;display:flex;align-items:center;justify-content:center;border-radius:15px;background:rgba(41,27,18,.95);box-shadow:0 0 0 1px rgba(241,181,104,.12);padding:4px;box-sizing:border-box;text-align:center;line-height:1.05}
.online-entry > :not(.online-section-card):not(.online-section-divider){z-index:2}
.online-create-title,.online-or{top:365px!important;font-size:23px!important;line-height:1!important;letter-spacing:-.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.online-create-title{left:400px!important;width:485px!important}.online-or{left:1035px!important;width:485px!important}
.online-section-copy{position:absolute;top:401px;width:465px;color:rgba(241,181,104,.54);font-size:11px;line-height:1.25;font-weight:900;letter-spacing:.75px;text-align:center;text-transform:uppercase;white-space:normal;overflow:hidden;max-height:30px}
.online-create-copy{left:410px}.online-join-copy{left:1045px}
.online-create-name-field{left:420px!important;top:444px!important;width:445px!important}
.online-join-name-field{left:1055px!important;top:444px!important;width:445px!important}
.online-side-row{left:430px!important;top:548px!important;width:425px!important}
.online-time-row{left:402px!important;top:684px!important;width:482px!important}
.online-code-field{left:1055px!important;top:574px!important;width:445px!important}
#onlineCreate{left:442px!important;top:792px!important;width:400px!important;height:63px!important}
.online-join-button{left:1078px!important;top:710px!important;width:400px!important;height:63px!important}
.online-entry-status{left:710px!important;top:882px!important;width:500px!important;max-height:48px!important;overflow:hidden!important;font-size:15px!important;line-height:1.35!important}
.online-invite-hint{left:1040px!important;top:424px!important;width:475px!important;font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Nothing in Online is allowed to render beyond the control that owns it. */
.two-mode-tab,.online-choice,.online-time-choice,.online-wood-button,.online-mini-wood{box-sizing:border-box;overflow:hidden}
.two-mode-tab span,.online-time-choice span,.online-wood-button span,.online-mini-wood span{box-sizing:border-box;max-width:100%;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
.online-field{box-sizing:border-box;overflow:visible}.online-field span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.online-field input{box-sizing:border-box;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.online-code-field input{letter-spacing:6px!important;font-size:28px!important;padding-left:20px!important;padding-right:20px!important}
.online-lobby-copy{box-sizing:border-box;padding:0 30px;line-height:1.25;white-space:normal;max-height:42px;overflow:hidden}
.online-lobby-status{box-sizing:border-box;padding:0 25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.online-player-card{box-sizing:border-box;overflow:hidden}.online-player-card>div{min-width:0}.online-player-card strong{max-width:100%!important}
.online-chat-head strong,.online-chat-compose button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Invite links emphasize the JOIN card as one dedicated task. */
#setupTwo.invite-mode .online-section-card-create{opacity:.28;filter:saturate(.55)}
#setupTwo.invite-mode .online-section-card-join{box-shadow:inset 0 0 0 2px rgba(35,112,48,.46),0 0 0 4px rgba(35,112,48,.07),0 12px 26px rgba(0,0,0,.06)}


/* ============================================================
   CESS! v3.3.5 — single-line language choices + restrained ambient score
   ============================================================ */
.language-choice{overflow:hidden}
.language-choice span{box-sizing:border-box;max-width:calc(100% - 44px);margin:0 auto}
html[data-lang="ja"] .language-choice span{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif!important;letter-spacing:-.4px!important}


/* ======================================================================
   CESS! v3.3.7 - REFERENCE HOME CHESS PIECES
   User-supplied PNGs positioned from home.png; Home only, all languages.
   ====================================================================== */
.home-static-pieces{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.home-static-piece{position:absolute;display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none;user-select:none}
.home-piece-a1{left:381.8px;top:330.8px;width:236.5px;height:553.2px;z-index:1}
.home-piece-a3{left:124.6px;top:590.9px;width:175.3px;height:292.1px;z-index:1}
.home-piece-a4{left:233.9px;top:508.0px;width:239.4px;height:375.1px;z-index:2}
.home-piece-a2{left:1311.0px;top:332.7px;width:259.2px;height:553.2px;z-index:1}
.home-piece-a6{left:1492.9px;top:464.6px;width:205.4px;height:418.4px;z-index:2}
.home-piece-a5{left:1627.7px;top:589.0px;width:187.5px;height:294.0px;z-index:3}
.home-view .home-button{z-index:4}
.home-view .home-release-meta{z-index:5}


/* ============================================================
   CESS! v3.3.8 — Home music control
   ============================================================ */
.home-music-toggle{
  display:none;
  position:absolute;
  left:1594px;
  top:974px;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#5a2d16;
  color:#efb665;
  box-shadow:inset 0 1px 0 rgba(255,214,151,.16),0 2px 5px rgba(69,29,10,.16);
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  cursor:pointer;
  z-index:24;
  overflow:hidden;
  transition:transform .16s ease,filter .16s ease,opacity .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.phase-home .home-music-toggle{display:flex!important}
.phase-loading .home-music-toggle,.phase-language .home-music-toggle,.phase-setup .home-music-toggle,.phase-opening .home-music-toggle,.phase-puzzle .home-music-toggle,.phase-learn .home-music-toggle,.phase-game .home-music-toggle{display:none!important}
.home-music-note{display:block;font-family:Georgia,'Times New Roman',serif;font-size:26px;font-weight:700;line-height:1;transform:translateY(-1px);pointer-events:none}
.home-music-slash{position:absolute;left:11px;top:23px;width:27px;height:2.4px;border-radius:2px;background:#efb665;opacity:0;transform:rotate(-45deg);transform-origin:center;pointer-events:none;box-shadow:0 0 0 1px rgba(90,45,22,.16)}
.home-music-toggle.is-muted .home-music-note{opacity:.55}
.home-music-toggle.is-muted .home-music-slash{opacity:1}
.home-music-toggle:focus-visible{outline:2px solid rgba(239,182,101,.74);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.home-music-toggle:hover{transform:scale(1.055);filter:brightness(1.07)}}
.home-music-toggle:active{transform:scale(.96)}

/* ======================================================================
   CESS! v3.3.9 — TOP 100 GAMES / HISTORICAL ANALYSIS ARCHIVE
   Six-button Home composition + full historical replay / analysis view.
   ====================================================================== */
/* Six main choices fit the authored Home composition without disturbing the
   supplied left/right chess-piece PNGs. All six retain one font scale. */
.oak-logo{left:655px!important;top:30px!important;width:610px!important;height:217px!important}
.home-button{left:655px!important;width:610px!important;height:96px!important}
.home-button-1{top:282px!important}.home-button-2{top:385px!important}.home-button-3{top:488px!important}
.home-button-4{top:591px!important}.home-button-5{top:694px!important}.home-button-6{top:797px!important}
.home-button span,
html[data-lang="en"] .home-button span,
html[data-lang="tr"] .home-button span,
html[data-lang="es"] .home-button span,
html[data-lang="ja"] .home-button span,
html[data-lang="it"] .home-button span,
html[data-lang="fr"] .home-button span{
  padding:0 52px!important;font-size:31px!important;line-height:1!important;letter-spacing:-.75px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important
}
html[data-lang="ja"] .home-button span{font-size:29px!important;letter-spacing:-.2px!important}
.home-release-meta{top:900px!important;height:54px!important}
.phase-home .home-button-6{transition-delay:0s!important}

/* Historical archive is a study screen: keep persistent Home chrome out and
   retain only the vertical CESS signature on the far right. */
.stage.phase-history{overflow:visible;background:transparent}
.phase-history .oak-bg{opacity:0!important}
.phase-history .oak-chrome{opacity:0!important;transform:none!important;pointer-events:none!important}
.phase-history .fx-layer{opacity:.26!important;filter:none!important}
.phase-history .fall-piece{animation-play-state:paused!important}
.phase-history .oak-footer-link,.phase-history .home-music-toggle{display:none!important;visibility:hidden!important;pointer-events:none!important}
#viewport.vp-phase-history::before{inset:0!important;filter:none!important;transform:none!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
.top100-view{z-index:8;color:var(--gold)}
.top100-heading{position:absolute;left:440px;top:30px;width:1040px;text-align:center;z-index:5;pointer-events:none}
.top100-kicker{font:900 14px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:4px;color:rgba(89,42,21,.59);margin-bottom:8px;text-transform:uppercase}
.top100-title{font-size:55px;line-height:1;font-weight:900;letter-spacing:-2.7px;color:#6d351d;text-shadow:0 1px 0 rgba(255,225,170,.25)}
.top100-back{left:64px!important;top:40px!important;width:82px!important;height:78px!important}
.top100-back span{font-size:58px!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-60%)!important}

/* Board */
.top100-board{position:absolute;left:64px;top:145px;width:780px;height:780px;display:grid;grid-template-columns:repeat(8,97.5px);grid-template-rows:repeat(8,97.5px);background:url('assets/grid.png') center -1px/780px 782px no-repeat;overflow:hidden;z-index:4;box-shadow:0 18px 34px rgba(84,38,13,.18);contain:layout paint style;backface-visibility:hidden;transform:translateZ(0)}
.top100-sq{position:relative;width:97.5px;height:97.5px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.top100-sq::before,.top100-sq::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0}
.top100-sq.last-from::before{width:64px;height:64px;opacity:.70;background:rgba(213,139,69,.28);border:4px solid rgba(213,139,69,.56)}
.top100-sq.last-to::before{width:75px;height:75px;opacity:.96;background:rgba(213,139,69,.13);border:5px solid rgba(213,139,69,.93)}
.top100-sq.preview::before{width:62px;height:62px;opacity:.8;background:rgba(39,183,70,.12);border:4px solid rgba(39,183,70,.62)}
.top100-sq.selected::before{width:72px;height:72px;opacity:.95;background:rgba(39,183,70,.14);border:4px solid rgba(39,183,70,.82)}
.top100-sq.legal::after{width:19px;height:19px;opacity:.76;background:rgba(39,183,70,.86);box-shadow:0 0 0 6px rgba(39,183,70,.12)}
.top100-sq.capture-target::after{width:73px;height:73px;opacity:.82;background:transparent;border:5px solid rgba(39,183,70,.82)}
.top100-piece{position:absolute;left:50%;top:50%;width:89px;height:89px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(30,10,4,.17));z-index:2;pointer-events:none;user-select:none;-webkit-user-drag:none}
.top100-piece.piece-n.color-w{transform:translate(-49.6%,-52.1%)}.top100-piece.piece-n.color-b{transform:translate(-50.1%,-53%)}
.top100-piece.piece-b.color-w,.top100-piece.piece-b.color-b{transform:translate(-50%,-50%)!important}
.top100-piece.knight-down.color-w{transform:translate(-49.6%,-52.1%) rotate(180deg)!important}.top100-piece.knight-down.color-b{transform:translate(-50.1%,-53%) rotate(180deg)!important}
.top100-view.analysis-active .top100-board{box-shadow:0 18px 34px rgba(84,38,13,.18),0 0 0 5px rgba(39,183,70,.27)}
.top100-view.analysis-active .top100-sq{cursor:pointer}

/* Replay controls */
.top100-board-controls{position:absolute;left:64px;top:942px;width:780px;height:95px;display:flex;align-items:center;justify-content:center;gap:10px;z-index:8}
.top100-board-controls .academy-wood-btn{position:relative!important;left:auto!important;top:auto!important;overflow:hidden}
.top100-nav{width:62px;height:60px}.top100-nav span{font-size:36px!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-58%)!important}
.top100-play{width:126px;height:61px}.top100-flip{width:111px;height:54px}.top100-analyze{width:156px;height:76px}
.top100-play span,.top100-flip span,.top100-analyze span{font-size:14px!important;letter-spacing:.1px!important;padding:0 13px;white-space:nowrap;overflow:hidden;max-width:100%;box-sizing:border-box}
.top100-analyze.active{filter:brightness(1.09) drop-shadow(0 0 9px rgba(39,183,70,.28))!important}
.top100-nav.disabled,.top100-play.disabled{opacity:.28;pointer-events:none}

/* Right-side editorial archive panel */
.top100-panel{position:absolute;left:885px;top:112px;width:825px;height:895px;padding:22px 22px 18px;box-sizing:border-box;border-radius:34px;border:2px solid rgba(92,46,24,.22);background:linear-gradient(180deg,rgba(70,39,23,.95),rgba(38,25,17,.98));box-shadow:0 22px 38px rgba(77,35,14,.20),inset 0 1px 0 rgba(255,226,176,.08),inset 0 0 0 1px rgba(39,20,11,.52);z-index:6;overflow:hidden}
.top100-panel-head{height:84px;display:grid;grid-template-columns:82px minmax(0,1fr) 70px;gap:14px;align-items:center;padding:0 4px 16px;border-bottom:1px solid rgba(241,181,104,.13);box-sizing:border-box}
.top100-rank{width:72px;height:58px;border-radius:18px;background:rgba(15,13,11,.34);border:1px solid rgba(241,181,104,.10);display:flex;align-items:center;justify-content:center;color:#f5c784;font-size:25px;font-weight:900;letter-spacing:-1px}
.top100-game-identity{min-width:0}.top100-players{color:#f3c17f;font-size:25px;line-height:1.02;font-weight:900;letter-spacing:-1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top100-meta{margin-top:7px;color:rgba(241,181,104,.52);font-size:10px;font-weight:900;letter-spacing:1.15px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top100-result{height:42px;border-radius:14px;background:rgba(20,17,14,.42);border:1px solid rgba(241,181,104,.10);display:flex;align-items:center;justify-content:center;color:#f4c37f;font-size:16px;font-weight:900;letter-spacing:.2px}
.top100-toolbar{height:74px;display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:center;border-bottom:1px solid rgba(241,181,104,.11)}
.top100-search-wrap{height:49px;position:relative;display:block}.top100-search-wrap span{position:absolute;left:13px;top:7px;color:rgba(241,181,104,.40);font-size:8px;font-weight:900;letter-spacing:1.5px;z-index:2}.top100-search-wrap input{width:100%;height:49px;border:1px solid rgba(241,181,104,.10);outline:0;border-radius:15px;background:rgba(12,11,10,.32);color:#f3c17f;padding:17px 14px 3px;font:800 12px/1 "Helvetica Neue",Arial,sans-serif;box-sizing:border-box}.top100-search-wrap input::placeholder{color:rgba(241,181,104,.28)}.top100-search-wrap input:focus{border-color:rgba(39,183,70,.48);box-shadow:0 0 0 3px rgba(39,183,70,.07)}
.top100-era-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.top100-era-tabs button{height:36px;min-width:0;padding:0 5px;border-radius:12px;border:1px solid rgba(241,181,104,.10);background:rgba(15,13,11,.30);color:rgba(241,181,104,.57);font:900 9px/36px "Helvetica Neue",Arial,sans-serif;letter-spacing:.55px;white-space:nowrap;overflow:hidden;text-overflow:clip}.top100-era-tabs button.active{background:rgba(39,183,70,.14);border-color:rgba(39,183,70,.45);color:#f5c784}
.top100-loading{position:absolute;left:22px;right:22px;top:170px;bottom:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(241,181,104,.64);text-align:center}.top100-loading-mark{font-size:128px;line-height:.82;font-weight:900;letter-spacing:-9px;color:rgba(241,181,104,.10)}.top100-loading strong{margin-top:22px;color:#efbd79;font-size:18px;letter-spacing:1.5px}.top100-loading span{margin-top:8px;font-size:12px;font-weight:700;opacity:.65}.top100-loading.error .top100-loading-mark{font-size:64px;letter-spacing:0}.top100-loading.error strong{color:#e3a76e}
.top100-content{height:676px;display:grid;grid-template-columns:278px minmax(0,1fr);gap:18px;padding-top:16px;box-sizing:border-box}
.top100-game-list{height:100%;overflow-y:auto;padding:0 7px 0 0;scrollbar-width:thin;scrollbar-color:rgba(241,181,104,.24) transparent;overscroll-behavior:contain}.top100-game-list::-webkit-scrollbar{width:6px}.top100-game-list::-webkit-scrollbar-thumb{background:rgba(241,181,104,.20);border-radius:10px}
.top100-game-item{width:100%;min-height:62px;box-sizing:border-box;margin:0 0 7px;padding:9px 11px;border-radius:15px;border:1px solid rgba(241,181,104,.09);background:rgba(15,13,11,.35);color:rgba(241,181,104,.72);text-align:left;overflow:hidden;transition:background .14s ease,border-color .14s ease,transform .14s ease}.top100-game-item .top100-item-top{display:flex;align-items:center;gap:8px;min-width:0}.top100-game-item b{flex:0 0 33px;color:rgba(241,181,104,.42);font-size:11px;letter-spacing:.3px}.top100-game-item strong{min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#edb974;font-size:12px;line-height:1.12;font-weight:900;letter-spacing:-.15px}.top100-game-item small{display:block;margin:6px 0 0 41px;color:rgba(241,181,104,.40);font-size:9px;font-weight:900;letter-spacing:.75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top100-game-item.active{background:rgba(39,183,70,.12);border-color:rgba(39,183,70,.44);transform:translateX(2px)}
.top100-study{min-width:0;height:100%;overflow:hidden;color:#efbd79}.top100-study-topline{height:58px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid rgba(241,181,104,.10)}.top100-study-topline span{display:block;color:rgba(241,181,104,.42);font-size:9px;font-weight:900;letter-spacing:1.65px}.top100-study-topline strong{display:block;margin-top:6px;max-width:380px;color:#f6ca89;font-size:23px;line-height:1;font-weight:900;letter-spacing:-.65px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top100-ply-counter{padding-top:14px;color:rgba(241,181,104,.52);font-size:12px;font-weight:900;letter-spacing:.5px;white-space:nowrap}
.top100-explanation{height:120px;box-sizing:border-box;padding:15px 14px 12px;margin-top:12px;border-radius:16px;background:rgba(17,15,12,.34);border:1px solid rgba(241,181,104,.09);color:rgba(245,211,166,.82);font:700 14px/1.48 "Helvetica Neue",Arial,sans-serif;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(241,181,104,.18) transparent}
.top100-section-label{margin:15px 0 8px;color:rgba(241,181,104,.42);font-size:9px;font-weight:900;letter-spacing:1.7px}
.top100-move-list{height:170px;padding:9px 10px;box-sizing:border-box;border-radius:14px;background:rgba(13,12,10,.30);border:1px solid rgba(241,181,104,.08);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(241,181,104,.20) transparent;font:800 12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(241,190,122,.66)}
.top100-move-pair{display:inline-block;margin-right:8px;white-space:nowrap}.top100-move-pair em{font-style:normal;color:rgba(241,181,104,.35);margin-right:3px}.top100-move-list button{padding:1px 3px;margin:0;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;line-height:1.4;cursor:pointer}.top100-move-list button.current{color:#ffd495;background:rgba(39,183,70,.17);box-shadow:inset 0 -2px 0 rgba(39,183,70,.55)}
.top100-analysis-panel{height:206px;margin-top:14px;padding:14px 14px 12px;box-sizing:border-box;border-radius:18px;border:1px solid rgba(241,181,104,.09);background:linear-gradient(180deg,rgba(17,15,12,.42),rgba(12,11,9,.35));overflow:hidden}.top100-analysis-head{height:48px;display:flex;align-items:flex-start;justify-content:space-between}.top100-analysis-head small{display:block;color:rgba(241,181,104,.40);font-size:8px;font-weight:900;letter-spacing:1.5px}.top100-analysis-head strong{display:block;margin-top:4px;color:#f5c987;font-size:25px;line-height:1;font-weight:900;letter-spacing:-.7px}.top100-analysis-head>span{height:24px;padding:0 9px;border-radius:12px;background:rgba(241,181,104,.06);color:rgba(241,181,104,.42);font:900 8px/24px "Helvetica Neue",Arial,sans-serif;letter-spacing:1px}.top100-view.analysis-active .top100-analysis-head>span{background:rgba(39,183,70,.16);color:#f5c987}.top100-pv{height:68px;overflow-y:auto;color:rgba(241,205,156,.66);font:750 11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;scrollbar-width:thin}.top100-analysis-actions{height:42px;display:flex;align-items:flex-end;gap:7px}.top100-analysis-actions button{height:31px;min-width:0;flex:1;border-radius:11px;border:1px solid rgba(241,181,104,.10);background:rgba(241,181,104,.055);color:rgba(241,181,104,.70);font:900 8px/31px "Helvetica Neue",Arial,sans-serif;letter-spacing:.55px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top100-analysis-actions button:disabled{opacity:.25}.top100-view:not(.analysis-active) .top100-analysis-actions{opacity:.32;pointer-events:none}
.top100-source{position:absolute;left:22px;right:22px;bottom:10px;height:18px;color:rgba(241,181,104,.28);font:900 8px/18px "Helvetica Neue",Arial,sans-serif;letter-spacing:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top100-brand-column{left:1717px!important}.top100-logo{object-fit:contain}

/* Promotion choice while exploring a historical position. */
.top100-promotion{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(26,18,13,.30);backdrop-filter:none}.top100-promotion.show{display:flex}.top100-promotion-card{width:490px;height:188px;padding:20px 24px;box-sizing:border-box;border-radius:28px;background:linear-gradient(180deg,rgba(70,39,23,.98),rgba(38,25,17,.99));border:2px solid rgba(241,181,104,.18);box-shadow:0 24px 50px rgba(45,22,10,.28);text-align:center;color:#f2bd78}.top100-promotion-card>div:first-child{height:30px;font-size:12px;font-weight:900;letter-spacing:2px}.top100-promotion-pieces{display:flex;align-items:center;justify-content:center;gap:12px}.top100-promotion-pieces button{width:90px;height:112px;border:0;border-radius:19px;background:rgba(17,14,11,.30);box-shadow:inset 0 0 0 1px rgba(241,181,104,.10)}.top100-promotion-pieces img{width:82px;height:82px;object-fit:contain;pointer-events:none}.top100-promotion-pieces img.piece-b{transform:none}

@media (hover:hover) and (pointer:fine){
  .top100-game-item:hover,.top100-era-tabs button:hover{border-color:rgba(241,181,104,.24)}
  .top100-move-list button:hover{color:#ffd495;background:rgba(241,181,104,.06)}
  .top100-analysis-actions button:hover{background:rgba(241,181,104,.10);color:#f5c987}
}
html[data-lang="ja"] .top100-title,html[data-lang="ja"] .top100-players,html[data-lang="ja"] .top100-explanation{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif}
.top100-loading button{margin-top:20px;height:40px;padding:0 20px;border-radius:14px;border:1px solid rgba(241,181,104,.16);background:rgba(241,181,104,.07);color:#efbd79;font:900 10px/40px "Helvetica Neue",Arial,sans-serif;letter-spacing:1px;cursor:pointer}.top100-empty{padding:28px 14px;text-align:center;color:rgba(241,181,104,.38);font:900 10px/1.5 "Helvetica Neue",Arial,sans-serif;letter-spacing:1px}


/* ======================================================================
   CESS! v3.4.2 — SIGNATURE TRILOGY
   THE MOMENT · PARALLEL 64 · GAME DNA
   ====================================================================== */
/* Seven-choice Home: preserve the supplied chess-piece composition while
   opening one calm row for the CESS signature entry. */
.oak-logo{left:682px!important;top:25px!important;width:556px!important;height:198px!important}
.home-button{left:680px!important;width:560px!important;height:80px!important}
.home-button-1{top:244px!important}.home-button-2{top:331px!important}.home-button-3{top:418px!important}
.home-button-4{top:505px!important}.home-button-5{top:592px!important}.home-button-6{top:679px!important}.home-button-7{top:766px!important}
.home-button span,
html[data-lang="en"] .home-button span,
html[data-lang="tr"] .home-button span,
html[data-lang="es"] .home-button span,
html[data-lang="ja"] .home-button span,
html[data-lang="it"] .home-button span,
html[data-lang="fr"] .home-button span{
  box-sizing:border-box!important;padding:0 44px!important;font-size:27px!important;line-height:1!important;letter-spacing:-.45px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important
}
html[data-lang="ja"] .home-button span{font-size:25px!important;letter-spacing:0!important}
.home-release-meta{top:857px!important;height:54px!important}
.phase-home .home-button-7{transition-delay:0s!important}

/* Signature space is intentionally quieter than the main menu: the board and
   the decision are the hero, while the handcrafted CESS wood language remains. */
.stage.phase-signature{overflow:visible;background:transparent}
.phase-signature .oak-bg{opacity:0!important}
.phase-signature .oak-chrome{opacity:0!important;pointer-events:none!important}
.phase-signature .fx-layer{opacity:.18!important;filter:none!important}
.phase-signature .fall-piece{animation-play-state:paused!important}
.phase-signature .oak-footer-link,.phase-signature .home-music-toggle{display:none!important;visibility:hidden!important;pointer-events:none!important}
#viewport.vp-phase-signature::before{inset:0!important;filter:none!important;transform:none!important;background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important}
.signature-view{z-index:10;color:#6b351d;overflow:visible}
.signature-heading{position:absolute;left:360px;top:28px;width:1200px;text-align:center;z-index:15;pointer-events:none}
.signature-kicker{font:900 13px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:4.2px;color:rgba(88,43,23,.58);margin-bottom:8px}
.signature-title{font:900 60px/.92 "Helvetica Neue",Arial,sans-serif;letter-spacing:-3.5px;color:#67321b;text-shadow:0 1px 0 rgba(255,226,180,.28)}
.signature-tagline{margin-top:10px;font:900 18px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:3.8px;color:rgba(88,43,23,.72)}
.signature-back{left:62px!important;top:42px!important;width:82px!important;height:78px!important;z-index:20}
.signature-back span{font-size:58px!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-60%)!important}
.signature-mode{position:absolute;inset:0;z-index:8}
.signature-mode[hidden]{display:none!important}
.signature-brand-column{right:22px!important;top:148px!important;height:810px!important;opacity:.72}
.signature-logo{width:58px!important}
.signature-study-footer{bottom:5px!important}

/* One board before the split. */
.signature-parallel-intro{position:absolute;left:0;top:0;width:1920px;height:1080px}
.signature-primary-board,.signature-moment-board{position:absolute;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);background:url('assets/grid.png') center/100% 100% no-repeat;overflow:hidden;box-shadow:0 20px 45px rgba(70,31,10,.20);contain:layout paint style;transform:translateZ(0)}
.signature-primary-board{left:545px;top:220px;width:690px;height:690px}
.signature-sq{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;box-sizing:border-box}
.signature-sq::before,.signature-sq::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0}
.signature-sq.selected::before{width:68%;height:68%;opacity:.92;background:rgba(41,178,68,.12);border:4px solid rgba(41,178,68,.82)}
.signature-sq.legal::after{width:17%;height:17%;opacity:.78;background:rgba(41,178,68,.88);box-shadow:0 0 0 6px rgba(41,178,68,.11)}
.signature-sq.capture-target::after{width:66%;height:66%;opacity:.86;background:transparent;border:4px solid rgba(41,178,68,.82)}
.signature-sq.last-from::before{width:62%;height:62%;opacity:.65;background:rgba(213,139,69,.22);border:3px solid rgba(213,139,69,.48)}
.signature-sq.last-to::before{width:72%;height:72%;opacity:.92;background:rgba(213,139,69,.10);border:4px solid rgba(213,139,69,.82)}
.signature-piece{position:absolute;left:50%;top:50%;width:91%;height:91%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 3px rgba(30,10,4,.17));z-index:2;pointer-events:none;user-select:none;-webkit-user-drag:none}
.signature-piece.piece-n.color-w{transform:translate(-49.6%,-52.1%)}.signature-piece.piece-n.color-b{transform:translate(-50.1%,-53%)}
.signature-piece.piece-b.color-w,.signature-piece.piece-b.color-b{transform:translate(-50%,-50%)!important}
.signature-piece.knight-down.color-w,.signature-piece.knight-down.color-b{transform:translate(-50%,-52%) rotate(180deg)!important}
.signature-intro-panel{position:absolute;left:1290px;top:342px;width:430px;min-height:330px;box-sizing:border-box;padding:38px 38px 34px;border-radius:30px;border:1px solid rgba(112,58,28,.16);background:rgba(76,42,24,.91);box-shadow:0 20px 48px rgba(67,31,12,.18);color:#efb665}
.signature-source-label{font:900 11px/1.2 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.7px;color:rgba(239,182,101,.56);margin-bottom:18px;text-transform:uppercase}
.signature-prompt{font:900 34px/.96 "Helvetica Neue",Arial,sans-serif;letter-spacing:-1.5px;margin-bottom:18px}
.signature-prompt-copy{font:700 16px/1.5 "Helvetica Neue",Arial,sans-serif;color:rgba(255,218,166,.80)}
.signature-engine-state{display:flex;align-items:center;gap:10px;margin-top:28px;font:900 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2px;color:rgba(239,182,101,.68)}
.signature-engine-state span{width:10px;height:10px;border-radius:50%;background:#2ebf5a;box-shadow:0 0 0 5px rgba(46,191,90,.10)}
.signature-engine-state.busy span{background:#d59645;animation:signaturePulse 1s ease-in-out infinite}.signature-engine-state.offline span{background:#8c5a3b}
@keyframes signaturePulse{50%{opacity:.35;transform:scale(.82)}}

/* Three futures. */
.signature-parallel-split{position:absolute;left:52px;right:94px;top:180px;height:820px}
.signature-branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;height:620px}
.signature-branch{position:relative;border-radius:28px;padding:18px 18px 20px;box-sizing:border-box;background:rgba(78,43,25,.91);border:1px solid rgba(239,182,101,.15);box-shadow:0 18px 42px rgba(62,27,10,.16);color:#efb665;overflow:hidden;transform:translateZ(0)}
.signature-branch::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:rgba(239,182,101,.24)}
.signature-branch-you::before{background:#2bbf59}.signature-branch-best::before{background:#efb665}.signature-branch-human::before{background:#b97d4d}
.signature-branch header{height:78px;display:flex;align-items:center;gap:16px;padding:0 4px}
.signature-branch-no{width:48px;height:48px;border:1px solid rgba(239,182,101,.20);border-radius:50%;display:flex;align-items:center;justify-content:center;font:900 13px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1px;color:rgba(239,182,101,.56)}
.signature-branch header div{min-width:0;display:flex;flex-direction:column;gap:5px}.signature-branch header strong{font:900 19px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.signature-branch header small{font:900 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.8px;color:rgba(239,182,101,.54)}
.signature-mini-board{width:442px;height:442px;margin:0 auto;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);background:url('assets/grid.png') center/100% 100% no-repeat;overflow:hidden;box-shadow:0 12px 28px rgba(24,9,3,.22);contain:layout paint style}
.signature-mini-board .signature-piece{width:92%;height:92%;filter:drop-shadow(0 2px 2px rgba(18,7,2,.16))}
.signature-branch-move{height:46px;display:flex;align-items:center;justify-content:center;font:900 15px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.3px;color:rgba(255,220,173,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px}
.signature-parallel-controls{height:84px;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px}
.signature-flat-btn{height:56px;min-width:66px;padding:0 20px;border:1px solid rgba(98,49,25,.20);border-radius:18px;background:rgba(80,43,24,.92);color:#efb665;font:900 14px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.4px;box-shadow:0 8px 18px rgba(68,30,11,.13),inset 0 1px 0 rgba(255,221,172,.06);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .15s ease,filter .15s ease,border-color .15s ease}
.signature-flat-btn-wide{min-width:180px;max-width:330px}.signature-accent-btn{border-color:rgba(45,183,82,.34);box-shadow:0 8px 18px rgba(68,30,11,.13),inset 0 0 0 1px rgba(45,183,82,.10)}
.signature-flat-btn:disabled{opacity:.38;cursor:default}.signature-flat-btn:not(:disabled):hover{filter:brightness(1.07);transform:translateY(-1px)}.signature-flat-btn:active{transform:translateY(1px)}
.signature-parallel-insight{height:55px;display:flex;align-items:center;justify-content:center;text-align:center;font:900 13px/1.3 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.2px;color:rgba(91,48,25,.68);text-transform:uppercase}

/* THE MOMENT. */
.signature-moment-board{left:86px;top:200px;width:760px;height:760px}
.signature-moment-panel{position:absolute;left:900px;top:200px;width:770px;height:760px;box-sizing:border-box;padding:52px 58px;border-radius:34px;background:rgba(75,41,23,.93);border:1px solid rgba(239,182,101,.16);box-shadow:0 22px 54px rgba(61,27,10,.18);color:#efb665}
.signature-moment-status{font:900 11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.8px;color:rgba(239,182,101,.56);margin-bottom:18px}
.signature-moment-move{font:900 58px/.92 "Helvetica Neue",Arial,sans-serif;letter-spacing:-3.2px;color:#f2bb70;min-height:112px;display:flex;align-items:flex-start;word-break:break-word}
.signature-eval-shift{height:118px;display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;margin:8px 0 26px;border-top:1px solid rgba(239,182,101,.12);border-bottom:1px solid rgba(239,182,101,.12)}
.signature-eval-shift>div:not(.signature-eval-arrow){display:flex;flex-direction:column;gap:8px}.signature-eval-shift span{font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.2px;color:rgba(239,182,101,.48)}.signature-eval-shift strong{font:900 26px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.8px;color:#ffd49a}.signature-eval-arrow{text-align:center;font-size:30px;color:rgba(239,182,101,.42)}
.signature-moment-explanation{min-height:150px;font:700 19px/1.48 "Helvetica Neue",Arial,sans-serif;color:rgba(255,220,174,.86)}
.signature-moment-actions,.signature-dna-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.signature-moment-actions .signature-flat-btn{flex:1 1 190px}

/* GAME DNA. */
.signature-dna-visual{position:absolute;left:105px;top:215px;width:700px;height:700px;display:flex;align-items:center;justify-content:center}
.game-dna-svg{width:690px;height:690px;overflow:visible;filter:drop-shadow(0 20px 30px rgba(67,29,10,.13))}
.game-dna-svg .dna-ring{fill:none;stroke:rgba(91,48,25,.13);stroke-width:1}.game-dna-svg .dna-axis{stroke:rgba(91,48,25,.10);stroke-width:1}.game-dna-svg .dna-path{fill:none;stroke:#7a3b20;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.78;vector-effect:non-scaling-stroke;animation:dnaDraw 1.3s cubic-bezier(.2,.76,.2,1) both}.game-dna-svg .dna-path.dna-path-2{stroke:#c47c3e;stroke-width:2;opacity:.58;animation-delay:.12s}.game-dna-svg .dna-node{fill:#7a3b20;opacity:.45}
@keyframes dnaDraw{from{stroke-dasharray:1 1600;stroke-dashoffset:900}to{stroke-dasharray:1600 0;stroke-dashoffset:0}}
.signature-dna-core{position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(79,43,24,.94);border:1px solid rgba(239,182,101,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#efb665;box-shadow:0 16px 36px rgba(52,22,8,.20)}
.signature-dna-core span{font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.5px;color:rgba(239,182,101,.54)}.signature-dna-core strong{font:900 24px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.4px;margin:12px 0 8px}.signature-dna-core small{font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.8px;color:rgba(239,182,101,.54)}
.signature-dna-panel{position:absolute;left:885px;top:200px;width:790px;height:760px;box-sizing:border-box;padding:48px 56px;border-radius:34px;background:rgba(75,41,23,.93);border:1px solid rgba(239,182,101,.16);box-shadow:0 22px 54px rgba(61,27,10,.18);color:#efb665}
.signature-dna-statement{font:900 34px/1.06 "Helvetica Neue",Arial,sans-serif;letter-spacing:-1.6px;color:#f2bb70;margin-bottom:34px;min-height:78px}
.signature-dna-metrics{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px}
.signature-dna-metric{height:108px;border-radius:20px;border:1px solid rgba(239,182,101,.11);background:rgba(29,17,11,.18);padding:18px 20px;box-sizing:border-box;overflow:hidden}.signature-dna-metric-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}.signature-dna-metric span{font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.7px;color:rgba(239,182,101,.54);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.signature-dna-metric strong{font:900 23px/1 "Helvetica Neue",Arial,sans-serif;color:#ffd296}.signature-dna-meter{height:5px;border-radius:8px;margin-top:17px;background:rgba(239,182,101,.10);overflow:hidden}.signature-dna-meter i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#7b3c20,#e8aa5c);transform-origin:left center;animation:dnaMeterIn .7s cubic-bezier(.2,.8,.2,1) both}@keyframes dnaMeterIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.signature-dna-actions .signature-flat-btn{flex:1 1 180px}
.signature-loading-overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(228,172,99,.16);backdrop-filter:blur(2px);pointer-events:none}.signature-loading-card{min-width:460px;padding:28px 36px;border-radius:24px;background:rgba(72,39,22,.96);color:#efb665;text-align:center;font:900 14px/1.4 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.8px;box-shadow:0 18px 44px rgba(55,24,9,.22)}
.signature-loading-card::before{content:"";display:block;width:18px;height:18px;margin:0 auto 14px;border-radius:50%;border:3px solid rgba(239,182,101,.18);border-top-color:#efb665;animation:signatureSpin .7s linear infinite}@keyframes signatureSpin{to{transform:rotate(360deg)}}

/* Result screen becomes the gateway to CESS Signature without disturbing the
   existing rematch/review/home flow. */
.end-screen{height:968px!important}
.result-signature{position:absolute;left:-78px;top:626px;width:840px;height:112px;display:flex;align-items:flex-end;justify-content:center;gap:10px;z-index:12}
.result-signature::before{content:"CESS SIGNATURE";position:absolute;top:0;left:0;right:0;text-align:center;font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.5px;color:rgba(239,182,101,.58)}
html[data-lang="tr"] .result-signature::before{content:"CESS İMZASI"}
html[data-lang="es"] .result-signature::before{content:"FIRMA CESS"}
html[data-lang="ja"] .result-signature::before{content:"CESS シグネチャー"}
html[data-lang="it"] .result-signature::before{content:"FIRMA CESS"}
html[data-lang="fr"] .result-signature::before{content:"SIGNATURE CESS"}
.result-signature button{width:242px;height:68px;border:1px solid rgba(239,182,101,.15);border-radius:18px;background:rgba(76,41,23,.94);color:#efb665;font:900 17px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.25px;box-shadow:0 8px 20px rgba(38,15,5,.18),inset 0 1px 0 rgba(255,222,177,.05);white-space:nowrap;overflow:hidden;text-overflow:clip;cursor:pointer}
.result-signature button:nth-child(2){border-color:rgba(48,190,87,.30);box-shadow:0 8px 20px rgba(38,15,5,.18),inset 0 0 0 1px rgba(48,190,87,.10)}
.result-actions{top:766px!important;height:142px!important;gap:14px!important}.result-actions button{width:246px!important;height:112px!important;background-size:246px 112px!important;font-size:25px!important;letter-spacing:-.7px!important}
html[data-lang="ja"] .result-signature button{font-size:15px!important}

@media (prefers-reduced-motion:reduce){.game-dna-svg .dna-path,.signature-dna-meter i,.signature-engine-state.busy span{animation-duration:.01s!important}}

/* v3.4.1 — instant local futures, background Stockfish refinement, no blocking overlay. */
.signature-parallel-split.signature-reveal{animation:signatureSplitIn .58s cubic-bezier(.16,.82,.16,1) both}
.signature-parallel-split.signature-reveal .signature-branch{animation:signatureFutureCardIn .62s cubic-bezier(.16,.82,.16,1) both}
.signature-parallel-split.signature-reveal .signature-branch:nth-child(1){animation-delay:.03s}
.signature-parallel-split.signature-reveal .signature-branch:nth-child(2){animation-delay:.11s}
.signature-parallel-split.signature-reveal .signature-branch:nth-child(3){animation-delay:.19s}
@keyframes signatureSplitIn{from{opacity:0;transform:scale(.965) translateY(8px)}to{opacity:1;transform:none}}
@keyframes signatureFutureCardIn{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.signature-parallel-split.signature-reveal,.signature-parallel-split.signature-reveal .signature-branch{animation-duration:.01s!important;animation-delay:0s!important}}

/* ======================================================================
   CESS! v3.4.2 — PARALLEL 64 DECISION LAB
   Three persistent boards. The player chooses all three candidate moves;
   CESS compares the best reply to each choice without decorative overlap.
   ====================================================================== */
.stage.phase-signature{overflow:hidden!important}
.signature-view{overflow:hidden!important}
.signature-brand-column{display:none!important;visibility:hidden!important;pointer-events:none!important}
.signature-heading{left:300px!important;top:20px!important;width:1320px!important}
.signature-title{font-size:54px!important;letter-spacing:-3px!important}
.signature-tagline{margin-top:8px!important;font-size:16px!important;letter-spacing:3.4px!important}
.signature-kicker{font-size:12px!important;margin-bottom:7px!important}
.signature-back{left:52px!important;top:34px!important;width:78px!important;height:74px!important}
.signature-parallel-intro{display:none!important}
.signature-parallel-split{left:54px!important;right:54px!important;top:136px!important;height:858px!important}
.signature-comparison-guide{height:72px;box-sizing:border-box;padding:0 18px 0 20px;margin-bottom:10px;border:1px solid rgba(104,53,27,.13);border-radius:20px;background:rgba(255,222,172,.10);display:flex;align-items:center;justify-content:space-between;gap:28px;color:#6b351d}
.signature-comparison-copy{min-width:0;display:flex;align-items:baseline;gap:20px;overflow:hidden}
.signature-comparison-copy strong{flex:0 0 auto;font:900 18px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.45px;color:#68341c;white-space:nowrap}
.signature-comparison-copy span{min-width:0;font:750 13px/1.35 "Helvetica Neue",Arial,sans-serif;letter-spacing:.05px;color:rgba(91,48,25,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signature-comparison-guide .signature-engine-state{margin:0!important;flex:0 0 auto;color:rgba(91,48,25,.66)!important}
.signature-comparison-guide .signature-engine-state span{width:9px;height:9px}
.signature-branch-grid{height:638px!important;gap:24px!important}
.signature-branch{height:638px!important;padding:14px 14px 12px!important;border-radius:25px!important;transition:opacity .18s ease,transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease}
.signature-branch header{height:60px!important;padding:0 3px!important;gap:13px!important}
.signature-branch-no{width:42px!important;height:42px!important;font-size:12px!important}
.signature-branch header strong{font-size:17px!important;letter-spacing:-.35px!important}
.signature-branch header small{font-size:10px!important;letter-spacing:1.4px!important}
.signature-mini-board{width:410px!important;height:410px!important;margin:0 auto!important;transition:opacity .18s ease,filter .18s ease,box-shadow .18s ease,outline-color .18s ease;outline:4px solid transparent;outline-offset:5px}
.signature-branch.is-active{transform:none;border-color:rgba(42,184,82,.36)!important;box-shadow:0 20px 46px rgba(62,27,10,.19),inset 0 0 0 1px rgba(42,184,82,.08)!important}
.signature-branch.is-active::before{height:5px!important;background:#2bbf59!important}
.signature-branch.is-active .signature-mini-board{outline-color:rgba(42,184,82,.48);box-shadow:0 13px 30px rgba(24,9,3,.25),0 0 0 8px rgba(42,184,82,.06);cursor:pointer}
.signature-branch.is-waiting{opacity:.64;filter:saturate(.84)}
.signature-branch.is-waiting .signature-mini-board{opacity:.82}
.signature-branch.is-filled:not(.is-ready){opacity:.9}
.signature-branch.is-locked::after{content:"";position:absolute;right:17px;top:17px;width:8px;height:8px;border-radius:50%;background:#efb665;box-shadow:0 0 0 5px rgba(239,182,101,.08)}
.signature-response-pair{height:92px;margin:8px 5px 0;border-top:1px solid rgba(239,182,101,.11);border-bottom:1px solid rgba(239,182,101,.11);display:grid;grid-template-rows:1fr 1fr}
.signature-response-pair>div{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 5px}
.signature-response-pair span{min-width:0;font:900 9px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.55px;color:rgba(239,182,101,.48);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signature-response-pair strong{max-width:48%;font:900 16px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.25px;color:#ffd398;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.signature-branch-move{height:38px!important;padding:0 8px!important;font-size:10px!important;letter-spacing:1.25px!important;text-transform:uppercase;color:rgba(255,220,173,.66)!important}
.signature-branch.is-active .signature-branch-move{color:#7ee198!important}
.signature-parallel-controls{height:62px!important;margin-top:9px!important;gap:10px!important}
.signature-flat-btn{height:50px!important;border-radius:16px!important;font-size:13px!important}
.signature-flat-btn-wide{min-width:205px!important;max-width:320px!important}
.signature-parallel-insight{height:42px!important;font-size:11px!important;letter-spacing:1.85px!important;color:rgba(91,48,25,.72)!important}
.signature-parallel-split.signature-reveal{animation:none!important}
.signature-parallel-split.signature-reveal .signature-branch{animation:none!important}
html[data-lang="ja"] .signature-comparison-copy strong{font-size:16px!important;letter-spacing:0!important}
html[data-lang="ja"] .signature-comparison-copy span{font-size:12px!important}
html[data-lang="ja"] .signature-branch header strong{font-size:15px!important;letter-spacing:0!important}
html[data-lang="ja"] .signature-response-pair span{font-size:8.5px!important;letter-spacing:.6px!important}
@media (max-width:1500px){
 .signature-comparison-copy span{display:none}
}
.signature-comparison-copy em{flex:0 0 auto;margin:0;padding:5px 8px 4px;border-radius:8px;background:rgba(94,49,25,.08);font:900 8px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.35px;color:rgba(91,48,25,.52);font-style:normal;white-space:nowrap;text-transform:uppercase}


/* CESS! v3.4.3 — PARALLEL 64 · THREE LIVE GAMES */
.signature-parallel-controls #signaturePrev,
.signature-parallel-controls #signaturePlay,
.signature-parallel-controls #signatureNext{display:none!important}
.signature-parallel-controls{justify-content:center!important;height:58px!important;margin-top:10px!important}
#signatureRestart{min-width:290px!important}
.signature-branch.is-thinking{border-color:rgba(239,182,101,.34)!important;box-shadow:0 20px 46px rgba(62,27,10,.19),inset 0 0 0 1px rgba(239,182,101,.07)!important}
.signature-branch.is-thinking::before{height:5px!important;background:#efb665!important;animation:signatureThinkingBar 1.15s ease-in-out infinite alternate}
.signature-branch.is-thinking .signature-mini-board{opacity:.94;filter:saturate(.88);cursor:wait}
.signature-branch.is-finished{border-color:rgba(239,182,101,.28)!important;filter:saturate(.72)}
.signature-branch.is-finished::before{background:rgba(239,182,101,.48)!important}
.signature-branch.is-active .signature-branch-move{color:#7ee198!important}
.signature-branch.is-thinking .signature-branch-move{color:#ffd398!important}
.signature-branch.is-finished .signature-branch-move{color:#efb665!important}
.signature-mini-board .signature-sq{cursor:default}
.signature-branch.is-active .signature-mini-board .signature-sq{cursor:pointer}
@keyframes signatureThinkingBar{from{opacity:.38}to{opacity:1}}


/* ======================================================================
   CESS! v3.5.0 — POLISH PASS
   One motion language, one typography safety system, no overlap, no flicker.
   ====================================================================== */
:root{
  --cess-fast:150ms;
  --cess-mid:260ms;
  --cess-slow:380ms;
  --cess-ease:cubic-bezier(.22,.72,.18,1);
  --cess-ease-out:cubic-bezier(.2,.78,.18,1);
}
button,a,[role="button"]{transition:filter var(--cess-fast) ease,opacity var(--cess-fast) ease,transform var(--cess-fast) var(--cess-ease),box-shadow var(--cess-fast) ease,border-color var(--cess-fast) ease}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:3px solid rgba(39,151,61,.72);outline-offset:4px}
button[disabled],button.disabled{cursor:default;opacity:.42;filter:saturate(.72);pointer-events:none}
.home-button,.setup-start,.academy-wood-btn,.wood-ui-btn,.online-wood-button,.online-mini-wood,.time-choice{transform-origin:center}
.home-button:hover,.setup-start:hover,.academy-wood-btn:hover,.wood-ui-btn:hover,.online-wood-button:hover,.online-mini-wood:hover{filter:brightness(1.025)}
.home-button:active,.setup-start:active,.academy-wood-btn:active,.wood-ui-btn:active,.online-wood-button:active,.online-mini-wood:active{transform:translateY(1px);filter:brightness(.965)}

/* Unified cross-view motion: opacity + tiny translation only. */
.view.stable-in{animation:cessPolishIn var(--cess-mid) var(--cess-ease) both!important}
.view.stable-out{animation:cessPolishOut 220ms cubic-bezier(.4,0,.25,1) both!important}
@keyframes cessPolishIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes cessPolishOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-3px)}}
.modal.show{animation:modalFade var(--cess-mid) ease both!important}
.modal-card,.draw-offer-screen,.cess-confirm-screen{animation:cessPolishCardIn var(--cess-mid) var(--cess-ease-out) both!important}
@keyframes cessPolishCardIn{from{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(.988)}to{opacity:1;transform:translate(-50%,-50%)}}
.modal-facing-top.cess-confirm-screen{animation:none!important}
.screen-fade{transition:opacity 260ms var(--cess-ease),visibility 0s linear 260ms!important}
.screen-fade.show{transition:opacity 260ms var(--cess-ease),visibility 0s!important}

/* Loader appears only after a short threshold; fast operations never flash a spinner. */
.loading-knight-spinner{opacity:0!important;visibility:hidden!important}
.phase-loading .loading-knight-spinner{visibility:visible!important;animation:cessDelayedLoader .01s linear .22s forwards}
@keyframes cessDelayedLoader{to{opacity:1}}
.top100-loading:not(.error){opacity:0;animation:cessDelayedLoader .01s linear .22s forwards}
.top100-loading.error{opacity:1}

/* Board state language: selected = green ring, legal = small dot, last move = warm wood. */
.sq::before{transition:opacity var(--cess-fast) ease,transform var(--cess-fast) var(--cess-ease),border-color var(--cess-fast) ease!important}
.sq.legal::before{width:28px;height:28px;background:rgba(35,145,55,.72)!important;border:0!important;opacity:.78!important;transform:translate(-50%,-50%) scale(1)!important}
.sq.capture::before{width:92px;height:92px;background:transparent!important;border:6px solid rgba(35,145,55,.72)!important;opacity:.82!important}
.sq.last-from::before{width:104px;height:104px;background:rgba(224,164,87,.17)!important;border:0!important;opacity:1!important}
.sq.last-to::before{width:104px;height:104px;background:rgba(224,164,87,.12)!important;border:5px solid rgba(159,95,47,.34)!important;opacity:1!important}
.sq.selected::before{width:104px;height:104px;background:rgba(38,158,62,.08)!important;border:6px solid rgba(38,158,62,.78)!important;opacity:1!important}
.sq.check{box-shadow:inset 0 0 0 5px rgba(137,48,33,.30)!important;background:radial-gradient(circle at center,rgba(151,56,39,.10),transparent 68%)}

/* Empty captured-piece rails disappear instead of reserving visual noise. */
.captured{transition:opacity var(--cess-fast) ease}
.captured.is-empty{opacity:0;pointer-events:none}

/* Modal standard. */
.modal{background:rgba(31,15,9,.22)!important}
.cess-confirm-screen{position:absolute;left:960px;top:540px;width:650px;height:430px;transform:translate(-50%,-50%);transform-origin:center}
.cess-confirm-screen.modal-facing-top{transform:translate(-50%,-50%) rotate(180deg)}
.cess-confirm-card{width:100%;height:100%;box-sizing:border-box;padding:76px 82px 58px;background:url('assets/button7.png?v=350') center/100% 100% no-repeat;color:var(--gold);text-align:center;filter:drop-shadow(0 18px 18px rgba(0,0,0,.22));display:flex;flex-direction:column;justify-content:center;align-items:center}
.cess-confirm-card h2{width:100%;min-height:62px;margin:0 0 16px;font-size:42px;line-height:1;font-weight:900;letter-spacing:-1.4px;display:flex;align-items:center;justify-content:center}
.cess-confirm-card p{width:100%;min-height:54px;margin:0 0 28px;font-size:21px;line-height:1.3;font-weight:800;display:flex;align-items:center;justify-content:center}
.cess-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.cess-confirm-actions button{min-width:0;height:76px;border-radius:18px;background:rgba(47,26,16,.43);box-shadow:inset 0 0 0 2px rgba(241,181,104,.17);color:var(--gold);font-size:21px;font-weight:900;padding:0 14px;white-space:nowrap;overflow:hidden}
.cess-confirm-actions button:first-child{box-shadow:inset 0 0 0 2px rgba(145,75,52,.32)}

/* Online presence is loud only when attention is required. */
.online-net-status{transition:opacity 260ms ease,transform 260ms var(--cess-ease),background 260ms ease!important}
.online-net-status.synced{background:rgba(18,15,12,.46)}
.online-net-status.quiet{opacity:.22;transform:scale(.96)}
.online-net-status.reconnecting,.online-net-status.opponent-away,.online-net-status.offline{opacity:1!important;transform:none!important}
.online-chat-head{position:relative;justify-content:flex-start!important;gap:8px}
.online-chat-head #onlineChatToggle{margin-left:auto}
.online-chat-unread{min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:rgba(37,151,59,.88);color:#f5c986;font:900 10px/21px "Helvetica Neue",Arial,sans-serif;text-align:center;box-shadow:0 0 0 2px rgba(241,181,104,.08)}
.online-chat.has-unread.collapsed{box-shadow:inset 0 0 0 2px rgba(39,151,61,.30),0 13px 26px rgba(0,0,0,.19)}

/* Parallel 64: each live universe keeps its identity and can be reset alone. */
.signature-branch header{position:relative;padding-right:34px}
.signature-branch-reset{position:absolute;right:0;top:0;width:30px;height:30px;border-radius:10px;border:1px solid rgba(239,182,101,.14);background:rgba(33,19,12,.20);color:rgba(239,182,101,.72);font:900 18px/28px "Helvetica Neue",Arial,sans-serif;text-align:center;z-index:4}
.signature-branch-reset:hover,.signature-branch-reset:focus-visible{color:#ffd296;border-color:rgba(39,151,61,.36);background:rgba(39,151,61,.08)}
.signature-branch.is-active{border-color:rgba(39,151,61,.42)!important;box-shadow:0 18px 42px rgba(62,27,10,.16),inset 0 0 0 1px rgba(39,151,61,.10)!important}
.signature-branch.is-thinking{opacity:.94}
.signature-branch header strong{max-width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signature-parallel-controls #signaturePrev,.signature-parallel-controls #signaturePlay,.signature-parallel-controls #signatureNext{display:none!important}
.signature-parallel-controls{justify-content:center!important}

/* Top 100 / Review navigation share the same quiet control language. */
.top100-board-controls .academy-wood-btn,.review-nav .wood-ui-btn{filter:drop-shadow(0 7px 8px rgba(0,0,0,.12));}
.top100-move-explanation{transition:opacity var(--cess-fast) ease}

/* Runtime overlap safeguard. If responsive scaling ever intersects a board, branding yields. */
.study-brand-column.auto-safe-hidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Background tabs consume no decorative animation budget. */
html.cess-hidden .fall-piece{animation-play-state:paused!important}
html.cess-hidden .fx-layer{opacity:.01!important}

/* Small-screen landscape: Parallel remains three games, presented as a swipe strip. */
@media (max-width:1100px) and (orientation:landscape){
  .signature-parallel-split{overflow:hidden}
  .signature-branch-grid{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:22px!important;padding:0 8px 12px;overscroll-behavior-x:contain;scrollbar-width:none}
  .signature-branch-grid::-webkit-scrollbar{display:none}
  .signature-branch{flex:0 0 31.6%;scroll-snap-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .fall-piece{display:none!important}
}

/* v3.5.0 POLISH corrective motion/loader layer */
.modal-card:not(.modal-facing-top){animation:cessPolishSurfaceIn var(--cess-mid) var(--cess-ease-out) both!important}
.modal-card.modal-facing-top{animation:cessPolishSurfaceTopIn var(--cess-mid) var(--cess-ease-out) both!important}
.draw-offer-screen:not(.modal-facing-top),.cess-confirm-screen:not(.modal-facing-top){animation:cessPolishCenteredIn var(--cess-mid) var(--cess-ease-out) both!important}
.draw-offer-screen.modal-facing-top,.cess-confirm-screen.modal-facing-top{animation:cessPolishCenteredTopIn var(--cess-mid) var(--cess-ease-out) both!important}
@keyframes cessPolishSurfaceIn{from{opacity:0;transform:translateY(8px) scale(.988)}to{opacity:1;transform:none}}
@keyframes cessPolishSurfaceTopIn{from{opacity:0;transform:translateY(-8px) scale(.988) rotate(180deg)}to{opacity:1;transform:rotate(180deg)}}
@keyframes cessPolishCenteredIn{from{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(.988)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes cessPolishCenteredTopIn{from{opacity:0;transform:translate(-50%,-50%) translateY(-8px) scale(.988) rotate(180deg)}to{opacity:1;transform:translate(-50%,-50%) rotate(180deg)}}
.loading-knight-spinner{opacity:0!important;visibility:hidden!important;animation:none!important}
.phase-loading.polish-loader-ready .loading-knight-spinner{opacity:1!important;visibility:visible!important}
/* Review and history share the same four-step timeline grammar. */
.review-nav{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}
.review-nav .wood-ui-btn{width:58px!important;height:58px!important;min-width:0!important}
.review-nav .wood-ui-btn span{font-size:31px!important;margin-top:-3px!important}
.review-nav .wood-ui-btn.disabled{opacity:.24!important;filter:saturate(.5)!important}
@media (max-width:1100px) and (orientation:landscape){.signature-branch{flex:0 0 88%!important;scroll-snap-align:center!important}.signature-branch-grid{scroll-padding-inline:6%!important}}


/* ======================================================================
   CESS! v3.5.3 — MOVE INSIGHT + BOARD LANGUAGE
   Last move = pastel CESS green, active selection = signature green,
   checked king = red. Move-grade badges never block piece selection.
   ====================================================================== */
:root{--cess-last-soft:#83c993;--cess-last-soft-deep:#5cae72;--cess-check:#b94236}
.sq.last-from::before{width:102px!important;height:102px!important;background:rgba(131,201,147,.20)!important;border:0!important;opacity:1!important}
.sq.last-to::before{width:102px!important;height:102px!important;background:rgba(131,201,147,.20)!important;border:5px solid rgba(92,174,114,.48)!important;opacity:1!important}
.sq.selected::before{width:104px!important;height:104px!important;background:rgba(38,179,74,.09)!important;border:7px solid rgba(38,179,74,.88)!important;box-shadow:0 0 0 4px rgba(38,179,74,.12)!important;opacity:1!important}
.sq.last-to.selected::before{background:rgba(131,201,147,.14)!important;border-color:rgba(38,179,74,.96)!important;box-shadow:0 0 0 4px rgba(38,179,74,.16)!important}
/* The older POLISH layer renders previous-move memory on ::after. Recolor that
   physical ring too, so no amber legacy ring survives under the new palette. */
.sq.last-from::after{width:92px!important;height:92px!important;opacity:.78!important;background:rgba(131,201,147,.15)!important;border:4px solid rgba(92,174,114,.34)!important;box-shadow:none!important;transform:translate(-50%,-50%) scale(1)!important}
.sq.last-to::after{width:106px!important;height:106px!important;opacity:.96!important;background:rgba(131,201,147,.10)!important;border:6px solid rgba(92,174,114,.70)!important;box-shadow:0 0 0 2px rgba(38,112,58,.08)!important;transform:translate(-50%,-50%) scale(1)!important}
.sq.last-from.selected::after,.sq.last-to.selected::after{opacity:.62!important}
.sq.check{box-shadow:inset 0 0 0 6px rgba(185,66,54,.58)!important;background:radial-gradient(circle at center,rgba(185,66,54,.20),rgba(185,66,54,.08) 58%,transparent 72%)!important}
.sq.check::after{content:"";position:absolute;inset:9px;border-radius:24px;background:rgba(185,66,54,.09);box-shadow:inset 0 0 0 5px rgba(185,66,54,.52),0 0 24px rgba(185,66,54,.20);opacity:1;pointer-events:none;z-index:1}

/* The same language follows the study/analysis boards. */
.top100-sq.last-from::before,.academy-sq.academy-last-from::before,.signature-sq.last-from::before{background:rgba(131,201,147,.20)!important;border-color:rgba(92,174,114,.35)!important}
.top100-sq.last-to::before,.academy-sq.academy-last-to::before,.signature-sq.last-to::before{background:rgba(131,201,147,.17)!important;border-color:rgba(92,174,114,.62)!important}
.top100-sq.selected::before,.signature-sq.selected::before{background:rgba(38,179,74,.10)!important;border-color:rgba(38,179,74,.90)!important}
.top100-sq.check{box-shadow:inset 0 0 0 5px rgba(185,66,54,.60);background:radial-gradient(circle at center,rgba(185,66,54,.18),transparent 72%)}

.move-quality-badge{position:absolute;right:7px;top:7px;z-index:12;width:38px;height:38px;border-radius:13px;display:flex;align-items:center;justify-content:center;padding:0;background:linear-gradient(180deg,rgba(68,37,22,.96),rgba(43,23,14,.96));border:2px solid rgba(241,181,104,.44);box-shadow:0 5px 10px rgba(46,20,9,.24),inset 0 1px 0 rgba(255,223,171,.12);color:#f4c57f;font:900 21px/1 "Arial Black","Helvetica Neue",Arial,sans-serif;letter-spacing:-1px;text-shadow:0 1px 0 rgba(0,0,0,.34);cursor:pointer;transform:none!important;scale:1!important;pointer-events:auto}
.move-quality-badge:hover{filter:brightness(1.08);transform:translateY(-1px)!important}
.move-quality-badge:active{transform:translateY(0) scale(.96)!important}
.move-quality-badge.grade-brilliant{border-color:rgba(255,207,113,.88);color:#ffd37f;box-shadow:0 5px 11px rgba(46,20,9,.25),0 0 0 3px rgba(241,181,104,.12)}
.move-quality-badge.grade-best{border-color:rgba(55,181,83,.88);color:#a7e7b5}
.move-quality-badge.grade-good{border-color:rgba(131,201,147,.86);color:#c7efd0}
.move-quality-badge.grade-inaccuracy{border-color:rgba(224,166,88,.78);color:#efbd79}
.move-quality-badge.grade-mistake{border-color:rgba(210,120,65,.82);color:#ef9e6f}
.move-quality-badge.grade-blunder{border-color:rgba(185,66,54,.90);color:#f39b90}
.move-quality-badge.is-pending{pointer-events:none;opacity:.56;font-size:18px;letter-spacing:1px}
.top100-sq>.move-quality-badge{right:4px;top:4px;width:29px;height:29px;border-radius:9px;border-width:1.5px;font-size:15px;letter-spacing:-.6px;box-shadow:0 3px 7px rgba(46,20,9,.22)}

.move-quality-card{position:absolute;left:960px;top:540px;width:720px;min-height:500px;transform:translate(-50%,-50%);z-index:3;border-radius:32px;padding:46px 58px 42px;background:linear-gradient(155deg,rgba(82,46,27,.98),rgba(45,25,16,.985));border:2px solid rgba(241,181,104,.28);box-shadow:0 28px 68px rgba(32,14,7,.42),inset 0 0 0 1px rgba(255,220,166,.06);color:var(--gold);text-align:left;animation:cessQualityIn .24s var(--cess-ease-out) both}
@keyframes cessQualityIn{from{opacity:0;transform:translate(-50%,-50%) translateY(10px) scale(.985)}to{opacity:1;transform:translate(-50%,-50%)}}
.move-quality-close{position:absolute;right:22px;top:20px;width:46px;height:46px;border-radius:16px;background:rgba(31,17,11,.36);box-shadow:inset 0 0 0 1px rgba(241,181,104,.18);color:rgba(245,197,127,.92);font:400 34px/43px "Helvetica Neue",Arial,sans-serif;text-align:center;z-index:4}
.move-quality-close:hover{background:rgba(31,17,11,.52)}
.move-quality-kicker{font:900 12px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:3.4px;color:rgba(241,181,104,.54);margin-bottom:24px}
.move-quality-head{display:flex;align-items:center;gap:22px;margin-bottom:24px}
.move-quality-symbol{width:88px;height:88px;border-radius:25px;display:flex;align-items:center;justify-content:center;background:rgba(31,17,11,.34);box-shadow:inset 0 0 0 2px rgba(241,181,104,.18);font:900 46px/1 "Arial Black","Helvetica Neue",Arial,sans-serif;color:#ffd083;letter-spacing:-3px}
.move-quality-card.grade-best .move-quality-symbol,.move-quality-card.grade-good .move-quality-symbol{box-shadow:inset 0 0 0 2px rgba(55,181,83,.42);color:#bce9c6}
.move-quality-card.grade-blunder .move-quality-symbol{box-shadow:inset 0 0 0 2px rgba(185,66,54,.52);color:#f2a197}
.move-quality-san{font:900 18px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.1px;color:rgba(255,214,157,.68);margin-bottom:7px}
.move-quality-head h2{margin:0;font-size:46px;line-height:.98;letter-spacing:-1.8px;color:#f3bd74}
.move-quality-copy{margin:0 0 18px;font:700 19px/1.48 "Helvetica Neue",Arial,sans-serif;color:rgba(255,224,183,.88)}
.move-quality-feature{margin:0 0 18px;padding:14px 16px;border-radius:15px;background:rgba(39,151,61,.10);box-shadow:inset 0 0 0 1px rgba(61,169,82,.18);font:800 16px/1.4 "Helvetica Neue",Arial,sans-serif;color:rgba(211,239,214,.88)}
.move-quality-eval{margin-top:8px;padding-top:17px;border-top:1px solid rgba(241,181,104,.16);font:900 16px/1.35 "Helvetica Neue",Arial,sans-serif;color:rgba(241,181,104,.76)}
.move-quality-choice{margin-top:10px;font:800 16px/1.35 "Helvetica Neue",Arial,sans-serif;color:rgba(255,220,173,.92)}
@media (prefers-reduced-motion:reduce){.move-quality-card{animation:none!important}}


/* ======================================================================
   CESS! v3.5.4 — SECTION ICON SYSTEM
   Supplied PNG artwork only. No redraws. Home placement follows home-.png.
   ====================================================================== */
.home-menu-symbol{position:absolute;display:block;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Pixel-matched to the supplied home-.png reference. The symbols now live inside
   their buttons so hover, press and entrance motion affect wood + symbol together. */
.home-menu-symbol-1{left:-89px;top:-5px;width:100px;height:83px}
.home-menu-symbol-2{left:544px;top:-6px;width:98px;height:85px}
.home-menu-symbol-3{left:-88px;top:-14px;width:104px;height:94px}
.home-menu-symbol-4{left:544px;top:-9px;width:97px;height:86px}
.home-menu-symbol-5{left:-65px;top:-4px;width:57px;height:86px}
.home-menu-symbol-6{left:542px;top:-6px;width:95px;height:89px}
.home-menu-symbol-7{left:-98px;top:-10px;width:116px;height:90px}

/* Study screens: section identity lives directly above the right-side logo/footer pair. */
.study-brand-column{overflow:visible!important}
.study-section-icon{position:absolute!important;left:50%!important;top:-178px!important;width:158px!important;height:150px!important;object-fit:contain!important;transform:translateX(-50%)!important;transform-origin:center!important;z-index:13!important;pointer-events:none!important;filter:drop-shadow(0 7px 7px rgba(63,29,13,.12))}
.study-section-icon-learn{width:118px!important;height:154px!important;top:-182px!important}
.study-section-icon-top100{width:160px!important;height:150px!important}

/* PARALLEL 64: the supplied icon is part of the title, not a floating decoration. */
.signature-title-line{height:54px;display:flex;align-items:center;justify-content:center;gap:16px;line-height:1}
.signature-heading-icon{position:relative;flex:0 0 auto;height:54px;width:auto;max-width:76px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(63,29,13,.11))}
.signature-title-line .signature-title{flex:0 0 auto;line-height:.92!important}
html[data-lang="ja"] .signature-title-line{gap:13px}

/* Setup windows: section artwork is anchored to the wooden panel without stealing input. */
.setup-feature-icon{position:absolute;display:block;object-fit:contain;pointer-events:none;z-index:7;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 9px 8px rgba(43,19,9,.15))}
.computer-feature-icon{left:285px;top:690px;width:240px;height:199px}
#setupComputer .computer-title{font-size:84px!important;letter-spacing:-5px!important;top:140px!important}
.two-feature-icon{left:1550px;top:82px;width:230px;height:200px;z-index:9}

/* Keep the symbols visually stable in reduced-motion mode too. */
@media (prefers-reduced-motion:reduce){.home-menu-symbol,.study-section-icon,.signature-heading-icon,.setup-feature-icon{transition:none!important;animation:none!important}}


/* CESS! puzzle challenge selector — single-layer CESS wood UI */
.puzzle-level-backdrop{position:absolute;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(42,19,8,.18)}
.puzzle-level-window{position:relative;width:1180px;height:724px;color:var(--gold);filter:drop-shadow(0 26px 34px rgba(60,28,10,.28));animation:cessPolishSurfaceIn .28s cubic-bezier(.2,.76,.2,1) both}
.puzzle-level-window-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.puzzle-level-shell{position:absolute;left:112px;right:112px;top:66px;bottom:62px;z-index:2}
.puzzle-level-close{position:absolute;right:78px;top:58px;z-index:6;width:66px;height:66px;background:url('assets/button3.png') center/100% 100% no-repeat;color:#f3bd76;font:900 32px/62px "Helvetica Neue",Arial,sans-serif;text-align:center;text-shadow:0 2px 1px rgba(56,22,7,.42);filter:drop-shadow(0 7px 8px rgba(50,22,9,.16));transition:transform .16s ease,filter .16s ease}
.puzzle-level-header{height:174px;display:flex;align-items:center;justify-content:center;gap:34px;padding:0 88px 0 54px;text-align:left}
.puzzle-level-icon{flex:0 0 auto;width:166px;height:166px;object-fit:contain;filter:drop-shadow(0 9px 9px rgba(48,20,8,.20))}
.puzzle-level-headcopy{min-width:0;padding-top:2px}
.puzzle-level-kicker{margin:0 0 9px;color:rgba(241,181,104,.68);font:900 13px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:3px;text-transform:uppercase;text-shadow:0 1px 0 rgba(50,20,7,.32)}
.puzzle-level-window h2{margin:0;color:#f3bd76;font:900 62px/.92 "Helvetica Neue",Arial,sans-serif;letter-spacing:-3.1px;text-shadow:0 2px 1px rgba(56,22,7,.48)}
.puzzle-level-choose{margin-top:12px;color:rgba(242,190,121,.84);font:900 14px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.9px;text-transform:uppercase;text-shadow:0 1px 0 rgba(52,22,8,.28)}
.puzzle-level-grid{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:12px}
.puzzle-level-choice{position:relative;width:824px;height:126px;padding:0 38px 0 48px;display:grid;grid-template-columns:minmax(0,1fr) 182px;align-items:center;text-align:left;color:var(--gold);background:url('assets/button1.png') center/100% 100% no-repeat;filter:drop-shadow(0 8px 8px rgba(53,24,10,.12));transition:transform .16s cubic-bezier(.2,.72,.2,1),filter .16s ease}
.puzzle-level-choice:nth-child(even){background-image:url('assets/button2.png')}
.puzzle-level-choice::after{content:"";position:absolute;inset:8px 9px;border:4px solid transparent;border-radius:14px;pointer-events:none;transition:border-color .16s ease,box-shadow .16s ease}
.puzzle-level-choice.is-current::after{border-color:rgba(39,183,70,.78);box-shadow:0 0 0 1px rgba(17,91,31,.38)}
.puzzle-level-copy{min-width:0;padding-right:28px;display:flex;flex-direction:column;justify-content:center}
.puzzle-level-name{display:block;color:#f5c17e;font:900 31px/.98 "Helvetica Neue",Arial,sans-serif;letter-spacing:-1.2px;text-shadow:0 2px 1px rgba(56,22,7,.44);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.puzzle-level-choice small{display:block;margin-top:9px;color:rgba(244,194,128,.72);font:750 12px/1.25 "Helvetica Neue",Arial,sans-serif;letter-spacing:.05px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(53,22,8,.25)}
.puzzle-level-count{height:62px;border-left:1px solid rgba(244,192,123,.20);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f5c17e;text-align:center;text-shadow:0 2px 1px rgba(56,22,7,.42)}
.puzzle-level-count b{font:900 30px/.9 "Helvetica Neue",Arial,sans-serif;letter-spacing:-1px}
.puzzle-level-count span{margin-top:8px;font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:rgba(245,193,126,.72)}
@media (hover:hover) and (pointer:fine){.puzzle-level-choice:hover{transform:translateY(-3px);filter:brightness(1.055) drop-shadow(0 12px 10px rgba(53,24,10,.15))}.puzzle-level-close:hover{transform:translateY(-2px);filter:brightness(1.07)}}
.puzzle-level-choice:active{transform:translateY(1px) scale(.994);filter:brightness(.97)}
html[data-lang="ja"] .puzzle-level-window h2,html[data-lang="ja"] .puzzle-level-name,html[data-lang="ja"] .puzzle-level-choice small,html[data-lang="ja"] .puzzle-level-count{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif}

/* Top 1000 player-color identity */
.top100-players{display:flex;align-items:center;min-width:0;gap:7px;overflow:hidden}
.top100-player{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:46%}
.top100-player span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top100-player img{width:31px;height:31px;object-fit:contain;flex:0 0 31px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.16))}
.top100-player-separator{flex:0 0 auto;color:rgba(241,181,104,.52);font-size:16px}

/* More Learn Chess categories without changing the panel geometry. */
.learn-category-tabs{overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;overscroll-behavior-x:contain}
.learn-category-tabs::-webkit-scrollbar{display:none}

/* ---------- CESS! v3.5.4.7 · CONTEXT ACTION ICONS / SAFE LABEL DOCKS ---------- */
.cess-icon-button{
 position:relative!important;
 isolation:isolate;
 --cess-icon-size:42px;
 --cess-icon-left:10px;
 --cess-label-left:0px;
 --cess-label-right:0px;
}
.cess-icon-button::before{
 content:"";
 position:absolute;
 z-index:7;
 display:block;
 pointer-events:none;
 width:var(--cess-icon-size);
 height:var(--cess-icon-size);
 left:var(--cess-icon-left);
 top:50%;
 background:var(--cess-action-icon) center/contain no-repeat;
 transform:translateY(-50%) scale(1);
 transform-origin:center;
 filter:drop-shadow(0 6px 6px rgba(55,24,9,.18));
 transition:transform .15s cubic-bezier(.2,.74,.2,1),filter .15s ease;
}
/* Every icon-bearing control has a protected label lane. The icon and text can
   no longer occupy the same pixels, including translated / fitted labels. */
.cess-icon-button>.cess-icon-label{
 position:absolute!important;
 inset:0!important;
 z-index:8!important;
 width:auto!important;
 height:auto!important;
 max-width:none!important;
 margin:0!important;
 box-sizing:border-box!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 padding-left:var(--cess-label-left)!important;
 padding-right:var(--cess-label-right)!important;
 pointer-events:none!important;
 white-space:nowrap!important;
 overflow:hidden!important;
 text-overflow:clip!important;
}
@media (hover:hover) and (pointer:fine){
 .cess-icon-button:hover::before{transform:translateY(-50%) scale(1.045);filter:brightness(1.045) drop-shadow(0 8px 8px rgba(55,24,9,.22))}
}
.cess-icon-button:active::before{transform:translateY(-50%) scale(.978);filter:brightness(.975) drop-shadow(0 4px 5px rgba(55,24,9,.16))}

/* START + TIME: large identity marks live completely OUTSIDE the text area. */
.cess-icon-start{--cess-icon-size:96px;--cess-icon-left:-70px;overflow:visible!important}
.cess-icon-start>.cess-icon-label{--cess-label-left:0px;--cess-label-right:0px}
.cess-icon-time{--cess-icon-size:72px;--cess-icon-left:-59px;overflow:visible!important}
.two-time-row .cess-icon-time{--cess-icon-size:82px;--cess-icon-left:-67px}
.computer-time-row .cess-icon-time{--cess-icon-size:64px;--cess-icon-left:-54px}
.online-time-row .cess-icon-time{--cess-icon-size:54px;--cess-icon-left:-47px}

/* PGN / modal actions: compact icon dock + a separately protected label lane. */
.cess-icon-tool{--cess-icon-size:28px;--cess-icon-left:6px;--cess-label-left:38px;--cess-label-right:6px;overflow:visible!important}
.cess-icon-load{--cess-icon-size:38px;--cess-icon-left:10px;--cess-label-left:54px;--cess-label-right:12px;overflow:visible!important}

/* Same-device / online selector. */
.cess-icon-mode-tab{--cess-icon-size:27px;--cess-icon-left:9px;--cess-label-left:40px;--cess-label-right:9px;overflow:visible!important}

/* CREATE ROOM / JOIN ROOM: clear 48px icon rail, no text intrusion. */
.cess-icon-online{--cess-icon-size:40px;--cess-icon-left:12px;--cess-label-left:59px;--cess-label-right:14px;overflow:visible!important}

/* Board + study controls use a smaller dock because these controls are compact. */
.cess-icon-board{--cess-icon-size:28px;--cess-icon-left:8px;--cess-label-left:40px;--cess-label-right:8px;overflow:visible!important}
.cess-icon-study{--cess-icon-size:32px;--cess-icon-left:9px;--cess-label-left:45px;--cess-label-right:9px;overflow:visible!important}
.cess-icon-micro{--cess-icon-size:14px;--cess-icon-left:5px;--cess-label-left:22px;--cess-label-right:4px;overflow:visible!important}

/* Puzzle difficulty cards: icon, copy and count are three independent columns. */
.puzzle-level-choice.cess-icon-puzzle{
 --cess-icon-size:64px;
 --cess-icon-left:27px;
 padding-left:108px!important;
 padding-right:34px!important;
 overflow:visible!important;
}
.puzzle-level-choice.cess-icon-puzzle::before{filter:drop-shadow(0 6px 6px rgba(48,22,8,.17))}
.puzzle-level-choice.cess-icon-puzzle.is-current::before{filter:brightness(1.035) drop-shadow(0 7px 8px rgba(36,94,45,.20))}

/* Result screen: the horizontal buttons keep their original widths. Icons live
   in a fixed left rail and the label is fitted only inside the remaining lane. */
.result-signature button.cess-icon-result-signature{
 --cess-icon-size:31px;
 --cess-icon-left:11px;
 --cess-label-left:46px;
 --cess-label-right:10px;
 padding:0!important;
 overflow:visible!important;
}
.result-actions button.cess-icon-result-action{
 --cess-icon-size:43px;
 --cess-icon-left:10px;
 --cess-label-left:58px;
 --cess-label-right:10px;
 padding:0!important;
 overflow:visible!important;
}
/* Winner emblem is visually important, but never touches either headline. */
.result-main .result-piece.result-winner-emblem{
 top:202px!important;
 width:232px!important;
 height:254px!important;
 object-fit:contain!important;
 filter:drop-shadow(0 12px 11px rgba(60,28,10,.17))!important;
}

/* Resign confirmation: the context emblem gets its own centered zone above the
   copy; action icons are docked inside their buttons. */
.cess-confirm-card.cess-resign-confirm-card{position:relative;padding-top:122px!important}
.cess-confirm-card.cess-resign-confirm-card::before{
 content:"";
 position:absolute;
 z-index:4;
 left:50%;
 top:47px;
 width:68px;
 height:68px;
 transform:translateX(-50%);
 background:var(--cess-confirm-icon) center/contain no-repeat;
 pointer-events:none;
 filter:drop-shadow(0 7px 7px rgba(55,24,9,.18));
}
.cess-confirm-actions button.cess-icon-confirm{
 --cess-icon-size:31px;
 --cess-icon-left:10px;
 --cess-label-left:45px;
 --cess-label-right:9px;
 padding:0!important;
 overflow:visible!important;
}

/* Never let legacy child-span padding fight the new protected label lanes. */
.setup-start.cess-icon-button>span,
.online-wood-button.cess-icon-button>span,
.academy-wood-btn.cess-icon-button>span,
.wood-ui-btn.cess-icon-button>span,
.two-mode-tab.cess-icon-button>span,
.time-choice.cess-icon-button>span,
.online-time-choice.cess-icon-button>span{
 padding-left:var(--cess-label-left)!important;
 padding-right:var(--cess-label-right)!important;
}

/* Existing artwork may intentionally overflow; only the pseudo icon does so. */
.setup-start.cess-icon-button,
.online-wood-button.cess-icon-button,
.academy-wood-btn.cess-icon-button,
.wood-ui-btn.cess-icon-button,
.two-mode-tab.cess-icon-button,
.time-choice.cess-icon-button,
.online-time-choice.cess-icon-button,
.result-signature button.cess-icon-button,
.result-actions button.cess-icon-button,
.cess-confirm-actions button.cess-icon-button{overflow:visible!important}

/* ======================================================================
   CESS! v3.5.4.11 — SETUP / PUZZLE / LEARN / PARALLEL ALIGNMENT PASS
   Layout-only refinement. Supplied artwork is used unchanged.
   ====================================================================== */

/* Learn Chess: give RESET / SHOW / EXPLORE a calm icon rail. The icon moves
   slightly inward while the label lane moves with it in every language. */
#learnReset.cess-icon-study,#learnDemo.cess-icon-study{
  --cess-icon-size:34px;
  --cess-icon-left:16px;
  --cess-label-left:60px;
  --cess-label-right:12px;
}
#learnReset.cess-icon-study>.cess-icon-label,#learnDemo.cess-icon-study>.cess-icon-label{
  justify-content:center!important;
}

/* PARALLEL 64: exactly double the previous 54px title icon while keeping the
   title baseline and the authored heading footprint stable. */
.signature-title-line{height:58px!important;gap:20px!important;overflow:visible!important}
.signature-heading-icon{
  height:108px!important;
  max-width:152px!important;
  width:auto!important;
  margin:-25px 0!important;
  align-self:center!important;
}
.signature-title-line .signature-title{align-self:center!important}
html[data-lang="ja"] .signature-title-line{gap:17px!important}

/* Puzzle difficulty close: center the X optically inside its wooden square. */
.puzzle-level-close{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:1!important;
}
.puzzle-level-close>span{display:block;line-height:1;transform:translateY(-3px)}

/* Puzzle action row: three supplied icons on the left, NEXT arrow on the right. */
#puzzleHint.cess-icon-puzzle-action,#puzzleSolution.cess-icon-puzzle-action,#puzzleReview.cess-icon-puzzle-action{
  --cess-icon-size:42px;
  --cess-icon-left:15px;
  --cess-label-left:64px;
  --cess-label-right:12px;
  overflow:visible!important;
}
#puzzleHint.cess-icon-puzzle-action::before,#puzzleSolution.cess-icon-puzzle-action::before,#puzzleReview.cess-icon-puzzle-action::before{
  filter:drop-shadow(0 5px 5px rgba(55,24,9,.16));
}
#puzzleNext{position:relative!important;overflow:visible!important}
#puzzleNext>span{box-sizing:border-box!important;padding-left:12px!important;padding-right:58px!important}
.puzzle-next-arrow{
  position:absolute;
  z-index:9;
  right:19px;
  top:50%;
  transform:translateY(-54%);
  width:34px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font:900 43px/1 "Helvetica Neue",Arial,sans-serif;
  font-style:normal;
  text-shadow:0 2px 1px rgba(56,22,7,.42);
  pointer-events:none;
  transition:transform .15s cubic-bezier(.2,.74,.2,1),filter .15s ease;
}
@media (hover:hover) and (pointer:fine){#puzzleNext:hover .puzzle-next-arrow{transform:translateY(-54%) translateX(2px);filter:brightness(1.05)}}

/* Shared setup-window close controls. */
.setup-close-button{
  position:absolute;
  right:226px;
  top:96px;
  z-index:30;
  width:64px;
  height:64px;
  border:0;
  padding:0;
  background:transparent;
  color:var(--gold);
  filter:drop-shadow(0 7px 8px rgba(50,22,9,.15));
  transition:transform .16s cubic-bezier(.2,.74,.2,1),filter .16s ease;
}
.setup-close-button>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.setup-close-button>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:5px;color:var(--gold);font:900 34px/1 "Helvetica Neue",Arial,sans-serif;text-shadow:0 2px 1px rgba(56,22,7,.42);pointer-events:none}
@media (hover:hover) and (pointer:fine){.setup-close-button:hover{transform:translateY(-2px);filter:brightness(1.06) drop-shadow(0 9px 9px rgba(50,22,9,.17))}}
.setup-close-button:active{transform:translateY(0) scale(.985);filter:brightness(.97)}

/* Time is now a section marker, never an icon docked to the first time button. */
.setup-time-icon{
  position:absolute;
  z-index:18;
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 6px 6px rgba(55,24,9,.16));
}
.computer-time-icon{left:466px;top:458px;width:66px;height:66px}
.two-local-time-icon{left:349px;top:620px;width:64px;height:64px}
.two-online-time-icon{left:337px;top:684px;width:58px;height:58px}
#setupTwo.online-mode .two-local-time-icon{display:none!important}
#setupTwo:not(.online-mode) .two-online-time-icon{display:none!important}

/* COMPUTER: restore breathing room around START and bring its icon inside the
   left edge of the wood instead of hanging outside it. */
#computerStart{
  left:538px!important;
  top:810px!important;
  width:846px!important;
  height:133px!important;
}
#computerStart.cess-icon-start{
  --cess-icon-size:66px;
  --cess-icon-left:25px;
  --cess-label-left:108px;
  --cess-label-right:28px;
  overflow:visible!important;
}
#computerStart.cess-icon-start>.cess-icon-label{justify-content:center!important}
.computer-time-prev{left:463px!important;top:530px!important;z-index:16!important}
.computer-time-next{left:1384px!important;top:530px!important;z-index:16!important}

/* TWO PLAYER: SAME DEVICE / ONLINE become the dominant choice — 2.5x the old
   switch footprint — while the secondary color/time decisions sit below it. */
#setupTwo .two-mode-switch{
  left:210px!important;
  top:194px!important;
  width:1500px!important;
  height:135px!important;
  gap:22px!important;
  z-index:12!important;
}
#setupTwo .two-mode-tab{
  height:135px!important;
  border-radius:34px!important;
  font-size:36px!important;
  letter-spacing:-.6px!important;
  box-shadow:inset 0 0 0 3px rgba(241,181,104,.16)!important;
}
#setupTwo .two-mode-tab::after{left:40px!important;right:40px!important;bottom:10px!important;height:5px!important}
#setupTwo .two-mode-tab.cess-icon-mode-tab{
  --cess-icon-size:68px;
  --cess-icon-left:30px;
  --cess-label-left:118px;
  --cess-label-right:28px;
}

/* The two-player section identity moves from upper-right to upper-left. */
.two-feature-icon{
  left:222px!important;
  top:82px!important;
  width:194px!important;
  height:164px!important;
  z-index:14!important;
}

/* Local secondary choices: slightly smaller, deliberately lower. */
#setupTwo .two-side-row .wood-choice,#setupTwo .two-side-row .wood-choice .wood-base{
  width:214px!important;
  height:202.5px!important;
}
#setupTwo .two-side-row .wood-choice:nth-child(1){left:584px!important;top:386px!important}
#setupTwo .two-side-row .wood-choice:nth-child(2){left:853px!important;top:386px!important}
#setupTwo .two-side-row .wood-choice:nth-child(3){left:1122px!important;top:386px!important}
#setupTwo .two-side-row .choice-piece{width:134px!important;max-height:150px!important}
#setupTwo .two-side-row .wood-choice::after{border-width:4px!important;border-radius:21px!important}

#setupTwo .two-time-row .time-choice{width:176px!important;height:167px!important}
#setupTwo .two-time-row .time-choice>img{width:176px!important;height:167px!important;object-fit:contain!important}
#setupTwo .two-time-row .time-choice span{font-size:40px!important}
#setupTwo .two-time-row .time-choice:nth-child(1){left:438px!important;top:663px!important}
#setupTwo .two-time-row .time-choice:nth-child(2){left:650px!important;top:663px!important}
#setupTwo .two-time-row .time-choice:nth-child(3){left:862px!important;top:663px!important}
#setupTwo .two-time-row .time-choice:nth-child(4){left:1074px!important;top:663px!important}
#setupTwo .two-time-row .time-choice:nth-child(5){left:1286px!important;top:663px!important}
.two-time-prev{left:345px!important;top:687px!important;z-index:16!important}
.two-time-next{left:1503px!important;top:687px!important;z-index:16!important}
#twoStart{left:538px!important;top:844px!important;width:846px!important;height:125px!important}
#twoStart>img{width:846px!important;height:125px!important;object-fit:fill!important}
#twoStart.cess-icon-start{--cess-icon-size:76px;--cess-icon-left:-58px}

/* ONLINE: same dominant mode switch, content begins lower and stays inside the
   wooden panel. The time icon is standalone, and JOIN ROOM is pulled safely in. */
#setupTwo.online-mode .online-section-card{top:366px!important;height:520px!important}
#setupTwo.online-mode .online-section-card-create{left:370px!important;width:535px!important}
#setupTwo.online-mode .online-section-card-join{left:1000px!important;width:535px!important}
#setupTwo.online-mode .online-section-divider{left:950px!important;top:388px!important;height:470px!important}
#setupTwo.online-mode .online-create-title,#setupTwo.online-mode .online-or{top:390px!important}
#setupTwo.online-mode .online-create-title{left:400px!important;width:475px!important}
#setupTwo.online-mode .online-or{left:1030px!important;width:475px!important}
#setupTwo.online-mode .online-section-copy{top:426px!important;width:455px!important}
#setupTwo.online-mode .online-create-copy{left:410px!important}
#setupTwo.online-mode .online-join-copy{left:1040px!important}
#setupTwo.online-mode .online-create-name-field{left:418px!important;top:464px!important;width:438px!important}
#setupTwo.online-mode .online-join-name-field{left:1048px!important;top:464px!important;width:438px!important}
#setupTwo.online-mode .online-side-row{left:425px!important;top:558px!important;width:425px!important}
#setupTwo.online-mode .online-time-row{left:402px!important;top:693px!important;width:468px!important;height:78px!important;gap:6px!important}
#setupTwo.online-mode .online-time-choice{height:78px!important}
#setupTwo.online-mode .online-time-choice span{font-size:21px!important}
#setupTwo.online-mode .online-code-field{left:1048px!important;top:579px!important;width:438px!important}
#setupTwo.online-mode #onlineCreate{left:442px!important;top:796px!important;width:390px!important;height:63px!important}
#setupTwo.online-mode .online-join-button{left:1066px!important;top:712px!important;width:390px!important;height:63px!important}
#setupTwo.online-mode .online-entry-status{left:710px!important;top:898px!important;width:500px!important;max-height:42px!important}
#setupTwo.online-mode .online-wood-button.cess-icon-online{--cess-icon-size:38px;--cess-icon-left:14px;--cess-label-left:60px;--cess-label-right:16px}

/* Invite mode keeps the same contained geometry. */
#setupTwo.online-mode.invite-mode .online-invite-hint{left:1034px!important;top:445px!important;width:466px!important}

@media (prefers-reduced-motion:reduce){.puzzle-next-arrow,.setup-close-button{transition:none!important}}

/* v3.5.4.11 geometry correction after the 2.5x mode-switch expansion. */
#setupTwo .two-mode-switch{top:242px!important}
.two-feature-icon{left:236px!important;top:78px!important;width:166px!important;height:112px!important}
#setupTwo .two-side-row .wood-choice:nth-child(1){top:405px!important}
#setupTwo .two-side-row .wood-choice:nth-child(2){top:405px!important}
#setupTwo .two-side-row .wood-choice:nth-child(3){top:405px!important}
#setupTwo .two-time-row .time-choice:nth-child(1){top:650px!important}
#setupTwo .two-time-row .time-choice:nth-child(2){top:650px!important}
#setupTwo .two-time-row .time-choice:nth-child(3){top:650px!important}
#setupTwo .two-time-row .time-choice:nth-child(4){top:650px!important}
#setupTwo .two-time-row .time-choice:nth-child(5){top:650px!important}
.two-time-prev{top:674px!important}.two-time-next{top:674px!important}
.two-local-time-icon{top:607px!important}
#twoStart{top:828px!important}
#setupTwo.online-mode .online-section-card{top:398px!important;height:500px!important}
#setupTwo.online-mode .online-section-divider{top:418px!important;height:450px!important}
#setupTwo.online-mode .online-create-title,#setupTwo.online-mode .online-or{top:420px!important}
#setupTwo.online-mode .online-section-copy{top:454px!important}
#setupTwo.online-mode .online-create-name-field,#setupTwo.online-mode .online-join-name-field{top:492px!important}
#setupTwo.online-mode .online-side-row{top:586px!important}
#setupTwo.online-mode .online-time-row{top:704px!important}
.two-online-time-icon{top:697px!important}
#setupTwo.online-mode .online-code-field{top:606px!important}
#setupTwo.online-mode #onlineCreate{top:807px!important}
#setupTwo.online-mode .online-join-button{top:739px!important;left:1056px!important}
#setupTwo.online-mode .online-entry-status{top:909px!important}
#setupTwo.online-mode.invite-mode .online-invite-hint{top:473px!important}

/* ======================================================================
   CESS! v3.5.4.12 — FINAL VISUAL SYSTEM / SQUARE PIECES / PERFORMANCE
   One geometry standard for every screen. No artwork is redrawn.
   ====================================================================== */

/* ---------- 1. Stable, clipped action-button anatomy ---------- */
.cess-icon-button{
  overflow:hidden!important;
  isolation:isolate!important;
  contain:paint!important;
  --cess-icon-size:34px;
  --cess-icon-left:14px;
  --cess-label-left:62px;
  --cess-label-right:16px;
}
.cess-icon-button::before{
  left:var(--cess-icon-left)!important;
  top:50%!important;
  width:var(--cess-icon-size)!important;
  height:var(--cess-icon-size)!important;
  max-width:calc(100% - 20px)!important;
  max-height:calc(100% - 18px)!important;
  transform:translateY(-50%)!important;
  filter:drop-shadow(0 3px 3px rgba(55,24,9,.14))!important;
  transition:transform .12s cubic-bezier(.2,.74,.2,1),filter .12s ease!important;
}
.cess-icon-button>.cess-icon-label{
  inset:0!important;
  padding-left:var(--cess-label-left)!important;
  padding-right:var(--cess-label-right)!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  line-height:1!important;
}
@media (hover:hover) and (pointer:fine){
  .cess-icon-button:hover::before{transform:translateY(-50%) scale(1.025)!important;filter:brightness(1.035) drop-shadow(0 4px 4px rgba(55,24,9,.15))!important}
}
.cess-icon-button:active::before{transform:translateY(-50%) scale(.985)!important}

/* Purpose-sized lanes. Every icon remains inside the wooden control. */
.setup-start.cess-icon-start{
  --cess-icon-size:66px!important;
  --cess-icon-left:28px!important;
  --cess-label-left:116px!important;
  --cess-label-right:30px!important;
  overflow:hidden!important;
}
.cess-icon-tool{--cess-icon-size:25px!important;--cess-icon-left:9px!important;--cess-label-left:42px!important;--cess-label-right:8px!important;overflow:hidden!important}
.cess-icon-load{--cess-icon-size:34px!important;--cess-icon-left:12px!important;--cess-label-left:58px!important;--cess-label-right:14px!important;overflow:hidden!important}
.cess-icon-confirm{--cess-icon-size:30px!important;--cess-icon-left:12px!important;--cess-label-left:52px!important;--cess-label-right:12px!important;overflow:hidden!important}
.cess-icon-mode-tab{--cess-icon-size:62px!important;--cess-icon-left:30px!important;--cess-label-left:118px!important;--cess-label-right:30px!important;overflow:hidden!important}
.cess-icon-online{--cess-icon-size:38px!important;--cess-icon-left:16px!important;--cess-label-left:66px!important;--cess-label-right:18px!important;overflow:hidden!important}
.cess-icon-board{--cess-icon-size:25px!important;--cess-icon-left:10px!important;--cess-label-left:46px!important;--cess-label-right:10px!important;overflow:hidden!important}
.cess-icon-study{--cess-icon-size:30px!important;--cess-icon-left:14px!important;--cess-label-left:58px!important;--cess-label-right:12px!important;overflow:hidden!important}
.cess-icon-micro{--cess-icon-size:14px!important;--cess-icon-left:7px!important;--cess-label-left:27px!important;--cess-label-right:5px!important;overflow:hidden!important}
.cess-icon-puzzle-action{--cess-icon-size:38px!important;--cess-icon-left:14px!important;--cess-label-left:62px!important;--cess-label-right:14px!important;overflow:hidden!important}
.result-signature button.cess-icon-result-signature{--cess-icon-size:28px!important;--cess-icon-left:12px!important;--cess-label-left:50px!important;--cess-label-right:12px!important;overflow:hidden!important}
.result-actions button.cess-icon-result-action{--cess-icon-size:38px!important;--cess-icon-left:15px!important;--cess-label-left:66px!important;--cess-label-right:14px!important;overflow:hidden!important}

/* RESET / SHOW / EXPLORE: slightly inward, with a protected multilingual lane. */
#learnReset.cess-icon-study,#learnDemo.cess-icon-study{
  --cess-icon-size:30px!important;
  --cess-icon-left:17px!important;
  --cess-label-left:61px!important;
  --cess-label-right:12px!important;
}

/* Difficulty cards use icon / copy / count as three fixed columns. */
.puzzle-level-choice.cess-icon-puzzle{
  --cess-icon-size:58px!important;
  --cess-icon-left:28px!important;
  grid-template-columns:minmax(0,1fr) 156px!important;
  padding:0 34px 0 108px!important;
  overflow:hidden!important;
}
.puzzle-level-choice.cess-icon-puzzle::before{max-height:76px!important;max-width:76px!important}

/* The NEXT arrow owns its own right lane and can never meet the label. */
#puzzleNext{overflow:hidden!important}
#puzzleNext>span{padding-left:14px!important;padding-right:62px!important;overflow:hidden!important;white-space:nowrap!important}
.puzzle-next-arrow{right:18px!important;width:34px!important;pointer-events:none!important}

/* All generic wooden controls clip children at their authored rectangle. */
.setup-start.cess-icon-button,
.online-wood-button.cess-icon-button,
.academy-wood-btn.cess-icon-button,
.wood-ui-btn.cess-icon-button,
.two-mode-tab.cess-icon-button,
.time-choice.cess-icon-button,
.online-time-choice.cess-icon-button,
.result-signature button.cess-icon-button,
.result-actions button.cess-icon-button,
.cess-confirm-actions button.cess-icon-button{overflow:hidden!important}

/* ---------- 2. Setup screens: one shared window grid ---------- */
.setup-view{contain:layout paint!important}
.setup-window{left:193px!important;top:70px!important;width:1534px!important;height:940px!important}
.setup-close-button{
  right:226px!important;
  top:98px!important;
  width:62px!important;
  height:62px!important;
  z-index:40!important;
}
.setup-close-button>span{padding-bottom:3px!important;font-size:32px!important}
.setup-title{z-index:12!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
.setup-feature-icon{object-fit:contain!important;pointer-events:none!important}
.setup-time-icon{object-fit:contain!important;pointer-events:none!important;filter:drop-shadow(0 3px 3px rgba(55,24,9,.12))!important}

/* Computer setup — centered rows, equal gaps, START safely inside window. */
.computer-feature-icon{left:236px!important;top:92px!important;width:148px!important;height:132px!important}
.computer-title{left:430px!important;top:139px!important;width:1060px!important;font-size:84px!important;letter-spacing:-5px!important}
#setupComputer .computer-side-row .wood-choice{width:181px!important;height:171px!important}
#setupComputer .computer-side-row .wood-choice .wood-base{width:181px!important;height:171px!important}
#setupComputer .computer-side-row .wood-choice:nth-child(1){left:672px!important;top:304px!important}
#setupComputer .computer-side-row .wood-choice:nth-child(2){left:870px!important;top:304px!important}
#setupComputer .computer-side-row .wood-choice:nth-child(3){left:1068px!important;top:304px!important}
#setupComputer .computer-side-row .choice-piece{width:126px!important;height:126px!important;max-width:126px!important;max-height:126px!important;object-fit:contain!important}
#setupComputer .computer-time-row .time-choice{width:152px!important;height:144px!important;overflow:hidden!important}
#setupComputer .computer-time-row .time-choice:nth-child(1){left:544px!important;top:515px!important}
#setupComputer .computer-time-row .time-choice:nth-child(2){left:711px!important;top:515px!important}
#setupComputer .computer-time-row .time-choice:nth-child(3){left:878px!important;top:515px!important}
#setupComputer .computer-time-row .time-choice:nth-child(4){left:1045px!important;top:515px!important}
#setupComputer .computer-time-row .time-choice:nth-child(5){left:1212px!important;top:515px!important}
#setupComputer .computer-time-row .time-choice span{font-size:34px!important}
.computer-time-prev{left:463px!important;top:552px!important;z-index:16!important}
.computer-time-next{left:1384px!important;top:552px!important;z-index:16!important}
.computer-time-icon{left:466px!important;top:474px!important;width:64px!important;height:64px!important;z-index:22!important}
#setupComputer .difficulty-art{left:538px!important;top:670px!important;width:852px!important;height:144px!important}
#setupComputer .difficulty-art>img:first-child{width:852px!important;height:144px!important;object-fit:fill!important}
#setupComputer .difficulty-knob{top:45px!important}
#setupComputer .difficulty-art input{top:40px!important;height:74px!important}
#computerStart{left:538px!important;top:830px!important;width:846px!important;height:126px!important}
#computerStart>img{width:100%!important;height:100%!important;object-fit:fill!important}
#computerStart.cess-icon-start{--cess-icon-size:62px!important;--cess-icon-left:30px!important;--cess-label-left:114px!important;--cess-label-right:30px!important}

/* Two-player header: large SAME DEVICE / ONLINE, but with safe outer margins. */
.two-feature-icon{left:236px!important;top:86px!important;width:156px!important;height:124px!important;z-index:18!important}
.two-title{left:430px!important;top:120px!important;width:1060px!important;font-size:88px!important;letter-spacing:-5px!important}
#setupTwo .two-mode-switch{
  left:278px!important;
  top:238px!important;
  width:1364px!important;
  height:126px!important;
  gap:20px!important;
  z-index:18!important;
}
#setupTwo .two-mode-tab{
  width:672px!important;
  height:126px!important;
  min-width:0!important;
  border-radius:30px!important;
  font-size:34px!important;
  letter-spacing:-.5px!important;
  overflow:hidden!important;
}
#setupTwo .two-mode-tab::after{left:32px!important;right:32px!important;bottom:9px!important;height:4px!important}
#setupTwo .two-mode-tab.cess-icon-mode-tab{--cess-icon-size:60px!important;--cess-icon-left:30px!important;--cess-label-left:116px!important;--cess-label-right:30px!important}

/* Local secondary controls form three clean rows. */
#setupTwo .two-side-row .wood-choice,#setupTwo .two-side-row .wood-choice .wood-base{width:202px!important;height:191px!important}
#setupTwo .two-side-row .wood-choice:nth-child(1){left:606px!important;top:405px!important}
#setupTwo .two-side-row .wood-choice:nth-child(2){left:859px!important;top:405px!important}
#setupTwo .two-side-row .wood-choice:nth-child(3){left:1112px!important;top:405px!important}
#setupTwo .two-side-row .choice-piece{width:138px!important;height:138px!important;max-width:138px!important;max-height:138px!important;object-fit:contain!important}
#setupTwo .two-time-row .time-choice{width:166px!important;height:157px!important;overflow:hidden!important}
#setupTwo .two-time-row .time-choice:nth-child(1){left:453px!important;top:652px!important}
#setupTwo .two-time-row .time-choice:nth-child(2){left:665px!important;top:652px!important}
#setupTwo .two-time-row .time-choice:nth-child(3){left:877px!important;top:652px!important}
#setupTwo .two-time-row .time-choice:nth-child(4){left:1089px!important;top:652px!important}
#setupTwo .two-time-row .time-choice:nth-child(5){left:1301px!important;top:652px!important}
#setupTwo .two-time-row .time-choice span{font-size:38px!important}
.two-time-prev{left:355px!important;top:683px!important;z-index:16!important}
.two-time-next{left:1502px!important;top:683px!important;z-index:16!important}
.two-local-time-icon{left:360px!important;top:606px!important;width:62px!important;height:62px!important;z-index:22!important}
#twoStart{left:538px!important;top:833px!important;width:846px!important;height:123px!important}
#twoStart>img{width:100%!important;height:100%!important;object-fit:fill!important}
#twoStart.cess-icon-start{--cess-icon-size:62px!important;--cess-icon-left:30px!important;--cess-label-left:114px!important;--cess-label-right:30px!important}

/* Online content is fully contained inside the authored wooden window. */
#setupTwo.online-mode .online-section-card{top:397px!important;height:500px!important}
#setupTwo.online-mode .online-section-card-create{left:353px!important;width:554px!important}
#setupTwo.online-mode .online-section-card-join{left:1013px!important;width:554px!important}
#setupTwo.online-mode .online-section-divider{left:960px!important;top:419px!important;height:448px!important}
#setupTwo.online-mode .online-create-title{left:383px!important;top:421px!important;width:494px!important}
#setupTwo.online-mode .online-or{left:1043px!important;top:421px!important;width:494px!important}
#setupTwo.online-mode .online-section-copy{top:459px!important;width:462px!important;max-height:34px!important;overflow:hidden!important}
#setupTwo.online-mode .online-create-copy{left:399px!important}
#setupTwo.online-mode .online-join-copy{left:1059px!important}
#setupTwo.online-mode .online-create-name-field{left:411px!important;top:500px!important;width:438px!important}
#setupTwo.online-mode .online-join-name-field{left:1071px!important;top:500px!important;width:438px!important}
#setupTwo.online-mode .online-side-row{left:421px!important;top:590px!important;width:418px!important}
#setupTwo.online-mode .online-time-row{left:407px!important;top:708px!important;width:446px!important;height:72px!important;gap:6px!important}
#setupTwo.online-mode .online-time-choice{height:72px!important;min-width:0!important;overflow:hidden!important}
#setupTwo.online-mode .online-time-choice span{font-size:20px!important}
.two-online-time-icon{left:353px!important;top:706px!important;width:50px!important;height:50px!important;z-index:22!important}
#setupTwo.online-mode .online-code-field{left:1071px!important;top:610px!important;width:438px!important}
#setupTwo.online-mode #onlineCreate{left:434px!important;top:806px!important;width:392px!important;height:64px!important;overflow:hidden!important}
#setupTwo.online-mode .online-join-button{left:1094px!important;top:746px!important;width:392px!important;height:64px!important;overflow:hidden!important}
#setupTwo.online-mode .online-entry-status{left:710px!important;top:910px!important;width:500px!important;max-height:34px!important;overflow:hidden!important}
#setupTwo.online-mode.invite-mode .online-invite-hint{left:1050px!important;top:474px!important;width:470px!important;max-height:22px!important;overflow:hidden!important}

/* ---------- 3. Study / puzzle control standard ---------- */
.academy-board-controls,.learn-board-controls,.top100-board-controls{overflow:visible!important}
.academy-board-controls .academy-wood-btn,
.learn-board-controls .academy-wood-btn,
.top100-board-controls .academy-wood-btn,
.puzzle-actions .academy-wood-btn{overflow:hidden!important;min-width:0!important;flex:none!important}
.academy-play.cess-icon-button,.academy-flip.cess-icon-button{--cess-icon-size:24px!important;--cess-icon-left:10px!important;--cess-label-left:44px!important;--cess-label-right:10px!important}
.learn-reset,.learn-demo{width:176px!important;height:82px!important}
.puzzle-actions{grid-template-columns:repeat(2,220px)!important;grid-auto-rows:96px!important;gap:8px 16px!important;margin-top:14px!important}
.puzzle-actions .academy-wood-btn{width:220px!important;height:96px!important}
#puzzleHint.cess-icon-puzzle-action,#puzzleSolution.cess-icon-puzzle-action,#puzzleReview.cess-icon-puzzle-action{--cess-icon-size:36px!important;--cess-icon-left:14px!important;--cess-label-left:60px!important;--cess-label-right:14px!important}
.puzzle-level-close{display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.puzzle-level-close>span{transform:translateY(-4px)!important}

/* Parallel 64 title icon: large, but baseline-aligned and never colliding. */
.signature-title-line{height:62px!important;gap:20px!important;overflow:visible!important;align-items:center!important}
.signature-heading-icon{width:auto!important;height:108px!important;max-width:152px!important;margin:-23px 0!important;align-self:center!important;object-fit:contain!important}
.signature-title-line .signature-title{align-self:center!important;min-width:0!important}

/* ---------- 4. New 1:1 chess artwork: every board uses one neutral rule ---------- */
.board,.academy-board,.puzzle-board,.learn-board,.top100-board,.signature-board,.signature-mini-board{
  contain:layout paint!important;
}
/* Main board: exact 135px cell, no legacy optical shifts or rotations. */
.piece-anchor{left:50%!important;top:50%!important;width:0!important;height:0!important}
.piece-anchor .piece,
.piece-anchor .piece.piece-n,
.piece-anchor .piece.piece-b,
.piece-anchor .piece.piece-n.color-w,
.piece-anchor .piece.piece-n.color-b,
.piece-anchor .piece.piece-b.color-w,
.piece-anchor .piece.piece-b.color-b{
  left:-67.5px!important;
  top:-67.5px!important;
  width:135px!important;
  height:135px!important;
  max-width:135px!important;
  max-height:135px!important;
  object-fit:contain!important;
  transform:none!important;
  transform-origin:67.5px 67.5px!important;
  margin:0!important;
  filter:none!important;
}
.piece-anchor .piece.face-right,.piece-anchor .piece.face-left,
.piece-anchor .piece.knight-up,.piece-anchor .piece.knight-down{transform:none!important}

/* Main move/capture/drag ghosts share the exact same square footprint. */
.move-ghost,.capture-ghost,.drag-ghost,
.move-ghost.piece-n,.capture-ghost.piece-n,.drag-ghost.piece-n,
.move-ghost.piece-b,.capture-ghost.piece-b,.drag-ghost.piece-b{
  left:-67.5px!important;
  top:-67.5px!important;
  width:135px!important;
  height:135px!important;
  max-width:135px!important;
  max-height:135px!important;
  object-fit:contain!important;
  transform:none!important;
  transform-origin:67.5px 67.5px!important;
  margin:0!important;
  filter:none!important;
}
.move-ghost.face-right,.move-ghost.face-left,.capture-ghost.face-right,.capture-ghost.face-left,.drag-ghost.face-right,.drag-ghost.face-left,
.move-ghost.knight-up,.move-ghost.knight-down,.capture-ghost.knight-up,.capture-ghost.knight-down,.drag-ghost.knight-up,.drag-ghost.knight-down{transform:none!important}

/* 810px study boards: 101.25px per square, exact 100% artwork. */
.academy-piece,.puzzle-piece,.learn-piece,
.academy-piece.piece-n,.puzzle-piece.piece-n,.learn-piece.piece-n,
.academy-piece.piece-b,.puzzle-piece.piece-b,.learn-piece.piece-b{
  left:50%!important;
  top:50%!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
  filter:none!important;
  margin:0!important;
}
.academy-piece.knight-up,.academy-piece.knight-down,
.puzzle-piece.knight-up,.puzzle-piece.knight-down,
.learn-piece.knight-up,.learn-piece.knight-down{transform:translate(-50%,-50%)!important}
.puzzle-move-ghost,.puzzle-drag-ghost,.learn-move-ghost,.learn-drag-ghost{
  width:101.25px!important;
  height:101.25px!important;
  object-fit:contain!important;
  transform:none!important;
  transform-origin:center!important;
  filter:none!important;
  margin:0!important;
}
.puzzle-move-ghost.piece-n,.puzzle-drag-ghost.piece-n,.learn-move-ghost.piece-n,.learn-drag-ghost.piece-n,
.puzzle-move-ghost.piece-b,.puzzle-drag-ghost.piece-b,.learn-move-ghost.piece-b,.learn-drag-ghost.piece-b{transform:none!important}

/* Top-500 and Parallel boards: exact square fill, no orientation artwork rotation. */
.top100-piece,.signature-piece,.signature-mini-board .signature-piece,
.top100-piece.piece-n,.top100-piece.piece-b,.signature-piece.piece-n,.signature-piece.piece-b{
  left:50%!important;
  top:50%!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
  filter:none!important;
  margin:0!important;
}
.top100-piece.knight-up,.top100-piece.knight-down,.signature-piece.knight-up,.signature-piece.knight-down{transform:translate(-50%,-50%)!important}

/* Promotions and captured pieces also use the same supplied artwork, neutral. */
.promotion-grid img,.top100-promotion-pieces img,.signature-promo-card img{
  object-fit:contain!important;
  transform:none!important;
  filter:none!important;
}
.captured img,.captured img.piece-n,.captured img.piece-b,.captured img.knight-up,.captured img.knight-down,.captured img.face-right,.captured img.face-left{
  object-fit:contain!important;
  transform:none!important;
  filter:none!important;
}

/* ---------- 5. General overlap and paint-safety rules ---------- */
.home-button,.setup-start,.wood-choice,.time-choice,.academy-wood-btn,.wood-ui-btn,.online-wood-button,.online-mini-wood,.two-mode-tab,
.result-actions button,.result-signature button{box-sizing:border-box!important;min-width:0!important}
.home-button span,.setup-start span,.academy-wood-btn span,.wood-ui-btn span,.online-wood-button span,.online-mini-wood span,.two-mode-tab span{
  box-sizing:border-box!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
/* Expensive filters are kept on large static artwork, not on every moving chess piece. */
.piece,.academy-piece,.puzzle-piece,.learn-piece,.top100-piece,.signature-piece,.move-ghost,.capture-ghost,.drag-ghost,.puzzle-move-ghost,.puzzle-drag-ghost,.learn-move-ghost,.learn-drag-ghost{filter:none!important}

/* Motion stays responsive but avoids stacking expensive GPU filters. */
@media (hover:hover) and (pointer:fine){
  .academy-wood-btn:not(.disabled):hover,.wood-ui-btn:not(.disabled):hover,.online-wood-button:hover,.online-mini-wood:hover,.setup-start:hover,.two-mode-tab:hover{filter:brightness(1.025)!important}
}
@media (prefers-reduced-motion:reduce){
  .cess-icon-button::before,.puzzle-next-arrow,.setup-close-button{transition:none!important}
  .fall-piece{animation:none!important;display:none!important}
}

/* v3.5.4.12 final containment corrections. */
#setupTwo.online-mode #onlineCreate,
#setupTwo.online-mode #onlineJoin{position:absolute!important;margin:0!important}
#setupTwo.online-mode #onlineJoin{left:1094px!important;top:746px!important;width:392px!important;height:64px!important}

/* Decorative falling pieces belong to the landing experience only. Pausing them
   elsewhere removes a whole animated/filter layer from boards and setup screens. */
.stage:not(.phase-home):not(.phase-language):not(.phase-loading) .fx-layer{
  opacity:0!important;
  visibility:hidden!important;
  filter:none!important;
}
.stage:not(.phase-home):not(.phase-language):not(.phase-loading) .fall-piece{
  animation-play-state:paused!important;
}

/* Online create column: keep side selection, clock selector and action as three
   separate rows with real breathing room. */
#setupTwo.online-mode .online-side-row{top:576px!important}
#setupTwo.online-mode .online-time-row{top:724px!important}
.two-online-time-icon{top:727px!important}
#setupTwo.online-mode #onlineCreate{top:812px!important}

/* ======================================================================
   CESS! v3.5.4.13 — BOARD ORIENTATION + LAYOUT POLISH PASS
   Final overrides only: no artwork redraws, no board geometry changes.
   ====================================================================== */

/* 1) CHESS PIECE ORIENTATION POLICY
   All study / puzzle / academy / archive / Parallel boards use the supplied
   square artwork exactly as authored. Only the live two-player board turns
   the top player's set toward that player. */
.piece-anchor .piece,
.piece-anchor .piece.piece-n,
.piece-anchor .piece.piece-b,
.move-ghost,.capture-ghost,.drag-ghost,
.move-ghost.piece-n,.move-ghost.piece-b,
.capture-ghost.piece-n,.capture-ghost.piece-b,
.drag-ghost.piece-n,.drag-ghost.piece-b{
  transition:none!important;
}
.piece-anchor .piece:not(.player-face-top),
.move-ghost:not(.player-face-top),
.drag-ghost:not(.player-face-top),
.capture-ghost{
  transform:none!important;
}
.piece-anchor .piece.player-face-bottom,
.move-ghost.player-face-bottom,
.drag-ghost.player-face-bottom{
  transform:none!important;
}
.piece-anchor .piece.player-face-top,
.move-ghost.player-face-top,
.drag-ghost.player-face-top{
  transform:rotate(180deg)!important;
  transform-origin:67.5px 67.5px!important;
}
/* Captured pieces are inventory, not a board side: always neutral. */
.captured img,.captured img.player-face-top,.captured img.player-face-bottom{
  transform:none!important;
}
/* Never inherit historical bishop/knight rotations on non-live boards. */
.academy-piece,.puzzle-piece,.learn-piece,.top100-piece,.signature-piece,
.academy-piece.piece-n,.academy-piece.piece-b,
.puzzle-piece.piece-n,.puzzle-piece.piece-b,
.learn-piece.piece-n,.learn-piece.piece-b,
.top100-piece.piece-n,.top100-piece.piece-b,
.signature-piece.piece-n,.signature-piece.piece-b,
.academy-piece.knight-up,.academy-piece.knight-down,
.puzzle-piece.knight-up,.puzzle-piece.knight-down,
.learn-piece.knight-up,.learn-piece.knight-down,
.top100-piece.knight-up,.top100-piece.knight-down,
.signature-piece.knight-up,.signature-piece.knight-down{
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
}
.puzzle-move-ghost,.puzzle-drag-ghost,.learn-move-ghost,.learn-drag-ghost{
  transform:none!important;
  transition:none!important;
}
.promotion-grid img,.top100-promotion-pieces img,.signature-promo-card img{
  transform:none!important;
}

/* 2) PARALLEL 64 / GAME DNA HEADING — title has its own protected center. */
.signature-view.mode-parallel .signature-heading-icon{
  transform:translateX(-34px)!important;
}
.signature-view.mode-dna .signature-title-line{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:62px!important;
}
.signature-view.mode-dna .signature-title-line .signature-title{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  text-align:center!important;
  line-height:.92!important;
}
.signature-view.mode-dna .signature-heading-icon{
  position:absolute!important;
  left:398px!important;
  top:50%!important;
  width:auto!important;
  height:94px!important;
  max-width:132px!important;
  margin:0!important;
  transform:translateY(-50%)!important;
}

/* 3) PUZZLE ACTIONS — icons sit inside the wooden face, not on its edge. */
#puzzleHint.cess-icon-puzzle-action,
#puzzleSolution.cess-icon-puzzle-action,
#puzzleReview.cess-icon-puzzle-action{
  --cess-icon-size:36px!important;
  --cess-icon-left:22px!important;
  --cess-label-left:70px!important;
  --cess-label-right:14px!important;
}
#puzzleNext>span{
  padding-left:16px!important;
  padding-right:72px!important;
}
.puzzle-next-arrow{
  right:27px!important;
  top:50%!important;
  width:34px!important;
  height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transform:translateY(-51%)!important;
  transform-origin:center!important;
}
@media (hover:hover) and (pointer:fine){
  #puzzleNext:hover .puzzle-next-arrow{transform:translateY(-51%) translateX(1px)!important}
}

/* 4) RESULT SCREEN — consistent icon rail + multilingual text safety. */
.result-actions button.cess-icon-result-action{
  --cess-icon-size:36px!important;
  --cess-icon-left:22px!important;
  --cess-label-left:74px!important;
  --cess-label-right:16px!important;
  font-size:22px!important;
  letter-spacing:-.45px!important;
  line-height:1!important;
  overflow:hidden!important;
}
.result-actions button.cess-icon-result-action>.cess-icon-label{
  white-space:nowrap!important;
  overflow:hidden!important;
}
html[data-lang="ja"] .result-actions button.cess-icon-result-action{font-size:20px!important;letter-spacing:-.2px!important}
.result-main .result-piece.result-winner-emblem{
  background:none!important;
  box-shadow:none!important;
}
.result-main .result-piece.result-winner-emblem::before,
.result-main .result-piece.result-winner-emblem::after{display:none!important;content:none!important}

/* 5) END-GAME REVIEW — a fixed-height information architecture.
   Two-line classifications are absorbed inside the grade row; the panel never
   grows, so clocks and board chrome stay fixed in every language. */
.review-panel{
  left:22px!important;
  top:250px!important;
  width:322px!important;
  height:580px!important;
  box-sizing:border-box!important;
  padding:24px 25px!important;
  grid-template-columns:1fr!important;
  grid-template-rows:78px 46px 62px 82px 82px 82px!important;
  gap:10px!important;
  align-content:start!important;
  overflow:hidden!important;
}
.review-grade{
  grid-column:1!important;
  width:270px!important;
  height:78px!important;
  min-height:78px!important;
  max-height:78px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:8px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  font-size:26px!important;
  line-height:1.02!important;
  letter-spacing:-.5px!important;
  text-align:center!important;
}
.review-move{
  grid-column:1!important;
  width:270px!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:4px 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  line-height:1!important;
}
.review-nav{
  grid-column:1!important;
  width:270px!important;
  height:62px!important;
  box-sizing:border-box!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
  align-items:center!important;
}
.review-nav button{height:58px!important;min-width:0!important;margin:0!important}
.review-panel>.wood-ui-btn-wide{
  grid-column:1!important;
  width:270px!important;
  height:82px!important;
  min-height:82px!important;
  max-height:82px!important;
  margin:0!important;
  justify-self:center!important;
  overflow:hidden!important;
}
.review-panel>.wood-ui-btn-wide span{line-height:1!important;white-space:nowrap!important;overflow:hidden!important}

/* Saved / status toast: larger safe box, smaller type, automatic JS fitting. */
.toast{
  width:370px!important;
  height:286px!important;
  box-sizing:border-box!important;
  padding:52px 48px!important;
  background-size:370px 286px!important;
  font-size:30px!important;
  line-height:1.04!important;
  letter-spacing:-.55px!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* 6) TWO PLAYER / ONLINE SETUP — extend cards downward and keep each control
   in a dedicated row. */
#setupTwo.online-mode .online-section-card{
  top:390px!important;
  height:570px!important;
}
#setupTwo.online-mode .online-section-divider{
  top:410px!important;
  height:520px!important;
}
#setupTwo.online-mode .online-create-title,
#setupTwo.online-mode .online-or{top:414px!important}
#setupTwo.online-mode .online-section-copy{top:452px!important;max-height:32px!important}
#setupTwo.online-mode .online-create-name-field,
#setupTwo.online-mode .online-join-name-field{top:500px!important}
#setupTwo.online-mode .online-side-row{
  top:610px!important;
  height:92px!important;
}
#setupTwo.online-mode .online-time-row{
  top:738px!important;
  height:68px!important;
}
#setupTwo.online-mode .online-time-choice{height:68px!important}
#setupTwo.online-mode .online-time-choice span{font-size:19px!important}
#setupTwo.online-mode .two-online-time-icon{
  left:353px!important;
  top:745px!important;
  width:46px!important;
  height:46px!important;
}
#setupTwo.online-mode .online-code-field{top:620px!important}
#setupTwo.online-mode #onlineCreate{top:846px!important;height:64px!important}
#setupTwo.online-mode #onlineJoin{
  left:1094px!important;
  top:758px!important;
  width:392px!important;
  height:64px!important;
}
#setupTwo.online-mode .online-entry-status{top:920px!important;max-height:28px!important;font-size:14px!important}
#setupTwo.online-mode.invite-mode .online-invite-hint{top:475px!important}

/* Once a room exists, the setup clock icon is no longer part of the lobby. */
#setupTwo.online-lobby-mode .two-online-time-icon{display:none!important}
#setupTwo.online-lobby-mode .online-lobby-kicker{
  top:402px!important;
  font-size:14px!important;
  letter-spacing:3px!important;
}
#setupTwo.online-lobby-mode .online-lobby-code{
  top:430px!important;
  font-size:72px!important;
  letter-spacing:11px!important;
  line-height:1!important;
}
#setupTwo.online-lobby-mode .online-lobby-copy{
  top:510px!important;
  font-size:13px!important;
  max-height:34px!important;
}
#setupTwo.online-lobby-mode .online-lobby-actions{
  left:720px!important;
  top:550px!important;
  width:480px!important;
  height:76px!important;
  grid-template-columns:230px 230px!important;
  gap:20px!important;
}
#setupTwo.online-lobby-mode .online-mini-wood{height:76px!important}
#setupTwo.online-lobby-mode .online-mini-wood span{font-size:17px!important}
#setupTwo.online-lobby-mode .online-player-cards{
  left:520px!important;
  top:650px!important;
  width:880px!important;
  height:108px!important;
  grid-template-columns:1fr 64px 1fr!important;
  gap:14px!important;
}
#setupTwo.online-lobby-mode .online-player-card{
  height:102px!important;
  padding:8px 18px!important;
}
#setupTwo.online-lobby-mode .online-player-card img{
  width:72px!important;
  height:80px!important;
  margin-right:12px!important;
}
#setupTwo.online-lobby-mode .online-player-card small{font-size:11px!important;margin-bottom:5px!important}
#setupTwo.online-lobby-mode .online-player-card strong{font-size:21px!important}
#setupTwo.online-lobby-mode .online-lobby-status{
  top:786px!important;
  font-size:18px!important;
  max-height:28px!important;
}
#setupTwo.online-lobby-mode .online-cancel-room{
  left:840px!important;
  top:834px!important;
  width:240px!important;
  height:82px!important;
}

/* Last-resort containment: setup content stays inside the authored window. */
#setupTwo .two-online-panel,
#setupTwo .online-entry,
#setupTwo .online-lobby{box-sizing:border-box!important}

/* v3.5.4.13 online-entry breathing-room correction: the side cards themselves
   are slightly smaller, so the name field and clock row can never touch them. */
#setupTwo.online-mode .online-side-row{height:110px!important}
#setupTwo.online-mode .online-choice{
  width:112px!important;
  height:106px!important;
  flex:0 0 112px!important;
}
#setupTwo.online-mode .online-choice .choice-piece{
  width:72px!important;
  height:78px!important;
}


/* ======================================================================
   CESS! v3.5.4.14 — ORIENTATION + PARALLEL INPUT STABILITY
   One final high-specificity pass over legacy piece rules.
   ====================================================================== */

/* Parallel 64 heading symbol: keep a clean gutter before the centered title. */
.signature-view.mode-parallel .signature-heading-icon{
  transform:translateX(-56px)!important;
}

/* New square artwork is already authored in its final neutral orientation.
   These selectors intentionally outrank the historical 45deg bishop and
   knight optical-orientation rules still present earlier in the stylesheet. */
html .academy-piece.piece-b.color-w,
html .academy-piece.piece-b.color-b,
html .academy-piece.piece-n.color-w,
html .academy-piece.piece-n.color-b,
html .academy-piece.piece-n.color-w.knight-up,
html .academy-piece.piece-n.color-w.knight-down,
html .academy-piece.piece-n.color-b.knight-up,
html .academy-piece.piece-n.color-b.knight-down,
html .puzzle-piece.piece-b.color-w,
html .puzzle-piece.piece-b.color-b,
html .puzzle-piece.piece-n.color-w,
html .puzzle-piece.piece-n.color-b,
html .learn-piece.piece-b.color-w,
html .learn-piece.piece-b.color-b,
html .learn-piece.piece-n.color-w,
html .learn-piece.piece-n.color-b,
html .top100-piece.piece-b.color-w,
html .top100-piece.piece-b.color-b,
html .top100-piece.piece-n.color-w,
html .top100-piece.piece-n.color-b,
html .top100-piece.piece-n.color-w.knight-up,
html .top100-piece.piece-n.color-w.knight-down,
html .top100-piece.piece-n.color-b.knight-up,
html .top100-piece.piece-n.color-b.knight-down,
html .signature-piece.piece-b.color-w,
html .signature-piece.piece-b.color-b,
html .signature-piece.piece-n.color-w,
html .signature-piece.piece-n.color-b,
html .signature-piece.piece-n.color-w.knight-up,
html .signature-piece.piece-n.color-w.knight-down,
html .signature-piece.piece-n.color-b.knight-up,
html .signature-piece.piece-n.color-b.knight-down{
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
}
html .puzzle-move-ghost.piece-b,
html .puzzle-drag-ghost.piece-b,
html .puzzle-move-ghost.piece-n,
html .puzzle-drag-ghost.piece-n,
html .learn-move-ghost.piece-b,
html .learn-drag-ghost.piece-b,
html .learn-move-ghost.piece-n,
html .learn-drag-ghost.piece-n{
  transform:none!important;
  transform-origin:center!important;
}
html .top100-promotion-pieces img.piece-b,
html .promotion-grid img.piece-b,
html .signature-promo-card img.piece-b{
  transform:none!important;
}

/* Live two-player policy: every top-side piece — including bishops and knights —
   faces that player as one coherent set. Bottom-side pieces remain neutral.
   The same rule is used by normal, drag and move ghosts, so a knight never
   changes angle while travelling. */
html .piece-anchor .piece.player-face-bottom,
html .piece-anchor .piece.piece-n.player-face-bottom,
html .piece-anchor .piece.piece-b.player-face-bottom,
html .piece-anchor .piece.piece-n.knight-up.player-face-bottom,
html .piece-anchor .piece.piece-n.knight-down.player-face-bottom,
html .piece-anchor .piece.piece-b.face-right.player-face-bottom,
html .piece-anchor .piece.piece-b.face-left.player-face-bottom,
html .move-ghost.player-face-bottom,
html .move-ghost.piece-n.player-face-bottom,
html .move-ghost.piece-b.player-face-bottom,
html .drag-ghost.player-face-bottom,
html .drag-ghost.piece-n.player-face-bottom,
html .drag-ghost.piece-b.player-face-bottom{
  transform:none!important;
}
html .piece-anchor .piece.player-face-top,
html .piece-anchor .piece.piece-n.player-face-top,
html .piece-anchor .piece.piece-b.player-face-top,
html .piece-anchor .piece.piece-n.knight-up.player-face-top,
html .piece-anchor .piece.piece-n.knight-down.player-face-top,
html .piece-anchor .piece.piece-b.face-right.player-face-top,
html .piece-anchor .piece.piece-b.face-left.player-face-top,
html .move-ghost.player-face-top,
html .move-ghost.piece-n.player-face-top,
html .move-ghost.piece-b.player-face-top,
html .move-ghost.piece-n.knight-up.player-face-top,
html .move-ghost.piece-n.knight-down.player-face-top,
html .drag-ghost.player-face-top,
html .drag-ghost.piece-n.player-face-top,
html .drag-ghost.piece-b.player-face-top,
html .drag-ghost.piece-n.knight-up.player-face-top,
html .drag-ghost.piece-n.knight-down.player-face-top{
  transform:rotate(180deg)!important;
  transform-origin:67.5px 67.5px!important;
}

/* Parallel 64 cards and boards never jump when the turn/status changes. */
.signature-branch,
.signature-branch.is-active,
.signature-branch.is-thinking,
.signature-branch.is-filled,
.signature-branch.is-finished,
.signature-branch.is-waiting{
  transform:none!important;
}
.signature-branch{
  transition:opacity .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.signature-mini-board{
  position:relative!important;
  touch-action:none!important;
}
.signature-mini-board.signature-dragging{cursor:grabbing!important}
.signature-mini-board.signature-dragging .signature-sq{cursor:grabbing!important}
.signature-sq.drag-source::before{
  opacity:1!important;
  background:rgba(39,183,70,.18)!important;
  border:4px solid rgba(39,183,70,.72)!important;
  transform:translate(-50%,-50%) scale(.96)!important;
}
.signature-sq.drag-over::before{
  opacity:1!important;
  background:rgba(39,183,70,.20)!important;
  border:4px solid #27b746!important;
  transform:translate(-50%,-50%) scale(1.02)!important;
}
.signature-drag-ghost{
  position:absolute!important;
  width:12.5%!important;
  height:12.5%!important;
  object-fit:contain!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  z-index:30!important;
  filter:none!important;
  will-change:left,top!important;
}
html .signature-drag-ghost.piece-b.color-w,
html .signature-drag-ghost.piece-b.color-b,
html .signature-drag-ghost.piece-n.color-w,
html .signature-drag-ghost.piece-n.color-b{
  transform:translate(-50%,-50%)!important;
}

/* Wrong puzzle moves: sound + immediate piece return only; never shake the board. */
.puzzle-board.puzzle-wrong{
  animation:none!important;
  transform:none!important;
}


/* ============================================================
   CESS! v3.5.4.19 — puzzle session performance strip
   Session-only, deliberately compact and centered under the board.
   ============================================================ */
.puzzle-session-stats{
  position:absolute;
  left:64px;
  top:968px;
  width:810px;
  height:68px;
  z-index:6;
  display:grid;
  grid-template-columns:1.18fr 1fr 1fr;
  align-items:stretch;
  box-sizing:border-box;
  padding:7px 10px;
  border:1px solid rgba(93,46,24,.24);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(75,43,27,.97) 0%,rgba(48,31,22,.985) 100%);
  box-shadow:0 9px 20px rgba(73,34,14,.15),inset 0 1px 0 rgba(255,222,171,.08),inset 0 0 0 1px rgba(31,18,12,.34);
  color:#f1bd79;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint;
}
.puzzle-session-stats::before{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(246,197,130,.23),transparent);
}
.puzzle-session-stat{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
.puzzle-session-stat+ .puzzle-session-stat::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:1px;
  background:linear-gradient(180deg,transparent,rgba(241,181,104,.22),transparent);
}
.puzzle-session-stat span{
  display:block;
  max-width:92%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
  color:rgba(241,190,122,.58);
  font:900 9.5px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:1.55px;
  text-transform:uppercase;
}
.puzzle-session-stat strong{
  display:block;
  color:#f5c682;
  font:900 23px/.95 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.7px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(45,21,10,.45);
}
.puzzle-session-stat-primary strong{font-size:25px;letter-spacing:-.9px}
html[data-lang="ja"] .puzzle-session-stat span,
html[data-lang="ja"] .puzzle-session-stat strong{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Arial,sans-serif}
html[data-lang="es"] .puzzle-session-stat span,
html[data-lang="it"] .puzzle-session-stat span,
html[data-lang="fr"] .puzzle-session-stat span{font-size:9px;letter-spacing:1.1px}

/* ============================================================
   CESS! v3.5.4.20 — official board coordinates
   Files on the lower edge, ranks on the left edge.  Coordinates
   always follow the board's current viewing orientation.
   ============================================================ */
.board,
.academy-board,
.puzzle-board,
.learn-board,
.top100-board,
.signature-board,
.signature-mini-board{
  --coord-color:#63331d;
  --coord-shadow:0 1px 0 rgba(255,223,172,.38);
  --coord-font:11px;
  --coord-cell:100px;
  --coord-rank-offset:24px;
  --coord-file-offset:22px;
  contain:layout style!important;
  overflow:visible!important;
}

.board::before,
.academy-board::before,
.puzzle-board::before,
.learn-board::before,
.top100-board::before,
.signature-board::before,
.signature-mini-board::before{
  content:"8\A 7\A 6\A 5\A 4\A 3\A 2\A 1";
  position:absolute;
  left:calc(-1 * var(--coord-rank-offset));
  top:0;
  width:20px;
  height:100%;
  z-index:30;
  pointer-events:none;
  white-space:pre;
  overflow:visible;
  color:var(--coord-color);
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:var(--coord-font);
  font-weight:900;
  line-height:var(--coord-cell);
  letter-spacing:0;
  text-align:center;
  font-variant-numeric:tabular-nums;
  text-shadow:var(--coord-shadow);
  opacity:.82;
}
.board::after,
.academy-board::after,
.puzzle-board::after,
.learn-board::after,
.top100-board::after,
.signature-board::after,
.signature-mini-board::after{
  content:"a b c d e f g h";
  position:absolute;
  left:0;
  bottom:calc(-1 * var(--coord-file-offset));
  width:100%;
  height:18px;
  z-index:30;
  pointer-events:none;
  box-sizing:border-box;
  overflow:visible;
  white-space:pre;
  padding-left:calc((var(--coord-cell) - 1ch) / 2);
  color:var(--coord-color);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:var(--coord-font);
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  word-spacing:calc(var(--coord-cell) - 2ch);
  text-align:left;
  text-transform:lowercase;
  text-shadow:var(--coord-shadow);
  opacity:.82;
}
.board[data-coords="b"]::before,
.academy-board[data-coords="b"]::before,
.puzzle-board[data-coords="b"]::before,
.learn-board[data-coords="b"]::before,
.top100-board[data-coords="b"]::before,
.signature-board[data-coords="b"]::before,
.signature-mini-board[data-coords="b"]::before{content:"1\A 2\A 3\A 4\A 5\A 6\A 7\A 8"}
.board[data-coords="b"]::after,
.academy-board[data-coords="b"]::after,
.puzzle-board[data-coords="b"]::after,
.learn-board[data-coords="b"]::after,
.top100-board[data-coords="b"]::after,
.signature-board[data-coords="b"]::after,
.signature-mini-board[data-coords="b"]::after{content:"h g f e d c b a"}

/* Main game: preserve the 1080 logical board for move math, but display it
   as a centered 1024px physical board so the coordinate rails have air. */
.board{
  --coord-cell:135px;
  --coord-font:14px;
  --coord-rank-offset:27px;
  --coord-file-offset:26px;
  --coord-color:#efb76f;
  --coord-shadow:0 2px 1px rgba(38,16,8,.72);
  left:448px!important;
  top:16px!important;
  transform:scale(.9481481481)!important;
  transform-origin:0 0!important;
}
.move-layer{
  left:448px!important;
  top:16px!important;
  transform:scale(.9481481481)!important;
  transform-origin:0 0!important;
}
.eval-bar{top:16px!important;height:1024px!important}

/* 810px study/training boards. */
.academy-board,.puzzle-board,.learn-board{
  --coord-cell:101.25px;
  --coord-font:11px;
  --coord-rank-offset:24px;
  --coord-file-offset:21px;
}
.academy-board-controls,.learn-board-controls{top:986px!important}
.puzzle-session-stats{top:986px!important}

/* Historical archive board. */
.top100-board{
  --coord-cell:97.5px;
  --coord-font:10.5px;
  --coord-rank-offset:23px;
  --coord-file-offset:20px;
}
.top100-board-controls{top:958px!important}

/* THE MOMENT board. */
.signature-board{
  --coord-cell:95px;
  --coord-font:10.5px;
  --coord-rank-offset:23px;
  --coord-file-offset:20px;
}

/* PARALLEL 64 boards live inside dark cards, so the markings become
   smaller and warm-gold while keeping the exact same official order. */
.signature-mini-board{
  --coord-cell:51.25px;
  --coord-font:7px;
  --coord-rank-offset:13px;
  --coord-file-offset:7px;
  --coord-color:#eeb56e;
  --coord-shadow:0 1px 0 rgba(30,13,7,.72);
}
.signature-mini-board::before{width:10px}
.signature-mini-board::after{height:8px}

/* ============================================================
   CESS! v3.5.4.21 — coordinate legibility + black king optical alignment
   ============================================================ */
/* Coordinates: a restrained one-step increase for better readability without
   changing the board geometry or stealing visual attention from the pieces. */
.board{--coord-font:16px}
.academy-board,.puzzle-board,.learn-board{--coord-font:12.5px}
.top100-board{--coord-font:12px}
.signature-board{--coord-font:12px}
.signature-mini-board{--coord-font:8.25px}

/* The supplied black king artwork sits optically a touch higher than the white
   king. Lower only that artwork, consistently across every board and animation. */
.piece-anchor .piece.piece-k.color-b{
  top:-64.5px!important;
}
.move-ghost.piece-k.color-b,
.capture-ghost.piece-k.color-b,
.drag-ghost.piece-k.color-b{
  top:-64.5px!important;
}
.academy-piece.piece-k.color-b,
.puzzle-piece.piece-k.color-b,
.learn-piece.piece-k.color-b,
.top100-piece.piece-k.color-b,
.signature-piece.piece-k.color-b{
  top:52%!important;
}
.puzzle-move-ghost.piece-k.color-b,
.puzzle-drag-ghost.piece-k.color-b,
.learn-move-ghost.piece-k.color-b,
.learn-drag-ghost.piece-k.color-b,
.signature-drag-ghost.piece-k.color-b{
  transform:translateY(2px)!important;
}

/* ======================================================================
   CESS! v3.5.4.22 — REVIEW TOP-3 CANDIDATES
   Fixed review architecture: Stockfish's three choices live inside the left
   panel without changing its size; detailed reasons open in a focused card.
   ====================================================================== */
.review-panel{
  top:242px!important;
  width:326px!important;
  height:600px!important;
  padding:18px 24px!important;
  grid-template-columns:1fr!important;
  grid-template-rows:64px 34px 258px 58px 68px!important;
  gap:8px!important;
  align-content:start!important;
  overflow:hidden!important;
}
.review-grade{
  width:278px!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  padding:7px 10px!important;
  font-size:24px!important;
}
.review-move{
  width:278px!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  padding:3px 8px!important;
  font-size:14px!important;
}
.review-candidates{
  grid-column:1!important;
  width:278px!important;
  height:258px!important;
  min-height:258px!important;
  max-height:258px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-rows:20px repeat(3,1fr)!important;
  gap:5px!important;
  overflow:hidden!important;
}
.review-candidates-title{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 3px!important;
  color:rgba(243,190,116,.92)!important;
  font:900 10px/1 "Helvetica Neue",Arial,sans-serif!important;
  letter-spacing:1.55px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.review-candidates-title em{
  max-width:118px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:rgba(243,190,116,.47)!important;
  font:800 8px/1 "Helvetica Neue",Arial,sans-serif!important;
  font-style:normal!important;
  letter-spacing:.6px!important;
}
.review-candidate{
  width:278px!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:7px 9px 6px!important;
  border:0!important;
  border-radius:13px!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:66px minmax(0,1fr) 48px!important;
  grid-template-rows:17px 17px minmax(22px,1fr)!important;
  column-gap:6px!important;
  row-gap:1px!important;
  align-items:center!important;
  background:linear-gradient(160deg,rgba(40,24,16,.73),rgba(23,17,13,.72))!important;
  box-shadow:inset 0 0 0 1px rgba(241,181,104,.12)!important;
  color:#efbb78!important;
  text-align:left!important;
  cursor:pointer!important;
  overflow:hidden!important;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease!important;
}
.review-candidate:hover{
  transform:translateY(-1px)!important;
  background:linear-gradient(160deg,rgba(52,30,19,.82),rgba(28,19,14,.80))!important;
  box-shadow:inset 0 0 0 1px rgba(241,181,104,.25),0 5px 12px rgba(28,12,6,.15)!important;
}
.review-candidate.is-best{
  box-shadow:inset 0 0 0 1px rgba(92,188,108,.31)!important;
}
.review-candidate.is-brilliant{
  background:linear-gradient(160deg,rgba(76,47,23,.91),rgba(34,22,14,.90))!important;
  box-shadow:inset 0 0 0 1px rgba(247,197,112,.46),0 0 18px rgba(226,166,79,.08)!important;
}
.review-candidate-rank{
  grid-column:1!important;grid-row:1!important;
  color:rgba(243,190,116,.63)!important;
  font:900 8.7px/1 "Helvetica Neue",Arial,sans-serif!important;
  letter-spacing:.72px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.review-candidate-san{
  grid-column:2!important;grid-row:1/3!important;
  min-width:0!important;
  align-self:center!important;
  color:#f5c37f!important;
  font:900 19px/.95 "Helvetica Neue",Arial,sans-serif!important;
  letter-spacing:-.45px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.review-candidate-eval{
  grid-column:3!important;grid-row:1!important;
  justify-self:end!important;
  color:#f6d39b!important;
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;
}
.review-candidate-tag{
  grid-column:1!important;grid-row:2!important;
  min-width:0!important;
  color:rgba(121,204,134,.82)!important;
  font:900 7.6px/1 "Helvetica Neue",Arial,sans-serif!important;
  letter-spacing:.42px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.review-candidate.is-brilliant .review-candidate-tag{color:#f6c87f!important}
.review-candidate small{
  grid-column:1/-1!important;grid-row:3!important;
  min-width:0!important;
  align-self:start!important;
  color:rgba(238,205,159,.66)!important;
  font:700 8.35px/1.18 "Helvetica Neue",Arial,sans-serif!important;
  letter-spacing:-.04px!important;
  overflow:hidden!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
}
.review-candidate-state{
  grid-row:1/-1!important;
  width:278px!important;
  height:258px!important;
  box-sizing:border-box!important;
  border-radius:15px!important;
  background:rgba(22,17,13,.52)!important;
  box-shadow:inset 0 0 0 1px rgba(241,181,104,.10)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:22px!important;
  text-align:center!important;
  color:rgba(241,181,104,.55)!important;
}
.review-candidate-state b{font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.7px;color:rgba(243,190,116,.88)}
.review-candidate-state span{font:800 10px/1.25 "Helvetica Neue",Arial,sans-serif;letter-spacing:.4px}
.review-candidate-state.is-loading span{animation:reviewCandidatePulse 1s ease-in-out infinite alternate}
@keyframes reviewCandidatePulse{from{opacity:.42}to{opacity:.92}}
.review-nav{
  width:278px!important;
  height:58px!important;
  gap:7px!important;
}
.review-nav button{height:56px!important}
.review-actions{
  grid-column:1!important;
  width:278px!important;
  height:68px!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:7px!important;
  align-items:center!important;
}
.review-actions>.wood-ui-btn-wide{
  width:88px!important;
  min-width:0!important;
  height:68px!important;
  min-height:68px!important;
  max-height:68px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.review-actions>.wood-ui-btn-wide span{
  box-sizing:border-box!important;
  width:100%!important;
  padding:0 8px!important;
  font-size:10.5px!important;
  line-height:1!important;
  letter-spacing:-.05px!important;
  white-space:normal!important;
  overflow:hidden!important;
  text-align:center!important;
}
html[data-lang="ja"] .review-candidate small{font-size:8px!important;line-height:1.2!important}
html[data-lang="es"] .review-candidate-rank,
html[data-lang="it"] .review-candidate-rank,
html[data-lang="fr"] .review-candidate-rank{font-size:8px!important;letter-spacing:.35px!important}

.review-candidate-detail{
  position:absolute!important;
  left:960px!important;
  top:540px!important;
  width:760px!important;
  min-height:470px!important;
  transform:translate(-50%,-50%)!important;
  z-index:4!important;
  box-sizing:border-box!important;
  border-radius:30px!important;
  padding:44px 54px 42px!important;
  background:linear-gradient(155deg,rgba(82,46,27,.985),rgba(43,24,15,.99))!important;
  border:2px solid rgba(241,181,104,.28)!important;
  box-shadow:0 30px 74px rgba(29,12,6,.46),inset 0 0 0 1px rgba(255,220,166,.06)!important;
  color:#efbd7a!important;
  text-align:left!important;
}
.review-candidate-detail.is-best{border-color:rgba(99,190,113,.34)!important}
.review-candidate-detail.is-brilliant{border-color:rgba(248,199,113,.58)!important;box-shadow:0 30px 74px rgba(29,12,6,.46),0 0 34px rgba(222,159,66,.08),inset 0 0 0 1px rgba(255,220,166,.08)!important}
.review-candidate-detail-close{
  position:absolute!important;right:21px!important;top:20px!important;width:46px!important;height:46px!important;border:0!important;border-radius:15px!important;background:rgba(29,17,11,.38)!important;box-shadow:inset 0 0 0 1px rgba(241,181,104,.18)!important;color:#efbd7a!important;font:400 34px/43px "Helvetica Neue",Arial,sans-serif!important
}
.review-candidate-detail-kicker{font:900 11px/1 "Helvetica Neue",Arial,sans-serif!important;letter-spacing:3px!important;color:rgba(241,181,104,.55)!important;margin-bottom:18px!important}
.review-candidate-detail-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:20px!important;border-bottom:1px solid rgba(241,181,104,.13)!important;padding-bottom:18px!important}
.review-candidate-detail-head strong{font:900 54px/.92 "Helvetica Neue",Arial,sans-serif!important;letter-spacing:-2px!important;color:#f4c17b!important}
.review-candidate-detail-head span{font:900 22px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;color:#f5d39c!important;font-variant-numeric:tabular-nums!important}
.review-candidate-detail-tag{display:inline-flex!important;margin:17px 0 21px!important;padding:8px 12px!important;border-radius:11px!important;background:rgba(19,14,10,.28)!important;box-shadow:inset 0 0 0 1px rgba(241,181,104,.14)!important;color:#a8daa9!important;font:900 10px/1 "Helvetica Neue",Arial,sans-serif!important;letter-spacing:1.3px!important}
.review-candidate-detail.is-brilliant .review-candidate-detail-tag{color:#f7cc88!important}
.review-candidate-detail h3{margin:0 0 9px!important;font:900 12px/1 "Helvetica Neue",Arial,sans-serif!important;letter-spacing:2.2px!important;color:rgba(241,181,104,.58)!important}
.review-candidate-detail p{margin:0!important;max-width:630px!important;font:700 18px/1.38 "Helvetica Neue",Arial,sans-serif!important;color:rgba(248,220,181,.88)!important}
.review-candidate-detail-pv{margin-top:24px!important;padding:16px 18px!important;border-radius:14px!important;background:rgba(18,14,11,.31)!important;box-shadow:inset 0 0 0 1px rgba(241,181,104,.11)!important;display:grid!important;gap:8px!important}
.review-candidate-detail-pv b{font:900 9px/1 "Helvetica Neue",Arial,sans-serif!important;letter-spacing:1.8px!important;color:rgba(241,181,104,.48)!important}
.review-candidate-detail-pv span{font:800 16px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;color:#efc48a!important;word-spacing:5px!important}
@media (prefers-reduced-motion:reduce){.review-candidate-state.is-loading span{animation:none!important}.review-candidate{transition:none!important}}

/* ======================================================================
   CESS! v3.5.4.24 — REQUESTED CONTROL / REVIEW CORRECTIONS
   Scoped overrides only: gameplay visibility is intentionally untouched.
   ====================================================================== */
:root{
  --cess-grade-brilliant:#58aaff;
  --cess-grade-best:#27b746;
  --cess-grade-good:#a8dcb2;
  --cess-grade-standard:#efbd79;
  --cess-grade-mistake:#8e302b;
  --cess-grade-blunder:#ff342c;
}

/* Main game controls --------------------------------------------------- */
/* Both resign controls move exactly 4 px to the right. */
.top-resign{left:1583px!important}
.bottom-resign{left:1583px!important}

/* DRAW uses the same compact 72x68 wooden footprint as the “…” tool button.
   Bottom DRAW sits directly above it; the top control mirrors that geometry. */
.top-draw,.bottom-draw{left:1797px!important;width:72px!important;height:68px!important}
.top-draw{top:96px!important;transform:rotate(180deg)!important}
.bottom-draw{top:916px!important}
.top-draw img,.bottom-draw img{width:72px!important;height:68px!important;object-fit:contain!important}

/* LOAD PGN: icon remains on the left, wording is centered in the actual button. */
#toolLoadPgn.cess-icon-tool{--cess-icon-size:28px!important;--cess-icon-left:8px!important;--cess-label-left:0px!important;--cess-label-right:0px!important}
#toolLoadPgn>.cess-icon-label{padding-left:0!important;padding-right:0!important;justify-content:center!important;text-align:center!important}

/* Setup screens ------------------------------------------------------- */
/* START symbols are genuinely ~2x the prior 62px size; labels stay centered. */
#computerStart.cess-icon-start,#twoStart.cess-icon-start{
  --cess-icon-size:124px!important;
  --cess-icon-left:24px!important;
  --cess-label-left:0px!important;
  --cess-label-right:0px!important;
  overflow:visible!important;
}
#computerStart>.cess-icon-label,#twoStart>.cess-icon-label{
  padding-left:0!important;padding-right:0!important;justify-content:center!important;text-align:center!important;
}

/* SAME DEVICE / ONLINE: 2x symbols without pushing the wording off center. */
#setupTwo .two-mode-tab.cess-icon-mode-tab{
  --cess-icon-size:112px!important;
  --cess-icon-left:24px!important;
  --cess-label-left:0px!important;
  --cess-label-right:0px!important;
}
#setupTwo .two-mode-tab>.cess-icon-label{
  padding-left:0!important;padding-right:0!important;justify-content:center!important;text-align:center!important;
}

/* CREATE ROOM / JOIN ROOM: larger symbols, wording centered on the wood. */
#setupTwo.online-mode .online-wood-button.cess-icon-online{
  --cess-icon-size:76px!important;
  --cess-icon-left:18px!important;
  --cess-label-left:0px!important;
  --cess-label-right:0px!important;
}
#setupTwo.online-mode .online-wood-button>.cess-icon-label{
  padding-left:0!important;padding-right:0!important;justify-content:center!important;text-align:center!important;
}

/* Shared non-textured CESS action language ---------------------------- */
.cess-standard-action{
  box-sizing:border-box!important;
  border:1px solid rgba(98,49,25,.20)!important;
  border-radius:18px!important;
  background:rgba(80,43,24,.92)!important;
  box-shadow:0 8px 18px rgba(68,30,11,.13),inset 0 1px 0 rgba(255,221,172,.06)!important;
  color:#efb665!important;
  text-shadow:none!important;
  filter:none!important;
  transition:transform .15s ease,filter .15s ease,border-color .15s ease!important;
}
.cess-standard-action:not(.disabled):hover{filter:brightness(1.07)!important;transform:translateY(-1px)!important}
.cess-standard-action:not(.disabled):active{transform:translateY(1px)!important}

/* Online lobby -------------------------------------------------------- */
#setupTwo.online-lobby-mode .online-lobby-actions{
  left:558px!important;
  top:550px!important;
  width:804px!important;
  height:76px!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:12px!important;
}
#setupTwo.online-lobby-mode .online-lobby-flat{
  position:relative!important;
  width:auto!important;
  height:76px!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
#setupTwo.online-lobby-mode .online-lobby-flat>.online-action-icon{
  position:absolute!important;
  left:14px!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:38px!important;
  height:38px!important;
  object-fit:contain!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
}
#setupTwo.online-lobby-mode .online-lobby-flat>span{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  padding:0 48px!important;
  color:#efb665!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  text-shadow:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
#setupTwo.online-lobby-mode .online-whatsapp-share{border-color:rgba(69,166,90,.34)!important}
#setupTwo.online-lobby-mode .online-cancel-room{
  left:828px!important;
  top:836px!important;
  width:264px!important;
  height:74px!important;
}
#setupTwo.online-lobby-mode .online-cancel-room>.online-action-icon{left:18px!important;width:36px!important;height:36px!important}
#setupTwo.online-lobby-mode .online-lobby-status{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  overflow:visible!important;
}
#setupTwo.online-lobby-mode .online-lobby-status::before{display:none!important}
.online-wait-dots{display:inline-flex;align-items:center;gap:5px;height:16px}
.online-wait-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#2fb84c;box-shadow:0 0 8px rgba(47,184,76,.42);animation:cessLobbyDot 1.05s ease-in-out infinite}
.online-wait-dots i:nth-child(2){animation-delay:.14s}.online-wait-dots i:nth-child(3){animation-delay:.28s}
@keyframes cessLobbyDot{0%,70%,100%{opacity:.28;transform:translateY(0) scale(.82)}35%{opacity:1;transform:translateY(-3px) scale(1.08)}}

/* Puzzles: no textured wooden background; centered copy, balanced icons. */
.puzzle-actions .cess-standard-action{
  position:relative!important;
  width:220px!important;
  height:96px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  overflow:hidden!important;
}
.puzzle-actions .cess-standard-action>img{display:none!important}
.puzzle-actions .cess-standard-action>.cess-icon-label,
.puzzle-actions .cess-standard-action>span{
  box-sizing:border-box!important;
  width:100%!important;
  padding:0 54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  color:#efb665!important;
  font-size:18px!important;
  line-height:1!important;
  text-shadow:none!important;
}
#puzzleHint.cess-icon-puzzle-action,#puzzleSolution.cess-icon-puzzle-action,#puzzleReview.cess-icon-puzzle-action{
  --cess-icon-size:44px!important;
  --cess-icon-left:14px!important;
  --cess-label-left:0px!important;
  --cess-label-right:0px!important;
}
#puzzleNext>span{padding:0 58px 0 48px!important}
#puzzleNext .puzzle-next-arrow{right:17px!important;top:50%!important;transform:translateY(-53%)!important;font-size:45px!important;color:#88d197!important}

/* Learn Chess: labels are optically centered; arrows navigate the visible lesson list. */
.learn-reset.cess-icon-button,.learn-demo.cess-icon-button{
  --cess-icon-size:38px!important;
  --cess-icon-left:10px!important;
  --cess-label-left:0px!important;
  --cess-label-right:0px!important;
}
.learn-reset>.cess-icon-label,.learn-demo>.cess-icon-label{
  padding-left:0!important;padding-right:0!important;justify-content:center!important;text-align:center!important;
}
.learn-nav.disabled{opacity:.30!important;pointer-events:none!important}

/* Parallel 64: title owns the true horizontal center; icon sits safely to its left. */
.signature-view.mode-parallel .signature-title-line{
  position:relative!important;
  width:100%!important;
  height:62px!important;
  display:block!important;
  overflow:visible!important;
}
.signature-view.mode-parallel .signature-title-line .signature-title{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.signature-view.mode-parallel .signature-heading-icon{
  position:absolute!important;
  left:calc(50% - 250px)!important;
  top:50%!important;
  width:auto!important;
  height:100px!important;
  max-width:140px!important;
  margin:0!important;
  transform:translate(-50%,-50%)!important;
}

/* End-game review ----------------------------------------------------- */
/* CRITICAL: the review stays hidden during live play. It is visible ONLY
   after enterReview() adds .review-mode. */
.review-panel{
  display:none!important;
  box-sizing:border-box!important;
  left:6px!important;
  top:130px!important;
  width:350px!important;
  height:820px!important;
  padding:20px 22px 22px!important;
  grid-template-columns:1fr!important;
  grid-template-rows:64px 40px 430px 60px 68px!important;
  gap:10px!important;
  align-content:start!important;
  overflow:hidden!important;
  border-radius:28px!important;
  border:2px solid rgba(241,181,104,.19)!important;
  background:linear-gradient(160deg,rgba(65,38,24,.988),rgba(29,21,15,.994))!important;
  box-shadow:0 22px 42px rgba(38,17,8,.30),inset 0 1px 0 rgba(255,225,178,.06)!important;
  filter:none!important;
}
.review-mode .review-panel{display:grid!important}
.review-close{
  position:absolute!important;
  right:12px!important;
  top:12px!important;
  width:40px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  border:1px solid rgba(241,181,104,.18)!important;
  border-radius:13px!important;
  background:rgba(25,18,13,.52)!important;
  box-shadow:none!important;
  color:#efbd79!important;
  font:400 30px/38px "Helvetica Neue",Arial,sans-serif!important;
  z-index:5!important;
}
.review-grade,.review-move{box-sizing:border-box!important;width:306px!important;max-width:306px!important;margin:0!important}
.review-grade{height:64px!important;min-height:64px!important;max-height:64px!important;padding:7px 42px 7px 8px!important;font-size:30px!important;line-height:1.02!important}
.review-move{height:40px!important;min-height:40px!important;max-height:40px!important;padding:4px 8px!important;font-size:19px!important;line-height:1!important}
.review-candidates{
  width:306px!important;
  height:430px!important;
  min-height:430px!important;
  max-height:430px!important;
  grid-template-rows:28px repeat(3,1fr)!important;
  gap:8px!important;
}
.review-candidates-title{padding:0 4px!important;font-size:11px!important;letter-spacing:1.5px!important}
.review-candidates-title em{max-width:160px!important;font-size:9px!important}
.review-candidate{
  width:306px!important;
  padding:10px 11px 9px!important;
  border-radius:16px!important;
  grid-template-columns:70px minmax(0,1fr) 54px!important;
  grid-template-rows:23px 21px minmax(40px,1fr)!important;
  column-gap:8px!important;
  row-gap:2px!important;
}
.review-candidate-rank{font-size:10px!important;letter-spacing:.6px!important}
.review-candidate-san{font-size:23px!important;line-height:1!important}
.review-candidate-eval{font-size:12px!important}
.review-candidate-tag{font-size:9px!important}
.review-candidate small{font-size:11px!important;line-height:1.25!important;-webkit-line-clamp:3!important;color:rgba(244,216,177,.78)!important}
.review-candidate-state{width:306px!important;height:430px!important;font-size:13px!important}
.review-candidate-state b{font-size:12px!important}.review-candidate-state span{font-size:12px!important;line-height:1.35!important}
.review-nav{width:306px!important;height:60px!important;grid-template-columns:repeat(4,1fr)!important;gap:9px!important}
.review-nav .wood-ui-btn{width:auto!important;height:58px!important}
.review-actions{
  width:306px!important;
  height:68px!important;
  display:grid!important;
  grid-template-columns:repeat(2,147px)!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
}
.review-actions>.wood-ui-btn-wide{grid-column:auto!important;position:relative!important;width:147px!important;height:68px!important;min-height:68px!important;max-height:68px!important;margin:0!important}
.review-actions>.wood-ui-btn-wide span{font-size:14px!important;padding:0 10px!important;text-align:center!important;white-space:normal!important}

/* One semantic color system on the board, review panel and explanation card. */
.move-quality-badge.grade-brilliant{border-color:var(--cess-grade-brilliant)!important;color:#a9d4ff!important;box-shadow:0 5px 11px rgba(38,103,169,.28),0 0 0 3px rgba(88,170,255,.10)!important}
.move-quality-badge.grade-best{border-color:var(--cess-grade-best)!important;color:#8be29c!important}
.move-quality-badge.grade-good{border-color:var(--cess-grade-good)!important;color:#caefd1!important}
.move-quality-badge.grade-inaccuracy{border-color:rgba(239,189,121,.78)!important;color:var(--cess-grade-standard)!important}
.move-quality-badge.grade-mistake{border-color:var(--cess-grade-mistake)!important;color:#ca6f67!important}
.move-quality-badge.grade-blunder{border-color:var(--cess-grade-blunder)!important;color:#ff817b!important;box-shadow:0 5px 11px rgba(160,25,18,.26),0 0 0 3px rgba(255,52,44,.10)!important}
.review-grade.grade-brilliant,.review-move.grade-brilliant{color:var(--cess-grade-brilliant)!important}
.review-grade.grade-best,.review-move.grade-best{color:var(--cess-grade-best)!important}
.review-grade.grade-good,.review-move.grade-good{color:var(--cess-grade-good)!important}
.review-grade.grade-inaccuracy,.review-move.grade-inaccuracy{color:var(--cess-grade-standard)!important}
.review-grade.grade-mistake,.review-move.grade-mistake{color:var(--cess-grade-mistake)!important}
.review-grade.grade-blunder,.review-move.grade-blunder{color:var(--cess-grade-blunder)!important}
.move-quality-card.grade-brilliant{border-color:rgba(88,170,255,.58)!important}.move-quality-card.grade-brilliant .move-quality-symbol,.move-quality-card.grade-brilliant h2,.move-quality-card.grade-brilliant .move-quality-san{color:var(--cess-grade-brilliant)!important}
.move-quality-card.grade-best{border-color:rgba(39,183,70,.46)!important}.move-quality-card.grade-best .move-quality-symbol,.move-quality-card.grade-best h2,.move-quality-card.grade-best .move-quality-san{color:var(--cess-grade-best)!important}
.move-quality-card.grade-good{border-color:rgba(168,220,178,.48)!important}.move-quality-card.grade-good .move-quality-symbol,.move-quality-card.grade-good h2,.move-quality-card.grade-good .move-quality-san{color:var(--cess-grade-good)!important}
.move-quality-card.grade-inaccuracy .move-quality-symbol,.move-quality-card.grade-inaccuracy h2,.move-quality-card.grade-inaccuracy .move-quality-san{color:var(--cess-grade-standard)!important}
.move-quality-card.grade-mistake{border-color:rgba(142,48,43,.52)!important}.move-quality-card.grade-mistake .move-quality-symbol,.move-quality-card.grade-mistake h2,.move-quality-card.grade-mistake .move-quality-san{color:#b8524b!important}
.move-quality-card.grade-blunder{border-color:rgba(255,52,44,.60)!important}.move-quality-card.grade-blunder .move-quality-symbol,.move-quality-card.grade-blunder h2,.move-quality-card.grade-blunder .move-quality-san{color:var(--cess-grade-blunder)!important}

@media (prefers-reduced-motion:reduce){.online-wait-dots i{animation:none!important;opacity:.8!important;transform:none!important}}

/* ======================================================================
   CESS! v3.5.4.25 - COMPLETE FLAT CONTROL SYSTEM
   Wooden texture stays on windows/panels only. Every interactive control
   uses one flat CESS surface language with semantic symbols.
   ====================================================================== */
:root{
  --cess-flat-bg:rgba(80,43,24,.92);
  --cess-flat-bg-hover:rgba(88,48,27,.96);
  --cess-flat-bg-active:rgba(69,37,22,.96);
  --cess-flat-border:rgba(98,49,25,.20);
  --cess-flat-border-strong:rgba(126,70,38,.30);
  --cess-flat-gold:#efb665;
  --cess-flat-green:#69c77d;
  --cess-flat-shadow:0 8px 18px rgba(68,30,11,.13),inset 0 1px 0 rgba(255,221,172,.06);
}

/* One physical button surface. Dimensions/positioning remain owned by each view. */
.language-choice,
.home-button,
.academy-wood-btn,
.wood-ui-btn,
.online-wood-button,
.online-mini-wood,
.setup-start,
.time-choice,
.time-rail-arrow,
.online-time-choice,
.setup-close-button,
.two-mode-tab,
.result-actions button,
.result-signature button,
.signature-flat-btn,
.puzzle-level-choice,
.puzzle-level-close,
.game-tools-button,
.draw-offer-choice,
.cess-confirm-actions button,
.wood-file-button{
  box-sizing:border-box!important;
  border:1px solid var(--cess-flat-border)!important;
  background:var(--cess-flat-bg)!important;
  background-image:none!important;
  color:var(--cess-flat-gold)!important;
  text-shadow:none!important;
  box-shadow:var(--cess-flat-shadow)!important;
  filter:none!important;
}
.language-choice:hover,
.home-button:hover,
.academy-wood-btn:not(.disabled):hover,
.wood-ui-btn:not(.disabled):hover,
.online-wood-button:hover,
.online-mini-wood:hover,
.setup-start:hover,
.time-choice:not(:disabled):hover,
.time-rail-arrow:not(.disabled):hover,
.online-time-choice:hover,
.setup-close-button:hover,
.two-mode-tab:hover,
.result-actions button:hover,
.result-signature button:hover,
.signature-flat-btn:not(:disabled):hover,
.puzzle-level-choice:hover,
.puzzle-level-close:hover,
.game-tools-button:hover,
.draw-offer-choice:hover,
.cess-confirm-actions button:hover,
.wood-file-button:hover{
  background:var(--cess-flat-bg-hover)!important;
  border-color:var(--cess-flat-border-strong)!important;
  filter:none!important;
}
.language-choice:active,
.home-button:active,
.academy-wood-btn:active,
.wood-ui-btn:active,
.online-wood-button:active,
.online-mini-wood:active,
.setup-start:active,
.time-choice:active,
.time-rail-arrow:active,
.online-time-choice:active,
.setup-close-button:active,
.two-mode-tab:active,
.result-actions button:active,
.result-signature button:active,
.signature-flat-btn:active,
.puzzle-level-choice:active,
.puzzle-level-close:active,
.game-tools-button:active,
.draw-offer-choice:active,
.cess-confirm-actions button:active{
  background:var(--cess-flat-bg-active)!important;
  transform:translateY(1px)!important;
  filter:none!important;
}

/* Remove every legacy button texture layer without touching wooden windows. */
.language-choice>img,
.home-button>.home-button-bg,
.academy-wood-btn>img,
.wood-ui-btn>.wood-ui-bg,
.online-wood-button>img:not(.online-action-icon),
.setup-start>img,
.time-choice>img,
.time-rail-arrow>img,
.online-time-choice>img,
.setup-close-button>img,
.wood-choice>.wood-base,
.online-choice>.wood-base{display:none!important}
.result-actions button,.game-tools-button,.draw-offer-choice,.puzzle-level-choice,.puzzle-level-close{background-image:none!important}

/* Typography follows the puzzle buttons: crisp, centered, no fake wood shadow. */
.language-choice span,
.home-button span,
.academy-wood-btn span,
.wood-ui-btn span,
.online-wood-button span,
.online-mini-wood span,
.setup-start span,
.time-choice span,
.time-rail-arrow span,
.online-time-choice span,
.two-mode-tab span,
.result-actions button,
.result-signature button,
.signature-flat-btn,
.draw-offer-choice,
.cess-confirm-actions button{
  color:var(--cess-flat-gold)!important;
  text-shadow:none!important;
}

/* Language gate: one small globe, wording remains geometrically centered. */
.language-choice{border-radius:24px!important;overflow:hidden!important}
.language-choice::before{
  content:"";position:absolute;left:24px;top:50%;width:38px;height:38px;transform:translateY(-50%);
  background:url('assets/icon-flat-globe.svg') center/contain no-repeat;pointer-events:none;z-index:4;
}
.language-choice span{left:70px!important;right:70px!important;max-width:none!important}
.language-choice.selected{border-color:rgba(105,199,125,.56)!important;box-shadow:var(--cess-flat-shadow),inset 0 0 0 1px rgba(105,199,125,.20)!important}
.language-choice.selected::after{background:var(--cess-flat-green)!important;box-shadow:none!important}

/* Home: preserve the authored CESS menu symbols, replace only the wood slab. */
.home-button{border-radius:22px!important;overflow:visible!important}
.home-button span{letter-spacing:-1.3px!important}
.home-menu-symbol{z-index:5!important;filter:drop-shadow(0 5px 8px rgba(30,15,8,.16))!important}

/* Study/archive/opening/learn controls. */
.academy-wood-btn{border-radius:16px!important;overflow:hidden!important}
.academy-wood-btn.cess-icon-button::before,.wood-ui-btn.cess-icon-button::before{filter:none!important}
#academyBack,#puzzleBack,#learnBack,#top100Back,#signatureBack,
#academyPrev,#learnPrev,#top100Prev,#top100First,#top100Next,#top100Last,
#reviewFirst,#reviewPrev,#reviewNext,#reviewLast{
  --cess-icon-size:32px!important;--cess-icon-left:50%!important;--cess-label-left:0px!important;--cess-label-right:0px!important;
}
#academyBack::before,#puzzleBack::before,#learnBack::before,#top100Back::before,#signatureBack::before,
#academyPrev::before,#learnPrev::before,#top100Prev::before,#top100First::before,#top100Next::before,#top100Last::before,
#reviewFirst::before,#reviewPrev::before,#reviewNext::before,#reviewLast::before{margin-left:-16px!important}
#academyBack>.cess-icon-label,#puzzleBack>.cess-icon-label,#learnBack>.cess-icon-label,#top100Back>.cess-icon-label,#signatureBack>.cess-icon-label,
#academyPrev>.cess-icon-label,#learnPrev>.cess-icon-label,#top100Prev>.cess-icon-label,#top100First>.cess-icon-label,#top100Next>.cess-icon-label,#top100Last>.cess-icon-label,
#reviewFirst>.cess-icon-label,#reviewPrev>.cess-icon-label,#reviewNext>.cess-icon-label,#reviewLast>.cess-icon-label{opacity:0!important}
#academyPlay,#academyFlip,#top100Play,#top100Flip,#top100Analyze,#learnReset,#learnDemo,
#toolUndo,#toolHint,#toolReview,#toolCopyPgn,#toolSavePgn,#toolLoadPgn,#reviewCopy,#reviewSave,#pgnLoadGo,#pgnCancel,.wood-file-button{
  --cess-icon-size:30px!important;--cess-icon-left:10px!important;--cess-label-left:48px!important;--cess-label-right:48px!important;
}

/* Game tools and review use the same flat family. */
.wood-ui-btn{border-radius:15px!important;filter:none!important}
.wood-ui-btn.active{border-color:rgba(105,199,125,.52)!important;box-shadow:var(--cess-flat-shadow),inset 0 0 0 1px rgba(105,199,125,.18)!important}
.wood-ui-btn.active::after{display:none!important}
.game-tools-button{border-radius:17px!important;opacity:.96!important;letter-spacing:4px!important}
.tools-panel-title{background:none!important;filter:none!important;text-shadow:none!important;color:rgba(239,182,101,.70)!important}
.review-nav .wood-ui-btn,.review-actions>.wood-ui-btn-wide{border-radius:15px!important}
.review-actions>.wood-ui-btn-wide{background:var(--cess-flat-bg)!important}

/* Setup cards: pieces remain, their wooden bases disappear. */
.wood-choice,.online-choice{
  box-sizing:border-box!important;border:1px solid rgba(239,182,101,.18)!important;border-radius:20px!important;
  background:rgba(54,31,20,.70)!important;box-shadow:0 7px 16px rgba(30,14,7,.12),inset 0 1px 0 rgba(255,224,178,.035)!important;
  filter:none!important;overflow:hidden!important;
}
.wood-choice:hover,.online-choice:hover{background:rgba(65,37,23,.82)!important;border-color:rgba(239,182,101,.30)!important}
.wood-choice::after,.online-choice::after{inset:0!important;border:2px solid transparent!important;border-radius:19px!important;box-shadow:none!important}
.wood-choice.selected::after,.online-choice.selected::after{border-color:var(--cess-flat-green)!important;box-shadow:inset 0 0 0 1px rgba(105,199,125,.18)!important}

/* Time controls: no wooden tiles. Time itself is the hero; selected is green. */
.time-choice,.online-time-choice{border-radius:18px!important;overflow:hidden!important}
.time-choice span,.online-time-choice span{letter-spacing:-.8px!important;text-shadow:none!important}
.time-choice::after,.online-time-choice::after{inset:0!important;border:2px solid transparent!important;border-radius:17px!important;box-shadow:none!important}
.time-choice.selected,.online-time-choice.selected{border-color:rgba(105,199,125,.48)!important;box-shadow:var(--cess-flat-shadow),inset 0 0 0 1px rgba(105,199,125,.17)!important}
.time-choice.selected::after,.online-time-choice.selected::after{border-color:var(--cess-flat-green)!important}
.time-rail-arrow{border-radius:17px!important;font-size:0!important}
.time-rail-arrow span{font-size:0!important}
.time-rail-arrow::before{content:"";position:absolute;inset:15px;background:center/contain no-repeat;pointer-events:none}
.time-rail-arrow.two-time-prev::before,.time-rail-arrow.computer-time-prev::before{background-image:url('assets/icon-flat-back.svg')}
.time-rail-arrow.two-time-next::before,.time-rail-arrow.computer-time-next::before{background-image:url('assets/icon-flat-next.svg')}

/* Start, local/online and online room actions: flat, icons stay large, copy centered. */
.setup-start{border-radius:23px!important;overflow:hidden!important}
.two-mode-tab{border-radius:16px!important}
.two-mode-tab.selected{border-color:rgba(105,199,125,.52)!important;box-shadow:var(--cess-flat-shadow),inset 0 0 0 1px rgba(105,199,125,.18)!important}
.two-mode-tab::after{display:none!important}
.online-wood-button{border-radius:18px!important;overflow:hidden!important}
.online-mini-wood{border-radius:18px!important}
#setupTwo.online-lobby-mode .online-lobby-flat{background:var(--cess-flat-bg)!important;border:1px solid var(--cess-flat-border)!important;box-shadow:var(--cess-flat-shadow)!important}
#setupTwo.online-lobby-mode .online-lobby-flat>.online-action-icon{filter:none!important}

/* Setup close and puzzle-level close are now true flat close buttons. */
.setup-close-button,.puzzle-level-close{border-radius:17px!important}
.setup-close-button>span,.puzzle-level-close>span{font-size:0!important}
.setup-close-button::before,.puzzle-level-close::before{
  content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);
  background:url('assets/icon-flat-close.svg') center/contain no-repeat;pointer-events:none;
}

/* Puzzle level chooser cards are flat too; the difficulty icons remain intact. */
.puzzle-level-choice{border-radius:21px!important}
.puzzle-level-choice.is-current{border-color:rgba(105,199,125,.50)!important;box-shadow:var(--cess-flat-shadow),inset 0 0 0 1px rgba(105,199,125,.16)!important}
.puzzle-level-choice.cess-icon-puzzle::before{filter:none!important}

/* Main board DRAW/RESIGN: same flat footprint, custom line icons, no wood asset. */
.game-action{box-sizing:border-box!important;border:1px solid var(--cess-flat-border)!important;border-radius:17px!important;background:var(--cess-flat-bg)!important;box-shadow:var(--cess-flat-shadow)!important;filter:none!important;overflow:hidden!important}
.game-action>img{display:none!important}
.game-action::before{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;transform:translate(-50%,-50%);background:center/contain no-repeat;pointer-events:none}
.top-draw::before,.bottom-draw::before{background-image:url('assets/icon-flat-draw.svg')}
.top-resign::before,.bottom-resign::before{background-image:url('assets/icon-flat-resign.svg')}
.game-action:hover{background:var(--cess-flat-bg-hover)!important;border-color:var(--cess-flat-border-strong)!important}
.top-draw::before,.top-resign::before{transform:translate(-50%,-50%) rotate(180deg)!important}

/* Result buttons no longer use the old button6 texture. */
.result-actions button,.result-signature button{border-radius:18px!important;background:var(--cess-flat-bg)!important;background-image:none!important;text-shadow:none!important;filter:none!important}
.result-signature button:nth-child(2){border-color:rgba(105,199,125,.40)!important;box-shadow:var(--cess-flat-shadow),inset 0 0 0 1px rgba(105,199,125,.13)!important}
.signature-flat-btn{background:var(--cess-flat-bg)!important}
.signature-accent-btn{border-color:rgba(105,199,125,.44)!important;box-shadow:var(--cess-flat-shadow),inset 0 0 0 1px rgba(105,199,125,.13)!important}

/* PGN modal: wooden card remains a window; every action on it is flat. */
.pgn-loader-actions .wood-ui-btn,.wood-file-button{background:var(--cess-flat-bg)!important;border-color:var(--cess-flat-border)!important;box-shadow:var(--cess-flat-shadow)!important}

/* Draw offer redesign: one wooden message window + two clean flat decisions. */
.draw-offer-screen{width:1110px!important;height:600px!important}
.draw-offer-main{
  left:22px!important;top:52px!important;width:650px!important;height:496px!important;
  padding:132px 68px 52px!important;justify-content:flex-start!important;gap:18px!important;
  overflow:hidden!important;
}
.draw-offer-main::before{
  content:"";position:absolute;left:50%;top:47px;width:76px;height:76px;transform:translateX(-50%);
  background:url('assets/icon-flat-draw-offer.svg') center/contain no-repeat;pointer-events:none;filter:none;
}
.draw-offer-main h2{
  width:100%!important;max-height:150px!important;margin:0!important;font-size:36px!important;line-height:1.04!important;
  letter-spacing:-.6px!important;overflow:hidden!important;overflow-wrap:anywhere!important;text-wrap:balance;
}
.draw-offer-main p{
  width:100%!important;max-height:108px!important;margin:0!important;font-size:25px!important;line-height:1.13!important;
  letter-spacing:-.25px!important;overflow:hidden!important;overflow-wrap:anywhere!important;text-wrap:balance;
  color:rgba(244,207,158,.82)!important;
}
.draw-offer-choice{
  left:716px!important;width:360px!important;height:134px!important;padding:0 72px 0 90px!important;
  border-radius:22px!important;font-size:25px!important;line-height:1.06!important;letter-spacing:-.3px!important;
  overflow:hidden!important;white-space:normal!important;overflow-wrap:anywhere!important;
  display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
}
.draw-accept{top:136px!important;border-color:rgba(105,199,125,.48)!important}
.draw-decline{top:330px!important}
.draw-offer-choice::before{content:"";position:absolute;left:24px;top:50%;width:48px;height:48px;transform:translateY(-50%);background:center/contain no-repeat;pointer-events:none}
.draw-accept::before{background-image:url('assets/icon-flat-check.svg')}
.draw-decline::before{background-image:url('assets/icon-flat-close.svg')}

/* Resign confirm actions are flat too; the wooden confirm window remains. */
.cess-confirm-actions button{border-radius:18px!important;background:var(--cess-flat-bg)!important;text-shadow:none!important}
.cess-confirm-actions button.cess-icon-button::before{filter:none!important}

/* Context icons should be line-art clean, not floating wood emblems. */
.cess-icon-button::before{filter:none!important}

@media (prefers-reduced-motion:reduce){
 .language-choice,.home-button,.academy-wood-btn,.wood-ui-btn,.online-wood-button,.online-mini-wood,.setup-start,.time-choice,.time-rail-arrow,.online-time-choice,.setup-close-button,.two-mode-tab,.result-actions button,.result-signature button,.signature-flat-btn,.puzzle-level-choice,.puzzle-level-close,.game-tools-button,.draw-offer-choice,.cess-confirm-actions button{transition:none!important}
}

/* v3.5.4.25 final conflict guards */
.top-draw::before,.top-resign::before{transform:translate(-50%,-50%)!important}
.difficulty-label{
  background:rgba(54,31,20,.78)!important;background-image:none!important;
  border:1px solid rgba(239,182,101,.16)!important;border-radius:18px!important;
  box-shadow:0 7px 16px rgba(30,14,7,.10),inset 0 1px 0 rgba(255,224,178,.035)!important;
  filter:none!important;text-shadow:none!important;
}
.result-back{
  box-sizing:border-box!important;border:1px solid var(--cess-flat-border)!important;border-radius:22px!important;
  background:var(--cess-flat-bg)!important;background-image:none!important;box-shadow:var(--cess-flat-shadow)!important;
  color:var(--cess-flat-gold)!important;text-shadow:none!important;filter:none!important;
}
/* v3.5.4.25 — no decorative wood outside actual window surfaces. */
.tools-panel-title{
  background:rgba(49,27,18,.74)!important;
  background-image:none!important;
  border:1px solid rgba(98,49,25,.18)!important;
  border-radius:15px!important;
  box-shadow:inset 0 1px 0 rgba(255,221,172,.045)!important;
  filter:none!important;
  text-shadow:none!important;
}

/* ======================================================================
   CESS! v3.5.4.26 — GREEN-FILL ROLLOVER + CONTENT-SIZED HOME + SAFE ICON LANES
   Green is a fill state, never an outline. Brown controls stay legible on
   walnut windows via one restrained light-brown hairline.
   ====================================================================== */
:root{
  --cess-flat-bg:rgba(80,43,24,.94);
  --cess-flat-bg-hover:rgba(44,132,62,.96);
  --cess-flat-bg-active:rgba(34,108,49,.98);
  --cess-flat-selected:rgba(42,126,59,.96);
  --cess-flat-border:rgba(222,178,126,.46);
  --cess-flat-border-strong:rgba(232,192,143,.68);
  --cess-flat-gold:#f1bc76;
  --cess-flat-green:#2c843e;
  --cess-flat-green-text:#f8d8a8;
  --cess-flat-shadow:0 8px 18px rgba(61,27,10,.16),inset 0 1px 0 rgba(255,225,181,.08);
}

/* Brown buttons get a visible, elegant hairline on wooden windows. */
.language-choice,
.home-button,
.academy-wood-btn,
.wood-ui-btn,
.online-wood-button,
.online-mini-wood,
.setup-start,
.time-choice,
.time-rail-arrow,
.online-time-choice,
.setup-close-button,
.two-mode-tab,
.result-actions button,
.result-signature button,
.signature-flat-btn,
.puzzle-level-choice,
.puzzle-level-close,
.game-tools-button,
.draw-offer-choice,
.cess-confirm-actions button,
.wood-file-button,
.game-action,
.result-back,
.cess-standard-action{
  border:1px solid var(--cess-flat-border)!important;
}

/* ROLLOVER: no green perimeter. The surface itself turns green. */
@media (hover:hover) and (pointer:fine){
  .language-choice:hover,
  .home-button:hover,
  .academy-wood-btn:not(.disabled):hover,
  .wood-ui-btn:not(.disabled):hover,
  .online-wood-button:hover,
  .online-mini-wood:hover,
  .setup-start:hover,
  .time-choice:not(:disabled):hover,
  .time-rail-arrow:not(.disabled):hover,
  .online-time-choice:hover,
  .setup-close-button:hover,
  .two-mode-tab:hover,
  .result-actions button:hover,
  .result-signature button:hover,
  .signature-flat-btn:not(:disabled):hover,
  .puzzle-level-choice:hover,
  .puzzle-level-close:hover,
  .game-tools-button:hover,
  .draw-offer-choice:hover,
  .cess-confirm-actions button:hover,
  .wood-file-button:hover,
  .game-action:hover,
  .result-back:hover,
  .cess-standard-action:not(.disabled):hover{
    background:var(--cess-flat-bg-hover)!important;
    border-color:var(--cess-flat-border-strong)!important;
    color:var(--cess-flat-green-text)!important;
    box-shadow:var(--cess-flat-shadow)!important;
    filter:none!important;
  }
  .home-button:hover{scale:1.018!important}
}

/* Pressed controls stay in the same green family, again with a brown outline. */
.language-choice:active,
.home-button:active,
.academy-wood-btn:active,
.wood-ui-btn:active,
.online-wood-button:active,
.online-mini-wood:active,
.setup-start:active,
.time-choice:active,
.time-rail-arrow:active,
.online-time-choice:active,
.setup-close-button:active,
.two-mode-tab:active,
.result-actions button:active,
.result-signature button:active,
.signature-flat-btn:active,
.puzzle-level-choice:active,
.puzzle-level-close:active,
.game-tools-button:active,
.draw-offer-choice:active,
.cess-confirm-actions button:active,
.game-action:active,
.result-back:active,
.cess-standard-action:active{
  background:var(--cess-flat-bg-active)!important;
  border-color:var(--cess-flat-border-strong)!important;
  color:var(--cess-flat-green-text)!important;
  box-shadow:var(--cess-flat-shadow)!important;
  filter:none!important;
}
.home-button:active{transform:translate(-50%,1px)!important}

/* HIGHLIGHT / SELECTED: green fill, never a green border/glow. */
.language-choice.selected,
.wood-ui-btn.active,
.time-choice.selected,
.online-time-choice.selected,
.two-mode-tab.selected,
.puzzle-level-choice.is-current,
.signature-accent-btn,
.result-signature button:nth-child(2),
.top100-analyze.active{
  background:var(--cess-flat-selected)!important;
  border-color:var(--cess-flat-border-strong)!important;
  color:var(--cess-flat-green-text)!important;
  box-shadow:var(--cess-flat-shadow)!important;
  filter:none!important;
}
.language-choice.selected::after,
.time-choice.selected::after,
.online-time-choice.selected::after,
.two-mode-tab.selected::after,
.puzzle-level-choice.is-current::after,
.wood-ui-btn.active::after{display:none!important;border-color:transparent!important;box-shadow:none!important}

/* Piece/side cards use the same fill logic instead of an outlined selection. */
.wood-choice.selected,.online-choice.selected{
  background:var(--cess-flat-selected)!important;
  border-color:var(--cess-flat-border-strong)!important;
  box-shadow:0 7px 16px rgba(30,14,7,.13),inset 0 1px 0 rgba(255,226,182,.08)!important;
}
.wood-choice.selected::after,.online-choice.selected::after{border-color:transparent!important;box-shadow:none!important}
@media (hover:hover) and (pointer:fine){
  .wood-choice:hover,.online-choice:hover{
    background:var(--cess-flat-bg-hover)!important;
    border-color:var(--cess-flat-border-strong)!important;
  }
}

/* Tabs/list selections follow the same rule: green surface + brown hairline. */
.academy-family-tab.active,
.academy-list-item.active,
.learn-category-tab.active,
.learn-list-item.active,
.top100-era-tabs button.active,
.top100-game-item.active{
  background:rgba(44,132,62,.90)!important;
  border-color:var(--cess-flat-border-strong)!important;
  color:var(--cess-flat-green-text)!important;
  box-shadow:none!important;
}
@media (hover:hover) and (pointer:fine){
  .academy-family-tab:hover,.academy-list-item:hover,
  .learn-category-tab:hover,.learn-list-item:hover,
  .top100-era-tabs button:hover,.top100-game-item:hover{
    background:rgba(44,132,62,.82)!important;
    border-color:var(--cess-flat-border-strong)!important;
  }
}
.top100-move-list button.current{
  background:rgba(44,132,62,.82)!important;
  box-shadow:none!important;
  color:var(--cess-flat-green-text)!important;
}

/* HOME: buttons size themselves from the actual localized copy. The handcrafted
   supplied symbols remain untouched and stay attached to each button edge. */
.home-button{
  left:50%!important;
  width:auto!important;
  min-width:330px!important;
  max-width:760px!important;
  height:80px!important;
  padding:0 58px!important;
  transform:translateX(-50%)!important;
  border-color:var(--cess-flat-border)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.home-button span,
html[data-lang="en"] .home-button span,
html[data-lang="tr"] .home-button span,
html[data-lang="es"] .home-button span,
html[data-lang="ja"] .home-button span,
html[data-lang="it"] .home-button span,
html[data-lang="fr"] .home-button span{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  display:block!important;
  padding:0!important;
  max-width:640px!important;
  font-size:27px!important;
  line-height:1!important;
  letter-spacing:-.45px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
html[data-lang="ja"] .home-button span{font-size:25px!important;letter-spacing:0!important}
.home-menu-symbol-1,.home-menu-symbol-3,.home-menu-symbol-5,.home-menu-symbol-7{right:auto!important}
.home-menu-symbol-1{left:-92px!important}.home-menu-symbol-3{left:-96px!important}.home-menu-symbol-5{left:-68px!important}.home-menu-symbol-7{left:-104px!important}
.home-menu-symbol-2,.home-menu-symbol-4,.home-menu-symbol-6{left:auto!important}
.home-menu-symbol-2{right:-92px!important}.home-menu-symbol-4{right:-93px!important}.home-menu-symbol-6{right:-92px!important}

/* The supplied handcrafted symbols are preferred wherever one exists. They get
   a tiny lift on the flat surface; SVG line art remains the fallback. */
.cess-icon-button.cess-supplied-symbol::before{
  filter:brightness(1.075) drop-shadow(0 3px 3px rgba(35,15,6,.20))!important;
}
@media (hover:hover) and (pointer:fine){
  .cess-icon-button.cess-supplied-symbol:hover::before{
    filter:brightness(1.10) drop-shadow(0 3px 3px rgba(35,15,6,.18))!important;
  }
}
.language-choice::before{
  background-image:url('assets/but13.png')!important;
  width:46px!important;height:46px!important;left:20px!important;
  filter:brightness(1.06) drop-shadow(0 3px 3px rgba(35,15,6,.18));
}
.language-choice span{left:78px!important;right:78px!important}

/* SAFE ICON LANES: reserve the same width on both sides of labeled buttons.
   This keeps labels geometrically centered while making icon/text overlap
   impossible even after translation and automatic font fitting. */
.cess-icon-tool{--cess-label-left:48px!important;--cess-label-right:48px!important}
.cess-icon-load{--cess-label-left:62px!important;--cess-label-right:62px!important}
.cess-icon-mode-tab{--cess-label-left:50px!important;--cess-label-right:50px!important}
.cess-icon-online{--cess-label-left:66px!important;--cess-label-right:66px!important}
.cess-icon-study{--cess-label-left:56px!important;--cess-label-right:56px!important}
.cess-icon-result-action{--cess-label-left:68px!important;--cess-label-right:68px!important}
.cess-icon-result-signature{--cess-label-left:58px!important;--cess-label-right:58px!important}
.cess-icon-confirm{--cess-label-left:56px!important;--cess-label-right:56px!important}
#academyFlip.cess-icon-board,#top100Flip.cess-icon-board{--cess-label-left:50px!important;--cess-label-right:50px!important}
#academyPlay,#top100Play,#top100Analyze,#learnReset,#learnDemo,
#toolUndo,#toolHint,#toolReview,#toolCopyPgn,#toolSavePgn,#toolLoadPgn,#reviewCopy,#reviewSave,#pgnLoadGo,#pgnCancel,.wood-file-button{
  --cess-label-left:62px!important;
  --cess-label-right:62px!important;
}
#academyPlay,#top100Play,#top100Analyze,#learnReset,#learnDemo{--cess-label-left:60px!important;--cess-label-right:60px!important}
#resultParallel{--cess-icon-size:42px!important;--cess-label-left:66px!important;--cess-label-right:66px!important}
#top100Reset{--cess-icon-size:22px!important}
#academyBack,#puzzleBack,#learnBack,#top100Back,#signatureBack{--cess-icon-size:40px!important}

/* Puzzles: icon left rail + equal empty right rail = copy stays truly centered. */
#puzzleHint.cess-icon-puzzle-action,#puzzleSolution.cess-icon-puzzle-action,#puzzleReview.cess-icon-puzzle-action{
  --cess-label-left:68px!important;
  --cess-label-right:68px!important;
}
.puzzle-actions .cess-standard-action>.cess-icon-label,
.puzzle-actions .cess-standard-action>span{padding-left:68px!important;padding-right:68px!important}
#puzzleNext>span{padding-left:62px!important;padding-right:62px!important}

/* Inline lobby SVG buttons use the same symmetric protected lane. */
#setupTwo.online-lobby-mode .online-lobby-flat>span{
  padding-left:66px!important;
  padding-right:66px!important;
}
#setupTwo.online-lobby-mode .online-whatsapp-share{border-color:var(--cess-flat-border)!important}

/* Never let an old green outline rule leak back into any flat button. */
.language-choice:focus-visible,
.home-button:focus-visible,
.academy-wood-btn:focus-visible,
.wood-ui-btn:focus-visible,
.online-wood-button:focus-visible,
.online-mini-wood:focus-visible,
.setup-start:focus-visible,
.time-choice:focus-visible,
.time-rail-arrow:focus-visible,
.online-time-choice:focus-visible,
.setup-close-button:focus-visible,
.two-mode-tab:focus-visible,
.result-actions button:focus-visible,
.result-signature button:focus-visible,
.signature-flat-btn:focus-visible,
.puzzle-level-choice:focus-visible,
.puzzle-level-close:focus-visible,
.game-tools-button:focus-visible,
.draw-offer-choice:focus-visible,
.cess-confirm-actions button:focus-visible,
.game-action:focus-visible,
.result-back:focus-visible{
  outline:2px solid rgba(238,199,151,.82)!important;
  outline-offset:3px!important;
  border-color:var(--cess-flat-border-strong)!important;
}
/* v3.5.4.26 final guard: promotion choices are buttons too. */
.promotion-grid button::after{border-color:transparent!important;box-shadow:none!important}
@media (hover:hover) and (pointer:fine){
  .promotion-grid button:hover,.top100-promotion-pieces button:hover{
    background:var(--cess-flat-bg-hover)!important;
    border-color:var(--cess-flat-border-strong)!important;
  }
  .promotion-grid button:hover::after,.promotion-grid button:focus::after{border-color:transparent!important;box-shadow:none!important}
}
.home-button{min-width:250px!important}

/* ============================================================
   CESS — HOME MENU TRUE CENTERING
   Keep every variable-width home button on one shared screen axis.
   ============================================================ */
.home-view .home-button,
.home-view.active .home-button,
.phase-home .home-view .home-button{
  left:50%!important;
  right:auto!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:translateX(-50%)!important;
  transform-origin:center center!important;
}
.home-view .home-button:active,
.phase-home .home-view .home-button:active{
  transform:translate(-50%,1px)!important;
}

/* ============================================================
   CESS — HOME MENU SIGNATURE LAYOUT v3.5.4.27
   One centered width; authored symbols live inside the buttons.
   ============================================================ */
.home-view .home-button,
.home-view.active .home-button,
.phase-home .home-view .home-button{
  left:50%!important;
  right:auto!important;
  width:620px!important;
  min-width:620px!important;
  max-width:620px!important;
  height:80px!important;
  padding:0!important;
  margin:0!important;
  transform:translateX(-50%)!important;
  transform-origin:center center!important;
  overflow:hidden!important;
  display:block!important;
}

/* The label owns the optical center. Matching protected lanes on both sides
   guarantee that neither left nor right artwork can ever touch the copy. */
.home-view .home-button > span,
html[data-lang="en"] .home-view .home-button > span,
html[data-lang="tr"] .home-view .home-button > span,
html[data-lang="es"] .home-view .home-button > span,
html[data-lang="ja"] .home-view .home-button > span,
html[data-lang="it"] .home-view .home-button > span,
html[data-lang="fr"] .home-view .home-button > span{
  position:absolute!important;
  inset:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  padding:0 118px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  z-index:4!important;
}

/* Supplied menu artwork is never redrawn. It is normalized into one calm
   internal icon lane with real breathing space from both edge and copy. */
.home-view .home-menu-symbol{
  top:50%!important;
  width:76px!important;
  height:60px!important;
  max-width:76px!important;
  max-height:60px!important;
  object-fit:contain!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  z-index:5!important;
  pointer-events:none!important;
}
.home-view .home-menu-symbol-1,
.home-view .home-menu-symbol-3,
.home-view .home-menu-symbol-5,
.home-view .home-menu-symbol-7{
  left:22px!important;
  right:auto!important;
}
.home-view .home-menu-symbol-2,
.home-view .home-menu-symbol-4,
.home-view .home-menu-symbol-6{
  left:auto!important;
  right:22px!important;
}

/* The narrow king artwork needs slightly less visual mass than the wider marks. */
.home-view .home-menu-symbol-5{width:54px!important;max-width:54px!important;left:31px!important}

.home-view .home-button:active,
.phase-home .home-view .home-button:active{
  transform:translate(-50%,1px)!important;
}

/* ======================================================================
   CESS! v3.5.4.28 — REGRESSION AUDIT / REVIEW NAV + ZERO-OVERLAP TOOLS
   Home signature layout stays untouched. Review navigation is explicit and
   the ••• panel uses wide one-line controls with protected icon rails.
   ====================================================================== */

/* END-GAME REVIEW: the navigation row is a permanent, explicit visual layer.
   Actual <img> icons are used here so FIRST / PREV / NEXT / LAST can never
   disappear because of a pseudo-element, locale or action-icon resync. */
.review-panel{
  grid-template-rows:64px 40px 430px 64px 68px!important;
}
.review-nav{
  position:relative!important;
  z-index:4!important;
  width:306px!important;
  height:64px!important;
  min-height:64px!important;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  align-items:stretch!important;
  gap:9px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
}
.review-nav .review-nav-btn{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  height:60px!important;
  min-height:60px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--cess-flat-border)!important;
  border-radius:15px!important;
  background:var(--cess-flat-bg)!important;
  box-shadow:var(--cess-flat-shadow)!important;
}
.review-nav .review-nav-icon{
  position:relative!important;
  left:auto!important;right:auto!important;top:auto!important;
  display:block!important;
  width:31px!important;
  height:31px!important;
  max-width:31px!important;
  max-height:31px!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  filter:none!important;
}
.review-nav .review-nav-btn::before,
.review-nav .review-nav-btn::after{display:none!important;content:none!important}
.review-nav .review-nav-btn.disabled{opacity:.27!important;pointer-events:none!important}
@media (hover:hover) and (pointer:fine){
  .review-nav .review-nav-btn:not(.disabled):hover{
    background:var(--cess-flat-bg-hover)!important;
    border-color:var(--cess-flat-border-strong)!important;
  }
}

/* ••• TOOLS: one calm vertical column. The previous two-column 136px buttons
   left too little copy width after icon safety padding in TR/ES/FR. */
.game-tools-panel{
  left:1532px!important;
  top:320px!important;
  width:360px!important;
  min-height:0!important;
  max-height:680px!important;
  padding:20px 22px 20px!important;
  display:none;
  grid-template-columns:1fr!important;
  grid-auto-rows:min-content!important;
  align-content:start!important;
  justify-content:stretch!important;
  gap:7px!important;
  overflow:hidden!important;
  border-radius:28px!important;
}
.game-tools-panel.show{display:grid!important}
.tools-panel-title{
  grid-column:1!important;
  width:100%!important;
  min-height:34px!important;
  margin:0 0 2px!important;
  padding:0 5px 8px!important;
  justify-self:stretch!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:19px!important;
  line-height:1!important;
}
.game-tools-panel .wood-ui-btn,
.game-tools-panel .wood-ui-btn-wide{
  grid-column:1!important;
  justify-self:stretch!important;
  width:316px!important;
  min-width:316px!important;
  max-width:316px!important;
  height:50px!important;
  min-height:50px!important;
  max-height:50px!important;
  margin:0!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
.game-tools-panel .cess-icon-button{
  --cess-icon-size:25px!important;
  --cess-icon-left:15px!important;
  --cess-label-left:56px!important;
  --cess-label-right:56px!important;
}
.game-tools-panel .cess-icon-button>.cess-icon-label,
.game-tools-panel .wood-ui-btn>span{
  position:absolute!important;
  inset:0!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  padding-left:56px!important;
  padding-right:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  font-size:15px!important;
  line-height:1!important;
  letter-spacing:-.2px!important;
}
.game-tools-panel .cess-icon-button::before{
  left:15px!important;
  width:25px!important;
  height:25px!important;
  max-width:25px!important;
  max-height:25px!important;
}
.move-list-compact{
  grid-column:1!important;
  width:316px!important;
  min-width:316px!important;
  max-width:316px!important;
  min-height:64px!important;
  max-height:76px!important;
  justify-self:stretch!important;
  margin-top:3px!important;
  padding:9px 11px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  font-size:12px!important;
  line-height:1.35!important;
  text-align:left!important;
}

/* General icon/copy hard guards. These are deliberately late in the sheet so
   earlier per-screen legacy padding cannot put text back under an icon. */
.cess-icon-button>.cess-icon-label{
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
}
.online-lobby-flat>span,
.puzzle-actions button>span,
#puzzleNext>span,
.wood-file-button>span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}

/* Compact buttons may reduce type rather than collide. */
.game-tools-panel button,
.review-actions button,
.pgn-loader-actions button,
.online-lobby-flat,
.puzzle-actions button{
  text-wrap:balance;
}

/* v3.5.4.28 — explicit multilingual lanes for the remaining high-risk controls.
   These late rules remove dependence on earlier zero-padding legacy rules. */
#computerStart>.cess-icon-label,#twoStart>.cess-icon-label{
  padding-left:164px!important;
  padding-right:164px!important;
  font-size:42px!important;
}
#setupTwo .two-mode-tab>.cess-icon-label{
  padding-left:162px!important;
  padding-right:162px!important;
  font-size:31px!important;
}
#setupTwo.online-mode .online-wood-button>.cess-icon-label{
  padding-left:106px!important;
  padding-right:106px!important;
  font-size:20px!important;
}
#reviewCopy.cess-icon-tool,#reviewSave.cess-icon-tool{
  --cess-icon-size:22px!important;
  --cess-icon-left:11px!important;
  --cess-label-left:42px!important;
  --cess-label-right:42px!important;
}
#reviewCopy>.cess-icon-label,#reviewSave>.cess-icon-label{
  padding-left:42px!important;
  padding-right:42px!important;
  font-size:12.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
/* PGN action buttons are narrower than main controls; let typography flex
   sooner instead of ever entering the icon rail. */
.pgn-loader-actions .cess-icon-button>.cess-icon-label{
  font-size:16px!important;
}
/* Lobby buttons use a real inline image; preserve equal blank space on the
   opposite side so the wording is optically centered. */
#setupTwo.online-lobby-mode .online-lobby-flat>span{
  padding-left:68px!important;
  padding-right:68px!important;
}
/* Learn controls were another legacy zero-padding hotspot. Give them a real
   icon rail and allow the multilingual copy to shrink inside the remainder. */
#learnReset.cess-icon-study,#learnDemo.cess-icon-study{
  --cess-icon-size:30px!important;
  --cess-icon-left:14px!important;
  --cess-label-left:54px!important;
  --cess-label-right:54px!important;
}
#learnReset>.cess-icon-label,#learnDemo>.cess-icon-label{
  padding-left:54px!important;
  padding-right:54px!important;
  font-size:14px!important;
  white-space:nowrap!important;
}

/* v3.5.4.28 — study navigation audit fixes found in the live browser pass. */
/* NEXT is icon-only just like PREV; the legacy glyph must not occupy label space. */
#academyNext>.cess-icon-label,#learnNext>.cess-icon-label{opacity:0!important;pointer-events:none!important}
#academyNext,#learnNext{
  --cess-icon-size:32px!important;
  --cess-icon-left:50%!important;
  --cess-label-left:0px!important;
  --cess-label-right:0px!important;
}
#academyNext::before,#learnNext::before{margin-left:-16px!important}

/* Opening Academy has ample horizontal room: use it instead of crushing copy. */
.academy-play{width:210px!important}
.academy-flip{width:160px!important}
#academyPlay.cess-icon-study{
  --cess-icon-size:26px!important;
  --cess-icon-left:12px!important;
  --cess-label-left:50px!important;
  --cess-label-right:50px!important;
}
#academyPlay>.cess-icon-label{padding-left:50px!important;padding-right:50px!important;font-size:18px!important}
#academyFlip.cess-icon-board{
  --cess-icon-size:24px!important;
  --cess-icon-left:8px!important;
  --cess-label-left:40px!important;
  --cess-label-right:40px!important;
}
#academyFlip>.cess-icon-label{padding-left:40px!important;padding-right:40px!important;font-size:14.5px!important}

/* Top 1000 control row had 79px of unused room while the text buttons were
   starved. Redistribute that space without moving the row or the board. */
.top100-play{width:150px!important}
.top100-flip{width:140px!important}
.top100-analyze{width:180px!important}
#top100Play.cess-icon-study{
  --cess-icon-size:24px!important;
  --cess-icon-left:9px!important;
  --cess-label-left:44px!important;
  --cess-label-right:44px!important;
}
#top100Play>.cess-icon-label{padding-left:44px!important;padding-right:44px!important;font-size:13.5px!important}
#top100Flip.cess-icon-board{
  --cess-icon-size:22px!important;
  --cess-icon-left:8px!important;
  --cess-label-left:38px!important;
  --cess-label-right:38px!important;
}
#top100Flip>.cess-icon-label{padding-left:38px!important;padding-right:38px!important;font-size:13px!important}
#top100Analyze.cess-icon-study{
  --cess-icon-size:24px!important;
  --cess-icon-left:10px!important;
  --cess-label-left:46px!important;
  --cess-label-right:46px!important;
}
#top100Analyze>.cess-icon-label{padding-left:46px!important;padding-right:46px!important;font-size:13.5px!important}
/* Review arrows fill their four grid cells; no tiny shrink-to-icon hit targets. */
.review-nav .review-nav-btn{justify-self:stretch!important;align-self:stretch!important}
/* Live multilingual pass: use the spare Top 1000 toolbar width where the long
   Romance-language labels actually need it. Icon-only nav stays compact. */
.top100-board-controls{gap:8px!important}
.top100-nav{width:50px!important}
.top100-play{width:194px!important}
.top100-flip{width:154px!important}
.top100-analyze{width:180px!important}
#top100Play>.cess-icon-label{font-size:12.5px!important}
#top100Flip>.cess-icon-label{font-size:12px!important}
#top100Analyze>.cess-icon-label{font-size:12.5px!important}

/* Spanish/French lesson verbs are longer; smaller type is preferable to
   collision or clipping in these compact 176px controls. */
#learnReset.cess-icon-study,#learnDemo.cess-icon-study{
  --cess-icon-size:26px!important;
  --cess-icon-left:12px!important;
  --cess-label-left:50px!important;
  --cess-label-right:50px!important;
}
#learnReset>.cess-icon-label,#learnDemo>.cess-icon-label{
  padding-left:50px!important;
  padding-right:50px!important;
  font-size:12px!important;
}


/* ============================================================
   CESS! v3.5.4.29 — OPENING ACADEMY / TRUE MOVE-BY-MOVE STUDY
   Manual arrows now advance exactly one ply immediately; autoplay is
   independent and always yields to manual study. The notation is a direct
   navigation surface and the compact readout makes position depth explicit.
   ============================================================ */
.academy-board-controls{
  width:830px!important;
  gap:14px!important;
}
.academy-step-readout{
  position:relative;
  flex:0 0 98px;
  width:98px;
  height:68px;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  border-radius:16px;
  border:1px solid rgba(224,171,114,.42);
  background:rgba(77,43,27,.90);
  box-shadow:inset 0 1px 0 rgba(255,227,185,.06),0 5px 10px rgba(34,16,8,.10);
  color:#f2c184;
  font:900 15px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.7px;
  text-align:center;
  user-select:none;
}
#academyPrev,#academyNext{cursor:pointer!important}
#academyPrev.disabled,#academyNext.disabled{opacity:.28!important;pointer-events:none!important}
.academy-line{
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(241,181,104,.20) transparent;
}
.academy-line-move{
  appearance:none;
  -webkit-appearance:none;
  display:inline;
  border:0;
  margin:0;
  padding:2px 4px 3px;
  border-radius:6px;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  cursor:pointer;
  transition:background-color .14s ease,color .14s ease,box-shadow .14s ease;
}
.academy-line-move.current{
  color:#ffd292;
  background:rgba(39,183,70,.14);
  box-shadow:inset 0 -2px 0 rgba(39,183,70,.84);
  text-decoration:none!important;
}
@media (hover:hover) and (pointer:fine){
  .academy-line-move:hover{color:#ffe0ad;background:rgba(39,183,70,.10)}
}
.academy-line-move:focus-visible{outline:1px solid rgba(241,193,130,.72);outline-offset:1px}

/* ============================================================
   CESS! v3.5.4.30 — HOME RETURN ICON / LARGE + TRUE LEFT ARROW
   Keep the authored but5.png symbol, mirror it so the exit arrow points
   back toward home, and enlarge only the icon (not the surrounding layout).
   ============================================================ */
#academyBack,#puzzleBack,#learnBack,#top100Back,#signatureBack{
  --cess-icon-size:64px!important;
  --cess-icon-left:50%!important;
  --cess-label-left:0px!important;
  --cess-label-right:0px!important;
}
#academyBack::before,#puzzleBack::before,#learnBack::before,#top100Back::before,#signatureBack::before{
  width:64px!important;
  height:64px!important;
  max-width:64px!important;
  max-height:64px!important;
  margin-left:-32px!important;
  transform:translateY(-50%) scaleX(-1)!important;
  transform-origin:50% 50%!important;
}
@media (hover:hover) and (pointer:fine){
  #academyBack:hover::before,#puzzleBack:hover::before,#learnBack:hover::before,#top100Back:hover::before,#signatureBack:hover::before{
    transform:translateY(-50%) scaleX(-1) scale(1.025)!important;
  }
}
#academyBack:active::before,#puzzleBack:active::before,#learnBack:active::before,#top100Back:active::before,#signatureBack:active::before{
  transform:translateY(-50%) scaleX(-1) scale(.985)!important;
}


/* ============================================================
   CESS! v3.6.0 — DATA LOADING / FULL VIEWPORT MODAL / LARGE DATA
   ============================================================ */
.data-loading-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(27,14,8,.46);backdrop-filter:blur(5px);opacity:0;transition:opacity .18s ease;pointer-events:auto}
.data-loading-overlay[hidden]{display:none!important}.data-loading-overlay.show{opacity:1}
.data-loading-card{width:min(520px,calc(100vw - 56px));padding:34px 38px 30px;border-radius:28px;background:linear-gradient(180deg,rgba(80,44,25,.985),rgba(47,27,18,.99));box-shadow:0 26px 70px rgba(22,10,5,.38),inset 0 0 0 1px rgba(235,190,129,.34);display:flex;flex-direction:column;align-items:center;text-align:center;color:#f1b568;font-family:"Helvetica Neue",Arial,sans-serif}
.data-loading-orbit{position:relative;width:112px;height:112px;margin-bottom:16px;display:grid;place-items:center}.data-loading-orbit img{width:72px;height:72px;object-fit:contain;animation:cessDataKnight 1.25s cubic-bezier(.4,0,.2,1) infinite}.data-loading-ring{position:absolute;inset:4px;border-radius:50%;border:2px solid rgba(241,181,104,.20);border-top-color:#26b34a;border-right-color:rgba(38,179,74,.72);animation:cessDataRing .9s linear infinite}
.data-loading-card strong{font-size:20px;line-height:1.05;letter-spacing:1.5px}.data-loading-card>span{margin-top:9px;max-width:430px;color:#ead0ad;font-size:13px;line-height:1.35;font-weight:700;letter-spacing:.2px}.data-loading-dots{display:flex;gap:8px;margin-top:17px}.data-loading-dots i{width:7px;height:7px;border-radius:50%;background:#26b34a;animation:cessDataDot 1s ease-in-out infinite}.data-loading-dots i:nth-child(2){animation-delay:.14s}.data-loading-dots i:nth-child(3){animation-delay:.28s}
@keyframes cessDataRing{to{transform:rotate(360deg)}}@keyframes cessDataKnight{0%,100%{transform:translateY(1px) scale(.96)}50%{transform:translateY(-3px) scale(1.025)}}@keyframes cessDataDot{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
#viewport.cess-modal-open{background:#1d100b!important}#viewport.cess-modal-open::before{filter:brightness(.58) saturate(.82)!important;transition:filter .18s ease}
.puzzle-level-backdrop{background:rgba(28,14,8,.42)!important;box-shadow:0 0 0 200vmax rgba(28,14,8,.42)}
.modal.show{background:rgba(28,14,8,.34)!important}
@media (prefers-reduced-motion:reduce){.data-loading-ring,.data-loading-orbit img,.data-loading-dots i{animation:none!important}.data-loading-overlay{transition:none!important}}


/* CESS! v3.6.0.2 — viewport-safe overlay completion */
#viewport.cess-top100-promotion-open::after,#viewport.cess-signature-loading-open::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;background:rgba(28,14,8,.30);backdrop-filter:blur(2px)}
#viewport.cess-signature-loading-open::after{background:rgba(28,14,8,.20)}
#viewport.cess-top100-promotion-open .stage,#viewport.cess-signature-loading-open .stage{z-index:3}


/* v3.6.0.3 — COMPUTER TOOLS / LIVE REVIEW STATE REPAIR
   Dynamic tool buttons must clear BOTH the visual disabled class and aria-disabled.
   The tools review action uses the same flat/icon lane and the panel remains a
   single calm column with enough vertical room for the restored action. */
#toolReview{
  --cess-icon-size:25px!important;
  --cess-icon-left:15px!important;
  --cess-label-left:56px!important;
  --cess-label-right:56px!important;
}
#toolReview>.cess-icon-label,#toolReview>span{
  padding-left:56px!important;
  padding-right:56px!important;
  font-size:15px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.game-tools-panel{max-height:700px!important}
.game-tools-panel button:not(.disabled)[aria-disabled="false"]{pointer-events:auto!important}

/* CESS! v3.6.0.4 — full-site audit: compact action-button breathing room.
   Keep the supplied symbols comfortably separated from multilingual copy
   without forcing readable labels into an artificially narrow center lane. */
#reviewCopy.cess-icon-tool,#reviewSave.cess-icon-tool{
  --cess-icon-size:20px!important;
  --cess-icon-left:8px!important;
  --cess-label-left:38px!important;
  --cess-label-right:38px!important;
}
#reviewCopy>.cess-icon-label,#reviewSave>.cess-icon-label{
  padding-left:38px!important;
  padding-right:38px!important;
  font-size:13px!important;
}
#pgnLoadGo.cess-icon-button,#pgnCancel.cess-icon-button{
  --cess-icon-size:28px!important;
  --cess-icon-left:10px!important;
  --cess-label-left:48px!important;
  --cess-label-right:48px!important;
}
#pgnLoadGo>.cess-icon-label,#pgnCancel>.cess-icon-label{
  padding-left:48px!important;
  padding-right:48px!important;
  font-size:16px!important;
}
.result-actions button.cess-icon-result-action{
  --cess-icon-size:32px!important;
  --cess-icon-left:15px!important;
  --cess-label-left:60px!important;
  --cess-label-right:60px!important;
}
.result-actions button.cess-icon-result-action>.cess-icon-label{
  padding-left:60px!important;
  padding-right:60px!important;
  font-size:21px!important;
}
html[data-lang="ja"] .result-actions button.cess-icon-result-action>.cess-icon-label{
  font-size:20px!important;
}


/* ======================================================================
   CESS! v3.7.0 — WHY, NOT JUST WHAT
   Human explanation precedes engine numbers. New teaching layers live
   inside existing screens; no new navigation, no visual feature bloat.
   ====================================================================== */

/* REVIEW — human sentence first, engine score second. */
.review-panel{
  height:820px!important;
  grid-template-rows:58px 36px 104px 304px 64px 68px!important;
  gap:9px!important;
  padding:18px 22px 20px!important;
}
.review-grade{height:58px!important;min-height:58px!important;max-height:58px!important;font-size:27px!important;padding-top:6px!important;padding-bottom:6px!important}
.review-move{height:36px!important;min-height:36px!important;max-height:36px!important;font-size:17px!important;transition:background .16s ease,border-color .16s ease,color .16s ease}
.review-move.is-explainable{cursor:pointer;border-radius:10px}
@media (hover:hover) and (pointer:fine){.review-move.is-explainable:hover{background:rgba(44,132,62,.18)!important;color:#ffd7a1!important}}
.review-human{box-sizing:border-box;width:306px;height:104px;padding:11px 12px 10px;border-radius:16px;border:1px solid rgba(239,182,101,.15);background:rgba(20,15,12,.39);overflow:hidden;display:flex;flex-direction:column;gap:6px}
.review-human-head{height:18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;min-width:0}
#reviewHumanKicker{font:900 8.5px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.55px;color:rgba(239,189,121,.56);white-space:nowrap}
#reviewHumanTag{min-width:0;justify-self:start;max-width:118px;padding:3px 6px;border-radius:7px;background:rgba(44,132,62,.18);color:#8fe6a0;font:900 8px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.45px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#reviewHumanTag:empty{display:none}
#reviewHumanEval{justify-self:end;font:900 9px/1 "Helvetica Neue",Arial,sans-serif;color:rgba(239,189,121,.52);letter-spacing:.25px;white-space:nowrap}
.review-human-text{min-height:42px;font:760 12.5px/1.25 "Helvetica Neue",Arial,sans-serif;color:#f3c68c;letter-spacing:-.06px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.review-human-time{min-height:12px;font:900 8.5px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1px;color:rgba(130,218,146,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-candidates{height:304px!important;min-height:304px!important;max-height:304px!important;grid-template-rows:24px repeat(3,1fr)!important;gap:6px!important}
.review-candidate{padding:7px 10px 7px!important;border-radius:14px!important;grid-template-columns:64px minmax(0,1fr) 50px!important;grid-template-rows:20px 18px minmax(29px,1fr)!important;column-gap:7px!important;row-gap:1px!important}
.review-candidate-san{font-size:20px!important}.review-candidate small{font-size:9.5px!important;line-height:1.18!important;-webkit-line-clamp:2!important}.review-candidate-tag{font-size:8px!important}.review-candidate-rank{font-size:9px!important}.review-candidate-eval{font-size:10px!important}
.review-candidate-state{height:304px!important;min-height:304px!important;max-height:304px!important}

/* WHY NOT THIS MOVE? */
.teaching-why-card{position:relative;width:700px;max-height:720px;box-sizing:border-box;padding:42px 46px 38px;border-radius:31px;border:1px solid rgba(239,182,101,.22);background:linear-gradient(155deg,rgba(73,40,23,.985),rgba(30,20,14,.995));box-shadow:0 28px 70px rgba(35,15,7,.38),inset 0 1px 0 rgba(255,225,181,.07);color:#efbd79}
.teaching-why-close{position:absolute;right:18px;top:18px;width:42px;height:42px;border:1px solid rgba(239,182,101,.18);border-radius:13px;background:rgba(20,14,10,.34);color:#efbd79;font:400 31px/40px Arial,sans-serif}
.teaching-why-kicker{font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.4px;color:rgba(239,189,121,.54);margin-bottom:10px}
.teaching-why-card h2{margin:0 0 26px;font:900 36px/.96 "Helvetica Neue",Arial,sans-serif;letter-spacing:-1.7px;color:#f3c37f}
.teaching-why-compare{height:106px;display:grid;grid-template-columns:1fr 48px 1fr;align-items:center;gap:12px;margin-bottom:24px}
.teaching-why-compare>div:not(.teaching-why-arrow){height:100%;box-sizing:border-box;padding:19px 18px;border-radius:18px;border:1px solid rgba(239,182,101,.12);background:rgba(14,11,9,.26);display:flex;flex-direction:column;justify-content:center}
.teaching-why-compare small{font:900 9px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.7px;color:rgba(239,189,121,.46)}
.teaching-why-compare strong{margin-top:10px;font:900 27px/1 "Helvetica Neue",Arial,sans-serif;color:#ffd49a}
.teaching-why-arrow{text-align:center;font:300 31px/1 Arial,sans-serif;color:rgba(114,210,131,.76)}
.teaching-why-card>p{margin:0 0 20px;font:760 18px/1.43 "Helvetica Neue",Arial,sans-serif;color:rgba(247,213,168,.88)}
.teaching-why-time{display:flex;align-items:flex-start;gap:16px;padding:15px 17px;margin:0 0 18px;border-radius:15px;background:rgba(16,13,10,.26);border:1px solid rgba(239,182,101,.10)}
.teaching-why-time b{flex:0 0 auto;font:900 10px/1.2 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.4px;color:#85df96}.teaching-why-time span{font:720 13px/1.35 "Helvetica Neue",Arial,sans-serif;color:rgba(243,205,157,.78)}
.teaching-why-time.is-fast b,.teaching-why-time.is-slow b{color:#e6a96b}
.teaching-why-engine{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(239,182,101,.12);padding-top:16px}.teaching-why-engine span{font:900 9px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.7px;color:rgba(239,189,121,.42)}.teaching-why-engine b{font:900 16px/1 "Helvetica Neue",Arial,sans-serif;color:rgba(239,189,121,.65)}

/* OPENING ACADEMY — three small WHY? moments per line. */
.academy-why{box-sizing:border-box;margin-top:9px;min-height:64px;max-height:82px;padding:10px 12px;border-radius:13px;border:1px solid rgba(52,175,76,.24);background:rgba(28,92,41,.12);overflow:hidden}
.academy-why[hidden]{display:none!important}.academy-why span{display:block;margin-bottom:5px;font:900 9px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.5px;color:#83dc94}.academy-why p{margin:0;font:720 12px/1.3 "Helvetica Neue",Arial,sans-serif;color:rgba(244,207,161,.82);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.academy-line{max-height:102px!important;overflow-y:auto!important;scrollbar-width:thin}
.academy-why-chip{display:inline-flex;align-items:center;justify-content:center;height:18px;margin:0 4px 0 2px;padding:0 5px;border:1px solid rgba(57,180,80,.25);border-radius:6px;background:rgba(38,126,55,.14);color:#82db93;font:900 7px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.55px;vertical-align:2px;cursor:pointer}
.academy-why-chip.active{background:rgba(44,132,62,.88);border-color:rgba(225,181,128,.48);color:#ffe0b2}
@media (hover:hover) and (pointer:fine){.academy-why-chip:hover{background:rgba(44,132,62,.72);color:#ffe0b2}}

/* PUZZLES — solved means understood, not merely correct. */
.puzzle-status-block{min-height:180px!important}
.puzzle-idea{box-sizing:border-box;margin-top:12px;padding:10px 12px;border-radius:13px;border:1px solid rgba(55,177,77,.22);background:rgba(31,105,45,.11)}
.puzzle-idea[hidden]{display:none!important}.puzzle-idea span{display:block;margin-bottom:5px;font:900 8.5px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.25px;color:#87de98}.puzzle-idea p{margin:0;font:760 12px/1.3 "Helvetica Neue",Arial,sans-serif;color:rgba(244,209,165,.82)}
.puzzle-status-block:has(.puzzle-idea:not([hidden])) .puzzle-status{font-size:29px!important}.puzzle-status-block:has(.puzzle-idea:not([hidden])) .puzzle-detail{font-size:13px!important;margin-top:8px!important}

/* RESULT — one screen, three useful things, no report. */
.end-screen.has-teaching .result-main .result-title{top:62px!important;font-size:50px!important}
.end-screen.has-teaching .result-main .result-piece{top:170px!important;width:178px!important;height:178px!important}
.end-screen.has-teaching .result-main .result-sub{top:380px!important;font-size:42px!important}
.result-three{position:absolute;left:19px;top:465px;width:645px;height:150px;z-index:14;box-sizing:border-box}
.result-three-kicker{text-align:center;height:20px;font:900 9px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:2.2px;color:rgba(239,189,121,.52)}
.result-three-grid{height:126px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.result-three article{position:relative;box-sizing:border-box;padding:14px 13px 11px;border-radius:17px;border:1px solid rgba(239,182,101,.13);background:rgba(31,20,14,.24);overflow:hidden}
.result-three article>span{position:absolute;right:10px;top:9px;font:900 22px/1 "Helvetica Neue",Arial,sans-serif;color:rgba(239,189,121,.07)}
.result-three small{display:block;padding-right:26px;font:900 8px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.2px;color:rgba(239,189,121,.52);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-three p{margin:9px 0 0;font:760 11.3px/1.27 "Helvetica Neue",Arial,sans-serif;color:#efc18a;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.end-screen.has-teaching .result-signature{top:626px!important}.end-screen.has-teaching .result-actions{top:766px!important}
html[data-lang="ja"] .result-three p{font-size:10.8px!important;line-height:1.33!important}

@media (prefers-reduced-motion:reduce){.review-human,.academy-why,.puzzle-idea,.result-three{animation:none!important}}

/* v3.7 teaching readability guard: the human sentence must never be sacrificed to the number. */
.review-panel{grid-template-rows:58px 36px 132px 304px 64px 68px!important}
.review-human{height:132px!important}
.review-human-text{height:64px!important;min-height:64px!important;-webkit-line-clamp:4!important}

/* Human-first reading order: WHY first, engine number last. */
.review-human-head{grid-template-columns:auto minmax(0,1fr)!important}
.review-human-foot{height:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;min-width:0}
#reviewHumanEval{grid-column:2;justify-self:end;align-self:end}
.review-human-time{min-width:0}
.review-move.is-explainable{position:relative;padding-left:52px!important;padding-right:52px!important}
.review-move.is-explainable::after{content:attr(data-why);position:absolute;right:9px;top:50%;transform:translateY(-50%);padding:3px 5px;border-radius:6px;background:rgba(44,132,62,.18);color:#84dc95;font:900 7px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.45px;white-space:nowrap}


/* CESS! v3.8.0 — LEARN BY PLAYING */
.learn-mission-label{margin-top:10px;font:900 10px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:1.5px;color:#6fd27f;text-transform:uppercase}
.learn-board-guide{margin-top:8px;padding:9px 12px;border-radius:12px;border:1px solid rgba(241,181,104,.12);background:rgba(241,181,104,.055);font:750 11px/1.35 "Helvetica Neue",Arial,sans-serif;color:rgba(245,203,150,.78)}
.learn-status{min-height:58px!important;display:flex!important;align-items:center!important;font-size:11px!important;line-height:1.42!important}
.learn-sq.learn-selected{box-shadow:inset 0 0 0 4px rgba(69,183,87,.88)!important}
.learn-sq.learn-legal::after{width:17px!important;height:17px!important;background:rgba(69,183,87,.78)!important;box-shadow:0 0 0 6px rgba(69,183,87,.10)!important}
.learn-sq.learn-capture::after{inset:8px!important;border:4px solid rgba(69,183,87,.82)!important;background:transparent!important}