/* ============ shared bits ============ */
.btn.ghost-link { border-color: transparent; background: none; color: var(--muted); padding-left: 8px; padding-right: 8px; }
.btn.ghost-link:hover { color: var(--text); background: none; }
.k-sub { font-size: 12px; color: var(--muted); }
.sk { display: inline-block; width: 70px; height: 1em; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.14), rgba(255,255,255,.05)); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.tb { --h: 200; display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; font: 700 10px "JetBrains Mono", monospace; letter-spacing: -.02em;
  color: hsl(var(--h) 90% 88%); background: linear-gradient(145deg, hsl(var(--h) 45% 28%), hsl(var(--h) 55% 16%)); box-shadow: inset 0 0 0 1px hsl(var(--h) 60% 45% / .45); }
.tb.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 9px; }
.badge-oracle { display: inline-flex; align-items: center; gap: 4px; font: 600 10px "JetBrains Mono", monospace; color: #9fd4ff; padding: 2px 7px; border-radius: 999px;
  background: rgba(55, 91, 210, .18); border: 1px solid rgba(90, 160, 255, .35); vertical-align: middle; }
.badge-oracle.inline { font-size: 11px; }
.badge-oracle::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: #5aa0ff; transform: rotate(45deg); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { font: 600 13px "Inter", sans-serif; color: var(--muted); background: none; border: 0; border-radius: 9px; padding: 7px 12px; cursor: pointer; transition: background .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: rgba(124,92,255,.25); color: var(--text); box-shadow: inset 0 0 0 1px rgba(124,92,255,.5); }

/* ============ hero feed ============ */
.feed-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.feed-btn { background: linear-gradient(135deg, rgba(244,178,74,.22), rgba(244,178,74,.08)); border-color: rgba(244,178,74,.5); color: #ffe2b0; }
.feed-btn:hover { background: linear-gradient(135deg, rgba(244,178,74,.34), rgba(244,178,74,.12)); border-color: rgba(244,178,74,.8); }
.feed-btn:disabled { opacity: .55; }
.cookie-ico { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e7b27a, #c98a4b 60%, #9c6531); position: relative; flex: none;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.12); }
.cookie-ico::before, .cookie-ico::after { content: ""; position: absolute; width: 3.5px; height: 3.5px; border-radius: 50%; background: #4a2a12; top: 5px; left: 5px; box-shadow: 6px 3px 0 #4a2a12, 1px 7px 0 #4a2a12; }
.cookie-ico::after { display: none; }
.feed-stats { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: baseline; font-size: 12px; color: var(--muted); }
.feed-stats b { font-size: 16px; color: var(--text); text-align: right; }
.feed-btn.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 40% { transform: scale(1.08); } }

/* ============ market ============ */
.movers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.movers .heatmap { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mv-title { margin: 0 0 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mv-title.up { color: var(--up); } .mv-title.down { color: var(--down); }
.tile-top { gap: 8px; }
.tile-head { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tile-head > div { min-width: 0; }
.tile-head .tile-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-chg { flex: none; }
.tile-foot { flex-wrap: wrap; gap: 4px 8px; }
@media (max-width: 520px) {
  .tile { padding: 12px; }
  .tile-head { gap: 6px; }
  .tile-head .tile-name { max-width: 100%; }
  .tile-t { font-size: 16px; }
  .tile-chg { font-size: 12px; }
  .tile-price { font-size: 17px; margin-top: 6px; }
}
.table-card { padding: 18px; }
.table-tools { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.table-tools input { flex: 1; min-width: 200px; max-width: 360px; font: 500 14px "Inter", sans-serif; color: var(--text); background: var(--s1); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 10px 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.table-tools input:focus { border-color: var(--a1); box-shadow: 0 0 0 4px rgba(124,92,255,.18); }
/* "Show all 195" turns this into a very long list; content-visibility lets the browser skip
   layout/paint for the rows that are off screen (contain-intrinsic-size keeps the scrollbar honest) */
.tk-row { display: grid; grid-template-columns: minmax(0, 2.1fr) 1fr .8fr .95fr 1.2fr 1fr; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px;
  text-decoration: none; color: inherit; transition: background .15s;
  content-visibility: auto; contain-intrinsic-size: auto 52px; }
.tk-head { content-visibility: visible; }
.tk-row:not(.tk-head):hover { background: rgba(255,255,255,.035); }
.tk-head { padding-top: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
.tk-head > * { font: 600 11px "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.tk-head > span { cursor: default; }
.tk-head .num { text-align: right; }
.tk-head button.sorted { color: var(--text); }
.tk-head button.sorted::after { content: " ↓"; }
.tk-head button.sorted.asc::after { content: " ↑"; }
.tk-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tk-name b { font-family: "Space Grotesk", sans-serif; font-size: 15px; display: block; }
.tk-name small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-name > div { min-width: 0; }
.tk-row .num { text-align: right; font-family: "JetBrains Mono", monospace; font-size: 14px; }
.tk-row svg { width: 100%; height: 30px; display: block; }
.tk-row .cookie { color: var(--gold); }
.tk-row .mcap { color: var(--muted); }
.tk-name .mc-s { display: none; }
.tk-row.enter { animation: rowIn .45s ease both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }
.btn.more { width: 100%; margin-top: 10px; }
.tk-empty { padding: 30px; text-align: center; color: var(--muted); }

/* ============ radar ============ */
.radar { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; align-items: start; }
.radar-scope { position: relative; aspect-ratio: 1; max-width: 300px; margin: 6px auto 18px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, rgba(61,220,151,.10) 0 1px, transparent 1px) 0 0/22px 22px, radial-gradient(circle at 50% 50%, #0f1a17, #070b0a 70%);
  box-shadow: inset 0 0 0 1px rgba(61,220,151,.35), inset 0 0 40px rgba(61,220,151,.12); }
.radar-scope::before, .radar-scope::after { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1px solid rgba(61,220,151,.2); }
.radar-scope::after { inset: 33%; }
.sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(61,220,151,.45), rgba(61,220,151,0) 22%, transparent); animation: sweep 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.blips { position: absolute; inset: 0; }
.blip { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: blip 4s ease-out infinite; }
.blip.split { background: #b9a8ff; box-shadow: 0 0 12px #b9a8ff; width: 13px; height: 13px; }
.blip::after { content: attr(data-t); position: absolute; left: 12px; top: -4px; font: 600 9px "JetBrains Mono", monospace; color: rgba(233,236,242,.75); white-space: nowrap; }
@keyframes blip { 0% { opacity: .35; } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); } 30% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: .35; } }
.radar-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.radar-stats .stat { text-align: center; }
.upcoming { margin-top: 14px; font-size: 14px; color: var(--muted); }
.upcoming .up-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(185,168,255,.08); border: 1px solid rgba(185,168,255,.3); color: var(--text); margin-top: 8px; }
.radar-feed { max-height: 620px; display: flex; flex-direction: column; }
.events { list-style: none; margin: 14px 0 0; padding: 0 4px 0 0; overflow-y: auto; display: grid; gap: 8px; scrollbar-width: thin; }
.ev { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line);
  animation: rowIn .5s ease both; }
.ev.split { border-color: rgba(185,168,255,.4); background: linear-gradient(90deg, rgba(185,168,255,.1), var(--s1)); }
.ev b { font-family: "Space Grotesk", sans-serif; }
.ev small { display: block; color: var(--muted); font-size: 12px; }
.ev .when { text-align: right; font: 500 12px "JetBrains Mono", monospace; color: var(--muted); }
.ev .when a { color: var(--a2); text-decoration: none; }
.ev .kind { display: inline-block; font: 600 10px "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; margin-left: 6px;
  color: var(--gold); background: rgba(244,178,74,.12); }
.ev.split .kind { color: #cdbfff; background: rgba(185,168,255,.16); }

/* ============ companion ============ */
.try-label { margin: 14px 0 6px; }
.try-row { display: grid; gap: 8px; }
.try { display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 12px; background: rgba(61,214,245,.06);
  border: 1px solid rgba(61,214,245,.25); color: var(--text); font: 13px "Inter", sans-serif; transition: background .2s, border-color .2s; }
.try:hover { background: rgba(61,214,245,.12); border-color: rgba(61,214,245,.5); }
.try b { font-family: "JetBrains Mono", monospace; font-size: 13px; }
.try span { color: var(--muted); font-size: 12px; }
.explain { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; color: var(--muted); }
.explain summary { cursor: pointer; color: var(--text); font-weight: 600; list-style: none; }
.explain summary::-webkit-details-marker { display: none; }
.explain summary::before { content: "+ "; color: var(--a2); }
.explain[open] summary::before { content: "− "; }
.explain ul { padding-left: 18px; margin: 10px 0 0; }
.explain li { margin-bottom: 7px; }
.status .hint { display: block; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255,92,122,.08); border: 1px solid rgba(255,92,122,.3); color: #ffc2cd; }
.status .ok { color: var(--up); }
.egg-idle { width: 110px; height: 140px; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; background: radial-gradient(circle at 36% 28%, #3a4157, #1a1f2d 60%, #10131b);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); animation: wobble 3s ease-in-out infinite; }
.result-pet { position: relative; }
.stage-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 2; font: 600 11px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: rgba(244,178,74,.14); border: 1px solid rgba(244,178,74,.45); color: #ffe2b0; white-space: nowrap; }
.stage-badge:empty { display: none; }
.evo { margin-top: 8px; }
.evo-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.evo-track i { height: 5px; border-radius: 4px; background: rgba(255,255,255,.08); }
.evo-track i.on { background: linear-gradient(90deg, var(--gold), #ffe39a); box-shadow: 0 0 8px rgba(244,178,74,.5); }
.evo p { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }
.empty-body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; align-items: center; }
.empty-body h3 { font-size: 22px; }
.empty-body ul { margin: 10px 0 0; padding-left: 18px; color: #c3cad8; font-size: 14px; }
.empty-body li { margin-bottom: 6px; }
.chain-facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chain-facts span { font: 500 12px "JetBrains Mono", monospace; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }

/* ============ diary ============ */
.diary { margin-top: 20px; }
.diary-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.diary-head .eyebrow { margin-bottom: 6px; }
.diary-head h3 { font-family: "Space Grotesk", sans-serif; font-size: 22px; }
.diary-head .muted { max-width: 46em; }
.scan { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.scan-bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.scan-bar i { display: block; height: 100%; width: 4%; background: var(--grad); border-radius: 8px; transition: width .6s ease; position: relative; }
.scan-bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: shimmer 1.2s linear infinite; background-size: 200% 100%; }
#diary-chart { width: 100%; height: 120px; display: block; margin-top: 18px; }
.days { display: grid; grid-template-columns: repeat(30, 1fr); gap: 4px; margin-top: 10px; }
.day { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); background: var(--s1); cursor: pointer; display: grid; place-items: center; padding: 0; position: relative;
  transition: transform .15s, border-color .15s; }
.day:hover { transform: translateY(-2px); border-color: var(--line-2); }
.day.on { border-color: var(--a2); box-shadow: 0 0 0 2px rgba(61,214,245,.35); }
.day i { width: 58%; aspect-ratio: 1; border-radius: 50%; }
.day .m-party { background: #f4b24a; } .day .m-happy { background: #63cf98; } .day .m-neutral { background: #8cc3ee; }
.day .m-sad { background: #a59fd6; } .day .m-sick { background: #bccb86; } .day .m-none { background: rgba(255,255,255,.08); }
.day.snack::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #c98a4b; box-shadow: 0 0 6px rgba(244,178,74,.8); }
.day.trade::before { content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: 10px; height: 3px; border-radius: 2px; background: var(--a2); }
.day-caption { margin-top: 12px; font-size: 14px; color: #c3cad8; min-height: 1.5em; }
.diary-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 10px; }

/* ============ duel ============ */
.duel-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 14px; align-items: end; }
.duel-in input { width: 100%; font: 500 14px "JetBrains Mono", monospace; color: var(--text); background: var(--s1); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; outline: none; margin-top: 6px; }
.duel-in input:focus { border-color: var(--a1); box-shadow: 0 0 0 4px rgba(124,92,255,.18); }
.vs { font: 700 20px "Space Grotesk", sans-serif; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 10px; }
.arena { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 18px; align-items: center; margin-top: 22px; }
.fighter { position: relative; text-align: center; }
.fighter .pet-stage { max-width: 240px; }
#fa .pet-stage { transform: scaleX(1); }
.f-name { font-size: 13px; color: var(--muted); }
.fighter.win .pet-stage { animation: winJump 1s ease 2; }
.fighter.lose .pet-stage { filter: saturate(.6) brightness(.8); transition: filter .6s; }
@keyframes winJump { 30% { transform: translateY(-14px); } 60% { transform: translateY(0); } }
.crown { position: absolute; top: -6px; left: 50%; width: 54px; height: 34px; transform: translateX(-50%); z-index: 2; animation: crownDrop .8s cubic-bezier(.3,1.5,.5,1) both;
  background: linear-gradient(180deg, #ffe39a, #e9b949); clip-path: polygon(0 100%, 0 30%, 22% 60%, 50% 0, 78% 60%, 100% 30%, 100% 100%); filter: drop-shadow(0 0 10px rgba(244,178,74,.8)); }
@keyframes crownDrop { from { transform: translate(-50%, -60px); opacity: 0; } }
.rounds { display: grid; gap: 12px; }
.round { padding: 12px 14px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); animation: rowIn .5s ease both; }
.round .r-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.round .r-head b { color: var(--text); font-family: "Space Grotesk", sans-serif; font-size: 14px; }
.round .bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.round .bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.round .bar i { display: block; height: 100%; width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.round .bar.a i { background: linear-gradient(90deg, #7c5cff, #3dd6f5); margin-left: auto; }
.round .bar.b i { background: linear-gradient(90deg, #3ddc97, #f4b24a); }
.round .vals { display: flex; justify-content: space-between; margin-top: 4px; font: 500 12px "JetBrains Mono", monospace; }
.round .w { color: var(--gold); }
.duel-result { margin-top: 18px; text-align: center; font: 600 18px "Space Grotesk", sans-serif; min-height: 1.4em; }

/* ============ simulator / evolution strip ============ */
.sim-add { margin-bottom: 12px; }
.sim-add input { width: 100%; font: 500 14px "Inter", sans-serif; color: var(--text); background: var(--s1); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 14px; outline: none; }
.slider-row .rm { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; padding: 0 4px; }
.slider-row { grid-template-columns: 64px 1fr 44px 64px 20px; }
.evo-strip { margin-top: 16px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; text-align: center; }
.evo-strip svg { width: 100%; max-width: 120px; height: auto; }
.evo-pet { width: 100%; max-width: 120px; aspect-ratio: 1; margin: 0 auto; }
.react > div:first-child { width: 96px; height: 96px; }
.evo-strip b { display: block; font-family: "Space Grotesk", sans-serif; font-size: 14px; }
.evo-strip span { font-size: 12px; color: var(--muted); }
/* the six stages take turns in the spotlight, one every 1.8s, so "it grows up" reads as a journey
   rather than a still filmstrip — transform+box-shadow only, paused off-screen like everything else */
.evo-card { border-radius: 16px; padding: 10px 4px 6px; animation: evoGrow 10.8s ease-in-out infinite; }
.evo-card:nth-child(1) { animation-delay: 0s; } .evo-card:nth-child(2) { animation-delay: -1.8s; }
.evo-card:nth-child(3) { animation-delay: -3.6s; } .evo-card:nth-child(4) { animation-delay: -5.4s; }
.evo-card:nth-child(5) { animation-delay: -7.2s; } .evo-card:nth-child(6) { animation-delay: -9s; }
@keyframes evoGrow {
  0%, 16.7%, 100% { transform: scale(1); box-shadow: none; }
  5%, 10% { transform: scale(1.1); box-shadow: 0 0 0 1px rgba(124,92,255,.4), 0 14px 30px rgba(124,92,255,.35); }
}

@media (max-width: 900px) {
  .movers, .radar, .empty-body, .arena { grid-template-columns: 1fr; }
  .duel-form { grid-template-columns: 1fr; }
  .vs { padding: 0; text-align: center; }
  .evo-strip { grid-template-columns: repeat(3, 1fr); }
  .days { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 600px) {
  .tk-row { grid-template-columns: minmax(0, 2fr) 1fr .9fr; }
  .tk-row .hide-s, .tk-row > .spark, .tk-row > .divs { display: none; }
  .tk-name .mc-s { display: inline; }
  .radar-stats { grid-template-columns: 1fr 1fr 1fr; }
  .slider-row { grid-template-columns: 52px 1fr 40px 58px 18px; }
}

/* duel confetti + chart draw */
.confetti-piece { position: absolute; top: 12%; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; z-index: 3; animation: confettiFly 1.9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes confettiFly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 240px) rotate(var(--rot)); opacity: 0; } }
path.draw { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: drawLine 1.8s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { path.draw { animation: none; stroke-dashoffset: 0; } }
.arena-idle { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 18px; align-items: center; margin-top: 18px; }
.arena-idle .pet-stage { max-width: 200px; opacity: .9; }
.idle-mid { text-align: center; display: grid; gap: 12px; justify-items: center; }
.idle-mid .try { max-width: 280px; }
@media (max-width: 900px) { .arena-idle { grid-template-columns: 1fr 1fr; } .idle-mid { grid-column: 1 / -1; order: -1; } }

/* on-chain renderer */
.onchain { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: stretch; }
.onchain > * { min-width: 0; }
.oc-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 4px; }
.oc-facts:empty { display: none; }
.oc-facts div { padding: 10px 12px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line); animation: rowIn .45s ease both; }
.oc-facts dt { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.oc-facts dd { margin: 3px 0 0; font-size: 14px; color: var(--text); word-break: break-word; }
.oc-what { margin-top: 18px; }
.oc-snippet { margin: 6px 0 10px; padding: 12px 14px; border-radius: 12px; background: #06070b; border: 1px solid var(--line); color: #a8f0d0;
  font: 500 12px/1.55 "JetBrains Mono", monospace; overflow-x: auto; white-space: pre; }
.oc-view { display: grid; place-items: center; padding: 22px; background: radial-gradient(70% 60% at 50% 40%, rgba(124,92,255,.12), transparent 70%), var(--s1); }
.oc-frame { position: relative; width: 100%; max-width: 360px; aspect-ratio: 360 / 440; border-radius: 28px; display: grid; place-items: center; }
@property --oc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.oc-frame::before { content: ""; position: absolute; inset: -2px; border-radius: 30px; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 1;
  background: conic-gradient(from var(--oc-a), transparent 0 62%, #3dd6f5 80%, #7c5cff 92%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.oc-frame.busy::before { opacity: 1; animation: ocSpin 1.1s linear infinite; }
@keyframes ocSpin { to { --oc-a: 360deg; } }
.oc-frame.busy .oc-img { filter: blur(3px) saturate(.6); opacity: .6; }
.oc-img { width: 100%; height: auto; display: block; border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 50px -10px rgba(124,92,255,.35);
  animation: ocIn .7s cubic-bezier(.2,.8,.2,1) both; transition: filter .3s, opacity .3s; }
@keyframes ocIn { from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); } }
.oc-placeholder { width: 100%; height: 100%; border-radius: 28px; border: 1px dashed var(--line-2); display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.oc-chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(61,214,245,.4); color: #9eeaff; background: rgba(61,214,245,.08); }
.oc-gallery { margin-top: 20px; }
.oc-g-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.oc-moods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 12px; }
.oc-mood { margin: 0; border-radius: 16px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.05), transparent 70%), var(--s1); border: 1px solid var(--line);
  padding: 6px 6px 10px; text-align: center; animation: rowIn .5s ease both; animation-delay: var(--d, 0ms); transition: transform .25s, border-color .25s; }
.oc-mood.sk { aspect-ratio: 1 / 1.12; }
.oc-mood:hover { transform: translateY(-4px); border-color: var(--line-2); }
.oc-mood img { width: 100%; height: auto; display: block; }
.oc-mood figcaption { font-size: 11px; color: var(--muted); }
@media (max-width: 900px) {
  .onchain { grid-template-columns: 1fr; }
  .oc-view { order: -1; }
  .oc-moods { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) { .oc-facts { grid-template-columns: 1fr; } }