/* =============================================
   Overwatch-Style Theme for MVB TCG
   ============================================= */

:root {
    --ow-bg:            #0a0c12;
    --ow-bg-panel:      #11141e;
    --ow-bg-card:       #161b27;
    --ow-bg-hover:      #1e2436;
    --ow-orange:        #F5821E;
    --ow-orange-light:  #FF9A3C;
    --ow-orange-dark:   #D96A0A;
    --ow-orange-glow:   rgba(245, 130, 30, 0.3);
    --ow-cyan:          #00C8FF;
    --ow-cyan-dark:     #0099CC;
    --ow-cyan-glow:     rgba(0, 200, 255, 0.3);
    --ow-gold:          #F5C842;
    --ow-text:          #DDE1ED;
    --ow-text-muted:    rgba(221, 225, 237, 0.5);
    --ow-border:        rgba(245, 130, 30, 0.25);
    --ow-border-subtle: rgba(255, 255, 255, 0.07);
}

/* ===== GLOBAL ===== */
html, body {
    font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
    font-size: 15px;
    background-color: var(--ow-bg);
    background-image: url('../images/tile-bg.svg');
    background-repeat: repeat;
    background-size: 96px 96px;
    color: var(--ow-text);
}

/* ===== OW NAVBAR ===== */
.ow-navbar {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #13171f 0%, #0d1018 100%);
    border-bottom: 2px solid var(--ow-orange);
    padding: 0 1.25rem;
    height: 52px;
    gap: 0;
    margin-bottom: 1.5rem;
    position: relative;
}
.ow-navbar::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--ow-orange);
}

.ow-brand {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
    padding: 0 1.5rem 0 1rem;
    border-right: 1px solid var(--ow-border);
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ow-brand span {
    background: linear-gradient(135deg, #ffffff 0%, var(--ow-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ow-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    flex: 1;
    overflow: visible;
}
.ow-nav-links li {
    display: flex;
}
/* ===== NAV GROUP DROPDOWNS ===== */
.ow-nav-group {
    position: relative;
    display: flex;
}

.ow-nav-group-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.ow-caret {
    font-size: 0.55rem;
    opacity: 0.65;
    transition: transform 0.15s;
    margin-top: 1px;
}
.active-group .ow-caret {
    transform: rotate(180deg);
    opacity: 1;
}
.active-group {
    color: var(--ow-orange) !important;
    background: rgba(245, 130, 30, 0.08);
}

.ow-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 130px;
    background: linear-gradient(180deg, #13171f 0%, #0d1018 100%);
    border: 1px solid var(--ow-border);
    border-top: 2px solid var(--ow-orange);
    z-index: 1001;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75);
}
.ow-nav-dropdown.open { display: block; }

.ow-nav-dropdown a {
    display: block;
    padding: 0.55rem 0.9rem;
    color: rgba(221, 225, 237, 0.8);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.ow-nav-dropdown a:hover {
    background: rgba(245, 130, 30, 0.1);
    color: #fff;
}
.ow-nav-dropdown a:last-child { border-bottom: none; }

/* Desktop: hover also opens dropdown */
@media (min-width: 768px) {
    .ow-nav-group:hover .ow-nav-dropdown { display: block; }
}

/* Overlay to close dropdown on outside click */
.ow-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    cursor: default;
    background: transparent;
}

/* Desktop-only: username hidden on mobile */
.ow-desktop-only { display: inline; }

.bg-purple { background-color: #7c3aed !important; color: #fff; }

.card-search-item:hover { border-color: var(--ow-orange) !important; }

.admin-user-item { cursor: pointer; color: #e2e8f0; font-size: 0.875rem; }
.admin-user-item:hover { background-color: #2d3748; }



.ow-nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 0.85rem;
    color: rgba(221, 225, 237, 0.65);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    position: relative;
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.ow-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.85rem;
    right: 0.85rem;
    height: 2px;
    background: var(--ow-orange);
    transform: scaleX(0);
    transition: transform 0.15s ease;
}
.ow-nav-link:hover {
    color: #fff;
    background: rgba(245, 130, 30, 0.08);
}
.ow-nav-link:hover::after {
    transform: scaleX(1);
}

.ow-nav-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    padding-left: 1rem;
    border-left: 1px solid var(--ow-border);
    flex-shrink: 0;
}

.ow-gold-display {
    color: var(--ow-gold);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.ow-username-display {
    color: var(--ow-cyan);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
}

/* ===== BUTTONS ===== */
.btn {
    font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 0;
    transition: filter 0.15s, transform 0.1s, background 0.15s;
}

.btn-primary {
    background: linear-gradient(135deg, var(--ow-orange) 0%, var(--ow-orange-dark) 100%);
    border: none;
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--ow-orange-light) 0%, var(--ow-orange) 100%);
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff;
    border-color: transparent;
}
.btn-primary:active { transform: translateY(0); filter: none; }

.btn-outline-primary {
    border: 1px solid var(--ow-orange);
    color: var(--ow-orange);
}
.btn-outline-primary:hover {
    background: var(--ow-orange);
    color: #fff;
    border-color: var(--ow-orange);
}

.btn-outline-secondary {
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
}
.btn-outline-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}

.btn-outline-light {
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.75);
}
.btn-outline-light:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.45);
    color: #fff;
}

.btn-info {
    background: linear-gradient(135deg, var(--ow-cyan) 0%, var(--ow-cyan-dark) 100%);
    border: none;
    color: #fff;
}
.btn-info:hover { filter: brightness(1.15); color: #fff; transform: translateY(-1px); }

.btn-danger {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border: none;
}
.btn-danger:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-success {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    border: none;
}
.btn-success:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-warning {
    background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
    border: none;
    color: #fff;
}
.btn-warning:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }

.btn-secondary {
    background: #2a3045;
    border: none;
}
.btn-secondary:hover { background: #3a4060; transform: translateY(-1px); }

.btn-sm { font-size: 0.78rem; padding: 0.28rem 0.75rem; }

/* ===== CARDS ===== */
.card {
    background-color: var(--ow-bg-card);
    border: 1px solid var(--ow-border-subtle);
    border-top: 2px solid var(--ow-orange);
    border-radius: 0;
    color: var(--ow-text);
}
.card-header {
    background: linear-gradient(90deg, #1c2236 0%, var(--ow-bg-card) 100%);
    border-bottom: 1px solid var(--ow-border);
    color: var(--ow-text);
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 0 !important;
}
.card-footer {
    background: var(--ow-bg-panel);
    border-top: 1px solid var(--ow-border-subtle);
    border-radius: 0 !important;
}

/* ===== TABS ===== */
.nav-tabs {
    border-bottom: 1px solid var(--ow-border);
}
.nav-tabs .nav-link {
    color: var(--ow-text-muted);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.82rem;
    padding: 0.5rem 1rem;
    transition: color 0.15s, background 0.15s;
}
.nav-tabs .nav-link:hover {
    color: var(--ow-text);
    background: rgba(245, 130, 30, 0.07);
    border-color: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--ow-orange);
    background: rgba(245, 130, 30, 0.06);
    border-color: transparent transparent var(--ow-orange);
    border-bottom-width: 2px;
}

/* ===== TABLE ===== */
.table {
    color: var(--ow-text);
    --bs-table-bg: var(--ow-bg-card);
    --bs-table-hover-bg: rgba(245, 130, 30, 0.07);
    --bs-table-hover-color: #fff;
}
.table thead th {
    border-color: var(--ow-border);
    color: var(--ow-orange);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    background: var(--ow-bg-panel);
}
.table td, .table th {
    border-color: var(--ow-border-subtle);
}

/* ===== FORMS ===== */
.form-control, .form-select {
    background-color: #0d1018;
    border: 1px solid rgba(245, 130, 30, 0.2);
    border-radius: 0;
    color: var(--ow-text);
    font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
}
.form-control:focus, .form-select:focus {
    background-color: #0d1018;
    border-color: var(--ow-orange);
    color: var(--ow-text);
    box-shadow: 0 0 0 2px var(--ow-orange-glow);
}
.form-control::placeholder { color: var(--ow-text-muted); }
.input-group-text {
    background-color: #0d1018;
    border-color: rgba(245, 130, 30, 0.2);
    color: var(--ow-text);
    border-radius: 0;
}
.form-label {
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--ow-text-muted);
}

/* ===== LIST GROUP ===== */
.list-group-item {
    background-color: var(--ow-bg-card);
    border-color: var(--ow-border-subtle);
    color: var(--ow-text);
    border-radius: 0 !important;
}
.list-group-item-action:hover, .list-group-item-action:focus {
    background-color: var(--ow-bg-hover);
    color: #fff;
}

/* ===== MODAL ===== */
.modal-content {
    background-color: var(--ow-bg-card);
    border: 1px solid var(--ow-border);
    border-top: 3px solid var(--ow-orange);
    border-radius: 0;
    color: var(--ow-text);
}
.modal-header {
    border-bottom: 1px solid var(--ow-border);
    background: linear-gradient(90deg, #1c2236 0%, var(--ow-bg-card) 100%);
    border-radius: 0;
}
.modal-footer {
    border-top: 1px solid var(--ow-border-subtle);
}
.modal-title {
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    font-size: 1rem;
}

/* ===== BADGES ===== */
.badge {
    border-radius: 0;
    font-family: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}
.bg-success   { background-color: #27ae60 !important; }
.bg-danger    { background-color: #e74c3c !important; }
.bg-warning   { background-color: #f39c12 !important; }
.bg-info      { background-color: #0099CC !important; }
.bg-secondary { background-color: #2e3550 !important; }
.bg-primary   { background-color: var(--ow-orange) !important; }

/* ===== ALERTS ===== */
.alert {
    border-radius: 0;
    border-left: 3px solid;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.alert-warning  { background: rgba(243,156,18,0.12); border-color: #f39c12; color: var(--ow-gold); }
.alert-info     { background: rgba(0,200,255,0.08); border-color: var(--ow-cyan); color: var(--ow-cyan); }
.alert-success  { background: rgba(39,174,96,0.12); border-color: #27ae60; color: #2ecc71; }
.alert-danger   { background: rgba(231,76,60,0.12); border-color: #e74c3c; color: #ff6b6b; }

/* ===== HEADINGS ===== */
.container h1, .container h2, .container h3,
.container h4, .container h5, .container h6 {
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: none;
}
.container h4 {
    font-size: 1rem;
    color: var(--ow-text);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--ow-border);
    margin-bottom: 1rem;
}

/* ===== GLOBAL TEXT ===== */
.container p, .container td, .container th,
.container label, .container small, .container .form-label,
.container .nav-link, .container strong, .container span:not(.badge) {
    color: var(--ow-text);
    text-shadow: none;
}

h1:focus { outline: none; }

a, .btn-link { color: var(--ow-cyan); }

.text-muted   { color: var(--ow-text-muted) !important; }
.text-dark    { color: var(--ow-text) !important; }
.text-warning { color: var(--ow-gold) !important; }
.text-info    { color: var(--ow-cyan) !important; }
.text-danger  { color: #ff6b6b !important; }
.text-success { color: #2ecc71 !important; }
.text-light   { color: var(--ow-text) !important; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--ow-orange-glow);
}

.btn-close { filter: invert(1); }

.content { padding-top: 1.1rem; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #27ae60; }
.invalid { outline: 1px solid #e74c3c; }
.validation-message { color: #ff6b6b; }

/* ===== SPINNER ===== */
.spinner-border { color: var(--ow-orange) !important; }

/* ===== GAME FIELD AREAS ===== */
.game-field-opp  { background-color: #0e1020 !important; }
.game-field-mine { background-color: #0d1a10 !important; }
.game-event-slot { background-color: #1a1400 !important; }
.game-tool-slot  { background-color: #0d1020 !important; }

/* 도구 슬롯 가시성 */
.game-tool-slot {
    border-color: rgba(100, 180, 255, 0.25) !important;
    border-style: dashed !important;
}
.game-tool-slot:has(.text-info) {
    border-color: rgba(100, 180, 255, 0.7) !important;
    border-style: solid !important;
    background-color: #0d1530 !important;
}
.game-tool-slot .text-info,
.game-tool-slot .text-muted {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* ===== OW UTILITY ===== */
.ow-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ow-orange);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--ow-border);
    margin-bottom: 0.75rem;
}

/* ===== ERROR UI ===== */
#blazor-error-ui {
    color-scheme: light only;
    background: #1a0a0a;
    border-top: 2px solid #e74c3c;
    bottom: 0;
    box-shadow: 0 -2px 12px rgba(231,76,60,0.3);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #ff6b6b;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #1a0808;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #ff6b6b;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ===== LOADING ===== */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none;
    stroke: rgba(245, 130, 30, 0.15);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--ow-orange);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--ow-orange);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

code { color: var(--ow-cyan); }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

/* ===== CARD ANIMATIONS ===== */
@keyframes card-summon {
    0%   { opacity: 0; transform: scale(0.4) translateY(-24px); }
    60%  { opacity: 1; transform: scale(1.08) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes card-attack {
    0%   { transform: translateX(0) translateY(0); }
    20%  { transform: translateX(0) translateY(-8px) scale(1.05); }
    50%  { transform: translateX(6px) translateY(-4px); }
    75%  { transform: translateX(-3px) translateY(2px); }
    100% { transform: translateX(0) translateY(0); }
}
@keyframes card-event-flash {
    0%   { box-shadow: 0 0 0 0 rgba(255, 210, 0, 0); outline: 2px solid transparent; }
    20%  { box-shadow: 0 0 18px 6px rgba(255, 210, 0, 0.85); outline: 2px solid rgba(255,210,0,0.9); }
    60%  { box-shadow: 0 0 12px 3px rgba(255, 210, 0, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(255, 210, 0, 0); outline: 2px solid transparent; }
}
@keyframes card-equip-flash {
    0%   { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0); outline: 2px solid transparent; }
    20%  { box-shadow: 0 0 18px 6px rgba(0, 200, 255, 0.85); outline: 2px solid rgba(0,200,255,0.9); }
    60%  { box-shadow: 0 0 12px 3px rgba(0, 200, 255, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0); outline: 2px solid transparent; }
}

.anim-summon { animation: card-summon 0.5s ease-out; }
.anim-attack { animation: card-attack 0.45s ease-in-out; }
.anim-event  { animation: card-event-flash 0.8s ease-out; }
.anim-equip  { animation: card-equip-flash 0.8s ease-out; }

/* ===== GACHA / BOOSTER PACK ===== */
.gacha-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0, 0, 8, 0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.gacha-opening {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: relative;
}

.gacha-rays {
    position: absolute;
    width: 340px;
    height: 340px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,   rgba(245,130,30,0.18) 9deg,
        transparent 18deg,  rgba(245,130,30,0.18) 27deg,
        transparent 36deg,  rgba(245,130,30,0.18) 45deg,
        transparent 54deg,  rgba(245,130,30,0.18) 63deg,
        transparent 72deg,  rgba(245,130,30,0.18) 81deg,
        transparent 90deg,  rgba(245,130,30,0.18) 99deg,
        transparent 108deg, rgba(245,130,30,0.18) 117deg,
        transparent 126deg, rgba(245,130,30,0.18) 135deg,
        transparent 144deg, rgba(245,130,30,0.18) 153deg,
        transparent 162deg, rgba(245,130,30,0.18) 171deg,
        transparent 180deg, rgba(245,130,30,0.18) 189deg,
        transparent 198deg, rgba(245,130,30,0.18) 207deg,
        transparent 216deg, rgba(245,130,30,0.18) 225deg,
        transparent 234deg, rgba(245,130,30,0.18) 243deg,
        transparent 252deg, rgba(245,130,30,0.18) 261deg,
        transparent 270deg, rgba(245,130,30,0.18) 279deg,
        transparent 288deg, rgba(245,130,30,0.18) 297deg,
        transparent 306deg, rgba(245,130,30,0.18) 315deg,
        transparent 324deg, rgba(245,130,30,0.18) 333deg,
        transparent 342deg, rgba(245,130,30,0.18) 351deg,
        transparent 360deg
    );
    border-radius: 50%;
    animation: gacha-rays-spin 3.5s linear infinite;
}
@keyframes gacha-rays-spin { to { transform: rotate(360deg); } }

.gacha-pack-icon {
    font-size: 7.5rem;
    position: relative;
    z-index: 1;
    animation: gacha-pack-pulse 0.65s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 28px rgba(245, 130, 30, 0.9));
}
@keyframes gacha-pack-pulse {
    from { transform: scale(1)    rotate(-4deg); }
    to   { transform: scale(1.14) rotate( 4deg); }
}

.gacha-opening-text {
    color: var(--ow-orange);
    font-size: 1.35rem;
    font-weight: bold;
    letter-spacing: 4px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    animation: gacha-text-blink 1.1s ease-in-out infinite alternate;
}
@keyframes gacha-text-blink {
    from { opacity: 0.55; }
    to   { opacity: 1; }
}

.gacha-dots::after {
    content: '';
    animation: gacha-dots-anim 1.5s steps(4, end) infinite;
}
@keyframes gacha-dots-anim {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
    100% { content: ''; }
}

.gacha-cards-area {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 820px;
    padding: 10px 20px;
}

.gacha-card-slot {
    width: 128px;
    height: 182px;
    border-radius: 0;
    border: 1px solid #333;
    border-top: 2px solid var(--ow-orange);
    background: linear-gradient(145deg, #0d0d1c, #181830);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-size: 2.8rem;
    color: #44447a;
}

.gacha-card-front {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 6px;
    animation: gacha-flip-in 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}
@keyframes gacha-flip-in {
    0%   { transform: scaleX(0) scaleY(0.7); opacity: 0; }
    100% { transform: scaleX(1) scaleY(1);   opacity: 1; }
}

.gc-name {
    font-size: 0.82rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
    letter-spacing: 0.5px;
}
.gc-type-badge {
    font-size: 0.68rem;
    padding: 2px 9px;
    border-radius: 0;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.gc-badge-existence { background: #c0392b; color: #fff; }
.gc-badge-event     { background: #d4ac0d; color: #111; }
.gc-badge-tool      { background: var(--ow-cyan-dark); color: #fff; }

.gc-rarity {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Rarity borders & glows */
.rarity-Common    { border-color: #555; }
.rarity-Common    .gc-rarity { color: #888; }

.rarity-Uncommon  { border-color: #27ae60; box-shadow: 0 0 14px rgba(39,174,96,0.55); }
.rarity-Uncommon  .gc-rarity { color: #2ecc71; }

.rarity-Rare      { border-color: #2980b9; box-shadow: 0 0 18px rgba(41,128,185,0.65); }
.rarity-Rare      .gc-rarity { color: #5dade2; }

.rarity-Epic      { border-color: #8e44ad; box-shadow: 0 0 22px rgba(142,68,173,0.75); }
.rarity-Epic      .gc-rarity { color: #c39bd3; }

.rarity-Legendary {
    border-color: var(--ow-orange);
    box-shadow: 0 0 28px rgba(245,130,30,0.9), 0 0 55px rgba(245,130,30,0.35);
    animation: legendary-card-glow 1.4s ease-in-out infinite alternate;
}
.rarity-Legendary .gc-rarity { color: var(--ow-orange-light); font-weight: bold; }
@keyframes legendary-card-glow {
    from { box-shadow: 0 0 22px rgba(245,130,30,0.85), 0 0 44px rgba(245,130,30,0.3); }
    to   { box-shadow: 0 0 36px rgba(245,130,30,1),    0 0 70px rgba(245,130,30,0.5); }
}

/* ===== GACHA SKIP / DONE ===== */
.gacha-skip-btn {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 9999;
    background: rgba(245, 130, 30, 0.15);
    border: 1px solid rgba(245, 130, 30, 0.4);
    color: var(--ow-orange);
    padding: 6px 20px;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
}
.gacha-skip-btn:hover { background: rgba(245, 130, 30, 0.3); color: #fff; }

.gacha-done-title {
    color: var(--ow-orange);
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(245,130,30,0.7);
    animation: gacha-text-blink 1.5s ease-in-out infinite alternate;
}

/* ===== HAND CARD HOVER ===== */
.hand-card {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease,
                z-index 0s;
    position: relative;
    z-index: 0;
}
.hand-card:hover {
    transform: translateY(-18px) scale(1.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    z-index: 100;
}

/* =============================================
   MOBILE RESPONSIVE (portrait / small screens)
   ============================================= */

@media (max-width: 767px) {

    /* Container padding */
    .container {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }

    /* Navbar: compact, show all 3 groups */
    .ow-navbar {
        padding: 0 0.5rem;
        height: 48px;
    }

    /* Brand compact */
    .ow-brand {
        font-size: 1rem;
        letter-spacing: 2px;
        padding: 0 0.55rem 0 0.3rem;
    }

    /* Nav links: visible and compact */
    .ow-nav-links {
        overflow: visible !important;
        flex: 1 1 0;
        min-width: 0;
    }

    /* Group buttons compact */
    .ow-nav-group-btn {
        padding: 0 0.5rem;
        font-size: 0.72rem;
        letter-spacing: 0.4px;
    }
    .ow-caret { font-size: 0.5rem; }

    /* Nav right compact */
    .ow-nav-right {
        gap: 0.3rem;
        padding-left: 0.35rem;
    }
    .ow-gold-display {
        font-size: 0.72rem;
        letter-spacing: 0;
    }
    .ow-desktop-only { display: none; }
    .ow-nav-right .btn {
        font-size: 0.65rem;
        padding: 0.18rem 0.4rem;
        letter-spacing: 0.5px;
    }

    /* Dropdown: left-align adjustments for rightmost items */
    .ow-nav-group:last-of-type .ow-nav-dropdown {
        left: auto;
        right: 0;
    }

    /* Page headings */
    .container h4 {
        font-size: 0.9rem;
        letter-spacing: 0.8px;
        margin-bottom: 0.65rem;
    }

    /* Cards */
    .card-header {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
    }
    .card-body {
        padding: 0.7rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Buttons */
    .btn {
        font-size: 0.78rem;
        padding: 0.32rem 0.65rem;
    }
    .btn-lg {
        font-size: 0.9rem;
        padding: 0.55rem 1.2rem;
    }

    /* Nav tabs */
    .nav-tabs .nav-link {
        font-size: 0.72rem;
        padding: 0.4rem 0.55rem;
        letter-spacing: 0.4px;
    }

    /* Tables scrollable */
    .container > * > table,
    .container > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    table.table { min-width: 360px; }

    /* Form controls */
    .form-control, .form-select {
        font-size: 0.88rem;
        padding: 0.35rem 0.55rem;
    }
    .input-group-text { font-size: 0.82rem; }

    /* Badges */
    .badge { font-size: 0.68rem; padding: 0.25em 0.5em; }

    /* Alerts */
    .alert { font-size: 0.82rem; padding: 0.5rem 0.75rem; }

    /* Row gutters */
    .row.g-3 { --bs-gutter-x: 0.65rem; --bs-gutter-y: 0.65rem; }
    .row.g-2 { --bs-gutter-x: 0.4rem;  --bs-gutter-y: 0.4rem; }

    /* Gacha cards */
    .gacha-cards-area {
        gap: 8px;
        padding: 8px 10px;
        max-width: 100%;
    }
    .gacha-card-slot {
        width: 86px;
        height: 122px;
        font-size: 1.8rem;
    }
    .gc-name { font-size: 0.68rem; }
    .gc-type-badge { font-size: 0.62rem; padding: 2px 5px; }
    .gc-rarity { font-size: 0.62rem; }
    .gacha-done-title { font-size: 1.2rem; }

    /* Arena */
    .arena-match-container { padding: 1.5rem 0; }

    /* Table-responsive */
    .table-responsive { overflow-x: auto; }
}