/* Times Square Survival -- Apple Liquid Glass UI */

:root {
    --glass:        rgba(255,255,255,0.08);
    --glass-heavy:  rgba(255,255,255,0.12);
    --glass-hover:  rgba(255,255,255,0.06);
    --border:       rgba(255,255,255,0.18);
    --border-light: rgba(255,255,255,0.10);
    --blur:         blur(20px);
    --blur-heavy:   blur(40px);
    --accent:       #0071e3;
    --accent-light: #2997ff;
    --text-1:       rgba(255,255,255,0.92);
    --text-2:       rgba(255,255,255,0.55);
    --text-3:       rgba(255,255,255,0.35);
    --green:        #30d158;
    --yellow:       #ffd60a;
    --orange:       #ff9f0a;
    --red:          #ff453a;
    --pink:         #ff375f;
    --cyan:         #64d2ff;
    --radius:       12px;
    --radius-sm:    8px;
    --radius-xs:    6px;
    --radius-pill:  100px;
    --font:         -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',system-ui,sans-serif;
    --font-mono:    'SF Mono',ui-monospace,monospace;
    --spring:       cubic-bezier(0.34,1.56,0.64,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
button { font-family:inherit; }

body {
    background: #0a0a0c;
    color: var(--text-1);
    font-family: var(--font);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

canvas#game {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    display:block;
}

/* ---- Panel corner chrome ---- */

.corners { position:relative; }
.corners::before {
    content:'';
    position:absolute;
    top:4px; left:4px;
    width:8px; height:8px;
    border-top:1px solid rgba(255,255,255,0.28);
    border-left:1px solid rgba(255,255,255,0.28);
    pointer-events:none;
    z-index:1;
}
.corners::after {
    content:'';
    position:absolute;
    bottom:4px; right:4px;
    width:8px; height:8px;
    border-bottom:1px solid rgba(255,255,255,0.28);
    border-right:1px solid rgba(255,255,255,0.28);
    pointer-events:none;
    z-index:1;
}

/* ---- Menu Screen ---- */

#menu {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    z-index:100;
    background:#0a0a0c;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    overflow:hidden;
}

#skyline-bg {
    position:absolute;
    bottom:0; left:0; right:0;
    pointer-events:none;
    line-height:0;
}
#skyline-bg svg {
    width:100%;
    height:auto;
    display:block;
}

.menu-title {
    font-size:clamp(36px,8vw,56px);
    font-weight:700;
    color:var(--text-1);
    letter-spacing:-0.02em;
    line-height:1;
    position:relative;
}

.menu-subtitle {
    font-size:clamp(13px,3vw,16px);
    font-weight:500;
    color:var(--accent-light);
    letter-spacing:0.15em;
    text-transform:uppercase;
    margin-bottom:40px;
    position:relative;
}

.menu-btn {
    background:var(--accent);
    border:none;
    color:#fff;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    padding:14px 48px;
    border-radius:var(--radius-pill);
    letter-spacing:-0.01em;
    transition:transform 0.2s var(--spring),opacity 0.2s;
    position:relative;
}
.menu-btn:hover { transform:scale(1.04); opacity:0.9; }
.menu-btn:active { transform:scale(0.97); }

.menu-load-title {
    font-size:12px;
    font-weight:600;
    color:var(--text-3);
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-top:32px;
    margin-bottom:8px;
    position:relative;
}

.menu-slot-btn {
    background:var(--glass);
    border:1px solid var(--border-light);
    color:var(--text-1);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    padding:12px 20px;
    display:block;
    width:min(400px,85vw);
    text-align:left;
    border-radius:var(--radius-sm);
    transition:transform 0.2s var(--spring),background 0.2s;
    position:relative;
}
.menu-slot-btn:hover:not(:disabled):not(.empty) {
    transform:translateY(-2px);
    background:var(--glass-heavy);
}
.menu-slot-btn.empty { color:var(--text-3); cursor:default; pointer-events:none; }
.menu-slot-btn:disabled { cursor:default; opacity:0.4; }

/* ---- HUD ---- */

#hud {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    z-index:10;
    pointer-events:none;
    display:none;
}
#hud > * { pointer-events:auto; }

/* Resource Bar */

#resource-bar {
    position:absolute;
    top:12px; left:12px; right:12px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:8px 14px;
    background:var(--glass);
    backdrop-filter:var(--blur);
    -webkit-backdrop-filter:var(--blur);
    border:1px solid var(--border);
    border-radius:var(--radius);
    font-size:12px;
    font-weight:500;
    font-variant-numeric:tabular-nums;
}

.res-pill {
    display:flex;
    align-items:center;
    gap:4px;
    padding:3px 9px;
    border-radius:var(--radius-pill);
    background:var(--glass-hover);
    border:1px solid var(--border-light);
    font-size:11px;
    font-family:var(--font-mono);
    white-space:nowrap;
}
.res-icon { font-size:11px; }
.res-val { font-weight:600; }
.res-label { font-size:9px; color:var(--text-3); letter-spacing:0.06em; }

/* Build Menu */

#build-menu {
    position:absolute;
    top:58px; left:12px;
    width:200px;
    padding:12px;
    background:var(--glass-heavy);
    border:1px solid var(--border);
    border-radius:var(--radius);
    display:none;
}

.hud-title {
    font-size:11px;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--text-2);
    margin-bottom:8px;
}

.build-btn {
    display:block;
    width:100%;
    text-align:left;
    background:transparent;
    border:1px solid transparent;
    color:var(--text-1);
    font-size:12px;
    font-weight:500;
    padding:8px 10px;
    cursor:pointer;
    margin-bottom:2px;
    border-radius:var(--radius-xs);
    transition:background 0.15s,transform 0.2s var(--spring);
}
.build-btn:hover { background:var(--glass-hover); transform:translateY(-1px); }
.build-btn.selected { background:rgba(0,113,227,0.2); border-color:rgba(0,113,227,0.4); }
.build-btn .cost {
    font-size:10px;
    font-family:var(--font-mono);
    color:var(--text-3);
    display:block;
    margin-top:2px;
}
.demolish-btn { color:var(--red); }
.demolish-btn.selected { background:rgba(255,69,58,0.15); border-color:rgba(255,69,58,0.3); }

/* Colonist Panel */

#colonist-panel {
    position:absolute;
    top:58px; right:12px;
    width:240px;
    padding:14px;
    background:var(--glass-heavy);
    border:1px solid var(--border);
    border-radius:var(--radius);
    display:none;
}

.panel-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.trait-badge {
    font-size:10px;
    font-weight:600;
    color:var(--pink);
    padding:3px 8px;
    background:rgba(255,55,95,0.12);
    border-radius:var(--radius-pill);
    margin-top:6px;
    display:inline-block;
}

.need-row {
    display:flex;
    align-items:center;
    gap:6px;
    margin:3px 0;
}

.need-label {
    font-size:10px;
    font-family:var(--font-mono);
    color:var(--text-2);
    width:30px;
}

.bar-bg {
    flex:1;
    height:4px;
    background:var(--glass);
    border-radius:2px;
    overflow:hidden;
}

.bar-fill {
    height:100%;
    border-radius:2px;
    transform-origin:left;
    transition:transform 0.3s ease;
    will-change:transform;
}

.need-val {
    font-size:10px;
    font-family:var(--font-mono);
    color:var(--text-3);
    width:25px;
    text-align:right;
}

.stat-dots { display:flex; gap:2px; flex:1; }
.stat-dot { width:12px; height:4px; background:var(--glass); border-radius:2px; }
.stat-dot.filled { background:var(--accent-light); }

.job-buttons { display:flex; gap:4px; margin-top:6px; }

.job-btn {
    background:var(--glass-hover);
    border:none;
    color:var(--text-2);
    font-size:10px;
    font-weight:600;
    padding:5px 10px;
    cursor:pointer;
    border-radius:var(--radius-xs);
    transition:transform 0.2s var(--spring),background 0.15s;
}
.job-btn:hover { transform:scale(1.05); background:var(--glass); }
.job-btn.active { background:var(--accent); color:#fff; }

/* Game Log */

#game-log {
    position:absolute;
    bottom:64px; left:12px;
    width:260px;
    max-height:56px;
    overflow:hidden;
    padding:8px 12px;
    background:var(--glass);
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    font-size:10px;
    font-family:var(--font-mono);
    color:var(--text-2);
    line-height:1.5;
    -webkit-mask-image:linear-gradient(transparent,black 35%);
    mask-image:linear-gradient(transparent,black 35%);
}

/* Time Display */

#time-display {
    position:absolute;
    bottom:64px; right:12px;
    font-size:11px;
    font-family:var(--font-mono);
    font-weight:500;
    font-variant-numeric:tabular-nums;
    color:var(--text-3);
    padding:6px 10px;
    background:var(--glass);
    border:1px solid var(--border-light);
    border-radius:var(--radius-xs);
}

/* Minimap */

#minimap-container {
    position:absolute;
    bottom:96px; right:12px;
}

#minimap-container::before {
    content:'MINIMAP';
    position:absolute;
    top:6px; left:8px;
    font-size:8px;
    font-family:var(--font-mono);
    color:var(--text-3);
    letter-spacing:0.1em;
    z-index:1;
    pointer-events:none;
}

canvas#minimap {
    width:140px; height:140px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    cursor:pointer;
    display:block;
}

/* Pause Overlay */

#pause-overlay {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:20;
    pointer-events:none;
}

.pause-card {
    background:var(--glass-heavy);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border);
    border-radius:20px;
    padding:36px 48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    pointer-events:auto;
}

.pause-title {
    font-size:32px;
    font-weight:700;
    color:var(--text-1);
    letter-spacing:-0.02em;
    margin-bottom:8px;
}

.pause-action-btn {
    background:var(--glass);
    border:1px solid var(--border);
    color:var(--text-1);
    font-size:14px;
    font-weight:600;
    padding:10px 0;
    cursor:pointer;
    border-radius:var(--radius-pill);
    width:200px;
    text-align:center;
    transition:transform 0.2s var(--spring),background 0.15s;
    font-family:var(--font);
}
.pause-action-btn:hover { transform:translateY(-2px); background:var(--glass-heavy); }
.pause-action-btn.primary { background:var(--accent); border-color:transparent; color:#fff; }
.pause-action-btn.danger { color:var(--red); border-color:rgba(255,69,58,0.3); }

/* Save Indicator */

#save-indicator {
    position:fixed;
    top:56px; right:12px;
    padding:8px 16px;
    background:var(--glass);
    border:1px solid rgba(48,209,88,0.3);
    border-radius:var(--radius-pill);
    color:var(--green);
    font-size:12px;
    font-weight:600;
    z-index:30;
    display:none;
    animation:saveIn 0.3s var(--spring);
}

@keyframes saveIn {
    from { opacity:0; transform:translateY(-8px) scale(0.95); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

/* Settings — slide-in panel from right */

#settings-overlay {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.35);
    display:none;
    align-items:stretch;
    justify-content:flex-end;
    z-index:50;
}

.settings-panel {
    width:300px;
    height:100%;
    overflow-y:auto;
    padding:28px;
    background:rgba(10,10,12,0.96);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-left:1px solid var(--border);
    animation:slideInRight 0.25s var(--spring);
}

@keyframes slideInRight {
    from { transform:translateX(100%); }
    to { transform:translateX(0); }
}

.ctrl-row {
    display:flex;
    align-items:center;
    font-size:12px;
    margin:6px 0;
    color:var(--text-2);
}

.ctrl-key {
    width:120px;
    font-weight:600;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--accent-light);
}

.save-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:8px 0;
}

.save-btn {
    background:var(--accent);
    border:none;
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:5px 14px;
    cursor:pointer;
    border-radius:var(--radius-pill);
    transition:transform 0.2s var(--spring),opacity 0.15s;
}
.save-btn:hover { transform:scale(1.05); opacity:0.9; }

/* Tutorial Overlay */

#tutorial-overlay {
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:60;
}

.tutorial-panel {
    max-width:min(440px,90vw);
    padding:28px;
    background:var(--glass-heavy);
    border:1px solid var(--border);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    gap:16px;
    cursor:pointer;
}

.tut-header { display:flex; justify-content:space-between; align-items:center; }

.tut-skip {
    background:var(--glass-hover);
    border:none;
    color:var(--text-2);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    padding:4px 12px;
    border-radius:var(--radius-pill);
    transition:background 0.15s;
}
.tut-skip:hover { background:var(--glass); }

.tut-hint {
    font-size:12px;
    color:var(--accent-light);
    text-align:center;
    font-weight:500;
    animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,100% { opacity:1; }
    50% { opacity:0.4; }
}

.tut-dots { display:flex; gap:6px; justify-content:center; }

.tut-dot {
    width:6px; height:6px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    transition:background 0.2s;
}
.tut-dot.active { background:var(--accent); }

hr { border:none; border-top:1px solid var(--border-light); margin:8px 0; }

/* HUD utility classes */

.hud-yellow { color:var(--yellow); font-weight:600; }
.hud-cyan { color:var(--cyan); font-weight:700; }
.hud-pink { color:var(--pink); font-weight:600; }
.hud-muted { color:var(--text-3); }
.hud-muted-sm { font-size:10px; color:var(--text-3); }
.hud-section-title { font-size:12px; font-weight:600; color:var(--yellow); }
.hud-big-title { font-size:28px; font-weight:700; color:var(--cyan); }
.hud-panel-name { color:var(--yellow); font-weight:600; }
.hud-panel-level { color:var(--cyan); font-weight:600; }

/* Reduced motion */

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation-duration:0.01ms !important;
        transition-duration:0.01ms !important;
    }
}

/* Mobile adjustments */

@media (max-width:600px) {
    #resource-bar {
        top:8px; left:8px; right:8px;
        gap:4px; padding:6px 10px; font-size:10px;
        border-radius:var(--radius-sm);
        backdrop-filter:none; -webkit-backdrop-filter:none;
        background:rgba(10,10,12,0.92);
    }
    #build-menu, #colonist-panel {
        backdrop-filter:none; -webkit-backdrop-filter:none;
        background:rgba(10,10,12,0.92);
    }
    #build-menu { top:50px; left:8px; width:170px; padding:10px; }
    #colonist-panel { top:50px; right:8px; width:200px; padding:10px; }
    #game-log { bottom:56px; left:8px; width:220px; font-size:9px; }
    canvas#minimap { width:100px; height:100px; }
    .settings-panel { width:100%; }
}

/* Player Profile */

#player-profile {
    position:absolute;
    top:12px; right:12px;
    background:var(--glass);
    backdrop-filter:var(--blur);
    -webkit-backdrop-filter:var(--blur);
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    padding:10px 14px;
    min-width:180px;
    z-index:10;
}
.pp-title { font-weight:700; font-size:13px; color:var(--yellow); margin-bottom:4px; }
.pp-xp-track { height:4px; background:var(--glass); border-radius:2px; overflow:hidden; margin-bottom:4px; }
.pp-xp-fill { height:100%; background:var(--yellow); border-radius:2px; transition:width 0.4s ease; }
.pp-stats { font-size:10px; color:var(--text-2); font-family:var(--font-mono); }
.pp-quests { font-size:10px; color:var(--accent); margin-top:4px; cursor:pointer; }
.pp-quests:hover { text-decoration:underline; }

/* Quest Board */

#quest-board {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    background:rgba(10,10,12,0.94);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px;
    width:340px;
    max-height:70vh;
    overflow-y:auto;
    z-index:50;
}
.qb-header { font-weight:700; font-size:13px; letter-spacing:0.1em; color:#fff; display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.qb-close { cursor:pointer; color:var(--text-3); font-size:14px; padding:4px; }
.qb-close:hover { color:var(--red); }
.qb-add { text-align:center; padding:8px; border:1px dashed var(--border-light); border-radius:8px; color:var(--text-2); font-size:11px; cursor:pointer; margin-bottom:8px; letter-spacing:0.08em; }
.qb-add:hover { border-color:var(--accent); color:var(--accent); }
.qb-form { margin-bottom:12px; display:flex; flex-direction:column; gap:6px; }
.qb-input { background:var(--glass-hover); border:1px solid var(--border-light); border-radius:6px; padding:8px 10px; color:#fff; font-size:12px; outline:none; }
.qb-input:focus { border-color:var(--accent); }
.qb-row { display:flex; gap:6px; }
.qb-select { flex:1; background:var(--glass-hover); border:1px solid var(--border-light); border-radius:6px; padding:6px; color:#fff; font-size:11px; }
.qb-btn { flex:1; padding:8px; background:var(--accent); border:none; border-radius:6px; color:#fff; font-size:11px; font-weight:600; cursor:pointer; letter-spacing:0.06em; }
.qb-btn.dim { background:var(--glass-hover); color:var(--text-2); }
.qb-btn:hover { opacity:0.85; }
.qb-section { font-size:10px; letter-spacing:0.12em; color:var(--text-3); margin:10px 0 4px; }
.qb-quest { display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--glass-hover); border-radius:6px; margin-bottom:3px; }
.qb-quest.done { opacity:0.4; }
.qb-rank { font-weight:700; font-size:12px; width:18px; text-align:center; }
.qb-name { flex:1; font-size:12px; color:var(--text-1); }
.qb-xp { font-size:10px; color:var(--yellow); font-family:var(--font-mono); }
.qb-complete { cursor:pointer; color:var(--green); font-size:14px; padding:2px 6px; border-radius:4px; }
.qb-complete:hover { background:rgba(48,209,88,0.15); }

/* Toast */

#toast-msg {
    position:fixed;
    bottom:80px; left:50%;
    transform:translateX(-50%);
    background:rgba(255,214,10,0.15);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,214,10,0.3);
    border-radius:var(--radius-pill);
    padding:8px 24px;
    color:var(--yellow);
    font-size:13px;
    font-weight:600;
    z-index:200;
    transition:opacity 0.3s ease;
    pointer-events:none;
}