/* ===== layout.css — จัดหน้าแนวนอน (มือถือหมุนจอ) และจอคอม ให้พอดีหน้าเดียวไม่ต้องเลื่อน =====
   โหลดหลังสุด (override เท่านั้น) · ใช้หน่วย --u (≈ 1% ของด้านที่แคบกว่า) ให้ทุกอย่างย่อ/ขยายตามขนาดจอ
   เงื่อนไข: จอกว้างกว่าสูง (อัตราส่วน ≥ 5:4) — แนวตั้งบนมือถือไม่ถูกแตะ */

html{background:#1b0f08}

@media (min-aspect-ratio:5/4){
:root{--u:min(1vh,.62vw);--chr:calc(var(--u)*13);--cw:clamp(34px,calc(var(--u)*8.6),84px)}
@supports (height:1dvh){:root{--u:min(1dvh,.62vw)}}

html,body{height:100%;overflow:hidden}
#app,#app.home{max-width:none;width:100%;height:100vh;height:100dvh;margin:0}

/* ---------- หน้าแรก: ตัวละครซ้าย · ป้ายไม้ขวา ---------- */
#app.home .hero{left:3%;bottom:0;height:min(92%,calc(var(--u)*100));max-width:46%;width:auto}
#app.home .signs{--sw:min(23vw,calc(var(--u)*57));right:5%;top:53%;transform:translateY(-50%);width:calc(var(--sw)*2 + var(--u)*2);
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:calc(var(--u)*1.2);align-content:center}
#app.home .s-play{grid-column:1;grid-row:1/3;align-self:center}
#app.home .s-shop{grid-column:2;grid-row:1;align-self:end}
#app.home .s-prof{grid-column:2;grid-row:2;align-self:start}
#app.home .scene .cstat{left:auto;right:3%;width:min(46%,420px)}

/* ---------- หน้าย่อย (เลือกเกม/เล่นเกม/สร้างห้อง/ร้านค้า/โปรไฟล์) ---------- */
.pg{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100%;max-width:none;margin:0}
.pg>.hud{grid-area:1/1;z-index:3;align-self:center;padding:calc(var(--u)*1) calc(var(--u)*2)}
.pg>.pg-title{grid-area:1/1;justify-self:center;align-self:center;margin:0;
  height:calc(var(--u)*12);width:calc(var(--u)*12*1.94)}
.pg>.pg-body{grid-row:2;grid-column:1;padding:calc(var(--u)*.6) calc(var(--u)*2.4) calc(var(--u)*1.4);gap:calc(var(--u)*1.2);
  justify-content:center;align-items:center}
.hud-back{width:calc(var(--u)*9);height:calc(var(--u)*9);min-width:36px;min-height:36px}
.hud-who,.coin-pill{font-size:max(12px,calc(var(--u)*2.9))}

/* เล่นเกม: ป้าย 3 อัน เรียงแถวเดียว */
.pg[data-pg=play] .pg-body{flex-direction:row;flex-wrap:wrap;align-content:center}
.pg[data-pg=play] .plank{width:min(31%,calc(var(--u)*58))}
.pg[data-pg=play] .gcur,.pg[data-pg=play] .cstat,.pg[data-pg=play] .joinbox,.pg[data-pg=play] .note{flex:0 0 auto}
.pg[data-pg=play] .gcur{width:min(100%,calc(var(--u)*110));max-width:none}
.pg[data-pg=play] .joinbox,.pg[data-pg=play] .note{width:min(100%,calc(var(--u)*80))}

/* เลือกเกม: รายการเกมเรียงเป็นตาราง 2 คอลัมน์ */
.pg[data-pg=games] .gtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*58),1fr));
  gap:calc(var(--u)*1.2);width:100%;max-width:calc(var(--u)*150)}
.gtile{padding:calc(var(--u)*1.2) calc(var(--u)*1.8);gap:calc(var(--u)*1.4);border-radius:14px}
.gt-ic{font-size:calc(var(--u)*7);width:calc(var(--u)*8)}
.gt-tx b{font-size:max(15px,calc(var(--u)*3.6))}
.gt-tx small{font-size:max(10.5px,calc(var(--u)*2.4))}
.gt-tx i{font-size:max(10px,calc(var(--u)*2.2))}
.gt-go{font-size:calc(var(--u)*6)}
.pg[data-pg=games] .wbtn{padding:calc(var(--u)*1.3) calc(var(--u)*3);font-size:max(13px,calc(var(--u)*3))}

/* สร้างห้อง/ตั้งค่า: แบ่ง 2 คอลัมน์ */
.pg[data-pg=create] .pg-body{align-items:flex-start}
.pg[data-pg=create] .panel{max-width:calc(var(--u)*170);columns:2;column-gap:calc(var(--u)*3.2);padding:calc(var(--u)*1.4) calc(var(--u)*2)}
.pg[data-pg=create] .panel>*{break-inside:avoid}
.pg[data-pg=create] .sec{margin:calc(var(--u)*1.2) 0 calc(var(--u)*.6);font-size:max(13px,calc(var(--u)*2.8))}
.pg[data-pg=create] .opt{margin:calc(var(--u)*.8) 0}
.pg[data-pg=create] .opt input[type=number]{padding:calc(var(--u)*.8);font-size:max(15px,calc(var(--u)*3.4))}
.pg[data-pg=create] .chip{padding:calc(var(--u)*.7) calc(var(--u)*1.4);font-size:max(12px,calc(var(--u)*2.6))}
.pg[data-pg=create] .wbtn.go{width:100%;margin-top:calc(var(--u)*1)}
.pg[data-pg=create] .score-sum ul{font-size:max(11.5px,calc(var(--u)*2.5));line-height:1.35}

/* ร้านค้า/โปรไฟล์: หมวดเรียงข้างกัน */
.pg[data-pg=shop] .pg-body,.pg[data-pg=profile] .pg-body{align-items:flex-start;justify-content:flex-start}
.pg[data-pg=shop] .panel,.pg[data-pg=profile] .panel{max-width:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*36),1fr));gap:calc(var(--u)*1) calc(var(--u)*2);align-items:start;padding:calc(var(--u)*1) calc(var(--u)*1.6)}
.pg[data-pg=shop] .panel>.wbtn,.pg[data-pg=profile] .panel>.wbtn,.pg[data-pg=profile] .namebox{grid-column:1/-1}
.pg[data-pg=shop] .panel>.wbtn,.pg[data-pg=profile] .panel>.wbtn{justify-self:center}
.pg[data-pg=profile] .namebox{display:flex;align-items:center;gap:calc(var(--u)*1.6)}
.pg[data-pg=profile] .namebox input{padding:calc(var(--u)*.8) calc(var(--u)*1.4);font-size:max(14px,calc(var(--u)*3.2))}
.ksec .sec{margin:0 0 calc(var(--u)*.5);font-size:max(12px,calc(var(--u)*2.6))}
.ksec .grid{grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*15),1fr));gap:calc(var(--u)*.7)}
.ksec .item2{padding:calc(var(--u)*.5);gap:calc(var(--u)*.3);font-size:max(10px,calc(var(--u)*2.1));border-radius:10px;line-height:1.15}
.ksec .wbtn{padding:calc(var(--u)*.4) calc(var(--u)*.8);font-size:max(10.5px,calc(var(--u)*2.2));border-radius:9px;box-shadow:0 2px 0 var(--wood-d)}
.ksec .pv-ch{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:10px}
.ksec .pv-table{width:calc(var(--u)*10);height:calc(var(--u)*6.4);border-width:3px;border-radius:10px}
.ksec .pick-row{flex-wrap:wrap;overflow:visible;gap:calc(var(--u)*.9);padding:0}
.ksec .pick{min-width:calc(var(--u)*16);padding:calc(var(--u)*.7) calc(var(--u)*.5)}

/* ร้านค้า: การ์ดไอเทมขนาดใหญ่ขึ้น (เฉพาะ .grid.big) — specificity สูงกว่า .ksec .grid เดิมด้านบนโดยตั้งใจ */
.ksec .grid.big{grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*21),1fr));gap:calc(var(--u)*1)}
.ksec .grid.big .item2{padding:calc(var(--u)*.8);gap:calc(var(--u)*.5);font-size:max(13px,calc(var(--u)*2.8));border-radius:14px}
.ksec .grid.big .wbtn{padding:calc(var(--u)*.55) calc(var(--u)*1.1);font-size:max(12.5px,calc(var(--u)*2.6))}
.ksec .grid.big .pv-ch{width:calc(var(--u)*11.5);height:calc(var(--u)*11.5);border-radius:14px}
.ksec .grid.big .pv-table{width:calc(var(--u)*14);height:calc(var(--u)*9);border-width:4px;border-radius:14px}
.ksec .grid.big .pv-back{width:calc(var(--u)*8.5);height:calc(var(--u)*12);border-width:3px}
.ksec .grid.big .pv-bg{width:calc(var(--u)*15.5);height:calc(var(--u)*9.2);border-radius:11px}
.cattabs{padding:0 0 calc(var(--u)*.8)}
.catbtn{padding:calc(var(--u)*.55) calc(var(--u)*1.1);font-size:max(11.5px,calc(var(--u)*2.4))}

/* การ์ดตัวอย่างหลังไพ่/ตัวละคร ในร้านค้า: ย่อรูปให้พอดี */
.ksec .pv-back{width:calc(var(--u)*6);height:calc(var(--u)*8.4);border-width:2px;border-radius:5px}
.ksec .pv-bg{width:calc(var(--u)*11);height:calc(var(--u)*6.6);border-radius:8px}
.pg[data-pg=shop] .note{padding:calc(var(--u)*.5) calc(var(--u)*1.5);font-size:max(11px,calc(var(--u)*2.3))}
.pg[data-pg=profile] .namebox span{font-size:max(11px,calc(var(--u)*2.3))}

/* กล่องข้อความ/หน้าต่างซ้อน: ไม่ให้สูงเกินจอ */
.ov .box,.pile-dialog,.rule-body{max-height:92vh;max-height:92dvh;overflow:auto}
.ov{overflow:auto}

/* ---------- โต๊ะเล่น: ซ้าย = โต๊ะ+ผู้เล่น · ขวา = ข้อความ/ไพ่ในมือ/ปุ่ม ---------- */
#app{flex-direction:row}
#app>.pg,#app>.scene,#app>.page{flex:1 1 auto;min-width:0;width:100%}
.colL{display:flex;flex-direction:column;flex:1.3 1 0;min-width:0;min-height:0}
.colR{display:flex;flex-direction:column;flex:1 1 0;min-width:0;min-height:0;justify-content:center;overflow-y:auto;overflow-x:hidden;padding:0 calc(var(--u)*.8)}
#app{gap:calc(var(--u)*1)}

.top{padding:calc(var(--u)*.7) calc(var(--u)*1.2) 0;gap:6px;flex-wrap:wrap}
.pill{font-size:max(11px,calc(var(--u)*2.6));padding:0 calc(var(--u)*1.8)}
.arena{padding:0 calc(var(--u)*.4);gap:calc(var(--u)*.5)}
.felt{margin:0;min-height:0;border-width:calc(var(--u)*1);border-radius:calc(var(--u)*4.6);padding:calc(var(--u)*.7);gap:calc(var(--u)*.5)}

/* ผู้เล่นรอบโต๊ะ */
.pl-info b{font-size:max(10px,calc(var(--u)*2.6));max-width:calc(var(--u)*20)}
.pl-info small{font-size:max(9px,calc(var(--u)*2.2))}
.pl-left,.pl-right{width:auto}
.pl-left{margin-right:calc(var(--chr)*-.3)}.pl-right{margin-left:calc(var(--chr)*-.3)}
.pl-left .pl-info,.pl-right .pl-info{min-width:0;max-width:calc(var(--u)*17)}
.pl-left .pl-info b,.pl-right .pl-info b{max-width:calc(var(--u)*16)}
.pl-top{margin-bottom:calc(var(--chr)*-.34)}
.pl-top .pl-info,.pl-bottom .pl-info{flex-direction:row;align-items:center;gap:5px}
.pl-top .pl-info small,.pl-bottom .pl-info small{display:inline}
.pl-bottom{margin-right:calc(var(--u)*1)}.pl-bottom .chr{height:calc(var(--chr)*.7)}
.pl-bottom .chr .avatar-img{height:calc(var(--chr)*1.08)}
.tm{margin:0;font-size:max(9px,calc(var(--u)*2))}

/* ไพ่บนโต๊ะ */
.zone .m .c{width:calc(var(--u)*5.6);height:calc(var(--u)*8);font-size:max(9px,calc(var(--u)*2.3));padding:1px 2px}
.zone-top .m .c+.c,.zone-bottom .m .c+.c{margin-left:calc(var(--u)*-2.6)}
.zone-left .m .c,.zone-right .m .c{width:calc(var(--u)*8);height:calc(var(--u)*7)}
.zone-left .m .c+.c,.zone-right .m .c+.c{margin-top:calc(var(--u)*-4.6)}
.zone-top,.zone-bottom{min-height:calc(var(--u)*9)}
.felt .dp .c.d{width:calc(var(--u)*8.2);height:calc(var(--u)*11.8);font-size:max(11px,calc(var(--u)*3));margin-left:calc(var(--u)*-2.6)}
.felt .dp .c.d:first-child{margin-left:0}
.felt .piles{gap:calc(var(--u)*1.2)}
.felt .piles .back{width:calc(var(--u)*9.2);height:calc(var(--u)*12.8);font-size:max(11px,calc(var(--u)*3))}
.felt .piles .lab,.dp+.lab{font-size:max(9px,calc(var(--u)*2));display:block}
@media (max-height:420px){.felt .piles .lab,.dp+.lab{display:none}}

/* ฝั่งขวา: ข้อความ ไพ่ในมือ ปุ่ม */
.logs{font-size:max(10px,calc(var(--u)*2.2))}
@media (max-height:420px){.logs{display:none}}
.hint{margin:calc(var(--u)*.4) calc(var(--u)*.6);min-height:calc(var(--u)*7.5);padding:calc(var(--u)*.6) calc(var(--u)*2);font-size:max(12px,calc(var(--u)*2.9))}
.hint small{font-size:max(10px,calc(var(--u)*2.3))}
.dock-wrap{flex:none}
.hand{padding:calc(var(--u)*2.8) calc(var(--u)*1) calc(var(--u)*.8);min-height:calc(var(--cw)*1.42 + var(--u)*3.6);justify-content:safe center;overflow-y:visible}
.hand .c{flex:0 0 var(--cw);width:var(--cw);height:calc(var(--cw)*1.42);margin-left:calc(var(--cw)*-.2);font-size:max(13px,calc(var(--cw)*.4))}
.hand .c:first-child{margin-left:0}
.tools{padding:0 calc(var(--u)*.8) calc(var(--u)*.6)}
.tools button{padding:calc(var(--u)*.7);font-size:max(11px,calc(var(--u)*2.4))}
.acts{padding:calc(var(--u)*.4) calc(var(--u)*.8) calc(var(--u)*1);gap:calc(var(--u)*.8)}
.acts button{padding:calc(var(--u)*1.7) 4px;font-size:max(13px,calc(var(--u)*3));border-radius:12px}

/* เกมอื่น (ป๊อกเด้ง/เก้าเก/ผสมสิบ/อีแก่) ใช้โครงเดียวกัน — ขยายตามจอ */
.gx{font-size:max(11px,calc(var(--u)*2.5));gap:calc(var(--u)*.8)}
.gs b{font-size:1em}.gs small,.gnote,.gpile small,.gstock,.gind{font-size:max(10px,calc(var(--u)*2.2))}
.gx .gcards .c{width:calc(var(--u)*6.4);height:calc(var(--u)*9);font-size:max(10px,calc(var(--u)*2.8))}
.gx .gcards .c+.c{margin-left:calc(var(--u)*-3.2)}
.gcards .cb{width:calc(var(--u)*6.4);height:calc(var(--u)*9)}.gx .gcards .cb+.cb{margin-left:calc(var(--u)*-4.2)}
.gcards{min-height:calc(var(--u)*9.6)}
.gpot{font-size:max(11px,calc(var(--u)*2.7))}

/* หน้าเข้าสู่ระบบ/ข้อความกลางจอ */
.page{max-height:100%;overflow:auto}
}

/* จอกว้างมาก (คอม): จำกัดความกว้างปุ่มใหญ่ๆ ไม่ให้ยืดเกินไป */
@media (min-aspect-ratio:5/4) and (min-width:1400px){
.acts button{max-width:calc(var(--u)*45)}
}