:root {
    --bg-dark: #1e272e; --text-light: #F5F5F5;
    --grass: #55a04f; --road: #7f8c8d; --island: #3e7a36;
}

body { font-family: 'Segoe UI', sans-serif; background-color: var(--bg-dark); color: var(--text-light); margin: 0; display: flex; justify-content: center; overflow: hidden; user-select: none; }

.map-theme-1 { --grass: #55a04f; --road: #7f8c8d; --island: #3e7a36; }
.map-theme-2 { --grass: #d35400; --road: #e67e22; --island: #a04000; }
.map-theme-3 { --grass: #bdc3c7; --road: #ecf0f1; --island: #95a5a6; }
.map-theme-4 { --grass: #2c3e50; --road: #1a252f; --island: #17202a; }
.map-theme-5 { --grass: #8e44ad; --road: #9b59b6; --island: #5b2c6f; }

.screen { position: absolute; width: 100%; height: 100vh; background: radial-gradient(circle, #2f3640 0%, #111 100%); z-index: 2000; display: none; justify-content: center; align-items: center; flex-direction: column; }
.screen.active { display: flex; }
.logo-box { text-align: center; background: #fff; padding: 15px 30px; border-radius: 10px; border: 5px solid #FFC107; box-shadow: 0 8px 20px rgba(0,0,0,0.8); transform: rotate(-2deg); margin-bottom: 25px;}
.logo-box h1 { color: #FF3F34; margin: 0; font-weight: 900; line-height: 1; text-transform: uppercase;}
.logo-box .subtitle { color: #333; margin: 5px 0 0 0; font-weight: bold;}
.screen p { color: #ccc; margin-bottom: 25px; font-size: 18px; font-weight: bold; text-align: center; }

.menu-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; }
.action-btn { font-size: 15px; padding: 12px 20px; border-radius: 6px; border: none; font-weight: bold; cursor: pointer; transition: 0.2s; background: #555; color: white; text-transform: uppercase; box-shadow: 0 4px 0 #333; width: 100%;}
.action-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 7px 0 #333; }
.action-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #333; }
.action-btn.success { background: #0be881; color: #111; box-shadow: 0 4px 0 #05c46b; }
.action-btn.danger { background: #ff5e57; color: white; box-shadow: 0 4px 0 #c0392b; }

.pizza-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: 550px; max-height: 350px; overflow-y: auto; padding: 10px;}
.pizza-option { background: #2c3e50; padding: 10px; border-radius: 10px; text-align: center; border: 3px solid #1e272e; cursor: pointer; transition: 0.2s; }
.pizza-option:hover { background: #34495e; }
.pizza-option.selected { border-color: #FFC107; background: #3a2a00; transform: scale(1.05); }
.pizza-option .icon { font-size: 32px; margin-bottom: 5px; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }

#game-container { width: 100vw; max-width: 1150px; height: 100vh; display: flex; flex-direction: row; background-color: var(--bg-dark); }
.side-panel { width: 180px; display: flex; flex-direction: column; background: #111; z-index: 100; padding: 15px 0; overflow-y: auto;}
#hubs-area { align-items: center; justify-content: flex-start; gap: 12px; border-right: 5px solid #FFC107; box-shadow: 8px 0 15px rgba(0,0,0,0.5); }
#right-panel { align-items: center; justify-content: flex-start; gap: 15px; border-left: 5px solid #FFC107; box-shadow: -8px 0 15px rgba(0,0,0,0.5); }

.stat-box { width: 85%; background: #1e272e; padding: 10px; border-radius: 6px; border: 2px solid #333; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.stat-box h4 { margin: 0 0 8px 0; color: #ccc; font-size: 13px; letter-spacing: 1px; }
.stat-box .val { font-size: 22px; font-weight: bold; }

.pizza-hub { width: 85px; height: 85px; flex-shrink: 0; background: #f1f2f6; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: grab; color: #111; font-weight: bold; border: 4px solid #bdc3c7; box-shadow: 0 4px 0 #7f8c8d; transition: 0.1s; font-size: 12px;}
.pizza-hub:hover { border-color: #FFC107; transform: translateY(-4px); box-shadow: 0 8px 0 rgba(211,84,0,0.8); }
.pizza-hub:active { cursor: grabbing; transform: translateY(2px); box-shadow: 0 2px 0 #7f8c8d; }
.pizza-icon { font-size: 32px; filter: drop-shadow(0 3px 2px rgba(0,0,0,0.3)); margin-bottom: 2px;}

#map-area { flex-grow: 1; position: relative; overflow: hidden; background-color: var(--grass); background-image: radial-gradient(var(--island) 15%, transparent 16%), radial-gradient(var(--island) 15%, transparent 16%); background-size: 40px 40px; background-position: 0 0, 20px 20px; transition: background-color 1s; }
.road { position: absolute; background-color: var(--road); box-sizing: border-box; box-shadow: inset 0 0 15px rgba(0,0,0,0.2); transition: background-color 1s; }
.road.horizontal { width: 100%; height: 45px; margin-top: -22.5px; border-top: 2px dashed #bdc3c7; border-bottom: 2px dashed #bdc3c7; }
.road.vertical { width: 45px; height: 100%; margin-left: -22.5px; border-left: 2px dashed #bdc3c7; border-right: 2px dashed #bdc3c7; }

#central-island { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 110px; background-color: var(--grass); background-image: radial-gradient(var(--island) 15%, transparent 16%), radial-gradient(var(--island) 15%, transparent 16%); background-size: 40px 40px; border: 4px solid var(--island); border-radius: 10px; z-index: 5; box-shadow: 0 8px 15px rgba(0,0,0,0.4); transition: 1s;}
#central-pizzeria { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 95px; height: 75px; background: #2f3542; border-radius: 6px; box-shadow: 0 12px 20px rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; border: 3px solid #111; }
.awning { position: absolute; top: -8px; width: 115%; height: 28px; background: repeating-linear-gradient(45deg, #FF3F34, #FF3F34 12px, #f1f2f6 12px, #f1f2f6 24px); border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.4); border: 2px solid #111; }
.pizz-text { color: white; font-weight: 900; font-size: 11px; margin-top: 15px; text-align: center; text-shadow: 1px 1px 0 #000; line-height: 1.1; letter-spacing: 1px; }

.house-zone { position: absolute; width: 110px; height: 110px; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; z-index: 15; cursor: crosshair;}
.house-visual { position: relative; width: 38px; height: 38px; background-color: #ecf0f1; border-radius: 3px; box-shadow: 2px 4px 8px rgba(0,0,0,0.5); }
.roof { position: absolute; top: -16px; width: 0; height: 0; border-left: 19px solid transparent; border-right: 19px solid transparent; border-bottom: 19px solid #e74c3c; filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.2)); }
.roof.blue { border-bottom-color: #3498db; }
.roof.green { border-bottom-color: #2ecc71; }
.roof.purple { border-bottom-color: #9b59b6; }

.order-bubble { display: none; position: absolute; top: -38px; left: 50%; transform: translateX(-50%); width: 55px; background: white; border: 2px solid #111; border-radius: 8px; padding: 3px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); flex-direction: column; align-items: center; z-index: 20; transition: 0.2s; pointer-events: none;}
.order-bubble::after { content: ''; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-style: solid; border-color: #111 transparent transparent transparent; }
.order-bubble .icon { font-size: 22px; margin-bottom: 2px; }

.influencer-bubble { border-color: #FFC107 !important; background: #fffde7; box-shadow: 0 0 15px #FFC107; transform: translateX(-50%) scale(1.1);}
.influencer-bubble::after { border-color: #FFC107 transparent transparent transparent !important; }
.roulette-anim { animation: shake 0.15s infinite; }
@keyframes shake { 0% { transform: translateX(-50%) rotate(0deg); } 25% { transform: translateX(-52%) rotate(-5deg); } 75% { transform: translateX(-48%) rotate(5deg); } }

.timer-bar { width: 90%; height: 5px; background: #ddd; border-radius: 2px; overflow: hidden; border: 1px solid #999; }
.timer-fill { height: 100%; background: #0be881; width: 100%; transition: width 0.5s linear, background-color 0.3s; }

.scooter { position: fixed; font-size: 28px; z-index: 9999; pointer-events: none; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.6)); top: 0; left: 0; transform-origin: center; }
.manual-tip { position: absolute; font-size: 32px; cursor: pointer; z-index: 900; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.6)); animation: floatTip 0.8s infinite alternate, fadeOutTip 3s forwards; transform: translate(-50%, -100%); }
.manual-tip:hover { transform: translate(-50%, -100%) scale(1.2); }
@keyframes floatTip { from { margin-top: 0; } to { margin-top: -15px; } }
@keyframes fadeOutTip { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -100%) scale(0); } }

.minigame-layout { display: flex; width: 100%; max-width: 850px; margin-top: 15px; align-items: flex-start; justify-content: space-between; }
.mg-panel { background: rgba(0,0,0,0.5); padding: 15px; border-radius: 10px; border: 2px solid #444; flex: 1; min-height: 250px; display: flex; flex-direction: column; align-items: center; }
.mg-panel.center-panel { flex: 1.5; border-color: #FFC107; background: rgba(30, 30, 20, 0.8); }
.mg-panel h3 { margin: 0 0 12px 0; color: #FFC107; font-size: 16px; }

.mg-ing-btn { background: #fff; border: 2px solid #ccc; font-size: 24px; border-radius: 8px; cursor: grab; margin: 4px; transition: 0.1s; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px;}
.mg-ing-btn:active { cursor: grabbing; transform: scale(0.9); }

.pizza-crust { width: 180px; height: 180px; background: #e67e22; border: 10px solid #d35400; border-radius: 50%; position: relative; box-shadow: inset 0 0 15px rgba(0,0,0,0.3), 0 8px 15px rgba(0,0,0,0.5); overflow: hidden; }
.topping-visual { position: absolute; font-size: 22px; pointer-events: none; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4)); transform: translate(-50%, -50%); }
.mg-actions { margin-top: 15px; display: flex; gap: 10px; width: 100%; justify-content: center;}

.custom-icon-section { margin-top: 10px; text-align: center; width: 100%; }
.custom-icon-btn { background: #2c3e50; border: 2px solid #bdc3c7; border-radius: 6px; font-size: 20px; padding: 4px 8px; cursor: pointer; transition: 0.2s; }
.custom-icon-btn:hover { background: #34495e; }
.custom-icon-btn.selected { border-color: #FFC107; background: #3a2a00; transform: scale(1.1); }
#custom-pizza-name { background: #333; color: white; border: 2px solid #FFC107; padding: 10px; border-radius: 6px; font-size: 14px; width: 85%; text-align: center; margin: 5px 0 10px 0; outline: none; font-weight: bold;}
#custom-pizza-name:focus { border-color: #0be881; }

#toast-container { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #111; color: white; padding: 12px 20px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.6); font-size: 14px; font-weight: bold; animation: popIn 0.2s forwards, popOut 0.3s forwards 1.7s; border-bottom: 5px solid #0be881; text-transform: uppercase; letter-spacing: 1px; text-align: center; }
.toast.error { border-bottom-color: var(--primary); }
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes popOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } }