/* ---------- พื้นหลังหน้าเกม ---------- */
body.games{background:none}
body.games::before{content:"";position:fixed;left:0;top:0;right:0;bottom:0;z-index:-1;background:#d6f1e3 url("../media/ui/bg.jpg") center/cover no-repeat}

/* ---------- เมนูเกม ---------- */
.gmenu{max-width:1240px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
.gmenu .top{margin-bottom:10px;padding:6px 6px 6px 6px;background:rgba(255,255,255,.82);border-radius:24px;box-shadow:0 4px 0 rgba(43,33,24,.08)}
.gmenu .back{box-shadow:0 4px 0 rgba(43,33,24,.18)}
.gm-layout{flex:1;display:flex;align-items:center;gap:18px;min-height:0}
.ghero{flex:0 0 clamp(170px,19vw,230px);display:flex;flex-direction:column;align-items:center;text-align:center}
.bubble{position:relative;background:#fff;border-radius:24px;padding:10px 16px;font-weight:600;font-size:clamp(18px,2vw,22px);line-height:1.25;color:#1d5535;
  box-shadow:0 5px 0 rgba(43,33,24,.12);margin-bottom:14px;animation:bub 3s ease-in-out infinite}
.bubble::after{content:"";position:absolute;left:50%;bottom:-14px;margin-left:-12px;border-top:16px solid #fff;border-left:12px solid transparent;border-right:12px solid transparent}
.bubble .spk{font-size:.9em}
@keyframes bub{0%,100%{translate:0 0}50%{translate:0 -4px}}
.mascot-btn{background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:0}
.mascot{display:block;width:100%;height:auto;transform-origin:50% 100%;animation:idle 2.8s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(30,60,20,.25))}
.ghero .mascot-btn{width:88%}
.mascot-btn:active .mascot{scale:.94}
@keyframes idle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}
body.talking .mascot{animation:talk .3s ease-in-out infinite alternate}
@keyframes talk{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-7px) rotate(3deg)}}
.gh1{margin:10px 0 0;font-size:clamp(22px,2.6vw,30px);color:#fff;background:linear-gradient(#3fa968,#2f7d4f);padding:6px 18px;border-radius:18px;border:4px solid #fff;
  box-shadow:0 5px 0 rgba(29,85,53,.35);white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.ggrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px);align-content:center}
.gcard{position:relative;display:flex;flex-direction:column;padding:0;border:6px solid #fff;border-radius:30px;overflow:hidden;cursor:pointer;font:inherit;text-align:left;
  background:var(--c2);box-shadow:0 7px 0 rgba(0,0,0,.13),0 16px 26px rgba(30,60,20,.22);
  animation:bob 3.4s ease-in-out infinite;animation-delay:var(--d,0s);transition:scale .12s ease}
.gcard:active{scale:.95}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.gc-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#fff}
.gc-img img{display:block;width:100%;height:100%;object-fit:cover}
.gc-label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 10px 16px;background:linear-gradient(var(--c1),var(--c2))}
.gc-t{font-weight:600;font-size:clamp(17px,2vw,23px);line-height:1.15;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.22)}
.gc-play{flex:0 0 auto;position:relative;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.gc-play::after{content:"";position:absolute;left:16px;top:12px;border-left:15px solid var(--c2);border-top:9px solid transparent;border-bottom:9px solid transparent}
@media (max-width:860px){
  .gm-layout{flex-direction:column;align-items:stretch}
  .ghero{flex:none;flex-direction:row;justify-content:center;gap:14px}
  .ghero .mascot-btn{width:110px;order:-1}
  .bubble{margin:0}.bubble::after{display:none}
  .gh1{margin:0}
}
@media (max-width:600px){.ggrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- หน้าเล่นเกม ---------- */
.gm{
  position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;
  display:flex;flex-direction:column;
  background:#fff6e2 url("../media/ui/bg.jpg") center/cover no-repeat;
  padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  font-family:"Mitr",system-ui,sans-serif;color:#4a2c10;-webkit-user-select:none;user-select:none
}
.gm-top{
  display:flex;align-items:center;gap:10px;
  background:#fbe7c2;border:4px solid #fff;border-radius:22px;padding:6px;box-shadow:0 4px 0 rgba(150,100,40,.25)
}
.gm .pill{display:flex;align-items:center;font:600 clamp(16px,2vw,20px) "Mitr",sans-serif;border:3px solid #fff;border-radius:16px;padding:6px 14px;cursor:pointer;color:#4a2c10;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.gm .pill.orange{background:linear-gradient(#ffcf5c,#ff9f1c)}
.gm .pill.blue{background:linear-gradient(#9fd3ff,#4aa3f0);color:#08345e}
.gm .pill:active{transform:translateY(3px)}
.gi{font-size:24px;margin-right:6px}
.gm-title{flex:1;font-weight:600;font-size:clamp(20px,2.8vw,30px);color:#5a3410;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-stars{font-size:clamp(22px,2.6vw,30px);letter-spacing:2px;white-space:nowrap}
.gm-stars .on{filter:none}
.gm-stars .off{filter:grayscale(1);opacity:.35}
.gm-stage{position:relative;flex:1;min-height:0}

/* การ์ดภาพทั่วไป */
.tile{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:#fff;border:5px solid #fff;border-radius:24px;cursor:pointer;padding:10px;
  box-shadow:0 6px 0 rgba(150,100,40,.25),0 10px 20px rgba(90,60,20,.12);touch-action:manipulation
}
.tile img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.tile.ok{border-color:#4caf50;box-shadow:0 0 0 6px #b9f6ca,0 6px 0 rgba(0,0,0,.12)}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
.pop{animation:popin .35s ease}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* เกม 1: ไม่เหมือนเพื่อน */
.row5{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:2.2%}
.row5 .tile{width:17%;aspect-ratio:1/1}

/* เกม 2: โยงเส้น */
.match{position:absolute;left:4%;right:4%;top:0;bottom:0;display:flex;justify-content:space-between}
.match .col{display:flex;flex-direction:column;justify-content:space-around;width:24%}
.match .tile{aspect-ratio:4/3;width:100%;max-height:23%;cursor:grab}
.match .dot{position:absolute;width:26px;height:26px;border-radius:50%;background:#ff9f1c;border:4px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.2);top:50%;margin-top:-13px}
.match .col.l .dot{right:-20px}
.match .col.r .dot{left:-20px;background:#8e7cc3}
.lines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* เกม 3: การ์ดความจำ */
.mem{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;gap:2.2%;padding:0 6%;align-content:center;justify-content:center}
.card{position:relative;aspect-ratio:1/1;cursor:pointer;perspective:800px}
.card .in{position:absolute;inset:0;transition:transform .35s;transform-style:preserve-3d}
.card.open .in{transform:rotateY(180deg)}
.card .face,.card .back{position:absolute;inset:0;border-radius:22px;border:5px solid #fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 6px 0 rgba(150,100,40,.25)}
.card .back{background:repeating-linear-gradient(45deg,#ffb74d 0 18px,#ffa726 18px 36px);display:flex;align-items:center;justify-content:center;font-size:56px;color:#fff;font-weight:600;text-shadow:0 3px 0 rgba(0,0,0,.2)}
.card .face{background:#fff;transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;padding:10%}
.card .face img{max-width:100%;max-height:100%;object-fit:contain}
.card.done .face{border-color:#4caf50}

/* เกม 4: นับเลข */
.count-area{position:absolute;left:0;right:0;top:0;bottom:24%}
.count-item{position:absolute;cursor:pointer;touch-action:manipulation}
.count-item img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.count-item .badge{position:absolute;right:-6px;top:-6px;width:44px;height:44px;border-radius:50%;background:#ff7043;color:#fff;font-weight:600;font-size:26px;display:flex;align-items:center;justify-content:center;border:4px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.nums{position:absolute;left:0;right:0;bottom:0;height:22%;display:flex;align-items:center;justify-content:center;gap:2.4%}
.num{height:86%;aspect-ratio:1/1;border-radius:50%;border:5px solid #fff;font:600 clamp(34px,5vw,56px) "Mitr",sans-serif;color:#fff;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.18);text-shadow:0 3px 0 rgba(0,0,0,.18)}
.num:active{transform:translateY(4px)}

/* เกม 5,6: ลากวาง */
.piece{position:absolute;touch-action:none;cursor:grab;z-index:2}
.piece.drag{z-index:10;cursor:grabbing;filter:drop-shadow(0 10px 12px rgba(0,0,0,.3))}
.piece.lock{cursor:default;z-index:1}
.jig-board{position:absolute;border:6px solid #fff;border-radius:16px;background:#fff;box-shadow:0 6px 0 rgba(150,100,40,.25)}
.jig-board .ghost{position:absolute;inset:0;background-size:100% 100%;opacity:.22}
.jig-slot{position:absolute;outline:2px dashed rgba(90,60,20,.35)}
.jig-piece{border-radius:6px;box-shadow:0 0 0 3px #fff,0 4px 8px rgba(0,0,0,.2);background-repeat:no-repeat}
.jig-piece.lock{box-shadow:none;border-radius:0}
.size-slot{position:absolute;border:5px dashed rgba(90,60,20,.4);border-radius:22px;background:rgba(255,255,255,.65);display:flex;align-items:flex-end;justify-content:center}
.size-slot span{font-weight:600;font-size:22px;color:#5a3410;margin-bottom:-38px}
.size-piece img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}

/* น้องไดโน + คำสั่ง */
.gm-ask{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 2px}
.gm-ask .mascot-btn{width:clamp(58px,8.4vh,84px);flex:0 0 auto}
.gm .gm-prompt{position:relative;align-self:center;margin:0;padding:8px 22px;border-radius:22px;background:#fff;border:3px solid #ffe3a3;
  font-weight:600;font-size:clamp(20px,2.6vw,28px);color:#1d5535;box-shadow:0 4px 0 rgba(0,0,0,.08)}
.gm .gm-prompt::before{content:"";position:absolute;left:-15px;top:50%;margin-top:-11px;border-right:15px solid #ffe3a3;border-top:11px solid transparent;border-bottom:11px solid transparent}
.gm .gm-prompt::after{content:"";position:absolute;left:-10px;top:50%;margin-top:-8px;border-right:11px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.gm-stars .pop-star{display:inline-block;animation:starpop .7s ease}
@keyframes starpop{0%{transform:scale(.3) rotate(-40deg)}55%{transform:scale(1.6) rotate(15deg)}100%{transform:none}}
.card .back span{display:block}

/* พลุ + หน้าชนะ */
.confetti{position:fixed;top:-20px;width:14px;height:20px;border-radius:3px;z-index:95;pointer-events:none;animation:fall 1.6s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.cheer{position:fixed;left:50%;top:42%;z-index:81;transform:translate(-50%,-50%);font:600 clamp(40px,7vw,80px) "Mitr",sans-serif;color:#ff9f1c;white-space:nowrap;
  text-shadow:0 4px 0 #fff,0 8px 16px rgba(0,0,0,.25);pointer-events:none;animation:cheer 1.2s ease forwards}
@keyframes cheer{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}25%{transform:translate(-50%,-50%) scale(1.1);opacity:1}80%{opacity:1}100%{transform:translate(-50%,-60%) scale(1);opacity:0}}
.gm-win{position:fixed;left:0;top:0;right:0;bottom:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(20,40,25,.55)}
.gm-win.open{display:flex}
.win-card{position:relative;width:min(560px,92vw);margin-top:min(120px,14vh);background:linear-gradient(#fffdf4,#fff1cf);border:6px solid #fff;border-radius:36px;
  padding:0 30px 26px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:popin .45s ease}
.win-rays{position:absolute;left:50%;top:-150px;width:440px;height:440px;margin-left:-220px;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(rgba(255,206,84,.85) 0 12deg,rgba(255,206,84,0) 12deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%);animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.win-img{position:relative;z-index:1;display:block;height:min(300px,38vh);width:auto;margin:calc(-1 * min(150px,19vh)) auto 0;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.25));animation:winpop .8s cubic-bezier(.2,1.5,.4,1) both,winbob 2.4s ease-in-out .8s infinite}
@keyframes winpop{0%{transform:scale(.2) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes winbob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.win-t{position:relative;z-index:1;font:600 clamp(36px,5vw,50px) "Mitr",sans-serif;color:#2f7d4f;margin:6px 0 2px;text-shadow:0 3px 0 #fff}
.win-stars{position:relative;z-index:1;font-size:clamp(30px,4vw,42px);margin-bottom:12px}
.win-stars span{display:inline-block;animation:starpop .6s ease both}
.win-stars span:nth-child(2){animation-delay:.12s}.win-stars span:nth-child(3){animation-delay:.24s}.win-stars span:nth-child(4){animation-delay:.36s}.win-stars span:nth-child(5){animation-delay:.48s}
.win-card .controls{position:relative;z-index:1;justify-content:center;flex-wrap:wrap}