@import "https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap";:root{--bg-dark:#0a0a0a;--bg-panel:#131313;--steel-gray:#3a3d42;--rust:#d4652a;--rust-bright:#ff7a33;--neon:#39ff14;--text:#e8e8e8;--text-dim:#8a8d93;--font-mono:"Share Tech Mono", "Courier New", Courier, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{background-color:var(--bg-dark);color:var(--text);font-family:var(--font-mono)}button{font-family:inherit}.view-root{width:100%;height:100%;position:relative}.scanlines:after{content:"";pointer-events:none;z-index:40;background:repeating-linear-gradient(#0000 0 2px,#00000024 2px 4px);position:absolute;inset:0}.loading-screen{width:100%;height:100%;color:var(--rust-bright);letter-spacing:.35em;text-transform:uppercase;text-shadow:0 0 16px #d4652ab3;justify-content:center;align-items:center;display:flex}.arena-title{text-align:center;pointer-events:none;z-index:10;position:absolute;top:24px;left:0;right:0}.arena-title h1{letter-spacing:.22em;text-transform:uppercase;color:var(--rust-bright);text-shadow:0 0 20px #d4652a99;font-size:clamp(1.4rem,4vw,2.4rem)}.arena-title p{letter-spacing:.3em;text-transform:uppercase;color:var(--text-dim);margin-top:6px;font-size:clamp(.65rem,1.5vw,.85rem)}.create-clanker-btn{z-index:50;border:2px solid var(--rust-bright);color:#ffe9dc;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;background:linear-gradient(#d4652a 0%,#8f3d12 100%);padding:16px 48px;font-size:1.05rem;transition:transform .15s,box-shadow .15s;animation:2s ease-in-out infinite clanker-pulse;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 0 18px #d4652a8c}.create-clanker-btn:hover{animation:none;transform:translate(-50%)scale(1.06);box-shadow:0 0 34px #ff7a33e6}@keyframes clanker-pulse{0%,to{box-shadow:0 0 14px #d4652a73}50%{box-shadow:0 0 30px #ff7a33d9}}.customize-root{width:100%;height:100%;display:flex}.customize-preview{flex:0 0 60%;position:relative}.preview-label{text-align:center;pointer-events:none;letter-spacing:.3em;text-transform:uppercase;color:var(--neon);text-shadow:0 0 12px #39ff1499;position:absolute;bottom:20px;left:0;right:0}.customize-panel{background:var(--bg-panel);border-left:1px solid #2a2a2a;flex-direction:column;flex:1;gap:22px;padding:28px;display:flex;overflow-y:auto;box-shadow:inset 4px 0 24px #0009}.panel-title{letter-spacing:.28em;text-transform:uppercase;color:var(--rust-bright);text-shadow:0 0 14px #d4652a8c;border-bottom:1px solid #2a2a2a;padding-bottom:14px;font-size:1.15rem}.field-label{letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;font-size:.72rem;display:block}.name-input{background:var(--bg-dark);width:100%;color:var(--text);letter-spacing:.15em;text-transform:uppercase;border:1px solid #333;padding:10px 12px;font-family:inherit;font-size:.95rem}.name-input:focus{border-color:var(--rust);outline:none;box-shadow:0 0 10px #d4652a73}.option-row{gap:8px;display:flex}.option-btn{background:var(--bg-dark);color:var(--text-dim);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:1px solid #333;flex:1;padding:10px 6px;font-size:.7rem;transition:border-color .12s,color .12s,box-shadow .12s}.option-btn:hover{color:var(--text);border-color:#555}.option-btn.selected{border-color:var(--rust-bright);color:var(--rust-bright);background:#1c120b;box-shadow:0 0 12px #d4652a66}.color-group{flex-direction:column;gap:12px;display:flex}.color-field{cursor:pointer;justify-content:space-between;align-items:center;display:flex}.color-field .field-label{margin-bottom:0}.color-input{cursor:pointer;background:0 0;border:1px solid #333;width:52px;height:32px;padding:0}.panel-actions{gap:12px;margin-top:auto;padding-top:18px;display:flex}.btn-secondary{color:var(--text-dim);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #555;flex:1;padding:14px;transition:border-color .12s,color .12s}.btn-secondary:hover{border-color:var(--text);color:var(--text)}.btn-primary{border:2px solid var(--rust-bright);color:#ffe9dc;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:linear-gradient(#d4652a 0%,#8f3d12 100%);flex:2;padding:14px;transition:transform .12s,box-shadow .12s;box-shadow:0 0 14px #d4652a80}.btn-primary:hover{transform:scale(1.03);box-shadow:0 0 26px #ff7a33d9}
