:root{
  --bg:#061521;
  --bg2:#081d2b;
  --panel:#0b2131;
  --panel2:#0d2739;
  --text:#f3f8fb;
  --muted:#89a7b8;
  --line:rgba(130,211,244,.20);
  --accent:#63d6ff;
  --accent2:#a7ecff;
  --green:#63ff74;
  --warm:#ffd36b;
  --shadow:0 24px 80px rgba(0,0,0,.28);
  --max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:
  radial-gradient(circle at 70% 10%,rgba(24,95,130,.14),transparent 26%),
  linear-gradient(180deg,#061521 0%,#071826 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans Thai",Tahoma,Arial,sans-serif;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
header{position:fixed;z-index:60;inset:0 0 auto;background:rgba(5,19,30,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.03em}
.brand img{width:28px;height:28px;border-radius:8px;box-shadow:0 0 28px rgba(99,214,255,.25)}
.nav-actions{display:flex;align-items:center;gap:9px}
.nav-link,.ghost,.install-btn,.lang-btn{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);padding:10px 14px;border-radius:999px;cursor:pointer;transition:.2s ease}
.nav-link:hover,.ghost:hover,.install-btn:hover,.lang-btn:hover{border-color:rgba(99,214,255,.44);background:rgba(99,214,255,.08)}
.install-btn{display:none;background:var(--accent);color:#03202d;border-color:transparent;font-weight:800}
.lang-menu{position:relative}
.lang-pop{display:none;position:absolute;top:48px;right:0;width:220px;padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#0a1d2b;box-shadow:var(--shadow)}
.lang-pop.open{display:block}
.lang-pop button,.lang-pop a{display:block;width:100%;padding:10px 12px;border:0;background:transparent;border-radius:12px;text-align:left;cursor:pointer;color:var(--text)}
.lang-pop button:hover,.lang-pop a:hover{background:rgba(255,255,255,.06)}
.lang-pop .tiny{padding:7px 12px;color:var(--muted);font-size:.74rem;line-height:1.45}

.hero{min-height:100svh;display:flex;align-items:center;padding:112px 0 60px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.35fr);gap:28px;align-items:center}
.eyebrow,.kicker{font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);font-weight:800}
.eyebrow{display:flex;gap:9px;align-items:center}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45;transform:scale(.8)}}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(3.4rem,7.4vw,7rem);line-height:.88;letter-spacing:-.075em;margin:20px 0 22px;max-width:720px}
h1 span{display:block;color:#6d8798;-webkit-text-stroke:1px rgba(225,244,252,.28);color:transparent}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:#b5cad6;line-height:1.75;max-width:650px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.primary{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;background:var(--accent);color:#06202c;font-weight:850;box-shadow:0 12px 30px rgba(99,214,255,.16)}
.solar-shell{height:min(72vh,720px);min-height:530px;position:relative;border-radius:42px;overflow:hidden;background:radial-gradient(circle at center,rgba(10,31,45,.38),rgba(4,14,22,.03) 68%,transparent);border:1px solid rgba(99,214,255,.08)}
#solarCanvas{width:100%;height:100%;display:block}
.solar-note{position:absolute;right:18px;bottom:16px;color:#7996a6;font-size:.72rem;letter-spacing:.06em;background:rgba(4,17,26,.72);border:1px solid rgba(255,255,255,.08);padding:8px 10px;border-radius:999px}
.scroll-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#668493}

section{padding:110px 0}
.section-head{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:end;margin-bottom:34px}
.section-head h2{font-size:clamp(2.7rem,5.3vw,5.6rem);letter-spacing:-.065em;line-height:.95;margin:10px 0 0}
.section-head p{color:var(--muted);font-size:1.05rem;line-height:1.8;max-width:680px;margin:0;justify-self:end}

.conversation{position:relative}
.chat-shell{display:grid;grid-template-columns:340px 1fr;gap:0;border:1px solid var(--line);border-radius:36px;overflow:hidden;background:linear-gradient(145deg,rgba(99,214,255,.06),rgba(255,255,255,.015));box-shadow:var(--shadow);min-height:560px}
.sky-stage{padding:34px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 50% 35%,rgba(99,214,255,.16),transparent 38%),rgba(2,15,24,.44);border-right:1px solid var(--line)}
.sky-stage img{display:block;width:100%;max-width:300px;aspect-ratio:4/3;object-fit:contain;filter:drop-shadow(0 18px 42px rgba(0,0,0,.25))}
.sky-caption{font-size:.85rem;color:var(--muted);line-height:1.6}.sky-caption strong{color:var(--text)}
.ai-status{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:7px 10px;border:1px solid rgba(99,214,255,.22);border-radius:999px;font-size:.73rem;color:#9dc8da;background:rgba(99,214,255,.045)}
.ai-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.chat-panel{display:flex;flex-direction:column;min-width:0}.chat-top{padding:24px 26px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-top h3{margin:0;font-size:1.22rem}.chat-top small{color:var(--muted)}
.chat-log{flex:1;padding:26px;display:flex;flex-direction:column;gap:14px;overflow:auto;max-height:390px;scrollbar-width:thin}.bubble{max-width:min(78%,680px);padding:13px 15px;border-radius:18px;line-height:1.62;font-size:.96rem;white-space:pre-wrap}.bubble.sky{align-self:flex-start;background:#0c2a3c;border:1px solid rgba(99,214,255,.14);border-bottom-left-radius:6px}.bubble.user{align-self:flex-end;background:#d7f6ff;color:#06202b;border-bottom-right-radius:6px}.bubble.system{align-self:center;color:#7691a0;font-size:.78rem;padding:4px 0}
.chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:18px;border-top:1px solid rgba(255,255,255,.07);background:rgba(3,16,25,.52)}.chat-form textarea{resize:none;min-height:52px;max-height:150px;border:1px solid rgba(255,255,255,.13);background:#071a28;color:var(--text);padding:14px 15px;border-radius:16px;outline:none}.chat-form textarea:focus{border-color:rgba(99,214,255,.52);box-shadow:0 0 0 3px rgba(99,214,255,.08)}.send-btn{border:0;border-radius:16px;padding:0 20px;background:var(--accent);color:#05202b;font-weight:900;cursor:pointer}.suggestions{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 16px}.suggestions button{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.025);border-radius:999px;padding:8px 11px;color:#a9c0cc;cursor:pointer;font-size:.8rem}.suggestions button:hover{border-color:rgba(99,214,255,.38);color:var(--text)}

.business-intro{text-align:center;max-width:880px;margin:0 auto 34px}.business-intro h2{font-size:clamp(2.5rem,5vw,5rem);letter-spacing:-.06em;line-height:.98;margin:11px 0 18px}.business-intro p{color:var(--muted);font-size:1.08rem;line-height:1.8}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{min-height:330px;padding:30px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(150deg,rgba(99,214,255,.065),rgba(255,255,255,.015));display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;transition:.28s ease}.card::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(99,214,255,.13),transparent 70%);top:-110px;right:-80px}.card:hover{transform:translateY(-4px);border-color:rgba(99,214,255,.42)}.card .num{position:absolute;top:25px;left:28px;color:var(--accent);font:700 .77rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}.card h3{font-size:clamp(1.55rem,2vw,2rem);margin:0 0 10px;letter-spacing:-.035em}.card p{color:#a7beca;line-height:1.75;margin-bottom:17px}.tagrow{display:flex;gap:7px;flex-wrap:wrap}.tag{font-size:.72rem;border:1px solid rgba(99,214,255,.19);border-radius:999px;padding:6px 9px;color:#b8d3df}

.play-section{padding-bottom:130px}.play-intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:32px}.play-intro h2{font-size:clamp(2.8rem,6vw,6.2rem);letter-spacing:-.07em;line-height:.9;margin:10px 0 0}.play-intro p{max-width:540px;color:var(--muted);line-height:1.8;margin:0}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.game-card{min-height:390px;border:1px solid var(--line);border-radius:34px;padding:30px;position:relative;overflow:hidden;background:#081d2b;display:flex;flex-direction:column;justify-content:space-between}.game-card::after{content:"";position:absolute;inset:auto -50px -90px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(99,214,255,.17),transparent 66%)}.game-card h3{font-size:clamp(2rem,4vw,4rem);letter-spacing:-.06em;line-height:.95;margin:10px 0}.game-card p{color:var(--muted);max-width:520px}.game-icon{width:74px;height:74px;border:1px solid rgba(99,214,255,.25);border-radius:23px;display:grid;place-items:center;font-size:2.1rem;background:rgba(99,214,255,.05)}.play-btn{z-index:1;width:max-content;border:0;border-radius:999px;background:var(--accent);color:#05202b;font-weight:900;padding:11px 17px;cursor:pointer}.play-btn:hover{filter:brightness(1.08)}

.closer{text-align:center;padding:120px 0 125px;border-top:1px solid rgba(255,255,255,.055)}.closer h2{font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.075em;margin:0 auto 25px;max-width:980px}.closer p{color:var(--muted);font-size:1.08rem}.closer .primary{margin-top:14px}
footer{border-top:1px solid rgba(255,255,255,.06);padding:26px 0 34px;color:#7894a4;font-size:.82rem}.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.foot-links{display:flex;gap:14px;flex-wrap:wrap}.foot a:hover{color:var(--text)}

.modal{position:fixed;z-index:100;inset:0;background:rgba(1,8,13,.83);backdrop-filter:blur(18px);display:none;padding:22px;overflow:auto}.modal.open{display:block}.modal-card{width:min(1080px,100%);margin:25px auto;background:#071a28;border:1px solid rgba(99,214,255,.2);border-radius:30px;box-shadow:0 34px 120px rgba(0,0,0,.45);overflow:hidden}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.07)}.modal-head h2{font-size:1.3rem;margin:0}.close-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);cursor:pointer;font-size:1.25rem}.modal-body{padding:24px}

.makruk-layout{display:grid;grid-template-columns:minmax(330px,620px) 1fr;gap:24px;align-items:start}.makruk-board{aspect-ratio:1/1;display:grid;grid-template-columns:repeat(8,1fr);border:1px solid rgba(99,214,255,.28);border-radius:18px;overflow:hidden;background:#0a1f2e;box-shadow:inset 0 0 30px rgba(0,0,0,.18)}.sq{border:0;display:grid;place-items:center;position:relative;cursor:pointer;background:rgba(255,255,255,.018);padding:0}.sq:nth-child(16n+1),.sq:nth-child(16n+3),.sq:nth-child(16n+5),.sq:nth-child(16n+7),.sq:nth-child(16n+10),.sq:nth-child(16n+12),.sq:nth-child(16n+14),.sq:nth-child(16n+16){background:rgba(99,214,255,.065)}.sq.selected{box-shadow:inset 0 0 0 3px var(--accent)}.sq.legal::after{content:"";width:18%;height:18%;min-width:8px;min-height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(99,214,255,.7)}.sq.capture::after{width:70%;height:70%;background:transparent;border:3px solid var(--accent)}.piece{width:72%;height:72%;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:clamp(.7rem,2.1vw,1.15rem);box-shadow:0 8px 18px rgba(0,0,0,.24);user-select:none}.piece.w{background:linear-gradient(145deg,#f0fbff,#9bd9ee);color:#082231;border:1px solid #e8fbff}.piece.b{background:linear-gradient(145deg,#1d3f53,#07141e);color:#c7f1ff;border:1px solid #3d718b}.game-side{border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:20px;background:rgba(255,255,255,.018)}.game-side h3{font-size:1.25rem}.difficulty{display:grid;gap:8px}.difficulty button,.tool-row button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.025);border-radius:13px;padding:10px 12px;text-align:left;cursor:pointer}.difficulty button.active{border-color:var(--accent);background:rgba(99,214,255,.09)}.difficulty small{display:block;color:var(--muted);margin-top:2px}.tool-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.tool-row button{text-align:center}.makruk-status{margin:17px 0;padding:13px;border-radius:14px;background:#06141f;color:#acd0df;border:1px solid rgba(99,214,255,.09);min-height:50px}.rules-note{font-size:.76rem;color:#6f8997;line-height:1.55;margin-top:16px}

.circuit-layout{display:grid;grid-template-columns:1fr 240px;gap:20px}.circuit-board{position:relative;min-height:510px;border:1px solid rgba(183,135,74,.28);border-radius:22px;overflow:hidden;background:linear-gradient(rgba(150,103,52,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(150,103,52,.06) 1px,transparent 1px),radial-gradient(circle at 30% 20%,rgba(174,117,63,.13),transparent 35%),#18140f;background-size:26px 26px,26px 26px,auto,auto}.wire-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.wire{stroke:#d7ad6a;stroke-width:5;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,208,117,.22))}.component{position:absolute;transform:translate(-50%,-50%);min-width:96px;padding:13px 12px 10px;text-align:center;border:1px solid rgba(255,220,164,.18);border-radius:15px;background:rgba(45,34,23,.94);color:#f4dfbd;box-shadow:0 12px 28px rgba(0,0,0,.24)}.component .ctype{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#b89460}.component .symbol{font-size:1.65rem;margin:4px 0}.terminal{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #f0c87e;background:#2a2117;cursor:pointer;box-shadow:0 0 0 4px rgba(240,200,126,.08)}.terminal.left{left:-10px;top:50%;transform:translateY(-50%)}.terminal.right{right:-10px;top:50%;transform:translateY(-50%)}.terminal.selected{background:var(--accent);border-color:#d9f7ff;box-shadow:0 0 16px var(--accent)}.bulb-art{width:58px;height:68px;margin:1px auto 0;position:relative}.bulb-glass{width:48px;height:48px;border-radius:50% 50% 43% 43%;border:2px solid rgba(255,232,181,.45);margin:auto;background:radial-gradient(circle at 50% 60%,rgba(255,210,92,.05),transparent 55%);transition:.28s}.bulb-base{width:28px;height:17px;margin:-2px auto 0;border-radius:3px;background:repeating-linear-gradient(0deg,#8b765a 0 3px,#493d2f 3px 6px);position:relative}.bulb-base::after{content:"SKY";position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:.55rem;color:#d7b879;letter-spacing:.11em}.component.lit .bulb-glass{background:radial-gradient(circle,#fff4ae 0%,#ffd96e 34%,rgba(255,186,61,.28) 62%,transparent 73%);box-shadow:0 0 28px #ffd36b,0 0 80px rgba(255,199,75,.36);border-color:#fff3be}.circuit-side{border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:18px;background:rgba(255,255,255,.018)}.circuit-side h3{margin-bottom:8px}.circuit-side p{font-size:.9rem;color:var(--muted);line-height:1.6}.level-pips{display:flex;gap:7px;margin:13px 0}.level-pips span{width:9px;height:9px;border-radius:50%;background:#274050}.level-pips span.on{background:var(--warm);box-shadow:0 0 10px rgba(255,211,107,.45)}.circuit-status{min-height:68px;padding:12px;background:#0a171e;border-radius:13px;color:#b8d0db;font-size:.88rem}.circuit-actions{display:grid;gap:8px;margin-top:13px}.circuit-actions button{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.03);border-radius:12px;padding:10px;cursor:pointer}.circuit-actions .next{background:var(--warm);color:#30220d;border:0;font-weight:900;display:none}

.privacy-page{background:#f7f8fa;color:#18202a;min-height:100vh;color-scheme:light}.privacy-wrap{width:min(880px,calc(100% - 36px));margin:0 auto;padding:55px 0 90px}.privacy-top{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:20px;border-bottom:1px solid #dfe4e9;margin-bottom:34px}.privacy-top a{font-weight:800}.privacy-page h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.055em;margin:0 0 12px}.privacy-page h2{font-size:1.35rem;margin:34px 0 10px}.privacy-page h3{font-size:1.05rem;margin:24px 0 8px}.privacy-page p,.privacy-page li{line-height:1.75;color:#39444f}.privacy-page a{color:#006b9b}.privacy-page .meta{color:#66727e}.privacy-page hr{border:0;border-top:1px solid #dfe4e9;margin:38px 0}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}.hero{padding-top:110px}.solar-shell{height:560px;min-height:0;margin-top:-10px}
  .chat-shell{grid-template-columns:260px 1fr}.cards{grid-template-columns:1fr}.card{min-height:260px}.game-grid{grid-template-columns:1fr}.makruk-layout{grid-template-columns:1fr}.circuit-layout{grid-template-columns:1fr}.circuit-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.section-head{grid-template-columns:1fr}.section-head p{justify-self:start}.play-intro{display:block}.play-intro p{margin-top:18px}
}
@media(max-width:720px){
  .wrap{width:min(var(--max),calc(100% - 24px))}.nav{height:64px}.nav-link{display:none}.hero{padding-top:92px;min-height:auto}.solar-shell{height:470px;border-radius:28px}h1{font-size:clamp(3.2rem,16vw,5.2rem)}section{padding:82px 0}
  .chat-shell{grid-template-columns:1fr}.sky-stage{border-right:0;border-bottom:1px solid var(--line);padding:20px;display:grid;grid-template-columns:120px 1fr;align-items:center;gap:16px}.sky-stage img{width:120px}.chat-top{align-items:flex-start;flex-direction:column}.chat-log{max-height:430px}.bubble{max-width:90%}.chat-form{grid-template-columns:1fr}.send-btn{height:48px}.business-intro{text-align:left}.game-card{min-height:340px}.modal{padding:0}.modal-card{margin:0;min-height:100vh;border-radius:0}.modal-body{padding:14px}.circuit-board{min-height:470px}.circuit-side{display:block}.foot{align-items:flex-start;flex-direction:column}.hide-mobile{display:none}
}
@media(max-width:470px){.sky-stage{grid-template-columns:90px 1fr}.sky-stage img{width:90px}.solar-shell{height:390px}.nav-actions{gap:6px}.lang-btn,.ghost,.install-btn{padding:8px 10px}.modal-head{padding:14px}.makruk-board{border-radius:12px}.piece{font-size:.68rem}.component{min-width:82px;padding:10px 8px}.circuit-board{min-height:430px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pulse{animation:none}}

/* ===== SolutionSky v1.1 polish ===== */
.desktop-nav{display:flex}
.mobile-nav{display:none;align-items:center;gap:7px;position:relative}
.mobile-quick,.mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);border-radius:999px;padding:8px 11px;font-size:.82rem;cursor:pointer}
.mobile-menu-btn{width:39px;height:39px;padding:0;font-size:1.05rem}
.mobile-menu{display:none;position:absolute;right:0;top:48px;width:min(280px,calc(100vw - 30px));padding:9px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#091d2b;box-shadow:var(--shadow)}
.mobile-menu.open{display:grid;gap:3px}
.mobile-menu>a,.mobile-menu>button,.mobile-menu summary{display:flex;width:100%;align-items:center;border:0;background:transparent;color:var(--text);border-radius:12px;padding:11px 12px;text-align:left;cursor:pointer}
.mobile-menu>a:hover,.mobile-menu>button:hover,.mobile-menu summary:hover{background:rgba(255,255,255,.055)}
.mobile-menu details{border-top:1px solid rgba(255,255,255,.06);padding-top:3px}
.mobile-menu summary{list-style:none}.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px}
.mobile-lang-grid button{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:10px;padding:9px;color:#bcd2dd;cursor:pointer}

.chat-shell{grid-template-columns:390px 1fr}
.sky-stage{position:relative;isolation:isolate;overflow:hidden}
.sky-stage::before{content:"";position:absolute;z-index:-1;width:330px;height:330px;left:50%;top:44%;transform:translate(-50%,-50%);border:1px solid rgba(99,214,255,.10);border-radius:50%;box-shadow:0 0 0 42px rgba(99,214,255,.018),0 0 0 86px rgba(99,214,255,.012)}
.sky-avatar-wrap{display:grid;place-items:center;min-height:325px;position:relative}
.sky-avatar-wrap::after{content:"";position:absolute;width:56%;height:16%;bottom:9%;left:22%;border-radius:50%;background:radial-gradient(ellipse,rgba(99,214,255,.15),transparent 70%);filter:blur(8px)}
.sky-stage img{width:112%;max-width:360px;margin-left:-6%;animation:skyHover 5.6s ease-in-out infinite;transform-origin:50% 70%;will-change:transform,filter}
.sky-stage.thinking img{animation:skyThink .72s ease-in-out infinite alternate;filter:drop-shadow(0 18px 42px rgba(0,0,0,.25)) drop-shadow(0 0 12px rgba(99,255,116,.12))}
.ai-status{color:#bde9f6;background:rgba(99,214,255,.065)}
.ai-status::before{animation:statusGlow 2.2s ease-in-out infinite}
.bubble{animation:bubbleIn .2s ease-out both}
@keyframes skyHover{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-9px) rotate(.35deg)}}
@keyframes skyThink{from{transform:translateY(-4px) rotate(-.8deg) scale(1.01)}to{transform:translateY(-8px) rotate(.8deg) scale(1.015)}}
@keyframes statusGlow{50%{opacity:.55;box-shadow:0 0 5px var(--green)}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(5px) scale(.992)}to{opacity:1;transform:none}}

/* Makruk pieces: lightweight inline SVG silhouettes instead of letter tokens. */
.piece{width:76%;height:76%;border-radius:23%;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.28);user-select:none;transition:transform .16s ease,box-shadow .16s ease}
.sq:hover .piece{transform:translateY(-2px);box-shadow:0 11px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.30)}
.piece.w{background:linear-gradient(145deg,#effbff,#9ddcf1);color:#092838;border:1px solid #e8fbff;--piece-cut:#b8e6f4}
.piece.b{background:linear-gradient(145deg,#244b62,#07141e);color:#bdeeff;border:1px solid #447991;--piece-cut:#0b2637}
.piece svg{width:70%;height:70%;display:block;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.piece svg path,.piece svg circle{fill:currentColor}
.piece svg .cut{fill:none;stroke:var(--piece-cut);stroke-width:3;stroke-linecap:round}
.piece svg .cutfill{fill:var(--piece-cut)}
.piece-k svg{width:72%;height:72%}.piece-n svg{width:76%;height:76%}.piece-r svg{width:76%;height:76%}

/* Circuit Lab: a little electrical theatre when the circuit closes. */
.circuit-board{isolation:isolate;transition:border-color .4s ease,box-shadow .4s ease}
.circuit-board::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 79% 53%,rgba(255,204,78,.0),transparent 23%);transition:.7s ease}
.circuit-board.powered{border-color:rgba(255,211,107,.46);box-shadow:inset 0 0 60px rgba(255,199,75,.035),0 0 28px rgba(255,199,75,.045)}
.circuit-board.powered::after{background:radial-gradient(circle at 79% 53%,rgba(255,204,78,.12),transparent 28%)}
.circuit-board.powered .wire{stroke:#f2c777;stroke-dasharray:14 8;animation:wireFlow .72s linear infinite;filter:drop-shadow(0 0 5px rgba(255,208,117,.42))}
@keyframes wireFlow{to{stroke-dashoffset:-44}}
.bulb-glass{position:relative;overflow:visible}
.filament{position:absolute;left:50%;top:51%;width:18px;height:11px;transform:translate(-50%,-50%);border-left:2px solid rgba(201,113,50,.28);border-right:2px solid rgba(201,113,50,.28);border-bottom:2px solid rgba(201,113,50,.32);border-radius:0 0 50% 50%;opacity:.45}
.component.lit{z-index:4}
.component.lit .bulb-glass{animation:bulbWarmup .9s cubic-bezier(.2,.8,.2,1) var(--lamp-delay,0ms) both}
.component.lit .filament{animation:filamentWarmup .7s ease-out var(--lamp-delay,0ms) both}
.component.lit .bulb-base::after{color:#ffe4a0;text-shadow:0 0 7px rgba(255,211,107,.75)}
.component.lit::after{content:"";position:absolute;z-index:-1;width:135px;height:135px;left:50%;top:58%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,205,88,.21),transparent 69%);animation:lampAura 1.15s ease-out var(--lamp-delay,0ms) both;pointer-events:none}
@keyframes bulbWarmup{0%{background:radial-gradient(circle,rgba(96,43,19,.10),transparent 60%);box-shadow:none;border-color:rgba(255,232,181,.45)}28%{background:radial-gradient(circle,#6f2515 0%,rgba(176,72,26,.24) 34%,transparent 65%);box-shadow:0 0 7px rgba(255,98,39,.18)}58%{background:radial-gradient(circle,#ffb044 0%,#d56424 28%,rgba(255,162,41,.22) 56%,transparent 74%);box-shadow:0 0 18px rgba(255,147,51,.36)}100%{background:radial-gradient(circle,#fff8c7 0%,#ffdc76 32%,rgba(255,186,61,.29) 62%,transparent 74%);box-shadow:0 0 30px #ffd36b,0 0 82px rgba(255,199,75,.40);border-color:#fff3be}}
@keyframes filamentWarmup{0%{border-color:#6f2515;filter:none;opacity:.55}55%{border-color:#ff7b35;filter:drop-shadow(0 0 3px #ff6c26);opacity:.9}100%{border-color:#fff2a0;filter:drop-shadow(0 0 5px #ffd970);opacity:1}}
@keyframes lampAura{from{opacity:0;transform:translate(-50%,-50%) scale(.55)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.circuit-actions{grid-template-columns:1fr 1fr}
.circuit-actions .next{grid-column:1/-1}

@media(max-width:980px){
  .chat-shell{grid-template-columns:290px 1fr}
  .sky-avatar-wrap{min-height:250px}.sky-stage img{max-width:290px}
}
@media(max-width:720px){
  .desktop-nav{display:none!important}.mobile-nav{display:flex}.nav{gap:10px}
  .brand span{font-size:.94rem}.brand img{width:26px;height:26px}
  .chat-shell{grid-template-columns:1fr}
  .sky-stage{grid-template-columns:150px 1fr;padding:18px}.sky-avatar-wrap{min-height:150px}.sky-stage img{width:145px;max-width:none;margin-left:0}.sky-stage::before{width:190px;height:190px;left:77px;top:50%}
  .sky-caption{margin-bottom:0}.ai-status{margin-bottom:6px}
  .circuit-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:470px){
  .mobile-quick{padding:8px 9px}.mobile-menu-btn{width:37px;height:37px}
  .sky-stage{grid-template-columns:105px 1fr;gap:10px;padding:15px}.sky-avatar-wrap{min-height:108px}.sky-stage img{width:108px}.sky-stage::before{width:135px;height:135px;left:56px}.sky-caption{font-size:.78rem;line-height:1.5}
  .piece{width:79%;height:79%;border-radius:21%}.piece svg{width:72%;height:72%}
  .circuit-actions{grid-template-columns:1fr}
  .circuit-actions .next{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .sky-stage img,.sky-stage.thinking img,.bubble,.component.lit .bulb-glass,.component.lit .filament,.component.lit::after,.circuit-board.powered .wire{animation:none!important}
}
.circuit-board::after{z-index:0}
.wire-layer{z-index:1}
.component{z-index:2}
.sky-stage.greeting img{animation:skyGreeting 1.15s cubic-bezier(.2,.9,.25,1)}
@keyframes skyGreeting{0%{transform:translateY(0) rotate(0)}28%{transform:translateY(9px) scale(.985) rotate(-1deg)}58%{transform:translateY(9px) scale(.985) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
@media(prefers-reduced-motion:reduce){.sky-stage.greeting img{animation:none!important}}

/* v1.1.1 — use the original animated Sky GIF without synthetic bobbing. */
.sky-stage img{
  width:100%;
  max-width:390px;
  margin-left:0;
  object-fit:contain;
  animation:none!important;
  transform:none!important;
  will-change:auto;
}
.sky-stage.thinking img,.sky-stage.greeting img{
  animation:none!important;
  transform:none!important;
}

/* v1.1.1 — Makruk board geometry is fixed: exactly 8 x 8 on every viewport. */
.makruk-board{
  width:100%;
  max-width:620px;
  aspect-ratio:1/1;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  grid-template-rows:repeat(8,minmax(0,1fr))!important;
  align-self:start;
}
.sq{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.piece{
  width:80%;
  height:80%;
  max-width:80%;
  max-height:80%;
  padding:0;
  margin:0;
  display:block;
  object-fit:contain;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  user-select:none;
  pointer-events:none;
  transition:transform .14s ease,filter .14s ease;
}
.piece.w{
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.44)) drop-shadow(0 0 1px rgba(4,24,35,.65));
}
.piece.b{
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.42)) drop-shadow(0 0 1.5px rgba(174,232,250,.80));
}
.sq:hover .piece{transform:scale(1.035);box-shadow:none!important}
.piece-credit{display:block;margin-top:8px;font-size:.72rem;line-height:1.45;color:#607e8d}
.piece-credit a{color:#80b9ce;text-decoration:none}
.piece-credit a:hover{text-decoration:underline}

/* v1.1.1 — explicit top/bottom terminals let branches read like a schematic. */
.terminal.top{top:-10px;left:50%;transform:translateX(-50%)}
.terminal.bottom{bottom:-10px;left:50%;transform:translateX(-50%)}
.wire{stroke-linejoin:round;stroke-linecap:round}

@media(max-width:980px){
  .sky-stage img{max-width:320px}
}
@media(max-width:720px){
  .sky-stage img{width:150px;max-width:150px;margin-left:0}
}
@media(max-width:470px){
  .sky-stage img{width:108px;max-width:108px}
  .piece{width:82%;height:82%;max-width:82%;max-height:82%}
}


/* v1.1.2 — Makruk board: one board colour, line grid, fluid square geometry. */
.makruk-board{
  width:100%;
  max-width:680px;
  aspect-ratio:1 / 1;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  grid-template-rows:repeat(8,minmax(0,1fr))!important;
  gap:1px;
  padding:1px;
  background:#6f4b2b;
  border:1px solid #8a6038;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 48px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.04);
  align-self:start;
}
.makruk-board .sq{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:#d9a760!important;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.makruk-board .sq:hover{background:#dfb16f!important}
.makruk-board .sq.selected{box-shadow:inset 0 0 0 clamp(2px,.35vw,4px) #58d6ff;z-index:1}
.makruk-board .sq.legal::after{z-index:2;background:#1a91bd;box-shadow:0 0 10px rgba(26,145,189,.42)}
.makruk-board .sq.capture::after{z-index:2;border-color:#1a91bd}
.makruk-board .piece{
  width:76%;
  height:76%;
  max-width:76%;
  max-height:76%;
  object-fit:contain;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0;
  margin:0;
  pointer-events:none;
  user-select:none;
  transition:transform .14s ease,filter .14s ease;
}
/* The source artwork is the same Makruk silhouette set; CSS guarantees a true white-vs-black set. */
.makruk-board .piece.w{
  filter:brightness(0) invert(1) drop-shadow(0 2px 1px rgba(53,31,13,.72)) drop-shadow(0 0 1px rgba(53,31,13,.72));
}
.makruk-board .piece.b{
  filter:brightness(0) drop-shadow(0 2px 1px rgba(255,244,220,.42)) drop-shadow(0 0 1px rgba(255,244,220,.22));
}
.makruk-board .sq:hover .piece{transform:scale(1.04)}
.engine-credit{display:block;margin-top:7px;font-size:.72rem;line-height:1.45;color:#607e8d}
.engine-credit a{color:#80b9ce;text-decoration:none}.engine-credit a:hover{text-decoration:underline}
@media(max-width:720px){.makruk-board{max-width:none;border-radius:12px}.makruk-board .piece{width:78%;height:78%;max-width:78%;max-height:78%}}


/* ===== SolutionSky v1.1.3 — Makruk presentation + engine verification ===== */
.makruk-layout{
  grid-template-columns:minmax(0,620px) minmax(250px,300px);
  justify-content:center;
  align-items:start;
}
.makruk-board{
  width:min(100%,620px,calc(100dvh - 165px));
  max-width:620px;
  justify-self:center;
  gap:0;
  padding:0;
  background:#6f4b2b;
  border:1px solid #6f4b2b;
}
.makruk-board .sq{
  box-sizing:border-box;
  background:#d9a760!important;
  border-right:1px solid rgba(91,56,27,.72)!important;
  border-bottom:1px solid rgba(91,56,27,.72)!important;
}
.makruk-board .sq:nth-child(8n){border-right:0!important}
.makruk-board .sq:nth-child(n+57){border-bottom:0!important}
.makruk-board .piece{
  width:78%;
  height:78%;
  max-width:78%;
  max-height:78%;
  filter:none!important;
  object-fit:contain;
}
.makruk-board .piece.w,
.makruk-board .piece.b{filter:none!important}
.engine-indicator{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  margin:14px 0 -5px;
  font-size:.74rem;
  color:#8aa6b5;
}
.engine-indicator::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#607481;
  box-shadow:0 0 0 3px rgba(96,116,129,.12);
}
.engine-indicator[data-state="loading"]::before{background:#ffd36b;box-shadow:0 0 10px rgba(255,211,107,.45)}
.engine-indicator[data-state="ready"]{color:#a8d8e7}
.engine-indicator[data-state="ready"]::before{background:#6dff83;box-shadow:0 0 10px rgba(109,255,131,.48)}
.engine-indicator[data-state="fallback"]{color:#e4ba88}
.engine-indicator[data-state="fallback"]::before{background:#ff9a66;box-shadow:0 0 10px rgba(255,154,102,.42)}
@media(max-width:980px){
  .makruk-layout{grid-template-columns:1fr}
  .makruk-board{width:min(100%,620px);max-width:620px}
  .game-side{max-width:620px;width:100%;justify-self:center}
}
@media(max-width:720px){
  .makruk-board{width:100%;max-width:none}
}