*{box-sizing:border-box}

.theme-create-battle-electric{
    margin:0;
    background:
        radial-gradient(circle at 10% 0,var(--theme-raw-rgba-231-255-0-05-0d7957),transparent 360px),
        var(--theme-bg);
    color:var(--theme-text);
    font-family:Arial,Helvetica,sans-serif;
}

.wrap{
    width:min(1060px,calc(100% - 30px));
    margin:34px auto 60px;
}

h1{
    margin:0 0 10px;
    color:var(--theme-raw-fff);
    font-size:clamp(46px,6vw,68px);
    line-height:.88;
    letter-spacing:-.045em;
    font-style:italic;
    text-transform:uppercase;
}

.lime{color:var(--theme-page-accent)}

.sub{
    max-width:780px;
    margin-bottom:24px;
    color:var(--theme-text-muted);
    line-height:1.5;
    font-weight:650;
}

.card{
    border:1px solid var(--theme-border);
    border-top:3px solid var(--theme-page-accent);
    border-radius:10px;
    background:var(--theme-surface);
    padding:22px;
    box-shadow:0 14px 30px var(--theme-raw-rgba-0-0-0-18-09884d);
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}
.full{grid-column:1/-1}

label{
    display:block;
    margin-bottom:6px;
    color:var(--theme-page-accent);
    font-size:10px;
    font-weight:950;
    letter-spacing:.035em;
}

input,
textarea{
    width:100%;
    padding:13px;
    border:1px solid var(--theme-raw-46506d);
    border-radius:5px;
    background:var(--theme-raw-0d1329);
    color:var(--theme-raw-fff);
    font:inherit;
}

input:focus,
textarea:focus{
    outline:2px solid var(--theme-page-accent);
    outline-offset:0;
    border-color:var(--theme-page-accent);
}

textarea{min-height:72px}
.file{padding:10px}

.btn{
    margin-top:20px;
    padding:15px 22px;
    border:1px solid var(--theme-page-accent);
    border-radius:6px;
    background:var(--theme-page-accent);
    color:var(--theme-ink);
    font-weight:1000;
    font-style:italic;
    cursor:pointer;
    box-shadow:4px 4px 0 var(--theme-shadow-deep);
}

.btn:hover{background:var(--theme-raw-f2ff54)}

.msg{
    padding:14px;
    margin-bottom:18px;
    border:1px solid var(--theme-page-accent);
    border-left:4px solid var(--theme-page-accent);
    border-radius:6px;
    background:var(--theme-raw-12182f);
    color:var(--theme-raw-fff);
}

.msg.err{
    border-color:var(--theme-battle-left);
}

.inline-accent-link{
    color:var(--theme-page-accent);
    font-weight:950;
}

.hint{
    color:var(--theme-raw-828ba4);
    font-size:10px;
    margin-top:5px;
}

.contender{
    position:relative;
    border:1px solid var(--theme-raw-3c4564);
    border-radius:8px;
    padding:15px;
    background:var(--theme-raw-11172e);
}

.contender:first-of-type{
    border-top:3px solid var(--theme-battle-left);
}
.contender:last-of-type{
    border-top:3px solid var(--theme-battle-right);
}

.contender h2{
    margin:0 0 14px;
    color:var(--theme-raw-fff);
    font-size:21px;
    font-style:italic;
}

.item-search-wrap{
    position:relative;
    margin-bottom:12px;
}

.item-results{
    position:absolute;
    z-index:50;
    left:0;
    right:0;
    top:100%;
    max-height:290px;
    overflow:auto;
    border:1px solid var(--theme-raw-4a5472);
    border-radius:0 0 6px 6px;
    background:var(--theme-raw-090e22);
    box-shadow:0 12px 28px var(--theme-raw-rgba-0-0-0-5-91568c);
    display:none;
}
.item-results.open{display:block}

.item-result{
    width:100%;
    display:grid;
    grid-template-columns:54px 1fr;
    gap:10px;
    align-items:center;
    padding:8px;
    border:0;
    border-bottom:1px solid var(--theme-raw-2e3652);
    background:var(--theme-raw-090e22);
    color:var(--theme-raw-fff);
    text-align:left;
    cursor:pointer;
}
.item-result:hover{background:var(--theme-raw-171d38)}

.item-result img,
.item-thumb{
    width:54px;
    height:42px;
    object-fit:cover;
    background:var(--theme-raw-202741);
}
.item-result strong{display:block}
.item-result small{
    display:block;
    margin-top:3px;
    color:var(--theme-raw-8f97af);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.picked-item{
    display:none;
    grid-template-columns:70px 1fr auto;
    gap:12px;
    align-items:center;
    margin:0 0 12px;
    padding:10px;
    border:1px solid var(--theme-page-accent);
    border-radius:6px;
    background:var(--theme-raw-171d30);
}
.picked-item.show{display:grid}
.picked-item img{
    width:70px;
    height:54px;
    object-fit:cover;
}
.picked-item strong{display:block}
.picked-item small{color:var(--theme-raw-8f97af)}
.picked-item button{
    border:1px solid var(--theme-raw-4a5470);
    border-radius:5px;
    background:var(--theme-raw-10162d);
    color:var(--theme-raw-fff);
    padding:8px;
    cursor:pointer;
}

.divider{
    grid-column:1/-1;
    border-top:1px dashed var(--theme-raw-3c4563);
    margin-top:2px;
    padding-top:14px;
    color:var(--theme-raw-8b93aa);
    font-size:11px;
}

.note{
    margin-top:18px;
    padding:12px 14px;
    border-left:3px solid var(--theme-page-accent);
    border-radius:0 6px 6px 0;
    background:var(--theme-raw-0d1329);
    color:var(--theme-raw-aeb5c8);
    font-size:11px;
    line-height:1.5;
}
.note b{color:var(--theme-raw-fff)}

@media(max-width:650px){
    .wrap{margin-top:24px}
    .grid{grid-template-columns:1fr}
    .full{grid-column:auto}
    h1{font-size:40px}
    .card{padding:14px}
}