:root{--ink:#3b2a22;--gold:#f3cb70;--teal:#0e555a;--paper:#f9edca;--line:#b88636}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:#112c36}button,input,textarea{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid #ad833f;border-radius:9px;padding:10px 17px;background:linear-gradient(#fff5d5,#e9ce95);color:var(--ink);font-weight:bold;box-shadow:0 3px 12px #0002;transition:filter .2s,transform .2s}button:hover{filter:brightness(1.08)}button:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid #36c9e3;outline-offset:3px}[hidden]{display:none!important}.gold{background:linear-gradient(#ffe7a0,#d9a948);border-color:#a27324;letter-spacing:.04em}.text-button{background:transparent;box-shadow:none;border:0;text-decoration:underline;font-size:14px}.small{font-size:14px;line-height:1.5}.eyebrow{letter-spacing:.16em;font:11px/1.4 Arial,sans-serif;font-weight:bold}h1,h2,h3,p{margin-top:0}h2{font-size:28px;margin-bottom:14px}p{line-height:1.55}#world{position:absolute;inset:0;touch-action:none}#world canvas{display:block;width:100%;height:100%;touch-action:none}#targets{position:absolute;inset:0;pointer-events:none;overflow:hidden}.target{position:absolute;pointer-events:auto;background:none;border:0;box-shadow:none;padding:0;border-radius:50%;transform:translate(-50%,-50%);touch-action:none;min-width:44px;min-height:44px}.target:hover{background:#fff3}.target:disabled{opacity:1;cursor:default}.target span{position:absolute;top:90%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 12px;border-radius:20px;background:#fdf2cc;color:#264d40;box-shadow:0 2px 12px #0005;border:1px solid #a78135;font-size:14px}.target.active{box-shadow:0 0 25px 12px #ffdf7d88;animation:glow 1.8s infinite}.target.matched{pointer-events:none}.target.spark{color:#ffefa2;font-size:48px;text-shadow:0 0 20px gold}.target:active{transform:translate(-50%,-50%)}@keyframes glow{50%{box-shadow:0 0 40px 20px #fff8b3cc}}#hud{position:absolute;top:0;left:0;right:0;padding:20px 30px;display:flex;align-items:center;gap:12px;color:#fff4d3;background:linear-gradient(#0c323cdd,transparent);pointer-events:none}#hud>div{flex:1}#hud button{pointer-events:auto}#chapter{font:11px Arial;letter-spacing:.22em;color:#f5d78e}#sceneTitle{font-size:clamp(19px,2.2vw,30px);margin:5px 0;text-shadow:0 2px 8px #0008}#home{position:absolute;inset:0;overflow:auto;background:url('flatlandia-piazza-360.webp') center 57%/cover}.home-wash{position:absolute;inset:0;background:linear-gradient(90deg,#0e38416b,#243d440a 60%,#69401622)}.home-title{position:absolute;top:8%;left:5%;width:48%;text-align:center;color:#fff1bd;text-shadow:0 3px 3px #193d40,0 4px 24px #062f3c}.home-title>p:first-child{font:12px Arial;letter-spacing:.26em}.home-title h1{font-size:clamp(50px,6.5vw,106px);letter-spacing:.055em;margin:12px 0 0}.home-title h2{font-size:clamp(18px,2.3vw,32px);letter-spacing:.04em}.home-title p{font-size:18px}.home-heroes{position:absolute;height:58%;max-width:45%;object-fit:contain;left:10%;bottom:3%;filter:drop-shadow(0 15px 15px #173d4855)}.scroll{background:url('pergamena.webp') center/100% 100% no-repeat;position:relative;filter:drop-shadow(0 14px 24px #17272466)}.home-scroll{position:absolute;width:40%;max-width:610px;height:87%;right:5%;top:4%;display:flex;align-items:center;justify-content:center;padding:14% 5%}.home-scroll>div{width:100%;max-height:100%;overflow:auto;text-align:center;scrollbar-width:thin}.home-scroll h3{font-size:clamp(23px,2.2vw,32px)}.home-scroll p{font-size:clamp(16px,1.3vw,21px);line-height:1.55}.home-scroll button{display:block;width:100%;margin-top:15px}#sceneCompanions{position:absolute;bottom:60px;left:18px;width:130px;pointer-events:none;filter:drop-shadow(0 5px 8px #0004)}#sceneCompanions img{width:100%}#navigation{position:absolute;bottom:59px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap}#navigation button{font-size:30px;padding:0;width:46px;background:#123f46d9;color:#f5db9f;border-color:#cdb367}#viewHint{font:13px Arial;color:white;text-shadow:0 2px 3px black;background:#173b4699;border-radius:20px;padding:10px 14px}#labelTray{position:absolute;bottom:116px;left:50%;transform:translateX(-50%);width:min(900px,80%);border:1px solid #bea36b;background:#193c43ed;color:#fff1c6;border-radius:18px;padding:12px 20px;box-shadow:0 5px 24px #0004;text-align:center}#labelTray p{font:14px/1.5 Arial;margin-bottom:10px}#labels{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}#labels button{font-size:15px;padding:8px 14px;touch-action:none}#labels button.selected{outline:3px solid #6aebf1;background:#fff8c9}#namingProgress{font:12px Arial;display:block;margin-top:9px}.paper-panel{background:linear-gradient(120deg,#fff5ddeb,#ecd3aaf5),url('pergamena.webp');border:1px solid #b79953;border-radius:5px 20px 8px 22px;box-shadow:0 10px 40px #0004;padding:30px;position:absolute;right:25px;top:110px;width:min(370px,35vw);max-height:calc(100% - 173px);overflow:auto;scrollbar-width:thin}.paper-panel label{display:block;margin:12px 0;font-size:17px}.paper-panel small{display:block;font-size:13px;margin:4px 0}.paper-panel label>span{display:flex;gap:8px}.paper-panel input{width:90px}.paper-panel output{display:block;min-height:18px;font:12px/1.5 Arial;margin-top:4px}.paper-panel output.ok{color:#13653b}.paper-panel output.wrong{color:#8f3028}input,textarea{border:1px solid #bba171;border-radius:7px;background:#fffaf0;padding:12px;max-width:100%;color:#30261c}textarea{width:100%;resize:vertical;min-height:104px;line-height:1.5;font-size:16px}#labSuccess{margin-top:16px}#openPanel{position:absolute;right:25px;top:115px}#resetView{position:absolute;left:22px;top:115px;background:#123f46cf;color:#ffedbf}#numbers{display:flex;justify-content:center;gap:9px;margin:18px 0}#numbers button{border-radius:12px 12px 40% 40%;font-size:29px;min-width:58px;min-height:68px;touch-action:none;background:linear-gradient(#fbefc9 0 15%,#69b4aabb 16%,#347d7999 70%,#c4eacbcc);border:2px solid #488c82}#numbers button.selected{background:linear-gradient(#fce7a0,#d9b767);border:2px solid #846625;box-shadow:0 0 10px #ce994999}#selectedNumbers{text-align:center;font-size:17px;margin-bottom:16px}#brew{width:100%;margin-top:14px}.warning{font-size:14px;border-left:2px solid #a15f35;padding-left:12px}#dropCauldron{position:absolute;left:15%;top:37%;width:36%;height:32%;pointer-events:none;border-radius:50%;border:2px dashed transparent}#dropCauldron.dragging{border-color:#ffe5a4;background:#fae58122;box-shadow:0 0 45px #ffeaaa55}#dropCauldron span{display:none;position:absolute;bottom:0;left:50%;transform:translateX(-50%);color:#fff4cf;background:#164343c9;border-radius:20px;padding:10px;white-space:nowrap}#dropCauldron.dragging span{display:block}#toast{position:absolute;bottom:105px;left:50%;transform:translateX(-50%);max-width:min(650px,90vw);width:max-content;background:#143b43f2;color:#fff2bf;padding:14px 24px;border:1px solid #d2b876;border-radius:12px;text-align:center;pointer-events:none;opacity:0;transition:opacity .25s;z-index:12}#toast.visible{opacity:1}footer{position:absolute;bottom:0;left:0;right:0;height:44px;background:#12343cf0;display:flex;align-items:center;justify-content:center;gap:16px;z-index:15}footer button{background:none;color:#ecdcb4;border:0;box-shadow:none;font:12px Arial;min-height:44px;padding:8px}#fullscreen{font-size:22px}.close{position:absolute;top:14px;right:14px;width:44px;height:44px;font-size:29px;line-height:1;padding:0;border-radius:50%;z-index:2}dialog{border:0;background:transparent;padding:0;max-width:96vw;max-height:94dvh;overflow:visible;color:var(--ink)}dialog::backdrop{background:#071e32a3;backdrop-filter:blur(3px)}.modal-scroll{width:min(610px,94vw);min-height:410px;padding:80px 75px 75px;max-height:90dvh;overflow:auto}.modal-scroll .close{top:55px;right:44px}#modalBody{font-size:18px;line-height:1.6}#modalBody h2{font-size:27px}#modalBody a{color:#165b62;overflow-wrap:anywhere}#modalBody button{margin:6px 6px 0 0}.scratch-scroll{width:min(590px,96vw);max-height:94dvh;overflow:auto;padding:65px 65px 60px;text-align:center}.scratch-scroll .close{top:46px;right:35px}.scratch-scroll h2{font-size:23px}#scratchArea{position:relative;width:min(300px,100%);aspect-ratio:420/400;margin:auto;clip-path:polygon(50% 2%,98% 38%,80% 96%,20% 96%,2% 38%);background:#ffeab2}#scratchArea span{position:absolute;inset:0;display:grid;place-items:center;font:bold 110px Georgia;color:#75451d}#scratchCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}.pentagram{font-size:55px;color:#b28323}#scratchReward p{font-size:16px;margin-bottom:0}#scratchReward h3{margin:12px 0 5px}#scratchReward .pentagram{line-height:1.1}#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b293ddb;color:#fff1bd;z-index:18}.spinner{width:52px;height:52px;border:3px solid #eed99a44;border-top-color:#f6dc87;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}#ending{position:absolute;inset:0;background:linear-gradient(90deg,#113e4deb,#16465099),url('flatlandia-enigma-360.webp') center/cover;overflow:auto;color:#fff2ca}.ending-inner{position:relative;text-align:center;width:65%;max-width:850px;margin:6vh 0 60px 5vw}.ending-inner h1{font-size:clamp(32px,4.3vw,64px);margin-bottom:20px}.ending-inner>p{font-size:19px}#certificateForm{position:relative;inset:auto;width:min(500px,100%);max-height:none;margin:25px auto;color:var(--ink);padding:26px 35px}#certificateForm input{display:block;width:100%;margin:12px 0}#downloadCert{width:100%;font-size:15px}#certificateStatus{font-size:13px;margin:10px 0 0}.ending-heroes{position:absolute;height:65%;max-width:30%;object-fit:contain;bottom:50px;right:3%}.closing{font-style:italic;opacity:.85}#particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}#particles i{position:absolute;bottom:-30px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#ecffe7;box-shadow:0 0 25px 8px #a0ffeac4;animation:rise var(--d) linear infinite;animation-delay:var(--delay)}@keyframes rise{to{transform:translateY(-110vh) translateX(70px);opacity:0}}body.brewing #world{animation:magic 3.8s ease-in-out}body.brewing #particles{background:radial-gradient(circle at 40% 55%,#aaffdfaa,transparent 55%);animation:magic 3.8s}@keyframes magic{0%{filter:brightness(1)}70%{filter:brightness(2.5)}100%{filter:brightness(1)}}.drag-ghost{position:fixed;z-index:99;pointer-events:none;transform:translate(-50%,-50%);padding:13px 22px;border-radius:14px;background:#ffe9aa;color:#44331d;font-size:22px;box-shadow:0 8px 25px #0006}.transition{animation:arrive .6s ease-out}@keyframes arrive{from{opacity:.2}to{opacity:1}}@media(min-width:1500px){.paper-panel{width:410px;padding:34px;font-size:18px}}@media(max-height:760px) and (min-width:701px){.home-title{top:5%}.home-heroes{height:57%}.home-scroll{padding:8% 4%;height:88%}.home-scroll p{font-size:16px;line-height:1.4;margin-bottom:12px}.paper-panel{top:91px;max-height:calc(100% - 143px);padding:23px}.paper-panel h2{font-size:24px}.paper-panel p{margin-bottom:10px}.paper-panel label{margin:8px 0}.paper-panel input{padding:8px}#sceneCompanions{width:95px}.scratch-scroll{padding:50px 55px}.scratch-scroll #scratchArea{width:200px}.scratch-scroll p{margin-bottom:8px}.scratch-scroll h2{font-size:21px;margin-bottom:8px}.modal-scroll{min-height:360px}}@media(max-width:700px){#hud{padding:14px 13px;gap:6px}#hud button{padding:7px 10px}#hud button span{display:none}#chapter{font-size:9px}#sceneTitle{font-size:20px;max-width:245px}#home{background-size:auto 100%}.home-title{top:4%;left:4%;width:92%}.home-title h1{font-size:49px}.home-title h2{font-size:17px}.home-title p{font-size:14px;margin-bottom:9px}.home-title>p:first-child{font-size:9px}.home-heroes{height:27%;left:-3%;bottom:48px;max-width:36%;z-index:2;pointer-events:none}.home-scroll{top:25%;right:1%;width:92%;height:66%;max-width:none;padding:55px 38px 56px 55px}.home-scroll h3{font-size:23px}.home-scroll p{font-size:15px;line-height:1.45;margin-bottom:12px}.home-scroll button{font-size:13px}.home-scroll>div{padding-left:15px}.home-scroll .text-button{margin-top:4px}#sceneCompanions{width:65px;left:5px;bottom:52px}#navigation{bottom:54px;gap:8px}#viewHint{font-size:10px;padding:8px;max-width:180px;text-align:center;white-space:normal}#labelTray{width:96%;bottom:113px;padding:10px 8px}#labelTray p{font-size:12px;margin-bottom:7px}#labels{gap:5px;max-height:146px;overflow:auto}#labels button{font-size:13px;padding:7px 10px}#namingProgress{margin-top:5px}.paper-panel{width:calc(100% - 24px);right:12px;top:auto;bottom:55px;max-height:52dvh;padding:24px}.paper-panel h2{font-size:24px}.paper-panel p{font-size:14px;margin-bottom:10px}.paper-panel label{font-size:15px}.paper-panel .close{top:8px;right:8px}.paper-panel .eyebrow{padding-right:35px;font-size:9px}#openPanel{top:auto;bottom:65px;right:15px}#resetView{top:92px;left:12px;font-size:12px;padding:8px}#dropCauldron{left:20%;top:22%;width:60%;height:26%}#toast{bottom:106px;font-size:15px;padding:12px 17px}footer{gap:4px}footer button{font-size:10px;padding:6px}#modalBody{font-size:16px}.modal-scroll{padding:76px 48px 65px;min-height:390px}.modal-scroll h2{font-size:23px!important}.modal-scroll .close{right:27px;top:44px}.scratch-scroll{padding:62px 40px 52px}#scratchArea{width:230px}#scratchReward p{font-size:14px}.scratch-scroll h2{font-size:21px}#scratchInstruction{font-size:14px}.ending-inner{width:94%;margin:45px auto 80px}.ending-heroes{display:none}.ending-inner>p{font-size:16px}#certificateForm{width:94%;padding:25px}.target span{font-size:12px;padding:4px 7px}.target.spark{font-size:38px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}
/* Keep the start action visible within the illustrated scroll. */
@media(min-width:701px){.home-scroll{padding:95px 55px 85px}.home-scroll>div{max-height:100%;overflow:auto}.home-scroll p{font-size:clamp(16px,1.25vw,21px)}.home-scroll h3{font-size:clamp(23px,2vw,30px)}}
@media(min-width:701px) and (max-height:680px){.home-scroll{padding:75px 45px}.home-scroll p{font-size:14px;line-height:1.35;margin-bottom:10px}.home-scroll h3{font-size:23px;margin-bottom:12px}}
@media(max-width:700px){.home-title h1{font-size:10vw;letter-spacing:.015em}.home-title h2{font-size:3.6vw;letter-spacing:.01em}.home-title>p:first-child{letter-spacing:.17em}.paper-panel .eyebrow{line-height:1.6}.home-heroes{max-width:31%;left:0}.home-scroll>div{padding-left:5px}}