/* ── ชุดสีใหม่: เขียวสนาม → ไลม์ สดใส คอนทราสต์สูง อ่านง่ายกลางแดด ──
     xxx-soft = พื้นอ่อน · xxx-ink = สีตัวอักษรบนพื้นอ่อน · xxx = สีทึบ (ตัวอักษรขาว) */
  html[data-font="xs"] body{zoom:.8}
  html[data-font="sm"] body{zoom:.9}
  html[data-font="lg"] body{zoom:1.12}
  html[data-font="xl"] body{zoom:1.26}
  html[data-font="xxl"] body{zoom:1.4}
  /* มือถือ (จอแคบ ≤ 520px): ฐาน 100% = ย่อ 80% ของเดสก์ท็อป จะได้พอดีจอไม่ล้น — ขั้นอื่นเลื่อนตาม */
  @media (max-width:520px){
    body{zoom:.8}
    html[data-font="xs"] body{zoom:.64}
    html[data-font="sm"] body{zoom:.72}
    html[data-font="lg"] body{zoom:.9}
    html[data-font="xl"] body{zoom:1}
    html[data-font="xxl"] body{zoom:1.12}
  }
  :root{
    --bg:#eff9f3;--card:#ffffff;--ink:#0c1f18;--muted:#5a7568;--line:#dcefe4;
    --accent:#059669;--accent-d:#047857;--accent-soft:#d3f6e5;
    --grad:linear-gradient(135deg,#0d9488 0%,#16a34a 46%,#84cc16 100%);
    --grad-hot:linear-gradient(135deg,#f97316 0%,#fbbf24 100%);
    --glow:rgba(5,150,105,.30);
    --amber:#ea7c0b;--amber-soft:#fff1d6;--amber-ink:#b45309;
    --green:#16a34a;--green-soft:#ccf6dc;--green-ink:#15803d;
    --blue:#0284c7;--blue-soft:#d9eefb;--blue-ink:#0369a1;
    --red:#e11d48;--slate:#334155;
    --shadow:0 1px 2px rgba(6,64,43,.05),0 10px 26px rgba(6,78,59,.09);
    --home:#a16207;--bgc:#4d7c0f;--nc:#0e7490;--sc:#c2410c;--pc:#7c3aed;
  }
  @media (prefers-color-scheme:dark){:root{
    --bg:#0a0e27;--card:#131a42;--ink:#f1f5f9;--muted:#a5adda;--line:#232b56;
    --accent:#eab308;--accent-d:#fcd34d;--accent-soft:#3d2f0a;
    --grad:linear-gradient(135deg,#fcd34d 0%,#eab308 55%,#b45309 100%);
    --glow:rgba(234,179,8,.28);
    --amber-soft:#3d2a08;--amber-ink:#fbbf24;
    --green-soft:#0b3a23;--green-ink:#4ade80;
    --blue-soft:#0a2c42;--blue-ink:#7dd3fc;--slate:#94a3c4;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.55);
  }}
  /* โหมด "มืออาชีพ" — สลับเองได้จากตั้งค่า ไม่ต้องพึ่งธีมมืดของระบบเครื่อง (กันเคสอยากได้ธีมนี้แต่เครื่องตั้งเป็นโหมดสว่างไว้) */
  [data-theme="pro"]{
    --bg:#0a0e27;--card:#131a42;--ink:#f1f5f9;--muted:#a5adda;--line:#232b56;
    --accent:#eab308;--accent-d:#fcd34d;--accent-soft:#3d2f0a;
    --grad:linear-gradient(135deg,#fcd34d 0%,#eab308 55%,#b45309 100%);
    --glow:rgba(234,179,8,.28);
    --amber-soft:#3d2a08;--amber-ink:#fbbf24;
    --green-soft:#0b3a23;--green-ink:#4ade80;
    --blue-soft:#0a2c42;--blue-ink:#7dd3fc;--slate:#94a3c4;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.55);
  }
  [data-theme="hc"]{
    --bg:#ffffff;--card:#ffffff;--ink:#000000;--muted:#2b2b2b;--line:#000000;
    --accent:#006b3f;--accent-d:#004d2d;--accent-soft:#d9f2e3;
    --grad:linear-gradient(135deg,#006b3f 0%,#006b3f 100%);
    --grad-hot:linear-gradient(135deg,#b45309 0%,#b45309 100%);
    --glow:rgba(0,0,0,0);
    --amber:#9a3412;--amber-soft:#ffedd5;--amber-ink:#7c2d12;
    --green:#15803d;--green-soft:#dcfce7;--green-ink:#14532d;
    --blue:#1d4ed8;--blue-soft:#dbeafe;--blue-ink:#1e3a8a;
    --red:#b91c1c;--slate:#111827;
    --shadow:none;
  }
  [data-theme="hc"] .mc,[data-theme="hc"] .wq-row,[data-theme="hc"] .ovs,[data-theme="hc"] .ovtile,[data-theme="hc"] .ckrow,[data-theme="hc"] .sheet,[data-theme="hc"] .iconbtn,[data-theme="hc"] .stat{border-width:2px;border-color:#000}
  [data-theme="hc"] .tabs button.on{outline:3px solid #000;outline-offset:-3px}
  [data-theme="light"]{
    --bg:#eff9f3;--card:#ffffff;--ink:#0c1f18;--muted:#5a7568;--line:#dcefe4;
    --accent:#059669;--accent-d:#047857;--accent-soft:#d3f6e5;
    --grad:linear-gradient(135deg,#0d9488 0%,#16a34a 46%,#84cc16 100%);
    --glow:rgba(5,150,105,.30);
    --amber-soft:#fff1d6;--amber-ink:#b45309;
    --green-soft:#ccf6dc;--green-ink:#15803d;
    --blue-soft:#d9eefb;--blue-ink:#0369a1;--slate:#334155;
    --shadow:0 1px 2px rgba(6,64,43,.05),0 10px 26px rgba(6,78,59,.09);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;padding-bottom:96px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Sarabun",sans-serif}
  .wrap{max-width:560px;margin:0 auto;padding:0 14px}
  .top{position:sticky;top:0;z-index:20;background:var(--bg);padding:13px 0 9px;border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(5,120,80,.07)}
  .top::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--grad)}
  .tbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;row-gap:7px}
  /* ชื่อก๊วนอยู่แถวของตัวเอง เต็มความกว้าง ยาวได้ 2 บรรทัด ไม่ถูกปุ่มเบียดจนต้องตัด */
  .brandrow{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-width:0}
  .brandrow .dot{width:13px;height:13px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px var(--accent-soft);flex:none}
  .brandrow b{flex:1;min-width:0;font-size:22px;font-weight:900;letter-spacing:.2px;line-height:1.2;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-break:break-word}
  .brandrow .role{flex:none}
  .brandrow.long b{font-size:18px}.brandrow.vlong b{font-size:15px;line-height:1.25}
  [data-theme="pro"] .brandrow b{filter:drop-shadow(0 0 14px var(--glow))}
  @media (prefers-color-scheme:dark){ :root:not([data-theme]) .brandrow b{filter:drop-shadow(0 0 14px var(--glow))} }
  .brand .dot{width:13px;height:13px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px var(--accent-soft);flex:none}
  .role{font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px}
  .role.pub{background:var(--blue-soft);color:var(--blue-ink)}
  .role.adm{background:var(--accent-soft);color:var(--accent-d)}
  .iconbtn{border:1.5px solid var(--accent-soft);background:var(--card);color:var(--accent-d);font-weight:800;font-size:13px;padding:7px 12px;border-radius:10px;font-family:inherit;cursor:pointer}
  .clubtime{font-size:13px;font-weight:800;color:var(--muted);margin:-4px 0 8px 23px}
  .callbanner{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--blue);color:#fff;position:sticky;top:0;z-index:39;
    font-weight:800;font-size:13px;box-shadow:0 3px 10px rgba(0,0,0,.15);cursor:pointer;min-width:0}
  .callbanner .cbtag{flex:none;font-size:12px;opacity:.9;background:rgba(255,255,255,.18);padding:2px 7px;border-radius:999px}
  .callbanner .cbcourt{flex:none;font-size:15px;font-weight:900}
  .callbanner .cbnames{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trackbanner{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(135deg,#0d9488,#16a34a 60%,#84cc16);
    color:#fff;position:sticky;top:0;z-index:40;box-shadow:0 3px 10px rgba(0,0,0,.15)}
  .trackbanner.ready{animation:trackReady 1.1s ease-in-out infinite}
  @keyframes trackReady{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
  .tbicon{font-size:12px;font-weight:900;flex:none;line-height:1;background:rgba(255,255,255,.22);padding:7px 9px;border-radius:999px;white-space:nowrap}
  .tbmain{flex:1;min-width:0}
  .tbname{font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tbmsg{font-size:12px;font-weight:700;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tbtoggle{flex:none;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4);color:#fff;
    font-size:14px;width:32px;height:32px;border-radius:50%;font-family:inherit;cursor:pointer;opacity:.55}
  .tbtoggle.on{opacity:1;background:rgba(255,255,255,.32)}
  .tbstop{flex:none;background:none;border:none;color:rgba(255,255,255,.85);font-size:16px;font-weight:900;
    width:26px;height:26px;cursor:pointer;font-family:inherit}
  /* แท็บ: ถ้ากว้างพอแบ่งเท่ากัน ถ้าไม่พอ (แอดมินมี 6 แท็บบนมือถือ) ให้เลื่อนซ้าย-ขวาแทนการบีบจนตัวหนังสือถูกตัด */
  .tabs{display:flex;gap:5px;margin-top:11px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:1 0 auto;min-width:0;border:none;background:var(--card);color:var(--muted);font-weight:800;font-size:13px;padding:10px 12px;border-radius:11px;font-family:inherit;box-shadow:var(--shadow);cursor:pointer;white-space:nowrap}
  .tabs button.on{background:var(--grad);color:#fff;box-shadow:0 5px 14px var(--glow)}
  .section-h{display:flex;align-items:center;gap:8px;margin:18px 2px 10px;font-size:13px}
  .section-h b{font-size:15px;position:relative;padding-left:12px}
  .section-h b::before{content:'';position:absolute;left:0;top:52%;transform:translateY(-50%);width:4px;height:16px;border-radius:2px;background:var(--grad)}
  .section-h .count{color:var(--muted);font-size:13px;font-weight:700}
  .section-h .sp{flex:1}
  .empty{color:var(--muted);text-align:center;padding:22px;font-size:13px;border:1px dashed var(--line);border-radius:14px}
  /* avatar */
  .av{border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;line-height:1;overflow:hidden;position:relative}
  .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .av.tap{cursor:pointer}
  /* สีของ tier เดิม (av-home ฯลฯ) ถูกแทนด้วยระบบ hue ไดนามิกใน JS แล้ว — เหลือไว้เป็นเซฟตี้เน็ตก่อน D โหลดเสร็จ */
  .av-home{background:var(--home)}.av-bg{background:var(--bgc)}.av-n{background:var(--nc)}.av-s{background:var(--sc)}.av-p{background:var(--pc)}
  .tiereditor{display:flex;flex-direction:column;gap:8px}
  .trow{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
  .trow input.tid{width:64px;flex:none;font-weight:800}
  .trow input.tnick{flex:1;min-width:0}
  .trow input.trate{width:56px;flex:none;text-align:center}
  .trow input{padding:8px 9px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font-size:13px;font-family:inherit}
  .trow .tdel{flex:none;background:none;border:none;color:var(--red);font-size:16px;font-weight:900;cursor:pointer;padding:2px 6px}
  .trow .tcolor{flex:none;width:34px;height:34px;padding:2px;border-radius:9px;border:1.5px dashed var(--accent);cursor:pointer;background:none;position:relative}
  .trow .tcolor:hover{border-style:solid}
  .trow{position:relative}
  .trow .tcolor::-webkit-color-swatch-wrapper{padding:2px}
  .trow .tcolor::-webkit-color-swatch{border-radius:6px;border:none}
  .trow .tcolorwrap{position:relative;flex:none;width:34px;height:34px}
  .trow .tcolorwrap::after{content:'🎨';position:absolute;bottom:-5px;right:-5px;font-size:12px;pointer-events:none;
    background:var(--card);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 1.5px var(--card)}
  .tieraddbtn{border:1.5px dashed var(--line);border-radius:12px;padding:10px;text-align:center;font-weight:800;font-size:13px;color:var(--accent-d);background:none;cursor:pointer;font-family:inherit}
  .tiersavebar{display:flex;gap:8px;margin-top:4px}
  .badge{font-size:11.5px;font-weight:800;padding:2px 8px;border-radius:7px;flex:none;white-space:nowrap;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.15)}
  .b-home{background:#fef3c7;color:#a16207}.b-bg{background:#e7fbc4;color:#4d7c0f}.b-n{background:#cbf7fe;color:#0e7490}
  .b-s{background:#ffe8cc;color:#c2410c}.b-p{background:#ece7fe;color:#6d28d9}
  @media(prefers-color-scheme:dark){
    .b-home{background:#3a2e06;color:#fcd34d}.b-bg{background:#26330a;color:#bef264}.b-n{background:#0a3540;color:#67e8f9}
    .b-s{background:#3a1e08;color:#fdba74}.b-p{background:#2a1a52;color:#c4b5fd}}
  /* match card — สไตล์ตามรูปต้นฉบับ (กริดสมมาตร) */
  .mc{position:relative;display:grid;grid-template-columns:56px 1fr auto 1fr;gap:6px;align-items:center;
    background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px 10px;margin-bottom:10px}
  .mc+.mc{margin-top:0}
  [data-theme="pro"] .mc,[data-theme="hc"] .mc{border-color:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px rgba(0,0,0,.45)}
  @media (prefers-color-scheme:dark){html:not([data-theme="light"]) .mc{border-color:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 26px rgba(0,0,0,.45)}}
  .mnum{width:56px;min-height:54px;border-radius:12px;background:#233d31;color:#fff;display:flex;flex-direction:column;
    align-items:center;justify-content:center;font-weight:800;line-height:1;padding:6px 3px;box-shadow:0 4px 11px rgba(20,15,35,.28)}
  .mnum .cl{font-size:11px;font-weight:700;opacity:.65;letter-spacing:.3px;margin-bottom:2px}
  .mnum .cn{font-size:27px;font-weight:900;letter-spacing:-.3px}
  .mnum .mcrt{font-size:11px;font-weight:600;opacity:.7;margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,.22);width:92%;text-align:center;white-space:nowrap;letter-spacing:-.1px}
  .mnum.playing{background:var(--green);box-shadow:0 4px 12px rgba(22,163,74,.42)}
  .mnum.called{background:var(--blue);box-shadow:0 4px 12px rgba(2,132,199,.4)}
  .mnum.done{background:var(--slate);box-shadow:none;opacity:.85}
  .mnum.wait{background:var(--amber)}
  @media (prefers-color-scheme:dark){.mnum.wait{background:#000}}
  .side{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;width:100%}
  .avs{display:flex;justify-content:center}
  .avs .av{border:3px solid var(--card);box-shadow:0 0 0 2px var(--line),0 3px 8px rgba(0,0,0,.22)}
  .avs .av.av-ring{border-width:3px}
  .avs .av+.av{margin-left:-15px}
  .nms{font-size:16px;font-weight:900;color:var(--ink);text-align:center;line-height:1.25;overflow-wrap:anywhere;word-break:break-word;letter-spacing:.1px;-webkit-text-stroke:.35px currentColor;paint-order:stroke fill;
    display:block;max-width:100%;overflow:visible}            /* ชื่อยาวให้ขึ้นบรรทัดใหม่/ลดขนาด ไม่ตัดทิ้ง */
  .nms.long{font-size:13.5px}
  .nms.vlong{font-size:12px;letter-spacing:0;-webkit-text-stroke:.25px currentColor}
  .side.win .nms{color:var(--green-ink)}
  .mid{display:flex;flex-direction:column;align-items:center;gap:5px}
  .vs{font-size:14px;font-weight:800;color:var(--accent-d);letter-spacing:.5px}
  .mtools{position:absolute;top:4px;right:4px;display:flex;align-items:center;gap:2px;z-index:2}
  .medit{border:1px solid var(--line);background:var(--card);color:var(--accent-d);font-size:14px;font-weight:800;min-width:36px;min-height:36px;padding:0;border-radius:999px;cursor:pointer;font-family:inherit;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
  .medit:hover{background:var(--accent-soft)}
  .mmenu{min-width:40px;min-height:36px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);
    font-size:18px;font-weight:900;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:var(--shadow)}
  .mmenu:hover{color:var(--ink)}
  .mmenu-pop{position:fixed;z-index:120;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.22);
    padding:6px;display:flex;flex-direction:column;min-width:170px}
  .mmenu-pop button{text-align:left;border:none;background:transparent;color:var(--ink);font-family:inherit;font-weight:800;font-size:14px;
    padding:0 12px;min-height:44px;border-radius:10px;cursor:pointer}
  .mmenu-pop button:hover{background:var(--accent-soft)}
  .mmenu-pop button.danger{color:var(--red)}
  .mmenu-pop .mmwhy{border-top:1px solid var(--line);margin-top:4px;padding:8px 12px 6px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px;max-width:260px}
  .mmenu-pop .mmwhy b{color:var(--ink);margin-bottom:2px}
  .shrow{display:flex;gap:5px;margin:4px 0}
  .shrow button{min-width:34px;min-height:34px;padding:0;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:900;text-align:center}
  .shrow button.on{background:var(--accent);border-color:var(--accent);color:#fff}
  .shtag{font-size:11px;font-weight:800;color:var(--amber-ink);background:var(--amber-soft);padding:1px 7px;border-radius:999px}
  .gsym{font-size:12px;font-weight:900;margin-left:3px;vertical-align:middle}.gsym.m{color:#2563eb}.gsym.f{color:#db2777}
  .shtag.lock{color:var(--blue-ink);background:var(--blue-soft)}
  .mnote{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:2px}
  .mnote .shtag{white-space:normal;text-align:center;line-height:1.35;padding:3px 10px;font-size:12px}
  .shtag.busy{color:var(--amber-ink);background:var(--amber-soft);border:1px solid var(--amber);white-space:normal;text-align:center;line-height:1.35;padding:3px 9px}
  .shtag.next{color:#fff;background:var(--accent-d);white-space:normal;text-align:center;line-height:1.35;padding:3px 9px;animation:pulse 2s infinite}
  .chgbadge.editing{background:linear-gradient(135deg,#7c3aed,#6366f1)}
  .mc-editing{outline:2px dashed #8b5cf6;outline-offset:-2px}
  .fc-lock{flex:none;border:1px solid var(--line);background:var(--card);color:var(--accent-d);font-weight:800;font-size:11.5px;padding:0 10px;min-height:34px;border-radius:9px;font-family:inherit;cursor:pointer;align-self:center}
  .sitbox{margin-top:8px;background:var(--accent-soft);color:var(--accent-d);border-radius:12px;padding:9px 12px;font-size:12.5px;line-height:1.6;font-weight:600}
  .sitbox small{font-size:10px;background:var(--card);padding:0 5px;border-radius:999px;margin-left:3px}
  .stagecard{border:1.5px solid var(--line);border-radius:14px;padding:10px 12px 2px;margin-bottom:10px;background:var(--card)}
  .stagecard.off .field{opacity:.4;pointer-events:none}
  .stagehead{display:flex;align-items:center;gap:9px;margin-bottom:8px}
  .stagehead b{font-size:14.5px}
  .stageno{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;flex:none}
  .presets.mini{margin:0;flex:none}.presets.mini button{padding:6px 12px;font-size:12px;min-height:34px}
  .mmgrid{display:grid;grid-template-columns:1fr;gap:0 14px}
  @media (min-width:660px){ .mmgrid{grid-template-columns:1fr 1fr} }
  .delx{position:absolute;top:0;right:0;border:none;background:transparent;color:var(--muted);font-size:13px;font-weight:800;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;opacity:.5;cursor:pointer;font-family:inherit}
  .editx{position:absolute;top:4px;right:38px;border:none;background:var(--accent-soft);color:var(--accent-d);font-size:12px;font-weight:800;padding:0 10px;min-height:32px;border-radius:8px;font-family:inherit;cursor:pointer}
  .mtimer{font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
  .mtimer.live{color:var(--blue-ink)}
  .pill{font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:999px;white-space:nowrap}
  .pill.wait{background:var(--line);color:var(--muted)}.pill.called{background:var(--blue-soft);color:var(--blue-ink)}
  .pill.playing{background:var(--green);color:#fff}.pill.done{background:var(--green-soft);color:var(--green-ink);border:1px solid var(--green)}
  .pill.wait{background:var(--amber-soft);color:var(--amber-ink)}
  .scoremini{font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.2px}
  /* ภาพรวมสนาม */
  /* ปุ่มเช็คอินสำหรับผู้เล่น (แทนแดชบอร์ดที่เป็นของแอดมิน) */
  .playercta{display:flex;align-items:center;gap:12px;background:var(--grad);color:#fff;border-radius:16px;padding:14px 15px;
    margin-bottom:12px;cursor:pointer;box-shadow:0 8px 22px var(--glow);transition:transform .1s}
  .playercta:active{transform:scale(.985)}
  .pcta-ic{font-size:28px;line-height:1;flex:none}
  .pcta-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .pcta-txt b{font-size:16px;font-weight:900}
  .pcta-txt span{font-size:12px;font-weight:600;opacity:.92;line-height:1.35}
  .pcta-arr{font-size:26px;font-weight:900;opacity:.85;flex:none;line-height:1}
  [data-theme="pro"] .playercta,[data-theme="pro"] .fab .auto{color:#1a1200}
  @media (prefers-color-scheme:dark){ :root:not([data-theme]) .playercta, :root:not([data-theme]) .fab .auto{color:#1a1200} }
  .checkinsum{display:flex;align-items:center;justify-content:space-between;gap:9px;background:var(--accent-soft);
    border:1px solid var(--accent);border-radius:13px;padding:10px 13px;margin-bottom:9px;font-size:13px;font-weight:700;flex-wrap:wrap}
  .checkinsum b{color:var(--accent-d);font-size:15px}
  .checkinsum button{background:var(--accent);color:#fff;border:none;border-radius:999px;padding:8px 14px;
    font-size:13px;font-weight:800;font-family:inherit;cursor:pointer;white-space:nowrap}
  .checkinsum button:active{transform:scale(.96)}
  .ovsum{display:flex;gap:7px;margin-bottom:10px}
  .ovs{flex:1;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:9px 4px;text-align:center}
  .ovs .v{font-size:20px;font-weight:800;line-height:1}
  .ovs.zero{opacity:.45}
  .ovs .l{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:3px}
  .ovs .s{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;opacity:.85}
  .ovsum{display:grid;grid-template-columns:repeat(4,1fr)}.ovsum.n5,.ovsum.n6{grid-template-columns:repeat(3,1fr)}
  /* ตารางสถานะคอร์ทแบบย่อ — บอกแค่ "ว่าง/ไม่ว่าง" ต่อคอร์ท ไม่ใส่ชื่อผู้เล่นซ้ำกับการ์ดแมตช์ละเอียดด้านล่าง
     ออกแบบให้แน่นพอมองเห็นหลายคอร์ทพร้อมกันในสายตาเดียว เหมาะกับสนามที่มีคอร์ทเยอะ (5+) */
  .ovgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:7px;margin-bottom:4px}
  .ovtile{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:9px 4px 8px;
    text-align:center;cursor:pointer;transition:transform .1s}
  .ovtile:active{transform:scale(.95)}
  .ovtile.play{border-color:var(--green);background:linear-gradient(160deg,var(--green-soft),var(--card) 75%)}
  .ovtile.call{border-color:var(--blue);background:linear-gradient(160deg,var(--blue-soft),var(--card) 75%)}
  .ovt-num{font-size:19px;font-weight:900;color:var(--ink);line-height:1}
  .ovtile.free .ovt-num{color:var(--muted)}
  .ovt-st{font-size:11px;font-weight:800;margin-top:3px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:3px}
  .ovtile.play .ovt-st{color:var(--green-ink)}.ovtile.call .ovt-st{color:var(--blue-ink)}
  .ovt-tmr{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
  .statussel{font-size:11.5px;font-weight:800;padding:5px 21px 5px 11px;border-radius:999px;border:none;font-family:inherit;cursor:pointer;
    -webkit-appearance:none;appearance:none;text-align:center;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center}
  .statussel.wait{background-color:var(--amber-soft);color:var(--amber-ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%235b6472' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
  .statussel.called{background-color:var(--blue-soft);color:var(--blue-ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%230369a1' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}
  .statussel.playing{background-color:var(--green);color:#fff}
  .statussel.done{background-color:var(--green-soft);color:var(--green-ink);border:1px solid var(--green)}
  /* wait queue (list — เห็นเวลารอทุกคน) */
  .wq{display:flex;flex-direction:column;gap:6px}
  .wq-row{display:grid;grid-template-columns:30px 26px minmax(0,1fr) auto auto auto 56px;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:8px 12px;font-variant-numeric:tabular-nums}
  .wq-row.rest{grid-template-columns:30px 26px minmax(0,1fr) auto 56px}
  .ckrow{display:flex;align-items:center;gap:11px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:13px;
    padding:11px 13px;margin-bottom:8px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;text-align:left;color:var(--ink)}
  .ckrow:active{transform:scale(.985)}
  .ckrow.in{opacity:.45}
  .ckrow .cklv{margin-left:auto;font-size:12px;font-weight:800;padding:3px 9px;border-radius:7px;background:var(--green-soft);color:var(--green-ink);flex:none}
  .qup-card{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:9px 12px;margin-bottom:8px}
  .qup-card.next{border-color:var(--accent);background:var(--accent-soft)}
  .qup-card.mine{box-shadow:0 0 0 2px var(--blue)}
  .qup-teams{flex-direction:column;align-items:flex-start;gap:2px}
  .fc-top{font-size:11.5px;color:var(--muted);font-weight:700}
  .fc-why{font-size:11px;color:var(--muted);font-weight:600;opacity:.85}
  .fc-me{color:var(--blue-ink);font-weight:900;text-decoration:underline}
  .qup-teams small{font-size:10px;margin-left:2px}
  .qup-round{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:var(--muted)}
  .qup-card.next .qup-round{background:var(--accent);border-color:var(--accent);color:#fff}
  .qup-teams{flex:1;min-width:0;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .qup-vs{font-size:11.5px;font-weight:900;color:var(--muted);flex:none;margin:0 7px}
  .qup-partial{font-size:12px;color:var(--muted);font-weight:600;flex:none;white-space:nowrap}
  .wq-row.next{border-color:transparent;background:var(--accent-soft);box-shadow:0 3px 12px var(--glow)}
  .wq-rank{text-align:center;font-size:17px;font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums}
  .wq-row.next .wq-rank{color:var(--accent-d)}
  .wq-name{flex:1;min-width:0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wq-next.rsv{background:var(--blue-soft);color:var(--blue-ink)}
  .wq-next{flex:none;font-size:11px;font-weight:800;color:#fff;background:var(--grad);padding:2px 8px;border-radius:999px}
  .lvtag{flex:none;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;white-space:nowrap;letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.15)}
  .lvtag sup{color:#fff;opacity:.95}
  .wq-time{flex:none;font-size:14px;font-weight:800;color:var(--blue-ink);font-variant-numeric:tabular-nums;min-width:54px;text-align:right}
  .wq-row.rest{background:var(--amber-soft);border-color:transparent}
  .wq-row.rest .wq-time{color:var(--amber-ink)}
  .blockwarn{background:var(--amber-soft);color:var(--amber-ink);font-weight:700;font-size:13px;border-radius:13px;padding:11px 12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
  .blockwarn button{border:none;background:var(--grad);color:#fff;font-weight:800;border-radius:9px;padding:8px 13px;font-family:inherit;font-size:13px;cursor:pointer}
  /* ranking */
  .rkchips{display:flex;gap:6px;margin-bottom:12px}
  .rkchip{flex:1;border:none;background:var(--card);color:var(--muted);font-weight:800;font-size:13px;padding:9px 4px;border-radius:11px;font-family:inherit;cursor:pointer;box-shadow:var(--shadow);white-space:nowrap}
  .rkchip.on{background:var(--grad);color:#fff;box-shadow:0 4px 12px var(--glow)}
  .podium{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:9px;align-items:end;margin:4px 0 16px}
  .pod{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0;width:100%}
  .pod .medal{font-size:21px;line-height:1}
  .pod .pav{position:relative}
  .pod .pav .av{box-shadow:0 4px 12px rgba(0,0,0,.18)}
  .pod.g1 .pav .av{border:3px solid #f59e0b}.pod.g2 .pav .av{border:3px solid #94a3b8}.pod.g3 .pav .av{border:3px solid #d2864a}
  .pod .pname{font-size:13px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
  .pod .pval{font-size:13px;font-weight:800;color:var(--accent-d)}
  .pod .psub{font-size:11.5px;color:var(--muted);font-weight:700}
  .pod .stand{width:100%;border-radius:13px 13px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;font-size:21px;font-weight:800;color:#fff;margin-top:3px}
  .pod.g1 .stand{height:62px;background:linear-gradient(180deg,#fbbf24,#ea9c08)}
  .pod.g2 .stand{height:46px;background:linear-gradient(180deg,#cbd5e1,#8c98a8)}
  .pod.g3 .stand{height:38px;background:linear-gradient(180deg,#eaa86a,#cc7d42)}
  .rkrow{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:9px 13px;margin-bottom:6px;cursor:pointer}
  .rkrow.me{border-color:var(--accent);background:var(--accent-soft)}
  .rkno{flex:none;width:26px;text-align:center;font-size:15px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
  .rkmain{flex:1;min-width:0}
  .rknm{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}
  .rksub{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
  .rkbarwrap{height:5px;border-radius:3px;background:var(--line);margin-top:5px;overflow:hidden}
  .rkbar{height:100%;border-radius:3px;background:var(--grad)}
  .rkval{flex:none;text-align:right}
  .rkval .vv{font-size:17px;font-weight:800;color:var(--accent-d);font-variant-numeric:tabular-nums;line-height:1}
  .rkval .vl{font-size:11px;color:var(--muted);font-weight:700}
  /* roster row */
  .rrow{display:grid;grid-template-columns:38px 1fr 70px auto auto;align-items:center;gap:8px;background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:7px 10px;margin-bottom:6px}
  .rrow{grid-template-columns:38px minmax(0,1fr) auto auto}
  .rrow.off{opacity:.6}
  .rrow.off .nm{color:var(--muted)}
  .pchk.big{width:auto;min-width:56px;height:40px;padding:0 12px;font-size:13.5px;font-family:inherit;border-radius:10px}
  .pchk.on{background:var(--green);border-color:var(--green);color:#fff}
  .paybtn{border:none;border-radius:999px;padding:0 10px;min-height:32px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;white-space:nowrap}
  .paybtn.unpaid,.paybtn.part{background:var(--amber-soft);color:var(--amber-ink)}
  .paybtn.paid{background:var(--green-soft);color:var(--green-ink)}
  .paybtn.claimed{background:var(--blue-soft);color:var(--blue-ink)}
  .payrow .cklv.unpaid,.payrow .cklv.part{background:var(--amber-soft);color:var(--amber-ink)}
  .payrow .cklv.claimed{background:var(--blue-soft);color:var(--blue-ink)}
  .payrow.paid{opacity:.55}
  .paystatus.claimed{color:var(--blue-ink)}
  .rtool{position:sticky;top:0;z-index:5;background:var(--bg);padding:4px 0 8px}
  .rtool input{width:100%;margin-bottom:8px}
  .rfilters{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .rfilters button{border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:800;font-size:12px;padding:0 11px;min-height:34px;border-radius:999px;font-family:inherit;cursor:pointer}
  .rfilters button.on{background:var(--accent-soft);color:var(--accent-d);border-color:var(--accent)}
  .rfilters select{padding:6px 10px;font-size:12px;min-height:34px}
  .rquick{margin-top:6px}
  .moneybar{display:flex;gap:10px 14px;align-items:baseline;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:10px;font-size:13px;font-weight:700;color:var(--muted)}
  .moneybar b{color:var(--ink);font-variant-numeric:tabular-nums}
  .moneybar .mb-due.warn b{color:var(--amber-ink)}
  .moneybar .mb-sub{font-size:11.5px;font-weight:600;flex-basis:100%}
  .paybig{font-size:40px;font-weight:900;text-align:center;line-height:1.1;margin:4px 0;font-variant-numeric:tabular-nums}
  .paystatus{text-align:center;font-weight:800;margin-top:8px;color:var(--amber-ink)}
  .paystatus.ok{color:var(--green-ink)}
  .rrow .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rrow .sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lvpick{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:8px;padding:5px;font-size:13px;font-family:inherit}
  .pchk{width:30px;height:30px;border-radius:9px;border:2px solid var(--line);background:var(--card);font-weight:800;cursor:pointer;color:var(--muted)}
  .pchk.on{background:var(--green-soft);border-color:var(--green);color:var(--green-ink)}
  .mini{border:none;background:transparent;color:var(--muted);font-size:14px;font-weight:800;padding:3px;cursor:pointer}
  /* forms */
  .addbar{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
  .addbar input,.addbar select{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:10px;font-size:14px;font-family:inherit}
  .addbar input{flex:1 1 130px}
  .addbar input.marks{flex:0 0 56px;text-align:center;font-weight:800;letter-spacing:.1em}
  .addbar label.chk{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--muted);padding:0 4px;white-space:nowrap}
  .addbar label.chk input{width:18px;height:18px;flex:none;accent-color:var(--accent)}
  .btn-g{border:none;background:var(--grad);color:#fff;font-weight:800;border-radius:10px;padding:10px 15px;font-family:inherit;font-size:14px;cursor:pointer}
  .chips{display:flex;flex-wrap:wrap;gap:7px}
  .cchip{display:flex;align-items:center;gap:5px;background:var(--accent-soft);color:var(--accent-d);font-weight:800;border-radius:9px;padding:6px 10px;font-size:13px}
  .cchip .x{cursor:pointer;opacity:.6}
  .field{margin:11px 0}
  .field label{display:block;font-size:13px;color:var(--muted);font-weight:700;margin-bottom:5px}
  .field input[type=text],.field input[type=password]{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:11px;font-size:15px;font-family:inherit}
  .field input[type=range]{width:100%}
  .presets{display:flex;gap:7px}.presets button{flex:1;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;border-radius:10px;padding:9px;font-family:inherit;font-size:13px;cursor:pointer}
  .presets button.on{background:var(--grad);color:#fff;border-color:transparent}
  /* FAB */
  .fab{position:fixed;left:0;right:0;bottom:0;z-index:30;background:linear-gradient(to top,var(--bg) 60%,transparent);padding:12px 14px}
  .fab .wrap{display:flex;gap:8px;max-width:560px}
  .fab button{flex:1;border:none;border-radius:13px;padding:13px 6px;font-weight:800;font-size:13.5px;font-family:inherit;cursor:pointer;box-shadow:var(--shadow);white-space:nowrap}
  .fab .auto{background:var(--grad);color:#fff;flex:1.15}
  .fab .ahead{background:var(--blue);color:#fff}
  .fab .manual{background:var(--card);color:var(--accent-d);border:1px solid var(--line)}
  .fab .more{flex:0 0 52px;background:var(--card);color:var(--accent-d);border:1px solid var(--line);font-size:22px;line-height:1}
  @media (max-width:659px){ .fab.collapsed .manual,.fab.collapsed .ahead{display:none} }
  @media (min-width:660px){ .fab .more{display:none} }
  /* overlay */
  .ov{position:fixed;inset:0;background:rgba(4,26,18,.55);backdrop-filter:blur(2px);display:none;align-items:flex-end;justify-content:center;z-index:50}
  .ov.show{display:flex}
  .sheet{background:var(--bg);border-radius:20px 20px 0 0;width:100%;max-width:560px;max-height:90vh;max-height:min(90vh,90dvh);overflow:auto;padding:18px 16px 28px;padding-bottom:max(28px,env(safe-area-inset-bottom,28px));animation:up .25s}
  /* แถบปิดติดขอบบนของทุก popup — เลื่อนลงไปแค่ไหนก็ยังเห็น กดปิดได้เสมอ (ใส่ให้อัตโนมัติใน open1) */
  .sheetbar{position:sticky;top:-18px;margin:-18px -16px 12px;padding:9px 12px 8px 16px;background:var(--bg);display:flex;align-items:center;
    justify-content:space-between;z-index:6;border-bottom:1px solid var(--line)}
  .sheetbar .grab{width:38px;height:4px;border-radius:99px;background:var(--line)}
  .sheet-x{border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:900;font-size:13px;padding:7px 14px;border-radius:999px;font-family:inherit;cursor:pointer}
  .sheet-x:active{transform:scale(.96)}
  .sheet-close-bottom{width:100%;margin-top:16px;padding:13px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-weight:900;font-size:15px;font-family:inherit;cursor:pointer}
  .sheet h3{margin:0 0 12px}
  @keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  @keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  /* ---- animation: เน้นรายการที่เพิ่งเปลี่ยน + คู่ที่กำลังแข่ง ---- */
  @keyframes mcNew{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes mcFlash{0%{box-shadow:0 0 0 2px var(--accent),var(--shadow)}55%{box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}100%{box-shadow:var(--shadow)}}
  @keyframes flashBg{0%{background:var(--accent-soft)}100%{background:var(--card)}}
  .mc-new{animation:mcNew .34s cubic-bezier(.2,.7,.3,1) both}
  @keyframes mcJump{0%,100%{box-shadow:var(--shadow)}30%{box-shadow:0 0 0 3px var(--accent),var(--shadow)}}
  .mc-jump{animation:mcJump .9s ease-out}
  .mc-flash{animation:mcFlash .95s ease-out, flashBg .95s ease-out}
  /* ── เอฟเฟกต์แยกสีตามชนิดการเปลี่ยน: เพิ่งเรียก(ส้ม) / เพิ่งเริ่มแข่ง(เขียว) / เพิ่งจบ(ฟ้า) ──
     ให้ดูรู้ปุ๊บว่าเปลี่ยนแบบไหน ไม่ใช่แค่ "มีอะไรเปลี่ยน" เฉย ๆ เหมือนของเดิม */
  @keyframes mcCalled{0%,100%{box-shadow:0 0 0 3px var(--blue),var(--shadow)}50%{box-shadow:0 0 0 0px var(--blue),var(--shadow)}}
  @keyframes mcPlaying{0%,100%{box-shadow:0 0 0 3px var(--green),var(--shadow)}50%{box-shadow:0 0 0 0px var(--green),var(--shadow)}}
  @keyframes mcDone{0%,100%{box-shadow:0 0 0 3px var(--slate),var(--shadow)}50%{box-shadow:0 0 0 0px var(--slate),var(--shadow)}}
  @keyframes flashBgGrey{0%{background:var(--line)}100%{background:var(--card)}}
  @keyframes flashBgAmber{0%{background:var(--amber-soft)}100%{background:var(--card)}}
  @keyframes flashBgGreen{0%{background:var(--green-soft)}100%{background:var(--card)}}
  @keyframes flashBgBlue{0%{background:var(--blue-soft)}100%{background:var(--card)}}
  .mc-called{animation:mcCalled 1s ease-in-out infinite, flashBgBlue 4s ease-out both}
  .mc-playing{animation:mcPlaying 1s ease-in-out infinite, flashBgGreen 4s ease-out both}
  .mc-done{animation:mcDone 1s ease-in-out infinite, flashBgGrey 4s ease-out both}
  @keyframes badgeIn{0%{opacity:0;transform:translateY(6px) scale(.8)}55%{opacity:1;transform:translateY(-3px) scale(1.06)}100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
  .chgbadge{position:absolute;top:-10px;left:12px;z-index:3;font-size:12px;font-weight:900;padding:4px 11px;border-radius:999px;
    color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.28);white-space:nowrap;pointer-events:none;
    animation:badgeIn .32s cubic-bezier(.3,1.4,.6,1) both, badgePulse 1.1s ease-in-out infinite .32s}
  .chgbadge.called{background:linear-gradient(135deg,#0284c7,#0ea5e9)}
  .chgbadge.playing{background:linear-gradient(135deg,#16a34a,#22c55e)}
  .chgbadge.done{background:linear-gradient(135deg,#475569,#64748b)}
  @keyframes scoreBump{0%{transform:scale(1.3);color:var(--accent-d)}100%{transform:scale(1);color:inherit}}
  .score-bump{animation:scoreBump .5s cubic-bezier(.3,1.4,.6,1) both}
  @keyframes livePulse{0%,100%{box-shadow:0 4px 11px rgba(2,132,199,.4)}50%{box-shadow:0 5px 18px rgba(2,132,199,.66)}}
  .mnum.playing{animation:livePulse 2.4s ease-in-out infinite}
  @keyframes livedot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}
  .livedot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle;animation:livedot 1.4s ease-in-out infinite}
  @keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.24)}100%{transform:scale(1)}}
  .ovs .v.bump{animation:bump .5s ease-out}
  .ovc-flash{animation:mcFlash .95s ease-out, flashBg .95s ease-out}
  .ovc-flash-called{animation:mcCalled 1s ease-in-out infinite, flashBgAmber 7s ease-out both}
  .ovc-flash-playing{animation:mcPlaying 1s ease-in-out infinite, flashBgGreen 7s ease-out both}
  .ovc-flash-done{animation:mcDone 1s ease-in-out infinite, flashBgBlue 7s ease-out both}
  @keyframes wqIn{from{opacity:0;transform:translateX(-7px)}to{opacity:1;transform:none}}
  .wq-in{animation:wqIn .3s ease-out both}
  @media (prefers-reduced-motion:reduce){
    .mc-new,.mc-flash,.mnum.playing,.ovs .v.bump,.ovc-flash,.wq-in,.livedot{animation:none!important}}
  /* ซ้าย = ทีม A · ขวา = ทีม B (เหมือนการ์ดแมตช์) · ช่องเรียงบน-ล่างในแต่ละทีม */
  .slotgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:6px;align-items:stretch}
  .team-col{display:flex;flex-direction:column;gap:7px;padding:8px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
  .team-col.team-a{background:var(--blue-soft);border-color:transparent}
  .team-col.team-b{background:var(--amber-soft);border-color:transparent}
  .team-h{font-size:11px;font-weight:900;letter-spacing:.08em;text-align:center;color:var(--muted)}
  .team-a .team-h{color:var(--blue-ink)}.team-b .team-h{color:var(--amber-ink)}
  .team-vs{align-self:center;font-weight:900;color:var(--muted);font-size:13px;padding:0 2px}
  .team-col .slot{min-height:52px}
  .slot{border:2px dashed var(--line);border-radius:12px;padding:11px;text-align:center;font-weight:800;color:var(--muted);min-height:46px;display:flex;align-items:center;justify-content:center;gap:6px;transition:border-color .15s,background .15s,transform .15s}
  .slot.fill{border-style:solid;border-color:var(--accent);color:var(--ink);background:var(--accent-soft);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
  .slot.fill:active{cursor:grabbing}
  .slot.dragover{border-color:var(--green);background:var(--green-soft);transform:scale(1.04);box-shadow:0 0 0 3px var(--glow)}
  .slot.drag-hide{opacity:.25}
  @keyframes slotDrop{0%{transform:scale(1.12)}60%{transform:scale(.97)}100%{transform:scale(1)}}
  .slot.slot-drop{animation:slotDrop .32s cubic-bezier(.3,1.4,.6,1) both}
  .draghint{font-size:12px;color:var(--muted);text-align:center;margin:-2px 0 8px;font-weight:600}
  .chipnm{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
  .chipmeta{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;margin-left:2px;padding-left:7px;border-left:1px solid var(--line)}
  .chipmeta.play{color:var(--accent-d)}
  .chipg{font-size:10.5px;font-weight:900;padding:0 6px;border-radius:999px;background:var(--bg2,#eef3ef);color:var(--muted);margin-left:2px}
  .chipg.low{background:var(--green-soft);color:var(--green-ink)}.chipg.high{background:var(--amber-soft);color:var(--amber-ink)}
  .chip{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:6px 11px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transition:opacity .15s,transform .1s}
  .chip:active{cursor:grabbing}
  .chip.used{opacity:.35;cursor:default;touch-action:auto}
  .chip.drag-hide{opacity:.25}
  .dragghost{position:fixed;z-index:999;pointer-events:none;border:1px solid var(--accent);background:var(--card);
    border-radius:999px;padding:8px 14px;font-size:14px;font-weight:800;display:flex;align-items:center;gap:7px;
    box-shadow:0 10px 28px rgba(0,0,0,.28);transform:scale(1.08) rotate(-2deg);opacity:.96}
  .btn-line{width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;border-radius:12px;padding:12px;font-family:inherit;margin-top:8px;cursor:pointer}
  .btn-primary{width:100%;border:none;background:var(--grad);color:#fff;font-weight:800;border-radius:12px;padding:13px;font-family:inherit;margin-top:8px;cursor:pointer}
  .toast{pointer-events:none;position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;z-index:99;opacity:0;transition:opacity .3s;max-width:90%;text-align:center}
  .toast.show{opacity:1}
  /* ชิปสตรีค "อยู่ต่อ" — สีต่างกันตามเหตุผล: ชนะ(ส้ม-แดง) / แพ้แต่ได้อยู่ต่อ(ม่วง) / เสมอแข่งซ้ำ(ฟ้าเขียว) */
  .stayk{font-size:11px;font-weight:800;color:#fff;background:var(--grad-hot);padding:2px 8px;border-radius:999px;
    white-space:nowrap;box-shadow:0 2px 7px rgba(249,115,22,.4);letter-spacing:.2px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .stayk.cap{background:linear-gradient(135deg,#8b5cf6 0%,#6366f1 100%);box-shadow:0 2px 7px rgba(139,92,246,.4)}
  .stayk.draw{background:linear-gradient(135deg,#0891b2 0%,#0d9488 100%);box-shadow:0 2px 7px rgba(8,145,178,.4)}
  .stayk.last{background:linear-gradient(135deg,#e11d48 0%,#f97316 100%);box-shadow:0 2px 7px rgba(225,29,72,.4)}
  /* กล่องสรุปกติกาแบบภาษาคน */
  .advset{margin:14px 0 6px;border:1.5px dashed var(--line);border-radius:14px;padding:0 12px}
  .advset>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:13px 2px;min-height:44px}
  .advset>summary::-webkit-details-marker{display:none}
  .advset>summary b{font-size:15px}
  .advset>summary span{font-size:13px;color:var(--muted);font-weight:700}
  .advset>summary::after{content:'▾';position:absolute;right:28px;color:var(--muted);font-weight:900}
  .advset{position:relative}
  .advset[open]>summary::after{content:'▴'}
  .advset[open]>summary{border-bottom:1px solid var(--line);margin-bottom:8px}
  .ruleprev{background:var(--accent-soft);color:var(--accent-d);border-radius:14px;padding:12px 13px;font-size:13px;
    font-weight:700;line-height:1.6;border:1px dashed var(--accent);margin-bottom:4px}
  .ruleprev b{display:block;font-size:13px;margin-bottom:3px}
  .presets.p3 button{font-size:13px;padding:9px 3px}
  .rulegrp{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:4px 12px 12px;margin-top:8px;box-shadow:var(--shadow)}
  /* มิเตอร์ความยุติธรรม */
  /* ปุ่มเลิกทำ (อยู่ในตั้งค่า > ระบบ) */
  .undochip{display:none;background:var(--amber-soft);color:var(--amber-ink);border-color:var(--amber)}
  /* กล่อง QR เช็คอิน */
  .qrbox{background:#fff;border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;
    gap:10px;border:1px solid var(--line);box-shadow:var(--shadow)}
  .qrbox svg{width:min(240px,60vw);height:auto;display:block;border-radius:8px}
  .qrurl{font-size:11.5px;color:var(--muted);word-break:break-all;text-align:center;font-family:ui-monospace,monospace;line-height:1.5}
  .qrbig{position:fixed;inset:0;background:#fff;z-index:60;display:none;flex-direction:column;align-items:center;
    justify-content:center;gap:18px;padding:20px}
  .qrbig svg{width:min(78vh,88vw);height:auto}
  .qrbig .t{font-size:22px;font-weight:900;color:#0c1f18}
  .qrbig .u{font-size:13px;color:#5a7568;font-family:ui-monospace,monospace;word-break:break-all;text-align:center}
  .qrbig .x{position:absolute;top:16px;right:16px;background:#eff9f3;border:1px solid #dcefe4;border-radius:999px;
    padding:10px 18px;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer;color:#0c1f18}
  .fairbar{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
    border-radius:13px;padding:9px 12px;margin-bottom:9px;font-size:13px;font-weight:700}
  .fairbar .fdot{width:9px;height:9px;border-radius:50%;flex:none}
  .fairbar.ok .fdot{background:var(--green)}.fairbar.warn .fdot{background:var(--amber)}.fairbar.bad .fdot{background:var(--red)}
  .fairbar.ok{border-color:var(--green)}.fairbar.warn{border-color:var(--amber)}.fairbar.bad{border-color:var(--red)}
  .fairbar .fl{flex:1;min-width:0;color:var(--muted)}
  .fairbar .fl b{color:var(--ink)}
  .fairbar .fv{flex:none;font-weight:800;font-variant-numeric:tabular-nums}
  .fairbar.ok .fv{color:var(--green-ink)}.fairbar.warn .fv{color:var(--amber-ink)}.fairbar.bad .fv{color:var(--red)}
  .fhist{display:flex;gap:2px;align-items:flex-end;height:20px;flex:none}
  .fhist i{width:5px;border-radius:2px 2px 0 0;background:var(--accent);opacity:.55;min-height:2px}
  /* จำนวนเกมในแถวคิว */
  .wq-g{flex:none;font-size:11.5px;font-weight:800;padding:2px 7px;border-radius:7px;background:var(--accent-soft);
    color:var(--accent-d);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:48px;text-align:center}
  .wq-g.low{background:var(--green-soft);color:var(--green-ink)}
  .wq-g.high{background:var(--amber-soft);color:var(--amber-ink)}
  .hintline{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
  .statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .elosug{font-size:11px;font-weight:800;color:var(--accent-d);background:var(--accent-soft);padding:1px 7px;border-radius:999px;margin-left:4px;white-space:nowrap}
  .elobox{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
  .elorow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
  .elorow b{font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
  .elospark{width:100%;height:32px;margin-top:6px;fill:none;stroke:var(--accent);stroke-width:1.5}
  .elospark line{stroke:var(--line);stroke-dasharray:3 3}
  .fairtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 6px}
  .ftile{background:var(--bg2,#f3f7f4);border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:3px}
  .ftile b{font-size:24px;line-height:1;color:var(--accent-d)}.ftile span{font-size:11px;color:var(--muted);font-weight:700;line-height:1.3}
  .ftile.good b{color:var(--green)}.ftile.bad b{color:var(--red)}
  .fflag{display:inline-block;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--amber-soft);color:var(--amber-ink);margin:1px 0;white-space:nowrap}
  .fflag.bad{background:var(--red-soft);color:var(--red)}
  .fissue{font-size:13px;padding:7px 10px;border-left:3px solid var(--amber);background:var(--amber-soft);border-radius:8px;margin:5px 0}
  .fissue.wide{border-color:var(--blue);background:var(--blue-soft)}
  .fissue .fseq{font-weight:900;margin-right:4px}.fissue .fwhy{font-size:11.5px;color:var(--muted);margin-top:2px}
  .rptable td.warn{color:var(--amber-ink);font-weight:800}
  @media (max-width:520px){.fairtiles{grid-template-columns:repeat(2,1fr)}}
  .rpsum{font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:8px;line-height:1.5}
  .rpwrap{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .rptable{border-collapse:collapse;width:100%;min-width:640px;font-size:13px;font-variant-numeric:tabular-nums}
  .rptable th{position:sticky;top:0;background:var(--bg);color:var(--muted);font-size:11.5px;font-weight:800;text-align:right;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
  .rptable td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
  .rptable th:first-child,.rptable td:first-child{text-align:left;position:sticky;left:0;background:var(--card)}
  .rptable td.nm{font-weight:800}
  .rptable td.bad{color:var(--amber-ink);font-weight:800;background:var(--amber-soft)}
  .rptable td.good{color:var(--green-ink);font-weight:800}
  .rptable .good{color:var(--green-ink);font-weight:800}
  .latetag{font-size:10px;font-weight:800;color:var(--blue-ink);background:var(--blue-soft);padding:1px 6px;border-radius:999px;margin-left:4px}
  .wq-g small{font-size:9.5px;color:var(--blue-ink);margin-left:2px}
  .tl{display:flex;flex-direction:column;gap:6px}
  .tl-row{display:flex;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 11px;font-size:13px;line-height:1.45}
  .tl-row.tl-ev{background:var(--bg);color:var(--muted);font-weight:700}
  .tl-row.warn{border-color:var(--amber);background:var(--amber-soft)}
  .tl-t{flex:none;width:44px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--accent-d)}
  .tl-body{min-width:0;flex:1}
  .tl-sub{font-size:12px;color:var(--muted);margin-top:2px}
  .tl-sub i{color:var(--muted);font-style:normal;opacity:.85}
  .tl-sum{margin-top:8px;font-size:12.5px;color:var(--muted);font-weight:700;line-height:1.5;background:var(--accent-soft);color:var(--accent-d);border-radius:11px;padding:9px 11px}
  .memtabs{display:flex;gap:6px;margin:0 0 12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px}
  .memtabs button{flex:1;min-height:40px;border:none;border-radius:9px;background:transparent;color:var(--muted);font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer}
  .memtabs button.on{background:var(--card);color:var(--accent-d);box-shadow:0 1px 4px rgba(0,0,0,.08)}
  .tierchecks{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
  .tchk{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
    border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800;cursor:pointer;user-select:none}
  .tchk input{accent-color:var(--accent);margin:0}
  /* ประวัติในโปรไฟล์ */
  .lvlog{display:flex;flex-direction:column;gap:6px}
  .lvlog-row{display:flex;align-items:center;gap:8px;font-size:13px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:7px 11px}
  .lvlog-d{color:var(--muted);font-weight:700;font-size:12px;min-width:74px}
  .lvlog-arr{color:var(--muted);font-weight:900}
  .lvmini{font-size:11.5px;font-weight:800;color:var(--muted);vertical-align:1px}
  .lvlog-by{margin-left:auto;font-size:12px;color:var(--muted);font-weight:700}
  .cklevel{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 12px 10px;margin-bottom:14px}
  .cklevel-h{font-size:13.5px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .cklevel-row{display:flex;flex-wrap:wrap;gap:7px}
  .cklv-btn{min-height:44px;padding:0 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font-weight:900;font-size:15px;cursor:pointer;font-family:inherit}
  .rg-lbl{align-self:center;font-size:12.5px;font-weight:800;color:var(--muted)}
  .lvtag sup{font-size:9px;margin-left:1px}
  .mnum .cn.small{font-size:16px;letter-spacing:0}
  .cklv-btn.on{background:var(--tc);color:var(--tf);border-color:var(--tc)}
  .mhist{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
  .mh-row{display:grid;grid-template-columns:44px 1fr;gap:3px 10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 11px}
  .mh-res{grid-row:1/3;font-size:12px;font-weight:900;text-align:center;padding:5px 0;border-radius:8px;background:var(--line);color:var(--muted)}
  .mh-row.W .mh-res{background:var(--green-soft);color:var(--green-ink)}
  .mh-row.L .mh-res{background:#fee2e2;color:#b91c1c}
  [data-theme="pro"] .mh-row.L .mh-res{background:#3f1220;color:#fca5a5}
  @media (prefers-color-scheme:dark){ :root:not([data-theme]) .mh-row.L .mh-res{background:#3f1220;color:#fca5a5} }
  .mh-body{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35}
  .mh-body b{font-variant-numeric:tabular-nums}
  .mh-vs{color:var(--muted);font-size:11.5px;font-weight:900;margin:0 3px}
  .mh-meta{font-size:12px;color:var(--muted);font-weight:600}
  /* รายการคืนก่อน ๆ (แท็บอันดับ) */
  .nightrow{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:10px 13px;margin-bottom:7px;cursor:pointer}
  .nightrow b{font-size:14px;font-weight:900;color:var(--ink);flex:1}
  .nightrow span{font-size:12px;color:var(--muted);font-weight:700}
  .nightdetail{background:var(--accent-soft);border-radius:0 0 13px 13px;margin:-9px 0 9px;padding:9px 12px;font-size:13px;line-height:1.7}
  .statgrid.g2{grid-template-columns:1fr 1fr}
  .pairbox{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--accent-soft);padding:8px 10px;border-radius:11px}
  .stat{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:11px;text-align:center}
  .stat .v{font-size:18px;font-weight:800}.stat .l{font-size:12px;color:var(--muted)}

  /* ══════════ ปรับตามขนาดจอ: มือถือ(ค่าเริ่มต้น) / iPad / โน้ตบุ๊ก-เดสก์ท็อป ══════════
     แนวคิด: แถวละแมทช์เหมือนมือถือเสมอ (ไม่จัดหลายคอลัมน์) แต่จอกว้างขึ้น -> ตัวอักษร/ช่องไฟ/การ์ดใหญ่ขึ้นตาม
     อ่านง่ายจากระยะไกลขึ้น (เหมาะเปิดทิ้งไว้บนโต๊ะข้างสนาม) ไม่ใช่อัดเนื้อหาแน่นขึ้น */
  @media (min-width:660px){                          /* iPad แนวตั้ง (~768-834px) ขึ้นไป */
    .wrap{max-width:640px}
    body{font-size:16px}
    .mc{padding:16px 15px;gap:9px;border-radius:20px;grid-template-columns:66px 1fr auto 1fr}
    .mnum{width:66px;min-height:64px}
    .mnum .cn{font-size:23px}
    .wq-row{padding:11px 15px;gap:11px}
    .qup-card{padding:12px 15px}
    .brandrow b{font-size:25px}.brandrow.long b{font-size:20px}.brandrow.vlong b{font-size:17px}
  }
  @media (min-width:1180px){                         /* iPad แนวนอนกว้าง / โน้ตบุ๊ก-เดสก์ท็อป */
    .wrap{max-width:760px}
    body{font-size:17px}
    .mc{padding:20px 19px;gap:11px;border-radius:22px;grid-template-columns:76px 1fr auto 1fr}
    .mnum{width:76px;min-height:72px}
    .mnum .cn{font-size:26px}
    .mnum .cl{font-size:11px}
    .wq-row{padding:13px 17px;gap:13px}
    .qup-card{padding:14px 17px}
    .brandrow b{font-size:28px}.brandrow.long b{font-size:22px}.brandrow.vlong b{font-size:18px}
    .tbar{padding:2px 0}
  }
  .pane{display:contents}                            /* มือถือ/แท็บเล็ตแนวตั้ง: เรียงต่อกันคอลัมน์เดียวเหมือนเดิม */
  @media (min-width:1180px){                         /* iPad แนวนอน / โน้ตบุ๊ก: 2 คอลัมน์ = แมตช์ (ซ้าย, แถวละแมตช์) | คิว+คอร์ท (ขวา) */
    .wrap{max-width:1140px}
    body:not(.tab-match) .wrap{max-width:760px}   /* แท็บอื่น (ตั้งค่า/สมาชิก/อันดับ) คอลัมน์เดียวพออ่านสบาย */
    #view-match{display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"ov q" "m q";column-gap:22px;align-items:start}
    .pane{display:block;min-width:0}
    .pane-ov{grid-area:ov}.pane-m{grid-area:m}.pane-q{grid-area:q;position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto;padding-right:2px}
    .fab .wrap{max-width:1140px}
  }
  @media (min-width:1600px){                         /* โน้ตบุ๊กจอกว้าง/เดสก์ท็อป: 3 คอลัมน์ = ภาพรวมคอร์ท | แมตช์ | คิว */
    .wrap{max-width:1500px}
    body:not(.tab-match) .wrap{max-width:800px}
    #view-match{grid-template-columns:320px minmax(0,1fr) 400px;grid-template-areas:"ov m q"}
    .pane-ov{position:sticky;top:8px}
    .fab .wrap{max-width:1500px}
  }
  @media (min-width:900px) and (pointer:fine){        /* จอกว้าง + มีเมาส์ (โน้ตบุ๊ก/เดสก์ท็อป) -> เพิ่ม hover ให้จับต้องได้ */
    .mc:hover, .wq-row:hover, .ckrow:hover, .qup-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);transition:box-shadow .15s}
    .tabs button:hover{filter:brightness(.97)}
  }

/* ลิงก์กลับหน้ากลางเลือกก๊วน (โชว์เฉพาะเมื่อเปิดหน้ากลางไว้) */
.clubs-link{margin-left:auto;font-size:11px;font-weight:800;color:var(--accent-d);text-decoration:none;background:var(--accent-soft);padding:3px 8px;border-radius:999px;white-space:nowrap}

/* การ์ดสรุปเวลาของคนหนึ่ง (ในไทม์ไลน์): มา→กลับ · แถบสัดส่วน เล่น/รอ/อื่น ๆ */
.tcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:10px;box-shadow:var(--shadow)}
.tc-row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600}
.tc-row b{color:var(--ink)}
.tc-bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--line);margin:9px 0 7px}
.tc-bar i,.tc-leg i{display:block}
.tc-bar i.p,.tc-leg i.p{background:var(--green)}
.tc-bar i.w,.tc-leg i.w{background:var(--amber)}
.tc-bar i.o,.tc-leg i.o{background:var(--line)}
.tc-leg{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);font-weight:600}
.tc-leg span{display:flex;align-items:center;gap:5px}
.tc-leg i{width:10px;height:10px;border-radius:3px}
.tc-leg b{color:var(--ink)}
.rpsum2{margin-top:-4px}

/* กลุ่มปุ่มย่อ/ขยายหน้าจอ A− 100% A+ */
.fontgrp{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.fontgrp .iconbtn{border:none;border-radius:0;padding:7px 9px;font-size:12.5px;font-weight:900;min-width:0}
.fontgrp .iconbtn:disabled{opacity:.35;cursor:default}
.fontgrp .fontlbl{border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);background:transparent;color:var(--muted);font-size:11px;font-weight:800;padding:7px 7px;font-family:inherit;cursor:pointer;min-width:44px}

/* ตัวจัดรูปโปรไฟล์ */
.cropbox{position:relative;margin:10px auto 0;width:fit-content;border-radius:14px;overflow:hidden;background:#111;touch-action:none;user-select:none}
.cropbox canvas{display:block;cursor:grab}
.cropbox canvas:active{cursor:grabbing}
.cropmask{position:absolute;inset:0;pointer-events:none;border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.55);outline:2px solid rgba(255,255,255,.9)}
.cropctl{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:900;color:var(--muted)}
.cropctl input[type=range]{flex:1;accent-color:var(--accent)}

/* ช่องจัดทีม: ชื่อ + ป้ายมือ · แถบสรุปความสูสี */
.slot.fill{flex-wrap:wrap;gap:5px;padding:9px 8px}
.slot .slot-nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .lvtag{font-size:10.5px;padding:1px 7px}
.buildbal{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;margin:6px 0 2px}
.buildbal b{color:var(--ink)}
.buildbal .good{color:var(--green-ink)}.buildbal .bad{color:var(--red)}

/* อวตารที่มีรูป: กรอบสีตามระดับ (ตั้งผ่าน box-shadow inline) · ในกลุ่มอวตารซ้อนกันให้เว้นขอบขาวก่อนกรอบสี */
.avs .av.av-ring{border-color:var(--card)}

/* ชื่อบนการ์ดแมตช์แบบป้ายพื้นสี (สลับด้วยปุ่ม Aa) */
.nmchip{display:inline-block;max-width:100%;margin:1px 2px;padding:1px 8px;border-radius:7px;font-weight:800;cursor:pointer;line-height:1.35;text-shadow:0 1px 0 rgba(0,0,0,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;letter-spacing:0;vertical-align:middle}
.nms.long .nmchip{font-size:12px;padding:1px 6px}
.nms.vlong .nmchip{font-size:11px;padding:1px 5px}
.nms:has(.nmchip){display:block;max-height:none;overflow:visible;-webkit-line-clamp:unset}
.nmstyle-btn{border:1px solid var(--line);background:var(--card);color:var(--muted);font-weight:900;font-size:11.5px;padding:4px 9px;border-radius:999px;cursor:pointer;font-family:inherit;margin-left:6px}
.nmstyle-btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ค้นหาในรายการจ่ายเงิน */
.paysearch{position:sticky;top:30px;z-index:5;background:var(--bg);padding:2px 0 8px}
.paysearch input{width:100%;padding:11px 12px 11px 38px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-family:inherit;font-size:15px;font-weight:600}
.paysearch input:focus{outline:none;border-color:var(--accent)}
.paysearch::before{content:'🔍';position:absolute;left:12px;top:12px;font-size:15px;pointer-events:none}

/* ── หน้าตั้งค่า: 5 หมวด (ใช้บ่อย / จับคู่ / ยุติธรรม / ขั้นสูง / ระบบ) + แถบกระโดด ── */
.setjump{position:sticky;top:0;z-index:8;display:flex;gap:6px;overflow-x:auto;padding:8px 0 10px;margin:0 0 6px;background:var(--bg);scrollbar-width:none}
.setjump::-webkit-scrollbar{display:none}
.setjump button{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;font-size:12.5px;padding:8px 12px;border-radius:999px;font-family:inherit;cursor:pointer;white-space:nowrap}
.setjump button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.setgrp{margin:0 0 12px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.setgrp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 14px;min-height:56px}
.setgrp>summary::-webkit-details-marker{display:none}
.setgrp .sg-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.setgrp>summary>div{flex:1;min-width:0}
.setgrp>summary b{display:block;font-size:15.5px}
.setgrp>summary span{display:block;font-size:12px;color:var(--muted);font-weight:700;line-height:1.35;margin-top:2px}
.setgrp .sg-arrow{font-style:normal;font-weight:900;color:var(--muted);font-size:20px;transition:transform .2s}
.setgrp[open] .sg-arrow{transform:rotate(90deg)}
.setgrp[open]>summary{border-bottom:1px solid var(--line)}
.setgrp .sg-body{padding:4px 14px 16px;background:var(--bg)}
.setgrp .sg-body>.section-h:first-child{margin-top:8px}
.setgrp#sg-adv>summary .sg-ic{background:var(--amber-soft)}
/* ชื่อบนการ์ดแมตช์แบบ "ป้ายพื้นกลาง": ตัวหนังสือสีระดับ บนพื้นอ่อนสีเดียวกันทั้งการ์ด */
.nmpill{display:inline-block;padding:2px 9px;border-radius:9px;background:var(--bg2,var(--bg));border:1px solid var(--line);font-weight:900;cursor:pointer;line-height:1.35;margin:1px 1px;max-width:100%;overflow-wrap:anywhere}
[data-theme="pro"] .nmpill,[data-theme="hc"] .nmpill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .nmpill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}}
.nms:has(.nmpill){display:block;max-height:none;overflow:visible}

.splitbox{border:1.5px dashed var(--line);border-radius:14px;padding:10px 12px 2px;margin-bottom:8px;background:var(--card)}

/* ตัวบอกสถานะสด บนหัวเว็บ */
.livedot{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--muted);margin-left:6px;white-space:nowrap}
.livedot i{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.livedot.on i{background:var(--green);box-shadow:0 0 0 3px var(--green-soft);animation:pulse 2s infinite}
.livedot.slow i{background:var(--amber)}
.livedot.off i{background:var(--red)}
.livedot.off{color:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* รูปของฉัน (หน้าเช็คอิน/ติดตามคิว) */
.ckphoto{display:flex;align-items:center;gap:10px;margin:8px auto 12px;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-align:left}

/* แถวแมตช์ที่จบแล้ว (ยุบ) */
.donehead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 6px;font-size:12.5px;color:var(--muted)}
.donehead span{font-size:11px}
.donehead .iconbtn{font-size:12px;padding:5px 10px}
.donerow{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:6px;font-size:13px;cursor:pointer;opacity:.92}
.donerow:active{transform:scale(.99)}
.dr-num{font-weight:900;color:var(--muted);font-size:11.5px}
.dr-court{font-weight:800;color:var(--muted);font-size:11.5px;white-space:nowrap}
.dr-teams{min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:800}
.dr-teams .nmchip{font-size:12px;padding:0 7px}
.dr-teams .nmtap{font-size:13px}
.dr-plus{color:var(--muted);font-weight:600;margin:0 1px}
.dr-vs{font-size:10.5px;font-weight:900;color:var(--muted);margin:0 2px}
.dr-win{text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:3px;text-decoration-thickness:2px}
.dr-score{font-size:13px;color:var(--ink);white-space:nowrap}
.dr-dur{font-size:11px;color:var(--muted);white-space:nowrap}
@media (max-width:420px){.donerow{grid-template-columns:auto 1fr auto;grid-template-areas:"num teams score" "court teams dur"}.dr-num{grid-area:num}.dr-court{grid-area:court}.dr-teams{grid-area:teams}.dr-score{grid-area:score}.dr-dur{grid-area:dur}}
.donemore{margin:2px 0 8px;font-size:12.5px}

/* การ์ดแมตช์ที่จบแล้ว: แบบย่อ (อวตารเล็ก ขอบจาง) แต่เห็นครบ ไม่ต้องแตะ */
/* การ์ดที่จบแล้ว (ย่อ) — จอกว้าง: ย่อเล็กน้อยพออ่านสบาย · มือถือ: ย่อมากขึ้นให้ไล่ดูเร็ว */
.mc.mc-fin{padding:10px 10px;margin-bottom:8px;opacity:.95;grid-template-columns:56px 1fr auto 1fr;gap:6px}
.mc.mc-fin .mnum{width:56px;min-height:52px;border-radius:11px}
.mc.mc-fin .mnum .cn{font-size:20px}
.mc.mc-fin .avs .av{border-width:2.5px}
.mc.mc-fin .avs .av+.av{margin-left:-12px}
.mc.mc-fin .nms{font-size:15px}
.mc.mc-fin .nmchip{font-size:13.5px;padding:1px 9px}
.mc.mc-fin .vs{font-size:12px}
.mc.mc-fin .scoremini{font-size:17px}
.mc.mc-fin .mtimer{font-size:12px}
@media (max-width:520px){
.mc.mc-fin{padding:8px 8px;grid-template-columns:48px 1fr auto 1fr;gap:4px}
.mc.mc-fin .mnum{width:48px;min-height:46px;border-radius:10px}
.mc.mc-fin .mnum .cl{font-size:9px}.mc.mc-fin .mnum .cn{font-size:17px}.mc.mc-fin .mnum .mcrt{font-size:9.5px}
.mc.mc-fin .avs .av{border-width:2px}
.mc.mc-fin .avs .av+.av{margin-left:-10px}
.mc.mc-fin .nms{font-size:13.5px}
.mc.mc-fin .nmchip{font-size:12px;padding:0 7px}
.mc.mc-fin .vs{font-size:11px}
.mc.mc-fin .scoremini{font-size:15px}
.mc.mc-fin .mtimer{font-size:10.5px}
}