/* Glanceable blocks shared by project pages: tiles, rule chips, flow steps, pills, details, placeholders */
/* ===== Flashy, glanceable blocks ===== */
.lede2 { font-size: 1.25rem !important; line-height: 1.4 !important; color: var(--text-primary, #e2e8f0) !important; margin: 4px 0 14px !important; }
.tiny { font-size: 12.5px !important; line-height: 1.55 !important; color: #7d8aa0 !important; margin: 12px 0 0 !important; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 4px; }
.tile { position: relative; text-align: center; padding: 14px 10px 12px; border-radius: 14px; border: 1px solid transparent;
  background: linear-gradient(#0e182c, #0e182c) padding-box, linear-gradient(135deg, #00d4ff, #8b5cf6) border-box; transition: transform .25s, box-shadow .25s; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,212,255,.15); }
.tile i.bi { display: block; font-size: 1.35rem; color: #00d4ff; margin-bottom: 2px; }
.tile .v { display: block; font: 700 clamp(1.25rem, 4.6vw, 1.85rem)/1.15 var(--mono, monospace); color: #fff; text-shadow: 0 0 18px rgba(0,212,255,.45); }
.tile .l { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: #94a3b8; }
.tile.hot { background: linear-gradient(#18140d, #18140d) padding-box, linear-gradient(135deg, #ffd9a0, #ff8a3d) border-box; }
.tile.hot i.bi { color: #ffb454; } .tile.hot .v { text-shadow: 0 0 18px rgba(255,160,70,.5); }
.tile.win { background: linear-gradient(#0c1a14, #0c1a14) padding-box, linear-gradient(135deg, #6ee7b7, #10b981) border-box; }
.tile.win i.bi { color: #39ff6a; } .tile.win .v { text-shadow: 0 0 18px rgba(57,255,106,.45); }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 4px; }
.rule { text-align: center; border-radius: 14px; padding: 14px 8px 12px; border: 1px solid; }
.rule b { display: block; font: 800 clamp(1.8rem, 7vw, 2.6rem)/1 var(--mono, monospace); }
.rule span { display: block; font-size: 12.5px; margin-top: 4px; color: #c8d5e1; }
.rule em { display: block; font-style: normal; font: 600 14px var(--mono, monospace); margin-top: 8px; color: #94a3b8; }
.rule em u { text-decoration: none; display: inline-block; min-width: 1.5em; padding: 1px 4px; border-radius: 5px; background: rgba(255,255,255,.08); color: #e2e8f0; }
.rule.good { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.5); } .rule.good b { color: #6ee7b7; text-shadow: 0 0 16px rgba(16,185,129,.6); }
.rule.bad { background: rgba(255,77,109,.1); border-color: rgba(255,77,109,.5); } .rule.bad b { color: #ff9aae; text-shadow: 0 0 16px rgba(255,77,109,.6); }
.rule.gap { background: rgba(255,138,61,.1); border-color: rgba(255,138,61,.5); } .rule.gap b { color: #ffb582; text-shadow: 0 0 16px rgba(255,138,61,.6); }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; counter-reset: st; }
.flow.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { position: relative; text-align: center; padding: 16px 10px 12px; border-radius: 14px; background: #0e182c; border: 1px solid #1e3a5f; }
.step:not(:last-child)::after { content: '→'; position: absolute; right: -13px; top: 38%; z-index: 2; font: 700 16px var(--mono, monospace); color: #00d4ff; }
.step i.bi { display: block; font-size: 1.6rem; color: #00d4ff; }
.step b { display: block; margin-top: 4px; font: 700 1.15rem var(--mono, monospace); color: #fff; }
.step span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: #94a3b8; }
.step.win { border-color: #10b981; background: rgba(16,185,129,.1); } .step.win i.bi { color: #39ff6a; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pills span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: #e2e8f0; border: 1px solid #1e3a5f; background: #0e182c; }
.pills span i { color: #00d4ff; }
details.more { margin-top: 12px; border: 1px dashed #1e3a5f; border-radius: 12px; padding: 4px 12px 10px; }
details.more summary { cursor: pointer; padding: 8px 0; font: 500 13px var(--mono, monospace); color: #7ee8ff; }

.flow.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 820px) { .flow.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow.five .step:nth-child(odd)::after { content: '→'; } .flow.five .step:nth-child(even)::after { content: none; } .flow.five .step:last-child { grid-column: 1 / -1; } .flow.five .step:last-child::after { content: none; } }
.soon { position: relative; border: 1.5px dashed #2f5f8f; border-radius: 16px; padding: 18px 16px 16px; background: repeating-linear-gradient(-45deg, rgba(0,212,255,.04) 0 14px, rgba(0,212,255,.08) 14px 28px); text-align: center; }
.soon b { display: block; font: 700 1.25rem var(--mono, monospace); color: #fff; }
.soon span { color: #94a3b8; font-size: 13px; }
.soon .dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #ffb454; box-shadow: 0 0 10px #ffb454; animation: soonblink 1.4s ease-in-out infinite; }
@keyframes soonblink { 50% { opacity: .25; } }
.tile.dash { border: 1.5px dashed #2f5f8f; background: rgba(0,212,255,.04); } .tile.dash .v { color: #6b7a90; text-shadow: none; }