*{box-sizing:border-box}html{color-scheme:light}body{margin:0;min-height:100svh;color:#272724;background:#faf9f7 url('assets/chess/scacchi-matita.webp') center/cover no-repeat;font-family:Georgia,'Times New Roman',serif;display:grid;place-items:center}main{width:min(640px,48vw);text-align:center;padding:50px 12px 100px}h1{font-weight:400;font-size:clamp(76px,8.7vw,138px);line-height:1;letter-spacing:-.045em;margin:0 0 38px}main p{font-size:clamp(19px,1.65vw,27px);line-height:1.55;margin:0 0 36px;text-wrap:pretty;background:radial-gradient(ellipse,rgba(255,255,255,.6),transparent 75%)}.challenge{display:inline-block;padding:18px 29px;border-radius:12px;background:#30302e;color:#fff;text-decoration:none;font-size:22px;box-shadow:0 5px 16px #24242410;transition:transform .2s,background .2s}.challenge:hover{transform:translateY(-2px);background:#454541}.caption{display:block;margin-top:13px;font-size:17px}.secret{position:absolute;top:12%;left:17%;width:54px;height:70px;border:0;background:none;color:#77766f;cursor:pointer;padding:0;transform:rotate(-7deg)}.secret svg{width:100%;height:100%}.hint{position:absolute;left:62px;top:10px;background:#faf9f6ed;border:1px solid #a09c9060;border-radius:7px;padding:9px 12px;font:14px/1.4 Georgia,serif;width:210px;opacity:0;transform:rotate(7deg);transition:opacity .2s;pointer-events:none}.secret:hover .hint,.secret:focus-visible .hint{opacity:1}:focus-visible{outline:2px solid #696358;outline-offset:6px}dialog{border:1px solid #aaa79e;border-radius:19px;width:min(470px,calc(100vw - 28px));max-height:calc(100svh - 32px);overflow:auto;padding:30px 34px 22px;background:#faf9f5;box-shadow:0 15px 70px #29262030;color:#272724;text-align:center}dialog::backdrop{background:#f8f7f155;backdrop-filter:blur(3px)}h2{font-size:31px;font-weight:400;margin:8px 10px 7px;letter-spacing:-.025em}.players{font-size:16px;margin:0 0 24px}.close{position:absolute;right:11px;top:8px;border:0;background:none;font:28px Georgia;cursor:pointer;color:#555;padding:5px 10px}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1;border:1px solid #77766e}.square{position:relative;display:grid;place-items:center;min-width:0;background:#f9f8f4;font-size:clamp(23px,4.9vw,40px);line-height:1;font-family:'Apple Symbols','Segoe UI Symbol','DejaVu Sans',serif}.square.dark{background:#d6d5cf}.square.last{box-shadow:inset 0 0 0 2px #8b877b}.square small{position:absolute;bottom:2px;right:3px;font:9px Arial;color:#77746d}.move{font-size:18px;min-height:24px;margin:16px 0}.controls{display:flex;justify-content:center;align-items:center;gap:10px}.controls button{display:grid;place-items:center;cursor:pointer;width:42px;height:42px;border:1px solid #aaa69b;border-radius:50%;background:transparent;color:#353530;font:27px/1 Georgia}.controls #play{width:52px;height:52px;font-size:19px}.controls button:hover{background:#eceae2}.controls button:disabled{opacity:.25;cursor:default}.progress{font-size:14px;color:#6c695f;margin:12px 0}.source{font-size:12px;color:#767268;text-underline-offset:3px}@media(min-width:1100px){dialog{margin: auto 5vw auto auto}body:has(dialog[open]) main{transform:translateX(-18vw);width: min(580px,43vw)}body:has(dialog[open]) h1{font-size:100px}body:has(dialog[open]) main p{font-size:23px}dialog::backdrop{backdrop-filter:none;background:#ffffff18}}@media(max-width:650px){body{background-size:auto 100%;background-position:48% center}main{width:90vw;padding:100px 14px 180px;background:radial-gradient(ellipse at 50% 44%,#faf9f7e8 25%,#faf9f7bb 47%,transparent 70%)}h1{font-size:80px;margin-bottom:26px}main p{font-size:20px;line-height:1.55}.challenge{font-size:19px;padding:16px 22px}.secret{top:4%;left:12%;width:44px;height:58px}.hint{left:48px;width:190px;font-size:12px}dialog{padding:26px 22px 20px}h2{font-size:27px}.square{font-size:9vw}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.magnus{margin:28px auto 0;width:154px}.magnus img{display:block;width:100%;height:auto;mix-blend-mode:multiply}.magnus figcaption{font-size:16px;margin-top:5px;color:#57564f}main{padding-bottom:36px}h1{margin-bottom:28px}@media(max-width:650px){.magnus{width:145px;margin-top:25px}main{padding-bottom:65px;padding-top:110px}}@media(min-width:1100px){body:has(dialog[open]) .magnus{width:125px;margin-top:22px}}

body{display:block;background-attachment:fixed}main{margin:0 auto;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:110px}main p{width:100%}.secret{top:120px}.site-header .lang{display:inline-grid;place-items:center}.site-header span{font-family:Arial,sans-serif}@media(max-width:650px){main{width:94vw;padding:155px 18px 44px}.secret{top:100px}h1{font-size:70px}main p{font-size:19px}.magnus{width:130px}.challenge{max-width:100%;text-align:center}}
