/* RBUI — Layout A (Kids+Cute) — variable-choice ready */
:root{--bg:#f7fbff;--ink:#273142;--muted:#586174;--brand:#62b9ff;--accent:#a8f0d9;--warn:#ffc077;--error:#ff6b90;--ok:#3fcc88;--card:#ffffffee;--shadow:0 10px 28px rgba(60,105,170,.12);--radius:20px;--btn:#fff}
body {
    margin: 0;
    font-family: 'Itim', 'Kanit', system-ui, Segoe UI, Arial, sans-serif;
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 40%, var(--bg-bottom) 100%);
    color: var(--text);
    overflow-x: hidden;
}
.rb-root{display:flex;flex-direction:column;gap:12px;min-height:100dvh;background:var(--bg)}
.rb-topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.rb-left,.rb-right{display:flex;flex-wrap: wrap;gap:12px;align-items:center}
.rb-title{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 22px;
} 
.rb-title::before{content:"🦉";margin-right:8px}
.rb-iconbtn{border:none;background:var(--btn);padding:10px 14px;border-radius:16px;box-shadow:var(--shadow);font-size:20px;cursor:pointer}
.rb-stage{flex:1;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:12px}
.rb-hud{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;background:#ffffffcc;padding:10px;border-radius:var(--radius);box-shadow:var(--shadow)}
.rb-chip{display:flex;gap:10px;align-items:center;padding:8px 12px;background:var(--card);border-radius:999px;font-weight:900}
.rb-star svg{width:20px;height:20px;fill:#ffd74d}
.rb-canvas{background:linear-gradient(180deg,#f2fbff,#fffafc);border:2px dashed #e8edff;border-radius:var(--radius);position:relative;display: inline;place-items:center;box-shadow:var(--shadow);padding:12px}
.rb-toast{position:absolute;left:50%;top:200px;transform:translateX(-50%) scale(.96);opacity:0;background:#fff;padding:12px 16px;border-radius:999px;box-shadow:var(--shadow);transition:all .18s ease;font-weight:900;border:3px solid transparent;z-index: 10;}
.rb-toast.show{opacity:1;transform:translateX(-50%) scale(1)}
.rb-toast.ok{border-color:var(--ok);color:var(--ok)} .rb-toast.err{border-color:var(--error);color:var(--error)}
.rb-dock{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;padding:12px}
.rb-btn{border:none;border-radius:18px;padding:14px 20px;font-weight:900;box-shadow:var(--shadow);background:#fff;cursor:pointer}
.rb-btn.primary{background:linear-gradient(180deg,var(--brand),#83cbff);color:#003b66}
.rb-btn.warn{background:linear-gradient(180deg,#ffd8a1,#ffc06b)}
.rb-modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.3)}
.rb-modal.open{display:grid}
.rb-card{width:min(720px,92vw);background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:20px}
.rb-bar{height:16px;background:#f1f5ff;border-radius:999px;overflow:hidden;margin:10px 0 2px}
.rb-bar.ok>i{display:block;height:100%;background:linear-gradient(90deg,#42c777,#6be6a1)}
.rb-bar.err>i{display:block;height:100%;background:linear-gradient(90deg,#ff6b83,#ffa3b3)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.choice {
    background: #fff;
    border: 2px solid transparent;
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform .12s ease, box-shadow .12s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.choice::before {
    content: "☁️";
}
.choice.wrong {
    border-color: #d7263d;
    background: #ffeaea;
}
.choice.correct {
    border-color: #25a244;
    background: #eaffea;
}
.question {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
    margin: 6px 0 12px;
}
.sky-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.rb-help-panel {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,.3);
  padding: 16px;
  width: 300px;
  display: none;   /* เริ่มต้นปิด */
  z-index: 999;
}
.rb-help-panel.open {
  display: block;  /* แสดงเมื่อกด */
}
.rb-help-head {
    display: flex;
    justify-content: space-between; /* ซ้าย-ขวา */
    align-items: center;    
}
.container {
    padding: auto 100px;
    max-width: 1100px;
    margin: 0 auto;
}

.rb-profile {
    font-weight: bold;
}

.rb-btn-confirm {
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--brand);
    color: white;
    font-weight: 700;
    box-shadow: var(--shadow);    
}

.hidden {
    display: none;
}

.rb-modes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#gameModes label {
  font-weight: 700;
  font-size: 20px;
  color: #334155; /* slate-700 */
  margin-right: 4px;
}

/* สไตล์ select */
#gameModes select {
  appearance: none;           /* ซ่อน default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #f8fafc;        /* พาสเทลฟ้าอ่อน */
  border: 2px solid #cbd5e1;  /* ขอบเทาอ่อน */
  border-radius: 12px;
  padding: 8px 36px 8px 14px; /* เว้นขวาเผื่อไอคอน */
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

#gameModes select:hover {
  background: #e0f2fe;        /* hover ฟ้าอ่อน */
  border-color: #38bdf8;
}

#gameModes select:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,0.3);
}

/* ใส่ลูกศรน่ารักแทน default */
#gameModes select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='%2364748b' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.25 8.29a.75.75 0 01-.02-1.08z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

/* ปุ่ม Confirm */
#rb-mode-confirm {
  background: linear-gradient(to right, #38bdf8, #0ea5e9);
  color: white;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 12px;
  padding: 8px 18px;
  cursor: pointer;
  transition: transform .1s ease, background .2s ease;
  box-shadow: 0 2px 8px rgba(14,165,233,0.35);
}

/* ปรับสไตล์ตัวเลือกในบางเบราว์เซอร์ (Firefox ดีสุด) */
#gameModes select option {
  font: 600 14px/1.4 "Poppins","Segoe UI",sans-serif;
  color: #0f172a;
  background: #f8fafc;         /* สีพื้นฐานเมนู */
}

/* ตัวที่ถูกเลือกในเมนู (บางเบราว์เซอร์เห็นผล) */
#gameModes select option:checked {
  background: #e0f2fe;          /* ฟ้าอ่อน */
  color: #0f172a;
}

@media (max-width: 767px) {
  .rb-topbar{display:flex;flex-direction: column;justify-content:space-between;align-items:center;padding:12px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .rb-dock{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:12px}
  .rb-right{display:flex;flex-wrap: wrap;justify-content:center;gap:12px;align-items:center}
}