/* ============================================================
   PAPA'S BAKERIA STYLE GAME - papas_game.css
   ============================================================ */

/* ---- GAME WRAPPER ---- */
.pb-game-wrapper {
    position: relative;
    background: #1a0e05;
    border-radius: 20px;
    overflow: hidden;
    min-height: 650px;
    border: 3px solid #5c3a1e;
    box-shadow: 0 0 60px rgba(200,100,0,0.2), 0 20px 60px rgba(0,0,0,0.5);
    font-family: 'Inter', sans-serif;
}

/* ---- TICKET LINE ---- */
.pb-ticket-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: linear-gradient(90deg, #2e1a08, #3d2210);
    border-bottom: 2px solid #5c3a1e;
}
.pb-ticket-line-label {
    color: #c8860a;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}
.pb-ticket-slots {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
}
.pb-ticket {
    background: #fffde7;
    border: 2px solid #c8860a;
    border-radius: 6px 6px 0 0;
    padding: 6px 10px;
    font-size: 0.7rem;
    cursor: pointer;
    position: relative;
    color: #333;
    min-width: 80px;
    text-align: center;
    transition: transform 0.2s;
    box-shadow: 0 3px 0 #c8860a;
}
.pb-ticket::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: #888;
    border-radius: 2px 2px 0 0;
}
.pb-ticket.active-ticket { background: #fff9c4; transform: translateY(-4px); border-color: #e67e22; }
.pb-ticket strong { display: block; font-size: 0.65rem; color: #888; }

/* ---- HUD BAR ---- */
.pb-hud {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    background: linear-gradient(90deg, #0d0705, #1e1007);
    border-bottom: 2px solid #3d2210;
}
.pb-hud-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pb-hud-label {
    font-size: 0.6rem;
    color: #8a6840;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pb-hud-value {
    font-size: 1.2rem;
    font-weight: 900;
    color: #f5f5f5;
    line-height: 1;
}
.pb-hud-value.gold { color: #f0b429; }
.pb-hud-value.red { color: #ff5252; }
.pb-hud-btn {
    margin-left: auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #ccc;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.pb-hud-btn:hover { background: rgba(255,80,80,0.2); color: #ff7070; }

/* ---- MAIN LAYOUT ---- */
.pb-main-layout {
    display: grid;
    grid-template-columns: 220px 1fr 180px;
    min-height: 570px;
}

/* ---- CUSTOMER PANEL ---- */
.pb-customer-panel {
    background: linear-gradient(180deg, #1a3a1a 0%, #0d200d 100%);
    border-right: 2px solid #2e5c2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 16px;
    gap: 10px;
}
.pb-bakery-window {
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, #87ceeb 0%, #b0e0f7 100%);
    position: relative;
    border-bottom: 4px solid #4a2c0a;
    overflow: hidden;
}
.pb-window-pane {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(90deg, transparent 49%, rgba(255,255,255,0.3) 49%, rgba(255,255,255,0.3) 51%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(255,255,255,0.3) 49%, rgba(255,255,255,0.3) 51%, transparent 51%);
    border: 6px solid #4a2c0a;
}
.pb-window-sign {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: #c8860a;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 1px;
}
.pb-customer-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    width: 100%;
}
.pb-customer-avatar {
    position: relative;
    width: 80px;
    height: 80px;
}
.pb-customer-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #2e5c2e;
    object-fit: cover;
    animation: customerBob 2s ease-in-out infinite;
}
@keyframes customerBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.pb-customer-emotion {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 1.4rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.pb-speech-bubble {
    background: white;
    border-radius: 10px 10px 10px 0;
    padding: 8px 12px;
    width: 100%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    position: relative;
}
.pb-speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 12px;
    border: 4px solid transparent;
    border-top-color: white;
    border-right-color: white;
}
.pb-speech-bubble strong {
    display: block;
    font-size: 0.75rem;
    color: #333;
    margin-bottom: 3px;
}
.pb-speech-bubble span {
    font-size: 0.7rem;
    color: #666;
}
.pb-order-card {
    width: calc(100% - 24px);
    background: #fffde7;
    border-radius: 8px;
    padding: 10px 12px;
    border: 2px dashed #c8860a;
}
.pb-order-card-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    font-weight: 700;
    color: #4a2c0a;
    margin-bottom: 8px;
    border-bottom: 1px solid #c8860a;
    padding-bottom: 4px;
}
.pb-order-number { color: #c8860a; }
.pb-order-requirements { font-size: 0.7rem; color: #333; }
.pb-order-requirements .req-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
}
.pb-order-requirements .req-row.correct { color: #2e7d32; }
.pb-order-requirements .req-row.incorrect { color: #c62828; }
.pb-order-requirements .req-icon { font-size: 1rem; }
.pb-take-order-btn {
    margin: 4px 12px 0;
    padding: 10px 16px;
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border: none;
    border-radius: 999px;
    color: white;
    font-weight: 800;
    font-size: 0.8rem;
    cursor: pointer;
    width: calc(100% - 24px);
    box-shadow: 0 4px 0 #1b5e20;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}
.pb-take-order-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.pb-take-order-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1b5e20; }

/* ---- STATION AREA ---- */
.pb-station-area {
    display: flex;
    flex-direction: column;
    background: #0d0705;
}
.pb-station-tabs {
    display: flex;
    background: #1e1007;
    border-bottom: 2px solid #3d2210;
}
.pb-station-tab {
    flex: 1;
    padding: 12px 8px;
    background: transparent;
    border: none;
    color: #8a6840;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    border-right: 1px solid #3d2210;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pb-station-tab:last-child { border-right: none; }
.pb-station-tab.active {
    background: #3d2210;
    color: #f0b429;
    border-bottom: 3px solid #f0b429;
}
.pb-tab-icon { font-size: 1.3rem; }

/* ---- STATION ---- */
.pb-station {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.pb-station-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.18;
    filter: blur(1px);
}
.pb-station-content {
    position: relative;
    z-index: 2;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}
.pb-station-title {
    font-size: 1rem;
    font-weight: 800;
    color: #f0b429;
    margin: 0;
}
.pb-station-hint {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

/* ---- INGREDIENT SHELF ---- */
.pb-ingredient-shelf {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pb-ingredient {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: grab;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.07);
    border: 2px solid rgba(255,255,255,0.1);
    transition: all 0.2s;
    user-select: none;
}
.pb-ingredient:hover { background: rgba(255,200,100,0.15); border-color: #c8860a; transform: translateY(-4px); }
.pb-ingredient.dragging { opacity: 0.5; cursor: grabbing; }
.pb-ingredient span { font-size: 0.7rem; color: #ddd; font-weight: 600; }

/* Ingredient Visuals (CSS cakes/bowls) */
.pb-ing-visual {
    width: 64px;
    height: 45px;
    border-radius: 50% / 30%;
    position: relative;
    box-shadow: 0 8px 0 rgba(0,0,0,0.25);
}
.pb-ing-visual::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 10%;
    width: 80%;
    height: 35%;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
}
.cake-choco { background: linear-gradient(145deg, #8B5E3C, #5D3A1A); box-shadow: 0 8px 0 #3E2006; }
.cake-vainilla { background: linear-gradient(145deg, #F9E4A0, #EDD060); box-shadow: 0 8px 0 #C5A020; }
.cake-redvelvet { background: linear-gradient(145deg, #D32F2F, #8B1A1A); box-shadow: 0 8px 0 #4E0000; }
.cake-fresa { background: linear-gradient(145deg, #ff9a9e, #d84f68); box-shadow: 0 8px 0 #8f2940; }
.cake-zanahoria { background: linear-gradient(145deg, #f0a34a, #bf5b1b); box-shadow: 0 8px 0 #7f3514; }
.cake-coco { background: linear-gradient(145deg, #fff8e8, #d7c29e); box-shadow: 0 8px 0 #a88d61; }
.cake-moka { background: linear-gradient(145deg, #b77a52, #68402d); box-shadow: 0 8px 0 #3d2418; }
.cake-arequipe { background: linear-gradient(145deg, #edbb55, #b66b0d); box-shadow: 0 8px 0 #774207; }
.cake-limon { background: linear-gradient(145deg, #f3f28b, #b8c52d); box-shadow: 0 8px 0 #78830e; }
.cake-maracuya { background: linear-gradient(145deg, #ffd65e, #d98116); box-shadow: 0 8px 0 #87420a; }
.cake-oreo { background: linear-gradient(145deg, #534946, #1e1817); box-shadow: 0 8px 0 #0b0908; }
.cake-tres-leches { background: linear-gradient(145deg, #fff8df, #d9bd84); box-shadow: 0 8px 0 #a07c43; }

/* ---- MOLD AREA ---- */
.pb-mold-area { display: flex; flex-direction: column; gap: 6px; }
.pb-mold-label { font-size: 0.72rem; color: #aaa; margin: 0; }
.pb-mold-btns { display: flex; gap: 8px; }
.pb-mold-btn {
    padding: 6px 14px;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.1);
    color: #bbb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.2s;
}
.pb-mold-btn.selected, .pb-mold-btn:hover { background: rgba(200,134,10,0.2); border-color: #c8860a; color: #f0b429; }

/* ---- POUR ZONE ---- */
.pb-pour-zone {
    display: flex;
    gap: 20px;
    align-items: center;
    background: rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 16px;
    border: 2px dashed rgba(255,255,255,0.1);
    min-height: 110px;
    transition: border-color 0.2s, background 0.2s;
}
.pb-pour-zone.drag-over { border-color: #f0b429; background: rgba(240,180,41,0.08); }
.pb-mold-visual {
    width: 90px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #8B5E3C;
    background: #2e1a08;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pb-mold-visual.square { border-radius: 8px; }
.pb-mold-visual.heart { 
    border-radius: 50% 50% 0 0;
    transform: rotate(-45deg);
    width: 70px;
    height: 70px;
}
.pb-mold-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    transition: height 0.3s ease, background-color 0.3s;
    border-radius: 0 0 50% 50%;
}
.pb-mold-drop-hint {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
    text-align: center;
    position: relative;
    z-index: 2;
}
.pb-pour-controls { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pb-pour-controls p { font-size: 0.8rem; color: #f0b429; font-weight: 700; margin: 0; }
.pb-pour-slider-track {
    width: 100%;
    height: 28px;
    background: #cc3333;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.15);
}
.pb-pour-green-zone {
    position: absolute;
    left: 30%;
    width: 40%;
    height: 100%;
    background: #33cc33;
    border-radius: 8px;
}
.pb-pour-indicator {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 8px;
    background: white;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
    left: 0%;
    transition: left 0.05s linear;
}

/* ---- RAW CAKE AREA (BAKE) ---- */
.pb-raw-cake-area {
    display: flex;
    gap: 20px;
    align-items: center;
}
.pb-raw-cake {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    border: 2px dashed rgba(255,255,255,0.15);
    cursor: grab;
    transition: all 0.2s;
}
.pb-raw-cake:hover { border-color: #c8860a; background: rgba(200,134,10,0.08); }
.pb-raw-cake span { font-size: 0.7rem; color: #aaa; }
.pb-cake-3d {
    width: 80px;
    height: 50px;
    border-radius: 50% / 30%;
    background: linear-gradient(145deg, #F9E4A0, #C8A030);
    box-shadow: 0 10px 0 #8a6010, inset 0 -5px 15px rgba(0,0,0,0.15);
    position: relative;
}
.pb-cake-3d::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 10%;
    width: 80%;
    height: 30%;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
}

/* Oven */
.pb-oven-dropzone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.pb-oven-dropzone span { font-size: 0.7rem; color: #aaa; }
.pb-oven-label { margin-top: 4px; }
.pb-oven-body {
    width: 180px;
    background: linear-gradient(145deg, #555, #333);
    border-radius: 12px 12px 6px 6px;
    border: 3px solid #222;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5), inset 0 2px rgba(255,255,255,.18);
    position: relative;
    transition: border-color 0.3s;
}
.pb-oven-body::after { content: ''; position: absolute; right: 8px; bottom: 5px; left: 8px; height: 3px; border-radius: 50%; background: #f0a42b; box-shadow: 0 0 12px #ff6b18; opacity: .65; }
.pb-oven-body.baking { border-color: #ff6600; box-shadow: 0 0 30px rgba(255,100,0,0.4); }
.pb-oven-brand { display: block; padding-top: 6px; color: #f0b429; font: 700 .62rem Cinzel, serif; letter-spacing: .2em; text-align: center; text-shadow: 0 0 8px rgba(240,180,41,.7); }
.pb-oven-handle { width: 72px; height: 7px; margin: 4px auto 0; border: 2px solid #777; border-radius: 8px; background: #222; box-shadow: 0 2px 0 #111; }
.pb-oven-window-frame {
    padding: 8px;
    background: #222;
}
.pb-oven-glass {
    width: 100%;
    height: 80px;
    background: #111;
    border-radius: 6px;
    border: 2px solid #444;
    position: relative;
    overflow: hidden;
    transition: background 0.5s;
}
.pb-oven-glass.heating { background: #1a0800; }
.pb-oven-heat {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 80%, rgba(255,80,0,0.5) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
    animation: ovenPulse 1.2s infinite alternate;
}
.pb-oven-spark { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #ffd54f; box-shadow: 0 0 9px #ff6d00; opacity: 0; }
.spark-one { left: 32%; bottom: 24%; }
.spark-two { right: 30%; bottom: 34%; }
.pb-oven-glass.heating .pb-oven-spark { animation: ovenSpark 1s ease-in-out infinite alternate; }
@keyframes ovenSpark { from { opacity: .15; transform: translateY(4px) scale(.7); } to { opacity: 1; transform: translateY(-18px) scale(1.2); } }
.pb-oven-glass.heating .pb-oven-heat { opacity: 1; }
@keyframes ovenPulse { from { opacity: 0.4; } to { opacity: 1; } }
.pb-oven-cake-inside {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 40px;
    border-radius: 50% / 30%;
    background: linear-gradient(145deg, #f5d280, #c8860a);
    box-shadow: 0 4px 0 #7a500a;
}
.pb-oven-controls {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    justify-content: center;
    background: #333;
}
.pb-oven-knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #777, #222);
    border: 2px solid #555;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.pb-oven-light { width: 8px; height: 8px; border-radius: 50%; background: #41e67a; box-shadow: 0 0 8px #41e67a; }

/* ---- BAKE METER ---- */
.pb-bake-meter-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    border: 2px solid rgba(255,200,0,0.2);
}
.pb-bake-labels {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.pb-bake-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pb-bake-lbl.bad { color: #ff5252; }
.pb-bake-lbl.ok { color: #ffca28; }
.pb-bake-lbl.perfect { color: #69f0ae; }
.pb-bake-meter-track {
    width: 100%;
    height: 32px;
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(255,255,255,0.1);
}
.pb-bake-zone { flex: 1; }
.bad-zone { background: linear-gradient(90deg, #b71c1c, #e53935); }
.ok-zone { background: linear-gradient(90deg, #f57f17, #fbc02d); }
.perfect-zone { background: linear-gradient(90deg, #1b5e20, #4caf50); flex: 1.2; }
.pb-bake-needle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    background: white;
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(255,255,255,0.9);
    left: 50%;
    transition: left 0.05s linear;
    transform: translateX(-50%);
}
.pb-bake-status {
    color: #ffca28;
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

/* ---- TOP STATION ---- */
.pb-topping-shelf {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pb-topping-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 60px;
}
.pb-topping-tool:hover, .pb-topping-tool.selected { background: rgba(200,134,10,0.2); border-color: #c8860a; transform: translateY(-3px); }
.pb-topping-tool span { font-size: 0.65rem; color: #ddd; font-weight: 600; }

/* Piping Bags */
.pb-piping-bag {
    width: 30px;
    height: 50px;
    border-radius: 4px 4px 0 0;
    clip-path: polygon(20% 0%, 80% 0%, 100% 60%, 50% 100%, 0% 60%);
    position: relative;
}
.pb-piping-bag.arequipe { background: linear-gradient(145deg, #e6a050, #c07820); }
.pb-piping-bag.ganache { background: linear-gradient(145deg, #5c3010, #2e1508); }
.pb-piping-bag.crema { background: linear-gradient(145deg, #fffde7, #e8e0c8); }
.pb-piping-bag.crema-chantilly,
.pb-piping-bag.merengue { background: radial-gradient(circle at 35% 22%, #fff, #fffaf0 48%, #e7ddcf 100%); box-shadow: 0 5px 0 #c8bbaa; }

.pb-cream-dollop {
    background: radial-gradient(ellipse at 35% 24%, #fff 0 12%, transparent 13%), radial-gradient(ellipse at 68% 30%, #fffdf8 0 20%, transparent 21%), linear-gradient(160deg, #fffef9, #eee5d8);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 3px 0 rgba(190,171,151,.85), 0 0 8px rgba(255,255,255,.65);
}

.pb-cream-dollop::before,
.pb-cream-dollop::after {
    content: '';
    position: absolute;
    left: 15%;
    width: 70%;
    height: 5px;
    border-top: 2px solid rgba(210,196,180,.7);
    border-radius: 50%;
}

.pb-cream-dollop::before { top: 7px; transform: rotate(-5deg); }
.pb-cream-dollop::after { top: 13px; transform: rotate(6deg); }

.pb-decor-bowl {
    width: 46px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.22);
}

.pb-decor-bowl.flores { background: radial-gradient(circle at 30% 35%, #fff 0 10%, #ef9ac2 11% 23%, transparent 24%), radial-gradient(circle at 65% 62%, #fff 0 10%, #df6da9 11% 23%, transparent 24%), #8f4771; }
.pb-decor-bowl.perlas { background: radial-gradient(circle, #fff 0 18%, #b9cbd5 20% 34%, transparent 36%) 4px 4px / 18px 18px, #647887; }
.pb-decor-bowl.caramelo { background: repeating-linear-gradient(135deg, #f0b44f 0 5px, #b96d16 6px 10px); }
.pb-decor-bowl.chocolate { background: radial-gradient(circle at 30% 25%, #8d4b28, #3d180a 65%); }
.pb-decor-bowl.fresa { background: radial-gradient(circle at 35% 30%, #ffb1b9 0 12%, #e94061 14% 65%, #9d203d 68%); }
.pb-decor-bowl.pepas { background: radial-gradient(ellipse, #b77b48 0 22%, transparent 24%) 3px 4px / 16px 14px, #4b2b1b; }
.pb-decor-bowl.chips { background: repeating-linear-gradient(35deg, #f7d779 0 4px, #9a4e24 5px 8px, #f0b74a 9px 12px); }
.pb-piping-bag.espuma { background: radial-gradient(circle at 45% 20%, #fff, #fffdf6 52%, #d9cec0); box-shadow: 0 5px 0 #bcae9e, 0 0 10px rgba(255,255,255,.45); }
.pb-piping-bag.mousse { background: radial-gradient(circle at 35% 18%, #fff, #fffdf7 44%, #d8cbb9); box-shadow: 0 5px 0 #b5a493, 0 0 14px rgba(255,255,255,.65); }

.pb-mousse-foam {
    background: radial-gradient(circle at 24% 28%, #fff 0 13%, transparent 14%), radial-gradient(circle at 60% 20%, #fff 0 17%, transparent 18%), radial-gradient(circle at 76% 54%, #f1eadf 0 18%, transparent 19%), linear-gradient(145deg, #fffefb, #e9dfd2);
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 55% 45% 48% 52% !important;
    box-shadow: 0 4px 0 #c5b5a2, 0 0 13px rgba(255,255,255,.85);
}

.pb-mousse-foam::before,
.pb-mousse-foam::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
}

.pb-mousse-foam::before { width: 9px; height: 9px; top: -7px; left: 9px; }
.pb-mousse-foam::after { width: 6px; height: 6px; top: -4px; right: 7px; }

/* Fruit Bowls */
.pb-fruit-bowl {
    width: 46px;
    height: 30px;
    border-radius: 0 0 50% 50%;
    border: 3px solid rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}
.pb-fruit-bowl::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 16px;
    border-radius: 50%;
}
.pb-fruit-bowl.fresas { background: #c0392b; }
.pb-fruit-bowl.fresas::before { background: radial-gradient(circle, #ff6b6b, #c0392b); }
.pb-fruit-bowl.cerezas { background: #8e1010; }
.pb-fruit-bowl.cerezas::before { background: radial-gradient(circle, #e74c3c, #8e1010); }
.pb-fruit-bowl.chispas { background: #2c3e50; }
.pb-fruit-bowl.chispas::before { background: repeating-linear-gradient(45deg, #e74c3c 0, #e74c3c 2px, #f1c40f 2px, #f1c40f 4px, #3498db 4px, #3498db 6px); }

/* ---- CAKE CANVAS ---- */
.pb-cake-canvas-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.pb-cake-canvas {
    position: relative;
    width: 200px;
    height: 180px;
    cursor: crosshair;
}
.pb-final-cake {
    width: 180px;
    height: 130px;
    border-radius: 50% / 25%;
    position: relative;
    overflow: visible;
    margin: 20px auto 0;
}
.pb-cake-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.base-layer {
    background: linear-gradient(145deg, #F9E4A0, #C8A030);
    box-shadow: 0 16px 0 #8a6010, inset 0 -8px 20px rgba(0,0,0,0.15);
}
.base-layer.choco { background: linear-gradient(145deg, #8B5E3C, #4a2810); box-shadow: 0 16px 0 #2e1508; }
.base-layer.redvelvet { background: linear-gradient(145deg, #D32F2F, #7f1515); box-shadow: 0 16px 0 #4e0000; }
.filling-layer { 
    top: 40%;
    height: 30px;
    background: transparent;
    border-radius: 0;
    transform: none;
    overflow: hidden;
}
.topping-layer {
    top: 0;
    pointer-events: none;
}
.pb-topping-dot {
    position: absolute;
    border-radius: 50%;
    animation: toppingPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: none;
}
@keyframes toppingPop {
    0% { transform: scale(0) translate(-50%, -50%); opacity: 0; }
    100% { transform: scale(1) translate(-50%, -50%); opacity: 1; }
}
.pb-selected-tool-indicator {
    font-size: 0.72rem;
    color: #f0b429;
    font-weight: 700;
    background: rgba(200,134,10,0.15);
    border: 1px solid rgba(200,134,10,0.3);
    padding: 4px 12px;
    border-radius: 999px;
}

/* ---- SCORE PANEL ---- */
.pb-score-panel {
    background: linear-gradient(180deg, #0d0f1e, #050810);
    border-left: 2px solid #1e2a5c;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pb-score-panel h3 {
    font-size: 0.75rem;
    color: #5c7cfa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.pb-score-breakdown { display: flex; flex-direction: column; gap: 10px; }
.pb-score-row { display: flex; flex-direction: column; gap: 4px; }
.pb-score-row span { font-size: 0.65rem; color: #888; }
.pb-score-row.total span { color: #f0b429; font-weight: 700; }
.pb-score-bar-wrap { background: rgba(255,255,255,0.08); border-radius: 4px; height: 8px; overflow: hidden; }
.pb-score-bar { height: 100%; background: linear-gradient(90deg, #5c7cfa, #a5d6a7); border-radius: 4px; transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pb-score-row.total .pb-score-bar { background: linear-gradient(90deg, #f0b429, #ff6f00); }
.pb-score-num { font-size: 0.85rem; font-weight: 800; color: #fff; }
.pb-grade { font-size: 2.5rem; font-weight: 900; text-align: center; min-height: 60px; line-height: 1; }
.pb-tip { font-size: 0.65rem; color: rgba(255,255,255,0.4); text-align: center; line-height: 1.4; font-style: italic; }

/* ---- ACTION / NEXT BTN ---- */
.pb-action-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #f0b429, #e67e22);
    border: none;
    border-radius: 999px;
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #a05010;
    transition: all 0.15s;
}
.pb-action-btn.big { font-size: 1rem; padding: 14px 28px; }
.pb-action-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.pb-action-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #a05010; }

.pb-next-station-btn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #5c7cfa, #3d5af1);
    border: none;
    border-radius: 999px;
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #1a2a9e;
    transition: all 0.15s;
    align-self: flex-start;
    margin-top: auto;
}
.pb-next-station-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }
.pb-next-station-btn:not(:disabled):hover { filter: brightness(1.1); transform: translateY(-2px); }

.pb-deliver-btn {
    padding: 14px 24px;
    background: linear-gradient(135deg, #4caf50, #1b5e20);
    border: none;
    border-radius: 999px;
    color: white;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 0 #0a3d0a;
    transition: all 0.15s;
    align-self: center;
    animation: deliverPulse 2s ease-in-out infinite;
}
@keyframes deliverPulse {
    0%, 100% { box-shadow: 0 4px 0 #0a3d0a, 0 0 0 rgba(76,175,80,0); }
    50% { box-shadow: 0 4px 0 #0a3d0a, 0 0 20px rgba(76,175,80,0.4); }
}
.pb-deliver-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ---- RESULT OVERLAY ---- */
.pb-result-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
    animation: resultFadeIn 0.4s ease;
}
@keyframes resultFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pb-result-card {
    background: linear-gradient(145deg, #1e0f05, #2e1a08);
    border: 3px solid #c8860a;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 0 60px rgba(200,134,10,0.3);
    animation: resultCardPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes resultCardPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pb-result-grade {
    font-size: 5rem;
    font-weight: 900;
    color: #f0b429;
    line-height: 1;
    text-shadow: 0 0 30px rgba(240,180,41,0.5);
}
.pb-result-label {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
}
.pb-result-stars { font-size: 2rem; letter-spacing: 6px; }
.pb-result-score {
    font-size: 1.4rem;
    font-weight: 900;
    color: #69f0ae;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 820px) {
    .pb-main-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
    .pb-customer-panel {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 2px solid #2e5c2e;
        padding: 12px;
    }
    .pb-score-panel {
        border-left: none;
        border-top: 2px solid #1e2a5c;
    }
    .pb-bakery-window { display: none; }
}