/* 3K REBORN website — same ink / bronze-gold / cinnabar theme as the game UI */
:root { --ink:#140b06; --ink2:#22140c; --paper:#f3ead2; --paper2:#d9ccae; --gold:#e8c46a; --bronze:#b8893a; --bronze2:#7a5a26; --cinnabar:#d9433b; --cinnabar2:#9e2b25; --ok:#7bd88f; --bad:#ff6a4d;
  --panel:linear-gradient(180deg, rgba(47,28,17,.96), rgba(20,11,6,.97)); --font:Tahoma,"Noto Sans Thai","Leelawadee UI",sans-serif; --title:"Noto Serif Thai",Georgia,serif; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--ink); color:var(--paper); font:14px/1.5 var(--font); }
body { background:radial-gradient(ellipse at 50% 20%, #4a2a16 0%, #20120a 55%, #0b0503 100%) fixed; }
a { color:var(--gold); }
.btn { display:inline-block; cursor:pointer; border:1px solid var(--bronze); background:linear-gradient(180deg,#5a3a1e,#331f10); color:var(--paper); padding:7px 16px; border-radius:3px; font:inherit; text-decoration:none; box-shadow:inset 0 1px 0 rgba(232,196,106,.25); }
.btn:hover { border-color:var(--gold); } .btn:disabled { opacity:.45; cursor:default; }
.btn.gold { background:linear-gradient(180deg,#f0d48a,#b8893a); color:#2a160d; border-color:#fff0c0; font-weight:bold; } .btn.red { background:linear-gradient(180deg,var(--cinnabar),var(--cinnabar2)); }
.btn.sm { padding:3px 10px; font-size:13px; }
input, select { font:inherit; background:#0d0704; color:var(--paper); border:1px solid var(--bronze2); border-radius:3px; padding:7px 9px; width:100%; }
input:focus, select:focus { outline:none; border-color:var(--gold); }
.muted { color:var(--paper2); opacity:.8; } .gold { color:var(--gold); } .ok { color:var(--ok); } .bad { color:var(--bad); }
.seal { display:inline-block; background:var(--cinnabar); color:#fff4e0; font-weight:bold; padding:0 7px; border-radius:2px; font-size:12px; }
.badge { display:inline-block; border:1px solid var(--bronze); color:var(--gold); padding:0 7px; border-radius:9px; font-size:12px; }
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px 16px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px); pointer-events:none; }
.logo { font:900 clamp(40px,8vw,84px)/1 var(--title); letter-spacing:.12em; color:var(--gold); text-shadow:0 3px 0 #5a3a1e, 0 0 30px rgba(232,196,106,.35); }
.logo small { display:block; font:clamp(16px,3vw,24px) var(--title); letter-spacing:.3em; color:var(--paper); margin-top:12px; }
.tagline { color:var(--paper2); max-width:560px; margin:18px auto 0; }
.cta { display:flex; gap:18px; margin-top:40px; flex-wrap:wrap; justify-content:center; }
.cta .btn { font-size:20px; padding:14px 40px; min-width:230px; letter-spacing:.05em; }
.small-link { margin-top:22px; font-size:13px; }
.portraits { display:flex; gap:26px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.portraits figure { margin:0; text-align:center; } .portraits img { width:110px; height:110px; object-fit:cover; border-radius:50%; border:2px solid var(--bronze); box-shadow:0 0 24px rgba(232,196,106,.18); }
.portraits figcaption { margin-top:6px; color:var(--paper2); font-size:13px; }
footer { text-align:center; color:var(--paper2); opacity:.6; font-size:12px; padding:16px; }
.wrap { max-width:1000px; margin:0 auto; padding:20px 16px 40px; }
.top { display:flex; align-items:center; gap:12px; margin-bottom:16px; } .top .logo { font-size:30px; text-align:left; } .top .right { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.card { background:var(--panel); border:1px solid var(--bronze); border-radius:6px; padding:20px 22px; box-shadow:0 0 0 4px rgba(20,11,6,.9), 0 0 0 5px var(--bronze2), 0 20px 50px rgba(0,0,0,.5); margin-bottom:18px; }
.card.narrow { max-width:420px; margin:40px auto; } .card h2 { margin:0 0 12px; font:bold 19px var(--title); color:var(--gold); }
.card label { display:block; margin:10px 0 4px; color:var(--paper2); font-size:13px; }
.actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.err { color:var(--bad); min-height:18px; margin-top:8px; }
.pin { display:flex; gap:8px; } .pin input { width:46px; text-align:center; font-size:22px; }
.chars { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; } @media (max-width:760px) { .chars { grid-template-columns:repeat(2,1fr); } }
.slot { border:1px solid var(--bronze2); border-radius:4px; padding:10px; text-align:center; background:rgba(13,7,4,.6); cursor:pointer; min-height:170px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.slot.sel { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 18px rgba(232,196,106,.25); } .slot.empty { justify-content:center; color:var(--paper2); cursor:default; }
.slot img { width:72px; height:72px; object-fit:cover; border-radius:50%; border:2px solid var(--bronze); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--bronze2); margin-bottom:14px; flex-wrap:wrap; } .tabs button { border:none; background:none; color:var(--paper2); padding:7px 14px; cursor:pointer; font:inherit; border-bottom:2px solid transparent; }
.tabs button.on { color:var(--gold); border-bottom-color:var(--cinnabar); }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } @media (max-width:760px) { .grid { grid-template-columns:repeat(2,1fr); } }
.prod { position:relative; border:1px solid var(--bronze2); border-radius:4px; padding:12px; text-align:center; background:rgba(13,7,4,.6); }
.prod .seal { position:absolute; top:-9px; right:-6px; }
table { width:100%; border-collapse:collapse; } td, th { padding:6px 8px; border-bottom:1px solid rgba(184,137,58,.2); text-align:left; font-size:13px; } th { color:var(--gold); font-weight:normal; }
.colors { display:flex; gap:8px; flex-wrap:wrap; } .colors button { width:44px; height:44px; border-radius:50%; border:2px solid var(--bronze2); cursor:pointer; } .colors button.sel { border-color:#fff; box-shadow:0 0 0 2px var(--gold); }
.note { padding:8px 10px; border:1px dashed var(--bronze); border-radius:3px; color:var(--paper2); font-size:13px; margin-bottom:10px; }
.icon { vertical-align:middle; }