/* ---------- หน้าระบายสีแบบแอป (แนวนอน iPad เป็นหลัก) ---------- */
.pa{
  position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;
  background:#fff6e2 url("../media/ui/bg.jpg") center/cover no-repeat;
  display:grid;
  grid-template-columns:minmax(170px,19%) 1fr;
  grid-template-rows:auto auto 1fr;
  grid-template-areas:
    "ex top"
    "ex tools"
    "pal board";
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  column-gap:12px;row-gap:10px;
  font-family:"Mitr",system-ui,sans-serif;color:#4a2c10;
  -webkit-user-select:none;user-select:none;
}

/* ภาพตัวอย่าง มุมบนซ้าย */
.pa-example{
  grid-area:ex;align-self:start;justify-self:stretch;
  padding:8px;border:0;border-radius:18px;background:#fff;cursor:zoom-in;
  box-shadow:0 5px 0 rgba(90,60,20,.18),0 10px 24px rgba(90,60,20,.18);
}
.pa-example img{display:block;width:100%;height:auto;border-radius:12px}
.pa-example.big{
  position:fixed;z-index:60;left:50%;top:50%;width:min(88vw,760px);
  -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);cursor:zoom-out;
  box-shadow:0 0 0 100vmax rgba(30,20,5,.55),0 20px 50px rgba(0,0,0,.4)
}

/* แถบบน */
.pa-top{
  grid-area:top;display:flex;align-items:center;justify-content:space-between;
  background:#fbe7c2;border:4px solid #fff;border-radius:22px;padding:6px;
  box-shadow:0 4px 0 rgba(150,100,40,.25)
}
.pill{
  display:flex;align-items:center;font:600 clamp(16px,2vw,21px) "Mitr",sans-serif;
  border:3px solid #fff;border-radius:16px;padding:4px 14px 4px 6px;cursor:pointer;
  color:#4a2c10;box-shadow:0 4px 0 rgba(0,0,0,.18)
}
.pill svg,.pill img{width:clamp(28px,3.2vw,36px);height:clamp(28px,3.2vw,36px);margin-right:8px;border-radius:8px;background:#fff;object-fit:contain}
.pill.orange{background:linear-gradient(#ffcf5c,#ff9f1c)}
.pill.pink{background:linear-gradient(#ffc4dd,#f78fbd)}
.pill:active,.round:active,.tb:active,.sw:active{-webkit-transform:translateY(3px);transform:translateY(3px)}
.pa-title{flex:1;text-align:center;font-weight:600;font-size:clamp(22px,3vw,34px);color:#5a3410;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ปุ่มกลมมุมขวาบน */
.pa-round{display:none}
.round{
  width:clamp(52px,6.4vw,70px);height:clamp(52px,6.4vw,70px);border-radius:50%;
  border:4px solid #fff;padding:10px;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.2)
}
.round svg{width:100%;height:100%;display:block}
.round.blue,.tb.blue{background:linear-gradient(#64b5f6,#2b7bd6)}
.round.green,.tb.green{background:linear-gradient(#8bdc5a,#3fae2a)}

/* กระดานวาด */
.pa-boardwrap{grid-area:board;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center}
.pa-board{
  position:relative;background:#fff;border-radius:22px;overflow:hidden;
  border:6px solid #e9cfa0;box-shadow:0 6px 0 rgba(150,100,40,.25),0 14px 30px rgba(90,60,20,.18)
}
.pa-board canvas{display:block;width:100%;height:100%}
.pa-board #lines{position:absolute;left:0;top:0;touch-action:none;cursor:crosshair}

/* จานสีขวา 3 คอลัมน์ */
.pa-palette{
  grid-area:pal;align-self:start;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1vh,10px);
  background:#fbe7c2;border:4px solid #fff;border-radius:22px;padding:clamp(8px,1.4vh,14px);
  box-shadow:0 4px 0 rgba(150,100,40,.25)
}
.sw{
  position:relative;width:100%;aspect-ratio:1/1;border-radius:50%;cursor:pointer;
  border:3px solid rgba(255,255,255,.9);padding:0;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.18),0 3px 0 rgba(0,0,0,.15)
}
.sw.on{box-shadow:0 0 0 4px #fff,0 0 0 7px #5a3410}
.sw.on::after{
  content:"";position:absolute;left:12%;top:12%;right:12%;bottom:12%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M40 6L22 26l4 4L44 10z' fill='%23c9803e' stroke='%236b3b12' stroke-width='2.5'/%3E%3Cpath d='M20 28l4 4c-1 6-6 10-14 10 2-3 2-6 3-9 1-3 4-5 7-5z' fill='%23fff' stroke='%236b3b12' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat
}

/* จานสีตกแต่งมุมซ้ายล่าง */
.pa-deco{display:none}

/* แถบเครื่องมือล่าง */
.pa-tools{
  grid-area:tools;display:flex;align-items:stretch;justify-content:space-between;
  background:#fbe7c2;border:4px solid #fff;border-radius:22px;padding:6px;
  box-shadow:0 4px 0 rgba(150,100,40,.25)
}
.tgroup{display:flex;background:#fff;border-radius:16px;margin:0 3px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.tb{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:600 clamp(12px,1.45vw,16px) "Mitr",sans-serif;color:#4a2c10;
  background:transparent;border:0;border-radius:14px;padding:3px clamp(6px,1vw,12px);cursor:pointer;min-width:58px
}
.tb svg{width:clamp(26px,3vw,36px);height:clamp(26px,3vw,36px);margin-bottom:1px}
.tb.card{background:#fff;margin:0 3px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.tb.on{background:linear-gradient(#ffe066,#ffc21a);box-shadow:0 3px 0 #c98f00}
.tgroup .tb.on{background:#ffe9a8;box-shadow:none}
.tb.red{background:linear-gradient(#ffd2cc,#ff9e93)}
.tb.blue,.tb.green{color:#fff}
.tb:disabled{opacity:.4}

/* แนวตั้ง / จอเล็ก (มือถือ) */
@media (orientation:portrait),(max-width:700px){
  .pa{
    grid-template-columns:100px 1fr;
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"ex top" "ex tools" "board board" "pal pal";
    overflow:auto
  }
  .pa-palette{grid-template-columns:repeat(9,1fr)}
  .pa-tools{flex-wrap:wrap;justify-content:center}
}
.tb.card.blue{background:linear-gradient(#64b5f6,#2b7bd6);color:#fff}
.tb.card.green{background:linear-gradient(#8bdc5a,#3fae2a);color:#fff}
.tb.card.red{background:linear-gradient(#ffd2cc,#ff9e93)}
@media (orientation:landscape) and (min-height:700px) and (min-width:701px){
  .pa-deco{display:block;position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:min(17%,180px);height:auto;pointer-events:none}
}