/* 3Kingdoms Online SV.Yaksa ล็อกอินรายวัน: standalone page (like gacha.html), dark lacquer + gold. Every change: bump ?v= in daily.html */
:root{--gold:#e8c46a;--gold2:#a8842f;--gold3:#ffe7a6;--ink:#f3e6c4;--dim:#cdb07a;--bg:#0c0504;--line:#6b4a24;--red:#8c140c;
  --r-c:#9c8f78;--r-r:#4f8fe0;--r-e:#b06ee8;--r-l:#ffc23d}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans Thai","Leelawadee UI","Tahoma",sans-serif;font-size:15px}
[hidden]{display:none!important}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:12px 16px 28px;
  background:radial-gradient(ellipse at 50% -10%,#3a120a 0,#170604 55%,#0c0504 100%) fixed}
a{color:var(--gold)}
.dl-wait{padding:80px 0;color:var(--dim)}
.dl-note{max-width:1040px;width:100%;font-size:14px;color:#d8c49a;background:#1d0e0a;border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:10px}
.dl-center{text-align:center;padding:26px 16px;margin-top:40px;max-width:520px}
.dl-center p{font-size:17px;color:var(--gold3);margin:12px 0}
.dl-warn{background:#3a2405;border-color:#c99a3e;color:#ffe2a0}
.dl-top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.dl-logo{height:38px;width:auto;display:block}
.dl-who{display:flex;align-items:center;gap:6px;flex:1 1 220px;min-width:0}
.dl-who select{font:inherit;max-width:100%;min-width:0;padding:5px 8px;border-radius:5px;border:1px solid var(--gold2);background:#140604;color:var(--ink)}
.dl-link{padding:5px 12px;border:1px solid var(--line);border-radius:16px;text-decoration:none;white-space:nowrap}
.dl-link:hover{border-color:var(--gold)}
.dl-win{position:relative;width:100%;max-width:1040px;background:linear-gradient(#3a1d14,#24110c);border:2px solid var(--gold2);border-radius:8px;
  box-shadow:0 0 0 1px #000,inset 0 0 0 1px rgba(255,220,150,.12),0 10px 34px #000b;overflow:hidden}
.dl-title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px 12px;padding:9px 12px;background:linear-gradient(#4a2416,#2a130c);
  border-bottom:1px solid var(--gold2);color:var(--gold);font-weight:700;font-size:19px;letter-spacing:.5px;text-align:center}
.dl-title small{font-size:13px;color:#c9a35a;font-weight:400}
.dl-body{display:grid;grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:820px){.dl-body{grid-template-columns:minmax(0,1fr)}}

/* stage */
.dl-stage{position:relative;overflow:hidden;min-height:470px;padding:18px 0 22px;display:flex;flex-direction:column;align-items:center;gap:14px;
  background:radial-gradient(ellipse at 50% 42%,#4a140b 0,#220805 55%,#120403 100%)}
.dl-stage::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.22;
  background:repeating-conic-gradient(from 0deg at 50% 46%,rgba(255,200,90,.25) 0 6deg,transparent 6deg 18deg);-webkit-mask-image:radial-gradient(circle at 50% 46%,#000 0,transparent 62%);mask-image:radial-gradient(circle at 50% 46%,#000 0,transparent 62%)}
.dl-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.dl-chips{position:relative;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 12px}
.dl-chip{font-size:13.5px;padding:4px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.45);color:var(--dim)}
.dl-chip.ok{color:#a6f08f;border-color:#3f7a2e}.dl-chip.no{color:#ffb3a0;border-color:#8c2a1a}
.dl-seal{position:relative;font:700 54px/1 "Noto Serif TC","PMingLiU",serif;color:#ffd36a;text-shadow:0 0 22px rgba(255,170,60,.55),0 3px 0 #3a0a04;
  width:84px;height:84px;display:grid;place-items:center;border-radius:50%;border:2px solid #e3b358;background:radial-gradient(circle at 35% 30%,#a3261a,#4a0905);
  box-shadow:inset 0 0 14px rgba(0,0,0,.6),0 0 30px rgba(255,140,40,.25)}
.dl-stage.spin .dl-seal{animation:dl-pulse .5s ease-in-out infinite alternate}
@keyframes dl-pulse{to{transform:scale(1.08);box-shadow:inset 0 0 14px rgba(0,0,0,.6),0 0 46px rgba(255,170,60,.6)}}

/* reel */
.dl-reel{position:relative;width:calc(100% - 24px);max-width:640px;height:150px;overflow:hidden;border-radius:10px;border:2px solid var(--gold2);
  background:linear-gradient(#1a0805,#2b0d07 50%,#1a0805);box-shadow:inset 0 0 26px #000,0 0 0 1px #000;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.dl-marker{position:absolute;left:50%;top:0;bottom:0;width:0;z-index:3;pointer-events:none}
.dl-marker::before,.dl-marker::after{content:'';position:absolute;left:-11px;border:11px solid transparent}
.dl-marker::before{top:0;border-top:14px solid #ffd36a;filter:drop-shadow(0 2px 2px #000)}
.dl-marker::after{bottom:0;border-bottom:14px solid #ffd36a;filter:drop-shadow(0 -2px 2px #000)}
.dl-strip{position:absolute;left:0;top:13px;display:flex;gap:8px;will-change:transform}
.dl-tile{flex:0 0 108px;height:120px;border-radius:8px;border:1px solid #6b4a24;background:linear-gradient(170deg,#3d0e08,#1d0705 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;text-align:center;position:relative}
.dl-tile .ic{width:48px;height:48px;display:grid;place-items:center}
.dl-tile .ic img{max-width:48px;max-height:48px;image-rendering:pixelated}
.dl-tile .ic .gl{font:700 26px/1 serif;color:var(--gold)}
.dl-tile .nm{font-size:12.5px;line-height:1.25;color:var(--ink);max-height:2.5em;overflow:hidden;overflow-wrap:anywhere}
.dl-tile .q{position:absolute;right:6px;top:4px;font-size:11.5px;font-weight:700;color:var(--gold3)}
.dl-tile.r-c{border-color:#6b5a44}.dl-tile.r-r{border-color:var(--r-r);box-shadow:inset 0 0 14px rgba(79,143,224,.35)}
.dl-tile.r-e{border-color:var(--r-e);box-shadow:inset 0 0 16px rgba(176,110,232,.4)}.dl-tile.r-l{border-color:var(--r-l);box-shadow:inset 0 0 18px rgba(255,194,61,.45)}
.dl-tile.win{outline:3px solid #ffd36a;outline-offset:-3px;animation:dl-win 1s ease-in-out infinite alternate}
@keyframes dl-win{to{box-shadow:0 0 22px rgba(255,211,106,.9),inset 0 0 22px rgba(255,211,106,.5)}}
.dl-say{position:relative;min-height:1.5em;margin:0;padding:0 14px;text-align:center;color:var(--gold3);font-size:16px}
.dl-go{position:relative;min-width:240px;padding:13px 26px;font-weight:700;font-size:19px;line-height:1.2;letter-spacing:.5px;cursor:pointer;color:#fff4d6;border:1px solid #f0c060;border-radius:8px;
  background:linear-gradient(#c6341f,#8c140c 55%,#5c0805);box-shadow:inset 0 1px 0 rgba(255,230,170,.5),0 6px 18px rgba(0,0,0,.5);text-shadow:0 1px 0 #3a0804;font-family:inherit}
.dl-go:hover:not(:disabled){filter:brightness(1.12)}
.dl-go:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}
.dl-go.dl-small{min-width:140px;font-size:16px;padding:9px 18px}
.dl-err{position:relative;margin:0 14px;background:#3a0c08;border:1px solid #c6341f;color:#ffb3a0;border-radius:6px;padding:8px 12px;font-weight:600;font-size:14.5px;text-align:center;max-width:600px}

/* result */
.dl-res{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:rgba(8,2,1,.72);animation:dl-fade .3s ease-out}
@keyframes dl-fade{from{opacity:0}}
.dl-rays{position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,210,100,.32) 0 8deg,transparent 8deg 22deg);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 64%);mask-image:radial-gradient(circle,#000 0,transparent 64%);
  animation:dl-rot 12s linear infinite}
@keyframes dl-rot{to{transform:rotate(360deg)}}
.dl-res-in{position:relative;width:min(360px,calc(100% - 32px));padding:20px 18px 18px;text-align:center;border-radius:10px;border:2px solid #e3b358;
  background:linear-gradient(170deg,#5a1a0c,#2a0a05 70%);box-shadow:0 0 0 1px #000,0 0 40px rgba(255,180,60,.45);animation:dl-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes dl-pop{from{transform:scale(.4);opacity:0}}
.dl-res-t{font-size:22px;font-weight:700;color:#ffd36a;text-shadow:0 2px 0 #3a0a04}
.dl-res-ic{width:92px;height:92px;margin:12px auto 8px;display:grid;place-items:center;border-radius:12px;border:2px solid #ffd36a;background:radial-gradient(circle,#4a1a0c,#1a0604)}
.dl-res-ic img{max-width:72px;max-height:72px;image-rendering:pixelated}
.dl-res-ic .gl{font:700 44px/1 serif;color:var(--gold)}
.dl-res-n{font-size:19px;font-weight:700;color:var(--gold3);overflow-wrap:anywhere}
.dl-res-d{font-size:13.5px;color:var(--dim);margin:8px 0 14px}

/* side */
.dl-side{padding:12px 14px 16px;border-left:1px solid var(--line);background:#1a0a07;min-width:0}
@media (max-width:820px){.dl-side{border-left:0;border-top:1px solid var(--line)}}
.dl-side h3{margin:10px 0 6px;font-size:15.5px;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:4px}
.dl-list{display:grid;gap:4px}
.dl-li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;background:rgba(0,0,0,.25);font-size:13.5px}
.dl-li img{max-width:28px;max-height:28px;image-rendering:pixelated}
.dl-li .gl{font:700 16px/1 serif;color:var(--gold);text-align:center}
.dl-li .n{overflow-wrap:anywhere}.dl-li .p{color:var(--gold3);font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-li.r-r .n{color:#9cc4ff}.dl-li.r-e .n{color:#d7a8ff}.dl-li.r-l .n{color:#ffd36a;font-weight:700}
.dl-rules{margin:0;padding-left:20px;font-size:13.5px;line-height:1.55;color:#d8c49a}
.dl-hist{list-style:none;margin:0;padding:0;font-size:13.5px}
.dl-hist li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid rgba(107,74,36,.5)}
.dl-hist li .d{color:#9c8664;white-space:nowrap}
@media (max-width:560px){
  body{padding:8px 10px 20px}
  .dl-stage{min-height:420px}
  .dl-reel{height:128px}.dl-strip{top:10px}
  .dl-tile{flex-basis:92px;height:104px}.dl-tile .ic,.dl-tile .ic img{width:40px;height:40px;max-width:40px;max-height:40px}
  .dl-go{min-width:0;width:calc(100% - 28px)}
  .dl-seal{width:68px;height:68px;font-size:42px}
}
@media (prefers-reduced-motion:reduce){.dl-rays,.dl-tile.win,.dl-stage.spin .dl-seal{animation:none}}