@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600;700&display=swap');*{box-sizing:border-box}html,body,#app,.screen{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Mitr",system-ui,sans-serif;color:#173b59}button{font:inherit;cursor:pointer}.screen{position:fixed;inset:0;background:url('assets/floating-island-bg.png') center/cover no-repeat}.hidden{display:none!important}.intro{display:grid;place-items:center;padding:12px}.intro:after{content:"";position:absolute;inset:0;background:#167eaa35}.intro-card{z-index:1;width:min(610px,92vw);max-height:calc(100dvh - 26px);padding:clamp(14px,3vh,34px);text-align:center;background:#fffdf0ed;border:5px solid #fff;border-radius:38px;box-shadow:0 12px 0 #276d86,0 23px 48px #15465f77}.island{font-size:clamp(52px,11vh,95px);line-height:1;animation:float 2.3s ease-in-out infinite}.intro p{margin:4px;color:#df6941;font-weight:700}.intro h1{margin:3px;font-size:clamp(34px,6.3vh,58px);line-height:1.09;color:#217396}.symbols{display:flex;justify-content:center;gap:13px;margin:12px}.symbols b{display:grid;place-items:center;width:64px;height:58px;border-radius:17px;background:linear-gradient(#ffd94a,#efa51e);font-size:38px;box-shadow:0 6px #bc6f14}.intro-card>span{display:block;font-size:clamp(15px,2.4vh,20px);margin-bottom:17px}.primary{border:0;border-radius:20px;padding:clamp(9px,1.8vh,14px) 44px;background:linear-gradient(#82df55,#32a94f);color:#fff;font-size:clamp(18px,2.8vh,23px);font-weight:700;box-shadow:0 7px 0 #1b7839}.hud{position:absolute;z-index:20;top:max(9px,env(safe-area-inset-top));left:11px;right:11px;height:65px;display:grid;grid-template-columns:1fr minmax(230px,1.2fr) 1fr;align-items:center;gap:16px;padding:8px 15px;background:#f8fff3ed;border:3px solid #fff;border-radius:22px;box-shadow:0 6px 0 #276e83}.brand{font-size:clamp(15px,1.7vw,23px);font-weight:700}.progress{text-align:center}.progress>div{height:9px;margin-top:4px;border-radius:7px;background:#d7e3de;overflow:hidden}.progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#56c7e8,#8be158);transition:.4s}.stats{display:flex;align-items:center;justify-content:flex-end;gap:9px;font-size:20px}.stats button{width:40px;height:40px;border:2px solid #bcd9d5;border-radius:12px;background:#fff;box-shadow:0 3px #80aaa7}.mission{position:absolute;z-index:10;top:91px;left:50%;transform:translateX(-50%);width:min(620px,90vw);padding:7px 18px 9px;text-align:center;background:#fffdf0f2;border:4px solid #fff;border-radius:23px;box-shadow:0 6px 0 #e4a42b}.mission strong{display:block;font-size:clamp(20px,2.4vw,29px)}.mission small{color:#607785}.board{position:absolute;z-index:5;top:190px;left:10%;right:10%;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(9px,1.4vw,20px)}.equation{display:grid;grid-template-columns:1fr;grid-template-rows:1fr .72fr 1fr;place-items:center;min-height:clamp(230px,37vh,355px);padding:10px;border-radius:35px;background:linear-gradient(145deg,#e8ffe0dd,#89cc70dd);border:5px solid #eaffdf;box-shadow:0 12px 0 #397a4b,0 17px 24px #173b5944;transform:rotate(var(--tilt))}.stone{display:grid;place-items:center;width:clamp(72px,8vw,120px);aspect-ratio:1;border-radius:35% 42% 38% 45%;background:linear-gradient(145deg,#fffdf2,#d7e5d6);border:4px solid #fff;box-shadow:0 7px 0 #6f8d82;color:#1b4765;font-size:clamp(30px,4vw,56px);font-weight:700}.slot{display:grid;place-items:center;width:clamp(65px,7vw,105px);height:clamp(52px,7vh,72px);border:4px dashed #2f7d9b;border-radius:18px;background:#fff;color:#26718e;font-size:clamp(32px,4vw,55px);font-weight:700}.slot.selected{outline:7px solid #ffd33d;transform:scale(1.06)}.slot.correct{border-style:solid;border-color:#38aa50;background:#dffff0}.operators{position:absolute;z-index:12;bottom:2.5%;left:50%;transform:translateX(-50%);display:flex;gap:clamp(13px,3vw,40px)}.operators button{display:grid;grid-template-columns:1fr;place-items:center;width:clamp(105px,13vw,175px);height:clamp(75px,10vh,102px);border:5px solid #fff;border-radius:23px;background:linear-gradient(#fff9d8,#ffd541);color:#174461;font-size:clamp(33px,4vw,51px);font-weight:700;line-height:1;box-shadow:0 8px 0 #b46e13}.operators small{font-size:clamp(11px,1.3vw,16px)}.toast{position:absolute;z-index:40;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;padding:13px 28px;border-radius:28px;background:#fff;font-size:29px;font-weight:700}.toast.show{animation:toast .85s}.modal{position:fixed;z-index:99;inset:0;display:grid;place-items:center;padding:20px;background:#18526f99;backdrop-filter:blur(7px)}.modal-card{width:min(560px,92vw);padding:32px;text-align:center;background:#fffdf0;border:5px solid #fff;border-radius:35px;box-shadow:0 12px 0 #276d86}.modal-card>div{font-size:75px}.modal h2{margin:0;font-size:clamp(34px,5vw,57px);color:#26718e}.modal p{font-size:20px}@keyframes float{50%{transform:translateY(-8px)}}@keyframes toast{20%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:750px){.hud{height:57px;grid-template-columns:1fr 1fr}.brand span{display:none}.progress{position:absolute;left:24%;right:24%;top:6px;font-size:13px}.stats button{width:34px;height:34px}.mission{top:78px;padding:5px 12px}.board{top:167px;left:2%;right:2%;gap:5px}.equation{min-height:235px;padding:4px;border-width:3px;border-radius:20px}.stone{width:57px;font-size:27px;border-width:2px}.slot{width:52px;height:45px;font-size:29px}.operators{bottom:2%;gap:9px}.operators button{width:92px;height:70px;border-radius:17px}.symbols b{width:53px;height:48px}.intro-card{padding:10px 22px}}@media(max-height:650px){.intro-card{padding:8px 22px}.island{font-size:46px}.intro h1{font-size:30px}.symbols{margin:7px}.symbols b{height:44px}.hud{height:54px}.mission{top:75px;padding:4px}.board{top:150px}.equation{min-height:220px}.operators{bottom:1%}.operators button{height:67px}}

/* Crossword-style comparison table */
.board{top:183px;left:50%;right:auto;transform:translateX(-50%);width:min(650px,78vw);height:min(540px,58vh);display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:5px;padding:11px;border:5px solid #f8ffe9;border-radius:28px;background:#efffe0e8;box-shadow:0 12px 0 #397a4b,0 18px 28px #173b594c}
.grid-cell{display:grid;place-items:center;min-width:0;min-height:0;border:3px solid #548273;background:#fffdf2;color:#183f5c;font-weight:700}.number-node{font-size:clamp(27px,4.2vh,49px);background:linear-gradient(145deg,#fffef6,#dce9dc);box-shadow:inset 0 -5px #c1d4c8}.board .slot{width:100%;height:100%;border:3px dashed #2f7d9b;border-radius:8px;background:#e7faff;font-size:clamp(28px,4.3vh,51px)}.board .slot.selected{outline:5px solid #ffd33d;z-index:2}.board .slot.correct{border-style:solid;border-color:#38aa50;background:#dffff0}.junction{border:0;background:transparent;position:relative}.junction:before,.junction:after{content:"";position:absolute;background:#89b692;border-radius:4px}.junction:before{left:0;right:0;height:8px}.junction:after{top:0;bottom:0;width:8px}
.toast{pointer-events:none}.board .slot{position:relative;z-index:1;touch-action:manipulation}.junction:before,.junction:after{pointer-events:none}
@media(max-width:750px){.board{top:160px;width:min(560px,94vw);height:min(450px,54vh);gap:3px;padding:7px}.grid-cell{border-width:2px}.operators{bottom:1%}}
@media(max-height:650px){.board{top:145px;width:min(560px,70vw);height:390px}.number-node{font-size:27px}.board .slot{font-size:30px}}