/* Edo-era refinement on top of the glossy game look: lacquer and gold trim, wave-pattern ribbons, family crests, scroll rods. */
:root {
  --seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.3'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3Ccircle cx='20' cy='20' r='12'/%3E%3Ccircle cx='20' cy='20' r='6'/%3E%3Ccircle cx='0' cy='10' r='18'/%3E%3Ccircle cx='0' cy='10' r='12'/%3E%3Ccircle cx='0' cy='10' r='6'/%3E%3Ccircle cx='40' cy='10' r='18'/%3E%3Ccircle cx='40' cy='10' r='12'/%3E%3Ccircle cx='40' cy='10' r='6'/%3E%3C/g%3E%3C/svg%3E");
  --mon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='%23ffd34d' stroke-width='3'/%3E%3Cg fill='%23ffd34d'%3E%3Ccircle cx='32' cy='17' r='7'/%3E%3Cpath d='M32 24c-8 0-12 6-10 12 3-4 7-5 10-4z'/%3E%3Ccircle cx='19' cy='41' r='7'/%3E%3Cpath d='M26 41c0 8-6 12-12 9 4-3 5-7 4-10z' transform='rotate(0)'/%3E%3Ccircle cx='45' cy='41' r='7'/%3E%3Cpath d='M38 41c0-8 6-12 12-9-4 3-5 7-4 10z'/%3E%3C/g%3E%3C/svg%3E");
  --gold-edge: linear-gradient(135deg, #fff3a6, #e0a21f 45%, #9a6a0c 55%, #ffe27a);
}

/* panels: gold-leaf trim, a family crest in the corner, scroll-style heading rod */
.card { border-image: none; }
.card::after { top: 8px; right: 10px; width: 34px; height: 34px; background: var(--mon) center/contain no-repeat; opacity: .55; }
.card > h2 { position: relative; padding-left: .2rem; }
.card > h2::after { height: 6px; width: 92px; border-radius: 4px; background: var(--gold-edge); box-shadow: 0 2px 0 rgba(0,0,0,.35); transform: none; }
.card.flat::after { display: none; }
.modal::before, .sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--gold-edge); border-radius: 14px 14px 0 0; }

/* ribbons and banners get the wave pattern */
main > h1, .rs-ribbon, .mp-banner span { background-image: var(--seigaiha), linear-gradient(#ee5a3d, #a93329); background-size: 40px 20px, auto; }
.rs-back.loss .rs-ribbon { background-image: var(--seigaiha), linear-gradient(#6f84b0, #38486e); background-size: 40px 20px, auto; }
.banner::before { opacity: 1; }
.dock { background-image: var(--seigaiha), linear-gradient(rgba(35,70,160,.96), rgba(12,26,90,.97)); background-size: 40px 20px, auto; }

/* lacquer + gold buttons */
.btn { border-color: #0a0a14; box-shadow: 0 0 0 2px #e0a21f, 0 5px 0 #0a0a14; letter-spacing: .06em; }
.btn:hover:not(:disabled) { box-shadow: 0 0 0 2px #ffe27a, 0 7px 0 #0a0a14; }
.btn:active:not(:disabled) { box-shadow: 0 0 0 2px #e0a21f, 0 0 0 #0a0a14; }
.btn.small { box-shadow: 0 0 0 2px #e0a21f, 0 3px 0 #0a0a14; }
.rs-btn { border-color: #0a0a14; box-shadow: 0 0 0 3px #e0a21f, 0 6px 0 #0a0a14, 0 12px 14px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.45); }
.rs-back.loss .rs-btn { border-color: #0a0a14; box-shadow: 0 0 0 3px #9aa6c8, 0 6px 0 #0a0a14, 0 12px 14px rgba(0,0,0,.4), inset 0 3px 0 rgba(255,255,255,.35); }

/* reward tiles: lacquered frames with gold corner studs */
.rs-tile { border-color: #0a0a14; box-shadow: 0 0 0 3px #e0a21f, 0 5px 0 #0a0a14, inset 0 3px 0 rgba(255,255,255,.4); }
.rs-tile::before { content: ""; position: absolute; inset: 3px; border-radius: 7px; background: radial-gradient(circle at 6px 6px, #ffe27a 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 6px) 6px, #ffe27a 0 3px, transparent 3.5px), radial-gradient(circle at 6px calc(100% - 6px), #ffe27a 0 3px, transparent 3.5px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #ffe27a 0 3px, transparent 3.5px); pointer-events: none; }
.rs-back.win .rs-card::before { content: ""; position: absolute; left: 50%; top: 0; width: 220px; height: 220px; transform: translate(-50%, -10%); background: var(--mon) center/contain no-repeat; opacity: .16; pointer-events: none; }

/* rank chips, HUD pills, round buttons: gold rim */
.rankchip, .wallet .w { border-color: #e0a21f; }
.rbtn, .mp-b, .act, .dock .ic { box-shadow: 0 0 0 3px #e0a21f, 0 4px 0 rgba(0,0,0,.55); }
.nameplate, .sq-group, .evr { border-color: #e0a21f; }
.seal-rank .n { border-radius: 6px; }