:root{--cream: #f5efe0;--ink: #1a1208;--gold: #c9a84c}*{margin:0;padding:0;box-sizing:border-box}body{background-color:#1a1208;background-image:repeating-linear-gradient(45deg,rgba(201,168,76,.04) 0px,rgba(201,168,76,.04) 1px,transparent 1px,transparent 10px),repeating-linear-gradient(-45deg,rgba(201,168,76,.04) 0px,rgba(201,168,76,.04) 1px,transparent 1px,transparent 10px);min-height:100vh;font-family:Crimson Text,serif;color:var(--cream);padding:40px 20px}.page{max-width:1100px;margin:0 auto;min-height:60vh;display:flex;flex-direction:column;align-items:center}header{text-align:center;margin-bottom:48px}.ornament{color:var(--gold);font-size:1.2rem;letter-spacing:.4em;text-transform:uppercase;font-family:Crimson Text,serif}h1{font-family:Playfair Display,serif;font-size:clamp(2.8rem,6vw,4.5rem);font-weight:700;line-height:1;color:var(--cream);margin:8px 0 4px;text-shadow:0 2px 20px rgba(0,0,0,.5)}.subtitle{font-style:italic;font-size:1.2rem;color:#f5efe099;margin-bottom:6px}.gold-rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:16px auto}.instructions{font-style:italic;color:#f5efe0b3;font-size:1.05rem;max-width:480px;margin:0 auto}.player-setup{max-width:500px;margin:0 auto 48px;background:#f5efe00a;border:1px solid rgba(201,168,76,.25);border-radius:2px;padding:28px 32px}.player-setup h2{font-family:Playfair Display,serif;font-size:1.3rem;color:var(--gold);margin-bottom:16px;letter-spacing:.05em}.name-row{display:flex;gap:10px;margin-bottom:10px}.name-row input{flex:1;background:#f5efe014;border:1px solid rgba(201,168,76,.3);border-radius:2px;color:var(--cream);font-family:Crimson Text,serif;font-size:1.1rem;padding:10px 14px;outline:none;transition:border-color .2s}.name-row input:focus{border-color:var(--gold)}.name-row input::placeholder{color:#f5efe04d}.btn-primary{background:transparent;border:1px solid rgba(201,168,76,.5);color:var(--gold);font-family:Crimson Text,serif;font-size:1.1rem;padding:12px 28px;border-radius:2px;cursor:pointer;transition:all .2s;width:100%}.btn-primary:hover:not(:disabled){background:#c9a84c26}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.error-msg{color:#e74c3c;font-size:.95rem;margin-top:8px}@keyframes fadeIn{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.characters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:1100px;margin:0 auto 40px}.character-card{border:2px solid rgba(201,168,76,.2);border-radius:2px;overflow:hidden;transition:transform .25s,box-shadow .25s;position:relative}.character-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px #00000080}.character-card.card-ranked{box-shadow:0 0 0 2px var(--card-color)}.card-header{padding:22px 24px 18px;position:relative}.character-icon{font-size:2.5rem;margin-bottom:8px;display:block}.character-name{font-family:Playfair Display,serif;font-size:1.5rem;font-weight:700;display:block}.card-body{background:#1a1208e6;padding:16px 24px 20px}.costume-hint{font-size:.95rem;color:#f5efe0a6;font-style:italic;margin-bottom:14px;line-height:1.5}.rank-badges{display:flex;gap:8px;flex-wrap:wrap}.rank-badge{background:transparent;border:1px solid rgba(245,239,224,.3);color:var(--cream);font-family:Crimson Text,serif;font-size:.9rem;padding:6px 12px;border-radius:2px;cursor:pointer;transition:all .2s}.rank-badge:hover{border-color:var(--gold);background:#c9a84c1a}.rank-badge.selected{border-color:var(--gold);background:#c9a84c33;color:var(--gold)}footer{text-align:center;color:#f5efe040;font-style:italic;font-size:.95rem;padding:40px 20px 20px}a{color:var(--gold)}@media (max-width: 600px){body{padding:20px 12px}.characters-grid{grid-template-columns:1fr;gap:16px}.ornament{font-size:1rem;letter-spacing:.2em}h1{font-size:clamp(2rem,8vw,3rem)}.player-setup{padding:20px}.rank-badges{flex-direction:column}.rank-badge{width:100%}}