:root {
    --bg: #071b18;
    --panel: #0e2923;
    --panel2: #12352c;
    --line: rgba(255, 255, 255, .1);
    --text: #f5fff9;
    --muted: #a9c8bc;
    --mari: #39d06e;
    --mari2: #0e8f4b;
    --matsu: #c3dc4f;
    --matsu2: #6faa2f;
    --accent: #ffe366;
    --danger: #ff7f7f;
    --shadow: 0 24px 70px rgba(0, 0, 0, .28)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: radial-gradient(circle at 50% -10%, #174a3d 0, #071b18 48%, #04100f 100%);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    min-height: 100vh
}

button,
input {
    font: inherit
}

.site-header {
    max-width: 1180px;
    margin: auto;
    padding: 34px 22px 20px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px
}

.eyebrow {
    margin: 0 0 7px;
    font-size: 12px;
    letter-spacing: .2em;
    color: #83c9aa;
    font-weight: 900
}

.adsbygoogle {
    margin: 16px 0;
    text-align: center;
}

footer {
    margin: 16px 0;
    text-align: center;
}

.site-header h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1
}

.site-header h1 span {
    color: var(--accent);
    font-style: italic;
    text-shadow: 0 4px 24px rgba(255, 227, 102, .3)
}

.subtitle {
    margin: 12px 0 0;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 900;
    color: #f1ff9b
}

.lead {
    margin: 10px 0 0;
    color: var(--muted);
    line-height: 1.7;
    max-width: 58ch
}

.player-box {
    width: min(330px, 100%);
    background: rgba(10, 35, 29, .7);
    border: 1px solid var(--line);
    padding: 14px;
    border-radius: 18px;
    backdrop-filter: blur(12px)
}

.player-box label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 7px
}

.player-box small {
    color: var(--muted);
    font-weight: 600
}

.name-row {
    display: flex;
    gap: 8px
}

.name-row input {
    min-width: 0;
    flex: 1;
    background: #061915;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    color: #fff;
    padding: 11px 12px;
    outline: none
}

.name-row input:focus {
    border-color: #70d6a3
}

.name-row button {
    border: 0;
    border-radius: 12px;
    background: #eefbf4;
    color: #063522;
    font-weight: 900;
    padding: 0 18px;
    cursor: pointer
}

main {
    max-width: 1180px;
    margin: auto;
    padding: 0 22px 24px
}

.battle-summary {
    margin: 12px 0 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    align-items: center;
    color: #d7ede4;
    font-weight: 800
}

.battle-summary>div {
    max-width: 100%;
    overflow-wrap: anywhere;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 14px
}

.difference {
    font-variant-numeric: tabular-nums;
    color: var(--accent)
}

.arena {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);
    gap: 16px;
    align-items: start
}

.side-card {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 20px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.side-card:before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px
}

.marimo-card {
    background: linear-gradient(180deg, rgba(36, 121, 72, .23), rgba(11, 36, 30, .94))
}

.marimo-card:before {
    background: linear-gradient(90deg, var(--mari2), var(--mari))
}

.matsumo-card {
    background: linear-gradient(180deg, rgba(127, 150, 45, .2), rgba(11, 36, 30, .94))
}

.matsumo-card:before {
    background: linear-gradient(90deg, var(--matsu2), var(--matsu))
}

.side-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.side-kicker {
    margin: 0;
    font-size: 11px;
    letter-spacing: .18em;
    font-weight: 900;
    color: var(--muted)
}

.side-head h2 {
    margin: 2px 0 0;
    font-size: 28px
}

.level-badge {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 12px;
    background: #061c17;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 11px;
    color: #cde1d9
}

.level-badge strong {
    font-size: 18px;
    color: #fff
}

.creature-button {
    position: relative;
    width: min(100%, 340px);
    aspect-ratio: 1;
    margin: 5px auto 4px;
    display: block;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}

.creature-button > * {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none
}

.creature-button .creature,
.creature-button .creature-photo {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .25));
    transition: transform .08s ease, filter .15s ease
}

.creature-photo {
    display: block;
    object-fit: cover;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #081613
}

.creature-button:active .creature,
.creature-button.pressed .creature,
.creature-button:active .creature-photo,
.creature-button.pressed .creature-photo {
    transform: scale(.94)
}

.creature-button:hover .creature,
.creature-button:hover .creature-photo {
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .28)) brightness(1.08)
}

.tap-hint {
    position: absolute;
    right: 7%;
    bottom: 11%;
    background: var(--accent);
    color: #392e00;
    border: 3px solid rgba(0, 0, 0, .18);
    font-size: 13px;
    font-weight: 1000;
    border-radius: 999px;
    padding: 8px 12px;
    transform: rotate(-8deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .2)
}

.power-block {
    text-align: center;
    padding: 8px 0 14px
}

.power-block span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    font-weight: 800
}

.power-block strong {
    display: block;
    white-space: nowrap;
    font-size: clamp(38px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums
}

.total-power {
    overflow-wrap: anywhere;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums
}

.total-power b {
    color: #fff;
    font-size: 17px
}

.progress-wrap {
    background: rgba(0, 0, 0, .16);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px
}

.progress-label {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    overflow-wrap: anywhere;
    justify-content: space-between;
    font-size: 12px;
    color: #c8ddd5;
    margin-bottom: 7px
}

.progress {
    height: 8px;
    border-radius: 99px;
    background: #061914;
    overflow: hidden
}

.progress i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width .2s ease
}

.marimo-card .progress i {
    background: linear-gradient(90deg, var(--mari2), var(--mari))
}

.matsumo-card .progress i {
    background: linear-gradient(90deg, var(--matsu2), var(--matsu))
}

.effect-line {
    text-align: center;
    min-height: 42px;
    margin: 10px 0 4px;
    color: #dcece6;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.effect-pill {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--line)
}

.effect-pill.good {
    color: #c7ffdc
}

.effect-pill.bad {
    color: #ffc6c6
}

.ranking {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 15px
}

.ranking h3 {
    margin: 0 0 10px;
    font-size: 15px
}

.ranking ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px
}

.ranking li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    background: rgba(255, 255, 255, .045);
    padding: 9px 10px;
    border-radius: 11px;
    font-size: 13px
}

.ranking .rank {
    font-weight: 1000;
    color: #bdd2ca
}

.ranking .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800
}

.ranking .score {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
    color: #d7ebe3
}

.ranking li:nth-child(1) .rank {
    color: #ffe36c
}

.ranking li:nth-child(2) .rank {
    color: #dbe8ee
}

.ranking li:nth-child(3) .rank {
    color: #d39b62
}

.ranking li.empty {
    display: block;
    color: #819c91;
    text-align: center;
    padding: 18px
}

.my-contribution {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 11px 10px 0;
    border-top: 1px solid var(--line);
    font-size: 13px;
    font-weight: 800;
}

.my-contribution strong {
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    overflow-wrap: anywhere;
    color: #d7ebe3;
    font-variant-numeric: tabular-nums;
}

.vs-mark {
    position: sticky;
    top: 35vh;
    align-self: start;
    margin-top: 210px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #071a16;
    border: 4px solid #f9e56d;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .35), 0 0 0 8px rgba(249, 229, 109, .08);
    transform: rotate(-5deg)
}

.vs-mark span {
    font-size: 30px;
    font-weight: 1000;
    color: #ffe76d;
    font-style: italic;
    line-height: 1
}

.vs-mark small {
    font-size: 8px;
    letter-spacing: .18em;
    color: #fff
}

.rules-card,
.shop-section,
.notice {
    margin-top: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(12, 41, 34, .78);
    padding: 20px
}

.rules-card h2,
.notice h2 {
    margin: 0 0 10px;
    font-size: 20px
}

.rules-card p,
.notice p {
    margin: 7px 0;
    color: #c4d9d1;
    line-height: 1.8
}

.rules-card strong {
    color: #fff
}

.section-title {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    margin-bottom: 15px
}

.section-title h2 {
    margin: 0;
    font-size: 26px
}

.section-title>p {
    margin: 0;
    max-width: 550px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6
}

.shop-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px
}

.shop-side {
    background: rgba(0, 0, 0, .14);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 14px
}

.shop-side h3 {
    margin: 0 0 10px
}

.shop-list {
    display: grid;
    gap: 9px
}

.shop-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(96px, .6fr);
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px
}

.shop-item h4 {
    margin: 0 0 4px;
    font-size: 14px
}

.shop-item p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45
}

.shop-item .shop-effect-status {
    margin-top: 5px;
    color: #e6fff0;
    font-weight: 800
}

.shop-item button {
    border: 0;
    border-radius: 11px;
    padding: 9px 11px;
    min-width: 96px;
    color: #092619;
    background: #f2fff8;
    font-weight: 1000;
    cursor: pointer
}

.shop-item button:disabled {
    opacity: .38;
    cursor: not-allowed
}

.shop-item .cost {
    overflow-wrap: anywhere;
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #426154;
    margin-top: 2px
}

.purchase-status {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid #74c99a;
    border-radius: 12px;
    background: rgba(59, 166, 107, .16);
    color: #e6fff0;
    line-height: 1.5
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    background: #f7fff9;
    color: #0a2b20;
    border-radius: 999px;
    padding: 11px 17px;
    font-weight: 900;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: .22s;
    z-index: 20
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0)
}

.gain-float {
    position: fixed;
    z-index: 30;
    font-weight: 1000;
    font-size: 24px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    pointer-events: none;
    animation: gainUp .7s ease-out forwards
}

.gain-float.levelup {
    font-size: 30px;
    color: #ffe86d
}

@keyframes gainUp {
    0% {
        opacity: 0;
        transform: translate(-50%, -20%) scale(.8)
    }

    20% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -140%) scale(1.18)
    }
}

@media(max-width:760px) {
    .site-header {
        align-items: stretch;
        flex-direction: column;
        padding-top: 24px
    }

    .site-header h1 {
        font-size: 42px
    }

    .player-box {
        width: 100%
    }

    .arena {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .vs-mark {
        position: relative;
        top: auto;
        margin: -3px auto;
        order: 2;
        width: 68px;
        height: 68px;
        transform: rotate(-5deg)
    }

    .marimo-card {
        order: 1
    }

    .matsumo-card {
        order: 3
    }

    .creature-button {
        width: min(84vw, 320px)
    }

    .shop-columns {
        grid-template-columns: 1fr
    }

    .section-title {
        display: block
    }

    .section-title>p {
        margin-top: 8px
    }

    .battle-summary {
        font-size: 12px;
        flex-wrap: wrap
    }

    .power-block strong {
        font-size: 52px
    }

    .side-card {
        padding: 17px
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        transition-duration: .001ms !important
    }
}

.name-row input:disabled {
    opacity: .72;
    cursor: not-allowed
}

.name-row button:disabled {
    opacity: .55;
    cursor: not-allowed
}