/* ===== Fluid sizing (หัวใจของ responsive) ===== */
:root{
  /* base theme */
  --bg:#0b0b10;
  --line:#2e2e44;
  --text:#ffffff;
  --muted:#cfcfe6;
  --muted2:#a7a7c7;
  --gold:#f7d07a;
  --gold2:#ff9f43;
  --shadow: 0 14px 40px rgba(0,0,0,.45);

  /* fluid layout (ปรับตามจอ) */
  --app-max: 440px;
  --app-gap: 14px;

  --panel-pad: 14px;

  --grid-gap: 14px;
  --pick-pad: 10px;
  --pick-radius: 18px;
  --pick-img: 68px;
  --name-font: 13px;
  --name-pad-y: 4px;
  --name-pad-x: 10px;

  --dice-box: 96px;
  --dice-img: 84px;

  --btn-font: 18px;
  --btn-pad-y: 8px;
  --btn-pad-x: 35px;

  --result-font: 18px;
  --result-pad: 14px;

  --h1-size: 24px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(247,208,122,.12), transparent 55%),
    radial-gradient(900px 500px at 80% 30%, rgba(95,87,255,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  padding:22px 14px 24px;
}

.viewport{
  width:100%;
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.app{
  width:100%;
  max-width:var(--app-max);
  display:flex;
  flex-direction:column;
  gap:var(--app-gap);
}

/* ===== Header ===== */
.header{ padding:0 4px; }

.title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

h1{
  margin:0;
  font-size:var(--h1-size);
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

.badge{
  font-size:12px;
  font-weight:900;
  color:#20150a;
  background:linear-gradient(90deg, var(--gold), #ffdca0, #f0b85e);
  padding:7px 10px;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  user-select:none;
}

.status{
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
  background:rgba(20,20,35,.75);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}

/* ===== Panels ===== */
.panel{
  background:rgba(20,20,35,.75);
  border:1px solid var(--line);
  border-radius:18px;
  padding:var(--panel-pad);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.panel-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:.2px;
  color:var(--muted);
}

.panel-sub{
  font-size:12px;
  color:var(--muted2);
  text-align:right;
  max-width:55%;
}

.pick-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2.5vw, 14px);
}

.pick-grid button{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: clamp(6px, 1.8vw, 8px);
  padding: clamp(6px, 1.8vw, 10px);
  min-height: clamp(88px, 22vw, 132px);
  background: linear-gradient(180deg,#1b1b2f,#0f0f1f);
  border: 1px solid var(--line);
  border-radius: clamp(14px, 3vw, var(--pick-radius));

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 clamp(6px, 2vw, 10px) clamp(16px, 4vw, 24px) rgba(0,0,0,.45);

  cursor:pointer;
  transition:
    transform .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;

  user-select:none;
}


.pick-grid button:hover{ transform: translateY(-1px); }
.pick-grid button:active{ transform: scale(.97); }

.pick-grid button.active{
  border-color: rgba(247,208,122,.95);
  box-shadow:
    0 0 0 2px rgba(247,208,122,.25),
    0 16px 36px rgba(0,0,0,.55);
  background: linear-gradient(180deg, rgba(247,208,122,.14), rgba(15,15,31,.95));
}

.pick-grid img{
  width: clamp(42px, 12vw, 68px);
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  max-width: 100%;
}

/* Name pill */
.face-name{
  font-size: clamp(11px, 2.4vw, 13px);
  padding: 0.25em 0.7em;
  font-weight:900;
  color:#fff7d1;
  text-shadow: 0 1px 4px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.6);
  background:rgba(0,0,0,.35);
  border-radius:999px;
  display:inline-block;
}

.pick-grid button.active .face-name{
  background: var(--gold);
  color:#2a1500;
  text-shadow:none;
}

/* ===== Dice row ===== */
.dice-row{
  display:flex;
  justify-content:center;
  gap:12px;
  margin:10px 0 14px;
}

.die{
  width:var(--dice-box);
  height:var(--dice-box);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.die img{
  width:var(--dice-img);
  height:var(--dice-img);
  object-fit:contain;
  border-radius:16px;
  padding:6px;
}

/* Rolling animation */
.rolling .die{ animation: wobble .12s infinite alternate; }
.rolling .die img{ animation: spin .55s infinite linear; }

@keyframes spin{
  from{ transform: rotate(0deg) scale(1.02); }
  to{ transform: rotate(360deg) scale(1.02); }
}
@keyframes wobble{
  from{ transform: translateY(0px) rotate(-1.2deg); }
  to{ transform: translateY(-2px) rotate(1.2deg); }
}

/* ===== Roll button ===== */
.roll-btn{
  width:100%;
  font-size:var(--btn-font);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.2px;
  background: linear-gradient(90deg, var(--gold), #ffdca0, #f0b85e);
  color:#20150a;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

.roll-btn:active{ transform: translateY(1px) scale(.99); }
.roll-btn:disabled{ opacity:.55; cursor:not-allowed; filter: grayscale(.2); }

/* ===== Result ===== */
.result{
  margin-top:14px;
  padding:var(--result-pad);
  border-radius:14px;
  background:rgba(10,10,18,.55);
  border:1px solid var(--line);
  font-size:var(--result-font);
  font-weight:900;
  color:#ffdca0;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  transition: all .25s ease;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Win tiers */
.win-1{
  background:rgba(27,27,47,.85);
  border-color: rgba(247,208,122,.25);
}
.win-2{
  background:linear-gradient(135deg, rgba(42,36,20,.95), rgba(27,27,47,.95));
  border-color: rgba(247,208,122,.35);
  box-shadow:0 0 18px rgba(247,208,122,.35);
  animation:pulse .9s ease-in-out infinite alternate;
}
@keyframes pulse{ from{ transform:scale(1);} to{ transform:scale(1.05);} }

.win-3{
  background:linear-gradient(135deg, var(--gold), var(--gold2));
  color:#2a1500;
  text-shadow:none;
  border-color: rgba(255,200,80,.65);
  box-shadow:
    0 0 30px rgba(255,200,80,.85),
    0 0 60px rgba(255,200,80,.55);
  animation:boom .55s ease-out;
}
@keyframes boom{ 0%{ transform:scale(.6); opacity:0;} 100%{ transform:scale(1); opacity:1;} }

/* Payout */
.payout{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  text-align:left;
}
.payout-title{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  margin-bottom:6px;
}
.payout-row{
  font-size:12px;
  color:var(--muted2);
  line-height:1.7;
}
.payout-row b{ color:#fff; }
.payout-note{
  margin-top:6px;
  font-size:11px;
  color:#7f7f9d;
}

.footer-note{
  margin-top:10px;
  font-size:11px;
  color:#6f6f8f;
  text-align:center;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  background: rgba(20,20,35,.92);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:999px;
  color:var(--text);
  font-size:13px;
  box-shadow:var(--shadow);
  display:none;
  max-width:min(520px, calc(100% - 24px));
  text-align:center;
  z-index:9999;
  backdrop-filter: blur(10px);
}
.toast.show{ display:block; }

/* =========================================================
   ✅ Responsive: รองรับทุกมือถือ (width + height)
   ========================================================= */

/* มือถือทั่วไปเล็ก-กลาง */
@media (max-width: 390px){
  :root{
    --app-max: 420px;
    --grid-gap: 12px;
    --pick-img: 60px;
    --dice-box: 86px;
    --dice-img: 74px;
    --btn-font: 16px;
    --btn-pad-y: 7px;
    --btn-pad-x: 28px;
    --h1-size: 22px;
  }
}

/* มือถือเล็ก / จอเตี้ย (เช่น iPhone SE, FB WebView) */
@media (max-width: 360px), (max-height: 640px){
  :root{
    --grid-gap: 10px;
    --panel-pad: 12px;
    --pick-pad: 8px;
    --pick-radius: 16px;
    --pick-img: 52px;

    --name-font: 11px;
    --name-pad-y: 3px;
    --name-pad-x: 8px;

    --dice-box: 76px;
    --dice-img: 64px;

    --result-font: 16px;
    --result-pad: 12px;

    --h1-size: 21px;
  }
  .panel-sub{ max-width:60%; }
}

/* จอเตี้ยมากจริง ๆ (กันล้นแน่นอน) */
@media (max-height: 600px){
  :root{
    --grid-gap: 8px;
    --pick-img: 46px;
    --dice-box: 68px;
    --dice-img: 56px;
    --btn-font: 15px;
    --result-font: 15px;
  }
  .payout{ display:none; } /* กันล้นแบบออโต้ */
  .footer-note{ font-size:10px; }
}

/* จอใหญ่ขึ้น (tablet/ใหญ่) ให้ดูเต็มขึ้น */
@media (min-width: 480px){
  :root{
    --app-max: 460px;
    --pick-img: 72px;
    --dice-box: 102px;
    --dice-img: 90px;
  }
}

/* ===== iOS / Mobile Height Fix ===== */
body{
  height:100dvh;
}

.viewport{
  height:100dvh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.app{
  height:100%;
  max-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* โซนหลัก ไม่เลื่อน */
.panel-main{
  flex-shrink:0;
}

/* โซนรอง เลื่อน */
.panel-scroll{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
}