/* サイト全体の雰囲気に合わせたカスタム */

.determinant-console {
    font-size: 1.2em;
    margin: 1.5em 0 1.5em 0;
    color: #eaffee;
    background: rgba(44, 80, 28, 0.85);
    border-radius: 10px;
    padding: 1.2em 1.5em;
    border: 2px solid #7ecb8f;
    min-height: 3em;
    text-align: center;
    word-break: break-all;
}

.btn {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin: 1.5em 0 1em 0;
}
.btn1, .btn2 {
    background: #7ecb8f;
    color: #234d2d;
    border: none;
    border-radius: 8px;
    padding: 0.7em 2.2em;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 8px #0006;
    transition: background 0.2s, color 0.2s;
}
.btn1:hover, .btn2:hover:enabled {
    background: #fff7b2;
    color: #234d2d;
}
.btn2:disabled {
    background: #b7e6c7;
    color: #888;
    cursor: not-allowed;
}

.kaitouran {
    background: rgba(44, 80, 28, 0.85);
    border-radius: 10px;
    border: 2px solid #7ecb8f;
    margin: 1.5em auto 1em auto;
    max-width: 420px;
    padding: 1em 1.5em;
    color: #eaffee;
    box-shadow: 0 1px 8px #0006;
}
.kaitouran p {
    margin: 0 0 0.5em 0;
    font-weight: bold;
    color: #eaffee;
}
.kaitouran input.txt {
    font-size: 1.1em;
    padding: 0.3em 0.7em;
    border-radius: 6px;
    border: 1.5px solid #7ecb8f;
    background: #232323;
    color: #eaffee;
    margin-right: 0.5em;
    width: 6em;
}

.maru {
    display: inline-block;
    color: #7ecb8f;
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 0.5em;
}
.batu {
    display: inline-block;
    color: #eb5757;
    font-size: 1.2em;
    font-weight: bold;
    margin-left: 0.5em;
}

.determinant-stats {
    margin: 2em 0 1em 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    justify-content: center;
    color: #eaffee;
    font-size: 1em;
}
.determinant-stats p {
    margin: 0;
}

.determinant-range {
    margin: 2em 0 1em 0;
    text-align: center;
    color: #eaffee;
}
.determinant-range p {
    margin-bottom: 0.7em;
    font-weight: bold;
}
.determinant-range label {
    margin: 0 1.2em 0 0.5em;
    font-size: 1em;
    cursor: pointer;
}
.determinant-range button {
    background: #7ecb8f;
    color: #234d2d;
    border: none;
    border-radius: 8px;
    padding: 0.4em 1.2em;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    margin: 0 0.5em 0.7em 0.5em;
    transition: background 0.2s, color 0.2s;
}
.determinant-range button:hover {
    background: #fff7b2;
    color: #234d2d;
}

@media screen and (max-width: 680px) {
    .determinant-console {
        font-size: 1em;
        padding: 0.7em 0.5em;
    }
    .kaitouran {
        padding: 0.7em 0.5em;
        max-width: 98vw;
    }
    .determinant-stats {
        gap: 8px 12px;
        font-size: 0.95em;
    }
    .determinant-range label {
        font-size: 0.95em;
    }
}