/* Rankings, our own look: nobori war-banners on bamboo poles, kamon crests, wooden plaque rows in a lacquer frame. */
.podium { align-items: end; max-width: 520px; gap: .8rem; margin-top: 2.2rem; }
.banner3 { padding-top: 14px; }
/* bamboo cross-bar and finials */
.banner3::before { content: ""; position: absolute; top: 4px; left: -4%; right: -4%; height: 11px; border-radius: 6px; background: linear-gradient(#e7d28a, #b38a2e 60%, #7a5a1a); border: 2px solid #3a260a; z-index: 3; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.banner3::after { content: ""; position: absolute; top: 0; left: -6%; width: 14px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a6, #c07a12); border: 2px solid #3a260a; z-index: 4; box-shadow: calc(100% + 8px) 0 0 #c07a12; }
.bshield { aspect-ratio: .68; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); border-radius: 0; margin-top: 6px; }
.g1 .bshield { aspect-ratio: .62; } .g2 .bshield, .g3 .bshield { width: 100%; }
.g1 .bshield { background: linear-gradient(180deg, #fff1a0, #e0a21f 40%, #b3701a); }
.g2 .bshield { background: linear-gradient(180deg, #f3eeff, #a899e6 45%, #6a5ac0); }
.g3 .bshield { background: linear-gradient(180deg, #e0f1ff, #6fa6e8 45%, #3a6ab8); }
.bshield::before { inset: 4% 8% 12%; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 8px), linear-gradient(#7a1d12, #4a0f0a); border: 0; }
.g2 .bshield::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 8px), linear-gradient(#2a2368, #16124a); }
.g3 .bshield::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 8px), linear-gradient(#15407a, #0c2552); }
/* kamon: a round crest, vertical flag lettering style */
.emb { clip-path: none; border-radius: 50%; width: 46px; height: 46px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 65%, #fff), var(--c) 70%, color-mix(in srgb, var(--c) 60%, #000)); border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.55), inset 0 -4px 6px rgba(0,0,0,.25); }
.emb.big { width: 74%; height: auto; aspect-ratio: 1; margin-top: -28%; } .emb.big span { font-size: clamp(1.8rem, 9vw, 2.8rem); } .g1 .emb.big span { font-size: clamp(2.2rem, 11vw, 3.4rem); }
.plc { bottom: 13%; border-radius: 6px; width: 32px; height: 32px; transform: translateX(-50%) rotate(45deg); } .plc { font-size: 0; } .plc::after { content: attr(data-n); }
.plc { font-size: 1.1rem; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff6a47, #a8301b); border-color: #fff5d6; color: #fff5d6; }
.g1 .plc { width: 40px; height: 40px; font-size: 1.3rem; }
/* wooden plaque table in a lacquer frame */
.rtable { background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px), linear-gradient(#5a3418, #3a200c); border: 4px solid #1b0d04; box-shadow: 0 0 0 3px #e0a21f, 0 10px 0 rgba(0,0,0,.45); border-radius: 12px; }
.rtable::before { display: none; }
.rth { color: #f6d68a; border-bottom: 2px solid rgba(246,214,138,.4); }
.rtable .rrow { background: repeating-linear-gradient(90deg, rgba(120,70,20,.08) 0 2px, transparent 2px 9px), linear-gradient(#f3d9a4, #d9b26a); color: #2a1604; border: 3px solid #1b0d04; border-radius: 6px 22px 22px 6px; box-shadow: 0 3px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5); }
.rtable .rrow .rn { color: #fff5d6; background: radial-gradient(circle at 35% 30%, #ff6a47, #a8301b); border-radius: 50%; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; font-size: 1.1rem; margin-right: .3rem; border: 2px solid #1b0d04; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.rtable .rrow .rm b { color: #2a1604; } .rtable .rrow .rm span { color: #6b3a10; } .rtable .rrow .rs { color: #a8301b; }
.rtable .rrow .sbar { background: rgba(0,0,0,.18); } .rtable .rrow .sbar i { background: linear-gradient(90deg, #c8321b, #ff9a3d); }
.rtable .rrow .emb { width: 36px; height: 36px; } .rtable .rrow .emb span { font-size: 1rem; margin-top: 0; }
.rtable .rrow.me { background: linear-gradient(#ffe27a, #f0a21f); border-color: #5a2a00; box-shadow: 0 0 0 3px #fff5d6, 0 0 20px rgba(255,170,60,.9), 0 3px 0 rgba(0,0,0,.5); }
.rtable .rrow.me .rn { background: #2a1604; }

.emb.photo { overflow: hidden; background: #0a1030; } .emb.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }