/* เหมืองทอง (Gold Mine) page. Approved theme 2026-10-16 (docs/design/gold-mine-theme-mockup.html). Display only. */
:root{
  --ink:#1a1512; --sky:#f6d27a; --sky-2:#fbe7b0; --clay:#c8823a; --rust:#7a3b22; --slate:#3d3833; --basalt:#2a2420;
  --vein:#ffc21a; --lamp:#fff1b8; --up:#3fae5a; --down:#d8432f; --paper:#fff8e0; --muted:#5d5248;
  --shadow:5px 5px 0 var(--ink);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--basalt);color:var(--ink);font-family:'Chakra Petch',system-ui,-apple-system,'Segoe UI','Noto Sans Thai',sans-serif;font-size:16px;line-height:1.5}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mine{max-width:1120px;margin:0 auto;border-left:4px solid var(--ink);border-right:4px solid var(--ink)}

/* ---------- surface ---------- */
.surface{position:relative;background:linear-gradient(var(--sky-2),var(--sky));padding:24px 24px 0;overflow:hidden}
.sun{position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#fff6d0 0 40%,transparent 41%),repeating-conic-gradient(rgba(255,194,26,.55) 0 8deg,transparent 8deg 16deg);opacity:.9;pointer-events:none}
.top{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:end}
.headframe{position:relative;width:150px;height:170px}
.headframe svg{width:100%;height:100%;display:block}
.title h1{margin:0;font-size:clamp(2.4rem,6vw,4.2rem);line-height:.95;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-shadow:4px 4px 0 var(--vein)}
.title p{margin:6px 0 14px;font-size:1rem;max-width:42ch}
.tags{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.shadow-tag{display:inline-block;background:var(--lamp);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:2px 10px;font-weight:700;transform:rotate(-2deg)}
.shadow-tag[data-kind="live"]{background:var(--down);color:#fff}
.shadow-tag[data-kind="unknown"]{background:#e8dfc4;transform:none}
.kill-tag{display:inline-block;background:var(--ink);color:var(--lamp);border:3px solid var(--ink);padding:2px 10px;font-weight:600;font-size:.9rem}
.kill-tag[data-on="false"]{background:var(--up);color:var(--ink)}

/* intel lamp: the one bold element */
.lamp{position:relative;width:240px;background:var(--ink);color:var(--lamp);border-radius:14px 14px 4px 4px;padding:14px 14px 12px;box-shadow:var(--shadow);margin-bottom:18px}
.lamp-bulb{display:flex;align-items:center;gap:12px}
.bulb{width:58px;height:58px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:1.6rem;font-weight:700;color:var(--ink);border:3px solid #000}
.lamp[data-dir="LONG"] .bulb{background:var(--up);box-shadow:0 0 0 6px rgba(63,174,90,.25),0 0 28px 8px rgba(63,174,90,.55)}
.lamp[data-dir="SHORT"] .bulb{background:var(--down);box-shadow:0 0 0 6px rgba(216,67,47,.25),0 0 28px 8px rgba(216,67,47,.55)}
.lamp[data-dir="NONE"] .bulb{background:#6d655e;box-shadow:none}
.lamp strong{display:block;font-size:1.3rem;line-height:1.1}
.lamp small{display:block;color:#d9cfa8;font-size:.85rem}
.lamp .expire{margin-top:10px;border-top:2px dashed #5a5048;padding-top:8px;font-size:.88rem}
.lamp .expire b{color:var(--vein)}
.lamp .note{margin-top:6px;font-size:.8rem;color:#d9cfa8;overflow-wrap:anywhere}

/* price signs */
.signs{position:relative;display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.sign{background:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 12px 8px;min-width:150px}
.sign span{display:block;font-size:.8rem}
.sign strong{font-size:1.4rem;font-variant-numeric:tabular-nums}
.sign em{display:block;font-style:normal;font-size:.75rem;color:var(--muted)}
.pos{color:#1f7a3a}.neg{color:#b3321f}
.grass{height:16px;margin-top:18px;background:repeating-linear-gradient(90deg,#5c8a3a 0 10px,#4c7a2e 10px 20px);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}

/* reporter */
.reporter{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin:18px 0 4px;background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);padding:12px 14px}
.mic{width:84px;height:84px;border-radius:50%;background:var(--ink);border:3px solid var(--ink);box-shadow:0 0 0 4px var(--vein);overflow:hidden}
.mic img{width:100%;height:100%;object-fit:cover;display:block}
.reporter h2{margin:0;font-size:1.15rem;line-height:1.2}
.reporter .role{font-size:.82rem;color:var(--muted)}
.reporter blockquote{margin:8px 0 0;font-size:.98rem;max-width:68ch}
.reporter blockquote::before{content:"";display:block;position:absolute;left:34px;top:-12px;border:10px solid transparent;border-bottom-color:var(--ink)}
.reporter time,.reporter .auto{display:block;margin-top:6px;font-size:.8rem;color:var(--muted)}

/* ---------- strata with shafts ---------- */
.strata{position:relative;padding:28px 24px 34px;background:linear-gradient(180deg,var(--clay) 0 26%,var(--rust) 26% 58%,var(--slate) 58% 100%);min-height:220px}
.strata::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background:radial-gradient(circle,rgba(0,0,0,.45) 1.4px,transparent 1.6px) 0 0/14px 14px}
.strata-head{position:relative;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:0 0 16px}
.layer-note{position:relative;color:var(--lamp);font-weight:600;margin:0;font-size:.95rem;max-width:62ch}
.shafts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shaft{position:relative;padding-top:34px;min-width:0}
.shaft::before{content:"";position:absolute;left:50%;top:-28px;bottom:0;width:4px;margin-left:-2px;background:repeating-linear-gradient(#2b2520 0 6px,#8b7a63 6px 10px)}
.cage{position:relative;background:var(--paper);border:4px solid var(--ink);box-shadow:var(--shadow);padding:0 14px 14px}
.cage::before,.cage::after{content:"";position:absolute;top:-4px;bottom:-4px;width:10px;background:repeating-linear-gradient(var(--ink) 0 4px,transparent 4px 12px)}
.cage::before{left:-14px}.cage::after{right:-14px}
.helmet{position:relative;width:112px;height:112px;margin:-38px auto 8px;border-radius:50%;border:4px solid var(--ink);overflow:hidden;background:var(--ink);box-shadow:0 0 0 5px var(--vein)}
.helmet img{width:100%;height:100%;object-fit:cover;display:block}
.helmet .badge{width:100%;height:100%;display:grid;place-items:center;font-size:2.6rem;font-weight:700;color:var(--vein);background:var(--slate)}
.cage h2{margin:0;text-align:center;font-size:1.25rem;line-height:1.2;overflow-wrap:anywhere}
.cage .style{margin:2px 0 4px;text-align:center;font-size:.85rem;color:var(--muted)}
.cage .state{margin:0 0 8px;text-align:center}
.chip{display:inline-block;border:2px solid var(--ink);padding:0 8px;font-size:.78rem;font-weight:700;background:var(--lamp)}
.chip[data-k="run"]{background:var(--up)}
.chip[data-k="warn"]{background:var(--down);color:#fff}
.chip[data-k="exp"]{background:#e8dfc4}
.pl{display:flex;justify-content:space-between;align-items:baseline;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:6px 0;margin-bottom:10px}
.pl span{font-size:.85rem}
.pl strong{font-size:1.6rem;font-variant-numeric:tabular-nums}
dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:.9rem}
dt{color:var(--muted)}dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.cart{margin-top:12px;background:var(--basalt);color:var(--lamp);border-radius:6px 6px 14px 14px;padding:8px 10px;font-size:.85rem;border:3px solid var(--ink)}
.cart b{color:var(--vein)}
.cart .tunnel-box+.row{margin-top:8px;padding-top:8px;border-top:1px dashed #5a5048}
.cart.empty{background:#6d655e;color:#fff}
.cart .mini{margin-top:6px}
.limit-note{margin:10px 0 0;font-size:.82rem;background:#ffe0dc;border:2px solid var(--ink);padding:4px 8px}
.plans{margin-top:10px;font-size:.82rem}
.plans summary{cursor:pointer;font-weight:600}
.plans ul{margin:6px 0 0;padding-left:18px}
.plans code{font-size:.75rem;overflow-wrap:anywhere}
.cage .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cage .edithint{flex-basis:100%;color:var(--muted);font-size:.8rem}

/* buttons */
.btn{font:inherit;font-weight:700;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 12px;cursor:pointer;background:var(--lamp);color:var(--ink);min-height:40px}
.btn.stop{background:var(--down);color:#fff}
.btn.go{background:var(--up)}
.btn.small{padding:2px 8px;min-height:32px;font-size:.85rem}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn[data-armed="true"]{outline:4px solid var(--vein);outline-offset:2px}
.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,.pick:focus-within{outline:3px solid var(--vein);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
.btn:active:not([disabled]){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--paper)}

/* ---------- gate ---------- */
.gate{position:relative;max-width:460px;margin:8px auto;background:var(--paper);border:4px solid var(--ink);box-shadow:var(--shadow);padding:18px 18px 16px}
.gate h2{margin:0 0 4px;font-size:1.25rem}
.gate p{margin:0 0 12px;color:var(--muted);font-size:.92rem}

/* ---------- bedrock ---------- */
.bedrock{background:var(--basalt);color:var(--lamp);padding:22px 24px 28px;border-top:4px solid var(--ink)}
.bedrock h3{margin:0 0 4px;font-size:1.1rem}
.bedrock p{margin:0 0 12px;color:#cfc4a2;font-size:.92rem;max-width:70ch}
.vein{position:relative;height:30px;background:#3a332d;border:3px solid #000;clip-path:polygon(0 30%,8% 0,22% 25%,38% 5%,55% 30%,70% 0,86% 22%,100% 8%,100% 72%,90% 100%,72% 74%,56% 100%,40% 70%,24% 100%,10% 72%,0 100%)}
.vein i{position:absolute;inset:0 auto 0 0;width:var(--fill,0%);background:repeating-linear-gradient(115deg,var(--vein) 0 14px,#ffd95c 14px 22px)}
.vein[data-unknown="true"]{background:repeating-linear-gradient(135deg,#3a332d 0 8px,#52483f 8px 16px)}
.vein-legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:6px;font-size:.85rem}
.controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}
.btn.all{background:var(--down);color:#fff;font-size:1.05rem}
.btn.kill{background:var(--lamp)}
.tunnel-box{margin:4px 0 10px}
.tunnel{position:relative;height:86px;margin:10px 0 4px;border:3px solid var(--ink);border-radius:40px 8px 8px 40px;background:radial-gradient(circle,rgba(0,0,0,.35) 1.2px,transparent 1.5px) 0 0/10px 10px,linear-gradient(#4a3f37,#2a2420);overflow:visible}
.tunnel.short{border-radius:8px 40px 40px 8px}
.tunnel .rail{position:absolute;left:44px;right:44px;bottom:18px;height:6px;background:repeating-linear-gradient(90deg,#8b7a63 0 10px,#2b2520 10px 14px)}
.tunnel .end{position:absolute;top:50%;transform:translateY(-50%);line-height:0}
.tunnel .end.left{left:6px}.tunnel .end.right{right:6px}
.tunnel .entry{position:absolute;top:8px;bottom:8px;width:0;border-left:3px dashed var(--lamp)}
.tunnel .entry span{position:absolute;top:-2px;left:4px;color:var(--lamp);font-size:.72rem;white-space:nowrap}
.tunnel .glow{position:absolute;top:50%;width:70px;height:70px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,194,26,.45),transparent 70%)}
.tunnel .miner{position:absolute;top:50%;transform:translate(-50%,-50%);line-height:1;transition:left .6s ease}
.tunnel .miner img,.tunnel .miner .badge{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);box-shadow:0 0 0 3px var(--vein);display:block;object-fit:cover;background:var(--lamp);text-align:center;line-height:40px;font-weight:700}
.tunnel .miner small{color:var(--ink);position:absolute;left:50%;top:54px;transform:translateX(-50%);background:var(--lamp);border:2px solid var(--ink);font-size:.72rem;padding:0 5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tunnel-box .legend{margin-top:34px;display:flex;justify-content:space-between;font-size:.82rem;color:var(--lamp)}
.tunnel-box .near{margin:6px 0 0;font-size:.88rem;font-weight:600}
@media (prefers-reduced-motion:reduce){.tunnel .miner{transition:none}}
.btn.cutall{background:var(--vein);color:var(--ink)}
.btn.statsreset{background:transparent;color:var(--ink);border:1px solid var(--vein);white-space:normal}
.btn.statsreset:disabled{opacity:.55}
.pausebar{color:var(--ink);display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:12px;padding:8px 12px;border:3px solid var(--ink);background:var(--lamp);font-weight:700}
.pausebar[hidden]{display:none}
.contracts{border:0;margin:10px 0;padding:0;display:grid;gap:8px}
.contracts legend{font-weight:600;font-size:.9rem;padding:0;margin-bottom:6px}
.contract{position:relative;display:block;border:3px solid var(--ink);background:#fff;padding:8px 10px 8px 40px;cursor:pointer;min-width:0}
.contract input{position:absolute;left:10px;top:12px;width:22px;height:22px;margin:0;cursor:pointer}
.contract b{display:block;font-variant-numeric:tabular-nums}
.contract small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.contract:has(input:checked){background:var(--lamp);box-shadow:3px 3px 0 var(--ink)}
.contract:has(input:focus-visible){outline:3px solid var(--vein);outline-offset:3px}
.contracts .hint{margin:0;color:var(--muted);font-size:.8rem}
.nocontract{margin:8px 0;padding:6px 10px;border:3px solid var(--ink);background:#ffe0dc;font-size:.88rem;font-weight:600}
.nocontract .btn{margin-top:6px}
.bedrock .btn:focus-visible{outline-color:var(--vein)}
.bedrock details{margin-top:22px;border-top:4px dashed #5a5048;padding-top:14px}
.bedrock summary{cursor:pointer;font-weight:700}
.tablewrap{overflow-x:auto;margin-top:10px}
table{border-collapse:collapse;width:100%;font-size:.85rem;color:var(--lamp)}
th,td{text-align:left;padding:4px 8px;border-bottom:1px solid #5a5048;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.pos{color:#7fe29a}td.neg{color:#ff9d8f}

/* ---------- toast / banner ---------- */
.banner{margin:0;padding:8px 16px;background:var(--down);color:#fff;font-weight:600;border-bottom:3px solid var(--ink)}
.banner[data-kind="info"]{background:var(--lamp);color:var(--ink)}

/* ---------- dialogs and forms ---------- */
dialog{border:4px solid var(--ink);box-shadow:var(--shadow);background:var(--paper);color:var(--ink);padding:0;max-width:min(560px,calc(100vw - 32px));width:100%}
dialog::backdrop{background:rgba(26,21,18,.7)}
dialog form,dialog .dlg{padding:16px 18px 18px;position:relative}
dialog h3{margin:0 0 4px;font-size:1.3rem;padding-right:36px}
dialog .copy{margin:0 0 12px;color:var(--muted);font-size:.9rem}
.x{position:absolute;right:10px;top:10px;width:36px;height:36px;border:3px solid var(--ink);background:var(--lamp);font-weight:700;cursor:pointer}
.field{display:block;margin:10px 0}
.field>span{display:block;font-weight:600;font-size:.9rem}
.field small{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
.field input:not([type=checkbox]),.field select{width:100%;min-height:42px;padding:6px 10px;border:3px solid var(--ink);background:#fff;border-radius:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.picks{border:0;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.picks legend{font-weight:600;font-size:.9rem;padding:0;margin-bottom:6px}
.pick{position:relative;display:block;text-align:center;border:3px solid var(--ink);background:#fff;padding:8px 4px;cursor:pointer;min-width:0}
.pick input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pick img{width:64px;height:64px;border-radius:50%;border:3px solid var(--ink);box-shadow:0 0 0 3px var(--vein);object-fit:cover;display:block;margin:0 auto 6px}
.pick span{display:block;font-size:.82rem;line-height:1.2;overflow-wrap:anywhere}
.pick:has(input:checked){background:var(--lamp);box-shadow:3px 3px 0 var(--ink)}
.pick:has(input:checked) span{font-weight:700}
.fixed-risk{margin:10px 0;padding:6px 10px;border:2px dashed var(--ink);font-size:.88rem;background:#fff}
.msg{min-height:1.4em;margin:8px 0 0;font-size:.9rem;font-weight:600;color:#b3321f}
.msg[data-kind="ok"]{color:#1f7a3a}
.dlg-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:12px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:8px 0}
.facts div{border:2px solid var(--ink);background:#fff;padding:4px 8px;min-width:0}
.facts span{display:block;font-size:.75rem;color:var(--muted)}
.facts b{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.blockers{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.blockers span{background:#ffe0dc;border:2px solid var(--ink);padding:0 8px;font-size:.82rem}
.accept{display:flex;gap:8px;align-items:flex-start;margin:10px 0;padding:8px;border:3px solid var(--ink);background:#ffe9a8;font-size:.88rem}
.accept input{width:22px;height:22px;flex:none;margin-top:2px}

/* ---------- narrow ---------- */
@media (max-width:860px){
  .top{grid-template-columns:1fr}
  .headframe{display:none}
  .lamp{width:100%;margin-bottom:6px}
  .signs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .sign{min-width:0;padding:4px 6px}
  .sign strong{font-size:1.05rem}
  .layer-note{margin-bottom:0}
  .shafts{grid-template-columns:1fr;gap:46px}
  .surface,.strata,.bedrock{padding-left:16px;padding-right:16px}
  .cage::before{left:-10px}.cage::after{right:-10px}
  .strata-head{margin-bottom:36px}
}
@media (max-width:520px){
  .row2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .picks{gap:6px}
  .pick img{width:52px;height:52px}
  .reporter{grid-template-columns:64px 1fr;gap:10px}
  .mic{width:64px;height:64px}
  .reporter blockquote::before{left:24px}
  .mine{border-left-width:0;border-right-width:0}
}
@media (prefers-reduced-motion:no-preference){
  .lamp .bulb{animation:glow 2.4s ease-in-out infinite}
  @keyframes glow{50%{filter:brightness(1.18)}}
}

/* ?view=summary (Overview, เบ๊น วาซาบิ): read-only summary. Every control stays on the เหมืองทอง tab. */
[data-view="summary"] #createBtn,[data-view="summary"] .pausebar,[data-view="summary"] .nocontract .btn,[data-view="summary"] .cage .symbtn,[data-view="summary"] .cage .editbtn,[data-view="summary"] .cage .edithint,[data-view="summary"] .cage .actions,[data-view="summary"] .controls,[data-view="summary"] #statsResetBtn,[data-view="summary"] #ctlMsg,[data-view="summary"] .bedrock details{display:none!important}

/* สถานะตลาดทอง (market-clock.js, user 2026-10-17): world gold market open/closed, sessions and Binance XAUUSDT liquidity. Display only; stays visible in ?view=summary. */
.market-clock{display:grid;gap:8px;margin:18px 24px;padding:12px 16px;background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);min-width:0}
.market-clock:empty{display:none}
.market-clock .mc-main{display:flex;align-items:center;gap:12px;min-width:0}
.market-clock .mc-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border:3px solid var(--ink);border-radius:50%;font-size:1.4rem;background:#fff}
.market-clock .mc-main strong{display:block;font-size:1.3rem;line-height:1.15;overflow-wrap:anywhere}
.market-clock .mc-main span:not(.mc-icon){display:block;margin-top:2px;font-size:.95rem;overflow-wrap:anywhere}
.market-clock.mc-open{background:#e3f4d8}.market-clock.mc-open .mc-icon{background:var(--up)}
.market-clock.mc-break{background:var(--lamp)}.market-clock.mc-break .mc-icon{background:var(--vein)}
.market-clock.mc-closed{background:#ece4d0}.market-clock.mc-closed .mc-icon{background:#d9cfa8}
.market-clock .mc-slots{display:flex;flex-wrap:wrap;gap:8px}
.market-clock .mc-slot{display:inline-flex;flex-wrap:wrap;gap:2px 8px;padding:3px 10px;border:2.5px solid var(--ink);border-radius:999px;background:#fff;font-size:.85rem;font-variant-numeric:tabular-nums}
.market-clock .mc-slot b{font-weight:700}
.market-clock .mc-slot.now{background:var(--ink);color:var(--lamp)}
.market-clock .mc-liquid{margin:0;font-size:.95rem;overflow-wrap:anywhere}
.market-clock .mc-note{margin:0;color:var(--muted);font-size:.8rem;line-height:1.4}
@media (max-width:520px){.market-clock{margin:14px 10px;padding:10px 12px}.market-clock .mc-main strong{font-size:1.1rem}}