* {
    box-sizing: border-box;
}

:root {
    --bg: #111315;
    --panel: #1b1e21;
    --panel-2: #24282c;
    --border: #393f45;
    --text: #f2f0e8;
    --muted: #aeb4b9;
    --accent: #d59a3a;
    --accent-2: #f2bd5b;
    --danger-bg: #3a1d1d;
    --danger-border: #6c3434;
}

html {
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(213,154,58,.08), transparent 35%),
        var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
}

.page-shell {
    width: min(1160px, calc(100% - 32px));
    margin: 0 auto;
}

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 0;
    text-align: center;
}

.hero-badge,
.eyebrow {
    color: var(--accent-2);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.hero h1,
.auth-panel h1 {
    margin: 14px 0 4px;
    font-size: clamp(3rem, 10vw, 6.5rem);
    line-height: .95;
    text-transform: uppercase;
}

.auth-panel h1 {
    font-size: clamp(2rem, 7vw, 3.5rem);
}

.subtitle {
    margin: 8px 0 24px;
    color: var(--accent-2);
    font-size: clamp(1.05rem, 3vw, 1.5rem);
    font-weight: 700;
}

.lead {
    width: min(720px, 100%);
    margin: 0 auto;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 32px 0 48px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.btn-primary {
    background: var(--accent);
    color: #17130d;
}

.btn-primary:hover {
    background: var(--accent-2);
}

.btn-secondary {
    background: var(--panel);
    border-color: var(--border);
}

.feature-grid,
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.feature-card,
.panel,
.dashboard-card,
.coming-next {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(0,0,0,.2);
}

.feature-card {
    padding: 26px;
    text-align: left;
}

.feature-card > span {
    font-size: 2rem;
}

.feature-card h2 {
    margin: 14px 0 8px;
    font-size: 1.1rem;
}

.feature-card p,
.muted,
.coming-next p {
    color: var(--muted);
    line-height: 1.6;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 0;
}

.auth-panel {
    width: min(520px, 100%);
    padding: 30px;
}

.back-link {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--muted);
    text-decoration: none;
}

.form-grid {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.form-grid label {
    display: grid;
    gap: 8px;
    color: #dfe2e4;
    font-weight: 700;
}

.form-grid input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: #121416;
    color: var(--text);
    font: inherit;
}

.form-grid input:focus {
    border-color: var(--accent);
}

.alert {
    margin: 20px 0;
    padding: 14px 16px;
    border-radius: 8px;
    line-height: 1.5;
}

.alert-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
}

.auth-switch {
    margin-top: 22px;
    color: var(--muted);
    text-align: center;
}

.auth-switch a {
    color: var(--accent-2);
}

.game-body {
    background: #101214;
}

.topbar {
    min-height: 72px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
    background: #17191b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand-small {
    color: var(--accent-2);
    font-weight: 900;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.topbar-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: #d4d7d9;
    font-size: .92rem;
}

.topbar-stats a {
    color: var(--accent-2);
}

.garage-layout {
    min-height: calc(100vh - 72px);
    display: grid;
    grid-template-columns: 220px 1fr;
}

.side-menu {
    padding: 22px 14px;
    border-right: 1px solid var(--border);
    background: #151719;
}

.side-menu h2 {
    padding: 0 10px;
    margin: 0 0 14px;
    font-size: .85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.side-menu a {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 10px;
    margin-bottom: 5px;
    border-radius: 8px;
    text-decoration: none;
    color: #dfe2e4;
}

.side-menu a.active {
    background: rgba(213,154,58,.13);
    color: var(--accent-2);
}

.side-menu a.disabled {
    opacity: .52;
    pointer-events: none;
}

.side-menu small {
    font-size: .65rem;
}

.garage-content {
    width: min(1180px, 100%);
    padding: 28px;
}

.garage-sign {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.garage-sign > span {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: var(--accent);
    font-size: 1.7rem;
}

.garage-sign small {
    color: var(--muted);
    letter-spacing: .12em;
}

.garage-sign h1 {
    margin: 4px 0 0;
}

.workshop-scene {
    min-height: 420px;
    border: 1px solid #4a4336;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(to bottom, #363534 0 67%, #262729 67% 100%);
    box-shadow: inset 0 0 90px rgba(0,0,0,.35);
}

.workshop-wall {
    min-height: 160px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 28px;
}

.wall-sign {
    padding: 11px 16px;
    background: #d8d0bc;
    border: 4px solid #302e29;
    color: #2a2926;
    font-weight: 900;
    letter-spacing: .06em;
    transform: rotate(-1deg);
}

.tool-board {
    padding: 16px;
    background: #222;
    border: 4px solid #171717;
    font-size: 1.5rem;
}

.car-placeholder {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: min(560px, 90%);
    padding: 24px;
    border: 2px dashed rgba(255,255,255,.2);
    border-radius: 14px;
    background: rgba(0,0,0,.2);
    text-align: center;
}

.car-emoji {
    font-size: 6rem;
    filter: grayscale(.2);
}

.car-placeholder h2 {
    margin: 8px 0;
}

.car-placeholder p {
    margin: 0;
    color: var(--muted);
}

.dashboard-grid {
    margin-top: 18px;
}

.dashboard-card {
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
}

.card-icon {
    font-size: 1.7rem;
}

.dashboard-card small {
    display: block;
    color: var(--muted);
    margin-bottom: 5px;
    font-size: .72rem;
    letter-spacing: .08em;
}

.coming-next {
    margin-top: 18px;
    padding: 22px;
}

.coming-next h2 {
    margin-top: 0;
}

@media (max-width: 850px) {
    .feature-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .garage-layout {
        grid-template-columns: 1fr;
    }

    .side-menu {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        display: flex;
        overflow-x: auto;
        gap: 6px;
    }

    .side-menu h2 {
        display: none;
    }

    .side-menu a {
        white-space: nowrap;
        margin: 0;
    }
}

@media (max-width: 640px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .garage-content {
        padding: 18px 12px;
    }

    .workshop-scene {
        min-height: 390px;
    }

    .workshop-wall {
        padding: 16px;
        flex-direction: column;
    }

    .tool-board {
        font-size: 1.15rem;
    }

    .car-emoji {
        font-size: 4.5rem;
    }
}


/* ===== 02 - Munkafelvétel ===== */
.customer-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
}

.customer-avatar {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #111315;
    border: 1px solid var(--border);
    font-size: 1.8rem;
}

.customer-info small {
    color: var(--accent-2);
    font-weight: 800;
    letter-spacing: .09em;
}

.customer-info h2 {
    margin: 5px 0 10px;
}

.customer-info blockquote {
    margin: 0;
    padding: 12px 15px;
    border-left: 3px solid var(--accent);
    background: rgba(0,0,0,.18);
    color: #f3f0e8;
    font-style: italic;
}

.job-note,
.secret-note {
    color: var(--muted);
}

.offer-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.active-car {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);
    width: min(620px, 92%);
    text-align: center;
}

.car-plate {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 5px;
    border-radius: 4px;
    background: #e8e4d8;
    color: #171717;
    font-weight: 900;
    font-size: .78rem;
}

.active-car h2 {
    margin: 8px 0;
}

.customer-complaint {
    color: #d9dcde;
    margin: 8px auto 16px;
    max-width: 520px;
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    .customer-card {
        grid-template-columns: 1fr;
    }

    .customer-avatar {
        display: none;
    }

    .offer-actions {
        width: 100%;
    }

    .offer-actions form,
    .offer-actions .btn {
        width: 100%;
    }
}


/* ===== 03 - Motortér és diagnosztika ===== */
.engine-page {
    width: min(1280px, calc(100% - 28px));
    margin: 0 auto;
    padding: 28px 0 48px;
}

.engine-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: 18px;
}

.engine-header h1 {
    margin: 6px 0 8px;
    font-size: clamp(1.8rem, 5vw, 3rem);
}

.engine-tip {
    max-width: 360px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    display: grid;
    gap: 4px;
}

.engine-tip span {
    color: var(--muted);
    line-height: 1.45;
    font-size: .92rem;
}

.engine-bay {
    border: 1px solid #4a4336;
    border-radius: 16px;
    padding: 22px;
    background:
        linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)),
        repeating-linear-gradient(
            90deg,
            #303233 0,
            #303233 54px,
            #2b2d2e 54px,
            #2b2d2e 56px
        );
    box-shadow: inset 0 0 100px rgba(0,0,0,.3);
}

.engine-bay-title {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 3px solid #252525;
    background: #d8d0bc;
    color: #222;
    font-weight: 900;
    letter-spacing: .08em;
}

.engine-map {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.engine-part {
    min-height: 255px;
    padding: 18px;
    border: 1px solid #4c5155;
    border-radius: 12px;
    background: rgba(20,22,24,.94);
    transition: transform .15s ease, border-color .15s ease;
}

.engine-part:hover {
    transform: translateY(-2px);
    border-color: #686f75;
}

.engine-part.is-inspected {
    border-color: #7a653e;
}

.engine-part.is-diagnosed {
    border-color: var(--accent);
}

.engine-part-top {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 15px;
}

.part-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #2c3033;
    font-size: 1.45rem;
}

.engine-part-top small {
    display: block;
    color: #858c91;
    font-size: .65rem;
    letter-spacing: .07em;
}

.engine-part h2 {
    margin: 3px 0 0;
    font-size: 1.08rem;
}

.part-state {
    margin: 10px 0;
    font-weight: 800;
}

.part-state.unknown {
    color: #b5bbc0;
}

.inspection-result {
    min-height: 72px;
    margin-bottom: 12px;
    padding: 11px 12px;
    border-left: 3px solid var(--accent);
    background: rgba(213,154,58,.08);
    line-height: 1.45;
}

.inspection-result strong,
.inspection-result span {
    display: block;
}

.inspection-result span {
    color: #d5d8da;
    margin-top: 4px;
    font-size: .9rem;
}

.condition-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 7px;
}

.condition-row strong {
    color: var(--accent-2);
    font-size: 1.15rem;
}

.condition-bar {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #0f1112;
    border: 1px solid #3e4347;
}

.condition-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8f6630, var(--accent-2));
}

.diagnostic-note {
    min-height: 42px;
    color: #d5d8da;
    font-size: .9rem;
}

.engine-footer-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
}

.engine-footer-panel p {
    margin: 0;
    color: var(--muted);
}

@media (max-width: 980px) {
    .engine-map {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .engine-header,
    .engine-footer-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .engine-map {
        grid-template-columns: 1fr;
    }

    .engine-bay {
        padding: 14px;
    }
}


/* ===== 04 - Raktár, bolt, csere ===== */
.shop-grid,.inventory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.shop-card,.inventory-card{padding:20px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.shop-card h2,.inventory-card h2{margin:12px 0 8px}
.shop-card .price{display:block;margin:14px 0;font-size:1.25rem;color:var(--accent-2)}
.new-part{display:inline-block;padding:5px 8px;border-radius:5px;background:rgba(213,154,58,.13);color:var(--accent-2);font-size:.75rem;font-weight:900}
.inventory-card small{color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.shop-message{border:1px solid #5e573c;background:#29271d}
.removed-warning{margin:12px 0;padding:10px;border:1px dashed var(--accent);border-radius:8px;color:var(--accent-2)}
.install-form{display:grid;gap:9px;margin-top:10px}
.install-form select{width:100%;min-height:44px;padding:0 10px;border:1px solid var(--border);border-radius:7px;background:#111315;color:var(--text)}
@media(max-width:900px){.shop-grid,.inventory-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.shop-grid,.inventory-grid{grid-template-columns:1fr}}


/* ===== 05 - Próbaindítás és munka lezárása ===== */
.test-footer{align-items:center}
.test-footer-info{display:grid;gap:4px;flex:1}
.test-footer-info span{color:var(--muted);font-size:.9rem}
.test-page{width:min(920px,calc(100% - 28px));margin:0 auto;padding:42px 0}
.test-scene{padding:34px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,var(--panel-2),var(--panel));text-align:center}
.test-scene.test-success{border-color:#5f744e}
.test-scene.test-failed{border-color:#79564e}
.ignition-key{font-size:3rem}
.test-scene h1{margin:8px 0 26px;font-size:clamp(1.8rem,5vw,3rem)}
.engine-sound{display:grid;gap:6px;place-items:center;margin:20px auto;padding:26px;border:1px solid #40464a;border-radius:14px;background:#111315}
.engine-sound .sound-icon{font-size:3.5rem}
.engine-sound strong{font-size:1.5rem;letter-spacing:.08em}
.engine-sound small{color:var(--muted)}
.test-result{margin:22px 0}
.test-result h2{margin-bottom:8px}
.test-result p{color:var(--muted);line-height:1.6}
.customer-reminder{margin:22px auto;max-width:650px;text-align:left}
.customer-reminder small{color:var(--accent-2);font-weight:800;letter-spacing:.08em}
.customer-reminder blockquote{margin:8px 0 0;padding:14px 16px;border-left:3px solid var(--accent);background:rgba(0,0,0,.18);font-style:italic}
.test-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.test-count{margin-top:24px;color:#7f878c;font-size:.8rem}
.completed-job-banner{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding:18px 20px;border:1px solid #5f744e;border-radius:14px;background:rgba(95,116,78,.12)}
.completed-icon{font-size:2.2rem}
.completed-job-banner small{color:#b8d19f;font-weight:900;letter-spacing:.08em}
.completed-job-banner h2{margin:4px 0}
.completed-job-banner p{margin:0;color:var(--muted)}
.completed-job-banner strong{color:var(--text)}
@media(max-width:720px){
 .test-footer{align-items:stretch}
 .completed-job-banner{align-items:flex-start}
 .test-scene{padding:22px 16px}
}

/* ===== 06 - Mobil/tablet fekvő játékmód ===== */
.orientation-lock{display:none}

@media (hover:none) and (pointer:coarse) and (orientation:portrait){
 body.game-body>*:not(.orientation-lock){display:none!important}
 body.game-body .orientation-lock{
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  padding:28px;background:radial-gradient(circle at center,rgba(213,154,58,.12),transparent 45%),#101214
 }
 .rotate-card{
  width:min(440px,100%);padding:30px 24px;border:1px solid #494f54;border-radius:18px;
  background:linear-gradient(180deg,#24282c,#191c1f);text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.38)
 }
 .rotate-phone{display:inline-block;margin-bottom:18px;font-size:4rem;animation:myserviceRotate 2.2s ease-in-out infinite}
 .rotate-card h1{margin:8px 0 12px;font-size:1.65rem}
 .rotate-card p{margin:0;color:#aeb4b9;line-height:1.6}
 @keyframes myserviceRotate{0%,25%{transform:rotate(0)}65%,100%{transform:rotate(90deg)}}
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape){
 .topbar{min-height:58px;padding:8px 14px;flex-direction:row;align-items:center}
 .topbar-stats{gap:10px;font-size:.8rem}
 .garage-layout{min-height:calc(100vh - 58px);grid-template-columns:150px 1fr}
 .side-menu{display:block;padding:12px 8px;border-right:1px solid var(--border);border-bottom:0;overflow:visible}
 .side-menu h2{display:block;padding:0 8px}
 .side-menu a{padding:9px 8px;font-size:.8rem;white-space:normal}
 .garage-content{padding:14px}
 .garage-sign{margin-bottom:10px}
 .garage-sign>span{width:42px;height:42px;font-size:1.25rem}
 .garage-sign h1{font-size:1.25rem}
 .customer-card{margin-bottom:10px;padding:12px}
 .workshop-scene{min-height:min(58vh,430px)}
 .dashboard-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
 .dashboard-card{padding:10px}
 .engine-page{width:calc(100% - 20px);padding:12px 0 24px}
 .engine-header{margin-bottom:10px;align-items:center}
 .engine-header h1{font-size:1.45rem;margin:3px 0 5px}
 .engine-tip{max-width:310px;padding:9px 11px}
 .engine-bay{padding:12px}
 .engine-bay-title{margin-bottom:10px;padding:6px 9px}
 .engine-map{grid-template-columns:repeat(3,1fr);gap:8px}
 .engine-part{min-height:205px;padding:11px}
 .engine-part-top{margin-bottom:8px}
 .engine-part h2{font-size:.92rem}
 .inspection-result{min-height:58px;padding:8px;font-size:.82rem}
 .btn{min-height:40px;padding:0 13px;font-size:.82rem}
 .shop-grid,.inventory-grid{grid-template-columns:repeat(3,1fr);gap:8px}
 .shop-card,.inventory-card{padding:12px}
 .test-page{width:min(900px,calc(100% - 20px));padding:14px 0}
 .test-scene{padding:18px}
 .test-scene h1{margin:4px 0 12px;font-size:1.5rem}
 .engine-sound{margin:10px auto;padding:14px}
}


/* ===== 07 - Autóbontó ===== */
.junkyard-page{
    width:min(1320px,calc(100% - 28px));
    margin:0 auto;
    padding:26px 0 48px
}
.junkyard-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px
}
.junkyard-hero h1{margin:6px 0 8px;font-size:clamp(2rem,5vw,3.4rem)}
.junkyard-timer{
    min-width:220px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel);
    display:grid;
    gap:3px;
    text-align:right
}
.junkyard-timer small,.junkyard-timer span{color:var(--muted)}
.junkyard-timer strong{color:var(--accent-2);font-size:1.2rem}
.junkyard-message{border:1px solid #5d563d;background:#29271e}
.wreck-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:14px
}
.wreck-tab{
    display:flex;
    gap:12px;
    align-items:center;
    padding:14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel);
    text-decoration:none
}
.wreck-tab.active{
    border-color:var(--accent);
    background:rgba(213,154,58,.10)
}
.wreck-tab strong,.wreck-tab small{display:block}
.wreck-tab small{margin-top:4px;color:var(--muted)}
.wreck-icon{font-size:2rem}
.junkyard-workarea{
    display:grid;
    grid-template-columns:minmax(300px,38%) 1fr;
    gap:14px
}
.wreck-scene{
    min-height:520px;
    padding:22px;
    border:1px solid #4e453a;
    border-radius:14px;
    background:
        linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.25)),
        linear-gradient(#4c4b47 0 60%,#2b2a27 60% 100%);
    text-align:center;
    box-shadow:inset 0 0 70px rgba(0,0,0,.22)
}
.wreck-yard-sign{
    display:inline-block;
    padding:8px 11px;
    border:3px solid #242424;
    background:#ded5bf;
    color:#292929;
    font-size:.78rem;
    font-weight:900
}
.wreck-car{
    margin-top:95px;
    font-size:7rem;
    filter:grayscale(.3) sepia(.15)
}
.wreck-car-name{font-size:1.25rem;font-weight:900}
.wreck-scene p{color:#c1c4c6;line-height:1.5}
.wreck-parts{
    padding:18px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(22,24,26,.75)
}
.wreck-parts-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px
}
.wreck-parts-head h2{margin:4px 0 0}
.wreck-parts-head>span{color:var(--muted)}
.junk-parts-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px
}
.junk-part{
    padding:14px;
    border:1px solid var(--border);
    border-radius:11px;
    background:#17191b
}
.junk-part.sold{opacity:.48}
.junk-part-title{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:10px
}
.junk-part-title>span{font-size:1.5rem}
.junk-part-title small{
    color:#81888e;
    font-size:.62rem;
    letter-spacing:.06em
}
.junk-part-title h3{margin:2px 0 0;font-size:1rem}
.junk-condition-text{
    min-height:38px;
    color:#cfd2d4;
    font-size:.86rem
}
.junk-price{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:8px;
    margin:12px 0
}
.junk-price small{color:var(--muted)}
.junk-price strong{color:var(--accent-2);font-size:1.1rem}
.sold-label{
    padding:10px;
    border:1px dashed #6e7376;
    border-radius:7px;
    text-align:center;
    color:#999fa3;
    font-weight:800;
    font-size:.75rem
}
@media(max-width:980px){
    .junkyard-workarea{grid-template-columns:1fr}
    .wreck-scene{min-height:330px}
    .wreck-car{margin-top:40px}
}
@media(max-width:760px){
    .wreck-tabs{grid-template-columns:1fr}
    .junk-parts-grid{grid-template-columns:1fr}
    .junkyard-hero{align-items:stretch;flex-direction:column}
    .junkyard-timer{text-align:left}
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape){
    .junkyard-page{width:calc(100% - 18px);padding:10px 0 22px}
    .junkyard-hero{margin-bottom:8px;align-items:center}
    .junkyard-hero h1{font-size:1.45rem;margin:2px 0}
    .junkyard-timer{min-width:180px;padding:8px 10px;font-size:.78rem}
    .wreck-tabs{gap:6px;margin-bottom:8px}
    .wreck-tab{padding:8px;font-size:.78rem}
    .wreck-icon{font-size:1.4rem}
    .junkyard-workarea{grid-template-columns:32% 1fr;gap:8px}
    .wreck-scene{min-height:360px;padding:10px}
    .wreck-car{margin-top:62px;font-size:5rem}
    .wreck-parts{padding:10px}
    .junk-parts-grid{grid-template-columns:repeat(2,1fr);gap:6px}
    .junk-part{padding:9px}
}


/* ===== 08 - Látványos műhely / Škoda 120 játékfelület ===== */
.visual-garage-shell{margin-bottom:18px}
.visual-garage-scene{
 position:relative;min-height:560px;border:1px solid #4a4336;border-radius:16px;overflow:hidden;
 background:#181a1c;box-shadow:0 24px 70px rgba(0,0,0,.28)
}
.visual-garage-bg{
 position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
 filter:saturate(.88) contrast(1.03) brightness(.88)
}
.visual-garage-scene::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(7,9,10,.78) 0 22%,transparent 34% 68%,rgba(7,9,10,.76) 80% 100%),
 linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.08) 60%,rgba(0,0,0,.3))
}
.visual-overlay{
 position:absolute;z-index:2;top:18px;width:310px;padding:14px;border:1px solid rgba(111,121,128,.45);
 border-radius:12px;background:rgba(17,20,23,.88);backdrop-filter:blur(3px);box-shadow:0 12px 30px rgba(0,0,0,.28)
}
.visual-overlay-left{left:18px}
.visual-overlay-right{right:18px}
.visual-panel-title{
 padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);
 font-weight:900;font-size:1.05rem
}
.visual-job-card{
 display:grid;grid-template-columns:48px 1fr;gap:10px;padding:10px;margin-bottom:10px;border-radius:9px;
 background:rgba(255,255,255,.035);color:#e8eaeb;font-size:.88rem;line-height:1.45
}
.visual-customer-avatar{
 display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#24282b;font-size:1.7rem
}
.visual-complaint{margin-top:6px;color:#c8cccf}
.visual-action{
 display:flex;align-items:center;min-height:44px;margin-top:7px;padding:0 12px;border:1px solid #40474d;
 border-radius:8px;background:rgba(31,35,39,.92);text-decoration:none;font-weight:800;font-size:.88rem
}
.visual-action:hover,.visual-action.active{border-color:#4d95ff;background:rgba(32,75,129,.72)}
.visual-empty-job{display:grid;place-items:center;gap:7px;padding:24px 12px;text-align:center;color:#d7dbdd}
.visual-empty-job span{font-size:2.8rem}
.visual-empty-job p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.4}
.visual-car-title{
 display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;margin-bottom:12px;
 border-bottom:1px solid rgba(255,255,255,.08)
}
.visual-car-title small{display:block;color:#8d969d;font-size:.63rem;letter-spacing:.08em}
.visual-car-title strong{display:block;margin-top:3px;font-size:1.35rem}
.visual-car-title>span{color:#cfd4d7;font-size:1.1rem}
.visual-car-specs{display:grid;gap:8px}
.visual-car-specs div{
 display:flex;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.055)
}
.visual-car-specs span{color:#adb4b9}
.visual-car-note{margin:14px 0 0;color:#bfc5c9;line-height:1.5;font-size:.86rem}
.visual-hotspot{
 position:absolute;z-index:3;display:block;border-radius:50%;left:40%;top:48%;width:26%;height:28%
}
.visual-hotspot:hover{
 outline:2px solid rgba(77,149,255,.82);background:rgba(77,149,255,.08);
 box-shadow:0 0 0 8px rgba(77,149,255,.05)
}
.visual-garage-caption{
 position:absolute;z-index:2;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:10px;
 align-items:center;padding:8px 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;
 background:rgba(10,12,14,.74);backdrop-filter:blur(3px);font-size:.78rem;white-space:nowrap
}
.visual-garage-caption span{color:#b9c0c5}
@media(max-width:1100px){.visual-overlay{width:270px}}
@media(max-width:850px){
 .visual-garage-scene{min-height:500px}
 .visual-overlay{width:235px;padding:10px}
 .visual-overlay-right{display:none}
 .visual-garage-scene::after{background:linear-gradient(90deg,rgba(7,9,10,.8) 0 28%,transparent 42% 100%)}
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape){
 .visual-garage-scene{min-height:calc(100vh - 130px)}
 .visual-overlay{top:8px;left:8px;width:240px;padding:8px}
 .visual-overlay-right{display:none}
 .visual-panel-title{font-size:.9rem}
 .visual-job-card{font-size:.76rem;grid-template-columns:38px 1fr;padding:7px}
 .visual-customer-avatar{width:38px;height:38px;font-size:1.3rem}
 .visual-action{min-height:36px;font-size:.75rem;padding:0 9px}
 .visual-garage-caption{bottom:8px;font-size:.68rem;padding:6px 10px}
 .visual-hotspot{left:38%;top:44%;width:34%;height:34%}
}


/* ===== 09 - Tiszta háttérkép + valódi HTML kezelőfelület ===== */
.visual-garage-bg{
    filter:saturate(.92) contrast(1.04) brightness(.86);
}

.visual-garage-scene::after{
    background:
        linear-gradient(90deg,rgba(7,9,10,.72) 0 21%,transparent 34% 69%,rgba(7,9,10,.68) 81% 100%),
        linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.02) 62%,rgba(0,0,0,.28));
}

.visual-overlay{
    border:1px solid rgba(108,125,139,.62);
    background:linear-gradient(180deg,rgba(16,21,25,.95),rgba(13,17,20,.93));
    box-shadow:0 16px 36px rgba(0,0,0,.34);
}

.visual-action{
    transition:background .15s ease,border-color .15s ease,transform .15s ease;
}

.visual-action:hover{
    transform:translateX(2px);
}

.visual-action.active{
    box-shadow:inset 3px 0 0 #4d95ff;
}

.visual-car-specs strong{
    color:#f3f5f6;
}

.visual-garage-caption{
    border-color:rgba(255,255,255,.16);
    background:rgba(9,12,14,.82);
}

@media (hover:none) and (pointer:coarse) and (orientation:landscape){
    .visual-garage-bg{
        object-position:center center;
    }
}


/* ===== 10 - Kompaktabb játékfelület + több retró típus ===== */
.garage-content{max-width:1380px}
.garage-sign{margin-bottom:10px}
.visual-garage-scene{min-height:610px}
.visual-overlay{width:255px;padding:10px}
.visual-overlay-left{left:10px;top:10px}
.visual-overlay-right{right:10px;top:10px;width:238px}
.visual-job-card{grid-template-columns:38px 1fr;padding:7px;font-size:.8rem}
.visual-customer-avatar{width:38px;height:38px;font-size:1.25rem}
.visual-panel-title{font-size:.92rem;padding-bottom:7px;margin-bottom:7px}
.visual-action{min-height:38px;margin-top:5px;font-size:.78rem;padding:0 10px}
.visual-car-title strong{font-size:1.05rem}
.visual-car-title>span{font-size:.9rem}
.visual-car-specs{gap:5px;font-size:.82rem}
.visual-car-specs div{padding-bottom:5px}
.visual-car-note{font-size:.78rem;margin-top:9px}
.visual-garage-caption{bottom:8px}
.dashboard-grid{margin-top:10px}
.dashboard-card{padding:12px}
.car-filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.car-filter-tabs a{padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);text-decoration:none;font-weight:800;font-size:.85rem}
.car-filter-tabs a.active{border-color:var(--accent);color:var(--accent-2);background:rgba(213,154,58,.10)}
.shop-card small{color:var(--muted)}
@media(max-width:1100px){
 .visual-overlay-right{display:none}
 .visual-garage-scene::after{background:linear-gradient(90deg,rgba(7,9,10,.68) 0 25%,transparent 42% 100%)}
}
@media (hover:none) and (pointer:coarse) and (orientation:landscape){
 .visual-garage-scene{min-height:calc(100vh - 110px)}
 .visual-overlay{width:215px}
 .visual-action{min-height:33px;font-size:.7rem}
}