.game-coin-page {
    min-height: 100vh;
    padding: 70px 0 100px;
    background:
        radial-gradient(circle at 10% 15%, rgba(239, 35, 60, .1), transparent 28%),
        radial-gradient(circle at 90% 30%, rgba(255, 122, 24, .12), transparent 30%),
        #f4f6f9;
    color: #111827;
}

.game-coin-wrap {
    width: min(1160px, calc(100% - 28px));
    margin: 0 auto;
}

.game-coin-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 2px solid #111827;
    border-radius: 12px;
    background: #fff;
    color: #111827;
    font-weight: 800;
}

.game-coin-alert--success i { color: #16a34a; }
.game-coin-alert--danger i { color: #ef233c; }

.game-coin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding: 28px;
    border: 2px solid #111827;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .11);
}

.game-coin-eyebrow,
.game-coin-card__head span,
.game-coin-history__head span {
    color: #ef233c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .11em;
}

.game-coin-hero h1,
.game-coin-card h2,
.game-coin-history h2 {
    margin: 6px 0 8px;
    color: #111827;
    font-weight: 900;
}

.game-coin-hero p {
    max-width: 680px;
    margin: 0;
    color: #4b5563;
}

.game-coin-rate {
    flex: 0 0 auto;
    min-width: 240px;
    padding: 17px 20px;
    border: 2px solid #111827;
    border-radius: 14px;
    background: linear-gradient(135deg, #ef233c, #ff7a18);
    color: #fff;
    text-align: right;
}

.game-coin-rate span,
.game-coin-rate strong,
.game-coin-rate small {
    display: block;
}

.game-coin-rate span,
.game-coin-rate small {
    font-weight: 800;
}

.game-coin-rate strong {
    margin: 3px 0;
    font-size: 22px;
}

.game-coin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
    margin-bottom: 20px;
}

.game-coin-card,
.game-coin-side > div,
.game-coin-history {
    border: 2px solid #111827;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .11);
}

.game-coin-card {
    position: relative;
    padding: 26px;
    overflow: hidden;
}

.game-coin-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(90deg, #ef233c, #ff7a18);
    content: "";
}

.game-coin-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.game-coin-card__head h2 { margin-bottom: 0; }

.game-coin-card__icon {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border: 2px solid #111827;
    border-radius: 14px;
    background: #fff2e8;
    color: #ef233c;
    font-size: 23px;
}

.game-coin-form {
    display: grid;
    gap: 14px;
}

.game-coin-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.game-coin-form label > span:first-child {
    display: block;
    margin-bottom: 6px;
    color: #111827;
    font-weight: 800;
}

.game-coin-form input,
.game-coin-form select,
.game-coin-form textarea {
    width: 100%;
    padding: 12px 13px;
    border: 2px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.game-coin-form input:focus,
.game-coin-form select:focus,
.game-coin-form textarea:focus {
    border-color: #ef233c;
    box-shadow: 0 0 0 4px rgba(239, 35, 60, .12);
}

.game-coin-form small {
    display: block;
    margin-top: 5px;
    color: #6b7280;
}

.game-coin-quick {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

.game-coin-quick button {
    padding: 9px 5px;
    border: 2px solid #111827;
    border-radius: 9px;
    background: #fff;
    color: #111827;
    font-weight: 900;
    cursor: pointer;
}

.game-coin-quick button.is-active,
.game-coin-quick button:hover {
    background: #111827;
    color: #fff;
}

.game-coin-summary {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 17px;
    border: 2px solid #111827;
    border-radius: 12px;
    background: #f9fafb;
}

.game-coin-summary div:last-child { text-align: right; }
.game-coin-summary span,
.game-coin-summary strong { display: block; }
.game-coin-summary span { color: #6b7280; font-size: 12px; font-weight: 800; }
.game-coin-summary strong { margin-top: 3px; color: #ef233c; font-size: 19px; }

.game-coin-confirm {
    display: flex !important;
    align-items: flex-start;
    gap: 9px;
    color: #374151;
    font-size: 14px;
}

.game-coin-confirm input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #ef233c;
}

.game-coin-confirm span { margin: 0 !important; font-weight: 600 !important; }

.game-coin-submit,
.game-coin-login a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #111827;
    border-radius: 10px;
    background: #ef233c;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}

.game-coin-submit:hover,
.game-coin-login a:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(239, 35, 60, .24);
}

.game-coin-side {
    display: grid;
    align-content: start;
    gap: 20px;
}

.game-coin-balance,
.game-coin-note {
    padding: 22px;
}

.game-coin-balance {
    background: linear-gradient(145deg, #111827, #222f43) !important;
    color: #fff;
}

.game-coin-balance span,
.game-coin-balance strong,
.game-coin-balance small {
    display: block;
}

.game-coin-balance span { color: #ffbf69; font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.game-coin-balance strong { margin: 8px 0; font-size: 25px; }
.game-coin-balance small { color: #cbd5e1; }

.game-coin-note h3 { margin: 0 0 13px; color: #111827; font-weight: 900; }
.game-coin-note h3 i { color: #ef233c; }
.game-coin-note ul { display: grid; gap: 11px; margin: 0; padding-left: 18px; color: #4b5563; }

.game-coin-login {
    padding: 32px;
    border: 2px dashed #d1d5db;
    border-radius: 14px;
    background: #f9fafb;
    color: #111827;
    text-align: center;
}

.game-coin-login > i { color: #ef233c; font-size: 28px; }
.game-coin-login h3 { margin: 12px 0 6px; }
.game-coin-login p { color: #6b7280; }
.game-coin-login a { width: min(280px, 100%); margin: 18px auto 0; }

.game-coin-history { padding: 24px; }

.game-coin-history__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.game-coin-history__head h2 { margin-bottom: 0; }
.game-coin-history__head > i { color: #ef233c; font-size: 25px; }
.game-coin-table-wrap { overflow-x: auto; }
.game-coin-table { width: 100%; min-width: 760px; border-collapse: collapse; color: #111827; }
.game-coin-table th { padding: 12px; border-bottom: 2px solid #111827; background: #f3f4f6; text-align: left; }
.game-coin-table td { padding: 14px 12px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
.game-coin-table td small { display: block; margin-top: 3px; color: #6b7280; }

.game-coin-status {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.game-coin-status--pending { background: #fff3cd; color: #7c5800; }
.game-coin-status--processing { background: #dbeafe; color: #1d4ed8; }
.game-coin-status--completed { background: #dcfce7; color: #15803d; }
.game-coin-status--cancelled { background: #fee2e2; color: #b91c1c; }
.game-coin-empty { padding: 28px !important; color: #6b7280; text-align: center; }

@media (max-width: 900px) {
    .game-coin-layout { grid-template-columns: 1fr; }
    .game-coin-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .game-coin-page { padding: 28px 0 95px; }
    .game-coin-wrap { width: min(100% - 18px, 1160px); }
    .game-coin-hero { align-items: stretch; padding: 20px; }
    .game-coin-hero,
    .game-coin-side { grid-template-columns: 1fr; }
    .game-coin-hero { display: grid; }
    .game-coin-rate { min-width: 0; text-align: left; }
    .game-coin-card,
    .game-coin-history { padding: 18px; }
    .game-coin-form__grid { grid-template-columns: 1fr; }
    .game-coin-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .game-coin-summary { grid-template-columns: 1fr; }
    .game-coin-summary > i { display: none; }
    .game-coin-summary div:last-child { text-align: left; }
}