:root{--accent: #c0924e;--bg: #0b0b0b;--ink: #fff;--ink-dim: rgba(255, 255, 255, .55)}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{overflow-x:hidden;background:#161616;color:#eee;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif}button,select,input{font:inherit}.stage-wrap{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:32px;padding:32px}#poster{position:relative;width:1080px;height:1080px;flex:0 0 auto;overflow:hidden;background:var(--bg);box-shadow:0 30px 80px #0009;transform-origin:top left}.vignette,#photoLayer,#photoShade,.grain,.floor-fade,.layer-ui{position:absolute;inset:0}.vignette{z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 30%,rgba(255,255,255,.07),transparent 45%),radial-gradient(140% 120% at 50% 55%,transparent 40%,rgba(0,0,0,.55))}#photoLayer{z-index:2;display:none;background-position:center;background-size:cover}#photoShade{z-index:3;display:none;pointer-events:none;background:linear-gradient(180deg,#00000073,#00000026 30%,#0000001a 55%,#0000009e)}.grain{z-index:4;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.floor-fade{top:auto;z-index:4;height:340px;pointer-events:none;background:linear-gradient(transparent,#00000059)}.layer-ui{z-index:5}.topbar{position:absolute;top:44px;right:0;left:0;display:flex;align-items:center;justify-content:center;gap:56px}.arrows{color:var(--ink-dim);font:38px/1 Georgia,serif;-webkit-user-select:none;user-select:none}.comp{text-align:center}.comp-name{padding-left:.34em;color:var(--ink);font-family:Antonio,Noto Sans SC,sans-serif;font-size:30px;font-weight:500;letter-spacing:.34em;text-transform:uppercase}.comp-round{margin-top:8px;padding-left:.3em;color:var(--ink-dim);font-size:19px;font-weight:400;letter-spacing:.3em}.headline{position:absolute;top:120px;right:0;left:0;color:var(--ink);font-family:Antonio,Noto Sans SC,sans-serif;font-size:236px;font-weight:700;line-height:.92;letter-spacing:.01em;text-align:center;text-transform:uppercase;white-space:nowrap}.headline span{display:inline-block}.scoreblock{position:absolute;right:0;bottom:150px;left:0;display:flex;align-items:center;justify-content:center;gap:44px}.crest{width:120px;height:120px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:18px;border:2px dashed rgba(255,255,255,.35);border-radius:50%;background:#ffffff0f center/contain no-repeat;background-origin:content-box;color:#ffffff80;font-size:15px;letter-spacing:.2em;cursor:pointer;transition:border-color .2s}.crest:hover{border-color:var(--accent)}.crest.filled{border:0;background-color:transparent}.score-nums{display:flex;align-items:center;gap:26px}.num{position:relative;min-width:110px;color:var(--ink);font-family:Antonio,sans-serif;font-size:200px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;text-align:center}.hollow-canvas{position:absolute;z-index:2;pointer-events:none}.divider{position:relative;width:4px;height:150px;background:var(--accent)}.divider:before,.divider:after{position:absolute;left:50%;width:14px;height:2px;background:var(--accent);content:"";transform:translate(-50%)}.divider:before{top:-18px}.divider:after{bottom:-18px}.statusline{position:absolute;right:0;bottom:96px;left:0;padding-left:.42em;color:var(--ink);font-family:Antonio,Noto Sans SC,sans-serif;font-size:24px;font-weight:500;letter-spacing:.42em;text-align:center;text-transform:uppercase}.footerline{position:absolute;right:0;bottom:44px;left:0;color:var(--ink-dim);font-size:19px;letter-spacing:.22em;text-align:center}[contenteditable]{outline:0;cursor:text}[contenteditable]:hover{box-shadow:0 0 0 1px #c0924e59}[contenteditable]:focus{box-shadow:0 0 0 1px var(--accent)}#photoHint{position:absolute;z-index:6;top:50%;left:50%;display:block;border:0;background:transparent;color:#fff6;text-align:center;cursor:pointer;transform:translate(-50%,-50%)}#photoHint .big,#photoHint .small{display:block;white-space:nowrap}#photoHint .big{margin-bottom:10px;font-size:22px;font-weight:500;letter-spacing:.28em}#photoHint .small{color:#ffffff47;font-size:14px;letter-spacing:.14em}#photoHint:hover{color:var(--accent)}.panel{width:320px;flex:0 0 auto;padding:24px;border:1px solid #2c2c2c;border-radius:4px;background:#1e1e1e}.panel h1{margin-bottom:4px;font-size:16px;font-weight:700;letter-spacing:.2em}.panel .sub{margin-bottom:20px;color:#888;font-size:12px;letter-spacing:.06em}.group{margin-bottom:18px}.group label,.group .label{display:block;margin-bottom:8px;color:#999;font-size:12px;letter-spacing:.18em}.btnrow{display:flex;flex-wrap:wrap;gap:8px}.btnrow.no-wrap{flex-wrap:nowrap}.top-gap{margin-top:8px}button{padding:9px 14px;border:1px solid #3a3a3a;border-radius:3px;background:#2a2a2a;color:#ddd;font-size:13px;letter-spacing:.1em;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s,filter .15s}button:hover{border-color:var(--accent);color:#fff}button.primary{border-color:var(--accent);background:var(--accent);color:#141414;font-weight:700}button.primary:hover{filter:brightness(1.1)}button:disabled{opacity:.6;cursor:wait}.btnrow button.active{border-color:var(--accent);background:#333;color:#fff}.full{width:100%}.swatches{display:flex;gap:10px}.sw{width:38px;height:38px;padding:0;border:2px solid #3a3a3a;border-radius:50%;background:var(--swatch)}.sw.active{border-color:#fff}select{padding:9px 8px;border:1px solid #3a3a3a;border-radius:3px;outline:0;background:#2a2a2a;color:#ddd;font-size:13px;letter-spacing:.05em;cursor:pointer}select:focus{border-color:var(--accent)}.sel-full{width:100%}.sel-league{flex:0 0 42%;min-width:0}.sel-team{flex:1;min-width:0}.dotrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.dot-sw{width:30px;height:30px;flex:0 0 auto;padding:0;border:2px solid #3a3a3a;border-radius:50%}.dot-sw.active{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}.dot-auto{background:linear-gradient(135deg,#fff 50%,#141414 50%)}.dot-custom{position:relative;overflow:hidden;background:conic-gradient(#f55,#fd5,#5f5,#5df,#55f,#f5d,#f55)}.dot-custom:after{position:absolute;inset:9px;border-radius:50%;background:#2a2a2a;content:""}.dot-custom input{position:absolute;z-index:1;inset:0;width:100%;opacity:0;cursor:pointer}input[type=file]{display:none}input[type=range]{width:100%;height:28px;background:transparent;accent-color:#c0924e;cursor:pointer}.tip{margin-top:6px;padding-top:14px;border-top:1px solid #2c2c2c;color:#777;font-size:12px;line-height:1.9}.tip b{color:#aaa}.mask{position:fixed;z-index:98;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:#000000b3}.mask.show{display:flex}.edit-box{width:100%;max-width:420px;max-height:86vh;overflow-y:auto;padding:22px;border:1px solid #2c2c2c;border-radius:6px;background:#1e1e1e}.edit-title{margin-bottom:16px;color:#fff;font-size:15px;font-weight:700;letter-spacing:.2em}.edit-box label{display:block;margin:12px 0 6px;color:#999;font-size:12px;letter-spacing:.18em}.edit-box input{width:100%;padding:10px 12px;border:1px solid #3a3a3a;border-radius:3px;outline:0;background:#2a2a2a;color:#eee;font-size:15px}.edit-box input:focus{border-color:var(--accent)}.edit-score-row{display:flex;gap:12px}.edit-score-row>div{flex:1}.edit-box .primary{margin-top:20px}.export-mask{z-index:99;flex-direction:column;gap:14px;background:#000000e0}#exportImg{max-width:92vw;max-height:72vh;background:#0b0b0b;box-shadow:0 20px 60px #000000b3}.export-tip{color:#bbb;font-size:13px;line-height:1.8;letter-spacing:.1em;text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:860px){.stage-wrap{flex-direction:column;align-items:center;gap:20px;padding:16px 12px}.panel{width:100%;max-width:560px}#poster{box-shadow:0 12px 36px #0000008c}}