/* ============================================================
   A-Dream Virtual Studio — สไตล์ของหน้าเว็บและ UI ในเกม
   สีทั้งหมดอยู่ใน :root ด้านล่าง แก้ที่เดียวเปลี่ยนทั้งเว็บ
   ============================================================ */

/* ---------- ฟอนต์ (เก็บในโปรเจกต์ เปิดได้แม้ไม่มีเน็ต) ---------- */
@font-face{font-family:"Mitr";font-weight:400;font-display:swap;src:url(../assets/fonts/mitr-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mitr";font-weight:500;font-display:swap;src:url(../assets/fonts/mitr-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mitr";font-weight:600;font-display:swap;src:url(../assets/fonts/mitr-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mitr";font-weight:400;font-display:swap;src:url(../assets/fonts/mitr-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+25A0-25FF,U+2600-27BF}
@font-face{font-family:"Mitr";font-weight:500;font-display:swap;src:url(../assets/fonts/mitr-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+25A0-25FF,U+2600-27BF}
@font-face{font-family:"Mitr";font-weight:600;font-display:swap;src:url(../assets/fonts/mitr-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+25A0-25FF,U+2600-27BF}
@font-face{font-family:"IBM Plex Sans Thai Looped";font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-thai-looped-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai Looped";font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-thai-looped-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai Looped";font-weight:600;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-thai-looped-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"IBM Plex Sans Thai Looped";font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-thai-looped-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"IBM Plex Sans Thai Looped";font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-thai-looped-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"IBM Plex Sans Thai Looped";font-weight:600;font-display:swap;src:url(../assets/fonts/ibm-plex-sans-thai-looped-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Pixelify Sans";font-weight:500;font-display:swap;src:url(../assets/fonts/pixelify-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Pixelify Sans";font-weight:700;font-display:swap;src:url(../assets/fonts/pixelify-sans-latin-700-normal.woff2) format("woff2")}

/* ---------- สี ---------- */
:root{
  --bg:#FFF8E8; --surface:#FFFFFF; --ink:#1D3270; --muted:#5A688F; --line:#EADFC4; --edge:#1D4289;
  --yellow:#FFC72C; --orange:#FF6A13; --red:#D22730; --teal:#6BBBAE; --green:#A8C686; --sky:#019CDE; --purple:#8346AE; --salmon:#FF9D8A; --cream:#F5E1A4;
  --pop:4px 4px 0 var(--edge);
  --display:"Mitr","IBM Plex Sans Thai Looped","Leelawadee UI",system-ui,sans-serif;
  --pixel:"Pixelify Sans","Mitr",system-ui,sans-serif;                 /* ใช้กับป้ายสั้นภาษาอังกฤษเท่านั้น */
  --body:"IBM Plex Sans Thai Looped","Leelawadee UI",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#101A33; --surface:#18254A; --ink:#F3EBD6; --muted:#A9B4D6; --line:#2B3B6E; --edge:#8FA8E8; color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg:#101A33; --surface:#18254A; --ink:#F3EBD6; --muted:#A9B4D6; --line:#2B3B6E; --edge:#8FA8E8; color-scheme:dark; }

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
html.adream-lock,html.adream-lock body{overflow:hidden;overscroll-behavior:none}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;-webkit-text-size-adjust:100%}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.3;margin:0;text-wrap:balance}
p{margin:0} a{color:inherit} button{font:inherit;cursor:pointer;color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.px{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- แถบเมนู ---------- */
nav.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2.5px solid var(--edge)}
nav.top .wrap{display:flex;align-items:center;gap:20px;padding-block:10px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:22px;width:auto;display:block}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo img{filter:brightness(2.4) saturate(.8)} }
.links{display:flex;gap:18px;margin-left:auto;font-size:.95rem}
.links a{text-decoration:none;color:var(--muted)} .links a:hover{color:var(--ink)}
.btn{border:2.5px solid var(--edge);background:var(--surface);border-radius:12px;padding:6px 16px;font-family:var(--display);text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:3px 3px 0 var(--edge);color:var(--ink)}
.btn.primary{background:var(--yellow);color:#1D3270}
.btn:active{transform:translate(3px,3px);box-shadow:none}
@media (max-width:760px){.links{display:none}.nav-cta{margin-left:auto}}

/* ---------- ส่วนหัว ---------- */
.hero{padding-block:36px 20px;text-align:center;display:grid;gap:10px;justify-items:center}
.hero h1{font-size:clamp(1.8rem,5vw,3rem);font-weight:600}
.hero h1 em{font-style:normal;background:var(--yellow);color:#1D3270;padding:0 .2em;border-radius:10px;border:2.5px solid var(--edge);display:inline-block;transform:rotate(-2deg)}
.hero p{color:var(--muted);max-width:54ch;font-size:1.05rem}

/* ---------- หน้าต่างสตูดิโอ ---------- */
.studio-outer{padding-inline:20px;display:flex;justify-content:center}
.window{background:var(--surface);border:3px solid var(--edge);border-radius:20px;box-shadow:6px 6px 0 var(--edge);overflow:hidden;display:flex;flex-direction:column;max-width:100%}
.wbar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:3px solid var(--edge);font-size:.88rem;background:var(--cream);color:#1D3270;min-height:40px;flex:none}
.wbar i{width:11px;height:11px;border-radius:3px;display:inline-block;border:2px solid #1D4289;flex:none}
.wbar .room{font-family:var(--pixel);font-weight:700;font-size:1rem;white-space:nowrap;margin-left:4px}
.wbar .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wbar .hud{margin-left:auto;display:flex;gap:6px;flex:none}
.hudbtn{border:2px solid #1D4289;background:#fff;color:#1D3270;border-radius:8px;padding:1px 10px;font-size:.84rem;font-family:var(--display);white-space:nowrap;min-height:28px}
.hudbtn.exit{background:var(--yellow)}
.hudbtn.sec{background:#FFF3C9}
.hudbtn.sec.ping{animation:ping .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes ping{40%{transform:scale(1.35) rotate(-6deg);background:var(--yellow)}}
.hudbtn[hidden]{display:none}
.stage{container:stage / size;position:relative;overflow:hidden;background:#16234F;display:flex;justify-content:center;align-items:center;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
canvas.game{display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;transition:filter .3s;flex:none}
.stage.dim canvas.game{filter:brightness(.5) saturate(.8)}
.layer{position:absolute;inset:0;pointer-events:none}
.layer > *{pointer-events:auto}
.fade{position:absolute;inset:0;background:#16234F;opacity:0;pointer-events:none;transition:opacity .26s}
.fade.on{opacity:1}
/* ลูกเล่น: แสงแฟลช และป้ายพบความลับ */
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.on{animation:flashfx .55s ease-out}
@keyframes flashfx{0%{opacity:.95}100%{opacity:0}}
.toast{position:absolute;left:50%;top:8px;transform:translate(-50%,-12px);background:var(--yellow);color:#1D3270;border:2.5px solid #1D4289;border-radius:12px;box-shadow:3px 3px 0 #1D4289;padding:2px 14px;font-family:var(--display);font-size:.92rem;width:max-content;max-width:calc(100% - 20px);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);z-index:5}
.toast.on{opacity:1;transform:translate(-50%,0)}
.seclist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;text-align:left}
.seclist li{border:2px dashed #C9BE9F;border-radius:10px;padding:4px 10px;display:grid;line-height:1.35}
.seclist li b{font-family:var(--display);font-weight:500;color:#8A93B0}
.seclist li span{font-size:.76rem;color:#5A688F}
.seclist li.ok{border:2px solid #1D4289;background:#FFF3C9}
.seclist li.ok b{color:#1D3270}
@container stage (max-width:480px){.seclist{grid-template-columns:1fr}}

/* เต็มจอ (มือถือและแท็บเล็ตเข้าโหมดนี้เองตอนเริ่มเกม) */
.window.fs{position:fixed;inset:0;z-index:100;border-radius:0;border:0;box-shadow:none;width:100%!important;max-width:none}
.window.fs .stage{flex:1;width:auto!important;height:auto!important}
.window.fs .wbar{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-left:calc(12px + env(safe-area-inset-left,0px));padding-right:calc(12px + env(safe-area-inset-right,0px))}
.window.fs.tall .stage{align-items:flex-start}
/* มือถือแนวตั้ง: หมุนทั้งหน้าต่างเกม 90 องศา ให้เล่นแนวนอนเต็มจอ (ขนาด --rw --rh ตั้งจาก js/site.js) */
.window.fs.rot{inset:0 auto auto 0;width:var(--rw)!important;height:var(--rh);transform-origin:0 0;transform:rotate(90deg) translateY(-100%)}
/* จอเตี้ย (มือถือแนวนอน): แถบปุ่มลอยทับมุมบนของเกม ไม่กินความสูง ห้องจะได้พอดีจอ */
.window.fs.hudover .wbar{position:absolute;left:0;right:0;top:0;z-index:6;background:none;border:0;pointer-events:none;min-height:0}
.window.fs.hudover .wbar > *{pointer-events:auto}
.window.fs.hudover .wbar i,.window.fs.hudover .wbar .sub{display:none}
.window.fs.hudover .wbar .room{background:var(--cream);border:2px solid #1D4289;border-radius:8px;padding:0 8px;margin-left:0;font-size:.9rem}
.window.fs.hudover .hint,.window.fs.hudover .toast,.window.fs.hudover .minihud{top:42px}
.window.fs.hudover .overlay{padding-top:40px}
.window.fs.hudover .overlay:has(.viewer),.window.fs.hudover .overlay:has(.cover){padding-top:12px}
.window.fs.hudover[data-mode="view"] .wbar{display:none}
.window.narrow .wbar .sub,.window.narrow .wbar i{display:none}

/* ---------- แผ่นซ้อนในเกม ---------- */
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:12px;overflow:auto}
.cover{text-align:center;display:grid;gap:10px;justify-items:center;color:#FFF8E8}
.cover h2{font-size:clamp(1.15rem,3.2vw,2rem);text-shadow:3px 3px 0 #1D3270}
.play{font-family:var(--display);font-weight:600;font-size:1.25rem;background:var(--yellow);color:#1D3270;border:3px solid #1D3270;border-radius:14px;padding:8px 26px;box-shadow:5px 5px 0 #1D3270}
.play:active{transform:translate(5px,5px);box-shadow:none}
.cover small{font-size:.85rem}
.bar{width:180px;height:12px;border:2.5px solid #FFF8E8;border-radius:8px;overflow:hidden}
.bar b{display:block;height:100%;width:0;background:var(--yellow);transition:width .15s}
.panel{background:#FFFDF6;color:#1D3270;border:3px solid #1D4289;border-radius:18px;padding:16px;max-width:620px;width:100%;display:grid;gap:10px;text-align:center;box-shadow:6px 6px 0 #1D4289;max-height:100%;overflow:auto}
.panel h3{font-size:1.25rem}
.small{font-size:.85rem;color:#5A688F}
.seg{display:inline-flex;justify-self:center;border:2.5px solid #1D4289;border-radius:12px;overflow:hidden}
.seg button{border:0;background:#fff;padding:4px 22px;font-family:var(--display);color:#1D3270}
.seg button[aria-pressed="true"]{background:#1D4289;color:#FFF8E8}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.role{border:2.5px solid #1D4289;background:#fff;border-radius:14px;padding:10px 8px;display:grid;gap:2px;justify-items:center;color:#1D3270}
.role:hover,.role:focus-visible{background:#FFF3C9}
.role b{font-family:var(--display);font-weight:500;font-size:1.02rem;line-height:1.3}
.role span{font-size:.78rem;color:#5A688F;line-height:1.4}
.spr{display:block;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges}
@container stage (max-width:520px){
  .roles{grid-template-columns:1fr;gap:8px}
  .role{grid-template-columns:auto 1fr;text-align:left;justify-items:start;column-gap:12px;padding:6px 12px;align-items:center}
  .role .spr{grid-row:span 2}
}
.choices{display:flex;gap:8px;flex-wrap:wrap}
.choices button{flex:1;min-width:92px;border:2.5px solid #1D4289;background:#fff;color:#1D3270;border-radius:10px;padding:6px 10px;font-family:var(--display);min-height:40px}
.choices button.go{background:var(--yellow)}
.choices button:active{transform:translate(2px,2px)}
.mapgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;text-align:left}
.mapgrid button{border:2.5px solid #1D4289;border-radius:12px;padding:6px 10px;background:#fff;color:#1D3270;display:grid;min-height:52px;align-content:center}
.mapgrid button.here{background:#FFF3C9}
.mapgrid b{font-family:var(--display);font-weight:500}
.mapgrid span{font-size:.76rem;color:#5A688F;line-height:1.35}
@container stage (max-width:420px){.mapgrid{grid-template-columns:1fr}}

/* ป้ายบอกใบ้ และฟองคำพูดของสัตว์ */
.hint{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#1D3270;color:#FFF8E8;padding:3px 14px;border-radius:10px;font-size:.85rem;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;pointer-events:none!important}
.hint:empty{display:none}
.bubble{position:absolute;transform:translate(-50%,-100%);background:#fff;color:#1D3270;border:2.5px solid #1D4289;border-radius:12px;padding:2px 10px;font-size:.85rem;line-height:1.4;width:max-content;max-width:min(220px,62%);text-align:center;pointer-events:none!important;animation:pop .25s both}

/* บทสนทนา: ภาพครึ่งตัวเด้งขึ้นเหนือกล่องคำพูด (D7) */
.dlg{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(760px,calc(100% - 20px));padding-top:70px;pointer-events:none!important}
.dbox{position:relative;background:#FFFDF6;color:#1D3270;border:3px solid #1D4289;border-radius:16px;padding:12px 16px 12px 186px;min-height:118px;box-shadow:5px 5px 0 #1D4289;display:grid;gap:6px;align-content:start;cursor:pointer;pointer-events:auto}
.portrait{position:absolute;left:12px;bottom:-3px;width:164px;height:185px;transform-origin:bottom center;animation:pop .45s cubic-bezier(.3,1.6,.5,1) both;pointer-events:none}
.portrait img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block}
.portrait.talk{animation:nod .3s ease-in-out}
@keyframes pop{from{transform:translateY(40px) scale(.7);opacity:0}to{transform:none;opacity:1}}
.bubble{animation-name:pop2}
@keyframes pop2{from{transform:translate(-50%,-70%) scale(.7);opacity:0}to{transform:translate(-50%,-100%);opacity:1}}
@keyframes nod{50%{transform:translateY(-6px)}}
@keyframes bob{50%{transform:translateY(-4px)}}
.who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.name{white-space:nowrap;color:#fff;border:2px solid #1D4289;border-radius:8px;padding:0 12px;font-family:var(--display)}
.name.light{color:#1D3270}
.title{font-size:.8rem;color:#5A688F}
.line{font-size:1.05rem;min-height:3em;line-height:1.5}
.next{position:absolute;right:14px;bottom:8px;font-size:.8rem;color:#5A688F;animation:bob 1s infinite}
@container stage (max-width:600px){
  .dlg{padding-top:0;bottom:8px}
  .dbox{padding:12px;padding-top:42px;min-height:0}
  .portrait{width:96px;height:108px;left:6px;bottom:auto;top:-70px}
  .who{position:absolute;left:108px;top:8px;right:8px;flex-wrap:nowrap}
  .line{font-size:.96rem;min-height:2.9em}
  .choices{gap:6px}.choices button{min-width:calc(50% - 6px);padding:6px 4px;font-size:.92rem}
}
/* จอแนวนอนที่เตี้ย (มือถือแนวนอน): ย่อกล่องคำพูด */
@container stage (max-height:440px){
  .dlg{padding-top:30px;bottom:6px;width:min(680px,calc(100% - 150px))}
  .dbox{min-height:0;padding:8px 12px 8px 128px;gap:4px}
  .portrait{width:112px;height:126px;left:8px}
  .line{font-size:.95rem;min-height:2.8em}
  .choices button{min-height:34px;padding:3px 8px}
  .panel{padding:10px;gap:6px}
  .roles{grid-template-columns:repeat(3,1fr);gap:8px}
  .role{padding:6px 8px}
  .panel h3{font-size:1.1rem}
  .panel:has(.seclist),.panel:has(.mapgrid){max-width:780px!important}
  .seclist{grid-template-columns:repeat(4,1fr);gap:5px}
  .seclist li{padding:3px 8px}
  .seclist li b{font-size:.86rem}
  .seclist li span{font-size:.7rem;line-height:1.3}
  .mapgrid{grid-template-columns:repeat(3,1fr)}
  .mapgrid button{min-height:44px;padding:4px 10px}
}

/* ตัวแสดงสื่อของผลงาน (วิดีโอ YouTube รูป) ใช้ทั้งในเกมและในหน้าเว็บ */
.media{position:relative;width:100%;height:100%;background:#101A33;display:grid;place-items:center;overflow:hidden}
.media img,.media video,.media iframe{width:100%;height:100%;object-fit:contain;display:block;border:0;grid-area:1/1}
.media .mopen{grid-area:1/1;z-index:1;box-shadow:3px 3px 0 #1D4289}
.media .mnote{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(16,26,51,.85);color:#FFF8E8;border-radius:8px;padding:2px 10px;font-size:.78rem;text-align:center}
.mnav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:2.5px solid #1D4289;background:#FFFDF6;color:#1D3270;font-size:1.3rem;line-height:1;padding:0 0 3px;z-index:2}
.mnav.mprev{left:8px}.mnav.mnext{right:8px}
.mcount{position:absolute;left:8px;top:8px;pointer-events:none;background:rgba(16,26,51,.8);color:#FFF8E8;border-radius:8px;padding:0 8px;font-size:.78rem;z-index:2}

/* ดูผลงานในเกม */
.viewer{position:relative;background:#FFFDF6;color:#1D3270;border:3px solid #1D4289;border-radius:18px;box-shadow:6px 6px 0 #1D4289;width:100%;max-width:520px;max-height:100%;overflow:auto;display:grid;text-align:left}
.vmedia{aspect-ratio:16/10;border-bottom:3px solid #1D4289;border-radius:15px 15px 0 0;overflow:hidden}
.vinfo{padding:10px 14px 12px;display:grid;gap:6px;align-content:start}
.vinfo .cat{font-size:.78rem;color:#5A688F;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-right:70px}
.vinfo h3{font-size:1.15rem;font-weight:600}
.vinfo p{font-size:.9rem;color:#33426F}
.vclose{position:absolute;right:8px;top:8px;z-index:3}
.viewer .choices button{min-width:0;padding:6px 8px;font-size:.92rem}
.viewer .choices button.go{flex:1 0 100%}
.linkbtn{background:none;border:0;color:#0178AB;font-family:var(--display);font-size:.86rem;padding:4px 0;text-align:left;min-height:32px}
@container stage (min-width:900px) and (min-height:480px){
  .viewer{max-width:860px;grid-template-columns:1.5fr 1fr}
  .vmedia{border-bottom:0;border-right:3px solid #1D4289;border-radius:15px 0 0 15px}
  .vinfo{padding:44px 16px 14px}
  .vinfo .cat{padding-right:0}
}
@container stage (max-height:440px){
  .viewer{max-width:720px;grid-template-columns:1.25fr 1fr}
  .vmedia{border-bottom:0;border-right:3px solid #1D4289;border-radius:15px 0 0 15px;aspect-ratio:auto;min-height:150px}
  .vinfo{padding:36px 12px 8px;gap:3px}
  .vinfo p{font-size:.82rem}
}

/* จอยสำหรับจอสัมผัส มุมขวาล่าง */
.joy{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:124px;height:124px;border-radius:50%;background:rgba(255,253,246,.5);border:3px solid #1D4289;touch-action:none;display:none}
.stage.touch.playing .joy{display:block}
.joy b{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--yellow);border:3px solid #1D4289;box-shadow:2px 2px 0 #1D4289;pointer-events:none}
.joy::before{content:"";position:absolute;inset:14px;border-radius:50%;border:2px dashed rgba(29,66,137,.45)}

/* มินิเกม */
.minihud{position:absolute;left:50%;top:8px;transform:translateX(-50%);background:#FFFDF6;color:#1D3270;border:3px solid #1D4289;border-radius:14px;padding:4px 14px;box-shadow:4px 4px 0 #1D4289;display:grid;justify-items:center;gap:0;width:max-content;max-width:calc(100% - 16px)}
.minihud .target{font-family:var(--display);font-size:1.05rem;display:flex;align-items:center;gap:8px}
.minihud .target i{width:22px;height:22px;border-radius:6px;border:2.5px solid #1D4289;display:inline-block}
.minihud .small{font-size:.78rem}
.miniclose{position:absolute;right:10px;bottom:10px}

.scrollhint{text-align:center;color:var(--muted);font-size:.9rem;padding-block:16px 0}
.scrollhint span{display:inline-block;animation:bob 1.4s infinite}

/* ---------- ส่วนพอร์ต ---------- */
section{padding-block:56px 8px}
.shead{display:grid;gap:4px;margin-bottom:22px}
.shead h2{font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:600}
.shead p{color:var(--muted);max-width:60ch}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{border:2.5px solid var(--edge);background:var(--surface);border-radius:10px;padding:2px 12px;font-family:var(--display);min-height:34px;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--edge);color:var(--bg)}
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.work{background:var(--surface);border:2.5px solid var(--edge);border-radius:16px;overflow:hidden;display:grid;box-shadow:var(--pop);text-align:left;padding:0;color:var(--ink);align-content:start}
.work:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--edge)}
.thumb{aspect-ratio:16/10;border-bottom:2.5px solid var(--edge);position:relative;overflow:hidden;background:var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.badges{position:absolute;left:8px;top:8px;display:flex;gap:6px}
.badge{background:var(--yellow);color:#1D3270;border:2px solid #1D4289;border-radius:8px;padding:0 8px;font-size:.74rem;font-family:var(--display)}
.badge.alt{background:#fff}
.badge.wait{background:#FFD9CF}
.work .meta{padding:10px 14px 14px;display:grid;gap:2px}
.work .cat{font-size:.78rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.dotc{width:10px;height:10px;border-radius:3px;border:2px solid var(--edge);display:inline-block;flex:none}
.work h3{font-size:1.06rem}
.work p{font-size:.88rem;color:var(--muted)}
.empty{color:var(--muted);padding:20px 0}
.eyebrow{font-family:var(--pixel);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.en{font-size:.84rem;color:var(--muted);opacity:.85}
.more{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:.88rem}

/* การ์ดบริการ 10 รายการ (กดแล้วไปหน้ารวมผลงานของบริการนั้น) */
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.scard{background:var(--surface);border:2.5px solid var(--edge);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--pop)}
.scard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--edge)}
.shit{display:block;text-decoration:none;color:var(--ink);flex:1}
.sbody{padding:10px 14px 4px;display:grid;gap:3px}
.sbody .cat{font-size:.76rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.sbody h3{font-size:1.14rem}
.sbody p{font-size:.88rem;color:var(--muted);line-height:1.5}
.sbody p.en{font-size:.78rem}
.sfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 14px 10px}
.sfoot .go{font-family:var(--display);color:#0178AB;text-decoration:none;min-height:36px;display:inline-flex;align-items:center;gap:6px}
.sfoot .go i{font-style:normal;font-size:.74rem;background:var(--yellow);color:#1D3270;border:2px solid #1D4289;border-radius:8px;padding:0 6px;line-height:1.5}
.sfoot .walk{font-family:var(--display);font-size:.8rem;color:var(--muted);background:none;border:0;border-bottom:2px dotted var(--muted);padding:0;min-height:28px}
.sfoot .walk:hover{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sfoot .go{color:#6CCBF2}}
:root[data-theme="dark"] .sfoot .go{color:#6CCBF2}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:s}
.step{padding:18px;border-radius:16px;background:var(--surface);border:2.5px dashed var(--edge);display:grid;gap:6px;align-content:start}
.step::before{counter-increment:s;content:counter(s);font-family:var(--pixel);font-weight:700;width:34px;height:34px;border-radius:8px;background:var(--yellow);color:#1D3270;border:2.5px solid #1D4289;display:grid;place-items:center}
.step p{color:var(--muted);font-size:.92rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.card{background:var(--surface);border:2.5px solid var(--edge);border-radius:16px;padding:20px;display:grid;gap:8px;align-content:start;box-shadow:var(--pop)}
.card h2{font-size:1.4rem;font-weight:600}
.card p{color:var(--muted)}
.card .btn{justify-self:start;margin-top:4px}
.card .lead{font-family:var(--display);font-size:1.08rem;color:var(--ink)}
.card small{color:var(--muted);font-size:.84rem}
.card .vid{aspect-ratio:16/9;border:2.5px solid var(--edge);border-radius:12px;overflow:hidden}
.card .vid iframe{width:100%;height:100%;border:0;display:block}
.contact{margin-block:56px 40px;background:var(--cream);color:#1D3270;border:3px solid #1D4289;border-radius:22px;padding:28px;display:grid;grid-template-columns:1.15fr 1fr;gap:22px 26px;align-items:start;box-shadow:6px 6px 0 #1D4289}
.contact .shead{margin-bottom:14px}
.contact .shead p{color:#3E4E80}
.contact h2{font-size:clamp(1.4rem,3.5vw,2rem);font-weight:600}
.contact h3{font-size:1.2rem;font-weight:600}
.contact .eyebrow{color:#B8430A}
.cinfo{display:grid;gap:10px}
.cinfo a,.cinfo div{background:#fff;border:2.5px solid #1D4289;border-radius:12px;padding:8px 14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;text-decoration:none;color:#1D3270}
.cinfo a:hover{background:var(--yellow)}
.cinfo b{font-family:var(--display);font-weight:500}
.cinfo span{overflow-wrap:anywhere}
.cloc,.cform{background:#FFFDF6;border:2.5px solid #1D4289;border-radius:16px;padding:16px 18px;display:grid;gap:6px;align-content:start}
.cloc p{font-size:.9rem;color:#3E4E80}
.cloc address{font-style:normal;font-weight:600;line-height:1.5;margin-block:4px}
.cloc .btn{justify-self:start;margin-top:6px;background:#fff;color:#1D3270;border-color:#1D4289;box-shadow:3px 3px 0 #1D4289}
.cform{grid-column:1/-1}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cform .row.end{grid-template-columns:1fr auto;align-items:center}
.cform label{display:grid;gap:2px;font-size:.86rem;font-family:var(--display)}
.cform input,.cform textarea{font:inherit;font-family:var(--body);font-size:1rem;border:2.5px solid #1D4289;border-radius:10px;padding:8px 12px;background:#fff;color:#1D3270;width:100%;min-height:44px}
.cform textarea{resize:vertical}
.cform small{color:#3E4E80;font-size:.8rem}
.cform .btn{color:#1D3270;border-color:#1D4289;box-shadow:3px 3px 0 #1D4289}
@media (max-width:760px){.contact{grid-template-columns:1fr;padding:18px}.cform .row,.cform .row.end{grid-template-columns:1fr}}
footer{padding-block:20px 40px;color:var(--muted);font-size:.85rem;text-align:center}
footer .wrap{display:grid;gap:2px;justify-items:center}
footer b{font-family:var(--display);font-weight:500;color:var(--ink)}
footer a{color:inherit}
footer small{opacity:.8}

/* ---------- หน้ารวมผลงานตามประเภทบริการ (works.html) ---------- */
.phead{padding-block:28px 22px;display:grid;grid-template-columns:1fr minmax(0,300px);gap:8px 28px;align-items:center}
.phead .back{grid-column:1/-1;font-family:var(--display);color:var(--muted);text-decoration:none;min-height:36px;display:inline-flex;align-items:center;justify-self:start}
.phead .back:hover{color:var(--ink)}
.pinfo{display:grid;gap:4px}
.pinfo h1{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:600}
.pinfo h1 .badge{font-size:.9rem;vertical-align:middle}
.pinfo p{color:var(--muted);max-width:56ch}
.pinfo .cat{font-size:.84rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px;margin-top:4px}
.pimg{aspect-ratio:16/10;border:2.5px solid var(--edge);border-radius:16px;overflow:hidden;box-shadow:var(--pop)}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
a.chip{text-decoration:none;display:inline-flex;align-items:center}
.chip[aria-current="page"]{background:var(--edge);color:var(--bg)}
.pcta{display:flex;gap:12px;flex-wrap:wrap;margin-block:36px 24px;padding:20px;border:2.5px dashed var(--edge);border-radius:16px;justify-content:center}
@media (max-width:700px){.phead{grid-template-columns:1fr}.pimg{display:none}.chips.scrollx{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px 6px;scrollbar-width:none}.chips.scrollx .chip{flex:none}}


/* หน้ารายละเอียดผลงาน */
dialog.workdlg{border:3px solid #1D4289;border-radius:20px;padding:0;max-width:min(760px,calc(100vw - 24px));width:100%;background:#FFFDF6;color:#1D3270;box-shadow:6px 6px 0 #1D4289;max-height:calc(100dvh - 24px)}
dialog.workdlg::backdrop{background:rgba(16,26,51,.6)}
.wd-media{aspect-ratio:16/10;background:#EADFC4;border-bottom:3px solid #1D4289;position:relative}
.wd-body{padding:16px 20px 20px;display:grid;gap:8px}
.wd-body h3{font-size:1.4rem;font-weight:600}
.wd-facts{display:flex;gap:8px;flex-wrap:wrap;font-size:.84rem}
.wd-facts span,.wd-facts a{border:2px solid #EADFC4;border-radius:8px;padding:0 8px;color:inherit;text-decoration:none}
.wd-facts a{font-family:var(--display)}
.wd-facts a::after{content:" →"}
.wd-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.wd-gal img{aspect-ratio:16/10;object-fit:cover;border:2px solid #1D4289;border-radius:8px;width:100%}
.wd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.wd-close{position:absolute;right:10px;top:10px;z-index:2}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- เกมเต็มในตู้เกม (game.js → openGame) เปิดทับทั้งจอ ---------- */
.extgame{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:#101E26}
.extbar{display:flex;align-items:center;gap:8px;padding:6px 8px;padding-top:max(6px,env(safe-area-inset-top));background:#FFF4D6;border-bottom:3px solid #1D4289}
.extbar .small{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1D3270;font-size:.85rem}
.extbar .hudbtn{white-space:nowrap}
.extgame iframe{flex:1;width:100%;border:0;display:block;background:#101E26}
html.extg-open,html.extg-open body{overflow:hidden}
@media (min-width: 900px) and (min-height: 560px){
  .extgame{inset:14px;border:3px solid #1D4289;border-radius:18px;overflow:hidden;box-shadow:0 0 0 100vmax #0F1A33B3}
  .extbar{border-radius:15px 15px 0 0}
}
@media (max-width: 560px){ .extbar .small{display:none} .extbar{justify-content:space-between} }

/* ---------- แผงในเกม: รวมผลงาน / ติดต่อ / สมัครงาน (game.js → openWorks, openContact, openJoin) ---------- */
.panel.gpanel{text-align:left;gap:8px;padding:12px 14px;max-width:560px}
.panel.gpanel.wide{max-width:900px}
.ghead{display:flex;align-items:center;gap:8px;justify-content:space-between}
.ghead h3{font-size:1.1rem}
.gchips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.gchips .chip{flex:none;font-size:.8rem;padding:4px 10px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.gwork{display:grid;gap:3px;text-align:left;background:#fff;border:2px solid #1D4289;border-radius:10px;padding:5px;color:#1D3270;font:inherit;cursor:pointer}
.gwork:hover,.gwork:focus-visible{background:#FFF4D6}
.gthumb{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#E7EEF9}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gplay{position:absolute;right:5px;bottom:5px;background:#1D4289;color:#fff;font-style:normal;font-size:.7rem;border-radius:99px;padding:1px 7px}
.gwork b{font-size:.82rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gwork small{font-size:.7rem;color:#5A688F}
.gcontact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.glinks{display:grid;gap:6px;align-content:start}
.glinks a,.glinks>div{display:grid;background:#fff;border:2px solid #1D4289;border-radius:10px;padding:5px 9px;color:#1D3270;text-decoration:none}
.glinks b{font-size:.72rem;color:#5A688F;font-weight:600}
.glinks span{font-size:.9rem}
.gaddr{display:grid;gap:2px;font-size:.8rem;padding:2px}
.gaddr a{color:#1D4289;font-weight:600}
.gform{display:grid;gap:6px;align-content:start}
.gform input,.gform textarea{font:inherit;font-size:.9rem;border:2px solid #1D4289;border-radius:8px;padding:6px 8px;background:#fff;color:#1D3270;width:100%}
.gform textarea{resize:vertical}
.gform small{font-size:.7rem;color:#5A688F}
.gpanel .btn.primary{text-decoration:none}
@container stage (max-width: 600px){ .gcontact{grid-template-columns:1fr} .ggrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))} }
.gchips{min-height:36px;align-items:center}
.gform .go{background:#FFC72C;color:#1D3270;border:2.5px solid #1D4289;border-radius:10px;padding:6px 12px;font:inherit;font-weight:600;box-shadow:3px 3px 0 #1D4289;cursor:pointer}