.pmt-app {
    --pmt-blue: #1769aa;
    --pmt-dark: #17324a;
    --pmt-red: #c93434;
    max-width: 980px;
    margin: 0 auto 48px;
    color: #17212b;
}

.pmt-app button,
.pmt-app a { font: inherit; }

.pmt-hero {
    margin: 8px 0 18px;
    padding: clamp(22px, 5vw, 42px);
    border-radius: 22px;
    background: linear-gradient(135deg, #e5f4ff, #fff8c9);
    text-align: center;
}

.pmt-hero h1 { margin: 4px 0 8px; font-size: clamp(2rem, 7vw, 3.6rem); }
.pmt-hero > p { margin: 8px auto; }
.pmt-kicker { margin: 0; color: #27658f; font-size: .9rem; font-weight: 800; letter-spacing: .06em; }
.pmt-player { display: table; padding: 7px 14px; border-radius: 999px; background: #fff; font-weight: 800; }
.pmt-hero > a,
.pmt-version { display: block; width: fit-content; margin: 8px auto 0; }

.pmt-rules,
.pmt-lobby,
.pmt-cta {
    margin: 18px 0;
    padding: clamp(18px, 4vw, 28px);
    border: 1px solid #c9d7e3;
    border-radius: 18px;
    background: #fff;
}

.pmt-rules h2 {
    display: inline;
    background: linear-gradient(transparent 63%, #ffe36e 63%);
    font-size: 1.25rem;
}
.pmt-rules ul { margin: 15px 0 0; padding-left: 1.4em; }
.pmt-rules li + li { margin-top: 7px; }

.pmt-section-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.pmt-section-head h2 { margin: 3px 0 0; }
.pmt-small-button { padding: 7px 12px; border: 1px solid #7b94aa; border-radius: 9px; background: #fff; cursor: pointer; }

.pmt-decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pmt-deck {
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border: 2px solid #b7c8d6;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.pmt-deck:hover,
.pmt-deck.is-selected { border-color: var(--pmt-blue); background: #eef8ff; }
.pmt-deck strong { font-size: 1.12rem; }
.pmt-deck-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.pmt-chip { padding: 4px 9px; border-radius: 999px; background: #edf1f5; color: #415568; font-size: .86rem; font-weight: 700; }
.pmt-chip.is-rank { background: #fff1a9; color: #624b00; }

.pmt-preview { margin-top: 18px; padding: 18px; border: 2px solid #65a8da; border-radius: 15px; background: #f4faff; }
.pmt-preview h2 { margin: 3px 0 5px; }
.pmt-preview-ranking { margin: 14px 0; }
.pmt-challenge-banner { margin: 16px 0; padding: 13px 15px; border: 2px solid #e1a337; border-radius: 12px; background: #fff8dc; font-weight: 800; }

.pmt-primary,
.pmt-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 12px 18px;
    border-radius: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.pmt-primary { border: 2px solid var(--pmt-blue); background: var(--pmt-blue); color: #fff; }
.pmt-secondary { border: 2px solid #58728a; background: #fff; color: #29465f; }

.pmt-lobby,
.pmt-stage,
.pmt-result { scroll-margin-top: calc(96px + env(safe-area-inset-top, 0px)); }
.pmt-stage { position: relative; max-width: 960px; margin: 18px auto; }
.pmt-lobby[hidden],
.pmt-stage[hidden],
.pmt-result[hidden] { display: none; }
.pmt-countdown { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / 95%); }
.pmt-countdown[hidden] { display: none; }
.pmt-countdown strong { color: var(--pmt-blue); font-size: clamp(3.5rem, 16vw, 8rem); letter-spacing: .08em; animation: pmt-pop .35s ease-out both; }
.pmt-countdown.is-go strong { color: var(--pmt-red); }
.pmt-stage.is-counting .pmt-board { visibility: hidden; }

.pmt-game-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; padding: 12px 16px; border-radius: 12px; background: #eaf4ff; }
.pmt-game-head div { display: grid; gap: 3px; }
#pmt-timer { color: #bd2b2b; font-size: 1.45rem; white-space: nowrap; }
.pmt-message { min-height: 1.8em; margin: 10px 0; text-align: center; font-weight: 800; }
.pmt-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.pmt-board[hidden] { display: none; }
.pmt-column { display: grid; grid-auto-rows: minmax(74px, 1fr); gap: 10px; }
.pmt-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 74px;
    padding: 10px;
    overflow-wrap: anywhere;
    border: 2px solid #8ba4bc;
    border-radius: 12px;
    background: #fff;
    color: #17212b;
    font-weight: 700;
    white-space: pre-wrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.pmt-card * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.pmt-card mjx-container,
.pmt-card mjx-container *,
.pmt-card svg,
.pmt-card svg * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.pmt-card.is-selected { border-color: #1677c8; background: #e6f4ff; transform: translateY(-1px); }
.pmt-card.is-wrong { border-color: #d73535; background: #ffe6e6; animation: pmt-shake .22s linear 1; }
.pmt-card.is-matched { visibility: hidden; pointer-events: none; }
.pmt-card img { max-width: 100%; max-height: 150px; object-fit: contain; }
.pmt-math { font-size: 1.12em; }
.pmt-extra-image { margin-top: 6px; }

.pmt-result { margin-top: 18px; padding: 18px; border: 2px solid #5a9bd5; border-radius: 14px; background: #f8fcff; }
.pmt-result h2,
.pmt-current-result,
.pmt-challenge-result { text-align: center; }
.pmt-current-result { color: #b22121; font-size: 1.4rem; font-weight: 800; }
.pmt-personal-best { margin: 12px auto 18px; padding: 12px 16px; border-radius: 11px; background: #e8f7e8; color: #176d37; font-size: 1.08rem; font-weight: 900; text-align: center; }
.pmt-challenge-result { padding: 10px; border-radius: 9px; background: #fff4bd; font-weight: 800; }
.pmt-chart-note { color: #52606d; font-size: .9rem; text-align: center; }
.pmt-record-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pmt-record-grid > section { padding: 14px; border-radius: 10px; background: #fff; box-shadow: 0 1px 5px rgb(0 0 0 / 10%); }
.pmt-time-chart { display: grid; gap: 11px; }
.pmt-time-row { display: grid; gap: 4px; }
.pmt-time-label,
.pmt-time-empty { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pmt-time-track { height: 13px; overflow: hidden; border-radius: 999px; background: #e5edf4; }
.pmt-time-bar { display: block; height: 100%; border-radius: inherit; background: #6b9dcc; }
.pmt-time-row.is-current .pmt-time-bar { background: #e05243; }
.pmt-time-row.is-current .pmt-time-label { color: #b22121; font-weight: 800; }
.pmt-time-empty { color: #667; font-size: .92rem; }
.pmt-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.pmt-result-actions[hidden] { display: none; }
.pmt-rank-row { display: grid; gap: 3px; padding: 9px 0; border-bottom: 1px solid #d8e4ef; }
.pmt-rank-row span { color: #40556a; font-size: .94rem; }
.pmt-notice { text-align: center; font-weight: 800; }
.pmt-cta { text-align: center; background: #fffbea; }

@media (hover: hover) and (pointer: fine) {
    .pmt-card:hover:not(.is-selected) { box-shadow: 0 2px 7px rgb(23 62 94 / 18%); transform: translateY(-1px); }
}
@keyframes pmt-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes pmt-pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 640px) {
    .pmt-decks,
    .pmt-record-grid { grid-template-columns: 1fr; }
    .pmt-board { gap: 8px; }
    .pmt-column { gap: 7px; grid-auto-rows: minmax(68px, 1fr); }
    .pmt-card { min-height: 68px; padding: 7px 5px; font-size: .92rem; }
    .pmt-game-head { align-items: flex-start; }
    .pmt-result-actions { display: grid; }
    .pmt-result-actions > * { width: 100%; }
}