/* ブキ一覧 */
.weapon-set {
    background-color: #292e34;
    display: grid;
    place-items: center;
    grid-template-columns: 3.25rem 2.25rem 2.25rem 1fr;
    grid-template-rows: 3rem;
    block-size: 3rem;
    border-radius: 0.25rem;
    overflow: hidden;
    margin-block-start: 0.25rem;
}

.weapon-set .main {
    padding-inline-start: 0.25rem;
    line-height: 1rem;
}
.weapon-set .sub,
.weapon-set .special {
    inline-size: 2rem;
    block-size: 2rem;
    padding-inline-start: 0.25rem;
    border-radius: 0.25rem;
    line-height: 1rem;
    inline-size: fit-content;
}
.weapon-set .name {
    inline-size: 100%;
    block-size: 100%;
    line-height: 1rem;
    padding-inline-start: 0.5rem;
}
.weapon-set .name span {
    font-weight: bold;
    line-height: 1rem;
}

.weapon-set .main img {
    inline-size: 3rem;
    block-size: 3rem;
}
.weapon-set .sub span,
.weapon-set .special span {
    background-color: #161616;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 0.25rem;
    overflow: hidden;
    display: inline-block;
    line-height: 1rem;
}
.weapon-set .sub img,
.weapon-set .special img {
    inline-size: 2rem;
    block-size: 2rem;
    line-height: 1rem;
}

/* 隠す */
:has(#main-view:not(:checked)) .weapon-set .main img,
:has(#main-view:not(:checked)) .weapon-set .name span {
    visibility: hidden;
}
:has(#sub-view:not(:checked)) .weapon-set .sub img {
    visibility: hidden;
}
:has(#special-view:not(:checked)) .weapon-set .special img {
    visibility: hidden;
}

/* ブキを押した時の表示 */
#description {
    background-color: #292e34;
    filter: drop-shadow(0 0 0.5rem #000);
    opacity: 0.8;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 6.5em 6.5em;
    border-radius: 0.5rem;
    overflow: hidden;
    position: fixed;
    cursor: default;
    --desc-size: min(calc(var(--size) - 4rem), calc(100dvmin - 4rem));
    inline-size: var(--desc-size);
    block-size: var(--desc-size);
    left: calc(50dvi - var(--desc-size) / 2);
    top: calc(50dvb - var(--desc-size) / 2);
    font-size: calc(var(--desc-size) / 25.1);
}
#description .main {
    color: #FFF;
    padding-block-start: 0.5em;
    padding-inline: 0.5em;
}
#description .sub {
    background-color: #161616;
    color: #FFF;
    margin-inline: 0.5em;
    margin-block-end: 0.5em;
    border-radius: 0.5rem;
    line-height: 1em;
    overflow: hidden;
}
#description .special {
    background-color: #161616;
    color: #FFF;
    margin-inline: 0.5em;
    margin-block-end: 0.5em;
    border-radius: 0.5rem;
    line-height: 1em;
    overflow: hidden;
}
#description .main p {
    padding-inline: 0.5em;
}
#description .sub p,
#description .special p {
    padding-inline: 0.5em;
}

#description .main img {
    inline-size: 5em;
    block-size: 5em;
}
#description .sub img,
#description .special img {
    inline-size: 2em;
    block-size: 2em;
}

#description h2 {
    color: #FFF;
    font-weight: bold;
    inline-size: fit-content;
    display: inline-block;
}
#description .main h2 {
    inline-size: calc(var(--desc-size) - 2em - 5em);
    block-size: 5em;
    line-height: 5em;
    padding-inline-start: 0.25rem;
}
#description .sub h2,
#description .special h2 {
    inline-size: calc(var(--desc-size) - 2em - 2em);
    block-size: 2em;
    line-height: 2em;
}

mark {
    background-color: transparent;
    color: #F93;
    vertical-align: baseline;
    padding: 0;
    margin: 0;
    border-style: none;
}

/* 見えないようにする */
.none {
    display: none !important;
}

/* フィルター */
#input {
    background-color: #161616;
    border-radius: 0.25rem;
    overflow: hidden;
}

.type-filter {
    background-color: #292e34;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(1, calc((var(--size) - 1rem) / 11));
    place-items: center;
    line-height: 1rem;
}
.sub-filter {
    background-color: #161616;
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: repeat(1, calc((var(--size) - 1rem) / 14));
    place-items: center;
    line-height: 1rem;
}
.special-filter {
    background-color: #161616;
    display: grid;
    grid-template-columns: repeat(19, 1fr);
    grid-template-rows: repeat(1, calc((var(--size) - 1rem) / 19));
    place-items: center;
    line-height: 1rem;
}

#word {
    inline-size: 100%;
    block-size: 2rem;
    line-height: 2rem;
    padding: 0;
    background-color: #292e34;
}
#search {
    inline-size: 100%;
    block-size: 100%;
    line-height: 1rem;
    background-color: transparent;
    color: #CCC;
    padding-inline: 0.5rem;
    padding-block: 0;
    border: none 0 #000;
}

#clear {
    display: grid;
    grid-template-columns: 3.25rem 2.25rem 2.25rem 1fr;
    grid-template-rows: 2rem;
}
#clear label {
    background-color: #161616;
    text-align: center;
    block-size: 100%;
    inline-size: 100%;
    padding-inline-start: 0.25rem;
    opacity: 0.2;
    font-weight: bold;
}
#clear .check {
    background-color: #999;
    color: #161616;
    font-weight: bold;
    border-radius: 0.125rem;
}
#clear #main-view + .check {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.8rem;
}
#clear #sub-view + .check,
#clear #special-view + .check {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.8rem;
}
#clear .radio {
    color: #999;
    font-weight: bold;
    font-size: 0.8rem;
    /*
    border: solid 0.125em #999;
    inline-size: 2em;
    block-size: 2em;
    line-height: 1.75em;
    border-radius: 0.125rem;
    */
}

label:has(input[name="type"]) {
    background-color: #292e34;
}

label:has(input[name="sub"]), label:has(input[name="special"]) {
    background-color: #161616;
}

label {
    cursor: pointer;
    overflow: hidden;
    color: #888;
    opacity: 0.2;
    inline-size: 100%;
    block-size: 100%;
    display: grid;
    place-items: center;
    user-select: none;
}
label:has(:checked) {
    opacity: 1 !important;
}

label img {
    inline-size: 100%;
    block-size: 100%;
}
label:has(:checked) img {
    inline-size: 100%;
    block-size: auto;
}

input[type="radio"] {
    display: none;
}
input[type="checkbox"] {
    display: none;
}

#title {
    display: grid;
    grid-template-columns: 12.5rem 1fr;
    grid-template-rows: 3rem;
}
h1 {
    inline-size: 12.5rem;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.5rem;
}
.yellow {
    color: #FF0;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1em;
}
header p {
    color: #99C;
    font-size: 0.6rem;
    line-height: 3rem;
    text-align: right;
}

header h2,
main h2 {
    color: #999;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1rem;
}

header,
main,
footer {
    inline-size: var(--size);
    padding-inline: 0.25rem;
    margin-inline: auto;
}
main {
    padding-block-end: 0.25rem;
}
footer {
    color: #666;
    text-align: right;
    font-size: 0.6rem;
}
.ace {
    color: #C00;
}

.desc {
    cursor: pointer;
}
.desc header,
.desc main {
    filter: blur(0.4rem);
    opacity: 0.6;
}

button {
    color: #CCC;
    background-color: transparent;
    border-style: none;
    cursor: pointer;
    text-align: left;
}

body {
    background-color: #000;
    color: #CCC;
}

html {
    scrollbar-color: #666 transparent;
    text-size-adjust: 100%;
    font-size: calc(var(--size) / 25.1);
    --size: min(calc(100svi), 7.5in);
}

* {
    padding: 0;
    margin: 0;
    line-height: 2em;
    font-size: 1em;
    font-weight: normal;
    font-family: sans-serif;
    vertical-align: middle;
    word-spacing: 0.125rem;
    word-break: break-all;
    letter-spacing: 0;
    box-sizing: border-box;
    touch-action: manipulation;
    text-decoration: none;
    outline: none;
}