/* ============================================================
   tools.css — 5 หมวดเครื่องมือคอหวย
   #history ดูผลย้อนหลัง
   #dream ทำนายฝัน
   ใช้โทนเดิมของช่วงล่างหน้า (maroon-gold tokens ใน index.html)
   ============================================================ */

/* ---------- ธงชาติ SVG (แทน emoji ที่ Windows แสดงไม่ได้) ---------- */
.flag-ico{
  width:27px;height:20px;border-radius:4px;object-fit:cover;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.45);
  display:inline-block;vertical-align:-3px;
}

/* ---------- ควบคุมร่วม ---------- */
.tool-controls{
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;align-items:center;
  margin-bottom:1.6rem;
}
.tool-select,.tool-input{
  height:46px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
  padding-inline:14px;font-family:var(--font-body);font-size:.95rem;
  min-width:220px;
}
.tool-select:focus-visible,.tool-input:focus-visible{
  outline:2px solid var(--gold-2);outline-offset:0;
  box-shadow:0 0 0 4px rgba(212,175,55,.15);
}
.tool-note{text-align:center;font-size:.76rem;color:var(--ink-faint);margin-top:1rem}

/* ---------- history modal (เปิดจากการ์ดผลหวย / เมนูผลย้อนหลัง) ---------- */
.hist-modal{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;padding:16px}
.hist-modal.is-open{display:flex}
.hist-modal__backdrop{
  position:absolute;inset:0;width:100%;border:0;cursor:pointer;
  background:rgba(10,3,3,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hist-modal__dialog{
  position:relative;width:min(680px,100%);max-height:86vh;overflow-y:auto;
  background:linear-gradient(170deg,var(--bg-3),var(--bg-2));
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
  padding:1.6rem;
}
.hist-modal__head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.hist-modal__head h2{font-family:var(--font-display);font-weight:400;font-size:1.4rem}
.hist-modal__close{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  border:1px solid var(--line-soft);color:var(--ink-dim);font-size:1rem;
  transition:color .15s,border-color .15s;
}
.hist-modal__close:hover{color:var(--gold-2);border-color:var(--gold)}
.result-card[data-code]{cursor:pointer}
body.hist-lock{overflow:hidden}


/* ---------- ชิปเลข .guide-num (หน้าฝัน + ผลค้นฝัน ใช้อยู่ — ส่วนแนวทางเลขเอาออกแล้ว 24 ก.ย. 69) ---------- */
.guide-nums{display:flex;flex-wrap:wrap;gap:.45rem}
.guide-num{
  min-width:40px;height:40px;padding-inline:.55rem;border-radius:10px;
  display:inline-grid;place-items:center;
  font-family:var(--font-display);font-size:1.15rem;color:var(--gold-3);
  background:rgba(20,7,7,.55);border:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;
}
.guide-num--hot{border-color:rgba(200,35,47,.55);color:#ff9d9d;background:rgba(163,22,33,.2)}


/* ---------- #dream ทำนายฝัน ---------- */
.dream-box{
  max-width:680px;margin-inline:auto;border-radius:20px;
  border:1px solid var(--line);background:linear-gradient(170deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow);padding:1.8rem;
}
.dream-form{display:flex;gap:.7rem}
.dream-form .tool-input{flex:1;min-width:0}
.dream-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;justify-content:center}
.dream-chip{
  font-size:.8rem;padding:.35rem .85rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-soft);color:var(--ink-dim);background:rgba(212,175,55,.05);
  transition:color .15s,border-color .15s;
}
.dream-chip:hover{color:var(--gold-2);border-color:var(--gold)}
.dream-chip.is-on{color:var(--gold-2);border-color:var(--gold);background:rgba(212,175,55,.16)}
.dream-az{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;max-width:920px;margin-inline:auto}
.dream-result{margin-top:1.4rem;display:grid;gap:.9rem}
.dream-item{
  border:1px solid var(--line-soft);border-radius:14px;padding:1rem 1.2rem;
  background:rgba(20,7,7,.45);
  display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;
}
.dream-item h4{font-size:.98rem;font-weight:600;color:var(--gold-2);margin-bottom:.15rem}
.dream-item p{font-size:.84rem;color:var(--ink-dim);font-weight:300}
.dream-item .guide-nums{justify-content:flex-end}
.dream-none{text-align:center;color:var(--ink-dim);font-weight:300;padding:.6rem}


/* ---------- responsive ---------- */
@media (max-width:1020px){
}
@media (max-width:700px){
  .dream-form{flex-direction:column}
}
@media (max-width:560px){
  .dream-item{grid-template-columns:1fr}
  .dream-item .guide-nums{justify-content:flex-start}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
}