/* Hodlet page layout and the pieces that are not shared with FlySwarm. Panels, dialogs, tables and the
   profile card come from ui.css. */
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#5f9a45; }
main { position:relative; width:100%; height:100%; height:100dvh; }
#world { display:block; width:100%; height:100%; image-rendering:pixelated; touch-action:manipulation; }
button { font:inherit; }
.fatal { position:fixed; inset:auto 16px 16px; padding:12px 16px; background:#7a1f1f; border-radius:12px; color:#fff; }

.brand-mark { border-radius:13px; box-shadow:0 6px 16px -6px rgba(10,20,30,.5); }
.header-left { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.site-links { pointer-events:auto; display:flex; gap:8px; }
.chip { display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:12px; background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--ink); font:600 13px/1 var(--sans); text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.18); cursor:pointer; }
.chip:hover { background:var(--glass-strong); }
.chip .k { font-size:10px; letter-spacing:.14em; color:var(--ink-3); }
.chip code { font:600 12px/1 var(--sans); max-width:30ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip[hidden] { display:none; }

/* Live village feed */
#feed { position:absolute; z-index:2; right:24px; top:84px; width:300px; padding:14px 14px 10px; border-radius:20px; pointer-events:none; background:var(--glass); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); text-shadow:0 1px 2px rgba(0,0,0,.18); }
#feed h2 { margin:0 0 8px; font:700 10.5px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
#feed ul { list-style:none; margin:0; padding:0; display:grid; gap:2px; }
#feed li { display:grid; grid-template-columns:8px 1fr auto; align-items:center; gap:9px; padding:6px 2px; font-size:12.5px; line-height:1.3; color:var(--ink-2); animation:feed-in .35s ease both; }
#feed li:nth-child(n+5) { opacity:.55; } #feed li:nth-child(n+7) { opacity:.3; }
#feed li i { width:8px; height:8px; border-radius:50%; }
#feed li b { color:var(--ink); font-weight:600; }
#feed li em { font:700 12px/1 var(--sans); font-style:normal; }
@keyframes feed-in { from { opacity:0; transform:translateX(10px); } }
.pos { color:var(--up); } .neg { color:var(--down); }
.profit dd.neg { color:var(--down); }

#toast { top:92px; }
#credit { position:absolute; z-index:2; right:14px; bottom:4px; font:500 10px/1 var(--sans); color:rgba(255,255,255,.88); text-decoration:none; text-shadow:0 1px 3px rgba(0,0,0,.6); }
#credit:hover { text-decoration:underline; }

@media (max-width:760px) {
  .header-left { align-items:center; }
  .chip { height:32px; }
  #feed { right:auto; left:10px; top:150px; width:min(280px,calc(100% - 20px)); padding:10px 12px 6px; }
  #feed li:nth-child(n+4) { display:none; }
  #credit { right:auto; left:12px; bottom:92px; }
}
@media (prefers-reduced-motion:reduce) { #feed li { animation:none; } }