/* =========================================
   SCOUTER - Cyberpunk Green UI Styles
   ========================================= */

:root {
    --sc-green: #00ff41;
    --sc-green-dim: #00cc33;
    --sc-green-dark: #003300;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    -webkit-font-smoothing: antialiased;
    background: #000;
    color: var(--sc-green);
    touch-action: none;
    overscroll-behavior: none;
}

.mirror { transform: scaleX(-1); }

/* --- Overlays --- */
.green-overlay {
    position: absolute; inset: 0;
    background: rgba(0, 255, 65, 0.05);
    pointer-events: none; z-index: 10;
    mix-blend-mode: multiply;
}
.scanlines {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px);
    pointer-events: none; z-index: 11;
}
.scan-bar {
    position: absolute; left: 0; right: 0; height: 4px;
    background: linear-gradient(to bottom, transparent, rgba(0,255,65,0.12), rgba(0,255,65,0.25), rgba(0,255,65,0.12), transparent);
    box-shadow: 0 0 20px rgba(0,255,65,0.15);
    pointer-events: none; z-index: 12;
    animation: scan-move 4s linear infinite;
}
@keyframes scan-move { from { top: -4px; } to { top: 100%; } }
.vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0,20,0,0.4) 72%, rgba(0,0,0,0.75) 100%);
    pointer-events: none; z-index: 13;
}

/* --- HUD --- */
.hud-layer {
    position: absolute;
    top: env(safe-area-inset-top, 0);
    right: env(safe-area-inset-right, 0);
    bottom: env(safe-area-inset-bottom, 0);
    left: env(safe-area-inset-left, 0);
    pointer-events: none; z-index: 30;
}
.hud-layer button, .hud-layer [role="button"] { pointer-events: auto; }
.hud-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid rgba(0,255,65,0.25);
    background: rgba(0,0,0,0.45);
    color: var(--sc-green);
    cursor: pointer; transition: all 0.2s;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hud-btn:hover { border-color: var(--sc-green); background: rgba(0,255,65,0.1); }
.hud-btn:active { background: rgba(0,255,65,0.2); }
.hud-btn.muted { color: rgba(0,255,65,0.25); border-color: rgba(0,255,65,0.12); }
.glow-text {
    text-shadow: 0 0 10px rgba(0,255,65,0.5), 0 0 20px rgba(0,255,65,0.3), 0 0 40px rgba(0,255,65,0.1);
}

/* =========================================
   Analysis Panel
   ========================================= */
.analysis-panel {
    position: absolute;
    right: 12px; top: 50%; transform: translateY(-50%);
    width: 195px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(0,255,65,0.25);
    padding: 10px 12px;
    font-family: 'Share Tech Mono', monospace;
    z-index: 36;
    pointer-events: none;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    animation: panel-in 0.3s ease-out;
}
@keyframes panel-in {
    from { opacity: 0; transform: translateY(-50%) translateX(15px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.analysis-header {
    font-size: 10px; letter-spacing: 0.15em;
    color: var(--sc-green); opacity: 0.8;
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.analysis-dot {
    display: inline-block; width: 6px; height: 6px;
    background: var(--sc-green); border-radius: 50%;
    animation: dot-blink 0.8s ease-in-out infinite;
}
@keyframes dot-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }

.analysis-item {
    margin-bottom: 7px;
    animation: item-in 0.35s ease-out both;
}
.analysis-item-name {
    font-size: 9px; letter-spacing: 0.1em;
    color: rgba(0,255,65,0.55); margin-bottom: 2px;
}
.analysis-item-bar {
    height: 3px; background: rgba(0,255,65,0.1);
    border-radius: 1px; overflow: hidden; margin-bottom: 2px;
}
.analysis-item-fill {
    height: 100%; background: var(--sc-green);
    border-radius: 1px;
    transition: width 0.4s ease-out;
    box-shadow: 0 0 6px rgba(0,255,65,0.4);
}
.analysis-item-value {
    font-size: 11px; color: var(--sc-green);
    text-align: right; font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}
@keyframes item-in {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.analysis-footer {
    font-size: 9px; letter-spacing: 0.1em;
    color: rgba(0,255,65,0.4); margin-top: 8px;
    text-align: center;
}

/* =========================================
   Center Result Display
   ========================================= */
.result-display {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 37; pointer-events: none;
    padding: 28px 44px 24px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(0,255,65,0.3);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    min-width: 300px;
    animation: result-in 0.4s ease-out;
}
@keyframes result-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Corner decorations */
.result-corners { position: absolute; inset: -1px; pointer-events: none; }
.rc {
    position: absolute; width: 18px; height: 18px;
    border-color: var(--sc-green); border-style: solid;
}
.rc-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.rc-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.rc-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.rc-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.result-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px; letter-spacing: 0.25em;
    color: rgba(0,255,65,0.5); margin-bottom: 8px;
}
.result-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 62px; font-weight: 900; line-height: 1.1;
    color: var(--sc-green);
    text-shadow: 0 0 16px rgba(0,255,65,0.8), 0 0 32px rgba(0,255,65,0.4), 0 0 60px rgba(0,255,65,0.2);
    transition: color 0.05s;
}
.result-value.flash-yellow {
    color: #ffdd00;
    text-shadow: 0 0 16px rgba(255,221,0,0.9), 0 0 32px rgba(255,221,0,0.5);
}
.result-value.flash-red {
    color: #ff3300;
    text-shadow: 0 0 16px rgba(255,51,0,0.9), 0 0 32px rgba(255,51,0,0.5);
}
.result-value.flash-white {
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.95), 0 0 40px rgba(255,255,255,0.5);
}

/* Rank Badge (center) */
.result-rank {
    display: inline-block;
    padding: 4px 16px; margin-top: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 22px; font-weight: 900;
    letter-spacing: 0.08em;
    border: 2px solid rgba(0,255,65,0.3);
    color: rgba(0,255,65,0.5);
    transition: all 0.3s;
    min-height: 36px;
}
.result-rank.rank-ss {
    color: #ffd700; border-color: #ffd700;
    text-shadow: 0 0 14px rgba(255,215,0,0.9);
    box-shadow: 0 0 14px rgba(255,215,0,0.35), inset 0 0 10px rgba(255,215,0,0.1);
    animation: pulse-gold 0.5s ease-in-out infinite alternate;
}
.result-rank.rank-s {
    color: #ff4444; border-color: #ff4444;
    text-shadow: 0 0 12px rgba(255,68,68,0.8);
    box-shadow: 0 0 12px rgba(255,68,68,0.3);
    animation: pulse-red 0.7s ease-in-out infinite alternate;
}
.result-rank.rank-a {
    color: #ff8800; border-color: #ff8800;
    text-shadow: 0 0 10px rgba(255,136,0,0.6);
    box-shadow: 0 0 8px rgba(255,136,0,0.2);
}
.result-rank.rank-b {
    color: #ffdd00; border-color: #ffdd00;
    text-shadow: 0 0 8px rgba(255,221,0,0.4);
}
.result-rank.rank-c {
    color: var(--sc-green); border-color: var(--sc-green);
}
.result-rank.rank-d {
    color: rgba(0,255,65,0.45); border-color: rgba(0,255,65,0.25);
}
@keyframes pulse-gold {
    to { text-shadow: 0 0 24px rgba(255,215,0,1); box-shadow: 0 0 24px rgba(255,215,0,0.55), inset 0 0 14px rgba(255,215,0,0.18); }
}
@keyframes pulse-red {
    to { text-shadow: 0 0 20px rgba(255,68,68,1); box-shadow: 0 0 18px rgba(255,68,68,0.5); }
}

/* Rescan & Action Buttons */
.result-actions {
    display: flex; gap: 10px; justify-content: center;
    margin-top: 16px; pointer-events: auto;
    flex-wrap: wrap;
}
.rescan-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 20px;
    border: 1px solid rgba(0,255,65,0.35);
    background: rgba(0,255,65,0.08);
    color: var(--sc-green);
    font-family: 'Orbitron', sans-serif;
    font-size: 11px; letter-spacing: 0.15em;
    cursor: pointer; pointer-events: auto;
    transition: all 0.2s;
}
.rescan-btn:hover { background: rgba(0,255,65,0.18); border-color: var(--sc-green); }
.rescan-btn:active { background: rgba(0,255,65,0.28); }

/* Save to Ranking Button */
.save-ranking-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 20px;
    border: 1px solid rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.1);
    color: #ffd700;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px; letter-spacing: 0.15em;
    cursor: pointer; pointer-events: auto;
    transition: all 0.2s;
}
.save-ranking-btn:hover { background: rgba(255,215,0,0.2); border-color: #ffd700; }
.save-ranking-btn:active { background: rgba(255,215,0,0.3); }

/* Ranking Teaser */
.ranking-teaser {
    margin-top: 10px; text-align: center;
    pointer-events: none;
}
.ranking-teaser-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px; letter-spacing: 0.2em;
    color: rgba(0,255,65,0.4);
}
.ranking-teaser-value {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px; font-weight: 700;
    color: var(--sc-green);
    margin-top: 2px;
}

/* Save Dialog */
.save-dialog {
    margin-top: 14px; pointer-events: auto;
    animation: item-in 0.3s ease-out;
}
.save-name-input {
    display: block; width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(0,255,65,0.35);
    background: rgba(0,0,0,0.6);
    color: var(--sc-green);
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px; letter-spacing: 0.1em;
    text-align: center;
    outline: none;
}
.save-name-input::placeholder { color: rgba(0,255,65,0.25); }
.save-name-input:focus { border-color: var(--sc-green); box-shadow: 0 0 8px rgba(0,255,65,0.2); }
.save-dialog-btns {
    display: flex; gap: 8px; margin-top: 8px; justify-content: center;
}
.save-confirm-btn {
    padding: 7px 18px;
    border: 1px solid rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.12);
    color: #ffd700;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px; letter-spacing: 0.12em;
    cursor: pointer; transition: all 0.2s;
}
.save-confirm-btn:hover { background: rgba(255,215,0,0.25); }
.save-cancel-btn {
    padding: 7px 18px;
    border: 1px solid rgba(0,255,65,0.2);
    background: rgba(0,0,0,0.4);
    color: rgba(0,255,65,0.5);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px; letter-spacing: 0.12em;
    cursor: pointer; transition: all 0.2s;
}
.save-cancel-btn:hover { background: rgba(0,255,65,0.1); }

/* Save Success */
.save-success {
    margin-top: 14px; text-align: center;
    pointer-events: auto;
    animation: item-in 0.3s ease-out;
}
.save-success-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px; letter-spacing: 0.2em;
    color: #ffd700;
}
.save-success-rank {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px; font-weight: 900;
    color: var(--sc-green);
    margin: 4px 0 10px;
    text-shadow: 0 0 10px rgba(0,255,65,0.6);
}
.save-success-btns {
    display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.view-ranking-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 20px;
    border: 1px solid rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.1);
    color: #ffd700;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px; letter-spacing: 0.15em;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s;
}
.view-ranking-btn:hover { background: rgba(255,215,0,0.2); border-color: #ffd700; }

/* =========================================
   Ranking Page
   ========================================= */
.ranking-page {
    min-height: 100vh; padding: 0 0 40px;
    touch-action: auto; overscroll-behavior: auto;
    overflow-y: scroll; -webkit-overflow-scrolling: touch;
}
body.ranking-page {
    touch-action: auto;
    overscroll-behavior: auto;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.ranking-header {
    position: sticky; top: 0; z-index: 10;
    padding: 16px 20px 12px;
    background: rgba(0,0,0,0.92);
    border-bottom: 1px solid rgba(0,255,65,0.15);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ranking-header-top {
    display: flex; align-items: center; justify-content: space-between;
}
.ranking-back {
    color: rgba(0,255,65,0.5); text-decoration: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px; letter-spacing: 0.1em;
    transition: color 0.2s;
}
.ranking-back:hover { color: var(--sc-green); }
.ranking-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--sc-green);
    text-shadow: 0 0 10px rgba(0,255,65,0.4);
}
.ranking-total {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px; color: rgba(0,255,65,0.35);
    text-align: center; margin-top: 4px;
    letter-spacing: 0.15em;
}
.ranking-list { padding: 4px 12px; }

.ranking-row {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,255,65,0.06);
    transition: background 0.2s;
}
.ranking-row:hover { background: rgba(0,255,65,0.03); }
.ranking-row-highlight {
    background: rgba(0,255,65,0.08);
    border-left: 3px solid var(--sc-green);
    box-shadow: 0 0 20px rgba(0,255,65,0.1);
}
.ranking-row-highlight:hover { background: rgba(0,255,65,0.12); }

.ranking-pos {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px; font-weight: 700;
    color: rgba(0,255,65,0.5);
    min-width: 40px; text-align: right;
}
.ranking-pos-top3 { color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,0.4); }

.ranking-face {
    width: 134px; height: 134px;
    border-radius: 3px; overflow: hidden; flex-shrink: 0;
    border: 1px solid rgba(0,255,65,0.25);
}
.ranking-face img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.avatar-initials {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 22px; font-weight: 700;
    color: #000;
}

.ranking-fv {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px; color: rgba(0,255,65,0.4);
    letter-spacing: 0.05em;
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ranking-info { flex: 1; min-width: 0; }
.ranking-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px; color: var(--sc-green);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ranking-you {
    display: inline-block;
    padding: 1px 5px; margin-left: 6px;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px; font-weight: 700;
    color: #000; background: var(--sc-green);
    vertical-align: middle;
}
.category-tag {
    font-size: 8px; letter-spacing: 0.1em;
    color: rgba(0,255,65,0.3);
    margin-top: 1px;
}

.ranking-power {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px; font-weight: 700;
    color: var(--sc-green);
    min-width: 75px; text-align: right;
}

.rank-chip {
    display: inline-block;
    padding: 4px 12px;
    font-family: 'Orbitron', sans-serif;
    font-size: 13px; font-weight: 700;
    border: 1px solid;
    min-width: 44px; text-align: center;
}
.rank-chip-ss { color: #ffd700; border-color: #ffd700; text-shadow: 0 0 6px rgba(255,215,0,0.5); }
.rank-chip-s  { color: #ff4444; border-color: #ff4444; }
.rank-chip-a  { color: #ff8800; border-color: #ff8800; }
.rank-chip-b  { color: #ffdd00; border-color: #ffdd00; }
.rank-chip-c  { color: var(--sc-green); border-color: var(--sc-green); }
.rank-chip-d  { color: rgba(0,255,65,0.4); border-color: rgba(0,255,65,0.2); }

.ranking-separator {
    display: flex; align-items: center; justify-content: center;
    padding: 16px 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 16px; letter-spacing: 0.3em;
    color: rgba(0,255,65,0.25);
    border-bottom: 1px solid rgba(0,255,65,0.06);
}

/* =========================================
   Screen Shake
   ========================================= */
@keyframes shake-light {
    0%,100% { transform: translate(0,0); }
    25% { transform: translate(-2px,1px); } 50% { transform: translate(2px,-1px); } 75% { transform: translate(-1px,-2px); }
}
@keyframes shake-medium {
    0%,100% { transform: translate(0,0); }
    10% { transform: translate(-4px,-2px); } 20% { transform: translate(4px,2px); }
    30% { transform: translate(-2px,4px); }  40% { transform: translate(2px,-4px); }
    50% { transform: translate(-4px,2px); }  60% { transform: translate(4px,-2px); }
    70% { transform: translate(-2px,-4px); } 80% { transform: translate(2px,4px); }
    90% { transform: translate(-3px,-1px); }
}
@keyframes shake-heavy {
    0%,100% { transform: translate(0,0); }
    10% { transform: translate(-7px,-4px); } 20% { transform: translate(7px,3px); }
    30% { transform: translate(-4px,7px); }  40% { transform: translate(4px,-7px); }
    50% { transform: translate(-7px,4px); }  60% { transform: translate(7px,-3px); }
    70% { transform: translate(-3px,-6px); } 80% { transform: translate(5px,5px); }
    90% { transform: translate(-5px,-2px); }
}
@keyframes shake-extreme {
    0%,100% { transform: translate(0,0); }
    5%  { transform: translate(-12px,-5px) rotate(-1deg); }
    10% { transform: translate(11px,6px) rotate(1deg); }
    15% { transform: translate(-6px,11px) rotate(-0.5deg); }
    20% { transform: translate(7px,-10px) rotate(0.5deg); }
    30% { transform: translate(-10px,5px) rotate(-0.7deg); }
    40% { transform: translate(9px,-6px) rotate(0.8deg); }
    50% { transform: translate(-7px,-9px); } 60% { transform: translate(8px,7px); }
    70% { transform: translate(-5px,4px); }  80% { transform: translate(3px,-3px); }
    90% { transform: translate(-2px,1px); }
}
.shake-light   { animation: shake-light 0.3s ease-in-out; }
.shake-medium  { animation: shake-medium 0.5s ease-in-out; }
.shake-heavy   { animation: shake-heavy 0.7s ease-in-out; }
.shake-extreme { animation: shake-extreme 1.0s ease-in-out; }

/* Flash Overlay */
.flash-overlay {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 50;
    animation: flash-fade 0.45s ease-out forwards;
}
@keyframes flash-fade { from { opacity: 1; } to { opacity: 0; } }
.flash-green { background: rgba(0,255,65,0.25); }
.flash-gold  { background: rgba(255,215,0,0.35); }
.flash-red   { background: rgba(255,0,0,0.25); }
.flash-white { background: rgba(255,255,255,0.5); }

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 640px) {
    .result-display {
        padding: 20px 24px 18px; min-width: 240px;
        top: 50px; left: 50%;
        transform: translateX(-50%);
    }
    .result-value   { font-size: 40px; }
    .result-label   { font-size: 9px; }
    .result-rank    { font-size: 17px; padding: 3px 12px; }
    .rescan-btn     { font-size: 10px; padding: 7px 16px; }
    .save-ranking-btn { font-size: 10px; padding: 7px 16px; }
    .hud-btn        { width: 30px; height: 30px; }
    .analysis-panel {
        right: auto; left: 50%; top: 50px; bottom: auto;
        transform: translateX(-50%); width: 240px;
    }
    .ranking-title { font-size: 11px; }
    .ranking-row { gap: 12px; padding: 10px 12px; }
    .ranking-face { width: 112px; height: 112px; }
    .ranking-name { font-size: 15px; }
    .ranking-power { font-size: 15px; min-width: 60px; }
    .ranking-pos { font-size: 15px; min-width: 32px; }
    .rank-chip { font-size: 11px; padding: 3px 8px; }
    @keyframes panel-in {
        from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    @keyframes result-in {
        from { opacity: 0; transform: translateX(-50%) scale(0.9); }
        to   { opacity: 1; transform: translateX(-50%) scale(1); }
    }
}

.hidden { display: none !important; }