/* Concept: a stadium scoreboard. Deep green hero panels with lime numerals, calm paper-green pages,
   leaderboard rows as race lanes, bottom tab bar on phones. */
:root{
  --bg:#eef3e6; --surface:#ffffff; --surface2:#e5ecdb; --ink:#0c2217; --muted:#566a5d; --line:#d3ddc7;
  --hero:#07301b; --hero2:#0f5230; --hero-ink:#f3ffdc; --hero-muted:#a8c8b1;
  --lime:#c9f23a; --lime-ink:#1c2b00;
  --green:#0b6b39; --on-green:#ffffff; --green-soft:#d3ecd9;
  --yellow-soft:#fff0a6; --warn:#b3261e; --warn-soft:#fbe1de;
  --f-display:"Prompt",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;
  --nav-h:68px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#09120d; --surface:#111e16; --surface2:#182a20; --ink:#e8f2e4; --muted:#92a99a; --line:#24372b;
    --green:#5ddb90; --on-green:#052012; --green-soft:#17382a; --yellow-soft:#3f3a12;
    --warn:#ff8a80; --warn-soft:#3a1f1d; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#09120d; --surface:#111e16; --surface2:#182a20; --ink:#e8f2e4; --muted:#92a99a; --line:#24372b;
  --green:#5ddb90; --on-green:#052012; --green-soft:#17382a; --yellow-soft:#3f3a12;
  --warn:#ff8a80; --warn-soft:#3a1f1d; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;
  padding-block:14px calc(var(--nav-h) + 28px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.app{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.2;text-wrap:balance}
h2{font-size:1.1rem;font-weight:600}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.note{font-size:.85rem;color:var(--muted)}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}

/* header */
.top{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.mark{width:40px;height:40px;border-radius:12px;background:var(--hero);color:var(--lime);display:grid;place-items:center;flex:none}
.brand h1{font-size:1.1rem;font-weight:700}
.brand .sub{font-size:.8rem;color:var(--muted)}
.who{display:flex;gap:8px;align-items:center}
.who .nm{font-weight:500;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog{flex:1 1 100%;order:3}
.prog .t{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}
.prog .track{height:5px;border-radius:3px;background:var(--surface2);margin-top:4px;overflow:hidden}
.prog .track i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--lime))}
.av{--h:140;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--f-display);font-weight:700;
  color:#fff;background:hsl(var(--h) 52% 36%)}
.av.sm{width:30px;height:30px;font-size:.85rem}

/* navigation: bottom bar on phones, pills on desktop */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--surface);border-top:1px solid var(--line);
  padding:6px max(6px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-right,0px))}
.nav button{appearance:none;flex:1;min-width:0;background:none;border:0;color:var(--muted);font:inherit;font-size:.7rem;font-weight:500;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;position:relative}
.nav button[aria-selected="true"]{color:var(--green);font-weight:600}
.nav button[aria-selected="true"]::before{content:"";position:absolute;top:-7px;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--green)}
.badge{position:absolute;top:0;right:22%;background:var(--lime);color:var(--lime-ink);border-radius:999px;font-size:.66rem;font-weight:700;padding:0 6px;min-width:1.3em;text-align:center}
@media (min-width:820px){
  body{padding-block:22px 48px}
  .nav{position:static;border:0;background:transparent;padding:0;gap:6px;justify-content:flex-start}
  .nav button{flex:none;flex-direction:row;gap:8px;font-size:.92rem;padding:9px 16px;border-radius:999px}
  .nav button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
  .nav button[aria-selected="true"]::before{display:none}
  .badge{position:static}
  .prog{flex:0 1 260px;order:0}
}

/* hero */
.hero{position:relative;overflow:hidden;border-radius:26px;color:var(--hero-ink);padding:22px;isolation:isolate;
  background:radial-gradient(110% 130% at 90% -10%,#2a8a4e 0%,transparent 55%),radial-gradient(80% 80% at 0% 110%,rgba(201,242,58,.28) 0%,transparent 60%),linear-gradient(160deg,var(--hero2),var(--hero))}
.hero canvas.sh{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,48,27,.78),rgba(7,48,27,.2));pointer-events:none}
.hero .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.eyebrow{font-size:.8rem;letter-spacing:.06em;color:var(--hero-muted);font-weight:500}
.big{font-family:var(--f-display);font-weight:700;font-style:italic;letter-spacing:-.02em;line-height:1}
.hero .big{font-size:clamp(3rem,15vw,5.6rem);margin-top:6px}
.big small{font-size:.3em;font-style:normal;font-weight:500;margin-left:.3em;color:var(--hero-muted)}
.hsub{color:var(--hero-muted);margin-top:8px}
.hrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.hero.login .in{grid-template-columns:minmax(0,1fr)}
.hero.login .big{font-size:clamp(2.2rem,10vw,3.6rem)}
.jarsvg{width:clamp(84px,22vw,132px);height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.liq{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.wave{animation:wave 3.2s linear infinite}
@keyframes wave{to{transform:translateX(-120px)}}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r,18px);padding:18px;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:16px}
.stack{display:flex;flex-direction:column;gap:16px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline;margin-bottom:12px}

/* buttons, chips, forms */
.btn{appearance:none;border:0;border-radius:12px;background:var(--green);color:var(--on-green);font:inherit;font-weight:600;padding:11px 18px;cursor:pointer;
  transition:transform .12s ease,filter .12s ease}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.lime{background:var(--lime);color:var(--lime-ink)}
.btn.sm{padding:7px 12px;font-size:.88rem;border-radius:10px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;font-size:.76rem;font-weight:600;padding:2px 10px;background:var(--surface2);color:var(--ink);white-space:nowrap}
.chip.ok{background:var(--green-soft);color:var(--green)}
.chip.wait{background:var(--lime);color:var(--lime-ink)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.me{background:var(--ink);color:var(--bg)}
.chip.lime{background:var(--lime);color:var(--lime-ink)}
label.f{display:flex;flex-direction:column;gap:5px;font-size:.86rem;color:var(--muted);font-weight:500}
input[type=number],input[type=text],input[type=email],input[type=password],input[type=date],select{font:inherit;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%;min-width:0}
input[type=file]{font:inherit;font-size:.85rem;max-width:100%}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.check input{margin-top:4px;width:18px;height:18px;accent-color:var(--green);flex:none}
.err{color:var(--warn);font-size:.85rem;min-height:1.2em}
.alert{border-radius:12px;padding:10px 14px;font-size:.88rem;background:var(--warn-soft);color:var(--warn);margin-top:10px}
.dial{display:flex;align-items:center;justify-content:center;gap:12px}
.dial input{width:9ch;text-align:center;font-family:var(--f-display);font-weight:700;font-size:2.2rem;padding:8px 6px;border-radius:16px}
.dial button{appearance:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.5rem;cursor:pointer}
.dial button:active{background:var(--surface2)}
.dial .u{font-weight:500;color:var(--muted)}

/* home */
.mystat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:center}
.mystat .big{font-size:3rem;color:var(--green)}
.mystat .big small{color:var(--muted)}
.lbl{font-size:.8rem;color:var(--muted);font-weight:500}
.meter{height:10px;border-radius:99px;background:var(--surface2);overflow:hidden;margin:8px 0 4px}
.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--lime));width:var(--w);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.leaders{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.leader{display:flex;gap:12px;align-items:center;padding:12px;border-radius:16px;background:var(--surface2)}
.leader.first{background:var(--hero);color:var(--hero-ink)}
.leader .pc{font-family:var(--f-display);font-weight:700;font-style:italic;font-size:1.5rem;line-height:1}
.leader .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leader .rk{font-size:.75rem;opacity:.75}

/* board lanes */
.summary{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--muted);font-size:.92rem}
.summary b{color:var(--ink);font-family:var(--f-display);font-weight:600}
.lanes{list-style:none;margin:8px 0 0;padding:0}
.lane{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 8px;border-top:1px solid var(--line)}
.lane:first-child{border-top:0}
.lane.me{background:var(--yellow-soft);border-radius:16px;border-top-color:transparent}
.lane .rk{position:absolute}
.rkb{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:.85rem;background:var(--surface2);color:var(--muted)}
.lane:nth-child(-n+3) .rkb{background:var(--lime);color:var(--lime-ink)}
.lane .nm{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;min-width:0}
.lane .nm b{font-weight:600}
.lane .s{flex-basis:100%;font-size:.8rem;color:var(--muted)}
.lane .pc{font-family:var(--f-display);font-weight:700;font-style:italic;font-size:1.5rem}
.lane .pc small{font-size:.55em;font-style:normal;color:var(--muted);margin-left:2px}
.track{grid-column:1 / -1;position:relative;height:10px;border-radius:99px;background:var(--surface2);margin:2px 0 0}
.track i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;width:var(--w);background:linear-gradient(90deg,var(--green),var(--lime));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.track .run{position:absolute;top:50%;left:clamp(9px,var(--w),calc(100% - 9px));width:18px;height:18px;border-radius:50%;background:var(--lime);border:3px solid var(--green);transform:translate(-50%,-50%);transition:left .8s cubic-bezier(.2,.8,.2,1)}
.track u{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);opacity:.45;text-decoration:none}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.82rem;color:var(--muted);margin-top:12px}
.leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;margin-top:8px}
.leg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}

/* bmi */
.bmi-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bmi-big .v{font-family:var(--f-display);font-weight:700;font-size:2.4rem;line-height:1}
.scale{position:relative;display:flex;height:12px;border-radius:6px;overflow:hidden;margin:14px 0 4px}
.scale span{display:block;height:100%}
.pin{position:absolute;top:-4px;width:4px;height:20px;border-radius:2px;background:var(--ink);transform:translateX(-50%)}
.ticks{position:relative;height:1.1em;font-size:.72rem;color:var(--muted)}
.ticks span{position:absolute;transform:translateX(-50%)}

/* tables, lists */
table{border-collapse:collapse;width:100%;font-size:.92rem}
th{font-size:.78rem;text-align:left;color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.scroll{overflow-x:auto}
td.r,th.r{text-align:right}
.cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cl li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:8px;padding:9px 0;border-top:1px solid var(--line);font-size:.92rem}
.cl li:first-child{border-top:0}
.cl .k{color:var(--muted);font-size:.8rem;padding-top:2px}
.cl.plain li{grid-template-columns:minmax(0,1fr)}
.names{display:flex;flex-wrap:wrap;gap:6px}
.empty{padding:26px 8px;text-align:center;color:var(--muted)}

/* rules as accordions */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px;align-items:start}
details.card>summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;font-family:var(--f-display);font-weight:600;font-size:1.05rem}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
details.card[open]>summary::after{transform:rotate(-135deg)}
details.card>summary .sn{color:var(--green);font-style:italic}
details.card[open]>summary{margin-bottom:8px}

/* calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal .dn{font-size:.75rem;color:var(--muted);text-align:center;padding-bottom:2px}
.cal .d{aspect-ratio:1/1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.85rem;background:var(--surface2);position:relative;min-width:0}
.cal .d.x{background:transparent}
.cal .d.w{background:var(--surface);border:1.5px dashed var(--green)}
.cal .d.ok{background:var(--green);color:var(--on-green);font-weight:600}
.cal .d.wait{background:var(--lime);color:var(--lime-ink);font-weight:600}
.cal .d.end{outline:3px solid var(--ink);outline-offset:-3px;font-weight:700}
.cal .d.today::after{content:"";position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:currentColor}
.cal .d small{font-size:.6rem;line-height:1;margin-top:1px}
.keys{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;color:var(--muted);margin-top:14px}
.keys i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:6px;background:var(--surface2)}
.keys i.ok{background:var(--green)} .keys i.wait{background:var(--lime)} .keys i.w{background:var(--surface);border:1.5px dashed var(--green)}

/* staff */
.pend{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.pend:first-of-type{border-top:0}
.pend .ph{width:96px;height:96px;border-radius:14px;background:var(--surface2);display:block;object-fit:cover}
.pend .info{display:flex;flex-direction:column;gap:6px;min-width:0}
.pend .act{display:flex;gap:8px;flex-wrap:wrap}
.ledger{display:flex;flex-direction:column;margin-top:12px}
.ledger div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--hero-line,var(--line));font-size:.92rem}

/* login */
.login{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto;width:100%}
@media (min-width:820px){.login{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}.login .hero{display:flex;align-items:flex-end;min-height:340px}}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:14px;font-weight:500;z-index:40;max-width:calc(100% - 32px)}
@media (min-width:820px){.toast{bottom:24px}}
@media (prefers-reduced-motion: reduce){.wave{animation:none}.liq,.track i,.track .run,.meter i{transition:none}}

/* personal tracker */
.metrics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.metric{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.metric .mh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.metric .mv{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.metric .mv .v{font-size:1.5rem;font-weight:700}
.spark{width:100%;max-width:300px;height:48px}
.mrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mrow input{flex:1 1 110px;min-width:0;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
button.chip{border:1px dashed var(--line);cursor:pointer;font:inherit;font-size:.82rem;background:transparent}
button.chip:hover{background:var(--surface2)}

/* colour skins: the player picks one (saved on their device). Each sets the hero panel, accent chip and button colours. */
:root[data-skin="orange"]{--hero:#5a1a05;--hero2:#b43a0c;--hero-ink:#fff4e8;--hero-muted:#f3c6a8;--lime:#ffd23f;--lime-ink:#3a2a00;--green:#c2410c;--on-green:#fff;--green-soft:#ffe2d1;--bg:#fbf1ea;--surface2:#f6e3d6;--line:#ecd3c2}
:root[data-skin="blue"]{--hero:#04284d;--hero2:#0a5ab0;--hero-ink:#eaf6ff;--hero-muted:#a9cdf0;--lime:#38e1ff;--lime-ink:#002b36;--green:#0b6fd6;--on-green:#fff;--green-soft:#d6e9ff;--bg:#eaf2fb;--surface2:#dce8f6;--line:#c8d9ee}
:root[data-skin="purple"]{--hero:#2a0b57;--hero2:#5b21b6;--hero-ink:#f6efff;--hero-muted:#cdb6f0;--lime:#ff5ec4;--lime-ink:#3d0030;--green:#7c3aed;--on-green:#fff;--green-soft:#eadcff;--bg:#f3eefc;--surface2:#e8dff7;--line:#d9ccf0}
:root[data-skin="rose"]{--hero:#5c0a2a;--hero2:#be123c;--hero-ink:#fff0f3;--hero-muted:#f3b3c4;--lime:#ffe14d;--lime-ink:#3a2d00;--green:#be123c;--on-green:#fff;--green-soft:#ffd9e2;--bg:#fcebef;--surface2:#f8dbe2;--line:#f0c6d1}
@media (prefers-color-scheme: dark){:root[data-skin]:not([data-theme="light"]){--bg:#0c0c12;--surface2:#1a1a24;--line:#2a2a38;--green-soft:#262236}}
:root[data-skin][data-theme="dark"]{--bg:#0c0c12;--surface2:#1a1a24;--line:#2a2a38;--green-soft:#262236}
.themes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.themes .sw{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);cursor:pointer;padding:0;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%)}
.themes .sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface)}
.themes .md{display:flex;gap:6px;margin-left:auto}

/* soft hover: the button eases up, its corners loosen a little and it glows in the skin's accent colour.
   Radii are in px (not %) so wide buttons keep their shape instead of turning into ovals. */
@media (prefers-reduced-motion: no-preference){
  .btn{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-radius .45s cubic-bezier(.22,1,.36,1),filter .2s}
  .btn:hover:not(:disabled){transform:translateY(-2px) scale(1.015);border-radius:18px 14px 20px 14px;box-shadow:0 8px 22px color-mix(in srgb,var(--lime) 55%,transparent)}
  .btn.sm:hover:not(:disabled){border-radius:14px 10px 15px 10px}
  .btn:active:not(:disabled){transform:scale(.97)}
}