/* TEEKAN v0.22 */
/* ไอคอนในปุ่มที่ไม่ได้กำหนดขนาด (เช่น ชวนเข้าก๊วน) ไม่ให้ล้นกรอบ */
.btn>svg:not([width]),.fbtn>svg:not([width]),.linkbtn>svg:not([width]){width:20px;height:20px;flex:none}

/* ตีด่วน: การ์ดแรกใหญ่สุด */
.qopt.qbig{padding:18px 16px;border-color:rgba(255,207,58,.7);background:radial-gradient(120% 140% at 0% 0%,rgba(255,138,46,.28),transparent 60%),rgba(255,207,58,.08);box-shadow:0 0 22px rgba(255,138,46,.25)}
.qopt.qbig span{width:52px;height:52px;font-size:28px;background:linear-gradient(135deg,#ffcf3a,#ff4d2e);color:#fff}
.qopt.qbig{grid-template-columns:52px 1fr}
.qopt.qbig b{font-size:19px;font-family:'Chakra Petch',var(--font,sans-serif);font-style:italic}
.qcode-t{align-self:center;font-size:14px;color:var(--mut)}

/* ชุดแชร์ */
.shkit{display:flex;flex-direction:column;gap:12px}
.shk-main svg{width:20px;height:20px}
.shk-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px}
.shk{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--fg2,#c4cbef);font:inherit;cursor:pointer}
.shk i{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line,rgba(130,160,255,.25));background:rgba(17,26,76,.6);color:var(--fg,#eef1ff);transition:transform .12s}
.shk i svg{width:24px;height:24px}
.shk small{font-size:11.5px;white-space:nowrap}
.shk:active i{transform:scale(.92)}
.shk-line i{background:#06C755;border-color:#06C755;color:#fff;box-shadow:0 0 14px rgba(6,199,85,.35)}
.shk-msg i{background:linear-gradient(135deg,#00B2FF,#A033FF 60%,#FF5C87);border-color:transparent;color:#fff}
.shk-fb i{background:#1877F2;border-color:#1877F2;color:#fff}

/* แอดมิน: เปิดแอปล่าสุด */
.seen{flex:none;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut);white-space:nowrap}
.seen.s-on{color:#5dffa0;border-color:rgba(93,255,160,.5);background:rgba(93,255,160,.1)}
.seen.s-wk{color:var(--cyan);border-color:rgba(47,230,255,.4)}
.seen.s-mo{color:var(--gold)}
.seen.s-off{color:var(--orange);border-color:rgba(255,106,61,.4)}

/* ข้อ 14 · อันดับ = ลีดเดอร์บอร์ด */
.lrow .rk{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:3px}
.lrow .rk b{font-weight:800;font-style:italic;font-size:19px}
.lrow .mv{font-size:10.5px;font-style:normal;font-weight:700;letter-spacing:.02em;color:var(--dim,#5a6598)}
.lrow .mv.up{color:#5dffa0}.lrow .mv.dn{color:#ff6a6a}.lrow .mv.new{color:var(--cyan);font-size:9.5px}
.lrow.me{border-color:rgba(47,230,255,.55);background:rgba(47,230,255,.08)}
.lrow em.fire{font-style:normal;color:#ff8a2e;font-weight:700}
.lrow .pts small{display:block;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--mut);text-align:right}

/* ผล 5 เกมล่าสุด */
.l5{display:inline-flex;gap:3px;vertical-align:middle}
.l5 i{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;line-height:1}
.l5 i.w{background:rgba(93,255,160,.18);color:#5dffa0;border:1px solid rgba(93,255,160,.5)}
.l5 i.l{background:rgba(255,106,106,.12);color:#ff8f8f;border:1px solid rgba(255,106,106,.4)}

/* ข้อ 14 · ผู้เล่น = คอลเลกชันการ์ด พลิกได้ */
.info-i{font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:20px}
.flip{perspective:900px;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.flip:focus-visible .fl-in{box-shadow:0 0 0 2px var(--cyan);border-radius:12%}
.fl-in{position:relative;transition:transform .5s cubic-bezier(.3,.9,.3,1);transform-style:preserve-3d}
.flip.on .fl-in{transform:rotateY(180deg)}
.fl-f,.fl-b{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fl-b{position:absolute;inset:0;transform:rotateY(180deg)}
.flip:active .fl-in{scale:.97}
.fb{--tc:#C98A5B;container-type:inline-size;position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:10px 10px 9px;border-radius:16px;
  border:3px solid var(--tc);background:radial-gradient(130% 70% at 50% 0%,color-mix(in srgb,var(--tc) 30%,#151C2E) 0%,#0B0F1A 80%);
  box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 16px color-mix(in srgb,var(--tc) 40%,transparent);overflow:hidden;color:var(--fg)}
.fb-h{display:flex;flex-direction:column;gap:1cqw;border-bottom:1px solid color-mix(in srgb,var(--tc) 50%,transparent);padding-bottom:3cqw}
.fb-h b{font-size:max(12px,10cqw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-h small{font-size:max(10px,7cqw);color:var(--tc);font-weight:700}
.fb-m{display:flex;align-items:baseline;gap:3cqw;flex-wrap:wrap}
.fb-m b{font-weight:800;font-style:italic;font-size:max(18px,19cqw);line-height:1}
.fb-m small{font-size:max(9px,6.4cqw);color:var(--mut)}
.fb-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;text-align:center}
.fb-g span{display:flex;flex-direction:column;font-size:max(9px,6cqw);color:var(--mut)}
.fb-g b{font-size:max(12px,9.5cqw);color:#fff;font-variant-numeric:tabular-nums}
.fb-l{display:flex;flex-direction:column;gap:2cqw}
.fb-l small{font-size:max(9px,6cqw);color:var(--mut)}
.fb .l5 i{width:max(14px,11cqw);height:max(14px,11cqw);font-size:max(8px,6cqw)}
.fb-s{font-size:max(10px,7cqw);color:#ff8a2e;font-weight:700}
.fb-lv{font-size:max(10px,6.6cqw);color:var(--fg2,#c4cbef)}
.fb>*{flex:none}
.fb-btn{margin-top:auto;min-height:34px;border-radius:10px;border:1px solid color-mix(in srgb,var(--tc) 60%,transparent);background:rgba(11,15,26,.6);color:#fff;font:inherit;font-size:max(11px,7cqw);font-weight:600;cursor:pointer}
@container (max-width:150px){.fb-lv{display:none}}

/* ยศใน (i) */
.tierlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tierlist span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:12px;border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);background:color-mix(in srgb,var(--tc) 10%,transparent)}
.tierlist i{font-style:normal;font-size:20px}.tierlist b{font-size:13px;color:var(--tc)}.tierlist small{font-size:11px;color:var(--mut)}

/* ข้อ 16 · การ์ดขิง */
.pcard .ttl.auto{color:#ffd56a}
.pc-sc{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;gap:6px}
.pc-sc span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(11,15,26,.72);border:1px solid color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--c) 45%,transparent)}
.pc-l5{display:flex;gap:4px;margin-top:6px}
.pc-l5 i{flex:1;max-width:28px;height:18px;border-radius:5px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800}
.pc-l5 i.w{background:rgba(93,255,160,.2);color:#5dffa0;border:1px solid rgba(93,255,160,.55)}
.pc-l5 i.l{background:rgba(255,106,106,.14);color:#ff8f8f;border:1px solid rgba(255,106,106,.45)}
/* กรอบเด่นตามยศ */
.pcard.pc-hi{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--pa,0deg),var(--c),#fff8,var(--c),transparent 60%,var(--c)) border-box;animation:pcspin 4s linear infinite}
.pcard.pc-top{border:3px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--pa,0deg),#2FE6FF,#C77DFF,#FF4D2E,#FFCF3A,#2FE6FF) border-box;animation:pcspin 3s linear infinite;box-shadow:0 0 34px var(--g),0 0 60px color-mix(in srgb,var(--c) 30%,transparent)}
.pcard.pc-top::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,rgba(199,125,255,.18) 52%,transparent 66%);background-size:250% 100%;animation:pcholo 3.6s ease-in-out infinite;mix-blend-mode:screen}
.pcard.pc-fire{box-shadow:0 0 0 2px #ff8a2e,0 0 26px rgba(255,90,0,.75),0 -6px 34px rgba(255,207,58,.45)}
.pcard.pc-fire::before{content:"🔥";position:absolute;left:50%;top:4px;transform:translateX(-50%);z-index:3;font-size:22px;filter:drop-shadow(0 0 8px #ff5a00);animation:pcflick 1.2s ease-in-out infinite}
@property --pa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes pcspin{to{--pa:360deg}}
@keyframes pcholo{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes pcflick{50%{transform:translateX(-50%) scale(1.15) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.pcard.pc-hi,.pcard.pc-top,.pcard.pc-top::after,.pcard.pc-fire::before{animation:none}}
/* ตัวเลือกเหรียญโชว์ */
.scpick{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,207,58,.45);background:rgba(255,207,58,.07);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.scpick>span:first-child{font-size:22px;white-space:nowrap}
.scpick b{display:block;font-size:15px}.scpick small{font-size:12px;color:var(--mut)}
.scslots{display:flex;justify-content:center;gap:12px}
.scslots span{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:26px;border:1.5px dashed var(--dim,#5a6598);color:var(--dim,#5a6598)}
.scslots span.on{border:1.5px solid var(--gold);background:rgba(255,207,58,.1);box-shadow:0 0 14px rgba(255,207,58,.35)}
.scgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.scgrid button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border-radius:14px;border:1px solid var(--line);background:rgba(17,26,76,.5);color:var(--fg);font:inherit;cursor:pointer}
.scgrid button span{font-size:26px}.scgrid button b{font-size:12px;font-weight:600;line-height:1.25;text-align:center}
.scgrid button.on{border-color:var(--gold);background:rgba(255,207,58,.12)}
.scgrid button i{position:absolute;top:5px;right:7px;font-style:normal;font-size:11px;font-weight:800;color:#1a0c00;background:var(--gold);width:18px;height:18px;border-radius:50%;display:grid;place-items:center}

/* ข้อ 8 · แบบประเมินมือ */
.hqlink{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(47,230,255,.45);background:rgba(47,230,255,.07);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.hqlink>span:first-child{font-size:24px}
.hqlink b{display:block;font-size:15px}.hqlink small{font-size:12px;color:var(--mut)}
.hqlink.done{border-color:rgba(93,255,160,.45);background:rgba(93,255,160,.07)}
.hq{display:flex;flex-direction:column;gap:14px}
.hq.center{align-items:center;text-align:center}
.hq-top{display:flex;flex-direction:column;gap:6px}
.hq-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.hq-bar i{display:block;height:100%;background:linear-gradient(90deg,#2FE6FF,#ffcf3a);transition:width .3s}
.hqpic{width:100%;height:auto;display:block;border-radius:14px;background:rgba(6,10,28,.6)}
.hq-q{font-size:19px;line-height:1.35}
.hq-opts{display:flex;flex-direction:column;gap:8px}
.hq-o{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:14px;border:1px solid var(--line2,rgba(130,160,255,.3));background:rgba(17,26,76,.55);color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:transform .1s,border-color .15s}
.hq-o span{font-size:24px;flex:none;width:30px;text-align:center}.hq-o b{font-size:15px;font-weight:600;line-height:1.35}
.hq-o:active{transform:scale(.98);border-color:var(--cyan)}
.hq-res{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 16px;border-radius:20px;text-align:center;border:2px solid var(--tc);background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--tc) 28%,transparent),rgba(11,15,26,.7) 70%);box-shadow:0 0 28px color-mix(in srgb,var(--tc) 35%,transparent)}
.hq-ic{font-size:56px;line-height:1;filter:drop-shadow(0 0 14px var(--tc))}
.hq-res .h2{color:var(--tc);font-size:24px}
.hq-lv{display:flex;flex-direction:column;align-items:center}
.hq-lv b{font-size:22px;font-weight:800;font-style:italic}.hq-lv span{font-size:13px;color:var(--mut)}
.hq-st{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;width:100%;max-width:300px}
.hq-st span{display:grid;grid-template-columns:34px 1fr 26px;align-items:center;gap:6px;font-size:12px}
.hq-st small{color:var(--mut);text-align:left}.hq-st em{font-style:normal;font-weight:700;text-align:right}
.hq-st i{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.hq-st i b{display:block;height:100%;background:var(--tc)}
.hq-mmr{font-size:14px;color:var(--fg2,#c4cbef)}.hq-mmr b{color:var(--gold);font-size:18px}
/* แอดมินเห็นผลประเมินตัวเอง */
.selfhint{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(47,230,255,.4);background:rgba(47,230,255,.07);font-size:14px}
.selfhint small{display:block;font-size:12px;color:var(--mut)}
.flip.on .fl-f,.flip:not(.on) .fl-b{pointer-events:none}