:root{--navy:#07162d;--panel:#0d2445;--cyan:#28d7ff;--blue:#168dff;--violet:#8d4cff;--green:#35df89;--gold:#ffd54a;--red:#ff5e73;--text:#f5fbff;--muted:#a9c4dd}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#030914;color:var(--text);font-family:"Tahoma","Noto Sans Thai",system-ui,sans-serif}button,input{font:inherit}.screen{display:none;min-height:100vh}.screen.active{display:block}.start-screen{background:linear-gradient(90deg,rgba(2,8,20,.8),rgba(2,8,20,.35)),url('assets/city_clean.png') center/cover no-repeat}.start-overlay{min-height:100vh;display:flex;justify-content:center;align-items:center;gap:40px;padding:40px}.byte-hero{width:min(28vw,330px);filter:drop-shadow(0 20px 22px #0008);image-rendering:auto}.start-card{width:min(620px,92vw);background:linear-gradient(180deg,#0a1d39ee,#071326f3);border:2px solid #2ccfff99;border-radius:26px;padding:42px;box-shadow:0 30px 80px #0009,inset 0 0 40px #0ea5ff18}.eyebrow{display:inline-block;color:var(--cyan);font-weight:800;letter-spacing:.08em;font-size:.8rem}.start-card h1{font-size:clamp(2.7rem,6vw,5rem);line-height:.94;margin:14px 0 20px;text-shadow:0 0 25px #1ea7ff88}.start-card h1 span{color:var(--gold)}.start-card p{color:#d9ecff;font-size:1.15rem;line-height:1.7}.primary,.ghost,.back,.choice,.action-btn{border:0;border-radius:13px;padding:13px 22px;cursor:pointer;font-weight:800;transition:.18s transform,.18s filter}.primary{background:linear-gradient(180deg,#2ee8ff,#1285ff);color:#031329;box-shadow:0 6px 0 #0757a4}.primary:hover,.choice:hover,.action-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.big{font-size:1.1rem;min-width:200px}.ghost{background:#132945;color:#dff7ff;border:1px solid #57dfff55;margin-left:10px}.topbar{height:84px;background:#07162df2;border-bottom:1px solid #39cfff44;display:flex;align-items:center;justify-content:space-between;padding:12px 26px;position:relative;z-index:10}.topbar strong{font-size:1.25rem}.topbar small{display:block;color:var(--muted);margin-top:4px}.progress-wrap{display:flex;align-items:center;gap:10px}.badge-icons{display:flex;gap:6px}.badge-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#172b44;border:1px solid #526b84;color:#7890a7;filter:grayscale(1)}.badge-dot.on{background:#173c50;border-color:var(--cyan);color:white;filter:none;box-shadow:0 0 14px #23d9ff66}.progress-line{width:160px;height:10px;background:#15263b;border-radius:99px;overflow:hidden}.progress-line span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));transition:.4s}.hub-screen{background:#050b15}.hub-map{height:calc(100vh - 84px);min-height:650px;position:relative;overflow:hidden}.city-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95}.building{position:absolute;background:transparent;border:0;cursor:pointer;padding:0;filter:drop-shadow(0 8px 12px #0008);transition:.18s transform,.18s filter}.building:hover{transform:scale(1.045);filter:drop-shadow(0 0 18px #28d7ffaa)}.building img{width:100%;display:block}.building span{position:absolute;left:50%;bottom:-8px;transform:translate(-50%,100%);background:#07162de8;border:1px solid #45d9ff88;border-radius:10px;padding:7px 12px;white-space:nowrap;color:white;font-weight:800}.building span small{display:block;color:#a9c4dd;font-weight:500}.building.completed:after{content:'✓';position:absolute;right:4%;top:7%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#1bd87d;color:#062419;font-weight:900;border:3px solid white}.building.locked{filter:grayscale(.55) brightness(.65);cursor:not-allowed}.building.cafe{width:20%;left:6%;top:5%}.building.school{width:23%;left:38.5%;top:3%}.building.game{width:22%;right:5%;top:8%}.building.park{width:20%;left:6%;bottom:5%}.building.tower{width:23%;right:7%;bottom:4%}.hub-byte{position:absolute;left:49%;top:53%;transform:translate(-50%,-50%);text-align:center}.hub-byte img{width:72px}.hub-byte span{display:block;background:#091a30c9;border:1px solid #28d7ff88;border-radius:8px;padding:3px 8px}.tiny.reset{position:fixed;bottom:12px;right:14px;background:#1b2940;color:#a9c4dd;border:1px solid #44566c;border-radius:8px;padding:7px 10px;z-index:15}.mission-screen{position:relative;background:#020812;overflow-x:hidden}.mission-bg{position:fixed;inset:0;background-size:cover;background-position:center;filter:brightness(.52) saturate(.9);transform:scale(1.02)}.mission-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#020711cc,#02071144 55%,#02071188)}.mission-top{position:sticky;top:0}.back{background:#132a47;color:white;border:1px solid #43dfff77}.mini-progress{background:#122a46;border:1px solid #34d9ff55;border-radius:12px;padding:10px 14px}.mission-content{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:36px 24px 60px}.story-layout{display:grid;grid-template-columns:290px 1fr;gap:28px;align-items:end}.npc-panel{text-align:center}.npc-panel img{max-height:470px;max-width:100%;filter:drop-shadow(0 18px 20px #000a)}.dialogue-card,.lesson-card,.quest-card,.result-card{background:linear-gradient(180deg,#0a203deF,#07162df2);border:1px solid #40d8ff77;border-radius:20px;padding:26px;box-shadow:0 18px 50px #0008}.dialogue-card h3{margin:0 0 10px;color:var(--cyan)}.dialogue-card p{font-size:1.23rem;line-height:1.75;margin:8px 0}.dialogue-actions{margin-top:22px;text-align:right}.lesson-card h2,.quest-card h2{margin-top:0}.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.tip{background:#102b4a;border:1px solid #2aa7e944;border-radius:13px;padding:14px;line-height:1.5}.tip b{color:var(--gold)}.quest-card{max-width:820px;margin:0 auto}.password-box input{width:100%;padding:17px 18px;border-radius:12px;background:#061225;border:2px solid #278fd0;color:white;font-size:1.25rem;outline:none}.password-box input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px #1ad3ff18}.checklist{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.check-item{padding:11px 13px;border-radius:10px;background:#12263e;color:#9db2c9}.check-item.pass{background:#103b2b;color:#bfffe0;border:1px solid #32db8c66}.check-item.fail{background:#3c1a24;color:#ffd0d8;border:1px solid #ff5e7366}.action-btn{background:#1a3859;color:white;border:1px solid #46d7ff66}.feedback{margin-top:14px;padding:13px 15px;border-radius:11px;background:#08192e;color:#cfe9ff;min-height:48px}.phish-message{background:#f7f9fd;color:#10213a;border-radius:16px;padding:20px;box-shadow:0 12px 30px #0006}.phish-message .from{font-weight:800;border-bottom:1px solid #ccd7e5;padding-bottom:10px}.phish-target{display:inline-block;border-radius:7px;padding:3px 6px;cursor:pointer;border:2px dashed transparent}.phish-target:hover{background:#fff0c5}.phish-target.found{background:#ffe1e5;border-color:#ff556b;color:#8f1021}.found-counter{text-align:center;margin:15px;font-weight:800;color:var(--cyan)}.privacy-stage{position:relative;border-radius:16px;overflow:hidden;border:2px solid #42d8ff55}.privacy-stage img{width:100%;display:block}.hotspot{position:absolute;background:#24d8ff12;border:2px dashed #24d8ff00;cursor:pointer;border-radius:12px}.hotspot:hover{border-color:#24d8ff99;background:#24d8ff1f}.hotspot.found{border-color:#37e48e;background:#37e48e2f}.social-post{background:#f7f9fd;color:#17243a;border-radius:16px;padding:18px;margin:15px 0}.social-post .user{font-weight:800}.social-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.choice{background:#173754;color:white;border:1px solid #4a91c5}.choice.bad{background:#4b2030;border-color:#aa536d}.choice.good{background:#164831;border-color:#39d890}.choice.selected{outline:3px solid var(--gold)}.badge-award{text-align:center;padding:26px}.badge-award .medal{font-size:5rem;filter:drop-shadow(0 0 20px #ffd84a88)}.badge-award h2{color:var(--gold);font-size:2rem}.modal{position:fixed;inset:0;z-index:100;background:#020711d9;display:grid;place-items:center;padding:20px}.modal.hidden{display:none}.modal-card{max-width:650px;width:100%;background:#0b203c;border:1px solid #39d7ff88;border-radius:20px;padding:28px;box-shadow:0 25px 80px #000}.modal-card h2{margin-top:0;color:var(--cyan)}.toast{position:fixed;left:50%;bottom:28px;z-index:120;transform:translate(-50%,20px);opacity:0;background:#071a2f;border:1px solid #32d9ff88;border-radius:12px;padding:12px 18px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.ending-screen{background:radial-gradient(circle at 50% 30%,#164b76,#051022 55%,#02050b);display:none;place-items:center;padding:30px}.ending-screen.active{display:grid}.ending-card{text-align:center;max-width:760px}.ending-card img{width:220px}.ending-card h2{font-size:2.5rem}.ending-card h2 b{color:var(--gold);font-size:1.25em}.ending-badges{display:flex;gap:12px;justify-content:center;margin:20px}.ending-badges span{background:#0e2b47;border:1px solid #2ad8ff66;border-radius:12px;padding:10px 13px}@media(max-width:760px){.start-overlay{flex-direction:column}.byte-hero{width:150px}.start-card{padding:26px}.hub-map{min-height:720px}.building.cafe,.building.school,.building.game,.building.park,.building.tower{width:29%}.building.cafe{left:2%;top:4%}.building.school{left:34%}.building.game{right:1%}.building.park{left:2%;bottom:4%}.building.tower{right:3%}.story-layout{grid-template-columns:1fr}.npc-panel img{max-height:260px}.lesson-grid,.checklist{grid-template-columns:1fr}.progress-line{display:none}.topbar{padding:10px 12px}.badge-icons{display:none}}
.choice:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.wrong-pick{outline:3px solid var(--red)!important;animation:shake .28s linear 1}
.challenge-score{margin-top:12px;text-align:right;color:var(--gold);font-weight:800}
.final-status{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:#08192e;border:1px solid #2bd8ff55;border-radius:12px;padding:10px 14px;margin:12px 0 16px;font-weight:800;color:#dff7ff}
.final-question code{background:#101c2d;padding:3px 7px;border-radius:6px;color:#ffd86a}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}