@font-face{font-family:CraftriaArabic;src:url('/baloo-500.ttf') format('truetype');font-weight:500;font-display:swap}@font-face{font-family:CraftriaArabic;src:url('/baloo-700.ttf') format('truetype');font-weight:700;font-display:swap}.shell{font-family:CraftriaArabic,Tahoma,Arial,sans-serif;font-weight:500}.reference-stage button,.reference-stage a{font-family:inherit}.ref-skill strong,.ref-branches h2{line-height:1.25}
/* Reference composition stays proportional: actual controls over clean artwork. */
.shell{container-type:inline-size;background-position:center}.page h1{letter-spacing:0}.menu-top .account-link svg{width:25px;height:25px}.primary{background:linear-gradient(160deg,#96f2ff,#24c9f3 45%,#009ada);border:1.5px solid #037cb7;border-radius:30px;color:#073555;box-shadow:inset 0 2px 0 #c8faff,0 4px 0 #1b6f9a,0 8px 18px #123a5926}.secondary{border:1.5px solid #6088a8;border-radius:27px;background:linear-gradient(#fff,#edf7ff);box-shadow:inset 0 2px 0 white,0 3px 0 #567b9a35}.primary:disabled{background:#cedfe9;color:#38566d;box-shadow:none;opacity:.8}.nav{border-radius:25px 25px 0 0;border:1.5px solid #92b1ca;box-shadow:0 -5px 20px #17446012;background:linear-gradient(#fff,#e9f5fc);padding:12px 6px max(14px,env(safe-area-inset-bottom))}.nav button{position:relative;font-size:14px;color:#31536f;gap:7px;border-radius:12px;min-height:56px}.nav button span{height:29px}.nav button svg{width:27px;height:27px;display:block}.nav button.active:not([data-page="home"]){background:#d6ecfb9c;color:#0878b2}.nav button.active:after{content:'';position:absolute;bottom:-4px;left:23%;right:23%;height:3px;background:#198ac2;border-radius:4px}.nav button[data-page="home"]{transform:translateY(-20px);margin-bottom:-20px}.nav button[data-page="home"] span{display:grid;place-items:center;width:65px;height:65px;padding:0;border-radius:50%;background:linear-gradient(140deg,#365e82,#092b48);border:2px solid #8eb7d5;box-shadow:0 4px 0 #698da8,0 0 0 4px #f5fcff9c}.nav button[data-page="home"] svg{fill:#f3fbff;color:#f3fbff;width:33px;height:33px}.nav button[data-page="home"].active span{box-shadow:0 4px 0 #698da8,0 0 15px #23bcef65}.reference-screen{min-height:100svh;justify-content:center;padding:0}.reference-screen .menu-top{display:none}.reference-screen .page{padding:0;flex:none}.reference-stage{position:relative;isolation:isolate;width:100%;aspect-ratio:2/3;color:#123553}.reference-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;pointer-events:none}.reference-screen .nav{position:relative;left:auto;bottom:auto;transform:none;width:100%;margin-top:-20%;height:20cqw;min-height:76px;z-index:6;padding:3cqw 1.3cqw 1.8cqw;border-radius:4cqw 4cqw 0 0;align-items:center}.reference-screen .nav button{font-size:clamp(12px,3.3cqw,17px);min-height:0}.reference-screen .nav button span{height:7cqw}.reference-screen .nav button svg{width:6.4cqw;height:6.4cqw}.reference-screen .nav button[data-page="home"]{transform:translateY(-3cqw);margin-bottom:-3cqw}.reference-screen .nav button[data-page="home"] span{height:13cqw;width:13cqw;min-height:46px;min-width:46px}.reference-screen .nav button[data-page="home"] svg{height:7cqw;width:7cqw}.ref-round{position:absolute;top:3%;width:9.3%;aspect-ratio:1;min-width:36px;display:grid;place-items:center;border-radius:50%;border:2px solid #f3fbff;background:linear-gradient(140deg,#325576,#102d4d);box-shadow:0 3px 0 #789bb5,0 5px 12px #24456730;color:#fff;font-size:clamp(23px,6.5cqw,35px);z-index:3}.ref-round svg{width:55%;height:55%;fill:#f9fdff}.ref-account{left:4%}.ref-settings{right:4%}.ref-progress{position:absolute;top:3.4%;left:16%;width:36%;height:4.9%;min-height:29px;display:flex;align-items:center;gap:6px;padding:5px 9px;background:#f7fcfff0;border:1.5px solid #9bbbd7;border-radius:14px;direction:ltr;box-shadow:0 3px 0 #789db82b}.ref-progress svg{width:20%;max-width:32px;fill:#6debff;color:#1585ba;flex-shrink:0}.ref-progress .progress{margin:0;flex:1;height:8px;border:1px solid #4586b4;background:#3e628e}.ref-progress .progress i{background:linear-gradient(90deg,#22c9f0,#a1ffff)}.ref-progress b{font-size:clamp(12px,3.3cqw,18px);white-space:nowrap}.ref-stage-label{position:absolute;top:57.7%;left:34%;width:32%;height:7.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.ref-stage-label h1{font-size:clamp(16px,4.3cqw,24px);line-height:1.2;margin:0 0 3px;white-space:nowrap}.ref-stage-label p{font-size:clamp(14px,3.6cqw,20px);margin:0;line-height:1.4;white-space:nowrap}.ref-play{position:absolute;left:24%;top:66%;width:52%;height:8.5%;min-height:46px;padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:6%;font-size:clamp(21px,5.5cqw,30px);border-width:2px;border-radius:40px;color:#fff;text-shadow:0 2px 1px #137ca5;font-weight:bold;margin:0;box-shadow:inset 0 0 0 4px #8fecff,0 4px 0 #116e9b,0 8px 16px #234b6524}.ref-play span{border-radius:50%;height:1.5em;width:1.5em;background:#1576ae70;box-shadow:inset 0 1px 0 #cbfaff;display:grid;place-items:center;text-shadow:none;line-height:1;font-size:1.1em;flex-shrink:0}.ref-choose{position:absolute;left:33%;top:77%;width:34%;height:4.9%;min-height:35px;display:flex;align-items:center;justify-content:center;gap:7%;font-size:clamp(13px,3.7cqw,20px);padding:5px 8px;margin:0;white-space:nowrap}.ref-choose svg{height:18px;width:18px}.ref-classic{position:absolute;top:83%;left:18%;width:64%;text-align:center;font-size:clamp(12px,2.9cqw,15px);text-decoration:underline;text-underline-offset:3px;color:#214d6f;text-shadow:0 1px white;background:#f8fdffaf;padding:4px;border-radius:12px}.ref-tree-title{position:absolute;top:6.1%;left:25%;width:50%;height:4.5%;display:grid;place-items:center;font-size:clamp(23px,5.9cqw,33px)!important;margin:0!important;white-space:nowrap}.ref-points{position:absolute;top:11.8%;left:37%;width:29%;height:4.5%;min-height:27px;display:grid;place-items:center;background:linear-gradient(#29496e,#123353);border:2px solid #addef5;color:#fff;border-radius:14px;font-size:clamp(13px,3.4cqw,19px);font-weight:bold;box-shadow:0 2px 0 #698da3}.ref-branches h2{position:absolute;left:var(--x);top:17.5%;transform:translateX(-50%);width:20%;height:6.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7fcfff5;border:1px solid #93b4ca;border-radius:14px;margin:0;font-size:clamp(14px,3.8cqw,21px);gap:2px;box-shadow:0 3px 0 #728fa552}.ref-branches svg{width:5cqw;height:5cqw;min-width:18px;min-height:18px}.ref-skill{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);height:12%;width:21%;background:transparent;padding:0;border:0;display:grid;place-items:center;opacity:1}.ref-medallion{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:13.4cqw;height:13.4cqw;border-radius:50%;border:3px solid #f3fcff;outline:1px solid #597e9f;box-shadow:0 3px 0 #577f9e;background:linear-gradient(140deg,#fff,#d9eafa);display:grid;place-items:center;color:#123e62}.ref-medallion svg{width:55%;height:55%}.ref-skill strong{position:absolute;top:calc(50% + 7.6cqw);left:-7%;width:114%;padding:3px 2px;border-radius:8px;background:#f4fbfff5;color:#113c5d;font-size:clamp(12px,3.1cqw,17px);line-height:1.2;font-weight:bold;border:1px solid #acd0e2;white-space:nowrap}.ref-skill small{display:none}.ref-skill.owned .ref-medallion{background:linear-gradient(#80eaff,#0cb7e7);box-shadow:0 3px 0 #3084ac,0 0 12px #3df4ff}.ref-skill.locked .ref-medallion{background:linear-gradient(#667d8d,#344b60);color:#d6e1eb;border-color:#aeb9bf;outline-color:#657b8b}.ref-skill.selected .ref-medallion{outline:3px solid #08a1d1;box-shadow:0 0 0 6px #e4fcffa1,0 0 20px #38daff}.ref-node-detail{position:absolute;left:28%;top:70%;width:53%;height:14.8%;display:flex;flex-direction:column;justify-content:center;gap:7px}.ref-detail-copy{display:flex;align-items:center;gap:8px;direction:ltr}.ref-detail-copy>div{direction:rtl;flex:1;min-width:0}.detail-symbol{display:grid;place-items:center;border:1px solid #9ecee3;border-radius:50%;width:10cqw;height:10cqw;color:#125388;background:#e7faff;flex-shrink:0}.detail-symbol svg{width:63%;height:63%}.ref-node-detail h2{font-size:clamp(16px,4.2cqw,24px);margin:0 0 2px;line-height:1.25}.ref-node-detail p{font-size:clamp(12px,3cqw,16px);margin:0;line-height:1.4}.ref-node-detail .primary{min-height:34px;border-radius:25px;padding:7px 9px;font-size:clamp(13px,3.3cqw,18px);line-height:1.25;margin:0}.ref-worlds .ref-settings{left:3%;right:auto;top:1.5%;width:7.5%;min-width:34px}.ref-world-label{position:absolute;left:50%;transform:translateX(-50%);width:38%;height:7%;background:transparent;border:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0;color:#113858}.world-label-3{top:5.4%}.world-label-2{top:20.5%}.world-label-1{top:35.5%}.world-label-0{top:49.1%;left:43%}.ref-world-label span{height:52%;display:grid;place-items:center;min-height:22px;color:#fff;filter:drop-shadow(0 1px 3px #27425f)}.ref-world-label span svg{width:25px;height:25px}.ref-world-label strong{white-space:nowrap;font-size:clamp(13px,3.5cqw,20px);line-height:1.3;background:#f5fbfff7;border:1px solid #759eb9;border-radius:13px;padding:5px 10px;box-shadow:0 2px 0 #466f8a24}.ref-world-label.selected strong{border-color:#0b9ac8;box-shadow:0 0 0 2px #97e7fd,0 2px 7px #237bbf40}.ref-levels{position:absolute;inset:0;pointer-events:none}.ref-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.ref-route polyline{stroke:#38d9ff;stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:6 6;stroke-linecap:round;fill:none;filter:drop-shadow(0 1px 3px #fff)}.ref-levels .map-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:10.5%;aspect-ratio:1;min-width:38px;min-height:38px;background:transparent;border:0;padding:0;display:grid;place-items:center;pointer-events:auto;opacity:1}.ref-levels .map-node>span{display:grid;place-items:center;width:82%;height:82%;border:2px solid #eaf8ff;outline:1px solid #7297b0;border-radius:50%;box-shadow:0 3px 0 #587990;background:linear-gradient(#a4b7c7,#70869d);color:#fff;font-size:clamp(15px,4.1cqw,23px);font-weight:bold}.ref-levels .map-node.done>span{background:linear-gradient(#50ddff,#008ecb);color:#fff;outline-color:#196c96}.ref-levels .map-node.current>span{background:linear-gradient(#e5ffff,#88e6fd);color:#094e84;outline:3px solid #0085c2;box-shadow:0 0 0 5px #c8faffce,0 0 18px #36c7ff}.ref-levels .map-node i{position:absolute;top:1%;right:4%;border-radius:50%;padding:1px 3px;font-style:normal;background:#fff;color:#0878a0;font-size:10px}.ref-world-detail{position:absolute;left:14%;top:76.7%;width:74%;height:8.3%;display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:center;direction:ltr}.ref-world-detail>div{direction:rtl;text-align:right;min-width:0}.ref-world-detail h2{font-size:clamp(16px,4.1cqw,23px);margin:0 0 2px;line-height:1.2}.ref-world-detail p{font-size:clamp(12px,2.9cqw,16px);line-height:1.4;margin:0}.ref-world-detail .primary,.ref-world-detail .secondary{direction:rtl;font-size:clamp(13px,3.4cqw,19px);padding:8px 5px;min-height:39px;margin:0;white-space:nowrap}.ref-details-link{position:absolute;top:100%;left:23%;width:60%;font-size:clamp(12px,2.8cqw,15px);background:#f4fbffd4;color:#254f6c;border-radius:10px;padding:4px;text-decoration:underline;text-underline-offset:2px}.reference-stage button:focus-visible,.reference-stage a:focus-visible{outline:3px solid #ffaa24;outline-offset:3px}.page-levels .level-node{font-size:20px}.page-levels .level-node:disabled{opacity:1}
@media(max-width:360px){.ref-progress{gap:4px;padding:4px 6px}.ref-stage-label{left:31%;width:38%}.ref-play{left:21%;width:58%}.ref-choose{left:29%;width:42%}.ref-node-detail{left:27%;width:57%;gap:4px}.ref-detail-copy{gap:5px}.ref-node-detail .primary{padding:5px;min-height:32px}.ref-skill strong{font-size:12px}.ref-world-detail{left:12%;width:77%}.ref-world-detail p{font-size:12px}.nav button{font-size:12px}}
@media(prefers-reduced-motion:reduce){.reference-screen *{animation:none!important;transition:none!important}}