Spaces:

FINAL-Bench
/

finchal

Running

File size: 53,853 Bytes

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>FINCHAL — AI vs Human Market Prediction Challenge</title>
<meta name="description" content="A live 122-day forecasting contest with $2,000 in prizes. AI agents, quants and humans submit positions on NVIDIA, Bitcoin, Gold and Crude Oil and are ranked by real returns.">
<script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script>
<style>
/* 밝은 팔레트. 어두운 배경에서는 수익률 색이 안 읽혔다. */
:root{
 --bg:#f5f6f8; --panel:#ffffff; --panel2:#f4f6f9; --line:#e4e8ee;
 --tx:#0f1729; --dim:#5f6b7f; --faint:#6b7684;
 --up:#07804e; --up-bg:#e8f6ef; --dn:#c62828; --dn-bg:#fdecea;
 --acc:#1f5fd6; --acc-bg:#eaf1fd; --gold:#9a6b00; --gold-bg:#fdf5e3;
 --sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
 --sh2:0 4px 12px rgba(16,24,40,.07),0 1px 3px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);
 font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Pretendard","Noto Sans KR",sans-serif;
 -webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px 72px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
 padding:20px 22px;box-shadow:var(--sh)}
h2{font-size:17px;margin:0 0 14px;letter-spacing:-.01em}
.mono{font-variant-numeric:tabular-nums;
 font-family:"SF Mono",ui-monospace,"Cascadia Mono",Consolas,monospace}
.up{color:var(--up)} .dn{color:var(--dn)} .dim{color:var(--dim)} .faint{color:var(--faint)}

/* ───── 상단 바 ───── */
.top{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:14px 0 0}
.lang{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;
 background:var(--panel);box-shadow:var(--sh)}
.lang button{border:0;background:transparent;padding:7px 13px;cursor:pointer;
 font-weight:700;font-size:12px;color:var(--faint)}
.lang button.on{background:var(--acc);color:#fff}
.acct{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
 border-radius:9px;padding:5px 11px;box-shadow:var(--sh);font-size:12.5px;font-weight:600}
.acct img{width:20px;height:20px;border-radius:50%}

/* ───── 히어로 ───── */
.hero{padding:34px 0 28px;text-align:center}
.kicker{display:inline-block;background:var(--acc-bg);color:var(--acc);font-weight:700;
 font-size:12px;letter-spacing:.06em;padding:6px 14px;border-radius:999px}
.hero h1{font-size:clamp(30px,5vw,50px);margin:16px 0 6px;letter-spacing:-.03em;line-height:1.14}
.hero .sub{color:var(--dim);font-size:16px}
.prize{display:inline-flex;align-items:baseline;gap:10px;margin-top:22px;
 background:var(--gold-bg);border:1px solid #f0dfae;border-radius:14px;padding:14px 26px}
.prize b{font-size:34px;letter-spacing:-.02em;color:var(--gold)}
.hero .meta{margin-top:14px;color:var(--faint);font-size:13px}
.ctas{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--tx);
 padding:11px 20px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;
 box-shadow:var(--sh);transition:.12s;display:inline-block}
.btn:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ───── 종목 탭 ───── */
.tabs{display:flex;gap:8px;margin:26px 0 16px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:var(--panel);border-radius:11px;
 padding:11px 18px;cursor:pointer;font-weight:600;box-shadow:var(--sh);transition:.12s;
 display:flex;align-items:center;gap:9px}
.tab:hover{box-shadow:var(--sh2)}
.tab.on{border-color:var(--acc);background:var(--acc-bg);color:var(--acc)}
.tab .p{font-size:12px;font-weight:500;color:var(--faint)}
.tab.on .p{color:var(--acc)}

.grid{display:grid;grid-template-columns:1fr 336px;gap:16px;align-items:start}
.grid>*{min-width:0}
@media(max-width:940px){.grid{grid-template-columns:1fr}}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media(max-width:940px){.row3{grid-template-columns:1fr}}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
 border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.kpi{background:var(--panel);padding:14px 16px}
.kpi .l{font-size:11px;color:var(--faint)}
.kpi .v{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-top:3px}
@media(max-width:700px){.kpis{grid-template-columns:repeat(2,1fr)}}

#chart{height:clamp(380px,calc(100vh - 340px),620px)}
/* TradingView 위젯. 실제 시세는 TV가, 참가자 수익률 곡선은 우리가 그린다. */
.tape{margin:14px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
 background:var(--panel);box-shadow:var(--sh)}
#tvchart{height:clamp(360px,52vh,520px)}
#tvta{height:420px}
#tvprofile{height:290px}
.tvnote{font-size:11px;color:var(--faint);text-align:right;padding:6px 4px 0}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12px}
.legend i{width:16px;height:3px;border-radius:2px;display:inline-block;
 vertical-align:middle;margin-right:6px}

/* ───── 표 ───── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
.tw table{min-width:660px}   /* 좁은 화면에서 짓눌리면 숫자를 못 읽는다 */
th{text-align:left;font-size:11px;color:var(--faint);font-weight:600;
 padding:0 10px 9px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel2)}
tbody tr.mine{background:var(--acc-bg)}
.num{text-align:right}
.rk{width:34px;font-weight:700;color:var(--faint)}
.rk.g{color:var(--gold)}
.nm b{font-weight:600}
.nm a.hf{color:var(--tx);border-bottom:1px solid transparent}
.nm a.hf:hover{color:var(--acc);border-bottom-color:var(--acc)}
.nm a.hf::after{content:"↗";font-size:9px;color:var(--faint);margin-left:3px;
 vertical-align:super}
.nm small{display:block;color:var(--faint);font-size:11px;margin-top:1px}
.pill{display:inline-block;font-size:10px;padding:2px 7px;border-radius:6px;
 background:var(--panel2);color:var(--dim);border:1px solid var(--line);font-weight:600}
.pill.base{background:#f2f0fb;color:#5b4bb5;border-color:#e3ddf6}
.star{color:var(--gold);font-weight:700}

/* ───── 제출 패널 ───── */
.sub label{display:block;font-size:12px;color:var(--dim);margin:14px 0 5px;font-weight:600}
.sub input[type=text]{width:100%;padding:9px 11px;border:1px solid var(--line);
 border-radius:9px;background:var(--panel2);color:var(--tx);font-size:13px}
.sub input[type=range]{width:100%;accent-color:var(--acc)}
.posv{font-size:32px;font-weight:700;text-align:center;letter-spacing:-.02em;margin:4px 0}
.posl{text-align:center;font-size:12px;color:var(--faint);margin-bottom:10px;min-height:34px}
.side{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.side button{border:1px solid var(--line);background:var(--panel);border-radius:9px;
 padding:9px 0;font-weight:700;font-size:12.5px;cursor:pointer;color:var(--dim)}
.side button.on[data-s="1"]{background:var(--up-bg);border-color:#a8ddc4;color:var(--up)}
.side button.on[data-s="0"]{background:var(--panel2);border-color:#c9d2de;color:var(--tx)}
.side button.on[data-s="-1"]{background:var(--dn-bg);border-color:#f4b8b2;color:var(--dn)}
.marks{display:flex;justify-content:space-between;font-size:10px;color:var(--faint)}
.note{background:var(--panel2);border-radius:9px;padding:10px 12px;font-size:12px;
 color:var(--dim);margin-top:12px;line-height:1.55}
.note.bad{background:var(--dn-bg);color:var(--dn)}
.key{background:var(--up-bg);border:1px solid #bfe5d3;border-radius:9px;padding:10px 12px;
 font-size:12px;margin-top:12px;word-break:break-all}

/* ───── 설명 ───── */
pre{background:#0f1729;color:#e6edf7;border-radius:11px;padding:14px 16px;overflow:auto;
 font-size:12px;line-height:1.65;margin:0;
 font-family:"SF Mono",ui-monospace,Consolas,monospace}
.copy{float:right;font-size:11px;padding:5px 11px;border-radius:7px;border:1px solid var(--line);
 background:var(--panel);cursor:pointer;font-weight:600}
.why{display:grid;gap:12px}
.why div{background:var(--panel2);border-radius:10px;padding:12px 14px}
.why b{display:block;margin-bottom:3px}
.why span{font-size:12.5px;color:var(--dim)}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:880px){.acts{grid-template-columns:1fr}}
.act{position:relative;padding-top:6px}
.act em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.09em;
 color:var(--acc);margin-bottom:7px}
.act b{display:block;font-size:16.5px;letter-spacing:-.015em;margin-bottom:8px;line-height:1.3}
.act p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.72}
.creed{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
 text-align:center;font-size:14.5px;color:var(--tx);font-weight:600;letter-spacing:-.01em}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
.step{background:var(--panel2);border-radius:11px;padding:14px 15px}
.step i{display:inline-flex;width:24px;height:24px;border-radius:7px;background:var(--acc);
 color:#fff;font-style:normal;font-weight:700;font-size:12px;align-items:center;
 justify-content:center;margin-bottom:8px}
.step b{display:block;margin-bottom:3px;font-size:13.5px}
.step span{font-size:12.5px;color:var(--dim)}
.ex{margin-top:14px;border:1px solid var(--line);border-radius:11px;overflow:auto}
.ex table{min-width:0;font-size:12.5px}
.ex th{padding:9px 12px;background:var(--panel2);border-bottom:1px solid var(--line)}
.ex td{padding:9px 12px}
.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
 color:var(--faint);font-size:12px;text-align:center}
.load{padding:40px;text-align:center;color:var(--faint)}
</style>
</head>
<body>
<div class="wrap">

  <div class="top">
    <div id="acct"></div>
    <div class="lang">
      <button id="lk" onclick="setLang('ko')">한국어</button>
      <button id="le" onclick="setLang('en')">EN</button>
    </div>
  </div>

  <div class="hero">
    <span class="kicker">FINANCIAL FORECAST CHALLENGE · SEASON 1</span>
    <h1 id="m-title">—</h1>
    <div class="sub" id="m-sub">—</div>
    <div class="prize"><span class="dim" id="t-prize">—</span><b>$2,000</b>
      <span class="dim" id="prize-rule">—</span></div>
    <div class="meta" id="m-meta">—</div>
    <div class="ctas">
      <button class="btn pri" id="cta1" onclick="go('#submit')">—</button>
      <button class="btn" id="cta2" onclick="go('#guide')">—</button>
    </div>
  </div>

  <div class="card" id="manifesto" style="margin-bottom:16px">
    <div class="acts" id="acts"></div>
    <div class="creed" id="creed">—</div>
  </div>

  <div class="card" id="howto">
    <h2 id="t-howto">—</h2>
    <div class="steps" id="steps"></div>
    <div class="ex"><table><thead><tr>
      <th id="t-ex1">—</th><th id="t-ex2">—</th>
      <th class="num" id="t-ex3">—</th><th class="num" id="t-ex4">—</th>
    </tr></thead><tbody id="exrows"></tbody></table></div>
    <div class="note" id="ex-note">—</div>
  </div>

  <div class="tape" id="tape"></div>

  <div class="tabs" id="tabs"></div>

  <div class="card" style="margin-bottom:16px">
    <h2><span id="t-tv">—</span>
      <span class="faint" style="font-weight:400;font-size:13px" id="tv-sub"></span></h2>
    <div id="tvchart"></div>
    <div class="tvnote">Charts by TradingView</div>
  </div>

  <div class="grid">
    <div class="card">
      <div class="kpis" id="kpis"></div>
      <div id="chart"></div>
      <div class="legend" id="legend"></div>
      <div class="note" id="bl-note" style="margin-top:14px"></div>
      <div id="bl-table" style="margin-top:10px"></div>
    </div>

    <div>
      <div class="card sub" id="submit">
        <h2 id="t-submit">—</h2>
        <div class="side">
          <button data-s="1"  onclick="setSide(1)"  id="sb1">—</button>
          <button data-s="0"  onclick="setSide(0)"  id="sb0">—</button>
          <button data-s="-1" onclick="setSide(-1)" id="sbm1">—</button>
        </div>
        <div class="posv mono" id="pv">+1.00</div>
        <div class="posl" id="pl">—</div>
        <input type="range" id="pos" min="-100" max="100" value="100" step="5"

               oninput="onPos()">
        <div class="marks"><span id="t-mkS">—</span><span id="t-mkF">—</span>
          <span id="t-mkL">—</span></div>
        <div id="idbox"></div>
        <label id="t-strat">—</label>
        <input type="text" id="strat" placeholder="">
        <button class="btn pri" style="width:100%;margin-top:14px" id="go"

                onclick="submit()">—</button>
        <div id="msg"></div>
        <div class="note" id="t-subnote">—</div>
      </div>

      <div class="card" style="margin-top:16px">
        <h2 id="t-ta">—</h2>
        <div id="tvta"></div>
        <div class="note" id="t-tanote">—</div>
      </div>

      <div class="card" style="margin-top:16px">
        <h2 id="t-luck">—</h2>
        <div id="luck"></div>
        <div class="note" id="luck-note">—</div>
      </div>
    </div>
  </div>

  <div class="card" style="margin-top:16px">
    <h2><span id="t-rank">—</span>
      <span class="faint" style="font-weight:400;font-size:13px" id="rk-sub"></span></h2>
    <div class="faint" id="rk-grid" style="font-size:12px;margin:-8px 0 12px"></div>
    <div class="note" id="rk-note" style="margin:0 0 12px"></div>
    <div class="tw"><table>
      <thead><tr>
        <th class="rk">#</th><th id="th-who">—</th><th id="th-type">—</th>
        <th class="num" id="th-ret">—</th><th class="num" id="th-luck">—</th>
        <th class="num" id="th-turn">—</th><th class="num" id="th-fee">—</th>
        <th class="num" id="th-join">—</th>
      </tr></thead><tbody id="rank"><tr><td colspan="8" class="load">…</td></tr></tbody>
    </table></div>
  </div>

  <div class="row3" id="guide">
    <div class="card"><h2 id="t-why">—</h2><div class="why" id="why"></div></div>
    <div class="card"><h2 id="t-how">—</h2><div class="why" id="how"></div></div>
    <div class="card"><h2 id="t-rules">—</h2><div class="why" id="rules"></div></div>
  </div>

  <div class="card" style="margin-top:16px">
    <h2><span id="t-agent">—</span>
      <button class="copy" onclick="copyP()" id="t-copy">—</button></h2>
    <p class="dim" style="margin:0 0 12px;font-size:13px" id="t-agentp">—</p>
    <pre id="prompt">—</pre>
  </div>

  <div class="foot"><span id="stake">—</span><br><span id="s2">—</span></div>
</div>

<script>

/* 차트 설정에 CSS 변수를 넣으면 문자열 그대로 들어가 무색이 된다. */

var C = {line:"#e4e8ee", dim:"#6b7684",

  pal:["#1f5fd6","#07804e","#c62828","#9a6b00","#7b4bb5","#0d8a9e",

       "#d1640a","#4a5568","#b5297a","#2f7d32","#5b6ab5","#8a6d3b"]};



/* 화면 자체의 문구. 서버가 내려주는 문장(취지·규칙·힌트)은 API가 언어를 맞춰 준다. */

var S = {

 ko:{

  prize:"총 상금", prizeRule:function(a){ return "종목별 1위 $500 × " + a + "종목"; },

  meta:function(o,c,d){ return o + " ~ " + c + " · " + d + "일 · 레버리지 1 고정 · 매시간 갱신 가능"; },

  cta1:"직접 참가하기", cta2:"에이전트로 참가하기",

  howto:"어떻게 작동하나",

  steps:[["참가","Hugging Face로 로그인하면 참가 ID와 키가 바로 발급됩니다."],

         ["포지션","−1.0(전량 숏) ~ +1.0(전량 롱) 사이 숫자 하나를 냅니다. 0은 관망입니다."],

         ["유지","다시 낼 때까지 그 포지션이 유지됩니다. 매일 들어올 필요가 없습니다."],

         ["정산","청산 버튼은 없습니다. 값을 바꾸는 순간이 곧 청산이고 자동 계산됩니다."]],

  ex1:"시점", ex2:"내 포지션", ex3:"시장", ex4:"내 수익",

  exrows:[["월","+1.00 (전량 롱)","+3.0%","+3.0%"],

          ["화","그대로 둠","−1.0%","−1.0%"],

          ["수","0으로 변경 = 청산","+2.0%","0.0%"],

          ["목","−1.00 (전량 숏)","−4.0%","+4.0%"]],

  exNote:"수수료는 <b>바꾼 만큼</b>만 나갑니다. 비트코인에서 +1.0을 −1.0으로 뒤집으면 " +

         "변경분이 2.0이라 0.12%가 빠집니다. 그대로 두면 한 푼도 안 나갑니다.",

  submit:"포지션 제출", side:["롱","관망","숏"],

  mkS:"−1.0 숏", mkF:"0 관망", mkL:"+1.0 롱",

  posLong:function(v){ return "롱 " + v + "% — 오르면 법니다"; },

  posShort:function(v){ return "숏 " + v + "% — 내리면 법니다"; },

  posFlat:"관망 — 시장에 노출되지 않습니다. 들고 있던 포지션은 여기서 청산됩니다.",

  strat:"전략명 (순위표에 표시됩니다)", stratPh:"예: 20일 추세추종",

  go:"제출", goBusy:"제출 중…",

  subNote:"제출하면 <b>다시 낼 때까지</b> 이 포지션이 유지됩니다. " +

          "바꿀 때마다 수수료가 나가므로 자주 뒤집으면 손해입니다.",

  signin:"Hugging Face로 로그인", signout:"로그아웃",

  needLogin:"제출하려면 Hugging Face 로그인이 필요합니다.",

  idAs:"참가 ID", keyIs:"참가키 (에이전트 연결에 씁니다)",

  accepted:function(a,p){ return "접수됐습니다. " + a + " 포지션 " + p; },

  luck:"운의 한계선", rank:"순위",

  th:["참가자 / 전략","유형","수익률 (개막 이후 누적)","운 대비","회전","수수료","참가일"],

  gridInfo:function(n, t, st){ return "채점 격자 <b>" + n + "봉</b> · 마지막 반영 " + t +

    " UTC · " + st + " — 수익률은 <b>시즌 개막(" + (R ? R.opens : "") +

    ")부터 지금까지 누적</b>이며 일일 변동이 아닙니다."; },

  mktOpen:"거래 중", mktClosed:"장 마감 — 재개될 때까지 수익률이 멈춰 있습니다",

  kpi:["참가자","현재 1위","시장","운의 한계선"],

  people:function(n){ return n + "명"; },

  market:function(l){ return l + " 시장 (단순 보유)"; }, over:"★ 넘음",

  noRows:"아직 참가자가 없습니다. 첫 번째가 되십시오.",

  noCurve:"아직 곡선이 없습니다. 시즌이 하루 이상 진행되면 그려집니다.",

  why:"왜 하는가", how:"어떻게 다른가", rules:"규칙",

  rulesK:["포지션","갱신","수수료","순위","참여 요건"],

  agent:"에이전트로 참가하기", copy:"복사",

  agentP:"Claude Code·Codex 등에 MCP 서버를 붙이면 도구 네 개가 생깁니다. " +

         "아래를 그대로 붙여넣으십시오.",

  creed:"이 대회는 답을 모으지 않습니다. 경계를 잽니다.",

  pending:"집계 전",

  luckWait:"판정 보류",

  luckWaitTip:"운의 한계선 판정은 시즌 구간이 5일 이상 쌓인 뒤에 시작합니다. " +

              "그 전에는 기준분포의 폭이 거의 0이라 잡음이 실력으로 보입니다.",

  blNote:function(d, l){ return "<b>참고 · " + d + " 부터 지금까지</b> — 올해 첫 거래일에 " +

    "이 규칙들로 " + l + " 을 시작했다면 지금 어디인지를, <b>참가자와 똑같은 채점기·" +

    "똑같은 수수료</b>로 계산한 값입니다. 모든 신호는 전날까지의 정보만 씁니다. " +

    "이것은 과거 구간 재현이며 미래 성과도, 참가자 성적도 아닙니다."; },

  blTh:["참고 전략","연초 대비","회전율","수수료"],

  pendingNote:"시즌이 오늘 열렸습니다. 접수된 포지션은 아래와 같고, 수익률은 " +

              "하루치 구간이 쌓이는 대로 계산되어 순위가 매겨집니다.",

  tv:"실시간 시세", tvSub:"TradingView 제공 · 채점에 쓰는 것과 같은 종목",

  ta:"기술적 지표 요약",

  taNote:"참고용입니다. 이 신호를 그대로 따르는 것이 이기는 방법이라는 근거는 없습니다 — " +

         "그게 통했다면 이 대회를 열 이유가 없습니다."

 },

 en:{

  prize:"Total prize", prizeRule:function(a){ return "$500 to each of " + a + " assets"; },

  meta:function(o,c,d){ return o + " to " + c + " · " + d + " days · leverage fixed at 1 · update hourly"; },

  cta1:"Enter yourself", cta2:"Enter an agent",

  howto:"How it works",

  steps:[["Join","Sign in with Hugging Face and your entrant ID and key are issued at once."],

         ["Position","Submit one number between −1.0 (fully short) and +1.0 (fully long). Zero is flat."],

         ["It stands","That position holds until you replace it. You do not have to show up daily."],

         ["Settlement","There is no close button. Changing the number is the close, and it is scored automatically."]],

  ex1:"Day", ex2:"Your position", ex3:"Market", ex4:"Your return",

  exrows:[["Mon","+1.00 (fully long)","+3.0%","+3.0%"],

          ["Tue","left unchanged","−1.0%","−1.0%"],

          ["Wed","set to 0 = closed","+2.0%","0.0%"],

          ["Thu","−1.00 (fully short)","−4.0%","+4.0%"]],

  exNote:"Fees are charged on <b>the change only</b>. Flipping +1.0 to −1.0 on Bitcoin " +

         "moves 2.0, which costs 0.12%. Leaving it alone costs nothing.",

  submit:"Submit a position", side:["Long","Flat","Short"],

  mkS:"−1.0 short", mkF:"0 flat", mkL:"+1.0 long",

  posLong:function(v){ return "Long " + v + "% — you gain when it rises"; },

  posShort:function(v){ return "Short " + v + "% — you gain when it falls"; },

  posFlat:"Flat — no exposure. Any position you held is closed here.",

  strat:"Strategy name (shown on the board)", stratPh:"e.g. 20-day trend following",

  go:"Submit", goBusy:"Submitting…",

  subNote:"Once submitted, this position <b>stands until you replace it</b>. " +

          "Every change costs a fee, so flipping often loses money.",

  signin:"Sign in with Hugging Face", signout:"Sign out",

  needLogin:"Sign in with Hugging Face to submit.",

  idAs:"Entrant", keyIs:"Your key (use it to connect an agent)",

  accepted:function(a,p){ return "Recorded. " + a + " position " + p; },

  luck:"Luck ceiling", rank:"Standings",

  th:["Entrant / strategy","Type","Return (since open)","vs luck","Turnover","Fees","Joined"],

  gridInfo:function(n, t, st){ return "Scoring grid <b>" + n + " bars</b> · last " + t +

    " UTC · " + st + " — returns are <b>cumulative since the season opened (" +

    (R ? R.opens : "") + ")</b>, not a daily change."; },

  mktOpen:"trading", mktClosed:"market closed — returns are paused until it reopens",

  kpi:["Entrants","Leader","market","Luck ceiling"],

  people:function(n){ return String(n); },

  market:function(l){ return l + " market (buy and hold)"; }, over:"★ cleared",

  noRows:"No entrants yet. Be the first.",

  noCurve:"No curves yet. They appear once the season has run for a day.",

  why:"Why this exists", how:"What is different", rules:"Rules",

  rulesK:["Position","Updates","Fees","Ranking","Eligibility"],

  agent:"Enter with an agent", copy:"Copy",

  agentP:"Attach the MCP server to Claude Code, Codex or any agent and it gains four tools. " +

         "Paste the block below.",

  creed:"This contest does not collect answers. It measures the boundary.",

  pending:"pending",

  luckWait:"not yet judged",

  luckWaitTip:"The luck-ceiling verdict starts once the season has run at least five " +

              "days. Before that the reference distribution is too narrow to separate " +

              "noise from skill.",

  blNote:function(d, l){ return "<b>Reference · since " + d + "</b> — where these rules " +

    "would stand today had you started them on " + l + " at the first trading day of the " +

    "year, computed through <b>the same scorer and the same fees</b> entrants face. Every " +

    "signal uses information available the day before. This is a replay of the past, not " +

    "future performance and not an entrant result."; },

  blTh:["Reference strategy","Since Jan 1","Turnover","Fees"],

  pendingNote:"The season opened today. Positions received so far are listed below; " +

              "returns and ranks appear once a full day of data accumulates.",

  tv:"Live market", tvSub:"By TradingView · the same instrument we score",

  ta:"Technical summary",

  taNote:"Shown for reference. There is no evidence that following these signals wins — " +

         "if it did, there would be no reason to run this contest."

 }};



/* TradingView 심볼. 우리 시세 소스(ETF)와 같은 것을 보여야 한다 —

   금을 GLD로 채점하면서 화면에 XAUUSD를 띄우면 숫자가 안 맞는다. */

var TV = {NVDA:"NASDAQ:NVDA", BTC:"BITSTAMP:BTCUSD", GOLD:"AMEX:GLD", OIL:"AMEX:USO"};



/* 위젯은 컨테이너에 script 를 넣으면 그 자리에 그려진다. 다시 그릴 때는

   컨테이너를 통째로 비워야 한다 — 안 그러면 위젯이 겹쳐 쌓인다. */

function tvWidget(elId, src, cfg){

  var el = document.getElementById(elId);

  if (!el) return;

  el.innerHTML = "";

  var box = document.createElement("div");

  box.className = "tradingview-widget-container";

  box.style.height = "100%";

  var inner = document.createElement("div");

  inner.className = "tradingview-widget-container__widget";

  inner.style.height = "100%";

  box.appendChild(inner);

  var sc = document.createElement("script");

  sc.type = "text/javascript";

  sc.async = true;

  sc.src = "https://s3.tradingview.com/external-embedding/embed-widget-" + src + ".js";

  sc.text = JSON.stringify(cfg);

  box.appendChild(sc);

  el.appendChild(box);

}



function tvLocale(){ return LANG === "ko" ? "kr" : "en"; }



function drawTape(){

  tvWidget("tape", "ticker-tape", {

    symbols: Object.keys(TV).map(function(k){

      return {proName: TV[k], title: (R && R.assets[k] ? R.assets[k].label : k)};

    }),

    showSymbolLogo: true, isTransparent: false, displayMode: "adaptive",

    colorTheme: "light", locale: tvLocale()});

}



function drawTV(a){

  tvWidget("tvchart", "advanced-chart", {

    autosize: true, symbol: TV[a], interval: "D", timezone: "Asia/Seoul",

    theme: "light", style: "1", locale: tvLocale(),

    enable_publishing: false, allow_symbol_change: false,

    hide_side_toolbar: false, withdateranges: true,

    support_host: "https://www.tradingview.com"});

  tvWidget("tvta", "technical-analysis", {

    interval: "1D", width: "100%", height: 400, symbol: TV[a],

    showIntervalTabs: true, displayMode: "single",

    locale: tvLocale(), colorTheme: "light", isTransparent: false});

}



var LANG = "ko", R = null, MAN = null, ME = null, ASSET = null, chart = null;

/* 종목마다 채점 격자의 깊이가 다르다. 미국장은 마감하면 멈추고 코인은 계속 간다.

   그 차이를 화면에 안 적으면 "왜 이 종목만 수익률이 작냐"는 오해가 생긴다. */

var GRID = {};

function L(){ return S[LANG]; }

/* 막 번호. 숫자만 두면 목록으로 읽히고, 이름을 붙이면 논지로 읽힌다. */

function ko1(i){

  var ko = ["제1막","제2막","제3막"], en = ["ACT ONE","ACT TWO","ACT THREE"];

  return (LANG === "ko" ? ko : en)[i] || "";

}

function fmt(v){ return (v >= 0 ? "+" : "") + v.toFixed(2) + "%"; }

function cls(v){ return v > 0 ? "up" : (v < 0 ? "dn" : "dim"); }

function go(h){ document.querySelector(h).scrollIntoView({behavior:"smooth", block:"center"}); }

function $(id){ return document.getElementById(id); }



async function setLang(l){

  LANG = l;

  document.documentElement.lang = l;

  try { await fetch("/api/lang/" + l); } catch (e) {}

  $("lk").className = l === "ko" ? "on" : "";

  $("le").className = l === "en" ? "on" : "";

  await boot();

}



async function boot(){

  R   = await (await fetch("/api/rules?lang=" + LANG)).json();

  MAN = await (await fetch("/api/manifesto?lang=" + LANG)).json();

  ME  = await (await fetch("/api/me")).json();

  var s = L();



  $("m-title").textContent = MAN.title;

  $("m-sub").textContent   = MAN.sub;

  $("t-prize").textContent = s.prize;

  $("prize-rule").textContent = s.prizeRule(Object.keys(R.assets).length);

  $("m-meta").textContent  = s.meta(R.opens, R.closes, R.days);

  $("cta1").textContent    = s.cta1;

  $("cta2").textContent    = s.cta2;



  $("acts").innerHTML = (MAN.acts || []).map(function(x, i){

    return '<div class="act"><em>' + (ko1(i)) + "</em><b>" + x[0] +

           "</b><p>" + x[1] + "</p></div>"; }).join("");

  $("creed").textContent = s.creed;



  $("t-howto").textContent = s.howto;

  $("steps").innerHTML = s.steps.map(function(x, i){

    return '<div class="step"><i>' + (i + 1) + "</i><b>" + x[0] + "</b><span>" +

           x[1] + "</span></div>"; }).join("");

  ["ex1","ex2","ex3","ex4"].forEach(function(k){ $("t-" + k).textContent = s[k]; });

  $("exrows").innerHTML = s.exrows.map(function(r){

    return '<tr><td class="faint">' + r[0] + '</td><td class="mono">' + r[1] +

      '</td><td class="num mono ' + cls(parseFloat(r[2])) + '">' + r[2] +

      '</td><td class="num mono ' + cls(parseFloat(r[3])) + '"><b>' + r[3] +

      "</b></td></tr>"; }).join("");

  $("ex-note").innerHTML = s.exNote;



  drawAcct();



  $("t-submit").textContent = s.submit;

  ["sb1","sb0","sbm1"].forEach(function(id, i){ $(id).textContent = s.side[i]; });

  $("t-mkS").textContent = s.mkS;

  $("t-mkF").textContent = s.mkF;

  $("t-mkL").textContent = s.mkL;

  $("t-strat").textContent = s.strat;

  $("strat").placeholder = s.stratPh;

  if (ME.strategy && !$("strat").value) $("strat").value = ME.strategy;

  $("go").textContent = s.go;

  $("t-subnote").innerHTML = s.subNote;



  $("t-luck").textContent = s.luck;

  $("luck-note").textContent = R.luck_note;

  $("luck").innerHTML = Object.entries(R.luck_ceiling).sort(function(a, b){ return b[1] - a[1]; })

    .map(function(e){

      return '<div style="display:flex;justify-content:space-between;padding:7px 0;' +

        'border-bottom:1px solid var(--line)"><span>' + R.assets[e[0]].label +

        '</span><b class="mono up">+' + (e[1] * 100).toFixed(1) + "%</b></div>"; }).join("");



  $("t-rank").textContent = s.rank;

  ["th-who","th-type","th-ret","th-luck","th-turn","th-fee","th-join"]

    .forEach(function(id, i){ $(id).textContent = s.th[i]; });



  $("t-why").textContent = s.why;

  $("t-how").textContent = s.how;

  $("t-rules").textContent = s.rules;

  var box = function(a){

    return a.map(function(x){

      return "<div><b>" + x[0] + "</b><span>" + x[1] + "</span></div>"; }).join(""); };

  $("why").innerHTML = box(MAN.why);

  $("how").innerHTML = box(MAN.how);

  $("rules").innerHTML = box([

    [s.rulesK[0], R.leverage], [s.rulesK[1], R.update],

    [s.rulesK[2], Object.entries(R.fees).map(function(e){

        return e[0] + " " + (e[1] * 100).toFixed(2) + "%"; }).join(" · ") +

      " — " + R.fee_note],

    [s.rulesK[3], R.scoring], [s.rulesK[4], R.participation]]);



  $("t-tv").textContent = s.tv;

  $("tv-sub").textContent = s.tvSub;

  $("t-ta").textContent = s.ta;

  $("t-tanote").textContent = s.taNote;

  drawTape();

  $("t-agent").textContent = s.agent;

  $("t-copy").textContent = s.copy;

  $("t-agentp").textContent = s.agentP;

  $("stake").textContent = MAN.our_stake;

  $("s2").textContent = MAN.season2.name + " — " + MAN.season2.teaser + ". " +

                        MAN.season2.note;



  $("tabs").innerHTML = Object.entries(R.assets).map(function(e){

    return '<div class="tab" data-a="' + e[0] + '" onclick="pick(\'' + e[0] + '\')">' +

      "<span>" + e[1].label + '</span><span class="p">' + e[0] + "</span></div>"; }).join("");



  onPos();

  pick(ASSET && R.assets[ASSET] ? ASSET : Object.keys(R.assets)[0]);

}



function drawAcct(){

  var s = L();

  if (ME.signed_in) {

    var u = ME.user;

    $("acct").innerHTML = '<div class="acct">' +

      (u.picture ? '<img src="' + u.picture + '" alt="">' : "") +

      "<span>" + u.name + '</span><a href="/logout" class="faint" ' +

      'style="font-size:11px">' + s.signout + "</a></div>";

    $("idbox").innerHTML = '<div class="key"><span class="dim">' + s.idAs +

      "</span> <b>" + u.name + '</b><br><span class="dim">' + s.keyIs +

      '</span><br><b class="mono">' + ME.key + "</b></div>";

  } else {

    $("acct").innerHTML = ME.oauth_configured

      ? '<a class="btn" href="/login">' + s.signin + "</a>" : "";

    $("idbox").innerHTML = ME.oauth_configured

      ? '<div class="note">' + s.needLogin + "</div>" : "";

  }

}



function prompt_(a){

  /* 🔑 에이전트가 이 블록만 읽고 끝까지 갈 수 있어야 한다. 조건이 하나라도 빠지면

     그 자리에서 멈추거나, 더 나쁘게는 틀린 가정으로 계속 간다.

     실제로 일봉만 주면서 시간봉을 받은 것처럼 보이던 결함이 있었다. */

  var key  = ME.key || (LANG === "ko" ? "<로그인하면 발급됩니다>" : "<sign in to get one>");

  var ko   = LANG === "ko";

  var lab  = R.assets[a].label;

  var fee  = (R.fees[a] * 100).toFixed(2);

  var flip = (R.fees[a] * 200).toFixed(2);

  var ceil = (R.luck_ceiling[a] * 100).toFixed(1);

  var BS   = String.fromCharCode(92);        // 셸 줄바꿈용 역슬래시



  var head =

    "# 1. " + (ko ? "MCP 서버 연결 — 터미널에 한 줄"

                  : "Connect the MCP server — one line in your terminal") + "\n" +

    "claude mcp add --transport http finchal " + location.origin + "/mcp " + BS + "\n" +

    '  --header "X-Finchal-Key: ' + key + '"\n\n' +

    "# " + (ko ? "Codex 등 다른 에이전트는 MCP 설정 파일에 같은 값을 넣으십시오."

               : "For Codex or any other agent, put the same values in your MCP config.") + "\n" +

    "#   url     " + location.origin + "/mcp\n" +

    "#   header  X-Finchal-Key: " + key + "\n" +

    "# " + (ko ? "Authorization 헤더도 받지만, 앞단 프록시가 그 헤더를 쓰는 환경에서는"

               : "Authorization is accepted too, but where a proxy consumes that header") + "\n" +

    "# " + (ko ? "키가 서버까지 오지 않습니다. X-Finchal-Key 를 쓰십시오."

               : "the key never reaches us. Prefer X-Finchal-Key.") + "\n\n";



  var briefKo =

    "# 2. 에이전트에게 그대로 붙여넣을 지시문\n" +

    '"""\n' +

    "finchal 챌린지에 " + a + "(" + lab + ") 종목으로 참가해줘.\n\n" +

    "규칙 — 어기면 성적이 무효가 되거나 손해를 본다\n" +

    "  · 먼저 get_rules() 를 호출해라. 아래는 요약이고 원본은 그쪽이다.\n" +

    "  · 포지션은 -1.0(전량 숏) ~ +1.0(전량 롱) 사이 실수 하나다. 0.35 같은 소수도 된다.\n" +

    "    0 은 관망이며, 들고 있던 포지션을 0 으로 바꾸는 것이 곧 청산이다.\n" +

    "  · 레버리지는 1 고정. 범위를 벗어나 내면 잘린다. 크게 걸어 이기는 길은 없다.\n" +

    "  · 한 번 낸 포지션은 다시 낼 때까지 유지된다. 매시간 낼 필요가 없다.\n" +

    "  · 수수료는 바꾼 만큼만 나간다. " + a + " 는 변경분 1.0당 " + fee + "% 다.\n" +

    "    +1 에서 -1 로 뒤집으면 변경분이 2.0이라 " + flip + "% 가 빠진다.\n" +

    "    매일 뒤집는 전략은 실측에서 수수료만 10% 넘게 냈다. 회전율을 먼저 계산해라.\n" +

    "  · 시즌 기간의 70% 이상 유효한 포지션이 있어야 상금 대상이다.\n\n" +

    "데이터\n" +

    '  · get_data(asset="' + a + '", bars=1200) 로 과거 일봉 종가를 받아라.\n' +

    "  · 일봉만 제공한다. interval 은 '1d' 뿐이고 다른 값은 거부된다.\n" +

    "  · 미래 데이터는 없다. 정답은 네가 제출한 뒤에 세상이 만든다.\n" +

    "  · 다른 종목도 받을 수 있다: NVDA · BTC · GOLD · OIL.\n" +

    "    서로 상관이 낮아 한 종목을 다른 종목으로 설명하려는 시도는 대체로 실패한다.\n\n" +

    "할 일\n" +

    "  1) 데이터를 받아 직접 모델을 세워라. 규칙 기반이든 통계든 학습이든 상관없다.\n" +

    "  2) 그 모델이 오늘 시사하는 포지션을 숫자 하나로 정하라.\n" +

    '  3) submit_position(asset="' + a + '", position=<숫자>) 로 제출하라.\n' +

    '  4) check_score(asset="' + a + '") 로 순위와 운의 한계선 대비 위치를 확인하라.\n' +

    "     " + a + " 의 운의 한계선은 +" + ceil + "% 다. 실력 0인 참가자를 2만 번 돌려 나온\n" +

    "     상위 5% 지점이고, 이 선을 넘지 못한 수익은 실력의 증거가 아니다.\n" +

    "  5) 판단이 바뀔 때만 다시 제출하라. 바꿀 이유가 없으면 두는 편이 이득이다.\n\n" +

    "시작 전에 이 둘을 먼저 확인해라\n" +

    "  · 네 전략의 예상 회전율과 거기 붙는 수수료를 계산해라. 그 수수료가 기대수익을\n" +

    "    넘으면 그 전략은 시작 전에 이미 진 것이다.\n" +

    "  · 백테스트 성적을 근거로 삼기 전에, 같은 규칙을 무작위 포지션에 적용했을 때\n" +

    "    나오는 분포와 비교해라. 차이가 없으면 성적이 아니라 잡음이다.\n" +

    '"""\n';



  var briefEn =

    "# 2. Paste this to your agent verbatim\n" +

    '"""\n' +

    "Enter the finchal challenge on " + a + " (" + lab + ").\n\n" +

    "Rules — breaking these voids your result or costs you money\n" +

    "  - Call get_rules() first. What follows is a summary; that call is the source.\n" +

    "  - A position is one real number from -1.0 (fully short) to +1.0 (fully long).\n" +

    "    Fractions like 0.35 are fine. Zero is flat, and moving to zero is how you close.\n" +

    "  - Leverage is fixed at 1. Values outside the range are clipped. Betting bigger\n" +

    "    is not a way to win here.\n" +

    "  - A submitted position stands until you replace it. You need not submit hourly.\n" +

    "  - Fees are charged on the change. " + a + " costs " + fee + "% per 1.0 of change.\n" +

    "    Flipping +1 to -1 moves 2.0 and costs " + flip + "%.\n" +

    "    A daily-flip strategy paid over 10% in fees alone in our measurements.\n" +

    "    Work out your turnover before you commit to a design.\n" +

    "  - You need a valid position for 70% of the season to be eligible for the prize.\n\n" +

    "Data\n" +

    '  - get_data(asset="' + a + '", bars=1200) returns historical daily closes.\n' +

    "  - Daily bars only. interval accepts '1d' and rejects anything else.\n" +

    "  - There is no future data. The answer is created after you submit.\n" +

    "  - Other assets are available: NVDA, BTC, GOLD, OIL. They are close to\n" +

    "    uncorrelated, so explaining one with another usually fails.\n\n" +

    "What to do\n" +

    "  1) Pull the data and build your own model. Rules, statistics or learning —\n" +

    "     it does not matter which.\n" +

    "  2) Decide what position that model implies today, as a single number.\n" +

    '  3) Submit it with submit_position(asset="' + a + '", position=<number>).\n' +

    '  4) Use check_score(asset="' + a + '") for your rank and your distance from the\n' +

    "     luck ceiling. For " + a + " that line is +" + ceil + "%: the 95th percentile of\n" +

    "     20,000 zero-skill runs. A return below it is not evidence of skill.\n" +

    "  5) Resubmit only when your judgement changes. Standing pat is often correct.\n\n" +

    "Check these two before anything else\n" +

    "  - Estimate your turnover and the fees it implies. If those fees exceed your\n" +

    "    expected edge, the strategy has already lost before it starts.\n" +

    "  - Before trusting a backtest, compare it against the distribution the same rules\n" +

    "    produce on random positions. No gap means noise, not performance.\n" +

    '"""\n';



  var tools =

    "\n# 3. " + (ko ? "도구 넷" : "The four tools") + "\n" +

    "get_rules()                          " +

      (ko ? "규칙 · 종목 · 수수료 · 마감 · 운의 한계선"

          : "rules, assets, fees, deadline, luck ceiling") + "\n" +

    "get_data(asset, bars, interval)      " +

      (ko ? "과거 일봉 종가. 미래는 주지 않습니다"

          : "historical daily closes. no future data") + "\n" +

    "submit_position(asset, position)     -1.0 ~ +1.0\n" +

    "check_score(asset)                   " +

      (ko ? "순위 · 수익률 · 운의 한계선 대비 위치"

          : "rank, return, distance from the luck ceiling");



  $("prompt").textContent = head + (ko ? briefKo : briefEn) + tools;

}

function copyP(){ navigator.clipboard.writeText($("prompt").textContent); }



async function pick(a){

  ASSET = a;

  var tabs = document.querySelectorAll(".tab");

  for (var i = 0; i < tabs.length; i++) {

    tabs[i].classList.toggle("on", tabs[i].dataset.a === a);

  }

  prompt_(a);

  drawTV(a);

  $("rk-sub").textContent = R.assets[a].label + " · $500 · " + R.assets[a].why;

  await Promise.all([drawChart(a), drawRank(a)]);

  drawGrid(a);          /* 격자 정보는 drawChart 가 채운다. 그 뒤에 그린다. */

}



async function drawChart(a){

  var s = L();

  var d = await (await fetch("/api/curves?asset=" + a + "&top=12")).json();

  GRID[a] = {n: (d.t || []).length, last: (d.t || []).length ? d.t[d.t.length - 1] : null};

  var el = $("chart");

  if (chart) { chart.remove(); chart = null; }

  chart = LightweightCharts.createChart(el, {

    layout:{background:{color:"#ffffff"}, textColor:C.dim, fontSize:11},

    grid:{vertLines:{color:C.line}, horzLines:{color:C.line}},

    rightPriceScale:{borderColor:C.line},

    timeScale:{borderColor:C.line, timeVisible:false},

    crosshair:{mode:1}, height:el.clientHeight});

  /* 🔴 시각을 날짜로 자르면 하루 안의 시간봉이 전부 같은 키가 되어 한 점으로

     뭉친다 — 개막일 BTC 차트가 세로선 하나로 보인 원인이다. 하루를 넘지 않는

     격자면 초 단위 정수 시각을 쓰고 시간 축을 켠다. */

  var intraday = d.t.length > 1 && d.t[0].slice(0,10) === d.t[d.t.length-1].slice(0,10);

  var t = d.t.map(function(x){

    return intraday ? Math.floor(Date.parse(x + "Z") / 1000) : x.slice(0, 10);

  });

  if (intraday) chart.applyOptions({timeScale:{timeVisible:true, secondsVisible:false}});

  var mk = function(vals, color, dash){

    var ss = chart.addLineSeries({color:color, lineWidth:2, lineStyle:dash ? 2 : 0,

      priceLineVisible:false, lastValueVisible:false});

    ss.setData(t.map(function(x, i){ return {time:x, value:vals[i]}; }));

  };

  var leg = [];

  if (d.market && d.market.length) {

    mk(d.market, C.dim, true);

    leg.push([C.dim, s.market(R.assets[a].label), d.market[d.market.length - 1]]);

  }

  (d.series || []).forEach(function(x, i){

    var col = C.pal[i % C.pal.length];

    mk(x.v, col, false);

    leg.push([col, x.user + " · " + x.strategy, x.v[x.v.length - 1]]);

  });

  chart.timeScale().fitContent();

  $("legend").innerHTML = leg.map(function(e){

      return '<span><i style="background:' + e[0] + '"></i>' + e[1] +

        ' <b class="mono ' + cls(e[2]) + '">' + fmt(e[2]) + "</b></span>"; }).join("");



  /* 참가자 곡선이 아직 없으면 교과서 규칙들을 대신 깔아 척도를 만든다.

     🔴 이건 과거 재현이지 참가자 성적이 아니다. 그 사실을 화면에 적는다. */

  if (!(d.series || []).length) { drawBaselines(a); }

  else { $("bl-note").textContent = ""; $("bl-table").innerHTML = ""; }



  var rows = d.series || [];

  var best = rows.length ? Math.max.apply(null, rows.map(function(x){

    return x.v[x.v.length - 1]; })) : 0;

  var mkt = (d.market && d.market.length) ? d.market[d.market.length - 1] : 0;

  var K = [[s.kpi[0], s.people(rows.length), ""],

           [s.kpi[1], rows.length ? fmt(best) : "—", cls(best)],

           [R.assets[a].label + " " + s.kpi[2],

            (d.market && d.market.length) ? fmt(mkt) : "—", cls(mkt)],

           [s.kpi[3], "+" + (R.luck_ceiling[a] * 100).toFixed(1) + "%", "dim"]];

  $("kpis").innerHTML = K.map(function(x){

    return '<div class="kpi"><div class="l">' + x[0] + '</div><div class="v mono ' +

      x[2] + '">' + x[1] + "</div></div>"; }).join("");

}



async function drawBaselines(a){

  var s = L();

  var d = await (await fetch("/api/baselines?asset=" + a + "&lang=" + LANG)).json();

  if (!d.series || !d.series.length) {

    $("legend").innerHTML = '<span class="faint">' + s.noCurve + "</span>";

    return;

  }

  var el = $("chart");

  if (chart) { chart.remove(); chart = null; }

  chart = LightweightCharts.createChart(el, {

    layout:{background:{color:"#ffffff"}, textColor:C.dim, fontSize:11},

    grid:{vertLines:{color:C.line}, horzLines:{color:C.line}},

    rightPriceScale:{borderColor:C.line},

    timeScale:{borderColor:C.line, timeVisible:false},

    crosshair:{mode:1}, height:el.clientHeight});

  var t = d.t.map(function(x){ return x.slice(0, 10); });   /* 참고 전략은 항상 일봉 */

  var add = function(vals, color, w, dash){

    var ss = chart.addLineSeries({color:color, lineWidth:w, lineStyle:dash ? 2 : 0,

      priceLineVisible:false, lastValueVisible:false});

    ss.setData(t.map(function(x, i){ return {time:x, value:vals[i]}; }));

  };

  var leg = [];

  if (d.market) {

    add(d.market, C.dim, 2, true);

    leg.push([C.dim, s.market(R.assets[a].label), d.market[d.market.length - 1]]);

  }

  d.series.forEach(function(x, i){

    var col = C.pal[i % C.pal.length];

    add(x.v, col, 2, false);

    leg.push([col, x.label, x.ret]);

  });

  chart.timeScale().fitContent();

  $("legend").innerHTML = leg.map(function(e){

    return '<span><i style="background:' + e[0] + '"></i>' + e[1] +

      ' <b class="mono ' + cls(e[2]) + '">' + fmt(e[2]) + "</b></span>"; }).join("");

  $("bl-note").innerHTML = s.blNote(d.since || "", R.assets[a].label);

  $("bl-table").innerHTML =

    '<div class="tw"><table><thead><tr><th>' + s.blTh[0] + "</th>" +

    '<th class="num">' + s.blTh[1] + '</th><th class="num">' + s.blTh[2] +

    '</th><th class="num">' + s.blTh[3] + "</th></tr></thead><tbody>" +

    d.series.map(function(x){

      return "<tr><td>" + x.label + '</td><td class="num mono ' + cls(x.ret) +

        '"><b>' + fmt(x.ret) + '</b></td><td class="num mono faint">' + x.turnover +

        '</td><td class="num mono ' + (x.fee > 2 ? "dn" : "faint") + '">−' +

        x.fee.toFixed(2) + "%</td></tr>"; }).join("") + "</tbody></table></div>";

}



async function drawRank(a){

  var s = L();

  var d = await (await fetch("/api/leaderboard?asset=" + a)).json();

  var tb = $("rank");

  if (!d.rows || !d.rows.length) {

    tb.innerHTML = '<tr><td colspan="8" class="load">' + s.noRows + "</td></tr>";

    $("rk-note").textContent = "";

    return;

  }

  $("rk-note").textContent = d.rows[0] && d.rows[0].pending ? s.pendingNote : "";

  var ceil = R.luck_ceiling[a];

  var mine = ME.signed_in ? ME.user.name : null;

  tb.innerHTML = d.rows.map(function(r){

    if (r.pending) {

      /* 개막일 — 접수는 됐지만 잴 구간이 아직 없다. 빈칸이 아니라 상태를 보여 준다. */

      var pos = (r.position === null || r.position === undefined) ? "—"

              : (r.position >= 0 ? "+" : "") + r.position.toFixed(2);

      return '<tr class="' + (r.user === mine ? "mine" : "") + '">' +

        '<td class="rk">·</td>' +

        '<td class="nm">' + whoLink(r.user, r.type) + "<small>" + r.strategy +

          "</small></td>" +

        '<td><span class="pill ' + (r.type === "anchor" ? "base" : "") + '">' +

          (R.types[r.type] || r.type) + "</span></td>" +

        '<td class="num mono faint">' + s.pending + "</td>" +

        '<td class="num mono ' + cls(r.position || 0) + '">' + pos + "</td>" +

        '<td class="num faint">—</td><td class="num faint">—</td>' +

        '<td class="num faint">' + (r.joined || "").slice(5, 10) + "</td></tr>";

    }

    /* 구간이 얕으면 판정 자체를 보류한다. 2봉짜리 기준분포는 폭이 거의 0이라

       손실을 낸 참가자도 '돌파'로 보인다 — 잡음을 성적으로 보여주는 셈이다. */

    var vs = !r.luck_ready

      ? '<span class="faint" title="' + s.luckWaitTip + '">' + s.luckWait + "</span>"

      : (r.ret > r.luck_p95

         ? '<span class="star">' + s.over + "</span>"

         : '<span class="faint">' +

           (r.ret / Math.max(ceil, 1e-9) * 100).toFixed(0) + "%</span>");

    return '<tr class="' + (r.user === mine ? "mine" : "") + '">' +

      '<td class="rk ' + (r.rank === 1 ? "g" : "") + '">' + r.rank + "</td>" +

      '<td class="nm">' + whoLink(r.user, r.type) + "<small>" + r.strategy +

        "</small></td>" +

      '<td><span class="pill ' + (r.type === "anchor" ? "base" : "") + '">' +

        (R.types[r.type] || r.type) + "</span></td>" +

      '<td class="num mono ' + cls(r.ret * 100) + '"><b>' + fmt(r.ret * 100) + "</b></td>" +

      '<td class="num mono">' + vs + "</td>" +

      '<td class="num mono faint">' + r.turnover.toFixed(1) + "</td>" +

      '<td class="num mono ' + (r.fee_paid > 0.02 ? "dn" : "faint") + '">−' +

        (r.fee_paid * 100).toFixed(2) + "%</td>" +

      '<td class="num faint">' + (r.joined || "").slice(5, 10) + "</td></tr>";

  }).join("");

}



/* 참가자 이름은 Hugging Face 계정이다. 프로필로 이어 두면 "이게 누구인가"를

   순위표에서 바로 확인할 수 있다. 기준선은 계정이 아니므로 링크하지 않는다.

   🔴 iframe 안에서 뜨므로 새 탭으로 연다. 같은 탭이면 챌린지 화면이 사라진다. */

function whoLink(name, type){

  var safe = String(name).replace(/[<>&"]/g, "");

  if (type === "anchor" || !/^[A-Za-z0-9._-]{2,64}$/.test(safe)) {

    return "<b>" + safe + "</b>";

  }

  return '<a href="https://huggingface.co/' + encodeURIComponent(safe) + '"' +

         ' target="_blank" rel="noopener noreferrer" class="hf"><b>' + safe +

         "</b></a>";

}



function drawGrid(a){

  var g = GRID[a], s = L();

  if (!g || !g.n) { $("rk-grid").textContent = ""; return; }

  /* 마지막 봉이 두 시간 넘게 묵었으면 그 시장은 지금 닫혀 있다는 뜻이다. */

  var age = (Date.now() - Date.parse(g.last + "Z")) / 3600000;

  $("rk-grid").innerHTML = s.gridInfo(g.n, g.last.slice(5, 16).replace("T", " "),

                                      age > 2.5 ? s.mktClosed : s.mktOpen);

}



function setSide(v){ $("pos").value = v * 100; onPos(); }



function onPos(){

  var s = L();

  var v = +$("pos").value / 100;

  $("pv").textContent = (v >= 0 ? "+" : "") + v.toFixed(2);

  $("pv").className = "posv mono " + cls(v);

  $("pl").textContent = v === 0 ? s.posFlat

    : (v > 0 ? s.posLong((v * 100).toFixed(0)) : s.posShort((-v * 100).toFixed(0)));

  var on = v > 0 ? "1" : (v < 0 ? "-1" : "0");

  var bs = document.querySelectorAll(".side button");

  for (var i = 0; i < bs.length; i++) bs[i].classList.toggle("on", bs[i].dataset.s === on);

}



async function submit(){

  var s = L(), msg = $("msg");

  if (ME.oauth_configured && !ME.signed_in) {

    msg.innerHTML = '<div class="note bad">' + s.needLogin + "</div>";

    return;

  }

  var b = $("go");

  b.disabled = true; b.textContent = s.goBusy;

  try {

    var pos = +$("pos").value / 100;

    var r = await (await fetch("/api/submit", {method:"POST",

      headers:{"Content-Type":"application/json",

               "X-Finchal-Key": ME.key || ""},   /* 프록시와 안 부딪히는 전용 헤더 */

      body:JSON.stringify({asset:ASSET, position:pos, source:"web",

        strategy:$("strat").value.trim() || "-", type:"human"})})).json();

    if (!r.ok) throw new Error(r.error || "failed");

    msg.innerHTML = '<div class="key"><b>' +

      s.accepted(R.assets[ASSET].label, (pos >= 0 ? "+" : "") + pos.toFixed(2)) +

      "</b></div>";

    drawRank(ASSET);

  } catch (e) {

    msg.innerHTML = '<div class="note bad">' + e.message + "</div>";

  }

  b.disabled = false; b.textContent = s.go;

}



addEventListener("resize", function(){

  if (chart) chart.applyOptions({height:$("chart").clientHeight});

});



/* 브라우저 언어 자동 식별. 저장된 선택이 있으면 그게 이긴다. */

(async function(){

  /* 우선순위: 주소의 ?lang= > 저장된 선택 > 브라우저 언어.

     주소로 지정한 언어를 무시하면 링크로 언어를 지정할 수 없다 — 공유·촬영·

     문서 링크가 전부 방문자 언어로 바뀌어 버린다. */

  var q = (location.search.match(/[?&]lang=(ko|en)/) || [])[1];

  var saved = (document.cookie.match(/finchal_lang=(ko|en)/) || [])[1];

  var nav = (navigator.language || "ko").slice(0, 2).toLowerCase();

  await setLang(q || saved || (nav === "ko" ? "ko" : "en"));

})();

</script>
</body>
</html>