/* ══ CLOD — drawn badly, on purpose ═════════════════════════════════════ */

:root {
  --paper:  #ffffff;
  --ink:    #141414;
  --pencil: #3d3d3d;
  --faint:  #9b9b9b;
  --orange: #ef7622;
  --green:  #2f9e3f;
  --red:    #d63b2a;
  --hand:   "Architects Daughter", "Comic Sans MS", cursive;
  --marker: "Permanent Marker", "Architects Daughter", cursive;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--hand); font-size: 17px; line-height: 1.45;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.05; }

/* hand-drawn border: a wobbled overlay so the text stays readable */
.edge { position: absolute; inset: 0; border: 2.5px solid var(--ink); pointer-events: none; filter: url(#wob); }

.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 9px; padding: 10px 12px; }

/* ── top ── */
.top { flex: none; display: flex; align-items: center; gap: 18px; }
.top .guy { height: 62px; }
.top .word { font-family: var(--marker); font-size: 52px; letter-spacing: 2px; line-height: 1; }
.top .tag { font-size: 18px; color: var(--pencil); line-height: 1.25; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.top .right button, .top .right a { font: inherit; font-size: 19px; background: none; border: 0; cursor: pointer; color: var(--pencil); }
.top .right button:hover { color: var(--orange); }
.buy { position: relative; padding: 9px 22px; font-size: 20px !important; color: var(--ink) !important; }
.buy:hover { background: #fff3ea; }

/* ── ticker ── */
.ticker { flex: none; position: relative; height: 40px; display: flex; align-items: stretch; overflow: hidden; }
.ticker .lbl { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 16px; background: var(--orange); color: #fff; }
.ticker .lbl i { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: blink 1.3s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.ticker .tw { flex: 1; overflow: hidden; position: relative; }
.ticker .track { position: absolute; white-space: nowrap; top: 0; line-height: 40px; font-size: 18px; letter-spacing: .5px; animation: run 46s linear infinite; will-change: transform; }
.ticker .track:hover { animation-play-state: paused; }
.ticker .it { margin-right: 26px; }
@keyframes run { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── panels ── */
.main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1.62fr) minmax(320px,.85fr); grid-template-rows: minmax(0,1fr); gap: 10px; }
.panel { position: relative; min-height: 0; display: flex; flex-direction: column; }
.panel .hd { flex: none; display: flex; align-items: baseline; gap: 11px; padding: 12px 20px 6px; }
.panel .hd .num { font-size: 27px; color: var(--orange); }
.panel .hd h2 { font-size: 27px; }
.panel .hd .note { margin-left: auto; font-size: 17px; color: var(--faint); }
.panel .hd .live { margin-left: auto; font-size: 17px; color: var(--green); display: inline-flex; align-items: center; gap: 7px; }
.panel .hd .live i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: blink 1.4s infinite; }
.rail { display: grid; grid-template-rows: minmax(0,1.05fr) minmax(0,.95fr); gap: 10px; min-height: 0; }

/* ── 1) reading ── */
.readwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px,.75fr) minmax(0,1.25fr); gap: 16px; padding: 6px 20px 16px; }
.srccard { position: relative; align-self: start; padding: 16px 18px; max-height: 100%; overflow: hidden; }
.srccard .meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.srccard .who { color: var(--orange); font-size: 19px; }
.srccard .when { margin-left: auto; color: var(--faint); font-size: 16px; }
.srccard .ttl { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
.srccard .txt { font-size: 16px; color: var(--pencil); line-height: 1.4; max-height: 8.4em; overflow: hidden; }
.srccard .eng { display: flex; gap: 22px; margin-top: 14px; color: var(--faint); font-size: 16px; }

/* the scene: just the guy and his one thought */
.scene { position: relative; min-height: 0; overflow: hidden; }
.crew { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); height: 50%;
  display: flex; align-items: flex-end; justify-content: center; }
.crew .guy { height: 100%; width: auto; object-fit: contain; animation: bob 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-9px) rotate(1.5deg)} }
.scene .word { position: absolute; left: 3%; bottom: 58%; font-size: 27px; transform: rotate(-7deg); color: var(--ink); }
.scene .word::after { content: ""; animation: dots 1.6s steps(4) infinite; }
@keyframes dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* dumb little doodles that pop out next to him */
.doodles { position: absolute; inset: 0; pointer-events: none; }
.doodle { position: absolute; font-size: 26px; color: var(--ink); animation: floatup 2.6s ease-out forwards; }
@keyframes floatup { 0%{opacity:0;transform:translateY(6px) rotate(-8deg) scale(.7)} 20%{opacity:1;transform:translateY(-4px) rotate(4deg) scale(1.1)} 100%{opacity:0;transform:translateY(-70px) rotate(-6deg) scale(1)} }

/* the guy randomly does something stupid */
.guy.doing-spin   { animation: spin360 1.1s cubic-bezier(.3,1.6,.4,1) !important; }
.guy.doing-jump   { animation: jump 0.8s cubic-bezier(.25,1.6,.4,1) 2 !important; }
.guy.doing-squish { animation: squish 0.7s ease-in-out 2 !important; }
.guy.doing-flip   { animation: flipx 1.1s ease-in-out !important; }
.guy.doing-shake  { animation: shakeit 0.55s ease-in-out 3 !important; }
.guy.doing-party  { animation: party 1.4s ease-in-out 2 !important; }
@keyframes spin360 { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes jump { 0%,100%{transform:translateY(0) scaleY(1)} 30%{transform:translateY(-46px) scaleY(1.08)} 70%{transform:translateY(0) scaleY(.9)} }
@keyframes squish { 0%,100%{transform:scale(1,1)} 50%{transform:scale(1.22,.76)} }
@keyframes flipx { 0%{transform:scaleX(1)} 50%{transform:scaleX(-1) rotate(6deg)} 100%{transform:scaleX(1)} }
@keyframes shakeit { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-11px) rotate(-6deg)} 75%{transform:translateX(11px) rotate(6deg)} }
@keyframes party { 0%,100%{transform:rotate(-9deg) translateY(0)} 50%{transform:rotate(9deg) translateY(-22px)} }

/* the thought box: same wobbly ink line as every other box on the page,
   just with softer uneven corners + a second pass drawn slightly off */
.bubble {
  position: absolute; right: 2%; top: 3%; max-width: 58%; padding: 18px 22px 20px;
  background: #fff;
  border-radius: 26px 32px 24px 30px / 30px 22px 30px 24px;
  animation: bubblepop .5s cubic-bezier(.2,1.7,.4,1) both;
}
.bubble .edge {
  border-width: 3px;
  border-radius: 26px 32px 24px 30px / 30px 22px 30px 24px;
}
.bubble .edge::after {
  content: ""; position: absolute; inset: -4px -3px -2px -5px;
  border: 1.6px solid var(--ink); opacity: .42;
  border-radius: 30px 24px 32px 26px / 24px 30px 22px 32px;
}
@keyframes bubblepop { 0%{opacity:0;transform:scale(.6) rotate(-4deg)} 60%{opacity:1;transform:scale(1.06) rotate(1deg)} 100%{transform:scale(1)} }
.bubble .txt { font-size: 17px; line-height: 1.4; }
.bubble .verdict { margin-top: 6px; font-size: 15px; color: var(--pencil); }
.bubble .verdict b { color: var(--orange); font-weight: 400; }
.bubble .dot { position: absolute; background: #fff; border: 2.8px solid var(--ink); border-radius: 50%; filter: url(#wob); }
.bubble .d1 { width: 18px; height: 18px; left: 4%; bottom: -20px; }
.bubble .d2 { width: 12px; height: 12px; left: -6%; bottom: -40px; }
.bubble .d3 { width: 8px; height: 8px; left: -15%; bottom: -58px; }

/* ── 2) brain log ── */
.log { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 14px; scrollbar-width: none; }
.log::-webkit-scrollbar { display: none; }
.row { display: flex; gap: 14px; padding: 3.5px 0; font-size: 17px; animation: fade .25s ease both; }
.row .t { color: var(--faint); flex: none; }
.row .m { min-width: 0; }
@keyframes fade { from{opacity:0;transform:translateY(3px)} to{opacity:1} }
.empty { color: var(--faint); font-size: 17px; padding: 8px 0; }

/* ── 3) coins made ── */
.coins { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 14px; scrollbar-width: none; }
.coins::-webkit-scrollbar { display: none; }
.coin { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 18px; }
.coin .sym { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin .age { color: var(--faint); font-size: 16px; flex: none; width: 78px; text-align: right; }
.coin .res { flex: none; width: 96px; text-align: right; }
.coin .res.up { color: var(--green); } .coin .res.down { color: var(--red); } .coin .res.dep { color: var(--orange); }

/* ── bottom strip ── */
.foot { flex: none; position: relative; display: flex; align-items: center; gap: 0; padding: 9px 18px; font-size: 18px; }
.foot .s { padding: 0 18px; border-right: 2px dotted #ddd; }
.foot .s:first-child { padding-left: 0; }
.foot .s:last-of-type { border-right: 0; }
.foot .s b { font-weight: 400; }
.foot .s.orange b { color: var(--orange); }
.foot .learn { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--pencil); }
.foot .barwrap { position: relative; width: 150px; height: 17px; }
.foot .bar { position: absolute; inset: 2px; }
.foot .bar > i { display: block; height: 100%; width: 12%; background: var(--orange); }

/* ── launch pop ── */
#fx { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.pop { position: fixed; left: 50%; top: 42%; transform: translate(-50%,-50%); text-align: center; animation: poplife 3s ease forwards; }
.pop img { width: 230px; animation: shake .3s ease-in-out 8; }
.pop .l { font-family: var(--marker); font-size: 46px; color: var(--orange); margin-top: 4px; }
.pop .s { font-size: 22px; }
@keyframes shake { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
@keyframes poplife { 0%{opacity:0} 8%{opacity:1} 82%{opacity:1} 100%{opacity:0} }

/* ── modal ── */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(255,255,255,.8); }
.modal-card { position: relative; max-width: 640px; max-height: 82vh; overflow-y: auto; background: var(--paper); padding: 30px 34px; }
.modal-x { position: absolute; top: 8px; right: 18px; background: none; border: 0; cursor: pointer; font-family: var(--hand); font-size: 26px; }
.modal-card h2 { font-family: var(--marker); font-size: 34px; color: var(--orange); margin-bottom: 12px; }
.modal-card p { font-size: 18px; color: var(--pencil); margin: 0 0 12px; }
.modal-card em { color: var(--ink); font-style: normal; }

@media (max-width: 1050px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100dvh; }
  .main { grid-template-columns: 1fr; }
  .readwrap { grid-template-columns: 1fr; }
  .scene { min-height: 300px; }
  .rail { grid-template-rows: auto auto; }
}

/* falling dollar confetti when it makes a coin */
.conf { position: fixed; top: -40px; font-family: var(--marker); color: var(--orange); z-index: 55; pointer-events: none;
  animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(112vh) rotate(540deg); opacity: .1; } }

/* ── more stupidity ─────────────────────────────────────────── */
/* the guy occasionally goes for a walk */
.crew { transition: transform 1.4s cubic-bezier(.4,0,.5,1); }
.crew.walking { animation: waddle .42s ease-in-out infinite; }
@keyframes waddle {
  0%,100% { transform: translateX(calc(-50% + var(--wx, 0px))) rotate(-7deg); }
  50%     { transform: translateX(calc(-50% + var(--wx, 0px))) rotate(7deg) translateY(-9px); }
}

/* falling over, the crown jewel */
.guy.doing-fall { animation: fallover 1.8s cubic-bezier(.4,1.4,.5,1) !important; transform-origin: 50% 100%; }
@keyframes fallover { 0%{transform:rotate(0)} 18%{transform:rotate(-14deg)} 34%{transform:rotate(96deg) translateY(6px)} 72%{transform:rotate(96deg) translateY(6px)} 88%{transform:rotate(-8deg)} 100%{transform:rotate(0)} }

/* vibrating out of pure excitement */
.guy.doing-vibrate { animation: vibrate .06s linear 26 !important; }
@keyframes vibrate { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)} 75%{transform:translate(3px,-2px)} }

/* grows a huge head because it had a thought */
.guy.doing-bighead { animation: bighead 1.3s cubic-bezier(.3,1.5,.4,1) !important; }
@keyframes bighead { 0%,100%{transform:scale(1)} 45%{transform:scale(1.45) rotate(-5deg)} }

/* the whole page loses its balance */
.app.quake { animation: quake .5s ease-in-out; }
@keyframes quake { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-7px,4px) rotate(-.4deg)} 50%{transform:translate(6px,-5px) rotate(.4deg)} 80%{transform:translate(-4px,3px)} }

/* things arriving should arrive badly */
.row { animation: flopin .34s cubic-bezier(.2,1.6,.4,1) both !important; }
@keyframes flopin { 0%{opacity:0;transform:translateX(-16px) rotate(-2.5deg)} 100%{opacity:1;transform:none} }
.ticker .it.fresh { animation: shout .8s ease-in-out 2; display: inline-block; }
@keyframes shout { 0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.22) rotate(-3deg)} }

/* stat numbers celebrating themselves */
.foot b.bump { animation: bump .55s cubic-bezier(.2,1.8,.4,1); display: inline-block; }
@keyframes bump { 0%,100%{transform:scale(1)} 40%{transform:scale(1.6) rotate(-8deg); color: var(--orange)} }

/* the logo up top is also an idiot */
.top .guy { transition: transform .2s ease; cursor: pointer; }
.top .guy:hover { transform: rotate(-12deg) scale(1.15); }
.top .guy.spun { animation: spin360 .9s cubic-bezier(.3,1.6,.4,1); }

/* doodles get bigger and sillier */
.doodle.big { font-size: 34px; }