/* /trading/otacon/ — Otacon: S&P 500 live, sized for an older trader: nothing under 22px, high contrast, no clutter. */
:root{--lc:#d8dde6;--bg:#04060a;--fg:#f6f7f9;--up:#3dff86;--dn:#ff5470;--muted:#c9ced8}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:600 24px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
.dad{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,31vw,470px);grid-template-rows:auto minmax(0,1fr);gap:16px 22px;height:100vh;height:100dvh;
  padding:calc(14px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}
/* price header */
.head{grid-column:1;grid-row:1;min-width:0}
.name{margin:0;font-size:30px;font-weight:700;letter-spacing:.04em;color:var(--muted)}.name b{color:#7dffa8;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 10px rgba(125,255,168,.35);margin-right:.35em}
/* site menu button (shared smenu): a little brighter here, and the right column starts below it */
.smenu-btn{opacity:.6}.side{padding-top:30px}
.pxrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 28px}
.px{font-size:clamp(60px,6.6vw,104px);font-weight:800;line-height:1.02;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.chg{font-size:clamp(34px,3.3vw,52px);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.chg.up{color:var(--up)}.chg.dn{color:var(--dn)}
.upd{font-size:clamp(22px,1.8vw,28px);color:var(--muted);margin-top:4px}
.upd.old{color:#ffc35c}
/* chart */
.chart{grid-column:1;grid-row:2;position:relative;min-height:0;border:2px solid rgba(255,255,255,.14);border-radius:16px;background:#070a10;overflow:hidden}
.chart canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.nodata{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;color:var(--muted)}
.nodata[hidden]{display:none}
/* right column */
.side{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;gap:14px;min-height:0;min-width:0}
.light{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0;border:6px solid var(--lc);border-radius:18px;padding:12px 14px 14px;text-align:center;background:color-mix(in srgb,var(--lc) 16%,#05070b);box-shadow:0 0 26px color-mix(in srgb,var(--lc) 35%,transparent)}
.light.dash{border-style:dashed}
.light.scalp{border-width:3px;background:color-mix(in srgb,var(--lc) 8%,#05070b);box-shadow:0 0 12px color-mix(in srgb,var(--lc) 25%,transparent)}
.light.scalp .lword{opacity:.92}
.lword{font-size:120px;font-weight:900;line-height:1.02;color:var(--lc);letter-spacing:.02em;white-space:nowrap;text-shadow:0 0 18px color-mix(in srgb,var(--lc) 45%,transparent)}
.lsub{font-size:clamp(24px,2vw,30px);font-weight:700;color:#eef0f4;margin-top:8px;min-height:1.25em}
.otacon{min-height:0;flex:none}
.sound{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:16px;min-height:76px;padding:10px 18px;border-radius:16px;cursor:pointer;
  font:800 30px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.06em;color:#dfe3ea;background:#11151d;border:3px solid #59606e;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sound[aria-pressed=true]{color:#04140a;background:#7dffa8;border-color:#7dffa8}
.sound[hidden]{display:none}
.sound:focus-visible{outline:4px solid #78cdff;outline-offset:3px}
.sound .ico{width:34px;height:34px;flex:none;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='black'/%3E%3Cpath d='M16 8l6 8M22 8l-6 8' stroke='black' stroke-width='2.4' fill='none'/%3E%3C/svg%3E")}
.sound[aria-pressed=true] .ico{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z' fill='black'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13' stroke='black' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.foot{margin:0;font-size:22px;color:var(--muted);text-align:center}

/* ---- Otacon (trading/chop/codec.js), restyled big. The panel is moved in here and always shown expanded; taps do nothing. ---- */
#otacon .cdx{position:relative!important;inset:auto!important;width:auto!important;max-width:none!important;margin:0!important;animation:none!important;transition:none!important;
  cursor:default;font-size:24px;border:2px solid rgba(125,255,168,.7);border-radius:16px;box-shadow:inset 0 0 0 4px #020805,inset 0 0 0 6px rgba(125,255,168,.25),0 0 18px rgba(125,255,168,.2)}
#otacon .cdx.open{box-shadow:inset 0 0 0 4px #020805,inset 0 0 0 6px rgba(125,255,168,.5),0 0 34px rgba(125,255,168,.55)}
#otacon .cdx:after{background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 4px)}
#otacon .cdx-row{display:grid!important;grid-template-columns:36% 16px minmax(0,1fr)!important;gap:10px!important;align-items:center;padding:16px 16px 8px}
#otacon .cdx-por,#otacon .cdx-mid{height:clamp(120px,24vh,250px);border-width:2px;border-radius:6px}
#otacon .cdx-mid{flex-direction:column;align-items:stretch;justify-content:center;gap:10px;padding:10px 12px}
#otacon .cdx-meter{width:100%;height:clamp(40px,7vh,74px)}
#otacon .cdx-px{flex:0 0 auto;text-align:right}
#otacon .cdx-7{height:clamp(34px,5.6vh,58px)!important;width:auto;max-width:100%}
#otacon .cdx-spx{font-size:24px;margin-top:8px;opacity:1}
@media (max-width:1366px),(orientation:portrait){#otacon .cdx-spx{display:none}} /* the price is already huge above */
#otacon .cdx-lab,#otacon .cdx-mini,#otacon .cdx-mf,#otacon .cdx-mpx,#otacon .cdx-snd,#otacon .cdx-grp{display:none!important}
#otacon .cdx-arw{border-width:12px;transform:none}#otacon .cdx-arw.l{border-right:16px solid var(--g);border-left:0}
#otacon .cdx-sub{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;margin:2px 16px 0;padding:14px 4px 18px;border-top:2px solid rgba(125,255,168,.3);min-height:0}
#otacon .cdx-t{flex:1 1 100%;font-size:clamp(28px,2.35vw,36px);line-height:1.28;color:#eafff0;text-shadow:0 0 3px rgba(125,255,168,.4)}
#otacon .cdx-t em{display:block;margin:8px 0 0;opacity:.85;font-size:max(24px,.78em)}
#otacon .cdx-t em:empty{display:none}
#otacon .cdx-cd{flex:1 1 100%;margin:0!important;font-size:clamp(26px,2.1vw,32px);font-weight:700;opacity:1;color:#7dffa8;display:block}
#otacon .cdx-cd:empty{display:none}
/* 1-minute quick read (orange / blue only): its own big chip under the line, and its countdown on its own line under 'Next update' */
#otacon .cdx-qr{display:table;margin:10px 0 0;padding:3px 12px;border-width:2px;border-radius:8px;font-size:max(24px,.8em);line-height:1.3;white-space:normal}
#otacon .cdx-qr:empty{display:none}
#otacon .cdx-qcd{display:block;margin-top:4px}#otacon .cdx-qsep{display:none}
/* while orange / blue the quick read needs ~2 more lines: the portrait and meter give up that height so the big light keeps its size (two-column layout only) */
#otacon .cdx-qrl{display:none} /* 'Quick read 0:57' sits right under the chip here */
@media (min-width:901px) and (orientation:landscape){#otacon .cdx[data-s=PRE] .cdx-por,#otacon .cdx[data-s=PRE] .cdx-mid{height:clamp(70px,11vh,150px)}#otacon .cdx[data-s=PRE] .cdx-meter{height:clamp(30px,4.5vh,60px)}#otacon .cdx[data-s=PRE] .cdx-7{height:clamp(26px,4vh,46px)!important}
  #otacon .cdx[data-s=PRE] .cdx-row{padding-top:10px}#otacon .cdx[data-s=PRE] .cdx-sub{padding-top:10px;padding-bottom:12px;gap:6px}#otacon .cdx[data-s=PRE] .cdx-qr{font-size:22px;margin-top:6px}}
#otacon .cdx[data-s=PRE] .cdx-spx{display:none} /* price is already huge above; frees room for the quick read */
@media (min-width:901px) and (orientation:landscape) and (max-height:760px){#otacon .cdx[data-s=PRE] .cdx-row{display:none!important}} /* short laptop screens: keep the big BEAR?/BULL? light full size */
/* glitch kept, but gentle: no torn slice, half the jitter, no flicker */
#otacon .cdx-tear{display:none!important}
#otacon .cdx.gl .cdx-por>img{transform:translateX(calc(var(--gj,1px) * .5));filter:drop-shadow(1px 0 rgba(255,40,120,.4)) drop-shadow(-1px 0 rgba(40,255,230,.4))}
#otacon .cdx.gl .cdx-px .cdx-7{transform:none;opacity:1}

/* ---- tablets in landscape / small laptops ---- */
@media (max-height:820px) and (min-width:901px){.px{font-size:clamp(56px,6vw,92px)}.lword{font-size:100px}#otacon .cdx-por,#otacon .cdx-mid{height:clamp(120px,21vh,200px)}.sound{min-height:66px}#otacon .cdx-row{padding-top:12px}#otacon .cdx-sub{padding-bottom:12px}}
/* ---- phones and portrait tablets: one column, scrolls ---- */
@media (max-width:900px),(orientation:portrait){
  .dad{display:flex;flex-direction:column;height:auto;min-height:100dvh;gap:14px}
  .side{display:contents}
  .light{order:1;margin-top:32px}.head{order:2}.chart{order:3;height:min(56vh,620px);min-height:320px;flex:none}.otacon{order:4}.sound{order:5}.foot{order:6;padding-bottom:6px}
  .px{font-size:clamp(60px,17vw,110px)}.chg{font-size:clamp(32px,8.5vw,52px)}
  .lword{font-size:clamp(64px,19vw,120px)}
  #otacon .cdx-por,#otacon .cdx-mid{height:clamp(130px,34vw,240px)}
  #otacon .cdx-t{font-size:clamp(28px,7.4vw,36px)}#otacon .cdx-cd{font-size:clamp(26px,6.6vw,32px)}
}
@media (prefers-reduced-motion:reduce){#otacon .cdx.gl .cdx-por>img{transform:none;filter:none}}
/* cl1 (Oct 29): gut row and 5/10/15 chips removed; the shorter SCALP word still needs a smaller size on desktop */
@media (min-width:901px) and (orientation:landscape){.light{flex-shrink:0}.light.scalp .lword{font-size:76px}#otacon .cdx-por,#otacon .cdx-mid{height:clamp(104px,16vh,180px)}#otacon .cdx-row{padding-top:10px}#otacon .cdx-sub{gap:6px}.side{gap:10px}.sound{min-height:56px}#otacon .cdx[data-s=PRE] .cdx-qr{font-size:18px}} /* never squash the big light on short screens */
/* cl1: short desktop screens (1280x800 class) keep the big light and lamp, trim the rest */
@media (min-width:901px) and (orientation:landscape) and (max-height:820px){#otacon .cdx-por,#otacon .cdx-mid{height:92px}#otacon .cdx-fl .cdx-fli .cdx-lamp{width:68px;height:68px}#otacon .cdx-fl .cdx-fli{font-size:19px;gap:6px 12px}#otacon .cdx-t{font-size:19px}#otacon .cdx-sub{font-size:15px}#otacon .cdx[data-s=PRE] .cdx-qr{font-size:16px}.side{gap:8px}.sound{min-height:50px}}
@media (min-width:901px) and (orientation:landscape) and (max-height:940px){#otacon .cdx-spx{display:none}} /* cl1: the clock box is shorter now; the big price on the left already shows SPX */

/* br1: TREND LOCKED badge, shown once the big light has held 10+ closed 1-min bars. Bronze metal plate (same for big green and big red):
   brushed grain + polished sheen + dark bevel border, dark engraved text with a light emboss, lock icon in a darker bronze */
.lock{display:flex;align-items:center;justify-content:center;gap:14px;margin:12px auto 0;padding:10px 24px;border-radius:14px;max-width:100%;position:relative;overflow:hidden;
  color:#3a1f08;border:3px solid #5c3512;
  background:
    linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,244,214,.55) 46%,rgba(255,255,255,0) 60%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.05) 1px 2px,rgba(255,255,255,0) 2px 4px),
    linear-gradient(180deg,#f0c58a 0%,#d39a5a 18%,#b0703a 48%,#8c5222 72%,#a8693a 88%,#c98c55 100%);
  box-shadow:inset 0 2px 0 rgba(255,236,200,.8),inset 0 -3px 0 rgba(60,30,8,.55),inset 0 0 0 1px rgba(255,220,170,.35),0 0 0 2px #2e1a08,0 0 18px 4px rgba(205,127,50,.55),0 6px 18px rgba(0,0,0,.6);
  animation:lkin .5s ease-out}
.lock[hidden]{display:none}
.lock::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,250,235,.35) 48%,transparent 58%);background-size:250% 100%;background-position:120% 0;animation:lksheen 4.5s ease-in-out 1s infinite}
.lk-ic{width:42px;height:42px;flex:none;color:#4a280c;filter:drop-shadow(0 1px 0 rgba(255,232,190,.75)) drop-shadow(0 -1px 0 rgba(40,20,4,.5))}
.lk-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left;position:relative;z-index:1}
.lk-t b{font-size:clamp(26px,2.6vw,38px);font-weight:900;letter-spacing:.07em;white-space:nowrap;color:#3a1f08;text-shadow:0 1px 0 rgba(255,232,190,.85),0 -1px 0 rgba(30,14,2,.45)}
#lockn,#lockp{font-size:clamp(17px,1.6vw,22px);font-weight:800;white-space:nowrap;color:#40230a;text-shadow:0 1px 0 rgba(255,232,190,.7)}
@keyframes lkin{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes lksheen{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.lock,.lock::after{animation:none}}