@font-face{font-family:Arabic;src:url(fonts/arabic-regular.woff) format('woff');font-display:swap;font-weight:400}
@font-face{font-family:Arabic;src:url(fonts/arabic-bold.woff) format('woff');font-display:swap;font-weight:700}
@font-face{font-family:Kufi;src:url(fonts/kufi-bold.woff) format('woff');font-display:swap;font-weight:700}
:root{color-scheme:light;--ink:#122032;--muted:#445a6b;--sky:#84d8ff;--orange:#ff9a58;--dark:#101a26;--line:#cbdce5;--body:Arabic,Tahoma,sans-serif;--display:Kufi,Arabic,Tahoma,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:280px;color:var(--ink);font-family:var(--body);background:radial-gradient(ellipse at 92% 36%,#edf8ff 0,transparent 48%),#f8fafb}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #1786b6;outline-offset:4px}
.shell{width:min(1260px,calc(100% - 112px));margin-inline:auto}
.masthead{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;font:700 25px/1.4 var(--display)}
.brand img{display:block;width:44px;height:44px}
.mast-link{display:flex;align-items:center;gap:12px;color:#364f61;font-size:14px;font-weight:700;padding:10px 0}
.mast-link span{font-family:system-ui,sans-serif;color:#266e94;font-size:18px}
.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.94fr);gap:clamp(45px,7vw,112px);align-items:center;padding-block:clamp(46px,7vh,92px);min-height:calc(100svh - 150px)}
.intro{position:relative;isolation:isolate;padding-block:28px 42px}
h1{font:700 clamp(64px,7.55vw,116px)/1.24 var(--display);margin:19px 0 22px;letter-spacing:-.035em}
h1 em{color:#1b648d;font-style:normal}
h1 em span{font-family:system-ui,sans-serif;color:#ec7d34;margin-inline-start:9px}
.intro-copy{color:var(--muted);font-size:clamp(17px,1.5vw,21px);line-height:1.95;margin:0 0 28px;max-width:415px}
.launch-cta{display:inline-flex;align-items:center;gap:24px;min-height:51px;padding:7px 17px 7px 14px;background:#142637;color:#fff;border-radius:8px;font-size:15px;font-weight:700;transition:background .18s,transform .18s}
.launch-cta span{width:30px;height:30px;display:grid;place-items:center;border-radius:5px;background:#273e52;font:20px system-ui,sans-serif;color:#a9e4ff}
.launch-cta:hover{background:#214359;transform:translateY(-2px)}
.intro-art{position:relative;width:min(100%,440px);height:104px;margin-top:26px;border-bottom:1px solid #cbdfe9;display:flex;align-items:end;padding-bottom:1px;direction:ltr;opacity:.88;mask-image:linear-gradient(90deg,transparent 1%,black 26%)}
.intro-art-track{height:95px;display:flex;align-items:end;gap:5%;width:85%;padding-left:5%;background:repeating-linear-gradient(0deg,#c8deea66 0 1px,transparent 1px 19px)}
.intro-art i{width:7%;height:var(--h);border:1px solid #a5c9dd;border-bottom:0;background:linear-gradient(0deg,#daedf6,#edfbff);border-radius:3px 3px 0 0}
.intro-art i:nth-child(1){--h:19%}.intro-art i:nth-child(2){--h:34%}.intro-art i:nth-child(3){--h:28%}.intro-art i:nth-child(4){--h:54%}.intro-art i:nth-child(5){--h:46%}.intro-art i:nth-child(6){--h:63%}.intro-art i:nth-child(7){--h:58%}.intro-art i:nth-child(8){--h:79%}.intro-art i:nth-child(9){--h:94%;background:linear-gradient(0deg,#e6f3fb,#94d8ff)}
.art-source,.art-target{position:absolute;border-radius:50%;width:7px;height:7px;background:#48a3d1;left:54%;top:49%}
.art-target{left:83%;top:12%;background:#e6854e;box-shadow:0 0 0 4px #f7dac9}
.lab{background:var(--dark);color:#f4f8fb;border:1px solid #273b4d;border-radius:23px;padding:clamp(19px,2.35vw,32px);box-shadow:0 20px 42px #233f5424,0 4px 9px #172f4015;scroll-margin-top:20px;min-width:0}
.lab-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:17px}
.lab h2{font:700 clamp(23px,2.35vw,32px)/1.45 var(--display);margin:0 0 7px}
.lab p{font-size:14px;line-height:1.7;margin:0;color:#bdcfdb;max-width:300px}
.lab-symbol{display:grid;place-items:center;background:#1c3141;border:1px solid #345269;color:var(--sky);width:43px;height:43px;border-radius:11px;flex:none;font:700 32px/1 system-ui,sans-serif}
.levels{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #304355;background:#0c151e;padding:4px;border-radius:9px;gap:4px;margin-bottom:14px}
.levels button{border:0;border-radius:6px;background:transparent;color:#b9cad7;font-size:13px;font-weight:700;padding:5px 4px;min-height:36px;white-space:nowrap}
.levels button:hover{background:#24374a;color:white}
.levels button[aria-pressed=true]{background:#243c4e;color:#a9e5ff;box-shadow:inset 0 0 0 1px #40657b}
.board-frame{background:radial-gradient(ellipse at 50% 32%,#13222e,#0b141d);border:1px solid #293b4c;border-radius:13px;padding:12px}
.board{width:min(100%,340px);margin-inline:auto;display:grid;grid-template-columns:repeat(var(--size,5),minmax(0,1fr));gap:5px;aspect-ratio:1}
.tile{position:relative;isolation:isolate;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border-radius:7px;border:1px solid #314759;background:#182735;color:#7892a6;touch-action:manipulation;transition:background .16s,border-color .16s,color .16s}
button.tile:hover,button.tile:focus-visible{background:#273b4c;border-color:#6d9cb7;z-index:1}
button.tile:active{background:#345369}
.tile[data-active=true]{color:var(--sky);border-color:#3c6a81;background:#193b4d}
.tile[data-kind=target]{color:var(--orange);border-color:#744d39;background:#362721}
.tile[data-kind=target][data-active=true]{border-color:#e9955d;background:#56371f}
.tile[data-fixed=true]{cursor:default}
.tile[data-hinted=true]{border-color:#ffc397;box-shadow:inset 0 0 0 2px #f9aa70}
.pipe-art,.port{position:absolute;inset:0;pointer-events:none}
.port{inset:auto;background:currentColor;opacity:.82}
.port[data-dir='0'],.port[data-dir='2']{left:calc(50% - 2px);width:4px;height:50%}
.port[data-dir='1'],.port[data-dir='3']{top:calc(50% - 2px);height:4px;width:50%}
.port[data-dir='0']{top:0}.port[data-dir='1']{right:0}.port[data-dir='2']{bottom:0}.port[data-dir='3']{left:0}
.pipe-joint{position:absolute;background:currentColor;width:4px;height:4px;border-radius:50%;inset:calc(50% - 2px)}
.tile[data-active=true] .port,.tile[data-active=true] .pipe-joint{box-shadow:0 0 9px #73d6f870;opacity:1}
.tile-token{display:grid;place-items:center;z-index:1;background:#21394b;border:1px solid currentColor;border-radius:5px;color:#b2c6d4;font-size:13px;font-weight:700;line-height:1;width:22px;height:22px}
.tile[data-active=true] .tile-token{background:#78d6ff;color:#0d2a3a}
.tile[data-kind=source] .tile-token,.tile[data-kind=target] .tile-token{font:14px system-ui,sans-serif;border-radius:50%}
.tile[data-kind=target] .tile-token{background:#f5a169;color:#382117}
.checkpoints{display:flex;justify-content:space-between;gap:5px;list-style:none;margin:12px 0 0;padding:0;font-size:12px}
.step{display:flex;align-items:center;gap:4px;color:#abbdcb;white-space:nowrap}
.step span{display:grid;place-items:center;width:18px;height:18px;border:1px solid #456176;background:#203144;color:#d2e2ee;border-radius:5px;font:700 11px/1 system-ui,sans-serif}
.step[data-lit=true]{color:#b8eaff}.step[data-lit=true] span{background:#78d6ff;color:#0e2f42;border-color:#78d6ff}
.step[data-step=target] span{color:#ffc098;border-color:#7c5846;background:#4c3025}
.step[data-step=target][data-lit=true] span{color:#382117;border-color:#eca576;background:#f5a169}
.game-status{color:#acd8eb;min-height:29px;font-size:12.5px;display:flex;align-items:center;padding-block:4px}
.lab[data-won=true] .game-status{color:#ffd1ad;font-weight:700}
.lab-footer{border-top:1px solid #304252;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.score,.game-actions{display:flex;align-items:center;gap:12px}
.score>div{display:grid;gap:4px}
.score>div:first-child{border-inline-end:1px solid #394d5d;padding-inline-end:12px}
.score span{color:#b6c7d3;font-size:11px;white-space:nowrap}
.score strong{color:#f4f8fb;font-size:18px;line-height:1;font-weight:700}
.game-actions{gap:6px}
.game-actions button{border:1px solid #3d566a;background:#1c2e40;color:#e1edf4;border-radius:7px;min-height:40px;white-space:nowrap;font-size:12px;font-weight:700;padding:5px 9px}
.game-actions button:hover{background:#2d4a60}
.game-actions button:disabled{opacity:.48;cursor:default}
.game-actions span{color:#9cdef7;margin-inline-start:3px;font:14px system-ui,sans-serif}
.lab[data-won=true] .restart{background:#f1a269;border-color:#f1a269;color:#2c1c13}
.lab[data-won=true] .restart span{color:#2c1c13}
.page-foot{min-height:54px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:13px;color:#526b7c}
.page-foot bdi{font:12px system-ui,sans-serif;letter-spacing:.07em}
@media(max-width:1080px){.shell{width:calc(100% - 72px)}.spread{gap:44px}.board{width:min(100%,306px)}}
@media(min-width:851px) and (max-height:830px){.masthead{height:78px}.spread{min-height:calc(100svh - 132px);padding-block:35px}.lab{padding-block:21px}.board{width:min(100%,288px)}.intro-art{height:80px}.intro-art-track{height:76px}}
@media(max-width:850px){.shell{width:min(620px,calc(100% - 44px))}.masthead{height:72px}.spread{grid-template-columns:minmax(0,1fr);gap:32px;padding-block:44px 34px;min-height:auto}.intro{padding:0}.intro-art{display:none}h1{font-size:clamp(53px,11vw,96px);margin:14px 0 14px}.intro-copy{font-size:17px;margin-bottom:18px}.lab{padding:20px}.board{width:min(100%,340px)}}
@media(max-width:380px){.shell{width:calc(100% - 26px)}.brand{font-size:21px}.brand img{width:37px;height:37px}.spread{padding-block:33px 25px;gap:24px}.lab{padding:13px;border-radius:17px}.lab-symbol{width:35px;height:35px}.board-frame{padding:8px}.board{gap:4px}.tile-token{width:19px;height:19px}.score{gap:7px}.score>div:first-child{padding-inline-end:7px}.game-actions button{padding-inline:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}